@floegence/floe-webapp-core 0.55.2 → 0.56.2

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,39 +1,39 @@
-import { createSignal as nt, createMemo as u, createEffect as Ne, onCleanup as Ae, batch as p } from "solid-js";
+import { createSignal as it, createMemo as u, createEffect as Ae, onCleanup as Le, batch as R } from "solid-js";
 import { clientToCanvasWorld as Ie } from "../ui/canvasGeometry.js";
-import { ArrowUp as xt, Copy as R, Trash as F, MessageSquare as St, Region as Wt, TextTool as Le } from "../icons/index.js";
-import { WORKBENCH_STICKY_FILTER_ID as De } from "./types.js";
-import { WORKBENCH_DEFAULT_STICKY_NOTE_COLOR as Me, WORKBENCH_DEFAULT_TEXT_COLOR as je, WORKBENCH_DEFAULT_TEXT_FONT as Ot, WORKBENCH_BACKGROUND_MATERIALS as Mt, WORKBENCH_REGION_FILL_OPTIONS as pe, WORKBENCH_STICKY_NOTE_COLORS as Re, WORKBENCH_DEFAULT_BACKGROUND_MATERIAL as Fe, WORKBENCH_DEFAULT_REGION_FILL as Be } from "./workbenchOptions.js";
-import { resolveWorkbenchModeStrategy as Tt, compareWorkbenchLayerRenderOrder as Ct, createContextMenuPosition as Xe, resolveWorkbenchLayerFront as Nt, createWorkbenchWidgetFrame as Ee, createWorkbenchId as W, createWorkbenchViewportCenteredOnWidget as At, findNearestWidget as ze, sanitizeFilters as Ye, WORKBENCH_CONTEXT_MENU_WIDTH_PX as He, estimateContextMenuHeight as Ve, clampScale as Ke, WORKBENCH_MAX_SCALE as ve, WORKBENCH_CANVAS_ZOOM_STEP as It, normalizeWorkbenchInteractionMode as Ue, createWorkbenchViewportAtScale as Pe, WORKBENCH_WORK_MIN_SCALE as qe, createWorkbenchViewportFitForWidget as Ze } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetDefinitions as Ge, getWidgetEntry as $e } from "./widgets/widgetRegistry.js";
-import { resolveTextAnnotationDefaultSize as Je, resolveBackgroundLayerDefaultSize as Qe, resolveStickyNoteDefaultSize as tn } from "./workbenchPlacement.js";
-function jt(o, d) {
-  const r = o.findIndex((a) => a === d);
-  return o[(r + 1) % o.length] ?? o[0];
+import { ArrowUp as St, Copy as p, Trash as B, MessageSquare as Wt, Region as Ot, TextTool as De } from "../icons/index.js";
+import { WORKBENCH_STICKY_FILTER_ID as je } from "./types.js";
+import { WORKBENCH_DEFAULT_STICKY_NOTE_COLOR as Me, WORKBENCH_DEFAULT_TEXT_COLOR as Fe, WORKBENCH_DEFAULT_TEXT_FONT as Tt, WORKBENCH_BACKGROUND_MATERIALS as Mt, WORKBENCH_REGION_FILL_OPTIONS as Re, WORKBENCH_STICKY_NOTE_COLORS as pe, WORKBENCH_DEFAULT_BACKGROUND_MATERIAL as Be, WORKBENCH_DEFAULT_REGION_FILL as Xe } from "./workbenchOptions.js";
+import { resolveWorkbenchModeStrategy as Ct, compareWorkbenchLayerRenderOrder as Nt, createContextMenuPosition as ze, resolveWorkbenchLayerFront as At, createWorkbenchWidgetFrame as Ee, createWorkbenchId as x, createWorkbenchViewportCenteredOnWidget as Lt, findNearestWidget as Ye, sanitizeFilters as He, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Ve, estimateContextMenuHeight as Ke, clampScale as ve, WORKBENCH_MAX_SCALE as Ue, WORKBENCH_CANVAS_ZOOM_STEP as It, normalizeWorkbenchInteractionMode as Pe, createWorkbenchViewportAtScale as qe, WORKBENCH_WORK_MIN_SCALE as Ze, createWorkbenchViewportFitForWidget as Ge } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as $e, getWidgetEntry as Je } from "./widgets/widgetRegistry.js";
+import { resolveTextAnnotationDefaultSize as Qe, resolveBackgroundLayerDefaultSize as tn, resolveStickyNoteDefaultSize as en } from "./workbenchPlacement.js";
+function Ft(o, d) {
+  const s = o.findIndex((a) => a === d);
+  return o[(s + 1) % o.length] ?? o[0];
 }
