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:T56fe,"use client"; import { useLayoutEffect, useMemo, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import { VisuallyHidden } from "@/components/bjork-ui/_core/a11y"; import { cubicBezier, ease, easeCss } from "@/components/bjork-ui/_core/motion"; import { resamplePath } from "@/components/bjork-ui/_core/path"; import { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; export type MorphState = "loading" | "done" | "error" | "idle"; export type MorphTarget = "check" | "cross" | "arrow-down" | "spark" | (string & {}); export const morphTargets: Record<"check" | "cross" | "arrow-down" | "spark", string> = { check: "M5 12.5 L10 17.5 L19 7", cross: "M6.5 6.5 L17.5 17.5 M17.5 6.5 L6.5 17.5", "arrow-down": "M12 4.5 V18.5 M6.5 13 L12 18.5 L17.5 13", spark: "M12 3 L13.8 10.2 L21 12 L13.8 13.8 L12 21 L10.2 13.8 L3 12 L10.2 10.2 Z", }; export interface MorphLoaderProps { state: MorphState; target?: MorphTarget; size?: number; segments?: number; speedMs?: number; strokeWidth?: number; color?: string; doneColor?: string; errorColor?: string; labels?: Partial>; onMorphComplete?: () => void; tone?: BjorkTone; attract?: boolean; /** Static morph frame, 0 to 1, from the ring to the done or error glyph. Turns the rotation off. */ progress?: number; className?: string; } // Geometry in the 24-unit box. Each segment is an open polyline of POINTS samples. const VIEW = 24; const CENTRE = 12; const RING_RADIUS = 9.2; const RING_SPAN = 0.62; const POINTS = 8; const MORPH_MS = 560; const STAGGER_MS = 18; const REVERSE_MS = 400; const DONE_WIDTH = 1.1; const SHAKE_PX = [0, -3, 3, -2, 2, 0]; const SHAKE_MS = 360; const FADE_MS = 80; const LOADING_REDUCED_OPACITY = 0.6; const ATTRACT_LOADING_MS = 1600; const ATTRACT_FINAL_MS = 1200; const ATTRACT_RESUME_MS = 4000; const DOTS: ReadonlyArray = [ [8, 12], [12, 12], [16, 12], ]; const DEFAULT_LABELS: Record = { loading: "Loading", done: "Done", error: "Failed", idle: "", }; // Blur test (ink centroid, round caps, 24-space): the unnudged check sits +0.13 right, +0.95 low. Nudged back to the box centre. const CHECK_NUDGE_X = -0.15; const CHECK_NUDGE_Y = -0.95; // One shared keyframe for every loader. It is injected once into , not into the component's markup. const SPIN_NAME = "morph-loader-spin"; function ensureSpinKeyframes() { if (typeof document === "undefined" || document.getElementById(SPIN_NAME)) return; const style = document.createElement("style"); style.id = SPIN_NAME; style.textContent = `@keyframes ${SPIN_NAME}{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`; document.head.appendChild(style); } const morphEase = cubicBezier(...ease.inOut); const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v); const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const fmt = (v: number) => (Math.round(v * 100) / 100).toString(); function tailOpacity(i: number, n: number): number { return 0.22 + 0.78 * (n === 1 ? 1 : i / (n - 1)); } function ringPoints(n: number): Float32Array { const out = new Float32Array(n * POINTS * 2); const step = 360 / n; for (let i = 0; i < n; i++) { for (let j = 0; j < POINTS; j++) { const rad = ((i * step + (j / (POINTS - 1)) * step * RING_SPAN) * Math.PI) / 180; const at = (i * POINTS + j) * 2; out[at] = CENTRE + RING_RADIUS * Math.cos(rad); out[at + 1] = CENTRE + RING_RADIUS * Math.sin(rad); } } return out; } function dotPoints(n: number): Float32Array { const out = new Float32Array(n * POINTS * 2); for (let i = 0; i < n; i++) { const [x, y] = i < DOTS.length ? DOTS[i] : [CENTRE, CENTRE]; for (let j = 0; j < POINTS; j++) { const at = (i * POINTS + j) * 2; out[at] = x; out[at + 1] = y; } } return out; } function segmentD(pts: Float32Array, seg: number): string { let d = ""; for (let j = 0; j < POINTS; j++) { const at = (seg * POINTS + j) * 2; d += `${j === 0 ? "M" : " L"}${fmt(pts[at])} ${fmt(pts[at + 1])}`; } return d; } function polylineLength(pts: Float32Array): number { let len = 0; for (let i = 2; i < pts.length; i += 2) { len += Math.hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]); } return len; } function subpaths(d: string): string[] { return d .split(/(?=[Mm])/) .map((s) => s.trim()) .filter((s) => s.length > 0); } // Splits n segments across subpaths in proportion to length, keeping at least one each. function allocateSegments(lengths: number[], n: number): number[] { const total = lengths.reduce((a, b) => a + b, 0); const exact = lengths.map((l) => (n * l) / total); const counts = exact.map((x) => Math.max(1, Math.round(x))); let sum = counts.reduce((a, b) => a + b, 0); while (sum > n) { let best = -1; let bestOver = -Infinity; counts.forEach((c, i) => { if (c > 1 && c - exact[i] > bestOver) { bestOver = c - exact[i]; best = i; } }); if (best < 0) break; counts[best] -= 1; sum -= 1; } while (sum < n) { let best = 0; let bestUnder = -Infinity; counts.forEach((c, i) => { if (exact[i] - c > bestUnder) { bestUnder = exact[i] - c; best = i; } }); counts[best] += 1; sum += 1; } return counts; } // Resamples a path into n segments of POINTS samples by arc length. Returns null for an invalid path. function buildTarget(d: string, n: number): Float32Array | null { const parts = subpaths(d); if (parts.length === 0) return null; const lengths = parts.map((part) => polylineLength(resamplePath(part, 64))); const total = lengths.reduce((a, b) => a + b, 0); if (!(total > 1e-6)) return null; const counts = parts.length === 1 ? [n] : allocateSegments(lengths, n); if (counts.reduce((a, b) => a + b, 0) !== n) return null; const out = new Float32Array(n * POINTS * 2); let seg = 0; parts.forEach((part, idx) => { out.set(resamplePath(part, counts[idx] * POINTS), seg * POINTS * 2); seg += counts[idx]; }); return out; } function resolveTarget(target: MorphTarget, n: number): Float32Array { const isKey = Object.prototype.hasOwnProperty.call(morphTargets, target); let d = isKey ? morphTargets[target as keyof typeof morphTargets] : target; let pts = buildTarget(d, n); if (!pts) { if (process.env.NODE_ENV !== "production" && typeof document !== "undefined") { console.warn(`MorphLoader: "${target}" is not a valid path. Using "check".`); } d = morphTargets.check; pts = buildTarget(d, n) ?? new Float32Array(n * POINTS * 2); } if (d === morphTargets.check) { for (let at = 0; at < pts.length; at += 2) { pts[at] += CHECK_NUDGE_X; pts[at + 1] += CHECK_NUDGE_Y; } } return pts; } function mixColor(from: string, to: string, p: number): string { if (p <= 0) return from; if (p >= 1) return to; return `color-mix(in srgb, ${to} ${(p * 100).toFixed(1)}%, ${from})`; } interface EngineOptions { size: number; strokeWidth: number; colorLoading: string; colorDone: string; colorError: string; speedMs: number; kf: string; reduced: boolean; } interface Tween { t0: number; dur: number; stagger: number; from: Float32Array; fromOp: Float32Array; fromW: number; fromColor: string; to: Float32Array; toOp: Float32Array; toW: number; toColor: string; onDone?: () => void; } const DEFAULT_OPTIONS: EngineOptions = { size: 40, strokeWidth: 2.25, colorLoading: "currentColor", colorDone: "currentColor", colorError: "#ff5c4d", speedMs: 900, kf: "morph-loader-spin", reduced: false, }; // Owns the segment points and runs every tween on one rAF loop. React only sets props and effects. class MorphEngine { group: SVGGElement | null = null; n = 0; logical: MorphState | null = null; posed = false; private ring: Float32Array = new Float32Array(0); private tail: Float32Array = new Float32Array(0); private ones: Float32Array = new Float32Array(0); private dots: Float32Array = new Float32Array(0); private dotsOp: Float32Array = new Float32Array(0); private target: Float32Array = new Float32Array(0); private cross: Float32Array = new Float32Array(0); private cur: Float32Array = new Float32Array(0); private op: Float32Array = new Float32Array(0); private width = DEFAULT_OPTIONS.strokeWidth; private shownColor = "currentColor"; private tween: Tween | null = null; private rotating = false; private rotStart = 0; private fade: Animation | null = null; private opts: EngineOptions = DEFAULT_OPTIONS; attach(group: SVGGElement | null) { this.group = group; } setOptions(opts: EngineOptions) { this.opts = opts; } setGeometry(n: number, target: MorphTarget) { if (n !== this.n) { this.n = n; this.ring = ringPoints(n); this.tail = new Float32Array(n); this.ones = new Float32Array(n).fill(1); this.dots = dotPoints(n); this.dotsOp = new Float32Array(n); for (let i = 0; i < n; i++) { this.tail[i] = tailOpacity(i, n); this.dotsOp[i] = i < DOTS.length ? 1 : 0; } this.cur = new Float32Array(n * POINTS * 2); this.op = new Float32Array(n); this.cross = resolveTarget("cross", n); } this.target = resolveTarget(target, n); } // Sets the posed state at once, with no tween. snap(state: MorphState) { this.tween = null; this.posed = false; this.stopRotation(); this.logical = state; const o = this.opts; if (state === "loading") { this.cur.set(this.ring); this.op.set(this.tail); this.width = o.strokeWidth; this.shownColor = o.colorLoading; } else if (state === "done") { this.cur.set(this.target); this.op.set(this.ones); this.width = o.strokeWidth * DONE_WIDTH; this.shownColor = o.colorDone; } else if (state === "error") { this.cur.set(this.cross); this.op.set(this.ones); this.width = o.strokeWidth; this.shownColor = o.colorError; } else { this.cur.set(this.dots); this.op.set(this.dotsOp); this.width = o.strokeWidth; this.shownColor = o.colorLoading; } if (this.group) { this.group.style.opacity = o.reduced && state === "loading" ? String(LOADING_REDUCED_OPACITY) : "1"; } if (state === "loading") this.startRotation(); this.paint(); } // Moves to a state with the morph. Reduced motion crossfades instead. go(state: MorphState, complete?: () => void) { if (this.logical === null || this.posed) { this.snap(state); return; } if (this.logical === state) return; this.logical = state; const o = this.opts; if (state === "loading") { this.morph(this.ring, this.tail, o.strokeWidth, o.colorLoading, REVERSE_MS, () => this.startRotation()); } else if (state === "idle") { this.morph(this.dots, this.dotsOp, o.strokeWidth, o.colorLoading, MORPH_MS); } else if (state === "done") { this.morph(this.target, this.ones, o.strokeWidth * DONE_WIDTH, o.colorDone, MORPH_MS, complete); } else { this.morph(this.cross, this.ones, o.strokeWidth, o.colorError, MORPH_MS, complete); this.shake(); } } // Re-runs the done morph to a new target from the points on screen. retarget(complete?: () => void) { const o = this.opts; this.morph(this.target, this.ones, o.strokeWidth * DONE_WIDTH, o.colorDone, MORPH_MS, complete); } // A static frame between the ring (0) and the done or error glyph (1). pose(state: MorphState, p: number) { this.tween = null; this.stopRotation(); const o = this.opts; const done = state === "done"; const fin = done ? this.target : this.cross; const finW = done ? o.strokeWidth * DONE_WIDTH : o.strokeWidth; const finColor = done ? o.colorDone : o.colorError; const total = MORPH_MS + STAGGER_MS * (this.n - 1); for (let i = 0; i < this.n; i++) { const q = morphEase(clamp01((p * total - STAGGER_MS * i) / MORPH_MS)); this.op[i] = lerp(this.tail[i], 1, q); for (let j = 0; j < POINTS; j++) { const at = (i * POINTS + j) * 2; this.cur[at] = lerp(this.ring[at], fin[at], q); this.cur[at + 1] = lerp(this.ring[at + 1], fin[at + 1], q); } } const g = morphEase(clamp01(p)); this.width = lerp(o.strokeWidth, finW, g); this.shownColor = mixColor(o.colorLoading, finColor, g); this.posed = true; this.logical = state; if (this.group) this.group.style.opacity = "1"; this.paint(); } // Reduced motion: fade out, swap the state, fade in (80ms each). fadeTo(state: MorphState) { const g = this.group; if (!g || this.logical === null || this.posed) { this.snap(state); return; } if (this.logical === state) return; this.fade?.cancel(); const from = Number(g.style.opacity || 1); const out = g.animate([{ opacity: from }, { opacity: 0 }], { duration: FADE_MS, easing: "ease-out" }); this.fade = out; out.onfinish = () => { this.snap(state); this.fade = g.animate([{ opacity: 0 }, { opacity: Number(g.style.opacity || 1) }], { duration: FADE_MS, easing: "ease-out", }); }; } // Returns true while a tween is running. tickTween(now: number): boolean { const tw = this.tween; if (!tw) return false; const t = now - tw.t0; const total = tw.dur + tw.stagger * (this.n - 1); if (t >= total) { this.finish(tw); return false; } for (let i = 0; i < this.n; i++) { const e = morphEase(clamp01((t - tw.stagger * i) / tw.dur)); this.op[i] = lerp(tw.fromOp[i], tw.toOp[i], e); for (let j = 0; j < POINTS; j++) { const at = (i * POINTS + j) * 2; this.cur[at] = lerp(tw.from[at], tw.to[at], e); this.cur[at + 1] = lerp(tw.from[at + 1], tw.to[at + 1], e); } } const g = morphEase(clamp01(t / tw.dur)); this.width = lerp(tw.fromW, tw.toW, g); this.shownColor = mixColor(tw.fromColor, tw.toColor, g); this.paint(); return true; } private finish(tw: Tween) { this.tween = null; this.cur.set(tw.to); this.op.set(tw.toOp); this.width = tw.toW; this.shownColor = tw.toColor; this.paint(); tw.onDone?.(); } private morph( fin: Float32Array, finOp: Float32Array, finW: number, finColor: string, dur: number, onDone?: () => void, ) { this.bake(); this.posed = false; this.tween = { t0: performance.now(), dur, stagger: STAGGER_MS, from: this.cur.slice(), fromOp: this.op.slice(), fromW: this.width, fromColor: this.shownColor, to: fin, toOp: finOp, toW: finW, toColor: finColor, onDone, }; } private startRotation() { const g = this.group; if (!g || this.opts.reduced) return; g.style.animation = `${this.opts.kf} ${this.opts.speedMs}ms linear infinite`; this.rotating = true; this.rotStart = performance.now(); } private stopRotation() { if (this.group) this.group.style.animation = "none"; this.rotating = false; } // Freezes the spin: bakes the current angle into the points and removes the CSS animation in the same task. private bake() { const g = this.group; if (!this.rotating || !g) return; const angle = this.currentAngle(); this.stopRotation(); const rad = (angle * Math.PI) / 180; const c = Math.cos(rad); const s = Math.sin(rad); for (let at = 0; at < this.cur.length; at += 2) { const dx = this.cur[at] - CENTRE; const dy = this.cur[at + 1] - CENTRE; this.cur[at] = CENTRE + dx * c - dy * s; this.cur[at + 1] = CENTRE + dx * s + dy * c; } } private currentAngle(): number { const speed = this.opts.speedMs; const anim = this.group ?.getAnimations() .find((a) => (a as CSSAnimation).animationName === this.opts.kf) as CSSAnimation | undefined; const ms = anim && typeof anim.currentTime === "number" ? anim.currentTime : performance.now() - this.rotStart; return ((((ms % speed) + speed) % speed) / speed) * 360; } private shake() { const g = this.group; if (!g || this.opts.reduced) return; const unit = VIEW / this.opts.size; g.animate( SHAKE_PX.map((px) => ({ transform: `translateX(${fmt(px * unit)}px)` })), { duration: SHAKE_MS, easing: easeCss.out }, ); } private paint() { const g = this.group; if (!g) return; const kids = g.children; for (let i = 0; i < this.n && i < kids.length; i++) { const el = kids[i]; el.setAttribute("d", segmentD(this.cur, i)); el.setAttribute("opacity", this.op[i].toFixed(3)); } g.setAttribute("stroke-width", this.width.toFixed(3)); g.style.stroke = this.shownColor; } } export function MorphLoader({ state, target = "check", size = 40, segments = 10, speedMs = 900, strokeWidth = 2.25, color, doneColor, errorColor, labels, onMorphComplete, tone, attract = false, progress, className, }: MorphLoaderProps) { const resolvedTone = useBjorkTone(tone); const reduced = useReducedMotion() ?? false; const kf = SPIN_NAME; const n = size < 20 ? 8 : Math.max(3, Math.round(segments)); const colorLoading = color ?? "currentColor"; const colorDone = doneColor ?? "currentColor"; const colorError = errorColor ?? BJORK_PALETTE[resolvedTone].error; const driven = attract && !reduced; const [engine] = useState(() => new MorphEngine()); const [attractState, setAttractState] = useState("loading"); const shown: MorphState = driven ? attractState : state; const rootRef = useRef(null); const groupRef = useRef(null); const completeRef = useRef(onMorphComplete); const attractRef = useRef({ on: false, state: "loading" as MorphState, cycle: 1, clock: 0, paused: false, lastInput: 0 }); const ringD = useMemo(() => { const pts = ringPoints(n); return Array.from({ length: n }, (_, i) => segmentD(pts, i)); }, [n]); const { wake } = useVisibleLoop( rootRef, (dt) => { let busy = engine.tickTween(performance.now()); const a = attractRef.current; if (a.on) { busy = true; if (a.paused && performance.now() - a.lastInput >= ATTRACT_RESUME_MS) a.paused = false; if (!a.paused) { a.clock += dt * 1000; const limit = a.state === "loading" ? ATTRACT_LOADING_MS : ATTRACT_FINAL_MS; if (a.clock >= limit) { a.clock -= limit; if (a.state === "loading") { a.state = a.cycle % 3 === 0 ? "error" : "done"; } else { a.cycle += 1; a.state = "loading"; } setAttractState(a.state); } } } return busy; }, { enabled: true }, ); // Keep the engine in step with the latest props on every render. useLayoutEffect(() => { ensureSpinKeyframes(); engine.attach(groupRef.current); engine.setOptions({ size, strokeWidth, colorLoading, colorDone, colorError, speedMs, kf, reduced, }); }); useLayoutEffect(() => { completeRef.current = onMorphComplete; }); // Geometry. A new segment count re-snaps. A new target morphs when the component is done. useLayoutEffect(() => { const complete = () => completeRef.current?.(); const nChanged = engine.n !== n; engine.setGeometry(n, target); if (engine.logical === null) return; if (nChanged) { engine.snap(engine.logical); return; } if (engine.logical === "done" && !engine.posed) { engine.retarget(complete); wake(); } }, [n, target, wake, engine]); // Colours, stroke and speed take effect at once. useLayoutEffect(() => { if (engine.logical !== null && !engine.posed) engine.snap(engine.logical); }, [colorLoading, colorDone, colorError, strokeWidth, speedMs, size, reduced, engine]); // State. Progress poses a static frame. Reduced motion crossfades. useLayoutEffect(() => { const complete = () => completeRef.current?.(); if (progress !== undefined && (shown === "done" || shown === "error")) { engine.pose(shown, clamp01(progress)); return; } if (reduced) { engine.fadeTo(shown); return; } engine.go(shown, complete); wake(); }, [shown, progress, reduced, wake, engine]); // Attract runs its cycle on the loop. Starting it sends the state through the effect above. useLayoutEffect(() => { const a = attractRef.current; a.on = driven; a.clock = 0; a.paused = false; if (driven) wake(); }, [driven, wake]); const markInput = () => { const a = attractRef.current; if (a.on) { a.paused = true; a.lastInput = performance.now(); } }; const label = labels?.[shown] ?? DEFAULT_LABELS[shown]; return ( {label} ); } a3:T540,export type BjorkTone = "dark" | "light"; // Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks. export const BJORK_PALETTE = { dark: { bg: "#050505", stage: "#111111", surface: "#121212", raised: "#161616", active: "#202020", border: "#232323", borderStrong: "#343434", text: "#ededed", textMedium: "rgba(237,237,237,0.72)", textMuted: "rgba(237,237,237,0.6)", textSoft: "rgba(237,237,237,0.5)", textFaint: "rgba(237,237,237,0.22)", hair: "rgba(237,237,237,0.12)", accent: "#ec5c13", accentInk: "#ec5c13", accentFill: "#b84a12", accentSoft: "rgba(236,92,19,0.12)", accentMuted: "rgba(236,92,19,0.24)", accentFg: "#fff2ea", success: "#4cc38a", warning: "#f2b544", error: "#ff5c4d", }, light: { bg: "#f7f5ef", stage: "#f7f5ef", surface: "#fffcf6", raised: "#f5efe3", active: "#efe7d8", border: "#eee6db", borderStrong: "#e1d7c8", text: "#171717", textMedium: "rgba(23,23,23,0.78)", textMuted: "rgba(23,23,23,0.68)", textSoft: "rgba(23,23,23,0.62)", textFaint: "rgba(23,23,23,0.22)", hair: "rgba(23,23,23,0.10)", accent: "#ec7d43", accentInk: "#b4531f", accentFill: "#ec7d43", accentSoft: "rgba(236,125,67,0.10)", accentMuted: "rgba(236,125,67,0.20)", accentFg: "#3f2112", success: "#1f8a55", warning: "#a86b00", error: "#c8361f", }, } as const; a4: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)); }; } a5:T987,// SVG path helpers. Path sampling needs the DOM, so it returns zeros on the server. const resampleCache = new Map(); // Interleaved x,y points at equal arc length along `d`, including both endpoints. export function resamplePath( d: string, count: number, viewBox?: [number, number, number, number], ): Float32Array { if (typeof document === "undefined") return new Float32Array(count * 2); const key = `${d}|${count}|${viewBox ? viewBox.join(",") : ""}`; const cached = resampleCache.get(key); if (cached) return cached; const svgNS = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("width", "0"); svg.setAttribute("height", "0"); svg.setAttribute("aria-hidden", "true"); svg.style.position = "absolute"; svg.style.visibility = "hidden"; if (viewBox) svg.setAttribute("viewBox", viewBox.join(" ")); const path = document.createElementNS(svgNS, "path"); path.setAttribute("d", d); svg.appendChild(path); document.body.appendChild(svg); const out = new Float32Array(count * 2); try { const total = path.getTotalLength(); for (let i = 0; i < count; i++) { const at = count === 1 ? 0 : (i / (count - 1)) * total; const p = path.getPointAtLength(at); out[i * 2] = p.x; out[i * 2 + 1] = p.y; } } finally { svg.remove(); } resampleCache.set(key, out); return out; } // Catmull-Rom through interleaved x,y points, converted to cubic beziers. Returns a path `d`. export function catmullRomToBezier(points: Float32Array, closed: boolean): string { const n = Math.floor(points.length / 2); if (n === 0) return ""; const P = (i: number) => { let idx = i; if (closed) idx = ((i % n) + n) % n; else idx = Math.min(n - 1, Math.max(0, i)); return [points[idx * 2], points[idx * 2 + 1]] as const; }; const f = (v: number) => v.toFixed(2); let d = `M${f(points[0])} ${f(points[1])}`; const segments = closed ? n : n - 1; for (let i = 0; i < segments; i++) { const p0 = P(i - 1); const p1 = P(i); const p2 = P(i + 1); const p3 = P(i + 2); const c1x = p1[0] + (p2[0] - p0[0]) / 6; const c1y = p1[1] + (p2[1] - p0[1]) / 6; const c2x = p2[0] - (p3[0] - p1[0]) / 6; const c2y = p2[1] - (p3[1] - p1[1]) / 6; d += ` C${f(c1x)} ${f(c1y)} ${f(c2x)} ${f(c2y)} ${f(p2[0])} ${f(p2[1])}`; } if (closed) d += " Z"; return d; } a6: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; } 7e:["$","$La1",null,{"files":[{"path":"components/bjork-ui/feedback/morph-loader.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/feedback/morph-loader.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/_core/tone.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/tone.ts"},{"path":"components/bjork-ui/_core/a11y.tsx","content":"import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/a11y.tsx"},{"path":"components/bjork-ui/_core/motion.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/motion.ts"},{"path":"components/bjork-ui/_core/path.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/_core/path.ts"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a6","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"}],"className":"h-[70svh] min-h-80"}]