80: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"] a0: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"] a2: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"] 54:["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}] 55:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}] 56:["$","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"}]]}] 57:["$","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)"}]]}]}]]}] 58:["$","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"}]]}] 59:["$","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"}]]}] 5a:["$","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"}]]}] 5b:["$","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)"}]]}]}]]}] 5c:["$","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)"}]]}]}]]}] 5d:["$","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)"}]]}]}]]}] 5e:["$","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)"}]]}]}]]}] 5f:["$","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"}]]}] 60:["$","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"}]]}] 61:["$","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)"}]]}]}]]}] 62:["$","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)"}]]}]}]]}] 63:["$","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)"}]]}]}]]}] 64:["$","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)"}]]}]}]]}] 65:["$","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)"}]]}]}]]}] 66:["$","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"}]]}] 67:["$","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"}]]}] 68:["$","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"}]]}] 69:["$","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"}]]}] 6a:["$","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"}]]}] 6b:["$","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"}]]}] 6c:["$","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"}]]}] 6d:["$","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"}]]}] 6e:["$","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)"}]]}]}]]}] 6f:["$","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)"}]]}]}]]}] 70:["$","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)"}]]}]}]]}] 71:["$","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"}]]}] 72:["$","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"}]]}] 73:["$","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"}]]}] 74:["$","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"}]]}] 75:["$","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)"}]]}] 76:["$","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)"}]]}] 77:["$","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)"}]]}] 78:["$","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)"}]]}] 79:["$","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)"}]]}] 7a:["$","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"}]]}] 7b:["$","$L80",null,{"orientation":"horizontal"}] 7c:["$","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":["$","$L53",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)"}}],"$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"]}],"$L9f"]}]}]]}] 7d:null a1: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); } }7e:["$","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":["$","$La0",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$a1"}]}]]}] a3:Tc2c0,"use client"; import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent, type PointerEvent } from "react"; import { cn } from "@/lib/utils"; import type { BjorkTone } from "@/components/bjork-ui/_core/palette"; import { useChartCanvas, easeOut, roundRectPath, writeLabels, type PlacedLabel } from "@/components/bjork-ui/charts/_kit/canvas"; import { useChartTheme, chartFocusRing, ChartTable, LabelPool, LegendKey, placeTooltip, HoverTooltip, ChartAnnouncer, type TooltipHandle, type AnnouncerHandle, type TooltipContent, type TooltipRow, } from "@/components/bjork-ui/charts/_kit/chrome"; import { clamp, crisp, damp, niceDomain, niceTicks, timeTicks, withAlpha, formatCompact, formatPercent } from "@/components/bjork-ui/charts/_kit/scale"; import { CHART_OTHER, MAX_SERIES, foldSeries, seriesColor } from "@/components/bjork-ui/charts/_kit/series"; export interface AreaSeries { id: string; label: string; /** One value per entry in `times`. Missing, non-finite and negative values count as zero. */ values: number[]; } export type StackedAreaMode = "stacked" | "percent" | "lines"; export interface StackedAreaChartProps { /** Shared time axis in UTC milliseconds, ascending. */ times: number[]; /** Series in stack order, first at the bottom. Colour follows this index. Past six, the rest fold into "Other". */ series: AreaSeries[]; /** "stacked" (default) shows the total, "percent" each part's share, "lines" the parts unstacked. */ mode?: StackedAreaMode; /** Hidden series ids, controlled. Toggled from the legend; the last visible series cannot be hidden. */ hidden?: string[]; defaultHidden?: string[]; onHiddenChange?: (hidden: string[]) => void; /** Brushed window [start, end] in UTC ms, controlled. Defaults to the whole axis. */ range?: [number, number]; defaultRange?: [number, number]; /** Called when the user settles a new window (drag end, click, keyboard), not on every pointer move. */ onRangeChange?: (range: [number, number]) => void; /** The overview strip with the draggable window under the plot. */ brush?: boolean; formatValue?: (v: number) => string; /** Date text for the tooltip, table and announcements. */ formatTime?: (t: number) => string; /** How the table twin rolls up more than 120 points into weeks or months. */ tableAggregate?: "mean" | "sum" | "last"; /** Posed crosshair by point index. */ activeIndex?: number | null; /** Posed crosshair by time (nearest point). */ activeTime?: number | null; height?: number; ariaLabel?: string; tone?: BjorkTone; className?: string; } const PAD_R = 8; const LEGEND_GAP = 18; const AXIS_H = 24; const BRUSH_H = 36; const BRUSH_GAP = 8; const TAU = 0.14; const VIEW_TAU = 0.12; const ENTER_MS = 720; const Y_LABELS = 8; const X_LABELS = 16; const MIN_POINTS = 7; const TABLE_MAX_ROWS = 120; const DAY = 86400000; const FILL_ALPHA: Record = { dark: 0.5, light: 0.46 }; const OTHER_ID = "__other"; const dateFmt = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }); const monthFmt = new Intl.DateTimeFormat("en-US", { month: "short", year: "numeric", timeZone: "UTC" }); const weekFmt = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" }); const defaultFormatValue = (v: number) => formatCompact(v, 1); const defaultFormatTime = (t: number) => dateFmt.format(t); const formatShare = (f: number) => formatPercent(f, f > 0 && f < 0.1 ? 1 : 0); // First index with a[k] >= x. function lowerBound(a: number[], x: number): number { let lo = 0; let hi = a.length; while (lo < hi) { const mid = (lo + hi) >> 1; if (a[mid] < x) lo = mid + 1; else hi = mid; } return lo; } function nearestIndex(a: number[], t: number): number { const n = a.length; if (!n) return -1; let k = lowerBound(a, t); if (k >= n) k = n - 1; else if (k > 0 && t - a[k - 1] < a[k] - t) k--; return k; } function clampWindow(a: number, b: number, d0: number, d1: number, minSpan: number): [number, number] { const full = d1 - d0; let w = b - a; if (!Number.isFinite(w)) w = full; w = clamp(w, Math.min(minSpan, full), full); let s = Number.isFinite(a) ? a : d0; if (s < d0) s = d0; if (s + w > d1) s = d1 - w; return [s, s + w]; } function measure(ctx: CanvasRenderingContext2D, cache: Map, font: string, text: string): number { const key = `${font}|${text}`; let w = cache.get(key); if (w === undefined) { ctx.font = font; w = ctx.measureText(text).width; if (cache.size > 600) cache.clear(); cache.set(key, w); } return w; } // Monotone cubic tangents (as d3's curveMonotoneX) for row `off` over [a, b]: no overshoot, so // a band never dips below its neighbour and shared edges trace the same curve both ways. function monoTangents(xs: Float64Array, ys: Float64Array, off: number, a: number, b: number, m: Float64Array) { if (b <= a) { m[a] = 0; return; } const secant = (k: number) => { const h = xs[k + 1] - xs[k]; return h ? (ys[off + k + 1] - ys[off + k]) / h : 0; }; if (b - a === 1) { m[a] = m[b] = secant(a); return; } for (let k = a + 1; k < b; k++) { const h0 = xs[k] - xs[k - 1]; const h1 = xs[k + 1] - xs[k]; const s0 = secant(k - 1); const s1 = secant(k); const p = h0 + h1 ? (s0 * h1 + s1 * h0) / (h0 + h1) : 0; m[k] = (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0; } m[a] = (3 * secant(a) - m[a + 1]) / 2; m[b] = (3 * secant(b - 1) - m[b - 1]) / 2; } // Traces row `off` over [a, b] with the tangents in `m`, forward (moveTo first) or backward (lineTo first). function traceEdge(ctx: CanvasRenderingContext2D, xs: Float64Array, ys: Float64Array, off: number, a: number, b: number, m: Float64Array, reverse: boolean) { if (!reverse) { ctx.moveTo(xs[a], ys[off + a]); for (let k = a; k < b; k++) { const d = (xs[k + 1] - xs[k]) / 3; ctx.bezierCurveTo(xs[k] + d, ys[off + k] + m[k] * d, xs[k + 1] - d, ys[off + k + 1] - m[k + 1] * d, xs[k + 1], ys[off + k + 1]); } } else { ctx.lineTo(xs[b], ys[off + b]); for (let k = b; k > a; k--) { const d = (xs[k] - xs[k - 1]) / 3; ctx.bezierCurveTo(xs[k] - d, ys[off + k] - m[k] * d, xs[k - 1] + d, ys[off + k - 1] + m[k - 1] * d, xs[k - 1], ys[off + k - 1]); } } } interface Clean { id: string; label: string; values: number[]; } interface Run { ready: boolean; enter: number; vis: number[]; emph: number[]; pct: number; lines: number; hi: number; gutter: number; gutterKey: string; gutterT: number; vs: number; ve: number; ts: number; te: number; col: number | null; source: "pointer" | "keyboard" | "prop" | null; plot: { l: number; r: number; t: number; b: number; ot: number; ob: number }; legendW: number; legendH: number; legendKey: string; drag: null | { mode: "move" | "left" | "right"; x: number; vs: number; ve: number; id: number }; focusId: string | null; yCache: string[]; xCache: string[]; inCache: string[]; endCache: string[]; fonts: { mono: string; alpha: string } | null; widths: Map; xs: Float64Array; los: Float64Array; his: Float64Array; tan: Float64Array; tot: Float64Array; } export function StackedAreaChart({ times, series, mode = "stacked", hidden: hiddenProp, defaultHidden, onHiddenChange, range, defaultRange, onRangeChange, brush = true, formatValue = defaultFormatValue, formatTime = defaultFormatTime, tableAggregate = "mean", activeIndex, activeTime, height = 400, ariaLabel = "Stacked area chart", tone: toneProp, className, }: StackedAreaChartProps) { const { tone, pal, reduce, vars } = useChartTheme(toneProp); const announcer = useRef(null); const tipRef = useRef(null); const wrapperRef = useRef(null); const legendRef = useRef(null); const legendBtns = useRef<(HTMLButtonElement | null)[]>([]); const startRef = useRef(null); const endRef = useRef(null); const bodyRef = useRef(null); const yPool = useRef<(HTMLSpanElement | null)[]>([]); const xPool = useRef<(HTMLSpanElement | null)[]>([]); const inPool = useRef<(HTMLSpanElement | null)[]>([]); const endPool = useRef<(HTMLSpanElement | null)[]>([]); const rectRef = useRef(null); const tableTimer = useRef | null>(null); const n = times.length; // Sanitised, folded series. Colour stays with the caller's index; "Other" takes the neutral. const folded = series.length > MAX_SERIES; const data = useMemo(() => { const clean = series.map((s) => ({ id: s.id, label: s.label, values: times.map((_, j) => { const v = s.values[j]; return Number.isFinite(v) && v > 0 ? v : 0; }), })); return foldSeries(clean, MAX_SERIES, (rest) => ({ id: OTHER_ID, label: "Other", values: times.map((_, j) => rest.reduce((sum, r) => sum + r.values[j], 0)), })); }, [series, times]); const colors = useMemo(() => data.map((_, i) => (folded && i === MAX_SERIES - 1 ? CHART_OTHER[tone] : seriesColor(tone, i))), [data, folded, tone]); const domain = useMemo<[number, number]>(() => { if (!n) return [0, DAY]; const a = times[0]; const b = times[n - 1]; return b > a ? [a, b] : [a - DAY / 2, a + DAY / 2]; }, [times, n]); // Typical spacing, for keyboard steps and the narrowest window. const stepMs = useMemo(() => { if (n < 2) return DAY; const diffs: number[] = []; for (let j = 1; j < n; j++) diffs.push(times[j] - times[j - 1]); diffs.sort((a, b) => a - b); return Math.max(1, diffs[diffs.length >> 1]); }, [times, n]); const minSpan = Math.min(domain[1] - domain[0], stepMs * (MIN_POINTS - 1)); const [hiddenState, setHiddenState] = useState(defaultHidden ?? []); const hiddenList = hiddenProp ?? hiddenState; const hiddenSet = useMemo(() => { const set = new Set(hiddenList); // Never hide everything. return data.every((s) => set.has(s.id)) ? new Set() : set; }, [hiddenList, data]); const visibleCount = data.filter((s) => !hiddenSet.has(s.id)).length; const initWindow = useMemo(() => { const r = range ?? defaultRange ?? domain; return clampWindow(r[0], r[1], domain[0], domain[1], minSpan); // Only the first render's window seeds the state. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const [tableRange, setTableRange] = useState<[number, number]>(initWindow); const legendKey = `${data.map((s) => s.label).join("|")}|${mode}`; const cfg = useRef({ times, data, colors, hiddenSet, mode, pal, tone, reduce, formatValue, formatTime, brush, domain, legendKey, minSpan }); useEffect(() => { cfg.current = { times, data, colors, hiddenSet, mode, pal, tone, reduce, formatValue, formatTime, brush, domain, legendKey, minSpan }; }); const st = useRef({ ready: false, enter: 0, vis: [], emph: [], pct: 0, lines: 0, hi: 1, gutter: 32, gutterKey: "", gutterT: 32, vs: initWindow[0], ve: initWindow[1], ts: initWindow[0], te: initWindow[1], col: null, source: null, plot: { l: 0, r: 0, t: 0, b: 0, ot: 0, ob: 0 }, legendW: -1, legendH: 0, legendKey: "", drag: null, focusId: null, yCache: [], xCache: [], inCache: [], endCache: [], fonts: null, widths: new Map(), xs: new Float64Array(0), los: new Float64Array(0), his: new Float64Array(0), tan: new Float64Array(0), tot: new Float64Array(0), }); const { rootRef, hostRef, canvasRef, wake } = useChartCanvas(({ ctx, w, h, dt }) => { const s = st.current; const c = cfg.current; const p = c.pal; const T = c.times; const N = T.length; const D = c.data; const S = D.length; const [d0, d1] = c.domain; const full = d1 - d0; if (!s.fonts) { const a = yPool.current[0]; const b = inPool.current[0]; if (a && b) { const fa = getComputedStyle(a); const fb = getComputedStyle(b); s.fonts = { mono: `${fa.fontWeight} ${fa.fontSize} ${fa.fontFamily}`, alpha: `${fb.fontWeight} ${fb.fontSize} ${fb.fontFamily}` }; } } const mono = s.fonts?.mono ?? "400 10px monospace"; const alphaFont = s.fonts?.alpha ?? "500 11px sans-serif"; const tw = (font: string, text: string) => measure(ctx, s.widths, font, text); // The legend wraps on narrow widths; the plot starts under it. if (s.legendW !== w || s.legendKey !== c.legendKey) { s.legendW = w; s.legendKey = c.legendKey; s.legendH = legendRef.current?.offsetHeight ?? 0; } // Scratch buffers, grown only when the data grows. if (s.xs.length < N) { s.xs = new Float64Array(N); s.tan = new Float64Array(Math.max(N, MAX_SERIES)); s.tot = new Float64Array(N); } if (s.los.length < N * S) { s.los = new Float64Array(N * S); s.his = new Float64Array(N * S); } const first = !s.ready || c.reduce; let moving = false; const approach = (cur: number, target: number, tau: number, tol: number) => { if (first || !Number.isFinite(cur)) return target; const v = damp(cur, target, tau, dt); if (Math.abs(v - target) > tol) { moving = true; return v; } return target; }; const focusIdx = s.focusId ? D.findIndex((d) => d.id === s.focusId && !c.hiddenSet.has(d.id)) : -1; for (let i = 0; i < S; i++) { const visT = c.hiddenSet.has(D[i].id) ? 0 : 1; s.vis[i] = approach(s.vis[i] ?? visT, visT, TAU, 1e-3); const emT = focusIdx < 0 ? 1 : i === focusIdx ? 1.45 : 0.4; s.emph[i] = approach(s.emph[i] ?? emT, emT, TAU * 0.7, 1e-3); } s.vis.length = S; s.emph.length = S; const pctT = c.mode === "percent" ? 1 : 0; const linesT = c.mode === "lines" ? 1 : 0; s.pct = approach(s.pct, pctT, TAU, 1e-3); s.lines = approach(s.lines, linesT, TAU, 1e-3); if (c.reduce || s.drag || first) { s.vs = s.ts; s.ve = s.te; } else { s.vs = approach(s.vs, s.ts, VIEW_TAU, full * 1e-5); s.ve = approach(s.ve, s.te, VIEW_TAU, full * 1e-5); } // Layout, bottom up: brush strip, axis labels, plot. const brushOn = c.brush && N > 1; const top = s.legendH > 0 ? s.legendH + LEGEND_GAP : 12; const ob = h - 1; const ot = brushOn ? ob - BRUSH_H : ob; const plotB = Math.max(top + 20, (brushOn ? ot - BRUSH_GAP : h) - AXIS_H); const pH = Math.max(1, plotB - top); const yCount = clamp(Math.round(pH / 56), 2, 6); // Points in the window, plus one outside each edge so the curves run off the plot. const i0 = Math.max(0, lowerBound(T, s.vs) - 1); const i1 = Math.min(N - 1, lowerBound(T, s.ve)); // Target y domain over the window, from the target visibility, so it heads straight for its end. let maxV = 0; for (let j = i0; j <= i1; j++) { let tot = 0; let mx = 0; for (let i = 0; i < S; i++) { if (c.hiddenSet.has(D[i].id)) continue; const v = D[i].values[j]; tot += v; if (v > mx) mx = v; } const m = linesT ? mx : tot; if (m > maxV) maxV = m; } const hiT = maxV > 0 ? niceDomain(0, maxV * 1.04, yCount)[1] : 1; s.hi = approach(s.hi, hiT, TAU, hiT * 1e-4); // Left gutter fits the widest target tick label, then glides there. const gk = `${hiT}|${yCount}|${pctT}|${s.fonts ? 1 : 0}`; if (s.gutterKey !== gk) { s.gutterKey = gk; const labels = pctT ? ["100%"] : niceTicks(0, hiT, yCount).map((v) => c.formatValue(v)); let mw = 0; for (const l of labels) mw = Math.max(mw, tw(mono, l)); s.gutterT = Math.max(24, Math.ceil(mw) + 10); } s.gutter = approach(s.gutter, s.gutterT, TAU, 0.3); s.ready = true; const plot = { l: Math.round(s.gutter), r: w - PAD_R, t: top, b: plotB, ot, ob }; s.plot = plot; const pW = Math.max(1, plot.r - plot.l); const span = Math.max(1e-9, s.ve - s.vs); const xOf = (t: number) => plot.l + ((t - s.vs) / span) * pW; s.enter = c.reduce ? 1 : Math.min(1, s.enter + (dt * 1000) / ENTER_MS); const e = easeOut(s.enter); // Horizontal grid and y labels. The value and percent sets cross-fade through the mode change. const usePct = s.pct >= 0.5; const fade = Math.abs(1 - 2 * s.pct); const ticks = usePct ? (pH < 120 ? [0, 0.5, 1] : [0, 0.25, 0.5, 0.75, 1]) : niceTicks(0, s.hi, yCount).filter((v) => v <= s.hi * 1.0001); const yTick = (v: number) => (usePct ? plot.b - v * pH : plot.b - (v / s.hi) * pH); ctx.lineWidth = 1; ctx.strokeStyle = p.hair; ctx.globalAlpha = fade; ctx.beginPath(); for (const v of ticks) { if (v <= 0) continue; const y = crisp(yTick(v)); ctx.moveTo(plot.l, y); ctx.lineTo(plot.r, y); } ctx.stroke(); ctx.globalAlpha = 1; writeLabels( yPool.current, s.yCache, ticks.map((v) => ({ text: usePct ? formatPercent(v) : c.formatValue(v), x: plot.l - 8, y: yTick(v), ax: -100, opacity: fade })), ); // Edge geometry for every series over the window, in screen space. When the window holds more // than one point per 3px, the drawing uses bucket means (buckets aligned to absolute indices, // so panning never shimmers; every series shares them, so the stack stays consistent). The // crosshair, tooltip and keyboard still read the true points. const xs = s.xs; const los = s.los; const his = s.his; const kL = 1 - s.lines; const B = Math.max(1, Math.ceil((i1 - i0 + 1) / Math.max(1, pW / 3))); const k0 = Math.max(0, Math.floor(i0 / B) - (B > 1 ? 1 : 0)); const k1 = Math.min(Math.floor((N - 1) / B), Math.floor(Math.max(0, i1) / B) + (B > 1 ? 1 : 0)); const R = N ? k1 - k0 + 1 : 0; for (let r = 0; r < R; r++) { const ja = (k0 + r) * B; const jb = Math.min(N - 1, ja + B - 1); const cnt = jb - ja + 1; let tm = 0; for (let j = ja; j <= jb; j++) tm += T[j]; xs[r] = xOf(tm / cnt); // s.tan doubles as per-series scratch here; the tangents overwrite it later. let tot = 0; for (let i = 0; i < S; i++) { let v = 0; for (let j = ja; j <= jb; j++) v += D[i].values[j]; v = (v / cnt) * s.vis[i]; s.tan[i] = v; tot += v; } let cum = 0; let cumP = 0; for (let i = 0; i < S; i++) { const v = s.tan[i]; const share = tot > 0 ? v / tot : 0; const b0 = cum * kL; const aS = plot.b - (b0 / s.hi) * pH; const bS = plot.b - ((b0 + v) / s.hi) * pH; const aP = plot.b - cumP * pH; const bP = plot.b - (cumP + share) * pH; let ya = aS + (aP - aS) * s.pct; let yb = bS + (bP - bS) * s.pct; if (e < 1) { ya = plot.b + (ya - plot.b) * e; yb = plot.b + (yb - plot.b) * e; } los[i * N + r] = ya; his[i * N + r] = yb; cum += v; cumP += share; } } const ra = 0; const rb = R - 1; let topVis = -1; for (let i = S - 1; i >= 0; i--) { if (s.vis[i] > 0.01) { topVis = i; break; } } ctx.save(); ctx.beginPath(); ctx.rect(plot.l, plot.t - 3, pW, pH + 3); ctx.clip(); ctx.lineJoin = "round"; if (rb > ra && S) { const fillBase = FILL_ALPHA[c.tone]; for (let i = 0; i < S; i++) { if (s.vis[i] <= 0.01) continue; const em = s.emph[i]; const col = c.colors[i]; ctx.beginPath(); monoTangents(xs, his, i * N, ra, rb, s.tan); traceEdge(ctx, xs, his, i * N, ra, rb, s.tan, false); monoTangents(xs, los, i * N, ra, rb, s.tan); traceEdge(ctx, xs, los, i * N, ra, rb, s.tan, true); ctx.closePath(); const fa = Math.min(0.85, fillBase * em) * kL; if (fa > 0.003) { ctx.fillStyle = withAlpha(col, fa); ctx.fill(); } if (kL > 0.5) { // The top stroke is clipped to its own band, so it never spills onto a neighbour. ctx.save(); ctx.clip(); ctx.beginPath(); monoTangents(xs, his, i * N, ra, rb, s.tan); traceEdge(ctx, xs, his, i * N, ra, rb, s.tan, false); ctx.lineWidth = i < topVis ? 5 : 3; ctx.strokeStyle = withAlpha(col, clamp(0.3 + 0.7 * em, 0, 1)); ctx.stroke(); ctx.restore(); } } // 2px surface seams between neighbouring bands. if (kL > 0.01) { ctx.strokeStyle = withAlpha(p.stage, kL); ctx.lineWidth = 2; for (let i = 0; i < topVis; i++) { if (s.vis[i] <= 0.01) continue; ctx.beginPath(); monoTangents(xs, his, i * N, ra, rb, s.tan); traceEdge(ctx, xs, his, i * N, ra, rb, s.tan, false); ctx.stroke(); } } if (kL <= 0.5) { ctx.lineWidth = 2; for (let i = 0; i < S; i++) { if (s.vis[i] <= 0.01) continue; ctx.beginPath(); monoTangents(xs, his, i * N, ra, rb, s.tan); traceEdge(ctx, xs, his, i * N, ra, rb, s.tan, false); ctx.strokeStyle = withAlpha(c.colors[i], s.vis[i] * clamp(0.3 + 0.7 * s.emph[i], 0, 1)); ctx.stroke(); } } } ctx.restore(); // Baseline. ctx.strokeStyle = p.textFaint; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(plot.l, crisp(plot.b)); ctx.lineTo(plot.r, crisp(plot.b)); ctx.stroke(); // Calendar x ticks for the window; labels clamp inside the box and drop on collision. const xt = timeTicks(s.vs, s.ve, pW, w < 520 ? 60 : 84); const xl: PlacedLabel[] = []; let lastR = -Infinity; ctx.strokeStyle = p.hair; ctx.beginPath(); for (const tk of xt) { const x = xOf(tk.t); if (x < plot.l - 0.5 || x > plot.r + 0.5) continue; ctx.moveTo(crisp(x), plot.b + 1); ctx.lineTo(crisp(x), plot.b + 5); const hw = tw(mono, tk.label) / 2; const cx = clamp(x, hw + 1, w - hw - 1); if (cx - hw < lastR + 8) continue; lastR = cx + hw; xl.push({ text: tk.label, x: cx, y: plot.b + 14, ax: -50 }); } ctx.stroke(); writeLabels(xPool.current, s.xCache, xl); // Direct labels inside bands, at the thickest stretch that fits the label. const inItems: PlacedLabel[] = []; const endItems: PlacedLabel[] = []; const labelIn = clamp((s.enter - 0.7) / 0.3, 0, 1); if (rb - ra >= 2 && kL > 0.02) { // Pixels per drawn point, to turn the label's half width into a reach in points. const per = (xs[rb] - xs[ra]) / Math.max(1, rb - ra); const stride = Math.max(1, Math.floor((rb - ra) / 90)); for (let i = 0; i < S; i++) { if (s.vis[i] < 0.5 || c.hiddenSet.has(D[i].id)) continue; const text = D[i].label; const half = tw(alphaFont, text) / 2 + 5; const reach = Math.max(1, Math.round(half / Math.max(0.1, per))); let best = -1; let bestT = 0; for (let j = ra + 1; j < rb; j += stride) { const x = xs[j]; if (x - half < plot.l + 2 || x + half > plot.r - 2) continue; const a = Math.max(ra, j - reach); const b = Math.min(rb, j + reach); const o = i * N; const ma = (a + j) >> 1; const mb = (j + b) >> 1; const t = Math.min(los[o + a] - his[o + a], los[o + ma] - his[o + ma], los[o + j] - his[o + j], los[o + mb] - his[o + mb], los[o + b] - his[o + b]); if (t > bestT) { bestT = t; best = j; } } if (best >= 0 && bestT >= 16) { inItems.push({ text, x: xs[best], y: (los[i * N + best] + his[i * N + best]) / 2, ax: -50, opacity: kL * labelIn * (s.emph[i] < 0.95 ? 0.5 : 1), }); } } } // Lines mode: labels at the right end, pushed apart, when there are few enough lines. if (s.lines > 0.02 && visibleCountOf(c.hiddenSet, D) <= 4 && rb > ra) { let jEnd = rb; while (jEnd > ra && xs[jEnd] > plot.r) jEnd--; const ys: { text: string; y: number; o: number }[] = []; for (let i = 0; i < S; i++) { if (s.vis[i] < 0.5 || c.hiddenSet.has(D[i].id)) continue; ys.push({ text: D[i].label, y: his[i * N + jEnd] - 9, o: s.emph[i] < 0.95 ? 0.5 : 1 }); } ys.sort((a, b) => a.y - b.y); for (let k = 1; k < ys.length; k++) if (ys[k].y - ys[k - 1].y < 13) ys[k].y = ys[k - 1].y + 13; const over = ys.length ? ys[ys.length - 1].y - (plot.b - 8) : 0; for (const it of ys) { const y = Math.max(plot.t + 4, it.y - Math.max(0, over)); endItems.push({ text: it.text, x: plot.r - 4, y, ax: -100, opacity: s.lines * labelIn * it.o }); } } writeLabels(inPool.current, s.inCache, inItems); writeLabels(endPool.current, s.endCache, endItems); // Crosshair: rule, a dot on each visible top edge, tooltip beside it. const tip = tipRef.current; const col = s.col; if (col !== null && col >= 0 && col < N && R > 0 && T[col] >= s.vs - span * 1e-6 && T[col] <= s.ve + span * 1e-6) { const x = xOf(T[col]); // Dots sit on the drawn edge: the exact point, or the resampled curve when bucketed. let rr = 0; while (rr < rb && xs[rr + 1] < x) rr++; const f = rr < rb && xs[rr + 1] > xs[rr] ? clamp((x - xs[rr]) / (xs[rr + 1] - xs[rr]), 0, 1) : 0; ctx.strokeStyle = withAlpha(p.text, 0.5); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(crisp(x) - 0.5, plot.t - 4); ctx.lineTo(crisp(x) - 0.5, plot.b); ctx.stroke(); for (let i = 0; i < S; i++) { if (s.vis[i] < 0.5) continue; ctx.beginPath(); ctx.arc(x, his[i * N + rr] + (rr < rb ? (his[i * N + rr + 1] - his[i * N + rr]) * f : 0), 3, 0, Math.PI * 2); ctx.fillStyle = c.colors[i]; ctx.fill(); ctx.lineWidth = 1.5; ctx.strokeStyle = p.stage; ctx.stroke(); } if (tip?.el) { tip.el.style.visibility = "visible"; const pos = placeTooltip(x, plot.t + 6, tip.size.w, tip.size.h, w, Math.max(plot.b + 8, plot.t + 6 + tip.size.h), 14); tip.el.style.transform = `translate3d(${pos.x}px, ${Math.max(plot.t, pos.y)}px, 0)`; } } else if (tip?.el) tip.el.style.visibility = "hidden"; // Overview strip: the total over the whole axis, with the brushed window. if (brushOn) { const oT = ot; const oH = ob - ot; ctx.fillStyle = withAlpha(p.text, 0.03); ctx.beginPath(); roundRectPath(ctx, plot.l, oT, pW, oH, 6, 6); ctx.fill(); const oxOf = (t: number) => plot.l + ((t - d0) / full) * pW; let maxTot = 0; for (let j = 0; j < N; j++) { let tot = 0; for (let i = 0; i < S; i++) tot += D[i].values[j] * s.vis[i]; s.tot[j] = tot; if (tot > maxTot) maxTot = tot; } const base = ob - 2; const oy = (v: number) => base - (maxTot > 0 ? v / maxTot : 0) * (oH - 8); // One vertex per pixel column, keeping each column's peak. const tracePeaks = () => { let px = -1; let pm = 0; let started = false; for (let j = 0; j < N; j++) { const x = Math.round(oxOf(T[j])); if (x !== px) { if (px >= 0) { if (!started) { ctx.moveTo(px, oy(pm)); started = true; } else ctx.lineTo(px, oy(pm)); } px = x; pm = s.tot[j]; } else if (s.tot[j] > pm) pm = s.tot[j]; } if (!started) ctx.moveTo(px, oy(pm)); else ctx.lineTo(px, oy(pm)); }; ctx.beginPath(); tracePeaks(); ctx.lineTo(plot.r, base); ctx.lineTo(plot.l, base); ctx.closePath(); ctx.fillStyle = withAlpha(p.text, 0.1); ctx.fill(); ctx.beginPath(); tracePeaks(); ctx.strokeStyle = withAlpha(p.text, 0.32); ctx.lineWidth = 1; ctx.stroke(); const bx0 = oxOf(s.vs); const bx1 = oxOf(s.ve); const whole = s.vs <= d0 + full * 1e-6 && s.ve >= d1 - full * 1e-6; if (!whole) { ctx.fillStyle = withAlpha(p.stage, 0.62); ctx.fillRect(plot.l, oT, bx0 - plot.l, oH); ctx.fillRect(bx1, oT, plot.r - bx1, oH); } ctx.fillStyle = withAlpha(p.accent, whole ? 0.05 : 0.08); ctx.fillRect(bx0, oT, bx1 - bx0, oH); ctx.strokeStyle = withAlpha(p.accentInk, whole ? 0.45 : 0.9); ctx.lineWidth = 1; ctx.strokeRect(Math.round(bx0) + 0.5, oT + 0.5, Math.max(1, Math.round(bx1 - bx0) - 1), oH - 1); for (const gx of [bx0, bx1]) { ctx.fillStyle = p.accent; ctx.beginPath(); roundRectPath(ctx, gx - 2.5, oT + oH / 2 - 8, 5, 16, 2.5, 2.5); ctx.fill(); } const hs = startRef.current; const he = endRef.current; const hb = bodyRef.current; if (hs) hs.style.transform = `translate3d(${(bx0 - 8).toFixed(1)}px, ${oT}px, 0)`; if (he) he.style.transform = `translate3d(${(bx1 - 8).toFixed(1)}px, ${oT}px, 0)`; if (hb) { hb.style.transform = `translate3d(${bx0.toFixed(1)}px, ${oT}px, 0)`; hb.style.width = `${Math.max(0, bx1 - bx0).toFixed(1)}px`; } } return moving || s.enter < 1 || !!s.drag; }); // Fonts landing changes every measurement. useEffect(() => { if (typeof document === "undefined" || !document.fonts) return; let live = true; document.fonts.ready.then(() => { if (!live) return; const s = st.current; s.widths.clear(); s.fonts = null; s.gutterKey = ""; s.legendW = -1; wake(); }); return () => { live = false; }; }, [wake]); const syncAria = () => { const s = st.current; const [d0, d1] = domain; const set = (el: HTMLElement | null, now: number, text: string) => { if (!el) return; el.setAttribute("aria-valuemin", String(Math.round(d0))); el.setAttribute("aria-valuemax", String(Math.round(d1))); el.setAttribute("aria-valuenow", String(Math.round(now))); el.setAttribute("aria-valuetext", text); }; set(startRef.current, s.ts, formatTime(s.ts)); set(endRef.current, s.te, formatTime(s.te)); set(bodyRef.current, s.ts, `${formatTime(s.ts)} to ${formatTime(s.te)}`); }; const scheduleTable = () => { if (tableTimer.current) clearTimeout(tableTimer.current); tableTimer.current = setTimeout(() => { const s = st.current; setTableRange((prev) => (prev[0] === s.ts && prev[1] === s.te ? prev : [s.ts, s.te])); }, 160); }; useEffect( () => () => { if (tableTimer.current) clearTimeout(tableTimer.current); }, [], ); const setView = (a: number, b: number, commit: boolean) => { const s = st.current; [s.ts, s.te] = clampWindow(a, b, domain[0], domain[1], minSpan); syncAria(); if (commit) { onRangeChange?.([s.ts, s.te]); scheduleTable(); } wake(); }; // Controlled window. useEffect(() => { if (!range) return; const s = st.current; [s.ts, s.te] = clampWindow(range[0], range[1], domain[0], domain[1], minSpan); syncAria(); scheduleTable(); wake(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [range?.[0], range?.[1], wake]); // A new axis keeps the window inside it. useEffect(() => { const s = st.current; [s.ts, s.te] = clampWindow(s.ts, s.te, domain[0], domain[1], minSpan); if (s.col !== null && s.col >= n) s.col = null; syncAria(); scheduleTable(); wake(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [domain, minSpan, n, wake]); const visibleRows = (j: number) => { let tot = 0; for (const sr of data) if (!hiddenSet.has(sr.id)) tot += sr.values[j] ?? 0; return { tot, rows: data.map((sr, i) => ({ sr, i, v: sr.values[j] ?? 0 })).filter((r) => !hiddenSet.has(r.sr.id)) }; }; const tooltipFor = (j: number): TooltipContent | null => { if (j < 0 || j >= n) return null; const { tot, rows } = visibleRows(j); const out: TooltipRow[] = [...rows].reverse().map(({ sr, i, v }) => ({ key: sr.id, label: sr.label, value: mode === "percent" ? formatShare(tot > 0 ? v / tot : 0) : formatValue(v), color: colors[i], })); out.push({ key: "__total", label: "Total", value: formatValue(tot) }); return { key: `${j}|${mode}|${[...hiddenSet].join(",")}|${pal.text}|${data.length}`, title: formatTime(times[j]), rows: out }; }; const describe = (j: number) => { const { tot, rows } = visibleRows(j); const parts = [...rows].reverse().map(({ sr, v }) => `${sr.label} ${mode === "percent" ? formatShare(tot > 0 ? v / tot : 0) : formatValue(v)}`); return `${formatTime(times[j])}. Total ${formatValue(tot)}. ${parts.join(", ")}`; }; const setCursor = (j: number | null, source: Run["source"]) => { const s = st.current; const changed = s.col !== j; s.col = j; s.source = j === null ? null : source; if (changed) tipRef.current?.set(j === null ? null : tooltipFor(j)); if (changed && j !== null && source === "keyboard") announcer.current?.say(describe(j)); wake(); }; // Refresh an open tooltip when what it shows changes. useEffect(() => { const s = st.current; if (s.col !== null) tipRef.current?.set(tooltipFor(s.col)); s.gutterKey = ""; wake(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [data, colors, hiddenSet, mode, pal, reduce, formatValue, formatTime, brush, wake]); // Posed crosshair. useEffect(() => { if (activeIndex === undefined && activeTime === undefined) return; const j = activeIndex != null ? clamp(Math.round(activeIndex), 0, n - 1) : activeTime != null ? nearestIndex(times, activeTime) : null; setCursor(j !== null && j >= 0 && n ? j : null, "prop"); // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeIndex, activeTime, times, n]); useEffect(() => { syncAria(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [formatTime, brush]); const local = (e: PointerEvent) => { const r = rectRef.current ?? wrapperRef.current?.getBoundingClientRect(); return r ? { x: e.clientX - r.left, y: e.clientY - r.top } : null; }; const brushOn = brush && n > 1; const inBrush = (x: number, y: number) => { const P = st.current.plot; return brushOn && y >= P.ot - 6 && y <= P.ob + 4 && x >= P.l - 12 && x <= P.r + 12; }; const brushHit = (x: number, touch: boolean): "left" | "right" | "move" | null => { const s = st.current; const P = s.plot; const [d0, d1] = domain; const ox = (t: number) => P.l + ((t - d0) / (d1 - d0)) * (P.r - P.l); const bx0 = ox(s.ts); const bx1 = ox(s.te); const slop = touch ? 16 : 9; const dl = Math.abs(x - bx0); const dr = Math.abs(x - bx1); if (dl <= slop && dl <= dr) return "left"; if (dr <= slop) return "right"; if (x > bx0 && x < bx1) return "move"; return null; }; const onPointerDown = (e: PointerEvent) => { if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect(); const pt = local(e); if (!pt) return; const s = st.current; if (inBrush(pt.x, pt.y)) { let mode = brushHit(pt.x, e.pointerType === "touch"); if (!mode) { // Click outside the window: centre it there, then keep dragging it. const P = s.plot; const t = domain[0] + ((pt.x - P.l) / Math.max(1, P.r - P.l)) * (domain[1] - domain[0]); const wv = s.te - s.ts; setView(t - wv / 2, t + wv / 2, false); mode = "move"; } s.drag = { mode, x: pt.x, vs: s.ts, ve: s.te, id: e.pointerId }; e.currentTarget.setPointerCapture(e.pointerId); e.currentTarget.style.cursor = mode === "move" ? "grabbing" : "ew-resize"; if (s.source === "pointer") setCursor(null, null); wake(); return; } if (e.pointerType === "touch") onPointerMove(e); }; const onPointerMove = (e: PointerEvent) => { const pt = local(e); if (!pt) return; const s = st.current; const P = s.plot; const pW = Math.max(1, P.r - P.l); if (s.drag && s.drag.id === e.pointerId) { const dT = ((pt.x - s.drag.x) / pW) * (domain[1] - domain[0]); const { vs, ve } = s.drag; if (s.drag.mode === "move") setView(vs + dT, ve + dT, false); else if (s.drag.mode === "left") setView(Math.min(vs + dT, ve - minSpan), ve, false); else setView(vs, Math.max(ve + dT, vs + minSpan), false); return; } const el = e.currentTarget; if (inBrush(pt.x, pt.y)) { const hit = brushHit(pt.x, false); el.style.cursor = hit === "move" ? "grab" : hit ? "ew-resize" : "pointer"; if (s.source === "pointer") setCursor(null, null); return; } if (pt.x < P.l || pt.x > P.r || pt.y < P.t - 6 || pt.y > P.b + 4 || !n) { el.style.cursor = ""; if (s.source === "pointer") setCursor(null, null); return; } el.style.cursor = "crosshair"; const t = s.vs + ((pt.x - P.l) / pW) * (s.ve - s.vs); let j = nearestIndex(times, t); const a = lowerBound(times, s.vs); const b = lowerBound(times, s.ve + 1e-6) - 1; if (a <= b) j = clamp(j, a, b); setCursor(j, "pointer"); }; const endDrag = (e: PointerEvent) => { const s = st.current; if (s.drag && s.drag.id === e.pointerId) { s.drag = null; e.currentTarget.style.cursor = ""; setView(s.ts, s.te, true); } }; const onDoubleClick = (e: MouseEvent) => { const r = wrapperRef.current?.getBoundingClientRect(); if (!r) return; if (inBrush(e.clientX - r.left, e.clientY - r.top)) setView(domain[0], domain[1], true); }; // Moves the window so point j is inside it. const ensureVisible = (j: number) => { const s = st.current; const t = times[j]; const wv = s.te - s.ts; if (t < s.ts) setView(t, t + wv, true); else if (t > s.te) setView(t - wv, t, true); }; const onKeyDown = (e: KeyboardEvent) => { if (e.target !== e.currentTarget || !n) return; const s = st.current; const a = Math.min(n - 1, lowerBound(times, s.ts)); const b = Math.max(a, lowerBound(times, s.te + 1e-6) - 1); const page = Math.max(1, Math.round((b - a + 1) * 0.1)); let next: number | null = null; if (e.key === "ArrowRight" || e.key === "ArrowLeft") next = s.col === null || s.source === "pointer" ? (e.key === "ArrowRight" ? a : b) : s.col + (e.key === "ArrowRight" ? 1 : -1); else if (e.key === "PageUp" || e.key === "PageDown") next = (s.col ?? (e.key === "PageUp" ? a : b)) + (e.key === "PageUp" ? page : -page); else if (e.key === "Home") next = a; else if (e.key === "End") next = b; else if (e.key === "Escape") { if (s.col === null) return; e.preventDefault(); setCursor(null, null); return; } if (next === null) return; e.preventDefault(); next = clamp(next, 0, n - 1); ensureVisible(next); setCursor(next, "keyboard"); }; const onSliderKey = (which: "start" | "end" | "window", e: KeyboardEvent) => { const s = st.current; const [d0, d1] = domain; const big = (d1 - d0) * 0.1; let d = 0; let to: "min" | "max" | null = null; if (e.key === "ArrowLeft" || e.key === "ArrowDown") d = -stepMs; else if (e.key === "ArrowRight" || e.key === "ArrowUp") d = stepMs; else if (e.key === "PageDown") d = -big; else if (e.key === "PageUp") d = big; else if (e.key === "Home") to = "min"; else if (e.key === "End") to = "max"; else return; e.preventDefault(); e.stopPropagation(); const wv = s.te - s.ts; if (which === "start") { const v = to === "min" ? d0 : to === "max" ? s.te - minSpan : clamp(s.ts + d, d0, s.te - minSpan); setView(v, s.te, true); } else if (which === "end") { const v = to === "min" ? s.ts + minSpan : to === "max" ? d1 : clamp(s.te + d, s.ts + minSpan, d1); setView(s.ts, v, true); } else { const v = to === "min" ? d0 : to === "max" ? d1 - wv : s.ts + d; setView(v, v + wv, true); } }; const toggle = (id: string) => { const off = hiddenSet.has(id); if (!off && visibleCount <= 1) return; const next = off ? hiddenList.filter((x) => x !== id) : [...hiddenList.filter((x) => x !== id), id]; if (hiddenProp === undefined) setHiddenState(next); onHiddenChange?.(next); }; // Legend hover and focus emphasise a band without re-rendering the chart. const emphasise = (id: string | null) => { const s = st.current; const target = id && !hiddenSet.has(id) ? id : null; if (s.focusId === target) return; s.focusId = target; data.forEach((sr, i) => { const el = legendBtns.current[i]; if (el) el.dataset.dim = target && sr.id !== target ? "true" : "false"; }); wake(); }; const tableCols = useMemo(() => ["Date", ...data.filter((s) => !hiddenSet.has(s.id)).map((s) => s.label), "Total"], [data, hiddenSet]); const { tableRows, tableCaption } = useMemo(() => { const vis = data.filter((s) => !hiddenSet.has(s.id)); const a = lowerBound(times, tableRange[0]); const b = lowerBound(times, tableRange[1] + 1e-6) - 1; const count = Math.max(0, b - a + 1); const rows: (string | number)[][] = []; if (count <= TABLE_MAX_ROWS) { for (let j = a; j <= b; j++) { let tot = 0; const cells = vis.map((s) => { tot += s.values[j]; return formatValue(s.values[j]); }); rows.push([formatTime(times[j]), ...cells, formatValue(tot)]); } return { tableRows: rows, tableCaption: `${ariaLabel}, ${count} points` }; } // Too many rows to read: roll up by week (Monday start) or by month. const byMonth = times[b] - times[a] > 182 * DAY; const keyOf = (t: number) => { if (byMonth) { const d = new Date(t); return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1); } return Math.floor((t - 4 * DAY) / (7 * DAY)) * 7 * DAY + 4 * DAY; }; let j = a; while (j <= b) { const k = keyOf(times[j]); let end = j; while (end + 1 <= b && keyOf(times[end + 1]) === k) end++; let tot = 0; const cells = vis.map((s) => { let v = 0; if (tableAggregate === "last") v = s.values[end]; else { for (let q = j; q <= end; q++) v += s.values[q]; if (tableAggregate === "mean") v /= end - j + 1; } tot += v; return formatValue(v); }); rows.push([byMonth ? monthFmt.format(k) : `Week of ${weekFmt.format(Math.max(k, times[j]))}`, ...cells, formatValue(tot)]); j = end + 1; } const how = tableAggregate === "mean" ? "averages" : tableAggregate === "sum" ? "totals" : "closing values"; return { tableRows: rows, tableCaption: `${ariaLabel}, ${byMonth ? "monthly" : "weekly"} ${how}` }; }, [data, hiddenSet, times, tableRange, tableAggregate, formatValue, formatTime, ariaLabel]); const summary = useMemo(() => { if (!n || !data.length) return `${ariaLabel}: no data`; const j = n - 1; let tot = 0; let best = -1; let bestV = -1; data.forEach((sr, i) => { if (hiddenSet.has(sr.id)) return; tot += sr.values[j]; if (sr.values[j] > bestV) { bestV = sr.values[j]; best = i; } }); const lead = best >= 0 && tot > 0 ? `, largest ${data[best].label} at ${formatShare(bestV / tot)}` : ""; return `${ariaLabel}: ${visibleCount} series from ${formatTime(times[0])} to ${formatTime(times[n - 1])}. Latest total ${formatValue(tot)}${lead}.`; }, [n, data, hiddenSet, times, ariaLabel, visibleCount, formatTime, formatValue]); const keyShape = mode === "lines" ? "line" : "rect"; return (

