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:T5bdb,"use client"; import { memo, useCallback, useEffect, useId, useRef, useState, type KeyboardEvent, type PointerEvent } from "react"; import { motion, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette"; import { cubicBezier, ease, springs } from "@/components/bjork-ui/_core/motion"; import { stepSpring, type SpringState } from "@/components/bjork-ui/_core/spring"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; export interface ClickWheelItem { id: string; label: string; meta?: string; } export interface ClickWheelProps { items: ClickWheelItem[]; value?: number; defaultValue?: number; onValueChange?: (index: number) => void; onSelect?: (item: ClickWheelItem, index: number) => void; onTick?: (index: number) => void; detentsPerRev?: number; inertia?: number; loop?: boolean; haptics?: boolean; layout?: "stacked" | "wheel-only"; size?: number; centerLabel?: string; ariaLabel?: string; tone?: BjorkTone; attract?: boolean; className?: string; } // Stacked layout: 140 display + 60 gap + 220 wheel = 420 tall. const LIST_W = 260; const LIST_H = 140; const ROW_H = 28; const ROW_TOP = (LIST_H - ROW_H) / 2; // the active row sits in the middle, 56px from the top const PILL_INSET = 4; const PILL_RADIUS = 8; const STACK_GAP = 60; const DEFAULT_SIZE = 220; const CENTER_AT_DEFAULT = 92; const FLASH_MS = 160; const TWEEN_MS = 120; const FLICK_SPEED = 8; // items per second const FLICK_EVERY = 4; // seconds of idle before an attract flick const SNAP_SPEED = 0.5; // items per second, below which the wheel snaps to a detent const MAX_FLICK = 6; // items/s, keeps any flick's settle ≤ 1.2s const RELEASE_WINDOW_MS = 80; const SAMPLE_KEEP_MS = 200; const RUBBER = 0.35; const WHEEL_PX_PER_ITEM = 40; const WHEEL_SNAP_DELAY = 140; const FADE_MASK = "linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)"; const easeOut = cubicBezier(...ease.out); function mod(a: number, n: number) { return ((a % n) + n) % n; } function clamp(v: number, lo: number, hi: number) { return Math.min(hi, Math.max(lo, v)); } // Index shown to the user for an unwrapped step count. function wrapIndex(k: number, n: number, loop: boolean) { if (n <= 0) return 0; return loop ? mod(k, n) : clamp(k, 0, n - 1); } // Unwrapped step the wheel may rest on. Without loop, the rest positions stop at the ends. function restStep(k: number, n: number, loop: boolean) { if (n <= 0 || loop) return k; return clamp(k, 0, n - 1); } function pointerAngle(x: number, y: number, cx: number, cy: number) { return (Math.atan2(y - cy, x - cx) * 180) / Math.PI; } interface WheelRowProps { id?: string; option: boolean; selected: boolean; hidden: boolean; label: string; meta?: string; labelColor: string; metaColor: string; } // Memoised so a detent only re-renders the rows whose selected state changed, not the whole list. const WheelRow = memo(function WheelRow({ id, option, selected, hidden, label, meta, labelColor, metaColor }: WheelRowProps) { return (

