@motion-proto/live-tokens 0.97.0 → 0.99.0

package/dist-plugin/index.cjs

@@ -123,7 +123,7 @@ var STOP_RE = new RegExp(String.raw`^(.*?)\s+(${NUM})%$`);
 var CIRCLE_RADIUS_RE = new RegExp(String.raw`^circle\s+(${NUM})px$`, "i");
 var ELLIPSE_RE = new RegExp(String.raw`^ellipse\s+(${NUM})px\s+(${NUM})px$`, "i");
 var VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
-function splitTopLevel(s) {
+function splitTopLevel(s, isSeparator = (c) => c === ",") {
   const parts = [];
   let depth = 0;
   let start = 0;
@@ -131,7 +131,7 @@ function splitTopLevel(s) {
     const c = s[i];
     if (c === "(") depth++;
     else if (c === ")") depth--;
-    else if (c === "," && depth === 0) {
+    else if (depth === 0 && isSeparator(c)) {
       parts.push(s.slice(start, i));
       start = i + 1;
     }
@@ -5619,6 +5619,146 @@ function formatReport({ propertiesBefore, propertiesAfter, bytesSaved }) {
   return `live-tokens: the production CSS declares ${propertiesAfter.toLocaleString("en-US")} of ${propertiesBefore.toLocaleString("en-US")} custom properties and is ${kB} kB ${bytesSaved >= 0 ? "smaller" : "larger"}.`;
 }
 
+// vite-plugin/a11y/a11yRunServer.ts
+var import_node_child_process = require("child_process");
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path2 = __toESM(require("path"), 1);
+var A11Y_RUN_ARGS = ["check-component", "--tests", "--a11y", "--no-fix", "--json", "--open-theme"];
+var A11Y_REPORTS_DIR_NAME = "_a11y-reports";
+var STDERR_TAIL = 2e3;
+var CONTRAST_ROLES = /* @__PURE__ */ new Set(["text", "non-text"]);
+function spawnCli(cliPath) {
+  return (args, cwd) => {
+    const child = (0, import_node_child_process.spawn)(process.execPath, [cliPath, ...args], { cwd, stdio: ["ignore", "pipe", "pipe"] });
+    const done = new Promise((resolve) => {
+      let stdout = "";
+      let stderr = "";
+      child.stdout.on("data", (chunk) => stdout += chunk);
+      child.stderr.on("data", (chunk) => stderr += chunk);
+      child.on("error", (error) => resolve({ code: null, stdout, stderr: `${stderr}${error.message}` }));
+      child.on("close", (code) => resolve({ code, stdout, stderr }));
+    });
+    return { done, stop: () => child.kill("SIGINT") };
+  };
+}
+function isContrastFailure(value) {
+  const v = value;
+  return !!v && typeof v === "object" && typeof v.component === "string" && typeof v.variable === "string" && v.variable.startsWith("--") && Array.isArray(v.backdrop) && v.backdrop.every((layer) => typeof layer === "string") && typeof v.role === "string" && CONTRAST_ROLES.has(v.role) && typeof v.ratio === "number" && typeof v.floor === "number" && (v.context === void 0 || typeof v.context === "string");
+}
+function readContrast(body) {
+  const contrast = body?.contrast;
+  return Array.isArray(contrast) && contrast.every(isContrastFailure) ? contrast : null;
+}
+function parseCliReport(stdout) {
+  try {
+    const parsed = JSON.parse(stdout);
+    return parsed && Array.isArray(parsed.findings) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function a11yRunServer({ root, reportsDir, openTheme, runCli, broadcast }) {
+  let running = null;
+  const reportFile = (theme) => import_node_path2.default.join(reportsDir, `${theme}.json`);
+  function readReport(theme) {
+    const listed = import_node_fs.default.existsSync(reportsDir) && import_node_fs.default.readdirSync(reportsDir).includes(`${theme}.json`);
+    return listed ? JSON.parse(import_node_fs.default.readFileSync(reportFile(theme), "utf-8")) : null;
+  }
+  function writeReport(report) {
+    import_node_fs.default.mkdirSync(reportsDir, { recursive: true });
+    import_node_fs.default.writeFileSync(reportFile(report.theme), `${JSON.stringify(report, null, 2)}
+`);
+  }
+  function withConfirmed(report, confirmed) {
+    const review = new Set(report.findings.filter((f) => f.rule === "a11y-review").map((f) => f.message));
+    const kept = [...new Set(confirmed)].filter((message) => review.has(message)).sort();
+    const out = { ...report, confirmed: kept };
+    if (kept.length === 0) delete out.confirmed;
+    return out;
+  }
+  function reports() {
+    if (!import_node_fs.default.existsSync(reportsDir)) return {};
+    return Object.fromEntries(
+      import_node_fs.default.readdirSync(reportsDir).filter((name) => name.endsWith(".json")).map((name) => [name.slice(0, -".json".length), JSON.parse(import_node_fs.default.readFileSync(import_node_path2.default.join(reportsDir, name), "utf-8"))])
+    );
+  }
+  function settle(started, outcome) {
+    const finishedAt = (/* @__PURE__ */ new Date()).toISOString();
+    const cli = parseCliReport(outcome.stdout);
+    if (!cli) {
+      const stderr = outcome.stderr.trim().slice(-STDERR_TAIL);
+      return {
+        ...started,
+        state: "failed",
+        finishedAt,
+        error: `check-component exited with code ${outcome.code} and printed no report.${stderr ? `
+${stderr}` : ""}`
+      };
+    }
+    return {
+      ...started,
+      state: "finished",
+      finishedAt,
+      findings: cli.findings.filter((f) => f.details?.engineRule !== "color-contrast")
+    };
+  }
+  function start(body) {
+    if (running) {
+      return { status: 409, body: { error: "An accessibility run is already going.", code: "A11Y_RUN_IN_PROGRESS" } };
+    }
+    const contrast = readContrast(body);
+    if (!contrast) {
+      return {
+        status: 400,
+        body: { error: "Body must be { contrast: [...] } with one entry per failing pair", code: "INVALID_BODY" }
+      };
+    }
+    const report = { state: "running", startedAt: (/* @__PURE__ */ new Date()).toISOString(), theme: openTheme(), contrast };
+    const run = runCli(A11Y_RUN_ARGS, root);
+    running = { report, stop: run.stop };
+    broadcast(report);
+    void run.done.then((outcome) => {
+      const settled = settle(report, outcome);
+      const final = settled.state === "finished" ? withConfirmed(settled, readReport(settled.theme)?.confirmed ?? []) : settled;
+      if (final.state === "finished") writeReport(final);
+      running = null;
+      broadcast(final);
+    });
+    return { status: 202, body: report };
+  }
+  function confirm(body) {
+    const { theme, messages, confirmed } = body ?? {};
+    if (typeof theme !== "string" || typeof confirmed !== "boolean" || !Array.isArray(messages) || !messages.every((m) => typeof m === "string")) {
+      return {
+        status: 400,
+        body: { error: "Body must be { theme, messages: [...], confirmed: true | false }", code: "INVALID_BODY" }
+      };
+    }
+    const report = readReport(theme);
+    if (!report) return { status: 404, body: { error: `No report for theme "${theme}"`, code: "NO_REPORT" } };
+    const marked = new Set(report.confirmed ?? []);
+    for (const message of messages) {
+      if (confirmed) marked.add(message);
+      else marked.delete(message);
+    }
+    const updated = withConfirmed(report, marked);
+    writeReport(updated);
+    broadcast(updated);
+    return { status: 200, body: updated };
+  }
+  return {
+    start,
+    confirm,
+    report: () => ({ status: 200, body: { running: running?.report ?? null, reports: reports() } }),
+    /** Removes a deleted theme's report. */
+    forget: (theme) => import_node_fs.default.rmSync(reportFile(theme), { force: true }),
+    stop: () => running?.stop()
+  };
+}
+
+// src/editor/core/a11y/a11yReportTypes.ts
+var A11Y_EVENT = "a11y";
+
 // vite-plugin/themeFileApi.ts
 var import_node_url2 = require("url");
 var import_meta2 = {};
@@ -5679,6 +5819,7 @@ function themeFileApi(opts) {
   const ISOLATED_DATA_DIR = testDataDir();
   const GENERATED_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "tokens.generated.css") : opts.tokensGeneratedCssPath ? import_path5.default.resolve(opts.tokensGeneratedCssPath) : import_path5.default.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "fonts.css") : opts.fontsCssPath ? import_path5.default.resolve(opts.fontsCssPath) : import_path5.default.join(import_path5.default.dirname(CSS_PATH), "fonts.css");
+  const A11Y_REPORTS_DIR = import_path5.default.join(dataDirs.dataDir, A11Y_REPORTS_DIR_NAME);
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
   const consumerComponentDirs = opts.componentsSrcDir ? [import_path5.default.resolve(opts.componentsSrcDir)] : [import_path5.default.resolve("src/components"), import_path5.default.resolve("src/system/components")];
   const packageComponentsDir = import_path5.default.resolve(
@@ -5688,6 +5829,7 @@ function themeFileApi(opts) {
     "system",
     "components"
   );
+  const PACKAGE_CLI_PATH = import_path5.default.resolve(import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url)), "..", "bin", "cli.mjs");
   const packageDataDir = testPackageDataDir() ?? import_path5.default.resolve(
     import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url)),
     "..",
@@ -6359,6 +6501,9 @@ ${lines.join("\n")}
   const SKETCH_STYLE_BY_NAME_REGEX = new RegExp(`^${escapedBase}/sketch-styles/([a-z0-9\\-_]+)$`);
   const PRODUCTION_ROUTE = `${API_BASE}/production`;
   const EVENTS_ROUTE = `${API_BASE}/events`;
+  const A11Y_RUN_ROUTE = `${API_BASE}/a11y/run`;
+  const A11Y_REPORT_ROUTE = `${API_BASE}/a11y/report`;
+  const A11Y_CONFIRMED_ROUTE = `${API_BASE}/a11y/confirmed`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
       const data = colorsAndTypeResource.readJson(fileName);
@@ -6697,6 +6842,7 @@ ${lines.join("\n")}
           }
         }
         import_fs5.default.unlinkSync(filePath);
+        a11yRuns.forget(fileName);
         if (themesResource.existingPath(fileName) === null && deletingActive) {
           themesResource.setActiveName("default");
         }
@@ -6785,7 +6931,49 @@ data: ${JSON.stringify(state)}
 
 `);
     });
-    req.on("close", unsubscribe);
+    eventClients.add(res);
+    req.on("close", () => {
+      unsubscribe();
+      eventClients.delete(res);
+    });
+  }
+  const eventClients = /* @__PURE__ */ new Set();
+  const a11yRuns = a11yRunServer({
+    root: process.cwd(),
+    reportsDir: A11Y_REPORTS_DIR,
+    openTheme: () => themesResource.getActiveName(),
+    runCli: spawnCli(PACKAGE_CLI_PATH),
+    broadcast: (report) => {
+      const frame = `event: ${A11Y_EVENT}
+data: ${JSON.stringify(report)}
+
+`;
+      for (const client of eventClients) client.write(frame);
+    }
+  });
+  async function handleStartA11yRun({ req, res }) {
+    let body;
+    try {
+      body = JSON.parse(await readBody(req));
+    } catch {
+      body = void 0;
+    }
+    const answer = a11yRuns.start(body);
+    jsonResponse(res, answer.status, answer.body);
+  }
+  async function handleConfirmA11yReview({ req, res }) {
+    let body;
+    try {
+      body = JSON.parse(await readBody(req));
+    } catch {
+      body = void 0;
+    }
+    const answer = a11yRuns.confirm(body);
+    jsonResponse(res, answer.status, answer.body);
+  }
+  async function handleGetA11yReport({ res }) {
+    const answer = a11yRuns.report();
+    jsonResponse(res, answer.status, answer.body);
   }
   async function handleExportTheme({ params, res }) {
     const [fileName] = params;
@@ -7058,6 +7246,18 @@ data: ${JSON.stringify(state)}
     { method: "DELETE", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
     { method: "POST", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: methodNotAllowed },
     { method: "GET", pattern: EVENTS_ROUTE, handler: handleEvents },
+    { method: "POST", pattern: A11Y_RUN_ROUTE, handler: handleStartA11yRun },
+    { method: "GET", pattern: A11Y_RUN_ROUTE, handler: methodNotAllowed },
+    { method: "PUT", pattern: A11Y_RUN_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_RUN_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: A11Y_REPORT_ROUTE, handler: handleGetA11yReport },
+    { method: "PUT", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "PUT", pattern: A11Y_CONFIRMED_ROUTE, handler: handleConfirmA11yReview },
+    { method: "GET", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
     { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptTheme },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
@@ -7136,6 +7336,7 @@ data: ${JSON.stringify(state)}
         const handled = await dispatch(req, res, routes);
         if (!handled) next();
       });
+      server.httpServer?.once("close", () => a11yRuns.stop());
     },
     handleHotUpdate(ctx) {
       if (legacyLayout) return;