7f:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 9f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] a1:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}] 54:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}] 55:["$","div","bjork-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fffcf6"}]]}] 56:["$","div","bjork-surface-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(250, 246, 237, 0.94)"}}],["$","p",null,{"children":"rgba(250, 246, 237, 0.94)"}]]}]}]]}] 57:["$","div","bjork-surface-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f5efe3"}]]}] 58:["$","div","bjork-surface-active",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-active",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#efe7d8"}]]}] 59:["$","div","bjork-panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8f2e7"}]]}] 5a:["$","div","bjork-menu",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-menu",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255, 252, 246, 0.98)"}}],["$","p",null,{"children":"rgba(255, 252, 246, 0.98)"}]]}]}]]}] 5b:["$","div","bjork-field",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255, 252, 246, 0.96)"}}],["$","p",null,{"children":"rgba(255, 252, 246, 0.96)"}]]}]}]]}] 5c:["$","div","bjork-field-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(248, 242, 231, 0.82)"}}],["$","p",null,{"children":"rgba(248, 242, 231, 0.82)"}]]}]}]]}] 5d:["$","div","bjork-field-inset",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field-inset",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(239, 231, 216, 0.72)"}}],["$","p",null,{"children":"rgba(239, 231, 216, 0.72)"}]]}]}]]}] 5e:["$","div","bjork-error-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-error-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff0e8"}]]}] 5f:["$","div","bjork-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#171717"}]]}] 60:["$","div","bjork-text-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.9)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.9)"}]]}]}]]}] 61:["$","div","bjork-text-medium",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-medium",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.78)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.78)"}]]}]}]]}] 62:["$","div","bjork-text-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.68)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.68)"}]]}]}]]}] 63:["$","div","bjork-text-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.62)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.62)"}]]}]}]]}] 64:["$","div","bjork-text-faint",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-text-faint",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(23, 23, 23, 0.22)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.22)"}]]}]}]]}] 65:["$","div","bjork-inverted-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-inverted-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff8f0"}]]}] 66:["$","div","bjork-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#eee6db"}]]}] 67:["$","div","bjork-border-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-border-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f5ede2"}]]}] 68:["$","div","bjork-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e1d7c8"}]]}] 69:["$","div","bjork-thumb",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-thumb",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#a49b8e"}]]}] 6a:["$","div","bjork-track",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-track",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ded6ca"}]]}] 6b:["$","div","bjork-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ec7d43"}]]}] 6c:["$","div","bjork-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0935f"}]]}] 6d:["$","div","bjork-accent-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(236, 125, 67, 0.1)"}}],["$","p",null,{"children":"rgba(236, 125, 67, 0.1)"}]]}]}]]}] 6e:["$","div","bjork-accent-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(236, 125, 67, 0.2)"}}],["$","p",null,{"children":"rgba(236, 125, 67, 0.2)"}]]}]}]]}] 6f:["$","div","bjork-accent-badge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-badge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(236, 125, 67, 0.16)"}}],["$","p",null,{"children":"rgba(236, 125, 67, 0.16)"}]]}]}]]}] 70:["$","div","bjork-accent-badge-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-badge-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8d421d"}]]}] 71:["$","div","bjork-accent-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#3f2112"}]]}] 72:["$","div","bjork-accent-fill",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-fill",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ec7d43"}]]}] 73:["$","div","bjork-accent-fill-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-accent-fill-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0935f"}]]}] 74:["$","div","bjork-shadow-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)"}]]}] 75:["$","div","bjork-shadow-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)"}]]}] 76:["$","div","bjork-shadow-panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)"}]]}] 77:["$","div","bjork-shadow-menu",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-menu",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)"}]]}] 78:["$","div","bjork-shadow-inset",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-shadow-inset",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)"}]]}] 79:["$","div","bjork-ring-offset",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-ring-offset",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}]]}] 7a:["$","$L7f",null,{"orientation":"horizontal"}] 7b:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","bjork-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#111111"}]]}],["$","div","bjork-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#121212"}]]}],["$","div","bjork-surface-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(22, 22, 22, 0.92)"}}],["$","p",null,{"children":"rgba(22, 22, 22, 0.92)"}]]}]}]]}],["$","div","bjork-surface-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#161616"}]]}],["$","div","bjork-surface-active",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-surface-active",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#202020"}]]}],["$","div","bjork-panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d0d0d"}]]}],["$","div","bjork-menu",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-menu",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(18, 18, 18, 0.98)"}}],["$","p",null,{"children":"rgba(18, 18, 18, 0.98)"}]]}]}]]}],["$","div","bjork-field",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(18, 18, 18, 0.95)"}}],["$","p",null,{"children":"rgba(18, 18, 18, 0.95)"}]]}]}]]}],["$","div","bjork-field-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-field-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(18, 18, 18, 0.55)"}}],"$L80"]}]}]]}],"$L81","$L82","$L83","$L84","$L85","$L86","$L87","$L88","$L89","$L8a","$L8b","$L8c","$L8d","$L8e","$L8f","$L90","$L91","$L92","$L93","$L94","$L95","$L96","$L97","$L98","$L99","$L9a","$L9b","$L9c","$L9d"]}],"$L9e"]}]}]]}] 7c:null a0:Ta62,.bjork-range { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06); } .bjork-range::-webkit-slider-thumb { appearance: none; width: 16px; height: 8px; border: 0; border-radius: 999px; background: var(--bjork-thumb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42); } .bjork-range::-moz-range-thumb { width: 16px; height: 8px; border: 0; border-radius: 999px; background: var(--bjork-thumb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42); } .bjork-layered-button-accent, .bjork-layered-button-raised { position: relative; isolation: isolate; appearance: none; overflow: hidden; border: 0; border-radius: 13px; box-shadow: inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; transition: filter 150ms ease-out, box-shadow 150ms ease-out; } .bjork-layered-button-accent::after, .bjork-layered-button-raised::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: 1.5px solid transparent; border-radius: inherit; background: linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-clip: padding-box, border-box; mask-clip: padding-box, border-box; -webkit-mask-origin: padding-box, border-box; mask-origin: padding-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude; } .bjork-layered-button-accent { color: oklch(100% 0 0); text-shadow: 0 -1px #00000040; background: radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%); } .bjork-layered-button-raised { color: oklch(100% 0 0); text-shadow: 0 -1px #00000026; background: radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265)); } .dark .bjork-layered-button-raised { color: oklch(0.2574 0.0056 265); text-shadow: 0 -1px #00000026; background: radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%)); } @media (hover: hover) { .bjork-layered-button-accent:hover { filter: brightness(1.08) saturate(1.04); } .bjork-layered-button-raised:hover { filter: brightness(1.08) contrast(0.9); } }7d:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L9f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$a0"}]}]]}] a2:T6d0f,"use client"; // Chromatic Text: crisp, single-coloured type that only splits into colour when it moves. // Pointer velocity is splatted into a small flow-field texture that decays (and drifts a little // along itself) every frame. The display shader samples the text along that flow with a // spectral spread of taps, so fast strokes leave a rainbow smear that settles back to one ink. // A soft lens magnifies under the cursor. The loop goes idle as soon as everything has settled. import { useCallback, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore, type Ref, } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { defaultMaxDpr, sizeCanvas, useElementSize } from "../_core/canvas"; import { useVisibleLoop } from "../_core/loop"; import { useBjorkTone } from "../_core/tone"; import { BJORK_PALETTE, type BjorkTone } from "../_core/palette"; export interface ChromaticTextHandle { /** Sweeps a one-shot aberration across the word. */ pulse: () => void; } export interface ChromaticTextProps { text?: string; /** Ink colour. Defaults to the tone's text colour. */ color?: string; /** Background the type usually sits on. Only used to tint the colour fringes correctly. */ background?: string; /** Strength of the colour split. 0 to 2, default 1. */ intensity?: number; /** Radius of the pointer's influence and lens in CSS px. Defaults to 45% of the font size. */ radius?: number; /** Seconds for the aberration to fade after the pointer stops. Default 0.7. */ decay?: number; /** Fine grain and scanlines that show up with motion. 0 to 1, default 0. */ grain?: number; /** Lens magnification under the cursor. 0 to 0.4, default 0.14. */ lens?: number; tone?: BjorkTone; /** Upper bound for the font size in CSS px. The type shrinks to fit narrower containers. */ fontSize?: number; fontWeight?: number; fontFamily?: string; /** Run a pulse once the type is ready. */ pulseOnMount?: boolean; /** Render a single frame of a pulse frozen mid-sweep. Used for previews. */ frozen?: boolean; ariaLabel?: string; className?: string; ref?: Ref; } // ─── WebGL2 support (cached, client only) ──────────────────────────────────── let webgl2Support: boolean | null = null; function getWebGL2Support(): boolean { if (webgl2Support === null) { try { const probe = document.createElement("canvas"); const ctx = probe.getContext("webgl2"); webgl2Support = !!ctx; ctx?.getExtension("WEBGL_lose_context")?.loseContext(); } catch { webgl2Support = false; } } return webgl2Support; } // React StrictMode runs effect cleanups and re-runs them on the same canvas. Losing the context // right away would hand the second run a dead context, so the release waits a tick and is // cancelled if the canvas is picked up again. const pendingRelease = new WeakMap(); function claimCanvas(canvas: HTMLCanvasElement) { const t = pendingRelease.get(canvas); if (t !== undefined) { window.clearTimeout(t); pendingRelease.delete(canvas); } } function releaseCanvas(canvas: HTMLCanvasElement, gl: WebGL2RenderingContext) { pendingRelease.set( canvas, window.setTimeout(() => { pendingRelease.delete(canvas); if (!gl.isContextLost()) gl.getExtension("WEBGL_lose_context")?.loseContext(); }, 0), ); } const subscribeNoop = () => () => {}; const getServerSupport = () => true; let scratchCtx: CanvasRenderingContext2D | null = null; function getScratch(): CanvasRenderingContext2D | null { if (!scratchCtx) scratchCtx = document.createElement("canvas").getContext("2d"); return scratchCtx; } function parseColor(input: string, fallback: [number, number, number]): [number, number, number] { const ctx = getScratch(); if (!ctx) return fallback; ctx.fillStyle = "#000"; ctx.fillStyle = input; const v = String(ctx.fillStyle); if (v.startsWith("#")) { const n = parseInt(v.slice(1, 7), 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } const m = v.match(/[\d.]+/g); if (!m || m.length < 3) return fallback; return [+m[0] / 255, +m[1] / 255, +m[2] / 255]; } interface Layout { width: number; height: number; fontSize: number; font: string; tracking: number; baseline: number; textWidth: number; mid: number; } function setTracking(ctx: CanvasRenderingContext2D, px: number) { if ("letterSpacing" in ctx) (ctx as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = `${px}px`; } function computeLayout(width: number, text: string, family: string, weight: number, maxFont: number): Layout | null { const ctx = getScratch(); if (!ctx || width < 8) return null; ctx.font = `${weight} 100px ${family}`; setTracking(ctx, -3); const w100 = Math.max(1, ctx.measureText(text).width); const fontSize = Math.max(14, Math.min(maxFont, (width * 0.86 * 100) / w100)); ctx.font = `${weight} ${fontSize}px ${family}`; setTracking(ctx, -0.03 * fontSize); const m = ctx.measureText(text); const asc = m.actualBoundingBoxAscent || fontSize * 0.72; const desc = m.actualBoundingBoxDescent || 0; const height = Math.round(fontSize * 1.32); const baseline = height / 2 + (asc - desc) / 2; return { width, height, fontSize, font: `${weight} ${fontSize}px ${family}`, tracking: -0.03 * fontSize, baseline, textWidth: m.width, mid: baseline - (asc - desc) / 2, }; } // ─── Shaders ───────────────────────────────────────────────────────────────── const VERT = `#version 300 es in vec2 aPos; out vec2 vUv; void main() { vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); }`; // Flow field: decay, self-advect, then splat the pointer stroke (a capsule from A to B). const FLOW_FRAG = `#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uPrev; uniform vec2 uSize; uniform vec2 uA; uniform vec2 uB; uniform vec2 uSplat; uniform float uRadius; uniform float uDecay; uniform float uAdvect; uniform float uOn; out vec4 outColor; void main() { vec2 p = vUv * uSize; vec2 here = texture(uPrev, vUv).rg * 2.0 - 1.0; vec2 v = texture(uPrev, vUv - here * uAdvect / uSize).rg * 2.0 - 1.0; v *= uDecay; v = sign(v) * max(abs(v) - 1.5 / 255.0, 0.0); vec2 ab = uB - uA; float t = clamp(dot(p - uA, ab) / max(dot(ab, ab), 1e-4), 0.0, 1.0); float d = length(p - (uA + ab * t)); float g = exp(-d * d / (uRadius * uRadius)) * uOn; v += (uSplat - v) * g * 0.85; float l = length(v); if (l > 1.0) v /= l; outColor = vec4(v * 0.5 + 0.5, 0.0, 1.0); }`; const TAPS = 12; const VIEW_FRAG = `#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uText; uniform sampler2D uFlow; uniform vec2 uSize; uniform float uDpr; uniform vec2 uPointer; uniform float uHover; uniform float uLensR; uniform float uLens; uniform float uShift; uniform float uGrain; uniform float uTime; uniform vec3 uInk; uniform vec3 uBg; out vec4 outColor; vec3 hue(float h) { return clamp(vec3(abs(h * 6.0 - 3.0) - 1.0, 2.0 - abs(h * 6.0 - 2.0), 2.0 - abs(h * 6.0 - 4.0)), 0.0, 1.0); } float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } void main() { vec2 p = gl_FragCoord.xy / uDpr; vec2 d = p - uPointer; float r = length(d) / uLensR; float lens = uHover * uLens * pow(max(0.0, 1.0 - r * r), 2.0); vec2 q = uPointer + d * (1.0 - lens); vec2 flow = texture(uFlow, q / uSize).rg * 2.0 - 1.0; flow = sign(flow) * max(abs(flow) - 2.0 / 255.0, 0.0); float speed = length(flow); vec2 off = flow * uShift; vec2 base = q - off * 0.3; // Interleaved-gradient jitter turns the discrete taps into one continuous spectral smear. float jit = fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715)))) - 0.5; vec3 acc = vec3(0.0); vec3 wsum = vec3(0.0); for (int i = 0; i < ${TAPS}; i++) { float t = clamp((float(i) + jit * min(1.0, speed * 40.0)) / float(${TAPS - 1}), 0.0, 1.0); vec3 w = hue(t * 0.74) + 0.08; float m = texture(uText, (base + off * (t * 2.0 - 1.0)) / uSize).a; acc += m * w; wsum += w; } vec3 m = acc / wsum; if (uGrain > 0.0) { float heat = min(1.0, speed * 2.5 + uHover * 0.1); float n = hash(gl_FragCoord.xy + fract(uTime) * 91.7) - 0.5; float scan = 0.5 + 0.5 * sin(gl_FragCoord.y / uDpr * 3.14159 * 0.75); float g = uGrain * (0.2 + 0.8 * heat); m *= clamp(1.0 + n * g * 0.5 - (1.0 - scan) * g * 0.35, 0.0, 1.2); m = clamp(m, 0.0, 1.0); } float a = max(m.r, max(m.g, m.b)); // Exact over any background at rest (all channels equal); fringes are tinted for uBg in motion. vec3 col = uInk * m + uBg * (a - m); outColor = vec4(col, a); }`; function compile(gl: WebGL2RenderingContext, type: number, src: string): WebGLShader | null { const sh = gl.createShader(type); if (!sh) return null; gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS) && !gl.isContextLost()) { console.warn("ChromaticText shader:", gl.getShaderInfoLog(sh)); gl.deleteShader(sh); return null; } return sh; } function link(gl: WebGL2RenderingContext, frag: string, names: string[]) { const vs = compile(gl, gl.VERTEX_SHADER, VERT); const fs = compile(gl, gl.FRAGMENT_SHADER, frag); const prog = gl.createProgram(); if (!vs || !fs || !prog) return null; gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.bindAttribLocation(prog, 0, "aPos"); gl.linkProgram(prog); gl.deleteShader(vs); gl.deleteShader(fs); const u: Record = {}; for (const n of names) u[n] = gl.getUniformLocation(prog, n); return { prog, u }; } function makeTex(gl: WebGL2RenderingContext) { const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); return tex; } interface GLState { gl: WebGL2RenderingContext; view: { prog: WebGLProgram; u: Record }; flow: { prog: WebGLProgram; u: Record }; buf: WebGLBuffer; text: WebGLTexture; fields: { tex: WebGLTexture; fbo: WebGLFramebuffer }[]; fieldW: number; fieldH: number; read: number; } interface Motion { // Pointer in CSS px, y up. px: number; py: number; lastX: number; lastY: number; vx: number; vy: number; hasPointer: boolean; hover: number; hoverTarget: number; energy: number; pulseT: number; // < 0 when no pulse is running pulseLastX: number; time: number; dirty: boolean; } const PULSE_DURATION = 0.75; export function ChromaticText({ text = "Chromatic", color, background, intensity = 1, radius, decay = 0.7, grain = 0, lens = 0.14, tone, fontSize = 200, fontWeight = 650, fontFamily, pulseOnMount = false, frozen = false, ariaLabel, className, ref, }: ChromaticTextProps) { const resolvedTone = useBjorkTone(tone); const reducedMotion = useReducedMotion() ?? false; const supported = useSyncExternalStore(subscribeNoop, getWebGL2Support, getServerSupport); const palette = BJORK_PALETTE[resolvedTone]; const wrapRef = useRef(null); const canvasRef = useRef(null); const { width } = useElementSize(wrapRef); const [fontsReady, setFontsReady] = useState(false); const [epoch, setEpoch] = useState(0); const [layout, setLayout] = useState(null); const glRef = useRef(null); const layoutRef = useRef(null); const dprRef = useRef(1); const motionRef = useRef({ px: 0, py: 0, lastX: 0, lastY: 0, vx: 0, vy: 0, hasPointer: false, hover: 0, hoverTarget: 0, energy: 0, pulseT: -1, pulseLastX: 0, time: 0, dirty: false, }); const look = useRef({ ink: [0.93, 0.93, 0.93] as [number, number, number], bg: [0.07, 0.07, 0.07] as [number, number, number], intensity, radius: radius as number | undefined, decay, grain, lens, }); const wakeRef = useRef<() => void>(() => {}); const still = reducedMotion; useEffect(() => { let cancelled = false; document.fonts.ready.then(() => { if (!cancelled) setFontsReady(true); }); return () => { cancelled = true; }; }, []); const clearFields = useCallback(() => { const g = glRef.current; if (!g) return; const { gl } = g; for (const f of g.fields) { gl.bindFramebuffer(gl.FRAMEBUFFER, f.fbo); gl.clearColor(0.5, 0.5, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); } gl.bindFramebuffer(gl.FRAMEBUFFER, null); }, []); // Advances the flow field one step, splatting the stroke from A to B (CSS px, y up). const stepField = useCallback( (dt: number, splat: { ax: number; ay: number; bx: number; by: number; vx: number; vy: number; r: number } | null) => { const g = glRef.current; const lay = layoutRef.current; if (!g || !lay) return; const { gl, flow } = g; const L = look.current; const src = g.fields[g.read]; const dst = g.fields[1 - g.read]; gl.bindFramebuffer(gl.FRAMEBUFFER, dst.fbo); gl.viewport(0, 0, g.fieldW, g.fieldH); gl.useProgram(flow.prog); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, src.tex); gl.uniform1i(flow.u.uPrev, 0); gl.uniform2f(flow.u.uSize, lay.width, lay.height); const life = Math.max(0.08, L.decay); gl.uniform1f(flow.u.uDecay, Math.exp((-dt * 4.6) / life)); gl.uniform1f(flow.u.uAdvect, 140 * dt); if (splat) { gl.uniform2f(flow.u.uA, splat.ax, splat.ay); gl.uniform2f(flow.u.uB, splat.bx, splat.by); gl.uniform2f(flow.u.uSplat, splat.vx, splat.vy); gl.uniform1f(flow.u.uRadius, splat.r); gl.uniform1f(flow.u.uOn, 1); } else { gl.uniform1f(flow.u.uOn, 0); gl.uniform1f(flow.u.uRadius, 1); } gl.bindBuffer(gl.ARRAY_BUFFER, g.buf); gl.drawArrays(gl.TRIANGLES, 0, 3); gl.bindFramebuffer(gl.FRAMEBUFFER, null); g.read = 1 - g.read; }, [], ); const draw = useCallback(() => { const g = glRef.current; const lay = layoutRef.current; const canvas = canvasRef.current; if (!g || !lay || !canvas || g.gl.isContextLost()) return; const { gl, view } = g; const L = look.current; const M = motionRef.current; gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(view.prog); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, g.text); gl.uniform1i(view.u.uText, 0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, g.fields[g.read].tex); gl.uniform1i(view.u.uFlow, 1); gl.uniform2f(view.u.uSize, lay.width, lay.height); gl.uniform1f(view.u.uDpr, dprRef.current); gl.uniform2f(view.u.uPointer, M.px, M.py); gl.uniform1f(view.u.uHover, M.hover); gl.uniform1f(view.u.uLensR, L.radius ?? lay.fontSize * 0.45); gl.uniform1f(view.u.uLens, Math.min(0.4, Math.max(0, L.lens))); gl.uniform1f(view.u.uShift, Math.min(2, Math.max(0, L.intensity)) * lay.fontSize * 0.15); gl.uniform1f(view.u.uGrain, Math.min(1, Math.max(0, L.grain))); gl.uniform1f(view.u.uTime, M.time); gl.uniform3f(view.u.uInk, L.ink[0], L.ink[1], L.ink[2]); gl.uniform3f(view.u.uBg, L.bg[0], L.bg[1], L.bg[2]); gl.bindBuffer(gl.ARRAY_BUFFER, g.buf); gl.drawArrays(gl.TRIANGLES, 0, 3); }, []); // One simulation step. Returns true while something is still moving. const advance = useCallback( (dt: number): boolean => { const lay = layoutRef.current; if (!lay || !glRef.current) return false; const M = motionRef.current; const L = look.current; const r = L.radius ?? lay.fontSize * 0.45; M.time += dt; let splat: Parameters[1] = null; if (M.pulseT >= 0) { M.pulseT += dt; const k = Math.min(1, M.pulseT / PULSE_DURATION); const e = k < 0.5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2; const x0 = lay.width / 2 - lay.textWidth * 0.62; const x1 = lay.width / 2 + lay.textWidth * 0.62; const x = x0 + (x1 - x0) * e; const speed = Math.min(1, Math.abs(x - M.pulseLastX) / Math.max(dt, 1e-3) / 1400); const y = lay.height - lay.mid; splat = { ax: M.pulseLastX, ay: y, bx: x, by: y, vx: speed, vy: speed * 0.18, r: lay.fontSize * 0.55 }; M.energy = Math.max(M.energy, speed); M.pulseLastX = x; if (k >= 1) M.pulseT = -1; } else if (M.hasPointer) { const dx = M.px - M.lastX; const dy = M.py - M.lastY; const ivx = dx / Math.max(dt, 1e-3); const ivy = dy / Math.max(dt, 1e-3); M.vx += (ivx - M.vx) * 0.5; M.vy += (ivy - M.vy) * 0.5; // Saturating response: a casual stroke already splits clearly, a flick maxes out. const raw = Math.hypot(M.vx, M.vy); const sl = 1 - Math.exp(-raw / 420); const svx = raw > 1e-3 ? (M.vx / raw) * sl : 0; const svy = raw > 1e-3 ? (M.vy / raw) * sl : 0; if (sl > 0.02) { splat = { ax: M.lastX, ay: M.lastY, bx: M.px, by: M.py, vx: svx, vy: svy, r: r * 0.7 }; M.energy = Math.max(M.energy, Math.min(1, sl)); } M.lastX = M.px; M.lastY = M.py; } stepField(dt, splat); M.energy *= Math.exp((-dt * 4.6) / Math.max(0.08, L.decay)); M.hover += (M.hoverTarget - M.hover) * (1 - Math.exp(-dt * 9)); const settled = M.energy < 0.004 && Math.abs(M.hoverTarget - M.hover) < 0.002 && M.pulseT < 0; if (settled) { M.hover = M.hoverTarget; M.energy = 0; M.vx = 0; M.vy = 0; clearFields(); } return !settled; }, [stepField, clearFields], ); // Props that only change the look are kept in a ref and repainted in place. useEffect(() => { const L = look.current; L.ink = parseColor(color ?? palette.text, resolvedTone === "dark" ? [0.93, 0.93, 0.93] : [0.09, 0.09, 0.09]); L.bg = parseColor(background ?? palette.stage, resolvedTone === "dark" ? [0.07, 0.07, 0.07] : [0.97, 0.96, 0.94]); L.intensity = intensity; L.radius = radius; L.decay = decay; L.grain = grain; L.lens = lens; draw(); }, [color, background, palette, resolvedTone, intensity, radius, decay, grain, lens, draw]); // GL setup / teardown. useEffect(() => { const canvas = canvasRef.current; if (!canvas || !supported) return; claimCanvas(canvas); const gl = canvas.getContext("webgl2", { premultipliedAlpha: true, antialias: false, alpha: true }); if (!gl) return; const view = link(gl, VIEW_FRAG, ["uText", "uFlow", "uSize", "uDpr", "uPointer", "uHover", "uLensR", "uLens", "uShift", "uGrain", "uTime", "uInk", "uBg"]); const flow = link(gl, FLOW_FRAG, ["uPrev", "uSize", "uA", "uB", "uSplat", "uRadius", "uDecay", "uAdvect", "uOn"]); const buf = gl.createBuffer(); const textTex = makeTex(gl); if (!view || !flow || !buf || !textTex) return; gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); glRef.current = { gl, view, flow, buf, text: textTex, fields: [], fieldW: 0, fieldH: 0, read: 0 }; const onLost = (e: Event) => { e.preventDefault(); glRef.current = null; }; const onRestored = () => setEpoch((v) => v + 1); canvas.addEventListener("webglcontextlost", onLost); canvas.addEventListener("webglcontextrestored", onRestored); return () => { canvas.removeEventListener("webglcontextlost", onLost); canvas.removeEventListener("webglcontextrestored", onRestored); const g = glRef.current; glRef.current = null; if (!gl.isContextLost()) { if (g) { for (const f of g.fields) { gl.deleteFramebuffer(f.fbo); gl.deleteTexture(f.tex); } } gl.deleteTexture(textTex); gl.deleteBuffer(buf); gl.deleteProgram(view.prog); gl.deleteProgram(flow.prog); releaseCanvas(canvas, gl); } }; }, [supported, epoch]); const { wake } = useVisibleLoop( wrapRef, useCallback( (dt: number) => { const keep = advance(dt); draw(); return keep; }, [advance, draw], ), { enabled: supported && !still && !frozen }, ); useEffect(() => { wakeRef.current = wake; }, [wake]); // Layout, canvas size, text texture and flow-field targets. useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas || !fontsReady || width < 8) return; let cancelled = false; const family = fontFamily ?? (getComputedStyle(wrap).fontFamily || "sans-serif"); const run = () => { if (cancelled) return; const lay = computeLayout(width, text, family, fontWeight, fontSize); if (!lay) return; layoutRef.current = lay; setLayout((prev) => prev && prev.width === lay.width && prev.height === lay.height && prev.fontSize === lay.fontSize ? prev : lay, ); const dpr = sizeCanvas(canvas, lay.width, lay.height, defaultMaxDpr()); dprRef.current = dpr; const g = glRef.current; if (!g || g.gl.isContextLost()) return; const { gl } = g; // Text mask at backing resolution so the resting frame is pixel crisp. const off = document.createElement("canvas"); off.width = canvas.width; off.height = canvas.height; const ctx = off.getContext("2d"); if (!ctx) return; ctx.scale(dpr, dpr); ctx.font = lay.font; setTracking(ctx, lay.tracking); ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; ctx.fillStyle = "#fff"; ctx.fillText(text, lay.width / 2, lay.baseline); gl.bindTexture(gl.TEXTURE_2D, g.text); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, off); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // Flow field at a quarter of CSS resolution. const fw = Math.max(8, Math.ceil(lay.width / 4)); const fh = Math.max(8, Math.ceil(lay.height / 4)); if (fw !== g.fieldW || fh !== g.fieldH || g.fields.length === 0) { for (const f of g.fields) { gl.deleteFramebuffer(f.fbo); gl.deleteTexture(f.tex); } g.fields = []; for (let i = 0; i < 2; i++) { const tex = makeTex(gl); const fbo = gl.createFramebuffer(); if (!tex || !fbo) return; gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, fw, fh, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); g.fields.push({ tex, fbo }); } gl.bindFramebuffer(gl.FRAMEBUFFER, null); g.fieldW = fw; g.fieldH = fh; g.read = 0; clearFields(); } const M = motionRef.current; if (frozen && !still) { // Replay a pulse offline and stop just past the middle of the sweep. clearFields(); M.hover = 0; M.hoverTarget = 0; M.energy = 0; M.pulseT = 0; M.pulseLastX = lay.width / 2 - lay.textWidth * 0.62; const dt = 1 / 60; for (let t = 0; t < PULSE_DURATION * 0.58; t += dt) advance(dt); } else if (pulseOnMount && !still && M.pulseT < 0 && M.time === 0) { M.pulseT = 0; M.pulseLastX = lay.width / 2 - lay.textWidth * 0.62; wakeRef.current(); } draw(); }; document.fonts.load(`${fontWeight} 100px ${family}`, text).then(run, run); return () => { cancelled = true; }; }, [width, text, fontWeight, fontFamily, fontSize, fontsReady, frozen, still, pulseOnMount, epoch, draw, advance, clearFields]); // Pointer input. useEffect(() => { const wrap = wrapRef.current; if (!wrap || still || frozen || !supported) return; const toLocal = (e: PointerEvent): [number, number] | null => { const lay = layoutRef.current; if (!lay) return null; const rect = wrap.getBoundingClientRect(); const sx = rect.width > 0 ? lay.width / rect.width : 1; const sy = rect.height > 0 ? lay.height / rect.height : 1; return [(e.clientX - rect.left) * sx, lay.height - (e.clientY - rect.top) * sy]; }; const onMove = (e: PointerEvent) => { const pt = toLocal(e); if (!pt) return; const M = motionRef.current; if (!M.hasPointer) { M.lastX = pt[0]; M.lastY = pt[1]; } M.px = pt[0]; M.py = pt[1]; M.hasPointer = true; M.hoverTarget = 1; wakeRef.current(); }; const onLeave = () => { const M = motionRef.current; M.hasPointer = false; M.hoverTarget = 0; wakeRef.current(); }; const onUp = (e: PointerEvent) => { if (e.pointerType !== "mouse") onLeave(); }; wrap.addEventListener("pointermove", onMove); wrap.addEventListener("pointerdown", onMove); wrap.addEventListener("pointerleave", onLeave); wrap.addEventListener("pointercancel", onLeave); wrap.addEventListener("pointerup", onUp); return () => { wrap.removeEventListener("pointermove", onMove); wrap.removeEventListener("pointerdown", onMove); wrap.removeEventListener("pointerleave", onLeave); wrap.removeEventListener("pointercancel", onLeave); wrap.removeEventListener("pointerup", onUp); }; }, [still, frozen, supported]); useImperativeHandle( ref, () => ({ pulse: () => { const lay = layoutRef.current; if (!lay || still || frozen) return; const M = motionRef.current; M.pulseT = 0; M.pulseLastX = lay.width / 2 - lay.textWidth * 0.62; wakeRef.current(); }, }), [still, frozen], ); const label = ariaLabel ?? text; return (

