pattern-dump 0.2.0-alpha.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.3.0
+
+From this release Pattern Dump is published as plain 0.x versions under npm's `latest` tag: install it with
+`npx pattern-dump init`, without `@alpha`. Being at 0.x, breaking changes are possible between minor versions, and
+this changelog names them.
+
+### Added
+
+- `sourceDir`, `patternsDir` and `styles` are optional. A site whose components, skin and styles all come from
+  pattern packages names none of them; they default to `./src`, `./src/patterns` and `./src/styles`, and the folders
+  don't have to exist.
+
+### Changed
+
+- `pd build` now checks every page of a storefront with axe before it writes anything, and **stops on an
+  accessibility error**: a WCAG rule rated critical or serious (an image without alt text, a button with no name, a
+  page without a language), or a page without exactly one `<main>` and one `<h1>`. Each error is printed with its
+  page, the rule, the elements it was found on and a link to the rule's explanation; moderate and minor findings,
+  and axe's best practices, are listed as warnings and don't stop the build. To see them before a build, run
+  `pd build` locally: nothing is written while there are errors. In `pd dev`, a page without one `<main>` and one
+  `<h1>` is a warning in the terminal.
+
 ## 0.2.0-alpha.0
 
 The storefront: a website written as markdown pages, dressed by a skin made of ordinary components, served by

package/README.md

@@ -4,19 +4,19 @@ A workbench for HTML and CSS design systems, and a successor to PatternLab. Writ
 Handlebars templates with SCSS, data and Markdown docs; Pattern Dump shows them live, checks them, maps
 how they relate, and publishes the result as a static site.
 
-> **Alpha (0.2.0-alpha.0).** Published under the `alpha` tag. Options and file conventions can still change
-> between releases.
+> **0.3.0.** Pattern Dump is at 0.x, so breaking changes are possible between minor versions (0.3 to 0.4);
+> the [changelog](https://github.com/n8design/pattern-dump/blob/main/CHANGELOG.md) names them.
 
 ## Requirements
 
-Node.js 20.10 or later, and npm.
+Node.js 22.22 or later, and npm.
 
 ## Quick start
 
 Create a new project:
 
 ```bash
-npx pattern-dump@alpha init my-design-system
+npx pattern-dump init my-design-system
 cd my-design-system
 npm run dev              # → http://localhost:4000
 ```
@@ -24,7 +24,7 @@ npm run dev              # → http://localhost:4000
 Or add Pattern Dump to an existing project:
 
 ```bash
-npm install --save-dev pattern-dump@alpha
+npm install --save-dev pattern-dump
 npx pd init
 ```
 
@@ -35,7 +35,7 @@ overwrites an existing file.
 ### Installing `pd` globally
 
 ```bash
-npm install --global pattern-dump@alpha
+npm install --global pattern-dump
 pd init my-design-system
 ```
 

package/dist/chunks/{chunk-ESMZAOP2.js → chunk-5WFBNPXB.js}

@@ -59,7 +59,7 @@ var SHAPE = {
     required: ["pagesDir", "outDir"]
   }
 };
-var REQUIRED = ["sourceDir", "patternsDir", "outDir", "styles"];
+var REQUIRED = ["outDir"];
 var WORKBENCH_PATH = /^\/(?:(?!\.{1,2}(?:\/|$))[a-z0-9._~-]+\/?)+$/i;
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var isStrings = (v) => Array.isArray(v) && v.every((x) => typeof x === "string");
@@ -242,13 +242,24 @@ function configProblems(raw) {
   return problems;
 }
 var withOneTrailingSlash = (url) => `${url.replace(/\/+$/, "")}/`;
