7e: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"] 9e: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"] a0: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:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}] 54:["$","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"}]]}] 55:["$","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)"}]]}]}]]}] 56:["$","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"}]]}] 57:["$","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"}]]}] 58:["$","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"}]]}] 59:["$","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)"}]]}]}]]}] 5a:["$","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)"}]]}]}]]}] 5b:["$","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)"}]]}]}]]}] 5c:["$","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)"}]]}]}]]}] 5d:["$","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"}]]}] 5e:["$","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"}]]}] 5f:["$","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)"}]]}]}]]}] 60:["$","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)"}]]}]}]]}] 61:["$","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)"}]]}]}]]}] 62:["$","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)"}]]}]}]]}] 63:["$","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)"}]]}]}]]}] 64:["$","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"}]]}] 65:["$","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"}]]}] 66:["$","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"}]]}] 67:["$","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"}]]}] 68:["$","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"}]]}] 69:["$","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"}]]}] 6a:["$","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"}]]}] 6b:["$","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"}]]}] 6c:["$","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)"}]]}]}]]}] 6d:["$","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)"}]]}]}]]}] 6e:["$","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)"}]]}]}]]}] 6f:["$","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"}]]}] 70:["$","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"}]]}] 71:["$","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"}]]}] 72:["$","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"}]]}] 73:["$","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)"}]]}] 74:["$","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)"}]]}] 75:["$","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)"}]]}] 76:["$","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)"}]]}] 77:["$","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)"}]]}] 78:["$","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"}]]}] 79:["$","$L7e",null,{"orientation":"horizontal"}] 7a:["$","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)"}}],"$L7f"]}]}]]}],"$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"]}]}]]}] 7b:null 9f: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); } }7c:["$","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":["$","$L9e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$9f"}]}]]}] a1:T37bc,"use client"; // Scene States demo: six DOM sections drive one lit object. Each section declares a camera // pose and a few lighting params with `data-scene-state`; scroll blends between them. import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import * as THREE from "three"; import { cn } from "@/lib/utils"; import { useBjorkTone } from "../_core/tone"; import { useVisibleLoop } from "../_core/loop"; import { createSceneRig, poseToPosition, useSceneStates, type SceneStates, type StateDef, type Vec3, } from "../_core/scene-states"; type Params = { /** Key light azimuth, radians. */ keyAngle: number; /** Key light elevation, radians. */ keyHeight: number; /** 0 cool daylight, 1 sodium dusk. */ warmth: number; exposure: number; /** Ring tilt around X, radians. */ tilt: number; /** Rim light; blends with easeOutQuad (a fade key). */ glow: number; }; export const SCENE_STATE_DEFS: Record> = { overview: { pose: { target: [0, 0.75, 0], radius: 10.5, phi: 1.12, theta: 0.65 }, params: { keyAngle: 0.9, keyHeight: 0.9, warmth: 0.15, exposure: 1, tilt: 0.42, glow: 0.2 }, mobile: { pose: { radius: 14 } }, }, profile: { pose: { target: [0, 0.8, 0], radius: 6.4, phi: 1.5, theta: 1.57 }, params: { keyAngle: 2.6, keyHeight: 0.45, warmth: 0.1, exposure: 1.05, tilt: 0.1, glow: 0.9 }, mobile: { pose: { radius: 9 } }, }, detail: { pose: { target: [0.35, 1.05, 0], radius: 3.4, phi: 1.22, theta: 2.5 }, params: { keyAngle: 3.4, keyHeight: 0.7, warmth: 0.3, exposure: 1.1, tilt: 0.8, glow: 0.4 }, mobile: { pose: { radius: 5 } }, }, above: { pose: { target: [0, 0.4, 0], radius: 9, phi: 0.18, theta: null }, params: { keyAngle: 4.4, keyHeight: 1.2, warmth: 0.05, exposure: 0.95, tilt: 1.3, glow: 0.1 }, mobile: { pose: { radius: 12.5 } }, }, dusk: { pose: { target: [0, 0.7, 0], radius: 7.5, phi: 1.38, theta: -0.75 }, params: { keyAngle: 5.6, keyHeight: 0.14, warmth: 1, exposure: 0.72, tilt: 0.3, glow: 1 }, mobile: { pose: { radius: 10.5 } }, }, rest: { pose: { target: [0, 0.75, 0], radius: 12, phi: 1.05, theta: 0.65 }, params: { keyAngle: 0.9, keyHeight: 0.9, warmth: 0.15, exposure: 1, tilt: 0.42, glow: 0.2 }, damp: 0.06, mobile: { pose: { radius: 15.5 } }, }, }; const SECTIONS: { key: keyof typeof SCENE_STATE_DEFS; title: string; body: string; attrs: string }[] = [ { key: "overview", title: "Overview", body: "A section declares a pose. Nothing else: no timeline, no scroll trigger, no pinning.", attrs: 'data-scene-state="overview"', }, { key: "profile", title: "Profile", body: "Pose and params blend with smoothstep as the probe crosses from one anchor to the next.", attrs: 'data-scene-state="profile"', }, { key: "detail", title: "Detail", body: "Theta takes the shortest arc, so the camera never swings the long way round.", attrs: 'data-scene-state="detail"', }, { key: "above", title: "Above", body: "A null theta keeps whatever the previous state had: rise straight up from where you were.", attrs: 'data-scene-state="above"', }, { key: "dusk", title: "Dusk", body: "Fade keys ease out, so the rim light arrives before the camera does.", attrs: 'data-scene-state="dusk"', }, { key: "rest", title: "Rest", body: "A lead starts the blend early. Damping is per state and frame-rate independent.", attrs: 'data-scene-state="rest" data-scene-lead="0.4"', }, ]; const PALETTES = { dark: { bg: "#0d0d0d", ground: "#1a1917", body: "#d9d4cc", ring: "#ec5c13", ink: "#f2eee7", soft: "rgba(242,238,231,0.56)", line: "rgba(242,238,231,0.14)" }, light: { bg: "#f2ede3", ground: "#e6dfd2", body: "#f8f5ef", ring: "#d9531a", ink: "#1a1815", soft: "rgba(26,24,21,0.58)", line: "rgba(26,24,21,0.14)" }, } as const; class LitObject { readonly renderer: THREE.WebGLRenderer; readonly camera = new THREE.PerspectiveCamera(32, 1, 0.1, 100); private scene = new THREE.Scene(); private key = new THREE.DirectionalLight(0xffffff, 2.4); private rim = new THREE.DirectionalLight(0xffffff, 0); private hemi: THREE.HemisphereLight; private ringGroup = new THREE.Group(); private pos: Vec3 = [0, 0, 0]; private cool = new THREE.Color("#dfe8ff"); private warm = new THREE.Color("#ffb070"); constructor(canvas: HTMLCanvasElement, tone: "light" | "dark") { const pal = PALETTES[tone]; this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.renderer.toneMapping = THREE.ACESFilmicToneMapping; this.scene.background = new THREE.Color(pal.bg); this.scene.fog = new THREE.Fog(pal.bg, 14, 30); this.hemi = new THREE.HemisphereLight(tone === "dark" ? 0x6b7280 : 0xffffff, pal.ground, tone === "dark" ? 0.35 : 0.9); this.scene.add(this.hemi); this.key.castShadow = true; this.key.shadow.mapSize.set(1024, 1024); this.key.shadow.camera.left = -4; this.key.shadow.camera.right = 4; this.key.shadow.camera.top = 4; this.key.shadow.camera.bottom = -4; this.key.shadow.radius = 6; this.key.shadow.bias = -0.0008; this.scene.add(this.key, this.key.target, this.rim); const ground = new THREE.Mesh( new THREE.CircleGeometry(30, 64), new THREE.MeshStandardMaterial({ color: pal.ground, roughness: 0.95 }), ); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; this.scene.add(ground); const plinth = new THREE.Mesh( new THREE.CylinderGeometry(1.3, 1.36, 0.16, 96), new THREE.MeshStandardMaterial({ color: pal.body, roughness: 0.6 }), ); plinth.position.y = 0.08; plinth.castShadow = plinth.receiveShadow = true; this.scene.add(plinth); const sphere = new THREE.Mesh( new THREE.SphereGeometry(0.72, 96, 64), new THREE.MeshStandardMaterial({ color: pal.body, roughness: 0.32, metalness: 0.05 }), ); sphere.position.y = 0.16 + 0.72; sphere.castShadow = sphere.receiveShadow = true; this.scene.add(sphere); const ring = new THREE.Mesh( new THREE.TorusGeometry(1.15, 0.022, 16, 160), new THREE.MeshStandardMaterial({ color: pal.ring, roughness: 0.3, metalness: 0.4, emissive: pal.ring, emissiveIntensity: 0.25 }), ); ring.castShadow = true; ring.rotation.x = Math.PI / 2; this.ringGroup.position.copy(sphere.position); this.ringGroup.add(ring); this.scene.add(this.ringGroup); } resize(w: number, h: number) { this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); this.renderer.setSize(w, h, false); this.camera.aspect = w / Math.max(1, h); this.camera.updateProjectionMatrix(); } render(pose: Parameters[0] & { theta: number }, p: Params, t: number) { poseToPosition(pose, this.pos, pose.theta); this.camera.position.set(...this.pos); this.camera.lookAt(...pose.target); const r = 6; this.key.position.set( Math.cos(p.keyAngle) * Math.cos(p.keyHeight) * r, Math.sin(p.keyHeight) * r + 0.5, Math.sin(p.keyAngle) * Math.cos(p.keyHeight) * r, ); this.key.color.copy(this.cool).lerp(this.warm, p.warmth); this.key.intensity = 2.6 * p.exposure; // Rim sits opposite the key. this.rim.position.set(-this.key.position.x, 2.2, -this.key.position.z); this.rim.color.copy(this.warm); this.rim.intensity = 2.2 * p.glow; this.renderer.toneMappingExposure = p.exposure; this.ringGroup.rotation.set(p.tilt, t * 0.15, 0); this.renderer.render(this.scene, this.camera); } dispose() { this.scene.traverse((o) => { if (o instanceof THREE.Mesh) { o.geometry.dispose(); (o.material as THREE.Material).dispose(); } }); this.renderer.dispose(); } } export interface SceneStatesDemoProps { tone?: "light" | "dark"; /** Renders one still frame of the first state, without sections. */ preview?: boolean; className?: string; } export function SceneStatesDemo({ tone: toneProp, preview = false, className }: SceneStatesDemoProps) { const tone = useBjorkTone(toneProp); const pal = PALETTES[tone]; const rootRef = useRef(null); const canvasRef = useRef(null); const objectRef = useRef(null); const [root, setRoot] = useState(null); const [debug, setDebug] = useState(false); const [active, setActive] = useState("overview"); const activeRef = useRef("overview"); const rig = useMemo(() => createSceneRig(SCENE_STATE_DEFS.overview), []); const timeRef = useRef(0); const statesRef = useSceneStates(SCENE_STATE_DEFS, { root, mobileQuery: "(max-width: 767px)", fadeKeys: ["glow"], initialKey: "overview", debug, }); const frame = useCallback( (dt: number) => { const obj = objectRef.current; const states: SceneStates | null = statesRef.current; if (!obj) return false; timeRef.current += dt; if (preview || !states) { const d = SCENE_STATE_DEFS.overview; obj.render({ ...d.pose, theta: d.pose.theta ?? 0 }, d.params, 0); return false; } const s = states.sample(); const { pose, params } = rig.update(s, dt); obj.render(pose, params as Params, timeRef.current); if (s.activeKey && s.activeKey !== activeRef.current) { activeRef.current = s.activeKey; setActive(s.activeKey); } return true; // the ring keeps turning while the demo is on screen }, [preview, rig, statesRef], ); const { wake } = useVisibleLoop(rootRef, frame, { enabled: !preview }); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; let obj: LitObject; try { obj = new LitObject(canvas, tone); } catch { return; } objectRef.current = obj; const resize = () => { const rect = canvas.getBoundingClientRect(); obj.resize(rect.width, rect.height); if (preview) frame(0); else wake(); }; const ro = new ResizeObserver(resize); ro.observe(canvas); resize(); return () => { ro.disconnect(); obj.dispose(); objectRef.current = null; }; }, [tone, preview, frame, wake]); useEffect(() => { if (preview) return; const onScroll = () => wake(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [preview, wake]); const setRootEl = useCallback((el: HTMLDivElement | null) => { rootRef.current = el; setRoot(el); }, []); if (preview) { return (

); } return (

{SECTIONS.map((s, i) => (

{String(i + 1).padStart(2, "0")}

{s.title}

{s.body}


                {s.attrs}

))}

); } a2: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; a3: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; } a4:T4129,"use client"; // Scene States: DOM sections declare camera poses, scroll blends between them. // //

