@nucleux/mcp 0.6.0 → 0.7.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 // src/catalog.json
 var catalog_default = {
   library: "@nucleux/react",
-  version: "0.6.0",
+  version: "0.7.0",
   generatedFrom: "packages/* (do not edit \u2014 run scripts/gen-mcp-catalog.mjs)",
   setup: {
     installFull: "pnpm add @nucleux/react @nucleux/tokens",
@@ -43,8 +43,8 @@ module.exports = {
     note: "Every component is also re-exported from the @nucleux/react umbrella. Icons in the examples come from lucide-react (optional; any icon set works)."
   },
   counts: {
-    components: 164,
-    packages: 169,
+    components: 176,
+    packages: 181,
     examples: 6
   },
   packages: [
@@ -6259,6 +6259,242 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "madlibs",
+      package: "@nucleux/madlibs",
+      kind: "component",
+      description: 'Madlibs \u2014 a request written as a natural sentence with a few labelled\nblanks ("Write a [friendly] reply to [Sam] about [the proposal]."). Each\nblank is an inline field with suggested values and a free-text fallback;\noptional clauses leave the sentence while empty; the assembled request\nshows as it fills. An agent-suggested value stays marked until kept. Use\nprompt names any missing blank in words (clearing nothing) and otherwise\nhands the sentence to `onUse` for the composer \u2014 it never sends \u2014 then\nconfirms with Undo. Variants: inline dropdowns, form rows, chip builder.',
+      summary: "Madlibs \u2014 a request written as a sentence with a few labelled blanks, filled and reviewed before it goes to the composer \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "madlibs",
+        "prompt-scaffold",
+        "fill-in-the-blank"
+      ],
+      exports: [
+        "parseMadlibsTemplate",
+        "getMadlibsBlanks",
+        "assembleMadlibsPrompt",
+        "madlibsBlankWidth",
+        "useMadlibs",
+        "useMadlibsBlank",
+        "Madlibs",
+        "MadlibsVariant",
+        "MadlibsBlankStyle",
+        "MadlibsDensity",
+        "MadlibsValues",
+        "MadlibsBlank",
+        "MadlibsSuggestion",
+        "MadlibsPart",
+        "MadlibsTemplatePart",
+        "MadlibsStatus",
+        "MadlibsProps",
+        "MadlibsController",
+        "UseMadlibsBlankOptions"
+      ],
+      components: [
+        "Madlibs"
+      ],
+      import: 'import { Madlibs } from "@nucleux/madlibs";',
+      installSingle: "pnpm add @nucleux/madlibs @nucleux/tokens",
+      props: [
+        {
+          name: "MadlibsProps",
+          source: 'export interface MadlibsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {\n  /**\n   * The scaffold sentence. `{id}` is a blank; `[ \u2026 ]` wraps an optional clause\n   * that leaves the sentence while its blank is empty:\n   * `"Summarize {document} for {audience}[, focusing on {topic}]."`\n   * Blanks outside a clause are required. Keep it to two\u2013four blanks \u2014 more is a form.\n   */\n  template: string;\n  /** Label and options for each blank in the template. */\n  blanks: MadlibsBlank[];\n  /** Controlled values, keyed by blank id. */\n  values?: MadlibsValues;\n  /** Initial values when uncontrolled. */\n  defaultValues?: MadlibsValues;\n  /** Called with every change to the values. */\n  onValuesChange?: (values: MadlibsValues) => void;\n  /**\n   * Called by Use prompt once every required blank is filled, with the\n   * assembled sentence. Put it in the composer for a final edit \u2014 the scaffold\n   * never sends.\n   */\n  onUse?: (prompt: string, values: MadlibsValues) => void;\n  /**\n   * Called by Undo after the prompt was placed. Restore the composer\'s previous\n   * draft; the scaffold returns to its blanks. Without it, no Undo is offered.\n   */\n  onUndo?: () => void;\n  /** Controlled "placed in the composer" state. */\n  placed?: boolean;\n  /** Initial placed state when uncontrolled. */\n  defaultPlaced?: boolean;\n  /** Called when the placed state changes (Use prompt, Undo, Back to the blanks). */\n  onPlacedChange?: (placed: boolean) => void;\n  /** A value the agent inferred for an empty blank, shown marked until kept. */\n  suggestion?: MadlibsSuggestion | null;\n  /** Called when the person keeps the suggestion (its value becomes the blank\'s value). */\n  onSuggestionKeep?: (suggestion: MadlibsSuggestion) => void;\n  /** Called when the person clears the suggestion. */\n  onSuggestionClear?: (suggestion: MadlibsSuggestion) => void;\n  /** Who suggests values. Defaults to "the assistant". */\n  agentName?: string;\n  /** Overline above the sentence. Defaults to "Build your request". */\n  heading?: React.ReactNode;\n  /** Helper line under the heading. */\n  description?: React.ReactNode;\n  /** Small print beside Use prompt. Defaults to "Nothing is sent until you send it."; `null` hides it. */\n  note?: React.ReactNode;\n  /** Label of the use button. Defaults to "Use prompt". */\n  submitLabel?: string;\n  /** Overline once placed. Defaults to "Placed in the composer". */\n  placedHeading?: React.ReactNode;\n  /** Message once placed. */\n  placedMessage?: React.ReactNode;\n  /** Show the assembled request as it fills. Defaults to true. */\n  showPreview?: boolean;\n  /** Label of the assembled request. Defaults to "Preview". */\n  previewLabel?: string;\n  /** Layout. Defaults to "inline-dropdowns". */\n  variant?: MadlibsVariant;\n  /** Blank treatment. Defaults to "filled". */\n  blankStyle?: MadlibsBlankStyle;\n  /** Spacing. Defaults to "comfortable". */\n  density?: MadlibsDensity;\n  /** Flag missing required blanks from the start, as if Use prompt had been pressed. */\n  defaultShowErrors?: boolean;\n}',
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange">'
+          ],
+          members: [
+            {
+              name: "template",
+              type: "string",
+              required: true,
+              description: 'The scaffold sentence. `{id}` is a blank; `[ \u2026 ]` wraps an optional clause that leaves the sentence while its blank is empty: `"Summarize {document} for {audience}[, focusing on {topic}]."` Blanks outside a clause are required. Keep it to two\u2013four blanks \u2014 more is a form.'
+            },
+            {
+              name: "blanks",
+              type: "MadlibsBlank[]",
+              required: true,
+              description: "Label and options for each blank in the template."
+            },
+            {
+              name: "values",
+              type: "MadlibsValues",
+              required: false,
+              description: "Controlled values, keyed by blank id."
+            },
+            {
+              name: "defaultValues",
+              type: "MadlibsValues",
+              required: false,
+              description: "Initial values when uncontrolled."
+            },
+            {
+              name: "onValuesChange",
+              type: "(values: MadlibsValues) => void",
+              required: false,
+              description: "Called with every change to the values."
+            },
+            {
+              name: "onUse",
+              type: "(prompt: string, values: MadlibsValues) => void",
+              required: false,
+              description: "Called by Use prompt once every required blank is filled, with the assembled sentence. Put it in the composer for a final edit \u2014 the scaffold never sends."
+            },
+            {
+              name: "onUndo",
+              type: "() => void",
+              required: false,
+              description: "Called by Undo after the prompt was placed. Restore the composer's previous draft; the scaffold returns to its blanks. Without it, no Undo is offered."
+            },
+            {
+              name: "placed",
+              type: "boolean",
+              required: false,
+              description: 'Controlled "placed in the composer" state.'
+            },
+            {
+              name: "defaultPlaced",
+              type: "boolean",
+              required: false,
+              description: "Initial placed state when uncontrolled."
+            },
+            {
+              name: "onPlacedChange",
+              type: "(placed: boolean) => void",
+              required: false,
+              description: "Called when the placed state changes (Use prompt, Undo, Back to the blanks)."
+            },
+            {
+              name: "suggestion",
+              type: "MadlibsSuggestion | null",
+              required: false,
+              description: "A value the agent inferred for an empty blank, shown marked until kept."
+            },
+            {
+              name: "onSuggestionKeep",
+              type: "(suggestion: MadlibsSuggestion) => void",
+              required: false,
+              description: "Called when the person keeps the suggestion (its value becomes the blank's value)."
+            },
+            {
+              name: "onSuggestionClear",
+              type: "(suggestion: MadlibsSuggestion) => void",
+              required: false,
+              description: "Called when the person clears the suggestion."
+            },
+            {
+              name: "agentName",
+              type: "string",
+              required: false,
+              description: 'Who suggests values. Defaults to "the assistant".'
+            },
+            {
+              name: "heading",
+              type: "React.ReactNode",
+              required: false,
+              description: 'Overline above the sentence. Defaults to "Build your request".'
+            },
+            {
+              name: "description",
+              type: "React.ReactNode",
+              required: false,
+              description: "Helper line under the heading."
+            },
+            {
+              name: "note",
+              type: "React.ReactNode",
+              required: false,
+              description: 'Small print beside Use prompt. Defaults to "Nothing is sent until you send it."; `null` hides it.'
+            },
+            {
+              name: "submitLabel",
+              type: "string",
+              required: false,
+              description: 'Label of the use button. Defaults to "Use prompt".'
+            },
+            {
+              name: "placedHeading",
+              type: "React.ReactNode",
+              required: false,
+              description: 'Overline once placed. Defaults to "Placed in the composer".'
+            },
+            {
+              name: "placedMessage",
+              type: "React.ReactNode",
+              required: false,
+              description: "Message once placed."
+            },
+            {
+              name: "showPreview",
+              type: "boolean",
+              required: false,
+              description: "Show the assembled request as it fills. Defaults to true."
+            },
+            {
+              name: "previewLabel",
+              type: "string",
+              required: false,
+              description: 'Label of the assembled request. Defaults to "Preview".'
+            },
+            {
+              name: "variant",
+              type: "MadlibsVariant",
+              required: false,
+              description: 'Layout. Defaults to "inline-dropdowns".',
+              values: [
+                "inline-dropdowns",
+                "form-rows",
+                "chip-builder"
+              ]
+            },
+            {
+              name: "blankStyle",
+              type: "MadlibsBlankStyle",
+              required: false,
+              description: 'Blank treatment. Defaults to "filled".',
+              values: [
+                "filled",
+                "underline"
+              ]
+            },
+            {
+              name: "density",
+              type: "MadlibsDensity",
+              required: false,
+              description: 'Spacing. Defaults to "comfortable".',
+              values: [
+                "comfortable",
+                "compact"
+              ]
+            },
+            {
+              name: "defaultShowErrors",
+              type: "boolean",
+              required: false,
+              description: "Flag missing required blanks from the start, as if Use prompt had been pressed."
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/madlibs\n\nMadlibs \u2014 a request written as a sentence with a few labelled blanks, filled and reviewed before it goes to the 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\nA fill-in-the-blank prompt scaffold: "Summarize [document] for [audience], focusing on [topic]." Each blank has a\nhuman label, suggested values and a free-text fallback; an optional clause (`[ \u2026 ]`) leaves the sentence while its\nblank is empty; the assembled request shows as it fills. An agent-suggested value stays marked until kept. Use prompt\nnames any missing blank in words (clearing nothing), otherwise hands the sentence to `onUse` for your composer \u2014 the\nscaffold never sends \u2014 and confirms with Undo.\n\n## Exports\n\n- **`Madlibs`** \u2014 the scaffold card\n- `useMadlibs`, `useMadlibsBlank` \u2014 the shared state machine and blank keyboard/ARIA wiring (used by `@nucleux/md3-madlibs`)\n- `parseMadlibsTemplate`, `getMadlibsBlanks`, `assembleMadlibsPrompt`, `madlibsBlankWidth` \u2014 template helpers\n- Types: `MadlibsProps`, `MadlibsBlank`, `MadlibsValues`, `MadlibsSuggestion`, `MadlibsVariant`, `MadlibsBlankStyle`, `MadlibsDensity`, `MadlibsStatus`, `MadlibsPart`, `MadlibsTemplatePart`, `MadlibsController`, `UseMadlibsBlankOptions`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `inline-dropdowns` (default) | A flowing sentence; each blank is an inline field with a list of values |\n| `form-rows` | One labelled row per blank, when each slot needs room |\n| `chip-builder` | Tap chips to fill the next blank; tap a filled chip to remove it |\n\n`blankStyle` (`filled` / `underline`) and `density` (`comfortable` / `compact`) adjust the look.\n\n## Keyboard\n\nEach blank is an editable combobox: type anything, or ArrowDown/ArrowUp to open and move through its values, Enter to\npick, Escape to close.\n\n## Install\n\n```bash\npnpm add @nucleux/madlibs @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Madlibs } from "@nucleux/madlibs";\nimport { OpenInput } from "@nucleux/open-input";\n\n<Madlibs\n  template="Summarize {document} for {audience}[, focusing on {topic}]."\n  blanks={[\n    { id: "document", label: "Document", options: ["Q3 Customer Research", "September release notes"] },\n    { id: "audience", label: "Audience", options: ["Leadership", "Engineering"] },\n    { id: "topic", label: "Topic", options: ["Onboarding issues", "Pricing feedback"] },\n  ]}\n  suggestion={{ blank: "audience", value: "Leadership", reason: "the document\'s owner is the leadership team." }}\n  onUse={(prompt) => { previous.current = draft; setDraft(prompt); }}\n  onUndo={() => setDraft(previous.current)}\n/>\n<OpenInput aria-label="Message" value={draft} onValueChange={setDraft} onSubmit={send} />\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"
+      },
+      twin: {
+        name: "md3-madlibs",
+        package: "@nucleux/md3-madlibs",
+        component: "Md3Madlibs",
+        sharesApi: true
+      }
+    },
     {
       name: "marker",
       package: "@nucleux/marker",
@@ -9118,6 +9354,56 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         "react-dom": ">=18"
       }
     },
+    {
+      name: "md3-madlibs",
+      package: "@nucleux/md3-madlibs",
+      kind: "component",
+      description: "Material 3 Madlibs \u2014 the same scaffold and API as `Madlibs` from\n`@nucleux/madlibs`: a sentence with labelled blanks (tonal inline fields\nthat settle into the sentence as they fill), optional clauses, the\nassembled request below, and Use prompt, which places the sentence in the\ncomposer (never sends) and confirms with Undo. An agent-suggested value is\nitalic, primary-tinted and marked until kept; a missing required blank\ngets an error outline and words, and keeps everything else.",
+      summary: "Material 3 Madlibs \u2014 a request written as a sentence with a few labelled blanks, filled and reviewed before it goes to the composer \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3",
+        "material",
+        "md3-madlibs",
+        "madlibs",
+        "prompt-scaffold",
+        "fill-in-the-blank"
+      ],
+      exports: [
+        "Md3Madlibs",
+        "Md3MadlibsProps",
+        "Md3MadlibsVariant",
+        "Md3MadlibsBlankStyle",
+        "Md3MadlibsDensity",
+        "Md3MadlibsValues",
+        "Md3MadlibsBlank",
+        "Md3MadlibsSuggestion",
+        "Md3MadlibsStatus"
+      ],
+      components: [
+        "Md3Madlibs"
+      ],
+      import: 'import { Md3Madlibs } from "@nucleux/md3-madlibs";',
+      installSingle: "pnpm add @nucleux/md3-madlibs @nucleux/tokens",
+      props: [],
+      readme: '# @nucleux/md3-madlibs\n\nMaterial 3 Madlibs \u2014 a request written as a sentence with a few labelled blanks, filled and reviewed before it goes to the 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**Same API as the shadcn twin.** The props, callbacks, keyboard model and accessible names are those of [`@nucleux/madlibs`](https://www.npmjs.com/package/@nucleux/madlibs) (`Madlibs`) \u2014 the props types are re-exported from it and the state logic is shared \u2014 so you switch families by changing only the import. Only the look differs: tonal inline fields that settle into the sentence as they fill, an italic primary-tinted suggested value, an error outline with words, Material 3 colour roles, shape and state layers (motion reduced under `prefers-reduced-motion`).\n\n## Exports\n\n- **`Md3Madlibs`** \u2014 the scaffold card (variants `inline-dropdowns`, `form-rows`, `chip-builder`; `blankStyle` `filled` / `underline`; `density`)\n- Types: `Md3MadlibsProps`, `Md3MadlibsBlank`, `Md3MadlibsValues`, `Md3MadlibsSuggestion`, `Md3MadlibsVariant`, `Md3MadlibsBlankStyle`, `Md3MadlibsDensity`, `Md3MadlibsStatus`\n\n## Install\n\n```bash\npnpm add @nucleux/md3-madlibs @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3Madlibs } from "@nucleux/md3-madlibs";\nimport { Md3AgentComposer } from "@nucleux/md3-agent-composer";\n\n<Md3Madlibs\n  template="Summarize {document} for {audience}[, focusing on {topic}]."\n  blanks={blanks}\n  description="Fill in the blanks \u2014 you can edit the whole sentence before sending."\n  onUse={(prompt) => { previous.current = draft; setDraft(prompt); }}\n  onUndo={() => setDraft(previous.current)}\n/>\n<Md3AgentComposer placeholder="Or write your own request\u2026" value={draft} onValueChange={setDraft} onSubmit={send} />\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"
+      },
+      twin: {
+        name: "madlibs",
+        package: "@nucleux/madlibs",
+        component: "Madlibs",
+        sharesApi: true
+      }
+    },
     {
       name: "md3-mcp-connection",
       package: "@nucleux/md3-mcp-connection",
@@ -9359,6 +9645,68 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         sharesApi: true
       }
     },
+    {
+      name: "md3-modes",
+      package: "@nucleux/md3-modes",
+      kind: "component",
+      description: "Material 3 segmented control for Modes: an outlined track of segments, the\nactive one in secondary-container with a check. Same radio group and keyboard\nmodel as the shadcn `ModesSegmented` (Arrow keys move, Space/Enter choose).",
+      summary: "Material 3 Modes \u2014 choose how the agent approaches a request (Brainstorm, Draft, Review, Plan), shown as a chip in the composer and switchable before sending \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3",
+        "material",
+        "md3-modes",
+        "modes",
+        "mode-picker",
+        "prompt-scaffolds"
+      ],
+      exports: [
+        "Md3ModesSegmented",
+        "Md3ModesList",
+        "Md3ModesChip",
+        "Md3ModesPicker",
+        "Md3ModesNote",
+        "Md3Modes",
+        "Md3ModeOption",
+        "Md3ModesNotice",
+        "Md3ModesVariant",
+        "Md3ModesSubmitDetails",
+        "Md3ModesProps",
+        "Md3ModesSegmentedProps",
+        "Md3ModesListProps",
+        "Md3ModesChipProps",
+        "Md3ModesPickerProps",
+        "Md3ModesNoteProps"
+      ],
+      components: [
+        "Md3Modes",
+        "Md3ModesSegmented",
+        "Md3ModesList",
+        "Md3ModesChip",
+        "Md3ModesPicker",
+        "Md3ModesNote"
+      ],
+      import: 'import { Md3Modes, Md3ModesSegmented, Md3ModesList, Md3ModesChip } from "@nucleux/md3-modes";',
+      installSingle: "pnpm add @nucleux/md3-modes @nucleux/tokens",
+      props: [],
+      readme: '# @nucleux/md3-modes\n\nMaterial 3 Modes \u2014 choose how the agent approaches a request (Brainstorm, Draft, Review, Plan), shown as a chip in the composer and switchable before sending \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**Same API as the shadcn twin.** The props, callbacks, states, keyboard model and accessible names are those of [`@nucleux/modes`](https://www.npmjs.com/package/@nucleux/modes) (`Modes`) \u2014 the props types are re-exported from it and the state logic (`useModes`) is shared \u2014 so you switch families by changing only the import. Only the look differs: Material 3 colour roles, shape, elevation, state layers and motion (reduced under `prefers-reduced-motion`). In the `composer` variant the Mode chip sits in an `Md3AgentComposer` toolbar and the picker grows up from the composer.\n\n## Exports\n\n- **`Md3Modes`** \u2014 the whole pattern (`variant`: `composer` \xB7 `segmented` \xB7 `list` \xB7 `chip`)\n- **`Md3ModesSegmented`** \u2014 an `Md3SegmentedButton` of modes (radio group)\n- **`Md3ModesList`** \u2014 mode rows: 40dp icon tile, name, what changes, unavailable reason, trailing check\n- **`Md3ModesChip`** \u2014 outlined "Mode \u25BE" assist chip, or tonal "Mode **Plan** \u25BE \xD7" once set\n- **`Md3ModesPicker`** \u2014 the menu-surface dialog: heading, rows, error-container alert, "No mode"\n- **`Md3ModesNote`** \u2014 "Mode changed to \u2026 Your text is unchanged." with Undo\n- Types: `Md3ModesProps`, `Md3ModeOption`, `Md3ModesVariant`, `Md3ModesNotice`, `Md3ModesSubmitDetails`, and each sub-component\'s `Md3\u2026Props`\n\n## Install\n\n```bash\npnpm add @nucleux/md3-modes @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3Modes } from "@nucleux/md3-modes";\nimport { Flag, Lightbulb, NotebookPen, Eye } from "lucide-react";\n\n<Md3Modes\n  modes={[\n    { id: "brainstorm", name: "Brainstorm", icon: <Lightbulb />, description: "Explore several possible directions." },\n    { id: "draft", name: "Draft", icon: <NotebookPen />, description: "Write a first version you can edit." },\n    { id: "review", name: "Review", icon: <Eye />, description: "Check existing work for gaps and risks." },\n    { id: "plan", name: "Plan", icon: <Flag />, description: "Break the work into steps with owners and dates." },\n  ]}\n  onSubmit={(text, { mode }) => send(text, { mode: mode?.id })}\n/>\n```\n\n`sendLabel` is accepted for API parity; the send button is named by `Md3AgentComposer` ("Send").\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"
+      },
+      twin: {
+        name: "modes",
+        package: "@nucleux/modes",
+        component: "Modes",
+        sharesApi: true
+      }
+    },
     {
       name: "md3-name",
       package: "@nucleux/md3-name",
@@ -9822,6 +10170,59 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         sharesApi: true
       }
     },
+    {
+      name: "md3-preset-styles",
+      package: "@nucleux/md3-preset-styles",
+      kind: "component",
+      description: 'The Material 3 twin of `PresetStyles` \u2014 same props, states, keyboard model\nand accessible names (they share `usePresetStyles`). In `variant="menu"` the\nStyle control sits in `Md3AgentComposer`\'s toolbar and opens "Use style": a\nmenu surface with the styles on the left (secondary-container for the chosen\none, a state layer for the one being previewed) and a sample reply on the\nright that follows pointer and focus; Create & edit styles opens an outlined\ncard with a segmented "Start from", a linear progress while the app\ngenerates, then a review card with filled text fields and Save / Save and\nuse. `"grid"` and `"list"` draw the swatches on M3 container roles with a\nprimary outline for the chosen one. Motion is reduced under\n`prefers-reduced-motion`.',
+      summary: "Material 3 Preset Styles \u2014 named styles for how replies are written, previewed and switchable mid-conversation \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3",
+        "material",
+        "md3-preset-styles",
+        "preset-styles",
+        "styles",
+        "style-picker",
+        "prompt-scaffold"
+      ],
+      exports: [
+        "Md3PresetStyles",
+        "Md3PresetStylesProps",
+        "Md3PresetStylesVariant",
+        "Md3PresetStylesView",
+        "Md3PresetStylesNotice",
+        "Md3PresetStyle",
+        "Md3PresetStyleSwatch",
+        "Md3PresetStyleReference",
+        "Md3PresetStyleRequest",
+        "Md3PresetStyleDraft",
+        "Md3PresetStyleSource"
+      ],
+      components: [
+        "Md3PresetStyles"
+      ],
+      import: 'import { Md3PresetStyles } from "@nucleux/md3-preset-styles";',
+      installSingle: "pnpm add @nucleux/md3-preset-styles @nucleux/tokens",
+      props: [],
+      readme: '# @nucleux/md3-preset-styles\n\nMaterial 3 Preset Styles \u2014 named styles for how replies are written, previewed and switchable mid-conversation \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**Same API as the shadcn twin.** The props, callbacks, keyboard model, states and accessible names are those of [`@nucleux/preset-styles`](https://www.npmjs.com/package/@nucleux/preset-styles) (`PresetStyles`) \u2014 the props types are re-exported from it and both run on its `usePresetStyles` \u2014 so you switch families by changing only the import. Only the look differs: Material 3 colour roles, shape, elevation, state layers and motion (reduced under `prefers-reduced-motion`).\n\n## Exports\n\n- **`Md3PresetStyles`** \u2014 `variant="menu"`: the Style control in `Md3AgentComposer`\'s toolbar opens "Use style" \u2014 styles on the left (secondary-container for the chosen one), a sample reply on the right that follows pointer and focus, Create & edit styles (an outlined card with a segmented "Start from", linear progress, then a review card with filled text fields). `"grid"` / `"list"`: swatches on M3 container roles with a primary outline.\n- Types: `Md3PresetStylesProps`, `Md3PresetStyle`, `Md3PresetStylesVariant`, `Md3PresetStylesView`, `Md3PresetStylesNotice`, `Md3PresetStyleSwatch`, `Md3PresetStyleReference`, `Md3PresetStyleRequest`, `Md3PresetStyleDraft`, `Md3PresetStyleSource`\n\n## Install\n\n```bash\npnpm add @nucleux/md3-preset-styles @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3PresetStyles } from "@nucleux/md3-preset-styles";\n\n<Md3PresetStyles\n  variant="menu"\n  styles={styles}\n  previewPrompt="Summarize the October release."\n  onGenerateStyle={(req) => api.generateStyle(req)}\n  onSubmit={(text, style) => send(text, { style })}\n/>\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"
+      },
+      twin: {
+        name: "preset-styles",
+        package: "@nucleux/preset-styles",
+        component: "PresetStyles",
+        sharesApi: true
+      }
+    },
     {
       name: "md3-proactive",
       package: "@nucleux/md3-proactive",
@@ -9962,6 +10363,57 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         sharesApi: false
       }
     },
