@draftably/runtime 0.3.0 → 0.5.0

package/dist/element.js

@@ -1,131 +1,281 @@
-import { mountViewer as a } from "./viewer.js";
-const d = ".draft-viewer{--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;height:100%;min-height:16rem;border:1px solid var(--dv-border);border-radius:.5rem;color:var(--dv-ink);background:var(--dv-bg);font:14px/1.45 system-ui,sans-serif;overflow:hidden}.draft-viewer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem;border-bottom:1px solid var(--dv-border)}.draft-viewer__toolbar button{font:inherit;padding:.25rem .55rem;border:1px solid var(--dv-border);border-radius:.3rem;background:var(--dv-bg);color:inherit}.draft-viewer button:focus-visible,.draft-viewer__viewport:focus-visible{outline:3px solid #2563eb;outline-offset:2px}.draft-viewer__viewport{position:relative;overflow:hidden;min-height:8rem;touch-action:none;cursor:grab}.draft-viewer__viewport:active{cursor:grabbing}.draft-viewer__viewport svg{position:absolute;left:0;top:0;overflow:visible}.draft-viewer__status{margin:0;padding:.35rem .65rem}.draft-viewer__outline{margin:0;padding:.4rem .8rem .6rem 2rem;max-height:7rem;overflow:auto;border-top:1px solid var(--dv-border)}.draft-viewer__outline:empty{display:none}.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 #0f172a1f}.draft-viewer--stale .draft-viewer__status{color:#9a3412;background:#fff7ed}.draft-viewer__status:empty{display:none}@media(prefers-reduced-motion:reduce){.draft-viewer *{scroll-behavior:auto!important;transition:none!important}}@media(max-width:600px){.draft-viewer__toolbar{gap:.3rem}.draft-viewer__toolbar button{padding-inline:.45rem}}", o = "draft-diagram";
-if (typeof globalThis.document < "u" && typeof globalThis.customElements < "u" && !customElements.get(o)) {
-  class n extends HTMLElement {
-    static get observedAttributes() {
-      return ["source", "state", "label", "outline"];
-    }
-    _options = {};
-    _viewer;
-    _updateComplete = Promise.resolve(void 0);
-    _host;
-    _fallback;
-    _status;
-    _style;
-    _generation = 0;
-    _revision = 0;
-    _pendingSource;
-    _pendingOutline;
-    _hasCommitted = !1;
-    constructor() {
-      super();
-      const t = Object.hasOwn(this, "source") ? this.source : void 0, e = Object.hasOwn(this, "options") ? this.options : void 0, s = Object.hasOwn(this, "outline") ? this.outline : void 0;
-      delete this.source, delete this.outline, delete this.options, this.attachShadow({ mode: "open" }), this._style = this.ownerDocument.createElement("style"), this._style.textContent = `${d}
-:host{display:block;height:26rem;min-height:16rem;box-sizing:border-box}.draft-diagram__viewer{height:100%;min-height:0}.draft-diagram__viewer[hidden]{display:none}.draft-diagram__fallback{display:block}.draft-diagram__fallback[hidden]{display:none}.draft-diagram__status{margin:.35rem 0;color:#9a3412;font:14px/1.45 system-ui,sans-serif}.draft-diagram__status:empty{display:none}`, this._host = this.ownerDocument.createElement("div"), this._host.className = "draft-diagram__viewer", this._host.hidden = !0, this._fallback = this.ownerDocument.createElement("slot"), this._fallback.className = "draft-diagram__fallback", this._status = this.ownerDocument.createElement("p"), this._status.className = "draft-diagram__status", this._status.setAttribute("role", "status"), this._status.setAttribute("aria-live", "polite"), this.shadowRoot.append(this._host, this._fallback, this._status), e && (this._options = e), s && (this._pendingOutline = s), t !== void 0 && (this._pendingSource = String(t ?? ""));
-    }
-    get source() {
-      return this.getAttribute("source") ?? "";
-    }
-    set source(t) {
-      const e = String(t ?? "");
-      this.getAttribute("source") !== e && this.setAttribute("source", e);
-    }
-    get outline() {
-      const t = this.getAttribute("outline");
-      return t === null ? void 0 : t === "visible" ? "visible" : "hidden";
-    }
-    set outline(t) {
-      t == null ? this.removeAttribute("outline") : this.getAttribute("outline") !== t && this.setAttribute("outline", t);
-    }
-    get options() {
-      return this._options;
-    }
-    set options(t) {
-      this._options = t ?? {}, this.isConnected && this._mount(!0);
-    }
-    get viewer() {
-      return this._viewer;
-    }
-    get updateComplete() {
-      return this._updateComplete;
+import { CANCELABLE_EVENTS as x } from "./host.js";
+import { HOST_EVENTS as F } from "./host.js";
+import { r as p } from "./version-CO7i33cq.js";
+import { mountViewer as C } from "./viewer.js";
+const S = ".draft-viewer{--dv-border: var(--draft-border, light-dark(#cbd5e1, #3d4450));--dv-ink: var(--draft-ink, light-dark(#1e293b, #e7eaef));--dv-bg: var(--draft-bg, light-dark(#fff, #16191e));--dv-focus: var(--draft-focus, light-dark(#2563eb, #7fa4e6));--dv-shadow: var(--draft-shadow, light-dark(rgb(15 23 42 / .12), rgb(0 0 0 / .4)));--dv-warning-ink: var(--draft-warning-ink, light-dark(#9a3412, #fdba74));--dv-warning-bg: var(--draft-warning-bg, light-dark(#fff7ed, #431407));position:relative;display:grid;grid-template-rows:auto minmax(8rem,1fr) auto auto;box-sizing:border-box;height:100%;min-height:16rem;border:1px solid var(--dv-border);border-radius:.5rem;color:var(--dv-ink);background:var(--dv-bg);font:14px/1.45 system-ui,sans-serif;overflow:clip}.draft-viewer__toolbar[hidden]{display:none}.draft-viewer__toolbar{grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem;border-bottom:1px solid var(--dv-border)}.draft-viewer__toolbar button{font:inherit;padding:.25rem .55rem;border:1px solid var(--dv-border);border-radius:.3rem;background:var(--dv-bg);color:inherit}.draft-viewer button:focus-visible,.draft-viewer__viewport:focus-visible{outline:3px solid var(--dv-focus);outline-offset:2px}.draft-viewer__viewport{grid-row:2;position:relative;overflow:clip;min-height:8rem;touch-action:none;cursor:grab}.draft-viewer__viewport:active{cursor:grabbing}.draft-viewer__viewport svg{position:absolute;left:0;top:0;overflow:visible}.draft-viewer__status{grid-row:3;margin:0;padding:.35rem .65rem}.draft-viewer__outline{grid-row:4;margin:0;padding:.4rem .8rem .6rem 2rem;max-height:7rem;overflow:auto;border-top:1px solid var(--dv-border)}.draft-viewer__outline:empty{display:none}.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 var(--dv-shadow)}.draft-viewer--stale .draft-viewer__status{color:var(--dv-warning-ink);background:var(--dv-warning-bg)}.draft-viewer__status:empty{display:none}@media(prefers-reduced-motion:reduce){.draft-viewer *{scroll-behavior:auto!important;transition:none!important}}@media(max-width:600px){.draft-viewer__toolbar{gap:.3rem}.draft-viewer__toolbar button{padding-inline:.45rem}}.draft-anchors{position:absolute;inset:0;pointer-events:none;overflow:visible}.draft-anchors__bodies{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}.draft-anchors__overlays{position:absolute;inset:0}.draft-anchor{position:absolute;box-sizing:border-box;pointer-events:none}.draft-anchor [data-draft-input]{pointer-events:auto}.draft-anchor--body{overflow:clip}.draft-anchor--overlay{left:0;top:0;overflow:visible}.draft-anchors[data-draft-detail=low] .draft-anchors__bodies{visibility:hidden}.draft-viewer__viewport[data-draft-detail=full] [data-draft-body] text{opacity:0}";
+function v(i, r) {
+  if (i === r || typeof i == "function" && typeof r == "function") return !0;
+  if (!i || !r || typeof i != "object" || typeof r != "object" || Array.isArray(i) !== Array.isArray(r)) return !1;
+  const t = Object.keys(i).filter((s) => i[s] !== void 0), e = Object.keys(r).filter((s) => r[s] !== void 0);
+  return t.length === e.length && t.every((s) => v(i[s], r[s]));
+}
+function _(i, r) {
+  if (!Object.hasOwn(i, r)) return;
+  const t = i[r];
+  return delete i[r], t;
+}
+function E(i) {
+  const r = customElements.get(i)?.runtimeVersion;
+  r !== p && console.warn(
+    `<${i}> is already defined by @draftably runtime ${r ?? "unknown"}; this copy (${p}) is not used. Install one copy of the runtime.`
+  );
+}
+function u(i, r, t) {
+  return i.dispatchEvent(
+    new CustomEvent(`draft-${r}`, {
+      detail: t,
+      bubbles: !0,
+      cancelable: x.includes(r)
+    })
+  );
+}
+function A(i, r, t) {
+  return {
+    status: "error",
+    revision: i,
+    error: {
+      ok: !1,
+      reason: "environment",
+      diagnostics: [
+        {
+          code: "DRAFT_ELEMENT_MOUNT",
+          severity: "error",
+          message: r instanceof Error ? r.message : t,
+          itemIds: []
+        }
+      ]
     }
-    connectedCallback() {
-      if (this._pendingOutline && (this.outline = this._pendingOutline, this._pendingOutline = void 0), this._pendingSource !== void 0) {
-        const t = this._pendingSource;
-        this._pendingSource = void 0, this.setAttribute("source", t);
+  };
+}
+const y = /* @__PURE__ */ new WeakMap();
+function N(i, r, t) {
+  const e = i.defaultView;
+  if (!e || !("adoptedStyleSheets" in e.ShadowRoot.prototype) || !("replaceSync" in e.CSSStyleSheet.prototype))
+    return;
+  const s = y.get(i) ?? /* @__PURE__ */ new Map();
+  y.set(i, s);
+  let o = s.get(r);
+  return o || (o = new e.CSSStyleSheet(), o.replaceSync(t), s.set(r, o)), o;
+}
+function M(i, r, t) {
+  if (!("preventDefault" in t)) return void u(i, r, t);
+  const { preventDefault: e, ...s } = t;
+  u(i, r, s) || e();
+}
+function D(i, r, t) {
+  const e = i.ownerDocument, s = typeof HTMLSlotElement < "u" && "assign" in HTMLSlotElement.prototype, o = /* @__PURE__ */ new WeakMap();
+  let n = /* @__PURE__ */ new Map(), m = [];
+  const b = () => {
+    if (s)
+      for (const a of m) {
+        let d = o.get(a.el);
+        d || (d = e.createElement("slot"), a.el.append(d), o.set(a.el, d)), d.assign(...n.get(a.slot) ?? []);
       }
-      this._mount(!1);
-    }
-    disconnectedCallback() {
-      this._reset(), this._style.remove();
+  }, c = () => {
+    const a = [...n.keys()].join(`
+`);
+    n = /* @__PURE__ */ new Map();
+    const d = [];
+    for (const l of i.childNodes) {
+      const f = l instanceof Element ? l.getAttribute("data-draft-slot") : null;
+      f ? n.set(f, [...n.get(f) ?? [], l]) : (l instanceof Element || l instanceof Text && l.data.trim()) && d.push(l);
     }
-    _reset() {
-      this._generation++, this._viewer?.destroy(), this._viewer = void 0, this._host.replaceChildren(), this._host.hidden = !0, this._fallback.hidden = !1, this._status.textContent = "", this._hasCommitted = !1;
-    }
-    attributeChangedCallback(t) {
-      t === "source" ? this.isConnected && (this._viewer && this.source.trim() ? this._update() : this._mount(!0)) : this.isConnected && t === "state" ? this._update() : this.isConnected && (t === "label" || t === "outline") && this._mount(!0);
-    }
-    _mount(t) {
-      if (!this.isConnected || (t && this._reset(), this._viewer)) return;
-      const e = {
-        ...this._options,
-        ...this.hasAttribute("label") ? { label: this.getAttribute("label") } : {},
-        ...this.outline ? { outline: this.outline } : {}
-      }, s = e.render?.styleNonce;
-      if (this._style.remove(), s ? this._style.setAttribute("nonce", s) : this._style.removeAttribute("nonce"), this.shadowRoot.prepend(this._style), !this.source.trim()) {
-        this._updateComplete = Promise.resolve(void 0);
-        return;
-      }
-      try {
-        this._viewer = a(this._host, e);
-      } catch (i) {
-        this._mountFailure(i);
-        return;
-      }
-      this._update();
-    }
-    _mountFailure(t) {
-      const e = {
-        status: "error",
-        revision: ++this._revision,
-        error: {
-          ok: !1,
-          reason: "environment",
-          diagnostics: [
-            {
-              code: "DRAFT_ELEMENT_MOUNT",
-              severity: "error",
-              message: t instanceof Error ? t.message : "Diagram viewer could not start.",
-              itemIds: []
-            }
-          ]
+    s && r?.assign(...d), [...n.keys()].join(`
+`) !== a && t([...n.keys()]), b();
+  }, g = new MutationObserver(c), w = new MutationObserver((a) => {
+    a.some((d) => d.target.parentNode === i) && c();
+  });
+  return {
+    start() {
+      g.observe(i, { childList: !0 }), w.observe(i, {
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["data-draft-slot"]
+      }), n = /* @__PURE__ */ new Map(), c();
+    },
+    stop() {
+      g.disconnect(), w.disconnect();
+    },
+    /** The handle's targets changed: put each slot's children in its target. */
+    setAnchors(a) {
+      m = a, b();
+    },
+    names: () => [...n.keys()]
+  };
+}
+const h = "draft-diagram", k = `${S}
+:host{display:block;height:26rem;min-height:16rem;box-sizing:border-box}.draft-diagram__viewer{height:100%;min-height:0}.draft-diagram__viewer[hidden]{display:none}.draft-diagram__fallback{display:block}.draft-diagram__fallback[hidden]{display:none}.draft-diagram__status{margin:.35rem 0;color:var(--draft-warning-ink,#9a3412);font:14px/1.45 system-ui,sans-serif}.draft-diagram__status:empty{display:none}`, T = [
+  "anchors",
+  "render",
+  "diagnostics",
+  "camera",
+  "itemactivate",
+  "link",
+  "contextmenu"
+];
+if (typeof globalThis.document < "u" && typeof globalThis.customElements < "u")
+  if (customElements.get(h)) E(h);
+  else {
+    class i extends HTMLElement {
+      static runtimeVersion = p;
+      static get observedAttributes() {
+        return ["source", "state", "label", "outline"];
+      }
+      _options = {};
+      /** The options object the viewer reads; changed in place for live fields. */
+      _live = {};
+      _viewer;
+      _updateComplete = Promise.resolve(void 0);
+      _host;
+      _fallback;
+      _status;
+      /** Only where the browser cannot adopt a shared sheet. */
+      _style;
+      _generation = 0;
+      _revision = 0;
+      _scheduled = !1;
+      _hasCommitted = !1;
+      _slotting;
+      constructor() {
+        super();
+        const t = _(this, "source"), e = _(this, "options"), s = _(this, "outline");
+        this.attachShadow({ mode: "open", slotAssignment: "manual" }), this._host = this.ownerDocument.createElement("div"), this._host.className = "draft-diagram__viewer", this._host.hidden = !0, this._fallback = this.ownerDocument.createElement("slot"), this._fallback.className = "draft-diagram__fallback", this._status = this.ownerDocument.createElement("p"), this._status.className = "draft-diagram__status", this._status.setAttribute("role", "status"), this._status.setAttribute("aria-live", "polite");
+        const o = N(this.ownerDocument, h, k);
+        o ? this.shadowRoot.adoptedStyleSheets = [o] : (this._style = this.ownerDocument.createElement("style"), this._style.textContent = k, this.shadowRoot.append(this._style)), this.shadowRoot.append(this._host, this._fallback, this._status), this._slotting = D(
+          this,
+          this._fallback,
+          (n) => this._viewer?.anchor(n)
+        ), e && (this._options = e), s && (this.outline = s), t !== void 0 && (this.source = t);
+      }
+      get source() {
+        return this.getAttribute("source") ?? "";
+      }
+      set source(t) {
+        const e = String(t ?? "");
+        this.getAttribute("source") !== e && this.setAttribute("source", e);
+      }
+      get outline() {
+        const t = this.getAttribute("outline");
+        return t === null ? void 0 : t === "visible" ? "visible" : "hidden";
+      }
+      set outline(t) {
+        t == null ? this.removeAttribute("outline") : this.getAttribute("outline") !== t && this.setAttribute("outline", t);
+      }
+      get options() {
+        return this._options;
+      }
+      set options(t) {
+        const e = this._options, s = t ?? {};
+        if (this._options = s, !this._viewer) return;
+        if (!v(e.execution, s.execution) || (e.render?.fonts ?? "embed") !== (s.render?.fonts ?? "embed")) {
+          this._reset(), this._schedule();
+          return;
         }
-      };
-      this._status.textContent = e.error.diagnostics[0].message, this._updateComplete = Promise.resolve(e), this.dispatchEvent(
-        new CustomEvent("draft-update", { detail: e, bubbles: !0 })
-      );
-    }
-    _update() {
-      const t = this._viewer;
-      if (!t || !this.isConnected) return;
-      const e = ++this._generation;
-      this._revision++;
-      const s = t.update(this.source, { state: this.getAttribute("state") });
-      this._updateComplete = s.then((i) => {
-        if (e !== this._generation || !this.isConnected || t !== this._viewer)
-          return i;
-        if (i?.status === "committed") {
-          const r = !this._hasCommitted;
-          this._hasCommitted = !0, this._host.hidden = !1, this._fallback.hidden = !0, this._status.textContent = "", r && t.fit();
-        } else if (i?.status === "error")
-          this._status.textContent = this._hasCommitted ? "" : i.error.diagnostics.map((r) => r.message).join(" ");
-        else
-          return i;
-        return this.dispatchEvent(
-          new CustomEvent("draft-update", { detail: i, bubbles: !0 })
-        ), i;
-      });
+        const o = !v(e.render, s.render);
+        this._applyLive(), o && this._update();
+      }
+      get viewer() {
+        return this._viewer;
+      }
+      get updateComplete() {
+        return this._updateComplete;
+      }
+      connectedCallback() {
+        this._slotting.start(), this._schedule();
+      }
+      disconnectedCallback() {
+        this._slotting.stop(), this._reset(), this.removeAttribute("status");
+      }
+      attributeChangedCallback(t) {
+        this.isConnected && (t === "source" ? this._viewer && this.source.trim() ? this._update() : (this._reset(), this._schedule()) : t === "state" ? this._update() : this._applyLive());
+      }
+      /** Mount once, in a microtask, so every property a framework sets in this tick lands first. */
+      _schedule() {
+        if (this._scheduled) return;
+        this._scheduled = !0;
+        const t = new Promise(
+          (e) => queueMicrotask(() => {
+            this._scheduled = !1, this._mount(), e(this._updateComplete === t ? void 0 : this._updateComplete);
+          })
+        );
+        this._updateComplete = t;
+      }
+      _setStatus(t) {
+        t ? this.setAttribute("status", t) : this.removeAttribute("status");
+      }
+      _reset() {
+        this._generation++, this._viewer?.destroy(), this._viewer = void 0, this._host.replaceChildren(), this._host.hidden = !0, this._fallback.hidden = !1, this._status.textContent = "", this._hasCommitted = !1;
+      }
+      /** The options with the element's own attributes on top. */
+      _merged() {
+        return {
+          ...this._options,
+          ...this.hasAttribute("label") ? { label: this.getAttribute("label") } : {},
+          ...this.outline ? { outline: this.outline } : {}
+        };
+      }
+      /** Apply label, outline, toolbar and render settings without a new viewer. */
+      _applyLive() {
+        if (!this._viewer) return;
+        const t = this._merged();
+        for (const o of Object.keys(this._live))
+          delete this._live[o];
+        Object.assign(this._live, t);
+        const e = this._host.querySelector(".draft-viewer");
+        if (!e) return;
+        e.setAttribute("aria-label", t.label ?? "Diagram viewer"), e.querySelector(".draft-viewer__viewport")?.setAttribute("aria-label", t.label ?? "Diagram"), e.classList.toggle("draft-viewer--outline-hidden", t.outline !== "visible");
+        const s = e.querySelector(".draft-viewer__toolbar");
+        s && (s.hidden = t.toolbar === !1), this._setNonce();
+      }
+      _setNonce() {
+        const t = this._options.render?.styleNonce;
+        t ? this._style?.setAttribute("nonce", t) : this._style?.removeAttribute("nonce");
+      }
+      _mount() {
+        if (!this.isConnected || this._viewer) return;
+        if (this._setNonce(), !this.source.trim()) {
+          this._setStatus(null), this._updateComplete = Promise.resolve(void 0);
+          return;
+        }
+        this._setStatus("loading"), this._live = this._merged();
+        try {
+          this._viewer = C(this._host, this._live);
+        } catch (e) {
+          this._mountFailure(e);
+          return;
+        }
+        const t = this._viewer;
+        for (const e of T)
+          t.on(e, (s) => {
+            t === this._viewer && M(this, e, s);
+          });
+        t.on("anchors", ({ anchors: e }) => this._slotting.setAnchors(e)), t.anchor(this._slotting.names()), this._update();
+      }
+      _mountFailure(t) {
+        const e = A(++this._revision, t, "Diagram viewer could not start.");
+        this._status.textContent = e.error.diagnostics[0].message, this._setStatus("error"), this._updateComplete = Promise.resolve(e), u(this, "update", e);
+      }
+      _update() {
+        const t = this._viewer;
+        if (!t || !this.isConnected) return;
+        const e = ++this._generation;
+        this._revision++;
+        const s = t.update(this.source, { state: this.getAttribute("state") });
+        this._updateComplete = s.then((o) => {
+          if (e !== this._generation || !this.isConnected || t !== this._viewer)
+            return o;
+          if (o?.status === "committed")
+            this._hasCommitted = !0, this._host.hidden = !1, this._fallback.hidden = !0, this._status.textContent = "", this._setStatus("ready");
+          else if (o?.status === "error")
+            this._status.textContent = this._hasCommitted ? "" : o.error.diagnostics.map((n) => n.message).join(" "), this._hasCommitted || this._setStatus("error");
+          else
+            return o;
+          return u(this, "update", o), o;
+        });
+      }
     }
+    customElements.define(h, i);
   }
-  customElements.define(o, n);
-}
+export {
+  F as HOST_EVENTS
+};