@calo-design/cli 0.4.3 → 0.4.5

package/bin/cli.js

@@ -408,6 +408,44 @@ export default function Index() {
 `);
 }
 
+// The component gallery's routes: a root layout (fonts + providers, no local imports so it's
+// portable) and the @calo/design-system showroom (bundled with the CLI) as the index route.
+// Always (re)written so a `calo-design update` + relaunch also ships the latest showroom.
+function writeGalleryApp(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  const appDir = path.join(srcDir, "app");
+  fs.mkdirSync(appDir, { recursive: true });
+  // Silences known non-actionable RNW-on-React-19 dev warnings (nested Pressables, deprecated
+  // style props) so the embedded gallery has a clean overlay. Imported first in _layout.
+  fs.cpSync(path.join(__dirname, "templates", "gallery-suppress.ts"), path.join(srcDir, "suppress-dev-warnings.ts"));
+  fs.writeFileSync(path.join(appDir, "_layout.tsx"), `import "../suppress-dev-warnings";
+import { Stack } from "expo-router";
+import { useFonts } from "expo-font";
+import { CaloBottomSheetProvider, CaloScreen, caloFonts, caloTokens } from "@calo/design-system";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+export default function Layout() {
+  const [loaded] = useFonts(caloFonts);
+  return (
+    <SafeAreaProvider>
+      {loaded ? (
+        <CaloBottomSheetProvider>
+          <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: caloTokens.color.canvas } }} />
+        </CaloBottomSheetProvider>
+      ) : (
+        <CaloScreen />
+      )}
+    </SafeAreaProvider>
+  );
+}
+`);
+  const showroom = fs.readFileSync(path.join(__dirname, "templates", "gallery-index.tsx"), "utf8");
+  fs.writeFileSync(path.join(appDir, "index.tsx"), showroom);
+  // The showroom require()s a few local images (../assets/... from src/app) — ship them too.
+  const assetsSrc = path.join(__dirname, "templates", "gallery-assets");
+  if (fs.existsSync(assetsSrc)) fs.cpSync(assetsSrc, path.join(projectRoot, "src", "assets"), { recursive: true });
+}
+
 function writeGitignore(projectRoot) {
   const gi = path.join(projectRoot, ".gitignore");
   const needed = ["node_modules/", ".expo/", "dist/", "*.log"];
@@ -551,16 +589,35 @@ async function cmdUpdate() {
   // Re-pin when the runtime is fully present OR merely scaffolded (package.json on disk),
   // so a half-installed runtime self-heals via plain `update` instead of being stranded.
   const scaffolded = fs.existsSync(path.join(runtimeDir(), "package.json"));
+  // Snapshot the pinned @calo commit SHAs BEFORE re-pinning, so we can tell whether this update
+  // actually moved anything. The design system is git-HEAD-tracked (pinned by commit, not by an
+  // npm version bump — its package.json version can sit unchanged across many real commits), so
+  // the SHA is the true "did anything change" signal.
+  const before = installedCaloShas(runtimeDir()) || {};
+  let repinned = false;
   if (runtimeExists() || scaffolded || has("--build")) {
     await ensureRuntime({ force: true });
     ok("shared runtime re-pinned — every linked prototype now uses the latest Calo stack");
+    repinned = true;
   } else {
     log(c.dim("  No shared runtime yet — run `calo-design init` in a prototype folder to create one."));
   }
-  // Report the refresh to the design-ops feed, tagged with the DS version we floated to.
+  // Only record an update event when the pinned code ACTUALLY changed (or we can't tell / it's a
+  // first install). A no-op re-pin — clicking Update when nothing new shipped — writes nothing,
+  // so the feed stops filling with identical "updated the design system to 0.2.0" rows.
+  const after = installedCaloShas(runtimeDir()) || {};
+  const changed = !Object.keys(before).length || JSON.stringify(before) !== JSON.stringify(after);
+  if (repinned && !changed) {
+    log(c.dim("  Already up to date — nothing new to record in the feed."));
+    return;
+  }
+  // Tag the feed entry with the DS version we floated to (read fresh from disk, not require()'s
+  // cache). Bump @calo/design-system's version on real releases (`npm run release` there) to make
+  // this number meaningful — the SHA gate above already guarantees it only logs on real change.
   let dsVersion = "";
   try {
-    dsVersion = require(path.join(runtimeDir(), "node_modules", "@calo", "design-system", "package.json")).version || "";
+    const pj = JSON.parse(fs.readFileSync(path.join(runtimeDir(), "node_modules", "@calo", "design-system", "package.json"), "utf8"));
+    dsVersion = pj.version || "";
   } catch { /* runtime not present — report without a version */ }
   await reportEvent("update", dsVersion);
 }
@@ -602,6 +659,37 @@ async function cmdFeed() {
   for (const e of data.events) log(`${c.dim(e.ts)}  ${e.email}  ${c.b(e.action)}  ${e.target || ""}`);
 }
 
+// Serve the component gallery (the @calo/design-system showroom) locally, rendered LIVE from
+// the shared runtime — so `calo-design update` keeps it current (no rebuild/redeploy). Design
+// Kitchen auto-starts this; it also works standalone in a terminal. Runs Metro in the
+// foreground so whoever launched it owns the process lifecycle.
+async function cmdGallery() {
+  if (!runtimeExists()) {
+    throw new Error("The Calo runtime isn't set up on this machine yet — run `calo-design init` first, then retry.");
+  }
+  const dir = path.join(designchefHome(), "gallery");
+  fs.mkdirSync(dir, { recursive: true });
+  // Materialize / refresh a thin project linked to the shared runtime (same machinery as
+  // a linked prototype), then swap in the showroom routes.
+  writeThinConfigs(dir);
+  ensureBabelConfig(dir);
+  writeMetroConfig(dir);
+  writeGitignore(dir);
+  linkNodeModules(dir);
+  writeGalleryApp(dir);
+
+  let port = "8091";
+  const pj = args.find((a) => a.startsWith("--port="));
+  if (pj) port = pj.slice(7);
+  else { const pi = args.indexOf("--port"); if (pi >= 0) port = args[pi + 1] || port; }
+  if (!/^\d+$/.test(port)) port = "8091";
+
+  log(c.b(`\n[gallery] Serving the Calo component gallery on http://localhost:${port}`));
+  log(c.dim(`  Live from the shared runtime (${tilde(runtimeDir())}) — always the installed @calo/design-system.`));
+  log(c.dim("  First launch compiles the design system (~30–60s). Ctrl-C to stop."));
+  run("npx", ["expo", "start", "--web", "--port", port], { cwd: dir });
+}
+
 function help() {
   log(`${c.b("calo-design")} — one-line setup for Calo design tooling
 
@@ -617,6 +705,8 @@ function help() {
   ${c.dim("    push --slug x --title \"…\" --owner \"…\" --screenshot path  --dry-run  --direct")}
   ${c.dim("share")}                                     publish THIS web prototype (React/Vite/CRA/Next) to Cloudflare Pages → share link
   ${c.dim("    share --slug x --dir dist --build --project calo-prototypes  --dry-run")}
+  ${c.dim("gallery")}                                   serve the @calo/design-system component gallery locally (live from the runtime)
+  ${c.dim("    gallery --port 8091")}
 
   Login is required once before init; the session refreshes automatically.
   init always installs the skill and ensures the shared ds/flows runtime on your machine;
@@ -636,6 +726,7 @@ function help() {
     else if (cmd === "share") await cmdShare(args.slice(1));
     else if (cmd === "feed") await cmdFeed();
     else if (cmd === "whoami") await cmdWhoami();
+    else if (cmd === "gallery") await cmdGallery();
     else help();
   } catch (err) {
     // Diagnostics go to stderr so stdout stays pure for machine callers (The Pass parses