@dfosco/storyboard-core 4.2.3 → 4.2.5

package/dist/storyboard-ui.js

@@ -1,6 +1,6 @@
 import { composerDraftKey as Ln, getDraft as Sn, saveDraft as Me, clearDraft as p2, getCachedUser as m2, replyDraftKey as kn, unresolveComment as L6, resolveComment as S6, editComment as k6, removeReaction as qt, addReaction as Xt, replyToComment as E6, editReply as N6, deleteComment as R6, subscribeToCommentMode as En, isCommentModeActive as A0, setCommentMode as te, isCommentsEnabled as Jt, isAuthenticated as v2, toggleCommentMode as se, getCachedComments as B6, fetchRouteCommentsSummary as _6, setCachedComments as P6, fetchCommentDetail as Nn, getPendingComments as O6, createComment as Q7, removePendingComment as Rn, clearCachedComments as Bn, moveComment as T6, getCommentsConfig as j6, savePendingComment as I6 } from "@dfosco/storyboard-core/comments";
 import * as p from "react";
-import q0, { forwardRef as C1, useMemo as l1, useState as R, createElement as g2, useContext as $6, createContext as D6, useRef as G1, useCallback as U1, useEffect as y1, useLayoutEffect as z6, Suspense as F6, lazy as W6 } from "react";
+import q0, { forwardRef as C1, useMemo as l1, useState as R, createElement as g2, useContext as $6, createContext as D6, useRef as G1, useCallback as U1, useEffect as f1, useLayoutEffect as z6, Suspense as F6, lazy as W6 } from "react";
 import { createRoot as _n } from "react-dom/client";
 import { jsx as c, jsxs as x, Fragment as P1 } from "react/jsx-runtime";
 import { deepMerge as U6, getToolbarConfig as Pn, subscribeToToolbarConfig as G6, isMenuHidden as K6, hasChildrenProvider as Qt, getActionChildren as b7, clearDynamicActions as ea, isExcludedByRoute as et, setDynamicActions as Y6, setRoutingBasePath as q6, initCommandActions as X6, registerCommandAction as ta, getPrototypeMetadata as J6, setPrototypeToolbarConfig as Q6, clearPrototypeToolbarConfig as aa, isModeSwitcherVisible as na, getRegisteredModes as ra, getCurrentMode as la, subscribeToMode as el, getCanvasZoom as tl, getTheme as al, getThemeSyncTargets as nl, themeState as rl, themeSyncState as ll, THEMES as il, setTheme as ol, setThemeSyncTarget as sl, subscribeToCommandActions as cl, getConfig as Z7, buildPrototypeIndex as hl } from "@dfosco/storyboard-core";
@@ -393,7 +393,7 @@ const pl = (e, t) => {
     repeat: ["", "x", "y", "space", "round"]
   }], o1 = () => ["auto", "cover", "contain", Yl, Fl, {
     size: [i1, r1]
-  }], f1 = () => [Ge, n2, C5], D = () => [
+  }], y1 = () => [Ge, n2, C5], D = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -1504,21 +1504,21 @@ const pl = (e, t) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from-pos": [{
-        from: f1()
+        from: y1()
       }],
       /**
        * Gradient Color Stops Via Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via-pos": [{
-        via: f1()
+        via: y1()
       }],
       /**
        * Gradient Color Stops To Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to-pos": [{
-        to: f1()
+        to: y1()
       }],
       /**
        * Gradient Color Stops From
@@ -3196,8 +3196,8 @@ var X0 = ii(), oi = (e) => {
           const { class: S, className: N, ...E } = $[B];
           let F = !0;
           const o1 = W(null, z);
-          for (const f1 in E) {
-            const D = E[f1], X = o1[f1];
+          for (const y1 in E) {
+            const D = E[y1], X = o1[y1];
             if (Array.isArray(D)) {
               if (!D.includes(X)) {
                 F = !1;
@@ -3241,8 +3241,8 @@ var X0 = ii(), oi = (e) => {
           if (!w0(E)) {
             let F = !0;
             for (const o1 in E) {
-              const f1 = O[o1], D = E[o1];
-              if (f1 === void 0 || (Array.isArray(D) ? !D.includes(f1) : D !== f1)) {
+              const y1 = O[o1], D = E[o1];
+              if (y1 === void 0 || (Array.isArray(D) ? !D.includes(y1) : D !== y1)) {
                 F = !1;
                 break;
               }
@@ -4044,7 +4044,7 @@ function Di({ comment: e, discussion: t, user: a = null, onClose: r, onMove: n,
     var I;
     return ((I = Sn(i)) == null ? void 0 : I.text) ?? "";
   }), [Z, M] = R(!1), [H, C] = R(-1), [L, V] = R(""), [P, W] = R(!1), [G, a1] = R(null), [Q, $] = R(() => [...e.reactionGroups ?? []]), [z, O] = R(() => (e.replies ?? []).map((I) => [...I.reactionGroups ?? []])), [_, B] = R(() => (e.replies ?? []).map((I) => I.text ?? I.body ?? "")), S = !!((n0 = e.meta) != null && n0.resolved), N = e.text ?? "", E = e.replies ?? [], F = !!(a && ((U = e.author) == null ? void 0 : U.login) === a.login), o1 = !!(a && t);
-  function f1() {
+  function y1() {
     f.trim() ? Me(i, { type: "reply", text: f }) : p2(i);
   }
   function D(I) {
@@ -4311,7 +4311,7 @@ function Di({ comment: e, discussion: t, user: a = null, onClose: r, onMove: n,
       ] })
     ] }),
     o1 && /* @__PURE__ */ x("div", { className: "border-t border-border px-3 py-3 flex flex-col", children: [
-      /* @__PURE__ */ c(ae, { className: "min-h-[40px] max-h-[100px] text-xs mb-1", placeholder: "Reply…", value: f, onChange: (I) => b(I.target.value), onKeyDown: v0, onBlur: f1 }),
+      /* @__PURE__ */ c(ae, { className: "min-h-[40px] max-h-[100px] text-xs mb-1", placeholder: "Reply…", value: f, onChange: (I) => b(I.target.value), onKeyDown: v0, onBlur: y1 }),
       /* @__PURE__ */ c("div", { className: "flex justify-end mt-1", children: /* @__PURE__ */ c(F1, { size: "sm", className: "text-xs", disabled: !f.trim() || Z, onClick: W1, children: Z ? "Posting…" : "Reply" }) })
     ] })
   ] });
