@nucleux/mcp 0.4.2 → 0.4.4

package/dist/index.js

@@ -21,9 +21,9 @@ var catalog_default = {
     note: "Every component is also re-exported from the @nucleux/react umbrella."
   },
   counts: {
-    components: 132,
-    packages: 137,
-    examples: 6
+    components: 137,
+    packages: 142,
+    examples: 7
   },
   packages: [
     {
@@ -2095,6 +2095,44 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-action-confirmation",
+      package: "@nucleux/md3-action-confirmation",
+      kind: "component",
+      description: "A Material Design 3 guardrail shown before an agent performs a consequential\naction \u2014 tonal surface, state-layer actions. Same API as {@link ActionConfirmation}.",
+      summary: "Material 3 agent action confirmation \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-action-confirmation"
+      ],
+      exports: [
+        "Md3ActionConfirmation",
+        "Md3ActionConfirmationVariant",
+        "Md3ActionConfirmationProps"
+      ],
+      components: [
+        "Md3ActionConfirmation"
+      ],
+      import: 'import { Md3ActionConfirmation } from "@nucleux/md3-action-confirmation";',
+      installSingle: "pnpm add @nucleux/md3-action-confirmation @nucleux/tokens",
+      props: [
+        {
+          name: "Md3ActionConfirmationProps",
+          source: 'export interface Md3ActionConfirmationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  variant?: Md3ActionConfirmationVariant;\n  badge?: React.ReactNode;\n  icon?: React.ReactNode;\n  confirmLabel?: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n}'
+        }
+      ],
+      readme: '# @nucleux/md3-action-confirmation\n\nMaterial 3 agent action confirmation \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/md3-action-confirmation @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3ActionConfirmation } from "@nucleux/md3-action-confirmation";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
+      peerDependencies: {
+        react: ">=18",
+        "react-dom": ">=18"
+      }
+    },
     {
       name: "md3-action-plan",
       package: "@nucleux/md3-action-plan",
@@ -2139,6 +2177,50 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-activity-log",
+      package: "@nucleux/md3-activity-log",
+      kind: "component",
+      description: "A single entry in an {@link Md3ActivityLog}.",
+      summary: "Material 3 agent activity log \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-activity-log"
+      ],
+      exports: [
+        "Md3ActivityLogItem",
+        "Md3ActivityLog",
+        "Md3ActivityLogItemProps",
+        "Md3ActivityLogProps"
+      ],
+      components: [
+        "Md3ActivityLogItem",
+        "Md3ActivityLog"
+      ],
+      import: 'import { Md3ActivityLogItem, Md3ActivityLog } from "@nucleux/md3-activity-log";',
+      installSingle: "pnpm add @nucleux/md3-activity-log @nucleux/tokens",
+      props: [
+        {
+          name: "Md3ActivityLogItemProps",
+          source: "export interface Md3ActivityLogItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  icon?: React.ReactNode;\n  time?: React.ReactNode;\n}"
+        },
+        {
+          name: "Md3ActivityLogProps",
+          source: "export interface Md3ActivityLogProps extends React.HTMLAttributes<HTMLOListElement> {\n  heading?: React.ReactNode;\n}"
+        }
+      ],
+      readme: '# @nucleux/md3-activity-log\n\nMaterial 3 agent activity log \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/md3-activity-log @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3ActivityLog } from "@nucleux/md3-activity-log";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
+      peerDependencies: {
+        react: ">=18",
+        "react-dom": ">=18"
+      }
+    },
     {
       name: "md3-agent-composer",
       package: "@nucleux/md3-agent-composer",
@@ -2176,6 +2258,48 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-agent-steps",
+      package: "@nucleux/md3-agent-steps",
+      kind: "component",
+      description: "A single step in an {@link Md3AgentSteps} tracker.",
+      summary: "Material 3 agent step tracker \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-agent-steps"
+      ],
+      exports: [
+        "Md3AgentStep",
+        "Md3AgentSteps",
+        "Md3AgentStepStatus",
+        "Md3AgentStepProps",
+        "Md3AgentStepsProps"
+      ],
+      components: [
+        "Md3AgentStep",
+        "Md3AgentSteps",
+        "Md3AgentStepStatus"
+      ],
+      import: 'import { Md3AgentStep, Md3AgentSteps, Md3AgentStepStatus } from "@nucleux/md3-agent-steps";',
+      installSingle: "pnpm add @nucleux/md3-agent-steps @nucleux/tokens",
+      props: [
+        {
+          name: "Md3AgentStepProps",
+          source: 'export interface Md3AgentStepProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {\n  status?: Md3AgentStepStatus;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  progress?: number;\n}'
+        }
+      ],
+      readme: '# @nucleux/md3-agent-steps\n\nMaterial 3 agent step tracker \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/md3-agent-steps @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3AgentSteps } from "@nucleux/md3-agent-steps";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
+      peerDependencies: {
+        react: ">=18",
+        "react-dom": ">=18"
+      }
+    },
     {
       name: "md3-badge",
       package: "@nucleux/md3-badge",
@@ -2967,6 +3091,43 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-reasoning",
+      package: "@nucleux/md3-reasoning",
+      kind: "component",
+      description: "A Material Design 3 collapsible chain-of-thought panel, de-emphasized from the\nfinal answer with a tonal surface and a state layer. Same API as {@link Reasoning}.",
+      summary: "Material 3 chain-of-thought panel \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-reasoning"
+      ],
+      exports: [
+        "Md3Reasoning",
+        "Md3ReasoningProps"
+      ],
+      components: [
+        "Md3Reasoning"
+      ],
+      import: 'import { Md3Reasoning } from "@nucleux/md3-reasoning";',
+      installSingle: "pnpm add @nucleux/md3-reasoning @nucleux/tokens",
+      props: [
+        {
+          name: "Md3ReasoningProps",
+          source: "export interface Md3ReasoningProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The reasoning / thinking text to reveal. */\n  content: string;\n  /** Whether reasoning is still streaming (shows a subtle pulse). */\n  streaming?: boolean;\n  /** Expanded by default. */\n  defaultOpen?: boolean;\n  /** Header label. */\n  label?: string;\n}"
+        }
+      ],
+      readme: '# @nucleux/md3-reasoning\n\nMaterial 3 chain-of-thought panel \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/md3-reasoning @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3Reasoning } from "@nucleux/md3-reasoning";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
+      peerDependencies: {
+        react: ">=18",
+        "react-dom": ">=18"
+      }
+    },
     {
       name: "md3-search",
       package: "@nucleux/md3-search",
@@ -3276,6 +3437,43 @@ Source: Figma "Recovery / Error & Empty States".`,
       readme: '# @nucleux/md3-theme\n\nMaterial Design 3 theme for Nucleux \u2014 remaps the semantic `--nx-*` tokens to the MD3 tonal palette so any Nucleux component renders in a Material UI 3 look \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React.\n\n## Install\n\n```bash\npnpm add @nucleux/md3-theme @nucleux/tokens\n```\n\n## Usage\n\nImport the base tokens once, then the MD3 theme:\n\n```ts\nimport "@nucleux/tokens/styles.css";\nimport "@nucleux/md3-theme/theme.css";\n```\n\nWrap any subtree in `nx-theme-mui` to switch it (and everything inside) from the\ndefault shadcn/slate look to Material UI 3 \u2014 the same components, restyled:\n\n```tsx\n<div className="nx-theme-mui">\n  <AgentComposer /* \u2026 */ />   {/* now Material 3 */}\n</div>\n```\n\nCombine with `.dark` for dark mode (`<html class="dark">` or on the wrapper).\n\n## License\n\nMIT \xA9 Nucleux',
       peerDependencies: {}
     },
+    {
+      name: "md3-thread",
+      package: "@nucleux/md3-thread",
+      kind: "component",
+      description: 'A Material Design 3 auto-scrolling transcript container. Pins to the newest\nmessage and surfaces a tonal "jump to latest" FAB. Same API as {@link Thread}.',
+      summary: "Material 3 auto-scrolling thread \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-thread"
+      ],
+      exports: [
+        "Md3Thread",
+        "Md3ThreadProps"
+      ],
+      components: [
+        "Md3Thread"
+      ],
+      import: 'import { Md3Thread } from "@nucleux/md3-thread";',
+      installSingle: "pnpm add @nucleux/md3-thread @nucleux/tokens",
+      props: [
+        {
+          name: "Md3ThreadProps",
+          source: 'export interface Md3ThreadProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Change this whenever messages are added so the view re-pins to bottom. */\n  autoScrollKey?: unknown;\n  /** Disable the sticky "scroll to bottom" affordance. */\n  hideScrollButton?: boolean;\n}'
+        }
+      ],
+      readme: '# @nucleux/md3-thread\n\nMaterial 3 auto-scrolling thread \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/md3-thread @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3Thread } from "@nucleux/md3-thread";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
+      peerDependencies: {
+        react: ">=18",
+        "react-dom": ">=18"
+      }
+    },
     {
       name: "md3-time-picker",
       package: "@nucleux/md3-time-picker",
@@ -5670,6 +5868,11 @@ export const Default: Story = {
       title: "Examples/Day-0 Dashboard (App Shell)",
       source: 'import type { Meta, StoryObj } from "@storybook/react";\nimport { Bell, Calendar, Home, ListChecks, Plus, Settings, Sparkles } from "lucide-react";\nimport {\n  Avatar,\n  GlobalNav,\n  IconButton,\n  SearchInput,\n  Sidebar,\n  SidebarItem,\n  SidebarSeparator,\n} from "../index";\nimport { MeetingDashboardBody } from "./meeting-dashboard";\n\n/**\n * Full "day-0-dashboard" app shell \u2014 GlobalNav + collapsed Sidebar wrapping the\n * meeting dashboard body. Faithful implementation of the source Figma design\n * (AI-UX-Pattern \u203A day-0-dashboard).\n */\nconst meta = {\n  title: "Examples/Day-0 Dashboard (App Shell)",\n  parameters: { layout: "fullscreen" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction BrandMark() {\n  return (\n    <div className="flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-br from-emerald-400 via-teal-500 to-violet-600 text-sm font-semibold text-white">\n      P\n    </div>\n  );\n}\n\nexport const Default: Story = {\n  render: () => (\n    <div className="flex h-screen flex-col bg-background">\n      <GlobalNav\n        left={<span className="text-base text-foreground">Heading</span>}\n        center={<SearchInput containerClassName="w-72" />}\n        right={\n          <>\n            <div className="relative">\n              <IconButton aria-label="Notifications" size="lg">\n                <Bell />\n              </IconButton>\n              <span className="absolute right-2 top-1.5 size-2 rounded-full bg-destructive ring-2 ring-background" />\n            </div>\n            <Avatar name="Eric" className="size-8" />\n          </>\n        }\n      />\n\n      <div className="flex min-h-0 flex-1">\n        <Sidebar footer={<SidebarItem icon={<Settings />} label="Settings" />}>\n          <BrandMark />\n          <IconButton aria-label="New recording" variant="solid">\n            <Plus />\n          </IconButton>\n          <SidebarSeparator />\n          <SidebarItem icon={<Home />} label="Home" active />\n          <SidebarItem icon={<Sparkles />} label="Assistant" />\n          <SidebarItem icon={<Calendar />} label="Calendar" />\n          <SidebarItem icon={<ListChecks />} label="Tasks" />\n          <SidebarSeparator />\n          <SidebarItem icon={<Plus />} label="Add" />\n        </Sidebar>\n\n        <main className="min-w-0 flex-1 overflow-y-auto">\n          <MeetingDashboardBody />\n        </main>\n      </div>\n    </div>\n  ),\n};'
     },
+    {
+      name: "e2e-agent-console",
+      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: "meeting-dashboard",
       title: "Examples/Meeting Dashboard",
@@ -5686,7 +5889,7 @@ export const Default: Story = {
 // src/html-snippets.json
 var html_snippets_default = {
   generatedFrom: "packages/mcp/gen/fixtures.tsx (do not edit \u2014 run scripts/gen-html-snippets.mjs)",
-  count: 137,
+  count: 142,
   snippets: {
     avatar: {
       name: "Avatar",
@@ -5706,15 +5909,15 @@ var html_snippets_default = {
     },
     activitylog: {
       name: "ActivityLog",
-      html: '<div class="flex flex-col gap-3"><p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Footprints</p><ol class="relative before:absolute before:left-3 before:top-1 before:h-[calc(100%-1rem)] before:w-px before:-translate-x-1/2 before:bg-border"><li class="relative flex gap-3 pb-4 last:pb-0"><span class="relative z-10 mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="text-sm text-foreground">Sent email to Sam</span><span class="text-xs text-muted-foreground">2m ago</span></span></li><li class="relative flex gap-3 pb-4 last:pb-0"><span class="relative z-10 mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="text-sm text-foreground">Read 3 CRM records</span><span class="text-xs text-muted-foreground">3m ago</span></span></li></ol></div>'
+      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>'
     },
     sessionrecap: {
       name: "SessionRecap",
-      html: '<div class="flex flex-col gap-3 rounded-xl border border-brand/20 bg-brand-muted/40 p-4"><div class="flex items-center gap-2 text-brand"><span class="[&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></span><span class="text-xs font-semibold uppercase tracking-wide">Session recap</span></div><p class="text-sm leading-relaxed text-foreground">Aria sent 3 emails and created 1 issue.</p></div>'
+      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>'
     },
     agentsteps: {
       name: "AgentSteps",
-      html: '<ol class="flex flex-col"><li class="relative flex gap-3 pb-5 last:pb-0 before:absolute before:left-[0.6875rem] before:top-6 before:h-[calc(100%-1.25rem)] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden"><span class="relative z-10 mt-0.5 inline-flex size-[1.375rem] shrink-0 items-center justify-center rounded-full border [&amp;_svg]:size-3.5 border-success bg-success text-success-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3.5" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-foreground">Reading skill doc</span></span></li><li class="relative flex gap-3 pb-5 last:pb-0 before:absolute before:left-[0.6875rem] before:top-6 before:h-[calc(100%-1.25rem)] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden" aria-current="step"><span class="relative z-10 mt-0.5 inline-flex size-[1.375rem] shrink-0 items-center justify-center rounded-full border [&amp;_svg]:size-3.5 border-info bg-info/10 text-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle size-3.5 animate-spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span><span class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-foreground">Executing command</span><span class="mt-1 block h-1 w-full overflow-hidden rounded-full bg-muted"><span class="block h-full rounded-full bg-info transition-[width]" style="width:60%"></span></span></span></li><li class="relative flex gap-3 pb-5 last:pb-0 before:absolute before:left-[0.6875rem] before:top-6 before:h-[calc(100%-1.25rem)] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden"><span class="relative z-10 mt-0.5 inline-flex size-[1.375rem] shrink-0 items-center justify-center rounded-full border [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle size-2 fill-current" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle></svg></span><span class="flex min-w-0 flex-1 flex-col gap-1"><span class="text-sm font-medium text-muted-foreground">Creating file</span></span></li></ol>'
+      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>'
     },
     actionplan: {
       name: "ActionPlan",
@@ -5722,51 +5925,51 @@ var html_snippets_default = {
     },
     actionconfirmation: {
       name: "ActionConfirmation",
-      html: '<div role="alertdialog" aria-label="Send 18 emails?" class="flex flex-col gap-3 rounded-xl border bg-background p-5 border-destructive/50"><div class="flex items-start gap-3"><span class="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&amp;_svg]:size-4 bg-destructive/10 text-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex min-w-0 flex-1 flex-col gap-1"><span class="inline-flex w-fit items-center rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground">AI action</span><h3 class="text-base font-semibold text-foreground">Send 18 emails?</h3><p class="text-sm text-muted-foreground">You can&#x27;t undo this.</p></div></div><div class="flex items-center justify-end gap-2"><button type="button" class="inline-flex items-center rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Cancel</button><button type="button" class="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring bg-destructive text-destructive-foreground hover:bg-destructive/90">Confirm</button></div></div>'
+      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>`
     },
     inlinefeedback: {
       name: "InlineFeedback",
-      html: '<div role="toolbar" aria-label="Response feedback" class="inline-flex items-center gap-0.5"><button type="button" aria-label="Copy" title="Copy" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><button type="button" aria-label="Good response" title="Good response" aria-pressed="false" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up" aria-hidden="true"><path d="M7 10v12"></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path></svg></button><button type="button" aria-label="Bad response" title="Bad response" aria-pressed="false" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-down" aria-hidden="true"><path d="M17 14V2"></path><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path></svg></button><button type="button" aria-label="Regenerate" title="Regenerate" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></button></div>'
+      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>'
     },
     rewritemenu: {
       name: "RewriteMenu",
-      html: '<div role="menu" aria-label="Rewrite" class="flex w-56 flex-col gap-0.5 rounded-xl border border-border bg-background p-1.5 shadow-md"><p class="px-2 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Rewrite</p><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg><span class="flex-1">Try again</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2" aria-hidden="true"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg><span class="flex-1">Make longer</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize2" aria-hidden="true"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" x2="21" y1="10" y2="3"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg><span class="flex-1">Make concise</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path><rect width="20" height="14" x="2" y="6" rx="2"></rect></svg><span class="flex-1">Make it professional</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list" aria-hidden="true"><path d="M3 12h.01"></path><path d="M3 18h.01"></path><path d="M3 6h.01"></path><path d="M8 12h13"></path><path d="M8 18h13"></path><path d="M8 6h13"></path></svg><span class="flex-1">Convert to bullet points</span></button><button type="button" role="menuitem" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none [&amp;_svg]:size-4 [&amp;_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle-question" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg><span class="flex-1">Ask a follow-up</span></button></div>'
+      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>'
     },
     toneselector: {
       name: "ToneSelector",
-      html: '<div class="flex flex-col gap-2"><span class="text-xs font-medium text-muted-foreground">Tone</span><div role="radiogroup" aria-label="Tone" class="flex flex-wrap gap-1.5"><button type="button" role="radio" aria-checked="true" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-brand bg-brand-muted text-brand">Professional</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Friendly</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Direct</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5 border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground">Playful</button></div></div>'
+      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>'
     },
     responsecomparison: {
       name: "ResponseComparison",
-      html: '<div class="flex flex-col gap-3"><p class="text-sm font-medium text-foreground">Which response is better?</p><div class="grid gap-3 sm:grid-cols-2"><div class="flex flex-col gap-3 rounded-xl border bg-background p-4 transition-colors border-border"><span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Response A</span><div class="flex-1 text-sm leading-relaxed text-foreground">Response A text</div><button type="button" aria-pressed="false" class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4 border-border bg-background text-foreground hover:bg-accent">Prefer this response</button></div><div class="flex flex-col gap-3 rounded-xl border bg-background p-4 transition-colors border-border"><span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Response B</span><div class="flex-1 text-sm leading-relaxed text-foreground">Response B text</div><button type="button" aria-pressed="false" class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4 border-border bg-background text-foreground hover:bg-accent">Prefer this response</button></div></div></div>'
+      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>'
     },
     promptenhancer: {
       name: "PromptEnhancer",
-      html: '<div class="flex flex-wrap items-center gap-2"><button type="button" class="inline-flex items-center gap-1.5 rounded-full border border-brand/30 bg-brand-muted/60 px-3 py-1.5 text-sm font-medium text-brand transition-colors hover:bg-brand-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>Enhance prompt</button><button type="button" class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Make it professional</button></div>'
+      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>'
     },
     attachmenttile: {
       name: "AttachmentTile",
-      html: '<div class="flex flex-wrap items-start gap-2"><div class="inline-flex max-w-64 items-center gap-2.5 rounded-lg border border-border bg-background py-2 pl-2.5 pr-2"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="flex min-w-0 flex-col"><span class="truncate text-sm font-medium text-foreground">Playbook.pdf</span><span class="truncate text-xs text-muted-foreground">PDF \xB7 240 KB</span></span><button type="button" aria-label="Remove Playbook.pdf" class="inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div>'
+      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>'
     },
     modelselector: {
       name: "ModelSelector",
-      html: '<div class="relative inline-block"><button type="button" aria-label="Model" aria-haspopup="listbox" aria-expanded="false" class="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;&gt;svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles text-brand" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span>Instant</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div>'
+      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>'
     },
     voiceinput: {
       name: "VoiceInput",
-      html: '<div class="flex items-center gap-3 rounded-full border border-border bg-background px-3 py-2" role="group" aria-label="Voice input"><button type="button" aria-label="Cancel dictation" class="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button><div class="flex h-8 flex-1 items-center gap-0.5" aria-hidden="true"><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:30%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:67%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:44%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:81%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:58%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:35%;animation-delay:450ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:72%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:49%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:86%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:63%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:40%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:77%;animation-delay:450ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:54%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:31%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:68%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:45%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:82%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:59%;animation-delay:450ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:36%;animation-delay:0ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:73%;animation-delay:90ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:50%;animation-delay:180ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:87%;animation-delay:270ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:64%;animation-delay:360ms"></span><span class="w-0.5 flex-1 rounded-full bg-info/70 animate-nx-typing" style="height:41%;animation-delay:450ms"></span></div><span class="text-sm tabular-nums text-muted-foreground">0:12</span><button type="button" aria-label="Stop and use recording" class="inline-flex size-9 items-center justify-center rounded-full bg-info text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></button></div>'
+      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>'
     },
     structuredinput: {
       name: "StructuredInput",
-      html: '<div class="flex flex-col gap-4 rounded-xl border border-border bg-background p-5"><p class="text-base font-medium text-foreground">Which audience is this for?</p><div role="radiogroup" aria-label="Which audience is this for?" class="flex flex-col gap-2"><button type="button" role="radio" aria-checked="false" class="flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-border bg-background text-foreground hover:bg-accent"><span class="inline-flex size-5 shrink-0 items-center justify-center border transition-colors [&amp;_svg]:size-3.5 rounded-full border-border"></span><span class="flex-1">Executives</span></button><button type="button" role="radio" aria-checked="false" class="flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-border bg-background text-foreground hover:bg-accent"><span class="inline-flex size-5 shrink-0 items-center justify-center border transition-colors [&amp;_svg]:size-3.5 rounded-full border-border"></span><span class="flex-1">Engineers</span></button></div><div class="flex items-center justify-end gap-2"><button type="button" class="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Skip</button><button type="button" disabled="" class="inline-flex items-center rounded-lg bg-info px-3 py-2 text-sm font-medium text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">Continue</button></div></div>'
+      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>'
     },
     connectorcard: {
       name: "ConnectorCard",
-      html: '<div class="flex items-center gap-3 rounded-xl border border-border bg-background p-4"><span class="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&amp;_svg]:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug" aria-hidden="true"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg></span><div class="flex min-w-0 flex-1 flex-col"><span class="text-sm font-medium text-foreground">GitHub</span><span class="text-xs text-muted-foreground">Read issues and code</span></div><button type="button" class="inline-flex shrink-0 items-center rounded-lg border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Connect</button></div>'
+      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>'
     },
     knowledgebasepicker: {
       name: "KnowledgeBasePicker",
-      html: '<div class="flex flex-col gap-2 rounded-xl border border-border bg-background p-3"><div class="flex items-center justify-between px-1"><p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Knowledge sources</p><span class="text-xs text-muted-foreground">1 selected</span></div><ul class="flex flex-col gap-1"><li><button type="button" role="checkbox" aria-checked="true" class="flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-brand bg-brand-muted/40"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="flex min-w-0 flex-1 flex-col"><span class="truncate text-sm font-medium text-foreground">CLAUDE.md</span><span class="truncate text-xs text-muted-foreground">project guide</span></span><span class="inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&amp;_svg]:size-3.5 border-brand bg-brand text-brand-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span></button></li><li><button type="button" role="checkbox" aria-checked="false" class="flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring border-transparent hover:bg-accent"><span class="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="flex min-w-0 flex-1 flex-col"><span class="truncate text-sm font-medium text-foreground">project.json</span><span class="truncate text-xs text-muted-foreground">config</span></span><span class="inline-flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors [&amp;_svg]:size-3.5 border-border"></span></button></li></ul></div>'
+      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>'
     },
     prompttemplate: {
       name: "PromptTemplate",
@@ -5774,11 +5977,11 @@ var html_snippets_default = {
     },
     aidisclosure: {
       name: "AiDisclosure",
-      html: '<div class="flex items-center gap-2 rounded-lg border border-brand/20 bg-brand-muted/40 px-3 py-2 text-sm text-foreground [&amp;_svg]:size-4 [&amp;_svg]:text-brand"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span>This content was generated by AI. Review it before relying on it.</span></div>'
+      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>'
     },
     aicaveat: {
       name: "AiCaveat",
-      html: '<p class="inline-flex items-center gap-1.5 text-xs text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><span>AI can make mistakes. Verify important information.</span></p>'
+      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>'
     },
     capabilityoverview: {
       name: "CapabilityOverview",
@@ -5786,19 +5989,19 @@ var html_snippets_default = {
     },
     memorysummary: {
       name: "MemorySummary",
-      html: '<div class="flex flex-col gap-4 rounded-xl border border-border bg-background p-5"><div class="flex items-start justify-between gap-3"><div class="flex items-center gap-2"><span class="inline-flex size-8 items-center justify-center rounded-lg bg-brand-muted text-brand [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M19.938 10.5a4 4 0 0 1 .585.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M19.967 17.484A4 4 0 0 1 18 18"></path></svg></span><div class="flex flex-col"><h3 class="text-sm font-semibold text-foreground">What I remember</h3><span class="text-xs text-muted-foreground">Updated 1 minute ago</span></div></div><button type="button" aria-label="Refresh memory" class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></button></div><div class="flex flex-col gap-4"><div class="flex flex-col gap-1.5"><p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">About you</p><ul class="flex flex-col gap-1"><li class="rounded-lg bg-muted/50 px-3 py-2 text-sm text-foreground">Prefers concise answers</li></ul></div></div><div class="flex items-center gap-2 border-t border-border pt-3"><input type="text" placeholder="Add or update a memory\u2026" aria-label="Add or update a memory\u2026" class="min-w-0 flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" value=""/><button type="button" aria-label="Add memory" class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-info text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></button></div></div>'
+      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>'
     },
     privacynotice: {
       name: "PrivacyNotice",
-      html: '<div class="inline-flex items-center gap-2 rounded-lg bg-muted/60 px-3 py-2 text-xs text-muted-foreground [&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg><span>Incognito chats aren&#x27;t saved or added to memory.</span></div>'
+      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>`
     },
     errorstate: {
       name: "ErrorState",
-      html: '<div role="alert" class="flex flex-col items-center gap-3 rounded-xl border border-border bg-background px-6 py-10 text-center"><span class="inline-flex size-12 items-center justify-center rounded-full [&amp;_svg]:size-6 bg-destructive/10 text-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex flex-col gap-1"><h3 class="text-base font-semibold text-foreground">Something went wrong</h3><p class="max-w-sm text-sm text-muted-foreground">Your prompt didn&#x27;t go through.</p></div><div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button type="button">Retry</button></div></div>'
+      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>`
     },
     audiomessage: {
       name: "AudioMessage",
-      html: '<div class="flex flex-col gap-2 rounded-xl border border-border bg-background p-3"><div class="flex items-center gap-3"><button type="button" aria-label="Play" aria-pressed="false" class="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-info text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg></button><div class="flex h-8 flex-1 items-center gap-0.5" aria-hidden="true"><span class="w-1 flex-1 rounded-full bg-info/60" style="height:40%;animation-delay:0ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:70%;animation-delay:90ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:55%;animation-delay:180ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:90%;animation-delay:270ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:60%;animation-delay:360ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:35%;animation-delay:450ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:75%;animation-delay:0ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:50%;animation-delay:90ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:85%;animation-delay:180ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:45%;animation-delay:270ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:65%;animation-delay:360ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:30%;animation-delay:450ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:80%;animation-delay:0ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:55%;animation-delay:90ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:70%;animation-delay:180ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:40%;animation-delay:270ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:60%;animation-delay:360ms"></span><span class="w-1 flex-1 rounded-full bg-info/60" style="height:50%;animation-delay:450ms"></span></div><span class="shrink-0 text-xs tabular-nums text-muted-foreground">0:42</span></div></div>'
+      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>'
     },
     badge: {
       name: "Badge",
@@ -5810,7 +6013,7 @@ var html_snippets_default = {
     },
     iconbutton: {
       name: "IconButton",
-      html: '<button type="button" class="inline-flex shrink-0 items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-5 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground size-9" aria-label="Home"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button>'
+      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>'
     },
     cardcontainer: {
       name: "CardContainer",
@@ -5826,7 +6029,7 @@ var html_snippets_default = {
     },
     gettingstartedpill: {
       name: "GettingStartedPill",
-      html: '<button type="button" aria-expanded="false" class="group inline-flex items-center gap-2.5 rounded-3xl border border-info/20 bg-background px-4 py-2 text-left shadow-[0_0_10px_-2px_hsl(var(--nx-info)/0.4)] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><span class="flex flex-1 items-center gap-2.5"><span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg></span><span class="text-sm text-foreground">Getting Started</span></span><span class="flex shrink-0 items-center gap-2.5"><span class="inline-flex items-center gap-1 whitespace-nowrap py-0.5 text-xs font-medium leading-4 bg-info/15 text-info rounded-[10px] px-2">2 of 4</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up size-4 text-muted-foreground"><path d="m18 15-6-6-6 6"></path></svg></span></button>'
+      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>'
     },
     chip: {
       name: "Chip",
@@ -5838,7 +6041,7 @@ var html_snippets_default = {
     },
     alert: {
       name: "Alert",
-      html: '<div role="alert" class="flex items-start gap-3 rounded-lg border p-4 text-sm border-info/30 bg-info/5 text-foreground [&amp;_[data-alert-icon]]:text-info"><span data-alert-icon="true" class="mt-0.5 shrink-0 [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span><div class="min-w-0 flex-1 space-y-1"><p class="font-medium leading-none">Heads up</p><div class="leading-relaxed text-muted-foreground">Body text</div></div></div>'
+      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>'
     },
     switch: {
       name: "Switch",
@@ -5854,7 +6057,7 @@ var html_snippets_default = {
     },
     searchinput: {
       name: "SearchInput",
-      html: '<div class="flex min-h-9 items-center gap-2 rounded-lg border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-within:ring-2 focus-within:ring-ring"><span class="shrink-0 text-muted-foreground [&amp;_svg]:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></span><input type="search" placeholder="Ask or search" class="min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground" aria-label="Search"/></div>'
+      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>'
     },
     globalnav: {
       name: "GlobalNav",
@@ -5862,7 +6065,7 @@ var html_snippets_default = {
     },
     sidebar: {
       name: "Sidebar",
-      html: '<nav class="flex h-full w-[69px] shrink-0 flex-col items-center gap-4 border-r border-border bg-background p-4"><button type="button" title="Home" aria-label="Home" aria-current="page" class="inline-flex size-9 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-5 bg-accent text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button><div role="separator" class="h-px w-9 shrink-0 bg-border"></div><button type="button" title="More" aria-label="More" class="inline-flex size-9 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-5 text-muted-foreground hover:bg-accent hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button><div class="mt-auto flex flex-col items-center gap-1"><button type="button" title="Settings" aria-label="Settings" class="inline-flex size-9 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-5 text-muted-foreground hover:bg-accent hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></button></div></nav>'
+      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>'
     },
     streamingtext: {
       name: "StreamingText",
@@ -5898,7 +6101,7 @@ var html_snippets_default = {
     },
     linkbutton: {
       name: "LinkButton",
-      html: '<a href="#" class="inline-flex items-center justify-center gap-2 rounded-lg text-sm font-semibold text-foreground underline decoration-from-font underline-offset-2 transition-opacity hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Learn more</a>'
+      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>'
     },
     checkbox: {
       name: "Checkbox",
@@ -5906,19 +6109,19 @@ var html_snippets_default = {
     },
     tabs: {
       name: "Tabs",
-      html: '<div data-orientation="horizontal" class="flex flex-col gap-3"><div role="tablist" aria-orientation="horizontal" class="gap-1 rounded-lg bg-muted p-1 text-muted-foreground inline-flex items-center"><button type="button" role="tab" id=":R0:-trigger-a" aria-selected="true" aria-controls=":R0:-content-a" tabindex="0" class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 bg-background text-foreground shadow-sm">A</button><button type="button" role="tab" id=":R0:-trigger-b" aria-selected="false" aria-controls=":R0:-content-b" tabindex="-1" class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 hover:text-foreground">B</button></div><div role="tabpanel" id=":R0:-content-a" aria-labelledby=":R0:-trigger-a" tabindex="0" class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Panel A</div></div>'
+      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>'
     },
     menu: {
       name: "Menu",
-      html: '<div role="menu" class="min-w-[12rem] rounded-lg border border-border bg-background p-1 text-foreground shadow-md"><button type="button" role="menuitem" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 text-foreground hover:bg-accent"><span class="flex-1 truncate">Try again</span></button><div role="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" role="menuitem" class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4 text-foreground hover:bg-accent"><span class="flex-1 truncate">Delete</span></button></div>'
+      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>'
     },
     suggestions: {
       name: "Suggestions",
-      html: '<div class="flex flex-wrap gap-2"><button type="button" class="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-muted px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Highlights</button><button type="button" class="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-muted px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Action items</button></div>'
+      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>'
     },
     suggestionchip: {
       name: "SuggestionChip",
-      html: '<button type="button" class="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-muted px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&amp;_svg]:size-4">Show highlights</button>'
+      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>'
     },
     richcheckboxgroup: {
       name: "RichCheckboxGroup",
@@ -5934,7 +6137,7 @@ var html_snippets_default = {
     },
     table: {
       name: "Table",
-      html: '<div class="relative w-full overflow-x-auto"><table class="w-full caption-bottom text-sm"><thead class="[&amp;_tr]:border-b [&amp;_tr]:border-border"><tr class="border-b border-border transition-colors hover:bg-muted/50"><th scope="col" class="h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground">Name</th><th scope="col" class="h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground">Status</th></tr></thead><tbody class="[&amp;_tr:last-child]:border-0"><tr class="border-b border-border transition-colors hover:bg-muted/50"><td class="px-4 py-2.5 align-middle text-foreground">Sync</td><td class="px-4 py-2.5 align-middle text-foreground">Done</td></tr></tbody></table></div>'
+      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>'
     },
     dialog: {
       name: "Dialog",
@@ -5958,7 +6161,7 @@ var html_snippets_default = {
     },
     breadcrumb: {
       name: "Breadcrumb",
-      html: '<nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground"><li class="inline-flex items-center gap-1.5"><a class="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" href="#">Home</a></li><li role="presentation" aria-hidden="true" class="[&amp;_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg></li><li class="inline-flex items-center gap-1.5"><span role="link" aria-disabled="true" aria-current="page" class="font-medium text-foreground">Details</span></li></ol></nav>'
+      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>'
     },
     accordion: {
       name: "Accordion",
@@ -6038,7 +6241,7 @@ var html_snippets_default = {
     },
     scrollarea: {
       name: "ScrollArea",
-      html: '<div class="relative overflow-hidden h-24 w-40"><div class="h-full w-full rounded-[inherit] [scrollbar-width:thin] [scrollbar-color:hsl(var(--nx-border))_transparent] [&amp;::-webkit-scrollbar]:h-2 [&amp;::-webkit-scrollbar]:w-2 [&amp;::-webkit-scrollbar-thumb]:rounded-full [&amp;::-webkit-scrollbar-thumb]:bg-border [&amp;::-webkit-scrollbar-track]:bg-transparent overflow-y-auto overflow-x-hidden"><div class="text-sm">Scrollable content</div></div></div>'
+      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>'
     },
     pagination: {
       name: "Pagination",
@@ -6078,7 +6281,7 @@ var html_snippets_default = {
     },
     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 bg-accent text-accent-foreground" role="gridcell" tabindex="0" type="button">29</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">30</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">1</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">2</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">3</button></td></tr></tbody></table></div></div></div>'
+      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>'
     },
     datepicker: {
       name: "DatePicker",
@@ -6090,11 +6293,11 @@ var html_snippets_default = {
     },
     chart: {
       name: "Chart",
-      html: '<div data-chart="" class="flex aspect-video justify-center text-xs [&amp;_.recharts-cartesian-grid_line]:stroke-border/50 [&amp;_.recharts-text]:fill-muted-foreground w-64" style="--color-desktop:hsl(var(--nx-info))"><div class="recharts-responsive-container" style="width:100%;height:100%;min-width:0"></div></div>'
+      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>'
     },
     datatable: {
       name: "DataTable",
-      html: '<div class="w-full"><div class="overflow-hidden rounded-md border border-border"><table class="w-full caption-bottom text-sm"><thead class="[&amp;_tr]:border-b [&amp;_tr]:border-border"><tr class="bg-muted/40"><th class="h-10 px-3 text-left align-middle font-medium text-muted-foreground"><button type="button" class="inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Invoice<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-50"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th class="h-10 px-3 text-left align-middle font-medium text-muted-foreground"><button type="button" class="inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Amount<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-50"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th></tr></thead><tbody><tr class="border-b border-border transition-colors hover:bg-muted/40"><td class="p-3 align-middle text-foreground">INV-001</td><td class="p-3 align-middle text-foreground">250</td></tr><tr class="border-b border-border transition-colors hover:bg-muted/40"><td class="p-3 align-middle text-foreground">INV-002</td><td class="p-3 align-middle text-foreground">150</td></tr></tbody></table></div></div>'
+      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>'
     },
     form: {
       name: "Form",
@@ -6102,15 +6305,15 @@ var html_snippets_default = {
     },
     md3button: {
       name: "Md3Button",
-      html: '<button type="button" class="relative inline-flex h-10 items-center justify-center gap-2 overflow-hidden rounded-full text-sm font-medium transition-shadow px-6 [&amp;_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none bg-md-primary text-md-on-primary hover:shadow-md-1"><span class="relative">Save</span></button>'
+      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>`
     },
     md3iconbutton: {
       name: "Md3IconButton",
-      html: '<button type="button" class="relative inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] bg-transparent text-md-on-surface-variant" aria-label="Favorite"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></button>'
+      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>`
     },
     md3fab: {
       name: "Md3Fab",
-      html: '<button type="button" class="relative inline-flex items-center justify-center overflow-hidden shadow-md-3 transition-shadow hover:shadow-md-4 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none bg-md-primary-container text-md-on-primary-container h-14 w-14 rounded-md-lg [&amp;_svg]:size-6" aria-label="Add"><span class="relative shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></button>'
+      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>`
     },
     md3textfield: {
       name: "Md3TextField",
@@ -6122,7 +6325,7 @@ var html_snippets_default = {
     },
     md3chip: {
       name: "Md3Chip",
-      html: '<div class="flex gap-2"><button type="button" class="relative inline-flex h-8 items-center gap-1.5 overflow-hidden rounded-md-sm px-3 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] border border-md-outline bg-transparent text-md-on-surface-variant outline-none focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Assist</span></button><button type="button" aria-pressed="true" class="relative inline-flex h-8 items-center gap-1.5 overflow-hidden rounded-md-sm px-3 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] border border-transparent bg-md-secondary-container text-md-on-secondary-container outline-none focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check relative shrink-0" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg><span class="relative">Filter</span></button><span class="relative inline-flex h-8 items-center gap-1.5 overflow-hidden rounded-md-sm px-3 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] border border-md-outline bg-transparent text-md-on-surface-variant outline-none focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38] pr-1"><span class="relative">Input</span><button type="button" aria-label="Remove" class="relative z-10 ml-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full text-current hover:bg-current/10 [&amp;_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></span></div>'
+      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>`
     },
     md3switch: {
       name: "Md3Switch",
@@ -6130,11 +6333,11 @@ var html_snippets_default = {
     },
     md3checkbox: {
       name: "Md3Checkbox",
-      html: '<button type="button" role="checkbox" aria-checked="true" class="relative inline-flex h-10 w-10 items-center justify-center rounded-full outline-none before:absolute before:inset-0 before:rounded-full before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38]" aria-label="Accept"><span class="relative flex h-[18px] w-[18px] items-center justify-center rounded-[2px] border-2 transition-colors [&amp;_svg]:size-[14px] border-md-primary bg-md-primary text-md-on-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span></button>'
+      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>`
     },
     md3radio: {
       name: "Md3Radio",
-      html: '<div role="radiogroup" aria-label="Choice" class="flex flex-col gap-1"><button type="button" role="radio" aria-checked="true" class="relative inline-flex h-10 w-10 items-center justify-center rounded-full outline-none before:absolute before:inset-0 before:rounded-full before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38]" aria-label="A"><span class="relative flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors border-md-primary"><span class="h-2.5 w-2.5 rounded-full bg-md-primary"></span></span></button><button type="button" role="radio" aria-checked="false" class="relative inline-flex h-10 w-10 items-center justify-center rounded-full outline-none before:absolute before:inset-0 before:rounded-full before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12] focus-visible:ring-2 focus-visible:ring-md-primary disabled:pointer-events-none disabled:opacity-[0.38]" aria-label="B"><span class="relative flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors border-md-on-surface-variant"></span></button></div>'
+      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>`
     },
     md3slider: {
       name: "Md3Slider",
@@ -6142,19 +6345,19 @@ var html_snippets_default = {
     },
     md3tabs: {
       name: "Md3Tabs",
-      html: '<div><div role="tablist" class="flex border-b border-md-surface-variant bg-md-surface"><button type="button" role="tab" aria-selected="true" class="relative inline-flex h-12 flex-1 items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-primary"><span class="relative">A</span><span aria-hidden="true" class="absolute inset-x-0 bottom-0 mx-auto h-[3px] w-3/5 rounded-t-full bg-md-primary"></span></button><button type="button" role="tab" aria-selected="false" class="relative inline-flex h-12 flex-1 items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-5 before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-on-surface-variant"><span class="relative">B</span></button></div><div role="tabpanel" class="p-4 text-md-on-surface">Panel A</div></div>'
+      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>`
     },
     md3navigationbar: {
       name: "Md3NavigationBar",
-      html: '<nav class="flex h-20 items-stretch justify-around bg-md-surface-container px-2"><button type="button" aria-current="page" class="group flex flex-1 flex-col items-center justify-center gap-1 pt-3 pb-2 outline-none"><span class="relative flex h-8 w-16 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] bg-md-secondary-container text-md-on-secondary-container"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></span><span class="text-xs font-medium text-md-on-surface">Home</span></button><button type="button" class="group flex flex-1 flex-col items-center justify-center gap-1 pt-3 pb-2 outline-none"><span class="relative flex h-8 w-16 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] text-md-on-surface-variant"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span></span><span class="text-xs font-medium text-md-on-surface-variant">Search</span></button></nav>'
+      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>`
     },
     md3navigationrail: {
       name: "Md3NavigationRail",
-      html: '<nav class="flex w-20 flex-col items-center gap-3 bg-md-surface py-4"><button type="button" aria-current="page" class="group flex w-full flex-col items-center gap-1 outline-none"><span class="relative flex h-8 w-14 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] bg-md-secondary-container text-md-on-secondary-container"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span></span><span class="text-xs font-medium text-md-on-surface">Home</span></button><button type="button" class="group flex w-full flex-col items-center gap-1 outline-none"><span class="relative flex h-8 w-14 items-center justify-center overflow-hidden rounded-full transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] group-hover:before:opacity-[0.08] group-focus-visible:before:opacity-[0.12] text-md-on-surface-variant"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span></span><span class="text-xs font-medium text-md-on-surface-variant">Search</span></button></nav>'
+      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>`
     },
     md3menu: {
       name: "Md3Menu",
-      html: '<div role="menu" class="min-w-[12rem] rounded-md-xs bg-md-surface-container py-2 text-md-on-surface shadow-md-2"><button type="button" role="menuitem" class="relative flex h-12 w-full items-center gap-3 overflow-hidden px-3 text-left text-sm text-md-on-surface outline-none [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] disabled:pointer-events-none disabled:opacity-[0.38]"><span class="relative flex-1 truncate">New</span></button><button type="button" role="menuitem" class="relative flex h-12 w-full items-center gap-3 overflow-hidden px-3 text-left text-sm text-md-on-surface outline-none [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] disabled:pointer-events-none disabled:opacity-[0.38]"><span class="relative flex-1 truncate">Open</span></button></div>'
+      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>`
     },
     md3dialog: {
       name: "Md3Dialog",
@@ -6162,7 +6365,7 @@ var html_snippets_default = {
     },
     md3snackbar: {
       name: "Md3Snackbar",
-      html: '<div role="status" aria-live="polite" class="flex min-h-12 items-center gap-2 rounded-md-xs bg-md-inverse-surface px-4 py-3 text-sm text-md-inverse-on-surface shadow-md-3"><span class="flex-1">Message archived</span><button type="button" class="relative -mr-2 shrink-0 overflow-hidden rounded-md-xs px-3 py-1.5 text-sm font-medium text-md-inverse-primary outline-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12]"><span class="relative">Undo</span></button></div>'
+      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>`
     },
     md3list: {
       name: "Md3List",
@@ -6174,7 +6377,7 @@ var html_snippets_default = {
     },
     md3navigationdrawer: {
       name: "Md3NavigationDrawer",
-      html: '<nav class="flex w-80 flex-col gap-1 bg-md-surface-container-low p-3 rounded-md-xl"><button type="button" aria-current="page" class="relative flex h-14 items-center gap-3 overflow-hidden rounded-full px-4 text-sm font-medium outline-none transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] bg-md-secondary-container text-md-on-secondary-container"><span class="relative shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg></span><span class="relative flex-1 truncate text-left">Inbox</span></button><button type="button" class="relative flex h-14 items-center gap-3 overflow-hidden rounded-full px-4 text-sm font-medium outline-none transition-colors [&amp;_svg]:size-6 before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] text-md-on-surface-variant"><span class="relative shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span><span class="relative flex-1 truncate text-left">Sent</span></button></nav>'
+      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>`
     },
     md3bottomsheet: {
       name: "Md3BottomSheet",
@@ -6182,7 +6385,7 @@ var html_snippets_default = {
     },
     md3segmentedbutton: {
       name: "Md3SegmentedButton",
-      html: '<div role="group" class="inline-flex h-10 divide-x divide-md-outline overflow-hidden rounded-full border border-md-outline"><button type="button" aria-pressed="false" class="relative inline-flex items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-on-surface"><span class="relative">Day</span></button><button type="button" aria-pressed="true" class="relative inline-flex items-center justify-center gap-2 overflow-hidden px-4 text-sm font-medium transition-colors [&amp;_svg]:size-[18px] before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary bg-md-secondary-container text-md-on-secondary-container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check relative shrink-0" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg><span class="relative">Week</span></button></div>'
+      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>`
     },
     md3badge: {
       name: "Md3Badge",
@@ -6214,7 +6417,7 @@ var html_snippets_default = {
     },
     md3search: {
       name: "Md3Search",
-      html: '<div class="flex h-14 w-full items-center gap-3 rounded-full bg-md-surface-container-high px-4 text-md-on-surface"><span class="shrink-0 text-md-on-surface-variant [&amp;_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></span><input type="search" placeholder="Search" class="h-full flex-1 bg-transparent text-base outline-none placeholder:text-md-on-surface-variant [&amp;::-webkit-search-cancel-button]:appearance-none" aria-label="Search"/></div>'
+      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>'
     },
     md3banner: {
       name: "Md3Banner",
@@ -6222,19 +6425,41 @@ var html_snippets_default = {
     },
     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 [&amp;_svg]:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-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>'
     },
     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-[&#x27;&#x27;] 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">{\n  &quot;q&quot;: &quot;x&quot;\n}</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>'
+      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>`
     },
     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-[&#x27;&#x27;] 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-[&#x27;&#x27;] 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>`
     },
     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-[&#x27;&#x27;] 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>`
+    },
+    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>`
+    },
+    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>'
+    },
+    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>'
+    },
+    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>'
+    },
+    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>`
     }
   }
 };