@robomous/ui-core 0.1.0 → 0.2.0

package/dist/gates/index.js

@@ -0,0 +1,142 @@
+/**
+ * @robomous/ui-core/gates — the pure helpers and token facts that keep the
+ * design system honest, published so every consumer repo can run the same
+ * gates over its own sources with its own extensions registry.
+ *
+ * Eight exports: four scanners over one file's text, three readers for a
+ * stylesheet's blocks and declarations, and the token names read off the
+ * stylesheet that ships. DESIGN.md names the rule each one holds.
+ */
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+const PKG = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+const COMMENT = /^\s*(?:\/\/|\/\*|\*|#)/;
+// ---- status palette discipline ----
+/**
+ * The status palette's one Tailwind family: emerald/amber/sky, across every
+ * prefix that can carry a colour. `Badge` and `statusTone.ts` are its one
+ * home — see `statusTone.ts`'s own docstring — so a third place naming the
+ * family is a fork of the palette, not a use of it.
+ */
+const STATUS_PALETTE = /\b(?:bg|text|border|ring|fill|stroke|from|to|via|outline|decoration|shadow)-(?:emerald|amber|sky)-\d/;
+/** Every `file:line` in `text` painting with the status palette, outside a comment. */
+export function statusPaletteIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) && STATUS_PALETTE.test(line))
+        .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+/**
+ * A colour family that competes with the status palette for the same job —
+ * "a warning", "a success" — and so could stand in for it undetected. Unlike
+ * the palette itself these have no allowed home anywhere in a consumer.
+ */
+const COMPETING_PALETTE = /\b(?:bg|text|border)-(?:green|lime|teal|yellow|orange|blue|cyan|red)-\d/;
+/** Every `file:line` in `text` reaching for a colour family that competes with the status palette. */
+export function competingStatusPaletteIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) && COMPETING_PALETTE.test(line))
+        .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+// ---- colour discipline (from tests/scripts/design_tokens.test.mjs) ----
+/**
+ * A Tailwind arbitrary value whose content is a colour.
+ *
+ * Assembled from fragments so this file does not match itself. The `-` before
+ * the bracket is what makes it a *utility* rather than an array index or a
+ * TypeScript tuple type.
+ */
+const HEX = ["#", "[0-9a-fA-F]{3,8}"].join("");
+const LITERAL = String.raw `(?:${HEX}|rgba?\(|hsla?\(|oklch\()`;
+// A raw colour right inside the bracket…
+const ARBITRARY_COLOUR = new RegExp(String.raw `-\[\s*(?:${LITERAL}|var\(\s*--)`);
+// The one colour-mix the preset writes mixes tokens only:
+// `color-mix(in_oklch,var(--secondary),var(--foreground)_5%)`. Any other
+// argument shape — a literal, a named colour, a bare number — is a colour.
+const TOKEN_MIX = String.raw `color-mix\(in_[a-z0-9-]+(?:,var\(--[a-z0-9-]+\)(?:_\d+(?:\.\d+)?%)?)+\)`;
+const BRACKET_MIX = new RegExp(String.raw `-\[\s*color-mix\([^\]]*\]`);
+const ALLOWED_MIX = new RegExp(String.raw `-\[\s*${TOKEN_MIX}\]`);
+/** Every `file:line` in `text` that puts a colour inside a Tailwind class. */
+export function colouredClassesIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) &&
+        (ARBITRARY_COLOUR.test(line) || (BRACKET_MIX.test(line) && !ALLOWED_MIX.test(line))))
+        .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+/**
+ * `DESIGN.md` "Where the brand is": the brand is identity, not a functional-UI
+ * colour — the wordmark and the styleguide swatch that shows it off, nothing
+ * a person acts on. This is not a headcount: the gate does not exist to hold
+ * a count of sites, it exists so brand can never migrate onto a control (a
+ * button, a progress fill, anything with a function) instead of staying the
+ * one place it is allowed to just be seen. A pure function over one file's
+ * text, so the gate is provable with fabricated input, and `COMMENT` keeps
+ * the styles.css line that *states* the rule from counting as a usage of it.
+ */
+const BRAND_UTILITY = /\b(?:bg|text|border|ring|fill|stroke)-brand\b/;
+/** Every line in `text` that paints with the brand colour. */
+export function brandUsagesIn(file, text) {
+    return text
+        .split("\n")
+        .map((line, index) => ({ line, at: index + 1 }))
+        .filter(({ line }) => !COMMENT.test(line) && BRAND_UTILITY.test(line))
+        .map(({ line, at }) => ({ file, at, text: line.trim() }));
+}
+// ---- stylesheet parsing (from src/theme/tokens.test.ts, translated TS→JS) ----
+/** Whitespace is presentation; a value that wraps is the same value — used internally by `rawDeclarations`. */
+function normalize(value) {
+    return value.replace(/\s+/g, " ").trim();
+}
+/**
+ * The `{ … }` body belonging to the block whose header (e.g. `:root {` or
+ * `.dark {`) appears first in the file, matched by brace depth rather than by
+ * the next `\n}` so a nested `calc(...)` or `color-mix(...)` cannot fool it.
+ */
+export function blockBody(css, header) {
+    const headerAt = css.indexOf(header);
+    if (headerAt === -1)
+        throw new Error(`stylesheet has no ${JSON.stringify(header)} block`);
+    const braceAt = css.indexOf("{", headerAt);
+    let depth = 1;
+    let i = braceAt + 1;
+    while (depth > 0 && i < css.length) {
+        if (css[i] === "{")
+            depth++;
+        else if (css[i] === "}")
+            depth--;
+        i++;
+    }
+    return css.slice(braceAt + 1, i - 1);
+}
+/** Every `--name: value;` declaration in a block, keyed WITH the leading `--`. */
+export function rawDeclarations(block) {
+    const map = new Map();
+    for (const match of block.matchAll(/(--[\w-]+):\s*([^;]+);/g)) {
+        map.set(match[1], normalize(match[2]));
+    }
+    return map;
+}
+/** The same, keyed WITHOUT the leading `--` — the shape `LIGHT_THEME` uses. */
+export function declarations(block) {
+    const map = new Map();
+    for (const [name, value] of rawDeclarations(block)) {
+        map.set(name.slice(2), value);
+    }
+    return map;
+}
+// ---- foundation facts ----
+/**
+ * The foundation token names, read off the shipped stylesheet's `:root` so
+ * they can never drift from what actually runs. `radius` is a geometry
+ * setting, not a colour token, and is excluded — it matches LIGHT_THEME's keys.
+ */
+export function foundationTokenNames() {
+    const css = readFileSync(path.join(PKG, "src/theme/styles.css"), "utf8");
+    return [...declarations(blockBody(css, ":root {")).keys()].filter((n) => n !== "radius");
+}

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 /**
  * `@robomous/ui-core` — the Robomous design system.
  *
- * Extracted from Robomous/VisionSet. UI primitives: Radix behaviour under
- * shadcn Nova styling, iconed with lucide; the foundation design tokens; and
- * the status-tone vocabulary. A consumer imports exactly:
+ * Twenty-one React components this package owns outright, the design tokens
+ * they resolve through, and the status-tone vocabulary. A consumer imports
+ * exactly:
  *
  * ```ts
  * import "@robomous/ui-core/styles.css";   // once, in the app's entry
@@ -11,34 +11,33 @@
  * ```
  *
  * The public surface is listed explicitly rather than `export *`, so what this
- * package promises stays auditable. The gates that keep the primitives
- * canonical are published too: `import { ... } from "@robomous/ui-core/gates"`.
+ * package promises stays auditable. The scanners behind this repository's own
+ * design rules are published too, for a consumer to run over its own sources:
+ * `import { ... } from "@robomous/ui-core/gates"`. DESIGN.md names each rule
+ * and the gate that holds it.
  */
