@walkeros/explorer 4.7.2 → 4.8.0-next-1791441510508

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @walkeros/explorer
 
+## 4.8.0-next-1791441510508
+
+### Minor Changes
+
+- bf6221f: Explorer now ships the walkerOS design system. Import
+  `@walkeros/explorer/design/tokens.css` for colour, type, spacing, radius and
+  layer tokens (dark by default, light under `data-theme="light"`), the opt-in
+  `design/base.css`, the Tailwind v4 bridge `design/tailwind.css`, and typed
+  colour and font constants from `@walkeros/explorer/design`. A
+  `walkeros-design-check` command lints consuming code. Existing exports are
+  unchanged.
+
+### Patch Changes
+
+- d5cbc9c: New `@walkeros/explorer/design/components` export with `Button`,
+  `InlineCode` and `EventLegend`, styled by `@walkeros/explorer/styles.css`.
+  `Button` forwards tagging attributes to its element and accepts a router link
+  component.
+- d5cbc9c: `@walkeros/explorer/design/components` gains the building blocks of
+  the walkerOS home page: `Icon`, `InstallCommand`, `Card`, `Eyebrow`, `Stat`,
+  `Text`, `TextLink`, `CheckList`, `SectionHeading`, `ProblemCard`,
+  `FeatureItem`, `FaqItem`, `PlanCard`, `CaseCard`, `HighlightCard`, `Section`,
+  `CardGrid`, `Split`, `Cluster`, `Hero`, and the three home page demos
+  (`HeroTaggingViz`, `ArticleTeaserTracking`, `DestinationMappingViz`). Every
+  design component forwards tagging attributes to its root.
+- 01d86a5: Explorer components now read the walkerOS design tokens: import
+  `@walkeros/explorer/design/tokens.css` beside `styles.css`. The old theme
+  variables (`--bg-box`, `--color-text` and the rest) are removed. Code panels
+  are dark in both page themes. Removed exports: `lighthouseTheme`,
+  `registerLighthouseTheme`, `palenightTheme`, `registerPalenightTheme`, type
+  `ExplorerTheme`, and `registerAllThemes`, replaced by `registerTheme`.
+  `ELB_THEME_DARK` is now exported.
+- d5cbc9c: `@walkeros/explorer/design/tokens.css` now declares every type style
+  as CSS variables: `--type-<style>-size`, `-line-height`, `-weight`, `-family`
+  and, when the style sets one, `-tracking`. Components can take sizes and
+  weights from the design system instead of fixed values.
+- Updated dependencies [5593d7b]
+  - @walkeros/core@4.8.0-next-1791441510508
+  - @walkeros/collector@4.8.0-next-1791441510508
+  - @walkeros/web-core@4.8.0-next-1791441510508
+  - @walkeros/web-source-browser@4.8.0-next-1791441510508
+
 ## 4.7.2
 
 ### Patch Changes

package/README.md

@@ -21,21 +21,50 @@ npm install @walkeros/explorer
 
 ## Quick start
 
-Import a component and the stylesheet:
+Import the design tokens once per page, then explorer's styles and a component:
 
 ```tsx
-import { MappingDemo } from '@walkeros/explorer';
+import '@walkeros/explorer/design/tokens.css';
 import '@walkeros/explorer/styles.css';
+import { CodeBox } from '@walkeros/explorer';
 
-<MappingDemo
-  input='{"name": "example"}'
-  config='{"transform": "uppercase"}'
-  fn={async (input, config) => transform(input, config)}
-/>;
+<CodeBox code={'{ "name": "page view" }'} language="json" label="Event" />;
 ```
 
