@principal-ade/panel-layouts 0.1.2 → 0.1.3

package/dist/index.css

@@ -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}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.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:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.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;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 250px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.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-x:hidden;overflow-y: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;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;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.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}
+.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}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.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:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.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;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 250px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.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-x:hidden;overflow-y: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}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media (max-width: 768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media (prefers-color-scheme: dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.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;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;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.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}

package/dist/index.d.ts

@@ -1,60 +1,21 @@
-import { AnimatedResizableLayout } from '@a24z/panels';
-import { AnimatedResizableLayoutProps } from '@a24z/panels';
-import { AnimatedVerticalLayout } from '@a24z/panels';
-import { AnimatedVerticalLayoutProps } from '@a24z/panels';
-import { AnimationConfig } from '@a24z/panels';
-import { CollapseButtonConfig } from '@a24z/panels';
-import { CollapsibleSide } from '@a24z/panels';
-import { ConfigurablePanelLayout } from '@a24z/panels';
-import { ConfigurablePanelLayoutProps } from '@a24z/panels';
+import { EditableConfigurablePanelLayout } from '@a24z/panels';
+import { EditableConfigurablePanelLayoutProps } from '@a24z/panels';
 import { mapThemeToPanelVars } from '@a24z/panels';
 import { mapThemeToTabVars } from '@a24z/panels';
-import { PanelCallbacks } from '@a24z/panels';
-import { PanelConfigurator } from '@a24z/panels';
-import { PanelConfiguratorProps } from '@a24z/panels';
 import { PanelDefinition } from '@a24z/panels';
 import { PanelDefinitionWithContent } from '@a24z/panels';
 import { PanelGroup } from '@a24z/panels';
 import { PanelLayout } from '@a24z/panels';
-import { PanelOrientation } from '@a24z/panels';
 import { PanelSlot } from '@a24z/panels';
-import { SnapCarousel } from '@a24z/panels';
-import { SnapCarouselProps } from '@a24z/panels';
-import { SnapCarouselRef } from '@a24z/panels';
-import { TabGroup } from '@a24z/panels';
-import { TabGroupProps } from '@a24z/panels';
 import { TabsConfig } from '@a24z/panels';
 import { Theme } from '@a24z/panels';
-import { ThemeMode } from '@a24z/panels';
-import { ThreePanelLayout } from '@a24z/panels';
-import { ThreePanelLayoutProps } from '@a24z/panels';
 import { TilesConfig } from '@a24z/panels';
-import { useLocalStorage } from '@a24z/panels';
-import { useMediaQuery } from '@a24z/panels';
-
-export { AnimatedResizableLayout }
-
-export { AnimatedResizableLayoutProps }
-
-export { AnimatedVerticalLayout }
-
-export { AnimatedVerticalLayoutProps }
-
-export { AnimationConfig }
 
 /**
  * Built-in workspace IDs
  */
 export declare type BuiltInWorkspaceId = 'project-management' | 'code-review' | 'documentation' | 'agent-work' | 'quality-check' | 'drawing' | 'old-school' | 'principal-office';
 
-export { CollapseButtonConfig }
-
-export { CollapsibleSide }
-
-export { ConfigurablePanelLayout }
-
-export { ConfigurablePanelLayoutProps }
-
 /**
  * Options for creating a new workspace
  */
@@ -73,6 +34,10 @@ export declare interface CreateWorkspaceOptions {
     };
 }
 
+export { EditableConfigurablePanelLayout }
+
+export { EditableConfigurablePanelLayoutProps }
+
 /**
  * Default localStorage-based persistence adapter for web applications
  */
@@ -113,8 +78,6 @@ export { mapThemeToPanelVars }
 
 export { mapThemeToTabVars }
 
-export { PanelCallbacks }
-
 /**
  * Collapsed state for panels
  */
@@ -123,10 +86,6 @@ export declare interface PanelCollapsed {
     right?: boolean;
 }
 
-export { PanelConfigurator }
-
-export { PanelConfiguratorProps }
-
 export { PanelDefinition }
 
 export { PanelDefinitionWithContent }
@@ -135,8 +94,6 @@ export { PanelGroup }
 
 export { PanelLayout }
 
-export { PanelOrientation }
-
 /**
  * Union type for panel persistence return types
  */
@@ -206,26 +163,10 @@ export declare interface RepositoryWorkspaceState {
     };
 }
 
-export { SnapCarousel }
-
-export { SnapCarouselProps }
-
-export { SnapCarouselRef }
-
-export { TabGroup }
-
-export { TabGroupProps }
-
 export { TabsConfig }
 
 export { Theme }
 
-export { ThemeMode }
-
-export { ThreePanelLayout }
-
-export { ThreePanelLayoutProps }
-
 /**
  * Return type for the usePanelPersistence hook (three-panel variant)
  */
@@ -282,10 +223,6 @@ export declare interface UpdateWorkspaceOptions {
     };
 }
 
