@actioneer/ads 0.2.2 → 0.2.4

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,22 @@ 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
@@ -271,20 +362,53 @@ function fileExistsInState(state, relPosix) {
 }
 
 /**
- * Find the global stylesheet to wire ADS styles into. Because the import order
- * is load-bearing, detection PREFERS the stylesheet that already imports
- * tailwindcss — first among 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.
+ * 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) {
+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);
@@ -341,7 +465,7 @@ function scanForTailwindCss(cwd, maxDepth = 5) {
  * @returns {{ok: boolean, path: string|null}}
  */
 export function verifyStylesWired(cwd) {
-  const css = detectGlobalCss(cwd);
+  const css = detectGlobalCss(cwd, detectLayoutPath(cwd));
   return { ok: css.content != null && css.content.includes(STYLE_IMPORT), path: css.path };
 }
 
@@ -360,11 +484,24 @@ function readRepoState(cwd) {
     lockfiles: LOCKFILES.filter((f) => fs.existsSync(path.join(cwd, f))),
   });
 
-  const css = detectGlobalCss(cwd);
-  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);
   }
 
@@ -376,6 +513,7 @@ function readRepoState(cwd) {
     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,
   };
@@ -391,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}`);
@@ -408,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;

package/components/ai-elements/chain-of-thought.d.ts

@@ -1,29 +1,36 @@
 import { Badge } from '../badge';
-import { CollapsibleContent, CollapsibleTrigger } from '../collapsible';
-import { ComponentProps, ComponentType, ReactNode } from 'react';
-export type ChainOfThoughtProps = ComponentProps<"div"> & {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A step-first reasoning trace. The root is intentionally only a list: each
+ * step owns its own disclosure so the trace does not need a redundant global
+ * "Chain of Thought" trigger above it.
+ */
+export type ChainOfThoughtProps = ComponentProps<"div">;
+export declare const ChainOfThought: import('react').MemoExoticComponent<({ className, role, ...props }: ChainOfThoughtProps) => import("react").JSX.Element>;
+export type ChainOfThoughtStatus = "complete" | "active" | "pending";
+export type ChainOfThoughtStepProps = ComponentProps<typeof Collapsible> & {
+    status?: ChainOfThoughtStatus;
 };
-export declare const ChainOfThought: import('react').MemoExoticComponent<({ className, open, defaultOpen, onOpenChange, children, ...props }: ChainOfThoughtProps) => import("react").JSX.Element>;
-export type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
-export declare const ChainOfThoughtHeader: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtHeaderProps) => import("react").JSX.Element>;
-export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-    label: ReactNode;
-    description?: ReactNode;
-    status?: "complete" | "active" | "pending";
+export declare const ChainOfThoughtStep: import('react').MemoExoticComponent<({ className, defaultOpen, status, role, ...props }: ChainOfThoughtStepProps) => import("react").JSX.Element>;
+export type ChainOfThoughtTriggerProps = Omit<ComponentProps<typeof CollapsibleTrigger>, "asChild" | "children"> & {
+    children: ReactNode;
+    /** Semantic icon rendered on the reasoning rail. */
+    leftIcon?: ReactNode;
+    /** Optional trailing metadata such as elapsed time. */
+    endContent?: ReactNode;
+    /** Swap the semantic icon for a disclosure affordance on hover. */
+    swapIconOnHover?: boolean;
 };
-export declare const ChainOfThoughtStep: import('react').MemoExoticComponent<({ className, icon: Icon, label, description, status, children, ...props }: ChainOfThoughtStepProps) => import("react").JSX.Element>;
+export declare const ChainOfThoughtTrigger: import('react').MemoExoticComponent<({ className, children, leftIcon, endContent, swapIconOnHover, ...props }: ChainOfThoughtTriggerProps) => import("react").JSX.Element>;
+export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const ChainOfThoughtContent: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => import("react").JSX.Element>;
+export type ChainOfThoughtItemProps = ComponentProps<"div">;
+export declare const ChainOfThoughtItem: import('react').MemoExoticComponent<({ className, ...props }: ChainOfThoughtItemProps) => import("react").JSX.Element>;
 export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
 export declare const ChainOfThoughtSearchResults: import('react').MemoExoticComponent<({ className, ...props }: ChainOfThoughtSearchResultsProps) => import("react").JSX.Element>;
 export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
 export declare const ChainOfThoughtSearchResult: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtSearchResultProps) => import("react").JSX.Element>;
-export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
-export declare const ChainOfThoughtContent: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => import("react").JSX.Element>;
 export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
     caption?: string;
 };