7e: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"] 9e: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"] a0: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"] 52:["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bjork-bg",":"]}] 53:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f7f3ea"}] 54:["$","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"}]]}] 55:["$","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)"}]]}]}]]}] 56:["$","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"}]]}] 57:["$","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"}]]}] 58:["$","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"}]]}] 59:["$","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)"}]]}]}]]}] 5a:["$","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)"}]]}]}]]}] 5b:["$","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)"}]]}]}]]}] 5c:["$","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)"}]]}]}]]}] 5d:["$","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"}]]}] 5e:["$","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"}]]}] 5f:["$","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)"}]]}]}]]}] 60:["$","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)"}]]}]}]]}] 61:["$","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)"}]]}]}]]}] 62:["$","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)"}]]}]}]]}] 63:["$","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)"}]]}]}]]}] 64:["$","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"}]]}] 65:["$","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"}]]}] 66:["$","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"}]]}] 67:["$","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"}]]}] 68:["$","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"}]]}] 69:["$","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"}]]}] 6a:["$","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"}]]}] 6b:["$","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"}]]}] 6c:["$","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)"}]]}]}]]}] 6d:["$","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)"}]]}]}]]}] 6e:["$","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)"}]]}]}]]}] 6f:["$","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"}]]}] 70:["$","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"}]]}] 71:["$","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"}]]}] 72:["$","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"}]]}] 73:["$","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)"}]]}] 74:["$","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)"}]]}] 75:["$","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)"}]]}] 76:["$","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)"}]]}] 77:["$","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)"}]]}] 78:["$","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"}]]}] 79:["$","$L7e",null,{"orientation":"horizontal"}] 7a:["$","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":["$","$L51",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)"}}],"$L7f"]}]}]]}],"$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"]}]}]]}] 7b:null 9f: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); } }7c:["$","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":["$","$L9e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$9f"}]}]]}] a1:Tdc97,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, } from "react"; import { motion } from "framer-motion"; import { BlockButton, BlockField, IconButton, InitialsAvatar, blockRoot, focusRing, useAnnouncer, useAppBlockTheme, useBlockReducedMotion, useBlockToast, type AppBlockTheme, } from "@/components/bjork-ui/blocks/app-block-kit"; import { cn } from "@/lib/utils"; export type AppSignInMode = "sign-in" | "sign-up"; export type AppSignInProvider = "google" | "github" | "apple"; export interface AppSignInPayload { mode: AppSignInMode; email: string; password: string; /** Only sent when creating an account. */ name?: string; remember: boolean; } export interface AppSignInBrand { name: string; /** One line under the heading. */ tagline: string; supportHref?: string; termsHref?: string; privacyHref?: string; } export interface AppSignInTestimonial { quote: string; author: string; role: string; } export interface AppSignInProps { theme?: AppBlockTheme; /** Controlled mode. */ mode?: AppSignInMode; defaultMode?: AppSignInMode; onModeChange?: (mode: AppSignInMode) => void; brand?: AppSignInBrand; testimonial?: AppSignInTestimonial; providers?: AppSignInProvider[]; /** Throw an Error to show its message as the form error. Without it the block runs a demo backend. */ onSubmit?: (payload: AppSignInPayload) => Promise | void; onSso?: (provider: AppSignInProvider) => Promise | void; /** Sends the link. Throw to show an error. */ onMagicLink?: (email: string) => Promise | void; /** Checks the 6-digit code from the email. Throw to reject it. */ onVerifyCode?: (email: string, code: string) => Promise | void; /** Called from the success screen's primary button. */ onContinue?: () => void; /** Shows the brand panel at wide container widths. Default true. */ showPanel?: boolean; /** Seconds before a new link can be requested. Default 30. */ resendSeconds?: number; className?: string; } export const APP_SIGN_IN_BRAND: AppSignInBrand = { name: "Kestrel", tagline: "Incident timelines, on-call and status pages for teams that ship daily.", supportHref: "#support", termsHref: "#terms", privacyHref: "#privacy", }; export const APP_SIGN_IN_TESTIMONIAL: AppSignInTestimonial = { quote: "We used to rebuild every incident from Slack scrollback. Now the timeline writes itself, and our postmortems ship the same afternoon.", author: "Maren Okafor", role: "Staff SRE, Halden Freight", }; export const APP_SIGN_IN_PROVIDERS: AppSignInProvider[] = ["google", "github", "apple"]; type View = "form" | "magic" | "success"; type FieldName = "name" | "email" | "password"; type Errors = Partial>; const PROVIDER_LABEL: Record = { google: "Google", github: "GitHub", apple: "Apple", }; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const PASSWORD_RULES: { id: string; label: string; test: (value: string) => boolean }[] = [ { id: "length", label: "At least 10 characters", test: (v) => v.length >= 10 }, { id: "case", label: "Upper and lower case", test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v) }, { id: "number", label: "A number", test: (v) => /\d/.test(v) }, { id: "symbol", label: "A symbol", test: (v) => /[^A-Za-z0-9]/.test(v) }, ]; const STRENGTH = [ { label: "Too weak", color: "var(--blk-error)" }, { label: "Weak", color: "var(--blk-error)" }, { label: "Fair", color: "var(--blk-warning)" }, { label: "Good", color: "var(--bjork-accent)" }, { label: "Strong", color: "var(--blk-success)" }, ] as const; function validate(mode: AppSignInMode, values: { name: string; email: string; password: string }): Errors { const errors: Errors = {}; if (mode === "sign-up" && values.name.trim().length < 2) errors.name = "Enter your full name."; if (!values.email.trim()) errors.email = "Enter your work email."; else if (!EMAIL_RE.test(values.email.trim())) errors.email = "That doesn't look like an email address."; if (!values.password) errors.password = mode === "sign-in" ? "Enter your password." : "Choose a password."; else if (mode === "sign-up" && PASSWORD_RULES.some((rule) => !rule.test(values.password))) errors.password = "Your password needs every item on the list below."; return errors; } const wait = (ms: number) => new Promise((resolve) => window.setTimeout(resolve, ms)); // Demo backend: a few addresses and passwords trigger the error states. async function demoSubmit(payload: AppSignInPayload) { await wait(900); const email = payload.email.toLowerCase(); if (email.endsWith("@blocked.test")) throw new Error("This account is locked after too many attempts. Use a sign-in link, or try again in 15 minutes."); if (payload.mode === "sign-up" && email.endsWith("@taken.test")) throw new Error("An account with this email already exists."); if (payload.mode === "sign-in" && payload.password === "wrong") throw new Error("That email and password don't match. Check for typos, or reset your password."); } function firstName(name: string, email: string) { const fromName = name.trim().split(/\s+/)[0]; if (fromName) return fromName; const local = email.split("@")[0] ?? ""; return local ? local.charAt(0).toUpperCase() + local.slice(1).split(/[._-]/)[0] : "there"; } /** * A complete sign-in and sign-up page: SSO, email and password with live validation, a passwordless link with * a 6-digit code fallback, and loading, error and success states. Lays out as a split screen when the container * is wide and a single column when it is narrow. */ export function AppSignIn({ theme = "auto", mode: modeProp, defaultMode = "sign-in", onModeChange, brand = APP_SIGN_IN_BRAND, testimonial = APP_SIGN_IN_TESTIMONIAL, providers = APP_SIGN_IN_PROVIDERS, onSubmit, onSso, onMagicLink, onVerifyCode, onContinue, showPanel = true, resendSeconds = 30, className, }: AppSignInProps) { const { style } = useAppBlockTheme(theme); const reduce = useBlockReducedMotion(); const { announce, region } = useAnnouncer(); const toast = useBlockToast(); const uid = useId(); const [innerMode, setInnerMode] = useState(defaultMode); const mode = modeProp ?? innerMode; const [view, setView] = useState("form"); const [values, setValues] = useState({ name: "", email: "", password: "" }); const [touched, setTouched] = useState>>({}); const [submitted, setSubmitted] = useState(false); const [formError, setFormError] = useState(null); const [pending, setPending] = useState(null); const [remember, setRemember] = useState(true); const [showPassword, setShowPassword] = useState(false); const [capsLock, setCapsLock] = useState(false); const [passwordFocused, setPasswordFocused] = useState(false); const [successName, setSuccessName] = useState(""); const headingRef = useRef(null); const nameRef = useRef(null); const emailRef = useRef(null); const passwordRef = useRef(null); const bannerRef = useRef(null); const moveFocusToHeading = useRef(false); // After a view change, the new heading takes focus so screen readers land on the new context. useLayoutEffect(() => { if (!moveFocusToHeading.current) return; moveFocusToHeading.current = false; headingRef.current?.focus({ preventScroll: true }); }, [view]); const goTo = useCallback((next: View) => { moveFocusToHeading.current = true; setView(next); }, []); const setMode = (next: AppSignInMode) => { if (next === mode) return; if (modeProp === undefined) setInnerMode(next); onModeChange?.(next); setFormError(null); setSubmitted(false); setTouched({}); announce(next === "sign-in" ? "Sign in form" : "Create account form"); }; const errors = validate(mode, values); const visibleError = (field: FieldName) => (submitted || touched[field] ? errors[field] ?? null : null); const update = (field: FieldName) => (event: React.ChangeEvent) => { setValues((prev) => ({ ...prev, [field]: event.target.value })); if (formError) setFormError(null); }; const blur = (field: FieldName) => () => { if (values[field]) setTouched((prev) => ({ ...prev, [field]: true })); }; const busy = pending !== null; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); if (busy) return; setSubmitted(true); const order: FieldName[] = mode === "sign-up" ? ["name", "email", "password"] : ["email", "password"]; const firstInvalid = order.find((field) => errors[field]); if (firstInvalid) { ({ name: nameRef, email: emailRef, password: passwordRef })[firstInvalid].current?.focus(); const count = order.filter((field) => errors[field]).length; announce(`${count} ${count === 1 ? "field needs" : "fields need"} attention. ${errors[firstInvalid]}`); return; } setFormError(null); setPending("submit"); const payload: AppSignInPayload = { mode, email: values.email.trim(), password: values.password, remember, ...(mode === "sign-up" ? { name: values.name.trim() } : {}), }; try { await (onSubmit ? onSubmit(payload) : demoSubmit(payload)); setSuccessName(firstName(values.name, values.email)); goTo("success"); } catch (error) { const message = error instanceof Error ? error.message : "Something went wrong. Try again."; setFormError(message); announce(message); window.requestAnimationFrame(() => bannerRef.current?.focus({ preventScroll: false })); } finally { setPending(null); } }; const handleSso = async (provider: AppSignInProvider) => { if (busy) return; setPending(provider); setFormError(null); try { await (onSso ? onSso(provider) : wait(1100)); setSuccessName(values.name.trim().split(/\s+/)[0] || "Ada"); goTo("success"); } catch (error) { const message = error instanceof Error ? error.message : `${PROVIDER_LABEL[provider]} sign-in was cancelled.`; setFormError(message); announce(message); } finally { setPending(null); } }; const handleMagic = async () => { if (busy) return; setTouched((prev) => ({ ...prev, email: true })); if (errors.email) { emailRef.current?.focus(); announce(errors.email); return; } setPending("magic"); setFormError(null); try { await (onMagicLink ? onMagicLink(values.email.trim()) : wait(800)); goTo("magic"); } catch (error) { const message = error instanceof Error ? error.message : "We couldn't send the link. Try again."; setFormError(message); announce(message); } finally { setPending(null); } }; const handleForgot = () => { setTouched((prev) => ({ ...prev, email: true })); if (errors.email) { emailRef.current?.focus(); announce(`To reset your password, ${errors.email.charAt(0).toLowerCase()}${errors.email.slice(1)}`); return; } toast.show(`Reset link sent to ${values.email.trim()}`, "success"); }; const reset = () => { setValues({ name: "", email: "", password: "" }); setTouched({}); setSubmitted(false); setFormError(null); setShowPassword(false); goTo("form"); }; const checkCaps = (event: ReactKeyboardEvent) => { setCapsLock(event.getModifierState?.("CapsLock") ?? false); }; const passed = PASSWORD_RULES.filter((rule) => rule.test(values.password)).length; const strength = values.password ? STRENGTH[passed] : null; const isSignUp = mode === "sign-up"; const headingId = `${uid}-heading`; const tabIds = { "sign-in": `${uid}-tab-in`, "sign-up": `${uid}-tab-up` } as const; const panelId = `${uid}-panel`; const onTabKey = (event: ReactKeyboardEvent) => { if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return; event.preventDefault(); const next: AppSignInMode = event.key === "Home" ? "sign-in" : event.key === "End" ? "sign-up" : mode === "sign-in" ? "sign-up" : "sign-in"; setMode(next); document.getElementById(tabIds[next])?.focus(); }; const viewMotion = reduce ? { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.12 } } : { initial: { opacity: 0, y: 6, filter: "blur(3px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.24, ease: [0.23, 1, 0.32, 1] as const }, }; return (

event.preventDefault()} className={cn("flex items-center gap-2.5 rounded-[8px]", focusRing)} aria-label={`${brand.name} home`} > {brand.name} {brand.supportHref && ( Need help? )}

