@nucleux/md3-personality 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,38 @@
-# Temporary Holding Version
+# @nucleux/md3-personality
 
-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 Personality — choose how the agent writes while the trust language stays fixed — 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).
+
+The Material 3 twin of [`@nucleux/personality`](https://www.npmjs.com/package/@nucleux/personality): it shares that package's API — the props types are re-exported from it — so you switch families by changing only the import. Only the look differs: Material 3 colour roles, shape, state layers and motion (with reduced-motion handling).
+
+## Exports
+
+- **`Md3Personality`** — the tone-matrix: a radio group of M3 filter chips with roving focus; `options`, `value`, `defaultValue`, `onValueChange`, `label`
+- **`Md3PersonalityVoiceCard`** — one sample utterance plus voice tags
+- **`Md3PersonalitySampleDialog`** — a short exchange; `fixed` lines carry a lock and "Same in every personality"
+- `defaultTones`, types `ToneOption`, `PersonalitySampleTurn` (shared with `@nucleux/personality`)
+- Types: `Md3PersonalityProps`, `Md3PersonalityVoiceCardProps`, `Md3PersonalitySampleDialogProps`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-personality @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3Personality } from "@nucleux/md3-personality";
+
+<Md3Personality defaultValue="professional" onValueChange={setTone} />
+```
+
+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,178 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var personality = require('@nucleux/personality');
+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 = "relative overflow-hidden 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 Md3Personality = React__namespace.forwardRef(
+  ({ options = personality.defaultTones, value, defaultValue, onValueChange, label = "Tone", className, ...props }, ref) => {
+    const [internal, setInternal] = React__namespace.useState(defaultValue);
+    const current = value !== void 0 ? value : internal;
+    const refs = React__namespace.useRef([]);
+    const descId = React__namespace.useId();
+    const select = (next) => {
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    const selectedIndex = options.findIndex((o) => o.value === current);
+    const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+    const onKeyDown = (e, index) => {
+      const last = options.length - 1;
+      let next = null;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") next = index === last ? 0 : index + 1;
+      else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = index === 0 ? last : index - 1;
+      else if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = last;
+      if (next === null) return;
+      e.preventDefault();
+      refs.current[next]?.focus();
+      select(options[next].value);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-variant": "tone-matrix", className: utils.cn("flex flex-col gap-2", className), ...props, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium tracking-[0.5px] text-md-on-surface-variant", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": typeof label === "string" ? label : "Tone",
+          className: "flex flex-wrap gap-2",
+          children: options.map((option, index) => {
+            const active = current === option.value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                ref: (el) => {
+                  refs.current[index] = el;
+                },
+                type: "button",
+                role: "radio",
+                "aria-checked": active,
+                "aria-describedby": option.description ? `${descId}-${index}` : void 0,
+                tabIndex: index === tabStop ? 0 : -1,
+                onClick: () => select(option.value),
+                onKeyDown: (e) => onKeyDown(e, index),
+                className: utils.cn(
+                  "inline-flex h-8 items-center gap-2 rounded-md-sm border px-3 text-sm font-medium tracking-[0.1px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-md-primary motion-reduce:transition-none [&_svg]:relative [&_svg]:size-[18px]",
+                  stateLayer,
+                  active ? "border-transparent bg-md-secondary-container pl-2 text-md-on-secondary-container" : "border-md-outline bg-transparent text-md-on-surface-variant"
+                ),
+                children: [
+                  active && option.icon == null && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true" }),
+                  option.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: option.label }),
+                  option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${descId}-${index}`, className: "sr-only", children: option.description })
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      )
+    ] });
+  }
+);
+Md3Personality.displayName = "Md3Personality";
+var Md3PersonalityVoiceCard = React__namespace.forwardRef(
+  ({ quote, tags = [], label = "Voice", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "figure",
+    {
+      ref,
+      "aria-label": label,
+      "data-variant": "voice-card",
+      className: utils.cn(
+        "m-0 rounded-md-lg border border-md-outline-variant bg-md-surface p-5 text-md-on-surface",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "m-0 rounded-md-xs border-l-[3px] border-md-primary bg-md-surface-container px-3.5 py-3 text-sm leading-5 tracking-[0.25px] text-md-on-surface", children: [
+          "\u201C",
+          quote,
+          "\u201D"
+        ] }),
+        tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "mt-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Voice: " }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-wrap gap-2 p-0", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              className: "inline-flex h-6 items-center rounded-md-sm border border-md-outline-variant px-2 text-xs font-medium tracking-[0.5px] text-md-on-surface-variant",
+              children: tag
+            },
+            tag
+          )) })
+        ] })
+      ]
+    }
+  )
+);
+Md3PersonalityVoiceCard.displayName = "Md3PersonalityVoiceCard";
+var Md3PersonalitySampleDialog = React__namespace.forwardRef(
+  ({ turns, agentName = "Assistant", label = "Sample dialog", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": label,
+      "data-variant": "sample-dialog",
+      className: utils.cn("flex flex-col gap-2", className),
+      ...props,
+      children: turns.map((turn, i) => {
+        const user = turn.from === "user";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "max-w-[85%] px-3.5 py-2.5 text-xs leading-[18px] tracking-[0.25px]",
+              user ? "self-end rounded-md-lg rounded-br-md-xs bg-md-surface-container-high text-md-on-surface" : "self-start rounded-md-lg rounded-bl-md-xs bg-md-primary-container text-md-on-primary-container"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: user ? "You said: " : `${agentName} said: ` }),
+              turn.text,
+              turn.fixed && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-1 flex items-center gap-1 text-[11px] font-medium tracking-[0.5px] opacity-80", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { "aria-hidden": "true", className: "size-3" }),
+                "Same in every personality"
+              ] })
+            ]
+          },
+          i
+        );
+      })
+    }
+  )
+);
+Md3PersonalitySampleDialog.displayName = "Md3PersonalitySampleDialog";
+
+Object.defineProperty(exports, "defaultTones", {
+  enumerable: true,
+  get: function () { return personality.defaultTones; }
+});
+exports.Md3Personality = Md3Personality;
+exports.Md3PersonalitySampleDialog = Md3PersonalitySampleDialog;
+exports.Md3PersonalityVoiceCard = Md3PersonalityVoiceCard;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","defaultTones","jsxs","cn","jsx","Check","Lock"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { Check, Lock } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport { defaultTones } from \"@nucleux/personality\";\nimport type {\n  PersonalityProps,\n  PersonalitySampleDialogProps,\n  PersonalityVoiceCardProps,\n} from \"@nucleux/personality\";\n\nexport type { ToneOption, PersonalitySampleTurn } from \"@nucleux/personality\";\nexport { defaultTones } from \"@nucleux/personality\";\nexport type Md3PersonalityProps = PersonalityProps;\nexport type Md3PersonalityVoiceCardProps = PersonalityVoiceCardProps;\nexport type Md3PersonalitySampleDialogProps = PersonalitySampleDialogProps;\n\nconst stateLayer =\n  \"relative overflow-hidden 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 * The `tone-matrix` in Material 3 — the twin of `Personality`, with the same\n * API and keyboard model. A small set of writing styles as M3 filter chips:\n * the selected one takes the secondary-container role and a leading check;\n * hover, focus and press are the chip's 8% / 12% state layer. It is a radio\n * group with roving focus (arrow keys move and select, Home / End jump).\n * Tone changes how the agent writes, never what it may do — keep\n * permission, caveat and refusal strings outside it.\n */\nexport const Md3Personality = React.forwardRef<HTMLDivElement, Md3PersonalityProps>(\n  ({ options = defaultTones, value, defaultValue, onValueChange, label = \"Tone\", className, ...props }, ref) => {\n    // Selection and roving-focus logic copied from @nucleux/personality (internal there).\n    const [internal, setInternal] = React.useState<string | undefined>(defaultValue);\n    const current = value !== undefined ? value : internal;\n    const refs = React.useRef<(HTMLButtonElement | null)[]>([]);\n    const descId = React.useId();\n    const select = (next: string) => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    };\n    const selectedIndex = options.findIndex((o) => o.value === current);\n    const tabStop = selectedIndex >= 0 ? selectedIndex : 0;\n\n    const onKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const last = options.length - 1;\n      let next: number | null = null;\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = index === last ? 0 : index + 1;\n      else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = index === 0 ? last : index - 1;\n      else if (e.key === \"Home\") next = 0;\n      else if (e.key === \"End\") next = last;\n      if (next === null) return;\n      e.preventDefault();\n      refs.current[next]?.focus();\n      select(options[next]!.value);\n    };\n\n    return (\n      <div ref={ref} data-variant=\"tone-matrix\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n        {label && (\n          <span className=\"text-xs font-medium tracking-[0.5px] text-md-on-surface-variant\">{label}</span>\n        )}\n        <div\n          role=\"radiogroup\"\n          aria-label={typeof label === \"string\" ? label : \"Tone\"}\n          className=\"flex flex-wrap gap-2\"\n        >\n          {options.map((option, index) => {\n            const active = current === option.value;\n            return (\n              <button\n                key={option.value}\n                ref={(el) => {\n                  refs.current[index] = el;\n                }}\n                type=\"button\"\n                role=\"radio\"\n                aria-checked={active}\n                aria-describedby={option.description ? `${descId}-${index}` : undefined}\n                tabIndex={index === tabStop ? 0 : -1}\n                onClick={() => select(option.value)}\n                onKeyDown={(e) => onKeyDown(e, index)}\n                className={cn(\n                  \"inline-flex h-8 items-center gap-2 rounded-md-sm border px-3 text-sm font-medium tracking-[0.1px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-md-primary motion-reduce:transition-none [&_svg]:relative [&_svg]:size-[18px]\",\n                  stateLayer,\n                  active\n                    ? \"border-transparent bg-md-secondary-container pl-2 text-md-on-secondary-container\"\n                    : \"border-md-outline bg-transparent text-md-on-surface-variant\",\n                )}\n              >\n                {active && option.icon == null && <Check aria-hidden=\"true\" />}\n                {option.icon}\n                <span className=\"relative\">{option.label}</span>\n                {option.description && (\n                  <span id={`${descId}-${index}`} className=\"sr-only\">\n                    {option.description}\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\nMd3Personality.displayName = \"Md3Personality\";\n\n/**\n * The `voice-card` in Material 3 — the twin of `PersonalityVoiceCard`. An\n * outlined card whose sample utterance sits on a surface-container ground\n * behind a primary rule (the voice, written down), with the voice tags as\n * outlined chips beneath it.\n */\nexport const Md3PersonalityVoiceCard = React.forwardRef<HTMLElement, Md3PersonalityVoiceCardProps>(\n  ({ quote, tags = [], label = \"Voice\", className, ...props }, ref) => (\n    <figure\n      ref={ref}\n      aria-label={label}\n      data-variant=\"voice-card\"\n      className={cn(\n        \"m-0 rounded-md-lg border border-md-outline-variant bg-md-surface p-5 text-md-on-surface\",\n        className,\n      )}\n      {...props}\n    >\n      <blockquote className=\"m-0 rounded-md-xs border-l-[3px] border-md-primary bg-md-surface-container px-3.5 py-3 text-sm leading-5 tracking-[0.25px] text-md-on-surface\">\n        “{quote}”\n      </blockquote>\n      {tags.length > 0 && (\n        <figcaption className=\"mt-3\">\n          <span className=\"sr-only\">Voice: </span>\n          <ul className=\"m-0 flex list-none flex-wrap gap-2 p-0\">\n            {tags.map((tag) => (\n              <li\n                key={tag}\n                className=\"inline-flex h-6 items-center rounded-md-sm border border-md-outline-variant px-2 text-xs font-medium tracking-[0.5px] text-md-on-surface-variant\"\n              >\n                {tag}\n              </li>\n            ))}\n          </ul>\n        </figcaption>\n      )}\n    </figure>\n  ),\n);\nMd3PersonalityVoiceCard.displayName = \"Md3PersonalityVoiceCard\";\n\n/**\n * The `sample-dialog` in Material 3 — the twin of `PersonalitySampleDialog`.\n * Two authors, two grounds: the person's turns on surface-container-high,\n * the agent's on its primary-container ground, each with the M3 bubble\n * shape (a small corner toward its author). Lines marked `fixed` carry a\n * lock and \"Same in every personality\", so the contract is visible.\n */\nexport const Md3PersonalitySampleDialog = React.forwardRef<HTMLDivElement, Md3PersonalitySampleDialogProps>(\n  ({ turns, agentName = \"Assistant\", label = \"Sample dialog\", className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={label}\n      data-variant=\"sample-dialog\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      {turns.map((turn, i) => {\n        const user = turn.from === \"user\";\n        return (\n          <div\n            key={i}\n            className={cn(\n              \"max-w-[85%] px-3.5 py-2.5 text-xs leading-[18px] tracking-[0.25px]\",\n              user\n                ? \"self-end rounded-md-lg rounded-br-md-xs bg-md-surface-container-high text-md-on-surface\"\n                : \"self-start rounded-md-lg rounded-bl-md-xs bg-md-primary-container text-md-on-primary-container\",\n            )}\n          >\n            <span className=\"sr-only\">{user ? \"You said: \" : `${agentName} said: `}</span>\n            {turn.text}\n            {turn.fixed && (\n              <span className=\"mt-1 flex items-center gap-1 text-[11px] font-medium tracking-[0.5px] opacity-80\">\n                <Lock aria-hidden=\"true\" className=\"size-3\" />\n                Same in every personality\n              </span>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  ),\n);\nMd3PersonalitySampleDialog.displayName = \"Md3PersonalitySampleDialog\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PersonalityProps, PersonalitySampleDialogProps, PersonalityVoiceCardProps } from '@nucleux/personality';
+export { PersonalitySampleTurn, ToneOption, defaultTones } from '@nucleux/personality';
+
+type Md3PersonalityProps = PersonalityProps;
+type Md3PersonalityVoiceCardProps = PersonalityVoiceCardProps;
+type Md3PersonalitySampleDialogProps = PersonalitySampleDialogProps;
+/**
+ * The `tone-matrix` in Material 3 — the twin of `Personality`, with the same
+ * API and keyboard model. A small set of writing styles as M3 filter chips:
+ * the selected one takes the secondary-container role and a leading check;
+ * hover, focus and press are the chip's 8% / 12% state layer. It is a radio
+ * group with roving focus (arrow keys move and select, Home / End jump).
+ * Tone changes how the agent writes, never what it may do — keep
+ * permission, caveat and refusal strings outside it.
+ */
+declare const Md3Personality: React.ForwardRefExoticComponent<PersonalityProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The `voice-card` in Material 3 — the twin of `PersonalityVoiceCard`. An
+ * outlined card whose sample utterance sits on a surface-container ground
+ * behind a primary rule (the voice, written down), with the voice tags as
+ * outlined chips beneath it.
+ */
+declare const Md3PersonalityVoiceCard: React.ForwardRefExoticComponent<PersonalityVoiceCardProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The `sample-dialog` in Material 3 — the twin of `PersonalitySampleDialog`.
+ * Two authors, two grounds: the person's turns on surface-container-high,
+ * the agent's on its primary-container ground, each with the M3 bubble
+ * shape (a small corner toward its author). Lines marked `fixed` carry a
+ * lock and "Same in every personality", so the contract is visible.
+ */
+declare const Md3PersonalitySampleDialog: React.ForwardRefExoticComponent<PersonalitySampleDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Md3Personality, type Md3PersonalityProps, Md3PersonalitySampleDialog, type Md3PersonalitySampleDialogProps, Md3PersonalityVoiceCard, type Md3PersonalityVoiceCardProps };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PersonalityProps, PersonalitySampleDialogProps, PersonalityVoiceCardProps } from '@nucleux/personality';
+export { PersonalitySampleTurn, ToneOption, defaultTones } from '@nucleux/personality';
+
+type Md3PersonalityProps = PersonalityProps;
+type Md3PersonalityVoiceCardProps = PersonalityVoiceCardProps;
+type Md3PersonalitySampleDialogProps = PersonalitySampleDialogProps;
+/**
+ * The `tone-matrix` in Material 3 — the twin of `Personality`, with the same
+ * API and keyboard model. A small set of writing styles as M3 filter chips:
+ * the selected one takes the secondary-container role and a leading check;
+ * hover, focus and press are the chip's 8% / 12% state layer. It is a radio
+ * group with roving focus (arrow keys move and select, Home / End jump).
+ * Tone changes how the agent writes, never what it may do — keep
+ * permission, caveat and refusal strings outside it.
+ */
+declare const Md3Personality: React.ForwardRefExoticComponent<PersonalityProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The `voice-card` in Material 3 — the twin of `PersonalityVoiceCard`. An
+ * outlined card whose sample utterance sits on a surface-container ground
+ * behind a primary rule (the voice, written down), with the voice tags as
+ * outlined chips beneath it.
+ */
+declare const Md3PersonalityVoiceCard: React.ForwardRefExoticComponent<PersonalityVoiceCardProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The `sample-dialog` in Material 3 — the twin of `PersonalitySampleDialog`.
+ * Two authors, two grounds: the person's turns on surface-container-high,
+ * the agent's on its primary-container ground, each with the M3 bubble
+ * shape (a small corner toward its author). Lines marked `fixed` carry a
+ * lock and "Same in every personality", so the contract is visible.
+ */
+declare const Md3PersonalitySampleDialog: React.ForwardRefExoticComponent<PersonalitySampleDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Md3Personality, type Md3PersonalityProps, Md3PersonalitySampleDialog, type Md3PersonalitySampleDialogProps, Md3PersonalityVoiceCard, type Md3PersonalityVoiceCardProps };

