pattern-dump 0.1.0-alpha.3 → 0.2.0-alpha.0

package/dist/dev-ui/main.js

@@ -87,6 +87,14 @@ var PD_ROUTES = {
   version: "/api/version",
   /** GET → ShellClientConfig */
   config: "/api/config",
+  /** GET → StorefrontPagesResponse, on the storefront host. What `pd build` crawls for storefront pages. */
+  pages: "/api/pages",
+  /** GET → the storefront's sitemap (XML), on the storefront host; only when `storefront.url` is set. */
+  sitemap: "/sitemap.xml",
+  /** GET → robots.txt (text): the storefront's on the storefront host, the workbench's on every other host. */
+  robots: "/robots.txt",
+  /** GET → the storefront's 404 page (HTML, status 404), on the storefront host. `pd build` writes it as is. */
+  notFound: "/404.html",
   /** The shell bundle, stylesheet and vendored assets. */
   mainJs: "/_pd/main.js",
   mainCss: "/_pd/main.css",
@@ -105,7 +113,8 @@ var PD_ROUTE_PREFIX = {
   componentCss: "/_pd/components/",
   themeCss: "/_pd/themes/",
   script: "/_pd/scripts/",
-  assets: "/assets/"
+  assets: "/assets/",
+  images: "/_pd/images/"
 };
 function componentUrl(id, variant) {
   const q = variant ? `?variant=${encodeURIComponent(variant)}` : "";
@@ -137,10 +146,62 @@ function staticPathFor(liveUrl) {
     }
   }
   if (path.startsWith("/_pd/") || path.startsWith(PD_ROUTE_PREFIX.assets)) return path.slice(1);
+  if (path === PD_ROUTES.sitemap || path === PD_ROUTES.robots || path === PD_ROUTES.notFound) return path.slice(1);
   const route = path.replace(/^\/+|\/+$/g, "");
   return route ? `${route}/index.html` : "index.html";
 }
 var PD_PROTOCOL_VERSION = 1;
+var PD_GENERATION_HEADER = "X-PD-Generation";
+function generationBehind(a, b) {
+  if (!a || !b) return false;
+  const [bootA, countA] = a.split(".");
+  const [bootB, countB] = b.split(".");
+  return bootA !== bootB || Number(countA) < Number(countB);
+}
+
+// ../../packages/contracts/src/iframe-fit.ts
+function createHeightFitter(adapter) {
+  const GROWTH_FACTOR = 1.5;
+  const GROWTH_RUN = 2;
+  const state = /* @__PURE__ */ new WeakMap();
+  const circular = /* @__PURE__ */ new WeakSet();
+  const isCircularGrowth2 = (previous, measured) => previous !== void 0 && measured > previous.last * GROWTH_FACTOR && previous.run + 1 >= GROWTH_RUN;
+  return {
+    isCircularGrowth: isCircularGrowth2,
+    accept(frame, height) {
+      if (adapter.fits && !adapter.fits(frame) || circular.has(frame)) return false;
+      const previous = state.get(frame);
+      if (previous !== void 0 && isCircularGrowth2(previous, height)) {
+        circular.add(frame);
+        state.delete(frame);
+        adapter.write(frame, previous.steady);
+        if (adapter.onCircular) adapter.onCircular(frame);
+        return true;
+      }
+      const grew = previous !== void 0 && height > previous.last * GROWTH_FACTOR;
+      state.set(frame, {
+        last: height,
+        steady: grew && previous ? previous.steady : height,
+        run: grew && previous ? previous.run + 1 : 0
+      });
+      adapter.write(frame, height);
+      return true;
+    },
+    reset(frame) {
+      state.delete(frame);
+      circular.delete(frame);
+      if (adapter.onReset) adapter.onReset(frame);
+    },
+    fromMessage(event, frames) {
+      const data = event.data;
+      if (!data || data.type !== "pd-height" || typeof data.height !== "number") return null;
+      for (const frame of frames) {
+        if (frame.contentWindow === event.source) return { frame, height: data.height };
+      }
+      return null;
+    }
+  };
+}
 
 // src/core/dom.ts
 var dom = {};
