@draftably/runtime 0.1.0 → 0.2.0

package/dist/types/src/runtime/element.d.ts

@@ -1,6 +1,8 @@
 import type { UpdateResult, ViewerHandle, ViewerOptions } from './viewer.js';
 export interface DraftDiagramElement extends HTMLElement {
     source: string;
+    /** Reflects the `outline` attribute. */
+    outline: 'visible' | 'hidden' | undefined;
     options: ViewerOptions;
     readonly viewer?: ViewerHandle;
     readonly updateComplete: Promise<UpdateResult | undefined>;

package/dist/types/src/runtime/viewer.d.ts

@@ -19,6 +19,11 @@ export type ViewerRenderOptions = Omit<CommonRenderOptions, 'signal' | 'state'>
 export interface ViewerOptions {
     label?: string;
     toolbar?: boolean;
+    /**
+     * The keyboard and screen-reader list of items. `'hidden'` (default) keeps it for assistive tech
+     * and shows it while it holds focus; `'visible'` always shows it under the drawing.
+     */
+    outline?: 'visible' | 'hidden';
     execution?: ViewerExecution;
     render?: ViewerRenderOptions;
 }

package/dist/viewer.css

@@ -2,6 +2,7 @@
   --dv-border: #cbd5e1;
   --dv-ink: #1e293b;
   --dv-bg: #fff;
+  position: relative;
   display: grid;
   grid-template-rows: auto minmax(8rem, 1fr) auto auto;
   box-sizing: border-box;
@@ -67,6 +68,25 @@
 .draft-viewer__outline:empty {
   display: none;
 }
+/* A hidden outline stays in the tab order and the accessibility tree. Focus shows it over the
+   bottom of the drawing, so the viewport keeps its size. */
+.draft-viewer--outline-hidden .draft-viewer__outline:not(:focus-within) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.draft-viewer--outline-hidden .draft-viewer__outline:focus-within {
+  position: absolute;
+  inset: auto 0 0;
+  background: var(--dv-bg);
+  box-shadow: 0 -4px 12px rgb(15 23 42 / 0.12);
+}
 .draft-viewer--stale .draft-viewer__status {
   color: #9a3412;
   background: #fff7ed;

package/dist/viewer.js

@@ -1,5 +1,5 @@
-import { r as ce, F as ee } from "./render-BOAZBzVa.js";
-import { f as Ee, a as ke } from "./render-BOAZBzVa.js";
+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(
     " "
@@ -13,25 +13,25 @@ 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 m = (v.getAttribute("font-family") ?? "").split(",")[0].trim().replace(/^['"]|['"]$/g, ""), b = v.getAttribute("font-weight") ?? "400";
-    if (!Object.values(ee).some((o) => o.family === m && String(o.weight) === b))
+    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(`${m}:${b}`, { family: m, weight: b });
+    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 m of Array.from(s.querySelectorAll("style"))) {
-    const b = m.textContent ?? "";
+  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 l = /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];
-      !l || !w || !p || Object.values(ee).some((f) => f.family === l && String(f.weight) === w) && v.set(`${l}:${w}`, { family: l, weight: w, data: p });
+      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((m) => {
-    const b = v.get(`${m.family}:${m.weight}`);
-    if (!b) throw new Error(`Embedded font ${m.family} ${m.weight} is missing.`);
+  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;
   });
 }
@@ -39,37 +39,37 @@ 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 m = new Set(
-    Array.from(v.querySelectorAll("[id]"), (l) => l.getAttribute("id") ?? "")
+  const l = new Set(
+    Array.from(v.querySelectorAll("[id]"), (f) => f.getAttribute("id") ?? "")
   );
   let b = 0;
-  const o = (l) => {
-    if (++b > s || !le.has(l.localName))
+  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, l.localName);
-    for (const { name: p, value: f } of Array.from(l.attributes)) {
+    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 (l.localName !== "a") continue;
+        if (f.localName !== "a") continue;
         try {
-          const a = new URL(f, y.baseURI);
+          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 = [...f.matchAll(/url\(#([^)]*)\)/g)].map((a) => a[1]);
-      /url\s*\(/i.test(f) && (x.length === 0 || x.some((a) => !m.has(a))) || p === "aria-labelledby" && f.split(/\s+/).some((a) => !m.has(a)) || w.setAttribute(p, f);
+      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);
     }
-    l.localName === "a" && w.getAttribute("target") === "_blank" && w.setAttribute("rel", "noopener noreferrer");
-    for (const p of Array.from(l.childNodes))
+    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 f = p.nodeValue ?? "";
+        const m = p.nodeValue ?? "";
         w.append(
           y.createTextNode(
-            l.localName === "style" && V ? f.replace(/@font-face\s*\{[^{}]*\}/g, "") : f
+            f.localName === "style" && V ? m.replace(/@font-face\s*\{[^{}]*\}/g, "") : m
           )
         );
       }
@@ -91,19 +91,19 @@ function ve(y, c = {}) {
   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, m = s.createElement("section");
-  m.className = "draft-viewer", m.setAttribute("aria-label", c.label ?? "Diagram viewer");
+  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 l = s.createElement("p");
-  l.className = "draft-viewer__status", l.setAttribute("role", "status"), l.setAttribute("aria-live", "polite");
+  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"), m.append(b, o, l, w), y.append(m);
+  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 f = 0, x = !1, a = { centerX: 0, centerY: 0, zoom: 1 }, T = !1, u, F, B, te = 0;
-  const M = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map(), q = /* @__PURE__ */ new Map(), L = (e, r) => {
+  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);
@@ -130,19 +130,19 @@ function ve(y, c = {}) {
       centerX: t + g / 2,
       centerY: S + n / 2,
       zoom: Math.min(1, re() * 0.92)
-    }, T = !1, R(), L("camera", { camera: { ...a }, reason: e });
+    }, _ = !1, R(), L("camera", { camera: { ...a }, reason: e });
   }, P = (e) => {
-    a.zoom = Math.max(0.02, Math.min(8, a.zoom * e)), T = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+    a.zoom = Math.max(0.02, Math.min(8, a.zoom * e)), _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
   }, ne = () => {
-    a.zoom = 1, T = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+    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 || (T ? R() : Y("resize"));
+    u && !o.getBoundingClientRect().width || (_ ? R() : Y("resize"));
   });
   J.observe(o);
   const X = (e, r) => {
-    l.textContent = r.map((t) => t.message).join(" "), m.classList.add("draft-viewer--stale"), L("diagnostics", { revision: e, diagnostics: r, stale: !!u });
+    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 [];
@@ -161,7 +161,7 @@ function ve(y, c = {}) {
     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 = M.get(h);
+        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 });
@@ -171,8 +171,8 @@ function ve(y, c = {}) {
       })
     );
   }, z = (e) => {
-    const r = B;
-    B = 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;
+    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;
@@ -181,8 +181,8 @@ function ve(y, c = {}) {
     }, d = (k, D) => {
       if (h) return;
       h = !0;
-      const i = B;
-      i?.id === n && (B = void 0, v.clearTimeout(i.timer), i.cleanup()), D ? g(D) : S(k);
+      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) => {
@@ -191,14 +191,14 @@ function ve(y, c = {}) {
     try {
       F ??= c.execution?.mode === "worker" && c.execution.createWorker ? c.execution.createWorker() : new Worker(new URL(
         /* @vite-ignore */
-        "" + new URL("assets/render.worker-BpUp6NY_.js", import.meta.url).href,
+        "" + 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
       );
-      B = { id: n, timer: D, finish: d, cleanup: C }, F.postMessage({ id: n, source: e, options: r });
+      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.")
@@ -226,7 +226,7 @@ function ve(y, c = {}) {
       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, T = !0, R());
+    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) {
@@ -250,28 +250,28 @@ function ve(y, c = {}) {
       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: f });
+    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 q)
+    for (const [t, S] of B)
       t !== e && S.resolve({ status: r, revision: t });
   };
   return {
     update: (e, r = {}) => {
-      const t = ++f;
+      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), q.delete(t);
-          const E = x ? { status: "destroyed", revision: t } : t !== f ? { status: "superseded", revision: t } : r.signal?.aborted ? { status: "aborted", revision: t } : d;
+          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 === f && (c.execution ?? { mode: "worker" }).mode === "worker" && z(new Error("Viewer render was aborted.")), n({ status: "aborted", revision: t });
+          t === m && (c.execution ?? { mode: "worker" }).mode === "worker" && z(new Error("Viewer render was aborted.")), n({ status: "aborted", revision: t });
         };
-        if (q.set(t, { resolve: n }), r.signal?.aborted) {
+        if (B.set(t, { resolve: n }), r.signal?.aborted) {
           h();
           return;
         }
@@ -284,7 +284,7 @@ function ve(y, c = {}) {
           ...r.state !== void 0 ? { state: r.state } : {}
         };
         ae(e, C, r.signal).then(async (d) => {
-          if (x || t !== f || r.signal?.aborted) {
+          if (x || t !== m || r.signal?.aborted) {
             n({ status: "superseded", revision: t });
             return;
           }
@@ -296,7 +296,7 @@ function ve(y, c = {}) {
           try {
             E = await oe(d.value.svg, C.fonts ?? "embed");
           } catch (i) {
-            if (x || t !== f || r.signal?.aborted) {
+            if (x || t !== m || r.signal?.aborted) {
               n({
                 status: r.signal?.aborted ? "aborted" : "superseded",
                 revision: t
@@ -311,7 +311,7 @@ function ve(y, c = {}) {
             X(t, $.diagnostics), n({ status: "error", revision: t, error: $ });
             return;
           }
-          if (x || t !== f || r.signal?.aborted) {
+          if (x || t !== m || r.signal?.aborted) {
             n({ status: "superseded", revision: t });
             return;
           }
@@ -319,17 +319,17 @@ function ve(y, c = {}) {
           try {
             W = ge(s, d.value.svg, C.fonts !== "host");
           } catch (i) {
-            const $ = i instanceof Error ? i.message : "Could not build safe SVG.", N = K("internal", "DRAFT_VIEWER_DOM", $);
-            X(t, N.diagnostics), n({ status: "error", revision: t, error: N });
+            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)
-              M.has(i.key) || (s.fonts.add(i.face), M.set(i.key, i.face), U.push(i));
+              N.has(i.key) || (s.fonts.add(i.face), N.set(i.key, i.face), U.push(i));
           } catch (i) {
-            for (const { key: N, face: Z } of U)
-              s.fonts.delete(Z), M.delete(N);
+            for (const { key: M, face: Z } of U)
+              s.fonts.delete(Z), N.delete(M);
             const $ = K(
               "environment",
               "DRAFT_FONT_UNAVAILABLE",
@@ -341,10 +341,10 @@ function ve(y, c = {}) {
           const H = !!u;
           u = d.value, o.replaceChildren(W), w.replaceChildren(
             ...u.items.map((i) => {
-              const $ = s.createElement("li"), N = s.createElement("button");
-              N.type = "button";
+              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 N.textContent = `${i.kind}: ${Z}`, N.dataset.itemId = i.id, N.addEventListener("click", () => {
+              return M.textContent = `${i.kind}: ${Z}`, M.dataset.itemId = i.id, M.addEventListener("click", () => {
                 L("itemactivate", {
                   id: i.id,
                   kind: i.kind,
@@ -352,23 +352,23 @@ function ve(y, c = {}) {
                   revision: t
                 });
                 const O = Array.from(o.querySelectorAll("[data-id]")).find(
-                  (_) => _.getAttribute("data-id") === i.id
+                  (T) => T.getAttribute("data-id") === i.id
                 );
                 if (O) {
-                  const _ = O.getBoundingClientRect(), I = o.getBoundingClientRect();
-                  (_.width || _.height) && I.width && I.height && (a = {
-                    centerX: a.centerX + (_.left + _.width / 2 - (I.left + I.width / 2)) / a.zoom,
-                    centerY: a.centerY + (_.top + _.height / 2 - (I.top + I.height / 2)) / a.zoom,
+                  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)
-                  }, T = !0, R(), L("camera", { camera: { ...a }, reason: "user" }));
+                  }, _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" }));
                 }
-              }), $.append(N), $;
+              }), $.append(M), $;
             })
           );
           const k = new Set(E.map((i) => i.key));
-          for (const [i, $] of M)
-            k.has(i) || (s.fonts.delete($), M.delete(i));
-          m.classList.remove("draft-viewer--stale"), l.textContent = d.diagnostics.map((i) => i.message).join(" "), !H || r.camera === "fit" ? Y() : R();
+          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,
@@ -377,7 +377,7 @@ function ve(y, c = {}) {
           };
           n(D), L("render", { revision: t, value: u }), L("diagnostics", { revision: t, diagnostics: d.diagnostics, stale: !1 });
         }).catch((d) => {
-          if (x || t !== f || r.signal?.aborted) {
+          if (x || t !== m || r.signal?.aborted) {
             n({
               status: r.signal?.aborted ? "aborted" : "superseded",
               revision: t
@@ -401,7 +401,7 @@ function ve(y, c = {}) {
     },
     getCamera: () => ({ ...a }),
     setCamera(e) {
-      x || !Number.isFinite(e.centerX) || !Number.isFinite(e.centerY) || !Number.isFinite(e.zoom) || e.zoom <= 0 || (a = { ...e }, T = !0, R(), L("camera", { camera: { ...a }, reason: "api" }));
+      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();
@@ -415,18 +415,18 @@ function ve(y, c = {}) {
     },
     destroy() {
       if (!x) {
-        if (x = !0, f++, A) {
+        if (x = !0, m++, A) {
           try {
             o.releasePointerCapture(A.pointerId);
           } catch {
           }
           A = void 0;
         }
-        for (const [e, r] of q)
+        for (const [e, r] of B)
           r.resolve({ status: "destroyed", revision: e });
-        q.clear(), z(new Error("Viewer was destroyed."));
-        for (const e of M.values()) s.fonts.delete(e);
-        M.clear(), J.disconnect(), G.clear(), y.replaceChildren(), u = void 0;
+        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;
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/runtime",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Portable native Draftably SVG rendering, validation, and optional viewer.",
   "type": "module",
@@ -34,9 +34,6 @@
     },
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "node ../../scripts/build-runtime.ts"
-  },
   "engines": {
     "node": ">=22.21.0"
   },
@@ -48,5 +45,8 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-runtime.ts"
   }
-}
+}