+    {
+      name: "md3-prompt-enhancer",
+      package: "@nucleux/md3-prompt-enhancer",
+      kind: "component",
+      description: "The Material 3 Prompt Enhancer: an Improve-style tool in the\n`Md3AgentComposer` toolbar proposes a clearer version of the request, shown\nin an outlined card above the composer \u2014 what they wrote beside the\nsuggestion, every addition highlighted in primary-container and explained,\nassumptions labelled, each change removable with a checkbox. Use updates the\ncomposer with Undo and sends nothing; Edit, Keep original and a failure line\nthat leaves the original untouched are built in. Same API, states and\naccessible names as `PromptEnhancer` from `@nucleux/prompt-enhancer`.",
+      summary: "Material 3 Prompt Enhancer \u2014 proposes a clearer version of the request you wrote, every addition marked and explained \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3",
+        "material",
+        "md3-prompt-enhancer",
+        "prompt-enhancer",
+        "prompt",
+        "enhance",
+        "prompt-scaffold"
+      ],
+      exports: [
+        "Md3PromptEnhancer",
+        "Md3PromptEnhancerProps",
+        "Md3PromptEnhancerVariant",
+        "Md3PromptEnhancerState",
+        "Md3PromptEnhancerDiffStyle",
+        "Md3PromptEnhancerChange",
+        "Md3PromptEnhancerSuggestion",
+        "Md3PromptEnhancerSegment",
+        "Md3PromptEnhancerController"
+      ],
+      components: [
+        "Md3PromptEnhancer"
+      ],
+      import: 'import { Md3PromptEnhancer } from "@nucleux/md3-prompt-enhancer";',
+      installSingle: "pnpm add @nucleux/md3-prompt-enhancer @nucleux/tokens",
+      props: [],
+      readme: '# @nucleux/md3-prompt-enhancer\n\nMaterial 3 Prompt Enhancer \u2014 proposes a clearer version of the request you wrote, every addition marked and explained \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**Same API as the shadcn twin.** The props, callbacks, states, keyboard model and accessible names are those of [`@nucleux/prompt-enhancer`](https://www.npmjs.com/package/@nucleux/prompt-enhancer) (`PromptEnhancer`) \u2014 the props types are re-exported from it and the logic is its `usePromptEnhancer` \u2014 so you switch families by changing only the import. Only the look differs: an outlined review card above an `Md3AgentComposer`, primary-container highlights, M3 checkboxes, text/outlined/filled buttons, state layers and motion (reduced under `prefers-reduced-motion`).\n\n## Exports\n\n- **`Md3PromptEnhancer`** \u2014 the composer with an Enhance tool, the review card and status lines\n- Types: `Md3PromptEnhancerProps`, `Md3PromptEnhancerVariant`, `Md3PromptEnhancerState`, `Md3PromptEnhancerDiffStyle`, `Md3PromptEnhancerChange`, `Md3PromptEnhancerSuggestion`, `Md3PromptEnhancerSegment`, `Md3PromptEnhancerController`\n\n## Install\n\n```bash\npnpm add @nucleux/md3-prompt-enhancer @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3PromptEnhancer } from "@nucleux/md3-prompt-enhancer";\n\n<Md3PromptEnhancer\n  value={draft}\n  onValueChange={setDraft}\n  onEnhance={(prompt, { signal }) => api.enhance(prompt, { signal })}\n  onSubmit={send}\n/>\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"
+      },
+      twin: {
+        name: "prompt-enhancer",
+        package: "@nucleux/prompt-enhancer",
+        component: "PromptEnhancer",
+        sharesApi: true
+      }
+    },
     {
       name: "md3-radio",
       package: "@nucleux/md3-radio",
@@ -10806,11 +11258,11 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
       }
     },
     {
-      name: "md3-switch",
-      package: "@nucleux/md3-switch",
+      name: "md3-suggestions",
+      package: "@nucleux/md3-suggestions",
       kind: "component",
-      description: "A Material Design 3 switch with a growing handle and optional check icon.",
-      summary: "Material 3 switch \u2014 Nucleux agentic UI for React.",
+      description: 'The Material 3 suggestions row \u2014 the same API and behaviour as\n`Suggestions`: at most three verb-labelled chips above the composer\n("compose"), under an answer ("follow-up") or as a floating toolbar on a\nselection ("selection"). The row is headed by the agent\'s mark and name\n(`label`, "Aria suggests") with an info icon button that reveals why\n(`reason`) and a close icon button (Escape too); compose chips are outlined\nM3 suggestion chips with a leading primary add icon and the standard state\nlayer. Choosing a chip only calls `onSelect` \u2014 never sends \u2014 and `status`\nswaps the row for a one-line confirmation with a text Undo, a dismissed or\nno-longer-relevant line, a loading indicator or an error-container line\nwith Retry. Arrow keys, Home and End move between chips; motion is reduced\nunder `prefers-reduced-motion`.',
+      summary: "Material 3 Suggestions \u2014 agent-marked suggestion chips above the composer that add to the request, never send it \u2014 Nucleux agentic UI for React.",
       keywords: [
         "nucleux",
         "react",
@@ -10819,16 +11271,66 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         "agentic",
         "ai",
         "tailwind",
-        "md3-switch"
+        "md3",
+        "material",
+        "md3-suggestions",
+        "suggestions",
+        "prompt-scaffold",
+        "chips"
       ],
       exports: [
-        "Md3Switch",
-        "Md3SwitchProps"
+        "Md3Suggestions",
+        "Md3SuggestionsComposer",
+        "Md3SuggestionsProps",
+        "Md3SuggestionsComposerProps",
+        "Md3SuggestionItem",
+        "Md3SuggestionsVariant",
+        "Md3SuggestionsStatus",
+        "Md3SuggestionsMessages"
       ],
       components: [
-        "Md3Switch"
+        "Md3Suggestions",
+        "Md3SuggestionsComposer"
       ],
-      import: 'import { Md3Switch } from "@nucleux/md3-switch";',
+      import: 'import { Md3Suggestions, Md3SuggestionsComposer } from "@nucleux/md3-suggestions";',
+      installSingle: "pnpm add @nucleux/md3-suggestions @nucleux/tokens",
+      props: [],
+      readme: '# @nucleux/md3-suggestions\n\nMaterial 3 Suggestions \u2014 agent-marked suggestion chips above the composer that add to the request, never send it \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**Same API as the shadcn twin.** The props, callbacks, keyboard model, states and accessible names are those of [`@nucleux/suggestions`](https://www.npmjs.com/package/@nucleux/suggestions) (`Suggestions`, `SuggestionsComposer`) \u2014 the props types are re-exported from it and the state logic is shared \u2014 so you switch families by changing only the import. Only the look differs: Material 3 colour roles, outlined suggestion chips with a primary add icon, state layers, a raised composer card, and motion reduced under `prefers-reduced-motion`.\n\n## Exports\n\n- **`Md3Suggestions`** \u2014 the "Aria suggests" chip row with Why and Dismiss icon buttons, its status lines (added with Undo, dismissed, no longer relevant, loading, error with Retry), plus `follow-up` and `selection` variants\n- **`Md3SuggestionsComposer`** \u2014 the row wired to `Md3AgentComposer`\n- Re-exported helpers: `appendSuggestion`, `suggestionsMessages`\n- Types: `Md3SuggestionsProps`, `Md3SuggestionsComposerProps`, `Md3SuggestionItem`, `Md3SuggestionsVariant`, `Md3SuggestionsStatus`, `Md3SuggestionsMessages`\n\n## Install\n\n```bash\npnpm add @nucleux/md3-suggestions @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3SuggestionsComposer } from "@nucleux/md3-suggestions";\n\n<Md3SuggestionsComposer\n  defaultValue="Summarize the September release."\n  label="Aria suggests"\n  reason="Release summaries are read to decide what still needs attention."\n  suggestions={[\n    { label: "Include unresolved blockers" },\n    { label: "Group the work by owner" },\n    { label: "Compare with the August release" },\n  ]}\n  isRelevant={(draft) => /release/i.test(draft)}\n  onSubmit={send}\n/>\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"
+      },
+      twin: {
+        name: "suggestions",
+        package: "@nucleux/suggestions",
+        component: "Suggestions",
+        sharesApi: true
+      }
+    },
+    {
+      name: "md3-switch",
+      package: "@nucleux/md3-switch",
+      kind: "component",
+      description: "A Material Design 3 switch with a growing handle and optional check icon.",
+      summary: "Material 3 switch \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3-switch"
+      ],
+      exports: [
+        "Md3Switch",
+        "Md3SwitchProps"
+      ],
+      components: [
+        "Md3Switch"
+      ],
+      import: 'import { Md3Switch } from "@nucleux/md3-switch";',
       installSingle: "pnpm add @nucleux/md3-switch @nucleux/tokens",
       props: [
         {
@@ -11541,6 +12043,49 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         sharesApi: true
       }
     },
