foss-design 0.9.15 → 0.9.16

package/dist/runtime/index.js

@@ -695,12 +695,78 @@ 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();
+var SCHEME = /\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi;
+var hasScheme = (text) => /prefers-color-scheme/i.test(text);
+var themed = (text) => text.replace(
+  SCHEME,
+  (_, wanted) => wanted.toLowerCase() === theme ? "(min-width: 0px)" : "(max-width: 0px)"
+);
+var writtenMedia = /* @__PURE__ */ new WeakMap();
+function themeMediaList(media) {
+  const written = writtenMedia.get(media) ?? media.mediaText;
+  if (!hasScheme(written)) return;
+  writtenMedia.set(media, written);
+  const next = themed(written);
+  if (media.mediaText !== next) media.mediaText = next;
+}
+function themeRules(rules) {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSMediaRule) themeMediaList(rule.media);
+    const inner = rule.cssRules;
+    if (inner?.length) themeRules(inner);
+  }
+}
+function themeStylesheets() {
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      themeMediaList(sheet.media);
+      themeRules(sheet.cssRules);
+    } catch {
+    }
+  }
+}
+var nativeMatchMedia = window.matchMedia.bind(window);
+var schemeQueries = /* @__PURE__ */ new Set();
+var ThemeQuery = class extends EventTarget {
+  constructor(media) {
+    super();
+    this.media = media;
+    this.last = this.matches;
+    schemeQueries.add(this);
+  }
+  media;
+  onchange = null;
+  last;
+  get matches() {
+    return nativeMatchMedia(themed(this.media)).matches;
+  }
+  addListener(listener) {
+    if (listener) this.addEventListener("change", listener);
+  }
+  removeListener(listener) {
+    if (listener) this.removeEventListener("change", listener);
+  }
+  update() {
+    const matches = this.matches;
+    if (matches === this.last) return;
+    this.last = matches;
+    const event = new MediaQueryListEvent("change", { matches, media: this.media });
+    this.onchange?.call(this, event);
+    this.dispatchEvent(event);
+  }
+};
+window.matchMedia = (query2) => hasScheme(query2) ? new ThemeQuery(query2) : nativeMatchMedia(query2);
 function applyTheme(next) {
   theme = next;
   const root = document.documentElement;
   root.dataset.theme = next;
+  root.dataset.mode = next;
+  root.dataset.colorScheme = next;
   root.classList.toggle("dark", next === "dark");
+  root.classList.toggle("theme-dark", next === "dark");
   root.style.colorScheme = next;
+  themeStylesheets();
+  for (const query2 of schemeQueries) query2.update();
   for (const listener of themeListeners) listener();
 }
 function post(message) {
@@ -728,20 +794,138 @@ function go(target) {
 function useScreen() {
   return { canvas: config.canvas, id: config.id, props: config.props };
 }
+var px2 = (value) => Number.parseFloat(value) || 0;
+var follows = /* @__PURE__ */ new WeakMap();
+var styleKey = (el) => `${el.getAttribute("class") ?? ""}|${el.getAttribute("style") ?? ""}`;
+var stretched = [];
+function measured(el) {
+  if (el instanceof HTMLScriptElement || el instanceof HTMLStyleElement || el instanceof HTMLLinkElement) return false;
+  const style = getComputedStyle(el);
+  return style.display !== "none" && style.display !== "contents" && style.position !== "fixed";
+}
+var VIEWPORT_UNIT = /\d(?:[dsl]?vh|vb)\b/;
+function viewportHeight(el) {
+  if (el instanceof HTMLElement && VIEWPORT_UNIT.test(`${el.style.height} ${el.style.minHeight}`)) return true;
+  const walk = (rules) => {
+    for (const rule of Array.from(rules)) {
+      if (rule instanceof CSSStyleRule) {
+        const s = rule.style;
+        if (VIEWPORT_UNIT.test(`${s.height} ${s.minHeight} ${s.blockSize} ${s.minBlockSize}`)) {
+          try {
+            if (el.matches(rule.selectorText)) return true;
+          } catch {
+          }
+        }
+      }
+      const inner = rule.cssRules;
+      if (inner?.length && walk(inner)) return true;
+    }
+    return false;
+  };
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (walk(rules)) return true;
+  }
+  return false;
+}
+var GROWN = ["transition", "height", "min-height", "max-height"];
+function grow(boxes, height) {
+  const saved = boxes.map((el) => ({
+    had: el.hasAttribute("style"),
+    values: GROWN.map((name) => [el.style.getPropertyValue(name), el.style.getPropertyPriority(name)])
+  }));
+  for (const el of boxes) {
+    el.style.setProperty("transition", "none", "important");
+    el.style.setProperty("height", `${height}px`, "important");
+    el.style.setProperty("min-height", `${height}px`, "important");
+    el.style.setProperty("max-height", "none", "important");
+  }
+  const put = (el, index, at) => {
+    const [value, priority] = saved[index].values[at];
+    if (value) el.style.setProperty(GROWN[at], value, priority);
+    else el.style.removeProperty(GROWN[at]);
+  };
+  return () => {
+    boxes.forEach((el, index) => {
+      for (let at = 1; at < GROWN.length; at++) put(el, index, at);
+    });
+    void document.documentElement.offsetHeight;
+    boxes.forEach((el, index) => {
+      put(el, index, 0);
+      if (!saved[index].had && el.getAttribute("style") === "") el.removeAttribute("style");
+    });
+  };
+}
+function decide(holders, boxes) {
+  const open = boxes.filter((el) => follows.get(el)?.key !== styleKey(el));
+  if (!open.length) return;
+  const keys = open.map(styleKey);
+  const before = open.map((el) => el.getBoundingClientRect().height);
+  const tallest = Math.max(window.innerHeight, ...holders.map((el) => el.getBoundingClientRect().height));
+  const undo = grow(holders, tallest + 997);
+  const after = open.map((el) => el.getBoundingClientRect().height);
+  undo();
+  open.forEach((el, index) => {
+    const grew = after[index] - before[index] > 1;
+    const value = grew || Math.abs(px2(getComputedStyle(el).minHeight) - window.innerHeight) < 1 || viewportHeight(el);
+    follows.set(el, { key: keys[index], value });
+  });
+}
+var filling = (el, room) => Array.from(el.children).filter(
+  (child) => measured(child) && Math.abs(child.getBoundingClientRect().height - room) < 1
+);
+function contentBottom(el, room, depth) {
+  const style = getComputedStyle(el);
+  const rect = el.getBoundingClientRect();
+  const margin = px2(style.marginBottom);
+  const top = rect.top + window.scrollY;
+  const stretch = depth < 8 && Math.abs(rect.height - room) < 1 && follows.get(el)?.value === true;
+  if (!stretch || !(el instanceof HTMLElement)) return top + rect.height + margin;
+  stretched.push(el);
+  const edgeTop = px2(style.borderTopWidth) + px2(style.paddingTop);
+  const edgeBottom = px2(style.borderBottomWidth) + px2(style.paddingBottom);
+  const space = rect.height - edgeTop - edgeBottom;
+  decide([el], filling(el, space));
+  const contentTop = top + edgeTop;
+  let first = Number.POSITIVE_INFINITY;
+  let last = Number.NEGATIVE_INFINITY;
+  for (const node of Array.from(el.childNodes)) {
+    let from;
+    let to;
+    if (node instanceof Element) {
+      if (!measured(node)) continue;
+      from = node.getBoundingClientRect().top + window.scrollY - px2(getComputedStyle(node).marginTop);
+      to = contentBottom(node, space, depth + 1);
+    } else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+      const range = document.createRange();
+      range.selectNode(node);
+      const box = range.getBoundingClientRect();
+      from = box.top + window.scrollY;
+      to = box.bottom + window.scrollY;
+    } else continue;
+    first = Math.min(first, from);
+    last = Math.max(last, to);
+  }
+  const content = Number.isFinite(first) ? last - Math.max(first, contentTop) : 0;
+  return contentTop + Math.max(0, content) + edgeBottom + margin;
+}
 function contentHeight() {
   const body = document.body;
   if (!body) return 0;
   const bodyStyle = getComputedStyle(body);
+  stretched = [];
+  decide([document.documentElement, body], filling(body, window.innerHeight));
   let bottom = 0;
   for (const child of Array.from(body.children)) {
-    if (child instanceof HTMLScriptElement || child instanceof HTMLStyleElement || child instanceof HTMLLinkElement)
-      continue;
-    const style = getComputedStyle(child);
-    if (style.display === "none" || style.position === "fixed") continue;
-    const rect = child.getBoundingClientRect();
-    bottom = Math.max(bottom, rect.bottom + Number.parseFloat(style.marginBottom || "0") + window.scrollY);
+    if (!measured(child)) continue;
+    bottom = Math.max(bottom, contentBottom(child, window.innerHeight, 0));
   }
-  const extra = Number.parseFloat(bodyStyle.paddingBottom || "0") + Number.parseFloat(bodyStyle.marginBottom || "0");
+  const extra = px2(bodyStyle.paddingBottom) + px2(bodyStyle.marginBottom);
   return Math.min(Math.ceil(bottom + extra), 4e4);
 }
 function canScroll(target, dx, dy) {
@@ -773,24 +957,34 @@ function reportSize() {
 }
 function watchSize() {
   let queued = false;
+  const resize = new ResizeObserver(() => queue());
+  const observed = /* @__PURE__ */ new Set();
+  const observe = () => {
+    const want = /* @__PURE__ */ new Set([document.documentElement, document.body, ...Array.from(document.body.children)]);
+    for (const box of stretched) for (const child of Array.from(box.children)) want.add(child);
+    for (const el of observed)
+      if (!want.has(el)) {
+        resize.unobserve(el);
+        observed.delete(el);
+      }
+    for (const el of want)
+      if (!observed.has(el)) {
+        resize.observe(el);
+        observed.add(el);
+      }
+  };
   const queue = () => {
     if (queued) return;
     queued = true;
     requestAnimationFrame(() => {
       queued = false;
       reportSize();
+      observe();
     });
   };
-  const resize = new ResizeObserver(queue);
-  const observeChildren = () => {
-    resize.disconnect();
-    resize.observe(document.documentElement);
-    resize.observe(document.body);
-    for (const child of Array.from(document.body.children)) resize.observe(child);
-  };
-  observeChildren();
+  observe();
   new MutationObserver(() => {
-    observeChildren();
+    observe();
     queue();
   }).observe(document.body, { childList: true });
   window.addEventListener("load", queue);
@@ -914,6 +1108,19 @@ function boot() {
   if (booted) return;
   booted = true;
   applyTheme(theme);
+  let restyle = 0;
+  new MutationObserver(() => {
+    cancelAnimationFrame(restyle);
+    themeStylesheets();
+    restyle = requestAnimationFrame(themeStylesheets);
+  }).observe(document.head, { childList: true, subtree: true, characterData: true });
+  document.addEventListener(
+    "load",
+    (event) => {
+      if (event.target instanceof HTMLLinkElement) themeStylesheets();
+    },
+    true
+  );
   if (embedded) {
     const style = document.createElement("style");
     style.textContent = ":where(html, body) { overscroll-behavior: none; }";

package/dist/runtime/page.js

@@ -0,0 +1 @@
+"use strict";(()=>{(()=>{if(window.parent===window)return;let o=e=>window.parent.postMessage({source:"design-runtime",key:"page",...e},"*"),a=e=>{if(e.defaultPrevented||e.button>1)return;let t=e.target?.closest?.("a[href], area[href]");if(!t||t.hasAttribute("download"))return;let n=new URL(t.href,location.href);if(n.origin===location.origin){t.target&&t.target!=="_self"&&(e.preventDefault(),location.assign(n.href));return}n.protocol!=="http:"&&n.protocol!=="https:"&&n.protocol!=="mailto:"||(e.preventDefault(),o({type:"link",href:n.href,path:null,form:!1,raw:t.getAttribute("href")??""}))};window.addEventListener("click",a),window.addEventListener("auxclick",a),window.addEventListener("submit",e=>{let t=e.target;if(e.defaultPrevented||t.method==="dialog")return;e.preventDefault();let n=t.getAttribute("action")??"";o({type:"link",href:new URL(n||location.href,location.href).href,path:null,form:!0,raw:n})}),window.addEventListener("keydown",e=>{e.key==="Escape"&&!e.defaultPrevented&&o({type:"keydown",code:"Escape"})});let l=!1;window.addEventListener("message",e=>{let t=e.data;t?.source==="design-viewer"&&e.source===window.parent&&t.type==="pointer"&&(l=!0)});let r=null,i=(e,t,n)=>{if(l){if(n||e<0){o({type:"pointer",x:e,y:t,down:n});return}r||requestAnimationFrame(()=>{r&&o({type:"pointer",x:r.x,y:r.y,down:!1}),r=null}),r={x:e,y:t}}};window.addEventListener("pointermove",e=>i(e.clientX,e.clientY,!1),{capture:!0,passive:!0}),window.addEventListener("pointerdown",e=>i(e.clientX,e.clientY,!0),!0),document.addEventListener("pointerout",e=>{e.relatedTarget||(r=null,i(-1,-1,!1))})})();})();