{view === "form" && (

{(["sign-in", "sign-up"] as const).map((tab) => ( ))}

{isSignUp ? `Start with ${brand.name}` : "Welcome back"}

{isSignUp ? "Free for up to 5 responders. No card required." : brand.tagline}

{providers.map((provider) => ( handleSso(provider)} disabled={busy && pending !== provider} aria-busy={pending === provider || undefined} aria-label={`${isSignUp ? "Sign up" : "Sign in"} with ${PROVIDER_LABEL[provider]}`} className="h-11 min-w-0 px-2" > {pending === provider ? : } {PROVIDER_LABEL[provider]} ))}

or with email

{formError && (

{formError}

{formError.startsWith("An account with this email") && ( )}

)} {isSignUp && ( )}

{ blur("password")(); setPasswordFocused(false); setCapsLock(false); }} onFocus={() => setPasswordFocused(true)} onKeyDown={checkCaps} onKeyUp={checkCaps} readOnly={busy} error={visibleError("password")} hint={ capsLock && passwordFocused ? ( Caps Lock is on ) : undefined } labelAside={ !isSignUp ? ( ) : undefined } trailing={ setShowPassword((v) => !v)} className="aria-pressed:text-[color:var(--bjork-text)]" > } /> {isSignUp && (values.password || passwordFocused) && ( )}