// holds through a sticky span // // The engine knows nothing about three.js. It returns a blended pose and params, // and a small rig damps toward them frame-rate independently. Add `?scene-debug` // to the URL to draw every anchor and the probe. import { useEffect, useMemo, useRef } from "react"; export type Vec3 = [number, number, number]; export interface Pose { target: Vec3; radius: number; /** Polar angle from +Y. 0 looks straight down. */ phi: number; /** Azimuth around +Y. `null` keeps whatever the previous state had. */ theta: number | null; } export type SceneParams = Record; export interface StateDef

{ pose: Pose; params: P; /** Per-frame damping at 60 fps, 0..1. Defaults to 0.1. */ damp?: number; mobile?: { pose?: Partial; params?: Partial

; damp?: number }; } export interface SceneSample

{ pose: Pose & { theta: number }; params: P; activeKey: string | null; fromKey: string | null; toKey: string | null; /** Raw blend 0..1 between `fromKey` and `toKey`. */ t: number; damp: number; /** True when the active section asked to snap (data-scene-immediate). */ immediate: boolean; /** Document-space probe line, useful for debugging. */ probe: number; } export interface SceneStatesOptions

{ /** Element to scan for `[data-scene-state]`. Defaults to document.body. */ root?: HTMLElement | null; /** Element that scrolls. Defaults to the window. */ scrollRoot?: HTMLElement | null; /** Mobile overrides apply while this matches. */ mobileQuery?: string; /** Params that blend with easeOutQuad so lights die before the camera arrives. */ fadeKeys?: (keyof P & string)[]; /** Fallback when no section is registered. */ initialKey?: string; /** Force the debug overlay regardless of the URL. */ debug?: boolean; } export interface SceneStates

