@floegence/floe-webapp-core 0.55.1 → 0.56.1

package/dist/components/workbench/WorkbenchLayerObjects.js

@@ -1,16 +1,17 @@
-import { insert as C, createComponent as b, memo as xe, effect as F, template as N, addEventListener as le, use as ge, classList as He, setAttribute as c, style as ye, spread as at, mergeProps as ct, className as tt, setStyleProperty as Pe, delegateEvents as lt } from "solid-js/web";
-import { CANVAS_WHEEL_INTERACTIVE_ATTR as st } from "../ui/localInteractionSurface.js";
-import { useWorkbenchCompositionText as Te } from "./workbenchCompositionMessages.js";
+import { insert as k, createComponent as w, memo as be, effect as P, template as A, addEventListener as U, use as se, classList as it, setAttribute as s, style as he, spread as dt, mergeProps as st, className as De, setStyleProperty as xe, delegateEvents as ut } from "solid-js/web";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as vt } from "../ui/localInteractionSurface.js";
+import { CompositionToolbar as Fe, CompositionIcon as ue, CompositionDivider as mt } from "./WorkbenchCompositionToolbar.js";
+import { useWorkbenchCompositionText as _e, WorkbenchCompositionActionsContext as We } from "./workbenchCompositionMessages.js";
 import { SurfaceAnchoredLayer as Ae } from "../ui/SurfaceAnchoredLayer.js";
