@principal-ade/panel-layouts 0.3.0 → 0.3.2

package/dist/index.esm.js

@@ -1,13 +1,13 @@
-import './index.css';var he = Object.defineProperty;
-var ge = (o, e, t) => e in o ? he(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var U = (o, e, t) => ge(o, typeof e != "symbol" ? e + "" : e, t);
-import { EditableConfigurablePanelLayout as lt, ResponsiveConfigurablePanelLayout as ct, mapThemeToPanelVars as dt, mapThemeToTabVars as pt } from "@principal-ade/panels";
-import { useState as W, useRef as M, useEffect as A, useCallback as g, useMemo as me } from "react";
-import { jsx as s, jsxs as m, Fragment as ke } from "react/jsx-runtime";
-import { useTheme as K } from "@principal-ade/industry-theme";
-class xe {
+import './index.css';var Pe = Object.defineProperty;
+var We = (o, e, t) => e in o ? Pe(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var Y = (o, e, t) => We(o, typeof e != "symbol" ? e + "" : e, t);
+import { EditableConfigurablePanelLayout as bt, ResponsiveConfigurablePanelLayout as wt, mapThemeToPanelVars as St, mapThemeToTabVars as vt } from "@principal-ade/panels";
+import { useState as P, useRef as N, useEffect as R, useCallback as k, useMemo as ne } from "react";
+import { jsx as s, jsxs as m, Fragment as se } from "react/jsx-runtime";
+import { useTheme as H } from "@principal-ade/industry-theme";
+class ze {
   constructor() {
-    U(this, "storageKey", "panel-layouts");
+    Y(this, "storageKey", "panel-layouts");
   }
   async load(e) {
     try {
@@ -28,122 +28,122 @@ class xe {
     }
   }
 }
-function Ke(o) {
+function ot(o) {
   const {
     viewKey: e,
     defaultSizes: t,
     panelType: r,
-    adapter: a = new xe()
-  } = o, [n, i] = W(t), [d, y] = W(o.collapsed), c = M(o.collapsed), T = M({}), p = M(null), u = M(null);
-  A(() => {
+    adapter: n = new ze()
+  } = o, [a, i] = P(t), [c, y] = P(o.collapsed), l = N(o.collapsed), b = N({}), p = N(null), f = N(null);
+  R(() => {
     (async () => {
-      const b = await a.load(e);
-      b != null && b.sizes && (i(b.sizes), x(b.sizes));
+      const v = await n.load(e);
+      v != null && v.sizes && (i(v.sizes), x(v.sizes));
     })();
   }, [e]);
-  const x = g(
-    (f) => {
-      "left" in f && f.left > 0 && (T.current.left = f.left), "middle" in f && f.middle > 0 && (T.current.middle = f.middle), "right" in f && f.right > 0 && (T.current.right = f.right);
+  const x = k(
+    (w) => {
+      "left" in w && w.left > 0 && (b.current.left = w.left), "middle" in w && w.middle > 0 && (b.current.middle = w.middle), "right" in w && w.right > 0 && (b.current.right = w.right);
     },
     []
-  ), k = g(
-    (f) => {
-      const b = T.current[f];
-      if (b && b > 0)
-        return b;
-      if (f === "left" && "left" in t && t.left > 0)
+  ), h = k(
+    (w) => {
+      const v = b.current[w];
+      if (v && v > 0)
+        return v;
+      if (w === "left" && "left" in t && t.left > 0)
         return t.left;
-      if (f === "right" && "right" in t && t.right > 0)
+      if (w === "right" && "right" in t && t.right > 0)
         return t.right;
     },
     [t]
-  ), l = M(t);
-  A(() => {
-    ("left" in t && t.left !== l.current.left || "middle" in t && "middle" in l.current && t.middle !== l.current.middle || "right" in t && t.right !== l.current.right) && (i(t), x(t), l.current = t);
-  }, [t, x]), A(() => {
-    const f = o.collapsed.left !== c.current.left, b = "right" in o.collapsed && "right" in c.current && o.collapsed.right !== c.current.right;
-    (f || b) && (y(o.collapsed), c.current = { ...o.collapsed });
+  ), d = N(t);
+  R(() => {
+    ("left" in t && t.left !== d.current.left || "middle" in t && "middle" in d.current && t.middle !== d.current.middle || "right" in t && t.right !== d.current.right) && (i(t), x(t), d.current = t);
+  }, [t, x]), R(() => {
+    const w = o.collapsed.left !== l.current.left, v = "right" in o.collapsed && "right" in l.current && o.collapsed.right !== l.current.right;
+    (w || v) && (y(o.collapsed), l.current = { ...o.collapsed });
   }, [o.collapsed.left, o.collapsed.right]);
-  const h = g(
-    async (f) => {
+  const u = k(
+    async (w) => {
       try {
-        await a.save(e, { sizes: f });
-      } catch (b) {
+        await n.save(e, { sizes: w });
+      } catch (v) {
         console.error(
           `Failed to save panel preferences for ${e}:`,
-          b
+          v
         );
       }
     },
-    [e, a]
-  ), C = g(
-    (f) => {
-      const b = { ...f };
-      let v = !0;
-      if ("left" in f) {
-        const S = !!(d != null && d.left), _ = f.left;
-        if (S) {
-          const P = k("left");
-          P !== void 0 && P > 0 ? b.left = P : v = !1;
-        } else _ === 0 && (v = !1);
+    [e, n]
+  ), C = k(
+    (w) => {
+      const v = { ...w };
+      let S = !0;
+      if ("left" in w) {
+        const T = !!(c != null && c.left), W = w.left;
+        if (T) {
+          const z = h("left");
+          z !== void 0 && z > 0 ? v.left = z : S = !1;
+        } else W === 0 && (S = !1);
       }
-      if (r === "three-panel" && "right" in f) {
-        const S = !!(d != null && d.right), _ = f.right;
-        if (S) {
-          const P = k("right");
-          P !== void 0 && P > 0 ? b.right = P : v = !1;
-        } else _ === 0 && (v = !1);
+      if (r === "three-panel" && "right" in w) {
+        const T = !!(c != null && c.right), W = w.right;
+        if (T) {
+          const z = h("right");
+          z !== void 0 && z > 0 ? v.right = z : S = !1;
+        } else W === 0 && (S = !1);
       }
-      if (i(b), x(b), p.current && (clearTimeout(p.current), p.current = null), !v) {
-        u.current = null;
+      if (i(v), x(v), p.current && (clearTimeout(p.current), p.current = null), !S) {
+        f.current = null;
         return;
       }
-      u.current = b, p.current = setTimeout(() => {
-        const S = u.current;
-        S && (h(S), u.current = null), p.current = null;
+      f.current = v, p.current = setTimeout(() => {
+        const T = f.current;
+        T && (u(T), f.current = null), p.current = null;
       }, 500);
     },
     [
-      d,
-      k,
-      r,
+      c,
       h,
+      r,
+      u,
       x
     ]
   );
-  A(() => () => {
+  R(() => () => {
     if (p.current) {
-      const f = u.current;
-      f && (h(f), u.current = null), clearTimeout(p.current), p.current = null;
+      const w = f.current;
+      w && (u(w), f.current = null), clearTimeout(p.current), p.current = null;
     }
-  }, [h]);
-  const E = g(async () => {
-  }, []), R = g(async () => {
-  }, []), I = g(async () => {
-  }, []), F = g(async () => {
+  }, [u]);
+  const L = k(async () => {
+  }, []), $ = k(async () => {
+  }, []), I = k(async () => {
+  }, []), _ = k(async () => {
   }, []);
   return r === "three-panel" ? {
     type: "three-panel",
-    sizes: n,
-    collapsed: d,
+    sizes: a,
+    collapsed: c,
     handlePanelResize: C,
-    handleLeftCollapseComplete: E,
-    handleLeftExpandComplete: R,
+    handleLeftCollapseComplete: L,
+    handleLeftExpandComplete: $,
     handleRightCollapseComplete: I,
-    handleRightExpandComplete: F
+    handleRightExpandComplete: _
   } : {
     type: "two-panel",
-    sizes: n,
-    collapsed: d,
+    sizes: a,
+    collapsed: c,
     handlePanelResize: C,
-    handleLeftCollapseComplete: E,
-    handleLeftExpandComplete: R
+    handleLeftCollapseComplete: L,
+    handleLeftExpandComplete: $
   };
 }
-class we {
+class Le {
   constructor() {
-    U(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
-    U(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
+    Y(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
+    Y(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
   }
   /**
    * Load all user-created workspace presets
@@ -203,13 +203,13 @@ class we {
       for (let t = 0; t < localStorage.length; t++) {
         const r = localStorage.key(t);
         if (r && r.startsWith(this.REPO_STATE_PREFIX)) {
-          const a = r.substring(this.REPO_STATE_PREFIX.length), n = localStorage.getItem(r);
-          if (n)
+          const n = r.substring(this.REPO_STATE_PREFIX.length), a = localStorage.getItem(r);
+          if (a)
             try {
-              e[a] = JSON.parse(n);
+              e[n] = JSON.parse(a);
             } catch (i) {
               console.error(
-                `Failed to parse repository state for ${a}:`,
+                `Failed to parse repository state for ${n}:`,
                 i
               );
             }
@@ -221,7 +221,7 @@ class we {
     }
   }
 }
-class L {
+class D {
   /**
    * Configure a custom storage adapter (for Electron IPC or remote storage)
    */
@@ -248,7 +248,7 @@ class L {
    * Create a new workspace layout
    */
   static async createWorkspaceLayout(e) {
-    const t = await this.adapter.loadWorkspacePresets(), r = this.generateWorkspaceId(e.name), a = {
+    const t = await this.adapter.loadWorkspacePresets(), r = this.generateWorkspaceId(e.name), n = {
       id: r,
       name: e.name,
       description: e.description,
@@ -258,34 +258,34 @@ class L {
       createdAt: Date.now(),
       updatedAt: Date.now(),
       isBuiltIn: !1
-    }, n = {
+    }, a = {
       ...t,
-      [r]: a
+      [r]: n
     };
-    return await this.adapter.saveWorkspacePresets(n), a;
+    return await this.adapter.saveWorkspacePresets(a), n;
   }
   /**
    * Update an existing workspace layout
    */
   static async updateWorkspaceLayout(e, t) {
-    const r = await this.adapter.loadWorkspacePresets(), a = r[e];
-    if (!a)
+    const r = await this.adapter.loadWorkspacePresets(), n = r[e];
+    if (!n)
       return console.error(`Workspace layout ${e} not found`), null;
-    if (a.isBuiltIn)
+    if (n.isBuiltIn)
       return console.error(`Cannot update built-in workspace layout ${e}`), null;
-    const n = {
-      ...a,
+    const a = {
+      ...n,
       ...t,
       id: e,
       // Preserve ID
-      createdAt: a.createdAt,
+      createdAt: n.createdAt,
       // Preserve creation time
       updatedAt: Date.now()
     }, i = {
       ...r,
-      [e]: n
+      [e]: a
     };
-    return await this.adapter.saveWorkspacePresets(i), n;
+    return await this.adapter.saveWorkspacePresets(i), a;
   }
   /**
    * Delete a workspace layout
@@ -296,8 +296,8 @@ class L {
       return console.error(`Workspace layout ${e} not found`), !1;
     if (r.isBuiltIn)
       return console.error(`Cannot delete built-in workspace layout ${e}`), !1;
-    const a = { ...t };
-    return delete a[e], await this.adapter.saveWorkspacePresets(a), !0;
+    const n = { ...t };
+    return delete n[e], await this.adapter.saveWorkspacePresets(n), !0;
   }
   /**
    * Get repository state (which workspace + current sizes/collapsed)
@@ -335,23 +335,23 @@ class L {
    * Check if repository state differs from workspace defaults
    */
   static hasStateDeviation(e, t) {
-    const r = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : !1, a = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : !1;
-    return { hasSizeDeviation: r, hasCollapsedDeviation: a };
+    const r = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : !1, n = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : !1;
+    return { hasSizeDeviation: r, hasCollapsedDeviation: n };
   }
   /**
    * Update workspace defaults from repository state
    */
   static async updateWorkspaceFromRepositoryState(e, t) {
-    const r = await this.getWorkspaceLayout(e), a = await this.getRepositoryState(t);
-    if (!r || !a || r.isBuiltIn) {
+    const r = await this.getWorkspaceLayout(e), n = await this.getRepositoryState(t);
+    if (!r || !n || r.isBuiltIn) {
       console.error(
         "Cannot update built-in workspace or workspace/state not found"
       );
       return;
     }
     await this.updateWorkspaceLayout(e, {
-      defaultSizes: a.sizes,
-      defaultCollapsed: a.collapsed
+      defaultSizes: n.sizes,
+      defaultCollapsed: n.collapsed
     });
   }
   /**
@@ -363,9 +363,9 @@ class L {
       console.error(`Workspace ${t} not found`);
       return;
     }
-    const a = await this.getRepositoryState(e);
-    a && await this.setRepositoryState(e, {
-      ...a,
+    const n = await this.getRepositoryState(e);
+    n && await this.setRepositoryState(e, {
+      ...n,
       sizes: r.defaultSizes || { left: 20, middle: 45, right: 35 },
       collapsed: r.defaultCollapsed || { left: !1, right: !1 }
     });
@@ -381,8 +381,8 @@ class L {
    */
   static async findMatchingWorkspace(e) {
     const t = await this.getWorkspaceLayouts();
-    for (const [r, a] of Object.entries(t))
-      if (this.isLayoutMatchingWorkspace(e, a))
+    for (const [r, n] of Object.entries(t))
+      if (this.isLayoutMatchingWorkspace(e, n))
         return r;
     return null;
   }
@@ -610,296 +610,296 @@ class L {
     Object.keys(e).length;
   }
 }
-U(L, "adapter", new we());
-function Ve(o = {}) {
-  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: r } = o, [a, n] = W(
+Y(D, "adapter", new Le());
+function rt(o = {}) {
+  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: r } = o, [n, a] = P(
     {}
-  ), [i, d] = W(null), [y, c] = W(null), [T, p] = W(!0), [u, x] = W(null), k = g(async () => {
+  ), [i, c] = P(null), [y, l] = P(null), [b, p] = P(!0), [f, x] = P(null), h = k(async () => {
     try {
       p(!0), x(null);
-      const v = await L.getWorkspaceLayouts();
-      if (n(v), e) {
-        let S = await L.getRepositoryState(e);
-        if (!S && t) {
-          const _ = r || "project-management", P = await L.getWorkspaceLayout(_);
-          P && (S = {
-            workspaceId: _,
-            sizes: P.defaultSizes || {
+      const S = await D.getWorkspaceLayouts();
+      if (a(S), e) {
+        let T = await D.getRepositoryState(e);
+        if (!T && t) {
+          const W = r || "project-management", z = await D.getWorkspaceLayout(W);
+          z && (T = {
+            workspaceId: W,
+            sizes: z.defaultSizes || {
               left: 20,
               middle: 45,
               right: 35
             },
-            collapsed: P.defaultCollapsed || {
+            collapsed: z.defaultCollapsed || {
               left: !1,
               right: !1
             }
-          }, await L.setRepositoryState(
+          }, await D.setRepositoryState(
             e,
-            S
+            T
           ));
         }
-        if (d(S), S != null && S.workspaceId) {
-          const _ = await L.getWorkspaceLayout(
-            S.workspaceId
+        if (c(T), T != null && T.workspaceId) {
+          const W = await D.getWorkspaceLayout(
+            T.workspaceId
           );
-          c(_);
+          l(W);
         } else
-          c(null);
+          l(null);
       }
-    } catch (v) {
-      x(v), console.error("Failed to load workspace data:", v);
+    } catch (S) {
+      x(S), console.error("Failed to load workspace data:", S);
     } finally {
       p(!1);
     }
   }, [e, t, r]);
-  A(() => {
-    k();
-  }, [k]);
-  const l = g(
-    async (v) => await L.getWorkspaceLayout(v),
+  R(() => {
+    h();
+  }, [h]);
+  const d = k(
+    async (S) => await D.getWorkspaceLayout(S),
     []
-  ), h = g(
-    async (v) => {
-      const S = await L.createWorkspaceLayout(v);
-      return await k(), S;
+  ), u = k(
+    async (S) => {
+      const T = await D.createWorkspaceLayout(S);
+      return await h(), T;
     },
-    [k]
-  ), C = g(
-    async (v, S) => {
-      const _ = await L.updateWorkspaceLayout(v, S);
-      return await k(), _;
+    [h]
+  ), C = k(
+    async (S, T) => {
+      const W = await D.updateWorkspaceLayout(S, T);
+      return await h(), W;
     },
-    [k]
-  ), E = g(
-    async (v) => {
-      const S = await L.deleteWorkspaceLayout(v);
-      return S && await k(), S;
+    [h]
+  ), L = k(
+    async (S) => {
+      const T = await D.deleteWorkspaceLayout(S);
+      return T && await h(), T;
     },
-    [k]
-  ), R = g(
-    async (v) => {
+    [h]
+  ), $ = k(
+    async (S) => {
       if (!e) {
         console.error("Cannot apply workspace without repositoryKey");
         return;
       }
-      const S = await L.getWorkspaceLayout(v);
-      if (!S) {
-        console.error(`Workspace ${v} not found`);
+      const T = await D.getWorkspaceLayout(S);
+      if (!T) {
+        console.error(`Workspace ${S} not found`);
         return;
       }
-      const _ = {
-        workspaceId: v,
-        sizes: S.defaultSizes || { left: 20, middle: 45, right: 35 },
-        collapsed: S.defaultCollapsed || {
+      const W = {
+        workspaceId: S,
+        sizes: T.defaultSizes || { left: 20, middle: 45, right: 35 },
+        collapsed: T.defaultCollapsed || {
           left: !1,
           right: !1
         }
       };
-      await L.setRepositoryState(e, _), await k();
+      await D.setRepositoryState(e, W), await h();
     },
-    [e, k]
-  ), I = g(
-    async (v) => {
+    [e, h]
+  ), I = k(
+    async (S) => {
       if (!e) {
         console.error("Cannot update sizes without repositoryKey");
         return;
       }
-      await L.updateRepositorySizes(e, v), await k();
+      await D.updateRepositorySizes(e, S), await h();
     },
-    [e, k]
-  ), F = g(
-    async (v) => {
+    [e, h]
+  ), _ = k(
+    async (S) => {
       if (!e) {
         console.error("Cannot update collapsed without repositoryKey");
         return;
       }
-      await L.updateRepositoryCollapsed(
+      await D.updateRepositoryCollapsed(
         e,
-        v
-      ), await k();
+        S
+      ), await h();
     },
-    [e, k]
-  ), f = g(async () => {
+    [e, h]
+  ), w = k(async () => {
     if (!e || !(i != null && i.workspaceId)) {
       console.error("Cannot reset without repositoryKey and active workspace");
       return;
     }
-    await L.resetRepositoryToWorkspaceDefaults(
+    await D.resetRepositoryToWorkspaceDefaults(
       e,
       i.workspaceId
-    ), await k();
-  }, [e, i == null ? void 0 : i.workspaceId, k]), b = g(async () => {
-    await k();
-  }, [k]);
+    ), await h();
+  }, [e, i == null ? void 0 : i.workspaceId, h]), v = k(async () => {
+    await h();
+  }, [h]);
   return {
-    workspaces: a,
+    workspaces: n,
     repositoryState: i,
     activeWorkspace: y,
-    loading: T,
-    error: u,
-    getWorkspace: l,
-    createWorkspace: h,
+    loading: b,
+    error: f,
+    getWorkspace: d,
+    createWorkspace: u,
     updateWorkspace: C,
-    deleteWorkspace: E,
-    applyWorkspace: R,
+    deleteWorkspace: L,
+    applyWorkspace: $,
     updateSizes: I,
-    updateCollapsed: F,
-    resetToDefaults: f,
-    refresh: b
+    updateCollapsed: _,
+    resetToDefaults: w,
+    refresh: v
   };
 }
-function Je(o = {}) {
+function nt(o = {}) {
   const {
     initialFocus: e = null,
     collapsed: t = {},
     panelType: r = "three-panel",
-    onFocusChange: a,
-    events: n,
+    onFocusChange: n,
+    events: a,
     getPanelId: i
-  } = o, [d, y] = W(
+  } = o, [c, y] = P(
     e
-  ), c = g(
-    (l) => {
-      const h = d;
-      if (y(l), a == null || a(l), n && i) {
-        if (h) {
-          const E = i(h);
-          E && n.emit({
+  ), l = k(
+    (d) => {
+      const u = c;
+      if (y(d), n == null || n(d), a && i) {
+        if (u) {
+          const L = i(u);
+          L && a.emit({
             type: "panel:blur",
             source: "panel-layouts",
             timestamp: Date.now(),
             payload: {
-              panelId: E,
-              panelSlot: h,
-              nextPanelId: i(l)
+              panelId: L,
+              panelSlot: u,
+              nextPanelId: i(d)
             }
           });
         }
-        const C = i(l);
-        C && n.emit({
+        const C = i(d);
+        C && a.emit({
           type: "panel:focus",
           source: "panel-layouts",
           timestamp: Date.now(),
           payload: {
             panelId: C,
-            panelSlot: l,
+            panelSlot: d,
             source: "keyboard-shortcut"
           }
         });
       }
     },
-    [d, a, n, i]
-  ), T = g(() => {
-    const l = d;
-    if (y(null), a == null || a(null), n && i && l) {
-      const h = i(l);
-      h && n.emit({
+    [c, n, a, i]
+  ), b = k(() => {
+    const d = c;
+    if (y(null), n == null || n(null), a && i && d) {
+      const u = i(d);
+      u && a.emit({
         type: "panel:blur",
         source: "panel-layouts",
         timestamp: Date.now(),
         payload: {
-          panelId: h,
-          panelSlot: l
+          panelId: u,
+          panelSlot: d
         }
       });
     }
-  }, [d, a, n, i]), p = g(() => {
-    const l = [];
-    return t.left || l.push("left"), l.push("middle"), r === "three-panel" && !t.right && l.push("right"), l;
-  }, [t, r]), u = g(() => {
-    const l = p();
-    if (l.length === 0) return;
-    if (d === null) {
-      c(l[0]);
+  }, [c, n, a, i]), p = k(() => {
+    const d = [];
+    return t.left || d.push("left"), d.push("middle"), r === "three-panel" && !t.right && d.push("right"), d;
+  }, [t, r]), f = k(() => {
+    const d = p();
+    if (d.length === 0) return;
+    if (c === null) {
+      l(d[0]);
       return;
     }
-    const h = l.indexOf(d);
-    if (h === -1) {
-      c(l[0]);
+    const u = d.indexOf(c);
+    if (u === -1) {
+      l(d[0]);
       return;
     }
-    const C = (h + 1) % l.length;
-    c(l[C]);
-  }, [d, p, c]), x = g(() => {
-    const l = p();
-    if (l.length === 0) return;
-    if (d === null) {
-      c(l[l.length - 1]);
+    const C = (u + 1) % d.length;
+    l(d[C]);
+  }, [c, p, l]), x = k(() => {
+    const d = p();
+    if (d.length === 0) return;
+    if (c === null) {
+      l(d[d.length - 1]);
       return;
     }
-    const h = l.indexOf(d);
-    if (h === -1) {
-      c(l[l.length - 1]);
+    const u = d.indexOf(c);
+    if (u === -1) {
+      l(d[d.length - 1]);
       return;
     }
-    const C = h === 0 ? l.length - 1 : h - 1;
-    c(l[C]);
-  }, [d, p, c]), k = g(
-    (l) => d === l,
-    [d]
+    const C = u === 0 ? d.length - 1 : u - 1;
+    l(d[C]);
+  }, [c, p, l]), h = k(
+    (d) => c === d,
+    [c]
   );
   return {
-    focusedPanel: d,
-    setFocus: c,
-    clearFocus: T,
-    focusNext: u,
+    focusedPanel: c,
+    setFocus: l,
+    clearFocus: b,
+    focusNext: f,
     focusPrevious: x,
-    isFocused: k
+    isFocused: h
   };
 }
-function He(o) {
+function st(o) {
   const {
     enabled: e = !0,
     focusedPanel: t,
     collapsed: r,
-    panelType: a,
-    setFocus: n,
+    panelType: n,
+    setFocus: a,
     onExpand: i,
-    onCollapse: d
-  } = o, y = M(t), c = M(r), T = M(a);
-  A(() => {
+    onCollapse: c
+  } = o, y = N(t), l = N(r), b = N(n);
+  R(() => {
     y.current = t;
-  }, [t]), A(() => {
-    c.current = r;
-  }, [r]), A(() => {
-    T.current = a;
-  }, [a]);
-  const p = g(
-    (u) => {
-      if (!u.altKey || u.ctrlKey || u.metaKey || u.shiftKey)
+  }, [t]), R(() => {
+    l.current = r;
+  }, [r]), R(() => {
+    b.current = n;
+  }, [n]);
+  const p = k(
+    (f) => {
+      if (!f.altKey || f.ctrlKey || f.metaKey || f.shiftKey)
         return;
-      const x = u.code, k = y.current, l = c.current, h = T.current;
-      x === "Digit1" || x === "Numpad1" ? (u.preventDefault(), l.left ? i("left") : k !== "left" ? n("left") : (d("left"), n("middle"))) : x === "Digit2" || x === "Numpad2" ? (u.preventDefault(), n("middle")) : (x === "Digit3" || x === "Numpad3") && h === "three-panel" && (u.preventDefault(), l.right ? i("right") : k !== "right" ? n("right") : (d("right"), n("middle")));
+      const x = f.code, h = y.current, d = l.current, u = b.current;
+      x === "Digit1" || x === "Numpad1" ? (f.preventDefault(), d.left ? i("left") : h !== "left" ? a("left") : (c("left"), a("middle"))) : x === "Digit2" || x === "Numpad2" ? (f.preventDefault(), a("middle")) : (x === "Digit3" || x === "Numpad3") && u === "three-panel" && (f.preventDefault(), d.right ? i("right") : h !== "right" ? a("right") : (c("right"), a("middle")));
     },
-    [n, i, d]
+    [a, i, c]
   );
-  A(() => {
+  R(() => {
     if (e)
       return window.addEventListener("keydown", p), () => {
         window.removeEventListener("keydown", p);
       };
   }, [e, p]);
 }
-function Ue(o, e, t, r) {
-  A(() => {
-    const a = e.on(
+function at(o, e, t, r) {
+  R(() => {
+    const n = e.on(
       "panel:focus",
       (i) => {
         i.payload.panelId === o && t();
       }
     );
-    let n;
-    return r && (n = e.on(
+    let a;
+    return r && (a = e.on(
       "panel:blur",
       (i) => {
         i.payload.panelId === o && r();
       }
     )), () => {
-      a(), n == null || n();
+      n(), a == null || a();
     };
   }, [o, e, t, r]);
 }
-const Qe = ({
+const it = ({
   isFocused: o,
   className: e = "",
   style: t = {}
@@ -929,40 +929,47 @@ const Qe = ({
       "aria-hidden": "true"
     }
   );
-}, ee = ({
+}, ce = ({
   value: o,
   onChange: e,
   onSubmit: t,
   onClose: r,
-  onHistoryPrevious: a,
-  onHistoryNext: n,
+  onHistoryPrevious: n,
+  onHistoryNext: a,
   mode: i,
-  status: d,
+  status: c,
   placeholder: y = "What would you like to do?",
-  disabled: c = !1,
-  autoFocus: T = !0,
-  agentAvailable: p = !0
+  disabled: l = !1,
+  autoFocus: b = !0,
+  agentAvailable: p = !0,
+  showAutocomplete: f = !1,
+  onAutocompleteNext: x,
+  onAutocompletePrevious: h,
+  onAutocompleteAccept: d
 }) => {
-  const { theme: u } = K(), x = M(null);
-  A(() => {
-    T && x.current && x.current.focus();
-  }, [T]);
-  const k = (h) => {
-    switch (h.stopPropagation(), h.key) {
+  const { theme: u } = H(), C = N(null);
+  R(() => {
+    b && C.current && C.current.focus();
+  }, [b]);
+  const L = (I) => {
+    switch (I.stopPropagation(), I.key) {
       case "Enter":
-        h.preventDefault(), t();
+        I.preventDefault(), t();
         break;
       case "Escape":
-        h.preventDefault(), r();
+        I.preventDefault(), r();
+        break;
+      case "Tab":
+        f && d && (I.preventDefault(), d());
         break;
       case "ArrowUp":
-        h.preventDefault(), a();
+        I.preventDefault(), f && h ? h() : n();
         break;
       case "ArrowDown":
-        h.preventDefault(), n();
+        I.preventDefault(), f && x ? x() : a();
         break;
     }
-  }, l = d === "thinking" || d === "executing";
+  }, $ = c === "thinking" || c === "executing";
   return /* @__PURE__ */ m(
     "div",
     {
@@ -981,7 +988,7 @@ const Qe = ({
             style: {
               color: i === "quick-command" ? u.colors.info : p ? u.colors.primary : u.colors.textMuted,
               fontFamily: u.fonts.monospace,
-              fontSize: "14px",
+              fontSize: u.fontSizes[1],
               userSelect: "none",
               display: "flex",
               alignItems: "center"
@@ -1027,14 +1034,14 @@ const Qe = ({
         /* @__PURE__ */ s(
           "input",
           {
-            ref: x,
+            ref: C,
             "data-agent-command-palette-input": !0,
             type: "text",
             value: o,
-            onChange: (h) => e(h.target.value),
-            onKeyDown: k,
+            onChange: (I) => e(I.target.value),
+            onKeyDown: L,
             placeholder: y,
-            disabled: c || l,
+            disabled: l || $,
             style: {
               flex: 1,
               backgroundColor: "transparent",
@@ -1042,17 +1049,17 @@ const Qe = ({
               outline: "none",
               color: u.colors.text,
               fontFamily: u.fonts.monospace,
-              fontSize: "14px",
+              fontSize: u.fontSizes[1],
               caretColor: u.colors.primary
             }
           }
         ),
-        l && /* @__PURE__ */ m(
+        $ && /* @__PURE__ */ m(
           "span",
           {
             style: {
               color: u.colors.info,
-              fontSize: "12px",
+              fontSize: u.fontSizes[0],
               display: "flex",
               alignItems: "center",
               gap: "4px"
@@ -1071,11 +1078,11 @@ const Qe = ({
                   }
                 }
               ),
-              d === "thinking" ? "Thinking..." : "Executing..."
+              c === "thinking" ? "Thinking..." : "Executing..."
             ]
           }
         ),
-        !l && /* @__PURE__ */ s(
+        !$ && /* @__PURE__ */ s(
           "kbd",
           {
             style: {
@@ -1083,7 +1090,7 @@ const Qe = ({
               backgroundColor: u.colors.backgroundSecondary,
               borderRadius: "3px",
               border: `1px solid ${u.colors.border}`,
-              fontSize: "11px",
+              fontSize: u.fontSizes[0],
               color: u.colors.textMuted
             },
             children: "Alt+P"
@@ -1093,15 +1100,15 @@ const Qe = ({
     }
   );
 };
-ee.displayName = "AgentCommandInput";
-const be = ({ status: o }) => {
-  const { theme: e } = K(), t = {
+ce.displayName = "AgentCommandInput";
+const _e = ({ status: o }) => {
+  const { theme: e } = H(), t = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     width: "16px",
     height: "16px",
-    fontSize: "12px"
+    fontSize: e.fontSizes[0]
   };
   switch (o) {
     case "pending":
@@ -1123,11 +1130,11 @@ const be = ({ status: o }) => {
     case "error":
       return /* @__PURE__ */ s("span", { style: { ...t, color: e.colors.error }, children: "✗" });
   }
-}, ve = (o) => {
+}, Ae = (o) => {
   const e = Object.entries(o);
   return e.length === 0 ? "" : e.map(([t, r]) => t === "args" && Array.isArray(r) ? r.join(", ") : typeof r == "string" ? `"${r}"` : JSON.stringify(r)).join(", ");
-}, Se = ({ tool: o, compact: e }) => {
-  const { theme: t } = K(), r = ve(o.args);
+}, Re = ({ tool: o, compact: e }) => {
+  const { theme: t } = H(), r = Ae(o.args);
   return /* @__PURE__ */ m(
     "div",
     {
@@ -1137,10 +1144,10 @@ const be = ({ status: o }) => {
         gap: "8px",
         padding: e ? "4px 0" : "8px 0",
         fontFamily: t.fonts.monospace,
-        fontSize: "13px"
+        fontSize: t.fontSizes[1]
       },
       children: [
-        /* @__PURE__ */ s(be, { status: o.status }),
+        /* @__PURE__ */ s(_e, { status: o.status }),
         /* @__PURE__ */ m("span", { style: { color: t.colors.text }, children: [
           o.name,
           r && /* @__PURE__ */ m("span", { style: { color: t.colors.textMuted }, children: [
@@ -1155,7 +1162,7 @@ const be = ({ status: o }) => {
             style: {
               marginLeft: "auto",
               color: t.colors.info,
-              fontSize: "11px"
+              fontSize: t.fontSizes[0]
             },
             children: "[running]"
           }
@@ -1166,7 +1173,7 @@ const be = ({ status: o }) => {
             style: {
               marginLeft: "auto",
               color: t.colors.success,
-              fontSize: "11px"
+              fontSize: t.fontSizes[0]
             },
             children: "[done]"
           }
@@ -1177,7 +1184,7 @@ const be = ({ status: o }) => {
             style: {
               marginLeft: "auto",
               color: t.colors.error,
-              fontSize: "11px"
+              fontSize: t.fontSizes[0]
             },
             title: o.error,
             children: "[error]"
@@ -1186,11 +1193,11 @@ const be = ({ status: o }) => {
       ]
     }
   );
-}, te = ({
+}, de = ({
   tools: o,
   compact: e = !1
 }) => {
-  const { theme: t } = K();
+  const { theme: t } = H();
   return o.length === 0 ? null : /* @__PURE__ */ s(
     "div",
     {
@@ -1200,32 +1207,32 @@ const be = ({ status: o }) => {
         borderRadius: "4px",
         margin: "8px 16px"
       },
-      children: o.map((r) => /* @__PURE__ */ s(Se, { tool: r, compact: e }, r.id))
+      children: o.map((r) => /* @__PURE__ */ s(Re, { tool: r, compact: e }, r.id))
     }
   );
 };
-te.displayName = "ToolExecutionList";
-const oe = ({
+de.displayName = "ToolExecutionList";
+const pe = ({
   response: o,
   streaming: e = !1
 }) => {
-  const { theme: t } = K();
+  const { theme: t } = H();
   if (!o)
     return null;
-  const r = o.toLowerCase().startsWith("error"), a = o.toLowerCase().startsWith("done") || o.toLowerCase().startsWith("executed");
+  const r = o.toLowerCase().startsWith("error"), n = o.toLowerCase().startsWith("done") || o.toLowerCase().startsWith("executed");
   return /* @__PURE__ */ m(
     "div",
     {
       style: {
         padding: "12px 16px",
-        color: r ? t.colors.error : a ? t.colors.success : t.colors.text,
-        fontSize: "13px",
+        color: r ? t.colors.error : n ? t.colors.success : t.colors.text,
+        fontSize: t.fontSizes[1],
         display: "flex",
         alignItems: "center",
         gap: "8px"
       },
       children: [
-        a && /* @__PURE__ */ s("span", { children: "✓" }),
+        n && /* @__PURE__ */ s("span", { children: "✓" }),
         r && /* @__PURE__ */ s("span", { children: "✗" }),
         /* @__PURE__ */ m("span", { children: [
           o,
@@ -1247,57 +1254,242 @@ const oe = ({
     }
   );
 };
-oe.displayName = "AgentResponseDisplay";
-const Te = ({
+pe.displayName = "AgentResponseDisplay";
+function Ee({
+  text: o,
+  matchedIndices: e,
+  highlightColor: t
+}) {
+  if (!e.length)
+    return /* @__PURE__ */ s(se, { children: o });
+  const r = new Set(e), n = o.split("");
+  return /* @__PURE__ */ s(se, { children: n.map((a, i) => /* @__PURE__ */ s(
+    "span",
+    {
+      style: {
+        color: r.has(i) ? t : "inherit",
+        fontWeight: r.has(i) ? 600 : "inherit"
+      },
+      children: a
+    },
+    i
+  )) });
+}
+const ue = ({
+  matches: o,
+  selectedIndex: e,
+  onSelect: t,
+  maxVisible: r = 6
+}) => {
+  const { theme: n } = H(), a = N(null), i = N(null);
+  if (R(() => {
+    i.current && a.current && i.current.scrollIntoView({
+      block: "nearest",
+      behavior: "smooth"
+    });
+  }, [e]), o.length === 0)
+    return null;
+  const y = 48 * r;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      style: {
+        maxHeight: `${y}px`,
+        overflowY: "auto",
+        borderTop: `1px solid ${n.colors.border}`
+      },
+      children: o.map((l, b) => {
+        const p = b === e, f = l.command;
+        return /* @__PURE__ */ m(
+          "div",
+          {
+            ref: p ? i : void 0,
+            onClick: () => t(b),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              padding: "10px 16px",
+              cursor: "pointer",
+              backgroundColor: p ? n.colors.backgroundSecondary : "transparent",
+              borderLeft: p ? `2px solid ${n.colors.primary}` : "2px solid transparent",
+              transition: "background-color 100ms ease"
+            },
+            onMouseEnter: (x) => {
+              p || (x.currentTarget.style.backgroundColor = n.colors.backgroundSecondary);
+            },
+            onMouseLeave: (x) => {
+              p || (x.currentTarget.style.backgroundColor = "transparent");
+            },
+            children: [
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  style: {
+                    color: n.colors.info,
+                    fontFamily: n.fonts.monospace,
+                    fontSize: n.fontSizes[1],
+                    flexShrink: 0
+                  },
+                  children: "/"
+                }
+              ),
+              /* @__PURE__ */ m("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ m(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: n.fonts.monospace,
+                      fontSize: n.fontSizes[1],
+                      color: n.colors.text
+                    },
+                    children: [
+                      /* @__PURE__ */ s(
+                        Ee,
+                        {
+                          text: f.name,
+                          matchedIndices: l.matchedOn === f.name ? l.matchedIndices : [],
+                          highlightColor: n.colors.primary
+                        }
+                      ),
+                      l.matchedOn !== f.name && /* @__PURE__ */ m(
+                        "span",
+                        {
+                          style: {
+                            color: n.colors.textMuted,
+                            marginLeft: "8px",
+                            fontSize: n.fontSizes[0]
+                          },
+                          children: [
+                            "(alias: ",
+                            l.matchedOn,
+                            ")"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    style: {
+                      fontSize: n.fontSizes[0],
+                      color: n.colors.textMuted,
+                      marginTop: "2px",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: f.description
+                  }
+                )
+              ] }),
+              f.args && f.args.length > 0 && /* @__PURE__ */ s(
+                "div",
+                {
+                  style: {
+                    fontSize: n.fontSizes[0],
+                    color: n.colors.textMuted,
+                    fontFamily: n.fonts.monospace,
+                    flexShrink: 0
+                  },
+                  children: f.args.map((x, h) => /* @__PURE__ */ m("span", { children: [
+                    h > 0 && " ",
+                    /* @__PURE__ */ s(
+                      "span",
+                      {
+                        style: {
+                          color: x.required ? n.colors.warning : n.colors.textMuted
+                        },
+                        children: x.required ? `<${x.name}>` : `[${x.name}]`
+                      }
+                    )
+                  ] }, x.name))
+                }
+              ),
+              p && /* @__PURE__ */ s(
+                "kbd",
+                {
+                  style: {
+                    padding: "2px 6px",
+                    backgroundColor: n.colors.backgroundTertiary,
+                    borderRadius: "3px",
+                    border: `1px solid ${n.colors.border}`,
+                    fontSize: n.fontSizes[0],
+                    color: n.colors.textMuted,
+                    flexShrink: 0
+                  },
+                  children: "Tab"
+                }
+              )
+            ]
+          },
+          `${f.name}-${b}`
+        );
+      })
+    }
+  );
+};
+ue.displayName = "QuickCommandAutocomplete";
+const De = ({
   palette: o,
   config: e
 }) => {
-  const { theme: t } = K(), r = M(null), {
-    isOpen: a,
-    close: n,
+  const { theme: t } = H(), r = N(null), {
+    isOpen: n,
+    close: a,
     query: i,
-    setQuery: d,
+    setQuery: c,
     mode: y,
-    status: c,
-    pendingTools: T,
+    status: l,
+    pendingTools: b,
     completedTools: p,
-    agentResponse: u,
+    agentResponse: f,
     submit: x,
-    historyPrevious: k,
-    historyNext: l,
-    suggestions: h,
-    agentAvailable: C
+    historyPrevious: h,
+    historyNext: d,
+    suggestions: u,
+    agentAvailable: C,
+    // Autocomplete
+    quickCommandMatches: L,
+    selectedAutocompleteIndex: $,
+    autocompleteNext: I,
+    autocompletePrevious: _,
+    autocompleteAccept: w,
+    showAutocomplete: v
   } = o;
-  A(() => {
-    if (!a) return;
-    const N = (D) => {
-      r.current && !r.current.contains(D.target) && n();
-    }, V = setTimeout(() => {
-      document.addEventListener("mousedown", N);
+  R(() => {
+    if (!n) return;
+    const j = (O) => {
+      r.current && !r.current.contains(O.target) && a();
+    }, M = setTimeout(() => {
+      document.addEventListener("mousedown", j);
     }, 100);
     return () => {
-      clearTimeout(V), document.removeEventListener("mousedown", N);
+      clearTimeout(M), document.removeEventListener("mousedown", j);
     };
-  }, [a, n]);
-  const [E, R] = W(!1), [I, F] = W(!1);
-  if (A(() => {
-    if (a)
-      F(!0), requestAnimationFrame(() => {
+  }, [n, a]);
+  const [S, T] = P(!1), [W, z] = P(!1);
+  if (R(() => {
+    if (n)
+      z(!0), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          R(!0);
+          T(!0);
         });
       });
     else {
-      R(!1);
-      const N = setTimeout(() => {
-        F(!1);
+      T(!1);
+      const j = setTimeout(() => {
+        z(!1);
       }, 150);
-      return () => clearTimeout(N);
+      return () => clearTimeout(j);
     }
-  }, [a]), !I)
+  }, [n]), !W)
     return null;
-  const f = C ? (e == null ? void 0 : e.placeholder) || "What would you like to do?" : "Quick command mode (agent unavailable)", b = [...p, ...T], v = b.length > 0, S = u && c !== "idle", _ = C && !i && c === "idle" && h.length > 0, P = (y === "quick-command" || !C) && c === "idle", H = !C && y !== "quick-command" && c === "idle";
-  return /* @__PURE__ */ m(ke, { children: [
+  const q = C ? (e == null ? void 0 : e.placeholder) || "What would you like to do?" : "Quick command mode (agent unavailable)", B = [...p, ...b], te = B.length > 0, G = f && l !== "idle", J = C && !i && l === "idle" && u.length > 0, X = (y === "quick-command" || !C) && l === "idle", oe = !C && y !== "quick-command" && l === "idle";
+  return /* @__PURE__ */ m(se, { children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -1306,7 +1498,7 @@ const Te = ({
           inset: 0,
           zIndex: 999
         },
-        onClick: n
+        onClick: a
       }
     ),
     /* @__PURE__ */ m(
@@ -1327,25 +1519,29 @@ const Te = ({
           display: "flex",
           flexDirection: "column-reverse",
           overflow: "hidden",
-          transform: E ? "translateY(0)" : "translateY(100%)",
+          transform: S ? "translateY(0)" : "translateY(100%)",
           transition: "transform 150ms ease-out",
           ...e == null ? void 0 : e.style
         },
         children: [
           /* @__PURE__ */ m("div", { children: [
             /* @__PURE__ */ s(
-              ee,
+              ce,
               {
                 value: i,
-                onChange: d,
+                onChange: c,
                 onSubmit: x,
-                onClose: n,
-                onHistoryPrevious: k,
-                onHistoryNext: l,
+                onClose: a,
+                onHistoryPrevious: h,
+                onHistoryNext: d,
                 mode: y,
-                status: c,
-                placeholder: f,
-                agentAvailable: C
+                status: l,
+                placeholder: q,
+                agentAvailable: C,
+                showAutocomplete: v,
+                onAutocompleteNext: I,
+                onAutocompletePrevious: _,
+                onAutocompleteAccept: w
               }
             ),
             /* @__PURE__ */ m(
@@ -1356,7 +1552,7 @@ const Te = ({
                   borderTop: `1px solid ${t.colors.border}`,
                   display: "flex",
                   gap: "16px",
-                  fontSize: "12px",
+                  fontSize: t.fontSizes[0],
                   color: t.colors.textMuted,
                   backgroundColor: t.colors.background
                 },
@@ -1430,15 +1626,15 @@ const Te = ({
             )
           ] }),
           /* @__PURE__ */ m("div", { style: { overflow: "auto" }, children: [
-            v && /* @__PURE__ */ s(te, { tools: b, compact: b.length > 3 }),
-            S && /* @__PURE__ */ s(
-              oe,
+            te && /* @__PURE__ */ s(de, { tools: B, compact: B.length > 3 }),
+            G && /* @__PURE__ */ s(
+              pe,
               {
-                response: u,
-                streaming: c === "thinking"
+                response: f,
+                streaming: l === "thinking"
               }
             ),
-            _ && /* @__PURE__ */ m(
+            J && /* @__PURE__ */ m(
               "div",
               {
                 style: {
@@ -1453,17 +1649,17 @@ const Te = ({
                     {
                       style: {
                         color: t.colors.textMuted,
-                        fontSize: "12px",
+                        fontSize: t.fontSizes[0],
                         marginRight: "4px"
                       },
                       children: "Try:"
                     }
                   ),
-                  h.map((N, V) => /* @__PURE__ */ m(
+                  u.map((j, M) => /* @__PURE__ */ m(
                     "button",
                     {
                       onClick: () => {
-                        d(N);
+                        c(j);
                       },
                       style: {
                         padding: "4px 10px",
@@ -1471,33 +1667,33 @@ const Te = ({
                         border: `1px solid ${t.colors.border}`,
                         borderRadius: "12px",
                         color: t.colors.textSecondary,
-                        fontSize: "12px",
+                        fontSize: t.fontSizes[0],
                         cursor: "pointer",
                         transition: "background-color 150ms ease"
                       },
-                      onMouseEnter: (D) => {
-                        D.currentTarget.style.backgroundColor = t.colors.backgroundTertiary;
+                      onMouseEnter: (O) => {
+                        O.currentTarget.style.backgroundColor = t.colors.backgroundTertiary;
                       },
-                      onMouseLeave: (D) => {
-                        D.currentTarget.style.backgroundColor = t.colors.backgroundSecondary;
+                      onMouseLeave: (O) => {
+                        O.currentTarget.style.backgroundColor = t.colors.backgroundSecondary;
                       },
                       children: [
                         '"',
-                        N,
+                        j,
                         '"'
                       ]
                     },
-                    V
+                    M
                   ))
                 ]
               }
             ),
-            H && /* @__PURE__ */ m(
+            oe && /* @__PURE__ */ m(
               "div",
               {
                 style: {
                   padding: "12px 16px",
-                  fontSize: "12px",
+                  fontSize: t.fontSizes[0],
                   color: t.colors.warning,
                   display: "flex",
                   alignItems: "center",
@@ -1518,12 +1714,12 @@ const Te = ({
                 ]
               }
             ),
-            P && /* @__PURE__ */ m(
+            X && /* @__PURE__ */ m(
               "div",
               {
                 style: {
                   padding: "12px 16px",
-                  fontSize: "12px",
+                  fontSize: t.fontSizes[0],
                   color: t.colors.textMuted,
                   fontFamily: t.fonts.monospace
                 },
@@ -1557,6 +1753,21 @@ const Te = ({
                   ] })
                 ]
               }
+            ),
+            v && /* @__PURE__ */ s(
+              ue,
+              {
+                matches: L,
+                selectedIndex: $,
+                onSelect: (j) => {
+                  const M = L[j];
+                  if (M) {
+                    const O = M.command;
+                    let Z = `/${O.name}`;
+                    O.args && O.args.length > 0 && (Z += " "), c(Z);
+                  }
+                }
+              }
             )
           ] })
         ]
@@ -1578,184 +1789,261 @@ const Te = ({
         ` })
   ] });
 };
-Te.displayName = "AgentCommandPalette";
-const Ce = [
+De.displayName = "AgentCommandPalette";
+function ae(o, e) {
+  const t = o.toLowerCase(), r = e.toLowerCase();
+  if (!t)
+    return { score: 0, matchedIndices: [] };
+  const n = [];
+  let a = 0, i = 0, c = 0, y = -1;
+  for (let l = 0; l < r.length && a < t.length; l++)
+    r[l] === t[a] && (n.push(l), y === l - 1 ? (c++, i += c * 2) : c = 1, l === 0 && (i += 10), l > 0 && /[_\-\s]/.test(e[l - 1]) && (i += 5), i += 1, y = l, a++);
+  return a < t.length ? null : (i -= e.length * 0.1, t === r && (i += 20), r.startsWith(t) && (i += 15), { score: i, matchedIndices: n });
+}
+function $e(o, e, t = 10) {
+  const r = o.replace(/^\//, "").trim();
+  if (!r)
+    return e.slice(0, t).map((a) => ({
+      command: a,
+      score: 0,
+      matchedIndices: [],
+      matchedOn: a.name
+    }));
+  const n = [];
+  for (const a of e) {
+    const i = ae(r, a.name);
+    if (i) {
+      n.push({
+        command: a,
+        score: i.score,
+        matchedIndices: i.matchedIndices,
+        matchedOn: a.name
+      });
+      continue;
+    }
+    if (a.aliases)
+      for (const c of a.aliases) {
+        const y = ae(r, c);
+        if (y) {
+          n.push({
+            command: a,
+            score: y.score - 2,
+            // Slight penalty for alias match
+            matchedIndices: y.matchedIndices,
+            matchedOn: c
+          });
+          break;
+        }
+      }
+  }
+  return n.sort((a, i) => i.score - a.score).slice(0, t);
+}
+const qe = [
   "hide sidebars",
   "show terminal",
   "focus editor"
 ];
-function Ge({
+function lt({
   events: o,
   keyboard: e = { key: "p", altKey: !0 },
   config: t = {},
   onExecuteTool: r,
-  initialSuggestions: a = Ce,
-  agentAvailable: n = !0
+  initialSuggestions: n = qe,
+  agentAvailable: a = !0,
+  quickCommands: i = []
 } = {}) {
-  const [i, d] = W(!1), [y, c] = W(""), [T, p] = W("natural"), [u, x] = W("idle"), [k, l] = W([]), [h, C] = W([]), [E, R] = W(""), [I, F] = W([]), [f, b] = W(-1), v = me(() => a, [a]), S = g((w) => {
-    c(w), p(w.startsWith("/") ? "quick-command" : "natural");
-  }, []), _ = g(() => {
-    d(!0), n ? (c(""), p("natural")) : (c("/"), p("quick-command")), x("idle"), l([]), C([]), R(""), b(-1), o == null || o.emit({
+  const [c, y] = P(!1), [l, b] = P(""), [p, f] = P("natural"), [x, h] = P("idle"), [d, u] = P([]), [C, L] = P([]), [$, I] = P(""), [_, w] = P([]), [v, S] = P(-1), T = ne(() => n, [n]), [W, z] = P(-1), q = ne(() => p !== "quick-command" || !i.length ? [] : $e(l, i), [l, p, i]), B = ne(() => p === "quick-command" && x === "idle" && q.length > 0 && l.length > 0, [p, x, q.length, l.length]);
+  R(() => {
+    z(q.length > 0 ? 0 : -1);
+  }, [q.length]);
+  const te = k((g) => {
+    b(g), f(g.startsWith("/") ? "quick-command" : "natural");
+  }, []), G = k(() => {
+    y(!0), a ? (b(""), f("natural")) : (b("/"), f("quick-command")), h("idle"), u([]), L([]), I(""), S(-1), o == null || o.emit({
       type: "agent-command-palette:opened",
       source: "agent-command-palette",
       timestamp: Date.now(),
       payload: {}
     });
-  }, [o, n]), P = g(() => {
-    d(!1), o == null || o.emit({
+  }, [o, a]), J = k(() => {
+    y(!1), o == null || o.emit({
       type: "agent-command-palette:closed",
       source: "agent-command-palette",
       timestamp: Date.now(),
       payload: {}
     });
-  }, [o]), H = g(() => {
-    i ? P() : _();
-  }, [i, _, P]), N = g(() => {
-    c(""), p("natural"), x("idle"), l([]), C([]), R(""), b(-1);
-  }, []), V = g((w) => {
-    const z = {
-      ...w,
+  }, [o]), X = k(() => {
+    c ? J() : G();
+  }, [c, G, J]), oe = k(() => {
+    b(""), f("natural"), h("idle"), u([]), L([]), I(""), S(-1);
+  }, []), j = k((g) => {
+    const A = {
+      ...g,
       status: "pending"
     };
-    return l((j) => [...j, z]), z;
-  }, []), D = g(
-    (w, z, j, J) => {
-      l((q) => {
-        const O = q.find((B) => B.id === w);
-        if (!O) return q;
-        const $ = {
-          ...O,
-          status: z,
-          result: j,
-          error: J
+    return u((E) => [...E, A]), A;
+  }, []), M = k(
+    (g, A, E, U) => {
+      u((F) => {
+        const K = F.find((Q) => Q.id === g);
+        if (!K) return F;
+        const V = {
+          ...K,
+          status: A,
+          result: E,
+          error: U
         };
-        return z === "success" || z === "error" ? (C((B) => [...B, $]), q.filter((B) => B.id !== w)) : q.map((B) => B.id === w ? $ : B);
+        return A === "success" || A === "error" ? (L((Q) => [...Q, V]), F.filter((Q) => Q.id !== g)) : F.map((Q) => Q.id === g ? V : Q);
       });
     },
     []
-  ), G = g(
-    async (w) => {
-      const z = w.replace(/^\//, "").trim().split(/\s+/), j = z[0], J = z.slice(1);
-      if (!j) return;
-      x("executing");
-      const q = `quick-${Date.now()}`;
-      V({
-        id: q,
-        name: j,
-        args: { args: J }
-      }), D(q, "running");
+  ), O = k(
+    async (g) => {
+      const A = g.replace(/^\//, "").trim().split(/\s+/), E = A[0], U = A.slice(1);
+      if (!E) return;
+      h("executing");
+      const F = `quick-${Date.now()}`;
+      j({
+        id: F,
+        name: E,
+        args: { args: U }
+      }), M(F, "running");
       try {
         if (r) {
-          const $ = await r(j, { args: J });
-          D(q, "success", String($));
+          const V = await r(E, { args: U });
+          M(F, "success", String(V));
         } else
-          D(q, "success", "Tool executed (no handler)");
-        F(($) => [
+          M(F, "success", "Tool executed (no handler)");
+        w((V) => [
           {
-            query: w,
+            query: g,
             timestamp: Date.now(),
-            toolsExecuted: [j],
+            toolsExecuted: [E],
             success: !0
           },
-          ...$.slice(0, (t.maxHistoryEntries || 50) - 1)
-        ]), x("complete"), R(`Executed: ${j}`);
-        const O = t.autoCloseDelay ?? 1e3;
-        O > 0 && setTimeout(() => P(), O);
-      } catch (O) {
-        const $ = O instanceof Error ? O.message : "Unknown error";
-        D(q, "error", void 0, $), x("error"), R(`Error: ${$}`);
+          ...V.slice(0, (t.maxHistoryEntries || 50) - 1)
+        ]), h("complete"), I(`Executed: ${E}`);
+        const K = t.autoCloseDelay ?? 1e3;
+        K > 0 && setTimeout(() => J(), K);
+      } catch (K) {
+        const V = K instanceof Error ? K.message : "Unknown error";
+        M(F, "error", void 0, V), h("error"), I(`Error: ${V}`);
       }
     },
-    [r, V, D, t.autoCloseDelay, t.maxHistoryEntries, P]
-  ), ue = g(() => {
-    if (y.trim()) {
-      if (T === "quick-command") {
-        G(y);
+    [r, j, M, t.autoCloseDelay, t.maxHistoryEntries, J]
+  ), Z = k(() => {
+    if (l.trim()) {
+      if (p === "quick-command") {
+        O(l);
         return;
       }
-      if (!n) {
-        R("Agent unavailable. Use quick commands (start with /)."), x("error");
+      if (!a) {
+        I("Agent unavailable. Use quick commands (start with /)."), h("error");
         return;
       }
-      x("thinking"), o == null || o.emit({
+      h("thinking"), o == null || o.emit({
         type: "agent-command-palette:submit",
         source: "agent-command-palette",
         timestamp: Date.now(),
-        payload: { query: y, mode: T }
-      }), F((w) => [
+        payload: { query: l, mode: p }
+      }), w((g) => [
         {
-          query: y,
+          query: l,
           timestamp: Date.now(),
           toolsExecuted: [],
           success: !0
         },
-        ...w.slice(0, (t.maxHistoryEntries || 50) - 1)
+        ...g.slice(0, (t.maxHistoryEntries || 50) - 1)
       ]);
     }
-  }, [y, T, G, o, t.maxHistoryEntries, n]), fe = g(() => {
-    if (I.length === 0) return;
-    const w = f < I.length - 1 ? f + 1 : f;
-    b(w), I[w] && (c(I[w].query), p(I[w].query.startsWith("/") ? "quick-command" : "natural"));
-  }, [I, f]), ye = g(() => {
-    if (f <= 0) {
-      b(-1), c(""), p("natural");
+  }, [l, p, O, o, t.maxHistoryEntries, a]), Se = k(() => {
+    if (_.length === 0) return;
+    const g = v < _.length - 1 ? v + 1 : v;
+    S(g), _[g] && (b(_[g].query), f(_[g].query.startsWith("/") ? "quick-command" : "natural"));
+  }, [_, v]), ve = k(() => {
+    if (v <= 0) {
+      S(-1), b(""), f("natural");
       return;
     }
-    const w = f - 1;
-    b(w), I[w] && (c(I[w].query), p(I[w].query.startsWith("/") ? "quick-command" : "natural"));
-  }, [I, f]), X = g(
-    (w) => {
+    const g = v - 1;
+    S(g), _[g] && (b(_[g].query), f(_[g].query.startsWith("/") ? "quick-command" : "natural"));
+  }, [_, v]), re = k(
+    (g) => {
       const {
-        key: z = "p",
-        altKey: j = !0,
-        ctrlKey: J = !1,
-        metaKey: q = !1,
-        shiftKey: O = !1
-      } = e, $ = w.altKey === j && w.ctrlKey === J && w.metaKey === q && w.shiftKey === O;
-      if ((j ? w.code === `Key${z.toUpperCase()}` : w.key.toLowerCase() === z.toLowerCase()) && $) {
-        const Q = w.target;
-        if (!Q.closest("[data-agent-command-palette-input]") && (Q.tagName === "INPUT" || Q.tagName === "TEXTAREA" || Q.isContentEditable))
+        key: A = "p",
+        altKey: E = !0,
+        ctrlKey: U = !1,
+        metaKey: F = !1,
+        shiftKey: K = !1
+      } = e, V = g.altKey === E && g.ctrlKey === U && g.metaKey === F && g.shiftKey === K;
+      if ((E ? g.code === `Key${A.toUpperCase()}` : g.key.toLowerCase() === A.toLowerCase()) && V) {
+        const ee = g.target;
+        if (!ee.closest("[data-agent-command-palette-input]") && (ee.tagName === "INPUT" || ee.tagName === "TEXTAREA" || ee.isContentEditable))
           return;
-        w.preventDefault(), H();
+        g.preventDefault(), X();
       }
     },
-    [e, H]
+    [e, X]
   );
-  return A(() => (window.addEventListener("keydown", X), () => window.removeEventListener("keydown", X)), [X]), {
+  R(() => (window.addEventListener("keydown", re), () => window.removeEventListener("keydown", re)), [re]);
+  const Te = k(() => {
+    B && z(
+      (g) => g < q.length - 1 ? g + 1 : 0
+    );
+  }, [B, q.length]), Ce = k(() => {
+    B && z(
+      (g) => g > 0 ? g - 1 : q.length - 1
+    );
+  }, [B, q.length]), Ie = k(() => {
+    if (!B || W < 0) return;
+    const g = q[W];
+    if (!g) return;
+    const A = g.command;
+    let E = `/${A.name}`;
+    A.args && A.args.length > 0 && (E += " "), b(E), z(-1);
+  }, [B, W, q]);
+  return {
     // Agent availability
-    agentAvailable: n,
+    agentAvailable: a,
     // Visibility
-    isOpen: i,
-    open: _,
-    close: P,
-    toggle: H,
+    isOpen: c,
+    open: G,
+    close: J,
+    toggle: X,
     // Input
-    query: y,
-    setQuery: S,
-    mode: T,
+    query: l,
+    setQuery: te,
+    mode: p,
     // Execution
-    status: u,
-    setStatus: x,
-    pendingTools: k,
-    completedTools: h,
-    agentResponse: E,
-    setAgentResponse: R,
-    submit: ue,
-    executeQuickCommand: G,
+    status: x,
+    setStatus: h,
+    pendingTools: d,
+    completedTools: C,
+    agentResponse: $,
+    setAgentResponse: I,
+    submit: Z,
+    executeQuickCommand: O,
     // Tool management (for external AI integration)
-    addPendingTool: V,
-    updateToolStatus: D,
+    addPendingTool: j,
+    updateToolStatus: M,
     // History
-    history: I,
-    historyPrevious: fe,
-    historyNext: ye,
+    history: _,
+    historyPrevious: Se,
+    historyNext: ve,
     // Suggestions
-    suggestions: v,
+    suggestions: T,
     // Actions
-    clear: N
+    clear: oe,
+    // Quick command autocomplete
+    quickCommandMatches: q,
+    selectedAutocompleteIndex: W,
+    autocompleteNext: Te,
+    autocompletePrevious: Ce,
+    autocompleteAccept: Ie,
+    showAutocomplete: B
   };
 }
-const re = {
+const fe = {
   name: "get_visible_panels",
   description: "Get the current visibility state of all panel slots (left, middle, right). Returns which panels are active in each slot and whether side panels are collapsed.",
   inputs: {
@@ -1824,7 +2112,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:get-visibility"
   }
-}, se = {
+}, he = {
   name: "get_panel_state",
   description: "Get the current state of a specific panel. Returns panel-specific state data if the panel supports state queries.",
   inputs: {
@@ -1856,7 +2144,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:get-state"
   }
-}, ae = {
+}, ye = {
   name: "list_panels_with_state",
   description: "Get a list of all panels that support state queries. Use this to discover which panels can be queried with get_panel_state.",
   inputs: {
@@ -1889,7 +2177,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:list-state-panels"
   }
-}, ne = {
+}, ge = {
   name: "toggle_panel",
   description: "Collapse or expand a side panel to give more space to the main content area.",
   inputs: {
@@ -1916,7 +2204,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:toggle"
   }
-}, ie = {
+}, me = {
   name: "collapse_all_panels",
   description: "Collapse both left and right panels to maximize the main content area. Useful for focus mode.",
   inputs: {
@@ -1936,7 +2224,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:collapse-all"
   }
-}, le = {
+}, ke = {
   name: "expand_all_panels",
   description: "Expand both left and right panels to show all content. Restores the default layout.",
   inputs: {
@@ -1956,7 +2244,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:expand-all"
   }
-}, ce = {
+}, xe = {
   name: "switch_panel",
   description: "Change which content is displayed in a panel slot (left, middle, or right).",
   inputs: {
@@ -1987,7 +2275,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:switch"
   }
-}, de = {
+}, be = {
   name: "focus_panel",
   description: "Set focus to a specific panel slot for keyboard navigation.",
   inputs: {
@@ -2013,7 +2301,7 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:focus"
   }
-}, pe = {
+}, we = {
   name: "reset_layout",
   description: "Reset panel sizes to the default layout configuration.",
   inputs: {
@@ -2033,44 +2321,44 @@ const re = {
     call_template_type: "panel_event",
     event_type: "panel:reset-layout"
   }
-}, Ie = [
+}, je = [
   // State query tools
-  re,
-  se,
-  ae,
+  fe,
+  he,
+  ye,
   // Layout action tools
-  ne,
-  ie,
-  le,
-  ce,
-  de,
-  pe
-], Xe = [
-  re,
-  se,
-  ae
-], Ye = [
-  ne,
-  ie,
-  le,
-  ce,
-  de,
-  pe
-], Ze = {
+  ge,
+  me,
+  ke,
+  xe,
+  be,
+  we
+], ct = [
+  fe,
+  he,
+  ye
+], dt = [
+  ge,
+  me,
+  ke,
+  xe,
+  be,
+  we
+], pt = {
   id: "panel-layouts",
   name: "Panel Layouts",
   description: "Generic panel layout and state query operations",
-  tools: Ie
+  tools: je
 };
-function Pe(o) {
+function Me(o) {
   const e = {};
   if (o.inputs.properties)
     for (const [t, r] of Object.entries(o.inputs.properties)) {
-      const a = r;
+      const n = r;
       e[t] = {
-        type: a.type || "string",
-        description: a.description,
-        ...a.enum && { enum: a.enum }
+        type: n.type || "string",
+        description: n.description,
+        ...n.enum && { enum: n.enum }
       };
     }
   return {
@@ -2083,12 +2371,12 @@ function Pe(o) {
     }
   };
 }
-function et(o) {
+function ut(o) {
   return {
-    functionDeclarations: o.map(Pe)
+    functionDeclarations: o.map(Me)
   };
 }
-function We(o) {
+function Oe(o) {
   return {
     type: "function",
     function: {
@@ -2098,54 +2386,54 @@ function We(o) {
     }
   };
 }
-function tt(o) {
-  return o.map(We);
+function ft(o) {
+  return o.map(Oe);
 }
-function _e(o) {
+function Fe(o) {
   return {
     name: o.name,
     description: o.description,
     input_schema: o.inputs
   };
 }
-function ot(o) {
-  return o.map(_e);
+function ht(o) {
+  return o.map(Fe);
 }
-function Re(o) {
+function Ne(o) {
   return {
     name: o.name,
     description: o.description,
     parameters: o.inputs
   };
 }
-function rt(o) {
-  return o.map(Re);
+function yt(o) {
+  return o.map(Ne);
 }
-function st(o, e = {}) {
+function gt(o, e = {}) {
   const {
     header: t = "You have access to the following tools:",
     includeParameters: r = !0
-  } = e, a = o.map((n) => {
-    let i = `- ${n.name}: ${n.description}`;
-    if (r && n.inputs.properties) {
-      const d = Object.entries(n.inputs.properties).map(([y, c]) => {
-        var u;
-        const T = c, p = (u = n.inputs.required) != null && u.includes(y) ? " (required)" : "";
-        return `    - ${y}: ${T.description || T.type}${p}`;
+  } = e, n = o.map((a) => {
+    let i = `- ${a.name}: ${a.description}`;
+    if (r && a.inputs.properties) {
+      const c = Object.entries(a.inputs.properties).map(([y, l]) => {
+        var f;
+        const b = l, p = (f = a.inputs.required) != null && f.includes(y) ? " (required)" : "";
+        return `    - ${y}: ${b.description || b.type}${p}`;
       }).join(`
 `);
-      d && (i += `
-${d}`);
+      c && (i += `
+${c}`);
     }
     return i;
   });
   return `${t}
 
-${a.join(`
+${n.join(`
 
 `)}`;
 }
-const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
+const Be = ({ size: o = 18 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2161,7 +2449,7 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "M9 3v18" })
     ]
   }
-), Ae = ({ size: o = 18 }) => /* @__PURE__ */ m(
+), Ve = ({ size: o = 18 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2178,7 +2466,7 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "m16 15-3-3 3-3" })
     ]
   }
-), Ee = ({ size: o = 18 }) => /* @__PURE__ */ m(
+), Ke = ({ size: o = 18 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2194,7 +2482,7 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "M15 3v18" })
     ]
   }
-), De = ({ size: o = 18 }) => /* @__PURE__ */ m(
+), He = ({ size: o = 18 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2211,23 +2499,23 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "m8 9 3 3-3 3" })
     ]
   }
-), Y = ({
+), ie = ({
   isCollapsed: o,
   onToggle: e,
   side: t = "left",
   iconSize: r = 18,
-  style: a,
-  shortcutHint: n = "Cmd/Ctrl+B",
+  style: n,
+  shortcutHint: a = "Cmd/Ctrl+B",
   title: i,
-  className: d
+  className: c
 }) => {
-  const { theme: y } = K(), c = () => t === "right" ? o ? /* @__PURE__ */ s(Ee, { size: r }) : /* @__PURE__ */ s(De, { size: r }) : o ? /* @__PURE__ */ s(Le, { size: r }) : /* @__PURE__ */ s(Ae, { size: r });
+  const { theme: y } = H(), l = () => t === "right" ? o ? /* @__PURE__ */ s(Ke, { size: r }) : /* @__PURE__ */ s(He, { size: r }) : o ? /* @__PURE__ */ s(Be, { size: r }) : /* @__PURE__ */ s(Ve, { size: r });
   return /* @__PURE__ */ s(
     "button",
     {
       onClick: e,
-      title: i ?? `${o ? "Show" : "Hide"} ${t === "right" ? "Right Panel" : "Sidebar"}${n ? ` (${n})` : ""}`,
-      className: d,
+      title: i ?? `${o ? "Show" : "Hide"} ${t === "right" ? "Right Panel" : "Sidebar"}${a ? ` (${a})` : ""}`,
+      className: c,
       style: {
         background: "transparent",
         border: "none",
@@ -2241,7 +2529,7 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
         transition: "all 0.2s",
         width: "32px",
         height: "32px",
-        ...a
+        ...n
       },
       onMouseEnter: (p) => {
         p.currentTarget.style.backgroundColor = y.colors.backgroundTertiary, p.currentTarget.style.color = y.colors.primary;
@@ -2249,10 +2537,10 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       onMouseLeave: (p) => {
         p.currentTarget.style.backgroundColor = "transparent", p.currentTarget.style.color = o ? y.colors.textSecondary : y.colors.primary;
       },
-      children: c()
+      children: l()
     }
   );
-}, ze = ({ size: o = 14 }) => /* @__PURE__ */ m(
+}, Qe = ({ size: o = 14 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2270,7 +2558,7 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "M20 17H4" })
     ]
   }
-), je = ({ size: o = 14 }) => /* @__PURE__ */ m(
+), Je = ({ size: o = 14 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2288,21 +2576,21 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "M4 17h16" })
     ]
   }
-), Z = ({
+), le = ({
   onSwitch: o,
   variant: e = "left-middle",
   iconSize: t = 14,
   style: r,
-  title: a,
-  className: n
+  title: n,
+  className: a
 }) => {
-  const { theme: i } = K(), d = () => e === "left-middle" ? "Switch left and middle panels" : "Switch right and middle panels", y = e === "left-middle" ? ze : je;
+  const { theme: i } = H(), c = () => e === "left-middle" ? "Switch left and middle panels" : "Switch right and middle panels", y = e === "left-middle" ? Qe : Je;
   return /* @__PURE__ */ s(
     "button",
     {
       onClick: o,
-      title: a ?? d(),
-      className: n,
+      title: n ?? c(),
+      className: a,
       style: {
         background: "transparent",
         border: "none",
@@ -2318,16 +2606,16 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
         height: "32px",
         ...r
       },
-      onMouseEnter: (c) => {
-        c.currentTarget.style.backgroundColor = i.colors.backgroundTertiary, c.currentTarget.style.color = i.colors.text;
+      onMouseEnter: (l) => {
+        l.currentTarget.style.backgroundColor = i.colors.backgroundTertiary, l.currentTarget.style.color = i.colors.text;
       },
-      onMouseLeave: (c) => {
-        c.currentTarget.style.backgroundColor = "transparent", c.currentTarget.style.color = i.colors.textSecondary;
+      onMouseLeave: (l) => {
+        l.currentTarget.style.backgroundColor = "transparent", l.currentTarget.style.color = i.colors.textSecondary;
       },
       children: /* @__PURE__ */ s(y, { size: t })
     }
   );
-}, qe = ({ size: o = 14 }) => /* @__PURE__ */ m(
+}, Ue = ({ size: o = 14 }) => /* @__PURE__ */ m(
   "svg",
   {
     width: o,
@@ -2344,24 +2632,24 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
       /* @__PURE__ */ s("path", { d: "M9 21V9" })
     ]
   }
-), $e = ({
+), Ge = ({
   onConfigure: o,
   iconSize: e = 14,
   style: t,
   title: r = "Configure panel layout",
-  className: a
+  className: n
 }) => {
-  const { theme: n } = K();
+  const { theme: a } = H();
   return /* @__PURE__ */ s(
     "button",
     {
       onClick: o,
       title: r,
-      className: a,
+      className: n,
       style: {
         background: "transparent",
         border: "none",
-        color: n.colors.textSecondary,
+        color: a.colors.textSecondary,
         cursor: "pointer",
         padding: "6px",
         borderRadius: "4px",
@@ -2374,90 +2662,90 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
         ...t
       },
       onMouseEnter: (i) => {
-        i.currentTarget.style.backgroundColor = n.colors.backgroundTertiary, i.currentTarget.style.color = n.colors.text;
+        i.currentTarget.style.backgroundColor = a.colors.backgroundTertiary, i.currentTarget.style.color = a.colors.text;
       },
       onMouseLeave: (i) => {
-        i.currentTarget.style.backgroundColor = "transparent", i.currentTarget.style.color = n.colors.textSecondary;
+        i.currentTarget.style.backgroundColor = "transparent", i.currentTarget.style.color = a.colors.textSecondary;
       },
-      children: /* @__PURE__ */ s(qe, { size: e })
+      children: /* @__PURE__ */ s(Ue, { size: e })
     }
   );
-}, at = ({
+}, mt = ({
   leftSidebarCollapsed: o = !1,
   onToggleLeftSidebar: e,
   showLeftSidebarControl: t = !1,
   rightSidebarCollapsed: r = !1,
-  onToggleRightSidebar: a,
-  showRightSidebarControl: n = !1,
+  onToggleRightSidebar: n,
+  showRightSidebarControl: a = !1,
   onSwitchLeftMiddlePanels: i,
-  showSwitchLeftMiddle: d = !1,
+  showSwitchLeftMiddle: c = !1,
   onSwitchRightMiddlePanels: y,
-  showSwitchRightMiddle: c = !1,
-  onConfigurePanels: T,
+  showSwitchRightMiddle: l = !1,
+  onConfigurePanels: b,
   showConfigureButton: p = !1,
-  gap: u = 4,
+  gap: f = 4,
   style: x,
-  className: k,
-  iconSize: l,
-  leftCollapseButtonProps: h,
+  className: h,
+  iconSize: d,
+  leftCollapseButtonProps: u,
   rightCollapseButtonProps: C,
-  leftMiddleSwitchButtonProps: E,
-  rightMiddleSwitchButtonProps: R,
+  leftMiddleSwitchButtonProps: L,
+  rightMiddleSwitchButtonProps: $,
   configureButtonProps: I
-}) => t && e || d && i || p && T || c && y || n && a ? /* @__PURE__ */ m(
+}) => t && e || c && i || p && b || l && y || a && n ? /* @__PURE__ */ m(
   "div",
   {
-    className: k,
+    className: h,
     style: {
       display: "flex",
       alignItems: "center",
-      gap: `${u}px`,
+      gap: `${f}px`,
       ...x
     },
     children: [
       t && e && /* @__PURE__ */ s(
-        Y,
+        ie,
         {
           isCollapsed: o,
           onToggle: e,
           side: "left",
-          iconSize: l ?? 18,
-          ...h
+          iconSize: d ?? 18,
+          ...u
         }
       ),
-      d && i && /* @__PURE__ */ s(
-        Z,
+      c && i && /* @__PURE__ */ s(
+        le,
         {
           onSwitch: i,
           variant: "left-middle",
-          iconSize: l ?? 14,
-          ...E
+          iconSize: d ?? 14,
+          ...L
         }
       ),
-      p && T && /* @__PURE__ */ s(
-        $e,
+      p && b && /* @__PURE__ */ s(
+        Ge,
         {
-          onConfigure: T,
-          iconSize: l ?? 14,
+          onConfigure: b,
+          iconSize: d ?? 14,
           ...I
         }
       ),
-      c && y && /* @__PURE__ */ s(
-        Z,
+      l && y && /* @__PURE__ */ s(
+        le,
         {
           onSwitch: y,
           variant: "right-middle",
-          iconSize: l ?? 14,
-          ...R
+          iconSize: d ?? 14,
+          ...$
         }
       ),
-      n && a && /* @__PURE__ */ s(
-        Y,
+      a && n && /* @__PURE__ */ s(
+        ie,
         {
           isCollapsed: r,
-          onToggle: a,
+          onToggle: n,
           side: "right",
-          iconSize: l ?? 18,
+          iconSize: d ?? 18,
           ...C
         }
       )
@@ -2465,49 +2753,52 @@ const Le = ({ size: o = 18 }) => /* @__PURE__ */ m(
   }
 ) : null;
 export {
-  ee as AgentCommandInput,
-  Te as AgentCommandPalette,
-  oe as AgentResponseDisplay,
-  lt as EditableConfigurablePanelLayout,
-  Qe as FocusIndicator,
-  xe as LocalStoragePersistenceAdapter,
-  we as LocalStorageWorkspaceAdapter,
-  Y as PanelCollapseButton,
-  $e as PanelConfigureButton,
-  at as PanelControls,
-  Z as PanelSwitchButton,
-  ct as ResponsiveConfigurablePanelLayout,
-  te as ToolExecutionList,
-  L as WorkspaceLayoutService,
-  ie as collapseAllPanelsTool,
-  le as expandAllPanelsTool,
-  de as focusPanelTool,
-  st as generateToolsSystemPrompt,
-  se as getPanelStateTool,
-  re as getVisiblePanelsTool,
-  Ye as layoutActionTools,
-  Ie as layoutTools,
-  Ze as layoutToolsMetadata,
-  ae as listPanelsWithStateTool,
-  dt as mapThemeToPanelVars,
-  pt as mapThemeToTabVars,
-  pe as resetLayoutTool,
-  Xe as stateQueryTools,
-  ce as switchPanelTool,
-  ne as togglePanelTool,
-  Re as toolToAIFunction,
-  _e as toolToAnthropicFormat,
-  Pe as toolToGeminiFunction,
-  We as toolToOpenAIFunction,
-  rt as toolsToAIFunctions,
-  ot as toolsToAnthropicFormat,
-  et as toolsToGeminiFormat,
-  tt as toolsToOpenAIFormat,
-  Ge as useAgentCommandPalette,
-  Je as usePanelFocus,
-  Ue as usePanelFocusListener,
-  He as usePanelKeyboardShortcuts,
-  Ke as usePanelPersistence,
-  Ve as useWorkspace
+  ce as AgentCommandInput,
+  De as AgentCommandPalette,
+  pe as AgentResponseDisplay,
+  bt as EditableConfigurablePanelLayout,
+  it as FocusIndicator,
+  ze as LocalStoragePersistenceAdapter,
+  Le as LocalStorageWorkspaceAdapter,
+  ie as PanelCollapseButton,
+  Ge as PanelConfigureButton,
+  mt as PanelControls,
+  le as PanelSwitchButton,
+  ue as QuickCommandAutocomplete,
+  wt as ResponsiveConfigurablePanelLayout,
+  de as ToolExecutionList,
+  D as WorkspaceLayoutService,
+  me as collapseAllPanelsTool,
+  ke as expandAllPanelsTool,
+  be as focusPanelTool,
+  ae as fuzzyMatch,
+  gt as generateToolsSystemPrompt,
+  he as getPanelStateTool,
+  fe as getVisiblePanelsTool,
+  dt as layoutActionTools,
+  je as layoutTools,
+  pt as layoutToolsMetadata,
+  ye as listPanelsWithStateTool,
+  St as mapThemeToPanelVars,
+  vt as mapThemeToTabVars,
+  we as resetLayoutTool,
+  $e as searchQuickCommands,
+  ct as stateQueryTools,
+  xe as switchPanelTool,
+  ge as togglePanelTool,
+  Ne as toolToAIFunction,
+  Fe as toolToAnthropicFormat,
+  Me as toolToGeminiFunction,
+  Oe as toolToOpenAIFunction,
+  yt as toolsToAIFunctions,
+  ht as toolsToAnthropicFormat,
+  ut as toolsToGeminiFormat,
+  ft as toolsToOpenAIFormat,
+  lt as useAgentCommandPalette,
+  nt as usePanelFocus,
+  at as usePanelFocusListener,
+  st as usePanelKeyboardShortcuts,
+  ot as usePanelPersistence,
+  rt as useWorkspace
 };
 //# sourceMappingURL=index.esm.js.map