@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.19.0

package/DESIGN.md

@@ -212,6 +212,9 @@ spacing:
   row-min: "34px"
   reading-measure: "68ch"
   chart-plot: "160px"
+  reel-gutter: "16px"
+  reel-column-min: "280px"
+  reel-pane-min: "120px"
 components:
   button:
     backgroundColor: "{colors.paper}"
@@ -914,6 +917,8 @@ The Deck is one centred column, `max-width: 1160px` (`--deck`), padded 24px top,
 
 **Toasts:** the stack sits 16px in from the bottom right, `min(360px, 100vw - 32px)` wide, newest lowest, 10px apart, standing 12px clear of a showing Banner (anchored to it); on a phone it spans the bottom. While the system's Dialog is open the stack moves inside it, so a toast raised from a card prints above the card and can be used; a raw `<dialog>` an adopter opens with `showModal()` is not followed.
 
+**Reel:** a row of columns of windows that fills whatever holds it and scrolls sideways when the columns are wider than it, and down where a column's panes need more than its height, `--reel-gutter` (16px) between columns, between a column's panes and at either end. A column's width is a share of the reel's (`width × (view − gutter) − gutter`, so columns whose shares add up to one fill it exactly), never under `--reel-column-min` (280px); a column is the reel's height and a pane's height its share of its column by weight, never under `--reel-pane-min` (120px), a column of more panes than fit growing taller. The shares a width steps through (a third, half, two thirds, the whole) are the component's, in its code, not tokens: they are the words it says as much as the sizes it prints.
+
 **Rail:** a column of panels beside the deck (`--rail`, 272px, then the deck centred in what is left), fixed from the top bar's lower edge (hung from it by anchor positioning, like the stage) to the window's bottom, scrolling itself, padded `24px 10px 24px 20px` so its panels' shadows print. At 900px and under it leaves the page: the deck starts with a small button (the `sidebar` glyph and the rail's name) that opens the same element as a drawer.
 
 Frames with no surface of their own (Deck, Wall, Stage) are described here rather than among the components.
