makersclaw 0.8.0 → 0.8.1

package/registry/blocks/tier-map/tier-map.jsx

@@ -0,0 +1,574 @@
+"use client";
+
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button, Card, Empty, Icon, Notice, Skeleton, cx } from "../../ui";
+import { barOf, buildTierModel, countText, elbowOf, fitKey, neighbour, openPath, tiersOf, togglePath, toneOf } from "./tier-model";
+
+// A map of cards in tiers, from a flat list where each item names its parent.
+// The first tier is the tops; pressing a card opens its kids as the next tier
+// beneath it (pressing it again closes them), so ONE LAYER OPENS AT A TIME.
+// Items with no place in the tree sit together in an "unparented" group;
+// drafts (`ghost`) sit in a group of their own, dashed, and can serve drafts.
+//
+// Props in, callbacks out (`onSelect`, `onOpenChange`): the block never reads
+// or writes data. The elbow lines are CSS only: every tier is a grid of equal
+// columns and the lines are placed in percent of its width, so nothing is
+// measured, there is no observer, and the server draws what the browser
+// draws. Below the width a tier needs to sit in one row, it stacks and the
+// lines become a rail down its left. README.md beside this file lists every
+// prop.
+
+// ---- layout classes (literal, so Tailwind sees every one)
+//
+// Each table is keyed by a tier's fit key (tier-model.js `fitKey`): the most
+// equal columns this tier, or any tier above it, needs. The width a key asks
+// for is `thresholdRem` (11 rem a column); test/tier-map.test.mjs checks the
+// numbers below against it. Key 9 is a tier too wide to ever sit in a row.
+
+// A tier's grid: from its width, one row of equal columns (--cols); below it, a stack.
+const GRID = {
+  1: "@min-[0rem]:grid-cols-(--cols) @min-[0rem]:gap-y-0",
+  2: "@min-[22rem]:grid-cols-(--cols) @min-[22rem]:gap-y-0",
+  3: "@min-[33rem]:grid-cols-(--cols) @min-[33rem]:gap-y-0",
+  4: "@min-[44rem]:grid-cols-(--cols) @min-[44rem]:gap-y-0",
+  5: "@min-[55rem]:grid-cols-(--cols) @min-[55rem]:gap-y-0",
+  6: "@min-[66rem]:grid-cols-(--cols) @min-[66rem]:gap-y-0",
+  7: "@min-[77rem]:grid-cols-(--cols) @min-[77rem]:gap-y-0",
+  8: "@min-[88rem]:grid-cols-(--cols) @min-[88rem]:gap-y-0",
+  9: "",
+};
+
+// A card's cell stops being a box from the tier's width, so its card and its kids are the tier's own grid items.
+const CELL = {
+  1: "@min-[0rem]:contents",
+  2: "@min-[22rem]:contents",
+  3: "@min-[33rem]:contents",
+  4: "@min-[44rem]:contents",
+  5: "@min-[55rem]:contents",
+  6: "@min-[66rem]:contents",
+  7: "@min-[77rem]:contents",
+  8: "@min-[88rem]:contents",
+  9: "",
+};
+
+// The card itself, from the tier's width: its own column (--c) in row 1, centred in it.
+const SLOT = {
+  1: "@min-[0rem]:col-start-(--c) @min-[0rem]:row-start-1 @min-[0rem]:justify-items-center @min-[0rem]:px-1.5",
+  2: "@min-[22rem]:col-start-(--c) @min-[22rem]:row-start-1 @min-[22rem]:justify-items-center @min-[22rem]:px-1.5",
+  3: "@min-[33rem]:col-start-(--c) @min-[33rem]:row-start-1 @min-[33rem]:justify-items-center @min-[33rem]:px-1.5",
+  4: "@min-[44rem]:col-start-(--c) @min-[44rem]:row-start-1 @min-[44rem]:justify-items-center @min-[44rem]:px-1.5",
+  5: "@min-[55rem]:col-start-(--c) @min-[55rem]:row-start-1 @min-[55rem]:justify-items-center @min-[55rem]:px-1.5",
+  6: "@min-[66rem]:col-start-(--c) @min-[66rem]:row-start-1 @min-[66rem]:justify-items-center @min-[66rem]:px-1.5",
+  7: "@min-[77rem]:col-start-(--c) @min-[77rem]:row-start-1 @min-[77rem]:justify-items-center @min-[77rem]:px-1.5",
+  8: "@min-[88rem]:col-start-(--c) @min-[88rem]:row-start-1 @min-[88rem]:justify-items-center @min-[88rem]:px-1.5",
+  9: "",
+};
+
+// The block under an open card: from the parent tier's width, a whole row of its own (row 2).
+const KIDS = {
+  1: "@min-[0rem]:row-start-2 @min-[0rem]:mt-0",
+  2: "@min-[22rem]:row-start-2 @min-[22rem]:mt-0",
+  3: "@min-[33rem]:row-start-2 @min-[33rem]:mt-0",
+  4: "@min-[44rem]:row-start-2 @min-[44rem]:mt-0",
+  5: "@min-[55rem]:row-start-2 @min-[55rem]:mt-0",
+  6: "@min-[66rem]:row-start-2 @min-[66rem]:mt-0",
+  7: "@min-[77rem]:row-start-2 @min-[77rem]:mt-0",
+  8: "@min-[88rem]:row-start-2 @min-[88rem]:mt-0",
+  9: "",
+};
+
+// ...flush left once its own tier sits in a row; before that it hangs indented off the rail.
+const INDENT = {
+  1: "@min-[0rem]:ml-0",
+  2: "@min-[22rem]:ml-0",
+  3: "@min-[33rem]:ml-0",
+  4: "@min-[44rem]:ml-0",
+  5: "@min-[55rem]:ml-0",
+  6: "@min-[66rem]:ml-0",
+  7: "@min-[77rem]:ml-0",
+  8: "@min-[88rem]:ml-0",
+  9: "",
+};
+
+// The strip of lines above the kids: only from the parent tier's width.
+const HEAD = {
+  1: "hidden @min-[0rem]:block",
+  2: "hidden @min-[22rem]:block",
+  3: "hidden @min-[33rem]:block",
+  4: "hidden @min-[44rem]:block",
+  5: "hidden @min-[55rem]:block",
+  6: "hidden @min-[66rem]:block",
+  7: "hidden @min-[77rem]:block",
+  8: "hidden @min-[88rem]:block",
+  9: "hidden",
+};
+
+// The bar across the kids' tops: only from the kids' tier width.
+const BAR = {
+  1: "hidden @min-[0rem]:block",
+  2: "hidden @min-[22rem]:block",
+  3: "hidden @min-[33rem]:block",
+  4: "hidden @min-[44rem]:block",
+  5: "hidden @min-[55rem]:block",
+  6: "hidden @min-[66rem]:block",
+  7: "hidden @min-[77rem]:block",
+  8: "hidden @min-[88rem]:block",
+  9: "hidden",
+};
+
+// The line from a parent that sits in a row to the rail of kids that stack.
+const LOW = {
+  1: "hidden @max-[0rem]:block",
+  2: "hidden @max-[22rem]:block",
+  3: "hidden @max-[33rem]:block",
+  4: "hidden @max-[44rem]:block",
+  5: "hidden @max-[55rem]:block",
+  6: "hidden @max-[66rem]:block",
+  7: "hidden @max-[77rem]:block",
+  8: "hidden @max-[88rem]:block",
+  9: "block",
+};
+
+// A kid's elbow to the rail, only while its own tier is stacked.
+const STUB = {
+  1: "@min-[0rem]:before:hidden @min-[0rem]:after:hidden",
+  2: "@min-[22rem]:before:hidden @min-[22rem]:after:hidden",
+  3: "@min-[33rem]:before:hidden @min-[33rem]:after:hidden",
+  4: "@min-[44rem]:before:hidden @min-[44rem]:after:hidden",
+  5: "@min-[55rem]:before:hidden @min-[55rem]:after:hidden",
+  6: "@min-[66rem]:before:hidden @min-[66rem]:after:hidden",
+  7: "@min-[77rem]:before:hidden @min-[77rem]:after:hidden",
+  8: "@min-[88rem]:before:hidden @min-[88rem]:after:hidden",
+  9: "",
+};
+
+// The elbow to the rail while a tier is stacked (the kids of a stacked tier
+// hang off a line down their left). The last kid's line ends at its elbow.
+const RAIL_CELL =
+  "relative before:absolute before:-left-3 before:top-6 before:w-3 before:border-t before:border-input after:absolute after:-left-3 after:bottom-0 after:border-l after:border-input";
+// A kid's line starts 0.75 rem above it, at the bottom of the card (or the
+// kid) above; the last kid's line stops at its elbow.
+const RAIL_TOP = "after:-top-3";
+const RAIL_END = "after:bottom-auto after:h-9";
+const railOf = (i, count) => cx(RAIL_CELL, RAIL_TOP, i === count - 1 && RAIL_END);
+
+const FILL = {
+  ink: "bg-foreground",
+  quiet: "bg-muted-foreground",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+};
+
+const GROUP_HEAD = "text-2xs font-medium uppercase tracking-wider text-muted-foreground";
+const CARD_BOX = "w-full min-w-0 max-w-[26rem]";
+
+// ---- one context for the tiers
+
+const Ctx = createContext(null);
+const useTiers = () => useContext(Ctx);
+
+const sameId = (a, b) => a != null && b != null && String(a) === String(b);
+
+// ---- the card
+
+/**
+ * One card. `state` is what the map knows about it:
+ * { id, item, open, selected, count, tier, ghost, serves, pressable,
+ *   holderProps, primaryProps, toggleProps, select, toggle }
+ * A `renderCard` of your own spreads `holderProps` on its root and
+ * `primaryProps` (and `toggleProps`) on the buttons that take the focus.
+ */
+function TierCard({ node, serves }) {
+  const t = useTiers();
+  const { item } = node;
+  const open = t.openIds.has(node.id);
+  const kids = node.kids.length;
+  const selected = sameId(t.selected, node.id);
+  const ghost = node.ghost;
+  const hasOpen = node.group === "tree" && kids > 0;
+  const pressable = Boolean(t.onSelect) || Boolean(item.href) || hasOpen;
+  const roving = t.tabId === node.id ? 0 : -1;
+  const kidsId = `${t.uid}-kids-${node.id}`;
+
+  const toggle = () => t.toggle(node.id);
+  const select = () => {
+    if (t.onSelect) t.onSelect(item);
+    else if (hasOpen) toggle();
+  };
+  const state = {
+    id: node.id,
+    item,
+    open,
+    selected,
+    count: kids,
+    tier: node.tier,
+    ghost,
+    serves,
+    pressable,
+    select,
+    toggle: hasOpen ? toggle : undefined,
+    holderProps: { "data-tier-id": node.id },
+    primaryProps: {
+      "data-tier-card": node.id,
+      tabIndex: roving,
+      onClick: select,
+      onFocus: () => t.setTab(node.id),
+      "aria-current": selected ? "true" : undefined,
+      "aria-expanded": hasOpen && !t.onSelect ? open : undefined,
+      "aria-controls": hasOpen && !t.onSelect && open ? kidsId : undefined,
+    },
+    toggleProps: hasOpen
+      ? { "data-tier-toggle": node.id, tabIndex: roving, onClick: toggle, onFocus: () => t.setTab(node.id), "aria-expanded": open, "aria-controls": open ? kidsId : undefined }
+      : null,
+  };
+
+  const custom = t.renderCard ? t.renderCard(item, state) : null;
+  if (custom != null && custom !== false) return custom;
+
+  const bar = barOf(item);
+  const tone = toneOf(item.tone, bar?.share);
+  const lead = item.mark != null || item.kicker != null || item.by != null;
+  const body = (
+    <>
+      {lead ? (
+        <span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+          {item.mark != null ? <span className="inline-flex shrink-0 items-center">{item.mark}</span> : null}
+          {item.kicker != null ? <span className="min-w-0 truncate">{item.kicker}</span> : null}
+          {item.by != null ? <span className="ml-auto inline-flex shrink-0 items-center">{item.by}</span> : null}
+        </span>
+      ) : null}
+      <span className="block font-semibold leading-snug [overflow-wrap:anywhere]">{item.title}</span>
+      {bar ? (
+        <span className="flex items-center gap-2 text-xs">
+          <span aria-hidden="true" className="relative h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
+            <span className={cx("absolute inset-y-0 left-0 w-(--fill) rounded-full", FILL[tone])} style={{ "--fill": `${bar.pct}%` }} />
+          </span>
+          <span data-nums className="shrink-0 font-semibold">
+            {bar.pct}%
+          </span>
+        </span>
+      ) : null}
+      {serves ? <span className="block text-xs text-muted-foreground [overflow-wrap:anywhere]">{serves}</span> : null}
+      {item.foot != null ? <span className="block text-xs text-muted-foreground [overflow-wrap:anywhere]">{item.foot}</span> : null}
+    </>
+  );
+  const look = cx(
+    "grid w-full min-w-0 gap-1.5 p-3 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+    pressable ? "hover:bg-accent" : "cursor-default",
+  );
+  const primary = item.href ? (
+    <a href={item.href} {...state.primaryProps} className={look}>
+      {body}
+    </a>
+  ) : (
+    <button type="button" {...state.primaryProps} aria-disabled={pressable ? undefined : "true"} className={look}>
+      {body}
+    </button>
+  );
+  const ring = selected ? "ring-2 ring-ring" : open ? "ring-1 ring-primary" : "";
+
+  return (
+    <div {...state.holderProps} className={CARD_BOX}>
+      <Card as="div" padding="none" className={cx(ring, ghost && "border-dashed")}>
+        {primary}
+        {state.toggleProps ? (
+          <button
+            type="button"
+            {...state.toggleProps}
+            className="flex w-full min-w-0 items-center gap-1.5 border-t border-border px-3 py-1.5 text-left text-xs text-muted-foreground outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          >
+            <Icon name="chevron-right" size={14} className={cx("shrink-0 transition-transform motion-reduce:transition-none", open && "rotate-90")} />
+            <span className="min-w-0">
+              {countText(kids, t.childrenLabel)}
+              {open ? ` · ${t.openWord}` : ""}
+            </span>
+          </button>
+        ) : null}
+      </Card>
+    </div>
+  );
+}
+
+export { TierCard };
+
+// ---- the tiers
+
+function Tier({ ids, depth, above, hangs }) {
+  const t = useTiers();
+  const count = ids.length;
+  const n = fitKey(Math.max(count, above));
+  const openId = t.path[depth] ?? null;
+  return (
+    <div className={cx("grid grid-cols-1 gap-y-3", GRID[n])} style={{ "--cols": `repeat(${count}, minmax(0, 1fr))` }}>
+      {ids.map((id, i) => {
+        const node = t.model.nodes.get(id);
+        return (
+          <div
+            key={id}
+            className={cx("min-w-0", hangs ? cx(railOf(i, count), STUB[n]) : "relative", CELL[n])}
+            style={{ "--c": i + 1 }}
+          >
+            <div className={cx("grid min-w-0 justify-items-start", SLOT[n])}>
+              <TierCard node={node} />
+            </div>
+            {id === openId ? <Kids node={node} depth={depth} fit={n} index={i} count={count} /> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// What hangs under an open card: the strip of lines (from the width its tier
+// sits in a row) and the next tier.
+function Kids({ node, depth, fit, index, count }) {
+  const t = useTiers();
+  const kidFit = fitKey(Math.max(node.kids.length, fit));
+  const e = elbowOf(index, count, node.kids.length);
+  return (
+    <div id={`${t.uid}-kids-${node.id}`} className={cx("col-span-full mt-3 min-w-0", KIDS[fit])}>
+      <div aria-hidden="true" className={cx("relative h-8", HEAD[fit])} style={{ "--p": `${e.parent}%` }}>
+        <span className="absolute left-(--p) top-0 h-1/2 border-l border-input" />
+        <div className={cx("absolute inset-0", LOW[kidFit])}>
+          <span className="absolute left-3 top-1/2 w-(--back) border-t border-input" style={{ "--back": `calc(${e.parent}% - 0.75rem)` }} />
+          <span className="absolute left-3 top-1/2 bottom-0 border-l border-input" />
+        </div>
+        <div className={cx("absolute inset-0", BAR[kidFit])}>
+          <span className="absolute left-(--from) top-1/2 w-(--across) border-t border-input" style={{ "--from": `${e.from}%`, "--across": `${e.to - e.from}%` }} />
+          {e.kids.map((at, i) => (
+            <span key={i} className="absolute left-(--at) top-1/2 bottom-0 border-l border-input" style={{ "--at": `${at}%` }} />
+          ))}
+        </div>
+      </div>
+      <div className={cx("ml-6 min-w-0", INDENT[kidFit])}>
+        <Tier ids={node.kids} depth={depth + 1} above={fit} hangs />
+      </div>
+    </div>
+  );
+}
+
+// ---- the drafts: a forest that is always open, a rail down each tree
+
+function GhostBranch({ id }) {
+  const t = useTiers();
+  const node = t.model.nodes.get(id);
+  const parent = node.parent != null ? t.model.nodes.get(node.parent) : null;
+  const serves = node.up == null && parent && t.servesLabel ? `${t.servesLabel} ${parent.item.title}` : null;
+  return (
+    <div className="grid min-w-0 content-start gap-3">
+      <TierCard node={node} serves={serves} />
+      {node.kids.length ? (
+        <div className="ml-6 grid min-w-0 gap-3">
+          {node.kids.map((kid, i) => (
+            <div key={kid} className={cx("min-w-0", railOf(i, node.kids.length))}>
+              <GhostBranch id={kid} />
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---- the whole map
+
+/**
+ * The map. Props: `items`, `tops`, `topsLabel`, `label`, `childrenLabel`,
+ * `openWord`, `unparentedLabel`, `unparentedNote`, `ghostLabel`, `ghostNote`,
+ * `servesLabel`, `open`, `defaultOpen`, `onOpenChange`, `onSelect`,
+ * `selected`, `renderCard`, `loading`, `error`, `onRetry`, `empty`,
+ * `className`.
+ */
+export function TierMap({
+  items,
+  tops,
+  topsLabel,
+  label = "Tiers",
+  childrenLabel = "below",
+  openWord = "open",
+  unparentedLabel = "Not under anything",
+  unparentedNote,
+  ghostLabel = "Drafts",
+  ghostNote,
+  servesLabel = "Serves",
+  open,
+  defaultOpen,
+  onOpenChange,
+  onSelect,
+  selected,
+  renderCard,
+  loading = false,
+  error,
+  onRetry,
+  empty,
+  className,
+}) {
+  const uid = useId().replace(/:/g, "");
+  const root = useRef(null);
+  const model = useMemo(() => buildTierModel(items, { tops }), [items, tops]);
+  const [inner, setInner] = useState(() => (Array.isArray(defaultOpen) ? defaultOpen : []));
+  const [tab, setTab] = useState(null);
+  const [focusReq, setFocusReq] = useState(null);
+
+  const path = useMemo(() => openPath(model, open !== undefined ? open : inner), [model, open, inner]);
+  const openIds = useMemo(() => new Set(path), [path]);
+
+  // The cards on screen, in the order the keys walk them.
+  const shown = useMemo(() => {
+    const ids = [];
+    for (const tier of tiersOf(model, path)) ids.push(...tier.ids);
+    ids.push(...model.unparented, ...model.ghostOrder.map((g) => g.id));
+    return ids;
+  }, [model, path]);
+  const tabId = tab != null && shown.includes(tab) ? tab : shown[0] ?? null;
+
+  function commit(next) {
+    if (open === undefined) setInner(next);
+    if (onOpenChange) onOpenChange(next);
+  }
+  function toggle(id) {
+    const next = togglePath(model, path, id);
+    if (next !== path) commit(next);
+  }
+
+  // A key moves the focus to a card that may not be drawn yet (↓ on a closed
+  // card opens it first), so the move waits for the render that draws it.
+  const pathKey = path.join("\u0000");
+  useEffect(() => {
+    if (focusReq == null || !root.current) return;
+    const cards = root.current.querySelectorAll("[data-tier-card]");
+    for (const el of cards) {
+      if (el.getAttribute("data-tier-card") === focusReq) {
+        el.focus();
+        break;
+      }
+    }
+    setFocusReq(null);
+  }, [focusReq, pathKey]);
+
+  function onKeyDown(e) {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    const holder = e.target instanceof Element ? e.target.closest("[data-tier-id]") : null;
+    if (!holder) return;
+    const id = holder.getAttribute("data-tier-id");
+    const node = model.nodes.get(id);
+    if (!node) return;
+    const go = (to) => {
+      if (to == null) return;
+      e.preventDefault();
+      setTab(to);
+      setFocusReq(to);
+    };
+    if (e.key === "ArrowDown") {
+      if (!node.kids.length) return;
+      if (node.group === "tree" && !openIds.has(id)) toggle(id);
+      go(node.kids[0]);
+    } else if (e.key === "Escape") {
+      if (node.group !== "tree") return;
+      if (openIds.has(id)) {
+        e.preventDefault();
+        toggle(id);
+      } else if (node.up != null) {
+        e.preventDefault();
+        toggle(node.up);
+        go(node.up);
+      }
+    } else if (["ArrowLeft", "ArrowRight", "ArrowUp", "Home", "End"].includes(e.key)) {
+      go(neighbour(model, id, e.key));
+    }
+  }
+
+  const ctx = {
+    model,
+    path,
+    openIds,
+    uid,
+    tabId,
+    setTab,
+    toggle,
+    onSelect,
+    selected,
+    renderCard,
+    childrenLabel,
+    openWord,
+    servesLabel,
+  };
+
+  if (loading) {
+    return (
+      <div aria-busy="true" aria-label={`${label}, loading`} className={cx("@container min-w-0", className)}>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,12rem),1fr))] gap-3">
+          {[0, 1, 2].map((i) => (
+            <Skeleton key={i} shape="rect" className="h-24 w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className={cx("@container min-w-0", className)}>
+        <Notice
+          tone="danger"
+          action={
+            onRetry ? (
+              <Button size="sm" onClick={onRetry}>
+                Try again
+              </Button>
+            ) : undefined
+          }
+        >
+          {typeof error === "string" || typeof error === "object" ? error : "The map could not be loaded."}
+        </Notice>
+      </div>
+    );
+  }
+  if (!model.order.length) {
+    return <div className={cx("@container min-w-0", className)}>{empty ?? <Empty icon="network" title="Nothing to map yet" body="Cards appear here once there is something to put on the map." />}</div>;
+  }
+
+  const parked = model.unparented;
+  const drafts = model.ghostOrder.length;
+  return (
+    <Ctx.Provider value={ctx}>
+      <div ref={root} role="group" aria-label={label} onKeyDown={onKeyDown} className={cx("@container grid min-w-0 gap-8", className)}>
+        {model.tops.length ? (
+          <section aria-label={typeof topsLabel === "string" ? topsLabel : label} className="grid min-w-0 gap-3">
+            {topsLabel ? <h3 className={GROUP_HEAD}>{topsLabel}</h3> : null}
+            <Tier ids={model.tops} depth={0} above={1} hangs={false} />
+          </section>
+        ) : null}
+        {parked.length ? (
+          <section aria-label={typeof unparentedLabel === "string" ? unparentedLabel : "Unparented"} className="grid min-w-0 gap-3">
+            <h3 className={GROUP_HEAD}>
+              {unparentedLabel} {"·"} {parked.length}
+            </h3>
+            <div className="grid min-w-0 gap-4 @2xl:grid-cols-[minmax(0,1fr)_minmax(0,22rem)] @2xl:items-start">
+              <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,14rem),1fr))] gap-3">
+                {parked.map((id) => (
+                  <div key={id} className="grid min-w-0 justify-items-start">
+                    <TierCard node={model.nodes.get(id)} />
+                  </div>
+                ))}
+              </div>
+              {unparentedNote ? <div className="grid min-w-0 content-start gap-2 text-sm text-muted-foreground">{unparentedNote}</div> : null}
+            </div>
+          </section>
+        ) : null}
+        {drafts ? (
+          <section aria-label={typeof ghostLabel === "string" ? ghostLabel : "Drafts"} className="grid min-w-0 gap-3">
+            <h3 className={GROUP_HEAD}>{ghostLabel}</h3>
+            {ghostNote ? <div className="text-sm text-muted-foreground">{ghostNote}</div> : null}
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,16rem),1fr))] gap-3">
+              {model.ghostRoots.map((id) => (
+                <GhostBranch key={id} id={id} />
+              ))}
+            </div>
+          </section>
+        ) : null}
+      </div>
+    </Ctx.Provider>
+  );
+}