+    {
+      name: "md3-voice-tone",
+      package: "@nucleux/md3-voice-tone",
+      kind: "component",
+      description: 'Voice & Tone in Material 3 \u2014 the twin of `VoiceTone`, with the same props, callbacks, keyboard\nmodel and accessible names (the logic is `useVoiceTone` from `@nucleux/voice-tone`). In the\ncomposer (`variant="composer"`), a Tone chip sits in the `Md3AgentComposer` toolbar: closed it is\nan outlined assist chip; set, it takes the secondary-container role and reads \u201CTone Professional\u201D\nwith a chevron to change and \xD7 to remove (with Undo). It opens a surface-container picker of tone\ncards \u2014 the chosen card gets a 2px primary outline and a check \u2014 with a sample line that follows\nfocus and hover, the agent\'s recommendation marked but never applied, and an outlined \u201COr describe\na tone\u201D field. `variant="settings"` is the same choice as an outlined card with a rules list of\n`Md3Checkbox`es and a sample sentence. Tone travels beside the prompt as a setting; the prompt text\nis never edited, and state layers and motion respect `prefers-reduced-motion`.',
+      summary: "Material 3 Voice & Tone \u2014 say how the reply should sound (tone cards, a rules list, a sample line), shown as a Tone chip in the composer and never editing the prompt \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "md3",
+        "material",
+        "md3-voice-tone",
+        "voice-tone",
+        "tone",
+        "prompt-scaffold"
+      ],
+      exports: [
+        "Md3VoiceTone",
+        "Md3VoiceToneProps"
+      ],
+      components: [
+        "Md3VoiceTone"
+      ],
+      import: 'import { Md3VoiceTone } from "@nucleux/md3-voice-tone";',
+      installSingle: "pnpm add @nucleux/md3-voice-tone @nucleux/tokens",
+      props: [],
+      readme: '# @nucleux/md3-voice-tone\n\nMaterial 3 Voice & Tone \u2014 say how the reply should sound (tone cards, a rules list, a sample line), shown as a Tone chip in the composer and never editing the prompt \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**Same API as the shadcn twin.** The props, callbacks, keyboard model and accessible names are those of [`@nucleux/voice-tone`](https://www.npmjs.com/package/@nucleux/voice-tone) (`VoiceTone`) \u2014 the props types are re-exported from it and the logic is its `useVoiceTone` \u2014 so you switch families by changing only the import. Only the look differs: Material 3 colour roles, shape, elevation, state layers and motion (reduced under `prefers-reduced-motion`).\n\n## Exports\n\n- **`Md3VoiceTone`** \u2014 a Tone chip in `Md3AgentComposer` (outlined assist chip; set, a secondary-container chip \u201CTone Professional\u201D with change and remove) opening a surface-container picker of tone cards with a sample line, the recommendation marked and an outlined \u201COr describe a tone\u201D field; or (`variant="settings"`) an outlined card with tone presets, `Md3Checkbox` rules and a sample sentence\n- Re-exported from the twin: `useVoiceTone`, `defaultVoiceTones`, `defaultVoiceToneRules`, `VOICE_TONE_CUSTOM`\n- Types: `Md3VoiceToneProps`, `VoiceToneOption`, `VoiceToneRule`, `VoiceToneSetting`, `VoiceToneVariant`, `VoiceToneLayout`, `VoiceToneNotice`, `VoiceToneState`\n\n## Install\n\n```bash\npnpm add @nucleux/md3-voice-tone @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Md3VoiceTone } from "@nucleux/md3-voice-tone";\n\n<Md3VoiceTone\n  variant="composer"\n  defaultValue="professional"\n  onSubmit={(text, setting) => send(text, { tone: setting })}\n/>\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"
+      },
+      twin: {
+        name: "voice-tone",
+        package: "@nucleux/voice-tone",
+        component: "VoiceTone",
+        sharesApi: true
+      }
+    },
     {
       name: "menubar",
       package: "@nucleux/menubar",
@@ -11886,11 +12431,11 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
       }
     },
     {
-      name: "name",
-      package: "@nucleux/name",
+      name: "modes",
+      package: "@nucleux/modes",
       kind: "component",
-      description: 'The agent\'s name, presented consistently so it can be referred to,\ntalked to and remembered ("Ask Aria to summarise this"). Three variants:\n`wordmark`, `name-status` ("Aria is drafting", announced politely) and\n`name-avatar-lockup` (the AgentAvatar mark with name and descriptor).\nThe descriptor keeps the name honest by saying what the agent is.',
-      summary: "Name \u2014 a consistent name and role for the AI so it can be referred to and remembered \u2014 Nucleux agentic UI for React.",
+      description: "The segmented control: three or four labelled segments in a bordered track,\nthe active one filled with the primary colour. A radio group with roving\nfocus (Arrow keys move, Space/Enter choose).",
+      summary: "Modes \u2014 choose how the agent works on a request (Fast, Balanced, Deep research), shown in the composer and switchable before sending \u2014 Nucleux agentic UI for React.",
       keywords: [
         "nucleux",
         "react",
@@ -11899,168 +12444,608 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         "agentic",
         "ai",
         "tailwind",
-        "name"
+        "modes",
+        "mode-picker",
+        "prompt-scaffolds"
       ],
       exports: [
-        "AgentName",
-        "AgentNameVariant",
-        "AgentNameProps"
+        "useModes",
+        "useModesRoving",
+        "useModesDismiss",
+        "modesLabels",
+        "modeSupportingText",
+        "ModesSegmented",
+        "ModesList",
+        "ModesChip",
+        "ModesPicker",
+        "ModesNote",
+        "Modes",
+        "ModeOption",
+        "ModesNotice",
+        "ModesVariant",
+        "UseModesOptions",
+        "ModesState",
+        "ModesSegmentedProps",
+        "ModesListProps",
+        "ModesChipProps",
+        "ModesPickerProps",
+        "ModesNoteProps",
+        "ModesSubmitDetails",
+        "ModesProps"
       ],
       components: [
-        "AgentName"
-      ],
-      import: 'import { AgentName } from "@nucleux/name";',
-      installSingle: "pnpm add @nucleux/name @nucleux/tokens",
+        "Modes",
+        "ModesSegmented",
+        "ModesList",
+        "ModesChip",
+        "ModesPicker",
+        "ModesNote"
+      ],
+      import: 'import { Modes, ModesSegmented, ModesList, ModesChip } from "@nucleux/modes";',
+      installSingle: "pnpm add @nucleux/modes @nucleux/tokens",
       props: [
         {
-          name: "AgentNameProps",
-          source: 'export interface AgentNameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The agent\'s proper name \u2014 short (\u2264 12 characters), pronounceable, capitalised the same everywhere. Not a real person\'s name. */\n  name: string;\n  /**\n   * `wordmark` (the name in product type, for headers and brand contexts),\n   * `name-status` (the name with what the agent is doing now) or\n   * `name-avatar-lockup` (mark + name, for attribution rows and signatures).\n   * Default `name-avatar-lockup`.\n   */\n  variant?: AgentNameVariant;\n  /** What the agent is, in product words: "Intelligaia agent", "Meeting Intelligence Agent". Defaults to "AI agent". On compact surfaces it stays in the accessible name. */\n  descriptor?: React.ReactNode;\n  /**\n   * `name-status`: what the agent is doing, as a verb phrase \u2014 "drafting",\n   * "thinking". Rendered as "Aria is drafting" in a polite live region.\n   * Omit for an idle agent ("Aria").\n   */\n  status?: string;\n  /** `name-status`: show the working dots (and the working ring on the mark). Defaults to `true` when `status` is set. */\n  working?: boolean;\n  /** Previous name after a rename, shown as "formerly Aria" for a while. */\n  formerName?: string;\n  /** Image for the agent mark (`name-status`, `name-avatar-lockup`). */\n  avatarSrc?: string;\n  /** Glyph for the agent mark when there is no image. Defaults to the reserved AI sparkle. */\n  avatarGlyph?: React.ReactNode;\n}',
+          name: "ModesSegmentedProps",
+          source: 'export interface ModesSegmentedProps\n  extends ModesGroupBase,\n    Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue"> {}',
           extends: [
-            "React.HTMLAttributes<HTMLDivElement>"
+            "ModesGroupBase",
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue">'
+          ],
+          members: []
+        },
+        {
+          name: "ModesListProps",
+          source: `export interface ModesListProps
+  extends ModesGroupBase,
+    Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue"> {
+  /** Show each mode's description (meta such as latency always shows). Defaults to true. */
+  showDescriptions?: boolean;
+  /** Draw the rows as a bordered card with dividers (default) or as bare menu rows. */
+  framed?: boolean;
+}`,
+          extends: [
+            "ModesGroupBase",
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue">'
           ],
           members: [
             {
-              name: "name",
-              type: "string",
+              name: "showDescriptions",
+              type: "boolean",
+              required: false,
+              description: "Show each mode's description (meta such as latency always shows). Defaults to true.",
+              default: "true"
+            },
+            {
+              name: "framed",
+              type: "boolean",
+              required: false,
+              description: "Draw the rows as a bordered card with dividers (default) or as bare menu rows.",
+              default: "true"
+            }
+          ]
+        },
+        {
+          name: "ModesChipProps",
+          source: 'export interface ModesChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {\n  /** The active mode, or null (the chip then reads just the label). */\n  mode: ModeOption | null;\n  /** The setting\'s name. Defaults to "Mode". */\n  label?: string;\n  /** Whether the picker it controls is open (sets `aria-expanded`). */\n  open?: boolean;\n  /** Shows a remove button that clears the mode. */\n  onRemove?: () => void;\n}',
+          extends: [
+            'Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">'
+          ],
+          members: [
+            {
+              name: "mode",
+              type: "ModeOption | null",
               required: true,
-              description: "The agent's proper name \u2014 short (\u2264 12 characters), pronounceable, capitalised the same everywhere. Not a real person's name."
+              description: "The active mode, or null (the chip then reads just the label)."
             },
             {
-              name: "variant",
-              type: "AgentNameVariant",
+              name: "label",
+              type: "string",
               required: false,
-              description: "`wordmark` (the name in product type, for headers and brand contexts), `name-status` (the name with what the agent is doing now) or `name-avatar-lockup` (mark + name, for attribution rows and signatures). Default `name-avatar-lockup`.",
-              values: [
-                "wordmark",
-                "name-status",
-                "name-avatar-lockup"
-              ],
-              default: '"name-avatar-lockup"'
+              description: `The setting's name. Defaults to "Mode".`,
+              default: '"Mode"'
             },
             {
-              name: "descriptor",
-              type: "React.ReactNode",
+              name: "open",
+              type: "boolean",
               required: false,
-              description: 'What the agent is, in product words: "Intelligaia agent", "Meeting Intelligence Agent". Defaults to "AI agent". On compact surfaces it stays in the accessible name.',
-              default: '"AI agent"'
+              description: "Whether the picker it controls is open (sets `aria-expanded`).",
+              default: "false"
             },
             {
-              name: "status",
-              type: "string",
+              name: "onRemove",
+              type: "() => void",
               required: false,
-              description: '`name-status`: what the agent is doing, as a verb phrase \u2014 "drafting", "thinking". Rendered as "Aria is drafting" in a polite live region. Omit for an idle agent ("Aria").'
+              description: "Shows a remove button that clears the mode."
+            }
+          ]
+        },
+        {
+          name: "ModesPickerProps",
+          source: `export interface ModesPickerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue" | "title"> {
+  modes: ModeOption[];
+  value: string | null;
+  onSelect: (id: string) => void;
+  /** Shows "No mode" while a mode is active. */
+  onClear?: () => void;
+  /** Called on Escape. */
+  onClose?: () => void;
+  /** The setting's name, used for the heading and accessible names. Defaults to "Mode". */
+  label?: string;
+  /** One line under the heading. */
+  description?: React.ReactNode;
+  /** The unavailable mode the person just tried, if any; its reason shows as an alert. */
+  rejected?: ModeOption | null;
+  showDescriptions?: boolean;
+  /** Move focus to the active (or first) mode when it mounts. */
+  autoFocus?: boolean;
+}`,
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue" | "title">'
+          ],
+          members: [
+            {
+              name: "modes",
+              type: "ModeOption[]",
+              required: true
             },
             {
-              name: "working",
-              type: "boolean",
+              name: "value",
+              type: "string | null",
+              required: true
+            },
+            {
+              name: "onSelect",
+              type: "(id: string) => void",
+              required: true
+            },
+            {
+              name: "onClear",
+              type: "() => void",
               required: false,
-              description: "`name-status`: show the working dots (and the working ring on the mark). Defaults to `true` when `status` is set."
+              description: 'Shows "No mode" while a mode is active.'
             },
             {
-              name: "formerName",
-              type: "string",
+              name: "onClose",
+              type: "() => void",
               required: false,
-              description: 'Previous name after a rename, shown as "formerly Aria" for a while.'
+              description: "Called on Escape."
             },
             {
-              name: "avatarSrc",
+              name: "label",
               type: "string",
               required: false,
-              description: "Image for the agent mark (`name-status`, `name-avatar-lockup`)."
+              description: `The setting's name, used for the heading and accessible names. Defaults to "Mode".`,
+              default: '"Mode"'
             },
             {
-              name: "avatarGlyph",
+              name: "description",
               type: "React.ReactNode",
               required: false,
-              description: "Glyph for the agent mark when there is no image. Defaults to the reserved AI sparkle."
+              description: "One line under the heading.",
+              default: '"How the agent approaches this request. Model and effort stay as they are."'
+            },
+            {
+              name: "rejected",
+              type: "ModeOption | null",
+              required: false,
+              description: "The unavailable mode the person just tried, if any; its reason shows as an alert."
+            },
+            {
+              name: "showDescriptions",
+              type: "boolean",
+              required: false,
+              default: "true"
+            },
+            {
+              name: "autoFocus",
+              type: "boolean",
+              required: false,
+              description: "Move focus to the active (or first) mode when it mounts.",
+              default: "false"
             }
           ]
-        }
-      ],
-      readme: '# @nucleux/name\n\nName \u2014 a consistent name and role for the AI so it can be referred to and remembered \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## Exports\n\n- **`AgentName`** \u2014 the agent\'s name, presented the same everywhere. `name` (required); `variant`: `wordmark` / `name-status` / `name-avatar-lockup` (default); `descriptor` (default "AI agent"); `status` (verb phrase \u2192 "Aria is drafting", polite live region); `working`; `formerName` ("formerly Aria" after a rename); `avatarSrc`, `avatarGlyph`\n\nThe lockup and status variants use `AgentAvatar` from `@nucleux/agent-avatar`. Keep the name short (\u2264 12 characters), pronounceable, capitalised consistently, and never a real person\'s name.\n\n## Install\n\n```bash\npnpm add @nucleux/name @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { AgentName } from "@nucleux/name";\n\n<AgentName name="Aria" descriptor="Intelligaia agent" />\n<AgentName name="Aria" variant="name-status" status={thinking ? "thinking" : undefined} />\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"
-      },
-      twin: {
-        name: "md3-name",
-        package: "@nucleux/md3-name",
-        component: "Md3AgentName",
-        sharesApi: true
-      }
-    },
-    {
-      name: "native-select",
-      package: "@nucleux/native-select",
-      kind: "component",
-      description: "An accessible select built on the native `<select>` element (full keyboard +\nscreen-reader support), styled to match the design system with a chevron.\nPass `<option>`s as children.",
-      summary: "Styled native <select> \u2014 Nucleux agentic UI for React.",
-      keywords: [
-        "nucleux",
-        "react",
-        "ui",
-        "components",
-        "agentic",
-        "ai",
-        "tailwind",
-        "native-select"
-      ],
-      exports: [
-        "NativeSelect",
-        "NativeSelectOption",
-        "NativeSelectOptGroup",
-        "NativeSelectProps"
-      ],
-      components: [
-        "NativeSelect",
-        "NativeSelectOption",
-        "NativeSelectOptGroup"
-      ],
-      import: 'import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@nucleux/native-select";',
-      installSingle: "pnpm add @nucleux/native-select @nucleux/tokens",
-      props: [
+        },
         {
-          name: "NativeSelectProps",
-          source: "export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /** Wrapper className (the chevron is positioned within it). */\n  containerClassName?: string;\n}",
+          name: "ModesNoteProps",
+          source: "export interface ModesNoteProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Shows an Undo button that restores the previous mode. */\n  onUndo?: () => void;\n}",
           extends: [
-            "React.SelectHTMLAttributes<HTMLSelectElement>"
+            "React.HTMLAttributes<HTMLDivElement>"
           ],
           members: [
             {
-              name: "containerClassName",
-              type: "string",
+              name: "onUndo",
+              type: "() => void",
               required: false,
-              description: "Wrapper className (the chevron is positioned within it)."
+              description: "Shows an Undo button that restores the previous mode."
             }
           ]
-        }
-      ],
-      readme: '# @nucleux/native-select\n\nAccessible native-backed select with a chevron \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/native-select @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { NativeSelect } from "@nucleux/native-select";\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: "navigation-menu",
-      package: "@nucleux/navigation-menu",
-      kind: "component",
-      description: "A site navigation bar with hover/focus-revealed dropdown panels.",
-      summary: "Navigation menu with dropdown panels \u2014 Nucleux agentic UI for React.",
-      keywords: [
-        "nucleux",
-        "react",
-        "ui",
-        "components",
-        "agentic",
-        "ai",
-        "tailwind",
-        "navigation-menu"
-      ],
-      exports: [
-        "NavigationMenu",
-        "NavigationMenuList",
-        "NavigationMenuItem",
+        },
+        {
+          name: "ModesProps",
+          source: `export interface ModesProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onSubmit" | "onChange"> {
+  /** The modes the product supports, in order. */
+  modes: ModeOption[];
+  /** Active mode id (controlled); null for none. */
+  value?: string | null;
+  /** Initial mode id when uncontrolled. Defaults to none. */
+  defaultValue?: string | null;
+  /** Called with the new mode id (null when cleared). */
+  onValueChange?: (id: string | null, mode: ModeOption | null) => void;
+  /** Presentation. Defaults to "composer" (the site's live preview). */
+  variant?: ModesVariant;
+  /** Whether the chip's picker is open (controlled). */
+  open?: boolean;
+  /** Initial picker state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Allow clearing the mode (chip \xD7, "No mode"). Defaults to true. */
+  clearable?: boolean;
+  /** Show each mode's one-line description. Defaults to true. */
+  showDescriptions?: boolean;
+  /** The setting's name. Defaults to "Mode". */
+  label?: string;
+  /** Line under the picker heading. */
+  pickerDescription?: string;
+  /** Initial notice, e.g. to show a just-changed or refused state. */
+  defaultNotice?: ModesNotice;
+  /** Called when someone chooses a mode that can't be applied here. */
+  onUnavailable?: (mode: ModeOption) => void;
+  /** Composer text (controlled). The mode never changes it. */
+  draft?: string;
+  /** Initial composer text when uncontrolled. */
+  defaultDraft?: string;
+  onDraftChange?: (text: string) => void;
+  /** Called when the person sends from the composer, with the active mode. Modes never sends on its own. */
+  onSubmit?: (text: string, details: ModesSubmitDetails) => void;
+  /** Composer placeholder. */
+  placeholder?: string;
+  /** Composer controls before the field (attach\u2026). */
+  composerLeading?: React.ReactNode;
+  /** Composer controls after the mode chip (model chip, voice\u2026). */
+  composerActions?: React.ReactNode;
+  /** Accessible name of the send button. Defaults to "Send". */
+  sendLabel?: string;
+}`,
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onSubmit" | "onChange">'
+          ],
+          members: [
+            {
+              name: "modes",
+              type: "ModeOption[]",
+              required: true,
+              description: "The modes the product supports, in order."
+            },
+            {
+              name: "value",
+              type: "string | null",
+              required: false,
+              description: "Active mode id (controlled); null for none."
+            },
+            {
+              name: "defaultValue",
+              type: "string | null",
+              required: false,
+              description: "Initial mode id when uncontrolled. Defaults to none."
+            },
+            {
+              name: "onValueChange",
+              type: "(id: string | null, mode: ModeOption | null) => void",
+              required: false,
+              description: "Called with the new mode id (null when cleared)."
+            },
+            {
+              name: "variant",
+              type: "ModesVariant",
+              required: false,
+              description: `Presentation. Defaults to "composer" (the site's live preview).`,
+              values: [
+                "composer",
+                "segmented",
+                "list",
+                "chip"
+              ],
+              default: '"composer"'
+            },
+            {
+              name: "open",
+              type: "boolean",
+              required: false,
+              description: "Whether the chip's picker is open (controlled)."
+            },
+            {
+              name: "defaultOpen",
+              type: "boolean",
+              required: false,
+              description: "Initial picker state when uncontrolled."
+            },
+            {
+              name: "onOpenChange",
+              type: "(open: boolean) => void",
+              required: false
+            },
+            {
+              name: "clearable",
+              type: "boolean",
+              required: false,
+              description: 'Allow clearing the mode (chip \xD7, "No mode"). Defaults to true.',
+              default: "true"
+            },
+            {
+              name: "showDescriptions",
+              type: "boolean",
+              required: false,
+              description: "Show each mode's one-line description. Defaults to true.",
+              default: "true"
+            },
+            {
+              name: "label",
+              type: "string",
+              required: false,
+              description: `The setting's name. Defaults to "Mode".`,
+              default: '"Mode"'
+            },
+            {
+              name: "pickerDescription",
+              type: "string",
+              required: false,
+              description: "Line under the picker heading."
+            },
+            {
+              name: "defaultNotice",
+              type: "ModesNotice",
+              required: false,
+              description: "Initial notice, e.g. to show a just-changed or refused state."
+            },
+            {
+              name: "onUnavailable",
+              type: "(mode: ModeOption) => void",
+              required: false,
+              description: "Called when someone chooses a mode that can't be applied here."
+            },
+            {
+              name: "draft",
+              type: "string",
+              required: false,
+              description: "Composer text (controlled). The mode never changes it."
+            },
+            {
+              name: "defaultDraft",
+              type: "string",
+              required: false,
+              description: "Initial composer text when uncontrolled.",
+              default: '""'
+            },
+            {
+              name: "onDraftChange",
+              type: "(text: string) => void",
+              required: false
+            },
+            {
+              name: "onSubmit",
+              type: "(text: string, details: ModesSubmitDetails) => void",
+              required: false,
+              description: "Called when the person sends from the composer, with the active mode. Modes never sends on its own."
+            },
+            {
+              name: "placeholder",
+              type: "string",
+              required: false,
+              description: "Composer placeholder.",
+              default: '"Ask Aria\u2026"'
+            },
+            {
+              name: "composerLeading",
+              type: "React.ReactNode",
+              required: false,
+              description: "Composer controls before the field (attach\u2026)."
+            },
+            {
+              name: "composerActions",
+              type: "React.ReactNode",
+              required: false,
+              description: "Composer controls after the mode chip (model chip, voice\u2026)."
+            },
+            {
+              name: "sendLabel",
+              type: "string",
+              required: false,
+              description: 'Accessible name of the send button. Defaults to "Send".',
+              default: '"Send"'
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/modes\n\nModes \u2014 choose how the agent works on a request (Fast, Balanced, Deep research), shown in the composer and switchable before sending \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\nA named set of behaviour presets that makes the speed/depth trade-off \u2014 or the\nway of working \u2014 legible without exposing raw parameters. Each mode says what\nchanges and how long it takes; the active mode sits in the composer as a chip\nthat can be changed or cleared before sending; unavailable modes stay listed\nwith the reason; a change adds one quiet line with Undo. Choosing a mode never\ntouches the prompt text, and Modes never sends on its own.\n\n## Exports\n\n- **`Modes`** \u2014 the whole pattern (`variant`: `composer` \xB7 `segmented` \xB7 `list` \xB7 `chip`)\n- **`ModesSegmented`** \u2014 the segmented control (radio group)\n- **`ModesList`** \u2014 rich rows: icon, name, expected speed \xB7 what it\'s for, unavailable reason\n- **`ModesChip`** \u2014 the composer chip ("\u26A1 Fast \u25BE") with an optional \xD7\n- **`ModesPicker`** \u2014 the dialog the chip opens: heading, rows, refusal alert, "No mode"\n- **`ModesNote`** \u2014 "Mode changed to \u2026 Your text is unchanged." with Undo\n- Shared logic (also used by `@nucleux/md3-modes`): `useModes`, `useModesRoving`, `useModesDismiss`, `modesLabels`, `modeSupportingText`\n- Types: `ModesProps`, `ModeOption`, `ModesVariant`, `ModesNotice`, `ModesSubmitDetails`, `UseModesOptions`, `ModesState`, and each sub-component\'s `\u2026Props`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `composer` (default) | The site\'s live preview: segmented control, the mode list and the chip in the composer. |\n| `segmented` | Three or four labelled segments \u2014 session-level, like a tab (right rail, code). |\n| `list` | Rich rows with expected speed \u2014 generation settings. |\n| `chip` | Only the chip and its picker \u2014 beside the send button (chat, email). |\n\n## Behaviour\n\n- `modes` (`{ id, name, shortName?, description?, meta?, icon?, unavailable? }[]`), `value` / `defaultValue` / `onValueChange(id | null, mode | null)`.\n- `open` / `defaultOpen` / `onOpenChange` for the picker; `clearable` (default true); `showDescriptions` (default true); `label` (default "Mode").\n- Choosing an `unavailable` mode is refused: it isn\'t applied, the picker shows why (`role="alert"`), `onUnavailable(mode)` fires.\n- Composer: `draft` / `defaultDraft` / `onDraftChange`, `onSubmit(text, { mode })`, `placeholder`, `composerLeading`, `composerActions`, `sendLabel`.\n- Keyboard: radio groups with one tab stop; Arrow keys / Home / End move, Space or Enter chooses; Escape closes the picker and returns focus to the chip. Changes are announced politely.\n\n## Install\n\n```bash\npnpm add @nucleux/modes @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Modes } from "@nucleux/modes";\n\n<Modes\n  modes={[\n    { id: "fast", name: "Fast", icon: "\u26A1", meta: "~3 seconds", description: "everyday asks and quick lookups" },\n    { id: "balanced", name: "Balanced", icon: "\u2696\uFE0F", meta: "~15 seconds", description: "most tasks" },\n    { id: "deep", name: "Deep research", shortName: "Deep", icon: "\u{1F9E0}", meta: "~1 minute", description: "multi-source, high-stakes" },\n  ]}\n  defaultValue="balanced"\n  onSubmit={(text, { mode }) => send(text, { mode: mode?.id })}\n/>\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"
+      },
+      twin: {
+        name: "md3-modes",
+        package: "@nucleux/md3-modes",
+        component: "Md3Modes",
+        sharesApi: true
+      }
+    },
+    {
+      name: "name",
+      package: "@nucleux/name",
+      kind: "component",
+      description: 'The agent\'s name, presented consistently so it can be referred to,\ntalked to and remembered ("Ask Aria to summarise this"). Three variants:\n`wordmark`, `name-status` ("Aria is drafting", announced politely) and\n`name-avatar-lockup` (the AgentAvatar mark with name and descriptor).\nThe descriptor keeps the name honest by saying what the agent is.',
+      summary: "Name \u2014 a consistent name and role for the AI so it can be referred to and remembered \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "name"
+      ],
+      exports: [
+        "AgentName",
+        "AgentNameVariant",
+        "AgentNameProps"
+      ],
+      components: [
+        "AgentName"
+      ],
+      import: 'import { AgentName } from "@nucleux/name";',
+      installSingle: "pnpm add @nucleux/name @nucleux/tokens",
+      props: [
+        {
+          name: "AgentNameProps",
+          source: 'export interface AgentNameProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The agent\'s proper name \u2014 short (\u2264 12 characters), pronounceable, capitalised the same everywhere. Not a real person\'s name. */\n  name: string;\n  /**\n   * `wordmark` (the name in product type, for headers and brand contexts),\n   * `name-status` (the name with what the agent is doing now) or\n   * `name-avatar-lockup` (mark + name, for attribution rows and signatures).\n   * Default `name-avatar-lockup`.\n   */\n  variant?: AgentNameVariant;\n  /** What the agent is, in product words: "Intelligaia agent", "Meeting Intelligence Agent". Defaults to "AI agent". On compact surfaces it stays in the accessible name. */\n  descriptor?: React.ReactNode;\n  /**\n   * `name-status`: what the agent is doing, as a verb phrase \u2014 "drafting",\n   * "thinking". Rendered as "Aria is drafting" in a polite live region.\n   * Omit for an idle agent ("Aria").\n   */\n  status?: string;\n  /** `name-status`: show the working dots (and the working ring on the mark). Defaults to `true` when `status` is set. */\n  working?: boolean;\n  /** Previous name after a rename, shown as "formerly Aria" for a while. */\n  formerName?: string;\n  /** Image for the agent mark (`name-status`, `name-avatar-lockup`). */\n  avatarSrc?: string;\n  /** Glyph for the agent mark when there is no image. Defaults to the reserved AI sparkle. */\n  avatarGlyph?: React.ReactNode;\n}',
+          extends: [
+            "React.HTMLAttributes<HTMLDivElement>"
+          ],
+          members: [
+            {
+              name: "name",
+              type: "string",
+              required: true,
+              description: "The agent's proper name \u2014 short (\u2264 12 characters), pronounceable, capitalised the same everywhere. Not a real person's name."
+            },
+            {
+              name: "variant",
+              type: "AgentNameVariant",
+              required: false,
+              description: "`wordmark` (the name in product type, for headers and brand contexts), `name-status` (the name with what the agent is doing now) or `name-avatar-lockup` (mark + name, for attribution rows and signatures). Default `name-avatar-lockup`.",
+              values: [
+                "wordmark",
+                "name-status",
+                "name-avatar-lockup"
+              ],
+              default: '"name-avatar-lockup"'
+            },
+            {
+              name: "descriptor",
+              type: "React.ReactNode",
+              required: false,
+              description: 'What the agent is, in product words: "Intelligaia agent", "Meeting Intelligence Agent". Defaults to "AI agent". On compact surfaces it stays in the accessible name.',
+              default: '"AI agent"'
+            },
+            {
+              name: "status",
+              type: "string",
+              required: false,
+              description: '`name-status`: what the agent is doing, as a verb phrase \u2014 "drafting", "thinking". Rendered as "Aria is drafting" in a polite live region. Omit for an idle agent ("Aria").'
+            },
+            {
+              name: "working",
+              type: "boolean",
+              required: false,
+              description: "`name-status`: show the working dots (and the working ring on the mark). Defaults to `true` when `status` is set."
+            },
+            {
+              name: "formerName",
+              type: "string",
+              required: false,
+              description: 'Previous name after a rename, shown as "formerly Aria" for a while.'
+            },
+            {
+              name: "avatarSrc",
+              type: "string",
+              required: false,
+              description: "Image for the agent mark (`name-status`, `name-avatar-lockup`)."
+            },
+            {
+              name: "avatarGlyph",
+              type: "React.ReactNode",
+              required: false,
+              description: "Glyph for the agent mark when there is no image. Defaults to the reserved AI sparkle."
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/name\n\nName \u2014 a consistent name and role for the AI so it can be referred to and remembered \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## Exports\n\n- **`AgentName`** \u2014 the agent\'s name, presented the same everywhere. `name` (required); `variant`: `wordmark` / `name-status` / `name-avatar-lockup` (default); `descriptor` (default "AI agent"); `status` (verb phrase \u2192 "Aria is drafting", polite live region); `working`; `formerName` ("formerly Aria" after a rename); `avatarSrc`, `avatarGlyph`\n\nThe lockup and status variants use `AgentAvatar` from `@nucleux/agent-avatar`. Keep the name short (\u2264 12 characters), pronounceable, capitalised consistently, and never a real person\'s name.\n\n## Install\n\n```bash\npnpm add @nucleux/name @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { AgentName } from "@nucleux/name";\n\n<AgentName name="Aria" descriptor="Intelligaia agent" />\n<AgentName name="Aria" variant="name-status" status={thinking ? "thinking" : undefined} />\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"
+      },
+      twin: {
+        name: "md3-name",
+        package: "@nucleux/md3-name",
+        component: "Md3AgentName",
+        sharesApi: true
+      }
+    },
+    {
+      name: "native-select",
+      package: "@nucleux/native-select",
+      kind: "component",
+      description: "An accessible select built on the native `<select>` element (full keyboard +\nscreen-reader support), styled to match the design system with a chevron.\nPass `<option>`s as children.",
+      summary: "Styled native <select> \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "native-select"
+      ],
+      exports: [
+        "NativeSelect",
+        "NativeSelectOption",
+        "NativeSelectOptGroup",
+        "NativeSelectProps"
+      ],
+      components: [
+        "NativeSelect",
+        "NativeSelectOption",
+        "NativeSelectOptGroup"
+      ],
+      import: 'import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@nucleux/native-select";',
+      installSingle: "pnpm add @nucleux/native-select @nucleux/tokens",
+      props: [
+        {
+          name: "NativeSelectProps",
+          source: "export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /** Wrapper className (the chevron is positioned within it). */\n  containerClassName?: string;\n}",
+          extends: [
+            "React.SelectHTMLAttributes<HTMLSelectElement>"
+          ],
+          members: [
+            {
+              name: "containerClassName",
+              type: "string",
+              required: false,
+              description: "Wrapper className (the chevron is positioned within it)."
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/native-select\n\nAccessible native-backed select with a chevron \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/native-select @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { NativeSelect } from "@nucleux/native-select";\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: "navigation-menu",
+      package: "@nucleux/navigation-menu",
+      kind: "component",
+      description: "A site navigation bar with hover/focus-revealed dropdown panels.",
+      summary: "Navigation menu with dropdown panels \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "navigation-menu"
+      ],
+      exports: [
+        "NavigationMenu",
+        "NavigationMenuList",
+        "NavigationMenuItem",
         "NavigationMenuTrigger",
         "NavigationMenuContent",
         "NavigationMenuLink",
@@ -12742,93 +13727,379 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
           source: "export interface PopoverProps {\n  /** Whether the popover is open (controlled). */\n  open?: boolean;\n  /** Initial open state (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Called when the popover requests to open or close. */\n  onOpenChange?: (open: boolean) => void;\n  children: React.ReactNode;\n}",
           members: [
             {
-              name: "open",
-              type: "boolean",
+              name: "open",
+              type: "boolean",
+              required: false,
+              description: "Whether the popover is open (controlled)."
+            },
+            {
+              name: "defaultOpen",
+              type: "boolean",
+              required: false,
+              description: "Initial open state (uncontrolled).",
+              default: "false"
+            },
+            {
+              name: "onOpenChange",
+              type: "(open: boolean) => void",
+              required: false,
+              description: "Called when the popover requests to open or close."
+            },
+            {
+              name: "children",
+              type: "React.ReactNode",
+              required: true
+            }
+          ]
+        },
+        {
+          name: "PopoverTriggerProps",
+          source: 'export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Additional classes merged onto the trigger button. */\n  className?: string;\n  /** Button type. Defaults to "button". */\n  type?: "button" | "submit" | "reset";\n}',
+          extends: [
+            "React.ButtonHTMLAttributes<HTMLButtonElement>"
+          ],
+          members: [
+            {
+              name: "className",
+              type: "string",
+              required: false,
+              description: "Additional classes merged onto the trigger button."
+            },
+            {
+              name: "type",
+              type: '"button" | "submit" | "reset"',
+              required: false,
+              description: 'Button type. Defaults to "button".',
+              values: [
+                "button",
+                "submit",
+                "reset"
+              ],
+              default: '"button"'
+            }
+          ]
+        },
+        {
+          name: "PopoverContentProps",
+          source: 'export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Horizontal alignment relative to the trigger. */\n  align?: "start" | "end";\n  /**\n   * Alias of `align` (CSS flex vocabulary). Deprecated \u2014 use `align`.\n   * @deprecated Use `align` instead. Alias kept so agents reaching for the\n   *   CSS property name are caught; it maps 1:1.\n   */\n  alignItems?: "start" | "end";\n}',
+          extends: [
+            "React.HTMLAttributes<HTMLDivElement>"
+          ],
+          members: [
+            {
+              name: "align",
+              type: '"start" | "end"',
+              required: false,
+              description: "Horizontal alignment relative to the trigger.",
+              values: [
+                "start",
+                "end"
+              ]
+            },
+            {
+              name: "alignItems",
+              type: '"start" | "end"',
+              required: false,
+              description: "Alias of `align` (CSS flex vocabulary). Deprecated \u2014 use `align`.",
+              values: [
+                "start",
+                "end"
+              ],
+              deprecated: "Use `align` instead. Alias kept so agents reaching for the CSS property name are caught; it maps 1:1."
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/popover\n\nClick popover with outside-click/Escape \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/popover @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Popover, PopoverTrigger, PopoverContent } from "@nucleux/popover";\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: "preset-styles",
+      package: "@nucleux/preset-styles",
+      kind: "component",
+      description: 'One-tap named styles that set how the agent\'s output looks or reads, without\nrestating it in every request. `variant="grid"` (default) is a swatch grid\npicked before generating, with a "Match a style" reference-image drop and a\nper-project lock; `"list"` is a short list of brand-agreed presets;\n`"menu"` puts a Style control in the composer that opens "Use style" \u2014 each\nstyle with one line on what it changes, a sample reply that follows pointer\nand focus, and "Create & edit styles", which turns writing the person likes\n(or a description) into their own style through the app\'s\n`onGenerateStyle`, reviewed and editable before saving. Choosing applies at\nonce, the chip names the style, \xD7 goes back to the base style with Undo, and\nthe request text is never edited. Arrow keys move between styles; Escape\ncloses the menu and returns focus to the control.',
+      summary: "Preset Styles \u2014 one-click named styles for how the agent's output looks or reads \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "preset-styles",
+        "styles",
+        "style-picker",
+        "prompt-scaffold"
+      ],
+      exports: [
+        "presetStylesCopy",
+        "presetStylesNoticeText",
+        "presetStylesMoveFocus",
+        "usePresetStyles",
+        "PresetStyles",
+        "PresetStylesVariant",
+        "PresetStyleSwatch",
+        "PresetStylesView",
+        "PresetStylesNotice",
+        "PresetStyleSource",
+        "PresetStyle",
+        "PresetStyleReference",
+        "PresetStyleRequest",
+        "PresetStyleDraft",
+        "PresetStylesProps",
+        "PresetStylesState"
+      ],
+      components: [
+        "PresetStyles"
+      ],
+      import: 'import { PresetStyles } from "@nucleux/preset-styles";',
+      installSingle: "pnpm add @nucleux/preset-styles @nucleux/tokens",
+      props: [
+        {
+          name: "PresetStylesProps",
+          source: 'export interface PresetStylesProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onSubmit"> {\n  /** The presets, in order. In `"menu"`, the first one is the base style (Normal) unless `baseStyle` says otherwise. */\n  styles: PresetStyle[];\n  /** Chosen style id (controlled). */\n  value?: string;\n  /** Initial style id (uncontrolled). Defaults to the base style. */\n  defaultValue?: string;\n  /** Called when a style is chosen (or \xD7 returns to the base style). Never touches the request text. */\n  onValueChange?: (id: string) => void;\n  /** Layout. Defaults to `"grid"`. */\n  variant?: PresetStylesVariant;\n  /** Heading. Defaults to `"Output style"` (grid, list) or `"Use style"` (menu). Also the group\'s accessible name. */\n  label?: string;\n  /** Menu sub-heading. Defaults to `"How {agentName} writes its replies \u2014 not what it knows or does."`. */\n  description?: string;\n  /** The plain style \xD7 goes back to. Defaults to the first style. */\n  baseStyle?: string;\n  /** Who writes, for the copy. Defaults to `"Aria"`. */\n  agentName?: string;\n\n  /** Grid / list: show the per-project lock line. */\n  lockable?: boolean;\n  /** Locked (controlled). */\n  locked?: boolean;\n  /** Initially locked (uncontrolled). */\n  defaultLocked?: boolean;\n  /** Called when the lock is switched. */\n  onLockedChange?: (locked: boolean) => void;\n  /** What the lock covers. Defaults to `"this project"`. */\n  lockScope?: string;\n\n  /** Grid / list: show the "Match a style" reference-image drop. */\n  allowReference?: boolean;\n  /** The attached reference (controlled; `null` for none). */\n  reference?: PresetStyleReference | null;\n  /** Initially attached reference (uncontrolled). */\n  defaultReference?: PresetStyleReference | null;\n  /** Called with the dropped or picked image, or `null` when removed. */\n  onReferenceChange?: (file: File | null) => void;\n\n  /** Menu: what is showing at first. Defaults to `"closed"`. */\n  defaultView?: PresetStylesView;\n  /** Menu: called when the menu or a card opens or closes. */\n  onViewChange?: (view: PresetStylesView) => void;\n  /** Menu: show a sample reply for the style under the pointer or focus. Defaults to `true`. */\n  showPreview?: boolean;\n  /** Menu: the style previewed when the menu opens. Defaults to the chosen one. */\n  defaultPreview?: string;\n  /** Menu: the familiar request the preview answers, e.g. `"Summarize the October release."`. */\n  previewPrompt?: string;\n  /** Menu: what a style applies to. Defaults to `"new messages, edits and retries"`. */\n  scope?: string;\n  /** Menu: the conversation already has replies \u2014 switching says earlier ones keep their style. */\n  earlierReplies?: boolean;\n  /** Menu: the confirmation line shown at first (restoring UI). */\n  defaultNotice?: PresetStylesNotice | null;\n\n  /** Menu: makes a custom style from an example or a description. Enables "Create & edit styles". */\n  onGenerateStyle?: (request: PresetStyleRequest) => Promise<PresetStyleDraft>;\n  /** Menu: called when a custom style is saved (`use` = Save and use). It is also kept locally. */\n  onSaveStyle?: (style: PresetStyle, use: boolean) => void;\n  /** Menu: the generated draft to review when `defaultView="review"`. */\n  defaultGenerated?: PresetStyleDraft;\n\n  /** Menu: render the family\'s composer with the Style control in its toolbar. Defaults to `true`; `false` renders only the control. */\n  withComposer?: boolean;\n  /** Composer text (controlled). */\n  message?: string;\n  /** Composer text at first (uncontrolled). */\n  defaultMessage?: string;\n  /** Called as the composer text changes. */\n  onMessageChange?: (text: string) => void;\n  /** Called on send with the request and the chosen style id. The style is a setting; the text is never edited. */\n  onSubmit?: (text: string, styleId: string) => void;\n  /** Composer placeholder. Defaults to `"Describe what you need\u2026"`. */\n  placeholder?: string;\n}',
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onSubmit">'
+          ],
+          members: [
+            {
+              name: "styles",
+              type: "PresetStyle[]",
+              required: true,
+              description: 'The presets, in order. In `"menu"`, the first one is the base style (Normal) unless `baseStyle` says otherwise.'
+            },
+            {
+              name: "value",
+              type: "string",
+              required: false,
+              description: "Chosen style id (controlled)."
+            },
+            {
+              name: "defaultValue",
+              type: "string",
+              required: false,
+              description: "Initial style id (uncontrolled). Defaults to the base style."
+            },
+            {
+              name: "onValueChange",
+              type: "(id: string) => void",
+              required: false,
+              description: "Called when a style is chosen (or \xD7 returns to the base style). Never touches the request text."
+            },
+            {
+              name: "variant",
+              type: "PresetStylesVariant",
+              required: false,
+              description: 'Layout. Defaults to `"grid"`.',
+              values: [
+                "grid",
+                "list",
+                "menu"
+              ]
+            },
+            {
+              name: "label",
+              type: "string",
+              required: false,
+              description: 'Heading. Defaults to `"Output style"` (grid, list) or `"Use style"` (menu). Also the group\'s accessible name.'
+            },
+            {
+              name: "description",
+              type: "string",
+              required: false,
+              description: 'Menu sub-heading. Defaults to `"How {agentName} writes its replies \u2014 not what it knows or does."`.'
+            },
+            {
+              name: "baseStyle",
+              type: "string",
+              required: false,
+              description: "The plain style \xD7 goes back to. Defaults to the first style."
+            },
+            {
+              name: "agentName",
+              type: "string",
+              required: false,
+              description: 'Who writes, for the copy. Defaults to `"Aria"`.'
+            },
+            {
+              name: "lockable",
+              type: "boolean",
+              required: false,
+              description: "Grid / list: show the per-project lock line."
+            },
+            {
+              name: "locked",
+              type: "boolean",
+              required: false,
+              description: "Locked (controlled)."
+            },
+            {
+              name: "defaultLocked",
+              type: "boolean",
+              required: false,
+              description: "Initially locked (uncontrolled)."
+            },
+            {
+              name: "onLockedChange",
+              type: "(locked: boolean) => void",
+              required: false,
+              description: "Called when the lock is switched."
+            },
+            {
+              name: "lockScope",
+              type: "string",
+              required: false,
+              description: 'What the lock covers. Defaults to `"this project"`.'
+            },
+            {
+              name: "allowReference",
+              type: "boolean",
+              required: false,
+              description: 'Grid / list: show the "Match a style" reference-image drop.'
+            },
+            {
+              name: "reference",
+              type: "PresetStyleReference | null",
+              required: false,
+              description: "The attached reference (controlled; `null` for none)."
+            },
+            {
+              name: "defaultReference",
+              type: "PresetStyleReference | null",
+              required: false,
+              description: "Initially attached reference (uncontrolled)."
+            },
+            {
+              name: "onReferenceChange",
+              type: "(file: File | null) => void",
+              required: false,
+              description: "Called with the dropped or picked image, or `null` when removed."
+            },
+            {
+              name: "defaultView",
+              type: "PresetStylesView",
+              required: false,
+              description: 'Menu: what is showing at first. Defaults to `"closed"`.',
+              values: [
+                "closed",
+                "menu",
+                "create",
+                "review"
+              ]
+            },
+            {
+              name: "onViewChange",
+              type: "(view: PresetStylesView) => void",
+              required: false,
+              description: "Menu: called when the menu or a card opens or closes."
+            },
+            {
+              name: "showPreview",
+              type: "boolean",
+              required: false,
+              description: "Menu: show a sample reply for the style under the pointer or focus. Defaults to `true`."
+            },
+            {
+              name: "defaultPreview",
+              type: "string",
+              required: false,
+              description: "Menu: the style previewed when the menu opens. Defaults to the chosen one."
+            },
+            {
+              name: "previewPrompt",
+              type: "string",
+              required: false,
+              description: 'Menu: the familiar request the preview answers, e.g. `"Summarize the October release."`.'
+            },
+            {
+              name: "scope",
+              type: "string",
               required: false,
-              description: "Whether the popover is open (controlled)."
+              description: 'Menu: what a style applies to. Defaults to `"new messages, edits and retries"`.'
             },
             {
-              name: "defaultOpen",
+              name: "earlierReplies",
               type: "boolean",
               required: false,
-              description: "Initial open state (uncontrolled).",
-              default: "false"
+              description: "Menu: the conversation already has replies \u2014 switching says earlier ones keep their style."
             },
             {
-              name: "onOpenChange",
-              type: "(open: boolean) => void",
+              name: "defaultNotice",
+              type: "PresetStylesNotice | null",
               required: false,
-              description: "Called when the popover requests to open or close."
+              description: "Menu: the confirmation line shown at first (restoring UI)."
             },
             {
-              name: "children",
-              type: "React.ReactNode",
-              required: true
-            }
-          ]
-        },
-        {
-          name: "PopoverTriggerProps",
-          source: 'export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Additional classes merged onto the trigger button. */\n  className?: string;\n  /** Button type. Defaults to "button". */\n  type?: "button" | "submit" | "reset";\n}',
-          extends: [
-            "React.ButtonHTMLAttributes<HTMLButtonElement>"
-          ],
-          members: [
+              name: "onGenerateStyle",
+              type: "(request: PresetStyleRequest) => Promise<PresetStyleDraft>",
+              required: false,
+              description: 'Menu: makes a custom style from an example or a description. Enables "Create & edit styles".'
+            },
             {
-              name: "className",
+              name: "onSaveStyle",
+              type: "(style: PresetStyle, use: boolean) => void",
+              required: false,
+              description: "Menu: called when a custom style is saved (`use` = Save and use). It is also kept locally."
+            },
+            {
+              name: "defaultGenerated",
+              type: "PresetStyleDraft",
+              required: false,
+              description: 'Menu: the generated draft to review when `defaultView="review"`.'
+            },
+            {
+              name: "withComposer",
+              type: "boolean",
+              required: false,
+              description: "Menu: render the family's composer with the Style control in its toolbar. Defaults to `true`; `false` renders only the control."
+            },
+            {
+              name: "message",
               type: "string",
               required: false,
-              description: "Additional classes merged onto the trigger button."
+              description: "Composer text (controlled)."
             },
             {
-              name: "type",
-              type: '"button" | "submit" | "reset"',
+              name: "defaultMessage",
+              type: "string",
               required: false,
-              description: 'Button type. Defaults to "button".',
-              values: [
-                "button",
-                "submit",
-                "reset"
-              ],
-              default: '"button"'
-            }
-          ]
-        },
-        {
-          name: "PopoverContentProps",
-          source: 'export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Horizontal alignment relative to the trigger. */\n  align?: "start" | "end";\n  /**\n   * Alias of `align` (CSS flex vocabulary). Deprecated \u2014 use `align`.\n   * @deprecated Use `align` instead. Alias kept so agents reaching for the\n   *   CSS property name are caught; it maps 1:1.\n   */\n  alignItems?: "start" | "end";\n}',
-          extends: [
-            "React.HTMLAttributes<HTMLDivElement>"
-          ],
-          members: [
+              description: "Composer text at first (uncontrolled)."
+            },
             {
-              name: "align",
-              type: '"start" | "end"',
+              name: "onMessageChange",
+              type: "(text: string) => void",
               required: false,
-              description: "Horizontal alignment relative to the trigger.",
-              values: [
-                "start",
-                "end"
-              ]
+              description: "Called as the composer text changes."
             },
             {
-              name: "alignItems",
-              type: '"start" | "end"',
+              name: "onSubmit",
+              type: "(text: string, styleId: string) => void",
               required: false,
-              description: "Alias of `align` (CSS flex vocabulary). Deprecated \u2014 use `align`.",
-              values: [
-                "start",
-                "end"
-              ],
-              deprecated: "Use `align` instead. Alias kept so agents reaching for the CSS property name are caught; it maps 1:1."
+              description: "Called on send with the request and the chosen style id. The style is a setting; the text is never edited."
+            },
+            {
+              name: "placeholder",
+              type: "string",
+              required: false,
+              description: 'Composer placeholder. Defaults to `"Describe what you need\u2026"`.'
             }
           ]
         }
       ],
-      readme: '# @nucleux/popover\n\nClick popover with outside-click/Escape \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/popover @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Popover, PopoverTrigger, PopoverContent } from "@nucleux/popover";\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',
+      readme: '# @nucleux/preset-styles\n\nPreset Styles \u2014 one-click named styles for how the agent\'s output looks or reads \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\nA style communicates in one tap what would take a paragraph to describe. Pick\nit before generating (a swatch grid or a list of brand presets), or set how\nreplies are written from the composer\'s Style control \u2014 with a sample reply\nthat follows the pointer, a chip that names the active style, \xD7 back to the\nbase style with Undo, and custom styles made from the person\'s own writing.\nThe request text is never edited: the style travels with the send.\n\n## Exports\n\n- **`PresetStyles`** \u2014 the picker (`variant`: `"grid"` | `"list"` | `"menu"`)\n- **`usePresetStyles`** \u2014 its state and behaviour (shared with the Material 3 twin), plus `presetStylesCopy`, `presetStylesNoticeText` and `presetStylesMoveFocus`\n- Types: `PresetStylesProps`, `PresetStyle`, `PresetStylesVariant`, `PresetStylesView`, `PresetStylesNotice`, `PresetStyleSwatch`, `PresetStyleReference`, `PresetStyleRequest`, `PresetStyleDraft`, `PresetStyleSource`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `grid` (default) | Swatch tiles picked before generating; `allowReference` adds "Match a style" (drop or pick an image), `lockable` the per-project lock. |\n| `list` | A short list of named, brand-agreed presets. |\n| `menu` | A Style control in the composer (`OpenInput`) that opens "Use style": styles with one line each, a live preview, Create & edit styles. |\n\n## Behaviour\n\n- `styles`, `value` / `defaultValue` / `onValueChange`. Arrow keys, Home and End move between styles.\n- Grid / list: `lockable`, `locked` / `defaultLocked` / `onLockedChange`, `lockScope`; `allowReference`, `reference` / `defaultReference` / `onReferenceChange(file | null)`.\n- Menu: choosing applies at once and closes; Escape or an outside click closes and returns focus to the control. `previewPrompt` + each style\'s `sample` drive the preview (`showPreview`). One status line says where the style applies (`scope`, `earlierReplies`); \xD7 returns to `baseStyle` with Undo.\n- Custom styles: pass `onGenerateStyle(request) => Promise<draft>` (the app\'s model call) to enable Create & edit styles \u2014 paste or upload an example, or describe the style; the component shows progress and a retryable error, then a review card where name, description and instructions are editable, with a preview, Save and Save and use (`onSaveStyle(style, use)`).\n- `withComposer={false}` renders only the Style control for your own composer; otherwise `message` / `defaultMessage` / `onMessageChange` and `onSubmit(text, styleId)`.\n\n## Usage\n\n```tsx\nimport { PresetStyles } from "@nucleux/preset-styles";\n\n<PresetStyles\n  variant="menu"\n  styles={[\n    { id: "normal", name: "Normal", description: "Aria\u2019s default replies.", sample: normalReply },\n    { id: "concise", name: "Concise", description: "Shorter, more direct replies.", sample: conciseReply },\n  ]}\n  previewPrompt="Summarize the October release."\n  onGenerateStyle={(req) => api.generateStyle(req)}\n  onSubmit={(text, style) => send(text, { style })}\n/>\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"
+      },
+      twin: {
+        name: "md3-preset-styles",
+        package: "@nucleux/md3-preset-styles",
+        component: "Md3PresetStyles",
+        sharesApi: true
       }
     },
     {
@@ -13051,45 +14322,303 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
               name: "value",
               type: "number",
               required: false,
-              description: "Current value (0\u2013max). Omit for an indeterminate bar."
+              description: "Current value (0\u2013max). Omit for an indeterminate bar."
+            },
+            {
+              name: "max",
+              type: "number",
+              required: false,
+              description: "Maximum value.",
+              default: "100"
+            },
+            {
+              name: "size",
+              type: "ProgressSize",
+              required: false,
+              description: 'Thickness preset: "sm" or "md" (default).',
+              values: [
+                "sm",
+                "md"
+              ],
+              default: '"md"'
+            },
+            {
+              name: "indicatorClassName",
+              type: "string",
+              required: false,
+              description: 'Class applied to the filled indicator (e.g. "bg-success").'
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/progress\n\nDeterminate/indeterminate progress bar \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/progress @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Progress } from "@nucleux/progress";\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"
+      },
+      twin: {
+        name: "md3-progress",
+        package: "@nucleux/md3-progress",
+        component: "Md3LinearProgress",
+        sharesApi: false
+      }
+    },
+    {
+      name: "prompt-enhancer",
+      package: "@nucleux/prompt-enhancer",
+      kind: "component",
+      description: "The fixed copy both families use, so accessible names match.",
+      summary: "Prompt Enhancer \u2014 a magic-wand action that rewrites a short ask into a precise one, shown as a reviewable diff \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "prompt-enhancer",
+        "prompt",
+        "enhance",
+        "prompt-scaffold"
+      ],
+      exports: [
+        "PROMPT_ENHANCER_TEXT",
+        "buildEnhancedPrompt",
+        "resolveEnhancedPrompt",
+        "getPromptEnhancerSegments",
+        "describePromptEnhancerChange",
+        "usePromptEnhancer",
+        "splitPromptEnhancerProps",
+        "PromptEnhancer",
+        "PromptEnhancerVariant",
+        "PromptEnhancerState",
+        "PromptEnhancerDiffStyle",
+        "PromptEnhancerChange",
+        "PromptEnhancerSuggestion",
+        "PromptEnhancerSegment",
+        "PromptEnhancerProps",
+        "PromptEnhancerController"
+      ],
+      components: [
+        "PromptEnhancer",
+        "PROMPT_ENHANCER_TEXT"
+      ],
+      import: 'import { PromptEnhancer, PROMPT_ENHANCER_TEXT } from "@nucleux/prompt-enhancer";',
+      installSingle: "pnpm add @nucleux/prompt-enhancer @nucleux/tokens",
+      props: [
+        {
+          name: "PromptEnhancerProps",
+          source: 'export interface PromptEnhancerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "defaultValue" | "onChange"> {\n  /** The composer text (controlled). Omit and use `defaultValue` for an uncontrolled composer. */\n  value?: string;\n  /** Initial composer text when uncontrolled. */\n  defaultValue?: string;\n  /** Called whenever the composer text changes \u2014 typing, Use, Undo. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Produces the suggestion for a prompt. No model is called by the component:\n   * the app supplies this. May be async; a rejection shows the failed state and\n   * leaves the original untouched. `signal` aborts when the person cancels.\n   */\n  onEnhance?: (\n    prompt: string,\n    options: { signal: AbortSignal },\n  ) => PromptEnhancerSuggestion | Promise<PromptEnhancerSuggestion>;\n  /** Called with the trimmed text when the person sends. Without it the composer shows no send button. The enhancer never sends on its own. */\n  onSubmit?: (value: string) => void;\n  /** Called when the person uses the suggestion \u2014 the composer now holds `enhanced`. */\n  onUse?: (enhanced: string, original: string) => void;\n  /** Called when the person dismisses the suggestion and keeps their prompt. */\n  onKeepOriginal?: () => void;\n  /** Called when the person undoes Use \u2014 the composer holds `original` again. */\n  onUndo?: (original: string) => void;\n  /** Called on every state change. */\n  onStateChange?: (state: PromptEnhancerState) => void;\n  /** "preview-diff" (default), "wand-button" or "auto-enhance-toggle". */\n  variant?: PromptEnhancerVariant;\n  /** "split" (default) or "inline". */\n  diffStyle?: PromptEnhancerDiffStyle;\n  /** Mark each addition and list the changes with a checkbox each. Defaults to true. */\n  showChanges?: boolean;\n  /** Show the reason under each change. Defaults to true. */\n  explain?: boolean;\n  /** Offer Edit, which opens the suggestion in a text field. Defaults to true. */\n  allowEdit?: boolean;\n  /** Offer Keep original. Defaults to true. */\n  allowKeepOriginal?: boolean;\n  /** Offer Undo after Use. Defaults to true. */\n  undo?: boolean;\n  /** Auto-enhance switch (controlled), for the "auto-enhance-toggle" variant. */\n  autoEnhance?: boolean;\n  /** Initial auto-enhance switch state when uncontrolled. Defaults to false. */\n  defaultAutoEnhance?: boolean;\n  /** Called when the auto-enhance switch changes. */\n  onAutoEnhanceChange?: (on: boolean) => void;\n  /** State to start in (stories, restored sessions). Defaults to "original". States after a suggestion need `defaultSuggestion`. */\n  defaultState?: PromptEnhancerState;\n  /** Suggestion to start with, for `defaultState` "enhanced" / "editing". */\n  defaultSuggestion?: PromptEnhancerSuggestion;\n  /** Ids of changes that start removed. */\n  defaultRemoved?: string[];\n  /** The prompt as written before Use, for `defaultState` "accepted" (what Undo restores). */\n  defaultOriginal?: string;\n  /** Label of the enhance action. Defaults to "Enhance". */\n  actionLabel?: string;\n  /** Heading of the review. Defaults to "Suggested improvements". */\n  heading?: string;\n  /** Quiet line in the composer footer, e.g. "Aria will expand this prompt". */\n  hint?: React.ReactNode;\n  /** Composer placeholder, also its accessible name. Defaults to "Describe what you need\u2026". */\n  placeholder?: string;\n  /** Copy for the failed state. Say the original is unchanged. */\n  failureMessage?: string;\n  /** Extra composer tools (model chip, attach\u2026), placed beside the enhance action. */\n  composerActions?: React.ReactNode;\n}',
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "defaultValue" | "onChange">'
+          ],
+          members: [
+            {
+              name: "value",
+              type: "string",
+              required: false,
+              description: "The composer text (controlled). Omit and use `defaultValue` for an uncontrolled composer."
+            },
+            {
+              name: "defaultValue",
+              type: "string",
+              required: false,
+              description: "Initial composer text when uncontrolled."
+            },
+            {
+              name: "onValueChange",
+              type: "(value: string) => void",
+              required: false,
+              description: "Called whenever the composer text changes \u2014 typing, Use, Undo."
+            },
+            {
+              name: "onEnhance",
+              type: "( prompt: string, options: { signal: AbortSignal }, ) => PromptEnhancerSuggestion | Promise<PromptEnhancerSuggestion>",
+              required: false,
+              description: "Produces the suggestion for a prompt. No model is called by the component: the app supplies this. May be async; a rejection shows the failed state and leaves the original untouched. `signal` aborts when the person cancels."
+            },
+            {
+              name: "onSubmit",
+              type: "(value: string) => void",
+              required: false,
+              description: "Called with the trimmed text when the person sends. Without it the composer shows no send button. The enhancer never sends on its own."
+            },
+            {
+              name: "onUse",
+              type: "(enhanced: string, original: string) => void",
+              required: false,
+              description: "Called when the person uses the suggestion \u2014 the composer now holds `enhanced`."
+            },
+            {
+              name: "onKeepOriginal",
+              type: "() => void",
+              required: false,
+              description: "Called when the person dismisses the suggestion and keeps their prompt."
+            },
+            {
+              name: "onUndo",
+              type: "(original: string) => void",
+              required: false,
+              description: "Called when the person undoes Use \u2014 the composer holds `original` again."
+            },
+            {
+              name: "onStateChange",
+              type: "(state: PromptEnhancerState) => void",
+              required: false,
+              description: "Called on every state change."
+            },
+            {
+              name: "variant",
+              type: "PromptEnhancerVariant",
+              required: false,
+              description: '"preview-diff" (default), "wand-button" or "auto-enhance-toggle".',
+              values: [
+                "preview-diff",
+                "wand-button",
+                "auto-enhance-toggle"
+              ]
+            },
+            {
+              name: "diffStyle",
+              type: "PromptEnhancerDiffStyle",
+              required: false,
+              description: '"split" (default) or "inline".',
+              values: [
+                "split",
+                "inline"
+              ]
+            },
+            {
+              name: "showChanges",
+              type: "boolean",
+              required: false,
+              description: "Mark each addition and list the changes with a checkbox each. Defaults to true."
+            },
+            {
+              name: "explain",
+              type: "boolean",
+              required: false,
+              description: "Show the reason under each change. Defaults to true."
+            },
+            {
+              name: "allowEdit",
+              type: "boolean",
+              required: false,
+              description: "Offer Edit, which opens the suggestion in a text field. Defaults to true."
+            },
+            {
+              name: "allowKeepOriginal",
+              type: "boolean",
+              required: false,
+              description: "Offer Keep original. Defaults to true."
+            },
+            {
+              name: "undo",
+              type: "boolean",
+              required: false,
+              description: "Offer Undo after Use. Defaults to true."
+            },
+            {
+              name: "autoEnhance",
+              type: "boolean",
+              required: false,
+              description: 'Auto-enhance switch (controlled), for the "auto-enhance-toggle" variant.'
+            },
+            {
+              name: "defaultAutoEnhance",
+              type: "boolean",
+              required: false,
+              description: "Initial auto-enhance switch state when uncontrolled. Defaults to false."
+            },
+            {
+              name: "onAutoEnhanceChange",
+              type: "(on: boolean) => void",
+              required: false,
+              description: "Called when the auto-enhance switch changes."
+            },
+            {
+              name: "defaultState",
+              type: "PromptEnhancerState",
+              required: false,
+              description: 'State to start in (stories, restored sessions). Defaults to "original". States after a suggestion need `defaultSuggestion`.',
+              values: [
+                "original",
+                "enhancing",
+                "enhanced",
+                "editing",
+                "accepted",
+                "reverted",
+                "failed"
+              ]
+            },
+            {
+              name: "defaultSuggestion",
+              type: "PromptEnhancerSuggestion",
+              required: false,
+              description: 'Suggestion to start with, for `defaultState` "enhanced" / "editing".'
+            },
+            {
+              name: "defaultRemoved",
+              type: "string[]",
+              required: false,
+              description: "Ids of changes that start removed."
+            },
+            {
+              name: "defaultOriginal",
+              type: "string",
+              required: false,
+              description: 'The prompt as written before Use, for `defaultState` "accepted" (what Undo restores).'
+            },
+            {
+              name: "actionLabel",
+              type: "string",
+              required: false,
+              description: 'Label of the enhance action. Defaults to "Enhance".'
+            },
+            {
+              name: "heading",
+              type: "string",
+              required: false,
+              description: 'Heading of the review. Defaults to "Suggested improvements".'
+            },
+            {
+              name: "hint",
+              type: "React.ReactNode",
+              required: false,
+              description: 'Quiet line in the composer footer, e.g. "Aria will expand this prompt".'
             },
             {
-              name: "max",
-              type: "number",
+              name: "placeholder",
+              type: "string",
               required: false,
-              description: "Maximum value.",
-              default: "100"
+              description: 'Composer placeholder, also its accessible name. Defaults to "Describe what you need\u2026".'
             },
             {
-              name: "size",
-              type: "ProgressSize",
+              name: "failureMessage",
+              type: "string",
               required: false,
-              description: 'Thickness preset: "sm" or "md" (default).',
-              values: [
-                "sm",
-                "md"
-              ],
-              default: '"md"'
+              description: "Copy for the failed state. Say the original is unchanged."
             },
             {
-              name: "indicatorClassName",
-              type: "string",
+              name: "composerActions",
+              type: "React.ReactNode",
               required: false,
-              description: 'Class applied to the filled indicator (e.g. "bg-success").'
+              description: "Extra composer tools (model chip, attach\u2026), placed beside the enhance action."
             }
           ]
         }
       ],