+function withSourceDefaults(config) {
+  if (config.sourceDir !== void 0 && config.patternsDir !== void 0 && config.styles !== void 0) return config;
+  const sourceDir = config.sourceDir ?? "./src";
+  const base = sourceDir.replace(/\/+$/, "");
+  return {
+    ...config,
+    sourceDir,
+    patternsDir: config.patternsDir ?? `${base}/patterns`,
+    styles: config.styles ?? { strategy: "parallel", dir: `${base}/styles` }
+  };
+}
 function validateConfig(raw, source) {
   const problems = configProblems(raw);
   if (problems.length > 0) {
     throw new ConfigError(`${source}: invalid config
 ${problems.map((p) => `  - ${p}`).join("\n")}`);
   }
-  const config = raw;
+  const config = withSourceDefaults(raw);
   const sf = config.storefront;
   if (!sf) return config;
   const workbenchUrl = sf.workbenchUrl !== void 0 ? withOneTrailingSlash(sf.workbenchUrl) : void 0;
@@ -271,7 +282,7 @@ function sameHostWorkbenchPath(storefront) {
 
 // packages/config/src/index.ts
 function defineConfig(config) {
-  return config;
+  return withSourceDefaults(config);
 }
 
 export {

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   defineConfig
-} from "./chunks/chunk-ESMZAOP2.js";
+} from "./chunks/chunk-5WFBNPXB.js";
 export {
   defineConfig
 };

package/dist/pd.js

@@ -4,7 +4,7 @@ import {
   sameHostWorkbenchPath,
   suggest,
   validateConfig
-} from "./chunks/chunk-ESMZAOP2.js";
+} from "./chunks/chunk-5WFBNPXB.js";
 
 // packages/contracts/src/dev-protocol.ts
 var AUDIT_SCOPE = {
@@ -335,9 +335,9 @@ async function buildDiscoveryMap(roots) {
     const dir = dirname(absPath);
     const stem = basename(absPath, ".hbs");
     const fileSet = dirFileSets.get(dir) ?? /* @__PURE__ */ new Set();
-    const source = rootOf.get(absPath)?.root.source;
+    const source2 = rootOf.get(absPath)?.root.source;
     return {
-      ...source ? { source } : {},
+      ...source2 ? { source: source2 } : {},
       hbsPath: absPath,
       jsonPath: fileSet.has(`${stem}.json`) ? join(dir, `${stem}.json`) : void 0,
       mdPath: fileSet.has(`${stem}.md`) ? join(dir, `${stem}.md`) : void 0,
@@ -395,8 +395,8 @@ async function buildDiscoveryMap(roots) {
         const baseName = basename(varPaths[0], ".hbs").split("~")[0];
         const fileSet = dirFileSets.get(varDir) ?? /* @__PURE__ */ new Set();
         const mdPath = fileSet.has(`${baseName}.md`) ? join(varDir, `${baseName}.md`) : void 0;
-        const source = rootOf.get(varPaths[0])?.root.source;
-        discoveryMap.set(baseId, { ...source ? { source } : {}, hbsPath: "", ownMarkup: false, variants: variantTokens, mdPath });
+        const source2 = rootOf.get(varPaths[0])?.root.source;
+        discoveryMap.set(baseId, { ...source2 ? { source: source2 } : {}, hbsPath: "", ownMarkup: false, variants: variantTokens, mdPath });
         handleMap.set(handle, baseId);
       }
     }
@@ -426,8 +426,8 @@ async function buildDiscoveryMap(roots) {
     if (!baseEntry?.hbsPath) continue;
     const variantHandle = `${deriveHandle(baseId)}~${variantToken}`;
     if (!handleMap.has(variantHandle)) {
-      const source = rootOf.get(jsonPath)?.root.source;
-      discoveryMap.set(variantId, { ...source ? { source } : {}, hbsPath: baseEntry.hbsPath, jsonPath, ownMarkup: false });
+      const source2 = rootOf.get(jsonPath)?.root.source;
+      discoveryMap.set(variantId, { ...source2 ? { source: source2 } : {}, hbsPath: baseEntry.hbsPath, jsonPath, ownMarkup: false });
       handleMap.set(variantHandle, variantId);
     }
   }
@@ -911,9 +911,9 @@ var htmlValidator = new HtmlValidate({
   }
 });
 function deepMerge(target, ...sources) {
-  for (const source of sources) {
-    if (!source) continue;
-    for (const [key, value] of Object.entries(source)) {
+  for (const source2 of sources) {
+    if (!source2) continue;
+    for (const [key, value] of Object.entries(source2)) {
       const targetVal = target[key];
       if (value !== null && typeof value === "object" && !Array.isArray(value) && targetVal !== null && typeof targetVal === "object" && !Array.isArray(targetVal)) {
         deepMerge(targetVal, value);
@@ -955,16 +955,16 @@ async function readDataFile(path, display) {
     };
   }
 }
-function imageTag(source, o) {
+function imageTag(source2, o) {
   const esc = Handlebars3.escapeExpression;
   const rest = `alt="${esc(o.alt)}"${o.title !== void 0 ? ` title="${esc(o.title)}"` : ""} loading="${o.eager ? "eager" : "lazy"}" decoding="async"`;
-  if (source.kind === "single") return `<img src="${esc(source.url)}" width="${source.width}" height="${source.height}" ${rest}>`;
-  const widths = o.widths.filter((w) => w <= source.width);
-  if (widths.length === 0) widths.push(source.width);
-  const urls = widths.map((w) => source.variantUrl(w, o.settings));
+  if (source2.kind === "single") return `<img src="${esc(source2.url)}" width="${source2.width}" height="${source2.height}" ${rest}>`;
+  const widths = o.widths.filter((w) => w <= source2.width);
+  if (widths.length === 0) widths.push(source2.width);
+  const urls = widths.map((w) => source2.variantUrl(w, o.settings));
   const top = widths[widths.length - 1];
   const srcset = urls.map((u, i) => `${esc(u)} ${widths[i]}w`).join(", ");
-  return `<img src="${esc(urls[urls.length - 1])}" srcset="${srcset}" sizes="${esc(o.sizes)}" width="${top}" height="${Math.round(top * source.height / source.width)}" ${rest}>`;
+  return `<img src="${esc(urls[urls.length - 1])}" srcset="${srcset}" sizes="${esc(o.sizes)}" width="${top}" height="${Math.round(top * source2.height / source2.width)}" ${rest}>`;
 }
 function registerImageHelper(env, images) {
   env.registerHelper("pd-image", function(value, options) {
@@ -979,11 +979,11 @@ function registerImageHelper(env, images) {
     }
     if (typeof value !== "string" || value === "") throw new Error(`{{pd-image}}: the image field is empty`);
     if (!images) throw new Error(`{{pd-image}}: this renderer was given no image index`);
-    const source = images(value);
-    if (!source) throw new Error(`{{pd-image}}: "${value}" is not an image in the assets`);
-    if (source.kind === "unavailable") throw new Error(source.reason);
+    const source2 = images(value);
+    if (!source2) throw new Error(`{{pd-image}}: "${value}" is not an image in the assets`);
+    if (source2.kind === "unavailable") throw new Error(source2.reason);
     const settings = options.data?.pdImages;
-    return new env.SafeString(imageTag(source, {
+    return new env.SafeString(imageTag(source2, {
       widths: slot.widths,
       sizes: slot.sizes,
       alt: String(alt),
@@ -1373,21 +1373,21 @@ function loadSharp(importer) {
   if (!importer) loaded = attempt;
   return attempt;
 }
-function imageVariantKey(source, width, encoding) {
-  return imageVariantKeyFromSourceHash(imageSourceHash(source), width, encoding);
+function imageVariantKey(source2, width, encoding) {
+  return imageVariantKeyFromSourceHash(imageSourceHash(source2), width, encoding);
 }
-function imageSourceHash(source) {
-  return createHash("sha256").update(source).digest("hex");
+function imageSourceHash(source2) {
+  return createHash("sha256").update(source2).digest("hex");
 }
 function imageVariantKeyFromSourceHash(sourceHash, width, encoding) {
   return createHash("sha256").update(`${sourceHash}|webp|orient=auto|w=${width}|q=${encoding.quality}|e=${encoding.effort}|sharp=${SHARP_VERSION}`).digest("hex").slice(0, 10);
 }
-async function imageSize(sharp, source) {
-  const meta = await sharp(source).metadata();
+async function imageSize(sharp, source2) {
+  const meta = await sharp(source2).metadata();
   return { width: meta.autoOrient?.width ?? meta.width ?? 0, height: meta.autoOrient?.height ?? meta.height ?? 0 };
 }
-function encodeWebp(sharp, source, width, encoding) {
-  return sharp(source, { autoOrient: true }).resize({ width, withoutEnlargement: true }).webp({ quality: encoding.quality, effort: encoding.effort }).toBuffer();
+function encodeWebp(sharp, source2, width, encoding) {
+  return sharp(source2, { autoOrient: true }).resize({ width, withoutEnlargement: true }).webp({ quality: encoding.quality, effort: encoding.effort }).toBuffer();
 }
 function createImageCache(dir) {
   const file = (key) => join2(dir, `${key}.webp`);
@@ -2960,6 +2960,163 @@ async function runA11yProducer(html) {
   return diagnostics;
 }
 
+// packages/a11y/src/page.ts
+import { readFileSync as readFileSync2 } from "node:fs";
+import { createRequire as createRequire3 } from "node:module";
+import { JSDOM as JSDOM2 } from "jsdom";
+
+// packages/a11y/src/page-rule-tiers.generated.json
+var page_rule_tiers_generated_default = {
+  _note: "Generated by packages/a11y/src/page-classifier.ts \u2014 do not hand-edit. Re-run: npm run classify-pages --workspace @pattern-dump/a11y",
+  axeVersion: "4.11.4",
+  tags: [
+    "wcag2a",
+    "wcag2aa",
+    "wcag21a",
+    "wcag21aa",
+    "wcag22aa",
+    "best-practice"
+  ],
+  jsdom: [
+    "accesskeys",
+    "area-alt",
+    "aria-allowed-attr",
+    "aria-allowed-role",
+    "aria-command-name",
+    "aria-conditional-attr",
+    "aria-deprecated-role",
+    "aria-dialog-name",
+    "aria-hidden-body",
+    "aria-input-field-name",
+    "aria-meter-name",
+    "aria-progressbar-name",
+    "aria-required-attr",
+    "aria-required-children",
+    "aria-required-parent",
+    "aria-roledescription",
+    "aria-roles",
+    "aria-text",
+    "aria-toggle-field-name",
+    "aria-tooltip-name",
+    "aria-treeitem-name",
+    "aria-valid-attr",
+    "aria-valid-attr-value",
+    "autocomplete-valid",
+    "blink",
+    "button-name",
+    "definition-list",
+    "dlitem",
+    "document-title",
+    "empty-heading",
+    "empty-table-header",
+    "frame-title",
+    "heading-order",
+    "html-has-lang",
+    "html-lang-valid",
+    "html-xml-lang-mismatch",
+    "image-alt",
+    "image-redundant-alt",
+    "input-button-name",
+    "input-image-alt",
+    "label",
+    "label-title-only",
+    "landmark-banner-is-top-level",
+    "landmark-contentinfo-is-top-level",
+    "landmark-main-is-top-level",
+    "landmark-no-duplicate-banner",
+    "landmark-no-duplicate-contentinfo",
+    "landmark-no-duplicate-main",
+    "landmark-unique",
+    "link-name",
+    "list",
+    "listitem",
+    "meta-refresh",
+    "meta-viewport",
+    "nested-interactive",
+    "presentation-role-conflict",
+    "region",
+    "role-img-alt",
+    "scope-attr-valid",
+    "select-name",
+    "summary-name",
+    "svg-img-alt",
+    "tabindex",
+    "table-duplicate-name",
+    "td-headers-attr",
+    "valid-lang"
+  ],
+  browser: [
+    "aria-braille-equivalent",
+    "aria-hidden-focus",
+    "aria-prohibited-attr",
+    "audio-caption",
+    "avoid-inline-spacing",
+    "bypass",
+    "color-contrast",
+    "css-orientation-lock",
+    "duplicate-id-aria",
+    "focus-order-semantics",
+    "form-field-multiple-labels",
+    "frame-focusable-content",
+    "frame-tested",
+    "frame-title-unique",
+    "hidden-content",
+    "label-content-name-mismatch",
+    "landmark-complementary-is-top-level",
+    "landmark-one-main",
+    "link-in-text-block",
+    "marquee",
+    "meta-viewport-large",
+    "no-autoplay-audio",
+    "object-alt",
+    "p-as-heading",
+    "page-has-heading-one",
+    "scrollable-region-focusable",
+    "server-side-image-map",
+    "skip-link",
+    "table-fake-caption",
+    "target-size",
+    "td-has-header",
+    "th-has-data-cells",
+    "video-caption"
+  ]
+};
+
+// packages/a11y/src/page.ts
+var require4 = createRequire3(import.meta.url);
+var axeSource;
+var source = () => axeSource ??= readFileSync2(require4.resolve("axe-core/axe.min.js"), "utf8");
+var PAGE_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"];
+async function runAxeOnPage(html, rules) {
+  const dom = new JSDOM2(html, { url: "http://site.invalid/", runScripts: "outside-only", pretendToBeVisual: true });
+  dom.virtualConsole.removeAllListeners();
+  try {
+    dom.window.eval(source());
+    const axe2 = dom.window.axe;
+    const ruleIds = axe2.getRules(PAGE_TAGS).map((r2) => r2.ruleId);
+    const options = rules.length ? { runOnly: { type: "rule", values: rules } } : { runOnly: { type: "tag", values: PAGE_TAGS } };
+    const r = await axe2.run(dom.window.document, { ...options, resultTypes: ["violations", "incomplete"] });
+    return { violations: r.violations, incomplete: r.incomplete, axeVersion: axe2.version, ruleIds };
+  } finally {
+    dom.window.close();
+  }
+}
+function severityOf(impact, tags) {
+  const wcag = tags.some((t) => /^wcag\d/.test(t));
+  return wcag && (impact === "critical" || impact === "serious") ? "error" : "warning";
+}
+async function runPageA11y(html) {
+  const { violations } = await runAxeOnPage(html, page_rule_tiers_generated_default.jsdom);
+  return violations.map((v) => ({
+    ruleId: v.id,
+    severity: severityOf(v.impact, v.tags),
+    impact: v.impact ?? "minor",
+    help: v.help,
+    helpUrl: v.helpUrl,
+    nodes: v.nodes.map((n) => ({ target: n.target.map(String).join(" "), html: n.html }))
+  }));
+}
+
 // packages/dev-server/src/diagnostics.ts
 async function checkComponent(componentId, variant, render, quarantineEntry) {
   if (quarantineEntry) {
@@ -3119,7 +3276,7 @@ async function persistSlices(root, slices) {
 }
 
 // packages/dev-server/src/packages.ts
-import { existsSync as existsSync3, readdirSync as readdirSync2, readFileSync as readFileSync2, realpathSync as realpathSync2, statSync as statSync2 } from "node:fs";
+import { existsSync as existsSync3, readdirSync as readdirSync2, readFileSync as readFileSync3, realpathSync as realpathSync2, statSync as statSync2 } from "node:fs";
 import { dirname as dirname5, join as join13, sep as sep3 } from "node:path";
 function findPackageDir(name, root) {
   let dir = root;
@@ -3164,7 +3321,7 @@ function loadPatternPackages(references, root) {
       throw new Error(`pattern package "${name}" is not installed \u2014 run: npm install --save-dev ${name}`);
     }
     const dir = realpathSync2(via);
-    const pkg = JSON.parse(readFileSync2(join13(dir, "package.json"), "utf8"));
+    const pkg = JSON.parse(readFileSync3(join13(dir, "package.json"), "utf8"));
     if (!pkg.patternDump) {
       if (!direct) return;
       throw new Error(
@@ -3441,8 +3598,8 @@ async function serveImageVariant(pathname, host, res, cfg) {
   const variant = parseImageUrl(pathname);
   if (!variant) return notFound();
   const encoding = cfg.storefront && host === cfg.storefront.host ? cfg.storefront.images : cfg.images;
-  const source = await variantSource(variant.name, variant.hash, variant.width, encoding, cfg);
-  if (!source) return notFound();
+  const source2 = await variantSource(variant.name, variant.hash, variant.width, encoding, cfg);
+  if (!source2) return notFound();
   let sharp;
   try {
     sharp = await loadSharp();
@@ -3453,11 +3610,11 @@ async function serveImageVariant(pathname, host, res, cfg) {
     res.end(e.message);
     return;
   }
-  if (variant.width > (await imageSize(sharp, source)).width) return notFound();
+  if (variant.width > (await imageSize(sharp, source2)).width) return notFound();
   const cache = cacheFor(cfg);
   let bytes = await cache.read(variant.hash);
   if (!bytes) {
-    bytes = await encodeWebp(sharp, source, variant.width, encoding);
+    bytes = await encodeWebp(sharp, source2, variant.width, encoding);
     await cache.write(variant.hash, bytes);
   }
   res.writeHead(200, { "Content-Type": "image/webp", "Cache-Control": "public, max-age=31536000, immutable" });
@@ -3755,6 +3912,22 @@ function checkLinks(site) {
   return { problems, external, references };
 }
 
+// packages/dev-server/src/storefront/page-basics.ts
+function checkPageBasics(html) {
+  let main = 0, h1 = 0;
+  for (const tag of startTags(html)) {
+    const name = tag.name.toLowerCase();
+    if (name === "main" || attributesOf(tag).some((a) => a.name === "role" && a.value?.trim() === "main")) main++;
+    if (name === "h1") h1++;
+  }
+  const problems = [];
+  if (main === 0) problems.push("the page has no <main>: the page's own content goes in one, so assistive technology can go straight to it");
+  else if (main > 1) problems.push(`the page has ${main} main landmarks (<main> or role="main"): it has exactly one, holding the page's own content`);
+  if (h1 === 0) problems.push("the page has no <h1>: one heading names the page");
+  else if (h1 > 1) problems.push(`the page has ${h1} <h1> headings: one names the page, the others are <h2> or lower`);
+  return problems;
+}
+
 // packages/dev-server/src/storefront/site-files.ts
 var escapeXml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 function sitemapXml(entries) {
@@ -3798,18 +3971,18 @@ async function buildStaticSite(config, root, opts) {
   };
   const project = resolve7(root);
   if (inside2(project, outDir)) throw new Error(`pd build: --out ${outDir} would contain the project itself \u2014 choose a folder inside or beside it, like ./dist`);
-  for (const source of [cfg.patternsDir, cfg.stylesDir, ...cfg.themeDirs, ...cfg.assetRoots]) {
-    if (inside2(outDir, source) || inside2(source, outDir)) {
-      throw new Error(`pd build: --out ${outDir} overlaps ${source}, which Pattern Dump reads \u2014 choose another folder`);
+  for (const source2 of [cfg.patternsDir, cfg.stylesDir, ...cfg.themeDirs, ...cfg.assetRoots]) {
+    if (inside2(outDir, source2) || inside2(source2, outDir)) {
+      throw new Error(`pd build: --out ${outDir} overlaps ${source2}, which Pattern Dump reads \u2014 choose another folder`);
     }
   }
   const storefront = cfg.storefront;
   if (storefront) {
     const sfOut = storefront.outDir;
     if (inside2(project, sfOut)) throw new Error(`pd build: storefront.outDir ${sfOut} would contain the project itself \u2014 choose a folder inside or beside it`);
-    for (const source of [cfg.patternsDir, cfg.stylesDir, storefront.pagesDir, ...cfg.themeDirs, ...cfg.assetRoots]) {
-      if (inside2(sfOut, source) || inside2(source, sfOut)) {
-        throw new Error(`pd build: storefront.outDir ${sfOut} overlaps ${source}, which Pattern Dump reads \u2014 choose another folder`);
+    for (const source2 of [cfg.patternsDir, cfg.stylesDir, storefront.pagesDir, ...cfg.themeDirs, ...cfg.assetRoots]) {
+      if (inside2(sfOut, source2) || inside2(source2, sfOut)) {
+        throw new Error(`pd build: storefront.outDir ${sfOut} overlaps ${source2}, which Pattern Dump reads \u2014 choose another folder`);
       }
     }
     if (inside2(sfOut, outDir) || inside2(outDir, sfOut)) {
@@ -3847,6 +4020,7 @@ ${sfCrawl.problems.map((p) => `  - ${p}`).join("\n")}`);
   if (sfCrawl) log(`\u2026 storefront checked: ${sfCrawl.urls.length} files`);
   const origin = `http://127.0.0.1:${server.port}`;
   let linkSummary;
+  let a11ySummary;
   const externalNotes = [];
   if (storefront && sfGet && sfCrawl) {
     const { pages: list } = await (await sfGet(PD_ROUTES.pages)).json();
@@ -3884,6 +4058,34 @@ ${links.problems.map((p) => `  - ${p}`).join("\n")}`);
     for (const [url, on] of links.external) externalNotes.push(`an external link, not checked: ${url} (on ${on.join(", ")})`);
     linkSummary = { pages: pages.length, references: links.references, external: links.external.size };
     log(`\u2026 links checked: ${links.references} references on ${pages.length} pages`);
+    const errors = [];
+    const warned = /* @__PURE__ */ new Map();
+    for (const page of pages) {
+      const html = sfCrawl.documents.get(page);
+      if (html === void 0) continue;
+      for (const p of checkPageBasics(html)) errors.push(`${page}: ${p}`);
+      for (const f of await runPageA11y(html)) {
+        const where = f.nodes.map((n) => n.target).join(", ");
+        if (f.severity === "error") {
+          errors.push(`${page}: ${f.ruleId} (${f.impact}): ${f.help}, on ${where} (${f.helpUrl})`);
+          continue;
+        }
+        const w = warned.get(f.ruleId) ?? { finding: f, pages: [], elements: 0 };
+        w.pages.push(page);
+        w.elements += f.nodes.length;
+        warned.set(f.ruleId, w);
+      }
+    }
+    if (errors.length) {
+      await server.close();
+      throw new Error(`pd build: the storefront has accessibility problems, so nothing was written:
+${errors.map((e) => `  - ${e}`).join("\n")}`);
+    }
+    a11ySummary = {
+      pages: pages.length,
+      warnings: [...warned.values()].map((w) => `${w.finding.ruleId} (${w.finding.impact}): ${w.finding.help}, ${w.elements} element${w.elements === 1 ? "" : "s"} on ${w.pages.join(", ")} (${w.finding.helpUrl})`)
+    };
+    log(`\u2026 accessibility checked on ${pages.length} pages`);
   }
   await rm3(outDir, { recursive: true, force: true });
   await mkdir5(outDir, { recursive: true });
@@ -4000,6 +4202,7 @@ ${sf.failures.map((f) => `  - ${f}`).join("\n")}`);
       }
       report.notes.push(...storefrontNotes, ...externalNotes);
       if (linkSummary) report.links = linkSummary;
+      if (a11ySummary) report.accessibility = a11ySummary;
       log(`\u2026 storefront: ${pages} pages, ${counts.files} files`);
     }
     const used = /* @__PURE__ */ new Set();
@@ -5524,8 +5727,8 @@ async function unsafeOutputs(id, at, deps) {
   for (const componentId of [...templates].sort()) {
     const file = deps.discoveryMap.get(componentId)?.hbsPath;
     if (!file) continue;
-    const source = await readFile18(file, "utf8").catch(() => "");
-    for (const o of unescapedOutputs(source)) {
+    const source2 = await readFile18(file, "utf8").catch(() => "");
+    for (const o of unescapedOutputs(source2)) {
       if (!o.helper && allowed.has(o.name)) continue;
       const what = o.helper ? `a helper's result unescaped ({{{${o.name}}}})` : `"${o.name}" unescaped ({{{${o.name}}}})`;
       problems.push({ at, message: `${componentId} outputs ${what} at ${deps.shown(file)}:${o.line}:${o.column}, which only a text/markdown property may be` });
@@ -5751,16 +5954,16 @@ function proseImages(md, tokens, prose) {
         continue;
       }
       if (!src.startsWith("/assets/")) continue;
-      const source = prose.lookup(src);
-      if (!source) {
+      const source2 = prose.lookup(src);
+      if (!source2) {
         problem(` is not an image in the assets`);
         continue;
       }
-      if (source.kind === "unavailable") {
-        problem(`: ${source.reason}`);
+      if (source2.kind === "unavailable") {
+        problem(`: ${source2.reason}`);
         continue;
       }
-      if (source.kind === "variants" && !prose.slot) {
+      if (source2.kind === "variants" && !prose.slot) {
         problem(` needs its layout's slot for prose images: ${prose.layoutId} ` + (prose.slotProblem ? `has an invalid x-pd-prose-images (${prose.slotProblem})` : `declares no x-pd-prose-images`));
         continue;
       }
@@ -5768,7 +5971,7 @@ function proseImages(md, tokens, prose) {
       const atOnce = eager > 0;
       if (atOnce) eager--;
       const slot = prose.slot;
-      child.meta = { pdImage: imageTag(source, {
+      child.meta = { pdImage: imageTag(source2, {
         widths: slot?.widths ?? [],
         sizes: slot ? atOnce ? slot.sizes : `auto, ${slot.sizes}` : "",
         alt,
@@ -6090,7 +6293,7 @@ async function buildComponentDetail(componentId, patternsDir, renderFn, tracker,
     } catch {
     }
   }
-  const source = {
+  const source2 = {
     hbs,
     hbsHighlighted,
     ...jsonStr !== void 0 ? { json: jsonStr, jsonHighlighted } : {},
@@ -6131,7 +6334,7 @@ async function buildComponentDetail(componentId, patternsDir, renderFn, tracker,
     layout,
     ...deprecatedUse ? { deprecatedUse } : {},
     variants,
-    source,
+    source: source2,
     doc,
     ...requireScripts ? { requireScripts } : {},
     ...requireAssets ? { requireAssets } : {},
@@ -6402,7 +6605,7 @@ async function stampCss(css, hashOf) {
 
 // packages/dev-server/src/assets.ts
 import { existsSync as existsSync5 } from "node:fs";
-import { createRequire as createRequire3 } from "node:module";
+import { createRequire as createRequire4 } from "node:module";
 import { fileURLToPath as fileURLToPath5 } from "node:url";
 function resolveDevUiDist(moduleUrl, exists = existsSync5) {
   const packaged = fileURLToPath5(new URL("./dev-ui/", moduleUrl));
@@ -6410,7 +6613,7 @@ function resolveDevUiDist(moduleUrl, exists = existsSync5) {
   return fileURLToPath5(new URL("../../../apps/dev-ui/dist/", moduleUrl));
 }
 function resolveAxeCore(moduleUrl) {
-  return createRequire3(moduleUrl).resolve("axe-core/axe.min.js");
+  return createRequire4(moduleUrl).resolve("axe-core/axe.min.js");
 }
 
 // packages/dev-server/src/storefront/page-image.ts
@@ -6669,7 +6872,7 @@ async function assemblePage(route, model, a) {
   const notFound = () => ({ status: 404, html: errorDocument(route, [`there is no page at ${route}`], a.live), problems: [`there is no page at ${route}`], notes: [] });
   const isNotFound = route === PD_ROUTES.notFound;
   let page = isNotFound ? model.notFound : model.files.get(route);
-  let source;
+  let source2;
   if (isNotFound && !page) {
     const layoutId = `layouts/${DEFAULT_LAYOUT}`;
     if (!a.discoveryMap.has(layoutId)) {
@@ -6681,13 +6884,13 @@ async function assemblePage(route, model, a) {
       };
     }
     const declared = (await readSchema(a.discoveryMap.get(layoutId)?.schemaPath)).schema?.properties ?? {};
-    source = builtInNotFound(Object.hasOwn(declared, "title"));
-    page = { route, file: "", path: `${NOT_FOUND_FILE} (built in)`, frontmatter: readFrontmatterStrict(source) };
+    source2 = builtInNotFound(Object.hasOwn(declared, "title"));
+    page = { route, file: "", path: `${NOT_FOUND_FILE} (built in)`, frontmatter: readFrontmatterStrict(source2) };
   }
   if (!page) return notFound();
-  if (source === void 0) {
+  if (source2 === void 0) {
     try {
-      source = await readFile23(page.file, "utf8");
+      source2 = await readFile23(page.file, "utf8");
     } catch (e) {
       if (e.code === "ENOENT") return notFound();
       throw e;
@@ -6720,7 +6923,7 @@ async function assemblePage(route, model, a) {
     const prose = imageLookup ? {
       layoutId: checked.layoutId,
       lookup: imageLookup,
-      lineOffset: frontmatterBodyOffset(source),
+      lineOffset: frontmatterBodyOffset(source2),
       problems: [],
       ...proseSlot.slot ? { slot: proseSlot.slot } : {},
       ...proseSlot.problem ? { slotProblem: proseSlot.problem } : {}
@@ -6729,7 +6932,7 @@ async function assemblePage(route, model, a) {
     const placedProblems = [];
     const headings = [];
     const body = await renderDoc(
-      frontmatterBody(source),
+      frontmatterBody(source2),
       (id, variant) => a.render({ component: id, variant }).then((r) => r.html),
       a.discoveryMap,
       {
@@ -6741,7 +6944,7 @@ async function assemblePage(route, model, a) {
         ...prose ? { prose } : {},
         // Components placed with values (pd- tags): checked against their schemas, rendered into the page.
         placed: {
-          lineOffset: frontmatterBodyOffset(source),
+          lineOffset: frontmatterBodyOffset(source2),
           problems: placedProblems,
           deps: {
             discoveryMap: a.discoveryMap,
@@ -6905,6 +7108,7 @@ ${html}`);
     routes.add(self);
     const links = checkLinks({ built: routes, documents: /* @__PURE__ */ new Map([[self, html]]), pages: [self], pagesOnly: true });
     notes.push(...links.problems.map((p) => `warning: ${page.path}${p.slice(self.length)}`));
+    notes.push(...checkPageBasics(html).map((p) => `warning: ${page.path}: ${p}`));
   }
   return { status: isNotFound ? 404 : 200, html: document(head, `${html}
 ${fitterScript()}`, a.live, a.lang), problems: [], notes };
@@ -7597,7 +7801,7 @@ function rootMatchers(watched) {
 
 // packages/dev-server/src/watch.ts
 import { createHash as createHash6 } from "node:crypto";
-import { existsSync as existsSync6, readFileSync as readFileSync3, statSync as statSync4 } from "node:fs";
+import { existsSync as existsSync6, readFileSync as readFileSync4, statSync as statSync4 } from "node:fs";
 import { appendFile, readdir as readdir9 } from "node:fs/promises";
 import { basename as basename10, extname as extname4, join as join26, relative as relative13, resolve as resolve10, sep as sep9 } from "node:path";
 import chokidar from "chokidar";
@@ -7658,7 +7862,7 @@ function seenNow(path) {
     const s = statSync4(path);
     const stamp2 = `${s.ino}:${s.ctimeMs}:${s.mtimeMs}:${s.size}`;
     const forced = globalThis.__testOnly_watchStamp;
-    return { stamp: forced ? forced(path, stamp2) : stamp2, real: stamp2, hash: createHash6("sha1").update(readFileSync3(path)).digest("hex") };
+    return { stamp: forced ? forced(path, stamp2) : stamp2, real: stamp2, hash: createHash6("sha1").update(readFileSync4(path)).digest("hex") };
   } catch {
     return null;
   }
@@ -9144,6 +9348,11 @@ async function runBuild(root, configPath, options) {
   if (report.links) {
     console.log(`[pd build] links: ${report.links.references} references on ${report.links.pages} pages, none broken` + (report.links.external ? `; ${report.links.external} external, not checked (notes)` : ""));
   }
+  if (report.accessibility) {
+    const n = report.accessibility.warnings.length;
+    console.log(`[pd build] accessibility: ${report.accessibility.pages} pages, no errors` + (n ? `; ${n} rule${n === 1 ? "" : "s"} with warnings:` : ""));
+    for (const w of report.accessibility.warnings) console.log(`[pd build]   warning: ${w}`);
+  }
   for (const w of report.warnings) console.log(`[pd build]   not built: ${w}`);
   for (const n of report.notes) console.log(`[pd build]   note: ${n}`);
 }
@@ -9485,7 +9694,7 @@ import { basename as basename12, dirname as dirname13, join as join31, relative
 // packages/cli/package.json
 var package_default = {
   name: "@pattern-dump/cli",
-  version: "0.2.0-alpha.0",
+  version: "0.3.0",
   private: true,
   description: "The pd command and the published pattern-dump package.",
   type: "module",

package/dist/types/config/index.d.ts

@@ -1,6 +1,6 @@
 import type { ShellBrandConfig, SwatchSlots, ThemeSwitch } from "../contracts/index.js";
 export type { ShellBrandConfig, SwatchSlots, ThemeSwitch };
-export { ConfigError, configProblems, sameHostWorkbenchPath, suggest, validateConfig } from "./validate.js";
+export { ConfigError, configProblems, sameHostWorkbenchPath, suggest, validateConfig, withSourceDefaults } from "./validate.js";
 export interface AssetsConfig {
     /** Where assets live. Only 'central' (the default: one assets dir, served at /assets/) is supported
      *  so far; 'component-relative' is reserved, and the config check rejects it as not supported yet. */
@@ -242,4 +242,10 @@ export type StorefrontNavEntry = {
     label: string;
     children: StorefrontNavEntry[];
 };
-export declare function defineConfig(config: PatternDumpConfig): PatternDumpConfig;
+/**
+ * What a project writes: the config, where `sourceDir`, `patternsDir` and `styles` may be left out (a site whose
+ * patterns and styles all come from pattern packages has none of its own). `defineConfig` and `validateConfig` fill
+ * them in (`withSourceDefaults`), so everything that reads a config gets all three.
+ */
+export type PatternDumpConfigInput = Omit<PatternDumpConfig, "sourceDir" | "patternsDir" | "styles"> & Partial<Pick<PatternDumpConfig, "sourceDir" | "patternsDir" | "styles">>;
+export declare function defineConfig(config: PatternDumpConfigInput): PatternDumpConfig;

package/dist/types/config/validate.d.ts

@@ -1,4 +1,4 @@
-import type { PatternDumpConfig } from "./index.js";
+import type { PatternDumpConfig, PatternDumpConfigInput } from "./index.js";
 /** The closest of `known` to `key` when it is near enough to be a typo of it, else undefined. Used for
  *  "did you mean" in config problems, and by other checks that name an unknown key. */
 export declare function suggest(key: string, known: string[]): string | undefined;
@@ -10,6 +10,12 @@ export declare class ConfigError extends Error {
 /** The problems with a loaded config, one line each; empty when it is valid. */
 export declare function configProblems(raw: unknown): string[];
 /** Check a loaded config and return it typed, or throw one error listing every problem. */
+/**
+ * A config with its source folders filled in where it names none: `sourceDir` is "./src", and `patternsDir` and
+ * `styles.dir` are its `patterns` and `styles` folders. None of them has to exist: a site whose patterns and styles
+ * all come from pattern packages has none of its own. What the config names is kept as it is.
+ */
+export declare function withSourceDefaults(config: PatternDumpConfigInput): PatternDumpConfig;
 export declare function validateConfig(raw: unknown, source: string): PatternDumpConfig;
 /**
  * The path of a workbench published on the storefront's own host, or undefined when it has a host of its own.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pattern-dump",
-  "version": "0.2.0-alpha.0",
+  "version": "0.3.0",
   "description": "A workbench for HTML and CSS design systems: live component previews, docs, checks and static publishing.",
   "keywords": [
     "design-system",