@pasquelin/panels 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/core/store.d.ts +14 -2
- package/dist/index.d.ts +0 -1
- package/dist/styles.cjs +1 -0
- package/dist/styles.css +1 -1
- package/dist/styles.d.ts +11 -0
- package/dist/styles.js +1 -0
- package/llms-full.txt +3 -3
- package/llms.txt +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @pasquelin/panels
|
|
2
2
|
|
|
3
|
-
**[Live demo ↗](https://pasquelin.github.io/
|
|
3
|
+
**[Live demo ↗](https://pasquelin.github.io/panels/)** · **[Documentation 🇫🇷](docs/fr/README.md)** · **[Documentation 🇬🇧](docs/en/README.md)** · MIT
|
|
4
4
|
|
|
5
5
|
A React panel chassis: icon rails on the edges, resizable zones around a free centre, and a
|
|
6
6
|
layout that survives a reload.
|
|
@@ -125,7 +125,7 @@ project's panels come from — a router, a state machine, a config — is that p
|
|
|
125
125
|
|
|
126
126
|
## Examples
|
|
127
127
|
|
|
128
|
-
All four run at **[pasquelin.github.io/
|
|
128
|
+
All four run at **[pasquelin.github.io/panels](https://pasquelin.github.io/panels/)**, or locally:
|
|
129
129
|
|
|
130
130
|
```bash
|
|
131
131
|
pnpm dev
|
package/dist/core/store.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { type StoreApi } from 'zustand/vanilla';
|
|
2
1
|
import { type Lengths, type OpenByZone, type PanelSpec, type Slot, type Zone, type ZoneSlots } from './types';
|
|
3
2
|
export type PanelsState<Id extends string = string> = {
|
|
4
3
|
/** Panels declared by the project, in the order they mounted. The rail reads this. */
|
|
@@ -41,7 +40,20 @@ export type PanelsState<Id extends string = string> = {
|
|
|
41
40
|
fit: (width: number, height: number) => void;
|
|
42
41
|
reset: () => void;
|
|
43
42
|
};
|
|
44
|
-
|
|
43
|
+
/**
|
|
44
|
+
* The store, as consumers see it.
|
|
45
|
+
*
|
|
46
|
+
* 🛑 Declared here rather than re-exported from zustand. zustand is BUNDLED into `dist/`, so a
|
|
47
|
+
* consumer has no such package installed — a declaration naming `zustand/vanilla` failed their
|
|
48
|
+
* typecheck with TS2307, on a package that advertises no dependencies. Four methods is the whole
|
|
49
|
+
* surface, and writing them out is what "the consumer never sees zustand" actually means.
|
|
50
|
+
*/
|
|
51
|
+
export type PanelsStore<Id extends string = string> = {
|
|
52
|
+
getState: () => PanelsState<Id>;
|
|
53
|
+
getInitialState: () => PanelsState<Id>;
|
|
54
|
+
setState: (partial: Partial<PanelsState<Id>> | ((state: PanelsState<Id>) => Partial<PanelsState<Id>>), replace?: false) => void;
|
|
55
|
+
subscribe: (listener: (state: PanelsState<Id>, previous: PanelsState<Id>) => void) => () => void;
|
|
56
|
+
};
|
|
45
57
|
/**
|
|
46
58
|
* A panel by its id. Exported because four sites had written this same lookup for want of it,
|
|
47
59
|
* and one of them had already drifted on how it treated `undefined`. It is also the single place
|
package/dist/index.d.ts
CHANGED
package/dist/styles.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
package/dist/styles.css
CHANGED
|
@@ -1 +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-
|
|
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}
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The stylesheet, as an entry point of its own.
|
|
3
|
+
*
|
|
4
|
+
* 🛑 Imported from `index.ts` instead, `tsc` carried `import './styles/panels.css'` into the
|
|
5
|
+
* published declaration — where that path does not exist, so a consumer typechecking without
|
|
6
|
+
* `skipLibCheck` got TS2882 on a package that had just installed cleanly.
|
|
7
|
+
*
|
|
8
|
+
* Here, the emitted declaration is empty and nothing leaks. Consumers import
|
|
9
|
+
* `@pasquelin/panels/styles.css`, which is what the documentation already told them to do.
|
|
10
|
+
*/
|
|
11
|
+
import './styles/panels.css';
|
package/dist/styles.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/llms-full.txt
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
> types). Icon rails on the edges, five resizable zones around a free centre, a layout that
|
|
5
5
|
> survives a reload. **Headless underneath, repaintable on top** — the components are built on
|
|
6
6
|
> hooks that render nothing, and every visual value is a CSS custom property.
|
|
7
|
-
> MIT. Live: https://pasquelin.github.io/
|
|
7
|
+
> MIT. Live: https://pasquelin.github.io/panels/
|
|
8
8
|
|
|
9
9
|
## Mental model (read this first)
|
|
10
10
|
|
|
@@ -155,7 +155,7 @@ README
|
|
|
155
155
|
|
|
156
156
|
# @pasquelin/panels
|
|
157
157
|
|
|
158
|
-
**[Live demo ↗](https://pasquelin.github.io/
|
|
158
|
+
**[Live demo ↗](https://pasquelin.github.io/panels/)** · **[Documentation 🇫🇷](docs/fr/README.md)** · **[Documentation 🇬🇧](docs/en/README.md)** · MIT
|
|
159
159
|
|
|
160
160
|
A React panel chassis: icon rails on the edges, resizable zones around a free centre, and a
|
|
161
161
|
layout that survives a reload.
|
|
@@ -280,7 +280,7 @@ project's panels come from — a router, a state machine, a config — is that p
|
|
|
280
280
|
|
|
281
281
|
## Examples
|
|
282
282
|
|
|
283
|
-
All four run at **[pasquelin.github.io/
|
|
283
|
+
All four run at **[pasquelin.github.io/panels](https://pasquelin.github.io/panels/)**, or locally:
|
|
284
284
|
|
|
285
285
|
```bash
|
|
286
286
|
pnpm dev
|
package/llms.txt
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
> types). Icon rails on the edges, five resizable zones around a free centre, a layout that
|
|
5
5
|
> survives a reload. **Headless underneath, repaintable on top** — the components are built on
|
|
6
6
|
> hooks that render nothing, and every visual value is a CSS custom property.
|
|
7
|
-
> MIT. Live: https://pasquelin.github.io/
|
|
7
|
+
> MIT. Live: https://pasquelin.github.io/panels/
|
|
8
8
|
|
|
9
9
|
## Mental model (read this first)
|
|
10
10
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pasquelin/panels",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Châssis à panneaux React : rails d'icônes, zones redimensionnables, centre libre. Headless + composants par défaut, entièrement surchargeable.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@11.16.0",
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
"author": "Alban Pasquelin <alban.pasquelin@gmail.com>",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "git+https://github.com/pasquelin/
|
|
11
|
+
"url": "git+https://github.com/pasquelin/panels.git"
|
|
12
12
|
},
|
|
13
|
-
"homepage": "https://github.com/pasquelin/
|
|
14
|
-
"bugs": "https://github.com/pasquelin/
|
|
13
|
+
"homepage": "https://github.com/pasquelin/panels#readme",
|
|
14
|
+
"bugs": "https://github.com/pasquelin/panels/issues",
|
|
15
15
|
"publishConfig": {
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|