@@ -6459,7 +6459,7 @@ function A8() {
     } catch {
     }
   }, []);
-  return y1(() => {
+  return f1(() => {
     const i = () => t(!1);
     window.addEventListener("beforeinstallprompt", r), window.addEventListener("appinstalled", i);
     const o = K4((s) => {
@@ -8226,7 +8226,7 @@ var Zt = "PopperContent", [Jc, Qc] = h3(Zt), v3 = p.forwardRef(
     k0(() => {
       _ && (E == null || E());
     }, [_, E]);
-    const F = (m1 = B.arrow) == null ? void 0 : m1.x, o1 = (S1 = B.arrow) == null ? void 0 : S1.y, f1 = ((u1 = B.arrow) == null ? void 0 : u1.centerOffset) !== 0, [D, X] = p.useState();
+    const F = (m1 = B.arrow) == null ? void 0 : m1.x, o1 = (S1 = B.arrow) == null ? void 0 : S1.y, y1 = ((u1 = B.arrow) == null ? void 0 : u1.centerOffset) !== 0, [D, X] = p.useState();
     return k0(() => {
       f && X(window.getComputedStyle(f).zIndex);
     }, [f]), /* @__PURE__ */ c(
@@ -8261,7 +8261,7 @@ var Zt = "PopperContent", [Jc, Qc] = h3(Zt), v3 = p.forwardRef(
             onArrowChange: H,
             arrowX: F,
             arrowY: o1,
-            shouldHideArrow: f1,
+            shouldHideArrow: y1,
             children: /* @__PURE__ */ c(
               s3.div,
               {
@@ -9889,21 +9889,21 @@ function Xu() {
               };
               a.exports = function(L, V, P, W, G, a1, Q) {
                 i(P, V, W);
-                var $ = function(f1) {
-                  if (f1 === G && S) return S;
-                  if (!f && f1 in _) return _[f1];
-                  switch (f1) {
+                var $ = function(y1) {
+                  if (y1 === G && S) return S;
+                  if (!f && y1 in _) return _[y1];
+                  switch (y1) {
                     case Z:
                       return function() {
-                        return new P(this, f1);
+                        return new P(this, y1);
                       };
                     case M:
                       return function() {
-                        return new P(this, f1);
+                        return new P(this, y1);
                       };
                     case H:
                       return function() {
-                        return new P(this, f1);
+                        return new P(this, y1);
                       };
                   }
                   return function() {
@@ -11865,16 +11865,16 @@ function Ap({ name: e, size: t = 16 }) {
 }
 function Cp({ resizable: e = !0, onClose: t }) {
   const [a, r] = R({ open: !1, activeTab: "inspector" }), [n, l] = R(420), [i, o] = R(300), [s, h] = R("side"), [u, d] = R(!1), m = G1(null), v = s === "bottom";
-  y1(() => Vt.subscribe(r), []), y1(() => {
+  f1(() => Vt.subscribe(r), []), f1(() => {
     document.documentElement.style.setProperty("--sb--sidepanel-width", `${n}px`);
-  }, [n]), y1(() => {
+  }, [n]), f1(() => {
     document.documentElement.style.setProperty("--sb--sidepanel-height", `${i}px`);
-  }, [i]), y1(() => (document.documentElement.classList.toggle("sb-sidepanel-bottom", v), () => document.documentElement.classList.remove("sb-sidepanel-bottom")), [v]), y1(() => {
+  }, [i]), f1(() => (document.documentElement.classList.toggle("sb-sidepanel-bottom", v), () => document.documentElement.classList.remove("sb-sidepanel-bottom")), [v]), f1(() => {
     a.open && m.current && requestAnimationFrame(() => {
       var H;
       return (H = m.current) == null ? void 0 : H.focus();
     });
-  }, [a.open]), y1(() => {
+  }, [a.open]), f1(() => {
     const H = localStorage.getItem("sb-sidepanel-width");
     if (H) {
       const V = parseInt(H, 10);
@@ -11887,13 +11887,13 @@ function Cp({ resizable: e = !0, onClose: t }) {
     }
     const L = localStorage.getItem("sb-sidepanel-position");
     (L === "side" || L === "bottom") && h(L);
-  }, []), y1(() => {
+  }, []), f1(() => {
     localStorage.setItem("sb-sidepanel-width", String(n));
-  }, [n]), y1(() => {
+  }, [n]), f1(() => {
     localStorage.setItem("sb-sidepanel-height", String(i));
-  }, [i]), y1(() => {
+  }, [i]), f1(() => {
     localStorage.setItem("sb-sidepanel-position", s);
-  }, [s]), y1(() => {
+  }, [s]), f1(() => {
     function H(C) {
       C.key === "Escape" && a.open && (C.preventDefault(), I7(), t == null || t());
     }
@@ -12075,7 +12075,7 @@ const Ep = {
 };
 function pn(e) {
   const [t, a] = R(() => ({ ...e }));
-  return y1(() => {
+  return f1(() => {
     if (e.subscribe)
       return e.subscribe((n) => a({ ...n }));
   }, [e]), t;
@@ -12083,10 +12083,10 @@ function pn(e) {
 function Np({ basePath: e = "/", toolbarConfig: t, customHandlers: a = {} }) {
   const [r, n] = R(
     () => !document.documentElement.classList.contains("storyboard-chrome-hidden")
-  ), [l, i] = R({}), [o, s] = R({}), [h, u] = R(0), [d, m] = R(null), [v, g] = R(!1), [w, y] = R(""), [f, b] = R(100), [Z, M] = R(0), [H, C] = R(G4()), [L, V] = R(-1), [P, W] = R(!1), [G, a1] = R("default"), [Q, $] = R(""), [z, O] = R(null), _ = G1(null), B = G1(!1), S = G1(null), N = G1(null), E = G1(null), F = pn(Ep), o1 = pn(Vt), [f1, D] = R(Pn());
-  y1(() => G6((q) => D(q)), []), y1(() => sp(() => M((q) => q + 1)), []);
-  const X = l1(() => f1 && Object.keys(f1).length > 0 ? f1 : t || up, [f1, t]);
-  y1(() => {
+  ), [l, i] = R({}), [o, s] = R({}), [h, u] = R(0), [d, m] = R(null), [v, g] = R(!1), [w, y] = R(""), [f, b] = R(100), [Z, M] = R(0), [H, C] = R(G4()), [L, V] = R(-1), [P, W] = R(!1), [G, a1] = R("default"), [Q, $] = R(""), [z, O] = R(null), _ = G1(null), B = G1(!1), S = G1(null), N = G1(null), E = G1(null), F = pn(Ep), o1 = pn(Vt), [y1, D] = R(Pn());
+  f1(() => G6((q) => D(q)), []), f1(() => sp(() => M((q) => q + 1)), []);
+  const X = l1(() => y1 && Object.keys(y1).length > 0 ? y1 : t || up, [y1, t]);
+  f1(() => {
     const k = X.tools || {};
     op(k, { isLocalDev: d7 });
   }, [X]);
@@ -12264,7 +12264,7 @@ function Np({ basePath: e = "/", toolbarConfig: t, customHandlers: a = {} }) {
     var q;
     g(!0), b(((q = k.detail) == null ? void 0 : q.zoom) ?? 100);
   }, []);
-  return y1(() => {
+  return f1(() => {
     let k = !0;
     q6(e);
     const q = new MutationObserver(() => {
@@ -12339,11 +12339,11 @@ function Np({ basePath: e = "/", toolbarConfig: t, customHandlers: a = {} }) {
     return () => {
       k = !1, E.current && window.removeEventListener("popstate", E.current), S.current && (history.pushState = S.current), N.current && (history.replaceState = N.current), w1(), ea("mobile-toolbar"), q.disconnect();
     };
-  }, []), y1(() => (document.addEventListener("storyboard:canvas:mounted", p1), document.addEventListener("storyboard:canvas:unmounted", E1), document.addEventListener("storyboard:canvas:zoom-changed", g1), document.addEventListener("storyboard:canvas:status", p1), () => {
+  }, []), f1(() => (document.addEventListener("storyboard:canvas:mounted", p1), document.addEventListener("storyboard:canvas:unmounted", E1), document.addEventListener("storyboard:canvas:zoom-changed", g1), document.addEventListener("storyboard:canvas:status", p1), () => {
     document.removeEventListener("storyboard:canvas:mounted", p1), document.removeEventListener("storyboard:canvas:unmounted", E1), document.removeEventListener("storyboard:canvas:zoom-changed", g1), document.removeEventListener("storyboard:canvas:status", p1);
-  }), [p1, E1, g1]), y1(() => {
+  }), [p1, E1, g1]), f1(() => {
     J();
-  }, [H, J]), y1(() => {
+  }, [H, J]), f1(() => {
     function k(q) {
       var s1;
       const w1 = ((s1 = S1.hideChrome) == null ? void 0 : s1.key) || ".";
@@ -13402,7 +13402,7 @@ function Bm() {
     scope: "number",
     begin: W,
     relevance: 0
-  }, f1 = {
+  }, y1 = {
     scope: "number",
     begin: G,
     relevance: 0
@@ -13436,7 +13436,7 @@ function Bm() {
     __proto__: null,
     APOS_STRING_MODE: z,
     BACKSLASH_ESCAPE: $,
-    BINARY_NUMBER_MODE: f1,
+    BINARY_NUMBER_MODE: y1,
     BINARY_NUMBER_RE: G,
     COMMENT: B,
     C_BLOCK_COMMENT_MODE: N,
@@ -16079,7 +16079,7 @@ function Xm() {
     var O;
     (O = H.current) == null || O.deactivate(), l(!1);
   }, []);
-  y1(() => {
+  f1(() => {
     const O = Rm({
       onSelect: (_) => {
         const B = p7(_), S = m7(_);
@@ -16127,7 +16127,7 @@ function Xm() {
     })(), () => {
       O.deactivate(), O.hideHighlight(), I5(null), document.removeEventListener("storyboard:theme:changed", a1);
     };
-  }, []), y1(() => {
+  }, []), f1(() => {
     if (!e) {
       o(""), d(""), w("");
       return;
@@ -16166,7 +16166,7 @@ function Xm() {
     }), () => {
       _ = !0;
     };
-  }, [e, a]), y1(() => {
+  }, [e, a]), f1(() => {
     M.current && g && requestAnimationFrame(() => {
       var _;
       const O = (_ = M.current) == null ? void 0 : _.querySelector(".highlighted-line");
@@ -16175,7 +16175,7 @@ function Xm() {
         M.current.scrollTo({ top: B, behavior: "smooth" });
       } else M.current && (M.current.scrollTop = 0);
     });
-  }, [g]), y1(() => {
+  }, [g]), f1(() => {
     !i || !u || (async () => {
       try {
         const _ = (await G()).codeToHtml(i, {
@@ -17511,7 +17511,7 @@ var C0 = "MenuContent", [fg, Pt] = R5(C0), Ar = p.forwardRef(
       ...w
     } = e, y = f5(C0, a), f = _2(C0, a), b = B2(a), Z = yr(a), M = pg(a), [H, C] = p.useState(null), L = p.useRef(null), V = X1(t, L, y.onContentChange), P = p.useRef(0), W = p.useRef(""), G = p.useRef(0), a1 = p.useRef(null), Q = p.useRef("right"), $ = p.useRef(0), z = g ? ct : p.Fragment, O = g ? { as: Zg, allowPinchZoom: !0 } : void 0, _ = (S) => {
       var m1, S1;
-      const N = W.current + S, E = M().filter((u1) => !u1.disabled), F = document.activeElement, o1 = (m1 = E.find((u1) => u1.ref.current === F)) == null ? void 0 : m1.textValue, f1 = E.map((u1) => u1.textValue), D = Rg(f1, N, o1), X = (S1 = E.find((u1) => u1.textValue === D)) == null ? void 0 : S1.ref.current;
+      const N = W.current + S, E = M().filter((u1) => !u1.disabled), F = document.activeElement, o1 = (m1 = E.find((u1) => u1.ref.current === F)) == null ? void 0 : m1.textValue, y1 = E.map((u1) => u1.textValue), D = Rg(y1, N, o1), X = (S1 = E.find((u1) => u1.textValue === D)) == null ? void 0 : S1.ref.current;
       (function u1(B1) {
         W.current = B1, window.clearTimeout(P.current), B1 !== "" && (P.current = window.setTimeout(() => u1(""), 1e3));
       })(N), X && setTimeout(() => X.focus());
@@ -17598,8 +17598,8 @@ var C0 = "MenuContent", [fg, Pt] = R5(C0), Ar = p.forwardRef(
                         onKeyDown: b1(w.onKeyDown, (S) => {
                           const E = S.target.closest("[data-radix-menu-content]") === S.currentTarget, F = S.ctrlKey || S.altKey || S.metaKey, o1 = S.key.length === 1;
                           E && (S.key === "Tab" && S.preventDefault(), !F && o1 && _(S.key));
-                          const f1 = L.current;
-                          if (S.target !== f1 || !hg.includes(S.key)) return;
+                          const y1 = L.current;
+                          if (S.target !== y1 || !hg.includes(S.key)) return;
                           S.preventDefault();
                           const X = M().filter((m1) => !m1.disabled).map((m1) => m1.ref.current);
                           wr.includes(S.key) && X.reverse(), Eg(X);
@@ -18377,7 +18377,7 @@ function Lw({ onClose: e }) {
   ), N = l1(
     () => S ? S.split("-").map((K) => K.charAt(0).toUpperCase() + K.slice(1)).join("").replace(/([A-Z])/g, " $1").trim() : "",
     [S]
-  ), E = l ? r : N, F = S ? `/${S}` : "", o1 = l1(() => t.trim() && !S ? "Name must contain at least one alphanumeric character" : t.trim() && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(S) ? "Name must be kebab-case" : null, [t, S]), f1 = l1(() => {
+  ), E = l ? r : N, F = S ? `/${S}` : "", o1 = l1(() => t.trim() && !S ? "Name must contain at least one alphanumeric character" : t.trim() && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(S) ? "Name must be kebab-case" : null, [t, S]), y1 = l1(() => {
     if (!f || !Z.trim()) return null;
     try {
       const K = new URL(Z.trim());
@@ -18385,14 +18385,14 @@ function Lw({ onClose: e }) {
     } catch {
       return "Must be a valid URL (e.g. https://example.com)";
     }
-  }, [f, Z]), D = !!S && !o1 && !G && (!f || !!Z.trim() && !f1), X = o ? `${o}.folder` : "", m1 = l1(
+  }, [f, Z]), D = !!S && !o1 && !G && (!f || !!Z.trim() && !y1), X = o ? `${o}.folder` : "", m1 = l1(
     () => L.filter((K) => K.scope === "global" || (o ? K.folder === o : !1)),
     [L, o]
   ), S1 = h ? ((k1 = m1.find((K) => K.id === h)) == null ? void 0 : k1.name) ?? h : "No template", u1 = l1(() => m1.filter((K) => K.kind === "template"), [m1]), B1 = l1(() => m1.filter((K) => K.kind === "recipe"), [m1]), I1 = l1(() => u1.filter((K) => K.scope === "global"), [u1]), W1 = l1(() => B1.filter((K) => K.scope === "global"), [B1]), $1 = l1(() => u1.filter((K) => K.scope === "prototype"), [u1]), j1 = l1(() => B1.filter((K) => K.scope === "prototype"), [B1]);
-  y1(() => {
+  f1(() => {
     if (!h) return;
     m1.some((e0) => e0.id === h) || u("");
-  }, [m1, h]), y1(() => {
+  }, [m1, h]), f1(() => {
     let K = !1;
     async function e0() {
       var T;
@@ -18468,7 +18468,7 @@ function Lw({ onClose: e }) {
       f && /* @__PURE__ */ x("div", { className: "space-y-1", children: [
         /* @__PURE__ */ c(_1, { htmlFor: "sb-proto-url", children: "URL" }),
         /* @__PURE__ */ c(s0, { id: "sb-proto-url", placeholder: "https://example.com/prototype", autoComplete: "off", spellCheck: !1, value: Z, onChange: (K) => M(K.target.value) }),
-        f1 && /* @__PURE__ */ c("p", { className: "text-sm text-destructive", children: f1 })
+        y1 && /* @__PURE__ */ c("p", { className: "text-sm text-destructive", children: y1 })
       ] }),
       /* @__PURE__ */ x("div", { className: "space-y-1", children: [
         /* @__PURE__ */ c(_1, { htmlFor: "sb-proto-title", children: "Title" }),
@@ -18601,11 +18601,11 @@ function _w({ onClose: e }) {
   ), o1 = l1(
     () => o ? H.filter((U) => U.prototype !== o ? !1 : (U.folder || "") === ((F == null ? void 0 : F.folder) || "")) : [],
     [o, H, F]
-  ), f1 = l1(() => (F == null ? void 0 : F.routes) || [], [F]), D = v === l2, X = o ? `/${o}/` : "/prototype-name/", m1 = l1(
+  ), y1 = l1(() => (F == null ? void 0 : F.routes) || [], [F]), D = v === l2, X = o ? `/${o}/` : "/prototype-name/", m1 = l1(
     () => o ? L.filter((U) => U.scope === "global" || U.prototype === o && (U.folder || "") === ((F == null ? void 0 : F.folder) || "")) : L.filter((U) => U.scope === "global"),
     [o, L, F]
   ), S1 = l1(() => m1.filter((U) => U.scope === "global"), [m1]), u1 = l1(() => m1.filter((U) => U.scope === "prototype"), [m1]), B1 = o || "", I1 = D && !w.trim() ? "Please provide a new page path" : null, W1 = !!_ && !!o && !E && !I1 && !G;
-  y1(() => {
+  f1(() => {
     let U = !1;
     return (async () => {
       try {
@@ -18623,7 +18623,7 @@ function _w({ onClose: e }) {
     };
   }, []);
   const $1 = G1(o);
-  y1(() => {
+  f1(() => {
     if (!o) {
       m(""), g(""), y(""), b(""), $1.current = o;
       return;
@@ -18637,7 +18637,7 @@ function _w({ onClose: e }) {
       const e0 = v && v !== l2 ? o1.find((T) => T.route === v) : null;
       return (e0 == null ? void 0 : e0.path) || "";
     }), $1.current = o;
-  }, [o]), y1(() => {
+  }, [o]), f1(() => {
     f && (m1.some((U) => U.id === f) || b(""));
   }, [m1, f]);
   function j1(U) {
@@ -18730,7 +18730,7 @@ function _w({ onClose: e }) {
         ] }),
         /* @__PURE__ */ c("select", { className: ee, id: "sb-flow-starting-page", value: v, onChange: (U) => g(U.target.value), disabled: P || !o, children: o ? /* @__PURE__ */ x(P1, { children: [
           /* @__PURE__ */ c("option", { value: "", children: "None" }),
-          f1.map((U) => /* @__PURE__ */ c("option", { value: U, children: U }, U)),
+          y1.map((U) => /* @__PURE__ */ c("option", { value: U, children: U }, U)),
           /* @__PURE__ */ c("option", { value: l2, children: "Create new page" })
         ] }) : /* @__PURE__ */ c("option", { value: "", children: "Select a prototype first" }) }),
         /* @__PURE__ */ c("p", { className: "text-xs text-muted-foreground", children: "Users will be redirected to this page" })
@@ -18815,7 +18815,7 @@ function Dw({ onClose: e }) {
     () => G.filter((E) => E.kind === "recipe"),
     [G]
   ), _ = l ? ((N = P.find((E) => E.id === l)) == null ? void 0 : N.name) ?? l : "Blank page";
-  y1(() => {
+  f1(() => {
     let E = !1;
     return (async () => {
       try {
@@ -18831,14 +18831,14 @@ function Dw({ onClose: e }) {
     })(), () => {
       E = !0;
     };
-  }, []), y1(() => {
+  }, []), f1(() => {
     if (!t) {
       n("");
       return;
     }
     const E = `/${t}/`;
     n((F) => !F || !F.startsWith(E) ? `${E}new-page` : F);
-  }, [t]), y1(() => {
+  }, [t]), f1(() => {
     l && (P.some((E) => E.id === l) || i(""));
   }, [l, P]);
   const B = U1(async () => {
@@ -19027,7 +19027,7 @@ function Yw({ onClose: e }) {
     () => !!P && !Q && !f,
     [P, Q, f]
   );
-  y1(() => {
+  f1(() => {
     try {
       const N = sessionStorage.getItem(f7);
       if (N) {
@@ -19197,7 +19197,7 @@ function nf({ onClose: e }) {
     () => t.replace(/[^a-zA-Z0-9\s_-]/g, "").trim().replace(/[\s_]+/g, "-").toLowerCase().replace(/-+/g, "-").replace(/^-|-$/g, ""),
     [t]
   ), b = l1(() => t.trim() && !f ? "Name must contain at least one alphanumeric character" : t.trim() && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(f) ? "Name must be kebab-case" : null, [t, f]), Z = f ? `${f}.story.${l}` : "", M = !!f && !b && !o;
-  y1(() => {
+  f1(() => {
     try {
       const L = window.__storyboardCanvasBridgeState;
       L != null && L.canvasId ? y(L.canvasId) : L != null && L.name && y(L.name);
@@ -19441,7 +19441,7 @@ const mf = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" }));
 function vf({ config: e = {}, data: t, localOnly: a, tabindex: r = -1 }) {
   const [n, l] = R(!1), [i, o] = R(!1), [s, h] = R(!1), [u, d] = R(al), [m, v] = R(nl);
-  y1(() => rl.subscribe((b) => d(b.theme)), []), y1(() => ll.subscribe((b) => v({ ...b })), []), y1(() => {
+  f1(() => rl.subscribe((b) => d(b.theme)), []), f1(() => ll.subscribe((b) => v({ ...b })), []), f1(() => {
     function f() {
       h(!0);
     }
@@ -19545,7 +19545,7 @@ const gf = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" }));
 function wf({ config: e = {}, data: t, localOnly: a, tabindex: r }) {
   const [n, l] = R(A0());
-  y1(() => En((s) => {
+  f1(() => En((s) => {
     l(s);
   }), []);
   async function i() {
@@ -19574,9 +19574,17 @@ const ff = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 function yf({ config: e = {}, data: t, localOnly: a, tabindex: r = -1 }) {
   var m;
   const [n, l] = R(!1), [i, o] = R(0);
-  y1(() => cl(() => {
+  f1(() => cl(() => {
     o((g) => g + 1);
-  }), []);
+  }), []), f1(() => {
+    const v = e.action;
+    if (!v) return;
+    function g(w) {
+      var y;
+      ((y = w.detail) == null ? void 0 : y.action) === v && l(!0);
+    }
+    return window.addEventListener("storyboard:open-tool-menu", g), () => window.removeEventListener("storyboard:open-tool-menu", g);
+  }, [e.action]);
   const s = e.action ? b7(e.action) : [], h = s.some((v) => v.type === "radio"), u = ((m = s.find((v) => v.type === "radio" && v.active)) == null ? void 0 : m.id) || "", d = U1((v) => {
     l(v), v && o((g) => g + 1);
   }, []);
@@ -19764,7 +19772,7 @@ function Lf({ config: e = {}, basePath: t = "/", tabindex: a = -1 }) {
       return (X = N.current) == null ? void 0 : X.focus();
     })) : Q(G.current) || _();
   }
-  y1(() => {
+  f1(() => {
     const D = () => E(!0);
     return document.addEventListener("storyboard:open-autosync", D), () => document.removeEventListener("storyboard:open-autosync", D);
   }, []);
@@ -19776,8 +19784,8 @@ function Lf({ config: e = {}, basePath: t = "/", tabindex: a = -1 }) {
       return D;
     }
   }
-  y1(() => (z(), () => _()), [z]);
-  const o1 = (D) => m[D] === !0, f1 = Q(m) || y || g || b.canvas || b.prototype;
+  f1(() => (z(), () => _()), [z]);
+  const o1 = (D) => m[D] === !0, y1 = Q(m) || y || g || b.canvas || b.prototype;
   return /* @__PURE__ */ x(y5, { open: n, onOpenChange: E, children: [
     /* @__PURE__ */ c(Z5, { children: /* @__PURE__ */ c(
       U0,
@@ -19835,7 +19843,7 @@ function Lf({ config: e = {}, basePath: t = "/", tabindex: a = -1 }) {
               children: o1("prototype") ? "Disable autosync for prototype changes" : "Enable autosync for prototype changes"
             }
           ),
-          f1 && /* @__PURE__ */ x(P1, { children: [
+          y1 && /* @__PURE__ */ x(P1, { children: [
             /* @__PURE__ */ c(Q1, {}),
             /* @__PURE__ */ x("div", { className: "statusRow", children: [
               M && C && /* @__PURE__ */ x("p", { className: "scopeHint", children: [
@@ -19901,7 +19909,7 @@ const Sf = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   inputRef: m
 }, v) {
   const [g, w] = R(""), y = G1(null), f = m || y, b = G1(null);
-  y1(() => {
+  f1(() => {
     if (!h) return;
     const C = requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -20012,7 +20020,7 @@ function Bf({ config: e = {}, data: t, canvasName: a = "", zoom: r, tabindex: n
   function $() {
     H(""), P(null), L(!1);
   }
-  const [z, O] = R(""), [_, B] = R("canvas"), [S, N] = R("jsx"), [E, F] = R(!1), [o1, f1] = R(null), [D, X] = R(null), m1 = l1(
+  const [z, O] = R(""), [_, B] = R("canvas"), [S, N] = R("jsx"), [E, F] = R(!1), [o1, y1] = R(null), [D, X] = R(null), m1 = l1(
     () => z.replace(/[^a-zA-Z0-9\s_-]/g, "").trim().replace(/[\s_]+/g, "-").toLowerCase().replace(/-+/g, "-").replace(/^-|-$/g, ""),
     [z]
   ), S1 = l1(
@@ -20023,7 +20031,7 @@ function Bf({ config: e = {}, data: t, canvasName: a = "", zoom: r, tabindex: n
     [m1, S]
   ), B1 = !!m1 && !S1 && !E;
   function I1() {
-    O(""), B("canvas"), N("jsx"), f1(null), F(!1);
+    O(""), B("canvas"), N("jsx"), y1(null), F(!1);
   }
   async function W1() {
     try {
@@ -20036,14 +20044,14 @@ function Bf({ config: e = {}, data: t, canvasName: a = "", zoom: r, tabindex: n
     }
     m(!0);
   }
-  y1(() => {
+  f1(() => {
     l && W1();
-  }, [l]), y1(() => {
+  }, [l]), f1(() => {
     l && o === "menu" && requestAnimationFrame(() => {
       const T = document.querySelector("[data-bits-dropdown-menu-content] [data-bits-dropdown-menu-item]:not([data-disabled])");
       T == null || T.focus();
     });
-  }, [l, o]), y1(() => {
+  }, [l, o]), f1(() => {
     !l && o === "menu" && (I1(), $(), y(/* @__PURE__ */ new Set()));
   }, [l, o]);
   function $1(T, H1) {
@@ -20092,7 +20100,7 @@ function Bf({ config: e = {}, data: t, canvasName: a = "", zoom: r, tabindex: n
   k1.current = o;
   async function K() {
     if (B1) {
-      F(!0), f1(null);
+      F(!0), y1(null);
       try {
         const T = window.__storyboardCanvasBridgeState, H1 = (T == null ? void 0 : T.canvasId) || (T == null ? void 0 : T.name) || a, I = await fetch(Vn() + "/create-story", {
           method: "POST",
@@ -20105,14 +20113,14 @@ function Bf({ config: e = {}, data: t, canvasName: a = "", zoom: r, tabindex: n
           })
         }), J = await I.json();
         if (!I.ok) {
-          f1(J.error || "Failed to create component"), F(!1);
+          y1(J.error || "Failed to create component"), F(!1);
           return;
         }
         j1(J.name), X(J.path), s("notification"), i(!0), m(!1), setTimeout(() => {
           k1.current === "notification" && (i(!1), s("menu"), X(null));
         }, 6e3);
       } catch (T) {
-        f1(T.message || "Network error");
+        y1(T.message || "Network error");
       } finally {
         F(!1);
       }
@@ -20527,7 +20535,7 @@ const $f = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" }));
 function Df({ config: e = {}, data: t, tabindex: a = -1 }) {
   const [r, n] = R(!1), [l, i] = R(!1);
-  return y1(() => {
+  return f1(() => {
     function o(s) {
       var h, u;
       n(!!((h = s.detail) != null && h.canUndo)), i(!!((u = s.detail) != null && u.canRedo));
@@ -20573,7 +20581,7 @@ const zf = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" }));
 function Ff({ config: e = {}, data: t, tabindex: a = -1 }) {
   const [r, n] = R(!1);
-  return y1(() => {
+  return f1(() => {
     function l(o) {
       var s;
       n(!!((s = o.detail) != null && s.snapEnabled));
@@ -20627,7 +20635,7 @@ function Kf({ config: e = {}, tabindex: t }) {
   const [a, r] = R(
     () => document.documentElement.classList.contains("storyboard-chrome-hidden")
   );
-  y1(() => {
+  f1(() => {
     const l = new MutationObserver(() => {
       r(document.documentElement.classList.contains("storyboard-chrome-hidden"));
     });