4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1fbe,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { appearanceTokens, defaultAppearance, normalizeAppearance, palettes, type AppearanceSettings } from "@/lib/cojeev/appearance-tokens"; import { Button } from "@/components/ui/button"; import { ScrollAreaList } from "@/components/ui/scroll-area"; import { Label } from "@/components/ui/label"; import { Slider } from "@/components/ui/slider"; import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"; import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"; import { Shape } from "@/components/ui/shape"; import { AnimatedIcon } from "@/components/ui/animated-icon"; import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"; export { palettes, defaultAppearance } from "@/lib/cojeev/appearance-tokens"; export type { AppearanceSettings, PaletteName } from "@/lib/cojeev/appearance-tokens"; const storageKey = "cojeev-appearance"; const settingsEvent = "cojeev:appearance-settings"; let snapshot: AppearanceSettings | undefined; function getSnapshot(): AppearanceSettings { if (!snapshot) { try { snapshot = normalizeAppearance(JSON.parse(localStorage.getItem(storageKey) ?? "null")); } catch { snapshot = defaultAppearance; } } return snapshot; } function subscribe(listener: () => void) { const onStorage = (event: StorageEvent) => { if (event.key === storageKey || event.key === null) { snapshot = undefined; listener(); } }; window.addEventListener(settingsEvent, listener); window.addEventListener("storage", onStorage); return () => { window.removeEventListener(settingsEvent, listener); window.removeEventListener("storage", onStorage); }; } export function setAppearance(value: AppearanceSettings) { snapshot = normalizeAppearance(value); try { localStorage.setItem(storageKey, JSON.stringify(snapshot)); } catch { /* In-memory preferences still work. */ } window.dispatchEvent(new Event(settingsEvent)); } export function useAppearance() { const settings = React.useSyncExternalStore(subscribe, getSnapshot, () => defaultAppearance); return [settings, setAppearance] as const; } /** Mount once above the application. Shared tokens also reach portalled controls. */ export function AppearanceProvider({ children }: { children: React.ReactNode }) { React.useEffect(() => { const root = document.documentElement; let frame = 0; const previous = new Map(); const apply = () => { const settings = getSnapshot(); const mode = root.dataset.mode === "dark" ? "dark" : "light"; const tokens = appearanceTokens(settings, mode); for (const [name, value] of Object.entries(tokens)) { if (!previous.has(name)) previous.set(name, root.style.getPropertyValue(name)); root.style.setProperty(name, value); } root.dataset.palette = settings.palette; root.dataset.contrast = String(settings.contrast); window.dispatchEvent(new Event("v-palette")); window.dispatchEvent(new Event("cojeev:appearancechange")); }; const schedule = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(apply); }; const stop = subscribe(schedule); // Theme changes must repaint in the same microtask, before a view-transition // takes its new-theme snapshot. Slider changes can be coalesced to one frame. const observer = new MutationObserver(apply); observer.observe(root, { attributes: true, attributeFilter: ["data-mode"] }); apply(); return () => { stop(); observer.disconnect(); cancelAnimationFrame(frame); for (const [name, value] of previous) { if (value) root.style.setProperty(name, value); else root.style.removeProperty(name); } delete root.dataset.palette; delete root.dataset.contrast; window.dispatchEvent(new Event("v-palette")); }; }, []); return children; } export type AppearanceControlsProps = Omit, "onChange"> & { value?: AppearanceSettings; onValueChange?: (value: AppearanceSettings) => void; }; export function AppearanceControls({ value, onValueChange, className, ...props }: AppearanceControlsProps) { const [globalValue, setGlobalValue] = useAppearance(); const settings = normalizeAppearance(value ?? globalValue); const palette = palettes.find(p => p.id === settings.palette)!; const id = React.useId(); const update = (next: AppearanceSettings) => { if (value === undefined) setGlobalValue(next); onValueChange?.(next); }; return

Make it comfortable.

Choose a palette. Tune how clearly text and edges stand out.

Colour palette

{palette.description}

Contrast{Math.round(settings.contrast)}%

update({ ...settings, contrast })} />

ComfortableStrong

A little colour. A clear thought.

