@n-uf/placement 26.11.5 → 26.11.7

package/CHANGELOG.md

@@ -3,6 +3,61 @@
 Versions are calendar versions, `YY.M.R` (year, month of the release, counter within the month), shared with
 `@n-uf/motion`: both packages carry the same version, and a release bumps both.
 
+## 26.11.7
+
+- New entry `@n-uf/placement/panels`: tool panels with string ids, as an app's side columns work. `./dock` is
+  unchanged.
+  - Model: `PanelDef` (width limits, float size limits, the sides it may dock on, whether it may float; no title:
+    words are the consumer's),
+    `PanelsState` (`sides` of full-height `Column`s from the outer edge inward, `floats`, `folded`, `kept`,
+    `closed`, a logical `clock` of opened and used), `createPanels(defs, start)`.
+  - `layoutPanels(defs, state, stage, options?)`: geometry and structure only. Each panel's rect, layer, `kind`
+    (`column`, `bar`, `segment`, `float`), folded, kept and pinned flags; the columns; the rails; the pages' rect;
+    notes as a `code` plus data (`column-shrunk`, `column-folded`, `kept-folded`, `pages-under-min`,
+    `float-resized`, `float-clamped`). Options: `giveWay` (`{ order: "oldest" | "newest", by: "used" | "opened" }`,
+    default oldest by use), `floats` (`"clamp"` or `"free"`), `floatVisible`, `pagesMin`, `view` (the page's offset
+    and scale), and the chrome sizes `bar`, `rail`, `segment`, `railInset`.
+  - Give-way shrinks every column toward its minimum, then folds whole columns to the rail: unkept columns first, in
+    policy order across both sides, then columns holding a kept panel, only when the pages still don't fit. It never
+    writes `folded`, so a wider stage brings a column back.
+  - Floats clamp at layout time (the state keeps the stored rect) so their screen rect stays in the view at any
+    scale: a pinned float where it is, an unpinned one as it shows at pan 0, so it still scrolls with the page.
+  - Changes: `open`, `close`, `focus`, `toggleFold`, `keep`, `dock`, `float`, `pin` (with `shown`, a clamped float
+    pins where it shows), `resizeColumn`, `resizeFloat`, `liftPanel`. Opening, focusing, moving, resizing and
+    unfolding are uses (they move the `used` clock). `samePlaces(a, b, defs?)` compares widths as laid out;
+    `columnWidth(defs, column)`.
+  - Targets: `panelTargets(input)` (`column:<side>:<i>`, `into:<side>:<i>`, `rail:<side>`, `float`) in the shape
+    `@n-uf/motion/drag` takes, each with a structured `place` and no words; a place the panel may not take and its
+    own place are no targets. `panelDrop(input, target, point, grab)` lays out a drop. `homePlace`, `panelStops`.
+  - `storePanels(state)` / `readPanels(data, defs?)`: a versioned stored form (`{ v: 1, … }`); reading never throws,
+    drops unknown or repeated ids and clamps to the defs. Version 1 only gains optional fields: a field the reader
+    doesn't know is skipped and listed in `dropped`.
+- `@n-uf/placement/targets`: `keyboardStops` also takes panel targets (with `{ home: { place, state }, floats? }`)
+  and gives panel stops in reading order.
+
+## 26.11.6
+
+- `@n-uf/placement/targets`:
+  - `keyboardStops(targets, { home?, floats? })`: a group's places in one list in reading order (hosts title, top,
+    left, right, bottom; zones start, centre, end; each insertion point in order), with its own place as a `home`
+    stop when given and floating last only when asked. Each stop has the target id, a label, its place and the
+    arrangement a move there makes: one list for the arrow keys and a "Move to" menu, no parsing of target ids.
+  - Host targets carry their `slot`: the group's rect in the host once it lands there. `hostAfter(arrangement)`
+    says where the host is then, when it grows or appears; default: as it is now.
+  - `allows(group, place | "float")` in `hostTargets`' input: a place it refuses is no target. Its `place.index`
+    counts the groups there without the dragged one (as `insertGroup` does). For floating, the same rule decides
+    whether you add `floatTarget` at all: `...(allows(g, "float") ? [floatTarget(input)] : [])`.
+- `@n-uf/placement/toolbar`:
+  - `HostSpec.keep`: a per-group keep priority (default 0). When room runs out, a lower keep collapses first;
+    among equal keeps the trailing end still goes first, so a primary group at the end can stay open. `HostSpec`
+    takes the group id type.
+  - `storeArrangement(arrangement)` / `readArrangement(data, groups?)`: a versioned stored form (`{ v: 1, hosts,
+    collapsed, floating }`). Reading parsed data gives `{ ok: true, arrangement }` or `{ ok: false, error }`, never a
+    throw: an unknown version, a missing host or zone, a value of the wrong kind, a group in two places, an unknown
+    group. An arrangement lacking some known groups reads fine; place those with `resetGroup` or `dockGroup`.
+- New exports: the types `FloatTargetInput`, `Allows`, `KeyboardStop`, `KeyboardStopsOptions` and the constant
+  `HOST_READING_ORDER`. `ToolbarTarget.slot` is a required field, so hand-built targets (fixtures, mocks) add it.
+
 ## 26.11.5
 
 - `@n-uf/placement/targets`: `paneZone(rect, point, previous, options?)`, a pane's five drop zones: the centre

