@floegence/floe-webapp-core 0.55.2 → 0.56.2

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 g, 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 O, 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 wt, Plus as gt } 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 c } 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>"), ge = /* @__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(v, o) {
+      return e.set(v, o), r((i) => i + 1), () => {
+        e.get(v) === o && (e.delete(v), r((i) => i + 1));
       };
     },
-    get(n) {
-      return e.get(n);
+    get(v) {
+      return t(), e.get(v);
     }
   };
 }
-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((v) => v === 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 v = (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", v, !0), document.addEventListener("keydown", o), ye(() => {
+      document.removeEventListener("pointerdown", v, !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(), [v, o] = re(!1), [i, x] = re(!1);
+  let z;
+  const D = () => t()?.textContent ?? "", B = (w) => r(w), F = (w) => {
+    const d = e.singleLine ? (w.textContent ?? "").trim() : w.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 w = t();
+    if (!w || v() || i()) return;
+    const d = e.value();
+    (w.innerHTML ?? "") !== d && (e.singleLine ? w.textContent = d : w.innerHTML = d);
+  }), fe(() => {
+    const w = t();
+    if (!w || !i()) return;
+    const d = (h) => {
+      h.composedPath().includes(w) || w.blur();
+    }, T = w.ownerDocument;
+    T.addEventListener("pointerdown", d, !0), ye(() => T.removeEventListener("pointerdown", d, !0));
+  });
+  const p = () => {
+    x(!0);
+  }, Y = (w) => {
+    const d = document.getSelection();
+    tt(d, w.currentTarget) && (z = d.getRangeAt(0).cloneRange()), v() || F(w.currentTarget), x(!1);
+  }, E = (w) => {
+    if (w.stopPropagation(), v() || w.isComposing || w.keyCode === 229) return;
+    const d = w.ctrlKey || w.metaKey;
+    w.key === "Escape" || w.key === "Enter" && (d || e.singleLine) ? (w.preventDefault(), w.currentTarget.blur()) : d && w.key === "b" ? (w.preventDefault(), document.execCommand("bold", !1)) : d && w.key === "i" && (w.preventDefault(), document.execCommand("italic", !1));
+  }, I = () => {
+    o(!0);
+  }, C = (w) => {
+    document.activeElement !== w.currentTarget && F(w.currentTarget), o(!1);
+  }, G = () => {
+    x(!0), t()?.focus({
+      preventScroll: !0
+    });
+  };
+  return {
+    bind: B,
+    blur: () => t()?.blur(),
+    isFocused: i,
+    readText: D,
+    focus: G,
+    insertTextAtSelection: (w) => {
+      const d = t();
+      if (!d) return;
+      const T = document.getSelection(), h = tt(T, d) ? T.getRangeAt(0).cloneRange() : void 0, l = z && d.contains(z.commonAncestorContainer) ? z : void 0, u = h ?? l?.cloneRange() ?? document.createRange();
+      if (G(), !h && !l && (u.selectNodeContents(d), u.collapse(!1)), T?.removeAllRanges(), T?.addRange(u), document.execCommand?.("insertText", !1, w)) return;
+      u.deleteContents();
+      const n = document.createTextNode(w);
+      u.insertNode(n), u.setStartAfter(n), u.collapse(!0), T?.removeAllRanges(), T?.addRange(u);
     },
-    handleCompositionEnd: (l) => {
-      document.activeElement !== l.currentTarget && !L && p(l.currentTarget), t(!1);
-    }
+    handleFocus: p,
+    handleBlur: Y,
+    handleKeyDown: E,
+    handleCompositionStart: I,
+    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 = c(() => e.readPosition()), r = c(() => 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({
+  }), v = c(() => e.viewportScale()), o = c(() => e.onCommitMove), i = c(() => e.onPreviewMove), x = c(() => e.onPreviewEnd), z = c(() => e.onInteractionStart), D = c(() => e.onInteractionEnd), B = c(() => e.onCommitStart), [F, p] = re(null);
+  let Y;
+  return ye(() => {
+    Y?.stop({
       reason: "manual_stop",
       commit: !1
-    }), J = void 0, We(T)?.stopInteraction();
+    }), Y = void 0, Pe(F)?.stopInteraction();
   }), {
     position: O(() => {
-      const E = T();
-      return E ? {
-        x: E.worldX,
-        y: E.worldY
-      } : n();
+      const C = F();
+      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: () => F() !== 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(v(), 1e-3), w = 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, w(), D()?.());
+      }, h = r(), l = i(), u = x(), n = B(), L = 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 j = 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 j = {
+                x: S.startWorldX + (X.clientX - S.startClientX) / S.scale,
+                y: S.startWorldY + (X.clientY - S.startClientY) / S.scale,
+                width: h.width,
+                height: h.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);
+            }), j && l?.(j);
           });
         },
         onEnd: ({
-          commit: f
+          commit: X
         }) => {
-          const w = We(T);
-          Ne(() => {
-            if (w && f) {
-              const k = {
-                x: w.worldX,
-                y: w.worldY
+          const j = Pe(F);
+          Te(() => {
+            if (j && X) {
+              const S = {
+                x: j.worldX,
+                y: j.worldY
               };
-              s?.(k), w.moved && h(k);
+              n?.(S), j.moved && L(S);
             }
-            w?.stopInteraction(), p(null), J = void 0, M?.();
+            j?.stopInteraction(), p(null), Y = void 0, u?.();
           });
         }
       });
     }
   };
 }
