@theme-registry/refract 0.1.4 → 0.1.6

package/dist/cli.js

@@ -9,6 +9,7 @@ var node_url = require('node:url');
 var node_os = require('node:os');
 var node_readline = require('node:readline');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /**
  * Build-layer path + transpile helpers (Node-only).
  *
@@ -21,8 +22,21 @@ var node_readline = require('node:readline');
  * and this module resolves them against the discovered package root — working the SAME way in-repo
  * (root = repo root) and installed (root = the installed package dir).
  */
+/**
+ * This module's own directory, in **both** bundle formats.
+ *
+ * `__dirname` only exists in the CJS build. The `./build` subpath also ships an ESM bundle, and
+ * defaulting to a bare `__dirname` made every ESM consumer of this layer throw `__dirname is not
+ * defined` the moment it reached package-root discovery — `runInit`, `runCreate`, `runSkillsInstall`.
+ * It went unnoticed because the only consumer was refract's own CLI, which is bundled as CJS.
+ *
+ * `typeof` guards rather than a feature test, because referencing an undeclared `__dirname` in ESM
+ * would be a ReferenceError. Rollup rewrites `import.meta.url` for the CJS output, so the fallback
+ * expression is valid in both.
+ */
+const moduleDir = () => typeof __dirname !== "undefined" ? __dirname : node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.js', document.baseURI).href))));
 /** Walk up from `startDir` to the first ancestor that contains a `package.json`. */