package/README.md

@@ -7,6 +7,8 @@
 >
 > Version numbers are dates (YY.M.R), not semantic versions, so any release may break things. Pin an exact version and read the [CHANGELOG](https://github.com/n-uf/motion/blob/main/packages/placement/CHANGELOG.md) before you upgrade.
 
+Site and live demos: [motion.n-uf.com](https://motion.n-uf.com)
+
 Where things go. State in, rects and drop targets out: a desk of docks, rails and palettes, toolbar groups in hosts
 and zones, and the drop targets for each. A tiling entry (a split tree with ratios, groups and workspaces) is
 planned. Pure functions over plain data: no DOM,
@@ -20,17 +22,21 @@ Its sibling [`@n-uf/motion`](https://www.npmjs.com/package/@n-uf/motion) owns ho
 without importing each other: a target list from `@n-uf/placement/targets` is exactly what
 `@n-uf/motion/drag`'s drag intent takes, and a rect from any layout here is what `@n-uf/motion/layout` glides to.
 
-- **`@n-uf/placement`**: the shapes (`Rect`, `Size`, `Point`) and a popup positioner (anchor, gravity, offset,
-  then flip, slide, resize, as Wayland's xdg-positioner).
+- **`@n-uf/placement`**: the shapes (`Rect`, `Size`, `Point`) and a popup positioner, as Wayland's xdg-positioner: an anchor
+  point, gravity and offset, then flip, slide and resize, each only when the rule allows it.
 - **`/dock`**: a desk of documents and tool panels. Side docks and a bottom dock (between the side docks or across
   the full width), rails, natural-height sections whose last one takes the rest, fold and unfold, the give-way
   rules (sections fold least recently used first, docks fold to their rails), floating palettes with corner stacks,
   tear-off and dock-back; and nine constructions built from these parts, as presets (`createDesk`).
 - **`/toolbar`**: toolbar groups in five hosts (title, top, bottom, left, right) and three zones (start, centre,
-  end), floating groups, insertion points (before all, between, after all, an empty zone), trailing-first overflow,
-  and "own place is home".
-- **`/targets`**: drop targets (`{ id, priority, hit, slot?, label?, free? }`) for the desk's constructions and
-  toolbar hosts.
+  end), floating groups, insertion points (before all, between, after all, an empty zone), collapse when a host
+  runs out of room (lowest keep first, trailing groups first among equal keeps), and "own place is home".
+- **`/targets`**: drop targets (`{ id, priority, hit, slot?, label?, free? }`) for the desk's constructions,
+  toolbar hosts (each with its `slot`, and `allows` to leave out places a group may not take) and pane zones; and
+  `keyboardStops`, one ordered list of places for the arrow keys and a "Move to" menu.
+- **`/panels`**: tool panels with string ids: full-height columns per side, each with its own width; folding to a
+  title bar or a rail; give-way by age when the pages run out of room; resizable floats, some pinned to the view;
+  their drop targets; and a stored form.
 
 Rendering stays in the app: it draws the rects, measures its groups, and feeds pointer samples to a drag intent.
 
@@ -84,8 +90,26 @@ const a = arrangement({ top: { start: ["file", "edit"], end: ["share"] } });
 const size = (_id: string, _vertical: boolean, collapsed: boolean) => ({ along: collapsed ? 30 : 120, across: 28 });
 const top = layoutHost(a.top, "top", { length: 320, thickness: 34, lead: 8, tail: 8 }, size);
 console.log(top.overflow); // [ 'share' ]
+
+// A primary group keeps its full form longest: a higher keep folds later (equal keeps fold from the trailing end).
+const kept = layoutHost(a.top, "top", { length: 320, thickness: 34, lead: 8, tail: 8, keep: { share: 1 } }, size);
+console.log(kept.overflow); // [ 'edit' ]
+```
+
+An arrangement is stored as versioned plain data; reading it back never throws:
+
+```ts
+import { arrangement, readArrangement, storeArrangement } from "@n-uf/placement/toolbar";
+
+const saved = JSON.stringify(storeArrangement(arrangement({ top: { start: ["file", "edit"] } }))); // { "v": 1, "hosts": … }
+console.log(readArrangement(JSON.parse(saved)).ok); // true
+console.log(readArrangement({ v: 9 })); // { ok: false, error: 'unknown version 9 (this reads version 1)' }
 ```
 
+`readArrangement` takes parsed data, not the string. It accepts an arrangement that lacks some of your groups (one
+stored before you added a group, say): place each missing group yourself, with `resetGroup(read, group, defaults)`
+to put it where your default arrangement has it, or `dockGroup` for a group that floated.
+
 ## Drop targets
 
 ```ts
@@ -106,7 +130,118 @@ console.log(drop.label, drop.slot.x, drop.slot.y); // Float here 580 290
 ```
 
 A toolbar group's targets come from `hostTargets` (a host's lines and empty zones, with its own place left out and
-returned as `own`, for the drag's home) and `floatTarget`.
+returned as `own`, for the drag's home) and `floatTarget`. Each host target carries its `slot`, the group's rect
+once it lands there; `allows(group, place)` leaves out places a group may not go (its `place.index` counts the
+groups there without the dragged one, as `insertGroup` does). The same rule says whether a group may float: add
+`floatTarget` only when `allows(group, "float")`. `keyboardStops` puts the targets in reading order (title, top,
+left, right, bottom; start, centre, end) for the arrow keys and a "Move to" menu, with the group's own place as
+`home`:
+
+```ts
+import { floatTarget, hostTargets, keyboardStops } from "@n-uf/placement/targets";
+import { arrangement, hostOf, type Place } from "@n-uf/placement/toolbar";
+
+const a = arrangement({ top: { start: ["file", "edit"], end: ["share"] } });
+const size = (_id: string, _vertical: boolean, collapsed: boolean) => ({ along: collapsed ? 30 : 120, across: 28 });
+const allows = (g: string, place: Place | "float") => g !== "share" || (place !== "float" && place.host === "top"); // share stays in the top bar
+const top = { origin: { x: 0, y: 40 }, spec: { length: 800, thickness: 34, lead: 8, tail: 8 } };
+const { targets } = hostTargets({ group: "share", arrangement: a, host: "top", ...top, size, allows });
+console.log(targets[0]!.slot); // { x: 8, y: 43, width: 120, height: 28 }
+// Floating, by the same rule: share may not float, so it gets no float target.
+const stage = { x: 0, y: 80, width: 800, height: 500 };
+const all = [...targets, ...(allows("share", "float") ? [floatTarget({ group: "share", arrangement: a, stage, width: 120, height: 28 })] : [])];
+console.log(all.length === targets.length); // true
+const stops = keyboardStops(targets, { home: { place: hostOf(a, "share")!, arrangement: a } });
+console.log(stops.map((s) => (s.home ? "home" : s.id))); // [ 'g:top:start:0', 'g:top:start:1', 'g:top:start:2', 'g:top:center:0', 'home' ]
+```
+
+## Panels
+
+`@n-uf/placement/panels` lays out tool panels the way an app's side columns work: each side holds full-height
+columns from the outer edge inward, each column one or more panels and its own width (clamped to its panels'
+`min` and `max`). A panel folded by hand is a title bar; a column whose panels are all folded becomes segments of
+its side's rail. Panels may float instead, in page space (they move with the page's offset and scale) or pinned to
+the view. The output is geometry and structure only: each panel's rect, layer, `kind` (`column`, `bar`, `segment`,
+`float`) and its folded, kept and pinned flags, the columns, the rails, the pages' rect and coded notes. Chrome sizes
+(`bar`, `rail`, `segment`) are options.
+
+```ts
+import { createPanels, keep, layoutPanels, readPanels, storePanels, type PanelDef } from "@n-uf/placement/panels";
+
+const defs: PanelDef[] = [
+  { id: "files", width: { min: 180, natural: 220, max: 360 } },
+  { id: "outline", width: { min: 160, natural: 200, max: 320 } },
+  { id: "notes", width: { min: 200, natural: 260, max: 420 } },
+];
+// Files was used first, so it is the oldest.
+const state = createPanels(defs, { left: [["files"], ["outline"]], right: [["notes"]] });
+const narrow = layoutPanels(defs, state, { width: 780, height: 600 });
+console.log(narrow.notes.map((n) => n.code), narrow.items.get("files")!.kind); // [ 'column-shrunk', 'column-folded' ] segment
+const kept = layoutPanels(defs, keep(state, "files", true), { width: 780, height: 600 });
+console.log(kept.items.get("files")!.kind, kept.items.get("outline")!.kind); // column segment
+const read = readPanels(JSON.parse(JSON.stringify(storePanels(state))), defs);
+console.log(read.ok); // true
+```
+
+**Give-way** (`options.giveWay`, default `{ order: "oldest", by: "used" }`): when the open columns, the rails and
+`pagesMin` (default 320) don't fit the stage width, columns shrink toward their `min`, then whole columns fold to the
+rail, in the policy's order, until the pages fit. A column's age is its newest panel's (`used` counts opening,
+focusing, moving, resizing and unfolding; `opened` only opening). Ties go to the outer column, then the left side.
+Every column shrinks before any folds; then the unkept columns fold before any column holding a kept panel
+(`keep(state, id, true)`), each group in the policy's order across both sides. When only kept columns are left and the
+pages still don't fit, they fold too. Give-way never writes `folded`, so widening the stage brings a column back.
+
+**Floats** (`options.floats`, default `"clamp"`): a float that fits the view stays wholly inside it; one that doesn't
+even at its minimum size keeps its title bar and `floatVisible` (default 48) px of its width in the view. A float's
+size is screen px and never scales. A pinned float is clamped where it is; an unpinned one has its page-space position
+clamped so that its screen rect at pan 0 fits the view, so it still scrolls with the page. The clamp runs at layout
+time and the state keeps the stored rect, so a larger view brings a float back where it was. `"free"` never moves a
+float.
+
+**Changes** are pure: `open`, `close`, `focus`, `toggleFold`, `keep`, `dock(state, id, side, index, { into?, width? })`,
+`float`, `pin(state, id, on, view?, shown?)` (pass the layout's rect as `shown` so a clamped float pins where it
+shows), `resizeColumn`, `resizeFloat`.
+
+**Drop targets**: `panelTargets({ defs, state, id, stage, options?, allows? })` gives `column:<side>:<i>` (a new
+column as wide as the panel's own width), `into:<side>:<i>` (stack into a column), `rail:<side>` (dock folded) and
+`float` (free), in the shape `@n-uf/motion/drag`'s `createDragIntent` takes. Each carries a structured `place`, not
+words. A place the panel may not take (its def's `sides` and `floats`, or `allows`) and its own place are no targets.
+`panelDrop(input, target, point, grab)` lays out the drop: its `slot` is where the panel lands. `keyboardStops` from
+`@n-uf/placement/targets` puts panel targets in reading order, with `homePlace(state, id)` as `home`:
+
+```ts
+import { createPanels, homePlace, panelDrop, panelTargets, type PanelDef } from "@n-uf/placement/panels";
+import { keyboardStops } from "@n-uf/placement/targets";
+
+const defs: PanelDef[] = [
+  { id: "files", width: { min: 180, natural: 220, max: 360 } },
+  { id: "outline", width: { min: 160, natural: 200, max: 320 }, floats: false },
+];
+const state = createPanels(defs, { left: [["files"], ["outline"]] });
+const input = { defs, state, id: "outline", stage: { width: 1200, height: 600 } };
+const targets = panelTargets(input); // hand these to createDragIntent
+console.log(targets.map((t) => t.id)); // [ 'rail:left', 'column:left:0', 'into:left:0', 'column:right:0', 'rail:right' ]
+const drop = panelDrop(input, targets[3]!, { x: 1190, y: 300 }, { x: 0, y: 0 });
+console.log(drop.slot); // { x: 1000, y: 0, width: 200, height: 600 }
+const stops = keyboardStops(targets, { home: { place: homePlace(state, "outline")!, state } });
+console.log(stops.map((s) => (s.home ? "home" : s.id))); // [ 'rail:left', 'column:left:0', 'into:left:0', 'home', 'column:right:0', 'rail:right' ]
+```
+
+`storePanels(state)` gives `{ v: 1, sides, floats, folded, kept, closed, clock }`; `readPanels(data, defs?)` reads
+parsed data back and never throws. Anything but an object of version 1 is `{ ok: false, error }`; inside one, unknown
+or repeated ids and malformed entries are dropped and listed in `dropped`, and widths and float sizes are clamped to
+the defs. Version 1 only gains optional fields: a field this reader doesn't know is skipped and listed in `dropped`
+too (`"theme"`, `"sides.bottom"`, `"column.<field>"`, `"float.<field>"`, `"clock.<id>"`). The note codes
+(`PanelsNoteCode`):
+
+| Code | Says | Also |
+|---|---|---|
+| `column-shrunk` | a column narrowed toward its minimum | `side`, `column`, `items`, `from`, `to` |
+| `column-folded` | a column folded to its side's rail | `side`, `column`, `items` |
+| `kept-folded` | a kept column folded: the pages needed the room | `side`, `column`, `items` |
+| `pages-under-min` | the pages are under `pagesMin` with every column folded | `width`, `min` |
+| `float-resized` | a float shrank to fit the view | `items` |
+| `float-clamped` | a float moved to stay in the view | `items` |
 
 ## Pane zones
 

package/dist/chunk-NNFNMIW4.js

@@ -0,0 +1,412 @@
+import {
+  rect
+} from "./chunk-QMTNB2C3.js";
+
+// src/panels/model.ts
+var SIDES = ["left", "right"];
+var IDENTITY_VIEW = { x: 0, y: 0, scale: 1 };
+var DEFAULT_PANELS_OPTIONS = {
+  giveWay: { order: "oldest", by: "used" },
+  floats: "clamp",
+  floatVisible: 48,
+  pagesMin: 320,
+  view: IDENTITY_VIEW,
+  bar: 28,
+  rail: 36,
+  segment: 36,
+  railInset: 4
+};
+var FLOAT_HEIGHT = 360;
+var FLOAT_MIN = { width: 160, height: 120 };
+var without = (list, x) => list.filter((y) => y !== x);
+var withOnce = (list, x) => list.includes(x) ? [...list] : [...list, x];
+function whereIs(state, id) {
+  for (const side of SIDES) {
+    const index = state.sides[side].findIndex((c) => c.panels.includes(id));
+    if (index >= 0) return { kind: "column", side, index };
+  }
+  const float2 = state.floats.find((f) => f.id === id);
+  return float2 ? { kind: "float", float: float2 } : { kind: "none" };
+}
+var tick = (state) => Object.values(state.clock).reduce((m, c) => Math.max(m, c.opened, c.used), 0) + 1;
+var bump = (state, id, opened) => {
+  const t = tick(state);
+  const was = state.clock[id] ?? { opened: 0, used: 0 };
+  return { ...state, clock: { ...state.clock, [id]: { opened: opened ? t : was.opened, used: t } } };
+};
+var defOf = (defs, id) => defs.find((d) => d.id === id);
+function floatSize(def) {
+  if (def?.float) return { min: def.float.min, natural: def.float.natural };
+  const width = Math.max(FLOAT_MIN.width, def?.width.natural ?? FLOAT_MIN.width);
+  return { min: FLOAT_MIN, natural: { width, height: FLOAT_HEIGHT } };
+}
+function ownWidth(defs, state, id) {
+  const def = defOf(defs, id);
+  const w = whereIs(state, id);
+  const lo = def?.width.min ?? 0;
+  const hi = Math.max(lo, def?.width.max ?? Infinity);
+  if (w.kind === "column") return Math.min(Math.max(state.sides[w.side][w.index].width, lo), hi);
+  return def?.width.natural ?? lo;
+}
+function createPanels(defs, start) {
+  const column = (ids) => {
+    const ds = ids.map((id) => defOf(defs, id));
+    const lo = Math.max(0, ...ds.map((d) => d?.width.min ?? 0));
+    const hi = Math.max(lo, Math.min(...ds.map((d) => d?.width.max ?? Infinity)));
+    const natural = Math.max(0, ...ds.map((d) => d?.width.natural ?? 0));
+    return { panels: [...ids], width: Math.min(Math.max(natural, lo), hi) };
+  };
+  const floats = (start.floats ?? []).map((f) => {
+    const n = floatSize(defOf(defs, f.id)).natural;
+    return { id: f.id, rect: { x: f.x, y: f.y, width: f.width ?? n.width, height: f.height ?? n.height }, ...f.pinned ? { pinned: true } : {} };
+  });
+  const sides = { left: (start.left ?? []).map(column), right: (start.right ?? []).map(column) };
+  const order = [...sides.left, ...sides.right].flatMap((c) => c.panels).concat(floats.map((f) => f.id));
+  const clock = {};
+  order.forEach((id, i) => clock[id] = { opened: i + 1, used: i + 1 });
+  return { sides, floats, folded: [...start.folded ?? []], kept: [...start.kept ?? []], closed: [...start.closed ?? []], clock };
+}
+function liftPanel(state, id) {
+  const lift = (cols) => cols.map((c) => ({ ...c, panels: without(c.panels, id) })).filter((c) => c.panels.length > 0);
+  return { ...state, sides: { left: lift(state.sides.left), right: lift(state.sides.right) }, floats: state.floats.filter((f) => f.id !== id) };
+}
+function open(state, id, at) {
+  let s = { ...state, closed: without(state.closed, id) };
+  if (at && whereIs(s, id).kind === "none") s = { ...s, sides: { ...s.sides, [at.side]: [...s.sides[at.side], { panels: [id], width: at.width }] } };
+  return bump(s, id, true);
+}
+var close = (state, id) => ({ ...state, closed: withOnce(state.closed, id), kept: without(state.kept, id) });
+function focus(state, id) {
+  const f = state.floats.find((x) => x.id === id);
+  const s = f ? { ...state, floats: [...state.floats.filter((x) => x !== f), f] } : state;
+  return bump(s, id, false);
+}
+function toggleFold(state, id) {
+  if (state.folded.includes(id)) return bump({ ...state, folded: without(state.folded, id) }, id, false);
+  return { ...state, folded: [...state.folded, id] };
+}
+function keep(state, id, on) {
+  if (!on) return { ...state, kept: without(state.kept, id) };
+  return whereIs(state, id).kind === "column" ? { ...state, kept: withOnce(state.kept, id) } : state;
+}
+function dock(state, id, side, index, options = {}) {
+  const w = whereIs(state, id);
+  const from = w.kind === "column" ? state.sides[w.side][w.index].width : 0;
+  const s = liftPanel(state, id);
+  const cols = [...s.sides[side]];
+  if (options.into && cols[index]) cols[index] = { ...cols[index], panels: [...cols[index].panels, id] };
+  else {
+    const at = Math.max(0, Math.min(index, cols.length));
+    cols.splice(at, 0, { panels: [id], width: options.width ?? from });
+  }
+  return bump({ ...s, sides: { ...s.sides, [side]: cols }, closed: without(s.closed, id) }, id, false);
+}
+function float(state, id, rect2, pinned) {
+  const was = state.floats.find((f2) => f2.id === id);
+  const on = pinned ?? !!was?.pinned;
+  const s = liftPanel(state, id);
+  const f = { id, rect: { ...rect2 }, ...on ? { pinned: true } : {} };
+  return bump({ ...s, floats: [...s.floats, f], kept: without(s.kept, id), closed: without(s.closed, id) }, id, false);
+}
+var toView = (r, v) => ({ ...r, x: v.x + r.x * v.scale, y: v.y + r.y * v.scale });
+var toPage = (r, v) => ({ ...r, x: (r.x - v.x) / v.scale, y: (r.y - v.y) / v.scale });
+function pin(state, id, on, view = IDENTITY_VIEW, shown) {
+  return {
+    ...state,
+    floats: state.floats.map((f) => {
+      if (f.id !== id || !!f.pinned === on) return f;
+      const seen = shown ? { ...shown } : f.pinned ? { ...f.rect } : toView(f.rect, view);
+      return on ? { id, rect: seen, pinned: true } : { id, rect: toPage(seen, view) };
+    })
+  };
+}
+function resizeColumn(state, side, index, width) {
+  const col = state.sides[side][index];
+  if (!col || !Number.isFinite(width)) return state;
+  const t = tick(state);
+  const clock = { ...state.clock };
+  for (const id of col.panels) clock[id] = { opened: clock[id]?.opened ?? 0, used: t };
+  return { ...state, sides: { ...state.sides, [side]: state.sides[side].map((c, i) => i === index ? { ...c, width: Math.max(0, width) } : c) }, clock };
+}
+function resizeFloat(state, id, rect2) {
+  if (!state.floats.some((f) => f.id === id)) return state;
+  return bump({ ...state, floats: state.floats.map((f) => f.id === id ? { ...f, rect: { ...rect2 } } : f) }, id, false);
+}
+function columnWidth(defs, col) {
+  if (!defs) return col.width;
+  const ds = col.panels.map((id) => defOf(defs, id));
+  const lo = Math.max(0, ...ds.map((d) => d?.width.min ?? 0));
+  const hi = Math.max(lo, Math.min(...ds.map((d) => d?.width.max ?? Infinity)));
+  return Math.min(Math.max(Number.isFinite(col.width) ? col.width : lo, lo), hi);
+}
+function samePlaces(a, b, defs) {
+  const cols = (s) => SIDES.map((side) => s.sides[side].map((c) => `${c.panels.join(",")}@${Math.round(columnWidth(defs, c))}`).join("|")).join("\u2016");
+  const fl = (s) => s.floats.map((f) => `${f.id}@${Math.round(f.rect.x)},${Math.round(f.rect.y)},${Math.round(f.rect.width)},${Math.round(f.rect.height)}${f.pinned ? "p" : ""}`).join("|");
+  const set = (l) => [...l].sort().join(",");
+  return cols(a) === cols(b) && fl(a) === fl(b) && set(a.folded) === set(b.folded) && set(a.kept) === set(b.kept) && set(a.closed) === set(b.closed);
+}
+
+// src/panels/layout.ts
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+function giveWayOrder(cols, order) {
+  return [...cols].sort((a, b) => Number(a.kept) - Number(b.kept) || (order === "oldest" ? a.age - b.age : b.age - a.age) || a.index - b.index || SIDES.indexOf(a.side) - SIDES.indexOf(b.side));
+}
+function layoutPanels(defs, state, stage, options = {}) {
+  const opt = { ...DEFAULT_PANELS_OPTIONS, ...options };
+  const W = stage.width;
+  const H = stage.height;
+  const closed = new Set(state.closed);
+  const folded = new Set(state.folded);
+  const kept = new Set(state.kept);
+  const by = opt.giveWay.by;
+  const cols = [];
+  for (const side of SIDES) {
+    state.sides[side].forEach((c, index) => {
+      const panels = c.panels.filter((id) => !closed.has(id));
+      if (panels.length === 0) return;
+      const ds = panels.map((id) => defOf(defs, id));
+      const min = Math.max(0, ...ds.map((d) => d?.width.min ?? 0));
+      const max = Math.max(min, Math.min(...ds.map((d) => d?.width.max ?? Infinity)));
+      const width = clamp(Number.isFinite(c.width) ? c.width : min, min, max);
+      const age = Math.max(...panels.map((id) => state.clock[id]?.[by] ?? 0));
+      cols.push({ side, index, panels, min, max, width, hand: panels.every((id) => folded.has(id)), kept: panels.some((id) => kept.has(id)), age });
+    });
+  }
+  const order = giveWayOrder(
+    cols.filter((c) => !c.hand),
+    opt.giveWay.order
+  );
+  const fit = (k) => {
+    const auto = new Set(order.slice(0, k));
+    const railed = (side) => cols.some((c) => c.side === side && (c.hand || auto.has(c)));
+    const widths = new Map(order.filter((c) => !auto.has(c)).map((c) => [c, c.width]));
+    let excess = [...widths.values()].reduce((a, b) => a + b, 0) + SIDES.filter(railed).length * opt.rail + opt.pagesMin - W;
+    for (const c of order) {
+      if (excess <= 0 || auto.has(c)) continue;
+      const take = Math.min(excess, c.width - c.min);
+      if (take > 0) {
+        widths.set(c, c.width - take);
+        excess -= take;
+      }
+    }
+    return { auto, widths, excess };
+  };
+  let g = fit(0);
+  for (let k = 1; g.excess > 0 && k <= order.length; k++) g = fit(k);
+  const notes = [];
+  for (const c of order) {
+    const w = g.widths.get(c);
+    if (w !== void 0 && w < c.width) notes.push({ code: "column-shrunk", side: c.side, column: c.index, items: c.panels, from: c.width, to: w });
+  }
+  for (const c of order) if (g.auto.has(c)) notes.push({ code: c.kept ? "kept-folded" : "column-folded", side: c.side, column: c.index, items: c.panels });
+  const items = /* @__PURE__ */ new Map();
+  const placedCols = [];
+  const rails = {};
+  let x0 = 0;
+  let x1 = W;
+  for (const side of SIDES) {
+    const mine = cols.filter((c) => c.side === side);
+    const inRail = mine.filter((c) => c.hand || g.auto.has(c));
+    if (inRail.length) {
+      const r = side === "left" ? rect(0, 0, opt.rail, H) : rect(W - opt.rail, 0, opt.rail, H);
+      const segments = inRail.flatMap((c) => c.panels).map((id, i) => ({ id, rect: rect(r.x, opt.railInset + i * opt.segment, opt.rail, opt.segment) }));
+      rails[side] = { side, rect: r, segments };
+      for (const s of segments) {
+        const c = inRail.find((x) => x.panels.includes(s.id));
+        items.set(s.id, { rect: s.rect, kind: "segment", layer: 0, hidden: true, folded: c.hand ? "hand" : "auto", kept: kept.has(s.id), pinned: false, side, column: c.index });
+      }
+      if (side === "left") x0 = opt.rail;
+      else x1 = W - opt.rail;
+    }
+    for (const c of mine) {
+      const w = g.widths.get(c);
+      let r;
+      if (w === void 0) r = rect(side === "left" ? x0 : x1, 0, 0, H);
+      else if (side === "left") {
+        r = rect(x0, 0, w, H);
+        x0 += w;
+      } else {
+        x1 -= w;
+        r = rect(x1, 0, w, H);
+      }
+      placedCols.push({ side, index: c.index, rect: r, width: c.width, min: c.min, max: c.max, folded: c.hand ? "hand" : g.auto.has(c) ? "auto" : null, shrunk: w !== void 0 && w < c.width, kept: c.kept, panels: c.panels });
+      if (w === void 0) continue;
+      const bars = c.panels.filter((id) => folded.has(id)).length;
+      const share = (H - bars * opt.bar) / (c.panels.length - bars);
+      let y = 0;
+      for (const id of c.panels) {
+        const bar = folded.has(id);
+        const h = bar ? opt.bar : share;
+        items.set(id, { rect: rect(r.x, y, r.width, h), kind: bar ? "bar" : "column", layer: 0, hidden: false, folded: bar ? "hand" : null, kept: kept.has(id), pinned: false, side, column: c.index });
+        y += h;
+      }
+    }
+  }
+  const pages = rect(x0, 0, Math.max(0, x1 - x0), H);
+  if (pages.width < opt.pagesMin) notes.push({ code: "pages-under-min", width: pages.width, min: opt.pagesMin });
+  state.floats.forEach((f, i) => {
+    if (closed.has(f.id)) return;
+    const at = f.rect;
+    const k = f.pinned ? 1 : opt.view.scale;
+    const r = { ...at };
+    if (opt.floats === "clamp") {
+      const lim = floatSize(defOf(defs, f.id)).min;
+      r.width = Math.max(lim.width, Math.min(r.width, W));
+      r.height = Math.max(lim.height, Math.min(r.height, H));
+      if (r.width !== at.width || r.height !== at.height) notes.push({ code: "float-resized", items: [f.id] });
+      r.x = r.width <= W ? clamp(r.x, 0, (W - r.width) / k) : clamp(r.x, (opt.floatVisible - r.width) / k, (W - opt.floatVisible) / k);
+      r.y = r.height <= H ? clamp(r.y, 0, (H - r.height) / k) : clamp(r.y, 0, (H - opt.bar) / k);
+      if (r.x !== at.x || r.y !== at.y) notes.push({ code: "float-clamped", items: [f.id] });
+    }
+    const clamped = r.x !== at.x || r.y !== at.y || r.width !== at.width || r.height !== at.height;
+    items.set(f.id, { rect: f.pinned ? r : toView(r, opt.view), kind: "float", layer: 10 + i, hidden: false, folded: null, kept: false, pinned: !!f.pinned, ...clamped ? { clamped: true } : {} });
+  });
+  return { items, columns: placedCols, rails, notes, pages };
+}
+
+// src/panels/targets.ts
+var COLUMN_REACH = 22;
+var RAIL_EDGE = 10;
+function placeRank(place) {
+  switch (place.kind) {
+    case "float":
+      return 3e3;
+    case "rail":
+      return place.side === "left" ? 0 : 1999;
+    case "column":
+      return place.side === "left" ? 1 + 2 * place.index : 1998 - 2 * place.index;
+    case "into":
+      return place.side === "left" ? 2 + 2 * place.index : 1997 - 2 * place.index;
+  }
+}
+function homePlace(state, id) {
+  const w = whereIs(state, id);
+  if (w.kind === "float") return { kind: "float" };
+  if (w.kind === "none") return null;
+  return state.sides[w.side][w.index].panels.length === 1 ? { kind: "column", side: w.side, index: w.index } : { kind: "into", side: w.side, index: w.index };
+}
+var cut = (x0, x1, lo, hi) => [Math.max(x0, lo), Math.min(x1, hi)];
+function panelTargets(input) {
+  const { defs, state, id, stage } = input;
+  const opt = { ...DEFAULT_PANELS_OPTIONS, ...input.options };
+  const def = defOf(defs, id);
+  const s0 = liftPanel(state, id);
+  const l0 = layoutPanels(defs, s0, stage, opt);
+  const width = ownWidth(defs, state, id);
+  const W = stage.width;
+  const H = stage.height;
+  const R = COLUMN_REACH;
+  const out = [];
+  const add = (place, priority, hit, make, free = false) => {
+    if (hit.width <= 0 || hit.height <= 0) return;
+    if (input.allows && !input.allows(id, place)) return;
+    if (place.kind !== "float" && samePlaces(make({ x: 0, y: 0 }, { x: 0, y: 0 }), state, defs)) return;
+    out.push({ id: place.kind === "float" ? "float" : place.kind === "rail" ? `rail:${place.side}` : `${place.kind}:${place.side}:${place.index}`, priority, hit, panel: id, place, order: placeRank(place), make, ...free ? { free: true } : {} });
+  };
+  for (const side of SIDES) {
+    if (def?.sides && !def.sides.includes(side)) continue;
+    const left = side === "left";
+    const rail = l0.rails[side];
+    const edge = rail ? rail.rect.width : RAIL_EDGE;
+    const railHit = rail ? rail.rect : left ? rect(0, 0, RAIL_EDGE, H) : rect(W - RAIL_EDGE, 0, RAIL_EDGE, H);
+    add({ kind: "rail", side }, 1, railHit, () => {
+      const s = dock(state, id, side, 0, { width });
+      return { ...s, folded: [...s.folded.filter((x) => x !== id), id] };
+    });
+    const open2 = l0.columns.filter((c) => c.side === side && c.folded === null);
+    const lo = left ? edge : 0;
+    const hi = left ? W : W - edge;
+    const band = (x, outer, i) => {
+      const [a, b] = outer ? left ? cut(x, x + 2 * R, lo, hi) : cut(x - 2 * R, x, lo, hi) : cut(x - R, x + R, lo, hi);
+      add({ kind: "column", side, index: i }, 2, rect(a, 0, b - a, H), () => dock(state, id, side, i, { width }));
+    };
+    if (open2.length === 0) band(left ? l0.pages.x : l0.pages.x + l0.pages.width, true, s0.sides[side].length);
+    open2.forEach((c, k) => {
+      band(left ? c.rect.x : c.rect.x + c.rect.width, k === 0, c.index);
+      add({ kind: "into", side, index: c.index }, 2, c.rect, () => dock(state, id, side, c.index, { into: true }));
+    });
+    const last = open2.at(-1);
+    if (last) band(left ? last.rect.x + last.rect.width : last.rect.x, false, last.index + 1);
+  }
+  if (def?.floats !== false) {
+    const was = state.floats.find((f) => f.id === id);
+    const size = was ? { width: was.rect.width, height: was.rect.height } : floatSize(def).natural;
+    const pinned = !!was?.pinned;
+    add(
+      { kind: "float" },
+      3,
+      rect(0, 0, W, H),
+      (p, grab) => {
+        const at = rect(p.x - grab.x, p.y - grab.y, size.width, size.height);
+        const s = float(state, id, pinned ? at : toPage(at, opt.view), pinned);
+        const shown = layoutPanels(defs, s, stage, opt).items.get(id).rect;
+        return float(state, id, pinned ? shown : toPage(shown, opt.view), pinned);
+      },
+      true
+    );
+  }
+  return out.sort((a, b) => a.order - b.order);
+}
+function panelDrop(input, target, p, grab) {
+  const opt = { ...DEFAULT_PANELS_OPTIONS, ...input.options };
+  const state = target.make(p, grab);
+  const layout = layoutPanels(input.defs, state, input.stage, opt);
+  const placed = layout.items.get(input.id);
+  const key = target.free ? `float:${Math.round(placed.rect.x)},${Math.round(placed.rect.y)}` : target.id;
+  return { target: target.id, place: target.place, key, state, layout, slot: placed.rect, hidden: placed.hidden, free: !!target.free };
+}
+function panelStops(targets, options = {}) {
+  const stops = [];
+  for (const t of targets) {
+    if (t.place.kind === "float") {
+      if (!options.floats) continue;
+      const at = options.floats === true ? { x: t.hit.x + t.hit.width / 2, y: t.hit.y + t.hit.height / 2 } : options.floats.at;
+      const grab = options.floats === true ? { x: 0, y: 0 } : options.floats.grab ?? { x: 0, y: 0 };
+      stops.push({ id: t.id, place: t.place, state: t.make(at, grab), home: false, order: t.order });
+      continue;
+    }
+    stops.push({ id: t.id, place: t.place, state: t.make({ x: 0, y: 0 }, { x: 0, y: 0 }), home: false, order: t.order });
+  }
+  const h = options.home;
+  if (h) stops.push({ id: "home", place: h.place, state: h.state, home: true, order: placeRank(h.place) + (h.place.kind === "float" ? 1 : 0.5) });
+  return stops.sort((a, b) => a.order - b.order).map(({ order: _order, ...s }) => s);
+}
+
+export {
+  SIDES,
+  IDENTITY_VIEW,
+  DEFAULT_PANELS_OPTIONS,
+  FLOAT_HEIGHT,
+  FLOAT_MIN,
+  whereIs,
+  tick,
+  defOf,
+  floatSize,
+  ownWidth,
+  createPanels,
+  liftPanel,
+  open,
+  close,
+  focus,
+  toggleFold,
+  keep,
+  dock,
+  float,
+  toView,
+  toPage,
+  pin,
+  resizeColumn,
+  resizeFloat,
+  columnWidth,
+  samePlaces,
+  giveWayOrder,
+  layoutPanels,
+  COLUMN_REACH,
+  RAIL_EDGE,
+  placeRank,
+  homePlace,
+  panelTargets,
+  panelDrop,
+  panelStops
+};
+//# sourceMappingURL=chunk-NNFNMIW4.js.map