@instruments/materia-ui 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -16,6 +16,7 @@
     "brand",
     "dist",
     "lint",
+    "!lint/**/*.test.ts",
     "README.md",
     "LICENSE"
   ],
@@ -793,6 +794,10 @@
       "types": "./dist/tokens/motion.d.ts",
       "default": "./dist/tokens/motion.js"
     },
+    "./tokens/radius": {
+      "types": "./dist/tokens/radius.d.ts",
+      "default": "./dist/tokens/radius.js"
+    },
     "./tokens/radius-tokens": {
       "types": "./dist/tokens/radius-tokens.d.ts",
       "default": "./dist/tokens/radius-tokens.js"
@@ -835,7 +840,6 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@instruments/colorscope": "10.2.0",
-    "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-table": "^9.2.4",
     "@tanstack/react-virtual": "^3.14.13",
     "canvas-confetti": "^1.9.4",
@@ -857,6 +861,8 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
+    "@figma/code-connect": "^2.0.1",
+    "@figma/plugin-typings": "^1.140.0",
     "@howells/typescript-config": "^0.1.6",
     "@materia-ui/typescript-api": "npm:typescript@6.0.3",
     "@playwright/test": "^1.63.0",
@@ -890,23 +896,30 @@
     "node": ">=22"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/finish-dist.mjs",
-    "generate:agent-docs": "node scripts/generate-agent-docs.mjs",
-    "generate:api": "node scripts/generate-api-report.mjs",
-    "generate:brand-assets": "tsx scripts/generate-brand-assets.mjs",
-    "generate:cn-theme": "node scripts/generate-cn-theme.mjs",
-    "generate:docs-manifest": "node scripts/generate-docs-manifest.mjs",
-    "generate:exports": "node scripts/generate-exports.mjs",
-    "generate:lint-tokens": "node scripts/generate-lint-tokens.mjs",
-    "generate:motion-css": "tsx scripts/generate-motion-css.mjs",
-    "lint": "howells-check src",
-    "lint:fix": "howells-fix src",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/finish-dist.ts",
+    "deploy:figma-connect": "tsx figma/connect-templates.ts --publish",
+    "deploy:figma-storybook-links": "tsx figma/storybook-links.ts --publish",
+    "deploy:figma-tokens": "tsx figma/deploy-tokens.ts",
+    "generate:agent-docs": "node scripts/generate-agent-docs.ts",
+    "generate:api": "node scripts/generate-api-report.ts",
+    "generate:brand-assets": "tsx scripts/generate-brand-assets.ts",
+    "generate:cn-theme": "node scripts/generate-cn-theme.ts",
+    "generate:docs-manifest": "node scripts/generate-docs-manifest.ts",
+    "generate:exports": "node scripts/generate-exports.ts",
+    "generate:figma-connect": "tsx figma/connect-templates.ts",
+    "generate:figma-storybook-links": "tsx figma/storybook-links.ts",
+    "generate:lint-tokens": "node scripts/generate-lint-tokens.ts",
+    "generate:lint-types": "node scripts/generate-lint-types.ts",
+    "generate:motion-css": "tsx scripts/generate-motion-css.ts",
+    "lint": "howells-check .",
+    "lint:fix": "howells-fix .",
     "test": "vitest run",
     "test:controls": "vitest run --config vitest.controls.config.ts",
+    "test:figma": "vitest run --config vitest.figma.config.ts",
     "test:browser:dark": "STORYBOOK_FORCED_THEME=dark pnpm --filter @materia-ui/storybook test:browser",
     "test:vr": "playwright test --project=visual-regression",
     "test:vr:update": "playwright test --project=visual-regression --update-snapshots",
     "test:vr:update:missing": "playwright test --project=visual-regression --update-snapshots=missing",
-    "typecheck": "mkdir -p node_modules/.cache/tsbuildinfo && tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsbuildinfo/typecheck.tsbuildinfo"
+    "typecheck": "mkdir -p node_modules/.cache/tsbuildinfo && tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsbuildinfo/typecheck.tsbuildinfo && tsc --noEmit -p figma/connect"
   }
 }

package/lint/oxlint/fixtures/allowed.tsx

@@ -1,12 +0,0 @@
-// Fixture: linted under an override granting allow:["html","body"]. The html and
-// body hosts must be suppressed; the div must still report. Exactly ONE
-// diagnostic proves context.options reaches the rule and is honored selectively.
-export function Allowed() {
-  return (
-    <html lang="en">
-      <body>
-        <div>still banned</div>
-      </body>
-    </html>
-  );
-}

package/lint/oxlint/fixtures/fixture.config.mjs

