@floegence/floe-webapp-core 0.55.2 → 0.56.2

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -1,23 +1,23 @@
-import { insert as l, memo as u, createComponent as c, effect as W, template as M } from "solid-js/web";
-import { createMemo as a, createSignal as E, For as S } from "solid-js";
+import { insert as l, memo as g, createComponent as u, effect as W, template as h } from "solid-js/web";
+import { createMemo as a, createSignal as M, For as S } from "solid-js";
 import { resolveWorkbenchInteractionAdapter as B } from "./workbenchInteractionAdapter.js";
-import { WORKBENCH_BACKGROUND_REGION_FILTER_ID as x, WORKBENCH_TEXT_FILTER_ID as N, WORKBENCH_STICKY_FILTER_ID as A } from "./types.js";
-import { createWorkbenchRenderLayerMap as _ } from "./workbenchHelpers.js";
+import { WORKBENCH_BACKGROUND_REGION_FILTER_ID as E, WORKBENCH_TEXT_FILTER_ID as x, WORKBENCH_STICKY_FILTER_ID as N } from "./types.js";
+import { createWorkbenchRenderLayerMap as A } from "./workbenchHelpers.js";
 import { getWidgetEntry as D } from "./widgets/widgetRegistry.js";
 import { WorkbenchWidget as V } from "./WorkbenchWidget.js";
