@actioneer/ads 0.2.1 → 0.2.3

package/bin/ads-init.mjs

@@ -12,8 +12,10 @@
  *   • inject `@import "@actioneer/ads/styles.css";` right after
  *     `@import "tailwindcss";` in the global stylesheet
  *   • scaffold the three required providers (TooltipProvider, ToastProvider,
- *     <MotionConfig reducedMotion="user">) as `app/providers.tsx` and wrap the
- *     root layout's children with them
+ *     <MotionConfig reducedMotion="user">) into a CLI-OWNED `ads-providers.{tsx,jsx}`
+ *     (never the user's own `providers.*` — see the overwrite-safety guard) and
+ *     wrap the root layout's children with them. The file extension + whether it
+ *     carries TS type annotations follow the project language (TS vs JS).
  *   • drop a consumer-mode `ads-lint.config.mjs`
  *     (`libraryPackage: "@actioneer/ads"`, `libraryRoot: null`)
  *
@@ -40,6 +42,7 @@ const STYLE_IMPORT = `@import "${PKG}/styles.css";`;
  * @property {string|null} layoutPath              repo-relative path to the root layout (or null)
  * @property {string|null} layoutContent
  * @property {boolean} hasAdsLintConfig
+ * @property {"ts"|"js"} [language]                consumer project language (default "ts")
  * @property {"npm"|"pnpm"|"yarn"|"bun"} [packageManager]  detected consumer PM (default npm)
  *
  * @typedef {Object} Edit
@@ -132,16 +135,21 @@ export function planInit(state) {
     });
   }
 
-  // 3. Scaffold the providers file + wrap the layout.
+  // 3. Scaffold the CLI-OWNED providers file + wrap the layout.
+  //    We write `ads-providers.{tsx,jsx}` (NOT `providers.*`) so a consumer's own
+  //    `providers.tsx` is never touched or trusted, and the layout imports
+  //    { Providers } from OUR file. Extension + TS annotations follow the language.
+  const language = state.language === "js" ? "js" : "ts";
+  const providersBasename = language === "js" ? "ads-providers.jsx" : "ads-providers.tsx";
   if (state.layoutPath != null) {
     const dir = path.posix.dirname(toPosix(state.layoutPath));
-    const providersPath = path.posix.join(dir, "providers.tsx");
+    const providersPath = path.posix.join(dir, providersBasename);
     if (!fileExistsInState(state, providersPath)) {
       edits.push({
         type: "write-file",
         title: `scaffold providers at ${providersPath}`,
         path: providersPath,
-        content: PROVIDERS_FILE,
+        content: providersFile(language),
       });
     }
     if (state.layoutContent != null && !state.layoutContent.includes("<Providers>")) {
@@ -154,25 +162,25 @@ export function planInit(state) {
           find: child,
           findIndex: state.layoutContent.indexOf(child, state.layoutContent.indexOf("return")),
           replace: `<Providers>${child}</Providers>`,
-          addImport: `import { Providers } from "./providers";`,
+          addImport: `import { Providers } from "./ads-providers";`,
         });
       } else {
         edits.push({
           type: "manual",
-          title: `wrap your app root's children with <Providers> (from ./providers)`,
+          title: `wrap your app root's children with <Providers> (from ./ads-providers)`,
         });
       }
     }
   } else {
     edits.push({
       type: "write-file",
-      title: "scaffold providers at app/providers.tsx",
-      path: "app/providers.tsx",
-      content: PROVIDERS_FILE,
+      title: `scaffold providers at app/${providersBasename}`,
+      path: `app/${providersBasename}`,
+      content: providersFile(language),
     });
     edits.push({
       type: "manual",
-      title: "wrap your app root's children with <Providers> (from ./providers)",
+      title: "wrap your app root's children with <Providers> (from ./ads-providers)",
     });
   }
 
@@ -212,7 +220,18 @@ export function findJsxChildren(source) {
   return null;
 }
 
-const PROVIDERS_FILE = `"use client";
+/**
+ * The ADS providers scaffold, generated for the consumer's language. A TS project
+ * gets the typed signature; a JS project gets a plain signature with NO TypeScript
+ * annotations (a `: { children: React.ReactNode }` in a `.jsx`/`.js` file is a
+ * syntax error). The file extension is chosen by the caller (`ads-providers.tsx`
+ * vs `ads-providers.jsx`).
+ * @param {"ts"|"js"} language
+ */
+export function providersFile(language) {
+  const signature =
+    language === "js" ? "{ children }" : "{ children }: { children: React.ReactNode }";
+  return `"use client";
 
 // Required ADS providers — wrap the app root once. Without TooltipProvider the
 // vendored tooltip/attachment chips crash; ToastProvider is needed to render
