feat(storage): enhance useStorageAsync with cross-instance sync and event handling

2026-06-10 15:09:46 +07:00
parent 07937e26db
commit a82f5f2dfd
25 changed files with 3725 additions and 199 deletions
@@ -9,51 +9,54 @@
@custom-variant dark (&:where(.dark, .dark *));

@theme {
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
+  --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;

-  --radius-card: 0.75rem;
+  --radius-card: 0.5rem;
 }

-/* ── Semantic design tokens — Geist-minimal ──────────────────────────────── */
+/* ── Semantic design tokens — ink on warm paper, signal-orange instruments ──
+   The site reads like a tool-maker's field manual: warm neutral surfaces,
+   hairline rules, international-orange accents, code-comment labels. */
 :root {
-  --bg: #ffffff;
-  --bg-subtle: #fafafa;
-  --bg-elevated: #ffffff;
-  --bg-inset: #f4f4f5;
-  --border: #ececec;
-  --border-strong: #d8d8dc;
-  --fg: #18181b;
-  --fg-muted: #52525b;
-  --fg-subtle: #a1a1aa;
-  --accent: #2563eb;
-  --accent-hover: #1d4ed8;
-  --accent-fg: #ffffff;
-  --accent-subtle: #eef3ff;
-  --accent-text: #2563eb;
-  --header-bg: rgba(255, 255, 255, 0.72);
-  --ring: rgba(37, 99, 235, 0.35);
-  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
+  --bg: #faf8f3;
+  --bg-subtle: #f4f1e8;
+  --bg-elevated: #fffdf8;
+  --bg-inset: #eeeadf;
+  --border: #e5dfd0;
+  --border-strong: #cfc6b1;
+  --fg: #211e18;
+  --fg-muted: #5d574b;
+  --fg-subtle: #93897a;
+  --accent: #d9480f;
+  --accent-hover: #bf3f0d;
+  --accent-fg: #fffdf8;
+  --accent-subtle: #f7e7d8;
+  --accent-text: #c2410c;
+  --header-bg: rgba(250, 248, 243, 0.82);
+  --ring: rgba(217, 72, 15, 0.35);
+  --shadow-card: 0 1px 2px rgba(56, 44, 28, 0.05), 0 1px 3px rgba(56, 44, 28, 0.07);
  color-scheme: light;
 }

 .dark {
-  --bg: #0a0a0a;
-  --bg-subtle: #0f0f10;
-  --bg-elevated: #141416;
-  --bg-inset: #1b1b1e;
-  --border: #232327;
-  --border-strong: #34343a;
-  --fg: #ededed;
-  --fg-muted: #a1a1aa;
-  --fg-subtle: #6c6c75;
-  --accent: #3b82f6;
-  --accent-hover: #60a5fa;
-  --accent-fg: #ffffff;
-  --accent-subtle: #14203a;
-  --accent-text: #74a8ff;
-  --header-bg: rgba(10, 10, 10, 0.72);
-  --ring: rgba(59, 130, 246, 0.4);
+  --bg: #161310;
+  --bg-subtle: #1b1813;
+  --bg-elevated: #211d17;
+  --bg-inset: #2a251c;
+  --border: #322c22;
+  --border-strong: #4a4231;
+  --fg: #ece7db;
+  --fg-muted: #b2a995;
+  --fg-subtle: #7d7363;
+  --accent: #ff7d33;
+  --accent-hover: #ff9a59;
+  --accent-fg: #1d0e04;
+  --accent-subtle: #3a2415;
+  --accent-text: #ff9c63;
+  --header-bg: rgba(22, 19, 16, 0.82);
+  --ring: rgba(255, 125, 51, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
 }
@@ -90,6 +93,55 @@ code, pre, kbd {
 *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; }
 *::-webkit-scrollbar-track { background: transparent; }

+/* ── Identity helpers ─────────────────────────────────────────────────────── */
+
+/* Section labels styled as code comments: `// sensors` */
+.comment-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.07em;
+  text-transform: lowercase;
+  color: var(--fg-subtle);
+}
+.comment-label::before {
+  content: '// ';
+  color: var(--accent-text);
+  opacity: 0.75;
+}
+
+/* Engineering-grid backdrop for heroes, faded out radially */
+.blueprint {
+  background-image:
+    linear-gradient(var(--border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border) 1px, transparent 1px);
+  background-size: 28px 28px;
+  mask-image: radial-gradient(ellipse 75% 90% at 24% 8%, black 25%, transparent 72%);
+  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 24% 8%, black 25%, transparent 72%);
+}
+
+/* Staggered rise-in for card grids (landing / package index) */
+@keyframes rise-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.stagger > * {
+  animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.stagger > *:nth-child(1) { animation-delay: 0.03s; }
+.stagger > *:nth-child(2) { animation-delay: 0.07s; }
+.stagger > *:nth-child(3) { animation-delay: 0.11s; }
+.stagger > *:nth-child(4) { animation-delay: 0.15s; }
+.stagger > *:nth-child(5) { animation-delay: 0.19s; }
+.stagger > *:nth-child(6) { animation-delay: 0.23s; }
+.stagger > *:nth-child(7) { animation-delay: 0.27s; }
+.stagger > *:nth-child(8) { animation-delay: 0.31s; }
+.stagger > *:nth-child(n+9) { animation-delay: 0.35s; }
+
+@media (prefers-reduced-motion: reduce) {
+  .stagger > * { animation: none; }
+}
+
 /* Shiki dual-theme: switch to dark colors under .dark */
 .dark .shiki,
 .dark .shiki span {
@@ -100,6 +152,9 @@ code, pre, kbd {
  text-decoration: var(--shiki-dark-text-decoration) !important;
 }

+/* Code blocks sit on the warm surface, not on the theme's own background */
+.shiki { background-color: transparent !important; }
+
 /* ── Markdown (guide) typography ──────────────────────────────────────────── */
 .prose-docs {
  color: var(--fg-muted);
@@ -109,6 +164,7 @@ code, pre, kbd {
 .prose-docs > :first-child { margin-top: 0; }
 .prose-docs h1 {
  color: var(--fg);
+  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
@@ -116,6 +172,7 @@ code, pre, kbd {
 }
 .prose-docs h2 {
  color: var(--fg);
+  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
@@ -136,27 +193,28 @@ code, pre, kbd {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 500;
+  border-bottom: 1px dotted var(--border-strong);
 }
-.prose-docs a:hover { text-decoration: underline; }
+.prose-docs a:hover { border-bottom-color: var(--accent-text); }
 .prose-docs strong { color: var(--fg); font-weight: 600; }
 .prose-docs ul, .prose-docs ol { margin: 1rem 0; padding-left: 1.5rem; }
 .prose-docs ul { list-style: disc; }
 .prose-docs ol { list-style: decimal; }
 .prose-docs li { margin: 0.375rem 0; }
-.prose-docs li::marker { color: var(--fg-subtle); }
+.prose-docs li::marker { color: var(--accent-text); }
 .prose-docs blockquote {
-  border-left: 3px solid var(--border-strong);
+  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.25rem 0;
  color: var(--fg-muted);
 }
-.prose-docs hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
+.prose-docs hr { border: 0; border-top: 1px dashed var(--border-strong); margin: 2rem 0; }
 /* inline code */
 .prose-docs :not(pre) > code {
  font-size: 0.85em;
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
-  border-radius: 0.375rem;
+  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  color: var(--fg);
 }
@@ -164,7 +222,7 @@ code, pre, kbd {
 .prose-docs pre {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border);
-  border-radius: 0.625rem;
+  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.25rem 0;
@@ -183,7 +241,13 @@ code, pre, kbd {
  padding: 0.5rem 0.75rem;
  text-align: left;
 }
-.prose-docs th { background-color: var(--bg-subtle); color: var(--fg); font-weight: 600; }
+.prose-docs th {
+  background-color: var(--bg-subtle);
+  color: var(--fg);
+  font-weight: 600;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+}

 /* Page-enter fade for route transitions */
 .page-enter-active, .page-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }