@principal-ade/panel-layouts 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,767 @@
+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 T = (n, e, t) => D(n, typeof e != "symbol" ? e + "" : e, t);
+import { AnimatedResizableLayout as q, AnimatedVerticalLayout as K, ConfigurablePanelLayout as M, PanelConfigurator as X, SnapCarousel as Y, TabGroup as G, ThreePanelLayout as Q, mapThemeToPanelVars as Z, mapThemeToTabVars as H, useLocalStorage as U, useMediaQuery as ee } from "@a24z/panels";
+import { useState as b, useRef as C, useEffect as R, useCallback as d } from "react";
+class V {
+  constructor() {
+    T(this, "storageKey", "panel-layouts");
+  }
+  async load(e) {
+    try {
+      const t = localStorage.getItem(`${this.storageKey}:${e}`);
+      return t ? JSON.parse(t) : null;
+    } catch (t) {
+      return console.error(`Failed to load panel layout for ${e}:`, t), null;
+    }
+  }
+  async save(e, t) {
+    try {
+      localStorage.setItem(
+        `${this.storageKey}:${e}`,
+        JSON.stringify(t)
+      );
+    } catch (a) {
+      console.error(`Failed to save panel layout for ${e}:`, a);
+    }
+  }
+}
+function x(n) {
+  const {
+    viewKey: e,
+    defaultSizes: t,
+    panelType: a,
+    adapter: s = new V()
+  } = n, [f, u] = b(t), [y, I] = b(n.collapsed), S = C(n.collapsed), v = C({}), h = C(null), k = C(null);
+  R(() => {
+    (async () => {
+      const c = await s.load(e);
+      c != null && c.sizes && (u(c.sizes), m(c.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);
+    },
+    []
+  ), l = d(
+    (r) => {
+      const c = v.current[r];
+      if (c && c > 0)
+        return c;
+      if (r === "left" && "left" in t && t.left > 0)
+        return t.left;
+      if (r === "right" && "right" in t && t.right > 0)
+        return t.right;
+    },
+    [t]
+  ), W = C(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) && (I(n.collapsed), S.current = { ...n.collapsed });
+  }, [n.collapsed.left, n.collapsed.right]);
+  const P = d(
+    async (r) => {
+      try {
+        await s.save(e, { sizes: r });
+      } catch (c) {
+        console.error(
+          `Failed to save panel preferences for ${e}:`,
+          c
+        );
+      }
+    },
+    [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);
+      }
+      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 (u(c), m(c), h.current && (clearTimeout(h.current), h.current = null), !o) {
+        k.current = null;
+        return;
+      }
+      k.current = c, h.current = setTimeout(() => {
+        const i = k.current;
+        i && (P(i), k.current = null), h.current = null;
+      }, 500);
+    },
+    [
+      y,
+      l,
+      a,
+      P,
+      m
+    ]
+  );
+  R(() => () => {
+    if (h.current) {
+      const r = k.current;
+      r && (P(r), k.current = null), clearTimeout(h.current), h.current = null;
+    }
+  }, [P]);
+  const z = d(async () => {
+  }, []), L = d(async () => {
+  }, []), E = d(async () => {
+  }, []), O = d(async () => {
+  }, []);
+  return a === "three-panel" ? {
+    type: "three-panel",
+    sizes: f,
+    collapsed: y,
+    handlePanelResize: A,
+    handleLeftCollapseComplete: z,
+    handleLeftExpandComplete: L,
+    handleRightCollapseComplete: E,
+    handleRightExpandComplete: O
+  } : {
+    type: "two-panel",
+    sizes: f,
+    collapsed: y,
+    handlePanelResize: A,
+    handleLeftCollapseComplete: z,
+    handleLeftExpandComplete: L
+  };
+}
+class F {
+  constructor() {
+    T(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
+    T(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
+  }
+  /**
+   * Load all user-created workspace presets
+   */
+  async loadWorkspacePresets() {
+    try {
+      const e = localStorage.getItem(this.PRESETS_KEY);
+      return e ? JSON.parse(e) : {};
+    } catch (e) {
+      return console.error("Failed to load workspace presets:", e), {};
+    }
+  }
+  /**
+   * Save workspace presets
+   */
+  async saveWorkspacePresets(e) {
+    try {
+      localStorage.setItem(this.PRESETS_KEY, JSON.stringify(e));
+    } catch (t) {
+      throw console.error("Failed to save workspace presets:", t), t;
+    }
+  }
+  /**
+   * Load repository-specific workspace state
+   */
+  async loadRepositoryState(e) {
+    try {
+      const t = `${this.REPO_STATE_PREFIX}${e}`, a = localStorage.getItem(t);
+      return a ? JSON.parse(a) : null;
+    } catch (t) {
+      return console.error(
+        `Failed to load repository state for ${e}:`,
+        t
+      ), null;
+    }
+  }
+  /**
+   * Save repository-specific workspace state
+   */
+  async saveRepositoryState(e, t) {
+    try {
+      const a = `${this.REPO_STATE_PREFIX}${e}`;
+      localStorage.setItem(a, JSON.stringify(t));
+    } catch (a) {
+      throw console.error(
+        `Failed to save repository state for ${e}:`,
+        a
+      ), a;
+    }
+  }
+  /**
+   * Load all repository states
+   */
+  async loadAllRepositoryStates() {
+    try {
+      const e = {};
+      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)
+            try {
+              e[s] = JSON.parse(f);
+            } catch (u) {
+              console.error(
+                `Failed to parse repository state for ${s}:`,
+                u
+              );
+            }
+        }
+      }
+      return e;
+    } catch (e) {
+      return console.error("Failed to load all repository states:", e), {};
+    }
+  }
+}
+class p {
+  /**
+   * Configure a custom storage adapter (for Electron IPC or remote storage)
+   */
+  static setAdapter(e) {
+    this.adapter = e;
+  }
+  /**
+   * Get all workspace layouts (including built-in)
+   */
+  static async getWorkspaceLayouts() {
+    const e = this.getBuiltInWorkspaceLayouts();
+    return {
+      ...await this.adapter.loadWorkspacePresets(),
+      ...e
+    };
+  }
+  /**
+   * Get a specific workspace layout by ID
+   */
+  static async getWorkspaceLayout(e) {
+    return (await this.getWorkspaceLayouts())[e] || null;
+  }
+  /**
+   * Create a new workspace layout
+   */
+  static async createWorkspaceLayout(e) {
+    const t = await this.adapter.loadWorkspacePresets(), a = this.generateWorkspaceId(e.name), s = {
+      id: a,
+      name: e.name,
+      description: e.description,
+      layout: e.layout,
+      defaultSizes: e.defaultSizes,
+      defaultCollapsed: e.defaultCollapsed,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      isBuiltIn: !1
+    }, f = {
+      ...t,
+      [a]: s
+    };
+    return await this.adapter.saveWorkspacePresets(f), s;
+  }
+  /**
+   * Update an existing workspace layout
+   */
+  static async updateWorkspaceLayout(e, t) {
+    const a = await this.adapter.loadWorkspacePresets(), s = a[e];
+    if (!s)
+      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 = {
+      ...s,
+      ...t,
+      id: e,
+      // Preserve ID
+      createdAt: s.createdAt,
+      // Preserve creation time
+      updatedAt: Date.now()
+    }, u = {
+      ...a,
+      [e]: f
+    };
+    return await this.adapter.saveWorkspacePresets(u), f;
+  }
+  /**
+   * Delete a workspace layout
+   */
+  static async deleteWorkspaceLayout(e) {
+    const t = await this.adapter.loadWorkspacePresets(), a = t[e];
+    if (!a)
+      return console.error(`Workspace layout ${e} not found`), !1;
+    if (a.isBuiltIn)
+      return console.error(`Cannot delete built-in workspace layout ${e}`), !1;
+    const s = { ...t };
+    return delete s[e], await this.adapter.saveWorkspacePresets(s), !0;
+  }
+  /**
+   * Get repository state (which workspace + current sizes/collapsed)
+   */
+  static async getRepositoryState(e) {
+    return await this.adapter.loadRepositoryState(e);
+  }
+  /**
+   * Set repository state (which workspace + current sizes/collapsed/layout)
+   */
+  static async setRepositoryState(e, t) {
+    await this.adapter.saveRepositoryState(e, t);
+  }
+  /**
+   * Update only sizes in repository state
+   */
+  static async updateRepositorySizes(e, t) {
+    const a = await this.getRepositoryState(e);
+    a && await this.setRepositoryState(e, {
+      ...a,
+      sizes: t
+    });
+  }
+  /**
+   * Update only collapsed state in repository state
+   */
+  static async updateRepositoryCollapsed(e, t) {
+    const a = await this.getRepositoryState(e);
+    a && await this.setRepositoryState(e, {
+      ...a,
+      collapsed: t
+    });
+  }
+  /**
+   * Check if repository state differs from workspace defaults
+   */
+  static hasStateDeviation(e, t) {
+    const a = t.defaultSizes ? JSON.stringify(e.sizes) !== JSON.stringify(t.defaultSizes) : !1, s = t.defaultCollapsed ? JSON.stringify(e.collapsed) !== JSON.stringify(t.defaultCollapsed) : !1;
+    return { hasSizeDeviation: a, hasCollapsedDeviation: s };
+  }
+  /**
+   * Update workspace defaults from repository state
+   */
+  static async updateWorkspaceFromRepositoryState(e, t) {
+    const a = await this.getWorkspaceLayout(e), s = await this.getRepositoryState(t);
+    if (!a || !s || a.isBuiltIn) {
+      console.error(
+        "Cannot update built-in workspace or workspace/state not found"
+      );
+      return;
+    }
+    await this.updateWorkspaceLayout(e, {
+      defaultSizes: s.sizes,
+      defaultCollapsed: s.collapsed
+    });
+  }
+  /**
+   * Reset repository state to workspace defaults
+   */
+  static async resetRepositoryToWorkspaceDefaults(e, t) {
+    const a = await this.getWorkspaceLayout(t);
+    if (!a) {
+      console.error(`Workspace ${t} not found`);
+      return;
+    }
+    const s = await this.getRepositoryState(e);
+    s && await this.setRepositoryState(e, {
+      ...s,
+      sizes: a.defaultSizes || { left: 20, middle: 45, right: 35 },
+      collapsed: a.defaultCollapsed || { left: !1, right: !1 }
+    });
+  }
+  /**
+   * Check if a layout matches a workspace layout
+   */
+  static isLayoutMatchingWorkspace(e, t) {
+    return this.areLayoutsEqual(e, t.layout);
+  }
+  /**
+   * Find workspace ID that matches the given layout
+   */
+  static async findMatchingWorkspace(e) {
+    const t = await this.getWorkspaceLayouts();
+    for (const [a, s] of Object.entries(t))
+      if (this.isLayoutMatchingWorkspace(e, s))
+        return a;
+    return null;
+  }
+  /**
+   * Deep comparison of two panel layouts
+   */
+  static areLayoutsEqual(e, t) {
+    return JSON.stringify(e) === JSON.stringify(t);
+  }
+  /**
+   * Generate a unique ID from a workspace name
+   */
+  static generateWorkspaceId(e) {
+    return `${e.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${Date.now()}`;
+  }
+  /**
+   * Get built-in workspace layouts
+   */
+  static getBuiltInWorkspaceLayouts() {
+    const e = Date.now();
+    return {
+      "project-management": {
+        id: "project-management",
+        name: "Project Management",
+        description: "Tasks, dependencies, issues, file tree, docs, drawings, multi terminal, city visualization, code viewer, markdown slides, and excalidraw",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: [
+              "tasks",
+              "dependencies",
+              "gitIssues",
+              "fileTree",
+              "docs",
+              "drawings"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "multiTerminal",
+          right: {
+            type: "tabs",
+            panels: [
+              "cityVisualization",
+              "codeViewer",
+              "markdownViewer",
+              "excalidrawDiagram"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 45, right: 35 },
+        defaultCollapsed: { left: !1, right: !1 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      "code-review": {
+        id: "code-review",
+        name: "Code Review",
+        description: "Git changes, pull requests, and file tree on left, git diff and code viewer in middle, city map on right",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["gitChanges", "gitPullRequests", "fileTree"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: {
+            type: "tabs",
+            panels: ["gitDiff", "codeViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          right: "cityVisualization"
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: !1, right: !1 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      documentation: {
+        id: "documentation",
+        name: "Documentation",
+        description: "Docs, markdown viewer, and code viewer",
+        layout: {
+          left: "docs",
+          middle: "markdownViewer",
+          right: "codeViewer"
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: !1, right: !0 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      "agent-work": {
+        id: "agent-work",
+        name: "Agent Work",
+        description: "Tasks, agent sessions, file tree, agent context, git changes, docs, multi terminal, city map, agent events, code viewer, and markdown slides",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: [
+              "tasks",
+              "agentSessions",
+              "fileTree",
+              "agentContext",
+              "gitChanges",
+              "docs"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "multiTerminal",
+          right: {
+            type: "tabs",
+            panels: [
+              "cityVisualization",
+              "agentEvents",
+              "codeViewer",
+              "markdownViewer"
+            ],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 45, right: 35 },
+        defaultCollapsed: { left: !1, right: !1 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      "quality-check": {
+        id: "quality-check",
+        name: "Quality Check",
+        description: "Package information, tools, and dependencies on left; city visualization map in middle; multi terminal and code viewer on right (collapsed)",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["packageInfo", "tools", "dependencies"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "cityVisualization",
+          right: {
+            type: "tabs",
+            panels: ["multiTerminal", "codeViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 45, right: 35 },
+        defaultCollapsed: { left: !1, right: !0 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      drawing: {
+        id: "drawing",
+        name: "Drawing",
+        description: "Drawings and docs, excalidraw diagram, multi terminal and markdown viewer",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["drawings", "docs"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: "excalidrawDiagram",
+          right: {
+            type: "tabs",
+            panels: ["multiTerminal", "markdownViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: !1, right: !0 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      "old-school": {
+        id: "old-school",
+        name: "Old School",
+        description: "File tree, search, git changes, and docs on left; code viewer and markdown viewer in middle; multi terminal and city map on right (collapsed)",
+        layout: {
+          left: {
+            type: "tabs",
+            panels: ["fileTree", "search", "gitChanges", "docs"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          middle: {
+            type: "tabs",
+            panels: ["codeViewer", "markdownViewer"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          },
+          right: {
+            type: "tabs",
+            panels: ["multiTerminal", "cityVisualization"],
+            config: { defaultActiveTab: 0, tabPosition: "top" }
+          }
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: !1, right: !0 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      },
+      "principal-office": {
+        id: "principal-office",
+        name: "Principal Office",
+        description: "Alexandria docs on left, MDX editor in middle, multi terminal on right",
+        layout: {
+          left: "docs",
+          middle: "mdxEditor",
+          right: "multiTerminal"
+        },
+        defaultSizes: { left: 20, middle: 50, right: 30 },
+        defaultCollapsed: { left: !1, right: !1 },
+        createdAt: e,
+        updatedAt: e,
+        isBuiltIn: !0
+      }
+    };
+  }
+  /**
+   * Initialize workspace layouts with built-in defaults if none exist
+   */
+  static async initializeWorkspaceLayouts() {
+    const e = await this.adapter.loadWorkspacePresets();
+    Object.keys(e).length;
+  }
+}
+T(p, "adapter", new F());
+function J(n = {}) {
+  const { repositoryKey: e, autoInitialize: t = !1, defaultWorkspaceId: a } = n, [s, f] = b(
+    {}
+  ), [u, y] = b(null), [I, S] = b(null), [v, h] = b(!0), [k, m] = b(null), l = d(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 || {
+              left: 20,
+              middle: 45,
+              right: 35
+            },
+            collapsed: w.defaultCollapsed || {
+              left: !1,
+              right: !1
+            }
+          }, await p.setRepositoryState(
+            e,
+            i
+          ));
+        }
+        if (y(i), i != null && i.workspaceId) {
+          const g = await p.getWorkspaceLayout(
+            i.workspaceId
+          );
+          S(g);
+        } else
+          S(null);
+      }
+    } catch (o) {
+      m(o), console.error("Failed to load workspace data:", o);
+    } finally {
+      h(!1);
+    }
+  }, [e, t, a]);
+  R(() => {
+    l();
+  }, [l]);
+  const W = d(
+    async (o) => await p.getWorkspaceLayout(o),
+    []
+  ), P = d(
+    async (o) => {
+      const i = await p.createWorkspaceLayout(o);
+      return await l(), i;
+    },
+    [l]
+  ), A = d(
+    async (o, i) => {
+      const g = await p.updateWorkspaceLayout(o, i);
+      return await l(), g;
+    },
+    [l]
+  ), z = d(
+    async (o) => {
+      const i = await p.deleteWorkspaceLayout(o);
+      return i && await l(), i;
+    },
+    [l]
+  ), L = d(
+    async (o) => {
+      if (!e) {
+        console.error("Cannot apply workspace without repositoryKey");
+        return;
+      }
+      const i = await p.getWorkspaceLayout(o);
+      if (!i) {
+        console.error(`Workspace ${o} not found`);
+        return;
+      }
+      const g = {
+        workspaceId: o,
+        sizes: i.defaultSizes || { left: 20, middle: 45, right: 35 },
+        collapsed: i.defaultCollapsed || {
+          left: !1,
+          right: !1
+        }
+      };
+      await p.setRepositoryState(e, g), await l();
+    },
+    [e, l]
+  ), E = d(
+    async (o) => {
+      if (!e) {
+        console.error("Cannot update sizes without repositoryKey");
+        return;
+      }
+      await p.updateRepositorySizes(e, o), await l();
+    },
+    [e, l]
+  ), O = d(
+    async (o) => {
+      if (!e) {
+        console.error("Cannot update collapsed without repositoryKey");
+        return;
+      }
+      await p.updateRepositoryCollapsed(
+        e,
+        o
+      ), await l();
+    },
+    [e, l]
+  ), r = d(async () => {
+    if (!e || !(u != null && u.workspaceId)) {
+      console.error("Cannot reset without repositoryKey and active workspace");
+      return;
+    }
+    await p.resetRepositoryToWorkspaceDefaults(
+      e,
+      u.workspaceId
+    ), await l();
+  }, [e, u == null ? void 0 : u.workspaceId, l]), c = d(async () => {
+    await l();
+  }, [l]);
+  return {
+    workspaces: s,
+    repositoryState: u,
+    activeWorkspace: I,
+    loading: v,
+    error: k,
+    getWorkspace: W,
+    createWorkspace: P,
+    updateWorkspace: A,
+    deleteWorkspace: z,
+    applyWorkspace: L,
+    updateSizes: E,
+    updateCollapsed: O,
+    resetToDefaults: r,
+    refresh: c
+  };
+}
+export {
+  q as AnimatedResizableLayout,
+  K as AnimatedVerticalLayout,
+  M as ConfigurablePanelLayout,
+  V as LocalStoragePersistenceAdapter,
+  F as LocalStorageWorkspaceAdapter,
+  X as PanelConfigurator,
+  Y as SnapCarousel,
+  G as TabGroup,
+  Q as ThreePanelLayout,
+  p as WorkspaceLayoutService,
+  Z as mapThemeToPanelVars,
+  H as mapThemeToTabVars,
+  U as useLocalStorage,
+  ee as useMediaQuery,
+  x as usePanelPersistence,
+  J as useWorkspace
+};
+//# sourceMappingURL=index.esm.js.map