@nucleux/mcp 0.4.0 → 0.4.1

package/dist/index.js

@@ -5502,7 +5502,548 @@ export const Default: Story = {
   ]
 };
 
+// src/html-snippets.json
+var html_snippets_default = {
+  generatedFrom: "packages/mcp/gen/fixtures.tsx (do not edit \u2014 run scripts/gen-html-snippets.mjs)",
+  count: 133,
+  snippets: {
+    avatar: {
+      name: "Avatar",
+      html: '<div role="img" aria-label="Eric Idle" class="flex size-8 shrink-0 items-center justify-center overflow-hidden text-xs font-semibold rounded-full bg-brand text-brand-foreground"><span>EI</span></div>'
+    },
+    citation: {
+      name: "Citation",
+      html: '<button type="button" class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-full border border-border bg-muted px-1.5 align-middle text-[0.6875rem] font-medium leading-none text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Source 4">4</button>'
+    },
+    sourcelist: {
+      name: "SourceList",
+      html: '<div class="flex flex-col gap-2 rounded-xl border border-border bg-muted/30 p-3"><p class="px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">2 sources</p><ul class="flex flex-col gap-2"><li class="flex items-center gap-3 rounded-lg border border-border bg-background p-3"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><span class="text-xs font-semibold">1</span></span><span class="flex min-w-0 flex-1 flex-col"><span class="truncate text-sm font-medium text-foreground">Renewal Playbook</span><span class="truncate text-xs text-muted-foreground">PDF \xB7 Section 4.1</span></span><a href="#" class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-info transition-colors hover:bg-info/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Open<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link size-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></li><li class="flex items-center gap-3 rounded-lg border border-border bg-background p-3"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><span class="text-xs font-semibold">2</span></span><span class="flex min-w-0 flex-1 flex-col"><span class="truncate text-sm font-medium text-foreground">MSA Template</span><span class="truncate text-xs text-muted-foreground">DOCX</span></span><button type="button" class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-info transition-colors hover:bg-info/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Open<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link size-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></button></li></ul></div>'
+    },
+    confidenceindicator: {
+      name: "ConfidenceIndicator",
+      html: '<div class="flex flex-col gap-2 rounded-lg border border-border bg-background p-4"><div class="flex items-center justify-between gap-3"><span class="text-sm font-medium text-foreground">Overall confidence</span><span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums bg-warning/15 text-warning">68%</span></div><div role="meter" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" aria-label="Overall confidence" class="h-2 w-full overflow-hidden rounded-full bg-muted"><div class="h-full rounded-full transition-[width] bg-warning" style="width:68%"></div></div><p class="text-xs text-muted-foreground">Review recommended.</p></div>'
+    },
+    activitylog: {
+      name: "ActivityLog",
+      html: '<div class="flex flex-col gap-3"><p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Footprints</p><ol class="relative before:absolute before:left-3 before:top-1 before:h-[calc(100%-1rem)] before:w-px before:-translate-x-1/2 before:bg-border"><li class="relative flex gap-3 pb-4 last:pb-0"><span class="relative z-10 mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="text-sm text-foreground">Sent email to Sam</span><span class="text-xs text-muted-foreground">2m ago</span></span></li><li class="relative flex gap-3 pb-4 last:pb-0"><span class="relative z-10 mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="text-sm text-foreground">Read 3 CRM records</span><span class="text-xs text-muted-foreground">3m ago</span></span></li></ol></div>'
+    },
+    sessionrecap: {
+      name: "SessionRecap",
+      html: '<div class="flex flex-col gap-3 rounded-xl border border-brand/20 bg-brand-muted/40 p-4"><div class="flex items-center gap-2 text-brand"><span class="[&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></span><span class="text-xs font-semibold uppercase tracking-wide">Session recap</span></div><p class="text-sm leading-relaxed text-foreground">Aria sent 3 emails and created 1 issue.</p></div>'
+    },
+    agentsteps: {
+      name: "AgentSteps",
+      html: '<ol class="flex flex-col"><li class="relative flex gap-3 pb-5 last:pb-0 before:absolute before:left-[0.6875rem] before:top-6 before:h-[calc(100%-1.25rem)] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden"><span class="relative z-10 mt-0.5 inline-flex size-[1.375rem] shrink-0 items-center justify-center rounded-full border [&amp;_svg]:size-3.5 border-success bg-success text-success-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3.5" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-foreground">Reading skill doc</span></span></li><li class="relative flex gap-3 pb-5 last:pb-0 before:absolute before:left-[0.6875rem] before:top-6 before:h-[calc(100%-1.25rem)] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden" aria-current="step"><span class="relative z-10 mt-0.5 inline-flex size-[1.375rem] shrink-0 items-center justify-center rounded-full border [&amp;_svg]:size-3.5 border-info bg-info/10 text-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle size-3.5 animate-spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-foreground">Executing command</span><span class="mt-1 block h-1 w-full overflow-hidden rounded-full bg-muted"><span class="block h-full rounded-full bg-info transition-[width]" style="width:60%"></span></span></span></li><li class="relative flex gap-3 pb-5 last:pb-0 before:absolute before:left-[0.6875rem] before:top-6 before:h-[calc(100%-1.25rem)] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden"><span class="relative z-10 mt-0.5 inline-flex size-[1.375rem] shrink-0 items-center justify-center rounded-full border [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle size-2 fill-current" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle></svg></span><span class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-muted-foreground">Creating file</span></span></li></ol>'
+    },
+    actionplan: {
+      name: "ActionPlan",
+      html: '<div class="flex flex-col gap-4 rounded-xl border border-border bg-background p-5"><div class="flex flex-col gap-1"><h3 class="text-sm font-semibold text-foreground">Proposed plan</h3></div><ol class="flex flex-col gap-3 [counter-reset:nx-step]"><li class="flex gap-3 [counter-increment:nx-step] before:mt-0.5 before:inline-flex before:size-6 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-muted before:text-xs before:font-semibold before:text-muted-foreground before:[content:counter(nx-step)]"><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="text-sm font-medium text-foreground">Pull renewing accounts</span></span></li><li class="flex gap-3 [counter-increment:nx-step] before:mt-0.5 before:inline-flex before:size-6 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-muted before:text-xs before:font-semibold before:text-muted-foreground before:[content:counter(nx-step)]"><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="text-sm font-medium text-foreground">Draft emails</span></span></li></ol><div class="flex flex-wrap items-center gap-2"><button type="button" class="inline-flex items-center rounded-lg bg-info px-3 py-2 text-sm font-medium text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Accept plan</button><button type="button" class="ml-auto inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Reject</button></div></div>'
+    },
+    actionconfirmation: {
+      name: "ActionConfirmation",
+      html: '<div role="alertdialog" aria-label="Send 18 emails?" class="flex flex-col gap-3 rounded-xl border bg-background p-5 border-destructive/50"><div class="flex items-start gap-3"><span class="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&amp;_svg]:size-4 bg-destructive/10 text-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex min-w-0 flex-1 flex-col gap-1"><span class="inline-flex w-fit items-center rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground">AI action</span><h3 class="text-base font-semibold text-foreground">Send 18 emails?</h3><p class="text-sm text-muted-foreground">You can&#x27;t undo this.</p></div></div><div class="flex items-center justify-end gap-2"><button type="button" class="inline-flex items-center rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Cancel</button><button type="button" class="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring bg-destructive text-destructive-foreground hover:bg-destructive/90">Confirm</button></div></div>'
+    },
+    inlinefeedback: {
+      name: "InlineFeedback",
+      html: '<div role="toolbar" aria-label="Response feedback" class="inline-flex items-center gap-0.5"><button type="button" aria-label="Copy" title="Copy" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><button type="button" aria-label="Good response" title="Good response" aria-pressed="false" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up" aria-hidden="true"><path d="M7 10v12"></path><path d="M15 5.88 14 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="Bad response" title="Bad response" aria-pressed="false" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-down" aria-hidden="true"><path d="M17 14V2"></path><path d="M9 18.12 10 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-label="Regenerate" title="Regenerate" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></button></div>'
+    },
+    rewritemenu: {
+      name: "RewriteMenu",
+      html: '<div role="menu" aria-label="Rewrite" class="flex w-56 flex-col gap-0.5 rounded-xl border border-border bg-background p-1.5 shadow-md"><p class="px-2 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Rewrite</p><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg><span class="flex-1">Try again</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2" aria-hidden="true"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg><span class="flex-1">Make longer</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize2" aria-hidden="true"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" x2="21" y1="10" y2="3"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg><span class="flex-1">Make concise</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path><rect width="20" height="14" x="2" y="6" rx="2"></rect></svg><span class="flex-1">Make it professional</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list" aria-hidden="true"><path d="M3 12h.01"></path><path d="M3 18h.01"></path><path d="M3 6h.01"></path><path d="M8 12h13"></path><path d="M8 18h13"></path><path d="M8 6h13"></path></svg><span class="flex-1">Convert to bullet points</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle-question" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg><span class="flex-1">Ask a follow-up</span></button></div>'
+    },
+    toneselector: {
+      name: "ToneSelector",
+      html: '<div class="flex flex-col gap-2"><span class="text-xs font-medium text-muted-foreground">Tone</span><div role="radiogroup" aria-label="Tone" class="flex flex-wrap gap-1.5"><button type="button" role="radio" aria-checked="true" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-brand bg-brand-muted text-brand">Professional</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Friendly</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Direct</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Playful</button></div></div>'
+    },
+    responsecomparison: {
+      name: "ResponseComparison",
+      html: '<div class="flex flex-col gap-3"><p class="text-sm font-medium text-foreground">Which response is better?</p><div class="grid gap-3 sm:grid-cols-2"><div class="flex flex-col gap-3 rounded-xl border bg-background p-4 transition-colors border-border"><span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Response A</span><div class="flex-1 text-sm leading-relaxed text-foreground">Response A text</div><button type="button" aria-pressed="false" class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4 border-border bg-background text-foreground hover:bg-accent">Prefer this response</button></div><div class="flex flex-col gap-3 rounded-xl border bg-background p-4 transition-colors border-border"><span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Response B</span><div class="flex-1 text-sm leading-relaxed text-foreground">Response B text</div><button type="button" aria-pressed="false" class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4 border-border bg-background text-foreground hover:bg-accent">Prefer this response</button></div></div></div>'
+    },
+    promptenhancer: {
+      name: "PromptEnhancer",
+      html: '<div class="flex flex-wrap items-center gap-2"><button type="button" class="inline-flex items-center gap-1.5 rounded-full border border-brand/30 bg-brand-muted/60 px-3 py-1.5 text-sm font-medium text-brand transition-colors hover:bg-brand-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>Enhance prompt</button><button type="button" class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Make it professional</button></div>'
+    },
+    attachmenttile: {
+      name: "AttachmentTile",
+      html: '<div class="flex flex-wrap items-start gap-2"><div class="inline-flex max-w-64 items-center gap-2.5 rounded-lg border border-border bg-background py-2 pl-2.5 pr-2"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="flex min-w-0 flex-col"><span class="truncate text-sm font-medium text-foreground">Playbook.pdf</span><span class="truncate text-xs text-muted-foreground">PDF \xB7 240 KB</span></span><button type="button" aria-label="Remove Playbook.pdf" class="inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div>'
+    },
+    modelselector: {
+      name: "ModelSelector",
+      html: '<div class="relative inline-block"><button type="button" aria-label="Model" aria-haspopup="listbox" aria-expanded="false" class="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;&gt;svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles text-brand" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span>Instant</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div>'
+    },
+    voiceinput: {
+      name: "VoiceInput",
+      html: '<div class="flex items-center gap-3 rounded-full border border-border bg-background px-3 py-2" role="group" aria-label="Voice input"><button type="button" aria-label="Cancel dictation" class="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button><div class="flex h-8 flex-1 items-center gap-0.5" aria-hidden="true"><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:30%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:67%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:44%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:81%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:58%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:35%;animation-delay:450ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:72%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:49%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:86%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:63%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:40%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:77%;animation-delay:450ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:54%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:31%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:68%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:45%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:82%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:59%;animation-delay:450ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:36%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:73%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:50%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:87%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:64%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:41%;animation-delay:450ms"></span></div><span class="text-sm tabular-nums text-muted-foreground">0:12</span><button type="button" aria-label="Stop and use recording" class="inline-flex size-9 items-center justify-center rounded-full bg-info text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></button></div>'
+    },
+    structuredinput: {
+      name: "StructuredInput",
+      html: '<div class="flex flex-col gap-4 rounded-xl border border-border bg-background p-5"><p class="text-base font-medium text-foreground">Which audience is this for?</p><div role="radiogroup" aria-label="Which audience is this for?" class="flex flex-col gap-2"><button type="button" role="radio" aria-checked="false" class="flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-border bg-background text-foreground hover:bg-accent"><span class="inline-flex size-5 shrink-0 items-center justify-center border transition-colors [&amp;_svg]:size-3.5 rounded-full border-border"></span><span class="flex-1">Executives</span></button><button type="button" role="radio" aria-checked="false" class="flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-border bg-background text-foreground hover:bg-accent"><span class="inline-flex size-5 shrink-0 items-center justify-center border transition-colors [&amp;_svg]:size-3.5 rounded-full border-border"></span><span class="flex-1">Engineers</span></button></div><div class="flex items-center justify-end gap-2"><button type="button" class="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Skip</button><button type="button" disabled="" class="inline-flex items-center rounded-lg bg-info px-3 py-2 text-sm font-medium text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">Continue</button></div></div>'
+    },
+    connectorcard: {
+      name: "ConnectorCard",
+      html: '<div class="flex items-center gap-3 rounded-xl border border-border bg-background p-4"><span class="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&amp;_svg]:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug" aria-hidden="true"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg></span><div class="flex min-w-0 flex-1 flex-col"><span class="text-sm font-medium text-foreground">GitHub</span><span class="text-xs text-muted-foreground">Read issues and code</span></div><button type="button" class="inline-flex shrink-0 items-center rounded-lg border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Connect</button></div>'
+    },
+    knowledgebasepicker: {
+      name: "KnowledgeBasePicker",
+      html: '<div class="flex flex-col gap-2 rounded-xl border border-border bg-background p-3"><div class="flex items-center justify-between px-1"><p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Knowledge sources</p><span class="text-xs text-muted-foreground">1 selected</span></div><ul class="flex flex-col gap-1"><li><button type="button" role="checkbox" aria-checked="true" class="flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-brand bg-brand-muted/40"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="flex min-w-0 flex-1 flex-col"><span class="truncate text-sm font-medium text-foreground">CLAUDE.md</span><span class="truncate text-xs text-muted-foreground">project guide</span></span><span class="inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&amp;_svg]:size-3.5 border-brand bg-brand text-brand-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span></button></li><li><button type="button" role="checkbox" aria-checked="false" class="flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-transparent hover:bg-accent"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="flex min-w-0 flex-1 flex-col"><span class="truncate text-sm font-medium text-foreground">project.json</span><span class="truncate text-xs text-muted-foreground">config</span></span><span class="inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&amp;_svg]:size-3.5 border-border"></span></button></li></ul></div>'
+    },
+    prompttemplate: {
+      name: "PromptTemplate",
+      html: '<form class="flex flex-col gap-4 rounded-xl border border-border bg-background p-5"><p class="text-base leading-loose text-foreground">Email <input type="text" placeholder="Company" aria-label="Company" size="7" class="mx-0.5 inline-block rounded-md border-b-2 border-dashed border-brand/50 bg-brand-muted/40 px-1 text-center text-brand placeholder:text-brand/60 focus:border-solid focus:border-brand focus:outline-none" value=""/> about renewals.</p><div class="flex justify-end"><button type="submit" class="inline-flex items-center rounded-lg bg-info px-3 py-2 text-sm font-medium text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Use this prompt</button></div></form>'
+    },
+    aidisclosure: {
+      name: "AiDisclosure",
+      html: '<div class="flex items-center gap-2 rounded-lg border border-brand/20 bg-brand-muted/40 px-3 py-2 text-sm text-foreground [&amp;_svg]:size-4 [&amp;_svg]:text-brand"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span>This content was generated by AI. Review it before relying on it.</span></div>'
+    },
+    aicaveat: {
+      name: "AiCaveat",
+      html: '<p class="inline-flex items-center gap-1.5 text-xs text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><span>AI can make mistakes. Verify important information.</span></p>'
+    },
+    capabilityoverview: {
+      name: "CapabilityOverview",
+      html: '<div class="flex flex-col gap-5 rounded-xl border border-border bg-background p-6"><h3 class="text-center text-lg font-semibold text-foreground">Meet your assistant</h3><div class="grid gap-4 sm:grid-cols-3"><section class="flex flex-col gap-3"><div class="flex flex-col items-center gap-1.5 text-center"><span class="text-sm font-medium text-foreground">Examples</span></div><ul class="flex flex-col gap-2"><li class="rounded-lg bg-muted/50 px-3 py-2 text-center text-xs leading-relaxed text-muted-foreground">Summarize a contract</li></ul></section><section class="flex flex-col gap-3"><div class="flex flex-col items-center gap-1.5 text-center"><span class="text-sm font-medium text-foreground">Capabilities</span></div><ul class="flex flex-col gap-2"><li class="rounded-lg bg-muted/50 px-3 py-2 text-center text-xs leading-relaxed text-muted-foreground">Reads your files</li></ul></section><section class="flex flex-col gap-3"><div class="flex flex-col items-center gap-1.5 text-center"><span class="text-sm font-medium text-foreground">Limits</span></div><ul class="flex flex-col gap-2"><li class="rounded-lg bg-muted/50 px-3 py-2 text-center text-xs leading-relaxed text-muted-foreground">May be wrong</li></ul></section></div></div>'
+    },
+    memorysummary: {
+      name: "MemorySummary",
+      html: '<div class="flex flex-col gap-4 rounded-xl border border-border bg-background p-5"><div class="flex items-start justify-between gap-3"><div class="flex items-center gap-2"><span class="inline-flex size-8 items-center justify-center rounded-lg bg-brand-muted text-brand [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M19.938 10.5a4 4 0 0 1 .585.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M19.967 17.484A4 4 0 0 1 18 18"></path></svg></span><div class="flex flex-col"><h3 class="text-sm font-semibold text-foreground">What I remember</h3><span class="text-xs text-muted-foreground">Updated 1 minute ago</span></div></div><button type="button" aria-label="Refresh memory" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></button></div><div class="flex flex-col gap-4"><div class="flex flex-col gap-1.5"><p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">About you</p><ul class="flex flex-col gap-1"><li class="rounded-lg bg-muted/50 px-3 py-2 text-sm text-foreground">Prefers concise answers</li></ul></div></div><div class="flex items-center gap-2 border-t border-border pt-3"><input type="text" placeholder="Add or update a memory\u2026" aria-label="Add or update a memory\u2026" class="min-w-0 flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" value=""/><button type="button" aria-label="Add memory" class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-info text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></button></div></div>'
+    },
+    privacynotice: {
+      name: "PrivacyNotice",
+      html: '<div class="inline-flex items-center gap-2 rounded-lg bg-muted/60 px-3 py-2 text-xs text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg><span>Incognito chats aren&#x27;t saved or added to memory.</span></div>'
+    },
+    errorstate: {
+      name: "ErrorState",
+      html: '<div role="alert" class="flex flex-col items-center gap-3 rounded-xl border border-border bg-background px-6 py-10 text-center"><span class="inline-flex size-12 items-center justify-center rounded-full [&amp;_svg]:size-6 bg-destructive/10 text-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex flex-col gap-1"><h3 class="text-base font-semibold text-foreground">Something went wrong</h3><p class="max-w-sm text-sm text-muted-foreground">Your prompt didn&#x27;t go through.</p></div><div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button type="button">Retry</button></div></div>'
+    },
+    audiomessage: {
+      name: "AudioMessage",
+      html: '<div class="flex flex-col gap-2 rounded-xl border border-border bg-background p-3"><div class="flex items-center gap-3"><button type="button" aria-label="Play" aria-pressed="false" class="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-info text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg></button><div class="flex h-8 flex-1 items-center gap-0.5" aria-hidden="true"><span class="w-1 flex-1 rounded-full bg-info/60" style="height:40%;animation-delay:0ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:70%;animation-delay:90ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:55%;animation-delay:180ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:90%;animation-delay:270ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:60%;animation-delay:360ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:35%;animation-delay:450ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:75%;animation-delay:0ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:50%;animation-delay:90ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:85%;animation-delay:180ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:45%;animation-delay:270ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:65%;animation-delay:360ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:30%;animation-delay:450ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:80%;animation-delay:0ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:55%;animation-delay:90ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:70%;animation-delay:180ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:40%;animation-delay:270ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:60%;animation-delay:360ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:50%;animation-delay:450ms"></span></div><span class="shrink-0 text-xs tabular-nums text-muted-foreground">0:42</span></div></div>'
+    },
+    badge: {
+      name: "Badge",
+      html: '<span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-medium leading-4 bg-primary text-primary-foreground">New</span>'
+    },
+    button: {
+      name: "Button",
+      html: '<button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 border border-border bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-9 rounded-lg px-4 text-sm">Save</button>'
+    },
+    iconbutton: {
+      name: "IconButton",
+      html: '<button type="button" class="inline-flex shrink-0 items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-5 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground size-9" aria-label="Home"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button>'
+    },
+    cardcontainer: {
+      name: "CardContainer",
+      html: '<div class="rounded-xl border border-border bg-background text-foreground shadow-sm"><div class="flex items-start justify-between gap-4 px-6 py-4"><div><h3 class="text-base font-semibold leading-6 text-foreground">Recent meeting</h3><p class="text-sm text-muted-foreground">1 in your library</p></div><button type="button" class="shrink-0 text-sm font-medium text-info transition-colors hover:text-info/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">View all</button></div><div role="separator" class="h-px w-full bg-border"></div><div class="px-6 py-4">Body</div></div>'
+    },
+    checklist: {
+      name: "Checklist",
+      html: '<ul class=""><li class="flex items-start gap-4 px-6 py-4"><span aria-hidden="true" class="mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-success text-success-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3.5"><path d="M20 6 9 17l-5-5"></path></svg></span><div class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-muted-foreground line-through">Step one</span><span class="text-sm leading-5 text-muted-foreground">Done already</span></div></li><li class="flex items-start gap-4 px-6 py-4"><span aria-hidden="true" class="mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full border-2 border-muted-foreground/30 bg-transparent"></span><div class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-foreground">Step two</span><span class="text-sm leading-5 text-muted-foreground">Pending</span></div><div class="shrink-0 self-center"><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 border border-border bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-8 rounded-lg px-3 text-sm">Go</button></div></li></ul>'
+    },
+    actiontile: {
+      name: "ActionTile",
+      html: '<button type="button" class="group flex h-full w-full flex-col items-start gap-4 rounded-xl border border-border bg-background p-6 text-left transition-colors hover:border-brand/40 hover:bg-brand-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"><span class="inline-flex size-12 items-center justify-center rounded-lg bg-brand-muted text-brand transition-colors group-hover:bg-brand group-hover:text-brand-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><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-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span><span class="flex flex-col gap-1"><span class="text-base font-medium text-foreground">Record</span><span class="text-sm leading-5 text-muted-foreground">Capture live.</span></span></button>'
+    },
+    gettingstartedpill: {
+      name: "GettingStartedPill",
+      html: '<button type="button" aria-expanded="false" class="group inline-flex items-center gap-2.5 rounded-3xl border border-info/20 bg-background px-4 py-2 text-left shadow-[0_0_10px_-2px_hsl(var(--nx-info)/0.4)] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><span class="flex flex-1 items-center gap-2.5"><span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg></span><span class="text-sm text-foreground">Getting Started</span></span><span class="flex shrink-0 items-center gap-2.5"><span class="inline-flex items-center gap-1 whitespace-nowrap py-0.5 text-xs font-medium leading-4 bg-info/15 text-info rounded-[10px] px-2">2 of 4</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up size-4 text-muted-foreground"><path d="m18 15-6-6-6 6"></path></svg></span></button>'
+    },
+    chip: {
+      name: "Chip",
+      html: '<span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-foreground"><span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-muted-foreground"></span>Design</span>'
+    },
+    "chip (removable)": {
+      name: "Chip (removable)",
+      html: '<span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-foreground">React<button type="button" aria-label="Remove" class="-mr-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x size-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></span>'
+    },
+    alert: {
+      name: "Alert",
+      html: '<div role="alert" class="flex items-start gap-3 rounded-lg border p-4 text-sm border-info/30 bg-info/5 text-foreground [&amp;_[data-alert-icon]]:text-info"><span data-alert-icon="true" class="mt-0.5 shrink-0 [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span><div class="min-w-0 flex-1 space-y-1"><p class="font-medium leading-none">Heads up</p><div class="leading-relaxed text-muted-foreground">Body text</div></div></div>'
+    },
+    switch: {
+      name: "Switch",
+      html: '<button type="button" role="switch" aria-checked="true" data-state="checked" class="inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-primary h-5 w-9" aria-label="Toggle"><span data-state="checked" class="pointer-events-none inline-block rounded-full bg-background shadow-sm ring-0 transition-transform size-4 data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5"></span></button>'
+    },
+    separator: {
+      name: "Separator",
+      html: '<div role="none" class="shrink-0 bg-border h-px w-full"></div>'
+    },
+    tooltip: {
+      name: "Tooltip",
+      html: '<span class="group relative inline-flex"><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 border border-border bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-9 rounded-lg px-4 text-sm">Trigger</button><span role="tooltip" class="pointer-events-none invisible absolute z-50 whitespace-nowrap rounded-lg bg-foreground px-2 py-1.5 text-xs text-background opacity-0 shadow-md transition-opacity duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 bottom-full left-1/2 mb-2 -translate-x-1/2">Ask Nebula</span></span>'
+    },
+    searchinput: {
+      name: "SearchInput",
+      html: '<div class="flex min-h-9 items-center gap-2 rounded-lg border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-within:ring-2 focus-within:ring-ring"><span class="shrink-0 text-muted-foreground [&amp;_svg]:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></span><input type="search" placeholder="Ask or search" class="min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground" aria-label="Search"/></div>'
+    },
+    globalnav: {
+      name: "GlobalNav",
+      html: '<header class="flex h-16 w-full items-center justify-between gap-4 border-b border-border bg-background px-6"><div class="flex min-w-0 items-center gap-3"><span>Heading</span></div><div class="flex flex-1 items-center justify-center"></div><div class="flex items-center justify-end gap-2"><div role="img" aria-label="Eric" class="flex size-8 shrink-0 items-center justify-center overflow-hidden text-xs font-semibold rounded-full bg-brand text-brand-foreground"><span>ER</span></div></div></header>'
+    },
+    sidebar: {
+      name: "Sidebar",
+      html: '<nav class="flex h-full w-[69px] shrink-0 flex-col items-center gap-4 border-r border-border bg-background p-4"><button type="button" title="Home" aria-label="Home" aria-current="page" class="inline-flex size-9 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-5 bg-accent text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button><div role="separator" class="h-px w-9 shrink-0 bg-border"></div><button type="button" title="More" aria-label="More" class="inline-flex size-9 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-5 text-muted-foreground hover:bg-accent hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button><div class="mt-auto flex flex-col items-center gap-1"><button type="button" title="Settings" aria-label="Settings" class="inline-flex size-9 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-5 text-muted-foreground hover:bg-accent hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button></div></nav>'
+    },
+    streamingtext: {
+      name: "StreamingText",
+      html: '<span aria-live="polite" class="whitespace-pre-wrap break-words">Hello<span aria-hidden="true" class="ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] rounded-full bg-current align-baseline animate-nx-caret-blink"></span></span>'
+    },
+    typingindicator: {
+      name: "TypingIndicator",
+      html: '<div role="status" aria-label="Assistant is typing" class="inline-flex items-center gap-1 rounded-2xl bg-muted px-3 py-2 text-muted-foreground"><span aria-hidden="true" class="size-1.5 rounded-full bg-current animate-nx-typing" style="animation-delay:0s"></span><span aria-hidden="true" class="size-1.5 rounded-full bg-current animate-nx-typing" style="animation-delay:0.15s"></span><span aria-hidden="true" class="size-1.5 rounded-full bg-current animate-nx-typing" style="animation-delay:0.3s"></span></div>'
+    },
+    toolcall: {
+      name: "ToolCall",
+      html: '<div class="overflow-hidden rounded-md border border-border bg-background text-sm animate-nx-fade-in"><button type="button" aria-expanded="true" class="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right size-4 shrink-0 text-muted-foreground transition-transform rotate-90"><path d="m9 18 6-6-6-6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench size-4 shrink-0 text-muted-foreground"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg><span class="font-mono font-medium text-foreground">search</span><span class="ml-auto inline-flex items-center gap-1 text-xs text-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3.5"><path d="M20 6 9 17l-5-5"></path></svg>Completed</span></button><div class="space-y-3 border-t border-border px-3 py-2.5"><div><p class="mb-1 text-xs font-medium text-muted-foreground">Arguments</p><pre class="overflow-x-auto rounded bg-muted/50 p-2 font-mono text-xs text-foreground">{\n  &quot;q&quot;: &quot;x&quot;\n}</pre></div><div><p class="mb-1 text-xs font-medium text-muted-foreground">Result</p><pre class="overflow-x-auto rounded bg-muted/50 p-2 font-mono text-xs text-foreground">ok</pre></div></div></div>'
+    },
+    reasoning: {
+      name: "Reasoning",
+      html: '<div class="rounded-md border border-dashed border-border bg-muted/30"><button type="button" aria-expanded="true" class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain size-4 shrink-0"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M19.938 10.5a4 4 0 0 1 .585.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M19.967 17.484A4 4 0 0 1 18 18"></path></svg><span class="font-medium">Reasoning</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right ml-auto size-4 transition-transform rotate-90"><path d="m9 18 6-6-6-6"></path></svg></button><div class="whitespace-pre-wrap break-words border-t border-border px-3 py-2 text-sm italic text-muted-foreground">thinking\u2026</div></div>'
+    },
+    codeblock: {
+      name: "CodeBlock",
+      html: '<div class="group relative overflow-hidden rounded-md border border-border bg-muted/40 text-sm"><div class="flex items-center justify-between border-b border-border px-3 py-1.5"><span class="font-mono text-xs text-muted-foreground">ts</span><button type="button" aria-label="Copy code" class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy size-3.5"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>Copy</button></div><pre class="overflow-x-auto p-3"><code class="font-mono text-[13px] leading-relaxed text-foreground">const x = 1;</code></pre></div>'
+    },
+    inputbar: {
+      name: "InputBar",
+      html: '<div class="flex items-end gap-2 rounded-2xl border border-input bg-background p-2 shadow-sm focus-within:ring-2 focus-within:ring-ring"><textarea rows="1" placeholder="Message the agent\u2026" class="max-h-[inherit] flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50" aria-label="Message"></textarea><button type="button" disabled="" aria-label="Send message" class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up size-4"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div>'
+    },
+    message: {
+      name: "Message",
+      html: '<div data-role="assistant" class="flex w-full gap-3 animate-nx-fade-in flex-row"><div role="img" aria-label="assistant avatar" class="flex size-8 shrink-0 items-center justify-center overflow-hidden text-xs font-semibold rounded-full bg-muted text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot size-4"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-start"><div class="rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground"><span class="whitespace-pre-wrap break-words">Hi there</span></div></div></div>'
+    },
+    thread: {
+      name: "Thread",
+      html: '<div class="relative flex min-h-0 flex-1 flex-col"><div class="flex-1 space-y-4 overflow-y-auto scroll-smooth p-4"><div data-role="user" class="flex w-full gap-3 animate-nx-fade-in flex-row-reverse"><div role="img" aria-label="user avatar" class="flex size-8 shrink-0 items-center justify-center overflow-hidden text-xs font-semibold rounded-full bg-primary text-primary-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user size-4"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-end"><div class="rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-primary text-primary-foreground"><span class="whitespace-pre-wrap break-words">Hello</span></div></div></div><div data-role="assistant" class="flex w-full gap-3 animate-nx-fade-in flex-row"><div role="img" aria-label="assistant avatar" class="flex size-8 shrink-0 items-center justify-center overflow-hidden text-xs font-semibold rounded-full bg-muted text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot size-4"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-start"><div class="rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground"><span class="whitespace-pre-wrap break-words">Hi</span></div></div></div></div></div>'
+    },
+    linkbutton: {
+      name: "LinkButton",
+      html: '<a href="#" class="inline-flex items-center justify-center gap-2 rounded-lg text-sm font-semibold text-foreground underline decoration-from-font underline-offset-2 transition-opacity hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Learn more</a>'
+    },
+    checkbox: {
+      name: "Checkbox",
+      html: '<button type="button" role="checkbox" aria-checked="true" data-state="checked" class="inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 border-primary bg-primary text-primary-foreground" aria-label="Accept"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3"><path d="M20 6 9 17l-5-5"></path></svg></button>'
+    },
+    tabs: {
+      name: "Tabs",
+      html: '<div data-orientation="horizontal" class="flex flex-col gap-3"><div role="tablist" aria-orientation="horizontal" class="gap-1 rounded-lg bg-muted p-1 text-muted-foreground inline-flex items-center"><button type="button" role="tab" id=":R0:-trigger-a" aria-selected="true" aria-controls=":R0:-content-a" tabindex="0" class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 bg-background text-foreground shadow-sm">A</button><button type="button" role="tab" id=":R0:-trigger-b" aria-selected="false" aria-controls=":R0:-content-b" tabindex="-1" class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 hover:text-foreground">B</button></div><div role="tabpanel" id=":R0:-content-a" aria-labelledby=":R0:-trigger-a" tabindex="0" class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Panel A</div></div>'
+    },
+    menu: {
+      name: "Menu",
+      html: '<div role="menu" class="min-w-[12rem] rounded-lg border border-border bg-background p-1 text-foreground shadow-md"><button type="button" role="menuitem" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 text-foreground hover:bg-accent"><span class="flex-1 truncate">Try again</span></button><div role="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" role="menuitem" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 text-foreground hover:bg-accent"><span class="flex-1 truncate">Delete</span></button></div>'
+    },
+    suggestions: {
+      name: "Suggestions",
+      html: '<div class="flex flex-wrap gap-2"><button type="button" class="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-muted px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Highlights</button><button type="button" class="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-muted px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Action items</button></div>'
+    },
+    suggestionchip: {
+      name: "SuggestionChip",
+      html: '<button type="button" class="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-muted px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Show highlights</button>'
+    },
+    richcheckboxgroup: {
+      name: "RichCheckboxGroup",
+      html: '<div role="group" aria-label="Include" class="flex flex-col gap-2"><button type="button" role="checkbox" aria-checked="true" class="flex w-full items-start gap-2 rounded-[10px] border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 border-primary/40 bg-primary/[0.03]"><span aria-hidden="true" class="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors border-primary bg-primary text-primary-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="min-w-0 flex-1"><span class="block text-sm text-foreground">Summary</span><span class="block text-xs text-muted-foreground">AI summary</span></span></button><button type="button" role="checkbox" aria-checked="false" class="flex w-full items-start gap-2 rounded-[10px] border bg-card px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 border-border hover:bg-accent/50"><span aria-hidden="true" class="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors border-input bg-background"></span><span class="min-w-0 flex-1"><span class="block text-sm text-foreground">Transcript</span><span class="block text-xs text-muted-foreground">Full text</span></span></button></div>'
+    },
+    radiogroup: {
+      name: "RadioGroup",
+      html: '<div role="radiogroup" aria-label="Choice" class="flex flex-col gap-2"><button type="button" role="radio" aria-checked="true" class="inline-flex size-4 shrink-0 items-center justify-center rounded-full border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 border-primary" aria-label="A"><span class="size-2 rounded-full bg-primary"></span></button><button type="button" role="radio" aria-checked="false" class="inline-flex size-4 shrink-0 items-center justify-center rounded-full border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 border-input bg-background" aria-label="B"></button></div>'
+    },
+    select: {
+      name: "Select",
+      html: '<div class="relative inline-flex w-full"><select class="h-9 w-full appearance-none rounded-lg border border-input bg-background pl-3 pr-8 text-sm text-foreground shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" aria-label="Speed"><option value="a" selected="">Instant</option><option value="b">Balanced</option></select><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"><path d="m6 9 6 6 6-6"></path></svg></div>'
+    },
+    table: {
+      name: "Table",
+      html: '<div class="relative w-full overflow-x-auto"><table class="w-full caption-bottom text-sm"><thead class="[&amp;_tr]:border-b [&amp;_tr]:border-border"><tr class="border-b border-border transition-colors hover:bg-muted/50"><th scope="col" class="h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground">Name</th><th scope="col" class="h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground">Status</th></tr></thead><tbody class="[&amp;_tr:last-child]:border-0"><tr class="border-b border-border transition-colors hover:bg-muted/50"><td class="px-4 py-2.5 align-middle text-foreground">Sync</td><td class="px-4 py-2.5 align-middle text-foreground">Done</td></tr></tbody></table></div>'
+    },
+    dialog: {
+      name: "Dialog",
+      html: '<div class="fixed inset-0 z-50 flex items-center justify-center p-4"><div aria-hidden="true" class="absolute inset-0 bg-foreground/50 animate-nx-fade-in"></div><div role="dialog" aria-modal="true" aria-labelledby=":R0:-title" aria-describedby=":R0:-desc" tabindex="-1" class="relative z-10 flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg outline-none animate-nx-fade-in"><div class="flex flex-col gap-1"><h2 id=":R0:-title" class="text-xl font-semibold text-foreground">Save this as memory?</h2><p id=":R0:-desc" class="text-sm text-muted-foreground">This can personalize future actions.</p></div><div class="flex items-center justify-end gap-2 pt-2"><span>Footer</span></div></div></div>'
+    },
+    modularconsent: {
+      name: "ModularConsent",
+      html: '<div class="flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg"><div class="flex flex-col gap-1"><h2 class="text-xl font-semibold text-foreground">Allow workspace access?</h2><p class="text-sm text-muted-foreground">Choose what the assistant can access.</p></div><div role="group" aria-label="Allow workspace access?" class="flex flex-col gap-2"><button type="button" role="checkbox" aria-checked="true" class="flex w-full items-start gap-2 rounded-[10px] border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 border-primary/40 bg-primary/[0.03]"><span aria-hidden="true" class="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors border-primary bg-primary text-primary-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="min-w-0 flex-1"><span class="block text-sm text-foreground">Read files</span><span class="block text-xs text-muted-foreground">Attached files only</span></span></button><button type="button" role="checkbox" aria-checked="false" class="flex w-full items-start gap-2 rounded-[10px] border bg-card px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 border-border hover:bg-accent/50"><span aria-hidden="true" class="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors border-input bg-background"></span><span class="min-w-0 flex-1"><span class="block text-sm text-foreground">Run actions</span><span class="block text-xs text-muted-foreground">Ask before connecting tools</span></span></button></div><div class="flex items-center justify-end gap-2"><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 text-foreground hover:bg-accent h-9 rounded-lg px-4 text-sm">Not now</button><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 border border-border bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-9 rounded-lg px-4 text-sm">Allow selected</button></div></div>'
+    },
+    agentcomposer: {
+      name: "AgentComposer",
+      html: '<div class="flex flex-col gap-3 rounded-xl border border-input bg-background p-3 shadow-sm focus-within:ring-2 focus-within:ring-ring" aria-label="Task"><textarea rows="1" placeholder="Describe a task, workflow or goal\u2026" aria-label="Describe a task, workflow or goal\u2026" class="max-h-[inherit] w-full resize-none bg-transparent px-1 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"></textarea><div class="flex items-center justify-between gap-2"><div class="flex items-center gap-1"></div><div class="flex items-center gap-2"><button type="button" disabled="" aria-label="Send" class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up size-4"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div></div></div>'
+    },
+    navpanel: {
+      name: "NavPanel",
+      html: '<nav class="flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-r border-border bg-muted/30 py-4"><div class="flex items-center gap-2 px-4"><span class="flex-1 text-xs font-semibold uppercase tracking-wide text-foreground">Library</span><span class="text-[10px] text-muted-foreground">84 patterns</span></div><div class="flex flex-col gap-0.5"><button type="button" aria-expanded="true" class="flex h-7 items-center gap-2 px-4 text-left text-sm font-semibold text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><span class="flex-1">Onboarding</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 text-muted-foreground transition-transform rotate-180"><path d="m6 9 6 6 6-6"></path></svg></button><div class="flex flex-col"><a aria-current="page" class="mx-2 flex h-7 cursor-pointer items-center rounded px-2 text-xs transition-colors bg-accent font-medium text-foreground">Disclosure</a><a class="mx-2 flex h-7 cursor-pointer items-center rounded px-2 text-xs transition-colors text-muted-foreground hover:bg-accent/60 hover:text-foreground">Consent</a></div></div></nav>'
+    },
+    progress: {
+      name: "Progress",
+      html: '<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" class="w-full overflow-hidden rounded-full bg-muted h-2.5" aria-label="Upload progress"><div class="h-full rounded-full bg-primary transition-[width] duration-300 ease-out" style="width:60%"></div></div>'
+    },
+    breadcrumb: {
+      name: "Breadcrumb",
+      html: '<nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground"><li class="inline-flex items-center gap-1.5"><a class="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" href="#">Home</a></li><li role="presentation" aria-hidden="true" class="[&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg></li><li class="inline-flex items-center gap-1.5"><span role="link" aria-disabled="true" aria-current="page" class="font-medium text-foreground">Details</span></li></ol></nav>'
+    },
+    accordion: {
+      name: "Accordion",
+      html: '<div class="divide-y divide-border rounded-lg border border-border"><div><button type="button" id=":R0:-h" aria-expanded="true" aria-controls=":R0:-p" class="flex w-full items-center justify-between gap-2 px-4 py-3 text-left text-sm font-medium text-foreground transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Question<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4 shrink-0 text-muted-foreground transition-transform rotate-180"><path d="m6 9 6 6 6-6"></path></svg></button><div role="region" id=":R0:-p" aria-labelledby=":R0:-h" class="px-4 pb-3 text-sm text-muted-foreground">Answer</div></div></div>'
+    },
+    popover: {
+      name: "Popover",
+      html: '<div class="relative inline-block"><button type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls=":R0:">Open</button><div id=":R0:" class="absolute top-full z-50 mt-2 min-w-[12rem] rounded-lg border border-border bg-background p-4 text-foreground shadow-md outline-none animate-nx-fade-in left-0">Popover body</div></div>'
+    },
+    toast: {
+      name: "Toast",
+      html: '<div role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-lg border border-border bg-background p-4 shadow-lg animate-nx-fade-in"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check mt-0.5 size-4 shrink-0 text-success"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><div class="min-w-0 flex-1 space-y-1"><p class="text-sm font-medium text-foreground">Saved</p><p class="text-sm text-muted-foreground">Done</p></div><button type="button" aria-label="Dismiss" class="-mr-1 -mt-1 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x size-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div>'
+    },
+    followup: {
+      name: "FollowUp",
+      html: '<div class="flex flex-col gap-4 rounded-lg border border-border bg-background p-6"><div class="flex flex-col gap-4 rounded-lg border border-border bg-muted/50 p-4"><div class="text-base leading-relaxed text-foreground">Three deals are at risk this quarter.</div><button type="button" class="inline-flex w-fit items-center gap-2 rounded-full border border-dashed border-border bg-background px-4 py-2 text-xs transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><span class="text-muted-foreground">Assumed:</span><span class="font-semibold text-foreground">Q3</span><span class="text-muted-foreground">tap to change</span></button></div></div>'
+    },
+    sheet: {
+      name: "Sheet",
+      html: '<div class="fixed inset-0 z-50"><div aria-hidden="true" class="absolute inset-0 bg-foreground/50 animate-nx-fade-in"></div><div role="dialog" aria-modal="true" aria-labelledby=":R0:-title" aria-describedby=":R0:-desc" tabindex="-1" class="absolute flex flex-col border-border bg-background shadow-lg outline-none animate-nx-fade-in inset-y-0 right-0 h-full w-full max-w-sm border-l"><div class="flex items-center justify-between gap-4 border-b border-border p-4"><div class="min-w-0 flex-1"><h2 id=":R0:-title" class="text-sm font-semibold text-foreground">Sources</h2></div><button type="button" aria-label="Close" class="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x size-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div><div class="min-h-0 flex-1 overflow-y-auto p-4">Body</div><div class="flex items-center justify-end gap-2 border-t border-border p-4"><span>Footer</span></div></div></div>'
+    },
+    mediacard: {
+      name: "MediaCard",
+      html: '<div class="overflow-hidden rounded-xl border border-border bg-background shadow-sm flex flex-col"><div class="shrink-0 overflow-hidden bg-muted aspect-video w-full"><img src="/x.png" alt="" class="size-full object-cover"/></div><div class="flex min-w-0 flex-1 flex-col gap-1 p-4"><p class="text-base font-medium text-foreground">Variant 1</p><p class="text-sm leading-relaxed text-muted-foreground">A media card.</p></div></div>'
+    },
+    pageheader: {
+      name: "PageHeader",
+      html: '<header class="flex flex-col gap-4"><div class="flex flex-wrap items-start justify-between gap-4"><div class="min-w-0"><h1 class="text-4xl font-normal tracking-tight text-foreground sm:text-5xl">Disclosure</h1><p class="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">A clear AI label.</p></div></div></header>'
+    },
+    relatedpatternsgrid: {
+      name: "RelatedPatternsGrid",
+      html: '<div class="grid gap-4" style="grid-template-columns:repeat(2, minmax(0, 1fr))"><a class="flex flex-col gap-1 rounded-md border border-border bg-background p-3.5 text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" href="#"><span class="text-xs font-semibold text-foreground">Consent</span><span class="text-xs text-muted-foreground">Onboarding</span></a><a class="flex flex-col gap-1 rounded-md border border-border bg-background p-3.5 text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" href="#"><span class="text-xs font-semibold text-foreground">Caveat</span><span class="text-xs text-muted-foreground">Onboarding</span></a></div>'
+    },
+    rightsidebar: {
+      name: "RightSidebar",
+      html: '<nav aria-label="On this page" class="flex w-44 shrink-0 flex-col py-8 pl-2 pr-4"><p class="mb-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">On this page</p><a aria-current="location" class="flex items-center gap-1.5 py-1.5 text-xs transition-colors font-medium text-info" href="#a"><span aria-hidden="true" class="h-4 w-0.5 shrink-0 rounded-full bg-info"></span>Patterns</a><div class="flex flex-col gap-0.5 pb-3"><span class="text-[10px] text-muted-foreground">Stage</span><span class="text-xs font-medium text-foreground">Onboarding</span></div></nav>'
+    },
+    label: {
+      name: "Label",
+      html: '<label class="text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="nm">Name</label><input id="nm"/>'
+    },
+    input: {
+      name: "Input",
+      html: '<input type="text" class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground" aria-label="Name"/>'
+    },
+    textarea: {
+      name: "Textarea",
+      html: '<textarea rows="3" class="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50" aria-label="Message"></textarea>'
+    },
+    skeleton: {
+      name: "Skeleton",
+      html: '<div aria-hidden="true" class="animate-pulse bg-muted rounded-md h-4 w-20"></div>'
+    },
+    toggle: {
+      name: "Toggle",
+      html: '<button type="button" aria-pressed="false" data-state="off" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground h-9 min-w-9 px-2" aria-label="Bold">B</button>'
+    },
+    togglegroup: {
+      name: "ToggleGroup",
+      html: '<div role="group" class="inline-flex items-center gap-1" aria-label="Alignment"><button type="button" aria-pressed="true" data-state="on" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground h-9 min-w-9 px-2" aria-label="Left">L</button><button type="button" aria-pressed="false" data-state="off" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground h-9 min-w-9 px-2" aria-label="Center">C</button></div>'
+    },
+    slider: {
+      name: "Slider",
+      html: '<div class="relative flex w-full touch-none select-none items-center py-2"><div class="relative h-1.5 w-full grow cursor-pointer rounded-full bg-muted"><div class="absolute h-full rounded-full bg-primary" style="width:40%"></div><div role="slider" tabindex="0" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" aria-orientation="horizontal" class="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary bg-background shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background" style="left:40%"></div></div></div>'
+    },
+    aspectratio: {
+      name: "AspectRatio",
+      html: '<div class="relative w-40 bg-muted" style="aspect-ratio:1.7777777777777777"></div>'
+    },
+    collapsible: {
+      name: "Collapsible",
+      html: '<div class="" data-state="open"><button type="button" id=":R0:-trigger" aria-expanded="true" aria-controls=":R0:-content" class="flex w-full items-center justify-between gap-2 text-sm font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50">More<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 text-muted-foreground transition-transform rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div id=":R0:-content" role="region" aria-labelledby=":R0:-trigger" class="animate-nx-fade-in pt-1.5 text-sm text-muted-foreground">Details</div></div>'
+    },
+    hovercard: {
+      name: "HoverCard",
+      html: '<div class="relative inline-block"><button type="button">@n</button></div>'
+    },
+    scrollarea: {
+      name: "ScrollArea",
+      html: '<div class="relative overflow-hidden h-24 w-40"><div class="h-full w-full rounded-[inherit] [scrollbar-width:thin] [scrollbar-color:hsl(var(--nx-border))_transparent] [&amp;::-webkit-scrollbar]:h-2 [&amp;::-webkit-scrollbar]:w-2 [&amp;::-webkit-scrollbar-thumb]:rounded-full [&amp;::-webkit-scrollbar-thumb]:bg-border [&amp;::-webkit-scrollbar-track]:bg-transparent overflow-y-auto overflow-x-hidden"><div class="text-sm">Scrollable content</div></div></div>'
+    },
+    pagination: {
+      name: "Pagination",
+      html: '<nav role="navigation" aria-label="Pagination" class="flex items-center gap-1"><button type="button" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 gap-1 hover:bg-muted" disabled="" aria-label="Go to previous page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left h-4 w-4" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></button><button type="button" aria-current="page" aria-label="Go to page 1" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 border border-input bg-accent text-accent-foreground">1</button><button type="button" aria-label="Go to page 2" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 hover:bg-muted">2</button><button type="button" aria-label="Go to page 3" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 hover:bg-muted">3</button><button type="button" aria-label="Go to page 4" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 hover:bg-muted">4</button><button type="button" aria-label="Go to page 5" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 hover:bg-muted">5</button><button type="button" class="inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 gap-1 hover:bg-muted" aria-label="Go to next page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></nav>'
+    },
+    alertdialog: {
+      name: "AlertDialog",
+      html: '<div class="fixed inset-0 z-50 flex items-center justify-center p-4"><div aria-hidden="true" class="absolute inset-0 animate-nx-fade-in bg-foreground/50"></div><div role="alertdialog" aria-modal="true" aria-labelledby=":R0:-title" aria-describedby=":R0:-desc" class="relative z-10 flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg outline-none animate-nx-fade-in"><div class="flex flex-col gap-1"><h2 id=":R0:-title" class="text-lg font-semibold text-foreground">Delete this?</h2><p id=":R0:-desc" class="text-sm text-muted-foreground">This cannot be undone.</p></div><div class="flex items-center justify-end gap-2 pt-2"><button type="button" class="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background">Cancel</button><button type="button" class="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive">Delete</button></div></div></div>'
+    },
+    command: {
+      name: "Command",
+      html: '<div class="flex flex-col overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-md w-72"><div class="flex items-center gap-2 border-b border-border px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input type="text" role="combobox" aria-expanded="true" aria-controls="command-list" placeholder="Type a command or search\u2026" class="flex h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground" aria-label="Command search" value=""/></div><div id="command-list" role="listbox" class="max-h-72 overflow-y-auto overflow-x-hidden p-1"><div role="group" class="overflow-hidden py-1"><div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Suggestions</div><div data-command-item="" data-value="New chat" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none">New chat</div><div data-command-item="" data-value="Open settings" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none">Open settings</div></div></div></div>'
+    },
+    combobox: {
+      name: "Combobox",
+      html: '<div class="relative inline-block"><button type="button" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Framework" class="flex h-9 w-56 items-center justify-between gap-2 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 text-muted-foreground"><span class="truncate">Select\u2026</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-4 w-4 shrink-0 opacity-50" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></div>'
+    },
+    contextmenu: {
+      name: "ContextMenu",
+      html: "<div><div>Right-click area</div></div>"
+    },
+    inputotp: {
+      name: "InputOtp",
+      html: '<div role="group" aria-label="Verification code" class="flex items-center gap-2"><input type="text" inputMode="numeric" autoComplete="one-time-code" maxLength="1" aria-label="Digit 1" class="h-11 w-10 rounded-md border border-input bg-background text-center text-lg font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" value=""/><input type="text" inputMode="numeric" autoComplete="off" maxLength="1" aria-label="Digit 2" class="h-11 w-10 rounded-md border border-input bg-background text-center text-lg font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" value=""/><input type="text" inputMode="numeric" autoComplete="off" maxLength="1" aria-label="Digit 3" class="h-11 w-10 rounded-md border border-input bg-background text-center text-lg font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" value=""/><input type="text" inputMode="numeric" autoComplete="off" maxLength="1" aria-label="Digit 4" class="h-11 w-10 rounded-md border border-input bg-background text-center text-lg font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" value=""/></div>'
+    },
+    menubar: {
+      name: "Menubar",
+      html: '<div role="menubar" class="flex items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm"><div class="relative"><button type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" class="flex items-center rounded-sm px-3 py-1 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring text-foreground hover:bg-accent">File</button></div></div>'
+    },
+    navigationmenu: {
+      name: "NavigationMenu",
+      html: '<nav class="relative flex justify-center"><ul class="flex items-center gap-1"><li class="relative"><button type="button" aria-expanded="false" aria-haspopup="menu" class="inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring">Products<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 transition-transform" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li><li class="relative"><a class="block rounded-md px-3 py-2 text-sm text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" href="#">Docs</a></li></ul></nav>'
+    },
+    resizable: {
+      name: "Resizable",
+      html: '<div data-direction="horizontal" class="flex h-40 w-80"><div data-resizable-panel="" class="overflow-auto" style="flex:1 1 0%">Left</div><div role="separator" tabindex="0" aria-label="Resize panels" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="relative flex shrink-0 items-center justify-center bg-border outline-none focus-visible:ring-2 focus-visible:ring-ring w-px cursor-col-resize"><span class="z-10 flex items-center justify-center rounded-sm border border-border bg-background h-6 w-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical h-3 w-3 text-muted-foreground" aria-hidden="true"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></span></div><div data-resizable-panel="" class="overflow-auto" style="flex:1 1 0%">Right</div></div>'
+    },
+    calendar: {
+      name: "Calendar",
+      html: '<div class="rdp p-3"><div class="flex flex-col sm:flex-row gap-4"><div class="flex flex-col gap-4 rdp-caption_start rdp-caption_end"><div class="flex justify-center pt-1 relative items-center"><div class="text-sm font-medium text-foreground" aria-live="polite" role="presentation">September 2026</div><div class="flex items-center gap-1"><button name="previous-month" aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent p-0 text-foreground opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none disabled:opacity-30 absolute left-1" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left h-4 w-4"><path d="m15 18-6-6 6-6"></path></svg></button><button name="next-month" aria-label="Go to next month" class="rdp-button_reset rdp-button inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent p-0 text-foreground opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none disabled:opacity-30 absolute right-1" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4"><path d="m9 18 6-6-6-6"></path></svg></button></div></div><table class="w-full border-collapse space-y-1" role="grid"><thead class="rdp-head"><tr class="flex"><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Sunday">Su</th><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Monday">Mo</th><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Tuesday">Tu</th><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Wednesday">We</th><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Thursday">Th</th><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Friday">Fr</th><th scope="col" class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground" aria-label="Saturday">Sa</th></tr></thead><tbody class="rdp-tbody"><tr class="flex w-full mt-2"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">30</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">31</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">1</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">2</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">3</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">4</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">5</button></td></tr><tr class="flex w-full mt-2"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">6</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">7</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">8</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">9</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">10</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">11</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">12</button></td></tr><tr class="flex w-full mt-2"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">13</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">14</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">15</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">16</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">17</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">18</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">19</button></td></tr><tr class="flex w-full mt-2"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">20</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">21</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">22</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">23</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">24</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">25</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">26</button></td></tr><tr class="flex w-full mt-2"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">27</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 bg-accent text-accent-foreground" role="gridcell" tabindex="0" type="button">28</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">29</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">30</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">1</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">2</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">3</button></td></tr></tbody></table></div></div></div>'
+    },
+    datepicker: {
+      name: "DatePicker",
+      html: '<div class="relative inline-block"><button type="button" aria-label="Deadline" aria-haspopup="dialog" aria-expanded="false" class="flex h-9 w-60 items-center gap-2 rounded-md border border-input bg-background px-3 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4 shrink-0 opacity-70" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><span class="truncate">Pick a date</span></button></div>'
+    },
+    carousel: {
+      name: "Carousel",
+      html: '<div role="region" aria-roledescription="carousel" class="relative w-64"><div class="overflow-hidden"><div class="flex -ml-4"><div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full pl-4">Slide 1</div><div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full pl-4">Slide 2</div></div></div><button type="button" aria-label="Previous slide" disabled="" class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring absolute -left-4 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left h-4 w-4"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><button type="button" aria-label="Next slide" disabled="" class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring absolute -right-4 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div>'
+    },
+    chart: {
+      name: "Chart",
+      html: '<div data-chart="" class="flex aspect-video justify-center text-xs [&amp;_.recharts-cartesian-grid_line]:stroke-border/50 [&amp;_.recharts-text]:fill-muted-foreground w-64" style="--color-desktop:hsl(var(--nx-info))"><div class="recharts-responsive-container" style="width:100%;height:100%;min-width:0"></div></div>'
+    },
+    datatable: {
+      name: "DataTable",
+      html: '<div class="w-full"><div class="overflow-hidden rounded-md border border-border"><table class="w-full caption-bottom text-sm"><thead class="[&amp;_tr]:border-b [&amp;_tr]:border-border"><tr class="bg-muted/40"><th class="h-10 px-3 text-left align-middle font-medium text-muted-foreground"><button type="button" class="inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Invoice<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-50"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th class="h-10 px-3 text-left align-middle font-medium text-muted-foreground"><button type="button" class="inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Amount<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-50"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th></tr></thead><tbody><tr class="border-b border-border transition-colors hover:bg-muted/40"><td class="p-3 align-middle text-foreground">INV-001</td><td class="p-3 align-middle text-foreground">250</td></tr><tr class="border-b border-border transition-colors hover:bg-muted/40"><td class="p-3 align-middle text-foreground">INV-002</td><td class="p-3 align-middle text-foreground">150</td></tr></tbody></table></div></div>'
+    },
+    form: {
+      name: "Form",
+      html: '<form><div class="space-y-2"><label for=":R0:-form-item" class="text-sm font-medium leading-none text-foreground">Username</label><input name="username" id=":R0:-form-item" aria-describedby=":R0:-form-item-description" value=""/><p id=":R0:-form-item-description" class="text-sm text-muted-foreground">Your public name.</p></div></form>'
+    },
+    md3button: {
+      name: "Md3Button",
+      html: '<button type="button" class="relative inline-flex h-10 items-center justify-center gap-2 overflow-hidden rounded-full text-sm font-medium transition-shadow px-6 [&amp;_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none bg-md-primary text-md-on-primary hover:shadow-md-1"><span class="relative">Save</span></button>'
+    },
+    md3iconbutton: {
+      name: "Md3IconButton",
+      html: '<button type="button" class="relative inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] bg-transparent text-md-on-surface-variant" aria-label="Favorite"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></button>'
+    },
+    md3fab: {
+      name: "Md3Fab",
+      html: '<button type="button" class="relative inline-flex items-center justify-center overflow-hidden shadow-md-3 transition-shadow hover:shadow-md-4 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none bg-md-primary-container text-md-on-primary-container h-14 w-14 rounded-md-lg [&amp;_svg]:size-6" aria-label="Add"><span class="relative shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></button>'
+    },
+    md3textfield: {
+      name: "Md3TextField",
+      html: '<div class="w-full"><div class="relative"><input id=":R0:" placeholder=" " aria-describedby=":R0:-support" class="peer h-14 w-full text-base text-md-on-surface outline-none transition-colors placeholder:text-transparent disabled:cursor-not-allowed pl-4 pr-4 rounded-t-md-xs border-0 border-b-2 bg-md-surface-container-high pb-2 pt-6 border-md-on-surface-variant focus:border-md-primary"/><label for=":R0:" class="pointer-events-none absolute transition-all left-4 top-2 text-xs peer-placeholder-shown:text-base peer-placeholder-shown:text-md-on-surface-variant peer-placeholder-shown:top-4 peer-focus:top-2 peer-focus:text-xs text-md-on-surface-variant peer-focus:text-md-primary">Email</label></div><p id=":R0:-support" class="px-4 pt-1 text-xs text-md-on-surface-variant">Required</p></div>'
+    },
+    md3card: {
+      name: "Md3Card",
+      html: '<div class="relative overflow-hidden rounded-md-md bg-md-surface-container-low text-md-on-surface shadow-md-1 p-4">Card body</div>'
+    },
+    md3chip: {
+      name: "Md3Chip",
+      html: '<div class="flex gap-2"><button type="button" class="relative inline-flex h-8 items-center gap-1.5 overflow-hidden rounded-md-sm px-3 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] border border-md-outline bg-transparent text-md-on-surface-variant outline-none focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Assist</span></button><button type="button" aria-pressed="true" class="relative inline-flex h-8 items-center gap-1.5 overflow-hidden rounded-md-sm px-3 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] border border-transparent bg-md-secondary-container text-md-on-secondary-container outline-none focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check relative shrink-0" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg><span class="relative">Filter</span></button><span class="relative inline-flex h-8 items-center gap-1.5 overflow-hidden rounded-md-sm px-3 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] border border-md-outline bg-transparent text-md-on-surface-variant outline-none focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38] pr-1"><span class="relative">Input</span><button type="button" aria-label="Remove" class="relative z-10 ml-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full text-current hover:bg-current/10 [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></span></div>'
+    },
+    md3switch: {
+      name: "Md3Switch",
+      html: '<button type="button" role="switch" aria-checked="true" class="relative inline-flex h-8 w-[52px] shrink-0 items-center rounded-full border-2 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] border-md-primary bg-md-primary" aria-label="Wi-Fi"><span class="pointer-events-none flex items-center justify-center rounded-full transition-all translate-x-[22px] h-6 w-6 bg-md-on-primary text-md-on-primary-container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-4 w-4" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span></button>'
+    },
+    md3checkbox: {
+      name: "Md3Checkbox",
+      html: '<button type="button" role="checkbox" aria-checked="true" class="relative inline-flex h-10 w-10 items-center justify-center rounded-full outline-none before:absolute before:inset-0 before:rounded-full before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38]" aria-label="Accept"><span class="relative flex h-[18px] w-[18px] items-center justify-center rounded-[2px] border-2 transition-colors [&amp;_svg]:size-[14px] border-md-primary bg-md-primary text-md-on-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span></button>'
+    },
+    md3radio: {
+      name: "Md3Radio",
+      html: '<div role="radiogroup" aria-label="Choice" class="flex flex-col gap-1"><button type="button" role="radio" aria-checked="true" class="relative inline-flex h-10 w-10 items-center justify-center rounded-full outline-none before:absolute before:inset-0 before:rounded-full before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38]" aria-label="A"><span class="relative flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors border-md-primary"><span class="h-2.5 w-2.5 rounded-full bg-md-primary"></span></span></button><button type="button" role="radio" aria-checked="false" class="relative inline-flex h-10 w-10 items-center justify-center rounded-full outline-none before:absolute before:inset-0 before:rounded-full before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38]" aria-label="B"><span class="relative flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors border-md-on-surface-variant"></span></button></div>'
+    },
+    md3slider: {
+      name: "Md3Slider",
+      html: '<div class="relative flex w-full touch-none select-none items-center py-2"><div class="relative h-1 w-full grow cursor-pointer rounded-full bg-md-surface-variant"><div class="absolute h-full rounded-full bg-md-primary" style="width:50%"></div><div role="slider" tabindex="0" aria-label="Level" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-orientation="horizontal" class="absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-md-primary shadow-md-1 outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface" style="left:50%"></div></div></div>'
+    },
+    md3tabs: {
+      name: "Md3Tabs",
+      html: '<div><div role="tablist" class="flex border-b border-md-surface-variant bg-md-surface"><button type="button" role="tab" aria-selected="true" class="relative inline-flex h-12 flex-1 items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-primary"><span class="relative">A</span><span aria-hidden="true" class="absolute inset-x-0 bottom-0 mx-auto h-[3px] w-3/5 rounded-t-full bg-md-primary"></span></button><button type="button" role="tab" aria-selected="false" class="relative inline-flex h-12 flex-1 items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-on-surface-variant"><span class="relative">B</span></button></div><div role="tabpanel" class="p-4 text-md-on-surface">Panel A</div></div>'
+    },
+    md3navigationbar: {
+      name: "Md3NavigationBar",
+      html: '<nav class="flex h-20 items-stretch justify-around bg-md-surface-container px-2"><button type="button" aria-current="page" class="group flex flex-1 flex-col items-center justify-center gap-1 pt-3 pb-2 outline-none"><span class="relative flex h-8 w-16 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] bg-md-secondary-container text-md-on-secondary-container"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></span><span class="text-xs font-medium text-md-on-surface">Home</span></button><button type="button" class="group flex flex-1 flex-col items-center justify-center gap-1 pt-3 pb-2 outline-none"><span class="relative flex h-8 w-16 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] text-md-on-surface-variant"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><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-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span></span><span class="text-xs font-medium text-md-on-surface-variant">Search</span></button></nav>'
+    },
+    md3navigationrail: {
+      name: "Md3NavigationRail",
+      html: '<nav class="flex w-20 flex-col items-center gap-3 bg-md-surface py-4"><button type="button" aria-current="page" class="group flex w-full flex-col items-center gap-1 outline-none"><span class="relative flex h-8 w-14 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] bg-md-secondary-container text-md-on-secondary-container"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></span><span class="text-xs font-medium text-md-on-surface">Home</span></button><button type="button" class="group flex w-full flex-col items-center gap-1 outline-none"><span class="relative flex h-8 w-14 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] text-md-on-surface-variant"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><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-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span></span><span class="text-xs font-medium text-md-on-surface-variant">Search</span></button></nav>'
+    },
+    md3menu: {
+      name: "Md3Menu",
+      html: '<div role="menu" class="min-w-[12rem] rounded-md-xs bg-md-surface-container py-2 text-md-on-surface shadow-md-2"><button type="button" role="menuitem" class="relative flex h-12 w-full items-center gap-3 overflow-hidden px-3 text-left text-sm text-md-on-surface outline-none [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] disabled:pointer-events-none disabled:opacity-[0.38]"><span class="relative flex-1 truncate">New</span></button><button type="button" role="menuitem" class="relative flex h-12 w-full items-center gap-3 overflow-hidden px-3 text-left text-sm text-md-on-surface outline-none [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] disabled:pointer-events-none disabled:opacity-[0.38]"><span class="relative flex-1 truncate">Open</span></button></div>'
+    },
+    md3dialog: {
+      name: "Md3Dialog",
+      html: '<div class="fixed inset-0 z-50 flex items-center justify-center p-4"><div aria-hidden="true" class="absolute inset-0 bg-md-inverse-surface/40"></div><div role="dialog" aria-modal="true" aria-labelledby=":R0:-headline" tabindex="-1" class="relative z-10 flex w-full max-w-md flex-col rounded-md-xl bg-md-surface-container-high p-6 text-md-on-surface shadow-md-3 outline-none"><h2 id=":R0:-headline" class="text-2xl text-md-on-surface">Reset settings?</h2><div class="mt-4 text-sm text-md-on-surface-variant">This will restore defaults.</div></div></div>'
+    },
+    md3snackbar: {
+      name: "Md3Snackbar",
+      html: '<div role="status" aria-live="polite" class="flex min-h-12 items-center gap-2 rounded-md-xs bg-md-inverse-surface px-4 py-3 text-sm text-md-inverse-on-surface shadow-md-3"><span class="flex-1">Message archived</span><button type="button" class="relative -mr-2 shrink-0 overflow-hidden rounded-md-xs px-3 py-1.5 text-sm font-medium text-md-inverse-primary outline-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12]"><span class="relative">Undo</span></button></div>'
+    },
+    md3list: {
+      name: "Md3List",
+      html: '<div role="list" class="bg-md-surface py-2 text-md-on-surface"><div role="listitem" class="relative flex items-center gap-4 overflow-hidden px-4 py-3 text-left"><span class="relative min-w-0 flex-1"><span class="block truncate text-md-on-surface">Primary</span><span class="block truncate text-sm text-md-on-surface-variant">24 new</span></span></div><div role="listitem" class="relative flex items-center gap-4 overflow-hidden px-4 py-3 text-left"><span class="relative min-w-0 flex-1"><span class="block truncate text-md-on-surface">Starred</span><span class="block truncate text-sm text-md-on-surface-variant">3 items</span></span><span class="relative shrink-0 text-md-on-surface-variant">3</span></div></div>'
+    },
+    md3topappbar: {
+      name: "Md3TopAppBar",
+      html: '<header class="flex w-full bg-md-surface text-md-on-surface h-16 items-center gap-1 px-1"><div class="flex items-center gap-1"><h1 class="flex-1 truncate text-xl px-1">Inbox</h1></div></header>'
+    },
+    md3navigationdrawer: {
+      name: "Md3NavigationDrawer",
+      html: '<nav class="flex w-80 flex-col gap-1 bg-md-surface-container-low p-3 rounded-md-xl"><button type="button" aria-current="page" class="relative flex h-14 items-center gap-3 overflow-hidden rounded-full px-4 text-sm font-medium outline-none transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] bg-md-secondary-container text-md-on-secondary-container"><span class="relative shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span><span class="relative flex-1 truncate text-left">Inbox</span></button><button type="button" class="relative flex h-14 items-center gap-3 overflow-hidden rounded-full px-4 text-sm font-medium outline-none transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] text-md-on-surface-variant"><span class="relative shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><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-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span><span class="relative flex-1 truncate text-left">Sent</span></button></nav>'
+    },
+    md3bottomsheet: {
+      name: "Md3BottomSheet",
+      html: '<div class="fixed inset-0 z-50 flex items-end justify-center"><div aria-hidden="true" class="absolute inset-0 bg-md-inverse-surface/40"></div><div role="dialog" aria-modal="true" class="relative z-10 max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-t-md-xl bg-md-surface-container-low p-4 pb-8 text-md-on-surface shadow-md-3 animate-nx-fade-in" aria-label="Share options"><div class="mx-auto mb-4 h-1 w-8 shrink-0 rounded-full bg-md-on-surface-variant/40"></div>Sheet body</div></div>'
+    },
+    md3segmentedbutton: {
+      name: "Md3SegmentedButton",
+      html: '<div role="group" class="inline-flex h-10 divide-x divide-md-outline overflow-hidden rounded-full border border-md-outline"><button type="button" aria-pressed="false" class="relative inline-flex items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-on-surface"><span class="relative">Day</span></button><button type="button" aria-pressed="true" class="relative inline-flex items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary bg-md-secondary-container text-md-on-secondary-container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check relative shrink-0" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg><span class="relative">Week</span></button></div>'
+    },
+    md3badge: {
+      name: "Md3Badge",
+      html: '<span class="relative inline-flex"><span>Inbox</span><span class="z-10 inline-flex items-center justify-center rounded-full bg-md-error font-medium text-md-on-error h-4 min-w-4 px-1 text-[11px] leading-none absolute -right-1 -top-1">8</span></span>'
+    },
+    md3tooltip: {
+      name: "Md3Tooltip",
+      html: '<div class="relative inline-flex"><button type="button">Trigger</button></div>'
+    },
+    md3linearprogress: {
+      name: "Md3LinearProgress",
+      html: '<div role="progressbar" aria-label="Upload" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="h-1 w-full overflow-hidden rounded-full bg-md-surface-variant"><div class="h-full rounded-full bg-md-primary transition-[width]" style="width:60%"></div></div>'
+    },
+    md3circularprogress: {
+      name: "Md3CircularProgress",
+      html: '<div role="progressbar" aria-label="Sync" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="inline-flex" style="width:48px;height:48px"><svg width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="22" fill="none" stroke="hsl(var(--nx-md-surface-variant))" stroke-width="4"></circle><circle cx="24" cy="24" r="22" fill="none" stroke="hsl(var(--nx-md-primary))" stroke-width="4" stroke-linecap="round" stroke-dasharray="138.23007675795088" stroke-dashoffset="55.29203070318036" transform="rotate(-90 24 24)"></circle></svg></div>'
+    },
+    md3divider: {
+      name: "Md3Divider",
+      html: '<div role="separator" aria-orientation="horizontal" class="shrink-0 bg-md-outline-variant h-px w-full"></div>'
+    },
+    md3datepicker: {
+      name: "Md3DatePicker",
+      html: '<div class="relative inline-block"><button type="button" aria-label="Date" aria-haspopup="dialog" aria-expanded="false" class="flex h-14 w-64 items-center justify-between gap-2 rounded-md-xs border border-md-outline bg-transparent px-4 text-left text-base text-md-on-surface outline-none focus-visible:border-md-primary disabled:pointer-events-none disabled:opacity-[0.38]"><span class="flex flex-col justify-center"><span class="text-xs text-md-on-surface-variant">Date</span></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days h-5 w-5 shrink-0 text-md-on-surface-variant" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M8 14h.01"></path><path d="M12 14h.01"></path><path d="M16 14h.01"></path><path d="M8 18h.01"></path><path d="M12 18h.01"></path><path d="M16 18h.01"></path></svg></button></div>'
+    },
+    md3timepicker: {
+      name: "Md3TimePicker",
+      html: '<div class="inline-flex items-center gap-2"><input type="number" min="1" max="12" aria-label="Hour" class="h-14 w-16 rounded-md-sm bg-md-surface-container-high text-center text-2xl text-md-on-surface outline-none focus:ring-2 focus:ring-md-primary" value="9"/><span class="text-2xl text-md-on-surface">:</span><input type="number" min="0" max="59" aria-label="Minute" class="h-14 w-16 rounded-md-sm bg-md-surface-container-high text-center text-2xl text-md-on-surface outline-none focus:ring-2 focus:ring-md-primary" value="00"/><div class="ml-1 flex h-14 flex-col overflow-hidden rounded-md-sm border border-md-outline"><button type="button" class="flex-1 px-3 py-2 text-sm font-medium outline-none transition-colors bg-md-tertiary-container text-md-on-tertiary-container">AM</button><span class="h-px bg-md-outline"></span><button type="button" class="flex-1 px-3 py-2 text-sm font-medium outline-none transition-colors text-md-on-surface-variant">PM</button></div></div>'
+    },
+    md3search: {
+      name: "Md3Search",
+      html: '<div class="flex h-14 w-full items-center gap-3 rounded-full bg-md-surface-container-high px-4 text-md-on-surface"><span class="shrink-0 text-md-on-surface-variant [&amp;_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></span><input type="search" placeholder="Search" class="h-full flex-1 bg-transparent text-base outline-none placeholder:text-md-on-surface-variant [&amp;::-webkit-search-cancel-button]:appearance-none" aria-label="Search"/></div>'
+    },
+    md3banner: {
+      name: "Md3Banner",
+      html: '<div role="region" class="flex flex-col gap-3 border-b border-md-outline-variant bg-md-surface px-4 py-3 text-md-on-surface sm:flex-row sm:items-center"><div class="flex flex-1 items-start gap-4"><p class="text-sm text-md-on-surface-variant">Update available</p></div></div>'
+    }
+  }
+};
+
 // src/index.ts
