Release Token Tools 0.2.0

tests/browser/responsive.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "@playwright/test";
+
+test("keeps the primary workspace inside a narrow viewport", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/token/");
+  await expect(page.locator("main").first()).toBeVisible();
+  await expect(
+    page.locator("main .loading, main .workbench-loading"),
+  ).toHaveCount(0);
+
+  const widths = await page.evaluate(() => ({
+    content: document.documentElement.scrollWidth,
+    viewport: document.documentElement.clientWidth,
+  }));
+  expect(widths.viewport).toBeLessThanOrEqual(430);
+  expect(widths.content).toBeLessThanOrEqual(widths.viewport + 1);
+});

tests/core/tokens.test.ts

@@ -42,6 +42,70 @@ describe("token model", () => {
     expect(messages).toMatch(/does not exist/u);
   });
 
+  it("resolves nested composite aliases and explicit theme modes", () => {
+    const document = parseTokenDocument(
+      JSON.stringify({
+        $sets: {
+          core: {
+            color: {
+              brand: { $type: "color", $value: "#112233" },
+            },
+          },
+          dark: {
+            color: {
+              brand: { $type: "color", $value: "#ddeeff" },
+            },
+          },
+          components: {
+            focus: {
+              $type: "border",
+              $value: {
+                color: "{color.brand}",
+                width: "2px",
+                style: "solid",
+              },
+            },
+          },
+        },
+        $themes: {
+          product: {
+            $sets: ["core", "components"],
+            $modes: { light: [], dark: ["dark"] },
+          },
+        },
+      }),
+    );
+    const result = resolveTheme(document, "product", "dark");
+    expect(
+      result.tokens.find((token) => token.path === "focus")?.resolvedValue,
+    ).toEqual({ color: "#ddeeff", width: "2px", style: "solid" });
+    expect(result.diagnostics).toEqual([]);
+  });
+
+  it("validates and exports DTCG composite token types", () => {
+    const document = parseTokenDocument(
+      JSON.stringify({
+        easing: { $type: "cubicBezier", $value: [0.2, 0, 0, 1] },
+        motion: {
+          $type: "transition",
+          $value: {
+            duration: "180ms",
+            delay: "0ms",
+            timingFunction: "{easing}",
+          },
+        },
+      }),
+    );
+    const resolved = resolveTheme(document, "default");
+    expect(resolved.diagnostics).toEqual([]);
+    expect(exportTokens("css", resolved.tokens).content).toContain(
+      "180ms cubic-bezier(0.2, 0, 0, 1) 0ms",
+    );
+    const dtcg = exportTokens("dtcg", resolved.tokens).content;
+    expect(dtcg).toContain('"$type": "transition"');
+    expect(dtcg).toContain('"{easing}"');
+  });
+
   it("rejects malformed wrappers and non-standard hex lengths", () => {
     expect(() => parseTokenDocument('{"$sets":[]}')).toThrow(
       /\$sets must be an object/u,
@@ -125,6 +189,54 @@ describe("token model", () => {
     ).toBe(false);
   });
 
+  it("preserves DTCG leaf metadata while editing or renaming", () => {
+    const document = parseTokenDocument(
+      '{"brand":{"$type":"color","$value":"#112233","$description":"Brand","$extensions":{"vendor":{"id":1}}}}',
+    );
+    const updated = updateToken(
+      document,
+      "default",
+      "brand",
+      "color.brand",
+      "color",
+      "#445566",
+    );
+    expect(JSON.parse(updated)).toMatchObject({
+      color: {
+        brand: {
+          $description: "Brand",
+          $extensions: { vendor: { id: 1 } },
+          $value: "#445566",
+        },
+      },
+    });
+  });
+
+  it("validates composite members rather than only their presence", () => {
+    const document = parseTokenDocument(
+      JSON.stringify({
+        text: {
+          $type: "typography",
+          $value: { fontFamily: 42, fontSize: "large" },
+        },
+        depth: {
+          $type: "shadow",
+          $value: {
+            color: "not-a-colour",
+            offsetX: "0px",
+            offsetY: "2px",
+            blur: "4px",
+          },
+        },
+      }),
+    );
+    const messages = resolveTheme(document, "default")
+      .diagnostics.map((diagnostic) => diagnostic.message)
+      .join(" ");
+    expect(messages).toMatch(/Typography requires valid/iu);
+    expect(messages).toMatch(/Each shadow requires valid/iu);
+  });
+
   it("refuses to create a path through an existing token leaf", () => {
     const document = parseTokenDocument(
       '{"base":{"$type":"string","$value":"leaf"}}',