@n-uf/placement 26.11.7 → 26.11.9

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 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.9
+
+- `@n-uf/placement/panels`:
+  - Tabs: `Column.show` (`"stack"`, the default, or `"tabs"`) and `Column.active`. A tabbed column draws a strip
+    `options.tabs` tall (new chrome size, default 28; `PlacedColumn.strip`); its active panel takes the rest and the
+    others are `hidden`, each with its `tab` rect in the strip. It folds as a whole: its active panel folded shows only
+    the strip, every panel folded goes to the rail (or rides). `showTabs(state, side, index, on)`, `activate(state, id)`
+    (a use). A drop `into` a tabbed column adds a tab at the end and shows it, and so does `open` on a panel in one; a
+    panel that leaves takes its `active` mark with it. With no `active` (or one that isn't there), the column shows its
+    first panel that isn't closed.
+  - Height give-way, opt-in: `PanelDef.height` (`{ min, natural }`). In a stack column where an open section has one,
+    sections get their natural heights and the last open one the rest (never under its min); sections without one
+    share what is left, never under a bar's height. The others' natural heights give way toward their mins first;
+    still short of room, open sections fold to bars in give-way policy order (kept last, never the last open one, never
+    one whose min is no more than a bar), note `section-folded`. It never writes `folded`. Columns without `height`
+    defs are unchanged.
+  - The stored form carries a column's `show` and `active` (optional v1 fields); an `active` that isn't in its column
+    is dropped as `"column.active:<id>"`, an unknown `show` as `"column.show"`.
+- New entry `@n-uf/placement/desk`: presets as data on `./panels` (`docks`, `dockTear`, `navigator`; `PRESETS`,
+  `presetLayout`, `presetTargets`, `presetDrop`, `presetInput`). It imports only `./panels`' public index (a guard test
+  holds it to that) and carries no titles, words or toolbar wiring. `./dock` is unchanged.
+
+## 26.11.8
+
+- `@n-uf/placement/panels`:
+  - Folded floats: a float folded by hand lays out as a title bar (`kind` `"bar"`, `folded` `"hand"`) at its own x, y
+    and width, `options.bar` tall, clamped as a bar, pinned or not. It is still a float to targets and drags; a drop
+    moves it and keeps its full size, and unfolding brings the full rect back (the stored rect never changes). A
+    folded docked panel dropped on the float target stays folded: it lands as a title bar at its natural float size.
+  - `options.fold`: `"rail"` (default, as before) or `"ride"`. Riding, a column folded by hand on a side that still
+    has an open column becomes title bars stacked on top of the side's first open column (`rides`: its index), as
+    wide as it; the open columns lie as if the folded one were gone, and its stored place and width are untouched.
+    When every column on the side is folded, the side shows its rail as before. Give-way's folds always go to the rail.
+  - `PlacedPanel` gains `floating` (open or folded float) and `rides`; `PlacedColumn` gains `rides`.
+  - `pin(…, shown)` takes only the position of `shown` and keeps the stored size, so pinning a folded or clamped
+    float keeps its full size.
+  - A column too short for its bars gives its open panels a height of 0, never a negative one.
+
 ## 26.11.7
 
 - New entry `@n-uf/placement/panels`: tool panels with string ids, as an app's side columns work. `./dock` is

package/README.md

@@ -3,16 +3,16 @@
 > [!CAUTION]
 > ## Not yet stable
 >
-> **@n-uf/placement is young and still changing. Its API (the desk constructions, the toolbar model and the drop targets) is not final.**
+> **@n-uf/placement is young and still changing. Its API (the desk constructions, the panel columns, the toolbar model and the drop targets) is not final.**
 >
 > 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,
-no framework, no motion, no dependencies.
+Where things go. State in, rects and drop targets out: a desk of docks, rails and palettes, panels in columns per
+side that give way by age, 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, no framework, no
+motion, no dependencies.
 
 ```sh
 npm i @n-uf/placement
@@ -34,9 +34,11 @@ without importing each other: a target list from `@n-uf/placement/targets` is ex
 - **`/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.