-Switch themes via the `data-theme` attribute on a parent element (`light` or
-`dark`).
+In a Tailwind v4 build, import `@walkeros/explorer/design/tailwind.css` after
+`@import "tailwindcss"` instead of `tokens.css`: it brings the tokens and a
+utility for every design colour and type style.
+`@walkeros/explorer/design/base.css` adds optional page-wide base rules (font,
+colours, focus ring, selection).
+
+## Themes
+
+Set `data-theme="dark"` (the default) or `data-theme="light"` on the page root.
+Code surfaces (`CodeBox`, `CodeView`, `Code`, the preview) stay dark in both
+themes. Monaco uses one code theme; `Code` and `CodeBox` register it themselves.
+A Monaco editor of your own registers it with:
+
+```ts
+import { registerTheme, ELB_THEME_DARK } from '@walkeros/explorer';
+
+registerTheme(monaco);
+monaco.editor.setTheme(ELB_THEME_DARK);
+```
+
+## Design system
+
+Explorer ships the walkerOS design system:
+
+| Import                                   | What                                                                                                                         |
+| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `@walkeros/explorer/design/tokens.css`   | The design tokens as CSS custom properties                                                                                   |
+| `@walkeros/explorer/design/tailwind.css` | The tokens as a Tailwind v4 theme                                                                                            |
+| `@walkeros/explorer/design/base.css`     | Optional base rules for a whole page                                                                                         |
+| `@walkeros/explorer/design`              | The token values as constants, for code that cannot read CSS variables                                                       |
+| `@walkeros/explorer/design/components`   | React building blocks of walkerOS pages (`Button`, `InlineCode`, `EventLegend` and more), with no Monaco or walkerOS runtime |
+
+The `walkeros-design-check` command checks a package's own styles against the
+design system.
 
 ## Documentation
 

package/bin/walkeros-design-check.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+// Committed so npm links the bin at install time, before the first build. The
+// checker itself is built into dist/design, beside the design CSS it reads.
+import { existsSync } from 'node:fs';
+
+const checker = new URL('../dist/design/check.mjs', import.meta.url);
+
+if (existsSync(checker)) {
+  await import(checker.href);
+} else {
+  process.stderr.write(
+    'walkeros-design-check: dist/design/check.mjs is missing, run `npm run build` in apps/explorer\n',
+  );
+  process.exitCode = 2;
+}

package/dist/design/base.css

@@ -0,0 +1,55 @@
+/*
+ * walkerOS base rules. Opt-in and global: import once per page after
+ * tokens.css. Explorer's own reset stays scoped to .elb-explorer.
+ */
+@layer base {
+  :root,
+  :host,
+  [data-theme] {
+    --motion: 180ms;
+    --ease: cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* The one media query of the design system. */
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    :host,
+    [data-theme] {
+      --motion: 0ms;
+    }
+  }
+
+  :root,
+  :host,
+  [data-theme='dark'] {
+    color-scheme: dark;
+  }
+
+  [data-theme='light'] {
+    color-scheme: light;
+  }
+
+  /* Islands recompute these from their own theme's tokens. */
+  html,
+  :host,
+  [data-theme] {
+    font-family: var(--font-sans);
+    color: var(--fg);
+    scrollbar-color: var(--border-strong) transparent;
+  }
+
+  /* Only the page paints a ground; a background on :host would cover the customer page. */
+  html {
+    background-color: var(--bg);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 3px;
+  }
+
+  ::selection {
+    background-color: var(--primary);
+    color: var(--on-primary);
+  }
+}

package/dist/design/check.mjs

