@pasquelin/panels 0.3.0 → 0.3.2

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

@@ -597,6 +597,12 @@ follows your declarations rather than freezing an answer.
 
 Focus and the solo stash are session state and are deliberately not written down.
 
+**When it is written:** at most once every 250 ms, then when the chassis unmounts and when the
+page is hidden. A drag changes the sizes on every frame, and `localStorage` is synchronous — so
+the writes are held rather than made, and one carries the latest state. A custom `write` is
+therefore called rarely, and reading the storage right after an action may find it not written
+yet.
+
 A custom store is two functions:
 
 ```ts
@@ -913,6 +919,8 @@ What the chassis does for you:
 - every panel is a `<section>` named by its title
 - every handle is a `role="separator"` with `aria-orientation`, `aria-valuenow` and its bounds,
   focusable and driven by the arrow keys
+- a handle takes the main button of the primary pointer and nothing else, and keeps the gesture
+  on touch rather than letting the page scroll
 - the focus ring is visible and `prefers-reduced-motion` is respected
 
 What is yours: the contrast of your palette, and the accessible names of whatever you put inside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pasquelin/panels",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",