@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.19.0

package/src/sortable/sortable.ts

@@ -23,6 +23,7 @@ import {
   movedPointer,
   phaseOf,
   pressedDraggable,
+  pressingPointer,
   releasedPointer,
 } from "../drag/drag.ts";
 import * as Glyph from "../glyph/glyph.ts";
@@ -472,23 +473,14 @@ const pointerAt = (hold: PointerHold, event: PointerEvent): PointerAt => ({
 });
 
 /** The pressing pointer's moves, release and cancel; another pointer's are not the list's. */
-export const pointerMessages = (hold: PointerHold): Stream.Stream<Message> => {
-  const fromPressing = (type: "pointermove" | "pointerup" | "pointercancel") =>
-    Stream.fromEventListener<PointerEvent>(document, type).pipe(
-      Stream.filter((event) => event.pointerId === hold.pointerId),
-    );
-
-  const streams: ReadonlyArray<Stream.Stream<Message>> = [
-    Stream.map(fromPressing("pointermove"), (event) =>
-      Message.MovedPointer(pointerAt(hold, event)),
-    ),
-    Stream.map(fromPressing("pointerup"), (event) =>
-      Message.ReleasedPointer(pointerAt(hold, event)),
+export const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
+  Stream.map(pressingPointer(hold.pointerId), (event) =>
+    Match.value(event.type).pipe(
+      Match.when("pointermove", () => Message.MovedPointer(pointerAt(hold, event))),
+      Match.when("pointerup", () => Message.ReleasedPointer(pointerAt(hold, event))),
+      Match.orElse(() => Message.CancelledPointer()),
     ),
-    Stream.map(fromPressing("pointercancel"), () => Message.CancelledPointer()),
-  ];
-  return Stream.mergeAll(streams, { concurrency: "unbounded" });
-};
+  );
 
 const ownSubscriptions = Subscription.make<Model, Message>()((entry) => ({
   pointer: entry(

package/src/tokens.css

@@ -139,6 +139,11 @@
   --shadow-pressed: 1px 1px 0 var(--shadow-color);
   --shadow-danger: 3px 3px 0 var(--shadow-danger-color);
 
+  /* ---------- the reel: a scrolling row of columns of panes ---------- */
+  --reel-gutter: 16px; /* between columns, and between the panes of a column */
+  --reel-column-min: 280px; /* the narrowest a column prints, whatever its width */
+  --reel-pane-min: 120px; /* the shortest a pane prints */
+
   /* ---------- charts ---------- */
   --chart-plot: 160px; /* a line chart's plot, between its top line and its axis */
 

package/src/window/window.ts

@@ -14,6 +14,8 @@ export type ViewConfig<Message> = Readonly<{
   id: string;
   /** Pixel caps in the inverted title bar. */
   title: string;
+  /** A quiet IconButton before the kind glyph: a Reel's grip. */
+  lead?: ReadonlyArray<Html>;
   /** What kind of thing it is: a terminal, a note, a machine. */
   glyph?: GlyphName;
   /** A chip in the title bar: its state. */
@@ -36,6 +38,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
   const {
     id,
     title,
+    lead = [],
     glyph,
     status = [],
     tools = [],
@@ -55,6 +58,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
       h.header(
         [h.Class("panel-tb")],
         [
+          ...slotView("span", "panel-lead", lead, h),
           ...(glyph === undefined ? [] : [Glyph.view({ name: glyph }, h)]),
           h.h2([h.Id(titleId(id))], [title]),
           ...status,