@gjermundgaraba-designs/pixel-paper 0.15.0 → 0.16.0

package/DESIGN.md

@@ -1037,7 +1037,7 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 
 ### Panels
 
-- **Panel** → `section.panel[aria-labelledby] > header.panel-tb > h2 + span.meta`, then `div.panel-body` (or the body directly when `isFlush`), then `div.panel-foot`. The section is keyed by its `id`, so a panel among siblings that come and go keeps its own element, and a panel under another id is another element: one that replaces another in the same place is built anew (a live region inside it is inserted, not kept), so keep one panel under one id across states that should share it. Square, 2px ink border, Paper White, panel shadow. The title bar is inverted Departure Mono 13px uppercase 0.08em (`--tracking-title`), `padding: 6px 12px`; its meta is 11px at 75% opacity. A control in a title bar (a panel's, a window's or a card's) rings in paper, 2px inside its own edge, because the ink ring would vanish on the ink bar. The body pads 16px with a 14px grid gap; the foot pads `10px 12px` over a 1px rule, with a `.push` slot that goes right. `actions` puts small Buttons and IconButtons in `span.panel-acts` (6px apart) at the title bar's right end, after the meta; the bar trims to `3px 3px 3px 12px` at 31px or more. On the ink bar a button is a paper outline (a primary one fills paper), flat, nudged 1px when pressed, its ring 4px inside in its own colour; disabled, it prints at 60%.
+- **Panel** → `section.panel[aria-labelledby] > header.panel-tb > span.panel-lead + h2 + span.meta`, then `div.panel-body` (or the body directly when `isFlush`), then `div.panel-foot`. The section is keyed by its `id`, so a panel among siblings that come and go keeps its own element, and a panel under another id is another element: one that replaces another in the same place is built anew (a live region inside it is inserted, not kept), so keep one panel under one id across states that should share it. Square, 2px ink border, Paper White, panel shadow. The title bar is inverted Departure Mono 13px uppercase 0.08em (`--tracking-title`), `padding: 6px 12px`; its meta is 11px at 75% opacity. A control in a title bar (a panel's, a window's or a card's) rings in paper, 2px inside its own edge, because the ink ring would vanish on the ink bar. The body pads 16px with a 14px grid gap; the foot pads `10px 12px` over a 1px rule, with a `.push` slot that goes right. `actions` puts small Buttons and IconButtons in `span.panel-acts` (6px apart) at the title bar's right end, after the meta; the bar trims to `3px 3px 3px 12px` at 31px or more. `lead` puts a quiet IconButton in `span.panel-lead` before the title (a Sortable's grip), and the bar trims its left to 3px the same way; a quiet icon button there prints in paper, hovered too, and held at 60%. On the ink bar a button is a paper outline (a primary one fills paper), flat, nudged 1px when pressed, its ring 4px inside in its own colour; disabled, it prints at 60%.
 - **Deck** → `main.deck#main`: the column of panels.
 - **EmptyState** → `div.empty > h3.empty-title + p`: `headingLevel` is required and picks the title's element, which looks the same at every level. Where the empty state is a page's or a section's main content it is a heading, `3` inside a Panel (whose title is an `h2`), `1` for a gate or a missing page; `"Strong"` prints `strong.empty-title` where it is not (a chart with nothing to chart, a picture of the state). Centred, `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) headline, a muted 46ch sentence, an optional action 6px below.
 - **Wall** → `main.wall`, `Wall.markView` → `div.wall-mark` (a 30px ink-bordered glyph box beside the 22px wordmark). `Wall.cornerView` → `aside.wall-corner[aria-label]`, rendered just before the Wall: a paper slip in a 2px ink box on the 3px shadow, `6px 8px`, holding what a top bar would (see Layout).
@@ -1097,7 +1097,7 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 ### Sortable
 
-**Sortable** (Submodel over `@foldkit/ui`'s DragAndDrop, for items the reader puts in order: a list of rows or a grid of tiles) → `div.sortable (.grid)` 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`, tinted head on hover; `"Grid"` prints tiles that wrap, 180px and up, 12px apart: paper slips in a 2px ink border on the 3px print shadow. Each item starts with a quiet `button.iconbtn` grip (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. A mouse drags an item by its body or its grip (`cursor: grab`); touch takes the grip alone (`touch-action: none` on a movable grip only, so a finger on a row 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. A press on a control inside an item, or on anything `[data-no-lift]`, never lifts it. 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.
+**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`, tinted head on hover; `"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. A mouse drags an item by its body or its grip (`cursor: grab`); touch takes the grip alone (`touch-action: none` on a movable grip only, so a finger on a row 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. A press on a control inside an item, or on anything `[data-no-lift]`, never lifts it. 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.
 
 ### Inputs / Fields
 

package/dist/src/panel/panel.d.ts

@@ -9,6 +9,9 @@ export type ViewConfig = Readonly<{
     id: string;
     /** Pixel caps in the inverted title bar. */
     title: string;
+    /** A quiet IconButton before the title, such as the grip a Sortable of panels hands each
+     *  panel. On the ink bar it prints as `actions` do. */
+    lead?: ReadonlyArray<Html | string>;
     /** A count or state at the title bar's right. */
     meta?: string;
     /** Small Buttons and IconButtons at the title bar's right end, after the meta. On the ink

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

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;gFACgF;AAChF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAmB3E,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;2DACuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;gFACgF;AAChF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoB3E,CAAC"}

package/dist/src/panel/panel.js

@@ -5,9 +5,10 @@ export const titleId = (id) => __foldkitBrandViewResult((`${id}-title`), "@gjerm
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
  *  region landmark (`<section>`) named by its `h2` title, keyed by its `id`. */
 export const view = (config, h) => {
-    const { id, title, meta, actions = [], body, foot = [], isFlush = false } = config;
+    const { id, title, lead = [], meta, actions = [], body, foot = [], isFlush = false } = config;
     return __foldkitBrandViewResult((h.keyed("section")(id, [h.Id(id), h.AriaLabelledBy(titleId(id)), h.Class("panel")], [
         h.header([h.Class("panel-tb")], [
+            ...slotView("span", "panel-lead", lead, h),
             h.h2([h.Id(titleId(id))], [title]),
             ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
             ...slotView("span", "panel-acts", actions, h),

package/dist/src/sortable/sortable.d.ts

@@ -954,13 +954,16 @@ export declare const SizeLiftedItem: Mount.MountDefinitionWithArgs<"SizeLiftedIt
 }, {
     readonly _tag: "CompletedSizeLiftedItem";
 }>;
-/** How the items lay out: a column of rows, or tiles that wrap. */
-export type Layout = "List" | "Grid";
+/** How the items lay out: a column of rows, tiles that wrap, or the parent's own panels. */
+export type Layout = "List" | "Grid" | "Panels";
 /** What the list hands `toItemView` for each item. */
 export type ItemRender = Readonly<{
     /** This render is the held copy: hidden from screen readers and inert. Leave out ids and
      *  anything the page must find once. */
     isLifted: boolean;
+    /** The item's grip, for the `"Panels"` layout, where the item places it: in its panel's
+     *  `lead`. The other layouts print it before the item themselves. */
+    grip: Html;
 }>;
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. The `to*` members
  *  are functions because they may carry the parent's handlers. */
@@ -969,16 +972,21 @@ export type ViewInputs = Readonly<{
     /** Names the list for screen readers. */
     label: string;
     /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
-     *  wrap, 180px and up. */
+     *  wrap, 180px and up. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+     *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
     layout?: Layout;
+    /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+     *  while moves are held, and nothing lifts. */
+    isReadOnly?: boolean;
     /** One item's content, beside its grip. Also called for the held copy, with
      *  `render.isLifted`. */
     toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
 }>;
 /**
- * Items the reader puts in order, as rows or as tiles, built on `@foldkit/ui`'s DragAndDrop:
- * `div.sortable` holding `ul.sortable-items` (named by `label`) of `li.sortable-item`, each its
- * grip and the parent's content. The items are the parent's; a drop reports `Moved`.
+ * Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+ * DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+ * `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+ * title bar). The items are the parent's; a drop reports `Moved`.
  *
  * A mouse drags an item by its body or its grip; touch takes the grip alone, so a finger on
  * an item scrolls the page; the keyboard takes the grip too: Space or Enter picks the item
@@ -1134,8 +1142,12 @@ export declare const view: import("foldkit/submodel").View<{
     /** Names the list for screen readers. */
     label: string;
     /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
-     *  wrap, 180px and up. */
+     *  wrap, 180px and up. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+     *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
     layout?: Layout;
+    /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+     *  while moves are held, and nothing lifts. */
+    isReadOnly?: boolean;
     /** One item's content, beside its grip. Also called for the held copy, with
      *  `render.isLifted`. */
     toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;

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

@@ -1 +1 @@
-{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAC5E,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAa,IAAI,EAAe,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAGvC,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AA0BzC;oDACoD;AACpD,eAAO,MAAM,IAAI;;;EAA6D,CAAC;AAC/E,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC;AAiCpC;iFACiF;AACjF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,oDAAoD;AACpD,eAAO,MAAM,OAAO;;QACO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAE9B,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,KAAK;;;;;;QAEW,MAAM;QAAiB,KAAK;;;;;;QAE5C,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,UAAU;;;QAGV,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,UAAU;;;;;;EAMZ,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;;;;0EAI0E;AAC1E,eAAO,MAAM,UAAU;;QAEnB,MAAM;QACN,SAAS;QACT,OAAO;QACP,gBAAgB;QAChB,iBAAiB;;EAEnB,CAAC;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC;AAIhD;6CAC6C;AAC7C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,kEAAkE;AAClE,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAC;AAOH,0CAA0C;AAC1C,eAAO,MAAM,SAAS,UAAW,KAAK,KAAG,OAC2B,CAAC;AAWrE,2FAA2F;AAC3F,eAAO,MAAM,eAAe;;;;iBAK1B,CAAC;AAIH,KAAK,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;AAuN5E,wFAAwF;AACxF,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCjD,CAAC;AAIL;6DAC6D;AAC7D,eAAO,MAAM,UAAU,UAAW,KAAK,aAAa,OAAO,KAAG,YAG7D,CAAC;AAoBF,QAAA,MAAM,WAAW;;;;EAIf,CAAC;AACH,KAAK,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAU3C,8FAA8F;AAC9F,eAAO,MAAM,eAAe,SAAU,WAAW,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAgBxE,CAAC;AAmDF;;;;6CAI6C;AAC7C,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGACxB,CAAC;AAI/C;0EAC0E;AAC1E,eAAO,MAAM,cAAc;;;;;;EAQzB,CAAC;AAIH,4FAA4F;AAC5F,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;4CACwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB;yEACqE;IACrE,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAAC;AAEH;kEACkE;AAClE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd;;gFAE4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;mDAC+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;6BACyB;IACzB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC;CACrE,CAAC,CAAC;AAyPH;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WApRR,aAAa,CAAC,IAAI,CAAC;IAC1B,yCAAyC;WAClC,MAAM;IACb;;gFAE4E;aACnE,MAAM;IACf;mDAC+C;iBAClC,OAAO;IACpB;6BACyB;gBACb,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,KAAK,aAAa,CAAC,IAAI,CAAC;GAqSnE,CAAC"}

package/dist/src/sortable/sortable.js

@@ -368,9 +368,15 @@ const helpId = (model) => __foldkitBrandViewResult((`${id(model)}-grip-help`), "
 const isHeldItem = (model, itemId) => __foldkitBrandViewResult((UiDragAndDrop.isDragging(model.dragAndDrop) &&
     Option.contains(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop), itemHook(model, itemId))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isHeldItem");
 const liftedGrip = (h) => __foldkitBrandViewResult((h.span([h.Class("iconbtn quiet"), h.AriaHidden(true)], [Glyph.view({ name: "grip" }, h)])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedGrip");
-const liftedView = (info, item, h) => __foldkitBrandViewResult((h.div([h.Class("sortable-item lifted")], [liftedGrip(h), h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: true }))])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedView");
+/** The item's content beside its grip, or, in a layout where the item places its grip,
+ *  alone. */
+const itemContents = (info, item, render, h) => {
+    const body = h.div([h.Class("sortable-body")], info.toItemView(item, render));
+    return __foldkitBrandViewResult((info.layout === "Panels" ? [body] : [render.grip, body]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemContents");
+};
+const liftedView = (info, item, h) => __foldkitBrandViewResult((h.div([h.Class("sortable-item lifted")], itemContents(info, item, { isLifted: true, grip: liftedGrip(h) }, h))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedView");
 const gripView = (info, item, h) => {
-    const { model, items } = info;
+    const { model, isMovable, items } = info;
     const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
     const onGripKey = h.OnKeyDownPreventDefault((key) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ itemId: item.id, items }), () => __foldkitBrandViewResult((isIdleNow && (key === " " || key === "Enter")), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~36"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~35"));
     // NOTE: @foldkit/ui gap: DragAndDrop's `draggable` bundle forces `role="option"`, which a
@@ -381,19 +387,19 @@ const gripView = (info, item, h) => {
         glyph: "grip",
         label: fill(COPY.gripLabel, item.label),
         isQuiet: true,
-        isDisabled: !model.isMovable,
+        isDisabled: !isMovable,
         attributes: [
             h.DataAttribute("draggable-id", itemHook(model, item.id)),
             h.DataAttribute(GRIP_ATTRIBUTE, ""),
             h.AriaRoleDescription("draggable"),
             h.AriaDescribedBy(helpId(model)),
             Button.pressedAttribute(isHeldItem(model, item.id), h),
-            ...(model.isMovable ? [onGripKey] : []),
+            ...(isMovable ? [onGripKey] : []),
         ],
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#gripView");
 };
 const itemAttributes = (info, item, h) => {
-    const { model, items } = info;
+    const { model, isMovable, items } = info;
     const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
     const onPress = h.OnPointerDown((pointerType, button, screenX, screenY, _time, clientX, clientY, pointerId, target) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedItem({
         itemId: item.id,
@@ -403,10 +409,7 @@ const itemAttributes = (info, item, h) => {
         clientX,
         clientY,
         items,
-    }), () => __foldkitBrandViewResult((isIdleNow &&
-        model.isMovable &&
-        button === LEFT_BUTTON &&
-        isLiftingPress(target, pointerType)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~38"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~37"));
+    }), () => __foldkitBrandViewResult((isIdleNow && isMovable && button === LEFT_BUTTON && isLiftingPress(target, pointerType)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~38"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~37"));
     return __foldkitBrandViewResult(([h.DataAttribute(ITEM_ATTRIBUTE, ""), onPress]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemAttributes");
 };
 /** Where a pointer would drop the held item, marked on the item it would land beside: before
@@ -425,15 +428,12 @@ const dropClass = (info, item) => __foldkitBrandViewResult((Option.match(Option.
     onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~5"),
     onSome: ({ side }) => (__foldkitBrandViewResult((side === "Before" ? " drop-before" : " drop-after"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~5")),
 })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dropClass");
-const itemClass = (info, item) => __foldkitBrandViewResult((`sortable-item${info.model.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemClass");
+const itemClass = (info, item) => __foldkitBrandViewResult((`sortable-item${info.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemClass");
 const itemView = (info, item, h) => __foldkitBrandViewResult((h.keyed("li")(item.id, [
     ...UiDragAndDrop.sortable(itemHook(info.model, item.id)),
     ...itemAttributes(info, item, h),
     h.Class(itemClass(info, item)),
-], [
-    gripView(info, item, h),
-    h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: false })),
-])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemView");
+], itemContents(info, item, { isLifted: false, grip: gripView(info, item, h) }, h))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemView");
 /** The items in order, with the held item's copy where the keyboard would drop it: before the
  *  other item at its target, or last. The copy carries no `data-sortable-id`, so it is not
  *  counted as an item. */
@@ -473,10 +473,12 @@ const liftedCopyView = (info, h) => {
         })),
     ], [liftedView(info, held.item, h)])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~57")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedCopyView");
 };
+const layoutClass = (layout) => __foldkitBrandViewResult((Match.value(layout).pipe(Match.withReturnType(), Match.when("List", () => __foldkitBrandViewResult(("sortable"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~58")), Match.when("Grid", () => __foldkitBrandViewResult(("sortable grid"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~59")), Match.when("Panels", () => __foldkitBrandViewResult(("sortable panels"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~60")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#layoutClass");
 /**
- * Items the reader puts in order, as rows or as tiles, built on `@foldkit/ui`'s DragAndDrop:
- * `div.sortable` holding `ul.sortable-items` (named by `label`) of `li.sortable-item`, each its
- * grip and the parent's content. The items are the parent's; a drop reports `Moved`.
+ * Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+ * DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+ * `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+ * title bar). The items are the parent's; a drop reports `Moved`.
  *
  * A mouse drags an item by its body or its grip; touch takes the grip alone, so a finger on
  * an item scrolls the page; the keyboard takes the grip too: Space or Enter picks the item
@@ -487,9 +489,16 @@ const liftedCopyView = (info, h) => {
  * the keys.
  */
 export const view = defineView((model, viewInputs, h) => {
-    const { items, label, layout = "List", toItemView } = viewInputs;
-    const info = { model, items, maybeDropMark: dropMarkOf(model), toItemView };
-    return __foldkitBrandViewResult((h.div([h.Class(layout === "Grid" ? "sortable grid" : "sortable")], [
+    const { items, label, layout = "List", isReadOnly = false, toItemView } = viewInputs;
+    const info = {
+        model,
+        layout,
+        isMovable: model.isMovable && !isReadOnly,
+        items,
+        maybeDropMark: dropMarkOf(model),
+        toItemView,
+    };
+    return __foldkitBrandViewResult((h.div([h.Class(layoutClass(layout))], [
         // NOTE: Safari takes list semantics from a list printed without markers, so the list
         // says it is one
         h.ul([
@@ -500,5 +509,5 @@ export const view = defineView((model, viewInputs, h) => {
         ], itemsView(info, h)),
         h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
         ...liftedCopyView(info, h),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~58");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~61");
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/panel/panel.ts

@@ -14,6 +14,9 @@ export type ViewConfig = Readonly<{
   id: string;
   /** Pixel caps in the inverted title bar. */
   title: string;
+  /** A quiet IconButton before the title, such as the grip a Sortable of panels hands each
+   *  panel. On the ink bar it prints as `actions` do. */
+  lead?: ReadonlyArray<Html | string>;
   /** A count or state at the title bar's right. */
   meta?: string;
   /** Small Buttons and IconButtons at the title bar's right end, after the meta. On the ink
@@ -32,7 +35,7 @@ export const titleId = (id: string): string => `${id}-title`;
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
  *  region landmark (`<section>`) named by its `h2` title, keyed by its `id`. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { id, title, meta, actions = [], body, foot = [], isFlush = false } = config;
+  const { id, title, lead = [], meta, actions = [], body, foot = [], isFlush = false } = config;
 
   return h.keyed("section")(
     id,
@@ -41,6 +44,7 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
       h.header(
         [h.Class("panel-tb")],
         [
+          ...slotView("span", "panel-lead", lead, h),
           h.h2([h.Id(titleId(id))], [title]),
           ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
           ...slotView("span", "panel-acts", actions, h),

package/src/pixel-paper.css

@@ -983,23 +983,32 @@ a.textbtn {
   flex: 1 1 100%;
 }
 
-/* ---------- the panel's title-bar actions ---------- */
+/* ---------- the panel's title-bar lead and actions ---------- */
 
-/* small buttons and icon buttons at the bar's right end; the bar trims its padding around
-   them, as a window's does, so a small button keeps the bar near its one-line height */
-.panel-tb:has(> .panel-acts) {
+/* small buttons and icon buttons at the bar's right end, and an icon button before the
+   title; the bar trims its padding around them, as a window's does, so a small button keeps
+   the bar near its one-line height */
+.panel-tb:has(> :is(.panel-lead, .panel-acts)) {
   align-items: center;
   padding-block: 3px;
-  padding-right: 3px;
   min-height: 31px;
 }
 
-.panel-tb:has(> .panel-acts) h2 {
+.panel-tb:has(> .panel-lead) {
+  padding-left: 3px;
+}
+
+.panel-tb:has(> .panel-acts) {
+  padding-right: 3px;
+}
+
+.panel-tb:has(> :is(.panel-lead, .panel-acts)) h2 {
   flex: 1;
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
+.panel-lead,
 .panel-acts {
   display: inline-flex;
   align-items: center;
@@ -1014,6 +1023,7 @@ a.textbtn {
 
 /* on the ink bar a button prints in paper: an outline, or filled when primary. No print
    shadow (it cannot show on ink), so a press nudges 1px, as a toolbar tool does */
+.panel-lead .btn,
 .panel-acts .btn {
   color: var(--paper);
   background: var(--ink);
@@ -1026,6 +1036,7 @@ a.textbtn {
   background: var(--paper);
 }
 
+.panel-lead .btn:not([aria-disabled="true"]):active,
 .panel-acts .btn:not([aria-disabled="true"]):active {
   transform: translate(1px, 1px);
   box-shadow: none;
@@ -1038,12 +1049,17 @@ a.textbtn {
   opacity: 0.6;
 }
 
-.panel-acts .iconbtn.quiet {
+/* a quiet icon button prints in paper, and a hover cannot darken it to the ink of the bar */
+.panel-lead .iconbtn.quiet,
+.panel-acts .iconbtn.quiet,
+.panel-lead .iconbtn.quiet:hover,
+.panel-acts .iconbtn.quiet:hover {
   color: inherit;
 }
 
 /* the ring sits 4px inside the button in its own text colour, so it reads on an outline and
    on a filled one alike */
+.panel-lead .btn:focus-visible,
 .panel-acts .btn:focus-visible {
   outline-color: currentColor;
   outline-offset: -4px;
@@ -2692,8 +2708,8 @@ dialog.veil:focus {
   opacity: 0.75;
 }
 
-/* a held close glyph fades on the bar, as a held button in a panel's title bar does */
-.card-tb .iconbtn[aria-disabled="true"] {
+/* a held icon button fades on the bar, as a held button in a panel's title bar does */
+:is(.card-tb, .panel-tb) .iconbtn[aria-disabled="true"] {
   opacity: 0.6;
   cursor: default;
 }
@@ -3394,7 +3410,7 @@ dialog.veil:focus {
   bottom: -1px;
 }
 
-.sortable.grid .sortable-item:is(.drop-before, .drop-after)::before {
+.sortable:is(.grid, .panels) .sortable-item:is(.drop-before, .drop-after)::before {
   top: -2px;
   bottom: -2px;
   left: auto;
@@ -3454,6 +3470,67 @@ dialog.veil:focus {
   padding: 0;
 }
 
+/* panels: the parent's own panels, up to three across in the deck's gutter and 300px and up,
+   so two across and then one as the column narrows. A row takes its tallest panel's height,
+   and each panel's foot sits at its bottom */
+.sortable.panels .sortable-items {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, max(300px, (100% - 2 * var(--gap)) / 3)), 1fr)
+  );
+  gap: var(--gap);
+}
+
+.sortable.panels .sortable-item {
+  display: block;
+  padding: 0;
+  border-bottom: 0;
+  background: none;
+}
+
+.sortable.panels .sortable-item.movable:hover {
+  background: none;
+}
+
+.sortable.panels .sortable-body {
+  height: 100%;
+}
+
+.sortable.panels .sortable-body > .panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sortable.panels .sortable-body > .panel > .panel-foot {
+  margin-top: auto;
+}
+
+/* the drop line runs down the middle of the gutter */
+.sortable.panels .sortable-item.drop-before::before {
+  left: calc(var(--gap) / -2 - 1px);
+}
+
+.sortable.panels .sortable-item.drop-after::before {
+  right: calc(var(--gap) / -2 - 1px);
+}
+
+/* the held copy is the panel itself, tinted head and lifted onto the card shadow */
+.sortable.panels .sortable-item.lifted {
+  border: 0;
+  box-shadow: none;
+}
+
+.sortable.panels .lifted .panel {
+  background: var(--head);
+  box-shadow: var(--shadow-card);
+}
+
+.sortable.panels .sortable-slot {
+  padding: 0;
+}
+
 /* while a pointer carries an item, the page grabs and selects nothing */
 :root[data-pixel-paper-dragging] {
   user-select: none;

package/src/sortable/sortable.ts

@@ -565,14 +565,17 @@ export const SizeLiftedItem = Mount.define("SizeLiftedItem", {
 
 // VIEW
 
-/** How the items lay out: a column of rows, or tiles that wrap. */
-export type Layout = "List" | "Grid";
+/** How the items lay out: a column of rows, tiles that wrap, or the parent's own panels. */
+export type Layout = "List" | "Grid" | "Panels";
 
 /** What the list hands `toItemView` for each item. */
 export type ItemRender = Readonly<{
   /** This render is the held copy: hidden from screen readers and inert. Leave out ids and
    *  anything the page must find once. */
   isLifted: boolean;
+  /** The item's grip, for the `"Panels"` layout, where the item places it: in its panel's
+   *  `lead`. The other layouts print it before the item themselves. */
+  grip: Html;
 }>;
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. The `to*` members
@@ -582,8 +585,12 @@ export type ViewInputs = Readonly<{
   /** Names the list for screen readers. */
   label: string;
   /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
-   *  wrap, 180px and up. */
+   *  wrap, 180px and up. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+   *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
   layout?: Layout;
+  /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+   *  while moves are held, and nothing lifts. */
+  isReadOnly?: boolean;
   /** One item's content, beside its grip. Also called for the held copy, with
    *  `render.isLifted`. */
   toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
@@ -610,6 +617,8 @@ const isLiftingPress = (target: EventTarget | null, pointerType: string): boolea
 
 type ListInfo = Readonly<{
   model: Model;
+  layout: Layout;
+  isMovable: boolean;
   items: ReadonlyArray<Item>;
   maybeDropMark: Option.Option<DropMark>;
   toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
@@ -624,6 +633,18 @@ const isHeldItem = (model: Model, itemId: string): boolean =>
 const liftedGrip = <ParentMessage>(h: HtmlBuilder<ParentMessage>): Html =>
   h.span([h.Class("iconbtn quiet"), h.AriaHidden(true)], [Glyph.view({ name: "grip" }, h)]);
 
+/** The item's content beside its grip, or, in a layout where the item places its grip,
+ *  alone. */
+const itemContents = <ParentMessage>(
+  info: ListInfo,
+  item: Item,
+  render: ItemRender,
+  h: HtmlBuilder<ParentMessage>,
+): ReadonlyArray<Html> => {
+  const body = h.div([h.Class("sortable-body")], info.toItemView(item, render));
+  return info.layout === "Panels" ? [body] : [render.grip, body];
+};
+
 const liftedView = <ParentMessage>(
   info: ListInfo,
   item: Item,
@@ -631,11 +652,11 @@ const liftedView = <ParentMessage>(
 ): Html =>
   h.div(
     [h.Class("sortable-item lifted")],
-    [liftedGrip(h), h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: true }))],
+    itemContents(info, item, { isLifted: true, grip: liftedGrip(h) }, h),
   );
 
 const gripView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html => {
-  const { model, items } = info;
+  const { model, isMovable, items } = info;
   const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
 
   const onGripKey: Attribute<Message> = h.OnKeyDownPreventDefault((key) =>
@@ -654,14 +675,14 @@ const gripView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html =>
       glyph: "grip",
       label: fill(COPY.gripLabel, item.label),
       isQuiet: true,
-      isDisabled: !model.isMovable,
+      isDisabled: !isMovable,
       attributes: [
         h.DataAttribute("draggable-id", itemHook(model, item.id)),
         h.DataAttribute(GRIP_ATTRIBUTE, ""),
         h.AriaRoleDescription("draggable"),
         h.AriaDescribedBy(helpId(model)),
         Button.pressedAttribute(isHeldItem(model, item.id), h),
-        ...(model.isMovable ? [onGripKey] : []),
+        ...(isMovable ? [onGripKey] : []),
       ],
     },
     h,
@@ -673,7 +694,7 @@ const itemAttributes = (
   item: Item,
   h: HtmlBuilder<Message>,
 ): ReadonlyArray<Attribute<Message>> => {
-  const { model, items } = info;
+  const { model, isMovable, items } = info;
   const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
 
   const onPress = h.OnPointerDown(
@@ -689,10 +710,7 @@ const itemAttributes = (
           items,
         }),
         () =>
-          isIdleNow &&
-          model.isMovable &&
-          button === LEFT_BUTTON &&
-          isLiftingPress(target, pointerType),
+          isIdleNow && isMovable && button === LEFT_BUTTON && isLiftingPress(target, pointerType),
       ),
   );
 
@@ -739,7 +757,7 @@ const dropClass = (info: ListInfo, item: Item): string =>
   );
 
 const itemClass = (info: ListInfo, item: Item): string =>
-  `sortable-item${info.model.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`;
+  `sortable-item${info.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`;
 
 const itemView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html =>
   h.keyed("li")(
@@ -749,10 +767,7 @@ const itemView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html =>
       ...itemAttributes(info, item, h),
       h.Class(itemClass(info, item)),
     ],
-    [
-      gripView(info, item, h),
-      h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: false })),
-    ],
+    itemContents(info, item, { isLifted: false, grip: gripView(info, item, h) }, h),
   );
 
 /** The items in order, with the held item's copy where the keyboard would drop it: before the
@@ -819,10 +834,20 @@ const liftedCopyView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<
   );
 };
 
+const layoutClass = (layout: Layout): string =>
+  Match.value(layout).pipe(
+    Match.withReturnType<string>(),
+    Match.when("List", () => "sortable"),
+    Match.when("Grid", () => "sortable grid"),
+    Match.when("Panels", () => "sortable panels"),
+    Match.exhaustive,
+  );
+
 /**
- * Items the reader puts in order, as rows or as tiles, built on `@foldkit/ui`'s DragAndDrop:
- * `div.sortable` holding `ul.sortable-items` (named by `label`) of `li.sortable-item`, each its
- * grip and the parent's content. The items are the parent's; a drop reports `Moved`.
+ * Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+ * DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+ * `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+ * title bar). The items are the parent's; a drop reports `Moved`.
  *
  * A mouse drags an item by its body or its grip; touch takes the grip alone, so a finger on
  * an item scrolls the page; the keyboard takes the grip too: Space or Enter picks the item
@@ -833,11 +858,18 @@ const liftedCopyView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<
  * the keys.
  */
 export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { items, label, layout = "List", toItemView } = viewInputs;
-  const info: ListInfo = { model, items, maybeDropMark: dropMarkOf(model), toItemView };
+  const { items, label, layout = "List", isReadOnly = false, toItemView } = viewInputs;
+  const info: ListInfo = {
+    model,
+    layout,
+    isMovable: model.isMovable && !isReadOnly,
+    items,
+    maybeDropMark: dropMarkOf(model),
+    toItemView,
+  };
 
   return h.div(
-    [h.Class(layout === "Grid" ? "sortable grid" : "sortable")],
+    [h.Class(layoutClass(layout))],
     [
       // NOTE: Safari takes list semantics from a list printed without markers, so the list
       // says it is one