@floegence/floe-webapp-core 0.36.61 → 0.36.63

package/dist/components/workbench/WorkbenchLayerObjects.js

@@ -1,4 +1,4 @@
-import { insert as R, createComponent as k, memo as ge, effect as U, template as O, classList as Ie, setAttribute as _, style as ve, addEventListener as V, use as fe, setStyleProperty as me, delegateEvents as Qe } from "solid-js/web";
+import { insert as R, createComponent as k, memo as ve, effect as U, template as O, classList as Ie, setAttribute as _, style as ge, addEventListener as V, use as fe, setStyleProperty as me, delegateEvents as Qe } from "solid-js/web";
 import { createMemo as S, For as se, Show as te, createEffect as Re, onCleanup as ke, createSignal as re, untrack as ze, batch as Me } 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";
@@ -6,7 +6,7 @@ import { startPointerSession as Ke } 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 Pe, WORKBENCH_TEXT_COLOR_OPTIONS as ct, WORKBENCH_TEXT_EMOJI_OPTIONS as lt } from "./workbenchOptions.js";
 import { compareWorkbenchLayerRenderOrder as st, createWorkbenchWidgetSurfaceMetrics as dt } from "./workbenchHelpers.js";
 import { createOwnerSafePropAccessor as n } from "./workbenchOwnerSafeAccessors.js";
