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:T8b01,"use client"; // Few's bullet graph: one row per KPI, the actual value as a thin accent bar from zero over two to // four neutral qualitative bands (stronger = poorer), the target as a perpendicular tick, and an // optional hatched projection. The honest replacement for a row of gauges. import { useEffect, useMemo, useRef, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react"; import { cn } from "@/lib/utils"; import type { BjorkTone } from "@/components/bjork-ui/_core/palette"; import { useChartCanvas, easeOut, hatchPattern, writeLabels, type PlacedLabel } from "@/components/bjork-ui/charts/_kit/canvas"; import { useChartTheme, chartFocusRing, ChartTable, LabelPool, HoverTooltip, ChartAnnouncer, type TooltipHandle, type AnnouncerHandle, type TooltipContent, } from "@/components/bjork-ui/charts/_kit/chrome"; import { clamp, crisp, damp, niceStep, niceTicks, withAlpha, formatCompact, formatPercent, formatSigned } from "@/components/bjork-ui/charts/_kit/scale"; /** Which direction is good. "lower" flips the band order and the status test (latency, churn). */ export type BulletDirection = "higher" | "lower"; /** * - `"row"`: every row on its own scale from zero (mixed units). * - `"target"`: every row as a share of its own target on one common axis, so targets line up at * 100%. Needs a positive target per row. * - `"shared"`: one raw domain for every row. Only meaningful when rows share a unit. */ export type BulletScale = "row" | "target" | "shared"; export type BulletStatus = "met" | "near" | "off" | "none"; export interface BulletRow { id: string; label: string; /** A short qualifier under the label (period, unit, owner). */ sublabel?: string; /** Actual value. Non-finite means no data yet: no bar, "–" in the value column. */ value: number; target: number; /** * Ascending upper bounds of the qualitative bands, in value units, starting from zero. One bound * per band; the last band always extends to the end of the scale. With `better: "higher"` the * first band is the poorest, with `"lower"` the first band is the best. Two to four bands read best. */ ranges?: number[]; /** End of the scale. Defaults to the largest of the last range, value, target and projection, rounded up. */ max?: number; /** Where the value is heading by period end, drawn as a hatched extension. Status uses it when set. */ projected?: number | null; /** Default "higher". */ better?: BulletDirection; /** Per-row formatter (overrides `formatValue`). */ format?: (v: number) => string; } export interface BulletChartProps { rows: BulletRow[]; /** Default "row". See `BulletScale`. */ scale?: BulletScale; /** Shared formatter for values, targets and ticks. Rows can override with `format`. */ formatValue?: (v: number) => string; /** * The right-column comparison. "percent" reads "92% of target", "delta" a signed gap ("+12 ms vs * target"). "auto" (default) uses percent for higher-is-better and delta for lower-is-better rows. */ attainment?: "auto" | "percent" | "delta"; /** Fraction of the target that still counts as "near" (warning) rather than "off". Default 0.05. */ tolerance?: number; /** Band names from poorest to best, e.g. ["Poor", "Fair", "Good"]. Defaults by band count. */ bandLabels?: string[]; /** Posed or controlled active row. `null` clears; `undefined` leaves hover to the pointer. */ activeId?: string | null; onActiveChange?: (id: string | null) => void; /** Row height in px before the narrow label line. Defaults to 44 per-row scale, 34 on a common axis. */ rowHeight?: number; ariaLabel?: string; tone?: BjorkTone; className?: string; } const NARROW = 480; const TOP_PAD = 4; const HEAD_H = 18; // Inset for the label and value columns, so text never sits flush against the focus ring. const PAD_X = 8; const BAND_H = 16; const BAR_H = 6; const TARGET_H = 12; const AXIS_H = 26; const ROW_H = 44; const ROW_H_COMMON = 34; const GROW_MS = 620; const STAGGER_MS = 70; const TAU = 0.14; const ICON_W = 14; // Geist Mono advances are 0.6em; a hair over for safety. const MONO = 0.62; const defaultFormatValue = (v: number) => formatCompact(v, 1); const DEFAULT_BANDS: Record = { 1: ["Range"], 2: ["Poor", "Good"], 3: ["Poor", "Fair", "Good"], 4: ["Poor", "Fair", "Good", "Excellent"], }; // Band strength from poorest to best (alpha of the ink on the stage). const BAND_ALPHA: Record = { dark: [0.24, 0.075], light: [0.17, 0.055] }; const STATUS_WORD: Record = { met: ["On target", "On pace"], near: ["Near target", "At risk"], off: ["Off target", "Off pace"], none: ["No data", "No data"], }; const STATUS_COLOR: Record = { met: "var(--bjork-success)", near: "var(--bjork-warning)", off: "var(--bjork-error)", none: "var(--bjork-text-soft)", }; interface Model { id: string; label: string; sublabel?: string; fmt: (v: number) => string; better: BulletDirection; missing: boolean; value: number; target: number; projected: number | null; /** Display-space targets: [value, projected, target, lo, hi, ...inner band edges]. */ goal: number[]; bands: number; bandNames: string[]; bandIndex: number; status: BulletStatus; statusWord: string; valueText: string; attNum: string; attTail: string; tickFmt: (v: number) => string; } function statusOf(better: BulletDirection, basis: number, target: number, tol: number): BulletStatus { if (!Number.isFinite(basis) || !Number.isFinite(target)) return "none"; const slack = Math.abs(target) * tol; if (better === "higher") return basis >= target ? "met" : basis >= target - slack ? "near" : "off"; return basis <= target ? "met" : basis <= target + slack ? "near" : "off"; } function niceCeil(v: number): number { if (!(v > 0)) return 1; const step = niceStep(v, 5); return Math.ceil(v / step - 1e-9) * step; } function rawDomain(r: BulletRow, ranges: number[]): [number, number] { const fin = (x: number | null | undefined) => (typeof x === "number" && Number.isFinite(x) ? x : 0); const v = fin(r.value); const t = fin(r.target); const pr = fin(r.projected); const last = ranges.length ? ranges[ranges.length - 1] : 0; let lo = Math.min(0, v, t, pr); if (lo < 0) lo = -niceCeil(-lo); let hi: number; if (typeof r.max === "number" && Number.isFinite(r.max) && r.max > lo) hi = r.max; else { const top = Math.max(last, v, t, pr); hi = top > last || !ranges.length ? niceCeil(top) : last; } if (!(hi > lo)) hi = lo + 1; return [lo, hi]; } function buildModel( rows: BulletRow[], scale: BulletScale, formatValue: (v: number) => string, attainment: "auto" | "percent" | "delta", tol: number, bandLabels: string[] | undefined, ): Model[] { const prepped = rows.map((r) => { const ranges = (r.ranges ?? []).filter((x) => Number.isFinite(x)).sort((a, b) => a - b); return { r, ranges, dom: rawDomain(r, ranges) }; }); // Common axes: one domain for every row, in display units. let common: [number, number] | null = null; const kOf = (r: BulletRow, dom: [number, number]) => (scale === "target" ? (r.target > 0 ? 1 / r.target : 1 / dom[1]) : 1); if (scale !== "row" && prepped.length) { let lo = 0; let hi = 0; for (const { r, dom } of prepped) { const k = kOf(r, dom); lo = Math.min(lo, dom[0] * k); hi = Math.max(hi, dom[1] * k); } if (scale === "target") { // Round the common % axis to a clean step. const step = niceStep(hi - lo, 5); hi = Math.ceil(hi / step - 1e-9) * step; lo = Math.floor(lo / step + 1e-9) * step; } common = [lo, hi > lo ? hi : lo + 1]; } return prepped.map(({ r, ranges, dom }) => { const fmt = r.format ?? formatValue; const better = r.better ?? "higher"; const missing = !Number.isFinite(r.value); const value = missing ? 0 : r.value; const projected = typeof r.projected === "number" && Number.isFinite(r.projected) ? r.projected : null; const k = kOf(r, dom); const [lo, hi] = common ?? dom; // Bands: one per range bound; the last always runs to the end of the scale. const bands = Math.max(1, ranges.length); const inner = ranges.slice(0, bands - 1).map((x) => clamp(x * k, lo, hi)); const names = bandLabels && bandLabels.length >= bands ? bandLabels : (DEFAULT_BANDS[bands] ?? Array.from({ length: bands }, (_, i) => `Band ${i + 1}`)); // Names are poorest-to-best; position k from the left maps through the direction. const bandNames = Array.from({ length: bands }, (_, i) => names[better === "higher" ? i : bands - 1 - i]); let bandIndex = bands - 1; for (let i = 0; i < bands - 1; i++) { if (value < ranges[i]) { bandIndex = i; break; } } const status = missing ? "none" : statusOf(better, projected ?? value, r.target, tol); const mode = attainment === "auto" ? (better === "higher" ? "percent" : "delta") : attainment; let attNum = "–"; let attTail = ""; if (!missing && Number.isFinite(r.target)) { if (mode === "percent") { attNum = r.target !== 0 ? formatPercent(value / r.target, 0) : "–"; attTail = " of target"; } else { attNum = formatSigned(value - r.target, fmt); attTail = " vs target"; } } const tickFmt = scale === "target" ? (v: number) => formatPercent(v, 0) : scale === "shared" ? formatValue : fmt; return { id: r.id, label: r.label, sublabel: r.sublabel, fmt, better, missing, value, target: r.target, projected, goal: [value * k, (projected ?? value) * k, (Number.isFinite(r.target) ? r.target : 0) * k, lo, hi, ...inner], bands, bandNames, bandIndex, status, statusWord: STATUS_WORD[status][projected !== null ? 1 : 0], valueText: missing ? "–" : fmt(value), attNum, attTail, tickFmt, }; }); } // Horizontal bar with a rounded data end and a square baseline at `x0`. function hBarPath(ctx: CanvasRenderingContext2D, x0: number, x1: number, y: number, h: number, r: number) { const left = Math.min(x0, x1); const w = Math.abs(x1 - x0); if (w <= 0.01) return; const rr = Math.min(r, w, h / 2); if (x1 >= x0) { ctx.moveTo(left, y); ctx.lineTo(left + w - rr, y); if (rr) ctx.arcTo(left + w, y, left + w, y + rr, rr); ctx.lineTo(left + w, y + h - rr); if (rr) ctx.arcTo(left + w, y + h, left + w - rr, y + h, rr); ctx.lineTo(left, y + h); } else { ctx.moveTo(left + w, y); ctx.lineTo(left + w, y + h); ctx.lineTo(left + rr, y + h); if (rr) ctx.arcTo(left, y + h, left, y + h - rr, rr); ctx.lineTo(left, y + rr); if (rr) ctx.arcTo(left, y, left + rr, y, rr); } ctx.closePath(); } function StatusIcon({ status }: { status: BulletStatus }) { const common = { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" as const, strokeLinejoin: "round" as const }; if (status === "met") return ( ); if (status === "near") return ( ); if (status === "off") return ( ); return ( ); } interface Run { enter: number; ready: boolean; cur: Map; hover: number | null; source: "pointer" | "keyboard" | "prop" | null; labelW: number; layout: { l: number; r: number; rowH: number; head: number; bandOff: number }; domKey: string; tickCache: string[]; } export function BulletChart({ rows, scale = "row", formatValue = defaultFormatValue, attainment = "auto", tolerance = 0.05, bandLabels, activeId, onActiveChange, rowHeight, ariaLabel = "Bullet chart", tone: toneProp, className, }: BulletChartProps) { const { tone, pal, reduce, vars } = useChartTheme(toneProp); const announcer = useRef(null); const tipRef = useRef(null); const wrapperRef = useRef(null); const rectRef = useRef(null); const nameRefs = useRef<(HTMLDivElement | null)[]>([]); const valueRefs = useRef<(HTMLSpanElement | null)[]>([]); const attRefs = useRef<(HTMLSpanElement | null)[]>([]); const tickPool = useRef<(HTMLSpanElement | null)[]>([]); const model = useMemo(() => buildModel(rows, scale, formatValue, attainment, tolerance, bandLabels), [rows, scale, formatValue, attainment, tolerance, bandLabels]); const n = model.length; const common = scale !== "row"; const rowH = Math.max(common ? 24 : 38, rowHeight ?? (common ? ROW_H_COMMON : ROW_H)); // Band sits high in per-row rows (ticks go under it), centred on a common axis. const bandOff = common ? Math.round((rowH - BAND_H) / 2) : 6; const heightWide = TOP_PAD + n * rowH + (common ? AXIS_H : 0) + 2; const heightNarrow = TOP_PAD + n * (rowH + HEAD_H) + (common ? AXIS_H : 0) + 2; // Right-column budgets from the mono advance (value 12px, attainment 11px). const widths = useMemo(() => { let value = 0; let full = 0; let short = 0; for (const m of model) { value = Math.max(value, m.valueText.length * 12 * MONO); short = Math.max(short, ICON_W + m.attNum.length * 11 * MONO); full = Math.max(full, ICON_W + (m.attNum.length + m.attTail.length) * 11 * MONO); } return { right: Math.ceil(Math.max(value, full)), short: Math.ceil(short), value: Math.ceil(value) }; }, [model]); const cfg = useRef({ model, reduce, pal, tone, rowH, bandOff, common, widths }); useEffect(() => { cfg.current = { model, reduce, pal, tone, rowH, bandOff, common, widths }; }); const st = useRef({ enter: 0, ready: false, cur: new Map(), hover: null, source: null, labelW: 96, layout: { l: 0, r: 0, rowH: ROW_H, head: 0, bandOff: 6 }, domKey: "", tickCache: [], }); const { rootRef, hostRef, canvasRef, wake } = useChartCanvas(({ ctx, w, h, dt }) => { const s = st.current; const c = cfg.current; const p = c.pal; const M = c.model; const count = M.length; const narrow = w < NARROW; const head = narrow ? HEAD_H : 0; const rh = c.rowH + head; const labelW = narrow ? 0 : clamp(Math.ceil(s.labelW) + 16, 64, Math.max(64, Math.min(200, Math.round(w * 0.32)))); const rightW = (narrow ? c.widths.short : c.widths.right) + 14; const l = PAD_X + labelW; const r = Math.max(l + 40, w - PAD_X - rightW); const pw = r - l; s.layout = { l, r, rowH: rh, head, bandOff: c.bandOff }; // Damp every row toward its goal; new rows after the entrance grow from zero. let moving = false; for (const m of M) { let cur = s.cur.get(m.id); if (!cur) { cur = m.goal.slice(); if (s.ready && !c.reduce) { cur[0] = 0; cur[1] = 0; } s.cur.set(m.id, cur); } const span = Math.max(1e-9, m.goal[4] - m.goal[3]); for (let k = 0; k < m.goal.length; k++) { if (c.reduce || cur[k] === undefined) { cur[k] = m.goal[k]; continue; } cur[k] = damp(cur[k], m.goal[k], TAU, dt); if (Math.abs(cur[k] - m.goal[k]) > span * 1e-4) moving = true; else cur[k] = m.goal[k]; } cur.length = m.goal.length; } s.ready = true; const total = count * STAGGER_MS + GROW_MS; s.enter = c.reduce ? 1 : Math.min(1, s.enter + (dt * 1000) / total); const growOf = (i: number) => (s.enter >= 1 ? 1 : easeOut(clamp((s.enter * total - i * STAGGER_MS) / GROW_MS, 0, 1))); const [aStrong, aWeak] = BAND_ALPHA[c.tone]; const hatch = hatchPattern(ctx, withAlpha(p.accent, 0.85), 3, 1); const hov = s.hover; const ticks: PlacedLabel[] = []; const tickMarks: number[] = []; for (let i = 0; i < count; i++) { const m = M[i]; const v = s.cur.get(m.id)!; const lo = v[3]; const hi = v[4]; const k = pw / Math.max(1e-9, hi - lo); const xOf = (x: number) => l + (clamp(x, lo, hi) - lo) * k; const top = TOP_PAD + i * rh; const bandTop = top + head + c.bandOff; const mid = bandTop + BAND_H / 2; const g = growOf(i); const dim = hov !== null && hov !== i; ctx.globalAlpha = dim ? 0.42 : 1; // Qualitative bands: contiguous, stronger ink = poorer. for (let b = 0; b < m.bands; b++) { const e0 = b === 0 ? lo : v[5 + b - 1]; const e1 = b === m.bands - 1 ? hi : v[5 + b]; const poorRank = m.better === "higher" ? b : m.bands - 1 - b; const a = m.bands === 1 ? aWeak * 1.4 : aStrong - ((aStrong - aWeak) * poorRank) / (m.bands - 1); const x0 = Math.round(xOf(e0)); const x1 = Math.round(xOf(e1)); if (x1 - x0 <= 0) continue; ctx.fillStyle = withAlpha(p.text, a); ctx.beginPath(); if (b === m.bands - 1) hBarPath(ctx, x0, x1, bandTop, BAND_H, 3); else ctx.rect(x0, bandTop, x1 - x0, BAND_H); ctx.fill(); } const zx = xOf(0); if (lo < 0) { ctx.fillStyle = p.textFaint; ctx.fillRect(Math.round(zx), bandTop, 1, BAND_H); } if (!m.missing) { const vEnd = v[0] * g; const barY = mid - BAR_H / 2; const bx = xOf(vEnd); // A forward projection continues the bar, so the value end stays square where they meet. const extends_ = m.projected !== null && v[1] > v[0] && v[0] >= 0; ctx.beginPath(); hBarPath(ctx, zx, bx, barY, BAR_H, extends_ ? 0 : 3); ctx.fillStyle = p.accent; ctx.fill(); // Projection: a hatched continuation from the value to where it is heading. A projection // below the value hatches back over the bar instead. if (m.projected !== null && Math.abs(v[1] - v[0]) > 1e-9) { const pa = clamp((g - 0.55) / 0.45, 0, 1); const px = xOf(v[1]); if (pa > 0 && Math.abs(px - bx) > 0.5) { ctx.globalAlpha = (dim ? 0.42 : 1) * pa; ctx.beginPath(); if (px > bx) hBarPath(ctx, bx, px, barY, BAR_H, 3); else ctx.rect(px, barY, bx - px, BAR_H); ctx.fillStyle = px > bx ? withAlpha(p.accent, 0.18) : withAlpha(p.stage, 0.55); ctx.fill(); if (hatch) { ctx.fillStyle = hatch; ctx.fill(); } ctx.globalAlpha = dim ? 0.42 : 1; } } } // Target: a perpendicular tick in strong ink. if (Number.isFinite(m.target)) { const tx = Math.round(xOf(v[2])); ctx.fillStyle = p.text; ctx.fillRect(Math.min(tx - 1, Math.round(r) - 2), mid - TARGET_H / 2, 2, TARGET_H); } ctx.globalAlpha = 1; // Per-row sparse ticks under the band. if (!c.common) { const tl = m.goal[3]; const th = m.goal[4]; let want = clamp(Math.floor(pw / 90), 2, 5); let tv = niceTicks(tl, th, want); for (;;) { const widest = tv.reduce((mx, t) => Math.max(mx, m.tickFmt(t).length), 0) * 10 * MONO; const gap = tv.length > 1 ? ((tv[1] - tv[0]) / Math.max(1e-9, th - tl)) * pw : Infinity; if (gap >= widest + 10 || want <= 1) break; want -= 1; tv = niceTicks(tl, th, want); } for (const t of tv) { const x = l + (t - lo) * k; if (x < l - 0.5 || x > r + 0.5) continue; const text = m.tickFmt(t); const half = (text.length * 10 * MONO) / 2; tickMarks.push(crisp(x), bandTop + BAND_H + 1); // End labels hang inside the track so they line up with the band's ends. ticks.push({ text, x, y: bandTop + BAND_H + 10, ax: x - half < l ? 0 : x + half > r ? -100 : -50, opacity: dim ? 0.45 : 1 }); } } // DOM rows: positions only when the layout changes, opacity every frame. const N = nameRefs.current[i]; const V = valueRefs.current[i]; const A = attRefs.current[i]; const fade = clamp((g - 0.35) / 0.65, 0, 1); if (N) N.style.opacity = dim ? "0.5" : "1"; if (V) V.style.opacity = String(fade * (dim ? 0.5 : 1)); if (A) A.style.opacity = String(fade * (dim ? 0.5 : 1)); } // Common axis along the bottom. if (c.common && count) { const m = M[0]; const v = s.cur.get(m.id)!; const lo = v[3]; const hi = v[4]; const xOf = (x: number) => l + ((x - lo) / Math.max(1e-9, hi - lo)) * pw; const ay = TOP_PAD + count * rh + 4; ctx.fillStyle = p.hair; ctx.fillRect(l, Math.round(ay), pw, 1); let want = clamp(Math.floor(pw / 80), 2, 8); let tv = niceTicks(m.goal[3], m.goal[4], want); for (;;) { const widest = tv.reduce((mx, t) => Math.max(mx, m.tickFmt(t).length), 0) * 10 * MONO; const gap = tv.length > 1 ? ((tv[1] - tv[0]) / Math.max(1e-9, m.goal[4] - m.goal[3])) * pw : Infinity; if (gap >= widest + 12 || want <= 1) break; want -= 1; tv = niceTicks(m.goal[3], m.goal[4], want); } for (const t of tv) { const x = xOf(t); if (x < l - 0.5 || x > r + 0.5) continue; const text = m.tickFmt(t); const half = (text.length * 10 * MONO) / 2; tickMarks.push(crisp(x), Math.round(ay) + 1); ticks.push({ text, x, y: ay + 14, ax: x - half < PAD_X ? 0 : x + half > w - PAD_X ? -100 : -50 }); } } if (tickMarks.length) { ctx.strokeStyle = p.textFaint; ctx.lineWidth = 1; ctx.beginPath(); for (let q = 0; q < tickMarks.length; q += 2) { ctx.moveTo(tickMarks[q], tickMarks[q + 1]); ctx.lineTo(tickMarks[q], tickMarks[q + 1] + 3); } ctx.stroke(); } writeLabels(tickPool.current, s.tickCache, ticks); // Label and value columns. const key = `${w}|${l}|${r}|${rh}|${count}|${c.bandOff}`; if (key !== s.domKey) { s.domKey = key; for (let i = 0; i < count; i++) { const top = TOP_PAD + i * rh; const mid = top + head + c.bandOff + BAND_H / 2; const N = nameRefs.current[i]; const V = valueRefs.current[i]; const A = attRefs.current[i]; if (narrow) { const lineY = top + HEAD_H / 2; if (N) { N.style.width = `${Math.max(40, w - 2 * PAD_X - c.widths.value - 12)}px`; N.style.transform = `translate3d(${PAD_X}px, ${lineY.toFixed(1)}px, 0) translateY(-50%)`; } if (V) V.style.transform = `translate3d(${w - PAD_X}px, ${lineY.toFixed(1)}px, 0) translate(-100%, -50%)`; if (A) A.style.transform = `translate3d(${w - PAD_X}px, ${mid.toFixed(1)}px, 0) translate(-100%, -50%)`; } else { if (N) { N.style.width = `${Math.max(40, l - PAD_X - 14)}px`; N.style.transform = `translate3d(${PAD_X}px, ${mid.toFixed(1)}px, 0) translateY(-50%)`; } if (V) V.style.transform = `translate3d(${w - PAD_X}px, ${(mid - 2).toFixed(1)}px, 0) translate(-100%, -100%)`; if (A) A.style.transform = `translate3d(${w - PAD_X}px, ${(mid + 3).toFixed(1)}px, 0) translate(-100%, 0)`; } } } const tip = tipRef.current; if (tip?.el && hov !== null && M[hov]) { const m = M[hov]; const v = s.cur.get(m.id)!; const lo = v[3]; const hi = v[4]; const x = l + ((clamp(Math.max(v[0], m.projected !== null ? v[1] : v[0], v[2]), lo, hi) - lo) / Math.max(1e-9, hi - lo)) * pw; const bandTop = TOP_PAD + hov * rh + head + c.bandOff; const tw = tip.size.w; const th = tip.size.h; // Horizontally the tooltip lives over the bar track: the label and value columns are // exclusion zones. Beside the furthest mark when it fits, else pinned inside the track. let tx = x + 12; if (tx + tw > r) tx = x - 12 - tw; if (tx < l) tx = tw <= pw ? clamp(x - tw / 2, l, r - tw) : clamp(r - tw, 0, Math.max(0, w - tw)); // Vertically above the band, else below it, else (short charts) wherever there is more room, // overflowing downward with the page flow rather than off the top. const above = bandTop - th - 8; const below = bandTop + BAND_H + 8; const ty = above >= 0 ? above : below + th <= h ? below : th <= h ? clamp(below, 0, h - th) : Math.max(0, Math.min(below, h - th)); tip.el.style.transform = `translate3d(${Math.round(tx)}px, ${Math.round(ty)}px, 0)`; } return moving || s.enter < 1; }); // Label column width: the widest label or sublabel, measured after fonts settle. useEffect(() => { let alive = true; const measure = () => { if (!alive) return; let mx = 0; for (let i = 0; i < model.length; i++) { const el = nameRefs.current[i]; if (!el) continue; for (const ch of Array.from(el.children)) mx = Math.max(mx, (ch as HTMLElement).scrollWidth); } st.current.labelW = mx || 96; st.current.domKey = ""; wake(); }; measure(); document.fonts?.ready.then(measure).catch(() => {}); // Forget rows that left the data. const ids = new Set(model.map((m) => m.id)); for (const id of Array.from(st.current.cur.keys())) if (!ids.has(id)) st.current.cur.delete(id); return () => { alive = false; }; }, [model, wake]); useEffect(() => { st.current.domKey = ""; wake(); }, [pal, reduce, rowH, bandOff, wake]); const tooltipFor = (i: number): TooltipContent | null => { const m = model[i]; if (!m) return null; const rowsOut: TooltipContent["rows"] = []; rowsOut.push({ key: "v", label: "Actual", value: m.valueText, color: pal.accent }); if (Number.isFinite(m.target)) rowsOut.push({ key: "t", label: "Target", value: m.fmt(m.target), color: pal.text }); if (!m.missing && Number.isFinite(m.target)) { const gap = m.value - m.target; const word = Math.abs(gap) < 1e-12 ? "On target" : (m.better === "higher") === gap < 0 ? (m.better === "higher" ? "To go" : "Over target") : m.better === "higher" ? "Over target" : "Under target"; // The word carries the direction, so the amount reads unsigned ("To go $2.49M", not "−$2.49M"). rowsOut.push({ key: "g", label: word, value: m.fmt(Math.abs(gap)), strong: false }); } if (m.projected !== null) { rowsOut.push({ key: "p", label: Number.isFinite(m.target) && m.target !== 0 ? `Projected, ${formatPercent(m.projected / m.target, 0)}` : "Projected", value: m.fmt(m.projected), color: pal.accent, dashed: true, }); } if (!m.missing) rowsOut.push({ key: "b", label: "Band", value: m.bandNames[m.bandIndex], strong: false }); rowsOut.push({ key: "s", label: "Status", value: m.statusWord, strong: false }); return { key: `${m.id}|${m.valueText}|${m.projected}|${pal.text}`, title: m.sublabel ? `${m.label} · ${m.sublabel}` : m.label, rows: rowsOut }; }; const setHover = (i: number | null, source: Run["source"]) => { const s = st.current; if (s.hover === i && s.source === source) return; const changed = s.hover !== i; s.hover = i; s.source = i === null ? null : source; tipRef.current?.set(i === null ? null : tooltipFor(i)); if (i !== null && source === "keyboard") { const m = model[i]; announcer.current?.say( `${m.label}: ${m.valueText}${Number.isFinite(m.target) ? `, target ${m.fmt(m.target)}` : ""}, ${m.attNum}${m.attTail}${m.projected !== null ? `, projected ${m.fmt(m.projected)}` : ""}, ${m.statusWord}`, ); } if (changed && source !== "prop") onActiveChange?.(i === null ? null : (model[i]?.id ?? null)); wake(); }; // Keep the open tooltip in step with data and theme changes. useEffect(() => { const s = st.current; if (s.hover !== null) { if (s.hover >= model.length) setHover(null, null); else tipRef.current?.set(tooltipFor(s.hover)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [model, pal]); useEffect(() => { if (activeId === undefined) return; const i = activeId === null ? -1 : model.findIndex((m) => m.id === activeId); // A controlled echo of our own pointer or keyboard move keeps its source. if (i >= 0 && st.current.hover === i) return; setHover(i >= 0 ? i : null, i >= 0 ? "prop" : null); // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeId, model]); const rowAt = (clientY: number) => { const rect = rectRef.current ?? wrapperRef.current?.getBoundingClientRect(); if (!rect) return null; const y = clientY - rect.top - TOP_PAD; const i = Math.floor(y / st.current.layout.rowH); return y >= 0 && i >= 0 && i < model.length ? i : null; }; const onPointerMove = (e: PointerEvent) => { setHover(rowAt(e.clientY), "pointer"); }; const onKeyDown = (e: KeyboardEvent) => { const s = st.current; const last = model.length - 1; if (last < 0) return; if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowRight" || e.key === "ArrowLeft") { e.preventDefault(); const fwd = e.key === "ArrowDown" || e.key === "ArrowRight"; const cur = s.hover ?? (fwd ? -1 : last + 1); setHover(clamp(cur + (fwd ? 1 : -1), 0, last), "keyboard"); } else if (e.key === "Home" || e.key === "End") { e.preventDefault(); setHover(e.key === "Home" ? 0 : last, "keyboard"); } else if (e.key === "Escape" && s.hover !== null) { e.preventDefault(); setHover(null, null); } }; const tableCols = useMemo(() => ["Metric", "Actual", "Target", "Versus target", "Projected", "Band", "Status"], []); const tableRows = useMemo( () => model.map((m) => [ m.sublabel ? `${m.label} (${m.sublabel})` : m.label, m.valueText, Number.isFinite(m.target) ? m.fmt(m.target) : "–", `${m.attNum}${m.attTail}`, m.projected !== null ? m.fmt(m.projected) : "–", m.missing ? "–" : m.bandNames[m.bandIndex], `${m.statusWord}${m.better === "lower" ? " (lower is better)" : ""}`, ]), [model], ); const summary = useMemo(() => { const c = { met: 0, near: 0, off: 0, none: 0 }; for (const m of model) c[m.status] += 1; const parts = [`${c.met} on target`, c.near ? `${c.near} near` : "", c.off ? `${c.off} off target` : "", c.none ? `${c.none} without data` : ""].filter(Boolean); return `${model.length} metric${model.length === 1 ? "" : "s"}: ${parts.join(", ")}`; }, [model]); const tickCount = common ? 10 : n * 7; return (

