@nucleux/md3-modes 0.0.0-stage → 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,51 @@
-# Temporary Holding Version
+# @nucleux/md3-modes
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Material 3 Modes — choose how the agent approaches a request (Brainstorm, Draft, Review, Plan), shown as a chip in the composer and switchable before sending — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+**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`) — the props types are re-exported from it and the state logic (`useModes`) is shared — 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.
+
+## Exports
+
+- **`Md3Modes`** — the whole pattern (`variant`: `composer` · `segmented` · `list` · `chip`)
+- **`Md3ModesSegmented`** — an `Md3SegmentedButton` of modes (radio group)
+- **`Md3ModesList`** — mode rows: 40dp icon tile, name, what changes, unavailable reason, trailing check
+- **`Md3ModesChip`** — outlined "Mode ▾" assist chip, or tonal "Mode **Plan** ▾ ×" once set
+- **`Md3ModesPicker`** — the menu-surface dialog: heading, rows, error-container alert, "No mode"
+- **`Md3ModesNote`** — "Mode changed to … Your text is unchanged." with Undo
+- Types: `Md3ModesProps`, `Md3ModeOption`, `Md3ModesVariant`, `Md3ModesNotice`, `Md3ModesSubmitDetails`, and each sub-component's `Md3…Props`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-modes @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3Modes } from "@nucleux/md3-modes";
+import { Flag, Lightbulb, NotebookPen, Eye } from "lucide-react";
+
+<Md3Modes
+  modes={[
+    { id: "brainstorm", name: "Brainstorm", icon: <Lightbulb />, description: "Explore several possible directions." },
+    { id: "draft", name: "Draft", icon: <NotebookPen />, description: "Write a first version you can edit." },
+    { id: "review", name: "Review", icon: <Eye />, description: "Check existing work for gaps and risks." },
+    { id: "plan", name: "Plan", icon: <Flag />, description: "Break the work into steps with owners and dates." },
+  ]}
+  onSubmit={(text, { mode }) => send(text, { mode: mode?.id })}
+/>
+```
+
+`sendLabel` is accepted for API parity; the send button is named by `Md3AgentComposer` ("Send").
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,493 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var modes = require('@nucleux/modes');
+var md3AgentComposer = require('@nucleux/md3-agent-composer');
+var md3Button = require('@nucleux/md3-button');
+var md3Chip = require('@nucleux/md3-chip');
+var md3IconButton = require('@nucleux/md3-icon-button');
+var md3Menu = require('@nucleux/md3-menu');
+var md3SegmentedButton = require('@nucleux/md3-segmented-button');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var stateLayer = "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";
+var Md3ModesSegmented = React__namespace.forwardRef(
+  ({ modes: modes$1, value, onSelect, label = "Mode", className, ...props }, ref) => {
+    const roving = modes.useModesRoving(modes$1, value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      md3SegmentedButton.Md3SegmentedButton,
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": label,
+        value: value ?? "",
+        className: utils.cn("divide-md-outline-variant border-md-outline-variant", className),
+        ...props,
+        children: modes$1.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          md3SegmentedButton.Md3SegmentedButtonItem,
+          {
+            value: m.id,
+            icon: m.icon,
+            role: "radio",
+            "aria-checked": m.id === value,
+            "aria-pressed": void 0,
+            "aria-disabled": m.unavailable ? true : void 0,
+            title: m.unavailable,
+            ...roving.getItemProps(i),
+            onClick: () => onSelect(m.id),
+            className: utils.cn("min-w-[5.5rem] motion-reduce:transition-none", m.unavailable && "cursor-not-allowed opacity-[0.38]"),
+            children: m.shortName ?? m.name
+          },
+          m.id
+        ))
+      }
+    );
+  }
+);
+Md3ModesSegmented.displayName = "Md3ModesSegmented";
+var Md3ModesList = React__namespace.forwardRef(
+  ({ modes: modes$1, value, onSelect, label = "Mode", showDescriptions = true, framed = true, className, ...props }, ref) => {
+    const roving = modes.useModesRoving(modes$1, value);
+    const baseId = React__namespace.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": label,
+        className: utils.cn(
+          "flex flex-col gap-0.5",
+          framed && "rounded-md-lg border border-md-outline-variant bg-md-surface p-2",
+          className
+        ),
+        ...props,
+        children: modes$1.map((m, i) => {
+          const on = m.id === value;
+          const support = modes.modeSupportingText(m, showDescriptions);
+          const descId = `${baseId}-${i}`;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": on,
+              "aria-disabled": m.unavailable ? true : void 0,
+              "aria-labelledby": `${descId}-n`,
+              "aria-describedby": support || m.unavailable ? descId : void 0,
+              ...roving.getItemProps(i),
+              onClick: () => onSelect(m.id),
+              className: utils.cn(
+                "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",
+                stateLayer,
+                "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary",
+                on ? "bg-md-secondary-container text-md-on-secondary-container" : "text-md-on-surface",
+                m.unavailable && "cursor-not-allowed"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: utils.cn(
+                      "relative grid size-10 shrink-0 place-items-center rounded-md-md text-base [&_svg]:size-[22px]",
+                      on ? "bg-md-primary text-md-on-primary" : "bg-md-surface-container-high text-md-on-surface-variant",
+                      m.unavailable && "opacity-[0.55]"
+                    ),
+                    children: m.icon
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${descId}-n`, className: utils.cn("text-sm font-medium leading-5", m.unavailable && "opacity-[0.55]"), children: m.name }),
+                  (support || m.unavailable) && /* @__PURE__ */ jsxRuntime.jsxs("span", { id: descId, className: "flex flex-col gap-0.5 text-xs leading-[18px]", children: [
+                    support && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(on ? "text-current" : "text-md-on-surface-variant", m.unavailable && "opacity-[0.55]"), children: support }),
+                    m.unavailable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-md-on-surface", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+                      m.unavailable
+                    ] })
+                  ] })
+                ] }),
+                on && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "relative size-[22px] shrink-0 text-md-on-secondary-container" })
+              ]
+            },
+            m.id
+          );
+        })
+      }
+    );
+  }
+);
+Md3ModesList.displayName = "Md3ModesList";
+var Md3ModesChip = React__namespace.forwardRef(
+  ({ mode, label = "Mode", open = false, onRemove, className, ...props }, ref) => {
+    const chevron = /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.ChevronDown,
+      {
+        "aria-hidden": "true",
+        className: utils.cn("relative -mr-1 size-[18px] transition-transform motion-reduce:transition-none", open && "rotate-180")
+      }
+    );
+    if (!mode) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        md3Chip.Md3Chip,
+        {
+          ref,
+          variant: "assist",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { "aria-hidden": "true" }),
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": modes.modesLabels.chip(label, null),
+          className: utils.cn("shrink-0 border-md-outline-variant font-normal [&_svg]:size-4", open && "border-md-primary", className),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            label,
+            chevron
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: utils.cn(
+          "inline-flex h-8 shrink-0 items-center rounded-md-sm bg-md-secondary-container text-md-on-secondary-container animate-nx-fade-in motion-reduce:animate-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            md3Chip.Md3Chip,
+            {
+              ref,
+              variant: "assist",
+              selected: true,
+              icon: mode.icon,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-label": modes.modesLabels.chip(label, mode),
+              className: utils.cn("bg-transparent pl-2 font-normal [&_svg]:size-4", onRemove ? "rounded-r-none pr-1.5" : "pr-2.5"),
+              ...props,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[18ch] truncate font-semibold", children: mode.shortName ?? mode.name }),
+                chevron
+              ] })
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            md3IconButton.Md3IconButton,
+            {
+              "aria-label": modes.modesLabels.remove(label, mode),
+              onClick: onRemove,
+              className: "h-8 w-7 rounded-none rounded-r-md-sm pr-1 text-current focus-visible:ring-offset-0 [&_svg]:size-3.5",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Md3ModesChip.displayName = "Md3ModesChip";
+var Md3ModesPicker = React__namespace.forwardRef(
+  ({
+    modes: modes$1,
+    value,
+    onSelect,
+    onClear,
+    onClose,
+    label = "Mode",
+    description = "How the agent approaches this request. Model and effort stay as they are.",
+    rejected,
+    showDescriptions = true,
+    autoFocus = false,
+    className,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const listRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      if (!autoFocus) return;
+      const el = listRef.current?.querySelector('[role="radio"][aria-checked="true"]') ?? listRef.current?.querySelector('[role="radio"]');
+      el?.focus();
+    }, [autoFocus]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      md3Menu.Md3Menu,
+      {
+        ref,
+        role: "dialog",
+        "aria-label": modes.modesLabels.picker(label),
+        className: utils.cn(
+          "min-w-[18rem] rounded-md-lg border border-md-outline-variant bg-md-surface p-2 shadow-md-2 animate-nx-fade-in motion-reduce:animate-none",
+          className
+        ),
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose?.();
+          }
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 px-3 pb-2 pt-2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium leading-6 text-md-on-surface", children: label }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-[18px] text-md-on-surface-variant", children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Md3ModesList,
+            {
+              ref: listRef,
+              modes: modes$1,
+              value,
+              onSelect,
+              label,
+              framed: false,
+              showDescriptions
+            }
+          ),
+          rejected && /* @__PURE__ */ jsxRuntime.jsxs(
+            "p",
+            {
+              role: "alert",
+              className: "mx-2 mb-1 mt-2 flex items-center gap-2 rounded-md-md bg-md-error-container px-3 py-2 text-[13px] leading-5 text-md-on-error-container",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-[18px] shrink-0" }),
+                modes.modesLabels.unavailable(rejected)
+              ]
+            }
+          ),
+          onClear && value != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: onClear, children: modes.modesLabels.clear }) })
+        ]
+      }
+    );
+  }
+);
+Md3ModesPicker.displayName = "Md3ModesPicker";
+var Md3ModesNote = React__namespace.forwardRef(
+  ({ onUndo, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex items-center gap-2 px-2 text-[13px] leading-5 text-md-on-surface-variant animate-nx-fade-in motion-reduce:animate-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { "aria-hidden": "true", className: "size-[18px] shrink-0 text-md-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children }),
+        onUndo && /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: onUndo, className: "h-8 px-2", children: modes.modesLabels.undo })
+      ]
+    }
+  )
+);
+Md3ModesNote.displayName = "Md3ModesNote";
+var Md3Modes = React__namespace.forwardRef(
+  ({
+    modes: modes$1,
+    value,
+    defaultValue,
+    onValueChange,
+    variant = "composer",
+    open,
+    defaultOpen,
+    onOpenChange,
+    clearable = true,
+    showDescriptions = true,
+    label = "Mode",
+    pickerDescription,
+    defaultNotice,
+    onUnavailable,
+    draft: draftProp,
+    defaultDraft = "",
+    onDraftChange,
+    onSubmit,
+    placeholder = "Ask Aria\u2026",
+    composerLeading,
+    composerActions,
+    sendLabel: _sendLabel,
+    className,
+    ...props
+  }, ref) => {
+    const s = modes.useModes({
+      modes: modes$1,
+      value,
+      defaultValue,
+      onValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      defaultNotice,
+      onUnavailable
+    });
+    const [internalDraft, setInternalDraft] = React__namespace.useState(defaultDraft);
+    const draft = draftProp ?? internalDraft;
+    const setDraft = (t) => {
+      if (draftProp === void 0) setInternalDraft(t);
+      onDraftChange?.(t);
+    };
+    const chipRef = React__namespace.useRef(null);
+    const chipBoxRef = React__namespace.useRef(null);
+    const pickerRef = React__namespace.useRef(null);
+    const [userOpened, setUserOpened] = React__namespace.useState(false);
+    modes.useModesDismiss([chipBoxRef, pickerRef], s.open, () => s.setOpen(false));
+    const [refocus, setRefocus] = React__namespace.useState(0);
+    React__namespace.useEffect(() => {
+      if (refocus) chipRef.current?.focus();
+    }, [refocus]);
+    const choose = (id) => {
+      const m = modes$1.find((x) => x.id === id);
+      const wasOpen = s.open;
+      s.select(id);
+      if (wasOpen && m && !m.unavailable) setRefocus((n) => n + 1);
+    };
+    const clearMode = () => {
+      s.clear();
+      setRefocus((n) => n + 1);
+    };
+    const undoChange = () => {
+      s.undo();
+      setRefocus((n) => n + 1);
+    };
+    const closePicker = () => {
+      s.setOpen(false);
+      setRefocus((n) => n + 1);
+    };
+    const notice = s.notice;
+    const rejected = notice?.type === "unavailable" ? modes$1.find((m) => m.id === notice.id) ?? null : null;
+    const changedTo = notice?.type === "changed" ? s.mode : null;
+    const note = changedTo ? /* @__PURE__ */ jsxRuntime.jsx(Md3ModesNote, { onUndo: undoChange, children: modes.modesLabels.changed(changedTo) }) : null;
+    const inlineAlert = rejected && !s.open ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        role: "alert",
+        className: "flex items-center gap-2 rounded-md-md bg-md-error-container px-3 py-2 text-[13px] leading-5 text-md-on-error-container",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-[18px] shrink-0" }),
+          modes.modesLabels.unavailable(rejected)
+        ]
+      }
+    ) : null;
+    const chip = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: chipBoxRef, className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Md3ModesChip,
+      {
+        ref: chipRef,
+        mode: s.mode,
+        label,
+        open: s.open,
+        onClick: () => {
+          setUserOpened(!s.open);
+          s.setOpen(!s.open);
+        },
+        onRemove: clearable ? clearMode : void 0
+      }
+    ) });
+    const picker = s.open ? /* @__PURE__ */ jsxRuntime.jsx(
+      Md3ModesPicker,
+      {
+        ref: pickerRef,
+        modes: modes$1,
+        value: s.value,
+        onSelect: choose,
+        onClear: clearable ? clearMode : void 0,
+        onClose: closePicker,
+        label,
+        description: pickerDescription,
+        rejected,
+        showDescriptions,
+        autoFocus: userOpened,
+        className: utils.cn(
+          "absolute z-50",
+          variant === "chip" ? "bottom-full left-0 mb-2 w-[22rem]" : "inset-x-0 bottom-full mb-2"
+        )
+      }
+    ) : null;
+    const live = /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: s.announcement });
+    if (variant === "segmented" || variant === "list") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("flex flex-col gap-2", variant === "segmented" && "items-start", className), ...props, children: [
+        variant === "segmented" ? /* @__PURE__ */ jsxRuntime.jsx(Md3ModesSegmented, { modes: modes$1, value: s.value, onSelect: s.select, label }) : /* @__PURE__ */ jsxRuntime.jsx(
+          Md3ModesList,
+          {
+            modes: modes$1,
+            value: s.value,
+            onSelect: s.select,
+            label,
+            showDescriptions,
+            className: "w-full max-w-[30rem]"
+          }
+        ),
+        inlineAlert,
+        note,
+        live
+      ] });
+    }
+    if (variant === "chip") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("relative inline-flex flex-col items-start gap-2", className), ...props, children: [
+        chip,
+        picker,
+        note,
+        live
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("relative flex w-full max-w-[38rem] flex-col gap-2", className), ...props, children: [
+      picker,
+      note,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        md3AgentComposer.Md3AgentComposer,
+        {
+          value: draft,
+          onValueChange: setDraft,
+          onSubmit: (text) => {
+            onSubmit?.(text, { mode: s.mode });
+            s.dismissNotice();
+            if (draftProp === void 0) setInternalDraft("");
+          },
+          placeholder,
+          leftActions: composerLeading,
+          rightActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            chip,
+            composerActions
+          ] }),
+          className: utils.cn(
+            "gap-2 rounded-md-xl border border-md-outline-variant bg-md-surface px-4 pb-2.5 pt-4 shadow-md-1"
+          )
+        }
+      ),
+      live
+    ] });
+  }
+);
+Md3Modes.displayName = "Md3Modes";
+
+exports.Md3Modes = Md3Modes;
+exports.Md3ModesChip = Md3ModesChip;
+exports.Md3ModesList = Md3ModesList;
+exports.Md3ModesNote = Md3ModesNote;
+exports.Md3ModesPicker = Md3ModesPicker;
+exports.Md3ModesSegmented = Md3ModesSegmented;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","modes","useModesRoving","jsx","Md3SegmentedButton","cn","Md3SegmentedButtonItem","modeSupportingText","jsxs","Info","Check","ChevronDown","Md3Chip","SlidersHorizontal","modesLabels","Md3IconButton","X","Md3Menu","Md3Button","RefreshCw","useModes","useModesDismiss","Md3AgentComposer","Fragment"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { Check, ChevronDown, Info, RefreshCw, SlidersHorizontal, X } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport {\n  modeSupportingText,\n  modesLabels,\n  useModes,\n  useModesDismiss,\n  useModesRoving,\n  type ModeOption,\n  type ModesChipProps,\n  type ModesListProps,\n  type ModesNoteProps,\n  type ModesNotice,\n  type ModesPickerProps,\n  type ModesProps,\n  type ModesSegmentedProps,\n  type ModesSubmitDetails,\n  type ModesVariant,\n} from \"@nucleux/modes\";\nimport { Md3AgentComposer } from \"@nucleux/md3-agent-composer\";\nimport { Md3Button } from \"@nucleux/md3-button\";\nimport { Md3Chip } from \"@nucleux/md3-chip\";\nimport { Md3IconButton } from \"@nucleux/md3-icon-button\";\nimport { Md3Menu } from \"@nucleux/md3-menu\";\nimport { Md3SegmentedButton, Md3SegmentedButtonItem } from \"@nucleux/md3-segmented-button\";\n\nexport type Md3ModeOption = ModeOption;\nexport type Md3ModesNotice = ModesNotice;\nexport type Md3ModesVariant = ModesVariant;\nexport type Md3ModesSubmitDetails = ModesSubmitDetails;\nexport type Md3ModesProps = ModesProps;\nexport type Md3ModesSegmentedProps = ModesSegmentedProps;\nexport type Md3ModesListProps = ModesListProps;\nexport type Md3ModesChipProps = ModesChipProps;\nexport type Md3ModesPickerProps = ModesPickerProps;\nexport type Md3ModesNoteProps = ModesNoteProps;\n\nconst stateLayer =\n  \"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\";\n\n/**\n * Material 3 segmented control for Modes: an outlined track of segments, the\n * active one in secondary-container with a check. Same radio group and keyboard\n * model as the shadcn `ModesSegmented` (Arrow keys move, Space/Enter choose).\n */\nexport const Md3ModesSegmented = React.forwardRef<HTMLDivElement, Md3ModesSegmentedProps>(\n  ({ modes, value, onSelect, label = \"Mode\", className, ...props }, ref) => {\n    const roving = useModesRoving(modes, value);\n    return (\n      <Md3SegmentedButton\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={label}\n        value={value ?? \"\"}\n        className={cn(\"divide-md-outline-variant border-md-outline-variant\", className)}\n        {...props}\n      >\n        {modes.map((m, i) => (\n          <Md3SegmentedButtonItem\n            key={m.id}\n            value={m.id}\n            icon={m.icon}\n            role=\"radio\"\n            aria-checked={m.id === value}\n            aria-pressed={undefined}\n            aria-disabled={m.unavailable ? true : undefined}\n            title={m.unavailable}\n            {...roving.getItemProps(i)}\n            onClick={() => onSelect(m.id)}\n            className={cn(\"min-w-[5.5rem] motion-reduce:transition-none\", m.unavailable && \"cursor-not-allowed opacity-[0.38]\")}\n          >\n            {m.shortName ?? m.name}\n          </Md3SegmentedButtonItem>\n        ))}\n      </Md3SegmentedButton>\n    );\n  },\n);\nMd3ModesSegmented.displayName = \"Md3ModesSegmented\";\n\n/**\n * Material 3 mode rows: a 40dp icon tile, the name and one line on what\n * changes; the active row in secondary-container with a primary tile and a\n * trailing check; an unavailable row dimmed with its reason. Same radio group\n * and keyboard model as the shadcn `ModesList`.\n */\nexport const Md3ModesList = React.forwardRef<HTMLDivElement, Md3ModesListProps>(\n  (\n    { modes, value, onSelect, label = \"Mode\", showDescriptions = true, framed = true, className, ...props },\n    ref,\n  ) => {\n    const roving = useModesRoving(modes, value);\n    const baseId = React.useId();\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={label}\n        className={cn(\n          \"flex flex-col gap-0.5\",\n          framed && \"rounded-md-lg border border-md-outline-variant bg-md-surface p-2\",\n          className,\n        )}\n        {...props}\n      >\n        {modes.map((m, i) => {\n          const on = m.id === value;\n          const support = modeSupportingText(m, showDescriptions);\n          const descId = `${baseId}-${i}`;\n          return (\n            <button\n              key={m.id}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={on}\n              aria-disabled={m.unavailable ? true : undefined}\n              aria-labelledby={`${descId}-n`}\n              aria-describedby={support || m.unavailable ? descId : undefined}\n              {...roving.getItemProps(i)}\n              onClick={() => onSelect(m.id)}\n              className={cn(\n                \"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\",\n                stateLayer,\n                \"outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary\",\n                on ? \"bg-md-secondary-container text-md-on-secondary-container\" : \"text-md-on-surface\",\n                m.unavailable && \"cursor-not-allowed\",\n              )}\n            >\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  \"relative grid size-10 shrink-0 place-items-center rounded-md-md text-base [&_svg]:size-[22px]\",\n                  on ? \"bg-md-primary text-md-on-primary\" : \"bg-md-surface-container-high text-md-on-surface-variant\",\n                  m.unavailable && \"opacity-[0.55]\",\n                )}\n              >\n                {m.icon}\n              </span>\n              <span className=\"relative flex min-w-0 flex-1 flex-col gap-0.5\">\n                <span id={`${descId}-n`} className={cn(\"text-sm font-medium leading-5\", m.unavailable && \"opacity-[0.55]\")}>\n                  {m.name}\n                </span>\n                {(support || m.unavailable) && (\n                  <span id={descId} className=\"flex flex-col gap-0.5 text-xs leading-[18px]\">\n                    {support && (\n                      <span className={cn(on ? \"text-current\" : \"text-md-on-surface-variant\", m.unavailable && \"opacity-[0.55]\")}>\n                        {support}\n                      </span>\n                    )}\n                    {m.unavailable && (\n                      <span className=\"inline-flex items-center gap-1 text-md-on-surface\">\n                        <Info aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n                        {m.unavailable}\n                      </span>\n                    )}\n                  </span>\n                )}\n              </span>\n              {on && <Check aria-hidden=\"true\" className=\"relative size-[22px] shrink-0 text-md-on-secondary-container\" />}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\nMd3ModesList.displayName = \"Md3ModesList\";\n\n/**\n * The Material 3 Mode chip in the composer's settings row. Unset it is an\n * outlined assist chip (\"Mode ▾\"); set it becomes a tonal chip reading\n * \"Mode **Plan**\" with the mode's icon, a chevron that turns when open, and a\n * × that clears it. Same accessible names as the shadcn `ModesChip`.\n */\nexport const Md3ModesChip = React.forwardRef<HTMLButtonElement, Md3ModesChipProps>(\n  ({ mode, label = \"Mode\", open = false, onRemove, className, ...props }, ref) => {\n    const chevron = (\n      <ChevronDown\n        aria-hidden=\"true\"\n        className={cn(\"relative -mr-1 size-[18px] transition-transform motion-reduce:transition-none\", open && \"rotate-180\")}\n      />\n    );\n    if (!mode) {\n      return (\n        <Md3Chip\n          ref={ref}\n          variant=\"assist\"\n          icon={<SlidersHorizontal aria-hidden=\"true\" />}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-label={modesLabels.chip(label, null)}\n          className={cn(\"shrink-0 border-md-outline-variant font-normal [&_svg]:size-4\", open && \"border-md-primary\", className)}\n          {...props}\n        >\n          <span className=\"inline-flex items-center gap-1.5\">\n            {label}\n            {chevron}\n          </span>\n        </Md3Chip>\n      );\n    }\n    return (\n      <span\n        className={cn(\n          \"inline-flex h-8 shrink-0 items-center rounded-md-sm bg-md-secondary-container text-md-on-secondary-container animate-nx-fade-in motion-reduce:animate-none\",\n          className,\n        )}\n      >\n        <Md3Chip\n          ref={ref}\n          variant=\"assist\"\n          selected\n          icon={mode.icon}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-label={modesLabels.chip(label, mode)}\n          className={cn(\"bg-transparent pl-2 font-normal [&_svg]:size-4\", onRemove ? \"rounded-r-none pr-1.5\" : \"pr-2.5\")}\n          {...props}\n        >\n          <span className=\"inline-flex items-center gap-1.5\">\n            <span>{label}</span>\n            <span className=\"max-w-[18ch] truncate font-semibold\">{mode.shortName ?? mode.name}</span>\n            {chevron}\n          </span>\n        </Md3Chip>\n        {onRemove && (\n          <Md3IconButton\n            aria-label={modesLabels.remove(label, mode)}\n            onClick={onRemove}\n            className=\"h-8 w-7 rounded-none rounded-r-md-sm pr-1 text-current focus-visible:ring-offset-0 [&_svg]:size-3.5\"\n          >\n            <X aria-hidden=\"true\" />\n          </Md3IconButton>\n        )}\n      </span>\n    );\n  },\n);\nMd3ModesChip.displayName = \"Md3ModesChip\";\n\n/**\n * The Material 3 Mode picker: a menu surface with \"Mode\" and one line on what\n * a mode is, the mode rows, an error-container alert when an unavailable mode\n * was chosen, and a \"No mode\" text button. A dialog; Escape closes it.\n */\nexport const Md3ModesPicker = React.forwardRef<HTMLDivElement, Md3ModesPickerProps>(\n  (\n    {\n      modes,\n      value,\n      onSelect,\n      onClear,\n      onClose,\n      label = \"Mode\",\n      description = \"How the agent approaches this request. Model and effort stay as they are.\",\n      rejected,\n      showDescriptions = true,\n      autoFocus = false,\n      className,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const listRef = React.useRef<HTMLDivElement>(null);\n    React.useEffect(() => {\n      if (!autoFocus) return;\n      const el =\n        listRef.current?.querySelector<HTMLElement>('[role=\"radio\"][aria-checked=\"true\"]') ??\n        listRef.current?.querySelector<HTMLElement>('[role=\"radio\"]');\n      el?.focus();\n    }, [autoFocus]);\n    return (\n      <Md3Menu\n        ref={ref}\n        role=\"dialog\"\n        aria-label={modesLabels.picker(label)}\n        className={cn(\n          \"min-w-[18rem] rounded-md-lg border border-md-outline-variant bg-md-surface p-2 shadow-md-2 animate-nx-fade-in motion-reduce:animate-none\",\n          className,\n        )}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (e.key === \"Escape\") {\n            e.preventDefault();\n            e.stopPropagation();\n            onClose?.();\n          }\n        }}\n        {...props}\n      >\n        <div className=\"flex flex-col gap-0.5 px-3 pb-2 pt-2.5\">\n          <p className=\"text-base font-medium leading-6 text-md-on-surface\">{label}</p>\n          {description != null && <p className=\"text-xs leading-[18px] text-md-on-surface-variant\">{description}</p>}\n        </div>\n        <Md3ModesList\n          ref={listRef}\n          modes={modes}\n          value={value}\n          onSelect={onSelect}\n          label={label}\n          framed={false}\n          showDescriptions={showDescriptions}\n        />\n        {rejected && (\n          <p\n            role=\"alert\"\n            className=\"mx-2 mb-1 mt-2 flex items-center gap-2 rounded-md-md bg-md-error-container px-3 py-2 text-[13px] leading-5 text-md-on-error-container\"\n          >\n            <Info aria-hidden=\"true\" className=\"size-[18px] shrink-0\" />\n            {modesLabels.unavailable(rejected)}\n          </p>\n        )}\n        {onClear && value != null && (\n          <div className=\"mx-1 mt-1.5\">\n            <Md3Button variant=\"text\" onClick={onClear}>\n              {modesLabels.clear}\n            </Md3Button>\n          </div>\n        )}\n      </Md3Menu>\n    );\n  },\n);\nMd3ModesPicker.displayName = \"Md3ModesPicker\";\n\n/** The one quiet line after a change, with a primary sync icon and an Undo text button. */\nexport const Md3ModesNote = React.forwardRef<HTMLDivElement, Md3ModesNoteProps>(\n  ({ onUndo, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-2 px-2 text-[13px] leading-5 text-md-on-surface-variant animate-nx-fade-in motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    >\n      <RefreshCw aria-hidden=\"true\" className=\"size-[18px] shrink-0 text-md-primary\" />\n      <span className=\"min-w-0 flex-1\">{children}</span>\n      {onUndo && (\n        <Md3Button variant=\"text\" onClick={onUndo} className=\"h-8 px-2\">\n          {modesLabels.undo}\n        </Md3Button>\n      )}\n    </div>\n  ),\n);\nMd3ModesNote.displayName = \"Md3ModesNote\";\n\n/**\n * Material 3 Modes: choose how the agent approaches a request — Brainstorm,\n * Draft, Review, Plan — separate from which model answers. A Mode chip in the\n * composer's settings row opens a short list where each mode says what changes\n * and an unavailable one says why; the chip then reads \"Mode Plan\" with a way\n * to change or clear it, and a change adds one quiet line with Undo. Same API,\n * states, keyboard model and accessible names as `Modes` from\n * `@nucleux/modes`; choosing a mode never touches the text, and nothing is\n * sent until the person sends.\n */\nexport const Md3Modes = React.forwardRef<HTMLDivElement, Md3ModesProps>(\n  (\n    {\n      modes,\n      value,\n      defaultValue,\n      onValueChange,\n      variant = \"composer\",\n      open,\n      defaultOpen,\n      onOpenChange,\n      clearable = true,\n      showDescriptions = true,\n      label = \"Mode\",\n      pickerDescription,\n      defaultNotice,\n      onUnavailable,\n      draft: draftProp,\n      defaultDraft = \"\",\n      onDraftChange,\n      onSubmit,\n      placeholder = \"Ask Aria…\",\n      composerLeading,\n      composerActions,\n      sendLabel: _sendLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    void _sendLabel; // Md3AgentComposer names its send button \"Send\".\n    const s = useModes({\n      modes,\n      value,\n      defaultValue,\n      onValueChange,\n      open,\n      defaultOpen,\n      onOpenChange,\n      defaultNotice,\n      onUnavailable,\n    });\n    const [internalDraft, setInternalDraft] = React.useState(defaultDraft);\n    const draft = draftProp ?? internalDraft;\n    const setDraft = (t: string) => {\n      if (draftProp === undefined) setInternalDraft(t);\n      onDraftChange?.(t);\n    };\n\n    const chipRef = React.useRef<HTMLButtonElement>(null);\n    const chipBoxRef = React.useRef<HTMLDivElement>(null);\n    const pickerRef = React.useRef<HTMLDivElement>(null);\n    const [userOpened, setUserOpened] = React.useState(false);\n    useModesDismiss([chipBoxRef, pickerRef], s.open, () => s.setOpen(false));\n\n    // Return focus to the chip after it re-renders (its element can change when a mode is set or cleared).\n    const [refocus, setRefocus] = React.useState(0);\n    React.useEffect(() => {\n      if (refocus) chipRef.current?.focus();\n    }, [refocus]);\n    const choose = (id: string) => {\n      const m = modes.find((x) => x.id === id);\n      const wasOpen = s.open;\n      s.select(id);\n      if (wasOpen && m && !m.unavailable) setRefocus((n) => n + 1);\n    };\n    const clearMode = () => {\n      s.clear();\n      setRefocus((n) => n + 1);\n    };\n    const undoChange = () => {\n      s.undo();\n      setRefocus((n) => n + 1);\n    };\n    const closePicker = () => {\n      s.setOpen(false);\n      setRefocus((n) => n + 1);\n    };\n    const notice = s.notice;\n    const rejected = notice?.type === \"unavailable\" ? (modes.find((m) => m.id === notice.id) ?? null) : null;\n    const changedTo = notice?.type === \"changed\" ? s.mode : null;\n\n    const note = changedTo ? <Md3ModesNote onUndo={undoChange}>{modesLabels.changed(changedTo)}</Md3ModesNote> : null;\n    const inlineAlert =\n      rejected && !s.open ? (\n        <p\n          role=\"alert\"\n          className=\"flex items-center gap-2 rounded-md-md bg-md-error-container px-3 py-2 text-[13px] leading-5 text-md-on-error-container\"\n        >\n          <Info aria-hidden=\"true\" className=\"size-[18px] shrink-0\" />\n          {modesLabels.unavailable(rejected)}\n        </p>\n      ) : null;\n\n    const chip = (\n      <div ref={chipBoxRef} className=\"inline-flex\">\n        <Md3ModesChip\n          ref={chipRef}\n          mode={s.mode}\n          label={label}\n          open={s.open}\n          onClick={() => {\n            setUserOpened(!s.open);\n            s.setOpen(!s.open);\n          }}\n          onRemove={clearable ? clearMode : undefined}\n        />\n      </div>\n    );\n    const picker = s.open ? (\n      <Md3ModesPicker\n        ref={pickerRef}\n        modes={modes}\n        value={s.value}\n        onSelect={choose}\n        onClear={clearable ? clearMode : undefined}\n        onClose={closePicker}\n        label={label}\n        description={pickerDescription}\n        rejected={rejected}\n        showDescriptions={showDescriptions}\n        autoFocus={userOpened}\n        className={cn(\n          \"absolute z-50\",\n          variant === \"chip\" ? \"bottom-full left-0 mb-2 w-[22rem]\" : \"inset-x-0 bottom-full mb-2\",\n        )}\n      />\n    ) : null;\n\n    const live = (\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {s.announcement}\n      </span>\n    );\n\n    if (variant === \"segmented\" || variant === \"list\") {\n      return (\n        <div ref={ref} className={cn(\"flex flex-col gap-2\", variant === \"segmented\" && \"items-start\", className)} {...props}>\n          {variant === \"segmented\" ? (\n            <Md3ModesSegmented modes={modes} value={s.value} onSelect={s.select} label={label} />\n          ) : (\n            <Md3ModesList\n              modes={modes}\n              value={s.value}\n              onSelect={s.select}\n              label={label}\n              showDescriptions={showDescriptions}\n              className=\"w-full max-w-[30rem]\"\n            />\n          )}\n          {inlineAlert}\n          {note}\n          {live}\n        </div>\n      );\n    }\n\n    if (variant === \"chip\") {\n      return (\n        <div ref={ref} className={cn(\"relative inline-flex flex-col items-start gap-2\", className)} {...props}>\n          {chip}\n          {picker}\n          {note}\n          {live}\n        </div>\n      );\n    }\n\n    return (\n      <div ref={ref} className={cn(\"relative flex w-full max-w-[38rem] flex-col gap-2\", className)} {...props}>\n        {picker}\n        {note}\n        <Md3AgentComposer\n          value={draft}\n          onValueChange={setDraft}\n          onSubmit={(text) => {\n            onSubmit?.(text, { mode: s.mode });\n            s.dismissNotice();\n            if (draftProp === undefined) setInternalDraft(\"\");\n          }}\n          placeholder={placeholder}\n          leftActions={composerLeading}\n          rightActions={\n            <>\n              {chip}\n              {composerActions}\n            </>\n          }\n          className={cn(\n            \"gap-2 rounded-md-xl border border-md-outline-variant bg-md-surface px-4 pb-2.5 pt-4 shadow-md-1\",\n          )}\n        />\n        {live}\n      </div>\n    );\n  },\n);\nMd3Modes.displayName = \"Md3Modes\";\n"]}