{supported ? (

); } a3: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; } a4:Td34,"use client"; import { useCallback, useEffect, useMemo, useRef, type RefObject } from "react"; export interface VisibleLoopOptions { enabled?: boolean; fpsCap?: number; rootMargin?: string; } /** * Runs `frame(dt, t)` on requestAnimationFrame while the element is near the viewport, * the tab is visible and `enabled` is not false. Return `false` from `frame` to go idle * until `wake()` is called. Writes `data-loop` on the element: running, idle or paused. */ export function useVisibleLoop( ref: RefObject, frame: (dt: number, t: number) => boolean | void, opts?: VisibleLoopOptions, ): { wake: () => void } { const enabled = opts?.enabled !== false; const fpsCap = opts?.fpsCap ?? 0; const rootMargin = opts?.rootMargin ?? "96px"; const frameRef = useRef(frame); useEffect(() => { frameRef.current = frame; }, [frame]); const wakeRef = useRef<() => void>(() => {}); const wake = useCallback(() => wakeRef.current(), []); useEffect(() => { const el = ref.current; if (!el || typeof window === "undefined") return; let wants = true; // false once the frame callback returns false let inView = false; let raf = 0; let last = 0; let t = 0; const minFrame = fpsCap > 0 ? 1000 / fpsCap : 0; const canRun = () => enabled && inView && document.visibilityState === "visible"; const stop = () => { if (raf) cancelAnimationFrame(raf); raf = 0; }; const update = () => { if (!enabled) { stop(); el.dataset.loop = "paused"; return; } if (!wants) { stop(); el.dataset.loop = "idle"; return; } if (!canRun()) { stop(); el.dataset.loop = "paused"; return; } el.dataset.loop = "running"; if (!raf) { last = performance.now(); raf = requestAnimationFrame(tick); } }; const tick = (now: number) => { raf = 0; if (!canRun() || !wants) { update(); return; } const elapsed = now - last; if (minFrame && elapsed < minFrame - 0.5) { raf = requestAnimationFrame(tick); return; } last = now; const dt = Math.min(0.05, Math.max(0, elapsed / 1000)); t += dt; const keep = frameRef.current(dt, t); if (keep === false) { wants = false; update(); return; } raf = requestAnimationFrame(tick); }; const observer = new IntersectionObserver( ([entry]) => { inView = entry.isIntersecting; update(); }, { rootMargin }, ); observer.observe(el); const onVisibility = () => update(); document.addEventListener("visibilitychange", onVisibility); wakeRef.current = () => { wants = true; update(); }; update(); return () => { stop(); observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); wakeRef.current = () => {}; }; }, [ref, enabled, fpsCap, rootMargin]); return useMemo(() => ({ wake }), [wake]); } // matchMedia based check. False on the server. export function isCoarsePointer(): boolean { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false; return window.matchMedia("(pointer: coarse)").matches; } a5: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; 7e:["$","$La1",null,{"files":[{"path":"components/bjork-ui/text/chromatic-text.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/text/chromatic-text.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/canvas.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/canvas.ts"},{"path":"components/bjork-ui/_core/loop.ts","content":"$a4","type":"registry:component","target":"@components/bjork-ui/_core/loop.ts"},{"path":"components/bjork-ui/_core/tone.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/tone.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a5","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"}],"className":"h-[70svh] min-h-80"}]