@floegence/floe-webapp-core 0.36.42 → 0.36.43

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,359 +1,896 @@
-import { createSignal as A, createMemo as r, onCleanup as Ct } from "solid-js";
-import { ArrowUp as bt, Copy as kt, Trash as Ft } from "../icons/index.js";
-import { getTopZIndex as It, createContextMenuPosition as Mt, createWorkbenchId as vt, createWorkbenchViewportCenteredOnWidget as K, findNearestWidget as Xt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Yt, estimateContextMenuHeight as yt, clampScale as Ot, WORKBENCH_CANVAS_ZOOM_STEP as L, WORKBENCH_MIN_SCALE as _t, createWorkbenchViewportFitForWidget as zt } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetDefinitions as Tt, getWidgetEntry as j, createWorkbenchFilterState as Vt } from "./widgets/widgetRegistry.js";
-function Kt(c) {
-  const [x, S] = A(null), [U, N] = A(null), [D, G] = A({ width: 0, height: 0 });
-  let d = null, p = null;
-  const l = c.state, m = r(() => l().widgets), h = r(() => l().viewport), J = r(() => l().locked), H = r(() => l().filters), F = r(() => l().selectedWidgetId), Q = r(() => l().theme), I = r(() => It(m())), tt = r(() => `${Math.round(h().scale * 100)}%`), et = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, w = r(
-    () => Tt(et())
-  ), M = (t, e) => {
-    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, s = D();
-    return s.width === n && s.height === i ? s : (G(o), o);
-  }, R = () => {
-    p?.disconnect(), p = null;
-  }, a = () => d ? M(d.clientWidth, d.clientHeight) : M(0, 0), nt = (t) => {
-    if (d === (t ?? null)) {
-      a();
+import { createSignal as tt, createMemo as u, onCleanup as we } from "solid-js";
+import { ArrowUp as ht, Copy as j, Trash as L, MessageSquare as xt, Region as bt, TextTool as me } from "../icons/index.js";
+import { WORKBENCH_STICKY_FILTER_ID as he } from "./types.js";
+import { WORKBENCH_DEFAULT_STICKY_NOTE_COLOR as xe, WORKBENCH_DEFAULT_TEXT_COLOR as be, WORKBENCH_DEFAULT_TEXT_FONT as St, WORKBENCH_DEFAULT_BACKGROUND_MATERIAL as Se, WORKBENCH_DEFAULT_REGION_FILL as We, WORKBENCH_STICKY_NOTE_COLORS as Oe, WORKBENCH_BACKGROUND_MATERIALS as Te } from "./workbenchOptions.js";
+import { createContextMenuPosition as Ce, createWorkbenchId as x, createWorkbenchViewportCenteredOnWidget as Wt, findNearestWidget as Ne, sanitizeFilters as Ae, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Ie, estimateContextMenuHeight as De, clampScale as je, WORKBENCH_CANVAS_ZOOM_STEP as Ot, WORKBENCH_MIN_SCALE as Le, createWorkbenchViewportFitForWidget as ze } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as Fe, getWidgetEntry as Tt } from "./widgets/widgetRegistry.js";
+function At(o, c) {
+  const r = o.findIndex((l) => l === c);
+  return o[(r + 1) % o.length] ?? o[0];
+}
+function Ct(o, c) {
+  return Number.isFinite(o) && o > 0 ? o : c;
+}
+function Me(o) {
+  return At(Oe, o);
+}
+function Re(o) {
+  return At(Te, o);
+}
+function Nt(o) {
+  return !("kind" in o);
+}
+function Be(o, c) {
+  return o.z_index !== c.z_index ? o.z_index - c.z_index : o.created_at_unix_ms !== c.created_at_unix_ms ? o.created_at_unix_ms - c.created_at_unix_ms : o.id.localeCompare(c.id);
+}
+function et(o) {
+  return o.reduce((c, r) => Math.max(c, r.z_index), 1);
+}
+function Xe(o, c) {
+  return et([...o, ...c]);
+}
+function Ee(o) {
+  return {
+    id: o.id,
+    type: "sticky_note",
+    title: "Sticky note",
+    x: o.x,
+    y: o.y,
+    width: o.width,
+    height: o.height,
+    z_index: o.z_index,
+    created_at_unix_ms: o.created_at_unix_ms
+  };
+}
+function Ye(o, c, r) {
+  const l = Date.now();
+  return {
+    id: x(),
+    kind: "sticky_note",
+    body: "Capture the thought, decision, or next step here.",
+    color: xe,
+    x: o - 130,
+    y: c - 92,
+    width: 260,
+    height: 184,
+    z_index: r,
+    created_at_unix_ms: l,
+    updated_at_unix_ms: l
+  };
+}
+function pe(o, c, r, l) {
+  const y = Date.now(), b = Ct(l?.width, 360), T = Ct(l?.height, 96);
+  return {
+    id: x(),
+    kind: "text",
+    text: "Label this area",
+    font_family: l?.font_family ?? St.fontFamily,
+    font_size: l?.font_size ?? 30,
+    font_weight: l?.font_weight ?? St.fontWeight,
+    color: l?.color ?? be,
+    align: l?.align ?? "left",
+    x: o - b / 2,
+    y: c - T / 2,
+    width: b,
+    height: T,
+    z_index: r,
+    created_at_unix_ms: y,
+    updated_at_unix_ms: y
+  };
+}
+function He(o) {
+  const c = Date.now();
+  return {
+    ...o,
+    id: x(),
+    x: o.x + 28,
+    y: o.y + 28,
+    z_index: o.z_index + 1,
+    created_at_unix_ms: c,
+    updated_at_unix_ms: c
+  };
+}
+function Ke(o, c, r) {
+  const l = Date.now();
+  return {
+    id: x(),
+    name: "Focus area",
+    fill: We,
+    opacity: 0.72,
+    material: Se,
+    x: o - 280,
+    y: c - 180,
+    width: 560,
+    height: 360,
+    z_index: r,
+    created_at_unix_ms: l,
+    updated_at_unix_ms: l
+  };
+}
+function Ve(o) {
+  const c = Date.now();
+  return {
+    ...o,
+    id: x(),
+    name: o.name,
+    x: o.x + 36,
+    y: o.y + 36,
+    z_index: o.z_index + 1,
+    created_at_unix_ms: c,
+    updated_at_unix_ms: c
+  };
+}
+function dn(o) {
+  const [c, r] = tt(null), [l, y] = tt(null), [b, T] = tt({ width: 0, height: 0 });
+  let f = null, C = null;
+  const a = o.state, w = u(() => a().widgets), z = u(() => a().stickyNotes ?? []), nt = u(() => a().annotations ?? []), it = u(() => a().backgroundLayers ?? []), m = u(() => a().viewport), It = u(() => a().locked), F = u(() => a().filters), Dt = u(() => a().selectedWidgetId), M = u(() => a().selectedObject ?? (a().selectedWidgetId ? { kind: "widget", id: a().selectedWidgetId } : null)), R = u(() => a().mode ?? "work"), ot = u(() => a().activeTool ?? "select"), jt = u(() => a().theme), S = u(() => Xe(w(), z())), Lt = u(() => `${Math.round(m().scale * 100)}%`), zt = () => typeof o.widgetDefinitions == "function" ? o.widgetDefinitions() : o.widgetDefinitions, Ft = () => typeof o.textAnnotationDefaults == "function" ? o.textAnnotationDefaults() : o.textAnnotationDefaults, W = u(
+    () => Fe(zt())
+  ), B = (e, t) => {
+    const n = Number.isFinite(e) && e > 0 ? e : 0, i = Number.isFinite(t) && t > 0 ? t : 0, d = { width: n, height: i }, k = b();
+    return k.width === n && k.height === i ? k : (T(d), d);
+  }, dt = () => {
+    C?.disconnect(), C = null;
+  }, _ = () => f ? B(f.clientWidth, f.clientHeight) : B(0, 0), Mt = (e) => {
+    if (f === (e ?? null)) {
+      _();
       return;
     }
-    R(), d = t ?? null, a(), !(!d || typeof ResizeObserver > "u") && (p = new ResizeObserver((e) => {
-      const n = e[0];
-      M(
-        n?.contentRect.width ?? d?.clientWidth ?? 0,
-        n?.contentRect.height ?? d?.clientHeight ?? 0
+    dt(), f = e ?? null, _(), !(!f || typeof ResizeObserver > "u") && (C = new ResizeObserver((t) => {
+      const n = t[0];
+      B(
+        n?.contentRect.width ?? f?.clientWidth ?? 0,
+        n?.contentRect.height ?? f?.clientHeight ?? 0
       );
-    }), p.observe(d));
+    }), C.observe(f));
   };
-  Ct(() => {
-    R(), d = null;
+  we(() => {
+    dt(), f = null;
   });
-  const it = (t) => {
-    S({
-      clientX: t.clientX,
-      clientY: t.clientY,
-      worldX: t.worldX,
-      worldY: t.worldY
+  const Rt = (e) => {
+    r({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      worldX: e.worldX,
+      worldY: e.worldY,
+      target: { kind: "canvas", mode: R() }
     });
-  }, ot = (t, e) => {
-    f(e.id), S({
-      clientX: t.clientX,
-      clientY: t.clientY,
-      worldX: e.x,
-      worldY: e.y,
-      widgetId: e.id
+  }, Bt = (e, t) => {
+    h(t.id), r({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      worldX: t.x,
+      worldY: t.y,
+      target: { kind: "widget", id: t.id },
+      widgetId: t.id
     });
-  }, g = () => S(null), ct = (t) => l().widgets.find((e) => e.id === t) ?? null, C = (t) => l().widgets.find((e) => e.type === t) ?? null, st = (t, e) => {
-    const n = t.singleton ? C(t.type) : null;
+  }, Xt = (e, t) => {
+    A(t.id), r({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      worldX: t.x,
+      worldY: t.y,
+      target: { kind: "sticky_note", id: t.id },
+      widgetId: t.id
+    });
+  }, Et = (e, t) => {
+    r({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      worldX: t.x,
+      worldY: t.y,
+      target: { kind: "annotation", id: t.id }
+    });
+  }, Yt = (e, t) => {
+    r({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      worldX: t.x,
+      worldY: t.y,
+      target: { kind: "background_layer", id: t.id }
+    });
+  }, s = () => r(null), pt = (e) => a().widgets.find((t) => t.id === e) ?? null, N = (e) => a().widgets.find((t) => t.type === e) ?? null, X = (e) => a().stickyNotes?.find((t) => t.id === e) ?? null, ct = (e) => a().annotations?.find((t) => t.id === e) ?? null, at = (e) => a().backgroundLayers?.find((t) => t.id === e) ?? null, Ht = (e) => e.target ? e.target : e.widgetId ? X(e.widgetId) ? { kind: "sticky_note", id: e.widgetId } : { kind: "widget", id: e.widgetId } : { kind: "canvas", mode: R() }, Kt = (e, t) => {
+    const n = e.singleton ? N(e.type) : null;
     return n ? {
-      id: `goto-${t.type}`,
+      id: `goto-${e.type}`,
       kind: "action",
       verb: "go_to",
-      widgetType: t.type,
-      label: `Go to ${t.label}`,
-      icon: t.icon,
+      widgetType: e.type,
+      label: `Go to ${e.label}`,
+      icon: e.icon,
       existingWidgetId: n.id,
       onSelect: () => {
-        W(n, { centerViewport: !0 }), g();
+        O(n, { centerViewport: !0 }), s();
       }
     } : {
-      id: `add-${t.type}`,
+      id: `add-${e.type}`,
       kind: "action",
       verb: "add",
-      widgetType: t.type,
-      label: `Add ${t.label}`,
-      icon: t.icon,
+      widgetType: e.type,
+      label: `Add ${e.label}`,
+      icon: e.icon,
       onSelect: () => {
-        X(t.type, e.worldX, e.worldY), g();
+        Y(e.type, t.worldX, t.worldY), s();
       }
     };
-  }, E = r(() => {
-    const t = x();
-    if (!t) return [];
-    if (t.widgetId) {
-      const e = m().find((i) => i.id === t.widgetId), n = [];
-      return e && (n.push({
+  }, st = u(() => {
+    const e = c();
+    if (!e) return [];
+    const t = Ht(e);
+    if (t.kind === "widget") {
+      const n = w().find((d) => d.id === t.id), i = [];
+      return n && (i.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: bt,
+        icon: ht,
         onSelect: () => {
-          f(e.id), g();
+          h(n.id), s();
         }
-      }), n.push({
+      }), i.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: kt,
+        icon: j,
+        onSelect: () => {
+          rt(n.type, n.x + 32, n.y + 32), s();
+        }
+      })), i.push({ id: "separator-delete", kind: "separator" }), i.push({
+        id: "delete",
+        kind: "action",
+        label: "Delete",
+        icon: L,
+        destructive: !0,
         onSelect: () => {
-          B(e.type, e.x + 32, e.y + 32), g();
+          p(t.id), s();
         }
-      })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
+      }), i;
+    }
+    if (t.kind === "sticky_note") {
+      const n = X(t.id), i = [];
+      return n && (i.push({
+        id: "bring-to-front",
+        kind: "action",
+        label: "Bring to Front",
+        icon: ht,
+        onSelect: () => {
+          A(n.id), s();
+        }
+      }), i.push({
+        id: "copy-content",
+        kind: "action",
+        label: "Copy Content",
+        icon: j,
+        onSelect: () => {
+          typeof navigator < "u" && navigator.clipboard?.writeText(n.body), s();
+        }
+      }), i.push({
+        id: "change-color",
+        kind: "action",
+        label: "Change Color",
+        icon: xt,
+        onSelect: () => {
+          gt(n.id, { color: Me(n.color) }), s();
+        }
+      })), i.push({ id: "separator-delete", kind: "separator" }), i.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: Ft,
+        icon: L,
+        destructive: !0,
+        onSelect: () => {
+          U(t.id), s();
+        }
+      }), i;
+    }
+    if (t.kind === "annotation") {
+      const n = ct(t.id), i = [];
+      return n?.kind === "text" && i.push({
+        id: "duplicate",
+        kind: "action",
+        label: "Duplicate Text",
+        icon: j,
+        onSelect: () => {
+          lt(n), s();
+        }
+      }), i.push({ id: "separator-delete", kind: "separator" }), i.push({
+        id: "delete",
+        kind: "action",
+        label: "Delete Text",
+        icon: L,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && Y(t.widgetId), g();
+          q(t.id), s();
         }
-      }), n;
+      }), i;
     }
-    return w().map((e) => st(e, t));
-  }), rt = r(() => {
-    const t = x();
-    if (!t) return;
-    const e = E(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return Mt({
-      clientX: t.clientX,
-      clientY: t.clientY,
-      menuWidth: Yt,
-      menuHeight: yt(n, i)
+    if (t.kind === "background_layer") {
+      const n = at(t.id), i = [];
+      return n && (i.push({
+        id: "duplicate",
+        kind: "action",
+        label: "Duplicate Region",
+        icon: j,
+        onSelect: () => {
+          ut(n), s();
+        }
+      }), i.push({
+        id: "change-material",
+        kind: "action",
+        label: "Change Material",
+        icon: bt,
+        onSelect: () => {
+          kt(n.id, { material: Re(n.material) }), s();
+        }
+      })), i.push({ id: "separator-delete", kind: "separator" }), i.push({
+        id: "delete",
+        kind: "action",
+        label: "Delete Region",
+        icon: L,
+        destructive: !0,
+        onSelect: () => {
+          P(t.id), s();
+        }
+      }), i;
+    }
+    return t.mode === "background" ? [
+      {
+        id: "create-background-region",
+        kind: "action",
+        label: "Add Region",
+        icon: bt,
+        onSelect: () => {
+          V(e.worldX, e.worldY), s();
+        }
+      },
+      {
+        id: "create-text",
+        kind: "action",
+        label: "Add Text",
+        icon: me,
+        onSelect: () => {
+          K(e.worldX, e.worldY), s();
+        }
+      }
+    ] : [
+      {
+        id: "create-sticky-note",
+        kind: "action",
+        label: "Add Sticky",
+        icon: xt,
+        onSelect: () => {
+          H(e.worldX, e.worldY), s();
+        }
+      },
+      ...W().map((n) => Kt(n, e))
+    ];
+  }), Vt = u(() => {
+    const e = c();
+    if (!e) return;
+    const t = st(), n = t.filter((d) => d.kind === "action").length, i = t.filter((d) => d.kind === "separator").length;
+    return Ce({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      menuWidth: Ie,
+      menuHeight: De(n, i)
     });
-  }), v = (t, e, n) => {
-    const i = j(t, w()), o = i.singleton ? C(t) : null;
-    if (o)
-      return W(o, { centerViewport: !0 });
-    const s = i.defaultSize, u = {
-      id: vt(),
-      type: t,
+  }), E = (e, t, n) => {
+    const i = Tt(e, W()), d = i.singleton ? N(e) : null;
+    if (d)
+      return O(d, { centerViewport: !0 });
+    const k = i.defaultSize, g = {
+      id: x(),
+      type: e,
       title: i.defaultTitle,
-      x: e,
+      x: t,
       y: n,
-      width: s.width,
-      height: s.height,
-      z_index: I() + 1,
+      width: k.width,
+      height: k.height,
+      z_index: S() + 1,
       created_at_unix_ms: Date.now()
     };
-    return c.setState((k) => ({
-      ...k,
-      widgets: [...k.widgets, u],
-      selectedWidgetId: u.id
-    })), u;
-  }, X = (t, e, n) => {
-    const i = j(t, w()).defaultSize;
-    return v(t, e - i.width / 2, n - i.height / 2);
-  }, B = (t, e, n) => v(t, e, n), Y = (t) => {
-    c.setState((e) => ({
-      ...e,
-      widgets: e.widgets.filter((n) => n.id !== t),
-      selectedWidgetId: e.selectedWidgetId === t ? null : e.selectedWidgetId
+    return o.setState((D) => ({
+      ...D,
+      widgets: [...D.widgets, g],
+      selectedWidgetId: g.id,
+      selectedObject: { kind: "widget", id: g.id },
+      mode: "work",
+      activeTool: "select"
+    })), g;
+  }, Y = (e, t, n) => {
+    const i = Tt(e, W()).defaultSize;
+    return E(e, t - i.width / 2, n - i.height / 2);
+  }, rt = (e, t, n) => E(e, t, n), p = (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
     }));
-  }, dt = (t) => {
-    N(t);
-  }, f = (t) => {
-    N(t);
-    const e = I(), n = m().find((i) => i.id === t);
-    n && n.z_index < e && c.setState((i) => ({
+  }, H = (e, t) => {
+    const n = Ye(e, t, S() + 1);
+    return o.setState((i) => ({
+      ...i,
+      stickyNotes: [...i.stickyNotes ?? [], n],
+      selectedWidgetId: null,
+      selectedObject: { kind: "sticky_note", id: n.id },
+      mode: "work",
+      activeTool: "select"
+    })), n;
+  }, K = (e, t) => {
+    const n = pe(
+      e,
+      t,
+      et(nt()) + 1,
+      Ft()
+    );
+    return o.setState((i) => ({
+      ...i,
+      annotations: [...i.annotations ?? [], n],
+      selectedWidgetId: null,
+      selectedObject: { kind: "annotation", id: n.id },
+      mode: "background",
+      activeTool: "select"
+    })), n;
+  }, lt = (e) => {
+    const t = He(e);
+    return o.setState((n) => ({
+      ...n,
+      annotations: [...n.annotations ?? [], t],
+      selectedWidgetId: null,
+      selectedObject: { kind: "annotation", id: t.id },
+      mode: "background",
+      activeTool: "select"
+    })), t;
+  }, V = (e, t) => {
+    const n = Ke(e, t, et(it()) + 1);
+    return o.setState((i) => ({
+      ...i,
+      backgroundLayers: [...i.backgroundLayers ?? [], n],
+      selectedWidgetId: null,
+      selectedObject: { kind: "background_layer", id: n.id },
+      mode: "background",
+      activeTool: "select"
+    })), n;
+  }, ut = (e) => {
+    const t = Ve(e);
+    return o.setState((n) => ({
+      ...n,
+      backgroundLayers: [...n.backgroundLayers ?? [], t],
+      selectedWidgetId: null,
+      selectedObject: { kind: "background_layer", id: t.id },
+      mode: "background",
+      activeTool: "select"
+    })), t;
+  }, Ut = (e) => {
+    y(e);
+  }, h = (e) => {
+    y(e);
+    const t = S(), n = w().find((i) => i.id === e);
+    n && n.z_index < t && o.setState((i) => ({
       ...i,
       widgets: i.widgets.map(
-        (o) => o.id === t ? { ...o, z_index: e + 1 } : o
+        (d) => d.id === e ? { ...d, z_index: t + 1 } : d
+      )
+    }));
+  }, A = (e) => {
+    y(e);
+    const t = S();
+    o.setState((n) => ({
+      ...n,
+      stickyNotes: (n.stickyNotes ?? []).map(
+        (i) => i.id === e && i.z_index < t ? { ...i, z_index: t + 1, updated_at_unix_ms: Date.now() } : i
       )
     }));
-  }, lt = (t, e) => {
-    c.setState((n) => ({
+  }, qt = (e, t) => {
+    o.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
-        (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
+        (i) => i.id === e ? { ...i, x: t.x, y: t.y } : i
       )
     }));
-  }, at = (t, e) => {
-    c.setState((n) => ({
+  }, Pt = (e, t) => {
+    o.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
-        (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
+        (i) => i.id === e ? { ...i, width: t.width, height: t.height } : i
       )
     }));
-  }, y = (t) => {
-    c.setState((e) => ({ ...e, viewport: t }));
-  }, q = (t) => {
-    const e = h(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Ot(
-      t === "in" ? e.scale * L : e.scale / L
-    ), u = {
-      x: n.width / 2 - i * s,
-      y: n.height / 2 - o * s,
-      scale: s
+  }, $t = (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
+      )
+    }));
+  }, Gt = (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
+      )
+    }));
+  }, gt = (e, t) => {
+    o.setState((n) => ({
+      ...n,
+      stickyNotes: (n.stickyNotes ?? []).map(
+        (i) => i.id === e ? {
+          ...i,
+          ...typeof t.body == "string" ? { body: t.body } : {},
+          ...t.color ? { color: t.color } : {},
+          updated_at_unix_ms: Date.now()
+        } : i
+      )
+    }));
+  }, U = (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
+    }));
+  }, Zt = (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
+      )
+    }));
+  }, vt = (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
+      )
+    }));
+  }, Jt = (e, t) => {
+    o.setState((n) => ({
+      ...n,
+      annotations: (n.annotations ?? []).map(
+        (i) => i.id === e && i.kind === "text" ? {
+          ...i,
+          ...typeof t.text == "string" ? { text: t.text } : {},
+          ...typeof t.font_family == "string" ? { font_family: t.font_family } : {},
+          ...typeof t.font_size == "number" ? { font_size: t.font_size } : {},
+          ...typeof t.font_weight == "number" ? { font_weight: t.font_weight } : {},
+          ...typeof t.color == "string" ? { color: t.color } : {},
+          ...t.align ? { align: t.align } : {},
+          updated_at_unix_ms: Date.now()
+        } : i
+      )
+    }));
+  }, q = (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
+    }));
+  }, Qt = (e, t) => {
+    o.setState((n) => ({
+      ...n,
+      backgroundLayers: (n.backgroundLayers ?? []).map(
+        (i) => i.id === e ? { ...i, x: t.x, y: t.y, updated_at_unix_ms: Date.now() } : i
+      )
+    }));
+  }, te = (e, t) => {
+    o.setState((n) => ({
+      ...n,
+      backgroundLayers: (n.backgroundLayers ?? []).map(
+        (i) => i.id === e ? { ...i, width: t.width, height: t.height, updated_at_unix_ms: Date.now() } : i
+      )
+    }));
+  }, kt = (e, t) => {
+    o.setState((n) => ({
+      ...n,
+      backgroundLayers: (n.backgroundLayers ?? []).map(
+        (i) => i.id === e ? {
+          ...i,
+          ...typeof t.fill == "string" ? { fill: t.fill } : {},
+          ...typeof t.opacity == "number" ? { opacity: t.opacity } : {},
+          ...typeof t.material == "string" ? { material: t.material } : {},
+          ...typeof t.name == "string" ? { name: t.name } : {},
+          updated_at_unix_ms: Date.now()
+        } : i
+      )
+    }));
+  }, P = (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
+    }));
+  }, $ = (e) => {
+    o.setState((t) => ({ ...t, viewport: e }));
+  }, ft = (e) => {
+    const t = m(), n = _(), i = (n.width / 2 - t.x) / t.scale, d = (n.height / 2 - t.y) / t.scale, k = je(
+      e === "in" ? t.scale * Ot : t.scale / Ot
+    ), g = {
+      x: n.width / 2 - i * k,
+      y: n.height / 2 - d * k,
+      scale: k
     };
-    y(u);
-  }, gt = () => {
-    c.setState((t) => ({ ...t, locked: !t.locked }));
-  }, ut = (t) => {
-    c.setState((e) => ({
-      ...e,
-      filters: { ...e.filters, [t]: !e.filters[t] }
+    $(g);
+  }, ee = () => {
+    o.setState((e) => ({ ...e, locked: !e.locked }));
+  }, ne = (e) => {
+    o.setState((t) => ({
+      ...t,
+      filters: { ...t.filters, [e]: !t.filters[e] }
     }));
-  }, ht = (t) => {
-    c.setState((e) => {
-      const n = { ...e.filters };
-      for (const i of Object.keys(n))
-        n[i] = i === t;
-      return { ...e, filters: n };
+  }, ie = (e, t) => {
+    o.setState((n) => {
+      const i = { ...n.filters }, d = [...new Set(t.map((g) => String(g)).filter(Boolean))], k = d.length > 1 && d.every(
+        (g) => i[g] !== !1 == (g === e)
+      );
+      for (const g of d)
+        i[g] = k ? !0 : g === e;
+      return { ...n, filters: i };
     });
-  }, ft = () => {
-    const t = Vt(w());
-    c.setState((e) => ({
-      ...e,
-      filters: t
+  }, oe = () => {
+    const e = W();
+    o.setState((t) => ({
+      ...t,
+      filters: Ae(void 0, e)
     }));
-  }, b = (t) => {
-    c.setState((e) => ({ ...e, selectedWidgetId: t }));
-  }, P = () => {
-    c.setState(
-      (t) => t.selectedWidgetId === null ? t : { ...t, selectedWidgetId: null }
+  }, I = (e) => {
+    o.setState((t) => ({
+      ...t,
+      selectedWidgetId: e,
+      selectedObject: { kind: "widget", id: e },
+      mode: t.mode === "background" ? "work" : t.mode,
+      activeTool: "select"
+    }));
+  }, _t = () => {
+    o.setState(
+      (e) => e.selectedWidgetId === null && !e.selectedObject ? e : { ...e, selectedWidgetId: null, selectedObject: null }
     );
-  }, mt = () => {
-    const t = a(), e = h();
+  }, de = (e) => {
+    o.setState((t) => ({
+      ...t,
+      selectedObject: e,
+      selectedWidgetId: e?.kind === "widget" ? e.id : null,
+      activeTool: "select"
+    }));
+  }, yt = (e) => {
+    o.setState((t) => ({
+      ...t,
+      selectedWidgetId: null,
+      selectedObject: { kind: "sticky_note", id: e },
+      mode: "work",
+      activeTool: "select"
+    })), A(e);
+  }, ce = (e) => {
+    o.setState((t) => ({
+      ...t,
+      selectedWidgetId: null,
+      selectedObject: { kind: "annotation", id: e },
+      mode: "background",
+      activeTool: "select"
+    }));
+  }, ae = (e) => {
+    o.setState((t) => ({
+      ...t,
+      selectedWidgetId: null,
+      selectedObject: { kind: "background_layer", id: e },
+      mode: "background",
+      activeTool: "select"
+    }));
+  }, se = (e) => {
+    const t = e === "annotation" ? "background" : 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
+    }));
+  }, re = (e) => {
+    o.setState((t) => ({
+      ...t,
+      activeTool: e,
+      mode: e === "text" || e === "background-region" ? "background" : e === "sticky-note" ? "work" : t.mode ?? "work"
+    }));
+  }, le = (e, t) => {
+    const n = ot();
+    return n === "sticky-note" ? H(e, t) : n === "text" ? K(e, t) : n === "background-region" ? V(e, t) : null;
+  }, ue = () => {
+    const e = _(), t = m();
     return {
-      worldX: t.width > 0 ? (t.width / 2 - e.x) / e.scale : 240,
-      worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
+      worldX: e.width > 0 ? (e.width / 2 - t.x) / t.scale : 240,
+      worldY: e.height > 0 ? (e.height / 2 - t.y) / t.scale : 180
     };
   };
-  let O = 0;
-  const wt = () => {
-    O += 1;
-  }, _ = (t) => {
-    const e = h(), n = e.x, i = e.y, o = e.scale, s = performance.now(), u = 360, k = ++O, St = (T) => 1 - Math.pow(1 - T, 3), $ = (T) => {
-      if (k !== O) return;
-      const pt = T - s, Z = Math.min(Math.max(pt / u, 0), 1), V = St(Z);
-      y({
-        x: n + (t.x - n) * V,
-        y: i + (t.y - i) * V,
-        scale: o + (t.scale - o) * V
-      }), Z < 1 && requestAnimationFrame($);
+  let G = 0;
+  const ge = () => {
+    G += 1;
+  }, Z = (e) => {
+    const t = m(), n = t.x, i = t.y, d = t.scale, k = performance.now(), g = 360, D = ++G, _e = (J) => 1 - Math.pow(1 - J, 3), wt = (J) => {
+      if (D !== G) return;
+      const ye = J - k, mt = Math.min(Math.max(ye / g, 0), 1), Q = _e(mt);
+      $({
+        x: n + (e.x - n) * Q,
+        y: i + (e.y - i) * Q,
+        scale: d + (e.scale - d) * Q
+      }), mt < 1 && requestAnimationFrame(wt);
     };
-    requestAnimationFrame($);
-  }, z = (t) => {
-    const e = a();
-    e.width === 0 || e.height === 0 || _(K({
-      widget: t,
-      scale: h().scale,
-      frameWidth: e.width,
-      frameHeight: e.height
+    requestAnimationFrame(wt);
+  }, v = (e) => {
+    const t = _();
+    t.width === 0 || t.height === 0 || Z(Wt({
+      widget: e,
+      scale: m().scale,
+      frameWidth: t.width,
+      frameHeight: t.height
     }));
-  }, Wt = (t) => {
-    const e = a();
-    e.width === 0 || e.height === 0 || _(zt({
-      widget: t,
-      frameWidth: e.width,
-      frameHeight: e.height
+  }, ke = (e) => {
+    const t = _();
+    t.width === 0 || t.height === 0 || Z(ze({
+      widget: e,
+      frameWidth: t.width,
+      frameHeight: t.height
     }));
-  }, xt = (t) => {
-    const e = a();
-    e.width === 0 || e.height === 0 || _(K({
-      widget: t,
-      scale: _t,
-      frameWidth: e.width,
-      frameHeight: e.height
+  }, fe = (e) => {
+    const t = _();
+    t.width === 0 || t.height === 0 || Z(Wt({
+      widget: e,
+      scale: Le,
+      frameWidth: t.width,
+      frameHeight: t.height
     }));
-  }, W = (t, e = {}) => (b(t.id), f(t.id), e.centerViewport !== !1 && z(t), t);
+  }, O = (e, t = {}) => (I(e.id), h(e.id), t.centerViewport !== !1 && v(e), e);
   return {
-    widgets: m,
-    viewport: h,
-    canvasFrameSize: D,
-    locked: J,
-    filters: H,
-    selectedWidgetId: F,
-    theme: Q,
-    topZIndex: I,
-    scaleLabel: tt,
-    optimisticFrontWidgetId: U,
-    widgetDefinitions: w,
-    setCanvasFrameRef: nt,
+    widgets: w,
+    stickyNotes: z,
+    annotations: nt,
+    backgroundLayers: it,
+    viewport: m,
+    canvasFrameSize: b,
+    locked: It,
+    filters: F,
+    selectedWidgetId: Dt,
+    selectedObject: M,
+    mode: R,
+    activeTool: ot,
+    theme: jt,
+    topZIndex: S,
+    scaleLabel: Lt,
+    optimisticFrontWidgetId: l,
+    widgetDefinitions: W,
+    setCanvasFrameRef: Mt,
     contextMenu: {
-      state: x,
-      items: E,
-      position: rt,
-      close: g,
-      retarget: (t) => {
-        t.preventDefault(), t.stopPropagation(), S({
-          clientX: t.clientX,
-          clientY: t.clientY,
+      state: c,
+      items: st,
+      position: Vt,
+      close: s,
+      retarget: (e) => {
+        e.preventDefault(), e.stopPropagation(), r({
+          clientX: e.clientX,
+          clientY: e.clientY,
           worldX: 0,
           worldY: 0
         });
       }
     },
     canvas: {
-      openCanvasContextMenu: it,
-      openWidgetContextMenu: ot,
-      selectWidget: b,
-      clearSelection: P,
-      startOptimisticFront: dt,
-      commitFront: f,
-      commitMove: lt,
-      commitResize: at,
-      commitViewport: y,
-      cancelViewportNavigation: wt
+      openCanvasContextMenu: Rt,
+      openWidgetContextMenu: Bt,
+      openStickyNoteContextMenu: Xt,
+      openAnnotationContextMenu: Et,
+      openBackgroundLayerContextMenu: Yt,
+      selectWidget: I,
+      selectObject: de,
+      selectStickyNote: yt,
+      selectAnnotation: ce,
+      selectBackgroundLayer: ae,
+      clearSelection: _t,
+      startOptimisticFront: Ut,
+      commitFront: h,
+      commitMove: qt,
+      commitResize: Pt,
+      commitStickyFront: A,
+      commitStickyMove: $t,
+      commitStickyResize: Gt,
+      commitAnnotationMove: Zt,
+      commitAnnotationResize: vt,
+      commitBackgroundMove: Qt,
+      commitBackgroundResize: te,
+      commitViewport: $,
+      cancelViewportNavigation: ge
     },
     hud: {
-      zoomIn: () => q("in"),
-      zoomOut: () => q("out")
+      zoomIn: () => ft("in"),
+      zoomOut: () => ft("out")
     },
     lock: {
-      toggle: gt
+      toggle: ee
     },
     filter: {
-      toggle: ut,
-      solo: ht,
-      showAll: ft
+      toggle: ne,
+      solo: ie,
+      showAll: oe
     },
     navigation: {
-      handleArrowNavigation: (t) => {
-        const e = Xt(
-          m(),
-          F(),
-          t,
-          H()
+      handleArrowNavigation: (e) => {
+        const t = M(), n = [
+          ...w(),
+          ...z().map((d) => Ee(d))
+        ].sort(Be), i = Ne(
+          n,
+          t?.kind === "widget" || t?.kind === "sticky_note" ? t.id : null,
+          e,
+          Object.fromEntries(
+            n.map((d) => [
+              Nt(d) ? d.type : "sticky_note",
+              Nt(d) ? F()[d.type] !== !1 : F()[he] !== !1
+            ])
+          )
         );
-        e && W(e);
+        i && (w().some((d) => d.id === i.id) ? O(i) : yt(i.id));
       },
-      centerOnWidget: z,
-      focusWidget: W,
-      fitWidget: (t) => (b(t.id), f(t.id), Wt(t), t),
-      overviewWidget: (t) => (b(t.id), f(t.id), xt(t), t)
+      centerOnWidget: v,
+      focusWidget: O,
+      fitWidget: (e) => (I(e.id), h(e.id), ke(e), e),
+      overviewWidget: (e) => (I(e.id), h(e.id), fe(e), e)
     },
     selection: {
-      clear: P
+      clear: _t
     },
     widgetActions: {
       deleteSelected: () => {
-        const t = F();
-        t && Y(t);
+        const e = M();
+        e && (e.kind === "widget" && p(e.id), e.kind === "sticky_note" && U(e.id), e.kind === "annotation" && q(e.id), e.kind === "background_layer" && P(e.id));
       },
-      deleteWidget: Y,
-      addWidget: v,
-      addWidgetAtCursor: X,
-      addWidgetCentered: B,
-      ensureWidget: (t, e) => {
-        const n = C(t);
+      deleteWidget: p,
+      deleteStickyNote: U,
+      deleteAnnotation: q,
+      deleteBackgroundLayer: P,
+      addWidget: E,
+      addWidgetAtCursor: Y,
+      addWidgetCentered: rt,
+      addStickyNoteAtCursor: H,
+      addTextAnnotationAtCursor: K,
+      duplicateTextAnnotationFrom: lt,
+      addBackgroundLayerAtCursor: V,
+      duplicateBackgroundLayerFrom: ut,
+      createActiveToolAt: le,
+      ensureWidget: (e, t) => {
+        const n = N(e);
         if (n)
-          return W(n, { centerViewport: e?.centerViewport ?? !0 });
-        const i = mt(), o = X(
-          t,
-          e?.worldX ?? i.worldX,
-          e?.worldY ?? i.worldY
+          return O(n, { centerViewport: t?.centerViewport ?? !0 });
+        const i = ue(), d = Y(
+          e,
+          t?.worldX ?? i.worldX,
+          t?.worldY ?? i.worldY
         );
-        return (e?.centerViewport ?? !0) && o && z(o), o;
-      }
+        return (t?.centerViewport ?? !0) && d && v(d), d;
+      },
+      updateStickyNote: gt,
+      updateTextAnnotation: Jt,
+      updateBackgroundLayer: kt
     },
     queries: {
-      findWidgetByType: C,
-      findWidgetById: ct
+      findWidgetByType: N,
+      findWidgetById: pt,
+      findStickyNoteById: X,
+      findAnnotationById: ct,
+      findBackgroundLayerById: at
     },
     appearance: {
-      setTheme: (t) => {
-        l().theme !== t && c.setState((e) => ({ ...e, theme: t }));
+      setTheme: (e) => {
+        a().theme !== e && o.setState((t) => ({ ...t, theme: e }));
       }
     },
+    modes: {
+      setMode: se,
+      setActiveTool: re
+    },
     handleCloseRequest: () => {
-      if (x()) {
-        g();
+      if (c()) {
+        s();
         return;
       }
-      c.onClose();
+      o.onClose();
     }
   };
 }
 export {
-  Kt as useWorkbenchModel
+  dn as useWorkbenchModel
 };