{!isSignUp && } {pending === "submit" ? ( <> {isSignUp ? "Creating account" : "Signing in"} ) : isSignUp ? ( "Create account" ) : ( "Sign in" )} {!isSignUp && ( {pending === "magic" ? : } Email me a sign-in link instead )} {isSignUp && (

By creating an account you agree to the{" "} Terms {" "} and{" "} Privacy Policy .

)}

)} {view === "magic" && ( goTo("form")} onResend={async () => { await (onMagicLink ? onMagicLink(values.email.trim()) : wait(500)); toast.show(`New link sent to ${values.email.trim()}`, "success"); }} onVerify={async (code) => { if (onVerifyCode) await onVerifyCode(values.email.trim(), code); else { await wait(700); if (code === "000000") throw new Error("That code has expired. Request a new link."); } setSuccessName(firstName(values.name, values.email)); goTo("success"); }} announce={announce} /> )} {view === "success" && ( toast.show("Opening your workspace"))} onSignOut={reset} /> )}

{showPanel && }

{region} {toast.node}

); } function PasswordMeter({ value, passed, strength, reduce, }: { value: string; passed: number; strength: (typeof STRENGTH)[number] | null; reduce: boolean; }) { return (

{strength ? strength.label : ""}

{rule.label} {ok ? ", met" : ", not met"}

); } function RememberMe({ checked, onChange }: { checked: boolean; onChange: (value: boolean) => void }) { return ( onChange(event.target.checked)} /> Keep me signed in for 30 days ); } const CODE_LENGTH = 6; function MagicLinkView({ headingId, headingRef, email, resendSeconds, onBack, onResend, onVerify, announce, }: { headingId: string; headingRef: React.RefObject; email: string; resendSeconds: number; onBack: () => void; onResend: () => Promise; onVerify: (code: string) => Promise; announce: (message: string) => void; }) { const [code, setCode] = useState(""); const [error, setError] = useState(null); const [verifying, setVerifying] = useState(false); const [resending, setResending] = useState(false); const [remaining, setRemaining] = useState(resendSeconds); const [codeFocused, setCodeFocused] = useState(false); const codeId = useId(); useEffect(() => { if (remaining <= 0) return; const id = window.setTimeout(() => setRemaining((s) => s - 1), 1000); return () => window.clearTimeout(id); }, [remaining]); const verify = async (value: string) => { if (value.length !== CODE_LENGTH || verifying) return; setVerifying(true); setError(null); try { await onVerify(value); } catch (err) { const message = err instanceof Error ? err.message : "That code didn't work."; setError(message); announce(message); setCode(""); } finally { setVerifying(false); } }; const resend = async () => { setResending(true); try { await onResend(); setRemaining(resendSeconds); setError(null); } finally { setResending(false); } }; const mm = Math.floor(remaining / 60); const ss = String(remaining % 60).padStart(2, "0"); return (

Check your inbox

We sent a sign-in link to{" "} {email}. It expires in 15 minutes. Or enter the 6-digit code from the same email.

{ event.preventDefault(); void verify(code); }} > Verification code

{ const next = event.target.value.replace(/\D/g, "").slice(0, CODE_LENGTH); setCode(next); setError(null); if (next.length === CODE_LENGTH) void verify(next); }} onFocus={() => setCodeFocused(true)} onBlur={() => setCodeFocused(false)} inputMode="numeric" autoComplete="one-time-code" pattern="\d{6}" maxLength={CODE_LENGTH} readOnly={verifying} aria-invalid={error ? true : undefined} aria-describedby={error ? `${codeId}-error` : `${codeId}-hint`} className="absolute inset-0 z-10 w-full cursor-text bg-transparent font-mono text-transparent caret-transparent opacity-0 outline-none selection:bg-transparent" />

