@actioneer/ads 0.2.1 → 0.2.2

package/bin/ads-init.mjs

@@ -254,6 +254,15 @@ const CANDIDATE_CSS = [
 ];
 const CANDIDATE_LAYOUT = ["app/layout.tsx", "src/app/layout.tsx", "app/layout.jsx", "src/app/layout.jsx"];
 
+// 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 +270,81 @@ function fileExistsInState(state, relPosix) {
   return state._existing?.has(relPosix) ?? false;
 }
 
+/**
+ * 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.
+ * @returns {{path: string|null, content: string|null}}
+ */
+export function detectGlobalCss(cwd) {
+  const read = (rel) => {
+    const abs = path.join(cwd, rel);
+    return fs.existsSync(abs) ? fs.readFileSync(abs, "utf8") : null;
+  };
+  // 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);
+  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,7 +360,7 @@ 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 css = detectGlobalCss(cwd);
   const layoutPath = CANDIDATE_LAYOUT.find((p) => fs.existsSync(path.join(cwd, p))) ?? null;
 
   const _existing = new Set();
@@ -286,8 +370,8 @@ function readRepoState(cwd) {
 
   return {
     dependencies,
-    globalCssPath,
-    globalCssContent: globalCssPath ? read(globalCssPath) : null,
+    globalCssPath: css.path,
+    globalCssContent: css.content,
     layoutPath,
     layoutContent: layoutPath ? read(layoutPath) : null,
     hasAdsLintConfig:
@@ -336,6 +420,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 +474,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/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [

package/package.json

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