Readable labels, distinct panels, and room to focus.

Selected item

; } export type AppearanceMenuProps = { compact?: boolean; responsive?: boolean; className?: string }; export function AppearanceMenu({ compact = false, responsive = false, className }: AppearanceMenuProps) { return Colour and contrast; } 52:Tb5c,@layer cojeev-states { .v-appearance { display:grid; gap:22px; min-width:0; color:var(--v-text); font:400 14px/1.55 var(--font-text); } .v-appearance__heading strong { font:600 21px/1.2 var(--font-display); } .v-appearance p { margin:6px 0 0; color:var(--v-text-2); } .v-appearance__field { display:grid; gap:10px; } .v-appearance__field [data-slot=select], .v-appearance__field [data-slot=select-trigger] { width:100%; } .v-appearance__swatches { display:flex; gap:12px; } .v-appearance__swatches [data-slot=shape] { width:40px; height:40px; } .v-appearance__description { font-size:13px; } .v-appearance__label, .v-appearance__ends { display:flex; justify-content:space-between; align-items:center; gap:16px; } .v-appearance__label output { font-variant-numeric:tabular-nums; font-weight:600; } .v-appearance__ends { font-size:12px; color:var(--v-text-2); } .v-appearance__sample { padding:16px; border:1px solid var(--v-border); background:var(--v-beige); border-radius:16px; } .v-appearance__sample span { display:inline-block; margin-top:12px; padding:5px 10px; border-radius:8px; background:var(--sel-bg); color:var(--sel-ink); font-weight:600; } .v-appearance-popover[data-slot] { width:336px; max-width:calc(100vw - 24px); max-height:min(740px,calc(100dvh - 32px)); overflow:hidden; padding:24px; background:var(--v-paper); color:var(--v-text); } :root .v-btn.v-appearance-trigger[data-slot][data-compact] { --mfill:var(--v-paper); --mstroke:var(--v-border); gap:8px; height:44px; width:112px; min-width:112px; padding:0 14px; border-radius:999px; background:var(--mfill); color:var(--v-text); box-shadow:inset 0 0 0 1px var(--v-border); } :root .v-btn.v-appearance-trigger[data-slot][data-compact]:is(:hover,:focus-visible) { --mfill:var(--v-beige); --mstroke:var(--v-text-2); } :root .v-btn.v-appearance-trigger[data-slot][data-compact]:has(>svg.v-morph) { background:transparent; box-shadow:none; } [data-slot="appearance-palette-icon"] { flex:none; overflow:visible; } .v-appearance-trigger__label { color:inherit; font:500 13px/1 var(--font-text); } :root .v-btn.v-appearance-trigger[data-slot][data-compact="true"] { min-width:44px; width:44px; padding:0; } :root .v-btn.v-appearance-trigger[data-slot][data-compact]:is(:disabled,[aria-disabled="true"]:not([aria-busy="true"])) { --mfill:var(--v-disabled-face); --mstroke:var(--v-disabled-edge); color:var(--v-disabled-ink); } .docs-theme > [data-slot=popover], .docs-theme > .v-appearance-trigger { grid-column:1 / -1; } .docs-theme-compact { display:flex; align-items:center; gap:6px; } @media (max-width:640px) { :root .v-btn.v-appearance-trigger[data-slot][data-responsive="true"] { min-width:44px; width:44px; padding:0; } .v-appearance-trigger[data-responsive="true"] .v-appearance-trigger__label { display:none; } } @media (max-width:420px) { .v-appearance-popover[data-slot] { padding:20px; } .v-appearance { gap:18px; } } } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/scroll-area.json","https://000h.cojeev.com/r/label.json","https://000h.cojeev.com/r/slider.json","https://000h.cojeev.com/r/select.json","https://000h.cojeev.com/r/popover.json","https://000h.cojeev.com/r/shape.json","https://000h.cojeev.com/r/animated-icon.json","https://000h.cojeev.com/r/tooltip.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/appearance.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/appearance.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/appearance.css","content":"$52","type":"registry:file","target":"styles/cojeev/appearance.css"}],"className":"h-[70svh] min-h-80"}]]}]