pattern-dump 0.1.0-alpha.1 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 0.1.0-alpha.1
+## 0.1.0-alpha.2
 
 Fixes found while moving a PatternLab styleguide to Pattern Dump, and the changes they needed.
 
@@ -39,6 +39,11 @@ These can change how an existing project loads or renders:
 
 ### Fixed
 
+- A `centered` preview whose height comes from the viewport (`height: 200vh` in the base layer, a
+  percentage chain) no longer grows without bound. Content-fitting such a height is circular — the
+  frame's height feeds the content's — and the frame used to double every tick to the browser's
+  layout ceiling, showing a size like `785 × 33554428`. The run of growth is now detected, the frame
+  keeps its last steady height and the content scrolls inside it, and the Console says why.
 - SCSS edits reach the preview live when `styles.entry` is set, and edits to base-layer styles
   update live too.
 - `@import`, `@charset`, `@layer a, b` and `@namespace` kept their `;`: the next rule was being

package/README.md

@@ -4,7 +4,7 @@ A workbench for HTML and CSS design systems, and a successor to PatternLab. Writ
 Handlebars templates with SCSS, data and Markdown docs; Pattern Dump shows them live, checks them, maps
 how they relate, and publishes the result as a static site.
 
-> **Alpha (0.1.0-alpha.1).** Published under the `alpha` tag. Options and file conventions can still change
+> **Alpha (0.1.0-alpha.2).** Published under the `alpha` tag. Options and file conventions can still change
 > between releases.
 
 ## Requirements

package/dist/dev-ui/main.js

@@ -380,9 +380,9 @@ function createStore() {
   function notify() {
     for (const fn of listeners) fn();
   }
-  function persist(state) {
+  function persist(state2) {
     try {
-      localStorage.setItem(STORAGE_KEY, toJSON(state));
+      localStorage.setItem(STORAGE_KEY, toJSON(state2));
     } catch {
     }
   }
@@ -1728,6 +1728,48 @@ 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);
+    frame.dataset.pdHeight = "circular";
+    setVpProp(frame, "--vp-h", previous.steady);
+    report?.(frame);
+    return true;
+  }
+  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 resetContentHeight(frame) {
+  state.delete(frame);
+  circular.delete(frame);
+  delete frame.dataset.pdHeight;
+}
+function initContentHeight(onCircular) {
+  report = onCircular;
+}
+
 // src/stage/content-width.ts
 var measuring = /* @__PURE__ */ new WeakMap();
 var fitted = /* @__PURE__ */ new WeakMap();
@@ -1819,10 +1861,10 @@ function setWidthNow(frame, width) {
 function acceptContentWidth(frame, width, at, scroll) {
   const full = measuring.get(frame);
   if (full === void 0) {
-    const state = fitted.get(frame);
-    if (state === void 0 || scroll <= at + 1) return false;
+    const state2 = fitted.get(frame);
+    if (state2 === void 0 || scroll <= at + 1) return false;
     const parentWidth = frame.parentElement?.clientWidth ?? Infinity;
-    if (state === "measured" && scroll < parentWidth) {
+    if (state2 === "measured" && scroll < parentWidth) {
       fitted.set(frame, "widened");
       setWidthNow(frame, scroll);
     } else {
@@ -2053,6 +2095,7 @@ function initViewport(onFullscreen) {
   iframeObserver.observe(dom.iframe);
   iframeObserver.observe(dom.stageView);
   dom.iframe.addEventListener("load", () => {
+    resetContentHeight(dom.iframe);
     measureContentWidth(dom.iframe);
     updateReadout();
     syncFrameFocusListeners();
@@ -2326,6 +2369,7 @@ async function buildVariantsGallery() {
     f.addEventListener("load", () => {
       if (store.local.theme) applyThemeToIframe(f, store.local.theme);
       const h = f.contentDocument?.documentElement?.scrollHeight;
+      resetContentHeight(f);
       if (typeof h === "number" && h > 0) f.style.setProperty("--vp-h", `${h}px`);
       measureContentWidth(f);
     });
@@ -2367,6 +2411,7 @@ function renderOverview(overview) {
     f.addEventListener("load", () => {
       if (store.local.theme) applyThemeToIframe(f, store.local.theme);
       const h = f.contentDocument?.documentElement?.scrollHeight;
+      resetContentHeight(f);
       if (typeof h === "number" && h > 0) f.style.setProperty("--vp-h", `${h}px`);
       measureContentWidth(f);
     });
@@ -2748,7 +2793,10 @@ function connectHmr() {
           if (link) link.href = href;
         });
       }
-      void pdLinksLoaded().then(remeasureAll);
+      void pdLinksLoaded().then(() => {
+        document.querySelectorAll("#preview-frame, .gallery-item iframe").forEach(resetContentHeight);
+        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;
@@ -2892,11 +2940,9 @@ function listenForPreviewMessages() {
     if (data.type === "pd-height" && typeof data.height === "number") {
       const height = data.height;
       document.querySelectorAll("iframe").forEach((f) => {
-        if (f.contentWindow === e.source) {
-          const el2 = f;
-          if (el2.closest('[data-layout="full"]')) return;
-          setVpProp(el2, "--vp-h", height);
-        }
+        const frame = f;
+        if (frame.contentWindow !== e.source) return;
+        acceptContentHeight(frame, height);
       });
     } else if (data.type === "pd-width" && typeof data.width === "number" && typeof data.at === "number") {
       const { width, at } = data;
@@ -2948,6 +2994,10 @@ function mount() {
   initDom(app);
   listenForPreviewMessages();
   initContentWidth();
+  initContentHeight((frame) => {
+    const id = frame.contentDocument?.body?.dataset.componentId ?? session.current?.id ?? "preview";
+    renderConsole(`${id}: height depends on the preview's own height (a viewport-relative rule such as height: 100vh), so the frame keeps its last steady height and the content scrolls inside it.`);
+  });
   dom.searchInput.addEventListener("input", () => {
     session.searchQuery = dom.searchInput.value;
     filterTree(session.searchQuery);

package/dist/pd.js

@@ -4616,7 +4616,7 @@ import { basename as basename6, dirname as dirname9, join as join23, relative as
 // packages/cli/package.json
 var package_default = {
   name: "@pattern-dump/cli",
-  version: "0.1.0-alpha.1",
+  version: "0.1.0-alpha.2",
   private: true,
   description: "The pd command and the published pattern-dump package.",
   type: "module",

package/package.json

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