foss-design 0.5.0 → 0.6.1

package/dist/runtime/index.js

@@ -467,6 +467,77 @@ var FrameInspector = class {
 };
 var SWALLOWED = ["pointerdown", "mousedown", "pointerup", "mouseup", "dblclick", "submit"];
 
+// src/runtime/public.ts
+var ATTRS = ["src", "srcset", "poster", "href", "xlink:href"];
+var LOADS_HREF = /* @__PURE__ */ new Set(["link", "image", "use", "feimage"]);
+function servePublicFolder(folder) {
+  if (!folder?.files.length) return;
+  const files = new Set(folder.files);
+  const base = new URL(folder.base, location.href);
+  const resolve = (value) => {
+    if (!value.startsWith("/") || value.startsWith("//")) return null;
+    const [, pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value) ?? [];
+    let rel;
+    try {
+      rel = decodeURIComponent(pathname.slice(1));
+    } catch {
+      return null;
+    }
+    return files.has(rel) ? new URL(pathname.slice(1), base).href + suffix : null;
+  };
+  const rewrite = (name, value) => {
+    if (name !== "srcset") return resolve(value);
+    let changed = false;
+    const next = value.split(",").map((candidate) => {
+      const [url = "", ...rest] = candidate.trim().split(/\s+/);
+      const resolved = resolve(url);
+      if (!resolved) return candidate;
+      changed = true;
+      return [resolved, ...rest].join(" ");
+    }).join(", ");
+    return changed ? next : null;
+  };
+  const applies = (element, name) => name.endsWith("href") ? LOADS_HREF.has(element.localName.toLowerCase()) : true;
+  const setAttribute = Element.prototype.setAttribute;
+  Element.prototype.setAttribute = function(name, value) {
+    const lower = name.toLowerCase();
+    const next = ATTRS.includes(lower) && applies(this, lower) ? rewrite(lower, String(value)) : null;
+    setAttribute.call(this, name, next ?? value);
+  };
+  const fix = (element) => {
+    for (const name of ATTRS) {
+      const value = element.getAttribute(name);
+      if (value === null || !applies(element, name)) continue;
+      const next = rewrite(name, value);
+      if (next !== null) setAttribute.call(element, name, next);
+    }
+  };
+  const fixTree = (root) => {
+    fix(root);
+    for (const element of root.querySelectorAll("[src], [srcset], [poster], [href]")) fix(element);
+  };
+  new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") fix(record.target);
+      for (const node of record.addedNodes) if (node.nodeType === Node.ELEMENT_NODE) fixTree(node);
+    }
+  }).observe(document, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["src", "srcset", "poster", "href"]
+  });
+  if (document.documentElement) fixTree(document.documentElement);
+  const fetch2 = window.fetch.bind(window);
+  window.fetch = (input, init) => {
+    const raw = typeof input === "string" ? input : input instanceof URL ? input.href : null;
+    let path = raw;
+    if (raw && input instanceof URL && input.origin === location.origin) path = input.pathname + input.search;
+    const resolved = path ? resolve(path) : null;
+    return fetch2(resolved ?? input, init);
+  };
+}
+
 // src/runtime/typography.tsx
 import { useEffect, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -566,6 +637,8 @@ 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();
 function applyTheme(next) {
@@ -669,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();
@@ -680,6 +758,7 @@ function scheduleSnapshot() {
   }, 1800);
 }
 async function takeSnapshot() {
+  if (touched) return;
   try {
     const { domToBlob } = await import("modern-screenshot");
     const width = window.innerWidth;
@@ -691,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",
@@ -748,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;
@@ -772,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);
@@ -799,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) => {
@@ -821,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();
@@ -840,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");
@@ -893,6 +1007,7 @@ export {
   boot,
   go,
   hmr,
+  holdReady,
   mount,
   useScreen,
   useTheme

package/dist/viewer-lib/types/src/shared/types.d.ts

@@ -370,4 +370,11 @@ export type ViewerMessage = {
     type: 'inspect-select';
     ref: number | null;
 };
+/** design.json `public` as a frame sees it. */
+export interface PublicFolder {
+    /** Where the folder's files are, relative to the frame's URL. */
+    base: string;
+    /** Its files, relative to the folder, with forward slashes. */
+    files: string[];
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.5.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",