+- **`/panels`**: tool panels with string ids: full-height columns per side, each with its own width, shown as a
+  stack of sections or as tabs; folding to a title bar or a rail; give-way by age when the pages run out of room (and,
+  opt-in, when a column runs out of height); resizable floats, some pinned to the view; their drop targets; and a
+  stored form.
+- **`/desk`**: desk presets (`docks`, `dockTear`, `navigator`) as data on `/panels`: options and a start state.
 
 Rendering stays in the app: it draws the rects, measures its groups, and feeds pointer samples to a drag intent.
 
@@ -160,9 +162,11 @@ console.log(stops.map((s) => (s.home ? "home" : s.id))); // [ 'g:top:start:0', '
 `@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
+its side's rail, or with `fold: "ride"` bars on the side's first open column. Panels may float instead, in page space
+(they move with the page's offset and scale) or pinned to the view; a folded float is a title bar where it floats, and
+a folded panel torn off stays folded. The output is geometry and structure only: each panel's rect, layer, `kind`
+(`column`, `bar`, `segment`, `float`; a folded float is a `bar`) and its folded, kept, pinned, floating and rides
+flags, the columns, the rails, the pages' rect and coded notes. Chrome sizes
 (`bar`, `rail`, `segment`) are options.
 
 ```ts
@@ -196,11 +200,38 @@ even at its minimum size keeps its title bar and `floatVisible` (default 48) px
 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.
+float. A float folded by hand (`toggleFold`) lays out as a title bar: `kind` `"bar"`, `folded` `"hand"`, at its own x,
+y and width and `options.bar` tall, clamped as a bar. It is still a float (`floating: true`) to its targets and drags,
+pinned or not, and unfolding brings its full rect back: the stored rect never changes.
+
+**Folded columns** (`options.fold`, default `"rail"`): a column folded by hand goes to its side's rail. With `"ride"`,
+it rides instead while its side still has an open column: its panels become title bars (`kind` `"bar"`, `rides`: the
+host's index) stacked in column order on top of the side's first open column (outer edge first), as wide as it, and
+the host's open panels share the rest of the height. The open columns lie as if the folded one were gone (the pages
+gain its room), and its stored place and width are untouched, so unfolding puts it back as its own column. Only when
+every column on a side is folded does the side show its rail. Give-way's folds (`column-folded`, `kept-folded`) go to
+the rail in both modes.
+
+**Tabs**: a column with `show: "tabs"` shows one panel at a time, its `active` one (default, or when `active` isn't
+one of them: the first panel in the column that isn't closed), under a strip
+`options.tabs` tall (default 28). The strip is `PlacedColumn.strip`, and each panel's `tab` is its header's rect in it
+(panel order, equal widths); the others are `hidden`. A tabbed column folds as a whole: with its active panel in
+`folded` it shows only its strip (the active panel is a `"bar"` there); with every panel folded it goes to the rail,
+or rides, as a stack column does. `showTabs(state, side, index, on)` switches a column; `activate(state, id)` shows a
+tab and counts as a use. A drop `into` a tabbed column adds a tab at the end and shows it, and `open` on a panel in a
+tabbed column shows its tab too.
+
+**Section heights** (opt-in): a `PanelDef.height` (`{ min, natural }`) gives a section of a stack column its natural
+height; the column's last open section takes the rest, never under its min, and sections without one share what is
+left equally, never under a bar's height (`options.bar`). The others' natural heights give way toward their mins
+first. When the open sections' mins and the bars still don't fit, open sections fold to bars by the give-way policy
+(kept last, never the last open one, and never one whose min is no more than a bar, since folding it gains nothing),
+each with a `section-folded` note; that never writes `folded`, so a taller stage unfolds them. Columns without
+`height` defs lay out as before.
 
 **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`.
+shows), `resizeColumn`, `resizeFloat`, `showTabs`, `activate`.
 
 **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
@@ -231,18 +262,53 @@ console.log(stops.map((s) => (s.home ? "home" : s.id))); // [ 'rail:left', 'colu
 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`):