@@ -926,7 +931,7 @@ Breakpoints: 600px (phone; the page title steps to 18px, stats two across, the w
 
 ### Named Rules
 
-**The Panel Scroll Rule.** The page scrolls; a panel does not, except a board column above 900px, a card body inside a dialog, the rail, and a window's body (a window is sized by the canvas, not by its content). A stage never scrolls. A wide table, a long code line or a run of bar columns scrolls horizontally inside its own panel and never widens the deck.
+**The Panel Scroll Rule.** The page scrolls; a panel does not, except a board column above 900px, a card body inside a dialog, the rail, a window's body (a window is sized by the canvas, not by its content), and a reel, which scrolls sideways, and down where a column is taller than it, its windows sized by its columns. A stage never scrolls. A wide table, a long code line or a run of bar columns scrolls horizontally inside its own panel and never widens the deck.
 
 **The 24px Target Rule.** Every target is at least 24px square. A control drawn smaller (a tab, a glyph-switch option, a filter chip, a row toggle, a clickable mark or tag, a text button, a crumb, an error-summary link) keeps its look and takes the pointer over an invisible 24px square centred on it; an icon button never gives up its 24px to a full line (a tag beside it clips first), and links in a list stand 24px apart so no two squares overlap.
 
@@ -1052,7 +1057,7 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 - **Banner** → `div.banner > span.glyph (.error, .ok, .quiet) + span`: a fixed paper slip on the 3px shadow with a 26px glyph box in the Notice's tones and a sentence that says what happens to the reader's work. It holds a state the whole interface is in, for as long as it lasts, one at a time. It is not a live region (it arrives already holding its sentence, which would go unheard): the application says the state once, when it begins, with the `Announcer.Announce` Command. `"Error"` (the default; red, bang): a state that stops work (offline). `"Warn"` (amber): a state that is passing (reconnecting). `"Ok"` (ink, check): the state just ended (back online), shown briefly and then taken away. `"Quiet"` (head, info): news. With the connection word it is one pair: LinkState `"Reconnecting"` beside a warn Banner, `"Offline"` beside an error Banner with a retry, then `"Online"` beside an ok Banner for a moment; `"Connecting"` takes none.
 - **Rail** (Submodel) → `div.railed > main.deck#main + aside.rail[popover="auto"][aria-label]`: the rail's panels (a tree, places, filters) beside the deck's, after it in the markup so the page's main content and its h1 come first in reading order; the stylesheet fixes the rail at the left under the top bar. One element serves both layouts, so nothing in it renders twice or loses its state: at rest it stands there (its `popover` attribute is inert until opened), and at 900px and under it is hidden and `span.rail-open > button.btn.small[aria-expanded]` at the top of the deck opens it as a drawer: a slice of the dithered ground, `min(320px, 100vw - 40px)` wide from the left edge, closed by a 2px ink rule and the 8px card shadow, entering from the left in three steps over a veil. Its head (`div.rail-head`: the name in the label register and a close IconButton) shows only in the drawer. Opening focuses its first control; Escape, a click on the veil, the close glyph or focus leaving closes it, and all but the last return focus to the button. Widening the window past 900px closes it. The parent reads whether the drawer is open with `Rail.isOpen`, to hold its own page keys while the drawer covers the page. A file tree flush in a rail panel (or any panel) drops its own border.
 - **Stage** → `main.stage#main > div.stage-work > div.stage-canvas + div.stage-tools + div.stage-bar`: see Layout. `paused` (a Notice saying why: the link dropped, the page is read-only) veils the work when editing stops: `div.stage-paused[role="status"]` lays the dialog veil and its ink grain over everything and centres that Notice on the 3px button shadow, while the work beneath is `inert`. It lifts when `paused` is not given; the connection word says reconnecting meanwhile.
-- **Window** → `section.panel.window (.flush) > header.panel-tb + div.window-body + div.panel-foot`: a Panel for a stage, as tall and wide as whatever places it (and moved by it, if anything moves it). Its title bar is the panel's, trimmed to hold tools: 30px tall (`3px 3px 3px 10px`), centred, with an optional kind glyph, the title (clipped with an ellipsis), a status chip (its border turns paper so it reads on ink), tools and a close IconButton, both in the bar's paper. The body scrolls inside (`16px`, a 14px grid); flush, what fills it (a code surface, a file tree, a diff) drops its border and fills it. A foot is a panel foot; a notice there takes the whole line.
+- **Window** → `section.panel.window (.flush) > header.panel-tb + div.window-body + div.panel-foot`: a Panel for a stage or a reel, as tall and wide as whatever places it (and moved by it, if anything moves it). Its title bar is the panel's, trimmed to hold tools: 30px tall (`3px 3px 3px 10px`, its left trimmed to 3px under a `lead`), centred, with an optional `lead` (`span.panel-lead`, a quiet IconButton: a Reel's grip), an optional kind glyph, the title (clipped with an ellipsis), a status chip (its border turns paper so it reads on ink), tools and a close IconButton, both in the bar's paper. The body scrolls inside (`16px`, a 14px grid); flush, what fills it (a code surface, a file tree, a diff) drops its border and fills it. A foot is a panel foot; a notice there takes the whole line.
 - **Loading** → `div.loading[role="status"]`: where content is on its way, centred like an EmptyState at `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) muted line ("loading the items") ending in the 6×11px working cursor. Its status element stays in the page and only its words change: with `isLoading` false it is `div.loading-idle[role="status"]`, empty and out of the flow (`position: absolute`, never `display: none`, which would drop the live region), so it takes no room and no gap at the top of a panel's or a card's body, and a screen reader hears the line when it arrives. The content or an EmptyState takes its place on screen; the line never prints beside either. It is not the page's live region (the Announcer's).
 - **Remote** → spread where content goes: data that loads, in each of Foldkit's `AsyncData` states, with the retry built in, so a failure is never shown without its way back. A Loading line (`loading <label>`) leads in every state, in place, so its status is heard, and holds its words only while the first load runs: a refresh over data already shown is quiet, so a page that polls is not heard each time. Retry takes its button away with the notice, so the update returns focus to the line (its `id`) with the retry, where a first load is heard. A failure with nothing to show is an error Notice titled "<Label> not loaded", the reason (`toErrorText`) under it and a small "retry" button (`onRetry`); a refresh that failed over data already shown (stale) is a warn Notice titled "<Label> not refreshed" with the same reason and retry, above the last data; loaded and refreshing data is the caller's `toDataView` alone, an EmptyState for none included.
 - **Disclosure** (a View over `@foldkit/ui`'s Disclosure; the caller keeps whether it is open) → `div.disclosure > button.disclosure-summary[aria-expanded] + div.disclosure-body`. The summary is a control-register line (`3px 0`) of a 12px `caret-right` glyph, `span.disclosure-label` (a dotted underline on hover) and an optional `span.meta` pushed right; open, the caret turns a quarter in one step (a right angle keeps the grid). The body hangs from the caret on a 1px Rule Grey guide, its content level with the summary's words (`margin-left: 5px`, `padding-left: 14px`), in a 14px grid. For what a reader opens on purpose (grants to edit, details, a danger zone), never to hide the one thing the screen is for.
@@ -1107,6 +1112,22 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 **Sortable** (Submodel over `@foldkit/ui`'s DragAndDrop, for items the reader puts in order: a list of rows, a grid of tiles, or a grid of the page's panels) → `div.sortable (.grid, .panels)` holding `ul.sortable-items[aria-label]` (a plain list: no listbox, so an item's content may hold anything) of `li.sortable-item (.movable, .drag-dim, .drop-before, .drop-after)`, each a grip, then `div.sortable-body` with the parent's content, and the list's keyboard help in a `p.sr-only`. `"List"` (the default) prints rows edge to edge between 1px rules, for a flush panel, `8px 16px 8px 10px`; `"Grid"` prints tiles that wrap, 180px and up, 12px apart: paper slips in a 2px ink border on the 3px print shadow. `"Panels"` prints each item as the parent's own Panel, up to three across in the deck's 24px gutter and 300px and up, so two across and then one as the column narrows; a row takes its tallest panel's height, each panel's foot sits at its bottom, and the list hands each item its grip (`render.grip`) for the panel's `lead` instead of printing it beside the item. The held copy is the whole panel, tinted head on the 8px card shadow, under ids of its own, and the drop line runs down the middle of the gutter. `isReadOnly`, for a reader who may look but not reorder, prints every grip held and lifts nothing, as holding moves does. Each item starts with a quiet `button.iconbtn` grip (in a panel's title bar, for `"Panels"`) (the grip glyph, named "Move <label>", `aria-roledescription="draggable"`, `aria-pressed`, described by the keyboard help); while moves are held it stays, held (`aria-disabled`, in the keyboard), so focus on it stays put when holding moves cancels one. Only the grip lifts an item, under a mouse, a finger or a pen (`cursor: grab` and `touch-action: none` on a movable grip only), so the rest of an item selects its text and a finger on it scrolls the page; the keyboard takes the grip too: Space or Enter picks the item up, every arrow moves it one place in reading order, Space or Enter drops it, Escape puts it back (taken before a dialog or the page's keys see it), and Tab leaves it where it is. Only the pointer that pressed moves the item; the browser cancelling it puts the item back. The held item dims to 40% in place (`.drag-dim`) and keeps its own print; a copy of it, `.lifted`, tinted head on the 8px card shadow in a 2px ink border (`aria-hidden`, `inert`, rendered with `isLifted`, so it carries no ids), follows the pointer in `div.sortable-lift`, or, held by the keyboard, prints in the list where it would land, in `li.sortable-slot`, counted as no item. Where a pointer would drop it, a 2px dashed ink line prints beside the item it lands next to (`.drop-before`, or `.drop-after` past the last), over the layout, so nothing moves under the pointer. The pointer's place is read from the item whose centre is closest, across where items sit side by side and down a column, and read again where the pointer is let go, so a page that scrolled under a still pointer drops where the pointer is. Each step is said through the page's live region in words from the item's `label` and its place, counted from one ("Beta, 3 of 4."). The items are the parent's: a drop reports `Moved`, and the parent moves the item, or decides not to, and flashes it; a drop where the item was, outside the list, or while moves are held reports nothing. While a pointer presses or carries an item the page's root carries `data-pixel-paper-dragging`, which prints the grabbing cursor everywhere and holds text selection.
 
+### Reel
+
+**Reel** (Submodel, holding its own drag state rather than `@foldkit/ui`'s DragAndDrop, whose targets are positions in a list and whose pointer reads the items under it; for a workspace of windows side by side: terminals, an editor, a browser, a canvas, in columns the reader arranges) → `div.reel[role="group"][aria-label][data-reel]` holding the scroller `div.reel-view`, whose `div.reel-track` holds, in order, `div.reel-gap` (the gap before the first column), then per column `div.reel-column[data-reel-column]` (the column's id; its share in `--reel-width`) with `div.reel-column-head` (the column's grip and `span.reel-width`, its share in the state register: `1/2`, `full`), a `div.reel-slot` per pane (`--reel-weight`, `--reel-anchor`) and between two slots `div.reel-split[role="separator"][aria-orientation="horizontal"]` ("Height of <pane>", `data-reel-split` the id of the pane above it), and after each column `div.reel-gap.reel-resize[role="separator"][aria-orientation="vertical"]` ("Width of column 2", its share as `aria-valuenow` and in words as `aria-valuetext`, `data-reel-resize` its column's id), then `div.reel-panes` with a `div.reel-pane[data-reel-pane][tabindex="-1"]` per pane, each the parent's Window with the pane's grip as its `lead`; after the scroller, the grips' keyboard help in a `p.sr-only` and, while a pointer carries a pane or a column, `div.reel-lift` with its copy. The reel takes its height from whatever holds it. The layout is the parent's (`Reel.Layout`: columns, each an id, a width and its panes, each an id, a label and a weight), passed to the view and, as `{ layout }`, to `update`, so the reel never holds a copy that could go stale. Whenever the parent changes the layout (a request it applied, another client's, a pane it closed), it calls `Reel.reconcile` with the layout as it is now.
+
+**The Pane Order Rule.** The panes are in the page in one order, by id, whatever their layout, and each is drawn over its slot by anchor positioning (`anchor-name` on the slot, `position-anchor` and `anchor()` insets on the pane; the track is the containing block and the pane layer is `display: contents`). A move changes where a pane is drawn and never its place in the page, so a terminal, a video or an embedded browser keeps its focus, its scroll and its state through any move, and a new pane is inserted among the others without moving them. So Tab follows ids, not columns: give panes ids that sort by when they were made (ULID, UUIDv7) and the reading order is the order they were opened; the keys below move by place.
+
+**The Id Rule.** Everything the reel asks of the layout names panes and columns by id, never by position: a pane into a column at a place among its panes, a pane into a column of its own before a column (or after the last), a column before another, a column's width, its panes' weights by pane id. So a request means what it meant after the layout changed under it, applied at once, later, on a server or after another client's move, and what is held keeps its target the same way. A request naming a pane or column the layout no longer has changes nothing. A column `Reel.apply` makes for a pane pulled out takes the pane's id (`notes`, or `notes/2` where a column has it), so pane and column ids share one namespace.
+
+Each pane's grip, and each column's, is a quiet `button.iconbtn[data-reel-grip]` (the grip glyph, "Move <pane>" or "Move column 2", `aria-roledescription="draggable"`, `aria-pressed`, described by the help). Only a grip lifts, under a mouse, a finger or a pen (`cursor: grab`, `touch-action: none`), so a pane's text selects and a terminal takes the pointer; it carries once the pointer has moved 5px. A held pane dims to 40% in place (`.drag-dim`); its copy, drawn by the reel from the labels (the title bars alone, tinted head on the 8px card shadow, `aria-hidden`, `inert`, no ids), follows the pointer, the panes of a held column stacked in it, so whatever a pane holds is never built twice. Where it would drop, a 2px dashed ink line prints down the gap it would open (`.drop-here`, a new column there for a pane, the column's new place for a column) or across the gutter between the panes it would join (`.drop-before`, `.drop-after`), over the layout, so nothing moves under the pointer; near either edge of the reel the reel scrolls under a carried pane, by time, not frames. On the keyboard, Space or Enter on a grip picks it up and the grip takes the keys while it holds it: ← and → step from a column to the gap beside it and on to the next, ↑ and ↓ move among a column's panes, and Space or Enter drops it. Escape puts it back, taken before a dialog sees it, and so does focus leaving the grip (Tab, a click elsewhere), so a field reached by Tab types as it should. A stop where the drop would change nothing is passed over, but for where it started. A column dropped by the keyboard gets its grip's focus back, since a column's element moves with it. Each step is said through the page's live region ("Notes, 2 of 2 in column 2 of 3.", and at a gap "Notes, column 4 of 4.", the new column it would make). A held pane or column that leaves the layout cancels the move ("Move cancelled."), and one held over a column that leaves aims back where it started, so the arrows go on from there.
+
+The splitters size by pointer or by the side arrows (a width) and up and down (a height), 5% of the reel or the column a press, unmodified only: a modified arrow is the application's. A splitter moves a share of the reel's width, or of its column's height, from the sizes the layout holds, never the sizes printed, which the stylesheet may hold at their least: a width goes no narrower than a tenth, and a pane keeps a twentieth of its column, and the stylesheet keeps both at their least on screen. A height splitter sizes the pane above it, named by id, against whichever pane is below it in the layout when the drag moves, so a reorder while it is dragged never resizes a pane in its place; it lets go when the pane above it has no pane below. While a splitter is dragged the reel prints the new sizes as a preview and asks for the size only when let go; the browser cancelling the pointer, or Escape, puts it back.
+
+The reel binds no page keys: the application binds its own and calls `Reel.perform` with an `Action` (focus a pane to any side, move the focused pane to any side, into a column of its own, move its column, or step its column through the shares). Moving a pane sideways past the last column, from a column it shares, opens a new column for it. The specimen binds herdr's on the reel's frame, so they act while focus is in the reel and leave the page's keys alone: Command (Super) and Option for focus (H J K L and the arrows), with Shift to move the pane, with Control too (H, L) to move its column, E to pull a pane into a column of its own and R to step its width. They act while a field in the reel has focus, as a terminal's input does, and are matched by the key (`KeyboardEvent.code`), since Option on a Mac turns a letter into another character. A browser keeps some (Chrome on a Mac opens its developer tools on ⌘⌥J), and an Electron application's default menu takes ⌘⌥H for Hide Others: drop that role to bind it.
+
+Focus is the reel's: one pane is focused (`.focused`, its window on the 8px card shadow), the one that last took focus or that a key moved to; `reconcile` reads its place again from each changed layout, so when it goes, focus finds the pane now nearest where it was, whoever moved it. A focus key puts the keyboard in the pane's control marked `data-reel-focus` (a terminal's input), else on the pane itself (ringed outside its window), and the browser scrolls the pane into view by the least distance either way, its gutter kept by `scroll-margin` (motion is stepped or instant, and a follow is instant); a pointer focusing a pane does not scroll the reel. When the focused pane leaves the layout with the keyboard in it, `reconcile` puts the keyboard in the pane now nearest where it was; focus the reader put elsewhere stays there. Each focus and move is said ("Diff, column 2 of 3.", "Shell moved to 1 of 2 in column 2 of 3.", "Column 1 takes two thirds of the width."). Every move and resize reports what it asks (`MovedPane`, `PulledOutPane`, `MovedColumn`, `ResizedColumn`, `ResizedPanes`), which `Reel.apply` applies to a layout, so the parent can apply it at once and keep or replace it when its source answers; a pane that joins a column takes that column's mean weight and an emptied column is dropped. An application that draws something of its own over a pane (a native view) measures the pane's bounds itself, which follows the reel's scroll, moves and resizes alike.
+
 ### Inputs / Fields
 
 - **Field** (a View over `@foldkit/ui`'s Input) → `div.field (.boxed, .mono) > label + input + p.field-error + p.field-help`, the label naming the input and the help describing it; a failed field prints why in `p.field-error` (sans, Urgent Red) under the control, which is `aria-invalid` and described by it before its help, and the ErrorSummary above the fields says it again; a required field's control is `aria-required`; the input's `type` the platform's (`"date"` for the browser's date control) when given. **SelectField** (over `@foldkit/ui`'s Select) → `div.field > label + select + p.field-error + p.field-help`, its options in order and a group's under an `optgroup` heading, an option that is listed but not choosable `disabled`; **TextareaField** (over `@foldkit/ui`'s Textarea) → `div.field (.mono) > label + textarea + p.field-error + p.field-help`, opening at `rows` lines. Both name, describe and mark their control as a Field does. **Fieldset** → `fieldset.field > legend.field-label`, then the controls, `p.field-error` and `p.field-help`, its error and its help linked with `aria-describedby`; **FieldGrid** → `div.field-grid` (auto-fit, 160px minimum); **Fields** → `fieldset.stack.gap-m`: a form's fields as one column `--space-m` (14px) apart, a body's gap, on the layout primitives with no rule of its own. `isBusy` (a save in flight) sets `disabled` and `aria-busy` on it, so every control holds at once and nothing changes under the save; the submit Button stays outside it, `isBusy`, so it keeps focus. A disabled control prints its value in Muted Ink; a boxless one also drops its dotted baseline (the mark of a place to type), a boxed one or a select mutes its box and caret.
@@ -1200,7 +1221,7 @@ Installing: see README.md beside this file. The package is a Foldkit library. It
 
 The peers in `package.json` are pinned to the Foldkit line pixel-paper is built and tested against. Foldkit is pre-1.0, so a caret range admits patches only; a new Foldkit minor is a new pixel-paper release.
 
-Without Foldkit: link `pixel-paper.css` and write the markup named in each component above. The stylesheet relies on these attributes: `aria-current` (`="page"` on a nav segment, a crumb, a menu link and a place's button; `="true"` on `.row` and `.board-card` for the cursor, given `tabindex="0"` while the others take `-1`, on the open file and on a history's current entry), `aria-selected`, `aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled` (on buttons, on a board card's `.title`, on menu items, on a select-all box), `aria-invalid`, `disabled` and `aria-busy` on the Fields `fieldset` while a save is in flight, `aria-hidden="true"` on a button's or menu item's `kbd.key-hint`, `data-label` on stacked-table cells, `data-drag-over` on a drop zone while a file hovers, `data-pixel-paper-dragging` on the root while a sortable's item is pressed or carried, `data-tip` on glyph-only controls (the words the page's one tip shows), native `<dialog>` for overlays and native `[popover]` for the rail's drawer and tips. Behaviour the components own (board moves, a menu's placement and arrow keys, a context menu's placement and focus, tips, a toolbar's roving focus, the palette cursor, tab arrows, focus into dialogs, an error summary's focus, the flash, the remembered palette, the toast stack's hold and focus, a player's controls, the key help) is the adopter's to write.
+Without Foldkit: link `pixel-paper.css` and write the markup named in each component above. The stylesheet relies on these attributes: `aria-current` (`="page"` on a nav segment, a crumb, a menu link and a place's button; `="true"` on `.row` and `.board-card` for the cursor, given `tabindex="0"` while the others take `-1`, on the open file and on a history's current entry), `aria-selected`, `aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled` (on buttons, on a board card's `.title`, on menu items, on a select-all box), `aria-invalid`, `disabled` and `aria-busy` on the Fields `fieldset` while a save is in flight, `aria-hidden="true"` on a button's or menu item's `kbd.key-hint`, `data-label` on stacked-table cells, `data-drag-over` on a drop zone while a file hovers, `data-pixel-paper-dragging` on the root while a sortable's item or a reel's pane is pressed or carried, `--reel-width`, `--reel-weight` and `--reel-anchor` on a reel's columns, slots and panes, `data-reel-focus` on the control in a pane focus lands on, `data-tip` on glyph-only controls (the words the page's one tip shows), native `<dialog>` for overlays and native `[popover]` for the rail's drawer and tips. Behaviour the components own (board moves, a reel's moves, sizes and focus, a menu's placement and arrow keys, a context menu's placement and focus, tips, a toolbar's roving focus, the palette cursor, tab arrows, focus into dialogs, an error summary's focus, the flash, the remembered palette, the toast stack's hold and focus, a player's controls, the key help) is the adopter's to write.
 
 Palette: with no `data-scheme` the page follows `prefers-color-scheme`, live, in CSS alone. `Scheme.SchemeSwitch` is a Submodel with no service to provide: choosing a scheme returns its `PinScheme` Command, which sets or clears `data-scheme` on `<html>` (`"light"` for paper, `"dark"` for plum) and remembers the choice in `localStorage` (storage that refuses still switches the page; the choice is just not kept); `SchemeSwitch.select` does the same from outside the switch (a palette entry). `SchemeSwitch.init()` returns the switch on `"System"`, as the server renders it, with a `ReadScheme` Command the client runs after hydration, which reads the scheme `schemeScript` pinned before first paint; map its Commands into the application's `init`. Its Subscription follows `prefers-color-scheme` (Foldkit's `Dom.streamFromMediaQuery`), so the switch knows the palette `"System"` prints in. Read the choice with `SchemeSwitch.scheme` and the palette the page prints in, `"Paper"` or `"Plum"` (`Scheme.Palette`), with `SchemeSwitch.palette`: the pinned one, or under `"System"` the system's, followed as it changes (`"Paper"` until the browser reports, as the server renders). A scheme chosen in another tab is seen on that page's next load, not live. Put `schemeScript` inline in the page's `<head>` so a remembered palette applies before first paint. A subtree with `color-scheme: dark` prints plum colours inside a paper page, the dither too, which is how the specimen shows both palettes side by side.
 
@@ -1208,7 +1229,7 @@ Palette: with no `data-scheme` the page follows `prefers-color-scheme`, live, in
 
 How a component in this package is made. The components follow these rules, and a new one follows them too; a review finding against one of them is a defect, not a style note.
 
-**The two kinds.** A **View** is a stateless render helper, `X.view(config, h)`: the caller owns any state and passes its Messages in the config. Copy `src/button/`, `src/notice/` or `src/card/` (a container with slots). A **Submodel** has a Model, Message, OutMessage, `init`, `update` and a `view` made with `defineView`, embedded with `h.submodel`. Build it over the matching `@foldkit/ui` component when there is one. Copy `src/dialog/` (over a `@foldkit/ui` component, with a Mount that reads real key events), `src/confirmDialog/` (over another Submodel, with OutMessages) or `src/keyHelp/` (with its own Subscription). Clocks come from the Model (`Time.clockEntry`), keys from `Dom.streamFromKeyBindings`, and browser services through an Effect service the application provides as a Layer in its `resources` (CopyButton's `Clipboard`, from `@effect/platform-browser`); a Command that only touches the page it runs in does so directly, inside its Effect (SchemeSwitch's `PinScheme`).
+**The two kinds.** A **View** is a stateless render helper, `X.view(config, h)`: the caller owns any state and passes its Messages in the config. Copy `src/button/`, `src/notice/` or `src/card/` (a container with slots). A **Submodel** has a Model, Message, OutMessage, `init`, `update` and a `view` made with `defineView`, embedded with `h.submodel`. Build it over the matching `@foldkit/ui` component when there is one and it fits; one that would need more than one `@foldkit/ui gap` note to fit (the Reel, beside DragAndDrop) holds its own state. Copy `src/dialog/` (over a `@foldkit/ui` component, with a Mount that reads real key events), `src/confirmDialog/` (over another Submodel, with OutMessages) or `src/keyHelp/` (with its own Subscription). Clocks come from the Model (`Time.clockEntry`), keys from `Dom.streamFromKeyBindings`, and browser services through an Effect service the application provides as a Layer in its `resources` (CopyButton's `Clipboard`, from `@effect/platform-browser`); a Command that only touches the page it runs in does so directly, inside its Effect (SchemeSwitch's `PinScheme`).
 
 Each component is `src/<name>/<name>.ts` with an explicit `index.ts`, a colocated `<name>.test.ts` (a Story for update, a Scene for view), an `export * as` line in `src/index.ts`, a section with an example file on the specimen's components page (`site/src/example/`, and its name in `site/src/covers.ts`, which a test holds against `src/index.ts`), and an entry in this document. The `index.ts` is the namespace's public surface and nothing more: `view` and its config types, and for a Submodel its Model, Message, `init`, `update`, Commands, Mounts and accessors. Only `src/index.ts` imports it: inside `src/` a file, a test included, imports the file that defines what it needs (`../button/button.ts`, `../glyph/glyphs.ts`). What several components share and no application imports has a folder with no index: `src/attributes/` (the `Attributes` type), `src/slot/` (`slotView`, an optional slot in its one element), `src/locale/`, `src/keys/`, `src/subscription/`. `src/focus/` has one: its `Focus` Command, which focuses an element by id, is a namespace of its own for the application's focus moves, with the `Message` it reports for code that returns it without a union of its own, and each Submodel that returns it re-exports it too, so a parent's test resolves it by the child's name.
 

package/dist/src/drag/drag.d.ts

@@ -21,6 +21,9 @@ export declare const innerControls: (liftingButtons: string) => string;
 export declare const takeEscape: <Message>(event: KeyboardEvent, message: Message) => Option.Option<Message>;
 /** Escape on the window, in the capture phase, as `message`. */
 export declare const escapeKeys: <Message>(message: Message) => Stream.Stream<Message>;
+/** The moves, release and cancel of the pointer `pointerId`, on the document; another
+ *  pointer's are not the drag's. */
+export declare const pressingPointer: (pointerId: number) => Stream.Stream<PointerEvent>;
 /** Sizes the copy that follows the pointer to the element `sourceSelector` finds, and keeps the
  *  pointer where it pressed that element. */
 export declare const measureLift: (element: Element, sourceSelector: string, pressX: number, pressY: number) => void;

package/dist/src/drag/drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../../src/drag/drag.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAiB,MAAM,EAAS,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAKpE;+BAC+B;AAC/B,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAKzE,eAAO,MAAM,OAAO,gBAAiB,aAAa,CAAC,KAAK,KAAG,KAU1D,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,UAAW,KAAK,KAAG,OACmB,CAAC;AAQ9D,eAAO,MAAM,gBAAgB,WACnB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KACnE,aAAa,CAAC,OAE+B,CAAC;AAEjD,eAAO,MAAM,qBAAqB,WACxB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KACxE,aAAa,CAAC,OAEoC,CAAC;AAEtD,eAAO,MAAM,YAAY,WACf,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAC/D,aAAa,CAAC,OAE2B,CAAC;AAE7C,eAAO,MAAM,eAAe,QAAO,aAAa,CAAC,OAER,CAAC;AAE1C,eAAO,MAAM,aAAa,QAAO,aAAa,CAAC,OAER,CAAC;AAIxC,sDAAsD;AACtD,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;4FAC4F;AAC5F,eAAO,MAAM,aAAa,mBAAoB,MAAM,KAAG,MASzC,CAAC;AAMf;4CAC4C;AAC5C,eAAO,MAAM,UAAU,GAAI,OAAO,SACzB,aAAa,WACX,OAAO,KACf,MAAM,CAAC,MAAM,CAAC,OAAO,CAQvB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAMxE,CAAC;AAIL;6CAC6C;AAC7C,eAAO,MAAM,WAAW,YACb,OAAO,kBACA,MAAM,UACd,MAAM,UACN,MAAM,KACb,IAQF,CAAC;AAoBF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cACd,OAAO,UACV,MAAM,WACL,MAAM,WACN,MAAM,KACd,MA+BF,CAAC;AAMF;;8DAE8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAK7C,CAAC"}
+{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../../src/drag/drag.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAiB,MAAM,EAAS,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAKpE;+BAC+B;AAC/B,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAKzE,eAAO,MAAM,OAAO,gBAAiB,aAAa,CAAC,KAAK,KAAG,KAU1D,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,UAAW,KAAK,KAAG,OACmB,CAAC;AAQ9D,eAAO,MAAM,gBAAgB,WACnB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KACnE,aAAa,CAAC,OAE+B,CAAC;AAEjD,eAAO,MAAM,qBAAqB,WACxB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KACxE,aAAa,CAAC,OAEoC,CAAC;AAEtD,eAAO,MAAM,YAAY,WACf,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAC/D,aAAa,CAAC,OAE2B,CAAC;AAE7C,eAAO,MAAM,eAAe,QAAO,aAAa,CAAC,OAER,CAAC;AAE1C,eAAO,MAAM,aAAa,QAAO,aAAa,CAAC,OAER,CAAC;AAIxC,sDAAsD;AACtD,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;4FAC4F;AAC5F,eAAO,MAAM,aAAa,mBAAoB,MAAM,KAAG,MASzC,CAAC;AAMf;4CAC4C;AAC5C,eAAO,MAAM,UAAU,GAAI,OAAO,SACzB,aAAa,WACX,OAAO,KACf,MAAM,CAAC,MAAM,CAAC,OAAO,CAQvB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAMxE,CAAC;AAIL;oCACoC;AACpC,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAS3E,CAAC;AAIJ;6CAC6C;AAC7C,eAAO,MAAM,WAAW,YACb,OAAO,kBACA,MAAM,UACd,MAAM,UACN,MAAM,KACb,IAQF,CAAC;AAoBF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cACd,OAAO,UACV,MAAM,WACL,MAAM,WACN,MAAM,KACd,MA+BF,CAAC;AAMF;;8DAE8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAK7C,CAAC"}

package/dist/src/drag/drag.js

@@ -1,8 +1,8 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-// Shared by Board and Sortable, the two users of @foldkit/ui's DragAndDrop: the phase a drag
-// is in, the DragAndDrop Messages both build, what a press lifts, Escape taken before anything
-// else, the lifted copy's measure, and the closest-centre drop target a sortable resolves for
-// a pointer.
+// Shared by Board and Sortable, the two users of @foldkit/ui's DragAndDrop, and Reel, which
+// holds its own: the phase a drag is in, the DragAndDrop Messages both build, what a press
+// lifts, Escape taken before anything else, the pressing pointer's events, the lifted copy's
+// measure, and the closest-centre drop target a sortable resolves for a pointer.
 import { DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
 import { Array, Effect, Option, Order, Stream, pipe } from "effect";
 import * as Dom from "foldkit/dom";
@@ -79,6 +79,10 @@ export const escapeKeys = (message) => __foldkitBrandViewResult((Dom.streamFromE
     filterMapEvent: (event) => __foldkitBrandViewResult((takeEscape(event, message)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#filterMapEvent"),
     options: { capture: true },
 })), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#escapeKeys");
+// POINTER
+/** The moves, release and cancel of the pointer `pointerId`, on the document; another
+ *  pointer's are not the drag's. */
+export const pressingPointer = (pointerId) => __foldkitBrandViewResult((Stream.filter(Stream.mergeAll(Array.map(["pointermove", "pointerup", "pointercancel"], (type) => __foldkitBrandViewResult((Stream.fromEventListener(document, type)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous")), { concurrency: "unbounded" }), (event) => __foldkitBrandViewResult((event.pointerId === pointerId), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#pressingPointer");
 // LIFTED COPY
 /** Sizes the copy that follows the pointer to the element `sourceSelector` finds, and keeps the
  *  pointer where it pressed that element. */
@@ -110,14 +114,14 @@ const isOnSameRow = (box, other) => __foldkitBrandViewResult((Math.abs(other.top
  * in a column of rows it is read down, so one reading serves a list and a grid.
  */
 export const insertionIndex = (container, heldId, clientX, clientY) => {
-    const items = Array.map(Array.fromIterable(container.querySelectorAll("[data-sortable-id]")), (item) => (__foldkitBrandViewResult(({ id: item.dataset["sortableId"], box: boxOf(item) }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous")));
+    const items = Array.map(Array.fromIterable(container.querySelectorAll("[data-sortable-id]")), (item) => (__foldkitBrandViewResult(({ id: item.dataset["sortableId"], box: boxOf(item) }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~3")));
     // read with the held item in its place: two tiles side by side are a row even while one of
     // them is held
-    const isTiled = Array.some(items, ({ box }, index) => __foldkitBrandViewResult((Option.exists(Array.get(items, index + 1), (next) => __foldkitBrandViewResult((isOnSameRow(box, next.box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~3"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~2"));
-    const boxes = pipe(Array.filter(items, (item) => __foldkitBrandViewResult((item.id !== heldId), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~4")), Array.map(({ box }) => __foldkitBrandViewResult((box), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~5")));
+    const isTiled = Array.some(items, ({ box }, index) => __foldkitBrandViewResult((Option.exists(Array.get(items, index + 1), (next) => __foldkitBrandViewResult((isOnSameRow(box, next.box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~5"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~4"));
+    const boxes = pipe(Array.filter(items, (item) => __foldkitBrandViewResult((item.id !== heldId), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~6")), Array.map(({ box }) => __foldkitBrandViewResult((box), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~7")));
     const distance = (box) => __foldkitBrandViewResult((Math.hypot(box.centreX - clientX, box.centreY - clientY)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#distance");
-    const byDistance = Order.mapInput(Order.Number, ({ box }) => __foldkitBrandViewResult((distance(box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~6"));
-    return __foldkitBrandViewResult((Array.match(Array.map(boxes, (box, index) => (__foldkitBrandViewResult(({ box, index }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~7"))), {
+    const byDistance = Order.mapInput(Order.Number, ({ box }) => __foldkitBrandViewResult((distance(box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~8"));
+    return __foldkitBrandViewResult((Array.match(Array.map(boxes, (box, index) => (__foldkitBrandViewResult(({ box, index }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~9"))), {
         onEmpty: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#onEmpty"),
         onNonEmpty: (candidates) => {
             const { box, index } = Array.min(candidates, byDistance);
@@ -131,4 +135,4 @@ const DRAGGING_ATTRIBUTE = "data-pixel-paper-dragging";
 /** While a pointer presses or carries an item, the page is marked
  *  (`data-pixel-paper-dragging` on the root), so the stylesheet prints the grabbing cursor and
  *  holds text selection, with no style element of its own. */
-export const markDragging = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((document.documentElement.setAttribute(DRAGGING_ATTRIBUTE, "")), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~9")), () => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((document.documentElement.removeAttribute(DRAGGING_ATTRIBUTE)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~11"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~10")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~12")))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~8"));
+export const markDragging = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((document.documentElement.setAttribute(DRAGGING_ATTRIBUTE, "")), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~11")), () => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((document.documentElement.removeAttribute(DRAGGING_ATTRIBUTE)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~13"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~12")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~14")))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~10"));

package/dist/src/index.d.ts

@@ -65,6 +65,7 @@ export * as Prose from "./prose/index.ts";
 export * as QueryChip from "./queryChip/index.ts";
 export * as RadioChoices from "./radioChoices/index.ts";
 export * as Rail from "./rail/index.ts";
+export * as Reel from "./reel/index.ts";
 export * as Remote from "./remote/index.ts";
 export * as Rows from "./rows/index.ts";
 export * as Scheme from "./scheme/index.ts";

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/src/index.js

@@ -65,6 +65,7 @@ export * as Prose from "./prose/index.js";
 export * as QueryChip from "./queryChip/index.js";
 export * as RadioChoices from "./radioChoices/index.js";
 export * as Rail from "./rail/index.js";
+export * as Reel from "./reel/index.js";
 export * as Remote from "./remote/index.js";
 export * as Rows from "./rows/index.js";
 export * as Scheme from "./scheme/index.js";

package/dist/src/reel/index.d.ts

@@ -0,0 +1,4 @@
+export { Layout, OutMessage, Pane, apply } from "./layout.ts";
+export { Action, AnnounceReel, FocusGrip, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.ts";
+export type { InitConfig, PaneRender, UpdateContext, ViewInputs } from "./reel.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/reel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/reel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/reel/index.js

@@ -0,0 +1,2 @@
+export { Layout, OutMessage, Pane, apply } from "./layout.js";
+export { Action, AnnounceReel, FocusGrip, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.js";

package/dist/src/reel/layout.d.ts

@@ -0,0 +1,180 @@
+import { Option, Schema } from "effect";
+/** Schema for one pane as the reel knows it: its id, unique in the reel and the application's
+ *  to keep, its name in words (its grip, its splitter and what screen readers hear), and its
+ *  share of its column's height, a weight against its neighbours'. */
+export declare const Pane: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly label: Schema.String;
+    readonly weight: Schema.Number;
+}>;
+export type Pane = typeof Pane.Type;
+/** Schema for one column: its id, unique among the reel's columns and the application's to
+ *  keep, its width, a fraction of the reel's visible width (1 fills it), and its panes, top
+ *  to bottom. A column `apply` makes for a pane pulled out takes the pane's id (`notes`, or
+ *  `notes/2` where a column has it), so pane and column ids share one namespace. */
+export declare const Column: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly width: Schema.Number;
+    readonly panes: Schema.NonEmptyArray<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly label: Schema.String;
+        readonly weight: Schema.Number;
+    }>>;
+}>;
+export type Column = typeof Column.Type;
+/** Schema for a reel's layout: its columns, left to right. The application's to keep. */
+export declare const Layout: Schema.$Array<Schema.Struct<{
+    readonly id: Schema.String;
+    readonly width: Schema.Number;
+    readonly panes: Schema.NonEmptyArray<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly label: Schema.String;
+        readonly weight: Schema.Number;
+    }>>;
+}>>;
+export type Layout = typeof Layout.Type;
+/** What is held: a pane or a column, by its id. */
+export declare const Subject: import("foldkit/schema").TaggedUnion<{
+    readonly Pane: {
+        paneId: Schema.String;
+    };
+    readonly Column: {
+        columnId: Schema.String;
+    };
+}>;
+export type Subject = typeof Subject.Type;
+/** Where a held pane or column would land: into a column, at a place among its other panes,
+ *  or in the gap before a column (none: after the last), as a column of its own. */
+export declare const Target: import("foldkit/schema").TaggedUnion<{
+    readonly Into: {
+        columnId: Schema.String;
+        index: Schema.Number;
+    };
+    readonly Gap: {
+        maybeBeforeColumnId: Schema.Option<Schema.String>;
+    };
+}>;
+export type Target = typeof Target.Type;
+/** Union of what a reel asks the application to do to its layout, which the application
+ *  applies (`apply` does it) or not, by id, so a request still means what it meant after the
+ *  layout changed under it. `MovedPane`: a pane into a column, at `toIndex` among that
+ *  column's other panes. `PulledOutPane`: a pane into a column of its own, before a column
+ *  (none: after the last). `MovedColumn`: a column to before another (none: last).
+ *  `ResizedColumn`: a column's width. `ResizedPanes`: a column's panes' weights, by pane id. */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+    readonly MovedPane: {
+        paneId: Schema.String;
+        toColumnId: Schema.String;
+        toIndex: Schema.Number;
+    };
+    readonly PulledOutPane: {
+        paneId: Schema.String;
+        maybeBeforeColumnId: Schema.Option<Schema.String>;
+    };
+    readonly MovedColumn: {
+        columnId: Schema.String;
+        maybeBeforeColumnId: Schema.Option<Schema.String>;
+    };
+    readonly ResizedColumn: {
+        columnId: Schema.String;
+        width: Schema.Number;
+    };
+    readonly ResizedPanes: {
+        columnId: Schema.String;
+        weights: Schema.$Record<Schema.String, Schema.Number>;
+    };
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** A splitter: the one after a column, which sizes its width, or the one below a pane, which
+ *  shares the height between it and the pane under it. */
+export declare const Splitter: import("foldkit/schema").TaggedUnion<{
+    readonly Width: {
+        columnId: Schema.String;
+    };
+    readonly Split: {
+        abovePaneId: Schema.String;
+    };
+}>;
+export type Splitter = typeof Splitter.Type;
+/** A resize: a column's width, or its panes' weights. */
+export declare const Resize: Schema.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ResizedColumn", {
+    readonly columnId: Schema.String;
+    readonly width: Schema.Number;
+}>, import("foldkit/schema").CallableTaggedStruct<"ResizedPanes", {
+    readonly columnId: Schema.String;
+    readonly weights: Schema.$Record<Schema.String, Schema.Number>;
+}>]>;
+export type Resize = typeof Resize.Type;
+/** A pane where it sits: its column (and that column's index) and its row. */
+export type Place = Readonly<{
+    column: Column;
+    columnIndex: number;
+    row: number;
+    pane: Pane;
+}>;
+export declare const placeOf: (layout: Layout, paneId: string) => Option.Option<Place>;
+export declare const placeAt: (layout: Layout, columnIndex: number, row: number) => Option.Option<Place>;
+export declare const firstPlace: (layout: Layout) => Option.Option<Place>;
+export declare const columnIndexOf: (layout: Layout, columnId: string) => Option.Option<number>;
+export declare const columnOf: (layout: Layout, columnId: string) => Option.Option<Column>;
+/**
+ * The layout once `request` is applied: what the reel asked, done the way every client does
+ * it. A pane that leaves its column takes the mean weight of the column it joins; a column
+ * left without panes goes; a pane pulled out keeps its old column's width, in a column named
+ * for it. A request naming a pane or column the layout no longer has changes nothing.
+ */
+export declare const apply: (layout: Layout, request: OutMessage) => Layout;
+export declare const widthWords: (width: number) => string;
+export declare const widthMark: (width: number) => string;
+/** The next preset wider than `width`, or the narrowest past the widest. */
+export declare const nextPreset: (width: number) => number;
+/** What a place is called when a drop would leave the pane or column where it is. */
+export declare const WHERE_IT_WAS = "where it was";
+export declare const fill: (template: string, fields: Readonly<Record<string, string | number>>) => string;
+export declare const subjectWords: (layout: Layout, subject: Subject) => Option.Option<string>;
+export declare const placeWords: (layout: Layout, place: Place) => string;
+/** Where `subject` sits in `layout`, in words. */
+export declare const whereWords: (layout: Layout, subject: Subject) => Option.Option<string>;
+/** Where `subject` is now, as a target: a pane at its place, a column in the gap before
+ *  itself. */
+export declare const originOf: (layout: Layout, subject: Subject) => Option.Option<Target>;
+export declare const isPresent: (layout: Layout, subject: Subject) => boolean;
+/** What dropping `subject` at `target` asks of the layout: none where it would change
+ *  nothing (where it is, or a target whose column is gone). */
+export declare const requestOf: (layout: Layout, subject: Subject, target: Target) => Option.Option<OutMessage>;
+/** Where `subject` would be once dropped at `target`, in words. */
+export declare const landingWords: (layout: Layout, subject: Subject, target: Target) => string;
+/** The column a target sits in or before (the last, for the gap after it), which a keyboard
+ *  step scrolls to. */
+export declare const columnOfTarget: (layout: Layout, target: Target) => Option.Option<string>;
+export declare const Step: Schema.Literals<readonly ["Up", "Down", "Left", "Right"]>;
+export type Step = typeof Step.Type;
+/** Whether the column `target` names (into it, or the gap before it) is still in `layout`. */
+export declare const isTargetPresent: (layout: Layout, target: Target) => boolean;
+/** A keyboard step from `target`: left and right cross from a column to the gap beside it and
+ *  on to the next column, up and down move among a column's panes. A stop where the drop would
+ *  change nothing is passed over, but for where `subject` started; with nothing further that
+ *  way, it stays (where `subject` started, if the target's column has gone). */
+export declare const steppedTarget: (layout: Layout, subject: Subject, target: Target, step: Step) => Target;
+/** A column as a pointer reads it: its id, its left and right edges, and the vertical middles
+ *  of its slots, the held pane's left out. */
+export type ColumnBox = Readonly<{
+    id: string;
+    left: number;
+    right: number;
+    slotMiddles: ReadonlyArray<number>;
+}>;
+/** Where a pointer at (`clientX`, `clientY`) over a reel whose columns sit at `columns`, left
+ *  to right, would drop `subject`. A column lands in the gap nearest the pointer, counted by
+ *  the columns whose middle it has passed. A pane over a column's edge band (or over a gap, or
+ *  past the last column) lands in that gap, as a column of its own; over the rest of a column
+ *  it lands among that column's other panes, after each whose middle is above the pointer. */
+export declare const targetAtPoint: (subject: Subject, columns: ReadonlyArray<ColumnBox>, clientX: number, clientY: number) => Target;
+/** What moving `splitter` by `share` asks of the layout, from the sizes the layout holds (not
+ *  the sizes printed, which the stylesheet may hold at a minimum): a width splitter adds
+ *  `share` to its column's width; a pane splitter moves `share` of its column's height from
+ *  the pane below it to the pane above. None when what it sizes is gone. */
+export declare const resizeOf: (layout: Layout, splitter: Splitter, share: number) => Option.Option<Resize>;
+/** Whether what `splitter` sizes is still in `layout`. */
+export declare const isSplitterPresent: (layout: Layout, splitter: Splitter) => boolean;
+//# sourceMappingURL=layout.d.ts.map

package/dist/src/reel/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/reel/layout.ts"],"names":[],"mappings":"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"}