{ if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect(); }} onPointerMove={onPointerMove} onPointerDown={(e) => { if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect(); if (e.pointerType === "touch") onPointerMove(e); }} onPointerLeave={(e) => { rectRef.current = null; // A touch tap fires leave right after up; keep the tapped row until the next tap. if (e.pointerType !== "touch" && st.current.source === "pointer") setHover(null, null); }} onBlur={() => setHover(null, null)} onKeyDown={onKeyDown} className={cn("absolute inset-0 touch-pan-y rounded-[10px]", chartFocusRing)} >

{!n && ( No metrics )} {model.map((m, i) => (

{ nameRefs.current[i] = el; }} aria-hidden="true" className="pointer-events-none absolute left-0 top-0 flex min-w-0 flex-col items-start gap-[6px] opacity-0 transition-opacity duration-150 ease-out @max-[480px]:flex-row @max-[480px]:items-baseline @max-[480px]:gap-1.5" > {m.label} {m.sublabel && ( {m.sublabel} )}

))} {model.map((m, i) => ( { valueRefs.current[i] = el; }} aria-hidden="true" className="pointer-events-none absolute left-0 top-0 whitespace-nowrap font-mono text-[12px] leading-none tabular-nums text-[color:var(--bjork-text)] opacity-0 [text-box:trim-both_cap_alphabetic]" > {m.valueText} ))} {model.map((m, i) => ( { attRefs.current[i] = el; }} aria-hidden="true" className="pointer-events-none absolute left-0 top-0 inline-flex items-center gap-1 whitespace-nowrap font-mono text-[11px] leading-none tabular-nums text-[color:var(--bjork-text-muted)] opacity-0" > {m.attNum} {m.attTail} ))}

); } 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:T130a,"use client"; // Canvas plumbing shared by the Charts collection. One hook gives a chart a measured host, a // DPR-capped canvas that follows it, and a draw loop that pauses offscreen and idles when settled. import { useCallback, useEffect, useRef, type RefObject } from "react"; import { useVisibleLoop } from "@/components/bjork-ui/_core/loop"; import { sizeCanvas, useElementSize } from "@/components/bjork-ui/_core/canvas"; import { cubicBezier, ease } from "@/components/bjork-ui/_core/motion"; export interface ChartFrame { ctx: CanvasRenderingContext2D; w: number; h: number; dt: number; t: number; } /** * `draw` runs inside `useVisibleLoop`. Return true to keep animating, false to go idle until `wake()`. * The loop root is `rootRef` (gets `data-loop`). The canvas is sized to `hostRef`. */ export function useChartCanvas(draw: (f: ChartFrame) => boolean) { const rootRef = useRef(null); const hostRef = useRef(null); const canvasRef = useRef(null); const size = useElementSize(hostRef); const sizeRef = useRef({ w: 0, h: 0, dpr: 1 }); const drawRef = useRef(draw); useEffect(() => { drawRef.current = draw; }); const frame = useCallback((dt: number, t: number) => { const canvas = canvasRef.current; const { w, h, dpr } = sizeRef.current; if (!canvas || !w || !h) return true; const ctx = canvas.getContext("2d"); if (!ctx) return false; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); return drawRef.current({ ctx, w, h, dt, t }); }, []); const { wake } = useVisibleLoop(rootRef as RefObject, frame); useEffect(() => { const canvas = canvasRef.current; if (!canvas || !size.width || !size.height) return; sizeRef.current = { w: size.width, h: size.height, dpr: sizeCanvas(canvas, size.width, size.height) }; wake(); }, [size.width, size.height, wake]); return { rootRef, hostRef, canvasRef, size, wake }; } // The house ease-out for entrances, usable in rAF code. export const easeOut = cubicBezier(...(ease.out as unknown as [number, number, number, number])); export const easeInOut = cubicBezier(...(ease.inOut as unknown as [number, number, number, number])); // A 45 degree hatch pattern in `color`, for counterfactual and loss regions. const hatchCache = new Map(); export function hatchPattern(ctx: CanvasRenderingContext2D, color: string, gap = 5, width = 1): CanvasPattern | null { const key = `${color}|${gap}|${width}`; if (hatchCache.has(key)) return hatchCache.get(key)!; if (typeof document === "undefined") return null; const tile = document.createElement("canvas"); const s = gap * 2; tile.width = s * 2; tile.height = s * 2; const c = tile.getContext("2d"); if (!c) return null; c.scale(2, 2); c.strokeStyle = color; c.lineWidth = width; c.beginPath(); for (let k = -s; k <= s * 2; k += gap) { c.moveTo(k, s); c.lineTo(k + s, 0); } c.stroke(); const pattern = ctx.createPattern(tile, "repeat"); pattern?.setTransform(new DOMMatrix().scale(0.5, 0.5)); hatchCache.set(key, pattern); return pattern; } // Rounded rect path with independent top and bottom radii (bars: round data end, square baseline). export function roundRectPath( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, rTop: number, rBottom = 0, ) { if (w <= 0 || h <= 0) return; const rt = Math.min(rTop, w / 2, h / 2); const rb = Math.min(rBottom, w / 2, h / 2); ctx.moveTo(x + rt, y); ctx.lineTo(x + w - rt, y); if (rt) ctx.arcTo(x + w, y, x + w, y + rt, rt); ctx.lineTo(x + w, y + h - rb); if (rb) ctx.arcTo(x + w, y + h, x + w - rb, y + h, rb); ctx.lineTo(x + rb, y + h); if (rb) ctx.arcTo(x, y + h, x, y + h - rb, rb); ctx.lineTo(x, y + rt); if (rt) ctx.arcTo(x, y, x + rt, y, rt); ctx.closePath(); } export interface PlacedLabel { text: string; x: number; y: number; /** translate percentages applied after the position, e.g. -50 to centre. */ ax?: number; ay?: number; opacity?: number; } // Writes a pool of absolutely positioned label spans from the loop: text only when it changes, // position by transform only. Unused spans hide. export function writeLabels(els: (HTMLElement | null)[], cache: string[], items: PlacedLabel[]) { for (let i = 0; i < els.length; i++) { const el = els[i]; if (!el) continue; const it = items[i]; if (!it) { if (el.style.opacity !== "0") el.style.opacity = "0"; continue; } if (cache[i] !== it.text) { cache[i] = it.text; el.textContent = it.text; } el.style.opacity = String(it.opacity ?? 1); el.style.transform = `translate3d(${it.x.toFixed(2)}px, ${it.y.toFixed(2)}px, 0) translate(${it.ax ?? 0}%, ${it.ay ?? -50}%)`; } } a5: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; } a6:T5ec,"use client"; import { useEffect, useState, type RefObject } from "react"; import { isCoarsePointer } from "./loop"; // Caps DPR at 1.5 on coarse pointers and 2 otherwise. export function defaultMaxDpr(): number { return isCoarsePointer() ? 1.5 : 2; } // Sets the backing size for a CSS box and returns the DPR used. export function sizeCanvas( canvas: HTMLCanvasElement, cssW: number, cssH: number, maxDpr: number = defaultMaxDpr(), ): number { const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, maxDpr); canvas.width = Math.max(1, Math.round(cssW * dpr)); canvas.height = Math.max(1, Math.round(cssH * dpr)); canvas.style.width = `${cssW}px`; canvas.style.height = `${cssH}px`; return dpr; } // Rounded size of an element, kept current with a ResizeObserver. export function useElementSize(ref: RefObject): { width: number; height: number } { const [size, setSize] = useState({ width: 0, height: 0 }); useEffect(() => { const el = ref.current; if (!el || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver((entries) => { const box = entries[0]?.contentRect; if (!box) return; const width = Math.round(box.width); const height = Math.round(box.height); setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height })); }); observer.observe(el); return () => observer.disconnect(); }, [ref]); return size; } a7:T835,// Shared springs, easings and durations. Components import these instead of inventing values. export const springs = { press: { type: "spring", stiffness: 500, damping: 30, mass: 0.6 }, snappy: { type: "spring", stiffness: 400, damping: 25, mass: 1 }, standard: { type: "spring", stiffness: 300, damping: 30, mass: 0.8 }, soft: { type: "spring", stiffness: 200, damping: 25, mass: 1.2 }, settle: { type: "spring", stiffness: 380, damping: 30, mass: 0.8 }, blurIn: { type: "spring", stiffness: 400, damping: 28, mass: 0.6 }, } as const; export const ease = { out: [0.23, 1, 0.32, 1], inOut: [0.77, 0, 0.175, 1], drawer: [0.32, 0.72, 0, 1], } as const; export const easeCss = { out: "cubic-bezier(0.23,1,0.32,1)", inOut: "cubic-bezier(0.77,0,0.175,1)", drawer: "cubic-bezier(0.32,0.72,0,1)", } as const; export const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms // Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1]. export function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number { const cx = 3 * x1; const bx = 3 * (x2 - x1) - cx; const ax = 1 - cx - bx; const cy = 3 * y1; const by = 3 * (y2 - y1) - cy; const ay = 1 - cy - by; const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s; const sampleY = (s: number) => ((ay * s + by) * s + cy) * s; const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx; const solveX = (x: number) => { let s = x; for (let i = 0; i < 8; i++) { const err = sampleX(s) - x; if (Math.abs(err) < 1e-6) return s; const d = sampleDX(s); if (Math.abs(d) < 1e-6) break; s -= err / d; } let lo = 0; let hi = 1; s = x; while (lo < hi) { const v = sampleX(s); if (Math.abs(v - x) < 1e-6) return s; if (x > v) lo = s; else hi = s; s = (lo + hi) / 2; if (hi - lo < 1e-7) break; } return s; }; return (t: number) => { if (t <= 0) return 0; if (t >= 1) return 1; return sampleY(solveX(t)); }; } a8:T3085,"use client"; // Shared chart chrome for the Charts collection: theme vars, the hover tooltip, legend keys and the // screen-reader table twin every chart ships with. import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { BJORK_PALETTE, type BjorkTone } from "@/components/bjork-ui/_core/palette"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import { LiveRegion } from "@/components/bjork-ui/_core/a11y"; import { surfaceVars } from "@/components/bjork-ui/_core/surface"; export type ChartPalette = (typeof BJORK_PALETTE)[BjorkTone]; // Tokens a chart root writes so DOM overlays follow `tone` even outside a themed page. export function chartVars(pal: ChartPalette): CSSProperties { return { ...surfaceVars(pal === BJORK_PALETTE.light ? "light" : "dark"), "--bjork-accent": pal.accent, "--bjork-accent-ink": pal.accentInk, "--bjork-accent-fill": pal.accentFill, "--bjork-accent-soft": pal.accentSoft, "--bjork-accent-foreground": pal.accentFg, "--bjork-text": pal.text, "--bjork-text-medium": pal.textMedium, "--bjork-text-muted": pal.textMuted, "--bjork-text-soft": pal.textSoft, "--bjork-text-faint": pal.textFaint, "--bjork-hair": pal.hair, "--bjork-border": pal.border, "--bjork-border-strong": pal.borderStrong, "--bjork-surface": pal.surface, "--bjork-surface-hover": pal.raised, "--bjork-ring-offset": pal.bg, // The surface a chart sits on, for label halos and cut-outs. Override it on the root if needed. "--bjork-chart-bg": pal.stage, "--bjork-success": pal.success, "--bjork-warning": pal.warning, "--bjork-error": pal.error, } as CSSProperties; } // Tone, palette, reduced motion and root vars in one call. export function useChartTheme(toneProp?: BjorkTone) { const tone = useBjorkTone(toneProp); const pal = BJORK_PALETTE[tone]; const reduce = !!useReducedMotion(); return { tone, pal, reduce, vars: chartVars(pal) }; } // Focus ring shared by every focusable plot surface. export const chartFocusRing = "outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]"; // Mono label style: 10px Geist Mono, tabular, cap-trimmed. export const chartMono = "font-mono text-[10px] leading-none tabular-nums [text-box:trim-both_cap_alphabetic]"; // Floating chart surfaces follow the library canon (_core/surface.ts): a 1px border plus the inset light // shadow. Hover cards take the full surface shadow; small readout tags take the soft one. Colours come // from chartVars, so light and dark both follow the tone. export const chartCardEdge = "border border-[color:var(--bjork-border)] shadow-[var(--bjork-shadow-surface)]"; export const chartTagEdge = "border border-[color:var(--bjork-border)] shadow-[var(--bjork-shadow-soft)]"; export interface TooltipRow { key?: string; label: ReactNode; value: ReactNode; color?: string; dashed?: boolean; strong?: boolean; } // The hover card. Values lead, labels follow, series keyed with a short line in the series colour. // Position it with `style.transform` from the caller; it never takes pointer events. export const ChartTooltip = forwardRef< HTMLDivElement, { title?: ReactNode; rows: TooltipRow[]; visible: boolean; className?: string; style?: CSSProperties; tipKey?: string } >(function ChartTooltip({ title, rows, visible, className, style, tipKey }, ref) { return ( ); }); // Places a tooltip of size (tw, th) next to (x, y) inside a (w, h) box, flipping away from edges. export function placeTooltip( x: number, y: number, tw: number, th: number, w: number, h: number, gap = 12, ): { x: number; y: number } { let tx = x + gap; if (tx + tw > w) tx = x - gap - tw; if (tx < 0) tx = Math.max(0, Math.min(w - tw, x - tw / 2)); let ty = y - th - gap; if (ty < 0) ty = Math.min(h - th, y + gap); return { x: Math.round(tx), y: Math.round(Math.max(0, ty)) }; } export interface LegendItem { id: string; label: string; color: string; shape?: "line" | "dash" | "rect" | "dot"; muted?: boolean; } // A legend row. Keys mirror the mark: line for lines, rect for areas and bars. export function ChartLegend({ items, className, onHover, activeId, }: { items: LegendItem[]; className?: string; onHover?: (id: string | null) => void; activeId?: string | null; }) { return (

