@nucleux/ai-icons 0.0.0-stage → 0.6.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,47 @@
-# Temporary Holding Version
+# @nucleux/ai-icons
 
-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.
+Icons — a small, stable AI mark vocabulary: action, generated, working and tool use — 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).
+
+## Exports
+
+- **`AiIcons`** — the AI presence mark. `variant`: `sparkle` (default) / `thinking-orb` (animated, for active states) / `branded-mark`; `size` sm/md/lg (24/32/40); `tone` solid/outline; `label` (accessible name — omit when words sit beside it); `glyph` (branded-mark content)
+- **`AiIcon`** — one AI *meaning* with its mark and its words. `role`: `ai-action` / `generated-content` / `agent-working` (turns, announced in a polite live region) / `tool-use`; `label` (required); `showLabel`
+- **`AiIconProvider`** (`glyphs`) + **`useAiGlyph(role)`** — choose the approved glyph per role once for the whole product; the approved lists don't overlap
+- Glyphs: **`AiSparkleIcon`**, **`AiGeneratedIcon`**, **`AiWorkingIcon`** (`still`), **`AiWandIcon`**, **`AiRegenerateIcon`**, **`AiToolIcon`**; maps **`aiGlyphs`**, **`defaultAiIconGlyphs`**
+
+## Rules
+
+- The sparkle is the universal default; the orb is for active state only; never a photo or human face.
+- Every mark travels with words — a visible label, or an accessible name.
+- Only the working mark moves, only while work happens, and it holds still under reduced motion.
+- `@nucleux/iconography`, `@nucleux/agent-avatar` and `@nucleux/disclosure` draw from these same glyphs.
+
+## Install
+
+```bash
+pnpm add @nucleux/ai-icons @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { AiIcons, AiIcon, AiIconProvider } from "@nucleux/ai-icons";
+
+<AiIcon role="ai-action" label="Rewrite" />
+<AiIcon role="agent-working" label="Rewriting release note…" />
+<AiIcon role="generated-content" label="Generated with AI" />
+<AiIcons variant="thinking-orb" /> <span role="status">Aria is thinking…</span>
+
+<AiIconProvider glyphs={{ "ai-action": "wand" }}>{app}</AiIconProvider>
+```
+
+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,261 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var color = require('@nucleux/color');
+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
+function glyphA11y(props) {
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+  return named ? { role: "img" } : { "aria-hidden": true };
+}
+var AiSparkleIcon = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    ref,
+    viewBox: "0 0 24 24",
+    width: 16,
+    height: 16,
+    fill: "currentColor",
+    focusable: "false",
+    "data-ai-glyph": "sparkle",
+    className: utils.cn("size-4 shrink-0", className),
+    ...glyphA11y(props),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3c.6 4.8 3.2 7.4 9 9-5.8 1.6-8.4 4.2-9 9-.6-4.8-3.2-7.4-9-9 5.8-1.6 8.4-4.2 9-9z" })
+  }
+));
+AiSparkleIcon.displayName = "AiSparkleIcon";
+var AiGeneratedIcon = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    ref,
+    viewBox: "0 0 24 24",
+    width: 16,
+    height: 16,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.8,
+    strokeLinejoin: "round",
+    focusable: "false",
+    "data-ai-glyph": "generated",
+    className: utils.cn("size-4 shrink-0", className),
+    ...glyphA11y(props),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 6.5c.3 2.2 1.3 3.2 3.5 3.5-2.2.3-3.2 1.3-3.5 3.5-.3-2.2-1.3-3.2-3.5-3.5 2.2-.3 3.2-1.3 3.5-3.5z",
+          fill: "currentColor",
+          stroke: "none"
+        }
+      )
+    ]
+  }
+));
+AiGeneratedIcon.displayName = "AiGeneratedIcon";
+var AiWorkingIcon = React__namespace.forwardRef(
+  ({ still = false, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      width: 16,
+      height: 16,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.2,
+      strokeLinecap: "round",
+      focusable: "false",
+      "data-ai-glyph": "working",
+      className: utils.cn("size-4 shrink-0", !still && "animate-spin motion-reduce:animate-none", className),
+      ...glyphA11y(props),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "8.5", opacity: 0.25 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3.5a8.5 8.5 0 0 1 8.5 8.5" })
+      ]
+    }
+  )
+);
+AiWorkingIcon.displayName = "AiWorkingIcon";
+function lucideGlyph(Icon, name, displayName) {
+  const Glyph = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Icon,
+    {
+      ref,
+      focusable: "false",
+      "data-ai-glyph": name,
+      className: utils.cn("size-4 shrink-0", className),
+      ...glyphA11y(props),
+      ...props
+    }
+  ));
+  Glyph.displayName = displayName;
+  return Glyph;
+}
+var AiWandIcon = lucideGlyph(
+  lucideReact.WandSparkles,
+  "wand",
+  "AiWandIcon"
+);
+var AiRegenerateIcon = lucideGlyph(
+  lucideReact.RefreshCw,
+  "regenerate",
+  "AiRegenerateIcon"
+);
+var AiToolIcon = lucideGlyph(lucideReact.Wrench, "tool", "AiToolIcon");
+var aiGlyphs = {
+  sparkle: AiSparkleIcon,
+  wand: AiWandIcon,
+  regenerate: AiRegenerateIcon,
+  generated: AiGeneratedIcon,
+  working: AiWorkingIcon,
+  tool: AiToolIcon
+};
+var defaultAiIconGlyphs = {
+  "ai-action": "sparkle",
+  "generated-content": "generated",
+  "agent-working": "working",
+  "tool-use": "tool"
+};
+var AiIconContext = React__namespace.createContext(defaultAiIconGlyphs);
+function AiIconProvider({ glyphs, children }) {
+  const value = React__namespace.useMemo(() => ({ ...defaultAiIconGlyphs, ...glyphs }), [glyphs]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AiIconContext.Provider, { value, children });
+}
+AiIconProvider.displayName = "AiIconProvider";
+function useAiGlyph(role) {
+  const glyphs = React__namespace.useContext(AiIconContext);
+  return aiGlyphs[glyphs[role]];
+}
+var roleClasses = {
+  "ai-action": "text-foreground [&>svg]:text-brand",
+  "agent-working": "text-foreground [&>svg]:text-brand",
+  "tool-use": "text-muted-foreground",
+  "generated-content": "rounded-full border border-brand/30 bg-background px-2 py-0.5 text-xs font-medium text-foreground [&>svg]:size-3.5 [&>svg]:text-brand"
+};
+var AiIcon = React__namespace.forwardRef(
+  ({ role, label, showLabel = true, className, ...props }, ref) => {
+    const Glyph = useAiGlyph(role);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-ai-role": role,
+        role: role === "agent-working" ? "status" : void 0,
+        "aria-live": role === "agent-working" ? "polite" : void 0,
+        className: utils.cn("inline-flex items-center gap-1.5 text-sm", roleClasses[role], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Glyph, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: showLabel ? void 0 : "sr-only", children: label })
+        ]
+      }
+    );
+  }
+);
+AiIcon.displayName = "AiIcon";
+var sizeClasses = {
+  sm: "size-6 text-xs [&>svg]:size-3.5",
+  md: "size-8 text-sm [&>svg]:size-4",
+  lg: "size-10 text-lg [&>svg]:size-5"
+};
+var AiIcons = React__namespace.forwardRef(
+  ({ variant = "sparkle", size = "md", tone = "solid", label, glyph, className, ...props }, ref) => {
+    const Sparkle = useAiGlyph("ai-action");
+    const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    const base = "inline-grid shrink-0 place-items-center font-semibold";
+    if (variant === "thinking-orb") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-variant": variant,
+          className: utils.cn(
+            base,
+            "rounded-full bg-gradient-to-br from-brand to-primary shadow-sm",
+            color.aiColorClasses.working,
+            sizeClasses[size],
+            className
+          ),
+          ...a11y,
+          ...props
+        }
+      );
+    }
+    const toneClasses = tone === "solid" ? "bg-primary text-primary-foreground" : "border border-border bg-background text-foreground";
+    if (variant === "branded-mark") {
+      const content = glyph ?? (label ? label.charAt(0).toLowerCase() : /* @__PURE__ */ jsxRuntime.jsx(Sparkle, {}));
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-variant": variant,
+          className: utils.cn(
+            base,
+            "rounded-[28%] font-serif italic",
+            tone === "solid" ? "bg-gradient-to-br from-primary to-primary/70 text-primary-foreground" : toneClasses,
+            sizeClasses[size],
+            className
+          ),
+          ...a11y,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "data-variant": variant,
+        className: utils.cn(base, "rounded-[22%]", toneClasses, sizeClasses[size], className),
+        ...a11y,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Sparkle, {})
+      }
+    );
+  }
+);
+AiIcons.displayName = "AiIcons";
+
+exports.AiGeneratedIcon = AiGeneratedIcon;
+exports.AiIcon = AiIcon;
+exports.AiIconProvider = AiIconProvider;
+exports.AiIcons = AiIcons;
+exports.AiRegenerateIcon = AiRegenerateIcon;
+exports.AiSparkleIcon = AiSparkleIcon;
+exports.AiToolIcon = AiToolIcon;
+exports.AiWandIcon = AiWandIcon;
+exports.AiWorkingIcon = AiWorkingIcon;
+exports.aiGlyphs = aiGlyphs;
+exports.defaultAiIconGlyphs = defaultAiIconGlyphs;
+exports.useAiGlyph = useAiGlyph;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","jsxs","WandSparkles","RefreshCw","Wrench","aiColorClasses"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { RefreshCw, WandSparkles, Wrench } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport { aiColorClasses } from \"@nucleux/color\";\n\n/* -------------------------------------------------------------------------- */\n/* Glyphs                                                                      */\n/* -------------------------------------------------------------------------- */\n\nexport type AiGlyphProps = React.SVGProps<SVGSVGElement>;\n\n/** Decorative unless the caller names it. */\nfunction glyphA11y(props: AiGlyphProps) {\n  const named = props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n  return named ? { role: \"img\" as const } : { \"aria-hidden\": true as const };\n}\n\n/**\n * The four-point AI sparkle — the reserved mark for \"this runs AI\" (generate).\n * The same drawing appears on the agent avatar and the disclosure chip.\n * Decorative (`aria-hidden`) unless given an `aria-label`.\n */\nexport const AiSparkleIcon = React.forwardRef<SVGSVGElement, AiGlyphProps>(({ className, ...props }, ref) => (\n  <svg\n    ref={ref}\n    viewBox=\"0 0 24 24\"\n    width={16}\n    height={16}\n    fill=\"currentColor\"\n    focusable=\"false\"\n    data-ai-glyph=\"sparkle\"\n    className={cn(\"size-4 shrink-0\", className)}\n    {...glyphA11y(props)}\n    {...props}\n  >\n    <path d=\"M12 3c.6 4.8 3.2 7.4 9 9-5.8 1.6-8.4 4.2-9 9-.6-4.8-3.2-7.4-9-9 5.8-1.6 8.4-4.2 9-9z\" />\n  </svg>\n));\nAiSparkleIcon.displayName = \"AiSparkleIcon\";\n\n/**\n * The \"generated with AI\" mark: a content outline carrying the sparkle. Used\n * only on content AI wrote or changed, never on controls.\n */\nexport const AiGeneratedIcon = React.forwardRef<SVGSVGElement, AiGlyphProps>(({ className, ...props }, ref) => (\n  <svg\n    ref={ref}\n    viewBox=\"0 0 24 24\"\n    width={16}\n    height={16}\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.8}\n    strokeLinejoin=\"round\"\n    focusable=\"false\"\n    data-ai-glyph=\"generated\"\n    className={cn(\"size-4 shrink-0\", className)}\n    {...glyphA11y(props)}\n    {...props}\n  >\n    <path d=\"M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z\" />\n    <path\n      d=\"M12 6.5c.3 2.2 1.3 3.2 3.5 3.5-2.2.3-3.2 1.3-3.5 3.5-.3-2.2-1.3-3.2-3.5-3.5 2.2-.3 3.2-1.3 3.5-3.5z\"\n      fill=\"currentColor\"\n      stroke=\"none\"\n    />\n  </svg>\n));\nAiGeneratedIcon.displayName = \"AiGeneratedIcon\";\n\nexport interface AiWorkingIconProps extends AiGlyphProps {\n  /** Hold the mark still (it only turns while work is happening). */\n  still?: boolean;\n}\n\n/**\n * The \"agent working\" mark: a turning arc. The only AI mark that moves, and\n * only while work is happening; it holds still under reduced motion.\n */\nexport const AiWorkingIcon = React.forwardRef<SVGSVGElement, AiWorkingIconProps>(\n  ({ still = false, className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      width={16}\n      height={16}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.2}\n      strokeLinecap=\"round\"\n      focusable=\"false\"\n      data-ai-glyph=\"working\"\n      className={cn(\"size-4 shrink-0\", !still && \"animate-spin motion-reduce:animate-none\", className)}\n      {...glyphA11y(props)}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"8.5\" opacity={0.25} />\n      <path d=\"M12 3.5a8.5 8.5 0 0 1 8.5 8.5\" />\n    </svg>\n  ),\n);\nAiWorkingIcon.displayName = \"AiWorkingIcon\";\n\nfunction lucideGlyph(Icon: React.ComponentType<AiGlyphProps>, name: string, displayName: string) {\n  const Glyph = React.forwardRef<SVGSVGElement, AiGlyphProps>(({ className, ...props }, ref) => (\n    <Icon\n      ref={ref}\n      focusable=\"false\"\n      data-ai-glyph={name}\n      className={cn(\"size-4 shrink-0\", className)}\n      {...glyphA11y(props)}\n      {...props}\n    />\n  ));\n  Glyph.displayName = displayName;\n  return Glyph;\n}\n\n/** The \"transform\" mark (wand): for AI actions that change something the user already has — rewrite, enhance, restyle. */\nexport const AiWandIcon = lucideGlyph(\n  WandSparkles as unknown as React.ComponentType<AiGlyphProps>,\n  \"wand\",\n  \"AiWandIcon\",\n);\n/** The \"regenerate\" mark: run the same AI action again. */\nexport const AiRegenerateIcon = lucideGlyph(\n  RefreshCw as unknown as React.ComponentType<AiGlyphProps>,\n  \"regenerate\",\n  \"AiRegenerateIcon\",\n);\n/** The \"tool use\" mark: on the lines that say which tool the agent used. */\nexport const AiToolIcon = lucideGlyph(Wrench as unknown as React.ComponentType<AiGlyphProps>, \"tool\", \"AiToolIcon\");\n\n/* -------------------------------------------------------------------------- */\n/* Roles and the approved glyph lists                                          */\n/* -------------------------------------------------------------------------- */\n\n/** The four AI meanings. Each has its own mark, used for that meaning only. */\nexport type AiIconRole = \"ai-action\" | \"generated-content\" | \"agent-working\" | \"tool-use\";\n\n/** Every reserved glyph by name. */\nexport type AiGlyphName = \"sparkle\" | \"wand\" | \"regenerate\" | \"generated\" | \"working\" | \"tool\";\n\n/**\n * Approved glyphs per role. The lists do not overlap, so two meanings can\n * never share a mark.\n */\nexport interface AiIconGlyphs {\n  \"ai-action\"?: \"sparkle\" | \"wand\";\n  \"generated-content\"?: \"generated\";\n  \"agent-working\"?: \"working\";\n  \"tool-use\"?: \"tool\";\n}\n\n/** The reserved glyph components, by name. */\nexport const aiGlyphs: Record<AiGlyphName, React.ComponentType<AiGlyphProps>> = {\n  sparkle: AiSparkleIcon,\n  wand: AiWandIcon,\n  regenerate: AiRegenerateIcon,\n  generated: AiGeneratedIcon,\n  working: AiWorkingIcon,\n  tool: AiToolIcon,\n};\n\n/** The default glyph for each role. */\nexport const defaultAiIconGlyphs: Required<AiIconGlyphs> = {\n  \"ai-action\": \"sparkle\",\n  \"generated-content\": \"generated\",\n  \"agent-working\": \"working\",\n  \"tool-use\": \"tool\",\n};\n\nconst AiIconContext = React.createContext<Required<AiIconGlyphs>>(defaultAiIconGlyphs);\n\nexport interface AiIconProviderProps {\n  /** Product-wide choice of approved glyph per role. Set once; unset roles keep the default. */\n  glyphs?: AiIconGlyphs;\n  children?: React.ReactNode;\n}\n\n/**\n * Sets the approved glyph for each AI role once for the whole product.\n * Every `AiIcon`, `AiIcons`, `Iconography` and `Disclosure` under it uses\n * the same choice, so a meaning keeps one mark everywhere.\n */\nexport function AiIconProvider({ glyphs, children }: AiIconProviderProps) {\n  const value = React.useMemo(() => ({ ...defaultAiIconGlyphs, ...glyphs }), [glyphs]);\n  return <AiIconContext.Provider value={value}>{children}</AiIconContext.Provider>;\n}\nAiIconProvider.displayName = \"AiIconProvider\";\n\n/** The glyph component the nearest `AiIconProvider` approved for a role. */\nexport function useAiGlyph(role: AiIconRole): React.ComponentType<AiGlyphProps> {\n  const glyphs = React.useContext(AiIconContext);\n  return aiGlyphs[glyphs[role]];\n}\n\n/* -------------------------------------------------------------------------- */\n/* AiIcon — a meaning, with its mark and its words                             */\n/* -------------------------------------------------------------------------- */\n\nexport interface AiIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"role\"> {\n  /**\n   * Which AI meaning this is: `ai-action` (a control runs AI),\n   * `generated-content` (AI wrote this), `agent-working` (the agent is\n   * working now — announced politely) or `tool-use` (the agent used a tool).\n   */\n  role: AiIconRole;\n  /** The words that travel with the mark (\"Rewrite\", \"Generated with AI\", \"Rewriting release note…\"). Required: a mark is never alone. */\n  label: React.ReactNode;\n  /** Show the words visibly (default) or keep them for assistive tech only. */\n  showLabel?: boolean;\n}\n\nconst roleClasses: Record<AiIconRole, string> = {\n  \"ai-action\": \"text-foreground [&>svg]:text-brand\",\n  \"agent-working\": \"text-foreground [&>svg]:text-brand\",\n  \"tool-use\": \"text-muted-foreground\",\n  \"generated-content\":\n    \"rounded-full border border-brand/30 bg-background px-2 py-0.5 text-xs font-medium text-foreground [&>svg]:size-3.5 [&>svg]:text-brand\",\n};\n\n/**\n * One AI meaning drawn with its reserved mark and its words. The product\n * names the meaning; the component maps it to the approved glyph (see\n * `AiIconProvider`). `agent-working` turns its mark and announces its words\n * in a polite live region; the rest are static. For a control that runs\n * AI, use `Iconography`, which puts the `ai-action` mark on a Button.\n */\nexport const AiIcon = React.forwardRef<HTMLSpanElement, AiIconProps>(\n  ({ role, label, showLabel = true, className, ...props }, ref) => {\n    const Glyph = useAiGlyph(role);\n    return (\n      <span\n        ref={ref}\n        data-ai-role={role}\n        role={role === \"agent-working\" ? \"status\" : undefined}\n        aria-live={role === \"agent-working\" ? \"polite\" : undefined}\n        className={cn(\"inline-flex items-center gap-1.5 text-sm\", roleClasses[role], className)}\n        {...props}\n      >\n        <Glyph />\n        <span className={showLabel ? undefined : \"sr-only\"}>{label}</span>\n      </span>\n    );\n  },\n);\nAiIcon.displayName = \"AiIcon\";\n\n/* -------------------------------------------------------------------------- */\n/* AiIcons — the AI presence mark                                              */\n/* -------------------------------------------------------------------------- */\n\nexport type AiIconsVariant = \"sparkle\" | \"thinking-orb\" | \"branded-mark\";\nexport type AiIconsSize = \"sm\" | \"md\" | \"lg\";\nexport type AiIconsTone = \"solid\" | \"outline\";\n\nconst sizeClasses: Record<AiIconsSize, string> = {\n  sm: \"size-6 text-xs [&>svg]:size-3.5\",\n  md: \"size-8 text-sm [&>svg]:size-4\",\n  lg: \"size-10 text-lg [&>svg]:size-5\",\n};\n\nexport interface AiIconsProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * `sparkle` (the universal \"AI\" mark in a tile), `thinking-orb` (an\n   * animated orb for active, listening or generating states) or\n   * `branded-mark` (your product's own shape or letter).\n   */\n  variant?: AiIconsVariant;\n  /** 24 / 32 / 40 px. */\n  size?: AiIconsSize;\n  /** `solid` (filled tile) or `outline` (bordered tile). Sparkle and branded mark only. */\n  tone?: AiIconsTone;\n  /** Accessible name. Omit when words sit beside the mark — it is then decorative. */\n  label?: string;\n  /** Content of the branded mark (a letter or your SVG). Defaults to the first letter of `label`, else the sparkle. */\n  glyph?: React.ReactNode;\n}\n\n/**\n * The AI presence mark: one stable symbol that tells people the AI is here.\n * `sparkle` is the default; `thinking-orb` is the active state and pulses\n * (still under reduced motion — pair it with words such as an `AiIcon`\n * `agent-working` line); `branded-mark` carries your product's own shape.\n * Never a photo or a human face.\n */\nexport const AiIcons = React.forwardRef<HTMLSpanElement, AiIconsProps>(\n  ({ variant = \"sparkle\", size = \"md\", tone = \"solid\", label, glyph, className, ...props }, ref) => {\n    const Sparkle = useAiGlyph(\"ai-action\");\n    const a11y = label ? { role: \"img\" as const, \"aria-label\": label } : { \"aria-hidden\": true as const };\n    const base = \"inline-grid shrink-0 place-items-center font-semibold\";\n\n    if (variant === \"thinking-orb\") {\n      return (\n        <span\n          ref={ref}\n          data-variant={variant}\n          className={cn(\n            base,\n            \"rounded-full bg-gradient-to-br from-brand to-primary shadow-sm\",\n            aiColorClasses.working,\n            sizeClasses[size],\n            className,\n          )}\n          {...a11y}\n          {...props}\n        />\n      );\n    }\n\n    const toneClasses =\n      tone === \"solid\"\n        ? \"bg-primary text-primary-foreground\"\n        : \"border border-border bg-background text-foreground\";\n\n    if (variant === \"branded-mark\") {\n      const content = glyph ?? (label ? label.charAt(0).toLowerCase() : <Sparkle />);\n      return (\n        <span\n          ref={ref}\n          data-variant={variant}\n          className={cn(\n            base,\n            \"rounded-[28%] font-serif italic\",\n            tone === \"solid\" ? \"bg-gradient-to-br from-primary to-primary/70 text-primary-foreground\" : toneClasses,\n            sizeClasses[size],\n            className,\n          )}\n          {...a11y}\n          {...props}\n        >\n          {content}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        data-variant={variant}\n        className={cn(base, \"rounded-[22%]\", toneClasses, sizeClasses[size], className)}\n        {...a11y}\n        {...props}\n      >\n        <Sparkle />\n      </span>\n    );\n  },\n);\nAiIcons.displayName = \"AiIcons\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+type AiGlyphProps = React.SVGProps<SVGSVGElement>;
+/**
+ * The four-point AI sparkle — the reserved mark for "this runs AI" (generate).
+ * The same drawing appears on the agent avatar and the disclosure chip.
+ * Decorative (`aria-hidden`) unless given an `aria-label`.
+ */
+declare const AiSparkleIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/**
+ * The "generated with AI" mark: a content outline carrying the sparkle. Used
+ * only on content AI wrote or changed, never on controls.
+ */
+declare const AiGeneratedIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+interface AiWorkingIconProps extends AiGlyphProps {
+    /** Hold the mark still (it only turns while work is happening). */
+    still?: boolean;
+}
+/**
+ * The "agent working" mark: a turning arc. The only AI mark that moves, and
+ * only while work is happening; it holds still under reduced motion.
+ */
+declare const AiWorkingIcon: React.ForwardRefExoticComponent<Omit<AiWorkingIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The "transform" mark (wand): for AI actions that change something the user already has — rewrite, enhance, restyle. */
+declare const AiWandIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The "regenerate" mark: run the same AI action again. */
+declare const AiRegenerateIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The "tool use" mark: on the lines that say which tool the agent used. */
+declare const AiToolIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The four AI meanings. Each has its own mark, used for that meaning only. */
+type AiIconRole = "ai-action" | "generated-content" | "agent-working" | "tool-use";
+/** Every reserved glyph by name. */
+type AiGlyphName = "sparkle" | "wand" | "regenerate" | "generated" | "working" | "tool";
+/**
+ * Approved glyphs per role. The lists do not overlap, so two meanings can
+ * never share a mark.
+ */
+interface AiIconGlyphs {
+    "ai-action"?: "sparkle" | "wand";
+    "generated-content"?: "generated";
+    "agent-working"?: "working";
+    "tool-use"?: "tool";
+}
+/** The reserved glyph components, by name. */
+declare const aiGlyphs: Record<AiGlyphName, React.ComponentType<AiGlyphProps>>;
+/** The default glyph for each role. */
+declare const defaultAiIconGlyphs: Required<AiIconGlyphs>;
+interface AiIconProviderProps {
+    /** Product-wide choice of approved glyph per role. Set once; unset roles keep the default. */
+    glyphs?: AiIconGlyphs;
+    children?: React.ReactNode;
+}
+/**
+ * Sets the approved glyph for each AI role once for the whole product.
+ * Every `AiIcon`, `AiIcons`, `Iconography` and `Disclosure` under it uses
+ * the same choice, so a meaning keeps one mark everywhere.
+ */
+declare function AiIconProvider({ glyphs, children }: AiIconProviderProps): React.JSX.Element;
+declare namespace AiIconProvider {
+    var displayName: string;
+}
+/** The glyph component the nearest `AiIconProvider` approved for a role. */
+declare function useAiGlyph(role: AiIconRole): React.ComponentType<AiGlyphProps>;
+interface AiIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> {
+    /**
+     * Which AI meaning this is: `ai-action` (a control runs AI),
+     * `generated-content` (AI wrote this), `agent-working` (the agent is
+     * working now — announced politely) or `tool-use` (the agent used a tool).
+     */
+    role: AiIconRole;
+    /** The words that travel with the mark ("Rewrite", "Generated with AI", "Rewriting release note…"). Required: a mark is never alone. */
+    label: React.ReactNode;
+    /** Show the words visibly (default) or keep them for assistive tech only. */
+    showLabel?: boolean;
+}
+/**
+ * One AI meaning drawn with its reserved mark and its words. The product
+ * names the meaning; the component maps it to the approved glyph (see
+ * `AiIconProvider`). `agent-working` turns its mark and announces its words
+ * in a polite live region; the rest are static. For a control that runs
+ * AI, use `Iconography`, which puts the `ai-action` mark on a Button.
+ */
+declare const AiIcon: React.ForwardRefExoticComponent<AiIconProps & React.RefAttributes<HTMLSpanElement>>;
+type AiIconsVariant = "sparkle" | "thinking-orb" | "branded-mark";
+type AiIconsSize = "sm" | "md" | "lg";
+type AiIconsTone = "solid" | "outline";
+interface AiIconsProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * `sparkle` (the universal "AI" mark in a tile), `thinking-orb` (an
+     * animated orb for active, listening or generating states) or
+     * `branded-mark` (your product's own shape or letter).
+     */
+    variant?: AiIconsVariant;
+    /** 24 / 32 / 40 px. */
+    size?: AiIconsSize;
+    /** `solid` (filled tile) or `outline` (bordered tile). Sparkle and branded mark only. */
+    tone?: AiIconsTone;
+    /** Accessible name. Omit when words sit beside the mark — it is then decorative. */
+    label?: string;
+    /** Content of the branded mark (a letter or your SVG). Defaults to the first letter of `label`, else the sparkle. */
+    glyph?: React.ReactNode;
+}
+/**
+ * The AI presence mark: one stable symbol that tells people the AI is here.
+ * `sparkle` is the default; `thinking-orb` is the active state and pulses
+ * (still under reduced motion — pair it with words such as an `AiIcon`
+ * `agent-working` line); `branded-mark` carries your product's own shape.
+ * Never a photo or a human face.
+ */
+declare const AiIcons: React.ForwardRefExoticComponent<AiIconsProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { AiGeneratedIcon, type AiGlyphName, type AiGlyphProps, AiIcon, type AiIconGlyphs, type AiIconProps, AiIconProvider, type AiIconProviderProps, type AiIconRole, AiIcons, type AiIconsProps, type AiIconsSize, type AiIconsTone, type AiIconsVariant, AiRegenerateIcon, AiSparkleIcon, AiToolIcon, AiWandIcon, AiWorkingIcon, type AiWorkingIconProps, aiGlyphs, defaultAiIconGlyphs, useAiGlyph };

