@robomous/ui-core 0.1.0 → 0.2.0

package/gates/tokens.test.mjs

@@ -1,276 +0,0 @@
-/**
- * `DESIGN.md`'s first principle, machine-enforced: **never a colour in a class
- * string.** The helpers live in `./index.mjs` so consumers run the same scans;
- * this file keeps their fabricated-input self-tests and runs the repo gates
- * over this package's own sources.
- */
-
-import assert from "node:assert/strict";
-import { readFileSync } from "node:fs";
-import path from "node:path";
-import { spawnSync } from "node:child_process";
-import { fileURLToPath } from "node:url";
-import { test } from "node:test";
-
-import { brandUsagesIn, colouredClassesIn, retiredDeclarationsIn } from "./index.mjs";
-
-const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-
-const SOURCE = /\.(?:ts|tsx|css)$/;
-
-// Fragments for fabricating violating input without this file matching itself.
-const HEX = ["#", "[0-9a-fA-F]{3,8}"].join("");
-const dash = (...parts) => parts.join("-");
-
-test("the scan finds a colour smuggled into a class, and nothing that merely looks like one", () => {
-  assert.deepEqual(colouredClassesIn("a.tsx", `  <div className="bg-[${HEX.slice(0, 1)}eb5a47]" />`), [
-    `a.tsx:1: <div className="bg-[#eb5a47]" />`,
-  ]);
-  assert.deepEqual(colouredClassesIn("b.tsx", `  className="text-[var(--accent)]"`), [
-    `b.tsx:1: className="text-[var(--accent)]"`,
-  ]);
-  assert.deepEqual(colouredClassesIn("c.tsx", `  className="ring-[rgb(0 0 0)]"`), [
-    `c.tsx:1: className="ring-[rgb(0 0 0)]"`,
-  ]);
-
-  // A token utility is the whole point of the rule and must pass.
-  assert.deepEqual(colouredClassesIn("d.tsx", `  className="bg-primary text-primary-foreground"`), []);
-  // The accent at 10% is a token with an opacity modifier, not a colour.
-  assert.deepEqual(colouredClassesIn("e.tsx", `  className="bg-primary/10 border-primary"`), []);
-  // An arbitrary value that is *not* a colour stays legal — the rule is about
-  // colour, and a one-off `top-[50%]` is not what v1 got wrong.
-  assert.deepEqual(colouredClassesIn("f.tsx", `  className="translate-y-[3px]"`), []);
-  // An inline style carrying a schema-supplied colour is the sanctioned road:
-  // `classColor` answers with whatever the kernel stored, and Tailwind has never
-  // seen it, so no utility could name it.
-  assert.deepEqual(
-    colouredClassesIn("g.tsx", `  style={{ background: classColor(declared, name) }}`),
-    [],
-  );
-  // A docstring explaining the rule must pass, or the gate forbids its own
-  // explanation — the mistake a boundary scan makes when it matches its own prose.
-  assert.deepEqual(colouredClassesIn("h.tsx", `   * Never write \`bg-[${"#"}eb5a47]\`.`), []);
-  // And a CSS custom property *declaration* is where colours are supposed to live.
-  assert.deepEqual(colouredClassesIn("i.css", `  --color-primary: #eb5a47;`), []);
-  // A colour-mix of two tokens names no colour of its own — the preset's own
-  // Button hover step.
-  assert.deepEqual(colouredClassesIn("x.tsx", 'className="hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]"'), []);
-  // A colour-mix that mixes in a literal is still a colour smuggled into a class.
-  assert.equal(colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_srgb,#fff,var(--x))]"').length, 1);
-  // A named CSS colour inside color-mix is still a colour.
-  assert.equal(colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_oklch,red,var(--x))]"').length, 1);
-  // Whatever order the tokens come in, and whichever colour space, two tokens
-  // stay two tokens.
-  assert.equal(colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_srgb,var(--a)_40%,var(--b))]"').length, 0);
-});
-
-test("the brand scan counts a usage, and not the comment that states the rule", () => {
-  // A utility usage on any of the six colour-bearing prefixes is counted.
-  assert.deepEqual(brandUsagesIn("a.tsx", `  <span className="text-brand">Robomous</span>`), [
-    { file: "a.tsx", at: 1, text: `<span className="text-brand">Robomous</span>` },
-  ]);
-  assert.deepEqual(brandUsagesIn("b.tsx", `  className="h-full bg-brand transition-transform"`), [
-    { file: "b.tsx", at: 1, text: `className="h-full bg-brand transition-transform"` },
-  ]);
-  // An opacity modifier is still a usage of the brand colour.
-  assert.deepEqual(
-    brandUsagesIn("c.tsx", `  className="bg-brand/10"`).map((u) => u.at),
-    [1],
-  );
-  // A comment line states the rule rather than applying it.
-  assert.deepEqual(brandUsagesIn("d.css", `   * a third \`bg-brand\` is a design decision`), []);
-  assert.deepEqual(brandUsagesIn("e.tsx", `  // never add bg-brand here`), []);
-  // Another token on the same prefixes is not the brand.
-  assert.deepEqual(brandUsagesIn("f.tsx", `  className="bg-primary text-primary-foreground"`), []);
-  // The token *name* without a utility prefix is not a usage — tokens.test.ts
-  // asserts LIGHT_THEME.brand's value and must not trip the gate.
-  assert.deepEqual(brandUsagesIn("g.ts", `  expect(COLOR.brand).toBe("#e85d44");`), []);
-});
-
-/** Every tracked source in this repo. */
-function repoSources() {
-  const listed = spawnSync("git", ["ls-files", "-z"], { cwd: REPO, encoding: "utf8" });
-  assert.equal(listed.status, 0, `git ls-files failed: ${listed.stderr}`);
-  return listed.stdout.split("\0").filter((name) => SOURCE.test(name));
-}
-
-test("no source puts a colour inside a class name", () => {
-  const tracked = repoSources();
-  assert.ok(tracked.length > 0, "the scan found no sources, so it proves nothing");
-
-  const offenders = tracked.flatMap((file) =>
-    colouredClassesIn(file, readFileSync(path.join(REPO, file), "utf8")),
-  );
-  assert.deepEqual(
-    offenders,
-    [],
-    "colour belongs to the token contract — add a token to " +
-      `src/styles.css and name the intent:\n${offenders.join("\n")}`,
-  );
-});
-
-/**
- * This package has zero brand sites: it declares the `--brand` token and never
- * paints with it. `DESIGN.md` "Where the brand is": brand sites are a consumer
- * decision — two enumerated sites per consuming app (the wordmark and the
- * styleguide swatch that displays the value), gated in the consumer's repo.
- */
-const BRAND_SITES = [];
-
-test("the brand colour paints nothing here — brand sites are a consumer decision", () => {
-  const tracked = repoSources();
-  assert.ok(tracked.length > 0, "the scan found no sources, so it proves nothing");
-
-  const usages = tracked.flatMap((file) =>
-    brandUsagesIn(file, readFileSync(path.join(REPO, file), "utf8")),
-  );
-  assert.deepEqual(
-    usages.map((u) => u.file).sort(),
-    BRAND_SITES,
-    "DESIGN.md 'Where the brand is': this package declares the brand token and never uses it — " +
-      "a brand-coloured site belongs to a consuming app (two enumerated sites per app):\n" +
-      usages.map((u) => `${u.file}:${u.at}: ${u.text}`).join("\n"),
-  );
-});
-
-test("the scan finds a retired declaration, and not a comment or a longer name that merely contains it", () => {
-  assert.deepEqual(retiredDeclarationsIn(`  ${dash("--color", "disabled")}: oklch(0.9 0 0);`), [
-    `1: ${dash("--color", "disabled")}`,
-  ]);
-  assert.deepEqual(retiredDeclarationsIn(`  ${dash("--text", "meta")}: 0.75rem;`), [
-    `1: ${dash("--text", "meta")}`,
-  ]);
-  // A comment recalling the retired name states history, not a declaration.
-  assert.deepEqual(
-    retiredDeclarationsIn(`  /* ${dash("--color", "primary", "hover")} no longer exists */`),
-    [],
-  );
-  // A name that merely starts with a retired one is a different declaration —
-  // disabled-foreground is its own retired entry, and its presence must not
-  // be double-counted as disabled's.
-  assert.deepEqual(retiredDeclarationsIn(`  ${dash("--color", "disabled", "foreground")}: red;`), [
-    `1: ${dash("--color", "disabled", "foreground")}`,
-  ]);
-  // A current, kept token is not a retired one.
-  assert.deepEqual(retiredDeclarationsIn(`  --brand: white;`), []);
-  // success/warning retired alongside the forked primitives that needed them —
-  // no longer a kept extension, so this now reports a hit.
-  assert.deepEqual(retiredDeclarationsIn(`  --success-foreground: white;`), [
-    `1: ${dash("--success", "foreground")}`,
-  ]);
-});
-
-test("the retired foundation vocabulary is absent from the stylesheet", () => {
-  const STYLES_PATH = "src/styles.css";
-  const stylesheet = readFileSync(path.join(REPO, STYLES_PATH), "utf8");
-  const present = retiredDeclarationsIn(stylesheet);
-  assert.deepEqual(
-    present,
-    [],
-    "styles.css still declares a name the original audit retired — " +
-      `it has no shadcn analogue and no extension:\n${present.join("\n")}`,
-  );
-});
-
-/**
- * `components.json` carries the preset properties shadcn's own tools read, and
- * only those: the fields its config schema defines. The schema is **strict** —
- * `rawConfigSchema.safeParse` answers `unrecognized_keys` for anything else — so
- * a decoded preset property the schema has no field for cannot be added here
- * even as documentation. It would not be ignored; it would break every `shadcn`
- * invocation that reads the file.
- *
- * `radius` is the property that keeps inviting the mistake: the preset decodes to
- * `radius: medium`, and the obvious repair for "the config does not say so" is to
- * write it in. The medium step's one home is `styles.css`'s `--radius: 0.625rem`
- * (asserted by `tokens.test.ts`); this test is the other half, refusing the field
- * that would look like a second home while doing nothing. Keys rather than a
- * count, so a failure names what moved.
- */
-const CONFIG_PATH = "components.json";
-const SCHEMA_SUPPORTED_KEYS = [
-  "$schema",
-  "aliases",
-  "iconLibrary",
-  "menuAccent",
-  "menuColor",
-  "registries",
-  "rsc",
-  "rtl",
-  "style",
-  "tailwind",
-  "tsx",
-];
-
-test("components.json holds the schema-supported preset fields, and no others", () => {
-  const config = JSON.parse(readFileSync(path.join(REPO, CONFIG_PATH), "utf8"));
-  assert.deepEqual(
-    Object.keys(config).sort(),
-    SCHEMA_SUPPORTED_KEYS,
-    `${CONFIG_PATH} must carry exactly the fields shadcn's strict config schema defines. ` +
-      "A decoded preset property with no field here belongs in src/styles.css " +
-      "as a value — see DESIGN.md 'Source of Truth'",
-  );
-
-  // The preset's own values, where the schema does have a field for them.
-  assert.equal(config.style, "radix-nova");
-  assert.equal(config.iconLibrary, "lucide");
-  assert.equal(config.menuColor, "inverted");
-  assert.equal(config.menuAccent, "subtle");
-  assert.equal(config.tailwind.baseColor, "neutral");
-  assert.equal(config.tailwind.css, "src/styles.css");
-});
-
-/**
- * Lucide is the icon set, and the only one.
- *
- * The rule is "one icon library", not "this particular library". So this
- * guards whichever set is currently *not* in use, and the value below is the
- * whole of what changes when that decision changes.
- *
- * Assembled from fragments so this file never holds the package's name as a
- * contiguous string, and a repository-wide sweep for it never mistakes its own
- * guard for a lingering usage.
- */
-const RETIRED_ICON_PACKAGE = ["@tabler", "icons-react"].join("/");
-
-test("no package declares a second icon set, and no source imports one", () => {
-  const listed = spawnSync("git", ["ls-files", "-z"], { cwd: REPO, encoding: "utf8" });
-  assert.equal(listed.status, 0, `git ls-files failed: ${listed.stderr}`);
-  const tracked = listed.stdout.split("\0").filter(Boolean);
-
-  const manifests = tracked.filter((name) => /(?:^|\/)package\.json$/.test(name));
-  assert.ok(manifests.length > 0, "no manifests were read, so this proves nothing");
-  const declaring = manifests.filter((name) =>
-    readFileSync(path.join(REPO, name), "utf8").includes(`"${RETIRED_ICON_PACKAGE}"`),
-  );
-  assert.deepEqual(
-    declaring,
-    [],
-    `this package draws one icon set, and ${RETIRED_ICON_PACKAGE} is not it. ` +
-      `A second one is a decision for DESIGN.md, not a dependency:\n${declaring.join("\n")}`,
-  );
-
-  const sources = tracked.filter((name) => SOURCE.test(name));
-  assert.ok(sources.length > 0, "no sources were read, so this proves nothing");
-  const importing = sources.filter((name) =>
-    new RegExp(String.raw`(?:from|require\()\s*["']${RETIRED_ICON_PACKAGE}["']`).test(
-      readFileSync(path.join(REPO, name), "utf8"),
-    ),
-  );
-  assert.deepEqual(importing, [], `these draw from the retired icon set:\n${importing.join("\n")}`);
-});
-
-test("the tokens have exactly one home, and it is the stylesheet", () => {
-  const listed = spawnSync("git", ["ls-files", "-z"], { cwd: REPO, encoding: "utf8" });
-  assert.equal(listed.status, 0, `git ls-files failed: ${listed.stderr}`);
-  const configs = listed.stdout
-    .split("\0")
-    .filter((name) => /(?:^|\/)tailwind\.config\.[cm]?[jt]s$/.test(name));
-  assert.deepEqual(
-    configs,
-    [],
-    "Tailwind v4 is CSS-first: the tokens live in src/styles.css. " +
-      `A config file gives them a second definition that wins for some utilities and not others:\n${configs.join("\n")}`,
-  );
-});

package/shadcn/README.md

@@ -1,13 +0,0 @@
-# shadcn canonical snapshots
-
-Each file here is exactly what `shadcn@4.19.0 add <name>` wrote for this
-package's `components.json` (radix-nova, preset b2iH), before the import
-relativisation `scripts/shadcn_relativize.mjs` applies. `tests/scripts/shadcn_canonical.test.mjs`
-holds every `src/primitives/<name>.tsx` to its snapshot plus added lines only.
-Regenerate with `pnpm --filter @visionset/ui-core shadcn:add <name>`; never edit by hand.
-
-The gate matches the snapshot as an **ordered subsequence**, so a green run is a
-strong signal rather than a proof: an edited line whose original text also appears
-further down — including on a line that was added — still satisfies the match, and
-the edit goes unreported. Read the diff when a primitive changes; the gate does not
-stand in for that.

package/shadcn/badge.tsx

@@ -1,49 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "@/lib/cn"
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }

package/shadcn/button.tsx

@@ -1,67 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "@/lib/cn"
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }