@nucleux/md3-agent-avatar 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,35 @@
-# Temporary Holding Version
+# @nucleux/md3-agent-avatar
 
-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 Agent Avatar — one non-photographic mark for the agent, with its working state on the mark — 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/agent-avatar`](https://www.npmjs.com/package/@nucleux/agent-avatar): 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
+
+- **`Md3AgentAvatar`** — the agent's mark on md-primary-container, named "<name>, AI agent": `name`, `src`, `glyph`, `size` sm/md/lg, `shape` circle/rounded, `working` (an Md3CircularProgress ring on the mark), `status` online/offline/working, `statusLabel`, `descriptor`, `decorative`
+- Types: `Md3AgentAvatarProps`, `Md3AgentAvatarSize`, `Md3AgentAvatarShape`, `Md3AgentAvatarStatus`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-agent-avatar @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3AgentAvatar } from "@nucleux/md3-agent-avatar";
+
+<Md3AgentAvatar name="Aria" working statusLabel="Generating…" />
+```
+
+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,134 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var md3AiIcons = require('@nucleux/md3-ai-icons');
+var md3Color = require('@nucleux/md3-color');
+var md3Progress = require('@nucleux/md3-progress');
+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 sizeClasses = {
+  sm: "size-6 text-[11px] [&_svg]:size-3.5",
+  md: "size-8 text-xs [&_svg]:size-4",
+  lg: "size-10 text-base [&_svg]:size-5"
+};
+var ringSize = { sm: 32, md: 40, lg: 48 };
+var dotSizes = {
+  sm: "size-2 border",
+  md: "size-2.5 border-2",
+  lg: "size-3 border-2"
+};
+var dotColors = {
+  online: "bg-md-tertiary",
+  offline: "bg-md-outline",
+  working: utils.cn(md3Color.md3AiColorClasses.fill, md3Color.md3AiColorClasses.working)
+};
+var statusWords = {
+  online: "Online",
+  offline: "Offline",
+  working: "Working"
+};
+var Md3AgentAvatar = React__namespace.forwardRef(
+  ({
+    name,
+    src,
+    glyph,
+    size = "md",
+    shape = "circle",
+    working = false,
+    status,
+    statusLabel,
+    descriptor = "AI agent",
+    decorative = false,
+    className,
+    ...props
+  }, ref) => {
+    const Sparkle = md3AiIcons.useAiGlyph("ai-action");
+    const isWorking = working || status === "working";
+    const words = statusLabel ?? (status ? statusWords[status] : isWorking ? statusWords.working : void 0);
+    const radius = shape === "circle" ? "rounded-full" : "rounded-md-md";
+    const label = `${name}, ${descriptor}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-shape": shape,
+        "data-status": status,
+        "aria-hidden": decorative || void 0,
+        className: utils.cn("relative inline-flex shrink-0", radius, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              role: "img",
+              "aria-label": label,
+              "aria-hidden": decorative || void 0,
+              className: utils.cn(
+                "flex shrink-0 items-center justify-center overflow-hidden bg-md-primary-container font-medium text-md-on-primary-container",
+                radius,
+                sizeClasses[size]
+              ),
+              children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "size-full object-cover" }) : glyph ?? /* @__PURE__ */ jsxRuntime.jsx(Sparkle, { className: "text-md-primary" })
+            }
+          ),
+          isWorking && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                md3Progress.Md3CircularProgress,
+                {
+                  "aria-hidden": "true",
+                  size: ringSize[size],
+                  strokeWidth: 2,
+                  className: "motion-reduce:animate-none"
+                }
+              )
+            }
+          ),
+          status && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: utils.cn(
+                "absolute -bottom-0.5 -right-0.5 rounded-full border-md-surface",
+                dotSizes[size],
+                dotColors[status]
+              )
+            }
+          ),
+          !decorative && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: "sr-only", children: words ?? "" })
+        ]
+      }
+    );
+  }
+);
+Md3AgentAvatar.displayName = "Md3AgentAvatar";
+
+exports.Md3AgentAvatar = Md3AgentAvatar;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["cn","md3AiColorClasses","React","useAiGlyph","jsxs","jsx","Md3CircularProgress"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport type { AgentAvatarProps, AgentAvatarShape, AgentAvatarSize, AgentAvatarStatus } from \"@nucleux/agent-avatar\";\nimport { useAiGlyph } from \"@nucleux/md3-ai-icons\";\nimport { md3AiColorClasses } from \"@nucleux/md3-color\";\nimport { Md3CircularProgress } from \"@nucleux/md3-progress\";\n\nexport type Md3AgentAvatarProps = AgentAvatarProps;\nexport type Md3AgentAvatarSize = AgentAvatarSize;\nexport type Md3AgentAvatarShape = AgentAvatarShape;\nexport type Md3AgentAvatarStatus = AgentAvatarStatus;\n\n// Same three sizes as the twin (24 / 32 / 40): one drawing at every size.\nconst sizeClasses: Record<AgentAvatarSize, string> = {\n  sm: \"size-6 text-[11px] [&_svg]:size-3.5\",\n  md: \"size-8 text-xs [&_svg]:size-4\",\n  lg: \"size-10 text-base [&_svg]:size-5\",\n};\n\nconst ringSize: Record<AgentAvatarSize, number> = { sm: 32, md: 40, lg: 48 };\n\nconst dotSizes: Record<AgentAvatarSize, string> = {\n  sm: \"size-2 border\",\n  md: \"size-2.5 border-2\",\n  lg: \"size-3 border-2\",\n};\n\nconst dotColors: Record<AgentAvatarStatus, string> = {\n  online: \"bg-md-tertiary\",\n  offline: \"bg-md-outline\",\n  working: cn(md3AiColorClasses.fill, md3AiColorClasses.working),\n};\n\nconst statusWords: Record<AgentAvatarStatus, string> = {\n  online: \"Online\",\n  offline: \"Offline\",\n  working: \"Working\",\n};\n\n/**\n * The agent's visual identity in Material 3 — the twin of `AgentAvatar`,\n * with the same API. One stable, non-photographic mark: the reserved AI\n * sparkle in `md-primary` on the agent's `md-primary-container` ground (or\n * an approved image, or a letter), named \"<name>, AI agent\". `working` puts\n * an indeterminate Md3CircularProgress ring on the mark itself, which stops\n * the moment work stops and holds still under reduced motion; `status` adds\n * a dot whose words are announced in a polite live region. Use\n * `shape=\"rounded\"` where people in the same list are circles.\n */\nexport const Md3AgentAvatar = React.forwardRef<HTMLSpanElement, Md3AgentAvatarProps>(\n  (\n    {\n      name,\n      src,\n      glyph,\n      size = \"md\",\n      shape = \"circle\",\n      working = false,\n      status,\n      statusLabel,\n      descriptor = \"AI agent\",\n      decorative = false,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Sparkle = useAiGlyph(\"ai-action\");\n    const isWorking = working || status === \"working\";\n    const words = statusLabel ?? (status ? statusWords[status] : isWorking ? statusWords.working : undefined);\n    const radius = shape === \"circle\" ? \"rounded-full\" : \"rounded-md-md\";\n    const label = `${name}, ${descriptor}`;\n\n    return (\n      <span\n        ref={ref}\n        data-shape={shape}\n        data-status={status}\n        aria-hidden={decorative || undefined}\n        className={cn(\"relative inline-flex shrink-0\", radius, className)}\n        {...props}\n      >\n        <span\n          role=\"img\"\n          aria-label={label}\n          aria-hidden={decorative || undefined}\n          className={cn(\n            \"flex shrink-0 items-center justify-center overflow-hidden bg-md-primary-container font-medium text-md-on-primary-container\",\n            radius,\n            sizeClasses[size],\n          )}\n        >\n          {src ? (\n            <img src={src} alt=\"\" className=\"size-full object-cover\" />\n          ) : (\n            (glyph ?? <Sparkle className=\"text-md-primary\" />)\n          )}\n        </span>\n        {isWorking && (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n          >\n            <Md3CircularProgress\n              aria-hidden=\"true\"\n              size={ringSize[size]}\n              strokeWidth={2}\n              className=\"motion-reduce:animate-none\"\n            />\n          </span>\n        )}\n        {status && (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute -bottom-0.5 -right-0.5 rounded-full border-md-surface\",\n              dotSizes[size],\n              dotColors[status],\n            )}\n          />\n        )}\n        {!decorative && (\n          <span role=\"status\" className=\"sr-only\">\n            {words ?? \"\"}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\nMd3AgentAvatar.displayName = \"Md3AgentAvatar\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AgentAvatarProps, AgentAvatarShape, AgentAvatarSize, AgentAvatarStatus } from '@nucleux/agent-avatar';
+
+type Md3AgentAvatarProps = AgentAvatarProps;
+type Md3AgentAvatarSize = AgentAvatarSize;
+type Md3AgentAvatarShape = AgentAvatarShape;
+type Md3AgentAvatarStatus = AgentAvatarStatus;
+/**
+ * The agent's visual identity in Material 3 — the twin of `AgentAvatar`,
+ * with the same API. One stable, non-photographic mark: the reserved AI
+ * sparkle in `md-primary` on the agent's `md-primary-container` ground (or
+ * an approved image, or a letter), named "<name>, AI agent". `working` puts
+ * an indeterminate Md3CircularProgress ring on the mark itself, which stops
+ * the moment work stops and holds still under reduced motion; `status` adds
+ * a dot whose words are announced in a polite live region. Use
+ * `shape="rounded"` where people in the same list are circles.
+ */
+declare const Md3AgentAvatar: React.ForwardRefExoticComponent<AgentAvatarProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Md3AgentAvatar, type Md3AgentAvatarProps, type Md3AgentAvatarShape, type Md3AgentAvatarSize, type Md3AgentAvatarStatus };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AgentAvatarProps, AgentAvatarShape, AgentAvatarSize, AgentAvatarStatus } from '@nucleux/agent-avatar';
+
+type Md3AgentAvatarProps = AgentAvatarProps;
+type Md3AgentAvatarSize = AgentAvatarSize;
+type Md3AgentAvatarShape = AgentAvatarShape;
+type Md3AgentAvatarStatus = AgentAvatarStatus;
+/**
+ * The agent's visual identity in Material 3 — the twin of `AgentAvatar`,
+ * with the same API. One stable, non-photographic mark: the reserved AI
+ * sparkle in `md-primary` on the agent's `md-primary-container` ground (or
+ * an approved image, or a letter), named "<name>, AI agent". `working` puts
+ * an indeterminate Md3CircularProgress ring on the mark itself, which stops
+ * the moment work stops and holds still under reduced motion; `status` adds
+ * a dot whose words are announced in a polite live region. Use
+ * `shape="rounded"` where people in the same list are circles.
+ */
+declare const Md3AgentAvatar: React.ForwardRefExoticComponent<AgentAvatarProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Md3AgentAvatar, type Md3AgentAvatarProps, type Md3AgentAvatarShape, type Md3AgentAvatarSize, type Md3AgentAvatarStatus };