-import { createMemo as O, For as me, Show as ue, createEffect as Le, onCleanup as $e, createSignal as de, untrack as We, batch as Ne } from "solid-js";
-import { GripVertical as it, Check as dt, Copy as ut, Trash as Be, ChevronDown as vt, Minus as ht, Plus as wt } from "../icons/index.js";
-import { startHotInteraction as ot } from "../../utils/hotInteraction.js";
-import { startPointerSession as rt } from "../ui/pointerSession.js";
-import { WORKBENCH_STICKY_NOTE_COLORS as mt, WORKBENCH_REGION_FILL_OPTIONS as gt, WORKBENCH_BACKGROUND_MATERIALS as bt, WORKBENCH_TEXT_FONT_OPTIONS as Ge, WORKBENCH_TEXT_COLOR_OPTIONS as yt, WORKBENCH_TEXT_EMOJI_OPTIONS as ft } from "./workbenchOptions.js";
-import { compareWorkbenchLayerRenderOrder as kt, createWorkbenchWidgetSurfaceMetrics as xt } from "./workbenchHelpers.js";
-import { createOwnerSafePropAccessor as i } from "./workbenchOwnerSafeAccessors.js";
-var $t = /* @__PURE__ */ N('<div class=workbench-sticky__actions data-floe-workbench-sticky-local=true><button type=button class=workbench-sticky__tool></button><div class=workbench-material-choices role=group></div><button type=button class=workbench-layer-mini-button></button><button type=button class="workbench-sticky__tool is-danger">'), Ct = /* @__PURE__ */ N('<button type=button class="workbench-layer-resize workbench-sticky__resize">'), St = /* @__PURE__ */ N("<article class=workbench-sticky data-floe-canvas-interactive=true data-floe-workbench-widget-root=true data-wb-plane=work data-wb-object-kind=sticky tabindex=0><div class=workbench-sticky__surface data-floe-input-surface=true><button type=button class=workbench-sticky__grip data-floe-workbench-sticky-local=true data-wb-part=move></button><div class=workbench-sticky__body>"), _t = /* @__PURE__ */ N("<button type=button class=workbench-style-choice><span class=workbench-note-preview>"), Et = /* @__PURE__ */ N('<button type=button class="workbench-style-choice is-material"><span class=workbench-note-preview></span><span>'), zt = /* @__PURE__ */ N("<article class=workbench-text-annotation data-floe-input-surface=true data-wb-plane=annotation data-wb-object-kind=text data-wb-part=body><div class=workbench-text-annotation__content data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-wb-part=content>"), Rt = /* @__PURE__ */ N("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body><div class=workbench-background-region__label data-floe-input-surface=true><div role=textbox data-floe-workbench-text-selection-surface=true>"), Pt = /* @__PURE__ */ N("<div class=workbench-text-font-popover role=menu>"), Mt = /* @__PURE__ */ N("<div class=workbench-text-emoji-popover role=menu>"), Tt = /* @__PURE__ */ N('<div class=workbench-text-annotation__toolbar data-floe-canvas-interactive=true><button type=button class="workbench-layer-mini-button workbench-layer-move-handle"data-wb-part=move></button><div class=workbench-text-font-picker data-floe-canvas-interactive=true><button type=button aria-haspopup=menu class=workbench-text-font-trigger><span class=workbench-text-font-trigger__sample>Aa</span><span class=workbench-text-font-trigger__label></span></button></div><div class=workbench-text-size-stepper role=group><button type=button class=workbench-text-size-stepper__button></button><input class=workbench-text-annotation__size-input type=text inputmode=numeric pattern=[0-9]*><button type=button class=workbench-text-size-stepper__button></button></div><div class=workbench-text-emoji-picker data-floe-canvas-interactive=true><button type=button aria-haspopup=menu class=workbench-text-emoji-trigger>✨</button></div><button type=button class=workbench-layer-mini-button></button><button type=button class="workbench-layer-mini-button is-danger">'), Lt = /* @__PURE__ */ N('<div class="workbench-layer-control workbench-layer-control--text"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=text data-wb-part=toolbar><div class="workbench-layer-control__selection is-text"aria-hidden=true></div><button type=button class=workbench-layer-resize data-wb-part=resize>'), It = /* @__PURE__ */ N("<button type=button role=menuitemradio class=workbench-text-font-option><span class=workbench-text-font-option__sample>Aa</span><span class=workbench-text-font-option__label>"), jt = /* @__PURE__ */ N("<button type=button class=workbench-layer-swatch>"), pt = /* @__PURE__ */ N("<button type=button role=menuitem class=workbench-text-emoji-option>"), Dt = /* @__PURE__ */ N("<button type=button class=workbench-layer-mini-button>"), Ot = /* @__PURE__ */ N('<div class=workbench-background-region__toolbar data-floe-canvas-interactive=true><button type=button class=workbench-layer-mini-button></button><div class=workbench-region-material-group role=group></div><button type=button class=workbench-layer-mini-button>%</button><button type=button class="workbench-layer-mini-button is-danger">'), Wt = /* @__PURE__ */ N('<div class="workbench-layer-control workbench-layer-control--region"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=region data-wb-part=toolbar><div class="workbench-layer-control__selection is-region"aria-hidden=true></div><button type=button class=workbench-layer-resize data-wb-part=resize>'), Nt = /* @__PURE__ */ N("<button type=button>"), Ft = /* @__PURE__ */ N("<button type=button class=workbench-region-material><span aria-hidden=true></span><span>"), Gt = /* @__PURE__ */ N("<div class=workbench-region-visibility-outline aria-hidden=true data-wb-plane=overlay data-wb-object-kind=region-outline>"), Ht = /* @__PURE__ */ N("<div class=workbench-region-visibility-outline-layer aria-hidden=true>"), At = /* @__PURE__ */ N("<div class=workbench-background-layer>"), Bt = /* @__PURE__ */ N("<div class=workbench-annotation-layer>"), Xt = /* @__PURE__ */ N("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
-const Yt = 190, Kt = 132, Ut = 180, Vt = 120, Jt = 96, qt = 42, Qt = {
+import { createSignal as re, createMemo as j, For as de, Show as oe, createEffect as fe, onCleanup as ye, useContext as Ne, untrack as Pe, batch as Te } from "solid-js";
+import { GripVertical as Ge, Check as ot, ChevronDown as ht, Minus as gt, Plus as wt } from "../icons/index.js";
+import { startHotInteraction as rt } from "../../utils/hotInteraction.js";
+import { startPointerSession as at } from "../ui/pointerSession.js";
+import { WORKBENCH_DEFAULT_TEXT_COLOR as bt, WORKBENCH_STICKY_NOTE_COLORS as ft, WORKBENCH_BACKGROUND_MATERIALS as yt, WORKBENCH_REGION_COLOR_OPTIONS as ct, WORKBENCH_TEXT_FONT_OPTIONS as Ie, WORKBENCH_TEXT_COLOR_OPTIONS as kt } from "./workbenchOptions.js";
+import { compareWorkbenchLayerRenderOrder as xt, createWorkbenchWidgetSurfaceMetrics as $t } from "./workbenchHelpers.js";
+import { createOwnerSafePropAccessor as l } from "./workbenchOwnerSafeAccessors.js";
+var Ct = /* @__PURE__ */ A("<span class=workbench-note-preview><span class=workbench-preview-writing>"), _t = /* @__PURE__ */ A("<div class=workbench-sticky__title role=textbox aria-multiline=true data-floe-workbench-text-selection-surface=true data-floe-workbench-sticky-local=true data-wb-text-editor=plain data-wb-part=content>"), St = /* @__PURE__ */ A("<div class=workbench-composition-selection aria-hidden=true>"), zt = /* @__PURE__ */ A('<button type=button class="workbench-layer-resize workbench-sticky__resize">'), pt = /* @__PURE__ */ A("<article class=workbench-sticky data-floe-canvas-interactive=true data-floe-workbench-widget-root=true data-wb-plane=work data-wb-object-kind=sticky tabindex=0><div class=workbench-sticky__surface data-floe-input-surface=true><button type=button class=workbench-sticky__grip data-floe-workbench-sticky-local=true data-wb-part=move></button><div class=workbench-sticky__content><div class=workbench-sticky__body role=textbox aria-multiline=true data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-floe-workbench-sticky-local=true data-wb-part=content>"), lt = /* @__PURE__ */ A("<div class=workbench-color-options>"), Et = /* @__PURE__ */ A("<button type=button class=workbench-style-choice>"), we = /* @__PURE__ */ A("<button type=button>"), He = /* @__PURE__ */ A("<button type=button class=is-danger>"), Rt = /* @__PURE__ */ A("<article class=workbench-text-annotation data-floe-input-surface=true data-wb-plane=annotation data-wb-object-kind=text data-wb-part=body><div class=workbench-text-annotation__content data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-wb-part=content>"), Pt = /* @__PURE__ */ A("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body><div class=workbench-background-region__label data-floe-input-surface=true><div role=textbox data-floe-workbench-text-selection-surface=true></div></div><button type=button class=workbench-region-grip>"), Tt = /* @__PURE__ */ A("<select><option value=more>"), Mt = /* @__PURE__ */ A('<div class="workbench-layer-control workbench-layer-control--text"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=text data-wb-part=toolbar><div class="workbench-layer-control__selection is-text"aria-hidden=true></div><button type=button class=workbench-text-move data-wb-part=move></button><button type=button class=workbench-layer-resize data-wb-part=resize>'), Lt = /* @__PURE__ */ A("<div class=workbench-text-font-popover role=menu>"), It = /* @__PURE__ */ A("<div class=workbench-text-font-picker data-floe-canvas-interactive=true><button type=button aria-haspopup=menu class=workbench-text-font-trigger><span class=workbench-text-font-trigger__sample>Aa</span><span class=workbench-text-font-trigger__label>"), jt = /* @__PURE__ */ A("<div class=workbench-text-size-stepper role=group><button type=button class=workbench-text-size-stepper__button></button><input class=workbench-text-annotation__size-input type=text inputmode=numeric pattern=[0-9]*><button type=button class=workbench-text-size-stepper__button>"), Ot = /* @__PURE__ */ A("<button type=button role=menuitemradio class=workbench-text-font-option><span class=workbench-text-font-option__sample>Aa</span><span class=workbench-text-font-option__label>"), Dt = /* @__PURE__ */ A("<button type=button class=workbench-layer-swatch>"), Ft = /* @__PURE__ */ A("<option>"), Wt = /* @__PURE__ */ A("<button type=button class=workbench-name-trigger><span>"), At = /* @__PURE__ */ A('<div class="workbench-layer-control workbench-layer-control--region"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=region data-wb-part=toolbar><div class="workbench-layer-control__selection is-region"aria-hidden=true></div><button type=button class=workbench-layer-resize data-wb-part=resize>'), Nt = /* @__PURE__ */ A("<span class=workbench-region-preview-mat><span>"), Gt = /* @__PURE__ */ A("<button type=button class=workbench-style-choice><span class=workbench-region-preview-mat><span>"), Ht = /* @__PURE__ */ A("<label><input type=range min=8 max=100>"), Bt = /* @__PURE__ */ A("<div aria-hidden=true data-wb-plane=overlay data-wb-object-kind=region-outline>"), Xt = /* @__PURE__ */ A("<div class=workbench-region-visibility-outline-layer aria-hidden=true>"), Yt = /* @__PURE__ */ A("<div class=workbench-background-layer>"), Ut = /* @__PURE__ */ A("<div class=workbench-annotation-layer>"), Kt = /* @__PURE__ */ A("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
+const Vt = 190, qt = 132, Jt = 180, Qt = 120, Zt = 96, en = 42, tn = {
   amber: "is-amber",
   sage: "is-sage",
   azure: "is-azure",
@@ -18,141 +19,161 @@ const Yt = 190, Kt = 132, Ut = 180, Vt = 120, Jt = 96, qt = 42, Qt = {
   rose: "is-rose",
   graphite: "is-graphite"
 };
-function xn() {
-  const e = /* @__PURE__ */ new Map();
+function Sn() {
+  const e = /* @__PURE__ */ new Map(), [t, r] = re(0);
   return {
-    register(n, r) {
-      return e.set(n, r), () => {
-        e.get(n) === r && e.delete(n);
+    register(u, o) {
+      return e.set(u, o), r((i) => i + 1), () => {
+        e.get(u) === o && (e.delete(u), r((i) => i + 1));
       };
     },
-    get(n) {
-      return e.get(n);
+    get(u) {
+      return t(), e.get(u);
     }
   };
 }
-function Xe(e) {
-  return [...e].sort(kt);
+function Be(e) {
+  return [...e].sort(xt);
 }
-function Ye(e) {
-  return new Map(e.map((n) => [n.id, n]));
+function Xe(e) {
+  return new Map(e.map((t) => [t.id, t]));
 }
-function Zt(e, n) {
-  const r = e.findIndex((u) => u === n);
+function nn(e, t) {
+  const r = e.findIndex((u) => u === t);
   return e[(r + 1) % e.length] ?? e[0];
 }
-function nt(e, n, r) {
-  Le(() => {
+function on(e, t, r) {
+  fe(() => {
     if (!e() || typeof document > "u") return;
-    const u = (y) => {
-      const S = n();
-      S && y.target instanceof Node && S.contains(y.target) || r();
-    }, t = (y) => {
-      y.key === "Escape" && r();
+    const u = (i) => {
+      const x = t();
+      x && i.target instanceof Node && x.contains(i.target) || r();
+    }, o = (i) => {
+      i.key === "Escape" && r();
     };
-    document.addEventListener("pointerdown", u, !0), document.addEventListener("keydown", t), $e(() => {
-      document.removeEventListener("pointerdown", u, !0), document.removeEventListener("keydown", t);
+    document.addEventListener("pointerdown", u, !0), document.addEventListener("keydown", o), ye(() => {
+      document.removeEventListener("pointerdown", u, !0), document.removeEventListener("keydown", o);
     });
   });
 }
-function en(e, n) {
+function tt(e, t) {
   if (!e || e.rangeCount <= 0) return !1;
   const r = e.getRangeAt(0).commonAncestorContainer;
-  return r === n || n.contains(r);
+  return r === t || t.contains(r);
 }
-function Ke(e) {
-  const [n, r] = de(), [u, t] = de(!1), [y, S] = de(!1);
-  let j = "", L = !1;
-  const G = () => n()?.textContent ?? "", T = (l) => r(l), p = (l) => {
-    const v = e.singleLine ? (l.textContent ?? "").trim() : l.innerHTML ?? "";
-    v !== e.value() && e.onCommit(v);
+function Me(e) {
+  const [t, r] = re(), [u, o] = re(!1), [i, x] = re(!1);
+  let z;
+  const O = () => t()?.textContent ?? "", B = (g) => r(g), D = (g) => {
+    const d = e.singleLine ? (g.textContent ?? "").trim() : g.innerHTML ?? "";
+    d !== e.value() && e.onCommit(d);
   };
-  return Le(() => {
-    const l = n();
-    if (!l || u() || y()) return;
-    const v = e.value();
-    (l.innerHTML ?? "") !== v && (e.singleLine ? l.textContent = v : l.innerHTML = v);
-  }), {
-    bind: T,
-    isFocused: y,
-    readText: G,
-    focus: () => {
-      S(!0), n()?.focus({
-        preventScroll: !0
-      });
-    },
-    insertTextAtSelection: (l) => {
-      const v = n();
-      if (!v) return;
-      v.focus({
-        preventScroll: !0
-      });
-      const d = document.getSelection(), a = en(d, v), M = a && d ? d.getRangeAt(0) : document.createRange();
-      a || (M.selectNodeContents(v), M.collapse(!1)), M.deleteContents();
-      const s = document.createTextNode(l);
-      M.insertNode(s), M.setStartAfter(s), M.collapse(!0), d?.removeAllRanges(), d?.addRange(M);
-    },
-    handleFocus: () => {
-      j = e.value(), L = !1, S(!0);
-    },
-    handleBlur: (l) => {
-      !L && !u() && p(l.currentTarget), S(!1);
-    },
-    handleKeyDown: (l) => {
-      if (u() || l.isComposing || l.keyCode === 229) return;
-      l.stopPropagation();
-      const v = l.ctrlKey || l.metaKey;
-      l.key === "Escape" ? (l.preventDefault(), L = !0, e.singleLine ? l.currentTarget.textContent = j : l.currentTarget.innerHTML = j, l.currentTarget.blur()) : l.key === "Enter" && (v || e.singleLine) ? (l.preventDefault(), l.currentTarget.blur()) : v && l.key === "b" ? (l.preventDefault(), document.execCommand("bold", !1)) : v && l.key === "i" && (l.preventDefault(), document.execCommand("italic", !1));
-    },
-    handleCompositionStart: () => {
-      t(!0);
+  fe(() => {
+    const g = t();
+    if (!g || u() || i()) return;
+    const d = e.value();
+    (g.innerHTML ?? "") !== d && (e.singleLine ? g.textContent = d : g.innerHTML = d);
+  }), fe(() => {
+    const g = t();
+    if (!g || !i()) return;
+    const d = (m) => {
+      m.composedPath().includes(g) || g.blur();
+    }, T = g.ownerDocument;
+    T.addEventListener("pointerdown", d, !0), ye(() => T.removeEventListener("pointerdown", d, !0));
+  });
+  const p = () => {
+    x(!0);
+  }, Y = (g) => {
+    const d = document.getSelection();
+    tt(d, g.currentTarget) && (z = d.getRangeAt(0).cloneRange()), u() || D(g.currentTarget), x(!1);
+  }, E = (g) => {
+    if (g.stopPropagation(), u() || g.isComposing || g.keyCode === 229) return;
+    const d = g.ctrlKey || g.metaKey;
+    g.key === "Escape" || g.key === "Enter" && (d || e.singleLine) ? (g.preventDefault(), g.currentTarget.blur()) : d && g.key === "b" ? (g.preventDefault(), document.execCommand("bold", !1)) : d && g.key === "i" && (g.preventDefault(), document.execCommand("italic", !1));
+  }, L = () => {
+    o(!0);
+  }, C = (g) => {
+    document.activeElement !== g.currentTarget && D(g.currentTarget), o(!1);
+  }, G = () => {
+    x(!0), t()?.focus({
+      preventScroll: !0
+    });
+  };
+  return {
+    bind: B,
+    blur: () => t()?.blur(),
+    isFocused: i,
+    readText: O,
+    focus: G,
+    insertTextAtSelection: (g) => {
+      const d = t();
+      if (!d) return;
+      const T = document.getSelection(), m = tt(T, d) ? T.getRangeAt(0).cloneRange() : void 0, c = z && d.contains(z.commonAncestorContainer) ? z : void 0, h = m ?? c?.cloneRange() ?? document.createRange();
+      if (G(), !m && !c && (h.selectNodeContents(d), h.collapse(!1)), T?.removeAllRanges(), T?.addRange(h), document.execCommand?.("insertText", !1, g)) return;
+      h.deleteContents();
+      const n = document.createTextNode(g);
+      h.insertNode(n), h.setStartAfter(n), h.collapse(!0), T?.removeAllRanges(), T?.addRange(h);
     },
-    handleCompositionEnd: (l) => {
-      document.activeElement !== l.currentTarget && !L && p(l.currentTarget), t(!1);
-    }
+    handleFocus: p,
+    handleBlur: Y,
+    handleKeyDown: E,
+    handleCompositionStart: L,
+    handleCompositionEnd: C
   };
 }
-function tn(e) {
+function rn(e) {
   return Math.max(8, Math.min(160, Math.round(e)));
 }
-function nn(e) {
+function an(e) {
   return Math.max(0.08, Math.min(1, e));
 }
-function Me(e) {
+function Ce(e) {
+  const t = ct.find((r) => r.fill === e.fill);
   return {
     "--workbench-region-fill": e.fill,
-    "--workbench-region-strength": `${Math.round(nn(e.opacity) * 100)}%`
+    "--region-hue": `${t?.hue ?? 0}`,
+    // Legacy and host-supplied fills retain their own hue through the same material renderer.
+    ...t ? {} : {
+      "--region-face": "oklch(from var(--workbench-region-fill) var(--region-lightness) c h)",
+      "--region-edge": "oklch(from var(--region-face) calc(l + var(--region-edge-delta)) min(.032,c) h)",
+      "--region-outline": "oklch(from var(--workbench-region-fill) var(--region-outline-lightness) c h)"
+    },
+    ...t?.color === "graphite" ? {
+      "--region-chroma": ".009",
+      "--region-outline-chroma": ".012"
+    } : {},
+    "--workbench-region-strength": `${Math.round(an(e.opacity) * 100)}%`
   };
 }
-function fe(e) {
+function je(e) {
   e.stopPropagation();
 }
-function ke(e) {
+function Oe(e) {
   e.stopPropagation();
 }
-function K(e) {
+function Q(e) {
   e.preventDefault(), e.stopPropagation();
 }
-function Q(e) {
+function $e(e) {
   e.stopPropagation();
 }
-function Ie(e, n, r) {
-  return e?.kind === n && e.id === r ? e : null;
+function Se(e, t, r) {
+  return e?.kind === t && e.id === r ? e : null;
 }
-function Oe(e) {
-  const n = typeof window < "u" && Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
-  return Math.round(e * n) / n;
+function Re(e) {
+  const t = typeof window < "u" && Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+  return Math.round(e * t) / t;
 }
-function je(e) {
-  const n = Math.max(e.viewport.scale, 1e-3);
+function ze(e) {
+  const t = Math.max(e.viewport.scale, 1e-3);
   return e.projection !== "screen" ? {
     ...e.geometry,
-    scale: n
+    scale: t
   } : {
-    x: Oe(e.viewport.x + e.geometry.x * n),
-    y: Oe(e.viewport.y + e.geometry.y * n),
-    width: Math.max(1, Oe(e.geometry.width * n)),
-    height: Math.max(1, Oe(e.geometry.height * n)),
+    x: Re(e.viewport.x + e.geometry.x * t),
+    y: Re(e.viewport.y + e.geometry.y * t),
+    width: Math.max(1, Re(e.geometry.width * t)),
+    height: Math.max(1, Re(e.geometry.height * t)),
     scale: 1
   };
 }
@@ -163,7 +184,7 @@ function pe(e) {
     transform: `translate(${e.x}px, ${e.y}px)`
   };
 }
-function De(e) {
+function Ee(e) {
   return {
     x: e.preview?.x ?? e.position.x,
     y: e.preview?.y ?? e.position.y,
@@ -171,381 +192,430 @@ function De(e) {
     height: e.preview?.height ?? e.height
   };
 }
-function Fe(e) {
-  const n = i(() => e.readPosition()), r = i(() => e.readGeometry?.() ?? {
+function Le(e) {
+  const t = l(() => e.readPosition()), r = l(() => e.readGeometry?.() ?? {
     width: 0,
     height: 0
-  }), u = i(() => e.viewportScale()), t = i(() => e.onCommitMove), y = i(() => e.onPreviewMove), S = i(() => e.onPreviewEnd), j = i(() => e.onInteractionStart), L = i(() => e.onInteractionEnd), G = i(() => e.onCommitStart), [T, p] = de(null);
-  let J;
-  return $e(() => {
-    J?.stop({
+  }), u = l(() => e.viewportScale()), o = l(() => e.onCommitMove), i = l(() => e.onPreviewMove), x = l(() => e.onPreviewEnd), z = l(() => e.onInteractionStart), O = l(() => e.onInteractionEnd), B = l(() => e.onCommitStart), [D, p] = re(null);
+  let Y;
+  return ye(() => {
+    Y?.stop({
       reason: "manual_stop",
       commit: !1
-    }), J = void 0, We(T)?.stopInteraction();
+    }), Y = void 0, Pe(D)?.stopInteraction();
   }), {
-    position: O(() => {
-      const E = T();
-      return E ? {
-        x: E.worldX,
-        y: E.worldY
-      } : n();
+    position: j(() => {
+      const C = D();
+      return C ? {
+        x: C.worldX,
+        y: C.worldY
+      } : t();
     }),
-    isDragging: () => T() !== null,
-    beginDrag: (E) => {
-      if (E.button !== 0) return;
-      E.preventDefault(), E.stopPropagation(), J?.stop({
+    isDragging: () => D() !== null,
+    beginDrag: (C) => {
+      if (C.button !== 0) return;
+      C.preventDefault(), C.stopPropagation(), Y?.stop({
         reason: "manual_stop",
         commit: !1
       });
-      const P = n(), U = Math.max(u(), 1e-3), m = ot({
+      const G = t(), q = Math.max(u(), 1e-3), g = rt({
         kind: "drag",
         cursor: "grabbing"
       });
-      let l = !1;
-      j()?.();
-      const v = () => {
-        l || (l = !0, m(), L()?.());
-      }, d = r(), a = y(), M = S(), s = G(), h = t();
+      let d = !1;
+      z()?.();
+      const T = () => {
+        d || (d = !0, g(), O()?.());
+      }, m = r(), c = i(), h = x(), n = B(), F = o();
       p({
-        pointerId: E.pointerId,
-        startClientX: E.clientX,
-        startClientY: E.clientY,
-        startWorldX: P.x,
-        startWorldY: P.y,
-        worldX: P.x,
-        worldY: P.y,
-        scale: U,
+        pointerId: C.pointerId,
+        startClientX: C.clientX,
+        startClientY: C.clientY,
+        startWorldX: G.x,
+        startWorldY: G.y,
+        worldX: G.x,
+        worldY: G.y,
+        scale: q,
         moved: !1,
-        stopInteraction: v
-      }), J = rt({
-        pointerEvent: E,
-        captureEl: E.currentTarget,
-        onMove: (f) => {
-          let w = null;
-          Ne(() => {
-            p((k) => {
-              if (!k || k.pointerId !== f.pointerId) return k;
-              const D = {
-                x: k.startWorldX + (f.clientX - k.startClientX) / k.scale,
-                y: k.startWorldY + (f.clientY - k.startClientY) / k.scale
+        stopInteraction: T
+      }), Y = at({
+        pointerEvent: C,
+        captureEl: C.currentTarget,
+        onMove: (X) => {
+          let I = null;
+          Te(() => {
+            p((S) => {
+              if (!S || S.pointerId !== X.pointerId) return S;
+              const te = {
+                x: S.startWorldX + (X.clientX - S.startClientX) / S.scale,
+                y: S.startWorldY + (X.clientY - S.startClientY) / S.scale
               };
-              return w = {
-                x: k.startWorldX + (f.clientX - k.startClientX) / k.scale,
-                y: k.startWorldY + (f.clientY - k.startClientY) / k.scale,
-                width: d.width,
-                height: d.height
+              return I = {
+                x: S.startWorldX + (X.clientX - S.startClientX) / S.scale,
+                y: S.startWorldY + (X.clientY - S.startClientY) / S.scale,
+                width: m.width,
+                height: m.height
               }, {
-                ...k,
-                worldX: D.x,
-                worldY: D.y,
-                moved: k.moved || Math.abs(D.x - k.startWorldX) > 2 || Math.abs(D.y - k.startWorldY) > 2
+                ...S,
+                worldX: te.x,
+                worldY: te.y,
+                moved: S.moved || Math.abs(te.x - S.startWorldX) > 2 || Math.abs(te.y - S.startWorldY) > 2
               };
-            }), w && a?.(w);
+            }), I && c?.(I);
           });
         },
         onEnd: ({
-          commit: f
+          commit: X
         }) => {
-          const w = We(T);
-          Ne(() => {
-            if (w && f) {
-              const k = {
-                x: w.worldX,
-                y: w.worldY
+          const I = Pe(D);
+          Te(() => {
+            if (I && X) {
+              const S = {
+                x: I.worldX,
+                y: I.worldY
               };
-              s?.(k), w.moved && h(k);
+              n?.(S), I.moved && F(S);
             }
-            w?.stopInteraction(), p(null), J = void 0, M?.();
+            I?.stopInteraction(), p(null), Y = void 0, h?.();
           });
         }
       });
     }
   };
 }
-function Ue(e) {
-  const n = i(() => e.readSize()), r = i(() => e.viewportScale()), u = i(() => e.onCommitResize), t = i(() => e.onPreviewResize), y = i(() => e.onPreviewEnd), S = i(() => e.onInteractionStart), j = i(() => e.onInteractionEnd), [L, G] = de(null);
-  let T;
-  return $e(() => {
-    T?.stop({
+function Ye(e) {
+  const t = l(() => e.readSize()), r = l(() => e.viewportScale()), u = l(() => e.onCommitResize), o = l(() => e.onPreviewResize), i = l(() => e.onPreviewEnd), x = l(() => e.onInteractionStart), z = l(() => e.onInteractionEnd), [O, B] = re(null);
+  let D;
+  return ye(() => {
+    D?.stop({
       reason: "manual_stop",
       commit: !1
-    }), T = void 0, We(L)?.stopInteraction();
+    }), D = void 0, Pe(O)?.stopInteraction();
   }), {
-    size: O(() => {
-      const _ = L();
-      return _ ? {
-        width: _.width,
-        height: _.height
-      } : n();
+    size: j(() => {
+      const E = O();
+      return E ? {
+        width: E.width,
+        height: E.height
+      } : t();
     }),
-    isResizing: () => L() !== null,
-    beginResize: (_) => {
-      if (_.button !== 0) return;
-      _.preventDefault(), _.stopPropagation(), T?.stop({
+    isResizing: () => O() !== null,
+    beginResize: (E) => {
+      if (E.button !== 0) return;
+      E.preventDefault(), E.stopPropagation(), D?.stop({
         reason: "manual_stop",
         commit: !1
       });
-      const H = n(), E = Math.max(r(), 1e-3), P = ot({
+      const L = t(), C = Math.max(r(), 1e-3), G = rt({
         kind: "resize",
         cursor: "nwse-resize"
       });
-      let U = !1;
-      S()?.();
-      const m = () => {
-        U || (U = !0, P(), j()?.());
-      }, l = t(), v = y(), d = u();
-      G({
-        pointerId: _.pointerId,
-        startClientX: _.clientX,
-        startClientY: _.clientY,
-        startWidth: H.width,
-        startHeight: H.height,
-        width: H.width,
-        height: H.height,
-        scale: E,
-        stopInteraction: m
-      }), T = rt({
-        pointerEvent: _,
-        captureEl: _.currentTarget,
-        onMove: (a) => {
-          let M = null;
-          Ne(() => {
-            G((s) => !s || s.pointerId !== a.pointerId ? s : (M = {
-              width: Math.max(e.minWidth, s.startWidth + (a.clientX - s.startClientX) / s.scale),
-              height: Math.max(e.minHeight, s.startHeight + (a.clientY - s.startClientY) / s.scale)
+      let q = !1;
+      x()?.();
+      const g = () => {
+        q || (q = !0, G(), z()?.());
+      }, d = o(), T = i(), m = u();
+      B({
+        pointerId: E.pointerId,
+        startClientX: E.clientX,
+        startClientY: E.clientY,
+        startWidth: L.width,
+        startHeight: L.height,
+        width: L.width,
+        height: L.height,
+        scale: C,
+        stopInteraction: g
+      }), D = at({
+        pointerEvent: E,
+        captureEl: E.currentTarget,
+        onMove: (c) => {
+          let h = null;
+          Te(() => {
+            B((n) => !n || n.pointerId !== c.pointerId ? n : (h = {
+              width: Math.max(e.minWidth, n.startWidth + (c.clientX - n.startClientX) / n.scale),
+              height: Math.max(e.minHeight, n.startHeight + (c.clientY - n.startClientY) / n.scale)
             }, {
-              ...s,
-              width: M.width,
-              height: M.height
-            })), M && l?.(M);
+              ...n,
+              width: h.width,
+              height: h.height
+            })), h && d?.(h);
           });
         },
         onEnd: ({
-          commit: a
+          commit: c
         }) => {
-          const M = We(L);
-          Ne(() => {
-            M && a && d({
-              width: M.width,
-              height: M.height
-            }), M?.stopInteraction(), G(null), T = void 0, v?.();
+          const h = Pe(O);
+          Te(() => {
+            h && c && m({
+              width: h.width,
+              height: h.height
+            }), h?.stopInteraction(), B(null), D = void 0, T?.();
           });
         }
       });
     }
   };
 }
-function $n(e) {
-  const n = Te(), [r, u] = de(), t = i(() => e.item), y = i(() => e.selected), S = i(() => e.viewportScale), j = i(() => e.projectedViewport), L = i(() => e.surfaceReady ?? !0), G = i(() => e.renderLayer), T = i(() => e.topRenderLayer), p = i(() => e.locked), J = i(() => e.filtered), _ = i(() => e.visualFront ?? !1), H = i(() => e.onSelect), E = i(() => e.onContextMenu), P = i(() => e.onClaimVisualFrontOwner), U = i(() => e.onCommitFront), m = i(() => e.onCommitMove), l = i(() => e.onCommitResize), v = i(() => e.onUpdate), d = i(() => e.onDelete), a = i(() => e.onLayoutInteractionStart), M = i(() => e.onLayoutInteractionEnd), s = Ke({
-    value: () => t().body,
-    onCommit: (I) => v()(t().id, {
-      body: I
+function nt(e) {
+  return (() => {
+    var t = Ct();
+    return P((r) => {
+      var u = e.color, o = e.material;
+      return u !== r.e && s(t, "data-note-color", r.e = u), o !== r.t && s(t, "data-note-material", r.t = o), r;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
+  })();
+}
+function zn(e) {
+  const t = _e(), [r, u] = re(), o = l(() => e.item), i = l(() => e.selected), x = l(() => e.viewportScale), z = l(() => e.projectedViewport), O = l(() => e.surfaceReady ?? !0), B = l(() => e.renderLayer), D = l(() => e.topRenderLayer), p = l(() => e.locked), Y = l(() => e.filtered), E = l(() => e.visualFront ?? !1), L = l(() => e.onSelect), C = l(() => e.onContextMenu), G = l(() => e.onClaimVisualFrontOwner), q = l(() => e.onCommitFront), g = l(() => e.onCommitMove), d = l(() => e.onCommitResize), T = l(() => e.onUpdate), m = l(() => e.onDelete), c = l(() => e.onLayoutInteractionStart), h = l(() => e.onLayoutInteractionEnd), n = Me({
+    value: () => o().body,
+    onCommit: ($) => T()(o().id, {
+      body: $
+    })
+  }), F = Me({
+    value: () => o().title ?? "",
+    onCommit: ($) => T()(o().id, {
+      title: $
     })
-  }), [h, f] = de(!1);
-  let w;
-  const k = () => {
-    typeof window > "u" || w === void 0 || (window.clearTimeout(w), w = void 0);
-  }, D = () => {
-    f(!0), k(), !(typeof window > "u") && (w = window.setTimeout(() => {
-      w = void 0, f(!1);
+  });
+  fe(() => {
+    p() && (F.blur(), n.blur());
+  });
+  const [X, I] = re("body"), S = Ne(We), te = () => F.isFocused() || n.isFocused(), [ne, ae] = re(!1);
+  let _;
+  const J = () => {
+    typeof window > "u" || _ === void 0 || (window.clearTimeout(_), _ = void 0);
+  }, ce = () => {
+    ae(!0), J(), !(typeof window > "u") && (_ = window.setTimeout(() => {
+      _ = void 0, ae(!1);
     }, 720));
   };
-  $e(() => k());
-  const q = async () => {
-    typeof navigator > "u" || !navigator.clipboard?.writeText || (await navigator.clipboard.writeText(s.readText()), D());
-  }, ee = (I) => {
-    if (I.button !== 0) return;
-    const be = t();
-    H()(be.id), !p() && (I.target instanceof Element && I.target.closest('[data-floe-workbench-sticky-local="true"]') || (P()?.(be.id), x.beginDrag(I)));
-  }, x = Fe({
-    viewportScale: S,
+  ye(() => J());
+  const ve = async () => {
+    typeof navigator > "u" || !navigator.clipboard?.writeText || (await navigator.clipboard.writeText(n.readText()), ce());
+  }, v = ($) => {
+    if ($.button !== 0) return;
+    const ie = o();
+    L()(ie.id), !p() && ($.target instanceof Element && $.target.closest('[data-floe-workbench-sticky-local="true"]') || (G()?.(ie.id), b.beginDrag($)));
+  }, b = Le({
+    viewportScale: x,
     readPosition: () => ({
-      x: t().x,
-      y: t().y
+      x: o().x,
+      y: o().y
     }),
-    onCommitMove: (I) => m()(t().id, I),
-    onCommitStart: () => U()?.(t().id),
-    onInteractionStart: () => a()?.(),
-    onInteractionEnd: () => M()?.()
-  }), V = Ue({
-    viewportScale: S,
+    onCommitMove: ($) => g()(o().id, $),
+    onCommitStart: () => q()?.(o().id),
+    onInteractionStart: () => c()?.(),
+    onInteractionEnd: () => h()?.()
+  }), y = Ye({
+    viewportScale: x,
     readSize: () => ({
-      width: t().width,
-      height: t().height
+      width: o().width,
+      height: o().height
     }),
-    minWidth: Yt,
-    minHeight: Kt,
-    onCommitResize: (I) => l()(t().id, I),
-    onInteractionStart: () => a()?.(),
-    onInteractionEnd: () => M()?.()
-  }), te = O(() => x.position()), B = O(() => V.size()), ne = O(() => {
-    const I = j();
-    if (I)
-      return xt({
-        widgetId: t().id,
-        worldX: te().x,
-        worldY: te().y,
-        worldWidth: B().width,
-        worldHeight: B().height,
-        viewport: I(),
-        ready: L()
+    minWidth: Vt,
+    minHeight: qt,
+    onCommitResize: ($) => d()(o().id, $),
+    onInteractionStart: () => c()?.(),
+    onInteractionEnd: () => h()?.()
+  }), W = j(() => b.position()), H = j(() => y.size()), f = j(() => {
+    const $ = z();
+    if ($)
+      return $t({
+        widgetId: o().id,
+        worldX: W().x,
+        worldY: W().y,
+        worldWidth: H().width,
+        worldHeight: H().height,
+        viewport: $(),
+        ready: O()
       });
-  }), ve = O(() => ne()?.rect.viewportScale ?? Math.max(S(), 1e-3)), ie = O(() => ({
-    width: `${B().width}px`,
-    height: `${B().height}px`,
-    transform: j() ? `translate(${ne()?.rect.screenX ?? 0}px, ${ne()?.rect.screenY ?? 0}px) scale(${ve()})` : `translate(${te().x}px, ${te().y}px)`,
+  }), K = j(() => f()?.rect.viewportScale ?? Math.max(x(), 1e-3)), Z = j(() => ({
+    "--workbench-layer-control-inverse-scale": `${1 / K()}`,
+    width: `${H().width}px`,
+    height: `${H().height}px`,
+    transform: z() ? `translate(${f()?.rect.screenX ?? 0}px, ${f()?.rect.screenY ?? 0}px) scale(${K()})` : `translate(${W().x}px, ${W().y}px)`,
     "transform-origin": "0 0",
-    "z-index": `${y() || _() || x.isDragging() || V.isResizing() ? T() + 1 : G()}`
+    "z-index": `${i() || E() || b.isDragging() || y.isResizing() ? D() + 1 : B()}`
   }));
   return (() => {
-    var I = St(), be = I.firstChild, he = be.firstChild, we = he.nextSibling;
-    I.$$contextmenu = ($) => {
-      $.preventDefault(), $.stopPropagation(), E()?.($, t());
-    }, I.addEventListener("focus", () => H()(t().id)), I.$$pointerdown = ee, ge(u, I), he.$$pointerdown = ($) => {
-      const X = t();
-      H()(X.id), P()?.(X.id), x.beginDrag($);
-    }, C(he, b(it, {
+    var $ = pt(), ie = $.firstChild, N = ie.firstChild, le = N.nextSibling, ee = le.firstChild;
+    $.$$contextmenu = (a) => {
+      a.preventDefault(), a.stopPropagation(), C()?.(a, o());
+    }, $.addEventListener("focus", () => L()(o().id)), $.$$pointerdown = v, se(u, $), N.$$pointerdown = (a) => {
+      if (p()) return;
+      const M = o();
+      L()(M.id), G()?.(M.id), b.beginDrag(a);
+    }, k(N, w(Ge, {
       class: "w-3.5 h-3.5"
-    }));
-    var oe = s.bind;
-    return typeof oe == "function" ? ge(oe, we) : s.bind = we, at(we, ct(() => ({
-      [st]: y() ? "true" : void 0
-    }), {
-      get contentEditable() {
-        return !p();
-      },
-      role: "textbox",
-      "aria-multiline": "true",
-      get "aria-disabled"() {
-        return p() ? "true" : void 0;
-      },
-      get "aria-label"() {
-        return n("stickyBody");
-      },
-      spellcheck: !1,
-      "data-floe-workbench-text-selection-surface": "true",
-      "data-wb-text-editor": "plain",
-      "data-floe-workbench-sticky-local": "true",
-      "data-wb-part": "content",
-      onPointerDown: ($) => {
-        $.stopPropagation(), H()(t().id);
-      },
-      get onFocus() {
-        return s.handleFocus;
-      },
-      get onBlur() {
-        return s.handleBlur;
-      },
-      get onKeyDown() {
-        return s.handleKeyDown;
-      },
-      get onCompositionStart() {
-        return s.handleCompositionStart;
+    })), dt(le, st(() => ({
+      [vt]: i() ? "true" : void 0
+    })), !1, !0), k(le, w(oe, {
+      get when() {
+        return o().title !== void 0;
       },
-      get onCompositionEnd() {
-        return s.handleCompositionEnd;
+      get children() {
+        var a = _t();
+        U(a, "compositionend", F.handleCompositionEnd), U(a, "compositionstart", F.handleCompositionStart), U(a, "keydown", F.handleKeyDown, !0), U(a, "blur", F.handleBlur), a.addEventListener("focus", (R) => {
+          I("title"), F.handleFocus(R);
+        }), a.$$pointerdown = (R) => {
+          R.stopPropagation(), L()(o().id);
+        };
+        var M = F.bind;
+        return typeof M == "function" ? se(M, a) : F.bind = a, s(a, "spellcheck", !1), P((R) => {
+          var V = !p(), me = t("stickyTitle"), ge = t("textPlaceholder");
+          return V !== R.e && s(a, "contenteditable", R.e = V), me !== R.t && s(a, "aria-label", R.t = me), ge !== R.a && s(a, "data-placeholder", R.a = ge), R;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), a;
       }
-    }), !1, !1), C(I, b(ue, {
+    }), ee), U(ee, "compositionend", n.handleCompositionEnd), U(ee, "compositionstart", n.handleCompositionStart), U(ee, "keydown", n.handleKeyDown, !0), U(ee, "blur", n.handleBlur), ee.addEventListener("focus", (a) => {
+      I("body"), n.handleFocus(a);
+    }), ee.$$pointerdown = (a) => {
+      a.stopPropagation(), L()(o().id);
+    };
+    var ke = n.bind;
+    return typeof ke == "function" ? se(ke, ee) : n.bind = ee, s(ee, "spellcheck", !1), k($, w(oe, {
       get when() {
-        return xe(() => !!y())() && !p();
+        return be(() => !!i())() && !p();
       },
       get children() {
-        return b(Ae, {
+        return w(Ae, {
+          reservedSpace: {
+            top: 64,
+            narrowTop: 106,
+            bottom: 86
+          },
           get anchor() {
             return r();
           },
           get revision() {
-            return ie();
+            return Z();
           },
           class: "workbench-object-tools",
           get children() {
-            var $ = $t(), X = $.firstChild, re = X.nextSibling, se = re.nextSibling, ae = se.nextSibling;
-            return X.$$click = async (z) => {
-              Q(z), await q();
-            }, X.$$pointerdown = K, C(X, b(ue, {
-              get when() {
-                return h();
+            return w(Fe, {
+              kind: "sticky",
+              onInsertEmoji: (a) => (X() === "title" && o().title !== void 0 ? F : n).insertTextAtSelection(a),
+              materials: ["tint", "tab", "ruled"],
+              get material() {
+                return o().material ?? "tint";
               },
-              get fallback() {
-                return b(ut, {
-                  class: "w-3.5 h-3.5"
-                });
+              materialLabel: (a) => t("useStickyMaterial", t(a)),
+              preview: (a) => w(nt, {
+                get color() {
+                  return o().color;
+                },
+                material: a
+              }),
+              onMaterial: (a) => T()(o().id, {
+                material: a
+              }),
+              get palette() {
+                return (() => {
+                  var a = lt();
+                  return k(a, w(de, {
+                    each: ft,
+                    children: (M) => (() => {
+                      var R = Et();
+                      return R.$$click = () => T()(o().id, {
+                        color: M
+                      }), R.$$pointerdown = Q, k(R, w(nt, {
+                        color: M,
+                        get material() {
+                          return o().material ?? "tint";
+                        }
+                      }), null), k(R, w(ot, {}), null), P((V) => {
+                        var me = t("stickyColor", t(M)), ge = o().color === M;
+                        return me !== V.e && s(R, "aria-label", V.e = me), ge !== V.t && s(R, "aria-pressed", V.t = ge), V;
+                      }, {
+                        e: void 0,
+                        t: void 0
+                      }), R;
+                    })()
+                  })), a;
+                })();
               },
-              get children() {
-                return b(dt, {
-                  class: "w-3.5 h-3.5"
-                });
+              get actions() {
+                return [w(oe, {
+                  when: S,
+                  get fallback() {
+                    return (() => {
+                      var a = we();
+                      return a.$$click = ve, a.$$pointerdown = Q, k(a, w(ue, {
+                        name: "copy"
+                      })), P((M) => {
+                        var R = t("copySticky"), V = !!ne();
+                        return R !== M.e && s(a, "aria-label", M.e = R), V !== M.t && a.classList.toggle("is-success", M.t = V), M;
+                      }, {
+                        e: void 0,
+                        t: void 0
+                      }), a;
+                    })();
+                  },
+                  get children() {
+                    var a = we();
+                    return a.$$click = () => S?.duplicate({
+                      kind: "sticky_note",
+                      id: o().id
+                    }), a.$$pointerdown = Q, k(a, w(ue, {
+                      name: "copy"
+                    })), P((M) => {
+                      var R = t("duplicate"), V = t("duplicate");
+                      return R !== M.e && s(a, "aria-label", M.e = R), V !== M.t && s(a, "title", M.t = V), M;
+                    }, {
+                      e: void 0,
+                      t: void 0
+                    }), a;
+                  }
+                }), (() => {
+                  var a = He();
+                  return a.$$click = () => m()(o().id), a.$$pointerdown = Q, k(a, w(ue, {
+                    name: "trash"
+                  })), P((M) => {
+                    var R = t("deleteSticky"), V = t("deleteSticky");
+                    return R !== M.e && s(a, "aria-label", M.e = R), V !== M.t && s(a, "title", M.t = V), M;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  }), a;
+                })()];
               }
-            })), C($, b(me, {
-              each: mt,
-              children: (z) => (() => {
-                var A = _t(), Z = A.firstChild;
-                return A.$$click = () => v()(t().id, {
-                  color: z
-                }), A.$$pointerdown = K, c(Z, "data-note-color", z), F((o) => {
-                  var g = n("stickyColor", n(z)), R = t().color === z, W = t().material ?? "tint";
-                  return g !== o.e && c(A, "aria-label", o.e = g), R !== o.t && c(A, "aria-pressed", o.t = R), W !== o.a && c(Z, "data-note-material", o.a = W), o;
-                }, {
-                  e: void 0,
-                  t: void 0,
-                  a: void 0
-                }), A;
-              })()
-            }), re), C(re, b(me, {
-              each: ["tint", "tab", "ruled"],
-              children: (z) => (() => {
-                var A = Et(), Z = A.firstChild, o = Z.nextSibling;
-                return A.$$click = () => v()(t().id, {
-                  material: z
-                }), A.$$pointerdown = K, c(Z, "data-note-material", z), C(o, () => n(z)), F((g) => {
-                  var R = n("useStickyMaterial", n(z)), W = (t().material ?? "tint") === z, ce = t().color;
-                  return R !== g.e && c(A, "aria-label", g.e = R), W !== g.t && c(A, "aria-pressed", g.t = W), ce !== g.a && c(Z, "data-note-color", g.a = ce), g;
-                }, {
-                  e: void 0,
-                  t: void 0,
-                  a: void 0
-                }), A;
-              })()
-            })), se.$$click = () => {
-              const z = document.activeElement;
-              z instanceof HTMLElement && z.blur();
-            }, se.$$pointerdown = K, C(se, () => n("done")), ae.$$click = (z) => {
-              Q(z), d()(t().id);
-            }, ae.$$pointerdown = K, C(ae, b(Be, {
-              class: "w-3.5 h-3.5"
-            })), F((z) => {
-              var A = !!h(), Z = n("copySticky"), o = n(h() ? "copiedSticky" : "copySticky"), g = n("stickyMaterial"), R = n("deleteSticky"), W = n("deleteSticky");
-              return A !== z.e && X.classList.toggle("is-success", z.e = A), Z !== z.t && c(X, "aria-label", z.t = Z), o !== z.a && c(X, "title", z.a = o), g !== z.o && c(re, "aria-label", z.o = g), R !== z.i && c(ae, "aria-label", z.i = R), W !== z.n && c(ae, "title", z.n = W), z;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0,
-              o: void 0,
-              i: void 0,
-              n: void 0
-            }), $;
+            });
           }
         });
       }
-    }), null), C(I, b(ue, {
+    }), null), k($, w(oe, {
+      get when() {
+        return i();
+      },
+      get children() {
+        return St();
+      }
+    }), null), k($, w(oe, {
       get when() {
         return !p();
       },
       get children() {
-        var $ = Ct();
-        return le($, "pointerdown", V.beginResize, !0), F(() => c($, "aria-label", n("resizeSticky"))), $;
+        var a = zt();
+        return U(a, "pointerdown", y.beginResize, !0), P(() => s(a, "aria-label", t("resizeSticky"))), a;
       }
-    }), null), F(($) => {
-      var X = {
-        "is-selected": y(),
+    }), null), P((a) => {
+      var M = {
+        "is-selected": i(),
         "is-locked": p(),
-        "is-filtered-out": J(),
-        "is-dragging": x.isDragging(),
-        "is-resizing": V.isResizing(),
-        "is-copied": h(),
-        [Qt[t().color]]: !0
-      }, re = t().id, se = t().id, ae = t().id, z = ie(), A = t().color, Z = t().material ?? "tint", o = n("dragSticky");
-      return $.e = He(I, X, $.e), re !== $.t && c(I, "data-floe-workbench-widget-id", $.t = re), se !== $.a && c(I, "data-wb-object-id", $.a = se), ae !== $.o && c(I, "data-floe-workbench-sticky-id", $.o = ae), $.i = ye(I, z, $.i), A !== $.n && c(be, "data-note-color", $.n = A), Z !== $.s && c(be, "data-note-material", $.s = Z), o !== $.h && c(he, "aria-label", $.h = o), $;
+        "is-filtered-out": Y(),
+        "is-dragging": b.isDragging(),
+        "is-resizing": y.isResizing(),
+        "is-copied": ne(),
+        "is-editing": te(),
+        [tn[o().color]]: !0
+      }, R = o().id, V = o().id, me = o().id, ge = Z(), Ue = o().color, Ke = o().material ?? "tint", Ve = t("dragSticky"), qe = p(), Je = t("textPlaceholder"), Qe = !p(), Ze = p() ? "true" : void 0, et = t("stickyBody");
+      return a.e = it($, M, a.e), R !== a.t && s($, "data-floe-workbench-widget-id", a.t = R), V !== a.a && s($, "data-wb-object-id", a.a = V), me !== a.o && s($, "data-floe-workbench-sticky-id", a.o = me), a.i = he($, ge, a.i), Ue !== a.n && s(ie, "data-note-color", a.n = Ue), Ke !== a.s && s(ie, "data-note-material", a.s = Ke), Ve !== a.h && s(N, "aria-label", a.h = Ve), qe !== a.r && (N.disabled = a.r = qe), Je !== a.d && s(ee, "data-placeholder", a.d = Je), Qe !== a.l && s(ee, "contenteditable", a.l = Qe), Ze !== a.u && s(ee, "aria-disabled", a.u = Ze), et !== a.c && s(ee, "aria-label", a.c = et), a;
     }, {
       e: void 0,
       t: void 0,
@@ -554,33 +624,40 @@ function $n(e) {
       i: void 0,
       n: void 0,
       s: void 0,
-      h: void 0
-    }), I;
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0
+    }), $;
   })();
 }
-function on(e) {
-  const n = Te(), r = i(() => e.item), u = i(() => e.selected), t = i(() => e.editable), y = i(() => e.viewportScale), S = i(() => e.viewport ?? {
+function cn(e) {
+  const t = _e(), r = l(() => e.item), u = l(() => e.selected), o = l(() => e.editable), i = l(() => e.viewportScale), x = l(() => e.viewport ?? {
     x: 0,
     y: 0,
     scale: 1
-  }), j = i(() => e.projection), L = i(() => e.preview), G = i(() => e.textEditorRegistry), T = i(() => e.onPreviewGeometry), p = i(() => e.onSelect), J = i(() => e.onContextMenu), _ = i(() => e.onCommitMove), H = i(() => e.onUpdate), E = Ke({
+  }), z = l(() => e.projection), O = l(() => e.preview), B = l(() => e.textEditorRegistry), D = l(() => e.onPreviewGeometry), p = l(() => e.onSelect), Y = l(() => e.onContextMenu), E = l(() => e.onCommitMove), L = l(() => e.onUpdate), C = Me({
     value: () => r().text,
-    onCommit: (d) => H()(r().id, {
-      text: d
+    onCommit: (m) => L()(r().id, {
+      text: m
     })
   });
-  Le(() => {
-    const d = G();
-    if (!d) return;
-    const a = d.register(r().id, {
-      focus: E.focus,
-      insertTextAtSelection: E.insertTextAtSelection,
-      readText: E.readText
+  fe(() => {
+    const m = B();
+    if (!m) return;
+    const c = m.register(r().id, {
+      focus: C.focus,
+      blur: C.blur,
+      isFocused: C.isFocused,
+      insertTextAtSelection: C.insertTextAtSelection,
+      readText: C.readText
     });
-    $e(a);
+    ye(c);
   });
-  const P = Fe({
-    viewportScale: y,
+  const G = Le({
+    viewportScale: i,
     readPosition: () => ({
       x: r().x,
       y: r().y
@@ -589,51 +666,56 @@ function on(e) {
       width: r().width,
       height: r().height
     }),
-    onCommitMove: (d) => _()(r().id, d),
-    onPreviewMove: (d) => T()?.({
+    onCommitMove: (m) => E()(r().id, m),
+    onPreviewMove: (m) => D()?.({
       kind: "annotation",
       id: r().id,
-      ...d
+      ...m
     }),
-    onPreviewEnd: () => T()?.(null)
-  }), U = O(() => {
-    const d = r(), a = Ie(L(), "annotation", d.id);
-    return je({
-      geometry: De({
-        preview: a,
-        position: P.position(),
-        width: d.width,
-        height: d.height
+    onPreviewEnd: () => D()?.(null)
+  }), q = j(() => {
+    const m = r(), c = Se(O(), "annotation", m.id);
+    return ze({
+      geometry: Ee({
+        preview: c,
+        position: G.position(),
+        width: m.width,
+        height: m.height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: x(),
+      projection: z()
     });
-  }), m = O(() => j() === "screen" ? Math.max(S().scale, 1e-3) : 1), l = O(() => ({
-    ...pe(U()),
+  }), g = j(() => z() === "screen" ? Math.max(x().scale, 1e-3) : 1), d = j(() => ({
+    ...pe(q()),
     "z-index": `${r().z_index}`,
     "--workbench-text-color": r().color,
+    ...r().color === bt ? {
+      "--workbench-text-ink": r().font_size < 16 ? "color-mix(in oklab,var(--workbench-canvas-ink) 95%,var(--wb-canvas))" : "var(--workbench-canvas-ink)"
+    } : {},
     "--workbench-text-size": `${r().font_size}px`,
+    "--workbench-text-line-height": r().font_size >= 24 ? "1.35" : r().font_size >= 16 ? "1.8" : "1.7",
+    "--workbench-text-letter-spacing": r().font_size >= 40 ? "-1.2px" : r().font_size >= 24 ? "-.65px" : r().font_size >= 16 ? "0" : ".1px",
     "--workbench-text-weight": `${r().font_weight}`,
     "--workbench-text-align": r().align,
     "--workbench-text-family": r().font_family,
-    "--workbench-text-content-scale": `${m()}`,
-    "--workbench-text-content-inverse-scale": `${1 / m()}`
-  })), v = (d) => {
-    !t() || d.button !== 0 || d.target instanceof Element && d.target.closest(".workbench-text-annotation__content") || (d.stopPropagation(), p()(r().id));
+    "--workbench-text-content-scale": `${g()}`,
+    "--workbench-text-content-inverse-scale": `${1 / g()}`
+  })), T = (m) => {
+    !o() || m.button !== 0 || m.target instanceof Element && m.target.closest(".workbench-text-annotation__content") || (m.stopPropagation(), p()(r().id));
   };
   return (() => {
-    var d = zt(), a = d.firstChild;
-    d.$$contextmenu = (s) => {
-      t() && (s.preventDefault(), s.stopPropagation(), p()(r().id), J()?.(s, r()));
-    }, d.$$pointerdown = v, le(a, "compositionend", E.handleCompositionEnd), le(a, "compositionstart", E.handleCompositionStart), le(a, "blur", E.handleBlur), le(a, "keydown", E.handleKeyDown, !0), a.addEventListener("focus", (s) => {
-      E.handleFocus(s), t() && p()(r().id);
-    }), a.$$pointerdown = (s) => {
-      !t() || s.button !== 0 || p()(r().id);
+    var m = Rt(), c = m.firstChild;
+    m.$$contextmenu = (n) => {
+      o() && (n.preventDefault(), n.stopPropagation(), p()(r().id), Y()?.(n, r()));
+    }, m.$$pointerdown = T, U(c, "compositionend", C.handleCompositionEnd), U(c, "compositionstart", C.handleCompositionStart), U(c, "blur", C.handleBlur), U(c, "keydown", C.handleKeyDown, !0), c.addEventListener("focus", (n) => {
+      C.handleFocus(n), o() && p()(r().id);
+    }), c.$$pointerdown = (n) => {
+      !o() || n.button !== 0 || p()(r().id);
     };
-    var M = E.bind;
-    return typeof M == "function" ? ge(M, a) : E.bind = a, c(a, "spellcheck", !1), F((s) => {
-      var h = !!u(), f = !!t(), w = t() ? "true" : void 0, k = r().id, D = l(), q = t() ? "plaintext-only" : !1, ee = t() ? 0 : void 0, x = t() ? "textbox" : void 0, V = n("textContent"), te = t() ? "true" : void 0, B = t() ? void 0 : "true";
-      return h !== s.e && d.classList.toggle("is-selected", s.e = h), f !== s.t && d.classList.toggle("is-editable", s.t = f), w !== s.a && c(d, "data-floe-canvas-interactive", s.a = w), k !== s.o && c(d, "data-wb-object-id", s.o = k), s.i = ye(d, D, s.i), q !== s.n && c(a, "contenteditable", s.n = q), ee !== s.s && c(a, "tabindex", s.s = ee), x !== s.h && c(a, "role", s.h = x), V !== s.r && c(a, "aria-label", s.r = V), te !== s.d && c(a, "aria-multiline", s.d = te), B !== s.l && c(a, "aria-disabled", s.l = B), s;
+    var h = C.bind;
+    return typeof h == "function" ? se(h, c) : C.bind = c, s(c, "spellcheck", !1), P((n) => {
+      var F = !!u(), X = !!o(), I = o() ? "true" : void 0, S = r().id, te = d(), ne = o() ? "plaintext-only" : !1, ae = o() ? 0 : void 0, _ = o() ? "textbox" : void 0, J = t("textContent"), ce = o() ? "true" : void 0, ve = o() ? void 0 : "true";
+      return F !== n.e && m.classList.toggle("is-selected", n.e = F), X !== n.t && m.classList.toggle("is-editable", n.t = X), I !== n.a && s(m, "data-floe-canvas-interactive", n.a = I), S !== n.o && s(m, "data-wb-object-id", n.o = S), n.i = he(m, te, n.i), ne !== n.n && s(c, "contenteditable", n.n = ne), ae !== n.s && s(c, "tabindex", n.s = ae), _ !== n.h && s(c, "role", n.h = _), J !== n.r && s(c, "aria-label", n.r = J), ce !== n.d && s(c, "aria-multiline", n.d = ce), ve !== n.l && s(c, "aria-disabled", n.l = ve), n;
     }, {
       e: void 0,
       t: void 0,
@@ -646,27 +728,27 @@ function on(e) {
       r: void 0,
       d: void 0,
       l: void 0
-    }), d;
+    }), m;
   })();
 }
-function rn(e) {
-  const n = Te(), r = i(() => e.item), u = i(() => e.selected), t = i(() => e.editable), y = i(() => e.viewportScale), S = i(() => e.viewport ?? {
+function ln(e) {
+  const t = _e(), r = l(() => e.item), u = l(() => e.selected), o = l(() => e.editable), i = l(() => e.viewportScale), x = l(() => e.viewport ?? {
     x: 0,
     y: 0,
     scale: 1
-  }), j = i(() => e.projection), L = i(() => e.preview), G = i(() => e.onPreviewGeometry), T = i(() => e.onSelect), p = i(() => e.onContextMenu), J = i(() => e.onCommitMove), _ = Ke({
+  }), z = l(() => e.projection), O = l(() => e.preview), B = l(() => e.onPreviewGeometry), D = l(() => e.onSelect), p = l(() => e.onContextMenu), Y = l(() => e.onCommitMove), E = Me({
     value: () => r().name,
     singleLine: !0,
-    onCommit: (m) => e.onUpdate?.(r().id, {
-      name: m
+    onCommit: (d) => e.onUpdate?.(r().id, {
+      name: d
     })
   });
-  Le(() => {
-    const m = e.textEditorRegistry?.register(r().id, _);
-    $e(() => m?.());
+  fe(() => {
+    const d = e.textEditorRegistry?.register(r().id, E);
+    ye(() => d?.());
   });
-  const H = Fe({
-    viewportScale: y,
+  const L = Le({
+    viewportScale: i,
     readPosition: () => ({
       x: r().x,
       y: r().y
@@ -675,48 +757,52 @@ function rn(e) {
       width: r().width,
       height: r().height
     }),
-    onCommitMove: (m) => J()(r().id, m),
-    onPreviewMove: (m) => G()?.({
+    onCommitMove: (d) => Y()(r().id, d),
+    onPreviewMove: (d) => B()?.({
       kind: "background_layer",
       id: r().id,
-      ...m
+      ...d
     }),
-    onPreviewEnd: () => G()?.(null)
-  }), E = O(() => {
-    const m = r(), l = Ie(L(), "background_layer", m.id);
-    return je({
-      geometry: De({
-        preview: l,
-        position: H.position(),
-        width: m.width,
-        height: m.height
+    onPreviewEnd: () => B()?.(null)
+  }), C = j(() => {
+    const d = r(), T = Se(O(), "background_layer", d.id);
+    return ze({
+      geometry: Ee({
+        preview: T,
+        position: L.position(),
+        width: d.width,
+        height: d.height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: x(),
+      projection: z()
     });
-  }), P = O(() => ({
-    ...pe(E()),
+  }), G = j(() => z() === "screen" ? Math.max(x().scale, 1e-3) : 1), q = j(() => ({
+    ...pe(C()),
     "z-index": `${r().z_index}`,
-    ...Me(r())
-  })), U = (m) => {
-    !t() || m.button !== 0 || m.target instanceof Element && m.target.closest(".workbench-background-region__label, .workbench-background-region__toolbar, .workbench-layer-resize") || (T()(r().id), H.beginDrag(m));
+    "--workbench-layer-control-inverse-scale": `${1 / C().scale}`,
+    "--workbench-region-content-scale": `${G()}`,
+    "--workbench-region-content-inverse-scale": `${1 / G()}`,
+    ...Ce(r())
+  })), g = (d) => {
+    !o() || d.button !== 0 || d.target instanceof Element && d.target.closest(".workbench-background-region__label, .workbench-background-region__toolbar, .workbench-layer-resize") || (D()(r().id), L.beginDrag(d));
   };
   return (() => {
-    var m = Rt(), l = m.firstChild, v = l.firstChild;
-    m.$$contextmenu = (a) => {
-      t() && (a.preventDefault(), a.stopPropagation(), T()(r().id), p()?.(a, r()));
-    }, m.addEventListener("focus", () => t() && T()(r().id)), m.$$pointerdown = U, le(v, "compositionend", _.handleCompositionEnd), le(v, "compositionstart", _.handleCompositionStart), le(v, "keydown", _.handleKeyDown, !0), le(v, "blur", _.handleBlur), le(v, "focus", _.handleFocus), v.$$pointerdown = (a) => {
-      a.stopPropagation(), T()(r().id);
+    var d = Pt(), T = d.firstChild, m = T.firstChild, c = T.nextSibling;
+    d.$$contextmenu = (n) => {
+      o() && (n.preventDefault(), n.stopPropagation(), D()(r().id), p()?.(n, r()));
+    }, d.addEventListener("focus", () => o() && D()(r().id)), d.$$pointerdown = g, U(m, "compositionend", E.handleCompositionEnd), U(m, "compositionstart", E.handleCompositionStart), U(m, "keydown", E.handleKeyDown, !0), U(m, "blur", E.handleBlur), U(m, "focus", E.handleFocus), m.$$pointerdown = (n) => {
+      n.stopPropagation(), D()(r().id);
     };
-    var d = _.bind;
-    return typeof d == "function" ? ge(d, v) : _.bind = v, F((a) => {
-      var M = {
+    var h = E.bind;
+    return typeof h == "function" ? se(h, m) : E.bind = m, c.$$pointerdown = g, k(c, w(Ge, {})), P((n) => {
+      var F = {
         "is-selected": u(),
-        "is-editable": t(),
-        "is-transforming": H.isDragging(),
+        "is-editing": E.isFocused(),
+        "is-editable": o(),
+        "is-transforming": L.isDragging(),
         [`is-material-${r().material}`]: !0
-      }, s = t() ? "true" : void 0, h = r().id, f = P(), w = t() ? 0 : void 0, k = !r().name.trim() && !_.isFocused(), D = t() ? "plaintext-only" : !1, q = n("regionName");
-      return a.e = He(m, M, a.e), s !== a.t && c(m, "data-floe-canvas-interactive", a.t = s), h !== a.a && c(m, "data-wb-object-id", a.a = h), a.o = ye(m, f, a.o), w !== a.i && c(m, "tabindex", a.i = w), k !== a.n && l.classList.toggle("is-empty", a.n = k), D !== a.s && c(v, "contenteditable", a.s = D), q !== a.h && c(v, "aria-label", a.h = q), a;
+      }, X = o() ? "true" : void 0, I = r().id, S = q(), te = o() ? 0 : void 0, ne = !r().name.trim() && !E.isFocused(), ae = o() ? "plaintext-only" : !1, _ = t("regionName"), J = t("regionPlaceholder"), ce = t("moveRegion");
+      return n.e = it(d, F, n.e), X !== n.t && s(d, "data-floe-canvas-interactive", n.t = X), I !== n.a && s(d, "data-wb-object-id", n.a = I), n.o = he(d, S, n.o), te !== n.i && s(d, "tabindex", n.i = te), ne !== n.n && T.classList.toggle("is-empty", n.n = ne), ae !== n.s && s(m, "contenteditable", n.s = ae), _ !== n.h && s(m, "aria-label", n.h = _), J !== n.r && s(m, "data-placeholder", n.r = J), ce !== n.d && s(c, "aria-label", n.d = ce), n;
     }, {
       e: void 0,
       t: void 0,
@@ -725,417 +811,499 @@ function rn(e) {
       i: void 0,
       n: void 0,
       s: void 0,
-      h: void 0
-    }), m;
+      h: void 0,
+      r: void 0,
+      d: void 0
+    }), d;
   })();
 }
-function an(e) {
-  const n = Te(), [r, u] = de(), t = i(() => e.item), y = i(() => e.viewportScale), S = i(() => e.viewport ?? {
+function dn(e) {
+  const t = _e(), r = Ne(We), [u, o] = re(), i = l(() => e.item), x = () => e.textEditorRegistry?.get(i().id), z = l(() => e.viewportScale), O = l(() => e.viewport ?? {
     x: 0,
     y: 0,
     scale: 1
-  }), j = i(() => e.projection), L = i(() => e.preview), G = i(() => e.textEditorRegistry), T = i(() => e.onPreviewGeometry), p = i(() => e.onCommitMove), J = i(() => e.onCommitResize), _ = i(() => e.onUpdate), H = i(() => e.onDelete);
-  let E, P, U;
-  const [m, l] = de(""), [v, d] = de(!1), [a, M] = de(!1), s = O(() => Ge.find((x) => x.fontFamily === t().font_family) ?? Ge[0]), h = Fe({
-    viewportScale: y,
+  }), B = l(() => e.projection), D = l(() => e.preview), p = l(() => e.onPreviewGeometry), Y = l(() => e.onCommitMove), E = l(() => e.onCommitResize), L = l(() => e.onUpdate), C = l(() => e.onDelete);
+  let G, q;
+  const [g, d] = re(!1), [T, m] = re(""), [c, h] = re(!1), n = j(() => Ie.find((_) => _.fontFamily === i().font_family) ?? Ie[0]), F = Le({
+    viewportScale: z,
     readPosition: () => ({
-      x: t().x,
-      y: t().y
+      x: i().x,
+      y: i().y
     }),
     readGeometry: () => ({
-      width: t().width,
-      height: t().height
+      width: i().width,
+      height: i().height
     }),
-    onCommitMove: (x) => p()(t().id, x),
-    onPreviewMove: (x) => T()?.({
+    onCommitMove: (_) => Y()(i().id, _),
+    onPreviewMove: (_) => p()?.({
       kind: "annotation",
-      id: t().id,
-      ...x
+      id: i().id,
+      ..._
     }),
-    onPreviewEnd: () => T()?.(null)
-  }), f = Ue({
-    viewportScale: y,
+    onPreviewEnd: () => p()?.(null)
+  }), X = Ye({
+    viewportScale: z,
     readSize: () => ({
-      width: t().width,
-      height: t().height
+      width: i().width,
+      height: i().height
     }),
-    minWidth: Jt,
-    minHeight: qt,
-    onCommitResize: (x) => J()(t().id, x),
-    onPreviewResize: (x) => T()?.({
+    minWidth: Zt,
+    minHeight: en,
+    onCommitResize: (_) => E()(i().id, _),
+    onPreviewResize: (_) => p()?.({
       kind: "annotation",
-      id: t().id,
-      x: t().x,
-      y: t().y,
-      width: x.width,
-      height: x.height
+      id: i().id,
+      x: i().x,
+      y: i().y,
+      width: _.width,
+      height: _.height
     }),
-    onPreviewEnd: () => T()?.(null)
-  }), w = O(() => {
-    const x = t(), V = Ie(L(), "annotation", x.id);
-    return je({
-      geometry: De({
-        preview: V,
-        position: h.position(),
-        width: f.size().width,
-        height: f.size().height
+    onPreviewEnd: () => p()?.(null)
+  }), I = j(() => {
+    const _ = i(), J = Se(D(), "annotation", _.id);
+    return ze({
+      geometry: Ee({
+        preview: J,
+        position: F.position(),
+        width: X.size().width,
+        height: X.size().height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: O(),
+      projection: B()
     });
-  }), k = O(() => ({
-    ...pe(w()),
-    "z-index": `${t().z_index}`,
-    "--workbench-layer-control-inverse-scale": `${1 / Math.max(w().scale, 1e-3)}`
-  })), D = () => Zt(["left", "center", "right"], t().align), q = (x) => {
-    if (!Number.isFinite(x)) return;
-    const V = tn(x);
-    l(String(V)), _()(t().id, {
-      font_size: V
+  }), S = j(() => ({
+    ...pe(I()),
+    "z-index": `${i().z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(I().scale, 1e-3)}`
+  })), te = () => nn(["left", "center", "right"], i().align), ne = (_) => {
+    if (!Number.isFinite(_)) return;
+    const J = rn(_);
+    m(String(J)), L()(i().id, {
+      font_size: J
     });
-  }, ee = () => {
-    const x = m().trim(), V = Number(x);
-    if (x.length > 0 && Number.isFinite(V)) {
-      q(V);
+  }, ae = () => {
+    const _ = T().trim(), J = Number(_);
+    if (_.length > 0 && Number.isFinite(J)) {
+      ne(J);
       return;
     }
-    l(String(t().font_size));
+    m(String(i().font_size));
   };
-  return Le(() => {
-    typeof document < "u" && document.activeElement === E || l(String(t().font_size));
-  }), nt(v, () => P, () => d(!1)), nt(a, () => U, () => M(!1)), (() => {
-    var x = Lt(), V = x.firstChild, te = V.nextSibling;
-    return ge(u, x), C(x, b(Ae, {
+  return fe(() => {
+    typeof document < "u" && document.activeElement === G || m(String(i().font_size));
+  }), on(c, () => q, () => h(!1)), (() => {
+    var _ = Mt(), J = _.firstChild, ce = J.nextSibling, ve = ce.nextSibling;
+    return se(o, _), U(ce, "pointerdown", F.beginDrag, !0), k(ce, w(Ge, {})), k(_, w(Ae, {
+      reservedSpace: {
+        top: 64,
+        narrowTop: 106,
+        bottom: 86
+      },
       get anchor() {
-        return r();
+        return u();
       },
       get revision() {
-        return k();
+        return S();
       },
       class: "workbench-object-tools",
       get children() {
-        var B = Tt(), ne = B.firstChild, ve = ne.nextSibling, ie = ve.firstChild, I = ie.firstChild, be = I.nextSibling, he = ve.nextSibling, we = he.firstChild, oe = we.nextSibling, $ = oe.nextSibling, X = he.nextSibling, re = X.firstChild, se = X.nextSibling, ae = se.nextSibling;
-        B.$$click = ke, B.$$pointerdown = fe, ne.$$click = Q, le(ne, "pointerdown", h.beginDrag, !0), C(ne, b(it, {
-          class: "w-3.5 h-3.5"
-        })), ve.$$click = ke, ve.$$pointerdown = fe;
-        var z = P;
-        typeof z == "function" ? ge(z, ve) : P = ve, ie.$$click = (o) => {
-          Q(o), d((g) => !g);
-        }, ie.$$pointerdown = K, C(be, () => n(s().id)), C(ie, b(vt, {
-          class: "workbench-text-font-trigger__icon"
-        }), null), C(ve, b(ue, {
-          get when() {
-            return v();
+        return w(Fe, {
+          kind: "text",
+          onInsertEmoji: (v) => x()?.insertTextAtSelection(v),
+          get moreOpen() {
+            return g();
           },
-          get children() {
-            var o = Pt();
-            return C(o, b(me, {
-              each: Ge,
-              children: (g) => (() => {
-                var R = It(), W = R.firstChild, ce = W.nextSibling;
-                return R.$$click = (Y) => {
-                  Q(Y), _()(t().id, {
-                    font_family: g.fontFamily,
-                    font_weight: g.fontWeight
-                  }), d(!1);
-                }, R.$$pointerdown = K, C(ce, () => n(g.id)), F((Y) => {
-                  var Ce = t().font_family === g.fontFamily, Se = n("useFont", n(g.id)), _e = n("fontPreview", n(g.id)), Ee = t().font_family === g.fontFamily, ze = g.fontFamily, Re = `${g.fontWeight}`;
-                  return Ce !== Y.e && c(R, "aria-checked", Y.e = Ce), Se !== Y.t && c(R, "aria-label", Y.t = Se), _e !== Y.a && c(R, "title", Y.a = _e), Ee !== Y.o && R.classList.toggle("is-active", Y.o = Ee), ze !== Y.i && Pe(W, "font-family", Y.i = ze), Re !== Y.n && Pe(W, "font-weight", Y.n = Re), Y;
+          onMoreClose: () => d(!1),
+          get more() {
+            return [(() => {
+              var v = It(), b = v.firstChild, y = b.firstChild, W = y.nextSibling;
+              v.$$click = Oe, v.$$pointerdown = je;
+              var H = q;
+              return typeof H == "function" ? se(H, v) : q = v, b.$$click = (f) => {
+                $e(f), h((K) => !K);
+              }, b.$$pointerdown = Q, k(W, () => t(n().id)), k(b, w(ht, {
+                class: "workbench-text-font-trigger__icon"
+              }), null), k(v, w(oe, {
+                get when() {
+                  return c();
+                },
+                get children() {
+                  var f = Lt();
+                  return k(f, w(de, {
+                    each: Ie,
+                    children: (K) => (() => {
+                      var Z = Ot(), $ = Z.firstChild, ie = $.nextSibling;
+                      return Z.$$click = (N) => {
+                        $e(N), L()(i().id, {
+                          font_family: K.fontFamily,
+                          font_weight: K.fontWeight
+                        }), h(!1);
+                      }, Z.$$pointerdown = Q, k(ie, () => t(K.id)), P((N) => {
+                        var le = i().font_family === K.fontFamily, ee = t("useFont", t(K.id)), ke = t("fontPreview", t(K.id)), a = i().font_family === K.fontFamily, M = K.fontFamily, R = `${K.fontWeight}`;
+                        return le !== N.e && s(Z, "aria-checked", N.e = le), ee !== N.t && s(Z, "aria-label", N.t = ee), ke !== N.a && s(Z, "title", N.a = ke), a !== N.o && Z.classList.toggle("is-active", N.o = a), M !== N.i && xe($, "font-family", N.i = M), R !== N.n && xe($, "font-weight", N.n = R), N;
+                      }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0,
+                        i: void 0,
+                        n: void 0
+                      }), Z;
+                    })()
+                  })), P(() => s(f, "aria-label", t("boldFont"))), f;
+                }
+              }), null), P((f) => {
+                var K = t("chooseFont"), Z = c(), $ = t("chooseFont"), ie = n().fontFamily, N = `${n().fontWeight}`;
+                return K !== f.e && s(b, "aria-label", f.e = K), Z !== f.t && s(b, "aria-expanded", f.t = Z), $ !== f.a && s(b, "title", f.a = $), ie !== f.o && xe(y, "font-family", f.o = ie), N !== f.i && xe(y, "font-weight", f.i = N), f;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0
+              }), v;
+            })(), (() => {
+              var v = jt(), b = v.firstChild, y = b.nextSibling, W = y.nextSibling;
+              v.$$click = Oe, v.$$pointerdown = je, b.$$click = (f) => {
+                $e(f), ne(i().font_size - 1);
+              }, b.$$pointerdown = Q, k(b, w(gt, {
+                class: "w-3 h-3"
+              })), y.$$keydown = (f) => {
+                f.key === "Enter" && (f.preventDefault(), ae(), f.currentTarget.blur());
+              }, y.addEventListener("blur", ae), y.$$input = (f) => m(f.currentTarget.value), y.$$click = Oe, y.$$pointerdown = je;
+              var H = G;
+              return typeof H == "function" ? se(H, y) : G = y, W.$$click = (f) => {
+                $e(f), ne(i().font_size + 1);
+              }, W.$$pointerdown = Q, k(W, w(wt, {
+                class: "w-3 h-3"
+              })), P((f) => {
+                var K = t("textSize"), Z = t("decreaseSize"), $ = t("decreaseSize"), ie = t("sizeValue"), N = t("increaseSize"), le = t("increaseSize");
+                return K !== f.e && s(v, "aria-label", f.e = K), Z !== f.t && s(b, "aria-label", f.t = Z), $ !== f.a && s(b, "title", f.a = $), ie !== f.o && s(y, "aria-label", f.o = ie), N !== f.i && s(W, "aria-label", f.i = N), le !== f.n && s(W, "title", f.n = le), f;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0,
+                n: void 0
+              }), P(() => y.value = T()), v;
+            })(), w(de, {
+              each: kt,
+              children: (v) => (() => {
+                var b = Dt();
+                return b.$$click = (y) => {
+                  $e(y), L()(i().id, {
+                    color: v
+                  });
+                }, b.$$pointerdown = Q, xe(b, "background", v), P((y) => {
+                  var W = t("textColor", v), H = i().color === v;
+                  return W !== y.e && s(b, "aria-label", y.e = W), H !== y.t && b.classList.toggle("is-active", y.t = H), y;
                 }, {
                   e: void 0,
-                  t: void 0,
-                  a: void 0,
-                  o: void 0,
-                  i: void 0,
-                  n: void 0
-                }), R;
+                  t: void 0
+                }), b;
               })()
-            })), F(() => c(o, "aria-label", n("boldFont"))), o;
-          }
-        }), null), he.$$click = ke, he.$$pointerdown = fe, we.$$click = (o) => {
-          Q(o), q(t().font_size - 1);
-        }, we.$$pointerdown = K, C(we, b(ht, {
-          class: "w-3 h-3"
-        })), oe.$$keydown = (o) => {
-          o.key === "Enter" && (o.preventDefault(), ee(), o.currentTarget.blur());
-        }, oe.addEventListener("blur", ee), oe.$$input = (o) => l(o.currentTarget.value), oe.$$click = ke, oe.$$pointerdown = fe;
-        var A = E;
-        typeof A == "function" ? ge(A, oe) : E = oe, $.$$click = (o) => {
-          Q(o), q(t().font_size + 1);
-        }, $.$$pointerdown = K, C($, b(wt, {
-          class: "w-3 h-3"
-        })), C(B, b(me, {
-          each: yt,
-          children: (o) => (() => {
-            var g = jt();
-            return g.$$click = (R) => {
-              Q(R), _()(t().id, {
-                color: o
-              });
-            }, g.$$pointerdown = K, Pe(g, "background", o), F((R) => {
-              var W = n("textColor", o), ce = t().color === o;
-              return W !== R.e && c(g, "aria-label", R.e = W), ce !== R.t && g.classList.toggle("is-active", R.t = ce), R;
-            }, {
-              e: void 0,
-              t: void 0
-            }), g;
-          })()
-        }), X), X.$$click = ke, X.$$pointerdown = fe;
-        var Z = U;
-        return typeof Z == "function" ? ge(Z, X) : U = X, re.$$click = (o) => {
-          Q(o), M((g) => !g);
-        }, re.$$pointerdown = K, C(X, b(ue, {
-          get when() {
-            return a();
+            }), (() => {
+              var v = we();
+              return v.$$click = () => L()(i().id, {
+                align: te()
+              }), v.$$pointerdown = Q, k(v, () => t(i().align)), v;
+            })()];
+          },
+          get actions() {
+            return [w(oe, {
+              when: r,
+              get children() {
+                var v = we();
+                return v.$$click = () => r?.duplicate({
+                  kind: "annotation",
+                  id: i().id
+                }), v.$$pointerdown = Q, k(v, w(ue, {
+                  name: "copy"
+                })), P((b) => {
+                  var y = t("duplicate"), W = t("duplicate");
+                  return y !== b.e && s(v, "aria-label", b.e = y), W !== b.t && s(v, "title", b.t = W), b;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), v;
+              }
+            }), (() => {
+              var v = He();
+              return v.$$click = () => C()(i().id), v.$$pointerdown = Q, k(v, w(ue, {
+                name: "trash"
+              })), P(() => s(v, "aria-label", t("deleteText"))), v;
+            })()];
           },
           get children() {
-            var o = Mt();
-            return C(o, b(me, {
-              each: ft,
-              children: (g) => (() => {
-                var R = pt();
-                return R.$$click = (W) => {
-                  Q(W), G()?.get(t().id)?.insertTextAtSelection(g), M(!1);
-                }, R.$$pointerdown = K, C(R, g), F((W) => {
-                  var ce = n("useEmoji", g), Y = n("useEmoji", g);
-                  return ce !== W.e && c(R, "aria-label", W.e = ce), Y !== W.t && c(R, "title", W.t = Y), W;
+            return [(() => {
+              var v = Tt(), b = v.firstChild;
+              return v.addEventListener("change", (y) => {
+                if (y.currentTarget.value === "more") {
+                  d(!g());
+                  return;
+                }
+                const W = {
+                  title: 48,
+                  heading: 30,
+                  body: 18,
+                  caption: 14
+                }, H = y.currentTarget.value;
+                L()(i().id, {
+                  font_size: W[H],
+                  font_weight: H === "title" || H === "heading" ? 560 : 400
+                });
+              }), k(v, w(de, {
+                each: ["title", "heading", "body", "caption"],
+                children: (y) => (() => {
+                  var W = Ft();
+                  return W.value = y, k(W, () => t(y)), W;
+                })()
+              }), b), k(b, () => t("more")), P(() => s(v, "aria-label", t("typography"))), P(() => v.value = i().font_size >= 40 ? "title" : i().font_size >= 24 ? "heading" : i().font_size >= 16 ? "body" : "caption"), v;
+            })(), w(de, {
+              each: ["left", "center"],
+              children: (v) => (() => {
+                var b = we();
+                return b.$$click = () => L()(i().id, {
+                  align: v
+                }), b.$$pointerdown = Q, k(b, w(ue, {
+                  name: v
+                })), P((y) => {
+                  var W = t(v), H = i().align === v;
+                  return W !== y.e && s(b, "aria-label", y.e = W), H !== y.t && s(b, "aria-pressed", y.t = H), y;
                 }, {
                   e: void 0,
                   t: void 0
-                }), R;
+                }), b;
               })()
-            })), F(() => c(o, "aria-label", n("emoji"))), o;
+            }), w(mt, {})];
           }
-        }), null), se.$$click = (o) => {
-          Q(o), _()(t().id, {
-            align: D()
-          });
-        }, se.$$pointerdown = K, C(se, () => t().align), ae.$$click = (o) => {
-          Q(o), H()(t().id);
-        }, ae.$$pointerdown = K, C(ae, b(Be, {
-          class: "w-3.5 h-3.5"
-        })), F((o) => {
-          var g = n("moveText"), R = n("moveText"), W = n("chooseFont"), ce = v(), Y = n("chooseFont"), Ce = s().fontFamily, Se = `${s().fontWeight}`, _e = n("textSize"), Ee = n("decreaseSize"), ze = n("decreaseSize"), Re = n("sizeValue"), Ve = n("increaseSize"), Je = n("increaseSize"), qe = n("insertEmoji"), Qe = a(), Ze = n("insertEmoji"), et = n("deleteText");
-          return g !== o.e && c(ne, "aria-label", o.e = g), R !== o.t && c(ne, "title", o.t = R), W !== o.a && c(ie, "aria-label", o.a = W), ce !== o.o && c(ie, "aria-expanded", o.o = ce), Y !== o.i && c(ie, "title", o.i = Y), Ce !== o.n && Pe(I, "font-family", o.n = Ce), Se !== o.s && Pe(I, "font-weight", o.s = Se), _e !== o.h && c(he, "aria-label", o.h = _e), Ee !== o.r && c(we, "aria-label", o.r = Ee), ze !== o.d && c(we, "title", o.d = ze), Re !== o.l && c(oe, "aria-label", o.l = Re), Ve !== o.u && c($, "aria-label", o.u = Ve), Je !== o.c && c($, "title", o.c = Je), qe !== o.w && c(re, "aria-label", o.w = qe), Qe !== o.m && c(re, "aria-expanded", o.m = Qe), Ze !== o.f && c(re, "title", o.f = Ze), et !== o.y && c(ae, "aria-label", o.y = et), o;
-        }, {
-          e: void 0,
-          t: void 0,
-          a: void 0,
-          o: void 0,
-          i: void 0,
-          n: void 0,
-          s: void 0,
-          h: void 0,
-          r: void 0,
-          d: void 0,
-          l: void 0,
-          u: void 0,
-          c: void 0,
-          w: void 0,
-          m: void 0,
-          f: void 0,
-          y: void 0
-        }), F(() => oe.value = m()), B;
+        });
       }
-    }), te), le(te, "pointerdown", f.beginResize, !0), F((B) => {
-      var ne = t().id, ve = k(), ie = n("resizeText");
-      return ne !== B.e && c(x, "data-wb-object-id", B.e = ne), B.t = ye(x, ve, B.t), ie !== B.a && c(te, "aria-label", B.a = ie), B;
+    }), ve), U(ve, "pointerdown", X.beginResize, !0), P((v) => {
+      var b = i().id, y = S(), W = t("moveText"), H = t("resizeText");
+      return b !== v.e && s(_, "data-wb-object-id", v.e = b), v.t = he(_, y, v.t), W !== v.a && s(ce, "aria-label", v.a = W), H !== v.o && s(ve, "aria-label", v.o = H), v;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
-    }), x;
+      a: void 0,
+      o: void 0
+    }), _;
   })();
 }
-function cn(e) {
-  const n = Te(), [r, u] = de(), t = i(() => e.item), y = i(() => e.viewportScale), S = i(() => e.viewport ?? {
+function sn(e) {
+  const t = _e(), r = Ne(We), [u, o] = re(), i = l(() => e.item), x = () => e.textEditorRegistry?.get(i().id), z = () => x()?.isFocused() ?? !1, O = l(() => e.viewportScale), B = l(() => e.viewport ?? {
     x: 0,
     y: 0,
     scale: 1
-  }), j = i(() => e.projection), L = i(() => e.preview), G = i(() => e.onPreviewGeometry), T = i(() => e.onCommitResize), p = i(() => e.onUpdate), J = i(() => e.onDelete), _ = Ue({
-    viewportScale: y,
+  }), D = l(() => e.projection), p = l(() => e.preview), Y = l(() => e.onPreviewGeometry), E = l(() => e.onCommitResize), L = l(() => e.onUpdate), C = l(() => e.onDelete), G = Ye({
+    viewportScale: O,
     readSize: () => ({
-      width: t().width,
-      height: t().height
+      width: i().width,
+      height: i().height
     }),
-    minWidth: Ut,
-    minHeight: Vt,
-    onCommitResize: (P) => T()(t().id, P),
-    onPreviewResize: (P) => G()?.({
+    minWidth: Jt,
+    minHeight: Qt,
+    onCommitResize: (d) => E()(i().id, d),
+    onPreviewResize: (d) => Y()?.({
       kind: "background_layer",
-      id: t().id,
-      x: t().x,
-      y: t().y,
-      width: P.width,
-      height: P.height
+      id: i().id,
+      x: i().x,
+      y: i().y,
+      width: d.width,
+      height: d.height
     }),
-    onPreviewEnd: () => G()?.(null)
-  }), H = O(() => {
-    const P = t(), U = Ie(L(), "background_layer", P.id);
-    return je({
-      geometry: De({
-        preview: U,
+    onPreviewEnd: () => Y()?.(null)
+  }), q = j(() => {
+    const d = i(), T = Se(p(), "background_layer", d.id);
+    return ze({
+      geometry: Ee({
+        preview: T,
         position: {
-          x: P.x,
-          y: P.y
+          x: d.x,
+          y: d.y
         },
-        width: _.size().width,
-        height: _.size().height
+        width: G.size().width,
+        height: G.size().height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: B(),
+      projection: D()
     });
-  }), E = O(() => ({
-    ...pe(H()),
-    "z-index": `${t().z_index}`,
-    "--workbench-layer-control-inverse-scale": `${1 / Math.max(H().scale, 1e-3)}`,
-    ...Me(t())
+  }), g = j(() => ({
+    ...pe(q()),
+    "z-index": `${i().z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(q().scale, 1e-3)}`,
+    ...Ce(i())
   }));
   return (() => {
-    var P = Wt(), U = P.firstChild, m = U.nextSibling;
-    return ge(u, P), C(P, b(Ae, {
+    var d = At(), T = d.firstChild, m = T.nextSibling;
+    return se(o, d), k(d, w(Ae, {
+      reservedSpace: {
+        top: 64,
+        narrowTop: 106,
+        bottom: 86
+      },
       get anchor() {
-        return r();
+        return u();
       },
       get revision() {
-        return E();
+        return g();
+      },
+      get topOffset() {
+        return be(() => !!(i().name.trim() || z()))() ? 34 * B().scale : 0;
       },
       class: "workbench-object-tools",
       get children() {
-        var l = Ot(), v = l.firstChild, d = v.nextSibling, a = d.nextSibling, M = a.firstChild, s = a.nextSibling;
-        return l.$$click = ke, l.$$pointerdown = fe, v.$$click = () => e.textEditorRegistry?.get(t().id)?.focus(), v.$$pointerdown = K, C(v, () => n(t().name.trim() ? "editName" : "addName")), C(l, b(ue, {
-          get when() {
-            return t().name.trim();
+        return w(Fe, {
+          kind: "region",
+          onInsertEmoji: (c) => x()?.insertTextAtSelection(c),
+          materials: yt,
+          get material() {
+            return i().material;
+          },
+          materialLabel: (c) => t("useRegionMaterial", t(c)),
+          preview: (c) => (() => {
+            var h = Nt(), n = h.firstChild;
+            return De(n, `workbench-region-material__sample is-material-${c}`), P((F) => he(n, Ce(i()), F)), h;
+          })(),
+          onMaterial: (c) => L()(i().id, {
+            material: c
+          }),
+          get palette() {
+            return (() => {
+              var c = lt();
+              return k(c, w(de, {
+                each: ct,
+                children: (h) => (() => {
+                  var n = Gt(), F = n.firstChild, X = F.firstChild;
+                  return n.$$click = () => L()(i().id, {
+                    fill: h.fill
+                  }), n.$$pointerdown = Q, k(n, w(ot, {}), null), P((I) => {
+                    var S = t("regionColor", t(h.color)), te = i().fill === h.fill, ne = `workbench-region-material__sample is-material-${i().material}`, ae = Ce({
+                      ...i(),
+                      fill: h.fill
+                    });
+                    return S !== I.e && s(n, "aria-label", I.e = S), te !== I.t && s(n, "aria-pressed", I.t = te), ne !== I.a && De(X, I.a = ne), I.o = he(X, ae, I.o), I;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0
+                  }), n;
+                })()
+              })), c;
+            })();
+          },
+          get more() {
+            return [(() => {
+              var c = Ht(), h = c.firstChild;
+              return k(c, () => t("opacity"), h), h.$$input = (n) => L()(i().id, {
+                opacity: Number(n.currentTarget.value) / 100
+              }), P(() => s(h, "aria-label", t("opacity"))), P(() => h.value = Math.round(i().opacity * 100)), c;
+            })(), (() => {
+              var c = we();
+              return c.$$click = () => L()(i().id, {
+                name: ""
+              }), c.$$pointerdown = Q, k(c, () => t("clearName")), P(() => c.disabled = !i().name.trim()), c;
+            })()];
+          },
+          get actions() {
+            return [w(oe, {
+              when: r,
+              get children() {
+                var c = we();
+                return c.$$click = () => r?.duplicate({
+                  kind: "background_layer",
+                  id: i().id
+                }), c.$$pointerdown = Q, k(c, w(ue, {
+                  name: "copy"
+                })), P((h) => {
+                  var n = t("duplicate"), F = t("duplicate");
+                  return n !== h.e && s(c, "aria-label", h.e = n), F !== h.t && s(c, "title", h.t = F), h;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), c;
+              }
+            }), (() => {
+              var c = He();
+              return c.$$click = () => C()(i().id), c.$$pointerdown = Q, k(c, w(ue, {
+                name: "trash"
+              })), P(() => s(c, "aria-label", t("deleteRegion"))), c;
+            })()];
           },
           get children() {
-            var h = Dt();
-            return h.$$click = () => p()(t().id, {
-              name: ""
-            }), h.$$pointerdown = K, C(h, () => n("clearName")), h;
+            var c = Wt(), h = c.firstChild;
+            return c.$$click = () => x()?.focus(), c.$$pointerdown = Q, k(c, w(ue, {
+              name: "text"
+            }), h), k(h, () => t(i().name.trim() ? "regionName" : "addName")), c;
           }
-        }), d), C(l, b(me, {
-          each: gt,
-          children: (h) => (() => {
-            var f = Nt();
-            return f.$$click = (w) => {
-              Q(w), p()(t().id, {
-                fill: h
-              });
-            }, f.$$pointerdown = K, F((w) => {
-              var k = n("regionColor", h), D = `workbench-layer-swatch workbench-layer-swatch--region is-material-${t().material}`, q = t().fill === h, ee = t().fill === h, x = Me({
-                ...t(),
-                fill: h
-              });
-              return k !== w.e && c(f, "aria-label", w.e = k), D !== w.t && tt(f, w.t = D), q !== w.a && f.classList.toggle("is-active", w.a = q), ee !== w.o && c(f, "aria-pressed", w.o = ee), w.i = ye(f, x, w.i), w;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0,
-              o: void 0,
-              i: void 0
-            }), f;
-          })()
-        }), d), d.$$click = ke, d.$$pointerdown = fe, C(d, b(me, {
-          each: bt,
-          children: (h) => (() => {
-            var f = Ft(), w = f.firstChild, k = w.nextSibling;
-            return f.$$click = (D) => {
-              Q(D), p()(t().id, {
-                material: h
-              });
-            }, f.$$pointerdown = K, tt(w, `workbench-region-material__sample is-material-${h}`), C(k, () => n(h)), F((D) => {
-              var q = n("useRegionMaterial", n(h)), ee = n(h), x = t().material === h, V = {
-                "is-active": t().material === h,
-                [`is-${h}`]: !0
-              }, te = Me(t());
-              return q !== D.e && c(f, "aria-label", D.e = q), ee !== D.t && c(f, "title", D.t = ee), x !== D.a && c(f, "aria-pressed", D.a = x), D.o = He(f, V, D.o), D.i = ye(w, te, D.i), D;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0,
-              o: void 0,
-              i: void 0
-            }), f;
-          })()
-        })), a.$$click = (h) => {
-          Q(h), p()(t().id, {
-            opacity: t().opacity >= 0.88 ? 0.42 : t().opacity + 0.18
-          });
-        }, a.$$pointerdown = K, C(a, () => Math.round(t().opacity * 100), M), s.$$click = (h) => {
-          Q(h), J()(t().id);
-        }, s.$$pointerdown = K, C(s, b(Be, {
-          class: "w-3.5 h-3.5"
-        })), F((h) => {
-          var f = n("regionMaterial"), w = n("deleteRegion");
-          return f !== h.e && c(d, "aria-label", h.e = f), w !== h.t && c(s, "aria-label", h.t = w), h;
-        }, {
-          e: void 0,
-          t: void 0
-        }), l;
+        });
       }
-    }), m), le(m, "pointerdown", _.beginResize, !0), F((l) => {
-      var v = t().id, d = E(), a = n("resizeRegion");
-      return v !== l.e && c(P, "data-wb-object-id", l.e = v), l.t = ye(P, d, l.t), a !== l.a && c(m, "aria-label", l.a = a), l;
+    }), m), U(m, "pointerdown", G.beginResize, !0), P((c) => {
+      var h = i().id, n = g(), F = t("resizeRegion");
+      return h !== c.e && s(d, "data-wb-object-id", c.e = h), c.t = he(d, n, c.t), F !== c.a && s(m, "aria-label", c.a = F), c;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), P;
+    }), d;
   })();
 }
-function ln(e) {
-  const n = i(() => e.item), r = i(() => e.viewport), u = i(() => e.projection), t = i(() => e.preview), y = O(() => {
-    const j = n(), L = Ie(t(), "background_layer", j.id);
-    return je({
-      geometry: De({
-        preview: L,
+function un(e) {
+  const t = l(() => e.item), r = l(() => e.viewport), u = l(() => e.projection), o = l(() => e.preview), i = j(() => {
+    const z = t(), O = Se(o(), "background_layer", z.id);
+    return ze({
+      geometry: Ee({
+        preview: O,
         position: {
-          x: j.x,
-          y: j.y
+          x: z.x,
+          y: z.y
         },
-        width: j.width,
-        height: j.height
+        width: z.width,
+        height: z.height
       }),
       viewport: r(),
       projection: u()
     });
-  }), S = O(() => ({
-    ...pe(y()),
-    "--workbench-region-outline-scale": `${1 / Math.max(y().scale, 1e-3)}`,
-    ...Me(n())
+  }), x = j(() => ({
+    ...pe(i()),
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(i().scale, 1e-3)}`,
+    ...Ce(t())
   }));
   return (() => {
-    var j = Gt();
-    return F((L) => {
-      var G = !!e.selected, T = n().id, p = S();
-      return G !== L.e && j.classList.toggle("is-selected-region", L.e = G), T !== L.t && c(j, "data-wb-object-id", L.t = T), L.a = ye(j, p, L.a), L;
+    var z = Bt();
+    return P((O) => {
+      var B = `workbench-region-visibility-outline is-material-${t().material}`, D = !!e.selected, p = t().id, Y = x();
+      return B !== O.e && De(z, O.e = B), D !== O.t && z.classList.toggle("is-selected-region", O.t = D), p !== O.a && s(z, "data-wb-object-id", O.a = p), O.o = he(z, Y, O.o), O;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
-    }), j;
+      a: void 0,
+      o: void 0
+    }), z;
   })();
 }
-function sn(e) {
-  const n = O(() => Ye(e.items)), r = O(() => Xe(e.items).map((u) => u.id));
+function vn(e) {
+  const t = j(() => Xe(e.items)), r = j(() => Be(e.items).map((u) => u.id));
   return (() => {
-    var u = Ht();
-    return C(u, b(me, {
+    var u = Xt();
+    return k(u, w(de, {
       get each() {
         return r();
       },
-      children: (t) => {
-        const y = O(() => n().get(t) ?? null);
-        return b(ue, {
+      children: (o) => {
+        const i = j(() => t().get(o) ?? null);
+        return w(oe, {
           get when() {
-            return y();
+            return i();
           },
-          children: (S) => b(ln, {
+          children: (x) => w(un, {
             get item() {
-              return S();
+              return x();
             },
             get selected() {
-              return xe(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === t;
+              return be(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === o;
             },
             get viewport() {
               return e.viewport;
@@ -1152,26 +1320,26 @@ function sn(e) {
     })), u;
   })();
 }
-function Cn(e) {
-  const n = O(() => Ye(e.items)), r = O(() => Xe(e.items).map((u) => u.id));
+function pn(e) {
+  const t = j(() => Xe(e.items)), r = j(() => Be(e.items).map((u) => u.id));
   return (() => {
-    var u = At();
-    return C(u, b(me, {
+    var u = Yt();
+    return k(u, w(de, {
       get each() {
         return r();
       },
-      children: (t) => {
-        const y = O(() => n().get(t) ?? null);
-        return b(ue, {
+      children: (o) => {
+        const i = j(() => t().get(o) ?? null);
+        return w(oe, {
           get when() {
-            return y();
+            return i();
           },
-          children: (S) => b(rn, {
+          children: (x) => w(ln, {
             get item() {
-              return S();
+              return x();
             },
             get selected() {
-              return xe(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === t;
+              return be(() => e.selectedObject?.kind === "background_layer")() && e.selectedObject.id === o;
             },
             get editable() {
               return e.editable;
@@ -1209,35 +1377,35 @@ function Cn(e) {
           })
         });
       }
-    })), F((t) => {
-      var y = !!e.editable, S = !!e.filtered;
-      return y !== t.e && u.classList.toggle("is-editable", t.e = y), S !== t.t && u.classList.toggle("is-filtered-out", t.t = S), t;
+    })), P((o) => {
+      var i = !!e.editable, x = !!e.filtered;
+      return i !== o.e && u.classList.toggle("is-editable", o.e = i), x !== o.t && u.classList.toggle("is-filtered-out", o.t = x), o;
     }, {
       e: void 0,
       t: void 0
     }), u;
   })();
 }
-function Sn(e) {
-  const n = O(() => Ye(e.items)), r = O(() => Xe(e.items).map((u) => u.id));
+function En(e) {
+  const t = j(() => Xe(e.items)), r = j(() => Be(e.items).map((u) => u.id));
   return (() => {
-    var u = Bt();
-    return C(u, b(me, {
+    var u = Ut();
+    return k(u, w(de, {
       get each() {
         return r();
       },
-      children: (t) => {
-        const y = O(() => n().get(t) ?? null);
-        return b(ue, {
+      children: (o) => {
+        const i = j(() => t().get(o) ?? null);
+        return w(oe, {
           get when() {
-            return y();
+            return i();
           },
-          children: (S) => b(on, {
+          children: (x) => w(cn, {
             get item() {
-              return S();
+              return x();
             },
             get selected() {
-              return xe(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === t;
+              return be(() => e.selectedObject?.kind === "annotation")() && e.selectedObject.id === o;
             },
             get editable() {
               return e.editable;
@@ -1275,25 +1443,25 @@ function Sn(e) {
           })
         });
       }
-    })), F((t) => {
-      var y = !!e.editable, S = !!e.filtered;
-      return y !== t.e && u.classList.toggle("is-editable", t.e = y), S !== t.t && u.classList.toggle("is-filtered-out", t.t = S), t;
+    })), P((o) => {
+      var i = !!e.editable, x = !!e.filtered;
+      return i !== o.e && u.classList.toggle("is-editable", o.e = i), x !== o.t && u.classList.toggle("is-filtered-out", o.t = x), o;
     }, {
       e: void 0,
       t: void 0
     }), u;
   })();
 }
-function _n(e) {
-  const n = O(() => e.selectedObject?.kind === "annotation" ? e.annotations.find((u) => u.id === e.selectedObject?.id && u.kind === "text") ?? null : null), r = O(() => e.selectedObject?.kind === "background_layer" ? e.backgroundLayers.find((u) => u.id === e.selectedObject?.id) ?? null : null);
+function Rn(e) {
+  const t = j(() => e.selectedObject?.kind === "annotation" ? e.annotations.find((u) => u.id === e.selectedObject?.id && u.kind === "text") ?? null : null), r = j(() => e.selectedObject?.kind === "background_layer" ? e.backgroundLayers.find((u) => u.id === e.selectedObject?.id) ?? null : null);
   return (() => {
-    var u = Xt();
-    return C(u, b(ue, {
+    var u = Kt();
+    return k(u, w(oe, {
       get when() {
         return e.showRegionOutlines;
       },
       get children() {
-        return b(sn, {
+        return w(vn, {
           get items() {
             return e.backgroundLayers;
           },
@@ -1311,16 +1479,16 @@ function _n(e) {
           }
         });
       }
-    }), null), C(u, b(ue, {
+    }), null), k(u, w(oe, {
       get when() {
-        return xe(() => !!e.editable)() && r();
+        return be(() => !!e.editable)() && r();
       },
-      children: (t) => b(cn, {
+      children: (o) => w(sn, {
         get textEditorRegistry() {
           return e.textEditorRegistry;
         },
         get item() {
-          return t();
+          return o();
         },
         get viewportScale() {
           return e.viewport.scale;
@@ -1347,13 +1515,13 @@ function _n(e) {
           return e.onDeleteBackgroundLayer;
         }
       })
-    }), null), C(u, b(ue, {
+    }), null), k(u, w(oe, {
       get when() {
-        return xe(() => !!e.editable)() && n();
+        return be(() => !!e.editable)() && t();
       },
-      children: (t) => b(an, {
+      children: (o) => w(dn, {
         get item() {
-          return t();
+          return o();
         },
         get viewportScale() {
           return e.viewport.scale;
@@ -1386,16 +1554,16 @@ function _n(e) {
           return e.onDeleteAnnotation;
         }
       })
-    }), null), F(() => u.classList.toggle("is-editable", !!e.editable)), u;
+    }), null), P(() => u.classList.toggle("is-editable", !!e.editable)), u;
   })();
 }
-lt(["pointerdown", "contextmenu", "click", "keydown", "input"]);
+ut(["pointerdown", "contextmenu", "keydown", "click", "input"]);
 export {
-  Sn as WorkbenchAnnotationLayerView,
-  Cn as WorkbenchBackgroundLayerView,
-  rn as WorkbenchBackgroundRegion,
-  _n as WorkbenchLayerControlOverlayView,
-  $n as WorkbenchStickyNote,
-  on as WorkbenchTextAnnotation,
-  xn as createWorkbenchTextEditorRegistry
+  En as WorkbenchAnnotationLayerView,
+  pn as WorkbenchBackgroundLayerView,
+  ln as WorkbenchBackgroundRegion,
+  Rn as WorkbenchLayerControlOverlayView,
+  zn as WorkbenchStickyNote,
+  cn as WorkbenchTextAnnotation,
+  Sn as createWorkbenchTextEditorRegistry
 };