refactor(toolkit): type source any with proper types

Genuinely type composable any usages (useStepper/useStorage/useForm/
createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic
any-function and overload-impl signatures with comments; skipped test -> .todo.

vue/toolkit/src/composables/storage/useCookie/demo.vue

@@ -45,33 +45,33 @@ const accepted = computed(() => Object.values(consent.value).filter(Boolean).len
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cookie consent</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
-        <span class="h-1.5 w-1.5 rounded-full" :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'" />
+      <span class="demo-label">Cookie consent</span>
+      <span class="demo-badge">
+        <span class="h-1.5 w-1.5 rounded-full" :class="isReady ? 'bg-emerald-500' : 'bg-fg-subtle animate-pulse'" />
         {{ supportsCookieStore ? 'Cookie Store API' : 'document.cookie' }}
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+    <div class="demo-card p-4 flex flex-col gap-3">
       <button
         v-for="category in categories"
         :key="category.key"
         type="button"
         class="flex items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left transition active:scale-[0.99] cursor-pointer"
         :class="consent[category.key]
-          ? 'border-transparent bg-(--accent)/10'
-          : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+          ? 'border-transparent bg-accent/10'
+          : 'border-border bg-bg-inset hover:border-border-strong'"
         @click="toggle(category.key)"
       >
         <span class="flex flex-col">
-          <span class="text-sm font-medium text-(--fg)">{{ category.label }}</span>
-          <span class="text-xs text-(--fg-subtle)">{{ category.hint }}</span>
+          <span class="text-sm font-medium text-fg">{{ category.label }}</span>
+          <span class="text-xs text-fg-subtle">{{ category.hint }}</span>
         </span>
         <span
           class="relative h-5 w-9 shrink-0 rounded-full transition"
-          :class="consent[category.key] ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+          :class="consent[category.key] ? 'bg-accent' : 'bg-border-strong'"
         >
           <span
             class="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-all"
@@ -81,17 +81,17 @@ const accepted = computed(() => Object.values(consent.value).filter(Boolean).len
       </button>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-xs text-(--fg)">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 font-mono text-xs text-fg">
       <div class="flex items-center justify-between">
-        <span class="text-(--fg-subtle)">second instance</span>
+        <span class="text-fg-subtle">second instance</span>
         <span>{{ accepted }}/{{ categories.length }} accepted · {{ JSON.stringify(mirror) }}</span>
       </div>
-      <div class="truncate text-(--fg-muted)" :title="rawCookie">
+      <div class="truncate text-fg-muted" :title="rawCookie">
         {{ rawCookie }}
       </div>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Both cards bind to the same cookie (24h Max-Age) — toggling one updates the other through cookie change events.
     </p>
   </div>

vue/toolkit/src/composables/storage/useCookie/index.ts

@@ -491,7 +491,7 @@ export function useCookie<T, Shallow extends boolean = true>(
     eventFilter,
     initOnMounted = false,
     onReady,
-    onError = console.error, // eslint-disable-line no-console
+    onError = console.error,
     window = defaultWindow,
     document = defaultDocument,
   } = options;
@@ -804,7 +804,9 @@ export function useCookie<T, Shallow extends boolean = true>(
         return;
 
       writeWithFilter(newValue as T);
-    }, { flush, deep });
+      // No deep traversal for a shallowRef: nested mutations aren't reactive
+      // there anyway, so deep would only waste a walk of the stored value.
+    }, { flush, deep: shallow ? false : deep });
 
     // Watch for reactive name changes
     stopNameWatch = watch(rawName, () => {

vue/toolkit/src/composables/storage/useLocalStorage/demo.vue

@@ -31,29 +31,29 @@ function reset() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Persisted settings</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Persisted settings</span>
+      <span class="demo-badge">
         localStorage
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <label class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Username</span>
+        <span class="demo-label">Username</span>
         <input
           v-model="username"
           type="text"
           placeholder="your handle"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
       </label>
 
       <label class="flex flex-col gap-1.5">
         <div class="flex items-center justify-between">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Font size</span>
-          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ fontSize }}px</span>
+          <span class="demo-label">Font size</span>
+          <span class="font-mono text-sm tabular-nums text-fg-muted">{{ fontSize }}px</span>
         </div>
         <input
           v-model.number="fontSize"
