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:T56a8,"use client"; import { useEffect, useRef, useSyncExternalStore, type ReactNode, } 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 { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; import { useElementSize } from "@/components/bjork-ui/_core/canvas"; import { stepSpring, type SpringConfig, type SpringState } from "@/components/bjork-ui/_core/spring"; import { valueNoise1D } from "@/components/bjork-ui/_core/random"; import { LiveRegion } from "@/components/bjork-ui/_core/a11y"; export type BeamPhase = "idle" | "listening" | "thinking" | "speaking"; export type BeamLevel = number | (() => number | [number, number, number]); export interface HandoffBeamProps { phase: BeamPhase; level?: BeamLevel; analyser?: AnalyserNode | null; children?: ReactNode; /** Corner radius of the host, so the light is clipped to it. */ radius?: number; // 32 /** Height in px the light may rise into the host from its bottom edge. */ reach?: number; // 22 intensity?: number; // 1 /** "ember", "mono", or up to five colours: centre, edge, thinking, listening edge, speaking edge. */ palette?: "ember" | "mono" | string[]; // "ember" /** Horizontal centre of the light, 0 to 1. */ gatherOffset?: number; // 0.5 /** How far the thinking shimmer lifts the line, 0 to 1. */ heldLevel?: number; // 0.45 attack?: number; // 70 ms release?: number; // 260 ms threshold?: number; // 0.06 sensitivity?: number; // 1.4 phaseLabels?: Partial>; tone?: BjorkTone; attract?: boolean; className?: string; } const DEFAULT_LABELS: Record = { idle: "Idle", listening: "Listening", thinking: "Thinking", speaking: "Speaking", }; const PHASE_INDEX: Record = { idle: 0, listening: 1, thinking: 2, speaking: 3 }; // Every phase is a weight. All four glide on the same critically damped spring, so they always // sum to 1 and any mix of two phases is a valid pose: changes morph, never swap. const MORPH: SpringConfig = { stiffness: 64, damping: 16, mass: 1 }; // Per phase (idle, listening, thinking, speaking): span as a fraction of the host width, // resting brightness, and the extra brightness the voice level adds. const SPAN = [0.16, 0.6, 0.3, 0.5]; const BRIGHT = [0.42, 0.55, 0.85, 0.62]; const BRIGHT_GAIN = [0, 0.45, 0, 0.35]; const POINTS = 96; // curve samples across the span const RAMP = 96; // colour ramp texels across the span const SHIMMER_S = 1.5; // seconds for one pass of the thinking shimmer const SHIMMER_W = 0.22; // shimmer half-width, in span units const IDLE_BREATH_HZ = 0.2; const LISTEN_FLOOR = 0.07; // a faint drift while listening to silence, so it never reads as off const RESUME_IDLE_S = 4; const DPR_CAP = 2; const STATIC_CLOCK = 0.8; // frozen time for reduced motion, picked for a balanced pose const STATIC_RAW: [number, number, number] = [0.6, 0.45, 0.3]; // Attract schedule: listening 3s, thinking 2s, speaking 3s, idle 1.5s. const ATTRACT_SEGMENTS: Array<{ phase: BeamPhase; until: number }> = [ { phase: "listening", until: 3 }, { phase: "thinking", until: 5 }, { phase: "speaking", until: 8 }, { phase: "idle", until: 9.5 }, ]; const ATTRACT_PERIOD = 9.5; const subscribeNoop = () => () => {}; const getMounted = () => true; const getServerMounted = () => false; function clamp01(v: number): number { return v < 0 ? 0 : v > 1 ? 1 : v; } function smoothstep01(u: number): number { const c = clamp01(u); return c * c * (3 - 2 * c); } // Raised cosine in cycles: 0 to 1, crest at whole numbers. function bump(p: number): number { return 0.5 + 0.5 * Math.cos(2 * Math.PI * p); } function hexToRgb(hex: string, out: Float32Array, at: number) { let h = hex.trim().replace("#", ""); if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2]; const n = parseInt(h.slice(0, 6), 16); const ok = Number.isFinite(n); out[at] = ok ? (n >> 16) & 255 : 236; out[at + 1] = ok ? (n >> 8) & 255 : 92; out[at + 2] = ok ? n & 255 : 19; } interface PaletteSpec { key: string; core: string[]; // per phase: idle, listening, thinking, speaking edge: string[]; glow: number; // glow and haze strength gain: number; // line opacity gain: light surfaces need a firmer line } function resolvePalette(palette: HandoffBeamProps["palette"], tone: BjorkTone): PaletteSpec { const dark = tone === "dark"; const tokens = BJORK_PALETTE[tone]; if (Array.isArray(palette) && palette.length > 0) { const c = (i: number) => palette[Math.min(i, palette.length - 1)] ?? tokens.accent; return { key: `custom:${tone}:${palette.join(",")}`, core: [c(0), c(0), c(2), c(0)], edge: [c(0), c(3), c(1), c(4)], glow: dark ? 1 : 0.6, gain: dark ? 1 : 1.7, }; } if (palette === "mono") { const t = tokens.text; return { key: `mono:${tone}`, core: [t, t, t, t], edge: [t, t, t, t], glow: dark ? 0.8 : 0.45, gain: dark ? 1 : 1.2 }; } if (dark) { return { key: "ember:dark", core: ["#ec5c13", "#ff7a2e", "#ffd1a1", "#ff8a3d"], edge: ["#ec5c13", "#ff5ea8", "#ff8a3d", "#ffb36b"], glow: 1, gain: 1, }; } return { // Saturated, deeper ember: on a cream surface a pale glow washes out (light saturation stays above 0.35). key: "ember:light", core: ["#dc4a0c", "#e0601c", "#ec7d2e", "#d4541a"], edge: ["#dc4a0c", "#d63c86", "#d4541a", "#e8862f"], glow: 0.6, gain: 1.7, }; } interface Engine { w: [SpringState, SpringState, SpringState, SpringState]; env: Float32Array; // attack/release envelope per band lvl: Float32Array; // envelope smoothed once more, what the shape reads raw: [number, number, number]; clock: number; // own clock, so a loop restart never jumps the motion now: number; inputAt: number; attractT: number; shimmerT: number; lastPhase: BeamPhase | null; ys: Float32Array; // curve height above the baseline, px win: Float32Array; // taper per sample colors: Float32Array; // core rgb x4 then edge rgb x4 colorKey: string; voiceListen: () => [number, number, number]; voiceSpeak: () => [number, number, number]; analyserNode: AnalyserNode | null; buf: Uint8Array | null; bins: Int32Array; ramp: HTMLCanvasElement | null; rampData: ImageData | null; } interface Latest { phase: BeamPhase; level: BeamLevel | undefined; analyser: AnalyserNode | null; attract: boolean; reduce: boolean; palette: PaletteSpec; intensity: number; center: number; heldLevel: number; attack: number; release: number; threshold: number; sensitivity: number; cssW: number; cssH: number; } function createEngine(phase: BeamPhase): Engine { const k = PHASE_INDEX[phase]; const spring = (i: number): SpringState => ({ x: i === k ? 1 : 0, v: 0 }); const win = new Float32Array(POINTS + 1); for (let i = 0; i <= POINTS; i++) { const u = (i / POINTS) * 2 - 1; const q = 1 - u * u; win[i] = q * q; } return { w: [spring(0), spring(1), spring(2), spring(3)], env: new Float32Array(3), lvl: new Float32Array(3), raw: [0, 0, 0], clock: 0, now: 0, inputAt: Number.NEGATIVE_INFINITY, attractT: 0, shimmerT: 0, lastPhase: null, ys: new Float32Array(POINTS + 1), win, colors: new Float32Array(24), colorKey: "", voiceListen: createSimulatedVoice(11), voiceSpeak: createSimulatedVoice(29), analyserNode: null, buf: null, bins: new Int32Array(6), ramp: null, rampData: null, }; } // Fills engine.raw from a level source. Array getters are read without copying. function readLevel(e: Engine, level: BeamLevel | undefined) { const s = level === undefined ? 0 : typeof level === "function" ? level() : level; if (Array.isArray(s)) { e.raw[0] = s[0] ?? 0; e.raw[1] = s[1] ?? 0; e.raw[2] = s[2] ?? 0; } else { e.raw[0] = s; e.raw[1] = s * 0.8; e.raw[2] = s * 0.6; } } function readAnalyser(e: Engine, node: AnalyserNode) { if (e.analyserNode !== node) { e.analyserNode = node; e.buf = new Uint8Array(node.frequencyBinCount); const binHz = node.context.sampleRate / node.fftSize; const maxBin = node.frequencyBinCount - 1; const range = (lo: number, hi: number) => { const a = Math.min(maxBin, Math.max(1, Math.ceil(lo / binHz))); const b = Math.min(maxBin + 1, Math.max(a + 1, Math.floor(hi / binHz))); return [a, b]; }; const [l0, l1] = range(80, 300); const [m0, m1] = range(300, 2000); const [h0, h1] = range(2000, 6000); e.bins.set([l0, l1, m0, m1, h0, h1]); } const buf = e.buf; if (!buf) return; node.getByteFrequencyData(buf); for (let b = 0; b < 3; b++) { const lo = e.bins[b * 2]; const hi = e.bins[b * 2 + 1]; let sum = 0; for (let k = lo; k < hi; k++) sum += buf[k]; e.raw[b] = hi > lo ? sum / (hi - lo) / 255 : 0; } } // Parses the palette once per palette change, and makes the ramp canvas once. function ensureColors(e: Engine, spec: PaletteSpec) { if (e.colorKey === spec.key) return; for (let k = 0; k < 4; k++) { hexToRgb(spec.core[k], e.colors, k * 3); hexToRgb(spec.edge[k], e.colors, 12 + k * 3); } e.colorKey = spec.key; if (!e.ramp) { e.ramp = document.createElement("canvas"); e.ramp.width = RAMP; e.ramp.height = 1; const rctx = e.ramp.getContext("2d"); e.rampData = rctx ? rctx.createImageData(RAMP, 1) : null; } } // Half-thickness factor: a plain taper (shimmerAt NaN), or a gaussian lens around the shimmer. function thickness(e: Engine, i: number, shimmerAt: number): number { if (Number.isNaN(shimmerAt)) return 0.25 + 0.75 * Math.sqrt(e.win[i]); const u = (i / POINTS) * 2 - 1; const d = (u - shimmerAt) / SHIMMER_W; return Math.exp(-d * d) * e.win[i]; } // Traces a ribbon around the curve: top edge left to right, bottom edge back. The thickness // follows the taper, so the ends close to a point and need no caps. function ribbon( ctx: CanvasRenderingContext2D, e: Engine, x0: number, dx: number, base: number, half: number, shimmerAt: number, ) { ctx.beginPath(); for (let i = 0; i <= POINTS; i++) { const y = base - e.ys[i] - half * thickness(e, i, shimmerAt); if (i === 0) ctx.moveTo(x0, y); else ctx.lineTo(x0 + i * dx, y); } for (let i = POINTS; i >= 0; i--) { ctx.lineTo(x0 + i * dx, base - e.ys[i] + half * thickness(e, i, shimmerAt)); } ctx.closePath(); ctx.fill(); } /** * Wraps a host (a composer, an input, a card) and lights a hairline along its bottom edge. * It listens (soft crests draw in towards the centre), thinks (a shimmer travels the line) and * speaks (calm ripples flow outwards). Every parameter is a mix of the four phases on one * critically damped spring, so it morphs between them and never swaps. Canvas 2D only. */ export function HandoffBeam({ phase, level, analyser = null, children, radius = 32, reach = 22, intensity = 1, palette = "ember", gatherOffset = 0.5, heldLevel = 0.45, attack = 70, release = 260, threshold = 0.06, sensitivity = 1.4, phaseLabels, tone, attract = false, className, }: HandoffBeamProps) { const resolvedTone = useBjorkTone(tone); const reducedPref = useReducedMotion(); // Server and first client render both read "not reduced", so hydration matches. const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted); const reduce = mounted && reducedPref === true; const rootRef = useRef(null); const canvasRef = useRef(null); const size = useElementSize(rootRef); const engineRef = useRef(null); const reachEff = size.height > 0 ? Math.min(reach, size.height) : reach; const paletteSpec = resolvePalette(palette, resolvedTone); const labels = { ...DEFAULT_LABELS, ...phaseLabels }; // The engine holds mutable simulation state, so it lives in a ref. It is created on first use. const getEngine = (): Engine => { if (!engineRef.current) engineRef.current = createEngine(latest.current?.phase ?? phase); return engineRef.current; }; // Everything the loop reads. Written in an effect so the render stays pure. const latest = useRef(null); useEffect(() => { latest.current = { phase, level, analyser, attract, reduce, palette: paletteSpec, intensity, center: gatherOffset, heldLevel, attack, release, threshold, sensitivity, cssW: size.width, cssH: reachEff, }; }); const frame = (dtIn: number) => { const L = latest.current; const canvas = canvasRef.current; if (!L || !canvas) return; const e = getEngine(); const dt = L.reduce ? 0 : dtIn; e.clock += dt; e.now += dtIn; const t = L.reduce ? STATIC_CLOCK : e.clock; const cssW = L.cssW; const cssH = L.cssH; if (cssW <= 0 || cssH <= 0) return; // Attract drives the phase and level, unless the user is interacting. const inputActive = e.now >= e.inputAt && e.now - e.inputAt < RESUME_IDLE_S; let phaseNow: BeamPhase = L.phase; let levelSource: BeamLevel | undefined = L.level; let analyserNode: AnalyserNode | null = L.analyser; if (L.attract && !inputActive) { if (L.reduce) { phaseNow = "listening"; } else { e.attractT = (e.attractT + dt) % ATTRACT_PERIOD; let seg = ATTRACT_SEGMENTS[0]; for (let k = 0; k < ATTRACT_SEGMENTS.length; k++) { if (e.attractT < ATTRACT_SEGMENTS[k].until) { seg = ATTRACT_SEGMENTS[k]; break; } } phaseNow = seg.phase; levelSource = seg.phase === "speaking" ? e.voiceSpeak : e.voiceListen; } analyserNode = null; } // Each thought starts at the left: the shimmer restarts off-span when thinking begins. if (phaseNow === "thinking" && e.lastPhase !== "thinking") e.shimmerT = 0; e.lastPhase = phaseNow; // Phase weights. const target = PHASE_INDEX[phaseNow]; for (let k = 0; k < 4; k++) { const s = e.w[k]; if (L.reduce) { s.x = k === target ? 1 : 0; s.v = 0; } else { stepSpring(s, k === target ? 1 : 0, MORPH, dt); } } const wI = clamp01(e.w[0].x); const wL = clamp01(e.w[1].x); const wT = clamp01(e.w[2].x); const wS = clamp01(e.w[3].x); // Levels: raw input, an attack/release envelope, then one more smoothing pass so the // line glides rather than jitters. Speaking smooths more, which is what makes it calm. if (L.reduce && !analyserNode) { e.raw[0] = STATIC_RAW[0]; e.raw[1] = STATIC_RAW[1]; e.raw[2] = STATIC_RAW[2]; } else if (analyserNode) { readAnalyser(e, analyserNode); } else { readLevel(e, levelSource); } const smoothTau = 0.07 + 0.2 * wS; for (let b = 0; b < 3; b++) { const r = e.raw[b] < L.threshold ? 0 : clamp01(e.raw[b] * L.sensitivity); if (L.reduce) { e.env[b] = r; e.lvl[b] = r; } else { const tau = Math.max(1, r > e.env[b] ? L.attack : L.release) / 1000; e.env[b] += (r - e.env[b]) * (1 - Math.exp(-dtIn / tau)); e.lvl[b] += (e.env[b] - e.lvl[b]) * (1 - Math.exp(-dtIn / smoothTau)); } } const low = e.lvl[0]; const mid = e.lvl[1]; const high = e.lvl[2]; const energy = clamp01(low * 0.5 + mid * 0.3 + high * 0.2); if (!L.reduce) e.shimmerT += dt * (0.35 + 0.65 * wT); // The shimmer enters off-span on the left and leaves off-span on the right, so the wrap is unseen. const shimmerAt = L.reduce ? 0 : -1.4 + 2.8 * ((e.shimmerT / SHIMMER_S) % 1); const breath = L.reduce ? 0 : Math.sin(2 * Math.PI * IDLE_BREATH_HZ * t); // The mixed pose. const span = wI * SPAN[0] + wL * SPAN[1] + wT * SPAN[2] + wS * SPAN[3]; const bright = wI * (BRIGHT[0] + 0.1 * breath) + wL * (BRIGHT[1] + BRIGHT_GAIN[1] * energy) + wT * BRIGHT[2] + wS * (BRIGHT[3] + BRIGHT_GAIN[3] * energy); const amp = cssH * 0.7; const speakAmp = 0.28 + 0.72 * energy; const held = clamp01(L.heldLevel); // Curve heights. Listening crests travel inwards, speaking crests travel outwards. for (let i = 0; i <= POINTS; i++) { const u = (i / POINTS) * 2 - 1; // A softened |u|, so the centre is a smooth crest, never a kink. const d = Math.sqrt(u * u + 0.004); const listen = LISTEN_FLOOR * bump(1.1 * d + 0.55 * t) + low * 0.75 * bump(1.1 * d + 0.55 * t) + mid * 0.4 * bump(2.3 * d + 0.95 * t + 0.18 * u) + high * 0.24 * bump(3.8 * d + 1.5 * t - 0.3 * u); const speak = speakAmp * (0.22 + 0.5 * bump(1.25 * d - 0.62 * t) + 0.12 * bump(2.6 * d - 1.24 * t)); const sd = (u - shimmerAt) / (SHIMMER_W * 1.6); const think = held * (0.12 + 0.4 * Math.exp(-sd * sd)); e.ys[i] = amp * e.win[i] * (wL * listen + wS * speak + wT * think); } // Colour ramp across the span: core in the middle, edge colour at the ends, the alpha taper, // and a lift where the shimmer is. Written into a preallocated ImageData. ensureColors(e, L.palette); const ramp = e.ramp; const data = e.rampData; if (!ramp || !data) return; const C = e.colors; let cr = 0, cg = 0, cb = 0, er = 0, eg = 0, eb = 0; for (let k = 0; k < 4; k++) { const wk = clamp01(e.w[k].x); cr += wk * C[k * 3]; cg += wk * C[k * 3 + 1]; cb += wk * C[k * 3 + 2]; er += wk * C[12 + k * 3]; eg += wk * C[12 + k * 3 + 1]; eb += wk * C[12 + k * 3 + 2]; } const px = data.data; for (let j = 0; j < RAMP; j++) { const u = ((j + 0.5) / RAMP) * 2 - 1; const d = u < 0 ? -u : u; const m = smoothstep01((d - 0.15) / 0.75); const sd = (u - shimmerAt) / SHIMMER_W; const lift = wT * Math.exp(-sd * sd); const q = 1 - d * d; const a = clamp01(bright * L.palette.gain * L.intensity * q * Math.sqrt(q) * (1 + 0.55 * lift)); const o = j * 4; px[o] = cr + (er - cr) * m; px[o + 1] = cg + (eg - cg) * m; px[o + 2] = cb + (eb - cb) * m; px[o + 3] = a * 255; } const rctx = ramp.getContext("2d"); if (!rctx) return; rctx.putImageData(data, 0, 0); const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, DPR_CAP); const bw = Math.max(1, Math.round(cssW * dpr)); const bh = Math.max(1, Math.round(cssH * dpr)); if (canvas.width !== bw) canvas.width = bw; if (canvas.height !== bh) canvas.height = bh; const ctx = canvas.getContext("2d"); if (!ctx) return; ctx.setTransform(bw / cssW, 0, 0, bh / cssH, 0, 0); ctx.globalCompositeOperation = "source-over"; ctx.globalAlpha = 1; ctx.clearRect(0, 0, cssW, cssH); const spanPx = Math.max(8, span * cssW); const x0 = Math.min(cssW - spanPx, Math.max(0, L.center * cssW - spanPx / 2)); const dx = spanPx / POINTS; const base = cssH - 1; // the line sits on the host's bottom border const glow = L.palette.glow; // Mask in white: a faint haze under the curve, two soft glow ribbons and a hairline core. ctx.fillStyle = "#fff"; for (let layer = 1; layer <= 3; layer++) { const f = layer / 3; ctx.globalAlpha = 0.045 * glow; ctx.beginPath(); ctx.moveTo(x0, base); for (let i = 0; i <= POINTS; i++) ctx.lineTo(x0 + i * dx, base - e.ys[i] * f); ctx.lineTo(x0 + spanPx, base); ctx.closePath(); ctx.fill(); } ctx.globalAlpha = 0.07 * glow; ribbon(ctx, e, x0, dx, base, 5.5, Number.NaN); ctx.globalAlpha = 0.26 * glow; ribbon(ctx, e, x0, dx, base, 2.2, Number.NaN); ctx.globalAlpha = 1; ribbon(ctx, e, x0, dx, base, 0.85, Number.NaN); if (wT > 0.01) { ctx.globalAlpha = 0.5 * wT; ribbon(ctx, e, x0, dx, base, 1.6, shimmerAt); } // Tint: keep the mask's alpha, take colour and taper from the ramp. ctx.globalAlpha = 1; ctx.globalCompositeOperation = "source-in"; ctx.imageSmoothingEnabled = true; ctx.drawImage(ramp, x0, 0, spanPx, cssH); ctx.globalCompositeOperation = "source-over"; }; useVisibleLoop(rootRef, frame, { fpsCap: reduce ? 10 : 0, }); // Pointer or key input inside the beam pauses attract for RESUME_IDLE_S seconds. const noteInput = () => { const e = getEngine(); e.inputAt = e.now; }; return (

{children}

); } /** * A syllable-like level source for demos and attract. Returns the same [low, mid, high] array every call. * The phrase carrier is a seeded value noise, so each seed has its own rhythm. */ export function createSimulatedVoice(seed: number): () => [number, number, number] { const phrase = valueNoise1D(seed); const pitch = valueNoise1D(seed + 53); const out: [number, number, number] = [0, 0, 0]; let t0 = -1; return () => { const now = typeof performance !== "undefined" ? performance.now() : 0; if (t0 < 0) t0 = now; const x = (now - t0) / 1000; const carrier = 0.5 + 0.5 * Math.sin(2 * Math.PI * 3.1 * x + 1.7 * pitch(x * 0.6)); const speaking = clamp01(phrase(x * 0.7) * 2); const env = clamp01(carrier * carrier * speaking); out[0] = clamp01(env * (0.9 + 0.1 * pitch(x * 1.9))); out[1] = clamp01(env * (0.7 + 0.2 * pitch(x * 2.6))); out[2] = clamp01(env * (0.45 + 0.2 * pitch(x * 3.4))); return out; }; } 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: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; } a7: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; }; } 7e:["$","$La1",null,{"files":[{"path":"components/bjork-ui/ai/handoff-beam.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/ai/handoff-beam.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/spring.ts","content":"$a6","type":"registry:component","target":"@components/bjork-ui/_core/spring.ts"},{"path":"components/bjork-ui/_core/random.ts","content":"$a7","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"}],"className":"h-[70svh] min-h-80"}]