+too (`"theme"`, `"sides.bottom"`, `"column.<field>"`, `"float.<field>"`, `"clock.<id>"`). A column's `show` and
+`active` are carried; an `active` that isn't one of the column's panels is dropped as `"column.active:<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` |
+| `section-folded` | a section of a stack column folded to a bar: the column was short | `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` |
 
+## Desk presets
+
+`@n-uf/placement/desk` holds desk presets as data on `./panels`: each is panels options and a start state. It imports
+only the panels entry, carries no titles or words and wires no toolbar; the app names the presets and draws them.
+
+| Preset | Columns and floats |
+|---|---|
+| `docks` | one stack column per side, sections at their natural heights when the defs give `height`, folding to the rail; no floats |
+| `dockTear` | as `docks`, and panels may float (tear-off and dock-back); one panel floats at the start |
+| `navigator` | a tabbed column on the left, a stack column on the right; no floats |
+
+```ts
+import { PRESETS, presetLayout, presetTargets } from "@n-uf/placement/desk";
+import type { PanelDef } from "@n-uf/placement/panels";
+
+const defs: PanelDef[] = [
+  { id: "files", width: { min: 200, natural: 240, max: 360 }, height: { min: 80, natural: 160 } },
+  { id: "outline", width: { min: 200, natural: 240, max: 360 }, height: { min: 80, natural: 200 } },
+  { id: "history", width: { min: 200, natural: 240, max: 360 } },
+];
+const nav = PRESETS.navigator;
+const state = nav.start(defs, { left: ["files", "outline"] });
+const layout = presetLayout(nav, defs, state, { width: 1200, height: 600 });
+console.log(layout.columns[0]!.strip, layout.items.get("outline")!.hidden); // { x: 0, y: 0, width: 240, height: 28 } true
+const targets = presetTargets(nav, { defs, state, id: "history", stage: { width: 1200, height: 600 } });
+console.log(targets.some((t) => t.id === "float")); // false
+```
+
+`presetLayout(preset, defs, state, stage, options?)` is `layoutPanels` with the preset's options under the caller's;
+`presetTargets(preset, input)` and `presetDrop(preset, input, target, point, grab)` are `panelTargets` and `panelDrop`
+the same way, offering only the places the preset allows (`presetInput` gives that input). `./dock` stays as it is for
+now.
+
 ## Pane zones
 
 `paneZone(rect, point, previous, options?)` says which of a pane's five zones a point is in: the centre rectangle

package/dist/{chunk-NNFNMIW4.js → chunk-PWQWD2CS.js}

@@ -8,13 +8,15 @@ var IDENTITY_VIEW = { x: 0, y: 0, scale: 1 };
 var DEFAULT_PANELS_OPTIONS = {
   giveWay: { order: "oldest", by: "used" },
   floats: "clamp",
+  fold: "rail",
   floatVisible: 48,
   pagesMin: 320,
   view: IDENTITY_VIEW,
   bar: 28,
   rail: 36,
   segment: 36,
-  railInset: 4
+  railInset: 4,
+  tabs: 28
 };
 var FLOAT_HEIGHT = 360;
 var FLOAT_MIN = { width: 160, height: 120 };
@@ -67,12 +69,18 @@ function createPanels(defs, start) {
   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);
