<!DOCTYPE html><!--ZAMSdOmu5k27rPLPX1Vv_--><html lang="en" class="dark"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/bb3ef058b751a6ad-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/logo.png"/><link rel="preload" as="image" href="/turbo-flourish.png"/><link rel="stylesheet" href="/_next/static/css/695d0a47ad8949ca.css?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-dca0094f8340a94a.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN"/><script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/255-7924cc333d325f39.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/main-app-f9b5d20365cb8be2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/app/layout-bbdec03753106375.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/152-d860c9c4fdf1deb2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/619-ba102abea3e3d0e4.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/437-ac0285169c3378eb.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/238-4fb2a85d83a8fe1e.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><script src="/_next/static/chunks/app/page-a270d585e13da8b9.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" async=""></script><meta name="next-size-adjust" content=""/><title>Beautiful UI — Crafted primitives for AI-native interfaces</title><meta name="description" content="A small library of extremely crafted, copy-paste components for chat agents, thinking states, human-in-the-loop approvals, and everything agents need to talk to humans beautifully."/><link rel="icon" href="/icon.png?e85518666265c44d" type="image/png" sizes="320x327"/><script>(function(){try{var t=localStorage.getItem("bui-theme");document.documentElement.classList.toggle("dark",t!=="light")}catch(e){document.documentElement.classList.add("dark")}})()</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" noModule=""></script></head><body class="__variable_f367f3 __variable_3c557b font-sans"><div hidden=""><!--$--><!--/$--></div><main class="relative mx-auto max-w-[960px] bg-page shadow-[0_0_0_1px_var(--line)]"><div class="lg:grid lg:grid-cols-[288px_minmax(0,1fr)]"><aside class="flex flex-col border-b border-dashed border-line px-7 pt-16 pb-7 lg:sticky lg:top-0 lg:h-screen lg:overflow-hidden lg:border-r lg:border-b-0 lg:pt-[clamp(2.5rem,8vh,5rem)]"><div class="shrink-0"><div class="flex items-center justify-between"><img src="/logo.png" alt="Beautiful UI" class="-ml-3 size-20 shrink-0 lg:ml-0"/><div class="relative inline-grid h-9 grid-cols-2 items-center rounded-full bg-field p-0.5"><span aria-hidden="true" class="absolute inset-y-0.5 left-0.5 w-8 rounded-full bg-surface shadow-btn transition-transform duration-200" style="transform:translateX(0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);opacity:0"></span><button aria-label="Light mode" class="relative z-10 flex size-8 items-center justify-center rounded-full
          transition-colors duration-150 text-ink"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"></circle><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"></path></svg></button><button aria-label="Dark mode" class="relative z-10 flex size-8 items-center justify-center rounded-full
          transition-colors duration-150 text-ink-3 hover:text-ink-2"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path></svg></button></div></div><h1 class="mt-12 text-[21px] leading-snug font-semibold tracking-[-0.02em] text-ink text-balance lg:mt-[clamp(1.5rem,5vh,3rem)]">Beautiful UI for AI-native interfaces.</h1></div><div class="relative mt-7 border-t border-dashed border-line pt-6 lg:min-h-0 lg:flex-1 lg:overflow-hidden lg:pt-0"><div class="component-nav-scroll lg:h-full lg:overflow-y-auto lg:overscroll-contain lg:pt-6 lg:pb-16"><nav aria-label="Components"><p class="mb-2 text-[11.5px] text-ink-3">Components</p><ul class="relative flex flex-col"><span aria-hidden="true" class="pointer-events-none absolute inset-x-0 rounded-[7px] bg-hover" style="top:0;height:0;opacity:0;transition:top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease"></span><li><a href="#loading-state" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                font-medium text-ink">Loading State</a></li><li><a href="#thinking-state" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Thinking</a></li><li><a href="#streaming-text" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Streaming Text</a></li><li><a href="#approval-card" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Approval Card</a></li><li><a href="#tool-chips" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Tool Chips</a></li><li><a href="#task-rows" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Task Rows</a></li><li><a href="#chat-composer" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Chat</a></li><li><a href="#prompt-bar" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Prompt Bar</a></li><li><a href="#recommendation-card" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Recommendation Card</a></li><li><a href="#context-cards" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Context Cards</a></li><li><a href="#diff-table" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Diff Table</a></li><li><a href="#records-table" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Records Table</a></li><li><a href="#filter-table" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Filter Table</a></li><li><a href="#sidebar-nav" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Sidebar Nav</a></li><li><a href="#search" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Search</a></li><li><a href="#insight-cards" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Insight Cards</a></li><li><a href="#code-block" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Code Block</a></li><li><a href="#fine-tune-card" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Fine-tune Card</a></li><li><a href="#selection-actions" class="relative z-10 flex items-center rounded-[7px] px-2 py-[5px]
                text-[12.5px] transition-colors duration-150
                text-ink-2 hover:text-ink">Selection Actions</a></li></ul></nav></div></div><div class="mt-8 shrink-0 lg:mt-6"><a href="https://turbodesign.co/" target="_blank" rel="noreferrer" class="block rounded-control px-2 py-1"><span class="flex min-w-0 flex-col gap-1"><span class="flex min-w-0 items-center gap-1.5"><span class="block truncate text-[12.5px] font-medium leading-tight text-ink">Built by Turbo</span><span aria-hidden="true" class="relative h-3 w-6 shrink-0 overflow-hidden"><img src="/turbo-flourish.png" alt="" class="absolute top-1/2 left-0 w-9 max-w-none -translate-y-[46%]"/></span></span><span class="block truncate text-[12px] leading-tight text-ink-2">Product design studio</span></span><span class="mt-1.5 block text-[12px] leading-relaxed text-ink-2 text-pretty">Get expert product design for your business.</span></a><a href="https://cal.com/shane-levine-7bnfdw/30min?overlayCalendar=true" target="_blank" rel="noreferrer" class="mt-2.5 inline-flex h-7 items-center gap-1.5 rounded-full bg-field px-2.5 text-[11.5px] font-medium text-ink shadow-btn transition-[background-color,transform] duration-150 hover:bg-hover active:scale-[0.96]">Book a call<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a></div></aside><div class="min-w-0"><div class="flex w-full flex-col pt-8 pb-12 lg:pt-10 lg:pb-16"><section id="loading-state" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 0ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">01</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Loading State</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Pixel-grid loader with shimmer and elapsed time.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex w-fit items-center gap-2.5"><span aria-hidden="true" class="grid grid-cols-[repeat(3,4px)] gap-[1.5px]"><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 90ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 180ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 270ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 0ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 90ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 180ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 90ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 180ms infinite"></span><span class="size-[4px] bg-ink rounded-[1px]" style="opacity:0.15;animation:pixel-on 650ms ease-in-out 270ms infinite"></span></span><span class="bg-clip-text text-[13px] font-medium text-transparent" style="background-image:linear-gradient(90deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%);background-size:200% 100%;animation:shimmer-text 1.4s linear infinite">Churning</span><span class="font-mono text-[12px] text-ink-3 tabular-nums">0.0s</span></div></div><div class="absolute bottom-2.5 left-1/2 flex -translate-x-1/2 rounded-full bg-field p-0.5"><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  bg-surface text-ink shadow-btn">Drive</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">Dots</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">Orbit</button></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="thinking-state" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 60ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">02</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Thinking</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Expandable traces — steps, reasoning, search, coding.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex min-h-[176px] w-full max-w-95 flex-col"><button type="button" aria-expanded="false" class="-mx-1.5 flex w-fit items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-100 hover:bg-hover-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="var(--ink-2)"><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"></path></svg><span class="bg-clip-text text-[13px] font-medium whitespace-nowrap text-transparent" style="background-image:linear-gradient(90deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%);background-size:200% 100%;animation:shimmer-text 1.4s linear infinite">Thinking</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></button><div class="grid transition-[grid-template-rows,opacity] duration-400" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="relative mt-1 ml-[5px] pl-4"><span aria-hidden="true" class="absolute left-[3px] w-px bg-line" style="top:-8px;height:0;transition:height 500ms cubic-bezier(0.23,1,0.32,1)"></span><div class="flex flex-col gap-1 py-1"></div></div></div></div></div></div><div class="absolute bottom-2.5 left-1/2 flex -translate-x-1/2 rounded-full bg-field p-0.5"><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  bg-surface text-ink shadow-btn">Steps</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">Reasoning</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">Search</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">Coding</button></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="streaming-text" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 120ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">03</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Streaming Text</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Streamed answer with inline sources, actions, and follow-ups.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="min-h-[15.5rem] w-full max-w-95"><p class="text-[13px] leading-relaxed text-ink"><span class="ml-0.5 inline-block h-3 w-0.5 translate-y-0.5 rounded-full bg-ink" style="animation:fade-in 150ms ease-out both"></span></p><div class="mt-2 flex items-center gap-0.5 transition-opacity duration-400" style="opacity:0;pointer-events:none"><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover-2 hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><g><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></g></svg></button><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover-2 hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"></path></svg></button><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover-2 hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88z"></path></svg></button><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover-2 hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2M9 18.12L10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88z"></path></svg></button><button type="button" aria-expanded="false" class="ml-1.5 flex items-center gap-1.5 rounded-[6px] px-1 py-0.5 text-left transition-colors duration-150 hover:bg-hover"><span class="flex -space-x-1"><img src="data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 64 64&#x27;%3E%3Crect width=&#x27;64&#x27; height=&#x27;64&#x27; rx=&#x27;16&#x27; fill=&#x27;%231f7a5f&#x27;/%3E%3Cpath d=&#x27;M20 36c0 7 5.4 12 12 12s12-5 12-12H20Z&#x27; fill=&#x27;%23fff&#x27;/%3E%3Ccircle cx=&#x27;32&#x27; cy=&#x27;25&#x27; r=&#x27;11&#x27; fill=&#x27;%23bff3dd&#x27;/%3E%3Cpath d=&#x27;M24 24c4-7 13-7 17 0&#x27; fill=&#x27;none&#x27; stroke=&#x27;%231f7a5f&#x27; stroke-width=&#x27;4&#x27; stroke-linecap=&#x27;round&#x27;/%3E%3C/svg%3E" alt="" class="source-avatar size-3.5 rounded-full bg-surface shadow-[0_0_0_1.5px_var(--canvas)]"/><img src="data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 64 64&#x27;%3E%3Crect width=&#x27;64&#x27; height=&#x27;64&#x27; rx=&#x27;16&#x27; fill=&#x27;%232f6fec&#x27;/%3E%3Cpath d=&#x27;M15 43 27 31l8 7 14-18&#x27; fill=&#x27;none&#x27; stroke=&#x27;%23fff&#x27; stroke-width=&#x27;7&#x27; stroke-linecap=&#x27;round&#x27; stroke-linejoin=&#x27;round&#x27;/%3E%3Ccircle cx=&#x27;49&#x27; cy=&#x27;20&#x27; r=&#x27;5&#x27; fill=&#x27;%23bfe0ff&#x27;/%3E%3C/svg%3E" alt="" class="source-avatar size-3.5 rounded-full bg-surface shadow-[0_0_0_1.5px_var(--canvas)]"/><img src="data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 64 64&#x27;%3E%3Crect width=&#x27;64&#x27; height=&#x27;64&#x27; rx=&#x27;16&#x27; fill=&#x27;%23e56d24&#x27;/%3E%3Cpath d=&#x27;M17 45V25h8v20h-8Zm11 0V16h8v29h-8Zm11 0V30h8v15h-8Z&#x27; fill=&#x27;%23fff&#x27;/%3E%3Cpath d=&#x27;M16 49h32&#x27; stroke=&#x27;%23ffd6b8&#x27; stroke-width=&#x27;4&#x27; stroke-linecap=&#x27;round&#x27;/%3E%3C/svg%3E" alt="" class="source-avatar size-3.5 rounded-full bg-surface shadow-[0_0_0_1.5px_var(--canvas)]"/></span><span class="text-[12px] text-ink-2">10 sources</span></button></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="mt-1.5 flex flex-col rounded-[10px] bg-inset p-1 shadow-hairline"><a href="https://scoopdata.io/" target="_blank" rel="noreferrer" class="flex items-center gap-2 rounded-[6px] px-1.5 py-1 text-[12px] text-ink-2 transition-colors duration-150 hover:bg-hover hover:text-ink"><img src="data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 64 64&#x27;%3E%3Crect width=&#x27;64&#x27; height=&#x27;64&#x27; rx=&#x27;16&#x27; fill=&#x27;%231f7a5f&#x27;/%3E%3Cpath d=&#x27;M20 36c0 7 5.4 12 12 12s12-5 12-12H20Z&#x27; fill=&#x27;%23fff&#x27;/%3E%3Ccircle cx=&#x27;32&#x27; cy=&#x27;25&#x27; r=&#x27;11&#x27; fill=&#x27;%23bff3dd&#x27;/%3E%3Cpath d=&#x27;M24 24c4-7 13-7 17 0&#x27; fill=&#x27;none&#x27; stroke=&#x27;%231f7a5f&#x27; stroke-width=&#x27;4&#x27; stroke-linecap=&#x27;round&#x27;/%3E%3C/svg%3E" alt="" class="source-avatar size-4 rounded-[4px]"/><span class="animated-underline">Scoop Data</span><span class="ml-auto font-mono text-[10.5px] text-ink-3">scoopdata.io</span></a><a href="https://trends.google.com/trends/" target="_blank" rel="noreferrer" class="flex items-center gap-2 rounded-[6px] px-1.5 py-1 text-[12px] text-ink-2 transition-colors duration-150 hover:bg-hover hover:text-ink"><img src="data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 64 64&#x27;%3E%3Crect width=&#x27;64&#x27; height=&#x27;64&#x27; rx=&#x27;16&#x27; fill=&#x27;%232f6fec&#x27;/%3E%3Cpath d=&#x27;M15 43 27 31l8 7 14-18&#x27; fill=&#x27;none&#x27; stroke=&#x27;%23fff&#x27; stroke-width=&#x27;7&#x27; stroke-linecap=&#x27;round&#x27; stroke-linejoin=&#x27;round&#x27;/%3E%3Ccircle cx=&#x27;49&#x27; cy=&#x27;20&#x27; r=&#x27;5&#x27; fill=&#x27;%23bfe0ff&#x27;/%3E%3C/svg%3E" alt="" class="source-avatar size-4 rounded-[4px]"/><span class="animated-underline">Trends Index</span><span class="ml-auto font-mono text-[10.5px] text-ink-3">trends.google.com</span></a><a href="https://marketbasket.io/" target="_blank" rel="noreferrer" class="flex items-center gap-2 rounded-[6px] px-1.5 py-1 text-[12px] text-ink-2 transition-colors duration-150 hover:bg-hover hover:text-ink"><img src="data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 64 64&#x27;%3E%3Crect width=&#x27;64&#x27; height=&#x27;64&#x27; rx=&#x27;16&#x27; fill=&#x27;%23e56d24&#x27;/%3E%3Cpath d=&#x27;M17 45V25h8v20h-8Zm11 0V16h8v29h-8Zm11 0V30h8v15h-8Z&#x27; fill=&#x27;%23fff&#x27;/%3E%3Cpath d=&#x27;M16 49h32&#x27; stroke=&#x27;%23ffd6b8&#x27; stroke-width=&#x27;4&#x27; stroke-linecap=&#x27;round&#x27;/%3E%3C/svg%3E" alt="" class="source-avatar size-4 rounded-[4px]"/><span class="animated-underline">Market Basket</span><span class="ml-auto font-mono text-[10.5px] text-ink-3">marketbasket.io</span></a></div></div></div><div class="mt-2.5 transition-opacity duration-400" style="opacity:0;pointer-events:none"><p class="text-[12px] font-medium text-ink-2">Follow-ups</p><div class="mt-0.5 flex flex-col"><button class="-mx-1.5 flex items-center gap-2 rounded-[7px] border-b border-line px-1.5 py-1.5 text-left text-[12.5px] text-ink transition-colors duration-100 hover:bg-hover-2" style="opacity:0"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M9 10l-5 5 5 5"></path><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>Which flavors sell best in winter</button><button class="-mx-1.5 flex items-center gap-2 rounded-[7px] border-b border-line px-1.5 py-1.5 text-left text-[12.5px] text-ink transition-colors duration-100 hover:bg-hover-2" style="opacity:0"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M9 10l-5 5 5 5"></path><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>Compare gelato and soft serve margins</button></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="approval-card" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 180ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">04</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Approval Card</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Human-in-the-loop questions the agent asks before acting.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex min-h-[196px] w-full max-w-80 flex-col items-stretch"><div class="w-full self-start overflow-hidden rounded-card bg-surface shadow-card"><div class="primitive-card-pad" style="animation:fade-up 350ms cubic-bezier(0.23,1,0.32,1) both"><div class="flex items-start justify-between gap-3"><span class="text-[13px] font-medium text-ink">How many flavors should we launch?</span><button type="button" aria-label="Dismiss" class="primitive-icon-button shrink-0 text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"></path></svg></button></div><div class="mt-2 flex flex-col gap-0.5"><button type="button" aria-pressed="false" class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover"><span class="flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                        rounded-full
                        shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"><span class="size-1.5 rounded-full bg-canvas transition-transform duration-200" style="transform:scale(0)"></span></span><span class="text-[13px] transition-colors duration-200 text-ink-2">Three (core line)</span></button><button type="button" aria-pressed="false" class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover"><span class="flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                        rounded-full
                        shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"><span class="size-1.5 rounded-full bg-canvas transition-transform duration-200" style="transform:scale(0)"></span></span><span class="text-[13px] transition-colors duration-200 text-ink-2">Five (full case)</span></button><button type="button" aria-pressed="false" class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover"><span class="flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                        rounded-full
                        shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"><span class="size-1.5 rounded-full bg-canvas transition-transform duration-200" style="transform:scale(0)"></span></span><span class="text-[13px] transition-colors duration-200 text-ink-2">Just one hero</span></button><label class="-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-100 focus-within:bg-hover hover:bg-hover"><span aria-hidden="true" class="size-4 shrink-0"></span><input placeholder="Type something…" aria-label="Custom answer" class="min-w-0 flex-1 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3" value=""/></label></div></div><div class="primitive-card-footer flex items-center justify-between"><span class="flex items-center gap-2"><button type="button" aria-label="Previous" disabled="" class="flex size-6 items-center justify-center rounded-[5px] text-ink-3 transition-colors duration-100 enabled:hover:bg-hover enabled:hover:text-ink-2 disabled:opacity-35"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg></button><span class="flex items-center gap-1"><button type="button" aria-label="Go to question 1" aria-current="step" class="rounded-full transition-all duration-300 disabled:cursor-default" style="width:9px;height:9px;border:2.5px solid var(--ink)"></button><button type="button" aria-label="Go to question 2" class="rounded-full transition-all duration-300 disabled:cursor-default" style="width:7px;height:7px;border:1.5px solid var(--ink-3)"></button><button type="button" aria-label="Go to question 3" class="rounded-full transition-all duration-300 disabled:cursor-default" style="width:7px;height:7px;border:1.5px solid var(--ink-3)"></button></span><button type="button" aria-label="Next" class="flex size-6 items-center justify-center rounded-[5px] text-ink-3 transition-colors duration-100 enabled:hover:bg-hover enabled:hover:text-ink-2 disabled:opacity-35"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"></path></svg></button></span><button type="button" aria-label="Next question" disabled="" class="-mr-0.5 flex size-7 items-center justify-center rounded-[8px] transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.96]" style="background:var(--field);color:var(--ink-3);box-shadow:var(--shadow-btn)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"></path></svg></button></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="tool-chips" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">05</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Tool Chips</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Code edits and tool calls as compact chips.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="min-h-[220px] w-full max-w-80 pb-1"><button type="button" aria-expanded="true" class="-mx-1.5 flex w-fit items-center gap-1.5 rounded-control px-1.5 py-1 text-[12.5px] text-ink-2 transition-colors duration-100 hover:bg-hover-2"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" style="transform:rotate(0deg)"><path d="M6 9l6 6 6-6"></path></svg><span class="tabular-nums">4 tool calls, 2 messages</span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1"><div class="-mx-1 overflow-hidden px-1.5 pb-1"><div class="mt-1.5 flex flex-col gap-1"></div></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="task-rows" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">06</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Task Rows</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Live agent task status — running, failed, completed.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex w-full max-w-110 flex-col min-h-[196px] gap-2"><div class="self-stretch overflow-hidden transition-[border-radius] duration-300 bg-surface shadow-card" style="border-radius:22px;animation:fade-up 450ms cubic-bezier(0.23,1,0.32,1) 0ms both"><button type="button" aria-expanded="false" class="flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset"><span class="flex size-6 shrink-0 items-center justify-center"><span class="flex size-5.5 shrink-0 items-center justify-center rounded-full text-white
        bg-green" style="animation:pop-in 300ms cubic-bezier(0.23,1,0.32,1) both"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg></span></span><span class="min-w-0 flex-1 truncate text-[13px] font-medium text-ink">Verified vendor records</span><span class="text-[12.5px] text-ink-2 tabular-nums">12 suppliers</span><span class="inline-flex h-5.5 items-center rounded-full bg-green-tint px-2 text-[11.5px] font-medium text-green">Completed</span><span aria-hidden="true" class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5"><span aria-hidden="true" class="mx-auto h-full w-px bg-line"></span><div class="flex flex-col gap-1.5"><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Matched tax and contact IDs</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">12/12</span></div><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Flagged stale records</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">0</span></div></div></div></div></div></div><div class="self-stretch overflow-hidden transition-[border-radius] duration-300 bg-surface shadow-card" style="border-radius:22px;animation:fade-up 450ms cubic-bezier(0.23,1,0.32,1) 80ms both"><button type="button" aria-expanded="false" class="flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset"><span class="flex size-6 shrink-0 items-center justify-center"><span class="relative inline-flex shrink-0 items-center justify-center" style="width:24px;height:24px"><svg width="24" height="24" class="absolute inset-0" style="animation:spin 1.1s linear infinite"><circle cx="12" cy="12" r="11" fill="none" stroke="var(--line)" stroke-width="2"></circle><circle cx="12" cy="12" r="11" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round" stroke-dasharray="19.352210746113126 49.76282763286232"></circle></svg><span class="relative text-[10.5px] font-semibold tabular-nums text-ink">2</span></span></span><span class="min-w-0 flex-1 truncate text-[13px] font-medium text-ink">Build reorder task list</span><span class="text-[12.5px] text-ink-2 tabular-nums">7 SKUs</span><span aria-hidden="true" class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5"><span aria-hidden="true" class="mx-auto h-full w-px bg-line"></span><div class="flex flex-col gap-1.5"><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Reading POS export</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">3 files</span></div><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Scoring stockout risk</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">68%</span></div></div></div></div></div></div><div class="self-stretch overflow-hidden transition-[border-radius] duration-300 bg-surface shadow-card" style="border-radius:22px;animation:fade-up 450ms cubic-bezier(0.23,1,0.32,1) 160ms both"><button type="button" aria-expanded="false" class="flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset"><span class="flex size-6 shrink-0 items-center justify-center"><span class="relative inline-flex shrink-0 items-center justify-center" style="width:24px;height:24px"><svg width="24" height="24" class="absolute inset-0"><circle cx="12" cy="12" r="11" fill="none" stroke="var(--line)" stroke-width="2"></circle></svg><span class="relative text-[10.5px] font-semibold tabular-nums text-ink">3</span></span></span><span class="min-w-0 flex-1 truncate text-[13px] font-medium text-ink">Draft supplier emails</span><span class="text-[12.5px] text-ink-2 tabular-nums">2 messages</span><span aria-hidden="true" class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5"><span aria-hidden="true" class="mx-auto h-full w-px bg-line"></span><div class="flex flex-col gap-1.5"><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Cone supplier follow-up</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">draft</span></div><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Pistachio reorder note</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">draft</span></div></div></div></div></div></div></div></div><div class="absolute bottom-2.5 left-1/2 flex -translate-x-1/2 rounded-full bg-field p-0.5"><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  bg-surface text-ink shadow-btn">Capsules</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">List</button></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="chat-composer" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">07</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Chat</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Tabbed chat panel with reasoning replies and a composer.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex h-[288px] w-full max-w-95 flex-col self-start overflow-hidden rounded-[14px] bg-surface shadow-card"><div class="flex shrink-0 items-center justify-between border-b border-line p-1.5"><div class="flex items-center"><button type="button" aria-pressed="true" class="rounded-[6px] px-2 py-[3px] text-[13px] text-ink transition-[background-color,opacity] duration-100 bg-field">Flavors</button><button type="button" aria-pressed="false" class="rounded-[6px] px-2 py-[3px] text-[13px] text-ink transition-[background-color,opacity] duration-100 opacity-50 hover:opacity-75">Suppliers</button></div><div class="flex items-center gap-1"><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"></path></svg></button><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></g></svg></button><button type="button" aria-label="Action" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink-2"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g fill="currentColor" stroke="none"><circle cx="5" cy="12" r="1.8"></circle><circle cx="12" cy="12" r="1.8"></circle><circle cx="19" cy="12" r="1.8"></circle></g></svg></button></div></div><div class="flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto px-3 pt-2.5 pb-1"><div class="flex justify-end pl-14"><div class="rounded-xl bg-field px-3 py-1.5 text-[13px] leading-[1.4] text-ink transition-[opacity,transform] duration-300" style="opacity:1;transform:translateY(0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)">Compare mint chip to last summer</div></div><div class="flex w-full flex-col gap-1.5 transition-[opacity,filter,transform] duration-400" style="opacity:1;filter:blur(0);transform:scale(1);transform-origin:top left;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);animation:fade-up 400ms cubic-bezier(0.23,1,0.32,1) both"><div class="flex items-center gap-1 text-[12px] leading-[1.3]"><span class="font-medium text-ink">Sales History</span><span class="text-ink-2">Flavor Data</span><span class="text-ink">for <!-- -->4s</span></div><p class="text-[13px] leading-normal text-ink">Pulled 3 summers of mint chip sales for comparison.</p></div><div class="flex w-full flex-col gap-1.5 transition-[opacity,filter,transform] duration-400" style="opacity:1;filter:blur(0);transform:scale(1);transform-origin:top left;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);animation:fade-up 400ms cubic-bezier(0.23,1,0.32,1) both"><div class="flex items-center gap-1 text-[12px] leading-[1.3]"><span class="font-medium text-ink">Comparison</span><span class="text-ink-2">Trend Detection</span><span class="text-ink">for <!-- -->2s</span></div><p class="text-[13px] leading-normal text-ink">Mint chip is up 12% with stronger weekend peaks.</p></div></div><div class="mt-auto shrink-0 p-1.5"><div role="presentation" class="flex cursor-text flex-col gap-2 rounded-control border border-line bg-field p-2.5 shadow-[0_1px_2px_rgba(0,0,0,0.035)] transition-[border-color,box-shadow] duration-150 focus-within:border-line-strong focus-within:shadow-[0_1px_2px_rgba(0,0,0,0.025)]"><input placeholder="Prompt or tag a flavor with @" aria-label="Chat prompt" class="min-h-4.5 bg-transparent text-[13px] leading-[1.4] text-ink outline-none placeholder:text-ink-3" value=""/><div class="flex items-center justify-end"><button type="button" aria-label="Send" disabled="" class="flex size-7 items-center justify-center rounded-[8px] transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.96]" style="background:var(--line-strong);color:var(--ink-2)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"></path></svg></button></div></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="prompt-bar" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">08</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Prompt Bar</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Composer with @ sources, / commands, model picker, and dictation.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex min-h-[384px] w-full max-w-105 flex-col justify-end pb-8"><div class="relative"><div class="relative isolate flex flex-col gap-1.5 overflow-hidden border border-line bg-surface p-1.5 shadow-card transition-[border-color,border-radius] duration-150 focus-within:border-line-strong rounded-[14px]"><canvas aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 h-full w-full" style="border-radius:inherit"></canvas><span aria-hidden="true" class="pointer-events-none absolute invisible whitespace-pre text-[13px] leading-[18px]"></span><div class="grid items-end gap-x-1 gap-y-1.5 grid-cols-[28px_minmax(0,1fr)_auto_28px_28px]"><button type="button" aria-label="Add attachments and sources" aria-expanded="false" class="flex size-7 shrink-0 items-center justify-center justify-self-start text-ink-3 transition-[background-color,color,transform] duration-150 hover:bg-hover hover:text-ink active:scale-[0.94] rounded-[8px]  col-start-1 row-start-1"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg></button><textarea rows="1" placeholder="Write a message…" aria-label="Prompt" class="min-h-7 min-w-0 w-full resize-none bg-transparent px-1 py-[5px] text-[13px] leading-[18px] text-ink outline-none [overflow-wrap:anywhere] placeholder:text-ink-3 col-start-2 row-start-1"></textarea><button type="button" aria-expanded="false" aria-label="Choose model" class="flex h-7 shrink-0 items-center gap-1 px-1.5 text-[12px] font-medium text-ink-2 transition-colors duration-150 hover:bg-hover hover:text-ink rounded-[8px] col-start-3 row-start-1">Vanilla 1<span class="text-ink-3"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg></span></button><button type="button" aria-label="Start dictation" aria-pressed="false" class="flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-150 active:scale-[0.94] rounded-[8px] text-ink-3 hover:bg-hover hover:text-ink col-start-4 row-start-1"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3"></path></g></svg></button><button type="button" aria-label="Send" disabled="" class="flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.94] rounded-[8px] col-start-5 row-start-1" style="background:var(--line-strong);color:var(--ink-2)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"></path></svg></button></div></div></div></div></div><div class="absolute bottom-2.5 left-1/2 flex -translate-x-1/2 rounded-full bg-field p-0.5"><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  bg-surface text-ink shadow-btn">Rounded</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">Pill</button></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="recommendation-card" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">09</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Recommendation Card</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Agent suggestion with a confidence meter and actions.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-95 overflow-hidden rounded-card bg-surface shadow-card"><div class="primitive-card-pad"><span class="text-[13px] font-semibold text-ink">Want me to place this restock order?</span><p class="mt-1.5 min-h-12 text-[13px] leading-relaxed text-ink-2" style="animation:fade-in 180ms ease-out both">Reorder waffle cones from<!-- --> <code class="rounded-md bg-accent-tint px-1.5 py-0.5 font-mono text-[12px] text-accent-ink">cone_king</code> <!-- -->with lead time<!-- --> <code class="rounded-md bg-accent-tint px-1.5 py-0.5 font-mono text-[12px] text-accent-ink">7_days</code>.</p></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.16, 1, 0.3, 1)"><div class="overflow-hidden"><div class="border-t border-line bg-inset px-2 py-2"><p class="px-1.5 pb-1 text-[11px] font-medium text-ink-3">Other options</p><button type="button" class="flex w-full items-center gap-2.5 rounded-control px-1.5 py-1.5 text-left transition-colors duration-100 hover:bg-hover"><span class="flex items-end gap-0.5"><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--orange)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--orange)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span></span><span class="min-w-0 flex-1 truncate text-[12.5px] text-ink">Switch to vanilla_madagascar</span><span class="shrink-0 text-[11px] text-ink-3">Needs review</span></button><button type="button" class="flex w-full items-center gap-2.5 rounded-control px-1.5 py-1.5 text-left transition-colors duration-100 hover:bg-hover"><span class="flex items-end gap-0.5"><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span></span><span class="min-w-0 flex-1 truncate text-[12.5px] text-ink">Full restock across every SKU</span><span class="shrink-0 text-[11px] text-ink-3">No signal</span></button></div></div></div><div class="primitive-card-footer flex items-center justify-between gap-3 border-t border-line bg-inset"><span class="flex items-center gap-2"><span class="flex items-end gap-0.5"><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--green)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--green)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--green)"></span></span><span class="text-[12.5px] font-medium text-ink-2">High confidence</span></span><span class="-mr-0.5 flex items-center gap-2"><button type="button" aria-expanded="false" class="h-7 rounded-control px-2.5 text-[12.5px] font-medium shadow-btn
              transition-[background-color,transform] duration-100 active:scale-[0.96]
              bg-surface text-ink hover:bg-hover">Alternatives</button><button type="button" class="h-7 rounded-control px-3 text-[12.5px] font-medium
              shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_0_0_1px_rgba(16,24,40,0.12),0_1px_2px_rgba(16,24,40,0.1)]
              transition-[background-color,transform] duration-150 active:scale-[0.96]
              bg-accent text-white">Accept</button></span></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="context-cards" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">10</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Context Cards</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Retrieved knowledge chunks with their sources.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex w-full max-w-95 flex-col gap-2"><div class="flex items-center gap-2 px-0.5" style="animation:fade-in 400ms ease-out both"><span class="text-[13px] font-semibold text-ink">All chunks</span><span class="inline-flex h-5 items-center rounded-md bg-inset px-1.5 text-[11.5px] font-medium text-ink-2 shadow-hairline tabular-nums">32</span></div><div class="overflow-hidden rounded-card bg-surface shadow-card" style="animation:fade-up 400ms cubic-bezier(0.23,1,0.32,1) 0ms both"><div class="primitive-card-bar flex items-center gap-2.5 border-b border-line"><span class="flex min-w-0 items-center gap-1.5 text-[13px] font-medium text-ink"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h10"></path></svg><span class="truncate">Vendor onboarding rule</span></span><span class="ml-auto shrink-0 text-[12px] text-ink-3 tabular-nums">290 characters</span></div><p class="px-3 pt-2 pb-1 text-[12.5px] leading-relaxed text-ink-2">Cold-chain certification must be verified before a new dairy can be added to the reorder workflow.</p><div class="px-3 pb-3"><span class="inline-flex h-6 items-center gap-1.5 rounded-full bg-inset px-2 text-[12px] font-medium text-ink-2 shadow-btn transition-[opacity,transform,background-color] duration-300 hover:bg-hover" style="opacity:0;transform:scale(0.95);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-delay:0ms"><span class="flex size-3.5 items-center justify-center rounded-[4px] bg-red text-[7px] font-bold text-white">PDF</span>Dairy Onboarding SOP.pdf<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M7 7h10v10"></path></svg></span></div></div><div class="overflow-hidden rounded-card bg-surface shadow-card" style="animation:fade-up 400ms cubic-bezier(0.23,1,0.32,1) 100ms both"><div class="primitive-card-bar flex items-center gap-2.5 border-b border-line"><span class="flex min-w-0 items-center gap-1.5 text-[13px] font-medium text-ink"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h10"></path></svg><span class="truncate">Seasonal demand row</span></span><span class="ml-auto shrink-0 text-[12px] text-ink-3 tabular-nums">1,250 characters</span></div><p class="px-3 pt-2 pb-1 text-[12.5px] leading-relaxed text-ink-2">Q4 velocity table: pistachio +18%, vanilla +6%, rocky road -11%; retire flavors below 40 scoops weekly.</p><div class="px-3 pb-3"><span class="inline-flex h-6 items-center gap-1.5 rounded-full bg-inset px-2 text-[12px] font-medium text-ink-2 shadow-btn transition-[opacity,transform,background-color] duration-300 hover:bg-hover" style="opacity:0;transform:scale(0.95);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-delay:80ms"><span class="flex size-3.5 items-center justify-center rounded-[4px] bg-green text-[7px] font-bold text-white">CSV</span>Sales Velocity Export.csv<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M7 7h10v10"></path></svg></span></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="diff-table" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">11</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Diff Table</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">AI-proposed edits sweeping through tabular data.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-95"><div class="relative overflow-hidden rounded-card bg-surface shadow-card"><div class="primitive-card-bar flex items-center justify-between border-b border-line"><span class="text-[12.5px] font-medium text-ink">Proposed menu cleanup</span></div><table class="w-full table-fixed border-collapse text-left"><colgroup><col class="w-[34%]"/><col class="w-[30%]"/><col class="w-[36%]"/></colgroup><thead><tr class="border-b border-line"><th class="primitive-table-cell text-[12px] font-medium text-ink-3">Flavor</th><th class="primitive-table-cell text-[12px] font-medium text-ink-3">Category</th><th class="primitive-table-cell text-[12px] font-medium text-ink-3">Supplier</th></tr></thead><tbody><tr class="border-b border-line transition-colors duration-400 last:border-0 hover:bg-hover"><td class="primitive-table-cell text-[13px] font-medium tabular-nums transition-colors duration-400" style="color:var(--ink)">Rocky Road</td><td class="primitive-table-cell"><span class="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-inset px-2 text-[11.5px] font-medium shadow-hairline transition-opacity duration-400" style="opacity:1"><span class="size-1.5 rounded-full bg-accent"></span><span class="text-ink-2">Classic</span></span></td><td class="primitive-table-cell text-[12.5px] whitespace-nowrap transition-colors duration-400" style="color:var(--ink-2);text-decoration-line:none;text-decoration-color:color-mix(in srgb, var(--red) 50%, transparent)">aurora-scoops</td></tr><tr class="border-b border-line transition-colors duration-400 last:border-0 hover:bg-hover"><td class="primitive-table-cell text-[13px] font-medium tabular-nums transition-colors duration-400" style="color:var(--ink)">Bubblegum</td><td class="primitive-table-cell"><span class="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-inset px-2 text-[11.5px] font-medium shadow-hairline transition-opacity duration-400" style="opacity:1"><span class="size-1.5 rounded-full bg-ink-3"></span><span class="text-ink-2">Retro</span></span></td><td class="primitive-table-cell text-[12.5px] whitespace-nowrap transition-colors duration-400" style="color:var(--ink-2);text-decoration-line:none;text-decoration-color:color-mix(in srgb, var(--red) 50%, transparent)">kumo-creamery</td></tr><tr class="border-b border-line transition-colors duration-400 last:border-0 hover:bg-hover"><td class="primitive-table-cell text-[13px] font-medium tabular-nums transition-colors duration-400" style="color:var(--ink)">Mint Chip</td><td class="primitive-table-cell"><span class="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-inset px-2 text-[11.5px] font-medium shadow-hairline transition-opacity duration-400" style="opacity:1"><span class="size-1.5 rounded-full bg-accent"></span><span class="text-ink-2">Classic</span></span></td><td class="primitive-table-cell text-[12.5px] whitespace-nowrap transition-colors duration-400" style="color:var(--ink-2);text-decoration-line:none;text-decoration-color:color-mix(in srgb, var(--red) 50%, transparent)">maple-orbit</td></tr><tr><td colSpan="3" class="p-0"><div class="grid transition-[grid-template-rows,opacity] duration-400" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden" style="background:var(--green-tint)"><div class="grid grid-cols-[34%_30%_36%] items-center border-t border-line"><span class="primitive-table-cell text-[13px] font-medium text-green tabular-nums">Pistachio</span><span class="primitive-table-cell"><span class="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-surface px-2 text-[11.5px] font-medium shadow-hairline"><span class="size-1.5 rounded-full bg-green"></span><span class="text-ink-2">Seasonal</span></span></span><span class="primitive-table-cell text-[13px] text-green">maple-orbit</span></div></div></div></td></tr></tbody></table></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="records-table" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">12</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Records Table</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">CRM-style grid with tags, sorting, and relationship status.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="records-shell"><div class="records-scroll" tabindex="0" aria-label="Companies table. Scroll horizontally and vertically to view all columns and records."><table class="records-table"><colgroup><col class="records-company-col"/><col class="records-category-col"/><col class="records-last-col"/><col class="records-strength-col"/><col class="records-link-col"/></colgroup><thead><tr><th class="records-header-cell records-sticky-cell"><div class="records-company-header"><label class="records-checkbox" title="Select all companies"><input type="checkbox" aria-label="Select all companies"/><span class="records-checkbox-box "></span></label><span>Company</span></div></th><th class="records-header-cell "><button type="button" class="records-header-button"><span class="records-header-icon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20.6 13.4-8.6 8.6-8-8V4h10l6.6 6.6a2 2 0 0 1 0 2.8zM7 7h.01"></path></svg></span><span class="truncate">Categories</span></button></th><th class="records-header-cell "><button type="button" class="records-header-button"><span class="records-header-icon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18M3 12h12M3 19h7M18 15v6m-3-3h6"></path></svg></span><span class="truncate">Last interaction</span><span class="records-sort "><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"></path></svg></span></button></th><th class="records-header-cell "><button type="button" class="records-header-button"><span class="records-header-icon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.5a5.5 5.5 0 0 0 0-7.9z"></path></svg></span><span class="truncate">Connection strength</span><span class="records-sort "><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"></path></svg></span></button></th><th class="records-header-cell "><button type="button" class="records-header-button"><span class="records-header-icon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1"></path></svg></span><span class="truncate">Links</span></button></th></tr></thead><tbody><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Andes Snow Creamery — Quito"><input type="checkbox" aria-label="Select Andes Snow Creamery — Quito"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">A</span><a href="#" class="records-company-name ">Andes Snow Creamery — Quito</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#c84f9d"><span class="records-tag-dot" style="background:#c84f9d"></span>Catering</span></div></td><td class="records-cell ">almost 2 years ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Aurora Scoops — Reykjavík"><input type="checkbox" aria-label="Select Aurora Scoops — Reykjavík"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">A</span><a href="https://aurora-scoops.example.com" class="records-company-name has-link">Aurora Scoops — Reykjavík</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>Seasonal</span></div></td><td class="records-cell ">9 days ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--green)"></span>Very strong</span></td><td class="records-cell"><a class="records-link" href="https://aurora-scoops.example.com" target="_blank" rel="noreferrer">aurora-scoops.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Blue Fig Gelato — Florence"><input type="checkbox" aria-label="Select Blue Fig Gelato — Florence"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">B</span><a href="https://blue-fig.example.com" class="records-company-name has-link">Blue Fig Gelato — Florence</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#ee6572"><span class="records-tag-dot" style="background:#ee6572"></span>Cafe</span></div></td><td class="records-cell ">over 1 year ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://blue-fig.example.com" target="_blank" rel="noreferrer">blue-fig.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Cacao Norte — Oaxaca"><input type="checkbox" aria-label="Select Cacao Norte — Oaxaca"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">C</span><a href="https://cacao-norte.example.com" class="records-company-name has-link">Cacao Norte — Oaxaca</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>B2B</span><span class="records-tag" style="--tag-color:#25a878"><span class="records-tag-dot" style="background:#25a878"></span>Local</span><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Wholesale</span></div></td><td class="records-cell ">about 2 years ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--ink-3)"></span>No communication</span></td><td class="records-cell"><a class="records-link" href="https://cacao-norte.example.com" target="_blank" rel="noreferrer">cacao-norte.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Cape Vanilla Co. — Cape Town"><input type="checkbox" aria-label="Select Cape Vanilla Co. — Cape Town"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">C</span><a href="https://cape-vanilla.example.com" class="records-company-name has-link">Cape Vanilla Co. — Cape Town</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Wholesale</span><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Imports</span></div></td><td class="records-cell ">over 1 year ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://cape-vanilla.example.com" target="_blank" rel="noreferrer">cape-vanilla.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Cloudberry Cone — Helsinki"><input type="checkbox" aria-label="Select Cloudberry Cone — Helsinki"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">C</span><a href="https://cloudberry-cone.example.com" class="records-company-name has-link">Cloudberry Cone — Helsinki</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Dairy-free</span><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>Seasonal</span></div></td><td class="records-cell records-muted">No contact</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--ink-3)"></span>No communication</span></td><td class="records-cell"><a class="records-link" href="https://cloudberry-cone.example.com" target="_blank" rel="noreferrer">cloudberry-cone.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Coral Coast Sorbet — Honolulu"><input type="checkbox" aria-label="Select Coral Coast Sorbet — Honolulu"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">C</span><a href="https://coral-coast.example.com" class="records-company-name has-link">Coral Coast Sorbet — Honolulu</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Sorbet</span><span class="records-tag" style="--tag-color:#25a878"><span class="records-tag-dot" style="background:#25a878"></span>Local</span></div></td><td class="records-cell ">9 days ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--green)"></span>Very strong</span></td><td class="records-cell"><a class="records-link" href="https://coral-coast.example.com" target="_blank" rel="noreferrer">coral-coast.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Ember Cone Company — Seoul"><input type="checkbox" aria-label="Select Ember Cone Company — Seoul"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">E</span><a href="https://ember-cone.example.com" class="records-company-name has-link">Ember Cone Company — Seoul</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>B2C</span><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>Vegan</span></div></td><td class="records-cell ">15 days ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><a class="records-link" href="https://ember-cone.example.com" target="_blank" rel="noreferrer">ember-cone.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Fjord Fizz Ice — Oslo"><input type="checkbox" aria-label="Select Fjord Fizz Ice — Oslo"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">F</span><a href="#" class="records-company-name ">Fjord Fizz Ice — Oslo</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Dairy-free</span><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>Seasonal</span></div></td><td class="records-cell records-muted">No contact</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--ink-3)"></span>No communication</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Juniper &amp; Cream — Vancouver"><input type="checkbox" aria-label="Select Juniper &amp; Cream — Vancouver"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">J</span><a href="#" class="records-company-name ">Juniper &amp; Cream — Vancouver</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Dairy-free</span><span class="records-tag" style="--tag-color:#c84f9d"><span class="records-tag-dot" style="background:#c84f9d"></span>Catering</span></div></td><td class="records-cell records-muted">No contact</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--ink-3)"></span>No communication</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Kumo Creamery — Tokyo"><input type="checkbox" aria-label="Select Kumo Creamery — Tokyo"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">K</span><a href="https://kumo-creamery.example.com" class="records-company-name has-link">Kumo Creamery — Tokyo</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>B2C</span><span class="records-tag" style="--tag-color:#ee6572"><span class="records-tag-dot" style="background:#ee6572"></span>Cafe</span><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>Vegan</span></div></td><td class="records-cell ">3 weeks ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--green)"></span>Very strong</span></td><td class="records-cell"><a class="records-link" href="https://kumo-creamery.example.com" target="_blank" rel="noreferrer">kumo-creamery.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Lotus Leaf Scoops — Hanoi"><input type="checkbox" aria-label="Select Lotus Leaf Scoops — Hanoi"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">L</span><a href="#" class="records-company-name ">Lotus Leaf Scoops — Hanoi</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>Vegan</span><span class="records-tag" style="--tag-color:#ee6572"><span class="records-tag-dot" style="background:#ee6572"></span>Cafe</span></div></td><td class="records-cell ">15 days ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Lumen Soft Serve — Copenhagen"><input type="checkbox" aria-label="Select Lumen Soft Serve — Copenhagen"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">L</span><a href="https://lumen-soft-serve.example.com" class="records-company-name has-link">Lumen Soft Serve — Copenhagen</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Dairy-free</span><span class="records-tag" style="--tag-color:#ee6572"><span class="records-tag-dot" style="background:#ee6572"></span>Cafe</span></div></td><td class="records-cell ">8 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><a class="records-link" href="https://lumen-soft-serve.example.com" target="_blank" rel="noreferrer">lumen-soft-serve.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Mango Moon Gelato — Nairobi"><input type="checkbox" aria-label="Select Mango Moon Gelato — Nairobi"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">M</span><a href="https://mango-moon.example.com" class="records-company-name has-link">Mango Moon Gelato — Nairobi</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Sorbet</span><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>Vegan</span></div></td><td class="records-cell ">almost 2 years ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://mango-moon.example.com" target="_blank" rel="noreferrer">mango-moon.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Maple Orbit — Montréal"><input type="checkbox" aria-label="Select Maple Orbit — Montréal"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">M</span><a href="https://maple-orbit.example.com" class="records-company-name has-link">Maple Orbit — Montréal</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>B2B</span><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Wholesale</span><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>Seasonal</span></div></td><td class="records-cell ">15 days ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><a class="records-link" href="https://maple-orbit.example.com" target="_blank" rel="noreferrer">maple-orbit.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Mooncake Ice Cream — Singapore"><input type="checkbox" aria-label="Select Mooncake Ice Cream — Singapore"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">M</span><a href="https://mooncake-ice-cream.example.com" class="records-company-name has-link">Mooncake Ice Cream — Singapore</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>B2B</span><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Wholesale</span></div></td><td class="records-cell ">about 1 month ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://mooncake-ice-cream.example.com" target="_blank" rel="noreferrer">mooncake-ice-cream.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Palm Sugar Creamery — Bangkok"><input type="checkbox" aria-label="Select Palm Sugar Creamery — Bangkok"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">P</span><a href="https://palm-sugar.example.com" class="records-company-name has-link">Palm Sugar Creamery — Bangkok</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>B2C</span><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>Vegan</span></div></td><td class="records-cell ">3 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://palm-sugar.example.com" target="_blank" rel="noreferrer">palm-sugar.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Pampa Creamery — Córdoba"><input type="checkbox" aria-label="Select Pampa Creamery — Córdoba"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">P</span><a href="https://pampa-creamery.example.com" class="records-company-name has-link">Pampa Creamery — Córdoba</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>B2C</span><span class="records-tag" style="--tag-color:#25a878"><span class="records-tag-dot" style="background:#25a878"></span>Local</span></div></td><td class="records-cell ">12 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://pampa-creamery.example.com" target="_blank" rel="noreferrer">pampa-creamery.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Pine &amp; Pistachio — Istanbul"><input type="checkbox" aria-label="Select Pine &amp; Pistachio — Istanbul"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">P</span><a href="#" class="records-company-name ">Pine &amp; Pistachio — Istanbul</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#c84f9d"><span class="records-tag-dot" style="background:#c84f9d"></span>Catering</span></div></td><td class="records-cell ">about 1 month ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Rosewater Kulfi — Jaipur"><input type="checkbox" aria-label="Select Rosewater Kulfi — Jaipur"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">R</span><a href="#" class="records-company-name ">Rosewater Kulfi — Jaipur</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#92b72d"><span class="records-tag-dot" style="background:#92b72d"></span>B2C</span><span class="records-tag" style="--tag-color:#f09a2f"><span class="records-tag-dot" style="background:#f09a2f"></span>Seasonal</span></div></td><td class="records-cell ">2 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Saffron Sky Kulfi — Dubai"><input type="checkbox" aria-label="Select Saffron Sky Kulfi — Dubai"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">S</span><a href="https://saffron-sky.example.com" class="records-company-name has-link">Saffron Sky Kulfi — Dubai</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Imports</span><span class="records-tag" style="--tag-color:#c84f9d"><span class="records-tag-dot" style="background:#c84f9d"></span>Catering</span></div></td><td class="records-cell ">almost 2 years ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><a class="records-link" href="https://saffron-sky.example.com" target="_blank" rel="noreferrer">saffron-sky.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Sahara Swirl — Marrakech"><input type="checkbox" aria-label="Select Sahara Swirl — Marrakech"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">S</span><a href="#" class="records-company-name ">Sahara Swirl — Marrakech</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Sorbet</span><span class="records-tag" style="--tag-color:#25a878"><span class="records-tag-dot" style="background:#25a878"></span>Local</span></div></td><td class="records-cell ">5 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--red)"></span>Very weak</span></td><td class="records-cell"><span class="records-muted">—</span></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Silk Road Sorbet — Tbilisi"><input type="checkbox" aria-label="Select Silk Road Sorbet — Tbilisi"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">S</span><a href="https://silk-road.example.com" class="records-company-name has-link">Silk Road Sorbet — Tbilisi</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#16a6c7"><span class="records-tag-dot" style="background:#16a6c7"></span>Sorbet</span><span class="records-tag" style="--tag-color:#3f78ff"><span class="records-tag-dot" style="background:#3f78ff"></span>Imports</span></div></td><td class="records-cell ">about 1 month ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><a class="records-link" href="https://silk-road.example.com" target="_blank" rel="noreferrer">silk-road.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Sol y Nieve — Buenos Aires"><input type="checkbox" aria-label="Select Sol y Nieve — Buenos Aires"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">S</span><a href="https://sol-y-nieve.example.com" class="records-company-name has-link">Sol y Nieve — Buenos Aires</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#25a878"><span class="records-tag-dot" style="background:#25a878"></span>Local</span></div></td><td class="records-cell ">2 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><a class="records-link" href="https://sol-y-nieve.example.com" target="_blank" rel="noreferrer">sol-y-nieve.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Sunbird Gelateria — Lisbon"><input type="checkbox" aria-label="Select Sunbird Gelateria — Lisbon"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">S</span><a href="https://sunbird.example.com" class="records-company-name has-link">Sunbird Gelateria — Lisbon</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#ee6572"><span class="records-tag-dot" style="background:#ee6572"></span>Cafe</span></div></td><td class="records-cell ">over 2 years ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--ink-3)"></span>No communication</span></td><td class="records-cell"><a class="records-link" href="https://sunbird.example.com" target="_blank" rel="noreferrer">sunbird.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr><tr class="records-row "><td class="records-cell records-sticky-cell records-company-cell"><label class="records-checkbox" title="Select Tasman Sea Gelato — Hobart"><input type="checkbox" aria-label="Select Tasman Sea Gelato — Hobart"/><span class="records-checkbox-box "></span></label><span class="records-company-mark">T</span><a href="https://tasman-sea.example.com" class="records-company-name has-link">Tasman Sea Gelato — Hobart</a></td><td class="records-cell"><div class="records-tags"><span class="records-tag" style="--tag-color:#9a5cff"><span class="records-tag-dot" style="background:#9a5cff"></span>Gelato</span><span class="records-tag" style="--tag-color:#25a878"><span class="records-tag-dot" style="background:#25a878"></span>Local</span></div></td><td class="records-cell ">2 months ago</td><td class="records-cell"><span class="records-strength"><span class="records-strength-dot" style="background:var(--orange)"></span>Weak</span></td><td class="records-cell"><a class="records-link" href="https://tasman-sea.example.com" target="_blank" rel="noreferrer">tasman-sea.example.com<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8"></path></svg></a></td></tr></tbody><tfoot><tr class="records-calculation-row"><td class="records-cell records-sticky-cell records-calculation-label"><span class="records-calculation-number">26</span> count</td><td class="records-cell"><button type="button" class="records-add-calculation"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>Add calculation</button></td><td class="records-cell records-muted">—</td><td class="records-cell"><span class="records-average"><span class="records-strength-dot" style="background:var(--orange)"></span>44<!-- -->% average</span></td><td class="records-cell"><span class="records-muted">19<!-- --> links</span></td></tr></tfoot></table></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="filter-table" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">13</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Filter Table</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Status chips that reorganize live data.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-105"><div class="-mx-1 mb-1 flex items-center gap-1 overflow-x-auto px-1 py-1" style="scrollbar-width:none"><button type="button" aria-pressed="true" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                bg-surface text-ink shadow-btn">All<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  bg-field text-ink-2">5</span></button><button type="button" aria-pressed="false" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                text-ink-2 hover:bg-hover"><span class="size-1.5 rounded-full" style="background:#f09a2f"></span>To do<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  text-ink-3">2</span></button><button type="button" aria-pressed="false" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                text-ink-2 hover:bg-hover"><span class="size-1.5 rounded-full" style="background:#16a6c7"></span>In Progress<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  text-ink-3">2</span></button><button type="button" aria-pressed="false" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                text-ink-2 hover:bg-hover"><span class="size-1.5 rounded-full" style="background:#25a878"></span>Completed<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  text-ink-3">1</span></button></div><div aria-label="Scrollable task table" class="overflow-x-auto rounded-card bg-surface shadow-card" role="region" tabindex="0" style="scrollbar-width:none"><div class="min-w-[420px]"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] border-b border-line px-3 py-2 text-[11.5px] font-medium text-ink-3"><span>Task name</span><span>Date</span><span>Status</span><span>Advisor</span></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Restock mango sorbet</span><span class="text-ink-2 tabular-nums">Dec 03</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-todo">To do</span></span><span class="truncate text-ink-2">Mango Moon Gelato</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Churn black sesame</span><span class="text-ink-2 tabular-nums">Sep 22</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-progress">In Progress</span></span><span class="truncate text-ink-2">Kumo Creamery</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Print summer menu</span><span class="text-ink-2 tabular-nums">Jan 02</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-todo">To do</span></span><span class="truncate text-ink-2">Coral Coast Sorbet</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Taste-test batch 42</span><span class="text-ink-2 tabular-nums">Nov 08</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-progress">In Progress</span></span><span class="truncate text-ink-2">Maple Orbit</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Order waffle cones</span><span class="text-ink-2 tabular-nums">Apr 14</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-done">Completed</span></span><span class="truncate text-ink-2">Aurora Scoops</span></div></div></div></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="sidebar-nav" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">14</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Sidebar Nav</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Workspace navigation with quick search.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-60 rounded-card bg-surface p-2 shadow-raised"><button type="button" class="mb-2 flex w-full items-center gap-2.5 rounded-control p-1.5 text-left transition-[background-color,transform] duration-100 hover:bg-hover active:scale-[0.96]"><span class="flex size-8 shrink-0 items-center justify-center rounded-[8px] bg-ink text-[13px] font-semibold text-surface">C</span><span class="min-w-0 flex-1"><span class="block truncate text-[13px] font-medium leading-tight text-ink">Creamery Ops</span><span class="block truncate text-[11px] leading-tight text-ink-3">Production Workspace</span></span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15l5 5 5-5M7 9l5-5 5 5"></path></svg></button><label class="mb-1 flex h-8 items-center gap-2 rounded-control bg-inset px-2.5 shadow-hairline"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path></svg><input placeholder="Quick search" class="min-w-0 flex-1 bg-transparent text-[12.5px] text-ink outline-none placeholder:text-ink-3" value=""/><kbd class="flex size-4.5 items-center justify-center rounded-[5px] bg-surface text-[10px] text-ink-3 shadow-hairline">/</kbd></label><button type="button" class="mb-2 flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-[13px] font-medium text-accent transition-[background-color,transform] duration-100 hover:bg-accent-tint active:scale-[0.96]"><span class="min-w-0 flex-1 truncate text-left">New task</span><span class="flex size-4 shrink-0 items-center justify-center rounded-full bg-accent text-white"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg></span></button><div class="relative flex flex-col gap-2"><span aria-hidden="true" class="pointer-events-none absolute inset-x-0 rounded-[7px] bg-hover" style="top:0;height:0;opacity:0;transition:top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease"></span><div><div class="px-2 pb-1 pt-1 text-[10.5px] font-medium uppercase tracking-[0.08em] text-ink-3">Workspace</div><div class="flex flex-col gap-px"><button type="button" class="group relative z-10 flex w-full items-center gap-2 rounded-[7px] px-2 py-1.5 text-left transition-[color,transform] duration-150 active:scale-[0.96]"><span class="text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></span><span class="min-w-0 flex-1 truncate text-[13px] transition-colors duration-150
                        text-ink-2">Home</span></button><button type="button" aria-current="page" class="group relative z-10 flex w-full items-center gap-2 rounded-[7px] px-2 py-1.5 text-left transition-[color,transform] duration-150 active:scale-[0.96]"><span class="text-ink"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><g><path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></g></svg></span><span class="min-w-0 flex-1 truncate text-[13px] transition-colors duration-150
                        font-medium text-ink">Agent tasks</span><span class="flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[10.5px] font-semibold tabular-nums bg-surface text-ink-2 shadow-hairline" style="animation:pop-in 250ms cubic-bezier(0.23,1,0.32,1) both">4</span></button><button type="button" class="group relative z-10 flex w-full items-center gap-2 rounded-[7px] px-2 py-1.5 text-left transition-[color,transform] duration-150 active:scale-[0.96]"><span class="text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><g><rect x="3" y="3" width="7" height="7" rx="1.5"></rect><rect x="14" y="3" width="7" height="7" rx="1.5"></rect><rect x="3" y="14" width="7" height="7" rx="1.5"></rect><rect x="14" y="14" width="7" height="7" rx="1.5"></rect></g></svg></span><span class="min-w-0 flex-1 truncate text-[13px] transition-colors duration-150
                        text-ink-2">Inbox</span></button></div></div><div><div class="px-2 pb-1 pt-1 text-[10.5px] font-medium uppercase tracking-[0.08em] text-ink-3">Objects</div><div class="flex flex-col gap-px"><button type="button" class="group relative z-10 flex w-full items-center gap-2 rounded-[7px] px-2 py-1.5 text-left transition-[color,transform] duration-150 active:scale-[0.96]"><span class="text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><g><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path></g></svg></span><span class="min-w-0 flex-1 truncate text-[13px] transition-colors duration-150
                        text-ink-2">Suppliers</span><span class="flex size-4.5 items-center justify-center rounded-[5px] text-ink-3 opacity-0 transition-[background-color,color,opacity] duration-100 group-hover:opacity-100 hover:bg-line/70 hover:text-ink-2"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg></span></button><button type="button" class="group relative z-10 flex w-full items-center gap-2 rounded-[7px] px-2 py-1.5 text-left transition-[color,transform] duration-150 active:scale-[0.96]"><span class="text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><g><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"></path></g></svg></span><span class="min-w-0 flex-1 truncate text-[13px] transition-colors duration-150
                        text-ink-2">Inventory</span></button></div></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="search" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">15</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Search</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Command search with live filtering and an empty state.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex min-h-[248px] w-full max-w-72 flex-col items-stretch"><div class="w-full self-start overflow-hidden rounded-card bg-surface shadow-raised"><div class="flex h-10 items-center gap-2 border-b border-line px-3 transition-colors duration-100 hover:bg-hover"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round" class="shrink-0"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path></svg><input placeholder="Search flavors…" aria-label="Search flavors" class="min-w-0 flex-1 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3" value=""/></div><div class="p-1"><button type="button" class="flex h-8 w-full items-center rounded-[6px] px-2 text-left text-[13px] text-ink transition-colors duration-100 hover:bg-hover" style="animation:fade-in 200ms ease-out both">Forecast summer demand</button><button type="button" class="flex h-8 w-full items-center rounded-[6px] px-2 text-left text-[13px] text-ink transition-colors duration-100 hover:bg-hover" style="animation:fade-in 200ms ease-out both">Find waffle cone suppliers</button><button type="button" class="flex h-8 w-full items-center rounded-[6px] px-2 text-left text-[13px] text-ink transition-colors duration-100 hover:bg-hover" style="animation:fade-in 200ms ease-out both">Compare seasonal flavors</button><button type="button" class="flex h-8 w-full items-center rounded-[6px] px-2 text-left text-[13px] text-ink transition-colors duration-100 hover:bg-hover" style="animation:fade-in 200ms ease-out both">Draft flavor launch plan</button><button type="button" class="flex h-8 w-full items-center rounded-[6px] px-2 text-left text-[13px] text-ink transition-colors duration-100 hover:bg-hover" style="animation:fade-in 200ms ease-out both">Check cold-chain status</button></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="insight-cards" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">16</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Insight Cards</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Paged agent insights with scrub-ready live charts.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="min-h-[408px] w-full max-w-86"><div class="flex items-center justify-between"><span class="flex items-baseline gap-1.5"><span class="text-[13px] font-semibold text-ink">Insights</span><span class="text-[13px] text-ink-3 tabular-nums">3</span></span><span class="flex items-center gap-0.5"><button aria-label="Previous insight" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-[background-color,color,transform] duration-100 hover:bg-hover hover:text-ink active:scale-[0.96]"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg></button><button aria-label="Next insight" class="flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-[background-color,color,transform] duration-100 hover:bg-hover hover:text-ink active:scale-[0.96]"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"></path></svg></button></span></div><div class="transition-[opacity,filter] duration-250" style="opacity:1;filter:blur(0)"><p class="mt-1.5 text-[12.5px] leading-relaxed text-ink-2">The worst performer in your <span class="inline-flex items-center gap-1 align-baseline font-medium text-ink"><span class="inline-block size-2.5 rounded-full bg-orange"></span>@<!-- -->Creamery</span> is Rocky Road — down <code class="font-mono text-[11.5px] text-red">-6%</code> or <code class="font-mono text-[11.5px] text-red">-$2,453.44</code>.</p><div class="mt-2"><div class="min-h-[278px] rounded-card bg-surface p-3 shadow-hairline"><div class="flex items-center gap-4"><div class="flex-1"><span class="flex items-center gap-1.5 text-[11.5px] text-ink-2"><span class="size-2 rounded-full bg-orange"></span>Mint Chip</span><span class="block text-[17px] font-semibold tracking-[-0.01em] tabular-nums text-red">-4.41%</span><code class="font-mono text-[11.5px] text-red">-$2,377.66</code></div><div class="flex-1"><span class="flex items-center gap-1.5 text-[11.5px] text-ink-2"><span class="size-2 rounded-full bg-accent"></span>Pistachio</span><span class="block text-[17px] font-semibold tracking-[-0.01em] tabular-nums text-green">+1.15%</span><code class="font-mono text-[11.5px] text-green">+$617.22</code></div></div><div class="mt-2 overflow-hidden rounded-control bg-inset shadow-hairline"><div class="flex items-center justify-between border-b border-line px-2.5 py-1.5"><span class="text-[11px] text-ink-3 tabular-nums">Trend snapshot</span><span class="rounded-full bg-field px-2 py-0.5 text-[10.5px] font-medium text-ink-2">Snapshot</span></div><div class="insight-chart-stage relative h-[166px]"><div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;margin-left:0"><div style="display:inline-flex;gap:2px;background:rgba(0,0,0,0.02);border-radius:6px;padding:2px;opacity:1;transition:opacity 0.4s;pointer-events:auto"><button style="position:relative;z-index:1;font-size:11px;padding:3px 8px;border-radius:4px;border:none;cursor:pointer;font-family:system-ui, -apple-system, sans-serif;font-weight:500;background:rgba(0,0,0,0.035);color:rgba(0,0,0,0.55);opacity:1;transition:opacity 0.2s, background 0.15s, color 0.2s;line-height:16px;display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#f68f3c;flex-shrink:0;opacity:1;transition:opacity 0.2s"></span></button><button style="position:relative;z-index:1;font-size:11px;padding:3px 8px;border-radius:4px;border:none;cursor:pointer;font-family:system-ui, -apple-system, sans-serif;font-weight:500;background:rgba(0,0,0,0.035);color:rgba(0,0,0,0.55);opacity:1;transition:opacity 0.2s, background 0.15s, color 0.2s;line-height:16px;display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#3d9aff;flex-shrink:0;opacity:1;transition:opacity 0.2s"></span></button></div></div><div style="width:100%;height:100%;position:relative"><canvas style="display:block;cursor:default"></canvas></div></div></div></div></div><button class="mt-2 rounded-full bg-surface px-3 py-1.5 text-left text-[12px] text-ink shadow-btn transition-colors duration-100 hover:bg-hover">Should I rebalance flavors?</button></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="code-block" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">17</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Code Block</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Agent-written code streaming in line by line.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-95 overflow-hidden rounded-card bg-surface shadow-card"><div class="primitive-card-bar flex items-center justify-between border-b border-line"><span class="flex items-baseline gap-2"><span class="font-mono text-[12px] font-medium text-ink">churn.ts</span><span class="text-[11.5px] text-ink-3">TypeScript</span></span><button aria-label="Copy code" class="flex h-6 items-center gap-1 rounded-[6px] px-1.5 text-[11.5px]
            font-medium transition-colors duration-100 hover:bg-hover
            text-ink-3 hover:text-ink"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>Copy</button></div><pre class="min-h-[137px] bg-inset px-3 py-2.5 font-mono text-[11.5px] leading-[1.7]"></pre></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="fine-tune-card" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">18</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Fine-tune Card</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">The agent adjusts design properties in an inspector.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="relative w-full max-w-60 rounded-card bg-surface shadow-raised"><div class="primitive-card-bar flex items-center justify-between border-b border-line"><span class="text-[13px] font-medium text-ink">Flavor card</span><span class="flex items-center gap-1.5"><span class="flex size-4.5 items-center justify-center rounded-[5px] border border-accent/30 bg-accent-tint"><svg width="9" height="9" viewBox="0 0 24 24" fill="var(--accent)"><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"></path></svg></span><span class="bg-clip-text text-[12px] font-medium text-transparent" style="background-image:linear-gradient(90deg, var(--accent) 35%, var(--accent-ink) 50%, var(--accent) 65%);background-size:200% 100%;animation:shimmer-text 1.4s linear infinite">Adjust</span></span></div><div class="primitive-card-pad flex flex-col gap-2 border-b border-line"><p class="text-[12.5px] font-medium text-ink">Layout</p><div class="relative grid grid-cols-3 rounded-control bg-field p-0.5"><span aria-hidden="true" class="absolute inset-y-0.5 rounded-[6px] bg-surface shadow-btn transition-transform duration-300" style="width:calc((100% - 4px) / 3);left:2px;transform:translateX(0%);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"></span><button type="button" aria-label="row layout" aria-pressed="true" class="relative z-10 flex h-6 items-center justify-center transition-colors duration-200
                text-accent"><span class="flex gap-0.5"><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span></span></button><button type="button" aria-label="col layout" aria-pressed="false" class="relative z-10 flex h-6 items-center justify-center transition-colors duration-200
                text-ink-3"><span class="flex flex-col gap-0.5"><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span></span></button><button type="button" aria-label="grid layout" aria-pressed="false" class="relative z-10 flex h-6 items-center justify-center transition-colors duration-200
                text-ink-3"><span class="grid grid-cols-2 gap-0.5"><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span><span class="size-1.5 rounded-[2px] border-[1.2px] border-current"></span></span></button></div><div class="grid min-w-0 grid-cols-2 gap-2"><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="W" aria-valuenow="324" aria-valuemin="40" aria-valuemax="999" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">W</span><input inputMode="numeric" aria-label="W value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="324"/></label><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="H" aria-valuenow="96" aria-valuemin="24" aria-valuemax="999" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">H</span><input inputMode="numeric" aria-label="H value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="96"/></label></div><div class="grid min-w-0 grid-cols-2 gap-2"><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="Radius" aria-valuenow="28" aria-valuemin="0" aria-valuemax="64" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">Radius</span><input inputMode="numeric" aria-label="Radius value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="28"/></label><label class="flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5 transition-[background-color,box-shadow] duration-200" style="background:var(--field);box-shadow:none"><span role="slider" aria-label="Opacity" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" tabindex="0" class="flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px] px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink focus-visible:outline-none">Opacity</span><input inputMode="numeric" aria-label="Opacity value" class="min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none" value="100"/><span class="shrink-0 pr-0.5 text-[11.5px] text-ink-3">%</span></label></div></div><div class="primitive-card-footer flex items-center justify-between"><span class="text-[12px] text-ink-3">Type</span><div class="relative -mr-0.5 w-30"><button type="button" aria-expanded="false" class="flex h-6.5 w-full items-center justify-between rounded-chip bg-inset py-1 pr-1 pl-2 shadow-hairline transition-shadow duration-200 focus-visible:outline-none"><span class="text-[12px] text-ink-3">Select type</span><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></button></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section><section id="selection-actions" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">19</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Selection Actions</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Highlight a passage and hand it to the agent to rewrite.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height:272px"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-[460px]"><div class="relative select-none pb-12"><p class="text-[13px] leading-relaxed text-ink">Pistachio holds the top slot all weekend. <span class="box-decoration-clone rounded-[3px] bg-[color-mix(in_srgb,var(--accent)_14%,var(--surface))] text-ink dark:bg-accent-tint">Churn it first thing Saturday so the batch has time to firm up before the afternoon rush.</span></p><div class="absolute top-0 left-0 z-10" style="transform:translate3d(0px, 0px, 0) translateX(-50%);transition:transform 320ms cubic-bezier(0.77,0,0.175,1), opacity 180ms ease-out;opacity:0;pointer-events:none;will-change:transform"><div class="flex h-9 w-fit max-w-[calc(100vw-48px)] items-center justify-center gap-0.5 overflow-hidden rounded-full bg-surface p-1 font-sans font-normal text-ink antialiased shadow-overlay"><div class="flex w-fit shrink-0 items-center justify-center gap-0.5"><div class="flex min-w-0 items-center overflow-hidden transition-[max-width,opacity,transform] duration-400" style="max-width:145px;opacity:1;transform:translateX(0);transition-timing-function:cubic-bezier(0.23,1,0.32,1)"><form class="flex h-7 shrink-0 items-center transition-[width] duration-400" style="width:145px;transition-timing-function:cubic-bezier(0.23,1,0.32,1)"><input aria-label="Describe edits" placeholder="Describe edits" class="h-7 w-full bg-transparent pr-2.5 pl-3 text-[12.5px] text-ink placeholder:text-ink-3" value=""/></form></div><div class="flex min-w-0 items-center gap-0.5 overflow-hidden transition-[max-width,opacity,transform] duration-400" style="max-width:224px;opacity:1;transform:translateX(0);transition-timing-function:cubic-bezier(0.23,1,0.32,1)"><span class="mx-1 h-4 w-px shrink-0 bg-line-strong"></span><button type="button" class="inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[12px] font-normal text-ink transition-[background-color,color,transform] duration-150 hover:bg-hover active:scale-[0.96]"><svg width="14" height="14" stroke-width="1.8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M9 9C9 5.49997 14.5 5.5 14.5 9C14.5 11.5 12 10.9999 12 13.9999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 18.01L12.01 17.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>Explain</button><button type="button" class="inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[12px] font-normal text-ink transition-[background-color,color,transform] duration-150 hover:bg-hover active:scale-[0.96]"><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="1.8" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M3 12C9.26752 12 12 9.36306 12 3C12 9.36306 14.7134 12 21 12C14.7134 12 12 14.7134 12 21C12 14.7134 9.26752 12 3 12Z" stroke="currentColor" stroke-linejoin="round"></path></svg>Improve</button><div class="flex min-w-0 items-center gap-0.5 overflow-hidden transition-[max-width,opacity,margin] duration-400" style="max-width:0;opacity:0;margin-left:0;transition-timing-function:cubic-bezier(0.23,1,0.32,1)"><button type="button" class="inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[12px] font-normal text-ink transition-[background-color,color,transform] duration-150 hover:bg-hover active:scale-[0.96]"><svg width="14" height="14" stroke-width="1.8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M7.23611 7C7.71115 6.46924 8 5.76835 8 5C8 3.34315 6.65685 2 5 2C3.34315 2 2 3.34315 2 5C2 6.65685 3.34315 8 5 8C5.8885 8 6.68679 7.61375 7.23611 7ZM7.23611 7L20 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.23611 17C7.71115 17.5308 8 18.2316 8 19C8 20.6569 6.65685 22 5 22C3.34315 22 2 20.6569 2 19C2 17.3431 3.34315 16 5 16C5.8885 16 6.68679 16.3863 7.23611 17ZM7.23611 17L20 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>Shorten</button><button type="button" class="inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[12px] font-normal text-ink transition-[background-color,color,transform] duration-150 hover:bg-hover active:scale-[0.96]"><svg width="14" height="14" stroke-width="1.8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M10 9H8M16 9H14M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.5 14.5C16.5 14.5 15 16.5 12 16.5C9 16.5 7.5 14.5 7.5 14.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>Tone</button><button type="button" class="inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[12px] font-normal text-ink transition-[background-color,color,transform] duration-150 hover:bg-hover active:scale-[0.96]"><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="1.8" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M12 8L12 16M12 8H8M12 8H16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13.5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13.5M21 10.5V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V10.5" stroke="currentColor" stroke-linejoin="round"></path><path d="M19.5 13.5V10.5H22.5V13.5H19.5Z" stroke="currentColor" stroke-linejoin="round"></path><path d="M1.5 13.5V10.5H4.5V13.5H1.5Z" stroke="currentColor" stroke-linejoin="round"></path></svg>Grammar</button></div><span class="mx-0.5 h-4 w-px shrink-0 bg-line"></span><button type="button" aria-label="Show more actions" aria-expanded="false" class="flex size-7 shrink-0 items-center justify-center rounded-full text-ink transition-[background-color,transform] duration-200 hover:bg-hover active:scale-[0.96]"><span class="flex transition-transform duration-400" style="transform:rotate(0deg);transition-timing-function:cubic-bezier(0.23,1,0.32,1)"><svg width="14" height="14" stroke-width="1.8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></button></div><div class="flex min-w-0 items-center overflow-hidden transition-[max-width,opacity,transform] duration-400" style="max-width:0;opacity:0;transform:scale(0.88);transition-timing-function:cubic-bezier(0.23,1,0.32,1)"><button type="button" aria-label="Send edit instruction" class="flex size-7 shrink-0 items-center justify-center rounded-full bg-ink text-surface transition-[opacity,transform] duration-200 active:scale-[0.94]"><svg width="16" height="16" viewBox="0 0 24 24" stroke-width="2.4" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></div></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section></div><section class="px-8 py-14"><h2 class="max-w-md text-[19px] leading-snug font-semibold tracking-[-0.02em] text-ink text-balance">New components, in your inbox.</h2><p class="mt-2 max-w-md text-[13px] leading-relaxed text-ink-2 text-pretty">Get new primitives and updates as they ship — copy-paste ready. No spam, unsubscribe anytime.</p><form class="mt-5 flex max-w-md flex-col gap-1.5" noValidate=""><div class="flex items-center gap-2"><div class="flex h-9 flex-1 items-center rounded-control bg-inset px-3 transition-shadow duration-150" style="box-shadow:var(--shadow-hairline)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="mr-2 shrink-0"><rect x="2.5" y="4.5" width="19" height="15" rx="2.5"></rect><path d="m3 6 9 6 9-6"></path></svg><input type="email" inputMode="email" autoComplete="email" placeholder="you@studio.com" aria-label="Email address" class="min-w-0 flex-1 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3" value=""/></div><button type="submit" disabled="" class="flex h-9 shrink-0 items-center gap-1.5 rounded-control bg-ink px-3.5 text-[12.5px] font-medium text-canvas shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_1px_2px_rgba(16,24,40,0.1)] transition-[opacity,transform] duration-150 enabled:active:scale-[0.97] disabled:opacity-40">Notify me<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button></div></form></section><footer class="flex items-center justify-between gap-4 border-t border-dashed border-line px-8 py-6"><span class="text-[12px] text-ink-3">© 2026 Beautiful UI</span><a class="text-[12px] text-ink-3 transition-colors duration-150 hover:text-ink" href="/license">MIT License</a></footer></div></div></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-dca0094f8340a94a.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[8924,[],\"\"]\n4:I[6472,[\"177\",\"static/chunks/app/layout-bbdec03753106375.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\"],\"DevToolbar\"]\n5:I[4905,[\"152\",\"static/chunks/152-d860c9c4fdf1deb2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"619\",\"static/chunks/619-ba102abea3e3d0e4.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"437\",\"static/chunks/437-ac0285169c3378eb.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"238\",\"static/chunks/238-4fb2a85d83a8fe1e.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"974\",\"static/chunks/app/page-a270d585e13da8b9.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\"],\"ThemeToggle\"]\n6:I[2505,[\"152\",\"static/chunks/152-d860c9c4fdf1deb2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"619\",\"static/chunks/619-ba102abea3e3d0e4.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"437\",\"static/chunks/437-ac0285169c3378eb.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"238\",\"static/chunks/238-4fb2a85d83a8fe1e.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"974\",\"static/chunks/app/page-a270d585e13da8b9.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\"],\"Nav\"]\nb:I[7150,[],\"\"]\n:HL[\"/_next/static/media/bb3ef058b751a6ad-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/695d0a47ad8949ca.css?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"ZAMSdOmu5k27rPLPX1Vv-\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/695d0a47ad8949ca.css?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"dark\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"(function(){try{var t=localStorage.getItem(\\\"bui-theme\\\");document.documentElement.classList.toggle(\\\"dark\\\",t!==\\\"light\\\")}catch(e){document.documentElement.classList.add(\\\"dark\\\")}})()\"}}]}],[\"$\",\"body\",null,{\"className\":\"__variable_f367f3 __variable_3c557b font-sans\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L4\",null,{}]]}]]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"main\",null,{\"className\":\"relative mx-auto max-w-[960px] bg-page shadow-[0_0_0_1px_var(--line)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"lg:grid lg:grid-cols-[288px_minmax(0,1fr)]\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"flex flex-col border-b border-dashed border-line px-7 pt-16 pb-7 lg:sticky lg:top-0 lg:h-screen lg:overflow-hidden lg:border-r lg:border-b-0 lg:pt-[clamp(2.5rem,8vh,5rem)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between\",\"children\":[[\"$\",\"img\",null,{\"src\":\"/logo.png\",\"alt\":\"Beautiful UI\",\"className\":\"-ml-3 size-20 shrink-0 lg:ml-0\"}],[\"$\",\"$L5\",null,{}]]}],[\"$\",\"h1\",null,{\"className\":\"mt-12 text-[21px] leading-snug font-semibold tracking-[-0.02em] text-ink text-balance lg:mt-[clamp(1.5rem,5vh,3rem)]\",\"children\":\"Beautiful UI for AI-native interfaces.\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative mt-7 border-t border-dashed border-line pt-6 lg:min-h-0 lg:flex-1 lg:overflow-hidden lg:pt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"component-nav-scroll lg:h-full lg:overflow-y-auto lg:overscroll-contain lg:pt-6 lg:pb-16\",\"children\":[\"$\",\"$L6\",null,{}]}]}],[\"$\",\"div\",null,{\"className\":\"mt-8 shrink-0 lg:mt-6\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://turbodesign.co/\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"block rounded-control px-2 py-1\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex min-w-0 flex-col gap-1\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex min-w-0 items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block truncate text-[12.5px] font-medium leading-tight text-ink\",\"children\":\"Built by Turbo\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"relative h-3 w-6 shrink-0 overflow-hidden\",\"children\":[\"$\",\"img\",null,{\"src\":\"/turbo-flourish.png\",\"alt\":\"\",\"className\":\"absolute top-1/2 left-0 w-9 max-w-none -translate-y-[46%]\"}]}]]}],[\"$\",\"span\",null,{\"className\":\"block truncate text-[12px] leading-tight text-ink-2\",\"children\":\"Product design studio\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-1.5 block text-[12px] leading-relaxed text-ink-2 text-pretty\",\"children\":\"Get expert product design for your business.\"}]]}],\"$L7\"]}]]}],\"$L8\"]}]}],null,\"$L9\"]}],{},null,false]},null,false],\"$La\",false]],\"m\":\"$undefined\",\"G\":[\"$b\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"c:I[5264,[\"152\",\"static/chunks/152-d860c9c4fdf1deb2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"619\",\"static/chunks/619-ba102abea3e3d0e4.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"437\",\"static/chunks/437-ac0285169c3378eb.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"238\",\"static/chunks/238-4fb2a85d83a8fe1e.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"974\",\"static/chunks/app/page-a270d585e13da8b9.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\"],\"Grid\"]\n22:I[4431,[],\"OutletBoundary\"]\n24:I[5278,[],\"AsyncMetadataOutlet\"]\n26:I[4431,[],\"ViewportBoundary\"]\n28:I[4431,[],\"MetadataBoundary\"]\n29:\"$Sreact.suspense\"\n7:[\"$\",\"a\",null,{\"href\":\"https://cal.com/shane-levine-7bnfdw/30min?overlayCalendar=true\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"mt-2.5 inline-flex h-7 items-center gap-1.5 rounded-full bg-field px-2.5 text-[11.5px] font-medium text-ink shadow-btn transition-[background-color,transform] duration-150 hover:bg-hover active:scale-[0.96]\",\"children\":[\"Book a call\",[\"$\",\"svg\",null,{\"width\":\"13\",\"height\":\"13\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2.2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"children\":[\"$\",\"path\",null,{\"d\":\"M5 12h14M13 6l6 6-6 6\"}]}]]}]\nd:Tc07,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * LOADING STATE — pixel-grid loader for long-running work\n *\n * Variants:\n *   Drive  — square cells, chevron wavefront driving right;\n *            the 650ms cycle is shorter than the sweep, so\n *            two fronts are always in flight\n *   Dots   — same wavefront, circular cells\n *   Orbit  — a comet lapping the grid perimeter\n *\n * Paired with a shimmering label and a live elapsed timer\n * in mono tabular figures. Reduced motion freezes the grid\n * to its dim state; the timer still ticks.\n * ───────────────────────────────────────────────────────── */\n\nconst chevron = Array.from({ length: 9 }, (_, i) =\u003e {\n  const r = Math.floor(i / 3), c = i % 3;\n  return (c + Math.abs(r - 1)) * 90;\n});\n\nconst ORBIT_ORDER = [0, 1, 2, 5, 8, 7, 6, 3];\nconst orbit = Array.from({ length: 9 }, (_, i) =\u003e {\n  const k = ORBIT_ORDER.indexOf(i);\n  return k === -1 ? null : k * 110;\n});\n\nconst PATTERNS: Record\u003cstring, { delays: (number | null)[]; dur: number; round: boolean }\u003e = {\n  Drive: { delays: chevron, dur: 650, round: false },\n  Dots: { delays: chevron, dur: 650, round: true },\n  Orbit: { delays: orbit, dur: 950, round: false },\n};\n\nfunction useElapsed() {\n  const [ds, setDs] = useState(0);\n  useEffect(() =\u003e {\n    const t = setInterval(() =\u003e setDs((d) =\u003e d + 1), 100);\n    return () =\u003e clearInterval(t);\n  }, []);\n  const total = ds / 10;\n  if (total \u003c 60) return `${total.toFixed(1)}s`;\n  return `${Math.floor(total / 60)}m ${(total % 60).toFixed(1)}s`;\n}\n\nexport default function LoadingState({\n  label = \"Churning\",\n  variant = \"Drive\",\n}: {\n  label?: string;\n  variant?: string;\n}) {\n  const elapsed = useElapsed();\n  const { delays, dur, round } = PATTERNS[variant] ?? PATTERNS.Drive;\n\n  return (\n    \u003cdiv className=\"flex w-fit items-center gap-2.5\"\u003e\n      \u003cspan aria-hidden className=\"grid grid-cols-[repeat(3,4px)] gap-[1.5px]\"\u003e\n        {delays.map((d, i) =\u003e (\n          \u003cspan\n            key={i}\n            className={`size-[4px] bg-ink ${round ? \"rounded-full\" : \"rounded-[1px]\"}`}\n            style={{\n              opacity: d === null ? 0.07 : 0.15,\n              animation:\n                d === null ? \"none\" : `pixel-on ${dur}ms ease-in-out ${d}ms infinite`,\n            }}\n          /\u003e\n        ))}\n      \u003c/span\u003e\n      \u003cspan\n        className=\"bg-clip-text text-[13px] font-medium text-transparent\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(90deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%)\",\n          backgroundSize: \"200% 100%\",\n          animation: \"shimmer-text 1.4s linear infinite\",\n        }}\n      \u003e\n        {label}\n      \u003c/span\u003e\n      \u003cspan className=\"font-mono text-[12px] text-ink-3 tabular-nums\"\u003e\n        {elapsed}\n      \u003c/span\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"e:T28c7,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * THINKING — expandable agent trace, four variants\n *\n *   Steps      step list with spinner → muted checks\n *   Reasoning  prose reasoning that expands, then settles\n *   Search     web-search trace: query + sources read\n *   Coding     tool trace: files read, edits, commands\n *\n * The trace runs once, settles, and remains expandable.\n * ───────────────────────────────────────────────────────── */\n\nconst STAGES = [800, 600, 1800, 2600, 1600];\n\nfunction useSequence(steps: number[]) {\n  const [stage, setStage] = useState(0);\n  useEffect(() =\u003e {\n    if (stage \u003e= steps.length - 1) return;\n    const t = setTimeout(() =\u003e setStage((s) =\u003e s + 1), steps[stage]);\n    return () =\u003e clearTimeout(t);\n  }, [stage, steps]);\n  return stage;\n}\n\ntype Row = {\n  primary: string;\n  secondary?: string;\n  mono?: boolean;\n  add?: number;\n  del?: number;\n  href?: string;\n};\n\nconst VARIANTS: Record\u003c\n  string,\n  { active: string; done: string; rows: Row[]; query?: string }\n\u003e = {\n  Steps: {\n    active: \"Thinking\",\n    done: \"Thought for 4 seconds\",\n    rows: [\n      { primary: \"Reading flavor briefs\" },\n      { primary: \"Scanning supplier lists\" },\n      { primary: \"Comparing tasting notes\", secondary: \"6 flavors\" },\n      { primary: \"Writing the scoop report\" },\n    ],\n  },\n  Reasoning: {\n    active: \"Thinking\",\n    done: \"Thought for 4 seconds\",\n    rows: [\n      { primary: \"Summer demand spikes for stone-fruit flavors — peach and apricot lead.\" },\n      { primary: \"I should check cone inventory before promoting a waffle-bowl special.\" },\n    ],\n  },\n  Search: {\n    active: \"Searching the web\",\n    done: \"Searched the web\",\n    query: \"best waffle cone supplier\",\n    rows: [\n      { primary: \"Joy Cone\", secondary: \"joycone.com\", href: \"https://joycone.com/fs_products/waffle-cones/\" },\n      { primary: \"WebstaurantStore\", secondary: \"webstaurantstore.com\", href: \"https://www.webstaurantstore.com/ice-cream-shop-supplies.html\" },\n      { primary: \"The Konery\", secondary: \"thekonery.com\", href: \"https://www.thekonery.com/\" },\n    ],\n  },\n  Coding: {\n    active: \"Running tools\",\n    done: \"Ran 3 tools\",\n    rows: [\n      { primary: \"Read\", secondary: \"flavors.ts\", mono: true },\n      { primary: \"Edit\", secondary: \"ChurnSchedule.tsx\", mono: true, add: 74, del: 41 },\n      { primary: \"Run\", secondary: \"npm run freeze\", mono: true },\n    ],\n  },\n};\n\nfunction Dot({ tone }: { tone: string }) {\n  return (\n    \u003cspan className={`flex size-3.5 shrink-0 items-center justify-center rounded-full text-white ${tone}`}\u003e\n      \u003csvg width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\"\u003e\n        \u003ccircle cx=\"12\" cy=\"12\" r=\"9\" /\u003e\n        \u003cpath d=\"M3.5 12h17M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\" /\u003e\n      \u003c/svg\u003e\n    \u003c/span\u003e\n  );\n}\n\nconst TONES = [\"bg-accent\", \"bg-orange\", \"bg-green\"];\n\nexport default function ThinkingState({ variant = \"Steps\" }: { variant?: string }) {\n  const stage = useSequence(STAGES);\n  const [manualExpanded, setManualExpanded] = useState\u003cboolean | null\u003e(null);\n  const [selectedTool, setSelectedTool] = useState\u003cstring | null\u003e(null);\n  const v = VARIANTS[variant] ?? VARIANTS.Steps;\n  const autoExpanded = stage \u003e= 1 \u0026\u0026 stage \u003c 4;\n  const expanded = manualExpanded ?? autoExpanded;\n  const working = stage \u003c 3;\n  const visible = stage \u003c 2 ? 0 : stage === 2 ? Math.min(2, v.rows.length) : v.rows.length;\n  const traceRef = useRef\u003cHTMLDivElement\u003e(null);\n  const [lineHeight, setLineHeight] = useState(0);\n  useLayoutEffect(() =\u003e {\n    if (traceRef.current) setLineHeight(traceRef.current.offsetHeight);\n  }, [visible, expanded, variant, stage]);\n\n  return (\n    \u003cdiv key={variant} className=\"flex min-h-[176px] w-full max-w-95 flex-col\"\u003e\n      {/* header — shared across variants */}\n      \u003cbutton\n        type=\"button\"\n        aria-expanded={expanded}\n        onClick={() =\u003e setManualExpanded((current) =\u003e !(current ?? autoExpanded))}\n        className=\"-mx-1.5 flex w-fit items-center gap-2 rounded-control px-1.5 py-1\n          transition-colors duration-100 hover:bg-hover-2\"\n      \u003e\n        \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill={working ? \"var(--ink-2)\" : \"var(--ink-3)\"}\u003e\n          \u003cpath d=\"M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z\" /\u003e\n        \u003c/svg\u003e\n        {working ? (\n          \u003cspan\n            className=\"bg-clip-text text-[13px] font-medium whitespace-nowrap text-transparent\"\n            style={{\n              backgroundImage:\n                \"linear-gradient(90deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%)\",\n              backgroundSize: \"200% 100%\",\n              animation: \"shimmer-text 1.4s linear infinite\",\n            }}\n          \u003e\n            {v.active}\n          \u003c/span\u003e\n        ) : (\n          \u003cspan\n            className=\"text-[13px] font-medium whitespace-nowrap text-ink-2\"\n            style={{ animation: \"fade-in 350ms ease-out both\" }}\n          \u003e\n            {v.done}\n          \u003c/span\u003e\n        )}\n        \u003csvg\n          width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n          className=\"transition-transform duration-300\"\n          style={{ transform: expanded ? \"rotate(180deg)\" : \"rotate(0)\" }}\n        \u003e\n          \u003cpath d=\"M6 9l6 6 6-6\" /\u003e\n        \u003c/svg\u003e\n      \u003c/button\u003e\n\n      {/* expandable trace */}\n      \u003cdiv\n        className=\"grid transition-[grid-template-rows,opacity] duration-400\"\n        style={{\n          gridTemplateRows: expanded ? \"1fr\" : \"0fr\",\n          opacity: expanded ? 1 : 0,\n          transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n        }}\n      \u003e\n        \u003cdiv className=\"overflow-hidden\"\u003e\n          \u003cdiv className=\"relative mt-1 ml-[5px] pl-4\"\u003e\n            \u003cspan\n              aria-hidden\n              className=\"absolute left-[3px] w-px bg-line\"\n              style={{ top: -8, height: lineHeight ? lineHeight - 2 : 0, transition: \"height 500ms cubic-bezier(0.23,1,0.32,1)\" }}\n            /\u003e\n            \u003cdiv ref={traceRef} className=\"flex flex-col gap-1 py-1\"\u003e\n            {v.query \u0026\u0026 (\n              \u003cdiv className=\"flex h-6 items-center gap-2 px-1.5\" style={{ animation: expanded ? \"fade-up 300ms cubic-bezier(0.23,1,0.32,1) both\" : undefined }}\u003e\n                \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"shrink-0\"\u003e\n                  \u003ccircle cx=\"11\" cy=\"11\" r=\"7\" /\u003e\n                  \u003cpath d=\"M21 21l-4.3-4.3\" /\u003e\n                \u003c/svg\u003e\n                \u003cspan className=\"text-[12.5px] text-ink-2\"\u003e{v.query}\u003c/span\u003e\n              \u003c/div\u003e\n            )}\n            {v.rows.slice(0, visible).map((row, i) =\u003e {\n              const content = (\n                \u003c\u003e\n                {variant === \"Search\" \u0026\u0026 \u003cDot tone={TONES[i % 3]} /\u003e}\n                {variant === \"Steps\" \u0026\u0026 (\n                  i \u003c visible - 1 || !working ? (\n                    \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"shrink-0\"\u003e\n                      \u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\n                    \u003c/svg\u003e\n                  ) : (\n                    \u003cspan className=\"size-3 shrink-0 rounded-full border-[1.5px] border-line-strong border-t-ink-2\" style={{ animation: \"spin 700ms linear infinite\" }} /\u003e\n                  )\n                )}\n                \u003cspan className={`min-w-0 truncate text-[12.5px] ${variant === \"Reasoning\" ? \"whitespace-normal leading-relaxed text-ink-2\" : \"font-medium text-ink\"} ${variant === \"Search\" ? \"animated-underline\" : \"\"}`}\u003e\n                  {row.primary}\n                \u003c/span\u003e\n                {row.secondary \u0026\u0026 (\n                  \u003cspan className={`shrink-0 text-[11.5px] text-ink-3 ${row.mono ? \"font-mono\" : \"\"}`}\u003e\n                    {row.secondary}\n                  \u003c/span\u003e\n                )}\n                {row.add !== undefined \u0026\u0026 (\n                  \u003cspan className=\"shrink-0 font-mono text-[11px] tabular-nums\"\u003e\n                    \u003cspan className=\"text-green\"\u003e+{row.add}\u003c/span\u003e{\" \"}\n                    \u003cspan className=\"text-red\"\u003e−{row.del}\u003c/span\u003e\n                  \u003c/span\u003e\n                )}\n                \u003c/\u003e\n              );\n              const rowClass = \"flex min-h-7 w-full items-center gap-2 rounded-[6px] px-1.5 py-0.5 text-left\";\n              const animation = { animation: `fade-up 320ms cubic-bezier(0.23,1,0.32,1) ${i * 120}ms both` };\n\n              if (variant === \"Search\") {\n                return (\n                  \u003ca\n                    key={row.primary}\n                    href={row.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    className={`${rowClass} transition-colors duration-150 hover:bg-hover`}\n                    style={animation}\n                  \u003e\n                    {content}\n                  \u003c/a\u003e\n                );\n              }\n\n              if (variant === \"Coding\") {\n                const selected = selectedTool === row.primary;\n                return (\n                  \u003cbutton\n                    key={row.primary}\n                    type=\"button\"\n                    aria-pressed={selected}\n                    onClick={() =\u003e setSelectedTool(selected ? null : row.primary)}\n                    className={`${rowClass} transition-colors duration-150 ${selected ? \"bg-inset\" : \"hover:bg-hover\"}`}\n                    style={animation}\n                  \u003e\n                    {content}\n                  \u003c/button\u003e\n                );\n              }\n\n              return (\n                \u003cdiv key={row.primary} className={rowClass} style={animation}\u003e\n                  {content}\n                \u003c/div\u003e\n              );\n            })}\n            {variant === \"Search\" \u0026\u0026 stage \u003e= 3 \u0026\u0026 (\n              \u003cspan className=\"text-[12px] text-ink-3\" style={{ animation: \"fade-in 300ms ease-out both\" }}\u003e\n                +7 more\n              \u003c/span\u003e\n            )}\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"f:T2304,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * STREAMING TEXT\n * Words resolve out of blur, inline citations appear in\n * context, then actions and follow-up prompts become usable.\n * ───────────────────────────────────────────────────────── */\n\nconst WORD_MS = 55;\nconst HOLD_MS = 3400;\n\ntype Token = { text: string; cite?: boolean };\n\nconst TOKENS: Token[] = [\n  ...\"Pistachio is your fastest-growing flavor — sales are up 23% this month and margins beat vanilla by 8 points.\"\n    .split(\" \")\n    .map((text) =\u003e ({ text })),\n  { text: \"\", cite: true },\n  ...\"Stone-fruit flavors are trending in the same range.\"\n    .split(\" \")\n    .map((text) =\u003e ({ text })),\n];\n\nconst FOLLOW_UPS = [\n  \"Which flavors sell best in winter\",\n  \"Compare gelato and soft serve margins\",\n];\n\nconst SOURCE_IMAGES = {\n  scoop:\n    \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%231f7a5f'/%3E%3Cpath d='M20 36c0 7 5.4 12 12 12s12-5 12-12H20Z' fill='%23fff'/%3E%3Ccircle cx='32' cy='25' r='11' fill='%23bff3dd'/%3E%3Cpath d='M24 24c4-7 13-7 17 0' fill='none' stroke='%231f7a5f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\",\n  trends:\n    \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%232f6fec'/%3E%3Cpath d='M15 43 27 31l8 7 14-18' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='49' cy='20' r='5' fill='%23bfe0ff'/%3E%3C/svg%3E\",\n  market:\n    \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23e56d24'/%3E%3Cpath d='M17 45V25h8v20h-8Zm11 0V16h8v29h-8Zm11 0V30h8v15h-8Z' fill='%23fff'/%3E%3Cpath d='M16 49h32' stroke='%23ffd6b8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\",\n};\n\nconst SOURCES = [\n  { name: \"Scoop Data\", domain: \"scoopdata.io\", href: \"https://scoopdata.io/\", image: SOURCE_IMAGES.scoop },\n  { name: \"Trends Index\", domain: \"trends.google.com\", href: \"https://trends.google.com/trends/\", image: SOURCE_IMAGES.trends },\n  { name: \"Market Basket\", domain: \"marketbasket.io\", href: \"https://marketbasket.io/\", image: SOURCE_IMAGES.market },\n];\n\nfunction sourceImage(source: (typeof SOURCES)[number]) {\n  return source.image;\n}\n\nfunction SourceChip() {\n  const source = SOURCES[0];\n  return (\n    \u003ca\n      href={source.href}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      className=\"ml-0 mr-1 inline-flex h-4.5 translate-y-[-1px] items-center gap-1 rounded-[5px]\n        bg-inset pr-[3px] pl-[3px] align-middle font-mono text-[10.5px] text-ink-2 shadow-hairline\n        transition-colors duration-150 hover:bg-hover hover:text-ink\"\n      style={{ animation: \"pop-in 250ms cubic-bezier(0.23,1,0.32,1) both\" }}\n    \u003e\n      \u003cimg src={sourceImage(source)} alt=\"\" className=\"source-avatar size-3 rounded-[3px]\" /\u003e\n      \u003cspan\u003e{source.domain}\u003c/span\u003e\n    \u003c/a\u003e\n  );\n}\n\nconst ACTION_ICONS: React.ReactNode[] = [\n  \u003cg key=\"copy\"\u003e\u003crect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2.5\" /\u003e\u003cpath d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" /\u003e\u003c/g\u003e,\n  \u003cpath key=\"retry\" d=\"M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6\" /\u003e,\n  \u003cpath key=\"up\" d=\"M7 10v12M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88z\" /\u003e,\n  \u003cpath key=\"down\" d=\"M17 14V2M9 18.12L10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88z\" /\u003e,\n];\n\nexport default function StreamingText() {\n  const [count, setCount] = useState(0);\n  const [sourcesOpen, setSourcesOpen] = useState(false);\n  const done = count \u003e= TOKENS.length;\n\n  useEffect(() =\u003e {\n    const t = setTimeout(\n      () =\u003e setCount((c) =\u003e (c \u003e= TOKENS.length ? 0 : c + 1)),\n      done ? HOLD_MS : WORD_MS,\n    );\n    return () =\u003e clearTimeout(t);\n  }, [count, done]);\n\n  return (\n    \u003cdiv className=\"min-h-[15.5rem] w-full max-w-95\"\u003e\n      \u003cp className=\"text-[13px] leading-relaxed text-ink\"\u003e\n        {TOKENS.slice(0, count).map((token, i) =\u003e\n          token.cite ? (\n            \u003cSourceChip key={i} /\u003e\n          ) : (\n            \u003cspan\n              key={i}\n              className=\"inline [will-change:filter,opacity]\"\n              style={{ animation: \"stream-in 420ms cubic-bezier(0.22,0.61,0.25,1) both\" }}\n            \u003e\n              {token.text}{\" \"}\n            \u003c/span\u003e\n          ),\n        )}\n        {!done \u0026\u0026 (\n          \u003cspan\n            className=\"ml-0.5 inline-block h-3 w-0.5 translate-y-0.5 rounded-full bg-ink\"\n            style={{ animation: \"fade-in 150ms ease-out both\" }}\n          /\u003e\n        )}\n      \u003c/p\u003e\n\n      {/* action icons row */}\n      \u003cdiv\n        className=\"mt-2 flex items-center gap-0.5 transition-opacity duration-400\"\n        style={{ opacity: done ? 1 : 0, pointerEvents: done ? \"auto\" : \"none\" }}\n      \u003e\n        {ACTION_ICONS.map((icon, i) =\u003e (\n          \u003cbutton\n            key={i}\n            type=\"button\"\n            aria-label=\"Action\"\n            className=\"flex size-6 items-center justify-center rounded-[6px] text-ink-3\n              transition-colors duration-100 hover:bg-hover-2 hover:text-ink-2\"\n          \u003e\n            \u003csvg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n              {icon}\n            \u003c/svg\u003e\n          \u003c/button\u003e\n        ))}\n        \u003cbutton\n          type=\"button\"\n          aria-expanded={sourcesOpen}\n          onClick={() =\u003e setSourcesOpen((current) =\u003e !current)}\n          className=\"ml-1.5 flex items-center gap-1.5 rounded-[6px] px-1 py-0.5 text-left transition-colors duration-150 hover:bg-hover\"\n        \u003e\n          \u003cspan className=\"flex -space-x-1\"\u003e\n            {SOURCES.map((source) =\u003e (\n              \u003cimg\n                key={source.domain}\n                src={sourceImage(source)}\n                alt=\"\"\n                className=\"source-avatar size-3.5 rounded-full bg-surface shadow-[0_0_0_1.5px_var(--canvas)]\"\n              /\u003e\n            ))}\n          \u003c/span\u003e\n          \u003cspan className=\"text-[12px] text-ink-2\"\u003e10 sources\u003c/span\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n\n      \u003cdiv\n        className=\"grid transition-[grid-template-rows,opacity] duration-300\"\n        style={{\n          gridTemplateRows: done \u0026\u0026 sourcesOpen ? \"1fr\" : \"0fr\",\n          opacity: done \u0026\u0026 sourcesOpen ? 1 : 0,\n          transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n        }}\n      \u003e\n        \u003cdiv className=\"overflow-hidden\"\u003e\n          \u003cdiv className=\"mt-1.5 flex flex-col rounded-[10px] bg-inset p-1 shadow-hairline\"\u003e\n            {SOURCES.map((source) =\u003e (\n              \u003ca\n                key={source.domain}\n                href={source.href}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                className=\"flex items-center gap-2 rounded-[6px] px-1.5 py-1 text-[12px] text-ink-2 transition-colors duration-150 hover:bg-hover hover:text-ink\"\n              \u003e\n                \u003cimg src={sourceImage(source)} alt=\"\" className=\"source-avatar size-4 rounded-[4px]\" /\u003e\n                \u003cspan className=\"animated-underline\"\u003e{source.name}\u003c/span\u003e\n                \u003cspan className=\"ml-auto font-mono text-[10.5px] text-ink-3\"\u003e{source.domain}\u003c/span\u003e\n              \u003c/a\u003e\n            ))}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      {/* follow-ups */}\n      \u003cdiv\n        className=\"mt-2.5 transition-opacity duration-400\"\n        style={{ opacity: done ? 1 : 0, pointerEvents: done ? \"auto\" : \"none\" }}\n      \u003e\n        \u003cp className=\"text-[12px] font-medium text-ink-2\"\u003eFollow-ups\u003c/p\u003e\n        \u003cdiv className=\"mt-0.5 flex flex-col\"\u003e\n          {FOLLOW_UPS.map((text, i) =\u003e (\n            \u003cbutton\n              key={text}\n              className=\"-mx-1.5 flex items-center gap-2 rounded-[7px] border-b border-line\n                px-1.5 py-1.5 text-left text-[12.5px] text-ink transition-colors\n                duration-100 hover:bg-hover-2\"\n              style={\n                done\n                  ? { animation: `fade-up 350ms cubic-bezier(0.23,1,0.32,1) ${i * 90}ms both` }\n                  : { opacity: 0 }\n              }\n            \u003e\n              \u003csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"shrink-0\"\u003e\n                \u003cpath d=\"M9 10l-5 5 5 5\" /\u003e\n                \u003cpath d=\"M20 4v7a4 4 0 0 1-4 4H4\" /\u003e\n              \u003c/svg\u003e\n              {text}\n            \u003c/button\u003e\n          ))}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"10:T28ee,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * APPROVAL CARD (human-in-the-loop)\n * One question at a time; elongated pills show progress;\n * the circular arrow up top advances (↑ sends on the last).\n * Choices, paging, and submission are directly controlled.\n * ───────────────────────────────────────────────────────── */\n\nconst QUESTIONS = [\n  {\n    q: \"How many flavors should we launch?\",\n    type: \"radio\" as const,\n    options: [\"Three (core line)\", \"Five (full case)\", \"Just one hero\"],\n  },\n  {\n    q: \"Which mix-ins should we stock?\",\n    type: \"check\" as const,\n    options: [\"Chocolate chips\", \"Waffle bits\", \"Sprinkles\"],\n  },\n  {\n    q: \"Which market do we enter first?\",\n    type: \"radio\" as const,\n    options: [\"Food trucks\", \"Grocery freezers\", \"Scoop shops\"],\n  },\n];\n\nexport default function ApprovalCard() {\n  const [qi, setQi] = useState(0);\n  const [answers, setAnswers] = useState\u003cRecord\u003cnumber, number[]\u003e\u003e({});\n  const [custom, setCustom] = useState\u003cRecord\u003cnumber, string\u003e\u003e({});\n  const [sent, setSent] = useState(false);\n  const [open, setOpen] = useState(true);\n  const question = QUESTIONS[qi];\n  const last = qi === QUESTIONS.length - 1;\n  const selected = answers[qi] ?? [];\n  const hasAnswer = selected.length \u003e 0 || Boolean(custom[qi]?.trim());\n\n  const toggle = (index: number) =\u003e {\n    setAnswers((current) =\u003e {\n      const picked = current[qi] ?? [];\n      const next = question.type === \"radio\"\n        ? [index]\n        : picked.includes(index)\n          ? picked.filter((item) =\u003e item !== index)\n          : [...picked, index];\n      return { ...current, [qi]: next };\n    });\n    if (question.type === \"radio\") {\n      setCustom((current) =\u003e ({ ...current, [qi]: \"\" }));\n      // single-choice auto-advances\n      window.setTimeout(() =\u003e {\n        if (qi === QUESTIONS.length - 1) setSent(true);\n        else setQi((current) =\u003e Math.min(QUESTIONS.length - 1, current + 1));\n      }, 480);\n    }\n  };\n\n  const reset = () =\u003e {\n    setQi(0);\n    setAnswers({});\n    setCustom({});\n    setSent(false);\n    setOpen(true);\n  };\n\n  if (!open) {\n    return (\n      \u003cbutton type=\"button\" onClick={() =\u003e setOpen(true)} className=\"rounded-control bg-surface px-3 py-2 text-[12.5px] font-medium text-ink shadow-btn transition-colors duration-150 hover:bg-hover\"\u003e\n        Open approval\n      \u003c/button\u003e\n    );\n  }\n\n  return (\n    \u003cdiv className=\"flex min-h-[196px] w-full max-w-80 flex-col items-stretch\"\u003e\n      \u003cdiv className=\"w-full self-start overflow-hidden rounded-card bg-surface shadow-card\"\u003e\n        {sent ? (\n          \u003cdiv className=\"flex h-37 flex-col items-center justify-center gap-2\"\u003e\n            \u003cspan\n              className=\"flex size-6 items-center justify-center rounded-full bg-green text-white\"\n              style={{ animation: \"pop-in 300ms cubic-bezier(0.23,1,0.32,1) both\" }}\n            \u003e\n              \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\u003c/svg\u003e\n            \u003c/span\u003e\n            \u003cspan className=\"text-[13px] font-medium text-ink\" style={{ animation: \"fade-up 350ms cubic-bezier(0.23,1,0.32,1) 100ms both\" }}\u003e\n              Answers sent\n            \u003c/span\u003e\n            \u003cbutton type=\"button\" onClick={reset} className=\"text-[12px] font-medium text-accent-ink hover:underline\"\u003e\n              Start over\n            \u003c/button\u003e\n          \u003c/div\u003e\n        ) : (\n          \u003cdiv key={qi} className=\"primitive-card-pad\" style={{ animation: \"fade-up 350ms cubic-bezier(0.23,1,0.32,1) both\" }}\u003e\n            \u003cdiv className=\"flex items-start justify-between gap-3\"\u003e\n              \u003cspan className=\"text-[13px] font-medium text-ink\"\u003e{question.q}\u003c/span\u003e\n              \u003cbutton\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                onClick={() =\u003e setOpen(false)}\n                className=\"primitive-icon-button shrink-0\n                  text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n              \u003e\n                \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\"\u003e\n                  \u003cpath d=\"M18 6L6 18M6 6l12 12\" /\u003e\n                \u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"mt-2 flex flex-col gap-0.5\"\u003e\n              {question.options.map((option, i) =\u003e {\n                const on = selected.includes(i);\n                return (\n                  \u003cbutton\n                    key={option}\n                    type=\"button\"\n                    aria-pressed={on}\n                    onClick={() =\u003e toggle(i)}\n                    className=\"-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-100 hover:bg-hover\"\n                  \u003e\n                    \u003cspan\n                      className={`flex size-4 shrink-0 items-center justify-center transition-colors duration-200\n                        ${question.type === \"radio\" ? \"rounded-full\" : \"rounded-[5px]\"}\n                        ${on ? \"bg-ink text-canvas\" : \"shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent\"}`}\n                    \u003e\n                      {question.type === \"radio\" ? (\n                        \u003cspan className=\"size-1.5 rounded-full bg-canvas transition-transform duration-200\" style={{ transform: on ? \"scale(1)\" : \"scale(0)\" }} /\u003e\n                      ) : (\n                        \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\u003c/svg\u003e\n                      )}\n                    \u003c/span\u003e\n                    \u003cspan className={`text-[13px] transition-colors duration-200 ${on ? \"text-ink\" : \"text-ink-2\"}`}\u003e\n                      {option}\n                    \u003c/span\u003e\n                  \u003c/button\u003e\n                );\n              })}\n              \u003clabel className=\"-mx-1.5 flex items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-100 focus-within:bg-hover hover:bg-hover\"\u003e\n                \u003cspan aria-hidden=\"true\" className=\"size-4 shrink-0\" /\u003e\n                \u003cinput\n                  value={custom[qi] ?? \"\"}\n                  onChange={(event) =\u003e {\n                    setCustom((current) =\u003e ({ ...current, [qi]: event.target.value }));\n                    if (question.type === \"radio\") setAnswers((current) =\u003e ({ ...current, [qi]: [] }));\n                  }}\n                  placeholder=\"Type something…\"\n                  aria-label=\"Custom answer\"\n                  className=\"min-w-0 flex-1 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3\"\n                /\u003e\n              \u003c/label\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n\n        {/* footer — ring-dot pager + send arrow */}\n        \u003cdiv className=\"primitive-card-footer flex items-center justify-between\"\u003e\n          \u003cspan className=\"flex items-center gap-2\"\u003e\n            \u003cbutton\n              type=\"button\"\n              aria-label=\"Previous\"\n              disabled={qi === 0 || sent}\n              onClick={() =\u003e setQi((current) =\u003e Math.max(0, current - 1))}\n              className=\"flex size-6 items-center justify-center rounded-[5px] text-ink-3 transition-colors duration-100 enabled:hover:bg-hover enabled:hover:text-ink-2 disabled:opacity-35\"\n            \u003e\n              \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M15 18l-6-6 6-6\" /\u003e\u003c/svg\u003e\n            \u003c/button\u003e\n            \u003cspan className=\"flex items-center gap-1\"\u003e\n              {QUESTIONS.map((_, i) =\u003e (\n                \u003cbutton\n                  key={i}\n                  type=\"button\"\n                  aria-label={`Go to question ${i + 1}`}\n                  aria-current={i === qi \u0026\u0026 !sent ? \"step\" : undefined}\n                  disabled={sent}\n                  onClick={() =\u003e setQi(i)}\n                  className=\"rounded-full transition-all duration-300 disabled:cursor-default\"\n                  style={\n                    i === qi \u0026\u0026 !sent\n                      ? { width: 9, height: 9, border: \"2.5px solid var(--ink)\" }\n                      : sent || i \u003c qi\n                        ? { width: 7, height: 7, background: \"var(--ink-3)\" }\n                        : { width: 7, height: 7, border: \"1.5px solid var(--ink-3)\" }\n                  }\n                /\u003e\n              ))}\n            \u003c/span\u003e\n            \u003cbutton\n              type=\"button\"\n              aria-label=\"Next\"\n              disabled={last || sent}\n              onClick={() =\u003e setQi((current) =\u003e Math.min(QUESTIONS.length - 1, current + 1))}\n              className=\"flex size-6 items-center justify-center rounded-[5px] text-ink-3 transition-colors duration-100 enabled:hover:bg-hover enabled:hover:text-ink-2 disabled:opacity-35\"\n            \u003e\n              \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M9 6l6 6-6 6\" /\u003e\u003c/svg\u003e\n            \u003c/button\u003e\n          \u003c/span\u003e\n          {!sent \u0026\u0026 (\n            \u003cbutton\n              type=\"button\"\n              aria-label={last ? \"Send answers\" : \"Next question\"}\n              disabled={!hasAnswer}\n              onClick={() =\u003e last ? setSent(true) : setQi((current) =\u003e current + 1)}\n              className=\"-mr-0.5 flex size-7 items-center justify-center rounded-[8px] transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.96]\"\n              style={{\n                background: hasAnswer ? \"var(--ink)\" : \"var(--field)\",\n                color: hasAnswer ? \"var(--surface)\" : \"var(--ink-3)\",\n                boxShadow: hasAnswer ? \"inset 0 1px 0 rgba(255,255,255,0.14)\" : \"var(--shadow-btn)\",\n              }}\n            \u003e\n              \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n                \u003cpath d=\"M12 19V5M5 12l7-7 7 7\" /\u003e\n              \u003c/svg\u003e\n            \u003c/button\u003e\n          )}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"11:T237c,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * TOOL CHIPS\n * An agent run as compact rows: tool calls with inline\n * chips, then file-diff chips summarizing the edits.\n * Hover a row to reveal its chevron; every row expands\n * to show what the tool actually did.\n * ───────────────────────────────────────────────────────── */\n\nconst STEP_MS = 700;\n\nconst Icons: Record\u003cstring, React.ReactNode\u003e = {\n  think: \u003cpath d=\"M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z\" /\u003e,\n  write: \u003cg fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z\" /\u003e\u003c/g\u003e,\n  run: \u003cg fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M4 17l6-5-6-5M12 19h8\" /\u003e\u003c/g\u003e,\n  read: \u003cg fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" /\u003e\u003cpath d=\"M14 2v6h6\" /\u003e\u003c/g\u003e,\n};\n\ntype DetailLine = { text: string; tone?: \"add\" };\n\nconst ROWS: { icon: string; label: string; chip: string; mono: boolean; detailMono: boolean; detail: DetailLine[] }[] = [\n  {\n    icon: \"think\", label: \"Thinking\", chip: \"Planning the churn schedule…\", mono: false, detailMono: false,\n    detail: [\n      { text: \"Weekend demand carries pistachio, so it churns first.\" },\n      { text: \"Batch capacity leaves two evening freezer windows.\" },\n    ],\n  },\n  {\n    icon: \"write\", label: \"Write 204 lines\", chip: \"ChurnSchedule.tsx\", mono: true, detailMono: true,\n    detail: [\n      { text: \"+ const windows = slots.filter((s) =\u003e s.temp \u003c= -12)\", tone: \"add\" },\n      { text: \"+ return schedule(windows, { hero: \\\"pistachio\\\" })\", tone: \"add\" },\n    ],\n  },\n  {\n    icon: \"run\", label: \"Rebuild and verify\", chip: \"npm run freeze\", mono: true, detailMono: true,\n    detail: [\n      { text: \"✓ built in 1.2s\" },\n      { text: \"✓ 34 checks passed\" },\n    ],\n  },\n  {\n    icon: \"read\", label: \"Read image\", chip: \"flavor-chart.png\", mono: true, detailMono: false,\n    detail: [\n      { text: \"1280 × 720 · line chart, three summers.\" },\n      { text: \"Mint chip trends up 12% through July.\" },\n    ],\n  },\n];\n\nconst DIFFS = [\n  { file: \"flavors.css\", add: 13, del: 0 },\n  { file: \"ChurnSchedule.tsx\", add: 74, del: 41 },\n  { file: \"menu.ts\", add: 8, del: 2 },\n];\n\nexport default function ToolChips() {\n  const [step, setStep] = useState(0);\n  const [open, setOpen] = useState(true);\n  const [openRows, setOpenRows] = useState\u003cSet\u003cstring\u003e\u003e(new Set());\n  const total = ROWS.length + 1; // rows, then diff chips\n\n  useEffect(() =\u003e {\n    if (step \u003e= total) return;\n    const t = setTimeout(() =\u003e setStep((s) =\u003e s + 1), STEP_MS);\n    return () =\u003e clearTimeout(t);\n  }, [step, total]);\n\n  const toggleRow = (label: string) =\u003e\n    setOpenRows((current) =\u003e {\n      const next = new Set(current);\n      next.has(label) ? next.delete(label) : next.add(label);\n      return next;\n    });\n\n  return (\n    \u003cdiv className=\"min-h-[220px] w-full max-w-80 pb-1\"\u003e\n      {/* collapsed run header */}\n      \u003cbutton\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() =\u003e setOpen((current) =\u003e !current)}\n        className=\"-mx-1.5 flex w-fit items-center gap-1.5 rounded-control px-1.5 py-1 text-[12.5px] text-ink-2 transition-colors duration-100 hover:bg-hover-2\"\n      \u003e\n        \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"transition-transform duration-200\" style={{ transform: open ? \"rotate(0deg)\" : \"rotate(-90deg)\" }}\u003e\n          \u003cpath d=\"M6 9l6 6 6-6\" /\u003e\n        \u003c/svg\u003e\n        \u003cspan className=\"tabular-nums\"\u003e4 tool calls, 2 messages\u003c/span\u003e\n      \u003c/button\u003e\n\n      {/* tool call rows */}\n      \u003cdiv className=\"grid transition-[grid-template-rows,opacity] duration-300\" style={{ gridTemplateRows: open ? \"1fr\" : \"0fr\", opacity: open ? 1 : 0 }}\u003e\n        {/* -mx-1 + px-1.5 keeps content at the same x while giving the\n            row hover pills room inside this overflow-hidden clip box */}\n        \u003cdiv className=\"-mx-1 overflow-hidden px-1.5 pb-1\"\u003e\n        \u003cdiv className=\"mt-1.5 flex flex-col gap-1\"\u003e\n          {ROWS.slice(0, step).map((row) =\u003e {\n            const rowOpen = openRows.has(row.label);\n            return (\n            \u003cdiv key={row.label} style={{ animation: \"fade-up 300ms cubic-bezier(0.23,1,0.32,1) both\" }}\u003e\n              \u003cbutton\n                type=\"button\"\n                aria-expanded={rowOpen}\n                onClick={() =\u003e toggleRow(row.label)}\n                className=\"group/row -mx-[3px] flex h-7 w-[calc(100%+6px)] min-w-0 items-center gap-2 rounded-control px-[3px] text-left transition-colors duration-100 hover:bg-hover-2\"\n              \u003e\n                \u003cspan className=\"relative flex size-4 shrink-0 items-center justify-center text-ink-3\"\u003e\n                  \u003csvg\n                    width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill={row.icon === \"think\" ? \"currentColor\" : \"none\"} stroke=\"currentColor\"\n                    className={`transition-opacity duration-100 group-hover/row:opacity-0 ${rowOpen ? \"opacity-0\" : \"\"}`}\n                  \u003e\n                    {Icons[row.icon]}\n                  \u003c/svg\u003e\n                  \u003csvg\n                    width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n                    className={`absolute transition-[opacity,transform] duration-150 group-hover/row:opacity-100 ${rowOpen ? \"opacity-100\" : \"opacity-0\"}`}\n                    style={{ transform: rowOpen ? \"rotate(0deg)\" : \"rotate(-90deg)\" }}\n                  \u003e\n                    \u003cpath d=\"M6 9l6 6 6-6\" /\u003e\n                  \u003c/svg\u003e\n                \u003c/span\u003e\n                \u003cspan className=\"shrink-0 text-[12.5px] font-medium text-ink\"\u003e{row.label}\u003c/span\u003e\n                \u003cspan\n                  className={`inline-flex h-5.5 min-w-0 flex-1 cursor-pointer items-center truncate rounded-chip bg-hover-2 px-1.5\n                    text-[11.5px] text-[#43464c] shadow-hairline transition-colors duration-100 hover:bg-line-strong\n                    dark:bg-field dark:text-ink-2 dark:hover:bg-hover\n                    ${row.mono ? \"font-mono\" : \"\"}`}\n                \u003e\n                  {row.chip}\n                \u003c/span\u003e\n              \u003c/button\u003e\n\n              {/* expanded detail */}\n              \u003cdiv\n                className=\"grid transition-[grid-template-rows,opacity] duration-300\"\n                style={{ gridTemplateRows: rowOpen ? \"1fr\" : \"0fr\", opacity: rowOpen ? 1 : 0, transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\" }}\n              \u003e\n                \u003cdiv className=\"min-h-0 overflow-hidden\"\u003e\n                  \u003cdiv className=\"mt-0.5 mb-1 ml-2 flex flex-col gap-0.5 border-l border-line py-0.5 pl-3.5\"\u003e\n                    {row.detail.map((line) =\u003e (\n                      \u003cspan\n                        key={line.text}\n                        className={`truncate text-[11.5px] leading-[1.6] ${row.detailMono ? \"font-mono\" : \"\"} ${line.tone === \"add\" ? \"text-green\" : \"text-ink-2\"}`}\n                      \u003e\n                        {line.text}\n                      \u003c/span\u003e\n                    ))}\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            );\n          })}\n        \u003c/div\u003e\n\n      {/* file-diff chips */}\n      {step \u003e= total \u0026\u0026 (\n        \u003cdiv className=\"mt-2.5 flex max-w-full flex-wrap gap-1.5 border-t border-line pt-2.5\"\u003e\n          {DIFFS.map((d, i) =\u003e (\n            \u003cspan\n              key={d.file}\n              className=\"inline-flex h-7 max-w-full cursor-pointer items-center gap-1.5 rounded-chip\n                bg-surface px-2 font-mono text-[11.5px] text-ink shadow-btn\n                transition-colors duration-100 hover:bg-hover\"\n              style={{ animation: `pop-in 250ms cubic-bezier(0.23,1,0.32,1) ${i * 80}ms both` }}\n            \u003e\n              \u003cspan className=\"min-w-0 truncate\"\u003e{d.file}\u003c/span\u003e\n              \u003cspan className=\"shrink-0 text-green tabular-nums\"\u003e+{d.add}\u003c/span\u003e\n              {d.del \u003e 0 \u0026\u0026 \u003cspan className=\"shrink-0 text-red tabular-nums\"\u003e−{d.del}\u003c/span\u003e}\n            \u003c/span\u003e\n          ))}\n          \u003cbutton\n            type=\"button\"\n            className=\"inline-flex h-7 items-center rounded-chip px-1.5 font-mono text-[11.5px] text-ink-3\n              underline decoration-transparent underline-offset-2 transition-colors duration-100\n              hover:text-ink-2 hover:decoration-current\"\n            style={{ animation: `fade-in 300ms ease-out ${DIFFS.length * 80}ms both` }}\n          \u003e\n            +2 more\n          \u003c/button\u003e\n        \u003c/div\u003e\n      )}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"12:T2342,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * TASK ROWS\n *\n *     0ms   rows enter staggered (80ms apart)\n *   600ms   row 1 ring sweeps 0 → 66%\n *  1500ms   row 1 expands — detail steps drop down\n *  3900ms   row 1 collapses; row 2 flips to Failed + retry\n *  5300ms   row 2 resolves to Completed\n * The status run completes once; task details stay clickable.\n * ───────────────────────────────────────────────────────── */\n\nconst TICKS = [600, 900, 2400, 1400, 2400, 600];\n\nfunction useTick(intervals: number[]) {\n  const [tick, setTick] = useState(0);\n  useEffect(() =\u003e {\n    if (tick \u003e= intervals.length - 1) return;\n    const t = setTimeout(() =\u003e setTick((x) =\u003e x + 1), intervals[tick]);\n    return () =\u003e clearTimeout(t);\n  }, [tick, intervals]);\n  return tick;\n}\n\nfunction SpinnerRing({ active, children }: { active?: boolean; children?: React.ReactNode }) {\n  const size = 24, stroke = 2;\n  const r = (size - stroke) / 2;\n  const c = 2 * Math.PI * r;\n  return (\n    \u003cspan className=\"relative inline-flex shrink-0 items-center justify-center\" style={{ width: size, height: size }}\u003e\n      \u003csvg\n        width={size} height={size} className=\"absolute inset-0\"\n        style={active ? { animation: \"spin 1.1s linear infinite\" } : undefined}\n      \u003e\n        \u003ccircle cx={size / 2} cy={size / 2} r={r} fill=\"none\" stroke=\"var(--line)\" strokeWidth={stroke} /\u003e\n        {active \u0026\u0026 (\n          \u003ccircle\n            cx={size / 2} cy={size / 2} r={r} fill=\"none\"\n            stroke=\"var(--ink-3)\" strokeWidth={stroke} strokeLinecap=\"round\"\n            strokeDasharray={`${c * 0.28} ${c * 0.72}`}\n          /\u003e\n        )}\n      \u003c/svg\u003e\n      \u003cspan className=\"relative text-[10.5px] font-semibold tabular-nums text-ink\"\u003e{children}\u003c/span\u003e\n    \u003c/span\u003e\n  );\n}\n\nfunction Badge({ tone, children }: { tone: \"red\" | \"green\"; children: React.ReactNode }) {\n  return (\n    \u003cspan\n      className={`flex size-5.5 shrink-0 items-center justify-center rounded-full text-white\n        ${tone === \"red\" ? \"bg-red\" : \"bg-green\"}`}\n      style={{ animation: \"pop-in 300ms cubic-bezier(0.23,1,0.32,1) both\" }}\n    \u003e\n      {children}\n    \u003c/span\u003e\n  );\n}\n\nconst XIcon = (\n  \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3.5\" strokeLinecap=\"round\"\u003e\u003cpath d=\"M18 6L6 18M6 6l12 12\" /\u003e\u003c/svg\u003e\n);\nconst CheckIcon = (\n  \u003csvg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\u003c/svg\u003e\n);\nconst RetryIcon = (\n  \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6\" /\u003e\u003c/svg\u003e\n);\n\nexport default function TaskRows({ variant = \"Capsules\" }: { variant?: string }) {\n  const tick = useTick(TICKS);\n  const [manualOpen, setManualOpen] = useState\u003cRecord\u003cstring, boolean\u003e\u003e({});\n  const row2: \"pending\" | \"failed\" | \"done\" = tick \u003c 3 ? \"pending\" : tick === 3 ? \"failed\" : \"done\";\n\n  const rows = [\n    {\n      key: \"verify\",\n      badge: \u003cBadge tone=\"green\"\u003e{CheckIcon}\u003c/Badge\u003e,\n      label: \"Verified vendor records\",\n      amount: \"12 suppliers\",\n      pill: (\n        \u003cspan className=\"inline-flex h-5.5 items-center rounded-full bg-green-tint px-2 text-[11.5px] font-medium text-green\"\u003e\n          Completed\n        \u003c/span\u003e\n      ),\n      details: [\n        { label: \"Matched tax and contact IDs\", meta: \"12/12\" },\n        { label: \"Flagged stale records\", meta: \"0\" },\n      ],\n    },\n    {\n      key: \"index\",\n      badge: \u003cSpinnerRing active\u003e2\u003c/SpinnerRing\u003e,\n      label: \"Build reorder task list\",\n      amount: \"7 SKUs\",\n      pill: null,\n      details: [\n        { label: \"Reading POS export\", meta: \"3 files\" },\n        { label: \"Scoring stockout risk\", meta: \"68%\" },\n      ],\n    },\n    {\n      key: \"draft\",\n      badge:\n        row2 === \"pending\" ? (\n          \u003cSpinnerRing\u003e3\u003c/SpinnerRing\u003e\n        ) : row2 === \"failed\" ? (\n          \u003cBadge tone=\"red\"\u003e{XIcon}\u003c/Badge\u003e\n        ) : (\n          \u003cBadge tone=\"green\"\u003e{CheckIcon}\u003c/Badge\u003e\n        ),\n      label: \"Draft supplier emails\",\n      amount: \"2 messages\",\n      pill:\n        row2 === \"failed\" ? (\n          \u003cspan className=\"inline-flex h-5.5 items-center gap-1.5 rounded-full bg-red-tint px-2 text-[11.5px] font-medium text-red\" style={{ animation: \"fade-in 200ms ease-out both\" }}\u003e\n            Failed \u003cspan style={{ animation: \"spin 1.2s linear infinite\" }} className=\"flex\"\u003e{RetryIcon}\u003c/span\u003e\n          \u003c/span\u003e\n        ) : row2 === \"done\" ? (\n          \u003cspan className=\"inline-flex h-5.5 items-center gap-1.5 rounded-full bg-green-tint px-2 text-[11.5px] font-medium text-green\" style={{ animation: \"fade-in 200ms ease-out both\" }}\u003e\n            Completed\n          \u003c/span\u003e\n        ) : null,\n      details: [\n        { label: \"Cone supplier follow-up\", meta: \"draft\" },\n        { label: \"Pistachio reorder note\", meta: \"draft\" },\n      ],\n    },\n  ];\n\n  const list = variant === \"List\";\n  return (\n    \u003cdiv\n      className={`flex w-full max-w-110 flex-col ${\n        list ? \"gap-0 self-start overflow-hidden rounded-card bg-surface shadow-card\" : \"min-h-[196px] gap-2\"\n      }`}\n    \u003e\n      {rows.map((row, i) =\u003e {\n        const open = manualOpen[row.key] ?? (row.key === \"index\" \u0026\u0026 tick === 2);\n        return (\n          \u003cdiv\n            key={row.key}\n            className={`self-stretch overflow-hidden transition-[border-radius] duration-300 ${\n              list ? \"border-b border-line last:border-0\" : \"bg-surface shadow-card\"\n            }`}\n            style={{\n              borderRadius: list ? 0 : open ? 14 : 22,\n              animation: `fade-up 450ms cubic-bezier(0.23,1,0.32,1) ${i * 80}ms both`,\n            }}\n          \u003e\n            \u003cbutton\n              type=\"button\"\n              aria-expanded={open}\n              onClick={() =\u003e setManualOpen((current) =\u003e ({ ...current, [row.key]: !open }))}\n              className=\"flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset\"\n            \u003e\n              \u003cspan className=\"flex size-6 shrink-0 items-center justify-center\"\u003e\n                {row.badge}\n              \u003c/span\u003e\n              \u003cspan className=\"min-w-0 flex-1 truncate text-[13px] font-medium text-ink\"\u003e\n                {row.label}\n              \u003c/span\u003e\n              \u003cspan className=\"text-[12.5px] text-ink-2 tabular-nums\"\u003e{row.amount}\u003c/span\u003e\n              {row.pill}\n              \u003cspan\n                aria-hidden=\"true\"\n                className=\"-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3\"\n              \u003e\n                \u003csvg\n                  width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n                  className=\"transition-transform duration-300\"\n                  style={{ transform: open ? \"rotate(180deg)\" : \"rotate(0)\" }}\n                \u003e\n                  \u003cpath d=\"M6 9l6 6 6-6\" /\u003e\n                \u003c/svg\u003e\n              \u003c/span\u003e\n            \u003c/button\u003e\n\n            {/* dropdown detail — same expandable grammar as Chain of Thought */}\n            \u003cdiv\n              className=\"grid transition-[grid-template-rows,opacity] duration-300\"\n                style={{\n                  gridTemplateRows: open ? \"1fr\" : \"0fr\",\n                  opacity: open ? 1 : 0,\n                  transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n                }}\n              \u003e\n                \u003cdiv className=\"overflow-hidden\"\u003e\n                  \u003cdiv className=\"mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5\"\u003e\n                    \u003cspan aria-hidden className=\"mx-auto h-full w-px bg-line\" /\u003e\n                    \u003cdiv className=\"flex flex-col gap-1.5\"\u003e\n                      {row.details.map((d, j) =\u003e (\n                        \u003cdiv\n                          key={d.label}\n                          className=\"flex items-center justify-between\"\n                          style={\n                            open\n                              ? { animation: `fade-up 300ms cubic-bezier(0.23,1,0.32,1) ${120 + j * 100}ms both` }\n                              : undefined\n                          }\n                        \u003e\n                          \u003cspan className=\"text-[12px] text-ink-2\"\u003e{d.label}\u003c/span\u003e\n                          \u003cspan className=\"font-mono text-[11.5px] text-ink-3 tabular-nums\"\u003e\n                            {d.meta}\n                          \u003c/span\u003e\n                        \u003c/div\u003e\n                      ))}\n                    \u003c/div\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n          \u003c/div\u003e\n        );\n      })}\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"13:T1cab,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * CHAT — interactive panel with tabs, replies, and composer.\n * The reply sequence begins only after the user sends.\n * ───────────────────────────────────────────────────────── */\n\ntype Phase = \"idle\" | \"sent\" | \"reply1\" | \"reply2\" | \"done\";\n\nfunction Section({\n  label,\n  sub,\n  time,\n  body,\n  resolving,\n}: {\n  label: string;\n  sub: string;\n  time: string;\n  body: string;\n  resolving?: boolean;\n}) {\n  return (\n    \u003cdiv\n      className=\"flex w-full flex-col gap-1.5 transition-[opacity,filter,transform] duration-400\"\n      style={{\n        opacity: resolving ? 0.55 : 1,\n        filter: resolving ? \"blur(0.5px)\" : \"blur(0)\",\n        transform: resolving ? \"scale(0.985)\" : \"scale(1)\",\n        transformOrigin: \"top left\",\n        transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n        animation: \"fade-up 400ms cubic-bezier(0.23,1,0.32,1) both\",\n      }}\n    \u003e\n      \u003cdiv className=\"flex items-center gap-1 text-[12px] leading-[1.3]\"\u003e\n        \u003cspan className=\"font-medium text-ink\"\u003e{label}\u003c/span\u003e\n        \u003cspan className=\"text-ink-2\"\u003e{sub}\u003c/span\u003e\n        \u003cspan className=\"text-ink\"\u003efor {time}\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cp className=\"text-[13px] leading-normal text-ink\"\u003e{body}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default function ChatComposer() {\n  const [phase, setPhase] = useState\u003cPhase\u003e(\"done\");\n  const [draft, setDraft] = useState(\"\");\n  const [submitted, setSubmitted] = useState(\"Compare mint chip to last summer\");\n  const [tab, setTab] = useState(\"Flavors\");\n  const inputRef = useRef\u003cHTMLInputElement\u003e(null);\n\n  useEffect(() =\u003e {\n    let t: ReturnType\u003ctypeof setTimeout\u003e;\n    if (phase === \"sent\") t = setTimeout(() =\u003e setPhase(\"reply1\"), 500);\n    else if (phase === \"reply1\") t = setTimeout(() =\u003e setPhase(\"reply2\"), 1400);\n    else if (phase === \"reply2\") t = setTimeout(() =\u003e setPhase(\"done\"), 1200);\n    else return;\n    return () =\u003e clearTimeout(t);\n  }, [phase]);\n\n  const sent = phase !== \"idle\";\n  const canSend = draft.trim().length \u003e 0;\n\n  const send = () =\u003e {\n    if (!canSend) return;\n    setSubmitted(draft.trim());\n    setDraft(\"\");\n    setPhase(\"sent\");\n  };\n\n  return (\n    \u003cdiv className=\"flex h-[288px] w-full max-w-95 flex-col self-start overflow-hidden rounded-[14px] bg-surface shadow-card\"\u003e\n      {/* header — tabs + actions */}\n      \u003cdiv className=\"flex shrink-0 items-center justify-between border-b border-line p-1.5\"\u003e\n        \u003cdiv className=\"flex items-center\"\u003e\n          {[\"Flavors\", \"Suppliers\"].map((item) =\u003e (\n            \u003cbutton\n              key={item}\n              type=\"button\"\n              aria-pressed={tab === item}\n              onClick={() =\u003e setTab(item)}\n              className={`rounded-[6px] px-2 py-[3px] text-[13px] text-ink transition-[background-color,opacity] duration-100 ${tab === item ? \"bg-field\" : \"opacity-50 hover:opacity-75\"}`}\n            \u003e\n              {item}\n            \u003c/button\u003e\n          ))}\n        \u003c/div\u003e\n        \u003cdiv className=\"flex items-center gap-1\"\u003e\n          {[\n            \u003cpath key=\"p\" d=\"M12 5v14M5 12h14\" /\u003e,\n            \u003cg key=\"h\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"9\" /\u003e\u003cpath d=\"M12 7v5l3 2\" /\u003e\u003c/g\u003e,\n            \u003cg key=\"e\" fill=\"currentColor\" stroke=\"none\"\u003e\u003ccircle cx=\"5\" cy=\"12\" r=\"1.8\" /\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"1.8\" /\u003e\u003ccircle cx=\"19\" cy=\"12\" r=\"1.8\" /\u003e\u003c/g\u003e,\n          ].map((icon, i) =\u003e (\n            \u003cbutton\n              key={i}\n              type=\"button\"\n              aria-label=\"Action\"\n              className=\"flex size-6 items-center justify-center rounded-[6px] text-ink-3\n                transition-colors duration-100 hover:bg-hover hover:text-ink-2\"\n            \u003e\n              \u003csvg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n                {icon}\n              \u003c/svg\u003e\n            \u003c/button\u003e\n          ))}\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      {/* conversation — fixed region so the card never changes shape */}\n      \u003cdiv className=\"flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto px-3 pt-2.5 pb-1\"\u003e\n        {/* user bubble — right aligned, soft block */}\n        \u003cdiv className=\"flex justify-end pl-14\"\u003e\n          \u003cdiv\n            className=\"rounded-xl bg-field px-3 py-1.5 text-[13px] leading-[1.4] text-ink\n              transition-[opacity,transform] duration-300\"\n            style={{\n              opacity: sent ? 1 : 0,\n              transform: sent ? \"translateY(0)\" : \"translateY(10px)\",\n              transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n            }}\n          \u003e\n            {submitted}\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        {phase === \"reply1\" || phase === \"reply2\" || phase === \"done\" ? (\n          \u003cSection\n            label=\"Sales History\"\n            sub=\"Flavor Data\"\n            time=\"4s\"\n            body=\"Pulled 3 summers of mint chip sales for comparison.\"\n          /\u003e\n        ) : null}\n        {phase === \"reply2\" || phase === \"done\" ? (\n          \u003cSection\n            label=\"Comparison\"\n            sub=\"Trend Detection\"\n            time=\"2s\"\n            body=\"Mint chip is up 12% with stronger weekend peaks.\"\n            resolving={phase === \"reply2\"}\n          /\u003e\n        ) : null}\n      \u003c/div\u003e\n\n      {/* composer */}\n      \u003cdiv className=\"mt-auto shrink-0 p-1.5\"\u003e\n        \u003cdiv\n          role=\"presentation\"\n          onClick={() =\u003e inputRef.current?.focus()}\n          className=\"flex cursor-text flex-col gap-2 rounded-control border border-line bg-field p-2.5 shadow-[0_1px_2px_rgba(0,0,0,0.035)] transition-[border-color,box-shadow] duration-150 focus-within:border-line-strong focus-within:shadow-[0_1px_2px_rgba(0,0,0,0.025)]\"\n        \u003e\n          \u003cinput\n            ref={inputRef}\n            value={draft}\n            onChange={(event) =\u003e setDraft(event.target.value)}\n            onKeyDown={(event) =\u003e {\n              if (event.key === \"Enter\") send();\n            }}\n            placeholder=\"Prompt or tag a flavor with @\"\n            aria-label=\"Chat prompt\"\n            className=\"min-h-4.5 bg-transparent text-[13px] leading-[1.4] text-ink outline-none placeholder:text-ink-3\"\n          /\u003e\n          \u003cdiv className=\"flex items-center justify-end\"\u003e\n            \u003cbutton\n              type=\"button\"\n              aria-label=\"Send\"\n              disabled={!canSend}\n              onClick={send}\n              className=\"flex size-7 items-center justify-center rounded-[8px]\n                transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.96]\"\n              style={{\n                background: canSend ? \"var(--ink)\" : \"var(--line-strong)\",\n                color: canSend ? \"var(--surface)\" : \"var(--ink-2)\",\n              }}\n            \u003e\n              \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n                \u003cpath d=\"M12 19V5M5 12l7-7 7 7\" /\u003e\n              \u003c/svg\u003e\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"14:T71df,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { createShader, playSweep, accentChain, ACCENTS } from \"glimm\";\n\n/* The built-in \"prism\" palette is only cyan→indigo→magenta, so a sweep\n * reads as blue/purple. Build a true full-spectrum rainbow instead. */\nconst RAINBOW = accentChain([\n  ACCENTS.red,\n  ACCENTS.orange,\n  ACCENTS.yellow,\n  ACCENTS.green,\n  ACCENTS.cyan,\n  ACCENTS.blue,\n  ACCENTS.purple,\n]);\n\n/* ─────────────────────────────────────────────────────────\n * PROMPT BAR\n * A composer with real controls: attach, @ data sources,\n * / commands, a model picker, dictation, and send.\n * Type @ or / to open the menus; ↑↓ + Enter to pick.\n * Variants: Rounded (card radius) · Pill (full radius).\n * ───────────────────────────────────────────────────────── */\n\nfunction Icon({ children, size = 15, strokeWidth = 1.8 }: { children: React.ReactNode; size?: number; strokeWidth?: number }) {\n  return (\n    \u003csvg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={strokeWidth} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"\u003e\n      {children}\n    \u003c/svg\u003e\n  );\n}\n\nconst GLYPHS: Record\u003cstring, React.ReactNode\u003e = {\n  clip: \u003cpath d=\"m21.4 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\" /\u003e,\n  chart: \u003cpath d=\"M4 20V10M10 20V4M16 20v-7M22 20H2\" /\u003e,\n  layers: \u003cg\u003e\u003cpath d=\"M12 2 2 7l10 5 10-5-10-5z\" /\u003e\u003cpath d=\"M2 17l10 5 10-5M2 12l10 5 10-5\" /\u003e\u003c/g\u003e,\n  globe: \u003cg\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\" /\u003e\u003cpath d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\" /\u003e\u003c/g\u003e,\n};\n\n/* real product marks, inline so the file stays self-contained */\nconst BRANDS: Record\u003cstring, React.ReactNode\u003e = {\n  figma: (\n    \u003csvg width=\"11\" height=\"16\" viewBox=\"0 0 38 57\" aria-hidden=\"true\"\u003e\n      \u003cpath d=\"M9.5 57A9.5 9.5 0 0 0 19 47.5V38H9.5a9.5 9.5 0 0 0 0 19z\" fill=\"#0ACF83\" /\u003e\n      \u003cpath d=\"M0 28.5A9.5 9.5 0 0 1 9.5 19H19v19H9.5A9.5 9.5 0 0 1 0 28.5z\" fill=\"#A259FF\" /\u003e\n      \u003cpath d=\"M0 9.5A9.5 9.5 0 0 1 9.5 0H19v19H9.5A9.5 9.5 0 0 1 0 9.5z\" fill=\"#F24E1E\" /\u003e\n      \u003cpath d=\"M19 0h9.5a9.5 9.5 0 1 1 0 19H19V0z\" fill=\"#FF7262\" /\u003e\n      \u003cpath d=\"M38 28.5a9.5 9.5 0 1 1-19 0 9.5 9.5 0 0 1 19 0z\" fill=\"#1ABCFE\" /\u003e\n    \u003c/svg\u003e\n  ),\n  slack: (\n    \u003csvg width=\"15\" height=\"15\" viewBox=\"0 0 127 127\" aria-hidden=\"true\"\u003e\n      \u003cpath d=\"M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z\" fill=\"#E01E5A\" /\u003e\n      \u003cpath d=\"M47 27.2c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.7 39.7.8 47 .8c7.3 0 13.2 5.9 13.2 13.2v13.2H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.3.7 54.4.7 47.1c0-7.3 5.9-13.2 13.2-13.2H47z\" fill=\"#36C5F0\" /\u003e\n      \u003cpath d=\"M99.9 47.1c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V47.1zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.9C66.9 6.6 72.8.7 80.1.7c7.3 0 13.2 5.9 13.2 13.2v33.2z\" fill=\"#2EB67D\" /\u003e\n      \u003cpath d=\"M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z\" fill=\"#ECB22E\" /\u003e\n    \u003c/svg\u003e\n  ),\n  gmail: (\n    \u003csvg width=\"15\" height=\"12\" viewBox=\"0 0 256 193\" aria-hidden=\"true\"\u003e\n      \u003cpath d=\"M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455h40.727Z\" fill=\"#4285F4\" /\u003e\n      \u003cpath d=\"M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798v98.91Z\" fill=\"#34A853\" /\u003e\n      \u003cpath d=\"m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.669 34.992-4.669 40.644L128 145.504 58.182 93.14Z\" fill=\"#EA4335\" /\u003e\n      \u003cpath d=\"M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945l-16.292 12.218Z\" fill=\"#FBBC04\" /\u003e\n      \u003cpath d=\"m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23v23.273Z\" fill=\"#C5221F\" /\u003e\n    \u003c/svg\u003e\n  ),\n};\n\ntype Source = {\n  key: string;\n  name: string;\n  desc: string;\n  glyph?: string;\n  brand?: string;\n  attach?: boolean;\n  connect?: boolean;\n};\n\nconst SOURCES: Source[] = [\n  { key: \"attach\", name: \"Add photos \u0026 files\", desc: \"Upload from your computer\", glyph: \"clip\", attach: true },\n  { key: \"scoop\", name: \"Scoop Data\", desc: \"Sales \u0026 churn metrics\", glyph: \"chart\" },\n  { key: \"flavors\", name: \"Flavor records\", desc: \"26 makers, tags, links\", glyph: \"layers\" },\n  { key: \"web\", name: \"Web search\", desc: \"Real-time news and info\", glyph: \"globe\" },\n  { key: \"figma\", name: \"Figma\", desc: \"Design-to-code workflows\", brand: \"figma\" },\n  { key: \"slack\", name: \"Slack\", desc: \"Read and manage Slack\", brand: \"slack\" },\n  { key: \"gmail\", name: \"Gmail\", desc: \"Read and manage Gmail\", brand: \"gmail\", connect: true },\n];\n\nconst COMMANDS = [\n  { key: \"compare\", name: \"/compare\", desc: \"Flavor vs. last summer\" },\n  { key: \"churn-plan\", name: \"/churn-plan\", desc: \"Draft a churn schedule\" },\n  { key: \"restock\", name: \"/restock\", desc: \"Build a reorder list\" },\n  { key: \"draft-email\", name: \"/draft-email\", desc: \"Write a supplier email\" },\n  { key: \"summarize\", name: \"/summarize\", desc: \"Digest the thread so far\" },\n];\n\nconst MODELS = [\n  { key: \"sprinkles-5\", name: \"Sprinkles 5\", tag: \"Flagship\" },\n  { key: \"vanilla-1\", name: \"Vanilla 1\", tag: \"Basic\" },\n  { key: \"freezer-burn\", name: \"Freezer Burn 0.4\", tag: \"Stale\" },\n];\n\nconst FILES = [\"flavor-chart.png\", \"summer-menu.pdf\", \"pos-export.csv\"];\nconst DICTATION = \"Compare pistachio weekends to last summer\";\n\n/* self-running demo: walk the @ menu, then the / menu, and repeat.\n * Any pointer or key interaction hands control to the user. */\nconst AUTO_STEPS: {\n  draft: string;\n  active?: number;\n  connect?: boolean;\n  modelOpen?: boolean;\n  model?: string;\n  hold: number;\n}[] = [\n  { draft: \"\", connect: false, model: \"vanilla-1\", hold: 1100 },\n  { draft: \"@\", active: 0, hold: 900 },\n  { draft: \"@\", active: 1, hold: 620 },\n  { draft: \"@\", active: 4, hold: 620 },\n  { draft: \"@\", active: 6, hold: 700 },\n  { draft: \"@\", active: 6, connect: true, hold: 1000 },\n  { draft: \"\", hold: 700 },\n  { draft: \"/\", active: 0, hold: 900 },\n  { draft: \"/\", active: 1, hold: 620 },\n  { draft: \"/\", active: 3, hold: 1000 },\n  { draft: \"\", hold: 800 },\n  // open the model picker and upgrade to the flagship → rainbow sweep\n  { draft: \"\", modelOpen: true, hold: 1200 },\n  { draft: \"\", model: \"sprinkles-5\", hold: 2400 },\n  { draft: \"\", hold: 900 },\n];\n\n/* the last @word or /word being typed, if any */\nfunction parseToken(draft: string): { kind: \"at\" | \"slash\"; query: string; start: number } | null {\n  const match = /(^|\\s)([@/])([\\w-]*)$/.exec(draft);\n  if (!match) return null;\n  return {\n    kind: match[2] === \"@\" ? \"at\" : \"slash\",\n    query: match[3].toLowerCase(),\n    start: match.index + match[1].length,\n  };\n}\n\nexport default function PromptBar({ variant = \"Rounded\" }: { variant?: string }) {\n  const pill = variant === \"Pill\";\n  const [draft, setDraft] = useState(\"\");\n  const [dismissed, setDismissed] = useState(false);\n  const [plusOpen, setPlusOpen] = useState(false);\n  const [modelOpen, setModelOpen] = useState(false);\n  const [model, setModel] = useState(MODELS[1]);\n  const [attachments, setAttachments] = useState\u003cstring[]\u003e([]);\n  const [connected, setConnected] = useState(false);\n  const [active, setActive] = useState(0);\n  const [listening, setListening] = useState(false);\n  const [auto, setAuto] = useState(true);\n  const [autoStep, setAutoStep] = useState(0);\n  const [expanded, setExpanded] = useState(false);\n  const [rowBox, setRowBox] = useState\u003c{ top: number; height: number } | null\u003e(null);\n  const [engaged, setEngaged] = useState(false);\n  const [modelBox, setModelBox] = useState\u003c{ top: number; height: number } | null\u003e(null);\n  const [modelHovered, setModelHovered] = useState\u003cnumber | null\u003e(null);\n  const controlsRef = useRef\u003cHTMLDivElement\u003e(null);\n  const inputRef = useRef\u003cHTMLTextAreaElement\u003e(null);\n  const measureRef = useRef\u003cHTMLSpanElement\u003e(null);\n  const modelRef = useRef\u003cHTMLButtonElement\u003e(null);\n  const rowRefs = useRef\u003c(HTMLButtonElement | null)[]\u003e([]);\n  const modelRowRefs = useRef\u003c(HTMLButtonElement | null)[]\u003e([]);\n  const glimmRef = useRef\u003cHTMLCanvasElement\u003e(null);\n  const shaderRef = useRef\u003cReturnType\u003ctypeof createShader\u003e | null\u003e(null);\n  const sweepingRef = useRef(false);\n\n  /* hand control to the user: stop the demo loop, and when they aim at\n   * the input itself, clear the demo's leftover draft for a clean start */\n  const takeOver = (event: { target: EventTarget | null }) =\u003e {\n    setAuto(false);\n    if (auto \u0026\u0026 event.target === inputRef.current) setDraft(\"\");\n  };\n\n  const token = dismissed ? null : parseToken(draft);\n  const menu: \"at\" | \"slash\" | null = plusOpen ? \"at\" : token?.kind ?? null;\n  const query = plusOpen ? \"\" : token?.query ?? \"\";\n\n  const rows: { key: string; name: string; desc: string }[] =\n    menu === \"at\"\n      ? SOURCES.filter((s) =\u003e s.name.toLowerCase().includes(query))\n      : menu === \"slash\"\n        ? COMMANDS.filter((c) =\u003e c.name.slice(1).startsWith(query))\n        : [];\n\n  useEffect(() =\u003e {\n    setActive(0);\n    setEngaged(false);\n  }, [menu, query]);\n\n  /* a single highlight glides to the active row instead of each row\n   * toggling its own background — matches the gliding pill in the nav */\n  useLayoutEffect(() =\u003e {\n    const target = rowRefs.current[active];\n    if (target) setRowBox({ top: target.offsetTop, height: target.offsetHeight });\n  }, [menu, query, active, connected, rows.length]);\n\n  /* same gliding highlight in the model menu — floats to the hovered\n   * row, falling back to the currently-selected model */\n  const modelIndex = MODELS.findIndex((m) =\u003e m.key === model.key);\n  useLayoutEffect(() =\u003e {\n    if (!modelOpen) return;\n    const target = modelRowRefs.current[modelHovered ?? modelIndex];\n    if (target) setModelBox({ top: target.offsetTop, height: target.offsetHeight });\n  }, [modelOpen, modelHovered, modelIndex]);\n\n  useEffect(() =\u003e {\n    if (!modelOpen) setModelHovered(null);\n  }, [modelOpen]);\n\n  /* Build the shader with a pinned hue phase. createShader seeds its\n   * internal hueShift from Math.random(), which made the sweep a different\n   * colour on every reload — pin it so the rainbow is identical each time. */\n  const makeShader = () =\u003e {\n    const canvas = glimmRef.current;\n    if (!canvas) return null;\n    const random = Math.random;\n    Math.random = () =\u003e 0;\n    try {\n      return createShader({\n        canvas,\n        palette: RAINBOW,\n        direction: \"ltr\",\n        bandTight: 10,\n        swellAmount: 0.85,\n      });\n    } finally {\n      Math.random = random;\n    }\n  };\n\n  /* Glimm shader lives inside the composer, invisible at rest. Selecting\n   * the flagship model fires a one-shot rainbow sweep across the interior. */\n  useEffect(() =\u003e {\n    shaderRef.current = makeShader();\n    return () =\u003e {\n      shaderRef.current?.destroy();\n      shaderRef.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const celebrate = () =\u003e {\n    if (sweepingRef.current) return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    // Recreate the shader per sweep so uTime restarts at 0 — the hue phase\n    // (which drifts with time) is then identical on every trigger.\n    shaderRef.current?.destroy();\n    const shader = makeShader();\n    shaderRef.current = shader;\n    if (!shader) return;\n    sweepingRef.current = true;\n    const sweep = playSweep(shader, {\n      palette: RAINBOW,\n      direction: \"ltr\",\n      sweepMs: 950,\n      outroMs: 130,\n      peakAlpha: 1.3,\n      bandTight: 10,\n      brightness: 1.4,\n      swellAmount: 1,\n      waveSpeed: 1.3,\n      easing: \"easeOutExpo\",\n    });\n    sweep.done.finally(() =\u003e {\n      sweepingRef.current = false;\n    });\n  };\n\n  const selectModel = (next: (typeof MODELS)[number]) =\u003e {\n    setModel(next);\n    setModelOpen(false);\n    if (next.key === \"sprinkles-5\") celebrate();\n  };\n\n  /* autoplay: apply the current step, then advance after its hold */\n  useEffect(() =\u003e {\n    if (!auto) return;\n    const step = AUTO_STEPS[autoStep % AUTO_STEPS.length];\n    setDraft(step.draft);\n    if (step.active !== undefined) setActive(step.active);\n    if (step.connect !== undefined) setConnected(step.connect);\n    if (step.modelOpen !== undefined) setModelOpen(step.modelOpen);\n    if (step.model) {\n      const next = MODELS.find((m) =\u003e m.key === step.model);\n      if (next) selectModel(next);\n    }\n    const t = setTimeout(() =\u003e setAutoStep((s) =\u003e s + 1), step.hold);\n    return () =\u003e clearTimeout(t);\n  }, [auto, autoStep]);\n\n  /* dictation resolves after a beat, like a real transcript landing */\n  useEffect(() =\u003e {\n    if (!listening) return;\n    const t = setTimeout(() =\u003e {\n      setDraft((current) =\u003e (current ? `${current.trimEnd()} ${DICTATION}` : DICTATION));\n      setListening(false);\n      inputRef.current?.focus();\n    }, 2200);\n    return () =\u003e clearTimeout(t);\n  }, [listening]);\n\n  /* Move wrapped text above the controls, then grow to a compact maximum. */\n  useLayoutEffect(() =\u003e {\n    const input = inputRef.current;\n    const controls = controlsRef.current;\n    const measure = measureRef.current;\n    const modelButton = modelRef.current;\n    if (!input || !controls || !measure || !modelButton) return;\n\n    const fixedControlsWidth = 28 * 3 + modelButton.offsetWidth;\n    const inlineGaps = 4 * 4;\n    const inlineInputWidth = controls.clientWidth - fixedControlsWidth - inlineGaps;\n    const needsFullWidth = draft.includes(\"\\n\") || measure.offsetWidth + 8 \u003e inlineInputWidth;\n    if (needsFullWidth !== expanded) {\n      setExpanded(needsFullWidth);\n    }\n\n    const minHeight = 28;\n    const maxHeight = 100;\n    input.style.height = \"0px\";\n    const contentHeight = input.scrollHeight;\n    input.style.height = `${Math.min(Math.max(contentHeight, minHeight), maxHeight)}px`;\n    input.style.overflowY = contentHeight \u003e maxHeight ? \"auto\" : \"hidden\";\n  }, [draft, expanded]);\n\n  const closeMenus = () =\u003e {\n    setPlusOpen(false);\n    setModelOpen(false);\n  };\n\n  const pick = (row: { key: string; name: string }) =\u003e {\n    const source = SOURCES.find((s) =\u003e s.key === row.key);\n    if (source?.attach) {\n      setAttachments((current) =\u003e [...current, FILES[current.length % FILES.length]]);\n      if (token) setDraft(draft.slice(0, token.start));\n    } else if (menu === \"at\") {\n      setDraft(`${token ? draft.slice(0, token.start) : draft}@${row.name} `);\n    } else {\n      setDraft(`${token ? draft.slice(0, token.start) : draft}${row.name} `);\n    }\n    setPlusOpen(false);\n    setDismissed(false);\n    inputRef.current?.focus();\n  };\n\n  const canSend = draft.trim().length \u003e 0 || attachments.length \u003e 0;\n  const send = () =\u003e {\n    if (!canSend) return;\n    setDraft(\"\");\n    setAttachments([]);\n    closeMenus();\n  };\n\n  return (\n    \u003cdiv\n      className=\"flex min-h-[384px] w-full max-w-105 flex-col justify-end pb-8\"\n      onPointerDownCapture={takeOver}\n      onKeyDownCapture={takeOver}\n    \u003e\n      {/* composer is the anchor — menus grow up from its top edge */}\n      \u003cdiv className=\"relative\"\u003e\n      {/* ── @ / slash menu ─────────────────────────────── */}\n      {menu \u0026\u0026 (\n        \u003cdiv\n          onMouseLeave={() =\u003e setEngaged(false)}\n          className=\"absolute inset-x-0 bottom-full z-10 mb-2 rounded-[10px] bg-surface p-1 shadow-raised\"\n          style={{ animation: \"pop-in 180ms cubic-bezier(0.23,1,0.32,1) both\", transformOrigin: \"bottom center\" }}\n        \u003e\n          {/* single gliding highlight — appears once a row is hovered */}\n          \u003cspan\n            aria-hidden\n            className=\"pointer-events-none absolute inset-x-1 rounded-[6px] bg-hover\"\n            style={{\n              top: rowBox?.top ?? 0,\n              height: rowBox?.height ?? 0,\n              opacity: rowBox \u0026\u0026 engaged \u0026\u0026 rows.length \u003e 0 ? 1 : 0,\n              transition:\n                \"top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease\",\n            }}\n          /\u003e\n          {rows.map((row, i) =\u003e {\n            const source = menu === \"at\" ? SOURCES.find((s) =\u003e s.key === row.key) : undefined;\n            return (\n              \u003cbutton\n                key={row.key}\n                type=\"button\"\n                ref={(el) =\u003e {\n                  rowRefs.current[i] = el;\n                }}\n                onMouseDown={(event) =\u003e event.preventDefault()}\n                onMouseEnter={() =\u003e {\n                  setActive(i);\n                  setEngaged(true);\n                }}\n                onClick={() =\u003e pick(row)}\n                className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[6px] px-2 text-left\"\n              \u003e\n                {source \u0026\u0026 (\n                  \u003cspan className=\"flex size-5.5 shrink-0 items-center justify-center text-ink-2\"\u003e\n                    {source.brand ? BRANDS[source.brand] : \u003cIcon size={15}\u003e{GLYPHS[source.glyph ?? \"clip\"]}\u003c/Icon\u003e}\n                  \u003c/span\u003e\n                )}\n                \u003cspan className=\"shrink-0 text-[12.5px] font-medium text-ink\"\u003e\n                  {row.name}\n                \u003c/span\u003e\n                \u003cspan className=\"min-w-0 flex-1 truncate text-[12px] text-ink-3\"\u003e{row.desc}\u003c/span\u003e\n                {source?.connect \u0026\u0026 (\n                  \u003cspan\n                    role=\"button\"\n                    tabIndex={-1}\n                    onClick={(event) =\u003e {\n                      event.stopPropagation();\n                      setConnected((current) =\u003e !current);\n                    }}\n                    className={`shrink-0 text-[12px] font-medium transition-colors duration-100 ${\n                      connected ? \"text-green\" : \"text-accent-ink hover:underline\"\n                    }`}\n                  \u003e\n                    {connected ? \"Connected\" : \"Connect\"}\n                  \u003c/span\u003e\n                )}\n              \u003c/button\u003e\n            );\n          })}\n          {rows.length === 0 \u0026\u0026 (\n            \u003cdiv className=\"flex h-9 items-center px-2 text-[12px] text-ink-3\"\u003e\n              No matches for “{query}”\n            \u003c/div\u003e\n          )}\n          \u003cdiv className=\"mt-1 border-t border-line px-2 pt-1.5 pb-1 text-[11px] text-ink-3\"\u003e\n            {menu === \"at\" ? \"Type to search sources \u0026 files\" : \"Type to search commands\"}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      )}\n\n      {/* ── model menu ─────────────────────────────────── */}\n      {modelOpen \u0026\u0026 (\n        \u003cdiv\n          onMouseLeave={() =\u003e setModelHovered(null)}\n          className=\"absolute right-0 bottom-full z-10 mb-2 w-44 rounded-[10px] bg-surface p-1 shadow-raised\"\n          style={{ animation: \"pop-in 180ms cubic-bezier(0.23,1,0.32,1) both\", transformOrigin: \"bottom right\" }}\n        \u003e\n          {/* single gliding highlight — floats to the hovered / selected row */}\n          \u003cspan\n            aria-hidden\n            className=\"pointer-events-none absolute inset-x-1 rounded-[6px] bg-hover\"\n            style={{\n              top: modelBox?.top ?? 0,\n              height: modelBox?.height ?? 0,\n              opacity: modelBox \u0026\u0026 modelHovered !== null ? 1 : 0,\n              transition:\n                \"top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease\",\n            }}\n          /\u003e\n          {MODELS.map((m, i) =\u003e (\n            \u003cbutton\n              key={m.key}\n              type=\"button\"\n              ref={(el) =\u003e {\n                modelRowRefs.current[i] = el;\n              }}\n              onMouseDown={(event) =\u003e event.preventDefault()}\n              onMouseEnter={() =\u003e setModelHovered(i)}\n              onClick={() =\u003e {\n                selectModel(m);\n                inputRef.current?.focus();\n              }}\n              className=\"relative z-10 flex h-7.5 w-full items-center gap-2 rounded-[6px] px-2 text-left\"\n            \u003e\n              \u003cspan className=\"min-w-0 flex-1 truncate text-[12.5px] font-medium text-ink\"\u003e{m.name}\u003c/span\u003e\n              \u003cspan className=\"shrink-0 text-[11px] text-ink-3\"\u003e{m.tag}\u003c/span\u003e\n              \u003cspan className={`shrink-0 text-ink ${m.key === model.key ? \"\" : \"invisible\"}`}\u003e\n                \u003cIcon size={13} strokeWidth={2.5}\u003e\u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\u003c/Icon\u003e\n              \u003c/span\u003e\n            \u003c/button\u003e\n          ))}\n        \u003c/div\u003e\n      )}\n\n      {/* ── composer ───────────────────────────────────── */}\n      \u003cdiv\n        className={`relative isolate flex flex-col gap-1.5 overflow-hidden border border-line bg-surface p-1.5 shadow-card transition-[border-color,border-radius] duration-150 focus-within:border-line-strong ${\n          pill ? (attachments.length \u003e 0 || expanded ? \"rounded-[24px]\" : \"rounded-full\") : \"rounded-[14px]\"\n        }`}\n      \u003e\n        {/* rainbow glimm sweep — plays across the interior on model change.\n            explicit w/h: a \u003ccanvas\u003e is a replaced element and won't stretch\n            to inset-0 alone, which feeds back into the shader's ResizeObserver. */}\n        \u003ccanvas\n          ref={glimmRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 -z-10 h-full w-full\"\n          style={{ borderRadius: \"inherit\" }}\n        /\u003e\n        \u003cspan\n          ref={measureRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute invisible whitespace-pre text-[13px] leading-[18px]\"\n        \u003e\n          {draft}\n        \u003c/span\u003e\n\n        {attachments.length \u003e 0 \u0026\u0026 (\n          \u003cdiv className={`flex flex-wrap gap-1.5 pt-0.5 ${pill ? \"px-1\" : \"px-0.5\"}`}\u003e\n            {attachments.map((file, i) =\u003e (\n              \u003cspan\n                key={`${file}-${i}`}\n                className={`flex h-6.5 items-center gap-1.5 bg-field py-1 pr-1 pl-1.5 text-[11.5px] text-ink-2 shadow-hairline ${\n                  pill ? \"rounded-full\" : \"rounded-chip\"\n                }`}\n                style={{ animation: \"pop-in 200ms cubic-bezier(0.23,1,0.32,1) both\" }}\n              \u003e\n                \u003cIcon size={12}\u003e\u003cg\u003e\u003cpath d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" /\u003e\u003cpath d=\"M14 2v6h6\" /\u003e\u003c/g\u003e\u003c/Icon\u003e\n                \u003cspan className=\"max-w-36 truncate\"\u003e{file}\u003c/span\u003e\n                \u003cbutton\n                  type=\"button\"\n                  aria-label={`Remove ${file}`}\n                  onClick={() =\u003e setAttachments((current) =\u003e current.filter((_, j) =\u003e j !== i))}\n                  className={`flex size-4 items-center justify-center text-ink-3 transition-colors duration-100 hover:bg-line/70 hover:text-ink ${\n                    pill ? \"rounded-full\" : \"rounded-[4px]\"\n                  }`}\n                \u003e\n                  \u003cIcon size={10} strokeWidth={2.5}\u003e\u003cpath d=\"M18 6L6 18M6 6l12 12\" /\u003e\u003c/Icon\u003e\n                \u003c/button\u003e\n              \u003c/span\u003e\n            ))}\n          \u003c/div\u003e\n        )}\n\n        \u003cdiv\n          ref={controlsRef}\n          className={`grid items-end gap-x-1 gap-y-1.5 ${\n            expanded\n              ? \"grid-cols-[minmax(0,1fr)_auto_28px_28px]\"\n              : \"grid-cols-[28px_minmax(0,1fr)_auto_28px_28px]\"\n          }`}\n        \u003e\n          \u003cbutton\n            type=\"button\"\n            aria-label=\"Add attachments and sources\"\n            aria-expanded={plusOpen}\n            onClick={() =\u003e {\n              setModelOpen(false);\n              setPlusOpen((current) =\u003e !current);\n              inputRef.current?.focus();\n            }}\n            className={`flex size-7 shrink-0 items-center justify-center justify-self-start text-ink-3 transition-[background-color,color,transform] duration-150 hover:bg-hover hover:text-ink active:scale-[0.94] ${\n              pill ? \"rounded-full\" : \"rounded-[8px]\"\n            } ${plusOpen ? \"bg-hover text-ink\" : \"\"} ${expanded ? \"col-start-1 row-start-2\" : \"col-start-1 row-start-1\"}`}\n          \u003e\n            \u003cIcon size={16} strokeWidth={2}\u003e\u003cpath d=\"M12 5v14M5 12h14\" /\u003e\u003c/Icon\u003e\n          \u003c/button\u003e\n\n          \u003ctextarea\n            ref={inputRef}\n            rows={1}\n            value={draft}\n            onChange={(event) =\u003e {\n              setDraft(event.target.value);\n              setDismissed(false);\n              setPlusOpen(false);\n            }}\n            onKeyDown={(event) =\u003e {\n              if (menu \u0026\u0026 rows.length \u003e 0) {\n                if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n                  event.preventDefault();\n                  setEngaged(true);\n                  setActive((current) =\u003e (current + (event.key === \"ArrowDown\" ? 1 : rows.length - 1)) % rows.length);\n                  return;\n                }\n                if ((event.key === \"Enter\" \u0026\u0026 !event.shiftKey) || event.key === \"Tab\") {\n                  event.preventDefault();\n                  pick(rows[active]);\n                  return;\n                }\n              }\n              if (event.key === \"Escape\") {\n                setDismissed(true);\n                closeMenus();\n                return;\n              }\n              if (event.key === \"Enter\" \u0026\u0026 !event.shiftKey \u0026\u0026 !event.nativeEvent.isComposing) {\n                event.preventDefault();\n                send();\n              }\n            }}\n            placeholder={listening ? \"Listening…\" : \"Write a message…\"}\n            aria-label=\"Prompt\"\n            className={`min-h-7 min-w-0 w-full resize-none bg-transparent px-1 py-[5px] text-[13px] leading-[18px] text-ink outline-none [overflow-wrap:anywhere] placeholder:text-ink-3 ${\n              expanded ? \"col-span-full col-start-1 row-start-1\" : \"col-start-2 row-start-1\"\n            }`}\n          /\u003e\n\n          {/* model picker */}\n          \u003cbutton\n            ref={modelRef}\n            type=\"button\"\n            aria-expanded={modelOpen}\n            aria-label=\"Choose model\"\n            onClick={() =\u003e {\n              setPlusOpen(false);\n              setModelOpen((current) =\u003e !current);\n            }}\n            className={`flex h-7 shrink-0 items-center gap-1 px-1.5 text-[12px] font-medium text-ink-2 transition-colors duration-150 hover:bg-hover hover:text-ink ${\n              pill ? \"rounded-full\" : \"rounded-[8px]\"\n            } ${expanded ? \"col-start-2 row-start-2\" : \"col-start-3 row-start-1\"}`}\n          \u003e\n            {model.name}\n            \u003cspan className=\"text-ink-3\"\u003e\n              \u003cIcon size={11} strokeWidth={2.4}\u003e\u003cpath d=\"M6 9l6 6 6-6\" /\u003e\u003c/Icon\u003e\n            \u003c/span\u003e\n          \u003c/button\u003e\n\n          {/* dictation */}\n          \u003cbutton\n            type=\"button\"\n            aria-label={listening ? \"Stop dictation\" : \"Start dictation\"}\n            aria-pressed={listening}\n            onClick={() =\u003e setListening((current) =\u003e !current)}\n            className={`flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-150 active:scale-[0.94] ${\n              pill ? \"rounded-full\" : \"rounded-[8px]\"\n            } ${listening ? \"bg-accent-tint text-accent-ink\" : \"text-ink-3 hover:bg-hover hover:text-ink\"} ${\n              expanded ? \"col-start-3 row-start-2\" : \"col-start-4 row-start-1\"\n            }`}\n          \u003e\n            {listening ? (\n              \u003cspan className=\"flex h-3.5 items-center gap-[2.5px]\"\u003e\n                {[0, 1, 2].map((i) =\u003e (\n                  \u003cspan\n                    key={i}\n                    className=\"w-[2.5px] rounded-full bg-current\"\n                    style={{ height: \"100%\", animation: `eq-bounce 900ms ease-in-out ${i * 150}ms infinite` }}\n                  /\u003e\n                ))}\n              \u003c/span\u003e\n            ) : (\n              \u003cIcon size={15} strokeWidth={2}\u003e\u003cg\u003e\u003cpath d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z\" /\u003e\u003cpath d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3\" /\u003e\u003c/g\u003e\u003c/Icon\u003e\n            )}\n          \u003c/button\u003e\n\n          {/* send — tactile square (round in the pill variant) */}\n          \u003cbutton\n            type=\"button\"\n            aria-label=\"Send\"\n            disabled={!canSend}\n            onClick={send}\n            className={`flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.94] ${\n              pill ? \"rounded-full\" : \"rounded-[8px]\"\n            } ${expanded ? \"col-start-4 row-start-2\" : \"col-start-5 row-start-1\"}`}\n            style={{\n              background: canSend ? \"var(--ink)\" : \"var(--line-strong)\",\n              color: canSend ? \"var(--surface)\" : \"var(--ink-2)\",\n            }}\n          \u003e\n            \u003cIcon size={16} strokeWidth={2.4}\u003e\u003cpath d=\"M12 19V5M5 12l7-7 7 7\" /\u003e\u003c/Icon\u003e\n          \u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"15:T17e2,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * RECOMMENDATION CARD\n * The card holds its shape. Pressing \"Alternatives\" opens a\n * new drawer listing the other options; picking one promotes\n * it to the recommendation. The primary action confirms.\n * ───────────────────────────────────────────────────────── */\n\ntype Option = {\n  key: string;\n  body: React.ReactNode;\n  short: string;\n  signal: number;\n  tone: string;\n  label: string;\n  cta: string;\n  ctaStyle: string;\n};\n\nconst OPTIONS: Option[] = [\n  {\n    key: \"high\",\n    body: (\n      \u003c\u003e\n        Reorder waffle cones from{\" \"}\n        \u003ccode className=\"rounded-md bg-accent-tint px-1.5 py-0.5 font-mono text-[12px] text-accent-ink\"\u003econe_king\u003c/code\u003e{\" \"}\n        with lead time{\" \"}\n        \u003ccode className=\"rounded-md bg-accent-tint px-1.5 py-0.5 font-mono text-[12px] text-accent-ink\"\u003e7_days\u003c/code\u003e.\n      \u003c/\u003e\n    ),\n    short: \"Reorder from cone_king · 7-day lead\",\n    signal: 3,\n    tone: \"var(--green)\",\n    label: \"High confidence\",\n    cta: \"Accept\",\n    ctaStyle: \"bg-accent text-white\",\n  },\n  {\n    key: \"review\",\n    body: (\n      \u003c\u003e\n        Switch vanilla to{\" \"}\n        \u003ccode className=\"rounded-md bg-orange-tint px-1.5 py-0.5 font-mono text-[12px] text-orange\"\u003evanilla_madagascar\u003c/code\u003e{\" \"}\n        for peak season.\n      \u003c/\u003e\n    ),\n    short: \"Switch to vanilla_madagascar\",\n    signal: 2,\n    tone: \"var(--orange)\",\n    label: \"Needs review\",\n    cta: \"Configure\",\n    ctaStyle: \"bg-ink text-canvas\",\n  },\n  {\n    key: \"none\",\n    body: (\n      \u003c\u003e\n        Fall back to a \u003cspan className=\"font-medium text-ink\"\u003efull restock\u003c/span\u003e across every SKU.\n      \u003c/\u003e\n    ),\n    short: \"Full restock across every SKU\",\n    signal: 0,\n    tone: \"var(--ink-3)\",\n    label: \"No signal\",\n    cta: \"Accept full restock\",\n    ctaStyle: \"bg-ink text-canvas\",\n  },\n];\n\nfunction Meter({ signal, tone }: { signal: number; tone: string }) {\n  return (\n    \u003cspan className=\"flex items-end gap-0.5\"\u003e\n      {[0, 1, 2].map((bar) =\u003e (\n        \u003cspan\n          key={bar}\n          className=\"w-1 rounded-full transition-colors duration-300\"\n          style={{ height: 10, background: bar \u003c signal ? tone : \"var(--line-strong)\" }}\n        /\u003e\n      ))}\n    \u003c/span\u003e\n  );\n}\n\nexport default function RecommendationCard() {\n  const [selected, setSelected] = useState(0);\n  const [open, setOpen] = useState(false);\n  const [accepted, setAccepted] = useState(false);\n\n  const active = OPTIONS[selected];\n  const others = OPTIONS.map((o, i) =\u003e ({ o, i })).filter(({ i }) =\u003e i !== selected);\n\n  return (\n    \u003cdiv className=\"w-full max-w-95 overflow-hidden rounded-card bg-surface shadow-card\"\u003e\n      \u003cdiv className=\"primitive-card-pad\"\u003e\n        \u003cspan className=\"text-[13px] font-semibold text-ink\"\u003e\n          Want me to place this restock order?\n        \u003c/span\u003e\n        \u003cp\n          key={active.key}\n          className=\"mt-1.5 min-h-12 text-[13px] leading-relaxed text-ink-2\"\n          style={{ animation: \"fade-in 180ms ease-out both\" }}\n        \u003e\n          {active.body}\n        \u003c/p\u003e\n      \u003c/div\u003e\n\n      {/* alternatives drawer — a distinctly new section of the card */}\n      \u003cdiv\n        className=\"grid transition-[grid-template-rows,opacity] duration-300\"\n        style={{\n          gridTemplateRows: open ? \"1fr\" : \"0fr\",\n          opacity: open ? 1 : 0,\n          transitionTimingFunction: \"cubic-bezier(0.16, 1, 0.3, 1)\",\n        }}\n      \u003e\n        \u003cdiv className=\"overflow-hidden\"\u003e\n          \u003cdiv className=\"border-t border-line bg-inset px-2 py-2\"\u003e\n            \u003cp className=\"px-1.5 pb-1 text-[11px] font-medium text-ink-3\"\u003e\n              Other options\n            \u003c/p\u003e\n            {others.map(({ o, i }) =\u003e (\n              \u003cbutton\n                key={o.key}\n                type=\"button\"\n                onClick={() =\u003e {\n                  setSelected(i);\n                  setAccepted(false);\n                  setOpen(false);\n                }}\n                className=\"flex w-full items-center gap-2.5 rounded-control px-1.5 py-1.5\n                  text-left transition-colors duration-100 hover:bg-hover\"\n              \u003e\n                \u003cMeter signal={o.signal} tone={o.tone} /\u003e\n                \u003cspan className=\"min-w-0 flex-1 truncate text-[12.5px] text-ink\"\u003e{o.short}\u003c/span\u003e\n                \u003cspan className=\"shrink-0 text-[11px] text-ink-3\"\u003e{o.label}\u003c/span\u003e\n              \u003c/button\u003e\n            ))}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv className=\"primitive-card-footer flex items-center justify-between gap-3 border-t border-line bg-inset\"\u003e\n        \u003cspan className=\"flex items-center gap-2\"\u003e\n          \u003cMeter signal={active.signal} tone={active.tone} /\u003e\n          \u003cspan className=\"text-[12.5px] font-medium text-ink-2\"\u003e{active.label}\u003c/span\u003e\n        \u003c/span\u003e\n\n        \u003cspan className=\"-mr-0.5 flex items-center gap-2\"\u003e\n          \u003cbutton\n            type=\"button\"\n            aria-expanded={open}\n            onClick={() =\u003e setOpen((current) =\u003e !current)}\n            className={`h-7 rounded-control px-2.5 text-[12.5px] font-medium shadow-btn\n              transition-[background-color,transform] duration-100 active:scale-[0.96]\n              ${open ? \"bg-hover text-ink\" : \"bg-surface text-ink hover:bg-hover\"}`}\n          \u003e\n            Alternatives\n          \u003c/button\u003e\n          \u003cbutton\n            type=\"button\"\n            onClick={() =\u003e setAccepted(true)}\n            className={`h-7 rounded-control px-3 text-[12.5px] font-medium\n              shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_0_0_1px_rgba(16,24,40,0.12),0_1px_2px_rgba(16,24,40,0.1)]\n              transition-[background-color,transform] duration-150 active:scale-[0.96]\n              ${accepted ? \"bg-green text-white\" : active.ctaStyle}`}\n          \u003e\n            {accepted ? \"Accepted\" : active.cta}\n          \u003c/button\u003e\n        \u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"16:Tedb,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * CONTEXT CARDS\n * Retrieved chunks enter once, then remain available.\n * ───────────────────────────────────────────────────────── */\n\nconst CHUNKS = [\n  {\n    title: \"Vendor onboarding rule\",\n    chars: \"290 characters\",\n    body: \"Cold-chain certification must be verified before a new dairy can be added to the reorder workflow.\",\n    source: \"Dairy Onboarding SOP.pdf\",\n    badge: \"PDF\",\n    tone: \"bg-red\",\n  },\n  {\n    title: \"Seasonal demand row\",\n    chars: \"1,250 characters\",\n    body: \"Q4 velocity table: pistachio +18%, vanilla +6%, rocky road -11%; retire flavors below 40 scoops weekly.\",\n    source: \"Sales Velocity Export.csv\",\n    badge: \"CSV\",\n    tone: \"bg-green\",\n  },\n];\n\nexport default function ContextCards() {\n  const [chipsShown, setChipsShown] = useState(false);\n\n  useEffect(() =\u003e {\n    const chips = setTimeout(() =\u003e setChipsShown(true), 700);\n    return () =\u003e clearTimeout(chips);\n  }, []);\n\n  return (\n    \u003cdiv className=\"flex w-full max-w-95 flex-col gap-2\"\u003e\n      \u003cdiv\n        className=\"flex items-center gap-2 px-0.5\"\n        style={{ animation: \"fade-in 400ms ease-out both\" }}\n      \u003e\n        \u003cspan className=\"text-[13px] font-semibold text-ink\"\u003eAll chunks\u003c/span\u003e\n        \u003cspan className=\"inline-flex h-5 items-center rounded-md bg-inset px-1.5 text-[11.5px] font-medium text-ink-2 shadow-hairline tabular-nums\"\u003e\n          32\n        \u003c/span\u003e\n      \u003c/div\u003e\n\n      {CHUNKS.map((chunk, i) =\u003e (\n        \u003cdiv\n          key={chunk.title}\n          className=\"overflow-hidden rounded-card bg-surface shadow-card\"\n          style={{\n            animation: `fade-up 400ms cubic-bezier(0.23,1,0.32,1) ${i * 100}ms both`,\n          }}\n        \u003e\n          \u003cdiv className=\"primitive-card-bar flex items-center gap-2.5 border-b border-line\"\u003e\n            \u003cspan className=\"flex min-w-0 items-center gap-1.5 text-[13px] font-medium text-ink\"\u003e\n              \u003csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\"\u003e\u003cpath d=\"M4 6h16M4 12h16M4 18h10\" /\u003e\u003c/svg\u003e\n              \u003cspan className=\"truncate\"\u003e{chunk.title}\u003c/span\u003e\n            \u003c/span\u003e\n            \u003cspan className=\"ml-auto shrink-0 text-[12px] text-ink-3 tabular-nums\"\u003e{chunk.chars}\u003c/span\u003e\n          \u003c/div\u003e\n          \u003cp className=\"px-3 pt-2 pb-1 text-[12.5px] leading-relaxed text-ink-2\"\u003e\n            {chunk.body}\n          \u003c/p\u003e\n          \u003cdiv className=\"px-3 pb-3\"\u003e\n            \u003cspan\n              className=\"inline-flex h-6 items-center gap-1.5 rounded-full bg-inset px-2\n                text-[12px] font-medium text-ink-2 shadow-btn\n                transition-[opacity,transform,background-color] duration-300 hover:bg-hover\"\n              style={{\n                opacity: chipsShown ? 1 : 0,\n                transform: chipsShown ? \"scale(1)\" : \"scale(0.95)\",\n                transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n                transitionDelay: `${i * 80}ms`,\n              }}\n            \u003e\n              \u003cspan className={`flex size-3.5 items-center justify-center rounded-[4px] ${chunk.tone} text-[7px] font-bold text-white`}\u003e\n                {chunk.badge}\n              \u003c/span\u003e\n              {chunk.source}\n              \u003csvg width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M7 17L17 7M7 7h10v10\" /\u003e\u003c/svg\u003e\n            \u003c/span\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"17:T15ce,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * DIFF TABLE\n * The proposed edit plays once and rests on the completed diff.\n * ───────────────────────────────────────────────────────── */\n\nfunction useStage(steps: number[]) {\n  const [stage, setStage] = useState(0);\n  useEffect(() =\u003e {\n    if (stage \u003e= steps.length) return;\n    const t = setTimeout(() =\u003e setStage((s) =\u003e s + 1), steps[stage]);\n    return () =\u003e clearTimeout(t);\n  }, [stage, steps]);\n  return stage;\n}\n\nconst ROWS = [\n  { id: \"Rocky Road\", dept: \"Classic\", email: \"aurora-scoops\", removed: true },\n  { id: \"Bubblegum\", dept: \"Retro\", email: \"kumo-creamery\", removed: true },\n  { id: \"Mint Chip\", dept: \"Classic\", email: \"maple-orbit\", removed: false },\n];\n\nconst DOT: Record\u003cstring, string\u003e = {\n  Classic: \"bg-accent\",\n  Retro: \"bg-ink-3\",\n  Seasonal: \"bg-orange\",\n};\n\nexport default function DiffTable() {\n  const stage = useStage([800, 1000, 1000]);\n  // 0 plain · 1 red tint · 2 completed diff\n  const tinted = stage \u003e= 2;\n  const added = stage \u003e= 3;\n\n  return (\n    \u003cdiv className=\"w-full max-w-95\"\u003e\n      \u003cdiv className=\"relative overflow-hidden rounded-card bg-surface shadow-card\"\u003e\n        \u003cdiv className=\"primitive-card-bar flex items-center justify-between border-b border-line\"\u003e\n          \u003cspan className=\"text-[12.5px] font-medium text-ink\"\u003eProposed menu cleanup\u003c/span\u003e\n        \u003c/div\u003e\n\n        \u003ctable className=\"w-full table-fixed border-collapse text-left\"\u003e\n          \u003ccolgroup\u003e\n            \u003ccol className=\"w-[34%]\" /\u003e\n            \u003ccol className=\"w-[30%]\" /\u003e\n            \u003ccol className=\"w-[36%]\" /\u003e\n          \u003c/colgroup\u003e\n          \u003cthead\u003e\n            \u003ctr className=\"border-b border-line\"\u003e\n              {[\"Flavor\", \"Category\", \"Supplier\"].map((h) =\u003e (\n                \u003cth key={h} className=\"primitive-table-cell text-[12px] font-medium text-ink-3\"\u003e\n                  {h}\n                \u003c/th\u003e\n              ))}\n            \u003c/tr\u003e\n          \u003c/thead\u003e\n          \u003ctbody\u003e\n            {ROWS.map((row) =\u003e {\n              const out = row.removed \u0026\u0026 tinted;\n              return (\n                \u003ctr\n                  key={row.id}\n                  className=\"border-b border-line transition-colors duration-400 last:border-0 hover:bg-hover\"\n                  style={{ background: out ? \"var(--red-tint)\" : undefined }}\n                \u003e\n                  \u003ctd\n                    className=\"primitive-table-cell text-[13px] font-medium tabular-nums transition-colors duration-400\"\n                    style={{ color: out ? \"var(--red)\" : \"var(--ink)\" }}\n                  \u003e\n                    {row.id}\n                  \u003c/td\u003e\n                  \u003ctd className=\"primitive-table-cell\"\u003e\n                    \u003cspan\n                      className=\"inline-flex h-5.5 items-center gap-1.5 rounded-full bg-inset px-2 text-[11.5px] font-medium shadow-hairline transition-opacity duration-400\"\n                      style={{ opacity: out ? 0.55 : 1 }}\n                    \u003e\n                      \u003cspan className={`size-1.5 rounded-full ${DOT[row.dept]}`} /\u003e\n                      \u003cspan className=\"text-ink-2\"\u003e{row.dept}\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/td\u003e\n                  \u003ctd\n                    className=\"primitive-table-cell text-[12.5px] whitespace-nowrap transition-colors duration-400\"\n                    style={{\n                      color: out ? \"var(--red)\" : \"var(--ink-2)\",\n                      textDecorationLine: out ? \"line-through\" : \"none\",\n                      textDecorationColor: \"color-mix(in srgb, var(--red) 50%, transparent)\",\n                    }}\n                  \u003e\n                    {row.email}\n                  \u003c/td\u003e\n                \u003c/tr\u003e\n              );\n            })}\n            {/* added row */}\n            \u003ctr\u003e\n              \u003ctd colSpan={3} className=\"p-0\"\u003e\n                \u003cdiv\n                  className=\"grid transition-[grid-template-rows,opacity] duration-400\"\n                  style={{\n                    gridTemplateRows: added ? \"1fr\" : \"0fr\",\n                    opacity: added ? 1 : 0,\n                    transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n                  }}\n                \u003e\n                  \u003cdiv className=\"overflow-hidden\" style={{ background: \"var(--green-tint)\" }}\u003e\n                    \u003cdiv className=\"grid grid-cols-[34%_30%_36%] items-center border-t border-line\"\u003e\n                      \u003cspan className=\"primitive-table-cell text-[13px] font-medium text-green tabular-nums\"\u003e\n                        Pistachio\n                      \u003c/span\u003e\n                      \u003cspan className=\"primitive-table-cell\"\u003e\n                        \u003cspan className=\"inline-flex h-5.5 items-center gap-1.5 rounded-full bg-surface px-2 text-[11.5px] font-medium shadow-hairline\"\u003e\n                          \u003cspan className=\"size-1.5 rounded-full bg-green\" /\u003e\n                          \u003cspan className=\"text-ink-2\"\u003eSeasonal\u003c/span\u003e\n                        \u003c/span\u003e\n                      \u003c/span\u003e\n                      \u003cspan className=\"primitive-table-cell text-[13px] text-green\"\u003e\n                        maple-orbit\n                      \u003c/span\u003e\n                    \u003c/div\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/td\u003e\n            \u003c/tr\u003e\n          \u003c/tbody\u003e\n        \u003c/table\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"18:T33b4,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useMemo, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * RECORDS TABLE — a compact CRM grid with the details that\n * make a wide table feel usable: explicit grid lines, a\n * restrained tag palette, a sticky first column, real links,\n * selection, sorting, import/export actions, and calculations.\n * ───────────────────────────────────────────────────────── */\n\ntype Strength = \"strong\" | \"weak\" | \"veryweak\" | \"none\";\ntype SortKey = \"name\" | \"last\" | \"strength\";\n\nconst STRENGTH: Record\u003cStrength, { label: string; color: string; rank: number }\u003e = {\n  strong: { label: \"Very strong\", color: \"var(--green)\", rank: 3 },\n  weak: { label: \"Weak\", color: \"var(--orange)\", rank: 2 },\n  veryweak: { label: \"Very weak\", color: \"var(--red)\", rank: 1 },\n  none: { label: \"No communication\", color: \"var(--ink-3)\", rank: 0 },\n};\n\nconst TAG_COLORS: Record\u003cstring, string\u003e = {\n  B2B: \"#f09a2f\",\n  B2C: \"#92b72d\",\n  Cafe: \"#ee6572\",\n  Catering: \"#c84f9d\",\n  \"Dairy-free\": \"#16a6c7\",\n  Gelato: \"#9a5cff\",\n  Imports: \"#3f78ff\",\n  Local: \"#25a878\",\n  Seasonal: \"#f09a2f\",\n  Sorbet: \"#16a6c7\",\n  Vegan: \"#92b72d\",\n  Wholesale: \"#3f78ff\",\n};\n\ntype Row = {\n  id: string;\n  name: string;\n  tags: string[];\n  last: string;\n  strength: Strength;\n  website?: string;\n};\n\nconst INITIAL_ROWS: Row[] = [\n  { id: \"aurora\", name: \"Aurora Scoops — Reykjavík\", tags: [\"Gelato\", \"Seasonal\"], last: \"9 days ago\", strength: \"strong\", website: \"aurora-scoops.example.com\" },\n  { id: \"kumo\", name: \"Kumo Creamery — Tokyo\", tags: [\"B2C\", \"Cafe\", \"Vegan\"], last: \"3 weeks ago\", strength: \"strong\", website: \"kumo-creamery.example.com\" },\n  { id: \"sol-nieve\", name: \"Sol y Nieve — Buenos Aires\", tags: [\"Gelato\", \"Local\"], last: \"2 months ago\", strength: \"weak\", website: \"sol-y-nieve.example.com\" },\n  { id: \"maple-orbit\", name: \"Maple Orbit — Montréal\", tags: [\"B2B\", \"Wholesale\", \"Seasonal\"], last: \"15 days ago\", strength: \"weak\", website: \"maple-orbit.example.com\" },\n  { id: \"blue-fig\", name: \"Blue Fig Gelato — Florence\", tags: [\"Gelato\", \"Cafe\"], last: \"over 1 year ago\", strength: \"veryweak\", website: \"blue-fig.example.com\" },\n  { id: \"sahara-swirl\", name: \"Sahara Swirl — Marrakech\", tags: [\"Sorbet\", \"Local\"], last: \"5 months ago\", strength: \"veryweak\" },\n  { id: \"cloudberry\", name: \"Cloudberry Cone — Helsinki\", tags: [\"Dairy-free\", \"Seasonal\"], last: \"No contact\", strength: \"none\", website: \"cloudberry-cone.example.com\" },\n  { id: \"palm-sugar\", name: \"Palm Sugar Creamery — Bangkok\", tags: [\"B2C\", \"Vegan\"], last: \"3 months ago\", strength: \"veryweak\", website: \"palm-sugar.example.com\" },\n  { id: \"cape-vanilla\", name: \"Cape Vanilla Co. — Cape Town\", tags: [\"Wholesale\", \"Imports\"], last: \"over 1 year ago\", strength: \"veryweak\", website: \"cape-vanilla.example.com\" },\n  { id: \"andes-snow\", name: \"Andes Snow Creamery — Quito\", tags: [\"Gelato\", \"Catering\"], last: \"almost 2 years ago\", strength: \"veryweak\" },\n  { id: \"tasman-sea\", name: \"Tasman Sea Gelato — Hobart\", tags: [\"Gelato\", \"Local\"], last: \"2 months ago\", strength: \"weak\", website: \"tasman-sea.example.com\" },\n  { id: \"silk-road\", name: \"Silk Road Sorbet — Tbilisi\", tags: [\"Sorbet\", \"Imports\"], last: \"about 1 month ago\", strength: \"weak\", website: \"silk-road.example.com\" },\n  { id: \"rosewater\", name: \"Rosewater Kulfi — Jaipur\", tags: [\"B2C\", \"Seasonal\"], last: \"2 months ago\", strength: \"veryweak\" },\n  { id: \"lumen\", name: \"Lumen Soft Serve — Copenhagen\", tags: [\"Dairy-free\", \"Cafe\"], last: \"8 months ago\", strength: \"weak\", website: \"lumen-soft-serve.example.com\" },\n  { id: \"cacao-norte\", name: \"Cacao Norte — Oaxaca\", tags: [\"B2B\", \"Local\", \"Wholesale\"], last: \"about 2 years ago\", strength: \"none\", website: \"cacao-norte.example.com\" },\n  { id: \"pine-pistachio\", name: \"Pine \u0026 Pistachio — Istanbul\", tags: [\"Gelato\", \"Catering\"], last: \"about 1 month ago\", strength: \"veryweak\" },\n  { id: \"ember-cone\", name: \"Ember Cone Company — Seoul\", tags: [\"B2C\", \"Vegan\"], last: \"15 days ago\", strength: \"weak\", website: \"ember-cone.example.com\" },\n  { id: \"coral-coast\", name: \"Coral Coast Sorbet — Honolulu\", tags: [\"Sorbet\", \"Local\"], last: \"9 days ago\", strength: \"strong\", website: \"coral-coast.example.com\" },\n  { id: \"sunbird\", name: \"Sunbird Gelateria — Lisbon\", tags: [\"Gelato\", \"Cafe\"], last: \"over 2 years ago\", strength: \"none\", website: \"sunbird.example.com\" },\n  { id: \"mooncake\", name: \"Mooncake Ice Cream — Singapore\", tags: [\"B2B\", \"Wholesale\"], last: \"about 1 month ago\", strength: \"veryweak\", website: \"mooncake-ice-cream.example.com\" },\n  { id: \"juniper\", name: \"Juniper \u0026 Cream — Vancouver\", tags: [\"Dairy-free\", \"Catering\"], last: \"No contact\", strength: \"none\" },\n  { id: \"mango-moon\", name: \"Mango Moon Gelato — Nairobi\", tags: [\"Sorbet\", \"Vegan\"], last: \"almost 2 years ago\", strength: \"veryweak\", website: \"mango-moon.example.com\" },\n  { id: \"fjord-fizz\", name: \"Fjord Fizz Ice — Oslo\", tags: [\"Dairy-free\", \"Seasonal\"], last: \"No contact\", strength: \"none\" },\n  { id: \"pampa\", name: \"Pampa Creamery — Córdoba\", tags: [\"B2C\", \"Local\"], last: \"12 months ago\", strength: \"veryweak\", website: \"pampa-creamery.example.com\" },\n  { id: \"lotus-leaf\", name: \"Lotus Leaf Scoops — Hanoi\", tags: [\"Vegan\", \"Cafe\"], last: \"15 days ago\", strength: \"weak\" },\n  { id: \"saffron-sky\", name: \"Saffron Sky Kulfi — Dubai\", tags: [\"Imports\", \"Catering\"], last: \"almost 2 years ago\", strength: \"veryweak\", website: \"saffron-sky.example.com\" },\n];\n\nfunction Icon({ children, size = 14, strokeWidth = 1.8 }: { children: React.ReactNode; size?: number; strokeWidth?: number }) {\n  return (\n    \u003csvg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={strokeWidth} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"\u003e\n      {children}\n    \u003c/svg\u003e\n  );\n}\n\nfunction Checkbox({ checked, mixed = false, onChange, label }: { checked: boolean; mixed?: boolean; onChange: () =\u003e void; label: string }) {\n  return (\n    \u003clabel className=\"records-checkbox\" title={label}\u003e\n      \u003cinput type=\"checkbox\" checked={checked} onChange={onChange} aria-label={label} /\u003e\n      \u003cspan className={`records-checkbox-box ${checked || mixed ? \"is-active\" : \"\"}`}\u003e\n        {mixed ? \u003cspan className=\"records-checkbox-dash\" /\u003e : checked ? \u003cIcon size={12}\u003e\u003cpath d=\"m5 12 4 4L19 6\" /\u003e\u003c/Icon\u003e : null}\n      \u003c/span\u003e\n    \u003c/label\u003e\n  );\n}\n\nfunction Tag({ name }: { name: string }) {\n  const color = TAG_COLORS[name] ?? \"#7f858d\";\n  return (\n    \u003cspan className=\"records-tag\" style={{ \"--tag-color\": color } as React.CSSProperties}\u003e\n      \u003cspan className=\"records-tag-dot\" style={{ background: color }} /\u003e\n      {name}\n    \u003c/span\u003e\n  );\n}\n\nfunction HeaderCell({ label, icon, sortKey, sort, onSort, className = \"\" }: { label: string; icon: React.ReactNode; sortKey?: SortKey; sort: { key: SortKey; dir: 1 | -1 }; onSort: (key: SortKey) =\u003e void; className?: string }) {\n  return (\n    \u003cth className={`records-header-cell ${className}`}\u003e\n      \u003cbutton type=\"button\" className=\"records-header-button\" onClick={sortKey ? () =\u003e onSort(sortKey) : undefined}\u003e\n        \u003cspan className=\"records-header-icon\"\u003e{icon}\u003c/span\u003e\n        \u003cspan className=\"truncate\"\u003e{label}\u003c/span\u003e\n        {sortKey \u0026\u0026 \u003cspan className={`records-sort ${sort.key === sortKey ? \"is-visible\" : \"\"}`} style={{ transform: sort.key === sortKey \u0026\u0026 sort.dir === -1 ? \"rotate(180deg)\" : undefined }}\u003e\u003cIcon size={12}\u003e\u003cpath d=\"M12 5v14M5 12l7 7 7-7\" /\u003e\u003c/Icon\u003e\u003c/span\u003e}\n      \u003c/button\u003e\n    \u003c/th\u003e\n  );\n}\n\nexport default function RecordsTable() {\n  const rows = INITIAL_ROWS;\n  const [selected, setSelected] = useState\u003cSet\u003cstring\u003e\u003e(new Set());\n  const [sort, setSort] = useState\u003c{ key: SortKey; dir: 1 | -1 }\u003e({ key: \"name\", dir: 1 });\n\n  const visibleRows = useMemo(() =\u003e {\n    return [...rows].sort((a, b) =\u003e {\n      const value = sort.key === \"name\"\n        ? a.name.localeCompare(b.name)\n        : sort.key === \"last\"\n          ? a.last.localeCompare(b.last)\n          : STRENGTH[a.strength].rank - STRENGTH[b.strength].rank;\n      return value * sort.dir;\n    });\n  }, [sort]);\n\n  const allSelected = visibleRows.length \u003e 0 \u0026\u0026 visibleRows.every((row) =\u003e selected.has(row.id));\n  const partiallySelected = !allSelected \u0026\u0026 visibleRows.some((row) =\u003e selected.has(row.id));\n\n  const toggleSort = (key: SortKey) =\u003e setSort((current) =\u003e current.key === key ? { key, dir: (current.dir * -1) as 1 | -1 } : { key, dir: 1 });\n  const toggleRow = (id: string) =\u003e setSelected((current) =\u003e {\n    const next = new Set(current);\n    next.has(id) ? next.delete(id) : next.add(id);\n    return next;\n  });\n  const toggleAll = () =\u003e setSelected((current) =\u003e {\n    const next = new Set(current);\n    if (allSelected) visibleRows.forEach((row) =\u003e next.delete(row.id));\n    else visibleRows.forEach((row) =\u003e next.add(row.id));\n    return next;\n  });\n\n  return (\n    \u003cdiv className=\"records-shell\"\u003e\n      \u003cdiv className=\"records-scroll\" tabIndex={0} aria-label=\"Companies table. Scroll horizontally and vertically to view all columns and records.\"\u003e\n        \u003ctable className=\"records-table\"\u003e\n          \u003ccolgroup\u003e\u003ccol className=\"records-company-col\" /\u003e\u003ccol className=\"records-category-col\" /\u003e\u003ccol className=\"records-last-col\" /\u003e\u003ccol className=\"records-strength-col\" /\u003e\u003ccol className=\"records-link-col\" /\u003e\u003c/colgroup\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n              \u003cth className=\"records-header-cell records-sticky-cell\"\u003e\u003cdiv className=\"records-company-header\"\u003e\u003cCheckbox checked={allSelected} mixed={partiallySelected} onChange={toggleAll} label=\"Select all companies\" /\u003e\u003cspan\u003eCompany\u003c/span\u003e\u003c/div\u003e\u003c/th\u003e\n              \u003cHeaderCell label=\"Categories\" sort={sort} onSort={toggleSort} icon={\u003cIcon size={15}\u003e\u003cpath d=\"m20.6 13.4-8.6 8.6-8-8V4h10l6.6 6.6a2 2 0 0 1 0 2.8zM7 7h.01\" /\u003e\u003c/Icon\u003e} /\u003e\n              \u003cHeaderCell label=\"Last interaction\" sortKey=\"last\" sort={sort} onSort={toggleSort} icon={\u003cIcon size={15}\u003e\u003cpath d=\"M3 5h18M3 12h12M3 19h7M18 15v6m-3-3h6\" /\u003e\u003c/Icon\u003e} /\u003e\n              \u003cHeaderCell label=\"Connection strength\" sortKey=\"strength\" sort={sort} onSort={toggleSort} icon={\u003cIcon size={15}\u003e\u003cpath d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.5a5.5 5.5 0 0 0 0-7.9z\" /\u003e\u003c/Icon\u003e} /\u003e\n              \u003cHeaderCell label=\"Links\" sort={sort} onSort={toggleSort} icon={\u003cIcon size={15}\u003e\u003cpath d=\"M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1\" /\u003e\u003c/Icon\u003e} /\u003e\n            \u003c/tr\u003e\n          \u003c/thead\u003e\n          \u003ctbody\u003e\n            {visibleRows.map((row) =\u003e {\n              const selectedRow = selected.has(row.id);\n              const strength = STRENGTH[row.strength];\n              return \u003ctr key={row.id} className={`records-row ${selectedRow ? \"is-selected\" : \"\"}`}\u003e\n                \u003ctd className=\"records-cell records-sticky-cell records-company-cell\"\u003e\u003cCheckbox checked={selectedRow} onChange={() =\u003e toggleRow(row.id)} label={`Select ${row.name}`} /\u003e\u003cspan className=\"records-company-mark\"\u003e{row.name.slice(0, 1).toUpperCase()}\u003c/span\u003e\u003ca href={row.website ? `https://${row.website}` : \"#\"} onClick={(event) =\u003e !row.website \u0026\u0026 event.preventDefault()} className={`records-company-name ${row.website ? \"has-link\" : \"\"}`}\u003e{row.name}\u003c/a\u003e\u003c/td\u003e\n                \u003ctd className=\"records-cell\"\u003e\u003cdiv className=\"records-tags\"\u003e{row.tags.slice(0, 4).map((tag) =\u003e \u003cTag key={tag} name={tag} /\u003e)}{row.tags.length \u003e 4 ? \u003cspan className=\"records-more-tag\"\u003e+{row.tags.length - 4}\u003c/span\u003e : null}\u003c/div\u003e\u003c/td\u003e\n                \u003ctd className={`records-cell ${row.last === \"No contact\" ? \"records-muted\" : \"\"}`}\u003e{row.last}\u003c/td\u003e\n                \u003ctd className=\"records-cell\"\u003e\u003cspan className=\"records-strength\"\u003e\u003cspan className=\"records-strength-dot\" style={{ background: strength.color }} /\u003e{strength.label}\u003c/span\u003e\u003c/td\u003e\n                \u003ctd className=\"records-cell\"\u003e{row.website ? \u003ca className=\"records-link\" href={`https://${row.website}`} target=\"_blank\" rel=\"noreferrer\"\u003e{row.website}\u003cIcon size={12}\u003e\u003cpath d=\"M14 5h5v5M19 5l-8 8\" /\u003e\u003c/Icon\u003e\u003c/a\u003e : \u003cspan className=\"records-muted\"\u003e—\u003c/span\u003e}\u003c/td\u003e\n              \u003c/tr\u003e;\n            })}\n          \u003c/tbody\u003e\n          \u003ctfoot\u003e\n            \u003ctr className=\"records-calculation-row\"\u003e\u003ctd className=\"records-cell records-sticky-cell records-calculation-label\"\u003e\u003cspan className=\"records-calculation-number\"\u003e{rows.length}\u003c/span\u003e count\u003c/td\u003e\u003ctd className=\"records-cell\"\u003e\u003cbutton type=\"button\" className=\"records-add-calculation\"\u003e\u003cIcon size={14}\u003e\u003cpath d=\"M12 5v14M5 12h14\" /\u003e\u003c/Icon\u003eAdd calculation\u003c/button\u003e\u003c/td\u003e\u003ctd className=\"records-cell records-muted\"\u003e—\u003c/td\u003e\u003ctd className=\"records-cell\"\u003e\u003cspan className=\"records-average\"\u003e\u003cspan className=\"records-strength-dot\" style={{ background: \"var(--orange)\" }} /\u003e{Math.round(rows.reduce((sum, row) =\u003e sum + STRENGTH[row.strength].rank, 0) / rows.length / 3 * 100)}% average\u003c/span\u003e\u003c/td\u003e\u003ctd className=\"records-cell\"\u003e\u003cspan className=\"records-muted\"\u003e{rows.filter((row) =\u003e row.website).length} links\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e\n          \u003c/tfoot\u003e\n        \u003c/table\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"19:T13cb,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * FILTER TABLE\n * Status chips directly filter the task table.\n * ───────────────────────────────────────────────────────── */\n\ntype Status = \"todo\" | \"progress\" | \"done\";\n\nconst FILTERS: { key: \"all\" | Status; label: string; dot?: string; count: number }[] = [\n  { key: \"all\", label: \"All\", count: 5 },\n  { key: \"todo\", label: \"To do\", dot: \"#f09a2f\", count: 2 },\n  { key: \"progress\", label: \"In Progress\", dot: \"#16a6c7\", count: 2 },\n  { key: \"done\", label: \"Completed\", dot: \"#25a878\", count: 1 },\n];\n\nconst ROWS: { task: string; date: string; status: Status; owner: string }[] = [\n  { task: \"Restock mango sorbet\", date: \"Dec 03\", status: \"todo\", owner: \"Mango Moon Gelato\" },\n  { task: \"Churn black sesame\", date: \"Sep 22\", status: \"progress\", owner: \"Kumo Creamery\" },\n  { task: \"Print summer menu\", date: \"Jan 02\", status: \"todo\", owner: \"Coral Coast Sorbet\" },\n  { task: \"Taste-test batch 42\", date: \"Nov 08\", status: \"progress\", owner: \"Maple Orbit\" },\n  { task: \"Order waffle cones\", date: \"Apr 14\", status: \"done\", owner: \"Aurora Scoops\" },\n];\n\nconst PILLS: Record\u003cStatus, { label: string; cls: string }\u003e = {\n  todo: { label: \"To do\", cls: \"filter-status-todo\" },\n  progress: { label: \"In Progress\", cls: \"filter-status-progress\" },\n  done: { label: \"Completed\", cls: \"filter-status-done\" },\n};\n\nexport default function FilterTable() {\n  const [filter, setFilter] = useState\u003c\"all\" | Status\u003e(\"all\");\n\n  return (\n    \u003cdiv className=\"w-full max-w-105\"\u003e\n      {/* filter chips */}\n      \u003cdiv\n        className=\"-mx-1 mb-1 flex items-center gap-1 overflow-x-auto px-1 py-1\"\n        style={{ scrollbarWidth: \"none\" }}\n      \u003e\n        {FILTERS.map((f) =\u003e {\n          const active = filter === f.key;\n          return (\n            \u003cbutton\n              key={f.key}\n              type=\"button\"\n              aria-pressed={active}\n              onClick={() =\u003e setFilter(f.key)}\n              className={`flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]\n                font-medium transition-[background-color,box-shadow,color] duration-200\n                ${active ? \"bg-surface text-ink shadow-btn\" : \"text-ink-2 hover:bg-hover\"}`}\n            \u003e\n              {f.dot \u0026\u0026 \u003cspan className=\"size-1.5 rounded-full\" style={{ background: f.dot }} /\u003e}\n              {f.label}\n              \u003cspan\n                className={`rounded-[4px] px-1 text-[10.5px] tabular-nums\n                  ${active ? \"bg-field text-ink-2\" : \"text-ink-3\"}`}\n              \u003e\n                {f.count}\n              \u003c/span\u003e\n            \u003c/button\u003e\n          );\n        })}\n      \u003c/div\u003e\n\n      {/* table */}\n      \u003cdiv\n        aria-label=\"Scrollable task table\"\n        className=\"overflow-x-auto rounded-card bg-surface shadow-card\"\n        role=\"region\"\n        tabIndex={0}\n        style={{ scrollbarWidth: \"none\" }}\n      \u003e\n        \u003cdiv className=\"min-w-[420px]\"\u003e\n          \u003cdiv className=\"grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] border-b border-line px-3 py-2 text-[11.5px] font-medium text-ink-3\"\u003e\n            \u003cspan\u003eTask name\u003c/span\u003e\n            \u003cspan\u003eDate\u003c/span\u003e\n            \u003cspan\u003eStatus\u003c/span\u003e\n            \u003cspan\u003eAdvisor\u003c/span\u003e\n          \u003c/div\u003e\n          {ROWS.map((row) =\u003e {\n            const shown = filter === \"all\" || row.status === filter;\n            const pill = PILLS[row.status];\n            return (\n              \u003cdiv\n                key={row.task}\n                className=\"grid transition-[grid-template-rows,opacity] duration-300\"\n                style={{\n                  gridTemplateRows: shown ? \"1fr\" : \"0fr\",\n                  opacity: shown ? 1 : 0,\n                  transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n                }}\n              \u003e\n                \u003cdiv className=\"overflow-hidden\"\u003e\n                  \u003cdiv\n                    className=\"grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b\n                      border-line px-3 py-2 text-[12px] transition-colors duration-100\n                      last:border-0 hover:bg-hover\"\n                  \u003e\n                    \u003cspan className=\"truncate font-medium text-ink\"\u003e{row.task}\u003c/span\u003e\n                    \u003cspan className=\"text-ink-2 tabular-nums\"\u003e{row.date}\u003c/span\u003e\n                    \u003cspan\u003e\n                      \u003cspan\n                        className={`inline-flex h-5 items-center rounded-[5px] px-1.5\n                          text-[11px] font-medium ${pill.cls}`}\n                      \u003e\n                        {pill.label}\n                      \u003c/span\u003e\n                    \u003c/span\u003e\n                    \u003cspan className=\"truncate text-ink-2\"\u003e{row.owner}\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            );\n          })}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"1a:T2272,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * SIDEBAR NAV\n * Workspace navigation with direct selection and search.\n * ───────────────────────────────────────────────────────── */\n\nconst ITEMS = [\n  { key: \"activity\", label: \"Home\", section: \"Workspace\" },\n  { key: \"tasks\", label: \"Agent tasks\", section: \"Workspace\", count: true },\n  { key: \"dashboard\", label: \"Inbox\", section: \"Workspace\" },\n  { key: \"spaces\", label: \"Suppliers\", section: \"Objects\", plus: true },\n  { key: \"analytics\", label: \"Inventory\", section: \"Objects\" },\n];\n\nfunction Icon({ kind }: { kind: string }) {\n  const p: Record\u003cstring, React.ReactNode\u003e = {\n    activity: \u003cpath d=\"M22 12h-4l-3 9L9 3l-3 9H2\" /\u003e,\n    tasks: \u003cg\u003e\u003cpath d=\"M9 11l3 3L22 4\" /\u003e\u003cpath d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\" /\u003e\u003c/g\u003e,\n    spaces: \u003cg\u003e\u003cpath d=\"M12 2L2 7l10 5 10-5-10-5z\" /\u003e\u003cpath d=\"M2 17l10 5 10-5M2 12l10 5 10-5\" /\u003e\u003c/g\u003e,\n    dashboard: \u003cg\u003e\u003crect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\" /\u003e\u003crect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\" /\u003e\u003crect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\" /\u003e\u003crect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\" /\u003e\u003c/g\u003e,\n    analytics: \u003cg\u003e\u003cpath d=\"M4 20V10M10 20V4M16 20v-7M22 20H2\" /\u003e\u003c/g\u003e,\n  };\n  return (\n    \u003csvg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n      {p[kind]}\n    \u003c/svg\u003e\n  );\n}\n\nexport default function SidebarNav() {\n  const [active, setActive] = useState(\"tasks\");\n  const [hovered, setHovered] = useState\u003cstring | null\u003e(null);\n  const [box, setBox] = useState\u003c{ top: number; height: number } | null\u003e(null);\n  const [query, setQuery] = useState(\"\");\n  const [badge, setBadge] = useState(4);\n  const sections = [\"Workspace\", \"Objects\"];\n  const navRef = useRef\u003cHTMLDivElement\u003e(null);\n  const itemRefs = useRef\u003cRecord\u003cstring, HTMLButtonElement | null\u003e\u003e({});\n\n  useLayoutEffect(() =\u003e {\n    const container = navRef.current;\n    const target = itemRefs.current[hovered ?? active];\n    if (!container || !target) return;\n\n    const containerRect = container.getBoundingClientRect();\n    const targetRect = target.getBoundingClientRect();\n    setBox({\n      top: targetRect.top - containerRect.top,\n      height: targetRect.height,\n    });\n  }, [hovered, active]);\n\n  return (\n    \u003cdiv className=\"w-60 rounded-card bg-surface p-2 shadow-raised\"\u003e\n      {/* workspace row */}\n      \u003cbutton\n        type=\"button\"\n        className=\"mb-2 flex w-full items-center gap-2.5 rounded-control p-1.5 text-left\n          transition-[background-color,transform] duration-100 hover:bg-hover active:scale-[0.96]\"\n      \u003e\n        \u003cspan className=\"flex size-8 shrink-0 items-center justify-center rounded-[8px] bg-ink text-[13px] font-semibold text-surface\"\u003e\n          C\n        \u003c/span\u003e\n        \u003cspan className=\"min-w-0 flex-1\"\u003e\n          \u003cspan className=\"block truncate text-[13px] font-medium leading-tight text-ink\"\u003eCreamery Ops\u003c/span\u003e\n          \u003cspan className=\"block truncate text-[11px] leading-tight text-ink-3\"\u003eProduction Workspace\u003c/span\u003e\n        \u003c/span\u003e\n        \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n          \u003cpath d=\"M7 15l5 5 5-5M7 9l5-5 5 5\" /\u003e\n        \u003c/svg\u003e\n      \u003c/button\u003e\n\n      {/* quick search */}\n      \u003clabel className=\"mb-1 flex h-8 items-center gap-2 rounded-control bg-inset px-2.5 shadow-hairline\"\u003e\n        \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2\" strokeLinecap=\"round\"\u003e\n          \u003ccircle cx=\"11\" cy=\"11\" r=\"7\" /\u003e\n          \u003cpath d=\"M21 21l-4.3-4.3\" /\u003e\n        \u003c/svg\u003e\n        \u003cinput\n          value={query}\n          onChange={(event) =\u003e setQuery(event.target.value)}\n          placeholder=\"Quick search\"\n          className=\"min-w-0 flex-1 bg-transparent text-[12.5px] text-ink outline-none placeholder:text-ink-3\"\n        /\u003e\n        \u003ckbd className=\"flex size-4.5 items-center justify-center rounded-[5px] bg-surface text-[10px] text-ink-3 shadow-hairline\"\u003e\n          /\n        \u003c/kbd\u003e\n      \u003c/label\u003e\n\n      {/* accent action */}\n      \u003cbutton\n        type=\"button\"\n        onClick={() =\u003e {\n          setBadge((current) =\u003e current + 1);\n          setActive(\"tasks\");\n        }}\n        className=\"mb-2 flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-[13px]\n          font-medium text-accent transition-[background-color,transform] duration-100 hover:bg-accent-tint active:scale-[0.96]\"\n      \u003e\n        \u003cspan className=\"min-w-0 flex-1 truncate text-left\"\u003eNew task\u003c/span\u003e\n        \u003cspan className=\"flex size-4 shrink-0 items-center justify-center rounded-full bg-accent text-white\"\u003e\n          \u003csvg width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\"\u003e\n            \u003cpath d=\"M12 5v14M5 12h14\" /\u003e\n          \u003c/svg\u003e\n        \u003c/span\u003e\n      \u003c/button\u003e\n\n      {/* items */}\n      \u003cdiv\n        ref={navRef}\n        onMouseLeave={() =\u003e setHovered(null)}\n        className=\"relative flex flex-col gap-2\"\n      \u003e\n        \u003cspan\n          aria-hidden\n          className=\"pointer-events-none absolute inset-x-0 rounded-[7px] bg-hover\"\n          style={{\n            top: box?.top ?? 0,\n            height: box?.height ?? 0,\n            opacity: box ? 1 : 0,\n            transition:\n              \"top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease\",\n          }}\n        /\u003e\n        {sections.map((section) =\u003e (\n          \u003cdiv key={section}\u003e\n            \u003cdiv className=\"px-2 pb-1 pt-1 text-[10.5px] font-medium uppercase tracking-[0.08em] text-ink-3\"\u003e\n              {section}\n            \u003c/div\u003e\n            \u003cdiv className=\"flex flex-col gap-px\"\u003e\n              {ITEMS.filter((item) =\u003e item.section === section).map((item) =\u003e {\n                const isActive = item.key === active;\n                return (\n                  \u003cbutton\n                    key={item.key}\n                    ref={(el) =\u003e {\n                      itemRefs.current[item.key] = el;\n                    }}\n                    type=\"button\"\n                    onMouseEnter={() =\u003e setHovered(item.key)}\n                    onFocus={() =\u003e setHovered(item.key)}\n                    onBlur={() =\u003e setHovered(null)}\n                    onClick={() =\u003e setActive(item.key)}\n                    aria-current={isActive ? \"page\" : undefined}\n                    className=\"group relative z-10 flex w-full items-center gap-2 rounded-[7px] px-2 py-1.5 text-left\n                      transition-[color,transform] duration-150 active:scale-[0.96]\"\n                  \u003e\n                    \u003cspan className={isActive ? \"text-ink\" : \"text-ink-3\"}\u003e\n                      \u003cIcon kind={item.key} /\u003e\n                    \u003c/span\u003e\n                    \u003cspan\n                      className={`min-w-0 flex-1 truncate text-[13px] transition-colors duration-150\n                        ${isActive ? \"font-medium text-ink\" : \"text-ink-2\"}`}\n                    \u003e\n                      {item.label}\n                    \u003c/span\u003e\n                    {item.count \u0026\u0026 (\n                      \u003cspan\n                        key={badge}\n                        className={`flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[10.5px] font-semibold tabular-nums ${\n                          isActive ? \"bg-surface text-ink-2 shadow-hairline\" : \"bg-accent-tint text-accent-ink\"\n                        }`}\n                        style={{ animation: \"pop-in 250ms cubic-bezier(0.23,1,0.32,1) both\" }}\n                      \u003e\n                        {badge}\n                      \u003c/span\u003e\n                    )}\n                    {item.plus \u0026\u0026 (\n                      \u003cspan\n                        className=\"flex size-4.5 items-center justify-center rounded-[5px] text-ink-3 opacity-0\n                          transition-[background-color,color,opacity] duration-100 group-hover:opacity-100 hover:bg-line/70 hover:text-ink-2\"\n                        style={isActive ? { opacity: 1 } : undefined}\n                      \u003e\n                        \u003csvg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\"\u003e\n                          \u003cpath d=\"M12 5v14M5 12h14\" /\u003e\n                        \u003c/svg\u003e\n                      \u003c/span\u003e\n                    )}\n                  \u003c/button\u003e\n                );\n              })}\n            \u003c/div\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"1b:Tf6b,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * SEARCH — command search with live filtering.\n * The field, clear action, and results are directly usable.\n * ───────────────────────────────────────────────────────── */\n\nconst ITEMS = [\n  \"Forecast summer demand\",\n  \"Find waffle cone suppliers\",\n  \"Compare seasonal flavors\",\n  \"Draft flavor launch plan\",\n  \"Check cold-chain status\",\n  \"Audit sugar costs\",\n  \"Retire low sellers\",\n];\n\nexport default function SearchList() {\n  const [query, setQuery] = useState(\"\");\n  const results = query\n    ? ITEMS.filter((i) =\u003e i.toLowerCase().includes(query.toLowerCase()))\n    : ITEMS.slice(0, 5);\n  const empty = query.length \u003e 2 \u0026\u0026 results.length === 0;\n\n  return (\n    \u003cdiv className=\"flex min-h-[248px] w-full max-w-72 flex-col items-stretch\"\u003e\n      \u003cdiv className=\"w-full self-start overflow-hidden rounded-card bg-surface shadow-raised\"\u003e\n        {/* input row */}\n        \u003cdiv className=\"flex h-10 items-center gap-2 border-b border-line px-3 transition-colors duration-100 hover:bg-hover\"\u003e\n          \u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"shrink-0\"\u003e\n            \u003ccircle cx=\"11\" cy=\"11\" r=\"7\" /\u003e\n            \u003cpath d=\"M21 21l-4.3-4.3\" /\u003e\n          \u003c/svg\u003e\n          \u003cinput\n            value={query}\n            onChange={(event) =\u003e setQuery(event.target.value)}\n            placeholder=\"Search flavors…\"\n            aria-label=\"Search flavors\"\n            className=\"min-w-0 flex-1 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3\"\n          /\u003e\n          {query \u0026\u0026 (\n            \u003cbutton\n              aria-label=\"Clear search\"\n              type=\"button\"\n              onClick={() =\u003e setQuery(\"\")}\n              className=\"flex size-5.5 items-center justify-center rounded-full text-ink-3\n                transition-colors duration-100 hover:bg-line/70 hover:text-ink\"\n              style={{ animation: \"fade-in 150ms ease-out both\" }}\n            \u003e\n              \u003csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\"\u003e\n                \u003cpath d=\"M18 6L6 18M6 6l12 12\" /\u003e\n              \u003c/svg\u003e\n            \u003c/button\u003e\n          )}\n        \u003c/div\u003e\n\n        {/* results / empty state */}\n        {empty ? (\n          \u003cdiv className=\"flex flex-col items-center justify-center gap-1 px-4 py-8\" style={{ animation: \"fade-in 250ms ease-out both\" }}\u003e\n            \u003cspan className=\"mb-1.5 flex size-8 items-center justify-center rounded-control bg-inset text-ink-3 shadow-hairline\"\u003e\n              \u003csvg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\"\u003e\n                \u003ccircle cx=\"11\" cy=\"11\" r=\"7\" /\u003e\n                \u003cpath d=\"M21 21l-4.3-4.3\" /\u003e\n              \u003c/svg\u003e\n            \u003c/span\u003e\n            \u003cspan className=\"text-[13px] font-medium text-ink\"\u003eNo results found\u003c/span\u003e\n            \u003cspan className=\"text-[12px] text-ink-3\"\u003eAdjust your search to try again\u003c/span\u003e\n          \u003c/div\u003e\n        ) : (\n          \u003cdiv className=\"p-1\"\u003e\n            {results.map((item) =\u003e (\n              \u003cbutton\n                key={item}\n                type=\"button\"\n                onClick={() =\u003e setQuery(item)}\n                className=\"flex h-8 w-full items-center rounded-[6px] px-2 text-left text-[13px]\n                  text-ink transition-colors duration-100 hover:bg-hover\"\n                style={{ animation: \"fade-in 200ms ease-out both\" }}\n              \u003e\n                {item}\n              \u003c/button\u003e\n            ))}\n          \u003c/div\u003e\n        )}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"1c:T45b3,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { Liveline, type LivelinePoint, type LivelineSeries } from \"liveline\";\nimport { useEffect, useMemo, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * INSIGHT CARDS\n * Embedded mini-visualizations in an \"Insights N ‹ ›\"\n * carousel. Autoplay yields as soon as a person uses it.\n * ───────────────────────────────────────────────────────── */\n\nconst EASE = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\nconst formatPercent = (v: number) =\u003e `${v \u003e 0 ? \"+\" : \"\"}${v.toFixed(2)}%`;\nconst formatMoney = (v: number) =\u003e `$${Math.round(v).toLocaleString(\"en-US\")}`;\nconst SNAPSHOT_END = Math.floor(Date.now() / 1000);\n\nfunction makePoints(values: number[], gap = 6): LivelinePoint[] {\n  return values.map((value, index) =\u003e ({\n    time: SNAPSHOT_END - (values.length - 1 - index) * gap,\n    value,\n  }));\n}\n\nfunction useDarkMode() {\n  const [dark, setDark] = useState(false);\n\n  useEffect(() =\u003e {\n    const root = document.documentElement;\n    const update = () =\u003e setDark(root.classList.contains(\"dark\"));\n    update();\n    const observer = new MutationObserver(update);\n    observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n    return () =\u003e observer.disconnect();\n  }, []);\n\n  return dark;\n}\n\n/* inline @entity mention */\nfunction Entity({ name, tone }: { name: string; tone: string }) {\n  return (\n    \u003cspan className=\"inline-flex items-center gap-1 align-baseline font-medium text-ink\"\u003e\n      \u003cspan className={`inline-block size-2.5 rounded-full ${tone}`} /\u003e\n      @{name}\n    \u003c/span\u003e\n  );\n}\n\nfunction Mono({ children, tone }: { children: React.ReactNode; tone: \"red\" | \"green\" }) {\n  return (\n    \u003ccode className={`font-mono text-[11.5px] ${tone === \"red\" ? \"text-red\" : \"text-green\"}`}\u003e\n      {children}\n    \u003c/code\u003e\n  );\n}\n\nfunction chartIndexFromPointer(event: React.PointerEvent\u003cHTMLDivElement\u003e, pointCount: number) {\n  const rect = event.currentTarget.getBoundingClientRect();\n  const progress = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));\n  return Math.round(progress * (pointCount - 1));\n}\n\nfunction ChartTooltip({ rows }: { rows: { label: string; value: string; color: string }[] }) {\n  return (\n    \u003cdiv className=\"insight-chart-tooltip\"\u003e\n      \u003cspan className=\"insight-chart-tooltip-time\"\u003eToday, 12:00\u003c/span\u003e\n      {rows.map((row) =\u003e (\n        \u003cdiv key={row.label} className=\"insight-chart-tooltip-row\"\u003e\n          \u003cspan className=\"insight-chart-tooltip-label\"\u003e\u003cspan className=\"insight-chart-tooltip-dot\" style={{ background: row.color }} /\u003e{row.label}\u003c/span\u003e\n          \u003cstrong\u003e{row.value}\u003c/strong\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n\n/* 1 — return comparison: 2 series, legend + big deltas + line chart */\nfunction CompareCard() {\n  const dark = useDarkMode();\n  const [hoverIndex, setHoverIndex] = useState\u003cnumber | null\u003e(null);\n  const data = useMemo(\n    () =\u003e ({\n      mint: makePoints([-2.9, -3.4, -3.05, -3.86, -3.52, -4.1, -3.82, -4.41]),\n      pistachio: makePoints([0.22, 0.58, 0.42, 0.91, 0.76, 1.08, 0.96, 1.15]),\n    }),\n    [],\n  );\n\n  const latestMint = data.mint.at(-1)?.value ?? -4.41;\n  const latestPistachio = data.pistachio.at(-1)?.value ?? 1.15;\n  const series: LivelineSeries[] = useMemo(\n    () =\u003e [\n      {\n        id: \"mint\",\n        label: \"\",\n        data: data.mint,\n        value: latestMint,\n        color: \"#f68f3c\",\n      },\n      {\n        id: \"pistachio\",\n        label: \"\",\n        data: data.pistachio,\n        value: latestPistachio,\n        color: \"#3d9aff\",\n      },\n    ],\n    [data.mint, data.pistachio, latestMint, latestPistachio],\n  );\n\n  return (\n    \u003cdiv className=\"min-h-[278px] rounded-card bg-surface p-3 shadow-hairline\"\u003e\n      \u003cdiv className=\"flex items-center gap-4\"\u003e\n        {[\n          {\n            name: \"Mint Chip\",\n            delta: formatPercent(latestMint),\n            sub: \"-$2,377.66\",\n            tone: \"red\",\n            dot: \"bg-orange\",\n          },\n          {\n            name: \"Pistachio\",\n            delta: formatPercent(latestPistachio),\n            sub: \"+$617.22\",\n            tone: \"green\",\n            dot: \"bg-accent\",\n          },\n        ].map((s) =\u003e (\n          \u003cdiv key={s.name} className=\"flex-1\"\u003e\n            \u003cspan className=\"flex items-center gap-1.5 text-[11.5px] text-ink-2\"\u003e\n              \u003cspan className={`size-2 rounded-full ${s.dot}`} /\u003e\n              {s.name}\n            \u003c/span\u003e\n            \u003cspan className={`block text-[17px] font-semibold tracking-[-0.01em] tabular-nums ${s.tone === \"red\" ? \"text-red\" : \"text-green\"}`}\u003e\n              {s.delta}\n            \u003c/span\u003e\n            \u003cMono tone={s.tone as \"red\" | \"green\"}\u003e{s.sub}\u003c/Mono\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n      \u003cdiv className=\"mt-2 overflow-hidden rounded-control bg-inset shadow-hairline\"\u003e\n        \u003cdiv className=\"flex items-center justify-between border-b border-line px-2.5 py-1.5\"\u003e\n          \u003cspan className=\"text-[11px] text-ink-3 tabular-nums\"\u003e\n            Trend snapshot\n          \u003c/span\u003e\n          \u003cspan className=\"rounded-full bg-field px-2 py-0.5 text-[10.5px] font-medium text-ink-2\"\u003e\n            Snapshot\n          \u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv\n          className=\"insight-chart-stage relative h-[166px]\"\n          onPointerDown={(event) =\u003e setHoverIndex(chartIndexFromPointer(event, data.mint.length))}\n          onPointerMove={(event) =\u003e setHoverIndex(chartIndexFromPointer(event, data.mint.length))}\n          onPointerLeave={() =\u003e setHoverIndex(null)}\n          onPointerCancel={() =\u003e setHoverIndex(null)}\n          onPointerUp={() =\u003e setHoverIndex(null)}\n        \u003e\n          \u003cLiveline\n            data={[]}\n            value={0}\n            series={series}\n            theme={dark ? \"dark\" : \"light\"}\n            grid={false}\n            pulse={false}\n            window={42}\n            paused\n            scrub={false}\n            cursor=\"default\"\n            lineWidth={2.25}\n            padding={{ top: 24, right: 0, bottom: 22, left: 0 }}\n            formatValue={formatPercent}\n          /\u003e\n          {hoverIndex !== null \u0026\u0026 \u003c\u003e\n            \u003cspan className=\"insight-chart-cursor\" style={{ left: `${(hoverIndex / (data.mint.length - 1)) * 100}%` }} /\u003e\n            \u003cspan className=\"insight-chart-tooltip-anchor\" style={{ left: `${Math.min(Math.max((hoverIndex / (data.mint.length - 1)) * 100, 28), 72)}%` }}\u003e\n              \u003cChartTooltip rows={[{ label: \"Mint Chip\", value: formatPercent(data.mint[hoverIndex].value), color: \"var(--orange)\" }, { label: \"Pistachio\", value: formatPercent(data.pistachio[hoverIndex].value), color: \"var(--accent)\" }]} /\u003e\n            \u003c/span\u003e\n          \u003c/\u003e}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\n/* 2 — anomaly: bars with threshold + big spent value */\nfunction AnomalyCard() {\n  const dark = useDarkMode();\n  const [metric, setMetric] = useState\u003c\"spend\" | \"usage\"\u003e(\"spend\");\n  const [hoverIndex, setHoverIndex] = useState\u003cnumber | null\u003e(null);\n  const spend = useMemo(\n    () =\u003e makePoints([274, 289, 264, 307, 331, 1210, 1718, 2112], 7),\n    [],\n  );\n  const usage = useMemo(\n    () =\u003e makePoints([18, 19, 17, 21, 22, 58, 81, 96], 7),\n    [],\n  );\n\n  const data = metric === \"spend\" ? spend : usage;\n  const value = data.at(-1)?.value ?? (metric === \"spend\" ? 2112 : 96);\n  const threshold = metric === \"spend\" ? \"$2,112\" : \"82 kWh\";\n  const moneyLabel = formatMoney(spend.at(-1)?.value ?? 2112);\n\n  return (\n    \u003cdiv className=\"min-h-[278px] rounded-card bg-surface p-3 shadow-hairline\"\u003e\n      \u003cdiv className=\"flex items-center justify-between\"\u003e\n        \u003cspan className=\"flex items-center gap-1.5 text-[12px] font-medium text-ink\"\u003e\n          \u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--red)\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M12 19V5M5 12l7-7 7 7\" /\u003e\u003c/svg\u003e\n          High freezer spend\n        \u003c/span\u003e\n        \u003cspan className=\"rounded-full bg-field px-2 py-0.5 text-[10.5px] font-medium text-ink-2\"\u003e\n          Snapshot\n        \u003c/span\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"mt-2 overflow-hidden rounded-control bg-inset shadow-hairline\"\u003e\n        \u003cdiv className=\"flex items-center justify-between border-b border-line px-2.5 py-1.5\"\u003e\n          \u003cspan className=\"text-[11px] text-ink-3 tabular-nums\"\u003e\n            {hoverIndex !== null\n              ? metric === \"spend\"\n                ? formatMoney(data[hoverIndex].value)\n                : `${Math.round(data[hoverIndex].value)} kWh`\n              : `${threshold} threshold`}\n          \u003c/span\u003e\n          \u003cspan className=\"flex rounded-full bg-field p-0.5\"\u003e\n            {([\"spend\", \"usage\"] as const).map((item) =\u003e (\n              \u003cbutton\n                key={item}\n                type=\"button\"\n                aria-pressed={metric === item}\n                onClick={() =\u003e setMetric(item)}\n                className={`rounded-full px-2 py-0.5 text-[10.5px] font-medium transition-[background-color,color,box-shadow,transform] duration-150 active:scale-[0.96] ${\n                  metric === item ? \"bg-surface text-ink shadow-btn\" : \"text-ink-3 hover:text-ink-2\"\n                }`}\n              \u003e\n                {item === \"spend\" ? \"Spend\" : \"Usage\"}\n              \u003c/button\u003e\n            ))}\n          \u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv\n          className=\"insight-chart-stage relative h-[166px]\"\n          onPointerDown={(event) =\u003e setHoverIndex(chartIndexFromPointer(event, data.length))}\n          onPointerMove={(event) =\u003e setHoverIndex(chartIndexFromPointer(event, data.length))}\n          onPointerLeave={() =\u003e setHoverIndex(null)}\n          onPointerCancel={() =\u003e setHoverIndex(null)}\n          onPointerUp={() =\u003e setHoverIndex(null)}\n        \u003e\n          \u003cLiveline\n            data={data}\n            value={value}\n            theme={dark ? \"dark\" : \"light\"}\n            color=\"#ee5c61\"\n            grid\n            scrub={false}\n            fill={false}\n            pulse={false}\n            momentum={false}\n            paused\n            window={49}\n            lineWidth={2.25}\n            cursor=\"crosshair\"\n            padding={{ top: 18, right: 0, bottom: 22, left: 0 }}\n            formatValue={(v) =\u003e (metric === \"spend\" ? formatMoney(v) : `${Math.round(v)} kWh`)}\n          /\u003e\n          {hoverIndex !== null \u0026\u0026 \u003c\u003e\n            \u003cspan className=\"insight-chart-cursor\" style={{ left: `${(hoverIndex / (data.length - 1)) * 100}%` }} /\u003e\n            \u003cspan className=\"insight-chart-tooltip-anchor\" style={{ left: `${Math.min(Math.max((hoverIndex / (data.length - 1)) * 100, 28), 72)}%` }}\u003e\n              \u003cChartTooltip rows={[{ label: metric === \"spend\" ? \"Spend\" : \"Usage\", value: metric === \"spend\" ? formatMoney(data[hoverIndex].value) : `${Math.round(data[hoverIndex].value)} kWh`, color: \"var(--red)\" }]} /\u003e\n            \u003c/span\u003e\n          \u003c/\u003e}\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"mt-1.5 flex items-baseline gap-2\"\u003e\n        \u003cspan className=\"text-[17px] font-semibold tracking-[-0.01em] text-ink tabular-nums\"\u003e\n          {moneyLabel} spent\n        \u003c/span\u003e\n        \u003cMono tone=\"red\"\u003e+$1,834.66\u003c/Mono\u003e\n        \u003cspan className=\"text-[11px] text-ink-3\"\u003evs 3 months\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\n/* 3 — allocation: hero number + segmented bar + legend */\nfunction AllocationCard() {\n  const segments = [\n    { name: \"VAN\", label: \"Vanilla\", pct: 72.5, amount: \"$51,785\", cls: \"bg-orange\", tone: \"text-orange\" },\n    { name: \"CHOC\", label: \"Chocolate\", pct: 22.8, amount: \"$16,278\", cls: \"bg-line-strong\", tone: \"text-ink-2\" },\n    { name: \"MINT\", label: \"Mint\", pct: 4.7, amount: \"$3,357\", cls: \"bg-line\", tone: \"text-ink-3\" },\n  ];\n  const [selected, setSelected] = useState(segments[0].name);\n  const active = segments.find((segment) =\u003e segment.name === selected) ?? segments[0];\n\n  return (\n    \u003cdiv className=\"min-h-[278px] rounded-card bg-surface p-3 shadow-hairline\"\u003e\n      \u003cspan className=\"flex items-center gap-1.5 text-[12px] font-medium text-ink\"\u003e\n        \u003cspan className=\"flex size-3.5 items-center justify-center rounded-full bg-orange text-[8px] font-bold text-white\"\u003e\n          V\n        \u003c/span\u003e\n        Vanilla allocation\n      \u003c/span\u003e\n      \u003cspan className=\"mt-1 block text-[20px] font-semibold tracking-[-0.01em] text-ink tabular-nums\"\u003e\n        {active.amount}\n      \u003c/span\u003e\n      \u003cdiv\n        className=\"mt-3 flex h-9 gap-0.5 overflow-hidden rounded-full bg-field p-0.5\"\n        role=\"group\"\n        aria-label=\"Allocation segments\"\n      \u003e\n        {segments.map((s) =\u003e (\n          \u003cbutton\n            key={s.name}\n            type=\"button\"\n            aria-pressed={selected === s.name}\n            aria-label={`${s.label}: ${s.pct}%`}\n            onClick={() =\u003e setSelected(s.name)}\n            className={`relative h-full overflow-hidden rounded-full ${s.cls} transition-[opacity,transform,box-shadow] duration-300 active:scale-[0.98]`}\n            style={{\n              width: `${s.pct}%`,\n              opacity: selected === s.name ? 1 : 0.58,\n              boxShadow: selected === s.name ? \"inset 0 0 0 1px rgba(255,255,255,0.22)\" : undefined,\n              transitionTimingFunction: EASE,\n            }}\n          \u003e\n            \u003cspan\n              className=\"absolute inset-y-1 left-1 rounded-full bg-white/20 transition-[width,opacity] duration-500\"\n              style={{\n                width: selected === s.name ? \"calc(100% - 8px)\" : \"0%\",\n                opacity: selected === s.name ? 1 : 0,\n                transitionTimingFunction: EASE,\n              }}\n            /\u003e\n          \u003c/button\u003e\n        ))}\n      \u003c/div\u003e\n      \u003cdiv className=\"mt-2 flex items-center gap-1.5\"\u003e\n        {segments.map((s) =\u003e (\n          \u003cbutton\n            key={s.name}\n            type=\"button\"\n            aria-pressed={selected === s.name}\n            onClick={() =\u003e setSelected(s.name)}\n            className={`flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] transition-[background-color,color,transform] duration-150 active:scale-[0.96] ${\n              selected === s.name ? \"bg-field text-ink\" : \"text-ink-2 hover:bg-hover hover:text-ink\"\n            }`}\n          \u003e\n            \u003cspan className={`size-1.5 rounded-full ${s.cls}`} /\u003e\n            {s.name} \u003cspan className=\"tabular-nums\"\u003e{s.pct}%\u003c/span\u003e\n          \u003c/button\u003e\n        ))}\n      \u003c/div\u003e\n      \u003cdiv className=\"mt-3 min-h-16 rounded-control bg-inset px-2.5 py-2 shadow-hairline\"\u003e\n        \u003cspan className={`block text-[11.5px] font-medium ${active.tone}`}\u003e{active.label}\u003c/span\u003e\n        \u003cspan className=\"mt-1 block text-[11px] leading-relaxed text-ink-3\"\u003e\n          Contribution snapshot across current inventory value. Segment selection changes the inspected group without moving the card.\n        \u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst PAGES = [\n  {\n    key: \"compare\",\n    prose: (\n      \u003c\u003e\n        The worst performer in your \u003cEntity name=\"Creamery\" tone=\"bg-orange\" /\u003e is\n        Rocky Road — down \u003cMono tone=\"red\"\u003e-6%\u003c/Mono\u003e or \u003cMono tone=\"red\"\u003e-$2,453.44\u003c/Mono\u003e.\n      \u003c/\u003e\n    ),\n    Card: CompareCard,\n    pill: \"Should I rebalance flavors?\",\n  },\n  {\n    key: \"anomaly\",\n    prose: (\n      \u003c\u003e\n        Unusually high freezer bill on \u003cspan className=\"font-medium text-ink\"\u003eDec 13\u003c/span\u003e —{\" \"}\n        \u003cMono tone=\"red\"\u003e+$1,834.66\u003c/Mono\u003e above your average.\n      \u003c/\u003e\n    ),\n    Card: AnomalyCard,\n    pill: \"Get tips on cutting freezer costs\",\n  },\n  {\n    key: \"allocation\",\n    prose: (\n      \u003c\u003e\n        You\u0026apos;re heavily invested in \u003cEntity name=\"Vanilla\" tone=\"bg-orange\" /\u003e — it\u0026apos;s{\" \"}\n        \u003cspan className=\"font-medium text-ink\"\u003e72.5%\u003c/span\u003e of your case.\n      \u003c/\u003e\n    ),\n    Card: AllocationCard,\n    pill: \"If we look at seasonals, what changes?\",\n  },\n];\n\nexport default function InsightCards() {\n  const [page, setPage] = useState(0);\n\n  const move = (direction: -1 | 1) =\u003e {\n    setPage((current) =\u003e (current + direction + PAGES.length) % PAGES.length);\n  };\n\n  const { prose, Card, pill } = PAGES[page];\n\n  return (\n    \u003cdiv className=\"min-h-[408px] w-full max-w-86\"\u003e\n      {/* pager header */}\n      \u003cdiv className=\"flex items-center justify-between\"\u003e\n        \u003cspan className=\"flex items-baseline gap-1.5\"\u003e\n          \u003cspan className=\"text-[13px] font-semibold text-ink\"\u003eInsights\u003c/span\u003e\n          \u003cspan className=\"text-[13px] text-ink-3 tabular-nums\"\u003e{PAGES.length}\u003c/span\u003e\n        \u003c/span\u003e\n        \u003cspan className=\"flex items-center gap-0.5\"\u003e\n          {([\"M15 18l-6-6 6-6\", \"M9 6l6 6-6 6\"] as const).map((d, i) =\u003e (\n            \u003cbutton\n              key={i}\n              aria-label={i === 0 ? \"Previous insight\" : \"Next insight\"}\n              onClick={() =\u003e move(i === 0 ? -1 : 1)}\n              className=\"flex size-6 items-center justify-center rounded-[6px] text-ink-3\n                transition-[background-color,color,transform] duration-100 hover:bg-hover\n                hover:text-ink active:scale-[0.96]\"\n            \u003e\n              \u003csvg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n                \u003cpath d={d} /\u003e\n              \u003c/svg\u003e\n            \u003c/button\u003e\n          ))}\n        \u003c/span\u003e\n      \u003c/div\u003e\n\n      {/* page content — blurred crossfade */}\n      \u003cdiv\n        className=\"transition-[opacity,filter] duration-250\"\n        style={{ opacity: 1, filter: \"blur(0)\" }}\n      \u003e\n        \u003cp className=\"mt-1.5 text-[12.5px] leading-relaxed text-ink-2\"\u003e{prose}\u003c/p\u003e\n        \u003cdiv className=\"mt-2\"\u003e\n          \u003cCard /\u003e\n        \u003c/div\u003e\n        \u003cbutton\n          className=\"mt-2 rounded-full bg-surface px-3 py-1.5 text-left text-[12px] text-ink\n            shadow-btn transition-colors duration-100 hover:bg-hover\"\n        \u003e\n          {pill}\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"1d:T11ff,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * CODE BLOCK\n * Agent-written code streams line by line; copy is live.\n * ───────────────────────────────────────────────────────── */\n\nconst LINE_MS = 240;\nconst HOLD_MS = 3200;\n\ntype Tok = { t: string; c?: \"kw\" | \"str\" | \"num\" | \"fn\" | \"dim\" };\n\nconst LINES: Tok[][] = [\n  [{ t: \"export async function \", c: \"kw\" }, { t: \"churnBatch\", c: \"fn\" }, { t: \"() {\", c: \"dim\" }],\n  [{ t: \"  const \", c: \"kw\" }, { t: \"flavor = \" }, { t: \"await \", c: \"kw\" }, { t: \"getFlavor\", c: \"fn\" }, { t: \"(\", c: \"dim\" }, { t: \"\\\"pistachio\\\"\", c: \"str\" }, { t: \");\", c: \"dim\" }],\n  [{ t: \"  const \", c: \"kw\" }, { t: \"base = \" }, { t: \"await \", c: \"kw\" }, { t: \"dairy.\" }, { t: \"fetch\", c: \"fn\" }, { t: \"({ flavor });\", c: \"dim\" }],\n  [{ t: \"  await \", c: \"kw\" }, { t: \"freezer.\" }, { t: \"store\", c: \"fn\" }, { t: \"(base, { temp: \", c: \"dim\" }, { t: \"\\\"-14C\\\"\", c: \"str\" }, { t: \" });\", c: \"dim\" }],\n  [{ t: \"  return \", c: \"kw\" }, { t: \"base.gallons;\" }],\n  [{ t: \"}\", c: \"dim\" }],\n];\n\nconst COLORS: Record\u003cstring, string\u003e = {\n  kw: \"var(--accent-ink)\",\n  str: \"var(--green)\",\n  num: \"var(--orange)\",\n  fn: \"var(--ink)\",\n  dim: \"var(--ink-3)\",\n};\n\nconst RAW = `export async function churnBatch() {\n  const flavor = await getFlavor(\"pistachio\");\n  const base = await dairy.fetch({ flavor });\n  await freezer.store(base, { temp: \"-14C\" });\n  return base.gallons;\n}`;\n\nexport default function CodeBlock() {\n  const [count, setCount] = useState(0);\n  const [copied, setCopied] = useState(false);\n  const done = count \u003e= LINES.length;\n\n  useEffect(() =\u003e {\n    const t = setTimeout(\n      () =\u003e setCount((c) =\u003e (c \u003e= LINES.length ? 0 : c + 1)),\n      count === 0 ? 400 : done ? HOLD_MS : LINE_MS,\n    );\n    return () =\u003e clearTimeout(t);\n  }, [count, done]);\n\n  const copy = useCallback(() =\u003e {\n    navigator.clipboard.writeText(RAW).then(() =\u003e {\n      setCopied(true);\n      setTimeout(() =\u003e setCopied(false), 1500);\n    });\n  }, []);\n\n  return (\n    \u003cdiv className=\"w-full max-w-95 overflow-hidden rounded-card bg-surface shadow-card\"\u003e\n      {/* header */}\n      \u003cdiv className=\"primitive-card-bar flex items-center justify-between border-b border-line\"\u003e\n        \u003cspan className=\"flex items-baseline gap-2\"\u003e\n          \u003cspan className=\"font-mono text-[12px] font-medium text-ink\"\u003echurn.ts\u003c/span\u003e\n          \u003cspan className=\"text-[11.5px] text-ink-3\"\u003eTypeScript\u003c/span\u003e\n        \u003c/span\u003e\n        \u003cbutton\n          aria-label=\"Copy code\"\n          onClick={copy}\n          className={`flex h-6 items-center gap-1 rounded-[6px] px-1.5 text-[11.5px]\n            font-medium transition-colors duration-100 hover:bg-hover\n            ${copied ? \"text-green\" : \"text-ink-3 hover:text-ink\"}`}\n        \u003e\n          {copied ? (\n            \u003csvg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\u003c/svg\u003e\n          ) : (\n            \u003csvg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\u003crect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2.5\" /\u003e\u003cpath d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" /\u003e\u003c/svg\u003e\n          )}\n          {copied ? \"Copied\" : \"Copy\"}\n        \u003c/button\u003e\n      \u003c/div\u003e\n\n      {/* code */}\n      \u003cpre className=\"min-h-[137px] bg-inset px-3 py-2.5 font-mono text-[11.5px] leading-[1.7]\"\u003e\n        {LINES.slice(0, count).map((line, i) =\u003e (\n          \u003cdiv\n            key={i}\n            className=\"flex\"\n            style={{ animation: \"fade-up 250ms cubic-bezier(0.23,1,0.32,1) both\" }}\n          \u003e\n            \u003cspan className=\"w-5 shrink-0 text-right text-[10.5px] leading-[1.86] text-ink-3/60 select-none\"\u003e\n              {i + 1}\n            \u003c/span\u003e\n            \u003cspan className=\"pl-2.5 whitespace-pre\"\u003e\n              {line.map((tok, j) =\u003e (\n                \u003cspan key={j} style={{ color: tok.c ? COLORS[tok.c] : \"var(--ink-2)\" }}\u003e\n                  {tok.t}\n                \u003c/span\u003e\n              ))}\n              {i === count - 1 \u0026\u0026 !done \u0026\u0026 (\n                \u003cspan className=\"ml-0.5 inline-block h-3 w-[3px] translate-y-0.5 rounded-full bg-accent\" /\u003e\n              )}\n            \u003c/span\u003e\n          \u003c/div\u003e\n        ))}\n              \u003c/pre\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"1e:T26af,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport { useRef, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * FINE-TUNE CARD — compact interactive inspector.\n * Number fields scrub: hover the label for an ↔ cursor and\n * drag to adjust, use ↑/↓ (⇧ for ×10), or type directly.\n * ───────────────────────────────────────────────────────── */\n\nfunction ScrubField({\n  label,\n  value,\n  onChange,\n  min,\n  max,\n  step = 1,\n  suffix = \"\",\n  active,\n}: {\n  label: string;\n  value: number;\n  onChange: (v: number) =\u003e void;\n  min: number;\n  max: number;\n  step?: number;\n  suffix?: string;\n  active?: boolean;\n}) {\n  const drag = useRef\u003c{ x: number; v: number } | null\u003e(null);\n  const clamp = (v: number) =\u003e Math.min(max, Math.max(min, Math.round(v)));\n\n  return (\n    \u003clabel\n      className=\"flex h-6.5 min-w-0 items-center gap-1 rounded-chip py-1 pr-1 pl-0.5\n        transition-[background-color,box-shadow] duration-200\"\n      style={{\n        background: active ? \"var(--accent-tint)\" : \"var(--field)\",\n        boxShadow: active ? \"0 0 0 1px var(--accent)\" : \"none\",\n      }}\n    \u003e\n      {/* scrub handle */}\n      \u003cspan\n        role=\"slider\"\n        aria-label={label}\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        tabIndex={0}\n        onPointerDown={(e) =\u003e {\n          (e.target as HTMLElement).setPointerCapture(e.pointerId);\n          drag.current = { x: e.clientX, v: value };\n        }}\n        onPointerMove={(e) =\u003e {\n          if (!drag.current) return;\n          onChange(clamp(drag.current.v + ((e.clientX - drag.current.x) / 2) * step));\n        }}\n        onPointerUp={() =\u003e (drag.current = null)}\n        onKeyDown={(e) =\u003e {\n          const mult = e.shiftKey ? 10 : 1;\n          if (e.key === \"ArrowUp\" || e.key === \"ArrowRight\") {\n            e.preventDefault();\n            onChange(clamp(value + step * mult));\n          } else if (e.key === \"ArrowDown\" || e.key === \"ArrowLeft\") {\n            e.preventDefault();\n            onChange(clamp(value - step * mult));\n          }\n        }}\n        className=\"flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px]\n          px-0.5 text-[12px] text-ink-3 select-none hover:text-ink-2 focus-visible:text-accent-ink\n          focus-visible:outline-none\"\n      \u003e\n        {label}\n      \u003c/span\u003e\n      \u003cinput\n        inputMode=\"numeric\"\n        value={value}\n        onChange={(e) =\u003e {\n          const n = Number(e.target.value.replace(/[^\\d-]/g, \"\"));\n          if (!Number.isNaN(n)) onChange(clamp(n));\n        }}\n        aria-label={`${label} value`}\n        className=\"min-w-0 flex-1 bg-transparent text-[12px] text-ink tabular-nums outline-none\"\n      /\u003e\n      {suffix \u0026\u0026 \u003cspan className=\"shrink-0 pr-0.5 text-[11.5px] text-ink-3\"\u003e{suffix}\u003c/span\u003e}\n    \u003c/label\u003e\n  );\n}\n\nconst SEGMENTS = [\"row\", \"col\", \"grid\"] as const;\n\nfunction SegmentIcon({ kind }: { kind: string }) {\n  const dot = \"size-1.5 rounded-[2px] border-[1.2px] border-current\";\n  if (kind === \"row\")\n    return \u003cspan className=\"flex gap-0.5\"\u003e{[0, 1, 2].map((i) =\u003e \u003cspan key={i} className={dot} /\u003e)}\u003c/span\u003e;\n  if (kind === \"col\")\n    return \u003cspan className=\"flex flex-col gap-0.5\"\u003e{[0, 1].map((i) =\u003e \u003cspan key={i} className={dot} /\u003e)}\u003c/span\u003e;\n  return (\n    \u003cspan className=\"grid grid-cols-2 gap-0.5\"\u003e\n      {[0, 1, 2, 3].map((i) =\u003e \u003cspan key={i} className={dot} /\u003e)}\n    \u003c/span\u003e\n  );\n}\n\nexport default function FineTuneCard() {\n  const [seg, setSeg] = useState(0);\n  const [width, setWidth] = useState(324);\n  const [height, setHeight] = useState(96);\n  const [radius, setRadius] = useState(28);\n  const [opacity, setOpacity] = useState(100);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [typeValue, setTypeValue] = useState(\"Select type\");\n  const done =\n    seg !== 0 || width !== 324 || height !== 96 || radius !== 28 || opacity !== 100 || typeValue !== \"Select type\";\n\n  return (\n    \u003cdiv className=\"relative w-full max-w-60 rounded-card bg-surface shadow-raised\"\u003e\n      {/* header */}\n      \u003cdiv className=\"primitive-card-bar flex items-center justify-between border-b border-line\"\u003e\n        \u003cspan className=\"text-[13px] font-medium text-ink\"\u003eFlavor card\u003c/span\u003e\n        {done ? (\n          \u003cspan\n            className=\"flex items-center gap-1.5 text-[12px] font-medium text-green\"\n            style={{ animation: \"pop-in 250ms cubic-bezier(0.23,1,0.32,1) both\" }}\n          \u003e\n            \u003csvg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\u003e\n              \u003cpath d=\"M20 6L9 17l-5-5\" /\u003e\n            \u003c/svg\u003e\n            Edited\n          \u003c/span\u003e\n        ) : (\n          \u003cspan className=\"flex items-center gap-1.5\"\u003e\n            \u003cspan className=\"flex size-4.5 items-center justify-center rounded-[5px] border border-accent/30 bg-accent-tint\"\u003e\n              \u003csvg width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"var(--accent)\"\u003e\n                \u003cpath d=\"M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z\" /\u003e\n              \u003c/svg\u003e\n            \u003c/span\u003e\n            \u003cspan\n              className=\"bg-clip-text text-[12px] font-medium text-transparent\"\n              style={{\n                backgroundImage:\n                  \"linear-gradient(90deg, var(--accent) 35%, var(--accent-ink) 50%, var(--accent) 65%)\",\n                backgroundSize: \"200% 100%\",\n                animation: \"shimmer-text 1.4s linear infinite\",\n              }}\n            \u003e\n              Adjust\n            \u003c/span\u003e\n          \u003c/span\u003e\n        )}\n      \u003c/div\u003e\n\n      {/* layout section */}\n      \u003cdiv className=\"primitive-card-pad flex flex-col gap-2 border-b border-line\"\u003e\n        \u003cp className=\"text-[12.5px] font-medium text-ink\"\u003eLayout\u003c/p\u003e\n        {/* Layo segmented: gray track, raised white thumb */}\n        \u003cdiv className=\"relative grid grid-cols-3 rounded-control bg-field p-0.5\"\u003e\n          \u003cspan\n            aria-hidden\n            className=\"absolute inset-y-0.5 rounded-[6px] bg-surface shadow-btn transition-transform duration-300\"\n            style={{\n              width: \"calc((100% - 4px) / 3)\",\n              left: 2,\n              transform: `translateX(${seg * 100}%)`,\n              transitionTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n            }}\n          /\u003e\n          {SEGMENTS.map((s, i) =\u003e (\n            \u003cbutton\n              key={s}\n              type=\"button\"\n              aria-label={`${s} layout`}\n              aria-pressed={i === seg}\n              onClick={() =\u003e setSeg(i)}\n              className={`relative z-10 flex h-6 items-center justify-center transition-colors duration-200\n                ${i === seg ? \"text-accent\" : \"text-ink-3\"}`}\n            \u003e\n              \u003cSegmentIcon kind={s} /\u003e\n            \u003c/button\u003e\n          ))}\n        \u003c/div\u003e\n        \u003cdiv className=\"grid min-w-0 grid-cols-2 gap-2\"\u003e\n          \u003cScrubField label=\"W\" value={width} onChange={setWidth} min={40} max={999} active={width !== 324} /\u003e\n          \u003cScrubField label=\"H\" value={height} onChange={setHeight} min={24} max={999} active={height !== 96} /\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"grid min-w-0 grid-cols-2 gap-2\"\u003e\n          \u003cScrubField label=\"Radius\" value={radius} onChange={setRadius} min={0} max={64} active={radius !== 28} /\u003e\n          \u003cScrubField label=\"Opacity\" value={opacity} onChange={setOpacity} min={0} max={100} suffix=\"%\" active={opacity !== 100} /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      {/* interaction section */}\n      \u003cdiv className=\"primitive-card-footer flex items-center justify-between\"\u003e\n        \u003cspan className=\"text-[12px] text-ink-3\"\u003eType\u003c/span\u003e\n        \u003cdiv className=\"relative -mr-0.5 w-30\"\u003e\n          \u003cbutton\n            type=\"button\"\n            aria-expanded={menuOpen}\n            onClick={() =\u003e setMenuOpen((current) =\u003e !current)}\n            className=\"flex h-6.5 w-full items-center justify-between rounded-chip bg-inset py-1 pr-1 pl-2\n              shadow-hairline transition-shadow duration-200 focus-visible:outline-none\"\n            style={{ boxShadow: menuOpen ? \"0 0 0 1px var(--accent)\" : undefined }}\n          \u003e\n            \u003cspan className={`text-[12px] ${typeValue !== \"Select type\" ? \"text-ink\" : \"text-ink-3\"}`}\u003e\n              {typeValue}\n            \u003c/span\u003e\n            \u003csvg\n              width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--ink-3)\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n              className=\"transition-transform duration-200\"\n              style={{ transform: menuOpen ? \"rotate(180deg)\" : \"rotate(0)\" }}\n            \u003e\n              \u003cpath d=\"M6 9l6 6 6-6\" /\u003e\n            \u003c/svg\u003e\n          \u003c/button\u003e\n\n          {menuOpen \u0026\u0026 (\n            \u003cdiv\n              className=\"absolute right-0 bottom-8 z-10 w-30 rounded-[10px] bg-surface p-1 shadow-raised\"\n              style={{\n                animation: \"pop-in 200ms cubic-bezier(0.23,1,0.32,1) both\",\n                transformOrigin: \"bottom right\",\n              }}\n            \u003e\n              {[\"Seasonal\", \"Classic\", \"Limited\"].map((item) =\u003e (\n                \u003cbutton\n                  key={item}\n                  type=\"button\"\n                  onClick={() =\u003e {\n                    setTypeValue(item);\n                    setMenuOpen(false);\n                  }}\n                  className=\"flex h-6.5 w-full items-center rounded-[6px] px-2 text-left text-[12.5px] text-ink\n                    transition-colors duration-150 hover:bg-field\"\n                  style={{ background: item === typeValue ? \"var(--field)\" : \"transparent\" }}\n                \u003e\n                  {item}\n                \u003c/button\u003e\n              ))}\n            \u003c/div\u003e\n          )}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"1f:T4587,"])</script><script>self.__next_f.push([1,"\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowUp,\n  ChatBubbleQuestion,\n  Check,\n  EmojiSatisfied,\n  NavArrowRight,\n  Refresh,\n  Scissor,\n  Spark,\n  TextBox,\n  Xmark,\n} from \"iconoir-react\";\nimport { Shimmer } from \"@/components/atoms/Shimmer\";\nimport { StreamText } from \"@/components/atoms/StreamText\";\n\n/* ─────────────────────────────────────────────────────────\n * SELECTION ACTIONS\n * A contextual AI bar attached beneath selected text.\n * The global theme owns its surface; this component only\n * composes existing surface, ink, accent, radius and motion\n * tokens.\n * ───────────────────────────────────────────────────────── */\n\nconst LEAD = \"Pistachio holds the top slot all weekend. \";\nconst PICKED =\n  \"Churn it first thing Saturday so the batch has time to firm up before the afternoon rush.\";\nconst REWRITE =\n  \"Churn pistachio first thing Saturday so the batch has time to fully firm before the afternoon rush.\";\n\ntype Mode = \"idle\" | \"thinking\" | \"streaming\" | \"result\";\n\nconst iconProps = {\n  width: 14,\n  height: 14,\n  strokeWidth: 1.8,\n  \"aria-hidden\": true,\n} as const;\n\nconst icons = {\n  explain: \u003cChatBubbleQuestion {...iconProps} /\u003e,\n  improve: \u003cSpark {...iconProps} /\u003e,\n  shorten: \u003cScissor {...iconProps} /\u003e,\n  tone: \u003cEmojiSatisfied {...iconProps} /\u003e,\n  grammar: \u003cTextBox {...iconProps} /\u003e,\n  send: (\n    \u003cArrowUp\n      width=\"16\"\n      height=\"16\"\n      strokeWidth=\"2.4\"\n      aria-hidden=\"true\"\n    /\u003e\n  ),\n  chevron: \u003cNavArrowRight {...iconProps} /\u003e,\n  check: \u003cCheck {...iconProps} /\u003e,\n  close: \u003cXmark {...iconProps} /\u003e,\n  retry: \u003cRefresh {...iconProps} /\u003e,\n};\n\nconst control =\n  \"inline-flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[12px] font-normal text-ink transition-[background-color,color,transform] duration-150 hover:bg-hover active:scale-[0.96]\";\n\nconst primary =\n  \"inline-flex h-7 shrink-0 items-center gap-1 rounded-full bg-ink px-2.5 text-[12.5px] font-normal text-canvas shadow-hairline transition-[opacity,transform] duration-150 hover:opacity-90 active:scale-[0.96]\";\n\nexport default function SelectionActions() {\n  const [shown, setShown] = useState(false);\n  const [mode, setMode] = useState\u003cMode\u003e(\"idle\");\n  const [action, setAction] = useState(\"Improve\");\n  const [prompt, setPrompt] = useState(\"\");\n  const [typingWidth, setTypingWidth] = useState\u003cnumber | null\u003e(null);\n  const [expanded, setExpanded] = useState(false);\n  const [anchor, setAnchor] = useState({ x: 0, y: 0 });\n  const [positioned, setPositioned] = useState(false);\n\n  const hostRef = useRef\u003cHTMLDivElement\u003e(null);\n  const selectionRef = useRef\u003cHTMLSpanElement\u003e(null);\n  const barRef = useRef\u003cHTMLDivElement\u003e(null);\n  const contentRef = useRef\u003cHTMLDivElement\u003e(null);\n  const frameRef = useRef\u003cnumber | null\u003e(null);\n  const previousModeRef = useRef\u003cMode\u003e(\"idle\");\n  const lastWidthRef = useRef(0);\n  const widthAnimationRef = useRef\u003cAnimation | null\u003e(null);\n\n  useEffect(() =\u003e {\n    const timer = window.setTimeout(() =\u003e setShown(true), 280);\n    return () =\u003e window.clearTimeout(timer);\n  }, []);\n\n  useEffect(() =\u003e {\n    if (mode !== \"thinking\") return;\n    const timer = window.setTimeout(() =\u003e setMode(\"streaming\"), 700);\n    return () =\u003e window.clearTimeout(timer);\n  }, [mode]);\n\n  /* Attach beneath the final selected line, while centering the bar\n   * against the complete selection bounds. requestAnimationFrame batches\n   * streaming reflow measurements and avoids visible intermediate positions. */\n  const place = useCallback(() =\u003e {\n    if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);\n    frameRef.current = requestAnimationFrame(() =\u003e {\n      const host = hostRef.current;\n      const selection = selectionRef.current;\n      if (!host || !selection) return;\n\n      const bounds = selection.getBoundingClientRect();\n      const lines = Array.from(selection.getClientRects());\n      const lastLine = lines.at(-1);\n      if (!lastLine) return;\n\n      const hostBounds = host.getBoundingClientRect();\n      const next = {\n        x: Math.round(bounds.left - hostBounds.left + bounds.width / 2),\n        y: Math.round(lastLine.bottom - hostBounds.top + 8),\n      };\n\n      setAnchor((current) =\u003e\n        current.x === next.x \u0026\u0026 current.y === next.y ? current : next,\n      );\n      setPositioned(true);\n    });\n  }, []);\n\n  useLayoutEffect(() =\u003e {\n    place();\n  }, [mode, place]);\n\n  useEffect(() =\u003e {\n    const host = hostRef.current;\n    if (!host) return;\n    const observer = new ResizeObserver(place);\n    observer.observe(host);\n    window.addEventListener(\"resize\", place);\n    return () =\u003e {\n      observer.disconnect();\n      window.removeEventListener(\"resize\", place);\n      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);\n    };\n  }, [place]);\n\n  /* Intrinsic width handles the preset expansion. When the entire content\n   * changes between idle, loading and confirmation, animate from the last\n   * rendered width to the new intrinsic width before the browser paints. */\n  useLayoutEffect(() =\u003e {\n    const bar = barRef.current;\n    const content = contentRef.current;\n    if (!bar || !content) return;\n\n    const nextWidth = Math.ceil(content.getBoundingClientRect().width) + 8;\n    const previousWidth =\n      lastWidthRef.current || Math.ceil(bar.getBoundingClientRect().width);\n\n    if (\n      previousModeRef.current !== mode \u0026\u0026\n      Math.abs(nextWidth - previousWidth) \u003e 1\n    ) {\n      widthAnimationRef.current?.cancel();\n      const animation = bar.animate(\n        [\n          { width: `${previousWidth}px` },\n          { width: `${nextWidth}px` },\n        ],\n        {\n          duration: 320,\n          easing: \"cubic-bezier(0.23,1,0.32,1)\",\n        },\n      );\n      widthAnimationRef.current = animation;\n      animation.onfinish = () =\u003e {\n        lastWidthRef.current = nextWidth;\n        widthAnimationRef.current = null;\n      };\n    } else {\n      lastWidthRef.current = nextWidth;\n    }\n\n    previousModeRef.current = mode;\n  }, [mode]);\n\n  useEffect(() =\u003e {\n    const content = contentRef.current;\n    if (!content) return;\n\n    const observer = new ResizeObserver(() =\u003e {\n      if (widthAnimationRef.current?.playState === \"running\") return;\n      lastWidthRef.current =\n        Math.ceil(content.getBoundingClientRect().width) + 8;\n    });\n    observer.observe(content);\n    return () =\u003e {\n      observer.disconnect();\n      widthAnimationRef.current?.cancel();\n    };\n  }, []);\n\n  const run = (nextAction: string) =\u003e {\n    setAction(nextAction);\n    setExpanded(false);\n    setMode(\"thinking\");\n  };\n\n  const reset = () =\u003e {\n    setExpanded(false);\n    setPrompt(\"\");\n    setTypingWidth(null);\n    setAction(\"Improve\");\n    setMode(\"idle\");\n  };\n\n  const busy = mode === \"thinking\" || mode === \"streaming\";\n  const visible = shown \u0026\u0026 positioned;\n  const hasPrompt = prompt.trim().length \u003e 0;\n  const busyLabel =\n    action === \"Improve\"\n      ? \"Improving\"\n      : action === \"Shorten\"\n        ? \"Shortening\"\n        : action === \"Change tone\"\n          ? \"Changing tone\"\n          : \"Editing\";\n\n  return (\n    \u003cdiv className=\"w-full max-w-[460px]\"\u003e\n      \u003cdiv ref={hostRef} className=\"relative select-none pb-12\"\u003e\n        \u003cp className=\"text-[13px] leading-relaxed text-ink\"\u003e\n          {LEAD}\n          \u003cspan\n            ref={selectionRef}\n            className=\"box-decoration-clone rounded-[3px] bg-[color-mix(in_srgb,var(--accent)_14%,var(--surface))] text-ink dark:bg-accent-tint\"\n          \u003e\n            {mode === \"idle\" || mode === \"thinking\" ? (\n              PICKED\n            ) : mode === \"streaming\" ? (\n              \u003cStreamText\n                text={REWRITE}\n                onProgress={place}\n                onDone={() =\u003e setMode(\"result\")}\n              /\u003e\n            ) : (\n              REWRITE\n            )}\n          \u003c/span\u003e\n        \u003c/p\u003e\n\n        \u003cdiv\n          className=\"absolute top-0 left-0 z-10\"\n          style={{\n            transform: `translate3d(${anchor.x}px, ${anchor.y}px, 0) translateX(-50%)`,\n            transition:\n              \"transform 320ms cubic-bezier(0.77,0,0.175,1), opacity 180ms ease-out\",\n            opacity: visible ? 1 : 0,\n            pointerEvents: visible ? \"auto\" : \"none\",\n            willChange: \"transform\",\n          }}\n        \u003e\n          {/* A 36px pill wraps 28px controls at a 4px inset. The controls\n              resolve to a 14px radius, preserving the concentric curve. */}\n          \u003cdiv\n            ref={barRef}\n            className=\"flex h-9 w-fit max-w-[calc(100vw-48px)] items-center justify-center gap-0.5 overflow-hidden rounded-full bg-surface p-1 font-sans font-normal text-ink antialiased shadow-overlay\"\n            style={{\n              width:\n                mode === \"idle\" \u0026\u0026 hasPrompt \u0026\u0026 typingWidth\n                  ? typingWidth\n                  : undefined,\n              ...(visible\n                ? {\n                    animation:\n                      \"pop-in 220ms cubic-bezier(0.23,1,0.32,1) both\",\n                  }\n                : {}),\n            }}\n          \u003e\n            \u003cdiv\n              ref={contentRef}\n              className=\"flex w-fit shrink-0 items-center justify-center gap-0.5\"\n              style={{\n                width:\n                  mode === \"idle\" \u0026\u0026 hasPrompt \u0026\u0026 typingWidth\n                    ? typingWidth - 8\n                    : undefined,\n              }}\n            \u003e\n            {busy \u0026\u0026 (\n              \u003cspan className=\"inline-flex h-7 items-center gap-1.5 whitespace-nowrap px-2.5 text-[12.5px] font-normal text-ink-2\"\u003e\n                \u003cspan\n                  className=\"size-3 shrink-0 rounded-full border-[1.5px] border-line-strong border-t-ink-2\"\n                  style={{ animation: \"spin 700ms linear infinite\" }}\n                /\u003e\n                {mode === \"thinking\" ? (\n                  \u003cShimmer className=\"text-[12.5px] font-normal\"\u003e\n                    {busyLabel}…\n                  \u003c/Shimmer\u003e\n                ) : (\n                  \u003cspan\u003e{busyLabel}…\u003c/span\u003e\n                )}\n              \u003c/span\u003e\n            )}\n\n            {mode === \"result\" \u0026\u0026 (\n              \u003c\u003e\n                \u003cbutton\n                  type=\"button\"\n                  onClick={reset}\n                  className={primary}\n                \u003e\n                  {icons.check}\n                  Keep\n                \u003c/button\u003e\n                \u003cbutton type=\"button\" onClick={reset} className={control}\u003e\n                  {icons.close}\n                  Discard\n                \u003c/button\u003e\n                \u003cspan className=\"mx-0.5 h-4 w-px shrink-0 bg-line\" /\u003e\n                \u003cbutton\n                  type=\"button\"\n                  aria-label=\"Try again\"\n                  onClick={() =\u003e run(action)}\n                  className=\"flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3 transition-[background-color,color,transform] duration-150 hover:bg-hover-2 hover:text-ink-2 active:scale-[0.96]\"\n                \u003e\n                  {icons.retry}\n                \u003c/button\u003e\n              \u003c/\u003e\n            )}\n\n            {mode === \"idle\" \u0026\u0026 (\n              \u003c\u003e\n                \u003cdiv\n                  className=\"flex min-w-0 items-center overflow-hidden transition-[max-width,opacity,transform] duration-400\"\n                  style={{\n                    maxWidth: expanded\n                      ? 0\n                      : hasPrompt \u0026\u0026 typingWidth\n                        ? typingWidth - 40\n                        : 145,\n                    opacity: expanded ? 0 : 1,\n                    transform: expanded ? \"translateX(-8px)\" : \"translateX(0)\",\n                    transitionTimingFunction: \"cubic-bezier(0.23,1,0.32,1)\",\n                  }}\n                \u003e\n                  \u003cform\n                    className=\"flex h-7 shrink-0 items-center transition-[width] duration-400\"\n                    style={{\n                      width:\n                        hasPrompt \u0026\u0026 typingWidth ? typingWidth - 40 : 145,\n                      transitionTimingFunction: \"cubic-bezier(0.23,1,0.32,1)\",\n                    }}\n                    onSubmit={(event) =\u003e {\n                      event.preventDefault();\n                      run(prompt.trim() || \"Improve\");\n                    }}\n                  \u003e\n                    \u003cinput\n                      value={prompt}\n                      onChange={(event) =\u003e {\n                        const next = event.target.value;\n                        if (!prompt.trim() \u0026\u0026 next.trim()) {\n                          setTypingWidth(\n                            Math.ceil(\n                              barRef.current?.getBoundingClientRect().width ??\n                                0,\n                            ),\n                          );\n                        } else if (!next.trim()) {\n                          setTypingWidth(null);\n                        }\n                        setPrompt(next);\n                      }}\n                      aria-label=\"Describe edits\"\n                      placeholder=\"Describe edits\"\n                      className=\"h-7 w-full bg-transparent pr-2.5 pl-3 text-[12.5px] text-ink placeholder:text-ink-3\"\n                    /\u003e\n                  \u003c/form\u003e\n                \u003c/div\u003e\n\n                \u003cdiv\n                  className=\"flex min-w-0 items-center gap-0.5 overflow-hidden transition-[max-width,opacity,transform] duration-400\"\n                  style={{\n                    maxWidth: hasPrompt ? 0 : expanded ? 462 : 224,\n                    opacity: hasPrompt ? 0 : 1,\n                    transform: hasPrompt ? \"translateX(-8px)\" : \"translateX(0)\",\n                    transitionTimingFunction: \"cubic-bezier(0.23,1,0.32,1)\",\n                  }}\n                \u003e\n                  {!expanded \u0026\u0026 (\n                    \u003cspan className=\"mx-1 h-4 w-px shrink-0 bg-line-strong\" /\u003e\n                  )}\n                  \u003cbutton type=\"button\" className={control}\u003e\n                    {icons.explain}\n                    Explain\n                  \u003c/button\u003e\n                  \u003cbutton\n                    type=\"button\"\n                    onClick={() =\u003e run(\"Improve\")}\n                    className={control}\n                  \u003e\n                    {icons.improve}\n                    Improve\n                  \u003c/button\u003e\n\n                  \u003cdiv\n                    className=\"flex min-w-0 items-center gap-0.5 overflow-hidden transition-[max-width,opacity,margin] duration-400\"\n                    style={{\n                      maxWidth: expanded ? 262 : 0,\n                      opacity: expanded ? 1 : 0,\n                      marginLeft: expanded ? 2 : 0,\n                      transitionTimingFunction: \"cubic-bezier(0.23,1,0.32,1)\",\n                    }}\n                  \u003e\n                  \u003cbutton\n                    type=\"button\"\n                    onClick={() =\u003e run(\"Shorten\")}\n                    className={control}\n                  \u003e\n                    {icons.shorten}\n                    Shorten\n                  \u003c/button\u003e\n                  \u003cbutton\n                    type=\"button\"\n                    onClick={() =\u003e run(\"Change tone\")}\n                    className={control}\n                  \u003e\n                    {icons.tone}\n                    Tone\n                  \u003c/button\u003e\n                  \u003cbutton\n                    type=\"button\"\n                    onClick={() =\u003e run(\"Fix grammar\")}\n                    className={control}\n                  \u003e\n                    {icons.grammar}\n                    Grammar\n                  \u003c/button\u003e\n                  \u003c/div\u003e\n\n                  \u003cspan className=\"mx-0.5 h-4 w-px shrink-0 bg-line\" /\u003e\n                  \u003cbutton\n                    type=\"button\"\n                    aria-label={expanded ? \"Show fewer actions\" : \"Show more actions\"}\n                    aria-expanded={expanded}\n                    onClick={() =\u003e setExpanded((value) =\u003e !value)}\n                    className=\"flex size-7 shrink-0 items-center justify-center rounded-full text-ink transition-[background-color,transform] duration-200 hover:bg-hover active:scale-[0.96]\"\n                  \u003e\n                    \u003cspan\n                      className=\"flex transition-transform duration-400\"\n                      style={{\n                        transform: expanded ? \"rotate(180deg)\" : \"rotate(0deg)\",\n                        transitionTimingFunction: \"cubic-bezier(0.23,1,0.32,1)\",\n                      }}\n                    \u003e\n                      {icons.chevron}\n                    \u003c/span\u003e\n                  \u003c/button\u003e\n                \u003c/div\u003e\n\n                \u003cdiv\n                  className=\"flex min-w-0 items-center overflow-hidden transition-[max-width,opacity,transform] duration-400\"\n                  style={{\n                    maxWidth: hasPrompt ? 30 : 0,\n                    opacity: hasPrompt ? 1 : 0,\n                    transform: hasPrompt ? \"scale(1)\" : \"scale(0.88)\",\n                    transitionTimingFunction: \"cubic-bezier(0.23,1,0.32,1)\",\n                  }}\n                \u003e\n                  \u003cbutton\n                    type=\"button\"\n                    aria-label=\"Send edit instruction\"\n                    onClick={() =\u003e run(prompt.trim())}\n                    className=\"flex size-7 shrink-0 items-center justify-center rounded-full bg-ink text-surface transition-[opacity,transform] duration-200 active:scale-[0.94]\"\n                  \u003e\n                    {icons.send}\n                  \u003c/button\u003e\n                \u003c/div\u003e\n              \u003c/\u003e\n            )}\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  );\n}\n"])</script><script>self.__next_f.push([1,"8:[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"$Lc\",null,{\"sources\":{\"loading-state\":\"$d\",\"thinking-state\":\"$e\",\"streaming-text\":\"$f\",\"approval-card\":\"$10\",\"tool-chips\":\"$11\",\"task-rows\":\"$12\",\"chat-composer\":\"$13\",\"prompt-bar\":\"$14\",\"recommendation-card\":\"$15\",\"context-cards\":\"$16\",\"diff-table\":\"$17\",\"records-table\":\"$18\",\"filter-table\":\"$19\",\"sidebar-nav\":\"$1a\",\"search\":\"$1b\",\"insight-cards\":\"$1c\",\"code-block\":\"$1d\",\"fine-tune-card\":\"$1e\",\"selection-actions\":\"$1f\"}}],\"$L20\",\"$L21\"]}]\n9:[\"$\",\"$L22\",null,{\"children\":[\"$L23\",[\"$\",\"$L24\",null,{\"promise\":\"$@25\"}]]}]\na:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L26\",null,{\"children\":\"$L27\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L28\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$29\",null,{\"fallback\":null,\"children\":\"$L2a\"}]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2b:I[8060,[\"152\",\"static/chunks/152-d860c9c4fdf1deb2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"619\",\"static/chunks/619-ba102abea3e3d0e4.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"437\",\"static/chunks/437-ac0285169c3378eb.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"238\",\"static/chunks/238-4fb2a85d83a8fe1e.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"974\",\"static/chunks/app/page-a270d585e13da8b9.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\"],\"EmailCapture\"]\n2c:I[2619,[\"152\",\"static/chunks/152-d860c9c4fdf1deb2.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"619\",\"static/chunks/619-ba102abea3e3d0e4.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"437\",\"static/chunks/437-ac0285169c3378eb.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"238\",\"static/chunks/238-4fb2a85d83a8fe1e.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\",\"974\",\"static/chunks/app/page-a270d585e13da8b9.js?dpl=dpl_66BjASRafaYmxpqJa1bemN6wtrMN\"],\"\"]\n20:[\"$\",\"$L2b\",null,{}]\n21:[\"$\",\"footer\",null,{\"className\":\"flex items-center justify-between gap-4 border-t border-dashed border-line px-8 py-6\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[12px] text-ink-3\",\"children\":\"© 2026 Beautiful UI\"}],[\"$\",\"$L2c\",null,{\"href\":\"/license\",\"className\":\"text-[12px] text-ink-3 transition-colors duration-150 hover:text-ink\",\"children\":\"MIT License\"}]]}]\n"])</script><script>self.__next_f.push([1,"27:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n23:null\n"])</script><script>self.__next_f.push([1,"2d:I[622,[],\"IconMark\"]\n25:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Beautiful UI — Crafted primitives for AI-native interfaces\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A small library of extremely crafted, copy-paste components for chat agents, thinking states, human-in-the-loop approvals, and everything agents need to talk to humans beautifully.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon.png?e85518666265c44d\",\"type\":\"image/png\",\"sizes\":\"320x327\"}],[\"$\",\"$L2d\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"2a:\"$25:metadata\"\n"])</script></body></html>