@@ -1,29 +0,0 @@
-// Fixture oxlint config. Plain object (oxlint's defineConfig is identity), so we
-// avoid importing "oxlint" here. The plugin is referenced by a file:// URL
-// resolved relative to this config so the test is location-independent.
-const specifier = new URL("../index.mjs", import.meta.url).href;
-
-export default {
-  // Single-purpose doctrine gate: silence oxlint's built-in rules so the JSON
-  // report contains only our diagnostics.
-  categories: { correctness: "off" },
-  jsPlugins: [{ name: "materia-ui", specifier }],
-  rules: {
-    "materia-ui/no-naked-element": "error",
-    "materia-ui/no-render-layout-as": "error",
-  },
-  overrides: [
-    {
-      files: ["**/allowed.tsx"],
-      rules: {
-        "materia-ui/no-naked-element": ["error", { allow: ["html", "body"] }],
-      },
-    },
-    {
-      files: ["**/layout-only.tsx"],
-      rules: {
-        "materia-ui/no-naked-element": ["error", { layoutOnly: true }],
-      },
-    },
-  ],
-};

package/lint/oxlint/fixtures/invalid.tsx

@@ -1,24 +0,0 @@
-// Fixture: every raw host on its own line so the rule reports each one.
-// Not a real module - never imported, never type-checked, never shipped as code.
-export function Invalid() {
-  return (
-    <div>
-      <span>text</span>
-      <a href="#">link</a>
-      <main>main</main>
-      <ul>
-        <li>item</li>
-      </ul>
-      <code>code</code>
-      <pre>pre</pre>
-      <img src="x.png" alt="" />
-      <svg />
-      <button type="button">btn</button>
-      <input />
-      <label>label</label>
-      <p>paragraph</p>
-      <section>section</section>
-      <h1>heading</h1>
-    </div>
-  );
-}

package/lint/oxlint/fixtures/layout-only.tsx

@@ -1,26 +0,0 @@
-// Fixture: linted under an override granting layoutOnly:true. Only a layout host
-// whose unconditional classes make it a flex or grid container reports: the
-// flex div (line 10), the inline-flex span (line 11), the grid template literal
-// (line 12) and the cn() argument (line 13). Everything after line 13 is clean.
-const cn = (...classes: unknown[]) => classes.filter(Boolean).join(" ");
-
-export function LayoutOnly({ open, size }: { open: boolean; size: number }) {
-  return (
-    <>
-      <div className="border-border flex items-center gap-2">flex</div>
-      <span className="inline-flex">inline</span>
-      <ul className={`grid gap-${size}`}>grid</ul>
-      <div className={cn("flex flex-1", open && "p-2")}>call</div>
-      <div className="p-4">plain</div>
-      <svg viewBox="0 0 1 1">
-        <path className="flex" d="M0 0" />
-      </svg>
-      <div className={cn("p-2", open && "flex")}>conditional</div>
-      <div className={`gap-${size}flex`}>glued</div>
-      <button className="flex" type="button">
-        not a layout host
-      </button>
-      <div className="flex-1 flex-col">no display utility</div>
-    </>
-  );
-}

package/lint/oxlint/fixtures/render-as-invalid.tsx

@@ -1,11 +0,0 @@
-// Fixture: each render={<Primitive as=... />} sits on its own line.
-// Not a real module - never imported, never type-checked, never shipped as code.
-export function RenderAsInvalid() {
-  return (
-    <>
-      <Stack render={<Box as="li" />} />
-      <Flex render={<Stack as="ul" />} />
-      <Grid render={<Center as="section" />} />
-    </>
-  );
-}

package/lint/oxlint/fixtures/render-as-valid.tsx

@@ -1,14 +0,0 @@
-// Fixture: legitimate render and as usage the rule must leave alone.
-// Not a real module - never imported, never type-checked, never shipped as code.
-export function RenderAsValid() {
-  return (
-    <>
-      <Stack as="ul" />
-      <Stack render={<Link href="/" />} />
-      <Stack render={<Box />} />
-      <Stack render={<Link as="a" href="/" />} />
-      <Stack render={<Foo.Bar as="li" />} />
-      <TooltipTrigger render={<Box as="span" />} />
-    </>
-  );
-}

package/lint/oxlint/fixtures/valid.tsx

@@ -1,18 +0,0 @@
-// Fixture: only design-system components, a member expression, a fragment, and a
-// self-closing component - none of these should trip the rule.
-import { Anchor, Box, Card, Stack, Text } from "@instruments/materia-ui";
-
-export function Valid() {
-  return (
-    <>
-      <Box>
-        <Stack>
-          <Text>hello</Text>
-          <Anchor href="#">link</Anchor>
-        </Stack>
-        <Card.Header>header</Card.Header>
-        <Box />
-      </Box>
-    </>
-  );
-}

package/lint/oxlint/no-naked-element.test.ts