-var ut = /* @__PURE__ */ O('<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">'), ht = /* @__PURE__ */ O('<button type=button class="workbench-layer-resize workbench-sticky__resize"aria-label="Resize sticky note">'), wt = /* @__PURE__ */ O('<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>'), mt = /* @__PURE__ */ O("<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>"), gt = /* @__PURE__ */ O("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body>"), vt = /* @__PURE__ */ O('<div class=workbench-text-font-popover role=menu aria-label="Bold font">'), bt = /* @__PURE__ */ O("<div class=workbench-text-emoji-popover role=menu aria-label=Emoji>"), yt = /* @__PURE__ */ O('<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>'), ft = /* @__PURE__ */ O("<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>"), kt = /* @__PURE__ */ O("<button type=button class=workbench-layer-swatch>"), xt = /* @__PURE__ */ O("<button type=button role=menuitem class=workbench-text-emoji-option>"), $t = /* @__PURE__ */ O('<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__ */ O('<button type=button class="workbench-layer-swatch workbench-layer-swatch--region">'), Ct = /* @__PURE__ */ O("<button type=button class=workbench-region-material><span class=workbench-region-material__sample aria-hidden=true>"), St = /* @__PURE__ */ O("<div class=workbench-region-visibility-outline aria-hidden=true data-wb-plane=overlay data-wb-object-kind=region-outline>"), pt = /* @__PURE__ */ O("<div class=workbench-region-visibility-outline-layer aria-hidden=true>"), zt = /* @__PURE__ */ O("<div class=workbench-background-layer>"), Mt = /* @__PURE__ */ O("<div class=workbench-annotation-layer>"), Rt = /* @__PURE__ */ O("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
+var ut = /* @__PURE__ */ O('<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">'), ht = /* @__PURE__ */ O('<button type=button class="workbench-layer-resize workbench-sticky__resize"aria-label="Resize sticky note">'), wt = /* @__PURE__ */ O('<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>'), mt = /* @__PURE__ */ O("<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>"), vt = /* @__PURE__ */ O("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body>"), gt = /* @__PURE__ */ O('<div class=workbench-text-font-popover role=menu aria-label="Bold font">'), bt = /* @__PURE__ */ O("<div class=workbench-text-emoji-popover role=menu aria-label=Emoji>"), yt = /* @__PURE__ */ O('<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>'), ft = /* @__PURE__ */ O("<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>"), kt = /* @__PURE__ */ O("<button type=button class=workbench-layer-swatch>"), xt = /* @__PURE__ */ O("<button type=button role=menuitem class=workbench-text-emoji-option>"), $t = /* @__PURE__ */ O('<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__ */ O('<button type=button class="workbench-layer-swatch workbench-layer-swatch--region">'), Ct = /* @__PURE__ */ O("<button type=button class=workbench-region-material><span class=workbench-region-material__sample aria-hidden=true>"), St = /* @__PURE__ */ O("<div class=workbench-region-visibility-outline aria-hidden=true data-wb-plane=overlay data-wb-object-kind=region-outline>"), pt = /* @__PURE__ */ O("<div class=workbench-region-visibility-outline-layer aria-hidden=true>"), zt = /* @__PURE__ */ O("<div class=workbench-background-layer>"), Mt = /* @__PURE__ */ O("<div class=workbench-annotation-layer>"), Rt = /* @__PURE__ */ O("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
 const Et = 190, Pt = 132, It = 180, Tt = 120, jt = 96, Lt = 42, Fe = {
   solid: "Solid",
   dotted: "Dotted",
@@ -47,11 +47,11 @@ function Ve(e, t) {
 function Be(e, t, u) {
   Re(() => {
     if (!e() || typeof document > "u") return;
-    const i = (v) => {
+    const i = (g) => {
       const y = t();
-      y && v.target instanceof Node && y.contains(v.target) || u();
-    }, c = (v) => {
-      v.key === "Escape" && u();
+      y && g.target instanceof Node && y.contains(g.target) || u();
+    }, c = (g) => {
+      g.key === "Escape" && u();
     };
     document.addEventListener("pointerdown", i, !0), document.addEventListener("keydown", c), ke(() => {
       document.removeEventListener("pointerdown", i, !0), document.removeEventListener("keydown", c);
@@ -64,13 +64,13 @@ function Ot(e, t) {
   return u === t || t.contains(u);
 }
 function Je(e) {
-  const [t, u] = re(), [i, c] = re(!1), [v, y] = re(!1), p = () => t()?.textContent ?? "", b = (h) => u(h), E = (h) => {
+  const [t, u] = re(), [i, c] = re(!1), [g, y] = re(!1), p = () => t()?.textContent ?? "", b = (h) => u(h), E = (h) => {
     const f = h.innerHTML ?? "";
     f !== e.value() && e.onCommit(f);
   };
   return Re(() => {
     const h = t();
-    if (!h || i() || v()) return;
+    if (!h || i() || g()) return;
     const f = e.value();
     (h.innerHTML ?? "") !== f && (h.innerHTML = f);
   }), {
@@ -177,7 +177,7 @@ function Ee(e) {
   const t = n(() => e.readPosition()), u = n(() => e.readGeometry?.() ?? {
     width: 0,
     height: 0
-  }), i = n(() => e.viewportScale()), c = n(() => e.onCommitMove), v = n(() => e.onPreviewMove), y = n(() => e.onPreviewEnd), p = n(() => e.onInteractionStart), b = n(() => e.onInteractionEnd), E = n(() => e.onCommitStart), [$, j] = re(null);
+  }), i = n(() => e.viewportScale()), c = n(() => e.onCommitMove), g = n(() => e.onPreviewMove), y = n(() => e.onPreviewEnd), p = n(() => e.onInteractionStart), b = n(() => e.onInteractionEnd), E = n(() => e.onCommitStart), [$, j] = re(null);
   let L;
   return ke(() => {
     L?.stop({
@@ -207,7 +207,7 @@ function Ee(e) {
       p()?.();
       const a = () => {
         f || (f = !0, h(), b()?.());
-      }, r = u(), l = v(), o = y(), T = E(), q = c();
+      }, r = u(), l = g(), o = y(), T = E(), q = c();
       j({
         pointerId: C.pointerId,
         startClientX: C.clientX,
@@ -227,7 +227,7 @@ function Ee(e) {
           Me(() => {
             j((M) => {
               if (!M || M.pointerId !== F.pointerId) return M;
-              const g = {
+              const v = {
                 x: M.startWorldX + (F.clientX - M.startClientX) / M.scale,
                 y: M.startWorldY + (F.clientY - M.startClientY) / M.scale
               };
@@ -238,9 +238,9 @@ function Ee(e) {
                 height: r.height
               }, {
                 ...M,
-                worldX: g.x,
-                worldY: g.y,
-                moved: M.moved || Math.abs(g.x - M.startWorldX) > 2 || Math.abs(g.y - M.startWorldY) > 2
+                worldX: v.x,
+                worldY: v.y,
+                moved: M.moved || Math.abs(v.x - M.startWorldX) > 2 || Math.abs(v.y - M.startWorldY) > 2
               };
             }), W && l?.(W);
           });
@@ -265,7 +265,7 @@ function Ee(e) {
   };
 }
 function Oe(e) {
-  const t = n(() => e.readSize()), u = n(() => e.viewportScale()), i = n(() => e.onCommitResize), c = n(() => e.onPreviewResize), v = n(() => e.onPreviewEnd), y = n(() => e.onInteractionStart), p = n(() => e.onInteractionEnd), [b, E] = re(null);
+  const t = n(() => e.readSize()), u = n(() => e.viewportScale()), i = n(() => e.onCommitResize), c = n(() => e.onPreviewResize), g = n(() => e.onPreviewEnd), y = n(() => e.onInteractionStart), p = n(() => e.onInteractionEnd), [b, E] = re(null);
   let $;
   return ke(() => {
     $?.stop({
@@ -295,7 +295,7 @@ function Oe(e) {
       y()?.();
       const h = () => {
         m || (m = !0, s(), p()?.());
-      }, f = c(), a = v(), r = i();
+      }, f = c(), a = g(), r = i();
       E({
         pointerId: w.pointerId,
         startClientX: w.clientX,
@@ -338,7 +338,7 @@ function Oe(e) {
   };
 }
 function en(e) {
-  const t = n(() => e.item), u = n(() => e.selected), i = n(() => e.viewportScale), c = n(() => e.projectedViewport), v = n(() => e.surfaceReady ?? !0), y = n(() => e.renderLayer), p = n(() => e.topRenderLayer), b = n(() => e.locked), E = n(() => e.filtered), $ = n(() => e.optimisticFront ?? !1), j = n(() => e.onSelect), L = n(() => e.onContextMenu), w = n(() => e.onStartOptimisticFront), z = n(() => e.onCommitFront), C = n(() => e.onCommitMove), s = n(() => e.onCommitResize), m = n(() => e.onUpdate), h = n(() => e.onDelete), f = n(() => e.onLayoutInteractionStart), a = n(() => e.onLayoutInteractionEnd), r = Je({
+  const t = n(() => e.item), u = n(() => e.selected), i = n(() => e.viewportScale), c = n(() => e.projectedViewport), g = n(() => e.surfaceReady ?? !0), y = n(() => e.renderLayer), p = n(() => e.topRenderLayer), b = n(() => e.locked), E = n(() => e.filtered), $ = n(() => e.visualFront ?? !1), j = n(() => e.onSelect), L = n(() => e.onContextMenu), w = n(() => e.onClaimVisualFrontOwner), z = n(() => e.onCommitFront), C = n(() => e.onCommitMove), s = n(() => e.onCommitResize), m = n(() => e.onUpdate), h = n(() => e.onDelete), f = n(() => e.onLayoutInteractionStart), a = n(() => e.onLayoutInteractionEnd), r = Je({
     value: () => t().body,
     onCommit: (P) => m()(t().id, {
       body: P
@@ -358,8 +358,8 @@ function en(e) {
   }, M = (P) => {
     if (P.button !== 0) return;
     const oe = t();
-    j()(oe.id), !b() && (P.target instanceof Element && P.target.closest('[data-floe-workbench-sticky-local="true"]') || (w()?.(oe.id), g.beginDrag(P)));
-  }, g = Ee({
+    j()(oe.id), !b() && (P.target instanceof Element && P.target.closest('[data-floe-workbench-sticky-local="true"]') || (w()?.(oe.id), v.beginDrag(P)));
+  }, v = Ee({
     viewportScale: i,
     readPosition: () => ({
       x: t().x,
@@ -380,7 +380,7 @@ function en(e) {
     onCommitResize: (P) => s()(t().id, P),
     onInteractionStart: () => f()?.(),
     onInteractionEnd: () => a()?.()
-  }), J = S(() => g.position()), Q = S(() => H.size()), K = S(() => {
+  }), J = S(() => v.position()), Q = S(() => H.size()), K = S(() => {
     const P = c();
     if (P)
       return dt({
@@ -390,14 +390,14 @@ function en(e) {
         worldWidth: Q().width,
         worldHeight: Q().height,
         viewport: P(),
-        ready: v()
+        ready: g()
       });
   }), de = S(() => K()?.rect.viewportScale ?? Math.max(i(), 1e-3)), be = S(() => ({
     width: `${Q().width}px`,
     height: `${Q().height}px`,
     transform: c() ? `translate(${K()?.rect.screenX ?? 0}px, ${K()?.rect.screenY ?? 0}px) scale(${de()})` : `translate(${J().x}px, ${J().y}px)`,
     "transform-origin": "0 0",
-    "z-index": `${u() || $() || g.isDragging() || H.isResizing() ? p() + 1 : y()}`
+    "z-index": `${u() || $() || v.isDragging() || H.isResizing() ? p() + 1 : y()}`
   }));
   return (() => {
     var P = wt(), oe = P.firstChild, ue = oe.firstChild, Z = ue.firstChild, B = ue.nextSibling;
@@ -405,7 +405,7 @@ function en(e) {
       x.preventDefault(), x.stopPropagation(), L()?.(x, t());
     }, P.addEventListener("focus", () => j()(t().id)), P.$$pointerdown = M, Z.$$pointerdown = (x) => {
       const X = t();
-      j()(X.id), w()?.(X.id), g.beginDrag(x);
+      j()(X.id), w()?.(X.id), v.beginDrag(x);
     }, R(Z, k(Ye, {
       class: "w-3.5 h-3.5"
     })), V(B, "compositionend", r.handleCompositionEnd), V(B, "compositionstart", r.handleCompositionStart), V(B, "keydown", r.handleKeyDown, !0), V(B, "input", r.handleInput, !0), V(B, "blur", r.handleBlur), V(B, "focus", r.handleFocus), B.$$pointerdown = (x) => {
@@ -414,7 +414,7 @@ function en(e) {
     var ee = r.bind;
     return typeof ee == "function" ? fe(ee, B) : r.bind = B, _(B, "spellcheck", !1), R(P, k(te, {
       get when() {
-        return ge(() => !!u())() && !b();
+        return ve(() => !!u())() && !b();
       },
       get children() {
         var x = ut(), X = x.firstChild, ne = X.nextSibling, ae = ne.nextSibling;
@@ -465,12 +465,12 @@ function en(e) {
         "is-selected": u(),
         "is-locked": b(),
         "is-filtered-out": E(),
-        "is-dragging": g.isDragging(),
+        "is-dragging": v.isDragging(),
         "is-resizing": H.isResizing(),
         "is-copied": l(),
         [Dt[t().color]]: !0
       }, ne = t().id, ae = t().id, N = t().id, ie = be(), ce = !b(), d = b() ? "true" : void 0;
-      return x.e = Ie(P, X, x.e), ne !== x.t && _(P, "data-floe-workbench-widget-id", x.t = ne), ae !== x.a && _(P, "data-wb-object-id", x.a = ae), N !== x.o && _(P, "data-floe-workbench-sticky-id", x.o = N), x.i = ve(P, ie, x.i), ce !== x.n && _(B, "contenteditable", x.n = ce), d !== x.s && _(B, "aria-disabled", x.s = d), x;
+      return x.e = Ie(P, X, x.e), ne !== x.t && _(P, "data-floe-workbench-widget-id", x.t = ne), ae !== x.a && _(P, "data-wb-object-id", x.a = ae), N !== x.o && _(P, "data-floe-workbench-sticky-id", x.o = N), x.i = ge(P, ie, x.i), ce !== x.n && _(B, "contenteditable", x.n = ce), d !== x.s && _(B, "aria-disabled", x.s = d), x;
     }, {
       e: void 0,
       t: void 0,
@@ -483,7 +483,7 @@ function en(e) {
   })();
 }
 function Gt(e) {
-  const t = n(() => e.item), u = n(() => e.selected), i = n(() => e.editable), c = n(() => e.viewportScale), v = n(() => e.viewport ?? {
+  const t = n(() => e.item), u = n(() => e.selected), i = n(() => e.editable), c = n(() => e.viewportScale), g = n(() => e.viewport ?? {
     x: 0,
     y: 0,
     scale: 1
@@ -529,10 +529,10 @@ function Gt(e) {
         width: a.width,
         height: a.height
       }),
-      viewport: v(),
+      viewport: g(),
       projection: y()
     });
-  }), m = S(() => y() === "screen" ? Math.max(v().scale, 1e-3) : 1), h = S(() => ({
+  }), m = S(() => y() === "screen" ? Math.max(g().scale, 1e-3) : 1), h = S(() => ({
     ..._e(s()),
     "z-index": `${t().z_index}`,
     "--workbench-text-color": t().color,
@@ -556,8 +556,8 @@ function Gt(e) {
     };
     var l = z.bind;
     return typeof l == "function" ? fe(l, r) : z.bind = r, _(r, "spellcheck", !1), U((o) => {
-      var T = !!u(), q = !!i(), F = i() ? "true" : void 0, W = t().id, M = h(), g = i() ? "plaintext-only" : !1, H = i() ? 0 : void 0, J = i() ? "textbox" : void 0, Q = i() ? "true" : void 0, K = i() ? void 0 : "true";
-      return T !== o.e && a.classList.toggle("is-selected", o.e = T), q !== o.t && a.classList.toggle("is-editable", o.t = q), F !== o.a && _(a, "data-floe-canvas-interactive", o.a = F), W !== o.o && _(a, "data-wb-object-id", o.o = W), o.i = ve(a, M, o.i), g !== o.n && _(r, "contenteditable", o.n = g), H !== o.s && _(r, "tabindex", o.s = H), J !== o.h && _(r, "role", o.h = J), Q !== o.r && _(r, "aria-multiline", o.r = Q), K !== o.d && _(r, "aria-disabled", o.d = K), o;
+      var T = !!u(), q = !!i(), F = i() ? "true" : void 0, W = t().id, M = h(), v = i() ? "plaintext-only" : !1, H = i() ? 0 : void 0, J = i() ? "textbox" : void 0, Q = i() ? "true" : void 0, K = i() ? void 0 : "true";
+      return T !== o.e && a.classList.toggle("is-selected", o.e = T), q !== o.t && a.classList.toggle("is-editable", o.t = q), F !== o.a && _(a, "data-floe-canvas-interactive", o.a = F), W !== o.o && _(a, "data-wb-object-id", o.o = W), o.i = ge(a, M, o.i), v !== o.n && _(r, "contenteditable", o.n = v), H !== o.s && _(r, "tabindex", o.s = H), J !== o.h && _(r, "role", o.h = J), Q !== o.r && _(r, "aria-multiline", o.r = Q), K !== o.d && _(r, "aria-disabled", o.d = K), o;
     }, {
       e: void 0,
       t: void 0,
@@ -573,7 +573,7 @@ function Gt(e) {
   })();
 }
 function Ht(e) {
-  const t = n(() => e.item), u = n(() => e.selected), i = n(() => e.editable), c = n(() => e.viewportScale), v = n(() => e.viewport ?? {
+  const t = n(() => e.item), u = n(() => e.selected), i = n(() => e.editable), c = n(() => e.viewportScale), g = n(() => e.viewport ?? {
     x: 0,
     y: 0,
     scale: 1
@@ -603,7 +603,7 @@ function Ht(e) {
         width: s.width,
         height: s.height
       }),
-      viewport: v(),
+      viewport: g(),
       projection: y()
     });
   }), z = S(() => ({
@@ -614,7 +614,7 @@ function Ht(e) {
     !i() || s.button !== 0 || s.target instanceof Element && s.target.closest(".workbench-background-region__toolbar, .workbench-layer-resize") || (E()(t().id), L.beginDrag(s));
   };
   return (() => {
-    var s = gt();
+    var s = vt();
     return s.$$contextmenu = (m) => {
       i() && (m.preventDefault(), m.stopPropagation(), E()(t().id), $()?.(m, t()));
     }, s.addEventListener("focus", () => i() && E()(t().id)), s.$$pointerdown = C, U((m) => {
@@ -624,7 +624,7 @@ function Ht(e) {
         "is-transforming": L.isDragging(),
         [`is-material-${t().material}`]: !0
       }, f = i() ? "true" : void 0, a = t().id, r = z(), l = i() ? 0 : void 0;
-      return m.e = Ie(s, h, m.e), f !== m.t && _(s, "data-floe-canvas-interactive", m.t = f), a !== m.a && _(s, "data-wb-object-id", m.a = a), m.o = ve(s, r, m.o), l !== m.i && _(s, "tabindex", m.i = l), m;
+      return m.e = Ie(s, h, m.e), f !== m.t && _(s, "data-floe-canvas-interactive", m.t = f), a !== m.a && _(s, "data-wb-object-id", m.a = a), m.o = ge(s, r, m.o), l !== m.i && _(s, "tabindex", m.i = l), m;
     }, {
       e: void 0,
       t: void 0,
@@ -639,9 +639,9 @@ function Nt(e) {
     x: 0,
     y: 0,
     scale: 1
-  }), c = n(() => e.projection), v = n(() => e.preview), y = n(() => e.textEditorRegistry), p = n(() => e.onPreviewGeometry), b = n(() => e.onCommitMove), E = n(() => e.onCommitResize), $ = n(() => e.onUpdate), j = n(() => e.onDelete);
+  }), c = n(() => e.projection), g = n(() => e.preview), y = n(() => e.textEditorRegistry), p = n(() => e.onPreviewGeometry), b = n(() => e.onCommitMove), E = n(() => e.onCommitResize), $ = n(() => e.onUpdate), j = n(() => e.onDelete);
   let L, w, z;
-  const [C, s] = re(""), [m, h] = re(!1), [f, a] = re(!1), r = S(() => Pe.find((g) => g.fontFamily === t().font_family) ?? Pe[0]), l = Ee({
+  const [C, s] = re(""), [m, h] = re(!1), [f, a] = re(!1), r = S(() => Pe.find((v) => v.fontFamily === t().font_family) ?? Pe[0]), l = Ee({
     viewportScale: u,
     readPosition: () => ({
       x: t().x,
@@ -651,11 +651,11 @@ function Nt(e) {
       width: t().width,
       height: t().height
     }),
-    onCommitMove: (g) => b()(t().id, g),
-    onPreviewMove: (g) => p()?.({
+    onCommitMove: (v) => b()(t().id, v),
+    onPreviewMove: (v) => p()?.({
       kind: "annotation",
       id: t().id,
-      ...g
+      ...v
     }),
     onPreviewEnd: () => p()?.(null)
   }), o = Oe({
@@ -666,18 +666,18 @@ function Nt(e) {
     }),
     minWidth: jt,
     minHeight: Lt,
-    onCommitResize: (g) => E()(t().id, g),
-    onPreviewResize: (g) => p()?.({
+    onCommitResize: (v) => E()(t().id, v),
+    onPreviewResize: (v) => p()?.({
       kind: "annotation",
       id: t().id,
       x: t().x,
       y: t().y,
-      width: g.width,
-      height: g.height
+      width: v.width,
+      height: v.height
     }),
     onPreviewEnd: () => p()?.(null)
   }), T = S(() => {
-    const g = t(), H = xe(v(), "annotation", g.id);
+    const v = t(), H = xe(g(), "annotation", v.id);
     return $e({
       geometry: Ce({
         preview: H,
@@ -692,15 +692,15 @@ function Nt(e) {
     ..._e(T()),
     "z-index": `${t().z_index}`,
     "--workbench-layer-control-inverse-scale": `${1 / Math.max(T().scale, 1e-3)}`
-  })), F = () => Ve(["left", "center", "right"], t().align), W = (g) => {
-    if (!Number.isFinite(g)) return;
-    const H = Wt(g);
+  })), F = () => Ve(["left", "center", "right"], t().align), W = (v) => {
+    if (!Number.isFinite(v)) return;
+    const H = Wt(v);
     s(String(H)), $()(t().id, {
       font_size: H
     });
   }, M = () => {
-    const g = C().trim(), H = Number(g);
-    if (g.length > 0 && Number.isFinite(H)) {
+    const v = C().trim(), H = Number(v);
+    if (v.length > 0 && Number.isFinite(H)) {
       W(H);
       return;
     }
@@ -709,7 +709,7 @@ function Nt(e) {
   return Re(() => {
     typeof document < "u" && document.activeElement === L || s(String(t().font_size));
   }), Be(m, () => w, () => h(!1)), Be(f, () => z, () => a(!1)), (() => {
-    var g = yt(), H = g.firstChild, J = H.nextSibling, Q = J.firstChild, K = Q.nextSibling, de = K.firstChild, be = de.firstChild, P = be.nextSibling, oe = K.nextSibling, ue = oe.firstChild, Z = ue.nextSibling, B = Z.nextSibling, ee = oe.nextSibling, x = ee.firstChild, X = ee.nextSibling, ne = X.nextSibling, ae = J.nextSibling;
+    var v = yt(), H = v.firstChild, J = H.nextSibling, Q = J.firstChild, K = Q.nextSibling, de = K.firstChild, be = de.firstChild, P = be.nextSibling, oe = K.nextSibling, ue = oe.firstChild, Z = ue.nextSibling, B = Z.nextSibling, ee = oe.nextSibling, x = ee.firstChild, X = ee.nextSibling, ne = X.nextSibling, ae = J.nextSibling;
     J.$$click = we, J.$$pointerdown = he, Q.$$click = A, V(Q, "pointerdown", l.beginDrag, !0), R(Q, k(Ye, {
       class: "w-3.5 h-3.5"
     })), K.$$click = we, K.$$pointerdown = he;
@@ -723,7 +723,7 @@ function Nt(e) {
         return m();
       },
       get children() {
-        var d = vt();
+        var d = gt();
         return R(d, k(se, {
           each: Pe,
           children: (I) => (() => {
@@ -799,7 +799,7 @@ function Nt(e) {
       class: "w-3.5 h-3.5"
     })), V(ae, "pointerdown", o.beginResize, !0), U((d) => {
       var I = t().id, D = q(), le = m(), Se = r().fontFamily, G = `${r().fontWeight}`, ye = f();
-      return I !== d.e && _(g, "data-wb-object-id", d.e = I), d.t = ve(g, D, d.t), le !== d.a && _(de, "aria-expanded", d.a = le), Se !== d.o && me(be, "font-family", d.o = Se), G !== d.i && me(be, "font-weight", d.i = G), ye !== d.n && _(x, "aria-expanded", d.n = ye), d;
+      return I !== d.e && _(v, "data-wb-object-id", d.e = I), d.t = ge(v, D, d.t), le !== d.a && _(de, "aria-expanded", d.a = le), Se !== d.o && me(be, "font-family", d.o = Se), G !== d.i && me(be, "font-weight", d.i = G), ye !== d.n && _(x, "aria-expanded", d.n = ye), d;
     }, {
       e: void 0,
       t: void 0,
@@ -807,7 +807,7 @@ function Nt(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), U(() => Z.value = C()), g;
+    }), U(() => Z.value = C()), v;
   })();
 }
 function At(e) {
@@ -815,7 +815,7 @@ function At(e) {
     x: 0,
     y: 0,
     scale: 1
-  }), c = n(() => e.projection), v = n(() => e.preview), y = n(() => e.onPreviewGeometry), p = n(() => e.onCommitResize), b = n(() => e.onUpdate), E = n(() => e.onDelete), $ = Oe({
+  }), c = n(() => e.projection), g = n(() => e.preview), y = n(() => e.onPreviewGeometry), p = n(() => e.onCommitResize), b = n(() => e.onUpdate), E = n(() => e.onDelete), $ = Oe({
     viewportScale: u,
     readSize: () => ({
       width: t().width,
@@ -834,7 +834,7 @@ function At(e) {
     }),
     onPreviewEnd: () => y()?.(null)
   }), j = S(() => {
-    const w = t(), z = xe(v(), "background_layer", w.id);
+    const w = t(), z = xe(g(), "background_layer", w.id);
     return $e({
       geometry: Ce({
         preview: z,
@@ -896,7 +896,7 @@ function At(e) {
       class: "w-3.5 h-3.5"
     })), V(a, "pointerdown", $.beginResize, !0), U((r) => {
       var l = t().id, o = L();
-      return l !== r.e && _(w, "data-wb-object-id", r.e = l), r.t = ve(w, o, r.t), r;
+      return l !== r.e && _(w, "data-wb-object-id", r.e = l), r.t = ge(w, o, r.t), r;
     }, {
       e: void 0,
       t: void 0
@@ -904,7 +904,7 @@ function At(e) {
   })();
 }
 function Ft(e) {
-  const t = n(() => e.item), u = n(() => e.viewport), i = n(() => e.projection), c = n(() => e.preview), v = S(() => {
+  const t = n(() => e.item), u = n(() => e.viewport), i = n(() => e.projection), c = n(() => e.preview), g = S(() => {
     const p = t(), b = xe(c(), "background_layer", p.id);
     return $e({
       geometry: Ce({
@@ -920,15 +920,15 @@ function Ft(e) {
       projection: i()
     });
   }), y = S(() => ({
-    ..._e(v()),
-    "--workbench-region-outline-scale": `${1 / Math.max(v().scale, 1e-3)}`,
+    ..._e(g()),
+    "--workbench-region-outline-scale": `${1 / Math.max(g().scale, 1e-3)}`,
     ...De(t())
   }));
   return (() => {
     var p = St();
     return U((b) => {
       var E = !!e.selected, $ = t().id, j = y();
-      return E !== b.e && p.classList.toggle("is-selected-region", b.e = E), $ !== b.t && _(p, "data-wb-object-id", b.t = $), b.a = ve(p, j, b.a), b;
+      return E !== b.e && p.classList.toggle("is-selected-region", b.e = E), $ !== b.t && _(p, "data-wb-object-id", b.t = $), b.a = ge(p, j, b.a), b;
     }, {
       e: void 0,
       t: void 0,
@@ -945,17 +945,17 @@ function Bt(e) {
         return u();
       },
       children: (c) => {
-        const v = S(() => t().get(c) ?? null);
+        const g = S(() => t().get(c) ?? null);
         return k(te, {
           get when() {
-            return v();
+            return g();
           },
           children: (y) => k(Ft, {
             get item() {
               return y();
             },
             get selected() {
-              return ge(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === c;
+              return ve(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === c;
             },
             get viewport() {
               return e.viewport;
@@ -981,17 +981,17 @@ function tn(e) {
         return u();
       },
       children: (c) => {
-        const v = S(() => t().get(c) ?? null);
+        const g = S(() => t().get(c) ?? null);
         return k(te, {
           get when() {
-            return v();
+            return g();
           },
           children: (y) => k(Ht, {
             get item() {
               return y();
             },
             get selected() {
-              return ge(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === c;
+              return ve(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === c;
             },
             get editable() {
               return e.editable;
@@ -1024,8 +1024,8 @@ function tn(e) {
         });
       }
     })), U((c) => {
-      var v = !!e.editable, y = !!e.filtered;
-      return v !== c.e && i.classList.toggle("is-editable", c.e = v), y !== c.t && i.classList.toggle("is-filtered-out", c.t = y), c;
+      var g = !!e.editable, y = !!e.filtered;
+      return g !== c.e && i.classList.toggle("is-editable", c.e = g), y !== c.t && i.classList.toggle("is-filtered-out", c.t = y), c;
     }, {
       e: void 0,
       t: void 0
@@ -1041,17 +1041,17 @@ function nn(e) {
         return u();
       },
       children: (c) => {
-        const v = S(() => t().get(c) ?? null);
+        const g = S(() => t().get(c) ?? null);
         return k(te, {
           get when() {
-            return v();
+            return g();
           },
           children: (y) => k(Gt, {
             get item() {
               return y();
             },
             get selected() {
-              return ge(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === c;
+              return ve(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === c;
             },
             get editable() {
               return e.editable;
@@ -1090,8 +1090,8 @@ function nn(e) {
         });
       }
     })), U((c) => {
-      var v = !!e.editable, y = !!e.filtered;
-      return v !== c.e && i.classList.toggle("is-editable", c.e = v), y !== c.t && i.classList.toggle("is-filtered-out", c.t = y), c;
+      var g = !!e.editable, y = !!e.filtered;
+      return g !== c.e && i.classList.toggle("is-editable", c.e = g), y !== c.t && i.classList.toggle("is-filtered-out", c.t = y), c;
     }, {
       e: void 0,
       t: void 0
@@ -1127,7 +1127,7 @@ function on(e) {
       }
     }), null), R(i, k(te, {
       get when() {
-        return ge(() => !!e.editable)() && u();
+        return ve(() => !!e.editable)() && u();
       },
       children: (c) => k(At, {
         get item() {
@@ -1160,7 +1160,7 @@ function on(e) {
       })
     }), null), R(i, k(te, {
       get when() {
-        return ge(() => !!e.editable)() && t();
+        return ve(() => !!e.editable)() && t();
       },
       children: (c) => k(Nt, {
         get item() {

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,5 +1,5 @@
-import { use as z, spread as V, mergeProps as H, insert as f, createComponent as s, Portal as $, addEventListener as U, template as T, delegateEvents as K } from "solid-js/web";
-import { createSignal as A, createMemo as g, untrack as h, createEffect as v, onCleanup as y, Show as j } from "solid-js";
+import { use as V, spread as z, mergeProps as H, insert as f, createComponent as s, Portal as $, addEventListener as U, template as T, delegateEvents as K } from "solid-js/web";
+import { createSignal as p, createMemo as g, untrack as C, createEffect as v, onCleanup as y, Show as j } from "solid-js";
 import { clientToCanvasWorld as L } from "../ui/canvasGeometry.js";
 import { WorkbenchCanvas as Z } from "./WorkbenchCanvas.js";
 import { WorkbenchContextMenu as G } from "./WorkbenchContextMenu.js";
@@ -32,7 +32,7 @@ function Ie(a) {
     backgroundLayerDefaults: () => a.backgroundLayerDefaults,
     onClose: () => {
     }
-  }), [u, N] = A(null), [R, O] = A(null), d = g(() => de(a.interactionAdapter)), [C, l] = A(h(() => d().createInitialInputOwner())), W = g(() => {
+  }), [u, N] = p(null), [O, R] = p(null), d = g(() => de(a.interactionAdapter)), [h, l] = p(C(() => d().createInitialInputOwner())), W = g(() => {
     const e = a.launcherWidgetTypes;
     return !e || e.length <= 0 ? null : new Set(e);
   }), E = g(() => {
@@ -96,7 +96,7 @@ function Ie(a) {
       worldY: i > 0 ? (i / 2 - n.y) / n.scale : 180
     };
   }, w = (e) => {
-    const n = h(d), o = h(u);
+    const n = C(d), o = C(u);
     queueMicrotask(() => {
       n.focusWidgetElement(o, e), l(n.createWidgetInputOwner(e, "activation"));
     });
@@ -173,7 +173,7 @@ function Ie(a) {
     });
     y(() => e());
   }), v(() => {
-    const e = C();
+    const e = h();
     if (e.kind !== "widget") return;
     t.widgets().some((o) => o.id === e.widgetId) || l(d().createCanvasInputOwner("widget_removed"));
   }), v(() => {
@@ -198,7 +198,7 @@ function Ie(a) {
         if (!d().shouldBypassGlobalHotkeys({
           root: u(),
           target: o.target,
-          owner: C(),
+          owner: h(),
           interactiveSelector: d().interactiveSelector
         }))
           switch (o.key) {
@@ -223,7 +223,7 @@ function Ie(a) {
     };
     document.addEventListener("keydown", n, !0), y(() => document.removeEventListener("keydown", n, !0));
   });
-  const p = (e, n, o) => {
+  const A = (e, n, o) => {
     if (o?.canvasFrame)
       return L(o.canvasFrame, t.viewport(), {
         clientX: e,
@@ -237,10 +237,10 @@ function Ie(a) {
       clientY: n
     });
   }, _ = (e, n, o, r) => {
-    const i = p(n, o, r);
+    const i = A(n, o, r);
     i && t.widgetActions.addWidgetAtWorldCenter(e, i.worldX, i.worldY);
   }, Y = (e, n, o, r) => {
-    const i = p(n, o, r);
+    const i = A(n, o, r);
     if (i) {
       if (e === "sticky-note") {
         t.widgetActions.addStickyNoteAtCursor(i.worldX, i.worldY);
@@ -255,9 +255,9 @@ function Ie(a) {
   }, P = (e) => {
     e.button === 0 && x("background_pointer");
   }, q = g(() => {
-    const e = R();
+    const e = O();
     if (!e) return null;
-    const n = p(e.clientX, e.clientY, e);
+    const n = A(e.clientX, e.clientY, e);
     return n ? e.kind === "widget" ? ie({
       type: e.id,
       widgetDefinitions: t.widgetDefinitions(),
@@ -276,7 +276,7 @@ function Ie(a) {
   });
   return (() => {
     var e = se(), n = e.firstChild;
-    return z(N, e), V(e, H({
+    return V(N, e), z(e, H({
       get class() {
         return `workbench-surface${a.class ? ` ${a.class}` : ""}`;
       }
@@ -324,8 +324,8 @@ function Ie(a) {
       get mode() {
         return t.mode();
       },
-      get optimisticFrontWidgetId() {
-        return t.optimisticFrontWidgetId();
+      get visualFrontOwnerId() {
+        return t.visualFrontOwnerId();
       },
       get locked() {
         return t.locked();
@@ -355,8 +355,8 @@ function Ie(a) {
       get onWidgetContextMenu() {
         return t.canvas.openWidgetContextMenu;
       },
-      get onStartOptimisticFront() {
-        return t.canvas.startOptimisticFront;
+      get onClaimVisualFrontOwner() {
+        return t.canvas.claimVisualFrontOwner;
       },
       get onCommitFront() {
         return t.canvas.commitFront;
@@ -373,8 +373,8 @@ function Ie(a) {
       get onStickyNoteContextMenu() {
         return t.canvas.openStickyNoteContextMenu;
       },
-      get onStartStickyOptimisticFront() {
-        return t.canvas.startOptimisticFront;
+      get onClaimStickyVisualFrontOwner() {
+        return t.canvas.claimVisualFrontOwner;
       },
       get onCommitStickyFront() {
         return t.canvas.commitStickyFront;
@@ -476,7 +476,7 @@ function Ie(a) {
       onViewportInteractionStart: () => t.canvas.cancelViewportNavigation(),
       onCreateAt: _,
       onCreateToolAt: Y,
-      onDragPreviewChange: O
+      onDragPreviewChange: R
     }), null), f(e, s(Q, {
       get scaleLabel() {
         return t.scaleLabel();