@gjermundgaraba-designs/pixel-paper 0.20.1 → 0.22.0

package/src/lineDiff/patch.ts

@@ -0,0 +1,218 @@
+import { Array, Option, String, pipe } from "effect";
+
+import { type DiffRow, diffRowsOfPatch } from "./diff.ts";
+
+// QUOTED PATHS
+
+const ESCAPED_BYTES: Readonly<Record<string, number>> = {
+  a: 7,
+  b: 8,
+  t: 9,
+  n: 10,
+  v: 11,
+  f: 12,
+  r: 13,
+};
+
+// an octal escape is one byte of the name's UTF-8, so the bytes are gathered before decoding
+const QUOTED_PART = /\\([0-7]{3})|\\(.)|[^\\]+/gu;
+
+const bytesOf = (text: string): ReadonlyArray<number> => [...new TextEncoder().encode(text)];
+
+const bytesOfPart = ([part, octal, escaped]: RegExpExecArray): ReadonlyArray<number> => {
+  if (octal !== undefined) {
+    return [Number.parseInt(octal, 8)];
+  } else if (escaped !== undefined) {
+    return Option.match(Option.fromUndefinedOr(ESCAPED_BYTES[escaped]), {
+      onNone: () => bytesOf(escaped),
+      onSome: (byte) => [byte],
+    });
+  } else {
+    return bytesOf(part);
+  }
+};
+
+/** The name a path in git's header stands for: git C-quotes a name with unusual bytes
+ *  (`"caf\303\251.txt"`), and leaves any other as it is. */
+export const unquoted = (path: string): string =>
+  path.length >= 2 && path.startsWith('"') && path.endsWith('"')
+    ? new TextDecoder().decode(
+        Uint8Array.from(
+          Array.flatMap(Array.fromIterable(path.slice(1, -1).matchAll(QUOTED_PART)), bytesOfPart),
+        ),
+      )
+    : path;
+
+// HEADER
+
+const GIT_SECTION = "diff --git ";
+
+// the header is what comes before the first hunk, so a changed line that reads like a header
+// line ("+rename from x") is never taken for one
+const headOf = (section: string): ReadonlyArray<string> =>
+  Array.takeWhile(
+    section.split("\n"),
+    (line) => !line.startsWith("@@") && !line.startsWith("--- "),
+  );
+
+const valueAfter = (head: ReadonlyArray<string>, prefix: string): Option.Option<string> =>
+  pipe(
+    Array.findFirst(head, String.startsWith(prefix)),
+    Option.map((line) => line.slice(prefix.length)),
+  );
+
+const hasLine = (head: ReadonlyArray<string>, prefix: string): boolean =>
+  Option.isSome(valueAfter(head, prefix));
+
+const hasHunk = (section: string): boolean =>
+  Array.some(section.split("\n"), String.startsWith("@@ "));
+
+// git writes one section per file, after whatever precedes the first (a commit's message, a
+// mail's head); a patch without a git header is one section
+const sectionsOf = (patch: string): ReadonlyArray<string> => {
+  const [first = "", ...others] = patch.split(/(?=^diff --git )/mu);
+
+  return Array.isArrayNonEmpty(others) && !first.startsWith(GIT_SECTION)
+    ? others
+    : [first, ...others];
+};
+
+// READING
+
+/** What a diff of two same texts says. */
+export const SAME_NOTE = "No difference: both sides hold the same text.";
+const UNREADABLE_NOTE = "This diff cannot be shown as lines.";
+const BINARY_NOTE = "A binary file: its change has no lines.";
+
+/** A table of the patch's lines; `maybeSide` says which side of a type change it is. */
+type Table = Readonly<{ rows: ReadonlyArray<DiffRow>; maybeSide: Option.Option<string> }>;
+
+/** What `patchView` draws: its notes as a line, then its tables. */
+export type PatchReading = Readonly<{
+  maybeRenamedFrom: Option.Option<string>;
+  notes: ReadonlyArray<string>;
+  tables: ReadonlyArray<Table>;
+}>;
+
+const unreadable: PatchReading = {
+  maybeRenamedFrom: Option.none(),
+  notes: [UNREADABLE_NOTE],
+  tables: [],
+};
+
+const lineNote = (head: ReadonlyArray<string>, hasRows: boolean): Option.Option<string> => {
+  if (hasLine(head, "Binary files ") || hasLine(head, "GIT binary patch")) {
+    return Option.some(BINARY_NOTE);
+  } else if (hasRows) {
+    return Option.none();
+  } else if (hasLine(head, "new file mode ")) {
+    return Option.some("New empty file.");
+  } else if (hasLine(head, "deleted file mode ")) {
+    return Option.some("Deleted empty file.");
+  } else {
+    return Option.none();
+  }
+};
+
+const readSection = (section: string): PatchReading => {
+  const head = headOf(section);
+  const maybeRows = diffRowsOfPatch(section);
+  const maybeRenamedFrom = Option.map(valueAfter(head, "rename from "), unquoted);
+  const notes = [
+    ...Option.toArray(Option.map(maybeRenamedFrom, (from) => `Renamed from ${from}.`)),
+    ...Option.toArray(
+      Option.map(
+        Option.all({ before: valueAfter(head, "old mode "), after: valueAfter(head, "new mode ") }),
+        ({ before, after }) => `Mode ${before} → ${after}.`,
+      ),
+    ),
+    ...Option.toArray(lineNote(head, Option.isSome(maybeRows))),
+  ];
+  const isUnread = Option.isNone(maybeRows) && (hasHunk(section) || Array.isArrayEmpty(notes));
+
+  return isUnread
+    ? unreadable
+    : {
+        maybeRenamedFrom,
+        notes,
+        tables: Option.toArray(
+          Option.map(maybeRows, (rows) => ({ rows, maybeSide: Option.none() })),
+        ),
+      };
+};
+
+const KINDS: Readonly<Record<string, string>> = {
+  "100644": "a file",
+  "100755": "an executable file",
+  "120000": "a symlink",
+  "160000": "a submodule",
+};
+
+const kindOf = (mode: string): string => KINDS[mode] ?? `mode ${mode}`;
+
+const sideTable = (section: string, side: string): ReadonlyArray<Table> =>
+  Option.toArray(
+    Option.map(diffRowsOfPatch(section), (rows) => ({ rows, maybeSide: Option.some(side) })),
+  );
+
+// a file that became a symlink (or any other kind) is two sections for one path: the old
+// kind deleted, then the new one added
+const readTypeChange = (gone: string, added: string): Option.Option<PatchReading> => {
+  const [goneHead, addedHead] = [headOf(gone), headOf(added)];
+
+  return Option.flatMap(
+    Option.all({
+      before: valueAfter(goneHead, "deleted file mode "),
+      after: valueAfter(addedHead, "new file mode "),
+    }),
+    ({ before, after }) =>
+      goneHead[0] === addedHead[0]
+        ? Option.some({
+            maybeRenamedFrom: Option.none(),
+            notes: [`It was ${kindOf(before)} and is now ${kindOf(after)}.`],
+            tables: [...sideTable(gone, "as it was"), ...sideTable(added, "as it is")],
+          })
+        : Option.none(),
+  );
+};
+
+/** What `patchView` makes of a patch: the notes it prints and the tables it draws. */
+export const readPatch = (patch: string): PatchReading => {
+  const text = patch.replaceAll("\r\n", "\n");
+
+  if (String.isEmpty(String.trim(text))) {
+    return { maybeRenamedFrom: Option.none(), notes: [SAME_NOTE], tables: [] };
+  } else {
+    const sections = sectionsOf(text);
+    const [first, second, ...rest] = sections;
+
+    if (first !== undefined && second === undefined) {
+      return readSection(first);
+    } else if (first !== undefined && second !== undefined && Array.isArrayEmpty(rest)) {
+      return Option.getOrElse(readTypeChange(first, second), () => unreadable);
+    } else {
+      return unreadable;
+    }
+  }
+};
+
+// DESCRIPTION
+
+/** What a patch says beyond its lines, as `patchView` prints it. */
+export type PatchDescription = Readonly<{
+  /** The path a rename left, unquoted: for a heading such as `old.txt → new.txt`. */
+  maybeRenamedFrom: Option.Option<string>;
+  /** The sentences `patchView` prints above the patch's lines, or in their place: a rename,
+   *  a mode change, a type change, an empty or binary file, no difference, or a patch it
+   *  cannot show as lines. */
+  notes: ReadonlyArray<string>;
+}>;
+
+/** What `patchView` says about a patch from `git diff`, read from its header: the notes it
+ *  prints (`["Renamed from old.txt."]`), for a caller that prints them itself, and the path a
+ *  rename left. */
+export const describePatch = (patch: string): PatchDescription => {
+  const { maybeRenamedFrom, notes } = readPatch(patch);
+
+  return { maybeRenamedFrom, notes };
+};

