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:T461a,"use client"; import { useId, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from "react"; import { LiveRegion } from "@/components/bjork-ui/_core/a11y"; import { easeCss } from "@/components/bjork-ui/_core/motion"; import { AI_PANEL, FOCUS_RING, PRESS, formatCost, formatDuration, formatTokens, useAiTone, useControllable, useReduceMotion, type BjorkTone, } from "@/components/bjork-ui/ai/_shared"; import { StrokeMorphIcon } from "@/components/bjork-ui/utilities/stroke-morph-icon"; import { cn } from "@/lib/utils"; export interface CompareResponse { id: string; /** Model name. Hidden as "Response A/B" while `blind` until a vote is in. */ model: string; /** Plain text (blank lines split paragraphs) or any node. */ body: ReactNode; latencyMs?: number; tokens?: number; costUsd?: number; } export type CompareChoice = "a" | "tie" | "b" | "both-bad"; export interface CompareVote { choice: CompareChoice; /** Per criterion, whether each side did well. */ rubric: Record; comment?: string; } export interface ResponseCompareProps { prompt: ReactNode; responses: [CompareResponse, CompareResponse]; /** Hide model names until the vote. Default true. */ blind?: boolean; /** The submitted vote, or null while voting. */ value?: CompareVote | null; defaultValue?: CompareVote | null; onVote?: (vote: CompareVote | null) => void; /** Criteria with per-side toggles, e.g. ["Accuracy", "Helpfulness", "Tone"]. */ rubric?: string[]; /** Offer a free-text comment. Default true. */ allowComment?: boolean; tone?: BjorkTone; className?: string; } export const SAMPLE_COMPARISON: { prompt: string; responses: [CompareResponse, CompareResponse]; rubric: string[] } = { prompt: "My sourdough starter smells like nail polish remover. Is it ruined, and what should I do?", rubric: ["Accuracy", "Helpfulness", "Tone"], responses: [ { id: "a", model: "Halcyon 3 Pro", latencyMs: 2140, tokens: 164, costUsd: 0.0031, body: "It isn't ruined. That acetone smell means the yeast and bacteria have run out of food and are producing more acetic acid and ethyl acetate.\n\nFeed it more often: discard all but 50 g, then feed 1:1:1 by weight twice a day for two or three days. Keep it somewhere around 24 °C. The sharp smell should fade into a mild, yogurt-like sourness.", }, { id: "b", model: "Kestrel Mini", latencyMs: 860, tokens: 121, costUsd: 0.0004, body: "A nail polish smell usually means your starter is contaminated with bad bacteria. To be safe, throw it out and start a new one with fresh flour and filtered water.\n\nNext time, store it in the fridge between bakes so it does not spoil.", }, ], }; const CHOICES: { id: CompareChoice; label: string; short: string }[] = [ { id: "a", label: "A is better", short: "A" }, { id: "tie", label: "Tie", short: "Tie" }, { id: "b", label: "B is better", short: "B" }, { id: "both-bad", label: "Both bad", short: "Both bad" }, ]; function renderBody(body: ReactNode): ReactNode { if (typeof body !== "string") return body; return body.split(/\n{2,}/).map((p, i) => (

0 ? "mt-3" : undefined}> {p}

)); } /** Side-by-side evaluation of two responses to one prompt, with a vote, an optional rubric and a blind reveal. */ export function ResponseCompare({ prompt, responses, blind = true, value, defaultValue = null, onVote, rubric = [], allowComment = true, tone: toneProp, className, }: ResponseCompareProps) { const { style } = useAiTone(toneProp); const reduce = useReduceMotion(); const uid = useId(); const [vote, setVote] = useControllable(value, defaultValue, onVote); const initial = value ?? defaultValue; const [choice, setChoice] = useState(initial?.choice ?? null); const [marks, setMarks] = useState>( () => initial?.rubric ?? Object.fromEntries(rubric.map((r) => [r, { a: false, b: false }])), ); const [comment, setComment] = useState(initial?.comment ?? ""); const [commenting, setCommenting] = useState(Boolean(initial?.comment)); const radios = useRef<(HTMLButtonElement | null)[]>([]); const submitted = vote !== null; const revealed = !blind || submitted; const [announce, setAnnounce] = useState({ submitted, message: "" }); if (announce.submitted !== submitted) { const msg = submitted && vote ? `Vote recorded: ${CHOICES.find((c) => c.id === vote.choice)?.label}. Response A was ${responses[0].model}, response B was ${responses[1].model}.` : "Vote cleared"; setAnnounce({ submitted, message: msg }); } const onRadioKey = (e: ReactKeyboardEvent) => { if (submitted) return; const i = Math.max(0, CHOICES.findIndex((c) => c.id === choice)); let next = -1; if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (i + 1) % CHOICES.length; else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (i - 1 + CHOICES.length) % CHOICES.length; else if (e.key === "Home") next = 0; else if (e.key === "End") next = CHOICES.length - 1; else return; e.preventDefault(); setChoice(CHOICES[next].id); radios.current[next]?.focus(); }; const submit = () => { if (!choice) return; setVote({ choice, rubric: marks, comment: comment.trim() || undefined }); }; const winner = vote?.choice === "a" ? 0 : vote?.choice === "b" ? 1 : null; const focusable = Math.max(0, CHOICES.findIndex((c) => c.id === choice)); return (

Prompt

{prompt}

{responses.map((r, i) => { const letter = i === 0 ? "A" : "B"; const wins = winner === i; const loses = submitted && ((winner !== null && winner !== i) || vote?.choice === "both-bad"); return (

{/* The winner's accent edge. */}

Response {letter}{revealed ? `: ${r.model}` : ""}

{wins && ( Preferred )} {submitted && vote?.choice === "both-bad" && ( Bad )}

{r.latencyMs !== undefined && {formatDuration(r.latencyMs)}} {r.tokens !== undefined && {formatTokens(r.tokens)} tok} {r.costUsd !== undefined && {formatCost(r.costUsd)}}

{renderBody(r.body)}

); })}

{/* Voting */}

{CHOICES.map((c, i) => { const on = (submitted ? vote?.choice : choice) === c.id; return ( ); })}

{rubric.length > 0 && (

{rubric.map((criterion) => (

{criterion} {(["a", "b"] as const).map((side) => { const on = marks[criterion]?.[side] ?? false; return ( ); })}

))}

)} {allowComment && !submitted && (

{commenting ? (

setComment(e.target.value)}
                rows={2}
                placeholder="What tipped it? (optional)"
                className={cn(
                  "block w-full resize-y rounded-[10px] border border-[color:var(--bjork-border)] bg-[color:var(--bjork-field)] px-3 py-2 text-[13px] leading-5 text-[color:var(--bjork-text)] placeholder:text-[color:var(--bjork-text-faint)]",
                  FOCUS_RING,
                )}
              />
            ) : (
              <button
                type="button"
                onClick={() => setCommenting(true)}
                className={cn(
                  "-ml-1.5 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[7px] px-1.5 text-[12px] text-[color:var(--bjork-text-muted)] hover:text-[color:var(--bjork-text)]",
                  FOCUS_RING,
                )}
              >
                <StrokeMorphIcon name="plus" size={12} strokeWidth={1.75} color="currentColor" />
                Add a comment
              </button>
            )}
          </div>
        )}

<div className="flex min-h-8 items-center justify-between gap-3">
          {submitted && vote ? (
            <>
              <span className="min-w-0 truncate text-[13px] text-[color:var(--bjork-text-muted)]">
                {winner !== null ? (
                  <>
                    You preferred <span className="text-[color:var(--bjork-text)]">{responses[winner].model}</span>
                  </>
                ) : vote.choice === "tie" ? (
                  "You called it a tie"
                ) : (
                  "You marked both as bad"
                )}
                {vote.comment && <span className="text-[color:var(--bjork-text-faint)]"> · “{vote.comment}”</span>}
              </span>
              <button
                type="button"
                onClick={() => setVote(null)}
                className={cn(
                  "inline-flex h-8 shrink-0 cursor-pointer items-center rounded-[9px] px-3 text-[13px] font-medium text-[color:var(--bjork-text-muted)] hover:bg-[color:var(--bjork-surface-active)] hover:text-[color:var(--bjork-text)]",
                  FOCUS_RING,
                  PRESS,
                )}
              >
                Change vote
              </button>
            </>
          ) : (
            <>
              <span className="font-mono text-[11px] text-[color:var(--bjork-text-faint)]">
                {blind ? "Models are hidden until you vote" : ""}
              </span>
              <button
                type="button"
                disabled={!choice}
                onClick={submit}
                className={cn(
                  "inline-flex h-8 shrink-0 cursor-pointer items-center rounded-[9px] bg-[color:var(--bjork-accent-fill)] px-3.5 text-[13px] font-medium text-[color:var(--bjork-accent-foreground)] hover:brightness-110 disabled:cursor-default disabled:bg-[color:var(--bjork-surface-active)] disabled:text-[color:var(--bjork-text-faint)] disabled:hover:brightness-100",
                  FOCUS_RING,
                  PRESS,
                )}
              >
                Submit vote
              </button>
            </>
          )}
        </div>
      </div>

<LiveRegion message={announce.message} />
    </section>
  );
}
a3: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;

