foss-design 0.6.0 → 0.6.1

package/dist/cli.js

@@ -3693,6 +3693,7 @@ async function openFrame(page, url, options = {}) {
     }
     if (!errors.some((error) => OUTDATED_DEP.test(error))) break;
   }
+  const held = ready ? 0 : await page.evaluate(() => window.__DESIGN_HOLDS__ ?? 0).catch(() => 0);
   await page.waitForTimeout(options.settleMs ?? 700);
   const runtimeErrors = await page.evaluate(() => window.__DESIGN_ERRORS__ ?? []).catch(() => []);
   for (const error of runtimeErrors) if (!errors.includes(error)) errors.push(error);
@@ -3704,7 +3705,7 @@ async function openFrame(page, url, options = {}) {
   const unique2 = errors.filter(
     (error, index) => error && !errors.some((other, j) => j !== index && other && other.length < error.length && error.includes(other))
   );
-  return { errors: [...new Set(unique2)], ready };
+  return { errors: [...new Set(unique2)], ready, ...held ? { held } : {} };
 }
 
 // src/server/state.ts
@@ -4341,7 +4342,7 @@ async function renderFrames(jobs) {
         await page.close().catch(() => {
         });
       }
-      return { key: job.key, url: job.url, ready: report.ready, errors: report.errors, links };
+      return { key: job.key, url: job.url, ready: report.ready, held: report.held, errors: report.errors, links };
     });
   } finally {
     await browser.close();
@@ -4384,7 +4385,8 @@ async function runCheck(paths, canvases, options) {
       for (const frame of frames) {
         const ok = frame.ready && !frame.errors.length;
         print(`${ok ? green("\u2713") : red("\u2717")} ${frame.key} ${dim(frame.url)}`);
-        if (!frame.ready) print(`    ${red("did not finish rendering (no ready signal within 20s)")}`);
+        if (frame.held) print(`    ${red(`holdReady() was not released within 20s (${frame.held} still held)`)}`);
+        else if (!frame.ready) print(`    ${red("did not finish rendering (no ready signal within 20s)")}`);
         for (const error of frame.errors) print(`    ${red(error.split("\n")[0])}`);
       }
     }

package/dist/runtime/index.js

@@ -637,6 +637,7 @@ var config = window.__DESIGN__ ?? { key: "", canvas: "", id: "", props: {} };
 var embedded = window.parent !== window;
 var query = new URLSearchParams(window.location.search);
 var capture = query.has("capture");
+var frameUrl = location.pathname + location.search + location.hash;
 servePublicFolder(config.public);
 var theme = config.theme ?? (query.get("theme") === "dark" ? "dark" : "light");
 var themeListeners = /* @__PURE__ */ new Set();
@@ -741,9 +742,14 @@ function watchSize() {
   window.addEventListener("load", queue);
   queue();
 }
+var touched = false;
+var inspecting = false;
+var loaded = false;
+var signalled = false;
+var holds = 0;
 var snapshotTimer;
 function scheduleSnapshot() {
-  if (!config.snapshots || !embedded || capture) return;
+  if (!config.snapshots || !embedded || capture || touched || !signalled) return;
   clearTimeout(snapshotTimer);
   snapshotTimer = setTimeout(() => {
     const run = () => void takeSnapshot();
@@ -752,6 +758,7 @@ function scheduleSnapshot() {
   }, 1800);
 }
 async function takeSnapshot() {
+  if (touched) return;
   try {
     const { domToBlob } = await import("modern-screenshot");
     const width = window.innerWidth;
@@ -763,7 +770,7 @@ async function takeSnapshot() {
       type: "image/png",
       backgroundColor: getComputedStyle(document.body).backgroundColor
     });
-    if (!blob) return;
+    if (!blob || touched) return;
     const [canvas, id] = [config.canvas, config.id].map(encodeURIComponent);
     await fetch(`/api/snapshots/${canvas}/${id}?theme=${theme}&height=${config.autoHeight ? height : ""}`, {
       method: "POST",
@@ -820,12 +827,31 @@ function keepLinksInFrame() {
     const original = history[name].bind(history);
     history[name] = (data, unused, url) => {
       original(data, unused, url);
-      if (url === void 0 || url === null) return;
+      if (url === void 0 || url === null || !signalled) return;
       const raw = String(url);
       report(new URL(raw, location.href), false, raw, true);
     };
   }
 }
+function signalReady() {
+  if (signalled || !loaded || holds > 0) return;
+  signalled = true;
+  window.__DESIGN_READY__ = true;
+  post({ type: "ready" });
+  scheduleSnapshot();
+}
+function holdReady() {
+  holds++;
+  window.__DESIGN_HOLDS__ = holds;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    holds--;
+    window.__DESIGN_HOLDS__ = holds;
+    requestAnimationFrame(() => requestAnimationFrame(signalReady));
+  };
+}
 var booted = false;
 var hmrBound = false;
 var canvasHost = false;
@@ -844,6 +870,7 @@ function boot() {
     } else if (data.type === "inspect") {
       inspector ??= new FrameInspector(post);
       if (data.tokens) inspector.setTokens(data.tokens);
+      inspecting = !!data.on;
       if (data.on) inspector.enable();
       else inspector.disable();
     } else if (data.type === "inspect-select") inspector?.select(data.ref);
@@ -871,6 +898,19 @@ function boot() {
     if (event.key === "Escape" && !event.defaultPrevented) post({ type: "keydown", code: "Escape" });
   });
   const isModifier = (name) => name === "Meta" || name === "Control";
+  const touch = (event) => {
+    if (!event.isTrusted || inspecting) return;
+    touched = true;
+    clearTimeout(snapshotTimer);
+  };
+  window.addEventListener("pointerdown", touch, true);
+  window.addEventListener(
+    "keydown",
+    (event) => {
+      if (!isModifier(event.key) && event.key !== "Shift" && event.key !== "Alt") touch(event);
+    },
+    true
+  );
   window.addEventListener(
     "keydown",
     (event) => {
@@ -893,9 +933,8 @@ function boot() {
     recordError(String(reason?.message ?? reason ?? "Unhandled rejection"));
   });
   const ready = () => {
-    window.__DESIGN_READY__ = true;
-    post({ type: "ready" });
-    scheduleSnapshot();
+    loaded = true;
+    signalReady();
   };
   const whenBodyReady = () => {
     if (embedded) watchSize();
@@ -912,6 +951,9 @@ function hmr(hot) {
     post({ type: "updated" });
     scheduleSnapshot();
   });
+  hot.on("vite:beforeFullReload", () => {
+    History.prototype.replaceState.call(history, history.state, "", frameUrl);
+  });
   hot.on("vite:error", (payload) => {
     const err = payload.err;
     recordError(err?.message ?? "Build error");
@@ -965,6 +1007,7 @@ export {
   boot,
   go,
   hmr,
+  holdReady,
   mount,
   useScreen,
   useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Design canvases and design systems for coding agents: live, animated, clickable screens on an infinite canvas, served locally from a .design folder.",
   "type": "module",
   "license": "MIT",