-export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens.js";
-export { inlineLink } from "./lib/button.js";
-export { cn } from "./lib/cn.js";
-export { menuSurface } from "./lib/menu.js";
-export { twoLineTrigger } from "./lib/select.js";
-export { progressAria } from "./lib/progress.js";
-export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./statusTone.js";
-export { Button, buttonVariants } from "./primitives/button.js";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./primitives/card.js";
-export { Input } from "./primitives/input.js";
-export { Textarea } from "./primitives/textarea.js";
-export { Label } from "./primitives/label.js";
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./primitives/field.js";
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./primitives/input-group.js";
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./primitives/combobox.js";
-export { Badge, badgeVariants } from "./primitives/badge.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle } from "./primitives/alert.js";
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
-export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./primitives/tabs.js";
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./primitives/dropdown-menu.js";
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
-export { Progress } from "./primitives/progress.js";
-export { Skeleton } from "./primitives/skeleton.js";
-export { Toaster } from "./primitives/sonner.js";
+export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./theme/tokens.js";
+export { cn } from "cn";
+export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./theme/statusTone.js";
+export { Button, buttonVariants } from "./components/button.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./components/card.js";
+export { Input } from "./components/input.js";
+export { Textarea } from "./components/textarea.js";
+export { Label } from "./components/label.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./components/field.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./components/input-group.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./components/combobox.js";
+export { Badge, badgeVariants } from "./components/badge.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/alert.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./components/sheet.js";
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./components/tabs.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./components/dropdown-menu.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+export { Progress } from "./components/progress.js";
+export { Separator } from "./components/separator.js";
+export { Skeleton } from "./components/skeleton.js";
+export { Toaster } from "./components/sonner.js";
 export { toast } from "sonner";
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./primitives/table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./components/table.js";