-export { useLocalStorage }
-
-export { useMediaQuery }
-
 /**
  * Hook for persisting panel layouts across sessions
  *

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 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 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 { EditableConfigurablePanelLayout as q, mapThemeToPanelVars as K, mapThemeToTabVars as X } from "@a24z/panels";
 import { useState as b, useRef as C, useEffect as R, useCallback as d } from "react";
-class V {
+class F {
   constructor() {
     T(this, "storageKey", "panel-layouts");
   }
@@ -31,8 +31,8 @@ function x(n) {
     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);
+    adapter: s = new F()
+  } = n, [f, u] = b(t), [y, E] = b(n.collapsed), S = C(n.collapsed), v = C({}), h = C(null), k = C(null);
   R(() => {
     (async () => {
       const c = await s.load(e);
@@ -60,7 +60,7 @@ function x(n) {
     ("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 });
+    (r || c) && (E(n.collapsed), S.current = { ...n.collapsed });
   }, [n.collapsed.left, n.collapsed.right]);
   const P = d(
     async (r) => {
@@ -116,8 +116,8 @@ function x(n) {
     }
   }, [P]);
   const z = d(async () => {
+  }, []), I = d(async () => {
   }, []), L = d(async () => {
-  }, []), E = d(async () => {
   }, []), O = d(async () => {
   }, []);
   return a === "three-panel" ? {
@@ -126,8 +126,8 @@ function x(n) {
     collapsed: y,
     handlePanelResize: A,
     handleLeftCollapseComplete: z,
-    handleLeftExpandComplete: L,
-    handleRightCollapseComplete: E,
+    handleLeftExpandComplete: I,
+    handleRightCollapseComplete: L,
     handleRightExpandComplete: O
   } : {
     type: "two-panel",
@@ -135,10 +135,10 @@ function x(n) {
     collapsed: y,
     handlePanelResize: A,
     handleLeftCollapseComplete: z,
-    handleLeftExpandComplete: L
+    handleLeftExpandComplete: I
   };
 }
-class F {
+class V {
   constructor() {
     T(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
     T(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
@@ -608,11 +608,11 @@ class p {
     Object.keys(e).length;
   }
 }
-T(p, "adapter", new F());
+T(p, "adapter", new V());
 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 () => {
+  ), [u, y] = b(null), [E, S] = b(null), [v, h] = b(!0), [k, m] = b(null), l = d(async () => {
     try {
       h(!0), m(null);
       const o = await p.getWorkspaceLayouts();
@@ -674,7 +674,7 @@ function J(n = {}) {
       return i && await l(), i;
     },
     [l]
-  ), L = d(
+  ), I = d(
     async (o) => {
       if (!e) {
         console.error("Cannot apply workspace without repositoryKey");
@@ -696,7 +696,7 @@ function J(n = {}) {
       await p.setRepositoryState(e, g), await l();
     },
     [e, l]
-  ), E = d(
+  ), L = d(
     async (o) => {
       if (!e) {
         console.error("Cannot update sizes without repositoryKey");
@@ -732,35 +732,27 @@ function J(n = {}) {
   return {
     workspaces: s,
     repositoryState: u,
-    activeWorkspace: I,
+    activeWorkspace: E,
     loading: v,
     error: k,
     getWorkspace: W,
     createWorkspace: P,
     updateWorkspace: A,
     deleteWorkspace: z,
-    applyWorkspace: L,
-    updateSizes: E,
+    applyWorkspace: I,
+    updateSizes: L,
     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,
+  q as EditableConfigurablePanelLayout,
+  F as LocalStoragePersistenceAdapter,
+  V as LocalStorageWorkspaceAdapter,
   p as WorkspaceLayoutService,
-  Z as mapThemeToPanelVars,
-  H as mapThemeToTabVars,
-  U as useLocalStorage,
-  ee as useMediaQuery,
+  K as mapThemeToPanelVars,
+  X as mapThemeToTabVars,
   x as usePanelPersistence,
   J as useWorkspace
 };

package/dist/index.js

@@ -1,2 +1,2 @@
-"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;
+"use strict";require('./index.css');var $=Object.defineProperty;var D=(c,e,t)=>e in c?$(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var P=(c,e,t)=>D(c,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("@a24z/panels"),s=require("react");class I{constructor(){P(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 V(c){const{viewKey:e,defaultSizes:t,panelType:a,adapter:r=new I}=c,[f,u]=s.useState(t),[y,A]=s.useState(c.collapsed),S=s.useRef(c.collapsed),W=s.useRef({}),h=s.useRef(null),w=s.useRef(null);s.useEffect(()=>{(async()=>{const d=await r.load(e);d!=null&&d.sizes&&(u(d.sizes),m(d.sizes))})()},[e]);const m=s.useCallback(o=>{"left"in o&&o.left>0&&(W.current.left=o.left),"middle"in o&&o.middle>0&&(W.current.middle=o.middle),"right"in o&&o.right>0&&(W.current.right=o.right)},[]),n=s.useCallback(o=>{const d=W.current[o];if(d&&d>0)return d;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]),b=s.useRef(t);s.useEffect(()=>{("left"in t&&t.left!==b.current.left||"middle"in t&&"middle"in b.current&&t.middle!==b.current.middle||"right"in t&&t.right!==b.current.right)&&(u(t),m(t),b.current=t)},[t,m]),s.useEffect(()=>{const o=c.collapsed.left!==S.current.left,d="right"in c.collapsed&&"right"in S.current&&c.collapsed.right!==S.current.right;(o||d)&&(A(c.collapsed),S.current={...c.collapsed})},[c.collapsed.left,c.collapsed.right]);const C=s.useCallback(async o=>{try{await r.save(e,{sizes:o})}catch(d){console.error(`Failed to save panel preferences for ${e}:`,d)}},[e,r]),T=s.useCallback(o=>{const d={...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?d.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?d.right=k:i=!1}else g===0&&(i=!1)}if(u(d),m(d),h.current&&(clearTimeout(h.current),h.current=null),!i){w.current=null;return}w.current=d,h.current=setTimeout(()=>{const l=w.current;l&&(C(l),w.current=null),h.current=null},500)},[y,n,a,C,m]);s.useEffect(()=>()=>{if(h.current){const o=w.current;o&&(C(o),w.current=null),clearTimeout(h.current),h.current=null}},[C]);const v=s.useCallback(async()=>{},[]),R=s.useCallback(async()=>{},[]),z=s.useCallback(async()=>{},[]),E=s.useCallback(async()=>{},[]);return a==="three-panel"?{type:"three-panel",sizes:f,collapsed:y,handlePanelResize:T,handleLeftCollapseComplete:v,handleLeftExpandComplete:R,handleRightCollapseComplete:z,handleRightExpandComplete:E}:{type:"two-panel",sizes:f,collapsed:y,handlePanelResize:T,handleLeftCollapseComplete:v,handleLeftExpandComplete:R}}class O{constructor(){P(this,"PRESETS_KEY","panel-layouts:workspace-presets");P(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(u){console.error(`Failed to parse repository state for ${r}:`,u)}}}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()},u={...a,[e]:f};return await this.adapter.saveWorkspacePresets(u),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}}P(p,"adapter",new O);function F(c={}){const{repositoryKey:e,autoInitialize:t=!1,defaultWorkspaceId:a}=c,[r,f]=s.useState({}),[u,y]=s.useState(null),[A,S]=s.useState(null),[W,h]=s.useState(!0),[w,m]=s.useState(null),n=s.useCallback(async()=>{try{h(!0),m(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){m(i),console.error("Failed to load workspace data:",i)}finally{h(!1)}},[e,t,a]);s.useEffect(()=>{n()},[n]);const b=s.useCallback(async i=>await p.getWorkspaceLayout(i),[]),C=s.useCallback(async i=>{const l=await p.createWorkspaceLayout(i);return await n(),l},[n]),T=s.useCallback(async(i,l)=>{const g=await p.updateWorkspaceLayout(i,l);return await n(),g},[n]),v=s.useCallback(async i=>{const l=await p.deleteWorkspaceLayout(i);return l&&await n(),l},[n]),R=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]),z=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||!(u!=null&&u.workspaceId)){console.error("Cannot reset without repositoryKey and active workspace");return}await p.resetRepositoryToWorkspaceDefaults(e,u.workspaceId),await n()},[e,u==null?void 0:u.workspaceId,n]),d=s.useCallback(async()=>{await n()},[n]);return{workspaces:r,repositoryState:u,activeWorkspace:A,loading:W,error:w,getWorkspace:b,createWorkspace:C,updateWorkspace:T,deleteWorkspace:v,applyWorkspace:R,updateSizes:z,updateCollapsed:E,resetToDefaults:o,refresh:d}}Object.defineProperty(exports,"EditableConfigurablePanelLayout",{enumerable:!0,get:()=>L.EditableConfigurablePanelLayout});Object.defineProperty(exports,"mapThemeToPanelVars",{enumerable:!0,get:()=>L.mapThemeToPanelVars});Object.defineProperty(exports,"mapThemeToTabVars",{enumerable:!0,get:()=>L.mapThemeToTabVars});exports.LocalStoragePersistenceAdapter=I;exports.LocalStorageWorkspaceAdapter=O;exports.WorkspaceLayoutService=p;exports.usePanelPersistence=V;exports.useWorkspace=F;
 //# sourceMappingURL=index.js.map

package/dist/styles.css

@@ -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}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.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:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.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;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 250px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.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-x:hidden;overflow-y: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;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;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.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}
+.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}.panel-content-wrapper{flex:1;overflow:auto;will-change:opacity;box-sizing:border-box}.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:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.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;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 250px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.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-x:hidden;overflow-y: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}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;inset:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;inset:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media (max-width: 768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media (prefers-color-scheme: dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.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;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;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.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ade/panel-layouts",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Pre-built panel layout components and workspace management for the Panel Framework",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",