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:T6b93,"use client"; import { useState, useEffect, useMemo } from "react"; import { motion, useReducedMotion, AnimatePresence } from "framer-motion"; import { useTheme } from "next-themes"; import { Download, ChevronDown } from "lucide-react"; import { Resizable } from "react-resizable"; import "react-resizable/css/styles.css"; import { getBjorkSignalPalette, getBjorkTablePalette, } from "./table-theme"; export interface Employee { id: string; name: string; email: string; department: string; position: string; salary: number; hireDate: string; status: "active" | "inactive" | "on-leave"; avatar?: string; } interface ResizableTableProps { title?: string; employees?: Employee[]; onEmployeeSelect?: (employeeId: string) => void; onColumnResize?: (columnKey: string, newWidth: number) => void; className?: string; enableAnimations?: boolean; } const defaultEmployees: Employee[] = [ { id: "1", name: "Sarah Chen", email: "sarah.chen@company.com", department: "Engineering", position: "Senior Software Engineer", salary: 125000, hireDate: "2022-03-15", status: "active" }, { id: "2", name: "Michael Rodriguez", email: "michael.rodriguez@company.com", department: "Marketing", position: "Marketing Manager", salary: 95000, hireDate: "2021-08-22", status: "active" }, { id: "3", name: "Emily Watson", email: "emily.watson@company.com", department: "Design", position: "UX Designer", salary: 88000, hireDate: "2023-01-10", status: "active" }, { id: "4", name: "David Kim", email: "david.kim@company.com", department: "Engineering", position: "Tech Lead", salary: 145000, hireDate: "2020-11-05", status: "active" }, { id: "5", name: "Lisa Anderson", email: "lisa.anderson@company.com", department: "HR", position: "HR Director", salary: 110000, hireDate: "2019-06-12", status: "on-leave" }, { id: "6", name: "James Mitchell", email: "james.mitchell@company.com", department: "Sales", position: "Sales Director", salary: 130000, hireDate: "2021-02-28", status: "active" }, { id: "7", name: "Jennifer Lee", email: "jennifer.lee@company.com", department: "Finance", position: "Financial Analyst", salary: 75000, hireDate: "2023-04-18", status: "active" }, { id: "8", name: "Robert Chang", email: "robert.chang@company.com", department: "Engineering", position: "DevOps Engineer", salary: 105000, hireDate: "2022-09-14", status: "active" }, { id: "9", name: "Amanda Pierce", email: "amanda.pierce@company.com", department: "Marketing", position: "Content Manager", salary: 72000, hireDate: "2023-07-03", status: "inactive" }, { id: "10", name: "Christopher Hayes", email: "chris.hayes@company.com", department: "Operations", position: "Operations Manager", salary: 98000, hireDate: "2021-12-01", status: "active" }, { id: "11", name: "Victoria Moore", email: "victoria.moore@company.com", department: "Design", position: "Product Designer", salary: 92000, hireDate: "2022-05-20", status: "active" }, { id: "12", name: "Nicholas Brown", email: "nicholas.brown@company.com", department: "Engineering", position: "Frontend Developer", salary: 85000, hireDate: "2023-03-08", status: "active" }, { id: "13", name: "Rebecca Sullivan", email: "rebecca.sullivan@company.com", department: "Sales", position: "Account Executive", salary: 78000, hireDate: "2022-11-15", status: "active" }, { id: "14", name: "Thomas Wright", email: "thomas.wright@company.com", department: "Finance", position: "Senior Financial Analyst", salary: 95000, hireDate: "2021-04-30", status: "active" }, { id: "15", name: "Maria Garcia", email: "maria.garcia@company.com", department: "HR", position: "HR Specialist", salary: 68000, hireDate: "2023-08-12", status: "active" } ]; type SortField = "name" | "department" | "position" | "salary" | "hireDate"; type SortOrder = "asc" | "desc"; export function ResizableTable({ title = "Employee", employees: initialEmployees = defaultEmployees, onEmployeeSelect, onColumnResize, className = "", enableAnimations = true }: ResizableTableProps = {}) { const [selectedEmployees, setSelectedEmployees] = useState([]); const [mounted, setMounted] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [sortField, setSortField] = useState(null); const [sortOrder, setSortOrder] = useState("asc"); const [showSortMenu, setShowSortMenu] = useState(false); const [showExportMenu, setShowExportMenu] = useState(false); const shouldReduceMotion = useReducedMotion(); const { resolvedTheme } = useTheme(); const isDark = mounted ? resolvedTheme !== "light" : true; const palette = getBjorkTablePalette(isDark); // Column width state with default values const [columnWidths, setColumnWidths] = useState>({ checkbox: 50, name: 200, email: 220, department: 140, position: 180, salary: 120, hireDate: 120, status: 100 }); const ITEMS_PER_PAGE = 10; useEffect(() => { setMounted(true); }, []); const handleEmployeeSelect = (employeeId: string) => { setSelectedEmployees(prev => { if (prev.includes(employeeId)) { return prev.filter(id => id !== employeeId); } else { return [...prev, employeeId]; } }); if (onEmployeeSelect) { onEmployeeSelect(employeeId); } }; const handleSelectAll = () => { if (selectedEmployees.length === paginatedEmployees.length) { setSelectedEmployees([]); } else { setSelectedEmployees(paginatedEmployees.map(e => e.id)); } }; const handleSort = (field: SortField) => { if (sortField === field) { setSortOrder(sortOrder === "asc" ? "desc" : "asc"); } else { setSortField(field); setSortOrder("asc"); } setShowSortMenu(false); setCurrentPage(1); }; const sortedEmployees = useMemo(() => { if (!sortField) { return initialEmployees; } return [...initialEmployees].sort((a, b) => { let aVal: string | number = a[sortField]; let bVal: string | number = b[sortField]; if (sortField === "hireDate") { aVal = new Date(a.hireDate).getTime(); bVal = new Date(b.hireDate).getTime(); } if (aVal < bVal) return sortOrder === "asc" ? -1 : 1; if (aVal > bVal) return sortOrder === "asc" ? 1 : -1; return 0; }); }, [initialEmployees, sortField, sortOrder]); const paginatedEmployees = useMemo(() => { const startIdx = (currentPage - 1) * ITEMS_PER_PAGE; return sortedEmployees.slice(startIdx, startIdx + ITEMS_PER_PAGE); }, [sortedEmployees, currentPage]); const totalPages = Math.ceil(sortedEmployees.length / ITEMS_PER_PAGE); const getStatusColor = (status: string) => { if (!mounted) { const statusMap: Record = { "active": getBjorkSignalPalette("green", true), "inactive": getBjorkSignalPalette("red", true), "on-leave": getBjorkSignalPalette("orange", true), }; return statusMap[status]; } const statusMap: Record = { "active": getBjorkSignalPalette("green", isDark), "inactive": getBjorkSignalPalette("red", isDark), "on-leave": getBjorkSignalPalette("orange", isDark), }; return statusMap[status]; }; const formatCurrency = (amount: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(amount); }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }; const handleResize = (columnKey: string, { size }: { size: { width: number } }) => { const newWidth = Math.max(80, Math.min(400, size.width)); setColumnWidths(prev => ({ ...prev, [columnKey]: newWidth })); if (onColumnResize) { onColumnResize(columnKey, newWidth); } }; const exportToCSV = () => { const headers = ["Name", "Email", "Department", "Position", "Salary", "Hire Date", "Status"]; const rows = sortedEmployees.map(employee => [ employee.name, employee.email, employee.department, employee.position, employee.salary, employee.hireDate, employee.status ]); const csvContent = [ headers.join(","), ...rows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(",")) ].join("\n"); const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `employees-${new Date().toISOString().split('T')[0]}.csv`; link.click(); }; const exportToJSON = () => { const jsonContent = JSON.stringify(sortedEmployees, null, 2); const blob = new Blob([jsonContent], { type: "application/json;charset=utf-8;" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `employees-${new Date().toISOString().split('T')[0]}.json`; link.click(); }; const shouldAnimate = enableAnimations && !shouldReduceMotion; const containerVariants = { visible: { transition: { staggerChildren: 0.04, delayChildren: 0.1, }, } }; const rowVariants = { hidden: { opacity: 0, y: 20, scale: 0.98, filter: "blur(4px)" }, visible: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 400, damping: 25, mass: 0.7, }, }, exit: { opacity: 0, y: -10, transition: { duration: 0.2 } } }; return (

{showSortMenu && ( <>

setShowSortMenu(false)} />

)}

