@principal-ade/panel-layouts 0.2.9 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -374
- package/dist/index.esm.js +771 -1650
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1 +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[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.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}}.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}}@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}
|
|
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:39px;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[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.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}}.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}}@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}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,9 +5,7 @@ import { EditableConfigurablePanelLayoutProps } from '@principal-ade/panels';
|
|
|
5
5
|
import { JsonSchema } from '@principal-ade/panel-framework-core';
|
|
6
6
|
import { mapThemeToPanelVars } from '@principal-ade/panels';
|
|
7
7
|
import { mapThemeToTabVars } from '@principal-ade/panels';
|
|
8
|
-
import { PanelActions } from '@principal-ade/panel-framework-core';
|
|
9
8
|
import { PanelBlurEventPayload } from '@principal-ade/panel-framework-core';
|
|
10
|
-
import { PanelContextValue } from '@principal-ade/panel-framework-core';
|
|
11
9
|
import { PanelDefinition } from '@principal-ade/panels';
|
|
12
10
|
import { PanelDefinitionWithContent } from '@principal-ade/panels';
|
|
13
11
|
import { PanelEventEmitter } from '@principal-ade/panel-framework-core';
|
|
@@ -16,8 +14,7 @@ import { PanelGroup } from '@principal-ade/panels';
|
|
|
16
14
|
import { PanelLayout } from '@principal-ade/panels';
|
|
17
15
|
import { PanelSlot } from '@principal-ade/panels';
|
|
18
16
|
import { PanelTool } from '@principal-ade/panel-framework-core';
|
|
19
|
-
import {
|
|
20
|
-
import { RegisteredTool } from '@principal-ade/panel-framework-core';
|
|
17
|
+
import { PanelTool as PanelTool_2 } from '@principal-ade/utcp-panel-event';
|
|
21
18
|
import { ResponsiveConfigurablePanelLayout } from '@principal-ade/panels';
|
|
22
19
|
import { ResponsiveConfigurablePanelLayoutProps } from '@principal-ade/panels';
|
|
23
20
|
import { TabsConfig } from '@principal-ade/panels';
|
|
@@ -184,66 +181,6 @@ export declare type BuiltInWorkspaceId = 'project-management' | 'code-review' |
|
|
|
184
181
|
*/
|
|
185
182
|
export declare const collapseAllPanelsTool: PanelTool;
|
|
186
183
|
|
|
187
|
-
/**
|
|
188
|
-
* Command definition for the command palette
|
|
189
|
-
*/
|
|
190
|
-
export declare interface Command {
|
|
191
|
-
/** Unique identifier for the command */
|
|
192
|
-
id: string;
|
|
193
|
-
/** Display label shown in the command list */
|
|
194
|
-
label: string;
|
|
195
|
-
/** Optional description shown below the label */
|
|
196
|
-
description?: string;
|
|
197
|
-
/** Optional icon (string or React element) */
|
|
198
|
-
icon?: string | React.ReactNode;
|
|
199
|
-
/** Keywords for fuzzy search matching */
|
|
200
|
-
keywords?: string[];
|
|
201
|
-
/** Category for grouping commands */
|
|
202
|
-
category?: string;
|
|
203
|
-
/** Optional keyboard shortcut hint (e.g., "Alt+1") */
|
|
204
|
-
shortcut?: string;
|
|
205
|
-
/** Command execution function */
|
|
206
|
-
execute: (context: CommandContext) => void | Promise<void>;
|
|
207
|
-
/** Optional function to determine if command is available */
|
|
208
|
-
isAvailable?: (context: CommandContext) => boolean;
|
|
209
|
-
/** Priority for ordering (higher = appears first) */
|
|
210
|
-
priority?: number;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Command category definition
|
|
215
|
-
*/
|
|
216
|
-
export declare interface CommandCategory {
|
|
217
|
-
/** Category identifier */
|
|
218
|
-
id: string;
|
|
219
|
-
/** Display label */
|
|
220
|
-
label: string;
|
|
221
|
-
/** Display priority (higher = shown first) */
|
|
222
|
-
priority?: number;
|
|
223
|
-
/** Optional icon */
|
|
224
|
-
icon?: string | React.ReactNode;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* Context provided to command execution functions
|
|
229
|
-
*/
|
|
230
|
-
export declare interface CommandContext {
|
|
231
|
-
/** Panel framework context */
|
|
232
|
-
panelContext: PanelContextValue;
|
|
233
|
-
/** Panel actions for navigation, file operations, etc. */
|
|
234
|
-
actions: PanelActions;
|
|
235
|
-
/** Event bus for inter-panel communication */
|
|
236
|
-
events: PanelEventEmitter;
|
|
237
|
-
/** Currently focused panel */
|
|
238
|
-
focusedPanel: PanelSlotId | null;
|
|
239
|
-
/** Function to set panel focus */
|
|
240
|
-
setFocus: (panel: PanelSlotId) => void;
|
|
241
|
-
/** Workspace management service */
|
|
242
|
-
workspaceService?: WorkspaceLayoutService;
|
|
243
|
-
/** Close the command palette */
|
|
244
|
-
closeCommandPalette: () => void;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
184
|
/**
|
|
248
185
|
* Entry in the command history
|
|
249
186
|
*/
|
|
@@ -258,187 +195,6 @@ export declare interface CommandHistoryEntry {
|
|
|
258
195
|
success: boolean;
|
|
259
196
|
}
|
|
260
197
|
|
|
261
|
-
/**
|
|
262
|
-
* CommandInput - Input field for the command palette
|
|
263
|
-
* Auto-focuses on mount and handles input changes
|
|
264
|
-
*/
|
|
265
|
-
export declare const CommandInput: default_2.FC<CommandInputProps>;
|
|
266
|
-
|
|
267
|
-
declare interface CommandInputProps {
|
|
268
|
-
value: string;
|
|
269
|
-
onChange: (value: string) => void;
|
|
270
|
-
placeholder?: string;
|
|
271
|
-
onClose: () => void;
|
|
272
|
-
onEnter?: () => void;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* CommandItem - Individual command item in the list
|
|
277
|
-
* Displays command label, description, icon, and keyboard shortcut
|
|
278
|
-
*/
|
|
279
|
-
export declare const CommandItem: default_2.ForwardRefExoticComponent<CommandItemProps & default_2.RefAttributes<HTMLDivElement>>;
|
|
280
|
-
|
|
281
|
-
declare interface CommandItemProps {
|
|
282
|
-
command: Command;
|
|
283
|
-
isSelected: boolean;
|
|
284
|
-
onClick: () => void;
|
|
285
|
-
onMouseEnter: () => void;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
/**
|
|
289
|
-
* CommandList - List of filtered commands
|
|
290
|
-
* Displays commands grouped by category with keyboard navigation support
|
|
291
|
-
*/
|
|
292
|
-
export declare const CommandList: default_2.FC<CommandListProps>;
|
|
293
|
-
|
|
294
|
-
declare interface CommandListProps {
|
|
295
|
-
commands: Command[];
|
|
296
|
-
selectedIndex: number;
|
|
297
|
-
onSelect: (command: Command) => void;
|
|
298
|
-
onHover: (index: number) => void;
|
|
299
|
-
maxResults?: number;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
/**
|
|
303
|
-
* CommandPalette - Vim-style command palette component
|
|
304
|
-
* Displays at the bottom of the screen with an input field and command list
|
|
305
|
-
*/
|
|
306
|
-
export declare const CommandPalette: default_2.FC<CommandPaletteProps>;
|
|
307
|
-
|
|
308
|
-
/**
|
|
309
|
-
* Configuration options for the command palette
|
|
310
|
-
*/
|
|
311
|
-
export declare interface CommandPaletteConfig {
|
|
312
|
-
/** Custom keyboard shortcut configuration */
|
|
313
|
-
keyboard?: CommandPaletteKeyboardConfig;
|
|
314
|
-
/** Maximum number of results to show */
|
|
315
|
-
maxResults?: number;
|
|
316
|
-
/** Placeholder text for the input field */
|
|
317
|
-
placeholder?: string;
|
|
318
|
-
/** Custom CSS class for the container */
|
|
319
|
-
className?: string;
|
|
320
|
-
/** Custom styles for the container */
|
|
321
|
-
style?: React.CSSProperties;
|
|
322
|
-
/** Maximum height of the results list */
|
|
323
|
-
maxHeight?: string;
|
|
324
|
-
/** Enable fuzzy search (default: true) */
|
|
325
|
-
fuzzySearch?: boolean;
|
|
326
|
-
/** Threshold for fuzzy search matching (0-1, default: 0.3) */
|
|
327
|
-
fuzzyThreshold?: number;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
/**
|
|
331
|
-
* Keyboard shortcut configuration for triggering the command palette
|
|
332
|
-
*/
|
|
333
|
-
export declare interface CommandPaletteKeyboardConfig {
|
|
334
|
-
/** Key to trigger the command palette (default: ' ' for Space) */
|
|
335
|
-
key?: string;
|
|
336
|
-
/** Require Alt key (default: true) */
|
|
337
|
-
altKey?: boolean;
|
|
338
|
-
/** Require Ctrl key (default: false) */
|
|
339
|
-
ctrlKey?: boolean;
|
|
340
|
-
/** Require Meta/Cmd key (default: false) */
|
|
341
|
-
metaKey?: boolean;
|
|
342
|
-
/** Require Shift key (default: false) */
|
|
343
|
-
shiftKey?: boolean;
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
/**
|
|
347
|
-
* Props for the CommandPalette component
|
|
348
|
-
*/
|
|
349
|
-
export declare interface CommandPaletteProps {
|
|
350
|
-
/** Command palette hook return value */
|
|
351
|
-
commandPalette: UseCommandPaletteReturn;
|
|
352
|
-
/** Configuration options */
|
|
353
|
-
config?: CommandPaletteConfig;
|
|
354
|
-
/** Panel context for command execution */
|
|
355
|
-
context: CommandContext;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
/**
|
|
359
|
-
* Service for managing command registration and execution
|
|
360
|
-
* Provides a centralized registry for commands that can be accessed via the command palette
|
|
361
|
-
*/
|
|
362
|
-
export declare class CommandRegistryService {
|
|
363
|
-
private commands;
|
|
364
|
-
private listeners;
|
|
365
|
-
/**
|
|
366
|
-
* Register one or more commands
|
|
367
|
-
* @param commands - Array of commands to register
|
|
368
|
-
*/
|
|
369
|
-
registerCommands(commands: Command[]): void;
|
|
370
|
-
/**
|
|
371
|
-
* Register a single command
|
|
372
|
-
* @param command - Command to register
|
|
373
|
-
*/
|
|
374
|
-
registerCommand(command: Command): void;
|
|
375
|
-
/**
|
|
376
|
-
* Unregister commands by ID
|
|
377
|
-
* @param commandIds - Array of command IDs to unregister
|
|
378
|
-
*/
|
|
379
|
-
unregisterCommands(commandIds: string[]): void;
|
|
380
|
-
/**
|
|
381
|
-
* Unregister a single command
|
|
382
|
-
* @param commandId - Command ID to unregister
|
|
383
|
-
*/
|
|
384
|
-
unregisterCommand(commandId: string): void;
|
|
385
|
-
/**
|
|
386
|
-
* Get all registered commands
|
|
387
|
-
* @param context - Command context for availability checks
|
|
388
|
-
* @returns Array of available commands
|
|
389
|
-
*/
|
|
390
|
-
getCommands(context?: CommandContext): Command[];
|
|
391
|
-
/**
|
|
392
|
-
* Get a command by ID
|
|
393
|
-
* @param commandId - Command ID
|
|
394
|
-
* @returns Command if found, undefined otherwise
|
|
395
|
-
*/
|
|
396
|
-
getCommand(commandId: string): Command | undefined;
|
|
397
|
-
/**
|
|
398
|
-
* Execute a command by ID
|
|
399
|
-
* @param commandId - Command ID to execute
|
|
400
|
-
* @param context - Command context
|
|
401
|
-
*/
|
|
402
|
-
executeCommand(commandId: string, context: CommandContext): Promise<void>;
|
|
403
|
-
/**
|
|
404
|
-
* Search commands by query
|
|
405
|
-
* @param query - Search query
|
|
406
|
-
* @param context - Command context for availability checks
|
|
407
|
-
* @returns Filtered and sorted commands
|
|
408
|
-
*/
|
|
409
|
-
searchCommands(query: string, context?: CommandContext): Command[];
|
|
410
|
-
/**
|
|
411
|
-
* Sort commands by priority and label
|
|
412
|
-
* @param commands - Commands to sort
|
|
413
|
-
* @returns Sorted commands
|
|
414
|
-
*/
|
|
415
|
-
private sortCommands;
|
|
416
|
-
/**
|
|
417
|
-
* Subscribe to registry changes
|
|
418
|
-
* @param listener - Callback function called when registry changes
|
|
419
|
-
* @returns Unsubscribe function
|
|
420
|
-
*/
|
|
421
|
-
subscribe(listener: () => void): () => void;
|
|
422
|
-
/**
|
|
423
|
-
* Clear all commands
|
|
424
|
-
*/
|
|
425
|
-
clear(): void;
|
|
426
|
-
/**
|
|
427
|
-
* Get count of registered commands
|
|
428
|
-
*/
|
|
429
|
-
get size(): number;
|
|
430
|
-
/**
|
|
431
|
-
* Notify all listeners of registry changes
|
|
432
|
-
*/
|
|
433
|
-
private notifyListeners;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* Creates a hook-like function that returns commands from a registry.
|
|
438
|
-
* Useful for dynamic command registration.
|
|
439
|
-
*/
|
|
440
|
-
export declare function createToolCommandsProvider(registry: PanelToolRegistry, config?: ToolCommandBridgeConfig): () => Command[];
|
|
441
|
-
|
|
442
198
|
/**
|
|
443
199
|
* Options for creating a new workspace
|
|
444
200
|
*/
|
|
@@ -531,18 +287,6 @@ export declare function generateToolsSystemPrompt(tools: PanelTool[], options?:
|
|
|
531
287
|
includeParameters?: boolean;
|
|
532
288
|
}): string;
|
|
533
289
|
|
|
534
|
-
/**
|
|
535
|
-
* Get the global command registry instance
|
|
536
|
-
* @returns Global CommandRegistryService instance
|
|
537
|
-
*/
|
|
538
|
-
export declare function getGlobalCommandRegistry(): CommandRegistryService;
|
|
539
|
-
|
|
540
|
-
/**
|
|
541
|
-
* Get panel commands
|
|
542
|
-
* @returns Array of panel-related commands
|
|
543
|
-
*/
|
|
544
|
-
export declare function getPanelCommands(): Command[];
|
|
545
|
-
|
|
546
290
|
/**
|
|
547
291
|
* Tool: Get Panel State
|
|
548
292
|
*
|
|
@@ -551,11 +295,6 @@ export declare function getPanelCommands(): Command[];
|
|
|
551
295
|
*/
|
|
552
296
|
export declare const getPanelStateTool: PanelTool;
|
|
553
297
|
|
|
554
|
-
/**
|
|
555
|
-
* Utility to extract parameter information for UI rendering.
|
|
556
|
-
*/
|
|
557
|
-
export declare function getToolParameterInfo(tool: RegisteredTool): ToolParameterInfo[];
|
|
558
|
-
|
|
559
298
|
/**
|
|
560
299
|
* Tool: Get Visible Panels
|
|
561
300
|
*
|
|
@@ -599,7 +338,7 @@ export declare const layoutToolsMetadata: {
|
|
|
599
338
|
id: string;
|
|
600
339
|
name: string;
|
|
601
340
|
description: string;
|
|
602
|
-
tools:
|
|
341
|
+
tools: PanelTool_2[];
|
|
603
342
|
};
|
|
604
343
|
|
|
605
344
|
/**
|
|
@@ -706,11 +445,6 @@ export declare interface PanelCollapsed {
|
|
|
706
445
|
right?: boolean;
|
|
707
446
|
}
|
|
708
447
|
|
|
709
|
-
/**
|
|
710
|
-
* Built-in commands for panel navigation and control
|
|
711
|
-
*/
|
|
712
|
-
export declare const panelCommands: Command[];
|
|
713
|
-
|
|
714
448
|
/**
|
|
715
449
|
* A button component for opening panel configuration/layout settings.
|
|
716
450
|
*/
|
|
@@ -939,11 +673,6 @@ export declare interface RepositoryWorkspaceState {
|
|
|
939
673
|
};
|
|
940
674
|
}
|
|
941
675
|
|
|
942
|
-
/**
|
|
943
|
-
* Reset the global command registry (useful for testing)
|
|
944
|
-
*/
|
|
945
|
-
export declare function resetGlobalCommandRegistry(): void;
|
|
946
|
-
|
|
947
676
|
/**
|
|
948
677
|
* Tool: Reset Layout
|
|
949
678
|
*
|
|
@@ -995,18 +724,6 @@ export { TilesConfig }
|
|
|
995
724
|
*/
|
|
996
725
|
export declare const togglePanelTool: PanelTool;
|
|
997
726
|
|
|
998
|
-
/**
|
|
999
|
-
* Configuration for the tool-to-command bridge
|
|
1000
|
-
*/
|
|
1001
|
-
export declare interface ToolCommandBridgeConfig {
|
|
1002
|
-
/** Category prefix for tool commands (default: 'Panel Tools') */
|
|
1003
|
-
categoryPrefix?: string;
|
|
1004
|
-
/** Priority offset for tool commands (default: 50) */
|
|
1005
|
-
basePriority?: number;
|
|
1006
|
-
/** Whether to include panel ID in category (default: true) */
|
|
1007
|
-
includePanelInCategory?: boolean;
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1010
727
|
/**
|
|
1011
728
|
* Represents a single tool execution
|
|
1012
729
|
*/
|
|
@@ -1045,18 +762,6 @@ export declare interface ToolExecutionListProps {
|
|
|
1045
762
|
*/
|
|
1046
763
|
export declare type ToolExecutionStatus = 'pending' | 'running' | 'success' | 'error';
|
|
1047
764
|
|
|
1048
|
-
/**
|
|
1049
|
-
* Parameter information for UI rendering
|
|
1050
|
-
*/
|
|
1051
|
-
export declare interface ToolParameterInfo {
|
|
1052
|
-
name: string;
|
|
1053
|
-
type: string;
|
|
1054
|
-
description: string;
|
|
1055
|
-
required: boolean;
|
|
1056
|
-
default?: unknown;
|
|
1057
|
-
enum?: string[];
|
|
1058
|
-
}
|
|
1059
|
-
|
|
1060
765
|
/**
|
|
1061
766
|
* Convert an array of PanelTools to AIFunctionDefinition format.
|
|
1062
767
|
*/
|
|
@@ -1067,11 +772,6 @@ export declare function toolsToAIFunctions(tools: PanelTool[]): AIFunctionDefini
|
|
|
1067
772
|
*/
|
|
1068
773
|
export declare function toolsToAnthropicFormat(tools: PanelTool[]): AnthropicTool[];
|
|
1069
774
|
|
|
1070
|
-
/**
|
|
1071
|
-
* Converts all tools from a registry into commands.
|
|
1072
|
-
*/
|
|
1073
|
-
export declare function toolsToCommands(registry: PanelToolRegistry, config?: ToolCommandBridgeConfig): Command[];
|
|
1074
|
-
|
|
1075
775
|
/**
|
|
1076
776
|
* Convert an array of PanelTools to Gemini tools format.
|
|
1077
777
|
*/
|
|
@@ -1093,15 +793,6 @@ export declare function toolToAIFunction(tool: PanelTool): AIFunctionDefinition;
|
|
|
1093
793
|
*/
|
|
1094
794
|
export declare function toolToAnthropicFormat(tool: PanelTool): AnthropicTool;
|
|
1095
795
|
|
|
1096
|
-
/**
|
|
1097
|
-
* Converts a registered tool into a command palette command.
|
|
1098
|
-
*
|
|
1099
|
-
* For tools with no required parameters, the command executes immediately.
|
|
1100
|
-
* For tools with required parameters, this is a placeholder - full
|
|
1101
|
-
* implementation would need a parameter input UI.
|
|
1102
|
-
*/
|
|
1103
|
-
export declare function toolToCommand(tool: RegisteredTool, registry: PanelToolRegistry, config?: ToolCommandBridgeConfig): Command;
|
|
1104
|
-
|
|
1105
796
|
/**
|
|
1106
797
|
* Convert a PanelTool to Gemini function declaration format.
|
|
1107
798
|
*/
|
|
@@ -1228,63 +919,6 @@ export declare interface UseAgentCommandPaletteReturn {
|
|
|
1228
919
|
clear: () => void;
|
|
1229
920
|
}
|
|
1230
921
|
|
|
1231
|
-
/**
|
|
1232
|
-
* Hook for managing command palette state and behavior
|
|
1233
|
-
* Handles command registration, filtering, keyboard navigation, and execution
|
|
1234
|
-
*/
|
|
1235
|
-
export declare function useCommandPalette({ context, commands: initialCommands, keyboard, config, registry: providedRegistry, }: UseCommandPaletteProps): UseCommandPaletteReturn;
|
|
1236
|
-
|
|
1237
|
-
declare interface UseCommandPaletteProps {
|
|
1238
|
-
/** Command context */
|
|
1239
|
-
context: CommandContext;
|
|
1240
|
-
/** Initial commands to register */
|
|
1241
|
-
commands?: Command[];
|
|
1242
|
-
/** Keyboard configuration */
|
|
1243
|
-
keyboard?: CommandPaletteKeyboardConfig;
|
|
1244
|
-
/** Command palette configuration */
|
|
1245
|
-
config?: CommandPaletteConfig;
|
|
1246
|
-
/** Command registry service (optional, uses global if not provided) */
|
|
1247
|
-
registry?: CommandRegistryService;
|
|
1248
|
-
}
|
|
1249
|
-
|
|
1250
|
-
/**
|
|
1251
|
-
* Command palette state and actions hook return type
|
|
1252
|
-
*/
|
|
1253
|
-
export declare interface UseCommandPaletteReturn {
|
|
1254
|
-
/** Whether the command palette is open */
|
|
1255
|
-
isOpen: boolean;
|
|
1256
|
-
/** Open the command palette */
|
|
1257
|
-
open: () => void;
|
|
1258
|
-
/** Close the command palette */
|
|
1259
|
-
close: () => void;
|
|
1260
|
-
/** Toggle the command palette */
|
|
1261
|
-
toggle: () => void;
|
|
1262
|
-
/** Search query */
|
|
1263
|
-
query: string;
|
|
1264
|
-
/** Set search query */
|
|
1265
|
-
setQuery: (query: string) => void;
|
|
1266
|
-
/** Filtered and sorted commands */
|
|
1267
|
-
filteredCommands: Command[];
|
|
1268
|
-
/** Execute a command by ID */
|
|
1269
|
-
executeCommand: (commandId: string) => Promise<void>;
|
|
1270
|
-
/** Selected command index (for keyboard navigation) */
|
|
1271
|
-
selectedIndex: number;
|
|
1272
|
-
/** Set selected index */
|
|
1273
|
-
setSelectedIndex: (index: number) => void;
|
|
1274
|
-
/** Navigate to next command */
|
|
1275
|
-
selectNext: () => void;
|
|
1276
|
-
/** Navigate to previous command */
|
|
1277
|
-
selectPrevious: () => void;
|
|
1278
|
-
/** Execute the currently selected command */
|
|
1279
|
-
executeSelected: () => Promise<void>;
|
|
1280
|
-
/** All registered commands */
|
|
1281
|
-
commands: Command[];
|
|
1282
|
-
/** Register new commands */
|
|
1283
|
-
registerCommands: (commands: Command[]) => void;
|
|
1284
|
-
/** Unregister commands by ID */
|
|
1285
|
-
unregisterCommands: (commandIds: string[]) => void;
|
|
1286
|
-
}
|
|
1287
|
-
|
|
1288
922
|
/**
|
|
1289
923
|
* Hook for managing panel focus state with keyboard shortcuts
|
|
1290
924
|
*/
|
|
@@ -1421,12 +1055,6 @@ export declare interface UsePanelPersistenceOptions {
|
|
|
1421
1055
|
adapter?: PersistenceAdapter;
|
|
1422
1056
|
}
|
|
1423
1057
|
|
|
1424
|
-
/**
|
|
1425
|
-
* Hook to use tool commands in React components.
|
|
1426
|
-
* Subscribes to registry changes and updates commands accordingly.
|
|
1427
|
-
*/
|
|
1428
|
-
export declare function useToolCommands(registry: PanelToolRegistry, config?: ToolCommandBridgeConfig): Command[];
|
|
1429
|
-
|
|
1430
1058
|
export declare function useWorkspace(options?: UseWorkspaceOptions): UseWorkspaceReturn;
|
|
1431
1059
|
|
|
1432
1060
|
export declare interface UseWorkspaceOptions {
|