return (t: number) => {
    if (t <= 0) return 0;
    if (t >= 1) return 1;
    return sampleY(solveX(t));
  };
}
a4:T1952,"use client";

// Shared plumbing for the bjork-ui AI components: tone tokens, reduced motion, controllable state and
// number formatting. Every AI component imports from here so they read as one family.

import {
  useCallback,
  useLayoutEffect,
  useRef,
  useState,
  useSyncExternalStore,
  type CSSProperties,
} from "react";
import { useReducedMotion } from "framer-motion";
import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette";
import { useBjorkTone } from "@/components/bjork-ui/_core/tone";
import { surfaceVars } from "@/components/bjork-ui/_core/surface";

export type { BjorkTone };
export type BjorkPalette = (typeof BJORK_PALETTE)[BjorkTone];

const noopSubscribe = () => () => {};

/** False on the server and the first client render, true after hydration. */
export function useHydrated(): boolean {
  return useSyncExternalStore(
    noopSubscribe,
    () => true,
    () => false,
  );
}

/** Hydration-safe reduced motion: both sides report "not reduced" until mount, then the real value applies. */
export function useReduceMotion(): boolean {
  const hydrated = useHydrated();
  const reduced = useReducedMotion();
  return hydrated && reduced === true;
}

/**
 * Resolves the tone and returns the CSS custom properties for it. Spread `style` on the component root so an
 * explicit `tone` prop wins over the page theme, and status colours (success, warning, error) are always defined.
 */
