@draftably/runtime 0.0.0-stage → 0.2.0

package/dist/viewer.js

@@ -0,0 +1,438 @@
+import { r as ce, F as ee } from "./render-ZzhO-2H6.js";
+import { f as Ee, a as ke } from "./render-ZzhO-2H6.js";
+const de = "http://www.w3.org/2000/svg", le = new Set(
+  "svg title desc metadata defs style marker g a path rect ellipse circle line polyline polygon text tspan".split(
+    " "
+  )
+), fe = new Set(
+  "aria-labelledby role id data-id data-phase data-state data-theme xmlns viewBox width height x y x1 y1 x2 y2 cx cy r rx ry d points transform fill fill-rule fill-opacity stroke stroke-opacity stroke-width stroke-linecap stroke-linejoin stroke-dasharray opacity font-family font-size font-weight text-anchor dominant-baseline dy text-decoration marker-start marker-end markerWidth markerHeight markerUnits refX refY orient class clip-path nonce href target rel".split(
+    " "
+  )
+);
+let me = 0;
+function ue(y, c) {
+  const V = new y.defaultView.DOMParser().parseFromString(c, "image/svg+xml"), s = /* @__PURE__ */ new Map();
+  for (const v of Array.from(V.querySelectorAll("text[font-family]"))) {
+    const l = (v.getAttribute("font-family") ?? "").split(",")[0].trim().replace(/^['"]|['"]$/g, ""), b = v.getAttribute("font-weight") ?? "400";
+    if (!Object.values(ee).some((o) => o.family === l && String(o.weight) === b))
+      throw new Error("Runtime SVG requested an unknown bundled font face.");
+    s.set(`${l}:${b}`, { family: l, weight: b });
+  }
+  return [...s.values()];
+}
+function we(y, c, V) {
+  const s = new y.defaultView.DOMParser().parseFromString(c, "image/svg+xml"), v = /* @__PURE__ */ new Map();
+  for (const l of Array.from(s.querySelectorAll("style"))) {
+    const b = l.textContent ?? "";
+    for (const [, o] of b.matchAll(/@font-face\s*\{([^{}]{1,200000})\}/g)) {
+      const f = /font-family\s*:\s*['"]([^'"]+)['"]/i.exec(o)?.[1], w = /font-weight\s*:\s*(\d{1,4})/i.exec(o)?.[1], p = /src\s*:\s*url\((data:font\/woff2;base64,[A-Za-z0-9+/=]+)\)/i.exec(o)?.[1];
+      !f || !w || !p || Object.values(ee).some((m) => m.family === f && String(m.weight) === w) && v.set(`${f}:${w}`, { family: f, weight: w, data: p });
+    }
+  }
+  return V.map((l) => {
+    const b = v.get(`${l.family}:${l.weight}`);
+    if (!b) throw new Error(`Embedded font ${l.family} ${l.weight} is missing.`);
+    return b;
+  });
+}
+function ge(y, c, V, s = 1e5) {
+  const v = new y.defaultView.DOMParser().parseFromString(c, "image/svg+xml");
+  if (v.querySelector("parsererror") || v.documentElement.localName !== "svg")
+    throw new Error("Runtime returned invalid SVG.");
+  const l = new Set(
+    Array.from(v.querySelectorAll("[id]"), (f) => f.getAttribute("id") ?? "")
+  );
+  let b = 0;
+  const o = (f) => {
+    if (++b > s || !le.has(f.localName))
+      throw new Error("Runtime SVG exceeded the allowed drawing vocabulary.");
+    const w = y.createElementNS(de, f.localName);
+    for (const { name: p, value: m } of Array.from(f.attributes)) {
+      if (/^on/i.test(p)) continue;
+      if (p === "href") {
+        if (f.localName !== "a") continue;
+        try {
+          const a = new URL(m, y.baseURI);
+          (a.protocol === "http:" || a.protocol === "https:") && w.setAttribute("href", a.href);
+        } catch {
+        }
+        continue;
+      }
+      if (!fe.has(p) && !/^data-[a-z0-9-]+$/.test(p)) continue;
+      const x = [...m.matchAll(/url\(#([^)]*)\)/g)].map((a) => a[1]);
+      /url\s*\(/i.test(m) && (x.length === 0 || x.some((a) => !l.has(a))) || p === "aria-labelledby" && m.split(/\s+/).some((a) => !l.has(a)) || w.setAttribute(p, m);
+    }
+    f.localName === "a" && w.getAttribute("target") === "_blank" && w.setAttribute("rel", "noopener noreferrer");
+    for (const p of Array.from(f.childNodes))
+      if (p.nodeType === 1) w.append(o(p));
+      else if (p.nodeType === 3) {
+        const m = p.nodeValue ?? "";
+        w.append(
+          y.createTextNode(
+            f.localName === "style" && V ? m.replace(/@font-face\s*\{[^{}]*\}/g, "") : m
+          )
+        );
+      }
+    return w;
+  };
+  return o(v.documentElement);
+}
+function K(y, c, V) {
+  return {
+    ok: !1,
+    reason: y,
+    diagnostics: [{ code: c, severity: "error", message: V, itemIds: [] }]
+  };
+}
+function ve(y, c = {}) {
+  const V = y?.ownerDocument?.defaultView;
+  if (!V || !(y instanceof V.HTMLElement))
+    throw new TypeError("host must be an HTMLElement.");
+  if (y.childNodes.length) throw new Error("Viewer host must be empty and exclusively owned.");
+  if ((c.execution ?? { mode: "worker" }).mode === "worker" && c.render?.links?.mode === "safe" && c.render.links.resolve)
+    throw new TypeError('A link resolver requires execution: { mode: "main" }.');
+  const s = y.ownerDocument, v = V, l = s.createElement("section");
+  l.className = "draft-viewer", c.outline !== "visible" && l.classList.add("draft-viewer--outline-hidden"), l.setAttribute("aria-label", c.label ?? "Diagram viewer");
+  const b = s.createElement("div");
+  b.className = "draft-viewer__toolbar", b.setAttribute("role", "toolbar"), b.setAttribute("aria-label", "Diagram controls");
+  const o = s.createElement("div");
+  o.className = "draft-viewer__viewport", o.tabIndex = 0, o.setAttribute("aria-label", c.label ?? "Diagram");
+  const f = s.createElement("p");
+  f.className = "draft-viewer__status", f.setAttribute("role", "status"), f.setAttribute("aria-live", "polite");
+  const w = s.createElement("ol");
+  w.className = "draft-viewer__outline", w.setAttribute("aria-label", "Diagram outline"), l.append(b, o, f, w), y.append(l);
+  const p = `draftViewer${(++me).toString(36)}${Math.random().toString(36).slice(2, 9)}`;
+  let m = 0, x = !1, a = { centerX: 0, centerY: 0, zoom: 1 }, _ = !1, u, F, q, te = 0;
+  const N = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map(), L = (e, r) => {
+    for (const t of G.get(e) ?? [])
+      try {
+        t(r);
+      } catch {
+      }
+  }, j = (e, r) => {
+    const t = s.createElement("button");
+    t.type = "button", t.textContent = e, t.setAttribute("aria-label", e), t.addEventListener("click", r), b.append(t);
+  }, re = () => {
+    if (!u) return 1;
+    const e = o.getBoundingClientRect(), [, , r, t] = u.viewBox;
+    return Math.min(e.width / r, e.height / t);
+  }, R = () => {
+    const e = o.querySelector("svg");
+    if (!e || !u) return;
+    const [r, t] = u.viewBox, S = o.getBoundingClientRect(), g = a.zoom, n = S.width / 2 - (a.centerX - r) * g, h = S.height / 2 - (a.centerY - t) * g;
+    e.style.transformOrigin = "0 0", e.style.transform = `translate(${n}px, ${h}px) scale(${g})`, e.style.width = `${u.width}px`, e.style.height = `${u.height}px`, e.style.maxWidth = "none";
+  }, Y = (e = "fit") => {
+    if (!u) return;
+    const r = o.getBoundingClientRect();
+    if (!r.width || !r.height) return;
+    const [t, S, g, n] = u.viewBox;
+    a = {
+      centerX: t + g / 2,
+      centerY: S + n / 2,
+      zoom: Math.min(1, re() * 0.92)
+    }, _ = !1, R(), L("camera", { camera: { ...a }, reason: e });
+  }, P = (e) => {
+    a.zoom = Math.max(0.02, Math.min(8, a.zoom * e)), _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+  }, ne = () => {
+    a.zoom = 1, _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+  };
+  c.toolbar !== !1 && (j("Zoom in", () => P(1.2)), j("Zoom out", () => P(1 / 1.2)), j("Fit diagram", () => Y()), j("Actual size", ne));
+  const J = new v.ResizeObserver(() => {
+    u && !o.getBoundingClientRect().width || (_ ? R() : Y("resize"));
+  });
+  J.observe(o);
+  const X = (e, r) => {
+    f.textContent = r.map((t) => t.message).join(" "), l.classList.add("draft-viewer--stale"), L("diagnostics", { revision: e, diagnostics: r, stale: !!u });
+  }, oe = async (e, r) => {
+    const t = ue(s, e);
+    if (!t.length) return [];
+    if (!s.fonts) throw new Error("The host document cannot load diagram fonts.");
+    if (r === "host") {
+      for (const n of t) {
+        const h = `${n.weight} 12px "${n.family}"`;
+        if (!(await s.fonts.load(h)).some(
+          (E) => E.family.replace(/^['"]|['"]$/g, "") === n.family && E.weight === n.weight && E.status === "loaded"
+        ) || !s.fonts.check(h))
+          throw new Error(`Host font ${n.family} ${n.weight} is unavailable.`);
+      }
+      return [];
+    }
+    const S = we(s, e, t), g = v.FontFace;
+    if (!g) throw new Error("The browser cannot load embedded diagram fonts.");
+    return Promise.all(
+      S.map(async (n) => {
+        const h = `${n.family}:${n.weight}`, C = N.get(h);
+        if (C?.status === "loaded" && Array.from(s.fonts).includes(C))
+          return { key: h, face: C };
+        const d = new g(n.family, `url("${n.data}")`, { weight: n.weight });
+        if (await d.load(), d.status !== "loaded")
+          throw new Error(`Embedded font ${n.family} ${n.weight} did not load.`);
+        return { key: h, face: d };
+      })
+    );
+  }, z = (e) => {
+    const r = q;
+    q = void 0, r && (v.clearTimeout(r.timer), r.cleanup(), r.finish(void 0, e ?? new Error("Viewer render was cancelled."))), F?.terminate(), F = void 0;
+  }, ae = (e, r, t) => (c.execution ?? { mode: "worker" }).mode === "main" ? ce(e, { ...r, signal: t }) : new Promise((S, g) => {
+    const n = ++te;
+    let h = !1;
+    const C = () => {
+      F && (F.removeEventListener("message", E), F.removeEventListener("error", W), F.removeEventListener("messageerror", U), t?.removeEventListener("abort", H));
+    }, d = (k, D) => {
+      if (h) return;
+      h = !0;
+      const i = q;
+      i?.id === n && (q = void 0, v.clearTimeout(i.timer), i.cleanup()), D ? g(D) : S(k);
+    }, E = (k) => {
+      k.data?.id === n && d(k.data.result);
+    }, W = (k) => {
+      k.preventDefault(), z(new Error(k.message || "Viewer render worker failed."));
+    }, U = () => z(new Error("Viewer render worker returned an unreadable result.")), H = () => z(new Error("Viewer render was aborted."));
+    try {
+      F ??= c.execution?.mode === "worker" && c.execution.createWorker ? c.execution.createWorker() : new Worker(new URL(
+        /* @vite-ignore */
+        "" + new URL("assets/render.worker-fWW85Tf9.js", import.meta.url).href,
+        import.meta.url
+      ), { type: "module" }), F.addEventListener("message", E), F.addEventListener("error", W), F.addEventListener("messageerror", U), t?.addEventListener("abort", H, { once: !0 });
+      const k = c.execution?.mode === "worker" ? c.execution.timeoutMs ?? 5e3 : 5e3, D = v.setTimeout(
+        () => z(new Error("Viewer render worker timed out.")),
+        k
+      );
+      q = { id: n, timer: D, finish: d, cleanup: C }, F.postMessage({ id: n, source: e, options: r });
+    } catch (k) {
+      z(
+        k instanceof Error ? k : new Error("Viewer render worker could not start.")
+      ), g(k);
+    }
+  });
+  let A;
+  const ie = (e) => {
+    const r = o.querySelector("svg"), t = r?.querySelector(":scope > rect");
+    return e === o || e === r || e === t;
+  };
+  o.addEventListener(
+    "wheel",
+    (e) => {
+      e.preventDefault(), P(e.deltaY < 0 ? 1.1 : 1 / 1.1);
+    },
+    { passive: !1 }
+  ), o.addEventListener("pointerdown", (e) => {
+    !ie(e.target) || !u || (A = {
+      pointerId: e.pointerId,
+      x: e.clientX,
+      y: e.clientY,
+      centerX: a.centerX,
+      centerY: a.centerY,
+      scale: a.zoom
+    }, o.setPointerCapture(e.pointerId));
+  }), o.addEventListener("pointermove", (e) => {
+    A && (a.centerX = A.centerX - (e.clientX - A.x) / A.scale, a.centerY = A.centerY - (e.clientY - A.y) / A.scale, _ = !0, R());
+  });
+  const Q = () => {
+    if (A) {
+      try {
+        o.releasePointerCapture(A.pointerId);
+      } catch {
+      }
+      A = void 0, L("camera", { camera: { ...a }, reason: "user" });
+    }
+  };
+  o.addEventListener("pointerup", Q), o.addEventListener("pointercancel", Q), o.addEventListener("click", (e) => {
+    const r = e.target instanceof v.Element ? e.target : null, t = r?.closest("a[href]");
+    if (t && o.contains(t)) {
+      const n = t.querySelector("[data-id]")?.getAttribute("data-id"), h = t.getAttribute("href");
+      n && h && L("link", {
+        itemId: n,
+        href: h,
+        target: t.getAttribute("target") === "_blank" ? "_blank" : "_self",
+        preventDefault: () => e.preventDefault()
+      });
+      return;
+    }
+    const S = r?.closest("[data-id]")?.getAttribute("data-id"), g = u?.items.find((n) => n.id === S);
+    g && L("itemactivate", { id: g.id, kind: g.kind, input: "pointer", revision: m });
+  }), o.addEventListener("keydown", (e) => {
+    e.target !== o || e.altKey || e.ctrlKey || e.metaKey || (e.key === "+" || e.key === "=" ? P(1.2) : e.key === "-" ? P(1 / 1.2) : e.key.toLowerCase() === "f" && Y());
+  });
+  const se = (e, r) => {
+    for (const [t, S] of B)
+      t !== e && S.resolve({ status: r, revision: t });
+  };
+  return {
+    update: (e, r = {}) => {
+      const t = ++m;
+      return x ? Promise.resolve({ status: "destroyed", revision: t }) : (se(t, "superseded"), z(new Error("Viewer update was superseded.")), new Promise((S) => {
+        let g = !1;
+        const n = (d) => {
+          if (g) return;
+          g = !0, r.signal?.removeEventListener("abort", h), B.delete(t);
+          const E = x ? { status: "destroyed", revision: t } : t !== m ? { status: "superseded", revision: t } : r.signal?.aborted ? { status: "aborted", revision: t } : d;
+          S(E);
+        }, h = () => {
+          t === m && (c.execution ?? { mode: "worker" }).mode === "worker" && z(new Error("Viewer render was aborted.")), n({ status: "aborted", revision: t });
+        };
+        if (B.set(t, { resolve: n }), r.signal?.aborted) {
+          h();
+          return;
+        }
+        r.signal?.addEventListener("abort", h, { once: !0 });
+        const C = {
+          ...c.render ?? {},
+          target: "inline",
+          idPrefix: p,
+          fonts: c.render?.fonts ?? "embed",
+          ...r.state !== void 0 ? { state: r.state } : {}
+        };
+        ae(e, C, r.signal).then(async (d) => {
+          if (x || t !== m || r.signal?.aborted) {
+            n({ status: "superseded", revision: t });
+            return;
+          }
+          if (!d.ok) {
+            X(t, d.diagnostics), n({ status: "error", revision: t, error: d });
+            return;
+          }
+          let E;
+          try {
+            E = await oe(d.value.svg, C.fonts ?? "embed");
+          } catch (i) {
+            if (x || t !== m || r.signal?.aborted) {
+              n({
+                status: r.signal?.aborted ? "aborted" : "superseded",
+                revision: t
+              });
+              return;
+            }
+            const $ = K(
+              "environment",
+              "DRAFT_FONT_UNAVAILABLE",
+              i instanceof Error ? i.message : "Diagram fonts are unavailable."
+            );
+            X(t, $.diagnostics), n({ status: "error", revision: t, error: $ });
+            return;
+          }
+          if (x || t !== m || r.signal?.aborted) {
+            n({ status: "superseded", revision: t });
+            return;
+          }
+          let W;
+          try {
+            W = ge(s, d.value.svg, C.fonts !== "host");
+          } catch (i) {
+            const $ = i instanceof Error ? i.message : "Could not build safe SVG.", M = K("internal", "DRAFT_VIEWER_DOM", $);
+            X(t, M.diagnostics), n({ status: "error", revision: t, error: M });
+            return;
+          }
+          const U = [];
+          try {
+            for (const i of E)
+              N.has(i.key) || (s.fonts.add(i.face), N.set(i.key, i.face), U.push(i));
+          } catch (i) {
+            for (const { key: M, face: Z } of U)
+              s.fonts.delete(Z), N.delete(M);
+            const $ = K(
+              "environment",
+              "DRAFT_FONT_UNAVAILABLE",
+              i instanceof Error ? i.message : "Loaded fonts could not be registered."
+            );
+            X(t, $.diagnostics), n({ status: "error", revision: t, error: $ });
+            return;
+          }
+          const H = !!u;
+          u = d.value, o.replaceChildren(W), w.replaceChildren(
+            ...u.items.map((i) => {
+              const $ = s.createElement("li"), M = s.createElement("button");
+              M.type = "button";
+              const Z = i.label.trim() || (i.kind === "edge" ? `${i.from ?? "?"} to ${i.to ?? "?"}` : i.id);
+              return M.textContent = `${i.kind}: ${Z}`, M.dataset.itemId = i.id, M.addEventListener("click", () => {
+                L("itemactivate", {
+                  id: i.id,
+                  kind: i.kind,
+                  input: "keyboard",
+                  revision: t
+                });
+                const O = Array.from(o.querySelectorAll("[data-id]")).find(
+                  (T) => T.getAttribute("data-id") === i.id
+                );
+                if (O) {
+                  const T = O.getBoundingClientRect(), I = o.getBoundingClientRect();
+                  (T.width || T.height) && I.width && I.height && (a = {
+                    centerX: a.centerX + (T.left + T.width / 2 - (I.left + I.width / 2)) / a.zoom,
+                    centerY: a.centerY + (T.top + T.height / 2 - (I.top + I.height / 2)) / a.zoom,
+                    zoom: Math.max(1, a.zoom)
+                  }, _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" }));
+                }
+              }), $.append(M), $;
+            })
+          );
+          const k = new Set(E.map((i) => i.key));
+          for (const [i, $] of N)
+            k.has(i) || (s.fonts.delete($), N.delete(i));
+          l.classList.remove("draft-viewer--stale"), f.textContent = d.diagnostics.map((i) => i.message).join(" "), !H || r.camera === "fit" ? Y() : R();
+          const D = {
+            status: "committed",
+            revision: t,
+            value: u,
+            diagnostics: d.diagnostics
+          };
+          n(D), L("render", { revision: t, value: u }), L("diagnostics", { revision: t, diagnostics: d.diagnostics, stale: !1 });
+        }).catch((d) => {
+          if (x || t !== m || r.signal?.aborted) {
+            n({
+              status: r.signal?.aborted ? "aborted" : "superseded",
+              revision: t
+            });
+            return;
+          }
+          const E = K(
+            "environment",
+            "DRAFT_VIEWER_WORKER",
+            d instanceof Error ? d.message : "Viewer render failed."
+          );
+          X(t, E.diagnostics), n({ status: "error", revision: t, error: E });
+        });
+      }));
+    },
+    on(e, r) {
+      if (x) return () => {
+      };
+      const t = G.get(e) ?? /* @__PURE__ */ new Set();
+      return t.add(r), G.set(e, t), () => t.delete(r);
+    },
+    getCamera: () => ({ ...a }),
+    setCamera(e) {
+      x || !Number.isFinite(e.centerX) || !Number.isFinite(e.centerY) || !Number.isFinite(e.zoom) || e.zoom <= 0 || (a = { ...e }, _ = !0, R(), L("camera", { camera: { ...a }, reason: "api" }));
+    },
+    fit: () => {
+      x || Y();
+    },
+    focusItem(e) {
+      if (!u?.items.some((t) => t.id === e)) return !1;
+      const r = Array.from(w.querySelectorAll("button")).find(
+        (t) => t.dataset.itemId === e
+      );
+      return r?.focus(), !!r;
+    },
+    destroy() {
+      if (!x) {
+        if (x = !0, m++, A) {
+          try {
+            o.releasePointerCapture(A.pointerId);
+          } catch {
+          }
+          A = void 0;
+        }
+        for (const [e, r] of B)
+          r.resolve({ status: "destroyed", revision: e });
+        B.clear(), z(new Error("Viewer was destroyed."));
+        for (const e of N.values()) s.fonts.delete(e);
+        N.clear(), J.disconnect(), G.clear(), y.replaceChildren(), u = void 0;
+      }
+    }
+  };
+}
+export {
+  Ee as fontMetricsVersion,
+  ve as mountViewer,
+  ke as runtimeVersion
+};

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@draftably/runtime",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "private": false,
+  "description": "Portable native Draftably SVG rendering, validation, and optional viewer.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/element.js"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/runtime/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./viewer": {
+      "types": "./dist/types/src/runtime/viewer.d.ts",
+      "import": "./dist/viewer.js"
+    },
+    "./element": {
+      "types": "./dist/types/src/runtime/element.d.ts",
+      "import": "./dist/element.js"
+    },
+    "./viewer.css": "./dist/viewer.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./browser": {
+      "types": "./dist/types/src/runtime/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=22.21.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/byronwall/draftably.git",
+    "directory": "packages/runtime"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-runtime.ts"
+  }
 }