@@ -1,155 +0,0 @@
-import { execFile } from "node:child_process";
-import { existsSync } from "node:fs";
-import path from "node:path";
-import { promisify } from "node:util";
-
-import { describe, expect, it } from "vitest";
-
-import { LAYOUT_ELEMENTS, TEXT_ELEMENTS } from "../../src/tokens/element";
-import { LAYOUT_HOSTS, REPLACEMENTS } from "./no-naked-element.mjs";
-
-const execFileAsync = promisify(execFile);
-
-const here = import.meta.dirname;
-const fixturesDir = path.join(here, "fixtures");
-const configPath = path.join(fixturesDir, "fixture.config.mjs");
-
-const RULE_CODE = "materia-ui(no-naked-element)";
-const ESCAPE_HATCH = "className on a primitive, policed by tokens-only";
-
-/** Walk up from the test dir to the workspace root's oxlint binary. */
-const resolveOxlintBin = (): string => {
-  let dir = here;
-  for (let i = 0; i < 12; i += 1) {
-    const candidate = path.join(dir, "node_modules", ".bin", "oxlint");
-    if (existsSync(candidate)) {
-      return candidate;
-    }
-    const parent = path.dirname(dir);
-    if (parent === dir) {
-      break;
-    }
-    dir = parent;
-  }
-  throw new Error("could not resolve the oxlint binary from node_modules/.bin");
-};
-
-interface Diagnostic {
-  code: string;
-  message: string;
-  filename: string;
-  labels: { span: { line: number } }[];
-}
-
-const packageRoot = path.resolve(here, "..", "..");
-
-/**
- * Run oxlint over the fixtures with the plugin config and return only our rule's
- * diagnostics. oxlint exits non-zero when it reports, so read stdout off the
- * thrown error too.
- */
-const runRule = async (): Promise<Diagnostic[]> => {
-  const targets = [
-    "invalid.tsx",
-    "valid.tsx",
-    "allowed.tsx",
-    "layout-only.tsx",
-  ].map((f) => path.join(fixturesDir, f));
-  let stdout = "[]";
-  try {
-    const result = await execFileAsync(
-      resolveOxlintBin(),
-      ["--config", configPath, "--format", "json", ...targets],
-      { cwd: packageRoot }
-    );
-    ({ stdout } = result);
-  } catch (error) {
-    stdout = (error as { stdout?: string }).stdout ?? "";
-  }
-  const report = JSON.parse(stdout) as
-    | { diagnostics?: Diagnostic[] }
-    | Diagnostic[];
-  const diagnostics = Array.isArray(report)
-    ? report
-    : (report.diagnostics ?? []);
-  return diagnostics.filter((d) => d.code === RULE_CODE);
-};
-
-const diagnosticsPromise = runRule();
-
-const forFile = (diagnostics: Diagnostic[], basename: string) =>
-  diagnostics.filter((d) => path.basename(d.filename) === basename);
-
-// Every raw host authored in invalid.tsx, paired with a distinctive substring of
-// its REPLACEMENTS guidance that must appear in the diagnostic message.
-const INVALID_TAGS: [tag: string, hint: string][] = [
-  ["div", "Box"],
-  ["span", 'Text as="span"'],
-  ["a", "Anchor"],
-  ["main", 'Box as="main"'],
-  ["ul", 'Stack as="ul"'],
-  ["li", 'as="li"'],
-  ["code", "Code"],
-  ["pre", "Code block"],
-  ["img", "GalleryImage"],
-  ["svg", "Icon"],
-  ["button", "Button"],
-  ["input", "Input"],
-  ["label", "Label"],
-  ["p", "Text"],
-  ["section", "Section"],
-  ["h1", "Heading level={1}"],
-];
-
-describe("no-naked-element (oxlint integration)", () => {
-  it("reports every raw host in invalid.tsx with its REPLACEMENTS hint", async () => {
-    const invalid = forFile(await diagnosticsPromise, "invalid.tsx");
-    for (const [tag, hint] of INVALID_TAGS) {
-      const hit = invalid.find((d) => d.message.startsWith(`Raw <${tag}>`));
-      expect(hit, `expected a diagnostic for <${tag}>`).toBeDefined();
-      expect(hit?.message).toContain(hint);
-      expect(hit?.message).toContain(ESCAPE_HATCH);
-    }
-    // No stray reports beyond the authored tags.
-    expect(invalid).toHaveLength(INVALID_TAGS.length);
-  });
-
-  it("does not report components, member expressions, or fragments in valid.tsx", async () => {
-    expect(forFile(await diagnosticsPromise, "valid.tsx")).toHaveLength(0);
-  });
-
-  it("honors the allow option - proves context.options reaches the rule", async () => {
-    const allowed = forFile(await diagnosticsPromise, "allowed.tsx");
-    // html + body are suppressed by allow:["html","body"]; only the div remains.
-    expect(allowed).toHaveLength(1);
-    expect(allowed[0]?.message).toMatch(/^Raw <div>/u);
-    expect(allowed[0]?.labels[0]?.span.line).toBe(8);
-  });
-
-  it("layoutOnly reports only hosts whose unconditional classes are flex or grid", async () => {
-    const layout = forFile(await diagnosticsPromise, "layout-only.tsx");
-    // A plain div, an svg path, a conditional `flex`, a class glued to an
-    // interpolation, a flex <button> and `flex-1 flex-col` all stay quiet.
-    expect(layout.map((d) => d.labels[0]?.span.line)).toEqual([10, 11, 12, 13]);
-    expect(layout[0]?.message).toMatch(/^Raw <div> with `flex`/u);
-    expect(layout[1]?.message).toContain('as="span"');
-    expect(layout[2]?.message).toContain("Grid | SimpleGrid");
-  });
-});
-
-// Parity: every member of the closed layout/text unions must have a REPLACEMENTS
-// entry so the rule can always name a sanctioned replacement.
-describe("REPLACEMENTS parity with element unions", () => {
-  it("has a replacement for every LAYOUT_ELEMENT and TEXT_ELEMENT", () => {
-    const members = [...new Set([...LAYOUT_ELEMENTS, ...TEXT_ELEMENTS])];
-    const missing = members.filter((tag) => !(tag in REPLACEMENTS));
-    expect(
-      missing,
-      `missing REPLACEMENTS entries for: ${missing.join(", ")}`
-    ).toEqual([]);
-  });
-
-  it("mirrors LAYOUT_ELEMENTS in the rule's layout hosts", () => {
-    expect(LAYOUT_HOSTS).toEqual([...LAYOUT_ELEMENTS]);
-  });
-});

