@floegence/floe-webapp-core 0.36.43 → 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 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 = {
+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"
-}, ht = {
+}, Lt = {
   amber: "is-amber",
   sage: "is-sage",
   azure: "is-azure",
@@ -20,378 +21,451 @@ const lt = 190, ct = 132, dt = 180, st = 120, ut = 96, mt = 42, $e = {
   rose: "is-rose",
   graphite: "is-graphite"
 };
-function Et() {
+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 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 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 Pe(e) {
-  return new Map(e.map((i) => [i.id, i]));
+function Le(e) {
+  return new Map(e.map((t) => [t.id, t]));
 }
-function Ie(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 bt(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 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);
+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 = 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);
+    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 wt(e) {
+function Dt(e) {
   return Math.max(8, Math.min(160, Math.round(e)));
 }
-function Y(e) {
+function qe(e) {
+  return Math.max(0.08, Math.min(1, e));
+}
+function Xe(e) {
+  return `${Math.round(qe(e) * 1e3) / 10}%`;
+}
+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": 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 he(e) {
   e.stopPropagation();
 }
-function K(e) {
+function we(e) {
   e.stopPropagation();
 }
-function M(e) {
+function X(e) {
   e.preventDefault(), e.stopPropagation();
 }
-function T(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 = Ce({
+      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 = 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);
+        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 = Ce({
+      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 = 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);
+      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 Pt(e) {
-  const i = Te({
-    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: 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
+    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 = 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, {
+    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 = 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, {
+        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(De, {
+            return y(et, {
               class: "w-3.5 h-3.5"
             });
           },
           get children() {
-            return v(Le, {
+            return y(Ze, {
               class: "w-3.5 h-3.5"
             });
           }
-        })), j.$$click = (E) => {
-          T(E), e.onUpdate(e.item.id, {
-            color: Ie(Ge, e.item.color)
+        })), ne.$$click = (H) => {
+          A(H);
+          const ie = t();
+          a()(ie.id, {
+            color: Ke(ot, ie.color)
           });
-        }, j.$$pointerdown = M, H.$$click = (E) => {
-          T(E), e.onDelete(e.item.id);
-        }, H.$$pointerdown = M, 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 = Xe();
-        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(),
-        [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;
+    }), 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,
@@ -400,76 +474,85 @@ function Pt(e) {
       i: void 0,
       n: void 0,
       s: void 0
-    }), w;
+    }), E;
   })();
 }
-function gt(e) {
-  const i = Te({
-    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 = 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 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,
@@ -481,159 +564,173 @@ function gt(e) {
       h: void 0,
       r: void 0,
       d: void 0
-    }), t;
+    }), s;
   })();
 }
-function vt(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}`,
-    "--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));
+    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 = 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;
+    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 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,
+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: ut,
-    minHeight: mt,
-    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 = () => 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
+    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 = 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, {
+  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) => {
-      T(h), m((f) => !f);
-    }, O.$$pointerdown = M, y(H, () => k().label), y(O, v(Oe, {
+    })), 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 = 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;
+        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,
@@ -641,63 +738,63 @@ function ft(e) {
               o: void 0,
               i: void 0,
               n: void 0
-            }), P;
+            }), O;
           })()
-        })), h;
+        })), u;
       }
-    }), 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, {
+    }), 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) => {
-      T(h), w(e.item.font_size + 1);
-    }, J.$$pointerdown = M, y(J, v(Ne, {
+    })), 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: Fe,
-      children: (h) => (() => {
-        var f = pe();
-        return f.$$click = (P) => {
-          T(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 = M, 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) => {
-      T(h), c((f) => !f);
-    }, ce.$$pointerdown = M, 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 = 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;
+        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) => {
-      T(h), e.onUpdate(e.item.id, {
-        align: G()
+    }), null), B.$$click = (u) => {
+      A(u), k()(t().id, {
+        align: F()
       });
-    }, 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, {
+    }, 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(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;
+    })), 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,
@@ -705,114 +802,191 @@ function ft(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), W(() => D.value = a()), u;
+    }), U(() => Z.value = $()), m;
   })();
 }
-function yt(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: dt,
-    minHeight: st,
-    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)}`,
-    "--workbench-region-fill": e.item.fill,
-    "--workbench-region-ink": `color-mix(in srgb, ${e.item.fill} 48%, var(--foreground, #111) 52%)`
+    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 = 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
+    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 = M, 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: Ae,
-      children: (s) => (() => {
-        var l = nt();
-        return l.$$click = (d) => {
-          T(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 = M, 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) => {
-      T(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 = 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, {
+    }, 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 It(e) {
-  const i = $(() => Pe(e.items)), o = $(() => Ee(e.items).map((n) => n.id));
+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 n = ot();
-    return y(n, v(V, {
+    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 Ft(e) {
+  const t = _(() => Le(e.items)), c = _(() => je(e.items).map((i) => i.id));
+  return (() => {
+    var i = St();
+    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(At, {
+            get item() {
+              return g();
+            },
+            get selected() {
+              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 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(vt, {
+          children: (g) => y(Wt, {
             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 editable() {
               return e.editable;
@@ -820,6 +994,12 @@ function It(e) {
             get viewportScale() {
               return e.viewport.scale;
             },
+            get viewport() {
+              return e.viewport;
+            },
+            get projection() {
+              return e.projection;
+            },
             get preview() {
               return e.preview;
             },
@@ -838,35 +1018,35 @@ function It(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 Tt(e) {
-  const i = $(() => Pe(e.items)), o = $(() => Ee(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 = at();
-    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(gt, {
+          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;
@@ -874,6 +1054,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;
             },
@@ -898,30 +1084,59 @@ 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 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);
+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 = rt();
-    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(yt, {
+      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;
         },
@@ -938,17 +1153,23 @@ function Rt(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(ft, {
+      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;
         },
@@ -971,16 +1192,16 @@ function Rt(e) {
           return e.onDeleteAnnotation;
         }
       })
-    }), null), W(() => n.classList.toggle("is-editable", !!e.editable)), n;
+    }), null), U(() => i.classList.toggle("is-editable", !!e.editable)), i;
   })();
 }
-Me(["pointerdown", "contextmenu", "input", "click", "keydown"]);
+Qe(["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
+  tn as WorkbenchAnnotationLayerView,
+  en as WorkbenchBackgroundLayerView,
+  Wt as WorkbenchBackgroundRegion,
+  nn as WorkbenchLayerControlOverlayView,
+  Zt as WorkbenchStickyNote,
+  Gt as WorkbenchTextAnnotation,
+  Qt as createWorkbenchTextEditorRegistry
 };