7f:I[8513,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 9f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] a1: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}] 54:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}] 55:["$","div","bjork-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fffcf6"}]]}] 56:["$","div","bjork-surface-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(250, 246, 237, 0.94)"}}],["$","p",null,{"children":"rgba(250, 246, 237, 0.94)"}]]}]}]]}] 57:["$","div","bjork-surface-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f5efe3"}]]}] 58:["$","div","bjork-surface-active",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-active",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#efe7d8"}]]}] 59:["$","div","bjork-panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8f2e7"}]]}] 5a:["$","div","bjork-menu",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-menu",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255, 252, 246, 0.98)"}}],["$","p",null,{"children":"rgba(255, 252, 246, 0.98)"}]]}]}]]}] 5b:["$","div","bjork-field",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255, 252, 246, 0.96)"}}],["$","p",null,{"children":"rgba(255, 252, 246, 0.96)"}]]}]}]]}] 5c:["$","div","bjork-field-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(248, 242, 231, 0.82)"}}],["$","p",null,{"children":"rgba(248, 242, 231, 0.82)"}]]}]}]]}] 5d:["$","div","bjork-field-inset",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field-inset",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(239, 231, 216, 0.72)"}}],["$","p",null,{"children":"rgba(239, 231, 216, 0.72)"}]]}]}]]}] 5e:["$","div","bjork-error-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-error-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff0e8"}]]}] 5f:["$","div","bjork-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#171717"}]]}] 60:["$","div","bjork-text-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.9)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.9)"}]]}]}]]}] 61:["$","div","bjork-text-medium",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-medium",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.78)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.78)"}]]}]}]]}] 62:["$","div","bjork-text-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.68)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.68)"}]]}]}]]}] 63:["$","div","bjork-text-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.62)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.62)"}]]}]}]]}] 64:["$","div","bjork-text-faint",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-faint",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.22)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.22)"}]]}]}]]}] 65:["$","div","bjork-inverted-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-inverted-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff8f0"}]]}] 66:["$","div","bjork-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#eee6db"}]]}] 67:["$","div","bjork-border-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-border-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f5ede2"}]]}] 68:["$","div","bjork-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e1d7c8"}]]}] 69:["$","div","bjork-thumb",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-thumb",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#a49b8e"}]]}] 6a:["$","div","bjork-track",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-track",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ded6ca"}]]}] 6b:["$","div","bjork-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ec7d43"}]]}] 6c:["$","div","bjork-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0935f"}]]}] 6d:["$","div","bjork-accent-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(236, 125, 67, 0.1)"}}],["$","p",null,{"children":"rgba(236, 125, 67, 0.1)"}]]}]}]]}] 6e:["$","div","bjork-accent-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(236, 125, 67, 0.2)"}}],["$","p",null,{"children":"rgba(236, 125, 67, 0.2)"}]]}]}]]}] 6f:["$","div","bjork-accent-badge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-badge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(236, 125, 67, 0.16)"}}],["$","p",null,{"children":"rgba(236, 125, 67, 0.16)"}]]}]}]]}] 70:["$","div","bjork-accent-badge-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-badge-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8d421d"}]]}] 71:["$","div","bjork-accent-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#3f2112"}]]}] 72:["$","div","bjork-accent-fill",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-fill",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ec7d43"}]]}] 73:["$","div","bjork-accent-fill-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-fill-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0935f"}]]}] 74:["$","div","bjork-shadow-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)"}]]}] 75:["$","div","bjork-shadow-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)"}]]}] 76:["$","div","bjork-shadow-panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)"}]]}] 77:["$","div","bjork-shadow-menu",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-menu",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)"}]]}] 78:["$","div","bjork-shadow-inset",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-inset",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)"}]]}] 79:["$","div","bjork-ring-offset",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-ring-offset",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}]]}] 7a:["$","$L7f",null,{"orientation":"horizontal"}] 7b:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","bjork-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#111111"}]]}],["$","div","bjork-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#121212"}]]}],["$","div","bjork-surface-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(22, 22, 22, 0.92)"}}],["$","p",null,{"children":"rgba(22, 22, 22, 0.92)"}]]}]}]]}],["$","div","bjork-surface-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#161616"}]]}],["$","div","bjork-surface-active",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-active",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#202020"}]]}],["$","div","bjork-panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d0d0d"}]]}],["$","div","bjork-menu",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-menu",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(18, 18, 18, 0.98)"}}],["$","p",null,{"children":"rgba(18, 18, 18, 0.98)"}]]}]}]]}],["$","div","bjork-field",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(18, 18, 18, 0.95)"}}],["$","p",null,{"children":"rgba(18, 18, 18, 0.95)"}]]}]}]]}],["$","div","bjork-field-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(18, 18, 18, 0.55)"}}],"$L80"]}]}]]}],"$L81","$L82","$L83","$L84","$L85","$L86","$L87","$L88","$L89","$L8a","$L8b","$L8c","$L8d","$L8e","$L8f","$L90","$L91","$L92","$L93","$L94","$L95","$L96","$L97","$L98","$L99","$L9a","$L9b","$L9c","$L9d"]}],"$L9e"]}]}]]}] 7c:null a0:Ta62,.bjork-range { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06); } .bjork-range::-webkit-slider-thumb { appearance: none; width: 16px; height: 8px; border: 0; border-radius: 999px; background: var(--bjork-thumb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42); } .bjork-range::-moz-range-thumb { width: 16px; height: 8px; border: 0; border-radius: 999px; background: var(--bjork-thumb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42); } .bjork-layered-button-accent, .bjork-layered-button-raised { position: relative; isolation: isolate; appearance: none; overflow: hidden; border: 0; border-radius: 13px; box-shadow: inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; transition: filter 150ms ease-out, box-shadow 150ms ease-out; } .bjork-layered-button-accent::after, .bjork-layered-button-raised::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: 1.5px solid transparent; border-radius: inherit; background: linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-clip: padding-box, border-box; mask-clip: padding-box, border-box; -webkit-mask-origin: padding-box, border-box; mask-origin: padding-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude; } .bjork-layered-button-accent { color: oklch(100% 0 0); text-shadow: 0 -1px #00000040; background: radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%); } .bjork-layered-button-raised { color: oklch(100% 0 0); text-shadow: 0 -1px #00000026; background: radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265)); } .dark .bjork-layered-button-raised { color: oklch(0.2574 0.0056 265); text-shadow: 0 -1px #00000026; background: radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%)); } @media (hover: hover) { .bjork-layered-button-accent:hover { filter: brightness(1.08) saturate(1.04); } .bjork-layered-button-raised:hover { filter: brightness(1.08) contrast(0.9); } }7d:["$","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":["$","$L9f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$a0"}]}]]}] a2:T67d2,"use client"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import { isCoarsePointer, useVisibleLoop } from "@/components/bjork-ui/_core/loop"; import { defaultMaxDpr, sizeCanvas } from "@/components/bjork-ui/_core/canvas"; import { hashString, mulberry32 } from "@/components/bjork-ui/_core/random"; import { LiveRegion } from "@/components/bjork-ui/_core/a11y"; import { springAt } from "@/components/bjork-ui/_core/spring"; import { cubicBezier, springs } from "@/components/bjork-ui/_core/motion"; export type OrbState = "idle" | "searching" | "connecting" | "composing" | "error"; export interface LatticeOrbHit { lat: number; lon: number; } export interface LatticeOrbProps { state: OrbState; hits?: LatticeOrbHit[]; dots?: number; size?: number; tilt?: number; speed?: number; sweepSpeed?: number; morphMs?: number; stagger?: number; seed?: string; label?: string; showCaption?: boolean; /** Freezes the orb at this time with no loop. Used for posed previews. */ time?: number; tone?: BjorkTone; attract?: boolean; className?: string; } const TAU = Math.PI * 2; const DEG = Math.PI / 180; const FRONT_HALF_WIDTH = 6 * DEG; const IDLE_SPIN = 0.15; const SEARCH_SPIN = 0.5; const CONNECT_SPIN = 0.2; const MERIDIAN_RATE = 1.2; const PULSE_S = 0.6; const ERROR_JITTER_S = 0.3; const ERROR_SETTLED_S = 10; // age used for static error poses, long past the spring const ANCHOR_COUNT = 7; const ANCHOR_SCALE = 2.2; const ANCHOR_PAIRS: ReadonlyArray = [ [0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6], [6, 0], [1, 4], ]; const EDGE_STEP_S = 0.4; const EDGE_CYCLE_S = 4; const BAND_COUNT = 5; const MERIDIAN_SEGMENTS = 72; const STRIDE = 6; // x, y, z, brightness, colour code (0 text, 1 accent, 2 error), size scale const COLOR_TEXT = 0; const COLOR_ACCENT = 1; const COLOR_ERROR = 2; const BUCKETS = 8; const FRAME_SAMPLES = 120; const EASE = cubicBezier(0.23, 1, 0.32, 1); const ATTRACT_STEP_S = 3.5; const ATTRACT_ERROR_S = 1.2; const ATTRACT_HIT_S = 0.8; const ATTRACT_HIT_CAP = 6; const ATTRACT_IDLE_PAUSE_S = 4; const ATTRACT_CYCLE_S = 4 * ATTRACT_STEP_S; const ATTRACT_PERIOD_S = 4 * ATTRACT_CYCLE_S + ATTRACT_ERROR_S; const STATE_LABEL: Record = { idle: "Idle", searching: "Searching", connecting: "Connecting", composing: "Composing", error: "Error", }; const EMPTY_HITS: LatticeOrbHit[] = []; interface Geo { n: number; base: Float32Array; // unit sphere, x y z per dot rank: Float32Array; // 0 at the top, 1 at the bottom band: Uint8Array; // latitude band 0 to 4 noise: Float32Array; // seeded -1..1, three per dot anchor: Int16Array; // anchor slot 0..6, or -1 anchorIds: Int32Array; // dot index for each anchor slot } function buildGeo(n: number, seed: string): Geo { const base = new Float32Array(n * 3); const rank = new Float32Array(n); const band = new Uint8Array(n); const noise = new Float32Array(n * 3); const anchor = new Int16Array(n).fill(-1); const golden = Math.PI * (3 - Math.sqrt(5)); for (let i = 0; i < n; i++) { const y = 1 - (2 * (i + 0.5)) / n; const r = Math.sqrt(1 - y * y); const th = golden * i; base[i * 3] = Math.cos(th) * r; base[i * 3 + 1] = y; base[i * 3 + 2] = Math.sin(th) * r; rank[i] = n > 1 ? i / (n - 1) : 0; band[i] = Math.min(BAND_COUNT - 1, Math.floor(((y + 1) / 2) * BAND_COUNT)); } const nrnd = mulberry32(hashString(`${seed}:noise`)); for (let i = 0; i < n * 3; i++) noise[i] = nrnd() * 2 - 1; const arnd = mulberry32(hashString(seed)); const anchorIds = new Int32Array(ANCHOR_COUNT); for (let s = 0; s < ANCHOR_COUNT; s++) { let idx = Math.floor(arnd() * n); while (anchor[idx] >= 0) idx = (idx + 1) % n; anchor[idx] = s; anchorIds[s] = idx; } return { n, base, rank, band, noise, anchor, anchorIds }; } function wrapPi(d: number): number { return d - TAU * Math.round(d / TAU); } function hitKey(h: LatticeOrbHit): string { return `${h.lat.toFixed(5)}:${h.lon.toFixed(5)}`; } // Dot whose spun position faces the hit most directly. Used when a meridian passes a hit. function nearestDot(g: Geo, hit: LatticeOrbHit, tau: number): number { const ang = SEARCH_SPIN * tau; const c = Math.cos(ang); const s = Math.sin(ang); const cl = Math.cos(hit.lat); const hx = cl * Math.cos(hit.lon); const hy = Math.sin(hit.lat); const hz = cl * Math.sin(hit.lon); let best = -2; let pick = 0; for (let i = 0; i < g.n; i++) { const k = i * 3; const x0 = g.base[k]; const z0 = g.base[k + 2]; const x = x0 * c + z0 * s; const y = g.base[k + 1]; const z = -x0 * s + z0 * c; const d = x * hx + y * hy + z * hz; if (d > best) { best = d; pick = i; } } return pick; } interface FrameEnv { R: number; sweepSpeed: number; errAge: number; latched: Uint8Array | null; } // Pure target frame for a state at time tau. Writes x, y, z (unit sphere, before tilt), brightness, colour and size. function fillTarget(state: OrbState, tau: number, g: Geo, out: Float32Array, env: FrameEnv): void { const { n, base, band, noise, anchor } = g; const phi = tau * MERIDIAN_RATE * env.sweepSpeed; let spin = IDLE_SPIN * tau; let radius = 1; if (state === "idle") radius = 1 + 0.02 * Math.sin((TAU * tau) / 4); else if (state === "searching") spin = SEARCH_SPIN * tau; else if (state === "connecting") spin = CONNECT_SPIN * tau; else if (state === "error") radius = springAt(env.errAge, springs.settle, 1, 0.9); // One pixel in unit-sphere space, applied only during the first 300ms of an error. const jitter = state === "error" && env.errAge < ERROR_JITTER_S ? 1 / env.R : 0; const bandAngle = [0, 0, 0, 0, 0]; if (state === "composing") { for (let j = 0; j < BAND_COUNT; j++) bandAngle[j] = (0.2 + 0.25 * j) * (j % 2 ? -1 : 1) * tau; } for (let i = 0; i < n; i++) { const k = i * 3; const ang = state === "composing" ? bandAngle[band[i]] : spin; const c = Math.cos(ang); const s = Math.sin(ang); const x0 = base[k]; const y0 = base[k + 1]; const z0 = base[k + 2]; let x = x0 * c + z0 * s; let y = y0; const z = -x0 * s + z0 * c; if (jitter) { x += noise[k] * jitter; y += noise[k + 1] * jitter; } let b = 0.55; let col = COLOR_TEXT; let sz = 1; if (state === "searching") { const d = wrapPi(Math.atan2(z, x) - phi); b = Math.abs(d) < FRONT_HALF_WIDTH ? 1 : 0.45; } else if (state === "composing") { b = band[i] === 2 ? 1 : 0.6; } else if (state === "connecting") { if (anchor[i] >= 0) { b = 1; sz = ANCHOR_SCALE; } } else if (state === "error") { b = 0.8; col = COLOR_ERROR; } if (env.latched && env.latched[i] && col !== COLOR_ERROR) { col = COLOR_ACCENT; b = 1; } const o = i * STRIDE; out[o] = x * radius; out[o + 1] = y * radius; out[o + 2] = z * radius; out[o + 3] = b; out[o + 4] = col; out[o + 5] = sz; } } interface EngineConfig { n: number; size: number; tilt: number; speed: number; sweepSpeed: number; morphMs: number; stagger: number; seed: string; state: OrbState; hits: LatticeOrbHit[]; tone: BjorkTone; attract: boolean; reduce: boolean; } interface Pulse { dot: number; t0: number; } interface HitRecord { key: string; lat: number; lon: number; } interface AttractSlot { state: OrbState; cycle: number; count: number; } // Deterministic attract schedule for a clock value. idle, searching, connecting, composing; error after every 4th cycle. function attractAt(clock: number): AttractSlot { const period = clock % ATTRACT_PERIOD_S; const base = Math.floor(clock / ATTRACT_PERIOD_S) * 4; let start = 0; for (let j = 0; j < 4; j++) { const hasError = j === 3; const len = ATTRACT_CYCLE_S + (hasError ? ATTRACT_ERROR_S : 0); if (period < start + len) { const u = period - start; const cycle = base + j; if (u < ATTRACT_STEP_S) return { state: "idle", cycle, count: 0 }; if (u < 2 * ATTRACT_STEP_S) { const count = Math.min(ATTRACT_HIT_CAP, Math.floor((u - ATTRACT_STEP_S) / ATTRACT_HIT_S)); return { state: "searching", cycle, count }; } if (u < 3 * ATTRACT_STEP_S) return { state: "connecting", cycle, count: 0 }; if (u < 4 * ATTRACT_STEP_S) return { state: "composing", cycle, count: 0 }; return { state: "error", cycle, count: 0 }; } start += len; } return { state: "idle", cycle: base, count: 0 }; } function attractHitPool(cycle: number): LatticeOrbHit[] { const rnd = mulberry32(hashString(`attract:${cycle}`)); const pool: LatticeOrbHit[] = []; for (let j = 0; j < ATTRACT_HIT_CAP; j++) { pool.push({ lat: (rnd() - 0.5) * 1.0, lon: rnd() * TAU }); } return pool; } // The engine owns every mutable buffer, the morph, latches and the attract clock. React only pushes config into it. class LatticeEngine { cfg: EngineConfig = { n: 0, size: 240, tilt: 18, speed: 1, sweepSpeed: 1, morphMs: 520, stagger: 0.35, seed: "bjork", state: "idle", hits: EMPTY_HITS, tone: "dark", attract: false, reduce: false, }; private onShown: ((s: OrbState) => void) | null = null; private geo: Geo | null = null; private geoKey = ""; private target = new Float32Array(0); private drawn = new Float32Array(0); private from = new Float32Array(0); private staticMask = new Uint8Array(0); private mask = new Uint8Array(0); private hitsRef: LatticeOrbHit[] | null = null; private hitList: HitRecord[] = []; private latch = new Map(); private pulses: Pulse[] = []; private lastPhi: number | null = null; private curState: OrbState | null = null; private hasDrawn = false; private morphing = false; private morphStart = 0; private errStart = 0; private t = 0; private lastInput = Number.NEGATIVE_INFINITY; private attractClock = 0; private attractShown: OrbState | null = null; private attractCache: { key: string; hits: LatticeOrbHit[] } = { key: "", hits: EMPTY_HITS }; private canvas: HTMLCanvasElement | null = null; private ctx: CanvasRenderingContext2D | null = null; private root: HTMLElement | null = null; private cssSize = 0; private dpr = 1; private frameMs: number[] = []; private projX = new Float32Array(0); private projY = new Float32Array(0); private projD = new Float32Array(0); private projA = new Float32Array(0); private projR = new Float32Array(0); private projC = new Uint8Array(0); private bucketOf = new Uint8Array(0); private order = new Int32Array(0); private latchedCount = 0; attach(canvas: HTMLCanvasElement | null, root: HTMLElement | null) { this.root = root; if (canvas !== this.canvas) { this.canvas = canvas; this.cssSize = 0; this.ctx = null; } } private ensureCanvas(size: number) { if (!this.canvas) return; if (this.cssSize === size && this.ctx) return; this.dpr = sizeCanvas(this.canvas, size, size, defaultMaxDpr()); this.ctx = this.canvas.getContext("2d"); this.cssSize = size; } configure(next: EngineConfig) { const key = `${next.n}|${next.seed}`; if (key !== this.geoKey || !this.geo) { this.geoKey = key; this.geo = buildGeo(next.n, next.seed); const len = next.n * STRIDE; this.target = new Float32Array(len); this.drawn = new Float32Array(len); this.from = new Float32Array(len); this.staticMask = new Uint8Array(next.n); this.mask = new Uint8Array(next.n); this.projX = new Float32Array(next.n); this.projY = new Float32Array(next.n); this.projD = new Float32Array(next.n); this.projA = new Float32Array(next.n); this.projR = new Float32Array(next.n); this.projC = new Uint8Array(next.n); this.bucketOf = new Uint8Array(next.n); this.order = new Int32Array(next.n); this.hasDrawn = false; this.morphing = false; this.lastPhi = null; this.latch.clear(); this.pulses = []; this.hitsRef = null; this.hitList = []; this.mask.fill(0); } this.cfg = next; this.ensureCanvas(next.size); } noteInput() { this.lastInput = this.t; } // Receives the attract state whenever it changes, so React can update the caption. listen(callback: ((s: OrbState) => void) | null) { this.onShown = callback; } private syncHits(hits: LatticeOrbHit[]) { if (hits === this.hitsRef) return; this.hitsRef = hits; const list: HitRecord[] = hits.map((h) => ({ key: hitKey(h), lat: h.lat, lon: h.lon })); const keys = new Set(list.map((h) => h.key)); for (const key of Array.from(this.latch.keys())) { if (!keys.has(key)) this.latch.delete(key); } this.hitList = list; this.rebuildMask(); } private rebuildMask() { this.mask.fill(0); for (const dot of this.latch.values()) this.mask[dot] = 1; this.latchedCount = this.latch.size; } private startMorph(t: number) { if (!this.hasDrawn || !this.geo) { this.morphing = false; return; } this.from.set(this.drawn); this.morphStart = t; this.morphing = true; } private checkCrossings(prev: number, now: number, tau: number, t: number) { const g = this.geo; if (!g) return; for (const h of this.hitList) { if (this.latch.has(h.key)) continue; const kPrev = Math.floor((prev - h.lon) / TAU); const kNow = Math.floor((now - h.lon) / TAU); if (kNow > kPrev) { const dot = nearestDot(g, h, tau); this.latch.set(h.key, dot); this.mask[dot] = 1; this.pulses.push({ dot, t0: t }); } } this.latchedCount = this.latch.size; } private advanceBuffers(t: number) { const g = this.geo; if (!g) return; const { n, rank, noise } = g; const { target, drawn, from } = this; const { morphMs, stagger } = this.cfg; if (!this.morphing) { drawn.set(target); return; } const elapsedMs = (t - this.morphStart) * 1000; const total = morphMs * (1 + stagger); for (let i = 0; i < n; i++) { const delay = stagger * morphMs * rank[i]; const raw = (elapsedMs - delay) / morphMs; const m = EASE(Math.min(1, Math.max(0, raw))); const scramble = 0.08 * Math.sin(Math.PI * m); const o = i * STRIDE; for (let c = 0; c < 3; c++) { drawn[o + c] = from[o + c] + (target[o + c] - from[o + c]) * m + noise[i * 3 + c] * scramble; } drawn[o + 3] = from[o + 3] + (target[o + 3] - from[o + 3]) * m; drawn[o + 4] = target[o + 4]; drawn[o + 5] = from[o + 5] + (target[o + 5] - from[o + 5]) * m; } if (elapsedMs >= total) { this.morphing = false; this.setMorphAttr(false); } } private setMorphAttr(value: boolean) { if (this.root) this.root.dataset.morphing = value ? "true" : "false"; } private projectAndDraw(tau: number, state: OrbState, t: number) { const ctx = this.ctx; const g = this.geo; const { size, tilt, tone } = this.cfg; if (!ctx || !g) return; const pal = BJORK_PALETTE[tone]; const R = size * 0.42; // Blur test (alpha-weighted ink centroid, all five states): the tilted lattice already sits at 0.500 of // the canvas height, so there is no vertical nudge. The +1% drop the plan suggested left it 1% low. const cx = size / 2; const cy = size / 2; const base = size / 120; const cT = Math.cos(tilt * DEG); const sT = Math.sin(tilt * DEG); const n = g.n; const { drawn, projX, projY, projD, projA, projR, projC, bucketOf, order } = this; for (let i = 0; i < n; i++) { const o = i * STRIDE; const x = drawn[o]; const y0 = drawn[o + 1]; const z0 = drawn[o + 2]; const y = y0 * cT - z0 * sT; const z = y0 * sT + z0 * cT; const d = Math.min(1, Math.max(0, (z + 1) / 2)); projX[i] = cx + x * R; projY[i] = cy - y * R; projD[i] = z; projA[i] = (0.25 + 0.75 * d) * drawn[o + 3]; projR[i] = base * (0.55 + 0.45 * d) * drawn[o + 5]; projC[i] = drawn[o + 4]; bucketOf[i] = Math.min(BUCKETS - 1, Math.floor(d * BUCKETS)); } // Counting sort into 8 depth buckets, back to front. No full sort. const counts = new Int32Array(BUCKETS + 1); for (let i = 0; i < n; i++) counts[bucketOf[i] + 1]++; for (let b = 0; b < BUCKETS; b++) counts[b + 1] += counts[b]; for (let i = 0; i < n; i++) order[counts[bucketOf[i]]++] = i; ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0); ctx.clearRect(0, 0, size, size); // Connecting edges sit under the dots. if (state === "connecting" && g.anchorIds.length) { const phase = tau % EDGE_CYCLE_S; ctx.strokeStyle = pal.accentInk; ctx.lineWidth = 1; for (let k = 0; k < ANCHOR_PAIRS.length; k++) { if (phase < k * EDGE_STEP_S) continue; const [pa, pb] = ANCHOR_PAIRS[k]; const a = g.anchorIds[pa]; const b = g.anchorIds[pb]; ctx.globalAlpha = 0.7; ctx.beginPath(); ctx.moveTo(projX[a], projY[a]); ctx.lineTo(projX[b], projY[b]); ctx.stroke(); } } let lastColor = -1; for (let j = 0; j < n; j++) { const i = order[j]; if (projC[i] !== lastColor) { lastColor = projC[i]; ctx.fillStyle = lastColor === COLOR_ACCENT ? pal.accent : lastColor === COLOR_ERROR ? pal.error : pal.text; } ctx.globalAlpha = projA[i]; const r = projR[i]; const px = projX[i]; const py = projY[i]; if (r < 1.6) { ctx.fillRect(px - r, py - r, 2 * r, 2 * r); } else { ctx.beginPath(); ctx.arc(px, py, r, 0, TAU); ctx.fill(); } } // Meridian: front hemisphere only. if (state === "searching") { const phi = tau * MERIDIAN_RATE * this.cfg.sweepSpeed; const cp = Math.cos(phi); const sp = Math.sin(phi); ctx.strokeStyle = pal.accentInk; ctx.lineWidth = 1; ctx.globalAlpha = 1; ctx.beginPath(); let pen = false; for (let s = 0; s <= MERIDIAN_SEGMENTS; s++) { const lat = -Math.PI / 2 + (Math.PI * s) / MERIDIAN_SEGMENTS; const cl = Math.cos(lat); const x = cl * cp; const y0 = Math.sin(lat); const z0 = cl * sp; const y = y0 * cT - z0 * sT; const z = y0 * sT + z0 * cT; if (z > 0) { const px = cx + x * R; const py = cy - y * R; if (pen) ctx.lineTo(px, py); else ctx.moveTo(px, py); pen = true; } else { pen = false; } } ctx.stroke(); } // Search pulses on newly latched hits. if (this.pulses.length) { const alive: Pulse[] = []; ctx.strokeStyle = pal.accent; ctx.lineWidth = 1; for (const p of this.pulses) { const prog = (t - p.t0) / PULSE_S; if (prog >= 1) continue; alive.push(p); ctx.globalAlpha = 0.6 * (1 - prog); ctx.beginPath(); ctx.arc(projX[p.dot], projY[p.dot], 2 + 8 * prog, 0, TAU); ctx.stroke(); } this.pulses = alive; } ctx.globalAlpha = 1; if (this.root) { this.root.dataset.latched = String(this.latchedCount); this.root.dataset.drawn = String(n); } } private recordFrame(ms: number) { if (process.env.NODE_ENV === "production") return; this.frameMs.push(ms); if (this.frameMs.length > FRAME_SAMPLES) this.frameMs.shift(); if (this.frameMs.length % 30 === 0 && this.root) { const sorted = [...this.frameMs].sort((a, b) => a - b); const p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))]; this.root.dataset.frameMs = p95.toFixed(2); } } // Draws one static pose at `t`. Every hit is latched, and there is no morph. drawStatic(t: number) { const g = this.geo; if (!g || !this.canvas) return; this.ensureCanvas(this.cfg.size); const state = this.cfg.state; const tau = t * this.cfg.speed; const hits = this.cfg.hits; this.staticMask.fill(0); for (const h of hits) this.staticMask[nearestDot(g, h, tau)] = 1; this.target.fill(0); fillTarget(state, tau, g, this.target, { R: this.cfg.size * 0.42, sweepSpeed: this.cfg.sweepSpeed, errAge: ERROR_SETTLED_S, latched: this.staticMask, }); this.drawn.set(this.target); this.morphing = false; this.hasDrawn = true; this.curState = state; this.lastPhi = null; this.pulses = []; this.latchedCount = new Set(hits.map(hitKey)).size; this.setMorphAttr(false); this.projectAndDraw(tau, state, t); this.noteShown(state); } private noteShown(state: OrbState) { if (this.cfg.attract && this.attractShown !== state) { this.attractShown = state; this.onShown?.(state); } } // Called by useVisibleLoop each frame. Returns false to go idle (reduced motion). tick(dt: number, t: number): boolean { if (this.cfg.reduce) { this.t = t; this.drawStatic(0); return false; } const start = typeof performance !== "undefined" ? performance.now() : 0; this.t = t; if (!this.geo || !this.canvas) return true; let state: OrbState = this.cfg.state; let hits = this.cfg.hits; if (this.cfg.attract) { const paused = t - this.lastInput < ATTRACT_IDLE_PAUSE_S; if (!paused) this.attractClock += dt; const slot = attractAt(this.attractClock); state = slot.state; const key = `${slot.cycle}|${slot.count}`; if (this.attractCache.key !== key) { this.attractCache = { key, hits: slot.count > 0 ? attractHitPool(slot.cycle).slice(0, slot.count) : EMPTY_HITS, }; } hits = this.attractCache.hits; this.noteShown(state); } this.syncHits(hits); if (state !== this.curState) { this.startMorph(t); this.curState = state; if (state === "error") this.errStart = t; if (this.morphing) this.setMorphAttr(true); } const tau = t * this.cfg.speed; const { sweepSpeed, size } = this.cfg; if (state === "searching") { const phi = tau * MERIDIAN_RATE * sweepSpeed; if (this.lastPhi !== null) this.checkCrossings(this.lastPhi, phi, tau, t); this.lastPhi = phi; } else { this.lastPhi = null; } fillTarget(state, tau, this.geo, this.target, { R: size * 0.42, sweepSpeed, errAge: t - this.errStart, latched: this.mask, }); this.advanceBuffers(t); this.hasDrawn = true; this.projectAndDraw(tau, state, t); this.recordFrame(typeof performance !== "undefined" ? performance.now() - start : 0); return true; } } const subscribeNone = () => () => {}; const mountedClient = () => true; const mountedServer = () => false; function subscribeCoarse(callback: () => void) { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {}; const query = window.matchMedia("(pointer: coarse)"); query.addEventListener("change", callback); return () => query.removeEventListener("change", callback); } export function LatticeOrb({ state, hits, dots, size = 240, tilt = 18, speed = 1, sweepSpeed = 1, morphMs = 520, stagger = 0.35, seed = "bjork", label, showCaption = true, time, tone: toneProp, attract = false, className, }: LatticeOrbProps) { const tone = useBjorkTone(toneProp); const coarse = useSyncExternalStore(subscribeCoarse, isCoarsePointer, () => false); // Reduced motion is read only after mount, so the server render and first client render match. const mounted = useSyncExternalStore(subscribeNone, mountedClient, mountedServer); const prefersReduced = useReducedMotion(); const reduce = mounted && !!prefersReduced; const n = dots ?? (coarse ? 360 : 600); const attractOn = attract && !reduce; const isStatic = time !== undefined; const hitList = hits ?? EMPTY_HITS; const [engine] = useState(() => new LatticeEngine()); const [attractShown, setAttractShown] = useState("idle"); const rootRef = useRef(null); const canvasRef = useRef(null); const shown: OrbState = attractOn ? attractShown : state; const caption = label ?? STATE_LABEL[shown]; useEffect(() => { engine.listen(setAttractShown); return () => engine.listen(null); }, [engine]); useEffect(() => { engine.attach(canvasRef.current, rootRef.current); engine.configure({ n, size, tilt, speed, sweepSpeed, morphMs, stagger, seed, state, hits: hitList, tone, attract: attractOn, reduce, }); if (reduce || isStatic) engine.drawStatic(time ?? 0); }, [engine, n, size, tilt, speed, sweepSpeed, morphMs, stagger, seed, state, hitList, tone, attractOn, reduce, isStatic, time]); useVisibleLoop(rootRef, (dt, t) => engine.tick(dt, t), { enabled: !isStatic, fpsCap: coarse ? 30 : 0, }); return (