-import { WorkbenchPlacementPreview as P } from "./WorkbenchPlacementPreview.js";
-import { WorkbenchBackgroundLayerView as j, WorkbenchAnnotationLayerView as G, WorkbenchLayerControlOverlayView as T, createWorkbenchTextEditorRegistry as U, WorkbenchStickyNote as q } from "./WorkbenchLayerObjects.js";
-var s = /* @__PURE__ */ M("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true></div><div class=workbench-work-layer>");
+import { WorkbenchPlacementPreview as _ } from "./WorkbenchPlacementPreview.js";
+import { createWorkbenchTextEditorRegistry as P, WorkbenchBackgroundLayerView as j, WorkbenchAnnotationLayerView as G, WorkbenchLayerControlOverlayView as T, WorkbenchStickyNote as U } from "./WorkbenchLayerObjects.js";
+var q = /* @__PURE__ */ h("<div class=workbench-canvas__field><div class=workbench-work-layer>");
 function z(e) {
   const d = a((i) => {
     const m = e.widgetById().get(e.widgetId);
     if (m) return m;
     if (i) return i;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the render map.`);
-  }), n = a(() => D(d().type, e.widgetDefinitions));
-  return c(V, {
+  }), r = a(() => D(d().type, e.widgetDefinitions));
+  return u(V, {
     get definition() {
-      return n();
+      return r();
     },
     get widgetId() {
       return e.widgetId;
@@ -63,7 +63,7 @@ function z(e) {
       return e.locked;
     },
     get filtered() {
-      return u(() => !e.workLayerLocked)() && e.filters[d().type] === !1;
+      return g(() => !e.workLayerLocked)() && e.filters[d().type] === !1;
     },
     get interactionAdapter() {
       return e.interactionAdapter;
@@ -115,19 +115,19 @@ function z(e) {
     }
   });
 }
-function $(e) {
-  const d = a((n) => {
+function s(e) {
+  const d = a((r) => {
     const i = e.stickyNoteById().get(e.noteId);
     if (i) return i;
-    if (n) return n;
+    if (r) return r;
     throw new Error(`Workbench sticky note ${e.noteId} is missing from the render map.`);
   });
-  return c(q, {
+  return u(U, {
     get item() {
       return d();
     },
     get selected() {
-      return u(() => e.selectedObject?.kind === "sticky_note")() && e.selectedObject.id === e.noteId;
+      return g(() => e.selectedObject?.kind === "sticky_note")() && e.selectedObject.id === e.noteId;
     },
     get viewportScale() {
       return e.viewportScale;
@@ -147,14 +147,14 @@ function $(e) {
     get visualFront() {
       return e.visualFrontOwnerId === e.noteId;
     },
-    onSelect: (n) => e.onSelectStickyNote?.(n),
-    onContextMenu: (n, i) => e.onStickyNoteContextMenu?.(n, i),
-    onClaimVisualFrontOwner: (n) => e.onClaimStickyVisualFrontOwner?.(n),
-    onCommitFront: (n) => e.onCommitStickyFront?.(n),
-    onCommitMove: (n, i) => e.onCommitStickyMove?.(n, i),
-    onCommitResize: (n, i) => e.onCommitStickyResize?.(n, i),
-    onUpdate: (n, i) => e.onUpdateStickyNote?.(n, i),
-    onDelete: (n) => e.onDeleteStickyNote?.(n),
+    onSelect: (r) => e.onSelectStickyNote?.(r),
+    onContextMenu: (r, i) => e.onStickyNoteContextMenu?.(r, i),
+    onClaimVisualFrontOwner: (r) => e.onClaimStickyVisualFrontOwner?.(r),
+    onCommitFront: (r) => e.onCommitStickyFront?.(r),
+    onCommitMove: (r, i) => e.onCommitStickyMove?.(r, i),
+    onCommitResize: (r, i) => e.onCommitStickyResize?.(r, i),
+    onUpdate: (r, i) => e.onUpdateStickyNote?.(r, i),
+    onDelete: (r) => e.onDeleteStickyNote?.(r),
     get onLayoutInteractionStart() {
       return e.onLayoutInteractionStart;
     },
@@ -163,23 +163,23 @@ function $(e) {
     }
   });
 }
-function te(e) {
-  const d = a(() => B(e.interactionAdapter)), n = a(() => e.widgets.map((o) => o.id)), i = a(() => new Map(e.widgets.map((o) => [o.id, o]))), m = a(() => (e.stickyNotes ?? []).map((o) => o.id)), I = a(() => new Map((e.stickyNotes ?? []).map((o) => [o.id, o]))), f = U(), y = a(() => e.textEditorRegistry ?? f), C = a(() => _([...e.widgets, ...e.stickyNotes ?? []])), R = a(() => e.selectedObject?.kind === "widget" ? e.selectedObject.id : e.selectedWidgetId), b = a(() => e.locked || !!e.workLayerLocked), [O, h] = E(null), w = a(() => e.layerGeometryPreview === void 0 ? O() : e.layerGeometryPreview), k = (o) => {
+function ee(e) {
+  const d = a(() => B(e.interactionAdapter)), r = a(() => e.widgets.map((o) => o.id)), i = a(() => new Map(e.widgets.map((o) => [o.id, o]))), m = a(() => (e.stickyNotes ?? []).map((o) => o.id)), f = a(() => new Map((e.stickyNotes ?? []).map((o) => [o.id, o]))), R = P(), w = a(() => e.textEditorRegistry ?? R), L = a(() => A([...e.widgets, ...e.stickyNotes ?? []])), b = a(() => e.selectedObject?.kind === "widget" ? e.selectedObject.id : e.selectedWidgetId), C = a(() => e.locked || !!e.workLayerLocked), [O, F] = M(null), k = a(() => e.layerGeometryPreview === void 0 ? O() : e.layerGeometryPreview), v = (o) => {
     if (e.onLayerGeometryPreview) {
       e.onLayerGeometryPreview(o);
       return;
     }
-    h(o);
-  }, L = a(() => e.renderFreeformLayers !== !1);
+    F(o);
+  }, I = a(() => e.renderFreeformLayers !== !1);
   return (() => {
-    var o = s(), F = o.firstChild, v = F.nextSibling;
+    var o = q(), y = o.firstChild;
     return l(o, (() => {
-      var g = u(() => !!L());
-      return () => g() ? [c(j, {
+      var c = g(() => !!I());
+      return () => c() ? [u(j, {
         get textEditorRegistry() {
-          return y();
+          return w();
         },
-        onUpdate: (t, r) => e.onUpdateBackgroundLayer?.(t, r),
+        onUpdate: (t, n) => e.onUpdateBackgroundLayer?.(t, n),
         get items() {
           return e.backgroundLayers ?? [];
         },
@@ -187,22 +187,22 @@ function te(e) {
           return e.selectedObject ?? null;
         },
         get editable() {
-          return u(() => !!e.backgroundLayerEditable)() && !e.locked;
+          return g(() => !!e.backgroundLayerEditable)() && !e.locked;
         },
         get filtered() {
-          return e.filters[x] === !1;
+          return e.filters[E] === !1;
         },
         get preview() {
-          return w();
+          return k();
         },
-        onPreviewGeometry: k,
+        onPreviewGeometry: v,
         get viewport() {
           return e.viewport;
         },
         onSelect: (t) => e.onSelectBackgroundLayer?.(t),
-        onContextMenu: (t, r) => e.onBackgroundLayerContextMenu?.(t, r),
-        onCommitMove: (t, r) => e.onCommitBackgroundMove?.(t, r)
-      }), c(G, {
+        onContextMenu: (t, n) => e.onBackgroundLayerContextMenu?.(t, n),
+        onCommitMove: (t, n) => e.onCommitBackgroundMove?.(t, n)
+      }), u(G, {
         get items() {
           return e.annotations ?? [];
         },
@@ -210,32 +210,32 @@ function te(e) {
           return e.selectedObject ?? null;
         },
         get editable() {
-          return u(() => !!e.annotationLayerEditable)() && !e.locked;
+          return g(() => !!e.annotationLayerEditable)() && !e.locked;
         },
         get filtered() {
-          return e.filters[N] === !1;
+          return e.filters[x] === !1;
         },
         get preview() {
-          return w();
+          return k();
         },
-        onPreviewGeometry: k,
+        onPreviewGeometry: v,
         get textEditorRegistry() {
-          return y();
+          return w();
         },
         get viewport() {
           return e.viewport;
         },
         onSelect: (t) => e.onSelectAnnotation?.(t),
-        onContextMenu: (t, r) => e.onAnnotationContextMenu?.(t, r),
-        onCommitMove: (t, r) => e.onCommitAnnotationMove?.(t, r),
-        onUpdate: (t, r) => e.onUpdateTextAnnotation?.(t, r)
+        onContextMenu: (t, n) => e.onAnnotationContextMenu?.(t, n),
+        onCommitMove: (t, n) => e.onCommitAnnotationMove?.(t, n),
+        onUpdate: (t, n) => e.onUpdateTextAnnotation?.(t, n)
       })] : null;
-    })(), v), l(v, c(S, {
+    })(), y), l(y, u(S, {
       get each() {
-        return n();
+        return r();
       },
-      children: (g) => c(z, {
-        widgetId: g,
+      children: (c) => u(z, {
+        widgetId: c,
         get widgetDefinitions() {
           return e.widgetDefinitions;
         },
@@ -243,12 +243,12 @@ function te(e) {
           return e.widgets;
         },
         widgetById: i,
-        renderLayers: C,
+        renderLayers: L,
         get viewport() {
           return e.viewport;
         },
         get selectedWidgetId() {
-          return R();
+          return b();
         },
         get visualFrontOwnerId() {
           return e.visualFrontOwnerId;
@@ -257,7 +257,7 @@ function te(e) {
           return e.viewportScale;
         },
         get locked() {
-          return b();
+          return C();
         },
         get filters() {
           return e.filters;
@@ -311,13 +311,13 @@ function te(e) {
           return e.onLayoutInteractionEnd;
         }
       })
-    }), null), l(v, c(S, {
+    }), null), l(y, u(S, {
       get each() {
         return m();
       },
-      children: (g) => c($, {
-        noteId: g,
-        stickyNoteById: I,
+      children: (c) => u(s, {
+        noteId: c,
+        stickyNoteById: f,
         get selectedObject() {
           return e.selectedObject;
         },
@@ -328,10 +328,10 @@ function te(e) {
           return e.viewportScale;
         },
         get locked() {
-          return e.locked;
+          return C();
         },
         get filtered() {
-          return u(() => !e.workLayerLocked)() && e.filters[A] === !1;
+          return g(() => !e.workLayerLocked)() && e.filters[N] === !1;
         },
         get onSelectStickyNote() {
           return e.onSelectStickyNote;
@@ -363,11 +363,11 @@ function te(e) {
         get onLayoutInteractionEnd() {
           return e.onLayoutInteractionEnd;
         },
-        renderLayers: C
+        renderLayers: L
       })
     }), null), l(o, (() => {
-      var g = u(() => !!L());
-      return () => g() ? c(T, {
+      var c = g(() => !!I());
+      return () => c() ? u(T, {
         get annotations() {
           return e.annotations ?? [];
         },
@@ -378,7 +378,7 @@ function te(e) {
           return e.selectedObject ?? null;
         },
         get editable() {
-          return u(() => !!(e.annotationLayerEditable || e.backgroundLayerEditable))() && !e.locked;
+          return g(() => !!(e.annotationLayerEditable || e.backgroundLayerEditable))() && !e.locked;
         },
         get showRegionOutlines() {
           return !!e.showRegionOutlines;
@@ -387,21 +387,21 @@ function te(e) {
           return e.viewport;
         },
         get preview() {
-          return w();
+          return k();
         },
-        onPreviewGeometry: k,
+        onPreviewGeometry: v,
         get textEditorRegistry() {
-          return y();
+          return w();
         },
-        onCommitAnnotationMove: (t, r) => e.onCommitAnnotationMove?.(t, r),
-        onCommitAnnotationResize: (t, r) => e.onCommitAnnotationResize?.(t, r),
-        onUpdateTextAnnotation: (t, r) => e.onUpdateTextAnnotation?.(t, r),
+        onCommitAnnotationMove: (t, n) => e.onCommitAnnotationMove?.(t, n),
+        onCommitAnnotationResize: (t, n) => e.onCommitAnnotationResize?.(t, n),
+        onUpdateTextAnnotation: (t, n) => e.onUpdateTextAnnotation?.(t, n),
         onDeleteAnnotation: (t) => e.onDeleteAnnotation?.(t),
-        onCommitBackgroundResize: (t, r) => e.onCommitBackgroundResize?.(t, r),
-        onUpdateBackgroundLayer: (t, r) => e.onUpdateBackgroundLayer?.(t, r),
+        onCommitBackgroundResize: (t, n) => e.onCommitBackgroundResize?.(t, n),
+        onUpdateBackgroundLayer: (t, n) => e.onUpdateBackgroundLayer?.(t, n),
         onDeleteBackgroundLayer: (t) => e.onDeleteBackgroundLayer?.(t)
       }) : null;
-    })(), null), l(o, c(P, {
+    })(), null), l(o, u(_, {
       get preview() {
         return e.placementPreview;
       },
@@ -409,9 +409,15 @@ function te(e) {
       get viewport() {
         return e.viewport;
       }
-    }), null), W(() => o.classList.toggle("is-work-layer-muted", !!e.workLayerLocked)), o;
+    }), null), W((c) => {
+      var t = !!e.workLayerLocked, n = !!e.workLayerLocked;
+      return t !== c.e && o.classList.toggle("is-work-layer-muted", c.e = t), n !== c.t && (y.inert = c.t = n), c;
+    }, {
+      e: void 0,
+      t: void 0
+    }), o;
   })();
 }
 export {
-  te as WorkbenchCanvasField
+  ee as WorkbenchCanvasField
 };

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

@@ -0,0 +1,22 @@
+import { type JSX } from 'solid-js';
+import { type WorkbenchCompositionMessageKey } from './workbenchCompositionMessages';
+export declare function CompositionIcon(props: {
+    name: 'emoji' | 'text' | 'left' | 'center' | 'copy' | 'trash';
+}): JSX.Element;
+export declare function CompositionDivider(): JSX.Element;
+/** Object tools keep their anchor when a material or emoji menu opens. */
+export declare function CompositionToolbar(props: {
+    kind: 'sticky' | 'region' | 'text';
+    children?: JSX.Element;
+    actions?: JSX.Element;
+    palette?: JSX.Element;
+    onInsertEmoji?: (emoji: string) => void;
+    materials?: readonly WorkbenchCompositionMessageKey[];
+    material?: WorkbenchCompositionMessageKey;
+    preview?: (material: WorkbenchCompositionMessageKey) => JSX.Element;
+    onMaterial?: (material: WorkbenchCompositionMessageKey) => void;
+    materialLabel?: (material: WorkbenchCompositionMessageKey) => string;
+    more?: (closeMenu: () => void) => JSX.Element;
+    onMoreClose?: () => void;
+    moreOpen?: boolean;
+}): JSX.Element;

package/dist/components/workbench/WorkbenchCompositionToolbar.js

@@ -0,0 +1,261 @@
+import { spread as H, mergeProps as N, insert as s, createComponent as d, use as L, setAttribute as m, effect as p, setStyleProperty as C, memo as F, template as h, delegateEvents as U } from "solid-js/web";
+import { createSignal as A, createUniqueId as z, createEffect as T, onCleanup as I, Show as b, For as R } from "solid-js";
+import { Check as K, ChevronDown as W } from "../icons/index.js";
+import { WORKBENCH_TEXT_EMOJI_OPTIONS as V } from "./workbenchOptions.js";
+import { resolveFloatingBoundary as J } from "../ui/surfaceFloatingBoundary.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "../ui/localInteractionSurface.js";
+import { useWorkbenchCompositionText as G } from "./workbenchCompositionMessages.js";
+import { resolveSurfacePortalHost as Q } from "../ui/dialogSurfaceScope.js";
+var Y = /* @__PURE__ */ h("<svg><circle cx=12 cy=12 r=9></svg>", !1, !0, !1), Z = /* @__PURE__ */ h("<svg><rect x=8 y=8 width=12 height=12 rx=2></svg>", !1, !0, !1), ee = /* @__PURE__ */ h('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.65 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>'), te = /* @__PURE__ */ h("<span class=workbench-composition-divider aria-hidden=true>"), re = /* @__PURE__ */ h('<div class="workbench-menu-options workbench-treatment-options"role=group>'), ne = /* @__PURE__ */ h("<div class=workbench-material-settings>"), oe = /* @__PURE__ */ h("<div class=workbench-emoji-heading>"), ie = /* @__PURE__ */ h('<div class="workbench-menu-options workbench-emoji-options"role=menu>'), ae = /* @__PURE__ */ h("<div class=workbench-composition-menu>"), le = /* @__PURE__ */ h("<div class=workbench-composition-more>"), ce = /* @__PURE__ */ h("<button type=button class=workbench-treatment-trigger><span>"), se = /* @__PURE__ */ h("<button type=button class=workbench-emoji-trigger aria-haspopup=menu>"), ue = /* @__PURE__ */ h("<div><div class=workbench-toolbar-main>"), me = /* @__PURE__ */ h("<button type=button><span class=workbench-treatment-label>"), de = /* @__PURE__ */ h("<button type=button role=menuitem class=workbench-emoji-option>");
+function he(n) {
+  const g = {
+    emoji: "M8 14s1.5 2 4 2 4-2 4-2M8 9h.01M16 9h.01",
+    copy: "M16 8V4H4v12h4",
+    trash: "M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7",
+    text: "M4 5h16M12 5v15M8 20h8M4 5v3m16-3v3",
+    left: "M4 5h16M4 10h11M4 15h16M4 20h11",
+    center: "M4 5h16M7 10h10M4 15h16M7 20h10"
+  };
+  return (() => {
+    var o = ee(), v = o.firstChild;
+    return s(o, d(b, {
+      get when() {
+        return n.name === "emoji";
+      },
+      get children() {
+        return Y();
+      }
+    }), v), s(o, d(b, {
+      get when() {
+        return n.name === "copy";
+      },
+      get children() {
+        return Z();
+      }
+    }), v), p(() => m(v, "d", g[n.name])), o;
+  })();
+}
+function q() {
+  return te();
+}
+function ye(n) {
+  const g = G(), [o, v] = A(null), [_, B] = A(), [j, O] = A(), E = z();
+  let f, M = !1;
+  const $ = () => {
+    v(null), n.onMoreClose?.();
+  }, x = (i) => f?.querySelector(i === "emoji" ? ".workbench-emoji-trigger" : ".workbench-treatment-trigger"), S = (i) => (i.querySelector('button[aria-pressed="true"]') ?? i.querySelector(".workbench-menu-options > button"))?.focus({
+    preventScroll: !0
+  }), P = (i, a) => {
+    i.key === "ArrowDown" && (i.preventDefault(), i.stopPropagation(), o() === a && _() ? S(_()) : (M = !0, v(a)));
+  };
+  return T(() => {
+    const i = _();
+    if (!o() || !i || !f) {
+      O(void 0);
+      return;
+    }
+    const a = J(Q({
+      owner: f
+    })), k = x(o());
+    if (!a || !k) return;
+    const t = k.getBoundingClientRect(), e = f.getBoundingClientRect();
+    i.style.maxHeight = `${Math.max(0, a.bottom - a.top - 24)}px`;
+    const r = i.getBoundingClientRect(), u = t.top - r.height - 10, l = Math.max(a.top + 12, u >= a.top + 12 ? u : Math.min(t.bottom + 10, a.bottom - r.height - 12)), c = Math.max(a.left + 12, Math.min(t.left, a.right - r.width - 12));
+    O({
+      x: c - e.left,
+      y: l - e.top
+    }), M && (M = !1, queueMicrotask(() => {
+      i.isConnected && S(i);
+    }));
+  }), T(() => {
+    if (!o() && !n.moreOpen) return;
+    const i = (a) => {
+      a.target instanceof Node && !f?.contains(a.target) && $();
+    };
+    if (document.addEventListener("pointerdown", i, !0), I(() => document.removeEventListener("pointerdown", i, !0)), o()) {
+      const a = (k) => {
+        k.target instanceof Node && !f?.contains(k.target) && $();
+      };
+      window.addEventListener("resize", $), document.addEventListener("wheel", a, {
+        capture: !0,
+        passive: !0
+      }), I(() => {
+        window.removeEventListener("resize", $), document.removeEventListener("wheel", a, !0);
+      });
+    }
+  }), (() => {
+    var i = ue(), a = i.firstChild, k = f;
+    return typeof k == "function" ? L(k, i) : f = i, H(i, N({
+      get class() {
+        return `workbench-composition-toolbar workbench-${n.kind === "sticky" ? "sticky__actions" : n.kind === "region" ? "background-region__toolbar" : "text-annotation__toolbar"}`;
+      },
+      get "data-kind"() {
+        return n.kind;
+      }
+    }, {
+      [X]: "true"
+    }, {
+      role: "toolbar",
+      get "aria-label"() {
+        return g("treatment");
+      },
+      onPointerDown: (t) => t.stopPropagation(),
+      onClick: (t) => t.stopPropagation(),
+      onKeyDown: (t) => {
+        if (t.key === "Escape" && (o() || n.moreOpen)) {
+          t.stopPropagation();
+          const e = x(o());
+          $(), e?.focus({
+            preventScroll: !0
+          });
+        }
+      }
+    }), !1, !0), s(i, d(b, {
+      get when() {
+        return o();
+      },
+      get children() {
+        var t = ae();
+        return t.$$keydown = (e) => {
+          if (e.key === "Tab" && o() === "emoji") {
+            const w = x(o());
+            v(null), w?.focus({
+              preventScroll: !0
+            });
+            return;
+          }
+          if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key) || !(e.target instanceof Element) || !e.target.closest(".workbench-menu-options")) return;
+          e.preventDefault(), e.stopPropagation();
+          const r = Array.from(e.currentTarget.querySelectorAll(".workbench-menu-options > button")), u = r.indexOf(document.activeElement), l = o() === "emoji" && (e.key === "ArrowUp" || e.key === "ArrowDown") ? 6 : 1, c = e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : (u + (e.key === "ArrowUp" || e.key === "ArrowLeft" ? -l : l) + r.length) % r.length;
+          r[c]?.focus({
+            preventScroll: !0
+          });
+        }, L(B, t), m(t, "id", E), s(t, d(b, {
+          get when() {
+            return o() === "material";
+          },
+          get children() {
+            return [(() => {
+              var e = re();
+              return s(e, d(R, {
+                get each() {
+                  return n.materials;
+                },
+                children: (r) => (() => {
+                  var u = me(), l = u.firstChild;
+                  return u.$$click = () => {
+                    n.onMaterial?.(r), v(null), f?.querySelector(".workbench-treatment-trigger")?.focus({
+                      preventScroll: !0
+                    });
+                  }, u.$$pointerdown = (c) => c.preventDefault(), s(u, () => n.preview?.(r), l), s(l, () => g(r), null), s(l, d(K, {}), null), p((c) => {
+                    var w = n.materialLabel?.(r), y = n.material === r;
+                    return w !== c.e && m(u, "aria-label", c.e = w), y !== c.t && m(u, "aria-pressed", c.t = y), c;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  }), u;
+                })()
+              })), p(() => m(e, "aria-label", g(n.kind === "region" ? "regionMaterial" : "stickyMaterial"))), e;
+            })(), d(b, {
+              get when() {
+                return n.more;
+              },
+              get children() {
+                var e = ne();
+                return s(e, () => n.more?.($)), e;
+              }
+            })];
+          }
+        }), null), s(t, d(b, {
+          get when() {
+            return o() === "emoji";
+          },
+          get children() {
+            return [(() => {
+              var e = oe();
+              return s(e, () => g("emoji")), e;
+            })(), (() => {
+              var e = ie();
+              return s(e, d(R, {
+                each: V,
+                children: (r, u) => (() => {
+                  var l = de();
+                  return l.$$click = () => {
+                    v(null), n.onInsertEmoji?.(r);
+                  }, l.$$pointerdown = (c) => c.preventDefault(), s(l, r), p((c) => {
+                    var w = u() === 0 ? 0 : -1, y = g("useEmoji", r), D = g("useEmoji", r);
+                    return w !== c.e && m(l, "tabindex", c.e = w), y !== c.t && m(l, "aria-label", c.t = y), D !== c.a && m(l, "title", c.a = D), c;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0
+                  }), l;
+                })()
+              })), p(() => m(e, "aria-label", g("emoji"))), e;
+            })()];
+          }
+        }), null), p((e) => {
+          var r = o() === "material", u = o() === "emoji", l = `${j()?.x ?? 0}px`, c = `${j()?.y ?? 0}px`, w = j() ? "visible" : "hidden";
+          return r !== e.e && t.classList.toggle("workbench-treatment-panel", e.e = r), u !== e.t && t.classList.toggle("workbench-emoji-panel", e.t = u), l !== e.a && C(t, "left", e.a = l), c !== e.o && C(t, "top", e.o = c), w !== e.i && C(t, "visibility", e.i = w), e;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
+        }), t;
+      }
+    }), a), s(i, d(b, {
+      get when() {
+        return F(() => !n.materials)() && n.moreOpen;
+      },
+      get children() {
+        var t = le();
+        return s(t, () => n.more?.($)), t;
+      }
+    }), a), s(a, () => n.palette, null), s(a, d(b, {
+      get when() {
+        return n.material;
+      },
+      get children() {
+        return [d(q, {}), (() => {
+          var t = ce(), e = t.firstChild;
+          return t.$$click = () => {
+            v(o() === "material" ? null : "material");
+          }, t.$$pointerdown = (r) => r.preventDefault(), t.$$keydown = (r) => P(r, "material"), m(t, "aria-controls", E), s(t, () => n.preview?.(n.material), e), s(e, () => g(n.material)), s(t, d(W, {}), null), p((r) => {
+            var u = g("treatment"), l = o() === "material";
+            return u !== r.e && m(t, "aria-label", r.e = u), l !== r.t && m(t, "aria-expanded", r.t = l), r;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
+        })(), d(q, {})];
+      }
+    }), null), s(a, () => n.children, null), s(a, d(b, {
+      get when() {
+        return n.onInsertEmoji;
+      },
+      get children() {
+        var t = se();
+        return t.$$click = () => {
+          M = o() !== "emoji", v(o() === "emoji" ? null : "emoji");
+        }, t.$$keydown = (e) => P(e, "emoji"), t.$$pointerdown = (e) => e.preventDefault(), m(t, "aria-controls", E), s(t, d(he, {
+          name: "emoji"
+        })), p((e) => {
+          var r = g("insertEmoji"), u = g("insertEmoji"), l = o() === "emoji";
+          return r !== e.e && m(t, "aria-label", e.e = r), u !== e.t && m(t, "title", e.t = u), l !== e.a && m(t, "aria-expanded", e.a = l), e;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), t;
+      }
+    }), null), s(a, () => n.actions, null), i;
+  })();
+}
+U(["keydown", "pointerdown", "click"]);
+export {
+  q as CompositionDivider,
+  he as CompositionIcon,
+  ye as CompositionToolbar
+};

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

@@ -11,6 +11,8 @@ export type WorkbenchLayerGeometryPreview = {
 export type WorkbenchLayerProjectionMode = 'world' | 'screen';
 export interface WorkbenchTextEditorHandle {
     focus: () => void;
+    blur: () => void;
+    isFocused: Accessor<boolean>;
     insertTextAtSelection: (text: string) => void;
     readText: () => string;
 }
@@ -42,7 +44,7 @@ export declare function WorkbenchStickyNote(props: {
         width: number;
         height: number;
     }) => void;
-    onUpdate: (noteId: string, patch: Partial<Pick<WorkbenchStickyNoteItem, 'body' | 'color' | 'material'>>) => void;
+    onUpdate: (noteId: string, patch: Partial<Pick<WorkbenchStickyNoteItem, 'title' | 'body' | 'color' | 'material'>>) => void;
     onDelete: (noteId: string) => void;
     onLayoutInteractionStart?: () => void;
     onLayoutInteractionEnd?: () => void;