@@ -380,9 +441,9 @@ function createStore() {
   function notify() {
     for (const fn of listeners) fn();
   }
-  function persist(state2) {
+  function persist(state) {
     try {
-      localStorage.setItem(STORAGE_KEY, toJSON(state2));
+      localStorage.setItem(STORAGE_KEY, toJSON(state));
     } catch {
     }
   }
@@ -1729,42 +1790,26 @@ function setVpProp(el2, prop, value) {
 }
 
 // src/stage/content-height.ts
-var GROWTH_FACTOR = 1.5;
-var GROWTH_RUN = 2;
-var state = /* @__PURE__ */ new WeakMap();
-var circular = /* @__PURE__ */ new WeakSet();
 var report = null;
-function isCircularGrowth(previous, measured) {
-  if (previous === void 0) return false;
-  return measured > previous.last * GROWTH_FACTOR && previous.run + 1 >= GROWTH_RUN;
-}
-function fitsHeight(frame) {
-  return frame.closest('[data-layout="full"]') === null;
-}
-function acceptContentHeight(frame, height) {
-  if (!fitsHeight(frame) || circular.has(frame)) return false;
-  const previous = state.get(frame);
-  if (isCircularGrowth(previous, height)) {
-    circular.add(frame);
-    state.delete(frame);
+var fitter = createHeightFitter({
+  write: (frame, height) => setVpProp(frame, "--vp-h", height),
+  // A full-page preview fills the stage: its height is CSS, never measured (it is circular by
+  // construction — the content derives its height from the frame we would derive from the content).
+  fits: (frame) => frame.closest('[data-layout="full"]') === null,
+  onCircular: (frame) => {
     frame.dataset.pdHeight = "circular";
-    setVpProp(frame, "--vp-h", previous.steady);
     report?.(frame);
-    return true;
+  },
+  onReset: (frame) => {
+    delete frame.dataset.pdHeight;
   }
-  const grew = previous !== void 0 && height > previous.last * GROWTH_FACTOR;
-  state.set(frame, {
-    last: height,
-    steady: grew ? previous.steady : height,
-    run: grew ? previous.run + 1 : 0
-  });
-  setVpProp(frame, "--vp-h", height);
-  return true;
+});
+function acceptContentHeightMessage(event, frames) {
+  const match = fitter.fromMessage(event, frames);
+  if (match) fitter.accept(match.frame, match.height);
 }
 function resetContentHeight(frame) {
-  state.delete(frame);
-  circular.delete(frame);
-  delete frame.dataset.pdHeight;
+  fitter.reset(frame);
 }
 function initContentHeight(onCircular) {
   report = onCircular;
@@ -1861,10 +1906,10 @@ function setWidthNow(frame, width) {
 function acceptContentWidth(frame, width, at, scroll) {
   const full = measuring.get(frame);
   if (full === void 0) {
-    const state2 = fitted.get(frame);
-    if (state2 === void 0 || scroll <= at + 1) return false;
+    const state = fitted.get(frame);
+    if (state === void 0 || scroll <= at + 1) return false;
     const parentWidth = frame.parentElement?.clientWidth ?? Infinity;
-    if (state2 === "measured" && scroll < parentWidth) {
+    if (state === "measured" && scroll < parentWidth) {
       fitted.set(frame, "widened");
       setWidthNow(frame, scroll);
     } else {
@@ -2291,6 +2336,42 @@ function initSplitters() {
   });
 }
 
+// src/core/generation.ts
+var newest;
+function heard(generation) {
+  if (generation && (!newest || generationBehind(newest, generation))) newest = generation;
+}
+function generationOf(res) {
+  return res.headers.get(PD_GENERATION_HEADER);
+}
+function behindHeard(generation) {
+  return generationBehind(generation, newest);
+}
+var shown = /* @__PURE__ */ new Map();
+function claim(slot, key, generation) {
+  const current = shown.get(slot);
+  if (current && current.key === key && generationBehind(generation, current.generation)) return false;
+  shown.set(slot, { key, generation });
+  return true;
+}
+async function loadDocument(slot, key, url, apply, wanted) {
+  for (; ; ) {
+    const res = await fetch(url);
+    const doc = await res.text();
+    const generation = generationOf(res);
+    if (!wanted() || !claim(slot, key, generation)) return;
+    apply(doc);
+    if (!behindHeard(generation)) return;
+  }
+}
+async function fetchDetail(componentId, variant) {
+  const res = await fetch(componentUrl(componentId, variant));
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const detail = await res.json();
+  if (session.current?.id !== componentId || !claim("detail", componentId, generationOf(res))) return null;
+  return detail;
+}
+
 // src/core/pd-links.ts
 function reconcilePdLinks(doc, orderedHrefs) {
   if (!doc) return;
@@ -2431,7 +2512,7 @@ function swapWithTransition(fn) {
     fn();
   }
 }
-async function applyComponent(detail, variant) {
+async function applyComponent(detail, variant, generation = null) {
   session.current = detail;
   session.currentVariant = variant ?? null;
   session.renderedHtmlCache = null;
@@ -2460,11 +2541,46 @@ async function applyComponent(detail, variant) {
     dom.hidePackagesCheck.checked = false;
     dom.hidePackagesCheck.dispatchEvent(new Event("change"));
   }
-  const previewDoc = variant && isKnownVariant ? await fetch(previewUrl(detail.id, variant, store.local.theme || void 0)).then((r) => r.text()) : detail.document;
-  const _html = previewDoc ?? "";
-  swapWithTransition(() => {
-    dom.iframe.srcdoc = _html;
-  });
+  claim("detail", detail.id, generation);
+  const key = `${detail.id}~${variant && isKnownVariant ? variant : ""}`;
+  const wanted = () => session.current?.id === detail.id;
+  if (variant && isKnownVariant) {
+    await loadDocument(
+      "preview",
+      key,
+      previewUrl(detail.id, variant, store.local.theme || void 0),
+      (doc) => {
+        swapWithTransition(() => {
+          dom.iframe.srcdoc = doc;
+        });
+      },
+      wanted
+    );
+  } else {
+    claim("preview", key, generation);
+    const _html = detail.document ?? "";
+    swapWithTransition(() => {
+      dom.iframe.srcdoc = _html;
+    });
+    if (behindHeard(generation)) {
+      void loadDocument(
+        "preview",
+        key,
+        previewUrl(detail.id, void 0, store.local.theme || void 0),
+        (doc) => {
+          dom.iframe.srcdoc = doc;
+        },
+        wanted
+      );
+      void fetchDetail(detail.id).then((d) => {
+        if (d) {
+          session.current = d;
+          void renderPanel();
+        }
+      }).catch(() => {
+      });
+    }
+  }
   dom.iframe.style.removeProperty("--vp-h");
   if (isDiscoRunning()) stopDisco();
   applyViewport();
@@ -2502,14 +2618,22 @@ async function swapVariant(componentId, variant) {
   dom.htmlBody.innerHTML = "";
   dom.dataBody.innerHTML = "";
   dom.variantSelect.value = variant ?? "";
-  const previewDoc = await fetch(previewUrl(componentId, variant ?? void 0, store.local.theme || void 0)).then((r) => r.text());
-  swapWithTransition(() => {
-    dom.iframe.srcdoc = previewDoc;
-  });
+  await loadDocument(
+    "preview",
+    `${componentId}~${variant ?? ""}`,
+    previewUrl(componentId, variant ?? void 0, store.local.theme || void 0),
+    (doc) => {
+      swapWithTransition(() => {
+        dom.iframe.srcdoc = doc;
+      });
+    },
+    () => session.current?.id === componentId && session.currentVariant === variant
+  );
   const dock = store.local.dock;
   if (dock.dockTab === "html") await fetchAndShowHtml();
   if (dock.dockTab === "source" && dock.sourceFacet === "data") await fetchAndShowData();
-  void fetch(componentUrl(componentId, variant ?? void 0)).then((r) => r.ok ? r.json() : Promise.reject()).then((d) => {
+  void fetchDetail(componentId, variant ?? void 0).then((d) => {
+    if (!d) return;
     session.current = d;
     session.renderedA11y = [];
     session.scanPending = store.local.dock.dockTab === "diagnostics";
@@ -2525,7 +2649,7 @@ async function navigate(componentId, variant) {
     const res = await fetch(componentUrl(componentId, variant));
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     const detail = await res.json();
-    await applyComponent(detail, variant);
+    await applyComponent(detail, variant, generationOf(res));
   } catch (e) {
     console.error("[pd] Navigate error:", e);
     showStageMessage(`Could not load \u201C${componentId}\u201D: ${e instanceof Error ? e.message : String(e)}`);
@@ -2534,7 +2658,7 @@ async function navigate(componentId, variant) {
 async function navigateUnknown(path, variant) {
   const res = await fetch(componentUrl(path, variant)).catch(() => null);
   if (res?.ok) {
-    await applyComponent(await res.json(), variant);
+    await applyComponent(await res.json(), variant, generationOf(res));
     return;
   }
   showStageMessage(`No component or folder \u201C${path}\u201D.`, closestPaths(path));
@@ -2707,6 +2831,7 @@ function connectHmr() {
     } catch {
       return;
     }
+    if ("generation" in msg) heard(msg.generation);
     if ((msg.type === "content-swap" || msg.type === "error") && store.local.panelTab === "audit") {
       refreshAudit();
     }
@@ -2723,20 +2848,23 @@ function connectHmr() {
           const tiles = Array.from(
             dom.variantsGalleryEl.querySelectorAll(".gallery-item iframe")
           );
-          await Promise.all(tiles.map(async (f) => {
+          await Promise.all(tiles.map((f) => {
             const vp = f.dataset.pdVariant || void 0;
-            const doc = await fetch(previewUrl(componentId, vp, store.local.theme || void 0)).then((r) => r.text());
-            f.srcdoc = doc;
-            console.log(
-              "%c[pd] srcdoc reloaded",
-              "color:#7ed321;font-weight:bold",
-              `\u2014 ${componentId} (${vp ?? "default"})`
-            );
+            return loadDocument(`tile:${vp ?? ""}`, `${componentId}~${vp ?? ""}`, previewUrl(componentId, vp, store.local.theme || void 0), (doc) => {
+              f.srcdoc = doc;
+              console.log(
+                "%c[pd] srcdoc reloaded",
+                "color:#7ed321;font-weight:bold",
+                `\u2014 ${componentId} (${vp ?? "default"})`
+              );
+            }, () => f.isConnected && session.current?.id === componentId);
           }));
         } else {
-          const previewDoc = await fetch(previewUrl(componentId, session.currentVariant ?? void 0, store.local.theme || void 0)).then((r) => r.text());
-          dom.iframe.srcdoc = previewDoc;
-          console.log("%c[pd] srcdoc reloaded", "color:#7ed321;font-weight:bold", `\u2014 ${componentId}`);
+          const variant = session.currentVariant;
+          await loadDocument("preview", `${componentId}~${variant ?? ""}`, previewUrl(componentId, variant ?? void 0, store.local.theme || void 0), (doc) => {
+            dom.iframe.srcdoc = doc;
+            console.log("%c[pd] srcdoc reloaded", "color:#7ed321;font-weight:bold", `\u2014 ${componentId}`);
+          }, () => session.current?.id === componentId && session.currentVariant === variant);
         }
         {
           const d = store.local.dock;
@@ -2748,7 +2876,8 @@ function connectHmr() {
             void fetchAndShowData();
           }
         }
-        void fetch(componentUrl(componentId, session.currentVariant ?? void 0)).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((d) => {
+        void fetchDetail(componentId, session.currentVariant ?? void 0).then((d) => {
+          if (!d) return;
           session.current = d;
           session.renderedA11y = [];
           session.scanPending = store.local.dock.dockTab === "diagnostics";
@@ -2785,12 +2914,20 @@ function connectHmr() {
           if (f.id === "preview-frame") return;
           if (f.closest("#variants-gallery")) return;
           const link = f.contentDocument?.querySelector(`link[data-pd-comp="${componentId}"]`);
-          if (link) link.href = href;
+          if (link) {
+            link.href = href;
+            return;
+          }
+          if (msg.cssBecameNonEmpty && dom.categoryOverview.contains(f)) f.contentWindow?.location.reload();
         });
       } else {
         document.querySelectorAll("iframe").forEach((f) => {
           const link = f.contentDocument?.querySelector(`link[data-pd-comp="${componentId}"]`);
-          if (link) link.href = href;
+          if (link) {
+            link.href = href;
+            return;
+          }
+          if (msg.cssBecameNonEmpty && dom.categoryOverview.contains(f)) f.contentWindow?.location.reload();
         });
       }
       void pdLinksLoaded().then(() => {
@@ -2798,9 +2935,11 @@ function connectHmr() {
         remeasureAll();
       });
       if (store.local.panelTab === "relationships" && session.current) {
-        void fetch(componentUrl(session.current.id)).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((d) => {
-          session.current = d;
-          return renderPanel();
+        void fetchDetail(session.current.id).then((d) => {
+          if (d) {
+            session.current = d;
+            return renderPanel();
+          }
         }).catch(() => {
         });
       }
@@ -2808,7 +2947,8 @@ function connectHmr() {
       renderConsole(`${msg.scope === "build" ? "Build" : "Render"} error \u2014 ${msg.message}`, "error");
       const errId = msg.componentId;
       if (errId && errId === session.current?.id) {
-        void fetch(componentUrl(errId)).then((r) => r.ok ? r.json() : Promise.reject()).then((d) => {
+        void fetchDetail(errId).then((d) => {
+          if (!d) return;
           session.current = d;
           session.renderedA11y = [];
           session.scanPending = store.local.dock.dockTab === "diagnostics";
@@ -2850,9 +2990,11 @@ function connectHmr() {
           if (folderPath) void navigateOverview(folderPath);
         }
         if (session.current?.id && session.componentRegistry.has(session.current.id) && store.local.panelTab === "relationships") {
-          void fetch(componentUrl(session.current.id)).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((d) => {
-            session.current = d;
-            return renderPanel();
+          void fetchDetail(session.current.id).then((d) => {
+            if (d) {
+              session.current = d;
+              return renderPanel();
+            }
           }).catch(() => {
           });
         }
@@ -2863,6 +3005,7 @@ function connectHmr() {
         `Handle collision \u2014 "${msg.handle}" is held by ${msg.incumbentPath}; ${msg.quarantinedPath} is quarantined until one is renamed`,
         "error"
       );
+    } else if (msg.type === "page-changed") {
     } else {
       const unhandled = msg;
       void unhandled;
@@ -2937,13 +3080,8 @@ function listenForPreviewMessages() {
   window.addEventListener("message", (e) => {
     const data = e.data;
     if (!data) return;
-    if (data.type === "pd-height" && typeof data.height === "number") {
-      const height = data.height;
-      document.querySelectorAll("iframe").forEach((f) => {
-        const frame = f;
-        if (frame.contentWindow !== e.source) return;
-        acceptContentHeight(frame, height);
-      });
+    if (data.type === "pd-height") {
+      acceptContentHeightMessage(e, document.querySelectorAll("iframe"));
     } else if (data.type === "pd-width" && typeof data.width === "number" && typeof data.at === "number") {
       const { width, at } = data;
       const scroll = typeof data.scroll === "number" ? data.scroll : at;

package/dist/index.js

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