{items.map((it) => { const dim = (activeId && activeId !== it.id) || it.muted; return ( onHover(it.id) : undefined} onPointerLeave={onHover ? () => onHover(null) : undefined} className={cn( "inline-flex items-center gap-1.5 font-bjork-alpha text-[11px] font-medium leading-3 transition-opacity duration-150 ease-out", dim ? "opacity-45" : "opacity-100", "text-[color:var(--bjork-text-medium)]", )} > {it.label} ); })}

); } export function LegendKey({ color, shape = "rect" }: { color: string; shape?: LegendItem["shape"] }) { if (shape === "line") return ; if (shape === "dash") return ; if (shape === "dot") return ; return ; } // The table twin. Every value the chart shows is reachable here without hovering. // Memoised: hover state re-renders the chart, never the table. Pass memoised rows. export const ChartTable = memo(function ChartTable({ caption, columns, rows, }: { caption: string; columns: string[]; rows: (string | number)[][]; }) { return ( {columns.map((c) => ( ))} {rows.map((r, i) => ( {r.map((cell, j) => j === 0 ? ( ) : ( ), )} ))}

{caption}
{c}
{cell}	{cell}

); }); // A pool of absolutely positioned spans the draw loop fills through `writeLabels`. export function LabelPool({ count, pool, className, }: { count: number; pool: { current: (HTMLSpanElement | null)[] }; className?: string; }) { return ( <> {Array.from({ length: count }).map((_, i) => ( { pool.current[i] = el; }} aria-hidden="true" className={cn( "pointer-events-none absolute left-0 top-0 whitespace-nowrap opacity-0", className ?? "font-mono text-[10px] leading-none tabular-nums text-[color:var(--bjork-text-faint)] [text-box:trim-both_cap_alphabetic]", )} /> ))} ); } export interface TooltipContent { key: string; title?: ReactNode; rows: TooltipRow[]; } export interface TooltipHandle { /** Shows `content`, or hides with `null`. Same key is a no-op. */ set: (content: TooltipContent | null) => void; readonly el: HTMLDivElement | null; /** Measured size of the current content. */ readonly size: { w: number; h: number }; } // A tooltip that owns its state, so hovering re-renders only the tooltip, never the chart. // The chart positions it from its draw loop through `handle.el.style.transform`. export const HoverTooltip = forwardRef void; className?: string }>(function HoverTooltip( { onMeasure, className }, ref, ) { const [state, setState] = useState<{ content: TooltipContent | null; last: TooltipContent | null }>({ content: null, last: null }); const elRef = useRef(null); const size = useRef({ w: 0, h: 0 }); const onMeasureRef = useRef(onMeasure); useEffect(() => { onMeasureRef.current = onMeasure; }); useImperativeHandle( ref, () => ({ set: (content) => setState((prev) => { if ((prev.content?.key ?? null) === (content?.key ?? null)) return prev; return { content, last: content ?? prev.last }; }), get el() { return elRef.current; }, get size() { return size.current; }, }), [], ); useLayoutEffect(() => { const el = elRef.current; if (!el) return; size.current = { w: el.offsetWidth, h: el.offsetHeight }; onMeasureRef.current?.(); }, [state.last]); const shown = state.content ?? state.last; return ; }); export interface AnnouncerHandle { say: (message: string) => void; } // Polite live region with a 250ms trailing throttle, isolated from the chart's renders. export const ChartAnnouncer = forwardRef(function ChartAnnouncer({ ms = 250 }, ref) { const [message, setMessage] = useState(""); const at = useRef(0); const timer = useRef | null>(null); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); useImperativeHandle( ref, () => ({ say: (text: string) => { const now = performance.now(); if (timer.current) clearTimeout(timer.current); if (now - at.current >= ms) { at.current = now; setMessage(text); } else { timer.current = setTimeout(() => { at.current = performance.now(); setMessage(text); }, ms); } }, }), [ms], ); return ; }); a9:Tccd,import type { CSSProperties } from "react"; import type { BjorkTone } from "./palette"; // The library surface (CANON.md §1). Values mirror app/globals.css :root and .dark. Change both together. export const BJORK_SURFACE = { light: { surface: "#fffcf6", surfaceMuted: "rgba(250, 246, 237, 0.94)", surfaceHover: "#f5efe3", surfaceActive: "#efe7d8", panel: "#f8f2e7", menu: "rgba(255, 252, 246, 0.98)", field: "rgba(255, 252, 246, 0.96)", fieldMuted: "rgba(248, 242, 231, 0.82)", fieldInset: "rgba(239, 231, 216, 0.72)", border: "#eee6db", borderMuted: "#f5ede2", borderStrong: "#e1d7c8", shadowSurface: "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)", shadowSoft: "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", shadowPanel: "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)", shadowMenu: "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)", shadowInset: "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", }, dark: { surface: "#121212", surfaceMuted: "rgba(22, 22, 22, 0.92)", surfaceHover: "#161616", surfaceActive: "#202020", panel: "#0d0d0d", menu: "rgba(18, 18, 18, 0.98)", field: "rgba(18, 18, 18, 0.95)", fieldMuted: "rgba(18, 18, 18, 0.55)", fieldInset: "rgba(9, 9, 9, 0.75)", border: "#232323", borderMuted: "#1c1c1c", borderStrong: "#343434", shadowSurface: "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", shadowSoft: "inset 0 1px 0 rgba(255, 255, 255, 0.045)", shadowPanel: "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", shadowMenu: "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", shadowInset: "inset 0 1px 10px rgba(0, 0, 0, 0.45)", }, } as const; /** Writes the surface tokens for a pinned tone as --bjork-* custom properties. Spread first; kit-specific keys may override. */ export function surfaceVars(tone: BjorkTone): CSSProperties { const s = BJORK_SURFACE[tone]; return { "--bjork-surface": s.surface, "--bjork-surface-muted": s.surfaceMuted, "--bjork-surface-hover": s.surfaceHover, "--bjork-surface-active": s.surfaceActive, "--bjork-panel": s.panel, "--bjork-menu": s.menu, "--bjork-field": s.field, "--bjork-field-muted": s.fieldMuted, "--bjork-field-inset": s.fieldInset, "--bjork-border": s.border, "--bjork-border-muted": s.borderMuted, "--bjork-border-strong": s.borderStrong, "--bjork-shadow-surface": s.shadowSurface, "--bjork-shadow-soft": s.shadowSoft, "--bjork-shadow-panel": s.shadowPanel, "--bjork-shadow-menu": s.shadowMenu, "--bjork-shadow-inset": s.shadowInset, } as CSSProperties; } aa:T26b2,// Shared chart math for the Charts collection: nice ticks, scales, damping, colour and number formatting. // Pure functions only. Every chart imports what it needs by path. export function clamp(v: number, lo: number, hi: number): number { return v < lo ? lo : v > hi ? hi : v; } export function lerp(a: number, b: number, t: number): number { return a + (b - a) * t; } // Maps v from [d0, d1] to [r0, r1]. Degenerate domains map to the range midpoint. export function scaleLinear(d0: number, d1: number, r0: number, r1: number): (v: number) => number { const span = d1 - d0; if (!(Math.abs(span) > 1e-12)) return () => (r0 + r1) / 2; const k = (r1 - r0) / span; return (v: number) => r0 + (v - d0) * k; } // Frame-rate independent approach: moves `cur` toward `target` with time constant `tau` seconds. export function damp(cur: number, target: number, tau: number, dt: number): number { if (tau <= 0) return target; return target + (cur - target) * Math.exp(-dt / tau); } // A "nice" step (1, 2, 2.5 or 5 x 10^k) that splits `span` into roughly `count` intervals. export function niceStep(span: number, count = 5): number { if (!(span > 0) || !Number.isFinite(span)) return 1; const raw = span / Math.max(1, count); const mag = 10 ** Math.floor(Math.log10(raw)); const r = raw / mag; const m = r <= 1 ? 1 : r <= 2 ? 2 : r <= 2.5 ? 2.5 : r <= 5 ? 5 : 10; return m * mag; } // Tick values at a nice step, inclusive of the domain ends when they land on the step. export function niceTicks(lo: number, hi: number, count = 5): number[] { if (!(hi > lo)) return [lo]; const step = niceStep(hi - lo, count); const first = Math.ceil(lo / step - 1e-9); const last = Math.floor(hi / step + 1e-9); const out: number[] = []; for (let n = first; n <= last; n++) out.push(Number((n * step).toFixed(12))); return out; } // Expands [lo, hi] outward to the nearest nice step, so the outer gridlines sit on round values. export function niceDomain(lo: number, hi: number, count = 5): [number, number] { if (!(hi > lo)) { const pad = Math.max(Math.abs(hi) * 0.1, 1); return [lo - pad, hi + pad]; } const step = niceStep(hi - lo, count); return [Math.floor(lo / step + 1e-9) * step, Math.ceil(hi / step - 1e-9) * step]; } // Half-pixel snap for crisp 1px hairlines. export function crisp(v: number): number { return Math.round(v) + 0.5; } // --- Colour ------------------------------------------------------------------------------------- const rgbCache = new Map(); // Parses #rgb, #rrggbb and rgba()/rgb() strings. Returns [r, g, b, a]. export function parseColor(c: string): [number, number, number, number] { const hit = rgbCache.get(c); if (hit) return hit; let out: [number, number, number, number] = [0, 0, 0, 1]; const s = c.trim(); if (s.startsWith("#")) { let h = s.slice(1); if (h.length === 3) h = h.split("").map((ch) => ch + ch).join(""); const n = parseInt(h.slice(0, 6), 16); out = [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1]; } else { const m = s.match(/rgba?$([^)]+)$/); if (m) { const p = m[1].split(",").map((x) => parseFloat(x)); out = [p[0] ?? 0, p[1] ?? 0, p[2] ?? 0, p[3] ?? 1]; } } rgbCache.set(c, out); return out; } // The colour at alpha `a`, multiplied with any alpha the colour already has. export function withAlpha(c: string, a: number): string { const [r, g, b, a0] = parseColor(c); return `rgba(${r},${g},${b},${+(a0 * a).toFixed(4)})`; } // Mixes two opaque colours in sRGB. t = 0 gives `a`. export function mixColor(a: string, b: string, t: number): string { const ca = parseColor(a); const cb = parseColor(b); const r = Math.round(lerp(ca[0], cb[0], t)); const g = Math.round(lerp(ca[1], cb[1], t)); const bl = Math.round(lerp(ca[2], cb[2], t)); return `rgb(${r},${g},${bl})`; } // --- Numbers ------------------------------------------------------------------------------------ const fmtCache = new Map(); function nf(opts: Intl.NumberFormatOptions): Intl.NumberFormat { const key = JSON.stringify(opts); let f = fmtCache.get(key); if (!f) { f = new Intl.NumberFormat("en-US", opts); fmtCache.set(key, f); } return f; } export function formatNumber(v: number, digits = 1): string { if (!Number.isFinite(v)) return "–"; return nf({ maximumFractionDigits: digits, minimumFractionDigits: 0 }).format(v); } export function formatFixed(v: number, digits = 2): string { if (!Number.isFinite(v)) return "–"; return nf({ maximumFractionDigits: digits, minimumFractionDigits: digits }).format(v); } // 1,284 / 12.9K / 4.2M. Uses a true minus sign. export function formatCompact(v: number, digits = 1): string { if (!Number.isFinite(v)) return "–"; const s = nf({ notation: "compact", maximumFractionDigits: digits }).format(Math.abs(v)); return v < 0 ? `−${s}` : s; } export function formatPercent(v: number, digits = 0): string { if (!Number.isFinite(v)) return "–"; const s = nf({ maximumFractionDigits: digits, minimumFractionDigits: digits }).format(Math.abs(v * 100)); return `${v < 0 ? "−" : ""}${s}%`; } // +1.2 / −0.8 / 0. Signed numbers use a true minus and an explicit plus. export function formatSigned(v: number, format: (n: number) => string = (n) => formatNumber(n)): string { if (!Number.isFinite(v)) return "–"; const body = format(Math.abs(v)); // A value that rounds to zero carries no sign. if (Math.abs(v) < 1e-12 || !/[1-9]/.test(body)) return body; return `${v > 0 ? "+" : "−"}${body}`; } // Gaussian kernel density at x for a sorted sample, bandwidth h. export function kde(sample: number[], x: number, h: number): number { const n = sample.length; if (!n || !(h > 0)) return 0; let s = 0; const inv = 1 / h; for (let i = 0; i < n; i++) { const u = (x - sample[i]) * inv; if (u > 4 || u < -4) continue; s += Math.exp(-0.5 * u * u); } return s / (n * h * Math.sqrt(2 * Math.PI)); } // Silverman's rule of thumb bandwidth. export function silverman(sample: number[]): number { const n = sample.length; if (n < 2) return 1; const mean = sample.reduce((a, b) => a + b, 0) / n; const sd = Math.sqrt(sample.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1)); const sorted = [...sample].sort((a, b) => a - b); const iqr = quantile(sorted, 0.75) - quantile(sorted, 0.25); const spread = Math.min(sd, iqr / 1.34) || sd || 1; return 0.9 * spread * n ** -0.2; } // Linear-interpolated quantile of a sorted array. export function quantile(sorted: number[], q: number): number { const n = sorted.length; if (!n) return NaN; if (n === 1) return sorted[0]; const pos = clamp(q, 0, 1) * (n - 1); const lo = Math.floor(pos); const hi = Math.min(n - 1, lo + 1); return sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo); } // Standard normal sample from a uniform source (Box-Muller). export function gaussian(rnd: () => number): number { const u = Math.max(rnd(), 1e-9); const v = rnd(); return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v); } // --- Time --------------------------------------------------------------------------------------- const HOUR = 3600000; const DAY = 86400000; const timeFmt = { hour: new Intl.DateTimeFormat("en-US", { hour: "numeric", timeZone: "UTC" }), day: new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" }), month: new Intl.DateTimeFormat("en-US", { month: "short", timeZone: "UTC" }), monthYear: new Intl.DateTimeFormat("en-US", { month: "short", year: "2-digit", timeZone: "UTC" }), year: new Intl.DateTimeFormat("en-US", { year: "numeric", timeZone: "UTC" }), }; export interface TimeTick { t: number; label: string; } // Calendar-aligned ticks (UTC) for [t0, t1] drawn across `px` pixels, at least `minPx` apart. export function timeTicks(t0: number, t1: number, px: number, minPx = 64): TimeTick[] { const span = t1 - t0; if (!(span > 0) || !(px > 0)) return []; const maxTicks = Math.max(1, Math.floor(px / minPx)); const perTick = span / maxTicks; const out: TimeTick[] = []; const hourSteps = [1, 2, 3, 6, 12]; for (const k of hourSteps) { if (k * HOUR >= perTick) { const step = k * HOUR; for (let t = Math.ceil(t0 / step) * step; t <= t1; t += step) { const d = new Date(t); out.push({ t, label: d.getUTCHours() === 0 ? timeFmt.day.format(t) : timeFmt.hour.format(t) }); } return out; } } const daySteps = [1, 2, 3, 7, 14]; for (const k of daySteps) { if (k * DAY >= perTick) { const step = k * DAY; // Weekly steps land on Mondays. const offset = k === 7 || k === 14 ? 4 * DAY : 0; for (let t = Math.ceil((t0 - offset) / step) * step + offset; t <= t1; t += step) out.push({ t, label: timeFmt.day.format(t) }); return out; } } const monthSteps = [1, 2, 3, 6, 12, 24, 60]; for (const k of monthSteps) { if (k * 30.44 * DAY >= perTick) { const d0 = new Date(t0); let y = d0.getUTCFullYear(); let m = d0.getUTCMonth(); // First boundary at or after t0 that is a multiple of k months. m = Math.ceil(m / k) * k; for (;;) { y += Math.floor(m / 12); m %= 12; const t = Date.UTC(y, m, 1); if (t > t1) break; if (t >= t0) { const label = k >= 12 ? timeFmt.year.format(t) : m === 0 ? timeFmt.monthYear.format(t) : timeFmt.month.format(t); out.push({ t, label }); } m += k; } return out; } } return out; } export function formatDateUTC(t: number, style: "day" | "full" = "day"): string { if (style === "full") return new Date(t).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }); return timeFmt.day.format(t); } 7e:["$","$La1",null,{"files":[{"path":"components/bjork-ui/charts/bullet-chart.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/charts/bullet-chart.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/charts/_kit/canvas.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/charts/_kit/canvas.ts"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/canvas.ts","content":"$a6","type":"registry:component","target":"@components/bjork-ui/_core/canvas.ts"},{"path":"components/bjork-ui/_core/motion.ts","content":"$a7","type":"registry:component","target":"@components/bjork-ui/_core/motion.ts"},{"path":"components/bjork-ui/charts/_kit/chrome.tsx","content":"$a8","type":"registry:component","target":"@components/bjork-ui/charts/_kit/chrome.tsx"},{"path":"components/bjork-ui/_core/tone.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/tone.ts"},{"path":"components/bjork-ui/_core/a11y.tsx","content":"import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/a11y.tsx"},{"path":"components/bjork-ui/_core/surface.ts","content":"$a9","type":"registry:component","target":"@components/bjork-ui/_core/surface.ts"},{"path":"components/bjork-ui/charts/_kit/scale.ts","content":"$aa","type":"registry:component","target":"@components/bjork-ui/charts/_kit/scale.ts"}],"className":"h-[70svh] min-h-80"}]