@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/outline/tree.mjs

@@ -0,0 +1,248 @@
+// The outline's model (outline/index.mjs reads the page into entries; this file is pure, so the unit
+// tests hold it: tests/unit/outline.mjs): the tree of headings, the rows it shows with what is folded,
+// the row that marks the current heading, the keys that move through the rows, and the strip's lines.
+//
+// An entry is one of:
+//   { kind: "heading", key, level (1-4), text, ref }   a heading block
+//   { kind: "scope", entries }                         a box that keeps its headings to itself: a row
+//                                                      of columns, a disclosure, a tab's panel
+//   { kind: "tabs", key, tabs: [{ key, text, shown, ref, entries }] }
+//                                                      a tabs area, its tabs in their row's order
+// A node of the tree: { key, kind: "heading" | "tab", text, ref, shown (a tab), children }.
+
+// The highest level (the smallest number) of the headings in `entries`, Infinity for none.
+function topLevel(entries) {
+  let level = Infinity;
+  for (const entry of entries) {
+    if (entry.kind === "heading") level = Math.min(level, entry.level);
+    else if (entry.kind === "scope") level = Math.min(level, topLevel(entry.entries));
+    else if (entry.kind === "tabs") for (const tab of entry.tabs) level = Math.min(level, topLevel(tab.entries));
+  }
+  return level;
+}
+
+/**
+ * The tree of `entries`: a heading closes the open ones of its level and deeper and nests under the one
+ * left open, so a level the report skips does not indent twice (h2 then h4 is one step) and a report
+ * starting at h3 has its h3s at the top. A scope (a row of columns, a disclosure) stands where its
+ * highest heading would: it closes the open headings of that level and deeper, and its headings nest
+ * under what is left open; when it ends its own headings are closed, so what follows goes on under
+ * what was open before it (a column's h3 never takes in the section's next paragraphs' headings), and
+ * the outline keeps the page's order. A tabs area too: a node per tab that holds a heading (the others
+ * are left out; an area with none adds nothing), in the tab row's order, each tab's headings under it.
+ */
+export function treeOf(entries) {
+  const roots = [];
+  const stack = []; // { level, node }: the headings open
+  const into = () => (stack.length ? stack.at(-1).node.children : roots);
+  const close = (level) => { while (stack.length && stack.at(-1).level >= level) stack.pop(); };
+  for (const entry of entries) {
+    if (entry.kind === "scope") {
+      close(topLevel(entry.entries));
+      into().push(...treeOf(entry.entries));
+    } else if (entry.kind === "heading") {
+      close(entry.level);
+      const node = { key: entry.key, kind: "heading", text: entry.text, ref: entry.ref ?? null, children: [] };
+      into().push(node);
+      stack.push({ level: entry.level, node });
+    } else if (entry.kind === "tabs") {
+      close(topLevel([entry]));
+      for (const tab of entry.tabs) {
+        const children = treeOf(tab.entries);
+        if (children.length) into().push({ key: tab.key, kind: "tab", text: tab.text, shown: Boolean(tab.shown), ref: tab.ref ?? null, children });
+      }
+    }
+  }
+  return roots;
+}
+
+/** The tree's nodes in reading order (a node, then what it holds). */
+export function nodesOf(tree, out = []) {
+  for (const node of tree) {
+    out.push(node);
+    nodesOf(node.children, out);
+  }
+  return out;
+}
+
+/** The keys of the tree's nodes. */
+export const keysOf = (tree) => new Set(nodesOf(tree).map((node) => node.key));
+
+/**
+ * The rows the outline shows: [{ node, depth, parent (the parent's row, -1 at the top) }], what a
+ * folded node (its key in `folded`) holds left out.
+ */
+export function rowsOf(tree, folded = new Set(), depth = 0, parent = -1, out = []) {
+  for (const node of tree) {
+    const index = out.length;
+    out.push({ node, depth, parent });
+    if (node.children.length && !folded.has(node.key)) rowsOf(node.children, folded, depth + 1, index, out);
+  }
+  return out;
+}
+
+/** The nodes from the top of the tree down to `node` (null when it is not in it). */
+export function pathTo(tree, node, chain = []) {
+  for (const child of tree) {
+    const path = [...chain, child];
+    if (child === node) return path;
+    const found = pathTo(child.children, node, path);
+    if (found) return found;
+  }
+  return null;
+}
+
+/**
+ * The row that marks the current heading (`path`: pathTo it): the first folded node on the way to it
+ * (the heading is out of sight inside it), else the heading's own row; -1 for none.
+ */
+export function markedRow(rows, path, folded = new Set()) {
+  if (!path?.length) return -1;
+  const shown = path.find((node) => node.children.length && folded.has(node.key) && node !== path.at(-1)) ?? path.at(-1);
+  return rows.findIndex((row) => row.node === shown);
+}
+
+/** What the outline draws of the tree, to tell whether it changed: keys, kinds, texts, depths, tabs shown. */
+export function signatureOf(tree) {
+  const parts = [];
+  const walk = (nodes, depth) => {
+    for (const node of nodes) {
+      parts.push(`${depth}\u0001${node.kind}\u0001${node.key}\u0001${node.text}\u0001${node.shown ? 1 : 0}`);
+      walk(node.children, depth + 1);
+    }
+  };
+  walk(tree, 0);
+  return parts.join("\u0002");
+}
+
+/**
+ * A key in the outline (a tree of rows: aria's tree view): what it does at row `index` of `rows`.
+ * ↑/↓ the row before or after, Home/End the first or last; → unfolds a folded row, else goes to its
+ * first child; ← folds an open row, else goes to its parent; Enter or Space jumps there. Returns
+ * { focus } (a row's index), { fold }, { unfold } (a node), { jump } (a node), or null (not its key).
+ */
+export function keyAction(rows, index, key, folded = new Set()) {
+  if (!rows.length) return null;
+  const at = Math.max(0, Math.min(index, rows.length - 1));
+  const row = rows[at];
+  const parent = row.node.children.length > 0;
+  switch (key) {
+    case "ArrowDown": return { focus: Math.min(rows.length - 1, at + 1) };
+    case "ArrowUp": return { focus: Math.max(0, at - 1) };
+    case "Home": return { focus: 0 };
+    case "End": return { focus: rows.length - 1 };
+    case "ArrowRight":
+      if (parent && folded.has(row.node.key)) return { unfold: row.node };
+      if (parent && rows[at + 1]?.parent === at) return { focus: at + 1 };
+      return { focus: at };
+    case "ArrowLeft":
+      if (parent && !folded.has(row.node.key)) return { fold: row.node };
+      return { focus: row.parent >= 0 ? row.parent : at };
+    case "Enter":
+    case " ": return { jump: row.node };
+    default: return null;
+  }
+}
+
+
+/**
+ * The current heading of `tops` (each heading's top in the window, in the outline's order; null for
+ * one with no box: in a hidden tab, a closed disclosure): the one furthest down of those whose top
+ * has passed `line`, the first in order of those level with it (headings side by side in columns);
+ * -1 for none (above the first).
+ */
+export function currentOf(tops, line) {
+  let found = -1;
+  tops.forEach((top, index) => {
+    if (top === null || top > line) return;
+    if (found < 0 || top > tops[found]) found = index;
+  });
+  return found;
+}
+
+/**
+ * The line (px below the window's top) a heading's top must have passed to be the current one, with
+ * the page scrolled to `scrollY` of `maxScroll`, the window `view` high: `base` while the page has
+ * more than a window still to go, then coming down with the scroll to the window's bottom at the end
+ * (the last window's headings, which can never reach `base`, each get their turn, the last one at the
+ * very end). A page that scrolls less than a window comes down over what it scrolls; one that does
+ * not scroll keeps `base`.
+ */
+export function spyLine({ scrollY, maxScroll, view, base }) {
+  const ramp = Math.min(view, maxScroll);
+  const left = Math.max(0, maxScroll - scrollY);
+  if (ramp <= 0 || left >= ramp) return base;
+  return base + (view - base) * (1 - left / ramp);
+}
+
+/**
+ * Where a list scrolled to `scrollTop` (`view` px of it in view, `full` in all; `fade.top` and
+ * `fade.bottom` px at its ends faded while there is more) goes to keep a row at `top` (`row` px high)
+ * in its band: at least `least` px below the clear view's top, at most a third of the clear view down,
+ * so reading down the rows to come fill two thirds of it, and reading up `least` px of rows stand above
+ * it. As little as that takes (a row for each heading passed), centered in what is clear where the
+ * view is too short for the band; null where it is in the band already.
+ */
+export function followTop({ top, row, scrollTop, view, full, least, fade = { top: 0, bottom: 0 } }) {
+  const clear = view - fade.top - fade.bottom;
+  const at = top - scrollTop - fade.top; // the row's top in the clear view
+  let to = scrollTop;
+  if (clear < row + 2 * least) to = top - fade.top - (clear - row) / 2;
+  else {
+    const third = Math.max(least, Math.round(clear / 3));
+    if (at > third) to = top - fade.top - third;
+    else if (at < least) to = top - fade.top - least;
+  }
+  to = Math.round(Math.max(0, Math.min(full - view, to)));
+  return Math.abs(to - scrollTop) < 1 ? null : to;
+}
+
+/**
+ * Where a jump from scrollY `from` to `to` (a window `view` high) starts its smooth scroll: more than
+ * two windows away, a window short of `to` (gone to at once: the browser's smooth scroll takes 1.5s
+ * over 14000px), else null (the whole way smoothly).
+ */
+export function glideFrom(from, to, view) {
+  const distance = to - from;
+  return Math.abs(distance) > 2 * view ? to - Math.sign(distance) * view : null;
+}
+
+// The strip's lines: 2px each, 6px apart (4 at the least), as wide as the row is shallow, 240px at the most.
+export const TICK = Object.freeze({ line: 2, gap: 6, least: 4, most: 240, widths: [16, 12, 9, 6] });
+
+/**
+ * The strip's lines for `rows` in `height` px (TICK.most at the most): { gap, ticks: [{ row, width }] }.
+ * More than fit 6px apart: the gap shrinks, down to 4px; then the deepest levels are left out, one at
+ * a time, until they fit (the gap as wide again as what is left allows); a run of top-level rows still
+ * too long is taken every so many, over the whole list. `marked` (a row's index, -1 for none): the
+ * line that marks it, its own or, left out, the last line before it (its nearest ancestor shown):
+ * `current`, a tick's index or -1.
+ */
+export function ticksOf(rows, height, marked = -1, { line, gap, least, most, widths } = TICK) {
+  const room = Math.min(height, most);
+  const span = (count, space) => count * line + Math.max(0, count - 1) * space;
+  const spread = (count) => (count > 1 ? Math.max(least, Math.min(gap, Math.floor((room - count * line) / (count - 1)))) : gap);
+  let shown = rows.map((row, index) => ({ ...row, index }));
+  let space = gap;
+  if (span(shown.length, gap) > room) {
+    space = spread(shown.length);
+    let deepest = Math.max(0, ...shown.map((row) => row.depth));
+    while (span(shown.length, space) > room && deepest > 0) {
+      deepest--;
+      shown = shown.filter((row) => row.depth <= deepest);
+      space = spread(shown.length);
+    }
+    if (span(shown.length, space) > room) {
+      const count = Math.max(1, Math.floor((room + space) / (line + space)));
+      const step = shown.length / count;
+      shown = Array.from({ length: count }, (_, at) => shown[Math.floor(at * step)]);
+    }
+  }
+  let current = -1;
+  if (marked >= 0) shown.forEach((row, at) => { if (row.index <= marked) current = at; });
+  return {
+    gap: space,
+    current,
+    ticks: shown.map((row) => ({ row: row.index, width: widths[Math.min(row.depth, widths.length - 1)] })),
+  };
+}