export function useAiTone(toneProp?: BjorkTone) {
  const tone = useBjorkTone(toneProp);
  const pal = BJORK_PALETTE[tone];
  const style = {
    ...surfaceVars(tone),
    "--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-hair": pal.hair,
    "--bjork-border": pal.border,
    "--bjork-border-strong": pal.borderStrong,
    "--bjork-surface": pal.surface,
    "--bjork-raised": pal.raised,
    "--bjork-surface-active": pal.active,
    "--bjork-accent": pal.accent,
    "--bjork-accent-ink": pal.accentInk,
    "--bjork-accent-fill": pal.accentFill,
    "--bjork-accent-soft": pal.accentSoft,
    "--bjork-accent-muted": pal.accentMuted,
    "--bjork-accent-foreground": pal.accentFg,
    "--bjork-success": pal.success,
    "--bjork-warning": pal.warning,
    "--bjork-error": pal.error,
    "--bjork-ring-offset": pal.bg,
    colorScheme: tone,
  } as CSSProperties;
  return { tone, pal, style };
}

/** Classes for the shared keyboard focus ring. */
export const FOCUS_RING =
  "outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]";

/** Classes for the shared press feedback. */
export const PRESS = "transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none";

/**
 * Controlled-or-uncontrolled state. Pass `value` to control it; `onChange` fires for every change either way.
 */
export function useControllable<T>(
  value: T | undefined,
  defaultValue: T,
  onChange?: (next: T) => void,
): [T, (next: T) => void] {
  const controlled = value !== undefined;
  const [inner, setInner] = useState(defaultValue);
  const current = controlled ? value : inner;
  const onChangeRef = useRef(onChange);
  useLayoutEffect(() => {
    onChangeRef.current = onChange;
  });
  const set = useCallback(
    (next: T) => {
      if (!controlled) setInner(next);
      onChangeRef.current?.(next);
    },
    [controlled],
  );
  return [current, set];
}

