@robomous/ui-core 0.1.1 → 0.2.0

package/src/{tokens.test.ts → theme/tokens.test.ts}

@@ -1,9 +1,9 @@
 /**
  * @vitest-environment node
  *
- * The foundation gate: `styles.css` is the shadcn preset's exact generated
- * output (`:root`, `.dark`, `@theme inline`, the base layer) plus `brand`,
- * the one Robomous extension. `tokens.ts` is the TypeScript mirror a
+ * The token contract: `styles.css` is the one home for a colour (`:root`,
+ * `.dark`, `@theme inline`, the base layer) — the semantic vocabulary plus
+ * `brand`, the one Robomous extension. `tokens.ts` is the mirror a
  * `<canvas>`/`<svg>` or a test reads a colour off of; this suite parses the
  * stylesheet structurally and asserts the two agree, declaration for
  * declaration, and that none of the tokens this rewrite retired have crept
@@ -23,9 +23,14 @@ import { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens";
 
 const STYLESHEET = readFileSync(fileURLToPath(new URL("./styles.css", import.meta.url)), "utf8");
 
-/** Whitespace is presentation; a value that wraps is the same value. */
+/**
+ * Whitespace and quote style are presentation: a value that wraps, and a font
+ * family spelled in double quotes rather than single, are the same value. Both
+ * change under an ordinary formatter run and neither changes what a browser
+ * resolves, so neither may fail this suite.
+ */
 function normalize(value: string): string {
-  return value.replace(/\s+/g, " ").trim();
+  return value.replace(/\s+/g, " ").replace(/"/g, "'").trim();
 }
 
 /**
@@ -65,9 +70,9 @@ function declarations(block: string): Map<string, string> {
   return map;
 }
 
-// The shadcn standard vocabulary, exactly as the CLI 4.18.0 scratch emitted
-// it — not derived from `tokens.ts`, so a mistake in the mirror cannot also
-// erase the thing it was supposed to mirror.
+// The semantic vocabulary, written out here rather than derived from
+// `tokens.ts`, so a mistake in the mirror cannot also erase the thing it was
+// supposed to mirror.
 const CHART_NAMES = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
 const SIDEBAR_NAMES = [
   "sidebar",
@@ -101,10 +106,10 @@ const BASE_SEMANTIC_NAMES = [
 ];
 const SEMANTIC_NAMES = [...BASE_SEMANTIC_NAMES, ...CHART_NAMES, ...SIDEBAR_NAMES];
 
-// The one extension this package keeps beyond shadcn's vocabulary.
+// The one name this package keeps beyond the semantic vocabulary.
 const EXTENSION_NAMES = ["brand"];
 
-const ORANGE_CHART = {
+const NEUTRAL_CHART = {
   "chart-1": "oklch(0.87 0 0)",
   "chart-2": "oklch(0.556 0 0)",
   "chart-3": "oklch(0.439 0 0)",
@@ -115,7 +120,7 @@ const ORANGE_CHART = {
 describe(":root", () => {
   const root = declarations(blockBody(STYLESHEET, ":root {"));
 
-  it("declares every standard shadcn semantic variable, the five extensions, and --radius, and nothing else", () => {
+  it("declares every semantic variable, the one extension, and --radius, and nothing else", () => {
     expect([...root.keys()].sort()).toEqual(
       [...SEMANTIC_NAMES, ...EXTENSION_NAMES, "radius"].sort(),
     );
@@ -134,13 +139,13 @@ describe(":root", () => {
     expect(lightKeys).toEqual(rootKeys);
   });
 
-  it("pins --radius to the preset's medium step, in both the CSS and THEME", () => {
+  it("pins --radius to the medium step, in both the CSS and THEME", () => {
     expect(root.get("radius")).toBe("0.625rem");
     expect(THEME.radius).toBe("0.625rem");
   });
 
   it("pins the neutral chart palette exactly", () => {
-    for (const [name, value] of Object.entries(ORANGE_CHART)) {
+    for (const [name, value] of Object.entries(NEUTRAL_CHART)) {
       expect(root.get(name)).toBe(value);
     }
   });
@@ -149,7 +154,7 @@ describe(":root", () => {
 describe(".dark", () => {
   const dark = declarations(blockBody(STYLESHEET, ".dark {"));
 
-  it("declares every standard shadcn semantic variable and the five extensions, and nothing else (no --radius)", () => {
+  it("declares every semantic variable and the one extension, and nothing else (no --radius)", () => {
     expect([...dark.keys()].sort()).toEqual([...SEMANTIC_NAMES, ...EXTENSION_NAMES].sort());
   });
 
@@ -164,7 +169,7 @@ describe(".dark", () => {
   });
 
   it("pins the neutral chart palette exactly, unchanged from light", () => {
-    for (const [name, value] of Object.entries(ORANGE_CHART)) {
+    for (const [name, value] of Object.entries(NEUTRAL_CHART)) {
       expect(dark.get(name)).toBe(value);
     }
   });
@@ -200,8 +205,8 @@ describe("@theme inline", () => {
 /**
  * The four `--text-*` custom properties this rewrite retired (Task 2 moved
  * their consumers onto Tailwind's standard scale: xs/sm/base/2xl). Assembled
- * from fragments — the same trick `tests/scripts/design_tokens.test.mjs`'s
- * `HEX` uses — so this guard's own source never spells any retired name as a
+ * from fragments — the same trick `src/gates/tokens.test.ts`'s `HEX` uses — so
+ * this guard's own source never spells any retired name as a
  * contiguous string and cannot trip the repo-wide sweep that proves the
  * migration complete everywhere else.
  */
@@ -231,8 +236,10 @@ describe("structure", () => {
     const anchors = [
       '@import "tailwindcss";',
       '@import "tw-animate-css";',
-      '@import "shadcn/tailwind.css";',
-      // One family, so one font import: `b2iH` sets the heading face to the body's
+      // The variant and utility layer, ahead of the token blocks: a variant
+      // has to exist before a utility can qualify on it.
+      '@import "./tailwind.css";',
+      // One family, so one font import: the heading face resolves to the body's
       // rather than naming a second one.
       '@import "@fontsource-variable/geist";',
       "@custom-variant dark (&:is(.dark *));",
@@ -249,17 +256,17 @@ describe("structure", () => {
   it("reaches its own package's classes: @source after the imports", () => {
     const sourceAt = STYLESHEET.indexOf('@source ".";');
     const lastImportAt = STYLESHEET.lastIndexOf("@import");
-    expect(sourceAt, "styles.css has no @source \".\";").toBeGreaterThan(-1);
+    expect(sourceAt, 'styles.css has no @source ".";').toBeGreaterThan(-1);
     expect(sourceAt).toBeGreaterThan(lastImportAt);
   });
 
-  it("applies the base-layer ring/border rule shadcn ships", () => {
+  it("applies the base-layer ring/border rule to every element", () => {
     expect(/\*\s*\{\s*@apply border-border outline-ring\/50;\s*\}/.test(STYLESHEET)).toBe(true);
   });
 
   /**
    * The `*` rule above names the outline *colour* and nothing else about focus.
-   * The geometry is the primitives': every focusable one carries Nova's
+   * The geometry belongs to the components: every focusable one carries its own
    * `focus-visible:ring-3 focus-visible:ring-ring/50` (the tab bar adds a 1px
    * `outline-ring` on top of it), so a stylesheet-level `:focus-visible`
    * override would now fight the components instead of backing them up.
@@ -268,7 +275,7 @@ describe("structure", () => {
    * re-adding a blanket rule here is how a single global declaration would
    * quietly start overriding thirteen components again.
    */
-  it("leaves focus geometry to the primitives: no stylesheet-level :focus-visible rule", () => {
+  it("leaves focus geometry to the components: no stylesheet-level :focus-visible rule", () => {
     expect(STYLESHEET).not.toContain(":focus-visible");
   });
 

package/src/{tokens.ts → theme/tokens.ts}

@@ -8,24 +8,24 @@
  * which parses the stylesheet and asserts the two agree, declaration for
  * declaration.
  *
- * `LIGHT_THEME`/`DARK_THEME` are the shadcn preset (`b2iH` — style
- * `nova`, base colour `neutral`, chart palette `neutral`) exactly as the CLI
- * 4.19.0 scratch generated it, plus `brand` (Robomous coral — identity only).
- * Consumer extensions such as VisionSet's `stage` and `origin-*` live in the
- * consumer's own token module. Everything else is shadcn's own vocabulary.
+ * `LIGHT_THEME`/`DARK_THEME` carry the semantic vocabulary on a neutral base
+ * colour and chart palette, plus one name of this package's own: `brand`,
+ * Robomous orange, identity only. A consumer's own vocabulary lives in the
+ * consumer's stylesheet and token module, never here — DESIGN.md,
+ * *Per-consumer extensions*.
  */
 
 export const LIGHT_THEME: Readonly<Record<string, string>> = Object.freeze({
   background: "oklch(1 0 0)",
-  foreground: "oklch(0.145 0 0)",
+  foreground: "oklch(0.2 0 0)",
   card: "oklch(1 0 0)",
   "card-foreground": "oklch(0.145 0 0)",
   popover: "oklch(1 0 0)",
   "popover-foreground": "oklch(0.145 0 0)",
-  primary: "oklch(0.205 0 0)",
+  primary: "oklch(0.2 0 0)",
   "primary-foreground": "oklch(0.985 0 0)",
   secondary: "oklch(0.97 0 0)",
-  "secondary-foreground": "oklch(0.205 0 0)",
+  "secondary-foreground": "oklch(0.269 0 0)",
   muted: "oklch(0.97 0 0)",
   "muted-foreground": "oklch(0.556 0 0)",
   accent: "oklch(0.97 0 0)",
@@ -48,9 +48,9 @@ export const LIGHT_THEME: Readonly<Record<string, string>> = Object.freeze({
   "sidebar-border": "oklch(0.922 0 0)",
   "sidebar-ring": "oklch(0.708 0 0)",
 
-  // Robomous coral. Identity only — the wordmark and its styleguide swatch
-  // — never a functional-UI colour.
-  brand: "oklch(0.653 0.178 32.3)",
+  // Robomous orange (#F5580B). Identity only — the wordmark and its styleguide
+  // swatch — never a functional-UI colour.
+  brand: "oklch(0.663 0.205 39.9)",
 });
 
 export const DARK_THEME: Readonly<Record<string, string>> = Object.freeze({
@@ -86,7 +86,7 @@ export const DARK_THEME: Readonly<Record<string, string>> = Object.freeze({
   "sidebar-border": "oklch(1 0 0 / 10%)",
   "sidebar-ring": "oklch(0.556 0 0)",
 
-  brand: "oklch(0.653 0.178 32.3)",
+  brand: "oklch(0.663 0.205 39.9)",
 });
 
 /** The two provenance facts a colour string alone cannot carry. */

package/components.json

@@ -1,13 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": { "config": "", "css": "src/styles.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": { "components": "@/components", "utils": "@/lib/cn", "ui": "@/primitives", "lib": "@/lib", "hooks": "@/hooks" },
-  "menuColor": "default",
-  "menuAccent": "subtle",
-  "registries": {}
-}

package/dist/lib/button.d.ts

@@ -1 +0,0 @@
-export declare const inlineLink = "h-auto p-0";

package/dist/lib/button.js

@@ -1,4 +0,0 @@
-// A link button is inline prose, not a boxed control: the canonical variant keeps
-// the button's height and padding, so the sites that sit inside a sentence or a
-// table cell hand them back.
-export const inlineLink = "h-auto p-0";

package/dist/lib/cn.d.ts

@@ -1,18 +0,0 @@
-/**
- * `cn` — merge class names, last conflicting utility wins.
- *
- * `clsx` handles the conditionals; `tailwind-merge` handles the part a naive
- * join gets wrong. Without it `cn("px-4", props.className)` with `px-6`
- * passed in emits both, and which one applies is decided by the order
- * Tailwind happened to write them into the stylesheet — so a caller's
- * override works or does not depending on a rule nobody can see. That is why
- * the `className` prop on every primitive here is a real extension point
- * rather than a suggestion.
- *
- * The shadcn preset's own vocabulary needs no custom `tailwind-merge`
- * configuration — unlike v1's `--text-*` scale, none of its names collide
- * with a stock Tailwind class group — so this is the bare merge, the same
- * shape the CLI scratch's own `lib/utils.ts` ships.
- */
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: readonly ClassValue[]): string;

package/dist/lib/cn.js

@@ -1,21 +0,0 @@
-/**
- * `cn` — merge class names, last conflicting utility wins.
- *
- * `clsx` handles the conditionals; `tailwind-merge` handles the part a naive
- * join gets wrong. Without it `cn("px-4", props.className)` with `px-6`
- * passed in emits both, and which one applies is decided by the order
- * Tailwind happened to write them into the stylesheet — so a caller's
- * override works or does not depending on a rule nobody can see. That is why
- * the `className` prop on every primitive here is a real extension point
- * rather than a suggestion.
- *
- * The shadcn preset's own vocabulary needs no custom `tailwind-merge`
- * configuration — unlike v1's `--text-*` scale, none of its names collide
- * with a stock Tailwind class group — so this is the bare merge, the same
- * shape the CLI scratch's own `lib/utils.ts` ships.
- */
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}

package/dist/lib/menu.d.ts

@@ -1 +0,0 @@
-export declare const menuSurface = "data-closed:animate-none! w-auto";

package/dist/lib/menu.js

@@ -1,16 +0,0 @@
-// What every `DropdownMenuContent` call site adds to the canonical surface, in
-// one constant because both halves are the same rule — a menu that behaves like
-// a menu (DESIGN.md, Motion).
-//
-// `data-closed:animate-none!`: a menu surface leaves on the frame it is
-// dismissed. While Radix runs an exit animation the dismissable layer stays
-// mounted, and a press that should open the next menu is swallowed as the
-// dismissal of this one.
-//
-// `w-auto`: a menu sizes to its items, not to its trigger. Canonical carries
-// `w-(--radix-dropdown-menu-trigger-width) min-w-32`, which pins the surface to
-// the trigger — behind an icon-sized button that is the 128px floor, and every
-// item longer than that wraps (the row actions on ModelsScreen, the Annotate
-// picker). `min-w-32` survives as the floor it was meant to be, because
-// tailwind-merge replaces only the `w-*` in the same utility group.
-export const menuSurface = "data-closed:animate-none! w-auto";

package/dist/lib/progress.d.ts

@@ -1,3 +0,0 @@
-export declare function progressAria(value: number): {
-    readonly "aria-valuenow": number;
-};

package/dist/lib/progress.js

@@ -1,6 +0,0 @@
-// Canonical `Progress` reads `value` only to size the indicator and never
-// forwards it to Radix's `Root`, so the number a screen reader would announce
-// is otherwise never rendered at all — a caller that needs it says so again here.
-export function progressAria(value) {
-    return { "aria-valuenow": value };
-}

package/dist/lib/select.d.ts

@@ -1 +0,0 @@
-export declare const twoLineTrigger = "data-[size=default]:h-auto min-h-8 *:data-[slot=select-value]:line-clamp-none";

package/dist/lib/select.js

@@ -1,3 +0,0 @@
-// A two-line option needs the closed trigger to grow and to stop clamping its
-// value; both overrides name canonical's own variants so the merge replaces them.
-export const twoLineTrigger = "data-[size=default]:h-auto min-h-8 *:data-[slot=select-value]:line-clamp-none";

package/dist/primitives/progress.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Progress as ProgressPrimitive } from "radix-ui";
-import { cn } from "../lib/cn.js";
-function Progress({ className, value, ...props }) {
-    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "size-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
-}
-export { Progress };

package/gates/canonical.test.mjs

@@ -1,71 +0,0 @@
-import assert from "node:assert/strict";
-import { existsSync, readFileSync, readdirSync } from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { test } from "node:test";
-import { relativize } from "../scripts/shadcn_relativize.mjs";
-
-import {
-  ADAPTER_REMOVED_LINES,
-  additiveOnly,
-  checkAdapter,
-  withoutLines,
-} from "./index.mjs";
-
-const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-const PRIMITIVES = path.join(REPO, "src/primitives");
-const SNAPSHOTS = path.join(REPO, "shadcn");
-
-test("additiveOnly accepts an added line and refuses a changed one", () => {
-  assert.equal(additiveOnly("a\nb\n", "a\nx\nb\n").ok, true);
-  assert.equal(additiveOnly("a\nb\n", "a\nB\n").ok, false);
-  assert.equal(additiveOnly("a\nb\n", "b\na\n").ok, false);
-  assert.equal(additiveOnly("a\n\nb\n", "a\nb\n").ok, false);
-  assert.equal(additiveOnly("a\r\nb  \r\n", "a\nb\n").ok, true);
-});
-
-test("checkAdapter refuses an unlisted file carrying the marker", () => {
-  const result = checkAdapter("unlisted.tsx", "// SHADCN FRAMEWORK ADAPTER\nconst x = 1\n");
-  assert.equal(result.ok, false);
-});
-
-test("checkAdapter accepts a listed file carrying the marker", () => {
-  const result = checkAdapter("sonner.tsx", "// SHADCN FRAMEWORK ADAPTER\nconst x = 1\n");
-  assert.deepEqual(result, { ok: true, isAdapter: true });
-});
-
-test("checkAdapter ignores a file with no marker even if unlisted", () => {
-  const result = checkAdapter("unlisted.tsx", "const x = 1\n");
-  assert.deepEqual(result, { ok: true, isAdapter: false });
-});
-
-test("a listed adapter passes when only the two next-themes lines are removed", () => {
-  const snapshot = 'import { useTheme } from "next-themes"\nconst x = 1\n  const { theme = "system" } = useTheme()\nconst y = 2\n';
-  const actual = "// SHADCN FRAMEWORK ADAPTER\nconst x = 1\nconst y = 2\n";
-  const result = additiveOnly(withoutLines(relativize(snapshot), ADAPTER_REMOVED_LINES), actual);
-  assert.equal(result.ok, true);
-});
-
-test("a listed adapter that also drops a different snapshot line still fails", () => {
-  const snapshot = 'import { useTheme } from "next-themes"\nconst x = 1\n  const { theme = "system" } = useTheme()\nconst y = 2\n';
-  const actual = "// SHADCN FRAMEWORK ADAPTER\nconst y = 2\n"; // "const x = 1" went missing too
-  const result = additiveOnly(withoutLines(relativize(snapshot), ADAPTER_REMOVED_LINES), actual);
-  assert.equal(result.ok, false);
-});
-
-const primitives = readdirSync(PRIMITIVES).filter((f) => f.endsWith(".tsx") && !f.endsWith(".test.tsx"));
-
-for (const file of primitives) {
-  test(`${file} is shadcn's canonical file plus added lines only`, () => {
-    const snapshot = path.join(SNAPSHOTS, file);
-    assert.ok(existsSync(snapshot), `${file} has no snapshot in shadcn/ — install it with pnpm shadcn:add`);
-    const snapshotText = relativize(readFileSync(snapshot, "utf8"));
-    const actualText = readFileSync(path.join(PRIMITIVES, file), "utf8");
-    const adapter = checkAdapter(file, actualText);
-    assert.ok(adapter.ok, adapter.reason);
-    const result = adapter.isAdapter
-      ? additiveOnly(withoutLines(snapshotText, ADAPTER_REMOVED_LINES), actualText)
-      : additiveOnly(snapshotText, actualText);
-    assert.ok(result.ok, `${file} diverges from its snapshot at: ${result.missing}`);
-  });
-}