78: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 96: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 98: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}] 4f:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}] 50:["$","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"}]]}] 51:["$","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)"}]]}]}]]}] 52:["$","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"}]]}] 53:["$","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"}]]}] 54:["$","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"}]]}] 55:["$","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)"}]]}]}]]}] 56:["$","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)"}]]}]}]]}] 57:["$","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)"}]]}]}]]}] 58:["$","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)"}]]}]}]]}] 59:["$","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"}]]}] 5a:["$","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"}]]}] 5b:["$","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)"}]]}]}]]}] 5c:["$","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.72)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.72)"}]]}]}]]}] 5d:["$","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.52)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.52)"}]]}]}]]}] 5e:["$","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.36)"}}],["$","p",null,{"children":"rgba(23, 23, 23, 0.36)"}]]}]}]]}] 5f:["$","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)"}]]}]}]]}] 60:["$","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"}]]}] 61:["$","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"}]]}] 62:["$","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"}]]}] 63:["$","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"}]]}] 64:["$","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"}]]}] 65:["$","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"}]]}] 66:["$","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"}]]}] 67:["$","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"}]]}] 68:["$","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)"}]]}]}]]}] 69:["$","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)"}]]}]}]]}] 6a:["$","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)"}]]}]}]]}] 6b:["$","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"}]]}] 6c:["$","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"}]]}] 6d:["$","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)"}]]}] 6e:["$","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)"}]]}] 6f:["$","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)"}]]}] 70:["$","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)"}]]}] 71:["$","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)"}]]}] 72:["$","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"}]]}] 73:["$","$L78",null,{"orientation":"horizontal"}] 74:["$","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":["$","$L4d",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)"}}],"$L79"]}]}]]}],"$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82","$L83","$L84","$L85","$L86","$L87","$L88","$L89","$L8a","$L8b","$L8c","$L8d","$L8e","$L8f","$L90","$L91","$L92","$L93","$L94"]}],"$L95"]}]}]]}] 75:null 97: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); } }76:["$","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":["$","$L96",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$97"}]}]]}] 99:T4ccc,"use client"; import { useTheme } from "next-themes"; import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent, type ReactNode, } from "react"; import { useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; export type WebsiteShaderId = | "aurora-veil" | "kinetic-dots"; export interface WebsiteShaderPreset { id: WebsiteShaderId; title: string; summary: string; intent: string; accent: string; interactive?: boolean; preview: { dark: string; light: string; }; fragment: string; } export interface WebsiteShaderCanvasProps { preset?: WebsiteShaderId | string | WebsiteShaderPreset; className?: string; tone?: "dark" | "light"; intensity?: number; animate?: boolean; maxPixelRatio?: number; maxCanvasPixels?: number; children?: ReactNode; } interface WebsiteShaderDemoProps { preset: WebsiteShaderId | WebsiteShaderPreset; className?: string; } const vertexShaderSource = ` attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); } `; const fragmentHeader = ` #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_pointer; uniform vec4 u_trails[8]; uniform float u_intensity; uniform float u_isLight; float saturate(float value) { return clamp(value, 0.0, 1.0); } mat2 rotate2d(float angle) { float s = sin(angle); float c = cos(angle); return mat2(c, -s, s, c); } float hash21(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); float a = hash21(i); float b = hash21(i + vec2(1.0, 0.0)); float c = hash21(i + vec2(0.0, 1.0)); float d = hash21(i + vec2(1.0, 1.0)); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } float fbm(vec2 p) { float value = 0.0; float amplitude = 0.5; for (int i = 0; i < 4; i++) { value += amplitude * noise(p); p = rotate2d(0.72) * p * 2.03 + 4.17; amplitude *= 0.5; } return value; } vec3 softLight(vec3 base, vec3 glow, float amount) { return mix(base, glow, saturate(amount)); } `; const fragmentFooter = ` void main() { vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0)); vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution.xy) / max(min(u_resolution.x, u_resolution.y), 1.0); vec2 pointer = u_pointer * 2.0 - 1.0; pointer.x *= u_resolution.x / max(u_resolution.y, 1.0); vec3 color = shaderColor(uv, p, u_time, pointer, u_intensity, u_isLight); color = pow(max(color, vec3(0.0)), vec3(0.92)); gl_FragColor = vec4(color, 1.0); } `; export const websiteShaderPresets: WebsiteShaderPreset[] = [ { id: "aurora-veil", title: "Aurora veil", summary: "Soft atmospheric color fields that sit well behind editorial copy.", intent: "Use it as a low-pressure section backdrop for launch pages, portfolios, and app onboarding.", accent: "#7bd8c4", interactive: false, preview: { dark: "radial-gradient(circle at 30% 24%, rgba(89,216,190,0.5), transparent 31%), radial-gradient(circle at 80% 72%, rgba(236,92,19,0.3), transparent 34%), linear-gradient(140deg, #06110f, #151515 55%, #030303)", light: "radial-gradient(circle at 34% 22%, rgba(83,194,169,0.35), transparent 30%), radial-gradient(circle at 76% 72%, rgba(236,92,19,0.18), transparent 34%), linear-gradient(140deg, #f5faf6, #eee7dc 55%, #fffaf0)", }, fragment: ` vec3 shaderColor(vec2 uv, vec2 p, float t, vec2 pointer, float intensity, float isLight) { vec2 q = p; q.x += sin(q.y * 2.0 + t * 0.18) * 0.22; q.y += cos(q.x * 1.7 - t * 0.14) * 0.16; float veilA = smoothstep(0.72, 0.04, abs(q.y + sin(q.x * 1.8 + t * 0.24) * 0.32)); float veilB = smoothstep(0.62, 0.02, abs(q.y * 0.85 - cos(q.x * 2.4 - t * 0.2) * 0.24)); float grain = fbm(q * 2.5 + t * 0.04); vec3 base = mix(vec3(0.03, 0.04, 0.038), vec3(0.86, 0.83, 0.76), isLight); vec3 green = vec3(0.28, 0.82, 0.72); vec3 ember = vec3(0.95, 0.34, 0.1); vec3 color = base + green * veilA * 0.46 + ember * veilB * 0.28; color += (grain - 0.5) * 0.036; return color * (0.84 + intensity * 0.22); } `, }, { id: "kinetic-dots", title: "Kinetic dots", summary: "A hover-reactive cell field that fills the trail behind the pointer.", intent: "Use it for interactive cards, playful analytics, and hero accents where the motion should come from the visitor.", accent: "#f0d46a", interactive: true, preview: { dark: "linear-gradient(90deg, rgba(240,212,106,0.13) 1px, transparent 1px), linear-gradient(0deg, rgba(236,92,19,0.09) 1px, transparent 1px), radial-gradient(circle at 58% 44%, rgba(236,92,19,0.18), transparent 24%), #090907", light: "linear-gradient(90deg, rgba(184,148,35,0.12) 1px, transparent 1px), linear-gradient(0deg, rgba(236,92,19,0.08) 1px, transparent 1px), radial-gradient(circle at 58% 44%, rgba(236,92,19,0.11), transparent 26%), #faf7ea", }, fragment: ` vec3 shaderColor(vec2 uv, vec2 p, float t, vec2 pointer, float intensity, float isLight) { vec2 gridSize = vec2(18.0, 12.0); vec2 gridUv = uv * gridSize; vec2 cell = floor(gridUv); vec2 local = fract(gridUv); vec2 centered = local - 0.5; vec2 cellCenter = (cell + 0.5) / gridSize; float seed = hash21(cell); float edge = min(min(local.x, 1.0 - local.x), min(local.y, 1.0 - local.y)); float line = 1.0 - smoothstep(0.005, 0.032, edge); float box = smoothstep(0.5, 0.38, max(abs(centered.x), abs(centered.y))); float idle = pow(sin(seed * 6.2831 + t * 0.22) * 0.5 + 0.5, 13.0) * 0.014; float hover = smoothstep(0.085, 0.0, distance((cellCenter - u_pointer) * vec2(1.0, 0.72), vec2(0.0))) * 0.42; float fill = hover; float trailAmount = 0.0; vec3 fillColor = vec3(0.0); vec3 gold = vec3(1.0, 0.78, 0.24); vec3 orange = vec3(1.0, 0.36, 0.08); vec3 rose = vec3(0.9, 0.28, 0.38); for (int i = 0; i < 8; i++) { vec4 trail = u_trails[i]; float distanceToTrail = distance((cellCenter - trail.xy) * vec2(1.0, 0.72), vec2(0.0)); float trailFill = smoothstep(0.16, 0.0, distanceToTrail) * trail.z; trailFill *= 0.78 + hash21(cell + float(i) * 2.17) * 0.06; fill = max(fill, trailFill); trailAmount = max(trailAmount, trailFill); fillColor += mix(mix(gold, orange, trail.w), rose, seed * 0.35) * trailFill; } fillColor = fillColor / max(trailAmount, 0.001); vec3 base = mix(vec3(0.022, 0.021, 0.016), vec3(0.96, 0.93, 0.84), isLight); vec3 lineColor = mix(vec3(0.9, 0.7, 0.25), vec3(0.42, 0.32, 0.1), isLight); vec3 idleColor = mix(gold, orange, seed); vec3 activeColor = mix(idleColor, fillColor, step(0.001, trailAmount)); vec3 color = base + lineColor * line * 0.034; color += idleColor * idle * box; color = mix(color, activeColor, saturate(fill * box * (0.82 + intensity * 0.12))); color += activeColor * fill * smoothstep(0.64, 0.0, length(centered)) * 0.14; color += (fbm(uv * 3.2) - 0.5) * 0.01; return color; } `, }, ]; export function getWebsiteShaderPreset( value: WebsiteShaderId | string | undefined ) { if (!value) return undefined; const normalized = value.replace(/^shader-/, ""); return websiteShaderPresets.find((preset) => preset.id === normalized); } export function WebsiteShaderCanvas({ preset, className, tone = "dark", intensity = 1, animate = true, maxPixelRatio = 1.35, maxCanvasPixels = 620_000, children, }: WebsiteShaderCanvasProps) { const canvasRef = useRef(null); const pointerRef = useRef({ x: 0.5, y: 0.5 }); const trailRef = useRef<{ x: number; y: number; createdAt: number }[]>([]); const shouldReduceMotion = useReducedMotion(); const [contextEpoch, setContextEpoch] = useState(0); const [failed, setFailed] = useState(false); const activePreset = useMemo( () => resolveShaderPreset(preset), [preset] ); const shouldAnimate = animate && !shouldReduceMotion; const isInteractive = activePreset.interactive !== false; useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const canvasElement = canvas; let disposed = false; let visible = true; let frame = 0; let resizeObserver: ResizeObserver | undefined; let intersectionObserver: IntersectionObserver | undefined; let gl: WebGLRenderingContext | null = null; let program: WebGLProgram | null = null; let buffer: WebGLBuffer | null = null; const handleContextLost = (event: Event) => { event.preventDefault(); setFailed(true); if (frame) cancelAnimationFrame(frame); frame = 0; }; const handleContextRestored = () => { setFailed(false); setContextEpoch((value) => value + 1); }; canvasElement.addEventListener("webglcontextlost", handleContextLost); canvasElement.addEventListener("webglcontextrestored", handleContextRestored); try { gl = canvasElement.getContext("webgl", { alpha: true, antialias: false, depth: false, desynchronized: true, failIfMajorPerformanceCaveat: false, powerPreference: "low-power", preserveDrawingBuffer: false, stencil: false, } as WebGLContextAttributes); if (!gl) { setFailed(true); return cleanup; } program = createProgram( gl, vertexShaderSource, createFragmentSource(activePreset.fragment) ); buffer = gl.createBuffer(); if (!program || !buffer) { setFailed(true); return cleanup; } const positionLocation = gl.getAttribLocation(program, "a_position"); const resolutionLocation = gl.getUniformLocation(program, "u_resolution"); const timeLocation = gl.getUniformLocation(program, "u_time"); const pointerLocation = gl.getUniformLocation(program, "u_pointer"); const trailLocation = gl.getUniformLocation(program, "u_trails[0]"); const intensityLocation = gl.getUniformLocation(program, "u_intensity"); const isLightLocation = gl.getUniformLocation(program, "u_isLight"); const trailUniform = new Float32Array(32); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW ); gl.useProgram(program); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); setFailed(false); const resize = () => { if (!gl) return; const rect = canvasElement.getBoundingClientRect(); const ratio = Math.min(window.devicePixelRatio || 1, maxPixelRatio); let width = Math.max(1, Math.floor(rect.width * ratio)); let height = Math.max(1, Math.floor(rect.height * ratio)); const pixelCount = width * height; if (pixelCount > maxCanvasPixels) { const scale = Math.sqrt(maxCanvasPixels / pixelCount); width = Math.max(1, Math.floor(width * scale)); height = Math.max(1, Math.floor(height * scale)); } if (canvasElement.width !== width || canvasElement.height !== height) { canvasElement.width = width; canvasElement.height = height; } gl.viewport(0, 0, width, height); }; const render = (now: number) => { if (!gl || !program || disposed) return; resize(); const nowSeconds = now * 0.001; const time = shouldAnimate ? nowSeconds : 18.0; const pointerValue = isInteractive ? pointerRef.current : { x: 0.5, y: 0.5 }; const liveTrails = isInteractive ? trailRef.current.filter((trail) => nowSeconds - trail.createdAt < 1.1) : []; trailRef.current = liveTrails; trailUniform.fill(0); liveTrails.slice(0, 8).forEach((trail, index) => { const offset = index * 4; const strength = saturateNumber(1 - (nowSeconds - trail.createdAt) / 1.1); trailUniform[offset] = trail.x; trailUniform[offset + 1] = trail.y; trailUniform[offset + 2] = strength; trailUniform[offset + 3] = index / 7; }); gl.useProgram(program); gl.uniform2f(resolutionLocation, canvasElement.width, canvasElement.height); gl.uniform1f(timeLocation, time); gl.uniform2f(pointerLocation, pointerValue.x, pointerValue.y); if (trailLocation) gl.uniform4fv(trailLocation, trailUniform); gl.uniform1f(intensityLocation, intensity); gl.uniform1f(isLightLocation, tone === "light" ? 1 : 0); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const tick = (now: number) => { if (disposed || !visible) { frame = 0; return; } render(now); frame = requestAnimationFrame(tick); }; const start = () => { if (frame || disposed) return; frame = requestAnimationFrame(tick); }; resizeObserver = new ResizeObserver(() => render(performance.now())); resizeObserver.observe(canvasElement); intersectionObserver = new IntersectionObserver( ([entry]) => { visible = Boolean(entry?.isIntersecting); if (visible && shouldAnimate) { start(); return; } if (frame) { cancelAnimationFrame(frame); frame = 0; } if (visible) render(performance.now()); }, { threshold: 0.01 } ); intersectionObserver.observe(canvasElement); render(performance.now()); if (shouldAnimate) start(); } catch { setFailed(true); } return cleanup; function cleanup() { disposed = true; if (frame) cancelAnimationFrame(frame); resizeObserver?.disconnect(); intersectionObserver?.disconnect(); canvasElement.removeEventListener("webglcontextlost", handleContextLost); canvasElement.removeEventListener("webglcontextrestored", handleContextRestored); if (gl) { if (buffer) gl.deleteBuffer(buffer); if (program) gl.deleteProgram(program); } } }, [ activePreset.fragment, contextEpoch, intensity, isInteractive, maxCanvasPixels, maxPixelRatio, shouldAnimate, tone, ]); const updatePointer = useCallback((event: ReactPointerEvent) => { const rect = event.currentTarget.getBoundingClientRect(); const nextPointer = { x: saturateNumber((event.clientX - rect.left) / Math.max(rect.width, 1)), y: 1 - saturateNumber((event.clientY - rect.top) / Math.max(rect.height, 1)), }; const now = performance.now() * 0.001; const lastTrail = trailRef.current[0]; pointerRef.current = nextPointer; if ( !lastTrail || Math.hypot(nextPointer.x - lastTrail.x, nextPointer.y - lastTrail.y) > 0.018 || now - lastTrail.createdAt > 0.045 ) { trailRef.current = [ { ...nextPointer, createdAt: now }, ...trailRef.current, ].slice(0, 8); } }, []); const fallback = tone === "light" ? activePreset.preview.light : activePreset.preview.dark; return (

{ pointerRef.current = { x: 0.5, y: 0.5 }; } : undefined} >