-const findPackageRoot = (startDir = __dirname) => {
+const findPackageRoot = (startDir = moduleDir()) => {
     let dir = startDir;
     for (;;) {
         if (node_fs.existsSync(node_path.join(dir, "package.json")))
@@ -8004,7 +8018,7 @@ const RATIO_VALUES = {
  * overlap, so a scaffolded literal and an authored `harmony:` key agree. `pentadic` is local — the
  * subsystem has no five-way scheme, and the scaffolder needs one to reach five brand colours.
  */
-const SCHEME_ROTATIONS = {
+const SCHEME_ROTATIONS$1 = {
     complement: [180],
     analogous: [-30, 30],
     "split-complement": [150, 210],
@@ -8106,7 +8120,7 @@ const defaultSchemeFor = (brandCount) => {
     return "pentadic";
 };
 /** Schemes that produce exactly `brandCount − 1` members — the valid choices at that count. */
-const schemesFor = (brandCount) => Object.keys(SCHEME_ROTATIONS).filter((s) => SCHEME_ROTATIONS[s].length === brandCount - 1);
+const schemesFor = (brandCount) => Object.keys(SCHEME_ROTATIONS$1).filter((s) => SCHEME_ROTATIONS$1[s].length === brandCount - 1);
 /**
  * The contrast gate. Builds the palette set, audits every text-on-base pairing, and walks the
  * lightness of each failing colour down one OKLCH point at a time until it clears the bar.
@@ -8202,7 +8216,7 @@ function scaffoldTheme(answers) {
     }
     else if (brandCount > 1) {
         const scheme = (_g = answers.scheme) !== null && _g !== void 0 ? _g : defaultSchemeFor(brandCount);
-        const rotations = SCHEME_ROTATIONS[scheme];
+        const rotations = SCHEME_ROTATIONS$1[scheme];
         if (!rotations)
             throw new Error(`Unknown harmony scheme "${scheme}".`);
         rotations.slice(0, brandCount - 1).forEach((deg, i) => {
@@ -8460,6 +8474,35 @@ const cursorUp = (n) => (n > 0 ? `\u001b[${n}A` : "");
 const CLEAR_DOWN = "\u001b[0J";
 const HIDE_CURSOR = "\u001b[?25l";
 const SHOW_CURSOR = "\u001b[?25h";
+/**
+ * Does this terminal do 24-bit colour? `COLORTERM` is the only real signal, and plenty of capable
+ * terminals (Apple Terminal among them) never set it — so a missing value means "approximate", not
+ * "give up". Gating swatches on truecolor alone would silently delete them for those users.
+ */
+const truecolor = () => { var _a; return /truecolor|24bit/i.test((_a = process.env.COLORTERM) !== null && _a !== void 0 ? _a : ""); };
+/** Nearest xterm-256 colour-cube index for an RGB triple — the fallback when 24-bit isn't offered. */
+const to256 = (r, g, b) => {
+    const axis = (v) => (v < 48 ? 0 : v < 114 ? 1 : Math.min(5, Math.round((v - 35) / 40)));
+    return 16 + 36 * axis(r) + 6 * axis(g) + axis(b);
+};
+/**
+ * `#rrggbb` → a coloured block: exact in 24-bit terminals, approximated in 256-colour ones, and
+ * empty when there's no colour at all (a pipe, `NO_COLOR`) so redirected output stays clean.
+ *
+ * Approximating is right here — the swatch is a preview, and the exact value is written to the theme
+ * file regardless. An approximately-right hue beats a blank space.
+ */
+function swatch(hex, width = 2) {
+    if (!useColor())
+        return "";
+    const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+    if (!m)
+        return "";
+    const n = parseInt(m[1], 16);
+    const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    const bg = truecolor() ? `48;2;${r};${g};${b}` : `48;5;${to256(r, g, b)}`;
+    return `\u001b[${bg}m${" ".repeat(width)}\u001b[0m`;
+}
 /** Decode a raw stdin chunk into a {@link ListKey}. Arrows arrive as escape sequences; j/k mirror vim. */
 function decodeKey(chunk) {
     switch (chunk) {
@@ -8650,13 +8693,24 @@ class Prompter {
         };
         let painted = 0;
         const help = multi ? "↑↓ move · space toggle · a all · enter confirm" : "↑↓ move · enter select";
+        // Pad labels so the hints line up into a column — a ragged right edge is most of why a long
+        // option list reads as noise.
+        const widest = choices.reduce((w, c) => Math.max(w, c.label.length), 0);
         const frame = () => {
             const rows = choices.map((c, i) => {
+                var _a;
                 const here = i === state.cursor;
-                const mark = multi ? (state.selected.has(i) ? green("◉") : dim("◯")) : here ? green("❯") : " ";
+                // Focus and selection are SEPARATE signals and both need to be visible: the caret says
+                // where you are, the box says what's chosen. Showing only one (as this did) leaves a
+                // multi-select where you can't tell what the keys will act on.
+                const caret = here ? green("❯") : " ";
+                const box = multi ? (state.selected.has(i) ? green("[✓]") : dim("[ ]")) : "";
                 const name = here ? bold(c.label) : c.label;
-                const hint = c.hint ? ` ${dim(`— ${c.hint}`)}` : "";
-                return `  ${mark} ${name}${hint}`;
+                const pad = " ".repeat(Math.max(0, widest - c.label.length));
+                const blocks = ((_a = c.swatches) !== null && _a !== void 0 ? _a : []).map(s => swatch(s)).filter(Boolean).join(" ");
+                const art = blocks ? `  ${blocks}` : "";
+                const hint = c.hint ? `  ${dim(c.hint)}` : "";
+                return `  ${caret} ${box ? `${box} ` : ""}${name}${pad}${art}${hint}`;
             });
             return [`${cyan("?")} ${bold(label)} ${dim(help)}`, ...rows].join("\n");
         };
@@ -8762,6 +8816,19 @@ class Prompter {
     }
 }
 
+/**
+ * The hues a scheme derives from a seed — the same rotations the generator will bake, so the
+ * preview beside each option is the palette you'd actually get, not an illustration.
+ */
+const SCHEME_ROTATIONS = {
+    complement: [180],
+    analogous: [-30, 30],
+    "split-complement": [150, 210],
+    triadic: [120, 240],
+    tetradic: [90, 180, 270],
+    pentadic: [72, 144, 216, 288],
+};
+const schemeHues = (seedHex, scheme) => { var _a; return ((_a = SCHEME_ROTATIONS[scheme]) !== null && _a !== void 0 ? _a : []).map(deg => convertRgbToHex(parseColor(rotateHue(seedHex, deg)).rgb)); };
 /** What each harmony scheme is for, in one line — the names mean nothing to most people. */
 const SCHEME_HINTS = {
     complement: "one companion, 180° opposite — maximum separation",
@@ -8804,7 +8871,9 @@ async function promptCreateAnswers(p, given = {}) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const seed = (_a = given.seed) !== null && _a !== void 0 ? _a : (await p.text("Primary colour", "#4c6ef5", isColor));
     const lightness = Math.round(rgbToOklch(parseColor(seed).rgb).L * 10) / 10;
-    p.write(`  ${dim(`parsed · lightness ${lightness}% — lands at ≈${nearestLadderStep(lightness)} on the ladder`)}`);
+    const seedHex = convertRgbToHex(parseColor(seed).rgb);
+    const chip = swatch(seedHex, 3);
+    p.write(`  ${chip ? `${chip} ` : ""}${dim(`${seedHex} · lightness ${lightness}% — lands at ≈${nearestLadderStep(lightness)} on the ladder`)}`);
     p.write();
     const manual = Boolean(given.manual);
     let brandCount = 2;
@@ -8827,7 +8896,14 @@ async function promptCreateAnswers(p, given = {}) {
         const options = schemesFor(brandCount);
         scheme = (_c = given.scheme) !== null && _c !== void 0 ? _c : defaultSchemeFor(brandCount);
         if (!given.scheme && options.length > 1) {
-            scheme = await p.select("Harmony scheme", options.map(s => ({ value: s, label: s, hint: SCHEME_HINTS[s] })), Math.max(0, options.indexOf(scheme)));
+            // Show the hues each scheme actually produces. "split-complement" is a word; two blocks of
+            // real colour beside the seed is the thing you're choosing between.
+            scheme = await p.select("Harmony scheme", options.map(s => ({
+                value: s,
+                label: s,
+                hint: SCHEME_HINTS[s],
+                swatches: [seedHex, ...schemeHues(seedHex, s)],
+            })), Math.max(0, options.indexOf(scheme)));
         }
         if (scheme && brandCount > 1) {
             p.write(`  ${dim(`→ ${scheme} · each member becomes its own palette with a full ladder`)}`);