@pasquelin/panels 0.2.0 → 0.3.1

package/dist/styles.css

@@ -1 +1 @@
-.pnl-dockview{height:100%;--dv-background-color: var(--pnl-panel);--dv-group-view-background-color: var(--pnl-panel);--dv-tabs-and-actions-container-background-color: var(--pnl-panel);--dv-tabs-container-scrollbar-color: var(--pnl-border);--dv-activegroup-visiblepanel-tab-background-color: var(--pnl-elevated);--dv-activegroup-hiddenpanel-tab-background-color: transparent;--dv-inactivegroup-visiblepanel-tab-background-color: var(--pnl-surface);--dv-inactivegroup-hiddenpanel-tab-background-color: transparent;--dv-activegroup-visiblepanel-tab-color: var(--pnl-text);--dv-activegroup-hiddenpanel-tab-color: var(--pnl-muted);--dv-inactivegroup-visiblepanel-tab-color: var(--pnl-muted);--dv-inactivegroup-hiddenpanel-tab-color: var(--pnl-muted);--dv-separator-border: transparent;--dv-paneview-header-border-color: var(--pnl-border);--dv-tab-divider-color: transparent;--dv-drag-over-background-color: color-mix(in srgb, var(--pnl-accent) 18%, transparent);--dv-drag-over-border-color: var(--pnl-accent);--dv-tabs-and-actions-container-height: var(--pnl-tab);--dv-tabs-and-actions-container-font-size: 12px}.pnl-dockview .dv-tabs-container{padding-left:var(--pnl-gutter)}.pnl-dockview .dv-tab{display:flex;align-items:center;border-radius:var(--pnl-radius);margin:6px 2px;padding:0 4px;transition:background-color .12s ease}.pnl-dockview .dv-tab>.dv-react-part{display:flex;align-items:center;min-width:0}.pnl-dockview .dv-tab .dv-default-tab{min-width:0}.pnl-dockview .dv-tab:hover{background-color:var(--pnl-surface)}.pnl-dockview .dv-default-tab{height:100%;padding:0 4px}.pnl-dockview .dv-default-tab-action{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border-radius:9999px;background-color:transparent;transition:background-color .12s ease,color .12s ease}.pnl-dockview .dv-default-tab-action:hover{background-color:var(--pnl-elevated);color:var(--pnl-text)}:where(.pnl-root){--pnl-rail: 48px;--pnl-rail-button: 36px;--pnl-rail-inset: 14px;--pnl-gutter: 6px;--pnl-header: 40px;--pnl-tab: 40px;--pnl-radius: 6px;--pnl-radius-sm: 4px;--pnl-font-size: 13px;--pnl-chassis: #2b2d30;--pnl-panel: #191a1c;--pnl-surface: #202124;--pnl-elevated: #3c3f44;--pnl-border: #34363a;--pnl-text: #dfe1e5;--pnl-muted: #91959b;--pnl-accent: #346ef2;--pnl-accent-text: #ffffff}.pnl-root{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--pnl-chassis);color:var(--pnl-text);font-size:var(--pnl-font-size)}.pnl-root *,.pnl-root *:before,.pnl-root *:after{box-sizing:border-box}@media(prefers-color-scheme:light){:where(.pnl-root:not([data-pnl-theme=dark])){--pnl-chassis: #dcdde1;--pnl-panel: #ffffff;--pnl-surface: #f2f3f6;--pnl-elevated: #e4e6ea;--pnl-border: #c9cbd1;--pnl-text: #1f2124;--pnl-muted: #5c6066}}:where(.pnl-root[data-pnl-theme=light]){--pnl-chassis: #dcdde1;--pnl-panel: #ffffff;--pnl-surface: #f2f3f6;--pnl-elevated: #e4e6ea;--pnl-border: #c9cbd1;--pnl-text: #1f2124;--pnl-muted: #5c6066}.pnl-middle{display:flex;flex:1;min-height:0}.pnl-columns{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;padding-block:var(--pnl-gutter)}.pnl-row{display:flex;flex:1;min-height:0}.pnl-stack{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.pnl-centre{flex:1;min-width:0}.pnl-rail{display:flex;flex-direction:column;flex-shrink:0;align-items:center;justify-content:space-between;width:var(--pnl-rail);padding-block:var(--pnl-gutter)}.pnl-rail__group{display:flex;flex-direction:column;align-items:center;gap:8px}.pnl-rail__button{width:var(--pnl-rail-button);height:var(--pnl-rail-button);border-radius:var(--pnl-radius)}.pnl-zone{display:flex;min-width:0;min-height:0}.pnl-zone--col{flex-direction:column}.pnl-zone--row{flex-direction:row}.pnl-band{display:flex;min-height:0}.pnl-band__half{display:flex;flex-direction:column;min-width:0}.pnl-band__half--even,.pnl-band__half--rest{flex:1}.pnl-surface{display:flex;flex-direction:column;flex-shrink:0;min-height:0;overflow:hidden;border-radius:var(--pnl-radius);background:var(--pnl-panel)}.pnl-surface--fill{flex:1 1 0}.pnl-surface--give{flex-shrink:1}.pnl-body{display:flex;flex:1;flex-direction:column;min-height:0;overflow:auto}.pnl-header{display:flex;flex-shrink:0;align-items:center;gap:8px;height:var(--pnl-header);padding-inline:12px 6px}.pnl-header__title{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.pnl-header__title--fixed{flex-shrink:0}.pnl-header__actions{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;margin-left:auto}.pnl-header__actions--fill{flex:1;margin-left:0}.pnl-header__trailing{display:flex;flex-shrink:0;align-items:center;gap:2px}.pnl-icon-button{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:6px;width:28px;height:28px;padding:0;border:none;border-radius:var(--pnl-radius-sm);background:transparent;color:var(--pnl-muted);cursor:pointer;transition:background-color .12s ease,color .12s ease}.pnl-icon-button:hover:not(:disabled){background:var(--pnl-elevated);color:var(--pnl-text)}.pnl-icon-button:disabled{opacity:.4;cursor:not-allowed}.pnl-icon-button--active{background:var(--pnl-elevated);color:var(--pnl-text)}.pnl-icon-button--accented,.pnl-icon-button--accented:hover:not(:disabled){background:var(--pnl-accent);color:var(--pnl-accent-text)}.pnl-icon-button--header{width:24px;height:24px}.pnl-icon-button__glyph{display:inline-flex;align-items:center;justify-content:center}.pnl-separator{display:block;flex-shrink:0;background:var(--pnl-border)}.pnl-separator--vertical{width:1px;height:16px;margin-inline:4px}.pnl-separator--horizontal{width:80%;height:1px;margin-block:4px}.pnl-handle{flex-shrink:0;background:transparent;border:none}.pnl-handle--col{width:var(--pnl-gutter);height:100%;cursor:col-resize}.pnl-handle--row{width:100%;height:var(--pnl-gutter);cursor:row-resize}.pnl-handle:focus-visible{background:var(--pnl-accent);outline:none}
+.pnl-dockview{height:100%;--dv-background-color: var(--pnl-panel);--dv-group-view-background-color: var(--pnl-panel);--dv-tabs-and-actions-container-background-color: var(--pnl-panel);--dv-tabs-container-scrollbar-color: var(--pnl-border);--dv-activegroup-visiblepanel-tab-background-color: var(--pnl-elevated);--dv-activegroup-hiddenpanel-tab-background-color: transparent;--dv-inactivegroup-visiblepanel-tab-background-color: var(--pnl-surface);--dv-inactivegroup-hiddenpanel-tab-background-color: transparent;--dv-activegroup-visiblepanel-tab-color: var(--pnl-text);--dv-activegroup-hiddenpanel-tab-color: var(--pnl-muted);--dv-inactivegroup-visiblepanel-tab-color: var(--pnl-muted);--dv-inactivegroup-hiddenpanel-tab-color: var(--pnl-muted);--dv-separator-border: transparent;--dv-paneview-header-border-color: var(--pnl-border);--dv-tab-divider-color: transparent;--dv-drag-over-background-color: color-mix(in srgb, var(--pnl-accent) 18%, transparent);--dv-drag-over-border-color: var(--pnl-accent);--dv-tabs-and-actions-container-height: var(--pnl-tab);--dv-tabs-and-actions-container-font-size: 12px}.pnl-dockview .dv-tabs-container{padding-left:var(--pnl-gutter)}.pnl-dockview .dv-tab{display:flex;align-items:center;border-radius:var(--pnl-radius);margin:6px 2px;padding:0 4px;transition:background-color .12s ease}.pnl-dockview .dv-tab>.dv-react-part{display:flex;align-items:center;min-width:0}.pnl-dockview .dv-tab .dv-default-tab{min-width:0}.pnl-dockview .dv-tab:hover{background-color:var(--pnl-surface)}.pnl-dockview .dv-default-tab{height:100%;padding:0 4px}.pnl-dockview .dv-default-tab-action{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border-radius:9999px;background-color:transparent;transition:background-color .12s ease,color .12s ease}.pnl-dockview .dv-default-tab-action:hover{background-color:var(--pnl-elevated);color:var(--pnl-text)}:where(.pnl-root){--pnl-rail: 48px;--pnl-rail-button: 36px;--pnl-rail-inset: 14px;--pnl-gutter: 6px;--pnl-header: 40px;--pnl-tab: 40px;--pnl-radius: 6px;--pnl-radius-sm: 4px;--pnl-font-size: 13px;--pnl-chassis: #2b2d30;--pnl-panel: #191a1c;--pnl-surface: #202124;--pnl-elevated: #3c3f44;--pnl-border: #34363a;--pnl-text: #dfe1e5;--pnl-muted: #91959b;--pnl-accent: #346ef2;--pnl-accent-text: #ffffff}.pnl-root{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--pnl-chassis);color:var(--pnl-text);font-size:var(--pnl-font-size)}.pnl-root *,.pnl-root *:before,.pnl-root *:after{box-sizing:border-box}@media(prefers-color-scheme:light){:where(.pnl-root:not([data-pnl-theme=dark])){--pnl-chassis: #dcdde1;--pnl-panel: #ffffff;--pnl-surface: #f2f3f6;--pnl-elevated: #e4e6ea;--pnl-border: #c9cbd1;--pnl-text: #1f2124;--pnl-muted: #5c6066}}:where(.pnl-root[data-pnl-theme=light]){--pnl-chassis: #dcdde1;--pnl-panel: #ffffff;--pnl-surface: #f2f3f6;--pnl-elevated: #e4e6ea;--pnl-border: #c9cbd1;--pnl-text: #1f2124;--pnl-muted: #5c6066}.pnl-middle{display:flex;flex:1;min-height:0}.pnl-columns{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;padding-block:var(--pnl-gutter)}.pnl-row{display:flex;flex:1;min-height:0}.pnl-stack{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.pnl-centre{flex:1;min-width:0}.pnl-rail{display:flex;flex-direction:column;flex-shrink:0;align-items:center;justify-content:space-between;width:var(--pnl-rail);padding-block:var(--pnl-gutter)}.pnl-rail__group{display:flex;flex-direction:column;align-items:center;gap:8px}.pnl-rail__button{width:var(--pnl-rail-button);height:var(--pnl-rail-button);border-radius:var(--pnl-radius)}.pnl-zone{display:flex;min-width:0;min-height:0}.pnl-zone--col{flex-direction:column}.pnl-zone--row{flex-direction:row}.pnl-band{display:flex;min-height:0}.pnl-band__half{display:flex;flex-direction:column;min-width:0}.pnl-band__half--even,.pnl-band__half--rest{flex:1}.pnl-surface{display:flex;flex-direction:column;flex-shrink:0;min-height:0;overflow:hidden;border-radius:var(--pnl-radius);background:var(--pnl-panel)}.pnl-surface--fill{flex:1 1 0}.pnl-surface--give{flex-shrink:1}.pnl-body{display:flex;flex:1;flex-direction:column;min-height:0;overflow:auto}.pnl-header{display:flex;flex-shrink:0;align-items:center;gap:8px;height:var(--pnl-header);padding-inline:12px 6px}.pnl-header__title{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.pnl-header__title--fixed{flex-shrink:0}.pnl-header__actions{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;margin-left:auto}.pnl-header__actions--fill{flex:1;margin-left:0}.pnl-header__trailing{display:flex;flex-shrink:0;align-items:center;gap:2px}.pnl-icon-button{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:6px;width:28px;height:28px;padding:0;border:none;border-radius:var(--pnl-radius-sm);background:transparent;color:var(--pnl-muted);cursor:pointer;transition:background-color .12s ease,color .12s ease}.pnl-icon-button:hover:not(:disabled){background:var(--pnl-elevated);color:var(--pnl-text)}.pnl-icon-button:disabled{opacity:.4;cursor:not-allowed}.pnl-icon-button--active{background:var(--pnl-elevated);color:var(--pnl-text)}.pnl-icon-button--accented,.pnl-icon-button--accented:hover:not(:disabled){background:var(--pnl-accent);color:var(--pnl-accent-text)}.pnl-icon-button--header{width:24px;height:24px}.pnl-icon-button__glyph{display:inline-flex;align-items:center;justify-content:center}.pnl-separator{display:block;flex-shrink:0;background:var(--pnl-border)}.pnl-separator--vertical{width:1px;height:16px;margin-inline:4px}.pnl-separator--horizontal{width:80%;height:1px;margin-block:4px}.pnl-handle{flex-shrink:0;background:transparent;border:none;touch-action:none;user-select:none;-webkit-user-select:none}.pnl-handle--col{width:var(--pnl-gutter);height:100%;cursor:col-resize}.pnl-handle--row{width:100%;height:var(--pnl-gutter);cursor:row-resize}.pnl-handle:focus-visible{background:var(--pnl-accent);outline:none}

package/llms-full.txt

@@ -88,7 +88,7 @@ usual missing piece.
 `components` `theme` `className`
 
 ### `<Panel>` props
-`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?`
+`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?` `fillActions?`
 
 ### Hooks
 - `usePanels<Id>()` → `{ panels, reveal, close, toggle, isShown, focusedZone, reset }`
@@ -449,6 +449,15 @@ arrangement nobody remembers making, is not a restoration.
 
 `solo` only applies to `primary`.
 
+## `fillActions`
+
+A panel in a horizontal zone gets the header's free width for its actions — right for a montage
+bar, wrong for a band holding a list with two buttons. Say which yours is:
+
+```tsx
+<Panel id="problems" zone="bottomRight" title="Problems" fillActions={false} actions={…}>
+```
+
 ## Adding and removing panels
 
 The registry follows your JSX, in the order you declare it. A panel that stops being declared

package/llms.txt

@@ -88,7 +88,7 @@ usual missing piece.
 `components` `theme` `className`
 
 ### `<Panel>` props
-`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?`
+`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?` `fillActions?`
 
 ### Hooks
 - `usePanels<Id>()` → `{ panels, reveal, close, toggle, isShown, focusedZone, reset }`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pasquelin/panels",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Châssis à panneaux React : rails d'icônes, zones redimensionnables, centre libre. Headless + composants par défaut, entièrement surchargeable.",
   "type": "module",
   "packageManager": "pnpm@11.16.0",