@robomous/ui-core 0.1.0 → 0.2.0

package/src/gates/index.ts

@@ -0,0 +1,165 @@
+/**
+ * @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: string, text: string): string[] {
+  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: string, text: string): string[] {
+  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: string, text: string): string[] {
+  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: string,
+  text: string,
+): { file: string; at: number; text: string }[] {
+  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: string): string {
+  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: string, header: string): string {
+  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: string): Map<string, string> {
+  const map = new Map<string, string>();
+  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: string): Map<string, string> {
+  const map = new Map<string, string>();
+  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(): string[] {
+  const css = readFileSync(path.join(PKG, "src/theme/styles.css"), "utf8");
+  return [...declarations(blockBody(css, ":root {")).keys()].filter((n) => n !== "radius");
+}

package/src/gates/tokens.test.ts

@@ -0,0 +1,215 @@
+// @vitest-environment node
+/**
+ * `DESIGN.md`'s first principle, machine-enforced: **never a colour in a class
+ * string.** The helpers live in `./index.ts` 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 { readFileSync } from "node:fs";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { expect, test } from "vitest";
+
+import { brandUsagesIn, colouredClassesIn } from "./index.js";
+
+const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+
+const SOURCE = /\.(?:ts|tsx|css)$/;
+
+// Fragment for fabricating violating input without this file matching itself.
+const HEX = ["#", "[0-9a-fA-F]{3,8}"].join("");
+
+/**
+ * Assembles a bracketed Tailwind arbitrary-value utility (e.g.
+ * `text-[var(--accent)]`) from its prefix and bracket contents at runtime, for
+ * the same reason `HEX` above is built from fragments: this file scans its
+ * own package, so a fixture spelled out contiguously would trip the very gate
+ * it exists to exercise.
+ */
+const bracket = (prefix: string, inner: string) => `${prefix}-[${inner}]`;
+
+/**
+ * Assembles a `<prefix>-brand<suffix>` utility fixture at runtime, for the
+ * same self-matching reason as `bracket` above.
+ */
+const brand = (prefix: string, suffix = "") => `${prefix}-brand${suffix}`;
+
+test("the scan finds a colour smuggled into a class, and nothing that merely looks like one", () => {
+  expect(colouredClassesIn("a.tsx", `  <div className="bg-[${HEX.slice(0, 1)}eb5a47]" />`)).toEqual(
+    [`a.tsx:1: <div className="bg-[${HEX.slice(0, 1)}eb5a47]" />`],
+  );
+  expect(colouredClassesIn("b.tsx", `  className="${bracket("text", "var(--accent)")}"`)).toEqual([
+    `b.tsx:1: className="${bracket("text", "var(--accent)")}"`,
+  ]);
+  expect(colouredClassesIn("c.tsx", `  className="${bracket("ring", "rgb(0 0 0)")}"`)).toEqual([
+    `c.tsx:1: className="${bracket("ring", "rgb(0 0 0)")}"`,
+  ]);
+
+  // A token utility is the whole point of the rule and must pass.
+  expect(colouredClassesIn("d.tsx", `  className="bg-primary text-primary-foreground"`)).toEqual(
+    [],
+  );
+  // The accent at 10% is a token with an opacity modifier, not a colour.
+  expect(colouredClassesIn("e.tsx", `  className="bg-primary/10 border-primary"`)).toEqual([]);
+  // 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.
+  expect(colouredClassesIn("f.tsx", `  className="translate-y-[3px]"`)).toEqual([]);
+  // 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.
+  expect(
+    colouredClassesIn("g.tsx", `  style={{ background: classColor(declared, name) }}`),
+  ).toEqual([]);
+  // 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.
+  expect(colouredClassesIn("h.tsx", `   * Never write \`bg-[${"#"}eb5a47]\`.`)).toEqual([]);
+  // And a CSS custom property *declaration* is where colours are supposed to live.
+  expect(colouredClassesIn("i.css", `  --color-primary: #eb5a47;`)).toEqual([]);
+  // A colour-mix of two tokens names no colour of its own — the preset's own
+  // Button hover step.
+  expect(
+    colouredClassesIn(
+      "x.tsx",
+      'className="hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]"',
+    ),
+  ).toEqual([]);
+  // A colour-mix that mixes in a literal is still a colour smuggled into a class.
+  expect(
+    colouredClassesIn("x.tsx", `className="${bracket("bg", "color-mix(in_srgb,#fff,var(--x))")}"`)
+      .length,
+  ).toBe(1);
+  // A named CSS colour inside color-mix is still a colour.
+  expect(
+    colouredClassesIn("x.tsx", `className="${bracket("bg", "color-mix(in_oklch,red,var(--x))")}"`)
+      .length,
+  ).toBe(1);
+  // Whatever order the tokens come in, and whichever colour space, two tokens
+  // stay two tokens.
+  expect(
+    colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_srgb,var(--a)_40%,var(--b))]"').length,
+  ).toBe(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.
+  expect(brandUsagesIn("a.tsx", `  <span className="${brand("text")}">Robomous</span>`)).toEqual([
+    { file: "a.tsx", at: 1, text: `<span className="${brand("text")}">Robomous</span>` },
+  ]);
+  expect(
+    brandUsagesIn("b.tsx", `  className="h-full ${brand("bg")} transition-transform"`),
+  ).toEqual([
+    { file: "b.tsx", at: 1, text: `className="h-full ${brand("bg")} transition-transform"` },
+  ]);
+  // An opacity modifier is still a usage of the brand colour.
+  expect(brandUsagesIn("c.tsx", `  className="${brand("bg", "/10")}"`).map((u) => u.at)).toEqual([
+    1,
+  ]);
+  // A comment line states the rule rather than applying it.
+  expect(brandUsagesIn("d.css", `   * a third \`${brand("bg")}\` is a design decision`)).toEqual(
+    [],
+  );
+  expect(brandUsagesIn("e.tsx", `  // never add ${brand("bg")} here`)).toEqual([]);
+  // Another token on the same prefixes is not the brand.
+  expect(brandUsagesIn("f.tsx", `  className="bg-primary text-primary-foreground"`)).toEqual([]);
+  // 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.
+  expect(brandUsagesIn("g.ts", `  expect(COLOR.brand).toBe("#e85d44");`)).toEqual([]);
+});
+
+/** Every tracked source in this repo. */
+function repoSources(): string[] {
+  const listed = spawnSync("git", ["ls-files", "-z"], { cwd: REPO, encoding: "utf8" });
+  expect(listed.status, `git ls-files failed: ${listed.stderr}`).toBe(0);
+  return listed.stdout.split("\0").filter((name) => SOURCE.test(name));
+}
+
+test("no source puts a colour inside a class name", () => {
+  const tracked = repoSources();
+  expect(tracked.length > 0, "the scan found no sources, so it proves nothing").toBeTruthy();
+
+  const offenders = tracked.flatMap((file) =>
+    colouredClassesIn(file, readFileSync(path.join(REPO, file), "utf8")),
+  );
+  expect(
+    offenders,
+    "colour belongs to the token contract — add a token to " +
+      `src/theme/styles.css and name the intent:\n${offenders.join("\n")}`,
+  ).toEqual([]);
+});
+
+/**
+ * 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: string[] = [];
+
+test("the brand colour paints nothing here — brand sites are a consumer decision", () => {
+  const tracked = repoSources();
+  expect(tracked.length > 0, "the scan found no sources, so it proves nothing").toBeTruthy();
+
+  const usages = tracked.flatMap((file) =>
+    brandUsagesIn(file, readFileSync(path.join(REPO, file), "utf8")),
+  );
+  expect(
+    usages.map((u) => u.file).sort(),
+    "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"),
+  ).toEqual(BRAND_SITES);
+});
+
+/**
+ * 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" });
+  expect(listed.status, `git ls-files failed: ${listed.stderr}`).toBe(0);
+  const tracked = listed.stdout.split("\0").filter(Boolean);
+
+  const manifests = tracked.filter((name) => /(?:^|\/)package\.json$/.test(name));
+  expect(manifests.length > 0, "no manifests were read, so this proves nothing").toBeTruthy();
+  const declaring = manifests.filter((name) =>
+    readFileSync(path.join(REPO, name), "utf8").includes(`"${RETIRED_ICON_PACKAGE}"`),
+  );
+  expect(
+    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")}`,
+  ).toEqual([]);
+
+  const sources = tracked.filter((name) => SOURCE.test(name));
+  expect(sources.length > 0, "no sources were read, so this proves nothing").toBeTruthy();
+  const importing = sources.filter((name) =>
+    new RegExp(String.raw`(?:from|require\()\s*["']${RETIRED_ICON_PACKAGE}["']`).test(
+      readFileSync(path.join(REPO, name), "utf8"),
+    ),
+  );
+  expect(importing, `these draw from the retired icon set:\n${importing.join("\n")}`).toEqual([]);
+});
+
+test("the tokens have exactly one home, and it is the stylesheet", () => {
+  const listed = spawnSync("git", ["ls-files", "-z"], { cwd: REPO, encoding: "utf8" });
+  expect(listed.status, `git ls-files failed: ${listed.stderr}`).toBe(0);
+  const configs = listed.stdout
+    .split("\0")
+    .filter((name) => /(?:^|\/)tailwind\.config\.[cm]?[jt]s$/.test(name));
+  expect(
+    configs,
+    "Tailwind v4 is CSS-first: the tokens live in src/theme/styles.css. " +
+      `A config file gives them a second definition that wins for some utilities and not others:\n${configs.join("\n")}`,
+  ).toEqual([]);
+});

package/src/harness.test.tsx

@@ -17,7 +17,7 @@
 import { render } from "@testing-library/react";
 import { expect, it, vi } from "vitest";
 
-import { Dialog, DialogContent, DialogTitle } from "./primitives/dialog";
+import { Dialog, DialogContent, DialogTitle } from "./components/dialog";
 
 const unmountFocusReturned = vi.fn();
 

package/src/index.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,24 +11,22 @@
  * ```
  *
  * 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 { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./theme/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 { cn } from "cn";
 
 // The one home for status colour outside the Badge.
-export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./statusTone.js";
+export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./theme/statusTone.js";
 
-// Primitives — Radix behaviour under shadcn Nova styling, iconed with lucide.
-export { Button, buttonVariants } from "./primitives/button.js";
+// The components — Radix and Base UI behaviour, iconed with lucide.
+export { Button, buttonVariants } from "./components/button.js";
 export {
   Card,
   CardAction,
@@ -37,10 +35,10 @@ export {
   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";
+} 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,
@@ -52,7 +50,7 @@ export {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "./primitives/field.js";
+} from "./components/field.js";
 export {
   InputGroup,
   InputGroupAddon,
@@ -60,7 +58,7 @@ export {
   InputGroupInput,
   InputGroupText,
   InputGroupTextarea,
-} from "./primitives/input-group.js";
+} from "./components/input-group.js";
 export {
   Combobox,
   ComboboxChip,
@@ -78,13 +76,44 @@ export {
   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";
+} 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,
@@ -101,11 +130,12 @@ export {
   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";
+} 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,
@@ -116,4 +146,4 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-} from "./primitives/table.js";
+} from "./components/table.js";