https://sigil-ui.vercel.app/_next/static/chunks/0akvc-03xfj09.js?dpl=dpl_7h7RiU7YTShtNzyNFTurRD2RyQEN

1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,653078,964574,53358,766498,e=>{"use strict";var a=e.i(877369),s=e.i(89038);e.s(["Terminal",0,function({lines:e,title:r="terminal"}){let[t,i]=(0,s.useState)(0);return(0,s.useEffect)(()=>{if(t>=e.length)return;let a=setTimeout(()=>i(e=>e+1),e[t]?.delay??400);return()=>clearTimeout(a)},[t,e]),(0,a.jsxs)("div",{className:"overflow-hidden",style:{borderRadius:"var(--s-card-radius)",border:"1px solid var(--s-border)",background:"var(--s-surface)",boxShadow:"var(--s-shadow-lg)"},children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",style:{padding:"var(--s-space-3) var(--s-space-4)",borderBottom:"1px solid var(--s-border)"},children:[(0,a.jsxs)("div",{className:"flex gap-1.5",children:[(0,a.jsx)("span",{style:{width:10,height:10,borderRadius:"var(--s-radius-full)",background:"#ef4444",opacity:.7}}),(0,a.jsx)("span",{style:{width:10,height:10,borderRadius:"var(--s-radius-full)",background:"#f59e0b",opacity:.7}}),(0,a.jsx)("span",{style:{width:10,height:10,borderRadius:"var(--s-radius-full)",background:"#10b981",opacity:.7}})]}),(0,a.jsx)("span",{className:"r-mono",style:{fontSize:"11px",color:"var(--s-text-subtle)",marginLeft:"auto",marginRight:"auto"},children:r}),(0,a.jsx)("div",{style:{width:44}})]}),(0,a.jsxs)("div",{className:"r-mono",style:{padding:"var(--s-space-6)",fontSize:"13px",lineHeight:1.8,minHeight:200},children:[e.slice(0,t).map((e,s)=>(0,a.jsxs)("div",{className:"flex gap-2",children:[e.prefix&&(0,a.jsx)("span",{style:{color:"var(--s-text-muted)",userSelect:"none"},children:e.prefix}),(0,a.jsx)("span",{style:{color:e.color??"var(--s-text-secondary)"},children:e.text})]},s)),t<e.length&&(0,a.jsx)("span",{className:"r-cursor-blink"})]})]})}],653078);var r=e.i(585692);let t=["colors","typography","spacing","radius"],i={colors:{label:"color",heading:"## Colors",lines:["primary: oklch(0.7 0.15 280)","surface: oklch(0.17 0.01 260)","border: oklch(0.25 0.02 260)"],effect:"tint"},typography:{label:"type",heading:"## Typography",lines:['font-display: "PP Mori"','font-mono: "Berkeley Mono"',"heading-weight: 600"],effect:"typeset"},spacing:{label:"space",heading:"## Spacing",lines:["base: 4px","section-py: 96px","card-padding: 24px"],effect:"reflow"},radius:{label:"radius",heading:"## Radius",lines:["radius-sm: 4px","radius-md: 8px","radius-lg: 12px"],effect:"reshape"}},n={colors:["--s-primary: oklch(0.7 0.15 280);","--s-surface: oklch(0.17 0.01 260);","--s-border: oklch(0.25 0.02 260);"],typography:['--s-font-display: "PP Mori", sans-serif;','--s-font-mono: "Berkeley Mono", monospace;',"--s-heading-weight: 600;"],spacing:["--s-spacing-base: 4px;","--s-section-py: 96px;","--s-card-padding: 24px;"],radius:["--s-radius-sm: 4px;","--s-radius-md: 8px;","--s-radius-lg: 12px;"]},o=[{name:"Button",angle:"0deg",distance:"clamp(130px, 19vw, 210px

1)"},{name:"Badge",angle:"72deg",distance:"clamp(112px, 17vw, 188px)"},{name:"Input",angle:"144deg",distance:"clamp(124px, 18vw, 202px)"},{name:"Progress",angle:"216deg",distance:"clamp(108px, 16vw, 176px)"},{name:"Card",angle:"288deg",distance:"clamp(128px, 18vw, 198px)"}],l={colors:"shadow-[0_0_42px_color-mix(in_oklch,var(--s-primary)_32%,transparent)]",typography:"tracking-[0.08em]",spacing:"gap-4",radius:"rounded-[var(--s-radius-xl,var(--s-radius-lg,16px))]"};function d({activeGroup:e}){return(0,a.jsxs)("div",{className:"relative z-[3] w-full max-w-[360px] border bg-[var(--s-background)]/95 p-4 shadow-[var(--s-shadow-lg)] backdrop-blur transition-transform duration-[var(--s-duration-normal,200ms)] lg:absolute lg:left-8 lg:top-8",style:{borderColor:"var(--s-border)",borderRadius:"var(--s-radius-lg, 12px)",transform:"translate3d(calc(var(--mx) * -12px), calc(var(--my) * -10px), 0)"},children:[(0,a.jsxs)("div",{className:"mb-3 flex items-center justify-between",children:[(0,a.jsx)(r.MonoLabel,{variant:"accent",size:"xs",children:"sigil.tokens.md"}),(0,a.jsx)("span",{className:"font-[family-name:var(--s-font-mono)] text-[9px] uppercase tracking-[0.18em] text-[var(--s-text-muted)]",children:"source"})]}),(0,a.jsx)("div",{className:"flex flex-col gap-2",children:t.map(s=>{let t=i[s],n=s===e;return(0,a.jsxs)("div",{className:(0,r.cn)("border px-3 py-2 transition-all duration-[var(--s-duration-normal,200ms)]",n&&"bg-[var(--s-primary)]/[0.07] sm:translate-x-2"),style:{borderColor:n?"var(--s-primary)":"var(--s-border)",borderRadius:"var(--s-radius-md, 8px)"},children:[(0,a.jsxs)("div",{className:"mb-1 flex items-center justify-between",children:[(0,a.jsx)("span",{className:"font-[family-name:var(--s-font-mono)] text-[11px] font-semibold text-[var(--s-text)]",children:t.heading}),n&&(0,a.jsx)("span",{className:"font-[family-name:var(--s-font-mono)] text-[9px] uppercase text-[var(--s-primary)]",children:"compiling"})]}),t.lines.map(e=>(0,a.jsx)("div",{className:"font-[family-name:var(--s-font-mono)] text-[10px] leading-relaxed text-[var(--s-text-muted)]",children:e},e))]},s)})})]})}function c({activeGroup:e}){return(0,a.jsxs)("div",{className:"relative z-[2] mx-auto flex min-h-[400px] w-full max-w-[320px] flex-col justify-between border bg-[var(--s-surface)]/80 p-4 shadow-[var(--s-shadow-md)] backdrop-blur lg:absolute lg:bottom-10 lg:left-1/2 lg:top-10 lg:-translate-x-1/2",style:{borderColor:"var(--s-border)",borderRadius:"var(--s-radius-lg, 12px)",transform:"translate3d(calc(var(--mx) * 6px), calc(var(--my) * 8px), 0)"},children:[(0,a.jsxs)("div",{children:[(0,a.jsx)(r.MonoLabel,{variant:"muted",size:"xs",children:"compileToCss()"}),(0,a.jsxs)("div",{className:"mt-4 rounded-[var(--s-radius-md,8px)] border border-[var(--s-border)] bg-[var(--s-background)] p-3",children:[(0,a.jsxs)("div",{className:"mb-2 font-[family-name:var(--s-font-mono)] text-[10px] text-[var(--s-text-muted)]",children:[":root ","{"]}),n[e].map(e=>(0,a.jsx)("div",{className:"font-[family-name:var(--s-font-mono)] text-[10px] leading-relaxed text-[var(--s-text)]",children:e},e)),(0,a.jsx)("div",{className:"mt-2 font-[family-name:var(--s-font-mono)] text-[10px] text-[var(--s-text-muted)]",children:"}"})]})]}),(0,a.jsx)("div",{className:"grid grid-cols-4 gap-1.5",children:t.map(s=>(0,a.jsx)("div",{className:(0,r.cn)("h-1.5 rounded-[var(--s-radius-full,9999px)] transition-all duration-[var(--s-duration-normal,200ms)]",s===e?"bg-[var(--s-primary)]":"bg-[var(--s-border)]")},s))}),(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsx)(r.TabularValue,{size:"xs",muted:!0,children:"300+ vars"}),(0,a.jsx)(r.Badge,{size:"sm",variant:"outline",className:"font-[family-name:var(--s-font-mono)] text-[8px]",children:"instant"})]})]})}function p({name:e,angle:s,distance:t,activeGroup:i}){return(0,a.jsx)("div",{className:"absolute left-1/2 top-1/2 hidden h-16 w-28 -translate-x-1/2 -translate-y-1/2 lg:block",style:{"--angle":s,"--distance":t},children:(0,a.jsx)("div",{className:"sigil-token-orbit-node h-full w-full",children:(0,a.jsxs)("div",{className:(0,r.cn)("flex h-full w-full flex-col justify-between border bg-[var(--s-background)]/95 p-2.5 shadow-[var(--s-shadow-md)] backdrop-blur transition-all duration-500",l[i]),style:{borderColor:"var(--s-border)",borderRadius:"radius"===i?"var(--s-radius-xl, 18px)":"var(--s-radius-md, 8px)"}

1,children:[(0,a.jsx)("span",{className:"font-[family-name:var(--s-font-mono)] text-[9px] uppercase tracking-[0.16em] text-[var(--s-text-muted)]",children:e}),(0,a.jsx)("span",{className:"h-1.5 w-full rounded-[var(--s-radius-full,9999px)] bg-[var(--s-primary)]/70"})]})})})}function m({activeGroup:e}){let s=i[e];return(0,a.jsx)("div",{className:"relative z-[4] mx-auto w-full max-w-[340px] transition-transform duration-500 lg:absolute lg:right-10 lg:top-1/2 lg:-translate-y-1/2",style:{transform:"translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0)"},children:(0,a.jsxs)(r.Card,{className:(0,r.cn)("border bg-[var(--s-background)]/95 shadow-[var(--s-shadow-xl)] backdrop-blur transition-all duration-500",l[e]),children:[(0,a.jsxs)(r.CardHeader,{className:"p-4 pb-2",children:[(0,a.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,a.jsx)(r.Badge,{size:"sm",className:"font-[family-name:var(--s-font-mono)] text-[9px]",children:s.effect}),(0,a.jsx)(r.MonoLabel,{variant:"muted",size:"xs",children:"components"})]}),(0,a.jsx)(r.CardTitle,{className:(0,r.cn)("text-[18px] transition-all duration-500","typography"===e&&"tracking-[-0.04em]"),children:"Runtime Panel"})]}),(0,a.jsxs)(r.CardContent,{className:(0,r.cn)("flex flex-col gap-3 p-4 pt-1 transition-all duration-500","spacing"===e&&"gap-5"),children:[(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(r.Button,{size:"sm",className:"text-[10px]",children:"Deploy"}),(0,a.jsx)(r.Button,{size:"sm",variant:"outline",className:"text-[10px]",children:"Cancel"})]}),(0,a.jsx)(r.Input,{placeholder:"Search tokens...",className:"h-8 text-[10px]"}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-1 flex items-center justify-between",children:[(0,a.jsx)("span",{className:"font-[family-name:var(--s-font-mono)] text-[9px] uppercase tracking-[0.12em] text-[var(--s-text-muted)]",children:"propagated"}),(0,a.jsx)(r.TabularValue,{size:"xs",muted:!0,children:"103"})]}),(0,a.jsx)(r.Progress,{value:100,className:"h-1"})]})]})]})})}function x({activeGroup:e,onSelect:s}){return(0,a.jsx)("div",{className:"relative z-[4] grid gap-3 lg:absolute lg:bottom-8 lg:left-8 lg:w-[360px] lg:grid-cols-2",children:t.map((t,n)=>{let o=i[t],l=t===e;return(0,a.jsxs)("button",{type:"button",onClick:()=>s(t),className:(0,r.cn)("group border bg-[var(--s-background)]/90 p-3 text-left backdrop-blur transition-all duration-[var(--s-duration-normal,200ms)]",l?"translate-y-0 border-[var(--s-primary)] text-[var(--s-text)] shadow-[var(--s-shadow-md)]":"translate-y-1 border-[var(--s-border)] text-[var(--s-text-muted)] opacity-70 hover:opacity-100"),style:{borderRadius:"var(--s-radius-md, 8px)",transform:`translate3d(calc(var(--mx) * ${n-1}px), calc(var(--my) * ${n+2}px), 0)`},children:[(0,a.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,a.jsx)("span",{className:"font-[family-name:var(--s-font-mono)] text-[10px] uppercase tracking-[0.16em]",children:o.label}),(0,a.jsx)("span",{className:"h-1.5 w-1.5 rounded-[var(--s-radius-full,9999px)] bg-[var(--s-primary)] opacity-70"})]}),(0,a.jsx)("div",{className:"font-[family-name:var(--s-font-mono)] text-[11px] text-[var(--s-text)]",children:o.effect})]},t)})})}e.s(["TokenPipelineDiagram",0,function({className:e,style:i,interval:n=3e3}){let[l,u]=(0,s.useState)(0),[v,h]=(0,s.useState)({x:0,y:0});(0,s.useEffect)(()=>{let e=setInterval(()=>{document.documentElement.hasAttribute("data-sigil-preset-switching")||u(e=>(e+1)%t.length)},n);return()=>clearInterval(e)},[n]);let b=t[l],g={"--mx":v.x.toFixed(3),"--my":v.y.toFixed(3),...i};return(0,a.jsxs)("div",{"data-slot":"token-pipeline",className:(0,r.cn)("relative min-h-[650px] overflow-hidden border bg-[var(--s-background)] p-4 sm:p-6 lg:p-8",e),onMouseMove:e=>{let a=e.currentTarget.getBoundingClientRect();h({x:(e.clientX-a.left)/a.width-.5,y:(e.clientY-a.top)/a.height-.5})},onMouseLeave:()=>h({x:0,y:0}),style:{borderColor:"var(--s-border)",borderRadius:"var(--s-radius-lg, 12px)",background:"radial-gradient(circle at 68% 42%, color-mix(in oklch, var(--s-primary) 18%, transparent), transparent 34%), linear-gradient(var(--s-border) 1px, transparent 1px), linear-gradient(90deg, var(--s-border) 1px, transparent 1px), var(--s-background)",backgroundSize:"auto, 48px 48px, 48px 48px, auto",...g},children:[(0,a.jsx)("div",{className:"pointer-events-none absolute inset-0 opacity-40",children:(0,a.jsx)("div",{className:"sigil-token-scan absolute left-0 top-0 h-24 w-full border-y border-[var(--s-primary)]/40 bg-[var(--s-primary)]/[0.04]"})}),(0,a.jsx)("div",{className:"pointer-events-none absolute left-1/2 top-1/2 hidden aspect-square w-[min(520px,72vw)] -translate-x-1/2 -translate-y-1/2 roun

1ded-[var(--s-radius-full,9999px)] border border-[var(--s-border)] lg:block"}),(0,a.jsx)("div",{className:"pointer-events-none absolute left-1/2 top-1/2 hidden aspect-square w-[min(360px,52vw)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--s-radius-full,9999px)] border border-dashed border-[var(--s-border)] lg:block"}),(0,a.jsxs)("div",{className:"relative z-[1] flex flex-col gap-5 lg:block lg:min-h-[600px]",children:[(0,a.jsx)(d,{activeGroup:b}),(0,a.jsx)(c,{activeGroup:b}),(0,a.jsx)(m,{activeGroup:b}),(0,a.jsx)(x,{activeGroup:b,onSelect:e=>u(t.indexOf(e))}),o.map(e=>(0,a.jsx)(p,{name:e.name,angle:e.angle,distance:e.distance,activeGroup:b},e.name))]}),(0,a.jsxs)("div",{className:"relative z-[5] mt-5 flex items-center gap-4 border-t border-[var(--s-border)] pt-4",children:[t.map((e,s)=>(0,a.jsx)("button",{type:"button",onClick:()=>u(s),className:(0,r.cn)("cursor-pointer border-0 bg-transparent p-0 font-[family-name:var(--s-font-mono)] text-[9px] uppercase tracking-[0.15em] transition-colors duration-[var(--s-duration-fast,150ms)]",s===l?"text-[var(--s-primary)]":"text-[var(--s-text-muted)]"),children:e},e)),(0,a.jsx)("span",{className:"ml-auto",children:(0,a.jsxs)(r.TabularValue,{size:"xs",muted:!0,children:[l+1,"/",t.length]})})]})]})}],964574);let u=[{id:"inputs",num:"01",title:"INPUTS",subtitle:"intent + ecosystem",items:[{label:"DESIGN.md"},{label:"style / guidelines"},{label:"presets"},{label:"skills + MCPs"}],description:"Project intent enters as a readable design spec, preset, reference, or agent workflow. Sigil turns that context into enforceable constraints instead of leaving it as prose.",color:"var(--s-primary)"},{id:"tokens",num:"02",title:"ABSORPTION",subtitle:"compile + normalize",items:[{label:"519 tokens"},{label:"CSS variables"},{label:"Tailwind theme"},{label:"W3C JSON"}],description:"The compiler absorbs design intent into one normalized token graph. Adapters map existing systems into the same contract, so changes propagate programmatically.",color:"var(--s-info, var(--s-primary))"},{id:"components",num:"03",title:"WRAPPERS",subtitle:"proven upstream behavior",items:[{label:"Base UI"},{label:"Radix"},{label:"charts"},{label:"carousels"}],description:"Sigil adopts mature behavior libraries and wraps them in the token contract. Accessibility and interaction stay upstream; the visual system stays coherent and editable.",color:"var(--s-success, var(--s-primary))"},{id:"pages",num:"04",title:"OUTPUTS",subtitle:"coherent by construction",items:[{label:"components"},{label:"pages"},{label:"docs"},{label:"agent rules"}],description:"Components, pages, documentation, and agent instructions all inherit the same compiled decisions. Teams extend one system instead of maintaining parallel libraries.",color:"var(--s-warning, var(--s-primary))"}],v={inputs:["DESIGN.md holds the design intent in a form humans and agents can both edit.","Presets, style rules, skills, MCPs, and references are inputs — not disconnected sources of truth.","The constraint pipeline makes contextual guidance enforceable downstream."],tokens:["One compiler emits CSS variables, Tailwind theme values, and W3C token JSON.","Adapters absorb shadcn, Bootstrap, Material, and extracted references into the same graph.","Change one semantic decision and every downstream consumer receives it."],components:["Base UI and Radix handle focus management, keyboard navigation, and ARIA behavior.","Charting, carousel, and other specialist libraries keep their mature engines.","Sigil supplies the shared token bindings and composition constraints instead of cloning behavior."],pages:["Token-bound components, templates, docs, and agent rules ship from the same system.","Add or swap an upstream primitive without creating a second visual language.","Switch presets after composition; the output adapts without scattered component edits."]},h=Math.cos(Math.PI/6),b=Math.sin(Math.PI/6);function g(e,a,s){return[(e-s)*h,(e+s)*b-a]}function y(e,a,s){var r,t,i,n,o,l;let d=[(r=e[0][0],r+(e[1][0]-r)*a),(t=e[0][1],t+(e[1][1]-t)*a)],c=[(i=e[3][0],i+(e[2][0]-i)*a),(n=e[3][1],n+(e[2][1]-n)*a)];return[(o=d[0])+(c[0]-o)*s,(l=d[1])+(c[1]-l)*s]}function f(e,a,s,r,t,i,n){return[y(e,r,t),y(e,i,t),y(e,i,n),y(e,r,n)].map(([e,r])=>`${e+a},${r+s}`).join(" ")}let k="var(--s-text)";function j(e,a,s,r,t){let[i,n]=y(e,r,t);return[i+a,n+s]}function w({layer:e,geo:s,ox:r,oy:t,active:i}){let n=i?e.color:k,o=j(s.right,r,t,.12,.34),l=j(s.right,r,t,.56,.34),d=j(s.right,r,t,.68,.34),c=j(s.right,r,t,.12,.58),p=j(s.right,r,t,.42,.58),m=j(s.left,r,t,.12,.38),x=j(s.left,r,t,.52,.38),u=j(s.left,r,t,.12,.6),v=j(s.left,r,t,.36,.6);return(0,a.jsxs)("g",{pointerEvents:"none",style:{opacity:i?.72:.28,transition:"opacity 300ms ease"},children:[(0,a.jsx)("line",{x1:o[0],y1:o[1],x2:l[0],y2:l[1],stroke:n,strokeWidth:1.2,strokeLinecap:"round"}),(0,a.jsx)("circle",{cx:d[0],cy:d[1],r:2,fill:n}),(0,a.jsx)("line",{x1:c[0],y1:c[1],x2:p[0],y2:p[1],stroke:n,strokeWidth:.9,strokeLinecap:"round",opacity:.55}),(0,a.jsx)("line",{x1:m[0],y1:m[1],x2:x[0],y2:x[1],stroke:n,strokeWidth:1.2,strokeLinecap:"round",opacity:.72}),(0,a.jsx)("line",{x1:u[0],y1:u[1],x2:v[0],y2:v[1],stroke:n,strokeWidth:.9,strokeLinecap:"round",opacity:.45})]})}function N({geo:e,ox:s,oy:r,active:t}){let i="oklch(0.50 0.24 275)",n=[];for(let t=0;t<10;t++){let o=.06+.09777777777777778*t,l=y(e.top,.06,o),d=y(e.top,.94,o);n.push((0,a.jsx)("line",{x1:l[0]+s,y1:l[1]+r,x2:d[0]+s,y2:d[1]+r,stroke:i,strokeWidth:.55,opacity:.4},`th${t}`))}for(let t=0;t<10;t++){let o=.06+.09777777777777778*t,l=y(e.top,o,.06),d=y(e.top,o,.94);n.push((0,a.jsx)("line",{x1:l[0]+s,y1:l[1]+r,x2:d[0]+s,y2:d[1]+r,stroke:i,strokeWidth:.55,opacity:.4},`tv${t}`))}for(let t=0;t<10;t++)for(let o=0;o<10;o++){let l=y(e.top,.06+.09777777777777778*o,.06+.09777777777777778*t),d=0===t||0===o||9===t||9===o;n.push((0,a.jsx)("circle",{cx:l[0]+s,cy:l[1]+r,r:d?1:1.6,fill:i,opacity:d?.3:.55},`td${t}_${o}`))}for(let[t,o]of[[e.left,"l"],[e.right,"r"]]){for(let e=0;e<3;e++){let l=.08+.42*e,d=y(t,.08,l),c=y(t,.92,l);n.push((0,a.jsx)("line",{x1:d[0]+s,y1:d[1]+r,x2:c[0]+s,y2:c[1]+r,stroke:i,strokeWidth:.45,opacity:.35},`${o}h${e}`))}for(let e=0;e<8;e++){let l=.08+.12*e,d=y(t,l,.08),c=y(t,l,.92);n.push((0,a.jsx)("line",{x1:d[0]+s,y1:d[1]+r,x2:c[0]+s,y2:c[1]+r,stroke:i,strokeWidth:.45,opacity:.35},`${o}v${e}`))}for(let e=0;e<3;e++)for(let l=0;l<8;l++){let d=y(t,.08+.12*l,.08+.42*e);n.push((0,a.jsx)("circle",{cx:d[0]+s,cy:d[1]+r,r:.9,fill:i,opacity:.4},`${o}d${e}_${l}`))}}return(0,a.jsx)("g",{style:{opacity:t?.65:.14,transition:"opacity 300ms ease"},pointerEvents:"none",children:n})}function C({geo:e,ox:s,oy:r,active:t}){let i="oklch(0.56 0.20 45)",n=[10,13,9,14,11,12,8,10,14],o=[];for(let e=0;e<3;e++)for(let a=0;a<3;a++){let s=.12+.29500000000000004*a,r=.12+.29500000000000004*e;o.push({u1:s,v1:r,u2:s+.17,v2:r+.17,ph:n[3*e+a]})}return(0,a.jsx)("g",{style:{opacity:t?.78:.18,transition:"opacity 300ms ease"},pointerEvents:"none",children:o.map((t,n)=>{let o=y(e.top,t.u1,t.v1),l=y(e.top,t.u2,t.v1),d=y(e.top,t.u2,t.v2),c=y(e.top,t.u1,t.v2),p=[o,l,d,c].map(e=>`${e[0]+s},${e[1]+r-t.ph}`).join(" "),m=`${c[0]+s},${c[1]+r-t.ph} ${d[0]+s},${d[1]+r-t.ph} ${d[0]+s},${d[1]+r} ${c[0]+s},${c[1]+r}`,x=`${l[0]+s},${l[1]+r-t.ph} ${d[0]+s},${d[1]+r-t.ph} ${d[0]+s},${d[1]+r} ${l[0]+s},${l[1]+r}`;return(0,a.jsxs)("g",{children:[(0,a.jsx)("polygon",{points:m,fill:`color-mix(in oklch, ${i} 52%, var(--s-background))`,stroke:i,strokeWidth:.5,strokeOpacity:.35}),(0,a.jsx)("polygon",{points:x,fill:`color-mix(in oklch, ${i} 44%, var(--s-background))`,stroke:i,strokeWidth:.5,strokeOpacity:.35}),(0,a.jsx)("polygon",{points:p,fill:`color-mix(in oklch, ${i} 32%, var(--s-background))`,stroke:i,strokeWidth:.6,strokeOpacity:.45})]},n)})})}function S({geo:e,ox:s,oy:r,active:t}){let i="oklch(0.52 0.20 160)";return(0,a.jsxs)("g",{style:{opacity:t?.72:.16,transition:"opacity 300ms ease"},pointerEvents:"none",children:[[{u:.1,v:.1,w:.18,h:.11},{u:.32,v:.1,w:.14,h:.11},{u:.5,v:.1,w:.2,h:.11},{u:.74,v:.1,w:.16,h:.11}].map((t,n)=>(0,a.jsx)("polygon",{points:f(e.top,s,r,t.u,t.v,t.u+t.w,t.v+t.h),fill:i,opacity:.65},`f${n}`)),[{u:.1,v:.28,w:.24,h:.26},{u:.38,v:.28,w:.24,h:.26},{u:.66,v:.28,w:.24,h:.26}].map((t,n)=>{let o;return(0,a.jsxs)("g",{children:[(0,a.jsx)("polygon",{points:f(e.top,s,r,t.u,t.v,t.u+t.w,t.v+t.h),fill:"transparent",stroke:i,strokeWidth:.75}),(0,a.jsx)("polygon",{points:f(e.top,s,r,t.u+.03,t.v+.04,t.u+t.w-.03,t.v+.1),fill:i,opacity:.35}),(0,a.jsx)("polygon",{points:f(e.top,s,r,t.u+.03,t.v+.14,t.u+.5*t.w,t.v+.17),fill:k,opacity:.18}),(o=y(e.top,t.u+t.w-.06,t.v+.06),(0,a.jsx)("circle",{cx:o[0]+s,cy:o[1]+r,r:1.6,fill:i,opacity:.5}))]},`c${n}`)}),[{u:.1,v:.62,w:.38,h:.1},{u:.52,v:.62,w:.38,h:.1}].map((t,n)=>(0,a.jsx)("polygon",{points:f(e.top,s,r,t.u,t.v,t.u+t.w,t.v+t.h),fill:"transparent",stroke:i,strokeWidth:.55,strokeOpacity:.7},`i${n}`)),[.14,.28,.42,.56,.7,.84].map((t,n)=>{let o=y(e.top,t,.8);return(0,a.jsx)("circle",{cx:o[0]+s,cy:o[1]+r,r:2,fill:i,opacity:.4+n%3*.15},`b${n}`)})]})}function $({geo:e,ox:s,oy:r,active:t}){let i="oklch(0.52 0.22 330)",n=[];for(let e=0;e<14;e++){let a=.08+.06*e,s=.92-e%3*.1;n.push({v:a,u1:.08,u2:s,w:e<2?1.4:1,op:.25+e%4*.12})}return(0,a.jsxs)("g",{style:{opacity:t?.72:.16,transition:"opacity 300ms ease"},pointerEvents:"none",children:[n.map((t,n)=>{let o=y(e.top,t.u1,t.v),l=y(e.top,t.u2,t.v);return(0,a.jsx)("line",{x1:o[0]+s,y1:o[1]+r,x2:l[0]+s,y2:l[1]+r,stroke:i,strokeWidth:t.w,opacity:t.op,strokeLinecap:"round"},n)}),(0,a.jsx)("polygon",{points:f(e.top,s,r,.08,.08,.38,.16),fill:i,opacity:.15}),(0,a.jsx)("polygon",{points:f(e.top,s,r,.72,.8,.92,.92),fill:i,opacity:.25})]})}e.s(["LayerStackDiagram",0,function({className:e,...t}

1){let[i,n]=(0,s.useState)(null),o=i?u.find(e=>e.id===i)??u[0]:null,l=i?u.findIndex(e=>e.id===i):-1,d=o?v[o.id]??[]:["Intent enters once, compiles into constraints, wraps proven behavior, and ships as coherent UI.","Select a layer to isolate it and see what it contains.","Sigil maintains the contract and adapters — not duplicate copies of upstream libraries."],c=(0,s.useCallback)(e=>n(e),[]),{svgW:p,svgH:m,ox:x,oy:y,geos:f}=(0,s.useMemo)(()=>{let e=[],a=u.map((a,s)=>{let r=54*s,t=[g(0,r+28,0),g(170,r+28,0),g(170,r+28,170),g(0,r+28,170)],i=[g(0,r+28,170),g(170,r+28,170),g(170,r,170),g(0,r,170)],n=[g(170,r+28,0),g(170,r+28,170),g(170,r,170),g(170,r,0)],o=[(t[0][0]+t[2][0])/2,(t[0][1]+t[2][1])/2];return[...t,...i,...n].forEach(a=>e.push(a)),{top:t,left:i,right:n,center:o,y0:r}}),s=(u.length-1)*54+28+26;e.push(g(0,s,0)),e.push(g(170,s,170));let r=e.map(e=>e[0]),t=e.map(e=>e[1]),i=Math.min(...r),n=Math.min(...t);return{svgW:Math.max(...r)-i+128,svgH:Math.max(...t)-n+128,ox:-i+64,oy:-n+64,geos:a}},[]),j=(0,s.useCallback)(e=>`${e[0]+x},${e[1]+y}`,[x,y]);return(0,a.jsx)("div",{"data-slot":"layer-stack-diagram",className:(0,r.cn)("",e),...t,children:(0,a.jsxs)("div",{className:"relative grid grid-cols-1 lg:grid-cols-[1.12fr_0.88fr] gap-0 items-stretch min-h-[550px] border border-[var(--s-border)] bg-[var(--s-background)]",children:[(0,a.jsxs)("div",{className:"relative flex items-center justify-center overflow-hidden bg-[var(--s-background)] px-4 py-10",children:[(0,a.jsx)("div",{className:"absolute inset-0 pointer-events-none opacity-[0.05]",style:{backgroundImage:"radial-gradient(circle, var(--s-text) 1px, transparent 1px)",backgroundSize:"24px 24px"}}),(0,a.jsx)("div",{className:"absolute inset-x-10 bottom-10 top-12 pointer-events-none opacity-35",style:{background:"radial-gradient(ellipse at 50% 72%, color-mix(in oklch, var(--s-text) 8%, transparent), transparent 58%)"}}),(0,a.jsxs)("svg",{viewBox:`0 0 ${p} ${m}`,className:"relative z-[1] w-full max-w-[640px] select-none",role:"img","aria-label":"Isometric Sigil pipeline: inputs, absorption, wrappers, outputs",children:[(0,a.jsxs)("defs",{children:[(0,a.jsxs)("filter",{id:"iso-glow",children:[(0,a.jsx)("feGaussianBlur",{stdDeviation:"5",result:"blur"}),(0,a.jsx)("feComposite",{in:"SourceGraphic",in2:"blur",operator:"over"})]}),(0,a.jsxs)("linearGradient",{id:"edge-sheen",x1:"0",x2:"1",y1:"0",y2:"1",children:[(0,a.jsx)("stop",{offset:"0%",stopColor:k,stopOpacity:"0.12"}),(0,a.jsx)("stop",{offset:"100%",stopColor:k,stopOpacity:"0"})]}),(0,a.jsx)("filter",{id:"iso-drop",x:"-15%",y:"-15%",width:"130%",height:"145%",children:(0,a.jsx)("feDropShadow",{dx:"0",dy:"5",stdDeviation:"7",floodColor:"var(--s-text)",floodOpacity:"0.14"})})]}),u.map((e,s)=>{let r=f[s],t=o?.id===e.id,i=l>=0&&s>l,n=t?`color-mix(in oklch, ${e.color} 28%, var(--s-background))`:i?"transparent":`color-mix(in oklch, ${e.color} 14%, var(--s-background))`,d=t?`color-mix(in oklch, ${e.color} 46%, var(--s-background))`:i?"transparent":`color-mix(in oklch, ${e.color} 24%, var(--s-background))`,p=t?`color-mix(in oklch, ${e.color} 38%, var(--s-background))`:i?"transparent":`color-mix(in oklch, ${e.color} 18%, var(--s-background))`;return i?null:(0,a.jsxs)("g",{style:{transform:t?"translateY(-26px)":"translateY(0)",transition:"transform 500ms cubic-bezier(0.23, 1, 0.32, 1)"},children:[(0,a.jsx)("polygon",{points:r.left.map(j).join(" "),fill:d,stroke:t?e.color:"var(--s-border)",strokeWidth:t?1.2:.7,strokeOpacity:t?.6:1,style:{opacity:+!i,transition:"opacity 400ms ease, stroke 300ms ease"}}),(0,a.jsx)("polygon",{points:r.right.map(j).join(" "),fill:p,stroke:t?e.color:"var(--s-border)",strokeWidth:t?1.2:.7,strokeOpacity:t?.6:1,style:{opacity:+!i,transition:"opacity 400ms ease, stroke 300ms ease"}}),(0,a.jsx)(w,{layer:e,geo:r,ox:x,oy:y,active:t}),(0,a.jsx)("polygon",{points:r.top.map(j).join(" "),fill:n,stroke:t?e.color:"var(--s-border)",strokeWidth:t?1.4:.7,strokeOpacity:t?.7:1,filter:t?"url(#iso-drop)":void 0,style:{opacity:+!i,transition:"opacity 400ms ease, stroke 300ms ease"}}),(0,a.jsx)("polygon",{points:r.top.map(j).join(" "),fill:"url(#edge-sheen)",opacity:t?.12:.04,pointerEvents:"none"}),"tokens"===e.id&&(0,a.jsx)(N,{geo:r,ox:x,oy:y,active:t}),"inputs"===e.id&&(0,a.jsx)(C,{geo:r,ox:x,oy:y,active:t}),"components"===e.id&&(0,a.jsx)(S,{geo:r,ox:x,oy:y,active:t}),"pages"===e.id&&(0,a.jsx)($,{geo:r,ox:x,oy:y,active:t}),"inputs"!==e.id&&(0,a.jsx)("g",{transform:`translate(${r.center[0]+x}, ${r.center[1]+y})`,children:(0,a.jsx)("text",{x:"0",y:"0",textAnchor:"middle",dominantBaseline:"central",fill:t?e.color:k,fontSize:44,fontWeight:800,pointerEvents:"none",transform:`matrix(${h}, ${b}, ${-h}, ${b}, 0, 0)`,style:{fontFamily:"var(--s-font-mono, monospace)",opacity:t?.88:.25,transition:"opacity 300ms ease"},children:e.num})}),(0,a.jsx)("polygon",{"aria-label":`Select ${e.title.toLowerCase()} layer`,points:r.top.map(j).join(" "),fill:"transparent",pointerEvents:"all",className:"cursor-pointer",onClick:()=>c(e.id)})]},e.id)})]})]}),(0,a.jsxs)("div",{className:"relative overflow-hidden border-t border-[var(--s-border)] bg-[var(--s-surface)]/60 p-5 lg:border-l lg:border-t-0 lg:p-6",children:[(0,a.jsx)("div",{className:"absolute inset-y-0 left-0 w-1 transition-colors duration-[var(--s-duration-normal,200ms)]",style:{backgroundColor:o?.color??"var(--s-text)"}}),(0,a.jsxs)("div",{className:"mb-5 flex items-center justify-between gap-4",children:[(0,a.jsx)(r.MonoLabel,{variant:"accent",children:"Layer model"}),(0,a.jsx)(r.TabularValue,{size:"xs",muted:!0,children:o?`stack/${String(l+1).padStart(2,"0")}`:"stack/all"})]}

1),(0,a.jsxs)("div",{className:"grid grid-cols-5 gap-1 mb-6",children:[(0,a.jsxs)("button",{type:"button",onClick:()=>c(null),className:(0,r.cn)("group bg-[var(--s-background)] border px-2 py-3 cursor-pointer transition-all duration-[var(--s-duration-fast,150ms)] text-left",null===o?"border-[var(--s-primary)] text-[var(--s-text)] shadow-[var(--s-shadow-sm)]":"border-[var(--s-border)] text-[var(--s-text-muted)] hover:border-[var(--s-border-strong)] hover:text-[var(--s-text)]"),children:[(0,a.jsx)(r.MonoLabel,{size:"sm",variant:null===o?"accent":"muted",className:"block",children:"00"}),(0,a.jsx)("span",{className:"mt-1 block truncate font-[family-name:var(--s-font-mono)] text-[8px] font-semibold uppercase tracking-[0.12em]",children:"All"})]}),u.map(e=>{let s=o?.id===e.id;return(0,a.jsxs)("button",{type:"button",onClick:()=>c(e.id),className:(0,r.cn)("group relative bg-[var(--s-background)] border px-2 py-3 cursor-pointer transition-all duration-[var(--s-duration-fast,150ms)] text-left",s?"text-[var(--s-text)] shadow-[var(--s-shadow-sm)]":"border-[var(--s-border)] text-[var(--s-text-muted)] hover:border-[var(--s-border-strong)] hover:text-[var(--s-text)]"),style:s?{borderColor:e.color}:void 0,children:[(0,a.jsx)("span",{className:"absolute top-2 right-2 size-2 rounded-full transition-opacity duration-[var(--s-duration-fast,150ms)]",style:{backgroundColor:e.color,opacity:s?1:.35}}),(0,a.jsx)(r.MonoLabel,{size:"sm",variant:s?"accent":"muted",className:"block",children:e.num}),(0,a.jsx)("span",{className:"mt-1 block truncate font-[family-name:var(--s-font-mono)] text-[8px] font-semibold uppercase tracking-[0.12em]",children:e.title})]},e.id)})]}),(0,a.jsxs)("div",{className:"animate-[s-fade-in_300ms_ease]",children:[(0,a.jsxs)("div",{className:"flex items-start justify-between gap-4 mb-4",children:[(0,a.jsxs)("div",{className:"flex items-baseline gap-3",children:[(0,a.jsx)(r.TabularValue,{size:"lg",className:"font-bold transition-colors duration-[var(--s-duration-normal,200ms)]",style:{color:o?.color??"var(--s-primary)"},children:o?.num??"00"}),(0,a.jsx)("h3",{className:"font-[family-name:var(--s-font-display)] text-[clamp(20px,2.5vw,28px)] font-bold tracking-tight text-[var(--s-text)]",children:o?.title??"FULL STACK"})]}),(0,a.jsx)(r.MonoLabel,{size:"xs",variant:"muted",className:"mt-2 hidden sm:block",children:o?.subtitle??"Complete system view"})]}),(0,a.jsx)(r.DensityText,{role:"body",as:"p",muted:!0,className:"mb-6 leading-relaxed",children:o?.description??"Four layers with a single rule: visual decisions flow in one direction. Edit the bottom, and everything above updates."}),(0,a.jsx)("div",{className:"mb-6 grid gap-3",children:d.map((e,s)=>(0,a.jsxs)("div",{className:"grid grid-cols-[40px_1fr] gap-3 border border-[var(--s-border)] bg-[var(--s-background)] p-3",children:[(0,a.jsx)(r.TabularValue,{size:"xs",muted:!0,children:String(s+1).padStart(2,"0")}),(0,a.jsx)(r.DensityText,{role:"body",as:"p",muted:!0,className:"leading-relaxed",children:e})]},e))}),(0,a.jsxs)("div",{className:"border border-[var(--s-border)] bg-[var(--s-background)] p-4",children:[(0,a.jsx)(r.MonoLabel,{variant:"accent",size:"xs",className:"mb-3 block",children:"current surface"}),(0,a.jsx)("div",{className:"grid grid-cols-2 gap-2",children:(o?.items??u.map(e=>({label:e.title,value:e.subtitle}))).map(e=>(0,a.jsxs)("div",{className:"border border-[var(--s-border-muted)] px-3 py-2",children:[(0,a.jsx)(r.MonoLabel,{size:"xs",className:"block normal-case tracking-normal",children:e.label}),e.value&&(0,a.jsx)(r.TabularValue,{size:"xs",muted:!0,children:e.value})]},e.label))})]})]},o?.id??"full-stack")]})]})})}],53358);var z=e.i(780237),T=e.i(405915),K=e.i(95315);let R=(0,e.i(801685).default)("space",[["path",{d:"M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1",key:"lt2kga"}]]);var I=e.i(539241),M=e.i(549505),V=e.i(337402),L=e.i(950884);let P={width:28,height:20,border:"var(--s-border-thin, 1px) solid var(--s-border)",borderStyle:"var(--s-border-style, solid)",borderRadius:"var(--s-radius-sm, 4px)",flex:"0 0 auto"};function B({kind:e,value:s,label:r}){return"primary"===e||"mid"===e||"background"===e||"color"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,background:s??("primary"===e?"var(--s-primary)":"mid"===e?"var(--hlf-mid)":"background"===e?"var(--s-background)":"var(--s-text-muted)")}}):"muted"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-text-muted)"},children:(0,a.jsx)(z.Palette,{size:12})}):"border"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(K.RectangleHorizontal,{size:12})}):"radius-sm"===e||"radius-md"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(L.SquareSlash,{size:12})}):"font"===e||"mono"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(T.Type,{size:12})}):"spacing"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(R,{size:12})}):"shadow"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(I.Layers,{size:12})}):"duration"===e?(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(M.Clock,{size:12})}):(0,a.jsx)("span",{"aria-hidden":"true",style:{...P,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"var(--s-primary)"},children:(0,a.jsx)(V.Grid3X3,{size:12})})}function O({title:e,meta:s,children:r}){return(0,a.jsxs)("div",{style:{border:"var(--s-border-thin, 1px) solid var(--s-border)",borderStyle:"var(--s-border-style, solid)",borderRadius:"var(--s-radius-md, 8px)",background:"color-mix(in oklch, var(--s-background) 92%, transparent)",color:"var(--s-text)",overflow:"hidden"},children:[(0,a.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:16,borderBottom:"var(--s-border-thin, 1px) var(--s-border-style, solid) var(--s-border)",padding:"8px 12px",fontFamily:"var(--s-font-mono)",fontSize:9,letterSpacing:"0.1em",textTransform:"uppercase"},children:[(0,a.jsx)("span",{children:e}),s?(0,a.jsx)("span",{style:{color:"var(--s-text-muted)"},children:s}):null]}),r]})}var W=e.i(50154);let E=[{id:"intro",kind:"comment",text:"<!-- sigil.tokens.md: click any token line -->"},{id:"colors",kind:"heading",text:"## Colors"},{id:"primary",kind:"token",tokenKind:"color",name:"primary",value:"oklch(0.66 0.18 275)",cssVar:"--s-primary",md:"primary: oklch(0.66 0.18 275)",description:"Accent fills, CTA states, focus rings, and diagram highlights."},{id:"background",kind:"token",tokenKind:"color",name:"background",value:"oklch(0.08 0.01 260)",cssVar:"--s-background",md:"background: oklch(0.08 0.01 260)",description:"The canvas behind every surface."},{id:"surface",kind:"token",tokenKind:"color",name:"surface",value:"oklch(0.12 0.01 260)",cssVar:"--s-surface",md:"surface: oklch(0.12 0.01 260)",description:"Cards, panels, and inspector backplates."},{id:"text",kind:"token",tokenKind:"color",name:"text",value:"oklch(0.96 0 0)",cssVar:"--s-text",md:"text: oklch(0.96 0 0)",description:"Primary copy, titles, and high-contrast labels."},{id:"muted",kind:"token",tokenKind:"color",name:"text-muted",value:"oklch(0.62 0.02 260)",cssVar:"--s-text-muted",md:"text-muted: oklch(0.62 0.02 260)",description:"Blueprint guides, helper text, secondary labels."},{id:"blank-1",kind:"blank",text:""},{id:"type",kind:"heading",text:"## Typography"},{id:"display",kind:"token",tokenKind:"font",name:"font-display",value:'"Nacelle", sans-serif',cssVar:"--s-font-display",md:'font-display: "Nacelle", sans-serif',description:"Headline voice. Big, tight, and recognizable."},{id:"body",kind:"token",tokenKind:"font",name:"font-body",value:"system-ui, sans-serif",cssVar:"--s-font-body",md:"font-body: system-ui, sans-serif",description:"Readable interface copy and descriptions."},{id:"mono",kind:"token",tokenKind:"font",name:"font-mono",value:'"Roboto Mono", monospace',cssVar:"--s-font-mono",md:'font-mono: "Roboto Mono", monospace',description:"Code, measurements, token labels, and tabs."},{id:"blank-2",kind:"blank",text:""},{id:"radius",kind:"heading",text:"## Radius"},{id:"radius-sm",kind:"token",tokenKind:"radius",name:"radius-sm",value:"4px",cssVar:"--s-radius-sm",md:"sm: 4px",description:"Small chips, token marks, and tight controls."},{id:"radius-md",kind:"token",tokenKind:"radius",name:"radius-md",value:"8px",cssVar:"--s-radius-md",md:"md: 8px",description:"Cards, inputs, inspector panels, and preview shells."},{id:"radius-xl",kind:"token",tokenKind:"radius",name:"radius-xl",value:"18px",cssVar:"--s-radius-xl",md:"xl: 18px",description:"Large surfaces and spotlight panels."},{id:"blank-3",kind:"blank",text:""},{id:"spacing",kind:"heading",text:"## Spacing"},{id:"space-2",kind:"token",tokenKind:"spacing",name:"space-2",value:"8px",cssVar:"--s-space-2",md:"space-2: 8px",description:"Small inline gaps and control padding."},{id:"space-4",kind:"token",tokenKind:"spacing",name:"space-4",value:"16px",cssVar:"--s-space-4",md:"space-4: 16px",description:"Default card 