+  const out = (c) => {
+    const { active: _a, ...rest } = c;
+    return { ...c.active === id ? rest : c, panels: without(c.panels, id) };
+  };
+  const lift = (cols) => cols.map(out).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 }] } };
+  const w = whereIs(s, id);
+  if (w.kind === "column" && s.sides[w.side][w.index].show === "tabs") s = { ...s, sides: { ...s.sides, [w.side]: s.sides[w.side].map((c, i) => i === w.index ? { ...c, active: id } : c) } };
   return bump(s, id, true);
 }
 var close = (state, id) => ({ ...state, closed: withOnce(state.closed, id), kept: without(state.kept, id) });
@@ -94,13 +102,25 @@ function dock(state, id, side, index, options = {}) {
   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] };
+  if (options.into && cols[index]) cols[index] = { ...cols[index], panels: [...cols[index].panels, id], ...cols[index].show === "tabs" ? { active: 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 showTabs(state, side, index, on) {
+  const col = state.sides[side][index];
+  if (!col) return state;
+  const { show: _s, ...stack } = col;
+  return { ...state, sides: { ...state.sides, [side]: state.sides[side].map((c, i) => i === index ? on ? { ...col, show: "tabs" } : stack : c) } };
+}
+function activate(state, id) {
+  const w = whereIs(state, id);
+  if (w.kind !== "column") return state;
+  const sides = { ...state.sides, [w.side]: state.sides[w.side].map((c, i) => i === w.index ? { ...c, active: id } : c) };
+  return bump({ ...state, sides }, id, false);
+}
 function float(state, id, rect2, pinned) {
   const was = state.floats.find((f2) => f2.id === id);
   const on = pinned ?? !!was?.pinned;
@@ -115,7 +135,7 @@ function pin(state, id, on, view = IDENTITY_VIEW, shown) {
     ...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);
+      const seen = shown ? { ...f.rect, x: shown.x, y: shown.y } : f.pinned ? { ...f.rect } : toView(f.rect, view);
       return on ? { id, rect: seen, pinned: true } : { id, rect: toPage(seen, view) };
     })
   };