{data.map((sr, i) => { const off = hiddenSet.has(sr.id); const locked = !off && visibleCount <= 1; return ( ); })}

{ if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect(); }} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag} onPointerLeave={(e) => { // A touch tap or scrub fires leave on lift; keep the crosshair until the next touch. if (e.pointerType !== "touch" && st.current.source === "pointer") setCursor(null, null); }} onDoubleClick={onDoubleClick} onBlur={() => setCursor(null, null)} onKeyDown={onKeyDown} className={cn("absolute inset-0 touch-pan-y rounded-[10px]", chartFocusRing)} >

{brushOn && ( <>

onSliderKey("start", e)} aria-valuenow={Math.round(initWindow[0])} className={cn("absolute left-0 top-0 z-[1] w-4 rounded-[6px]", chartFocusRing)} style={{ height: BRUSH_H }} />

onSliderKey("window", e)} aria-valuenow={Math.round(initWindow[0])} className={cn("absolute left-0 top-0 rounded-[4px]", chartFocusRing)} style={{ height: BRUSH_H }} />

onSliderKey("end", e)} aria-valuenow={Math.round(initWindow[1])} className={cn("absolute left-0 top-0 z-[1] w-4 rounded-[6px]", chartFocusRing)} style={{ height: BRUSH_H }} /> )}

); } function visibleCountOf(hidden: Set, data: Clean[]): number { let k = 0; for (const d of data) if (!hidden.has(d.id)) k++; return k; } a4: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; a5: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}%)`; } } a6:Td34,"use client"; import { useCallback, useEffect, useMemo, useRef, type RefObject } from "react"; export interface VisibleLoopOptions { enabled?: boolean; fpsCap?: number; rootMargin?: string; } /** * Runs `frame(dt, t)` on requestAnimationFrame while the element is near the viewport, * the tab is visible and `enabled` is not false. Return `false` from `frame` to go idle * until `wake()` is called. Writes `data-loop` on the element: running, idle or paused. */ export function useVisibleLoop( ref: RefObject, frame: (dt: number, t: number) => boolean | void, opts?: VisibleLoopOptions, ): { wake: () => void } { const enabled = opts?.enabled !== false; const fpsCap = opts?.fpsCap ?? 0; const rootMargin = opts?.rootMargin ?? "96px"; const frameRef = useRef(frame); useEffect(() => { frameRef.current = frame; }, [frame]); const wakeRef = useRef<() => void>(() => {}); const wake = useCallback(() => wakeRef.current(), []); useEffect(() => { const el = ref.current; if (!el || typeof window === "undefined") return; let wants = true; // false once the frame callback returns false let inView = false; let raf = 0; let last = 0; let t = 0; const minFrame = fpsCap > 0 ? 1000 / fpsCap : 0; const canRun = () => enabled && inView && document.visibilityState === "visible"; const stop = () => { if (raf) cancelAnimationFrame(raf); raf = 0; }; const update = () => { if (!enabled) { stop(); el.dataset.loop = "paused"; return; } if (!wants) { stop(); el.dataset.loop = "idle"; return; } if (!canRun()) { stop(); el.dataset.loop = "paused"; return; } el.dataset.loop = "running"; if (!raf) { last = performance.now(); raf = requestAnimationFrame(tick); } }; const tick = (now: number) => { raf = 0; if (!canRun() || !wants) { update(); return; } const elapsed = now - last; if (minFrame && elapsed < minFrame - 0.5) { raf = requestAnimationFrame(tick); return; } last = now; const dt = Math.min(0.05, Math.max(0, elapsed / 1000)); t += dt; const keep = frameRef.current(dt, t); if (keep === false) { wants = false; update(); return; } raf = requestAnimationFrame(tick); }; const observer = new IntersectionObserver( ([entry]) => { inView = entry.isIntersecting; update(); }, { rootMargin }, ); observer.observe(el); const onVisibility = () => update(); document.addEventListener("visibilitychange", onVisibility); wakeRef.current = () => { wants = true; update(); }; update(); return () => { stop(); observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); wakeRef.current = () => {}; }; }, [ref, enabled, fpsCap, rootMargin]); return useMemo(() => ({ wake }), [wake]); } // matchMedia based check. False on the server. export function isCoarsePointer(): boolean { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false; return window.matchMedia("(pointer: coarse)").matches; } a7: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; } a8: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)); }; } a9: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 ; }); aa: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; } ab: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); } ac:Te33,// Series colour for the Charts collection: a fixed categorical order for identity and a one-hue // ramp for magnitude. Pure data and functions; every chart imports what it needs by path. // // The categorical order is warm-anchored: the ember accent first, then warm ink-neutral steps, // then one cool counterpoint (steel), then deeper or lighter steps of the accent family. Every // light slot clears 3:1 on the paper stage. Hues are assigned in this order and never cycled: // past six series, fold the rest into "Other" (see `foldSeries`). import type { BjorkTone } from "@/components/bjork-ui/_core/palette"; import { clamp, lerp, parseColor } from "@/components/bjork-ui/charts/_kit/scale"; export const CHART_SERIES: Record = { // ember warm ink warm grey steel deep rust light ember dark: ["#ec5c13", "#d9d3c7", "#8f877a", "#5b8fb9", "#b84a12", "#f0a272"], light: ["#c94f10", "#3a352d", "#8a8174", "#3f6f96", "#8f3a0e", "#d67a45"], }; // The neutral an "Other" bucket takes, so it never impersonates a series. export const CHART_OTHER: Record = { dark: "#5c5c5c", light: "#a8a39a" }; export const MAX_SERIES = 6; // Slot colour by the series' stable index (its position in the caller's data, never its rank). export function seriesColor(tone: BjorkTone, index: number): string { const set = CHART_SERIES[tone]; return index >= 0 && index < set.length ? set[index] : CHART_OTHER[tone]; } // Keeps the first `max - 1` items and sums the rest into one "Other" item when there are more // than `max`. `merge` builds the Other item from the folded ones. export function foldSeries(items: T[], max: number, merge: (rest: T[]) => T): T[] { if (items.length <= max) return items; return [...items.slice(0, max - 1), merge(items.slice(max - 1))]; } // One-hue magnitude ramp in the accent family. t = 0 recedes toward the stage, t = 1 is the // strongest step. Dark mode brightens with magnitude, light mode darkens, so "more" always reads // as more contrast against the surface. const RAMP: Record = { dark: ["#1d1611", "#3a2112", "#6a3013", "#a84514", "#ec5c13", "#ff9a5c"], light: ["#f1e8dc", "#f3cfb2", "#eda57a", "#e07a43", "#b4531f", "#7a3412"], }; export function rampColor(tone: BjorkTone, t: number): string { const stops = RAMP[tone]; const x = clamp(Number.isFinite(t) ? t : 0, 0, 1) * (stops.length - 1); const i = Math.min(stops.length - 2, Math.floor(x)); const a = parseColor(stops[i]); const b = parseColor(stops[i + 1]); const f = x - i; return `rgb(${Math.round(lerp(a[0], b[0], f))},${Math.round(lerp(a[1], b[1], f))},${Math.round(lerp(a[2], b[2], f))})`; } // WCAG relative luminance of an sRGB colour. function relLum(color: string): number { const [r, g, b] = parseColor(color).map((c) => { const v = c / 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; } // Light or dark ink for text on a filled mark, whichever has more WCAG contrast. The inks are // near-white (L ≈ 0.94) and near-black (L ≈ 0.009). Saturated orange gets dark ink; white text // only lands on the deeper rust steps, the same rule as --bjork-accent-fill. export function inkOn(color: string): "light" | "dark" { const L = relLum(color); return (0.94 + 0.05) / (L + 0.05) >= (L + 0.05) / (0.009 + 0.05) ? "light" : "dark"; } // Whether text on a ramp cell at `t` should use the light or dark ink. export function rampInk(tone: BjorkTone, t: number): "light" | "dark" { return inkOn(rampColor(tone, t)); } 7f:["$","$La2",null,{"files":[{"path":"components/bjork-ui/charts/stacked-area-chart.tsx","content":"$a3","type":"registry:component","target":"@components/bjork-ui/charts/stacked-area-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":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"path":"components/bjork-ui/charts/_kit/canvas.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/charts/_kit/canvas.ts"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a6","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/canvas.ts","content":"$a7","type":"registry:component","target":"@components/bjork-ui/_core/canvas.ts"},{"path":"components/bjork-ui/_core/motion.ts","content":"$a8","type":"registry:component","target":"@components/bjork-ui/_core/motion.ts"},{"path":"components/bjork-ui/charts/_kit/chrome.tsx","content":"$a9","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":"$aa","type":"registry:component","target":"@components/bjork-ui/_core/surface.ts"},{"path":"components/bjork-ui/charts/_kit/scale.ts","content":"$ab","type":"registry:component","target":"@components/bjork-ui/charts/_kit/scale.ts"},{"path":"components/bjork-ui/charts/_kit/series.ts","content":"$ac","type":"registry:component","target":"@components/bjork-ui/charts/_kit/series.ts"}],"className":"h-[70svh] min-h-80"}]