@principal-ade/panel-layouts 0.1.6 → 0.2.1

package/dist/index.esm.js

@@ -1,12 +1,13 @@
-import './index.css';var D = Object.defineProperty;
-var F = (n, e, t) => e in n ? D(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var A = (n, e, t) => F(n, typeof e != "symbol" ? e + "" : e, t);
-import { EditableConfigurablePanelLayout as Z, ResponsiveConfigurablePanelLayout as G, mapThemeToPanelVars as Q, mapThemeToTabVars as H } from "@principal-ade/panels";
-import { useState as R, useRef as C, useEffect as P, useCallback as p } from "react";
-import { jsx as O } from "react/jsx-runtime";
-class $ {
+import './index.css';var q = Object.defineProperty;
+var X = (o, e, t) => e in o ? q(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var D = (o, e, t) => X(o, typeof e != "symbol" ? e + "" : e, t);
+import { EditableConfigurablePanelLayout as xe, ResponsiveConfigurablePanelLayout as Ce, mapThemeToPanelVars as ve, mapThemeToTabVars as Se } from "@principal-ade/panels";
+import Q, { useState as z, useRef as I, useEffect as P, useCallback as m, forwardRef as Y, useMemo as K } from "react";
+import { jsx as T, jsxs as W, Fragment as G } from "react/jsx-runtime";
+import { useTheme as N } from "@principal-ade/industry-theme";
+class Z {
   constructor() {
-    A(this, "storageKey", "panel-layouts");
+    D(this, "storageKey", "panel-layouts");
   }
   async load(e) {
     try {
@@ -27,122 +28,122 @@ class $ {
     }
   }
 }
-function _(n) {
+function ie(o) {
   const {
     viewKey: e,
     defaultSizes: t,
     panelType: a,
-    adapter: s = new $()
-  } = n, [l, f] = R(t), [u, v] = R(n.collapsed), w = C(n.collapsed), b = C({}), h = C(null), y = C(null);
+    adapter: s = new Z()
+  } = o, [n, r] = z(t), [l, y] = z(o.collapsed), h = I(o.collapsed), b = I({}), u = I(null), f = I(null);
   P(() => {
     (async () => {
-      const g = await s.load(e);
-      g != null && g.sizes && (f(g.sizes), r(g.sizes));
+      const C = await s.load(e);
+      C != null && C.sizes && (r(C.sizes), p(C.sizes));
     })();
   }, [e]);
-  const r = p(
-    (i) => {
-      "left" in i && i.left > 0 && (b.current.left = i.left), "middle" in i && i.middle > 0 && (b.current.middle = i.middle), "right" in i && i.right > 0 && (b.current.right = i.right);
+  const p = m(
+    (g) => {
+      "left" in g && g.left > 0 && (b.current.left = g.left), "middle" in g && g.middle > 0 && (b.current.middle = g.middle), "right" in g && g.right > 0 && (b.current.right = g.right);
     },
     []
-  ), o = p(
-    (i) => {
-      const g = b.current[i];
-      if (g && g > 0)
-        return g;
-      if (i === "left" && "left" in t && t.left > 0)
+  ), c = m(
+    (g) => {
+      const C = b.current[g];
+      if (C && C > 0)
+        return C;
+      if (g === "left" && "left" in t && t.left > 0)
         return t.left;
-      if (i === "right" && "right" in t && t.right > 0)
+      if (g === "right" && "right" in t && t.right > 0)
         return t.right;
     },
     [t]
-  ), k = C(t);
+  ), i = I(t);
   P(() => {
-    ("left" in t && t.left !== k.current.left || "middle" in t && "middle" in k.current && t.middle !== k.current.middle || "right" in t && t.right !== k.current.right) && (f(t), r(t), k.current = t);
-  }, [t, r]), P(() => {
-    const i = n.collapsed.left !== w.current.left, g = "right" in n.collapsed && "right" in w.current && n.collapsed.right !== w.current.right;
-    (i || g) && (v(n.collapsed), w.current = { ...n.collapsed });
-  }, [n.collapsed.left, n.collapsed.right]);
-  const T = p(
-    async (i) => {
+    ("left" in t && t.left !== i.current.left || "middle" in t && "middle" in i.current && t.middle !== i.current.middle || "right" in t && t.right !== i.current.right) && (r(t), p(t), i.current = t);
+  }, [t, p]), P(() => {
+    const g = o.collapsed.left !== h.current.left, C = "right" in o.collapsed && "right" in h.current && o.collapsed.right !== h.current.right;
+    (g || C) && (y(o.collapsed), h.current = { ...o.collapsed });
+  }, [o.collapsed.left, o.collapsed.right]);
+  const w = m(
+    async (g) => {
       try {
-        await s.save(e, { sizes: i });
-      } catch (g) {
+        await s.save(e, { sizes: g });
+      } catch (C) {
         console.error(
           `Failed to save panel preferences for ${e}:`,
-          g
+          C
         );
       }
     },
     [e, s]
-  ), z = p(
-    (i) => {
-      const g = { ...i };
-      let c = !0;
-      if ("left" in i) {
-        const d = !!(u != null && u.left), S = i.left;
-        if (d) {
-          const W = o("left");
-          W !== void 0 && W > 0 ? g.left = W : c = !1;
-        } else S === 0 && (c = !1);
+  ), S = m(
+    (g) => {
+      const C = { ...g };
+      let x = !0;
+      if ("left" in g) {
+        const k = !!(l != null && l.left), d = g.left;
+        if (k) {
+          const v = c("left");
+          v !== void 0 && v > 0 ? C.left = v : x = !1;
+        } else d === 0 && (x = !1);
       }
-      if (a === "three-panel" && "right" in i) {
-        const d = !!(u != null && u.right), S = i.right;
-        if (d) {
-          const W = o("right");
-          W !== void 0 && W > 0 ? g.right = W : c = !1;
-        } else S === 0 && (c = !1);
+      if (a === "three-panel" && "right" in g) {
+        const k = !!(l != null && l.right), d = g.right;
+        if (k) {
+          const v = c("right");
+          v !== void 0 && v > 0 ? C.right = v : x = !1;
+        } else d === 0 && (x = !1);
       }
-      if (f(g), r(g), h.current && (clearTimeout(h.current), h.current = null), !c) {
-        y.current = null;
+      if (r(C), p(C), u.current && (clearTimeout(u.current), u.current = null), !x) {
+        f.current = null;
         return;
       }
-      y.current = g, h.current = setTimeout(() => {
-        const d = y.current;
-        d && (T(d), y.current = null), h.current = null;
+      f.current = C, u.current = setTimeout(() => {
+        const k = f.current;
+        k && (w(k), f.current = null), u.current = null;
       }, 500);
     },
     [
-      u,
-      o,
+      l,
+      c,
       a,
-      T,
-      r
+      w,
+      p
     ]
   );
   P(() => () => {
-    if (h.current) {
-      const i = y.current;
-      i && (T(i), y.current = null), clearTimeout(h.current), h.current = null;
+    if (u.current) {
+      const g = f.current;
+      g && (w(g), f.current = null), clearTimeout(u.current), u.current = null;
     }
-  }, [T]);
-  const I = p(async () => {
-  }, []), E = p(async () => {
-  }, []), L = p(async () => {
-  }, []), x = p(async () => {
+  }, [w]);
+  const A = m(async () => {
+  }, []), E = m(async () => {
+  }, []), F = m(async () => {
+  }, []), $ = m(async () => {
   }, []);
   return a === "three-panel" ? {
     type: "three-panel",
-    sizes: l,
-    collapsed: u,
-    handlePanelResize: z,
-    handleLeftCollapseComplete: I,
+    sizes: n,
+    collapsed: l,
+    handlePanelResize: S,
+    handleLeftCollapseComplete: A,
     handleLeftExpandComplete: E,
-    handleRightCollapseComplete: L,
-    handleRightExpandComplete: x
+    handleRightCollapseComplete: F,
+    handleRightExpandComplete: $
   } : {
     type: "two-panel",
-    sizes: l,
-    collapsed: u,
-    handlePanelResize: z,
-    handleLeftCollapseComplete: I,
+    sizes: n,
+    collapsed: l,
+    handlePanelResize: S,
+    handleLeftCollapseComplete: A,
     handleLeftExpandComplete: E
   };
 }
-class N {
+class U {
   constructor() {
-    A(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
-    A(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
+    D(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
+    D(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
   }
   /**
    * Load all user-created workspace presets
@@ -202,14 +203,14 @@ class N {
       for (let t = 0; t < localStorage.length; t++) {
         const a = localStorage.key(t);
         if (a && a.startsWith(this.REPO_STATE_PREFIX)) {
-          const s = a.substring(this.REPO_STATE_PREFIX.length), l = localStorage.getItem(a);
-          if (l)
+          const s = a.substring(this.REPO_STATE_PREFIX.length), n = localStorage.getItem(a);
+          if (n)
             try {
-              e[s] = JSON.parse(l);
-            } catch (f) {
+              e[s] = JSON.parse(n);
+            } catch (r) {
               console.error(
                 `Failed to parse repository state for ${s}:`,
-                f
+                r
               );
             }
         }
@@ -220,7 +221,7 @@ class N {
     }
   }
 }
-class m {
+class R {
   /**
    * Configure a custom storage adapter (for Electron IPC or remote storage)
    */
@@ -257,11 +258,11 @@ class m {
       createdAt: Date.now(),
       updatedAt: Date.now(),
       isBuiltIn: !1
-    }, l = {
+    }, n = {
       ...t,
       [a]: s
     };
-    return await this.adapter.saveWorkspacePresets(l), s;
+    return await this.adapter.saveWorkspacePresets(n), s;
   }
   /**
    * Update an existing workspace layout
@@ -272,7 +273,7 @@ class m {
       return console.error(`Workspace layout ${e} not found`), null;
     if (s.isBuiltIn)
       return console.error(`Cannot update built-in workspace layout ${e}`), null;
-    const l = {
+    const n = {
       ...s,
       ...t,
       id: e,
@@ -280,11 +281,11 @@ class m {
       createdAt: s.createdAt,
       // Preserve creation time
       updatedAt: Date.now()
-    }, f = {
+    }, r = {
       ...a,
-      [e]: l
+      [e]: n
     };
-    return await this.adapter.saveWorkspacePresets(f), l;
+    return await this.adapter.saveWorkspacePresets(r), n;
   }
   /**
    * Delete a workspace layout
@@ -609,242 +610,301 @@ class m {
     Object.keys(e).length;
   }
 }
-A(m, "adapter", new N());
-function K(n = {}) {
-  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: a } = n, [s, l] = R(
+D(R, "adapter", new U());
+function ce(o = {}) {
+  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: a } = o, [s, n] = z(
     {}
-  ), [f, u] = R(null), [v, w] = R(null), [b, h] = R(!0), [y, r] = R(null), o = p(async () => {
+  ), [r, l] = z(null), [y, h] = z(null), [b, u] = z(!0), [f, p] = z(null), c = m(async () => {
     try {
-      h(!0), r(null);
-      const c = await m.getWorkspaceLayouts();
-      if (l(c), e) {
-        let d = await m.getRepositoryState(e);
-        if (!d && t) {
-          const S = a || "project-management", W = await m.getWorkspaceLayout(S);
-          W && (d = {
-            workspaceId: S,
-            sizes: W.defaultSizes || {
+      u(!0), p(null);
+      const x = await R.getWorkspaceLayouts();
+      if (n(x), e) {
+        let k = await R.getRepositoryState(e);
+        if (!k && t) {
+          const d = a || "project-management", v = await R.getWorkspaceLayout(d);
+          v && (k = {
+            workspaceId: d,
+            sizes: v.defaultSizes || {
               left: 20,
               middle: 45,
               right: 35
             },
-            collapsed: W.defaultCollapsed || {
+            collapsed: v.defaultCollapsed || {
               left: !1,
               right: !1
             }
-          }, await m.setRepositoryState(
+          }, await R.setRepositoryState(
             e,
-            d
+            k
           ));
         }
-        if (u(d), d != null && d.workspaceId) {
-          const S = await m.getWorkspaceLayout(
-            d.workspaceId
+        if (l(k), k != null && k.workspaceId) {
+          const d = await R.getWorkspaceLayout(
+            k.workspaceId
           );
-          w(S);
+          h(d);
         } else
-          w(null);
+          h(null);
       }
-    } catch (c) {
-      r(c), console.error("Failed to load workspace data:", c);
+    } catch (x) {
+      p(x), console.error("Failed to load workspace data:", x);
     } finally {
-      h(!1);
+      u(!1);
     }
   }, [e, t, a]);
   P(() => {
-    o();
-  }, [o]);
-  const k = p(
-    async (c) => await m.getWorkspaceLayout(c),
+    c();
+  }, [c]);
+  const i = m(
+    async (x) => await R.getWorkspaceLayout(x),
     []
-  ), T = p(
-    async (c) => {
-      const d = await m.createWorkspaceLayout(c);
-      return await o(), d;
+  ), w = m(
+    async (x) => {
+      const k = await R.createWorkspaceLayout(x);
+      return await c(), k;
     },
-    [o]
-  ), z = p(
-    async (c, d) => {
-      const S = await m.updateWorkspaceLayout(c, d);
-      return await o(), S;
+    [c]
+  ), S = m(
+    async (x, k) => {
+      const d = await R.updateWorkspaceLayout(x, k);
+      return await c(), d;
     },
-    [o]
-  ), I = p(
-    async (c) => {
-      const d = await m.deleteWorkspaceLayout(c);
-      return d && await o(), d;
+    [c]
+  ), A = m(
+    async (x) => {
+      const k = await R.deleteWorkspaceLayout(x);
+      return k && await c(), k;
     },
-    [o]
-  ), E = p(
-    async (c) => {
+    [c]
+  ), E = m(
+    async (x) => {
       if (!e) {
         console.error("Cannot apply workspace without repositoryKey");
         return;
       }
-      const d = await m.getWorkspaceLayout(c);
-      if (!d) {
-        console.error(`Workspace ${c} not found`);
+      const k = await R.getWorkspaceLayout(x);
+      if (!k) {
+        console.error(`Workspace ${x} not found`);
         return;
       }
-      const S = {
-        workspaceId: c,
-        sizes: d.defaultSizes || { left: 20, middle: 45, right: 35 },
-        collapsed: d.defaultCollapsed || {
+      const d = {
+        workspaceId: x,
+        sizes: k.defaultSizes || { left: 20, middle: 45, right: 35 },
+        collapsed: k.defaultCollapsed || {
           left: !1,
           right: !1
         }
       };
-      await m.setRepositoryState(e, S), await o();
+      await R.setRepositoryState(e, d), await c();
     },
-    [e, o]
-  ), L = p(
-    async (c) => {
+    [e, c]
+  ), F = m(
+    async (x) => {
       if (!e) {
         console.error("Cannot update sizes without repositoryKey");
         return;
       }
-      await m.updateRepositorySizes(e, c), await o();
+      await R.updateRepositorySizes(e, x), await c();
     },
-    [e, o]
-  ), x = p(
-    async (c) => {
+    [e, c]
+  ), $ = m(
+    async (x) => {
       if (!e) {
         console.error("Cannot update collapsed without repositoryKey");
         return;
       }
-      await m.updateRepositoryCollapsed(
+      await R.updateRepositoryCollapsed(
         e,
-        c
-      ), await o();
+        x
+      ), await c();
     },
-    [e, o]
-  ), i = p(async () => {
-    if (!e || !(f != null && f.workspaceId)) {
+    [e, c]
+  ), g = m(async () => {
+    if (!e || !(r != null && r.workspaceId)) {
       console.error("Cannot reset without repositoryKey and active workspace");
       return;
     }
-    await m.resetRepositoryToWorkspaceDefaults(
+    await R.resetRepositoryToWorkspaceDefaults(
       e,
-      f.workspaceId
-    ), await o();
-  }, [e, f == null ? void 0 : f.workspaceId, o]), g = p(async () => {
-    await o();
-  }, [o]);
+      r.workspaceId
+    ), await c();
+  }, [e, r == null ? void 0 : r.workspaceId, c]), C = m(async () => {
+    await c();
+  }, [c]);
   return {
     workspaces: s,
-    repositoryState: f,
-    activeWorkspace: v,
+    repositoryState: r,
+    activeWorkspace: y,
     loading: b,
-    error: y,
-    getWorkspace: k,
-    createWorkspace: T,
-    updateWorkspace: z,
-    deleteWorkspace: I,
+    error: f,
+    getWorkspace: i,
+    createWorkspace: w,
+    updateWorkspace: S,
+    deleteWorkspace: A,
     applyWorkspace: E,
-    updateSizes: L,
-    updateCollapsed: x,
-    resetToDefaults: i,
-    refresh: g
+    updateSizes: F,
+    updateCollapsed: $,
+    resetToDefaults: g,
+    refresh: C
   };
 }
-function j(n = {}) {
+function de(o = {}) {
   const {
     initialFocus: e = null,
     collapsed: t = {},
     panelType: a = "three-panel",
-    onFocusChange: s
-  } = n, [l, f] = R(
+    onFocusChange: s,
+    events: n,
+    getPanelId: r
+  } = o, [l, y] = z(
     e
-  ), u = p(
-    (r) => {
-      f(r), s == null || s(r);
+  ), h = m(
+    (i) => {
+      const w = l;
+      if (y(i), s == null || s(i), n && r) {
+        if (w) {
+          const A = r(w);
+          A && n.emit({
+            type: "panel:blur",
+            source: "panel-layouts",
+            timestamp: Date.now(),
+            payload: {
+              panelId: A,
+              panelSlot: w,
+              nextPanelId: r(i)
+            }
+          });
+        }
+        const S = r(i);
+        S && n.emit({
+          type: "panel:focus",
+          source: "panel-layouts",
+          timestamp: Date.now(),
+          payload: {
+            panelId: S,
+            panelSlot: i,
+            source: "keyboard-shortcut"
+          }
+        });
+      }
     },
-    [s]
-  ), v = p(() => {
-    f(null), s == null || s(null);
-  }, [s]), w = p(() => {
-    const r = [];
-    return t.left || r.push("left"), r.push("middle"), a === "three-panel" && !t.right && r.push("right"), r;
-  }, [t, a]), b = p(() => {
-    const r = w();
-    if (r.length === 0) return;
+    [l, s, n, r]
+  ), b = m(() => {
+    const i = l;
+    if (y(null), s == null || s(null), n && r && i) {
+      const w = r(i);
+      w && n.emit({
+        type: "panel:blur",
+        source: "panel-layouts",
+        timestamp: Date.now(),
+        payload: {
+          panelId: w,
+          panelSlot: i
+        }
+      });
+    }
+  }, [l, s, n, r]), u = m(() => {
+    const i = [];
+    return t.left || i.push("left"), i.push("middle"), a === "three-panel" && !t.right && i.push("right"), i;
+  }, [t, a]), f = m(() => {
+    const i = u();
+    if (i.length === 0) return;
     if (l === null) {
-      u(r[0]);
+      h(i[0]);
       return;
     }
-    const o = r.indexOf(l);
-    if (o === -1) {
-      u(r[0]);
+    const w = i.indexOf(l);
+    if (w === -1) {
+      h(i[0]);
       return;
     }
-    const k = (o + 1) % r.length;
-    u(r[k]);
-  }, [l, w, u]), h = p(() => {
-    const r = w();
-    if (r.length === 0) return;
+    const S = (w + 1) % i.length;
+    h(i[S]);
+  }, [l, u, h]), p = m(() => {
+    const i = u();
+    if (i.length === 0) return;
     if (l === null) {
-      u(r[r.length - 1]);
+      h(i[i.length - 1]);
       return;
     }
-    const o = r.indexOf(l);
-    if (o === -1) {
-      u(r[r.length - 1]);
+    const w = i.indexOf(l);
+    if (w === -1) {
+      h(i[i.length - 1]);
       return;
     }
-    const k = o === 0 ? r.length - 1 : o - 1;
-    u(r[k]);
-  }, [l, w, u]), y = p(
-    (r) => l === r,
+    const S = w === 0 ? i.length - 1 : w - 1;
+    h(i[S]);
+  }, [l, u, h]), c = m(
+    (i) => l === i,
     [l]
   );
   return {
     focusedPanel: l,
-    setFocus: u,
-    clearFocus: v,
-    focusNext: b,
-    focusPrevious: h,
-    isFocused: y
+    setFocus: h,
+    clearFocus: b,
+    focusNext: f,
+    focusPrevious: p,
+    isFocused: c
   };
 }
-function q(n) {
+function ue(o) {
   const {
     enabled: e = !0,
     focusedPanel: t,
     collapsed: a,
     panelType: s,
-    setFocus: l,
-    onExpand: f,
-    onCollapse: u
-  } = n, v = C(t), w = C(a), b = C(s);
+    setFocus: n,
+    onExpand: r,
+    onCollapse: l
+  } = o, y = I(t), h = I(a), b = I(s);
   P(() => {
-    v.current = t;
+    y.current = t;
   }, [t]), P(() => {
-    w.current = a;
+    h.current = a;
   }, [a]), P(() => {
     b.current = s;
   }, [s]);
-  const h = p(
-    (y) => {
-      if (!y.altKey || y.ctrlKey || y.metaKey || y.shiftKey)
+  const u = m(
+    (f) => {
+      if (!f.altKey || f.ctrlKey || f.metaKey || f.shiftKey)
         return;
-      const r = y.code, o = v.current, k = w.current, T = b.current;
-      r === "Digit1" || r === "Numpad1" ? (y.preventDefault(), k.left ? f("left") : o !== "left" ? l("left") : (u("left"), l("middle"))) : r === "Digit2" || r === "Numpad2" ? (y.preventDefault(), l("middle")) : (r === "Digit3" || r === "Numpad3") && T === "three-panel" && (y.preventDefault(), k.right ? f("right") : o !== "right" ? l("right") : (u("right"), l("middle")));
+      const p = f.code, c = y.current, i = h.current, w = b.current;
+      p === "Digit1" || p === "Numpad1" ? (f.preventDefault(), i.left ? r("left") : c !== "left" ? n("left") : (l("left"), n("middle"))) : p === "Digit2" || p === "Numpad2" ? (f.preventDefault(), n("middle")) : (p === "Digit3" || p === "Numpad3") && w === "three-panel" && (f.preventDefault(), i.right ? r("right") : c !== "right" ? n("right") : (l("right"), n("middle")));
     },
-    [l, f, u]
+    [n, r, l]
   );
   P(() => {
     if (e)
-      return window.addEventListener("keydown", h), () => {
-        window.removeEventListener("keydown", h);
+      return window.addEventListener("keydown", u), () => {
+        window.removeEventListener("keydown", u);
       };
-  }, [e, h]);
+  }, [e, u]);
+}
+function pe(o, e, t, a) {
+  P(() => {
+    const s = e.on(
+      "panel:focus",
+      (r) => {
+        r.payload.panelId === o && t();
+      }
+    );
+    let n;
+    return a && (n = e.on(
+      "panel:blur",
+      (r) => {
+        r.payload.panelId === o && a();
+      }
+    )), () => {
+      s(), n == null || n();
+    };
+  }, [o, e, t, a]);
 }
-const X = ({
-  isFocused: n,
+const fe = ({
+  isFocused: o,
   className: e = "",
   style: t = {}
 }) => {
-  if (!n)
+  if (!o)
     return null;
   const a = {
     position: "absolute",
@@ -860,7 +920,7 @@ const X = ({
     transition: "opacity 0.15s ease-in-out",
     ...t
   };
-  return /* @__PURE__ */ O(
+  return /* @__PURE__ */ T(
     "div",
     {
       className: `panel-focus-indicator ${e}`,
@@ -869,19 +929,824 @@ const X = ({
       "aria-hidden": "true"
     }
   );
+}, ee = ({
+  value: o,
+  onChange: e,
+  placeholder: t = "> Type a command...",
+  onClose: a,
+  onEnter: s
+}) => {
+  const { theme: n } = N(), r = I(null);
+  P(() => {
+    r.current && r.current.focus();
+  }, []);
+  const l = (y) => {
+    switch (y.key) {
+      case "Enter":
+        y.preventDefault(), s == null || s();
+        break;
+      case "Escape":
+        y.preventDefault(), a();
+        break;
+    }
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      style: {
+        padding: "0",
+        borderBottom: `1px solid ${n.colors.border}`,
+        backgroundColor: n.colors.background
+      },
+      children: /* @__PURE__ */ T(
+        "input",
+        {
+          ref: r,
+          type: "text",
+          value: o,
+          onChange: (y) => e(y.target.value),
+          onKeyDown: l,
+          placeholder: t,
+          style: {
+            width: "100%",
+            padding: "16px 20px",
+            fontSize: "16px",
+            fontFamily: n.fonts.monospace,
+            backgroundColor: "transparent",
+            border: "none",
+            outline: "none",
+            color: n.colors.text,
+            caretColor: n.colors.primary
+          },
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: !1
+        }
+      )
+    }
+  );
+}, V = Y(
+  ({ command: o, isSelected: e, onClick: t, onMouseEnter: a }, s) => {
+    const { theme: n } = N(), { label: r, description: l, icon: y, shortcut: h } = o, [b, u] = Q.useState(!1);
+    return /* @__PURE__ */ W(
+      "div",
+      {
+        ref: s,
+        onClick: t,
+        onMouseEnter: () => {
+          u(!0), a();
+        },
+        onMouseLeave: () => u(!1),
+        style: {
+          padding: "10px 16px",
+          cursor: "pointer",
+          backgroundColor: e || b ? n.colors.backgroundSecondary : "transparent",
+          borderLeft: e || b ? `3px solid ${n.colors.primary}` : "3px solid transparent",
+          transition: "all 0.1s ease",
+          display: "flex",
+          alignItems: "center",
+          gap: "12px"
+        },
+        onMouseDown: (f) => {
+          f.preventDefault();
+        },
+        children: [
+          y && /* @__PURE__ */ T(
+            "div",
+            {
+              style: {
+                flexShrink: 0,
+                width: "20px",
+                height: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "16px",
+                color: e || b ? n.colors.primary : n.colors.textSecondary
+              },
+              children: y
+            }
+          ),
+          /* @__PURE__ */ W("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ T(
+              "div",
+              {
+                style: {
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: e || b ? n.colors.text : n.colors.textSecondary,
+                  marginBottom: l ? "2px" : 0
+                },
+                children: r
+              }
+            ),
+            l && /* @__PURE__ */ T(
+              "div",
+              {
+                style: {
+                  fontSize: "12px",
+                  color: n.colors.textMuted,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: l
+              }
+            )
+          ] }),
+          h && /* @__PURE__ */ T(
+            "div",
+            {
+              style: {
+                flexShrink: 0,
+                fontSize: "11px",
+                color: n.colors.textMuted,
+                padding: "2px 8px",
+                backgroundColor: n.colors.background,
+                border: `1px solid ${n.colors.border}`,
+                borderRadius: "4px",
+                fontFamily: n.fonts.monospace
+              },
+              children: h
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+V.displayName = "CommandItem";
+const te = ({
+  commands: o,
+  selectedIndex: e,
+  onSelect: t,
+  onHover: a,
+  maxResults: s = 10
+}) => {
+  const { theme: n } = N(), r = I(null), l = I(null), y = o.slice(0, s);
+  P(() => {
+    if (l.current && r.current) {
+      const u = l.current, f = r.current, p = u.offsetTop, c = p + u.offsetHeight, i = f.scrollTop, w = f.clientHeight;
+      p < i ? f.scrollTop = p - 8 : c > i + w && (f.scrollTop = c - w + 8);
+    }
+  }, [e]);
+  const h = y.reduce((u, f, p) => {
+    const c = f.category || "Other";
+    return u[c] || (u[c] = []), u[c].push({ command: f, index: p }), u;
+  }, {}), b = Object.keys(h).sort((u, f) => u === "Other" ? 1 : f === "Other" ? -1 : u.localeCompare(f));
+  return /* @__PURE__ */ W(
+    "div",
+    {
+      ref: r,
+      style: {
+        overflowY: "auto",
+        maxHeight: "400px",
+        padding: "8px 0"
+      },
+      children: [
+        b.map((u) => /* @__PURE__ */ W("div", { children: [
+          b.length > 1 && /* @__PURE__ */ T(
+            "div",
+            {
+              style: {
+                padding: "8px 16px 4px",
+                fontSize: "11px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                color: n.colors.textMuted,
+                letterSpacing: "0.5px"
+              },
+              children: u
+            }
+          ),
+          h[u].map(({ command: f, index: p }) => /* @__PURE__ */ T(
+            V,
+            {
+              command: f,
+              isSelected: p === e,
+              onClick: () => t(f),
+              onMouseEnter: () => a(p),
+              ref: p === e ? l : void 0
+            },
+            f.id
+          ))
+        ] }, u)),
+        o.length > s && /* @__PURE__ */ W(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              fontSize: "12px",
+              color: n.colors.textMuted,
+              textAlign: "center",
+              borderTop: `1px solid ${n.colors.border}`
+            },
+            children: [
+              "Showing ",
+              s,
+              " of ",
+              o.length,
+              " results"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, me = ({
+  commandPalette: o,
+  config: e
+}) => {
+  const { theme: t } = N(), a = I(null), {
+    isOpen: s,
+    close: n,
+    query: r,
+    setQuery: l,
+    filteredCommands: y,
+    selectedIndex: h,
+    setSelectedIndex: b,
+    executeSelected: u
+  } = o;
+  if (P(() => {
+    if (!s) return;
+    const c = (w) => {
+      a.current && !a.current.contains(w.target) && n();
+    }, i = setTimeout(() => {
+      document.addEventListener("mousedown", c);
+    }, 100);
+    return () => {
+      clearTimeout(i), document.removeEventListener("mousedown", c);
+    };
+  }, [s, n]), !s)
+    return null;
+  const f = (e == null ? void 0 : e.maxHeight) || "50vh", p = (e == null ? void 0 : e.placeholder) || "> Type a command...";
+  return /* @__PURE__ */ W(G, { children: [
+    /* @__PURE__ */ T(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.4)",
+          backdropFilter: "blur(2px)",
+          zIndex: 999
+        },
+        onClick: n
+      }
+    ),
+    /* @__PURE__ */ W(
+      "div",
+      {
+        ref: a,
+        className: e == null ? void 0 : e.className,
+        style: {
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          maxHeight: f,
+          backgroundColor: t.colors.surface,
+          borderTop: `1px solid ${t.colors.border}`,
+          boxShadow: t.shadows[2],
+          zIndex: 1e3,
+          display: "flex",
+          flexDirection: "column-reverse",
+          ...e == null ? void 0 : e.style
+        },
+        children: [
+          /* @__PURE__ */ W("div", { children: [
+            /* @__PURE__ */ T(
+              ee,
+              {
+                value: r,
+                onChange: l,
+                placeholder: p,
+                onClose: n,
+                onEnter: u
+              }
+            ),
+            /* @__PURE__ */ W(
+              "div",
+              {
+                style: {
+                  padding: "8px 16px",
+                  borderTop: `1px solid ${t.colors.border}`,
+                  display: "flex",
+                  gap: "16px",
+                  fontSize: "12px",
+                  color: t.colors.textMuted,
+                  backgroundColor: t.colors.background
+                },
+                children: [
+                  /* @__PURE__ */ W("span", { children: [
+                    /* @__PURE__ */ T("kbd", { style: { padding: "2px 6px", backgroundColor: t.colors.backgroundSecondary, borderRadius: "3px", border: `1px solid ${t.colors.border}` }, children: "Enter" }),
+                    " Execute"
+                  ] }),
+                  /* @__PURE__ */ W("span", { children: [
+                    /* @__PURE__ */ T("kbd", { style: { padding: "2px 6px", backgroundColor: t.colors.backgroundSecondary, borderRadius: "3px", border: `1px solid ${t.colors.border}` }, children: "Esc" }),
+                    " Close"
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          y.length > 0 && /* @__PURE__ */ T(
+            te,
+            {
+              commands: y,
+              selectedIndex: h,
+              onSelect: (c) => {
+                o.executeCommand(c.id);
+              },
+              onHover: b,
+              maxResults: e == null ? void 0 : e.maxResults
+            }
+          ),
+          r && y.length === 0 && /* @__PURE__ */ W(
+            "div",
+            {
+              style: {
+                padding: "24px 16px",
+                color: t.colors.textMuted,
+                textAlign: "center",
+                fontSize: "14px"
+              },
+              children: [
+                'No commands found for "',
+                r,
+                '"'
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
+class B {
+  constructor() {
+    D(this, "commands", /* @__PURE__ */ new Map());
+    D(this, "listeners", /* @__PURE__ */ new Set());
+  }
+  /**
+   * Register one or more commands
+   * @param commands - Array of commands to register
+   */
+  registerCommands(e) {
+    e.forEach((t) => {
+      this.commands.set(t.id, t);
+    }), this.notifyListeners();
+  }
+  /**
+   * Register a single command
+   * @param command - Command to register
+   */
+  registerCommand(e) {
+    this.commands.set(e.id, e), this.notifyListeners();
+  }
+  /**
+   * Unregister commands by ID
+   * @param commandIds - Array of command IDs to unregister
+   */
+  unregisterCommands(e) {
+    e.forEach((t) => {
+      this.commands.delete(t);
+    }), this.notifyListeners();
+  }
+  /**
+   * Unregister a single command
+   * @param commandId - Command ID to unregister
+   */
+  unregisterCommand(e) {
+    this.commands.delete(e), this.notifyListeners();
+  }
+  /**
+   * Get all registered commands
+   * @param context - Command context for availability checks
+   * @returns Array of available commands
+   */
+  getCommands(e) {
+    const t = Array.from(this.commands.values());
+    return e ? t.filter((a) => a.isAvailable ? a.isAvailable(e) : !0) : t;
+  }
+  /**
+   * Get a command by ID
+   * @param commandId - Command ID
+   * @returns Command if found, undefined otherwise
+   */
+  getCommand(e) {
+    return this.commands.get(e);
+  }
+  /**
+   * Execute a command by ID
+   * @param commandId - Command ID to execute
+   * @param context - Command context
+   */
+  async executeCommand(e, t) {
+    var s, n;
+    const a = this.commands.get(e);
+    if (!a) {
+      console.warn(`Command not found: ${e}`);
+      return;
+    }
+    if (a.isAvailable && !a.isAvailable(t)) {
+      console.warn(`Command not available: ${e}`);
+      return;
+    }
+    try {
+      await a.execute(t), (s = t.events) == null || s.emit({
+        type: "command:executed",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: {
+          commandId: a.id,
+          commandLabel: a.label
+        }
+      });
+    } catch (r) {
+      console.error(`Error executing command ${e}:`, r), (n = t.events) == null || n.emit({
+        type: "command:error",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: {
+          commandId: a.id,
+          error: r instanceof Error ? r.message : String(r)
+        }
+      });
+    }
+  }
+  /**
+   * Search commands by query
+   * @param query - Search query
+   * @param context - Command context for availability checks
+   * @returns Filtered and sorted commands
+   */
+  searchCommands(e, t) {
+    const a = this.getCommands(t);
+    if (!e.trim())
+      return this.sortCommands(a);
+    const s = e.toLowerCase();
+    return a.map((r) => {
+      var y, h;
+      let l = 0;
+      return r.label.toLowerCase() === s ? l += 1e3 : r.label.toLowerCase().startsWith(s) ? l += 500 : r.label.toLowerCase().includes(s) && (l += 250), (y = r.description) != null && y.toLowerCase().includes(s) && (l += 100), r.keywords && r.keywords.some(
+        (u) => u.toLowerCase().includes(s)
+      ) && (l += 150), (h = r.category) != null && h.toLowerCase().includes(s) && (l += 50), r.priority && (l += r.priority), { command: r, score: l };
+    }).filter((r) => r.score > 0).sort((r, l) => l.score - r.score).map((r) => r.command);
+  }
+  /**
+   * Sort commands by priority and label
+   * @param commands - Commands to sort
+   * @returns Sorted commands
+   */
+  sortCommands(e) {
+    return e.sort((t, a) => {
+      const s = (a.priority || 0) - (t.priority || 0);
+      if (s !== 0)
+        return s;
+      const n = t.category || "", r = a.category || "", l = n.localeCompare(r);
+      return l !== 0 ? l : t.label.localeCompare(a.label);
+    });
+  }
+  /**
+   * Subscribe to registry changes
+   * @param listener - Callback function called when registry changes
+   * @returns Unsubscribe function
+   */
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  /**
+   * Clear all commands
+   */
+  clear() {
+    this.commands.clear(), this.notifyListeners();
+  }
+  /**
+   * Get count of registered commands
+   */
+  get size() {
+    return this.commands.size;
+  }
+  /**
+   * Notify all listeners of registry changes
+   */
+  notifyListeners() {
+    this.listeners.forEach((e) => e());
+  }
+}
+let O = null;
+function ye() {
+  return O || (O = new B()), O;
+}
+function he() {
+  O = null;
+}
+function ge({
+  context: o,
+  commands: e = [],
+  keyboard: t = { key: " ", altKey: !0 },
+  config: a = {},
+  registry: s
+}) {
+  const [n, r] = z(!1), [l, y] = z(""), [h, b] = z(0), [u, f] = z([]), p = K(
+    () => s || new B(),
+    [s]
+  ), c = K(
+    () => ({
+      ...o,
+      closeCommandPalette: () => r(!1)
+    }),
+    [o]
+  );
+  P(() => {
+    let d = !0;
+    const v = p.subscribe(() => {
+      if (d) {
+        const L = p.getCommands(c);
+        f(L);
+      }
+    });
+    if (e.length > 0)
+      p.registerCommands(e);
+    else {
+      const L = p.getCommands(c);
+      f(L);
+    }
+    return () => {
+      d = !1, v();
+    };
+  }, [p]);
+  const i = K(() => (a.fuzzySearch === !1, p.searchCommands(l, c)), [l, p, c, a.fuzzySearch]);
+  P(() => {
+    b(0);
+  }, [i]);
+  const w = m(() => {
+    var d;
+    r(!0), y(""), b(0), (d = o.events) == null || d.emit({
+      type: "command-palette:opened",
+      source: "command-palette",
+      timestamp: Date.now(),
+      payload: {}
+    });
+  }, [o.events]), S = m(() => {
+    var d;
+    r(!1), y(""), b(0), (d = o.events) == null || d.emit({
+      type: "command-palette:closed",
+      source: "command-palette",
+      timestamp: Date.now(),
+      payload: {}
+    });
+  }, [o.events]), A = m(() => {
+    n ? S() : w();
+  }, [n, w, S]), E = m(
+    async (d) => {
+      await p.executeCommand(d, c), S();
+    },
+    [p, c, S]
+  ), F = m(() => {
+    b((d) => {
+      const v = a.maxResults || i.length, L = Math.min(i.length, v) - 1;
+      return d < L ? d + 1 : 0;
+    });
+  }, [i.length, a.maxResults]), $ = m(() => {
+    b((d) => {
+      const v = a.maxResults || i.length, L = Math.min(i.length, v) - 1;
+      return d > 0 ? d - 1 : L;
+    });
+  }, [i.length, a.maxResults]), g = m(async () => {
+    const d = i[0];
+    d && await E(d.id);
+  }, [i, E]), C = m(
+    (d) => {
+      p.registerCommands(d);
+    },
+    [p]
+  ), x = m(
+    (d) => {
+      p.unregisterCommands(d);
+    },
+    [p]
+  ), k = m(
+    (d) => {
+      const {
+        key: v = " ",
+        altKey: L = !0,
+        ctrlKey: J = !1,
+        metaKey: _ = !1,
+        shiftKey: j = !1
+      } = t, H = d.altKey === L && d.ctrlKey === J && d.metaKey === _ && d.shiftKey === j;
+      if ((v === " " ? d.code === "Space" : d.key === v) && H) {
+        const M = d.target;
+        if (M.tagName === "INPUT" || M.tagName === "TEXTAREA" || M.isContentEditable)
+          return;
+        d.preventDefault(), A();
+      }
+    },
+    [t, A]
+  );
+  return P(() => (window.addEventListener("keydown", k), () => window.removeEventListener("keydown", k)), [k]), {
+    isOpen: n,
+    open: w,
+    close: S,
+    toggle: A,
+    query: l,
+    setQuery: y,
+    filteredCommands: i,
+    executeCommand: E,
+    selectedIndex: h,
+    setSelectedIndex: b,
+    selectNext: F,
+    selectPrevious: $,
+    executeSelected: g,
+    commands: u,
+    registerCommands: C,
+    unregisterCommands: x
+  };
+}
+const ae = [
+  {
+    id: "panel.focus.left",
+    label: "Focus Left Panel",
+    description: "Set focus to the left panel",
+    icon: "◀",
+    category: "Panel Navigation",
+    shortcut: "Alt+1",
+    priority: 100,
+    keywords: ["left", "sidebar", "focus", "switch"],
+    execute: (o) => {
+      o.setFocus("left");
+    },
+    isAvailable: (o) => o.focusedPanel !== "left"
+  },
+  {
+    id: "panel.focus.middle",
+    label: "Focus Middle Panel",
+    description: "Set focus to the middle panel",
+    icon: "▣",
+    category: "Panel Navigation",
+    shortcut: "Alt+2",
+    priority: 100,
+    keywords: ["middle", "center", "main", "focus", "switch"],
+    execute: (o) => {
+      o.setFocus("middle");
+    },
+    isAvailable: (o) => o.focusedPanel !== "middle"
+  },
+  {
+    id: "panel.focus.right",
+    label: "Focus Right Panel",
+    description: "Set focus to the right panel",
+    icon: "▶",
+    category: "Panel Navigation",
+    shortcut: "Alt+3",
+    priority: 100,
+    keywords: ["right", "sidebar", "focus", "switch"],
+    execute: (o) => {
+      o.setFocus("right");
+    },
+    isAvailable: (o) => o.focusedPanel !== "right"
+  },
+  {
+    id: "panel.toggle.left",
+    label: "Toggle Left Panel",
+    description: "Expand or collapse the left panel",
+    icon: "◀◀",
+    category: "Panel Control",
+    keywords: ["toggle", "left", "collapse", "expand", "hide", "show"],
+    priority: 80,
+    execute: (o) => {
+      var e;
+      (e = o.events) == null || e.emit({
+        type: "panel:toggle",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: { panelId: "left" }
+      });
+    }
+  },
+  {
+    id: "panel.toggle.right",
+    label: "Toggle Right Panel",
+    description: "Expand or collapse the right panel",
+    icon: "▶▶",
+    category: "Panel Control",
+    keywords: ["toggle", "right", "collapse", "expand", "hide", "show"],
+    priority: 80,
+    execute: (o) => {
+      var e;
+      (e = o.events) == null || e.emit({
+        type: "panel:toggle",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: { panelId: "right" }
+      });
+    }
+  },
+  {
+    id: "panel.collapse.all",
+    label: "Collapse All Panels",
+    description: "Collapse all side panels to maximize middle panel",
+    icon: "⬌",
+    category: "Panel Control",
+    keywords: ["collapse", "hide", "all", "maximize", "focus mode"],
+    priority: 70,
+    execute: (o) => {
+      var e;
+      (e = o.events) == null || e.emit({
+        type: "panel:collapse-all",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: {}
+      });
+    }
+  },
+  {
+    id: "panel.expand.all",
+    label: "Expand All Panels",
+    description: "Expand all side panels to default layout",
+    icon: "⬍",
+    category: "Panel Control",
+    keywords: ["expand", "show", "all", "restore", "default"],
+    priority: 70,
+    execute: (o) => {
+      var e;
+      (e = o.events) == null || e.emit({
+        type: "panel:expand-all",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: {}
+      });
+    }
+  },
+  {
+    id: "panel.refresh",
+    label: "Refresh Panel Data",
+    description: "Reload data for the currently focused panel",
+    icon: "↻",
+    category: "Panel Control",
+    keywords: ["refresh", "reload", "update", "sync"],
+    priority: 60,
+    execute: (o) => {
+      var t;
+      const e = o.focusedPanel;
+      e && ((t = o.events) == null || t.emit({
+        type: "panel:refresh",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: { panelId: e }
+      }));
+    },
+    isAvailable: (o) => o.focusedPanel !== null
+  },
+  {
+    id: "panel.reset.layout",
+    label: "Reset Panel Layout",
+    description: "Reset panel sizes to default layout",
+    icon: "⟲",
+    category: "Panel Control",
+    keywords: ["reset", "layout", "default", "restore"],
+    priority: 50,
+    execute: (o) => {
+      var e;
+      (e = o.events) == null || e.emit({
+        type: "panel:reset-layout",
+        source: "command-palette",
+        timestamp: Date.now(),
+        payload: {}
+      });
+    }
+  }
+];
+function we() {
+  return ae;
+}
 export {
-  Z as EditableConfigurablePanelLayout,
-  X as FocusIndicator,
-  $ as LocalStoragePersistenceAdapter,
-  N as LocalStorageWorkspaceAdapter,
-  G as ResponsiveConfigurablePanelLayout,
-  m as WorkspaceLayoutService,
-  Q as mapThemeToPanelVars,
-  H as mapThemeToTabVars,
-  j as usePanelFocus,
-  q as usePanelKeyboardShortcuts,
-  _ as usePanelPersistence,
-  K as useWorkspace
+  ee as CommandInput,
+  V as CommandItem,
+  te as CommandList,
+  me as CommandPalette,
+  B as CommandRegistryService,
+  xe as EditableConfigurablePanelLayout,
+  fe as FocusIndicator,
+  Z as LocalStoragePersistenceAdapter,
+  U as LocalStorageWorkspaceAdapter,
+  Ce as ResponsiveConfigurablePanelLayout,
+  R as WorkspaceLayoutService,
+  ye as getGlobalCommandRegistry,
+  we as getPanelCommands,
+  ve as mapThemeToPanelVars,
+  Se as mapThemeToTabVars,
+  ae as panelCommands,
+  he as resetGlobalCommandRegistry,
+  ge as useCommandPalette,
+  de as usePanelFocus,
+  pe as usePanelFocusListener,
+  ue as usePanelKeyboardShortcuts,
+  ie as usePanelPersistence,
+  ce as useWorkspace
 };
 //# sourceMappingURL=index.esm.js.map