{showExportMenu && ( <>

setShowExportMenu(false)} />

)}

0 && selectedEmployees.length === paginatedEmployees.length} onChange={handleSelectAll} />

handleResize('name', data)} minConstraints={[80, 0]} maxConstraints={[400, 0]} handle={

} >

{title}

handleResize('email', data)} minConstraints={[80, 0]} maxConstraints={[400, 0]} handle={

} >

handleResize('department', data)} minConstraints={[80, 0]} maxConstraints={[400, 0]} handle={

} >

Department

handleResize('position', data)} minConstraints={[80, 0]} maxConstraints={[400, 0]} handle={

} >

Position

handleResize('salary', data)} minConstraints={[80, 0]} maxConstraints={[400, 0]} handle={

} >

Salary

handleResize('hireDate', data)} minConstraints={[80, 0]} maxConstraints={[400, 0]} handle={

} >

Hire Date

Status

{paginatedEmployees.map((employee) => (

handleEmployeeSelect(employee.id)} />

{employee.name}

e.stopPropagation()} > {employee.email}

{employee.department}

{employee.position}

{formatCurrency(employee.salary)}

{formatDate(employee.hireDate)}

{(() => { const { bgColor, borderColor, textColor, dotColor } = getStatusColor(employee.status); return (

{employee.status.charAt(0).toUpperCase() + employee.status.slice(1).replace('-', ' ')}

); })()}

))}