package/dist/index.js

@@ -1,9 +1,9 @@
 /**
  * `@robomous/ui-core` — the Robomous design system.
  *
- * Extracted from Robomous/VisionSet. UI primitives: Radix behaviour under
- * shadcn Nova styling, iconed with lucide; the foundation design tokens; and
- * the status-tone vocabulary. A consumer imports exactly:
+ * Twenty-one React components this package owns outright, the design tokens
+ * they resolve through, and the status-tone vocabulary. A consumer imports
+ * exactly:
  *
  * ```ts
  * import "@robomous/ui-core/styles.css";   // once, in the app's entry
@@ -11,37 +11,36 @@
  * ```
  *
  * The public surface is listed explicitly rather than `export *`, so what this
- * package promises stays auditable. The gates that keep the primitives
- * canonical are published too: `import { ... } from "@robomous/ui-core/gates"`.
+ * package promises stays auditable. The scanners behind this repository's own
+ * design rules are published too, for a consumer to run over its own sources:
+ * `import { ... } from "@robomous/ui-core/gates"`. DESIGN.md names each rule
+ * and the gate that holds it.
  */
 // The design tokens, and their prose contract in DESIGN.md.
-export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens.js";
-export { inlineLink } from "./lib/button.js";
-export { cn } from "./lib/cn.js";
-export { menuSurface } from "./lib/menu.js";
-export { twoLineTrigger } from "./lib/select.js";
-export { progressAria } from "./lib/progress.js";
+export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./theme/tokens.js";
+export { cn } from "cn";
 // The one home for status colour outside the Badge.
-export { STATUS_INK, TONE_BORDER, TONE_FILL } from "./statusTone.js";
-// Primitives — Radix behaviour under shadcn Nova styling, iconed with lucide.
-export { Button, buttonVariants } from "./primitives/button.js";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./primitives/card.js";
-export { Input } from "./primitives/input.js";
-export { Textarea } from "./primitives/textarea.js";
-export { Label } from "./primitives/label.js";
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./primitives/field.js";
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./primitives/input-group.js";
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./primitives/combobox.js";
-export { Badge, badgeVariants } from "./primitives/badge.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle } from "./primitives/alert.js";
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
-export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./primitives/tabs.js";
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./primitives/dropdown-menu.js";
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
-export { Progress } from "./primitives/progress.js";
-export { Skeleton } from "./primitives/skeleton.js";
-export { Toaster } from "./primitives/sonner.js";
+export { STATUS_INK, TONE_BORDER, TONE_FILL } from "./theme/statusTone.js";
+// The components — Radix and Base UI behaviour, iconed with lucide.
+export { Button, buttonVariants } from "./components/button.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./components/card.js";
+export { Input } from "./components/input.js";
+export { Textarea } from "./components/textarea.js";
+export { Label } from "./components/label.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./components/field.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./components/input-group.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./components/combobox.js";
+export { Badge, badgeVariants } from "./components/badge.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/alert.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./components/sheet.js";
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./components/tabs.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./components/dropdown-menu.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+export { Progress } from "./components/progress.js";
+export { Separator } from "./components/separator.js";
+export { Skeleton } from "./components/skeleton.js";
+export { Toaster } from "./components/sonner.js";
 export { toast } from "sonner";
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./primitives/table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./components/table.js";

