@floegence/floe-webapp-core 0.36.41 → 0.36.43

package/dist/components/workbench/WorkbenchLayerObjects.js

@@ -0,0 +1,986 @@
+import { insert as y, createComponent as v, memo as p, effect as W, addEventListener as N, use as Z, setAttribute as g, classList as ue, style as ee, template as R, setStyleProperty as q, delegateEvents as Me } from "solid-js/web";
+import { createMemo as $, For as V, Show as F, createSignal as B, onCleanup as te, createEffect as ae, untrack as oe } from "solid-js";
+import { GripVertical as Se, Check as Le, Copy as De, Trash as me, ChevronDown as Oe, Minus as We, Plus as Ne } from "../icons/index.js";
+import { startHotInteraction as Ce } from "../../utils/hotInteraction.js";
+import { startPointerSession as ze } from "../ui/pointerSession.js";
+import { WORKBENCH_STICKY_NOTE_COLORS as Ge, WORKBENCH_REGION_FILL_OPTIONS as je, WORKBENCH_BACKGROUND_MATERIALS as Ae, WORKBENCH_TEXT_FONT_OPTIONS as se, WORKBENCH_TEXT_COLOR_OPTIONS as Fe, WORKBENCH_TEXT_EMOJI_OPTIONS as Be } from "./workbenchOptions.js";
+import { createWorkbenchWidgetSurfaceMetrics as He } from "./workbenchHelpers.js";
+var Ue = /* @__PURE__ */ R('<div class=workbench-sticky__actions data-floe-workbench-sticky-local=true><button type=button class=workbench-sticky__tool aria-label="Copy sticky note content"></button><button type=button class=workbench-sticky__tool aria-label="Change sticky note color"title="Change sticky note color"><span class=workbench-sticky__color-dot aria-hidden=true></span></button><button type=button class="workbench-sticky__tool is-danger"aria-label="Delete sticky note"title="Delete sticky note">'), Xe = /* @__PURE__ */ R('<button type=button class="workbench-layer-resize workbench-sticky__resize"aria-label="Resize sticky note">'), Ye = /* @__PURE__ */ R('<article class=workbench-sticky data-floe-canvas-interactive=true data-floe-workbench-widget-root=true data-wb-plane=work data-wb-object-kind=sticky tabindex=0><div class=workbench-sticky__surface><header class=workbench-sticky__header><button type=button class=workbench-sticky__grip aria-label="Drag sticky note"data-floe-workbench-sticky-local=true data-wb-part=move></button></header><div class=workbench-sticky__body role=textbox aria-multiline=true aria-label="Sticky note body"data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-floe-workbench-sticky-local=true data-wb-part=content>'), Ke = /* @__PURE__ */ R("<article class=workbench-text-annotation data-wb-plane=annotation data-wb-object-kind=text data-wb-part=body><div class=workbench-text-annotation__content data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-wb-part=content>"), Ve = /* @__PURE__ */ R("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body>"), Je = /* @__PURE__ */ R('<div class=workbench-text-font-popover role=menu aria-label="Bold font">'), qe = /* @__PURE__ */ R("<div class=workbench-text-emoji-popover role=menu aria-label=Emoji>"), Qe = /* @__PURE__ */ R('<div class="workbench-layer-control workbench-layer-control--text"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=text data-wb-part=toolbar><div class="workbench-layer-control__selection is-text"aria-hidden=true></div><div class=workbench-text-annotation__toolbar data-floe-canvas-interactive=true><button type=button aria-label="Move text"title="Move text"class="workbench-layer-mini-button workbench-layer-move-handle"data-wb-part=move></button><div class=workbench-text-font-picker data-floe-canvas-interactive=true><button type=button aria-label="Choose bold font"aria-haspopup=menu title="Choose bold font"class=workbench-text-font-trigger><span class=workbench-text-font-trigger__sample>Aa</span><span class=workbench-text-font-trigger__label></span></button></div><div class=workbench-text-size-stepper role=group aria-label="Text size"><button type=button aria-label="Decrease text size"title="Decrease text size"class=workbench-text-size-stepper__button></button><input class=workbench-text-annotation__size-input type=text inputmode=numeric pattern=[0-9]* aria-label="Text size value"><button type=button aria-label="Increase text size"title="Increase text size"class=workbench-text-size-stepper__button></button></div><div class=workbench-text-emoji-picker data-floe-canvas-interactive=true><button type=button aria-label="Insert emoji"aria-haspopup=menu title="Insert emoji"class=workbench-text-emoji-trigger>✨</button></div><button type=button class=workbench-layer-mini-button></button><button type=button class="workbench-layer-mini-button is-danger"aria-label="Delete text"></button></div><button type=button class=workbench-layer-resize aria-label="Resize text"data-wb-part=resize>'), Ze = /* @__PURE__ */ R("<button type=button role=menuitemradio class=workbench-text-font-option><span class=workbench-text-font-option__sample>Aa</span><span class=workbench-text-font-option__label>"), pe = /* @__PURE__ */ R("<button type=button class=workbench-layer-swatch>"), et = /* @__PURE__ */ R("<button type=button role=menuitem class=workbench-text-emoji-option>"), tt = /* @__PURE__ */ R('<div class="workbench-layer-control workbench-layer-control--region"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=region data-wb-part=toolbar><div class="workbench-layer-control__selection is-region"aria-hidden=true></div><div class=workbench-background-region__toolbar data-floe-canvas-interactive=true><div class=workbench-region-material-group role=group aria-label="Region material"></div><button type=button class=workbench-layer-mini-button>%</button><button type=button class="workbench-layer-mini-button is-danger"aria-label="Delete background region"></button></div><button type=button class=workbench-layer-resize aria-label="Resize background region"data-wb-part=resize>'), it = /* @__PURE__ */ R('<button type=button class="workbench-layer-swatch workbench-layer-swatch--region">'), nt = /* @__PURE__ */ R("<button type=button class=workbench-region-material><span class=workbench-region-material__sample aria-hidden=true>"), ot = /* @__PURE__ */ R("<div class=workbench-background-layer>"), at = /* @__PURE__ */ R("<div class=workbench-annotation-layer>"), rt = /* @__PURE__ */ R("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
+const lt = 190, ct = 132, dt = 180, st = 120, ut = 96, mt = 42, $e = {
+  solid: "Solid",
+  dotted: "Dotted",
+  grid: "Grid",
+  hatched: "Hatched",
+  glass: "Glass"
+}, ht = {
+  amber: "is-amber",
+  sage: "is-sage",
+  azure: "is-azure",
+  coral: "is-coral",
+  rose: "is-rose",
+  graphite: "is-graphite"
+};
+function Et() {
+  const e = /* @__PURE__ */ new Map();
+  return {
+    register(i, o) {
+      return e.set(i, o), () => {
+        e.get(i) === o && e.delete(i);
+      };
+    },
+    get(i) {
+      return e.get(i);
+    }
+  };
+}
+function Ee(e) {
+  return [...e].sort((i, o) => i.z_index !== o.z_index ? i.z_index - o.z_index : i.created_at_unix_ms !== o.created_at_unix_ms ? i.created_at_unix_ms - o.created_at_unix_ms : i.id.localeCompare(o.id));
+}
+function Pe(e) {
+  return new Map(e.map((i) => [i.id, i]));
+}
+function Ie(e, i) {
+  const o = e.findIndex((n) => n === i);
+  return e[(o + 1) % e.length] ?? e[0];
+}
+function _e(e, i, o) {
+  ae(() => {
+    if (!e() || typeof document > "u") return;
+    const n = (r) => {
+      const t = i();
+      t && r.target instanceof Node && t.contains(r.target) || o();
+    }, a = (r) => {
+      r.key === "Escape" && o();
+    };
+    document.addEventListener("pointerdown", n, !0), document.addEventListener("keydown", a), te(() => {
+      document.removeEventListener("pointerdown", n, !0), document.removeEventListener("keydown", a);
+    });
+  });
+}
+function bt(e, i) {
+  if (!e || e.rangeCount <= 0) return !1;
+  const o = e.getRangeAt(0).commonAncestorContainer;
+  return o === i || i.contains(o);
+}
+function Te(e) {
+  const [i, o] = B(), [n, a] = B(!1), [r, t] = B(!1), m = () => i()?.textContent ?? e.value(), _ = (x) => o(x), c = (x) => {
+    const u = x.textContent ?? "";
+    u !== e.value() && e.onCommit(u);
+  };
+  return ae(() => {
+    const x = i();
+    if (!x || n() || r()) return;
+    const u = e.value();
+    (x.textContent ?? "") !== u && (x.textContent = u);
+  }), {
+    bind: _,
+    readText: m,
+    focus: () => i()?.focus(),
+    insertTextAtSelection: (x) => {
+      const u = i();
+      if (!u) return;
+      u.focus();
+      const z = document.getSelection(), C = bt(z, u), L = C && z ? z.getRangeAt(0) : document.createRange();
+      C || (L.selectNodeContents(u), L.collapse(!1)), L.deleteContents();
+      const b = document.createTextNode(x);
+      L.insertNode(b), L.setStartAfter(b), L.collapse(!0), z?.removeAllRanges(), z?.addRange(L), c(u);
+    },
+    handleFocus: () => {
+      t(!0);
+    },
+    handleBlur: (x) => {
+      n() || c(x.currentTarget), t(!1);
+    },
+    handleInput: (x) => {
+      n() || x.isComposing || c(x.currentTarget);
+    },
+    handleCompositionStart: () => {
+      a(!0);
+    },
+    handleCompositionEnd: (x) => {
+      c(x.currentTarget), a(!1);
+    }
+  };
+}
+function wt(e) {
+  return Math.max(8, Math.min(160, Math.round(e)));
+}
+function Y(e) {
+  e.stopPropagation();
+}
+function K(e) {
+  e.stopPropagation();
+}
+function M(e) {
+  e.preventDefault(), e.stopPropagation();
+}
+function T(e) {
+  e.stopPropagation();
+}
+function re(e, i, o) {
+  return e?.kind === i && e.id === o ? e : null;
+}
+function le(e) {
+  const [i, o] = B(null);
+  let n;
+  return te(() => {
+    n?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), n = void 0, oe(i)?.stopInteraction();
+  }), {
+    position: $(() => {
+      const t = i();
+      return t ? {
+        x: t.worldX,
+        y: t.worldY
+      } : e.readPosition();
+    }),
+    isDragging: () => i() !== null,
+    beginDrag: (t) => {
+      if (t.button !== 0) return;
+      t.preventDefault(), t.stopPropagation(), n?.stop({
+        reason: "manual_stop",
+        commit: !1
+      });
+      const m = e.readPosition(), _ = Math.max(e.viewportScale(), 1e-3), c = Ce({
+        kind: "drag",
+        cursor: "grabbing"
+      });
+      let k = !1;
+      e.onInteractionStart?.();
+      const S = () => {
+        k || (k = !0, c(), e.onInteractionEnd?.());
+      };
+      o({
+        pointerId: t.pointerId,
+        startClientX: t.clientX,
+        startClientY: t.clientY,
+        startWorldX: m.x,
+        startWorldY: m.y,
+        worldX: m.x,
+        worldY: m.y,
+        scale: _,
+        moved: !1,
+        stopInteraction: S
+      }), n = ze({
+        pointerEvent: t,
+        captureEl: t.currentTarget,
+        onMove: (s) => {
+          let l = null;
+          o((d) => !d || d.pointerId !== s.pointerId ? d : (l = {
+            x: d.startWorldX + (s.clientX - d.startClientX) / d.scale,
+            y: d.startWorldY + (s.clientY - d.startClientY) / d.scale
+          }, {
+            ...d,
+            worldX: l.x,
+            worldY: l.y,
+            moved: d.moved || Math.abs(l.x - d.startWorldX) > 2 || Math.abs(l.y - d.startWorldY) > 2
+          })), l && e.onPreviewMove?.(l);
+        },
+        onEnd: ({
+          commit: s
+        }) => {
+          const l = oe(i);
+          if (l && s) {
+            const d = {
+              x: l.worldX,
+              y: l.worldY
+            };
+            e.onCommitStart?.(d), l.moved && e.onCommitMove(d);
+          }
+          l?.stopInteraction(), o(null), n = void 0, e.onPreviewEnd?.();
+        }
+      });
+    }
+  };
+}
+function he(e) {
+  const [i, o] = B(null);
+  let n;
+  return te(() => {
+    n?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), n = void 0, oe(i)?.stopInteraction();
+  }), {
+    size: $(() => {
+      const t = i();
+      return t ? {
+        width: t.width,
+        height: t.height
+      } : e.readSize();
+    }),
+    isResizing: () => i() !== null,
+    beginResize: (t) => {
+      if (t.button !== 0) return;
+      t.preventDefault(), t.stopPropagation(), n?.stop({
+        reason: "manual_stop",
+        commit: !1
+      });
+      const m = e.readSize(), _ = Math.max(e.viewportScale(), 1e-3), c = Ce({
+        kind: "resize",
+        cursor: "nwse-resize"
+      });
+      let k = !1;
+      e.onInteractionStart?.();
+      const S = () => {
+        k || (k = !0, c(), e.onInteractionEnd?.());
+      };
+      o({
+        pointerId: t.pointerId,
+        startClientX: t.clientX,
+        startClientY: t.clientY,
+        startWidth: m.width,
+        startHeight: m.height,
+        width: m.width,
+        height: m.height,
+        scale: _,
+        stopInteraction: S
+      }), n = ze({
+        pointerEvent: t,
+        captureEl: t.currentTarget,
+        onMove: (s) => {
+          let l = null;
+          o((d) => !d || d.pointerId !== s.pointerId ? d : (l = {
+            width: Math.max(e.minWidth, d.startWidth + (s.clientX - d.startClientX) / d.scale),
+            height: Math.max(e.minHeight, d.startHeight + (s.clientY - d.startClientY) / d.scale)
+          }, {
+            ...d,
+            width: l.width,
+            height: l.height
+          })), l && e.onPreviewResize?.(l);
+        },
+        onEnd: ({
+          commit: s
+        }) => {
+          const l = oe(i);
+          l && s && e.onCommitResize({
+            width: l.width,
+            height: l.height
+          }), l?.stopInteraction(), o(null), n = void 0, e.onPreviewEnd?.();
+        }
+      });
+    }
+  };
+}
+function Pt(e) {
+  const i = Te({
+    value: () => e.item.body,
+    onCommit: (w) => e.onUpdate(e.item.id, {
+      body: w
+    })
+  }), [o, n] = B(!1);
+  let a;
+  const r = () => {
+    typeof window > "u" || a === void 0 || (window.clearTimeout(a), a = void 0);
+  }, t = () => {
+    n(!0), r(), !(typeof window > "u") && (a = window.setTimeout(() => {
+      a = void 0, n(!1);
+    }, 720));
+  };
+  te(() => r());
+  const m = async () => {
+    typeof navigator > "u" || !navigator.clipboard?.writeText || (await navigator.clipboard.writeText(i.readText()), t());
+  }, _ = (w) => {
+    w.button === 0 && (e.onSelect(e.item.id), !e.locked && (w.target instanceof Element && w.target.closest('[data-floe-workbench-sticky-local="true"]') || (e.onStartOptimisticFront?.(e.item.id), c.beginDrag(w))));
+  }, c = le({
+    viewportScale: () => e.viewportScale,
+    readPosition: () => ({
+      x: e.item.x,
+      y: e.item.y
+    }),
+    onCommitMove: (w) => e.onCommitMove(e.item.id, w),
+    onCommitStart: () => e.onCommitFront?.(e.item.id),
+    onInteractionStart: () => e.onLayoutInteractionStart?.(),
+    onInteractionEnd: () => e.onLayoutInteractionEnd?.()
+  }), k = he({
+    viewportScale: () => e.viewportScale,
+    readSize: () => ({
+      width: e.item.width,
+      height: e.item.height
+    }),
+    minWidth: lt,
+    minHeight: ct,
+    onCommitResize: (w) => e.onCommitResize(e.item.id, w),
+    onInteractionStart: () => e.onLayoutInteractionStart?.(),
+    onInteractionEnd: () => e.onLayoutInteractionEnd?.()
+  }), S = $(() => c.position()), s = $(() => k.size()), l = $(() => {
+    if (e.projectedViewport)
+      return He({
+        widgetId: e.item.id,
+        worldX: S().x,
+        worldY: S().y,
+        worldWidth: s().width,
+        worldHeight: s().height,
+        viewport: e.projectedViewport(),
+        ready: e.surfaceReady ?? !0
+      });
+  }), d = $(() => l()?.rect.viewportScale ?? Math.max(e.viewportScale, 1e-3)), G = $(() => ({
+    width: `${s().width}px`,
+    height: `${s().height}px`,
+    transform: e.projectedViewport ? `translate(${l()?.rect.screenX ?? 0}px, ${l()?.rect.screenY ?? 0}px) scale(${d()})` : `translate(${S().x}px, ${S().y}px)`,
+    "transform-origin": "0 0",
+    "z-index": `${e.selected || e.optimisticFront || c.isDragging() || k.isResizing() ? e.topRenderLayer + 1 : e.renderLayer}`
+  }));
+  return (() => {
+    var w = Ye(), x = w.firstChild, u = x.firstChild, z = u.firstChild, C = u.nextSibling;
+    w.$$contextmenu = (b) => {
+      b.preventDefault(), b.stopPropagation(), e.onContextMenu?.(b, e.item);
+    }, w.addEventListener("focus", () => e.onSelect(e.item.id)), w.$$pointerdown = _, z.$$pointerdown = (b) => {
+      e.onSelect(e.item.id), e.onStartOptimisticFront?.(e.item.id), c.beginDrag(b);
+    }, y(z, v(Se, {
+      class: "w-3.5 h-3.5"
+    })), N(C, "compositionend", i.handleCompositionEnd), N(C, "compositionstart", i.handleCompositionStart), N(C, "input", i.handleInput, !0), N(C, "blur", i.handleBlur), N(C, "focus", i.handleFocus), C.$$pointerdown = (b) => {
+      b.stopPropagation(), e.onSelect(e.item.id);
+    };
+    var L = i.bind;
+    return typeof L == "function" ? Z(L, C) : i.bind = C, g(C, "spellcheck", !1), y(w, v(F, {
+      get when() {
+        return p(() => !!e.selected)() && !e.locked;
+      },
+      get children() {
+        var b = Ue(), O = b.firstChild, j = O.nextSibling, H = j.nextSibling;
+        return O.$$click = async (E) => {
+          T(E), await m();
+        }, O.$$pointerdown = M, y(O, v(F, {
+          get when() {
+            return o();
+          },
+          get fallback() {
+            return v(De, {
+              class: "w-3.5 h-3.5"
+            });
+          },
+          get children() {
+            return v(Le, {
+              class: "w-3.5 h-3.5"
+            });
+          }
+        })), j.$$click = (E) => {
+          T(E), e.onUpdate(e.item.id, {
+            color: Ie(Ge, e.item.color)
+          });
+        }, j.$$pointerdown = M, H.$$click = (E) => {
+          T(E), e.onDelete(e.item.id);
+        }, H.$$pointerdown = M, y(H, v(me, {
+          class: "w-3.5 h-3.5"
+        })), W((E) => {
+          var A = !!o(), D = o() ? "Sticky note content copied" : "Copy sticky note content";
+          return A !== E.e && O.classList.toggle("is-success", E.e = A), D !== E.t && g(O, "title", E.t = D), E;
+        }, {
+          e: void 0,
+          t: void 0
+        }), b;
+      }
+    }), null), y(w, v(F, {
+      get when() {
+        return !e.locked;
+      },
+      get children() {
+        var b = Xe();
+        return N(b, "pointerdown", k.beginResize, !0), b;
+      }
+    }), null), W((b) => {
+      var O = {
+        "is-selected": e.selected,
+        "is-locked": e.locked,
+        "is-filtered-out": e.filtered,
+        "is-dragging": c.isDragging(),
+        "is-resizing": k.isResizing(),
+        "is-copied": o(),
+        [ht[e.item.color]]: !0
+      }, j = e.item.id, H = e.item.id, E = e.item.id, A = G(), D = e.locked ? !1 : "plaintext-only", J = e.locked ? "true" : void 0;
+      return b.e = ue(w, O, b.e), j !== b.t && g(w, "data-floe-workbench-widget-id", b.t = j), H !== b.a && g(w, "data-wb-object-id", b.a = H), E !== b.o && g(w, "data-floe-workbench-sticky-id", b.o = E), b.i = ee(w, A, b.i), D !== b.n && g(C, "contenteditable", b.n = D), J !== b.s && g(C, "aria-disabled", b.s = J), b;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    }), w;
+  })();
+}
+function gt(e) {
+  const i = Te({
+    value: () => e.item.text,
+    onCommit: (t) => e.onUpdate(e.item.id, {
+      text: t
+    })
+  });
+  ae(() => {
+    const t = e.textEditorRegistry;
+    if (!t) return;
+    const m = t.register(e.item.id, {
+      focus: i.focus,
+      insertTextAtSelection: i.insertTextAtSelection,
+      readText: i.readText
+    });
+    te(m);
+  });
+  const o = le({
+    viewportScale: () => e.viewportScale,
+    readPosition: () => ({
+      x: e.item.x,
+      y: e.item.y
+    }),
+    onCommitMove: (t) => e.onCommitMove(e.item.id, t),
+    onPreviewMove: (t) => e.onPreviewGeometry?.({
+      kind: "annotation",
+      id: e.item.id,
+      x: t.x,
+      y: t.y,
+      width: e.item.width,
+      height: e.item.height
+    }),
+    onPreviewEnd: () => e.onPreviewGeometry?.(null)
+  }), n = $(() => {
+    const t = re(e.preview, "annotation", e.item.id);
+    return {
+      x: t?.x ?? o.position().x,
+      y: t?.y ?? o.position().y,
+      width: t?.width ?? e.item.width,
+      height: t?.height ?? e.item.height
+    };
+  }), a = $(() => ({
+    width: `${n().width}px`,
+    height: `${n().height}px`,
+    transform: `translate(${n().x}px, ${n().y}px)`,
+    "z-index": `${e.item.z_index}`,
+    "--workbench-text-color": e.item.color,
+    "--workbench-text-size": `${e.item.font_size}px`,
+    "--workbench-text-weight": `${e.item.font_weight}`,
+    "--workbench-text-align": e.item.align,
+    "--workbench-text-family": e.item.font_family
+  })), r = (t) => {
+    !e.editable || t.button !== 0 || t.target instanceof Element && t.target.closest(".workbench-text-annotation__content") || (t.stopPropagation(), e.onSelect(e.item.id));
+  };
+  return (() => {
+    var t = Ke(), m = t.firstChild;
+    t.$$contextmenu = (c) => {
+      e.editable && (c.preventDefault(), c.stopPropagation(), e.onSelect(e.item.id), e.onContextMenu?.(c, e.item));
+    }, t.$$pointerdown = r, N(m, "compositionend", i.handleCompositionEnd), N(m, "compositionstart", i.handleCompositionStart), N(m, "input", i.handleInput, !0), N(m, "blur", i.handleBlur), m.addEventListener("focus", (c) => {
+      i.handleFocus(c), e.editable && e.onSelect(e.item.id);
+    }), m.$$pointerdown = (c) => {
+      !e.editable || c.button !== 0 || e.onSelect(e.item.id);
+    };
+    var _ = i.bind;
+    return typeof _ == "function" ? Z(_, m) : i.bind = m, g(m, "spellcheck", !1), W((c) => {
+      var k = !!e.selected, S = !!e.editable, s = e.editable ? "true" : void 0, l = e.item.id, d = a(), G = e.editable ? "plaintext-only" : !1, w = e.editable ? 0 : void 0, x = e.editable ? "textbox" : void 0, u = e.editable ? "true" : void 0, z = e.editable ? void 0 : "true";
+      return k !== c.e && t.classList.toggle("is-selected", c.e = k), S !== c.t && t.classList.toggle("is-editable", c.t = S), s !== c.a && g(t, "data-floe-canvas-interactive", c.a = s), l !== c.o && g(t, "data-wb-object-id", c.o = l), c.i = ee(t, d, c.i), G !== c.n && g(m, "contenteditable", c.n = G), w !== c.s && g(m, "tabindex", c.s = w), x !== c.h && g(m, "role", c.h = x), u !== c.r && g(m, "aria-multiline", c.r = u), z !== c.d && g(m, "aria-disabled", c.d = z), c;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0
+    }), t;
+  })();
+}
+function vt(e) {
+  const i = le({
+    viewportScale: () => e.viewportScale,
+    readPosition: () => ({
+      x: e.item.x,
+      y: e.item.y
+    }),
+    onCommitMove: (r) => e.onCommitMove(e.item.id, r),
+    onPreviewMove: (r) => e.onPreviewGeometry?.({
+      kind: "background_layer",
+      id: e.item.id,
+      x: r.x,
+      y: r.y,
+      width: e.item.width,
+      height: e.item.height
+    }),
+    onPreviewEnd: () => e.onPreviewGeometry?.(null)
+  }), o = $(() => {
+    const r = re(e.preview, "background_layer", e.item.id);
+    return {
+      x: r?.x ?? i.position().x,
+      y: r?.y ?? i.position().y,
+      width: r?.width ?? e.item.width,
+      height: r?.height ?? e.item.height
+    };
+  }), n = $(() => ({
+    width: `${o().width}px`,
+    height: `${o().height}px`,
+    transform: `translate(${o().x}px, ${o().y}px)`,
+    "z-index": `${e.item.z_index}`,
+    "--workbench-region-fill": e.item.fill,
+    "--workbench-region-ink": `color-mix(in srgb, ${e.item.fill} 48%, var(--foreground, #111) 52%)`,
+    "--workbench-region-opacity": `${e.item.opacity}`
+  })), a = (r) => {
+    !e.editable || r.button !== 0 || r.target instanceof Element && r.target.closest(".workbench-background-region__toolbar, .workbench-layer-resize") || (e.onSelect(e.item.id), i.beginDrag(r));
+  };
+  return (() => {
+    var r = Ve();
+    return r.$$contextmenu = (t) => {
+      e.editable && (t.preventDefault(), t.stopPropagation(), e.onSelect(e.item.id), e.onContextMenu?.(t, e.item));
+    }, r.addEventListener("focus", () => e.editable && e.onSelect(e.item.id)), r.$$pointerdown = a, W((t) => {
+      var m = {
+        "is-selected": e.selected,
+        "is-editable": e.editable,
+        [`is-material-${e.item.material}`]: !0
+      }, _ = e.editable ? "true" : void 0, c = e.item.id, k = n(), S = e.editable ? 0 : void 0;
+      return t.e = ue(r, m, t.e), _ !== t.t && g(r, "data-floe-canvas-interactive", t.t = _), c !== t.a && g(r, "data-wb-object-id", t.a = c), t.o = ee(r, k, t.o), S !== t.i && g(r, "tabindex", t.i = S), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), r;
+  })();
+}
+function ft(e) {
+  let i, o, n;
+  const [a, r] = B(""), [t, m] = B(!1), [_, c] = B(!1), k = $(() => se.find((u) => u.fontFamily === e.item.font_family) ?? se[0]), S = le({
+    viewportScale: () => e.viewportScale,
+    readPosition: () => ({
+      x: e.item.x,
+      y: e.item.y
+    }),
+    onCommitMove: (u) => e.onCommitMove(e.item.id, u),
+    onPreviewMove: (u) => e.onPreviewGeometry?.({
+      kind: "annotation",
+      id: e.item.id,
+      x: u.x,
+      y: u.y,
+      width: e.item.width,
+      height: e.item.height
+    }),
+    onPreviewEnd: () => e.onPreviewGeometry?.(null)
+  }), s = he({
+    viewportScale: () => e.viewportScale,
+    readSize: () => ({
+      width: e.item.width,
+      height: e.item.height
+    }),
+    minWidth: ut,
+    minHeight: mt,
+    onCommitResize: (u) => e.onCommitResize(e.item.id, u),
+    onPreviewResize: (u) => e.onPreviewGeometry?.({
+      kind: "annotation",
+      id: e.item.id,
+      x: e.item.x,
+      y: e.item.y,
+      width: u.width,
+      height: u.height
+    }),
+    onPreviewEnd: () => e.onPreviewGeometry?.(null)
+  }), l = $(() => {
+    const u = re(e.preview, "annotation", e.item.id);
+    return {
+      x: u?.x ?? S.position().x,
+      y: u?.y ?? S.position().y,
+      width: s.size().width,
+      height: s.size().height
+    };
+  }), d = $(() => ({
+    width: `${l().width}px`,
+    height: `${l().height}px`,
+    transform: `translate(${l().x}px, ${l().y}px)`,
+    "z-index": `${e.item.z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(e.viewportScale, 1e-3)}`
+  })), G = () => Ie(["left", "center", "right"], e.item.align), w = (u) => {
+    if (!Number.isFinite(u)) return;
+    const z = wt(u);
+    r(String(z)), e.onUpdate(e.item.id, {
+      font_size: z
+    });
+  }, x = () => {
+    const u = a().trim(), z = Number(u);
+    if (u.length > 0 && Number.isFinite(z)) {
+      w(z);
+      return;
+    }
+    r(String(e.item.font_size));
+  };
+  return ae(() => {
+    typeof document < "u" && document.activeElement === i || r(String(e.item.font_size));
+  }), _e(t, () => o, () => m(!1)), _e(_, () => n, () => c(!1)), (() => {
+    var u = Qe(), z = u.firstChild, C = z.nextSibling, L = C.firstChild, b = L.nextSibling, O = b.firstChild, j = O.firstChild, H = j.nextSibling, E = b.nextSibling, A = E.firstChild, D = A.nextSibling, J = D.nextSibling, U = E.nextSibling, ce = U.firstChild, ie = U.nextSibling, de = ie.nextSibling, Re = C.nextSibling;
+    C.$$click = K, C.$$pointerdown = Y, L.$$click = T, N(L, "pointerdown", S.beginDrag, !0), y(L, v(Se, {
+      class: "w-3.5 h-3.5"
+    })), b.$$click = K, b.$$pointerdown = Y;
+    var be = o;
+    typeof be == "function" ? Z(be, b) : o = b, O.$$click = (h) => {
+      T(h), m((f) => !f);
+    }, O.$$pointerdown = M, y(H, () => k().label), y(O, v(Oe, {
+      class: "workbench-text-font-trigger__icon"
+    }), null), y(b, v(F, {
+      get when() {
+        return t();
+      },
+      get children() {
+        var h = Je();
+        return y(h, v(V, {
+          each: se,
+          children: (f) => (() => {
+            var P = Ze(), X = P.firstChild, ne = X.nextSibling;
+            return P.$$click = (I) => {
+              T(I), e.onUpdate(e.item.id, {
+                font_family: f.fontFamily,
+                font_weight: f.fontWeight
+              }), m(!1);
+            }, P.$$pointerdown = M, y(ne, () => f.label), W((I) => {
+              var Q = e.item.font_family === f.fontFamily, ve = `Use ${f.label} bold font`, fe = `${f.label} bold`, ye = e.item.font_family === f.fontFamily, xe = f.fontFamily, ke = `${f.fontWeight}`;
+              return Q !== I.e && g(P, "aria-checked", I.e = Q), ve !== I.t && g(P, "aria-label", I.t = ve), fe !== I.a && g(P, "title", I.a = fe), ye !== I.o && P.classList.toggle("is-active", I.o = ye), xe !== I.i && q(X, "font-family", I.i = xe), ke !== I.n && q(X, "font-weight", I.n = ke), I;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0,
+              n: void 0
+            }), P;
+          })()
+        })), h;
+      }
+    }), null), E.$$click = K, E.$$pointerdown = Y, A.$$click = (h) => {
+      T(h), w(e.item.font_size - 1);
+    }, A.$$pointerdown = M, y(A, v(We, {
+      class: "w-3 h-3"
+    })), D.$$keydown = (h) => {
+      h.key === "Enter" && (h.preventDefault(), x(), h.currentTarget.blur());
+    }, D.addEventListener("blur", x), D.$$input = (h) => r(h.currentTarget.value), D.$$click = K, D.$$pointerdown = Y;
+    var we = i;
+    typeof we == "function" ? Z(we, D) : i = D, J.$$click = (h) => {
+      T(h), w(e.item.font_size + 1);
+    }, J.$$pointerdown = M, y(J, v(Ne, {
+      class: "w-3 h-3"
+    })), y(C, v(V, {
+      each: Fe,
+      children: (h) => (() => {
+        var f = pe();
+        return f.$$click = (P) => {
+          T(P), e.onUpdate(e.item.id, {
+            color: h
+          });
+        }, f.$$pointerdown = M, g(f, "aria-label", `Use text color ${h}`), q(f, "background", h), W(() => f.classList.toggle("is-active", e.item.color === h)), f;
+      })()
+    }), U), U.$$click = K, U.$$pointerdown = Y;
+    var ge = n;
+    return typeof ge == "function" ? Z(ge, U) : n = U, ce.$$click = (h) => {
+      T(h), c((f) => !f);
+    }, ce.$$pointerdown = M, y(U, v(F, {
+      get when() {
+        return _();
+      },
+      get children() {
+        var h = qe();
+        return y(h, v(V, {
+          each: Be,
+          children: (f) => (() => {
+            var P = et();
+            return P.$$click = (X) => {
+              T(X), e.textEditorRegistry?.get(e.item.id)?.insertTextAtSelection(f), c(!1);
+            }, P.$$pointerdown = M, g(P, "aria-label", `Insert emoji ${f}`), g(P, "title", `Insert ${f}`), y(P, f), P;
+          })()
+        })), h;
+      }
+    }), null), ie.$$click = (h) => {
+      T(h), e.onUpdate(e.item.id, {
+        align: G()
+      });
+    }, ie.$$pointerdown = M, y(ie, () => e.item.align), de.$$click = (h) => {
+      T(h), e.onDelete(e.item.id);
+    }, de.$$pointerdown = M, y(de, v(me, {
+      class: "w-3.5 h-3.5"
+    })), N(Re, "pointerdown", s.beginResize, !0), W((h) => {
+      var f = e.item.id, P = d(), X = t(), ne = k().fontFamily, I = `${k().fontWeight}`, Q = _();
+      return f !== h.e && g(u, "data-wb-object-id", h.e = f), h.t = ee(u, P, h.t), X !== h.a && g(O, "aria-expanded", h.a = X), ne !== h.o && q(j, "font-family", h.o = ne), I !== h.i && q(j, "font-weight", h.i = I), Q !== h.n && g(ce, "aria-expanded", h.n = Q), h;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), W(() => D.value = a()), u;
+  })();
+}
+function yt(e) {
+  const i = he({
+    viewportScale: () => e.viewportScale,
+    readSize: () => ({
+      width: e.item.width,
+      height: e.item.height
+    }),
+    minWidth: dt,
+    minHeight: st,
+    onCommitResize: (a) => e.onCommitResize(e.item.id, a),
+    onPreviewResize: (a) => e.onPreviewGeometry?.({
+      kind: "background_layer",
+      id: e.item.id,
+      x: e.item.x,
+      y: e.item.y,
+      width: a.width,
+      height: a.height
+    }),
+    onPreviewEnd: () => e.onPreviewGeometry?.(null)
+  }), o = $(() => {
+    const a = re(e.preview, "background_layer", e.item.id);
+    return {
+      x: a?.x ?? e.item.x,
+      y: a?.y ?? e.item.y,
+      width: i.size().width,
+      height: i.size().height
+    };
+  }), n = $(() => ({
+    width: `${o().width}px`,
+    height: `${o().height}px`,
+    transform: `translate(${o().x}px, ${o().y}px)`,
+    "z-index": `${e.item.z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(e.viewportScale, 1e-3)}`,
+    "--workbench-region-fill": e.item.fill,
+    "--workbench-region-ink": `color-mix(in srgb, ${e.item.fill} 48%, var(--foreground, #111) 52%)`
+  }));
+  return (() => {
+    var a = tt(), r = a.firstChild, t = r.nextSibling, m = t.firstChild, _ = m.nextSibling, c = _.firstChild, k = _.nextSibling, S = t.nextSibling;
+    return t.$$click = K, t.$$pointerdown = Y, y(t, v(V, {
+      each: je,
+      children: (s) => (() => {
+        var l = it();
+        return l.$$click = (d) => {
+          T(d), e.onUpdate(e.item.id, {
+            fill: s
+          });
+        }, l.$$pointerdown = M, g(l, "aria-label", `Use region color ${s}`), q(l, "background", s), W(() => l.classList.toggle("is-active", e.item.fill === s)), l;
+      })()
+    }), m), m.$$click = K, m.$$pointerdown = Y, y(m, v(V, {
+      each: Ae,
+      children: (s) => (() => {
+        var l = nt();
+        return l.$$click = (d) => {
+          T(d), e.onUpdate(e.item.id, {
+            material: s
+          });
+        }, l.$$pointerdown = M, W((d) => {
+          var G = `Use region material ${$e[s]}`, w = $e[s], x = {
+            "is-active": e.item.material === s,
+            [`is-${s}`]: !0
+          };
+          return G !== d.e && g(l, "aria-label", d.e = G), w !== d.t && g(l, "title", d.t = w), d.a = ue(l, x, d.a), d;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), l;
+      })()
+    })), _.$$click = (s) => {
+      T(s), e.onUpdate(e.item.id, {
+        opacity: e.item.opacity >= 0.88 ? 0.42 : e.item.opacity + 0.18
+      });
+    }, _.$$pointerdown = M, y(_, () => Math.round(e.item.opacity * 100), c), k.$$click = (s) => {
+      T(s), e.onDelete(e.item.id);
+    }, k.$$pointerdown = M, y(k, v(me, {
+      class: "w-3.5 h-3.5"
+    })), N(S, "pointerdown", i.beginResize, !0), W((s) => {
+      var l = e.item.id, d = n();
+      return l !== s.e && g(a, "data-wb-object-id", s.e = l), s.t = ee(a, d, s.t), s;
+    }, {
+      e: void 0,
+      t: void 0
+    }), a;
+  })();
+}
+function It(e) {
+  const i = $(() => Pe(e.items)), o = $(() => Ee(e.items).map((n) => n.id));
+  return (() => {
+    var n = ot();
+    return y(n, v(V, {
+      get each() {
+        return o();
+      },
+      children: (a) => {
+        const r = $(() => i().get(a) ?? null);
+        return v(F, {
+          get when() {
+            return r();
+          },
+          children: (t) => v(vt, {
+            get item() {
+              return t();
+            },
+            get selected() {
+              return p(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === a;
+            },
+            get editable() {
+              return e.editable;
+            },
+            get viewportScale() {
+              return e.viewport.scale;
+            },
+            get preview() {
+              return e.preview;
+            },
+            get onPreviewGeometry() {
+              return e.onPreviewGeometry;
+            },
+            get onSelect() {
+              return e.onSelect;
+            },
+            get onContextMenu() {
+              return e.onContextMenu;
+            },
+            get onCommitMove() {
+              return e.onCommitMove;
+            }
+          })
+        });
+      }
+    })), W((a) => {
+      var r = !!e.editable, t = !!e.filtered;
+      return r !== a.e && n.classList.toggle("is-editable", a.e = r), t !== a.t && n.classList.toggle("is-filtered-out", a.t = t), a;
+    }, {
+      e: void 0,
+      t: void 0
+    }), n;
+  })();
+}
+function Tt(e) {
+  const i = $(() => Pe(e.items)), o = $(() => Ee(e.items).map((n) => n.id));
+  return (() => {
+    var n = at();
+    return y(n, v(V, {
+      get each() {
+        return o();
+      },
+      children: (a) => {
+        const r = $(() => i().get(a) ?? null);
+        return v(F, {
+          get when() {
+            return r();
+          },
+          children: (t) => v(gt, {
+            get item() {
+              return t();
+            },
+            get selected() {
+              return p(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === a;
+            },
+            get editable() {
+              return e.editable;
+            },
+            get viewportScale() {
+              return e.viewport.scale;
+            },
+            get preview() {
+              return e.preview;
+            },
+            get onPreviewGeometry() {
+              return e.onPreviewGeometry;
+            },
+            get textEditorRegistry() {
+              return e.textEditorRegistry;
+            },
+            get onSelect() {
+              return e.onSelect;
+            },
+            get onContextMenu() {
+              return e.onContextMenu;
+            },
+            get onCommitMove() {
+              return e.onCommitMove;
+            },
+            get onUpdate() {
+              return e.onUpdate;
+            }
+          })
+        });
+      }
+    })), W((a) => {
+      var r = !!e.editable, t = !!e.filtered;
+      return r !== a.e && n.classList.toggle("is-editable", a.e = r), t !== a.t && n.classList.toggle("is-filtered-out", a.t = t), a;
+    }, {
+      e: void 0,
+      t: void 0
+    }), n;
+  })();
+}
+function Rt(e) {
+  const i = $(() => e.selectedObject?.kind === "annotation" ? e.annotations.find((n) => n.id === e.selectedObject?.id && n.kind === "text") ?? null : null), o = $(() => e.selectedObject?.kind === "background_layer" ? e.backgroundLayers.find((n) => n.id === e.selectedObject?.id) ?? null : null);
+  return (() => {
+    var n = rt();
+    return y(n, v(F, {
+      get when() {
+        return p(() => !!e.editable)() && o();
+      },
+      children: (a) => v(yt, {
+        get item() {
+          return a();
+        },
+        get viewportScale() {
+          return e.viewport.scale;
+        },
+        get preview() {
+          return e.preview;
+        },
+        get onPreviewGeometry() {
+          return e.onPreviewGeometry;
+        },
+        get onCommitResize() {
+          return e.onCommitBackgroundResize;
+        },
+        get onUpdate() {
+          return e.onUpdateBackgroundLayer;
+        },
+        get onDelete() {
+          return e.onDeleteBackgroundLayer;
+        }
+      })
+    }), null), y(n, v(F, {
+      get when() {
+        return p(() => !!e.editable)() && i();
+      },
+      children: (a) => v(ft, {
+        get item() {
+          return a();
+        },
+        get viewportScale() {
+          return e.viewport.scale;
+        },
+        get preview() {
+          return e.preview;
+        },
+        get onPreviewGeometry() {
+          return e.onPreviewGeometry;
+        },
+        get textEditorRegistry() {
+          return e.textEditorRegistry;
+        },
+        get onCommitMove() {
+          return e.onCommitAnnotationMove;
+        },
+        get onCommitResize() {
+          return e.onCommitAnnotationResize;
+        },
+        get onUpdate() {
+          return e.onUpdateTextAnnotation;
+        },
+        get onDelete() {
+          return e.onDeleteAnnotation;
+        }
+      })
+    }), null), W(() => n.classList.toggle("is-editable", !!e.editable)), n;
+  })();
+}
+Me(["pointerdown", "contextmenu", "input", "click", "keydown"]);
+export {
+  Tt as WorkbenchAnnotationLayerView,
+  It as WorkbenchBackgroundLayerView,
+  vt as WorkbenchBackgroundRegion,
+  Rt as WorkbenchLayerControlOverlayView,
+  Pt as WorkbenchStickyNote,
+  gt as WorkbenchTextAnnotation,
+  Et as createWorkbenchTextEditorRegistry
+};