@principal-ade/panel-layouts 0.1.6 → 0.2.0

package/dist/index.esm.js

@@ -1,12 +1,12 @@
-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 './index.css';var x = Object.defineProperty;
+var F = (l, e, t) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
+var z = (l, e, t) => F(l, typeof e != "symbol" ? e + "" : e, t);
+import { EditableConfigurablePanelLayout as G, ResponsiveConfigurablePanelLayout as Q, mapThemeToPanelVars as H, mapThemeToTabVars as U } from "@principal-ade/panels";
+import { useState as C, useRef as I, useEffect as T, useCallback as f } from "react";
 import { jsx as O } from "react/jsx-runtime";
 class $ {
   constructor() {
-    A(this, "storageKey", "panel-layouts");
+    z(this, "storageKey", "panel-layouts");
   }
   async load(e) {
     try {
@@ -27,46 +27,46 @@ class $ {
     }
   }
 }
-function _(n) {
+function _(l) {
   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);
-  P(() => {
+  } = l, [i, o] = C(t), [c, R] = C(l.collapsed), h = I(l.collapsed), P = I({}), w = I(null), m = I(null);
+  T(() => {
     (async () => {
       const g = await s.load(e);
-      g != null && g.sizes && (f(g.sizes), r(g.sizes));
+      g != null && g.sizes && (o(g.sizes), k(g.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 k = f(
+    (n) => {
+      "left" in n && n.left > 0 && (P.current.left = n.left), "middle" in n && n.middle > 0 && (P.current.middle = n.middle), "right" in n && n.right > 0 && (P.current.right = n.right);
     },
     []
-  ), o = p(
-    (i) => {
-      const g = b.current[i];
+  ), d = f(
+    (n) => {
+      const g = P.current[n];
       if (g && g > 0)
         return g;
-      if (i === "left" && "left" in t && t.left > 0)
+      if (n === "left" && "left" in t && t.left > 0)
         return t.left;
-      if (i === "right" && "right" in t && t.right > 0)
+      if (n === "right" && "right" in t && t.right > 0)
         return t.right;
     },
     [t]
-  ), k = C(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) => {
+  ), r = I(t);
+  T(() => {
+    ("left" in t && t.left !== r.current.left || "middle" in t && "middle" in r.current && t.middle !== r.current.middle || "right" in t && t.right !== r.current.right) && (o(t), k(t), r.current = t);
+  }, [t, k]), T(() => {
+    const n = l.collapsed.left !== h.current.left, g = "right" in l.collapsed && "right" in h.current && l.collapsed.right !== h.current.right;
+    (n || g) && (R(l.collapsed), h.current = { ...l.collapsed });
+  }, [l.collapsed.left, l.collapsed.right]);
+  const y = f(
+    async (n) => {
       try {
-        await s.save(e, { sizes: i });
+        await s.save(e, { sizes: n });
       } catch (g) {
         console.error(
           `Failed to save panel preferences for ${e}:`,
@@ -75,74 +75,74 @@ function _(n) {
       }
     },
     [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);
+  ), W = f(
+    (n) => {
+      const g = { ...n };
+      let u = !0;
+      if ("left" in n) {
+        const p = !!(c != null && c.left), b = n.left;
+        if (p) {
+          const v = d("left");
+          v !== void 0 && v > 0 ? g.left = v : u = !1;
+        } else b === 0 && (u = !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 n) {
+        const p = !!(c != null && c.right), b = n.right;
+        if (p) {
+          const v = d("right");
+          v !== void 0 && v > 0 ? g.right = v : u = !1;
+        } else b === 0 && (u = !1);
       }
-      if (f(g), r(g), h.current && (clearTimeout(h.current), h.current = null), !c) {
-        y.current = null;
+      if (o(g), k(g), w.current && (clearTimeout(w.current), w.current = null), !u) {
+        m.current = null;
         return;
       }
-      y.current = g, h.current = setTimeout(() => {
-        const d = y.current;
-        d && (T(d), y.current = null), h.current = null;
+      m.current = g, w.current = setTimeout(() => {
+        const p = m.current;
+        p && (y(p), m.current = null), w.current = null;
       }, 500);
     },
     [
-      u,
-      o,
+      c,
+      d,
       a,
-      T,
-      r
+      y,
+      k
     ]
   );
-  P(() => () => {
-    if (h.current) {
-      const i = y.current;
-      i && (T(i), y.current = null), clearTimeout(h.current), h.current = null;
+  T(() => () => {
+    if (w.current) {
+      const n = m.current;
+      n && (y(n), m.current = null), clearTimeout(w.current), w.current = null;
     }
-  }, [T]);
-  const I = p(async () => {
-  }, []), E = p(async () => {
-  }, []), L = p(async () => {
-  }, []), x = p(async () => {
+  }, [y]);
+  const A = f(async () => {
+  }, []), E = f(async () => {
+  }, []), L = f(async () => {
+  }, []), D = f(async () => {
   }, []);
   return a === "three-panel" ? {
     type: "three-panel",
-    sizes: l,
-    collapsed: u,
-    handlePanelResize: z,
-    handleLeftCollapseComplete: I,
+    sizes: i,
+    collapsed: c,
+    handlePanelResize: W,
+    handleLeftCollapseComplete: A,
     handleLeftExpandComplete: E,
     handleRightCollapseComplete: L,
-    handleRightExpandComplete: x
+    handleRightExpandComplete: D
   } : {
     type: "two-panel",
-    sizes: l,
-    collapsed: u,
-    handlePanelResize: z,
-    handleLeftCollapseComplete: I,
+    sizes: i,
+    collapsed: c,
+    handlePanelResize: W,
+    handleLeftCollapseComplete: A,
     handleLeftExpandComplete: E
   };
 }
 class N {
   constructor() {
-    A(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
-    A(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
+    z(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
+    z(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
   }
   /**
    * Load all user-created workspace presets
@@ -202,14 +202,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), i = localStorage.getItem(a);
+          if (i)
             try {
-              e[s] = JSON.parse(l);
-            } catch (f) {
+              e[s] = JSON.parse(i);
+            } catch (o) {
               console.error(
                 `Failed to parse repository state for ${s}:`,
-                f
+                o
               );
             }
         }
@@ -220,7 +220,7 @@ class N {
     }
   }
 }
-class m {
+class S {
   /**
    * Configure a custom storage adapter (for Electron IPC or remote storage)
    */
@@ -257,11 +257,11 @@ class m {
       createdAt: Date.now(),
       updatedAt: Date.now(),
       isBuiltIn: !1
-    }, l = {
+    }, i = {
       ...t,
       [a]: s
     };
-    return await this.adapter.saveWorkspacePresets(l), s;
+    return await this.adapter.saveWorkspacePresets(i), s;
   }
   /**
    * Update an existing workspace layout
@@ -272,7 +272,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 i = {
       ...s,
       ...t,
       id: e,
@@ -280,11 +280,11 @@ class m {
       createdAt: s.createdAt,
       // Preserve creation time
       updatedAt: Date.now()
-    }, f = {
+    }, o = {
       ...a,
-      [e]: l
+      [e]: i
     };
-    return await this.adapter.saveWorkspacePresets(f), l;
+    return await this.adapter.saveWorkspacePresets(o), i;
   }
   /**
    * Delete a workspace layout
@@ -609,242 +609,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(
+z(S, "adapter", new N());
+function K(l = {}) {
+  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: a } = l, [s, i] = C(
     {}
-  ), [f, u] = R(null), [v, w] = R(null), [b, h] = R(!0), [y, r] = R(null), o = p(async () => {
+  ), [o, c] = C(null), [R, h] = C(null), [P, w] = C(!0), [m, k] = C(null), d = f(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 || {
+      w(!0), k(null);
+      const u = await S.getWorkspaceLayouts();
+      if (i(u), e) {
+        let p = await S.getRepositoryState(e);
+        if (!p && t) {
+          const b = a || "project-management", v = await S.getWorkspaceLayout(b);
+          v && (p = {
+            workspaceId: b,
+            sizes: v.defaultSizes || {
               left: 20,
               middle: 45,
               right: 35
             },
-            collapsed: W.defaultCollapsed || {
+            collapsed: v.defaultCollapsed || {
               left: !1,
               right: !1
             }
-          }, await m.setRepositoryState(
+          }, await S.setRepositoryState(
             e,
-            d
+            p
           ));
         }
-        if (u(d), d != null && d.workspaceId) {
-          const S = await m.getWorkspaceLayout(
-            d.workspaceId
+        if (c(p), p != null && p.workspaceId) {
+          const b = await S.getWorkspaceLayout(
+            p.workspaceId
           );
-          w(S);
+          h(b);
         } else
-          w(null);
+          h(null);
       }
-    } catch (c) {
-      r(c), console.error("Failed to load workspace data:", c);
+    } catch (u) {
+      k(u), console.error("Failed to load workspace data:", u);
     } finally {
-      h(!1);
+      w(!1);
     }
   }, [e, t, a]);
-  P(() => {
-    o();
-  }, [o]);
-  const k = p(
-    async (c) => await m.getWorkspaceLayout(c),
+  T(() => {
+    d();
+  }, [d]);
+  const r = f(
+    async (u) => await S.getWorkspaceLayout(u),
     []
-  ), T = p(
-    async (c) => {
-      const d = await m.createWorkspaceLayout(c);
-      return await o(), d;
+  ), y = f(
+    async (u) => {
+      const p = await S.createWorkspaceLayout(u);
+      return await d(), p;
     },
-    [o]
-  ), z = p(
-    async (c, d) => {
-      const S = await m.updateWorkspaceLayout(c, d);
-      return await o(), S;
+    [d]
+  ), W = f(
+    async (u, p) => {
+      const b = await S.updateWorkspaceLayout(u, p);
+      return await d(), b;
     },
-    [o]
-  ), I = p(
-    async (c) => {
-      const d = await m.deleteWorkspaceLayout(c);
-      return d && await o(), d;
+    [d]
+  ), A = f(
+    async (u) => {
+      const p = await S.deleteWorkspaceLayout(u);
+      return p && await d(), p;
     },
-    [o]
-  ), E = p(
-    async (c) => {
+    [d]
+  ), E = f(
+    async (u) => {
       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 p = await S.getWorkspaceLayout(u);
+      if (!p) {
+        console.error(`Workspace ${u} not found`);
         return;
       }
-      const S = {
-        workspaceId: c,
-        sizes: d.defaultSizes || { left: 20, middle: 45, right: 35 },
-        collapsed: d.defaultCollapsed || {
+      const b = {
+        workspaceId: u,
+        sizes: p.defaultSizes || { left: 20, middle: 45, right: 35 },
+        collapsed: p.defaultCollapsed || {
           left: !1,
           right: !1
         }
       };
-      await m.setRepositoryState(e, S), await o();
+      await S.setRepositoryState(e, b), await d();
     },
-    [e, o]
-  ), L = p(
-    async (c) => {
+    [e, d]
+  ), L = f(
+    async (u) => {
       if (!e) {
         console.error("Cannot update sizes without repositoryKey");
         return;
       }
-      await m.updateRepositorySizes(e, c), await o();
+      await S.updateRepositorySizes(e, u), await d();
     },
-    [e, o]
-  ), x = p(
-    async (c) => {
+    [e, d]
+  ), D = f(
+    async (u) => {
       if (!e) {
         console.error("Cannot update collapsed without repositoryKey");
         return;
       }
-      await m.updateRepositoryCollapsed(
+      await S.updateRepositoryCollapsed(
         e,
-        c
-      ), await o();
+        u
+      ), await d();
     },
-    [e, o]
-  ), i = p(async () => {
-    if (!e || !(f != null && f.workspaceId)) {
+    [e, d]
+  ), n = f(async () => {
+    if (!e || !(o != null && o.workspaceId)) {
       console.error("Cannot reset without repositoryKey and active workspace");
       return;
     }
-    await m.resetRepositoryToWorkspaceDefaults(
+    await S.resetRepositoryToWorkspaceDefaults(
       e,
-      f.workspaceId
-    ), await o();
-  }, [e, f == null ? void 0 : f.workspaceId, o]), g = p(async () => {
-    await o();
-  }, [o]);
+      o.workspaceId
+    ), await d();
+  }, [e, o == null ? void 0 : o.workspaceId, d]), g = f(async () => {
+    await d();
+  }, [d]);
   return {
     workspaces: s,
-    repositoryState: f,
-    activeWorkspace: v,
-    loading: b,
-    error: y,
-    getWorkspace: k,
-    createWorkspace: T,
-    updateWorkspace: z,
-    deleteWorkspace: I,
+    repositoryState: o,
+    activeWorkspace: R,
+    loading: P,
+    error: m,
+    getWorkspace: r,
+    createWorkspace: y,
+    updateWorkspace: W,
+    deleteWorkspace: A,
     applyWorkspace: E,
     updateSizes: L,
-    updateCollapsed: x,
-    resetToDefaults: i,
+    updateCollapsed: D,
+    resetToDefaults: n,
     refresh: g
   };
 }
-function j(n = {}) {
+function j(l = {}) {
   const {
     initialFocus: e = null,
     collapsed: t = {},
     panelType: a = "three-panel",
-    onFocusChange: s
-  } = n, [l, f] = R(
+    onFocusChange: s,
+    events: i,
+    getPanelId: o
+  } = l, [c, R] = C(
     e
-  ), u = p(
+  ), h = f(
     (r) => {
-      f(r), s == null || s(r);
+      const y = c;
+      if (R(r), s == null || s(r), i && o) {
+        if (y) {
+          const A = o(y);
+          A && i.emit({
+            type: "panel:blur",
+            source: "panel-layouts",
+            timestamp: Date.now(),
+            payload: {
+              panelId: A,
+              panelSlot: y,
+              nextPanelId: o(r)
+            }
+          });
+        }
+        const W = o(r);
+        W && i.emit({
+          type: "panel:focus",
+          source: "panel-layouts",
+          timestamp: Date.now(),
+          payload: {
+            panelId: W,
+            panelSlot: r,
+            source: "keyboard-shortcut"
+          }
+        });
+      }
     },
-    [s]
-  ), v = p(() => {
-    f(null), s == null || s(null);
-  }, [s]), w = p(() => {
+    [c, s, i, o]
+  ), P = f(() => {
+    const r = c;
+    if (R(null), s == null || s(null), i && o && r) {
+      const y = o(r);
+      y && i.emit({
+        type: "panel:blur",
+        source: "panel-layouts",
+        timestamp: Date.now(),
+        payload: {
+          panelId: y,
+          panelSlot: r
+        }
+      });
+    }
+  }, [c, s, i, o]), w = f(() => {
     const r = [];
     return t.left || r.push("left"), r.push("middle"), a === "three-panel" && !t.right && r.push("right"), r;
-  }, [t, a]), b = p(() => {
+  }, [t, a]), m = f(() => {
     const r = w();
     if (r.length === 0) return;
-    if (l === null) {
-      u(r[0]);
+    if (c === null) {
+      h(r[0]);
       return;
     }
-    const o = r.indexOf(l);
-    if (o === -1) {
-      u(r[0]);
+    const y = r.indexOf(c);
+    if (y === -1) {
+      h(r[0]);
       return;
     }
-    const k = (o + 1) % r.length;
-    u(r[k]);
-  }, [l, w, u]), h = p(() => {
+    const W = (y + 1) % r.length;
+    h(r[W]);
+  }, [c, w, h]), k = f(() => {
     const r = w();
     if (r.length === 0) return;
-    if (l === null) {
-      u(r[r.length - 1]);
+    if (c === null) {
+      h(r[r.length - 1]);
       return;
     }
-    const o = r.indexOf(l);
-    if (o === -1) {
-      u(r[r.length - 1]);
+    const y = r.indexOf(c);
+    if (y === -1) {
+      h(r[r.length - 1]);
       return;
     }
-    const k = o === 0 ? r.length - 1 : o - 1;
-    u(r[k]);
-  }, [l, w, u]), y = p(
-    (r) => l === r,
-    [l]
+    const W = y === 0 ? r.length - 1 : y - 1;
+    h(r[W]);
+  }, [c, w, h]), d = f(
+    (r) => c === r,
+    [c]
   );
   return {
-    focusedPanel: l,
-    setFocus: u,
-    clearFocus: v,
-    focusNext: b,
-    focusPrevious: h,
-    isFocused: y
+    focusedPanel: c,
+    setFocus: h,
+    clearFocus: P,
+    focusNext: m,
+    focusPrevious: k,
+    isFocused: d
   };
 }
-function q(n) {
+function q(l) {
   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);
-  P(() => {
-    v.current = t;
-  }, [t]), P(() => {
-    w.current = a;
-  }, [a]), P(() => {
-    b.current = s;
+    setFocus: i,
+    onExpand: o,
+    onCollapse: c
+  } = l, R = I(t), h = I(a), P = I(s);
+  T(() => {
+    R.current = t;
+  }, [t]), T(() => {
+    h.current = a;
+  }, [a]), T(() => {
+    P.current = s;
   }, [s]);
-  const h = p(
-    (y) => {
-      if (!y.altKey || y.ctrlKey || y.metaKey || y.shiftKey)
+  const w = f(
+    (m) => {
+      if (!m.altKey || m.ctrlKey || m.metaKey || m.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 k = m.code, d = R.current, r = h.current, y = P.current;
+      k === "Digit1" || k === "Numpad1" ? (m.preventDefault(), r.left ? o("left") : d !== "left" ? i("left") : (c("left"), i("middle"))) : k === "Digit2" || k === "Numpad2" ? (m.preventDefault(), i("middle")) : (k === "Digit3" || k === "Numpad3") && y === "three-panel" && (m.preventDefault(), r.right ? o("right") : d !== "right" ? i("right") : (c("right"), i("middle")));
     },
-    [l, f, u]
+    [i, o, c]
   );
-  P(() => {
+  T(() => {
     if (e)
-      return window.addEventListener("keydown", h), () => {
-        window.removeEventListener("keydown", h);
+      return window.addEventListener("keydown", w), () => {
+        window.removeEventListener("keydown", w);
       };
-  }, [e, h]);
+  }, [e, w]);
+}
+function X(l, e, t, a) {
+  T(() => {
+    const s = e.on(
+      "panel:focus",
+      (o) => {
+        o.payload.panelId === l && t();
+      }
+    );
+    let i;
+    return a && (i = e.on(
+      "panel:blur",
+      (o) => {
+        o.payload.panelId === l && a();
+      }
+    )), () => {
+      s(), i == null || i();
+    };
+  }, [l, e, t, a]);
 }
-const X = ({
-  isFocused: n,
+const M = ({
+  isFocused: l,
   className: e = "",
   style: t = {}
 }) => {
-  if (!n)
+  if (!l)
     return null;
   const a = {
     position: "absolute",
@@ -871,15 +930,16 @@ const X = ({
   );
 };
 export {
-  Z as EditableConfigurablePanelLayout,
-  X as FocusIndicator,
+  G as EditableConfigurablePanelLayout,
+  M as FocusIndicator,
   $ as LocalStoragePersistenceAdapter,
   N as LocalStorageWorkspaceAdapter,
-  G as ResponsiveConfigurablePanelLayout,
-  m as WorkspaceLayoutService,
-  Q as mapThemeToPanelVars,
-  H as mapThemeToTabVars,
+  Q as ResponsiveConfigurablePanelLayout,
+  S as WorkspaceLayoutService,
+  H as mapThemeToPanelVars,
+  U as mapThemeToTabVars,
   j as usePanelFocus,
+  X as usePanelFocusListener,
   q as usePanelKeyboardShortcuts,
   _ as usePanelPersistence,
   K as useWorkspace