@@ -220,7 +239,7 @@ const PROVIDERS_FILE = `"use client";
 import { TooltipProvider, ToastProvider } from "${PKG}";
 import { MotionConfig } from "motion/react";
 
-export function Providers({ children }: { children: React.ReactNode }) {
+export function Providers(${signature}) {
   return (
     <MotionConfig reducedMotion="user">
       <ToastProvider>
@@ -230,6 +249,63 @@ export function Providers({ children }: { children: React.ReactNode }) {
   );
 }
 `;
+}
+
+/**
+ * Detect the consumer project's language. The chosen root layout's extension is
+ * the most authoritative signal (`.tsx`/`.ts` → TS, `.jsx`/`.js` → JS); with no
+ * layout, presence of a tsconfig.json decides, defaulting to JS. Drives whether
+ * the scaffolded providers file is `.tsx` (typed) or `.jsx` (untyped).
+ * @param {{layoutPath?:string|null, hasTsconfig?:boolean}} [signals]
+ * @returns {"ts"|"js"}
+ */
+export function detectLanguage({ layoutPath, hasTsconfig } = {}) {
+  if (layoutPath) {
+    if (/\.tsx?$/.test(layoutPath)) return "ts";
+    if (/\.jsx?$/.test(layoutPath)) return "js";
+  }
+  return hasTsconfig ? "ts" : "js";
+}
+
+/**
+ * Insert an import line into module source, DIRECTIVE-AWARE. If the file opens
+ * with a directive prologue (`"use client"` / `'use server'` / `"use strict"`,
+ * possibly after leading comments/blank lines), the import lands AFTER the last
+ * such directive so the directive stays the first statement — otherwise Next
+ * treats a `"use client"` layout as a Server Component and `next build` breaks.
+ * With no directive, the import prepends to the very top. Idempotent.
+ */
+export function insertImport(content, importLine) {
+  if (content.includes(importLine)) return content;
+  const lines = content.split("\n");
+  const directiveRe = /^(["'])use [\w-]+\1\s*;?$/;
+  let i = 0;
+  let insertAt = 0; // default: the very top
+  while (i < lines.length) {
+    const trimmed = lines[i].trim();
+    if (trimmed === "") {
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("//")) {
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("/*")) {
+      while (i < lines.length && !lines[i].includes("*/")) i++;
+      if (i < lines.length) i++; // consume the closing line
+      continue;
+    }
+    if (directiveRe.test(trimmed)) {
+      i++;
+      insertAt = i; // land after this (the last-seen) directive
+      continue;
+    }
+    break; // first real code line — stop scanning
+  }
+  lines.splice(insertAt, 0, importLine);
+  return lines.join("\n");
+}
 
 const ADS_LINT_CONFIG = `// @actioneer/ads-lint — consumer mode. Every file is a consumer, so the
 // barrel / deep-import / external-UI rules apply everywhere. See the ADS
@@ -252,7 +328,31 @@ const CANDIDATE_CSS = [
   "app/global.css",
   "src/styles/globals.css",
 ];
-const CANDIDATE_LAYOUT = ["app/layout.tsx", "src/app/layout.tsx", "app/layout.jsx", "src/app/layout.jsx"];
+// `create-next-app` emits `app/layout.js` for a JS project and `app/layout.tsx`
+// for TS, under `app/` or `src/app/`. All six must be recognized or a fresh JS
+// repo is never bootstrapped (#3).
+const CANDIDATE_LAYOUT = [
+  "app/layout.tsx",
+  "src/app/layout.tsx",
+  "app/layout.jsx",
+  "src/app/layout.jsx",
+  "app/layout.js",
+  "src/app/layout.js",
+];
+
+/** The chosen root layout among the conventional locations (or null). */
+function detectLayoutPath(cwd) {
+  return CANDIDATE_LAYOUT.find((p) => fs.existsSync(path.join(cwd, p))) ?? null;
+}
+
+// The load-bearing anchor: ADS styles must import into the SAME CSS graph as
+// tailwindcss, right after it (styles.css before tailwindcss leaves @theme
+// inert). Detection keys off this so a non-standard stylesheet is still found.
+const TAILWIND_IMPORT_RE = /@import\s+["']tailwindcss["']/;
+// Dirs the stylesheet scan never descends into.
+const SCAN_IGNORE = new Set([
+  "node_modules", ".git", ".next", "dist", "dist-lib", "build", "out", "coverage", ".turbo", ".vercel", ".cache",
+]);
 
 function toPosix(p) {
   return p.split(path.sep).join("/");
@@ -261,6 +361,114 @@ function fileExistsInState(state, relPosix) {
   return state._existing?.has(relPosix) ?? false;
 }
 
+/**
+ * Find the global stylesheet to wire ADS styles into. Detection is BOUND TO THE
+ * SELECTED LAYOUT first (#8): the stylesheet the chosen root layout actually
+ * imports (or one adjacent to it) is the sheet that loads, so a stale
+ * `app/globals.css` can't get the ADS import while the real `src/app/...` layout
+ * imports a different sheet. Only when the layout yields nothing do we fall back
+ * to the flat scan. Because the import order is load-bearing, each tier PREFERS
+ * the stylesheet that already imports tailwindcss — the conventional locations,
+ * then ANYWHERE in the project (bounded scan) so a non-standard path (e.g.
+ * `src/index.css`, `app/tailwind.css`) is auto-wired instead of degrading to a
+ * hand-edit note. Falls back to the first conventional file that exists (→ manual,
+ * with anchor guidance), else null.
+ * @param {string} cwd
+ * @param {string|null} [layoutPath]  the selected root layout (repo-relative), to bind CSS discovery to
+ * @returns {{path: string|null, content: string|null}}
+ */
+export function detectGlobalCss(cwd, layoutPath = null) {
+  const read = (rel) => {
+    const abs = path.join(cwd, rel);
+    return fs.existsSync(abs) ? fs.readFileSync(abs, "utf8") : null;
+  };
+
+  // 0. Layout-anchored: the stylesheet the SELECTED layout imports (resolved
+  //    relative to the layout dir), or a globals.css adjacent to it.
+  if (layoutPath) {
+    const layoutContent = read(layoutPath);
+    const layoutDir = path.posix.dirname(toPosix(layoutPath));
+    if (layoutContent != null) {
+      let firstImported = null;
+      for (const m of layoutContent.matchAll(/import\s+["']([^"']+\.css)["']/g)) {
+        const spec = m[1];
+        if (!spec.startsWith(".")) continue; // skip package/alias CSS imports
+        const rel = toPosix(path.posix.normalize(path.posix.join(layoutDir, spec)));
+        const c = read(rel);
+        if (c == null) continue;
+        if (firstImported == null) firstImported = { path: rel, content: c };
+        if (TAILWIND_IMPORT_RE.test(c)) return { path: rel, content: c }; // anchored sheet wins
+      }
+      if (firstImported) return firstImported; // the sheet the layout loads, even w/o anchor
+    }
+    // A conventional stylesheet sitting next to the layout.
+    for (const name of ["globals.css", "global.css"]) {
+      const rel = path.posix.join(layoutDir, name);
+      const c = read(rel);
+      if (c != null) return { path: rel, content: c };
+    }
+  }
+
+  // 1. Conventional location that already imports tailwindcss (the anchor).
+  for (const p of CANDIDATE_CSS) {
+    const c = read(p);
+    if (c != null && TAILWIND_IMPORT_RE.test(c)) return { path: p, content: c };
+  }
+  // 2. Any .css in the project importing tailwindcss (covers non-standard paths).
+  const scanned = scanForTailwindCss(cwd);
+  if (scanned) return scanned;
+  // 3. A conventional file exists but has no tailwindcss anchor → manual path.
+  for (const p of CANDIDATE_CSS) {
+    const c = read(p);
+    if (c != null) return { path: p, content: c };
+  }
+  return { path: null, content: null };
+}
+
+/** Bounded walk for the shallowest .css that imports tailwindcss. */
+function scanForTailwindCss(cwd, maxDepth = 5) {
+  const hits = [];
+  const walk = (rel, depth) => {
+    if (depth > maxDepth) return;
+    let entries;
+    try {
+      entries = fs.readdirSync(path.join(cwd, rel || "."), { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const e of entries) {
+      if (e.name.startsWith(".")) continue;
+      const childRel = rel ? `${rel}/${e.name}` : e.name;
+      if (e.isDirectory()) {
+        if (!SCAN_IGNORE.has(e.name)) walk(childRel, depth + 1);
+      } else if (e.name.endsWith(".css")) {
+        let c;
+        try {
+          c = fs.readFileSync(path.join(cwd, childRel), "utf8");
+        } catch {
+          continue;
+        }
+        if (TAILWIND_IMPORT_RE.test(c)) hits.push({ path: toPosix(childRel), content: c });
+      }
+    }
+  };
+  walk("", 0);
+  // Shallowest path wins (the app entry over a nested one); stable tiebreak.
+  hits.sort((a, b) => a.path.split("/").length - b.path.split("/").length || a.path.localeCompare(b.path));
+  return hits[0] ?? null;
+}
+
+/**
+ * Re-check the load-bearing outcome after init: is `@import "…/styles.css"`
+ * actually present in the detected global stylesheet? Drives the end-of-run
+ * summary so a missed/deferred styles import can't scroll past unnoticed.
+ * @returns {{ok: boolean, path: string|null}}
+ */
+export function verifyStylesWired(cwd) {
+  const css = detectGlobalCss(cwd, detectLayoutPath(cwd));
+  return { ok: css.content != null && css.content.includes(STYLE_IMPORT), path: css.path };
+}
+
 function readRepoState(cwd) {
   const read = (rel) => {
     const abs = path.join(cwd, rel);
@@ -276,22 +484,36 @@ function readRepoState(cwd) {
     lockfiles: LOCKFILES.filter((f) => fs.existsSync(path.join(cwd, f))),
   });
 
-  const globalCssPath = CANDIDATE_CSS.find((p) => fs.existsSync(path.join(cwd, p))) ?? null;
-  const layoutPath = CANDIDATE_LAYOUT.find((p) => fs.existsSync(path.join(cwd, p))) ?? null;
-
+  // Detect the layout FIRST — both CSS discovery (#8) and language detection (#3)
+  // key off it.
+  const layoutPath = detectLayoutPath(cwd);
+  const language = detectLanguage({
+    layoutPath,
+    hasTsconfig: fs.existsSync(path.join(cwd, "tsconfig.json")),
+  });
+  const css = detectGlobalCss(cwd, layoutPath);
+
+  // Existence set: the CLI-owned providers file lives next to the layout, in the
+  // language-matched extension — track both so a re-run is a no-op.
+  const providersDir = layoutPath ? path.posix.dirname(toPosix(layoutPath)) : "app";
+  const providersCandidates = [
+    path.posix.join(providersDir, "ads-providers.tsx"),
+    path.posix.join(providersDir, "ads-providers.jsx"),
+  ];
   const _existing = new Set();
-  for (const p of [...CANDIDATE_CSS, ...CANDIDATE_LAYOUT, "ads-lint.config.mjs", "app/providers.tsx", "src/app/providers.tsx"]) {
+  for (const p of [...CANDIDATE_CSS, ...CANDIDATE_LAYOUT, "ads-lint.config.mjs", ...providersCandidates]) {
     if (fs.existsSync(path.join(cwd, p))) _existing.add(p);
   }
 
   return {
     dependencies,
-    globalCssPath,
-    globalCssContent: globalCssPath ? read(globalCssPath) : null,
+    globalCssPath: css.path,
+    globalCssContent: css.content,
     layoutPath,
     layoutContent: layoutPath ? read(layoutPath) : null,
     hasAdsLintConfig:
       fs.existsSync(path.join(cwd, "ads-lint.config.mjs")) || fs.existsSync(path.join(cwd, "ads-lint.config.js")),
+    language,
     packageManager,
     _existing,
   };
@@ -307,6 +529,13 @@ function applyEdit(cwd, edit) {
       return;
     }
     case "write-file": {
+      // NEVER overwrite an existing file (#4): an existing source file — even the
+      // CLI-owned providers name — is left untouched and reported, so init can
+      // never destroy user content.
+      if (fs.existsSync(abs)) {
+        console.log(`  → skipped ${edit.path} (already exists — left untouched)`);
+        return;
+      }
       fs.mkdirSync(path.dirname(abs), { recursive: true });
       fs.writeFileSync(abs, edit.content);
       console.log(`  → wrote ${edit.path}`);
@@ -324,7 +553,10 @@ function applyEdit(cwd, edit) {
       } else {
         content = content.replace(edit.find, edit.replace);
       }
-      if (edit.addImport && !content.includes(edit.addImport)) content = `${edit.addImport}\n${content}`;
+      // Directive-aware (#5): insert the import AFTER any leading `"use client"`
+      // prologue so the directive stays first and `next build` keeps the layout a
+      // Client Component.
+      if (edit.addImport) content = insertImport(content, edit.addImport);
       fs.writeFileSync(abs, content);
       console.log(`  → edited ${edit.path}`);
       return;
@@ -336,6 +568,47 @@ function applyEdit(cwd, edit) {
   }
 }
 
+/**
+ * End-of-run summary. The styles import carries EVERY token (colors, type, and
+ * the animation curves/speeds), so its outcome gets promoted out of the
+ * scrolling edit log into a verified ✓ / ⚠ block that can't be missed — plus any
+ * remaining manual steps and the import hint.
+ */
+function printSummary(cwd, edits) {
+  const wired = verifyStylesWired(cwd);
+  const bar = "─".repeat(70);
+
+  console.log("");
+  if (wired.ok) {
+    console.log(`✓ ADS styles wired — \`${STYLE_IMPORT}\` is in ${wired.path}.`);
+    console.log(`  That one import carries every ADS token: colors, typography, and the`);
+    console.log(`  animation curves/speeds.`);
+  } else {
+    console.log(bar);
+    console.log(`⚠  ACTION REQUIRED — ADS styles are NOT imported yet.`);
+    console.log(``);
+    console.log(`   Nothing will be themed until you add this to your global stylesheet,`);
+    console.log(`   immediately AFTER the tailwindcss import (the order is load-bearing):`);
+    console.log(``);
+    console.log(`       @import "tailwindcss";`);
+    console.log(`       ${STYLE_IMPORT}`);
+    console.log(``);
+    console.log(`   Without it NO tokens load — colors, typography, and every animation`);
+    console.log(`   curve/speed will be missing.`);
+    console.log(bar);
+  }
+
+  // Surface any non-styles manual step (e.g. the layout <Providers> wrap) too —
+  // the styles step is already covered by the block above.
+  const otherManual = edits.filter((e) => e.type === "manual" && !/styles\.css/.test(e.title));
+  if (otherManual.length) {
+    console.log(`\n  Remaining manual step(s):`);
+    for (const m of otherManual) console.log(`    • ${m.title}`);
+  }
+
+  console.log(`\n  Then import components: \`import { Button } from "${PKG}";\``);
+}
+
 function main() {
   const cmd = process.argv[2];
   const cwd = process.cwd();
@@ -349,12 +622,15 @@ function main() {
 
   if (edits.length === 0) {
     console.log(`${PKG} init: nothing to do — already configured.`);
-    return;
+  } else {
+    console.log(`${PKG} init: applying ${edits.length} edit(s)…`);
+    for (const edit of edits) applyEdit(cwd, edit);
+    console.log(`\n${PKG} init: done.`);
   }
 
-  console.log(`${PKG} init: applying ${edits.length} edit(s)…`);
-  for (const edit of edits) applyEdit(cwd, edit);
-  console.log(`\n${PKG} init: done. Import components with \`import { Button } from "${PKG}";\``);
+  // Always verify + summarize the load-bearing styles import (fixes #2: a
+  // deferred/missed styles import can no longer scroll past unnoticed).
+  printSummary(cwd, edits);
 }
 
 /**

package/llms.txt

@@ -253,8 +253,6 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 
 - [Accordion] — Use for FAQ-style or settings-style stacked content where headings should collapse to save space and only the relevant section needs to be visible at once. [docs](https://ads.actioneer.dev/#/accordion)
 - [AccordionItem] — component [docs](https://ads.actioneer.dev/#/accordion)
-- [ANSWER_TOOL_DESCRIPTION] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
-- [ANSWER_TOOL_NAME] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [AnswerRenderer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [AreaChart] — component [docs](https://ads.actioneer.dev/#/chart)
 - [Avatar] — Use to represent a person or entity as a compact photo-or-initials glyph, standalone or stacked in an AvatarGroup. [docs](https://ads.actioneer.dev/#/avatar)
@@ -371,6 +369,8 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - [TreemapDatum] — TypeScript type
 - [TrendAnswerProps] — TypeScript type
 - [TrendAnswerSpec] — TypeScript type
+- [ANSWER_TOOL_DESCRIPTION] — utility
+- [ANSWER_TOOL_NAME] — utility
 - [AnswerFollowUpSchema] — utility
 - [AnswerSignalSchema] — utility
 - [AnswerSourceSchema] — utility
@@ -526,9 +526,6 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - [ToolInput] — component [docs](https://ads.actioneer.dev/#/ai/tool)
 - [ToolOutput] — component [docs](https://ads.actioneer.dev/#/ai/tool)
 - [Voice] — component [docs](https://ads.actioneer.dev/#/ai/voice)
-- [VOICE_PALETTES] — component [docs](https://ads.actioneer.dev/#/ai/voice)
-- [VOICE_STATES] — component [docs](https://ads.actioneer.dev/#/ai/voice)
-- [VOICE_VARIANTS] — component [docs](https://ads.actioneer.dev/#/ai/voice)
 - [VoiceConnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
 - [VoiceControl] — component [docs](https://ads.actioneer.dev/#/ai/voice)
 - [VoiceDisconnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
@@ -622,10 +619,12 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - [VoiceVariant] — TypeScript type
 - [useReasoning] — React hook
 - [Tool] — utility
+- [VOICE_PALETTES] — utility
+- [VOICE_STATES] — utility
+- [VOICE_VARIANTS] — utility
 
 ### Chat
 
-- [ACTIONEER_FILE_ACCEPT] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [AssistantActionBar] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [AssistantMessage] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [AssistantRuntimeProvider] — component [docs](https://ads.actioneer.dev/#/demo/ask)
@@ -647,11 +646,9 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - [ComposerQuotePreviewRoot] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [ComposerQuotePreviewText] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [ComposerTriggerPopover] — component [docs](https://ads.actioneer.dev/#/demo/ask)
-- [CONTEXT_MIME] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [DeepResearchProvider] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [DirectiveText] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [EditComposer] — component [docs](https://ads.actioneer.dev/#/demo/ask)
-- [EMPTY_COMPONENTS] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [ErrorRoot] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [ErrorText] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [File] — component [docs](https://ads.actioneer.dev/#/demo/ask)
@@ -661,7 +658,6 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - [FileRoot] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [FileSize] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [FollowUpSuggestion] — component [docs](https://ads.actioneer.dev/#/demo/ask)
-- [HARNESS_MIME] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [Image] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [ImageActions] — component [docs](https://ads.actioneer.dev/#/demo/ask)
 - [ImageContentFilterError] — component [docs](https://ads.actioneer.dev/#/demo/ask)
@@ -734,15 +730,19 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - [useAssistantRuntime] — React hook
 - [useAuiState] — React hook
 - [useLocalRuntime] — React hook
+- [ACTIONEER_FILE_ACCEPT] — utility
 - [ActioneerFileAttachmentAdapter] — utility
 - [ComposerAddContext] — utility
 - [CompositeAttachmentAdapter] — utility
+- [CONTEXT_MIME] — utility
 - [ContextAttachmentAdapter] — utility
 - [createDirectiveText] — utility
+- [EMPTY_COMPONENTS] — utility
 - [fileVariants] — utility
 - [formatFileSize] — utility
 - [getBase64Size] — utility
 - [getMimeTypeIcon] — utility
+- [HARNESS_MIME] — utility
 - [HarnessAttachmentAdapter] — utility
 - [imageVariants] — utility
 - [isNewChatView] — utility

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -17,10 +17,10 @@
   ],
   "counts": {
     "total": 583,
-    "component": 307,
+    "component": 298,
     "type": 236,
     "hook": 6,
-    "util": 34
+    "util": 43
   },
   "tokens": [
     {
@@ -1618,48 +1618,6 @@
         "title"
       ]
     },
-    {
-      "name": "ANSWER_TOOL_DESCRIPTION",
-      "family": "Data display",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "answer",
-      "showcaseUrl": "https://ads.actioneer.dev/#/ai/answer",
-      "variants": {
-        "tone": {
-          "values": [
-            "default",
-            "primary",
-            "success",
-            "warning",
-            "danger",
-            "info"
-          ],
-          "default": "default"
-        }
-      }
-    },
-    {
-      "name": "ANSWER_TOOL_NAME",
-      "family": "Data display",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "answer",
-      "showcaseUrl": "https://ads.actioneer.dev/#/ai/answer",
-      "variants": {
-        "tone": {
-          "values": [
-            "default",
-            "primary",
-            "success",
-            "warning",
-            "danger",
-            "info"
-          ],
-          "default": "default"
-        }
-      }
-    },
     {
       "name": "AnswerRenderer",
       "family": "Data display",
@@ -3005,6 +2963,20 @@
       "importPath": "@actioneer/ads",
       "module": "answer"
     },
+    {
+      "name": "ANSWER_TOOL_DESCRIPTION",
+      "family": "Data display",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "answer"
+    },
+    {
+      "name": "ANSWER_TOOL_NAME",
+      "family": "Data display",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "answer"
+    },
     {
       "name": "AnswerFollowUpSchema",
       "family": "Data display",
@@ -4360,30 +4332,6 @@
         "onReady"
       ]
     },
-    {
-      "name": "VOICE_PALETTES",
-      "family": "AI Elements",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "voice",
-      "showcaseUrl": "https://ads.actioneer.dev/#/ai/voice"
-    },
-    {
-      "name": "VOICE_STATES",
-      "family": "AI Elements",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "voice",
-      "showcaseUrl": "https://ads.actioneer.dev/#/ai/voice"
-    },
-    {
-      "name": "VOICE_VARIANTS",
-      "family": "AI Elements",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "voice",
-      "showcaseUrl": "https://ads.actioneer.dev/#/ai/voice"
-    },
     {
       "name": "VoiceConnectButton",
       "family": "AI Elements",
@@ -5071,14 +5019,25 @@
       "module": "tool"
     },
     {
-      "name": "ACTIONEER_FILE_ACCEPT",
-      "family": "Chat",
-      "kind": "component",
+      "name": "VOICE_PALETTES",
+      "family": "AI Elements",
+      "kind": "util",
       "importPath": "@actioneer/ads",
-      "module": "attachment",
-      "vendored": true,
-      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
-      "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
+      "module": "voice"
+    },
+    {
+      "name": "VOICE_STATES",
+      "family": "AI Elements",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "voice"
+    },
+    {
+      "name": "VOICE_VARIANTS",
+      "family": "AI Elements",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "voice"
     },
     {
       "name": "AssistantActionBar",
@@ -5290,16 +5249,6 @@
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
       "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
     },
-    {
-      "name": "CONTEXT_MIME",
-      "family": "Chat",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "composer-add-context",
-      "vendored": true,
-      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
-      "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
-    },
     {
       "name": "DeepResearchProvider",
       "family": "Chat",
@@ -5330,16 +5279,6 @@
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
       "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
     },
-    {
-      "name": "EMPTY_COMPONENTS",
-      "family": "Chat",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "thread-context",
-      "vendored": true,
-      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
-      "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
-    },
     {
       "name": "ErrorRoot",
       "family": "Chat",
@@ -5430,16 +5369,6 @@
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
       "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
     },
-    {
-      "name": "HARNESS_MIME",
-      "family": "Chat",
-      "kind": "component",
-      "importPath": "@actioneer/ads",
-      "module": "composer-harness",
-      "vendored": true,
-      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export.",
-      "showcaseUrl": "https://ads.actioneer.dev/#/demo/ask"
-    },
     {
       "name": "Image",
       "family": "Chat",
@@ -6138,6 +6067,15 @@
       "vendored": true,
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
     },
+    {
+      "name": "ACTIONEER_FILE_ACCEPT",
+      "family": "Chat",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "attachment",
+      "vendored": true,
+      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
+    },
     {
       "name": "ActioneerFileAttachmentAdapter",
       "family": "Chat",
@@ -6165,6 +6103,15 @@
       "vendored": true,
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
     },
+    {
+      "name": "CONTEXT_MIME",
+      "family": "Chat",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "composer-add-context",
+      "vendored": true,
+      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
+    },
     {
       "name": "ContextAttachmentAdapter",
       "family": "Chat",
@@ -6183,6 +6130,15 @@
       "vendored": true,
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
     },
+    {
+      "name": "EMPTY_COMPONENTS",
+      "family": "Chat",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "thread-context",
+      "vendored": true,
+      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
+    },
     {
       "name": "fileVariants",
       "family": "Chat",
@@ -6219,6 +6175,15 @@
       "vendored": true,
       "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
     },
+    {
+      "name": "HARNESS_MIME",
+      "family": "Chat",
+      "kind": "util",
+      "importPath": "@actioneer/ads",
+      "module": "composer-harness",
+      "vendored": true,
+      "note": "Vendored assistant-ui component. Props follow upstream assistant-ui, not ADS conventions; the chat family needs an <AssistantRuntimeProvider> (chat runtime) and a <TooltipProvider> ancestor. Import from \"@actioneer/ads\" like any ADS export."
+    },
     {
       "name": "HarnessAttachmentAdapter",
       "family": "Chat",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -39,20 +39,20 @@
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
-  /* ---- Type scale ---- base = 13px (0.8125rem). Root stays 16px so the
-     spacing grid is unaffected; only text sizes are anchored to 13px. */
+  /* ---- Type scale ---- base = 14px (0.875rem). Root stays 16px so the
+     spacing grid is unaffected; only text sizes are anchored to 14px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
      Don't reintroduce 2xs/3xl/4xl or in-between steps; if a size feels
      missing, the answer is weight/color, not a new size. */
-  --text-xs: 0.6875rem;    /* 11px — captions, secondary text, table cells, keycaps */
+  --text-xs: 0.75rem;      /* 12px — captions, secondary text, table cells, keycaps */
   --text-xs--line-height: 1rem;
-  /* text-sm is aliased to text-xs (both 11px). The scale is intentionally
-     11 · 13 · 15 · 21 · 26 with no 12px tier — but keeping the token pointed
-     at 11px stops any stray `text-sm` from falling back to Tailwind's
-     default 14px, which would land off the scale entirely. */
-  --text-sm: 0.6875rem;
+  /* text-sm is aliased to text-xs (both 12px). The scale is intentionally
+     12 · 14 · 15 · 21 · 26 with no in-between tier — keeping the token
+     pointed at 12px stops any stray `text-sm` from falling back to
+     Tailwind's default 14px, which would silently read as base. */
+  --text-sm: 0.75rem;
   --text-sm--line-height: 1rem;
-  --text-base: 0.8125rem;  /* 13px — BASE body */
+  --text-base: 0.875rem;   /* 14px — BASE body */
   --text-base--line-height: 1.25rem;
   --text-lg: 0.9375rem;    /* 15px — emphasized body, section headings */
   --text-lg--line-height: 1.375rem;
@@ -470,7 +470,7 @@
     background-color: var(--background);
     color: var(--foreground);
     font-family: var(--font-sans);
-    font-size: var(--text-base); /* 13px base */
+    font-size: var(--text-base); /* 14px base */
     font-feature-settings: "cv01", "ss01";
     font-synthesis-weight: none;
   }