-function Lt(o, d, r) {
+function Dt(o, d, s) {
   const a = String(d ?? "").trim();
-  return o.includes(a) ? a : r;
+  return o.includes(a) ? a : s;
 }
-function en(o, d) {
-  const r = Number(o);
-  return Number.isFinite(r) ? Math.max(0.08, Math.min(1, r)) : d;
-}
-function nn(o) {
-  return jt(Re, o);
+function nn(o, d) {
+  const s = Number(o);
+  return Number.isFinite(s) ? Math.max(0.08, Math.min(1, s)) : d;
 }
 function on(o) {
-  return jt(Mt, o);
+  return Ft(pe, o);
+}
+function cn(o) {
+  return Ft(Mt, o);
 }
-function Dt(o) {
+function jt(o) {
   return !("kind" in o);
 }
-function it(o) {
-  return o.reduce((d, r) => Math.max(d, r.z_index), 1);
+function ot(o) {
+  return o.reduce((d, s) => Math.max(d, s.z_index), 1);
 }
-function cn(o, d) {
-  return it([...o, ...d]);
+function dn(o, d) {
+  return ot([...o, ...d]);
 }
-function dn(o) {
+function an(o) {
   return {
     id: o.id,
     type: "sticky_note",
@@ -46,47 +46,48 @@ function dn(o) {
     created_at_unix_ms: o.created_at_unix_ms
   };
 }
-function an(o, d, r) {
-  const a = Date.now(), { width: y, height: _ } = tn();
+function sn(o, d, s) {
+  const a = Date.now(), { width: y, height: _ } = en();
   return {
-    id: W(),
+    id: x(),
     kind: "sticky_note",
-    body: "Capture the thought, decision, or next step here.",
+    title: "",
+    body: "",
     color: Me,
     x: o - y / 2,
     y: d - _ / 2,
     width: y,
     height: _,
-    z_index: r,
+    z_index: s,
     created_at_unix_ms: a,
     updated_at_unix_ms: a
   };
 }
-function rn(o, d, r, a) {
-  const y = Date.now(), { width: _, height: b } = Je(a);
+function rn(o, d, s, a) {
+  const y = Date.now(), { width: _, height: b } = Qe(a);
   return {
-    id: W(),
+    id: x(),
     kind: "text",
     text: "Label this area",
-    font_family: a?.font_family ?? Ot.fontFamily,
+    font_family: a?.font_family ?? Tt.fontFamily,
     font_size: a?.font_size ?? 30,
-    font_weight: a?.font_weight ?? Ot.fontWeight,
-    color: a?.color ?? je,
+    font_weight: a?.font_weight ?? Tt.fontWeight,
+    color: a?.color ?? Fe,
     align: a?.align ?? "left",
     x: o - _ / 2,
     y: d - b / 2,
     width: _,
     height: b,
-    z_index: r,
+    z_index: s,
     created_at_unix_ms: y,
     updated_at_unix_ms: y
   };
 }
-function sn(o) {
+function ln(o) {
   const d = Date.now();
   return {
     ...o,
-    id: W(),
+    id: x(),
     x: o.x + 28,
     y: o.y + 28,
     z_index: o.z_index + 1,
@@ -94,36 +95,36 @@ function sn(o) {
     updated_at_unix_ms: d
   };
 }
-function ln(o, d, r, a) {
-  const y = Date.now(), { width: _, height: b } = Qe(a), f = String(a?.name ?? "").trim();
+function un(o, d, s, a) {
+  const y = Date.now(), { width: _, height: b } = tn(a), f = String(a?.name ?? "").trim();
   return {
-    id: W(),
+    id: x(),
     name: f,
-    fill: Lt(
-      pe,
+    fill: Dt(
+      Re,
       a?.fill,
-      Be
+      Xe
     ),
-    opacity: en(a?.opacity, 0.72),
-    material: Lt(
+    opacity: nn(a?.opacity, 1),
+    material: Dt(
       Mt,
       a?.material,
-      Fe
+      Be
     ),
     x: o - _ / 2,
     y: d - b / 2,
     width: _,
     height: b,
-    z_index: r,
+    z_index: s,
     created_at_unix_ms: y,
     updated_at_unix_ms: y
   };
 }
-function un(o) {
+function gn(o) {
   const d = Date.now();
   return {
     ...o,
-    id: W(),
+    id: x(),
     name: o.name,
     x: o.x + 36,
     y: o.y + 36,
@@ -132,43 +133,43 @@ function un(o) {
     updated_at_unix_ms: d
   };
 }
-function Nn(o) {
-  const [d, r] = nt(null), [a, y] = nt(null), [_, b] = nt({ width: 0, height: 0 });
+function An(o) {
+  const [d, s] = it(null), [a, y] = it(null), [_, b] = it({ width: 0, height: 0 });
   let f = null, C = null;
-  const s = o.state, m = u(() => s().widgets), x = u(() => s().stickyNotes ?? []), ot = u(() => s().annotations ?? []), ct = u(() => s().backgroundLayers ?? []), w = u(() => s().viewport), pt = u(() => s().locked), B = u(() => s().filters), Rt = u(() => s().selectedWidgetId), X = u(
-    () => s().selectedObject ?? (s().selectedWidgetId ? { kind: "widget", id: s().selectedWidgetId } : null)
-  ), N = u(() => s().mode ?? "work"), Ft = u(() => Tt(N())), dt = u(() => s().activeTool ?? "select"), Bt = u(() => s().theme), E = u(() => cn(m(), x())), Xt = u(() => [...m(), ...x()].sort(Ct).at(-1)?.id ?? null), Et = u(() => `${Math.round(w().scale * 100)}%`);
-  Ne(() => {
+  const r = o.state, w = u(() => r().widgets), S = u(() => r().stickyNotes ?? []), ct = u(() => r().annotations ?? []), dt = u(() => r().backgroundLayers ?? []), m = u(() => r().viewport), Rt = u(() => r().locked), X = u(() => r().filters), pt = u(() => r().selectedWidgetId), z = u(
+    () => r().selectedObject ?? (r().selectedWidgetId ? { kind: "widget", id: r().selectedWidgetId } : null)
+  ), N = u(() => r().mode ?? "work"), E = u(() => Ct(N())), at = u(() => r().activeTool ?? "select"), Bt = u(() => r().theme), A = u(() => dn(w(), S())), Xt = u(() => [...w(), ...S()].sort(Nt).at(-1)?.id ?? null), zt = u(() => `${Math.round(m().scale * 100)}%`);
+  Ae(() => {
     const e = a();
     e && e !== Xt() && y(null);
   });
   const O = (e) => {
     y(e);
-  }, zt = () => typeof o.widgetDefinitions == "function" ? o.widgetDefinitions() : o.widgetDefinitions, Yt = () => typeof o.textAnnotationDefaults == "function" ? o.textAnnotationDefaults() : o.textAnnotationDefaults, Ht = () => typeof o.backgroundLayerDefaults == "function" ? o.backgroundLayerDefaults() : o.backgroundLayerDefaults, A = u(
-    () => Ge(zt())
-  ), z = (e, t) => {
+  }, Et = () => typeof o.widgetDefinitions == "function" ? o.widgetDefinitions() : o.widgetDefinitions, Yt = () => typeof o.textAnnotationDefaults == "function" ? o.textAnnotationDefaults() : o.textAnnotationDefaults, Ht = () => typeof o.backgroundLayerDefaults == "function" ? o.backgroundLayerDefaults() : o.backgroundLayerDefaults, L = u(
+    () => $e(Et())
+  ), Y = (e, t) => {
     const n = Number.isFinite(e) && e > 0 ? e : 0, i = Number.isFinite(t) && t > 0 ? t : 0, c = { width: n, height: i }, g = _();
     return g.width === n && g.height === i ? g : (b(c), c);
-  }, at = () => {
+  }, st = () => {
     C?.disconnect(), C = null;
-  }, h = () => f ? z(f.clientWidth, f.clientHeight) : z(0, 0), Vt = (e) => {
+  }, h = () => f ? Y(f.clientWidth, f.clientHeight) : Y(0, 0), Vt = (e) => {
     if (f === (e ?? null)) {
       h();
       return;
     }
-    at(), f = e ?? null, h(), !(!f || typeof ResizeObserver > "u") && (C = new ResizeObserver((t) => {
+    st(), f = e ?? null, h(), !(!f || typeof ResizeObserver > "u") && (C = new ResizeObserver((t) => {
       const n = t[0];
-      z(
+      Y(
         n?.contentRect.width ?? f?.clientWidth ?? 0,
         n?.contentRect.height ?? f?.clientHeight ?? 0
       );
     }), C.observe(f));
   };
-  Ae(() => {
-    at(), f = null;
+  Le(() => {
+    st(), f = null;
   });
   const Kt = (e) => {
-    r({
+    s({
       clientX: e.clientX,
       clientY: e.clientY,
       worldX: e.worldX,
@@ -176,7 +177,7 @@ function Nn(o) {
       target: { kind: "canvas", mode: N() }
     });
   }, vt = (e, t) => {
-    S(t.id), r({
+    W(t.id), s({
       clientX: e.clientX,
       clientY: e.clientY,
       worldX: t.x,
@@ -185,7 +186,7 @@ function Nn(o) {
       widgetId: t.id
     });
   }, Ut = (e, t) => {
-    D(t.id), r({
+    j(t.id), s({
       clientX: e.clientX,
       clientY: e.clientY,
       worldX: t.x,
@@ -194,7 +195,7 @@ function Nn(o) {
       widgetId: t.id
     });
   }, Pt = (e, t) => {
-    r({
+    s({
       clientX: e.clientX,
       clientY: e.clientY,
       worldX: t.x,
@@ -202,16 +203,16 @@ function Nn(o) {
       target: { kind: "annotation", id: t.id }
     });
   }, qt = (e, t) => {
-    r({
+    s({
       clientX: e.clientX,
       clientY: e.clientY,
       worldX: t.x,
       worldY: t.y,
       target: { kind: "background_layer", id: t.id }
     });
-  }, l = () => r(null), Zt = (e) => s().widgets.find((t) => t.id === e) ?? null, I = (e) => s().widgets.find((t) => t.type === e) ?? null, Y = (e) => s().stickyNotes?.find((t) => t.id === e) ?? null, rt = (e) => s().annotations?.find((t) => t.id === e) ?? null, st = (e) => s().backgroundLayers?.find((t) => t.id === e) ?? null, Gt = (e) => e.target ? e.target : e.widgetId ? Y(e.widgetId) ? { kind: "sticky_note", id: e.widgetId } : { kind: "widget", id: e.widgetId } : { kind: "canvas", mode: N() }, L = (e, t) => {
+  }, l = () => s(null), Zt = (e) => r().widgets.find((t) => t.id === e) ?? null, I = (e) => r().widgets.find((t) => t.type === e) ?? null, H = (e) => r().stickyNotes?.find((t) => t.id === e) ?? null, rt = (e) => r().annotations?.find((t) => t.id === e) ?? null, lt = (e) => r().backgroundLayers?.find((t) => t.id === e) ?? null, Gt = (e) => e.target ? e.target : e.widgetId ? H(e.widgetId) ? { kind: "sticky_note", id: e.widgetId } : { kind: "widget", id: e.widgetId } : { kind: "canvas", mode: N() }, D = (e, t) => {
     if (t?.source === "pointer") {
-      const n = f?.getBoundingClientRect(), i = n ? Ie(n, w(), {
+      const n = f?.getBoundingClientRect(), i = n ? Ie(n, m(), {
         clientX: t.clientX,
         clientY: t.clientY
       }) : null;
@@ -243,58 +244,58 @@ function Nn(o) {
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: (i) => {
-        const c = L(t, i);
-        V(e.type, c.worldX, c.worldY), l();
+        const c = D(t, i);
+        K(e.type, c.worldX, c.worldY), l();
       }
     };
-  }, lt = u(() => {
+  }, ut = u(() => {
     const e = d();
     if (!e) return [];
     const t = Gt(e);
     if (t.kind === "widget") {
-      const n = m().find((c) => c.id === t.id), i = [];
+      const n = w().find((c) => c.id === t.id), i = [];
       return n && (i.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: xt,
+        icon: St,
         onSelect: () => {
-          S(n.id), l();
+          W(n.id), l();
         }
       }), i.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: R,
+        icon: p,
         onSelect: () => {
-          ut(n.type, n.x + 32, n.y + 32), l();
+          gt(n.type, n.x + 32, n.y + 32), l();
         }
       })), i.push({ id: "separator-delete", kind: "separator" }), i.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: F,
+        icon: B,
         destructive: !0,
         onSelect: () => {
-          K(t.id), l();
+          v(t.id), l();
         }
       }), i;
     }
     if (t.kind === "sticky_note") {
-      const n = Y(t.id), i = [];
+      const n = H(t.id), i = [];
       return n && (i.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: xt,
+        icon: St,
         onSelect: () => {
-          D(n.id), l();
+          j(n.id), l();
         }
       }), i.push({
         id: "copy-content",
         kind: "action",
         label: "Copy Content",
-        icon: R,
+        icon: p,
         onSelect: () => {
           typeof navigator < "u" && navigator.clipboard?.writeText(n.body), l();
         }
@@ -302,18 +303,18 @@ function Nn(o) {
         id: "change-color",
         kind: "action",
         label: "Change Color",
-        icon: St,
+        icon: Wt,
         onSelect: () => {
-          ft(n.id, { color: nn(n.color) }), l();
+          yt(n.id, { color: on(n.color) }), l();
         }
       })), i.push({ id: "separator-delete", kind: "separator" }), i.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: F,
+        icon: B,
         destructive: !0,
         onSelect: () => {
-          q(t.id), l();
+          Z(t.id), l();
         }
       }), i;
     }
@@ -323,47 +324,47 @@ function Nn(o) {
         id: "duplicate",
         kind: "action",
         label: "Duplicate Text",
-        icon: R,
+        icon: p,
         onSelect: () => {
-          gt(n), l();
+          kt(n), l();
         }
       }), i.push({ id: "separator-delete", kind: "separator" }), i.push({
         id: "delete",
         kind: "action",
         label: "Delete Text",
-        icon: F,
+        icon: B,
         destructive: !0,
         onSelect: () => {
-          Z(t.id), l();
+          G(t.id), l();
         }
       }), i;
     }
     if (t.kind === "background_layer") {
-      const n = st(t.id), i = [];
+      const n = lt(t.id), i = [];
       return n && (i.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate Region",
-        icon: R,
+        icon: p,
         onSelect: () => {
-          kt(n), l();
+          ft(n), l();
         }
       }), i.push({
         id: "change-material",
         kind: "action",
         label: "Change Material",
-        icon: Wt,
+        icon: Ot,
         onSelect: () => {
-          yt(n.id, { material: on(n.material) }), l();
+          _t(n.id, { material: cn(n.material) }), l();
         }
       })), i.push({ id: "separator-delete", kind: "separator" }), i.push({
         id: "delete",
         kind: "action",
         label: "Delete Region",
-        icon: F,
+        icon: B,
         destructive: !0,
         onSelect: () => {
-          G(t.id), l();
+          $(t.id), l();
         }
       }), i;
     }
@@ -372,20 +373,20 @@ function Nn(o) {
         id: "create-background-region",
         kind: "action",
         label: "Add Region",
-        icon: Wt,
+        icon: Ot,
         onSelect: (n) => {
-          const i = L(e, n);
-          P(i.worldX, i.worldY), l();
+          const i = D(e, n);
+          q(i.worldX, i.worldY), l();
         }
       },
       {
         id: "create-text",
         kind: "action",
         label: "Add Text",
-        icon: Le,
+        icon: De,
         onSelect: (n) => {
-          const i = L(e, n);
-          U(i.worldX, i.worldY), l();
+          const i = D(e, n);
+          P(i.worldX, i.worldY), l();
         }
       }
     ] : [
@@ -393,40 +394,40 @@ function Nn(o) {
         id: "create-sticky-note",
         kind: "action",
         label: "Add Sticky",
-        icon: St,
+        icon: Wt,
         onSelect: (n) => {
-          const i = L(e, n);
-          v(i.worldX, i.worldY), l();
+          const i = D(e, n);
+          U(i.worldX, i.worldY), l();
         }
       },
-      ...A().map((n) => $t(n, e))
+      ...L().map((n) => $t(n, e))
     ];
   }), Jt = u(() => {
     const e = d();
     if (!e) return;
-    const t = lt(), n = t.filter((c) => c.kind === "action").length, i = t.filter((c) => c.kind === "separator").length;
-    return Xe({
+    const t = ut(), n = t.filter((c) => c.kind === "action").length, i = t.filter((c) => c.kind === "separator").length;
+    return ze({
       clientX: e.clientX,
       clientY: e.clientY,
-      menuWidth: He,
-      menuHeight: Ve(n, i)
+      menuWidth: Ve,
+      menuHeight: Ke(n, i)
     });
-  }), H = (e, t) => {
-    const n = $e(e, A()), i = n.singleton ? I(e) : null;
+  }), V = (e, t) => {
+    const n = Je(e, L()), i = n.singleton ? I(e) : null;
     if (i)
       return T(i, { centerViewport: !0 });
     const c = Ee(n, t), g = {
-      id: W(),
+      id: x(),
       type: e,
       title: n.defaultTitle,
       x: c.x,
       y: c.y,
       width: c.width,
       height: c.height,
-      z_index: E() + 1,
+      z_index: A() + 1,
       created_at_unix_ms: Date.now()
     };
-    return p(() => {
+    return R(() => {
       o.setState((k) => ({
         ...k,
         widgets: [...k.widgets, g],
@@ -436,28 +437,28 @@ function Nn(o) {
         activeTool: "select"
       })), O(g.id);
     }), g;
-  }, Qt = (e, t, n) => H(e, {
+  }, Qt = (e, t, n) => V(e, {
     anchor: "top_left",
     worldX: t,
     worldY: n
-  }), ut = (e, t, n) => H(e, {
+  }), gt = (e, t, n) => V(e, {
     anchor: "top_left",
     worldX: t,
     worldY: n
-  }), V = (e, t, n) => H(e, {
+  }), K = (e, t, n) => V(e, {
     anchor: "center",
     worldX: t,
     worldY: n
-  }), K = (e) => {
+  }), v = (e) => {
     o.setState((t) => ({
       ...t,
       widgets: t.widgets.filter((n) => n.id !== e),
       selectedWidgetId: t.selectedWidgetId === e ? null : t.selectedWidgetId,
       selectedObject: t.selectedObject?.kind === "widget" && t.selectedObject.id === e ? null : t.selectedObject ?? null
     }));
-  }, v = (e, t) => {
-    const n = an(e, t, E() + 1);
-    return p(() => {
+  }, U = (e, t) => {
+    const n = sn(e, t, A() + 1);
+    return R(() => {
       o.setState((i) => ({
         ...i,
         stickyNotes: [...i.stickyNotes ?? [], n],
@@ -467,11 +468,27 @@ function Nn(o) {
         activeTool: "select"
       })), O(n.id);
     }), n;
-  }, U = (e, t) => {
+  }, te = (e) => {
+    const t = Date.now(), n = 28 / m().scale, i = {
+      ...e,
+      id: x(),
+      x: e.x + n,
+      y: e.y + n,
+      z_index: A() + 1,
+      created_at_unix_ms: t,
+      updated_at_unix_ms: t
+    };
+    return o.setState((c) => ({
+      ...c,
+      stickyNotes: [...c.stickyNotes ?? [], i],
+      selectedWidgetId: null,
+      selectedObject: { kind: "sticky_note", id: i.id }
+    })), i;
+  }, P = (e, t) => {
     const n = rn(
       e,
       t,
-      it(ot()) + 1,
+      ot(ct()) + 1,
       Yt()
     );
     return o.setState((i) => ({
@@ -482,8 +499,8 @@ function Nn(o) {
       mode: "background",
       activeTool: "select"
     })), n;
-  }, gt = (e) => {
-    const t = sn(e);
+  }, kt = (e) => {
+    const t = ln(e);
     return o.setState((n) => ({
       ...n,
       annotations: [...n.annotations ?? [], t],
@@ -492,11 +509,11 @@ function Nn(o) {
       mode: "background",
       activeTool: "select"
     })), t;
-  }, P = (e, t) => {
-    const n = ln(
+  }, q = (e, t) => {
+    const n = un(
       e,
       t,
-      it(ct()) + 1,
+      ot(dt()) + 1,
       Ht()
     );
     return o.setState((i) => ({
@@ -507,8 +524,8 @@ function Nn(o) {
       mode: "background",
       activeTool: "select"
     })), n;
-  }, kt = (e) => {
-    const t = un(e);
+  }, ft = (e) => {
+    const t = gn(e);
     return o.setState((n) => ({
       ...n,
       backgroundLayers: [...n.backgroundLayers ?? [], t],
@@ -517,9 +534,9 @@ function Nn(o) {
       mode: "background",
       activeTool: "select"
     })), t;
-  }, S = (e) => {
-    const t = Nt([...m(), ...x()], e);
-    t && p(() => {
+  }, W = (e) => {
+    const t = At([...w(), ...S()], e);
+    t && R(() => {
       t.isTop || o.setState((n) => ({
         ...n,
         widgets: n.widgets.map(
@@ -527,9 +544,9 @@ function Nn(o) {
         )
       })), O(e);
     });
-  }, D = (e) => {
-    const t = Nt([...m(), ...x()], e);
-    t && p(() => {
+  }, j = (e) => {
+    const t = At([...w(), ...S()], e);
+    t && R(() => {
       t.isTop || o.setState((n) => ({
         ...n,
         stickyNotes: (n.stickyNotes ?? []).map(
@@ -537,40 +554,41 @@ function Nn(o) {
         )
       })), O(e);
     });
-  }, te = (e, t) => {
+  }, ee = (e, t) => {
     o.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === e ? { ...i, x: t.x, y: t.y } : i
       )
     }));
-  }, ee = (e, t) => {
+  }, ne = (e, t) => {
     o.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === e ? { ...i, width: t.width, height: t.height } : i
       )
     }));
-  }, ne = (e, t) => {
+  }, ie = (e, t) => {
     o.setState((n) => ({
       ...n,
       stickyNotes: (n.stickyNotes ?? []).map(
         (i) => i.id === e ? { ...i, x: t.x, y: t.y, updated_at_unix_ms: Date.now() } : i
       )
     }));
-  }, ie = (e, t) => {
+  }, oe = (e, t) => {
     o.setState((n) => ({
       ...n,
       stickyNotes: (n.stickyNotes ?? []).map(
         (i) => i.id === e ? { ...i, width: t.width, height: t.height, updated_at_unix_ms: Date.now() } : i
       )
     }));
-  }, ft = (e, t) => {
+  }, yt = (e, t) => {
     o.setState((n) => ({
       ...n,
       stickyNotes: (n.stickyNotes ?? []).map(
         (i) => i.id === e ? {
           ...i,
+          ...typeof t.title == "string" ? { title: t.title } : {},
           ...typeof t.body == "string" ? { body: t.body } : {},
           ...t.color ? { color: t.color } : {},
           ...t.material ? { material: t.material } : {},
@@ -578,27 +596,27 @@ function Nn(o) {
         } : i
       )
     }));
-  }, q = (e) => {
+  }, Z = (e) => {
     o.setState((t) => ({
       ...t,
       stickyNotes: (t.stickyNotes ?? []).filter((n) => n.id !== e),
       selectedObject: t.selectedObject?.kind === "sticky_note" && t.selectedObject.id === e ? null : t.selectedObject ?? null
     }));
-  }, oe = (e, t) => {
+  }, ce = (e, t) => {
     o.setState((n) => ({
       ...n,
       annotations: (n.annotations ?? []).map(
         (i) => i.id === e ? { ...i, x: t.x, y: t.y, updated_at_unix_ms: Date.now() } : i
       )
     }));
-  }, ce = (e, t) => {
+  }, de = (e, t) => {
     o.setState((n) => ({
       ...n,
       annotations: (n.annotations ?? []).map(
         (i) => i.id === e ? { ...i, width: t.width, height: t.height, updated_at_unix_ms: Date.now() } : i
       )
     }));
-  }, de = (e, t) => {
+  }, ae = (e, t) => {
     o.setState((n) => ({
       ...n,
       annotations: (n.annotations ?? []).map(
@@ -614,13 +632,13 @@ function Nn(o) {
         } : i
       )
     }));
-  }, Z = (e) => {
+  }, G = (e) => {
     o.setState((t) => ({
       ...t,
       annotations: (t.annotations ?? []).filter((n) => n.id !== e),
       selectedObject: t.selectedObject?.kind === "annotation" && t.selectedObject.id === e ? null : t.selectedObject ?? null
     }));
-  }, ae = (e, t) => {
+  }, se = (e, t) => {
     o.setState((n) => ({
       ...n,
       backgroundLayers: (n.backgroundLayers ?? []).map(
@@ -634,7 +652,7 @@ function Nn(o) {
         (i) => i.id === e ? { ...i, width: t.width, height: t.height, updated_at_unix_ms: Date.now() } : i
       )
     }));
-  }, yt = (e, t) => {
+  }, _t = (e, t) => {
     o.setState((n) => ({
       ...n,
       backgroundLayers: (n.backgroundLayers ?? []).map(
@@ -648,35 +666,35 @@ function Nn(o) {
         } : i
       )
     }));
-  }, G = (e) => {
+  }, $ = (e) => {
     o.setState((t) => ({
       ...t,
       backgroundLayers: (t.backgroundLayers ?? []).filter((n) => n.id !== e),
       selectedObject: t.selectedObject?.kind === "background_layer" && t.selectedObject.id === e ? null : t.selectedObject ?? null
     }));
   };
-  let $ = 0;
-  const J = (e) => {
+  let J = 0;
+  const Q = (e) => {
     o.setState((t) => ({ ...t, viewport: e }));
-  }, se = () => {
-    $ += 1;
+  }, le = () => {
+    J += 1;
   }, M = (e) => {
-    const t = w(), n = t.x, i = t.y, c = t.scale, g = performance.now(), k = 360, Oe = ++$, Te = (tt) => 1 - Math.pow(1 - tt, 3), ht = (tt) => {
-      if (Oe !== $) return;
-      const Ce = tt - g, bt = Math.min(Math.max(Ce / k, 0), 1), et = Te(bt);
-      J({
-        x: n + (e.x - n) * et,
-        y: i + (e.y - i) * et,
-        scale: c + (e.scale - c) * et
-      }), bt < 1 && requestAnimationFrame(ht);
+    const t = m(), n = t.x, i = t.y, c = t.scale, g = performance.now(), k = 360, Te = ++J, Ce = (et) => 1 - Math.pow(1 - et, 3), bt = (et) => {
+      if (Te !== J) return;
+      const Ne = et - g, xt = Math.min(Math.max(Ne / k, 0), 1), nt = Ce(xt);
+      Q({
+        x: n + (e.x - n) * nt,
+        y: i + (e.y - i) * nt,
+        scale: c + (e.scale - c) * nt
+      }), xt < 1 && requestAnimationFrame(bt);
     };
-    requestAnimationFrame(ht);
-  }, le = (e) => {
-    const t = Tt(e), n = w();
+    requestAnimationFrame(bt);
+  }, ue = (e) => {
+    const t = Ct(e), n = m();
     if (n.scale >= t.minScale) return;
     const i = h();
     M(
-      Pe({
+      qe({
         viewport: n,
         scale: t.minScale,
         minScale: t.minScale,
@@ -684,38 +702,38 @@ function Nn(o) {
         frameHeight: i.height
       })
     );
-  }, _t = (e) => {
-    const t = w(), n = h(), i = (n.width / 2 - t.x) / t.scale, c = (n.height / 2 - t.y) / t.scale, g = Ke(
+  }, mt = (e) => {
+    const t = m(), n = h(), i = (n.width / 2 - t.x) / t.scale, c = (n.height / 2 - t.y) / t.scale, g = ve(
       e === "in" ? t.scale * It : t.scale / It,
-      Ft().minScale,
-      ve
+      E().minScale,
+      Ue
     ), k = {
       x: n.width / 2 - i * g,
       y: n.height / 2 - c * g,
       scale: g
     };
-    J(k);
-  }, ue = () => {
+    Q(k);
+  }, ge = () => {
     o.setState((e) => ({ ...e, locked: !e.locked }));
-  }, ge = (e) => {
+  }, ke = (e) => {
     o.setState((t) => ({
       ...t,
       filters: { ...t.filters, [e]: !t.filters[e] }
     }));
-  }, ke = (e, t) => {
+  }, fe = (e, t) => {
     o.setState((n) => {
       const i = { ...n.filters }, c = [...new Set(t.map((k) => String(k)).filter(Boolean))], g = c.length > 1 && c.every((k) => i[k] !== !1 == (k === e));
       for (const k of c)
         i[k] = g ? !0 : k === e;
       return { ...n, filters: i };
     });
-  }, fe = () => {
-    const e = A();
+  }, ye = () => {
+    const e = L();
     o.setState((t) => ({
       ...t,
-      filters: Ye(void 0, e)
+      filters: He(void 0, e)
     }));
-  }, j = (e) => {
+  }, F = (e) => {
     o.setState((t) => ({
       ...t,
       selectedWidgetId: e,
@@ -723,25 +741,25 @@ function Nn(o) {
       mode: t.mode === "background" ? "work" : t.mode,
       activeTool: "select"
     }));
-  }, mt = () => {
+  }, wt = () => {
     o.setState(
       (e) => e.selectedWidgetId === null && !e.selectedObject ? e : { ...e, selectedWidgetId: null, selectedObject: null }
     );
-  }, ye = (e) => {
+  }, _e = (e) => {
     o.setState((t) => ({
       ...t,
       selectedObject: e,
       selectedWidgetId: e?.kind === "widget" ? e.id : null,
       activeTool: "select"
     }));
-  }, wt = (e) => {
+  }, ht = (e) => {
     o.setState((t) => ({
       ...t,
       selectedWidgetId: null,
       selectedObject: { kind: "sticky_note", id: e },
       activeTool: "select"
-    })), D(e);
-  }, _e = (e) => {
+    })), j(e);
+  }, me = (e) => {
     o.setState((t) => ({
       ...t,
       selectedWidgetId: null,
@@ -749,7 +767,7 @@ function Nn(o) {
       mode: "background",
       activeTool: "select"
     }));
-  }, me = (e) => {
+  }, we = (e) => {
     o.setState((t) => ({
       ...t,
       selectedWidgetId: null,
@@ -757,86 +775,86 @@ function Nn(o) {
       mode: "background",
       activeTool: "select"
     }));
-  }, we = (e) => {
-    const t = Ue(e);
+  }, he = (e) => {
+    const t = Pe(e);
     o.setState((n) => ({
       ...n,
       mode: t,
       activeTool: "select",
       selectedWidgetId: t === "work" ? n.selectedObject?.kind === "widget" ? n.selectedObject.id : n.selectedWidgetId : null,
       selectedObject: t === "work" ? n.selectedObject?.kind === "widget" || n.selectedObject?.kind === "sticky_note" ? n.selectedObject : n.selectedWidgetId ? { kind: "widget", id: n.selectedWidgetId } : null : n.selectedObject?.kind === "background_layer" || n.selectedObject?.kind === "annotation" ? n.selectedObject : null
-    })), le(t);
-  }, he = (e) => {
+    })), ue(t);
+  }, be = (e) => {
     o.setState((t) => ({
       ...t,
       activeTool: e,
       mode: e === "text" || e === "background-region" ? "background" : e === "sticky-note" ? "work" : t.mode ?? "work"
     }));
-  }, be = (e, t) => {
-    const n = dt();
-    return n === "sticky-note" ? v(e, t) : n === "text" ? U(e, t) : n === "background-region" ? P(e, t) : null;
-  }, xe = () => {
-    const e = h(), t = w();
+  }, xe = (e, t) => {
+    const n = at();
+    return n === "sticky-note" ? U(e, t) : n === "text" ? P(e, t) : n === "background-region" ? q(e, t) : null;
+  }, Se = () => {
+    const e = h(), t = m();
     return {
       worldX: e.width > 0 ? (e.width / 2 - t.x) / t.scale : 240,
       worldY: e.height > 0 ? (e.height / 2 - t.y) / t.scale : 180
     };
-  }, Q = (e) => {
+  }, tt = (e) => {
     const t = h();
     t.width === 0 || t.height === 0 || M(
-      At({
+      Lt({
         widget: e,
-        scale: w().scale,
+        scale: m().scale,
         frameWidth: t.width,
         frameHeight: t.height
       })
     );
-  }, Se = (e) => {
+  }, We = (e) => {
     const t = h();
     t.width === 0 || t.height === 0 || M(
-      Ze({
+      Ge({
         widget: e,
         frameWidth: t.width,
         frameHeight: t.height
       })
     );
-  }, We = (e) => {
+  }, Oe = (e) => {
     const t = h();
     t.width === 0 || t.height === 0 || M(
-      At({
+      Lt({
         widget: e,
-        scale: qe,
+        scale: Ze,
         frameWidth: t.width,
         frameHeight: t.height
       })
     );
-  }, T = (e, t = {}) => (j(e.id), S(e.id), t.centerViewport !== !1 && Q(e), e);
+  }, T = (e, t = {}) => (F(e.id), W(e.id), t.centerViewport !== !1 && tt(e), e);
   return {
-    widgets: m,
-    stickyNotes: x,
-    annotations: ot,
-    backgroundLayers: ct,
-    viewport: w,
+    widgets: w,
+    stickyNotes: S,
+    annotations: ct,
+    backgroundLayers: dt,
+    viewport: m,
     canvasFrameSize: _,
-    locked: pt,
-    filters: B,
-    selectedWidgetId: Rt,
-    selectedObject: X,
+    locked: Rt,
+    filters: X,
+    selectedWidgetId: pt,
+    selectedObject: z,
     mode: N,
-    activeTool: dt,
+    activeTool: at,
     theme: Bt,
-    topZIndex: E,
-    scaleLabel: Et,
+    topZIndex: A,
+    scaleLabel: zt,
     visualFrontOwnerId: a,
-    widgetDefinitions: A,
+    widgetDefinitions: L,
     setCanvasFrameRef: Vt,
     contextMenu: {
       state: d,
-      items: lt,
+      items: ut,
       position: Jt,
       close: l,
       retarget: (e) => {
-        e.preventDefault(), e.stopPropagation(), r({
+        e.preventDefault(), e.stopPropagation(), s({
           clientX: e.clientX,
           clientY: e.clientY,
           worldX: 0,
@@ -850,112 +868,114 @@ function Nn(o) {
       openStickyNoteContextMenu: Ut,
       openAnnotationContextMenu: Pt,
       openBackgroundLayerContextMenu: qt,
-      selectWidget: j,
-      selectObject: ye,
-      selectStickyNote: wt,
-      selectAnnotation: _e,
-      selectBackgroundLayer: me,
-      clearSelection: mt,
+      selectWidget: F,
+      selectObject: _e,
+      selectStickyNote: ht,
+      selectAnnotation: me,
+      selectBackgroundLayer: we,
+      clearSelection: wt,
       claimVisualFrontOwner: O,
-      commitFront: S,
-      commitMove: te,
-      commitResize: ee,
-      commitStickyFront: D,
-      commitStickyMove: ne,
-      commitStickyResize: ie,
-      commitAnnotationMove: oe,
-      commitAnnotationResize: ce,
-      commitBackgroundMove: ae,
+      commitFront: W,
+      commitMove: ee,
+      commitResize: ne,
+      commitStickyFront: j,
+      commitStickyMove: ie,
+      commitStickyResize: oe,
+      commitAnnotationMove: ce,
+      commitAnnotationResize: de,
+      commitBackgroundMove: se,
       commitBackgroundResize: re,
-      commitViewport: J,
-      cancelViewportNavigation: se
+      commitViewport: Q,
+      cancelViewportNavigation: le
     },
     hud: {
-      zoomIn: () => _t("in"),
-      zoomOut: () => _t("out")
+      zoomIn: () => mt("in"),
+      zoomOut: () => mt("out")
     },
     lock: {
-      toggle: ue
+      toggle: ge
     },
     filter: {
-      toggle: ge,
-      solo: ke,
-      showAll: fe
+      toggle: ke,
+      solo: fe,
+      showAll: ye
     },
     navigation: {
       handleArrowNavigation: (e) => {
-        const t = X(), n = [
-          ...m(),
-          ...x().map((c) => dn(c))
-        ].sort(Ct), i = ze(
+        if (E().workLayerLocked) return;
+        const t = z(), n = [
+          ...w(),
+          ...S().map((c) => an(c))
+        ].sort(Nt), i = Ye(
           n,
           t?.kind === "widget" || t?.kind === "sticky_note" ? t.id : null,
           e,
           Object.fromEntries(
             n.map((c) => [
-              Dt(c) ? c.type : "sticky_note",
-              Dt(c) ? B()[c.type] !== !1 : B()[De] !== !1
+              jt(c) ? c.type : "sticky_note",
+              jt(c) ? X()[c.type] !== !1 : X()[je] !== !1
             ])
           )
         );
-        i && (m().some((c) => c.id === i.id) ? T(i) : wt(i.id));
+        i && (w().some((c) => c.id === i.id) ? T(i) : ht(i.id));
       },
-      centerOnWidget: Q,
+      centerOnWidget: tt,
       focusWidget: T,
-      fitWidget: (e) => (j(e.id), S(e.id), Se(e), e),
-      overviewWidget: (e) => (j(e.id), S(e.id), We(e), e)
+      fitWidget: (e) => (F(e.id), W(e.id), We(e), e),
+      overviewWidget: (e) => (F(e.id), W(e.id), Oe(e), e)
     },
     selection: {
-      clear: mt
+      clear: wt
     },
     widgetActions: {
       deleteSelected: () => {
-        const e = X();
-        e && (e.kind === "widget" && K(e.id), e.kind === "sticky_note" && q(e.id), e.kind === "annotation" && Z(e.id), e.kind === "background_layer" && G(e.id));
+        const e = z();
+        !e || (e.kind === "widget" || e.kind === "sticky_note") === E().workLayerLocked || (e.kind === "widget" && v(e.id), e.kind === "sticky_note" && Z(e.id), e.kind === "annotation" && G(e.id), e.kind === "background_layer" && $(e.id));
       },
-      deleteWidget: K,
-      deleteStickyNote: q,
-      deleteAnnotation: Z,
-      deleteBackgroundLayer: G,
+      deleteWidget: v,
+      deleteStickyNote: Z,
+      deleteAnnotation: G,
+      deleteBackgroundLayer: $,
       addWidget: Qt,
-      addWidgetAtWorldTopLeft: ut,
-      addWidgetAtWorldCenter: V,
-      addStickyNoteAtCursor: v,
-      addTextAnnotationAtCursor: U,
-      duplicateTextAnnotationFrom: gt,
-      addBackgroundLayerAtCursor: P,
-      duplicateBackgroundLayerFrom: kt,
-      createActiveToolAt: be,
+      addWidgetAtWorldTopLeft: gt,
+      addWidgetAtWorldCenter: K,
+      addStickyNoteAtCursor: U,
+      addTextAnnotationAtCursor: P,
+      duplicateStickyNoteFrom: te,
+      duplicateTextAnnotationFrom: kt,
+      addBackgroundLayerAtCursor: q,
+      duplicateBackgroundLayerFrom: ft,
+      createActiveToolAt: xe,
       ensureWidget: (e, t) => {
         const n = I(e);
         if (n)
           return T(n, { centerViewport: t?.centerViewport ?? !0 });
-        const i = xe(), c = V(
+        const i = Se(), c = K(
           e,
           t?.worldX ?? i.worldX,
           t?.worldY ?? i.worldY
         );
-        return (t?.centerViewport ?? !0) && c && Q(c), c;
+        return (t?.centerViewport ?? !0) && c && tt(c), c;
       },
-      updateStickyNote: ft,
-      updateTextAnnotation: de,
-      updateBackgroundLayer: yt
+      updateStickyNote: yt,
+      updateTextAnnotation: ae,
+      updateBackgroundLayer: _t
     },
     queries: {
       findWidgetByType: I,
       findWidgetById: Zt,
-      findStickyNoteById: Y,
+      findStickyNoteById: H,
       findAnnotationById: rt,
-      findBackgroundLayerById: st
+      findBackgroundLayerById: lt
     },
     appearance: {
       setTheme: (e) => {
-        s().theme !== e && o.setState((t) => ({ ...t, theme: e }));
+        r().theme !== e && o.setState((t) => ({ ...t, theme: e }));
       }
     },
     modes: {
-      setMode: we,
-      setActiveTool: he
+      setMode: he,
+      setActiveTool: be
     },
     handleCloseRequest: () => {
       if (d()) {
@@ -967,5 +987,5 @@ function Nn(o) {
   };
 }
 export {
-  Nn as useWorkbenchModel
+  An as useWorkbenchModel
 };