{label} {meta && ( {meta} )}

); }); // Token with a palette fallback, so the component keeps its tone outside the site. function tok(name: string, fallback: string) { return `var(--bjork-${name}, ${fallback})`; } export function ClickWheel({ items, value, defaultValue = 0, onValueChange, onSelect, onTick, detentsPerRev = 12, inertia = 0.94, loop = false, haptics = true, layout = "stacked", size = DEFAULT_SIZE, centerLabel = "Select", ariaLabel = "Click wheel", tone, attract = false, className, }: ClickWheelProps) { const resolvedTone = useBjorkTone(tone); const p = BJORK_PALETTE[resolvedTone]; const dark = resolvedTone === "dark"; const reduced = useReducedMotion(); const uid = useId(); const listboxId = `${uid}-list`; const optionId = (i: number) => `${uid}-opt-${i}`; const n = items.length; const detents = Math.max(1, Math.round(detentsPerRev)); const step = 360 / detents; const stacked = layout === "stacked"; const isControlled = value !== undefined; const attractOn = attract && !reduced && !isControlled && n > 0; const centerD = Math.round((size * CENTER_AT_DEFAULT) / DEFAULT_SIZE); // Loop mode repeats the list so the rows around the centre are always filled. const mid = loop && n > 0 ? Math.ceil(4 / n) : 0; const copies = loop && n > 0 ? 2 * mid + 1 : 1; const rowCount = n * copies; // Continuous position in items, plus the last reported (unwrapped) step. const startStep = restStep(value ?? defaultValue, n, loop); const posRef = useRef(startStep); const lastStepRef = useRef(Math.round(startStep)); const [index, setIndex] = useState(() => wrapIndex(Math.round(startStep), n, loop)); const velRef = useRef(0); const springTarget = useRef(null); const springState = useRef({ x: 0, v: 0 }); const tween = useRef<{ from: number; to: number; t0: number } | null>(null); const drag = useRef<{ cx: number; cy: number; last: number; samples: { t: number; p: number }[] } | null>(null); const flashes = useRef<{ tick: number; t0: number }[]>([]); const tickEls = useRef<(HTMLSpanElement | null)[]>([]); const listEl = useRef(null); const invEl = useRef(null); const notchEl = useRef(null); const wheelEl = useRef(null); const rootEl = useRef(null); const wakeRef = useRef<() => void>(() => {}); const inputSeen = useRef(false); const idleFor = useRef(0); const flickDir = useRef(1); const wheelSnap = useRef(null); const wheelHandler = useRef<(e: WheelEvent) => void>(() => {}); const kick = useCallback(() => wakeRef.current(), []); // Writes transforms straight to the DOM. React never re-renders for a frame of motion. const paint = useCallback(() => { const pos = posRef.current; const wrapped = loop && n > 0 ? mod(pos, n) : pos; const y = `translate3d(0, ${(ROW_TOP - (wrapped + mid * n) * ROW_H).toFixed(2)}px, 0)`; if (listEl.current) listEl.current.style.transform = y; if (invEl.current) invEl.current.style.transform = y; if (notchEl.current) notchEl.current.style.transform = `rotate(${(pos * step).toFixed(3)}deg)`; }, [loop, n, mid, step]); // Fires the callbacks for every detent between the last reported step and `k`. const reportTo = (k: number) => { const from = lastStepRef.current; if (k === from || n === 0) return; const dir = k > from ? 1 : -1; const t0 = performance.now(); lastStepRef.current = k; for (let s = from + dir; dir > 0 ? s <= k : s >= k; s += dir) { const idx = wrapIndex(s, n, loop); if (haptics && typeof navigator !== "undefined" && typeof navigator.vibrate === "function") { navigator.vibrate(3); } onTick?.(idx); onValueChange?.(idx); if (!reduced) flashes.current.push({ tick: mod(idx, detents), t0 }); } setIndex(wrapIndex(k, n, loop)); kick(); }; const stopMotion = () => { velRef.current = 0; springTarget.current = null; tween.current = null; }; const startSpring = (target: number, v0: number) => { springTarget.current = target; springState.current = { x: posRef.current, v: v0 }; }; const frame = (dt: number) => { const now = performance.now(); let busy = false; // Attract: flick every few seconds while nobody touches the wheel. Alternates direction. if (attractOn && !drag.current) { if (inputSeen.current) { inputSeen.current = false; idleFor.current = 0; } else { idleFor.current += dt; } if ( idleFor.current >= FLICK_EVERY && !tween.current && springTarget.current === null && velRef.current === 0 ) { idleFor.current = 0; velRef.current = flickDir.current * FLICK_SPEED; flickDir.current = -flickDir.current; } busy = true; } if (drag.current) { busy = true; } else if (tween.current) { const tw = tween.current; const pr = Math.min(1, (now - tw.t0) / TWEEN_MS); posRef.current = tw.from + (tw.to - tw.from) * easeOut(pr); if (pr >= 1) { posRef.current = tw.to; tween.current = null; } busy = true; } else if (springTarget.current !== null) { const target = springTarget.current; const s = springState.current; stepSpring(s, target, springs.settle, dt); posRef.current = s.x; if (Math.abs(s.x - target) < 1e-3 && Math.abs(s.v) < 1e-3) { posRef.current = target; springTarget.current = null; s.v = 0; } busy = true; } else if (velRef.current !== 0) { const v = velRef.current; posRef.current += v * dt; velRef.current = v * Math.pow(inertia, dt * 60); const outside = !loop && n > 0 && (posRef.current < 0 || posRef.current > n - 1); if (outside) { // Past an end without loop: spring back to the end. velRef.current = 0; startSpring(restStep(Math.round(posRef.current), n, loop), v); } else if (Math.abs(velRef.current) < SNAP_SPEED) { // Slow enough: settle on the nearest detent. velRef.current = 0; startSpring(restStep(Math.round(posRef.current), n, loop), 0); } busy = true; } if (flashes.current.length > 0) { const keep: { tick: number; t0: number }[] = []; for (const f of flashes.current) { const pr = (now - f.t0) / FLASH_MS; const el = tickEls.current[f.tick]; if (pr >= 1) { if (el) el.style.transform = ""; continue; } // Ticks rest at full opacity, so the flash is a pulse: the tick grows from 6px to 10px and back over 160ms. // This deliberately replaces the plan's opacity flash, which dipped the tick below its resting opacity. if (el) el.style.transform = `scaleY(${(1 + 0.67 * Math.sin(Math.PI * pr)).toFixed(3)})`; keep.push(f); } flashes.current = keep; busy = true; } paint(); if (!tween.current && !drag.current) { reportTo(restStep(Math.round(posRef.current), n, loop)); } return busy; }; const { wake } = useVisibleLoop(rootEl, frame); useEffect(() => { wakeRef.current = wake; }, [wake]); // Keep the DOM transforms in step with the latest render (list, notch). useEffect(() => { paint(); }); // The wheel listens natively, non-passive, so it can stop page scroll while the pointer is over it. useEffect(() => { wheelHandler.current = (e: WheelEvent) => { if (n === 0) return; e.preventDefault(); inputSeen.current = true; tween.current = null; springTarget.current = null; velRef.current = 0; posRef.current += e.deltaY / WHEEL_PX_PER_ITEM; paint(); reportTo(restStep(Math.round(posRef.current), n, loop)); if (wheelSnap.current !== null) window.clearTimeout(wheelSnap.current); wheelSnap.current = window.setTimeout(() => { wheelSnap.current = null; const target = restStep(Math.round(posRef.current), n, loop); if (reduced) { posRef.current = target; paint(); return; } startSpring(target, 0); kick(); }, WHEEL_SNAP_DELAY); }; }); useEffect(() => { const el = wheelEl.current; if (!el) return; const onWheel = (e: WheelEvent) => wheelHandler.current(e); el.addEventListener("wheel", onWheel, { passive: false }); return () => { el.removeEventListener("wheel", onWheel); if (wheelSnap.current !== null) window.clearTimeout(wheelSnap.current); }; }, []); // Controlled value: jump to it when the parent changes it and the user is not dragging. useEffect(() => { if (value === undefined || n === 0 || drag.current) return; const cur = wrapIndex(lastStepRef.current, n, loop); const want = wrapIndex(value, n, loop); if (cur === want) return; let target = want; if (loop) { let d = mod(want - cur, n); if (d > n / 2) d -= n; target = lastStepRef.current + d; } velRef.current = 0; springTarget.current = null; tween.current = null; posRef.current = target; lastStepRef.current = target; paint(); kick(); }, [value, n, loop, paint, kick]); const selectCurrent = () => { if (n === 0) return; inputSeen.current = true; const idx = wrapIndex(lastStepRef.current, n, loop); onSelect?.(items[idx], idx); }; const onWheelPointerDown = (e: PointerEvent) => { if (n === 0 || e.button !== 0) return; // The one measurement on the gesture path. Read once per press, never in pointermove or rAF. const rect = e.currentTarget.getBoundingClientRect(); const cx = rect.left + rect.width / 2; const cy = rect.top + rect.height / 2; if (Math.hypot(e.clientX - cx, e.clientY - cy) > rect.width / 2) return; e.currentTarget.setPointerCapture(e.pointerId); e.currentTarget.focus({ preventScroll: true }); inputSeen.current = true; stopMotion(); drag.current = { cx, cy, last: pointerAngle(e.clientX, e.clientY, cx, cy), samples: [{ t: performance.now(), p: posRef.current }], }; kick(); }; const onWheelPointerMove = (e: PointerEvent) => { const d = drag.current; if (!d) return; const ang = pointerAngle(e.clientX, e.clientY, d.cx, d.cy); let delta = ang - d.last; if (delta > 180) delta -= 360; else if (delta < -180) delta += 360; d.last = ang; const items = delta / step; const outside = !loop && n > 0 && (posRef.current < 0 || posRef.current > n - 1); posRef.current += outside ? items * RUBBER : items; const t = performance.now(); d.samples.push({ t, p: posRef.current }); while (d.samples.length > 2 && t - d.samples[0].t > SAMPLE_KEEP_MS) d.samples.shift(); paint(); reportTo(restStep(Math.round(posRef.current), n, loop)); }; const onWheelPointerEnd = (e: PointerEvent) => { const d = drag.current; if (!d) return; drag.current = null; if (e.currentTarget.hasPointerCapture(e.pointerId)) { e.currentTarget.releasePointerCapture(e.pointerId); } const t = performance.now(); d.samples.push({ t, p: posRef.current }); const recent = d.samples.filter((s) => t - s.t <= RELEASE_WINDOW_MS); let v = 0; if (recent.length >= 2) { const a = recent[0]; const b = recent[recent.length - 1]; const span = (b.t - a.t) / 1000; if (span > 0) v = (b.p - a.p) / span; } v = clamp(v, -MAX_FLICK, MAX_FLICK); const pos = posRef.current; const outside = !loop && n > 0 && (pos < 0 || pos > n - 1); const target = restStep(Math.round(pos), n, loop); if (reduced) { velRef.current = 0; posRef.current = target; paint(); reportTo(target); } else if (!outside && Math.abs(v) >= SNAP_SPEED) { velRef.current = v; springTarget.current = null; } else { velRef.current = 0; startSpring(target, 0); } kick(); }; const onWheelKeyDown = (e: KeyboardEvent) => { if (n === 0) return; const cur = lastStepRef.current; let target: number; switch (e.key) { case "ArrowUp": case "ArrowLeft": target = cur - 1; break; case "ArrowDown": case "ArrowRight": target = cur + 1; break; case "PageUp": target = cur - 5; break; case "PageDown": target = cur + 5; break; case "Home": target = loop ? cur - mod(cur, n) : 0; break; case "End": target = loop ? cur + (n - 1 - mod(cur, n)) : n - 1; break; case "Enter": case " ": e.preventDefault(); selectCurrent(); return; default: return; } e.preventDefault(); inputSeen.current = true; const dest = restStep(target, n, loop); stopMotion(); if (dest === cur) return; if (reduced) { posRef.current = dest; } else { tween.current = { from: posRef.current, to: dest, t0: performance.now() }; } reportTo(dest); }; const shown = n === 0 ? 0 : wrapIndex(isControlled ? value : index, n, loop); const current = n === 0 ? undefined : items[shown]; const surface = tok("surface", p.surface); const border = tok("border", p.border); const borderStrong = tok("border-strong", p.borderStrong); const text = tok("text", p.text); const faint = tok("text-faint", p.textFaint); const muted = tok("text-muted", p.textMuted); const soft = tok("text-soft", p.textSoft); const medium = tok("text-medium", p.textMedium); const accent = tok("accent", p.accent); const faceCentre = dark ? p.raised : p.surface; const faceEdge = dark ? "#0d0d0d" : p.raised; const renderRows = (inverted: boolean) => Array.from({ length: rowCount }, (_, k) => { const idx = k % n; const copy = Math.floor(k / n); const isMid = copy === mid; const item = items[idx]; return ( ); }); const display = stacked && (