@gjermundgaraba-designs/pixel-paper 0.17.0 → 0.19.0

package/src/panel/panel.ts

@@ -14,6 +14,10 @@ export type ViewConfig = Readonly<{
   id: string;
   /** Pixel caps in the inverted title bar. */
   title: string;
+  /** What screen readers call the panel where its title repeats among its siblings (panels
+   *  titled by a kind, one per account): the title and what tells this one apart. The
+   *  title names it otherwise. */
+  name?: 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>;
@@ -33,13 +37,27 @@ export type ViewConfig = Readonly<{
 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`. */
+ *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { id, title, lead = [], meta, actions = [], body, foot = [], isFlush = false } = config;
+  const {
+    id,
+    title,
+    name,
+    lead = [],
+    meta,
+    actions = [],
+    body,
+    foot = [],
+    isFlush = false,
+  } = config;
 
   return h.keyed("section")(
     id,
-    [h.Id(id), h.AriaLabelledBy(titleId(id)), h.Class("panel")],
+    [
+      h.Id(id),
+      name === undefined ? h.AriaLabelledBy(titleId(id)) : h.AriaLabel(name),
+      h.Class("panel"),
+    ],
     [
       h.header(
         [h.Class("panel-tb")],

package/src/pixel-paper.css

@@ -3433,7 +3433,8 @@ dialog.veil:focus {
   padding: 6px;
 }
 
-.sortable-lift {
+.sortable-lift,
+.reel-lift {
   width: var(--lift-width, 320px);
   translate: var(--lift-x, 0) var(--lift-y, 0);
 }
@@ -3655,6 +3656,16 @@ dialog.veil:focus {
   flex-wrap: wrap;
 }
 
+/* a toned meter's lit cells take its reading's tone, amber from 80% and red at the maximum,
+   unless the reading is stale */
+.meter-row.toned.high:not(.stale) .cells .cell.on {
+  background: var(--amber);
+}
+
+.meter-row.toned.full:not(.stale) .cells .cell.on {
+  background: var(--red);
+}
+
 /* a stale reading prints its cells muted: the number is last known, not current */
 .meter-row.stale .cells .cell.on {
   background: var(--muted);
@@ -4522,7 +4533,7 @@ dialog.veil:focus {
   position: absolute;
 }
 
-/* ---------- monograms: letters in an ink square, where the system draws no logos ---------- */
+/* ---------- monograms: letters in an ink square, or a mark the product draws in cells ---------- */
 
 .monogram {
   display: inline-grid;
@@ -4551,6 +4562,16 @@ dialog.veil:focus {
   color: var(--paper);
 }
 
+/* a mark drawn in cells prints bare, in ink, in the square the letters would take */
+.monogram.drawn {
+  border: 0;
+  background: none;
+}
+
+.monogram.drawn.current {
+  background: var(--ink);
+}
+
 /* ---------- identity: who or what, as its monogram beside its name ---------- */
 
 .identity {
@@ -5101,6 +5122,11 @@ dialog.veil:focus {
   user-select: none;
 }
 
+/* a lead (a reel's grip) trims the bar's left, as a panel's does */
+.window > .panel-tb:has(> .panel-lead) {
+  padding-left: 3px;
+}
+
 .window > .panel-tb h2 {
   flex: 1;
   min-width: 0;
@@ -5143,6 +5169,227 @@ dialog.veil:focus {
   min-width: 0;
 }
 
+/* ---------- the reel: a scrolling row of columns of panes ---------- */
+
+/* the reel takes its height from whatever holds it; the held copy hangs from it, outside the
+   scroller, whose containment would hold a fixed copy inside it */
+.reel {
+  height: 100%;
+  min-height: 0;
+}
+
+/* the scroller, sideways and, where a column is taller than the view, down. Its size is what
+   a column's width (100cqw) and least height (100cqh) are shares of, so it takes no padding */
+.reel-view {
+  height: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+  container-type: size;
+}
+
+/* the columns in a row, and the panes' containing block. Each pane is pinned to its slot by
+   anchor positioning, so a move changes where a pane is drawn and never its place in the page */
+.reel-track {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: max-content;
+  min-width: 100%;
+  min-height: 100%;
+  padding-bottom: var(--reel-gutter);
+}
+
+.reel-gap {
+  position: relative;
+  flex: none;
+  align-self: stretch;
+  width: var(--reel-gutter);
+}
+
+/* a column is width × (view − gutter) − gutter wide, so columns whose widths add up to one
+   fill the view with a gutter between each and at either side; never under the minimum. It is
+   the view's height, and taller where its panes need more, which the view scrolls to */
+.reel-column {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: max(
+    var(--reel-column-min),
+    var(--reel-width) * (100cqw - var(--reel-gutter)) - var(--reel-gutter)
+  );
+  min-height: calc(100cqh - var(--reel-gutter));
+}
+
+/* the column's head, in the gutter above its panes: its grip and its width */
+.reel-column-head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--space-s);
+  padding-block: 4px;
+}
+
+.reel-width {
+  font-family: var(--font-px);
+  font-size: var(--type-state);
+  letter-spacing: var(--tracking-state);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* a slot holds a pane's place, its share of the column by weight; the pane is drawn over it */
+.reel-slot {
+  position: relative;
+  flex: var(--reel-weight, 1) 1 0;
+  min-height: var(--reel-pane-min);
+  anchor-name: var(--reel-anchor);
+}
+
+/* the splitters: the gutter between two panes, and the one after each column */
+.reel-split {
+  position: relative;
+  flex: none;
+  height: var(--reel-gutter);
+  cursor: row-resize;
+  touch-action: none;
+}
+
+.reel-resize {
+  cursor: col-resize;
+  touch-action: none;
+}
+
+/* a splitter shows itself as a 2px ink line along the middle of its gutter while it is
+   hovered or focused; focused, the ring is the system's */
+.reel-resize::after,
+.reel-split::after {
+  content: "";
+  position: absolute;
+  background: var(--ink);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.reel-resize::after {
+  top: 0;
+  bottom: var(--reel-gutter);
+  left: calc(50% - 1px);
+  width: var(--line);
+}
+
+.reel-split::after {
+  left: 0;
+  right: 0;
+  top: calc(50% - 1px);
+  height: var(--line);
+}
+
+.reel-resize:is(:hover, :focus-visible)::after,
+.reel-split:is(:hover, :focus-visible)::after {
+  opacity: 1;
+}
+
+.reel-resize:focus-visible,
+.reel-split:focus-visible {
+  outline-offset: -2px;
+}
+
+/* where a drop would land: a 2px dashed ink line down the gap it would open, or across the
+   gutter between the panes it would join, drawn over the layout so nothing moves under it */
+.reel-gap.drop-here::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: var(--reel-gutter);
+  left: calc(50% - 1px);
+  border-left: var(--line) dashed var(--ink);
+  pointer-events: none;
+}
+
+.reel-slot:is(.drop-before, .drop-after)::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-top: var(--line) dashed var(--ink);
+  pointer-events: none;
+}
+
+.reel-slot.drop-before::before {
+  top: calc(var(--reel-gutter) / -2 - 1px);
+}
+
+.reel-slot.drop-after::before {
+  bottom: calc(var(--reel-gutter) / -2 - 1px);
+}
+
+/* the panes' layer is no box of its own: each pane's containing block is the track */
+.reel-panes {
+  display: contents;
+}
+
+/* a pane or a column scrolled into view keeps its gutter showing */
+.reel-pane,
+.reel-column {
+  scroll-margin: var(--reel-gutter);
+}
+
+.reel-pane {
+  position: absolute;
+  position-anchor: var(--reel-anchor);
+  top: anchor(top);
+  right: anchor(right);
+  bottom: anchor(bottom);
+  left: anchor(left);
+  min-width: 0;
+}
+
+/* the focused pane lifts onto the card shadow; taking focus itself (it holds no control), it
+   keeps the system's ring outside its window */
+.reel-pane.focused > .window {
+  box-shadow: var(--shadow-card);
+}
+
+.reel-pane:focus-visible {
+  outline: 0;
+}
+
+.reel-pane:focus-visible > .window {
+  outline: var(--line) solid var(--ink);
+  outline-offset: 2px;
+}
+
+.reel-pane.drag-dim {
+  opacity: 0.4;
+}
+
+/* only the grips lift: a pane's text selects and its terminal takes the pointer */
+[data-reel-grip] {
+  cursor: grab;
+  touch-action: none;
+}
+
+/* the held copy, following the pointer from the window's corner (its transform puts it at the
+   pointer): the title bars alone, tinted head on the card shadow */
+.reel-lift {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.reel-lifted {
+  display: grid;
+  gap: var(--space-s);
+}
+
+.reel-lifted .window {
+  height: auto;
+  background: var(--head);
+  box-shadow: var(--shadow-card);
+}
+
 /* ---------- images and media: a picture or a player in a 2px ink frame, at rest ---------- */
 
 /* a figure sits at rest wherever it is placed (a panel, prose): no print shadow. The frame

package/src/reel/index.ts

@@ -0,0 +1,20 @@
+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";