@yojahny/wp-design-library 0.5.1 → 0.6.0

package/src/ui/build.mjs

@@ -5,6 +5,7 @@ import sharp from 'sharp';
 import { listEntries, parseEntry, validateEntry } from '../entry.mjs';
 import { loadVocab, FACETS } from '../vocab.mjs';
 import { validateMotion, motionImagePath, localMotionPath } from '../motion.mjs';
+import { artifactFile } from '../artifacts.mjs';
 
 const DIR = path.dirname(fileURLToPath(import.meta.url));
 const TPL = path.join(DIR, 'templates');
@@ -53,10 +54,13 @@ function card(row) {
     `${img}<div class="meta"><strong>${esc(row.title)}</strong>${badge}<br><small>${esc(row.tier)} &middot; ${tags}</small></div></a>`;
 }
 
-// measure.json is only written for a live-URL capture (`add <url>`/`refresh`); frame-sampled entries have none.
-function measurementsHtml(dir) {
-  const file = path.join(dir, 'measure.json');
-  if (!fs.existsSync(file)) return '';
+// measure.json is only written for a live-URL capture (`add <url>`/`refresh`); frame-sampled
+// entries have none. `file` is already resolved through the artifact cache by the caller, or null
+// when there is no record or the object could not be fetched — the same degradation the strip
+// applies. It was read straight off the entry directory, which the migration empties, and which
+// never looked under captures/<n>/ anyway.
+function measurementsHtml(file) {
+  if (!file) return '';
   const m = JSON.parse(fs.readFileSync(file, 'utf8'));
   const t = m.tokens ?? {};
   return `<h2>Measured tokens</h2><dl><dt>Canvas</dt><dd>${esc(t.canvas)}</dd><dt>Ink</dt><dd>${esc(t.ink)}</dd><dt>Accent</dt><dd>${esc(t.accent)}</dd></dl>` +
@@ -124,14 +128,14 @@ function motionHtml(outDir, entry, previewMediaDir) {
   return `<section aria-label="Motion previews"><h2>Motion previews</h2>${figures.join('\n')}</section>`;
 }
 
-function writeEntryPage(outDir, entry, row, previewMediaDir) {
+function writeEntryPage(outDir, entry, row, previewMediaDir, measureFile) {
   const tpl = fs.readFileSync(path.join(TPL, 'entry.html'), 'utf8');
   const html = render(tpl, {
     TITLE: esc(row.title), TIER: esc(row.tier), ROLES: esc(row.roles.join(', ')), FEEL: esc(row.feel.join(', ')),
     MOTION: esc(row.motion.join(', ')), SOURCE: esc(row.source), LICENSE: esc(entry.fm.source?.license),
     CAPTURED: esc(row.captured), STRIP_IMG: row.strip ? `<img src="../${row.strip}" alt="">` : '',
     DRAFT_BADGE: row.draft ? '<span class="badge">draft</span>' : '', BODY: mdToHtml(entry.body),
-    MEASUREMENTS: measurementsHtml(entry.dir),
+    MEASUREMENTS: measurementsHtml(measureFile),
     MOTION_CLIPS: motionHtml(outDir, entry, previewMediaDir),
     SITE_ROW: fieldRow('Site', linkify(entry.fm.source?.url)),
     CAPTURES_ROW: fieldRow('Captures', (entry.fm.captured?.captures ?? [])
@@ -143,7 +147,7 @@ function writeEntryPage(outDir, entry, row, previewMediaDir) {
 // `indexPath` is accepted for interface symmetry with buildIndex but unused: a draft is an
 // entry that fails validateEntry, and buildIndex never puts a failing entry in the sqlite
 // index — so entries/ is the one place both valid and draft entries can be read from.
-export async function buildUi({ indexPath, entriesDir, outDir, previewMediaDir }) {
+export async function buildUi({ indexPath, entriesDir, outDir, previewMediaDir, p }) {
   void indexPath;
   const vocab = loadVocab();
   fs.rmSync(outDir, { recursive: true, force: true });
@@ -161,8 +165,16 @@ export async function buildUi({ indexPath, entriesDir, outDir, previewMediaDir }
     // slug === dir name, so fm.slug can carry path-traversal or markup and must never
     // reach a path or an unescaped attribute.
     const slug = path.basename(dir);
-    const stripSrc = path.join(dir, 'strip.webp');
-    const hasStrip = fs.existsSync(stripSrc);
+    let stripSrc = null;
+    const strip = (entry.fm.captured?.captures?.[0]?.artifacts ?? []).find((a) => a?.key?.endsWith('/strip.webp'));
+    // One unreachable object must not take the gallery down with it: the entry renders without a
+    // thumbnail, exactly as a draft does, and the build continues.
+    if (strip) { try { stripSrc = await artifactFile(p, strip); } catch { stripSrc = null; } }
+    // Same treatment for measure.json: a record to resolve, never a file next to entry.md.
+    let measureSrc = null;
+    const measured = (entry.fm.captured?.captures?.[0]?.artifacts ?? []).find((a) => a?.key?.endsWith('/measure.json'));
+    if (measured) { try { measureSrc = await artifactFile(p, measured); } catch { measureSrc = null; } }
+    const hasStrip = stripSrc !== null;
     if (hasStrip) {
       fs.copyFileSync(stripSrc, path.join(outDir, 'strips', `${slug}.webp`));
       // The index is a browsing surface. Its previews must not make each visitor
@@ -183,16 +195,22 @@ export async function buildUi({ indexPath, entriesDir, outDir, previewMediaDir }
       draft: !ok,
     };
     rows.push(row);
-    writeEntryPage(outDir, entry, row, previewMediaDir);
+    writeEntryPage(outDir, entry, row, previewMediaDir, measureSrc);
   }
   rows.sort((a, b) => b.captured.localeCompare(a.captured));
 
   fs.writeFileSync(path.join(outDir, 'manifest.json'), JSON.stringify(rows, null, 2));
   const tpl = fs.readFileSync(path.join(TPL, 'index.html'), 'utf8');
   const filters = FACETS.map((f) => filterFieldset(f, vocab.facets[f])).join('\n');
-  fs.writeFileSync(path.join(outDir, 'index.html'), render(tpl, { FILTERS: filters, GRID: rows.map(card).join('\n') }));
+  const drafts = rows.filter((r) => r.draft).length;
+  // Rendered server-side, not left to the client-side draft filter: a build where every
+  // entry failed validation must say so even before app.js runs, or the visitor sees an
+  // unexplained blank grid (the incident this guards against).
+  const notice = rows.length > 0 && drafts === rows.length
+    ? `<p id="empty-state">${rows.length} ${rows.length === 1 ? 'entry' : 'entries'} in the library, all hidden because they failed validation. Check &quot;Show drafts&quot; above to view them.</p>`
+    : '';
+  fs.writeFileSync(path.join(outDir, 'index.html'), render(tpl, { FILTERS: filters, GRID: rows.map(card).join('\n'), NOTICE: notice }));
   fs.copyFileSync(path.join(DIR, 'app.js'), path.join(outDir, 'app.js'));
 
-  const drafts = rows.filter((r) => r.draft).length;
   return { entries: rows.length - drafts, drafts };
 }

package/src/ui/templates/index.html

@@ -15,6 +15,7 @@
   .card .ph { width: 100%; aspect-ratio: 4/3; background: #8882; }
   .card .meta { padding: .5rem; }
   .badge { background: #d33; color: #fff; font-size: .7em; padding: .1em .4em; border-radius: 4px; }
+  #empty-state { padding: .75rem 1rem; border: 1px solid #d33; border-radius: 8px; margin-bottom: 1rem; }
   [hidden] { display: none !important; }
 </style>
 </head>
@@ -24,6 +25,7 @@
 {{FILTERS}}
 <label><input type="checkbox" id="drafts-toggle"> Show drafts</label>
 </form>
+{{NOTICE}}
 <div id="grid">
 {{GRID}}
 </div>

package/entries/air/captures/2/measure.json

@@ -1,325 +0,0 @@
-{
-  "url": "https://air.inc/",
-  "at": "2026-09-17",
-  "viewport": [
-    1440,
-    390
-  ],
-  "tokens": {
-    "canvas": "#13396a",
-    "ink": "#000000",
-    "accent": "#1b1b1b",
-    "fontDisplay": "\"Control Compressed\", Arial, Helvetica, sans-serif",
-    "fontBody": "Control, Arial, Helvetica, sans-serif"
-  },
-  "sections": [
-    {
-      "index": 0,
-      "tag": "header",
-      "id": "",
-      "class": "Header_root__hagAA",
-      "top": 0,
-      "height": 72,
-      "animations": []
-    },
-    {
-      "index": 1,
-      "tag": "div",
-      "id": "",
-      "class": "canvas canvas___loaded",
-      "top": 0,
-      "height": 900,
-      "animations": []
-    },
-    {
-      "index": 2,
-      "tag": "section",
-      "id": "Hero",
-      "class": "Section_root__XZMWH p-0! Section_root___spacingDefault__lCxmv",
-      "top": 0,
-      "height": 1020,
-      "animations": []
-    },
-    {
-      "index": 3,
-      "tag": "section",
-      "id": "Agentic Cards",
-      "class": "Section_root__XZMWH p-0! Section_root___spacingDefault__lCxmv bg-center bg-contain bg-no-repeat",
-      "top": 1020,
-      "height": 1021,
-      "animations": []
-    },
-    {
-      "index": 4,
-      "tag": "section",
-      "id": "",
-      "class": "flex w-full flex-col gap-12",
-      "top": 1282,
-      "height": 631,
-      "animations": []
-    },
-    {
-      "index": 5,
-      "tag": "section",
-      "id": "Logos",
-      "class": "Section_root__XZMWH Section_root___spacingSmall__u_8bU",
-      "top": 2041,
-      "height": 502,
-      "animations": []
-    },
-    {
-      "index": 6,
-      "tag": "section",
-      "id": "agent-waitlist",
-      "class": "Section_root__XZMWH p-0! Section_root___spacingDefault__lCxmv bg-center bg- bg-no-repeat",
-      "top": 2543,
-      "height": 858,
-      "animations": [
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        }
-      ]
-    },
-    {
-      "index": 7,
-      "tag": "section",
-      "id": "Spacing",
-      "class": "Section_root__XZMWH Section_root___spacingDefault__lCxmv bg-center bg-contain bg-no-repeat",
-      "top": 3401,
-      "height": 240,
-      "animations": []
-    },
-    {
-      "index": 8,
-      "tag": "section",
-      "id": "Supersize Text",
-      "class": "Section_root__XZMWH Section_root___spacingDefault__lCxmv",
-      "top": 3641,
-      "height": 949,
-      "animations": []
-    },
-    {
-      "index": 9,
-      "tag": "section",
-      "id": "Primary Product Demo",
-      "class": "Section_root__XZMWH p-0! Section_root___spacingDefault__lCxmv",
-      "top": 4590,
-      "height": 638,
-      "animations": []
-    },
-    {
-      "index": 10,
-      "tag": "section",
-      "id": "Features",
-      "class": "Section_root__XZMWH p-0! Section_root___spacingLarge__acfRQ",
-      "top": 5228,
-      "height": 1416,
-      "animations": [
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        }
-      ]
-    },
-    {
-      "index": 11,
-      "tag": "section",
-      "id": "Models",
-      "class": "Section_root__XZMWH p-0! Section_root___spacingDefault__lCxmv bg-center bg-contain bg-no-repeat",
-      "top": 6645,
-      "height": 256,
-      "animations": [
-        {
-          "target": "div.CTACard_root_orbs_inner__sJJHM",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        },
-        {
-          "target": "div.CTACard_root_orbs_item__ocG9A",
-          "timeline": "document",
-          "range": null,
-          "duration": 6000
-        },
-        {
-          "target": "div.CTACard_root_orbs_item__ocG9A",
-          "timeline": "document",
-          "range": null,
-          "duration": 6000
-        },
-        {
-          "target": "div.CTACard_root_orbs_item__ocG9A",
-          "timeline": "document",
-          "range": null,
-          "duration": 6000
-        },
-        {
-          "target": "div.AnimatedBorder_root_stroke__5hoiG",
-          "timeline": "document",
-          "range": null,
-          "duration": 10000
-        }
-      ]
-    },
-    {
-      "index": 12,
-      "tag": "section",
-      "id": "Integrations",
-      "class": "Section_root__XZMWH Section_root___headerPadding__9L15p Section_root___spacingSmall__u_8bU bg-center bg-contain bg-no-repeat",
-      "top": 6901,
-      "height": 439,
-      "animations": []
-    },
-    {
-      "index": 13,
-      "tag": "section",
-      "id": "Storytelling",
-      "class": "Section_root__XZMWH Section_root___spacingDefault__lCxmv bg-center bg-contain bg-no-repeat",
-      "top": 7340,
-      "height": 3888,
-      "animations": []
-    },
-    {
-      "index": 14,
-      "tag": "section",
-      "id": "Book a Demo Form",
-      "class": "Section_root__XZMWH Section_root___spacingDefault__lCxmv",
-      "top": 11228,
-      "height": 1162,
-      "animations": [
-        {
-          "target": "h1.u-h2-large",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "h1.u-h2-large",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "span",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "p",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        },
-        {
-          "target": "p",
-          "timeline": "document",
-          "range": null,
-          "duration": 1000
-        }
-      ]
-    },
-    {
-      "index": 15,
-      "tag": "footer",
-      "id": "Footer",
-      "class": "Section_root__XZMWH p-0! Footer_root__g9BuT",
-      "top": 12390,
-      "height": 1350,
-      "animations": []
-    }
-  ],
-  "screenshots": {
-    "390": "screen-390.png",
-    "1440": "screen-1440.png"
-  }
-}

package/entries/apple-home/captures/2/measure.json

@@ -1,91 +0,0 @@
-{
-  "url": "https://www.apple.com/",
-  "at": "2026-09-16",
-  "viewport": [
-    1440,
-    390
-  ],
-  "tokens": {
-    "canvas": "#ffffff",
-    "ink": "#1d1d1f",
-    "accent": "#333336",
-    "fontDisplay": "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
-    "fontBody": "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
-  },
-  "sections": [
-    {
-      "index": 0,
-      "tag": "section",
-      "id": "",
-      "class": "section-ribbon",
-      "top": 44,
-      "height": 52,
-      "animations": []
-    },
-    {
-      "index": 1,
-      "tag": "section",
-      "id": "",
-      "class": "section section-hero",
-      "top": 96,
-      "height": 2100,
-      "animations": []
-    },
-    {
-      "index": 2,
-      "tag": "section",
-      "id": "",
-      "class": "section section-promo",
-      "top": 2208,
-      "height": 1764,
-      "animations": []
-    },
-    {
-      "index": 3,
-      "tag": "section",
-      "id": "",
-      "class": "section-endless-entertainment-gallery",
-      "top": 3984,
-      "height": 957,
-      "animations": [
-        {
-          "target": "a.media-gallery-dotnav-link dotnav-link",
-          "timeline": "document",
-          "range": null,
-          "duration": 4160
-        }
-      ]
-    },
-    {
-      "index": 4,
-      "tag": "footer",
-      "id": "ac-globalfooter",
-      "class": "js",
-      "top": 4941,
-      "height": 1111,
-      "animations": []
-    },
-    {
-      "index": 5,
-      "tag": "section",
-      "id": "",
-      "class": "ac-gf-sosumi",
-      "top": 4941,
-      "height": 525,
-      "animations": []
-    },
-    {
-      "index": 6,
-      "tag": "section",
-      "id": "",
-      "class": "ac-gf-footer",
-      "top": 5926,
-      "height": 126,
-      "animations": []
-    }
-  ],
-  "screenshots": {
-    "390": "screen-390.png",
-    "1440": "screen-1440.png"
-  }
-}