@principal-ade/panel-layouts 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.css +1 -0
  2. package/dist/index.esm.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/styles.css +1 -0
  5. package/package.json +10 -1
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ .animated-resizable-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{overflow:auto;height:100%;background-color:var(--panel-background)}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important}.resize-handle.collapsed{width:0!important}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media (min-width: 0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:1px solid var(--tab-border, #ddd)}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:1px solid var(--tab-border, #ddd);width:auto;min-width:120px}.tab-position-right .tab-list{border-right:none;border-left:1px solid var(--tab-border, #ddd)}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:500;color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;line-height:1;box-sizing:border-box}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9);border-color:var(--tab-border-hover, #999)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.animating{pointer-events:none}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.three-panel-item.middle-panel{flex:1;min-width:200px}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:transparent}.resize-handle:after{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33vw);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 768px){.snap-carousel-container{padding:0 8px}}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- var $ = Object.defineProperty;
1
+ import './index.css';var $ = Object.defineProperty;
2
2
  var D = (n, e, t) => e in n ? $(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
3
3
  var T = (n, e, t) => D(n, typeof e != "symbol" ? e + "" : e, t);
4
4
  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";
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var V=Object.defineProperty;var $=(c,e,t)=>e in c?V(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var T=(c,e,t)=>$(c,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@a24z/panels"),s=require("react");class I{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 D(c){const{viewKey:e,defaultSizes:t,panelType:a,adapter:r=new I}=c,[f,d]=s.useState(t),[y,z]=s.useState(c.collapsed),S=s.useRef(c.collapsed),C=s.useRef({}),h=s.useRef(null),w=s.useRef(null);s.useEffect(()=>{(async()=>{const u=await r.load(e);u!=null&&u.sizes&&(d(u.sizes),b(u.sizes))})()},[e]);const b=s.useCallback(o=>{"left"in o&&o.left>0&&(C.current.left=o.left),"middle"in o&&o.middle>0&&(C.current.middle=o.middle),"right"in o&&o.right>0&&(C.current.right=o.right)},[]),n=s.useCallback(o=>{const u=C.current[o];if(u&&u>0)return u;if(o==="left"&&"left"in t&&t.left>0)return t.left;if(o==="right"&&"right"in t&&t.right>0)return t.right},[t]),P=s.useRef(t);s.useEffect(()=>{("left"in t&&t.left!==P.current.left||"middle"in t&&"middle"in P.current&&t.middle!==P.current.middle||"right"in t&&t.right!==P.current.right)&&(d(t),b(t),P.current=t)},[t,b]),s.useEffect(()=>{const o=c.collapsed.left!==S.current.left,u="right"in c.collapsed&&"right"in S.current&&c.collapsed.right!==S.current.right;(o||u)&&(z(c.collapsed),S.current={...c.collapsed})},[c.collapsed.left,c.collapsed.right]);const W=s.useCallback(async o=>{try{await r.save(e,{sizes:o})}catch(u){console.error(`Failed to save panel preferences for ${e}:`,u)}},[e,r]),v=s.useCallback(o=>{const u={...o};let i=!0;if("left"in o){const l=!!(y!=null&&y.left),g=o.left;if(l){const k=n("left");k!==void 0&&k>0?u.left=k:i=!1}else g===0&&(i=!1)}if(a==="three-panel"&&"right"in o){const l=!!(y!=null&&y.right),g=o.right;if(l){const k=n("right");k!==void 0&&k>0?u.right=k:i=!1}else g===0&&(i=!1)}if(d(u),b(u),h.current&&(clearTimeout(h.current),h.current=null),!i){w.current=null;return}w.current=u,h.current=setTimeout(()=>{const l=w.current;l&&(W(l),w.current=null),h.current=null},500)},[y,n,a,W,b]);s.useEffect(()=>()=>{if(h.current){const o=w.current;o&&(W(o),w.current=null),clearTimeout(h.current),h.current=null}},[W]);const R=s.useCallback(async()=>{},[]),A=s.useCallback(async()=>{},[]),L=s.useCallback(async()=>{},[]),E=s.useCallback(async()=>{},[]);return a==="three-panel"?{type:"three-panel",sizes:f,collapsed:y,handlePanelResize:v,handleLeftCollapseComplete:R,handleLeftExpandComplete:A,handleRightCollapseComplete:L,handleRightExpandComplete:E}:{type:"two-panel",sizes:f,collapsed:y,handlePanelResize:v,handleLeftCollapseComplete:R,handleLeftExpandComplete:A}}class O{constructor(){T(this,"PRESETS_KEY","panel-layouts:workspace-presets");T(this,"REPO_STATE_PREFIX","panel-layouts:repo-state:")}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),{}}}async saveWorkspacePresets(e){try{localStorage.setItem(this.PRESETS_KEY,JSON.stringify(e))}catch(t){throw console.error("Failed to save workspace presets:",t),t}}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}}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}}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 r=a.substring(this.REPO_STATE_PREFIX.length),f=localStorage.getItem(a);if(f)try{e[r]=JSON.parse(f)}catch(d){console.error(`Failed to parse repository state for ${r}:`,d)}}}return e}catch(e){return console.error("Failed to load all repository states:",e),{}}}}class p{static setAdapter(e){this.adapter=e}static async getWorkspaceLayouts(){const e=this.getBuiltInWorkspaceLayouts();return{...await this.adapter.loadWorkspacePresets(),...e}}static async getWorkspaceLayout(e){return(await this.getWorkspaceLayouts())[e]||null}static async createWorkspaceLayout(e){const t=await this.adapter.loadWorkspacePresets(),a=this.generateWorkspaceId(e.name),r={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]:r};return await this.adapter.saveWorkspacePresets(f),r}static async updateWorkspaceLayout(e,t){const a=await this.adapter.loadWorkspacePresets(),r=a[e];if(!r)return console.error(`Workspace layout ${e} not found`),null;if(r.isBuiltIn)return console.error(`Cannot update built-in workspace layout ${e}`),null;const f={...r,...t,id:e,createdAt:r.createdAt,updatedAt:Date.now()},d={...a,[e]:f};return await this.adapter.saveWorkspacePresets(d),f}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 r={...t};return delete r[e],await this.adapter.saveWorkspacePresets(r),!0}static async getRepositoryState(e){return await this.adapter.loadRepositoryState(e)}static async setRepositoryState(e,t){await this.adapter.saveRepositoryState(e,t)}static async updateRepositorySizes(e,t){const a=await this.getRepositoryState(e);a&&await this.setRepositoryState(e,{...a,sizes:t})}static async updateRepositoryCollapsed(e,t){const a=await this.getRepositoryState(e);a&&await this.setRepositoryState(e,{...a,collapsed:t})}static hasStateDeviation(e,t){const a=t.defaultSizes?JSON.stringify(e.sizes)!==JSON.stringify(t.defaultSizes):!1,r=t.defaultCollapsed?JSON.stringify(e.collapsed)!==JSON.stringify(t.defaultCollapsed):!1;return{hasSizeDeviation:a,hasCollapsedDeviation:r}}static async updateWorkspaceFromRepositoryState(e,t){const a=await this.getWorkspaceLayout(e),r=await this.getRepositoryState(t);if(!a||!r||a.isBuiltIn){console.error("Cannot update built-in workspace or workspace/state not found");return}await this.updateWorkspaceLayout(e,{defaultSizes:r.sizes,defaultCollapsed:r.collapsed})}static async resetRepositoryToWorkspaceDefaults(e,t){const a=await this.getWorkspaceLayout(t);if(!a){console.error(`Workspace ${t} not found`);return}const r=await this.getRepositoryState(e);r&&await this.setRepositoryState(e,{...r,sizes:a.defaultSizes||{left:20,middle:45,right:35},collapsed:a.defaultCollapsed||{left:!1,right:!1}})}static isLayoutMatchingWorkspace(e,t){return this.areLayoutsEqual(e,t.layout)}static async findMatchingWorkspace(e){const t=await this.getWorkspaceLayouts();for(const[a,r]of Object.entries(t))if(this.isLayoutMatchingWorkspace(e,r))return a;return null}static areLayoutsEqual(e,t){return JSON.stringify(e)===JSON.stringify(t)}static generateWorkspaceId(e){return`${e.toLowerCase().replace(/[^a-z0-9]+/g,"-")}-${Date.now()}`}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}}}static async initializeWorkspaceLayouts(){const e=await this.adapter.loadWorkspacePresets();Object.keys(e).length}}T(p,"adapter",new O);function j(c={}){const{repositoryKey:e,autoInitialize:t=!1,defaultWorkspaceId:a}=c,[r,f]=s.useState({}),[d,y]=s.useState(null),[z,S]=s.useState(null),[C,h]=s.useState(!0),[w,b]=s.useState(null),n=s.useCallback(async()=>{try{h(!0),b(null);const i=await p.getWorkspaceLayouts();if(f(i),e){let l=await p.getRepositoryState(e);if(!l&&t){const g=a||"project-management",k=await p.getWorkspaceLayout(g);k&&(l={workspaceId:g,sizes:k.defaultSizes||{left:20,middle:45,right:35},collapsed:k.defaultCollapsed||{left:!1,right:!1}},await p.setRepositoryState(e,l))}if(y(l),l!=null&&l.workspaceId){const g=await p.getWorkspaceLayout(l.workspaceId);S(g)}else S(null)}}catch(i){b(i),console.error("Failed to load workspace data:",i)}finally{h(!1)}},[e,t,a]);s.useEffect(()=>{n()},[n]);const P=s.useCallback(async i=>await p.getWorkspaceLayout(i),[]),W=s.useCallback(async i=>{const l=await p.createWorkspaceLayout(i);return await n(),l},[n]),v=s.useCallback(async(i,l)=>{const g=await p.updateWorkspaceLayout(i,l);return await n(),g},[n]),R=s.useCallback(async i=>{const l=await p.deleteWorkspaceLayout(i);return l&&await n(),l},[n]),A=s.useCallback(async i=>{if(!e){console.error("Cannot apply workspace without repositoryKey");return}const l=await p.getWorkspaceLayout(i);if(!l){console.error(`Workspace ${i} not found`);return}const g={workspaceId:i,sizes:l.defaultSizes||{left:20,middle:45,right:35},collapsed:l.defaultCollapsed||{left:!1,right:!1}};await p.setRepositoryState(e,g),await n()},[e,n]),L=s.useCallback(async i=>{if(!e){console.error("Cannot update sizes without repositoryKey");return}await p.updateRepositorySizes(e,i),await n()},[e,n]),E=s.useCallback(async i=>{if(!e){console.error("Cannot update collapsed without repositoryKey");return}await p.updateRepositoryCollapsed(e,i),await n()},[e,n]),o=s.useCallback(async()=>{if(!e||!(d!=null&&d.workspaceId)){console.error("Cannot reset without repositoryKey and active workspace");return}await p.resetRepositoryToWorkspaceDefaults(e,d.workspaceId),await n()},[e,d==null?void 0:d.workspaceId,n]),u=s.useCallback(async()=>{await n()},[n]);return{workspaces:r,repositoryState:d,activeWorkspace:z,loading:C,error:w,getWorkspace:P,createWorkspace:W,updateWorkspace:v,deleteWorkspace:R,applyWorkspace:A,updateSizes:L,updateCollapsed:E,resetToDefaults:o,refresh:u}}Object.defineProperty(exports,"AnimatedResizableLayout",{enumerable:!0,get:()=>m.AnimatedResizableLayout});Object.defineProperty(exports,"AnimatedVerticalLayout",{enumerable:!0,get:()=>m.AnimatedVerticalLayout});Object.defineProperty(exports,"ConfigurablePanelLayout",{enumerable:!0,get:()=>m.ConfigurablePanelLayout});Object.defineProperty(exports,"PanelConfigurator",{enumerable:!0,get:()=>m.PanelConfigurator});Object.defineProperty(exports,"SnapCarousel",{enumerable:!0,get:()=>m.SnapCarousel});Object.defineProperty(exports,"TabGroup",{enumerable:!0,get:()=>m.TabGroup});Object.defineProperty(exports,"ThreePanelLayout",{enumerable:!0,get:()=>m.ThreePanelLayout});Object.defineProperty(exports,"mapThemeToPanelVars",{enumerable:!0,get:()=>m.mapThemeToPanelVars});Object.defineProperty(exports,"mapThemeToTabVars",{enumerable:!0,get:()=>m.mapThemeToTabVars});Object.defineProperty(exports,"useLocalStorage",{enumerable:!0,get:()=>m.useLocalStorage});Object.defineProperty(exports,"useMediaQuery",{enumerable:!0,get:()=>m.useMediaQuery});exports.LocalStoragePersistenceAdapter=I;exports.LocalStorageWorkspaceAdapter=O;exports.WorkspaceLayoutService=p;exports.usePanelPersistence=D;exports.useWorkspace=j;
1
+ "use strict";require('./index.css');var V=Object.defineProperty;var $=(c,e,t)=>e in c?V(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var T=(c,e,t)=>$(c,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@a24z/panels"),s=require("react");class I{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 D(c){const{viewKey:e,defaultSizes:t,panelType:a,adapter:r=new I}=c,[f,d]=s.useState(t),[y,z]=s.useState(c.collapsed),S=s.useRef(c.collapsed),C=s.useRef({}),h=s.useRef(null),w=s.useRef(null);s.useEffect(()=>{(async()=>{const u=await r.load(e);u!=null&&u.sizes&&(d(u.sizes),b(u.sizes))})()},[e]);const b=s.useCallback(o=>{"left"in o&&o.left>0&&(C.current.left=o.left),"middle"in o&&o.middle>0&&(C.current.middle=o.middle),"right"in o&&o.right>0&&(C.current.right=o.right)},[]),n=s.useCallback(o=>{const u=C.current[o];if(u&&u>0)return u;if(o==="left"&&"left"in t&&t.left>0)return t.left;if(o==="right"&&"right"in t&&t.right>0)return t.right},[t]),P=s.useRef(t);s.useEffect(()=>{("left"in t&&t.left!==P.current.left||"middle"in t&&"middle"in P.current&&t.middle!==P.current.middle||"right"in t&&t.right!==P.current.right)&&(d(t),b(t),P.current=t)},[t,b]),s.useEffect(()=>{const o=c.collapsed.left!==S.current.left,u="right"in c.collapsed&&"right"in S.current&&c.collapsed.right!==S.current.right;(o||u)&&(z(c.collapsed),S.current={...c.collapsed})},[c.collapsed.left,c.collapsed.right]);const W=s.useCallback(async o=>{try{await r.save(e,{sizes:o})}catch(u){console.error(`Failed to save panel preferences for ${e}:`,u)}},[e,r]),v=s.useCallback(o=>{const u={...o};let i=!0;if("left"in o){const l=!!(y!=null&&y.left),g=o.left;if(l){const k=n("left");k!==void 0&&k>0?u.left=k:i=!1}else g===0&&(i=!1)}if(a==="three-panel"&&"right"in o){const l=!!(y!=null&&y.right),g=o.right;if(l){const k=n("right");k!==void 0&&k>0?u.right=k:i=!1}else g===0&&(i=!1)}if(d(u),b(u),h.current&&(clearTimeout(h.current),h.current=null),!i){w.current=null;return}w.current=u,h.current=setTimeout(()=>{const l=w.current;l&&(W(l),w.current=null),h.current=null},500)},[y,n,a,W,b]);s.useEffect(()=>()=>{if(h.current){const o=w.current;o&&(W(o),w.current=null),clearTimeout(h.current),h.current=null}},[W]);const R=s.useCallback(async()=>{},[]),A=s.useCallback(async()=>{},[]),L=s.useCallback(async()=>{},[]),E=s.useCallback(async()=>{},[]);return a==="three-panel"?{type:"three-panel",sizes:f,collapsed:y,handlePanelResize:v,handleLeftCollapseComplete:R,handleLeftExpandComplete:A,handleRightCollapseComplete:L,handleRightExpandComplete:E}:{type:"two-panel",sizes:f,collapsed:y,handlePanelResize:v,handleLeftCollapseComplete:R,handleLeftExpandComplete:A}}class O{constructor(){T(this,"PRESETS_KEY","panel-layouts:workspace-presets");T(this,"REPO_STATE_PREFIX","panel-layouts:repo-state:")}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),{}}}async saveWorkspacePresets(e){try{localStorage.setItem(this.PRESETS_KEY,JSON.stringify(e))}catch(t){throw console.error("Failed to save workspace presets:",t),t}}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}}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}}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 r=a.substring(this.REPO_STATE_PREFIX.length),f=localStorage.getItem(a);if(f)try{e[r]=JSON.parse(f)}catch(d){console.error(`Failed to parse repository state for ${r}:`,d)}}}return e}catch(e){return console.error("Failed to load all repository states:",e),{}}}}class p{static setAdapter(e){this.adapter=e}static async getWorkspaceLayouts(){const e=this.getBuiltInWorkspaceLayouts();return{...await this.adapter.loadWorkspacePresets(),...e}}static async getWorkspaceLayout(e){return(await this.getWorkspaceLayouts())[e]||null}static async createWorkspaceLayout(e){const t=await this.adapter.loadWorkspacePresets(),a=this.generateWorkspaceId(e.name),r={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]:r};return await this.adapter.saveWorkspacePresets(f),r}static async updateWorkspaceLayout(e,t){const a=await this.adapter.loadWorkspacePresets(),r=a[e];if(!r)return console.error(`Workspace layout ${e} not found`),null;if(r.isBuiltIn)return console.error(`Cannot update built-in workspace layout ${e}`),null;const f={...r,...t,id:e,createdAt:r.createdAt,updatedAt:Date.now()},d={...a,[e]:f};return await this.adapter.saveWorkspacePresets(d),f}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 r={...t};return delete r[e],await this.adapter.saveWorkspacePresets(r),!0}static async getRepositoryState(e){return await this.adapter.loadRepositoryState(e)}static async setRepositoryState(e,t){await this.adapter.saveRepositoryState(e,t)}static async updateRepositorySizes(e,t){const a=await this.getRepositoryState(e);a&&await this.setRepositoryState(e,{...a,sizes:t})}static async updateRepositoryCollapsed(e,t){const a=await this.getRepositoryState(e);a&&await this.setRepositoryState(e,{...a,collapsed:t})}static hasStateDeviation(e,t){const a=t.defaultSizes?JSON.stringify(e.sizes)!==JSON.stringify(t.defaultSizes):!1,r=t.defaultCollapsed?JSON.stringify(e.collapsed)!==JSON.stringify(t.defaultCollapsed):!1;return{hasSizeDeviation:a,hasCollapsedDeviation:r}}static async updateWorkspaceFromRepositoryState(e,t){const a=await this.getWorkspaceLayout(e),r=await this.getRepositoryState(t);if(!a||!r||a.isBuiltIn){console.error("Cannot update built-in workspace or workspace/state not found");return}await this.updateWorkspaceLayout(e,{defaultSizes:r.sizes,defaultCollapsed:r.collapsed})}static async resetRepositoryToWorkspaceDefaults(e,t){const a=await this.getWorkspaceLayout(t);if(!a){console.error(`Workspace ${t} not found`);return}const r=await this.getRepositoryState(e);r&&await this.setRepositoryState(e,{...r,sizes:a.defaultSizes||{left:20,middle:45,right:35},collapsed:a.defaultCollapsed||{left:!1,right:!1}})}static isLayoutMatchingWorkspace(e,t){return this.areLayoutsEqual(e,t.layout)}static async findMatchingWorkspace(e){const t=await this.getWorkspaceLayouts();for(const[a,r]of Object.entries(t))if(this.isLayoutMatchingWorkspace(e,r))return a;return null}static areLayoutsEqual(e,t){return JSON.stringify(e)===JSON.stringify(t)}static generateWorkspaceId(e){return`${e.toLowerCase().replace(/[^a-z0-9]+/g,"-")}-${Date.now()}`}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}}}static async initializeWorkspaceLayouts(){const e=await this.adapter.loadWorkspacePresets();Object.keys(e).length}}T(p,"adapter",new O);function j(c={}){const{repositoryKey:e,autoInitialize:t=!1,defaultWorkspaceId:a}=c,[r,f]=s.useState({}),[d,y]=s.useState(null),[z,S]=s.useState(null),[C,h]=s.useState(!0),[w,b]=s.useState(null),n=s.useCallback(async()=>{try{h(!0),b(null);const i=await p.getWorkspaceLayouts();if(f(i),e){let l=await p.getRepositoryState(e);if(!l&&t){const g=a||"project-management",k=await p.getWorkspaceLayout(g);k&&(l={workspaceId:g,sizes:k.defaultSizes||{left:20,middle:45,right:35},collapsed:k.defaultCollapsed||{left:!1,right:!1}},await p.setRepositoryState(e,l))}if(y(l),l!=null&&l.workspaceId){const g=await p.getWorkspaceLayout(l.workspaceId);S(g)}else S(null)}}catch(i){b(i),console.error("Failed to load workspace data:",i)}finally{h(!1)}},[e,t,a]);s.useEffect(()=>{n()},[n]);const P=s.useCallback(async i=>await p.getWorkspaceLayout(i),[]),W=s.useCallback(async i=>{const l=await p.createWorkspaceLayout(i);return await n(),l},[n]),v=s.useCallback(async(i,l)=>{const g=await p.updateWorkspaceLayout(i,l);return await n(),g},[n]),R=s.useCallback(async i=>{const l=await p.deleteWorkspaceLayout(i);return l&&await n(),l},[n]),A=s.useCallback(async i=>{if(!e){console.error("Cannot apply workspace without repositoryKey");return}const l=await p.getWorkspaceLayout(i);if(!l){console.error(`Workspace ${i} not found`);return}const g={workspaceId:i,sizes:l.defaultSizes||{left:20,middle:45,right:35},collapsed:l.defaultCollapsed||{left:!1,right:!1}};await p.setRepositoryState(e,g),await n()},[e,n]),L=s.useCallback(async i=>{if(!e){console.error("Cannot update sizes without repositoryKey");return}await p.updateRepositorySizes(e,i),await n()},[e,n]),E=s.useCallback(async i=>{if(!e){console.error("Cannot update collapsed without repositoryKey");return}await p.updateRepositoryCollapsed(e,i),await n()},[e,n]),o=s.useCallback(async()=>{if(!e||!(d!=null&&d.workspaceId)){console.error("Cannot reset without repositoryKey and active workspace");return}await p.resetRepositoryToWorkspaceDefaults(e,d.workspaceId),await n()},[e,d==null?void 0:d.workspaceId,n]),u=s.useCallback(async()=>{await n()},[n]);return{workspaces:r,repositoryState:d,activeWorkspace:z,loading:C,error:w,getWorkspace:P,createWorkspace:W,updateWorkspace:v,deleteWorkspace:R,applyWorkspace:A,updateSizes:L,updateCollapsed:E,resetToDefaults:o,refresh:u}}Object.defineProperty(exports,"AnimatedResizableLayout",{enumerable:!0,get:()=>m.AnimatedResizableLayout});Object.defineProperty(exports,"AnimatedVerticalLayout",{enumerable:!0,get:()=>m.AnimatedVerticalLayout});Object.defineProperty(exports,"ConfigurablePanelLayout",{enumerable:!0,get:()=>m.ConfigurablePanelLayout});Object.defineProperty(exports,"PanelConfigurator",{enumerable:!0,get:()=>m.PanelConfigurator});Object.defineProperty(exports,"SnapCarousel",{enumerable:!0,get:()=>m.SnapCarousel});Object.defineProperty(exports,"TabGroup",{enumerable:!0,get:()=>m.TabGroup});Object.defineProperty(exports,"ThreePanelLayout",{enumerable:!0,get:()=>m.ThreePanelLayout});Object.defineProperty(exports,"mapThemeToPanelVars",{enumerable:!0,get:()=>m.mapThemeToPanelVars});Object.defineProperty(exports,"mapThemeToTabVars",{enumerable:!0,get:()=>m.mapThemeToTabVars});Object.defineProperty(exports,"useLocalStorage",{enumerable:!0,get:()=>m.useLocalStorage});Object.defineProperty(exports,"useMediaQuery",{enumerable:!0,get:()=>m.useMediaQuery});exports.LocalStoragePersistenceAdapter=I;exports.LocalStorageWorkspaceAdapter=O;exports.WorkspaceLayoutService=p;exports.usePanelPersistence=D;exports.useWorkspace=j;
2
2
  //# sourceMappingURL=index.js.map
package/dist/styles.css ADDED
@@ -0,0 +1 @@
1
+ .animated-resizable-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{overflow:auto;height:100%;background-color:var(--panel-background)}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important}.resize-handle.collapsed{width:0!important}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media (min-width: 0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:1px solid var(--tab-border, #ddd)}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:1px solid var(--tab-border, #ddd);width:auto;min-width:120px}.tab-position-right .tab-list{border-right:none;border-left:1px solid var(--tab-border, #ddd)}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:500;color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;line-height:1;box-sizing:border-box}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9);border-color:var(--tab-border-hover, #999)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.animating{pointer-events:none}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.three-panel-item.middle-panel{flex:1;min-width:200px}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;inset:0 -10px;background:transparent}.resize-handle:after{content:"";position:absolute;inset:0 -10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33vw);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 768px){.snap-carousel-container{padding:0 8px}}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ade/panel-layouts",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Pre-built panel layout components and workspace management for the Panel Framework",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -11,6 +11,7 @@
11
11
  "require": "./dist/index.js",
12
12
  "types": "./dist/index.d.ts"
13
13
  },
14
+ "./index.css": "./dist/index.css",
14
15
  "./styles.css": "./dist/styles.css"
15
16
  },
16
17
  "files": [
@@ -18,6 +19,10 @@
18
19
  "README.md",
19
20
  "LICENSE"
20
21
  ],
22
+ "sideEffects": [
23
+ "dist/index.css",
24
+ "dist/styles.css"
25
+ ],
21
26
  "scripts": {
22
27
  "dev": "vite",
23
28
  "build": "tsc && vite build",
@@ -46,6 +51,9 @@
46
51
  "type": "git",
47
52
  "url": "https://github.com/principal-ade/panel-layouts.git"
48
53
  },
54
+ "publishConfig": {
55
+ "access": "public"
56
+ },
49
57
  "peerDependencies": {
50
58
  "@principal-ade/panel-framework-core": "^0.1.0",
51
59
  "react": ">=18.0.0",
@@ -81,6 +89,7 @@
81
89
  "typescript-eslint": "^8.46.2",
82
90
  "vite": "^5.0.0",
83
91
  "vite-plugin-dts": "^3.7.0",
92
+ "vite-plugin-lib-inject-css": "^2.2.2",
84
93
  "vitest": "^1.0.0"
85
94
  }
86
95
  }