1internals and form rhythm."},{id:"space-6",kind:"token",tokenKind:"spacing",name:"space-6",value:"24px",cssVar:"--s-space-6",md:"space-6: 24px",description:"Section gutters and rail offsets."},{id:"blank-4",kind:"blank",text:""},{id:"borders",kind:"heading",text:"## Borders"},{id:"border",kind:"token",tokenKind:"border",name:"border",value:"oklch(0.24 0.01 260)",cssVar:"--s-border",md:"border: oklch(0.24 0.01 260)",description:"Structural grid lines, panel separators, outlines."},{id:"border-width",kind:"token",tokenKind:"border",name:"border-width",value:"1px",cssVar:"--s-border-width",md:"border-width: 1px",description:"The measurement line that makes Reticle feel precise."},{id:"blank-5",kind:"blank",text:""},{id:"shadow",kind:"heading",text:"## Shadows"},{id:"shadow-md",kind:"token",tokenKind:"shadow",name:"shadow-md",value:"0 16px 50px rgb(0 0 0 / 0.2)",cssVar:"--s-shadow-md",md:"shadow-md: 0 16px 50px rgb(0 0 0 / 0.2)",description:"Subtle elevation for floating previews."},{id:"blank-6",kind:"blank",text:""},{id:"motion",kind:"heading",text:"## Motion"},{id:"duration-fast",kind:"token",tokenKind:"motion",name:"duration-fast",value:"150ms",cssVar:"--s-duration-fast",md:"duration-fast: 150ms",description:"Hover and click feedback. Fast enough to feel physical."},{id:"duration-slow",kind:"token",tokenKind:"motion",name:"duration-slow",value:"600ms",cssVar:"--s-duration-slow",md:"duration-slow: 600ms",description:"Larger drawing and preview transitions."},{id:"blank-7",kind:"blank",text:""},{id:"layout",kind:"heading",text:"## Layout"},{id:"grid-cell",kind:"token",tokenKind:"layout",name:"grid-cell",value:"48px",cssVar:"--s-grid-cell",md:"grid-cell: 48px",description:"Blueprint cells, rails, and diagram quadrants."},{id:"content-max",kind:"token",tokenKind:"layout",name:"content-max",value:"1280px",cssVar:"--s-content-max",md:"content-max: 1280px",description:"Maximum readable page width."}],A=E.filter(e=>"token"===e.kind);function G({token:e}){return(0,a.jsx)(B,{kind:"motion"===e.tokenKind?"duration":"radius"===e.tokenKind?e.name.endsWith("sm")?"radius-sm":"radius-md":e.tokenKind,value:e.value})}function D({token:e}){let s={"--preview-primary":"color"===e.tokenKind?e.value:"var(--s-primary)","--preview-radius":"radius"===e.tokenKind?e.value:"var(--s-radius-md, 8px)","--preview-gap":"spacing"===e.tokenKind?e.value:"16px","--preview-border":"border"===e.tokenKind?e.value:"var(--s-border)","--preview-shadow":"shadow"===e.tokenKind?e.value:"var(--s-shadow-md, 0 16px 50px rgb(0 0 0 / 0.2))","--preview-duration":"motion"===e.tokenKind?e.value:"var(--s-duration-fast, 150ms)","--preview-font":"font"===e.tokenKind?e.value:"var(--s-font-display)"};return(0,a.jsx)("div",{style:s,className:"grid gap-4",children:(0,a.jsxs)("div",{className:"relative overflow-hidden p-4",style:{border:"1px solid var(--preview-border)",borderRadius:"var(--preview-radius)",boxShadow:"var(--preview-shadow)",background:"color"===e.tokenKind&&"background"===e.name?e.value:"color-mix(in oklch, var(--s-surface) 82%, var(--preview-primary) 8%)",transition:"all var(--preview-duration) ease"},children:[(0,a.jsx)("div",{className:"absolute inset-0 opacity-25",style:{backgroundImage:"linear-gradient(var(--s-border) 1px, transparent 1px), linear-gradient(90deg, var(--s-border) 1px, transparent 1px)",backgroundSize:"24px 24px"}}),(0,a.jsxs)("div",{className:"relative grid gap-3",style:{gap:"var(--preview-gap)"},children:[(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsx)("span",{className:"font-[family-name:var(--preview-font)] text-lg font-semibold",style:{color:"var(--s-text)"},children:"Live Token Preview"}),(0,a.jsx)(r.Badge,{style:{background:"var(--preview-primary)",color:"var(--s-primary-contrast, white)"},children:"active"})]}),(0,a.jsx)(r.Card,{style:{borderColor:"var(--preview-border)",borderRadius:"var(--preview-radius)",boxShadow:"var(--preview-shadow)"},children:(0,a.jsx)(r.CardContent,{className:"p-4",children:(0,a.jsxs)("div",{className:"flex items-center",style:{gap:"var(--preview-gap)"}

