explico 0.11.1 → 0.13.0

package/src/components/card-memory.ts

@@ -39,6 +39,8 @@ export interface RememberedCard {
   readonly moved: MovedSpot | null;
   /** S2, D3: a docked card's top against its trigger's line. */
   readonly sideDy: number | null;
+  /** S11: a card's own width, from its edge; absent or `null` takes the column's. */
+  readonly width?: number | null;
 }
 
 export interface RememberedPage {
@@ -80,7 +82,8 @@ function decodeMoved(value: unknown): MovedSpot | null {
   return { x: value.x, y: value.y };
 }
 
-function decodeCard(value: unknown): RememberedCard | null {
+/** One remembered card, checked field by field; `null` for anything malformed. */
+export function decodeCard(value: unknown): RememberedCard | null {
   if (!isRecord(value)) return null;
   const { layer, item, occurrence, parentKey, mode } = value;
   if (typeof layer !== 'string' || layer === '' || typeof item !== 'string' || item === '') {
@@ -101,6 +104,7 @@ function decodeCard(value: unknown): RememberedCard | null {
     anchor: decodeAnchor(value.anchor),
     moved: mode === 'moved' ? moved : null,
     sideDy: mode === 'side' && isNumber(value.sideDy) ? value.sideDy : null,
+    ...(isNumber(value.width) && value.width > 0 ? { width: value.width } : {}),
   };
 }
 

package/src/components/card-placement.ts

@@ -10,11 +10,13 @@
  * trigger scrolls (`scrollContainersOf`).
  *
  * P2. A card takes the first free spot in a fixed order, judged against the
- * window below the sticky header at open time and against every other open
- * card (P6). `placeCard` is that decision as a pure function over plain
- * boxes, so `tests/unit/card-placement.test.ts` runs it in Node; the rest of
- * this module measures the page and applies the answer.
+ * window below the sticky header and between the side panels at open time,
+ * and against every other open card (P6). `placeCard` is that decision as a
+ * pure function over plain boxes, so `tests/unit/card-placement.test.ts` runs
+ * it in Node; the rest of this module measures the page and applies the
+ * answer.
  */
+import { sidebarsBetween } from './card-side';
 import type { Box } from './card-travel';
 
 export type CardSide = 'below' | 'above';
@@ -27,7 +29,10 @@ export interface SideSpot {
 }
 
 export interface PlacementInput {
-  /** The part of the window a card must fit: below the sticky header, inset by the window edge. */
+  /**
+   * The part of the window a card must fit: below the sticky header and
+   * between the side panels, inset by the window edge.
+   */
   readonly band: Box;
   /** The article column's horizontal extent, or `null` when the page has none. */
   readonly column: { readonly left: number; readonly right: number } | null;
@@ -233,6 +238,175 @@ export function placeCard(input: PlacementInput): Placement {
   return result(cover(first), preferred, 6);
 }
 
+// ---------------------------------------------------------------------------
+// K2–K4: kept cards held at the window's edges while the reader carries them.
+// ---------------------------------------------------------------------------
+
+/** K2: the window edge a carried card is held at. */
+export type HoldEdge = 'top' | 'bottom';
+
+export interface HoldCard {
+  readonly key: string;
+  /**
+   * Where the card is with the page (P1), in the viewport, at its full
+   * height: next to its trigger, in the side column, or where it was moved.
+   */
+  readonly box: Box;
+  /** K3: all a collapsed card keeps, its header row. */
+  readonly headerHeight: number;
+  /** K3: when it opened; the older card sits nearer the edge. */
+  readonly order: number;
+  /** K3: the lowest collapses first: the card's order, or newer once the reader expanded it. */
+  readonly rank: number;
+  /** K5: a card from another page has no place on this one; it is held at this edge whatever its box. */
+  readonly edge?: HoldEdge | null;
+}
+
+export interface HoldBand {
+  /** The window under the header, inset by the window edge. */
+  readonly top: number;
+  readonly bottom: number;
+  /** Things fixed at the top edge, which a held card over them stacks under: the side controls row. */
+  readonly blocks?: readonly Box[];
+}
+
+export interface Held {
+  readonly edge: HoldEdge;
+  /** The card's top, in the viewport. */
+  readonly top: number;
+  /** K3: shown as its header row only. */
+  readonly collapsed: boolean;
+  /** K3: the height a card is cut to when its stack has nothing left to collapse; `null` keeps its own. */
+  readonly maxHeight: number | null;
+}
+
+/** Whether two boxes are over each other: they share some width, wherever they are vertically. */
+const overX = (a: Box, b: Box): boolean => a.left < b.right - EPSILON && a.right > b.left + EPSILON;
+
+const ascending = (a: number, b: number): number => (a < b ? -1 : a > b ? 1 : 0);
+
+/**
+ * K2–K4: which kept cards are held at an edge of the window, and where.
+ *
+ * K2. A card scrolls with the page until its top passes the top edge (under
+ * the header, or under a block fixed there, `band.blocks`), or its bottom
+ * the bottom edge; then it stays at that edge, until its place with the page
+ * comes back inside the window and it follows the page again. A card from
+ * another page (`edge`) is always held.
+ *
+ * K3. Cards at one edge stack outward from it in the order they were opened,
+ * only cards that are over each other: a docked card and one in the article
+ * each keep their own column. A card reaches the edge once its place passes
+ * the stack already there, with every card in it at its full height, so
+ * collapsing never changes which cards are held. When the cards held over
+ * each other at both edges are taller than the window, the lowest-ranked
+ * collapse to their header row, one by one, until they fit or one is left
+ * open; that one is cut to the room left.
+ *
+ * Returns the held cards only; a card not in the map stays with the page.
+ */
+export function heldAt(
+  cards: readonly HoldCard[],
+  band: HoldBand,
+  gap: number,
+): Map<string, Held> {
+  const blocks = band.blocks ?? [];
+  const ceiling = (card: HoldCard) =>
+    blocks
+      .filter((block) => overX(block, card.box))
+      .reduce((top, block) => Math.max(top, block.bottom + gap), band.top);
+  const full = (card: HoldCard) => card.box.bottom - card.box.top;
+  /** The room the stack already at an edge takes over `card`, every card at its full height. */
+  const taken = (stack: readonly HoldCard[], card: HoldCard) =>
+    stack
+      .filter((other) => overX(other.box, card.box))
+      .reduce((sum, other) => sum + full(other) + gap, 0);
+
+  // K2: the top edge first, the card nearest it first, so each joins the
+  // stack its predecessors made.
+  const topKey = (card: HoldCard) =>
+    card.edge === 'top' ? Number.NEGATIVE_INFINITY : card.box.top;
+  const top: HoldCard[] = [];
+  for (const card of cards
+    .filter((candidate) => candidate.edge !== 'bottom')
+    .sort((a, b) => ascending(topKey(a), topKey(b)) || a.order - b.order)) {
+    if (card.edge === 'top' || card.box.top < ceiling(card) + taken(top, card) - EPSILON) {
+      top.push(card);
+    }
+  }
+  const atTop = new Set(top);
+  const bottomKey = (card: HoldCard) =>
+    card.edge === 'bottom' ? Number.POSITIVE_INFINITY : card.box.bottom;
+  const bottom: HoldCard[] = [];
+  for (const card of cards
+    .filter((candidate) => !atTop.has(candidate) && candidate.edge !== 'top')
+    .sort((a, b) => ascending(bottomKey(b), bottomKey(a)) || a.order - b.order)) {
+    if (card.edge === 'bottom' || card.box.bottom > band.bottom - taken(bottom, card) + EPSILON) {
+      bottom.push(card);
+    }
+  }
+
+  // K3: collapse the lowest-ranked card over a crowded one, until none is
+  // crowded or each crowded stack has one card left open.
+  const held = [...top, ...bottom];
+  const collapsed = new Set<string>();
+  const shown = (card: HoldCard) => (collapsed.has(card.key) ? card.headerHeight : full(card));
+  const load = (card: HoldCard) =>
+    held
+      .filter((other) => overX(other.box, card.box))
+      .reduce((sum, other) => sum + shown(other) + gap, -gap);
+  const room = (card: HoldCard) => band.bottom - ceiling(card);
+  for (let progress = true; progress; ) {
+    progress = false;
+    for (const card of held) {
+      if (load(card) <= room(card) + EPSILON) continue;
+      const open = held.filter((other) => overX(other.box, card.box) && !collapsed.has(other.key));
+      if (open.length < 2) continue;
+      const newest = open.reduce((a, b) => (b.rank > a.rank ? b : a));
+      const oldest = open
+        .filter((other) => other !== newest)
+        .reduce((a, b) => (b.rank < a.rank ? b : a));
+      collapsed.add(oldest.key);
+      progress = true;
+      break;
+    }
+  }
+  // The one card left open in a stack that is still too tall is cut to fit.
+  const caps = new Map<string, number>();
+  for (const card of held) {
+    const over = load(card) - room(card);
+    if (over <= EPSILON) continue;
+    for (const open of held.filter((other) => overX(other.box, card.box) && !collapsed.has(other.key))) {
+      const cap = Math.max(open.headerHeight, full(open) - over);
+      caps.set(open.key, Math.min(caps.get(open.key) ?? Number.POSITIVE_INFINITY, cap));
+    }
+  }
+  const height = (card: HoldCard) => caps.get(card.key) ?? shown(card);
+
+  const result = new Map<string, Held>();
+  const stack = (members: readonly HoldCard[], edge: HoldEdge) => {
+    const placed: { readonly box: Box; readonly top: number; readonly bottom: number }[] = [];
+    for (const card of [...members].sort((a, b) => a.order - b.order)) {
+      const h = height(card);
+      const under = placed.filter((other) => overX(other.box, card.box));
+      const at =
+        edge === 'top'
+          ? Math.max(ceiling(card), ...under.map((other) => other.bottom + gap))
+          : Math.min(band.bottom, ...under.map((other) => other.top - gap)) - h;
+      placed.push({ box: card.box, top: at, bottom: at + h });
+      result.set(card.key, {
+        edge,
+        top: at,
+        collapsed: collapsed.has(card.key),
+        maxHeight: caps.get(card.key) ?? null,
+      });
+    }
+  };
+  stack(top, 'top');
+  stack(bottom, 'bottom');
+  return result;
+}
+
 // ---------------------------------------------------------------------------
 // The DOM layer.
 // ---------------------------------------------------------------------------
@@ -268,19 +442,33 @@ export interface PlaceOptions {
   readonly sideColumn?: PlacementInput['sideColumn'];
 }
 
-/** The safe region R a card must not cover: the enclosing display equation, else the trigger. */
+/**
+ * The safe region R a card must not cover: the enclosing display equation,
+ * the whole float when the card hangs from the float's own number (its
+ * toolbar's Pin, `float-toolbar.ts`), else the trigger.
+ */
 export const regionOf = (trigger: HTMLElement): HTMLElement =>
-  trigger.closest<HTMLElement>('.katex-display') ?? trigger;
+  trigger.closest<HTMLElement>('.katex-display') ??
+  (trigger.matches('a.keyed-equation__number, a.float-caption__number')
+    ? trigger.closest<HTMLElement>('.keyed-equation, figure')
+    : null) ??
+  trigger;
 
-/** The window below the sticky header, inset by `edge`, in viewport coordinates. */
+/**
+ * The window below the sticky header and between the side panels, inset by
+ * `edge`, in viewport coordinates. A card wider than the article column
+ * centres in this room, not in the whole window: the navigation and the rail
+ * paint over the card layer, so a card reaching under one lost its edge.
+ */
 export function cardBand(edge: number): Box {
   const header = document.querySelector<HTMLElement>('.header');
   const headerBottom = header ? header.getBoundingClientRect().bottom : 0;
   const root = document.documentElement;
+  const { left, right } = sidebarsBetween(edge);
   return {
-    left: edge,
+    left,
     top: Math.max(edge, headerBottom + edge),
-    right: root.clientWidth - edge,
+    right: Math.max(left, right),
     bottom: root.clientHeight - edge,
   };
 }
@@ -354,11 +542,20 @@ export function placeElement(
 ): CardAnchor {
   const band = cardBand(options.edge);
   const bandHeight = Math.max(band.bottom - band.top, 0);
+  const bandWidth = Math.max(band.right - band.left, 0);
   // Measure with all the room the window offers, then keep whatever part of
-  // it the chosen spot allows.
+  // it the chosen spot allows. Only a card wider than the room between the
+  // side panels is narrowed to it, and measured again as it wraps: an inline
+  // cap on every card would replace the stylesheet's own (a reference card's
+  // `80ch`) and let a card grow past it.
   el.style.maxHeight = `${bandHeight}px`;
+  el.style.maxWidth = '';
   moveTo(el, band.left, band.top);
-  const size = el.getBoundingClientRect();
+  let size = el.getBoundingClientRect();
+  if (size.width > bandWidth + EPSILON) {
+    el.style.maxWidth = `${bandWidth}px`;
+    size = el.getBoundingClientRect();
+  }
   const region = regionOf(trigger).getBoundingClientRect();
   const triggerBox = trigger.getBoundingClientRect();
 
@@ -426,7 +623,8 @@ export function anchoredSpot(
 /**
  * Put `el` back at its anchor after the layout moved its trigger (P1). A
  * trigger with no box (inside a closed disclosure) leaves the card where it
- * is. Returns whether the trigger could be measured.
+ * is — `card-manager.ts`'s `foldAway` hides a kept one meanwhile. Returns
+ * whether the trigger could be measured.
  */
 export function reanchorElement(
   el: HTMLElement,

package/src/components/card-side.ts

@@ -176,6 +176,53 @@ export function layoutColumn(
   return tops;
 }
 
+/** S11: the reader's width for docked cards, from the width menu. */
+export type SideWidthPreset = 'default' | 'wide' | 'very-wide';
+
+export interface SideWidthOption {
+  readonly id: SideWidthPreset;
+  readonly label: string;
+  /** Characters a line of the card's text holds; `null` for the default, the column's own width. */
+  readonly characters: number | null;
+}
+
+/** S11: Default is today's width (S1); the others count characters, so they follow the text size. */
+export const SIDE_WIDTH_OPTIONS: readonly SideWidthOption[] = [
+  { id: 'default', label: 'Default', characters: null },
+  { id: 'wide', label: 'Wide', characters: 65 },
+  { id: 'very-wide', label: 'Very wide', characters: 90 },
+];
+
+export interface ClosedRoomInput {
+  readonly windowWidth: number;
+  /** A collapsed side panel's strip. */
+  readonly strip: number;
+  /** The article's own start padding, kept when it is slid fully left. */
+  readonly contentPad: number;
+  readonly articleWidth: number;
+  /** S1: from the article to a side card, and from a side card to the rail. */
+  readonly gap: number;
+}
+
+/** S11: the room beside the article with both side panels collapsed to their strips and the article fully left. */
+export const roomWithPanelsClosed = (input: ClosedRoomInput): number =>
+  input.windowWidth - input.strip - input.contentPad - input.articleWidth - 2 * input.gap - input.strip;
+
+/**
+ * S11: the sizes worth offering: Default always, a wider one only when it
+ * fits that room, so a reader who collapses both panels gets the whole
+ * card. With only Default left, the menu is not shown at all.
+ */
+export function offeredWidths(
+  widths: ReadonlyMap<SideWidthPreset, number>,
+  roomClosed: number,
+): SideWidthPreset[] {
+  return SIDE_WIDTH_OPTIONS.filter(
+    (option) =>
+      option.id === 'default' || (widths.get(option.id) ?? Infinity) <= roomClosed + EPSILON,
+  ).map((option) => option.id);
+}
+
 // ---------------------------------------------------------------------------
 // The DOM layer.
 // ---------------------------------------------------------------------------
@@ -186,6 +233,9 @@ const SLID_ATTRIBUTE = 'data-article-slid';
 const START_PROPERTY = '--explico-article-start';
 /** S9, remembered across pages and visits. */
 const KEEP_LEFT_KEY = 'explico:layout:keep-article-left';
+/** S11: the width menu's choice, and whether the reader has resized a card, which offers the menu. */
+const SIDE_WIDTH_KEY = 'explico:layout:side-card-width';
+const SIDE_WIDTH_OFFERED_KEY = 'explico:layout:side-card-width-offered';
 /** S7: below this there is never a side column, the same breakpoint Starlight drops the rail at. */
 const SIDE_QUERY = '(min-width: 72rem)';
 
@@ -241,6 +291,38 @@ export function railLeftEdge(): number {
   return rect.width > 0 ? rect.left : windowRight;
 }
 
+/**
+ * The navigation's right edge: collapsed, its edge strip's, since the panel
+ * itself widens over the article while it peeks. `null` without a visible
+ * navigation (a phone, a page without one).
+ */
+function navigationRightEdge(): number | null {
+  const pane = document.querySelector<HTMLElement>('.sidebar-pane');
+  if (!pane || pane.getClientRects().length === 0) return null;
+  if (getComputedStyle(pane).visibility === 'hidden') return null;
+  const rect = pane.getBoundingClientRect();
+  if (rect.width === 0) return null;
+  if (root().hasAttribute('data-navigation-hidden')) {
+    const strip = getComputedStyle(root()).getPropertyValue('--layout-edge-rail-width').trim();
+    const width = strip ? remToPx(strip) : Number.NaN;
+    if (Number.isFinite(width) && width > 0) return rect.left + width;
+  }
+  return rect.right;
+}
+
+/**
+ * D2, P2: the room between the navigation and the rail, each `edge` px away,
+ * in viewport x. A placed card stays in it as a moved one does, so neither
+ * side panel paints over part of a card.
+ */
+export function sidebarsBetween(edge: number): { readonly left: number; readonly right: number } {
+  const nav = navigationRightEdge();
+  return {
+    left: (nav ?? 0) + edge,
+    right: railLeftEdge() - edge,
+  };
+}
+
 /**
  * S1, S3, S7: the article and the rail, measured with the article at rest.
  * `null` when the layout can never have a side column: below 72rem, a
@@ -288,49 +370,217 @@ export const readKeepLeft = (): boolean => preferences.get(KEEP_LEFT_KEY) === 't
 
 export const writeKeepLeft = (on: boolean): void => preferences.set(KEEP_LEFT_KEY, String(on));
 
-export interface KeepLeftToggle {
-  /** Show the toggle at the top of the side column (`left`, in viewport x), or hide it. */
-  update(state: { readonly visible: boolean; readonly on: boolean; readonly left: number }): void;
+/** S11: the width menu's choice; Default until the reader picks another. */
+export function readSideWidth(): SideWidthPreset {
+  const stored = preferences.get(SIDE_WIDTH_KEY);
+  return SIDE_WIDTH_OPTIONS.some((option) => option.id === stored)
+    ? (stored as SideWidthPreset)
+    : 'default';
+}
+
+export const writeSideWidth = (preset: SideWidthPreset): void =>
+  preferences.set(SIDE_WIDTH_KEY, preset);
+
+/** S11: the menu is offered once the reader has resized a card by its edge. */
+export const readSideWidthOffered = (): boolean =>
+  preferences.get(SIDE_WIDTH_OFFERED_KEY) === 'true';
+
+export const writeSideWidthOffered = (): void => preferences.set(SIDE_WIDTH_OFFERED_KEY, 'true');
+
+/**
+ * S11: a size in pixels for each option, measured in the card's own text:
+ * Default is `defaultWidth`, the others their characters plus the card's
+ * padding and border.
+ */
+export function sideWidthPixels(layer: HTMLElement, defaultWidth: number): Map<SideWidthPreset, number> {
+  const probe = document.createElement('span');
+  probe.style.cssText =
+    'position:absolute;visibility:hidden;width:100ch;font-size:max(12px,var(--sl-text-sm))';
+  layer.append(probe);
+  const ch = probe.getBoundingClientRect().width / 100;
+  probe.remove();
+  const chrome = remToPx('2rem') + 2;
+  const widths = new Map<SideWidthPreset, number>();
+  for (const option of SIDE_WIDTH_OPTIONS) {
+    widths.set(
+      option.id,
+      option.characters === null ? defaultWidth : Math.round(option.characters * ch + chrome),
+    );
+  }
+  return widths;
+}
+
+/** S11: the room the width menu offers sizes for, with this page's panels and article. */
+export function closedRoom(gap: number): number {
+  const article = articleOf();
+  if (!article) return 0;
+  const style = getComputedStyle(root());
+  const strip = remToPx(style.getPropertyValue('--layout-edge-rail-width').trim() || '2.5rem');
+  const contentPad = remToPx(style.getPropertyValue('--sl-content-pad-x').trim() || '1.5rem');
+  return roomWithPanelsClosed({
+    windowWidth: root().clientWidth,
+    strip,
+    contentPad,
+    articleWidth: article.getBoundingClientRect().width,
+    gap,
+  });
+}
+
+export interface SideControlsState {
+  /** Show the row, or hide it. */
+  readonly visible: boolean;
+  /**
+   * Where the row sits, in viewport x: at the side column's left edge while
+   * the column is in use, else with its right edge `right` px from the
+   * window's, at the article's top right (K1, D7).
+   */
+  readonly at: { readonly left: number } | { readonly right: number };
+  /** S9: "Article left". */
+  readonly keepLeft: { readonly visible: boolean; readonly on: boolean };
+  /** K1: "Carry cards", while a card is kept. */
+  readonly carry: { readonly visible: boolean; readonly on: boolean };
+  /** S11: the width menu, with the sizes it offers; `null` hides it. */
+  readonly width: {
+    readonly offered: readonly SideWidthPreset[];
+    readonly value: SideWidthPreset | 'custom';
+    /** Each size's pixels, for its tooltip. */
+    readonly characters: ReadonlyMap<SideWidthPreset, number | null>;
+  } | null;
+}
+
+export interface SideControls {
+  update(state: SideControlsState): void;
+  /** K2: the row's box while it shows; a card held at the top edge under it stacks below it. */
+  box(): DOMRect | null;
+}
+
+export interface SideControlsHandlers {
+  onKeepLeft(on: boolean): void;
+  onCarry(on: boolean): void;
+  onWidth(preset: SideWidthPreset): void;
+}
+
+/** A switch: a knob and a short label, its full sentence in the tooltip (D6). */
+function createSwitch(label: string, title: string, onToggle: (on: boolean) => void): HTMLButtonElement {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'explico-side-switch';
+  button.title = title;
+  button.setAttribute('aria-pressed', 'false');
+  const knob = document.createElement('span');
+  knob.className = 'explico-side-switch-knob';
+  knob.setAttribute('aria-hidden', 'true');
+  const text = document.createElement('span');
+  text.textContent = label;
+  button.append(knob, text);
+  button.addEventListener('click', () => onToggle(button.getAttribute('aria-pressed') !== 'true'));
+  return button;
 }
 
 /**
- * S9: "Keep the article left", a small toggle at the top of the side column,
- * fixed just under the site header. It mounts right after the card layer,
+ * The row of card controls, fixed just under the site header: at the top of
+ * the side column, "Article left" (S9), "Carry cards" (K1) and, once the
+ * reader has resized a card, the width menu (S11); with no side column in
+ * use, "Carry cards" alone at the article's top right, while a card is kept
+ * (D7). Short labels, so the row fits a 1920 px window's column; each
+ * control's tooltip says it in full. It mounts right after the card layer,
  * so it sits over the cards scrolling past and under the header.
  */
-export function createKeepLeftToggle(
+export function createSideControls(
   after: () => HTMLElement,
-  onToggle: (on: boolean) => void,
-): KeepLeftToggle {
-  let button: HTMLButtonElement | null = null;
+  handlers: SideControlsHandlers,
+): SideControls {
+  let row: HTMLElement | null = null;
+  let keepLeft: HTMLButtonElement | null = null;
+  let carry: HTMLButtonElement | null = null;
+  let width: HTMLLabelElement | null = null;
+  let select: HTMLSelectElement | null = null;
 
   const build = () => {
-    const el = document.createElement('button');
-    el.type = 'button';
-    el.className = 'explico-keep-left';
-    el.dataset.keepArticleLeft = '';
-    el.title = 'Keep the article on the left after the last side card closes';
-    el.setAttribute('aria-pressed', 'false');
-    const knob = document.createElement('span');
-    knob.className = 'explico-keep-left-switch';
-    knob.setAttribute('aria-hidden', 'true');
-    const label = document.createElement('span');
-    label.textContent = 'Keep the article left';
-    el.append(knob, label);
-    el.addEventListener('click', () => onToggle(el.getAttribute('aria-pressed') !== 'true'));
-    return el;
+    row = document.createElement('div');
+    row.className = 'explico-side-controls';
+    row.hidden = true;
+
+    keepLeft = createSwitch(
+      'Article left',
+      'Keep the article on the left after the last side card closes',
+      handlers.onKeepLeft,
+    );
+    keepLeft.dataset.keepArticleLeft = '';
+    carry = createSwitch(
+      'Carry cards',
+      'Keep the cards you pin on screen as you scroll, and bring them along to every page of the course',
+      handlers.onCarry,
+    );
+    carry.dataset.carryCards = '';
+
+    width = document.createElement('label');
+    width.className = 'explico-side-width';
+    width.hidden = true;
+    const caption = document.createElement('span');
+    caption.textContent = 'Width';
+    select = document.createElement('select');
+    select.dataset.sideCardWidth = '';
+    select.setAttribute('aria-label', 'Width of the cards beside the article');
+    select.addEventListener('change', () => {
+      const value = select?.value;
+      if (SIDE_WIDTH_OPTIONS.some((option) => option.id === value)) {
+        handlers.onWidth(value as SideWidthPreset);
+      }
+    });
+    width.append(caption, select);
+
+    row.append(keepLeft, carry, width);
+    after().after(row);
   };
 
   return {
-    update({ visible, on, left }) {
-      if (!visible && !button) return;
-      if (!button?.isConnected) {
-        button = build();
-        after().after(button);
+    box() {
+      return row?.isConnected && !row.hidden ? row.getBoundingClientRect() : null;
+    },
+    update(state) {
+      if (!state.visible && !row) return;
+      if (!row?.isConnected) build();
+      if (!row || !keepLeft || !carry || !width || !select) return;
+      row.hidden = !state.visible;
+      if (!state.visible) return;
+      const { at } = state;
+      row.style.left = 'left' in at ? `${Math.round(at.left)}px` : '';
+      row.style.right = 'right' in at ? `${Math.round(at.right)}px` : '';
+      row.dataset.at = 'left' in at ? 'column' : 'article';
+      keepLeft.hidden = !state.keepLeft.visible;
+      keepLeft.setAttribute('aria-pressed', String(state.keepLeft.on));
+      carry.hidden = !state.carry.visible;
+      carry.setAttribute('aria-pressed', String(state.carry.on));
+      const menu = state.width;
+      width.hidden = !menu;
+      if (!menu) return;
+      const options = SIDE_WIDTH_OPTIONS.filter((option) => menu.offered.includes(option.id));
+      const wanted = [
+        ...options.map((option) => [option.id, option.label] as const),
+        ...(menu.value === 'custom' ? [['custom', 'Custom'] as const] : []),
+      ];
+      const current = Array.from(select.options, (option) => `${option.value}=${option.text}`).join('|');
+      const next = wanted.map(([value, text]) => `${value}=${text}`).join('|');
+      if (current !== next) {
+        select.replaceChildren(
+          ...wanted.map(([value, text]) => {
+            const option = document.createElement('option');
+            option.value = value;
+            option.textContent = text;
+            if (value === 'custom') option.disabled = true;
+            return option;
+          }),
+        );
       }
-      button.hidden = !visible;
-      button.setAttribute('aria-pressed', String(on));
-      if (visible) button.style.left = `${Math.round(left)}px`;
+      select.value = menu.value;
+      const characters = menu.value === 'custom' ? null : menu.characters.get(menu.value);
+      width.title =
+        menu.value === 'custom'
+          ? 'A card here has a width of its own, from its edge; pick a size for every card'
+          : characters
+            ? `Cards beside the article hold ${characters} characters a line`
+            : 'Cards beside the article at their usual width';
     },
   };
 }