@@ -140,7 +160,9 @@ function columnWidth(defs, col) {
   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 cols = (s) => SIDES.map(
+    (side) => s.sides[side].map((c) => `${c.panels.join(",")}@${Math.round(columnWidth(defs, c))}${c.show === "tabs" ? `/tabs:${c.active ?? c.panels[0]}` : ""}`).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);
@@ -159,6 +181,7 @@ function layoutPanels(defs, state, stage, options = {}) {
   const folded = new Set(state.folded);
   const kept = new Set(state.kept);
   const by = opt.giveWay.by;
+  const ride = opt.fold === "ride";
   const cols = [];
   for (const side of SIDES) {
     state.sides[side].forEach((c, index) => {
@@ -169,16 +192,74 @@ function layoutPanels(defs, state, stage, options = {}) {
       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 tabs = c.show === "tabs" ? { show: "tabs", active: c.active !== void 0 && panels.includes(c.active) ? c.active : panels[0] } : {};
+      cols.push({ side, index, panels, min, max, width, hand: panels.every((id) => folded.has(id)), kept: panels.some((id) => kept.has(id)), age, ...tabs });
     });
   }
+  const sectionHeights = (c, room) => {
+    const out = /* @__PURE__ */ new Map();
+    const open0 = c.panels.filter((id) => !folded.has(id));
+    const hOf = (id) => defOf(defs, id)?.height;
+    const auto = /* @__PURE__ */ new Set();
+    if (open0.some((id) => hOf(id))) {
+      const last = open0.at(-1);
+      const minOf = (id) => hOf(id)?.min ?? opt.bar;
+      const fits = () => (c.panels.length - open0.length + auto.size) * opt.bar + open0.filter((id) => !auto.has(id)).reduce((a, id) => a + minOf(id), 0) <= room;
+      const rank = (ids) => [...ids].sort((a, b) => {
+        const age = (id) => state.clock[id]?.[by] ?? 0;
+        return Number(kept.has(a)) - Number(kept.has(b)) || (opt.giveWay.order === "oldest" ? age(a) - age(b) : age(b) - age(a)) || c.panels.indexOf(a) - c.panels.indexOf(b);
+      });
+      for (const id of rank(open0.filter((x) => x !== last))) {
+        if (fits()) break;
+        if (minOf(id) > opt.bar) auto.add(id);
+      }
+      const open2 = open0.filter((id) => !auto.has(id));
+      const space = room - (c.panels.length - open2.length) * opt.bar;
+      const fixed = open2.filter((id) => id !== last && hOf(id));
+      const sharers = open2.filter((id) => id === last || !hOf(id));
+      const h = new Map(fixed.map((id) => [id, hOf(id).natural]));
+      let rest = space - fixed.reduce((a, id) => a + h.get(id), 0);
+      const need = sharers.reduce((a, id) => a + minOf(id), 0);
+      for (const id of rank(fixed)) {
+        if (rest >= need) break;
+        const take = Math.min(need - rest, h.get(id) - minOf(id));
+        h.set(id, h.get(id) - take);
+        rest += take;
+      }
+      if (rest >= need) {
+        let pool = [...sharers];
+        let left = rest;
+        for (; ; ) {
+          const share2 = left / pool.length;
+          const under = pool.filter((id) => minOf(id) > share2);
+          if (under.length === 0) {
+            for (const id of pool) h.set(id, share2);
+            break;
+          }
+          for (const id of under) h.set(id, minOf(id));
+          left -= under.reduce((a, id) => a + minOf(id), 0);
+          pool = pool.filter((id) => !under.includes(id));
+        }
+      } else {
+        const lastH = Math.max(0, Math.min(minOf(last), rest));
+        for (const id of sharers) h.set(id, id === last ? lastH : Math.max(0, rest - lastH) / (sharers.length - 1));
+      }
+      for (const id of c.panels) out.set(id, folded.has(id) ? { height: opt.bar, folded: "hand" } : auto.has(id) ? { height: opt.bar, folded: "auto" } : { height: Math.max(0, h.get(id)), folded: null });
+      return out;
+    }
+    const bars = c.panels.length - open0.length;
+    const share = Math.max(0, (room - bars * opt.bar) / open0.length);
+    for (const id of c.panels) out.set(id, folded.has(id) ? { height: opt.bar, folded: "hand" } : { height: share, folded: null });
+    return out;
+  };
   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 open2 = (side) => cols.some((c) => c.side === side && !c.hand && !auto.has(c));
+    const railed = (side) => cols.some((c) => c.side === side && (auto.has(c) || c.hand && !(ride && open2(side))));
     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) {
@@ -206,60 +287,108 @@ function layoutPanels(defs, state, stage, options = {}) {
   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));
+    const open2 = mine.filter((c) => !c.hand && !g.auto.has(c));
+    const host = ride ? open2[0] : void 0;
+    const riders = host ? mine.filter((c) => c.hand) : [];
+    const inRail = mine.filter((c) => c.hand && !riders.includes(c) || 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 });
+        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, floating: false, side, column: c.index });
       }
       if (side === "left") x0 = opt.rail;
       else x1 = W - opt.rail;
     }
+    const at = /* @__PURE__ */ new Map();
     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);
