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:T5bd2,"use client"; import { useCallback, useEffect, useId, useSyncExternalStore, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode, } from "react"; import { motion, useReducedMotion } from "framer-motion"; import { LiveRegion, VisuallyHidden } from "@/components/bjork-ui/_core/a11y"; import { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette"; import { ease, easeCss, springs } from "@/components/bjork-ui/_core/motion"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import { StrokeMorphIcon, type StrokeIconName, } from "@/components/bjork-ui/utilities/stroke-morph-icon"; import { cn } from "@/lib/utils"; export type AgentStepStatus = "pending" | "active" | "done" | "error" | "skipped"; export interface AgentStep { id: string; /** Free-form tag such as "search" or "tool". Shown in uppercase at 420px and wider. */ kind?: string; label: string; detail?: ReactNode; status: AgentStepStatus; /** Epoch milliseconds (Date.now()) when an active step began. Without it, the first observed time is used. */ startedAt?: number; /** Final duration in milliseconds. Required for a finished step to show a duration. */ durationMs?: number; } export interface AgentTraceProps { steps: AgentStep[]; /** Header title. Default "Thinking". */ title?: string; /** Controlled collapsed state. */ collapsed?: boolean; defaultCollapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void; /** Fold to the header 800ms after every step is done or skipped. Never when a step errored. Default true. */ autoCollapse?: boolean; /** Steps slower than this turn amber. Default 4000. */ slowThresholdMs?: number; /** Replaces the step count and duration in the header while collapsed. */ summary?: ReactNode; density?: "comfortable" | "compact"; tone?: BjorkTone; /** Plays a built-in demo script on a loop. Ignores `steps`. */ attract?: boolean; /** Demo/preview only: freezes the clock. */ now?: number; className?: string; } interface RailState { scale: number; color: string; shimmer: boolean; } const TICK_MS = 100; const AUTO_COLLAPSE_MS = 800; const ATTRACT_IDLE_MS = 4000; const ATTRACT_CYCLE_S = 16; // Gap between a glyph's edge and the rail: 8px glyph radius + 3px air. const GLYPH_GAP = 11; const SHIMMER_KEYFRAMES = "@keyframes agent-trace-shimmer { from { transform: translateY(-24px); } to { transform: translateY(var(--rail-h, 48px)); } }"; const STATUS_ICON: Record = { pending: "dot", active: "busy", done: "check", error: "close", skipped: "minus", }; const STATUS_WORD: Record = { pending: "pending", active: "running", done: "done", error: "failed", skipped: "skipped", }; interface ScriptStep { id: string; kind: string; label: string; seconds: number; error?: boolean; } const ATTRACT_SCRIPT: ScriptStep[] = [ { id: "parse", kind: "think", label: "Parse request", seconds: 0.6 }, { id: "search", kind: "search", label: 'Search docs: "optical alignment"', seconds: 1.8 }, { id: "read", kind: "read", label: "Read OPTICAL-ALIGNMENT.md", seconds: 1.1 }, { id: "draft", kind: "code", label: "Draft component spec", seconds: 5.2 }, { id: "typecheck", kind: "tool", label: "Run type check", seconds: 2.0, error: true }, { id: "retry", kind: "tool", label: "Retry type check", seconds: 1.4 }, { id: "compose", kind: "think", label: "Compose answer", seconds: 0.9 }, ]; // Start time of each script step in seconds, and the end of the script. const SCRIPT_STARTS_S = ATTRACT_SCRIPT.reduce( (acc, step, i) => (i === 0 ? [0] : [...acc, acc[i - 1] + ATTRACT_SCRIPT[i - 1].seconds]), [], ); const SCRIPT_END_S = ATTRACT_SCRIPT.reduce((sum, step) => sum + step.seconds, 0); // Frame k: steps before k are finished, step k is active, the rest are pending. k = 7 is finished. const ATTRACT_FRAMES: AgentStep[][] = Array.from({ length: ATTRACT_SCRIPT.length + 1 }, (_, stage) => ATTRACT_SCRIPT.map((step, i): AgentStep => { if (i < stage) { return { id: step.id, kind: step.kind, label: step.label, status: step.error ? "error" : "done", durationMs: Math.round(step.seconds * 1000), }; } return { id: step.id, kind: step.kind, label: step.label, status: i === stage ? "active" : "pending", }; }), ); function stageAt(t: number): number { let stage = 0; SCRIPT_STARTS_S.forEach((start, i) => { if (t >= start) stage = i; }); return stage; } function formatMs(ms: number): string { return `${(ms / 1000).toFixed(1)}s`; } function liveElapsed( step: AgentStep, now: number, playing: boolean, attractMs: number, since: ReadonlyMap, ): number { if (playing) return attractMs; return Math.max(0, now - (step.startedAt ?? since.get(step.id) ?? now)); } function railOf(owner: AgentStep | undefined, slow: boolean, reduce: boolean): RailState { const color = slow ? "var(--bjork-warning)" : "var(--bjork-accent)"; if (!owner) return { scale: 0, color, shimmer: false }; if (owner.status === "done" || owner.status === "skipped") return { scale: 1, color, shimmer: false }; if (owner.status === "active") { // Reduced motion: a static half-filled segment instead of the shimmer. return reduce ? { scale: 0.5, color, shimmer: false } : { scale: 0, color, shimmer: true }; } return { scale: 0, color, shimmer: false }; } /** * A timeline of agent steps. The rail fills as steps finish, slow steps turn amber, and the whole trace * folds into a one-line receipt once it is done. */ export function AgentTrace({ steps, title = "Thinking", collapsed, defaultCollapsed = false, onCollapsedChange, autoCollapse = true, slowThresholdMs = 4000, summary, density = "comfortable", tone: toneProp, attract = false, now, className, }: AgentTraceProps) { const tone = useBjorkTone(toneProp); const pal = BJORK_PALETTE[tone]; // Hydration-safe: the server and the first client render both report "not reduced", then the real value applies. const hydrated = useSyncExternalStore( () => () => {}, () => true, () => false, ); const reducedMotion = useReducedMotion(); const reduce = hydrated && reducedMotion === true; const rootRef = useRef(null); const listId = useId(); const compact = density === "compact"; const PAD = compact ? 4 : 8; // row padding const MIN_H = compact ? 28 : 36; const CENTRE = PAD + 10; // glyph centre: the 20px label line box is centred on the glyph (R4, R6) // Attract script state. Only the stage changes React state; the clock lives in refs. const playing = attract && !reduce; const [stage, setStage] = useState(0); const clockRef = useRef(0); const stageRef = useRef(0); const holdRef = useRef(false); const elapsedRef = useRef(0); const inputAt = useRef(Number.NEGATIVE_INFINITY); const displayed = useMemo(() => { if (!attract) return steps; return ATTRACT_FRAMES[reduce ? ATTRACT_SCRIPT.length : stage]; }, [attract, reduce, stage, steps]); // Collapsed state, controlled or not. const controlled = collapsed !== undefined; const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed); const isCollapsed = controlled ? collapsed : innerCollapsed; const onChangeRef = useRef(onCollapsedChange); useLayoutEffect(() => { onChangeRef.current = onCollapsedChange; }); const collapseTo = useCallback( (next: boolean) => { if (!controlled) setInnerCollapsed(next); onChangeRef.current?.(next); }, [controlled], ); const allFinished = displayed.length > 0 && displayed.every((s) => s.status === "done" || s.status === "skipped"); const anyError = displayed.some((s) => s.status === "error"); useEffect(() => { if (!autoCollapse || !allFinished || anyError || attract) return; const id = window.setTimeout(() => collapseTo(true), AUTO_COLLAPSE_MS); return () => window.clearTimeout(id); }, [autoCollapse, allFinished, anyError, attract, collapseTo]); // Live time. Refs and DOM writes only, so the 10Hz tick never re-renders React. const activeSince = useRef(new Map()); const liveSlowRef = useRef(new Set()); const [liveSlow, setLiveSlow] = useState>(() => new Set()); const latest = useRef({ displayed, slowThresholdMs, playing, now }); const paintLive = useCallback(() => { const root = rootRef.current; if (!root) return; const { displayed: list, playing: live } = latest.current; const clock = latest.current.now ?? Date.now(); let total = 0; for (const s of list) if (s.durationMs !== undefined) total += s.durationMs; const active = list.find((s) => s.status === "active"); if (active) total += liveElapsed(active, clock, live, elapsedRef.current, activeSince.current); root.querySelectorAll("[data-live-elapsed]").forEach((el) => { const step = list.find((s) => s.id === el.dataset.liveElapsed); if (step) el.textContent = formatMs(liveElapsed(step, clock, live, elapsedRef.current, activeSince.current)); }); const totalEl = root.querySelector("[data-live-total]"); if (totalEl) totalEl.textContent = formatMs(total); }, []); // Runs after every commit. It records when steps became active and repaints the live text. useLayoutEffect(() => { latest.current = { displayed, slowThresholdMs, playing, now }; const clock = now ?? Date.now(); const since = activeSince.current; const activeIds = new Set(); for (const s of displayed) { if (s.status !== "active") continue; activeIds.add(s.id); if (s.startedAt === undefined && !since.has(s.id)) since.set(s.id, clock); } for (const id of since.keys()) if (!activeIds.has(id)) since.delete(id); paintLive(); }); const tick = useCallback(() => { paintLive(); const { displayed: list, slowThresholdMs: threshold, playing: live, now: frozen } = latest.current; const active = list.find((s) => s.status === "active"); if (!active || liveSlowRef.current.has(active.id)) return; const ms = liveElapsed(active, frozen ?? Date.now(), live, elapsedRef.current, activeSince.current); if (ms > threshold) { liveSlowRef.current.add(active.id); setLiveSlow(new Set(liveSlowRef.current)); } }, [paintLive]); const hasActive = displayed.some((s) => s.status === "active"); useEffect(() => { if (!hasActive || now !== undefined) return; const id = window.setInterval(tick, TICK_MS); return () => window.clearInterval(id); }, [hasActive, now, tick]); // Attract clock. Pauses for 4s after any pointer or key input inside the component. const markInput = useCallback(() => { inputAt.current = performance.now(); }, []); const frame = (dt: number) => { if (performance.now() - inputAt.current < ATTRACT_IDLE_MS) return true; let t = clockRef.current + dt; if (t >= ATTRACT_CYCLE_S) t -= ATTRACT_CYCLE_S; clockRef.current = t; const nextStage = t >= SCRIPT_END_S ? ATTRACT_SCRIPT.length : stageAt(t); elapsedRef.current = nextStage < ATTRACT_SCRIPT.length ? (t - SCRIPT_STARTS_S[nextStage]) * 1000 : 0; if (nextStage !== stageRef.current) { stageRef.current = nextStage; setStage(nextStage); } const hold = t >= SCRIPT_END_S; if (hold !== holdRef.current) { holdRef.current = hold; collapseTo(hold); // the trace folds for 3s at the end of each run } return true; }; useVisibleLoop(rootRef, frame, { enabled: playing }); // LiveRegion text. Derived during render, so it updates only when a status changes. const [announce, setAnnounce] = useState<{ seen: AgentStep[]; message: string }>(() => ({ seen: displayed, message: "", })); let message = announce.message; if (announce.seen !== displayed) { const before = new Map(announce.seen.map((s) => [s.id, s.status] as const)); for (const s of displayed) { if (before.get(s.id) === s.status) continue; if (s.status === "done") message = `${s.label}: done`; if (s.status === "error") message = `${s.label}: failed`; } setAnnounce({ seen: displayed, message }); } const isSlow = (s: AgentStep) => (s.durationMs !== undefined && s.durationMs > slowThresholdMs) || liveSlow.has(s.id); const countLabel = `${displayed.length} ${displayed.length === 1 ? "step" : "steps"}`; const cssVars = { "--bjork-text": pal.text, "--bjork-text-medium": pal.textMedium, "--bjork-text-muted": pal.textMuted, "--bjork-text-soft": pal.textSoft, "--bjork-text-faint": pal.textFaint, "--bjork-border": pal.border, "--bjork-accent": pal.accent, "--bjork-accent-ink": pal.accentInk, "--bjork-accent-foreground": pal.accentFg, "--bjork-warning": pal.warning, "--bjork-ring-offset": pal.bg, } as CSSProperties; return (

0 ? railOf(above, above ? isSlow(above) : false, reduce) : null} belowRail={below ? railOf(step, isSlow(step), reduce) : null} slow={isSlow(step)} pal={pal} reduce={reduce} pad={PAD} centre={CENTRE} minHeight={MIN_H} /> ); })}

); } interface StepRowProps { step: AgentStep; aboveRail: RailState | null; belowRail: RailState | null; slow: boolean; pal: (typeof BJORK_PALETTE)[BjorkTone]; reduce: boolean; pad: number; centre: number; minHeight: number; } function StepRow({ step, aboveRail, belowRail, slow, pal, reduce, pad, centre, minHeight }: StepRowProps) { const detailId = useId(); const [detailEl, setDetailEl] = useState(null); const [expanded, setExpanded] = useState(false); const [overflows, setOverflows] = useState(false); const expandedRef = useRef(expanded); useLayoutEffect(() => { expandedRef.current = expanded; }, [expanded]); const hasDetail = step.detail !== undefined && step.detail !== null && step.detail !== ""; // A detail is a disclosure only when its one-line truncation actually hides text. The measurement is // skipped while expanded, because the wrapped text would then read as fitting. useEffect(() => { if (!detailEl || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(() => { if (!expandedRef.current) setOverflows(detailEl.scrollWidth > detailEl.clientWidth + 1); }); ro.observe(detailEl); return () => ro.disconnect(); }, [detailEl]); const expandable = hasDetail && (overflows || expanded); const glyphColor = step.status === "active" ? pal.accentInk : step.status === "error" ? pal.error : step.status === "done" ? pal.textMuted : pal.textFaint; const detailClass = cn( "block text-[12px] leading-4 text-[color:var(--bjork-text-soft)]", expanded ? "whitespace-normal break-words" : "truncate", ); let durationNode: ReactNode = null; if (step.status === "active") { durationNode = ; } else if (step.durationMs !== undefined) { durationNode = formatMs(step.durationMs); } return ( {aboveRail && } {belowRail && } {STATUS_WORD[step.status]}

{step.kind && ( {step.kind} )} {step.label}

{durationNode !== null && ( {durationNode} )}

{hasDetail && (expandable ? ( ) : ( {step.detail} ))}

); } function RailHalf({ edge, state, centre, reduce, }: { edge: "upper" | "lower"; state: RailState; centre: number; reduce: boolean; }) { // The rail stops short of the glyph, so no line is drawn through a check, a busy ring or a pending dot. const position = edge === "upper" ? { top: 0, height: Math.max(0, centre - GLYPH_GAP) } : { top: centre + GLYPH_GAP, bottom: 0 }; const railRef = useRef(null); // The shimmer travels the full rail height, so it measures the rail and publishes it as a custom property. useEffect(() => { const el = railRef.current; if (!el || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(() => el.style.setProperty("--rail-h", `${el.clientHeight}px`)); ro.observe(el); return () => ro.disconnect(); }, []); return (

{state.shimmer && (

)}

); } 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: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; a5:T835,// Shared springs, easings and durations. Components import these instead of inventing values. export const springs = { press: { type: "spring", stiffness: 500, damping: 30, mass: 0.6 }, snappy: { type: "spring", stiffness: 400, damping: 25, mass: 1 }, standard: { type: "spring", stiffness: 300, damping: 30, mass: 0.8 }, soft: { type: "spring", stiffness: 200, damping: 25, mass: 1.2 }, settle: { type: "spring", stiffness: 380, damping: 30, mass: 0.8 }, blurIn: { type: "spring", stiffness: 400, damping: 28, mass: 0.6 }, } as const; export const ease = { out: [0.23, 1, 0.32, 1], inOut: [0.77, 0, 0.175, 1], drawer: [0.32, 0.72, 0, 1], } as const; export const easeCss = { out: "cubic-bezier(0.23,1,0.32,1)", inOut: "cubic-bezier(0.77,0,0.175,1)", drawer: "cubic-bezier(0.32,0.72,0,1)", } as const; export const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms // Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1]. export function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number { const cx = 3 * x1; const bx = 3 * (x2 - x1) - cx; const ax = 1 - cx - bx; const cy = 3 * y1; const by = 3 * (y2 - y1) - cy; const ay = 1 - cy - by; const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s; const sampleY = (s: number) => ((ay * s + by) * s + cy) * s; const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx; const solveX = (x: number) => { let s = x; for (let i = 0; i < 8; i++) { const err = sampleX(s) - x; if (Math.abs(err) < 1e-6) return s; const d = sampleDX(s); if (Math.abs(d) < 1e-6) break; s -= err / d; } let lo = 0; let hi = 1; s = x; while (lo < hi) { const v = sampleX(s); if (Math.abs(v - x) < 1e-6) return s; if (x > v) lo = s; else hi = s; s = (lo + hi) / 2; if (hi - lo < 1e-7) break; } return s; }; return (t: number) => { if (t <= 0) return 0; if (t >= 1) return 1; return sampleY(solveX(t)); }; } a6:T4567,"use client"; import { useLayoutEffect, useRef, useState, type RefObject } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; import { stepSpring, type SpringState } from "@/components/bjork-ui/_core/spring"; import { easeCss } from "@/components/bjork-ui/_core/motion"; export type StrokeIconName = | "menu" | "equal" | "minus" | "plus" | "close" | "chevron-down" | "chevron-up" | "chevron-right" | "chevron-left" | "arrow-right" | "arrow-down" | "arrow-left" | "arrow-up" | "check" | "play" | "pause" | "dot" | "ellipsis" | "busy" | (string & {}); // Three line segments in a 24 x 24 box. `hidden` lines render at opacity 0 and collapse // onto the centroid of the visible endpoints. `group` icons share geometry and only rotate. export interface StrokeIconDef { lines: [number, number, number, number][]; hidden?: [boolean, boolean, boolean]; group?: string; rotation?: number; spin?: boolean; strokeScale?: number; } export interface StrokeMorphIconProps { name: StrokeIconName; size?: number; strokeWidth?: number; color?: string; spring?: { stiffness: number; damping: number; mass: number }; spin?: boolean; label?: string; className?: string; } type Seg = [number, number, number, number]; const DEFAULT_SPRING = { stiffness: 380, damping: 30, mass: 0.7 }; const CROSS_LINES: StrokeIconDef["lines"] = [ [12, 5, 12, 19], [5, 12, 19, 12], [12, 12, 12, 12], ]; const CHEVRON_LINES: StrokeIconDef["lines"] = [ [6, 9, 12, 15], [12, 15, 18, 9], [12, 15, 12, 15], ]; const ARROW_LINES: StrokeIconDef["lines"] = [ [5, 12, 19, 12], [13, 6, 19, 12], [13, 18, 19, 12], ]; export const strokeIcons: Record = { menu: { lines: [ [4, 7, 20, 7], [4, 12, 20, 12], [4, 17, 20, 17], ], }, equal: { lines: [ [5, 9, 19, 9], [5, 15, 19, 15], [12, 12, 12, 12], ], hidden: [false, false, true], }, minus: { lines: [ [5, 12, 19, 12], [12, 12, 12, 12], [12, 12, 12, 12], ], hidden: [false, true, true], }, plus: { lines: CROSS_LINES, hidden: [false, false, true], group: "cross", rotation: 0 }, close: { lines: CROSS_LINES, hidden: [false, false, true], group: "cross", rotation: 45 }, "chevron-down": { lines: CHEVRON_LINES, hidden: [false, false, true], group: "chevron", rotation: 0 }, "chevron-up": { lines: CHEVRON_LINES, hidden: [false, false, true], group: "chevron", rotation: 180 }, "chevron-right": { lines: CHEVRON_LINES, hidden: [false, false, true], group: "chevron", rotation: -90 }, "chevron-left": { lines: CHEVRON_LINES, hidden: [false, false, true], group: "chevron", rotation: 90 }, "arrow-right": { lines: ARROW_LINES, group: "arrow", rotation: 0 }, "arrow-down": { lines: ARROW_LINES, group: "arrow", rotation: 90 }, "arrow-left": { lines: ARROW_LINES, group: "arrow", rotation: 180 }, "arrow-up": { lines: ARROW_LINES, group: "arrow", rotation: -90 }, check: { lines: [ [5, 12.5, 10, 17.5], [10, 17.5, 19, 7], [10, 17.5, 10, 17.5], ], hidden: [false, false, true], }, // The +0.75px optical x nudge is already in these coordinates (OPTICAL-ALIGNMENT R2). play: { lines: [ [8.75, 5, 8.75, 19], [8.75, 5, 19.75, 12], [8.75, 19, 19.75, 12], ], }, pause: { lines: [ [9, 6, 9, 18], [15, 6, 15, 18], [12, 12, 12, 12], ], hidden: [false, false, true], }, dot: { lines: [ [12, 12, 12, 12], [12, 12, 12, 12], [12, 12, 12, 12], ], hidden: [false, true, true], strokeScale: 1.6, }, ellipsis: { lines: [ [6, 12, 6, 12], [12, 12, 12, 12], [18, 12, 18, 12], ], }, busy: { lines: [ [12, 12, 12, 5], [12, 12, 18.06, 15.5], [12, 12, 5.94, 15.5], ], group: "busy", rotation: 0, spin: true, }, }; // Optical nudges, in the icon's own frame (the group rotation carries them with the icon). // Measured with the blur test (OPTICAL-ALIGNMENT R1 / checklist 1 and 4): arrows carry their // visual weight toward the head, so they move back toward the tail; the check's weight sits low. const OPTICAL_NUDGE = new Map([ [strokeIcons["arrow-right"], [-1.6, 0]], // arrow-right: weight +1.63 units right of centre [strokeIcons["arrow-down"], [-1.6, 0]], [strokeIcons["arrow-left"], [-1.6, 0]], [strokeIcons["arrow-up"], [-1.6, 0]], [strokeIcons.check, [0, -0.9]], // check: weight +0.94 units below centre ]); function nudgeOf(def: StrokeIconDef): [number, number] { return OPTICAL_NUDGE.get(def) ?? [0, 0]; } function isSeg(v: unknown): v is Seg { return Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === "number" && Number.isFinite(n)); } // Registers a custom icon. Throws a TypeError unless it has exactly three finite line segments. export function defineStrokeIcon(name: string, def: StrokeIconDef): void { if (!name) throw new TypeError("defineStrokeIcon: name must be a non-empty string"); if (!Array.isArray(def.lines) || def.lines.length !== 3 || !def.lines.every(isSeg)) { throw new TypeError(`defineStrokeIcon("${name}"): lines must be exactly 3 [x1, y1, x2, y2] segments`); } if (def.hidden !== undefined && (!Array.isArray(def.hidden) || def.hidden.length !== 3)) { throw new TypeError(`defineStrokeIcon("${name}"): hidden must have exactly 3 booleans`); } strokeIcons[name] = def; } const warnedNames = new Set(); function resolveStrokeIcon(name: string): StrokeIconDef { if (Object.prototype.hasOwnProperty.call(strokeIcons, name)) return strokeIcons[name]; if (process.env.NODE_ENV !== "production" && !warnedNames.has(name)) { warnedNames.add(name); console.warn(`StrokeMorphIcon: unknown name "${name}", rendering "dot" instead.`); } return strokeIcons.dot; } // Effective geometry: hidden lines collapse onto the centroid of the visible endpoints. const effCache = new WeakMap(); function effOf(def: StrokeIconDef): Seg[] { const cached = effCache.get(def); if (cached) return cached; const visible = [0, 1, 2].map((i) => !def.hidden?.[i]); let sx = 0; let sy = 0; let n = 0; def.lines.forEach(([x1, y1, x2, y2], i) => { if (!visible[i]) return; sx += x1 + x2; sy += y1 + y2; n += 2; }); const cx = n ? sx / n : 12; const cy = n ? sy / n : 12; const eff = def.lines.map((seg, i): Seg => (visible[i] ? seg : [cx, cy, cx, cy])); effCache.set(def, eff); return eff; } function visibleOf(def: StrokeIconDef): boolean[] { return [0, 1, 2].map((i) => !def.hidden?.[i]); } interface Assignment { perm: number[]; // source line i goes to target line perm[i] flip: boolean[]; // swap that line's endpoints } const PERMS = [ [0, 1, 2], [0, 2, 1], [1, 0, 2], [1, 2, 0], [2, 0, 1], [2, 1, 0], ]; // Best endpoint matching: 6 permutations, and per line the cheaper of the 2 endpoint flips // (the 8 flip combinations reduce to this because each line's flip is independent). function bestAssignment(src: Seg[], dst: Seg[]): Assignment { let best: Assignment = { perm: [0, 1, 2], flip: [false, false, false] }; let bestCost = Infinity; for (const perm of PERMS) { let total = 0; const flip: boolean[] = []; for (let i = 0; i < 3; i++) { const [ax1, ay1, ax2, ay2] = src[i]; const [bx1, by1, bx2, by2] = dst[perm[i]]; const straight = (ax1 - bx1) ** 2 + (ay1 - by1) ** 2 + (ax2 - bx2) ** 2 + (ay2 - by2) ** 2; const crossed = (ax1 - bx2) ** 2 + (ay1 - by2) ** 2 + (ax2 - bx1) ** 2 + (ay2 - by1) ** 2; flip.push(crossed < straight); total += Math.min(straight, crossed); } if (total < bestCost) { bestCost = total; best = { perm: [...perm], flip }; } } return best; } // Memoised per (from, to) pair of defs. Used when the icon has settled on `from`. const matchCache = new WeakMap>(); function canonicalMatch(from: StrokeIconDef, to: StrokeIconDef): Assignment { let inner = matchCache.get(from); if (!inner) { inner = new WeakMap(); matchCache.set(from, inner); } const cached = inner.get(to); if (cached) return cached; const result = bestAssignment(effOf(from), effOf(to)); inner.set(to, result); return result; } // Shortest signed rotation from `from` to `to` (degrees), in (-180, 180]. function shortestDelta(from: number, to: number): number { return ((((to - from) % 360) + 540) % 360) - 180; } // Attributes are written to 2 decimals (0.005 of a 24-unit box). Finer precision only adds settle time. const fmt = (v: number) => String(Math.round(v * 100) / 100); const COORDS = ["x1", "y1", "x2", "y2"] as const; interface MorphEls { group: SVGGElement; lines: (SVGLineElement | null)[]; } // Owns the imperative morph. React renders once; every frame writes attributes through refs. class Morph { private els: MorphEls | null = null; private cur = new Float64Array(12); private from = new Float64Array(12); private to = new Float64Array(12); private curAngle: number; private fromAngle: number; private toAngle: number; private curScale = 1; private fromScale = 1; private toScale = 1; private curNudge: [number, number]; private fromNudge: [number, number]; private toNudge: [number, number]; private slotLine = [0, 1, 2]; // settled: element s shows canonical line slotLine[s] private targetLine = [0, 1, 2]; private visibleTo = [true, true, true]; private spring: SpringState = { x: 0, v: 0 }; private written: (string | undefined)[] = []; private strokeWidth = 2; private active = false; private cfg = DEFAULT_SPRING; target: StrokeIconDef; constructor(def: StrokeIconDef) { this.target = def; effOf(def).forEach((seg, s) => this.to.set(seg, s * 4)); this.cur.set(this.to); this.from.set(this.to); this.curAngle = this.fromAngle = this.toAngle = def.rotation ?? 0; this.curScale = this.fromScale = this.toScale = def.strokeScale ?? 1; this.curNudge = this.fromNudge = this.toNudge = nudgeOf(def); } bind(els: MorphEls) { this.els = els; this.paint(1); } setConfig(cfg: { stiffness: number; damping: number; mass: number }) { this.cfg = cfg; } setStrokeWidth(strokeWidth: number) { this.strokeWidth = strokeWidth; this.paint(this.active ? this.spring.x : 1); } retarget(next: StrokeIconDef, reduce: boolean) { const prev = this.target; const sameGroup = !!next.group && next.group === prev.group; this.target = next; if (!sameGroup) { let assignment: Assignment; if (this.active) { // Mid-flight: match from the current lerped geometry, not from a settled def. const current: Seg[] = [0, 1, 2].map((s) => [ this.cur[s * 4], this.cur[s * 4 + 1], this.cur[s * 4 + 2], this.cur[s * 4 + 3], ]); assignment = bestAssignment(current, effOf(next)); } else { assignment = canonicalMatch(prev, next); } const eff = effOf(next); const visible = visibleOf(next); for (let s = 0; s < 3; s++) { const c = this.active ? s : this.slotLine[s]; const t = this.active ? assignment.perm[s] : assignment.perm[c]; const flip = this.active ? assignment.flip[s] : assignment.flip[c]; this.targetLine[s] = t; const [x1, y1, x2, y2] = eff[t]; const seg: Seg = flip ? [x2, y2, x1, y1] : [x1, y1, x2, y2]; this.to.set(seg, s * 4); this.visibleTo[s] = visible[t]; } // A line that changes visibility fades over 120ms ease-out, or instantly when reduced. this.applyVisibility(reduce); } this.fromAngle = this.curAngle; this.fromScale = this.curScale; this.fromNudge = [this.curNudge[0], this.curNudge[1]]; this.from.set(this.cur); this.toAngle = this.curAngle + shortestDelta(this.curAngle, next.rotation ?? 0); this.toScale = next.strokeScale ?? 1; this.toNudge = nudgeOf(next); if (reduce) { this.settle(); return; } this.spring.x = 0; // keep the velocity so an interrupted move carries its momentum this.active = true; } private applyVisibility(reduce: boolean) { const els = this.els; if (!els) return; for (let s = 0; s < 3; s++) { const line = els.lines[s]; if (!line) continue; line.style.transition = reduce ? "none" : `opacity 120ms ${easeCss.out}`; line.style.opacity = this.visibleTo[s] ? "1" : "0"; } } // Frame step for useVisibleLoop. Returns false when idle. step(dt: number): boolean { if (!this.active) return false; stepSpring(this.spring, 1, this.cfg, dt); if (Math.abs(this.spring.x - 1) < 5e-4 && Math.abs(this.spring.v) < 5e-3) { this.settle(); return false; } this.paint(this.spring.x); return true; } // Snap to the exact canonical geometry of the target and go idle. private settle() { const eff = effOf(this.target); for (let s = 0; s < 3; s++) { this.slotLine[s] = this.targetLine[s]; const seg = eff[this.targetLine[s]]; this.to.set(seg, s * 4); } this.from.set(this.to); this.fromAngle = this.toAngle; this.curAngle = this.toAngle; this.fromScale = this.toScale; this.curScale = this.toScale; this.fromNudge = [this.toNudge[0], this.toNudge[1]]; this.curNudge = [this.toNudge[0], this.toNudge[1]]; this.active = false; this.spring.x = 1; this.spring.v = 0; this.paint(1); } private paint(p: number) { const els = this.els; if (!els) return; for (let s = 0; s < 3; s++) { const line = els.lines[s]; for (let k = 0; k < 4; k++) { const i = s * 4 + k; const v = this.from[i] + (this.to[i] - this.from[i]) * p; this.cur[i] = v; const str = fmt(v); if (line && this.written[i] !== str) { line.setAttribute(COORDS[k], str); this.written[i] = str; } } } this.curAngle = this.fromAngle + (this.toAngle - this.fromAngle) * p; this.curScale = this.fromScale + (this.toScale - this.fromScale) * p; const nx = this.fromNudge[0] + (this.toNudge[0] - this.fromNudge[0]) * p; const ny = this.fromNudge[1] + (this.toNudge[1] - this.fromNudge[1]) * p; this.curNudge = [nx, ny]; const transform = `rotate(${fmt(this.curAngle)} 12 12) translate(${fmt(nx)} ${fmt(ny)})`; if (this.written[12] !== transform) { els.group.setAttribute("transform", transform); this.written[12] = transform; } const sw = fmt(this.strokeWidth * this.curScale); if (this.written[13] !== sw) { els.group.setAttribute("stroke-width", sw); this.written[13] = sw; } } } export function StrokeMorphIcon({ name, size = 24, strokeWidth = 2, color = "currentColor", spring, spin, label, className, }: StrokeMorphIconProps) { const reduceMotion = useReducedMotion() === true; const def = resolveStrokeIcon(name); // Initial markup only. After mount, attributes are owned by the Morph, so these // constants never change and React never overwrites an in-flight frame. const [initial] = useState(() => { const eff = effOf(def); const visible = visibleOf(def); return { segs: eff, visible, transform: `rotate(${def.rotation ?? 0} 12 12) translate(${nudgeOf(def).map(fmt).join(" ")})`, strokeWidth: fmt(strokeWidth * (def.strokeScale ?? 1)), }; }); const [morph] = useState(() => new Morph(def)); const svgRef = useRef(null); const groupRef = useRef(null); const lineRefs = useRef<(SVGLineElement | null)[]>([null, null, null]); // The {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/a11y.tsx"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/_core/motion.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/_core/motion.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/utilities/stroke-morph-icon.tsx","content":"$a6","type":"registry:component","target":"@components/bjork-ui/utilities/stroke-morph-icon.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/spring.ts","content":"$a7","type":"registry:component","target":"@components/bjork-ui/_core/spring.ts"}],"className":"h-[70svh] min-h-80"}]