+var snippets = html_snippets_default.snippets;
 var byName = /* @__PURE__ */ new Map();
 for (const p of catalog_default.packages) {
   byName.set(p.name.toLowerCase(), p);
@@ -5534,6 +6075,64 @@ function renderComponent(p) {
   }
   return lines.join("\n").trim();
 }
+function htmlFor(p) {
+  for (const c of p.components) {
+    const s = snippets[c.toLowerCase()];
+    if (s) return s.html;
+  }
+  return snippets[p.name.toLowerCase()]?.html;
+}
+function renderComponentHtml(p) {
+  const html = htmlFor(p);
+  const head = `# ${p.components[0] ?? p.name}  (HTML)`;
+  if (!html) {
+    return [
+      head,
+      "",
+      'No prebuilt HTML snippet for this component yet. Nucleux components are Tailwind-class based \u2014 use `get_component` with framework:"react" for the API, and `get_setup` with framework:"html" to set up styling.'
+    ].join("\n");
+  }
+  return [
+    head,
+    "",
+    p.description || p.summary,
+    "",
+    'Static HTML with Tailwind classes. Requires the Nucleux Tailwind preset + tokens CSS \u2014 run `get_setup` with framework:"html". Behavior (menus, dialogs, toggles) is not included; wire it up yourself or use the React package.',
+    "",
+    "```html",
+    html,
+    "```"
+  ].join("\n");
+}
+var htmlSetup = [
+  `# Nucleux setup for plain HTML (no React) \u2014 ${catalog_default.library}@${catalog_default.version}`,
+  "",
+  "Nucleux styling is Tailwind + CSS variables, so any HTML page can use the component markup.",
+  "",
+  "1) Install Tailwind + tokens:",
+  "```bash",
+  "npm i -D tailwindcss @nucleux/tokens",
+  "```",
+  "2) `tailwind.config.js`:",
+  "```js",
+  'module.exports = { presets: [require("@nucleux/tokens/preset")], content: ["./**/*.html"] };',
+  "```",
+  "3) `input.css` (pulls in the @tailwind layers + the --nx-* design tokens):",
+  "```css",
+  '@import "@nucleux/tokens/styles.css";',
+  "```",
+  "4) Build the stylesheet:",
+  "```bash",
+  "npx tailwindcss -i input.css -o output.css --minify",
+  "```",
+  '5) Link it, then paste component markup from `get_component` (framework:"html"):',
+  "```html",
+  '<link rel="stylesheet" href="output.css" />',
+  "```",
+  "",
+  'Dark theme: add `class="dark"` on `<html>`. The static HTML carries styling only \u2014 for',
+  'interactive behavior use the React packages (framework:"react").'
+].join("\n");
 var server = new McpServer({
   name: "nucleux",
   version: catalog_default.version
@@ -5555,11 +6154,12 @@ ${rows.join("\n")}`
 );
 server.tool(
   "get_component",
-  "Get full details for one component: description, install/import, exports, and the verbatim TypeScript Props interface(s). Accepts a component name (e.g. 'Badge') or package name (e.g. '@nucleux/badge').",
+  "Get full details for one component. framework:'react' (default) returns description, install/import, exports, and the verbatim TypeScript Props interface(s). framework:'html' returns a static HTML snippet with Tailwind classes for non-React projects. Accepts a component name (e.g. 'Badge') or package name (e.g. '@nucleux/badge').",
   {
-    name: z.string().describe("Component or package name, e.g. 'Badge', 'badge', or '@nucleux/badge'.")
+    name: z.string().describe("Component or package name, e.g. 'Badge', 'badge', or '@nucleux/badge'."),
+    framework: z.enum(["react", "html"]).optional().describe("Output format. 'react' (default) = TSX API + Props; 'html' = static HTML markup with Tailwind classes.")
   },
-  async ({ name }) => {
+  async ({ name, framework = "react" }) => {
     const p = resolve(name);
     if (!p) {
       const suggestions = catalog_default.packages.map((x) => x.components[0] ?? x.name).filter((n) => n.toLowerCase().includes(name.trim().toLowerCase())).slice(0, 8);
@@ -5567,7 +6167,7 @@ server.tool(
         `No component named "${name}".${suggestions.length ? ` Did you mean: ${suggestions.join(", ")}?` : " Use list_components to see all."}`
       );
     }
-    return text(renderComponent(p));
+    return text(framework === "html" ? renderComponentHtml(p) : renderComponent(p));
   }
 );
 server.tool(
@@ -5592,9 +6192,12 @@ server.tool(
 );
 server.tool(
   "get_setup",
-  "Get install and theming setup for Nucleux (Tailwind preset + tokens CSS, peer deps). Read this before writing code that imports @nucleux components.",
-  {},
-  async () => {
+  "Get install and theming setup for Nucleux. framework:'react' (default) covers the React packages (Tailwind preset + tokens CSS, peer deps). framework:'html' covers using Nucleux styling in a plain HTML project. Read this before writing code that uses @nucleux components.",
+  {
+    framework: z.enum(["react", "html"]).optional().describe("Setup target: 'react' (default) or 'html' (plain HTML, no React).")
+  },
+  async ({ framework = "react" }) => {
+    if (framework === "html") return text(htmlSetup);
     const s = catalog_default.setup;
     return text(
       [
@@ -5606,7 +6209,9 @@ server.tool(
         "## Theme",
         ...s.theme.map((t) => `- ${t}`),
         "",
-        s.note
+        s.note,
+        "",
+        'For plain HTML (no React), call get_setup with framework:"html".'
       ].join("\n")
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nucleux/mcp",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "Model Context Protocol server for the Nucleux agentic UI component library — lets AI coding agents discover, search, and correctly use @nucleux components.",
   "bin": {
@@ -45,7 +45,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "prebuild": "node ../../scripts/gen-mcp-catalog.mjs",
+    "prebuild": "node ../../scripts/gen-mcp-catalog.mjs && node ../../scripts/gen-html-snippets.mjs",
     "build": "tsup"
   }
 }