{Array.from({ length: CODE_LENGTH }).map((_, i) => { const char = code[i]; const active = codeFocused && (i === code.length || (i === CODE_LENGTH - 1 && code.length === CODE_LENGTH)); return ( {char ?? ""} {active && !char && ( )} ); })}

{error ? (

{error}

) : (

Paste it in, we'll check it as soon as all six digits are there.

)} {verifying ? ( <> Verifying ) : ( "Verify and sign in" )}

Nothing yet? Check spam.

); } function SuccessView({ headingId, headingRef, name, email, created, brand, reduce, onContinue, onSignOut, }: { headingId: string; headingRef: React.RefObject; name: string; email: string; created: boolean; brand: string; reduce: boolean; onContinue: () => void; onSignOut: () => void; }) { return (

{created ? `You're in, ${name}` : `Welcome back, ${name}`}

{created ? `Your ${brand} workspace is ready. We'll walk you through connecting your first service.` : "You're signed in. Pick up where you left off."}

{name}

{email || "ada@halden.co"}

Verified

{created ? "Set up workspace" : "Continue to dashboard"} Not you? Sign out

); } function BrandPanel({ brand, testimonial, reduce, }: { brand: AppSignInBrand; testimonial: AppSignInTestimonial; reduce: boolean; }) { return ( ); } // p95 latency over 14 days, ms. The dip after day 8 is the rollout the testimonial is about. const LATENCY = [238, 244, 231, 252, 247, 259, 241, 236, 214, 198, 191, 186, 179, 182]; const LATENCY_PREV = [242, 236, 248, 240, 255, 246, 251, 244, 249, 238, 246, 241, 250, 243]; function ProductPreview({ reduce }: { reduce: boolean }) { const w = 300; const h = 92; const min = 160; const max = 270; const x = (i: number) => (i / (LATENCY.length - 1)) * w; const y = (v: number) => h - ((v - min) / (max - min)) * h; const line = LATENCY.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(""); const prev = LATENCY_PREV.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(""); const area = `${line}L${w},${h}L0,${h}Z`; const lastX = x(LATENCY.length - 1); const lastY = y(LATENCY[LATENCY.length - 1]); const timeline = [ { time: "14:02", label: "Alert: checkout p95 > 400 ms", tone: "var(--blk-error)" }, { time: "14:04", label: "Maren acknowledged · paged payments", tone: "var(--blk-warning)" }, { time: "14:19", label: "Rolled back api@4.18.2", tone: "var(--bjork-accent)" }, { time: "14:26", label: "Resolved · postmortem drafted", tone: "var(--blk-success)" }, ]; return (