package/theme.css

@@ -12,20 +12,20 @@
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
-  /* ---- Type scale ---- base = 13px (0.8125rem). Root stays 16px so the
-     spacing grid is unaffected; only text sizes are anchored to 13px. */
+  /* ---- Type scale ---- base = 14px (0.875rem). Root stays 16px so the
+     spacing grid is unaffected; only text sizes are anchored to 14px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
      Don't reintroduce 2xs/3xl/4xl or in-between steps; if a size feels
      missing, the answer is weight/color, not a new size. */
-  --text-xs: 0.6875rem;    /* 11px — captions, secondary text, table cells, keycaps */
+  --text-xs: 0.75rem;      /* 12px — captions, secondary text, table cells, keycaps */
   --text-xs--line-height: 1rem;
-  /* text-sm is aliased to text-xs (both 11px). The scale is intentionally
-     11 · 13 · 15 · 21 · 26 with no 12px tier — but keeping the token pointed
-     at 11px stops any stray `text-sm` from falling back to Tailwind's
-     default 14px, which would land off the scale entirely. */
-  --text-sm: 0.6875rem;
+  /* text-sm is aliased to text-xs (both 12px). The scale is intentionally
+     12 · 14 · 15 · 21 · 26 with no in-between tier — keeping the token
+     pointed at 12px stops any stray `text-sm` from falling back to
+     Tailwind's default 14px, which would silently read as base. */
+  --text-sm: 0.75rem;
   --text-sm--line-height: 1rem;
-  --text-base: 0.8125rem;  /* 13px — BASE body */
+  --text-base: 0.875rem;   /* 14px — BASE body */
   --text-base--line-height: 1.25rem;
   --text-lg: 0.9375rem;    /* 15px — emphasized body, section headings */
   --text-lg--line-height: 1.375rem;