package/dist/index.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+type AiGlyphProps = React.SVGProps<SVGSVGElement>;
+/**
+ * The four-point AI sparkle — the reserved mark for "this runs AI" (generate).
+ * The same drawing appears on the agent avatar and the disclosure chip.
+ * Decorative (`aria-hidden`) unless given an `aria-label`.
+ */
+declare const AiSparkleIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/**
+ * The "generated with AI" mark: a content outline carrying the sparkle. Used
+ * only on content AI wrote or changed, never on controls.
+ */
+declare const AiGeneratedIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+interface AiWorkingIconProps extends AiGlyphProps {
+    /** Hold the mark still (it only turns while work is happening). */
+    still?: boolean;
+}
+/**
+ * The "agent working" mark: a turning arc. The only AI mark that moves, and
+ * only while work is happening; it holds still under reduced motion.
+ */
+declare const AiWorkingIcon: React.ForwardRefExoticComponent<Omit<AiWorkingIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The "transform" mark (wand): for AI actions that change something the user already has — rewrite, enhance, restyle. */
+declare const AiWandIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The "regenerate" mark: run the same AI action again. */
+declare const AiRegenerateIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The "tool use" mark: on the lines that say which tool the agent used. */
+declare const AiToolIcon: React.ForwardRefExoticComponent<Omit<AiGlyphProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+/** The four AI meanings. Each has its own mark, used for that meaning only. */
+type AiIconRole = "ai-action" | "generated-content" | "agent-working" | "tool-use";
+/** Every reserved glyph by name. */
+type AiGlyphName = "sparkle" | "wand" | "regenerate" | "generated" | "working" | "tool";
+/**
+ * Approved glyphs per role. The lists do not overlap, so two meanings can
+ * never share a mark.
+ */
+interface AiIconGlyphs {
+    "ai-action"?: "sparkle" | "wand";
+    "generated-content"?: "generated";
+    "agent-working"?: "working";
+    "tool-use"?: "tool";
+}
+/** The reserved glyph components, by name. */
+declare const aiGlyphs: Record<AiGlyphName, React.ComponentType<AiGlyphProps>>;
+/** The default glyph for each role. */
+declare const defaultAiIconGlyphs: Required<AiIconGlyphs>;
+interface AiIconProviderProps {
+    /** Product-wide choice of approved glyph per role. Set once; unset roles keep the default. */
+    glyphs?: AiIconGlyphs;
+    children?: React.ReactNode;
+}
+/**
+ * Sets the approved glyph for each AI role once for the whole product.
+ * Every `AiIcon`, `AiIcons`, `Iconography` and `Disclosure` under it uses
+ * the same choice, so a meaning keeps one mark everywhere.
+ */
+declare function AiIconProvider({ glyphs, children }: AiIconProviderProps): React.JSX.Element;
+declare namespace AiIconProvider {
+    var displayName: string;
+}
+/** The glyph component the nearest `AiIconProvider` approved for a role. */
+declare function useAiGlyph(role: AiIconRole): React.ComponentType<AiGlyphProps>;
+interface AiIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> {
+    /**
+     * Which AI meaning this is: `ai-action` (a control runs AI),
+     * `generated-content` (AI wrote this), `agent-working` (the agent is
+     * working now — announced politely) or `tool-use` (the agent used a tool).
+     */
+    role: AiIconRole;
+    /** The words that travel with the mark ("Rewrite", "Generated with AI", "Rewriting release note…"). Required: a mark is never alone. */
+    label: React.ReactNode;
+    /** Show the words visibly (default) or keep them for assistive tech only. */
+    showLabel?: boolean;
+}
+/**
+ * One AI meaning drawn with its reserved mark and its words. The product
+ * names the meaning; the component maps it to the approved glyph (see
+ * `AiIconProvider`). `agent-working` turns its mark and announces its words
+ * in a polite live region; the rest are static. For a control that runs
+ * AI, use `Iconography`, which puts the `ai-action` mark on a Button.
+ */
+declare const AiIcon: React.ForwardRefExoticComponent<AiIconProps & React.RefAttributes<HTMLSpanElement>>;
+type AiIconsVariant = "sparkle" | "thinking-orb" | "branded-mark";
+type AiIconsSize = "sm" | "md" | "lg";
+type AiIconsTone = "solid" | "outline";
+interface AiIconsProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * `sparkle` (the universal "AI" mark in a tile), `thinking-orb` (an
+     * animated orb for active, listening or generating states) or
+     * `branded-mark` (your product's own shape or letter).
+     */
+    variant?: AiIconsVariant;
+    /** 24 / 32 / 40 px. */
+    size?: AiIconsSize;
+    /** `solid` (filled tile) or `outline` (bordered tile). Sparkle and branded mark only. */
+    tone?: AiIconsTone;
+    /** Accessible name. Omit when words sit beside the mark — it is then decorative. */
+    label?: string;
+    /** Content of the branded mark (a letter or your SVG). Defaults to the first letter of `label`, else the sparkle. */
+    glyph?: React.ReactNode;
+}
+/**
+ * The AI presence mark: one stable symbol that tells people the AI is here.
+ * `sparkle` is the default; `thinking-orb` is the active state and pulses
+ * (still under reduced motion — pair it with words such as an `AiIcon`
+ * `agent-working` line); `branded-mark` carries your product's own shape.
+ * Never a photo or a human face.
+ */
+declare const AiIcons: React.ForwardRefExoticComponent<AiIconsProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { AiGeneratedIcon, type AiGlyphName, type AiGlyphProps, AiIcon, type AiIconGlyphs, type AiIconProps, AiIconProvider, type AiIconProviderProps, type AiIconRole, AiIcons, type AiIconsProps, type AiIconsSize, type AiIconsTone, type AiIconsVariant, AiRegenerateIcon, AiSparkleIcon, AiToolIcon, AiWandIcon, AiWorkingIcon, type AiWorkingIconProps, aiGlyphs, defaultAiIconGlyphs, useAiGlyph };