checkout · p95 latency

182 ms −24%

14d prior

INC-2291 · Checkout latency

Resolved

{i < timeline.length - 1 && ( )} {entry.time} {entry.label}

); } function BrandMark() { return ( ); } function ProviderMark({ provider }: { provider: AppSignInProvider }) { if (provider === "google") { return ( ); } if (provider === "github") { return ( ); } return ( ); } function EnvelopeArt() { return ( ); } function MailIcon() { return ( ); } function EyeIcon({ open }: { open: boolean }) { return ( ); } function Spinner(): ReactNode { return ( ); } a2:T6b00,"use client"; import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, type ButtonHTMLAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode, type RefObject, } from "react"; import { useReducedMotion } from "framer-motion"; import { useBjorkTone } from "@/components/bjork-ui/_core/tone"; import type { BjorkTone } from "@/components/bjork-ui/_core/palette"; import { cn } from "@/lib/utils"; // Shared plumbing for the application blocks (app-*). Every block is a full layout that sizes itself to its // container, not the viewport, so it behaves the same pasted into a page, a dialog or a docs preview. export type AppBlockTheme = "light" | "dark" | "auto"; // The library tokens, so a forced theme works even when the page itself is in the other mode. const TOKENS: Record> = { light: { "--bjork-bg": "#f7f3ea", "--bjork-surface": "#fffcf6", "--bjork-surface-muted": "rgba(250, 246, 237, 0.94)", "--bjork-surface-hover": "#f5efe3", "--bjork-surface-active": "#efe7d8", "--bjork-panel": "#f8f2e7", "--bjork-menu": "rgba(255, 252, 246, 0.98)", "--bjork-field": "rgba(255, 252, 246, 0.96)", "--bjork-field-muted": "rgba(248, 242, 231, 0.82)", "--bjork-field-inset": "rgba(239, 231, 216, 0.72)", "--bjork-error-bg": "#fff0e8", "--bjork-text": "#171717", "--bjork-text-strong": "rgba(23, 23, 23, 0.9)", "--bjork-text-medium": "rgba(23, 23, 23, 0.72)", "--bjork-text-muted": "rgba(23, 23, 23, 0.56)", "--bjork-text-soft": "rgba(23, 23, 23, 0.46)", "--bjork-text-faint": "rgba(23, 23, 23, 0.22)", "--bjork-inverted-text": "#fff8f0", "--bjork-border": "#eee6db", "--bjork-border-muted": "#f5ede2", "--bjork-border-strong": "#e1d7c8", "--bjork-thumb": "#a49b8e", "--bjork-track": "#ded6ca", "--bjork-accent": "#ec7d43", "--bjork-accent-hover": "#f0935f", "--bjork-accent-soft": "rgba(236, 125, 67, 0.1)", "--bjork-accent-muted": "rgba(236, 125, 67, 0.2)", "--bjork-accent-foreground": "#3f2112", "--bjork-shadow-surface": "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)", "--bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", "--bjork-shadow-panel": "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)", "--bjork-shadow-menu": "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)", "--bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", "--bjork-ring-offset": "#f7f3ea", }, dark: { "--bjork-bg": "#111111", "--bjork-surface": "#121212", "--bjork-surface-muted": "rgba(22, 22, 22, 0.92)", "--bjork-surface-hover": "#181818", "--bjork-surface-active": "#202020", "--bjork-panel": "#0d0d0d", "--bjork-menu": "rgba(18, 18, 18, 0.98)", "--bjork-field": "rgba(18, 18, 18, 0.95)", "--bjork-field-muted": "rgba(18, 18, 18, 0.55)", "--bjork-field-inset": "rgba(9, 9, 9, 0.75)", "--bjork-error-bg": "#130d0a", "--bjork-text": "#ededed", "--bjork-text-strong": "rgba(237, 237, 237, 0.9)", "--bjork-text-medium": "rgba(237, 237, 237, 0.72)", "--bjork-text-muted": "rgba(237, 237, 237, 0.6)", "--bjork-text-soft": "rgba(237, 237, 237, 0.4)", "--bjork-text-faint": "rgba(237, 237, 237, 0.22)", "--bjork-inverted-text": "#080808", "--bjork-border": "#232323", "--bjork-border-muted": "#1c1c1c", "--bjork-border-strong": "#343434", "--bjork-thumb": "#626262", "--bjork-track": "#090909", "--bjork-accent": "#ec5c13", "--bjork-accent-hover": "#f07832", "--bjork-accent-soft": "rgba(236, 92, 19, 0.12)", "--bjork-accent-muted": "rgba(236, 92, 19, 0.24)", "--bjork-accent-foreground": "#fff2ea", "--bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", "--bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)", "--bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", "--bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", "--bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)", "--bjork-ring-offset": "#080808", }, }; // Block-only tokens the global sheet does not carry: status inks, a readable accent ink and the scrim. const EXTRAS: Record> = { light: { "--blk-accent-ink": "#b4531f", "--blk-accent-fill": "#e0692c", "--blk-accent-fill-ink": "#fffaf5", "--blk-success": "#1f8a55", "--blk-success-soft": "rgba(31, 138, 85, 0.1)", "--blk-warning": "#9a6200", "--blk-warning-soft": "rgba(168, 107, 0, 0.1)", "--blk-error": "#c8361f", "--blk-error-soft": "rgba(200, 54, 31, 0.08)", "--blk-scrim": "rgba(40, 32, 22, 0.28)", "--blk-chart-ghost": "rgba(23, 23, 23, 0.28)", }, dark: { "--blk-accent-ink": "#f07832", "--blk-accent-fill": "#c94f12", "--blk-accent-fill-ink": "#fff2ea", "--blk-success": "#4cc38a", "--blk-success-soft": "rgba(76, 195, 138, 0.12)", "--blk-warning": "#f2b544", "--blk-warning-soft": "rgba(242, 181, 68, 0.12)", "--blk-error": "#ff6a5c", "--blk-error-soft": "rgba(255, 92, 77, 0.1)", "--blk-scrim": "rgba(0, 0, 0, 0.55)", "--blk-chart-ghost": "rgba(237, 237, 237, 0.3)", }, }; const subscribeNoop = () => () => {}; /** True after hydration. Server and first client render agree on false. */ export function useHydrated() { return useSyncExternalStore( subscribeNoop, () => true, () => false, ); } /** Reduced motion, read only after hydration so the first render matches the server. */ export function useBlockReducedMotion() { const hydrated = useHydrated(); const reduced = useReducedMotion(); return hydrated && reduced === true; } /** * Resolves a block's theme to inline custom properties. "auto" leaves the library tokens to the page * (no flash on load) and only adds the block extras for the resolved tone; "light" and "dark" pin every token. */ export function useAppBlockTheme(theme: AppBlockTheme = "auto") { const forced = theme === "auto" ? undefined : theme; const tone = useBjorkTone(forced); const style = { ...(forced ? TOKENS[forced] : {}), ...EXTRAS[tone], colorScheme: tone, } as CSSProperties; return { tone, style }; } /** Width of an element, tracked with ResizeObserver. 0 until measured. */ export function useElementWidth(ref: RefObject) { const [width, setWidth] = useState(0); useLayoutEffect(() => { const el = ref.current; if (!el) return; setWidth(el.getBoundingClientRect().width); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, [ref]); return width; } export const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]"; export const blockRoot = "@container relative isolate flex min-h-0 w-full overflow-hidden bg-[var(--bjork-bg)] font-bjork-alpha text-[color:var(--bjork-text)] antialiased selection:bg-[color:var(--bjork-accent-muted)]"; type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "outline"; type ButtonSize = "sm" | "md" | "lg"; const BUTTON_VARIANTS: Record = { primary: "bg-[var(--blk-accent-fill)] text-[color:var(--blk-accent-fill-ink)] shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_1px_2px_rgba(0,0,0,0.18)] hover:brightness-[1.08]", secondary: "border border-[color:var(--bjork-border)] bg-[var(--bjork-surface)] text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-soft)] hover:bg-[var(--bjork-surface-hover)]", outline: "border border-[color:var(--bjork-border-strong)] bg-transparent text-[color:var(--bjork-text)] hover:bg-[var(--bjork-surface-hover)]", ghost: "bg-transparent text-[color:var(--bjork-text-medium)] hover:bg-[var(--bjork-surface-hover)] hover:text-[color:var(--bjork-text)]", danger: "bg-[var(--blk-error)] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] hover:brightness-[1.08]", }; const BUTTON_SIZES: Record = { sm: "h-8 gap-1.5 rounded-[9px] px-2.5 text-[12.5px]", md: "h-9 gap-2 rounded-[10px] px-3.5 text-[13px]", lg: "h-11 gap-2 rounded-[12px] px-4 text-[14px]", }; export interface BlockButtonProps extends ButtonHTMLAttributes { variant?: ButtonVariant; size?: ButtonSize; } export const BlockButton = forwardRef(function BlockButton( { variant = "secondary", size = "md", className, type = "button", ...props }, ref, ) { return ( ); }); export function Kbd({ children, className }: { children: ReactNode; className?: string }) { return ( {children} ); } export const inputClass = "h-10 w-full min-w-0 rounded-[10px] border border-[color:var(--bjork-border)] bg-[var(--bjork-field)] px-3 text-[13.5px] text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-soft)] outline-none transition-[border-color,box-shadow,background-color] duration-150 placeholder:text-[color:var(--bjork-text-soft)] hover:border-[color:var(--bjork-border-strong)] focus-visible:border-[color:var(--bjork-accent)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--bjork-accent-soft)] aria-[invalid=true]:border-[color:var(--blk-error)] aria-[invalid=true]:focus-visible:ring-[color:var(--blk-error-soft)] disabled:cursor-not-allowed disabled:opacity-50"; export interface BlockFieldProps extends Omit, "children"> { label: string; hint?: ReactNode; error?: string | null; /** Rendered at the right of the label row, e.g. a "Forgot?" link. */ labelAside?: ReactNode; /** Rendered inside the field on the right, e.g. a show/hide toggle. */ trailing?: ReactNode; className?: string; inputClassName?: string; } /** Label, input, hint and error wired together with ids. The error replaces the hint and is announced. */ export const BlockField = forwardRef(function BlockField( { label, hint, error, labelAside, trailing, className, inputClassName, id, ...props }, ref, ) { const autoId = useId(); const inputId = id ?? autoId; const noteId = `${inputId}-note`; const hasNote = Boolean(error) || hint !== undefined; return (