-      readme: '# @nucleux/progress\n\nDeterminate/indeterminate progress bar \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/progress @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Progress } from "@nucleux/progress";\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',
+      readme: '# @nucleux/prompt-enhancer\n\nPrompt Enhancer \u2014 a magic-wand action that rewrites a short ask into a precise one, shown as a reviewable diff \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\nAn Enhance action in the composer expands a terse prompt into a clearer one\nand shows it beside the original \u2014 each addition marked, explained and\nremovable, assumptions labelled. It never silently replaces the prompt: Use\nputs the result in the composer with Undo and sends nothing; Keep original and\nEdit are always there, and a failure leaves the original untouched. The\ncomponent calls no model \u2014 the app supplies `onEnhance`.\n\n## Exports\n\n- **`PromptEnhancer`** \u2014 the composer, the Enhance action and the review\n- **`usePromptEnhancer`** \u2014 the shared, non-visual logic (state machine, async enhance with cancel, Use/Undo)\n- Helpers: `buildEnhancedPrompt`, `resolveEnhancedPrompt`, `getPromptEnhancerSegments`, `describePromptEnhancerChange`, `PROMPT_ENHANCER_TEXT`\n- Types: `PromptEnhancerProps`, `PromptEnhancerVariant`, `PromptEnhancerState`, `PromptEnhancerDiffStyle`, `PromptEnhancerChange`, `PromptEnhancerSuggestion`, `PromptEnhancerSegment`, `PromptEnhancerController`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `preview-diff` (default) | Original and enhanced side by side (`diffStyle="split"`) or one sentence with additions marked (`"inline"`) |\n| `wand-button` | The enhancement is applied in place; Undo restores the original |\n| `auto-enhance-toggle` | A switch: when on, Send enhances the prompt first, then sends it |\n\nStates: `original`, `enhancing` (cancel), `enhanced`, `editing`, `accepted` (Undo), `reverted`, `failed` (Try again / Keep original).\n\n## Install\n\n```bash\npnpm add @nucleux/prompt-enhancer @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { PromptEnhancer } from "@nucleux/prompt-enhancer";\n\n<PromptEnhancer\n  value={draft}\n  onValueChange={setDraft}\n  hint="Aria will expand this prompt"\n  onEnhance={(prompt, { signal }) => api.enhance(prompt, { signal })}\n  // resolves with { changes: [{ id, text: " from the last quarter", reason, assumption? }] }\n  // or { text: "the whole enhanced prompt" }\n  onSubmit={send}\n/>\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"
       },
       twin: {
-        name: "md3-progress",
-        package: "@nucleux/md3-progress",
-        component: "Md3LinearProgress",
-        sharesApi: false
+        name: "md3-prompt-enhancer",
+        package: "@nucleux/md3-prompt-enhancer",
+        component: "Md3PromptEnhancer",
+        sharesApi: true
       }
     },
     {
@@ -15288,54 +16817,368 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
               default: '"chip-row"'
             },
             {
-              name: "label",
-              type: "React.ReactNode",
+              name: "label",
+              type: "React.ReactNode",
+              required: false,
+              description: 'A short lead shown before the set ("Try asking:"); also names the list.'
+            },
+            {
+              name: "max",
+              type: "number",
+              required: false,
+              description: "The most items shown. Defaults to 5 (the spec's 3\u20135 cap).",
+              default: "5"
+            },
+            {
+              name: "afterSelect",
+              type: "SuggestedPromptsAfterSelect",
+              required: false,
+              description: 'After a choice: "keep" (default) leaves the set as is, "mark" keeps the others in view with the chosen one marked, "remove" removes the chosen one.',
+              values: [
+                "keep",
+                "mark",
+                "remove"
+              ],
+              default: '"keep"'
+            },
+            {
+              name: "selectedId",
+              type: "string | null",
+              required: false,
+              description: 'Controlled chosen item (its id) for `afterSelect="mark"`.'
+            },
+            {
+              name: "onDismiss",
+              type: "() => void",
+              required: false,
+              description: "Shows a dismiss button (contextual tooltip) and is called when it is pressed or Escape is hit."
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/suggested-prompts\n\nSuggested Prompts \u2014 smart, context-aware preset actions to jumpstart engagement \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\nA few ready-made prompts that answer "what do I type?" without blocking the\ncomposer. Choosing one hands its prompt to `onSelect` \u2014 place it in the\ncomposer as editable text; never send it.\n\n## Exports\n\n- **`SuggestedPrompts`** \u2014 the set (`items` + `onSelect`, or compose children)\n- **`SuggestedPrompt`** \u2014 one suggestion (a button; `icon`, `description`, `selected`)\n- Types: `SuggestedPromptsProps`, `SuggestedPromptProps`, `SuggestedPromptItem`, `SuggestedPromptsVariant`, `SuggestedPromptsAfterSelect`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `chip-row` (default) | Pills above the composer in an empty thread. |\n| `card-list` | Stacked cards with a supporting line, in an assistant panel. |\n| `contextual-tooltip` | A dark bubble by the selection or cursor with one action; `onDismiss` adds \xD7 and Escape. |\n\n## Behaviour\n\n- `items` are strings or `{ id?, title, prompt?, description?, icon? }`; `onSelect(prompt, item)` gets the fuller `prompt` when there is one.\n- Capped at `max` (5).\n- `afterSelect`: `"keep"` (default), `"mark"` (others stay, the chosen one gets `aria-pressed`; control it with `selectedId`) or `"remove"` (remove once tapped).\n- With `items` the set is a list named by `label` ("Try asking:"), or "Suggested prompts".\n- Hide the set once the person types (the `hidden` attribute, or don\'t render it). `InitialCta` does this for you.\n\n## Usage\n\n```tsx\nimport { SuggestedPrompts } from "@nucleux/suggested-prompts";\n\n<SuggestedPrompts\n  label="Try asking:"\n  items={[\n    { title: "Find unresolved decisions", prompt: "Find the unresolved decisions blocking the September release." },\n    "Draft a follow-up to Acme Corp",\n    "Which accounts need attention?",\n  ]}\n  onSelect={(prompt) => { setDraft(prompt); composerRef.current?.focus(); }}\n/>\n```\n\n## Install\n\n```bash\npnpm add @nucleux/suggested-prompts @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\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"
+      },
+      twin: {
+        name: "md3-suggested-prompts",
+        package: "@nucleux/md3-suggested-prompts",
+        component: "Md3SuggestedPrompts",
+        sharesApi: true
+      }
+    },
+    {
+      name: "suggestions",
+      package: "@nucleux/suggestions",
+      kind: "component",
+      description: 'Context-aware quick-action chips that save the person forming, typing and\nsubmitting the obvious next step: above the composer as starters or quick\nedits ("compose"), under an answer as follow-ups ("follow-up", marked \u21B3),\nor as a floating toolbar on highlighted content ("selection"). At most three\nverb-labelled chips; the row can be marked as the agent\'s (`label`), explain\nitself behind an info toggle (`reason`) and be dismissed (button or Escape).\nChoosing a chip only calls `onSelect` \u2014 it never sends \u2014 and the row can\nthen show a one-line confirmation with Undo, a dismissed or no-longer-relevant\nline, a loading line or an error with Retry, through `status`. Arrow keys,\nHome and End move between chips.',
+      summary: "Suggestions \u2014 quick-action chips above the composer, under an answer or on a selection that add to the request, never send it \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "suggestions",
+        "prompt-scaffold",
+        "chips"
+      ],
+      exports: [
+        "suggestionsMessages",
+        "suggestionKey",
+        "appendSuggestion",
+        "handleSuggestionsKeyDown",
+        "useSuggestions",
+        "Suggestions",
+        "useSuggestionsComposer",
+        "SuggestionsComposer",
+        "SuggestionItem",
+        "SuggestionsVariant",
+        "SuggestionsStatus",
+        "SuggestionsMessages",
+        "SuggestionsProps",
+        "SuggestionsComposerProps"
+      ],
+      components: [
+        "Suggestions",
+        "SuggestionsComposer"
+      ],
+      import: 'import { Suggestions, SuggestionsComposer } from "@nucleux/suggestions";',
+      installSingle: "pnpm add @nucleux/suggestions @nucleux/tokens",
+      props: [
+        {
+          name: "SuggestionsProps",
+          source: 'export interface SuggestionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {\n  /** The chips. Only the first `max` are shown. */\n  suggestions: SuggestionItem[];\n  /** "compose" (default), "follow-up" or "selection". */\n  variant?: SuggestionsVariant;\n  /** What the row shows. Defaults to "available". */\n  status?: SuggestionsStatus;\n  /** Visible heading marking the row as the agent\'s ("Aria suggests"). Also names the group. */\n  label?: React.ReactNode;\n  /** Why these help \u2014 behind an info toggle (`aria-expanded`). */\n  reason?: React.ReactNode;\n  /**\n   * Prefix for each chip\'s accessible name, saying what pressing it does:\n   * "Add to prompt" makes a chip read "Add to prompt: Include unresolved blockers".\n   */\n  actionLabel?: string;\n  /** Maximum chips shown. Defaults to 3 \u2014 more is a menu, not a shortcut. */\n  max?: number;\n  /** A chip whose action is running: it shows a spinner and `aria-busy`. */\n  pendingId?: string;\n  /** The suggestion that was added \u2014 named by the "accepted" line. */\n  accepted?: SuggestionItem;\n  /** Called with the chosen suggestion and its index. The row never sends anything itself. */\n  onSelect?: (item: SuggestionItem, index: number) => void;\n  /** Shows a dismiss button (Escape works too) and is called when it is pressed. */\n  onDismiss?: () => void;\n  /** Shows Undo on the "accepted" line. */\n  onUndo?: () => void;\n  /** Shows Retry on the "error" line. */\n  onRetry?: () => void;\n  /** Copy overrides. */\n  messages?: Partial<SuggestionsMessages>;\n}',
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">'
+          ],
+          members: [
+            {
+              name: "suggestions",
+              type: "SuggestionItem[]",
+              required: true,
+              description: "The chips. Only the first `max` are shown."
+            },
+            {
+              name: "variant",
+              type: "SuggestionsVariant",
+              required: false,
+              description: '"compose" (default), "follow-up" or "selection".',
+              values: [
+                "compose",
+                "follow-up",
+                "selection"
+              ]
+            },
+            {
+              name: "status",
+              type: "SuggestionsStatus",
+              required: false,
+              description: 'What the row shows. Defaults to "available".',
+              values: [
+                "idle",
+                "loading",
+                "available",
+                "error",
+                "accepted",
+                "dismissed",
+                "irrelevant"
+              ]
+            },
+            {
+              name: "label",
+              type: "React.ReactNode",
+              required: false,
+              description: `Visible heading marking the row as the agent's ("Aria suggests"). Also names the group.`
+            },
+            {
+              name: "reason",
+              type: "React.ReactNode",
+              required: false,
+              description: "Why these help \u2014 behind an info toggle (`aria-expanded`)."
+            },
+            {
+              name: "actionLabel",
+              type: "string",
+              required: false,
+              description: `Prefix for each chip's accessible name, saying what pressing it does: "Add to prompt" makes a chip read "Add to prompt: Include unresolved blockers".`
+            },
+            {
+              name: "max",
+              type: "number",
+              required: false,
+              description: "Maximum chips shown. Defaults to 3 \u2014 more is a menu, not a shortcut."
+            },
+            {
+              name: "pendingId",
+              type: "string",
+              required: false,
+              description: "A chip whose action is running: it shows a spinner and `aria-busy`."
+            },
+            {
+              name: "accepted",
+              type: "SuggestionItem",
+              required: false,
+              description: 'The suggestion that was added \u2014 named by the "accepted" line.'
+            },
+            {
+              name: "onSelect",
+              type: "(item: SuggestionItem, index: number) => void",
+              required: false,
+              description: "Called with the chosen suggestion and its index. The row never sends anything itself."
+            },
+            {
+              name: "onDismiss",
+              type: "() => void",
+              required: false,
+              description: "Shows a dismiss button (Escape works too) and is called when it is pressed."
+            },
+            {
+              name: "onUndo",
+              type: "() => void",
+              required: false,
+              description: 'Shows Undo on the "accepted" line.'
+            },
+            {
+              name: "onRetry",
+              type: "() => void",
+              required: false,
+              description: 'Shows Retry on the "error" line.'
+            },
+            {
+              name: "messages",
+              type: "Partial<SuggestionsMessages>",
+              required: false,
+              description: "Copy overrides."
+            }
+          ]
+        },
+        {
+          name: "SuggestionsComposerProps",
+          source: 'export interface SuggestionsComposerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "onSelect" | "defaultValue" | "onChange"> {\n  /** Controlled draft. Omit (and use `defaultValue`) for an uncontrolled composer. */\n  value?: string;\n  /** Initial draft when uncontrolled. */\n  defaultValue?: string;\n  /** Called whenever the draft changes \u2014 typing, adding a suggestion, Undo. */\n  onValueChange?: (value: string) => void;\n  /** Called with the trimmed draft when the person sends. Suggestions never send on their own. */\n  onSubmit: (value: string) => void | Promise<unknown>;\n  /** Suggestions the app already has for this request (data, no model call). */\n  suggestions?: SuggestionItem[];\n  /**\n   * Fetch suggestions for the draft after a pause in typing. Abort on `signal`.\n   * While pending the row shows a loading line; a rejection shows Retry.\n   */\n  loadSuggestions?: (draft: string, options: { signal: AbortSignal }) => Promise<SuggestionItem[]>;\n  /** How long typing must pause before suggestions are offered, in ms. Defaults to 900. */\n  pauseMs?: number;\n  /** Shortest draft (trimmed) that gets suggestions. Defaults to 12 characters. */\n  minLength?: number;\n  /** Whether the suggestions still fit the draft. When it turns false they withdraw quietly. */\n  isRelevant?: (draft: string, suggestions: SuggestionItem[]) => boolean;\n  /** How a suggestion is added to the draft. Defaults to `appendSuggestion` \u2014 after their words, never replacing them. */\n  join?: (draft: string, text: string) => string;\n  /** Visible heading marking the row as the agent\'s ("Aria suggests"). */\n  label?: React.ReactNode;\n  /** Why these help \u2014 behind an info toggle. */\n  reason?: React.ReactNode;\n  /** Chip accessible-name prefix. Defaults to "Add to prompt". */\n  actionLabel?: string;\n  /** Allow Dismiss. Defaults to true. */\n  dismissible?: boolean;\n  /** Offer Undo after adding. Defaults to true. */\n  undoable?: boolean;\n  /** Maximum chips. Defaults to 3. */\n  max?: number;\n  /** Called after a suggestion was added, with the new draft. */\n  onAccept?: (item: SuggestionItem, draft: string) => void;\n  /** Called when the suggestions are dismissed. */\n  onDismiss?: () => void;\n  /** Called after Undo restored the draft. */\n  onUndo?: () => void;\n  /** Composer placeholder \u2014 also the field\'s accessible name. */\n  placeholder?: string;\n  /** Extra composer controls (attach, voice, model\u2026). */\n  composerActions?: React.ReactNode;\n  /** Show the agent as busy (send becomes stop). */\n  loading?: boolean;\n  /** Called by the stop button while `loading`. */\n  onStop?: () => void;\n  /** Copy overrides for the row. */\n  messages?: Partial<SuggestionsMessages>;\n}',
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "onSelect" | "defaultValue" | "onChange">'
+          ],
+          members: [
+            {
+              name: "value",
+              type: "string",
+              required: false,
+              description: "Controlled draft. Omit (and use `defaultValue`) for an uncontrolled composer."
+            },
+            {
+              name: "defaultValue",
+              type: "string",
+              required: false,
+              description: "Initial draft when uncontrolled."
+            },
+            {
+              name: "onValueChange",
+              type: "(value: string) => void",
+              required: false,
+              description: "Called whenever the draft changes \u2014 typing, adding a suggestion, Undo."
+            },
+            {
+              name: "onSubmit",
+              type: "(value: string) => void | Promise<unknown>",
+              required: true,
+              description: "Called with the trimmed draft when the person sends. Suggestions never send on their own."
+            },
+            {
+              name: "suggestions",
+              type: "SuggestionItem[]",
+              required: false,
+              description: "Suggestions the app already has for this request (data, no model call)."
+            },
+            {
+              name: "loadSuggestions",
+              type: "(draft: string, options: { signal: AbortSignal }) => Promise<SuggestionItem[]>",
+              required: false,
+              description: "Fetch suggestions for the draft after a pause in typing. Abort on `signal`. While pending the row shows a loading line; a rejection shows Retry."
+            },
+            {
+              name: "pauseMs",
+              type: "number",
+              required: false,
+              description: "How long typing must pause before suggestions are offered, in ms. Defaults to 900."
+            },
+            {
+              name: "minLength",
+              type: "number",
+              required: false,
+              description: "Shortest draft (trimmed) that gets suggestions. Defaults to 12 characters."
+            },
+            {
+              name: "isRelevant",
+              type: "(draft: string, suggestions: SuggestionItem[]) => boolean",
+              required: false,
+              description: "Whether the suggestions still fit the draft. When it turns false they withdraw quietly."
+            },
+            {
+              name: "join",
+              type: "(draft: string, text: string) => string",
+              required: false,
+              description: "How a suggestion is added to the draft. Defaults to `appendSuggestion` \u2014 after their words, never replacing them."
+            },
+            {
+              name: "label",
+              type: "React.ReactNode",
+              required: false,
+              description: `Visible heading marking the row as the agent's ("Aria suggests").`
+            },
+            {
+              name: "reason",
+              type: "React.ReactNode",
+              required: false,
+              description: "Why these help \u2014 behind an info toggle."
+            },
+            {
+              name: "actionLabel",
+              type: "string",
+              required: false,
+              description: 'Chip accessible-name prefix. Defaults to "Add to prompt".'
+            },
+            {
+              name: "dismissible",
+              type: "boolean",
+              required: false,
+              description: "Allow Dismiss. Defaults to true."
+            },
+            {
+              name: "undoable",
+              type: "boolean",
+              required: false,
+              description: "Offer Undo after adding. Defaults to true."
+            },
+            {
+              name: "max",
+              type: "number",
+              required: false,
+              description: "Maximum chips. Defaults to 3."
+            },
+            {
+              name: "onAccept",
+              type: "(item: SuggestionItem, draft: string) => void",
+              required: false,
+              description: "Called after a suggestion was added, with the new draft."
+            },
+            {
+              name: "onDismiss",
+              type: "() => void",
+              required: false,
+              description: "Called when the suggestions are dismissed."
+            },
+            {
+              name: "onUndo",
+              type: "() => void",
+              required: false,
+              description: "Called after Undo restored the draft."
+            },
+            {
+              name: "placeholder",
+              type: "string",
               required: false,
-              description: 'A short lead shown before the set ("Try asking:"); also names the list.'
+              description: "Composer placeholder \u2014 also the field's accessible name."
             },
             {
-              name: "max",
-              type: "number",
+              name: "composerActions",
+              type: "React.ReactNode",
               required: false,
-              description: "The most items shown. Defaults to 5 (the spec's 3\u20135 cap).",
-              default: "5"
+              description: "Extra composer controls (attach, voice, model\u2026)."
             },
             {
-              name: "afterSelect",
-              type: "SuggestedPromptsAfterSelect",
+              name: "loading",
+              type: "boolean",
               required: false,
-              description: 'After a choice: "keep" (default) leaves the set as is, "mark" keeps the others in view with the chosen one marked, "remove" removes the chosen one.',
-              values: [
-                "keep",
-                "mark",
-                "remove"
-              ],
-              default: '"keep"'
+              description: "Show the agent as busy (send becomes stop)."
             },
             {
-              name: "selectedId",
-              type: "string | null",
+              name: "onStop",
+              type: "() => void",
               required: false,
-              description: 'Controlled chosen item (its id) for `afterSelect="mark"`.'
+              description: "Called by the stop button while `loading`."
             },
             {
-              name: "onDismiss",
-              type: "() => void",
+              name: "messages",
+              type: "Partial<SuggestionsMessages>",
               required: false,
-              description: "Shows a dismiss button (contextual tooltip) and is called when it is pressed or Escape is hit."
+              description: "Copy overrides for the row."
             }
           ]
         }
       ],