{totalPages > 1 && (

Page {currentPage} of {totalPages} • {sortedEmployees.length} employees

)}

); } 9a:Tc14,export function getBjorkTablePalette(isDark: boolean) { return { container: isDark ? "border-[#232323] bg-[#111]" : "border-[#ded7ca] bg-[#eee9df]", header: isDark ? "border-[#232323] bg-[#181818] text-[#ededed]/42" : "border-[#ded7ca] bg-[#e5ded1] text-[#171717]/46", row: isDark ? "border-[#232323] hover:bg-[#181818]/70" : "border-[#ded7ca] hover:bg-[#e7e1d5]/70", selectedRow: isDark ? "border-[#2a2a2a] bg-[#181818]" : "border-[#d6cdbc] bg-[#e7e1d5]", control: isDark ? "border-[#232323] bg-[#181818] text-[#ededed]/70 hover:bg-[#202020]" : "border-[#d8d3c7] bg-[#eee9df] text-[#171717]/68 hover:bg-[#e4ded3]", menu: isDark ? "border-[#232323] bg-[#181818] text-[#ededed]/76 shadow-[0_18px_60px_rgba(0,0,0,0.42)]" : "border-[#d8d3c7] bg-[#eee9df] text-[#171717]/76 shadow-[0_18px_60px_rgba(62,52,38,0.14)]", menuItem: isDark ? "hover:bg-[#232323]" : "hover:bg-[#e4ded3]", menuActive: isDark ? "bg-[#232323]" : "bg-[#e4ded3]", divider: isDark ? "border-[#232323]" : "border-[#d8d3c7]", primaryText: isDark ? "text-[#ededed]/90" : "text-[#171717]/86", secondaryText: isDark ? "text-[#ededed]/38" : "text-[#171717]/46", mutedSurface: isDark ? "bg-[#181818]" : "bg-[#e7e1d5]", popover: isDark ? "bg-[#111] text-[#ededed]" : "bg-[#eee9df] text-[#171717]", accent: isDark ? "text-[#d86a2c]" : "text-[#bd4514]", accentBg: isDark ? "bg-[#ec5c13]/12" : "bg-[#ec5c13]/14", accentBorder: isDark ? "border-[#ec5c13]/24" : "border-[#bd4514]/22", checkboxAccent: isDark ? "#d86a2c" : "#bd4514", }; } export function getBjorkSignalPalette( tone: "green" | "red" | "orange" | "neutral", isDark: boolean ) { const palettes = { green: { bgColor: isDark ? "bg-[#3e6f52]/18" : "bg-[#dce8dc]", borderColor: isDark ? "border-[#5f9f78]/28" : "border-[#bad0bd]", textColor: isDark ? "text-[#77b58b]" : "text-[#47785c]", dotColor: isDark ? "bg-[#77b58b]" : "bg-[#47785c]", color: isDark ? "#77b58b" : "#47785c", }, red: { bgColor: isDark ? "bg-[#87463f]/18" : "bg-[#eadad5]", borderColor: isDark ? "border-[#c46a61]/28" : "border-[#d7bcb4]", textColor: isDark ? "text-[#cf7c72]" : "text-[#9d5149]", dotColor: isDark ? "bg-[#cf7c72]" : "bg-[#9d5149]", color: isDark ? "#cf7c72" : "#9d5149", }, orange: { bgColor: isDark ? "bg-[#ec5c13]/14" : "bg-[#ead9cb]", borderColor: isDark ? "border-[#ec5c13]/28" : "border-[#d5b59f]", textColor: isDark ? "text-[#d86a2c]" : "text-[#9f4317]", dotColor: isDark ? "bg-[#d86a2c]" : "bg-[#9f4317]", color: isDark ? "#d86a2c" : "#9f4317", }, neutral: { bgColor: isDark ? "bg-[#ededed]/8" : "bg-[#ded7ca]", borderColor: isDark ? "border-[#ededed]/14" : "border-[#cfc6b7]", textColor: isDark ? "text-[#ededed]/58" : "text-[#171717]/58", dotColor: isDark ? "bg-[#ededed]/45" : "bg-[#171717]/42", color: isDark ? "#a3a3a3" : "#706b62", }, } as const; return palettes[tone]; } 77:["$","$L98",null,{"files":[{"path":"components/bjork-ui/tables/resizable-table.tsx","content":"$99","type":"registry:component","target":"@components/bjork-ui/tables/resizable-table.tsx"},{"path":"components/bjork-ui/tables/table-theme.ts","content":"$9a","type":"registry:component","target":"@components/bjork-ui/tables/table-theme.ts"}],"className":"h-[70svh] min-h-80"}]