{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "memory-viewer", "title": "Memory viewer", "description": "Memory viewer is a production-ready ai component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "lucide-react", "next-themes", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/ai/memory-viewer.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Pencil, Search } from \"lucide-react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { ease, easeCss, springs } from \"@/components/bjork-ui/_core/motion\";\nimport {\n AI_PANEL,\n FOCUS_RING,\n PRESS,\n useAiTone,\n useControllable,\n useReduceMotion,\n type BjorkTone,\n} from \"@/components/bjork-ui/ai/_shared\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MemoryItem {\n id: string;\n /** The remembered fact, as one sentence. */\n text: string;\n /** Group heading, such as \"Preferences\" or \"Projects\". */\n category: string;\n /** \"chat\" was inferred from a conversation; \"user\" was added by hand. */\n source: \"chat\" | \"user\";\n /** ISO date the memory was saved. Shown for chat memories. */\n savedAt?: string;\n /** Marks a memory saved recently with a soft accent dot. */\n recent?: boolean;\n}\n\nexport interface MemoryViewerProps {\n memories: MemoryItem[];\n /**\n * Called once a forget is final: 5 seconds after Forget, unless Undo was pressed. The row hides at once and an\n * Undo receipt takes its place until then.\n */\n onForget?: (id: string) => void;\n onEdit?: (id: string, text: string) => void;\n /** Controlled on/off state of memory. */\n enabled?: boolean;\n defaultEnabled?: boolean;\n onEnabledChange?: (enabled: boolean) => void;\n /** Category order. Categories not listed follow in order of appearance. */\n categories?: string[];\n /** Demo/preview only: opens this memory in edit mode on mount. */\n defaultEditingId?: string;\n tone?: BjorkTone;\n className?: string;\n}\n\nexport const SAMPLE_MEMORIES: MemoryItem[] = [\n { id: \"m1\", category: \"Preferences\", text: \"Prefers concise answers with the code first and the explanation after.\", source: \"chat\", savedAt: \"2026-09-14\" },\n { id: \"m2\", category: \"Preferences\", text: \"Writes in British English: colour, organise, programme.\", source: \"user\" },\n { id: \"m3\", category: \"Preferences\", text: \"Likes metric units and 24-hour times.\", source: \"chat\", savedAt: \"2026-08-30\" },\n { id: \"m4\", category: \"Work\", text: \"Staff product designer at Northwind Atlas, a mapping startup.\", source: \"user\" },\n { id: \"m5\", category: \"Work\", text: \"Runs design reviews on Thursday afternoons.\", source: \"chat\", savedAt: \"2026-09-02\" },\n {\n id: \"m6\",\n category: \"Projects\",\n text: \"Building Tideline, an offline-first field notes app in React Native.\",\n source: \"chat\",\n savedAt: \"2026-10-06\",\n recent: true,\n },\n {\n id: \"m7\",\n category: \"Projects\",\n text: \"Tideline syncs with CRDTs; do not suggest last-write-wins.\",\n source: \"chat\",\n savedAt: \"2026-10-07\",\n recent: true,\n },\n { id: \"m8\", category: \"Personal\", text: \"Training for a half marathon in March.\", source: \"chat\", savedAt: \"2026-07-21\" },\n { id: \"m9\", category: \"Personal\", text: \"Vegetarian, and cooks most weeknights.\", source: \"user\" },\n];\n\nconst DEFAULT_CATEGORIES = [\"Preferences\", \"Work\", \"Projects\", \"Personal\"];\nconst UNDO_MS = 5000;\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\nfunction provenance(m: MemoryItem): string {\n if (m.source === \"user\") return \"You added\";\n const d = m.savedAt ? /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(m.savedAt) : null;\n return d ? `From chat · ${MONTHS[Number(d[2]) - 1]} ${Number(d[3])}` : \"From chat\";\n}\n\n/**\n * What the assistant remembers about the user, grouped by category. Each memory can be edited in place or\n * forgotten with a five-second undo. Turning memory off dims the list and explains what that means.\n */\nexport function MemoryViewer({\n memories,\n onForget,\n onEdit,\n enabled,\n defaultEnabled = true,\n onEnabledChange,\n categories = DEFAULT_CATEGORIES,\n defaultEditingId,\n tone: toneProp,\n className,\n}: MemoryViewerProps) {\n const { style } = useAiTone(toneProp);\n const reduce = useReduceMotion();\n const [isOn, setOn] = useControllable(enabled, defaultEnabled, onEnabledChange);\n const [query, setQuery] = useState(\"\");\n const [editingId, setEditingId] = useState(defaultEditingId ?? null);\n const [edits, setEdits] = useState>({});\n const [pending, setPending] = useState([]);\n const [gone, setGone] = useState>(() => new Set());\n const [announce, setAnnounce] = useState(\"\");\n const titleId = useId();\n const noteId = useId();\n\n // A forget still waiting on its undo window is committed if the viewer unmounts.\n const pendingRef = useRef(pending);\n const onForgetRef = useRef(onForget);\n useLayoutEffect(() => {\n pendingRef.current = pending;\n onForgetRef.current = onForget;\n });\n useEffect(() => () => pendingRef.current.forEach((id) => onForgetRef.current?.(id)), []);\n\n const live = memories.filter((m) => !gone.has(m.id));\n const remembered = live.filter((m) => !pending.includes(m.id)).length;\n const q = query.trim().toLowerCase();\n const textOf = (m: MemoryItem) => edits[m.id] ?? m.text;\n const visible = q ? live.filter((m) => textOf(m).toLowerCase().includes(q) || m.category.toLowerCase().includes(q)) : live;\n const order = [...categories, ...visible.map((m) => m.category).filter((c) => !categories.includes(c))];\n const groups = order\n .filter((c, i) => order.indexOf(c) === i)\n .map((category) => ({ category, items: visible.filter((m) => m.category === category) }))\n .filter((g) => g.items.length > 0);\n\n const forget = (m: MemoryItem) => {\n setPending((p) => [...p, m.id]);\n if (editingId === m.id) setEditingId(null);\n setAnnounce(\"Memory forgotten. Undo is available for 5 seconds.\");\n };\n const undo = (m: MemoryItem) => {\n setPending((p) => p.filter((id) => id !== m.id));\n setAnnounce(\"Memory restored\");\n };\n const expire = (m: MemoryItem) => {\n setPending((p) => p.filter((id) => id !== m.id));\n setGone((g) => new Set(g).add(m.id));\n onForget?.(m.id);\n };\n const save = (m: MemoryItem, text: string) => {\n const next = text.trim();\n setEditingId(null);\n if (!next || next === textOf(m)) return;\n setEdits((e) => ({ ...e, [m.id]: next }));\n onEdit?.(m.id, next);\n setAnnounce(\"Memory updated\");\n };\n\n return (\n \n
\n
\n

\n Memory\n

\n \n {remembered} {remembered === 1 ? \"memory\" : \"memories\"}\n \n
\n {\n setOn(next);\n setAnnounce(next ? \"Memory turned on\" : \"Memory turned off\");\n }}\n />\n
\n\n \n\n \n
\n \n Memory is off. New chats won’t save or use\n these memories. They stay here until you forget them.\n

\n
\n \n\n \n {live.length === 0 ? (\n \n ) : groups.length === 0 ? (\n \n ) : (\n groups.map((group) => (\n
\n

\n {group.category}\n {group.items.filter((m) => !pending.includes(m.id)).length}\n

\n
    \n \n {group.items.map((m) => (\n \n {pending.includes(m.id) ? (\n undo(m)} onExpire={() => expire(m)} />\n ) : (\n setEditingId(m.id)}\n onCancel={() => setEditingId(null)}\n onSave={(t) => save(m, t)}\n onForget={() => forget(m)}\n />\n )}\n \n ))}\n \n
\n
\n ))\n )}\n \n \n \n );\n}\n\nfunction MemorySwitch({ on, onChange }: { on: boolean; onChange: (on: boolean) => void }) {\n return (\n onChange(!on)}\n className={cn(\"group flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-full pl-2.5 pr-1.5\", FOCUS_RING)}\n >\n {on ? \"On\" : \"Off\"}\n \n \n \n \n );\n}\n\ninterface RowProps {\n memory: MemoryItem;\n text: string;\n editing: boolean;\n interactive: boolean;\n onStartEdit: () => void;\n onCancel: () => void;\n onSave: (text: string) => void;\n onForget: () => void;\n}\n\nfunction MemoryRow({ memory, text, editing, interactive, onStartEdit, onCancel, onSave, onForget }: RowProps) {\n const editRef = useRef(null);\n const restoreFocus = useRef(false);\n\n // After Save or Cancel from the keyboard, focus returns to the Edit button.\n useEffect(() => {\n if (editing || !restoreFocus.current) return;\n restoreFocus.current = false;\n editRef.current?.focus();\n }, [editing]);\n\n if (editing) {\n return (\n {\n restoreFocus.current = true;\n onCancel();\n }}\n onSave={(t) => {\n restoreFocus.current = true;\n onSave(t);\n }}\n />\n );\n }\n\n return (\n
\n \n {memory.recent && }\n \n
\n

\n {text}\n {memory.recent && (recently added)}\n

\n

{provenance(memory)}

\n
\n \n \n \n \n \n Forget\n \n
\n \n );\n}\n\nfunction EditForm({ initial, onCancel, onSave }: { initial: string; onCancel: () => void; onSave: (t: string) => void }) {\n const [draft, setDraft] = useState(initial);\n const areaRef = useRef(null);\n\n useLayoutEffect(() => {\n const el = areaRef.current;\n if (!el) return;\n el.style.height = \"auto\";\n el.style.height = `${el.scrollHeight}px`;\n }, [draft]);\n\n const onKey = (e: KeyboardEvent) => {\n if (e.nativeEvent.isComposing) return;\n if (e.key === \"Escape\") {\n e.preventDefault();\n onCancel();\n } else if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n onSave(draft);\n }\n };\n\n return (\n {\n e.preventDefault();\n onSave(draft);\n }}\n >\n e.currentTarget.setSelectionRange(draft.length, draft.length)}\n onChange={(e) => setDraft(e.target.value)}\n onKeyDown={onKey}\n aria-label=\"Edit memory\"\n className=\"block w-full resize-none overflow-hidden rounded-[9px] border border-[color:var(--bjork-accent-muted)] bg-[color:var(--bjork-field)] px-3 py-2 text-[14px] leading-5 text-[color:var(--bjork-text)] shadow-[0_0_0_3px_var(--bjork-accent-soft)] outline-none\"\n />\n
\n \n \n Cancel\n \n \n Save\n \n
\n \n );\n}\n\nfunction UndoReceipt({\n memory,\n text,\n onUndo,\n onExpire,\n}: {\n memory: MemoryItem;\n text: string;\n onUndo: () => void;\n onExpire: () => void;\n}) {\n const reduce = useReduceMotion();\n const undoRef = useRef(null);\n const expireRef = useRef(onExpire);\n useLayoutEffect(() => {\n expireRef.current = onExpire;\n });\n\n useEffect(() => {\n // Keyboard users who pressed Forget land on Undo.\n if (document.activeElement === document.body || document.activeElement === null) undoRef.current?.focus();\n const id = window.setTimeout(() => expireRef.current(), UNDO_MS);\n return () => window.clearTimeout(id);\n }, []);\n\n return (\n \n

\n Forgot {text}\n

\n \n Undo\n \n \n \n \n \n \n );\n}\n\nfunction EmptyState({ title, body }: { title: string; body: string }) {\n return (\n
\n

{title}

\n

{body}

\n
\n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/ai/memory-viewer.tsx" }, { "path": "components/bjork-ui/_core/a11y.tsx", "content": "import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/a11y.tsx" }, { "path": "components/bjork-ui/_core/motion.ts", "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n out: [0.23, 1, 0.32, 1],\n inOut: [0.77, 0, 0.175, 1],\n drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n out: \"cubic-bezier(0.23,1,0.32,1)\",\n inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n const cx = 3 * x1;\n const bx = 3 * (x2 - x1) - cx;\n const ax = 1 - cx - bx;\n const cy = 3 * y1;\n const by = 3 * (y2 - y1) - cy;\n const ay = 1 - cy - by;\n const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n const solveX = (x: number) => {\n let s = x;\n for (let i = 0; i < 8; i++) {\n const err = sampleX(s) - x;\n if (Math.abs(err) < 1e-6) return s;\n const d = sampleDX(s);\n if (Math.abs(d) < 1e-6) break;\n s -= err / d;\n }\n let lo = 0;\n let hi = 1;\n s = x;\n while (lo < hi) {\n const v = sampleX(s);\n if (Math.abs(v - x) < 1e-6) return s;\n if (x > v) lo = s;\n else hi = s;\n s = (lo + hi) / 2;\n if (hi - lo < 1e-7) break;\n }\n return s;\n };\n\n return (t: number) => {\n if (t <= 0) return 0;\n if (t >= 1) return 1;\n return sampleY(solveX(t));\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/motion.ts" }, { "path": "components/bjork-ui/ai/_shared.ts", "content": "\"use client\";\n\n// Shared plumbing for the bjork-ui AI components: tone tokens, reduced motion, controllable state and\n// number formatting. Every AI component imports from here so they read as one family.\n\nimport {\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n useSyncExternalStore,\n type CSSProperties,\n} from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { BJORK_PALETTE, type BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\n\nexport type { BjorkTone };\nexport type BjorkPalette = (typeof BJORK_PALETTE)[BjorkTone];\n\nconst noopSubscribe = () => () => {};\n\n/** False on the server and the first client render, true after hydration. */\nexport function useHydrated(): boolean {\n return useSyncExternalStore(\n noopSubscribe,\n () => true,\n () => false,\n );\n}\n\n/** Hydration-safe reduced motion: both sides report \"not reduced\" until mount, then the real value applies. */\nexport function useReduceMotion(): boolean {\n const hydrated = useHydrated();\n const reduced = useReducedMotion();\n return hydrated && reduced === true;\n}\n\n/**\n * Resolves the tone and returns the CSS custom properties for it. Spread `style` on the component root so an\n * explicit `tone` prop wins over the page theme, and status colours (success, warning, error) are always defined.\n */\nexport function useAiTone(toneProp?: BjorkTone) {\n const tone = useBjorkTone(toneProp);\n const pal = BJORK_PALETTE[tone];\n const style = {\n ...surfaceVars(tone),\n \"--bjork-text\": pal.text,\n \"--bjork-text-medium\": pal.textMedium,\n \"--bjork-text-muted\": pal.textMuted,\n \"--bjork-text-soft\": pal.textSoft,\n \"--bjork-text-faint\": pal.textFaint,\n \"--bjork-hair\": pal.hair,\n \"--bjork-border\": pal.border,\n \"--bjork-border-strong\": pal.borderStrong,\n \"--bjork-surface\": pal.surface,\n \"--bjork-raised\": pal.raised,\n \"--bjork-surface-active\": pal.active,\n \"--bjork-accent\": pal.accent,\n \"--bjork-accent-ink\": pal.accentInk,\n \"--bjork-accent-fill\": pal.accentFill,\n \"--bjork-accent-soft\": pal.accentSoft,\n \"--bjork-accent-muted\": pal.accentMuted,\n \"--bjork-accent-foreground\": pal.accentFg,\n \"--bjork-success\": pal.success,\n \"--bjork-warning\": pal.warning,\n \"--bjork-error\": pal.error,\n \"--bjork-ring-offset\": pal.bg,\n colorScheme: tone,\n } as CSSProperties;\n return { tone, pal, style };\n}\n\n/** Classes for the shared keyboard focus ring. */\nexport const FOCUS_RING =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\n/** Classes for the shared press feedback. */\nexport const PRESS = \"transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none\";\n\n/**\n * Controlled-or-uncontrolled state. Pass `value` to control it; `onChange` fires for every change either way.\n */\nexport function useControllable(\n value: T | undefined,\n defaultValue: T,\n onChange?: (next: T) => void,\n): [T, (next: T) => void] {\n const controlled = value !== undefined;\n const [inner, setInner] = useState(defaultValue);\n const current = controlled ? value : inner;\n const onChangeRef = useRef(onChange);\n useLayoutEffect(() => {\n onChangeRef.current = onChange;\n });\n const set = useCallback(\n (next: T) => {\n if (!controlled) setInner(next);\n onChangeRef.current?.(next);\n },\n [controlled],\n );\n return [current, set];\n}\n\n/** 1234 -> \"1,234\", 18400 -> \"18.4k\", 1_200_000 -> \"1.2M\". */\nexport function formatTokens(n: number): string {\n if (n < 10_000) return Math.round(n).toLocaleString(\"en-US\");\n if (n < 1_000_000) return `${(n / 1000).toFixed(n < 100_000 ? 1 : 0).replace(/\\.0$/, \"\")}k`;\n return `${(n / 1_000_000).toFixed(n < 10_000_000 ? 2 : 1).replace(/\\.?0+$/, \"\")}M`;\n}\n\n/** US dollars with sub-cent precision when it matters: 0.0042 -> \"$0.0042\", 12.5 -> \"$12.50\". */\nexport function formatCost(usd: number): string {\n if (usd === 0) return \"$0.00\";\n if (Math.abs(usd) < 0.01) return `$${usd.toFixed(4)}`;\n if (Math.abs(usd) < 1) return `$${usd.toFixed(3)}`;\n return `$${usd.toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n}\n\n/** 640 -> \"640ms\", 4200 -> \"4.2s\", 95000 -> \"1m 35s\". */\nexport function formatDuration(ms: number): string {\n if (ms < 1000) return `${Math.round(ms)}ms`;\n if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;\n const m = Math.floor(ms / 60_000);\n const s = Math.round((ms % 60_000) / 1000);\n return `${m}m ${s}s`;\n}\n\n/** 2_400_000 bytes -> \"2.4 MB\". */\nexport function formatBytes(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n const units = [\"KB\", \"MB\", \"GB\"];\n let v = bytes / 1024;\n let i = 0;\n while (v >= 1024 && i < units.length - 1) {\n v /= 1024;\n i++;\n }\n return `${v.toFixed(v < 10 ? 1 : 0)} ${units[i]}`;\n}\n\n/** Shimmer keyframes for \"working\" text. Mount once with