{ sample(scrollY?: number, vh?: number, maxScroll?: number): SceneSample

; rescan(): void; destroy(): void; readonly keys: string[]; } interface Entry { el: HTMLElement; key: string; anchorY: number; lead: number | null; immediate: boolean; } const DEFAULT_DAMP = 0.1; const TAU = Math.PI * 2; export const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v); export const smoothstep = (t: number) => t * t * (3 - 2 * t); export const easeOutQuad = (t: number) => t * (2 - t); export const lerp = (a: number, b: number, t: number) => a + (b - a) * t; /** Shortest signed difference b - a on the circle. */ export function angleDelta(a: number, b: number) { let d = (b - a) % TAU; if (d > Math.PI) d -= TAU; if (d < -Math.PI) d += TAU; return d; } /** * Converts a per-frame damping factor (tuned at 60 fps) into the factor for `dt` seconds, * so the rig settles the same on a 120 Hz display as on a 60 Hz one. */ export function dampFactor(damp: number, dt: number) { if (damp >= 1) return 1; return 1 - Math.pow(1 - damp, dt * 60); } /** Exponential approach with rate `lambda` per second. `1 - e^(-9dt)` is the house default. */ export function expDamp(current: number, target: number, lambda: number, dt: number) { return lerp(current, target, 1 - Math.exp(-lambda * dt)); } /** World-space camera position for a pose: target + r·(sinφ sinθ, cosφ, sinφ cosθ). */ export function poseToPosition(pose: Pose, out: Vec3 = [0, 0, 0], theta = pose.theta ?? 0): Vec3 { const s = Math.sin(pose.phi); out[0] = pose.target[0] + pose.radius * s * Math.sin(theta); out[1] = pose.target[1] + pose.radius * Math.cos(pose.phi); out[2] = pose.target[2] + pose.radius * s * Math.cos(theta); return out; } /** Blends two poses. Theta takes the shortest arc; a null theta keeps `fallbackTheta`. */ export function blendPose(a: Pose, b: Pose, t: number, fallbackTheta: number, out?: Pose & { theta: number }) { const res = out ?? { target: [0, 0, 0] as Vec3, radius: 0, phi: 0, theta: 0 }; res.target[0] = lerp(a.target[0], b.target[0], t); res.target[1] = lerp(a.target[1], b.target[1], t); res.target[2] = lerp(a.target[2], b.target[2], t); res.radius = lerp(a.radius, b.radius, t); res.phi = lerp(a.phi, b.phi, t); const ta = a.theta ?? fallbackTheta; const tb = b.theta ?? fallbackTheta; res.theta = ta + angleDelta(ta, tb) * t; return res; } function resolveDef