@@ -0,0 +1,455 @@
+#!/usr/bin/env node
+
+// src/design/check/bin.ts
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// src/design/check/cli.ts
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { extname, join, relative, resolve, sep } from "node:path";
+
+// src/design/names.ts
+var DECLARATION = /(?<![A-Za-z0-9_-])--([A-Za-z0-9_-]+)['"]?\s*:/g;
+var SET_PROPERTY = /setProperty\(\s*['"`]--([A-Za-z0-9_-]+)/g;
+function forEachMatch(pattern, text, visit) {
+  const flags = pattern.flags.includes("g") ? pattern.flags : `${pattern.flags}g`;
+  const re = new RegExp(pattern.source, flags);
+  for (let match = re.exec(text); match !== null; match = re.exec(text))
+    visit(match);
+}
+function collectDeclaredNames(text) {
+  const names = /* @__PURE__ */ new Set();
+  forEachMatch(DECLARATION, text, (match) => names.add(match[1]));
+  forEachMatch(SET_PROPERTY, text, (match) => names.add(match[1]));
+  return names;
+}
+
+// src/design/check/glob.ts
+var escape = (text) => text.replace(/[.+^$()|[\]\\{}*?]/g, "\\$&");
+function globToRegExp(glob) {
+  let source = "";
+  for (let i = 0; i < glob.length; i++) {
+    const char = glob[i];
+    if (char === "*" && glob[i + 1] === "*") {
+      const slash = glob[i + 2] === "/";
+      source += slash ? "(?:.*/)?" : ".*";
+      i += slash ? 2 : 1;
+    } else if (char === "*") {
+      source += "[^/]*";
+    } else if (char === "?") {
+      source += "[^/]";
+    } else if (char === "{") {
+      const end = glob.indexOf("}", i);
+      if (end === -1) return void 0;
+      source += `(?:${glob.slice(i + 1, end).split(",").map(escape).join("|")})`;
+      i = end;
+    } else {
+      source += escape(char);
+    }
+  }
+  return new RegExp(`^${source}$`);
+}
+
+// src/design/tailwind-namespaces.ts
+var TAILWIND_RESET_NAMESPACES = [
+  "color",
+  "radius",
+  "font",
+  "text",
+  "shadow",
+  "inset-shadow",
+  "drop-shadow",
+  "text-shadow"
+];
+var TAILWIND_KEPT_NAMESPACES = [
+  "animate",
+  "aspect",
+  "blur",
+  "breakpoint",
+  "container",
+  "default",
+  "ease",
+  "font-weight",
+  "leading",
+  "max-width",
+  "perspective",
+  "tracking"
+];
+var TAILWIND_OTHER_NAMESPACES = ["tw", "spacing"];
+var TAILWIND_NESTED_NAMESPACES = [
+  "text-color",
+  "text-decoration-color",
+  "text-decoration-thickness",
+  "text-indent",
+  "text-underline-offset",
+  "font-size"
+];
+var TAILWIND_NAMESPACES = [
+  ...TAILWIND_RESET_NAMESPACES,
+  ...TAILWIND_KEPT_NAMESPACES,
+  ...TAILWIND_OTHER_NAMESPACES,
+  ...TAILWIND_NESTED_NAMESPACES
+];
+var TAILWIND_VARIABLES = [
+  "tw-",
+  ...TAILWIND_KEPT_NAMESPACES.map((namespace) => `${namespace}-`)
+];
+
+// src/design/check/rules.ts
+var RULES = [
+  "color-literal",
+  "named-color",
+  "palette-class",
+  "white-black-class",
+  "dark-variant",
+  "shadow-class",
+  "z-class",
+  "text-size-class",
+  "radius-class",
+  "var-fallback",
+  "undeclared-var",
+  "color-scheme",
+  "z-index"
+];
+var NAMED_COLORS = new Set(
+  `aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown
+  burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan
+  darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid
+  darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet
+  deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro
+  ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki
+  lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow
+  lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray
+  lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine
+  mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise
+  mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab
+  orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru
+  pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown
+  seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan
+  teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen`.split(
+    /\s+/
+  )
+);
+var PALETTE = "red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone|mauve|olive|mist|taupe";
+var COLOR_UTILITY = "bg|text|border(?:-[xytrblse])?|outline|ring(?:-offset)?|divide|fill|stroke|from|via|to|placeholder|caret|accent|decoration|shadow|inset-shadow|drop-shadow|text-shadow";
+var START = "(?<![A-Za-z0-9_-])";
+var END = "(?![A-Za-z0-9_-])";
+var SIDE = "(?:-(?:t|r|b|l|s|e|tl|tr|br|bl|ss|se|es|ee))?";
+var CLASS_RULES = [
+  [
+    "palette-class",
+    new RegExp(
+      `${START}(?:${COLOR_UTILITY})-(?:${PALETTE})-(?:50|[1-9]00|950)(?:/\\d+)?${END}`,
+      "g"
+    )
+  ],
+  [
+    "white-black-class",
+    new RegExp(
+      `${START}(?:${COLOR_UTILITY})-(?:white|black)(?:/\\d+)?${END}`,
+      "g"
+    )
+  ],
+  ["dark-variant", new RegExp(`${START}dark:(?=[A-Za-z0-9_\\[!(-])`, "g")],
+  [
+    "shadow-class",
+    // Bare drop-shadow is flagged too (the reset removes it), but not a CSS
+    // drop-shadow() call. Bare shadow is not: "shadow root" prose would fire.
+    new RegExp(
+      `${START}(?:(?:inset-|drop-|text-)?shadow-(?:2xs|xs|sm|md|lg|xl|2xl|inner)${END}|drop-shadow(?![A-Za-z0-9_(-]))`,
+      "g"
+    )
+  ],
+  ["z-class", new RegExp(`${START}-?z-(?:\\d+|\\[-?\\d+\\])${END}`, "g")],
+  [
+    "text-size-class",
+    new RegExp(`${START}text-(?:xs|sm|base|lg|xl|[2-9]xl)${END}`, "g")
+  ],
+  // An arbitrary value that reads a design radius (`rounded-[calc(var(--radius-md)-1px)]`) is not flagged.
+  [
+    "radius-class",
+    new RegExp(
+      `${START}rounded${SIDE}(?:-(?:2xl|3xl|4xl|\\[(?![^\\]]*var\\(--radius-)[^\\]\\s]+\\]))?${END}`,
+      "g"
+    )
+  ]
+];
+var STYLE_FILE = /\.(?:css|scss)$/;
+var HEX = /(?<![A-Za-z0-9&#-])#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})(?![A-Za-z0-9-])/g;
+var COLOR_FUNCTION = /(?<![A-Za-z0-9-])(?:rgba?|hsla?|hwb|oklab|oklch|lab|lch)\([^)]*\)/g;
+var CSS_COLOR_FUNCTION = /(?<![A-Za-z0-9_-])color\([^)]*\)/g;
+var STYLE_DECLARATION = /(?<![A-Za-z0-9_-])([a-z-]*(?:color|background|border|outline|fill|stroke|shadow|caret|accent|decoration|column-rule)[a-z-]*)\s*:\s*([^;{}]+)/g;
+var SCRIPT_COLOR_PROPERTY = /(?<![A-Za-z0-9_-])(?:color|background|backgroundColor|borderColor|outlineColor|fill|stroke|caretColor|accentColor)\s*[:=]\s*\{?\s*['"]([A-Za-z]+)['"]/g;
+var WORD = /(?<![A-Za-z0-9_-])[A-Za-z]+(?![A-Za-z0-9_-])/g;
+var URL_FUNCTION = /url\([^)]*\)/g;
+var VAR_REFERENCE = /var\(\s*--([A-Za-z0-9_-]+)\s*(,)?/g;
+var TAILWIND_VAR = /-\(--([A-Za-z0-9_-]+)\)/g;
+var COLOR_SCHEME = /prefers-color-scheme/g;
+var Z_INDEX_CSS = /(?<![A-Za-z0-9_-])z-index\s*:\s*-?\d+/g;
+var Z_INDEX_SCRIPT = /(?<![A-Za-z0-9_-])zIndex\s*:\s*['"]?-?\d+/g;
+var STRING_LITERAL = /'(?:\\.|[^'\\\n])*'|"(?:\\.|[^"\\\n])*"|`(?:\\.|[^`\\])*`/g;
+var APPLY = /@apply\s+[^;}]+/g;
+function classRegions(style, text) {
+  const regions = [];
+  forEachMatch(
+    style ? APPLY : STRING_LITERAL,
+    text,
+    (match) => regions.push({ offset: match.index, text: match[0] })
+  );
+  return regions;
+}
+function positions(text) {
+  const starts = [0];
+  for (let i = 0; i < text.length; i++)
+    if (text[i] === "\n") starts.push(i + 1);
+  return (index) => {
+    let low = 0;
+    let high = starts.length - 1;
+    while (low < high) {
+      const mid = low + high + 1 >> 1;
+      if (starts[mid] <= index) low = mid;
+      else high = mid - 1;
+    }
+    return { line: low + 1, column: index - starts[low] + 1 };
+  };
+}
+function scanFile(file, text, context) {
+  const style = STYLE_FILE.test(file);
+  const position = positions(text);
+  const findings = [];
+  const add = (rule, index, match) => {
+    findings.push({ file, ...position(index), rule, match });
+  };
+  forEachMatch(
+    HEX,
+    text,
+    (match) => add("color-literal", match.index, match[0])
+  );
+  forEachMatch(
+    COLOR_FUNCTION,
+    text,
+    (match) => add("color-literal", match.index, match[0])
+  );
+  if (style) {
+    forEachMatch(
+      CSS_COLOR_FUNCTION,
+      text,
+      (match) => add("color-literal", match.index, match[0])
+    );
+    forEachMatch(STYLE_DECLARATION, text, (match) => {
+      forEachMatch(WORD, match[2].replace(URL_FUNCTION, " "), (word) => {
+        if (NAMED_COLORS.has(word[0].toLowerCase()))
+          add("named-color", match.index, word[0]);
+      });
+    });
+  } else {
+    forEachMatch(SCRIPT_COLOR_PROPERTY, text, (match) => {
+      if (NAMED_COLORS.has(match[1].toLowerCase()))
+        add("named-color", match.index, match[1]);
+    });
+  }
+  for (const region of classRegions(style, text)) {
+    for (const [rule, pattern] of CLASS_RULES) {
+      forEachMatch(
+        pattern,
+        region.text,
+        (match) => add(rule, region.offset + match.index, match[0])
+      );
+    }
+  }
+  const declared = (name) => context.declaredNames.has(name) || TAILWIND_VARIABLES.some((prefix) => name.startsWith(prefix)) || context.allowVarPrefixes.some((prefix) => name.startsWith(prefix));
+  forEachMatch(VAR_REFERENCE, text, (match) => {
+    const name = match[1];
+    if (context.designNames.has(name)) {
+      if (match[2] === ",") add("var-fallback", match.index, match[0]);
+    } else if (!declared(name)) {
+      add("undeclared-var", match.index, match[0]);
+    }
+  });
+  forEachMatch(TAILWIND_VAR, text, (match) => {
+    if (!context.designNames.has(match[1]) && !declared(match[1])) {
+      add("undeclared-var", match.index + 1, match[0].slice(1));
+    }
+  });
+  forEachMatch(
+    COLOR_SCHEME,
+    text,
+    (match) => add("color-scheme", match.index, match[0])
+  );
+  forEachMatch(
+    Z_INDEX_CSS,
+    text,
+    (match) => add("z-index", match.index, match[0])
+  );
+  if (!style)
+    forEachMatch(
+      Z_INDEX_SCRIPT,
+      text,
+      (match) => add("z-index", match.index, match[0])
+    );
+  return findings.sort(
+    (a, b) => a.line - b.line || a.column - b.column || a.rule.localeCompare(b.rule)
+  );
+}
+
+// src/design/check/cli.ts
+var SCANNED = /* @__PURE__ */ new Set([
+  ".ts",
+  ".tsx",
+  ".js",
+  ".jsx",
+  ".mjs",
+  ".cjs",
+  ".css",
+  ".scss",
+  ".mdx",
+  ".html",
+  ".svg"
+]);
+var SKIPPED_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  "coverage",
+  "storybook-static"
+]);
+var DESIGN_CSS = ["tokens.css", "tailwind.css", "base.css"];
+var USAGE = "usage: walkeros-design-check [--allow [<rule>:]<glob>]... [--allow-var <prefix>]... <path>...";
+var SCOPED = /^([a-z-]+):(.+)$/;
+var isRule = (value) => RULES.some((rule) => rule === value);
+function parseAllow(value) {
+  const scoped = SCOPED.exec(value);
+  if (scoped !== null) {
+    const rule = scoped[1];
+    if (!isRule(rule)) return `unknown rule "${rule}" in --allow ${value}`;
+    const pattern2 = globToRegExp(scoped[2]);
+    return pattern2 === void 0 ? `invalid glob in --allow ${value}` : { rule, pattern: pattern2 };
+  }
+  const pattern = globToRegExp(value);
+  return pattern === void 0 ? `invalid glob in --allow ${value}` : { pattern };
+}
+function usage(io, problem) {
+  io.err(`walkeros-design-check: ${problem}`);
+  io.err(USAGE);
+  return 2;
+}
+function walk(path, into) {
+  if (statSync(path).isFile()) {
+    if (SCANNED.has(extname(path))) into.push(path);
+    return;
+  }
+  const entries = readdirSync(path, { withFileTypes: true }).sort(
+    (a, b) => a.name.localeCompare(b.name)
+  );
+  for (const entry of entries) {
+    if (entry.name.startsWith(".") || SKIPPED_DIRS.has(entry.name)) continue;
+    const child = join(path, entry.name);
+    if (entry.isDirectory()) walk(child, into);
+    else if (entry.isFile() && SCANNED.has(extname(entry.name)))
+      into.push(child);
+  }
+}
+function main(argv, io) {
+  const allows = [];
+  const allowVarPrefixes = [];
+  const roots = [];
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--allow" || arg === "--allow-var") {
+      const value = argv[i + 1];
+      i++;
+      if (value === void 0 || value === "" || value.startsWith("--"))
+        return usage(io, `${arg} needs a value`);
+      if (arg === "--allow-var") {
+        allowVarPrefixes.push(value);
+        continue;
+      }
+      const allow = parseAllow(value);
+      if (typeof allow === "string") return usage(io, allow);
+      allows.push(allow);
+    } else if (arg.startsWith("--")) {
+      return usage(io, `unknown option ${arg}`);
+    } else {
+      roots.push(arg);
+    }
+  }
+  if (roots.length === 0) return usage(io, "no path given");
+  const missing = DESIGN_CSS.filter(
+    (file) => !existsSync(join(io.designDir, file))
+  );
+  if (missing.length > 0) {
+    io.err(
+      `walkeros-design-check: ${missing.join(", ")} missing in ${io.designDir}; build @walkeros/explorer first`
+    );
+    return 2;
+  }
+  const designNames = collectDeclaredNames(
+    DESIGN_CSS.map(
+      (file) => readFileSync(join(io.designDir, file), "utf8")
+    ).join("\n")
+  );
+  const files = [];
+  for (const root of roots) {
+    const path = resolve(io.cwd, root);
+    if (!existsSync(path)) {
+      io.err(`walkeros-design-check: ${root} does not exist`);
+      return 2;
+    }
+    walk(path, files);
+  }
+  const sources = files.map((path) => ({
+    file: relative(io.cwd, path).split(sep).join("/"),
+    text: readFileSync(path, "utf8")
+  }));
+  const fileAllowed = (file) => allows.some(
+    (allow) => allow.rule === void 0 && allow.pattern.test(file)
+  );
+  const ruleAllowed = (finding) => allows.some(
+    (allow) => allow.rule === finding.rule && allow.pattern.test(finding.file)
+  );
+  const scanned = sources.filter((source) => !fileAllowed(source.file));
+  if (scanned.length === 0) {
+    io.err(
+      "walkeros-design-check: no file scanned; check the paths and --allow globs"
+    );
+    return 2;
+  }
+  const context = {
+    designNames,
+    declaredNames: collectDeclaredNames(
+      sources.map((source) => source.text).join("\n")
+    ),
+    allowVarPrefixes
+  };
+  const findings = scanned.flatMap((source) => scanFile(source.file, source.text, context)).filter((finding) => !ruleAllowed(finding));
+  for (const finding of findings) {
+    io.out(
+      `${finding.file}:${finding.line}:${finding.column} ${finding.rule} ${finding.match}`
+    );
+  }
+  io.err(
+    `walkeros-design-check: ${findings.length} finding(s) in ${scanned.length} file(s)`
+  );
+  return findings.length > 0 ? 1 : 0;
+}
+
+// src/design/check/bin.ts
+var write = (stream) => (line) => {
+  stream.write(`${line}
+`);
+};
+try {
+  process.exitCode = main(process.argv.slice(2), {
+    cwd: process.cwd(),
+    // dist/design: the bin ships beside tokens.css, tailwind.css and base.css.
+    designDir: dirname(fileURLToPath(import.meta.url)),
+    out: write(process.stdout),
+    err: write(process.stderr)
+  });
+} catch (error) {
+  process.stderr.write(
+    `walkeros-design-check: ${error instanceof Error ? error.message : String(error)}
+`
+  );
+  process.exitCode = 2;
+}