package/browser/editor/page/overlay-layer.mjs

@@ -0,0 +1,227 @@
+import { Z } from "../../shared/layers.mjs";
+import { UNIT, unitElement, withLeads } from "./core.mjs";
+import { frameNumber, inFrame } from "./frames.mjs";
+import { clipOf, fillExtentOf } from "./geometry.mjs";
+import { provide } from "./overlays.mjs";
+import { addStyle, element } from "./ui.mjs";
+
+// Where the editor draws over the report's blocks (docs/editor.md, "Overlays"): a selected block's
+// fill, the dashed frame of the text being edited, the handle and a section's bar, a drag's line
+// and tint. Each goes into the layer of the coordinate system its block moves in:
+//
+//   page      the document's own scrolling (a block in the report's flow): a layer at the
+//             document's origin (absolute, in the body), so scrolling the page moves the drawing
+//             with its block natively, without waiting for a frame;
+//   viewport  the window (a block that is fixed or sticky, or inside one: a table's sticky header
+//             cell): a fixed layer;
+//   dialog    the open modal dialog holding the block (it is in the top layer, where nothing of
+//             the body shows): a fixed layer inside that dialog, never inside another one.
+//
+// Positions are measured against the layer's own rectangle, never worked out from scrollX/scrollY,
+// so they hold whatever the layer's containing block. A box of the page that scrolls by itself (a
+// dialog's content, a table wider than its frame, a code block's frame) moves its blocks without
+// the layer: the frames that keep the drawings on their blocks put them back (frames.mjs, the same
+// frame as the scroll). A block is measured once per frame (shapeOf): its fill, its frame and its
+// handle drawn in one frame use the same numbers, kept relative to the layer, which scrolling the
+// page leaves as they are; outside the frames (a selection made, a block converted) it is measured
+// afresh.
+
+const STYLE = `
+  .ge-layer { left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: ${Z.layer}; }
+  .ge-layer[data-context="page"] { position: absolute; }
+  .ge-layer[data-context="viewport"], .ge-layer[data-context="dialog"] { position: fixed; }
+  /* Whatever the tools put in a layer stands where they say; those that declared a position of their own (a relative box) would not, and the layer cannot know which rule a tool wrote them with: !important keeps it one rule. */
+  .ge-layer > * { position: absolute !important; }
+  .ge-layer > .ge-handle, .ge-layer > .ge-section-bar { pointer-events: auto; }
+`;
+
+// The coordinate system a block moves in, and the element its layer goes into.
+function contextOf(target) {
+  const dialog = target.closest("dialog[open]");
+  if (dialog?.matches(":modal")) return { kind: "dialog", host: dialog };
+  for (let node = target; node && node !== document.body && node !== document.documentElement; node = node.parentElement) {
+    const { position } = getComputedStyle(node);
+    if (position === "fixed" || position === "sticky") return { kind: "viewport", host: document.body };
+  }
+  return { kind: "page", host: document.body };
+}
+
+/** The layer the editor draws in over `target` (made when first needed). */
+export function layerOf(target) {
+  addStyle(STYLE);
+  const { kind, host } = contextOf(target);
+  let layer = [...host.children].find((child) => child.classList.contains("ge-layer") && child.dataset.context === kind);
+  if (!layer) {
+    layer = element("div", { class: "ge-layer", "data-context": kind, "data-doc-dev": "" });
+    host.append(layer);
+  }
+  return layer;
+}
+
+const shapes = new WeakMap(); // block -> { at: the frame measured in, shape }
+
+/**
+ * Where `target` shows, as the editor draws over it: { layer, origin: the layer's corner in the
+ * window, rect and clip relative to the layer, radius: its corners, reach: how far its fill reaches
+ * when it says so, room: how far it may reach above and below it (roomOf, measured when first read:
+ * only a selected block's fill and the frame of what is edited read it, so the handle, the flags and
+ * the others never measure the neighbours) }, or null when it does not show. Measured once per
+ * frame; outside the frames, afresh.
+ */
+export function shapeOf(target) {
+  const at = inFrame() ? frameNumber() : -1;
+  const cached = shapes.get(target);
+  if (at >= 0 && cached?.at === at) return cached.shape;
+  const box = fillExtentOf(target);
+  let shape = null;
+  if (box) {
+    const layer = layerOf(target);
+    const origin = layer.getBoundingClientRect();
+    const relative = (rect) => rect && { left: rect.left - origin.left, top: rect.top - origin.top, right: rect.right - origin.left, bottom: rect.bottom - origin.top };
+    let room = null;
+    shape = {
+      layer, origin: { left: origin.left, top: origin.top }, rect: relative(box), clip: relative(clipOf(target)), radius: boxRadius(target), reach: boxReach(target),
+      get room() { return (room ??= roomOf(target, box)); },
+    };
+  }
+  if (at >= 0) shapes.set(target, { at, shape });
+  return shape;
+}
+
+/**
+ * How far what the editor draws over a block reaches past it (a selected block's fill, the frame
+ * of what is being edited), as Notion's fill: a block of its own rounded box (a code block, a
+ * highlight block, a card) 6px, or what the block says (`reach`: a file's row 4px, as notion-lite's;
+ * a callout's square box 6px), its corners its own and that much more, so the two are concentric; a
+ * block of text 2px, 4px round. `radius`: the block's (boxRadius). Above and below it, never more
+ * than its `room` (roomOf): two neighbours' fills, however close the blocks stand (disclosures and
+ * code blocks 8px apart, list items 5px), never overlap; where the room is less, a block of its own
+ * box reaches that much less at its sides too and its corners are round by that much less (the fill
+ * as even around it as its box is: never wide at the sides and narrow above and below, never an
+ * ellipse); a block of text keeps its 2px at its sides. { x: at its sides, y: its own reach, top,
+ * bottom: above and below it, the same, radius, corners: null }.
+ */
+export const reachOf = (radius, reach = null, room = null) => {
+  const text = radius <= 0 && reach === null;
+  const out = text ? 2 : reach ?? 6;
+  // The same above and below, the smaller room of the two: a block's fill is even, so in a run of
+  // blocks the first and the last look as the ones between (not wider toward the text around them).
+  const top = Math.min(out, room?.above ?? out, room?.below ?? out);
+  const bottom = top;
+  if (text) return { x: out, y: out, top, bottom, radius: 4, corners: null };
+  // A box filled evenly on every side: where its room keeps the fill closer above and below, it is as
+  // close at the sides (3px all round for disclosures 8px apart, not 6 at the sides and 3 above), and its
+  // corners are the block's own and that reach (a circle, as the block's).
+  return { x: top, y: out, top, bottom, radius: Math.max(0, radius) + top, corners: null };
+};
+
+/**
+ * How far a block's fill may reach above and below it ({ above, below }, Infinity where nothing
+ * limits it; reachOf takes the smaller of the two for both sides), one rule for every kind of block: half the gap to the block next to it that way
+ * (neighbourOf) with a pixel left between them ((gap - 1) / 2, rounded down), or what that block's
+ * own reach leaves of the gap less a pixel when that is more (a disclosure 12px under a paragraph,
+ * whose fill reaches 2px, keeps its 6px), so two neighbours' fills never overlap: they keep a
+ * hairline apart, or just meet where the blocks touch. `box`: its fillExtentOf.
+ */
+export function roomOf(target, box = fillExtentOf(target)) {
+  if (!box) return null;
+  const room = (neighbour, gap) => {
+    if (!neighbour) return Infinity;
+    const { x: reach } = reachOf(boxRadius(neighbour.unit), boxReach(neighbour.unit)); // its own, on every side
+    return Math.max(0, Math.floor((gap - 1) / 2), Math.floor(gap - 1 - reach));
+  };
+  const above = neighbourOf(target, box, false);
+  const below = neighbourOf(target, box, true);
+  return { above: room(above, above && box.top - above.rect.bottom), below: room(below, below && below.rect.top - box.bottom) };
+}
+
+// The block next to `target` above it (`forward`: below it) and where it shows (fillExtentOf),
+// { unit, rect }, or null: the nearest unit of its container that way that shows and stands over or
+// under it (a column beside it, a step of a flowchart's row, does not); none, its container's (a
+// disclosure's first block: the block before the disclosure). Any of them may be filled with it (a
+// selection, the blocks a text selection takes whole), so its fill keeps clear of all of them.
+function neighbourOf(target, box, forward) {
+  for (let at = target; at; at = at.parentElement?.closest(UNIT) ?? null) {
+    for (let next = forward ? at.nextElementSibling : withLeads(at)[0].previousElementSibling; next; next = forward ? next.nextElementSibling : next.previousElementSibling) {
+      const unit = unitElement(next);
+      if (!unit || unit === at || unit.parentElement !== at.parentElement) continue;
+      const rect = fillExtentOf(unit);
+      if (rect && rect.right > box.left && rect.left < box.right) return { unit, rect };
+    }
+  }
+  return null;
+}
+
+/** Where a block's fill lies (client coordinates): its fillExtentOf and its reach past it (reachOf, roomOf), or null. */
+export function fillRectOf(target) {
+  const box = fillExtentOf(target);
+  if (!box) return null;
+  const { x, top, bottom } = reachOf(boxRadius(target), boxReach(target), roomOf(target, box));
+  return { left: box.left - x, top: box.top - top, right: box.right + x, bottom: box.bottom + bottom };
+}
+
+/** How far a boxed block's fill reaches past it when it says so (--doc-box-reach; a square box too, a callout's), else null. */
+export function boxReach(element) {
+  const declared = parseFloat(getComputedStyle(element).getPropertyValue("--doc-box-reach"));
+  return declared > 0 ? declared : null;
+}
+
+/**
+ * The corner radius of a block that shows a box of its own (a background or a border: a code
+ * block, a highlight block, a card), else 0 (text, however its element is rounded: a paragraph or
+ * heading given a background color too, whose fill the kit lays where a text block's selection is).
+ * The editor's own tints over a block (a formula block's under the pointer or while its box is open)
+ * are inset shadows, never its background, so they never count: a block's fill is the same
+ * whatever the pointer does.
+ */
+export function boxRadius(element) {
+  const style = getComputedStyle(element);
+  // A block whose box is drawn inside it (a file's row, a bookmark's card, an embed's frame), a list
+  // item drawn as a box (a flowchart's step) or a list drawn as its items' boxes (a flowchart, whose
+  // fill has its cards' corners: styles/flowchart.css), says so.
+  const declared = parseFloat(style.getPropertyValue("--doc-box-radius"));
+  if (declared > 0) return declared;
+  if (/^(P|H[1-4]|LI|HR)$/.test(element.tagName)) return 0; // a divider is a line, no box either
+  const radius = parseFloat(style.borderTopLeftRadius) || 0;
+  if (radius === 0) return 0;
+  const painted = !/^(transparent|rgba\(0, 0, 0, 0\))$/.test(style.backgroundColor) || style.backgroundImage !== "none";
+  const bordered = ["Top", "Right", "Bottom", "Left"].some((side) => parseFloat(style[`border${side}Width`]) > 0 && style[`border${side}Style`] !== "none");
+  return painted || bordered ? radius : 0;
+}
+
+/**
+ * Lay `node` over a block measured as `shape` (shapeOf): `x` past it at its sides, `above` and
+ * `below` it (`y` both, unless said), with corners of `radius` (or `corners`, a border-radius: reachOf's),
+ * cut where the block is cut. Each edge is rounded on its own, so two drawings kept apart stay apart.
+ */
+export function drawOver(node, { layer, rect, clip }, { x, y, top: above = y, bottom: below = y, radius, corners = null }) {
+  if (node.parentNode !== layer) layer.append(node);
+  const left = Math.round(rect.left - x);
+  const top = Math.round(rect.top - above);
+  const width = Math.round(rect.right + x) - left;
+  const height = Math.round(rect.bottom + below) - top;
+  const cut = clip && [clip.top - top, left + width - clip.right, top + height - clip.bottom, clip.left - left].map((side) => `${Math.max(0, Math.round(side))}px`).join(" ");
+  Object.assign(node.style, {
+    transform: `translate(${left}px, ${top}px)`, width: `${width}px`, height: `${height}px`, borderRadius: corners ?? `${radius}px`,
+    clipPath: cut && cut !== "0px 0px 0px 0px" ? `inset(${cut})` : "",
+  });
+}
+
+/** Put `node` in `layer` at `left`, `top` (relative to the layer). */
+export function drawAt(node, layer, left, top) {
+  if (node.parentNode !== layer) layer.append(node);
+  node.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+}
+
+/** Lay `node` in `layer` over `rect` (window coordinates), `outset` past it. */
+export function drawBox(node, layer, rect, outset = 0) {
+  if (node.parentNode !== layer) layer.append(node);
+  const origin = layer.getBoundingClientRect();
+  Object.assign(node.style, {
+    transform: `translate(${Math.round(rect.left - origin.left - outset)}px, ${Math.round(rect.top - origin.top - outset)}px)`,
+    width: `${Math.round(rect.right - rect.left + 2 * outset)}px`,
+    height: `${Math.round(rect.bottom - rect.top + 2 * outset)}px`,
+  });
+}
+
+provide("layers", () => [...document.querySelectorAll(".ge-layer")].map((layer) => ({ context: layer.dataset.context, in: layer.parentElement?.localName ?? null, drawings: layer.children.length })));