@pygmalionjs/pygmalion 0.2.11 → 0.2.13

package/dist-lib/pygmalion.js

@@ -1,151 +1,1768 @@
-import { jsx as Z } from "react/jsx-runtime";
-import { i as le, g as ce, e as v, b as de, a as ue, c as fe, d as he, f as pe, h as me, j as ge, k as ye, l as we, m as be, n as ve, o as L, S as Se, A as Pe, p as K, q as Oe, r as Ie, t as Ee, u as Ne, v as Ae, w as Re, x as De, y as X } from "./App-CyLtIqGh.js";
-import { D as Ye, z as We, B as Ze, C as Ke, E as Xe, G as er, H as rr, I as tr, J as nr, K as sr, L as ir, M as ar } from "./App-CyLtIqGh.js";
-import { useMemo as ee, useState as Q, useRef as re, useCallback as j, useEffect as B } from "react";
-const te = /^[a-f0-9]{64}$/, Te = /^\/__pygmalion-qa\/artifacts\/[A-Za-z0-9_-]{8,120}\.png$/, _e = /^p\d+$/;
-function V(r) {
-  return typeof r == "string" && Te.test(r) ? r : void 0;
-}
-function ne(r, e) {
-  const s = new URL(r, e);
-  return s.search = "", s.hash = "", s.pathname.endsWith("/") || (s.pathname = `${s.pathname}/`), s.href;
-}
-function z(r) {
-  if (!r || typeof r != "object" || Array.isArray(r)) return null;
-  const e = r;
-  return typeof e.domStructureHash != "string" || !te.test(e.domStructureHash) || typeof e.screenshotHash != "string" || !te.test(e.screenshotHash) ? null : {
-    domStructureHash: e.domStructureHash,
-    screenshotHash: e.screenshotHash,
-    ...V(e.screenshotUrl) ? { screenshotUrl: V(e.screenshotUrl) } : {}
+import { jsxs as O, jsx as w } from "react/jsx-runtime";
+import { b as V, m as He, v as Ke, c as qe, i as Ge, g as Le, e as K, d as Ve, a as Je, f as We, h as Qe, j as Xe, k as Ye, l as Ze, n as et, o as tt, p as nt, q as rt, r as ot, t as Y, S as st, A as it, u as ve, w as at, x as ct, y as lt, z as dt, B as ft, C as ut, D as pt, E as Ie } from "./App-BpS2IDVb.js";
+import { G as $n, H as Mn, I as Tn, J as Dn, K as kn, L as zn, M as _n, O as Fn, P as Bn, Q as jn, R as Un, T as Hn, U as Kn, V as qn, W as Gn, X as Ln, Y as Vn } from "./App-BpS2IDVb.js";
+import { createElement as xe, useMemo as Pe, useState as te, useRef as Ee, useCallback as Z, useEffect as ee } from "react";
+function pe(e, t = /* @__PURE__ */ new Set()) {
+  if (e == null || typeof e == "string" || typeof e == "boolean" || typeof e == "number" && Number.isFinite(e))
+    return e;
+  if (Array.isArray(e))
+    return e.map((n) => pe(n, t));
+  if (typeof e != "object") return null;
+  if (t.has(e))
+    throw new Error("A storyboard recipe cannot contain circular references.");
+  t.add(e);
+  const r = {};
+  for (const n of Object.keys(e).sort()) {
+    const o = e[n];
+    o !== void 0 && (r[n] = pe(o, t));
+  }
+  return t.delete(e), r;
+}
+function ht(e) {
+  return JSON.stringify(
+    pe({
+      version: 1,
+      route: e.route ?? null,
+      componentName: e.componentName ?? null,
+      gallery: e.gallery ?? [],
+      viewport: {
+        width: e.width ?? null,
+        height: e.height ?? null,
+        frameSizeMode: e.frameSizeMode ?? null,
+        heightMode: e.heightMode ?? null,
+        maxHeight: e.maxHeight ?? null
+      },
+      environment: e.environment ?? null,
+      preset: e.preset ?? null,
+      interactions: e.interactions ?? [],
+      assertions: e.assertions ?? []
+    })
+  );
+}
+function z(e) {
+  return [...new Set([...e].map((t) => t == null ? void 0 : t.trim()).filter(Boolean))].sort((t, r) => t.localeCompare(r));
+}
+function mt(e, t) {
+  var n;
+  return ((n = e.id) == null ? void 0 : n.trim()) || `edge:${t + 1}`;
+}
+function gt(e) {
+  const t = [...e.screens].sort((n, o) => n.id.localeCompare(o.id)), r = t[0].id;
+  return {
+    id: `story:${r}`,
+    canonicalScreenId: r,
+    screenIds: t.map((n) => n.id),
+    names: z(t.map((n) => n.name)),
+    recipeKey: e.recipeKey,
+    routes: z(t.map((n) => n.route)),
+    scenarioIds: z(
+      t.flatMap((n) => [
+        n.scenarioId,
+        ...n.scenarioIds ?? []
+      ])
+    ),
+    sourceKeys: z(t.map((n) => n.sourcePath)),
+    flows: z(t.map((n) => n.flow)),
+    states: z(t.map((n) => n.state))
   };
 }
-function se(r) {
-  if (!r || typeof r != "object" || Array.isArray(r)) return null;
-  const e = r;
-  return !Number.isSafeInteger(e.width) || !Number.isSafeInteger(e.height) || Number(e.width) < 1 || Number(e.height) < 1 || Number(e.width) > 65536 || Number(e.height) > 65536 ? null : { width: Number(e.width), height: Number(e.height) };
+function Ne(e) {
+  return [
+    e.code,
+    e.edgeId,
+    e.nodeId,
+    e.screenId,
+    e.scenarioId
+  ].join(":");
 }
-function xe(r) {
-  if (!r || typeof r != "object" || Array.isArray(r)) return null;
-  const e = r, s = se(e.before), i = se(e.after);
-  if (!s || !i || !Number.isSafeInteger(e.changedPixels) || !Number.isSafeInteger(e.totalPixels) || Number(e.changedPixels) < 0 || Number(e.totalPixels) < 1 || Number(e.changedPixels) > Number(e.totalPixels) || typeof e.threshold != "number" || !Number.isFinite(e.threshold) || e.threshold < 0 || e.threshold > 1)
-    return null;
-  const t = e.heatmapUrl == null ? null : V(e.heatmapUrl) ?? null;
+function yt(e) {
+  var g, I;
+  const t = [], r = [], n = /* @__PURE__ */ new Map();
+  for (const i of e.screens) {
+    const l = i.id.trim();
+    if (!l || n.has(l)) {
+      t.push({
+        code: "duplicate-screen-id",
+        severity: "error",
+        message: l ? `Multiple storyboard screens use the id "${l}".` : "A storyboard screen has an empty id.",
+        screenId: l || void 0
+      });
+      continue;
+    }
+    const f = l === i.id ? i : { ...i, id: l };
+    n.set(l, f), r.push(f);
+  }
+  const o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set();
+  for (const i of r) {
+    let l;
+    try {
+      if (l = (e.recipeKey ?? ht)(i), !l.trim()) throw new Error("Recipe keys cannot be empty.");
+    } catch (y) {
+      s.add(i.id), t.push({
+        code: "invalid-recipe",
+        severity: "error",
+        message: y instanceof Error ? y.message : "Storyboard recipe identity could not be created.",
+        screenId: i.id
+      }), l = `invalid:${i.id}`;
+    }
+    const f = o.get(l);
+    f ? f.screens.push(i) : o.set(l, { recipeKey: l, screens: [i] });
+  }
+  const a = [...o.values()].map(gt).sort((i, l) => i.id.localeCompare(l.id)), c = {};
+  for (const i of a)
+    for (const l of i.screenIds) c[l] = i.id;
+  const d = new Map(a.map((i) => [i.id, i])), h = /* @__PURE__ */ new Map();
+  for (const i of e.assets ?? []) {
+    const l = h.get(i.pageId);
+    l ? l.push(i) : h.set(i.pageId, [i]);
+  }
+  const u = a.map((i) => {
+    const l = i.screenIds.flatMap(
+      (f) => h.get(f) ?? []
+    );
+    return {
+      ...i,
+      scenarioIds: z([
+        ...i.scenarioIds,
+        ...l.map((f) => f.scenarioId)
+      ]),
+      sourceKeys: z([
+        ...i.sourceKeys,
+        ...l.map((f) => f.sourcePath)
+      ])
+    };
+  }), b = /* @__PURE__ */ new Map();
+  for (const i of u)
+    for (const l of i.routes) {
+      const f = b.get(l);
+      f ? f.push(i.id) : b.set(l, [i.id]);
+    }
+  const P = (i, l, f) => {
+    const y = i.trim(), D = c[y] ?? (d.has(y) ? y : null);
+    if (D) return D;
+    const H = z(b.get(y) ?? []);
+    return H.length === 1 ? H[0] : H.length > 1 ? (t.push({
+      code: f === "source" ? "ambiguous-edge-source" : "ambiguous-edge-target",
+      severity: "error",
+      message: `Storyboard edge "${l}" references an ambiguous ${f} route.`,
+      edgeId: l,
+      screenId: y || void 0
+    }), null) : (t.push({
+      code: f === "source" ? "unknown-edge-source" : "unknown-edge-target",
+      severity: "error",
+      message: `Storyboard edge "${l}" references an unknown ${f}.`,
+      edgeId: l,
+      screenId: y || void 0
+    }), null);
+  }, E = [], m = /* @__PURE__ */ new Map(), N = [
+    ["explicit", e.explicitEdges ?? []],
+    ["inferred", e.inferredEdges ?? []]
+  ];
+  let p = 0;
+  for (const [i, l] of N)
+    for (const f of l) {
+      const y = mt(f, p);
+      p += 1;
+      const D = P(f.from, y, "source"), H = P(f.to, y, "target");
+      if (!D || !H || D === H) continue;
+      const de = `${D}\0${H}`, X = m.get(de);
+      if (X) {
+        if (!X.sourceEdgeIds.includes(y)) {
+          const be = {
+            ...X,
+            sourceEdgeIds: z([
+              ...X.sourceEdgeIds,
+              y
+            ])
+          };
+          m.set(de, be);
+          const Se = E.indexOf(X);
+          Se >= 0 && (E[Se] = be);
+        }
+        continue;
+      }
+      const we = {
+        id: y,
+        from: D,
+        to: H,
+        kind: ((g = f.kind) == null ? void 0 : g.trim()) || void 0,
+        label: ((I = f.label) == null ? void 0 : I.trim()) || void 0,
+        origin: i,
+        sourceEdgeIds: [y]
+      };
+      m.set(de, we), E.push(we);
+    }
+  E.sort(
+    (i, l) => `${i.from}:${i.to}:${i.id}`.localeCompare(`${l.from}:${l.to}:${l.id}`)
+  );
+  const $ = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
+  for (const i of E) {
+    const l = R.get(i.from);
+    l ? l.push(i) : R.set(i.from, [i]);
+    const f = $.get(i.to);
+    f ? f.push(i) : $.set(i.to, [i]);
+  }
+  const T = [];
+  for (const i of e.startScreenIds ?? []) {
+    const l = i.trim(), f = c[l] ?? (d.has(l) ? l : null);
+    if (!f) {
+      t.push({
+        code: "unknown-start-screen",
+        severity: "error",
+        message: `Storyboard start references an unknown screen "${l}".`,
+        screenId: l || void 0
+      });
+      continue;
+    }
+    T.push(f);
+  }
+  const M = new Set(T);
+  let A = z(T);
+  A.length || (A = u.filter((i) => {
+    var l;
+    return (((l = $.get(i.id)) == null ? void 0 : l.length) ?? 0) === 0;
+  }).map((i) => i.id).sort((i, l) => i.localeCompare(l))), !A.length && u.length && (A = [u[0].id]);
+  const S = /* @__PURE__ */ new Set(), C = [...A];
+  for (; C.length; ) {
+    const i = C.shift();
+    if (!S.has(i)) {
+      S.add(i);
+      for (const l of R.get(i) ?? []) C.push(l.to);
+    }
+  }
+  const F = u.filter((i) => {
+    var f, y;
+    const l = (((f = $.get(i.id)) == null ? void 0 : f.length) ?? 0) === 0 && (((y = R.get(i.id)) == null ? void 0 : y.length) ?? 0) === 0 && !M.has(i.id);
+    return !S.has(i.id) || l && u.length > 1;
+  });
+  for (const i of F)
+    for (const l of i.screenIds)
+      t.push({
+        code: "disconnected-screen",
+        severity: "warning",
+        message: `Storyboard screen "${l}" is not connected to a graph branch.`,
+        screenId: l,
+        nodeId: i.id
+      });
+  const j = /* @__PURE__ */ new Map();
+  for (const i of u)
+    for (const l of i.sourceKeys) {
+      const f = j.get(l) ?? {
+        nodeIds: /* @__PURE__ */ new Set(),
+        screenIds: /* @__PURE__ */ new Set()
+      };
+      f.nodeIds.add(i.id);
+      for (const y of i.screenIds) f.screenIds.add(y);
+      j.set(l, f);
+    }
+  const W = [...j.entries()].map(([i, l]) => ({
+    sourceKey: i,
+    nodeIds: [...l.nodeIds].sort((f, y) => f.localeCompare(y)),
+    screenIds: [...l.screenIds].sort((f, y) => f.localeCompare(y)),
+    shared: l.nodeIds.size > 1
+  })).sort((i, l) => i.sourceKey.localeCompare(l.sourceKey)), q = u.map((i) => {
+    const l = [...R.get(i.id) ?? []].sort(
+      (f, y) => f.id.localeCompare(y.id)
+    );
+    return {
+      nodeId: i.id,
+      edgeIds: l.map((f) => f.id),
+      targetNodeIds: z(l.map((f) => f.to))
+    };
+  }).filter((i) => i.targetNodeIds.length > 1).sort((i, l) => i.nodeId.localeCompare(l.nodeId)), G = new Set(
+    u.flatMap((i) => i.scenarioIds)
+  ), x = new Set(
+    (e.nonVisualScenarioIds ?? []).map((i) => i.trim())
+  ), B = z(
+    (e.scenarios ?? []).map((i) => i.id)
+  ), k = B.filter(
+    (i) => !G.has(i) && !x.has(i)
+  );
+  for (const i of k)
+    t.push({
+      code: "missing-code-scenario",
+      severity: "warning",
+      message: `Code scenario "${i}" is not represented in the storyboard.`,
+      scenarioId: i
+    });
+  t.sort(
+    (i, l) => Ne(i).localeCompare(Ne(l))
+  );
+  const Q = z(
+    F.flatMap((i) => i.screenIds)
+  ), v = {
+    screens: r.length,
+    canonicalNodes: u.length,
+    mergedScreens: Math.max(0, r.length - u.length),
+    edges: E.length,
+    connectedNodes: u.length - F.length,
+    disconnectedScreens: Q,
+    codeScenarios: B.length,
+    representedScenarios: B.filter(
+      (i) => G.has(i)
+    ).length,
+    missingScenarios: k,
+    complete: Q.length === 0 && k.length === 0 && !t.some((i) => i.severity === "error") && s.size === 0
+  };
   return {
-    before: s,
-    after: i,
-    dimensionsMatch: s.width === i.width && s.height === i.height,
-    changedPixels: Number(e.changedPixels),
-    totalPixels: Number(e.totalPixels),
-    diffRatio: Number(e.changedPixels) / Number(e.totalPixels),
-    threshold: e.threshold,
-    heatmapUrl: t
+    version: 1,
+    nodes: u,
+    edges: E,
+    aliases: Object.fromEntries(
+      Object.entries(c).sort(([i], [l]) => i.localeCompare(l))
+    ),
+    sourceGroups: W,
+    startNodeIds: A,
+    branches: q,
+    warnings: t,
+    coverage: v
   };
 }
-function Fe(r, e) {
-  if (!r || typeof r != "object" || Array.isArray(r)) return null;
-  const s = r;
-  if (typeof s.id != "string" || !s.id) return null;
-  const i = z(s), t = z(s.before) ?? i;
+function wt(e) {
+  return e ? JSON.parse(JSON.stringify(e)) : void 0;
+}
+function oe(e) {
+  if (Array.isArray(e)) return e.map(oe);
+  if (e && typeof e == "object") {
+    const t = Object.entries(e).filter(([, r]) => r !== void 0).sort(([r], [n]) => r.localeCompare(n)).map(([r, n]) => [r, oe(n)]).filter(([, r]) => r !== void 0);
+    return t.length ? Object.fromEntries(t) : void 0;
+  }
+  return e;
+}
+function Ce(e) {
+  return JSON.stringify(oe(e ?? null));
+}
+function bt(e) {
+  return !!(e && typeof e == "object" && !Array.isArray(e));
+}
+function U(e) {
+  const t = e == null ? void 0 : e.trim();
   if (!t) return null;
-  const d = z(s.after);
-  if (e === "changed" && !d) return null;
-  const h = d ? xe(s.pixelDiff) : null;
-  return {
+  let r = t;
+  try {
+    /^[a-z][a-z\d+.-]*:\/\//i.test(t) && (r = new URL(t).pathname);
+  } catch {
+    return null;
+  }
+  return r = r.split(/[?#]/, 1)[0].replace(/\/{2,}/g, "/"), r.startsWith("/") || (r = `/${r}`), r.length > 1 && (r = r.replace(/\/+$/, "")), r || "/";
+}
+function De(e) {
+  return `source-route:${encodeURIComponent(e)}`;
+}
+function ye(e, t) {
+  const r = e.split("/").filter(Boolean), n = t.split("/").filter(Boolean);
+  let o = 0;
+  for (let s = 0; s < r.length; s += 1) {
+    const a = r[s];
+    if (a === "*" || a.startsWith("*")) return !0;
+    const c = n[o];
+    if (!(a.endsWith("?") && c == null)) {
+      if (c == null || !a.startsWith(":") && a !== c) return !1;
+      o += 1;
+    }
+  }
+  return o === n.length;
+}
+function Re(e, t) {
+  const r = U(e);
+  if (!r) return [];
+  const n = t.get(r);
+  return n && !/[:*]/.test(r) ? [n] : [
+    ...new Set(
+      [...t.entries()].filter(([o]) => ye(r, o)).map(([, o]) => o)
+    )
+  ].sort((o, s) => o.localeCompare(s));
+}
+function St(e) {
+  var r;
+  const t = /* @__PURE__ */ new Map();
+  for (const n of e ?? []) {
+    const o = U(n.path);
+    !o || t.has(o) || t.set(o, {
+      id: De(o),
+      name: o,
+      section: "Source routes",
+      codeName: ((r = n.id) == null ? void 0 : r.trim()) || void 0
+    });
+  }
+  return [...t.values()].sort((n, o) => n.id.localeCompare(o.id));
+}
+function vt(e, t, r) {
+  return (e ?? []).flatMap((n, o) => {
+    var u, b, P;
+    const s = (u = n.from) == null ? void 0 : u.trim(), a = (b = n.to) == null ? void 0 : b.trim();
+    if (!s || !a || n.unresolvedTarget) return [];
+    const c = r.has(s) ? [s] : Re(s, t), d = r.has(a) ? [a] : Re(a, t);
+    if (!c.length || !d.length) return [];
+    const h = ((P = n.id) == null ? void 0 : P.trim()) || `discovery-edge:${o + 1}`;
+    return c.flatMap(
+      (E, m) => d.map((N, p) => {
+        var $, R;
+        return {
+          id: c.length === 1 && d.length === 1 ? h : `${h}:${m + 1}:${p + 1}`,
+          from: E,
+          to: N,
+          kind: (($ = n.kind) == null ? void 0 : $.trim()) || void 0,
+          label: ((R = n.label) == null ? void 0 : R.trim()) || void 0
+        };
+      })
+    );
+  });
+}
+function It(e, t, r) {
+  const n = U(e.route);
+  if (!n) return [];
+  const o = t.filter(
+    (c) => {
+      const d = U(c.route);
+      return d ? ye(d, n) : !1;
+    }
+  );
+  if (!o.length) return [];
+  const s = Ce(
+    He(r, e.environment)
+  ), a = o.filter(
+    (c) => Ce(c.environment) === s
+  );
+  return [
+    ...new Set(
+      a.map((c) => {
+        var d;
+        return (d = c.scenarioId) == null ? void 0 : d.trim();
+      }).filter((c) => !!c)
+    )
+  ].sort((c, d) => c.localeCompare(d));
+}
+function xt(e, t) {
+  const r = e.some((s) => s.importKind != null), n = t.candidates ?? [], o = ze(t);
+  return e.filter(
+    (s) => r ? s.importKind === "screens" : !!s.route
+  ).map((s) => ({
     id: s.id,
-    before: t,
-    ...d ? { after: d } : {},
-    ...d ? {
-      domChanged: t.domStructureHash !== d.domStructureHash,
-      screenshotChanged: t.screenshotHash !== d.screenshotHash
+    name: s.name,
+    section: s.section ?? s.canvas ?? "Screens",
+    componentName: s.componentName,
+    gallery: s.gallery,
+    route: s.route,
+    path: s.path,
+    publish: s.publish,
+    width: s.width,
+    height: s.height,
+    frameSizeMode: s.frameSizeMode,
+    heightMode: s.heightMode,
+    maxHeight: s.maxHeight,
+    flow: s.flow,
+    scenario: s.scenario,
+    state: s.state,
+    scenarioId: s.scenarioId,
+    scenarioIds: It(s, n, o),
+    interactions: s.interactions,
+    environment: s.environment,
+    preset: s.preset,
+    assertions: s.assertions,
+    sourcePath: [...s.sourcePaths ?? []].filter(Boolean).sort((a, c) => a.localeCompare(c))[0]
+  }));
+}
+function le(e, t) {
+  var c, d, h, u;
+  const r = (((c = e.interactions) == null ? void 0 : c.length) ?? 0) - (((d = t.interactions) == null ? void 0 : d.length) ?? 0);
+  if (r !== 0) return r;
+  const n = (h = e.scenarioIds) != null && h.includes("environment:baseline") ? 0 : 1, o = (u = t.scenarioIds) != null && u.includes("environment:baseline") ? 0 : 1;
+  if (n !== o) return n - o;
+  const s = !e.environment && !e.preset ? 0 : 1, a = !t.environment && !t.preset ? 0 : 1;
+  return s !== a ? s - a : e.id.localeCompare(t.id);
+}
+function Pt(e) {
+  const t = /* @__PURE__ */ new Map();
+  for (const r of e) {
+    const n = U(r.route);
+    if (!n) continue;
+    const o = t.get(n);
+    o ? o.push(r) : t.set(n, [r]);
+  }
+  return new Map(
+    [...t.entries()].map(([r, n]) => {
+      const o = [...n].sort(le);
+      return [r, o[0].id];
+    })
+  );
+}
+function Et(e) {
+  return e.action === "wait" ? null : JSON.stringify(
+    oe({
+      action: e.action,
+      selector: e.selector,
+      text: e.text,
+      exact: e.exact,
+      index: e.index,
+      waitState: e.waitState,
+      value: e.value,
+      key: e.key,
+      storage: e.storage,
+      optional: e.optional
+    })
+  );
+}
+function ke(e) {
+  return (e.interactions ?? []).map(Et).filter((t) => t != null);
+}
+function Nt(e, t) {
+  return e.length < t.length && e.every((r, n) => r === t[n]);
+}
+function Ct(e, t) {
+  const r = /* @__PURE__ */ new Map();
+  for (const n of e) {
+    const o = U(n.route);
+    if (!o) continue;
+    const s = `${o}\0${ke(n).join("
")}`, a = r.get(s);
+    a ? a.push(n) : r.set(s, [n]);
+  }
+  return [...r.values()].flatMap((n) => {
+    if (n.length < 2) return [];
+    const o = U(n[0].route), s = t.get(o), a = n.find((c) => c.id === s) ?? [...n].sort(le)[0];
+    return n.filter((c) => c.id !== a.id).sort((c, d) => c.id.localeCompare(d.id)).map((c) => ({
+      id: `discovery-variant:${encodeURIComponent(a.id)}:${encodeURIComponent(c.id)}`,
+      from: a.id,
+      to: c.id,
+      kind: "variant"
+    }));
+  });
+}
+function Rt(e, t) {
+  const r = /* @__PURE__ */ new Map();
+  for (const n of e) {
+    const o = U(n.route);
+    if (!o) continue;
+    const s = r.get(o);
+    s ? s.push(n) : r.set(o, [n]);
+  }
+  return [...r.entries()].flatMap(([n, o]) => {
+    const s = new Map(
+      o.map((d) => [d.id, ke(d)])
+    ), a = t.get(n), c = o.find(
+      (d) => d.id === a
+    );
+    return o.flatMap((d) => {
+      const h = s.get(d.id);
+      if (!h.length) return [];
+      const b = o.filter(
+        (P) => Nt(
+          s.get(P.id),
+          h
+        )
+      ).sort((P, E) => {
+        const m = s.get(E.id).length - s.get(P.id).length;
+        if (m !== 0) return m;
+        const N = P.flow && P.flow === d.flow ? 0 : 1, p = E.flow && E.flow === d.flow ? 0 : 1;
+        if (N !== p) return N - p;
+        const $ = P.section && P.section === d.section ? 0 : 1, R = E.section && E.section === d.section ? 0 : 1;
+        if ($ !== R) return $ - R;
+        const T = P.id === a ? 0 : 1, M = E.id === a ? 0 : 1;
+        return T !== M ? T - M : le(P, E);
+      })[0];
+      return b ? [
+        {
+          id: `discovery-recipe:${encodeURIComponent(b.id)}:${encodeURIComponent(d.id)}`,
+          from: b.id,
+          to: d.id,
+          kind: "recipe-step"
+        }
+      ] : c && c.id !== d.id && s.get(c.id).join("
") !== h.join("
") ? [
+        {
+          id: `discovery-route-case:${encodeURIComponent(c.id)}:${encodeURIComponent(d.id)}`,
+          from: c.id,
+          to: d.id,
+          kind: "route-case"
+        }
+      ] : [];
+    });
+  });
+}
+function At(e) {
+  var r;
+  const t = /* @__PURE__ */ new Map();
+  for (const n of e) {
+    const o = (r = n.flow) == null ? void 0 : r.trim();
+    if (!o) continue;
+    const s = t.get(o);
+    s ? s.push(n) : t.set(o, [n]);
+  }
+  return [...t.values()].flatMap((n) => {
+    const o = n[0], s = /* @__PURE__ */ new Map();
+    for (const a of n) {
+      const c = U(a.route);
+      if (!c) continue;
+      const d = s.get(c);
+      d ? d.push(a) : s.set(c, [a]);
+    }
+    return s.size < 2 ? [] : [...s.values()].flatMap((a) => {
+      const c = [...a].sort(
+        le
+      )[0];
+      return c.id === o.id ? [] : [
+        {
+          id: `discovery-flow-route:${encodeURIComponent(o.id)}:${encodeURIComponent(c.id)}`,
+          from: o.id,
+          to: c.id,
+          kind: "flow-route"
+        }
+      ];
+    });
+  });
+}
+function Ot(e, t, r) {
+  const n = new Set(
+    (t.routes ?? []).map((o) => U(o.path)).filter((o) => !!o)
+  );
+  return e.map((o) => {
+    const s = U(o.route);
+    if (!s || r.get(s) !== o.id)
+      return o;
+    const a = [...n].filter(
+      (c) => ye(c, s)
+    );
+    return a.length ? {
+      ...o,
+      scenarioIds: [
+        .../* @__PURE__ */ new Set([
+          ...o.scenarioIds ?? [],
+          ...a.map(De)
+        ])
+      ].sort((c, d) => c.localeCompare(d))
+    } : o;
+  });
+}
+function $t(e, t) {
+  var h, u, b, P, E;
+  const r = new Set(e.map((m) => m.id)), n = new Map(
+    e.map((m, N) => [m.id, N])
+  ), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+  for (const m of r)
+    o.set(m, /* @__PURE__ */ new Set()), s.set(m, /* @__PURE__ */ new Set()), a.set(m, /* @__PURE__ */ new Set());
+  for (const m of t)
+    !r.has(m.from) || !r.has(m.to) || ((h = o.get(m.to)) == null || h.add(m.from), (u = s.get(m.from)) == null || u.add(m.to), (b = a.get(m.from)) == null || b.add(m.to), (P = a.get(m.to)) == null || P.add(m.from));
+  const c = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set();
+  for (const m of r) {
+    if (d.has(m)) continue;
+    const N = [], p = [m];
+    for (; p.length; ) {
+      const S = p.shift();
+      if (!d.has(S)) {
+        d.add(S), N.push(S);
+        for (const C of a.get(S) ?? [])
+          d.has(C) || p.push(C);
+      }
+    }
+    if (N.length === 1 && (((E = a.get(N[0])) == null ? void 0 : E.size) ?? 0) === 0)
+      continue;
+    const $ = N.filter((S) => {
+      var C;
+      return (((C = o.get(S)) == null ? void 0 : C.size) ?? 0) === 0;
+    }).sort(
+      (S, C) => (n.get(S) ?? Number.MAX_SAFE_INTEGER) - (n.get(C) ?? Number.MAX_SAFE_INTEGER) || S.localeCompare(C)
+    ), R = [...N].sort(
+      (S, C) => (n.get(S) ?? Number.MAX_SAFE_INTEGER) - (n.get(C) ?? Number.MAX_SAFE_INTEGER) || S.localeCompare(C)
+    )[0];
+    if (!R) continue;
+    const T = [R], M = /* @__PURE__ */ new Set(), A = (S) => {
+      const C = [S];
+      for (; C.length; ) {
+        const F = C.shift();
+        if (!M.has(F)) {
+          M.add(F);
+          for (const j of s.get(F) ?? [])
+            M.has(j) || C.push(j);
+        }
+      }
+    };
+    A(R);
+    for (const S of $)
+      M.has(S) || (T.push(S), A(S));
+    for (const S of T)
+      c.add(S);
+  }
+  return [...c].sort(
+    (m, N) => (n.get(m) ?? Number.MAX_SAFE_INTEGER) - (n.get(N) ?? Number.MAX_SAFE_INTEGER) || m.localeCompare(N)
+  );
+}
+function ze(e) {
+  var t, r;
+  return wt(
+    (r = (t = e.scenarios) == null ? void 0 : t.find(
+      (n) => n.id === "environment:baseline"
+    )) == null ? void 0 : r.environment
+  );
+}
+function Mt(e) {
+  const t = xt(
+    e.pages,
+    e.manifest
+  ), r = Pt(t), n = Ot(
+    t,
+    e.manifest,
+    r
+  ), s = [
+    ...vt(
+      e.manifest.edges,
+      r,
+      new Set(n.map((a) => a.id))
+    ),
+    ...Ct(n, r),
+    ...Rt(n, r),
+    ...At(n)
+  ];
+  return yt({
+    screens: n,
+    assets: e.assets,
+    scenarios: St(e.manifest.routes),
+    inferredEdges: s,
+    startScreenIds: $t(n, s)
+  });
+}
+async function _e(e) {
+  const r = await (e.fetcher ?? ((o, s) => fetch(o, s)))(e.endpoint, {
+    headers: { accept: "application/json" },
+    cache: "no-store",
+    signal: e.signal
+  });
+  if (!r.ok)
+    throw new Error(`Storyboard discovery failed (${r.status})`);
+  const n = await r.json();
+  if (!bt(n))
+    throw new Error("Storyboard discovery returned an invalid manifest.");
+  return {
+    manifest: n,
+    baselineEnvironment: ze(n),
+    graph: Mt({
+      manifest: n,
+      pages: e.pages,
+      assets: e.assets
+    })
+  };
+}
+async function mn(e) {
+  V(null);
+  try {
+    const t = await _e(e);
+    return V(t.graph), t;
+  } catch (t) {
+    throw V(null), t;
+  }
+}
+const Tt = "pygmalion-preview", Dt = "unknown", kt = 512, zt = 2048, _t = 8 * 1024 * 1024, Ft = 128 * 1024 * 1024, Bt = /* @__PURE__ */ new Set([
+  "__proto__",
+  "constructor",
+  "prototype"
+]);
+function J(e, t) {
+  const r = e.trim();
+  if (!r && t != null) return t;
+  if (re(r)) return r;
+  throw new TypeError("Preview identity must be a non-empty bounded string.");
+}
+function jt(e) {
+  const t = e ?? 1;
+  if (!Number.isSafeInteger(t) || t < 1)
+    throw new TypeError(
+      "Preview recipe version must be a positive safe integer."
+    );
+  return t;
+}
+function he(e, t = /* @__PURE__ */ new Set()) {
+  if (e == null || typeof e == "string" || typeof e == "boolean" || typeof e == "number" && Number.isFinite(e))
+    return e;
+  if (typeof e != "object") return null;
+  if (t.has(e))
+    throw new TypeError(
+      "Preview recipe identity cannot contain circular values."
+    );
+  if (t.add(e), Array.isArray(e)) {
+    const n = e.map((o) => he(o, t));
+    return t.delete(e), n;
+  }
+  const r = {};
+  for (const n of Object.keys(e).sort()) {
+    const o = e[n];
+    o !== void 0 && (r[n] = he(o, t));
+  }
+  return t.delete(e), r;
+}
+function Ut(e) {
+  let t = 2166136261, r = 2654435769;
+  for (let n = 0; n < e.length; n += 1) {
+    const o = e.charCodeAt(n);
+    t = Math.imul(t ^ o, 16777619), r = Math.imul(r ^ o + n, 2246822507);
+  }
+  return `${(t >>> 0).toString(16).padStart(8, "0")}${(r >>> 0).toString(16).padStart(8, "0")}`;
+}
+function Ht(e) {
+  if (!Array.isArray(e))
+    throw new TypeError("Preview recipes must be an array.");
+  const t = /* @__PURE__ */ new Set(), r = e.map(({ id: n, recipe: o }) => {
+    const s = J(n);
+    if (t.has(s))
+      throw new TypeError(`Duplicate preview recipe identity: ${s}`);
+    return t.add(s), {
+      id: s,
+      recipe: he(o)
+    };
+  });
+  return Ut(JSON.stringify(r));
+}
+function gn({
+  sourceRevision: e,
+  recipes: t,
+  recipeVersion: r,
+  scope: n = Tt
+}) {
+  const o = J(n), s = J(
+    e,
+    Dt
+  ), a = jt(r), c = Ht(t);
+  return `${o}:${encodeURIComponent(s)}:recipe-v${a}:${c}`;
+}
+function yn(e) {
+  return {
+    route: e.route,
+    path: e.path,
+    componentName: e.componentName,
+    gallery: e.gallery,
+    width: e.width,
+    height: e.height,
+    environment: e.environment,
+    preset: e.preset,
+    interactions: (e.interactions ?? []).map((t) => ({
+      action: t.action,
+      selector: t.selector,
+      text: t.text,
+      exact: t.exact,
+      index: t.index,
+      value: t.value,
+      key: t.key,
+      storage: t.storage,
+      optional: t.optional,
+      settleMs: t.settleMs,
+      timeoutMs: t.timeoutMs,
+      waitState: t.waitState
+    })),
+    assertions: e.assertions
+  };
+}
+function Kt({
+  endpoint: e,
+  fetcher: t,
+  captureBaseUrl: r
+}) {
+  const n = e.trim();
+  if (!n)
+    throw new TypeError(
+      "Preview artifact endpoint must be a non-empty string."
+    );
+  const o = t ?? ((s, a) => fetch(s, a));
+  return async (s) => {
+    const a = new URLSearchParams({
+      namespace: s.namespace,
+      sourceRevision: s.sourceRevision
+    }), c = s.captureBaseUrl ?? r;
+    c && a.set("captureBaseUrl", c);
+    const d = n.includes("?") ? "&" : "?", h = await o(
+      `${n}${d}${a}`,
+      {
+        method: "GET",
+        headers: { accept: "application/json" },
+        cache: "no-store",
+        signal: s.signal
+      }
+    );
+    return h.ok ? h.json().catch(() => null) : null;
+  };
+}
+function se(e) {
+  if (!e || typeof e != "object" || Array.isArray(e)) return !1;
+  const t = Object.getPrototypeOf(e);
+  return t === Object.prototype || t === null;
+}
+function Fe(e) {
+  return new TextEncoder().encode(e).byteLength;
+}
+function re(e) {
+  return typeof e == "string" && e.length > 0 && e.length <= kt && e === e.trim() && !Bt.has(e);
+}
+function qt(e) {
+  const t = /(?:expression\s*\(|-moz-binding\s*:|(?:^|[;{])\s*behavior\s*:)/i;
+  for (const r of e.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/gi))
+    if (t.test(r[1] ?? "")) return !0;
+  for (const r of e.matchAll(
+    /\sstyle\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi
+  ))
+    if (t.test(r[1] ?? r[2] ?? r[3] ?? "")) return !0;
+  return !1;
+}
+function Gt(e) {
+  return typeof e != "string" || e.length === 0 || Fe(e) > _t ? !1 : !(/<\s*(?:script|iframe|object|embed|applet|portal)\b/i.test(e) || /<\s*meta\b[^>]*http-equiv\s*=\s*["']?\s*refresh\b/i.test(e) || /\s(?:on[a-z][\w:-]*|srcdoc)\s*=/i.test(e) || /\s(?:href|src|action|formaction|xlink:href)\s*=\s*(?:"\s*|'?\s*)(?:javascript|vbscript|data\s*:\s*text\/html)\s*:/i.test(
+    e
+  ) || qt(e));
+}
+function Lt(e) {
+  const t = [];
+  if (!se(e) || e.version !== 1)
+    return {
+      valid: !1,
+      artifact: null,
+      errors: [
+        "Preview artifact must be a version 1, version 2, or version 3 bundle."
+      ]
+    };
+  if (re(e.namespace) || t.push("Preview artifact namespace is invalid."), e.sourceRevision != null && !re(e.sourceRevision) && t.push("Preview artifact source revision is invalid."), !se(e.snapshots))
+    t.push("Preview artifact snapshots must be a record.");
+  else {
+    const r = Object.entries(e.snapshots);
+    r.length > zt && t.push("Preview artifact has too many frames.");
+    for (const [n, o] of r)
+      (!re(n) || !Gt(o)) && t.push(`Preview artifact frame "${n}" is invalid.`);
+  }
+  try {
+    Fe(JSON.stringify(e)) > Ft && t.push("Preview artifact exceeds the bundle byte limit.");
+  } catch {
+    t.push("Preview artifact is not serializable.");
+  }
+  return {
+    valid: t.length === 0,
+    artifact: t.length === 0 ? e : null,
+    errors: t
+  };
+}
+function Vt(e, t) {
+  const r = se(e) && e.version === 3 ? (() => {
+    const n = Ke(e);
+    return {
+      valid: n.valid,
+      artifact: n.valid ? e : null,
+      errors: n.errors
+    };
+  })() : se(e) && e.version === 2 ? (() => {
+    const n = qe(e);
+    return {
+      valid: n.valid,
+      artifact: n.valid ? e : null,
+      errors: n.errors
+    };
+  })() : Lt(e);
+  return !r.valid || !r.artifact ? {
+    valid: !1,
+    artifact: null,
+    reason: "invalid-bundle",
+    errors: r.errors
+  } : t && r.artifact.namespace !== J(t.namespace) ? {
+    valid: !1,
+    artifact: null,
+    reason: "namespace-mismatch",
+    errors: [
+      "Preview artifact namespace does not match the runtime namespace."
+    ]
+  } : t && r.artifact.sourceRevision !== J(t.sourceRevision) ? {
+    valid: !1,
+    artifact: null,
+    reason: "revision-mismatch",
+    errors: [
+      "Preview artifact source revision does not match the runtime revision."
+    ]
+  } : {
+    valid: !0,
+    artifact: r.artifact,
+    errors: []
+  };
+}
+async function Jt({
+  namespace: e,
+  sourceRevision: t,
+  transport: r,
+  signal: n
+}) {
+  const o = {
+    namespace: J(e),
+    sourceRevision: J(t)
+  };
+  let s;
+  try {
+    s = await r({ ...o, signal: n });
+  } catch (c) {
+    if (n != null && n.aborted) throw c;
+    return { status: "unavailable", artifact: null, error: c };
+  }
+  if (s == null)
+    return { status: "unavailable", artifact: null };
+  const a = Vt(s, o);
+  return a.valid ? { status: "accepted", artifact: a.artifact } : {
+    status: "rejected",
+    artifact: null,
+    reason: a.reason,
+    errors: a.errors
+  };
+}
+const ie = "var(--pygmalion-catalog-surface, #ffffff)", ae = "var(--pygmalion-catalog-canvas, #f5f5f5)", me = "var(--pygmalion-catalog-border, #e5e7eb)", ce = "var(--pygmalion-catalog-text, #202124)", _ = "var(--pygmalion-catalog-muted, #6b7280)", Wt = "var(--pygmalion-catalog-header, #11182f)", Qt = "var(--pygmalion-catalog-accent, #7c6cf2)";
+function wn({
+  title: e,
+  eyebrow: t,
+  description: r,
+  version: n,
+  meta: o,
+  children: s,
+  headerBackground: a = Wt,
+  headerColor: c = "#ffffff",
+  bodyBackground: d = ie,
+  bodyGap: h = 40
+}) {
+  return /* @__PURE__ */ O(
+    "section",
+    {
+      "data-pygmalion-catalog-document": "",
+      "data-pygmalion-content-bounds": "",
+      style: {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        width: "max-content",
+        maxWidth: "none",
+        flexDirection: "column",
+        overflow: "visible",
+        color: ce,
+        background: d,
+        fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ O(
+          "header",
+          {
+            style: {
+              boxSizing: "border-box",
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
+              gap: 48,
+              padding: "44px 48px 48px",
+              color: c,
+              background: a
+            },
+            children: [
+              /* @__PURE__ */ O("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                t ? /* @__PURE__ */ w(
+                  "div",
+                  {
+                    style: {
+                      color: "color-mix(in srgb, currentColor 68%, transparent)",
+                      fontSize: 12,
+                      fontWeight: 700,
+                      letterSpacing: "0.12em",
+                      textTransform: "uppercase"
+                    },
+                    children: t
+                  }
+                ) : null,
+                /* @__PURE__ */ w(
+                  "h1",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 60,
+                      fontWeight: 700,
+                      letterSpacing: "-0.045em",
+                      lineHeight: 0.96,
+                      whiteSpace: "nowrap"
+                    },
+                    children: e
+                  }
+                ),
+                r ? /* @__PURE__ */ w(
+                  "div",
+                  {
+                    style: {
+                      maxWidth: 640,
+                      color: "color-mix(in srgb, currentColor 72%, transparent)",
+                      fontSize: 13,
+                      lineHeight: 1.55
+                    },
+                    children: r
+                  }
+                ) : null
+              ] }),
+              n || o ? /* @__PURE__ */ O(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-end",
+                    gap: 24,
+                    color: "color-mix(in srgb, currentColor 72%, transparent)",
+                    fontSize: 12,
+                    whiteSpace: "nowrap"
+                  },
+                  children: [
+                    n ? /* @__PURE__ */ w("span", { children: n }) : null,
+                    o ? /* @__PURE__ */ w("span", { children: o }) : null
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ w(
+          "div",
+          {
+            "data-pygmalion-catalog-document-body": "",
+            style: {
+              boxSizing: "border-box",
+              display: "inline-flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              gap: h,
+              padding: 48,
+              background: d
+            },
+            children: s
+          }
+        )
+      ]
+    }
+  );
+}
+function bn({
+  title: e,
+  count: t,
+  description: r,
+  children: n,
+  tone: o = "tinted"
+}) {
+  return /* @__PURE__ */ O(
+    "section",
+    {
+      "data-pygmalion-catalog-section": "",
+      style: {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        width: "max-content",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 18,
+        padding: o === "tinted" ? 24 : 0,
+        background: o === "tinted" ? ae : "transparent"
+      },
+      children: [
+        /* @__PURE__ */ O("header", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
+          /* @__PURE__ */ w(
+            "h2",
+            {
+              style: {
+                margin: 0,
+                fontSize: 15,
+                fontWeight: 700,
+                letterSpacing: "-0.01em"
+              },
+              children: e
+            }
+          ),
+          typeof t == "number" ? /* @__PURE__ */ w("span", { style: { color: _, fontSize: 11 }, children: t }) : null
+        ] }),
+        r ? /* @__PURE__ */ w("div", { style: { marginTop: -10, color: _, fontSize: 11 }, children: r }) : null,
+        n
+      ]
+    }
+  );
+}
+function Sn({
+  rows: e,
+  columns: t,
+  cornerLabel: r,
+  renderCell: n,
+  renderRowLabel: o = (d) => d,
+  renderColumnLabel: s = (d) => d,
+  boundary: a = !0,
+  cellStyle: c
+}) {
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      "data-pygmalion-catalog-matrix": "",
+      style: {
+        boxSizing: "border-box",
+        display: "inline-block",
+        width: "max-content",
+        padding: a ? 16 : 0,
+        border: a ? `1px dashed ${Qt}` : void 0,
+        borderRadius: a ? 4 : void 0
+      },
+      children: /* @__PURE__ */ O(
+        "table",
+        {
+          style: {
+            width: "max-content",
+            borderCollapse: "separate",
+            borderSpacing: 0
+          },
+          children: [
+            /* @__PURE__ */ w("thead", { children: /* @__PURE__ */ O("tr", { children: [
+              /* @__PURE__ */ w(
+                "th",
+                {
+                  style: {
+                    padding: "0 16px 12px 0",
+                    color: _,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    textAlign: "left",
+                    whiteSpace: "nowrap"
+                  },
+                  children: r
+                }
+              ),
+              t.map((d) => /* @__PURE__ */ w(
+                "th",
+                {
+                  style: {
+                    padding: "0 16px 12px",
+                    color: _,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    textAlign: "center",
+                    whiteSpace: "nowrap"
+                  },
+                  children: s(d)
+                },
+                d
+              ))
+            ] }) }),
+            /* @__PURE__ */ w("tbody", { children: e.map((d) => /* @__PURE__ */ O("tr", { children: [
+              /* @__PURE__ */ w(
+                "th",
+                {
+                  style: {
+                    padding: "12px 16px 12px 0",
+                    color: _,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    textAlign: "left",
+                    whiteSpace: "nowrap"
+                  },
+                  children: o(d)
+                }
+              ),
+              t.map((h) => /* @__PURE__ */ w(
+                "td",
+                {
+                  style: {
+                    padding: "12px 16px",
+                    textAlign: "center",
+                    verticalAlign: "middle",
+                    ...c
+                  },
+                  children: n(d, h)
+                },
+                h
+              ))
+            ] }, d)) })
+          ]
+        }
+      )
+    }
+  );
+}
+function Xt(e) {
+  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "").toLowerCase() || "page";
+}
+function Be(e, t, r = "PygmalionCatalog") {
+  const n = (o) => Xt(o).replace(/-/g, "_");
+  return `${r}_${n(e)}_${n(t)}`;
+}
+function je(e, t) {
+  return {
+    id: e.id,
+    name: e.name,
+    section: e.section,
+    pageId: t,
+    sourcePath: e.sourcePath,
+    codeName: e.codeName,
+    description: e.description
+  };
+}
+function Ue(e) {
+  const t = /* @__PURE__ */ new Set();
+  for (const r of e) {
+    if (t.has(r.id))
+      throw new Error(`Duplicate design catalog item id: ${r.id}`);
+    t.add(r.id);
+  }
+}
+function Yt(e, t, r) {
+  return typeof e == "function" ? e(t, r) : e;
+}
+function Zt({
+  page: e,
+  items: t,
+  renderPreview: r,
+  secondaryLabel: n,
+  minimumColumnWidth: o
+}) {
+  return /* @__PURE__ */ O(
+    "section",
+    {
+      "data-pygmalion-catalog-page": e.id,
+      "data-pygmalion-content-bounds": "",
+      style: {
+        boxSizing: "border-box",
+        display: "inline-block",
+        width: "max-content",
+        padding: 32,
+        color: ce,
+        background: ae,
+        fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ O("header", { style: { marginBottom: 24 }, children: [
+          /* @__PURE__ */ w("h1", { style: { margin: 0, fontSize: 24, lineHeight: 1.35 }, children: e.name }),
+          /* @__PURE__ */ O("p", { style: { margin: "6px 0 0", color: _, fontSize: 13 }, children: [
+            t.length,
+            " assets"
+          ] })
+        ] }),
+        /* @__PURE__ */ w(
+          "div",
+          {
+            style: {
+              display: "inline-grid",
+              gridTemplateColumns: "repeat(6, max-content)",
+              gap: 16
+            },
+            children: t.map((s) => /* @__PURE__ */ O(
+              "article",
+              {
+                "data-pygmalion-catalog-item": s.id,
+                style: {
+                  minWidth: o,
+                  width: o,
+                  padding: 16,
+                  border: `1px solid ${me}`,
+                  borderRadius: 12,
+                  background: ie
+                },
+                children: [
+                  /* @__PURE__ */ w(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        minHeight: 64,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        overflow: "hidden"
+                      },
+                      children: r(s)
+                    }
+                  ),
+                  /* @__PURE__ */ w(
+                    "div",
+                    {
+                      style: {
+                        marginTop: 12,
+                        overflow: "hidden",
+                        fontSize: 13,
+                        fontWeight: 600,
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      title: s.name,
+                      children: s.name
+                    }
+                  ),
+                  n ? /* @__PURE__ */ w("div", { style: { marginTop: 4, color: _, fontSize: 11, lineHeight: 1.45 }, children: n(s) }) : s.codeName ? /* @__PURE__ */ w(
+                    "div",
+                    {
+                      style: {
+                        marginTop: 4,
+                        overflow: "hidden",
+                        color: _,
+                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                        fontSize: 11,
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      title: s.codeName,
+                      children: s.codeName
+                    }
+                  ) : null
+                ]
+              },
+              s.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function vn(e) {
+  Ue(e.items);
+  const t = /* @__PURE__ */ new Map();
+  for (const o of e.items) {
+    const s = e.pageFor(o), a = t.get(s.id);
+    if (a) {
+      if (a.page.name !== s.name || a.page.section !== s.section)
+        throw new Error(`Conflicting design catalog page descriptor: ${s.id}`);
+      a.items.push(o);
+      continue;
+    }
+    t.set(s.id, {
+      page: s,
+      items: [o],
+      registryName: Be(
+        e.kind,
+        s.id,
+        e.registryPrefix
+      )
+    });
+  }
+  const r = {}, n = [];
+  for (const o of t.values()) {
+    const s = () => /* @__PURE__ */ w(
+      Zt,
+      {
+        page: o.page,
+        items: o.items,
+        renderPreview: e.renderPreview,
+        secondaryLabel: e.secondaryLabel,
+        minimumColumnWidth: e.minimumColumnWidth ?? 152
+      }
+    );
+    r[o.registryName] = {
+      component: s,
+      children: "none"
+    };
+    const a = Yt(e.frame, o.page, o.items);
+    n.push({
+      ...o.page,
+      componentName: o.registryName,
+      width: (a == null ? void 0 : a.width) ?? 1,
+      height: (a == null ? void 0 : a.height) ?? 1,
+      frameSizeMode: a ? "fixed" : "content"
+    });
+  }
+  return {
+    registry: r,
+    collection: {
+      expectedCount: e.expectedCount ?? e.items.length,
+      assets: e.items.map((o) => je(o, e.pageFor(o).id)),
+      pages: n
+    }
+  };
+}
+function en(e, t = 60) {
+  const r = Object.entries((e == null ? void 0 : e.props) ?? {}).filter(([, c]) => c.length > 0).sort(([c, d], [h, u]) => u.length - d.length || c.localeCompare(h)), n = r[0], o = r[1], s = Math.max(1, (n == null ? void 0 : n[1].length) ?? 1), a = o == null ? void 0 : o[1].slice(0, Math.max(1, Math.floor(t / s)));
+  return {
+    row: n,
+    column: o ? [o[0], a ?? []] : void 0,
+    fixed: r.slice(2).map(([c, d]) => [c, d[0]]),
+    additional: r.slice(2)
+  };
+}
+function tn(e, t, r, n) {
+  return {
+    ...e.defaultProps,
+    ...Object.fromEntries(t.fixed),
+    ...t.row && r ? { [t.row[0]]: r } : {},
+    ...t.column && n ? { [t.column[0]]: n } : {}
+  };
+}
+function nn({
+  item: e,
+  entry: t,
+  maxVariantCells: r
+}) {
+  var c, d;
+  if (!t)
+    return /* @__PURE__ */ O(
+      "section",
+      {
+        "data-pygmalion-catalog-component": e.id,
+        "data-pygmalion-content-bounds": "",
+        style: {
+          boxSizing: "border-box",
+          display: "inline-block",
+          width: "max-content",
+          padding: 32,
+          color: ce,
+          background: ae
+        },
+        children: [
+          /* @__PURE__ */ w("strong", { children: e.name }),
+          /* @__PURE__ */ w("p", { style: { color: _ }, children: "The component is not registered." })
+        ]
+      }
+    );
+  const n = en(t, r), o = ((c = n.row) == null ? void 0 : c[1]) ?? [void 0], s = ((d = n.column) == null ? void 0 : d[1]) ?? [void 0], a = t.component;
+  return /* @__PURE__ */ O(
+    "section",
+    {
+      "data-pygmalion-catalog-component": e.id,
+      "data-pygmalion-content-bounds": "",
+      style: {
+        boxSizing: "border-box",
+        display: "inline-block",
+        width: "max-content",
+        padding: 32,
+        color: ce,
+        background: ae,
+        fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ O("header", { style: { marginBottom: 24 }, children: [
+          /* @__PURE__ */ w("h1", { style: { margin: 0, fontSize: 24 }, children: e.name }),
+          e.sourcePath ? /* @__PURE__ */ w("p", { style: { margin: "6px 0 0", color: _, fontSize: 12 }, children: e.sourcePath }) : null
+        ] }),
+        /* @__PURE__ */ w(
+          "div",
+          {
+            style: {
+              display: "inline-grid",
+              gridTemplateColumns: `repeat(${s.length}, max-content)`,
+              gap: 12
+            },
+            children: o.flatMap(
+              (h) => s.map((u) => {
+                const b = tn(t, n, h, u), P = [
+                  n.row && h ? `${n.row[0]}=${h}` : "",
+                  n.column && u ? `${n.column[0]}=${u}` : ""
+                ].filter(Boolean).join(" · ");
+                return /* @__PURE__ */ O(
+                  "article",
+                  {
+                    style: {
+                      width: "max-content",
+                      padding: 16,
+                      border: `1px solid ${me}`,
+                      borderRadius: 10,
+                      background: ie
+                    },
+                    children: [
+                      P ? /* @__PURE__ */ w("div", { style: { marginBottom: 12, color: _, fontSize: 11 }, children: P }) : null,
+                      /* @__PURE__ */ w("div", { style: { display: "flex", minHeight: 44, alignItems: "center" }, children: xe(
+                        a,
+                        b,
+                        t.children === "text" ? t.defaultChildren ?? e.name : void 0
+                      ) })
+                    ]
+                  },
+                  `${h ?? "default"}:${u ?? "default"}`
+                );
+              })
+            )
+          }
+        ),
+        n.additional.map(([h, u]) => /* @__PURE__ */ O("section", { style: { marginTop: 20 }, children: [
+          /* @__PURE__ */ w("h2", { style: { margin: "0 0 10px", color: _, fontSize: 12 }, children: h }),
+          /* @__PURE__ */ w("div", { style: { display: "flex", flexWrap: "wrap", gap: 12 }, children: u.map((b) => /* @__PURE__ */ O(
+            "article",
+            {
+              style: {
+                padding: 16,
+                border: `1px solid ${me}`,
+                borderRadius: 10,
+                background: ie
+              },
+              children: [
+                /* @__PURE__ */ w("div", { style: { marginBottom: 12, color: _, fontSize: 11 }, children: b }),
+                xe(
+                  a,
+                  { ...t.defaultProps, [h]: b },
+                  t.children === "text" ? t.defaultChildren ?? e.name : void 0
+                )
+              ]
+            },
+            b
+          )) })
+        ] }, h))
+      ]
+    }
+  );
+}
+function In(e) {
+  Ue(e.items);
+  const t = {}, r = [], n = [], o = e.maxVariantCells ?? 60;
+  for (const s of e.items) {
+    const a = Be(
+      e.kind,
+      s.id,
+      e.registryPrefix
+    ), c = e.registry[s.name], d = () => /* @__PURE__ */ w(
+      nn,
+      {
+        item: s,
+        entry: c,
+        maxVariantCells: o
+      }
+    );
+    t[a] = { component: d, children: "none" }, r.push({
+      id: s.id,
+      name: s.name,
+      section: s.section,
+      componentName: a,
+      // The seed exists only long enough to mount the intrinsic max-content
+      // catalog root. The editor replaces it with actual rendered DOM bounds.
+      width: 1,
+      height: 1,
+      frameSizeMode: "content"
+    }), n.push(je(s, s.id));
+  }
+  return {
+    registry: t,
+    collection: {
+      expectedCount: e.expectedCount ?? e.items.length,
+      assets: n,
+      pages: r
+    }
+  };
+}
+const Ae = /^[a-f0-9]{64}$/, rn = /^\/__pygmalion-qa\/artifacts\/[A-Za-z0-9_-]{8,120}\.png$/, on = /^p\d+$/;
+function ge(e) {
+  return typeof e == "string" && rn.test(e) ? e : void 0;
+}
+function Oe(e, t) {
+  const r = new URL(e, t);
+  return r.search = "", r.hash = "", r.pathname.endsWith("/") || (r.pathname = `${r.pathname}/`), r.href;
+}
+function fe(e) {
+  if (!e || typeof e != "object" || Array.isArray(e)) return null;
+  const t = e;
+  return typeof t.domStructureHash != "string" || !Ae.test(t.domStructureHash) || typeof t.screenshotHash != "string" || !Ae.test(t.screenshotHash) ? null : {
+    domStructureHash: t.domStructureHash,
+    screenshotHash: t.screenshotHash,
+    ...ge(t.screenshotUrl) ? { screenshotUrl: ge(t.screenshotUrl) } : {}
+  };
+}
+function $e(e) {
+  if (!e || typeof e != "object" || Array.isArray(e)) return null;
+  const t = e;
+  return !Number.isSafeInteger(t.width) || !Number.isSafeInteger(t.height) || Number(t.width) < 1 || Number(t.height) < 1 || Number(t.width) > 65536 || Number(t.height) > 65536 ? null : { width: Number(t.width), height: Number(t.height) };
+}
+function sn(e) {
+  if (!e || typeof e != "object" || Array.isArray(e)) return null;
+  const t = e, r = $e(t.before), n = $e(t.after);
+  if (!r || !n || !Number.isSafeInteger(t.changedPixels) || !Number.isSafeInteger(t.totalPixels) || Number(t.changedPixels) < 0 || Number(t.totalPixels) < 1 || Number(t.changedPixels) > Number(t.totalPixels) || typeof t.threshold != "number" || !Number.isFinite(t.threshold) || t.threshold < 0 || t.threshold > 1)
+    return null;
+  const o = t.heatmapUrl == null ? null : ge(t.heatmapUrl) ?? null;
+  return {
+    before: r,
+    after: n,
+    dimensionsMatch: r.width === n.width && r.height === n.height,
+    changedPixels: Number(t.changedPixels),
+    totalPixels: Number(t.totalPixels),
+    diffRatio: Number(t.changedPixels) / Number(t.totalPixels),
+    threshold: t.threshold,
+    heatmapUrl: o
+  };
+}
+function an(e, t) {
+  if (!e || typeof e != "object" || Array.isArray(e)) return null;
+  const r = e;
+  if (typeof r.id != "string" || !r.id) return null;
+  const n = fe(r), o = fe(r.before) ?? n;
+  if (!o) return null;
+  const s = fe(r.after);
+  if (t === "changed" && !s) return null;
+  const a = s ? sn(r.pixelDiff) : null;
+  return {
+    id: r.id,
+    before: o,
+    ...s ? { after: s } : {},
+    ...s ? {
+      domChanged: o.domStructureHash !== s.domStructureHash,
+      screenshotChanged: o.screenshotHash !== s.screenshotHash
     } : {},
-    ...h ? { pixelDiff: h } : {}
+    ...a ? { pixelDiff: a } : {}
   };
 }
-function ke(r, e = []) {
-  const s = new Set(e), i = s.size > 0, t = /* @__PURE__ */ new Set(), d = [
-    ...r.styles.map((h) => h.affectedFrames ?? []),
-    ...r.texts.map((h) => h.affectedFrames ?? []),
-    ...r.operations.map((h) => h.affectedFrames ?? [])
+function cn(e, t = []) {
+  const r = new Set(t), n = r.size > 0, o = /* @__PURE__ */ new Set(), s = [
+    ...e.styles.map((a) => a.affectedFrames ?? []),
+    ...e.texts.map((a) => a.affectedFrames ?? []),
+    ...e.operations.map((a) => a.affectedFrames ?? [])
   ];
-  for (const h of d)
-    for (const u of h) {
-      if (i && _e.test(u.id) && !s.has(u.id))
+  for (const a of s)
+    for (const c of a) {
+      if (n && on.test(c.id) && !r.has(c.id))
         throw new Error(
-          `"Impact Screen"${u.name}"This internal editor ID (${u.id}) is used. A canonical screen ID is required.`
+          `"Impact Screen"${c.name}"This internal editor ID (${c.id}) is used. A canonical screen ID is required.`
         );
-      !u.id || i && !s.has(u.id) || t.add(u.id);
+      !c.id || n && !r.has(c.id) || o.add(c.id);
     }
-  return [...t].sort();
+  return [...o].sort();
 }
-async function ie(r, e, s) {
-  const i = await r(`${e.replace(/\/$/, "")}/capture`, {
+async function Me(e, t, r) {
+  const n = await e(`${t.replace(/\/$/, "")}/capture`, {
     method: "POST",
     headers: { "content-type": "application/json" },
-    body: JSON.stringify(s)
-  }), t = await i.json();
-  if (!i.ok || t.ok === !1)
+    body: JSON.stringify(r)
+  }), o = await n.json();
+  if (!n.ok || o.ok === !1)
     throw new Error(
-      typeof t.error == "string" ? t.error : `Pygmalion visual QA capture failed (${i.status})`
+      typeof o.error == "string" ? o.error : `Pygmalion visual QA capture failed (${n.status})`
     );
-  if (typeof t.baselineId != "string" || !t.baselineId)
+  if (typeof o.baselineId != "string" || !o.baselineId)
     throw new Error("Pygmalion visual QA response has no baselineId");
-  const d = Array.isArray(t.frames) ? t.frames.map((c) => Fe(c, s.phase)).filter((c) => c != null) : [], h = Array.isArray(t.failures) ? t.failures.map((c) => {
-    if (!c || typeof c != "object" || Array.isArray(c)) return null;
-    const g = c;
-    return typeof g.id == "string" && typeof g.error == "string" ? { id: g.id, error: g.error } : null;
-  }).filter((c) => c != null) : [], u = new Set(s.frameIds), I = new Set(d.map((c) => c.id)).size === d.length && d.every((c) => u.has(c.id)) && h.every((c) => u.has(c.id));
+  const s = Array.isArray(o.frames) ? o.frames.map((u) => an(u, r.phase)).filter((u) => u != null) : [], a = Array.isArray(o.failures) ? o.failures.map((u) => {
+    if (!u || typeof u != "object" || Array.isArray(u)) return null;
+    const b = u;
+    return typeof b.id == "string" && typeof b.error == "string" ? { id: b.id, error: b.error } : null;
+  }).filter((u) => u != null) : [], c = new Set(r.frameIds), h = new Set(s.map((u) => u.id)).size === s.length && s.every((u) => c.has(u.id)) && a.every((u) => c.has(u.id));
   return {
-    phase: s.phase,
-    baselineId: t.baselineId,
-    complete: t.complete !== !1 && I && h.length === 0 && d.length === s.frameIds.length,
-    frames: d,
-    failures: h
+    phase: r.phase,
+    baselineId: o.baselineId,
+    complete: o.complete !== !1 && h && a.length === 0 && s.length === r.frameIds.length,
+    frames: s,
+    failures: a
   };
 }
-const G = {
+const ue = {
   mirror: "/__pygmalion-dev-control",
   sessions: "/__pygmalion-design-session",
   inspect: "/__pygmalion-inspect"
-}, $e = "pygmalion.designSessionId", Ce = "/__pygmalion-qa", J = /* @__PURE__ */ new Map();
-function ae() {
-  var r;
-  return typeof window < "u" && ((r = window.crypto) != null && r.randomUUID) ? window.crypto.randomUUID() : `pygmalion-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}, ln = "pygmalion.designSessionId", dn = "/__pygmalion-qa", ne = /* @__PURE__ */ new Map();
+function Te() {
+  var e;
+  return typeof window < "u" && ((e = window.crypto) != null && e.randomUUID) ? window.crypto.randomUUID() : `pygmalion-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
-function je(r, e) {
+function fn(e, t) {
+  if (e) return e;
+  const r = ne.get(t);
   if (r) return r;
-  const s = J.get(e);
-  if (s) return s;
   try {
-    const i = window.localStorage.getItem(e);
-    if (i)
-      return J.set(e, i), i;
-    const t = ae();
-    return window.localStorage.setItem(e, t), J.set(e, t), t;
+    const n = window.localStorage.getItem(t);
+    if (n)
+      return ne.set(t, n), n;
+    const o = Te();
+    return window.localStorage.setItem(t, o), ne.set(t, o), o;
   } catch {
-    const i = ae();
-    return J.set(e, i), i;
+    const n = Te();
+    return ne.set(t, n), n;
   }
 }
-async function O(r) {
-  const e = await r.json();
-  if (!r.ok) throw new Error(e.error ?? `Pygmalion request failed (${r.status})`);
-  return e;
+async function L(e) {
+  const t = await e.json();
+  if (!e.ok) throw new Error(t.error ?? `Pygmalion request failed (${e.status})`);
+  return t;
 }
-function Je(r = {}) {
-  var $, C, q, Y, W;
+function xn(e = {}) {
+  var G, x, B, k, Q;
   const {
-    sessionId: e,
-    sessionStorageKey: s = $e,
-    autoStart: i = !0,
-    fetcher: t = fetch,
-    formatApplyMessage: d
-  } = r, h = (($ = r.endpoints) == null ? void 0 : $.mirror) ?? G.mirror, u = ((C = r.endpoints) == null ? void 0 : C.sessions) ?? G.sessions, A = ((q = r.endpoints) == null ? void 0 : q.inspect) ?? G.inspect, I = r.visualQa != null, c = ((Y = r.visualQa) == null ? void 0 : Y.endpoint) ?? Ce, g = JSON.stringify(((W = r.visualQa) == null ? void 0 : W.eligibleFrameIds) ?? []), x = ee(
-    () => JSON.parse(g),
-    [g]
-  ), H = ee(
-    () => je(e, s),
-    [e, s]
-  ), [S, F] = Q({
+    sessionId: t,
+    sessionStorageKey: r = ln,
+    autoStart: n = !0,
+    fetcher: o = fetch,
+    formatApplyMessage: s
+  } = e, a = ((G = e.endpoints) == null ? void 0 : G.mirror) ?? ue.mirror, c = ((x = e.endpoints) == null ? void 0 : x.sessions) ?? ue.sessions, d = ((B = e.endpoints) == null ? void 0 : B.inspect) ?? ue.inspect, h = e.visualQa != null, u = ((k = e.visualQa) == null ? void 0 : k.endpoint) ?? dn, b = JSON.stringify(((Q = e.visualQa) == null ? void 0 : Q.eligibleFrameIds) ?? []), P = Pe(
+    () => JSON.parse(b),
+    [b]
+  ), E = Pe(
+    () => fn(t, r),
+    [t, r]
+  ), [m, N] = te({
     state: "idle",
     commit: null,
     shortCommit: null,
@@ -154,309 +1771,345 @@ function Je(r = {}) {
     warning: null,
     error: null,
     appOrigin: null
-  }), [n, k] = Q(null), [R, D] = Q(null), E = re(null), y = re(null), T = j(
-    async (o = !0) => {
-      if (E.current) return E.current;
-      const a = (async () => {
-        F((l) => ({ ...l, state: "syncing", error: null }));
+  }), [p, $] = te(null), [R, T] = te(null), M = Ee(null), A = Ee(null), S = Z(
+    async (v = !0) => {
+      if (M.current) return M.current;
+      const g = (async () => {
+        N((I) => ({ ...I, state: "syncing", error: null }));
         try {
-          let l = await t(`${h}/${o ? "refresh" : "status"}`, {
-            method: o ? "POST" : "GET"
-          }), f = await O(l);
-          const w = Date.now();
-          for (; !o && f.state === "syncing" && Date.now() - w < 12e4; )
-            await new Promise((P) => window.setTimeout(P, 500)), l = await t(`${h}/status`), f = await O(l);
-          if (f.state !== "ready" || !f.appOrigin || !f.commit)
-            throw new Error(f.error ?? "Pygmalion could not prepare the source preview");
-          const m = await O(
-            await t(`${u}/open`, {
+          let I = await o(`${a}/${v ? "refresh" : "status"}`, {
+            method: v ? "POST" : "GET"
+          }), i = await L(I);
+          const l = Date.now();
+          for (; !v && i.state === "syncing" && Date.now() - l < 12e4; )
+            await new Promise((D) => window.setTimeout(D, 500)), I = await o(`${a}/status`), i = await L(I);
+          if (i.state !== "ready" || !i.appOrigin || !i.commit)
+            throw new Error(i.error ?? "Pygmalion could not prepare the source preview");
+          const f = await L(
+            await o(`${c}/open`, {
               method: "POST",
               headers: { "content-type": "application/json" },
-              body: JSON.stringify({ sessionId: H, baseDevSha: f.commit })
+              body: JSON.stringify({ sessionId: E, baseDevSha: i.commit })
             })
           );
-          if (!m.ok || !m.session)
-            throw new Error(m.error ?? "Pygmalion could not open the design session");
-          let b = m.session;
-          if (b.branchName) {
-            const P = await O(
-              await t(`${u}/check`, {
+          if (!f.ok || !f.session)
+            throw new Error(f.error ?? "Pygmalion could not open the design session");
+          let y = f.session;
+          if (y.branchName) {
+            const D = await L(
+              await o(`${c}/check`, {
                 method: "POST",
                 headers: { "content-type": "application/json" },
-                body: JSON.stringify({ sessionId: b.id })
+                body: JSON.stringify({ sessionId: y.id })
               })
             );
-            if (!P.ok || !P.session)
-              throw new Error(P.error ?? "Pygmalion could not check the design session");
-            b = P.session;
+            if (!D.ok || !D.session)
+              throw new Error(D.error ?? "Pygmalion could not check the design session");
+            y = D.session;
           }
-          F(f), k(b), D(b.appOrigin ?? f.appOrigin);
-        } catch (l) {
-          F((f) => ({
-            ...f,
+          N(i), $(y), T(y.appOrigin ?? i.appOrigin);
+        } catch (I) {
+          N((i) => ({
+            ...i,
             state: "error",
-            error: l instanceof Error ? l.message : String(l)
+            error: I instanceof Error ? I.message : String(I)
           }));
         }
       })();
-      E.current = a;
+      M.current = g;
       try {
-        await a;
+        await g;
       } finally {
-        E.current === a && (E.current = null);
+        M.current === g && (M.current = null);
       }
     },
-    [t, h, u, H]
-  ), U = j(
-    async (o) => {
-      var m;
-      if (!n) throw new Error("Pygmalion design session is not ready");
-      const a = y.current;
-      if (a && (a.sessionId !== n.id || a.baseDevSha !== n.baseDevSha || a.revision !== n.revision || a.fingerprint !== JSON.stringify(o)))
+    [o, a, c, E]
+  ), C = Z(
+    async (v) => {
+      var f;
+      if (!p) throw new Error("Pygmalion design session is not ready");
+      const g = A.current;
+      if (g && (g.sessionId !== p.id || g.baseDevSha !== p.baseDevSha || g.revision !== p.revision || g.fingerprint !== JSON.stringify(v)))
         throw new Error("The code diff you checked is out of date. Please check the diff for the current changes again.");
-      const l = await O(
-        await t(`${u}/apply-visual`, {
+      const I = await L(
+        await o(`${c}/apply-visual`, {
           method: "POST",
           headers: { "content-type": "application/json" },
           body: JSON.stringify({
-            sessionId: n.id,
-            baseDevSha: n.baseDevSha,
-            expectedRevision: n.revision,
-            ...a ? { previewRevision: a.revision } : {},
-            changes: o
+            sessionId: p.id,
+            baseDevSha: p.baseDevSha,
+            expectedRevision: p.revision,
+            ...g ? { previewRevision: g.revision } : {},
+            changes: v
           })
         })
       );
-      if (!l.ok || !l.session)
-        throw new Error(l.error ?? "Pygmalion could not apply the visual changes");
-      k(l.session), l.session.appOrigin && D(l.session.appOrigin);
-      const f = l.applied ?? o.styles.length + o.texts.length + o.operations.length;
-      let w;
-      if (a != null && a.qaBaselineId && ((m = a.qaFrameIds) != null && m.length) && l.session.appOrigin)
+      if (!I.ok || !I.session)
+        throw new Error(I.error ?? "Pygmalion could not apply the visual changes");
+      $(I.session), I.session.appOrigin && T(I.session.appOrigin);
+      const i = I.applied ?? v.styles.length + v.texts.length + v.operations.length;
+      let l;
+      if (g != null && g.qaBaselineId && ((f = g.qaFrameIds) != null && f.length) && I.session.appOrigin)
         try {
-          w = await ie(t, c, {
+          l = await Me(o, u, {
             phase: "changed",
-            baselineId: a.qaBaselineId,
-            basePath: ne(l.session.appOrigin, window.location.origin),
-            frameIds: a.qaFrameIds
+            baselineId: g.qaBaselineId,
+            basePath: Oe(I.session.appOrigin, window.location.origin),
+            frameIds: g.qaFrameIds
           });
-        } catch (b) {
-          const P = b instanceof Error ? b.message : String(b);
-          w = {
+        } catch (y) {
+          const D = y instanceof Error ? y.message : String(y);
+          l = {
             phase: "changed",
-            baselineId: a.qaBaselineId,
+            baselineId: g.qaBaselineId,
             complete: !1,
             frames: [],
-            failures: a.qaFrameIds.map((oe) => ({ id: oe, error: P }))
+            failures: g.qaFrameIds.map((H) => ({ id: H, error: D }))
           };
         }
-      return y.current = null, {
-        applied: f,
-        branch: l.session.branchName ?? void 0,
-        integration: l.session.integration.state,
-        message: d == null ? void 0 : d(l.session, f),
-        ...w ? { qa: w } : {}
+      return A.current = null, {
+        applied: i,
+        branch: I.session.branchName ?? void 0,
+        integration: I.session.integration.state,
+        message: s == null ? void 0 : s(I.session, i),
+        ...l ? { qa: l } : {}
       };
     },
-    [t, d, c, n, u]
-  ), _ = j(
-    async (o) => {
-      var m;
-      if (!n) throw new Error("Pygmalion design session is not ready");
-      y.current = null;
-      const a = await O(
-        await t(`${u}/preview-visual`, {
+    [o, s, u, p, c]
+  ), F = Z(
+    async (v) => {
+      var f;
+      if (!p) throw new Error("Pygmalion design session is not ready");
+      A.current = null;
+      const g = await L(
+        await o(`${c}/preview-visual`, {
           method: "POST",
           headers: { "content-type": "application/json" },
           body: JSON.stringify({
-            sessionId: n.id,
-            baseDevSha: n.baseDevSha,
-            expectedRevision: n.revision,
-            changes: o
+            sessionId: p.id,
+            baseDevSha: p.baseDevSha,
+            expectedRevision: p.revision,
+            changes: v
           })
         })
       );
-      if (!a.ok || !Number.isSafeInteger(a.revision))
-        throw new Error(a.error ?? "Pygmalion could not preview the visual changes");
-      const l = I ? ke(o, x) : [];
-      let f;
-      const w = n.appOrigin ?? S.appOrigin;
-      if (l.length > 0) {
-        if (!w)
+      if (!g.ok || !Number.isSafeInteger(g.revision))
+        throw new Error(g.error ?? "Pygmalion could not preview the visual changes");
+      const I = h ? cn(v, P) : [];
+      let i;
+      const l = p.appOrigin ?? m.appOrigin;
+      if (I.length > 0) {
+        if (!l)
           throw new Error("Impact screen QA baseline preview not ready");
-        if (f = await ie(t, c, {
+        if (i = await Me(o, u, {
           phase: "baseline",
-          basePath: ne(w, window.location.origin),
-          frameIds: l
-        }), !f.complete)
+          basePath: Oe(l, window.location.origin),
+          frameIds: I
+        }), !i.complete)
           throw new Error(
-            ((m = f.failures[0]) == null ? void 0 : m.error) ?? `Failed to capture ${l.length - f.frames.length} affected frames`
+            ((f = i.failures[0]) == null ? void 0 : f.error) ?? `Failed to capture ${I.length - i.frames.length} affected frames`
           );
       }
-      return y.current = {
-        sessionId: n.id,
-        baseDevSha: n.baseDevSha,
-        revision: a.revision,
-        fingerprint: JSON.stringify(o),
-        ...f ? { qaBaselineId: f.baselineId, qaFrameIds: l } : {}
+      return A.current = {
+        sessionId: p.id,
+        baseDevSha: p.baseDevSha,
+        revision: g.revision,
+        fingerprint: JSON.stringify(v),
+        ...i ? { qaBaselineId: i.baselineId, qaFrameIds: I } : {}
       }, {
-        revision: a.revision,
-        files: Array.isArray(a.files) ? a.files : [],
-        affectedFiles: Array.isArray(a.affectedFiles) ? a.affectedFiles : [],
-        ...f ? { qa: f } : {}
+        revision: g.revision,
+        files: Array.isArray(g.files) ? g.files : [],
+        affectedFiles: Array.isArray(g.affectedFiles) ? g.affectedFiles : [],
+        ...i ? { qa: i } : {}
       };
     },
     [
-      t,
-      S.appOrigin,
-      x,
-      c,
-      n,
+      o,
+      m.appOrigin,
+      P,
       u,
-      I
+      p,
+      c,
+      h
     ]
-  ), p = j(
-    async (o) => {
-      if (o.length === 0) return { files: [] };
-      const a = await O(
-        await t(`${A}/impact`, {
+  ), j = Z(
+    async (v) => {
+      if (v.length === 0) return { files: [] };
+      const g = await L(
+        await o(`${d}/impact`, {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ componentFiles: o })
+          body: JSON.stringify({ componentFiles: v })
         })
       );
-      if (a.error || a.ok === !1)
-        throw new Error(a.error ?? "Pygmalion could not calculate source impact");
-      return { files: Array.isArray(a.files) ? a.files : [] };
+      if (g.error || g.ok === !1)
+        throw new Error(g.error ?? "Pygmalion could not calculate source impact");
+      return { files: Array.isArray(g.files) ? g.files : [] };
     },
-    [t, A]
-  ), N = j(async () => {
-    if (!(n != null && n.canRevert) || !n.headSha)
+    [o, d]
+  ), W = Z(async () => {
+    if (!(p != null && p.canRevert) || !p.headSha)
       throw new Error("There are no reversible changes applied");
-    const o = await O(
-      await t(`${u}/revert-visual`, {
+    const v = await L(
+      await o(`${c}/revert-visual`, {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({
-          sessionId: n.id,
-          baseDevSha: n.baseDevSha,
-          expectedRevision: n.revision,
-          expectedHeadSha: n.headSha
+          sessionId: p.id,
+          baseDevSha: p.baseDevSha,
+          expectedRevision: p.revision,
+          expectedHeadSha: p.headSha
         })
       })
     );
-    if (!o.ok || o.reverted !== !0 || !o.operation || o.operation.kind !== "visual-revert" || !o.session)
-      throw new Error(o.error ?? "Pygmalion could not revert the last visual change");
-    return y.current = null, k(o.session), o.session.appOrigin && D(o.session.appOrigin), {
+    if (!v.ok || v.reverted !== !0 || !v.operation || v.operation.kind !== "visual-revert" || !v.session)
+      throw new Error(v.error ?? "Pygmalion could not revert the last visual change");
+    return A.current = null, $(v.session), v.session.appOrigin && T(v.session.appOrigin), {
       reverted: !0,
-      operation: o.operation,
-      session: o.session
+      operation: v.operation,
+      session: v.session
     };
-  }, [t, n, u]);
-  B(() => {
-    i && T(!1);
-  }, [i, T]);
-  const M = (n == null ? void 0 : n.appOrigin) ?? S.appOrigin ?? R;
+  }, [o, p, c]);
+  ee(() => {
+    n && S(!1);
+  }, [n, S]);
+  const q = (p == null ? void 0 : p.appOrigin) ?? m.appOrigin ?? R;
   return {
-    mirror: S,
-    session: n,
+    mirror: m,
+    session: p,
     ready: R != null,
-    appOrigin: M,
-    previewRevision: `${(n == null ? void 0 : n.headSha) ?? (n == null ? void 0 : n.baseDevSha) ?? S.commit ?? "pending"}:${(n == null ? void 0 : n.revision) ?? 0}`,
-    refresh: T,
-    previewVisual: _,
-    inspectImpact: p,
-    applyVisual: U,
-    revertLastVisual: N
+    appOrigin: q,
+    previewRevision: `${(p == null ? void 0 : p.headSha) ?? (p == null ? void 0 : p.baseDevSha) ?? m.commit ?? "pending"}:${(p == null ? void 0 : p.revision) ?? 0}`,
+    refresh: S,
+    previewVisual: F,
+    inspectImpact: j,
+    applyVisual: C,
+    revertLastVisual: W
   };
 }
-const Qe = { editor: v, getObserverTree: ce, isObservableProp: le };
-function Be(r) {
-  v.navigateToPageByName(r);
-}
-function Me() {
-  v.openPreview();
-}
-function Le() {
-  const r = K.entries.length > 0;
-  return r && K.discardPending(), v.resetCurrentEdits() || r;
-}
-function ze({
-  registry: r,
-  tokens: e,
-  initialPages: s,
-  designImport: i,
-  onTokensChange: t,
-  appOrigin: d,
-  previewRevision: h,
-  previewCacheNamespace: u,
-  previewArtifacts: A,
-  previewConcurrency: I,
-  previewOpen: c,
-  onPreviewOpenChange: g,
-  flowCanvas: x,
-  onApply: H,
-  onDesignChange: S,
-  onInspectApply: F,
-  onInspectPreview: n,
-  onInspectImpact: k,
-  storyboardDiscovery: R = !0,
-  storyboardDiscoveryEndpoint: D = Se
+const Pn = {
+  editor: K,
+  getObserverTree: Le,
+  isObservableProp: Ge
+};
+function En(e) {
+  K.navigateToPageByName(e);
+}
+function Nn() {
+  K.openPreview();
+}
+function Cn() {
+  const e = ve.entries.length > 0;
+  return e && ve.discardPending(), K.resetCurrentEdits() || e;
+}
+function Rn({
+  registry: e,
+  tokens: t,
+  initialPages: r,
+  designImport: n,
+  onTokensChange: o,
+  appOrigin: s,
+  previewRevision: a,
+  previewCacheNamespace: c,
+  previewArtifacts: d,
+  previewArtifactEndpoint: h,
+  previewConcurrency: u,
+  previewOpen: b,
+  onPreviewOpenChange: P,
+  flowCanvas: E,
+  onApply: m,
+  onDesignChange: N,
+  onInspectApply: p,
+  onInspectPreview: $,
+  onInspectImpact: R,
+  storyboardDiscovery: T = !0,
+  storyboardDiscoveryEndpoint: M = st
 }) {
-  const [E, y] = Q(!R);
-  i && (i.assertComplete(), de(i));
-  const T = r ?? (i == null ? void 0 : i.getRegistry()), U = e ?? (i == null ? void 0 : i.getTokens()), _ = s ?? (i == null ? void 0 : i.getInitialPages());
-  return T && ue(T), U && fe(U), Oe(t ?? null), d != null && he(d), h != null && pe(h), me(u), A && _ && ge(A, {
-    namespace: u ?? "",
-    previewRevision: Ee(),
-    appOrigin: Ie(),
-    pages: _.flatMap(
-      (p) => p.route && p.importPageId ? [
+  const [A, S] = te(!T), [C, F] = te();
+  n && (n.assertComplete(), Ve(n));
+  const j = e ?? (n == null ? void 0 : n.getRegistry()), W = t ?? (n == null ? void 0 : n.getTokens()), q = r ?? (n == null ? void 0 : n.getInitialPages());
+  j && Je(j), W && We(W), at(o ?? null), s != null && Qe(s), a != null && Xe(a), Ye(c);
+  const G = C ?? d;
+  return G && q && A && Ze(G, {
+    namespace: c ?? "",
+    previewRevision: lt(),
+    appOrigin: ct(),
+    baselineEnvironment: et(),
+    allowStaleIdentity: C == null && !!h,
+    pages: q.flatMap(
+      (x) => x.route && x.importPageId ? [
         {
-          canonicalId: p.importPageId,
-          route: p.route,
-          width: p.width,
-          height: p.height,
-          environment: p.environment,
-          preset: p.preset,
-          interactions: p.interactions,
-          assertions: p.assertions
+          canonicalId: x.importPageId,
+          route: x.route,
+          width: x.width,
+          height: x.height,
+          environment: x.environment,
+          preset: x.preset,
+          interactions: x.interactions,
+          assertions: x.assertions
         }
       ] : []
     )
-  }), I != null && ye(I), Ne(g ?? null), x != null && we(x), Ae(H ?? null), Re(F ?? null), be(n ?? null), De(k ?? null), _ && v.initPagesFromComponents(_), B(() => {
-    X(S ?? null);
-    const p = ve(v);
+  }), u != null && tt(u), dt(P ?? null), E != null && nt(E), ft(m ?? null), ut(p ?? null), rt($ ?? null), pt(R ?? null), q && K.initPagesFromComponents(q), ee(() => {
+    Ie(N ?? null);
+    const x = ot(K);
     return () => {
-      p(), X(null);
+      x(), Ie(null);
     };
-  }, [S]), B(() => {
-    let p = !0;
-    return R ? (y(!1), fetch(D, {
-      headers: { accept: "application/json" },
-      cache: "no-store"
-    }).then(async (N) => {
-      if (!N.ok) throw new Error(`Storyboard discovery failed (${N.status})`);
-      return N.json();
-    }).then((N) => {
-      var $, C;
-      if (!p) return;
-      const M = (C = ($ = N.scenarios) == null ? void 0 : $.find(
-        (q) => q.id === "environment:baseline"
-      )) == null ? void 0 : C.environment;
-      L(M);
+  }, [N]), ee(() => {
+    if (F(void 0), !A || !h || !(c != null && c.trim()) || !(a != null && a.trim()))
+      return;
+    const x = new AbortController();
+    return Jt({
+      namespace: c,
+      sourceRevision: a,
+      transport: Kt({
+        endpoint: h,
+        captureBaseUrl: s
+      }),
+      signal: x.signal
+    }).then((B) => {
+      !x.signal.aborted && B.status === "accepted" && F(B.artifact);
+    }), () => x.abort();
+  }, [
+    h,
+    c,
+    a,
+    s,
+    A
+  ]), ee(() => {
+    let x = !0;
+    if (!T)
+      return Y(void 0), S(!0), () => {
+        x = !1;
+      };
+    const B = new AbortController();
+    return S(!1), Y(void 0), V(null), _e({
+      endpoint: M,
+      signal: B.signal,
+      pages: K.pages.map((k) => ({
+        ...k,
+        id: k.importPageId ?? k.id,
+        importKind: k.importKind
+      })),
+      assets: (n == null ? void 0 : n.getAssets("screens")) ?? []
+    }).then((k) => {
+      x && (Y(k.baselineEnvironment), V(k.graph));
     }).catch(() => {
-      p && L(void 0);
+      x && (Y(void 0), V(null));
     }).finally(() => {
-      p && y(!0);
+      x && S(!0);
     }), () => {
-      p = !1;
-    }) : (L(void 0), y(!0), () => {
-      p = !1;
-    });
-  }, [R, D]), B(() => {
-    c == null || c === v.previewOpen || (c ? v.openPreview({ notifyHost: !1 }) : v.closePreview({ notifyHost: !1 }));
-  }, [c]), E ? /* @__PURE__ */ Z(Pe, {}) : /* @__PURE__ */ Z(
+      x = !1, B.abort(), Y(void 0), V(null);
+    };
+  }, [
+    n,
+    r,
+    T,
+    M
+  ]), ee(() => {
+    b == null || b === K.previewOpen || (b ? K.openPreview({ notifyHost: !1 }) : K.closePreview({ notifyHost: !1 }));
+  }, [b]), A ? /* @__PURE__ */ w(it, {}) : /* @__PURE__ */ w(
     "div",
     {
       "data-pygmalion-storyboard-loading": "",
@@ -475,29 +2128,59 @@ function ze({
   );
 }
 export {
-  Ye as DESIGN_IMPORT_KINDS,
-  ze as PygmalionEditor,
-  Se as STORYBOARD_ENVIRONMENT_CONTROL,
-  We as STORYBOARD_ENVIRONMENT_QUERY,
-  Qe as __debug,
-  Ze as applyTokenOverride,
-  Ke as clearPygmalionPreviewCache,
-  Xe as createDesignImportController,
-  er as createDesignScreenCollection,
-  rr as createStoryboardRouteUrl,
-  tr as getRecommendedPygmalionPreviewConcurrency,
-  nr as getStoryboardBaselineEnvironment,
-  sr as mergeScreenPresets,
-  ir as mergeStoryboardEnvironment,
-  Be as pygmalionNavigate,
-  Me as pygmalionOpenPreview,
-  Le as pygmalionResetCurrentEdits,
-  ar as resetTokenOverrides,
-  ue as setComponentRegistry,
-  he as setPygmalionAppOrigin,
-  ye as setPygmalionPreviewConcurrency,
-  pe as setPygmalionPreviewRevision,
-  L as setStoryboardBaselineEnvironment,
-  fe as setTokens,
-  Je as usePygmalionProject
+  $n as DESIGN_IMPORT_KINDS,
+  wn as PygmalionCatalogDocument,
+  Sn as PygmalionCatalogMatrix,
+  bn as PygmalionCatalogSection,
+  Rn as PygmalionEditor,
+  st as STORYBOARD_ENVIRONMENT_CONTROL,
+  Mn as STORYBOARD_ENVIRONMENT_QUERY,
+  Pn as __debug,
+  Tn as applyTokenOverride,
+  Jt as bootstrapPreviewArtifact,
+  Dn as clearPygmalionPreviewCache,
+  In as createDesignComponentCatalog,
+  en as createDesignComponentVariantMatrix,
+  vn as createDesignGalleryCatalog,
+  kn as createDesignImportController,
+  zn as createDesignScreenCollection,
+  Kt as createPreviewArtifactHttpTransport,
+  gn as createPreviewCacheNamespace,
+  Ht as createPreviewRecipeFingerprint,
+  yn as createStoryboardCaptureRecipeIdentity,
+  yt as createStoryboardGraph,
+  Mt as createStoryboardGraphFromDiscovery,
+  _n as createStoryboardGraphViewModel,
+  Fn as createStoryboardRouteUrl,
+  Xt as designCatalogKey,
+  Be as designCatalogRegistryName,
+  Bn as expandDesignScreenCasesViewports,
+  jn as expandDesignScreenCollectionViewports,
+  Un as getRecommendedPygmalionPreviewConcurrency,
+  et as getStoryboardBaselineEnvironment,
+  ze as getStoryboardDiscoveryBaselineEnvironment,
+  Hn as getStoryboardGraph,
+  _e as loadStoryboardDiscovery,
+  Kn as mergeScreenPresets,
+  He as mergeStoryboardEnvironment,
+  mn as publishStoryboardDiscovery,
+  En as pygmalionNavigate,
+  Nn as pygmalionOpenPreview,
+  Cn as pygmalionResetCurrentEdits,
+  qn as reconstructRoutePreviewArtifactScreenshotV3,
+  Gn as reconstructRoutePreviewArtifactSnapshotV3,
+  Ln as resetTokenOverrides,
+  xt as resolveStoryboardScreenCases,
+  Je as setComponentRegistry,
+  Qe as setPygmalionAppOrigin,
+  tt as setPygmalionPreviewConcurrency,
+  Xe as setPygmalionPreviewRevision,
+  Y as setStoryboardBaselineEnvironment,
+  V as setStoryboardGraph,
+  We as setTokens,
+  ht as storyboardScreenRecipeKey,
+  Vn as subscribeStoryboardGraph,
+  xn as usePygmalionProject,
+  Vt as validatePreviewArtifactBundle,
+  Ke as validateRoutePreviewArtifactV3Browser
 };