-      readme: '# @nucleux/suggested-prompts\n\nSuggested Prompts \u2014 smart, context-aware preset actions to jumpstart engagement \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\nA few ready-made prompts that answer "what do I type?" without blocking the\ncomposer. Choosing one hands its prompt to `onSelect` \u2014 place it in the\ncomposer as editable text; never send it.\n\n## Exports\n\n- **`SuggestedPrompts`** \u2014 the set (`items` + `onSelect`, or compose children)\n- **`SuggestedPrompt`** \u2014 one suggestion (a button; `icon`, `description`, `selected`)\n- Types: `SuggestedPromptsProps`, `SuggestedPromptProps`, `SuggestedPromptItem`, `SuggestedPromptsVariant`, `SuggestedPromptsAfterSelect`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `chip-row` (default) | Pills above the composer in an empty thread. |\n| `card-list` | Stacked cards with a supporting line, in an assistant panel. |\n| `contextual-tooltip` | A dark bubble by the selection or cursor with one action; `onDismiss` adds \xD7 and Escape. |\n\n## Behaviour\n\n- `items` are strings or `{ id?, title, prompt?, description?, icon? }`; `onSelect(prompt, item)` gets the fuller `prompt` when there is one.\n- Capped at `max` (5).\n- `afterSelect`: `"keep"` (default), `"mark"` (others stay, the chosen one gets `aria-pressed`; control it with `selectedId`) or `"remove"` (remove once tapped).\n- With `items` the set is a list named by `label` ("Try asking:"), or "Suggested prompts".\n- Hide the set once the person types (the `hidden` attribute, or don\'t render it). `InitialCta` does this for you.\n\n## Usage\n\n```tsx\nimport { SuggestedPrompts } from "@nucleux/suggested-prompts";\n\n<SuggestedPrompts\n  label="Try asking:"\n  items={[\n    { title: "Find unresolved decisions", prompt: "Find the unresolved decisions blocking the September release." },\n    "Draft a follow-up to Acme Corp",\n    "Which accounts need attention?",\n  ]}\n  onSelect={(prompt) => { setDraft(prompt); composerRef.current?.focus(); }}\n/>\n```\n\n## Install\n\n```bash\npnpm add @nucleux/suggested-prompts @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\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',
+      readme: '# @nucleux/suggestions\n\nSuggestions \u2014 quick-action chips above the composer, under an answer or on a selection that add to the request, never send it \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\nContext-aware chips that turn the likely next step into a tap. At most three,\nlabelled with verbs. They can be marked as the agent\'s ("Aria suggests"),\nexplain themselves behind an info toggle and be dismissed. Choosing one never\nsends: it is appended after the person\'s own words, stays editable, and is\nconfirmed in one line with Undo.\n\n## Exports\n\n- **`Suggestions`** \u2014 the chip row and its status lines\n- **`SuggestionsComposer`** \u2014 the row wired to `OpenInput`: pause before offering, append with Undo, dismiss, withdraw when no longer relevant, optional async loading\n- Helpers shared with the Material 3 twin: `appendSuggestion`, `handleSuggestionsKeyDown`, `useSuggestions`, `useSuggestionsComposer`, `suggestionsMessages`, `suggestionKey`\n- Types: `SuggestionsProps`, `SuggestionsComposerProps`, `SuggestionItem`, `SuggestionsVariant`, `SuggestionsStatus`, `SuggestionsMessages`\n\n## Variants\n\n| `variant` | Use |\n| --- | --- |\n| `compose` (default) | Chips just above the composer: starters or quick edits. |\n| `follow-up` | Under an answer: what to ask next (marked \u21B3). |\n| `selection` | A floating toolbar of actions on highlighted content (`role="toolbar"`). |\n\n## States (`status`)\n\n`available` (chips) \xB7 `loading` \xB7 `error` (Retry via `onRetry`) \xB7 `accepted` (Undo via `onUndo`) \xB7 `dismissed` \xB7 `irrelevant` \xB7 `idle` (renders nothing).\n\n## Behaviour\n\n- `label` gives the row a visible heading and names the group; without it, pass `aria-label`.\n- `reason` sits behind an info button (`aria-expanded`). `onDismiss` adds a close button; Escape dismisses too.\n- `actionLabel` prefixes each chip\'s accessible name ("Add to prompt: Include unresolved blockers").\n- Arrow keys move between chips, Home/End jump to the ends; every chip is also a Tab stop.\n- `pendingId` marks a chip whose action is running (spinner, `aria-busy`).\n- No model calls: suggestions are data (`suggestions`) or an async `loadSuggestions(draft, { signal })` the app supplies.\n\n## Usage\n\n```tsx\nimport { SuggestionsComposer } from "@nucleux/suggestions";\n\n<SuggestionsComposer\n  label="Aria suggests"\n  reason="Release summaries are read to decide what still needs attention."\n  suggestions={[\n    { label: "Include unresolved blockers" },\n    { label: "Group the work by owner" },\n    { label: "Compare with the August release" },\n  ]}\n  isRelevant={(draft) => /release/i.test(draft)}\n  onSubmit={send}\n/>\n```\n\n```tsx\nimport { Suggestions } from "@nucleux/suggestions";\n\n<Suggestions variant="follow-up" aria-label="Suggested follow-ups"\n  suggestions={[{ label: "Why Acme?" }, { label: "Draft outreach" }]} onSelect={(s) => ask(s.label)} />\n```\n\n## Install\n\n```bash\npnpm add @nucleux/suggestions @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\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"
       },
       twin: {
-        name: "md3-suggested-prompts",
-        package: "@nucleux/md3-suggested-prompts",
-        component: "Md3SuggestedPrompts",
+        name: "md3-suggestions",
+        package: "@nucleux/md3-suggestions",
+        component: "Md3Suggestions",
         sharesApi: true
       }
     },