package/dist/index.js

@@ -0,0 +1,151 @@
+"use client";
+import * as React from 'react';
+import { Check, Lock } from 'lucide-react';
+import { cn } from '@nucleux/utils';
+import { defaultTones } from '@nucleux/personality';
+export { defaultTones } from '@nucleux/personality';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var stateLayer = "relative overflow-hidden 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 Md3Personality = React.forwardRef(
+  ({ options = defaultTones, value, defaultValue, onValueChange, label = "Tone", className, ...props }, ref) => {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value !== void 0 ? value : internal;
+    const refs = React.useRef([]);
+    const descId = React.useId();
+    const select = (next) => {
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    const selectedIndex = options.findIndex((o) => o.value === current);
+    const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+    const onKeyDown = (e, index) => {
+      const last = options.length - 1;
+      let next = null;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") next = index === last ? 0 : index + 1;
+      else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = index === 0 ? last : index - 1;
+      else if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = last;
+      if (next === null) return;
+      e.preventDefault();
+      refs.current[next]?.focus();
+      select(options[next].value);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, "data-variant": "tone-matrix", className: cn("flex flex-col gap-2", className), ...props, children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-[0.5px] text-md-on-surface-variant", children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": typeof label === "string" ? label : "Tone",
+          className: "flex flex-wrap gap-2",
+          children: options.map((option, index) => {
+            const active = current === option.value;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: (el) => {
+                  refs.current[index] = el;
+                },
+                type: "button",
+                role: "radio",
+                "aria-checked": active,
+                "aria-describedby": option.description ? `${descId}-${index}` : void 0,
+                tabIndex: index === tabStop ? 0 : -1,
+                onClick: () => select(option.value),
+                onKeyDown: (e) => onKeyDown(e, index),
+                className: cn(
+                  "inline-flex h-8 items-center gap-2 rounded-md-sm border px-3 text-sm font-medium tracking-[0.1px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-md-primary motion-reduce:transition-none [&_svg]:relative [&_svg]:size-[18px]",
+                  stateLayer,
+                  active ? "border-transparent bg-md-secondary-container pl-2 text-md-on-secondary-container" : "border-md-outline bg-transparent text-md-on-surface-variant"
+                ),
+                children: [
+                  active && option.icon == null && /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
+                  option.icon,
+                  /* @__PURE__ */ jsx("span", { className: "relative", children: option.label }),
+                  option.description && /* @__PURE__ */ jsx("span", { id: `${descId}-${index}`, className: "sr-only", children: option.description })
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      )
+    ] });
+  }
+);
+Md3Personality.displayName = "Md3Personality";
+var Md3PersonalityVoiceCard = React.forwardRef(
+  ({ quote, tags = [], label = "Voice", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref,
+      "aria-label": label,
+      "data-variant": "voice-card",
+      className: cn(
+        "m-0 rounded-md-lg border border-md-outline-variant bg-md-surface p-5 text-md-on-surface",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("blockquote", { className: "m-0 rounded-md-xs border-l-[3px] border-md-primary bg-md-surface-container px-3.5 py-3 text-sm leading-5 tracking-[0.25px] text-md-on-surface", children: [
+          "\u201C",
+          quote,
+          "\u201D"
+        ] }),
+        tags.length > 0 && /* @__PURE__ */ jsxs("figcaption", { className: "mt-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Voice: " }),
+          /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-2 p-0", children: tags.map((tag) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "inline-flex h-6 items-center rounded-md-sm border border-md-outline-variant px-2 text-xs font-medium tracking-[0.5px] text-md-on-surface-variant",
+              children: tag
+            },
+            tag
+          )) })
+        ] })
+      ]
+    }
+  )
+);
+Md3PersonalityVoiceCard.displayName = "Md3PersonalityVoiceCard";
+var Md3PersonalitySampleDialog = React.forwardRef(
+  ({ turns, agentName = "Assistant", label = "Sample dialog", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": label,
+      "data-variant": "sample-dialog",
+      className: cn("flex flex-col gap-2", className),
+      ...props,
+      children: turns.map((turn, i) => {
+        const user = turn.from === "user";
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "max-w-[85%] px-3.5 py-2.5 text-xs leading-[18px] tracking-[0.25px]",
+              user ? "self-end rounded-md-lg rounded-br-md-xs bg-md-surface-container-high text-md-on-surface" : "self-start rounded-md-lg rounded-bl-md-xs bg-md-primary-container text-md-on-primary-container"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: user ? "You said: " : `${agentName} said: ` }),
+              turn.text,
+              turn.fixed && /* @__PURE__ */ jsxs("span", { className: "mt-1 flex items-center gap-1 text-[11px] font-medium tracking-[0.5px] opacity-80", children: [
+                /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true", className: "size-3" }),
+                "Same in every personality"
+              ] })
+            ]
+          },
+          i
+        );
+      })
+    }
+  )
+);
+Md3PersonalitySampleDialog.displayName = "Md3PersonalitySampleDialog";
+
+export { Md3Personality, Md3PersonalitySampleDialog, Md3PersonalityVoiceCard };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { Check, Lock } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport { defaultTones } from \"@nucleux/personality\";\nimport type {\n  PersonalityProps,\n  PersonalitySampleDialogProps,\n  PersonalityVoiceCardProps,\n} from \"@nucleux/personality\";\n\nexport type { ToneOption, PersonalitySampleTurn } from \"@nucleux/personality\";\nexport { defaultTones } from \"@nucleux/personality\";\nexport type Md3PersonalityProps = PersonalityProps;\nexport type Md3PersonalityVoiceCardProps = PersonalityVoiceCardProps;\nexport type Md3PersonalitySampleDialogProps = PersonalitySampleDialogProps;\n\nconst stateLayer =\n  \"relative overflow-hidden 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 * The `tone-matrix` in Material 3 — the twin of `Personality`, with the same\n * API and keyboard model. A small set of writing styles as M3 filter chips:\n * the selected one takes the secondary-container role and a leading check;\n * hover, focus and press are the chip's 8% / 12% state layer. It is a radio\n * group with roving focus (arrow keys move and select, Home / End jump).\n * Tone changes how the agent writes, never what it may do — keep\n * permission, caveat and refusal strings outside it.\n */\nexport const Md3Personality = React.forwardRef<HTMLDivElement, Md3PersonalityProps>(\n  ({ options = defaultTones, value, defaultValue, onValueChange, label = \"Tone\", className, ...props }, ref) => {\n    // Selection and roving-focus logic copied from @nucleux/personality (internal there).\n    const [internal, setInternal] = React.useState<string | undefined>(defaultValue);\n    const current = value !== undefined ? value : internal;\n    const refs = React.useRef<(HTMLButtonElement | null)[]>([]);\n    const descId = React.useId();\n    const select = (next: string) => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    };\n    const selectedIndex = options.findIndex((o) => o.value === current);\n    const tabStop = selectedIndex >= 0 ? selectedIndex : 0;\n\n    const onKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const last = options.length - 1;\n      let next: number | null = null;\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = index === last ? 0 : index + 1;\n      else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = index === 0 ? last : index - 1;\n      else if (e.key === \"Home\") next = 0;\n      else if (e.key === \"End\") next = last;\n      if (next === null) return;\n      e.preventDefault();\n      refs.current[next]?.focus();\n      select(options[next]!.value);\n    };\n\n    return (\n      <div ref={ref} data-variant=\"tone-matrix\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n        {label && (\n          <span className=\"text-xs font-medium tracking-[0.5px] text-md-on-surface-variant\">{label}</span>\n        )}\n        <div\n          role=\"radiogroup\"\n          aria-label={typeof label === \"string\" ? label : \"Tone\"}\n          className=\"flex flex-wrap gap-2\"\n        >\n          {options.map((option, index) => {\n            const active = current === option.value;\n            return (\n              <button\n                key={option.value}\n                ref={(el) => {\n                  refs.current[index] = el;\n                }}\n                type=\"button\"\n                role=\"radio\"\n                aria-checked={active}\n                aria-describedby={option.description ? `${descId}-${index}` : undefined}\n                tabIndex={index === tabStop ? 0 : -1}\n                onClick={() => select(option.value)}\n                onKeyDown={(e) => onKeyDown(e, index)}\n                className={cn(\n                  \"inline-flex h-8 items-center gap-2 rounded-md-sm border px-3 text-sm font-medium tracking-[0.1px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-md-primary motion-reduce:transition-none [&_svg]:relative [&_svg]:size-[18px]\",\n                  stateLayer,\n                  active\n                    ? \"border-transparent bg-md-secondary-container pl-2 text-md-on-secondary-container\"\n                    : \"border-md-outline bg-transparent text-md-on-surface-variant\",\n                )}\n              >\n                {active && option.icon == null && <Check aria-hidden=\"true\" />}\n                {option.icon}\n                <span className=\"relative\">{option.label}</span>\n                {option.description && (\n                  <span id={`${descId}-${index}`} className=\"sr-only\">\n                    {option.description}\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\nMd3Personality.displayName = \"Md3Personality\";\n\n/**\n * The `voice-card` in Material 3 — the twin of `PersonalityVoiceCard`. An\n * outlined card whose sample utterance sits on a surface-container ground\n * behind a primary rule (the voice, written down), with the voice tags as\n * outlined chips beneath it.\n */\nexport const Md3PersonalityVoiceCard = React.forwardRef<HTMLElement, Md3PersonalityVoiceCardProps>(\n  ({ quote, tags = [], label = \"Voice\", className, ...props }, ref) => (\n    <figure\n      ref={ref}\n      aria-label={label}\n      data-variant=\"voice-card\"\n      className={cn(\n        \"m-0 rounded-md-lg border border-md-outline-variant bg-md-surface p-5 text-md-on-surface\",\n        className,\n      )}\n      {...props}\n    >\n      <blockquote className=\"m-0 rounded-md-xs border-l-[3px] border-md-primary bg-md-surface-container px-3.5 py-3 text-sm leading-5 tracking-[0.25px] text-md-on-surface\">\n        “{quote}”\n      </blockquote>\n      {tags.length > 0 && (\n        <figcaption className=\"mt-3\">\n          <span className=\"sr-only\">Voice: </span>\n          <ul className=\"m-0 flex list-none flex-wrap gap-2 p-0\">\n            {tags.map((tag) => (\n              <li\n                key={tag}\n                className=\"inline-flex h-6 items-center rounded-md-sm border border-md-outline-variant px-2 text-xs font-medium tracking-[0.5px] text-md-on-surface-variant\"\n              >\n                {tag}\n              </li>\n            ))}\n          </ul>\n        </figcaption>\n      )}\n    </figure>\n  ),\n);\nMd3PersonalityVoiceCard.displayName = \"Md3PersonalityVoiceCard\";\n\n/**\n * The `sample-dialog` in Material 3 — the twin of `PersonalitySampleDialog`.\n * Two authors, two grounds: the person's turns on surface-container-high,\n * the agent's on its primary-container ground, each with the M3 bubble\n * shape (a small corner toward its author). Lines marked `fixed` carry a\n * lock and \"Same in every personality\", so the contract is visible.\n */\nexport const Md3PersonalitySampleDialog = React.forwardRef<HTMLDivElement, Md3PersonalitySampleDialogProps>(\n  ({ turns, agentName = \"Assistant\", label = \"Sample dialog\", className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={label}\n      data-variant=\"sample-dialog\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      {turns.map((turn, i) => {\n        const user = turn.from === \"user\";\n        return (\n          <div\n            key={i}\n            className={cn(\n              \"max-w-[85%] px-3.5 py-2.5 text-xs leading-[18px] tracking-[0.25px]\",\n              user\n                ? \"self-end rounded-md-lg rounded-br-md-xs bg-md-surface-container-high text-md-on-surface\"\n                : \"self-start rounded-md-lg rounded-bl-md-xs bg-md-primary-container text-md-on-primary-container\",\n            )}\n          >\n            <span className=\"sr-only\">{user ? \"You said: \" : `${agentName} said: `}</span>\n            {turn.text}\n            {turn.fixed && (\n              <span className=\"mt-1 flex items-center gap-1 text-[11px] font-medium tracking-[0.5px] opacity-80\">\n                <Lock aria-hidden=\"true\" className=\"size-3\" />\n                Same in every personality\n              </span>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  ),\n);\nMd3PersonalitySampleDialog.displayName = \"Md3PersonalitySampleDialog\";\n"]}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@nucleux/md3-personality",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.7.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Material 3 Personality — choose how the agent writes while the trust language stays fixed — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3",
+    "material",
+    "md3-personality",
+    "personality"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/personality": "0.7.0",
+    "@nucleux/utils": "0.7.0",
+    "lucide-react": "^0.469.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/md3-personality"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
 }