@n-uf/placement 26.11.9 → 26.11.10

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

@@ -4,6 +4,8 @@ import {
 
 // src/panels/model.ts
 var SIDES = ["left", "right"];
+var EDGES = ["top", "bottom"];
+var BAND_SIZE = { min: 120, max: 480, natural: 200 };
 var IDENTITY_VIEW = { x: 0, y: 0, scale: 1 };
 var DEFAULT_PANELS_OPTIONS = {
   giveWay: { order: "oldest", by: "used" },
@@ -16,7 +18,10 @@ var DEFAULT_PANELS_OPTIONS = {
   rail: 36,
   segment: 36,
   railInset: 4,
-  tabs: 28
+  tabs: 28,
+  bands: {},
+  pagesMinHeight: 240,
+  reserve: {}
 };
 var FLOAT_HEIGHT = 360;
 var FLOAT_MIN = { width: 160, height: 120 };
@@ -27,6 +32,10 @@ function whereIs(state, id) {
     const index = state.sides[side].findIndex((c) => c.panels.includes(id));
     if (index >= 0) return { kind: "column", side, index };
   }
+  for (const edge of EDGES) {
+    const index = state.bands?.[edge]?.panels.indexOf(id) ?? -1;
+    if (index >= 0) return { kind: "band", edge, index };
+  }
   const float2 = state.floats.find((f) => f.id === id);
   return float2 ? { kind: "float", float: float2 } : { kind: "none" };
 }
@@ -42,6 +51,21 @@ function floatSize(def) {
   const width = Math.max(FLOAT_MIN.width, def?.width.natural ?? FLOAT_MIN.width);
   return { min: FLOAT_MIN, natural: { width, height: FLOAT_HEIGHT } };
 }
+var bandSize = (def) => ({ ...def?.band ?? BAND_SIZE });
+function bandHeight(defs, band) {
+  if (!defs) return band.height;
+  const ds = band.panels.map((id) => bandSize(defOf(defs, id)));
+  const lo = Math.max(0, ...ds.map((d) => d.min));
+  const hi = Math.max(lo, Math.min(...ds.map((d) => d.max)));
+  return Math.min(Math.max(Number.isFinite(band.height) ? band.height : lo, lo), hi);
+}
+var withBand = (state, edge, band) => {
+  const { bands: _b, ...rest } = state;
+  const bands = { ...state.bands };
+  if (band && band.panels.length) bands[edge] = band;
+  else delete bands[edge];
+  return EDGES.some((e) => bands[e]) ? { ...rest, bands } : rest;
+};
 function ownWidth(defs, state, id) {
   const def = defOf(defs, id);
   const w = whereIs(state, id);
@@ -63,10 +87,18 @@ function createPanels(defs, start) {
     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 bands = {};
+  for (const edge of EDGES) {
+    const ids = start[edge] ?? [];
+    if (!ids.length) continue;
+    const natural = Math.max(0, ...ids.map((id) => bandSize(defOf(defs, id)).natural));
+    bands[edge] = { panels: [...ids], height: bandHeight(defs, { panels: ids, height: natural }) };
+  }
+  const order = [...sides.left, ...sides.right].flatMap((c) => c.panels).concat(EDGES.flatMap((e) => bands[e]?.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 };
+  const s = { sides, floats, folded: [...start.folded ?? []], kept: [...start.kept ?? []], closed: [...start.closed ?? []], clock };
+  return EDGES.some((e) => bands[e]) ? { ...s, bands } : s;
 }
 function liftPanel(state, id) {
   const out = (c) => {
@@ -74,11 +106,22 @@ function liftPanel(state, id) {
     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) };
+  let s = { ...state, sides: { left: lift(state.sides.left), right: lift(state.sides.right) }, floats: state.floats.filter((f) => f.id !== id) };
+  for (const edge of EDGES) {
+    const b = s.bands?.[edge];
+    if (b?.panels.includes(id)) s = withBand(s, edge, { ...b, panels: without(b.panels, id) });
+  }
+  return s;
 }
 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 }] } };