@@ -16765,6 +18608,259 @@ Source: Figma "Context Expansion / Connector suggestion card".`,
         component: "Md3VoiceInput",
         sharesApi: true
       }
+    },
+    {
+      name: "voice-tone",
+      package: "@nucleux/voice-tone",
+      kind: "component",
+      description: "The id a described (custom) tone takes as the value.",
+      summary: "Voice & Tone \u2014 say how the reply should sound (named presets, a rules list, a sample line), sent beside the prompt and never editing it \u2014 Nucleux agentic UI for React.",
+      keywords: [
+        "nucleux",
+        "react",
+        "ui",
+        "components",
+        "agentic",
+        "ai",
+        "tailwind",
+        "voice-tone",
+        "tone",
+        "prompt-scaffold"
+      ],
+      exports: [
+        "VOICE_TONE_CUSTOM",
+        "defaultVoiceTones",
+        "defaultVoiceToneRules",
+        "useVoiceTone",
+        "VoiceTone",
+        "VoiceToneOption",
+        "VoiceToneRule",
+        "VoiceToneSetting",
+        "VoiceToneVariant",
+        "VoiceToneLayout",
+        "VoiceToneNotice",
+        "VoiceToneProps",
+        "VoiceToneState"
+      ],
+      components: [
+        "VoiceTone",
+        "VOICE_TONE_CUSTOM"
+      ],
+      import: 'import { VoiceTone, VOICE_TONE_CUSTOM } from "@nucleux/voice-tone";',
+      installSingle: "pnpm add @nucleux/voice-tone @nucleux/tokens",
+      props: [
+        {
+          name: "VoiceToneProps",
+          source: 'export interface VoiceToneProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit" | "defaultValue"> {\n  /** Where the scaffold sits. Defaults to `"settings"`. */\n  variant?: VoiceToneVariant;\n  /** How tones are chosen. Defaults to `"cards"`. */\n  layout?: VoiceToneLayout;\n  /** The tones on offer \u2014 three or four familiar ones. Defaults to {@link defaultVoiceTones}. Pass `[]` for a rules-only panel. */\n  tones?: VoiceToneOption[];\n  /** Chosen tone id (controlled). `null` is the agent\'s default voice; `"custom"` a described tone. */\n  value?: string | null;\n  /** Initial tone id (uncontrolled). Defaults to `null`. */\n  defaultValue?: string | null;\n  /** Called when the tone is chosen, switched, removed or restored. */\n  onValueChange?: (value: string | null) => void;\n  /** Offer \u201COr describe a tone\u201D. Defaults to `true` in the composer and chip, `false` in settings. */\n  allowCustom?: boolean;\n  /** The described tone (controlled). */\n  customTone?: string;\n  /** Initial described tone (uncontrolled). */\n  defaultCustomTone?: string;\n  /** Called when a described tone is applied. */\n  onCustomToneChange?: (text: string) => void;\n  /** The rules list (settings panel). The composer variants send the rules that are on with each request. */\n  rules?: VoiceToneRule[];\n  /** Ids of the rules that are on (controlled). */\n  ruleValues?: string[];\n  /** Ids of the rules that are on initially (uncontrolled). */\n  defaultRuleValues?: string[];\n  /** Called with the ids of the rules that are on. */\n  onRulesChange?: (ids: string[]) => void;\n  /** Show the sample sentence for the tone in focus or chosen. Defaults to `true`. */\n  showSample?: boolean;\n  /** Let people remove the tone from the composer (with Undo). Defaults to `true`. */\n  removable?: boolean;\n  /** Picker open (controlled), for the composer and chip variants. */\n  open?: boolean;\n  /** Picker open initially (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Called when the picker opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Seed the quiet line, e.g. to show a state in docs. A seeded `"removed"` line\'s Undo restores the\n   * recommended (or first) tone.\n   */\n  defaultNotice?: VoiceToneNotice | null;\n  /** Name of the setting \u2014 the chip, picker and group label. Defaults to `"Tone"`. */\n  label?: string;\n  /** Who writes, for the notices. Defaults to `"Aria"`. */\n  agentName?: string;\n  /** Composer text (controlled). The tone never edits it. */\n  draft?: string;\n  /** Initial composer text (uncontrolled). Cleared after a send. */\n  defaultDraft?: string;\n  /** Called when the composer text changes. */\n  onDraftChange?: (text: string) => void;\n  /** Called on send with the trimmed text and the tone setting, sent beside the prompt. */\n  onSubmit?: (text: string, setting: VoiceToneSetting) => void;\n  /** Composer placeholder, also its accessible name. Defaults to `"Describe what to write\u2026"`. */\n  placeholder?: string;\n  /** Show the agent as busy \u2014 the send button becomes a stop button. */\n  loading?: boolean;\n  /** Called by the stop button while `loading`. */\n  onStop?: () => void;\n  /** More composer tools, placed after the Tone chip. */\n  actions?: React.ReactNode;\n}',
+          extends: [
+            'Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit" | "defaultValue">'
+          ],
+          members: [
+            {
+              name: "variant",
+              type: "VoiceToneVariant",
+              required: false,
+              description: 'Where the scaffold sits. Defaults to `"settings"`.',
+              values: [
+                "settings",
+                "composer",
+                "chip"
+              ]
+            },
+            {
+              name: "layout",
+              type: "VoiceToneLayout",
+              required: false,
+              description: 'How tones are chosen. Defaults to `"cards"`.',
+              values: [
+                "cards",
+                "list",
+                "segmented",
+                "slider"
+              ]
+            },
+            {
+              name: "tones",
+              type: "VoiceToneOption[]",
+              required: false,
+              description: "The tones on offer \u2014 three or four familiar ones. Defaults to {@link defaultVoiceTones}. Pass `[]` for a rules-only panel."
+            },
+            {
+              name: "value",
+              type: "string | null",
+              required: false,
+              description: 'Chosen tone id (controlled). `null` is the agent\'s default voice; `"custom"` a described tone.'
+            },
+            {
+              name: "defaultValue",
+              type: "string | null",
+              required: false,
+              description: "Initial tone id (uncontrolled). Defaults to `null`."
+            },
+            {
+              name: "onValueChange",
+              type: "(value: string | null) => void",
+              required: false,
+              description: "Called when the tone is chosen, switched, removed or restored."
+            },
+            {
+              name: "allowCustom",
+              type: "boolean",
+              required: false,
+              description: "Offer \u201COr describe a tone\u201D. Defaults to `true` in the composer and chip, `false` in settings."
+            },
+            {
+              name: "customTone",
+              type: "string",
+              required: false,
+              description: "The described tone (controlled)."
+            },
+            {
+              name: "defaultCustomTone",
+              type: "string",
+              required: false,
+              description: "Initial described tone (uncontrolled)."
+            },
+            {
+              name: "onCustomToneChange",
+              type: "(text: string) => void",
+              required: false,
+              description: "Called when a described tone is applied."
+            },
+            {
+              name: "rules",
+              type: "VoiceToneRule[]",
+              required: false,
+              description: "The rules list (settings panel). The composer variants send the rules that are on with each request."
+            },
+            {
+              name: "ruleValues",
+              type: "string[]",
+              required: false,
+              description: "Ids of the rules that are on (controlled)."
+            },
+            {
+              name: "defaultRuleValues",
+              type: "string[]",
+              required: false,
+              description: "Ids of the rules that are on initially (uncontrolled)."
+            },
+            {
+              name: "onRulesChange",
+              type: "(ids: string[]) => void",
+              required: false,
+              description: "Called with the ids of the rules that are on."
+            },
+            {
+              name: "showSample",
+              type: "boolean",
+              required: false,
+              description: "Show the sample sentence for the tone in focus or chosen. Defaults to `true`."
+            },
+            {
+              name: "removable",
+              type: "boolean",
+              required: false,
+              description: "Let people remove the tone from the composer (with Undo). Defaults to `true`."
+            },
+            {
+              name: "open",
+              type: "boolean",
+              required: false,
+              description: "Picker open (controlled), for the composer and chip variants."
+            },
+            {
+              name: "defaultOpen",
+              type: "boolean",
+              required: false,
+              description: "Picker open initially (uncontrolled)."
+            },
+            {
+              name: "onOpenChange",
+              type: "(open: boolean) => void",
+              required: false,
+              description: "Called when the picker opens or closes."
+            },
+            {
+              name: "defaultNotice",
+              type: "VoiceToneNotice | null",
+              required: false,
+              description: 'Seed the quiet line, e.g. to show a state in docs. A seeded `"removed"` line\'s Undo restores the recommended (or first) tone.'
+            },
+            {
+              name: "label",
+              type: "string",
+              required: false,
+              description: 'Name of the setting \u2014 the chip, picker and group label. Defaults to `"Tone"`.'
+            },
+            {
+              name: "agentName",
+              type: "string",
+              required: false,
+              description: 'Who writes, for the notices. Defaults to `"Aria"`.'
+            },
+            {
+              name: "draft",
+              type: "string",
+              required: false,
+              description: "Composer text (controlled). The tone never edits it."
+            },
+            {
+              name: "defaultDraft",
+              type: "string",
+              required: false,
+              description: "Initial composer text (uncontrolled). Cleared after a send."
+            },
+            {
+              name: "onDraftChange",
+              type: "(text: string) => void",
+              required: false,
+              description: "Called when the composer text changes."
+            },
+            {
+              name: "onSubmit",
+              type: "(text: string, setting: VoiceToneSetting) => void",
+              required: false,
+              description: "Called on send with the trimmed text and the tone setting, sent beside the prompt."
+            },
+            {
+              name: "placeholder",
+              type: "string",
+              required: false,
+              description: 'Composer placeholder, also its accessible name. Defaults to `"Describe what to write\u2026"`.'
+            },
+            {
+              name: "loading",
+              type: "boolean",
+              required: false,
+              description: "Show the agent as busy \u2014 the send button becomes a stop button."
+            },
+            {
+              name: "onStop",
+              type: "() => void",
+              required: false,
+              description: "Called by the stop button while `loading`."
+            },
+            {
+              name: "actions",
+              type: "React.ReactNode",
+              required: false,
+              description: "More composer tools, placed after the Tone chip."
+            }
+          ]
+        }
+      ],
+      readme: '# @nucleux/voice-tone\n\nVoice & Tone \u2014 say how the reply should sound (named presets, a rules list, a sample line), sent beside the prompt and never editing it \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\nA Material 3 twin with the same API ships as [`@nucleux/md3-voice-tone`](https://www.npmjs.com/package/@nucleux/md3-voice-tone).\n\n## Exports\n\n- **`VoiceTone`** \u2014 `variant="settings"` (default): a preferences panel with tone presets, a rules list and a sample sentence. `variant="composer"`: a composer with a Tone chip that opens the tone picker (cards, list, segmented or slider; sample line; recommendation marked, never applied; \u201COr describe a tone\u201D), then names the choice and can be changed or removed with Undo. `variant="chip"`: the chip and picker alone, for your own composer.\n- **`useVoiceTone`** \u2014 the shared state and keyboard model (used by the Material 3 twin).\n- **`defaultVoiceTones`**, **`defaultVoiceToneRules`**, **`VOICE_TONE_CUSTOM`**\n- Types: `VoiceToneProps`, `VoiceToneOption`, `VoiceToneRule`, `VoiceToneSetting`, `VoiceToneVariant`, `VoiceToneLayout`, `VoiceToneNotice`, `VoiceToneState`\n\n## Install\n\n```bash\npnpm add @nucleux/voice-tone @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { VoiceTone, defaultVoiceToneRules } from "@nucleux/voice-tone";\n\n// Preferences: set once, applied to every reply.\n<VoiceTone defaultValue="professional" rules={defaultVoiceToneRules} onValueChange={saveTone} onRulesChange={saveRules} />\n\n// In the composer: the tone travels with the request as a setting \u2014 the prompt is never edited.\n<VoiceTone variant="composer" onSubmit={(text, setting) => send(text, { tone: setting })} />\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"
+      },
+      twin: {
+        name: "md3-voice-tone",
+        package: "@nucleux/md3-voice-tone",
+        component: "Md3VoiceTone",
+        sharesApi: true
+      }
     }
   ],
   examples: [
@@ -16930,9 +19026,9 @@ export const Default: Story = {
 
 // src/knowledge.json
 var knowledge_default = {
-  version: "0.6.0",
+  version: "0.7.0",
   generatedFrom: "knowledge/ (do not edit \u2014 run scripts/gen-mcp-knowledge.mjs)",
-  workflow: "# Building UI with Nucleux\n\nNucleux (`@nucleux/react`) is a React + Tailwind design system in two families:\nshadcn-style (`Button`, `Disclosure`, \u2026) and Material 3 (`Md3Button`,\n`Md3Disclosure`, \u2026). The `nucleux` MCP server holds its curated page patterns and\nexact component contracts. Work design-first: find the pattern, read the\ncontracts, then write code.\n\n## Rules\n\n1. Inspect the project before changing files. Keep its framework, router,\n   state management, business logic and file layout.\n2. Look for a Nucleux pattern (`search_patterns`) before laying out any page.\n   Prefer a whole pattern over assembling unrelated components.\n3. Read the contract (`get_component`) before using a component. Use only the\n   imports, props and variant values it lists. Never guess a Nucleux export,\n   prop or variant. If it is not in the catalog, it does not exist.\n4. Pick one family per app and do not mix them: Material 3 (`Md3*`) when the\n   project already uses Material Design or the user asks for it, otherwise\n   shadcn. Patterns are written with shadcn components; in a Material 3 app use\n   each one's `Md3` twin, and where Material 3 has none (e.g. `DataTable`), the\n   shadcn component under the `md3-theme` class. Agentic components have the\n   same props in both families.\n5. For AI features use the agentic components (nucleux.in's patterns):\n   `Disclosure` and `Caveat` for AI output, `Consent` before acting,\n   `OpenInput`/`InitialCta`/`SuggestedPrompts` for asking, `Attachments`,\n   `VoiceInput` and friends for input, `ModelSelection`, `KnowledgeBase`,\n   `Connector` and `McpConnection` for context. Search for them with\n   `search_components` instead of building your own.\n6. Do not rebuild something Nucleux already ships (navigation, tables, cards,\n   dialogs, sheets, form controls, empty/error states). If you must, say why\n   in your summary.\n7. Style with the semantic token classes (`bg-background`, `text-foreground`,\n   `text-muted-foreground`, `border-border`, `bg-primary`, `text-destructive`\u2026;\n   in a Material 3 app the `md-*` roles: `bg-md-surface`, `text-md-on-surface`,\n   `bg-md-primary-container`\u2026).\n   No hex colors, no arbitrary color values. Use the same variant for the same\n   meaning everywhere (one `cta` primary action per page, `destructive` only\n   for destructive actions).\n8. Every page must work from 360px wide: follow each pattern's responsive rules.\n9. Accessibility is part of done: labels for every control, `aria-label` on\n   icon-only buttons, visible focus, status not conveyed by color alone.\n10. Every data view handles loading, empty and error (the `page-states` pattern).\n11. When Nucleux has no pattern or component for a need, build it from Nucleux\n   primitives (or the ShadCN equivalent the tools name), keep it on Nucleux\n   tokens, and report the gap. Never present an invented component as Nucleux.\n12. Nucleux is not mandatory. If the project already uses another component\n    system and the user did not ask to switch, extend that system and say so.\n\n## Workflow\n\n**A. Inspect the project.** Find the framework (Vite, Next.js, Remix\u2026), package\nmanager (lockfile), TypeScript, Tailwind version and config, router, existing\ncomponent system, and any installed `@nucleux/*` packages. If Nucleux is not set\nup, call `get_setup` and follow it exactly.\n\n**B. Analyse the request.** List the pages, the main user journeys, the key\ninteractions on each page, and what matters most on each screen. Ask only about\nambiguities that change the architecture; pick sensible defaults otherwise.\n\n**C. Discover.** For each page call `search_patterns` with what the page is for,\nthen `get_pattern` for the best match (`app-shell` for the frame, plus one\npattern per page). Call `get_component` for every component you will use that\nyou have not read in this session. Use `search_components` for needs inside a\npage that no pattern covers.\n\n**D. Plan.** Write a short plan: shared layout, then each route \u2192\npattern(s) \u2192 components \u2192 app-specific pieces you will write \u2192 states. Mark\nanything Nucleux does not cover. Check the plan with `validate_design` (pattern\nids plus the components and props you intend to use) and fix every error.\n\n**E. Implement.** Build the shared shell once and wrap every route in it.\nStart each page from its pattern's example, replace the sample data with the\napp's data model, and keep app-specific components (a TaskCard bound to your\ndata) in the app, composed from Nucleux parts.\n\n**F. Validate.** Run the project's type check, lint, tests and production build;\nfix every error. Re-check each page against its pattern's responsive and\naccessibility rules.\n\n**G. Report.** Summarise the pages built, the patterns and components used per\npage, design decisions, the checks you ran and their results, anything you built\ncustom and why, and the gaps or open issues.",
+  workflow: "# Building UI with Nucleux\n\nNucleux (`@nucleux/react`) is a React + Tailwind design system in two families:\nshadcn-style (`Button`, `Disclosure`, \u2026) and Material 3 (`Md3Button`,\n`Md3Disclosure`, \u2026). The `nucleux` MCP server holds its curated page patterns and\nexact component contracts. Work design-first: find the pattern, read the\ncontracts, then write code.\n\n## Rules\n\n1. Inspect the project before changing files. Keep its framework, router,\n   state management, business logic and file layout.\n2. Look for a Nucleux pattern (`search_patterns`) before laying out any page.\n   Prefer a whole pattern over assembling unrelated components.\n3. Read the contract (`get_component`) before using a component. Use only the\n   imports, props and variant values it lists. Never guess a Nucleux export,\n   prop or variant. If it is not in the catalog, it does not exist.\n4. Pick one family per app and do not mix them: Material 3 (`Md3*`) when the\n   project already uses Material Design or the user asks for it, otherwise\n   shadcn. Patterns are written with shadcn components; in a Material 3 app use\n   each one's `Md3` twin, and where Material 3 has none (e.g. `DataTable`), the\n   shadcn component under the `md3-theme` class. Agentic components have the\n   same props in both families.\n5. For AI features use the agentic components (nucleux.in's patterns):\n   `Disclosure` and `Caveat` for AI output, `Consent` before acting,\n   `OpenInput`/`InitialCta`/`SuggestedPrompts` for asking, the Prompt Scaffolds\n   (`Suggestions`, `Madlibs`, `PromptEnhancer`, `Modes`, `VoiceTone`,\n   `PresetStyles`) for shaping a request beside the composer, `Attachments`,\n   `VoiceInput` and friends for input, `ModelSelection`, `KnowledgeBase`,\n   `Connector` and `McpConnection` for context. Search for them with\n   `search_components` instead of building your own.\n6. Do not rebuild something Nucleux already ships (navigation, tables, cards,\n   dialogs, sheets, form controls, empty/error states). If you must, say why\n   in your summary.\n7. Style with the semantic token classes (`bg-background`, `text-foreground`,\n   `text-muted-foreground`, `border-border`, `bg-primary`, `text-destructive`\u2026;\n   in a Material 3 app the `md-*` roles: `bg-md-surface`, `text-md-on-surface`,\n   `bg-md-primary-container`\u2026).\n   No hex colors, no arbitrary color values. Use the same variant for the same\n   meaning everywhere (one `cta` primary action per page, `destructive` only\n   for destructive actions).\n8. Every page must work from 360px wide: follow each pattern's responsive rules.\n9. Accessibility is part of done: labels for every control, `aria-label` on\n   icon-only buttons, visible focus, status not conveyed by color alone.\n10. Every data view handles loading, empty and error (the `page-states` pattern).\n11. When Nucleux has no pattern or component for a need, build it from Nucleux\n   primitives (or the ShadCN equivalent the tools name), keep it on Nucleux\n   tokens, and report the gap. Never present an invented component as Nucleux.\n12. Nucleux is not mandatory. If the project already uses another component\n    system and the user did not ask to switch, extend that system and say so.\n\n## Workflow\n\n**A. Inspect the project.** Find the framework (Vite, Next.js, Remix\u2026), package\nmanager (lockfile), TypeScript, Tailwind version and config, router, existing\ncomponent system, and any installed `@nucleux/*` packages. If Nucleux is not set\nup, call `get_setup` and follow it exactly.\n\n**B. Analyse the request.** List the pages, the main user journeys, the key\ninteractions on each page, and what matters most on each screen. Ask only about\nambiguities that change the architecture; pick sensible defaults otherwise.\n\n**C. Discover.** For each page call `search_patterns` with what the page is for,\nthen `get_pattern` for the best match (`app-shell` for the frame, plus one\npattern per page). Call `get_component` for every component you will use that\nyou have not read in this session. Use `search_components` for needs inside a\npage that no pattern covers.\n\n**D. Plan.** Write a short plan: shared layout, then each route \u2192\npattern(s) \u2192 components \u2192 app-specific pieces you will write \u2192 states. Mark\nanything Nucleux does not cover. Check the plan with `validate_design` (pattern\nids plus the components and props you intend to use) and fix every error.\n\n**E. Implement.** Build the shared shell once and wrap every route in it.\nStart each page from its pattern's example, replace the sample data with the\napp's data model, and keep app-specific components (a TaskCard bound to your\ndata) in the app, composed from Nucleux parts.\n\n**F. Validate.** Run the project's type check, lint, tests and production build;\nfix every error. Re-check each page against its pattern's responsive and\naccessibility rules.\n\n**G. Report.** Summarise the pages built, the patterns and components used per\npage, design decisions, the checks you ran and their results, anything you built\ncustom and why, and the gaps or open issues.",
   patterns: [
     {
       id: "analytics-charts",
@@ -19509,7 +21605,7 @@ var FALLBACK_HINT = `_Need something Nucleux does not ship? Start from the ShadC
 // 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: 167,
+  count: 179,
   snippets: {
     avatar: {
       name: "Avatar",
@@ -21016,6 +23112,213 @@ var html_snippets_default = {
         "Cancel",
         "Confirm"
       ]
+    },
+    suggestions: {
+      name: "Suggestions",
+      html: '<div role="group" aria-labelledby="__NX_ID_0__-label" class="flex flex-col gap-2 motion-safe:animate-nx-fade-in"><div class="flex min-h-8 items-center gap-2"><span id="__NX_ID_0__-label" class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" focusable="false" data-ai-glyph="generated" class="shrink-0 size-4 text-brand" aria-hidden="true"><path d="M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"></path><path d="M12 6.5c.3 2.2 1.3 3.2 3.5 3.5-2.2.3-3.2 1.3-3.5 3.5-.3-2.2-1.3-3.2-3.5-3.5 2.2-.3 3.2-1.3 3.5-3.5z" fill="currentColor" stroke="none"></path></svg>Aria suggests</span><span class="ml-auto inline-flex items-center gap-0.5"><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 hover:bg-accent size-8 rounded-lg text-muted-foreground" aria-label="Why these suggestions" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="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 size-4" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></button><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 hover:bg-accent size-8 rounded-lg text-muted-foreground" aria-label="Dismiss suggestions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x size-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></span></div><div class="flex flex-wrap gap-1.5"><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap tracking-[0.005em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 h-auto min-h-8 rounded-sm px-3 py-1.5 text-sm font-normal shadow-none transition-colors motion-reduce:transition-none border border-border bg-background text-foreground hover:border-foreground hover:bg-background" data-suggestion="" aria-label="Add to prompt: Include unresolved blockers">Include unresolved blockers</button><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap tracking-[0.005em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 h-auto min-h-8 rounded-sm px-3 py-1.5 text-sm font-normal shadow-none transition-colors motion-reduce:transition-none border border-border bg-background text-foreground hover:border-foreground hover:bg-background" data-suggestion="" aria-label="Add to prompt: Group the work by owner">Group the work by owner</button><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap tracking-[0.005em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 h-auto min-h-8 rounded-sm px-3 py-1.5 text-sm font-normal shadow-none transition-colors motion-reduce:transition-none border border-border bg-background text-foreground hover:border-foreground hover:bg-background" data-suggestion="" aria-label="Add to prompt: Compare with the August release">Compare with the August release</button></div></div>',
+      idCount: 1,
+      text: [
+        "Aria suggests",
+        "Include unresolved blockers",
+        "Group the work by owner",
+        "Compare with the August release"
+      ]
+    },
+    md3suggestions: {
+      name: "Md3Suggestions",
+      html: `<div role="group" aria-labelledby="__NX_ID_0__-label" class="flex flex-col gap-2 motion-safe:animate-nx-fade-in"><div class="flex min-h-8 items-center gap-2 px-0.5"><span id="__NX_ID_0__-label" class="inline-flex items-center gap-1.5 text-sm font-medium text-md-on-surface-variant"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" focusable="false" data-ai-glyph="generated" class="shrink-0 size-[18px]" aria-hidden="true"><path d="M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"></path><path d="M12 6.5c.3 2.2 1.3 3.2 3.5 3.5-2.2.3-3.2 1.3-3.5 3.5-.3-2.2-1.3-3.2-3.5-3.5 2.2-.3 3.2-1.3 3.5-3.5z" fill="currentColor" stroke="none"></path></svg>Aria suggests</span><span class="ml-auto inline-flex items-center gap-0.5"><button type="button" class="relative inline-flex items-center justify-center overflow-hidden rounded-full transition-colors 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 size-8 [&_svg]:size-5" aria-label="Why these suggestions" aria-expanded="false"><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-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></button><button type="button" class="relative inline-flex items-center justify-center overflow-hidden rounded-full transition-colors 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 size-8 [&_svg]:size-5" aria-label="Dismiss suggestions"><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-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button></span></div><div class="flex flex-wrap gap-2"><button type="button" class="relative inline-flex items-center gap-1.5 overflow-hidden rounded-md-sm px-3 transition-colors [&_svg]:size-[18px] border 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] h-auto min-h-8 rounded-md-sm py-1 pl-2 pr-3.5 text-sm font-normal motion-reduce:before:transition-none border-md-outline-variant bg-md-surface text-md-on-surface-variant" data-suggestion="" aria-label="Add to prompt: Include unresolved blockers"><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-plus text-md-primary" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></span><span class="relative">Include unresolved blockers</span></button><button type="button" class="relative inline-flex items-center gap-1.5 overflow-hidden rounded-md-sm px-3 transition-colors [&_svg]:size-[18px] border 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] h-auto min-h-8 rounded-md-sm py-1 pl-2 pr-3.5 text-sm font-normal motion-reduce:before:transition-none border-md-outline-variant bg-md-surface text-md-on-surface-variant" data-suggestion="" aria-label="Add to prompt: Group the work by owner"><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-plus text-md-primary" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></span><span class="relative">Group the work by owner</span></button><button type="button" class="relative inline-flex items-center gap-1.5 overflow-hidden rounded-md-sm px-3 transition-colors [&_svg]:size-[18px] border 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] h-auto min-h-8 rounded-md-sm py-1 pl-2 pr-3.5 text-sm font-normal motion-reduce:before:transition-none border-md-outline-variant bg-md-surface text-md-on-surface-variant" data-suggestion="" aria-label="Add to prompt: Compare with the August release"><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-plus text-md-primary" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></span><span class="relative">Compare with the August release</span></button></div></div>`,
+      idCount: 1,
+      text: [
+        "Aria suggests",
+        "Include unresolved blockers",
+        "Group the work by owner",
+        "Compare with the August release"
+      ]
+    },
+    madlibs: {
+      name: "Madlibs",
+      html: '<div class="border border-border bg-background text-foreground shadow-sm flex w-full max-w-xl flex-col rounded-2xl gap-3.5 p-5" role="group" aria-labelledby="__NX_ID_0__-heading" data-status="partial"><p id="__NX_ID_0__-heading" class="flex items-center gap-1.5 text-[10px] font-semibold uppercase leading-4 tracking-[0.1em] text-muted-foreground">Build your request</p><div class="text-[15px] text-foreground leading-[38px]"><span class="">Summarize </span><span class="relative max-w-full align-middle mx-1 inline-flex"><input id="__NX_ID_0__-blank-document" autoComplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="__NX_ID_0__-blank-document-list" type="text" placeholder="document" aria-label="Document" aria-required="true" style="width:calc(19.0ch + 2.5rem)" class="h-[34px] min-w-0 max-w-full pl-2.5 pr-7 text-[13px] font-medium text-foreground outline-none transition-colors placeholder:font-normal placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none rounded-md border border-warning bg-warning/10" value="Q3 Customer Research"/><span aria-hidden="true" class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 text-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-3.5"><path d="m6 9 6 6 6-6"></path></svg></span><span id="__NX_ID_0__-blank-document-list" role="listbox" aria-label="Document" hidden="" class="absolute left-0 top-full z-20 mt-1 w-max min-w-full max-w-xs rounded-md border border-border bg-background p-1 text-left shadow-md hidden"><span id="__NX_ID_0__-blank-document-list-0" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 text-foreground"><span class="flex-1">Q3 Customer Research</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-check size-3.5" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span id="__NX_ID_0__-blank-document-list-1" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 text-foreground"><span class="flex-1">September release notes</span></span></span></span><span class=""> for </span><span class="relative max-w-full align-middle mx-1 inline-flex"><input id="__NX_ID_0__-blank-audience" autoComplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="__NX_ID_0__-blank-audience-list" type="text" placeholder="audience" aria-label="Audience" aria-required="true" style="width:calc(7.6ch + 2.5rem)" class="h-[34px] min-w-0 max-w-full pl-2.5 pr-7 text-[13px] font-medium text-foreground outline-none transition-colors placeholder:font-normal placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none rounded-md border border-dashed border-muted-foreground/50 bg-background" value=""/><span aria-hidden="true" class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 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-chevron-down size-3.5"><path d="m6 9 6 6 6-6"></path></svg></span><span id="__NX_ID_0__-blank-audience-list" role="listbox" aria-label="Audience" hidden="" class="absolute left-0 top-full z-20 mt-1 w-max min-w-full max-w-xs rounded-md border border-border bg-background p-1 text-left shadow-md hidden"><span id="__NX_ID_0__-blank-audience-list-0" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 text-foreground"><span class="flex-1">Leadership</span></span><span id="__NX_ID_0__-blank-audience-list-1" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 text-foreground"><span class="flex-1">Engineering</span></span></span></span><span class="text-muted-foreground">, focusing on </span><span class="relative max-w-full align-middle mx-1 inline-flex"><input id="__NX_ID_0__-blank-topic" autoComplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="__NX_ID_0__-blank-topic-list" type="text" placeholder="topic" aria-label="Topic (optional)" style="width:calc(4.8ch + 2.5rem)" class="h-[34px] min-w-0 max-w-full pl-2.5 pr-7 text-[13px] font-medium text-foreground outline-none transition-colors placeholder:font-normal placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none rounded-md border border-dashed border-muted-foreground/50 bg-background" value=""/><span aria-hidden="true" class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 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-chevron-down size-3.5"><path d="m6 9 6 6 6-6"></path></svg></span><span id="__NX_ID_0__-blank-topic-list" role="listbox" aria-label="Topic" hidden="" class="absolute left-0 top-full z-20 mt-1 w-max min-w-full max-w-xs rounded-md border border-border bg-background p-1 text-left shadow-md hidden"><span id="__NX_ID_0__-blank-topic-list-0" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 text-foreground"><span class="flex-1">Onboarding issues</span></span><span id="__NX_ID_0__-blank-topic-list-1" role="option" aria-selected="false" class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 text-foreground"><span class="flex-1">Pricing feedback</span></span></span></span><span aria-hidden="true" class="-ml-0.5 mr-1 align-middle text-xs text-muted-foreground">optional</span><span class="">.</span></div><p class="rounded-lg border border-border bg-muted px-3 py-2.5 text-xs leading-[18px] text-muted-foreground"><span class="font-semibold text-foreground">Preview: </span><span data-madlibs-preview="">\u201CSummarize Q3 Customer Research for \u2026.\u201D</span></p><div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2"><span class="text-xs text-muted-foreground">Nothing is sent until you send it.</span><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 border border-border bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-8 rounded-lg ml-auto px-[18px] text-xs font-medium">Use prompt<span class="inline-flex shrink-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right size-3.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></button></div><p role="status" class="sr-only"></p></div>',
+      idCount: 1,
+      text: [
+        "Build your request",
+        "Summarize",
+        "Q3 Customer Research",
+        "September release notes",
+        "for",
+        "Leadership",
+        "Engineering",
+        ", focusing on",
+        "Onboarding issues",
+        "Pricing feedback",
+        "optional",
+        "Preview:",
+        "\u201CSummarize Q3 Customer Research for \u2026.\u201D",
+        "Nothing is sent until you send it.",
+        "Use prompt"
+      ]
+    },
+    md3madlibs: {
+      name: "Md3Madlibs",
+      html: `<div class="relative rounded-md-md border border-md-outline-variant bg-md-surface text-md-on-surface flex w-full max-w-[620px] flex-col overflow-visible rounded-md-lg animate-nx-fade-in motion-reduce:animate-none gap-3.5 px-5 py-[18px]" role="group" aria-labelledby="__NX_ID_0__-heading" data-status="partial"><p id="__NX_ID_0__-heading" class="flex items-center gap-1.5 text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] text-md-on-surface-variant">Build your request</p><div class="text-md-on-surface text-[17px] leading-[44px]"><span class="">Summarize </span><span class="relative max-w-full align-middle leading-5 mx-[3px] inline-flex"><input id="__NX_ID_0__-blank-document" autoComplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="__NX_ID_0__-blank-document-list" type="text" placeholder="document" aria-label="Document" aria-required="true" style="width:calc(22.0ch + 3rem)" class="h-9 min-w-0 max-w-full pl-3 pr-[30px] text-[15px] font-medium outline-none transition-colors motion-reduce:transition-none placeholder:font-normal placeholder:text-md-on-surface-variant rounded-md-md border border-transparent bg-md-secondary-container text-md-on-secondary-container focus:border-2 focus:border-solid focus:border-md-primary focus:pl-[11px] focus:pr-[29px]" value="Q3 Customer Research"/><span aria-hidden="true" class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 [&_svg]:size-[18px] 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-chevron-down"><path d="m6 9 6 6 6-6"></path></svg></span><span id="__NX_ID_0__-blank-document-list" role="listbox" aria-label="Document" hidden="" class="absolute left-0 top-full z-20 mt-1 w-max min-w-full max-w-xs rounded-md-xs bg-md-surface-container py-2 text-left shadow-md-2 hidden"><span id="__NX_ID_0__-blank-document-list-0" role="option" aria-selected="false" class="relative flex h-12 cursor-pointer items-center gap-3 px-3 text-sm font-normal text-md-on-surface before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:content-[''] hover:before:opacity-[0.08]"><span class="relative flex-1">Q3 Customer Research</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-check relative size-[18px] text-md-on-surface-variant" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span id="__NX_ID_0__-blank-document-list-1" role="option" aria-selected="false" class="relative flex h-12 cursor-pointer items-center gap-3 px-3 text-sm font-normal text-md-on-surface before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:content-[''] hover:before:opacity-[0.08]"><span class="relative flex-1">September release notes</span></span></span></span><span class=""> for </span><span class="relative max-w-full align-middle leading-5 mx-[3px] inline-flex"><input id="__NX_ID_0__-blank-audience" autoComplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="__NX_ID_0__-blank-audience-list" type="text" placeholder="audience" aria-label="Audience" aria-required="true" style="width:calc(8.8ch + 3rem)" class="h-9 min-w-0 max-w-full pl-3 pr-[30px] text-[15px] font-medium text-md-on-surface outline-none transition-colors motion-reduce:transition-none placeholder:font-normal placeholder:text-md-on-surface-variant rounded-md-md border border-dashed border-md-outline bg-md-surface focus:border-2 focus:border-solid focus:border-md-primary focus:pl-[11px] focus:pr-[29px]" value=""/><span aria-hidden="true" class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 [&_svg]:size-[18px] 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-chevron-down"><path d="m6 9 6 6 6-6"></path></svg></span><span id="__NX_ID_0__-blank-audience-list" role="listbox" aria-label="Audience" hidden="" class="absolute left-0 top-full z-20 mt-1 w-max min-w-full max-w-xs rounded-md-xs bg-md-surface-container py-2 text-left shadow-md-2 hidden"><span id="__NX_ID_0__-blank-audience-list-0" role="option" aria-selected="false" class="relative flex h-12 cursor-pointer items-center gap-3 px-3 text-sm font-normal text-md-on-surface before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:content-[''] hover:before:opacity-[0.08]"><span class="relative flex-1">Leadership</span></span><span id="__NX_ID_0__-blank-audience-list-1" role="option" aria-selected="false" class="relative flex h-12 cursor-pointer items-center gap-3 px-3 text-sm font-normal text-md-on-surface before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:content-[''] hover:before:opacity-[0.08]"><span class="relative flex-1">Engineering</span></span></span></span><span class="text-md-on-surface-variant">, focusing on </span><span class="relative max-w-full align-middle leading-5 mx-[3px] inline-flex"><input id="__NX_ID_0__-blank-topic" autoComplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="__NX_ID_0__-blank-topic-list" type="text" placeholder="topic" aria-label="Topic (optional)" style="width:calc(5.5ch + 3rem)" class="h-9 min-w-0 max-w-full pl-3 pr-[30px] text-[15px] font-medium text-md-on-surface outline-none transition-colors motion-reduce:transition-none placeholder:font-normal placeholder:text-md-on-surface-variant rounded-md-md border border-dashed border-md-outline bg-md-surface focus:border-2 focus:border-solid focus:border-md-primary focus:pl-[11px] focus:pr-[29px]" value=""/><span aria-hidden="true" class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 [&_svg]:size-[18px] 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-chevron-down"><path d="m6 9 6 6 6-6"></path></svg></span><span id="__NX_ID_0__-blank-topic-list" role="listbox" aria-label="Topic" hidden="" class="absolute left-0 top-full z-20 mt-1 w-max min-w-full max-w-xs rounded-md-xs bg-md-surface-container py-2 text-left shadow-md-2 hidden"><span id="__NX_ID_0__-blank-topic-list-0" role="option" aria-selected="false" class="relative flex h-12 cursor-pointer items-center gap-3 px-3 text-sm font-normal text-md-on-surface before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:content-[''] hover:before:opacity-[0.08]"><span class="relative flex-1">Onboarding issues</span></span><span id="__NX_ID_0__-blank-topic-list-1" role="option" aria-selected="false" class="relative flex h-12 cursor-pointer items-center gap-3 px-3 text-sm font-normal text-md-on-surface before:absolute before:inset-0 before:bg-md-on-surface before:opacity-0 before:content-[''] hover:before:opacity-[0.08]"><span class="relative flex-1">Pricing feedback</span></span></span></span><span aria-hidden="true" class="-ml-px mr-1 inline-block align-middle text-[11.5px] leading-4 text-md-on-surface-variant">optional</span><span class="">.</span></div><p class="flex items-baseline gap-2 rounded-md-md bg-md-surface-container-low px-3.5 py-2.5 text-[13px] leading-5 text-md-on-surface"><span class="shrink-0 font-semibold text-md-on-surface-variant">Preview</span><span data-madlibs-preview="">Summarize Q3 Customer Research for \u2026.</span></p><div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2"><span class="text-xs tracking-[0.4px] text-md-on-surface-variant">Nothing is sent until you send it.</span><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 ml-auto"><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-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span><span class="relative">Use prompt</span></button></div><p role="status" class="sr-only"></p></div>`,
+      idCount: 1,
+      text: [
+        "Build your request",
+        "Summarize",
+        "Q3 Customer Research",
+        "September release notes",
+        "for",
+        "Leadership",
+        "Engineering",
+        ", focusing on",
+        "Onboarding issues",
+        "Pricing feedback",
+        "optional",
+        "Preview",
+        "Summarize Q3 Customer Research for \u2026.",
+        "Nothing is sent until you send it.",
+        "Use prompt"
+      ]
+    },
+    promptenhancer: {
+      name: "PromptEnhancer",
+      html: `<div data-state="enhanced" class="flex w-full flex-col gap-2.5"><div data-slot="input-group" role="group" class="group/input-group relative flex w-full items-center bg-background outline-none transition-[color,box-shadow] h-9 min-w-0 has-[&gt;textarea]:h-auto [&:has(&gt;[data-align=inline-start])&gt;input]:pl-2 [&:has(&gt;[data-align=inline-end])&gt;input]:pr-2 has-[&gt;[data-align=block-start]]:h-auto has-[&gt;[data-align=block-start]]:flex-col [&:has(&gt;[data-align=block-start])&gt;input]:pb-3 has-[&gt;[data-align=block-end]]:h-auto has-[&gt;[data-align=block-end]]:flex-col [&:has(&gt;[data-align=block-end])&gt;input]:pt-3 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 flex-col overflow-hidden rounded-xl border-[1.5px] border-border shadow-none"><textarea rows="1" class="flex border-input text-foreground transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 rounded-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 resize-none border-0 min-h-0 w-full flex-none px-3.5 py-3 text-sm leading-5" data-slot="input-group-control" aria-label="Describe what you need\u2026" placeholder="Describe what you need\u2026">Summarize customer feedback.</textarea><div role="group" data-slot="input-group-addon" data-align="block-end" class="flex h-auto select-none items-center gap-2 text-sm font-medium text-muted-foreground group-data-[disabled=true]/input-group:opacity-50 [&&gt;kbd]:rounded-sm [&&gt;svg:not([class*='size-'])]:size-4 order-last w-full group-has-[&gt;input]/input-group:pb-2.5 cursor-default justify-between border-t border-border px-3.5 py-2 [&.border-t]:pt-2"><span class="flex items-center gap-2 text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 text-xs font-normal">Aria will expand this prompt</span><span class="ml-auto flex items-center gap-1.5"><button type="button" class="select-none justify-center whitespace-nowrap tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 border border-border bg-primary text-primary-foreground hover:bg-primary/90 flex items-center shadow-none gap-1.5 rounded-md has-[&gt;svg]:px-2.5 h-8 px-3 text-sm font-medium" data-size="sm" aria-label="Enhance this prompt with AI"><svg xmlns="http://www.w3.org/2000/svg" width="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 size-3.5 text-warning" 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</button></span></div></div><div role="status" aria-live="polite" class="sr-only"></div><div role="region" aria-label="Suggested improvements to your prompt" class="flex flex-col gap-2.5 animate-nx-fade-in motion-reduce:animate-none"><div class="flex flex-wrap items-baseline justify-between gap-2 px-0.5"><p class="text-sm font-semibold text-foreground">Suggested improvements</p><span class="text-xs text-muted-foreground">2 of 2 changes</span></div><div class="grid grid-cols-1 gap-2 sm:grid-cols-2"><div class="rounded-[10px] border border-border bg-muted/50 px-3.5 py-3"><p class="flex items-center gap-1.5 text-[11px] font-bold uppercase leading-4 tracking-[0.08em] mb-1.5 text-muted-foreground">You wrote</p><p class="text-sm leading-[22px] text-foreground">Summarize customer feedback.</p></div><div class="rounded-[10px] border-[1.5px] border-warning bg-brand/5 px-3.5 py-3"><div class="mb-1.5"><p class="flex items-center gap-1.5 text-[11px] font-bold uppercase leading-4 tracking-[0.08em] text-warning-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-sparkles size-3.5 text-warning" 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>Enhanced</p></div><p class="text-sm leading-[22px] text-foreground">Summarize customer feedback <ins class="rounded-sm bg-warning/20 px-0.5 text-foreground underline decoration-warning decoration-dotted underline-offset-4 [box-decoration-break:clone]"><span class="sr-only">added: </span>from the last quarter</ins>, <ins class="rounded-sm bg-warning/20 px-0.5 text-foreground underline decoration-warning decoration-dotted underline-offset-4 [box-decoration-break:clone]"><span class="sr-only">added: </span>grouped by recurring theme</ins>.</p></div></div><div role="group" aria-label="Changes \u2014 untick to leave one out" class="flex flex-col divide-y divide-border border-y border-border"><div class="flex items-start gap-3 py-2.5"><button type="button" role="checkbox" aria-checked="true" data-state="checked" class="inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 border-primary bg-primary text-primary-foreground mt-0.5" id="__NX_ID_0__-c-time" aria-labelledby="__NX_ID_0__-c-time-l" aria-describedby="__NX_ID_0__-c-time-why __NX_ID_0__-c-time-as"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3"><path d="M20 6 9 17l-5-5"></path></svg></button><div class="flex min-w-0 flex-col gap-0.5"><label id="__NX_ID_0__-c-time-l" for="__NX_ID_0__-c-time" class="cursor-pointer text-sm font-medium leading-5 text-foreground">Add \u201Cfrom the last quarter\u201D</label><span id="__NX_ID_0__-c-time-why" class="text-xs leading-[18px] text-muted-foreground">A time range makes the summary comparable with the last one.</span><span id="__NX_ID_0__-c-time-as" class="mt-1 inline-flex items-center gap-1 self-start rounded-md bg-warning/15 px-2 py-0.5 text-xs font-medium 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-circle-help size-3.5 text-muted-foreground" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><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>Assumes you mean the last quarter.</span></div></div><div class="flex items-start gap-3 py-2.5"><button type="button" role="checkbox" aria-checked="true" data-state="checked" class="inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 border-primary bg-primary text-primary-foreground mt-0.5" id="__NX_ID_0__-c-theme" aria-labelledby="__NX_ID_0__-c-theme-l" aria-describedby="__NX_ID_0__-c-theme-why"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3"><path d="M20 6 9 17l-5-5"></path></svg></button><div class="flex min-w-0 flex-col gap-0.5"><label id="__NX_ID_0__-c-theme-l" for="__NX_ID_0__-c-theme" class="cursor-pointer text-sm font-medium leading-5 text-foreground">Add \u201Cgrouped by recurring theme\u201D</label><span id="__NX_ID_0__-c-theme-why" class="text-xs leading-[18px] text-muted-foreground">Themes make issues easier to act on than a list of comments.</span></div></div></div><div class="flex flex-wrap gap-2"><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 border border-border bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-10 rounded-lg px-5 text-sm min-w-[10rem] flex-1">Use enhanced</button><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 text-foreground hover:bg-accent h-10 rounded-lg px-5 text-sm"><span class="inline-flex shrink-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil size-3.5" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg></span>Edit</button><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 border border-border bg-background shadow-sm hover:bg-accent h-10 rounded-lg px-5 text-sm text-muted-foreground">Keep original</button></div></div></div>`,
+      idCount: 1,
+      text: [
+        "Summarize customer feedback.",
+        "Aria will expand this prompt",
+        "Enhance",
+        "Suggested improvements",
+        "2 of 2 changes",
+        "You wrote",
+        "Enhanced",
+        "Summarize customer feedback",
+        "added:",
+        "from the last quarter",
+        "grouped by recurring theme",
+        "Add \u201Cfrom the last quarter\u201D",
+        "Assumes you mean the last quarter.",
+        "Add \u201Cgrouped by recurring theme\u201D",
+        "Use enhanced",
+        "Edit",
+        "Keep original"
+      ]
+    },
+    md3promptenhancer: {
+      name: "Md3PromptEnhancer",
+      html: `<div data-state="enhanced" class="flex w-full flex-col gap-3"><div class="relative overflow-hidden rounded-md-md border border-md-outline-variant text-md-on-surface flex flex-col gap-3.5 rounded-md-lg bg-md-surface px-5 py-[18px] animate-nx-fade-in motion-reduce:animate-none" role="region" aria-label="Suggested improvements to your prompt"><div class="flex flex-wrap items-baseline justify-between gap-3"><p class="text-base font-medium leading-6 text-md-on-surface">Suggested improvements</p><span class="text-xs text-md-on-surface-variant">2 of 2 changes</span></div><div class="grid grid-cols-[repeat(auto-fit,minmax(210px,1fr))] gap-2.5"><div class="flex flex-col gap-2 rounded-md-md border border-transparent bg-md-on-surface/[0.04] px-3.5 py-3"><p class="flex items-center gap-1.5 text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] text-md-on-surface-variant">You wrote</p><p class="text-[14.5px] leading-[22px] text-md-on-surface">Summarize customer feedback.</p></div><div class="flex flex-col gap-2 rounded-md-md border border-md-primary/45 bg-md-primary/5 px-3.5 py-3"><p class="flex items-center gap-1.5 text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] 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-message-square-text size-4" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M13 8H7"></path><path d="M17 12H7"></path></svg>Enhanced</p><p class="text-[14.5px] leading-[22px] text-md-on-surface">Summarize customer feedback <ins class="rounded-md-xs bg-md-primary-container/75 px-0.5 text-md-on-primary-container underline decoration-md-primary/50 decoration-dotted underline-offset-4 [box-decoration-break:clone]"><span class="sr-only">added: </span>from the last quarter</ins>, <ins class="rounded-md-xs bg-md-primary-container/75 px-0.5 text-md-on-primary-container underline decoration-md-primary/50 decoration-dotted underline-offset-4 [box-decoration-break:clone]"><span class="sr-only">added: </span>grouped by recurring theme</ins>.</p></div></div><div role="group" aria-label="Changes \u2014 untick to leave one out" class="flex flex-col border-t border-md-outline-variant"><div class="flex items-start gap-2 border-b border-md-outline-variant py-2 last:border-b-0 last:pb-0"><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] -ml-2.5 shrink-0" id="__NX_ID_0__-c-time" aria-labelledby="__NX_ID_0__-c-time-l" aria-describedby="__NX_ID_0__-c-time-why __NX_ID_0__-c-time-as"><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><div class="flex min-w-0 flex-col gap-0.5 pt-2.5"><label id="__NX_ID_0__-c-time-l" for="__NX_ID_0__-c-time" class="cursor-pointer text-sm font-medium leading-5 text-md-on-surface">Add \u201Cfrom the last quarter\u201D</label><span id="__NX_ID_0__-c-time-why" class="text-[12.5px] leading-[18px] text-md-on-surface-variant">A time range makes the summary comparable with the last one.</span><span id="__NX_ID_0__-c-time-as" class="mt-1 inline-flex items-center gap-1 self-start rounded-md-sm bg-md-surface-container-high px-2 py-0.5 text-[11.5px] font-medium 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-help size-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><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>Assumes you mean the last quarter.</span></div></div><div class="flex items-start gap-2 border-b border-md-outline-variant py-2 last:border-b-0 last:pb-0"><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] -ml-2.5 shrink-0" id="__NX_ID_0__-c-theme" aria-labelledby="__NX_ID_0__-c-theme-l" aria-describedby="__NX_ID_0__-c-theme-why"><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><div class="flex min-w-0 flex-col gap-0.5 pt-2.5"><label id="__NX_ID_0__-c-theme-l" for="__NX_ID_0__-c-theme" class="cursor-pointer text-sm font-medium leading-5 text-md-on-surface">Add \u201Cgrouped by recurring theme\u201D</label><span id="__NX_ID_0__-c-theme-why" class="text-[12.5px] leading-[18px] text-md-on-surface-variant">Themes make issues easier to act on than a list of comments.</span></div></div></div><div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2"><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-3 [&_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-transparent text-md-primary -ml-1"><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-pencil" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg></span><span class="relative">Edit</span></button><span class="ml-auto inline-flex flex-wrap gap-2"><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 border border-md-outline bg-transparent text-md-primary"><span class="relative">Keep original</span></button><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">Use enhanced</span></button></span></div></div><div role="status" aria-live="polite" class="sr-only"></div><div class="flex flex-col gap-3 rounded-md-xl p-3 focus-within:ring-2 focus-within:ring-md-primary rounded-md-xl border border-md-outline-variant bg-md-surface px-4 pb-2 pt-3.5 shadow-md-1 [&&gt;textarea]:text-base [&_button[aria-label=Send]]:hidden"><textarea rows="1" placeholder="Describe what you need\u2026" aria-label="Describe what you need\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">Summarize customer feedback.</textarea><div class="flex items-center justify-between gap-2"><div class="flex items-center gap-1"><span class="px-1 text-xs text-md-on-surface-variant">Aria will expand this prompt</span></div><div class="flex items-center gap-2"><button type="button" aria-label="Enhance this prompt with AI" class="relative inline-flex min-h-8 shrink-0 items-center gap-1.5 overflow-hidden rounded-md-sm border py-1 pl-2 pr-2.5 text-[13px] font-medium leading-5 outline-none transition-colors 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] motion-reduce:transition-none [&_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] motion-reduce:before:transition-none border-md-outline-variant bg-transparent 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-sparkles relative" 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 class="relative">Enhance</span></button><button type="button" 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></div>`,
+      idCount: 1,
+      text: [
+        "Suggested improvements",
+        "2 of 2 changes",
+        "You wrote",
+        "Summarize customer feedback.",
+        "Enhanced",
+        "Summarize customer feedback",
+        "added:",
+        "from the last quarter",
+        "grouped by recurring theme",
+        "Add \u201Cfrom the last quarter\u201D",
+        "Assumes you mean the last quarter.",
+        "Add \u201Cgrouped by recurring theme\u201D",
+        "Edit",
+        "Keep original",
+        "Use enhanced",
+        "Aria will expand this prompt",
+        "Enhance"
+      ]
+    },
+    modes: {
+      name: "Modes",
+      html: '<div class="flex flex-col gap-2"><div role="radiogroup" aria-label="Mode" class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-background w-full max-w-[30rem]"><button type="button" role="radio" aria-checked="true" aria-labelledby="__NX_ID_0__-0-n" aria-describedby="__NX_ID_0__-0" tabindex="0" class="flex w-full items-center gap-2.5 px-3.5 py-2.5 text-left transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring bg-brand/[0.06]"><span aria-hidden="true" class="grid size-7 shrink-0 place-items-center rounded-[7px] text-[13px] [&_svg]:size-4 bg-primary text-primary-foreground"></span><span class="flex min-w-0 flex-1 flex-col"><span id="__NX_ID_0__-0-n" class="text-[13px] leading-5 font-semibold text-foreground">Fast<span aria-hidden="true"> \xB7 active</span></span><span id="__NX_ID_0__-0" class="flex flex-col text-[11px] leading-4 text-muted-foreground"><span class="">~3 seconds \xB7 everyday asks and quick lookups</span></span></span></button><button type="button" role="radio" aria-checked="false" aria-labelledby="__NX_ID_0__-1-n" aria-describedby="__NX_ID_0__-1" tabindex="-1" class="flex w-full items-center gap-2.5 px-3.5 py-2.5 text-left transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring hover:bg-muted/50"><span aria-hidden="true" class="grid size-7 shrink-0 place-items-center rounded-[7px] text-[13px] [&_svg]:size-4 bg-muted/60 text-muted-foreground"></span><span class="flex min-w-0 flex-1 flex-col"><span id="__NX_ID_0__-1-n" class="text-[13px] leading-5 text-foreground/70">Balanced</span><span id="__NX_ID_0__-1" class="flex flex-col text-[11px] leading-4 text-muted-foreground"><span class="">~15 seconds \xB7 most tasks</span></span></span></button><button type="button" role="radio" aria-checked="false" aria-disabled="true" aria-labelledby="__NX_ID_0__-2-n" aria-describedby="__NX_ID_0__-2" tabindex="-1" class="flex w-full items-center gap-2.5 px-3.5 py-2.5 text-left transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring hover:bg-muted/50 cursor-not-allowed"><span aria-hidden="true" class="grid size-7 shrink-0 place-items-center rounded-[7px] text-[13px] [&_svg]:size-4 bg-muted/60 text-muted-foreground opacity-50"></span><span class="flex min-w-0 flex-1 flex-col"><span id="__NX_ID_0__-2-n" class="text-[13px] leading-5 text-foreground/70 opacity-60">Deep research</span><span id="__NX_ID_0__-2" class="flex flex-col text-[11px] leading-4 text-muted-foreground"><span class="opacity-60">~1 minute \xB7 multi-source, high-stakes</span><span class="mt-0.5 inline-flex items-center gap-1 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-info size-3 shrink-0" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>Not on this plan.</span></span></span></button></div><span role="status" aria-live="polite" class="sr-only"></span></div>',
+      idCount: 1,
+      text: [
+        "Fast",
+        "\xB7 active",
+        "Balanced",
+        "~15 seconds \xB7 most tasks",
+        "Deep research",
+        "~1 minute \xB7 multi-source, high-stakes",
+        "Not on this plan."
+      ]
+    },
+    md3modes: {
+      name: "Md3Modes",
+      html: `<div class="flex flex-col gap-2"><div role="radiogroup" aria-label="Mode" class="flex flex-col gap-0.5 rounded-md-lg border border-md-outline-variant bg-md-surface p-2 w-full max-w-[30rem]"><button type="button" role="radio" aria-checked="true" aria-labelledby="__NX_ID_0__-0-n" aria-describedby="__NX_ID_0__-0" tabindex="0" class="relative flex min-h-14 w-full items-center gap-3 overflow-hidden rounded-md-md px-3 py-2.5 text-left transition-colors motion-reduce:transition-none before:pointer-events-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] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary bg-md-secondary-container text-md-on-secondary-container"><span aria-hidden="true" class="relative grid size-10 shrink-0 place-items-center rounded-md-md text-base [&_svg]:size-[22px] bg-md-primary text-md-on-primary"></span><span class="relative flex min-w-0 flex-1 flex-col gap-0.5"><span id="__NX_ID_0__-0-n" class="text-sm font-medium leading-5">Fast</span><span id="__NX_ID_0__-0" class="flex flex-col gap-0.5 text-xs leading-[18px]"><span class="text-current">~3 seconds \xB7 everyday asks and quick lookups</span></span></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check relative size-[22px] shrink-0 text-md-on-secondary-container" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></button><button type="button" role="radio" aria-checked="false" aria-labelledby="__NX_ID_0__-1-n" aria-describedby="__NX_ID_0__-1" tabindex="-1" class="relative flex min-h-14 w-full items-center gap-3 overflow-hidden rounded-md-md px-3 py-2.5 text-left transition-colors motion-reduce:transition-none before:pointer-events-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] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-on-surface"><span aria-hidden="true" class="relative grid size-10 shrink-0 place-items-center rounded-md-md text-base [&_svg]:size-[22px] bg-md-surface-container-high text-md-on-surface-variant"></span><span class="relative flex min-w-0 flex-1 flex-col gap-0.5"><span id="__NX_ID_0__-1-n" class="text-sm font-medium leading-5">Balanced</span><span id="__NX_ID_0__-1" class="flex flex-col gap-0.5 text-xs leading-[18px]"><span class="text-md-on-surface-variant">~15 seconds \xB7 most tasks</span></span></span></button><button type="button" role="radio" aria-checked="false" aria-disabled="true" aria-labelledby="__NX_ID_0__-2-n" aria-describedby="__NX_ID_0__-2" tabindex="-1" class="relative flex min-h-14 w-full items-center gap-3 overflow-hidden rounded-md-md px-3 py-2.5 text-left transition-colors motion-reduce:transition-none before:pointer-events-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] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary text-md-on-surface cursor-not-allowed"><span aria-hidden="true" class="relative grid size-10 shrink-0 place-items-center rounded-md-md text-base [&_svg]:size-[22px] bg-md-surface-container-high text-md-on-surface-variant opacity-[0.55]"></span><span class="relative flex min-w-0 flex-1 flex-col gap-0.5"><span id="__NX_ID_0__-2-n" class="text-sm font-medium leading-5 opacity-[0.55]">Deep research</span><span id="__NX_ID_0__-2" class="flex flex-col gap-0.5 text-xs leading-[18px]"><span class="text-md-on-surface-variant opacity-[0.55]">~1 minute \xB7 multi-source, high-stakes</span><span class="inline-flex items-center gap-1 text-md-on-surface"><svg xmlns="http://www.w3.org/2000/svg" width="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 size-3.5 shrink-0" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>Not on this plan.</span></span></span></button></div><span role="status" aria-live="polite" class="sr-only"></span></div>`,
+      idCount: 1,
+      text: [
+        "Fast",
+        "Balanced",
+        "~15 seconds \xB7 most tasks",
+        "Deep research",
+        "~1 minute \xB7 multi-source, high-stakes",
+        "Not on this plan."
+      ]
+    },
+    voicetone: {
+      name: "VoiceTone",
+      html: '<div role="group" aria-label="Voice and tone" data-variant="settings" class="w-full max-w-[30rem] overflow-hidden rounded-xl border border-border bg-background text-foreground"><div class="flex flex-col gap-3.5 px-[18px] pb-4 pt-4"><div class="flex flex-col gap-2.5"><p id="__NX_ID_0__-presets" class="text-[11px] font-semibold uppercase leading-4 tracking-[0.1em] text-muted-foreground">Tone preset</p><div role="radiogroup" aria-labelledby="__NX_ID_0__-presets" class="grid grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))] gap-1.5"><button type="button" role="radio" aria-checked="true" tabindex="0" class="flex flex-col rounded-lg border px-2 py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background items-center gap-0.5 text-center border-primary bg-muted/50 ring-[0.5px] ring-inset ring-primary"><span class="flex w-full items-center gap-1.5 text-[13px] leading-5 justify-center font-semibold text-foreground">Professional</span><span class="text-[11px] leading-4 text-muted-foreground">Formal, clear</span></button><button type="button" role="radio" aria-checked="false" tabindex="-1" class="flex flex-col rounded-lg border px-2 py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background items-center gap-0.5 text-center border-border bg-transparent hover:bg-accent/50"><span class="flex w-full items-center gap-1.5 text-[13px] leading-5 justify-center text-foreground/75">Friendly</span><span class="text-[11px] leading-4 text-muted-foreground">Warm, easy</span></button><button type="button" role="radio" aria-checked="false" tabindex="-1" class="flex flex-col rounded-lg border px-2 py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background items-center gap-0.5 text-center border-border bg-transparent hover:bg-accent/50"><span class="flex w-full items-center gap-1.5 text-[13px] leading-5 justify-center text-foreground/75">Direct</span><span class="text-[11px] leading-4 text-muted-foreground">Brief, blunt</span></button></div></div><div role="group" aria-labelledby="__NX_ID_0__-rules" class="flex flex-col gap-2"><p id="__NX_ID_0__-rules" class="text-[11px] font-semibold uppercase leading-4 tracking-[0.1em] text-muted-foreground">Rules</p><div class="flex flex-col gap-1.5"><label class="flex w-fit cursor-pointer items-center gap-2.5 text-[13px] text-foreground"><button type="button" role="checkbox" aria-checked="true" data-state="checked" class="inline-flex shrink-0 items-center justify-center rounded-[4px] border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 border-primary bg-primary text-primary-foreground size-[15px]" aria-labelledby="__NX_ID_0__-rule-no-emojis"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-3"><path d="M20 6 9 17l-5-5"></path></svg></button><span id="__NX_ID_0__-rule-no-emojis">No emojis</span></label></div></div></div><div class="flex flex-col gap-1 bg-muted/40 px-[18px] pb-3.5 pt-3"><p class="text-[11px] font-semibold uppercase leading-4 tracking-[0.1em] text-muted-foreground">Sample output</p><p class="text-[13px] italic leading-5 text-foreground" aria-live="polite">\u201CPlease find the updated proposal attached for your review.\u201D</p></div><span role="status" class="sr-only"></span></div>',
+      idCount: 1,
+      text: [
+        "Tone preset",
+        "Professional",
+        "Formal, clear",
+        "Friendly",
+        "Warm, easy",
+        "Direct",
+        "Brief, blunt",
+        "Rules",
+        "No emojis",
+        "Sample output"
+      ]
+    },
+    md3voicetone: {
+      name: "Md3VoiceTone",
+      html: `<div class="relative overflow-hidden rounded-md-md border border-md-outline-variant bg-md-surface text-md-on-surface w-full max-w-[30rem] rounded-md-lg" role="group" aria-label="Voice and tone" data-variant="settings"><div class="flex flex-col gap-4 px-5 pb-4 pt-5"><div class="flex flex-col gap-2.5"><p id="__NX_ID_0__-presets" class="text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] text-md-on-surface-variant">Tone preset</p><div role="radiogroup" aria-labelledby="__NX_ID_0__-presets" class="grid grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))] gap-2"><button type="button" role="radio" aria-checked="true" tabindex="0" class="relative overflow-hidden before:pointer-events-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] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface flex min-h-[4.75rem] flex-col items-start gap-1 rounded-md-md text-left text-md-on-surface transition-colors border-2 border-md-primary bg-md-primary/[0.06] px-[13px] py-[11px]"><span class="relative flex w-full items-center gap-1.5 text-sm font-semibold leading-5">Professional<svg xmlns="http://www.w3.org/2000/svg" width="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 ml-auto size-[18px] shrink-0 text-md-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="relative text-[12.5px] leading-[18px] text-md-on-surface-variant">Formal, clear</span></button><button type="button" role="radio" aria-checked="false" tabindex="-1" class="relative overflow-hidden before:pointer-events-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] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface flex min-h-[4.75rem] flex-col items-start gap-1 rounded-md-md text-left text-md-on-surface transition-colors border border-md-outline-variant px-3.5 py-3"><span class="relative flex w-full items-center gap-1.5 text-sm font-semibold leading-5">Friendly</span><span class="relative text-[12.5px] leading-[18px] text-md-on-surface-variant">Warm, easy</span></button><button type="button" role="radio" aria-checked="false" tabindex="-1" class="relative overflow-hidden before:pointer-events-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] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface flex min-h-[4.75rem] flex-col items-start gap-1 rounded-md-md text-left text-md-on-surface transition-colors border border-md-outline-variant px-3.5 py-3"><span class="relative flex w-full items-center gap-1.5 text-sm font-semibold leading-5">Direct</span><span class="relative text-[12.5px] leading-[18px] text-md-on-surface-variant">Brief, blunt</span></button></div></div><div role="group" aria-labelledby="__NX_ID_0__-rules" class="flex flex-col gap-1"><p id="__NX_ID_0__-rules" class="text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] text-md-on-surface-variant">Rules</p><div class="-ml-2.5 flex flex-col"><label class="flex w-fit cursor-pointer items-center gap-1 text-sm text-md-on-surface"><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-labelledby="__NX_ID_0__-rule-no-emojis"><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><span id="__NX_ID_0__-rule-no-emojis">No emojis</span></label></div></div></div><div class="flex flex-col gap-1 bg-md-surface-container-low px-5 pb-4 pt-3.5"><p class="text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] text-md-on-surface-variant">Sample output</p><p class="text-sm italic leading-[21px] text-md-on-surface" aria-live="polite">\u201CPlease find the updated proposal attached for your review.\u201D</p></div><span role="status" class="sr-only"></span></div>`,
+      idCount: 1,
+      text: [
+        "Tone preset",
+        "Professional",
+        "Formal, clear",
+        "Friendly",
+        "Warm, easy",
+        "Direct",
+        "Brief, blunt",
+        "Rules",
+        "No emojis",
+        "Sample output"
+      ]
+    },
+    presetstyles: {
+      name: "PresetStyles",
+      html: '<div class="rounded-xl border border-border bg-background text-foreground shadow-sm flex w-full max-w-[30rem] flex-col gap-3 p-4"><p id="__NX_ID_0__-label" class="text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">Output style</p><div role="radiogroup" aria-labelledby="__NX_ID_0__-label" class="grid grid-cols-4 gap-2"><button type="button" role="radio" aria-checked="true" data-style-id="photo" tabindex="0" class="group flex min-w-0 flex-col items-center gap-1.5 rounded-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-[9px] bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-destructive/10 to-destructive/20 border-[2.5px] border-foreground"></span><span class="max-w-full truncate text-[11px] font-semibold text-foreground">Photo</span></button><button type="button" role="radio" aria-checked="false" data-style-id="illustration" tabindex="-1" class="group flex min-w-0 flex-col items-center gap-1.5 rounded-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-[9px] bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-info/15 to-info/30 border-[1.5px] border-border group-hover:border-muted-foreground/50"></span><span class="max-w-full truncate text-[11px] text-muted-foreground">Illustration</span></button><button type="button" role="radio" aria-checked="false" data-style-id="isometric" tabindex="-1" class="group flex min-w-0 flex-col items-center gap-1.5 rounded-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-[9px] bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-success/15 to-success/30 border-[1.5px] border-border group-hover:border-muted-foreground/50"></span><span class="max-w-full truncate text-[11px] text-muted-foreground">Isometric</span></button><button type="button" role="radio" aria-checked="false" data-style-id="sketch" tabindex="-1" class="group flex min-w-0 flex-col items-center gap-1.5 rounded-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-[9px] bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-warning/35 to-warning/60 border-[1.5px] border-border group-hover:border-muted-foreground/50"></span><span class="max-w-full truncate text-[11px] text-muted-foreground">Sketch</span></button></div><div class="flex items-center gap-2.5 rounded-[10px] border-[1.5px] border-dashed border-border p-3 transition-colors"><input type="file" accept="image/*" tabindex="-1" aria-hidden="true" class="sr-only" aria-label="Reference image"/><button type="button" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><span aria-hidden="true" class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-[7px] bg-gradient-to-br from-muted to-border"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image size-4 text-muted-foreground"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></span><span class="flex min-w-0 flex-col"><span class="text-xs font-semibold text-foreground">Match a style</span><span class="truncate text-[11px] text-muted-foreground">Drop a reference image to copy its aesthetic</span></span></button></div><div class="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2 text-[11px] 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-palette size-3.5 shrink-0 text-brand" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg><span class="min-w-0 flex-1" aria-live="polite">Style locked to <strong class="font-semibold text-foreground">Photo</strong> for this project</span><button type="button" class="inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap tracking-[0.005em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 text-foreground underline decoration-from-font underline-offset-2 hover:opacity-70 rounded-lg h-auto shrink-0 px-0 text-[11px] font-medium">Unlock</button></div></div>',
+      idCount: 1,
+      text: [
+        "Output style",
+        "Photo",
+        "Illustration",
+        "Isometric",
+        "Sketch",
+        "Match a style",
+        "Style locked to",
+        "for this project",
+        "Unlock"
+      ]
+    },
+    md3presetstyles: {
+      name: "Md3PresetStyles",
+      html: `<div class="relative overflow-hidden rounded-md-md border border-md-outline-variant bg-md-surface text-md-on-surface flex w-full max-w-[30rem] flex-col gap-3.5 rounded-md-lg p-4"><p id="__NX_ID_0__-label" class="text-[11.5px] font-semibold uppercase leading-4 tracking-[0.06em] text-md-on-surface-variant">Output style</p><div role="radiogroup" aria-labelledby="__NX_ID_0__-label" class="grid grid-cols-4 gap-2"><button type="button" role="radio" aria-checked="true" data-style-id="photo" tabindex="0" class="flex min-w-0 flex-col items-center gap-1.5 rounded-md-md outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-md-md bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-md-error-container to-md-error/25 border-[3px] border-md-primary"></span><span class="max-w-full truncate text-xs font-medium text-md-on-surface">Photo</span></button><button type="button" role="radio" aria-checked="false" data-style-id="illustration" tabindex="-1" class="flex min-w-0 flex-col items-center gap-1.5 rounded-md-md outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-md-md bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-md-primary-container to-md-primary/25 border border-md-outline-variant"></span><span class="max-w-full truncate text-xs text-md-on-surface-variant">Illustration</span></button><button type="button" role="radio" aria-checked="false" data-style-id="isometric" tabindex="-1" class="flex min-w-0 flex-col items-center gap-1.5 rounded-md-md outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-md-md bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-md-tertiary-container to-md-tertiary/25 border border-md-outline-variant"></span><span class="max-w-full truncate text-xs text-md-on-surface-variant">Isometric</span></button><button type="button" role="radio" aria-checked="false" data-style-id="sketch" tabindex="-1" class="flex min-w-0 flex-col items-center gap-1.5 rounded-md-md outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface"><span aria-hidden="true" class="block aspect-square w-full overflow-hidden rounded-md-md bg-gradient-to-br transition-[border-color,border-width] motion-reduce:transition-none from-md-secondary-container to-md-secondary/30 border border-md-outline-variant"></span><span class="max-w-full truncate text-xs text-md-on-surface-variant">Sketch</span></button></div><div class="flex items-center gap-3 rounded-md-md border border-dashed border-md-outline p-3 transition-colors"><input type="file" accept="image/*" tabindex="-1" aria-hidden="true" class="sr-only" aria-label="Reference image"/><button type="button" class="relative flex min-w-0 flex-1 items-center gap-3 rounded-md-sm text-left outline-none focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface"><span aria-hidden="true" class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-md-sm bg-md-surface-container-high 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-image size-5"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></span><span class="flex min-w-0 flex-col"><span class="text-sm font-medium text-md-on-surface">Match a style</span><span class="truncate text-xs text-md-on-surface-variant">Drop a reference image to copy its aesthetic</span></span></button></div><div class="flex items-center gap-2 rounded-md-md bg-md-surface-container-low px-3 py-1.5 text-[13px] 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-palette size-[18px] shrink-0 text-md-primary" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg><span class="min-w-0 flex-1" aria-live="polite">Style locked to <strong class="font-medium text-md-on-surface">Photo</strong> for this project</span><button type="button" class="relative inline-flex min-h-8 items-center gap-1 rounded-full px-2.5 text-[13px] font-medium text-md-primary [&_svg]:size-[18px] before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] active:before:opacity-[0.12] motion-reduce:before:transition-none outline-none focus-visible:ring-2 focus-visible:ring-md-primary shrink-0">Unlock</button></div></div>`,
+      idCount: 1,
+      text: [
+        "Output style",
+        "Photo",
+        "Illustration",
+        "Isometric",
+        "Sketch",
+        "Match a style",
+        "Style locked to",
+        "for this project",
+        "Unlock"
+      ]
     }
   }
 };