@floegence/floe-webapp-core 0.53.4 → 0.54.0

package/dist/components/ui/InfiniteCanvas.js

@@ -1,185 +1,196 @@
-import { spread as z, mergeProps as B, insert as _, effect as j, className as q, setStyleProperty as G, template as J, use as K } from "solid-js/web";
-import { createSignal as T, untrack as L, createEffect as A, onCleanup as I } from "solid-js";
-import { cn as D } from "../../utils/cn.js";
-import { startHotInteraction as R } from "../../utils/hotInteraction.js";
-import { resolveSurfaceInteractionTargetRole as Q, resolveSurfaceWheelRouting as ee, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as te } from "./localInteractionSurface.js";
-import { startPointerSession as ne } from "./pointerSession.js";
-import { clientToCanvasLocal as x, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
-import { SURFACE_PORTAL_LAYER_ATTR as ae } from "./dialogSurfaceScope.js";
-var ie = /* @__PURE__ */ J('<div><div style="transform-origin:0 0">');
-const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, fe = '[data-floe-canvas-pan-surface="true"]', Y = 3;
-function de(t, a, f) {
-  return Math.max(a, Math.min(f, t));
+import { spread as B, mergeProps as j, insert as T, effect as q, className as G, setStyleProperty as J, template as K, use as Q } from "solid-js/web";
+import { createSignal as b, untrack as x, createEffect as A, onCleanup as D } from "solid-js";
+import { cn as I } from "../../utils/cn.js";
+import { startHotInteraction as y } from "../../utils/hotInteraction.js";
+import { resolveSurfaceInteractionTargetRole as ee, resolveSurfaceWheelRouting as te, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as ne } from "./localInteractionSurface.js";
+import { startPointerSession as re } from "./pointerSession.js";
+import { clientToCanvasLocal as R, localToCanvasWorld as oe, createViewportFromZoomAnchor as ae } from "./canvasGeometry.js";
+import { SURFACE_PORTAL_LAYER_ATTR as ie } from "./dialogSurfaceScope.js";
+var ce = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
+const le = 1, se = 0.45, ue = 2.2, de = 14e-4, fe = '[data-floe-canvas-pan-surface="true"]', Y = 3;
+function me(t, s, c) {
+  return Math.max(s, Math.min(c, t));
 }
-function b(t) {
+function k(t) {
   return {
     x: Number.isFinite(t.x) ? t.x : 0,
     y: Number.isFinite(t.y) ? t.y : 0,
-    scale: Number.isFinite(t.scale) && t.scale > 0 ? t.scale : ce
+    scale: Number.isFinite(t.scale) && t.scale > 0 ? t.scale : le
   };
 }
-function me(t, a) {
-  return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (a?.clientHeight ?? window.innerHeight) : t.deltaY;
+function we(t, s) {
+  return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (s?.clientHeight ?? window.innerHeight) : t.deltaY;
 }
-function Pe(t) {
-  const [a, f] = T(L(() => b(t.viewport))), [S, v] = T(null);
-  let i, s, d, m = !1, l;
-  const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? fe, F = () => t.wheelInteractiveSelector ?? te, V = () => t.minScale ?? le, y = () => t.maxScale ?? se, k = () => t.wheelZoomSpeed ?? ue, N = () => {
-    const e = S();
+function Le(t) {
+  let s = !1;
+  const [c, S] = b(x(() => k(t.viewport))), [w, v] = b(null);
+  let l, d, f, m = !1, u;
+  const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? fe, F = () => t.wheelInteractiveSelector ?? ne, V = () => t.minScale ?? se, N = () => t.maxScale ?? ue, H = () => t.wheelZoomSpeed ?? de, U = () => {
+    const e = w();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, w = () => {
-    d !== void 0 && (window.clearTimeout(d), d = void 0);
+  }, p = () => {
+    f !== void 0 && (window.clearTimeout(f), f = void 0);
   }, g = () => {
-    m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, U = () => {
+    m = !1, u !== void 0 && (window.clearTimeout(u), u = void 0);
+  }, W = () => {
     if (typeof window > "u") {
       m = !1;
       return;
     }
-    l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
-      l = void 0, m = !1;
+    u !== void 0 && window.clearTimeout(u), u = window.setTimeout(() => {
+      u = void 0, m = !1;
     }, 0);
-  }, C = (e) => {
-    L(() => t.onViewportChange?.(e));
-  }, W = (e) => {
+  }, E = (e) => {
+    x(() => t.onViewportChange?.(e));
+  }, Z = (e) => {
     if (typeof window > "u") {
-      C(e);
+      E(e);
       return;
     }
-    w(), d = window.setTimeout(() => {
-      d = void 0, C(e);
+    p(), f = window.setTimeout(() => {
+      f = void 0, E(e);
     }, 90);
-  }, h = (e) => (t.resolveTargetRole ?? Q)({
+  }, C = (e) => (t.resolveTargetRole ?? ee)({
     target: e,
     interactiveSelector: M(),
     panSurfaceSelector: X()
-  }), Z = () => {
-    const e = S();
+  }), O = () => {
+    const e = w();
     if (!e) return;
     e.stopInteraction?.();
-    const n = a();
-    v(null), s = void 0, e.startedFromPanSurface && e.moved && (m = !0, U()), C(n);
+    const n = c();
+    v(null), d = void 0, e.startedFromPanSurface && e.moved && (m = !0, W()), E(n);
   };
   A(() => {
-    S() || f(b(t.viewport));
+    w() || S(k(t.viewport));
   }), A(() => {
-    const e = i;
+    const e = l;
     if (!e) return;
-    const n = (r) => {
-      !m || h(r.target) !== "pan_surface" || (g(), r.preventDefault(), r.stopPropagation());
+    const n = (o) => {
+      !m || C(o.target) !== "pan_surface" || (g(), o.preventDefault(), o.stopPropagation());
+    }, a = (o) => {
+      o.code !== "Space" || o.isComposing || o.target instanceof Element && o.target.closest('input, textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"]') || (s = !0, e.contains(o.target) && o.preventDefault());
+    }, r = () => {
+      s = !1;
+    };
+    document.addEventListener("keydown", a), document.addEventListener("keyup", r), window.addEventListener("blur", r);
+    const i = (o) => {
+      (o.button === 1 || o.button === 0 && s) && h(o);
     };
-    e.addEventListener("click", n, !0), e.addEventListener("wheel", E, {
+    e.addEventListener("pointerdown", i, !0), e.addEventListener("click", n, !0), e.addEventListener("wheel", P, {
       passive: !1
-    }), I(() => {
-      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", E);
+    }), D(() => {
+      document.removeEventListener("keydown", a), document.removeEventListener("keyup", r), window.removeEventListener("blur", r), e.removeEventListener("pointerdown", i, !0), e.removeEventListener("click", n, !0), e.removeEventListener("wheel", P);
     });
-  }), I(() => {
-    w(), s?.stop({
+  }), D(() => {
+    p(), d?.stop({
       reason: "manual_stop",
       commit: !0
-    }), s = void 0, g();
+    }), d = void 0, g();
   });
-  const H = (e) => {
-    if (e.button !== 0) return;
-    const n = h(e.target);
-    if (n === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
-    const r = n === "pan_surface";
-    n !== "local_surface" && (w(), g(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault()), s?.stop({
+  const h = (e) => {
+    const n = e.button === 1 || e.button === 0 && s;
+    if (e.button !== 0 && e.button !== 1) return;
+    const a = n ? "canvas" : C(e.target);
+    if (a === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
+    n && e.stopPropagation();
+    const r = a === "pan_surface";
+    a !== "local_surface" && (p(), g(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault()), d?.stop({
       reason: "manual_stop",
       commit: !0
     }), v({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
-      startViewport: a(),
+      startViewport: c(),
       moved: !1,
       startedFromPanSurface: r,
-      stopInteraction: r ? void 0 : R({
+      stopInteraction: r ? void 0 : y({
         kind: "drag",
         cursor: "grabbing"
       })
-    }), s = ne({
+    }), d = re({
       pointerEvent: e,
-      captureEl: i ?? null,
+      captureEl: l ?? null,
       capturePointer: !r,
-      onMove: O,
+      onMove: $,
       onEnd: () => {
-        Z();
+        O();
       }
     }));
-  }, O = (e) => {
-    const n = S();
+  }, $ = (e) => {
+    const n = w();
     if (!n || n.pointerId !== e.pointerId) return;
-    const r = e.clientX - n.startClientX, o = e.clientY - n.startClientY;
-    if (!(n.moved || Math.abs(r) > Y || Math.abs(o) > Y)) return;
-    n.moved || (e.preventDefault(), (!i || typeof i.hasPointerCapture != "function" || !i.hasPointerCapture(e.pointerId)) && s?.capturePointer());
-    const u = {
+    const a = e.clientX - n.startClientX, r = e.clientY - n.startClientY;
+    if (!(n.moved || Math.abs(a) > Y || Math.abs(r) > Y)) return;
+    n.moved || (e.preventDefault(), (!l || typeof l.hasPointerCapture != "function" || !l.hasPointerCapture(e.pointerId)) && d?.capturePointer());
+    const o = {
       ...n.startViewport,
-      x: n.startViewport.x + r,
-      y: n.startViewport.y + o
+      x: n.startViewport.x + a,
+      y: n.startViewport.y + r
     };
     n.moved || v({
       ...n,
       moved: !0,
-      stopInteraction: n.stopInteraction ?? R({
+      stopInteraction: n.stopInteraction ?? y({
         kind: "drag",
         cursor: "grabbing"
       })
-    }), f(u);
-  }, E = (e) => {
-    const n = i?.getBoundingClientRect();
-    if (!n || (t.resolveWheelRouting ?? ee)({
+    }), S(o);
+  }, P = (e) => {
+    const n = l?.getBoundingClientRect();
+    if (!n || (t.resolveWheelRouting ?? te)({
       target: e.target,
       disablePanZoom: !!t.disablePanZoom,
       wheelInteractiveSelector: F()
     }).kind !== "canvas_zoom") return;
     e.preventDefault(), t.onViewportInteractionStart?.("wheel");
-    const o = a(), c = x(n, {
+    const r = c(), i = R(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), u = me(e, i), p = de(o.scale * Math.exp(-u * k()), V(), y());
-    if (Math.abs(p - o.scale) < 1e-4) return;
-    const P = oe({
-      viewport: o,
-      localPoint: c,
-      nextScale: p
+    }), o = we(e, l), L = me(r.scale * Math.exp(-o * H()), V(), N());
+    if (Math.abs(L - r.scale) < 1e-4) return;
+    const _ = ae({
+      viewport: r,
+      localPoint: i,
+      nextScale: L
     });
-    f(P), W(P);
-  }, $ = (e) => {
-    if (h(e.target) !== "canvas") return;
-    const n = i?.getBoundingClientRect();
+    S(_), Z(_);
+  }, z = (e) => {
+    if (C(e.target) !== "canvas") return;
+    const n = l?.getBoundingClientRect();
     if (!n) return;
     e.preventDefault();
-    const r = x(n, {
+    const a = R(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), o = a(), c = re(o, r);
+    }), r = c(), i = oe(r, a);
     t.onCanvasContextMenu?.({
       clientX: e.clientX,
       clientY: e.clientY,
-      localX: r.localX,
-      localY: r.localY,
-      worldX: c.worldX,
-      worldY: c.worldY
+      localX: a.localX,
+      localY: a.localY,
+      worldX: i.worldX,
+      worldY: i.worldY
     });
   };
   return (() => {
-    var e = ie(), n = e.firstChild, r = i;
-    return typeof r == "function" ? K(r, e) : i = e, z(e, B({
+    var e = ce(), n = e.firstChild, a = l;
+    return typeof a == "function" ? Q(a, e) : l = e, B(e, j({
       get class() {
-        return D("floe-infinite-canvas", N() && "is-panning", t.disablePanZoom && "is-locked", t.class);
+        return I("floe-infinite-canvas", U() && "is-panning", t.disablePanZoom && "is-locked", t.class);
       }
     }, {
-      [ae]: "true"
+      [ie]: "true"
     }, {
-      onPointerDown: H,
-      onContextMenu: $,
+      onPointerDown: h,
+      onContextMenu: z,
       get "aria-label"() {
         return t.ariaLabel ?? "Infinite canvas";
       }
-    }), !1, !0), _(n, () => t.children), _(e, () => t.overlay?.(a), null), j((o) => {
-      var c = D("floe-infinite-canvas__viewport", t.contentClass), u = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
-      return c !== o.e && q(n, o.e = c), u !== o.t && G(n, "transform", o.t = u), o;
+    }), !1, !0), T(n, () => t.children), T(e, () => t.overlay?.(c), null), q((r) => {
+      var i = I("floe-infinite-canvas__viewport", t.contentClass), o = `translate(${c().x}px, ${c().y}px) scale(${c().scale})`;
+      return i !== r.e && G(n, r.e = i), o !== r.t && J(n, "transform", r.t = o), r;
     }, {
       e: void 0,
       t: void 0
@@ -187,5 +198,5 @@ function Pe(t) {
   })();
 }
 export {
-  Pe as InfiniteCanvas
+  Le as InfiniteCanvas
 };

package/dist/components/ui/SurfaceAnchoredLayer.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'solid-js';
+export interface SurfaceAnchoredLayerProps {
+    anchor: HTMLElement | undefined;
+    /** Changes when the anchor moves through a transform; no idle polling is used. */
+    revision?: unknown;
+    children: JSX.Element;
+    class?: string;
+}
+/** Object-attached tools remain in screen pixels within the owning surface. */
+export declare function SurfaceAnchoredLayer(props: SurfaceAnchoredLayerProps): JSX.Element;

package/dist/components/ui/SurfaceAnchoredLayer.js

@@ -0,0 +1,89 @@
+import { createComponent as u, memo as L } from "solid-js/web";
+import { createSignal as c, createEffect as p, onMount as R, onCleanup as h, Show as S } from "solid-js";
+import { SurfaceFloatingLayer as A } from "./SurfaceFloatingLayer.js";
+import { resolveFloatingBoundary as C } from "./surfaceFloatingBoundary.js";
+import { resolveSurfacePortalHost as f } from "./dialogSurfaceScope.js";
+function W(n) {
+  const [v, b] = c(!1), [w, g] = c({
+    x: 0,
+    y: 0
+  }), [y, d] = c(!1), [x, M] = c(480);
+  let s, a;
+  const E = () => {
+    a = void 0;
+    const r = n.anchor;
+    if (!r || !s) return;
+    const e = C(f({
+      owner: r
+    }));
+    if (!e) {
+      d(!1);
+      return;
+    }
+    const t = r.getBoundingClientRect(), i = Math.max(120, e.width - 24);
+    M(i);
+    const l = s.getBoundingClientRect(), z = Math.max(e.left + 12, Math.min(t.left, e.right - l.width - 12)), m = t.top - l.height - 12, F = m >= e.top + 12 ? m : Math.max(e.top + 12, Math.min(t.bottom + 12, e.bottom - l.height - 12));
+    g({
+      x: z,
+      y: F
+    }), d(t.right > e.left && t.left < e.right && t.bottom > e.top && t.top < e.bottom);
+  }, o = () => {
+    a === void 0 && typeof requestAnimationFrame == "function" && (a = requestAnimationFrame(E));
+  };
+  return p(() => {
+    n.anchor, n.revision, o();
+  }), R(() => {
+    b(!0);
+    const r = typeof ResizeObserver == "function" ? new ResizeObserver(o) : void 0;
+    s && r?.observe(s);
+    const e = f({
+      owner: n.anchor
+    }).boundaryHost;
+    e && r?.observe(e);
+    const t = new MutationObserver(o);
+    let i = n.anchor?.parentElement;
+    for (; i && (t.observe(i, {
+      attributes: !0,
+      attributeFilter: ["style"]
+    }), i !== e); )
+      i = i.parentElement;
+    window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), o(), h(() => {
+      r?.disconnect(), t.disconnect(), window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    });
+  }), h(() => {
+    a !== void 0 && cancelAnimationFrame(a);
+  }), u(S, {
+    get when() {
+      return L(() => !!v())() && n.anchor;
+    },
+    get children() {
+      return u(A, {
+        get owner() {
+          return n.anchor;
+        },
+        get position() {
+          return w();
+        },
+        get class() {
+          return n.class;
+        },
+        get style() {
+          return {
+            visibility: y() ? "visible" : "hidden",
+            "max-width": `${x()}px`,
+            "z-index": 60
+          };
+        },
+        layerRef: (r) => {
+          s = r, o();
+        },
+        get children() {
+          return n.children;
+        }
+      });
+    }
+  });
+}
+export {
+  W as SurfaceAnchoredLayer
+};

package/dist/components/ui/index.d.ts

@@ -40,3 +40,4 @@ export { Checkbox, CheckboxGroup, CheckboxList, type CheckboxProps, type Checkbo
 export { Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, } from './Pagination';
 export { MobileKeyboard, type MobileKeyboardProps, type MobileKeyboardSuggestionItem, } from './MobileKeyboard';
 export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, type LinearProgressProps, type CircularProgressProps, type SegmentedProgressProps, type StepsProgressProps, type ProgressSize, type ProgressColor, } from './Progress';
+export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceAnchoredLayer';

package/dist/components/workbench/WorkbenchCanvas.d.ts

@@ -52,7 +52,7 @@ export interface WorkbenchCanvasProps {
         width: number;
         height: number;
     }) => void;
-    onUpdateStickyNote?: (noteId: string, patch: Partial<Pick<WorkbenchStickyNoteItem, 'body' | 'color'>>) => void;
+    onUpdateStickyNote?: (noteId: string, patch: Partial<Pick<WorkbenchStickyNoteItem, 'body' | 'color' | 'material'>>) => void;
     onDeleteStickyNote?: (noteId: string) => void;
     onSelectAnnotation?: (annotationId: string) => void;
     onAnnotationContextMenu?: (event: MouseEvent, item: WorkbenchAnnotationItem) => void;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,8 +1,8 @@
-import { use as E, insert as w, createComponent as g, memo as y, effect as F, template as x } from "solid-js/web";
+import { use as E, insert as w, createComponent as g, memo as y, effect as F, template as B } from "solid-js/web";
 import { createMemo as u, createSignal as _, Show as O, For as j } from "solid-js";
 import { resolveWorkbenchInteractionAdapter as z } from "./workbenchInteractionAdapter.js";
-import { WORKBENCH_BACKGROUND_REGION_FILTER_ID as P, WORKBENCH_TEXT_FILTER_ID as q, WORKBENCH_STICKY_FILTER_ID as T } from "./types.js";
-import { WorkbenchCanvasField as U } from "./WorkbenchCanvasField.js";
+import { WORKBENCH_BACKGROUND_REGION_FILTER_ID as P, WORKBENCH_TEXT_FILTER_ID as U, WORKBENCH_STICKY_FILTER_ID as q } from "./types.js";
+import { WorkbenchCanvasField as T } from "./WorkbenchCanvasField.js";
 import { WorkbenchPlacementPreview as G } from "./WorkbenchPlacementPreview.js";
 import { WorkbenchBackgroundLayerView as $, WorkbenchAnnotationLayerView as K, WorkbenchLayerControlOverlayView as H, createWorkbenchTextEditorRegistry as Z, WorkbenchStickyNote as X } from "./WorkbenchLayerObjects.js";
 import { WorkbenchWidget as Y } from "./WorkbenchWidget.js";
@@ -10,11 +10,11 @@ import { createWorkbenchRenderLayerMap as J, resolveWorkbenchModeStrategy as Q,
 import { createWorkbenchWidgetEnterMotionTracker as p } from "./workbenchMotion.js";
 import { getWidgetEntry as R } from "./widgets/widgetRegistry.js";
 import { InfiniteCanvas as ee } from "../ui/InfiniteCanvas.js";
-var te = /* @__PURE__ */ x("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), ne = /* @__PURE__ */ x("<div class=workbench-canvas__projected-layer><div class=workbench-canvas__projected-work-layer>");
+var te = /* @__PURE__ */ B("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), ne = /* @__PURE__ */ B("<div class=workbench-canvas__projected-layer><div class=workbench-canvas__projected-work-layer>");
 function re(e) {
   const a = u((c) => {
-    const C = e.widgetById().get(e.widgetId);
-    if (C) return C;
+    const v = e.widgetById().get(e.widgetId);
+    if (v) return v;
     if (c) return c;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
   }), r = u(() => R(a().type, e.widgetDefinitions));
@@ -190,13 +190,13 @@ function Ce(e) {
     for (const [o, d] of Object.entries(n))
       d !== void 0 && (l[o] = d);
     return l;
-  }), C = u(() => new Map(e.widgets.map((n) => [n.id, n]))), B = u(() => (e.stickyNotes ?? []).map((n) => n.id)), N = u(() => new Map((e.stickyNotes ?? []).map((n) => [n.id, n]))), b = u(() => J([...e.widgets, ...e.stickyNotes ?? []])), s = Z(), [S, f] = _(null), L = u(() => Q(e.mode)), v = u(() => L().workLayerLocked), m = u(() => L().layerEditingEnabled), D = u(() => e.widgets.filter((n) => {
+  }), v = u(() => new Map(e.widgets.map((n) => [n.id, n]))), x = u(() => (e.stickyNotes ?? []).map((n) => n.id)), N = u(() => new Map((e.stickyNotes ?? []).map((n) => [n.id, n]))), b = u(() => J([...e.widgets, ...e.stickyNotes ?? []])), C = Z(), [S, f] = _(null), L = u(() => Q(e.mode)), I = u(() => L().workLayerLocked), m = u(() => L().layerEditingEnabled), D = u(() => e.widgets.filter((n) => {
     const l = R(n.type, e.widgetDefinitions);
     return A(l) === "canvas_scaled";
   })), h = u(() => e.widgets.filter((n) => {
     const l = R(n.type, e.widgetDefinitions);
     return A(l) === "projected_surface";
-  }).map((n) => n.id)), M = u(() => h().length > 0), V = u(() => M() ? [] : e.stickyNotes ?? []), W = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0, I = M;
+  }).map((n) => n.id)), M = u(() => h().length > 0), V = u(() => M() ? [] : e.stickyNotes ?? []), W = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0, s = M;
   return (() => {
     var n = te();
     n.firstChild;
@@ -238,11 +238,13 @@ function Ce(e) {
       },
       overlay: (o) => [g(O, {
         get when() {
-          return I();
+          return s();
         },
         get children() {
           var d = ne(), k = d.firstChild;
           return w(d, g($, {
+            textEditorRegistry: C,
+            onUpdate: (t, i) => e.onUpdateBackgroundLayer?.(t, i),
             get items() {
               return e.backgroundLayers ?? [];
             },
@@ -277,14 +279,14 @@ function Ce(e) {
               return y(() => !!m())() && !e.locked;
             },
             get filtered() {
-              return e.filters[q] === !1;
+              return e.filters[U] === !1;
             },
             projection: "screen",
             get preview() {
               return S();
             },
             onPreviewGeometry: f,
-            textEditorRegistry: s,
+            textEditorRegistry: C,
             get viewport() {
               return o();
             },
@@ -304,7 +306,7 @@ function Ce(e) {
               get canvasFrameSize() {
                 return e.canvasFrameSize;
               },
-              widgetById: C,
+              widgetById: v,
               renderLayers: b,
               get widgetMotionById() {
                 return c();
@@ -316,7 +318,7 @@ function Ce(e) {
                 return e.visualFrontOwnerId;
               },
               get locked() {
-                return e.locked || v();
+                return e.locked || I();
               },
               get filters() {
                 return e.filters;
@@ -376,7 +378,7 @@ function Ce(e) {
             })
           }), null), w(k, g(j, {
             get each() {
-              return B();
+              return x();
             },
             children: (t) => g(oe, {
               noteId: t,
@@ -390,10 +392,10 @@ function Ce(e) {
                 return e.visualFrontOwnerId;
               },
               get locked() {
-                return e.locked || v();
+                return e.locked;
               },
               get filtered() {
-                return y(() => !v())() && e.filters[T] === !1;
+                return y(() => !I())() && e.filters[q] === !1;
               },
               get onSelectStickyNote() {
                 return e.onSelectStickyNote;
@@ -453,7 +455,7 @@ function Ce(e) {
               return S();
             },
             onPreviewGeometry: f,
-            textEditorRegistry: s,
+            textEditorRegistry: C,
             onCommitAnnotationMove: (t, i) => e.onCommitAnnotationMove?.(t, i),
             onCommitAnnotationResize: (t, i) => e.onCommitAnnotationResize?.(t, i),
             onUpdateTextAnnotation: (t, i) => e.onUpdateTextAnnotation?.(t, i),
@@ -461,11 +463,11 @@ function Ce(e) {
             onCommitBackgroundResize: (t, i) => e.onCommitBackgroundResize?.(t, i),
             onUpdateBackgroundLayer: (t, i) => e.onUpdateBackgroundLayer?.(t, i),
             onDeleteBackgroundLayer: (t) => e.onDeleteBackgroundLayer?.(t)
-          }), null), F(() => d.classList.toggle("is-work-layer-locked", !!v())), d;
+          }), null), F(() => d.classList.toggle("is-work-layer-locked", !!I())), d;
         }
       }), g(O, {
         get when() {
-          return y(() => !!I())() ? e.placementPreview : null;
+          return y(() => !!s())() ? e.placementPreview : null;
         },
         children: (d) => g(G, {
           get preview() {
@@ -478,7 +480,7 @@ function Ce(e) {
         })
       })],
       get children() {
-        return g(U, {
+        return g(T, {
           get widgetDefinitions() {
             return e.widgetDefinitions;
           },
@@ -495,7 +497,7 @@ function Ce(e) {
             return e.backgroundLayers ?? [];
           },
           get placementPreview() {
-            return y(() => !!I())() ? null : e.placementPreview;
+            return y(() => !!s())() ? null : e.placementPreview;
           },
           get viewport() {
             return e.viewport;
@@ -510,7 +512,7 @@ function Ce(e) {
             return e.visualFrontOwnerId;
           },
           get workLayerLocked() {
-            return v();
+            return I();
           },
           get annotationLayerEditable() {
             return m();
@@ -522,7 +524,7 @@ function Ce(e) {
             return m();
           },
           get renderFreeformLayers() {
-            return !I();
+            return !s();
           },
           get viewportScale() {
             return e.viewport.scale;
@@ -645,7 +647,7 @@ function Ce(e) {
             return S();
           },
           onLayerGeometryPreview: f,
-          textEditorRegistry: s
+          textEditorRegistry: C
         });
       }
     }), null), F((o) => {

package/dist/components/workbench/WorkbenchCanvasField.d.ts

@@ -48,7 +48,7 @@ export interface WorkbenchCanvasFieldProps {
         width: number;
         height: number;
     }) => void;
-    onUpdateStickyNote?: (noteId: string, patch: Partial<Pick<WorkbenchStickyNoteItem, 'body' | 'color'>>) => void;
+    onUpdateStickyNote?: (noteId: string, patch: Partial<Pick<WorkbenchStickyNoteItem, 'body' | 'color' | 'material'>>) => void;
     onDeleteStickyNote?: (noteId: string) => void;
     onSelectAnnotation?: (annotationId: string) => void;
     onAnnotationContextMenu?: (event: MouseEvent, item: WorkbenchAnnotationItem) => void;