+      if (w === void 0 || riders.includes(c)) continue;
+      if (side === "left") {
+        at.set(c, rect(x0, 0, w, H));
         x0 += w;
       } else {
         x1 -= w;
-        r = rect(x1, 0, w, H);
+        at.set(c, rect(x1, 0, w, H));
+      }
+    }
+    const riding = riders.flatMap((c) => c.panels.map((id) => ({ id, c })));
+    const top = riding.length * opt.bar;
+    for (const c of mine) {
+      const w = g.widths.get(c);
+      const folded1 = c.hand ? "hand" : g.auto.has(c) ? "auto" : null;
+      const base = { side, index: c.index, width: c.width, min: c.min, max: c.max, folded: folded1, kept: c.kept, panels: c.panels };
+      if (riders.includes(c)) {
+        const hr = at.get(host);
+        const first = riding.findIndex((x) => x.c === c);
+        c.panels.forEach(
+          (id, i) => items.set(id, { rect: rect(hr.x, (first + i) * opt.bar, hr.width, opt.bar), kind: "bar", layer: 0, hidden: false, folded: "hand", kept: kept.has(id), pinned: false, floating: false, side, column: c.index, rides: host.index })
+        );
+        placedCols.push({ ...base, rect: rect(hr.x, first * opt.bar, hr.width, c.panels.length * opt.bar), shrunk: false, rides: host.index });
+        continue;
       }
-      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 });
+      const r = at.get(c) ?? rect(side === "left" ? x0 : x1, 0, 0, H);
+      const y0 = c === host ? top : 0;
+      const tabbed = c.show === "tabs";
+      const strip = rect(r.x, y0, r.width, opt.tabs);
+      const shown = tabbed && w !== void 0 ? { strip, active: c.active } : {};
+      placedCols.push({ ...base, rect: r, shrunk: w !== void 0 && w < c.width, ...tabbed ? { show: "tabs" } : {}, ...shown });
       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;
+      const panel = (id, to, kind, f, more = {}) => {
+        items.set(id, { rect: to, kind, layer: 0, hidden: more.hidden ?? false, folded: f, kept: kept.has(id), pinned: false, floating: false, side, column: c.index, ...more.tab ? { tab: more.tab } : {} });
+      };
+      if (tabbed) {
+        const body = rect(r.x, y0 + opt.tabs, r.width, Math.max(0, H - y0 - opt.tabs));
+        const shade = folded.has(c.active);
+        const tw = r.width / c.panels.length;
+        c.panels.forEach((id, i) => {
+          const tab = rect(r.x + i * tw, y0, tw, opt.tabs);
+          if (id === c.active) panel(id, shade ? strip : body, shade ? "bar" : "column", shade ? "hand" : null, { tab });
+          else panel(id, body, "column", folded.has(id) ? "hand" : null, { tab, hidden: true });
+        });
+        continue;
+      }
+      const hs = sectionHeights(c, H - y0);
+      let y = y0;
       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 s = hs.get(id);
+        panel(id, rect(r.x, y, r.width, s.height), s.folded ? "bar" : "column", s.folded);
+        y += s.height;
       }
+      for (const id of c.panels) if (hs.get(id).folded === "auto") notes.push({ code: "section-folded", side, column: c.index, items: [id] });
     }
   }
   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 shaded = folded.has(f.id);
+    const at = shaded ? { ...f.rect, height: opt.bar } : 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 (!shaded) 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 } : {} });
+    items.set(f.id, {
+      rect: f.pinned ? r : toView(r, opt.view),
+      kind: shaded ? "bar" : "float",
+      layer: 10 + i,
+      hidden: false,
+      folded: shaded ? "hand" : null,
+      kept: false,
+      pinned: !!f.pinned,
+      floating: true,
+      ...clamped ? { clamped: true } : {}
+    });
   });
   return { items, columns: placedCols, rails, notes, pages };
 }
@@ -339,7 +468,8 @@ function panelTargets(input) {
       (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;
+        const laid = layoutPanels(defs, s, stage, opt).items.get(id).rect;
+        const shown = s.folded.includes(id) ? { ...laid, width: at.width, height: at.height } : laid;
         return float(state, id, pinned ? shown : toPage(shown, opt.view), pinned);
       },
       true
@@ -391,6 +521,8 @@ export {
   toggleFold,
   keep,
   dock,
+  showTabs,
+  activate,
   float,
   toView,
   toPage,
@@ -409,4 +541,4 @@ export {
   panelDrop,
   panelStops
 };
-//# sourceMappingURL=chunk-NNFNMIW4.js.map
+//# sourceMappingURL=chunk-PWQWD2CS.js.map