@nucleux/mcp 0.4.1 → 0.4.3

package/dist/index.js

@@ -21,8 +21,8 @@ var catalog_default = {
     note: "Every component is also re-exported from the @nucleux/react umbrella."
   },
   counts: {
-    components: 128,
-    packages: 132,
+    components: 137,
+    packages: 142,
     examples: 6
   },
   packages: [
@@ -2095,6 +2095,211 @@ 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",
+      kind: "component",
+      description: "A single step in an {@link Md3ActionPlan}. Numbered automatically by its order.",
+      summary: "Material 3 agent action plan \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-action-plan"
+      ],
+      exports: [
+        "Md3ActionPlanStep",
+        "Md3ActionPlan",
+        "Md3ActionPlanStepProps",
+        "Md3ActionPlanProps"
+      ],
+      components: [
+        "Md3ActionPlanStep",
+        "Md3ActionPlan"
+      ],
+      import: 'import { Md3ActionPlanStep, Md3ActionPlan } from "@nucleux/md3-action-plan";',
+      installSingle: "pnpm add @nucleux/md3-action-plan @nucleux/tokens",
+      props: [
+        {
+          name: "Md3ActionPlanStepProps",
+          source: 'export interface Md3ActionPlanStepProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {\n  /** Step title. */\n  title: React.ReactNode;\n  /** Supporting detail under the title. */\n  description?: React.ReactNode;\n}'
+        },
+        {
+          name: "Md3ActionPlanProps",
+          source: "export interface Md3ActionPlanProps extends React.HTMLAttributes<HTMLDivElement> {\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n  onAccept?: () => void;\n  onEdit?: () => void;\n  onReject?: () => void;\n  acceptLabel?: React.ReactNode;\n  editLabel?: React.ReactNode;\n  rejectLabel?: React.ReactNode;\n}"
+        }
+      ],
+      readme: '# @nucleux/md3-action-plan\n\nMaterial 3 agent action plan \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-plan @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3ActionPlan } from "@nucleux/md3-action-plan";\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-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",
+      kind: "component",
+      description: "A Material Design 3 agent task composer \u2014 a tonal surface with an auto-growing\nprompt field, a toolbar, and a filled send/stop button with a state layer.\nEnter submits, Shift+Enter newlines. Same API as {@link AgentComposer}.",
+      summary: "Material 3 agent task composer \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-agent-composer"
+      ],
+      exports: [
+        "Md3AgentComposer",
+        "Md3AgentComposerProps"
+      ],
+      components: [
+        "Md3AgentComposer"
+      ],
+      import: 'import { Md3AgentComposer } from "@nucleux/md3-agent-composer";',
+      installSingle: "pnpm add @nucleux/md3-agent-composer @nucleux/tokens",
+      props: [
+        {
+          name: "Md3AgentComposerProps",
+          source: 'export interface Md3AgentComposerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {\n  value: string;\n  onValueChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  placeholder?: string;\n  leftActions?: React.ReactNode;\n  rightActions?: React.ReactNode;\n  loading?: boolean;\n  onStop?: () => void;\n  maxHeight?: number;\n  disabled?: boolean;\n}'
+        }
+      ],
+      readme: '# @nucleux/md3-agent-composer\n\nMaterial 3 agent task composer \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-composer @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3AgentComposer } from "@nucleux/md3-agent-composer";\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-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",
@@ -2627,6 +2832,43 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-message",
+      package: "@nucleux/md3-message",
+      kind: "component",
+      description: "A Material Design 3 chat message row: a tonal avatar and a role-aware bubble\nwith MD3 shape and surface roles. Same API as {@link Message}.",
+      summary: "Material 3 chat message row \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-message"
+      ],
+      exports: [
+        "Md3Message",
+        "Md3MessageProps"
+      ],
+      components: [
+        "Md3Message"
+      ],
+      import: 'import { Md3Message } from "@nucleux/md3-message";',
+      installSingle: "pnpm add @nucleux/md3-message @nucleux/tokens",
+      props: [
+        {
+          name: "Md3MessageProps",
+          source: "export interface Md3MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Who authored the message. */\n  role: MessageRole;\n  /** Message text. Ignored if `children` is provided. */\n  content?: string;\n  /** True while the assistant is still streaming this message. */\n  streaming?: boolean;\n  /** Hide the avatar (e.g. for consecutive same-role messages). */\n  hideAvatar?: boolean;\n  /** Custom node rendered in place of the default avatar. */\n  avatar?: React.ReactNode;\n}"
+        }
+      ],
+      readme: '# @nucleux/md3-message\n\nMaterial 3 chat message row \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-message @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3Message } from "@nucleux/md3-message";\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-navigation-bar",
       package: "@nucleux/md3-navigation-bar",