/** 1234 -> "1,234", 18400 -> "18.4k", 1_200_000 -> "1.2M". */
export function formatTokens(n: number): string {
  if (n < 10_000) return Math.round(n).toLocaleString("en-US");
  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 100_000 ? 1 : 0).replace(/\.0$/, "")}k`;
  return `${(n / 1_000_000).toFixed(n < 10_000_000 ? 2 : 1).replace(/\.?0+$/, "")}M`;
}

/** US dollars with sub-cent precision when it matters: 0.0042 -> "$0.0042", 12.5 -> "$12.50". */
export function formatCost(usd: number): string {
  if (usd === 0) return "$0.00";
  if (Math.abs(usd) < 0.01) return `$${usd.toFixed(4)}`;
  if (Math.abs(usd) < 1) return `$${usd.toFixed(3)}`;
  return `$${usd.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

/** 640 -> "640ms", 4200 -> "4.2s", 95000 -> "1m 35s". */
export function formatDuration(ms: number): string {
  if (ms < 1000) return `${Math.round(ms)}ms`;
  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
  const m = Math.floor(ms / 60_000);
  const s = Math.round((ms % 60_000) / 1000);
  return `${m}m ${s}s`;
}

/** 2_400_000 bytes -> "2.4 MB". */
export function formatBytes(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  const units = ["KB", "MB", "GB"];
  let v = bytes / 1024;
  let i = 0;
  while (v >= 1024 && i < units.length - 1) {
    v /= 1024;
    i++;
  }
  return `${v.toFixed(v < 10 ? 1 : 0)} ${units[i]}`;
}

/** Shimmer keyframes for "working" text. Mount once with <style href=... precedence="default">. */
export const SHIMMER_TEXT_CSS =
  "@keyframes bjork-ai-shimmer{from{background-position:100% 0}to{background-position:0% 0}}" +
  ".bjork-ai-shimmer{background-image:linear-gradient(90deg,var(--bjork-text-muted) 0%,var(--bjork-text-muted) 40%,var(--bjork-text) 50%,var(--bjork-text-muted) 60%,var(--bjork-text-muted) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bjork-ai-shimmer 1.8s linear infinite}" +
  "@media (prefers-reduced-motion: reduce){.bjork-ai-shimmer{animation:none;background:none;color:var(--bjork-text-muted)}}";

/** CANON §2. Panel = a component's own root surface; Card = a standalone card; Tile = a card inside a panel; Well = recessed code/field. */
export const AI_PANEL = "rounded-[20px] border border-[color:var(--bjork-border-muted)] bg-[color:var(--bjork-surface)] p-4 shadow-[var(--bjork-shadow-surface)]";
export const AI_CARD = "rounded-[18px] border border-[color:var(--bjork-border-muted)] bg-[color:var(--bjork-surface)] shadow-[var(--bjork-shadow-surface)]";
export const AI_TILE = "rounded-[12px] border border-[color:var(--bjork-border-muted)] bg-[color:var(--bjork-surface)] shadow-[var(--bjork-shadow-surface)]";
export const AI_WELL = "rounded-[8px] border border-[color:var(--bjork-border)] bg-[color:var(--bjork-field-inset)] shadow-[var(--bjork-shadow-inset)]";
a5: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;
a6:Tccd,import type { CSSProperties } from "react";
import type { BjorkTone } from "./palette";

// The library surface (CANON.md §1). Values mirror app/globals.css :root and .dark. Change both together.
export const BJORK_SURFACE = {
  light: {
    surface: "#fffcf6", surfaceMuted: "rgba(250, 246, 237, 0.94)", surfaceHover: "#f5efe3", surfaceActive: "#efe7d8",
    panel: "#f8f2e7", menu: "rgba(255, 252, 246, 0.98)", field: "rgba(255, 252, 246, 0.96)",
    fieldMuted: "rgba(248, 242, 231, 0.82)", fieldInset: "rgba(239, 231, 216, 0.72)",
    border: "#eee6db", borderMuted: "#f5ede2", borderStrong: "#e1d7c8",
    shadowSurface: "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)",
    shadowSoft: "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)",
    shadowPanel: "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)",
    shadowMenu: "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)",
    shadowInset: "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)",
  },
  dark: {
    surface: "#121212", surfaceMuted: "rgba(22, 22, 22, 0.92)", surfaceHover: "#161616", surfaceActive: "#202020",
    panel: "#0d0d0d", menu: "rgba(18, 18, 18, 0.98)", field: "rgba(18, 18, 18, 0.95)",
    fieldMuted: "rgba(18, 18, 18, 0.55)", fieldInset: "rgba(9, 9, 9, 0.75)",
    border: "#232323", borderMuted: "#1c1c1c", borderStrong: "#343434",
    shadowSurface: "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)",
    shadowSoft: "inset 0 1px 0 rgba(255, 255, 255, 0.045)",
    shadowPanel: "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)",
    shadowMenu: "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)",
    shadowInset: "inset 0 1px 10px rgba(0, 0, 0, 0.45)",
  },
} as const;

/** Writes the surface tokens for a pinned tone as --bjork-* custom properties. Spread first; kit-specific keys may override. */
export function surfaceVars(tone: BjorkTone): CSSProperties {
  const s = BJORK_SURFACE[tone];
  return {
    "--bjork-surface": s.surface, "--bjork-surface-muted": s.surfaceMuted, "--bjork-surface-hover": s.surfaceHover,
    "--bjork-surface-active": s.surfaceActive, "--bjork-panel": s.panel, "--bjork-menu": s.menu, "--bjork-field": s.field,
    "--bjork-field-muted": s.fieldMuted, "--bjork-field-inset": s.fieldInset, "--bjork-border": s.border,
    "--bjork-border-muted": s.borderMuted, "--bjork-border-strong": s.borderStrong,
    "--bjork-shadow-surface": s.shadowSurface, "--bjork-shadow-soft": s.shadowSoft, "--bjork-shadow-panel": s.shadowPanel,
    "--bjork-shadow-menu": s.shadowMenu, "--bjork-shadow-inset": s.shadowInset,
  } as CSSProperties;
}
a7: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<string, StrokeIconDef> = {
  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<StrokeIconDef, [number, number]>([
  [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<string>();

// Effective geometry: hidden lines collapse onto the centroid of the visible endpoints.
const effCache = new WeakMap<StrokeIconDef, Seg[]>();

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<StrokeIconDef, WeakMap<StrokeIconDef, Assignment>>();

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<SVGSVGElement>(null);
  const groupRef = useRef<SVGGElement>(null);
  const lineRefs = useRef<(SVGLineElement | null)[]>([null, null, null]);

// The <svg> stays the root (icon-with-label rules target `>svg`). The loop hook only reads
  // the element's box and dataset, which SVG elements also have.
  const loop = useVisibleLoop(svgRef as RefObject<HTMLElement | null>, (dt) => morph.step(dt));

useLayoutEffect(() => {
    if (!groupRef.current) return;
    morph.bind({ group: groupRef.current, lines: lineRefs.current });
  }, [morph]);

useLayoutEffect(() => {
    morph.setConfig(spring ?? DEFAULT_SPRING);
  });

useLayoutEffect(() => {
    if (morph.target === def) return;
    morph.retarget(def, reduceMotion);
    if (!reduceMotion) loop.wake();
  }, [def, reduceMotion, morph, loop]);

useLayoutEffect(() => {
    morph.setStrokeWidth(strokeWidth);
  }, [morph, strokeWidth]);

const spinning = (spin ?? def.spin) === true;

return (
    <svg
      ref={svgRef}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeLinecap="round"
      strokeLinejoin="round"
      role={label ? "img" : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
      className={cn("shrink-0", className)}
    >
      <g
        className={spinning ? "motion-safe:animate-spin" : undefined}
        style={{ transformBox: "view-box", transformOrigin: "12px 12px" }}
      >
        <g ref={groupRef} strokeWidth={initial.strokeWidth} transform={initial.transform}>
          {initial.segs.map(([x1, y1, x2, y2], i) => (
            <line
              key={i}
              ref={(el) => {
                lineRefs.current[i] = el;
              }}
              x1={x1}
              y1={y1}
              x2={x2}
              y2={y2}
              style={{ opacity: initial.visible[i] ? 1 : 0 }}
            />
          ))}
        </g>
      </g>
    </svg>
  );
}
a8: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<HTMLElement | null>,
  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 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;
}
a9:Tcaa,// Pure spring math, no React. Units: stiffness k, damping d (coefficient), mass m, time in seconds.

export interface SpringConfig {
  stiffness: number;
  damping: number;
  mass: number;
}

export interface SpringState {
  x: number;
  v: number;
}

// Damping ratio zeta = d / (2 * sqrt(k * m)).
export function dampingRatio(c: SpringConfig): number {
  return c.damping / (2 * Math.sqrt(c.stiffness * c.mass));
}

// Exact solution of y'' = -(k/m) y - (d/m) y' for displacement y0 and velocity v0 at time t.
// Returns displacement and velocity together so stepping can be exact, not integrated.
function solveLinear(t: number, c: SpringConfig, y0: number, v0: number): { y: number; v: number } {
  const w0 = Math.sqrt(c.stiffness / c.mass);
  const z = dampingRatio(c);

if (Math.abs(z - 1) < 1e-9) {
    // Critically damped.
    const e = Math.exp(-w0 * t);
    const b = v0 + w0 * y0;
    return { y: e * (y0 + b * t), v: e * (b - w0 * (y0 + b * t)) };
  }
  if (z < 1) {
    // Underdamped.
    const wd = w0 * Math.sqrt(1 - z * z);
    const a = z * w0;
    const B = (v0 + a * y0) / wd;
    const e = Math.exp(-a * t);
    const cos = Math.cos(wd * t);
    const sin = Math.sin(wd * t);
    return {
      y: e * (y0 * cos + B * sin),
      v: e * (-a * (y0 * cos + B * sin) + wd * (-y0 * sin + B * cos)),
    };
  }
  // Overdamped.
  const s = w0 * Math.sqrt(z * z - 1);
  const r1 = -z * w0 + s;
  const r2 = -z * w0 - s;
  const B = (v0 - r1 * y0) / (r2 - r1);
  const A = y0 - B;
  const e1 = Math.exp(r1 * t);
  const e2 = Math.exp(r2 * t);
  return { y: A * e1 + B * e2, v: A * r1 * e1 + B * r2 * e2 };
}

// Analytic position at time t for a spring from `from` to `to` with initial velocity v0.
export function springAt(t: number, c: SpringConfig, from = 0, to = 1, v0 = 0): number {
  return to + solveLinear(t, c, from - to, v0).y;
}

// Overshoot as a fraction of the total travel. Zero when critically or overdamped.
export function overshoot(c: SpringConfig): number {
  const z = dampingRatio(c);
  if (z >= 1) return 0;
  return Math.exp((-Math.PI * z) / Math.sqrt(1 - z * z));
}

// Seconds until the spring stays within epsilon of its target (fraction of travel).
// Found by scanning backwards from a bound derived from the slowest decay rate.
export function settleTime(c: SpringConfig, epsilon = 0.001): number {
  const w0 = Math.sqrt(c.stiffness / c.mass);
  const z = dampingRatio(c);
  const slowest = z < 1 ? z * w0 : (z - Math.sqrt(z * z - 1)) * w0;
  const tEnd = (Math.log(1 / epsilon) / slowest) * 1.5 + 0.05;
  const steps = 4000;
  const dt = tEnd / steps;
  const band = epsilon;
  let last = 0;
  for (let i = 0; i <= steps; i++) {
    const t = i * dt;
    if (Math.abs(springAt(t, c, 1, 0, 0)) >= band) last = t;
  }
  return last + dt;
}

// Advances the state by dt towards `target`. Uses the exact solution of the linear spring
// (no integration), so it tracks springAt to rounding error at any step size and stays stable
// for stiff configs where a fixed-step integrator drifts.
export function stepSpring(s: SpringState, target: number, c: SpringConfig, dt: number): void {
  if (dt <= 0) return;
  const r = solveLinear(dt, c, s.x - target, s.v);
  s.x = target + r.y;
  s.v = r.v;
}
7e:["$","$La1",null,{"files":[{"path":"components/bjork-ui/ai/response-compare.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/ai/response-compare.tsx"},{"path":"components/bjork-ui/_core/a11y.tsx","content":"import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n  return <span className=\"sr-only\">{children}</span>;\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    <span role=\"status\" aria-live={politeness} aria-atomic=\"true\" className=\"sr-only\">\n      {message}\n    </span>\n  );\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/a11y.tsx"},{"path":"components/bjork-ui/_core/motion.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/motion.ts"},{"path":"components/bjork-ui/ai/_shared.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/ai/_shared.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/_core/tone.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n  const { resolvedTheme } = useTheme();\n  const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n  if (tone) return tone;\n  if (!mounted) return \"dark\";\n  return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/tone.ts"},{"path":"components/bjork-ui/_core/surface.ts","content":"$a6","type":"registry:component","target":"@components/bjork-ui/_core/surface.ts"},{"path":"components/bjork-ui/utilities/stroke-morph-icon.tsx","content":"$a7","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/loop.ts","content":"$a8","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/spring.ts","content":"$a9","type":"registry:component","target":"@components/bjork-ui/_core/spring.ts"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>