@nucleux/mcp 0.4.4 → 0.4.6

package/dist/index.js

@@ -23,7 +23,7 @@ var catalog_default = {
   counts: {
     components: 137,
     packages: 142,
-    examples: 7
+    examples: 8
   },
   packages: [
     {
@@ -5873,6 +5873,11 @@ export const Default: Story = {
       title: "Examples/E2E Agent Console",
       source: 'import { useState } from "react";\nimport type { Meta, StoryObj } from "@storybook/react";\nimport {\n  // MD3 agentic set (discovered via the MCP server)\n  Md3Thread,\n  Md3Message,\n  Md3ToolCall,\n  Md3AgentStep,\n  Md3AgentSteps,\n  Md3ActionPlan,\n  Md3ActionPlanStep,\n  Md3AgentComposer,\n  Md3Reasoning,\n  // shadcn agentic set (same APIs)\n  Thread,\n  Message,\n  ToolCall,\n  ActionPlan,\n  ActionPlanStep,\n  AgentComposer,\n} from "@nucleux/react";\n\n/**\n * End-to-end page assembled from components discovered via the @nucleux/mcp\n * server. Mirrors examples/e2e/agent-console.html (the HTML build) \u2014 same\n * components, React side.\n */\nconst meta = {\n  title: "Examples/E2E Agent Console",\n  parameters: { layout: "fullscreen" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction Console() {\n  const [value, setValue] = useState("");\n  return (\n    <div className="flex h-[32rem] flex-col rounded-md-lg bg-md-surface">\n      <Md3Thread className="flex-1">\n        <Md3Message role="user" content="Which Q3 renewals are at risk?" />\n        <Md3Reasoning content={"Check usage decline, then rank accounts by risk."} defaultOpen />\n        <Md3ToolCall\n          defaultOpen\n          toolCall={{\n            id: "1",\n            name: "search_crm",\n            status: "success",\n            args: { window: "90d", stage: "renewal" },\n            result: "3 accounts",\n          }}\n        />\n        <Md3AgentSteps>\n          <Md3AgentStep status="done" title="Pulled renewing accounts" />\n          <Md3AgentStep status="active" title="Scoring churn risk" progress={70} />\n          <Md3AgentStep status="pending" title="Draft outreach" />\n        </Md3AgentSteps>\n        <Md3Message role="assistant" content="Three enterprise accounts are trending toward churn." />\n        <Md3ActionPlan onAccept={() => {}} onEdit={() => {}} onReject={() => {}}>\n          <Md3ActionPlanStep title="Pull renewing accounts" />\n          <Md3ActionPlanStep title="Draft outreach emails" />\n        </Md3ActionPlan>\n      </Md3Thread>\n      <div className="p-3">\n        <Md3AgentComposer value={value} onValueChange={setValue} onSubmit={() => setValue("")} />\n      </div>\n    </div>\n  );\n}\n\n/** The MD3 agent console (React), built from MCP-discovered components. */\nexport const MaterialUI3: Story = {\n  render: () => (\n    <div className="mx-auto max-w-2xl p-6">\n      <Console />\n    </div>\n  ),\n};\n\n/** The same shadcn agentic components, and again under the Material UI 3 theme. */\nexport const BothLooks: Story = {\n  render: () => (\n    <div className="grid gap-6 p-6 md:grid-cols-2">\n      <div className="space-y-4 rounded-lg border border-border bg-background p-4">\n        <p className="text-sm font-medium text-foreground">shadcn</p>\n        <Thread className="h-72">\n          <Message role="user" content="Draft outreach for the at-risk accounts." />\n          <ToolCall\n            defaultOpen\n            toolCall={{ id: "1", name: "draft_email", status: "success", args: { n: 3 }, result: "3 drafts" }}\n          />\n          <ActionPlan onAccept={() => {}} onReject={() => {}}>\n            <ActionPlanStep title="Review drafts" />\n          </ActionPlan>\n        </Thread>\n        <AgentComposer value="" onValueChange={() => {}} onSubmit={() => {}} />\n      </div>\n      <div className="nx-theme-mui space-y-4 rounded-md-lg bg-md-surface p-4">\n        <p className="text-sm font-medium text-md-on-surface">Material UI 3 (same shadcn components, themed)</p>\n        <Thread className="h-72">\n          <Message role="user" content="Draft outreach for the at-risk accounts." />\n          <ToolCall\n            defaultOpen\n            toolCall={{ id: "1", name: "draft_email", status: "success", args: { n: 3 }, result: "3 drafts" }}\n          />\n          <ActionPlan onAccept={() => {}} onReject={() => {}}>\n            <ActionPlanStep title="Review drafts" />\n          </ActionPlan>\n        </Thread>\n        <AgentComposer value="" onValueChange={() => {}} onSubmit={() => {}} />\n      </div>\n    </div>\n  ),\n};'
     },
+    {
+      name: "login",
+      title: "Examples/Login",
+      source: 'import type { Meta, StoryObj } from "@storybook/react";\nimport { LoginPage } from "./login-page";\nimport { LoginPageShadcn } from "./login-page-shadcn";\n\nconst meta = {\n  title: "Examples/Login",\n  parameters: { layout: "fullscreen" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n/** Material Design 3 sign-in page composed from Nucleux md3-* components. */\nexport const MaterialUI3: Story = {\n  render: () => <LoginPage />,\n};\n\n/** shadcn/slate sign-in page composed from Nucleux primitives. */\nexport const Shadcn: Story = {\n  render: () => <LoginPageShadcn />,\n};'
+    },
     {
       name: "meeting-dashboard",
       title: "Examples/Meeting Dashboard",
@@ -5893,579 +5898,1264 @@ var html_snippets_default = {
   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>'
+      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>',
+      idCount: 0,
+      text: [
+        "EI"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "2 sources",
+        "Renewal Playbook",
+        "PDF \xB7 Section 4.1",
+        "Open",
+        "MSA Template",
+        "DOCX"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Overall confidence",
+        "Review recommended."
+      ]
     },
     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 [&_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 [&_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>'
+      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 [&_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 [&_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>',
+      idCount: 0,
+      text: [
+        "Footprints",
+        "Sent email to Sam",
+        "2m ago",
+        "Read 3 CRM records",
+        "3m ago"
+      ]
     },
     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="[&_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>'
+      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="[&_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>',
+      idCount: 0,
+      text: [
+        "Session recap",
+        "Aria sent 3 emails and created 1 issue."
+      ]
     },
     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 [&_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 [&_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 [&_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>'
+      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 [&_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 [&_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 [&_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>',
+      idCount: 0,
+      text: [
+        "Reading skill doc",
+        "Executing command",
+        "Creating file"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Proposed plan",
+        "Pull renewing accounts",
+        "Draft emails",
+        "Accept plan",
+        "Reject"
+      ]
     },
     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 [&_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'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>`
+      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 [&_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'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>`,
+      idCount: 0,
+      text: [
+        "AI action",
+        "Send 18 emails?",
+        "You can't undo this.",
+        "Cancel",
+        "Confirm"
+      ]
     },
     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 [&_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 [&_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 [&_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 [&_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>'
+      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 [&_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 [&_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 [&_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 [&_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>',
+      idCount: 0,
+      text: []
     },
     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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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>'
+      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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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 [&_svg]:size-4 [&_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>',
+      idCount: 0,
+      text: [
+        "Rewrite",
+        "Try again",
+        "Make longer",
+        "Make concise",
+        "Make it professional",
+        "Convert to bullet points",
+        "Ask a follow-up"
+      ]
     },
     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 [&_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 [&_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 [&_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 [&_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Playful</button></div></div>'
+      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 [&_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 [&_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 [&_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 [&_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Playful</button></div></div>',
+      idCount: 0,
+      text: [
+        "Tone",
+        "Professional",
+        "Friendly",
+        "Direct",
+        "Playful"
+      ]
     },
     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 [&_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 [&_svg]:size-4 border-border bg-background text-foreground hover:bg-accent">Prefer this response</button></div></div></div>'
+      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 [&_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 [&_svg]:size-4 border-border bg-background text-foreground hover:bg-accent">Prefer this response</button></div></div></div>',
+      idCount: 0,
+      text: [
+        "Which response is better?",
+        "Response A",
+        "Response A text",
+        "Prefer this response",
+        "Response B",
+        "Response B text"
+      ]
     },
     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 [&_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>'
+      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 [&_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>',
+      idCount: 0,
+      text: [
+        "Enhance prompt",
+        "Make it professional"
+      ]
     },
     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 [&_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 [&_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>'
+      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 [&_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 [&_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>',
+      idCount: 0,
+      text: [
+        "Playbook.pdf",
+        "PDF \xB7 240 KB"
+      ]
     },
     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 [&&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>'
+      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 [&&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>',
+      idCount: 0,
+      text: [
+        "Instant"
+      ]
     },
     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 [&_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 [&_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>'
+      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 [&_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 [&_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>',
+      idCount: 0,
+      text: []
     },
     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 [&_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 [&_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>'
+      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 [&_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 [&_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>',
+      idCount: 0,
+      text: [
+        "Which audience is this for?",
+        "Executives",
+        "Engineers",
+        "Skip",
+        "Continue"
+      ]
     },
     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 [&_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>'
+      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 [&_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>',
+      idCount: 0,
+      text: [
+        "GitHub",
+        "Read issues and code",
+        "Connect"
+      ]
     },
     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 [&_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 [&_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 [&_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 [&_svg]:size-3.5 border-border"></span></button></li></ul></div>'
+      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 [&_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 [&_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 [&_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 [&_svg]:size-3.5 border-border"></span></button></li></ul></div>',
+      idCount: 0,
+      text: [
+        "Knowledge sources",
+        "1 selected",
+        "CLAUDE.md",
+        "project guide",
+        "project.json",
+        "config"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Email",
+        "about renewals.",
+        "Use this prompt"
+      ]
     },
     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 [&_svg]:size-4 [&_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>'
+      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 [&_svg]:size-4 [&_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>',
+      idCount: 0,
+      text: []
     },
     aicaveat: {
       name: "AiCaveat",
-      html: '<p class="inline-flex items-center gap-1.5 text-xs text-muted-foreground [&_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>'
+      html: '<p class="inline-flex items-center gap-1.5 text-xs text-muted-foreground [&_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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Meet your assistant",
+        "Examples",
+        "Summarize a contract",
+        "Capabilities",
+        "Reads your files",
+        "Limits",
+        "May be wrong"
+      ]
     },
     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 [&_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 [&_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 [&_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>'
+      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 [&_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 [&_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 [&_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>',
+      idCount: 0,
+      text: [
+        "What I remember",
+        "Updated 1 minute ago",
+        "About you",
+        "Prefers concise answers"
+      ]
     },
     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 [&_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't saved or added to memory.</span></div>`
+      html: `<div class="inline-flex items-center gap-2 rounded-lg bg-muted/60 px-3 py-2 text-xs text-muted-foreground [&_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't saved or added to memory.</span></div>`,
+      idCount: 0,
+      text: []
     },
     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 [&_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'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>`
+      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 [&_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'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>`,
+      idCount: 0,
+      text: [
+        "Something went wrong",
+        "Your prompt didn't go through.",
+        "Retry"
+      ]
     },
     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 [&_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>'
+      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 [&_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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "New"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Save"
+      ]
     },
     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 [&_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>'
+      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 [&_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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Recent meeting",
+        "1 in your library",
+        "View all",
+        "Body"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Step one",
+        "Done already",
+        "Step two",
+        "Pending",
+        "Go"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Record",
+        "Capture live."
+      ]
     },
     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 [&_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>'
+      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 [&_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>',
+      idCount: 0,
+      text: [
+        "Getting Started",
+        "2 of 4"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Design"
+      ]
     },
     "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>'
+      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>',
+      idCount: 0,
+      text: [
+        "React"
+      ]
     },
     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 [&_[data-alert-icon]]:text-info"><span data-alert-icon="true" class="mt-0.5 shrink-0 [&_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>'
+      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 [&_[data-alert-icon]]:text-info"><span data-alert-icon="true" class="mt-0.5 shrink-0 [&_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>',
+      idCount: 0,
+      text: [
+        "Heads up",
+        "Body text"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     separator: {
       name: "Separator",
-      html: '<div role="none" class="shrink-0 bg-border h-px w-full"></div>'
+      html: '<div role="none" class="shrink-0 bg-border h-px w-full"></div>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Trigger",
+        "Ask Nebula"
+      ]
     },
     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 [&_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>'
+      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 [&_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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Heading",
+        "ER"
+      ]
     },
     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 [&_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 [&_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 [&_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>'
+      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 [&_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 [&_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 [&_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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Hello"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "search",
+        "Completed",
+        "Arguments",
+        "Result",
+        "ok"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Reasoning",
+        "thinking\u2026"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "ts",
+        "Copy",
+        "const x = 1;"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Hi there"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Hello",
+        "Hi"
+      ]
     },
     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 [&_svg]:size-4">Learn more</a>'
+      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 [&_svg]:size-4">Learn more</a>',
+      idCount: 0,
+      text: [
+        "Learn more"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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 [&_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 [&_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>'
+      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="__NX_ID_0__-trigger-a" aria-selected="true" aria-controls="__NX_ID_0__-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 [&_svg]:size-4 bg-background text-foreground shadow-sm">A</button><button type="button" role="tab" id="__NX_ID_0__-trigger-b" aria-selected="false" aria-controls="__NX_ID_0__-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 [&_svg]:size-4 hover:text-foreground">B</button></div><div role="tabpanel" id="__NX_ID_0__-content-a" aria-labelledby="__NX_ID_0__-trigger-a" tabindex="0" class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Panel A</div></div>',
+      idCount: 1,
+      text: [
+        "A",
+        "B",
+        "Panel A"
+      ]
     },
     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 [&_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 [&_svg]:size-4 text-foreground hover:bg-accent"><span class="flex-1 truncate">Delete</span></button></div>'
+      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 [&_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 [&_svg]:size-4 text-foreground hover:bg-accent"><span class="flex-1 truncate">Delete</span></button></div>',
+      idCount: 0,
+      text: [
+        "Try again",
+        "Delete"
+      ]
     },
     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 [&_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 [&_svg]:size-4">Action items</button></div>'
+      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 [&_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 [&_svg]:size-4">Action items</button></div>',
+      idCount: 0,
+      text: [
+        "Highlights",
+        "Action items"
+      ]
     },
     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 [&_svg]:size-4">Show highlights</button>'
+      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 [&_svg]:size-4">Show highlights</button>',
+      idCount: 0,
+      text: [
+        "Show highlights"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Summary",
+        "AI summary",
+        "Transcript",
+        "Full text"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Instant",
+        "Balanced"
+      ]
     },
     table: {
       name: "Table",
-      html: '<div class="relative w-full overflow-x-auto"><table class="w-full caption-bottom text-sm"><thead class="[&_tr]:border-b [&_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="[&_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>'
+      html: '<div class="relative w-full overflow-x-auto"><table class="w-full caption-bottom text-sm"><thead class="[&_tr]:border-b [&_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="[&_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>',
+      idCount: 0,
+      text: [
+        "Name",
+        "Status",
+        "Sync",
+        "Done"
+      ]
     },
     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>'
+      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="__NX_ID_0__-title" aria-describedby="__NX_ID_0__-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="__NX_ID_0__-title" class="text-xl font-semibold text-foreground">Save this as memory?</h2><p id="__NX_ID_0__-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>',
+      idCount: 1,
+      text: [
+        "Save this as memory?",
+        "This can personalize future actions.",
+        "Footer"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Allow workspace access?",
+        "Choose what the assistant can access.",
+        "Read files",
+        "Attached files only",
+        "Run actions",
+        "Ask before connecting tools",
+        "Not now",
+        "Allow selected"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Library",
+        "84 patterns",
+        "Onboarding",
+        "Disclosure",
+        "Consent"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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="[&_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>'
+      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="[&_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>',
+      idCount: 0,
+      text: [
+        "Home",
+        "Details"
+      ]
     },
     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>'
+      html: '<div class="divide-y divide-border rounded-lg border border-border"><div><button type="button" id="__NX_ID_0__-h" aria-expanded="true" aria-controls="__NX_ID_0__-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="__NX_ID_0__-p" aria-labelledby="__NX_ID_0__-h" class="px-4 pb-3 text-sm text-muted-foreground">Answer</div></div></div>',
+      idCount: 1,
+      text: [
+        "Question",
+        "Answer"
+      ]
     },
     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>'
+      html: '<div class="relative inline-block"><button type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="__NX_ID_0__">Open</button><div id="__NX_ID_0__" 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>',
+      idCount: 1,
+      text: [
+        "Open",
+        "Popover body"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Saved",
+        "Done"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Three deals are at risk this quarter.",
+        "Assumed:",
+        "Q3",
+        "tap to change"
+      ]
     },
     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>'
+      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="__NX_ID_0__-title" aria-describedby="__NX_ID_0__-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="__NX_ID_0__-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>',
+      idCount: 1,
+      text: [
+        "Sources",
+        "Body",
+        "Footer"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Variant 1",
+        "A media card."
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Disclosure",
+        "A clear AI label."
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Consent",
+        "Onboarding",
+        "Caveat"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "On this page",
+        "Patterns",
+        "Stage",
+        "Onboarding"
+      ]
     },
     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"/>'
+      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 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" id="nm"/>',
+      idCount: 0,
+      text: [
+        "Name"
+      ]
     },
     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"/>'
+      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"/>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     skeleton: {
       name: "Skeleton",
-      html: '<div aria-hidden="true" class="animate-pulse bg-muted rounded-md h-4 w-20"></div>'
+      html: '<div aria-hidden="true" class="animate-pulse bg-muted rounded-md h-4 w-20"></div>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "B"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "L",
+        "C"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     aspectratio: {
       name: "AspectRatio",
-      html: '<div class="relative w-40 bg-muted" style="aspect-ratio:1.7777777777777777"></div>'
+      html: '<div class="relative w-40 bg-muted" style="aspect-ratio:1.7777777777777777"></div>',
+      idCount: 0,
+      text: []
     },
     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>'
+      html: '<div class="" data-state="open"><button type="button" id="__NX_ID_0__-trigger" aria-expanded="true" aria-controls="__NX_ID_0__-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="__NX_ID_0__-content" role="region" aria-labelledby="__NX_ID_0__-trigger" class="animate-nx-fade-in pt-1.5 text-sm text-muted-foreground">Details</div></div>',
+      idCount: 1,
+      text: [
+        "More",
+        "Details"
+      ]
     },
     hovercard: {
       name: "HoverCard",
-      html: '<div class="relative inline-block"><button type="button">@n</button></div>'
+      html: '<div class="relative inline-block"><button type="button">@n</button></div>',
+      idCount: 0,
+      text: [
+        "@n"
+      ]
     },
     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] [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-track]:bg-transparent overflow-y-auto overflow-x-hidden"><div class="text-sm">Scrollable content</div></div></div>'
+      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] [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-track]:bg-transparent overflow-y-auto overflow-x-hidden"><div class="text-sm">Scrollable content</div></div></div>',
+      idCount: 0,
+      text: [
+        "Scrollable content"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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="__NX_ID_0__-title" aria-describedby="__NX_ID_0__-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="__NX_ID_0__-title" class="text-lg font-semibold text-foreground">Delete this?</h2><p id="__NX_ID_0__-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>',
+      idCount: 1,
+      text: [
+        "Delete this?",
+        "This cannot be undone.",
+        "Cancel",
+        "Delete"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Suggestions",
+        "New chat",
+        "Open settings"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Select\u2026"
+      ]
     },
     contextmenu: {
       name: "ContextMenu",
-      html: "<div><div>Right-click area</div></div>"
+      html: "<div><div>Right-click area</div></div>",
+      idCount: 0,
+      text: [
+        "Right-click area"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "File"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Products",
+        "Docs"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Left",
+        "Right"
+      ]
     },
     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" role="gridcell" tabindex="-1" 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 bg-accent text-accent-foreground" role="gridcell" tabindex="0" 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>'
+      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" role="gridcell" tabindex="-1" 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 bg-accent text-accent-foreground" role="gridcell" tabindex="0" 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>',
+      idCount: 0,
+      text: [
+        "September 2026",
+        "Su",
+        "Mo",
+        "Tu",
+        "We",
+        "Th",
+        "Fr",
+        "Sa"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Pick a date"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Slide 1",
+        "Slide 2"
+      ]
     },
     chart: {
       name: "Chart",
-      html: '<div data-chart="" class="flex aspect-video justify-center text-xs [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.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>'
+      html: '<div data-chart="" class="flex aspect-video justify-center text-xs [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.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>',
+      idCount: 0,
+      text: []
     },
     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="[&_tr]:border-b [&_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>'
+      html: '<div class="w-full"><div class="overflow-hidden rounded-md border border-border"><table class="w-full caption-bottom text-sm"><thead class="[&_tr]:border-b [&_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>',
+      idCount: 0,
+      text: [
+        "Invoice",
+        "Amount",
+        "INV-001",
+        "INV-002"
+      ]
     },
     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>'
+      html: '<form><div class="space-y-2"><label for="__NX_ID_0__-form-item" class="text-sm font-medium leading-none text-foreground">Username</label><input name="username" id="__NX_ID_0__-form-item" aria-describedby="__NX_ID_0__-form-item-description" value=""/><p id="__NX_ID_0__-form-item-description" class="text-sm text-muted-foreground">Your public name.</p></div></form>',
+      idCount: 1,
+      text: [
+        "Username",
+        "Your public name."
+      ]
     },
     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 [&_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "Save"
+      ]
     },
     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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      html: `<button type="button" class="relative inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-colors [&_svg]:size-6 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: []
     },
     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-[''] 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 [&_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>`
+      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-[''] 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 [&_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>`,
+      idCount: 0,
+      text: []
     },
     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>'
+      html: '<div class="w-full"><div class="relative"><input id="__NX_ID_0__" placeholder=" " aria-describedby="__NX_ID_0__-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="__NX_ID_0__" 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="__NX_ID_0__-support" class="px-4 pt-1 text-xs text-md-on-surface-variant">Required</p></div>',
+      idCount: 1,
+      text: [
+        "Email",
+        "Required"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Card body"
+      ]
     },
     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 [&_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-[''] 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 [&_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-[''] 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 [&_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 [&_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>`
+      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 [&_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-[''] 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 [&_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-[''] 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 [&_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 [&_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>`,
+      idCount: 0,
+      text: [
+        "Assist",
+        "Filter",
+        "Input"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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-[''] 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 [&_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>`
+      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-[''] 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 [&_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>`,
+      idCount: 0,
+      text: []
     },
     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-[''] 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-[''] 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>`
+      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-[''] 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-[''] 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>`,
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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 [&_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "A",
+        "B",
+        "Panel A"
+      ]
     },
     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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "Home",
+        "Search"
+      ]
     },
     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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "Home",
+        "Search"
+      ]
     },
     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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "New",
+        "Open"
+      ]
     },
     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>'
+      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="__NX_ID_0__-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="__NX_ID_0__-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>',
+      idCount: 1,
+      text: [
+        "Reset settings?",
+        "This will restore defaults."
+      ]
     },
     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-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12]"><span class="relative">Undo</span></button></div>`
+      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-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12]"><span class="relative">Undo</span></button></div>`,
+      idCount: 0,
+      text: [
+        "Message archived",
+        "Undo"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Primary",
+        "24 new",
+        "Starred",
+        "3 items"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Inbox"
+      ]
     },
     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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "Inbox",
+        "Sent"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Sheet body"
+      ]
     },
     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 [&_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`
+      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 [&_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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 [&_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] 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>`,
+      idCount: 0,
+      text: [
+        "Day",
+        "Week"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Inbox"
+      ]
     },
     md3tooltip: {
       name: "Md3Tooltip",
-      html: '<div class="relative inline-flex"><button type="button">Trigger</button></div>'
+      html: '<div class="relative inline-flex"><button type="button">Trigger</button></div>',
+      idCount: 0,
+      text: [
+        "Trigger"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: []
     },
     md3divider: {
       name: "Md3Divider",
-      html: '<div role="separator" aria-orientation="horizontal" class="shrink-0 bg-md-outline-variant h-px w-full"></div>'
+      html: '<div role="separator" aria-orientation="horizontal" class="shrink-0 bg-md-outline-variant h-px w-full"></div>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Date"
+      ]
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "AM",
+        "PM"
+      ]
     },
     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 [&_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 [&::-webkit-search-cancel-button]:appearance-none" aria-label="Search"/></div>'
+      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 [&_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 [&::-webkit-search-cancel-button]:appearance-none" aria-label="Search"/></div>',
+      idCount: 0,
+      text: []
     },
     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>'
+      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>',
+      idCount: 0,
+      text: [
+        "Update available"
+      ]
     },
     md3message: {
       name: "Md3Message",
-      html: '<div data-role="assistant" class="flex w-full animate-nx-fade-in gap-3 flex-row"><span class="grid size-8 shrink-0 place-items-center rounded-full bg-md-primary-container text-md-on-primary-container [&_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-bot"><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></span><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-start"><div class="rounded-md-xl px-4 py-2.5 text-sm leading-relaxed rounded-bl-md-xs bg-md-surface-container-high text-md-on-surface"><span class="whitespace-pre-wrap break-words">Hi there</span></div></div></div>'
+      html: '<div data-role="assistant" class="flex w-full animate-nx-fade-in gap-3 flex-row"><span class="grid size-8 shrink-0 place-items-center rounded-full bg-md-primary-container text-md-on-primary-container [&_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-bot"><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></span><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-start"><div class="rounded-md-xl px-4 py-2.5 text-sm leading-relaxed rounded-bl-md-xs bg-md-surface-container-high text-md-on-surface"><span class="whitespace-pre-wrap break-words">Hi there</span></div></div></div>',
+      idCount: 0,
+      text: [
+        "Hi there"
+      ]
     },
     md3toolcall: {
       name: "Md3ToolCall",
       html: `<div class="overflow-hidden rounded-md-md border border-md-outline-variant bg-md-surface-container-low text-sm text-md-on-surface animate-nx-fade-in"><button type="button" aria-expanded="true" class="relative flex w-full items-center gap-2 overflow-hidden px-3 py-2.5 text-left outline-none before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible: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-chevron-right relative size-4 shrink-0 text-md-on-surface-variant 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 relative size-4 shrink-0 text-md-on-surface-variant"><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="relative font-mono font-medium text-md-on-surface">search</span><span class="relative ml-auto inline-flex items-center gap-1 text-xs text-md-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 size-3.5"><path d="M20 6 9 17l-5-5"></path></svg>Completed</span></button><div class="space-y-3 border-t border-md-outline-variant px-3 py-2.5"><div><p class="mb-1 text-xs font-medium text-md-on-surface-variant">Arguments</p><pre class="overflow-x-auto rounded-md-xs bg-md-surface-variant p-2 font-mono text-xs text-md-on-surface">{
   &quot;q&quot;: &quot;x&quot;
-}</pre></div><div><p class="mb-1 text-xs font-medium text-md-on-surface-variant">Result</p><pre class="overflow-x-auto rounded-md-xs bg-md-surface-variant p-2 font-mono text-xs text-md-on-surface">ok</pre></div></div></div>`
+}</pre></div><div><p class="mb-1 text-xs font-medium text-md-on-surface-variant">Result</p><pre class="overflow-x-auto rounded-md-xs bg-md-surface-variant p-2 font-mono text-xs text-md-on-surface">ok</pre></div></div></div>`,
+      idCount: 0,
+      text: [
+        "search",
+        "Completed",
+        "Arguments",
+        "Result",
+        "ok"
+      ]
     },
     md3actionplan: {
       name: "Md3ActionPlan",
-      html: `<div class="flex flex-col gap-4 rounded-md-lg border border-md-outline-variant bg-md-surface-container-low p-5 text-md-on-surface"><div class="flex flex-col gap-1"><h3 class="text-sm font-semibold text-md-on-surface">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-md-secondary-container before:text-xs before:font-semibold before:text-md-on-secondary-container 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-md-on-surface">Pull 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-md-secondary-container before:text-xs before:font-semibold before:text-md-on-secondary-container 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-md-on-surface">Draft emails</span></span></li></ol><div class="flex flex-wrap items-center gap-2"><button type="button" class="relative inline-flex h-10 items-center overflow-hidden rounded-full bg-md-primary px-6 text-sm font-medium text-md-on-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Accept plan</span></button><button type="button" class="relative ml-auto inline-flex h-10 items-center overflow-hidden rounded-full px-4 text-sm font-medium text-md-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Reject</span></button></div></div>`
+      html: `<div class="flex flex-col gap-4 rounded-md-lg border border-md-outline-variant bg-md-surface-container-low p-5 text-md-on-surface"><div class="flex flex-col gap-1"><h3 class="text-sm font-semibold text-md-on-surface">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-md-secondary-container before:text-xs before:font-semibold before:text-md-on-secondary-container 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-md-on-surface">Pull 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-md-secondary-container before:text-xs before:font-semibold before:text-md-on-secondary-container 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-md-on-surface">Draft emails</span></span></li></ol><div class="flex flex-wrap items-center gap-2"><button type="button" class="relative inline-flex h-10 items-center overflow-hidden rounded-full bg-md-primary px-6 text-sm font-medium text-md-on-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Accept plan</span></button><button type="button" class="relative ml-auto inline-flex h-10 items-center overflow-hidden rounded-full px-4 text-sm font-medium text-md-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Reject</span></button></div></div>`,
+      idCount: 0,
+      text: [
+        "Proposed plan",
+        "Pull accounts",
+        "Draft emails",
+        "Accept plan",
+        "Reject"
+      ]
     },
     md3agentcomposer: {
       name: "Md3AgentComposer",
-      html: `<div class="flex flex-col gap-3 rounded-md-xl bg-md-surface-container-high p-3 focus-within:ring-2 focus-within:ring-md-primary" 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-md-on-surface outline-none placeholder:text-md-on-surface-variant 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="relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-md-primary text-md-on-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] active:before:opacity-[0.12] disabled:opacity-[0.38] disabled:before:opacity-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-arrow-up relative size-4"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div></div></div>`
+      html: `<div class="flex flex-col gap-3 rounded-md-xl bg-md-surface-container-high p-3 focus-within:ring-2 focus-within:ring-md-primary" 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-md-on-surface outline-none placeholder:text-md-on-surface-variant 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="relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-md-primary text-md-on-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] active:before:opacity-[0.12] disabled:opacity-[0.38] disabled:before:opacity-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-arrow-up relative size-4"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div></div></div>`,
+      idCount: 0,
+      text: []
     },
     md3reasoning: {
       name: "Md3Reasoning",
-      html: `<div class="overflow-hidden rounded-md-md bg-md-surface-container-low"><button type="button" aria-expanded="true" class="relative flex w-full items-center gap-2 overflow-hidden px-3 py-2.5 text-left text-sm text-md-on-surface-variant outline-none before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible: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-brain relative 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="relative 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 relative 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-md-outline-variant px-3 py-2.5 text-sm italic text-md-on-surface-variant">thinking\u2026</div></div>`
+      html: `<div class="overflow-hidden rounded-md-md bg-md-surface-container-low"><button type="button" aria-expanded="true" class="relative flex w-full items-center gap-2 overflow-hidden px-3 py-2.5 text-left text-sm text-md-on-surface-variant outline-none before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible: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-brain relative 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="relative 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 relative 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-md-outline-variant px-3 py-2.5 text-sm italic text-md-on-surface-variant">thinking\u2026</div></div>`,
+      idCount: 0,
+      text: [
+        "Reasoning",
+        "thinking\u2026"
+      ]
     },
     md3agentsteps: {
       name: "Md3AgentSteps",
-      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-md-outline-variant 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 [&_svg]:size-3.5 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 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-md-on-surface">Read 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-md-outline-variant 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 [&_svg]:size-3.5 border-md-primary bg-md-primary-container 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-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-md-on-surface">Executing</span><span class="mt-1 block h-1 w-full overflow-hidden rounded-full bg-md-surface-variant"><span class="block h-full rounded-full bg-md-primary 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-md-outline-variant 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 [&_svg]:size-3.5 border-md-outline bg-md-surface text-md-on-surface-variant"><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-md-on-surface-variant">Create file</span></span></li></ol>'
+      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-md-outline-variant 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 [&_svg]:size-3.5 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 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-md-on-surface">Read 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-md-outline-variant 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 [&_svg]:size-3.5 border-md-primary bg-md-primary-container 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-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-md-on-surface">Executing</span><span class="mt-1 block h-1 w-full overflow-hidden rounded-full bg-md-surface-variant"><span class="block h-full rounded-full bg-md-primary 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-md-outline-variant 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 [&_svg]:size-3.5 border-md-outline bg-md-surface text-md-on-surface-variant"><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-md-on-surface-variant">Create file</span></span></li></ol>',
+      idCount: 0,
+      text: [
+        "Read doc",
+        "Executing",
+        "Create file"
+      ]
     },
     md3activitylog: {
       name: "Md3ActivityLog",
-      html: '<div class="flex flex-col gap-3"><p class="text-xs font-medium uppercase tracking-wide text-md-on-surface-variant">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-md-outline-variant"><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-md-outline-variant bg-md-surface-container text-md-on-surface-variant [&_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-md-on-surface">Sent email to Sam</span><span class="text-xs text-md-on-surface-variant">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-md-outline-variant bg-md-surface-container text-md-on-surface-variant [&_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-md-on-surface">Read 3 CRM records</span><span class="text-xs text-md-on-surface-variant">3m ago</span></span></li></ol></div>'
+      html: '<div class="flex flex-col gap-3"><p class="text-xs font-medium uppercase tracking-wide text-md-on-surface-variant">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-md-outline-variant"><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-md-outline-variant bg-md-surface-container text-md-on-surface-variant [&_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-md-on-surface">Sent email to Sam</span><span class="text-xs text-md-on-surface-variant">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-md-outline-variant bg-md-surface-container text-md-on-surface-variant [&_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-md-on-surface">Read 3 CRM records</span><span class="text-xs text-md-on-surface-variant">3m ago</span></span></li></ol></div>',
+      idCount: 0,
+      text: [
+        "Footprints",
+        "Sent email to Sam",
+        "2m ago",
+        "Read 3 CRM records",
+        "3m ago"
+      ]
     },
     md3thread: {
       name: "Md3Thread",
-      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 animate-nx-fade-in gap-3 flex-row-reverse"><span class="grid size-8 shrink-0 place-items-center rounded-full bg-md-primary-container text-md-on-primary-container [&_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-user"><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></span><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-end"><div class="rounded-md-xl px-4 py-2.5 text-sm leading-relaxed rounded-br-md-xs bg-md-primary text-md-on-primary"><span class="whitespace-pre-wrap break-words">Hello</span></div></div></div><div data-role="assistant" class="flex w-full animate-nx-fade-in gap-3 flex-row"><span class="grid size-8 shrink-0 place-items-center rounded-full bg-md-primary-container text-md-on-primary-container [&_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-bot"><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></span><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-start"><div class="rounded-md-xl px-4 py-2.5 text-sm leading-relaxed rounded-bl-md-xs bg-md-surface-container-high text-md-on-surface"><span class="whitespace-pre-wrap break-words">Hi</span></div></div></div></div></div>'
+      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 animate-nx-fade-in gap-3 flex-row-reverse"><span class="grid size-8 shrink-0 place-items-center rounded-full bg-md-primary-container text-md-on-primary-container [&_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-user"><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></span><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-end"><div class="rounded-md-xl px-4 py-2.5 text-sm leading-relaxed rounded-br-md-xs bg-md-primary text-md-on-primary"><span class="whitespace-pre-wrap break-words">Hello</span></div></div></div><div data-role="assistant" class="flex w-full animate-nx-fade-in gap-3 flex-row"><span class="grid size-8 shrink-0 place-items-center rounded-full bg-md-primary-container text-md-on-primary-container [&_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-bot"><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></span><div class="flex min-w-0 max-w-[80%] flex-col gap-2 items-start"><div class="rounded-md-xl px-4 py-2.5 text-sm leading-relaxed rounded-bl-md-xs bg-md-surface-container-high text-md-on-surface"><span class="whitespace-pre-wrap break-words">Hi</span></div></div></div></div></div>',
+      idCount: 0,
+      text: [
+        "Hello",
+        "Hi"
+      ]
     },
     md3actionconfirmation: {
       name: "Md3ActionConfirmation",
-      html: `<div role="alertdialog" aria-label="Send 18 emails?" class="flex flex-col gap-3 rounded-md-xl bg-md-surface-container-high p-5 text-md-on-surface shadow-md-1"><div class="flex items-start gap-3"><span class="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-full [&_svg]:size-4 bg-md-error-container text-md-on-error-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-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-md-secondary-container px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-md-on-secondary-container">AI action</span><h3 class="text-base font-semibold text-md-on-surface">Send 18 emails?</h3><p class="text-sm text-md-on-surface-variant">You can't undo this.</p></div></div><div class="flex items-center justify-end gap-2"><button type="button" class="relative inline-flex h-10 items-center overflow-hidden rounded-full border border-md-outline px-5 text-sm font-medium text-md-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Cancel</span></button><button type="button" class="relative inline-flex h-10 items-center overflow-hidden rounded-full px-5 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface bg-md-error text-md-on-error focus-visible:ring-md-error before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Confirm</span></button></div></div>`
+      html: `<div role="alertdialog" aria-label="Send 18 emails?" class="flex flex-col gap-3 rounded-md-xl bg-md-surface-container-high p-5 text-md-on-surface shadow-md-1"><div class="flex items-start gap-3"><span class="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-full [&_svg]:size-4 bg-md-error-container text-md-on-error-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-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-md-secondary-container px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-md-on-secondary-container">AI action</span><h3 class="text-base font-semibold text-md-on-surface">Send 18 emails?</h3><p class="text-sm text-md-on-surface-variant">You can't undo this.</p></div></div><div class="flex items-center justify-end gap-2"><button type="button" class="relative inline-flex h-10 items-center overflow-hidden rounded-full border border-md-outline px-5 text-sm font-medium text-md-primary outline-none focus-visible:ring-2 focus-visible:ring-md-primary before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Cancel</span></button><button type="button" class="relative inline-flex h-10 items-center overflow-hidden rounded-full px-5 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface bg-md-error text-md-on-error focus-visible:ring-md-error before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Confirm</span></button></div></div>`,
+      idCount: 0,
+      text: [
+        "AI action",
+        "Send 18 emails?",
+        "You can't undo this.",
+        "Cancel",
+        "Confirm"
+      ]
     }
   }
 };
 
 // src/index.ts
 var snippets = html_snippets_default.snippets;
+var idSeq = 0;
+var freshId = () => `nx-${(++idSeq).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+function instantiateIds(html, mode) {
+  const placeholders = [...new Set(html.match(/__NX_ID_\d+__/g) ?? [])];
+  let out = html;
+  for (const ph of placeholders) {
+    const n = Number(ph.match(/\d+/)?.[0] ?? 0);
+    const value = mode === "template" ? `{{id${n === 0 ? "" : n}}}` : freshId();
+    out = out.split(ph).join(value);
+  }
+  return out;
+}
 var byName = /* @__PURE__ */ new Map();
 for (const p of catalog_default.packages) {
   byName.set(p.name.toLowerCase(), p);
@@ -6497,34 +7187,36 @@ function renderComponent(p) {
   }
   return lines.join("\n").trim();
 }
-function htmlFor(p) {
+function snippetFor(p) {
   for (const c of p.components) {
     const s = snippets[c.toLowerCase()];
-    if (s) return s.html;
+    if (s) return s;
   }
-  return snippets[p.name.toLowerCase()]?.html;
+  return snippets[p.name.toLowerCase()];
 }
-function renderComponentHtml(p) {
-  const html = htmlFor(p);
+function renderComponentHtml(p, template) {
+  const snip = snippetFor(p);
   const head = `# ${p.components[0] ?? p.name}  (HTML)`;
-  if (!html) {
+  if (!snip) {
     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");
+  const html = instantiateIds(snip.html, template ? "template" : "concrete");
+  const notes = [
+    '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.'
+  ];
+  if (snip.idCount) {
+    notes.push(
+      template ? `Reusable template: replace the ${snip.idCount > 1 ? "`{{id}}` slots" : "`{{id}}` slot"} with a unique value per instance (use once per element you render).` : "Element ids are freshly generated on every response, so calling this again yields non-colliding markup you can safely place multiple times."
+    );
+  }
+  if (snip.text?.length) {
+    notes.push(`Editable example text (swap as needed): ${snip.text.map((t) => `"${t}"`).join(", ")}.`);
+  }
+  return [head, "", p.description || p.summary, "", notes.join("\n\n"), "", "```html", html, "```"].join("\n");
 }
 var htmlSetup = [
   `# Nucleux setup for plain HTML (no React) \u2014 ${catalog_default.library}@${catalog_default.version}`,
@@ -6579,9 +7271,12 @@ server.tool(
   "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'."),
-    framework: z.enum(["react", "html"]).optional().describe("Output format. 'react' (default) = TSX API + Props; 'html' = static HTML markup with Tailwind classes.")
+    framework: z.enum(["react", "html"]).optional().describe("Output format. 'react' (default) = TSX API + Props; 'html' = static HTML markup with Tailwind classes."),
+    template: z.boolean().optional().describe(
+      "HTML only. false (default) returns markup with fresh unique element ids (paste-and-render). true returns a reusable template with `{{id}}` slots to fill per instance \u2014 use when composing one component into many elements (e.g. several form fields)."
+    )
   },
-  async ({ name, framework = "react" }) => {
+  async ({ name, framework = "react", template = false }) => {
     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);
@@ -6589,7 +7284,7 @@ server.tool(
         `No component named "${name}".${suggestions.length ? ` Did you mean: ${suggestions.join(", ")}?` : " Use list_components to see all."}`
       );
     }
-    return text(framework === "html" ? renderComponentHtml(p) : renderComponent(p));
+    return text(framework === "html" ? renderComponentHtml(p, template) : renderComponent(p));
   }
 );
 server.tool(