{label} {labelAside}

{trailing &&

{trailing}

}

{hasNote && (

{error ? ( <> {error} ) : ( hint )}

)}

); }); /** Initials avatar on a quiet tinted disc. Hue comes from the name so a person keeps their colour. */ export function InitialsAvatar({ name, size = 28, className, }: { name: string; size?: number; className?: string; }) { const initials = name .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((part) => part[0]?.toUpperCase()) .join(""); let hash = 0; for (let i = 0; i < name.length; i += 1) hash = (hash * 31 + name.charCodeAt(i)) >>> 0; const hue = [22, 38, 150, 200, 260, 330][hash % 6]; return ( ); } const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; /** * Keeps focus inside `ref` while `active`, closes on Escape, and hands focus back to whatever had it * before. Used by the in-block drawers and dialogs, which are positioned inside the block rather than portalled, * so a forced theme reaches them. */ export function useFocusTrap(ref: RefObject, active: boolean, onEscape: () => void) { const escapeRef = useRef(onEscape); useLayoutEffect(() => { escapeRef.current = onEscape; }); useEffect(() => { if (!active) return; const node = ref.current; if (!node) return; const previous = document.activeElement as HTMLElement | null; const first = node.querySelector("[data-autofocus]") ?? node.querySelector(FOCUSABLE); (first ?? node).focus({ preventScroll: true }); const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { event.stopPropagation(); escapeRef.current(); return; } if (event.key !== "Tab") return; const items = Array.from(node.querySelectorAll(FOCUSABLE)).filter( (el) => el.offsetParent !== null || el === document.activeElement, ); if (items.length === 0) return; const head = items[0]; const tail = items[items.length - 1]; if (event.shiftKey && document.activeElement === head) { event.preventDefault(); tail.focus(); } else if (!event.shiftKey && document.activeElement === tail) { event.preventDefault(); head.focus(); } }; node.addEventListener("keydown", onKey); return () => { node.removeEventListener("keydown", onKey); if (previous && document.contains(previous)) previous.focus({ preventScroll: true }); }; }, [active, ref]); } export interface BlockDrawerProps { open: boolean; onClose: () => void; side?: "left" | "right"; /** Accessible name of the dialog. */ label: string; children: ReactNode; className?: string; } /** * A modal drawer anchored to the block, not the viewport. Under reduced motion it fades instead of sliding. * The block's own content should be marked `inert` while it is open. */ export function BlockDrawer({ open, onClose, side = "left", label, children, className }: BlockDrawerProps) { const panelRef = useRef(null); const reduce = useBlockReducedMotion(); useFocusTrap(panelRef, open, onClose); const hidden = side === "left" ? "-translate-x-full" : "translate-x-full"; return (

); } /** Polite status text for screen readers; changes are announced once. */ export function useAnnouncer() { const [message, setMessage] = useState(""); const announce = useCallback((next: string) => { // Clearing first makes a repeated message announce again. setMessage(""); window.requestAnimationFrame(() => setMessage(next)); }, []); const region = ( {message} ); return { announce, region }; } /** A small toast pinned to the bottom of the block. Purely visual; pair it with `useAnnouncer`. */ export function BlockToast({ message, tone = "neutral" }: { message: string | null; tone?: "neutral" | "success" | "error" }) { const reduce = useBlockReducedMotion(); const dot = tone === "success" ? "var(--blk-success)" : tone === "error" ? "var(--blk-error)" : "var(--bjork-accent)"; return ( ); } /** Shows a toast for `ms` and announces it. */ export function useBlockToast(ms = 2600) { const { announce, region } = useAnnouncer(); const [toast, setToast] = useState<{ message: string; tone: "neutral" | "success" | "error" } | null>(null); const timer = useRef(undefined); const show = useCallback( (message: string, tone: "neutral" | "success" | "error" = "neutral") => { window.clearTimeout(timer.current); setToast({ message, tone }); announce(message); timer.current = window.setTimeout(() => setToast(null), ms); }, [announce, ms], ); useEffect(() => () => window.clearTimeout(timer.current), []); const node = ( <> {region} ); return { show, node }; } export interface BlockDialogProps { open: boolean; onClose: () => void; /** Visible title; also the dialog's accessible name. */ title: string; description?: ReactNode; children?: ReactNode; /** Buttons for the footer, right-aligned. */ footer?: ReactNode; tone?: "neutral" | "danger"; className?: string; } /** * A modal dialog positioned inside the block (not portalled), so a forced theme reaches it. Traps focus, closes * on Escape or a scrim click, and returns focus to the trigger. Mark the block's own content `inert` while open. */ export function BlockDialog({ open, onClose, title, description, children, footer, tone = "neutral", className }: BlockDialogProps) { const panelRef = useRef(null); const reduce = useBlockReducedMotion(); const titleId = useId(); const descId = useId(); useFocusTrap(panelRef, open, onClose); return (

{title}

{description && (

{description}

)} {children &&

{children}

}

{footer && (

{footer}

)}

); } export interface BlockSwitchProps extends Omit, "onChange"> { checked: boolean; onCheckedChange: (checked: boolean) => void; /** Accessible name when there is no visible label wired with aria-labelledby. */ label?: string; } /** A role="switch" toggle. Space and Enter flip it; it reads as on/off to assistive tech. */ export const BlockSwitch = forwardRef(function BlockSwitch( { checked, onCheckedChange, label, className, disabled, ...props }, ref, ) { return ( ); }); export function BlockSpinner({ className }: { className?: string }) { return ( ); } a3:T540,export type BjorkTone = "dark" | "light"; // Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks. export const BJORK_PALETTE = { dark: { bg: "#050505", stage: "#111111", surface: "#121212", raised: "#161616", active: "#202020", border: "#232323", borderStrong: "#343434", text: "#ededed", textMedium: "rgba(237,237,237,0.72)", textMuted: "rgba(237,237,237,0.6)", textSoft: "rgba(237,237,237,0.5)", textFaint: "rgba(237,237,237,0.22)", hair: "rgba(237,237,237,0.12)", accent: "#ec5c13", accentInk: "#ec5c13", accentFill: "#b84a12", accentSoft: "rgba(236,92,19,0.12)", accentMuted: "rgba(236,92,19,0.24)", accentFg: "#fff2ea", success: "#4cc38a", warning: "#f2b544", error: "#ff5c4d", }, light: { bg: "#f7f5ef", stage: "#f7f5ef", surface: "#fffcf6", raised: "#f5efe3", active: "#efe7d8", border: "#eee6db", borderStrong: "#e1d7c8", text: "#171717", textMedium: "rgba(23,23,23,0.78)", textMuted: "rgba(23,23,23,0.68)", textSoft: "rgba(23,23,23,0.62)", textFaint: "rgba(23,23,23,0.22)", hair: "rgba(23,23,23,0.10)", accent: "#ec7d43", accentInk: "#b4531f", accentFill: "#ec7d43", accentSoft: "rgba(236,125,67,0.10)", accentMuted: "rgba(236,125,67,0.20)", accentFg: "#3f2112", success: "#1f8a55", warning: "#a86b00", error: "#c8361f", }, } as const; 7d:["$","$La0",null,{"files":[{"path":"components/bjork-ui/blocks/app-sign-in.tsx","content":"$a1","type":"registry:component","target":"@components/bjork-ui/blocks/app-sign-in.tsx"},{"path":"components/bjork-ui/blocks/app-block-kit.tsx","content":"$a2","type":"registry:component","target":"@components/bjork-ui/blocks/app-block-kit.tsx"},{"path":"components/bjork-ui/_core/tone.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n","type":"registry:component","target":"@components/bjork-ui/_core/tone.ts"},{"path":"components/bjork-ui/_core/palette.ts","content":"$a3","type":"registry:component","target":"@components/bjork-ui/_core/palette.ts"},{"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"}],"className":"h-[70svh] min-h-80"}]