@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.20.0

package/src/drag/drag.ts

@@ -1,7 +1,7 @@
-// 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";
@@ -110,6 +110,21 @@ export const escapeKeys = <Message>(message: Message): Stream.Stream<Message> =>
     options: { capture: true },
   });
 
+// 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: number): Stream.Stream<PointerEvent> =>
+  Stream.filter(
+    Stream.mergeAll(
+      Array.map(["pointermove", "pointerup", "pointercancel"] as const, (type) =>
+        Stream.fromEventListener<PointerEvent>(document, type),
+      ),
+      { concurrency: "unbounded" },
+    ),
+    (event) => event.pointerId === pointerId,
+  );
+
 // LIFTED COPY
 
 /** Sizes the copy that follows the pointer to the element `sourceSelector` finds, and keeps the

package/src/index.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/src/pixel-paper.css

@@ -2893,7 +2893,9 @@ dialog.veil:focus {
   align-items: center;
   gap: 10px;
   width: 100%;
-  padding: 8px 16px;
+  /* on a page's tree a choice indents a step a level under the roots (--palette-level), never
+     past a third of the row */
+  padding: 8px 16px 8px calc(16px + min((var(--palette-level, 1) - 1) * 20px, 33%));
   font-family: var(--font-px);
   font-size: var(--type-control);
   text-transform: uppercase;
@@ -2923,6 +2925,11 @@ dialog.veil:focus {
   background-color: var(--head);
 }
 
+/* a choice a query keeps only to show where a found one sits: muted, still pickable */
+.palette-row.context:not([aria-selected="true"]) {
+  color: var(--muted);
+}
+
 .palette-row .hint {
   margin-left: auto;
   font-size: var(--type-state);
@@ -3433,7 +3440,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);
 }
@@ -5121,6 +5129,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;
@@ -5163,6 +5176,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";