1,children:[(0,a.jsx)("span",{style:{width:34,height:34,borderRadius:"var(--preview-radius)",background:"var(--preview-primary)",flex:"0 0 auto"}}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"text-sm font-semibold",style:{color:"var(--s-text)"},children:e.cssVar}),(0,a.jsx)("div",{className:"text-xs",style:{color:"var(--s-text-muted)"},children:e.description})]})]})})}),(0,a.jsxs)("div",{className:"flex flex-wrap items-center",style:{gap:"var(--preview-gap)"},children:[(0,a.jsx)(r.Button,{size:"sm",style:{background:"var(--preview-primary)",borderRadius:"var(--preview-radius)",transitionDuration:"var(--preview-duration)"},children:"Primary"}),(0,a.jsx)("button",{type:"button",className:"h-8 px-3 text-xs",style:{border:"1px solid var(--preview-border)",borderRadius:"var(--preview-radius)",background:"transparent",color:"var(--s-text)",transition:"all var(--preview-duration) ease"},children:"Outline"})]})]})]})})}e.s(["MarkdownEditorPreview",0,function({className:e,style:t}){let[i,n]=(0,s.useState)(A[0].id),o=A.find(e=>e.id===i)??A[0];return(0,a.jsx)("div",{"data-slot":"markdown-editor-preview",className:(0,r.cn)("flex flex-col",e),style:t,children:(0,a.jsxs)(r.GapPixelGrid,{columns:{base:1,lg:2},gap:1,children:[(0,a.jsx)(r.GapPixelCell,{className:"flex flex-col",children:(0,a.jsx)(O,{title:"SIGIL.TOKENS.MD",meta:"scroll + click",children:(0,a.jsx)("div",{className:"max-h-[550px] overflow-y-auto px-0 py-3 font-[family-name:var(--s-font-mono)] text-[11px] leading-[1.7]",style:{background:"var(--s-surface)"},children:E.map((e,s)=>{if("blank"===e.kind)return(0,a.jsx)("div",{className:"h-3"},e.id);if("heading"===e.kind)return(0,a.jsx)("div",{className:"mt-3 px-4 font-semibold",style:{color:"var(--s-text)"},children:e.text},e.id);if("comment"===e.kind)return(0,a.jsx)("div",{className:"px-4 opacity-70",style:{color:"var(--s-text-muted)"},children:e.text},e.id);let r=e.id===i;return(0,a.jsxs)("button",{type:"button",onClick:()=>n(e.id),className:"grid w-full cursor-pointer grid-cols-[34px_34px_1fr] items-center gap-2 border-0 bg-transparent px-4 py-1 text-left font-[family-name:var(--s-font-mono)] text-[11px] transition-colors duration-[var(--s-duration-fast,150ms)]",style:{color:r?"var(--s-text)":"var(--s-text-muted)",background:r?"color-mix(in oklch, var(--s-primary) 14%, transparent)":"transparent",borderLeft:r?"2px solid var(--s-primary)":"2px solid transparent"},children:[(0,a.jsx)("span",{className:"tabular-nums opacity-50",children:String(s+1).padStart(2,"0")}),(0,a.jsx)(G,{token:e}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{style:{color:r?"var(--s-primary)":"var(--s-text)"},children:e.name}),(0,a.jsx)("span",{style:{color:"var(--s-text-muted)"},children:": "}),(0,a.jsx)("span",{children:(0,a.jsx)(W.OklchText,{children:e.value})})]})]},e.id)})})})}),(0,a.jsx)(r.GapPixelCell,{className:"flex flex-col",children:(0,a.jsx)(O,{title:"TOKEN VISUALIZER",meta:o.cssVar,children:(0,a.jsxs)("div",{className:"grid gap-5 p-5",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-2 flex items-center gap-3",children:[(0,a.jsx)(G,{token:o}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"font-[family-name:var(--s-font-mono)] text-sm font-semibold",style:{color:"var(--s-text)"},children:o.md}),(0,a.jsx)(r.DensityText,{role:"chrome",muted:!0,children:o.description})]})]}),(0,a.jsxs)("div",{className:"grid grid-cols-2 gap-2 font-[family-name:var(--s-font-mono)] text-[10px]",children:[(0,a.jsxs)("div",{className:"border border-[var(--s-border)] p-2",children:[(0,a.jsx)("div",{style:{color:"var(--s-text-muted)"},children:"CSS variable"}),(0,a.jsx)("code",{style:{color:"var(--s-primary)"},children:o.cssVar})]}),(0,a.jsxs)("div",{className:"border border-[var(--s-border)] p-2",children:[(0,a.jsx)("div",{style:{color:"var(--s-text-muted)"},children:"visualizer"}),(0,a.jsx)("code",{style:{color:"var(--s-primary)"},children:o.tokenKind})]})]})]}),(0,a.jsx)(D,{token:o}),(0,a.jsxs)("div",{children:[(0,a.jsx)(r.MonoLabel,{variant:"accent",className:"mb-3 block",children:"TOKEN VISUALIZATION LIBRARY"}),(0,a.jsx)("div",{className:"grid grid-cols-4 gap-2",children:A.slice(0,16).map(e=>(0,a.jsx)("button",{type:"button",title:e.name,onClick:()=>n(e.id),className:"flex h-12 cursor-pointer items-center justify-center border bg-transparent transition-colors duration-[var(--s-duration-fast,150ms)]",style:{borderColor:e.id===i?"var(--s-primary)":"var(--s-border)",background:e.id===i?"color-mix(in oklch, var(--s-primary) 12%, transparent)":"transparent"},children:(0,a.jsx)(G,{token:e})},e.id))})]})]})})})]})})}],766498)}]);