@@ -2849,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",
@@ -3132,6 +3411,69 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-theme",
+      package: "@nucleux/md3-theme",
+      kind: "infrastructure",
+      description: "Material Design 3 theme \u2014 remaps Nucleux --nx-* tokens to the MD3 tonal palette so any component renders in a Material UI 3 look \u2014 Nucleux agentic UI for React.",
+      summary: "Material Design 3 theme \u2014 remaps Nucleux --nx-* tokens to the MD3 tonal palette so any component renders in a Material UI 3 look \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "material-design-3",
+        "md3",
+        "theme"
+      ],
+      exports: [],
+      components: [],
+      import: "",
+      installSingle: "pnpm add @nucleux/md3-theme",
+      props: [],
+      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",
@@ -3173,6 +3515,43 @@ Source: Figma "Recovery / Error & Empty States".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-tool-call",
+      package: "@nucleux/md3-tool-call",
+      kind: "component",
+      description: "A Material Design 3 tool-call card: name, live status, arguments, and result,\nwith a tonal surface and an on-color state layer. Same API as {@link ToolCall}.",
+      summary: "Material 3 agent tool-call card \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-tool-call"
+      ],
+      exports: [
+        "Md3ToolCall",
+        "Md3ToolCallProps"
+      ],
+      components: [
+        "Md3ToolCall"
+      ],
+      import: 'import { Md3ToolCall } from "@nucleux/md3-tool-call";',
+      installSingle: "pnpm add @nucleux/md3-tool-call @nucleux/tokens",
+      props: [
+        {
+          name: "Md3ToolCallProps",
+          source: 'export interface Md3ToolCallProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {\n  /** The tool call to render. */\n  toolCall: ToolCallData;\n  /** Whether the details are expanded initially. */\n  defaultOpen?: boolean;\n}'
+        }
+      ],
+      readme: '# @nucleux/md3-tool-call\n\nMaterial 3 agent tool-call card \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-tool-call @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3ToolCall } from "@nucleux/md3-tool-call";\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-tooltip",
       package: "@nucleux/md3-tooltip",
@@ -5505,7 +5884,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: 133,
+  count: 142,
   snippets: {
     avatar: {
       name: "Avatar",
@@ -5897,7 +6276,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 bg-accent text-accent-foreground" role="gridcell" tabindex="0" type="button">28</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">29</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100" role="gridcell" tabindex="-1" type="button">30</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">1</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">2</button></td><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20" role="presentation"><button name="day" class="rdp-button_reset rdp-button inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100 text-muted-foreground opacity-50" role="gridcell" tabindex="-1" type="button">3</button></td></tr></tbody></table></div></div></div>'
+      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>'
     },
     datepicker: {
       name: "DatePicker",
@@ -6038,6 +6417,42 @@ var html_snippets_default = {
     md3banner: {
       name: "Md3Banner",
       html: '<div role="region" class="flex flex-col gap-3 border-b border-md-outline-variant bg-md-surface px-4 py-3 text-md-on-surface sm:flex-row sm:items-center"><div class="flex flex-1 items-start gap-4"><p class="text-sm text-md-on-surface-variant">Update available</p></div></div>'
+    },
+    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>'
+    },
+    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>'
+    },
+    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>'
+    },
+    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>'
+    },
+    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-[&#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-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 [&amp;_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 [&amp;_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 [&amp;_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 [&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-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 [&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-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 [&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-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 [&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</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 [&amp;_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&#x27;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-[&#x27;&#x27;] 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-[&#x27;&#x27;] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]"><span class="relative">Confirm</span></button></div></div>'
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nucleux/mcp",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "description": "Model Context Protocol server for the Nucleux agentic UI component library — lets AI coding agents discover, search, and correctly use @nucleux components.",
   "bin": {