package/src/pixel-paper.css

@@ -1249,6 +1249,43 @@ a.fchip {
   border-color: var(--muted);
 }
 
+/* a chip as a cell, where its word would take a title's room: a 10px square, hollow where the
+   chip is plain and filled where it has a tone, so plain and toned differ by form, not hue.
+   Blocked fills red, where the chip only outlines it, and done fills muted, where the chip only
+   tints, since neither an outline nor a tint reads in a 6px cell. Its word is its name and its
+   tip. In a row it keeps the 18px of the glyph cell it stands in */
+.chip-dot {
+  display: inline-block;
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border: var(--line) solid var(--ink);
+  background: transparent;
+}
+
+.chip-dot.go {
+  background: var(--green);
+}
+
+.chip-dot.warn {
+  background: var(--amber);
+}
+
+.chip-dot.blocked {
+  background: var(--red);
+  border-color: var(--red);
+}
+
+.chip-dot.done {
+  background: var(--muted);
+  border-color: var(--muted);
+}
+
+.row > .chip-dot,
+.row > .cell > .chip-dot {
+  margin-inline: 4px;
+}
+
 /* Black on amber preserves 3:1 contrast; an amber glyph on paper does not. */
 .mark {
   display: inline-flex;
@@ -1438,6 +1475,74 @@ button.glyph {
   gap: 6px;
 }
 
+/* a row whose box is its link's target: the link's ::after covers the row (the row places it;
+   the text's clip does not, being no containing block). Only the row's controls and what has a
+   tip sit above it, so a menu stays its own target and a dot's tip still shows, while a chip or
+   a due day is the link's like the rest of the row */
+.row.linked .grow a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.row.linked .grow a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.row.linked :is(button, input, select, textarea, [data-tip], .row-check) {
+  position: relative;
+  z-index: 1;
+}
+
+.row.linked:not(:has(.grow a[aria-current])):hover .grow a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* the keyboard's one stop is the link; its ring is the row's, 4px inside it */
+.row.linked .grow a:focus-visible {
+  outline: 0;
+}
+
+.row.linked:has(.grow a:focus-visible) {
+  outline: var(--line) solid var(--ink);
+  outline-offset: -4px;
+}
+
+/* the row you are on (its link is aria-current) prints inverted, as a place and a board's
+   cursor card do: hover adds nothing, a dot's border takes the paper, what prints muted on
+   paper prints in paper at 0.75, and lateness takes a red slip */
+.row.linked:has(.grow a[aria-current]) {
+  background-color: var(--ink);
+  color: var(--paper);
+}
+
+.row.linked:has(.grow a[aria-current]) .chip-dot {
+  border-color: var(--paper);
+}
+
+.row.linked:has(.grow a[aria-current]) :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
+  color: inherit;
+  opacity: 0.75;
+}
+
+.row.linked:has(.grow a[aria-current]) .tag {
+  border-color: currentColor;
+}
+
+.row.linked:has(.grow a[aria-current]) :is(.due.late, .age.stale) {
+  opacity: 1;
+  background: var(--red);
+  color: var(--on-red);
+  box-shadow: 0 0 0 3px var(--red);
+}
+
+.row.linked:has(.grow a[aria-current]) :focus-visible,
+.row.linked:has(.grow a[aria-current]:focus-visible) {
+  outline-color: var(--paper);
+}
+
 /* the cursor: the one row (or board card) the keyboard's commands act on. It is not focus
    (the ring, which can be elsewhere) and not selection (the box's cell).
 
@@ -4962,7 +5067,8 @@ dialog.veil:focus {
 
 /* one element in two places: at rest, fixed down the left edge from the top bar's lower
    edge (as the stage hangs) and scrolling itself; on a phone the same element opens as a
-   popover drawer */
+   popover drawer. --rail is the reader's width when they gave one: the view sets it on
+   .railed, so the page's padding and the rail's width follow it together */
 .railed {
   padding-left: var(--rail);
 }
