@g3nomaly/ui 0.3.4 → 0.3.5

package/dist/theme/cssVars.js

@@ -1,8 +1,8 @@
-const ROOT = { selector: ":root", find: /(^|\n)[ \t]*:root[ \t]*\{/ };
-const DARK = { selector: ".dark", find: /(^|\n)[ \t]*\.dark[ \t]*\{/ };
-const THEME = { selector: "@theme inline", find: /(^|\n)[ \t]*@theme(?:[ \t]+inline)?[ \t]*\{/ };
-/** Tokens that are no colour, so they get no `--color-<name>` mapping in `@theme inline`. */
-const NOT_COLOURS = new Set(["radius"]);
+const ROOT = { selector: ":root", find: /(^|\n)[ \t]*:root[ \t]*\{/g };
+const DARK = { selector: ".dark", find: /(^|\n)[ \t]*\.dark[ \t]*\{/g };
+const THEME = { selector: "@theme inline", find: /(^|\n)[ \t]*@theme(?:[ \t]+inline)?[ \t]*\{/g };
+/** A value that is a colour: a colour function, a `var()` that may hold one, a hex colour or a colour keyword. */
+const COLOUR_VALUE = /^(?:(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark|var)\(|#[\da-f]{3,8}$|(?:transparent|currentcolor)$)/i;
 /** A token name with its leading `--`, e.g. `--sidebar` for `sidebar`. */
 function property(name) {
     return name.startsWith("--") ? name : `--${name}`;
@@ -25,45 +25,60 @@ function closingBrace(css, open) {
     return -1;
 }
 /**
- * @brief Adds the tokens a block lacks, before its closing brace, or as a new block at the end.
- * A token the block already defines keeps its value.
+ * @brief Adds the tokens no block of a kind defines, before the closing brace of the first block
+ * written as `selector` (so `@theme inline` before a plain `@theme`), else of the first block of the
+ * kind, else as a new block at the end. A token any block of the kind defines keeps its value.
  *
  * @param css - The stylesheet.
- * @param block - The block to add to.
+ * @param block - The kind of block to add to.
  * @param tokens - Tokens by name, with or without the leading `--`.
  * @returns The stylesheet and the names of the tokens added.
  */
 function addToBlock(css, block, tokens) {
-    const match = block.find.exec(css);
-    const open = match === null ? -1 : match.index + match[0].length;
-    const close = open === -1 ? -1 : closingBrace(css, open);
-    const body = close === -1 ? "" : css.slice(open, close);
-    const defined = new Set([...body.matchAll(/(--[\w-]+)\s*:/g)].map((m) => m[1]));
+    const bodies = [...css.matchAll(block.find)].flatMap((match) => {
+        const open = match.index + match[0].length;
+        const end = closingBrace(css, open);
+        return end === -1 ? [] : [{ opening: match[0], open, end }];
+    });
+    const target = bodies.find((body) => body.opening.includes(block.selector)) ?? bodies[0];
+    const close = target?.end ?? -1;
+    const defined = new Set(bodies.flatMap(({ open, end }) => [...css.slice(open, end).matchAll(/(--[\w-]+)\s*:/g)].map((m) => m[1])));
     const missing = Object.entries(tokens).map(([name, value]) => [property(name), value]).filter(([name]) => !defined.has(name));
     if (missing.length === 0)
         return { css, added: [] };
     const lines = missing.map(([name, value]) => `  ${name}: ${value};\n`).join("");
-    const added = missing.map(([name]) => name);
+    const added = missing.map(([name, value]) => ({ block: block.selector, name, value }));
     if (close === -1)
         return { css: `${css.trimEnd()}\n\n${block.selector} {\n${lines}}\n`, added };
     const before = css.slice(0, close);
     return { css: `${before}${before.endsWith("\n") ? "" : "\n"}${lines}${css.slice(close)}`, added };
 }
+/**
+ * @brief The names of the `light` and `dark` tokens whose value is a colour, without the leading `--`.
+ * A token counts when its light or its dark value is one.
+ *
+ * @param vars - Tokens to look through.
+ * @returns Names such as `sidebar`, each once; `radius: 0.5rem` and `font-sans: Inter` are left out.
+ */
+function colourTokens(vars) {
+    const values = [...Object.entries(vars.light ?? {}), ...Object.entries(vars.dark ?? {})];
+    const names = values.filter(([, value]) => COLOUR_VALUE.test(value.trim())).map(([name]) => name.replace(/^--/, ""));
+    return [...new Set(names)];
+}
 /**
  * @brief Adds the theme tokens a stylesheet lacks: `light` to `:root`, `dark` to `.dark`, `theme` to
- * `@theme inline`. When the stylesheet has a `@theme` block (Tailwind v4), each colour token also gets
- * its `--color-<name>: var(--<name>)` mapping there, the way shadcn adds them, so Tailwind classes such
- * as `bg-sidebar` work. Tokens the stylesheet defines keep their value: the app's theme wins.
+ * `@theme inline`. When the stylesheet has a `@theme` block (Tailwind v4), each token whose value is a
+ * colour also gets its `--color-<name>: var(--<name>)` mapping there, the way shadcn adds them, so
+ * Tailwind classes such as `bg-sidebar` work. Tokens the stylesheet defines, in any block of the same
+ * kind, keep their value: the app's theme wins.
  *
  * @param css - The stylesheet, e.g. the contents of `src/index.css`.
  * @param vars - Tokens to add.
  * @returns The stylesheet with the missing tokens added, and which were added.
  */
 export function addCssVars(css, vars) {
-    const colours = [...new Set([...Object.keys(vars.light ?? {}), ...Object.keys(vars.dark ?? {})])]
-        .map((name) => name.replace(/^--/, ""))
-        .filter((name) => !NOT_COLOURS.has(name));
-    const mappings = THEME.find.test(css) ? Object.fromEntries(colours.map((name) => [`color-${name}`, `var(--${name})`])) : {};
+    const hasTheme = [...css.matchAll(THEME.find)].length > 0;
+    const mappings = hasTheme ? Object.fromEntries(colourTokens(vars).map((name) => [`color-${name}`, `var(--${name})`])) : {};
     let result = css;
     const added = [];
     for (const [block, tokens] of [[ROOT, vars.light], [DARK, vars.dark], [THEME, { ...mappings, ...vars.theme }]]) {
@@ -71,7 +86,7 @@ export function addCssVars(css, vars) {
             continue;
         const merged = addToBlock(result, block, tokens);
         result = merged.css;
-        added.push(...merged.added.map((name) => `${block.selector} ${name}`));
+        added.push(...merged.added);
     }
     return { css: result, added };
 }

package/dist/theme/cssVars.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssVars.js","sourceRoot":"","sources":["../../src/theme/cssVars.ts"],"names":[],"mappings":"AAcA,MAAM,IAAI,GAAc,EAAE,QAAQ,EAAE,OAAO,EAAU,IAAI,EAAE,2BAA2B,EAAE,CAAC;AACzF,MAAM,IAAI,GAAc,EAAE,QAAQ,EAAE,OAAO,EAAU,IAAI,EAAE,4BAA4B,EAAE,CAAC;AAC1F,MAAM,KAAK,GAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,6CAA6C,EAAE,CAAC;AAE3G,6FAA6F;AAC7F,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAaxC,0EAA0E;AAC1E,SAAS,QAAQ,CAAC,IAAY;IAC5B,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;AACpD,CAAC;AAED;;;;;;GAMG;AACH,SAAS,YAAY,CAAC,GAAW,EAAE,IAAY;IAC7C,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG;YAAE,KAAK,EAAE,CAAC;aACvB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,EAAE,KAAK,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;IACrD,CAAC;IACD,OAAO,CAAC,CAAC,CAAC;AACZ,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,UAAU,CAAC,GAAW,EAAE,KAAe,EAAE,MAA8B;IAC9E,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,MAAM,IAAI,GAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAClE,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IACzD,MAAM,IAAI,GAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhF,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACvI,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAEpD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAI,KAAK,KAAK,CAAC,CAAC;QAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,CAAC,QAAQ,OAAO,KAAK,KAAK,EAAE,KAAK,EAAE,CAAC;IAChG,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACnC,OAAO,EAAE,GAAG,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;AACpG,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,GAAW,EAAE,IAAa;IACnD,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;SAC9F,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;SACtC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,EAAE,EAAE,SAAS,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5H,IAAI,MAAM,GAAG,GAAG,CAAC;IACjB,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,KAAK,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAU,EAAE,CAAC;QACxH,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,SAAS;QACvE,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QACjD,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC;QACpB,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;IACzE,CAAC;IACD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AAChC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,GAAuB;IAClD,MAAM,MAAM,GAAsB,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IACrE,KAAK,MAAM,IAAI,IAAI,GAAG,EAAE,CAAC;QACvB,KAAK,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAU;YAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;IAChH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"cssVars.js","sourceRoot":"","sources":["../../src/theme/cssVars.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g3nomaly/ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Installs React components from any registered source into a project, the way shadcn does.",
   "type": "module",
   "bin": {
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.7.0",
-    "@g3nomaly/core": "^0.3.4",
+    "@g3nomaly/core": "^0.3.5",
     "chalk": "^6.0.0",
     "commander": "^15.0.0",
     "glob": "^13.0.6",

package/template/build.ts

@@ -6,11 +6,18 @@
 // build, even under the same version. Raise the version in package.json for every release anyway:
 // it is stamped on every component, and `update` shows it as `0.1.0 → 0.2.0`.
 //
-// How apps get the source:
-// - npm: `bun publish`. Apps run `bun add -d <name>`, then `bunx @g3nomaly/ui source add npm:<name>`.
-// - git: commit dist/, since the installer reads a git source as it is and never builds it. Apps can
-//   install it as `bun add -d github:<owner>/<repo>#<tag>` and register it as an npm source.
-// - a folder: apps run `bun add -d file:<path>`, or `bunx @g3nomaly/ui source add <path>`.
+// How apps get the source. Apps add it with `bun add`, not `-d`, when a component keeps files in the
+// package, since the app then imports them at runtime:
+// - npm: `bun publish`. Apps run `bun add <name>`, then `bunx @g3nomaly/ui source add npm:<name>`.
+// - git: commit dist/, since the installer reads a git source as it is and never builds it. Apps
+//   install it as `bun add github:<owner>/<repo>#<tag>` and register it as an npm source.
+// - a workspace: put this package and the app in one Bun workspace, add it as `"<name>": "workspace:*"`
+//   and register it as an npm source. The best way to work on a source next to an app.
+// - a folder: apps run `bun add file:<path>` and register it as an npm source. When a component keeps
+//   files in the package, the installer swaps the link for a packed copy (`bun pm pack`, which runs
+//   `prepack` and so this build) on every `add` and `update`, because a link to this folder would load
+//   this folder's own node_modules, such as a second React. `source add <path>` reads the folder
+//   directly, but cannot serve files kept in the package.
 import fs from "node:fs";
 import path from "node:path";
 import { COMPONENTS_DIR, COMPONENTS_JSON, writeComponentsJson } from "@g3nomaly/ui/registry";

package/template/package.json

@@ -10,7 +10,11 @@
     "./*": "./dist/components/*.ts"
   },
   "scripts": {
-    "build": "bun build.ts"
+    "build": "bun build.ts",
+    "prepack": "bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
   },
   "devDependencies": {
     "@g3nomaly/ui": "*"

package/template/src/components/example/example.meta.ts

@@ -32,6 +32,14 @@ export default {
   // dist/components/example/exampleStore.ts. The build fails when no export reaches the file.
   // Apps then need this package installed with `bun add`, and update the store with `bun install`.
   // `add --include-unsafe` gives an app a copy anyway, which its components do not import.
+  //
+  // Such a file runs in the app, so every package it imports must be in `peerDependencies` of
+  // package.json, so it loads the app's copy and not a second one, such as a second React. List it in
+  // `devDependencies` too to build here. The build fails on an import that is not a peer.
+  //
+  // A component needs at least one file the app gets copied; the build fails otherwise. A helper that
+  // several stores share needs no meta file of its own: keep it in a component's folder, inside the
+  // `exports`, and import it by package path.
   files: [
     { path: "example/Example.tsx", type: "component" },
     { path: "example/Example.css", type: "style" },