1import{k as w,c as n,o as l,a as e,x as g,D as d,f as N,r as I,n as h,_ as oe,e as de,u as le,l as ne,Y as ce,H as E,t as u,F as p,A as f,v as s,E as r,T as ie,a7 as G,a8 as ue,C as m,y as $,V as U,a5 as pe,N as fe}from"./D-uLEkMY.js";const xe={class:"group/code border-border bg-surface-2 relative overflow-hidden rounded-lg border"},be=["aria-label"],me={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-3 w-3"},ge={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-3 w-3 text-emerald-500"},ve={class:"text-foreground/90 m-0 overflow-x-auto p-4 pr-20 font-mono text-[12px] leading-relaxed"},he={__name:"CodeBlock",props:{code:{type:String,required:!0}},setup(x){const i=x,y=w(!1);let B=null;async function T(){try{if(navigator?.clipboard?.writeText)await navigator.clipboard.writeText(i.code);else{const v=document.createElement("textarea");v.value=i.code,v.style.position="fixed",v.style.opacity="0",document.body.appendChild(v),v.select(),document.execCommand("copy"),document.body.removeChild(v)}y.value=!0,B&&clearTimeout(B),B=setTimeout(()=>{y.value=!1},1400)}catch{}}return(v,C)=>(l(),n("div",xe,[e("button",{type:"button","aria-label":y.value?"Copied":"Copy to clipboard",class:"border-border bg-surface text-muted hover:text-foreground hover:bg-surface-2 focus:ring-brand-blue/30 absolute top-2 right-2 z-10 inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border px-2 text-[11px] font-semibold opacity-0 transition-opacity focus:opacity-100 focus:ring-2 focus:outline-none group-hover/code:opacity-100",onClick:T},[y.value?(l(),n("svg",ge,C[1]||(C[1]=[e("polyline",{points:"20 6 9 17 4 12"},null,-1)]))):(l(),n("svg",me,C[0]||(C[0]=[e("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",ry:"2"},null,-1),e("path",{d:"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"},null,-1)]))),g(" "+d(y.value?"Copied":"Copy"),1)],8,be),e("pre",ve,[e("code",null,d(x.code),1)])]))}},we={class:"border-border bg-surface overflow-hidden rounded-2xl border shadow-sm"},ye={key:0,class:"border-border flex flex-col gap-2 border-b px-5 py-4 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4"},ke={class:"min-w-0"},Ce={key:0,class:"text-foreground text-sm font-semibold"},_e={key:1,class:"text-muted mt-0.5 text-xs"},Se={key:0,class:"text-muted-2 bg-surface-2 truncate rounded px-2 py-0.5 font-mono text-[11px]"},Ne={key:1,class:"border-border border-t p-3"},Be={__name:"Specimen",props:{name:{type:String,default:""},description:{type:String,default:""},className:{type:String,default:""},previewClass:{type:String,default:""}},setup(x){return(i,y)=>(l(),n("article",we,[x.name||x.description?(l(),n("header",ye,[e("div",ke,[x.name?(l(),n("h3",Ce,d(x.name),1)):N("",!0),x.description?(l(),n("p",_e,d(x.description),1)):N("",!0)]),x.className?(l(),n("code",Se,d(x.className),1)):N("",!0)])):N("",!0),e("div",{class:h(["relative flex flex-wrap items-center gap-4 px-5 py-8",x.previewClass||"min-h-[120px]"])},[I(i.$slots,"default")],2),i.$slots.code?(l(),n("div",Ne,[I(i.$slots,"code")])):N("",!0)]))}},Te={class:"relative z-10 mx-auto w-full max-w-7xl px-4 pb-24 sm:px-6 lg:px-8",style:{"padding-top":"7rem"}},Me={class:"sg-layout"},Ve={class:"sg-aside"},Le={class:"border-border bg-surface sg-nav rounded-2xl border p-5 shadow-sm","aria-label":"Style guide sections"},je={class:"sg-toggle-block"},ze={class:"sg-toggle-bar",role:"tablist","aria-label":"Specimen preview mode"},$e=["aria-selected","onClick"],Ae={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",style:{width:"14px",height:"14px","margin-right":"0.35rem"}},He={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",style:{width:"14px",height:"14px","margin-right":"0.35rem"}},Fe={key:2,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",style:{width:"14px",height:"14px","margin-right":"0.35rem"}},Pe={style:{"text-transform":"capitalize"}},De={class:"m-0 list-none p-0"},Ie={class:"text-foreground mb-2 px-1 text-[11px] font-bold uppercase tracking-[0.12em]"},Ee={class:"m-0 list-none space-y-0.5 p-0"},Ge=["href","onClick"],Ue={class:"sg-main flex min-w-0 flex-col"},Re={id:"colors",class:"scroll-mt-28"},Ze={class:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4"},Ye=["onClick"],qe={class:"mt-3 flex items-baseline justify-between gap-2"},Oe={class:"text-foreground text-sm font-semibold"},We={class:"text-muted-2 text-[10px] font-medium uppercase tracking-wider"},Je={class:"text-muted block font-mono text-[11px]"},Ke={class:"border-border bg-surface divide-border divide-y rounded-2xl border"},Qe={class:"flex-1"},Xe={class:"text-muted-2 mt-0.5 block font-mono text-[11px]"},et={class:"text-muted text-xs"},tt={class:"grid grid-cols-2 gap-3 sm:grid-cols-3"},at={class:"bg-surface px-4 py-3"},st={class:"text-foreground text-sm font-semibold"},rt={class:"text-muted block font-mono text-[11px]"},ot={class:"grid grid-cols-2 gap-3 sm:grid-cols-4"},dt={class:"bg-surface px-4 py-3"},lt={class:"text-foreground text-sm font-semibold"},nt={class:"text-muted block font-mono text-[11px]"},ct={class:"border-border bg-surface overflow-hidden rounded-2xl border"},it={class:"w-full border-collapse text-sm"},ut={class:"divide-border divide-y"},pt={class:"px-5 py-3 align-middle"},ft={class:"text-foreground text-sm font-semibold"},xt={class:"text-muted-2 block font-mono text-[11px]"},bt={class:"px-5 py-3 align-middle"},mt={class:"flex items-center gap-2"},gt={class:"text-foreground font-mono text-[11px]"},vt={class:"px-5 py-3 align-middle"},ht={class:"flex items-center gap-2"},wt={class:"text-foreground font-mono text-[11px]"},yt={class:"grid gap-4 md:grid-cols-2"},kt={class:"border-border overflow-hidden rounded-2xl border"},Ct={class:"flex items-center justify-between border-b px-5 py-3",style:{"background-color":"#fbfcff","border-bottom-color":"#e3e8f2"}},_t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-4 w-4",style:{color:"#475569"}},St={class:"border-border overflow-hidden rounded-2xl border"},Nt={class:"flex items-center justify-between border-b px-5 py-3",style:{"background-color":"#0f1a2b","border-bottom-color":"#25324b"}},Bt={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-4 w-4",style:{color:"#a9b4c7"}},Tt={class:"border-border bg-surface space-y-4 rounded-2xl border p-5"},Mt={class:"mt-2"},Vt={class:"mt-2"},Lt={id:"typography",class:"scroll-mt-28"},jt={class:"border-border bg-surface divide-border divide-y rounded-2xl border"},zt={class:"text-foreground text-sm font-semibold"},$t={class:"text-muted-2 text-xs"},At={class:"text-muted bg-surface-2 hidden rounded px-2 py-0.5 font-mono text-[11px] sm:inline"},Ht={class:"mt-6 grid gap-4 lg:grid-cols-2"},Ft={id:"radii",class:"scroll-mt-28"},Pt={class:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6"},Dt={class:"text-foreground mt-1 text-xs font-semibold"},It={class:"text-muted-2 font-mono text-[10px]"},Et={id:"shadows",class:"scroll-mt-28"},Gt={class:"bg-canvas grid grid-cols-2 gap-6 rounded-2xl p-8 sm:grid-cols-3 lg:grid-cols-5"},Ut={class:"text-foreground text-xs font-semibold"},Rt={class:"text-muted-2 font-mono text-[10px]"},Zt={id:"spacing",class:"scroll-mt-28"},Yt={class:"border-border bg-surface space-y-3 rounded-2xl border p-5"},qt={class:"text-muted-2 w-12 shrink-0 font-mono text-[11px]"},Ot={class:"text-muted w-16 shrink-0 font-mono text-[11px]"},Wt={id:"buttons",class:"scroll-mt-28"},Jt={class:"grid gap-4 lg:grid-cols-2"},Kt={id:"forms",class:"scroll-mt-28"},Qt={class:"grid gap-4 lg:grid-cols-2"},Xt={class:"inline-flex cursor-pointer items-center gap-3"},ea={class:"inline-flex cursor-pointer items-center gap-3"},ta={class:"flex flex-col gap-2"},aa=["value"],sa={class:"text-foreground text-sm"},ra={id:"badges",class:"scroll-mt-28"},oa={class:"mt-6"},da={id:"alerts",class:"scroll-mt-28"},la={class:"mt-6"},na={id:"loaders",class:"scroll-mt-28"},ca={class:"grid gap-4 lg:grid-cols-2"},ia={id:"tooltips",class:"scroll-mt-28"},ua={class:"mt-6"},pa={id:"modals",class:"scroll-mt-28"},fa={class:"border-border bg-surface flex flex-wrap items-center gap-3 rounded-2xl border p-5"},xa={class:"mt-6"},ba={id:"toasts",class:"scroll-mt-28"},ma={class:"border-border bg-surface flex flex-wrap items-center gap-2 rounded-2xl border p-5"},ga={class:"mt-6 flex justify-end gap-2"},va={class:"min-w-0 flex-1"},ha={class:"text-sm font-semibold"},wa={class:"mt-0.5 text-xs opacity-90"},ya=["onClick"],ka={__name:"index",setup(x){const i=w("system"),y={"--app-canvas":"#f7f8fc","--app-surface":"#fbfcff","--app-surface-2":"#f1f4fa","--app-border":"#e3e8f2","--app-foreground":"#0f172a","--app-muted":"#475569","--app-muted-2":"#64748b","--app-accent":"#0066ff","--app-on-accent":"#f3f7ff","--app-brand-on":"#f3f7ff","--color-canvas":"#f7f8fc","--color-surface":"#fbfcff","--color-surface-2":"#f1f4fa","--color-border":"#e3e8f2","--color-foreground":"#0f172a","--color-muted":"#475569","--color-muted-2":"#64748b","--color-accent":"#0066ff","--color-on-accent":"#f3f7ff","--color-brand-on":"#f3f7ff",backgroundColor:"#f7f8fc",color:"#0f172a"},B={"--app-canvas":"#0b1220","--app-surface":"#0f1a2b","--app-surface-2":"#121f34","--app-border":"#25324b","--app-foreground":"#e7eef9","--app-muted":"#a9b4c7","--app-muted-2":"#8a97ae","--app-accent":"#4c8dff","--app-on-accent":"#f3f7ff","--app-brand-on":"#f3f7ff","--color-canvas":"#0b1220","--color-surface":"#0f1a2b","--color-surface-2":"#121f34","--color-border":"#25324b","--color-foreground":"#e7eef9","--color-muted":"#a9b4c7","--color-muted-2":"#8a97ae","--color-accent":"#4c8dff","--color-on-accent":"#f3f7ff","--color-brand-on":"#f3f7ff",backgroundColor:"#0b1220",color:"#e7eef9",colorScheme:"dark"},T=de(()=>i.value==="light"?y:i.value==="dark"?B:{}),v={backgroundColor:"var(--app-accent)",color:"var(--app-on-accent)",boxShadow:"0 1px 2px 0 rgb(0 0 0 / 0.08)"},C={backgroundColor:"transparent",color:"var(--app-muted)"};le({title:"Style Guide",meta:[{name:"robots",content:"noindex, nofollow"},{name:"description",content:"Internal design system reference: colors, typography, components, and utilities for Alt Text Studio."}]});const A=[{label:"Foundations",items:[{id:"colors",label:"Colors"},{id:"typography",label:"Typography"},{id:"radii",label:"Radii"},{id:"shadows",label:"Shadows"},{id:"spacing",label:"Spacing"}]},{label:"Components",items:[{id:"buttons",label:"Buttons"},{id:"forms",label:"Form controls"},{id:"cards",label:"Cards"},{id:"badges",label:"Badges"},{id:"tables",label:"Tables"}]},{label:"Feedback",items:[{id:"alerts",label:"Alerts"},{id:"loaders",label:"Loaders"},{id:"tooltips",label:"Tooltips"},{id:"modals",label:"Modals"},{id:"toasts",label:"Toasts"}]}],H=w("colors");let V=null;ne(()=>{if(typeof window>"u")return;const t=A.flatMap(o=>o.items.map(c=>c.id)).map(o=>
1document.getElementById(o)).filter(Boolean);V=new IntersectionObserver(o=>{const c=o.filter(a=>a.isIntersecting).sort((a,k)=>a.boundingClientRect.top-k.boundingClientRect.top);c.length>0&&(H.value=c[0].target.id)},{rootMargin:"-96px 0px -60% 0px",threshold:0}),t.forEach(o=>V.observe(o))}),ce(()=>{V&&V.disconnect()});function R(b,t){const o=document.getElementById(t);if(!o)return;b.preventDefault();const c=o.getBoundingClientRect().top+window.scrollY-88;window.scrollTo({top:c,behavior:"smooth"}),history.replaceState(null,"",`#${t}`)}const Z=[{token:"canvas",className:"bg-canvas",colorVar:"var(--app-canvas)"},{token:"surface",className:"bg-surface",colorVar:"var(--app-surface)"},{token:"surface-2",className:"bg-surface-2",colorVar:"var(--app-surface-2)"},{token:"border",className:"border-border",colorVar:"var(--app-border)"}],Y=[{token:"foreground",className:"text-foreground",colorVar:"var(--app-foreground)",role:"Body, headings"},{token:"muted",className:"text-muted",colorVar:"var(--app-muted)",role:"Subtitles, captions"},{token:"muted-2",className:"text-muted-2",colorVar:"var(--app-muted-2)",role:"Hints, placeholders"},{token:"on-accent",className:"text-on-accent",colorVar:"var(--app-on-accent)",onAccent:!0,role:"Text on filled accent"}],q=[{token:"brand-lavender",value:"#c2a2ff",colorVar:"#c2a2ff"},{token:"brand-purple",value:"#916aff",colorVar:"#916aff"},{token:"brand-blue",value:"#0066ff",colorVar:"#0066ff"}],O=[{token:"accent",className:"bg-accent",colorVar:"var(--app-accent)"},{token:"success",className:"bg-emerald-500",colorVar:"#10b981"},{token:"warning",className:"bg-amber-500",colorVar:"#f59e0b"},{token:"danger",className:"bg-red-500",colorVar:"#ef4444"},{token:"info",className:"bg-blue-500",colorVar:"#3b82f6"},{token:"on-accent",className:"bg-on-accent",colorVar:"var(--app-on-accent)",outlined:!0}],W=[{label:"Display",role:"Hero H1",className:"text-foreground text-4xl font-bold tracking-tight sm:text-5xl",sample:"Generate alt text in seconds"},{label:"H1",role:"Page title",className:"text-foreground text-3xl font-bold tracking-tight sm:text-4xl",sample:"Style Guide"},{label:"H2",role:"Section title",className:"text-foreground text-2xl font-bold",sample:"A reusable system"},{label:"H3",role:"Subsection",className:"text-foreground text-xl font-semibold",sample:"Buttons & inputs"},{label:"H4",role:"Card heading",className:"text-foreground text-lg font-semibold",sample:"Most popular plan"},{label:"Body large",role:"Hero subtitle",className:"text-muted text-lg",sample:"A live reference for everything in the app."},{label:"Body",role:"Default text",className:"text-foreground text-base",sample:"Pinia stores keep auth, library, and create state in sync."},{label:"Small",role:"Helper, metadata",className:"text-muted text-sm",sample:"Updated 2 minutes ago."},{label:"Caption",role:"Form labels, captions",className:"text-muted-2 text-xs",sample:"Required field"},{label:"Mono",role:"Code, IDs",className:"text-foreground font-mono text-sm",sample:"image_id_8f3a91b2"}],J=[{label:"sm",className:"rounded-sm"},{label:"md",className:"rounded-md"},{label:"lg",className:"rounded-lg"},{label:"xl",className:"rounded-xl"},{label:"2xl",className:"rounded-2xl"},{label:"full",className:"rounded-full"}],K=[{label:"none",className:""},{label:"xs",className:"shadow-xs"},{label:"sm",className:"shadow-sm"},{label:"md",className:"shadow-md"},{label:"lg",className:"shadow-lg"},{label:"xl",className:"shadow-xl"},{label:"2xl",className:"shadow-2xl"}],Q=[{token:"canvas",cssVar:"app-canvas",light:"#f7f8fc",dark:"#0b1220"},{token:"surface",cssVar:"app-surface",light:"#fbfcff",dark:"#0f1a2b"},{token:"surface-2",cssVar:"app-surface-2",light:"#f1f4fa",dark:"#121f34"},{token:"border",cssVar:"app-border",light:"#e3e8f2",dark:"#25324b"},{token:"foreground",cssVar:"app-foreground",light:"#0f172a",dark:"#e7eef9"},{token:"muted",cssVar:"app-muted",light:"#475569",dark:"#a9b4c7"},{token:"muted-2",cssVar:"app-muted-2",light:"#64748b",dark:"#8a97ae"},{token:"accent",cssVar:"app-accent",light:"#0066ff",dark:"#4c8dff"},{token:"on-accent",cssVar:"app-on-accent",light:"#f3f7ff",dark:"#f3f7ff"}],X=[{label:"0.5",px:"2px"},{label:"1",px:"4px"},{label:"2",px:"8px"},{label:"3",px:"12px"},{label:"4",px:"16px"},{label:"6",px:"24px"},{label:"8",px:"32px"},{label:"10",px:"40px"},{label:"12",px:"48px"},{label:"16",px:"64px"},{label:"20",px:"80px"},{label:"24",px:"96px"}],j=w("");let z=null;async function ee(b){try{await navigator.clipboard?.writeText(b),j.value=b,z&&clearTimeout(z),z=setTimeout(()=>{j.value=""},1200)}catch{}}const F=w(!0),P=w(!1),D=w("Detailed"),_=w(!1),S=w([]);let te=0;function L(b){const t=++te,o={success:{title:"Saved successfully",body:"Your defaults have been updated."},error:{title:"Something went wrong",body:"Please try again in a moment."},info:{title:"New feature",body:"Try the bulk-edit panel in My Library."},warning:{title:"Low credits",body:"12 credits remaining on your plan."}};S.value.push({id:t,variant:b,...o[b]}),setTimeout(()=>{S.value=S.value.filter(c=>c.id!==t)},4e3)}function ae(b){S.value=S.value.filter(t=>t.id!==b)}function se(b){const t={success:"border border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200",error:"border border-red-200 bg-red-50 text-red-900 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-200",info:"border border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-500/40 dark:bg-blue-500/10 dark:text-blue-200",warning:"border border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-200"};return t[b]||t.info}return(b,t)=>{const o=he,c=Be;return l(),n("div",{class:h(["bg-canvas text-foreground relative min-h-screen w-full",i.value==="dark"?"dark":"",i.value==="light"?"sg-light-preview":""]),style:m(T.value)},[t[85]||(t[85]=e("div",{"aria-hidden":"true",class:"pointer-events-none absolute inset-x-0 top-0 -z-0"}
1,[e("div",{class:"absolute left-1/2 -translate-x-1/2 rounded-full blur-3xl",style:{top:"-160px",width:"1100px",height:"600px",background:"radial-gradient(closest-side, rgba(194, 162, 255, 0.25), rgba(145, 106, 255, 0.15) 55%, transparent 80%)"}})],-1)),e("div",Te,[t[79]||(t[79]=u('<header style="margin-bottom:5rem;" data-v-0f8acad2><div class="border-border bg-surface/70 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wider backdrop-blur" data-v-0f8acad2><span class="bg-brand-purple/80 inline-block h-1.5 w-1.5 rounded-full" data-v-0f8acad2></span><span class="text-muted" data-v-0f8acad2>Design System · v1</span></div><h1 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl" data-v-0f8acad2> Style <span class="from-brand-lavender via-brand-purple to-brand-blue bg-gradient-to-r bg-clip-text text-transparent" data-v-0f8acad2> Guide </span></h1><p class="text-muted mt-4 max-w-2xl text-lg" data-v-0f8acad2> A living reference of the tokens, components, and utilities that make up Alt Text Studio. Toggle dark mode in the navbar to see every specimen react. </p><div class="mt-6 flex flex-wrap items-center gap-2" data-v-0f8acad2><span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium" data-v-0f8acad2><span class="bg-accent inline-block h-1.5 w-1.5 rounded-full" data-v-0f8acad2></span> Light + Dark </span><span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium" data-v-0f8acad2><span class="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" data-v-0f8acad2></span> Tailwind v4 </span><span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium" data-v-0f8acad2><span class="bg-brand-purple inline-block h-1.5 w-1.5 rounded-full" data-v-0f8acad2></span> Nuxt 3 + Inter </span></div></header>',1)),e("div",Me,[e("aside",Ve,[e("nav",Le,[e("div",je,[t[16]||(t[16]=e("p",{class:"text-muted-2 mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider"}," Preview in ",-1)),e("div",ze,[(l(),n(p,null,f(["light","system","dark"],a=>e("button",{key:a,type:"button",role:"tab","aria-selected":i.value===a,class:"sg-toggle-btn-sm",style:m(i.value===a?v:C),onClick:k=>i.value=a},[a==="light"?(l(),n("svg",Ae,t[13]||(t[13]=[u('<circle cx="12" cy="12" r="4" data-v-0f8acad2></circle><path d="M12 2v2" data-v-0f8acad2></path><path d="M12 20v2" data-v-0f8acad2></path><path d="M2 12h2" data-v-0f8acad2></path><path d="M20 12h2" data-v-0f8acad2></path>',5)]))):a==="system"?(l(),n("svg",He,t[14]||(t[14]=[e("rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"},null,-1),e("line",{x1:"8",x2:"16",y1:"21",y2:"21"},null,-1),e("line",{x1:"12",x2:"12",y1:"17",y2:"21"},null,-1)]))):(l(),n("svg",Fe,t[15]||(t[15]=[e("path",{d:"M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z"},null,-1)]))),e("span",Pe,d(a==="system"?"Site":a),1)],12,$e)),64))])]),t[17]||(t[17]=e("hr",{class:"sg-toggle-divider"},null,-1)),e("ul",De,[(l(),n(p,null,f(A,(a,k)=>e("li",{key:a.label,class:"list-none",style:m(k>0?"margin-top: 1.5rem;":"")},[e("p",Ie,d(a.label),1),e("ul",Ee,[(l(!0),n(p,null,f(a.items,M=>(l(),n("li",{key:M.id,class:"list-none"},[e("a",{href:`#${M.id}`,class:h(["block rounded-lg py-1.5 pr-3 pl-5 text-sm transition-colors",H.value===M.id?"bg-accent/10 text-accent font-semibold":"text-muted hover:bg-surface-2 hover:text-foreground"]),onClick:re=>R(re,M.id)},d(M.label),11,Ge)]))),128))])],4)),64))])])]),e("main",Ue,[e("section",Re,[t[31]||(t[31]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 01 · Foundations </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Colors </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Theme tokens swap automatically with the <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>html.dark</code> class. Use the semantic names; avoid hard-coded hex. </p></div><h3 class="text-muted mb-3 text-xs font-semibold uppercase tracking-wider" data-v-0f8acad2> Surface tokens </h3>',2)),e("div",Ze,[(l(),n(p,null,f(Z,a=>e("button",{key:a.token,type:"button",class:"group border-border bg-surface hover:ring-accent/30 curs
1or-pointer rounded-2xl border p-4 text-left transition-all hover:shadow-md hover:ring-4",onClick:k=>ee(a.className)},[e("div",{class:"border-border h-20 w-full rounded-lg border",style:m({backgroundColor:a.colorVar})},null,4),e("div",qe,[e("p",Oe,d(a.token),1),e("span",We,d(j.value===a.className?"Copied":""),1)]),e("code",Je,d(a.className),1)],8,Ye)),64))]),t[32]||(t[32]=e("h3",{class:"text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider"}," Text tokens ",-1)),e("div",Ke,[(l(),n(p,null,f(Y,a=>e("div",{key:a.token,class:"flex flex-wrap items-center gap-4 px-5 py-4"},[e("div",Qe,[a.onAccent?(l(),n("p",{key:1,class:"bg-accent inline-block rounded px-2 py-0.5 text-base font-semibold",style:m({color:a.colorVar})},d(a.token)+" · The quick brown fox ",5)):(l(),n("p",{key:0,class:"text-base font-semibold",style:m({color:a.colorVar})},d(a.token)+" · The quick brown fox ",5)),e("code",Xe,d(a.className),1)]),e("span",et,d(a.role),1)])),64))]),t[33]||(t[33]=e("h3",{class:"text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider"}," Brand ",-1)),e("div",tt,[(l(),n(p,null,f(q,a=>e("div",{key:a.token,class:"border-border overflow-hidden rounded-2xl border"},[e("div",{class:"h-24 w-full",style:m({backgroundColor:a.colorVar})},null,4),e("div",at,[e("p",st,d(a.token),1),e("code",rt,d(a.value),1)])])),64)),t[18]||(t[18]=u('<div class="border-border col-span-2 overflow-hidden rounded-2xl border sm:col-span-3" data-v-0f8acad2><div class="h-24 w-full" style="background:linear-gradient(to right, #c2a2ff, #916aff, #0066ff);" data-v-0f8acad2></div><div class="bg-surface px-4 py-3" data-v-0f8acad2><p class="text-foreground text-sm font-semibold" data-v-0f8acad2> Brand gradient </p><code class="text-muted block font-mono text-[11px]" data-v-0f8acad2> from-brand-lavender via-brand-purple to-brand-blue </code></div></div>',1))]),t[34]||(t[34]=e("h3",{class:"text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider"}," Accent + status ",-1)),e("div",ot,[(l(),n(p,null,f(O,a=>e("div",{key:a.token,class:"border-border overflow-hidden rounded-2xl border"},[e("div",{class:h(["h-20 w-full",a.outlined?"border-border border":""]),style:m({backgroundColor:a.colorVar})},null,6),e("div",dt,[e("p",lt,d(a.token),1),e("code",nt,d(a.className),1)])])),64))]),t[35]||(t[35]=e("h3",{id:"theme-modes",class:"text-muted mt-12 mb-3 scroll-mt-28 text-xs font-semibold uppercase tracking-wider"}," Light vs dark ",-1)),t[36]||(t[36]=e("p",{class:"text-muted mb-4 max-w-2xl text-sm"},[g(" Every token resolves to a different value depending on "),e("code",{class:"bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]"},"html.dark"),g(". Both columns render here as static swatches so you can compare side-by-side regardless of your current theme. ")],-1)),e("div",ct,[e("table",it,[t[19]||(t[19]=e("thead",{class:"bg-surface-2"},[e("tr",null,[e("th",{class:"text-muted px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider"}," Token "),e("th",{class:"text-muted px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider"}," Light "),e("th",{class:"text-muted px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider"}," Dark ")])],-1)),e("tbody",ut,[(l(),n(p,null,f(Q,a=>e("tr",{key:a.token},[e("td",pt,[e("p",ft,d(a.token),1),e("code",xt," --"+d(a.cssVar),1)]),e("td",bt,[e("div",mt,[e("span",{class:"border-border h-7 w-7 flex-shrink-0 rounded-md border",style:m({backgroundColor:a.light})},null,4),e("code",gt,d(a.light),1)])]),e("td",vt,[e("div",ht,[e("span",{class:"h-7 w-7 flex-shrink-0 rounded-md border border-white/10",style:m({backgroundColor:a.dark})},null,4),e("code",wt,d(a.dark),1)])])])),64))])])]),t[37]||(t[37]=e("h3",{class:"text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider"}," Rendered preview ",-1)),e("div",yt,[e("div",kt,[e("div",Ct,[t[21]||(t[21]=e("p",{class:"text-xs font-semibold uppercase tracking-wider",style:{color:"#475569"}}," Light mode ",-1)),(l(),n("svg",_t,t[20]||(t[20]=[u('<path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" data-v-0f8acad2></path><path d="M12 2v2" data-v-0f8acad2></path><path d="M12 20v2" data-v-0f8acad2></path><path d="M2 12h2" data-v-0f8acad2></path><path d="M20 12h2" data-v-0f8acad2></path>',5)])))]),t[22]||(t[22]=u('<div class="space-y-3 p-5" style="background-color:#f7f8fc;" data-v-0f8acad2><div class="rounded-xl border p-4 shadow-sm" style="background-color:#fbfcff;border-color:#e3e8f2;" data-v-0f8acad2><p class="text-base font-semibold" style="color:#0f172a;" data-v-0f8acad2> Card title </p><p class="mt-1 text-sm" style="color:#475569;" data-v-0f8acad2> Body copy on a surface inside canvas. </p><button type="button" class="mt-3 inline-flex cursor-pointer items-center rounded-full px-3.5 py-1.5 text-xs font-semibold" style="background-color:#0066ff;color:#f3f7ff;" data-v-0f8acad2> Primary action </button></div></div>',1))]),e("div",St,[e("div",Nt,[t[24]||(t[24]=e("p",{class:"text-xs font-semibold uppercase tracking-wider",style:{color:"#a9b4c7"}}," Dark mode ",-1)),(l(),n("svg",Bt,t[23]||(t[23]=[e("path",{d:"M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z"},null,-1)])))]),t[25]||(t[25]=u('<div class="space-y-3 p-5" style="background-color:#0b1220;" data-v-0f8acad2><div class="rounded-xl border p-4 shadow-sm" style="background-color:#0f1a2b;border-color:#25324b;" data-v-0f8acad2><p class="text-base font-semibold" style="color:#e7eef9;" data-v-0f8acad2> Card title </p><p class="mt-1 text-sm" style="color:#a9b4c7;" data-v-0f8acad2> Body copy on a surface inside canvas. </p><button type="button" class="mt-3 inline-flex cursor-pointer items-center rounded-full px-3.5 py-1.5 text-xs font-semibold" style="background-color:#4c8dff;color:#f3f7ff;" data-v-0f8acad2> Primary action </button></div></div>',1))])]),t[38]||(t[38]=e("h3",{class:"text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider"}," Patterns ",-1)),e("div",Tt,[e("div",null,[t[26]||(t[26]=e("p",{class:"text-foreground text-sm font-semibold"}," 1. Prefer semantic tokens ",-1)),t[27]||(t[27]=e("p",{class:"text-muted mt-1 text-sm"},[g(" Tokens swap automatically. No "),e("code",{class:"bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]"}
1,"dark:"),g(" prefix needed. ")],-1)),e("div",Mt,[s(o,{code:'<div class="bg-surface text-foreground border-border border rounded-xl p-4">...</div>'})])]),e("div",null,[t[28]||(t[28]=e("p",{class:"text-foreground text-sm font-semibold"},[g(" 2. Use "),e("code",{class:"bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]"},"dark:"),g(" only for status colors ")],-1)),t[29]||(t[29]=e("p",{class:"text-muted mt-1 text-sm"}," Tinted backgrounds and softer borders for alerts in dark mode. ",-1)),e("div",Vt,[s(o,{code:'<div class="border-red-200 bg-red-50 text-red-900 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-200 rounded-xl border p-4">...</div>'})])]),t[30]||(t[30]=u('<div data-v-0f8acad2><p class="text-foreground text-sm font-semibold" data-v-0f8acad2> 3. Toggle </p><p class="text-muted mt-1 text-sm" data-v-0f8acad2> A small inline script in <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]" data-v-0f8acad2>nuxt.config.ts</code> sets <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]" data-v-0f8acad2>html.dark</code> before paint, reading from <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]" data-v-0f8acad2>localStorage['theme']</code> or <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]" data-v-0f8acad2>prefers-color-scheme</code>. </p></div>',1))])]),e("section",Lt,[t[41]||(t[41]=e("div",{class:"mb-8"},[e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 02 · Foundations "),e("h2",{class:"text-3xl font-bold tracking-tight sm:text-4xl",style:{"margin-top":"0.75rem"}}," Typography "),e("p",{class:"text-muted max-w-2xl text-base",style:{"margin-top":"0.75rem"}}," Inter from Google Fonts, single weight stack at 400 / 600 / 700. Sizes follow Tailwind's default scale. ")],-1)),e("div",jt,[(l(),n(p,null,f(W,a=>e("div",{key:a.label,class:"grid gap-3 px-5 py-5 sm:grid-cols-[200px_1fr_auto] sm:items-baseline"},[e("div",null,[e("p",zt,d(a.label),1),e("p",$t,d(a.role),1)]),e("p",{class:h(["min-w-0 truncate",a.className])},d(a.sample),3),e("code",At,d(a.className),1)])),64))]),e("div",Ht,[s(c,{name:"Eyebrow label",description:"Section numerals, kicker labels","class-name":"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"},{code:r(()=>[s(o,{code:'<p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]">01 · Foundations</p>'})]),default:r(()=>[t[39]||(t[39]=e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 01 · Foundations ",-1))]),_:1,__:[39]}),s(c,{name:"Inline code",description:"API references, classes, paths","class-name":"bg-surface-2 rounded px-1.5 py-0.5 font-mono text-[12px]"},{code:r(()=>[s(o,{code:'<code class="bg-surface-2 rounded px-1.5 py-0.5 font-mono text-[12px]">yarn dev</code>'})]),default:r(()=>[t[40]||(t[40]=e("p",{class:"text-foreground text-sm"},[g(" Run "),e("code",{class:"bg-surface-2 rounded px-1.5 py-0.5 font-mono text-[12px]"}," yarn dev "),g(" to start the server. ")],-1))]),_:1,__:[40]})])]),e("section",Ft,[t[42]||(t[42]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 03 · Foundations </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Radii </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Soft corners across the board. Inputs and buttons use <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>rounded-lg</code>; cards lean on <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>rounded-xl</code> and <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>rounded-2xl</code>; pills are <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>rounded-full</code>. </p></div>',1)),e("div",Pt,[(l(),n(p,null,f(J,a=>e("div",{key:a.label,class:"border-border bg-surface flex flex-col items-center gap-2 rounded-2xl border p-4"},[e("div",{class:h(["border-accent/40 from-brand-lavender/30 to-brand-blue/30 h-16 w-16 border-2 bg-gradient-to-br",a.className])},null,2),e("p",Dt,d(a.label),1),e("code",It,d(a.className),1)])),64))])]),e("section",Et,[t[43]||(t[43]=e("div",{class:"mb-8"},[e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 04 · Foundations "),e("h2",{class:"text-3xl font-bold tracking-tight sm:text-4xl",style:{"margin-top":"0.75rem"}}," Shadows "),e("p",{class:"text-muted max-w-2xl text-base",style:{"margin-top":"0.75rem"}}," Used sparingly. Most surfaces rely on the border alone; shadows announce elevation only on dropdowns, modals, and hovered cards. ")],-1)),e("div",Gt,[(l(),n(p,null,f(K,a=>e("div",{key:a.label,class:"flex flex-col items-center gap-2"},[e("div",{class:h(["border-border bg-surface h-20 w-full rounded-xl border",a.className])},null,2),e("p",Ut,d(a.label),1),e("code",Rt,d(a.className),1)])),64))])]),e("section",Zt,[t[44]||(t[44]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 05 · Foundations </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Spacing </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> 4px base unit. Use 2 / 3 / 4 / 6 / 8 / 12 most often. Section gaps are typically <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>gap-y-12</code> or <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>space-y-16</code>. </p></div>',1)),e("div",Yt,[(l(),n(p,null,f(X,a=>e("div",{key:a.label,class:"flex items-center gap-4"},[e("code",qt,d(a.label),1),e("code",Ot,d(a.px),1),e("div",{class:"bg-accent/80 h-3 rounded-full",style:m({width:a.px})},null,4)])),64))])]),e("section",Wt,[t[52]||(t[52]=e("div",{class:"mb-8"},[e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 06 · Components "),e("h2",{class:"text-3xl font-bold tracking-tight sm:text-4xl",style:{"margin-top":"0.75rem"}}," Buttons "),e("p",{class:"text-muted max-w-2xl text-base",style:{"margin-top":"0.75rem"}}," Pill CTAs lead the page; outlined accent buttons handle secondary actions; ghost buttons retreat into the surface. ")],-1)),e("div",Jt,[s(c,{name:"Primary CTA pill",description:"Hero / nav signup","class-name":"bg-accent text-on-accent rounded-full"},{code:r(()=>
1[s(o,{code:'<button class="bg-accent text-on-accent rounded-full px-4 py-2 text-sm font-semibold hover:opacity-95 focus:ring-4 focus:ring-brand-blue/60 focus:outline-none">Get Started</button>'})]),default:r(()=>[t[45]||(t[45]=e("button",{type:"button",class:"bg-accent text-on-accent focus:ring-brand-blue/60 group inline-flex cursor-pointer items-center gap-x-1.5 rounded-full px-4 py-2 text-sm font-semibold hover:opacity-95 focus:ring-4 focus:outline-none"},[g(" Get Started - For Free "),e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"},[e("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),e("polyline",{points:"12 5 19 12 12 19"})])],-1))]),_:1,__:[45]}),s(c,{name:"Outlined accent",description:"Create button, secondary actions","class-name":"border-accent bg-surface text-accent rounded-lg"},{code:r(()=>[s(o,{code:'<button class="border-accent bg-surface text-accent hover:bg-surface-2 rounded-lg border px-3 py-2 text-sm font-semibold">Create</button>'})]),default:r(()=>[t[46]||(t[46]=e("button",{type:"button",class:"border-accent bg-surface text-accent hover:bg-surface-2 focus:ring-brand-blue/30 group inline-flex cursor-pointer items-center gap-x-2 rounded-lg border px-3 py-2 text-sm font-semibold focus:ring-4 focus:outline-none"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-5 w-5"},[e("path",{d:"M12 5v14"}),e("path",{d:"M5 12h14"})]),g(" Create ")],-1))]),_:1,__:[46]}),s(c,{name:"Ghost",description:"Tertiary, no border","class-name":"text-foreground hover:bg-surface-2"},{code:r(()=>[s(o,{code:'<button class="text-foreground hover:bg-surface-2 rounded-lg px-3 py-2 text-sm font-semibold">Cancel</button>'})]),default:r(()=>[t[47]||(t[47]=e("button",{type:"button",class:"text-foreground hover:bg-surface-2 cursor-pointer rounded-lg px-3 py-2 text-sm font-semibold"}," Cancel ",-1))]),_:1,__:[47]}),s(c,{name:"Danger",description:"Destructive actions","class-name":"bg-red-600 text-white"},{code:r(()=>[s(o,{code:'<button class="bg-red-600 hover:bg-red-700 text-white rounded-lg px-4 py-2 text-sm font-semibold focus:ring-4 focus:ring-red-300/50">Delete account</button>'})]),default:r(()=>[t[48]||(t[48]=e("button",{type:"button",class:"cursor-pointer rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 focus:ring-4 focus:ring-red-300/50 focus:outline-none dark:focus:ring-red-500/40"}," Delete account ",-1))]),_:1,__:[48]}),s(c,{name:"Brand gradient",description:"Premium / upgrade","class-name":"from-brand-lavender via-brand-purple to-brand-blue bg-gradient-to-r"},{code:r(()=>[s(o,{code:'<button class="from-brand-lavender via-brand-purple to-brand-blue bg-gradient-to-r text-brand-on rounded-full px-5 py-2.5 text-sm font-semibold shadow-lg">Upgrade</button>'})]),default:r(()=>[t[49]||(t[49]=e("button",{type:"button",class:"from-brand-lavender via-brand-purple to-brand-blue text-brand-on inline-flex cursor-pointer items-center gap-2 rounded-full bg-gradient-to-r px-5 py-2.5 text-sm font-semibold shadow-lg hover:opacity-95 focus:ring-4 focus:ring-purple-300/40 focus:outline-none"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",class:"h-4 w-4"},[e("path",{d:"M12 2l1.912 5.813a2 2 0 001.275 1.275L21 11l-5.813 1.912a2 2 0 00-1.275 1.275L12 20l-1.912-5.813a2 2 0 00-1.275-1.275L3 11l5.813-1.912a2 2 0 001.275-1.275L12 2z"})]),g(" Upgrade to Pro ")],-1))]),_:1,__:[49]}),s(c,{name:"Icon-only",description:"Toolbars, navbar theme toggle","class-name":"border-border bg-surface text-muted h-10 w-10 rounded-lg"},{code:r(()=>[s(o,{code:'<button class="border-border bg-surface text-muted hover:bg-surface-2 inline-flex h-10 w-10 items-center justify-center rounded-lg border shadow-xs">...</button>'})]),default:r(()=>[t[50]||(t[50]=e("button",{type:"button","aria-label":"Settings",class:"border-border bg-surface text-muted hover:bg-surface-2 focus:ring-brand-blue/60 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg border shadow-xs focus:ring-4 focus:outline-none"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-5 w-5"},[e("circle",{cx:"12",cy:"12",r:"3"}),e("path",{d:"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82
1-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"})])],-1)),t[51]||(t[51]=e("button",{type:"button","aria-label":"Like",class:"bg-accent text-on-accent hover:bg-accent/90 focus:ring-brand-blue/60 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg shadow-sm focus:ring-4 focus:outline-none"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",class:"h-5 w-5"},[e("path",{d:"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"})])],-1))]),_:1,__:[50,51]})]),t[53]||(t[53]=u('<h3 class="text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider" data-v-0f8acad2> Sizes </h3><div class="border-border bg-surface flex flex-wrap items-center gap-3 rounded-2xl border p-5" data-v-0f8acad2><button type="button" class="bg-accent text-on-accent cursor-pointer rounded-full px-2.5 py-1 text-xs font-semibold hover:opacity-95" data-v-0f8acad2> xs </button><button type="button" class="bg-accent text-on-accent cursor-pointer rounded-full px-3 py-1.5 text-sm font-semibold hover:opacity-95" data-v-0f8acad2> Small </button><button type="button" class="bg-accent text-on-accent cursor-pointer rounded-full px-4 py-2 text-sm font-semibold hover:opacity-95" data-v-0f8acad2> Default </button><button type="button" class="bg-accent text-on-accent cursor-pointer rounded-full px-5 py-2.5 text-base font-semibold hover:opacity-95" data-v-0f8acad2> Large </button><button type="button" class="bg-accent text-on-accent cursor-pointer rounded-full px-7 py-3.5 text-base font-semibold hover:opacity-95" data-v-0f8acad2> Hero </button></div><h3 class="text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider" data-v-0f8acad2> States </h3><div class="border-border bg-surface flex flex-wrap items-center gap-3 rounded-2xl border p-5" data-v-0f8acad2><button type="button" class="bg-accent text-on-accent cursor-pointer rounded-full px-4 py-2 text-sm font-semibold hover:opacity-95" data-v-0f8acad2> Default </button><button type="button" class="bg-accent text-on-accent rounded-full px-4 py-2 text-sm font-semibold opacity-95" data-v-0f8acad2> Hover (forced) </button><button type="button" class="bg-accent text-on-accent ring-brand-blue/60 cursor-pointer rounded-full px-4 py-2 text-sm font-semibold ring-4" data-v-0f8acad2> Focused </button><button type="button" disabled class="bg-accent text-on-accent cursor-not-allowed rounded-full px-4 py-2 text-sm font-semibold opacity-50" data-v-0f8acad2> Disabled </button><button type="button" disabled class="bg-accent text-on-accent inline-flex cursor-wait items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold opacity-80" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true" class="h-4 w-4 animate-spin" data-v-0f8acad2><path d="M21 12a9 9 0 11-6.219-8.56" data-v-0f8acad2></path></svg> Loading </button></div>',4))]),e("section",Kt,[t[62]||(t[62]=e("div",{class:"mb-8"},[e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 07 · Components "),e("h2",{class:"text-3xl font-bold tracking-tight sm:text-4xl",style:{"margin-top":"0.75rem"}}," Form controls "),e("p",{class:"text-muted max-w-2xl text-base",style:{"margin-top":"0.75rem"}}," All inputs share the same border, focus ring, and rounded-lg silhouette so a form reads as one continuous shape. ")],-1)),e("div",Qt,[s(c,{name:"Text input","class-name":"border-border bg-surface focus:border-accent rounded-lg","preview-class":"block"},{code:r(()=>[s(o,{code:'<input class="border-border bg-surface text-foreground placeholder:text-muted-2 focus:border-accent focus:ring-brand-blue/30 w-full rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none" />'})]),default:r(()=>[t[54]||(t[54]=e("div",{class:"w-full"},[e("label",{for:"sg-input",class:"text-foreground mb-1.5 block text-sm font-medium"}," Email "),e("input",{id:"sg-input",type:"email",placeholder:"[email protected]",class:"border-border bg-surface text-foreground placeholder:text-muted-2 focus:border-accent focus:ring-brand-blue/30 block w-full rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none"}),e("p",{class:"text-muted-2 mt-1.5 text-xs"}," We'll never share your email. ")],-1))]),_:1,__:[54]}),s(c,{name:"Textarea","class-name":"border-border bg-surface rounded-lg","preview-class":"block"},{code:r(()=>
1[s(o,{code:'<textarea rows="3" class="border-border bg-surface focus:border-accent focus:ring-brand-blue/30 w-full resize-y rounded-lg border px-3 py-2.5 text-sm focus:ring-2"></textarea>'})]),default:r(()=>[t[55]||(t[55]=e("div",{class:"w-full"},[e("label",{for:"sg-textarea",class:"text-foreground mb-1.5 block text-sm font-medium"}," Custom prompt "),e("textarea",{id:"sg-textarea",rows:"3",placeholder:"Describe additional context...",class:"border-border bg-surface text-foreground placeholder:text-muted-2 focus:border-accent focus:ring-brand-blue/30 block w-full resize-y rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none"})],-1))]),_:1,__:[55]}),s(c,{name:"Select","class-name":"border-border bg-surface rounded-lg","preview-class":"block"},{code:r(()=>[s(o,{code:'<select class="border-border bg-surface text-foreground focus:border-accent focus:ring-brand-blue/30 w-full rounded-lg border px-3 py-2.5 text-sm focus:ring-2">...</select>'})]),default:r(()=>[t[56]||(t[56]=e("div",{class:"w-full"},[e("label",{for:"sg-select",class:"text-foreground mb-1.5 block text-sm font-medium"}," Output language "),e("select",{id:"sg-select",class:"border-border bg-surface text-foreground focus:border-accent focus:ring-brand-blue/30 block w-full cursor-pointer rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none"},[e("option",null,"English (en)"),e("option",null,"Spanish (es)"),e("option",null,"French (fr)"),e("option",null,"Japanese (ja)")])],-1))]),_:1,__:[56]}),s(c,{name:"Toggle switch",description:"Boolean settings, Auto-detect Context","class-name":"peer-checked:bg-accent"},{code:r(()=>[s(o,{code:`<label class="inline-flex cursor-pointer items-center gap-3"> 2 <input type="checkbox" class="peer sr-only" /> 3 <div class="peer bg-border peer-checked:bg-accent after:bg-surface after:border-border relative h-6 w-11 rounded-full after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:transition-all after:content-[''] peer-checked:after:translate-x-full"></div> 4 <span class="text-sm font-medium">Auto-detect context</span> 5</label>`})]),default:r(()=>[e("label",Xt,[$(e("input",{"onUpdate:modelValue":t[0]||(t[0]=a=>F.value=a),type:"checkbox",class:"peer sr-only","aria-label":"Auto-detect context"},null,512),[[U,F.value]]),t[57]||(t[57]=e("div",{class:"peer bg-border peer-checked:bg-accent peer-focus:ring-brand-blue/30 after:border-border after:bg-surface relative h-6 w-11 rounded-full peer-focus:ring-4 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:transition-all after:content-[''] peer-checked:after:translate-x-full"},null,-1)),t[58]||(t[58]=e("span",{class:"text-foreground text-sm font-medium"}," Auto-detect context ",-1))])]),_:1}),s(c,{name:"Checkbox","class-name":"text-accent focus:ring-brand-blue/30"},{code:r(()=>[s(o,{code:'<input type="checkbox" class="text-accent border-border bg-surface focus:ring-brand-blue/30 h-4 w-4 rounded focus:ring-2" />'})]),default:r(()=>[e("label",ea,[$(e("input",{"onUpdate:modelValue":t[1]||(t[1]=a=>P.value=a),type:"checkbox",class:"text-accent border-border bg-surface focus:ring-brand-blue/30 h-4 w-4 cursor-pointer rounded focus:ring-2"},null,512),[[U,P.value]]),t[59]||(t[59]=e("span",{class:"text-foreground text-sm"}," Send me product updates ",-1))])]),_:1}),s(c,{name:"Radio group","class-name":"text-accent focus:ring-brand-blue/30"},{code:r(()=>[s(o,{code:'<input type="radio" name="x" class="text-accent border-border bg-surface focus:ring-brand-blue/30 h-4 w-4 focus:ring-2" />'})]),default:r(()=>[e("div",ta,[(l(),n(p,null,f(["Normal","Detailed","Custom"],a=>e("label",{key:a,class:"inline-flex cursor-pointer items-center gap-3"},[$(e("input",{"onUpdate:modelValue":t[2]||(t[2]=k=>D.value=k),value:a,type:"radio",name:"sg-radio",class:"text-accent border-border bg-surface focus:ring-brand-blue/30 h-4 w-4 cursor-pointer focus:ring-2"},null,8,aa),[[pe,D.value]]),e("span",sa,d(a)+" text length ",1)])),64))])]),_:1}),s(c,{name:"Input with error","class-name":"border-red-400 focus:border-red-500","preview-class":"block"},{code:r(()=>
5[s(o,{code:'<input class="border-red-400 bg-red-50 text-red-900 dark:border-red-500/60 dark:bg-red-500/10 dark:text-red-200 w-full rounded-lg border px-3 py-2.5 text-sm focus:border-red-500 focus:ring-2 focus:ring-red-300/40" />'})]),default:r(()=>[t[60]||(t[60]=e("div",{class:"w-full"},[e("label",{for:"sg-error",class:"text-foreground mb-1.5 block text-sm font-medium"}," Password "),e("input",{id:"sg-error",type:"password",value:"123",class:"block w-full rounded-lg border border-red-400 bg-red-50 px-3 py-2.5 text-sm text-red-900 placeholder:text-red-300 focus:border-red-500 focus:ring-2 focus:ring-red-300/40 focus:outline-none dark:border-red-500/60 dark:bg-red-500/10 dark:text-red-200"}),e("p",{class:"mt-1.5 flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",class:"h-3.5 w-3.5"},[e("path",{"fill-rule":"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l6.518 11.59C19.02 15.92 18.245 17 17.004 17H2.996c-1.24 0-2.016-1.08-1.257-2.31l6.518-11.59ZM11 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1-8a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V7a1 1 0 0 0-1-1Z","clip-rule":"evenodd"})]),g(" Must be at least 8 characters. ")])],-1))]),_:1,__:[60]}),s(c,{name:"Input with prefix icon","class-name":"border-border bg-surface rounded-lg pl-10","preview-class":"block"},{code:r(()=>[s(o,{code:`<div class="relative"> 6 <svg class="text-muted-2 absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2">...</svg> 7 <input class="border-border bg-surface w-full rounded-lg border py-2.5 pr-3 pl-10 text-sm" /> 8</div>`})]),default:r(()=>[t[61]||(t[61]=e("div",{class:"relative w-full"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"text-muted-2 pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2"},[e("circle",{cx:"11",cy:"11",r:"8"}),e("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]),e("input",{type:"search",placeholder:"Search images...",class:"border-border bg-surface text-foreground placeholder:text-muted-2 focus:border-accent focus:ring-brand-blue/30 block w-full rounded-lg border py-2.5 pr-3 pl-10 text-sm focus:ring-2 focus:outline-none"})],-1))]),_:1,__:[61]})])]),t[76]||(t[76]=u('<section id="cards" class="scroll-mt-28" data-v-0f8acad2><div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 08 · Components </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Cards </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Three flavors: standard <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>rounded-xl</code> outline, soft elevated <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>shadow-lg</code> feature card, and nested <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>bg-surface-2</code> groups. </p></div><div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3" data-v-0f8acad2><article class="border-border bg-surface rounded-xl border p-5 shadow-sm transition-shadow hover:shadow-md" data-v-0f8acad2><div class="bg-accent/10 text-accent mb-4 flex h-10 w-10 items-center justify-center rounded-lg" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="h-5 w-5" data-v-0f8acad2><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" data-v-0f8acad2></path></svg></div><h3 class="text-foreground text-lg font-semibold" data-v-0f8acad2> Standard card </h3><p class="text-muted mt-1.5 text-sm" data-v-0f8acad2> The default container for content blocks across the app. </p><p class="text-muted-2 mt-4 font-mono text-[10px]" data-v-0f8acad2> border-border bg-surface rounded-xl border p-5 shadow-sm </p></article><article class="bg-surface rounded-2xl p-5 shadow-lg transition-all duration-300 hover:shadow-xl" data-v-0f8acad2><div class="from-brand-lavender via-brand-purple to-brand-blue text-brand-on mb-4 flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="h-5 w-5" data-v-0f8acad2><path d="M12 2l1.912 5.813a2 2 0 001.275 1.275L21 11l-5.813 1.912a2 2 0 00-1.275 1.275L12 20l-1.912-5.813a2 2 0 00-1.275-1.275L3 11l5.813-1.912a2 2 0 001.275-1.275L12 2z" data-v-0f8acad2></path></svg></div><h3 class="text-foreground text-lg font-semibold" data-v-0f8acad2> Elevated feature </h3><p class="text-muted mt-1.5 text-sm" data-v-0f8acad2> For marketing pages: pricing, about, integrations. </p><p class="text-muted-2 mt-4 font-mono text-[10px]" data-v-0f8acad2> bg-surface rounded-2xl p-5 shadow-lg hover:shadow-xl </p></article><article class="border-accent bg-surface ring-accent/20 rounded-xl border-2 p-5 ring-4" data-v-0f8acad2><div class="mb-4 flex items-center justify-between gap-3" data-v-0f8acad2><div class="bg-accent/10 text-accent flex h-10 w-10 items-center justify-center rounded-lg" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="h-5 w-5" data-v-0f8acad2>
8<polyline points="20 6 9 17 4 12" data-v-0f8acad2></polyline></svg></div><span class="bg-accent text-on-accent inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider" data-v-0f8acad2> Active </span></div><h3 class="text-foreground text-lg font-semibold" data-v-0f8acad2> Highlighted card </h3><p class="text-muted mt-1.5 text-sm" data-v-0f8acad2> Selected pricing tier, current plan, focused state. </p><p class="text-muted-2 mt-4 font-mono text-[10px]" data-v-0f8acad2> border-accent ring-accent/20 border-2 ring-4 </p></article></div><h3 class="text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider" data-v-0f8acad2> Nested surfaces </h3><article class="border-border bg-surface rounded-2xl border p-5" data-v-0f8acad2><h4 class="text-foreground text-base font-semibold" data-v-0f8acad2> Generation defaults </h4><p class="text-muted mt-1 text-sm" data-v-0f8acad2> Nest <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]" data-v-0f8acad2>bg-surface-2</code> inside <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[11px]" data-v-0f8acad2>bg-surface</code> to group related controls without another border. </p><div class="bg-surface-2 mt-4 space-y-3 rounded-lg p-4" data-v-0f8acad2><div class="flex items-center justify-between" data-v-0f8acad2><span class="text-foreground text-sm" data-v-0f8acad2>Auto-detect context</span><span class="bg-accent inline-block h-2 w-2 rounded-full" data-v-0f8acad2></span></div><div class="flex items-center justify-between" data-v-0f8acad2><span class="text-foreground text-sm" data-v-0f8acad2>Detailed text length</span><span class="bg-border inline-block h-2 w-2 rounded-full" data-v-0f8acad2></span></div><div class="flex items-center justify-between" data-v-0f8acad2><span class="text-foreground text-sm" data-v-0f8acad2>Include alt-text best practices</span><span class="bg-accent inline-block h-2 w-2 rounded-full" data-v-0f8acad2></span></div></div></article></section>',1)),e("section",ra,[t[63]||(t[63]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 09 · Components </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Badges </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Pills for state, meta, and filters. Smaller text, tighter padding, and a single source of truth for color. </p></div><div class="border-border bg-surface flex flex-wrap items-center gap-2 rounded-2xl border p-5" data-v-0f8acad2><span class="bg-accent text-on-accent inline-flex items-center rounded px-2 py-0.5 text-xs font-medium uppercase" data-v-0f8acad2> EN </span><span class="bg-surface-2 text-muted hover:bg-border inline-flex items-center rounded px-2 py-0.5 text-xs font-medium uppercase" data-v-0f8acad2> ES </span><span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium" data-v-0f8acad2><span class="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" data-v-0f8acad2></span> Active </span><span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium" data-v-0f8acad2><span class="inline-block h-1.5 w-1.5 rounded-full bg-amber-500" data-v-0f8acad2></span> Pending </span><span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium" data-v-0f8acad2><span class="inline-block h-1.5 w-1.5 rounded-full bg-red-500" data-v-0f8acad2></span> Failed </span><span class="border-accent/30 bg-accent/5 text-accent inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-semibold" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="h-3 w-3" data-v-0f8acad2><path d="M12 2l1.912 5.813a2 2 0 001.275 1.275L21 11l-5.813 1.912a2 2 0 00-1.275 1.275L12 20l-1.912-5.813a2 2 0 00-1.275-1.275L3 11l5.813-1.912a2 2 0 001.275-1.275L12 2z" data-v-0f8acad2></path></svg> Pro </span><span class="from-brand-lavender via-brand-purple to-brand-blue text-brand-on inline-flex items-center rounded-full bg-gradient-to-r px-3 py-1 text-xs font-semibold shadow-sm" data-v-0f8acad2> Most popular </span><span class="inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300" data-v-0f8acad2> +12% this week </span><span class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-300" data-v-0f8acad2> -3 errors </span></div>
8',2)),e("div",oa,[s(o,{code:`<span class="bg-accent text-on-accent rounded px-2 py-0.5 text-xs font-medium uppercase">EN</span> 9<span class="border-border bg-surface inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium"> 10 <span class="bg-emerald-500 inline-block h-1.5 w-1.5 rounded-full"></span> 11 Active 12</span>`})])]),t[77]||(t[77]=u('<section id="tables" class="scroll-mt-28" data-v-0f8acad2><div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 10 · Components </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Tables </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Wrapped in a rounded outer surface. Header on <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>bg-surface-2</code>; rows separated by hairlines. </p></div><div class="border-border bg-surface overflow-x-auto rounded-2xl border" data-v-0f8acad2><table class="w-full text-sm" data-v-0f8acad2><thead class="bg-surface-2 text-muted text-xs uppercase tracking-wider" data-v-0f8acad2><tr data-v-0f8acad2><th class="px-5 py-3 text-left font-semibold" data-v-0f8acad2>Plan</th><th class="px-5 py-3 text-left font-semibold" data-v-0f8acad2>Credits</th><th class="px-5 py-3 text-left font-semibold" data-v-0f8acad2>Price</th><th class="px-5 py-3 text-right font-semibold" data-v-0f8acad2>Status</th></tr></thead><tbody class="divide-border divide-y" data-v-0f8acad2><tr class="hover:bg-surface-2/60 transition-colors" data-v-0f8acad2><td class="text-foreground px-5 py-3 font-medium" data-v-0f8acad2>Free</td><td class="text-muted px-5 py-3" data-v-0f8acad2>25</td><td class="text-muted px-5 py-3" data-v-0f8acad2>$0</td><td class="px-5 py-3 text-right" data-v-0f8acad2><span class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300" data-v-0f8acad2> Active </span></td></tr><tr class="hover:bg-surface-2/60 transition-colors" data-v-0f8acad2><td class="text-foreground px-5 py-3 font-medium" data-v-0f8acad2>Starter</td><td class="text-muted px-5 py-3" data-v-0f8acad2>500</td><td class="text-muted px-5 py-3" data-v-0f8acad2>$9.99</td><td class="px-5 py-3 text-right" data-v-0f8acad2><span class="text-muted-2 text-xs" data-v-0f8acad2>â</span></td></tr><tr class="hover:bg-surface-2/60 transition-colors" data-v-0f8acad2><td class="text-foreground px-5 py-3 font-medium" data-v-0f8acad2>Pro</td><td class="text-muted px-5 py-3" data-v-0f8acad2>2,500</td><td class="text-muted px-5 py-3" data-v-0f8acad2>$29.99</td><td class="px-5 py-3 text-right" data-v-0f8acad2><span class="text-muted-2 text-xs" data-v-0f8acad2>â</span></td></tr><tr class="hover:bg-surface-2/60 transition-colors" data-v-0f8acad2><td class="text-foreground px-5 py-3 font-medium" data-v-0f8acad2>Studio</td><td class="text-muted px-5 py-3" data-v-0f8acad2>10,000</td><td class="text-muted px-5 py-3" data-v-0f8acad2>$79.99</td><td class="px-5 py-3 text-right" data-v-0f8acad2><span class="text-muted-2 text-xs" data-v-0f8acad2>â</span></td></tr></tbody></table></div></section>',1)),e("section",da,[t[64]||(t[64]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 11 · Feedback </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Alerts </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Four levels: info, success, warning, danger. Each pairs a tinted background with a darker icon and text in dark mode. </p></div><div class="space-y-4" data-v-0f8acad2><div class="flex items-start gap-3 rounded-xl border border-blue-200 bg-blue-50 px-5 py-4 dark:border-blue-500/40 dark:bg-blue-500/10" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-300" data-v-0f8acad2><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" data-v-0f8acad2></path></svg><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-blue-900 dark:text-blue-200" data-v-0f8acad2> Heads up </p><p class="mt-0.5 text-sm text-blue-800 dark:text-blue-300/90" data-v-0f8acad2> New languages were added to your account this week. </p></div></div><div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-5 py-4 dark:border-emerald-500/40 dark:bg-emerald-500/10" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="mt-0.5 h-5 w-5 flex-shrink-0 text-emerald-500 dark:text-emerald-300" data-v-0f8acad2><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" data-v-0f8acad2></path></svg><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-emerald-900 dark:text-emerald-200" data-v-0f8acad2> All images processed </p><p class="mt-0.5 text-sm text-emerald-800 dark:text-emerald-300/90" data-v-0f8acad2> Generated alt text for 247 images in 3.2 seconds. </p></div></div><div class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-5 py-4 dark:border-amber-500/40 dark:bg-amber-500/10" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500 dark:text-amber-300" data-v-0f8acad2><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l6.518 11.59C19.02 15.92 18.245 17 17.004 17H2.99
126c-1.24 0-2.016-1.08-1.257-2.31l6.518-11.59ZM11 14a1 1 0 11-2 0 1 1 0 012 0Zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V7a1 1 0 00-1-1z" clip-rule="evenodd" data-v-0f8acad2></path></svg><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-amber-900 dark:text-amber-200" data-v-0f8acad2> Low credits </p><p class="mt-0.5 text-sm text-amber-800 dark:text-amber-300/90" data-v-0f8acad2> You have 12 credits remaining. Upgrade for more. </p></div></div><div class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-5 py-4 dark:border-red-500/40 dark:bg-red-500/10" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="mt-0.5 h-5 w-5 flex-shrink-0 text-red-500 dark:text-red-300" data-v-0f8acad2><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" data-v-0f8acad2></path></svg><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-red-900 dark:text-red-200" data-v-0f8acad2> Generation failed </p><p class="mt-0.5 text-sm text-red-800 dark:text-red-300/90" data-v-0f8acad2> Couldn't reach the API. Please try again. </p></div></div></div>',2)),e("div",la,[s(o,{code:`<div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-5 py-4 dark:border-emerald-500/40 dark:bg-emerald-500/10"> 13 <svg class="text-emerald-500 dark:text-emerald-300 mt-0.5 h-5 w-5">...</svg> 14 <div> 15 <p class="text-emerald-900 dark:text-emerald-200 text-sm font-semibold">Title</p> 16 <p class="text-emerald-800 dark:text-emerald-300/90 mt-0.5 text-sm">Body</p> 17 </div> 18</div>`})])]),e("section",na,[t[70]||(t[70]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 12 · Feedback </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Loaders </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Spinners for action loading; skeletons for data loading. Skeletons reuse <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>bg-surface-2 animate-pulse</code>. </p></div>',1)),e("div",ca,[s(c,{name:"Spinner sizes","class-name":"animate-spin"},{code:r(()=>[s(o,{code:`<svg class="text-accent h-5 w-5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"> 19 <path d="M21 12a9 9 0 11-6.219-8.56" /> 20</svg>`})]),default:r(()=>[t[65]||(t[65]=e("div",{class:"flex items-end gap-6"},[e("div",{class:"flex flex-col items-center gap-1"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","aria-hidden":"true",class:"text-accent h-3 w-3 animate-spin"},[e("path",{d:"M21 12a9 9 0 11-6.219-8.56"})]),e("span",{class:"text-muted-2 text-[10px] font-mono"},"h-3 w-3")]),e("div",{class:"flex flex-col items-center gap-1"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","aria-hidden":"true",class:"text-accent h-4 w-4 animate-spin"},[e("path",{d:"M21 12a9 9 0 11-6.219-8.56"})]),e("span",{class:"text-muted-2 text-[10px] font-mono"},"h-4 w-4")]),e("div",{class:"flex flex-col items-center gap-1"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","aria-hidden":"true",class:"text-accent h-5 w-5 animate-spin"},[e("path",{d:"M21 12a9 9 0 11-6.219-8.56"})]),e("span",{class:"text-muted-2 text-[10px] font-mono"},"h-5 w-5")]),e("div",{class:"flex flex-col items-center gap-1"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","aria-hidden":"true",class:"text-accent h-6 w-6 animate-spin"},[e("path",{d:"M21 12a9 9 0 11-6.219-8.56"})]),e("span",{class:"text-muted-2 text-[10px] font-mono"},"h-6 w-6")]),e("div",{class:"flex flex-col items-center gap-1"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","aria-hidden":"true",class:"text-accent h-8 w-8 animate-spin"},[e("path",{d:"M21 12a9 9 0 11-6.219-8.56"})]),e("span",{class:"text-muted-2 text-[10px] font-mono"},"h-8 w-8")])],-1))]),_:1,__:[65]}),s(c,{name:"Skeleton card","class-name":"bg-surface-2 animate-pulse","preview-class":"block"},{code:r(()=>
20[s(o,{code:'<div class="bg-surface-2 h-4 w-1/3 animate-pulse rounded"></div>'})]),default:r(()=>[t[66]||(t[66]=e("div",{class:"w-full"},[e("div",{class:"bg-surface-2 mb-3 h-4 w-1/3 animate-pulse rounded"}),e("div",{class:"bg-surface-2 mb-2 h-3 w-full animate-pulse rounded"}),e("div",{class:"bg-surface-2 mb-2 h-3 w-5/6 animate-pulse rounded"}),e("div",{class:"bg-surface-2 h-3 w-2/3 animate-pulse rounded"})],-1))]),_:1,__:[66]}),s(c,{name:"Progress bar","class-name":"bg-surface-2 rounded-full","preview-class":"block"},{code:r(()=>[s(o,{code:`<div class="bg-surface-2 h-2 w-full overflow-hidden rounded-full"> 21 <div class="from-brand-lavender via-brand-purple to-brand-blue h-full w-[62%] rounded-full bg-gradient-to-r"></div> 22</div>`})]),default:r(()=>[t[67]||(t[67]=e("div",{class:"w-full"},[e("div",{class:"text-muted mb-2 flex items-center justify-between text-xs font-medium"},[e("span",null,"Processing batch"),e("span",null,"62%")]),e("div",{class:"bg-surface-2 h-2 w-full overflow-hidden rounded-full"},[e("div",{class:"from-brand-lavender via-brand-purple to-brand-blue h-full w-[62%] rounded-full bg-gradient-to-r transition-[width] duration-700"})])],-1))]),_:1,__:[67]}),s(c,{name:"Pulsing dot",description:"Live status indicator","class-name":"bg-emerald-500 animate-ping"},{code:r(()=>[s(o,{code:`<span class="relative inline-flex h-3 w-3"> 23 <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span> 24 <span class="relative inline-flex h-3 w-3 rounded-full bg-emerald-500"></span> 25</span>`})]),default:r(()=>[t[68]||(t[68]=e("span",{class:"relative inline-flex h-3 w-3"},[e("span",{class:"absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"}),e("span",{class:"relative inline-flex h-3 w-3 rounded-full bg-emerald-500"})],-1)),t[69]||(t[69]=e("span",{class:"text-foreground text-sm font-medium"}," System operational ",-1))]),_:1,__:[68,69]})])]),e("section",ia,[t[71]||(t[71]=u('<div class="mb-8" data-v-0f8acad2><p class="text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]" data-v-0f8acad2> 13 · Feedback </p><h2 class="text-3xl font-bold tracking-tight sm:text-4xl" style="margin-top:0.75rem;" data-v-0f8acad2> Tooltips </h2><p class="text-muted max-w-2xl text-base" style="margin-top:0.75rem;" data-v-0f8acad2> Hover-only on desktop, kept dark on both themes for instant legibility against any surface. </p></div><div class="border-border bg-surface flex flex-wrap items-center gap-12 rounded-2xl border p-12" data-v-0f8acad2><div class="group relative" data-v-0f8acad2><button type="button" class="border-border bg-surface-2 text-foreground hover:bg-surface inline-flex h-10 w-10 cursor-help items-center justify-center rounded-lg border" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="h-5 w-5" data-v-0f8acad2><circle cx="12" cy="12" r="10" data-v-0f8acad2></circle><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" data-v-0f8acad2></path><line x1="12" y1="17" x2="12.01" y2="17" data-v-0f8acad2></line></svg></button><div class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 hidden -translate-x-1/2 whitespace-nowrap rounded-lg bg-gray-900 px-3 py-1.5 text-xs font-medium text-white shadow-lg group-hover:block dark:bg-gray-700" data-v-0f8acad2> Hover me for help <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" data-v-0f8acad2></div></div></div><div class="group relative" data-v-0f8acad2><span class="border-border bg-surface-2 text-foreground inline-flex cursor-help items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium" data-v-0f8acad2> Auto-detect context <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="text-muted h-3.5 w-3.5" data-v-0f8acad2><circle cx="12" cy="12" r="10" data-v-0f8acad2></circle><line x1="12" y1="16" x2="12" y2="12" data-v-0f8acad2></line><line x1="12" y1="8" x2="12.01" y2="8" data-v-0f8acad2></line></svg></span><div class="pointer-events-none absolute top-full left-1/2 z-20 mt-2 hidden w-64 -translate-x-1/2 roun
25ded-lg bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-lg group-hover:block dark:bg-gray-700" data-v-0f8acad2> Reads filenames and URL paths to enrich the prompt with real-world context. <div class="absolute bottom-full left-1/2 -translate-x-1/2 border-4 border-transparent border-b-gray-900 dark:border-b-gray-700" data-v-0f8acad2></div></div></div></div>',2)),e("div",ua,[s(o,{code:`<div class="group relative"> 26 <button class="...">Trigger</button> 27 <div class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 hidden -translate-x-1/2 rounded-lg bg-gray-900 px-3 py-1.5 text-xs font-medium text-white shadow-lg group-hover:block dark:bg-gray-700"> 28 Tooltip text 29 <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div> 30 </div> 31</div>`})])]),e("section",pa,[t[73]||(t[73]=e("div",{class:"mb-8"},[e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 14 · Feedback "),e("h2",{class:"text-3xl font-bold tracking-tight sm:text-4xl",style:{"margin-top":"0.75rem"}}," Modals "),e("p",{class:"text-muted max-w-2xl text-base",style:{"margin-top":"0.75rem"}}," Centered dialog over a tinted overlay. Click the trigger below to preview the live transition. ")],-1)),e("div",fa,[e("button",{type:"button",class:"bg-accent text-on-accent focus:ring-brand-blue/60 cursor-pointer rounded-full px-4 py-2 text-sm font-semibold hover:opacity-95 focus:ring-4 focus:outline-none",onClick:t[3]||(t[3]=a=>_.value=!0)}," Open modal "),t[72]||(t[72]=e("p",{class:"text-muted text-sm"}," Click outside or press Escape to close. ",-1))]),e("div",xa,[s(o,{code:`<div class="fixed inset-0 z-50 flex items-center justify-center p-4"> 32 <div class="bg-slate-950/60 absolute inset-0" @click="close"></div> 33 <div class="border-border bg-surface relative w-full max-w-md rounded-2xl border p-6 shadow-2xl"> 34 ... 35 </div> 36</div>`})])]),e("section",ba,[t[74]||(t[74]=e("div",{class:"mb-8"},[e("p",{class:"text-brand-purple text-xs font-semibold uppercase tracking-[0.18em]"}," 15 · Feedback "),e("h2",{class:"text-3xl font-bold tracking-tight sm:text-4xl",style:{"margin-top":"0.75rem"}}," Toasts "),e("p",{class:"text-muted max-w-2xl text-base",style:{"margin-top":"0.75rem"}}," Stack from the bottom-right; auto-dismiss after 4 seconds. Trigger one with the buttons below. ")],-1)),e("div",ma,[e("button",{type:"button",class:"cursor-pointer rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700",onClick:t[4]||(t[4]=a=>L("success"))}," Trigger success "),e("button",{type:"button",class:"cursor-pointer rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700",onClick:t[5]||(t[5]=a=>L("info"))}," Trigger info "),e("button",{type:"button",class:"cursor-pointer rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-amber-600",onClick:t[6]||(t[6]=a=>L("warning"))}," Trigger warning "),e("button",{type:"button",class:"cursor-pointer rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700",onClick:t[7]||(t[7]=a=>L("error"))}," Trigger error ")]),t[75]||(t[75]=u('<h3 class="text-muted mt-10 mb-3 text-xs font-semibold uppercase tracking-wider" data-v-0f8acad2> Static specimens </h3><div class="space-y-3" data-v-0f8acad2><div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 shadow-lg backdrop-blur-sm dark:border-emerald-500/40 dark:bg-emerald-500/10" data-v-0f8acad2><span class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-300" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4" data-v-0f8acad2><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" data-v-0f8acad2></path></svg></span><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-emerald-900 dark:text-emerald-200" data-v-0f8acad2> Saved successfully </p><p class="mt-0.5 text-xs text-emerald-800 dark:text-emerald-300/90" data-v-0f8acad2> Your defaults have been updated. </p></div></div><div class="flex items-start gap-3 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 shadow-lg backdrop-blur-sm dark:border-blue-500/40 dark:bg-blue-500/10" data-v-0f8acad2><span class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500/15 text-blue-600 dar
36k:text-blue-300" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4" data-v-0f8acad2><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" data-v-0f8acad2></path></svg></span><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-blue-900 dark:text-blue-200" data-v-0f8acad2> New feature </p><p class="mt-0.5 text-xs text-blue-800 dark:text-blue-300/90" data-v-0f8acad2> Try the bulk-edit panel in My Library. </p></div></div><div class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 shadow-lg backdrop-blur-sm dark:border-amber-500/40 dark:bg-amber-500/10" data-v-0f8acad2><span class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-amber-500/15 text-amber-600 dark:text-amber-300" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4" data-v-0f8acad2><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l6.518 11.59C19.02 15.92 18.245 17 17.004 17H2.996c-1.24 0-2.016-1.08-1.257-2.31l6.518-11.59ZM11 14a1 1 0 11-2 0 1 1 0 012 0Zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V7a1 1 0 00-1-1z" clip-rule="evenodd" data-v-0f8acad2></path></svg></span><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-amber-900 dark:text-amber-200" data-v-0f8acad2> Low credits </p><p class="mt-0.5 text-xs text-amber-800 dark:text-amber-300/90" data-v-0f8acad2> 12 credits remaining on your plan. </p></div></div><div class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 shadow-lg backdrop-blur-sm dark:border-red-500/40 dark:bg-red-500/10" data-v-0f8acad2><span class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-500/15 text-red-600 dark:text-red-300" data-v-0f8acad2><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4" data-v-0f8acad2><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" data-v-0f8acad2></path></svg></span><div class="min-w-0 flex-1" data-v-0f8acad2><p class="text-sm font-semibold text-red-900 dark:text-red-200" data-v-0f8acad2> Something went wrong </p><p class="mt-0.5 text-xs text-red-800 dark:text-red-300/90" data-v-0f8acad2> Please try again in a moment. </p></div></div></div>',2))]),t[78]||(t[78]=u('<section class="border-border border-t pt-12" data-v-0f8acad2><div class="bg-surface border-border rounded-2xl border p-6" data-v-0f8acad2><p class="text-muted text-sm" data-v-0f8acad2><span class="text-foreground font-semibold" data-v-0f8acad2>Notes for contributors:</span> this page is unlinked from the main navbar and marked <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2>noindex</code>. Add new specimens by following the <code class="bg-surface-2 rounded px-1 py-0.5 font-mono text-[12px]" data-v-0f8acad2><StyleGuideSpecimen /></code> wrapper. Live previews must read clean in both light and dark modes. </p></div></section>',1))])])]),(l(),E(G,{to:"body"},[s(ie,{"enter-active-class":"transition duration-200 ease-out","enter-from-class":"opacity-0","enter-to-class":"opacity-100","leave-active-class":"transition duration-150 ease-in","leave-from-class":"opacity-100","leave-to-class":"opacity-0"},{default:r(()=>[_.value?(l(),n("div",{key:0,class:h(["fixed inset-0 z-[100] flex items-center justify-center p-4",i.value==="dark"?"dark":"",i.value==="light"?"sg-light-preview":""]),style:m(T.value),role:"dialog","aria-modal":"true","aria-labelledby":"sg-modal-title"},[e("div",{class:"absolute inset-0 bg-slate-950/60 backdrop-blur-sm",onClick:t[8]||(t[8]=a=>_.value=!1)}),e("div",{class:"border-border bg-surface text-foreground relative w-full max-w-md rounded-2xl border p-6 shadow-2xl",onClick:t[12]||(t[12]=fe(()=>{},["stop"]))},[e("button",{type:"button","aria-label":"Close",class:"text-muted hover:bg-surface-2 hover:text-foreground absolute top-3 right-3 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg",onClick:t[9]||(t[9]=a=>_.value=!1)},t[80]||(t[80]=[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-4 w-4"},[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])),t[81]||(t[81]=e("div",{class:"bg-accent/10 text-accent mb-4 flex h-12 w-12 items-center justify-center rounded-2xl"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-6 w-6"},[e("path",{d:"M12 2l1.912 5.813a2 2 0 001.275 1.275L21 11l-5.813 1.912a2 2 0 00-1.275 1.275L12 20l-1.912-5.813a2 2 0 00-1.275-1.275L3 11l5.813-1.912a2 2 0 001.275-1.275L12 2z"})])],-1)),t[82]||(t[82]=e("h3",{id:"sg-modal-title",class:"text-foreground text-lg font-semibold"}," Confirm action ",-1)),t[83]||(t[83]=e("p",{class:"text-muted mt-2 text-sm"}," This is a sample modal. The standard Confirm modal in the app uses the same outer surface, with primary and secondary actions stacked at the bottom. ",-1)),e("div",ga,[e("button",{type:"button",class:"text-foreground hover:bg-surface-2 cursor-pointer rounded-lg px-4 py-2 text-sm font-semibold",onClick:t[10
36]||(t[10]=a=>_.value=!1)}," Cancel "),e("button",{type:"button",class:"bg-accent text-on-accent cursor-pointer rounded-lg px-4 py-2 text-sm font-semibold hover:opacity-95",onClick:t[11]||(t[11]=a=>_.value=!1)}," Confirm ")])])],6)):N("",!0)]),_:1})])),(l(),E(G,{to:"body"},[e("div",{"aria-live":"polite",class:h(["pointer-events-none fixed right-4 bottom-4 z-[110] flex w-full max-w-sm flex-col gap-2",i.value==="dark"?"dark":"",i.value==="light"?"sg-light-preview":""]),style:m(i.value==="system"?{}:{...T.value,backgroundColor:"transparent"})},[s(ue,{"enter-active-class":"transition duration-200 ease-out","enter-from-class":"opacity-0 translate-y-2","enter-to-class":"opacity-100 translate-y-0","leave-active-class":"transition duration-150 ease-in","leave-from-class":"opacity-100 translate-x-0","leave-to-class":"opacity-0 translate-x-4"},{default:r(()=>[(l(!0),n(p,null,f(S.value,a=>(l(),n("div",{key:a.id,class:h(["pointer-events-auto flex items-start gap-3 rounded-xl px-4 py-3 shadow-lg backdrop-blur-sm",se(a.variant)])},[e("div",va,[e("p",ha,d(a.title),1),e("p",wa,d(a.body),1)]),e("button",{type:"button",class:"cursor-pointer rounded p-1 hover:bg-black/10 dark:hover:bg-white/10","aria-label":"Dismiss",onClick:k=>ae(a.id)},t[84]||(t[84]=[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",class:"h-4 w-4"},[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)]),8,ya)],2))),128))]),_:1})],6)]))],6)}}},_a=oe(ka,[["__scopeId","data-v-0f8acad2"]]);export{_a as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.