@@ -4990,6 +5096,41 @@ dialog.veil:focus {
   min-width: 0;
 }
 
+/* the splitter on the rail's right edge: a 12px strip from the edge outward, over the page's
+   margin and never over the rail's own scrollbar, and beside the rail rather than in it (the
+   rail scrolls, and its drawer's first Tab stop is its first control). It shows itself as a
+   2px ink line down the edge while it is hovered or focused */
+.rail-resize {
+  position: fixed;
+  top: anchor(--topbar bottom, 0px);
+  bottom: var(--statusbar-h, 0px);
+  left: var(--rail);
+  z-index: 1;
+  width: 12px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.rail-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--line);
+  background: var(--ink);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.rail-resize:is(:hover, :focus-visible)::after {
+  opacity: 1;
+}
+
+.rail-resize:focus-visible {
+  outline-offset: -2px;
+}
+
 .rail-head,
 .rail-open {
   display: none;
@@ -5000,14 +5141,15 @@ dialog.veil:focus {
     padding-left: 0;
   }
 
-  .rail[popover]:not(:popover-open) {
+  .rail[popover]:not(:popover-open),
+  .rail-resize {
     display: none;
   }
 
   /* a slice of the ground slides in from the left edge, in three steps */
   .rail[popover]:popover-open {
     inset: 0 auto 0 0;
-    width: min(calc(var(--rail) + 48px), calc(100vw - 40px));
+    width: min(var(--rail-drawer), calc(100vw - 40px));
     height: 100dvh;
     max-height: none;
     padding: 12px 16px var(--gap) 12px;
@@ -5040,6 +5182,49 @@ dialog.veil:focus {
   }
 }
 
+/* ---------- the bench: a page's work, the window wide, under its head ---------- */
+
+/* hung from the top bar's lower edge like the stage, down to the status bar, edge to edge, or
+   from the rail's edge beside one (a fixed box takes nothing from .railed's padding). The head
+   takes its own height; the work takes the rest and lays out what fills it (a reel's height
+   is 100% of it). The page does not scroll */
+.bench {
+  position: fixed;
+  top: anchor(--topbar bottom, 0px);
+  right: 0;
+  bottom: var(--statusbar-h, 0px);
+  left: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.railed > .bench {
+  left: var(--rail);
+}
+
+/* the head lines up with a reel's windows, a reel's gutter in from the edge; the reel's own
+   gutter is the space between the head and the windows */
+.bench-head {
+  display: grid;
+  gap: var(--gap);
+  padding: var(--gap) var(--reel-gutter) 0;
+}
+
+.bench-head > *,
+.bench-work {
+  min-width: 0;
+}
+
+.bench-work {
+  min-height: 0;
+}
+
+@media (max-width: 900px) {
+  .railed > .bench {
+    left: 0;
+  }
+}
+
 /* ---------- the stage: the ground itself, under the top bar, for a canvas ---------- */
 
 /* it does not scroll: what is on it pans. It hangs from the top bar's lower edge */
@@ -5151,6 +5336,12 @@ dialog.veil:focus {
   color: inherit;
 }
 
+/* a child Submodel's tools come back as one element; the group is no box of its own, so its
+   buttons take the bar's gap as the others do */
+.window-tools {
+  display: contents;
+}
+
 .window-body {
   flex: 1;
   min-height: 0;
@@ -5203,7 +5394,7 @@ dialog.veil:focus {
   width: max-content;
   min-width: 100%;
   min-height: 100%;
-  padding-bottom: var(--reel-gutter);
+  padding-block: var(--reel-gutter);
 }
 
 .reel-gap {
@@ -5215,7 +5406,8 @@ dialog.veil:focus {
 
 /* 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 */
+   the view's height less a gutter above and below, and taller where its panes need more, which
+   the view scrolls to */
 .reel-column {
   display: flex;
   flex: none;
@@ -5224,24 +5416,7 @@ dialog.veil:focus {
     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);
+  min-height: calc(100cqh - 2 * var(--reel-gutter));
 }
 
 /* a slot holds a pane's place, its share of the column by weight; the pane is drawn over it */
@@ -5279,7 +5454,7 @@ dialog.veil:focus {
 
 .reel-resize::after {
   top: 0;
-  bottom: var(--reel-gutter);
+  bottom: 0;
   left: calc(50% - 1px);
   width: var(--line);
 }
@@ -5307,7 +5482,7 @@ dialog.veil:focus {
   content: "";
   position: absolute;
   top: 0;
-  bottom: var(--reel-gutter);
+  bottom: 0;
   left: calc(50% - 1px);
   border-left: var(--line) dashed var(--ink);
   pointer-events: none;
@@ -5377,7 +5552,7 @@ dialog.veil:focus {
 }
 
 /* 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 */
+   pointer): the title bar alone, tinted head on the card shadow */
 .reel-lift {
   position: fixed;
   top: 0;
@@ -5386,12 +5561,7 @@ dialog.veil:focus {
   pointer-events: none;
 }
 
-.reel-lifted {
-  display: grid;
-  gap: var(--space-s);
-}
-
-.reel-lifted .window {
+.reel-lift .window {
   height: auto;
   background: var(--head);
   box-shadow: var(--shadow-card);

package/src/rail/index.ts

@@ -3,11 +3,13 @@ export {
   HideRailDrawer,
   Message,
   Model,
+  OutMessage,
   ShowRailDrawer,
   close,
   id,
   init,
   isOpen,
+  subscriptions,
   update,
   view,
 } from "./rail.ts";