package/dist/index.js

@@ -0,0 +1,228 @@
+"use client";
+import * as React from 'react';
+import { Wrench, RefreshCw, WandSparkles } from 'lucide-react';
+import { cn } from '@nucleux/utils';
+import { aiColorClasses } from '@nucleux/color';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/index.tsx
+function glyphA11y(props) {
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+  return named ? { role: "img" } : { "aria-hidden": true };
+}
+var AiSparkleIcon = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ref,
+    viewBox: "0 0 24 24",
+    width: 16,
+    height: 16,
+    fill: "currentColor",
+    focusable: "false",
+    "data-ai-glyph": "sparkle",
+    className: cn("size-4 shrink-0", className),
+    ...glyphA11y(props),
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 3c.6 4.8 3.2 7.4 9 9-5.8 1.6-8.4 4.2-9 9-.6-4.8-3.2-7.4-9-9 5.8-1.6 8.4-4.2 9-9z" })
+  }
+));
+AiSparkleIcon.displayName = "AiSparkleIcon";
+var AiGeneratedIcon = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    ref,
+    viewBox: "0 0 24 24",
+    width: 16,
+    height: 16,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.8,
+    strokeLinejoin: "round",
+    focusable: "false",
+    "data-ai-glyph": "generated",
+    className: cn("size-4 shrink-0", className),
+    ...glyphA11y(props),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 6.5c.3 2.2 1.3 3.2 3.5 3.5-2.2.3-3.2 1.3-3.5 3.5-.3-2.2-1.3-3.2-3.5-3.5 2.2-.3 3.2-1.3 3.5-3.5z",
+          fill: "currentColor",
+          stroke: "none"
+        }
+      )
+    ]
+  }
+));
+AiGeneratedIcon.displayName = "AiGeneratedIcon";
+var AiWorkingIcon = React.forwardRef(
+  ({ still = false, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      width: 16,
+      height: 16,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.2,
+      strokeLinecap: "round",
+      focusable: "false",
+      "data-ai-glyph": "working",
+      className: cn("size-4 shrink-0", !still && "animate-spin motion-reduce:animate-none", className),
+      ...glyphA11y(props),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8.5", opacity: 0.25 }),
+        /* @__PURE__ */ jsx("path", { d: "M12 3.5a8.5 8.5 0 0 1 8.5 8.5" })
+      ]
+    }
+  )
+);
+AiWorkingIcon.displayName = "AiWorkingIcon";
+function lucideGlyph(Icon, name, displayName) {
+  const Glyph = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Icon,
+    {
+      ref,
+      focusable: "false",
+      "data-ai-glyph": name,
+      className: cn("size-4 shrink-0", className),
+      ...glyphA11y(props),
+      ...props
+    }
+  ));
+  Glyph.displayName = displayName;
+  return Glyph;
+}
+var AiWandIcon = lucideGlyph(
+  WandSparkles,
+  "wand",
+  "AiWandIcon"
+);
+var AiRegenerateIcon = lucideGlyph(
+  RefreshCw,
+  "regenerate",
+  "AiRegenerateIcon"
+);
+var AiToolIcon = lucideGlyph(Wrench, "tool", "AiToolIcon");
+var aiGlyphs = {
+  sparkle: AiSparkleIcon,
+  wand: AiWandIcon,
+  regenerate: AiRegenerateIcon,
+  generated: AiGeneratedIcon,
+  working: AiWorkingIcon,
+  tool: AiToolIcon
+};
+var defaultAiIconGlyphs = {
+  "ai-action": "sparkle",
+  "generated-content": "generated",
+  "agent-working": "working",
+  "tool-use": "tool"
+};
+var AiIconContext = React.createContext(defaultAiIconGlyphs);
+function AiIconProvider({ glyphs, children }) {
+  const value = React.useMemo(() => ({ ...defaultAiIconGlyphs, ...glyphs }), [glyphs]);
+  return /* @__PURE__ */ jsx(AiIconContext.Provider, { value, children });
+}
+AiIconProvider.displayName = "AiIconProvider";
+function useAiGlyph(role) {
+  const glyphs = React.useContext(AiIconContext);
+  return aiGlyphs[glyphs[role]];
+}
+var roleClasses = {
+  "ai-action": "text-foreground [&>svg]:text-brand",
+  "agent-working": "text-foreground [&>svg]:text-brand",
+  "tool-use": "text-muted-foreground",
+  "generated-content": "rounded-full border border-brand/30 bg-background px-2 py-0.5 text-xs font-medium text-foreground [&>svg]:size-3.5 [&>svg]:text-brand"
+};
+var AiIcon = React.forwardRef(
+  ({ role, label, showLabel = true, className, ...props }, ref) => {
+    const Glyph = useAiGlyph(role);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-ai-role": role,
+        role: role === "agent-working" ? "status" : void 0,
+        "aria-live": role === "agent-working" ? "polite" : void 0,
+        className: cn("inline-flex items-center gap-1.5 text-sm", roleClasses[role], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Glyph, {}),
+          /* @__PURE__ */ jsx("span", { className: showLabel ? void 0 : "sr-only", children: label })
+        ]
+      }
+    );
+  }
+);
+AiIcon.displayName = "AiIcon";
+var sizeClasses = {
+  sm: "size-6 text-xs [&>svg]:size-3.5",
+  md: "size-8 text-sm [&>svg]:size-4",
+  lg: "size-10 text-lg [&>svg]:size-5"
+};
+var AiIcons = React.forwardRef(
+  ({ variant = "sparkle", size = "md", tone = "solid", label, glyph, className, ...props }, ref) => {
+    const Sparkle = useAiGlyph("ai-action");
+    const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    const base = "inline-grid shrink-0 place-items-center font-semibold";
+    if (variant === "thinking-orb") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "data-variant": variant,
+          className: cn(
+            base,
+            "rounded-full bg-gradient-to-br from-brand to-primary shadow-sm",
+            aiColorClasses.working,
+            sizeClasses[size],
+            className
+          ),
+          ...a11y,
+          ...props
+        }
+      );
+    }
+    const toneClasses = tone === "solid" ? "bg-primary text-primary-foreground" : "border border-border bg-background text-foreground";
+    if (variant === "branded-mark") {
+      const content = glyph ?? (label ? label.charAt(0).toLowerCase() : /* @__PURE__ */ jsx(Sparkle, {}));
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "data-variant": variant,
+          className: cn(
+            base,
+            "rounded-[28%] font-serif italic",
+            tone === "solid" ? "bg-gradient-to-br from-primary to-primary/70 text-primary-foreground" : toneClasses,
+            sizeClasses[size],
+            className
+          ),
+          ...a11y,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-variant": variant,
+        className: cn(base, "rounded-[22%]", toneClasses, sizeClasses[size], className),
+        ...a11y,
+        ...props,
+        children: /* @__PURE__ */ jsx(Sparkle, {})
+      }
+    );
+  }
+);
+AiIcons.displayName = "AiIcons";
+
+export { AiGeneratedIcon, AiIcon, AiIconProvider, AiIcons, AiRegenerateIcon, AiSparkleIcon, AiToolIcon, AiWandIcon, AiWorkingIcon, aiGlyphs, defaultAiIconGlyphs, useAiGlyph };
+//# 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 { RefreshCw, WandSparkles, Wrench } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport { aiColorClasses } from \"@nucleux/color\";\n\n/* -------------------------------------------------------------------------- */\n/* Glyphs                                                                      */\n/* -------------------------------------------------------------------------- */\n\nexport type AiGlyphProps = React.SVGProps<SVGSVGElement>;\n\n/** Decorative unless the caller names it. */\nfunction glyphA11y(props: AiGlyphProps) {\n  const named = props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n  return named ? { role: \"img\" as const } : { \"aria-hidden\": true as const };\n}\n\n/**\n * The four-point AI sparkle — the reserved mark for \"this runs AI\" (generate).\n * The same drawing appears on the agent avatar and the disclosure chip.\n * Decorative (`aria-hidden`) unless given an `aria-label`.\n */\nexport const AiSparkleIcon = React.forwardRef<SVGSVGElement, AiGlyphProps>(({ className, ...props }, ref) => (\n  <svg\n    ref={ref}\n    viewBox=\"0 0 24 24\"\n    width={16}\n    height={16}\n    fill=\"currentColor\"\n    focusable=\"false\"\n    data-ai-glyph=\"sparkle\"\n    className={cn(\"size-4 shrink-0\", className)}\n    {...glyphA11y(props)}\n    {...props}\n  >\n    <path d=\"M12 3c.6 4.8 3.2 7.4 9 9-5.8 1.6-8.4 4.2-9 9-.6-4.8-3.2-7.4-9-9 5.8-1.6 8.4-4.2 9-9z\" />\n  </svg>\n));\nAiSparkleIcon.displayName = \"AiSparkleIcon\";\n\n/**\n * The \"generated with AI\" mark: a content outline carrying the sparkle. Used\n * only on content AI wrote or changed, never on controls.\n */\nexport const AiGeneratedIcon = React.forwardRef<SVGSVGElement, AiGlyphProps>(({ className, ...props }, ref) => (\n  <svg\n    ref={ref}\n    viewBox=\"0 0 24 24\"\n    width={16}\n    height={16}\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.8}\n    strokeLinejoin=\"round\"\n    focusable=\"false\"\n    data-ai-glyph=\"generated\"\n    className={cn(\"size-4 shrink-0\", className)}\n    {...glyphA11y(props)}\n    {...props}\n  >\n    <path d=\"M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7l-4 3v-3H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z\" />\n    <path\n      d=\"M12 6.5c.3 2.2 1.3 3.2 3.5 3.5-2.2.3-3.2 1.3-3.5 3.5-.3-2.2-1.3-3.2-3.5-3.5 2.2-.3 3.2-1.3 3.5-3.5z\"\n      fill=\"currentColor\"\n      stroke=\"none\"\n    />\n  </svg>\n));\nAiGeneratedIcon.displayName = \"AiGeneratedIcon\";\n\nexport interface AiWorkingIconProps extends AiGlyphProps {\n  /** Hold the mark still (it only turns while work is happening). */\n  still?: boolean;\n}\n\n/**\n * The \"agent working\" mark: a turning arc. The only AI mark that moves, and\n * only while work is happening; it holds still under reduced motion.\n */\nexport const AiWorkingIcon = React.forwardRef<SVGSVGElement, AiWorkingIconProps>(\n  ({ still = false, className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      width={16}\n      height={16}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.2}\n      strokeLinecap=\"round\"\n      focusable=\"false\"\n      data-ai-glyph=\"working\"\n      className={cn(\"size-4 shrink-0\", !still && \"animate-spin motion-reduce:animate-none\", className)}\n      {...glyphA11y(props)}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"8.5\" opacity={0.25} />\n      <path d=\"M12 3.5a8.5 8.5 0 0 1 8.5 8.5\" />\n    </svg>\n  ),\n);\nAiWorkingIcon.displayName = \"AiWorkingIcon\";\n\nfunction lucideGlyph(Icon: React.ComponentType<AiGlyphProps>, name: string, displayName: string) {\n  const Glyph = React.forwardRef<SVGSVGElement, AiGlyphProps>(({ className, ...props }, ref) => (\n    <Icon\n      ref={ref}\n      focusable=\"false\"\n      data-ai-glyph={name}\n      className={cn(\"size-4 shrink-0\", className)}\n      {...glyphA11y(props)}\n      {...props}\n    />\n  ));\n  Glyph.displayName = displayName;\n  return Glyph;\n}\n\n/** The \"transform\" mark (wand): for AI actions that change something the user already has — rewrite, enhance, restyle. */\nexport const AiWandIcon = lucideGlyph(\n  WandSparkles as unknown as React.ComponentType<AiGlyphProps>,\n  \"wand\",\n  \"AiWandIcon\",\n);\n/** The \"regenerate\" mark: run the same AI action again. */\nexport const AiRegenerateIcon = lucideGlyph(\n  RefreshCw as unknown as React.ComponentType<AiGlyphProps>,\n  \"regenerate\",\n  \"AiRegenerateIcon\",\n);\n/** The \"tool use\" mark: on the lines that say which tool the agent used. */\nexport const AiToolIcon = lucideGlyph(Wrench as unknown as React.ComponentType<AiGlyphProps>, \"tool\", \"AiToolIcon\");\n\n/* -------------------------------------------------------------------------- */\n/* Roles and the approved glyph lists                                          */\n/* -------------------------------------------------------------------------- */\n\n/** The four AI meanings. Each has its own mark, used for that meaning only. */\nexport type AiIconRole = \"ai-action\" | \"generated-content\" | \"agent-working\" | \"tool-use\";\n\n/** Every reserved glyph by name. */\nexport type AiGlyphName = \"sparkle\" | \"wand\" | \"regenerate\" | \"generated\" | \"working\" | \"tool\";\n\n/**\n * Approved glyphs per role. The lists do not overlap, so two meanings can\n * never share a mark.\n */\nexport interface AiIconGlyphs {\n  \"ai-action\"?: \"sparkle\" | \"wand\";\n  \"generated-content\"?: \"generated\";\n  \"agent-working\"?: \"working\";\n  \"tool-use\"?: \"tool\";\n}\n\n/** The reserved glyph components, by name. */\nexport const aiGlyphs: Record<AiGlyphName, React.ComponentType<AiGlyphProps>> = {\n  sparkle: AiSparkleIcon,\n  wand: AiWandIcon,\n  regenerate: AiRegenerateIcon,\n  generated: AiGeneratedIcon,\n  working: AiWorkingIcon,\n  tool: AiToolIcon,\n};\n\n/** The default glyph for each role. */\nexport const defaultAiIconGlyphs: Required<AiIconGlyphs> = {\n  \"ai-action\": \"sparkle\",\n  \"generated-content\": \"generated\",\n  \"agent-working\": \"working\",\n  \"tool-use\": \"tool\",\n};\n\nconst AiIconContext = React.createContext<Required<AiIconGlyphs>>(defaultAiIconGlyphs);\n\nexport interface AiIconProviderProps {\n  /** Product-wide choice of approved glyph per role. Set once; unset roles keep the default. */\n  glyphs?: AiIconGlyphs;\n  children?: React.ReactNode;\n}\n\n/**\n * Sets the approved glyph for each AI role once for the whole product.\n * Every `AiIcon`, `AiIcons`, `Iconography` and `Disclosure` under it uses\n * the same choice, so a meaning keeps one mark everywhere.\n */\nexport function AiIconProvider({ glyphs, children }: AiIconProviderProps) {\n  const value = React.useMemo(() => ({ ...defaultAiIconGlyphs, ...glyphs }), [glyphs]);\n  return <AiIconContext.Provider value={value}>{children}</AiIconContext.Provider>;\n}\nAiIconProvider.displayName = \"AiIconProvider\";\n\n/** The glyph component the nearest `AiIconProvider` approved for a role. */\nexport function useAiGlyph(role: AiIconRole): React.ComponentType<AiGlyphProps> {\n  const glyphs = React.useContext(AiIconContext);\n  return aiGlyphs[glyphs[role]];\n}\n\n/* -------------------------------------------------------------------------- */\n/* AiIcon — a meaning, with its mark and its words                             */\n/* -------------------------------------------------------------------------- */\n\nexport interface AiIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"role\"> {\n  /**\n   * Which AI meaning this is: `ai-action` (a control runs AI),\n   * `generated-content` (AI wrote this), `agent-working` (the agent is\n   * working now — announced politely) or `tool-use` (the agent used a tool).\n   */\n  role: AiIconRole;\n  /** The words that travel with the mark (\"Rewrite\", \"Generated with AI\", \"Rewriting release note…\"). Required: a mark is never alone. */\n  label: React.ReactNode;\n  /** Show the words visibly (default) or keep them for assistive tech only. */\n  showLabel?: boolean;\n}\n\nconst roleClasses: Record<AiIconRole, string> = {\n  \"ai-action\": \"text-foreground [&>svg]:text-brand\",\n  \"agent-working\": \"text-foreground [&>svg]:text-brand\",\n  \"tool-use\": \"text-muted-foreground\",\n  \"generated-content\":\n    \"rounded-full border border-brand/30 bg-background px-2 py-0.5 text-xs font-medium text-foreground [&>svg]:size-3.5 [&>svg]:text-brand\",\n};\n\n/**\n * One AI meaning drawn with its reserved mark and its words. The product\n * names the meaning; the component maps it to the approved glyph (see\n * `AiIconProvider`). `agent-working` turns its mark and announces its words\n * in a polite live region; the rest are static. For a control that runs\n * AI, use `Iconography`, which puts the `ai-action` mark on a Button.\n */\nexport const AiIcon = React.forwardRef<HTMLSpanElement, AiIconProps>(\n  ({ role, label, showLabel = true, className, ...props }, ref) => {\n    const Glyph = useAiGlyph(role);\n    return (\n      <span\n        ref={ref}\n        data-ai-role={role}\n        role={role === \"agent-working\" ? \"status\" : undefined}\n        aria-live={role === \"agent-working\" ? \"polite\" : undefined}\n        className={cn(\"inline-flex items-center gap-1.5 text-sm\", roleClasses[role], className)}\n        {...props}\n      >\n        <Glyph />\n        <span className={showLabel ? undefined : \"sr-only\"}>{label}</span>\n      </span>\n    );\n  },\n);\nAiIcon.displayName = \"AiIcon\";\n\n/* -------------------------------------------------------------------------- */\n/* AiIcons — the AI presence mark                                              */\n/* -------------------------------------------------------------------------- */\n\nexport type AiIconsVariant = \"sparkle\" | \"thinking-orb\" | \"branded-mark\";\nexport type AiIconsSize = \"sm\" | \"md\" | \"lg\";\nexport type AiIconsTone = \"solid\" | \"outline\";\n\nconst sizeClasses: Record<AiIconsSize, string> = {\n  sm: \"size-6 text-xs [&>svg]:size-3.5\",\n  md: \"size-8 text-sm [&>svg]:size-4\",\n  lg: \"size-10 text-lg [&>svg]:size-5\",\n};\n\nexport interface AiIconsProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * `sparkle` (the universal \"AI\" mark in a tile), `thinking-orb` (an\n   * animated orb for active, listening or generating states) or\n   * `branded-mark` (your product's own shape or letter).\n   */\n  variant?: AiIconsVariant;\n  /** 24 / 32 / 40 px. */\n  size?: AiIconsSize;\n  /** `solid` (filled tile) or `outline` (bordered tile). Sparkle and branded mark only. */\n  tone?: AiIconsTone;\n  /** Accessible name. Omit when words sit beside the mark — it is then decorative. */\n  label?: string;\n  /** Content of the branded mark (a letter or your SVG). Defaults to the first letter of `label`, else the sparkle. */\n  glyph?: React.ReactNode;\n}\n\n/**\n * The AI presence mark: one stable symbol that tells people the AI is here.\n * `sparkle` is the default; `thinking-orb` is the active state and pulses\n * (still under reduced motion — pair it with words such as an `AiIcon`\n * `agent-working` line); `branded-mark` carries your product's own shape.\n * Never a photo or a human face.\n */\nexport const AiIcons = React.forwardRef<HTMLSpanElement, AiIconsProps>(\n  ({ variant = \"sparkle\", size = \"md\", tone = \"solid\", label, glyph, className, ...props }, ref) => {\n    const Sparkle = useAiGlyph(\"ai-action\");\n    const a11y = label ? { role: \"img\" as const, \"aria-label\": label } : { \"aria-hidden\": true as const };\n    const base = \"inline-grid shrink-0 place-items-center font-semibold\";\n\n    if (variant === \"thinking-orb\") {\n      return (\n        <span\n          ref={ref}\n          data-variant={variant}\n          className={cn(\n            base,\n            \"rounded-full bg-gradient-to-br from-brand to-primary shadow-sm\",\n            aiColorClasses.working,\n            sizeClasses[size],\n            className,\n          )}\n          {...a11y}\n          {...props}\n        />\n      );\n    }\n\n    const toneClasses =\n      tone === \"solid\"\n        ? \"bg-primary text-primary-foreground\"\n        : \"border border-border bg-background text-foreground\";\n\n    if (variant === \"branded-mark\") {\n      const content = glyph ?? (label ? label.charAt(0).toLowerCase() : <Sparkle />);\n      return (\n        <span\n          ref={ref}\n          data-variant={variant}\n          className={cn(\n            base,\n            \"rounded-[28%] font-serif italic\",\n            tone === \"solid\" ? \"bg-gradient-to-br from-primary to-primary/70 text-primary-foreground\" : toneClasses,\n            sizeClasses[size],\n            className,\n          )}\n          {...a11y}\n          {...props}\n        >\n          {content}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        data-variant={variant}\n        className={cn(base, \"rounded-[22%]\", toneClasses, sizeClasses[size], className)}\n        {...a11y}\n        {...props}\n      >\n        <Sparkle />\n      </span>\n    );\n  },\n);\nAiIcons.displayName = \"AiIcons\";\n"]}

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@nucleux/ai-icons",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.6.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Icons — a small, stable AI mark vocabulary: action, generated, working and tool use — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "ai-icons"
+  ],
+  "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/color": "0.6.0",
+    "@nucleux/utils": "0.6.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/ai-icons"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
 }