@floegence/floe-webapp-core 0.36.44 → 0.36.45

package/dist/components/workbench/WorkbenchLayerObjects.js

@@ -1,18 +1,19 @@
-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 Oe } 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 Ce, Check as We, Copy as Ne, Trash as me, ChevronDown as Ge, Minus as je, Plus as Ae } from "../icons/index.js";
-import { startHotInteraction as ze } from "../../utils/hotInteraction.js";
-import { startPointerSession as Ee } from "../ui/pointerSession.js";
-import { WORKBENCH_STICKY_NOTE_COLORS as Fe, WORKBENCH_REGION_FILL_OPTIONS as Be, WORKBENCH_BACKGROUND_MATERIALS as He, WORKBENCH_TEXT_FONT_OPTIONS as se, WORKBENCH_TEXT_COLOR_OPTIONS as Ue, WORKBENCH_TEXT_EMOJI_OPTIONS as Xe } from "./workbenchOptions.js";
-import { createWorkbenchWidgetSurfaceMetrics as Ye } from "./workbenchHelpers.js";
-var Ke = /* @__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">'), Ve = /* @__PURE__ */ R('<button type=button class="workbench-layer-resize workbench-sticky__resize"aria-label="Resize sticky note">'), Je = /* @__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>'), qe = /* @__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>"), Qe = /* @__PURE__ */ R("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body>"), Ze = /* @__PURE__ */ R('<div class=workbench-text-font-popover role=menu aria-label="Bold font">'), pe = /* @__PURE__ */ R("<div class=workbench-text-emoji-popover role=menu aria-label=Emoji>"), et = /* @__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>'), tt = /* @__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>"), it = /* @__PURE__ */ R("<button type=button class=workbench-layer-swatch>"), nt = /* @__PURE__ */ R("<button type=button role=menuitem class=workbench-text-emoji-option>"), ot = /* @__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>'), at = /* @__PURE__ */ R('<button type=button class="workbench-layer-swatch workbench-layer-swatch--region">'), rt = /* @__PURE__ */ R("<button type=button class=workbench-region-material><span class=workbench-region-material__sample aria-hidden=true>"), lt = /* @__PURE__ */ R("<div class=workbench-background-layer>"), ct = /* @__PURE__ */ R("<div class=workbench-annotation-layer>"), dt = /* @__PURE__ */ R("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
-const st = 190, ut = 132, mt = 180, ht = 120, bt = 96, wt = 42, $e = {
+import { insert as z, createComponent as y, memo as ve, effect as U, template as D, classList as Ie, setAttribute as x, style as be, addEventListener as J, use as fe, setStyleProperty as me, delegateEvents as Qe } from "solid-js/web";
+import { createMemo as _, For as se, Show as te, createEffect as Pe, onCleanup as ke, createSignal as re, untrack as ze, batch as Ee } from "solid-js";
+import { GripVertical as Ye, Check as Ze, Copy as et, Trash as Te, ChevronDown as tt, Minus as nt, Plus as it } from "../icons/index.js";
+import { startHotInteraction as Ue } from "../../utils/hotInteraction.js";
+import { startPointerSession as Ve } from "../ui/pointerSession.js";
+import { WORKBENCH_STICKY_NOTE_COLORS as ot, WORKBENCH_REGION_FILL_OPTIONS as rt, WORKBENCH_BACKGROUND_MATERIALS as at, WORKBENCH_TEXT_FONT_OPTIONS as Me, WORKBENCH_TEXT_COLOR_OPTIONS as ct, WORKBENCH_TEXT_EMOJI_OPTIONS as lt } from "./workbenchOptions.js";
+import { createWorkbenchWidgetSurfaceMetrics as st } from "./workbenchHelpers.js";
+import { createOwnerSafePropAccessor as n } from "./workbenchOwnerSafeAccessors.js";
+var dt = /* @__PURE__ */ D('<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">'), ut = /* @__PURE__ */ D('<button type=button class="workbench-layer-resize workbench-sticky__resize"aria-label="Resize sticky note">'), ht = /* @__PURE__ */ D('<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>'), wt = /* @__PURE__ */ D("<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>"), mt = /* @__PURE__ */ D("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body>"), vt = /* @__PURE__ */ D('<div class=workbench-text-font-popover role=menu aria-label="Bold font">'), bt = /* @__PURE__ */ D("<div class=workbench-text-emoji-popover role=menu aria-label=Emoji>"), gt = /* @__PURE__ */ D('<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>'), yt = /* @__PURE__ */ D("<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>"), ft = /* @__PURE__ */ D("<button type=button class=workbench-layer-swatch>"), kt = /* @__PURE__ */ D("<button type=button role=menuitem class=workbench-text-emoji-option>"), xt = /* @__PURE__ */ D('<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>'), $t = /* @__PURE__ */ D('<button type=button class="workbench-layer-swatch workbench-layer-swatch--region">'), _t = /* @__PURE__ */ D("<button type=button class=workbench-region-material><span class=workbench-region-material__sample aria-hidden=true>"), Ct = /* @__PURE__ */ D("<div class=workbench-region-visibility-outline aria-hidden=true data-wb-plane=overlay data-wb-object-kind=region-outline>"), St = /* @__PURE__ */ D("<div class=workbench-region-visibility-outline-layer aria-hidden=true>"), pt = /* @__PURE__ */ D("<div class=workbench-background-layer>"), zt = /* @__PURE__ */ D("<div class=workbench-annotation-layer>"), Et = /* @__PURE__ */ D("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
+const Pt = 190, Rt = 132, Mt = 180, It = 120, Tt = 96, jt = 42, Fe = {
   solid: "Solid",
   dotted: "Dotted",
   grid: "Grid",
   hatched: "Hatched",
   glass: "Glass"
-}, gt = {
+}, Lt = {
   amber: "is-amber",
   sage: "is-sage",
   azure: "is-azure",
@@ -20,393 +21,451 @@ const st = 190, ut = 132, mt = 180, ht = 120, bt = 96, wt = 42, $e = {
   rose: "is-rose",
   graphite: "is-graphite"
 };
-function Mt() {
+function Qt() {
   const e = /* @__PURE__ */ new Map();
   return {
-    register(i, o) {
-      return e.set(i, o), () => {
-        e.get(i) === o && e.delete(i);
+    register(t, c) {
+      return e.set(t, c), () => {
+        e.get(t) === c && e.delete(t);
       };
     },
-    get(i) {
-      return e.get(i);
+    get(t) {
+      return e.get(t);
     }
   };
 }
-function Pe(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 je(e) {
+  return [...e].sort((t, c) => t.z_index !== c.z_index ? t.z_index - c.z_index : t.created_at_unix_ms !== c.created_at_unix_ms ? t.created_at_unix_ms - c.created_at_unix_ms : t.id.localeCompare(c.id));
 }
-function Ie(e) {
-  return new Map(e.map((i) => [i.id, i]));
+function Le(e) {
+  return new Map(e.map((t) => [t.id, t]));
 }
-function Me(e, i) {
-  const o = e.findIndex((n) => n === i);
-  return e[(o + 1) % e.length] ?? e[0];
+function Ke(e, t) {
+  const c = e.findIndex((i) => i === t);
+  return e[(c + 1) % e.length] ?? e[0];
 }
-function _e(e, i, o) {
-  ae(() => {
+function Be(e, t, c) {
+  Pe(() => {
     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();
+    const i = (v) => {
+      const g = t();
+      g && v.target instanceof Node && g.contains(v.target) || c();
+    }, l = (v) => {
+      v.key === "Escape" && c();
     };
-    document.addEventListener("pointerdown", n, !0), document.addEventListener("keydown", a), te(() => {
-      document.removeEventListener("pointerdown", n, !0), document.removeEventListener("keydown", a);
+    document.addEventListener("pointerdown", i, !0), document.addEventListener("keydown", l), ke(() => {
+      document.removeEventListener("pointerdown", i, !0), document.removeEventListener("keydown", l);
     });
   });
 }
-function vt(e, i) {
+function Ot(e, t) {
   if (!e || e.rangeCount <= 0) return !1;
-  const o = e.getRangeAt(0).commonAncestorContainer;
-  return o === i || i.contains(o);
+  const c = e.getRangeAt(0).commonAncestorContainer;
+  return c === t || t.contains(c);
 }
-function Re(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);
+function Je(e) {
+  const [t, c] = re(), [i, l] = re(!1), [v, g] = re(!1), C = () => t()?.textContent ?? e.value(), b = (a) => c(a), I = (a) => {
+    const R = a.textContent ?? "";
+    R !== e.value() && e.onCommit(R);
   };
-  return ae(() => {
-    const x = i();
-    if (!x || n() || r()) return;
-    const u = e.value();
-    (x.textContent ?? "") !== u && (x.textContent = u);
+  return Pe(() => {
+    const a = t();
+    if (!a || i() || v()) return;
+    const R = e.value();
+    (a.textContent ?? "") !== R && (a.textContent = R);
   }), {
-    bind: _,
-    readText: m,
-    focus: () => i()?.focus(),
-    insertTextAtSelection: (x) => {
-      const u = i();
-      if (!u) return;
-      u.focus();
-      const z = document.getSelection(), C = vt(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);
+    bind: b,
+    readText: C,
+    focus: () => t()?.focus(),
+    insertTextAtSelection: (a) => {
+      const R = t();
+      if (!R) return;
+      R.focus();
+      const T = document.getSelection(), s = Ot(T, R), o = s && T ? T.getRangeAt(0) : document.createRange();
+      s || (o.selectNodeContents(R), o.collapse(!1)), o.deleteContents();
+      const h = document.createTextNode(a);
+      o.insertNode(h), o.setStartAfter(h), o.collapse(!0), T?.removeAllRanges(), T?.addRange(o), I(R);
     },
     handleFocus: () => {
-      t(!0);
+      g(!0);
     },
-    handleBlur: (x) => {
-      n() || c(x.currentTarget), t(!1);
+    handleBlur: (a) => {
+      i() || I(a.currentTarget), g(!1);
     },
-    handleInput: (x) => {
-      n() || x.isComposing || c(x.currentTarget);
+    handleInput: (a) => {
+      i() || a.isComposing || I(a.currentTarget);
     },
     handleCompositionStart: () => {
-      a(!0);
+      l(!0);
     },
-    handleCompositionEnd: (x) => {
-      c(x.currentTarget), a(!1);
+    handleCompositionEnd: (a) => {
+      I(a.currentTarget), l(!1);
     }
   };
 }
-function ft(e) {
+function Dt(e) {
   return Math.max(8, Math.min(160, Math.round(e)));
 }
-function Te(e) {
+function qe(e) {
   return Math.max(0.08, Math.min(1, e));
 }
-function Se(e) {
-  return `${Math.round(Te(e) * 1e3) / 10}%`;
+function Xe(e) {
+  return `${Math.round(qe(e) * 1e3) / 10}%`;
 }
-function Le(e) {
-  const i = Te(e.opacity), o = `color-mix(in srgb, ${e.fill} ${Math.round(i * 100)}%, transparent)`;
+function Oe(e) {
+  const t = qe(e.opacity), c = `color-mix(in srgb, ${e.fill} ${Math.round(t * 100)}%, transparent)`;
   return {
     "--workbench-region-fill": e.fill,
-    "--workbench-region-surface": o,
-    "--workbench-region-ink": `color-mix(in srgb, color-mix(in srgb, ${e.fill} 48%, var(--foreground, #111) 52%) ${Se(Math.max(i, 0.42) * 0.72)}, transparent)`,
-    "--workbench-region-highlight": `color-mix(in srgb, white ${Se(Math.max(i, 0.32) * 0.2)}, transparent)`
+    "--workbench-region-surface": c,
+    "--workbench-region-ink": `color-mix(in srgb, color-mix(in srgb, ${e.fill} 48%, var(--foreground, #111) 52%) ${Xe(Math.max(t, 0.42) * 0.72)}, transparent)`,
+    "--workbench-region-highlight": `color-mix(in srgb, white ${Xe(Math.max(t, 0.32) * 0.2)}, transparent)`
   };
 }
-function Y(e) {
+function he(e) {
   e.stopPropagation();
 }
-function K(e) {
+function we(e) {
   e.stopPropagation();
 }
-function T(e) {
+function X(e) {
   e.preventDefault(), e.stopPropagation();
 }
-function M(e) {
+function A(e) {
   e.stopPropagation();
 }
-function re(e, i, o) {
-  return e?.kind === i && e.id === o ? e : null;
+function xe(e, t, c) {
+  return e?.kind === t && e.id === c ? e : null;
+}
+function pe(e) {
+  const t = typeof window < "u" && Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+  return Math.round(e * t) / t;
+}
+function $e(e) {
+  const t = Math.max(e.viewport.scale, 1e-3);
+  return e.projection !== "screen" ? {
+    ...e.geometry,
+    scale: t
+  } : {
+    x: pe(e.viewport.x + e.geometry.x * t),
+    y: pe(e.viewport.y + e.geometry.y * t),
+    width: Math.max(1, pe(e.geometry.width * t)),
+    height: Math.max(1, pe(e.geometry.height * t)),
+    scale: 1
+  };
+}
+function _e(e) {
+  return {
+    width: `${e.width}px`,
+    height: `${e.height}px`,
+    transform: `translate(${e.x}px, ${e.y}px)`
+  };
+}
+function Ce(e) {
+  return {
+    x: e.preview?.x ?? e.position.x,
+    y: e.preview?.y ?? e.position.y,
+    width: e.preview?.width ?? e.width,
+    height: e.preview?.height ?? e.height
+  };
 }
-function le(e) {
-  const [i, o] = B(null);
-  let n;
-  return te(() => {
-    n?.stop({
+function Re(e) {
+  const t = n(() => e.readPosition()), c = n(() => e.readGeometry?.() ?? {
+    width: 0,
+    height: 0
+  }), i = n(() => e.viewportScale()), l = n(() => e.onCommitMove), v = n(() => e.onPreviewMove), g = n(() => e.onPreviewEnd), C = n(() => e.onInteractionStart), b = n(() => e.onInteractionEnd), I = n(() => e.onCommitStart), [k, j] = re(null);
+  let L;
+  return ke(() => {
+    L?.stop({
       reason: "manual_stop",
       commit: !1
-    }), n = void 0, oe(i)?.stopInteraction();
+    }), L = void 0, ze(k)?.stopInteraction();
   }), {
-    position: $(() => {
-      const t = i();
-      return t ? {
-        x: t.worldX,
-        y: t.worldY
-      } : e.readPosition();
+    position: _(() => {
+      const $ = k();
+      return $ ? {
+        x: $.worldX,
+        y: $.worldY
+      } : t();
     }),
-    isDragging: () => i() !== null,
-    beginDrag: (t) => {
-      if (t.button !== 0) return;
-      t.preventDefault(), t.stopPropagation(), n?.stop({
+    isDragging: () => k() !== null,
+    beginDrag: ($) => {
+      if ($.button !== 0) return;
+      $.preventDefault(), $.stopPropagation(), L?.stop({
         reason: "manual_stop",
         commit: !1
       });
-      const m = e.readPosition(), _ = Math.max(e.viewportScale(), 1e-3), c = ze({
+      const d = t(), a = Math.max(i(), 1e-3), R = Ue({
         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: _,
+      let T = !1;
+      C()?.();
+      const s = () => {
+        T || (T = !0, R(), b()?.());
+      }, o = c(), h = v(), r = g(), M = I(), q = l();
+      j({
+        pointerId: $.pointerId,
+        startClientX: $.clientX,
+        startClientY: $.clientY,
+        startWorldX: d.x,
+        startWorldY: d.y,
+        worldX: d.x,
+        worldY: d.y,
+        scale: a,
         moved: !1,
-        stopInteraction: S
-      }), n = Ee({
-        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);
+        stopInteraction: s
+      }), L = Ve({
+        pointerEvent: $,
+        captureEl: $.currentTarget,
+        onMove: (F) => {
+          let G = null;
+          Ee(() => {
+            j((p) => {
+              if (!p || p.pointerId !== F.pointerId) return p;
+              const m = {
+                x: p.startWorldX + (F.clientX - p.startClientX) / p.scale,
+                y: p.startWorldY + (F.clientY - p.startClientY) / p.scale
+              };
+              return G = {
+                x: p.startWorldX + (F.clientX - p.startClientX) / p.scale,
+                y: p.startWorldY + (F.clientY - p.startClientY) / p.scale,
+                width: o.width,
+                height: o.height
+              }, {
+                ...p,
+                worldX: m.x,
+                worldY: m.y,
+                moved: p.moved || Math.abs(m.x - p.startWorldX) > 2 || Math.abs(m.y - p.startWorldY) > 2
+              };
+            }), G && h?.(G);
+          });
         },
         onEnd: ({
-          commit: s
+          commit: F
         }) => {
-          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?.();
+          const G = ze(k);
+          Ee(() => {
+            if (G && F) {
+              const p = {
+                x: G.worldX,
+                y: G.worldY
+              };
+              M?.(p), G.moved && q(p);
+            }
+            G?.stopInteraction(), j(null), L = void 0, r?.();
+          });
         }
       });
     }
   };
 }
-function he(e) {
-  const [i, o] = B(null);
-  let n;
-  return te(() => {
-    n?.stop({
+function De(e) {
+  const t = n(() => e.readSize()), c = n(() => e.viewportScale()), i = n(() => e.onCommitResize), l = n(() => e.onPreviewResize), v = n(() => e.onPreviewEnd), g = n(() => e.onInteractionStart), C = n(() => e.onInteractionEnd), [b, I] = re(null);
+  let k;
+  return ke(() => {
+    k?.stop({
       reason: "manual_stop",
       commit: !1
-    }), n = void 0, oe(i)?.stopInteraction();
+    }), k = void 0, ze(b)?.stopInteraction();
   }), {
-    size: $(() => {
-      const t = i();
-      return t ? {
-        width: t.width,
-        height: t.height
-      } : e.readSize();
+    size: _(() => {
+      const w = b();
+      return w ? {
+        width: w.width,
+        height: w.height
+      } : t();
     }),
-    isResizing: () => i() !== null,
-    beginResize: (t) => {
-      if (t.button !== 0) return;
-      t.preventDefault(), t.stopPropagation(), n?.stop({
+    isResizing: () => b() !== null,
+    beginResize: (w) => {
+      if (w.button !== 0) return;
+      w.preventDefault(), w.stopPropagation(), k?.stop({
         reason: "manual_stop",
         commit: !1
       });
-      const m = e.readSize(), _ = Math.max(e.viewportScale(), 1e-3), c = ze({
+      const S = t(), $ = Math.max(c(), 1e-3), d = Ue({
         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 = Ee({
-        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);
+      let a = !1;
+      g()?.();
+      const R = () => {
+        a || (a = !0, d(), C()?.());
+      }, T = l(), s = v(), o = i();
+      I({
+        pointerId: w.pointerId,
+        startClientX: w.clientX,
+        startClientY: w.clientY,
+        startWidth: S.width,
+        startHeight: S.height,
+        width: S.width,
+        height: S.height,
+        scale: $,
+        stopInteraction: R
+      }), k = Ve({
+        pointerEvent: w,
+        captureEl: w.currentTarget,
+        onMove: (h) => {
+          let r = null;
+          Ee(() => {
+            I((M) => !M || M.pointerId !== h.pointerId ? M : (r = {
+              width: Math.max(e.minWidth, M.startWidth + (h.clientX - M.startClientX) / M.scale),
+              height: Math.max(e.minHeight, M.startHeight + (h.clientY - M.startClientY) / M.scale)
+            }, {
+              ...M,
+              width: r.width,
+              height: r.height
+            })), r && T?.(r);
+          });
         },
         onEnd: ({
-          commit: s
+          commit: h
         }) => {
-          const l = oe(i);
-          l && s && e.onCommitResize({
-            width: l.width,
-            height: l.height
-          }), l?.stopInteraction(), o(null), n = void 0, e.onPreviewEnd?.();
+          const r = ze(b);
+          Ee(() => {
+            r && h && o({
+              width: r.width,
+              height: r.height
+            }), r?.stopInteraction(), I(null), k = void 0, s?.();
+          });
         }
       });
     }
   };
 }
-function Rt(e) {
-  const i = Re({
-    value: () => e.item.body,
-    onCommit: (w) => e.onUpdate(e.item.id, {
-      body: w
+function Zt(e) {
+  const t = n(() => e.item), c = n(() => e.selected), i = n(() => e.viewportScale), l = n(() => e.projectedViewport), v = n(() => e.surfaceReady ?? !0), g = n(() => e.renderLayer), C = n(() => e.topRenderLayer), b = n(() => e.locked), I = n(() => e.filtered), k = n(() => e.optimisticFront ?? !1), j = n(() => e.onSelect), L = n(() => e.onContextMenu), w = n(() => e.onStartOptimisticFront), S = n(() => e.onCommitFront), $ = n(() => e.onCommitMove), d = n(() => e.onCommitResize), a = n(() => e.onUpdate), R = n(() => e.onDelete), T = n(() => e.onLayoutInteractionStart), s = n(() => e.onLayoutInteractionEnd), o = Je({
+    value: () => t().body,
+    onCommit: (E) => a()(t().id, {
+      body: E
     })
-  }), [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);
+  }), [h, r] = re(!1);
+  let M;
+  const q = () => {
+    typeof window > "u" || M === void 0 || (window.clearTimeout(M), M = void 0);
+  }, F = () => {
+    r(!0), q(), !(typeof window > "u") && (M = window.setTimeout(() => {
+      M = void 0, r(!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,
+  ke(() => q());
+  const G = async () => {
+    typeof navigator > "u" || !navigator.clipboard?.writeText || (await navigator.clipboard.writeText(o.readText()), F());
+  }, p = (E) => {
+    if (E.button !== 0) return;
+    const oe = t();
+    j()(oe.id), !b() && (E.target instanceof Element && E.target.closest('[data-floe-workbench-sticky-local="true"]') || (w()?.(oe.id), m.beginDrag(E)));
+  }, m = Re({
+    viewportScale: i,
     readPosition: () => ({
-      x: e.item.x,
-      y: e.item.y
+      x: t().x,
+      y: t().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,
+    onCommitMove: (E) => $()(t().id, E),
+    onCommitStart: () => S()?.(t().id),
+    onInteractionStart: () => T()?.(),
+    onInteractionEnd: () => s()?.()
+  }), N = De({
+    viewportScale: i,
     readSize: () => ({
-      width: e.item.width,
-      height: e.item.height
+      width: t().width,
+      height: t().height
     }),
-    minWidth: st,
-    minHeight: ut,
-    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 Ye({
-        widgetId: e.item.id,
-        worldX: S().x,
-        worldY: S().y,
-        worldWidth: s().width,
-        worldHeight: s().height,
-        viewport: e.projectedViewport(),
-        ready: e.surfaceReady ?? !0
+    minWidth: Pt,
+    minHeight: Rt,
+    onCommitResize: (E) => d()(t().id, E),
+    onInteractionStart: () => T()?.(),
+    onInteractionEnd: () => s()?.()
+  }), K = _(() => m.position()), Q = _(() => N.size()), V = _(() => {
+    const E = l();
+    if (E)
+      return st({
+        widgetId: t().id,
+        worldX: K().x,
+        worldY: K().y,
+        worldWidth: Q().width,
+        worldHeight: Q().height,
+        viewport: E(),
+        ready: v()
       });
-  }), 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)`,
+  }), de = _(() => V()?.rect.viewportScale ?? Math.max(i(), 1e-3)), ge = _(() => ({
+    width: `${Q().width}px`,
+    height: `${Q().height}px`,
+    transform: l() ? `translate(${V()?.rect.screenX ?? 0}px, ${V()?.rect.screenY ?? 0}px) scale(${de()})` : `translate(${K().x}px, ${K().y}px)`,
     "transform-origin": "0 0",
-    "z-index": `${e.selected || e.optimisticFront || c.isDragging() || k.isResizing() ? e.topRenderLayer + 1 : e.renderLayer}`
+    "z-index": `${c() || k() || m.isDragging() || N.isResizing() ? C() + 1 : g()}`
   }));
   return (() => {
-    var w = Je(), 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(Ce, {
+    var E = ht(), oe = E.firstChild, ue = oe.firstChild, Z = ue.firstChild, Y = ue.nextSibling;
+    E.$$contextmenu = (f) => {
+      f.preventDefault(), f.stopPropagation(), L()?.(f, t());
+    }, E.addEventListener("focus", () => j()(t().id)), E.$$pointerdown = p, Z.$$pointerdown = (f) => {
+      const B = t();
+      j()(B.id), w()?.(B.id), m.beginDrag(f);
+    }, z(Z, y(Ye, {
       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);
+    })), J(Y, "compositionend", o.handleCompositionEnd), J(Y, "compositionstart", o.handleCompositionStart), J(Y, "input", o.handleInput, !0), J(Y, "blur", o.handleBlur), J(Y, "focus", o.handleFocus), Y.$$pointerdown = (f) => {
+      f.stopPropagation(), j()(t().id);
     };
-    var L = i.bind;
-    return typeof L == "function" ? Z(L, C) : i.bind = C, g(C, "spellcheck", !1), y(w, v(F, {
+    var ee = o.bind;
+    return typeof ee == "function" ? fe(ee, Y) : o.bind = Y, x(Y, "spellcheck", !1), z(E, y(te, {
       get when() {
-        return p(() => !!e.selected)() && !e.locked;
+        return ve(() => !!c())() && !b();
       },
       get children() {
-        var b = Ke(), O = b.firstChild, j = O.nextSibling, H = j.nextSibling;
-        return O.$$click = async (E) => {
-          M(E), await m();
-        }, O.$$pointerdown = T, y(O, v(F, {
+        var f = dt(), B = f.firstChild, ne = B.nextSibling, ae = ne.nextSibling;
+        return B.$$click = async (H) => {
+          A(H), await G();
+        }, B.$$pointerdown = X, z(B, y(te, {
           get when() {
-            return o();
+            return h();
           },
           get fallback() {
-            return v(Ne, {
+            return y(et, {
               class: "w-3.5 h-3.5"
             });
           },
           get children() {
-            return v(We, {
+            return y(Ze, {
               class: "w-3.5 h-3.5"
             });
           }
-        })), j.$$click = (E) => {
-          M(E), e.onUpdate(e.item.id, {
-            color: Me(Fe, e.item.color)
+        })), ne.$$click = (H) => {
+          A(H);
+          const ie = t();
+          a()(ie.id, {
+            color: Ke(ot, ie.color)
           });
-        }, j.$$pointerdown = T, H.$$click = (E) => {
-          M(E), e.onDelete(e.item.id);
-        }, H.$$pointerdown = T, y(H, v(me, {
+        }, ne.$$pointerdown = X, ae.$$click = (H) => {
+          A(H), R()(t().id);
+        }, ae.$$pointerdown = X, z(ae, y(Te, {
           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;
+        })), U((H) => {
+          var ie = !!h(), ce = h() ? "Sticky note content copied" : "Copy sticky note content";
+          return ie !== H.e && B.classList.toggle("is-success", H.e = ie), ce !== H.t && x(B, "title", H.t = ce), H;
         }, {
           e: void 0,
           t: void 0
-        }), b;
+        }), f;
       }
-    }), null), y(w, v(F, {
+    }), null), z(E, y(te, {
       get when() {
-        return !e.locked;
+        return !b();
       },
       get children() {
-        var b = Ve();
-        return N(b, "pointerdown", k.beginResize, !0), b;
+        var f = ut();
+        return J(f, "pointerdown", N.beginResize, !0), f;
       }
-    }), 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(),
-        [gt[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;
+    }), null), U((f) => {
+      var B = {
+        "is-selected": c(),
+        "is-locked": b(),
+        "is-filtered-out": I(),
+        "is-dragging": m.isDragging(),
+        "is-resizing": N.isResizing(),
+        "is-copied": h(),
+        [Lt[t().color]]: !0
+      }, ne = t().id, ae = t().id, H = t().id, ie = ge(), ce = b() ? !1 : "plaintext-only", u = b() ? "true" : void 0;
+      return f.e = Ie(E, B, f.e), ne !== f.t && x(E, "data-floe-workbench-widget-id", f.t = ne), ae !== f.a && x(E, "data-wb-object-id", f.a = ae), H !== f.o && x(E, "data-floe-workbench-sticky-id", f.o = H), f.i = be(E, ie, f.i), ce !== f.n && x(Y, "contenteditable", f.n = ce), u !== f.s && x(Y, "aria-disabled", f.s = u), f;
     }, {
       e: void 0,
       t: void 0,
@@ -415,76 +474,85 @@ function Rt(e) {
       i: void 0,
       n: void 0,
       s: void 0
-    }), w;
+    }), E;
   })();
 }
-function yt(e) {
-  const i = Re({
-    value: () => e.item.text,
-    onCommit: (t) => e.onUpdate(e.item.id, {
-      text: t
+function Gt(e) {
+  const t = n(() => e.item), c = n(() => e.selected), i = n(() => e.editable), l = n(() => e.viewportScale), v = n(() => e.viewport ?? {
+    x: 0,
+    y: 0,
+    scale: 1
+  }), g = n(() => e.projection), C = n(() => e.preview), b = n(() => e.textEditorRegistry), I = n(() => e.onPreviewGeometry), k = n(() => e.onSelect), j = n(() => e.onContextMenu), L = n(() => e.onCommitMove), w = n(() => e.onUpdate), S = Je({
+    value: () => t().text,
+    onCommit: (s) => w()(t().id, {
+      text: s
     })
   });
-  ae(() => {
-    const t = e.textEditorRegistry;
-    if (!t) return;
-    const m = t.register(e.item.id, {
-      focus: i.focus,
-      insertTextAtSelection: i.insertTextAtSelection,
-      readText: i.readText
+  Pe(() => {
+    const s = b();
+    if (!s) return;
+    const o = s.register(t().id, {
+      focus: S.focus,
+      insertTextAtSelection: S.insertTextAtSelection,
+      readText: S.readText
     });
-    te(m);
+    ke(o);
   });
-  const o = le({
-    viewportScale: () => e.viewportScale,
+  const $ = Re({
+    viewportScale: l,
     readPosition: () => ({
-      x: e.item.x,
-      y: e.item.y
+      x: t().x,
+      y: t().y
+    }),
+    readGeometry: () => ({
+      width: t().width,
+      height: t().height
     }),
-    onCommitMove: (t) => e.onCommitMove(e.item.id, t),
-    onPreviewMove: (t) => e.onPreviewGeometry?.({
+    onCommitMove: (s) => L()(t().id, s),
+    onPreviewMove: (s) => I()?.({
       kind: "annotation",
-      id: e.item.id,
-      x: t.x,
-      y: t.y,
-      width: e.item.width,
-      height: e.item.height
+      id: t().id,
+      ...s
     }),
-    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));
+    onPreviewEnd: () => I()?.(null)
+  }), d = _(() => {
+    const s = t(), o = xe(C(), "annotation", s.id);
+    return $e({
+      geometry: Ce({
+        preview: o,
+        position: $.position(),
+        width: s.width,
+        height: s.height
+      }),
+      viewport: v(),
+      projection: g()
+    });
+  }), a = _(() => g() === "screen" ? Math.max(v().scale, 1e-3) : 1), R = _(() => ({
+    ..._e(d()),
+    "z-index": `${t().z_index}`,
+    "--workbench-text-color": t().color,
+    "--workbench-text-size": `${t().font_size}px`,
+    "--workbench-text-weight": `${t().font_weight}`,
+    "--workbench-text-align": t().align,
+    "--workbench-text-family": t().font_family,
+    "--workbench-text-content-scale": `${a()}`,
+    "--workbench-text-content-inverse-scale": `${1 / a()}`
+  })), T = (s) => {
+    !i() || s.button !== 0 || s.target instanceof Element && s.target.closest(".workbench-text-annotation__content") || (s.stopPropagation(), k()(t().id));
   };
   return (() => {
-    var t = qe(), 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 s = wt(), o = s.firstChild;
+    s.$$contextmenu = (r) => {
+      i() && (r.preventDefault(), r.stopPropagation(), k()(t().id), j()?.(r, t()));
+    }, s.$$pointerdown = T, J(o, "compositionend", S.handleCompositionEnd), J(o, "compositionstart", S.handleCompositionStart), J(o, "input", S.handleInput, !0), J(o, "blur", S.handleBlur), o.addEventListener("focus", (r) => {
+      S.handleFocus(r), i() && k()(t().id);
+    }), o.$$pointerdown = (r) => {
+      !i() || r.button !== 0 || k()(t().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;
+    var h = S.bind;
+    return typeof h == "function" ? fe(h, o) : S.bind = o, x(o, "spellcheck", !1), U((r) => {
+      var M = !!c(), q = !!i(), F = i() ? "true" : void 0, G = t().id, p = R(), m = i() ? "plaintext-only" : !1, N = i() ? 0 : void 0, K = i() ? "textbox" : void 0, Q = i() ? "true" : void 0, V = i() ? void 0 : "true";
+      return M !== r.e && s.classList.toggle("is-selected", r.e = M), q !== r.t && s.classList.toggle("is-editable", r.t = q), F !== r.a && x(s, "data-floe-canvas-interactive", r.a = F), G !== r.o && x(s, "data-wb-object-id", r.o = G), r.i = be(s, p, r.i), m !== r.n && x(o, "contenteditable", r.n = m), N !== r.s && x(o, "tabindex", r.s = N), K !== r.h && x(o, "role", r.h = K), Q !== r.r && x(o, "aria-multiline", r.r = Q), V !== r.d && x(o, "aria-disabled", r.d = V), r;
     }, {
       e: void 0,
       t: void 0,
@@ -496,158 +564,173 @@ function yt(e) {
       h: void 0,
       r: void 0,
       d: void 0
-    }), t;
+    }), s;
   })();
 }
-function xt(e) {
-  const i = le({
-    viewportScale: () => e.viewportScale,
+function Wt(e) {
+  const t = n(() => e.item), c = n(() => e.selected), i = n(() => e.editable), l = n(() => e.viewportScale), v = n(() => e.viewport ?? {
+    x: 0,
+    y: 0,
+    scale: 1
+  }), g = n(() => e.projection), C = n(() => e.preview), b = n(() => e.onPreviewGeometry), I = n(() => e.onSelect), k = n(() => e.onContextMenu), j = n(() => e.onCommitMove), L = Re({
+    viewportScale: l,
     readPosition: () => ({
-      x: e.item.x,
-      y: e.item.y
+      x: t().x,
+      y: t().y
+    }),
+    readGeometry: () => ({
+      width: t().width,
+      height: t().height
     }),
-    onCommitMove: (r) => e.onCommitMove(e.item.id, r),
-    onPreviewMove: (r) => e.onPreviewGeometry?.({
+    onCommitMove: (d) => j()(t().id, d),
+    onPreviewMove: (d) => b()?.({
       kind: "background_layer",
-      id: e.item.id,
-      x: r.x,
-      y: r.y,
-      width: e.item.width,
-      height: e.item.height
+      id: t().id,
+      ...d
     }),
-    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}`,
-    ...Le(e.item)
-  })), 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));
+    onPreviewEnd: () => b()?.(null)
+  }), w = _(() => {
+    const d = t(), a = xe(C(), "background_layer", d.id);
+    return $e({
+      geometry: Ce({
+        preview: a,
+        position: L.position(),
+        width: d.width,
+        height: d.height
+      }),
+      viewport: v(),
+      projection: g()
+    });
+  }), S = _(() => ({
+    ..._e(w()),
+    "z-index": `${t().z_index}`,
+    ...Oe(t())
+  })), $ = (d) => {
+    !i() || d.button !== 0 || d.target instanceof Element && d.target.closest(".workbench-background-region__toolbar, .workbench-layer-resize") || (I()(t().id), L.beginDrag(d));
   };
   return (() => {
-    var r = Qe();
-    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-transforming": i.isDragging(),
-        [`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;
+    var d = mt();
+    return d.$$contextmenu = (a) => {
+      i() && (a.preventDefault(), a.stopPropagation(), I()(t().id), k()?.(a, t()));
+    }, d.addEventListener("focus", () => i() && I()(t().id)), d.$$pointerdown = $, U((a) => {
+      var R = {
+        "is-selected": c(),
+        "is-editable": i(),
+        "is-transforming": L.isDragging(),
+        [`is-material-${t().material}`]: !0
+      }, T = i() ? "true" : void 0, s = t().id, o = S(), h = i() ? 0 : void 0;
+      return a.e = Ie(d, R, a.e), T !== a.t && x(d, "data-floe-canvas-interactive", a.t = T), s !== a.a && x(d, "data-wb-object-id", a.a = s), a.o = be(d, o, a.o), h !== a.i && x(d, "tabindex", a.i = h), a;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), r;
+    }), d;
   })();
 }
-function kt(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,
+function Nt(e) {
+  const t = n(() => e.item), c = n(() => e.viewportScale), i = n(() => e.viewport ?? {
+    x: 0,
+    y: 0,
+    scale: 1
+  }), l = n(() => e.projection), v = n(() => e.preview), g = n(() => e.textEditorRegistry), C = n(() => e.onPreviewGeometry), b = n(() => e.onCommitMove), I = n(() => e.onCommitResize), k = n(() => e.onUpdate), j = n(() => e.onDelete);
+  let L, w, S;
+  const [$, d] = re(""), [a, R] = re(!1), [T, s] = re(!1), o = _(() => Me.find((m) => m.fontFamily === t().font_family) ?? Me[0]), h = Re({
+    viewportScale: c,
     readPosition: () => ({
-      x: e.item.x,
-      y: e.item.y
+      x: t().x,
+      y: t().y
+    }),
+    readGeometry: () => ({
+      width: t().width,
+      height: t().height
     }),
-    onCommitMove: (u) => e.onCommitMove(e.item.id, u),
-    onPreviewMove: (u) => e.onPreviewGeometry?.({
+    onCommitMove: (m) => b()(t().id, m),
+    onPreviewMove: (m) => C()?.({
       kind: "annotation",
-      id: e.item.id,
-      x: u.x,
-      y: u.y,
-      width: e.item.width,
-      height: e.item.height
+      id: t().id,
+      ...m
     }),
-    onPreviewEnd: () => e.onPreviewGeometry?.(null)
-  }), s = he({
-    viewportScale: () => e.viewportScale,
+    onPreviewEnd: () => C()?.(null)
+  }), r = De({
+    viewportScale: c,
     readSize: () => ({
-      width: e.item.width,
-      height: e.item.height
+      width: t().width,
+      height: t().height
     }),
-    minWidth: bt,
-    minHeight: wt,
-    onCommitResize: (u) => e.onCommitResize(e.item.id, u),
-    onPreviewResize: (u) => e.onPreviewGeometry?.({
+    minWidth: Tt,
+    minHeight: jt,
+    onCommitResize: (m) => I()(t().id, m),
+    onPreviewResize: (m) => C()?.({
       kind: "annotation",
-      id: e.item.id,
-      x: e.item.x,
-      y: e.item.y,
-      width: u.width,
-      height: u.height
+      id: t().id,
+      x: t().x,
+      y: t().y,
+      width: m.width,
+      height: m.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 = () => Me(["left", "center", "right"], e.item.align), w = (u) => {
-    if (!Number.isFinite(u)) return;
-    const z = ft(u);
-    r(String(z)), e.onUpdate(e.item.id, {
-      font_size: z
+    onPreviewEnd: () => C()?.(null)
+  }), M = _(() => {
+    const m = t(), N = xe(v(), "annotation", m.id);
+    return $e({
+      geometry: Ce({
+        preview: N,
+        position: h.position(),
+        width: r.size().width,
+        height: r.size().height
+      }),
+      viewport: i(),
+      projection: l()
+    });
+  }), q = _(() => ({
+    ..._e(M()),
+    "z-index": `${t().z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(M().scale, 1e-3)}`
+  })), F = () => Ke(["left", "center", "right"], t().align), G = (m) => {
+    if (!Number.isFinite(m)) return;
+    const N = Dt(m);
+    d(String(N)), k()(t().id, {
+      font_size: N
     });
-  }, x = () => {
-    const u = a().trim(), z = Number(u);
-    if (u.length > 0 && Number.isFinite(z)) {
-      w(z);
+  }, p = () => {
+    const m = $().trim(), N = Number(m);
+    if (m.length > 0 && Number.isFinite(N)) {
+      G(N);
       return;
     }
-    r(String(e.item.font_size));
+    d(String(t().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 = et(), 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, De = C.nextSibling;
-    C.$$click = K, C.$$pointerdown = Y, L.$$click = M, N(L, "pointerdown", S.beginDrag, !0), y(L, v(Ce, {
+  return Pe(() => {
+    typeof document < "u" && document.activeElement === L || d(String(t().font_size));
+  }), Be(a, () => w, () => R(!1)), Be(T, () => S, () => s(!1)), (() => {
+    var m = gt(), N = m.firstChild, K = N.nextSibling, Q = K.firstChild, V = Q.nextSibling, de = V.firstChild, ge = de.firstChild, E = ge.nextSibling, oe = V.nextSibling, ue = oe.firstChild, Z = ue.nextSibling, Y = Z.nextSibling, ee = oe.nextSibling, f = ee.firstChild, B = ee.nextSibling, ne = B.nextSibling, ae = K.nextSibling;
+    K.$$click = we, K.$$pointerdown = he, Q.$$click = A, J(Q, "pointerdown", h.beginDrag, !0), z(Q, y(Ye, {
       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) => {
-      M(h), m((f) => !f);
-    }, O.$$pointerdown = T, y(H, () => k().label), y(O, v(Ge, {
+    })), V.$$click = we, V.$$pointerdown = he;
+    var H = w;
+    typeof H == "function" ? fe(H, V) : w = V, de.$$click = (u) => {
+      A(u), R((P) => !P);
+    }, de.$$pointerdown = X, z(E, () => o().label), z(de, y(tt, {
       class: "workbench-text-font-trigger__icon"
-    }), null), y(b, v(F, {
+    }), null), z(V, y(te, {
       get when() {
-        return t();
+        return a();
       },
       get children() {
-        var h = Ze();
-        return y(h, v(V, {
-          each: se,
-          children: (f) => (() => {
-            var P = tt(), X = P.firstChild, ne = X.nextSibling;
-            return P.$$click = (I) => {
-              M(I), e.onUpdate(e.item.id, {
-                font_family: f.fontFamily,
-                font_weight: f.fontWeight
-              }), m(!1);
-            }, P.$$pointerdown = T, 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;
+        var u = vt();
+        return z(u, y(se, {
+          each: Me,
+          children: (P) => (() => {
+            var O = yt(), le = O.firstChild, Se = le.nextSibling;
+            return O.$$click = (W) => {
+              A(W), k()(t().id, {
+                font_family: P.fontFamily,
+                font_weight: P.fontWeight
+              }), R(!1);
+            }, O.$$pointerdown = X, z(Se, () => P.label), U((W) => {
+              var ye = t().font_family === P.fontFamily, Ge = `Use ${P.label} bold font`, We = `${P.label} bold`, Ne = t().font_family === P.fontFamily, He = P.fontFamily, Ae = `${P.fontWeight}`;
+              return ye !== W.e && x(O, "aria-checked", W.e = ye), Ge !== W.t && x(O, "aria-label", W.t = Ge), We !== W.a && x(O, "title", W.a = We), Ne !== W.o && O.classList.toggle("is-active", W.o = Ne), He !== W.i && me(le, "font-family", W.i = He), Ae !== W.n && me(le, "font-weight", W.n = Ae), W;
             }, {
               e: void 0,
               t: void 0,
@@ -655,63 +738,63 @@ function kt(e) {
               o: void 0,
               i: void 0,
               n: void 0
-            }), P;
+            }), O;
           })()
-        })), h;
+        })), u;
       }
-    }), null), E.$$click = K, E.$$pointerdown = Y, A.$$click = (h) => {
-      M(h), w(e.item.font_size - 1);
-    }, A.$$pointerdown = T, y(A, v(je, {
+    }), null), oe.$$click = we, oe.$$pointerdown = he, ue.$$click = (u) => {
+      A(u), G(t().font_size - 1);
+    }, ue.$$pointerdown = X, z(ue, y(nt, {
       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) => {
-      M(h), w(e.item.font_size + 1);
-    }, J.$$pointerdown = T, y(J, v(Ae, {
+    })), Z.$$keydown = (u) => {
+      u.key === "Enter" && (u.preventDefault(), p(), u.currentTarget.blur());
+    }, Z.addEventListener("blur", p), Z.$$input = (u) => d(u.currentTarget.value), Z.$$click = we, Z.$$pointerdown = he;
+    var ie = L;
+    typeof ie == "function" ? fe(ie, Z) : L = Z, Y.$$click = (u) => {
+      A(u), G(t().font_size + 1);
+    }, Y.$$pointerdown = X, z(Y, y(it, {
       class: "w-3 h-3"
-    })), y(C, v(V, {
-      each: Ue,
-      children: (h) => (() => {
-        var f = it();
-        return f.$$click = (P) => {
-          M(P), e.onUpdate(e.item.id, {
-            color: h
+    })), z(K, y(se, {
+      each: ct,
+      children: (u) => (() => {
+        var P = ft();
+        return P.$$click = (O) => {
+          A(O), k()(t().id, {
+            color: u
           });
-        }, f.$$pointerdown = T, g(f, "aria-label", `Use text color ${h}`), q(f, "background", h), W(() => f.classList.toggle("is-active", e.item.color === h)), f;
+        }, P.$$pointerdown = X, x(P, "aria-label", `Use text color ${u}`), me(P, "background", u), U(() => P.classList.toggle("is-active", t().color === u)), P;
       })()
-    }), U), U.$$click = K, U.$$pointerdown = Y;
-    var ge = n;
-    return typeof ge == "function" ? Z(ge, U) : n = U, ce.$$click = (h) => {
-      M(h), c((f) => !f);
-    }, ce.$$pointerdown = T, y(U, v(F, {
+    }), ee), ee.$$click = we, ee.$$pointerdown = he;
+    var ce = S;
+    return typeof ce == "function" ? fe(ce, ee) : S = ee, f.$$click = (u) => {
+      A(u), s((P) => !P);
+    }, f.$$pointerdown = X, z(ee, y(te, {
       get when() {
-        return _();
+        return T();
       },
       get children() {
-        var h = pe();
-        return y(h, v(V, {
-          each: Xe,
-          children: (f) => (() => {
-            var P = nt();
-            return P.$$click = (X) => {
-              M(X), e.textEditorRegistry?.get(e.item.id)?.insertTextAtSelection(f), c(!1);
-            }, P.$$pointerdown = T, g(P, "aria-label", `Insert emoji ${f}`), g(P, "title", `Insert ${f}`), y(P, f), P;
+        var u = bt();
+        return z(u, y(se, {
+          each: lt,
+          children: (P) => (() => {
+            var O = kt();
+            return O.$$click = (le) => {
+              A(le), g()?.get(t().id)?.insertTextAtSelection(P), s(!1);
+            }, O.$$pointerdown = X, x(O, "aria-label", `Insert emoji ${P}`), x(O, "title", `Insert ${P}`), z(O, P), O;
           })()
-        })), h;
+        })), u;
       }
-    }), null), ie.$$click = (h) => {
-      M(h), e.onUpdate(e.item.id, {
-        align: G()
+    }), null), B.$$click = (u) => {
+      A(u), k()(t().id, {
+        align: F()
       });
-    }, ie.$$pointerdown = T, y(ie, () => e.item.align), de.$$click = (h) => {
-      M(h), e.onDelete(e.item.id);
-    }, de.$$pointerdown = T, y(de, v(me, {
+    }, B.$$pointerdown = X, z(B, () => t().align), ne.$$click = (u) => {
+      A(u), j()(t().id);
+    }, ne.$$pointerdown = X, z(ne, y(Te, {
       class: "w-3.5 h-3.5"
-    })), N(De, "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;
+    })), J(ae, "pointerdown", r.beginResize, !0), U((u) => {
+      var P = t().id, O = q(), le = a(), Se = o().fontFamily, W = `${o().fontWeight}`, ye = T();
+      return P !== u.e && x(m, "data-wb-object-id", u.e = P), u.t = be(m, O, u.t), le !== u.a && x(de, "aria-expanded", u.a = le), Se !== u.o && me(ge, "font-family", u.o = Se), W !== u.i && me(ge, "font-weight", u.i = W), ye !== u.n && x(f, "aria-expanded", u.n = ye), u;
     }, {
       e: void 0,
       t: void 0,
@@ -719,113 +802,191 @@ function kt(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), W(() => D.value = a()), u;
+    }), U(() => Z.value = $()), m;
   })();
 }
-function $t(e) {
-  const i = he({
-    viewportScale: () => e.viewportScale,
+function Ht(e) {
+  const t = n(() => e.item), c = n(() => e.viewportScale), i = n(() => e.viewport ?? {
+    x: 0,
+    y: 0,
+    scale: 1
+  }), l = n(() => e.projection), v = n(() => e.preview), g = n(() => e.onPreviewGeometry), C = n(() => e.onCommitResize), b = n(() => e.onUpdate), I = n(() => e.onDelete), k = De({
+    viewportScale: c,
     readSize: () => ({
-      width: e.item.width,
-      height: e.item.height
+      width: t().width,
+      height: t().height
     }),
-    minWidth: mt,
-    minHeight: ht,
-    onCommitResize: (a) => e.onCommitResize(e.item.id, a),
-    onPreviewResize: (a) => e.onPreviewGeometry?.({
+    minWidth: Mt,
+    minHeight: It,
+    onCommitResize: (w) => C()(t().id, w),
+    onPreviewResize: (w) => g()?.({
       kind: "background_layer",
-      id: e.item.id,
-      x: e.item.x,
-      y: e.item.y,
-      width: a.width,
-      height: a.height
+      id: t().id,
+      x: t().x,
+      y: t().y,
+      width: w.width,
+      height: w.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)}`,
-    ...Le(e.item)
+    onPreviewEnd: () => g()?.(null)
+  }), j = _(() => {
+    const w = t(), S = xe(v(), "background_layer", w.id);
+    return $e({
+      geometry: Ce({
+        preview: S,
+        position: {
+          x: w.x,
+          y: w.y
+        },
+        width: k.size().width,
+        height: k.size().height
+      }),
+      viewport: i(),
+      projection: l()
+    });
+  }), L = _(() => ({
+    ..._e(j()),
+    "z-index": `${t().z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(j().scale, 1e-3)}`,
+    ...Oe(t())
   }));
   return (() => {
-    var a = ot(), 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: Be,
-      children: (s) => (() => {
-        var l = at();
-        return l.$$click = (d) => {
-          M(d), e.onUpdate(e.item.id, {
-            fill: s
+    var w = xt(), S = w.firstChild, $ = S.nextSibling, d = $.firstChild, a = d.nextSibling, R = a.firstChild, T = a.nextSibling, s = $.nextSibling;
+    return $.$$click = we, $.$$pointerdown = he, z($, y(se, {
+      each: rt,
+      children: (o) => (() => {
+        var h = $t();
+        return h.$$click = (r) => {
+          A(r), b()(t().id, {
+            fill: o
           });
-        }, l.$$pointerdown = T, g(l, "aria-label", `Use region color ${s}`), q(l, "background", s), W(() => l.classList.toggle("is-active", e.item.fill === s)), l;
+        }, h.$$pointerdown = X, x(h, "aria-label", `Use region color ${o}`), me(h, "background", o), U(() => h.classList.toggle("is-active", t().fill === o)), h;
       })()
-    }), m), m.$$click = K, m.$$pointerdown = Y, y(m, v(V, {
-      each: He,
-      children: (s) => (() => {
-        var l = rt();
-        return l.$$click = (d) => {
-          M(d), e.onUpdate(e.item.id, {
-            material: s
+    }), d), d.$$click = we, d.$$pointerdown = he, z(d, y(se, {
+      each: at,
+      children: (o) => (() => {
+        var h = _t();
+        return h.$$click = (r) => {
+          A(r), b()(t().id, {
+            material: o
           });
-        }, l.$$pointerdown = T, W((d) => {
-          var G = `Use region material ${$e[s]}`, w = $e[s], x = {
-            "is-active": e.item.material === s,
-            [`is-${s}`]: !0
+        }, h.$$pointerdown = X, U((r) => {
+          var M = `Use region material ${Fe[o]}`, q = Fe[o], F = {
+            "is-active": t().material === o,
+            [`is-${o}`]: !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;
+          return M !== r.e && x(h, "aria-label", r.e = M), q !== r.t && x(h, "title", r.t = q), r.a = Ie(h, F, r.a), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), l;
+        }), h;
       })()
-    })), _.$$click = (s) => {
-      M(s), e.onUpdate(e.item.id, {
-        opacity: e.item.opacity >= 0.88 ? 0.42 : e.item.opacity + 0.18
+    })), a.$$click = (o) => {
+      A(o), b()(t().id, {
+        opacity: t().opacity >= 0.88 ? 0.42 : t().opacity + 0.18
       });
-    }, _.$$pointerdown = T, y(_, () => Math.round(e.item.opacity * 100), c), k.$$click = (s) => {
-      M(s), e.onDelete(e.item.id);
-    }, k.$$pointerdown = T, y(k, v(me, {
+    }, a.$$pointerdown = X, z(a, () => Math.round(t().opacity * 100), R), T.$$click = (o) => {
+      A(o), I()(t().id);
+    }, T.$$pointerdown = X, z(T, y(Te, {
       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;
+    })), J(s, "pointerdown", k.beginResize, !0), U((o) => {
+      var h = t().id, r = L();
+      return h !== o.e && x(w, "data-wb-object-id", o.e = h), o.t = be(w, r, o.t), o;
     }, {
       e: void 0,
       t: void 0
-    }), a;
+    }), w;
+  })();
+}
+function At(e) {
+  const t = n(() => e.item), c = n(() => e.viewport), i = n(() => e.projection), l = n(() => e.preview), v = _(() => {
+    const C = t(), b = xe(l(), "background_layer", C.id);
+    return $e({
+      geometry: Ce({
+        preview: b,
+        position: {
+          x: C.x,
+          y: C.y
+        },
+        width: C.width,
+        height: C.height
+      }),
+      viewport: c(),
+      projection: i()
+    });
+  }), g = _(() => ({
+    ..._e(v()),
+    "--workbench-region-outline-scale": `${1 / Math.max(v().scale, 1e-3)}`,
+    ...Oe(t())
+  }));
+  return (() => {
+    var C = Ct();
+    return U((b) => {
+      var I = !!e.selected, k = t().id, j = g();
+      return I !== b.e && C.classList.toggle("is-selected-region", b.e = I), k !== b.t && x(C, "data-wb-object-id", b.t = k), b.a = be(C, j, b.a), b;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), C;
   })();
 }
-function Tt(e) {
-  const i = $(() => Ie(e.items)), o = $(() => Pe(e.items).map((n) => n.id));
+function Ft(e) {
+  const t = _(() => Le(e.items)), c = _(() => je(e.items).map((i) => i.id));
   return (() => {
-    var n = lt();
-    return y(n, v(V, {
+    var i = St();
+    return z(i, y(se, {
       get each() {
-        return o();
+        return c();
       },
-      children: (a) => {
-        const r = $(() => i().get(a) ?? null);
-        return v(F, {
+      children: (l) => {
+        const v = _(() => t().get(l) ?? null);
+        return y(te, {
           get when() {
-            return r();
+            return v();
           },
-          children: (t) => v(xt, {
+          children: (g) => y(At, {
             get item() {
-              return t();
+              return g();
             },
             get selected() {
-              return p(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === a;
+              return ve(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === l;
+            },
+            get viewport() {
+              return e.viewport;
+            },
+            get projection() {
+              return e.projection;
+            },
+            get preview() {
+              return e.preview;
+            }
+          })
+        });
+      }
+    })), i;
+  })();
+}
+function en(e) {
+  const t = _(() => Le(e.items)), c = _(() => je(e.items).map((i) => i.id));
+  return (() => {
+    var i = pt();
+    return z(i, y(se, {
+      get each() {
+        return c();
+      },
+      children: (l) => {
+        const v = _(() => t().get(l) ?? null);
+        return y(te, {
+          get when() {
+            return v();
+          },
+          children: (g) => y(Wt, {
+            get item() {
+              return g();
+            },
+            get selected() {
+              return ve(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === l;
             },
             get editable() {
               return e.editable;
@@ -833,6 +994,12 @@ function Tt(e) {
             get viewportScale() {
               return e.viewport.scale;
             },
+            get viewport() {
+              return e.viewport;
+            },
+            get projection() {
+              return e.projection;
+            },
             get preview() {
               return e.preview;
             },
@@ -851,35 +1018,35 @@ function Tt(e) {
           })
         });
       }
-    })), 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;
+    })), U((l) => {
+      var v = !!e.editable, g = !!e.filtered;
+      return v !== l.e && i.classList.toggle("is-editable", l.e = v), g !== l.t && i.classList.toggle("is-filtered-out", l.t = g), l;
     }, {
       e: void 0,
       t: void 0
-    }), n;
+    }), i;
   })();
 }
-function Lt(e) {
-  const i = $(() => Ie(e.items)), o = $(() => Pe(e.items).map((n) => n.id));
+function tn(e) {
+  const t = _(() => Le(e.items)), c = _(() => je(e.items).map((i) => i.id));
   return (() => {
-    var n = ct();
-    return y(n, v(V, {
+    var i = zt();
+    return z(i, y(se, {
       get each() {
-        return o();
+        return c();
       },
-      children: (a) => {
-        const r = $(() => i().get(a) ?? null);
-        return v(F, {
+      children: (l) => {
+        const v = _(() => t().get(l) ?? null);
+        return y(te, {
           get when() {
-            return r();
+            return v();
           },
-          children: (t) => v(yt, {
+          children: (g) => y(Gt, {
             get item() {
-              return t();
+              return g();
             },
             get selected() {
-              return p(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === a;
+              return ve(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === l;
             },
             get editable() {
               return e.editable;
@@ -887,6 +1054,12 @@ function Lt(e) {
             get viewportScale() {
               return e.viewport.scale;
             },
+            get viewport() {
+              return e.viewport;
+            },
+            get projection() {
+              return e.projection;
+            },
             get preview() {
               return e.preview;
             },
@@ -911,30 +1084,59 @@ function Lt(e) {
           })
         });
       }
-    })), 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;
+    })), U((l) => {
+      var v = !!e.editable, g = !!e.filtered;
+      return v !== l.e && i.classList.toggle("is-editable", l.e = v), g !== l.t && i.classList.toggle("is-filtered-out", l.t = g), l;
     }, {
       e: void 0,
       t: void 0
-    }), n;
+    }), i;
   })();
 }
-function Dt(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);
+function nn(e) {
+  const t = _(() => e.selectedObject?.kind === "annotation" ? e.annotations.find((i) => i.id === e.selectedObject?.id && i.kind === "text") ?? null : null), c = _(() => e.selectedObject?.kind === "background_layer" ? e.backgroundLayers.find((i) => i.id === e.selectedObject?.id) ?? null : null);
   return (() => {
-    var n = dt();
-    return y(n, v(F, {
+    var i = Et();
+    return z(i, y(te, {
       get when() {
-        return p(() => !!e.editable)() && o();
+        return e.showRegionOutlines;
       },
-      children: (a) => v($t, {
+      get children() {
+        return y(Ft, {
+          get items() {
+            return e.backgroundLayers;
+          },
+          get selectedObject() {
+            return e.selectedObject;
+          },
+          get viewport() {
+            return e.viewport;
+          },
+          get projection() {
+            return e.projection;
+          },
+          get preview() {
+            return e.preview;
+          }
+        });
+      }
+    }), null), z(i, y(te, {
+      get when() {
+        return ve(() => !!e.editable)() && c();
+      },
+      children: (l) => y(Ht, {
         get item() {
-          return a();
+          return l();
         },
         get viewportScale() {
           return e.viewport.scale;
         },
+        get viewport() {
+          return e.viewport;
+        },
+        get projection() {
+          return e.projection;
+        },
         get preview() {
           return e.preview;
         },
@@ -951,17 +1153,23 @@ function Dt(e) {
           return e.onDeleteBackgroundLayer;
         }
       })
-    }), null), y(n, v(F, {
+    }), null), z(i, y(te, {
       get when() {
-        return p(() => !!e.editable)() && i();
+        return ve(() => !!e.editable)() && t();
       },
-      children: (a) => v(kt, {
+      children: (l) => y(Nt, {
         get item() {
-          return a();
+          return l();
         },
         get viewportScale() {
           return e.viewport.scale;
         },
+        get viewport() {
+          return e.viewport;
+        },
+        get projection() {
+          return e.projection;
+        },
         get preview() {
           return e.preview;
         },
@@ -984,16 +1192,16 @@ function Dt(e) {
           return e.onDeleteAnnotation;
         }
       })
-    }), null), W(() => n.classList.toggle("is-editable", !!e.editable)), n;
+    }), null), U(() => i.classList.toggle("is-editable", !!e.editable)), i;
   })();
 }
-Oe(["pointerdown", "contextmenu", "input", "click", "keydown"]);
+Qe(["pointerdown", "contextmenu", "input", "click", "keydown"]);
 export {
-  Lt as WorkbenchAnnotationLayerView,
-  Tt as WorkbenchBackgroundLayerView,
-  xt as WorkbenchBackgroundRegion,
-  Dt as WorkbenchLayerControlOverlayView,
-  Rt as WorkbenchStickyNote,
-  yt as WorkbenchTextAnnotation,
-  Mt as createWorkbenchTextEditorRegistry
+  tn as WorkbenchAnnotationLayerView,
+  en as WorkbenchBackgroundLayerView,
+  Wt as WorkbenchBackgroundRegion,
+  nn as WorkbenchLayerControlOverlayView,
+  Zt as WorkbenchStickyNote,
+  Gt as WorkbenchTextAnnotation,
+  Qt as createWorkbenchTextEditorRegistry
 };