@principal-ade/panel-layouts 0.1.5 → 0.1.6

package/dist/index.esm.js

@@ -1,11 +1,12 @@
-import './index.css';var $ = Object.defineProperty;
-var D = (n, e, t) => e in n ? $(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var C = (n, e, t) => D(n, typeof e != "symbol" ? e + "" : e, t);
-import { EditableConfigurablePanelLayout as q, ResponsiveConfigurablePanelLayout as K, mapThemeToPanelVars as X, mapThemeToTabVars as M } from "@principal-ade/panels";
-import { useState as b, useRef as T, useEffect as R, useCallback as d } from "react";
-class F {
+import './index.css';var D = Object.defineProperty;
+var F = (n, e, t) => e in n ? D(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var A = (n, e, t) => F(n, typeof e != "symbol" ? e + "" : e, t);
+import { EditableConfigurablePanelLayout as Z, ResponsiveConfigurablePanelLayout as G, mapThemeToPanelVars as Q, mapThemeToTabVars as H } from "@principal-ade/panels";
+import { useState as R, useRef as C, useEffect as P, useCallback as p } from "react";
+import { jsx as O } from "react/jsx-runtime";
+class $ {
   constructor() {
-    C(this, "storageKey", "panel-layouts");
+    A(this, "storageKey", "panel-layouts");
   }
   async load(e) {
     try {
@@ -26,122 +27,122 @@ class F {
     }
   }
 }
-function x(n) {
+function _(n) {
   const {
     viewKey: e,
     defaultSizes: t,
     panelType: a,
-    adapter: s = new F()
-  } = n, [f, u] = b(t), [y, E] = b(n.collapsed), S = T(n.collapsed), v = T({}), h = T(null), k = T(null);
-  R(() => {
+    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(() => {
     (async () => {
-      const c = await s.load(e);
-      c != null && c.sizes && (u(c.sizes), m(c.sizes));
+      const g = await s.load(e);
+      g != null && g.sizes && (f(g.sizes), r(g.sizes));
     })();
   }, [e]);
-  const m = d(
-    (r) => {
-      "left" in r && r.left > 0 && (v.current.left = r.left), "middle" in r && r.middle > 0 && (v.current.middle = r.middle), "right" in r && r.right > 0 && (v.current.right = r.right);
+  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);
     },
     []
-  ), l = d(
-    (r) => {
-      const c = v.current[r];
-      if (c && c > 0)
-        return c;
-      if (r === "left" && "left" in t && t.left > 0)
+  ), o = p(
+    (i) => {
+      const g = b.current[i];
+      if (g && g > 0)
+        return g;
+      if (i === "left" && "left" in t && t.left > 0)
         return t.left;
-      if (r === "right" && "right" in t && t.right > 0)
+      if (i === "right" && "right" in t && t.right > 0)
         return t.right;
     },
     [t]
-  ), W = T(t);
-  R(() => {
-    ("left" in t && t.left !== W.current.left || "middle" in t && "middle" in W.current && t.middle !== W.current.middle || "right" in t && t.right !== W.current.right) && (u(t), m(t), W.current = t);
-  }, [t, m]), R(() => {
-    const r = n.collapsed.left !== S.current.left, c = "right" in n.collapsed && "right" in S.current && n.collapsed.right !== S.current.right;
-    (r || c) && (E(n.collapsed), S.current = { ...n.collapsed });
+  ), 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 P = d(
-    async (r) => {
+  const T = p(
+    async (i) => {
       try {
-        await s.save(e, { sizes: r });
-      } catch (c) {
+        await s.save(e, { sizes: i });
+      } catch (g) {
         console.error(
           `Failed to save panel preferences for ${e}:`,
-          c
+          g
         );
       }
     },
     [e, s]
-  ), A = d(
-    (r) => {
-      const c = { ...r };
-      let o = !0;
-      if ("left" in r) {
-        const i = !!(y != null && y.left), g = r.left;
-        if (i) {
-          const w = l("left");
-          w !== void 0 && w > 0 ? c.left = w : o = !1;
-        } else g === 0 && (o = !1);
+  ), 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);
       }
-      if (a === "three-panel" && "right" in r) {
-        const i = !!(y != null && y.right), g = r.right;
-        if (i) {
-          const w = l("right");
-          w !== void 0 && w > 0 ? c.right = w : o = !1;
-        } else g === 0 && (o = !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 (u(c), m(c), h.current && (clearTimeout(h.current), h.current = null), !o) {
-        k.current = null;
+      if (f(g), r(g), h.current && (clearTimeout(h.current), h.current = null), !c) {
+        y.current = null;
         return;
       }
-      k.current = c, h.current = setTimeout(() => {
-        const i = k.current;
-        i && (P(i), k.current = null), h.current = null;
+      y.current = g, h.current = setTimeout(() => {
+        const d = y.current;
+        d && (T(d), y.current = null), h.current = null;
       }, 500);
     },
     [
-      y,
-      l,
+      u,
+      o,
       a,
-      P,
-      m
+      T,
+      r
     ]
   );
-  R(() => () => {
+  P(() => () => {
     if (h.current) {
-      const r = k.current;
-      r && (P(r), k.current = null), clearTimeout(h.current), h.current = null;
+      const i = y.current;
+      i && (T(i), y.current = null), clearTimeout(h.current), h.current = null;
     }
-  }, [P]);
-  const z = d(async () => {
-  }, []), I = d(async () => {
-  }, []), L = d(async () => {
-  }, []), O = d(async () => {
+  }, [T]);
+  const I = p(async () => {
+  }, []), E = p(async () => {
+  }, []), L = p(async () => {
+  }, []), x = p(async () => {
   }, []);
   return a === "three-panel" ? {
     type: "three-panel",
-    sizes: f,
-    collapsed: y,
-    handlePanelResize: A,
-    handleLeftCollapseComplete: z,
-    handleLeftExpandComplete: I,
+    sizes: l,
+    collapsed: u,
+    handlePanelResize: z,
+    handleLeftCollapseComplete: I,
+    handleLeftExpandComplete: E,
     handleRightCollapseComplete: L,
-    handleRightExpandComplete: O
+    handleRightExpandComplete: x
   } : {
     type: "two-panel",
-    sizes: f,
-    collapsed: y,
-    handlePanelResize: A,
-    handleLeftCollapseComplete: z,
-    handleLeftExpandComplete: I
+    sizes: l,
+    collapsed: u,
+    handlePanelResize: z,
+    handleLeftCollapseComplete: I,
+    handleLeftExpandComplete: E
   };
 }
-class V {
+class N {
   constructor() {
-    C(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
-    C(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
+    A(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
+    A(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
   }
   /**
    * Load all user-created workspace presets
@@ -201,14 +202,14 @@ class V {
       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), f = localStorage.getItem(a);
-          if (f)
+          const s = a.substring(this.REPO_STATE_PREFIX.length), l = localStorage.getItem(a);
+          if (l)
             try {
-              e[s] = JSON.parse(f);
-            } catch (u) {
+              e[s] = JSON.parse(l);
+            } catch (f) {
               console.error(
                 `Failed to parse repository state for ${s}:`,
-                u
+                f
               );
             }
         }
@@ -219,7 +220,7 @@ class V {
     }
   }
 }
-class p {
+class m {
   /**
    * Configure a custom storage adapter (for Electron IPC or remote storage)
    */
@@ -256,11 +257,11 @@ class p {
       createdAt: Date.now(),
       updatedAt: Date.now(),
       isBuiltIn: !1
-    }, f = {
+    }, l = {
       ...t,
       [a]: s
     };
-    return await this.adapter.saveWorkspacePresets(f), s;
+    return await this.adapter.saveWorkspacePresets(l), s;
   }
   /**
    * Update an existing workspace layout
@@ -271,7 +272,7 @@ class p {
       return console.error(`Workspace layout ${e} not found`), null;
     if (s.isBuiltIn)
       return console.error(`Cannot update built-in workspace layout ${e}`), null;
-    const f = {
+    const l = {
       ...s,
       ...t,
       id: e,
@@ -279,11 +280,11 @@ class p {
       createdAt: s.createdAt,
       // Preserve creation time
       updatedAt: Date.now()
-    }, u = {
+    }, f = {
       ...a,
-      [e]: f
+      [e]: l
     };
-    return await this.adapter.saveWorkspacePresets(u), f;
+    return await this.adapter.saveWorkspacePresets(f), l;
   }
   /**
    * Delete a workspace layout
@@ -608,153 +609,279 @@ class p {
     Object.keys(e).length;
   }
 }
-C(p, "adapter", new V());
-function J(n = {}) {
-  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: a } = n, [s, f] = b(
+A(m, "adapter", new N());
+function K(n = {}) {
+  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: a } = n, [s, l] = R(
     {}
-  ), [u, y] = b(null), [E, S] = b(null), [v, h] = b(!0), [k, m] = b(null), l = d(async () => {
+  ), [f, u] = R(null), [v, w] = R(null), [b, h] = R(!0), [y, r] = R(null), o = p(async () => {
     try {
-      h(!0), m(null);
-      const o = await p.getWorkspaceLayouts();
-      if (f(o), e) {
-        let i = await p.getRepositoryState(e);
-        if (!i && t) {
-          const g = a || "project-management", w = await p.getWorkspaceLayout(g);
-          w && (i = {
-            workspaceId: g,
-            sizes: w.defaultSizes || {
+      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 || {
               left: 20,
               middle: 45,
               right: 35
             },
-            collapsed: w.defaultCollapsed || {
+            collapsed: W.defaultCollapsed || {
               left: !1,
               right: !1
             }
-          }, await p.setRepositoryState(
+          }, await m.setRepositoryState(
             e,
-            i
+            d
           ));
         }
-        if (y(i), i != null && i.workspaceId) {
-          const g = await p.getWorkspaceLayout(
-            i.workspaceId
+        if (u(d), d != null && d.workspaceId) {
+          const S = await m.getWorkspaceLayout(
+            d.workspaceId
           );
-          S(g);
+          w(S);
         } else
-          S(null);
+          w(null);
       }
-    } catch (o) {
-      m(o), console.error("Failed to load workspace data:", o);
+    } catch (c) {
+      r(c), console.error("Failed to load workspace data:", c);
     } finally {
       h(!1);
     }
   }, [e, t, a]);
-  R(() => {
-    l();
-  }, [l]);
-  const W = d(
-    async (o) => await p.getWorkspaceLayout(o),
+  P(() => {
+    o();
+  }, [o]);
+  const k = p(
+    async (c) => await m.getWorkspaceLayout(c),
     []
-  ), P = d(
-    async (o) => {
-      const i = await p.createWorkspaceLayout(o);
-      return await l(), i;
+  ), T = p(
+    async (c) => {
+      const d = await m.createWorkspaceLayout(c);
+      return await o(), d;
     },
-    [l]
-  ), A = d(
-    async (o, i) => {
-      const g = await p.updateWorkspaceLayout(o, i);
-      return await l(), g;
+    [o]
+  ), z = p(
+    async (c, d) => {
+      const S = await m.updateWorkspaceLayout(c, d);
+      return await o(), S;
     },
-    [l]
-  ), z = d(
-    async (o) => {
-      const i = await p.deleteWorkspaceLayout(o);
-      return i && await l(), i;
+    [o]
+  ), I = p(
+    async (c) => {
+      const d = await m.deleteWorkspaceLayout(c);
+      return d && await o(), d;
     },
-    [l]
-  ), I = d(
-    async (o) => {
+    [o]
+  ), E = p(
+    async (c) => {
       if (!e) {
         console.error("Cannot apply workspace without repositoryKey");
         return;
       }
-      const i = await p.getWorkspaceLayout(o);
-      if (!i) {
-        console.error(`Workspace ${o} not found`);
+      const d = await m.getWorkspaceLayout(c);
+      if (!d) {
+        console.error(`Workspace ${c} not found`);
         return;
       }
-      const g = {
-        workspaceId: o,
-        sizes: i.defaultSizes || { left: 20, middle: 45, right: 35 },
-        collapsed: i.defaultCollapsed || {
+      const S = {
+        workspaceId: c,
+        sizes: d.defaultSizes || { left: 20, middle: 45, right: 35 },
+        collapsed: d.defaultCollapsed || {
           left: !1,
           right: !1
         }
       };
-      await p.setRepositoryState(e, g), await l();
+      await m.setRepositoryState(e, S), await o();
     },
-    [e, l]
-  ), L = d(
-    async (o) => {
+    [e, o]
+  ), L = p(
+    async (c) => {
       if (!e) {
         console.error("Cannot update sizes without repositoryKey");
         return;
       }
-      await p.updateRepositorySizes(e, o), await l();
+      await m.updateRepositorySizes(e, c), await o();
     },
-    [e, l]
-  ), O = d(
-    async (o) => {
+    [e, o]
+  ), x = p(
+    async (c) => {
       if (!e) {
         console.error("Cannot update collapsed without repositoryKey");
         return;
       }
-      await p.updateRepositoryCollapsed(
+      await m.updateRepositoryCollapsed(
         e,
-        o
-      ), await l();
+        c
+      ), await o();
     },
-    [e, l]
-  ), r = d(async () => {
-    if (!e || !(u != null && u.workspaceId)) {
+    [e, o]
+  ), i = p(async () => {
+    if (!e || !(f != null && f.workspaceId)) {
       console.error("Cannot reset without repositoryKey and active workspace");
       return;
     }
-    await p.resetRepositoryToWorkspaceDefaults(
+    await m.resetRepositoryToWorkspaceDefaults(
       e,
-      u.workspaceId
-    ), await l();
-  }, [e, u == null ? void 0 : u.workspaceId, l]), c = d(async () => {
-    await l();
-  }, [l]);
+      f.workspaceId
+    ), await o();
+  }, [e, f == null ? void 0 : f.workspaceId, o]), g = p(async () => {
+    await o();
+  }, [o]);
   return {
     workspaces: s,
-    repositoryState: u,
-    activeWorkspace: E,
-    loading: v,
-    error: k,
-    getWorkspace: W,
-    createWorkspace: P,
-    updateWorkspace: A,
-    deleteWorkspace: z,
-    applyWorkspace: I,
+    repositoryState: f,
+    activeWorkspace: v,
+    loading: b,
+    error: y,
+    getWorkspace: k,
+    createWorkspace: T,
+    updateWorkspace: z,
+    deleteWorkspace: I,
+    applyWorkspace: E,
     updateSizes: L,
-    updateCollapsed: O,
-    resetToDefaults: r,
-    refresh: c
+    updateCollapsed: x,
+    resetToDefaults: i,
+    refresh: g
   };
 }
+function j(n = {}) {
+  const {
+    initialFocus: e = null,
+    collapsed: t = {},
+    panelType: a = "three-panel",
+    onFocusChange: s
+  } = n, [l, f] = R(
+    e
+  ), u = p(
+    (r) => {
+      f(r), s == null || s(r);
+    },
+    [s]
+  ), v = p(() => {
+    f(null), s == null || s(null);
+  }, [s]), w = p(() => {
+    const r = [];
+    return t.left || r.push("left"), r.push("middle"), a === "three-panel" && !t.right && r.push("right"), r;
+  }, [t, a]), b = p(() => {
+    const r = w();
+    if (r.length === 0) return;
+    if (l === null) {
+      u(r[0]);
+      return;
+    }
+    const o = r.indexOf(l);
+    if (o === -1) {
+      u(r[0]);
+      return;
+    }
+    const k = (o + 1) % r.length;
+    u(r[k]);
+  }, [l, w, u]), h = p(() => {
+    const r = w();
+    if (r.length === 0) return;
+    if (l === null) {
+      u(r[r.length - 1]);
+      return;
+    }
+    const o = r.indexOf(l);
+    if (o === -1) {
+      u(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]
+  );
+  return {
+    focusedPanel: l,
+    setFocus: u,
+    clearFocus: v,
+    focusNext: b,
+    focusPrevious: h,
+    isFocused: y
+  };
+}
+function q(n) {
+  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;
+  }, [s]);
+  const h = p(
+    (y) => {
+      if (!y.altKey || y.ctrlKey || y.metaKey || y.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")));
+    },
+    [l, f, u]
+  );
+  P(() => {
+    if (e)
+      return window.addEventListener("keydown", h), () => {
+        window.removeEventListener("keydown", h);
+      };
+  }, [e, h]);
+}
+const X = ({
+  isFocused: n,
+  className: e = "",
+  style: t = {}
+}) => {
+  if (!n)
+    return null;
+  const a = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: "none",
+    border: "2px solid var(--panel-focus-border-color, #0066cc)",
+    borderRadius: "4px",
+    boxShadow: "0 0 0 1px var(--panel-focus-shadow-color, rgba(0, 102, 204, 0.2))",
+    zIndex: 1e3,
+    transition: "opacity 0.15s ease-in-out",
+    ...t
+  };
+  return /* @__PURE__ */ O(
+    "div",
+    {
+      className: `panel-focus-indicator ${e}`,
+      style: a,
+      role: "presentation",
+      "aria-hidden": "true"
+    }
+  );
+};
 export {
-  q as EditableConfigurablePanelLayout,
-  F as LocalStoragePersistenceAdapter,
-  V as LocalStorageWorkspaceAdapter,
-  K as ResponsiveConfigurablePanelLayout,
-  p as WorkspaceLayoutService,
-  X as mapThemeToPanelVars,
-  M as mapThemeToTabVars,
-  x as usePanelPersistence,
-  J as useWorkspace
+  Z as EditableConfigurablePanelLayout,
+  X as FocusIndicator,
+  $ as LocalStoragePersistenceAdapter,
+  N as LocalStorageWorkspaceAdapter,
+  G as ResponsiveConfigurablePanelLayout,
+  m as WorkspaceLayoutService,
+  Q as mapThemeToPanelVars,
+  H as mapThemeToTabVars,
+  j as usePanelFocus,
+  q as usePanelKeyboardShortcuts,
+  _ as usePanelPersistence,
+  K as useWorkspace
 };
 //# sourceMappingURL=index.esm.js.map