engine.noteInput()} onPointerMove={() => engine.noteInput()} onPointerDown={() => engine.noteInput()} onKeyDown={() => engine.noteInput()} className={cn("relative flex w-full select-none flex-col items-center", className)} >

); } a3:T540,export type BjorkTone = "dark" | "light"; // Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks. export const BJORK_PALETTE = { dark: { bg: "#050505", stage: "#111111", surface: "#121212", raised: "#161616", active: "#202020", border: "#232323", borderStrong: "#343434", text: "#ededed", textMedium: "rgba(237,237,237,0.72)", textMuted: "rgba(237,237,237,0.6)", textSoft: "rgba(237,237,237,0.5)", textFaint: "rgba(237,237,237,0.22)", hair: "rgba(237,237,237,0.12)", accent: "#ec5c13", accentInk: "#ec5c13", accentFill: "#b84a12", accentSoft: "rgba(236,92,19,0.12)", accentMuted: "rgba(236,92,19,0.24)", accentFg: "#fff2ea", success: "#4cc38a", warning: "#f2b544", error: "#ff5c4d", }, light: { bg: "#f7f5ef", stage: "#f7f5ef", surface: "#fffcf6", raised: "#f5efe3", active: "#efe7d8", border: "#eee6db", borderStrong: "#e1d7c8", text: "#171717", textMedium: "rgba(23,23,23,0.78)", textMuted: "rgba(23,23,23,0.68)", textSoft: "rgba(23,23,23,0.62)", textFaint: "rgba(23,23,23,0.22)", hair: "rgba(23,23,23,0.10)", accent: "#ec7d43", accentInk: "#b4531f", accentFill: "#ec7d43", accentSoft: "rgba(236,125,67,0.10)", accentMuted: "rgba(236,125,67,0.20)", accentFg: "#3f2112", success: "#1f8a55", warning: "#a86b00", error: "#c8361f", }, } as const; a4:Td34,"use client"; import { useCallback, useEffect, useMemo, useRef, type RefObject } from "react"; export interface VisibleLoopOptions { enabled?: boolean; fpsCap?: number; rootMargin?: string; } /** * Runs `frame(dt, t)` on requestAnimationFrame while the element is near the viewport, * the tab is visible and `enabled` is not false. Return `false` from `frame` to go idle * until `wake()` is called. Writes `data-loop` on the element: running, idle or paused. */ export function useVisibleLoop( ref: RefObject, frame: (dt: number, t: number) => boolean | void, opts?: VisibleLoopOptions, ): { wake: () => void } { const enabled = opts?.enabled !== false; const fpsCap = opts?.fpsCap ?? 0; const rootMargin = opts?.rootMargin ?? "96px"; const frameRef = useRef(frame); useEffect(() => { frameRef.current = frame; }, [frame]); const wakeRef = useRef<() => void>(() => {}); const wake = useCallback(() => wakeRef.current(), []); useEffect(() => { const el = ref.current; if (!el || typeof window === "undefined") return; let wants = true; // false once the frame callback returns false let inView = false; let raf = 0; let last = 0; let t = 0; const minFrame = fpsCap > 0 ? 1000 / fpsCap : 0; const canRun = () => enabled && inView && document.visibilityState === "visible"; const stop = () => { if (raf) cancelAnimationFrame(raf); raf = 0; }; const update = () => { if (!enabled) { stop(); el.dataset.loop = "paused"; return; } if (!wants) { stop(); el.dataset.loop = "idle"; return; } if (!canRun()) { stop(); el.dataset.loop = "paused"; return; } el.dataset.loop = "running"; if (!raf) { last = performance.now(); raf = requestAnimationFrame(tick); } }; const tick = (now: number) => { raf = 0; if (!canRun() || !wants) { update(); return; } const elapsed = now - last; if (minFrame && elapsed < minFrame - 0.5) { raf = requestAnimationFrame(tick); return; } last = now; const dt = Math.min(0.05, Math.max(0, elapsed / 1000)); t += dt; const keep = frameRef.current(dt, t); if (keep === false) { wants = false; update(); return; } raf = requestAnimationFrame(tick); }; const observer = new IntersectionObserver( ([entry]) => { inView = entry.isIntersecting; update(); }, { rootMargin }, ); observer.observe(el); const onVisibility = () => update(); document.addEventListener("visibilitychange", onVisibility); wakeRef.current = () => { wants = true; update(); }; update(); return () => { stop(); observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); wakeRef.current = () => {}; }; }, [ref, enabled, fpsCap, rootMargin]); return useMemo(() => ({ wake }), [wake]); } // matchMedia based check. False on the server. export function isCoarsePointer(): boolean { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false; return window.matchMedia("(pointer: coarse)").matches; } a5:T5ec,"use client"; import { useEffect, useState, type RefObject } from "react"; import { isCoarsePointer } from "./loop"; // Caps DPR at 1.5 on coarse pointers and 2 otherwise. export function defaultMaxDpr(): number { return isCoarsePointer() ? 1.5 : 2; } // Sets the backing size for a CSS box and returns the DPR used. export function sizeCanvas( canvas: HTMLCanvasElement, cssW: number, cssH: number, maxDpr: number = defaultMaxDpr(), ): number { const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, maxDpr); canvas.width = Math.max(1, Math.round(cssW * dpr)); canvas.height = Math.max(1, Math.round(cssH * dpr)); canvas.style.width = `${cssW}px`; canvas.style.height = `${cssH}px`; return dpr; } // Rounded size of an element, kept current with a ResizeObserver. export function useElementSize(ref: RefObject): { width: number; height: number } { const [size, setSize] = useState({ width: 0, height: 0 }); useEffect(() => { const el = ref.current; if (!el || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver((entries) => { const box = entries[0]?.contentRect; if (!box) return; const width = Math.round(box.width); const height = Math.round(box.height); setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height })); }); observer.observe(el); return () => observer.disconnect(); }, [ref]); return size; } a6:T8ed,// Seeded randomness and noise. Deterministic for a given seed, so previews and tests repeat. // Small fast PRNG. Returns floats in [0, 1). export function mulberry32(seed: number): () => number { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // FNV-1a 32-bit. export function hashString(s: string): number { let h = 0x811c9dc5; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 0x01000193); } return h >>> 0; } // Integer lattice hash to [-1, 1]. function latticeHash(seed: number, x: number, y = 0): number { let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(seed | 0, 2246822519); h = Math.imul(h ^ (h >>> 13), 1274126177); h ^= h >>> 16; return ((h >>> 0) / 4294967295) * 2 - 1; } function smooth(t: number): number { return t * t * (3 - 2 * t); } export function valueNoise1D(seed: number): (x: number) => number { return (x: number) => { const i = Math.floor(x); const f = x - i; const a = latticeHash(seed, i); const b = latticeHash(seed, i + 1); return a + (b - a) * smooth(f); }; } export function fbm1D(seed: number, octaves = 3): (x: number) => number { const layers = Array.from({ length: octaves }, (_, o) => valueNoise1D(seed + o * 101)); let norm = 0; for (let o = 0; o < octaves; o++) norm += 0.5 ** o; return (x: number) => { let sum = 0; let amp = 1; let freq = 1; for (let o = 0; o < octaves; o++) { sum += amp * layers[o](x * freq); amp *= 0.5; freq *= 2; } return sum / norm; }; } export function valueNoise2D(seed: number): (x: number, y: number) => number { return (x: number, y: number) => { const xi = Math.floor(x); const yi = Math.floor(y); const fx = smooth(x - xi); const fy = smooth(y - yi); const a = latticeHash(seed, xi, yi); const b = latticeHash(seed, xi + 1, yi); const c = latticeHash(seed, xi, yi + 1); const d = latticeHash(seed, xi + 1, yi + 1); const top = a + (b - a) * fx; const bottom = c + (d - c) * fx; return top + (bottom - top) * fy; }; } a7:Tcaa,// Pure spring math, no React. Units: stiffness k, damping d (coefficient), mass m, time in seconds. export interface SpringConfig { stiffness: number; damping: number; mass: number; } export interface SpringState { x: number; v: number; } // Damping ratio zeta = d / (2 * sqrt(k * m)). export function dampingRatio(c: SpringConfig): number { return c.damping / (2 * Math.sqrt(c.stiffness * c.mass)); } // Exact solution of y'' = -(k/m) y - (d/m) y' for displacement y0 and velocity v0 at time t. // Returns displacement and velocity together so stepping can be exact, not integrated. function solveLinear(t: number, c: SpringConfig, y0: number, v0: number): { y: number; v: number } { const w0 = Math.sqrt(c.stiffness / c.mass); const z = dampingRatio(c); if (Math.abs(z - 1) < 1e-9) { // Critically damped. const e = Math.exp(-w0 * t); const b = v0 + w0 * y0; return { y: e * (y0 + b * t), v: e * (b - w0 * (y0 + b * t)) }; } if (z < 1) { // Underdamped. const wd = w0 * Math.sqrt(1 - z * z); const a = z * w0; const B = (v0 + a * y0) / wd; const e = Math.exp(-a * t); const cos = Math.cos(wd * t); const sin = Math.sin(wd * t); return { y: e * (y0 * cos + B * sin), v: e * (-a * (y0 * cos + B * sin) + wd * (-y0 * sin + B * cos)), }; } // Overdamped. const s = w0 * Math.sqrt(z * z - 1); const r1 = -z * w0 + s; const r2 = -z * w0 - s; const B = (v0 - r1 * y0) / (r2 - r1); const A = y0 - B; const e1 = Math.exp(r1 * t); const e2 = Math.exp(r2 * t); return { y: A * e1 + B * e2, v: A * r1 * e1 + B * r2 * e2 }; } // Analytic position at time t for a spring from `from` to `to` with initial velocity v0. export function springAt(t: number, c: SpringConfig, from = 0, to = 1, v0 = 0): number { return to + solveLinear(t, c, from - to, v0).y; } // Overshoot as a fraction of the total travel. Zero when critically or overdamped. export function overshoot(c: SpringConfig): number { const z = dampingRatio(c); if (z >= 1) return 0; return Math.exp((-Math.PI * z) / Math.sqrt(1 - z * z)); } // Seconds until the spring stays within epsilon of its target (fraction of travel). // Found by scanning backwards from a bound derived from the slowest decay rate. export function settleTime(c: SpringConfig, epsilon = 0.001): number { const w0 = Math.sqrt(c.stiffness / c.mass); const z = dampingRatio(c); const slowest = z < 1 ? z * w0 : (z - Math.sqrt(z * z - 1)) * w0; const tEnd = (Math.log(1 / epsilon) / slowest) * 1.5 + 0.05; const steps = 4000; const dt = tEnd / steps; const band = epsilon; let last = 0; for (let i = 0; i <= steps; i++) { const t = i * dt; if (Math.abs(springAt(t, c, 1, 0, 0)) >= band) last = t; } return last + dt; } // Advances the state by dt towards `target`. Uses the exact solution of the linear spring // (no integration), so it tracks springAt to rounding error at any step size and stays stable // for stiff configs where a fixed-step integrator drifts. export function stepSpring(s: SpringState, target: number, c: SpringConfig, dt: number): void { if (dt <= 0) return; const r = solveLinear(dt, c, s.x - target, s.v); s.x = target + r.y; s.v = r.v; } a8:T835,// Shared springs, easings and durations. Components import these instead of inventing values. export const springs = { press: { type: "spring", stiffness: 500, damping: 30, mass: 0.6 }, snappy: { type: "spring", stiffness: 400, damping: 25, mass: 1 }, standard: { type: "spring", stiffness: 300, damping: 30, mass: 0.8 }, soft: { type: "spring", stiffness: 200, damping: 25, mass: 1.2 }, settle: { type: "spring", stiffness: 380, damping: 30, mass: 0.8 }, blurIn: { type: "spring", stiffness: 400, damping: 28, mass: 0.6 }, } as const; export const ease = { out: [0.23, 1, 0.32, 1], inOut: [0.77, 0, 0.175, 1], drawer: [0.32, 0.72, 0, 1], } as const; export const easeCss = { out: "cubic-bezier(0.23,1,0.32,1)", inOut: "cubic-bezier(0.77,0,0.175,1)", drawer: "cubic-bezier(0.32,0.72,0,1)", } as const; export const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms // Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1]. export function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number { const cx = 3 * x1; const bx = 3 * (x2 - x1) - cx; const ax = 1 - cx - bx; const cy = 3 * y1; const by = 3 * (y2 - y1) - cy; const ay = 1 - cy - by; const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s; const sampleY = (s: number) => ((ay * s + by) * s + cy) * s; const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx; const solveX = (x: number) => { let s = x; for (let i = 0; i < 8; i++) { const err = sampleX(s) - x; if (Math.abs(err) < 1e-6) return s; const d = sampleDX(s); if (Math.abs(d) < 1e-6) break; s -= err / d; } let lo = 0; let hi = 1; s = x; while (lo < hi) { const v = sampleX(s); if (Math.abs(v - x) < 1e-6) return s; if (x > v) lo = s; else hi = s; s = (lo + hi) / 2; if (hi - lo < 1e-7) break; } return s; }; return (t: number) => { if (t <= 0) return 0; if (t >= 1) return 1; return sampleY(solveX(t)); }; } 7e:["$","$La1",null,{"files":[{"path":"components/bjork-ui/ai/lattice-orb.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/ai/lattice-orb.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/_core/tone.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/tone.ts"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/canvas.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/_core/canvas.ts"},{"path":"components/bjork-ui/_core/random.ts","content":"$a6","type":"registry:component","target":"@components/bjork-ui/_core/random.ts"},{"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/spring.ts","content":"$a7","type":"registry:component","target":"@components/bjork-ui/_core/spring.ts"},{"path":"components/bjork-ui/_core/motion.ts","content":"$a8","type":"registry:component","target":"@components/bjork-ui/_core/motion.ts"}],"className":"h-[70svh] min-h-80"}]