package/dist/{tokens.d.ts → theme/tokens.d.ts}

@@ -8,11 +8,11 @@
  * 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 declare const LIGHT_THEME: Readonly<Record<string, string>>;
 export declare const DARK_THEME: Readonly<Record<string, string>>;

package/dist/{tokens.js → theme/tokens.js}

@@ -8,23 +8,23 @@
  * 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 = 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)",
@@ -46,9 +46,9 @@ export const LIGHT_THEME = Object.freeze({
     "sidebar-accent-foreground": "oklch(0.205 0 0)",
     "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 = Object.freeze({
     background: "oklch(0.145 0 0)",
@@ -82,7 +82,7 @@ export const DARK_THEME = Object.freeze({
     "sidebar-accent-foreground": "oklch(0.985 0 0)",
     "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. */
 export const THEME = {

package/package.json

@@ -1,36 +1,46 @@
 {
   "name": "@robomous/ui-core",
-  "version": "0.1.0",
-  "description": "Robomous design system: shadcn Nova primitives under Radix behaviour, design tokens, and the gates that keep them canonical. Extracted from Robomous/VisionSet.",
+  "version": "0.2.0",
+  "description": "Robomous design system: twenty-one owned React components, the design tokens they resolve through, and the gates that hold the rules behind them.",
   "license": "Apache-2.0",
-  "repository": { "type": "git", "url": "https://github.com/Robomous/ui-core.git" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Robomous/ui-core.git"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
-    "./styles.css": "./src/styles.css",
-    "./gates": { "types": "./gates/index.d.mts", "import": "./gates/index.mjs" }
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/theme/styles.css",
+    "./gates": {
+      "types": "./dist/gates/index.d.ts",
+      "import": "./dist/gates/index.js"
+    }
   },
-  "files": ["dist", "src", "gates", "shadcn", "components.json"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "test": "vitest run",
-    "test:gates": "node --test gates/*.test.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint src && pnpm run typecheck",
-    "shadcn:add": "bash scripts/shadcn_add.sh"
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/geist": "^5.3.0",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
+    "cn": "^0.2.4",
     "lucide-react": "^1.32.0",
     "radix-ui": "^1.6.7",
-    "shadcn": "^4.19.0",
     "sonner": "^2.0.8",
-    "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
   "peerDependencies": {
@@ -50,6 +60,7 @@
     "eslint": "^10.9.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "jsdom": "^30.0.1",
+    "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "^4.3.3",

package/{shadcn → src/components}/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/cn"
+import { cn } from "cn";
 
 const alertVariants = cva(
   "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Alert({
   className,
@@ -31,7 +31,7 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -40,37 +40,30 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="alert-title"
       className={cn(
         "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
         "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
-      {...props}
-    />
-  )
+    <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription, AlertAction }
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/{primitives → components}/badge.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from "../lib/cn.js"
+import { cn } from "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!",
@@ -10,39 +10,33 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/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",
         success:
           "bg-emerald-500/10 text-emerald-700 focus-visible:ring-emerald-500/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:focus-visible:ring-emerald-400/40 [a]:hover:bg-emerald-500/20 dark:[a]:hover:bg-emerald-400/20",
         warning:
           "bg-amber-500/10 text-amber-700 focus-visible:ring-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:focus-visible:ring-amber-400/40 [a]:hover:bg-amber-500/20 dark:[a]:hover:bg-amber-400/20",
-        info:
-          "bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20",
-        quiet:
-          "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
-        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",
+        info: "bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20",
+        quiet: "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
+        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"
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
 
   return (
     <Comp
@@ -51,7 +45,7 @@ function Badge({
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };