<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: 378px;"><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 style="animation: 300ms cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal both running fade-up;"><button type="button" aria-expanded="false" class="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"><span class="relative flex size-4 shrink-0 items-center justify-center text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" class="transition-opacity duration-100 group-hover/row:opacity-0 "><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"></path></svg><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="absolute transition-[opacity,transform] duration-150 group-hover/row:opacity-100 opacity-0" style="transform: rotate(-90deg);"><path d="M6 9l6 6 6-6"></path></svg></span><span class="shrink-0 text-[12.5px] font-medium text-ink">Thinking</span><span class="inline-flex h-5.5 min-w-0 flex-1 cursor-pointer items-center truncate rounded-chip bg-hover-2 px-1.5
                    text-[11.5px] text-[#43464c] shadow-hairline transition-colors duration-100 hover:bg-line-strong
                    dark:bg-field dark:text-ink-2 dark:hover:bg-hover
                    ">Planning the churn schedule…</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="min-h-0 overflow-hidden"><div class="mt-0.5 mb-1 ml-2 flex flex-col gap-0.5 border-l border-line py-0.5 pl-3.5"><span class="truncate text-[11.5px] leading-[1.6]  text-ink-2">Weekend demand carries pistachio, so it churns first.</span><span class="truncate text-[11.5px] leading-[1.6]  text-ink-2">Batch capacity leaves two evening freezer windows.</span></div></div></div></div><div style="animation: 300ms cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal both running fade-up;"><button type="button" aria-expanded="false" class="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"><span class="relative flex size-4 shrink-0 items-center justify-center text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="transition-opacity duration-100 group-hover/row:opacity-0 "><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z"></path></g></svg><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="absolute transition-[opacity,transform] duration-150 group-hover/row:opacity-100 opacity-0" style="transform: rotate(-90deg);"><path d="M6 9l6 6 6-6"></path></svg></span><span class="shrink-0 text-[12.5px] font-medium text-ink">Write 204 lines</span><span class="inline-flex h-5.5 min-w-0 flex-1 cursor-pointer items-center truncate rounded-chip bg-hover-2 px-1.5
                    text-[11.5px] text-[#43464c] shadow-hairline transition-colors duration-100 hover:bg-line-strong
                    dark:bg-field dark:text-ink-2 dark:hover:bg-hover
                    font-mono">ChurnSchedule.tsx</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="min-h-0 overflow-hidden"><div class="mt-0.5 mb-1 ml-2 flex flex-col gap-0.5 border-l border-line py-0.5 pl-3.5"><span class="truncate text-[11.5px] leading-[1.6] font-mono text-green">+ const windows = slots.filter((s) =&gt; s.temp &lt;= -12)</span><span class="truncate text-[11.5px] leading-[1.6] font-mono text-green">+ return schedule(windows, { hero: "pistachio" })</span></div></div></div></div><div style="animation: 300ms cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal both running fade-up;"><button type="button" aria-expanded="false" class="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"><span class="relative flex size-4 shrink-0 items-center justify-center text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="transition-opacity duration-100 group-hover/row:opacity-0 "><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17l6-5-6-5M12 19h8"></path></g></svg><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="absolute transition-[opacity,transform] duration-150 group-hover/row:opacity-100 opacity-0" style="transform: rotate(-90deg);"><path d="M6 9l6 6 6-6"></path></svg></span><span class="shrink-0 text-[12.5px] font-medium text-ink">Rebuild and verify</span><span class="inline-flex h-5.5 min-w-0 flex-1 cursor-pointer items-center truncate rounded-chip bg-hover-2 px-1.5
                    text-[11.5px] text-[#43464c] shadow-hairline transition-colors duration-100 hover:bg-line-strong
                    dark:bg-field dark:text-ink-2 dark:hover:bg-hover
                    font-mono">npm run freeze</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="min-h-0 overflow-hidden"><div class="mt-0.5 mb-1 ml-2 flex flex-col gap-0.5 border-l border-line py-0.5 pl-3.5"><span class="truncate text-[11.5px] leading-[1.6] font-mono text-ink-2">✓ built in 1.2s</span><span class="truncate text-[11.5px] leading-[1.6] font-mono text-ink-2">✓ 34 checks passed</span></div></div></div></div><div style="animation: 300ms cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal both running fade-up;"><button type="button" aria-expanded="false" class="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"><span class="relative flex size-4 shrink-0 items-center justify-center text-ink-3"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="transition-opacity duration-100 group-hover/row:opacity-0 "><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></g></svg><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="absolute transition-[opacity,transform] duration-150 group-hover/row:opacity-100 opacity-0" style="transform: rotate(-90deg);"><path d="M6 9l6 6 6-6"></path></svg></span><span class="shrink-0 text-[12.5px] font-medium text-ink">Read image</span><span class="inline-flex h-5.5 min-w-0 flex-1 cursor-pointer items-center truncate rounded-chip bg-hover-2 px-1.5
                    text-[11.5px] text-[#43464c] shadow-hairline transition-colors duration-100 hover:bg-line-strong
                    dark:bg-field dark:text-ink-2 dark:hover:bg-hover
                    font-mono">flavor-chart.png</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="min-h-0 overflow-hidden"><div class="mt-0.5 mb-1 ml-2 flex flex-col gap-0.5 border-l border-line py-0.5 pl-3.5"><span class="truncate text-[11.5px] leading-[1.6]  text-ink-2">1280 × 720 · line chart, three summers.</span><span class="truncate text-[11.5px] leading-[1.6]  text-ink-2">Mint chip trends up 12% through July.</span></div></div></div></div></div><div class="mt-2.5 flex max-w-full flex-wrap gap-1.5 border-t border-line pt-2.5"><span class="inline-flex h-7 max-w-full cursor-pointer items-center gap-1.5 rounded-chip bg-surface px-2 font-mono text-[11.5px] text-ink shadow-btn transition-colors duration-100 hover:bg-hover" style="animation: 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms 1 normal both running pop-in;"><span class="min-w-0 truncate">flavors.css</span><span class="shrink-0 text-green tabular-nums">+13</span></span><span class="inline-flex h-7 max-w-full cursor-pointer items-center gap-1.5 rounded-chip bg-surface px-2 font-mono text-[11.5px] text-ink shadow-btn transition-colors duration-100 hover:bg-hover" style="animation: 250ms cubic-bezier(0.23, 1, 0.32, 1) 80ms 1 normal both running pop-in;"><span class="min-w-0 truncate">ChurnSchedule.tsx</span><span class="shrink-0 text-green tabular-nums">+74</span><span class="shrink-0 text-red tabular-nums">−41</span></span><span class="inline-flex h-7 max-w-full cursor-pointer items-center gap-1.5 rounded-chip bg-surface px-2 font-mono text-[11.5px] text-ink shadow-btn transition-colors duration-100 hover:bg-hover" style="animation: 250ms cubic-bezier(0.23, 1, 0.32, 1) 160ms 1 normal both running pop-in;"><span class="min-w-0 truncate">menu.ts</span><span class="shrink-0 text-green tabular-nums">+8</span><span class="shrink-0 text-red tabular-nums">−2</span></span><button type="button" class="inline-flex h-7 items-center rounded-chip px-1.5 font-mono text-[11.5px] text-ink-3 underline decoration-transparent underline-offset-2 transition-colors duration-100 hover:text-ink-2 hover:decoration-current" style="animation: 300ms ease-out 240ms 1 normal both running fade-in;">+2 more</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>