-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 = c(() => e.readSize()), r = c(() => e.viewportScale()), v = c(() => e.onCommitResize), o = c(() => e.onPreviewResize), i = c(() => e.onPreviewEnd), x = c(() => e.onInteractionStart), z = c(() => e.onInteractionEnd), [D, B] = re(null);
+  let F;
+  return ye(() => {
+    F?.stop({
       reason: "manual_stop",
       commit: !1
-    }), T = void 0, We(L)?.stopInteraction();
+    }), F = void 0, Pe(D)?.stopInteraction();
   }), {
     size: O(() => {
-      const _ = L();
-      return _ ? {
-        width: _.width,
-        height: _.height
-      } : n();
+      const E = D();
+      return E ? {
+        width: E.width,
+        height: E.height
+      } : t();
     }),
-    isResizing: () => L() !== null,
-    beginResize: (_) => {
-      if (_.button !== 0) return;
-      _.preventDefault(), _.stopPropagation(), T?.stop({
+    isResizing: () => D() !== null,
+    beginResize: (E) => {
+      if (E.button !== 0) return;
+      E.preventDefault(), E.stopPropagation(), F?.stop({
         reason: "manual_stop",
         commit: !1
       });
-      const H = n(), E = Math.max(r(), 1e-3), P = ot({
+      const I = 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 w = () => {
+        q || (q = !0, G(), z()?.());
+      }, d = o(), T = i(), h = v();
+      B({
+        pointerId: E.pointerId,
+        startClientX: E.clientX,
+        startClientY: E.clientY,
+        startWidth: I.width,
+        startHeight: I.height,
+        width: I.width,
+        height: I.height,
+        scale: C,
+        stopInteraction: w
+      }), F = at({
+        pointerEvent: E,
+        captureEl: E.currentTarget,
+        onMove: (l) => {
+          let u = null;
+          Te(() => {
+            B((n) => !n || n.pointerId !== l.pointerId ? n : (u = {
+              width: Math.max(e.minWidth, n.startWidth + (l.clientX - n.startClientX) / n.scale),
+              height: Math.max(e.minHeight, n.startHeight + (l.clientY - n.startClientY) / n.scale)
             }, {
-              ...s,
-              width: M.width,
-              height: M.height
-            })), M && l?.(M);
+              ...n,
+              width: u.width,
+              height: u.height
+            })), u && d?.(u);
           });
         },
         onEnd: ({
-          commit: a
+          commit: l
         }) => {
-          const M = We(L);
-          Ne(() => {
-            M && a && d({
-              width: M.width,
-              height: M.height
-            }), M?.stopInteraction(), G(null), T = void 0, v?.();
+          const u = Pe(D);
+          Te(() => {
+            u && l && h({
+              width: u.width,
+              height: u.height
+            }), u?.stopInteraction(), B(null), F = 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 v = e.color, o = e.material;
+      return v !== r.e && s(t, "data-note-color", r.e = v), 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, v] = re(), o = c(() => e.item), i = c(() => e.selected), x = c(() => e.viewportScale), z = c(() => e.projectedViewport), D = c(() => e.surfaceReady ?? !0), B = c(() => e.renderLayer), F = c(() => e.topRenderLayer), p = c(() => e.locked), Y = c(() => e.filtered), E = c(() => e.visualFront ?? !1), I = c(() => e.onSelect), C = c(() => e.onContextMenu), G = c(() => e.onClaimVisualFrontOwner), q = c(() => e.onCommitFront), w = c(() => e.onCommitMove), d = c(() => e.onCommitResize), T = c(() => e.onUpdate), h = c(() => e.onDelete), l = c(() => e.onLayoutInteractionStart), u = c(() => e.onLayoutInteractionEnd), n = Me({
+    value: () => o().body,
+    onCommit: ($) => T()(o().id, {
+      body: $
     })
-  }), [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);
+  }), L = Me({
+    value: () => o().title ?? "",
+    onCommit: ($) => T()(o().id, {
+      title: $
+    })
+  });
+  fe(() => {
+    p() && (L.blur(), n.blur());
+  });
+  const [X, j] = re("body"), S = Ne(We), te = () => L.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());
+  }, m = ($) => {
+    if ($.button !== 0) return;
+    const ie = o();
+    I()(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: ($) => w()(o().id, $),
+    onCommitStart: () => q()?.(o().id),
+    onInteractionStart: () => l()?.(),
+    onInteractionEnd: () => u()?.()
+  }), 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: () => l()?.(),
+    onInteractionEnd: () => u()?.()
+  }), W = O(() => b.position()), H = O(() => y.size()), f = O(() => {
+    const $ = z();
+    if ($)
+      return $t({
+        widgetId: o().id,
+        worldX: W().x,
+        worldY: W().y,
+        worldWidth: H().width,
+        worldHeight: H().height,
+        viewport: $(),
+        ready: D()
       });
-  }), 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 = O(() => f()?.rect.viewportScale ?? Math.max(x(), 1e-3)), Z = O(() => ({
+    "--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() ? F() + 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", () => I()(o().id)), $.$$pointerdown = m, se(v, $), N.$$pointerdown = (a) => {
+      if (p()) return;
+      const M = o();
+      I()(M.id), G()?.(M.id), b.beginDrag(a);
+    }, k(N, g(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, g(oe, {
+      get when() {
+        return o().title !== void 0;
       },
-      get onCompositionEnd() {
-        return s.handleCompositionEnd;
+      get children() {
+        var a = _t();
+        U(a, "compositionend", L.handleCompositionEnd), U(a, "compositionstart", L.handleCompositionStart), U(a, "keydown", L.handleKeyDown, !0), U(a, "blur", L.handleBlur), a.addEventListener("focus", (R) => {
+          j("title"), L.handleFocus(R);
+        }), a.$$pointerdown = (R) => {
+          R.stopPropagation(), I()(o().id);
+        };
+        var M = L.bind;
+        return typeof M == "function" ? se(M, a) : L.bind = a, s(a, "spellcheck", !1), P((R) => {
+          var V = !p(), me = t("stickyTitle"), we = t("textPlaceholder");
+          return V !== R.e && s(a, "contenteditable", R.e = V), me !== R.t && s(a, "aria-label", R.t = me), we !== R.a && s(a, "data-placeholder", R.a = we), 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) => {
+      j("body"), n.handleFocus(a);
+    }), ee.$$pointerdown = (a) => {
+      a.stopPropagation(), I()(o().id);
+    };
+    var ke = n.bind;
+    return typeof ke == "function" ? se(ke, ee) : n.bind = ee, s(ee, "spellcheck", !1), k($, g(oe, {
       get when() {
-        return xe(() => !!y())() && !p();
+        return be(() => !!i())() && !p();
       },
       get children() {
-        return b(Ae, {
+        return g(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 g(Fe, {
+              kind: "sticky",
+              onInsertEmoji: (a) => (X() === "title" && o().title !== void 0 ? L : 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) => g(nt, {
+                get color() {
+                  return o().color;
+                },
+                material: a
+              }),
+              onMaterial: (a) => T()(o().id, {
+                material: a
+              }),
+              get palette() {
+                return (() => {
+                  var a = lt();
+                  return k(a, g(de, {
+                    each: ft,
+                    children: (M) => (() => {
+                      var R = Et();
+                      return R.$$click = () => T()(o().id, {
+                        color: M
+                      }), R.$$pointerdown = Q, k(R, g(nt, {
+                        color: M,
+                        get material() {
+                          return o().material ?? "tint";
+                        }
+                      }), null), k(R, g(ot, {}), null), P((V) => {
+                        var me = t("stickyColor", t(M)), we = o().color === M;
+                        return me !== V.e && s(R, "aria-label", V.e = me), we !== V.t && s(R, "aria-pressed", V.t = we), V;
+                      }, {
+                        e: void 0,
+                        t: void 0
+                      }), R;
+                    })()
+                  })), a;
+                })();
               },
-              get children() {
-                return b(dt, {
-                  class: "w-3.5 h-3.5"
-                });
+              get actions() {
+                return [g(oe, {
+                  when: S,
+                  get fallback() {
+                    return (() => {
+                      var a = ge();
+                      return a.$$click = ve, a.$$pointerdown = Q, k(a, g(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 = ge();
+                    return a.$$click = () => S?.duplicate({
+                      kind: "sticky_note",
+                      id: o().id
+                    }), a.$$pointerdown = Q, k(a, g(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 = () => h()(o().id), a.$$pointerdown = Q, k(a, g(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($, g(oe, {
+      get when() {
+        return i();
+      },
+      get children() {
+        return St();
+      }
+    }), null), k($, g(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, we = 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($, we, 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 = c(() => e.item), v = c(() => e.selected), o = c(() => e.editable), i = c(() => e.viewportScale), x = c(() => 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 = c(() => e.projection), D = c(() => e.preview), B = c(() => e.textEditorRegistry), F = c(() => e.onPreviewGeometry), p = c(() => e.onSelect), Y = c(() => e.onContextMenu), E = c(() => e.onCommitMove), I = c(() => e.onUpdate), C = Me({
     value: () => r().text,
-    onCommit: (d) => H()(r().id, {
-      text: d
+    onCommit: (h) => I()(r().id, {
+      text: h
     })
   });
-  Le(() => {
-    const d = G();
-    if (!d) return;
-    const a = d.register(r().id, {
-      focus: E.focus,
-      insertTextAtSelection: E.insertTextAtSelection,
-      readText: E.readText
+  fe(() => {
+    const h = B();
+    if (!h) return;
+    const l = h.register(r().id, {
+      focus: C.focus,
+      blur: C.blur,
+      isFocused: C.isFocused,
+      insertTextAtSelection: C.insertTextAtSelection,
+      readText: C.readText
     });
-    $e(a);
+    ye(l);
   });
-  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: (h) => E()(r().id, h),
+    onPreviewMove: (h) => F()?.({
       kind: "annotation",
       id: r().id,
-      ...d
+      ...h
     }),
-    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: () => F()?.(null)
+  }), q = O(() => {
+    const h = r(), l = Se(D(), "annotation", h.id);
+    return ze({
+      geometry: Ee({
+        preview: l,
+        position: G.position(),
+        width: h.width,
+        height: h.height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: x(),
+      projection: z()
     });
-  }), m = O(() => j() === "screen" ? Math.max(S().scale, 1e-3) : 1), l = O(() => ({
-    ...pe(U()),
+  }), w = O(() => z() === "screen" ? Math.max(x().scale, 1e-3) : 1), d = O(() => ({
+    ...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": `${w()}`,
+    "--workbench-text-content-inverse-scale": `${1 / w()}`
+  })), T = (h) => {
+    !o() || h.button !== 0 || h.target instanceof Element && h.target.closest(".workbench-text-annotation__content") || (h.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 h = Rt(), l = h.firstChild;
+    h.$$contextmenu = (n) => {
+      o() && (n.preventDefault(), n.stopPropagation(), p()(r().id), Y()?.(n, r()));
+    }, h.$$pointerdown = T, U(l, "compositionend", C.handleCompositionEnd), U(l, "compositionstart", C.handleCompositionStart), U(l, "blur", C.handleBlur), U(l, "keydown", C.handleKeyDown, !0), l.addEventListener("focus", (n) => {
+      C.handleFocus(n), o() && p()(r().id);
+    }), l.$$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 u = C.bind;
+    return typeof u == "function" ? se(u, l) : C.bind = l, s(l, "spellcheck", !1), P((n) => {
+      var L = !!v(), X = !!o(), j = 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 L !== n.e && h.classList.toggle("is-selected", n.e = L), X !== n.t && h.classList.toggle("is-editable", n.t = X), j !== n.a && s(h, "data-floe-canvas-interactive", n.a = j), S !== n.o && s(h, "data-wb-object-id", n.o = S), n.i = he(h, te, n.i), ne !== n.n && s(l, "contenteditable", n.n = ne), ae !== n.s && s(l, "tabindex", n.s = ae), _ !== n.h && s(l, "role", n.h = _), J !== n.r && s(l, "aria-label", n.r = J), ce !== n.d && s(l, "aria-multiline", n.d = ce), ve !== n.l && s(l, "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;
+    }), h;
   })();
 }
-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 = c(() => e.item), v = c(() => e.selected), o = c(() => e.editable), i = c(() => e.viewportScale), x = c(() => 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 = c(() => e.projection), D = c(() => e.preview), B = c(() => e.onPreviewGeometry), F = c(() => e.onSelect), p = c(() => e.onContextMenu), Y = c(() => 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 I = 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 = O(() => {
+    const d = r(), T = Se(D(), "background_layer", d.id);
+    return ze({
+      geometry: Ee({
+        preview: T,
+        position: I.position(),
+        width: d.width,
+        height: d.height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: x(),
+      projection: z()
     });
-  }), P = O(() => ({
-    ...pe(E()),
+  }), G = O(() => z() === "screen" ? Math.max(x().scale, 1e-3) : 1), q = O(() => ({
+    ...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())
+  })), w = (d) => {
+    !o() || d.button !== 0 || d.target instanceof Element && d.target.closest(".workbench-background-region__label, .workbench-background-region__toolbar, .workbench-layer-resize") || (F()(r().id), I.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, h = T.firstChild, l = T.nextSibling;
+    d.$$contextmenu = (n) => {
+      o() && (n.preventDefault(), n.stopPropagation(), F()(r().id), p()?.(n, r()));
+    }, d.addEventListener("focus", () => o() && F()(r().id)), d.$$pointerdown = w, U(h, "compositionend", E.handleCompositionEnd), U(h, "compositionstart", E.handleCompositionStart), U(h, "keydown", E.handleKeyDown, !0), U(h, "blur", E.handleBlur), U(h, "focus", E.handleFocus), h.$$pointerdown = (n) => {
+      n.stopPropagation(), F()(r().id);
     };
-    var d = _.bind;
-    return typeof d == "function" ? ge(d, v) : _.bind = v, F((a) => {
-      var M = {
-        "is-selected": u(),
-        "is-editable": t(),
-        "is-transforming": H.isDragging(),
+    var u = E.bind;
+    return typeof u == "function" ? se(u, h) : E.bind = h, l.$$pointerdown = w, k(l, g(Ge, {})), P((n) => {
+      var L = {
+        "is-selected": v(),
+        "is-editing": E.isFocused(),
+        "is-editable": o(),
+        "is-transforming": I.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, j = 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, L, n.e), X !== n.t && s(d, "data-floe-canvas-interactive", n.t = X), j !== n.a && s(d, "data-wb-object-id", n.a = j), 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(h, "contenteditable", n.s = ae), _ !== n.h && s(h, "aria-label", n.h = _), J !== n.r && s(h, "data-placeholder", n.r = J), ce !== n.d && s(l, "aria-label", n.d = ce), n;
     }, {
       e: void 0,
       t: void 0,
@@ -725,417 +811,497 @@ 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), [v, o] = re(), i = c(() => e.item), x = () => e.textEditorRegistry?.get(i().id), z = c(() => e.viewportScale), D = c(() => 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 = c(() => e.projection), F = c(() => e.preview), p = c(() => e.onPreviewGeometry), Y = c(() => e.onCommitMove), E = c(() => e.onCommitResize), I = c(() => e.onUpdate), C = c(() => e.onDelete);
+  let G, q;
+  const [w, d] = re(!1), [T, h] = re(""), [l, u] = re(!1), n = O(() => Ie.find((_) => _.fontFamily === i().font_family) ?? Ie[0]), L = 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)
+  }), j = O(() => {
+    const _ = i(), J = Se(F(), "annotation", _.id);
+    return ze({
+      geometry: Ee({
+        preview: J,
+        position: L.position(),
+        width: X.size().width,
+        height: X.size().height
       }),
-      viewport: S(),
-      projection: j()
+      viewport: D(),
+      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 = O(() => ({
+    ...pe(j()),
+    "z-index": `${i().z_index}`,
+    "--workbench-layer-control-inverse-scale": `${1 / Math.max(j().scale, 1e-3)}`
+  })), te = () => nn(["left", "center", "right"], i().align), ne = (_) => {
+    if (!Number.isFinite(_)) return;
+    const J = rn(_);
+    h(String(J)), I()(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));
+    h(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 || h(String(i().font_size));
+  }), on(l, () => q, () => u(!1)), (() => {
+    var _ = Mt(), J = _.firstChild, ce = J.nextSibling, ve = ce.nextSibling;
+    return se(o, _), U(ce, "pointerdown", L.beginDrag, !0), k(ce, g(Ge, {})), k(_, g(Ae, {
+      reservedSpace: {
+        top: 64,
+        narrowTop: 106,
+        bottom: 86
+      },
       get anchor() {
-        return r();
+        return v();
       },
       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 g(Fe, {
+          kind: "text",
+          onInsertEmoji: (m) => x()?.insertTextAtSelection(m),
+          get moreOpen() {
+            return w();
           },
-          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;
-                }, {
-                  e: void 0,
-                  t: void 0,
-                  a: void 0,
-                  o: void 0,
-                  i: void 0,
-                  n: void 0
-                }), R;
-              })()
-            })), 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;
+          onMoreClose: () => d(!1),
+          more: () => [(() => {
+            var m = It(), b = m.firstChild, y = b.firstChild, W = y.nextSibling;
+            m.$$click = Oe, m.$$pointerdown = je;
+            var H = q;
+            return typeof H == "function" ? se(H, m) : q = m, b.$$click = (f) => {
+              $e(f), u((K) => !K);
+            }, b.$$pointerdown = Q, k(W, () => t(n().id)), k(b, g(ht, {
+              class: "workbench-text-font-trigger__icon"
+            }), null), k(m, g(oe, {
+              get when() {
+                return l();
+              },
+              get children() {
+                var f = Lt();
+                return k(f, g(de, {
+                  each: Ie,
+                  children: (K) => (() => {
+                    var Z = Ot(), $ = Z.firstChild, ie = $.nextSibling;
+                    return Z.$$click = (N) => {
+                      $e(N), I()(i().id, {
+                        font_family: K.fontFamily,
+                        font_weight: K.fontWeight
+                      }), u(!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 = l(), $ = 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
-            }), 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();
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
+            }), m;
+          })(), (() => {
+            var m = jt(), b = m.firstChild, y = b.nextSibling, W = y.nextSibling;
+            m.$$click = Oe, m.$$pointerdown = je, b.$$click = (f) => {
+              $e(f), ne(i().font_size - 1);
+            }, b.$$pointerdown = Q, k(b, g(wt, {
+              class: "w-3 h-3"
+            })), y.$$keydown = (f) => {
+              f.key === "Enter" && (f.preventDefault(), ae(), f.currentTarget.blur());
+            }, y.addEventListener("blur", ae), y.$$input = (f) => h(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, g(gt, {
+              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(m, "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()), m;
+          })(), g(de, {
+            each: kt,
+            children: (m) => (() => {
+              var b = Dt();
+              return b.$$click = (y) => {
+                $e(y), I()(i().id, {
+                  color: m
+                });
+              }, b.$$pointerdown = Q, xe(b, "background", m), P((y) => {
+                var W = t("textColor", m), H = i().color === m;
+                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
+              }), b;
+            })()
+          }), (() => {
+            var m = ge();
+            return m.$$click = () => I()(i().id, {
+              align: te()
+            }), m.$$pointerdown = Q, k(m, () => t(i().align)), m;
+          })()],
+          get actions() {
+            return [g(oe, {
+              when: r,
+              get children() {
+                var m = ge();
+                return m.$$click = () => r?.duplicate({
+                  kind: "annotation",
+                  id: i().id
+                }), m.$$pointerdown = Q, k(m, g(ue, {
+                  name: "copy"
+                })), P((b) => {
+                  var y = t("duplicate"), W = t("duplicate");
+                  return y !== b.e && s(m, "aria-label", b.e = y), W !== b.t && s(m, "title", b.t = W), b;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), m;
+              }
+            }), (() => {
+              var m = He();
+              return m.$$click = () => C()(i().id), m.$$pointerdown = Q, k(m, g(ue, {
+                name: "trash"
+              })), P(() => s(m, "aria-label", t("deleteText"))), m;
+            })()];
           },
           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 m = Tt(), b = m.firstChild;
+              return m.addEventListener("change", (y) => {
+                if (y.currentTarget.value === "more") {
+                  d(!w());
+                  return;
+                }
+                const W = {
+                  title: 48,
+                  heading: 30,
+                  body: 18,
+                  caption: 14
+                }, H = y.currentTarget.value;
+                I()(i().id, {
+                  font_size: W[H],
+                  font_weight: H === "title" || H === "heading" ? 560 : 400
+                });
+              }), k(m, g(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(m, "aria-label", t("typography"))), P(() => m.value = i().font_size >= 40 ? "title" : i().font_size >= 24 ? "heading" : i().font_size >= 16 ? "body" : "caption"), m;
+            })(), g(de, {
+              each: ["left", "center"],
+              children: (m) => (() => {
+                var b = ge();
+                return b.$$click = () => I()(i().id, {
+                  align: m
+                }), b.$$pointerdown = Q, k(b, g(ue, {
+                  name: m
+                })), P((y) => {
+                  var W = t(m), H = i().align === m;
+                  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;
+            }), g(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((m) => {
+      var b = i().id, y = S(), W = t("moveText"), H = t("resizeText");
+      return b !== m.e && s(_, "data-wb-object-id", m.e = b), m.t = he(_, y, m.t), W !== m.a && s(ce, "aria-label", m.a = W), H !== m.o && s(ve, "aria-label", m.o = H), m;
     }, {
       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), [v, o] = re(), i = c(() => e.item), x = () => e.textEditorRegistry?.get(i().id), z = () => x()?.isFocused() ?? !1, D = c(() => e.viewportScale), B = c(() => 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,
+  }), F = c(() => e.projection), p = c(() => e.preview), Y = c(() => e.onPreviewGeometry), E = c(() => e.onCommitResize), I = c(() => e.onUpdate), C = c(() => e.onDelete), G = Ye({
+    viewportScale: D,
     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 = O(() => {
+    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: F()
     });
-  }), E = O(() => ({
-    ...pe(H()),
-    "z-index": `${t().z_index}`,
-    "--workbench-layer-control-inverse-scale": `${1 / Math.max(H().scale, 1e-3)}`,
-    ...Me(t())
+  }), w = O(() => ({
+    ...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, h = T.nextSibling;
+    return se(o, d), k(d, g(Ae, {
+      reservedSpace: {
+        top: 64,
+        narrowTop: 106,
+        bottom: 86
+      },
       get anchor() {
-        return r();
+        return v();
       },
       get revision() {
-        return E();
+        return w();
+      },
+      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 g(Fe, {
+          kind: "region",
+          onInsertEmoji: (l) => x()?.insertTextAtSelection(l),
+          materials: yt,
+          get material() {
+            return i().material;
+          },
+          materialLabel: (l) => t("useRegionMaterial", t(l)),
+          preview: (l) => (() => {
+            var u = Nt(), n = u.firstChild;
+            return De(n, `workbench-region-material__sample is-material-${l}`), P((L) => he(n, Ce(i()), L)), u;
+          })(),
+          onMaterial: (l) => I()(i().id, {
+            material: l
+          }),
+          get palette() {
+            return (() => {
+              var l = lt();
+              return k(l, g(de, {
+                each: ct,
+                children: (u) => (() => {
+                  var n = Gt(), L = n.firstChild, X = L.firstChild;
+                  return n.$$click = () => I()(i().id, {
+                    fill: u.fill
+                  }), n.$$pointerdown = Q, k(n, g(ot, {}), null), P((j) => {
+                    var S = t("regionColor", t(u.color)), te = i().fill === u.fill, ne = `workbench-region-material__sample is-material-${i().material}`, ae = Ce({
+                      ...i(),
+                      fill: u.fill
+                    });
+                    return S !== j.e && s(n, "aria-label", j.e = S), te !== j.t && s(n, "aria-pressed", j.t = te), ne !== j.a && De(X, j.a = ne), j.o = he(X, ae, j.o), j;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0
+                  }), n;
+                })()
+              })), l;
+            })();
+          },
+          more: (l) => [(() => {
+            var u = Ht(), n = u.firstChild;
+            return k(u, () => t("opacity"), n), n.$$input = (L) => I()(i().id, {
+              opacity: Number(L.currentTarget.value) / 100
+            }), P(() => s(n, "aria-label", t("opacity"))), P(() => n.value = Math.round(i().opacity * 100)), u;
+          })(), (() => {
+            var u = ge();
+            return u.$$click = () => {
+              l(), I()(i().id, {
+                name: ""
+              });
+            }, u.$$pointerdown = Q, k(u, () => t("clearName")), P(() => u.disabled = !i().name.trim()), u;
+          })()],
+          get actions() {
+            return [g(oe, {
+              when: r,
+              get children() {
+                var l = ge();
+                return l.$$click = () => r?.duplicate({
+                  kind: "background_layer",
+                  id: i().id
+                }), l.$$pointerdown = Q, k(l, g(ue, {
+                  name: "copy"
+                })), P((u) => {
+                  var n = t("duplicate"), L = t("duplicate");
+                  return n !== u.e && s(l, "aria-label", u.e = n), L !== u.t && s(l, "title", u.t = L), u;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), l;
+              }
+            }), (() => {
+              var l = He();
+              return l.$$click = () => C()(i().id), l.$$pointerdown = Q, k(l, g(ue, {
+                name: "trash"
+              })), P(() => s(l, "aria-label", t("deleteRegion"))), l;
+            })()];
           },
           get children() {
-            var h = Dt();
-            return h.$$click = () => p()(t().id, {
-              name: ""
-            }), h.$$pointerdown = K, C(h, () => n("clearName")), h;
+            var l = Wt(), u = l.firstChild;
+            return l.$$click = () => x()?.focus(), l.$$pointerdown = Q, k(l, g(ue, {
+              name: "text"
+            }), u), k(u, () => t(i().name.trim() ? "regionName" : "addName")), l;
           }
-        }), 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;
+    }), h), U(h, "pointerdown", G.beginResize, !0), P((l) => {
+      var u = i().id, n = w(), L = t("resizeRegion");
+      return u !== l.e && s(d, "data-wb-object-id", l.e = u), l.t = he(d, n, l.t), L !== l.a && s(h, "aria-label", l.a = L), l;
     }, {
       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 = c(() => e.item), r = c(() => e.viewport), v = c(() => e.projection), o = c(() => e.preview), i = O(() => {
+    const z = t(), D = Se(o(), "background_layer", z.id);
+    return ze({
+      geometry: Ee({
+        preview: D,
         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()
+      projection: v()
     });
-  }), S = O(() => ({
-    ...pe(y()),
-    "--workbench-region-outline-scale": `${1 / Math.max(y().scale, 1e-3)}`,
-    ...Me(n())
+  }), x = O(() => ({
+    ...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((D) => {
+      var B = `workbench-region-visibility-outline is-material-${t().material}`, F = !!e.selected, p = t().id, Y = x();
+      return B !== D.e && De(z, D.e = B), F !== D.t && z.classList.toggle("is-selected-region", D.t = F), p !== D.a && s(z, "data-wb-object-id", D.a = p), D.o = he(z, Y, D.o), D;
     }, {
       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 = O(() => Xe(e.items)), r = O(() => Be(e.items).map((v) => v.id));
   return (() => {
-    var u = Ht();
-    return C(u, b(me, {
+    var v = Xt();
+    return k(v, g(de, {
       get each() {
         return r();
       },
-      children: (t) => {
-        const y = O(() => n().get(t) ?? null);
-        return b(ue, {
+      children: (o) => {
+        const i = O(() => t().get(o) ?? null);
+        return g(oe, {
           get when() {
-            return y();
+            return i();
           },
-          children: (S) => b(ln, {
+          children: (x) => g(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;
@@ -1149,29 +1315,29 @@ function sn(e) {
           })
         });
       }
-    })), u;
+    })), v;
   })();
 }
-function Cn(e) {
-  const n = O(() => Ye(e.items)), r = O(() => Xe(e.items).map((u) => u.id));
+function pn(e) {
+  const t = O(() => Xe(e.items)), r = O(() => Be(e.items).map((v) => v.id));
   return (() => {
-    var u = At();
-    return C(u, b(me, {
+    var v = Yt();
+    return k(v, g(de, {
       get each() {
         return r();
       },
-      children: (t) => {
-        const y = O(() => n().get(t) ?? null);
-        return b(ue, {
+      children: (o) => {
+        const i = O(() => t().get(o) ?? null);
+        return g(oe, {
           get when() {
-            return y();
+            return i();
           },
-          children: (S) => b(rn, {
+          children: (x) => g(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 +1375,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 && v.classList.toggle("is-editable", o.e = i), x !== o.t && v.classList.toggle("is-filtered-out", o.t = x), o;
     }, {
       e: void 0,
       t: void 0
-    }), u;
+    }), v;
   })();
 }
-function Sn(e) {
-  const n = O(() => Ye(e.items)), r = O(() => Xe(e.items).map((u) => u.id));
+function En(e) {
+  const t = O(() => Xe(e.items)), r = O(() => Be(e.items).map((v) => v.id));
   return (() => {
-    var u = Bt();
-    return C(u, b(me, {
+    var v = Ut();
+    return k(v, g(de, {
       get each() {
         return r();
       },
-      children: (t) => {
-        const y = O(() => n().get(t) ?? null);
-        return b(ue, {
+      children: (o) => {
+        const i = O(() => t().get(o) ?? null);
+        return g(oe, {
           get when() {
-            return y();
+            return i();
           },
-          children: (S) => b(on, {
+          children: (x) => g(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 +1441,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 && v.classList.toggle("is-editable", o.e = i), x !== o.t && v.classList.toggle("is-filtered-out", o.t = x), o;
     }, {
       e: void 0,
       t: void 0
-    }), u;
+    }), v;
   })();
 }
-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 = O(() => e.selectedObject?.kind === "annotation" ? e.annotations.find((v) => v.id === e.selectedObject?.id && v.kind === "text") ?? null : null), r = O(() => e.selectedObject?.kind === "background_layer" ? e.backgroundLayers.find((v) => v.id === e.selectedObject?.id) ?? null : null);
   return (() => {
-    var u = Xt();
-    return C(u, b(ue, {
+    var v = Kt();
+    return k(v, g(oe, {
       get when() {
         return e.showRegionOutlines;
       },
       get children() {
-        return b(sn, {
+        return g(vn, {
           get items() {
             return e.backgroundLayers;
           },
@@ -1311,16 +1477,16 @@ function _n(e) {
           }
         });
       }
-    }), null), C(u, b(ue, {
+    }), null), k(v, g(oe, {
       get when() {
-        return xe(() => !!e.editable)() && r();
+        return be(() => !!e.editable)() && r();
       },
-      children: (t) => b(cn, {
+      children: (o) => g(sn, {
         get textEditorRegistry() {
           return e.textEditorRegistry;
         },
         get item() {
-          return t();
+          return o();
         },
         get viewportScale() {
           return e.viewport.scale;
@@ -1347,13 +1513,13 @@ function _n(e) {
           return e.onDeleteBackgroundLayer;
         }
       })
-    }), null), C(u, b(ue, {
+    }), null), k(v, g(oe, {
       get when() {
-        return xe(() => !!e.editable)() && n();
+        return be(() => !!e.editable)() && t();
       },
-      children: (t) => b(an, {
+      children: (o) => g(dn, {
         get item() {
-          return t();
+          return o();
         },
         get viewportScale() {
           return e.viewport.scale;
@@ -1386,16 +1552,16 @@ function _n(e) {
           return e.onDeleteAnnotation;
         }
       })
-    }), null), F(() => u.classList.toggle("is-editable", !!e.editable)), u;
+    }), null), P(() => v.classList.toggle("is-editable", !!e.editable)), v;
   })();
 }
-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
 };