foss-design 0.5.0 → 0.6.0

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,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");
+servePublicFolder(config.public);
 var theme = config.theme ?? (query.get("theme") === "dark" ? "dark" : "light");
 var themeListeners = /* @__PURE__ */ new Set();
 function applyTheme(next) {

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.0",
   "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",