1import{a as js,j as e,c as N,B as m,r as o,I as ee,aG as He,C as se,k as ys,l as ws,n as ks,o as Ss,eK as Ns,S as z,c_ as Y,Y as H,cG as R,a5 as Ts,a6 as Cs,a7 as Es,a8 as _s,a9 as As,aa as Is,cB as Ps,ev as Os}from"./index-DHupFTLc.js";import{S as f}from"./segmented-control-9PPoSRlZ.js";import{S as v}from"./switch-BhBgDfOy.js";import{u as Ce,s as Rs}from"./use-theme-Brv-gsKg.js";import{B as S}from"./badge-Brj2l-k3.js";import{S as be}from"./separator-BXjEOJIT.js";import{K as Ee,L as Be,M as le,H as Ls,S as Ms,b as Ds,C as Fs,c as zs}from"./design-system-BPIqk73O.js";import{C as $e}from"./check-idh7-zAH.js";import{C as Ws}from"./copy-CzqREA7z.js";import{C as qs}from"./confirm-dialog-BrhRLke8.js";import{D as Vs,a as Gs,b as Hs,c as Ie,d as Bs,e as $s}from"./dropdown-menu-DaFH69o1.js";import{I}from"./icon-button-Bp9G2uqP.js";import{T as W,b as Pe,a as Oe}from"./tag-pill-DYTgd3j0.js";import{L as P}from"./label-DdQuFMP7.js";import{T as ve}from"./trend-chart-TTwwd5tc.js";import{S as Ue}from"./select-DN1TwAr6.js";import{S as Us,a as q}from"./settings-group-DkYXtHw3.js";import{S as Xs}from"./sheet-Drxew4T0.js";import{S as ne}from"./skeleton-BcGlhAQ2.js";import{S as ie}from"./slider-Bng7vHMr.js";import{U as Ks}from"./umux-survey-DbDj6Axw.js";import{H as Ys}from"./help-tip-BmvWyImw.js";import{a as Zs,T as Qs}from"./tooltip-BoswWmh-.js";import{A as Js}from"./animated-number-BaEnHnhm.js";import{a as ea}from"./platform-tabs-C08CHLwq.js";import{c as Xe}from"./suggestion-diff-CesiZiSU.js";import{S as sa,R as Re,a as aa}from"./suggestion-review-CGKuNCwE.js";import{X as ta,j as ra,a as la,p as na,L as ia,q as oa,z as da,B as Le,D as ca,w as ha,s as ma,v as xa}from"./registry-CeUZbFX_.js";import{a as pa,b as ua,c as ga}from"./today-wrap-3Bl5TAJB.js";import{b as fa,A as ba,C as va,B as Me,a as ja}from"./carousel-slide-view-CnBwSxtl.js";import{M as ya}from"./mock-weekly-reviews-1t_JvskM.js";import{S as Z,a as wa,M as D}from"./mini-milestone-DF08X-ZE.js";import{u as ka,b as Sa,M as Na}from"./markdown-editor-CNIj46Vq.js";import{P as oe}from"./plus-CkPf3lc_.js";import{A as Ta}from"./arrow-right-DwgPtvd4.js";import{S as Q}from"./send-g7Fp-Un9.js";import{X as Ca}from"./x-Bx2a5qe_.js";import{L as Ea}from"./layers-4eeKIXqj.js";import{S as _a}from"./sparkles-BkzQVcfA.js";import{C as Aa}from"./chevron-down-C9_K4rj_.js";import"./PopoverPopup-BJ_KqE1K.js";import"./usePositioner-DastbNOU.js";import"./PopoverTrigger-BfTFbOLh.js";import"./useCompositeListItem-uA11-jRH.js";import"./circle-help-D9vh4E3F.js";import"./platform-logos-wVjNyMDK.js";import"./integration-icons-SIgBIfd-.js";import"./calendar-dJdluVAY.js";import"./layout-grid-DiC4cxrM.js";import"./list-Byy3pR_3.js";import"./trophy-B-ptmjwu.js";import"./volume-2-DbbcSbO5.js";import"./phone-Dy9Usj-s.js";import"./mail-C__1w36R.js";import"./video-DnLsIR47.js";import"./gift-DrdpE4Wf.js";import"./shield-DKEGaShM.js";import"./badge-check-DckZWTD_.js";import"./square-DSS0G8uB.js";import"./download-CqeJLScq.js";import"./trash-2-6gYqHk3n.js";import"./pencil-BxGLIeyY.js";import"./quote-DVWhWkHS.js";import"./thumbs-down-ClA6JrZD.js";import"./thumbs-up-D4Ka9INz.js";import"./eye-off-pfGPS85O.js";import"./eye-BiCX3asc.js";import"./globe-DGCd84m7.js";import"./clock-BExhvAgm.js";import"./target-DJNvjsVm.js";import"./flame-B7ibsIy6.js";import"./moon-Qj9SQNLP.js";import"./sun-DfcAoQat.js";import"./zap-GC98wxTW.js";import"./external-link-CPP8tThv.js";import"./search-DmlyjEmb.js";import"./menu-BW3jNYPm.js";import"./settings-ClO0Q6xM.js";import"./users-yq3EXsum.js";import"./user-R5hU_NnH.js";import"./lock-CR2a9Gbm.js";import"./mic-DjfB-kGs.js";import"./play-B7EVojdE.js";import"./minus-BNEd1xaa.js";import"./repeat-2-B-GMGX1U.js";import"./bookmark-DgwO_zy9.js";import"./message-circle-BEltwPSL.js";import"./heart-VMLp9loD.js";import"./share-2-k7_fsTwj.js";import"./ellipsis-vertical-6P6AtC0r.js";import"./ellipsis-8-3zECV4.js";import"./arrow-up-right-Cv6Yjl9D.js";import"./arrow-up-BWBbxAZG.js";import"./arrow-left-Vplc005f.js";import"./chevron-up-DiUi1ayE.js";import"./chevron-right-CKDBnihS.js";import"./chevron-left-x42Yn1zA.js";import"./index-DXyr671v.js";import"./marked.esm-C75jiMLd.js";import"./undo-2-DK1lmfml.js";import"./redo-2-BAJlS_gA.js";const Ia=[["polyline",{points:"22 12 16 12 14 15 10 15 8 12 2 12",key:"o97t9d"}],["path",{d:"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",key:"oot6mr"}]],Ke=js("Inbox",Ia);function c({id:s,kicker:a,title:t,description:l,children:r}){return e.jsxs("section",{id:s,className:"scroll-mt-24",children:[e.jsxs("div",{className:"mb-4",children:[e.jsx(Ee,{children:a}),e.jsx("h2",{className:"mt-1.5 font-display text-3xl leading-tight text-text",children:t}),l&&e.jsx("p",{className:"mt-2 max-w-2xl text-sm leading-relaxed text-text-secondary",children:l})]}),e.jsx("div",{className:"rounded-[var(--radius-card)] border border-border bg-surface p-6 shadow-[var(--shadow-sm)]",children:r})]})}function i({children:s,className:a}){return e.jsx("h3",{className:N("mb-3 font-code text-caption uppercase tracking-wider text-text-tertiary",a),children:s})}function u({className:s,...a}){return e.jsx("div",{className:N("grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4",s),...a}
1)}function n({label:s,children:a,className:t,align:l="start"}){return e.jsxs("div",{className:N("flex flex-col gap-2.5",l==="center"?"items-center":"items-start",t),children:[e.jsx("div",{className:"flex min-h-[44px] flex-wrap items-center gap-3",children:a}),s!=null&&e.jsx(h,{children:s})]})}function Ye({children:s,className:a}){return e.jsx("div",{className:N("flex items-baseline justify-between gap-6 border-b border-border pb-3 last:border-0",a),children:s})}function h({children:s,className:a}){return e.jsx("span",{className:N("font-code text-caption text-text-tertiary",a),children:s})}function T({value:s,className:a}){return e.jsx("span",{className:N("font-code text-micro text-text-tertiary",a),children:s&&s.length>0?s:" "})}function y({children:s}){return e.jsx("code",{className:"rounded-[var(--radius-sm)] bg-[var(--surface-inset)] px-1.5 py-0.5 font-code text-[12px] text-text",children:s})}function w({goal:s,children:a}){return e.jsxs("div",{className:"grid grid-cols-[1fr_auto] items-center gap-4 py-2.5",children:[e.jsx("span",{className:"text-sm text-text",children:s}),e.jsx("div",{className:"flex flex-wrap items-center justify-end gap-2",children:a})]})}function De({id:s,heading:a,children:t}){return e.jsxs("div",{id:s,className:"scroll-mt-24",children:[e.jsx(i,{children:a}),t]})}function Pa(){const[s,a]=o.useState("week");return e.jsx(f,{size:"sm","aria-label":"Example view switcher",value:s,onValueChange:a,options:[{value:"days",label:"Days"},{value:"week",label:"Week"},{value:"month",label:"Month"}]})}const Oa=[{token:"--radius-xs",note:"sharp"},{token:"--radius-control",note:"default"},{token:"--radius-card",note:"soft"},{token:"--radius-full",note:"pill"}],Ra=[{token:"--shadow-xs",note:"flat"},{token:"--shadow-sm",note:"resting"},{token:"--shadow-md",note:"raised"},{token:"--shadow-xl",note:"floating"}],Fe=`I want to add a new UI element to the Stanley dashboard: <describe it â what it is, where it's used, the states/variants it needs>. 2 3Follow our design-system house rules (dashboard/DESIGN.md): 41. Reuse first â if an existing primitive in dashboard/app/components/ui/ fits, use it (Button, Badge, Card, Input, Switch, SegmentedControlâ¦). Don't re-implement one inline. 52. If nothing fits, build it atomically from existing tokens in dashboard/app/styles/app.css (semantic utilities bg-surface / text-text / border-border, plus the radius/shadow vars) â no magic hex or pixel literals a token already covers. 63. Theme parity â it must work in BOTH light and dark. Define any new token for :root and html[data-theme="dark"]. 74. Accessibility â focus-visible ring via ring-primary-glow, and respect prefers-reduced-motion. 85. If you add a new token or shared primitive, document it in dashboard/DESIGN.md and add it to the showcase at /hq/design-system. 9 10Show me the component, where it lives, and any new tokens you introduced.`;function La(){const[s,a]=o.useState(!1);o.useEffect(()=>{if(!s)return;const l=setTimeout(()=>a(!1),1500);return()=>clearTimeout(l)},[s]);function t(){navigator.clipboard.writeText(Fe).then(()=>a(!0),()=>{})}return e.jsxs("div",{className:"relative rounded-[var(--radius-card)] border border-border bg-[var(--surface-inset)] p-4 pt-14",children:[e.jsxs(m,{type:"button",variant:"outline",size:"sm",onClick:t,className:"absolute top-3 right-3 gap-1.5","aria-label":"Copy prompt to clipboard",children:[s?e.jsx($e,{className:"h-3.5 w-3.5"}):e.jsx(Ws,{className:"h-3.5 w-3.5"}),s?"Copied":"Copy prompt"]}),e.jsx("pre",{className:"overflow-x-auto font-code text-[12px] leading-relaxed whitespace-pre-wrap text-text-secondary",children:Fe})]})}function Ma(){return e.jsx(c,{id:"tldr",kicker:"Start here",title:"TL;DR",description:"The whole system in one card. Three ideas, then watch them land on real components â and a prompt you can paste to get new UI built to match.",children:e.jsxs("div",{className:"space-y-12",children:[e.jsxs("div",{children:[e.jsx(i,{children:"The mental model"}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-3",children:[e.jsxs("div",{className:"rounded-[var(--radius-md)] border border-border bg-[var(--surface-inset)] p-4",children:[e.jsx("p",{className:"text-sm font-medium text-text",children:"Tokens are named values"}),e.jsxs("p",{className:"mt-1.5 text-[13px] leading-relaxed text-text-secondary",children:["Reach for ",e.jsx(y,{children:"text-primary"}),", not a raw hex. Change the value once and it updates everywhere."]})]}),e.jsxs("div",{className:"rounded-[var(--radius-md)] border border-border bg-[var(--surface-inset)] p-4",children:[e.jsx("p",{className:"text-sm font-medium text-text",children:"Names adapt to the theme"}),e.jsxs("p",{className:"mt-1.5 text-[13px] leading-relaxed text-text-secondary",children:[e.jsx(y,{children:"bg-surface"})," and ",e.jsx(y,{children:"text-text"})," handle light and dark for you â no theme branching."]})]}),e.jsxs("div",{className:"rounded-[var(--radius-md)] border border-border bg-[var(--surface-inset)] p-4",children:[e.jsx("p",{className:"text-sm font-medium text-text",children:"Components come assembled"}),e.jsx("p",{className:"mt-1.5 text-[13px] leading-relaxed text-text-secondary",children:"A component is just tokens, pre-wired. Drop one in and it already looks right:"}),e.jsx("div",{className:"mt-2.5",children:e.jsx(m,{size:"sm",children:"Save changes"})})]})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Watch one token change the UI"}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsxs("p",{className:"mb-4 max-w-2xl text-[13px] leading-relaxed text-text-secondary",children:["Same real ",e.jsx(y,{children:"<Button>"})," four times â only the corner radius changes. Every button and input uses"," ",e.jsx(y,{children:"--radius-control"}),", so changing that one value restyles all of them at once."]}),e.jsx(u,{className:"sm:grid-cols-4",children:Oa.map(({token:s,note:a})=>e.jsx(n,{align:"center",label:`${s} · ${a}`,children:e.jsx(m,{style:{borderRadius:`var(${s})`},children:"Button"})},s))})]}),e.jsxs("div",{children:[e.jsx("p",{className:"mb-4 max-w-2xl text-[13px] leading-relaxed text-text-secondary",children:"Elevation is how far off the page something feels. Flat surfaces sit low; menus and modals float highest."}),e.jsx(u,{className:"sm:grid-cols-4",children:Ra.map(({token:s,note:a})=>e.jsx(n,{align:"center",label:`${s} · ${a}`,children:e.jsx("div",{className:"h-16 w-24 rounded-[var(--radius-card)] border border-border bg-surface",style:{boxShadow:`var(${s})`}})},s))})]}),e.jsxs("div",{children:[e.jsx("p",{className:"mb-4 max-w-2xl text-[13px] leading-relaxed text-text-secondary",children:"Color has jobs. One accent for what matters, neutral chrome for everything else, and a fixed set for status."}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx(S,{children:"Draft"}),e.jsx(S,{variant:"success",children:"Published"}),e.jsx(S,{variant:"warning",children:"Scheduled"}),e.jsx(S,{variant:"destructive",children:"Failed"})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3",children:[e.jsx(v,{id:"tldr-color-on",defaultChecked:!0,label:"On"}),e.jsx(v,{id:"tldr-color-off",label:"Off"}),e.jsx(m,{variant:"link",className:"h-auto p-0",children:"A primary link"}),e.jsx("span",{className:"text-sm text-text",children:"Body text"})]}),e.jsx(h,{children:"primary (iris) = your one accent · surface / text = neutral chrome · success / warning / error = status only"})]})]})]})]}),e.jsx(De,{id:"tldr-where",heading:"Where to use what",children:e.jsxs("div",{className:"divide-y divide-border",children:[e.jsx(w,{goal:"Page background",children:e.jsx(y,{children:"bg-bg"})}
10),e.jsx(w,{goal:"A card or panel surface",children:e.jsx(y,{children:"bg-surface border-border"})}),e.jsxs(w,{goal:"Body text / muted text",children:[e.jsx(y,{children:"text-text"}),e.jsx(y,{children:"text-text-secondary"})]}),e.jsx(w,{goal:"The main action on a screen",children:e.jsx(m,{size:"sm",children:"Save"})}),e.jsx(w,{goal:"A secondary action",children:e.jsx(m,{variant:"outline",size:"sm",children:"Cancel"})}),e.jsx(w,{goal:"A subtle / low-emphasis action",children:e.jsx(m,{variant:"ghost",size:"sm",children:"Skip"})}),e.jsxs(w,{goal:"A status pill",children:[e.jsx(S,{variant:"success",children:"Live"}),e.jsx(S,{variant:"warning",children:"Pending"}),e.jsx(S,{variant:"destructive",children:"Failed"})]}),e.jsxs(w,{goal:"The one accent / brand color",children:[e.jsx(y,{children:"text-primary"}),e.jsx(y,{children:"bg-primary"})]}),e.jsx(w,{goal:"Rounded corners on a control",children:e.jsx(y,{children:"rounded-[var(--radius-control)]"})}),e.jsx(w,{goal:"Rounded corners on a card",children:e.jsx(y,{children:"rounded-[var(--radius-card)]"})}),e.jsx(w,{goal:"A divider",children:e.jsx("div",{className:"w-20",children:e.jsx(be,{})})}),e.jsx(w,{goal:"Toggle something on or off",children:e.jsx(v,{id:"tldr-where-toggle",defaultChecked:!0})}),e.jsx(w,{goal:"Pick one of a few options",children:e.jsx(Pa,{})})]})}),e.jsxs(De,{id:"tldr-ask",heading:"Need a new element? Ask the agent",children:[e.jsx("p",{className:"mb-4 max-w-2xl text-[13px] leading-relaxed text-text-secondary",children:"You don't have to hand-build anything. Describe what you need to the coding agent and paste the prompt below â it encodes our house rules so the result fits the system and ships straight to this page."}),e.jsx(La,{})]})]})})}const Ze=[{name:"--gray-0",label:"0"},{name:"--gray-25",label:"25"},{name:"--gray-50",label:"50"},{name:"--gray-100",label:"100"},{name:"--gray-150",label:"150"},{name:"--gray-200",label:"200"},{name:"--gray-300",label:"300"},{name:"--gray-400",label:"400"},{name:"--gray-500",label:"500"},{name:"--gray-600",label:"600"},{name:"--gray-700",label:"700"},{name:"--gray-800",label:"800"},{name:"--gray-900",label:"900"},{name:"--gray-950",label:"950"}],Qe=[{name:"--iris-100",label:"100"},{name:"--iris-300",label:"300"},{name:"--iris-500",label:"500"},{name:"--iris-600",label:"600"},{name:"--iris-700",label:"700"},{name:"--iris-soft",label:"soft"},{name:"--iris-faint",label:"faint"},{name:"--iris-ring",label:"ring"}],Je=[{name:"--green-500",label:"green-500"},{name:"--green-soft",label:"green-soft"},{name:"--amber-500",label:"amber-500"},{name:"--amber-soft",label:"amber-soft"},{name:"--red-500",label:"red-500"},{name:"--red-soft",label:"red-soft"}],es=[{name:"--color-bg",label:"bg"},{name:"--color-surface",label:"surface"},{name:"--color-surface-hover",label:"surface-hover"},{name:"--color-primary",label:"primary"},{name:"--color-primary-hover",label:"primary-hover"},{name:"--color-primary-muted",label:"primary-muted"},{name:"--color-primary-foreground",label:"primary-foreground"},{name:"--color-primary-glow",label:"primary-glow"},{name:"--color-text",label:"text"},{name:"--color-text-secondary",label:"text-secondary"},{name:"--color-text-tertiary",label:"text-tertiary"},{name:"--color-success",label:"success"},{name:"--color-error",label:"error"},{name:"--color-warning",label:"warning"}],ss=[{name:"--border-subtle",label:"subtle"},{name:"--border-default",label:"default"},{name:"--border-strong",label:"strong"},{name:"--border-inverse",label:"inverse"}],as=[{name:"--radius-xs",label:"xs"},{name:"--radius-sm",label:"sm"},{name:"--radius-md",label:"md"},{name:"--radius-lg",label:"lg"},{name:"--radius-xl",label:"xl"},{name:"--radius-2xl",label:"2xl"},{name:"--radius-3xl",label:"3xl"},{name:"--radius-full",label:"full"},{name:"--radius-control",label:"control"},{name:"--radius-card",label:"card"},{name:"--radius-surface",label:"surface"},{name:"--radius-pill",label:"pill"}],ts=[{name:"--color-hq-paper",label:"paper"},{name:"--color-hq-paper-cool",label:"paper-cool"},{name:"--color-hq-paper-warm",label:"paper-warm"},{name:"--color-hq-fill",label:"fill"}],rs=[{name:"--color-hq-line",label:"line"},{name:"--color-hq-line-strong",label:"line-strong"},{name:"--color-hq-line-soft",label:"line-soft"},{name:"--color-hq-line-warm",label:"line-warm"},{name:"--color-hq-line-cool",label:"line-cool"},{name:"--color-hq-line-quiet",label:"line-quiet"}],ls=[{name:"--color-hq-ink",label:"ink"},{name:"--color-hq-ink-muted",label:"ink-muted"},{name:"--color-hq-ink-faint",label:"ink-faint"}],ns=[{name:"--radius-hq-chip",label:"hq-chip"},{name:"--radius-hq-badge",label:"hq-badge"},{name:"--radius-hq-bar",label:"hq-bar"}],is=[{name:"--text-hq-9",label:"hq-9"},{name:"--text-hq-10-5",label:"hq-10-5"},{name:"--text-hq-11-5",label:"hq-11-5"},{name:"--text-hq-12-5",label:"hq-12-5"},{name:"--text-hq-13-5",label:"hq-13-5"},{name:"--text-hq-14-5",label:"hq-14-5"},{name:"--text-hq-15",label:"hq-15"},{name:"--text-hq-22",label:"hq-22"}],os=[{name:"--shadow-xs",label:"shadow-xs"},{name:"--shadow-sm",label:"shadow-sm"},{name:"--shadow-md",label:"shadow-md"},{name:"--shadow-lg",label:"shadow-lg"},{name:"--shadow-xl",label:"shadow-xl"},{name:"--shadow-inset",label:"shadow-inset"},{name:"--elevation-card",label:"elevation-card"},{name:"--elevation-popover",label:"elevation-popover"}],ds=[{name:"--ease-standard",label:"ease-standard"},{name:"--ease-out",label:"ease-out"},{name:"--ease-in",label:"ease-in"}],cs=[{name:"--dur-instant",label:"instant"},{name:"--dur-fast",label:"fast"},{name:"--dur-base",label:"base"},{name:"--dur-slow",label:"slow"},{name:"--dur-slowest",label:"slowest"}],hs=[{name:"--press-scale",label:"press-scale"},{name:"--hover-lift",label:"hover-lift"}],ms=[{name:"--font-sans",label:"font-sans"},{name:"--font-serif",label:"font-serif"},{name:"--font-mono",label:"font-mono"}],je=[{name:"--text-body",label:"text-body",use:"default app body"},{name:"--text-caption",label:"text-caption",use:"labels, meta"},{name:"--text-micro",label:"text-micro",use:"timestamps, badges"}],ye=[{name:"--text-display",label:"text-display",use:"display headers"},{name:"--text-title",label:"text-title",use:"page & hero titles"}],xs=[{name:"--z-index-base",label:"z-base",use:"in-flow lift â cards over grain, labels over fills"},{name:"--z-index-sticky",label:"z-sticky",use:"sticky headers and rails, drag affordances"},{name:"--z-index-sheet",label:"z-sheet",use:"focus-mode sheets and their backdrops"},{name:"--z-index-dialog",label:"z-dialog",use:"dialogs â the topmost interruption, over a sheet"},{name:"--z-index-popover",label:"z-popover",use:"menus, tooltips, autocomplete â portal out, so above both"},{name:"--z-index-toast",label:"z-toast",use:"toasts and the command palette â above everything"}],Da=[...Ze,...Qe,...Je,...es,...ss,...as,...os,...ds,...cs,...hs,...ms,...je,...ye,...xs,...ts,...rs,...ls,...ns,...is].map(s=>s.name);function Fa({resolved:s}){return e.jsxs(e.Fragment,{children:[e.jsx(za,{resolved:s}),e.jsx(qa,{resolved:s}),e.jsx(Ha,{}),e.jsx(Va,{resolved:s}),e.jsx(Ba,{resolved:s}),e.jsx(Ua,{resolved:s}),e.jsx(Xa,{resolved:s}),e.jsx(Ka,{resolved:s}),e.jsx(Ya,{})]})}function L({token:s,resolved:a,className:t}){return e.jsxs("div",{className:"flex min-w-0 flex-col gap-1.5",children:[e.jsx("div",{className:N("h-12 rounded-[var(--radius-md)] border border-border",t),style:{background:`var(${s.name})`}}),e.jsx(h,{className:"truncate text-text-secondary",children:s.label}),e.jsx(T,{value:a[s.name]})]})}function za({resolved:s}){return e.jsx(c,{id:"colors",kicker:"Foundations · Color",title:"Color",description:"One
10cool-gray ramp does ~95% of the work; Iris is the single accent, reserved for the rare stand-out. The semantic tokens flip between light and dark â toggle the theme to watch them invert.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Gray ramp · fixed across themes"}),e.jsx("div",{className:"grid grid-cols-7 gap-2.5 sm:grid-cols-14",children:Ze.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Iris accent · fixed"}),e.jsx(u,{className:"sm:grid-cols-4 md:grid-cols-7",children:Qe.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Semantic accents · fixed"}),e.jsx(u,{className:"sm:grid-cols-3 md:grid-cols-6",children:Je.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Theme semantics · flip light â dark"}),e.jsx(u,{className:"sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",children:es.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]})]})})}const Wa=[{cls:"text-5xl",label:"text-5xl",px:"48px"},{cls:"text-4xl",label:"text-4xl",px:"36px"},{cls:"text-3xl",label:"text-3xl",px:"30px"},{cls:"text-2xl",label:"text-2xl",px:"24px"},{cls:"text-xl",label:"text-xl",px:"20px"},{cls:"text-lg",label:"text-lg",px:"18px"},{cls:"text-base",label:"text-base",px:"16px"},{cls:"text-sm",label:"text-sm",px:"14px"},{cls:"text-xs",label:"text-xs",px:"12px"}];function de({cls:s,fontCls:a,caption:t}){return e.jsxs(Ye,{children:[e.jsx("span",{className:N(s,a,"whitespace-nowrap text-text"),children:"The spread of knowledge"}),e.jsx(h,{className:"shrink-0",children:t})]})}const ze=[{key:"sans",label:"Sans",cls:"font-sans"},{key:"serif",label:"Serif",cls:"font-display"},{key:"mono",label:"Mono",cls:"font-code"}];function qa({resolved:s}){const[a,t]=o.useState("sans"),l=ze.find(r=>r.key===a)?.cls??"font-sans";return e.jsx(c,{id:"typography",kicker:"Foundations · Type",title:"Typography",description:"Inter for the interface, Lora for display headings (.font-display), Geist Mono for metadata (.font-code, kickers).",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsx(i,{children:"Families"}),e.jsxs("div",{className:"space-y-5",children:[e.jsx(ce,{name:"--font-serif · .font-display",value:s["--font-serif"],className:"font-display text-4xl text-text"}),e.jsx(ce,{name:"--font-sans · body",value:s["--font-sans"],className:"font-sans text-2xl text-text"}),e.jsx(ce,{name:"--font-mono · .font-code",value:s["--font-mono"],className:"font-code text-xl text-text"})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Roles · 10â13px"}),e.jsxs("p",{className:"mb-3 text-xs text-text-secondary",children:["The three sizes Tailwind's scale skips. 12px is ",e.jsx(h,{children:"text-xs"})," ","and 14px is ",e.jsx(h,{children:"text-sm"})," â use those directly. Reach for a role here instead of writing ",e.jsx(h,{children:"text-[11px]"}),"."]}),e.jsx("div",{className:"space-y-3",children:je.map(r=>e.jsx(de,{cls:r.label,fontCls:l,caption:`${r.label} · ${s[r.name]??""} · ${r.use}`},r.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Display roles · above the Tailwind scale"}),e.jsxs("p",{className:"mb-3 text-xs text-text-secondary",children:["The two >16px sizes Tailwind lacks. Weight and tracking ride the token, so the utility is the whole heading role â headings are sans + semibold by default; pair ",e.jsx(h,{children:"font-display"})," (Lora) only for display moments."]}),e.jsx("div",{className:"space-y-3",children:ye.map(r=>e.jsx(de,{cls:r.label,fontCls:l,caption:`${r.label} · ${s[r.name]??""} · ${r.use}`},r.name))})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between gap-4",children:[e.jsx(i,{className:"mb-0",children:"Tailwind scale · 12px+"}),e.jsx(f,{"aria-label":"Preview font",options:ze.map(r=>({value:r.key,label:r.label})),value:a,onValueChange:t,tabClassName:"text-xs font-medium"})]}),e.jsx("div",{className:"space-y-3",children:Wa.map(r=>e.jsx(de,{cls:r.cls,fontCls:l,caption:`${r.label} · ${r.px}`},r.cls))})]}),e.jsxs("p",{className:"font-code text-micro text-text-tertiary",children:[ms.length," family +"," ",je.length+ye.length," ramp tokens resolved live from app.css"]})]})})}function Va({resolved:s}){return e.jsx(c,{id:"layers",kicker:"Foundations · Layers",title:"Stacking",description:"Six global layers. Popovers sit above modals, not below â they portal out to <body>, so a menu opened inside a dialog has to clear it. Ordering siblings inside one component is a local stacking context, not a layer: small raw z-values are right there.",children:e.jsx("div",{className:"space-y-3",children:xs.map(a=>e.jsxs(Ye,{children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx(h,{className:"text-text",children:a.label}),e.jsx("p",{className:"mt-0.5 text-caption text-text-secondary",children:a.use})]}),e.jsx(T,{value:s[a.name]})]},a.name))})})}function ce({name:s,value:a,className:t}){return e.jsxs("div",{children:[e.jsx("div",{className:t,children:"The quick brown fox jumps"}),e.jsxs("div",{className:"mt-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-0.5",children:[e.jsx(h,{className:"text-text-secondary",children:s}),e.jsx(T,{value:a})]})]})}const Ga=[1,2,3,4,6,8,12,16,24];function Ha(){return e.jsx(c,{id:"spacing",kicker:"Foundations · Spacing",title:"Spacing",description:"Tailwind's 4px base grid â no separate spacing tokens, the utility number IS the scale. White space is treated as a material: when in doubt, add more.",children:e.jsx("div",{className:"space-y-3",children:Ga.map(s=>e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs(h,{className:"w-24 shrink-0 text-text-secondary",children:["p-",s,"/gap-",s," · ",s*4,"px"]}),e.jsx("div",{className:"h-3.5 rounded-[var(--radius-xs)] bg-primary/70",style:{width:`${s*4}px`}})]},s))})})}function Ba({resolved:s}){return e.jsx(c,{id:"radii",kicker:"Foundations · Shape",title:"Radii & borders",description:"Soft corners, never sharp. Separation prefers a hairline (often 0.5px) or a material change over a heavy line.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Corner radii"}),e.jsx(u,{className:"grid-cols-3 sm:grid-cols-4 md:grid-cols-6",children:as.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"h-16 w-16 border border-border bg-[var(--surface-sunken)]",style:{borderRadius:`var(${a.name})`}}),e.jsx(h,{className:"text-text-secondary",children:a.label}),e.jsx(T,{value:s[a.name]})]},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Border weights"}),e.jsx(u,{className:"sm:grid-cols-4",children:ss.map(a=>e.jsxs("div",{className:"flex flex-col gap-1.5",children:[e.jsx("div",{className:"h-12 rounded-[var(--radius-md)] bg-surface",style:{border:`2px solid var(${a.name})`}}),e.jsx(h,{className:"text-text-secondary",children:a.label}),e.jsx(T,{value:s[a.name]})]},a.name))})]})]})})}const $a={"--text-hq-9":"text-hq-9","--text-hq-10-5":"text-hq-10-5","--text-hq-11-5":"text-hq-11-5","--text-hq-12-5":"text-hq-12-5","--text-hq-13-5":"text-hq-13-5","--text-hq-14-5":"text-hq-14-5","--text-hq-15":"text-hq-15","--text-hq-22":"text-hq-22"};function Ua({resolved:s}){return e.jsx(c,{id:"hq",kicker:"Foundations · Operator",title:"The /hq palette",description:"app.css holds two namespaces. This is the operator one â warm paper, true-neutral ink, sharp corners â and /hq/vitals is its canonical page. Every value is verbatim from the tree, so adopting a token preserves the pixel it replaced. These are light-locked on purpose: unlike the theme semantics above, they do NOT flip with the toggle.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Surfaces"}),e.jsx(u,{className:"sm:grid-cols-4",children:ts.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Lines"}),e.jsx(u,{className:"sm:grid-cols-3 md:grid-cols-6",children:rs.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Ink"}),e.jsx(u,{className:"sm:grid-cols-3",children:ls.map(a=>e.jsx(L,{token:a,resolved:s},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Sharp chrome · cards reuse --radius-xs (6px) and --radius-sm (8px)"}),e.jsx(u,{className:"grid-cols-3 sm:grid-cols-6",children:ns.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"h-16 w-16 border border-hq-line bg-hq-fill",style:{borderRadius:`var(${a.name})`}}),e.jsx(h,{className:"text-text-secondary",children:a.label}),e.jsx(T,{value:s[a.name]})]},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Dense type · px matches reuse the app ramp (micro/caption/xs/body/sm/title/display)"}),e.jsx("div",{className:"rounded-[var(--radius-xs)] border border-hq-line bg-hq-paper px-4 py-2",children:is.map(a=>e.jsxs("div",{className:"flex items-baseline justify-between gap-4 border-hq-line-soft border-b py-2 last:border-b-0",children:[e.jsx("span",{className:N("font-mono text-hq-ink",$a[a.name]),children:"1,284 tenants active · 7d"}),e.jsxs("span",{className:"flex items-baseline gap-3",children:[e.jsx(h,{className:"text-text-secondary",children:a.label}),e.jsx(T,{value:s[a.name]})]})]},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"In context"}),e.jsxs("div",{className:"rounded-[var(--radius-xs)] border border-hq-line bg-hq-paper p-4",children:[e.jsx("p",{className:"font-mono text-caption text-hq-ink-faint uppercase",children:"Operator card"}),e.jsx("p",{className:"mt-1 font-mono text-2xl text-hq-ink tabular-nums",children:"1,284"}),e.jsx("p",{className:"mt-1 font-mono text-caption text-hq-ink-muted",children:"tenants active · 7d"}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-hq-bar bg-hq-fill",children:e.jsx("div",{className:"h-full w-2/3 bg-hq-ink"})})]})]})]})})}function Xa({resolved:s}){return e.jsx(c,{id:"elevation",kicker:"Foundations · Elevation",title:"Elevation",description:"Diffuse, low-contrast, layered shadows. They whisper â surfaces lift, they don't shout.",children:e.jsx(u,{className:"gap-6 sm:grid-cols-2 md:grid-cols-4",children:os.map(a=>e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx("div",{className:"h-20 rounded-[var(--radius-lg)] bg-surface",style:{boxShadow:`var(${a.name})`}}),e.jsxs("div",{className:"min-w-0",children:[e.jsx(h,{className:"block text-text-secondary",children:a.label}),e.jsx(T,{value:s[a.name],className:"mt-0.5 line-clamp-2 break-all"})]})]},a.name))})})}function he({label:s,value:a}){return e.jsxs("div",{className:"rounded-[var(--radius-md)] border border-border bg-[var(--surface-sunken)] px-3 py-2.5",children:[e.jsx(h,{className:"block text-text-secondary",children:s}),e.jsx(T,{value:a,className:"mt-0.5 block break-all"})]})}function Ka({resolved:s}){return e.jsx(c,{id:"motion",kicker:"Foundations · Motion",title:"Motion",description:"Calm and precise: 80â360ms, standard / out curves, no bounce or overshoot. Hover the tile to feel the press scale and lift.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Easing"}),e.jsx(u,{className:"sm:grid-cols-3",children:ds.map(a=>e.jsx(he,{label:a.label,value:s[a.name]},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Duration"}),e.jsx(u,{className:"grid-cols-2 sm:grid-cols-3 md:grid-cols-5",children:cs.map(a=>e.jsx(he,{label:a.label,value:s[a.name]},a.name))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Interaction"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[hs.map(a=>e.jsx(he,{label:a.label,value:s[a.name]},a.name)),e.jsx("button",{type:"button",className:"rounded-[var(--radius-control)] border border-border bg-surface px-4 py-2.5 text-sm font-medium text-text shadow-[var(--shadow-sm)] transition-transform duration-[var(--dur-fast)] ease-[var(--ease-out)] hover:-translate-y-
10px active:scale-[var(--press-scale)]",children:"Press & hover me"})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Effects"}),e.jsx("div",{className:"flex flex-wrap items-center gap-6",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"stanley-shimmer relative flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 ring-1 ring-primary/20",children:e.jsx("img",{src:"/stanley-mascot.png",alt:"","aria-hidden":"true",className:"h-full w-full object-cover"})}),e.jsx(h,{className:"text-text-secondary",children:".stanley-shimmer · diagonal sweep on hover"})]})})]})]})})}function F({className:s,label:a,desc:t}){return e.jsxs("div",{className:N("flex h-28 flex-col justify-end rounded-[var(--radius-lg)] p-3.5",s),children:[e.jsx(h,{className:"text-text",children:a}),t&&e.jsx("span",{className:"mt-0.5 font-code text-[10px] leading-snug text-text-secondary",children:t})]})}function Ya(){const[s,a]=o.useState("active");return e.jsx(c,{id:"materials",kicker:"Foundations · Material",title:"Materials",description:"Surfaces separate by material â glass, panels, dot-grid texture â rather than by hue or heavy borders. Shown over a dotted backdrop so the blur reads.",children:e.jsxs("div",{className:"relative overflow-hidden rounded-[var(--radius-lg)] p-6",style:{backgroundColor:"var(--surface-sunken)",backgroundImage:"radial-gradient(circle at center, var(--border-strong) 1.1px, transparent 1.2px)",backgroundSize:"16px 16px"},children:[e.jsxs("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3",children:[e.jsx(F,{className:"stanley-glass",label:".stanley-glass"}),e.jsx(F,{className:"stanley-glass-strong",label:".stanley-glass-strong"}),e.jsx(F,{className:"stanley-card",label:".stanley-card"}),e.jsx(F,{className:"stanley-panel",label:".stanley-panel"}),e.jsx(F,{className:"stanley-panel-strong",label:".stanley-panel-strong"}),e.jsx(F,{className:"stanley-panel stanley-panel-bare",label:".stanley-panel-bare",desc:"border only"})]}),e.jsxs("div",{className:"mt-4 flex flex-wrap items-center gap-4",children:[e.jsx(f,{"aria-label":"Material state",options:[{value:"active",label:"Active"},{value:"idle",label:"Idle"}],value:s,onValueChange:a,tabClassName:"text-xs font-medium"}),e.jsxs(Ee,{className:"inline-flex items-center gap-2",children:[e.jsx(Be,{})," .stanley-live-dot + .stanley-kicker"]})]})]})})}function Za(s){return s>=1e9?`${me(s/1e9)}B`:s>=1e6?`${me(s/1e6)}M`:s>=1e3?`${me(s/1e3)}K`:String(s)}function me(s){return(Math.round(s*10)/10).toString()}function O(s,a){const t=Za(a);switch(s){case"followers":return`${t} followers`;case"views_single_post":return`${t} views on one post`;default:return`${t} views`}}const Qa=[100,200,500,1e3,5e3,1e4,25e3,5e4,1e5,25e4,5e5,1e6,5e6,1e7],Ja=[1e4,5e4,1e5,2e5,5e5,1e6,2e6,5e6,1e7,25e6,5e7,1e8,1e9],et=[1e4,5e4,1e5,5e5,
101e6,2e6,5e6,1e7,25e6,5e7,1e8],We={"on-track":"On track",breakout:"Breakout","needs-shift":"Needs a shift",quiet:"Quiet week"},ps=["Working","Not Working","Strategy Check","Next Week"],st=2;function V(s){return s.replace(/[ââ]/g,"-")}function qe(s){return s.replace(new RegExp("(?<!\\*)\\*(?!\\*)([^*\\n]+?)\\*(?!\\*)","g"),"**$1**")}function at(s){const a=s.trim(),t=/^(\*{1,2})([\s\S]+?)\1$/.exec(a);return t?t[2].trim():a}function we(s){return/^https?:\/\/\S+$/.test(s.trim())}const ke=/\[([^\]]+)\]\((https?:\/\/[^)\s]*)\)/g;function xe(s){return s.replace(ke,"$1")}function tt(s){return ke.lastIndex=0,ke.exec(s)?.[2]}function rt(s){const a=[];let t=null,l=null;const r=()=>{l&&l.text.trim().length>0&&(l.text=l.text.trim(),a.push(l)),l=null};for(const p of s.split(` 11`)){const x=p.trimEnd(),j=/^##\s+(.+?)\s*$/.exec(x);if(j){r(),t=ps.find(g=>g.toLowerCase()===j[1].trim().toLowerCase())??null;continue}if(x.trim().length===0){r();continue}if(we(x))continue;const d=/^[-*]\s+(.*)$/.exec(x.trim());if(d){r(),l={heading:t,bullet:!0,text:d[1]};continue}l?l.text+=` ${x.trim()}`:l={heading:t,bullet:!1,text:x.trim()}}return r(),a}function lt(s){const a=s.replace(/\r\n/g,` 12`).trim(),t=/^---\n([\s\S]*?)\n---\s*\n?/.exec(a);if(!t)return null;const l={};for(const b of t[1].split(` 13`)){const A=b.indexOf(":");if(A<=0)continue;const M=b.slice(A+1).trim().replace(/^"(.*)"$/,"$1").replace(/^'(.*)'$/,"$1");l[b.slice(0,A).trim()]=M}const r=V(l.title??"").trim();if(!r)return null;const p=l.verdict;if(!Object.hasOwn(We,p))return null;const x=l.hero&&l.hero_label?{value:l.hero,label:V(l.hero_label)}
13:null,j=(l.intro??"").trim().replace(/\\n/g,` 14`),d=a.slice(t[0].length),g=rt(d),C=g.findIndex(b=>b.heading!==null),k=(C===-1?g:g.slice(0,C)).find(b=>!we(b.text)),E=k?qe(V(xe(k.text))):"";if(!E)return null;let te="";const U=g.filter(b=>b.heading!==null&&!we(b.text)),X=U[U.length-1];X&&!X.bullet&&(te=qe(V(at(xe(X.text)))));const vs=te?U.filter(b=>b!==X):U,re=[],_e=[];for(const b of ps){const A=vs.filter(K=>K.heading===b),M=A.slice(0,st).map(K=>{const Ae=tt(K.text);return{text:V(xe(K.text)),...Ae?{url:Ae}:{}}});A.length>M.length&&_e.push({heading:b,dropped:A.length-M.length}),M.length>0&&re.push({heading:b,items:M})}return re.length<2?null:{title:r,verdict:p,verdictLabel:We[p],hero:x,intro:j,tldr:E,sections:re,closing:te,droppedItems:_e}}const nt=420,it=["default","destructive","outline","ghost","link"],ot=["default","success","destructive","warning","outline","secondary"];function dt(){return e.jsxs(e.Fragment,{children:[e.jsx(Gt,{}),e.jsx(Ht,{}),e.jsx(Bt,{}),e.jsx($t,{}),e.jsx(Xt,{}),e.jsx(Kt,{}),e.jsx(Yt,{}),e.jsx(Zt,{}),e.jsx(Qt,{}),e.jsx(Jt,{}),e.jsx(er,{}),e.jsx(sr,{}),e.jsx(tr,{}),e.jsx(rr,{}),e.jsx(Et,{}),e.jsx(lr,{}),e.jsx(nr,{}),e.jsx(or,{}),e.jsx(dr,{})]})}function ct(){return e.jsxs(e.Fragment,{children:[e.jsx(wt,{}),e.jsx(Ct,{}),e.jsx(Rt,{}),e.jsx(Mt,{}),e.jsx(Vt,{}),e.jsx(vt,{}),e.jsx(cr,{})]})}const ht=`data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1350"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#5b3fa0"/><stop offset="1" stop-color="#1c2436"/></linearGradient></defs><rect width="1080" height="1350" fill="url(#g)"/><circle cx="700" cy="520" r="220" fill="#f2c4a2"/></svg>')}`,mt=`data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="900" height="300"><rect x="10" y="10" width="880" height="280" rx="60" fill="none" stroke="#ffffff" stroke-width="18" stroke-dasharray="40 24"/></svg>')}`,xt=fa(),pt=.75,ut="/demo-user-avatar.png",gt=["4:5","1:1","9:16"].map(s=>({value:s,label:ba[s]})),Se={fontFamily:"TikTokSans",backdropStyle:"rectangle",color:"#111111",outlineColor:"#FFFFFF",textAlign:"center",italic:!1,textCase:"none"};function ft(s,a){const t=Me*ja[a]/2;return{slideIndex:0,photoUri:null,elements:[{kind:"photo",id:"photo-bg",z:0,transform:{x:0,y:0,scale:1,rotation:0},photoId:null,uri:ht,width:1080,height:1350,frame:null,fit:"cover"},{kind:"shape",id:"wash",z:1,transform:{x:0,y:t-70,scale:1,rotation:0},shape:"rect",w:Me,h:140,fill:{type:"linear",angle:180,stops:[{color:"#00000000",at:0},{color:"#000000cc",at:1}]}},{kind:"text",id:"hook",z:2,transform:{x:0,y:-t+70,scale:1,rotation:0},text:"I quit my job to make ceramics",textStyle:Se,size:22,maxWidth:300},{kind:"text",id:"closer",z:3,transform:{x:0,y:t-56,scale:1,rotation:0},text:"here is what the first year taught me",textStyle:{...Se,fontFamily:"DejaVuSerif",backdropStyle:"outline",color:"#FFFFFF",outlineColor:"#000000"},size:16},{kind:"vector",id:"chrome-back",z:3,transform:{x:-150,y:-t+28,scale:1,rotation:0},source:{type:"icon",name:"chevron-left"},w:22,color:"#FFFFFF"},{kind:"vector",id:"chrome-more",z:3,transform:{x:150,y:-t+28,scale:1,rotation:0},source:{type:"icon",name:"ellipsis"},w:22,color:"#FFFFFF"},...s?[{kind:"asset",id:"badge",z:4,transform:{x:0,y:-t+70,scale:1,rotation:-3},r2Key:null,uri:mt,width:900,height:300,w:320,opacity:.9}]:[]]}}const bt={slideIndex:1,photoUri:null,textItems:[{id:"body",text:"the pottery wheel does not care about your Q3 targets. it cares whether your hands are steady.",textStyle:{...Se,fontFamily:"ChirpRegular"},transform:{x:0,y:0,scale:1,rotation:0}}],tweetCard:{theme:"dark",chrome:{displayName:"Ada Lovelace",handle:"ada",avatarUrl:ut,verified:!0}}};function Ve({label:s,slide:a,aspect:t}){return e.jsx(n,{label:s,className:"shrink-0",children:e.jsx("div",{style:{borderRadius:16,overflow:"hidden",border:"1px solid var(--color-border)",lineHeight:0},children:e.jsx(va,{slide:a,aspectRatio:t,renderScale:pt})})})}function vt(){const[s,a]=o.useState("4:5"),[t,l]=o.useState(!0);return e.jsxs(c,{id:"scene-graph-slide",kicker:"Asset Previews · Carousel",title:"Scene-graph carousel slide",description:"The real <CarouselSlideView> (scaled to 75%) over the SlideState shape run_code's document ingestion writes: a full-bleed photo element, a gradient wash shape, a pill caption (TikTok Sans, the production pill renderer), an outline caption in a sandbox container font (DejaVu Serif, self-hosted), and a frozen-pixel asset layer painted in z order. This is the same component the editor canvas paints and the snapshot browser rasterizes for iMessage delivery and the export ZIP, so a layout or font regression shows up here before it ships. The aspect selector re-anchors the top and bottom captions the way canvas_point() does in the sandbox; toggle the asset to see the stack without its top layer. The second card is the tweet-card slide shape (new_tweet_card_slide / preset_tweet_cards), rendered by the same TweetCardSlideView every X Card uses.",children:[e.jsx("style",{dangerouslySetInnerHTML:{__html:xt}}),e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3 rounded-[var(--radius-control)] border border-border bg-[var(--surface-sunken)] px-4 py-3",children:[e.jsx(h,{className:"text-text-secondary",children:"Aspect"}),e.jsx(f,{"aria-label":"Slide aspect",options:gt,value:s,onValueChange:a}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(v,{label:"Asset layer",checked:t,onChange:r=>l(r.target.checked)})]}),e.jsxs("div",{className:"flex gap-8 overflow-x-auto pb-3",children:[e.jsx(Ve,{label:"Element slide",slide:ft(t,s),aspect:s}),e.jsx(Ve,{label:"Tweet-card slide",slide:bt,aspect:s})]})]})]})}const B={x:`shipped the thing. 15 166 weeks of nights and weekends, 3 rewrites, 1 very patient cofounder. the demo that took 90 seconds today took 9 minutes in april. 17
18build in public, they said. it'll be fun, they said. (it was.)`,threads:`hot take after a year of posting daily: consistency beats cleverness every single time. 19 20my most-saved post took 4 minutes to write. the one i spent 3 hours polishing? crickets. 21 22the algorithm isn't rewarding effort, it's rewarding resonance. write the thing you'd actually say out loud to a friend.`,linkedin:`A year ago I couldn't get 10 people to read my newsletter. Last week it crossed 25,000 subscribers. 23 24What actually moved the needle (in order): 25 261. Publishing on a schedule I could sustain â weekly, not daily 272. Writing headlines for one specific person, not an audience 283. Repurposing every long piece into 3â4 short posts 294. Replying to every single comment for the first 6 months 30 31What didn't: chasing trends, posting at the "perfect time," buying a course on hooks. 32 33The boring truth is that distribution compounds slowly and then suddenly. If you're at 100 subscribers and it feels pointless â that was me, 14 months ago. 34 35Keep going.`,instagram:`Six months of showing up before sunrise so I could build this before my day job âï¸ 36 37Today it's live. Swipe for the before/after of the very first sketch vs. what shipped. 38 39To everyone who voted on the beta name in stories â this one's yours. 40 41#buildinpublic #indiehacker #shipit #founderlife`},us=[{url:"/planets/earth-blue.png",alt:"demo media 1"},{url:"/planets/jupiter.png",alt:"demo media 2"},{url:"/planets/mars.png",alt:"demo media 3"},{url:"/planets/ocean.png",alt:"demo media 4"}],gs=[{value:"light",label:"Light"},{value:"dark",label:"Dark"}],fs=[{value:"0",label:"0"},{value:"1",label:"1"},{value:"2",label:"2"},{value:"3",label:"3"},{value:"4",label:"4"}],jt=[{value:"hidden",label:"Hidden"},{value:"icons",label:"Icons"},{value:"counts",label:"Counts"}],yt={replies:24,reposts:12,likes:305,views:12600,bookmarks:18};function wt(){const[s,a]=o.useState("dark"),[t,l]=o.useState("0"),[r,p]=o.useState("icons"),[x,j]=o.useState(!0),[d,g]=o.useState(!0),_={media:us.slice(0,Number(t)),...r==="hidden"?{hideActions:!0}:{},...r==="counts"?{engagement:yt}:{}},k=E=>({handle:"vitaliidodonov",displayName:"Vitalii Dodonov",avatarUrl:d?ae:null,...E});return e.jsxs(c,{id:"post-previews",kicker:"Asset Previews · Card",title:"Post preview cards",description:"The real platform post components from @sahasra/post-previews â the same ones the screenshot pipeline rasterizes at /preview/x-post etc. and screenshot_post / the previews render path (src/previews/render.ts) send to the user as PNGs. Fixed showcase copy per platform at that platform's natural length. The Theme control drives X and Threads via their theme prop; Instagram is light-only and ignores it, and LinkedIn is styled with Tailwind dark: classes, so it follows the page-level Theme toggle in the header instead. Verified maps to each platform's real gating â the X blue check (isXVerified) and the Meta check on Threads (isMetaVerified); LinkedIn and Instagram have no badge. Actions previews the three variants the agent actually sends: row hidden (screenshot_post's cleaner LinkedIn card), icons without counts (draft mode), and icons with counts.",children:[e.jsx("style",{"data-preview-fonts":"x-chirp",dangerouslySetInnerHTML:{__html:ta}}),e.jsx("style",{"data-preview-fonts":"linkedin-source-sans",dangerouslySetInnerHTML:{__html:ra}}),e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3 rounded-[var(--radius-control)] border border-border bg-[var(--surface-sunken)] px-4 py-3",children:[e.jsx(h,{className:"text-text-secondary",children:"Theme"}),e.jsx(f,{"aria-label":"Post preview theme",options:gs,value:s,onValueChange:a}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(h,{className:"text-text-secondary",children:"Media"}),e.jsx(f,{"aria-label":"Media count",options:fs,value:t,onValueChange:l}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(h,{className:"text-text-secondary",children:"Actions"}),e.jsx(f,{"aria-label":"Action row",options:jt,value:r,onValueChange:p}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(v,{label:"Verified",checked:x,onChange:E=>j(E.target.checked)}),e.jsx(v,{label:"Real avatar",checked:d,onChange:E=>g(E.target.checked)})]}),e.jsxs("div",{className:"flex gap-8 overflow-x-auto pb-3",children:[e.jsx(n,{label:"x",className:"shrink-0",children:e.jsx(la,{text:B.x,author:k(x?{verifiedType:"blue"}:void 0),theme:s,..._})}),e.jsx(n,{label:"threads",className:"shrink-0",children:e.jsx(na,{text:B.threads,author:k(x?{verifiedType:"meta"}:void 0),theme:s,..._})}),e.jsx(n,{label:"linkedin",className:"shrink-0",children:e.jsx(ia,{text:B.linkedin,author:k({headline:"Building in public · AI à Creators"}),..._})}),e.jsx(n,{label:"instagram",className:"shrink-0",children:e.jsx(oa,{text:B.instagram,author:k(),..._})})]})]})]})}const kt={short:"consistency beats cleverness. every single time.",typical:B.x,max:["the uncomfortable truth about building an audie
41nce: nobody cares about your product. they care about the change you went through building it.","i spent two years posting feature announcements to 200 followers. zero traction. then one honest post about almost shutting down brought 4,000 followers in a week.","the lesson: document the struggle, not the launch. people follow the story â and buy at the end of it."].join(` 42 43`).slice(0,nt)},St=[{value:"short",label:"Short"},{value:"typical",label:"Typical"},{value:"max",label:"Max"}],Nt=[{value:"short",label:"Short"},{value:"long",label:"Long"}],Tt="Vitalii Dodonov · The Creator Growth Laboratory",pe=.45;function Ct(){const[s,a]=o.useState("typical"),[t,l]=o.useState("short"),[r,p]=o.useState("dark"),[x,j]=o.useState("0"),[d,g]=o.useState(!0),[C,_]=o.useState(!0);return e.jsx(c,{id:"ig-x-card",kicker:"Asset Previews · Card",title:"IG tweet card",description:"The real <InstagramXPostPreview> (1080x1080, scaled down) â the instagram_x_post snapshot view the ig_x_cards ritual renders when one of the user's tweets crosses its like threshold, then saves as a tagged Instagram draft and sends as the receipt's lead image (src/previews/ig-x-card.ts). Repurposed content, not a screenshot: author block + text only, NO metrics and no action row, dark (X Lights Out) by default â the ritual always ships dark; the Light option exists because screenshot_post can request it for the same template. Length walks the type ramp (chooseBodyFontSize scales body text down by estimated wrapped lines; Max is the ritual's 420-char cap, at the 34px floor). Long name pins the header's ellipsis truncation, Real avatar off shows the initials fallback, and Media previews the source-photo grid screenshot_post can attach â the ritual itself renders text-only cards.",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3 rounded-[var(--radius-control)] border border-border bg-[var(--surface-sunken)] px-4 py-3",children:[e.jsx(h,{className:"text-text-secondary",children:"Length"}),e.jsx(f,{"aria-label":"Card text length",options:St,value:s,onValueChange:a}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(h,{className:"text-text-secondary",children:"Name"}),e.jsx(f,{"aria-label":"Display name length",options:Nt,value:t,onValueChange:l}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(h,{className:"text-text-secondary",children:"Theme"}),e.jsx(f,{"aria-label":"Card theme",options:gs,value:r,onValueChange:p}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(h,{className:"text-text-secondary",children:"Media"}),e.jsx(f,{"aria-label":"Source media count",options:fs,value:x,onValueChange:j}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(v,{label:"Verified",checked:d,onChange:k=>g(k.target.checked)}),e.jsx(v,{label:"Real avatar",checked:C,onChange:k=>_(k.target.checked)})]}),e.jsx(n,{label:`ig card · ${s} · ${r}`,children:e.jsx("div",{style:{width:Le*pe,height:Le*pe,maxWidth:"100%",overflow:"hidden",borderRadius:16,border:"1px solid var(--color-border)"},children:e.jsx("div",{style:{transform:`scale(${pe})`,transformOrigin:"top left"},children:e.jsx(da,{text:kt[s],author:{handle:"vitaliidodonov",displayName:t==="long"?Tt:"Vitalii Dodonov",avatarUrl:C?ae:null,...d?{verifiedType:"blue"}:{}},theme:r,media:us.slice(0,Number(x))})})})})]})})}function Et(){return e.jsxs(c,{id:"mini-milestone",kicker:"Components · Status",title:"Mini milestone",description:"Compact achievement tile for the Insights milestones rail: the tiered Stanley trophy (copper/silver/gold â the same asset the full Milestone card uses) and the laurel-wreathed threshold with a family sublabel. Achieved tiles are clickable (open the full sharable card in a modal); upcoming/locked tiles render grayscale + dimmed and are inert. Fixed width so every tile is the same size across the horizontal scroll row.",children:[e.jsx(i,{children:"Achieved · trophy tier scales with the threshold"}),e.jsxs(u,{className:"sm:grid-cols-4 md:grid-cols-6",children:[e.jsx(n,{label:"copper · 10K",children:e.jsx(D,{family:"followers",label:O("followers",1e4),achieved:!0,onClick:()=>{}})}),e.jsx(n,{label:"silver · 50K",children:e.jsx(D,{family:"followers",label:O("followers",5e4),achieved:!0,onClick:()=>{}})}),e.jsx(n,{label:"gold · 1M",children:e.jsx(D,{family:"followers",label:O("followers",1e6),achieved:!0,onClick:()=>{}})}),e.jsx(n,{label:"views · 10M",children:e.jsx(D,{family:"views_cumulative",label:O("views_cumulative",1e7),achieved:!0,onClick:()=>{}})})]}),e.jsx(i,{children:"Locked (upcoming)"}),e.jsxs(u,{className:"sm:grid-cols-4 md:grid-cols-6",children:[e.jsx(n,{label:"followers",children:e.jsx(D,{family:"followers",label:O("followers",25e3),achieved:!1})}),e.jsx(n,{label:"views",children:e.jsx(D,{family:"views_cumulative",label:O("views_cumulative",1e6),achieved:!1})})]})]})}const _t=[{platform:"x",displayName:"Ada Lovelace",handle:"ada",avatarUrl:null,metrics:{posts:3,replies:8,impressions:12600,likes:124,comments:22,followersGained:89},dailyStreak:{current:231,longest:231,alive:!0,windowCapped:!1},weeklyStreak:{current:33,longest:33,alive:!0,windowCapped:!1}},{platform:"instagram",displayName:"Ada Lovelace",handle:"ada",avatarUrl:null,metrics:{posts:2,replies:null,impressions:5400,likes:210,comments:15,followersGained:33},weeklyStreak:{current:3,longest:6,alive:!0,windowCapped:!1}},{platform:"linkedin",displayName:"Ada Lovelace",handle:null,avatarUrl:null,metrics:{posts:2,replies:null,impressions:3100,likes:18,comments:6,followersGained:12},weeklyStreak:{current:8,longest:8,alive:!0,windowCapped:!1}},{platform:"threads",displayName:"Ada Lovelace",handle:"ada",avatarUrl:null,metrics:{posts:4,replies:11,impressions:9800,likes:76,comments:9,followersGained:21},dailyStreak:{current:5,longest:12,alive:!0,windowCapped:!1},weeklyStreak:{current:2,longest:4,alive:!0,windowCapped:!1}}],At=[{key:"posts",label:"Posts"},{key:"replies",label:"Replies"},{key:"views",label:"Views"},{key:"likes",label:"Likes"},{key:"comments",label:"Comments"},{key:"followers",label:"Followers"}],It={posts:!0,replies:!0,views:!0,likes:!0,comments:!0,followers:!0};function Pt(s,a){return{posts:a.posts?s.posts:0,replies:a.replies?s.replies:null,impressions:a.views?s.impressions:null,likes:a.likes?s.likes:null,comments:a.comments?s.comments:null,followersGained:a.followers?s.followersGained:null}}const ue=.35,ae="/demo-user-avatar.png";function Ot({label:s,payload:a}){return e.jsx(n,{label:s,children:e.jsx("div",{style:{width:ga*ue,height:ua*ue,maxWidth:"100%",overflow:"hidden",borderRadius:16,border:"1px solid var(--color-border)"},children:e.jsx("div",{style:{transform:`scale(${ue})`,transformOrigin:"top left"},children:e.jsx(pa,{text:JSON.stringify(a)})})})})}
43function Rt(){const[s,a]=o.useState(It),[t,l]=o.useState(!0),[r,p]=o.useState(!0),[x,j]=o.useState(!1);return e.jsx(c,{id:"today-wrap",kicker:"Asset Previews · Card",title:"Today's wrap card",description:"The real <TodayWrapPreview> (scaled down) for all four platforms at once â the same component the screenshot pipeline rasterizes at /preview/today-wrap and the Today's wrap ritual / tool send per active platform. Toggle the metrics below to preview any scenario across every platform. Two sentences: a first-person 'made' clause ('Today, I made 3 posts.') then a third-person engagement clause ('12.6k saw my content, 124 liked, 22 commented and 89 followed.'). Each metric leads with a full-color 3D platform icon and a near-black count; the card is intentionally light/theme-fixed, so the theme toggle flips only the surrounding chrome. Null/zero metrics drop out and the sentence stays whole (an engagement-only set leads with 'Today,'); a follower loss is omitted from the card entirely. When there's activity but no engagement, a muted 'Showing up is the whole game.' sign-off is appended. Instagram + LinkedIn never surface replies, so the Replies toggle is a no-op for them â exactly like prod. Above the digest sits the posting-streak pill (Phosphor flame + count), driven by the shared pickStreak rule: days when the daily streak clears a week (X, '231D'), else weeks (Instagram '3W'; LinkedIn '8W'; Threads' 5-day streak falls back to '2W') â the content column stays centered either way. The Streak toggle strips streak data to preview the no-pill layout everywhere. The Weekly recap toggle sets period: 'week' on every payload â the exact variant the Weekly Analytics ritual sends Sunday mornings â switching only the copy ('This week, I made â¦' / 'No activity yet this week.').",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3 rounded-[var(--radius-control)] border border-border bg-[var(--surface-sunken)] px-4 py-3",children:[e.jsx(h,{className:"text-text-secondary",children:"Metrics"}),At.map(d=>e.jsx(v,{label:d.label,checked:s[d.key],onChange:g=>a(C=>({...C,[d.key]:g.target.checked}))},d.key)),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(v,{label:"Real avatar",checked:t,onChange:d=>l(d.target.checked)}),e.jsx(v,{label:"Streak",checked:r,onChange:d=>p(d.target.checked)}),e.jsx(v,{label:"Weekly recap",checked:x,onChange:d=>j(d.target.checked)})]}),e.jsx("div",{className:"grid grid-cols-1 gap-5 xl:grid-cols-2",children:_t.map(d=>e.jsx(Ot,{label:d.platform,payload:{...d,avatarUrl:t?ae:null,metrics:Pt(d.metrics,s),dailyStreak:r?d.dailyStreak:void 0,weeklyStreak:r?d.weeklyStreak:void 0,period:x?"week":void 0}},d.platform))})]})})}const ge=.5,J=ya.map(s=>{const a=lt(s.content),t=s.path.replace(/^reviews\//,"").replace(/\.md$/,"");return{key:t,verdictLabel:a?.verdictLabel??"Unparseable",intro:a?.intro??"",payload:a?{preparedFor:"[First-name]",dateLabel:Ps(new Date(`${t}T12:00:00Z`),"UTC","EEEE, MMMM d, yyyy"),title:a.title,verdict:a.verdict,verdictLabel:a.verdictLabel,tldr:a.tldr,hero:a.hero,sections:a.sections.map(l=>({heading:l.heading,items:l.items.map(r=>({text:r.text}))})),closing:a.closing}:null}}),Lt=J.map(s=>({value:s.key,label:s.verdictLabel}));function Mt(){const[s,a]=o.useState(J[0]?.key??""),t=J.find(l=>l.key===s)??J[0];return e.jsx(c,{id:"weekly-review",kicker:"Asset Previews · Card",title:"Weekly Review one-pager",description:"The real <WeeklyReviewPreview> (scaled to 50%) â the single branded image the Weekly Review ritual sends every Sunday morning, rasterized in prod at /preview/weekly-review. It REPLACED the per-platform weekly wrap bundle, which now only ships when this one can't render. Each specimen is a canned review note run through the real parseWeeklyReviewNote, so what you see is the noteâpayloadâcard path deliver.ts runs, and the verdict selector previews the three verdicts (the pill is the only place the verdict shows). Layout is fixed by the template, the content is not: a 2x2 hairline grid of Working / Not Working / Strategy Check / Next Week, and a note that files fewer quadrants leaves the cell empty rather than reflowing â the on-track week shows that. Each quadrant prints at most 2 items and the parser logs the rest as dropped, which the needs-a-shift week (3 bullets in t
43wo of its sections) exercises. Square by design (a message bubble scales an image to its width, so aspect ratio decides how much thread it eats) and a FLOOR, not a fixed height: an over-budget note grows taller here exactly as prod's fullPage capture lets it, so a specimen taller than it is wide is the note overrunning its character budget. Theme-fixed white with brand purple on the hero number and verdict pill only; the page Theme toggle moves the chrome around it, never the card. Below each card is the trailing intro text message from the note's intro: frontmatter â image first, then that line, always two messages.",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3 rounded-[var(--radius-control)] border border-border bg-[var(--surface-sunken)] px-4 py-3",children:[e.jsx(h,{className:"text-text-secondary",children:"Verdict"}),e.jsx(f,{"aria-label":"Weekly review verdict",options:Lt,value:s,onValueChange:a})]}),t?.payload?e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(n,{label:t.key,children:e.jsx("div",{style:{zoom:ge,maxWidth:"100%",overflow:"hidden",borderRadius:16/ge,border:`${1/ge}px solid var(--color-border)`},children:e.jsx(ca,{text:JSON.stringify(t.payload)})})}),t.intro&&e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("p",{className:"max-w-md whitespace-pre-line rounded-[var(--radius-card)] bg-[var(--surface-inset)] px-3.5 py-2.5 text-body leading-relaxed text-text-secondary",children:t.intro}),e.jsx(h,{children:"trailing text message (intro:)"})]})]}):e.jsx(H,{icon:e.jsx(Ke,{size:48}),title:"Note didn't parse",description:"parseWeeklyReviewNote rejected this mock note â in prod that's the fallback to the weekly wrap card bundle. Check the note contract in weekly-analytics.md."})]})})}const Dt={followers:Qa,views_cumulative:Ja,views_single_post:et},Ft=[{value:"followers",label:"Followers"},{value:"views_cumulative",label:"Total views"},{value:"views_single_post",label:"Post views"}],zt=[{value:"x",label:"X"},{value:"instagram",label:"Instagram"},{value:"threads",label:"Threads"},{value:"linkedin",label:"LinkedIn"},{value:"youtube",label:"YouTube"}],Wt=new Set(["views_single_post"]),fe=.5;function qt({label:s,payload:a}){return e.jsx(n,{label:s,className:"shrink-0",children:e.jsx("div",{style:{width:xa*fe,height:ma*fe,maxWidth:"100%",overflow:"hidden",borderRadius:16,border:"1px solid var(--color-border)"},children:e.jsx("div",{style:{transform:`scale(${fe})`,transformOrigin:"top left"},children:e.jsx(ha,{text:JSON.stringify(a)})})})})}function Vt(){const[s,a]=o.useState("followers"),[t,l]=o.useState("x"),[r,p]=o.useState(!0),x=Wt.has(s),j=Dt[s];return e.jsx(c,{id:"milestone",kicker:"Asset Previews · Card",title:"Milestone card",description:"The real <MilestonePreview> (scaled down) â the same component the screenshot pipeline rasterizes at /preview/milestone and the milestone-delivery path sends when a tenant first crosses a follower/view threshold. A portrait 4:5 trophy celebration (same width as the today-wrap card above): the user à Stanley lockup top-left, the platform brand mark top-right (bare glyph for X/Threads, the real logo for Instagram, a brand circle for LinkedIn â implying the platform), a large 3D trophy centered (copper / silver / gold by how big the threshold is â see trophyTier), then the milestone number flanked by laurel wreaths, the unit ('Followers' / 'Total views'), and an 'Achieved on' date (MM.DD.YYYY in the tenant's timezone). Pick a family + platform to preview every real threshold on that ladder (the same values src/milestones/thresholds.ts feeds detection); toggle the avatar for the real photo vs the initials fallback. The card is theme-fixed light, so the theme toggle flips only the surrounding chrome. The 'Post views' family is design-only â detected but not delivered in prod (see GATED_FAMILIES in src/milestones/delivery.ts).",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-x-6 gap-y-3 rounded-[var(--radius-control)] border border-border bg-[var(--surface-sunken)] px-4 py-3",children:[e.jsx(h,{className:"text-text-secondary",children:"Family"}),e.jsx(f,{"aria-label":"Milestone family",options:Ft,value:s,onValueChange:a}),x?e.jsx(S,{variant:"warning",children:"not in prod"}):null,e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(h,{className:"text-text-secondary",children:"Platform"}),e.jsx(f,{"aria-label":"Platform",options:zt,value:t,onValueChange:l}),e.jsx("span",{className:"h-5 w-px bg-border","aria-hidden":!0}),e.jsx(v,{label:"Real avatar",checked:r,onChange:d=>p(d.target.checked)})]}),e.jsx("div",{className:"flex gap-8 overflow-x-auto pb-3",children:j.map(d=>{const g=O(s,d);return e.jsx(qt,{label:g,payload:{platform:t,displayName:"Ada Lovelace",handle:"ada",avatarUrl:r?ae:null,family:s,label:g,value:d,achievedAt:"2026-06-26T14:00:00Z",timezone:"America/Ne
43w_York"}},d)})})]})})}function Gt(){return e.jsx(c,{id:"buttons",kicker:"Components · Action",title:"Buttons",description:"Rendered from the live <Button> and <IconButton> â every variant and size below is the real component (the round icon buttons are the same ones in the chat composer), so a change to their variants shows up here instantly.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Variants"}),e.jsx(u,{className:"sm:grid-cols-3 md:grid-cols-5",children:it.map(s=>e.jsx(n,{label:s,children:e.jsx(m,{variant:s,children:"Button"})},s))})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Sizes"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[e.jsx(n,{label:"sm",children:e.jsx(m,{size:"sm",children:"Small"})}),e.jsx(n,{label:"default",children:e.jsx(m,{size:"default",children:"Default"})}),e.jsx(n,{label:"lg",children:e.jsx(m,{size:"lg",children:"Large"})}),e.jsx(n,{label:"icon",children:e.jsx(m,{size:"icon","aria-label":"Add",children:e.jsx(oe,{size:16})})}),e.jsx(n,{label:"with icon",children:e.jsxs(m,{children:["Continue",e.jsx(Ta,{size:15,strokeWidth:2.25})]})})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Disabled"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsx(m,{disabled:!0,children:"Default"}),e.jsx(m,{variant:"outline",disabled:!0,children:"Outline"}),e.jsx(m,{variant:"ghost",disabled:!0,children:"Ghost"})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Icon buttons"}),e.jsxs("div",{className:"space-y-5",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[e.jsx(n,{label:"default",children:e.jsx(I,{"aria-label":"Attach",children:e.jsx(oe,{size:16,strokeWidth:2})})}),e.jsx(n,{label:"primary",children:e.jsx(I,{variant:"primary","aria-label":"Send",children:e.jsx(Q,{size:14,strokeWidth:2})})}),e.jsx(n,{label:"ghost",children:e.jsx(I,{variant:"ghost","aria-label":"Dismiss",children:e.jsx(Ca,{size:16,strokeWidth:2})})}),e.jsx(n,{label:"disabled",children:e.jsx(I,{disabled:!0,"aria-label":"Attach",children:e.jsx(oe,{size:16,strokeWidth:2})})})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[e.jsx(n,{label:"sm",children:e.jsx(I,{size:"sm",variant:"primary","aria-label":"Send",children:e.jsx(Q,{size:13,strokeWidth:2})})}),e.jsx(n,{label:"default",children:e.jsx(I,{size:"default",variant:"primary","aria-label":"Send",children:e.jsx(Q,{size:14,strokeWidth:2})})}),e.jsx(n,{label:"lg",children:e.jsx(I,{size:"lg",variant:"primary","aria-label":"Send",children:e.jsx(Q,{size:16,strokeWidth:2})})})]})]})]})]})})}function Ht(){return e.jsx(c,{id:"badges",kicker:"Components · Status",title:"Badges",description:"Compact status pills. Soft fills for semantic states; the accent only for the default.",children:e.jsx(u,{className:"sm:grid-cols-3 md:grid-cols-6",children:ot.map(s=>e.jsx(n,{label:s,children:e.jsx(S,{variant:s,children:s})},s))})})}function Bt(){return e.jsxs(c,{id:"tag-pills",kicker:"Components · Status",title:"Tag pills",description:"User-assignable calendar tag chips on the ocean palette (--tag-* tokens, both themes). Neutral by default â color is the user's choice, never the system's. TagColorDot is the matching picker swatch.",children:[e.jsxs(u,{className:"sm:grid-cols-3 md:grid-cols-5",children:[e.jsx(n,{label:"default",children:e.jsx(W,{children:"Launch"})}),Pe.map(s=>e.jsx(n,{label:s.key,children:e.jsx(W,{color:s.key,children:s.label})},s.key))]}),e.jsx(i,{children:"Card density + picker swatches"}),e.jsxs(u,{className:"sm:grid-cols-2",children:[e.jsx(n,{label:'size="sm" (calendar cards)',children:e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(W,{size:"sm",className:"border-transparent bg-[var(--surface-sunken)]",children:"Launch"}),e.jsx(W,{size:"sm",color:"coral",children:"Urgent"}),e.jsx(W,{size:"sm",color:"aqua",children:"Series"})]})}),e.jsx(n,{label:"TagColorDot",children:e.jsxs("span",{className:"flex items-center gap-1.5",children:[e.jsx(Oe,{color:"default"}),Pe.map(s=>e.jsx(Oe,{color:s.key},s.key))]})})]})]})}
43function $t(){const[s,a]=o.useState(!0),[t,l]=o.useState(140);return e.jsx(c,{id:"forms",kicker:"Components · Input",title:"Form controls",description:"Inputs, textareas, selects, switches, sliders, and labels â the live primitives used across settings, composer, and editor surfaces.",children:e.jsxs("div",{className:"grid grid-cols-1 gap-x-10 gap-y-6 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx(P,{htmlFor:"ds-input",children:"Text input"}),e.jsx(ee,{id:"ds-input",placeholder:"Describe the changeâ¦"})]}),e.jsxs("div",{children:[e.jsx(P,{htmlFor:"ds-input-disabled",children:"Disabled"}),e.jsx(ee,{id:"ds-input-disabled",placeholder:"Not editable",disabled:!0})]}),e.jsxs("div",{children:[e.jsx(P,{htmlFor:"ds-select",children:"Select"}),e.jsxs(Ue,{id:"ds-select",defaultValue:"opus",children:[e.jsx("option",{value:"opus",children:"Claude Opus"}),e.jsx("option",{value:"sonnet",children:"Claude Sonnet"}),e.jsx("option",{value:"haiku",children:"Claude Haiku"})]})]}),e.jsxs("div",{children:[e.jsx(P,{htmlFor:"ds-switch",children:"Switch"}),e.jsx("div",{className:"mt-1.5 flex h-10 items-center",children:e.jsx(v,{id:"ds-switch",checked:s,onChange:r=>a(r.target.checked),label:s?"Enabled":"Disabled"})})]}),e.jsxs("div",{children:[e.jsx(P,{htmlFor:"ds-slider",children:"Slider"}),e.jsxs("div",{className:"mt-1.5 flex h-10 items-center gap-3",children:[e.jsx(ie,{id:"ds-slider","aria-label":"Zoom",value:t,onValueChange:l,min:100,max:400,getAriaValueText:r=>`${r}%`,className:"max-w-48"}),e.jsxs("span",{className:"w-12 text-sm tabular-nums text-text",children:[t,"%"]})]}),e.jsxs("div",{className:"mt-2 flex h-7 items-center gap-3",children:[e.jsx(ie,{size:"sm",accent:"ink","aria-label":"Zoom, ink, compact",value:220,onValueChange:()=>{},min:100,max:400,className:"max-w-48"}),e.jsx("span",{className:"text-xs text-text-tertiary",children:"sm · ink"})]}),e.jsxs("div",{className:"mt-2 flex h-7 items-center gap-3",children:[e.jsx(ie,{size:"sm","aria-label":"Zoom, disabled",value:220,onValueChange:()=>{},min:100,max:400,disabled:!0,className:"max-w-48"}),e.jsx("span",{className:"text-xs text-text-tertiary",children:"disabled"})]})]}),e.jsxs("div",{className:"sm:col-span-2",children:[e.jsx(P,{htmlFor:"ds-textarea",children:"Textarea"}),e.jsx(He,{id:"ds-textarea",rows:4,placeholder:`First line of placeholder 44Second line of placeholder 45Third line of placeholder`})]})]})})}const Ut=`## Notes to Stanley 46 47- Rich text in, **markdown** out â callers keep a plain string. 48- Typing markdown works too: \`##\` + space makes a heading, \`-\` + space a list. 49 50| Feature | Status | 51| --- | --- | 52| Tables | rendered | 53| Lists | ok | 54 55Focus this editor to reveal the toolbar above it.`;function Xt(){const[s,a]=o.useState(Ut),t=ka({value:s,onChange:a});return e.jsxs(c,{id:"markdown-editor",kicker:"Components · Input",title:"Markdown editor",description:"WYSIWYG editing over a markdown string (TipTap/ProseMirror) â useMarkdownEditor + MarkdownEditorContent, with MarkdownToolbar as optional chrome the caller places anywhere (here: revealed on focus, the My Human pattern). Styles live in .stanley-md, token-only.",children:[e.jsxs("div",{className:"group/ds-md rounded-[var(--radius-card)] border border-border bg-surface p-5",children:[e.jsx("div",{className:"mb-3 flex h-7 items-center justify-end",children:e.jsx(Sa,{editor:t,className:"pointer-events-none opacity-0 transition-opacity group-focus-within/ds-md:pointer-events-auto group-focus-within/ds-md:opacity-100"})}),e.jsx(Na,{editor:t,className:"[&_.ProseMirror]:min-h-24"})]}),e.jsxs("p",{className:"mt-3 text-xs text-text-tertiary",children:["Serialized output (live): ",e.jsx(h,{children:`${s.length} chars`})]})]})}function Kt(){const[s,a]=o.useState("board"),[t,l]=o.useState("all"),[r,p]=o.useState("all");return e.jsx(c,{id:"segmented",kicker:"Components · Selection",title:"Segmented control",description:"Single-select switch for views or modes â the live <SegmentedControl> over the .stanley-segmented-control material, the same one used by the typography preview above, the calendar view switcher, and the photos tabs.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Default"}),e.jsx(f,{"aria-label":"View",options:[{value:"list",label:"List"},{value:"board",label:"Board"},{value:"calendar",label:"Calendar"}],value:s,onValueChange:a})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Sizes"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[e.jsx(n,{label:"sm",children:e.jsx(f,{size:"sm","aria-label":"Scope (small)",options:[{value:"all",label:"All"},{value:"drafts",label:"Drafts"}],value:t,onValueChange:l})}),e.jsx(n,{label:"default",children:e.jsx(f,{"aria-label":"Scope",options:[{value:"all",label:"All"},{value:"drafts",label:"Drafts"}],value:r,onValueChange:p})})]})]})]})})}function Yt(){return e.jsx(c,{id:"platform-tabs",kicker:"Components · Selection",title:"Platform selector",description:"The Insights platform selector â a row of cards built from <PlatformTabs>. Only connected platforms get a card (brand icon + platform name + handle + follower count + today's delta); the active card carries a thin ink ring + a bright white fill so the platform being viewed is unmistakable. A colorless flame chip in the bottom-right corner shows the posting streak â days once the daily streak clears a week (12D), else weeks (18W); no chip when there's no active streak. Unconnected-but-available platforms collapse into a right-aligned pill of rounded brand symbols that links to Integrations. Here X is active, Instagram needs reconnecting, and YouTube + Threads sit in the pill.",children:e.jsx("div",{className:"max-w-3xl",children:e.jsx(ea,{activePlatform:"x",x:{state:"connected",handle:"jli_design"},linkedin:{state:"connected",handle:"Jeffrey Li"},instagram:{state:"needs_reconnect",handle:null},youtube:{state:"disconnected",handle:null},threads:{state:"disconnected",handle:null},xFollowers:{current:12431,deltaToday:37,capturedAt:null},linkedinFollowers:{current:3280,deltaToday:-12,capturedAt:null},igFollowers:null,youtubeFollowers:null,threadsFollowers:null,weeklyStreaks:{x:{platform:"x",current:4,longest:20,lastActiveWeek:null,alive:!0,windowCapped:!1},linkedin:{platform:"linkedin",current:18,longest:20,lastActiveWeek:null,alive:!0,windowCapped:!1}},dailyStreaks:{x:{platform:"x",current:12,longest:15,lastActiveDay:null,alive:!0,windowCapped:!1}}})})})}function Zt(){return e.jsx(c,{id:"cards",kicker:"Components · Container",title:"Cards",de
55scription:"The composable <Card> with header, content, and footer â the glass panel surface used for grouped content.",children:e.jsxs(se,{className:"max-w-md",children:[e.jsxs(ys,{children:[e.jsx(ws,{children:"Founder story thread"}),e.jsx(ks,{children:"A five-post thread published to your connected channels."})]}),e.jsx(Ss,{children:e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(S,{variant:"success",children:"published"}),e.jsx(S,{variant:"secondary",children:"thread"})]})}),e.jsxs(Ns,{className:"gap-3",children:[e.jsx(m,{size:"sm",children:"Open"}),e.jsx(m,{size:"sm",variant:"outline",children:"Duplicate"})]})]})})}function Qt(){return e.jsx(c,{id:"settings-rows",kicker:"Components · Container",title:"Settings rows",description:"A titled group of preference rows: the h2 sits outside the card so the card is nothing but hairline-divided rows. The right column caps at 15rem, which is what stops a <select> stretching to the page width. Used by /settings.",children:e.jsx("div",{className:"max-w-2xl space-y-8",children:e.jsxs(Us,{title:"Profile",description:"Optional one-line group description.",children:[e.jsx(q,{label:"Display name",htmlFor:"ds-display-name",children:e.jsx(ee,{id:"ds-display-name",defaultValue:"Stanley"})}),e.jsx(q,{label:"Timezone",description:"Annotative hint â the one place gray belongs in a row.",htmlFor:"ds-timezone",children:e.jsxs(Ue,{id:"ds-timezone",defaultValue:"Europe/London",children:[e.jsx("option",{value:"Europe/London",children:"Europe/London"}
55),e.jsx("option",{value:"America/New_York",children:"America/New_York"})]})}),e.jsx(q,{label:"Watch for",description:'layout="stacked" â the control takes the full row width.',htmlFor:"ds-watch-for",layout:"stacked",children:e.jsx(He,{id:"ds-watch-for",rows:3,placeholder:"e.g. flag drafts pending more than a day"})}),e.jsx(q,{label:"Email & Google",align:"start",description:'align="start" â top-aligned for a multi-line right side.',children:e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-body text-text-secondary",children:"[email protected]"}),e.jsx(m,{variant:"outline",className:"w-full",children:"Add another email"})]})}),e.jsx(q,{label:"Phone",description:"+1 555 0100 · connected via text â a label-only row, no control."})]})})})}function Jt(){return e.jsx(c,{id:"stat-tiles",kicker:"Components · Container",title:"Stat tiles",description:"The compact labeled-number tile for route-level counters â reach for it instead of hand-rolling a Card with a caption and a big number. For the large serif display stat, use MetricCard (layout primitives below).",children:e.jsxs(u,{className:"sm:grid-cols-3",children:[e.jsx(n,{label:'size="sm" (default)',children:e.jsx(z,{label:"Active tenants",value:"1,284",hint:"+42 this week"})}),e.jsx(n,{label:'size="md"',children:e.jsx(z,{size:"md",label:"Posts published",value:"318"})}),e.jsx(n,{label:'size="lg"',children:e.jsx(z,{size:"lg",label:"Total views",value:"2.4M",hint:"across all platforms"})})]})})}function er(){return e.jsx(c,{id:"banners",kicker:"Components · Status",title:"Banners",description:"Inline callouts with the correct live-region role built in: error/warning announce assertively (role=alert), info/success politely (role=status). Reach for this instead of a one-off tinted box.",children:e.jsxs("div",{className:"max-w-md space-y-3",children:[e.jsx(Y,{children:"Scheduled posts publish in your local timezone. Change it in Settings."}),e.jsx(Y,{variant:"success",children:"Connected â imports run nightly."}),e.jsx(Y,{variant:"warning",children:"Your LinkedIn token expires in 3 days. Reconnect to keep publishing."}),e.jsx(Y,{variant:"error",children:"Publish failed: X rejected the media upload. Retry from the calendar."})]})})}function sr(){return e.jsx(c,{id:"empty-states",kicker:"Components · Status",title:"Empty states",description:"Three shapes, because four local EmptyStates had been hand-rolled for the three the single centered shape didn't fit: page for a whole route, panel when it sits in a stack of cards, inline for a slot in the flow. Prefer preview over an icon â it renders the real component as an inert ghost, so the user sees what will appear here and the specimen can never drift from the thing it previews.",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(n,{label:'variant="page"',children:e.jsx(H,{icon:e.jsx(Ke,{size:48}),title:"No conversations yet",description:"Conversations appear here once your agent starts chatting.",action:e.jsx(m,{size:"sm",children:"Start one"})})}),e.jsx(n,{label:'variant="panel"',children:e.jsx(H,{variant:"panel",icon:e.jsx(Ea,{size:20}),title:"No source groups yet",description:"Create a group to bundle affiliates and campaigns.",action:e.jsx(m,{size:"sm",variant:"outline",children:"New group"})})}),e.jsx(n,{label:'variant="inline"',children:e.jsx(H,{variant:"inline",description:"Stanley is reading along. He'll react each time you pause."})}),e.jsx(n,{label:"preview â the real UI as an inert ghost",children:e.jsx(H,{title:"No posts published yet",description:"Your first published post lands here.",preview:e.jsxs("div",{className:"grid gap-3 sm:grid-cols-3",children:[e.jsx(z,{label:"Posts",value:"318",hint:"+12 this week"}),e.jsx(z,{label:"Views",value:"2.4M",hint:"across platforms"}),e.jsx(z,{label:"Replies",value:"1,902",hint:"+8%"})]})})})]})})}const Ne=Array.from({length:12},(s,a)=>`Wk ${a+1}`),Te=[3,5,4,9,7,12,10,16,14,22,19,27],ar=[8,6,11,14,12,20,15,24,21,30,26,33];function tr(){return e.jsx(c,{id:"trend-chart",kicker:"Components · Data",title:"Trend chart",description:"Sparse area+line chart for count/rate series. Y-domain anchors at zero;
55 hover shows exact bucket values. One line gets an area fill; multiple lines render as a comparison chart with a legend. Caller pre-formats the point labels.",children:e.jsxs("div",{className:"flex flex-wrap gap-4",children:[e.jsx(se,{className:"w-full max-w-md p-5",children:e.jsx(ve,{labels:Ne,lines:[{name:"signups",values:Te}],noun:"signups"})}),e.jsx(se,{className:"w-full max-w-md p-5",children:e.jsx(ve,{labels:Ne,lines:[{name:"Twitter Ads",values:Te},{name:"Cross-promos",values:ar}],noun:"signups"})})]})})}function rr(){return e.jsx(c,{id:"stanley-watermark",kicker:"Components · Data",title:"Stanley watermark",description:"The signature for cards that get screenshotted and shared â the analytics charts on /insights. It's the sidebar lockup at watermark scale (same bubble mark, same rounded clip, same Lora wordmark), living in the DOM so it survives an OS screenshot rather than being baked into a PNG the way the share cards do it. Quiet by construction: secondary ink, no surface, no interaction, no shimmer. The URL caption is opt-in â beside the wordmark it says the brand twice.",children:e.jsxs(u,{className:"sm:grid-cols-2",children:[e.jsx(n,{label:'size="sm" (default)',children:e.jsx(Z,{})}),e.jsx(n,{label:'size="md"',children:e.jsx(Z,{size:"md"})}),e.jsx(n,{label:'caption="getstanley.ai" (opt-in)',children:e.jsx(Z,{caption:wa})}),e.jsx(n,{label:"In a chart-card footer",children:e.jsxs(se,{className:"w-full p-5",children:[e.jsx(ve,{labels:Ne,lines:[{name:"followers",values:Te}],noun:"followers"}),e.jsx("div",{className:"mt-4 flex justify-end border-t border-border/60 pt-3",children:e.jsx(Z,{})})]})})]})})}function lr(){return e.jsx(c,{id:"feedback",kicker:"Components · Feedback",title:"Feedback & utility",description:"Toasts fire through the app-wide container; tooltips, skeletons, and separators round out the set.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Toasts"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(m,{variant:"outline",size:"sm",onClick:()=>R("success","Your post is scheduled"),children:"Success"}),e.jsx(m,{variant:"outline",size:"sm",onClick:()=>R("error","Couldn't publish â try again"),children:"Error"}),e.jsx(m,{variant:"outline",size:"sm",onClick:()=>R("warning","This will overwrite your draft"),children:"Warning"}),e.jsx(m,{variant:"outline",size:"sm",onClick:()=>R("info","Stanley is working on it"),children:"Info"})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Tooltip"}),e.jsx(Zs,{children:e.jsxs("div",{className:"flex flex-wrap items-end gap-8",children:[e.jsx(Qs,{content:"Generate variations",children:e.jsxs(m,{variant:"outline",size:"sm",children:[e.jsx(_a,{size:15}),"Hover me"]})}),e.jsxs("div",{className:"w-64",children:[e.jsxs("div",{className:"mb-1 flex items-center gap-1.5",children:[e.jsx(P,{htmlFor:"ds-help-tip-demo",className:"mb-0",children:"Who to let in"}),e.jsx(Ys,{label:"About who to let in",children:"The rubric Stanley judges their socials against. Leave blank to admit anyone who connects a real profile."})]}),e.jsx(ee,{id:"ds-help-tip-demo",placeholder:"e.g. founders in Toronto"})]})]})})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Skeleton"}),e.jsxs("div",{className:"max-w-sm space-y-2.5",children:[e.jsx(ne,{className:"h-4 w-2/3 rounded-[var(--radius-sm)]"}),e.jsx(ne,{className:"h-4 w-full rounded-[var(--radius-sm)]"}),e.jsx(ne,{className:"h-4 w-4/5 rounded-[var(--radius-sm)]"})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Separator"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-sm text-text-secondary",children:"Before"}),e.jsx(be,{orientation:"vertical",className:"h-6"}),e.jsx("span",{className:"text-sm text-text-secondary",children:"After"})]}),e.jsx(be,{className:"mt-4"})]})]})})}function nr(){const[s,a]=o.useState(!1);return e.jsx(c,{id:"umux-survey",kicker:"Components · Feedback",title:"UX pulse survey",description:"The real <UmuxSurveyCard> â the dashboard UX pulse speech bubble (baseline + endline waves) that floats above the chat launcher. All three 1â7 items must be answered before send enables. Submitting flips it to the thanks state; after any score of 5 or below or a comment, the thanks stays up with the iris 'tell stanley more' hand-off to chat (toggle below resets it).",children:e.jsx("div",{className:"space-y-8",children:e.jsxs("div",{children:[e.jsx(i,{children:"Survey â thanks"}),e.jsxs("div",{className:"flex flex-wrap items-end gap-8",children:[e.jsx(n,{label:s?"submitted":"default",children:e.jsx(Ks,{submitted:s,onSubmit:()=>a(!0),onDismiss:()=>a(!1),onTellStanley:()=>R("info","Would open chat prefilled (demo only)")})}),s&&e.jsx(m,{variant:"outline",size:"sm",onClick:()=>a(!1),children:"Reset"})]})]})})})}const ir=["X","LinkedIn","Instagram","Threads"];
55function or(){const[s,a]=o.useState(!1),[t,l]=o.useState(!1),[r,p]=o.useState(!1),[x,j]=o.useState("X");return e.jsxs(c,{id:"overlays",kicker:"Components · Overlay",title:"Overlays",description:"The modal dialog and side sheet trap focus and close on Escape or backdrop click. The dropdown menu flips up or down on its own so it never runs off-screen. ConfirmDialog wraps Dialog for the cancel-or-confirm pattern and closes itself after confirm.",children:[e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Dialog & sheet"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(m,{variant:"outline",onClick:()=>a(!0),children:"Open dialog"}),e.jsx(m,{variant:"outline",onClick:()=>l(!0),children:"Open confirm dialog"}),e.jsx(m,{variant:"outline",onClick:()=>p(!0),children:"Open sheet"})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Dropdown menu"}),e.jsxs(Vs,{children:[e.jsx(Gs,{children:e.jsxs("button",{type:"button",className:"stanley-control-button flex h-8 items-center gap-1.5 px-2.5 text-[12.5px] text-text-secondary",children:[x,e.jsx(Aa,{size:12,className:"text-text-tertiary"})]})}),e.jsxs(Hs,{children:[ir.map(d=>{const g=d===x;return e.jsxs(Ie,{active:g,onSelect:()=>j(d),children:[e.jsx("span",{className:"min-w-0 flex-1 truncate font-medium",children:d}),g&&e.jsx($e,{size:13,className:"shrink-0 text-text-tertiary"})]},d)}),e.jsx(Bs,{}),e.jsx($s,{children:"Manage"}),e.jsx(Ie,{destructive:!0,onSelect:()=>R("success","Nothing was removed"),children:"Remove channel"})]})]})]})]}),e.jsx(qs,{open:t,onOpenChange:l,title:"Disconnect X / Twitter?",description:"Stanley will lose access to X / Twitter until you connect it again.",confirmLabel:"Disconnect",destructive:!0,onConfirm:()=>R("success","Confirmed (demo only)")}),e.jsx(Ts,{open:s,onOpenChange:a,children:e.jsxs(Cs,{children:[e.jsxs(Es,{children:[e.jsx(_s,{children:"Publish this post now?"}),e.jsx(As,{children:"It'll go out to your connected channels right away â you can unschedule it from the calendar."})]}),e.jsxs(Is,{children:[e.jsx(m,{variant:"ghost",onClick:()=>a(!1),children:"Cancel"}),e.jsx(m,{onClick:()=>a(!1),children:"Publish"})]})]})}),e.jsx(Xs,{open:r,onClose:()=>p(!1),ariaLabel:"Example sheet",widthClass:"sm:w-[420px]",children:e.jsxs("div",{className:"flex h-full flex-col p-6 text-black",children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Side sheet"}),e.jsx("p",{className:"mt-1.5 text-sm text-neutral-600",children:"A right-anchored slide-over for inspectors and detail panels."}),e.jsx("div",{className:"mt-auto",children:e.jsx(m,{onClick:()=>p(!1),children:"Close"})})]})})]})}function dr(){return e.jsx(c,{id:"primitives",kicker:"Components · Layout",title:"Layout primitives",description:"The shared shell components from design-system.tsx â the surfaces and actions routes compose with.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Metric cards"}),e.jsxs("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-3",children:[e.jsx(le,{label:"Active tenants",value:e.jsx(Js,{value:1284}),description:"Connected to a channel in the last 3 days."}),e.jsx(le,{label:"Published",value:"92%",accent:!0,description:"Calendar posts that shipped on schedule."}),e.jsx(le,{label:"Avg. turns",value:"6.4",modifier:"/ session",description:"Across the most recent conversations."})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Surfaces"}),e.jsxs("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:[e.jsxs(Ls,{className:"p-5",children:[e.jsxs(Ee,{className:"inline-flex items-center gap-2",children:[e.jsx(Be,{})," HeroPanel"]}),e.jsx("p",{className:"mt-2 text-sm text-text-secondary",children:"The first-row route header surface."})]}),e.jsxs(Ms,{className:"p-5",children:[e.jsx(h,{className:"text-text-secondary",children:"SurfacePanel"}),e.jsx("p",{className:"mt-2 text-sm text-text-secondary",children:"The shared glass container for dense app work."})]})]})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Actions"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsx(n,{label:"PrimaryAction",children:e.jsx(Ds,{className:"px-4 py-2 text-sm font-medium",children:"Publish now"})}),e.jsx(n,{label:"ControlButton",children:e.jsx(Fs,{className:"px-4 py-2 text-sm font-medium",children:"Export"})}
55),e.jsx(n,{label:"ControlLink",children:e.jsx(zs,{href:"#primitives",className:"px-4 py-2 text-sm font-medium",children:"View all"})})]})]})]})})}const $=["shipped the new onboarding flow today. it took way longer than expected. next week we start the paid ads test with a small budget."],G=Xe($,{id:"demo",source:"critique",baseText:$[0],proposedText:"shipped the new onboarding flow today. it took 3 weeks longer than planned. next week we start the paid ads test with a $2k budget.",rationale:"Specific numbers beat vague claims â swap the hedging for receipts.",createdAt:0}),Ge=Xe($,{id:"demo-media",source:"chat",baseText:$[0],proposedText:`${$[0]} <media id="users/demo/inbound/image/preview.jpeg"/>`,rationale:"A generated image for this draft â Accept keeps it, Keep mine drops it.",createdAt:0});function cr(){const s=Ce(),[a,t]=o.useState(G?.hunks[0]?.id??null);return e.jsx(c,{id:"suggestion-review",kicker:"Asset Previews · Compose",title:"Suggestion review",description:"The composer's accept/deny diff treatment for Stanley's draft revisions (compose/suggestion-review.tsx). Insertions mark with bg-success/15, deletions with bg-error/10 + line-through â both tokens are theme-aware. The pill announces a pending suggestion; the bar above the draft carries rationale plus Accept all / Dismiss; the focused change keeps its accept/reject pill above the hunk (Cursor-style), even if that covers the line above.",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(i,{children:"Pill (suggestion pending)"}),e.jsx(sa,{source:"critique",stale:!1,onReview:()=>{},onDismiss:()=>{}})]}),G&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{children:[e.jsx(i,{children:"Review bar"}),e.jsx(Re,{session:G,pendingCount:G.hunks.length,onAcceptAll:()=>{},onDismissAll:()=>{}})]}),Ge&&e.jsxs("div",{children:[e.jsx(i,{children:"Review bar (media-only)"}),e.jsx(Re,{session:Ge,pendingCount:1,onAcceptAll:()=>{},onDismissAll:()=>{}})]}),e.jsxs("div",{children:[e.jsx(i,{children:"Inline diff with a focused hunk"}),e.jsx("div",{className:"rounded-[var(--radius-card)] border border-border bg-surface p-4",children:e.jsx(aa,{session:G,segIndex:0,decisions:{},activeHunkId:a,platform:"x",theme:s,onActivate:t,onAccept:()=>{},onDeny:()=>{}})})]})]})]})})}function hr(s){const a=Ce(),[t,l]=o.useState({});return o.useEffect(()=>{const r=getComputedStyle(document.documentElement),p={};for(const x of s)p[x]=r.getPropertyValue(x).trim();l(p)},[a,s]),t}const mr=[{value:"components",label:"Components"},{value:"asset-previews",label:"Asset Previews"}],bs={components:[{heading:"Start here",items:[{id:"tldr",label:"TL;DR"},{id:"tldr-where",label:"Where to use what"},{id:"tldr-ask",label:"Ask the agent"}]},{heading:"Foundations",items:[{id:"colors",label:"Color"},{id:"typography",label:"Typography"},{id:"spacing",label:"Spacing"},{id:"layers",label:"Stacking"},{id:"radii",label:"Radii & borders"},{id:"hq",label:"The /hq palette"},{id:"elevation",label:"Elevation"},{id:"motion",label:"Motion"},{id:"materials",label:"Materials"}]},{heading:"Components",items:[{id:"buttons",label:"Buttons"},{id:"badges",label:"Badges"},{id:"tag-pills",label:"Tag pills"},{id:"forms",label:"Form controls"},{id:"markdown-editor",label:"Markdown editor"},{id:"segmented",label:"Segmented control"},{id:"platform-tabs",label:"Platform selector"},{id:"cards",label:"Cards"},{id:"settings-rows",label:"Settings rows"},{id:"stat-tiles",label:"Stat tiles"},{id:"referral-payouts",label:"Referral payouts"},{id:"banners",label:"Banners"},{id:"empty-states",label:"Empty states"},{id:"trend-chart",label:"Trend chart"},{id:"stanley-watermark",label:"Stanley watermark"},{id:"mini-milestone",label:"Mini milestone"},{id:"feedback",label:"Feedback"},{id:"umux-survey",label:"UMUX survey"},{id:"overlays",label:"Overlays"},{id:"primitives",label:"Layout primitives"}]}],"asset-previews":[{heading:"Asset Previews",items:[{id:"post-previews",label:"Post preview cards"},{id:"ig-x-card",label:"IG tweet card"},{id:"today-wrap",label:"Today's wrap card"},{id:"weekly-review",label:"Weekly Review one-pager"},{id:"milestone",label:"Milestone card"},{id:"scene-graph-slide",label:"Scene-graph carousel slide"},{id:"suggestion-review",label:"Suggestion review"}]}]},xr=new Set(bs["asset-previews"].flatMap(s=>s.items.map(a=>a.id)));function hn(){const s=hr(Da),[a,t]=o.useState("components"),l=o.useRef(null);return o.useEffect(()=>{const r=window.location.hash.slice(1);r&&xr.has(r)&&(l.current=r,t("asset-previews"))},[]),o.useEffect(()=>{a==="asset-previews"&&l.current&&(document.getElementById(l.current)?.scrollIntoView(),l.current=null)},[a]),e.jsxs("div",{className:"h-screen overflow-y-auto bg-bg",children:[e.jsx("div",{className:"sticky top-0 z-20 border-b border-border bg-bg/85 backdrop-blur-xl",children:e.jsxs("div",{className:"mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-3 sm:px-10",children:[e.jsx(f,{"aria-label":"Design system section",options:mr,value:a,onValueChange:t}),e.jsx(ur,{})]})}),e.jsxs("div",{className:"mx-auto max-w-6xl px-6 pt-10 pb-24 sm:px-10",children:[e.jsx(pr,{}),e.jsxs("div",{className:"mt-12 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-12",children:[e.jsx(gr,{toc:bs[a]}),e.jsx("div",{className:"min-w-0 space-y-16",children:a==="components"?e.jsxs(e.Fragment,{children:[e.jsx(Ma,{}),e.jsx(Fa,{resolved:s}),e.jsx(dt,{}),e.jsx("div",{id:"referral-payouts",className:"scroll-mt-20",children:e.jsx(Os,{balances:[{tenantId:"example",displayName:"Example affiliate",currency:"usd",earnedCents:1e4,paidCents:6e3,outstandingCents:4e3}],payouts:[{id:"example-payout",amountCents:6e3,currency:"usd",paidAt:"2026-09-01T00:00:00Z",paidOn:"2026-09-01",method:"Bank transfer",reference:"Example receipt"}]})})]}):e.jsx(ct,{})})]})]})]})}function pr(){return e.jsxs("header",{children:[e.jsx("h1",{className:"font-display text-5xl leading-none text-text",children:"Design System"}),e.jsxs("p",{className:"mt-3 max-w-xl text-sm leading-relaxed text-text-secondary",children:["Every token and component on this page is the real thing â rendered from the live source, not a copy. Edit a token in"," ",e.jsx("span",{className:"font-code text-text",children:"app.css"})," or a component and the gallery stays in sync."]})]})}function ur(){const s=Ce();return e.jsxs("div",{className:"flex items-center justify-between gap-3 rounded-[var(--radius-control)] border border-border bg-surface px-3.5 py-2.5 shadow-[var(--shadow-xs)]",children:[e.jsx("span",{className:"stanley-kicker",children:"Theme"}),e.jsx(v,{id:"ds-theme",checked:s==="dark",onChange:a=>Rs(a.target.checked?"dark":"light"),label:s==="dark"?"Dark":"Light"})]})}function gr({toc:s}){return e.jsx("nav",{className:"mb-8 hidden self-start lg:sticky lg:top-20 lg:mb-0 lg:block lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto lg:pr-2",children:e.jsx("ul",{className:"space-y-4",children:s.map(a=>e.jsxs("li",{children:[e.jsx("span",{className:"stanley-kicker",children:a.heading}),e.jsx("ul",{className:"mt-2 space-y-0.5",children:a.items.map(t=>e.jsx("li",{children:e.jsx("a",{href:`#${t.id}`,className:"block rounded-[var(--radius-sm)] px-2.5 py-1.5 text-[13px] text-text-secondary transition-colors hover:bg-[var(--surface-inset)] hover:text-text",children:t.label})},t.id))})]},a.heading))})})}export{hn as component};
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.