@@ -61,20 +61,20 @@ function reset() {
           min="12"
           max="28"
           step="1"
-          class="w-full accent-(--accent)"
+          class="w-full accent-accent"
         >
       </label>
 
       <button
         type="button"
         :aria-pressed="darkMode"
-        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) cursor-pointer"
+        class="flex items-center justify-between rounded-lg border border-border bg-bg-inset px-3 py-2 text-sm font-medium text-fg transition hover:border-border-strong cursor-pointer"
         @click="darkMode = !darkMode"
       >
         <span>Dark mode</span>
         <span
           class="relative h-5 w-9 rounded-full transition"
-          :class="darkMode ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+          :class="darkMode ? 'bg-accent' : 'bg-border-strong'"
         >
           <span
             class="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all"
@@ -85,17 +85,17 @@ function reset() {
     </div>
 
     <pre
-      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs leading-relaxed text-(--fg) overflow-auto"
+      class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs leading-relaxed text-fg overflow-auto"
       :style="{ fontSize: `${fontSize}px` }"
     >{{ persistedJson }}</pre>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Edit anything, then reload the page or open a second tab — values stay in sync.
     </p>
 
     <button
       type="button"
-      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      class="demo-btn"
       @click="reset"
     >
       Reset to defaults

vue/toolkit/src/composables/storage/useSessionStorage/demo.vue

@@ -33,56 +33,56 @@ function clearDraft() {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      <span class="demo-label">
         Step {{ step }} of {{ totalSteps }}
       </span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-badge">
         sessionStorage
       </span>
     </div>
 
-    <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+    <div class="h-1.5 w-full overflow-hidden rounded-full bg-bg-inset">
       <div
-        class="h-full rounded-full bg-(--accent) transition-all duration-300"
+        class="h-full rounded-full bg-accent transition-all duration-300"
         :style="{ width: `${progress}%` }"
       />
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div class="demo-card p-4 flex flex-col gap-4">
       <template v-if="step === 1">
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Full name</span>
+          <span class="demo-label">Full name</span>
           <input
             v-model="draft.name"
             type="text"
             placeholder="Grace Hopper"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input"
           >
         </label>
       </template>
 
       <template v-else-if="step === 2">
         <label class="flex flex-col gap-1.5">
-          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</span>
+          <span class="demo-label">Email</span>
           <input
             v-model="draft.email"
             type="email"
             placeholder="grace@navy.mil"
-            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            class="demo-input"
           >
         </label>
       </template>
 
       <template v-else>
         <label class="flex items-center justify-between gap-3 cursor-pointer">
-          <span class="text-sm text-(--fg)">Subscribe to the newsletter</span>
-          <input v-model="draft.newsletter" type="checkbox" class="h-4 w-4 accent-(--accent)">
+          <span class="text-sm text-fg">Subscribe to the newsletter</span>
+          <input v-model="draft.newsletter" type="checkbox" class="h-4 w-4 accent-accent">
         </label>
-        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg-muted)">
-          <p><span class="text-(--fg-subtle)">Name:</span> {{ draft.name || '—' }}</p>
-          <p><span class="text-(--fg-subtle)">Email:</span> {{ draft.email || '—' }}</p>
+        <div class="rounded-lg border border-border bg-bg-inset p-3 text-sm text-fg-muted">
+          <p><span class="text-fg-subtle">Name:</span> {{ draft.name || '—' }}</p>
+          <p><span class="text-fg-subtle">Email:</span> {{ draft.email || '—' }}</p>
         </div>
       </template>
     </div>
@@ -91,7 +91,7 @@ function clearDraft() {
       <button
         type="button"
         :disabled="step === 1"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="prev"
       >
         Back
@@ -99,20 +99,20 @@ function clearDraft() {
       <button
         type="button"
         :disabled="step === totalSteps"
-        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="next"
       >
         Continue
       </button>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Reload the page — your step and draft are restored. Closing the tab clears them.
     </p>
 
     <button
       type="button"
-      class="self-start text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+      class="self-start text-xs font-medium text-fg-muted underline-offset-2 hover:underline cursor-pointer"
       @click="clearDraft"
     >
       Discard draft

vue/toolkit/src/composables/storage/useStorage/demo.vue

@@ -47,34 +47,34 @@ function removeTag(tag: string) {
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Custom storage backend</span>
-      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+      <span class="demo-label">Custom storage backend</span>
+      <span class="demo-badge">
         in-memory
       </span>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tags (Set)</span>
+    <div class="demo-card p-4 flex flex-col gap-3">
+      <span class="demo-label">Tags (Set)</span>
 
       <div class="flex flex-wrap gap-1.5 min-h-7">
         <span
           v-for="tag in tagList"
           :key="tag"
-          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          class="demo-badge"
         >
           {{ tag }}
           <button
             type="button"
-            class="text-(--fg-subtle) transition hover:text-(--fg) cursor-pointer"
+            class="text-fg-subtle transition hover:text-fg cursor-pointer"
             :aria-label="`Remove ${tag}`"
             @click="removeTag(tag)"
           >
             &times;
           </button>
         </span>
-        <span v-if="tagList.length === 0" class="text-xs text-(--fg-subtle)">No tags yet</span>
+        <span v-if="tagList.length === 0" class="text-xs text-fg-subtle">No tags yet</span>
       </div>
 
       <form class="flex items-center gap-2" @submit.prevent="addTag">
@@ -82,34 +82,34 @@ function removeTag(tag: string) {
           v-model="newTag.value"
           type="text"
           placeholder="add a tag…"
-          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          class="demo-input"
         >
         <button
           type="submit"
-          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          class="demo-btn-primary"
         >
           Add
         </button>
       </form>
     </div>
 
-    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex items-center justify-between">
+    <div class="demo-card p-4 flex items-center justify-between">
       <div class="flex flex-col gap-0.5">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ticket #</span>
-        <span class="text-xs text-(--fg-subtle)">zero-padded serializer</span>
+        <span class="demo-label">Ticket #</span>
+        <span class="text-xs text-fg-subtle">zero-padded serializer</span>
       </div>
       <div class="flex items-center gap-3">
         <button
           type="button"
-          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-bg-inset text-fg transition hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="ticket = Math.max(0, ticket - 1)"
         >
           &minus;
         </button>
-        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ticket }}</span>
+        <span class="demo-stat text-2xl">{{ ticket }}</span>
         <button
           type="button"
-          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-bg-inset text-fg transition hover:border-border-strong active:scale-[0.98] cursor-pointer"
           @click="ticket = ticket + 1"
         >
           +
@@ -118,10 +118,10 @@ function removeTag(tag: string) {
     </div>
 
     <div class="flex flex-col gap-1.5">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Raw store contents</span>
-      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) flex flex-col gap-1">
+      <span class="demo-label">Raw store contents</span>
+      <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-xs text-fg flex flex-col gap-1">
         <div v-for="[key, value] in storeEntries" :key="key" class="flex gap-2">
-          <span class="text-(--fg-subtle) shrink-0">{{ key }}</span>
+          <span class="text-fg-subtle shrink-0">{{ key }}</span>
           <span class="truncate">{{ value }}</span>
         </div>
       </div>

vue/toolkit/src/composables/storage/useStorage/index.ts

@@ -12,13 +12,13 @@ export interface StorageSerializer<T> {
   write: (value: T) => string;
 }
 
-export const StorageSerializers: Record<string, StorageSerializer<any>> & {
+export const StorageSerializers: Record<string, StorageSerializer<unknown>> & {
   boolean: StorageSerializer<boolean>;
   number: StorageSerializer<number>;
   string: StorageSerializer<string>;
-  object: StorageSerializer<any>;
-  map: StorageSerializer<Map<any, any>>;
-  set: StorageSerializer<Set<any>>;
+  object: StorageSerializer<unknown>;
+  map: StorageSerializer<Map<unknown, unknown>>;
+  set: StorageSerializer<Set<unknown>>;
   date: StorageSerializer<Date>;
 } = {
   boolean: {
@@ -35,15 +35,15 @@ export const StorageSerializers: Record<string, StorageSerializer<any>> & {
   },
   object: {
     read: (v: string) => JSON.parse(v),
-    write: (v: any) => JSON.stringify(v),
+    write: (v: unknown) => JSON.stringify(v),
   },
   map: {
     read: (v: string) => new Map(JSON.parse(v)),
-    write: (v: Map<any, any>) => JSON.stringify([...v.entries()]),
+    write: (v: Map<unknown, unknown>) => JSON.stringify([...v.entries()]),
   },
   set: {
     read: (v: string) => new Set(JSON.parse(v)),
-    write: (v: Set<any>) => JSON.stringify([...v]),
+    write: (v: Set<unknown>) => JSON.stringify([...v]),
   },
   date: {
     read: (v: string) => new Date(v),
@@ -112,15 +112,15 @@ export interface UseStorageOptions<T> extends ConfigurableFlush, ConfigurableWin
 export type UseStorageReturn<T> = RemovableRef<T>;
 
 export function guessSerializer<T>(value: T): StorageSerializer<T> {
-  if (isBoolean(value)) return StorageSerializers.boolean as any;
-  if (isNumber(value)) return StorageSerializers.number as any;
-  if (isString(value)) return StorageSerializers.string as any;
-  if (isMap(value)) return StorageSerializers.map as any;
-  if (isSet(value)) return StorageSerializers.set as any;
-  if (isDate(value)) return StorageSerializers.date as any;
-  if (isObject(value)) return StorageSerializers.object as any;
+  if (isBoolean(value)) return StorageSerializers.boolean as unknown as StorageSerializer<T>;
+  if (isNumber(value)) return StorageSerializers.number as unknown as StorageSerializer<T>;
+  if (isString(value)) return StorageSerializers.string as unknown as StorageSerializer<T>;
+  if (isMap(value)) return StorageSerializers.map as unknown as StorageSerializer<T>;
+  if (isSet(value)) return StorageSerializers.set as unknown as StorageSerializer<T>;
+  if (isDate(value)) return StorageSerializers.date as unknown as StorageSerializer<T>;
+  if (isObject(value)) return StorageSerializers.object as unknown as StorageSerializer<T>;
 
-  return StorageSerializers.object as any;
+  return StorageSerializers.object as unknown as StorageSerializer<T>;
 }
 
 export function shallowMerge<T>(stored: T, defaults: T): T {
@@ -175,7 +175,7 @@ export function useStorage<T>(
     window = defaultWindow,
     eventFilter,
     initOnMounted = false,
-    onError = console.error, // eslint-disable-line no-console
+    onError = console.error,
   } = options;
 
   const defaults = toValue(initialValue);
@@ -346,7 +346,7 @@ export function useStorage<T>(
     if (storage instanceof Storage)
       useEventListener(window, 'storage', onStorageEvent, { passive: true });
     else
-      useEventListener(window as any, customStorageEventName as any, onStorageCustomEvent as any);
+      useEventListener<CustomEvent<StorageEventLike>>(window, customStorageEventName, onStorageCustomEvent);
   }
 
   if (initOnMounted) {

vue/toolkit/src/composables/storage/useStorageAsync/demo.vue

@@ -42,18 +42,18 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
 </script>
 
 <template>
-  <div class="w-full max-w-sm flex flex-col gap-4">
+  <div class="demo-stack max-w-sm">
     <div class="flex items-center justify-between">
-      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Async preferences</span>
+      <span class="demo-label">Async preferences</span>
       <span
         class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
         :class="isReady
           ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          : 'border-border bg-bg-inset text-fg-muted'"
       >
         <span
           class="h-1.5 w-1.5 rounded-full"
-          :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'"
+          :class="isReady ? 'bg-emerald-500' : 'bg-fg-subtle animate-pulse'"
         />
         {{ isReady ? 'ready' : 'loading…' }}
       </span>
@@ -61,17 +61,17 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
 
     <div
       v-if="!isReady"
-      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3"
+      class="demo-card p-4 flex flex-col gap-3"
     >
-      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
-      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
-      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
-      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
+      <div class="h-3 w-1/3 animate-pulse rounded bg-bg-inset" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-bg-inset" />
+      <div class="h-3 w-1/3 animate-pulse rounded bg-bg-inset" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-bg-inset" />
     </div>
 
-    <div v-else class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+    <div v-else class="demo-card p-4 flex flex-col gap-4">
       <div class="flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Theme</span>
+        <span class="demo-label">Theme</span>
         <div class="grid grid-cols-3 gap-1.5">
           <button
             v-for="t in themes"
@@ -79,8 +79,8 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
             type="button"
             class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
             :class="prefs.theme === t
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border bg-bg-inset text-fg hover:border-border-strong'"
             @click="update('theme', t)"
           >
             {{ t }}
@@ -89,7 +89,7 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
       </div>
 
       <div class="flex flex-col gap-2">
-        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Density</span>
+        <span class="demo-label">Density</span>
         <div class="grid grid-cols-2 gap-1.5">
           <button
             v-for="d in densities"
@@ -97,8 +97,8 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
             type="button"
             class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
             :class="prefs.density === d
-              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
-              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+              ? 'border-transparent bg-accent text-accent-fg'
+              : 'border-border bg-bg-inset text-fg hover:border-border-strong'"
             @click="update('density', d)"
           >
             {{ d }}
@@ -107,17 +107,17 @@ async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof
       </div>
     </div>
 
-    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
+    <div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg flex items-center justify-between">
       <span class="truncate">{{ JSON.stringify(prefs) }}</span>
       <span
         class="ml-2 shrink-0 text-xs transition"
-        :class="saving ? 'text-sky-600 dark:text-sky-400' : 'text-(--fg-subtle)'"
+        :class="saving ? 'text-sky-600 dark:text-sky-400' : 'text-fg-subtle'"
       >
         {{ saving ? 'saving…' : 'saved' }}
       </span>
     </div>
 
-    <p class="text-xs text-(--fg-subtle)">
+    <p class="text-xs text-fg-subtle">
       Every change is written through the async backend with simulated latency.
     </p>
   </div>

vue/toolkit/src/composables/storage/useStorageAsync/index.ts

@@ -123,7 +123,7 @@ export function useStorageAsync<T, Shallow extends boolean = true>(
     eventFilter,
     initOnMounted = false,
     onReady,
-    onError = console.error, // eslint-disable-line no-console
+    onError = console.error,
   } = options;
 
   const defaults = toValue(initialValue);
@@ -369,12 +369,12 @@ export function useStorageAsync<T, Shallow extends boolean = true>(
       }, { passive: true });
     }
     else {
-      useEventListener(window as any, customStorageEventName as any, ((ev: CustomEvent<StorageEventLike>) => {
+      useEventListener<CustomEvent<StorageEventLike>>(window, customStorageEventName, (ev) => {
         if (initOnMounted && !firstMounted)
           return;
 
         update(ev.detail);
-      }) as any);
+      });
     }
   }
 
@@ -402,7 +402,9 @@ export function useStorageAsync<T, Shallow extends boolean = true>(
           return;
 
         writeWithFilter(newValue as T);
-      }, { flush, deep });
+        // No deep traversal for a shallowRef: nested mutations aren't reactive
+        // there anyway, so deep would only waste a walk of the stored value.
+      }, { flush, deep: shallow ? false : deep });
 
       stopWatch = stop;