jig-ui 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.16.0
+
+With more than one mode, every barrel names its mode, and none sits in the
+global stylesheet.
+
+### Changed
+
+- **`theme.<mode>.css` for every mode, once there are two.** `init` kept
+  `theme.css` for the first mode and left it wired into the global stylesheet,
+  so a second mode's routes loaded the first mode's tokens globally and their
+  own from their layout, and got whichever came last. Now each barrel names its
+  mode, the global stylesheet keeps only what every route shares (Tailwind and
+  `utilities.css`), and each route's layout imports its own barrel. A project
+  with one mode is unchanged: `theme.css`, wired globally.
+- **A project gaining a second mode is migrated.** An unedited `theme.css`
+  becomes `theme.<first mode>.css`, and every stylesheet import that resolves
+  to it is removed, found by where it points rather than by guessing the file.
+  An edited one is left, with a note on where its edits belong. `check` names a
+  `theme.css` left beside two modes.
+
 ## 0.15.1
 
 ### Fixed

package/README.md

@@ -123,6 +123,11 @@ jig.config.json             route → mode map
 .jig/state.json             bookkeeping — version, modes, checksums
 ```
 
+Declare a second mode and every barrel names its mode instead —
+`theme.editorial.css`, `theme.operator.css` — and none sits in the global
+stylesheet. Each route's layout imports the barrel for its mode; `init` removes
+the import it added and prints which barrel each surface takes.
+
 Nothing you wrote is touched beyond that one import line. Re-running `init`
 never overwrites a config or brand file you have edited.
 
@@ -604,7 +609,7 @@ treatment.
 | `rules/05-copy.md` | Interface text rules |
 | `<css dir>/jig/brand.*.css` | Identity. One per project. |
 | `<css dir>/jig/mode.*.css` | Density, scale, rhythm, motion |
-| `<css dir>/jig/theme.css` | The barrel — brand + mode. This is what you import. |
+| `<css dir>/jig/theme.css` | The barrel — brand + mode. This is what you import. With more than one mode, `theme.<mode>.css`, one per mode, each imported by its routes' layout. |
 | `.jig/state.json` | What `init` wrote, with checksums. `update` reads it to leave your edits alone. |
 | `.jig/specs/`, `.jig/mockups/`, `.jig/critique/` | The design loop's record: what was agreed, what was drawn, what the review found. |
 

package/dist/index.js

@@ -3911,10 +3911,20 @@ function modeWiringProblems(projectRoot) {
   if (modes.length === 0) return [];
   const dir = dirname6(config.brand);
   const rel = (f) => dir === "." ? f : `${dir}/${f}`;
-  if (!existsSync12(join22(projectRoot, rel("theme.css")))) return [];
+  const multi = modes.length > 1;
+  const barrelOf = (mode) => multi ? `theme.${mode}.css` : "theme.css";
+  const anyBarrel = ["theme.css", ...modes.map((m) => `theme.${m}.css`)].some((f) => existsSync12(join22(projectRoot, rel(f))));
+  if (!anyBarrel) return [];
   const problems = [];
-  modes.forEach((mode, i) => {
-    const barrel = rel(i === 0 ? "theme.css" : `theme.${mode}.css`);
+  if (multi && existsSync12(join22(projectRoot, rel("theme.css")))) {
+    problems.push({
+      mode: modes[0],
+      barrel: rel("theme.css"),
+      message: `jig.config.json declares ${modes.length} modes, so each barrel names its mode: ${rel("theme.css")} should be ${rel(barrelOf(modes[0]))}, imported by the layouts that serve it and not by the global stylesheet`
+    });
+  }
+  modes.forEach((mode) => {
+    const barrel = rel(barrelOf(mode));
     const modeFile = `mode.${mode}.css`;
     let body;
     try {
@@ -5084,7 +5094,8 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
   }
   const modeAbsPath = modeAbsPaths[primaryMode];
   const brandFileOnly = brandRelPath.split("/").pop();
-  const barrelFor = (mode) => mode === primaryMode ? "theme.css" : `theme.${mode}.css`;
+  const multiMode = declaredModes.length > 1;
+  const barrelFor = (mode) => multiMode ? `theme.${mode}.css` : "theme.css";
   for (const mode of declaredModes) {
     const rel = relKey(...tokensRelDir, barrelFor(mode));
     const abs = join28(opts.projectRoot, ...tokensRelDir, barrelFor(mode));
@@ -5098,6 +5109,20 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
     writeFileSync5(abs, content, "utf8");
     files[rel] = checksum(content);
   }
+  if (multiMode) {
+    const rel = relKey(...tokensRelDir, "theme.css");
+    const abs = join28(opts.projectRoot, ...tokensRelDir, "theme.css");
+    if (existsSync15(abs)) {
+      const state = fileState(opts.projectRoot, abs, rel, initManifest);
+      if (state.tracked && !state.modified) {
+        rmSync2(abs);
+        delete files[rel];
+        log(`  Removed ${rel}: with more than one mode, each barrel names its mode (${relKey(...tokensRelDir, barrelFor(primaryMode))}).`);
+      } else {
+        log(`  ${rel} has been edited, so it is left alone. With more than one mode it is replaced by ${relKey(...tokensRelDir, barrelFor(primaryMode))}; move your edits there and delete it.`);
+      }
+    }
+  }
   if (detection.cssSystem === "tailwind-v4") {
     const declared = declaredTokenNames(
       [brandAbsPath, modeAbsPath].map((f) => {
@@ -5148,8 +5173,9 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
       }
     }
   }
-  if (declaredModes.length > 1) {
-    log("\nOne barrel per surface. Import each at that route's entry point:");
+  if (multiMode) {
+    log("\nOne barrel per mode, and none in the global stylesheet. Import each in the layout");
+    log("that serves its routes, and keep Tailwind and utilities.css in the global one:");
     for (const surface of effectiveConfig.surfaces) {
       log(`  '${surface.match}' \u2192 ${relKey(...tokensRelDir, barrelFor(surface.mode))}`);
     }
@@ -5174,7 +5200,33 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
   }
   const wireTarget = findWireTarget(detection);
   let wiring;
-  if (wireTarget) {
+  if (multiMode) {
+    const bare = join28(opts.projectRoot, ...tokensRelDir, "theme.css");
+    for (const file of detection.cssFiles.filter((f) => !isTokenLayerFile(f))) {
+      const abs = join28(opts.projectRoot, file);
+      try {
+        const before = readFileSync23(abs, "utf8");
+        const after = before.split("\n").filter((l) => {
+          const m = /^\s*@import\s+["']([^"']+)["'];?\s*$/.exec(l);
+          return !(m && !/^[a-z]+:|^\//i.test(m[1]) && resolve2(dirname7(abs), m[1]) === bare);
+        }).join("\n");
+        if (after !== before) {
+          writeFileSync5(abs, after, "utf8");
+          log(`
+Unwired ${file}: removed its import of ${relKey(...tokensRelDir, "theme.css")}.`);
+          log(`  With more than one mode, the global stylesheet imports no barrel: every route would carry that mode's tokens.`);
+        }
+      } catch (err) {
+        log(`
+Could not edit ${file}: ${err.message}. Remove its import of ${relKey(...tokensRelDir, "theme.css")} by hand.`);
+      }
+    }
+    wiring = {
+      target: null,
+      status: "per-route",
+      snippet: effectiveConfig.surfaces.map((s) => `${s.match} \u2192 ${relKey(...tokensRelDir, barrelFor(s.mode))}`).join("\n")
+    };
+  } else if (wireTarget) {
     const targetAbsDir = dirname7(join28(opts.projectRoot, wireTarget));
     const barrelImport = relativeImportPath(
       targetAbsDir,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "A design system for coding agents. 130 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",

package/rules/02-tokens.md

@@ -25,9 +25,11 @@ lives in `src/styles/`, `app/assets/stylesheets/jig/` in a Rails app. Set `brand
 in `jig.config.json` to put it elsewhere. Projects set up before 0.7.0 keep their
 `.jig/tokens/` layout; `update` does not move them.
 
-So **never hardcode that path**. `init` writes one barrel per surface, `theme.css`,
-which imports the brand and the mode in the right order — import the barrel, and
-relocating the layer changes one line instead of every stylesheet:
+So **never hardcode that path**. `init` writes a barrel, `theme.css`, which imports
+the brand and the mode in the right order — import the barrel, and relocating the
+layer changes one line instead of every stylesheet. With more than one mode, every
+barrel names its mode instead (`theme.editorial.css`, `theme.operator.css`); see
+"Multiple modes in one app" below:
 
 ```css
 /* src/styles/jig/theme.css — written by init */
@@ -512,8 +514,14 @@ the same token names with different values, so importing all three into one
 document leaves only the last — the other two are inert. That is the mechanical
 reason behind the seam rule below.
 
-**Multiple modes in one app** — scope by route, not by class. Each surface imports its own
-barrel — `jig/theme.css` for the primary surface, `jig/theme.<mode>.css` for the
-others — at that route's layout or entry level. `init` names them and does not
-wire them: which entry point serves `/admin/**` is your routing, which it cannot
-see. Do not attempt to nest two modes in one document (`01-modes.md`, seam rules).
+**Multiple modes in one app** — scope by route, not by class. Every barrel names its
+mode, `jig/theme.<mode>.css`, and each route's layout or entry point imports the
+one for its mode. The global stylesheet imports **no** barrel: one imported there
+puts that mode's tokens under every route, so the operator pages carry editorial's
+too and get whichever loaded last. It keeps what every route shares — Tailwind and
+`utilities.css`, whose aliases name tokens rather than values and so hold for any
+mode. When a second mode is declared, `init` replaces `theme.css` with
+`theme.<first mode>.css` and removes the import it had wired, then prints which
+barrel each surface imports; which layout serves `/admin/**` is your routing, which
+it cannot see. Do not attempt to nest two modes in one document (`01-modes.md`,
+seam rules).