(def: StateDef

, mobile: boolean): StateDef

{ if (!mobile || !def.mobile) return def; return { pose: { ...def.pose, ...def.mobile.pose }, params: { ...def.params, ...def.mobile.params } as P, damp: def.mobile.damp ?? def.damp, }; } function readScroll(scrollRoot: HTMLElement | null | undefined) { if (scrollRoot) { return { y: scrollRoot.scrollTop, vh: scrollRoot.clientHeight, max: Math.max(0, scrollRoot.scrollHeight - scrollRoot.clientHeight), }; } const vh = window.innerHeight; const doc = document.scrollingElement ?? document.documentElement; return { y: window.scrollY, vh, max: Math.max(0, doc.scrollHeight - vh) }; } /** * Builds the engine. `defs` maps a state key to its pose and params. Every def should * carry the same param keys; missing ones fall back to the first def's value. */ export function createSceneStates

( defs: Record>, opts: SceneStatesOptions

= {}, ): SceneStates

{ const keys = Object.keys(defs); const fadeKeys = new Set(opts.fadeKeys ?? []); const paramKeys = Array.from(new Set(keys.flatMap((k) => Object.keys(defs[k].params)))); const fallbackKey = opts.initialKey && defs[opts.initialKey] ? opts.initialKey : keys[0]; const mq = typeof window !== "undefined" && opts.mobileQuery ? window.matchMedia(opts.mobileQuery) : null; let entries: Entry[] = []; let lastTheta = defs[fallbackKey]?.pose.theta ?? 0; const out: SceneSample

= { pose: { target: [0, 0, 0], radius: 0, phi: 0, theta: 0 }, params: {} as P, activeKey: null, fromKey: null, toKey: null, t: 0, damp: DEFAULT_DAMP, immediate: false, probe: 0, }; const def = (key: string) => { const d = defs[key] ?? defs[fallbackKey]; return resolveDef(d, Boolean(mq?.matches)); }; const measure = () => { if (typeof window === "undefined") return; const root = opts.root ?? document.body; const { y, vh } = readScroll(opts.scrollRoot); const rootTop = opts.scrollRoot ? opts.scrollRoot.getBoundingClientRect().top : 0; const portrait = vh > (opts.scrollRoot?.clientWidth ?? window.innerWidth); const next: Entry[] = []; root.querySelectorAll("[data-scene-state]").forEach((el) => { const key = el.dataset.sceneState; if (!key || !defs[key]) return; const rect = el.getBoundingClientRect(); const top = rect.top - rootTop + y; const lead = el.dataset.sceneLead != null ? parseFloat(el.dataset.sceneLead) : NaN; const base = { el, key, lead: Number.isFinite(lead) && lead > 0 ? lead : null, immediate: el.hasAttribute("data-scene-immediate"), }; if (el.hasAttribute("data-scene-hold") && rect.height > vh) { // Two anchors with the same key: the blend stays flat across the sticky span. next.push({ ...base, anchorY: top + vh / 2 }); next.push({ ...base, lead: null, anchorY: top + rect.height - vh / 2 }); return; } next.push({ ...base, anchorY: portrait ? top : top + rect.height / 2 }); }); next.sort((a, b) => a.anchorY - b.anchorY); entries = next; debug?.draw(entries); }; // Rescans are coalesced to one per frame. let raf = 0; const schedule = () => { if (typeof window === "undefined") return; cancelAnimationFrame(raf); raf = requestAnimationFrame(measure); }; let mo: MutationObserver | null = null; let ro: ResizeObserver | null = null; const debug = typeof window !== "undefined" && (opts.debug || new URLSearchParams(window.location.search).has("scene-debug")) ? createDebugOverlay(opts.scrollRoot ?? null) : null; if (typeof window !== "undefined") { const root = opts.root ?? document.body; mo = new MutationObserver(schedule); mo.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-scene-state", "data-scene-lead", "data-scene-hold"] }); ro = new ResizeObserver(schedule); ro.observe(root); mq?.addEventListener?.("change", schedule); window.addEventListener("resize", schedule); measure(); } const blendParams = (a: P, b: P, t: number, tf: number) => { const base = defs[fallbackKey].params; const res = out.params as SceneParams; for (const k of paramKeys) { const va = a[k] ?? base[k] ?? 0; const vb = b[k] ?? base[k] ?? 0; res[k] = lerp(va, vb, fadeKeys.has(k) ? tf : t); } }; const sample = (scrollY?: number, vh?: number, maxScroll?: number): SceneSample

=> { const live = typeof window !== "undefined" ? readScroll(opts.scrollRoot) : { y: 0, vh: 1, max: 0 }; const y = scrollY ?? live.y; const h = vh ?? live.vh; const max = maxScroll ?? live.max; if (entries.length === 0) { const d = def(fallbackKey); blendPose(d.pose, d.pose, 0, lastTheta, out.pose); blendParams(d.params, d.params, 0, 0); out.activeKey = out.fromKey = out.toKey = fallbackKey; out.t = 0; out.damp = d.damp ?? DEFAULT_DAMP; out.immediate = false; out.probe = y + h / 2; return out; } // Edge-corrected probe: the first and last sections stay reachable. const half = h / 2; const i = 1 - smoothstep(clamp01(y / half)); const s = 1 - smoothstep(clamp01((max - y) / half)); const c = y + half * (1 - i + s); let idx = 0; while (idx < entries.length - 1 && entries[idx + 1].anchorY <= c) idx++; const from = entries[idx]; const to = entries[Math.min(idx + 1, entries.length - 1)]; const start = to.lead != null ? Math.max(from.anchorY, to.anchorY - to.lead * h) : from.anchorY; const span = to.anchorY - start; const t = span > 0 ? clamp01((c - start) / span) : 0; const a = def(from.key); const b = def(to.key); blendPose(a.pose, b.pose, smoothstep(t), lastTheta, out.pose); lastTheta = out.pose.theta; blendParams(a.params, b.params, smoothstep(t), easeOutQuad(t)); const active = t < 0.5 ? from : to; out.activeKey = active.key; out.fromKey = from.key; out.toKey = to.key; out.t = t; out.damp = def(active.key).damp ?? DEFAULT_DAMP; out.immediate = active.immediate; out.probe = c; debug?.probe(c, y); return out; }; return { sample, rescan: measure, destroy() { cancelAnimationFrame(raf); mo?.disconnect(); ro?.disconnect(); mq?.removeEventListener?.("change", schedule); if (typeof window !== "undefined") window.removeEventListener("resize", schedule); debug?.destroy(); entries = []; }, get keys() { return keys; }, }; } /** * A damped follower for poses and params. `update` moves toward the sample using * frame-rate independent damping and returns the smoothed values. */ export function createSceneRig

(initial: { pose: Pose; params: P }) { const pose: Pose & { theta: number } = { target: [...initial.pose.target] as Vec3, radius: initial.pose.radius, phi: initial.pose.phi, theta: initial.pose.theta ?? 0, }; const params = { ...initial.params } as P; return { pose, params, update(sample: { pose: Pose; params: P; damp?: number; immediate?: boolean }, dt: number) { const k = sample.immediate ? 1 : dampFactor(sample.damp ?? DEFAULT_DAMP, dt); for (let i = 0; i < 3; i++) pose.target[i] += (sample.pose.target[i] - pose.target[i]) * k; pose.radius += (sample.pose.radius - pose.radius) * k; pose.phi += (sample.pose.phi - pose.phi) * k; if (sample.pose.theta != null) pose.theta += angleDelta(pose.theta, sample.pose.theta) * k; const p = params as SceneParams; for (const key in sample.params) p[key] = (p[key] ?? 0) + (sample.params[key] - (p[key] ?? 0)) * k; return { pose, params }; }, /** True once every value is within `eps` of the sample. */ settled(sample: { pose: Pose; params: P }, eps = 1e-4) { if (Math.abs(sample.pose.radius - pose.radius) > eps) return false; if (Math.abs(sample.pose.phi - pose.phi) > eps) return false; if (sample.pose.theta != null && Math.abs(angleDelta(pose.theta, sample.pose.theta)) > eps) return false; for (let i = 0; i < 3; i++) if (Math.abs(sample.pose.target[i] - pose.target[i]) > eps) return false; for (const key in sample.params) if (Math.abs(sample.params[key] - (params as SceneParams)[key]) > eps) return false; return true; }, }; } /** * React binding. The engine is created once per mount; pass stable `defs`. * Returns a ref whose `current` is the engine (null before mount). */ export function useSceneStates

( defs: Record>, opts?: SceneStatesOptions

, ) { const ref = useRef | null>(null); const root = opts?.root ?? null; const scrollRoot = opts?.scrollRoot ?? null; const mobileQuery = opts?.mobileQuery; const fadeKey = (opts?.fadeKeys ?? []).join(","); const initialKey = opts?.initialKey; const debug = opts?.debug; const stableOpts = useMemo( () => ({ root, scrollRoot, mobileQuery, fadeKeys: fadeKey ? (fadeKey.split(",") as (keyof P & string)[]) : [], initialKey, debug, }), [root, scrollRoot, mobileQuery, fadeKey, initialKey, debug], ); useEffect(() => { const engine = createSceneStates(defs, stableOpts); ref.current = engine; return () => { engine.destroy(); ref.current = null; }; }, [defs, stableOpts]); return ref; } // ─── ?scene-debug overlay ───────────────────────────────────────────────────── function createDebugOverlay(scrollRoot: HTMLElement | null) { const layer = document.createElement("div"); layer.setAttribute("aria-hidden", "true"); layer.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:2147483000;font:11px/1.2 ui-monospace,monospace;"; const probeLine = document.createElement("div"); probeLine.style.cssText = "position:absolute;left:0;right:0;height:0;border-top:1px dashed #ec5c13;"; const probeLabel = document.createElement("span"); probeLabel.style.cssText = "position:absolute;right:8px;top:-16px;color:#ec5c13;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px;"; probeLabel.textContent = "probe"; probeLine.appendChild(probeLabel); layer.appendChild(probeLine); document.body.appendChild(layer); let marks: { el: HTMLDivElement; y: number }[] = []; let lastY = 0; const place = (scrollY: number) => { const offset = scrollRoot ? scrollRoot.getBoundingClientRect().top : 0; for (const m of marks) m.el.style.transform = `translateY(${m.y - scrollY + offset}px)`; }; return { draw(entries: Entry[]) { marks.forEach((m) => m.el.remove()); marks = entries.map((e) => { const el = document.createElement("div"); el.style.cssText = "position:absolute;left:0;right:0;top:0;height:0;border-top:1px solid rgba(80,180,255,.8);"; const label = document.createElement("span"); label.style.cssText = "position:absolute;left:8px;top:-16px;color:#7cc4ff;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px;"; label.textContent = `${e.key}${e.lead ? ` lead ${e.lead}` : ""}${e.immediate ? " immediate" : ""}`; el.appendChild(label); layer.appendChild(el); return { el, y: e.anchorY }; }); place(lastY); }, probe(c: number, scrollY: number) { lastY = scrollY; const offset = scrollRoot ? scrollRoot.getBoundingClientRect().top : 0; probeLine.style.transform = `translateY(${c - scrollY + offset}px)`; place(scrollY); }, destroy() { layer.remove(); }, }; } 7d:["$","$La0",null,{"files":[{"path":"components/bjork-ui/interactive/scene-states-demo.tsx","content":"$a1","type":"registry:component","target":"@components/bjork-ui/interactive/scene-states-demo.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/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/palette.ts","content":"$a2","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/scene-states.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/scene-states.ts"}],"className":"h-[70svh] min-h-80"}]