package/lint/oxlint/no-render-layout-as.test.ts

@@ -1,81 +0,0 @@
-import { execFile } from "node:child_process";
-import { existsSync } from "node:fs";
-import path from "node:path";
-import { promisify } from "node:util";
-
-import { describe, expect, it } from "vitest";
-
-const execFileAsync = promisify(execFile);
-
-const here = import.meta.dirname;
-const fixturesDir = path.join(here, "fixtures");
-const configPath = path.join(fixturesDir, "fixture.config.mjs");
-const packageRoot = path.resolve(here, "..", "..");
-const RULE_CODE = "materia-ui(no-render-layout-as)";
-
-const resolveOxlintBin = (): string => {
-  let dir = here;
-  for (let i = 0; i < 12; i += 1) {
-    const candidate = path.join(dir, "node_modules", ".bin", "oxlint");
-    if (existsSync(candidate)) {
-      return candidate;
-    }
-    const parent = path.dirname(dir);
-    if (parent === dir) {
-      break;
-    }
-    dir = parent;
-  }
-  throw new Error("could not resolve the oxlint binary from node_modules/.bin");
-};
-
-interface Diagnostic {
-  code: string;
-  message: string;
-  filename: string;
-}
-
-const runRule = async (): Promise<Diagnostic[]> => {
-  const targets = ["render-as-invalid.tsx", "render-as-valid.tsx"].map((f) =>
-    path.join(fixturesDir, f)
-  );
-  let stdout = "[]";
-  try {
-    ({ stdout } = await execFileAsync(
-      resolveOxlintBin(),
-      ["--config", configPath, "--format", "json", ...targets],
-      { cwd: packageRoot }
-    ));
-  } catch (error) {
-    stdout = (error as { stdout?: string }).stdout ?? "";
-  }
-  const report = JSON.parse(stdout) as
-    | { diagnostics?: Diagnostic[] }
-    | Diagnostic[];
-  const diagnostics = Array.isArray(report)
-    ? report
-    : (report.diagnostics ?? []);
-  return diagnostics.filter((d) => d.code === RULE_CODE);
-};
-
-const diagnosticsPromise = runRule();
-
-describe("no-render-layout-as (oxlint integration)", () => {
-  it("reports every render={<Primitive as=... />} in the invalid fixture", async () => {
-    const invalid = (await diagnosticsPromise).filter(
-      (d) => path.basename(d.filename) === "render-as-invalid.tsx"
-    );
-    expect(invalid.map((d) => d.message.match(/<(\w+) as/u)?.[1])).toEqual([
-      "Box",
-      "Stack",
-      "Center",
-    ]);
-  });
-
-  it("leaves plain as, component render and non-layout elements alone", async () => {
-    const valid = (await diagnosticsPromise).filter(
-      (d) => path.basename(d.filename) === "render-as-valid.tsx"
-    );
-    expect(valid).toHaveLength(0);
-  });
-});