+  if (at && whereIs(s, id).kind === "none") {
+    if ("edge" in at) {
+      const b = s.bands?.[at.edge];
+      const panels = [...b?.panels ?? [], id];
+      s = withBand({ ...s, folded: s.folded.filter((x) => !panels.includes(x)) }, at.edge, { panels, height: b?.height ?? at.height ?? BAND_SIZE.natural });
+    } else 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);
@@ -90,12 +133,37 @@ function focus(state, id) {
   return bump(s, id, false);
 }
 function toggleFold(state, id) {
+  const w = whereIs(state, id);
+  if (w.kind === "band") {
+    const ids = state.bands[w.edge].panels;
+    const shown = ids.filter((x) => !state.closed.includes(x));
+    if ((shown.length ? shown : ids).every((x) => state.folded.includes(x))) return bump({ ...state, folded: state.folded.filter((x) => !ids.includes(x)) }, id, false);
+    return { ...state, folded: [...state.folded.filter((x) => !ids.includes(x)), ...ids] };
+  }
   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;
+  const k = whereIs(state, id).kind;
+  return k === "column" || k === "band" ? { ...state, kept: withOnce(state.kept, id) } : state;
+}
+function dockBand(state, id, edge, index, defs) {
+  const s = liftPanel(state, id);
+  const b = s.bands?.[edge];
+  const panels = [...b?.panels ?? []];
+  panels.splice(Math.max(0, Math.min(index, panels.length)), 0, id);
+  const height = b?.height ?? bandSize(defs ? defOf(defs, id) : void 0).natural;
+  const s1 = withBand(s, edge, { panels, height });
+  return bump({ ...s1, folded: s1.folded.filter((x) => !panels.includes(x)), closed: without(s1.closed, id) }, id, false);
+}
+function resizeBand(state, edge, height) {
+  const b = state.bands?.[edge];
+  if (!b || !Number.isFinite(height)) return state;
+  const t = tick(state);
+  const clock = { ...state.clock };
+  for (const id of b.panels) clock[id] = { opened: clock[id]?.opened ?? 0, used: t };
+  return { ...withBand(state, edge, { ...b, height: Math.max(0, height) }), clock };
 }
 function dock(state, id, side, index, options = {}) {
   const w = whereIs(state, id);
@@ -164,8 +232,12 @@ function samePlaces(a, b, defs) {
     (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 bs = (s) => EDGES.map((e) => {
+    const b2 = s.bands?.[e];
+    return b2 ? `${b2.panels.join(",")}@${Math.round(bandHeight(defs, b2))}` : "";
+  }).join("\u2016");
   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);
+  return cols(a) === cols(b) && bs(a) === bs(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
@@ -182,6 +254,67 @@ function layoutPanels(defs, state, stage, options = {}) {
   const kept = new Set(state.kept);
   const by = opt.giveWay.by;
   const ride = opt.fold === "ride";
+  const px = (v) => typeof v === "number" && Number.isFinite(v) ? Math.max(0, v) : 0;
+  const reserveOpt = opt.reserve ?? {};
+  const bandOpts = opt.bands ?? {};
+  const minH = typeof opt.pagesMinHeight === "number" ? opt.pagesMinHeight : DEFAULT_PANELS_OPTIONS.pagesMinHeight;
+  const res = { top: px(reserveOpt.top), right: px(reserveOpt.right), bottom: px(reserveOpt.bottom), left: px(reserveOpt.left) };
+  const bandsIn = [];
+  const offNotes = [];
+  for (const edge of EDGES) {
+    const b = state.bands?.[edge];
+    if (!b) continue;
+    const panels = b.panels.filter((id) => !closed.has(id));
+    if (panels.length === 0) continue;
+    const o = bandOpts[edge];
+    if (!o) {
+      offNotes.push({ code: "band-off", edge, items: panels });
+      continue;
+    }
+    const ds = panels.map((id) => bandSize(defOf(defs, id)));
+    const min = Math.max(0, ...ds.map((d) => d.min));
+    const max = Math.max(min, Math.min(...ds.map((d) => d.max)));
+    const height = clamp(Number.isFinite(b.height) ? b.height : min, min, max);
+    const age = Math.max(...panels.map((id) => state.clock[id]?.[by] ?? 0));
+    bandsIn.push({ edge, panels, at: panels.map((id) => b.panels.indexOf(id)), min, max, height, hand: panels.every((id) => folded.has(id)), kept: panels.some((id) => kept.has(id)), age, mode: o.mode, span: o.span });
+  }
+  const bOrder = bandsIn.filter((b) => !b.hand).sort((a, b) => Number(a.kept) - Number(b.kept) || (opt.giveWay.order === "oldest" ? a.age - b.age : b.age - a.age) || EDGES.indexOf(b.edge) - EDGES.indexOf(a.edge));
+  const gh = { auto: /* @__PURE__ */ new Set(), heights: /* @__PURE__ */ new Map() };
+  const fitH = (list, room) => {
+    const order2 = bOrder.filter((b) => list.includes(b));
+    const hands = list.length - order2.length;
+    const fit2 = (k) => {
+      const auto = new Set(order2.slice(0, k));
+      const heights = new Map(order2.filter((b) => !auto.has(b)).map((b) => [b, b.height]));
+      let excess = [...heights.values()].reduce((a, b) => a + b, 0) + (hands + auto.size) * opt.bar - room;
+      for (const b of order2) {
+        if (excess <= 0 || auto.has(b)) continue;
+        const take = Math.min(excess, b.height - b.min);
+        if (take > 0) {
+          heights.set(b, b.height - take);
+          excess -= take;
+        }
+      }
+      return { auto, heights, excess };
+    };
+    let g2 = fit2(0);
+    for (let k = 1; g2.excess > 0 && k <= order2.length; k++) g2 = fit2(k);
+    for (const b of g2.auto) gh.auto.add(b);
+    for (const [b, h] of g2.heights) gh.heights.set(b, h);
+  };
+  const reservedIn = bandsIn.filter((b) => b.mode === "reserved");
+  const overlayIn = bandsIn.filter((b) => b.mode === "overlay");
+  fitH(reservedIn, H - res.top - res.bottom - Math.max(minH, overlayIn.length * opt.bar));
+  const bandH = (b) => b ? gh.heights.get(b) ?? opt.bar : 0;
+  const pagesH = H - res.top - res.bottom - reservedIn.reduce((a, b) => a + bandH(b), 0);
+  fitH(overlayIn, pagesH - minH);
+  const topB = bandsIn.find((b) => b.edge === "top");
+  const botB = bandsIn.find((b) => b.edge === "bottom");
+  const hT = bandH(topB);
+  const hB = bandH(botB);
+  const colTop = topB?.span === "full" ? (topB.mode === "overlay" ? res.top : 0) + hT : 0;
+  const colBot = botB?.span === "full" ? H - (botB.mode === "overlay" ? res.bottom : 0) - hB : H;
+  const CH = Math.max(0, colBot - colTop);
   const cols = [];
   for (const side of SIDES) {
     state.sides[side].forEach((c, index) => {
@@ -261,7 +394,7 @@ function layoutPanels(defs, state, stage, options = {}) {
     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;
+    let excess = [...widths.values()].reduce((a, b) => a + b, 0) + SIDES.filter(railed).length * opt.rail + opt.pagesMin + res.left + res.right - W;
     for (const c of order) {
       if (excess <= 0 || auto.has(c)) continue;
       const take = Math.min(excess, c.width - c.min);
@@ -292,8 +425,8 @@ function layoutPanels(defs, state, stage, options = {}) {
     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) }));
+      const r = side === "left" ? rect(0, colTop, opt.rail, CH) : rect(W - opt.rail, colTop, opt.rail, CH);
+      const segments = inRail.flatMap((c) => c.panels).map((id, i) => ({ id, rect: rect(r.x, colTop + 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));
@@ -307,11 +440,11 @@ function layoutPanels(defs, state, stage, options = {}) {
       const w = g.widths.get(c);
       if (w === void 0 || riders.includes(c)) continue;
       if (side === "left") {
-        at.set(c, rect(x0, 0, w, H));
+        at.set(c, rect(x0, colTop, w, CH));
         x0 += w;
       } else {
         x1 -= w;
-        at.set(c, rect(x1, 0, w, H));
+        at.set(c, rect(x1, colTop, w, CH));
       }
     }
     const riding = riders.flatMap((c) => c.panels.map((id) => ({ id, c })));
@@ -324,13 +457,13 @@ function layoutPanels(defs, state, stage, options = {}) {
         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 })
+          (id, i) => items.set(id, { rect: rect(hr.x, colTop + (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 });
+        placedCols.push({ ...base, rect: rect(hr.x, colTop + first * opt.bar, hr.width, c.panels.length * opt.bar), shrunk: false, rides: host.index });
         continue;
       }
-      const r = at.get(c) ?? rect(side === "left" ? x0 : x1, 0, 0, H);
-      const y0 = c === host ? top : 0;
+      const r = at.get(c) ?? rect(side === "left" ? x0 : x1, colTop, 0, CH);
+      const y0 = colTop + (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 } : {};
@@ -340,7 +473,7 @@ function layoutPanels(defs, state, stage, options = {}) {
         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 body = rect(r.x, y0 + opt.tabs, r.width, Math.max(0, colBot - y0 - opt.tabs));
         const shade = folded.has(c.active);
         const tw = r.width / c.panels.length;
         c.panels.forEach((id, i) => {
@@ -350,7 +483,7 @@ function layoutPanels(defs, state, stage, options = {}) {
         });
         continue;
       }
-      const hs = sectionHeights(c, H - y0);
+      const hs = sectionHeights(c, colBot - y0);
       let y = y0;
       for (const id of c.panels) {
         const s = hs.get(id);
@@ -360,8 +493,39 @@ function layoutPanels(defs, state, stage, options = {}) {
       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);
+  for (const b of bOrder) {
+    const h = gh.heights.get(b);
+    if (h !== void 0 && h < b.height) notes.push({ code: "band-shrunk", edge: b.edge, items: b.panels, from: b.height, to: h });
+  }
+  for (const b of bOrder) if (gh.auto.has(b)) notes.push({ code: b.kept ? "kept-folded" : "band-folded", edge: b.edge, items: b.panels });
+  const pw = Math.max(0, x1 - x0);
+  const pTop = topB?.mode === "reserved" ? hT : 0;
+  const pBot = botB?.mode === "reserved" ? H - hB : H;
+  const reserved = {};
+  const iTop = pTop + res.top + (topB?.mode === "overlay" ? hT : 0);
+  const iBot = pBot - res.bottom - (botB?.mode === "overlay" ? hB : 0);
+  if (res.top > 0) reserved.top = rect(x0, pTop, pw, res.top);
+  if (res.right > 0) reserved.right = rect(x0 + pw - res.right, iTop, res.right, Math.max(0, iBot - iTop));
+  if (res.bottom > 0) reserved.bottom = rect(x0, pBot - res.bottom, pw, res.bottom);
+  if (res.left > 0) reserved.left = rect(x0, iTop, res.left, Math.max(0, iBot - iTop));
+  const pages = rect(x0 + res.left, pTop + res.top, Math.max(0, pw - res.left - res.right), Math.max(0, pBot - res.bottom - pTop - res.top));
   if (pages.width < opt.pagesMin) notes.push({ code: "pages-under-min", width: pages.width, min: opt.pagesMin });
+  if ((bandsIn.length || res.top + res.bottom > 0) && pages.height < minH - 1e-9) notes.push({ code: "pages-short", height: pages.height, min: minH });
+  const bands = {};
+  for (const b of bandsIn) {
+    const h = bandH(b);
+    const full = b.span === "full";
+    const over = b.mode === "overlay";
+    const y = b.edge === "top" ? over ? res.top : 0 : over ? H - res.bottom - h : H - h;
+    const r = full ? rect(0, y, W, h) : rect(x0, y, pw, h);
+    const f = b.hand ? "hand" : gh.auto.has(b) ? "auto" : null;
+    const hh = gh.heights.get(b);
+    bands[b.edge] = { edge: b.edge, rect: r, height: b.height, min: b.min, max: b.max, folded: f, shrunk: hh !== void 0 && hh < b.height, kept: b.kept, mode: b.mode, span: b.span, panels: b.panels };
+    const share = r.width / b.panels.length;
+    b.panels.forEach(
+      (id, i) => items.set(id, { rect: rect(r.x + i * share, r.y, share, h), kind: f ? "bar" : "band", layer: over ? 5 : 0, hidden: false, folded: f, kept: kept.has(id), pinned: false, floating: false, edge: b.edge, index: b.at[i] })
+    );
+  }
   state.floats.forEach((f, i) => {
     if (closed.has(f.id)) return;
     const shaded = folded.has(f.id);
@@ -390,7 +554,8 @@ function layoutPanels(defs, state, stage, options = {}) {
       ...clamped ? { clamped: true } : {}
     });
   });
-  return { items, columns: placedCols, rails, notes, pages };
+  notes.push(...offNotes);
+  return { items, columns: placedCols, rails, notes, pages, bands, reserved };
 }
 
 // src/panels/targets.ts
@@ -400,6 +565,8 @@ function placeRank(place) {
   switch (place.kind) {
     case "float":
       return 3e3;
+    case "band":
+      return (place.edge === "top" ? 2e3 : 2500) + Math.min(place.index, 499);
     case "rail":
       return place.side === "left" ? 0 : 1999;
     case "column":
@@ -412,6 +579,7 @@ function homePlace(state, id) {
   const w = whereIs(state, id);
   if (w.kind === "float") return { kind: "float" };
   if (w.kind === "none") return null;
+  if (w.kind === "band") return { kind: "band", edge: w.edge, index: w.index };
   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)];
@@ -425,19 +593,38 @@ function panelTargets(input) {
   const W = stage.width;
   const H = stage.height;
   const R = COLUMN_REACH;
+  const bandOpts = opt.bands ?? {};
+  const reserve = opt.reserve ?? {};
+  const px = (v) => typeof v === "number" && Number.isFinite(v) ? Math.max(0, v) : 0;
   const out = [];
+  const idOf = (place) => {
+    switch (place.kind) {
+      case "float":
+        return "float";
+      case "rail":
+        return `rail:${place.side}`;
+      case "band":
+        return s0.bands?.[place.edge] ? `band:${place.edge}:${place.index}` : `band:${place.edge}`;
+      default:
+        return `${place.kind}:${place.side}:${place.index}`;
+    }
+  };
   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 } : {} });
+    out.push({ id: idOf(place), priority, hit, panel: id, place, order: placeRank(place), make, ...free ? { free: true } : {} });
   };
+  const fullTop = l0.bands.top?.span === "full" ? l0.bands.top.rect : null;
+  const fullBot = l0.bands.bottom?.span === "full" ? l0.bands.bottom.rect : null;
+  const top = fullTop ? fullTop.y + fullTop.height : 0;
+  const CH = Math.max(0, (fullBot ? fullBot.y : H) - top);
   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);
+    const railHit = rail ? rail.rect : left ? rect(0, top, RAIL_EDGE, CH) : rect(W - RAIL_EDGE, top, RAIL_EDGE, CH);
     add({ kind: "rail", side }, 1, railHit, () => {
       const s = dock(state, id, side, 0, { width });
       return { ...s, folded: [...s.folded.filter((x) => x !== id), id] };
@@ -447,9 +634,9 @@ function panelTargets(input) {
     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 }));
+      add({ kind: "column", side, index: i }, 2, rect(a, top, b - a, CH), () => 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);
+    if (open2.length === 0) band(left ? l0.pages.x - px(reserve.left) : l0.pages.x + l0.pages.width + px(reserve.right), 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 }));
@@ -457,6 +644,28 @@ function panelTargets(input) {
     const last = open2.at(-1);
     if (last) band(left ? last.rect.x + last.rect.width : last.rect.x, false, last.index + 1);
   }
+  const home = whereIs(state, id);
+  for (const e of EDGES) {
+    if (!bandOpts[e] || def?.sides && !def.sides.includes(e)) continue;
+    const pb = l0.bands[e];
+    const list = s0.bands?.[e]?.panels ?? [];
+    const make = (i) => () => dockBand(state, id, e, i, defs);
+    if (!pb) {
+      if (home.kind === "band" && home.edge === e && !s0.bands?.[e]) continue;
+      const p = l0.pages;
+      const h = Math.min(2 * opt.bar, p.height);
+      add({ kind: "band", edge: e, index: list.length }, 2, rect(p.x, e === "top" ? p.y : p.y + p.height - h, p.width, h), make(list.length));
+      continue;
+    }
+    const m = pb.panels.length;
+    const share = pb.rect.width / m;
+    for (let k = 0; k <= m; k++) {
+      const i = k < m ? list.indexOf(pb.panels[k]) : list.length;
+      const a = pb.rect.x + Math.max(0, k - 0.5) * share;
+      const b = pb.rect.x + Math.min(m, k + 0.5) * share;
+      add({ kind: "band", edge: e, index: i }, 2, rect(a, pb.rect.y, b - a, pb.rect.height), make(i));
+    }
+  }
   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;
@@ -504,6 +713,8 @@ function panelStops(targets, options = {}) {
 
 export {
   SIDES,
+  EDGES,
+  BAND_SIZE,
   IDENTITY_VIEW,
   DEFAULT_PANELS_OPTIONS,
   FLOAT_HEIGHT,
@@ -512,6 +723,8 @@ export {
   tick,
   defOf,
   floatSize,
+  bandSize,
+  bandHeight,
   ownWidth,
   createPanels,
   liftPanel,
@@ -520,6 +733,8 @@ export {
   focus,
   toggleFold,
   keep,
+  dockBand,
+  resizeBand,
   dock,
   showTabs,
   activate,
@@ -541,4 +756,4 @@ export {
   panelDrop,
   panelStops
 };
-//# sourceMappingURL=chunk-PWQWD2CS.js.map
+//# sourceMappingURL=chunk-PJD5HKYX.js.map