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:T61bc,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type RefObject, } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { LiveRegion } from "@/components/bjork-ui/_core/a11y"; import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; export interface MinimapMark { at: number; label?: string; level?: 1 | 2 | 3 | 4; } export interface MinimapScrollbarProps { target: RefObject; selector?: string; marks?: MinimapMark[]; side?: "right" | "left"; width?: number; showLabels?: boolean; showBlocks?: boolean; lens?: boolean; onJump?: (mark: MinimapMark) => void; ariaLabel?: string; tone?: BjorkTone; attract?: boolean; className?: string; /** Document fraction (0-1) to pin the hover lens and label to. For previews and tests. */ debugHoverAt?: number; } interface Mark { at: number; label: string; level: 1 | 2 | 3 | 4; block: boolean; /** Section number shown in the label pill, "01".."99". Only set on headings. */ num?: string; } interface DomMarks { headings: Mark[]; blocks: Mark[]; } interface DragState { id: number; startY: number; startScroll: number; trackH: number; scrollH: number; } const DEFAULT_SELECTOR = "h2, h3"; const BLOCK_SELECTOR = "p, pre, figure, ul, ol"; const HEADING_LEVELS: Record = { H1: 1, H2: 1, H3: 2, H4: 3, H5: 3, H6: 3 }; const TICK_SIZE: Record = { 1: { w: 16, h: 1.5 }, 2: { w: 10, h: 1 }, 3: { w: 6, h: 1 }, 4: { w: 4, h: 1 }, }; const COARSE_TRACK_WIDTH = 24; const LENS_RANGE = 48; const LENS_SIGMA = 18; const LENS_GAIN = 0.6; const LABEL_FLASH_MS = 900; const LABEL_FADE_MS = 120; const MUTATION_DEBOUNCE_MS = 150; const ATTRACT_SPEED = 40; const ATTRACT_PAUSE_MS = 1000; const ATTRACT_IDLE_RESUME_MS = 4000; const WINDOW_FILL = { dark: "rgba(237,237,237,0.04)", light: "rgba(23,23,23,0.04)" } as const; // bjorkMenu surface and shadow, from the menu tokens in app/globals.css. const MENU = { dark: { background: "rgba(18, 18, 18, 0.98)", shadow: "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", }, light: { background: "rgba(255, 252, 246, 0.98)", shadow: "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)", }, } as const; type Palette = (typeof BJORK_PALETTE)[BjorkTone]; function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function clamp01(value: number) { return clamp(value, 0, 1); } function cleanText(value: string | null | undefined) { return (value ?? "").replace(/\s+/g, " ").trim(); } // offsetTop is relative to the offsetParent. When the target is not positioned, fall back to rects. function offsetWithin(el: HTMLElement, container: HTMLElement) { if (el.offsetParent === container) return el.offsetTop; return el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; } function readDomMarks(container: HTMLElement, headingSelector: string | null, showBlocks: boolean): DomMarks { const scrollH = Math.max(container.scrollHeight, 1); const headings: Mark[] = headingSelector ? Array.from(container.querySelectorAll(headingSelector)).map((el) => ({ at: clamp01(offsetWithin(el, container) / scrollH), label: cleanText(el.textContent), level: HEADING_LEVELS[el.tagName] ?? 2, block: false, })) : []; const blocks: Mark[] = showBlocks ? Array.from(container.querySelectorAll(BLOCK_SELECTOR)).map((el) => ({ at: clamp01(offsetWithin(el, container) / scrollH), label: cleanText(el.textContent), level: 4, block: true, })) : []; return { headings, blocks }; } function sameMarks(a: Mark[], b: Mark[]) { if (a.length !== b.length) return false; for (let i = 0; i < a.length; i++) { if (a[i].at !== b[i].at || a[i].label !== b[i].label || a[i].level !== b[i].level) return false; } return true; } function nearestIndex(list: Mark[], at: number) { let best = -1; let dist = Infinity; list.forEach((mark, index) => { const d = Math.abs(mark.at - at); if (d < dist) { dist = d; best = index; } }); return best; } function tickColor(palette: Palette, level: Mark["level"]) { if (level === 1) return palette.textMuted; if (level === 4) return palette.hair; return palette.textSoft; } function subscribeMediaQuery(query: string) { return (onChange: () => void) => { const list = window.matchMedia(query); list.addEventListener("change", onChange); return () => list.removeEventListener("change", onChange); }; } function useMediaQuery(query: string) { return useSyncExternalStore( subscribeMediaQuery(query), () => window.matchMedia(query).matches, () => false, ); } export function MinimapScrollbar({ target, selector, marks, side = "right", width = 28, showLabels = true, showBlocks = true, lens = true, onJump, ariaLabel = "Document position", tone, attract = false, className, debugHoverAt, }: MinimapScrollbarProps) { const resolvedTone = useBjorkTone(tone); const palette = BJORK_PALETTE[resolvedTone]; const menu = MENU[resolvedTone]; const reducedMotion = useReducedMotion() ?? false; const coarse = useMediaQuery("(pointer: coarse)"); const trackWidth = coarse ? Math.min(width, COARSE_TRACK_WIDTH) : width; const lensOn = lens && !coarse && !reducedMotion; const reactId = useId(); const contentIdBase = reactId.replace(/[^a-zA-Z0-9_-]/g, ""); const hasMarksProp = marks !== undefined; const [dom, setDom] = useState({ headings: [], blocks: [] }); const [labelIdx, setLabelIdx] = useState(-1); const [labelOpen, setLabelOpen] = useState(false); const [announcement, setAnnouncement] = useState(""); const trackRef = useRef(null); const windowRef = useRef(null); const lineRef = useRef(null); const pillRef = useRef(null); const tickRefs = useRef<(HTMLDivElement | null)[]>([]); const trackHRef = useRef(0); const marksRef = useRef([]); // 0 = outside the viewport, 1 = inside it, 2 = unknown (forces a repaint of every tick). const litRef = useRef(new Uint8Array(0)); const rafRef = useRef(0); const dragRef = useRef(null); const pillYRef = useRef(null); const lensYRef = useRef(null); const flashTimerRef = useRef(0); const attractStateRef = useRef({ started: false, pos: 0, dir: 1 as 1 | -1, hold: 0, wrote: 0 }); const attractUserRef = useRef(false); const attractIdleTimerRef = useRef(0); const rectRef = useRef(null); // The scroll container, read from the target prop after each commit. Callbacks use this ref, not the prop. const containerRef = useRef(null); useLayoutEffect(() => { containerRef.current = target.current; }); const headings = useMemo(() => { const base: Mark[] = hasMarksProp ? marks.map((m) => ({ at: clamp01(m.at), label: cleanText(m.label), level: m.level ?? 1, block: false })) : dom.headings; const sorted = [...base].sort((a, b) => a.at - b.at); const numbered: Mark[] = []; let section = 0; for (const mark of sorted) { if (mark.level === 1) section += 1; numbered.push({ ...mark, num: section ? String(section).padStart(2, "0") : "" }); } return numbered; }, [hasMarksProp, marks, dom.headings]); const allMarks = useMemo( () => [...headings, ...(showBlocks ? dom.blocks : [])].sort((a, b) => a.at - b.at), [headings, dom.blocks, showBlocks], ); // A debug pose pins the label to a fixed position; otherwise it follows hover or keyboard flashes. const shownIdx = debugHoverAt != null ? nearestIndex(headings, clamp01(debugHoverAt)) : labelIdx; const shownOpen = debugHoverAt != null ? true : labelOpen; const pillMark = showLabels && shownIdx >= 0 ? headings[shownIdx] : undefined; // Scroll sync. Reads scroll metrics once, then writes transforms only. const sync = useCallback(() => { const t = containerRef.current; const win = windowRef.current; const line = lineRef.current; const track = trackRef.current; if (!t) return; const scrollTop = t.scrollTop; const scrollH = Math.max(t.scrollHeight, 1); const clientH = t.clientHeight; const maxScroll = scrollH - clientH; const overflow = maxScroll > 1; const trackH = trackHRef.current; const top = overflow ? scrollTop / scrollH : 0; const size = overflow ? clientH / scrollH : 1; if (win) { win.style.transform = `translateY(${top * trackH}px)`; win.style.height = `${size * trackH}px`; } if (line) { line.style.transform = `translateY(${((scrollTop + clientH / 2) / scrollH) * trackH}px)`; } const vTop = scrollTop / scrollH; const vBottom = (scrollTop + clientH) / scrollH; const marksNow = marksRef.current; const lit = litRef.current; const ticks = tickRefs.current; for (let i = 0; i < marksNow.length; i++) { const on = marksNow[i].at >= vTop && marksNow[i].at <= vBottom ? 1 : 0; if (lit[i] === on) continue; lit[i] = on; const el = ticks[i]; if (el) el.style.backgroundColor = on ? palette.text : tickColor(palette, marksNow[i].level); } if (track) { const value = overflow ? Math.round(clamp01(scrollTop / maxScroll) * 100) : 0; track.setAttribute("aria-valuenow", String(value)); } }, [palette]); const scheduleSync = useCallback(() => { if (rafRef.current) return; rafRef.current = requestAnimationFrame(() => { rafRef.current = 0; sync(); }); }, [sync]); // Re-reads marks and track size from the DOM. Only called on mount, resize and DOM mutation, never on scroll. const measure = useCallback(() => { const t = containerRef.current; const track = trackRef.current; if (!t) return; if (track) trackHRef.current = track.clientHeight; rectRef.current = null; const next = readDomMarks(t, hasMarksProp ? null : selector ?? DEFAULT_SELECTOR, showBlocks); setDom((prev) => sameMarks(prev.headings, next.headings) && sameMarks(prev.blocks, next.blocks) ? prev : next, ); sync(); }, [selector, hasMarksProp, showBlocks, sync]); // Writes the lens scale and the label pill position. const applyHover = useCallback(() => { const trackH = trackHRef.current; const pill = pillRef.current; const pillY = debugHoverAt != null ? clamp01(debugHoverAt) * trackH : pillYRef.current; if (pill && pillY != null) pill.style.transform = `translateY(${pillY}px)`; const lensY = debugHoverAt != null ? clamp01(debugHoverAt) * trackH : lensOn ? lensYRef.current : null; const marksNow = marksRef.current; const ticks = tickRefs.current; for (let i = 0; i < marksNow.length; i++) { const el = ticks[i]; if (!el) continue; let scale = 1; if (lensY != null) { const dy = lensY - marksNow[i].at * trackH; if (Math.abs(dy) < LENS_RANGE) { scale = 1 + LENS_GAIN * Math.exp(-(dy * dy) / (2 * LENS_SIGMA * LENS_SIGMA)); } } el.style.transform = scale === 1 ? "" : `scaleX(${scale.toFixed(3)})`; } }, [debugHoverAt, lensOn]); // Marks or tone changed: refresh the tick arrays and repaint every tick. useLayoutEffect(() => { marksRef.current = allMarks; tickRefs.current.length = allMarks.length; litRef.current = new Uint8Array(allMarks.length).fill(2); sync(); applyHover(); }, [allMarks, resolvedTone, sync, applyHover]); // The pill mounts after the state change commits, so position it after commit. useLayoutEffect(() => { applyHover(); }, [applyHover, shownIdx, shownOpen]); // Target wiring: scroll listener, observers and aria-controls. useEffect(() => { const t = containerRef.current; const track = trackRef.current; if (!t || !track) return; if (!t.id) t.id = `${contentIdBase}-content`; track.setAttribute("aria-controls", t.id); t.addEventListener("scroll", scheduleSync, { passive: true }); // ResizeObserver fires once on observe, which covers the initial measure. const ro = new ResizeObserver(() => { trackHRef.current = track.clientHeight || trackHRef.current; measure(); }); ro.observe(track); ro.observe(t); const content = t.firstElementChild; if (content instanceof HTMLElement) ro.observe(content); let mutationTimer = 0; const mo = new MutationObserver(() => { window.clearTimeout(mutationTimer); mutationTimer = window.setTimeout(measure, MUTATION_DEBOUNCE_MS); }); mo.observe(t, { childList: true, subtree: true }); return () => { t.removeEventListener("scroll", scheduleSync); ro.disconnect(); mo.disconnect(); window.clearTimeout(mutationTimer); cancelAnimationFrame(rafRef.current); rafRef.current = 0; }; }, [contentIdBase, measure, scheduleSync]); // Attract: ping-pong the target at a fixed speed. useVisibleLoop pauses it offscreen. // User input holds it still; it resumes after ATTRACT_IDLE_RESUME_MS without input. const attractOn = attract && !reducedMotion; const attractWakeRef = useRef<() => void>(() => {}); const noteAttractInput = useCallback(() => { if (!attractOn) return; attractUserRef.current = true; window.clearTimeout(attractIdleTimerRef.current); attractIdleTimerRef.current = window.setTimeout(() => { const el = containerRef.current; if (el) { attractStateRef.current = { started: true, pos: el.scrollTop, dir: attractStateRef.current.dir, hold: 0, wrote: el.scrollTop, }; } attractUserRef.current = false; attractWakeRef.current(); }, ATTRACT_IDLE_RESUME_MS); }, [attractOn]); const attractLoop = useVisibleLoop( trackRef, (dt) => { const el = containerRef.current; if (!el || attractUserRef.current) return false; const maxScroll = el.scrollHeight - el.clientHeight; if (maxScroll <= 0) return false; const s = attractStateRef.current; if (!s.started) { s.started = true; s.pos = s.wrote = el.scrollTop; } else if (Math.abs(el.scrollTop - s.wrote) > 1.5) { // Moved by something other than attract (native scrollbar, keys, touch). noteAttractInput(); return false; } if (s.hold > 0) { s.hold -= dt; } else { s.pos += s.dir * ATTRACT_SPEED * dt; if (s.pos >= maxScroll) { s.pos = maxScroll; s.dir = -1; s.hold = ATTRACT_PAUSE_MS / 1000; } else if (s.pos <= 0) { s.pos = 0; s.dir = 1; s.hold = ATTRACT_PAUSE_MS / 1000; } s.wrote = s.pos; el.scrollTop = s.pos; } return true; }, { enabled: attractOn }, ); useEffect(() => { attractWakeRef.current = attractLoop.wake; }, [attractLoop.wake]); useEffect(() => { const t = containerRef.current; if (!attractOn || !t) return; const onUser = () => noteAttractInput(); t.addEventListener("wheel", onUser, { passive: true }); t.addEventListener("touchstart", onUser, { passive: true }); t.addEventListener("pointerdown", onUser); return () => { t.removeEventListener("wheel", onUser); t.removeEventListener("touchstart", onUser); t.removeEventListener("pointerdown", onUser); }; }, [attractOn, noteAttractInput]); useEffect(() => { return () => { window.clearTimeout(flashTimerRef.current); window.clearTimeout(attractIdleTimerRef.current); }; }, []); const pointAt = (y: number, withLens: boolean) => { const trackH = trackHRef.current || 1; pillYRef.current = y; lensYRef.current = withLens ? y : null; if (showLabels) { const idx = nearestIndex(headings, clamp01(y / trackH)); setLabelIdx(idx); setLabelOpen(idx >= 0); } applyHover(); }; const clearHover = () => { if (debugHoverAt != null) return; lensYRef.current = null; setLabelOpen(false); applyHover(); }; const flashHeading = (mark: Mark) => { const trackH = trackHRef.current || 1; setAnnouncement(`Section: ${mark.label}`); const idx = headings.indexOf(mark); if (idx < 0) return; pillYRef.current = mark.at * trackH; lensYRef.current = null; setLabelIdx(idx); setLabelOpen(true); window.clearTimeout(flashTimerRef.current); flashTimerRef.current = window.setTimeout(() => setLabelOpen(false), LABEL_FLASH_MS); applyHover(); }; const onPointerDown = (event: ReactPointerEvent) => { const t = containerRef.current; const track = trackRef.current; if (!t || !track || event.button !== 0) return; noteAttractInput(); const rect = track.getBoundingClientRect(); rectRef.current = rect; const trackH = rect.height || trackHRef.current || 1; const y = clamp(event.clientY - rect.top, 0, trackH); const maxScroll = Math.max(0, t.scrollHeight - t.clientHeight); track.setPointerCapture(event.pointerId); if (maxScroll > 1 && windowRef.current?.contains(event.target as Node)) { dragRef.current = { id: event.pointerId, startY: event.clientY, startScroll: t.scrollTop, trackH, scrollH: t.scrollHeight, }; pointAt(y, false); return; } // Click on the rail: centre the clicked fraction of the document. const fraction = y / trackH; const top = clamp(fraction * t.scrollHeight - t.clientHeight / 2, 0, maxScroll); t.scrollTo({ top, behavior: reducedMotion ? "auto" : "smooth" }); const mark = allMarks[nearestIndex(allMarks, fraction)]; if (!mark) return; onJump?.({ at: mark.at, label: mark.label, level: mark.level }); if (!mark.block) flashHeading(mark); }; const onPointerMove = (event: ReactPointerEvent) => { const t = containerRef.current; const track = trackRef.current; if (!t || !track) return; // Uses the rect cached on enter or down, so pointer moves do no layout reads. const rect = rectRef.current ?? (rectRef.current = track.getBoundingClientRect()); const y = clamp(event.clientY - rect.top, 0, rect.height); const drag = dragRef.current; if (drag && drag.id === event.pointerId) { const maxScroll = Math.max(0, t.scrollHeight - t.clientHeight); t.scrollTop = clamp( drag.startScroll + ((event.clientY - drag.startY) * drag.scrollH) / drag.trackH, 0, maxScroll, ); pointAt(y, false); return; } if (event.pointerType === "touch" || drag) return; pointAt(y, lensOn); }; const onPointerEnd = (event: ReactPointerEvent) => { const drag = dragRef.current; if (drag && drag.id === event.pointerId) dragRef.current = null; if (event.pointerType !== "mouse") clearHover(); }; const onPointerEnter = (event: ReactPointerEvent) => { rectRef.current = event.currentTarget.getBoundingClientRect(); }; const onPointerLeave = () => { if (dragRef.current) return; rectRef.current = null; clearHover(); }; const onKeyDown = (event: ReactKeyboardEvent) => { const t = containerRef.current; if (!t) return; noteAttractInput(); const scrollH = Math.max(t.scrollHeight, 1); const maxScroll = Math.max(0, t.scrollHeight - t.clientHeight); const current = t.scrollTop; if (event.key === "[" || event.key === "]") { event.preventDefault(); const position = current / scrollH; const eps = 0.5 / scrollH; const next = event.key === "]" ? headings.find((h) => h.at > position + eps) : [...headings].reverse().find((h) => h.at < position - eps); if (!next) return; t.scrollTop = clamp(next.at * scrollH, 0, maxScroll); flashHeading(next); return; } let to: number; switch (event.key) { case "ArrowUp": to = current - 0.05 * scrollH; break; case "ArrowDown": to = current + 0.05 * scrollH; break; case "PageUp": to = current - t.clientHeight; break; case "PageDown": to = current + t.clientHeight; break; case "Home": to = 0; break; case "End": to = maxScroll; break; default: return; } event.preventDefault(); // Keyboard repeats stay instant: no smooth scroll. t.scrollTop = clamp(to, 0, maxScroll); }; const edge: CSSProperties = side === "right" ? { right: 0, transformOrigin: "left center" } : { left: 0, transformOrigin: "right center" }; const pillEdge: CSSProperties = side === "right" ? { right: "calc(100% + 8px)" } : { left: "calc(100% + 8px)" }; return ( <>

{allMarks.map((mark, index) => { const size = TICK_SIZE[mark.level]; return (

{ tickRefs.current[index] = el; }} aria-hidden className="pointer-events-none absolute -translate-y-1/2 transition-transform duration-[120ms] ease-out motion-reduce:transition-none" style={{ ...edge, top: `${mark.at * 100}%`, width: size.w, height: size.h, backgroundColor: tickColor(palette, mark.level), }} /> ); })}

{pillMark ? (

{pillMark.num ? ( {pillMark.num} ) : null} {pillMark.label}

) : null}

); } 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: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/navigation/minimap-scrollbar.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/navigation/minimap-scrollbar.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/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/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/loop.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"}],"className":"h-[70svh] min-h-80"}]