package/dist/index.js

@@ -0,0 +1,112 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { useAiGlyph } from '@nucleux/md3-ai-icons';
+import { md3AiColorClasses } from '@nucleux/md3-color';
+import { Md3CircularProgress } from '@nucleux/md3-progress';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var sizeClasses = {
+  sm: "size-6 text-[11px] [&_svg]:size-3.5",
+  md: "size-8 text-xs [&_svg]:size-4",
+  lg: "size-10 text-base [&_svg]:size-5"
+};
+var ringSize = { sm: 32, md: 40, lg: 48 };
+var dotSizes = {
+  sm: "size-2 border",
+  md: "size-2.5 border-2",
+  lg: "size-3 border-2"
+};
+var dotColors = {
+  online: "bg-md-tertiary",
+  offline: "bg-md-outline",
+  working: cn(md3AiColorClasses.fill, md3AiColorClasses.working)
+};
+var statusWords = {
+  online: "Online",
+  offline: "Offline",
+  working: "Working"
+};
+var Md3AgentAvatar = React.forwardRef(
+  ({
+    name,
+    src,
+    glyph,
+    size = "md",
+    shape = "circle",
+    working = false,
+    status,
+    statusLabel,
+    descriptor = "AI agent",
+    decorative = false,
+    className,
+    ...props
+  }, ref) => {
+    const Sparkle = useAiGlyph("ai-action");
+    const isWorking = working || status === "working";
+    const words = statusLabel ?? (status ? statusWords[status] : isWorking ? statusWords.working : void 0);
+    const radius = shape === "circle" ? "rounded-full" : "rounded-md-md";
+    const label = `${name}, ${descriptor}`;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-shape": shape,
+        "data-status": status,
+        "aria-hidden": decorative || void 0,
+        className: cn("relative inline-flex shrink-0", radius, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "img",
+              "aria-label": label,
+              "aria-hidden": decorative || void 0,
+              className: cn(
+                "flex shrink-0 items-center justify-center overflow-hidden bg-md-primary-container font-medium text-md-on-primary-container",
+                radius,
+                sizeClasses[size]
+              ),
+              children: src ? /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full object-cover" }) : glyph ?? /* @__PURE__ */ jsx(Sparkle, { className: "text-md-primary" })
+            }
+          ),
+          isWorking && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              children: /* @__PURE__ */ jsx(
+                Md3CircularProgress,
+                {
+                  "aria-hidden": "true",
+                  size: ringSize[size],
+                  strokeWidth: 2,
+                  className: "motion-reduce:animate-none"
+                }
+              )
+            }
+          ),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute -bottom-0.5 -right-0.5 rounded-full border-md-surface",
+                dotSizes[size],
+                dotColors[status]
+              )
+            }
+          ),
+          !decorative && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: words ?? "" })
+        ]
+      }
+    );
+  }
+);
+Md3AgentAvatar.displayName = "Md3AgentAvatar";
+
+export { Md3AgentAvatar };
+//# 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 { cn } from \"@nucleux/utils\";\nimport type { AgentAvatarProps, AgentAvatarShape, AgentAvatarSize, AgentAvatarStatus } from \"@nucleux/agent-avatar\";\nimport { useAiGlyph } from \"@nucleux/md3-ai-icons\";\nimport { md3AiColorClasses } from \"@nucleux/md3-color\";\nimport { Md3CircularProgress } from \"@nucleux/md3-progress\";\n\nexport type Md3AgentAvatarProps = AgentAvatarProps;\nexport type Md3AgentAvatarSize = AgentAvatarSize;\nexport type Md3AgentAvatarShape = AgentAvatarShape;\nexport type Md3AgentAvatarStatus = AgentAvatarStatus;\n\n// Same three sizes as the twin (24 / 32 / 40): one drawing at every size.\nconst sizeClasses: Record<AgentAvatarSize, string> = {\n  sm: \"size-6 text-[11px] [&_svg]:size-3.5\",\n  md: \"size-8 text-xs [&_svg]:size-4\",\n  lg: \"size-10 text-base [&_svg]:size-5\",\n};\n\nconst ringSize: Record<AgentAvatarSize, number> = { sm: 32, md: 40, lg: 48 };\n\nconst dotSizes: Record<AgentAvatarSize, string> = {\n  sm: \"size-2 border\",\n  md: \"size-2.5 border-2\",\n  lg: \"size-3 border-2\",\n};\n\nconst dotColors: Record<AgentAvatarStatus, string> = {\n  online: \"bg-md-tertiary\",\n  offline: \"bg-md-outline\",\n  working: cn(md3AiColorClasses.fill, md3AiColorClasses.working),\n};\n\nconst statusWords: Record<AgentAvatarStatus, string> = {\n  online: \"Online\",\n  offline: \"Offline\",\n  working: \"Working\",\n};\n\n/**\n * The agent's visual identity in Material 3 — the twin of `AgentAvatar`,\n * with the same API. One stable, non-photographic mark: the reserved AI\n * sparkle in `md-primary` on the agent's `md-primary-container` ground (or\n * an approved image, or a letter), named \"<name>, AI agent\". `working` puts\n * an indeterminate Md3CircularProgress ring on the mark itself, which stops\n * the moment work stops and holds still under reduced motion; `status` adds\n * a dot whose words are announced in a polite live region. Use\n * `shape=\"rounded\"` where people in the same list are circles.\n */\nexport const Md3AgentAvatar = React.forwardRef<HTMLSpanElement, Md3AgentAvatarProps>(\n  (\n    {\n      name,\n      src,\n      glyph,\n      size = \"md\",\n      shape = \"circle\",\n      working = false,\n      status,\n      statusLabel,\n      descriptor = \"AI agent\",\n      decorative = false,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Sparkle = useAiGlyph(\"ai-action\");\n    const isWorking = working || status === \"working\";\n    const words = statusLabel ?? (status ? statusWords[status] : isWorking ? statusWords.working : undefined);\n    const radius = shape === \"circle\" ? \"rounded-full\" : \"rounded-md-md\";\n    const label = `${name}, ${descriptor}`;\n\n    return (\n      <span\n        ref={ref}\n        data-shape={shape}\n        data-status={status}\n        aria-hidden={decorative || undefined}\n        className={cn(\"relative inline-flex shrink-0\", radius, className)}\n        {...props}\n      >\n        <span\n          role=\"img\"\n          aria-label={label}\n          aria-hidden={decorative || undefined}\n          className={cn(\n            \"flex shrink-0 items-center justify-center overflow-hidden bg-md-primary-container font-medium text-md-on-primary-container\",\n            radius,\n            sizeClasses[size],\n          )}\n        >\n          {src ? (\n            <img src={src} alt=\"\" className=\"size-full object-cover\" />\n          ) : (\n            (glyph ?? <Sparkle className=\"text-md-primary\" />)\n          )}\n        </span>\n        {isWorking && (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n          >\n            <Md3CircularProgress\n              aria-hidden=\"true\"\n              size={ringSize[size]}\n              strokeWidth={2}\n              className=\"motion-reduce:animate-none\"\n            />\n          </span>\n        )}\n        {status && (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute -bottom-0.5 -right-0.5 rounded-full border-md-surface\",\n              dotSizes[size],\n              dotColors[status],\n            )}\n          />\n        )}\n        {!decorative && (\n          <span role=\"status\" className=\"sr-only\">\n            {words ?? \"\"}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\nMd3AgentAvatar.displayName = \"Md3AgentAvatar\";\n"]}

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@nucleux/md3-agent-avatar",
-  "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 Agent Avatar — one non-photographic mark for the agent, with its working state on the mark — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3",
+    "material",
+    "md3-agent-avatar",
+    "agent-avatar",
+    "avatar"
+  ],
+  "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/agent-avatar": "0.7.0",
+    "@nucleux/md3-ai-icons": "0.7.0",
+    "@nucleux/md3-color": "0.7.0",
+    "@nucleux/md3-progress": "0.7.0",
+    "@nucleux/utils": "0.7.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-agent-avatar"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
 }