robonen/tools
1
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrew Robonen
2026-06-10 15:09:46 +07:00
parent 07937e26db
commit a82f5f2dfd
25 changed files with 3725 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/app/components/DocsBadge.vue
+6 -13
View File
@@ -3,17 +3,8 @@
size?: 'sm' | 'md';
}>();
const kindColors: Record<string, string> = {
function: 'bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300',
class: 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300',
interface: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300',
type: 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300',
enum: 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300',
variable: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-500/15 dark:text-zinc-300',
component: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/15 dark:text-fuchsia-300',
guide: 'bg-teal-100 text-teal-700 dark:bg-teal-500/15 dark:text-teal-300',
};
// Monochrome instrument badges: the kind reads from the glyph, not a color.
// Components are the one structural exception and carry the accent.
const kindLabels: Record<string, string> = {
function: 'fn',
class: 'C',
@@ -29,8 +20,10 @@ const kindLabels: Record<string, string> = {
<template>
<span
:class="[
'inline-flex items-center justify-center rounded-md font-mono font-semibold shrink-0',
kindColors[kind] ?? kindColors.variable,
'inline-flex items-center justify-center rounded font-mono font-medium shrink-0 border',
kind === 'component'
? 'border-(--accent-subtle) bg-(--accent-subtle) text-(--accent-text)'
: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)',
size === 'sm' ? 'w-5 h-5 text-[10px]' : 'w-6 h-6 text-xs',
]"
:title="kind"
docs/app/components/DocsSearch.vue
+5 -7
View File
@@ -71,7 +71,7 @@ onUnmounted(() => globalThis.removeEventListener('keydown', onKeydown));
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
<circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
</svg>
<span class="hidden sm:inline flex-1 text-left">Search…</span>
<span class="hidden sm:inline flex-1 text-left font-mono text-[13px]">search…</span>
<kbd class="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-mono bg-(--bg) border border-(--border) rounded text-(--fg-subtle)">⌘K</kbd>
</button>
@@ -84,17 +84,15 @@ onUnmounted(() => globalThis.removeEventListener('keydown', onKeydown));
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="close" />
<div class="fixed inset-x-0 top-[12vh] mx-auto max-w-xl px-4">
<div class="bg-(--bg-elevated) rounded-2xl border border-(--border) shadow-2xl overflow-hidden">
<div class="bg-(--bg-elevated) rounded-xl border border-(--border) shadow-2xl overflow-hidden">
<div class="flex items-center px-4 border-b border-(--border)">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--fg-subtle) shrink-0">
<circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
</svg>
<span class="font-mono text-base text-(--accent-text) select-none shrink-0">❯</span>
<input
v-model="query"
data-search-input
type="text"
placeholder="Search across all packages…"
class="w-full py-3.5 px-3 bg-transparent text-(--fg) placeholder:text-(--fg-subtle) focus:outline-none text-[15px]"
placeholder="search across all packages…"
class="w-full py-3.5 px-3 bg-transparent text-(--fg) placeholder:text-(--fg-subtle) focus:outline-none font-mono text-[14px]"
>
<kbd class="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] font-mono bg-(--bg-inset) border border-(--border) rounded text-(--fg-subtle)">ESC</kbd>
</div>
docs/app/components/DocsTag.vue
+4 -4
View File
@@ -6,16 +6,16 @@
const variantClasses: Record<string, string> = {
since: 'bg-(--bg-inset) text-(--fg-muted) border border-(--border)',
neutral: 'bg-(--bg-inset) text-(--fg-muted) border border-(--border)',
test: 'bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500/20',
demo: 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-300 dark:border-blue-500/20',
wip: 'bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20',
test: 'bg-emerald-50 text-emerald-800 border border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500/20',
demo: 'bg-(--accent-subtle) text-(--accent-text) border border-(--accent-subtle)',
wip: 'bg-amber-50 text-amber-800 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20',
};
</script>
<template>
<span
:class="[
'inline-flex items-center px-2 py-0.5 text-[11px] font-medium rounded-full leading-none h-5',
'inline-flex items-center px-1.5 py-0.5 font-mono text-[10px] font-medium rounded leading-none h-4.5 lowercase',
variantClasses[variant ?? 'since'],
]"
>
docs/app/components/DocsToc.vue
+2 -2
View File
@@ -46,8 +46,8 @@ function go(id: string) {
<template>
<nav v-if="items.length > 0" class="text-sm">
<div class="text-[11px] font-semibold uppercase tracking-wider text-(--fg-subtle) mb-3">
On this page
<div class="comment-label mb-3">
on this page
</div>
<ul class="space-y-1 border-l border-(--border)">
<li v-for="item in items" :key="item.id">