@unofficialbox/box-open-elements 0.4.0 → 0.6.0

package/dist/patterns/timeline/timeline.js

@@ -0,0 +1,430 @@
+import { isTimelineEventRecord, resolveTimelineTone } from "./types.js";
+import { formatItemDate } from "../content-explorer/adapters/item-summary.js";
+import { isSafeHref } from "../internal/safe-href.js";
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-timeline";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const toneColor = (tone) => {
+    switch (tone) {
+        case "brand":
+            return "var(--boe-token-surface-surface-brand, #0061d5)";
+        case "success":
+            return "var(--boe-token-surface-status-surface-success, #26a27b)";
+        case "warning":
+            return "var(--boe-token-surface-status-surface-warning, #f5b31b)";
+        case "error":
+            return "var(--boe-token-surface-status-surface-error, #ed3757)";
+        default:
+            return "var(--boe-token-text-text-secondary, #6f6f6f)";
+    }
+};
+const elementStyles = `
+        /* Author display rules on parts would otherwise defeat the UA's
+           [hidden] rule — state toggling relies on the hidden attribute. */
+        [hidden] {
+          display: none !important;
+        }
+
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="panel"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: ${boePanel.background};
+        }
+
+        [part="title"] {
+          margin: 0;
+          font: inherit;
+          font-size: 1.1rem;
+          font-weight: 700;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="events"] {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          display: grid;
+        }
+
+        [part="event"] {
+          position: relative;
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: 0.65rem;
+          padding: 0.55rem 0 0.55rem 0.15rem;
+        }
+
+        /* The connecting spine between markers. */
+        [part="event"]:not(:last-child)::after {
+          content: "";
+          position: absolute;
+          left: calc(0.15rem + 0.55rem - 1px);
+          top: 1.9rem;
+          bottom: -0.35rem;
+          width: 2px;
+          background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 72%, transparent);
+        }
+
+        [part="marker"] {
+          inline-size: 1.1rem;
+          block-size: 1.1rem;
+          margin-top: 0.3rem;
+          border-radius: 999px;
+          border: 2px solid var(--timeline-tone, var(--boe-token-text-text-secondary, #6f6f6f));
+          background: color-mix(in srgb, var(--timeline-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+        }
+
+        [part="event-body"] {
+          display: grid;
+          gap: 0.25rem;
+        }
+
+        [part="event-topline"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.4rem;
+        }
+
+        [part="actor"] {
+          font-weight: 700;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="action"] {
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="badge"] {
+          display: inline-flex;
+          padding: 0.16rem 0.45rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--timeline-tone, var(--boe-token-surface-surface-brand, #0061d5)) 12%, transparent);
+          color: color-mix(in srgb, var(--timeline-tone, var(--boe-token-surface-surface-brand, #0061d5)) 74%, black 26%);
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        [part="timestamp"] {
+          margin-left: auto;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.78rem;
+          white-space: nowrap;
+        }
+
+        [part="summary"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.5;
+        }
+
+        [part="evidence"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.4rem;
+        }
+
+        [part="evidence-link"] {
+          appearance: none;
+          display: inline-flex;
+          align-items: center;
+          padding: 0.22rem 0.55rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 30%, transparent);
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 6%, transparent);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          font: inherit;
+          font-size: 0.78rem;
+          font-weight: 600;
+          text-decoration: none;
+          cursor: pointer;
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="evidence-link"]:hover {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 14%, transparent);
+        }
+
+        [part="evidence-link"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+        }
+
+        [part="correlation"] {
+          font-family: ui-monospace, monospace;
+          font-size: 0.72rem;
+          color: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 84%, transparent);
+        }
+
+        [part="empty"] {
+          padding: ${boePanel.padding};
+          border-radius: ${boeRadius.large};
+          border: 1px dashed color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 70%, transparent);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="load-more-region"] {
+          display: flex;
+          justify-content: center;
+        }
+
+        [part="load-more"] {
+          appearance: none;
+          font: inherit;
+          font-size: 0.875rem;
+          font-weight: 600;
+          padding: 0.4rem 0.7rem;
+          border-radius: ${boeRadius.control};
+          border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: var(--boe-token-text-text, #222222);
+          cursor: pointer;
+        }
+
+        [part="load-more"]:hover {
+          background: var(--boe-token-surface-surface-hover, #f4f4f4);
+          border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+        }
+
+        [part="composer"] {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        [part="composer-label"] {
+          font-size: 0.74rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="composer-input"] {
+          min-height: 3.4rem;
+          padding: 0.55rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          line-height: 1.5;
+          resize: vertical;
+        }
+
+        [part="composer-submit"] {
+          appearance: none;
+          justify-self: start;
+          min-height: 2rem;
+          padding: 0.4rem 0.7rem;
+          border: 1px solid transparent;
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          font: inherit;
+          cursor: pointer;
+        }
+
+        [part="composer-submit"]:hover {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 88%, black 12%);
+        }
+
+        [part="composer-submit"]:focus-visible,
+        [part="composer-input"]:focus-visible,
+        [part="load-more"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+        }
+      `;
+export class Timeline extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["composable", "events", "has-more", "heading"];
+    }
+    titleEl;
+    eventsEl;
+    emptyEl;
+    loadMoreRegionEl;
+    composerEl;
+    composerInputEl;
+    eventsSignature = "";
+    get heading() {
+        return this.getAttribute("heading") ?? "Activity";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    /** Append-only event list; JSON records validated before rendering. */
+    get events() {
+        const raw = this.getAttribute("events");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) && parsed.every(isTimelineEventRecord) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set events(value) {
+        if (value.length) {
+            this.setAttribute("events", JSON.stringify(value));
+            return;
+        }
+        this.removeAttribute("events");
+    }
+    get composable() {
+        return this.hasAttribute("composable");
+    }
+    set composable(value) {
+        this.toggleAttribute("composable", value);
+    }
+    get hasMore() {
+        return this.hasAttribute("has-more");
+    }
+    set hasMore(value) {
+        this.toggleAttribute("has-more", value);
+    }
+    emitEntrySubmitted() {
+        const body = this.composerInputEl.value.trim();
+        if (!this.composable || !body) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("entry-submitted", {
+            bubbles: true,
+            composed: true,
+            detail: { body },
+        }));
+        this.composerInputEl.value = "";
+    }
+    rebuildEvents(events) {
+        this.eventsEl.innerHTML = events
+            .map(event => {
+            const tone = resolveTimelineTone(event.tone);
+            const evidence = (event.evidence ?? [])
+                .map(entry => {
+                const attrs = `part="evidence-link" data-event-id="${escapeHtml(event.id)}" data-evidence-id="${escapeHtml(entry.id)}"`;
+                return entry.href && isSafeHref(entry.href)
+                    ? `<a ${attrs} href="${escapeHtml(entry.href)}">${escapeHtml(entry.label)}</a>`
+                    : `<button type="button" ${attrs}>${escapeHtml(entry.label)}</button>`;
+            })
+                .join("");
+            const timestamp = event.timestamp ? formatItemDate(event.timestamp) : "";
+            return `
+          <li part="event" data-event-id="${escapeHtml(event.id)}" style="--timeline-tone:${toneColor(tone)};">
+            <span part="marker" aria-hidden="true"></span>
+            <div part="event-body">
+              <div part="event-topline">
+                ${event.actor ? `<span part="actor">${escapeHtml(event.actor.name)}</span>` : ""}
+                <span part="action">${escapeHtml(event.action)}</span>
+                ${event.badge ? `<span part="badge">${escapeHtml(event.badge)}</span>` : ""}
+                ${timestamp ? `<time part="timestamp" datetime="${escapeHtml(event.timestamp ?? "")}">${escapeHtml(timestamp)}</time>` : ""}
+              </div>
+              ${event.summary ? `<p part="summary">${escapeHtml(event.summary)}</p>` : ""}
+              ${evidence ? `<div part="evidence">${evidence}</div>` : ""}
+              ${event.correlationId ? `<span part="correlation">${escapeHtml(event.correlationId)}</span>` : ""}
+            </div>
+          </li>
+        `;
+        })
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <section part="panel">
+        <h2 part="title"></h2>
+        <ol part="events" role="list" reversed hidden></ol>
+        <div part="empty" hidden>No activity yet.</div>
+        <div part="load-more-region" hidden>
+          <button type="button" part="load-more">Load earlier activity</button>
+        </div>
+        <div part="composer" hidden>
+          <label part="composer-label" for="timeline-composer-input">Add a comment</label>
+          <textarea part="composer-input" id="timeline-composer-input" placeholder="Add a comment"></textarea>
+          <button type="button" part="composer-submit">Comment</button>
+        </div>
+      </section>
+    `;
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.eventsEl = this.shadowRoot.querySelector('[part="events"]');
+        this.emptyEl = this.shadowRoot.querySelector('[part="empty"]');
+        this.loadMoreRegionEl = this.shadowRoot.querySelector('[part="load-more-region"]');
+        this.composerEl = this.shadowRoot.querySelector('[part="composer"]');
+        this.composerInputEl = this.shadowRoot.querySelector('[part="composer-input"]');
+    }
+    setupListeners() {
+        this.eventsEl.addEventListener("click", event => {
+            const link = event.target.closest('[part="evidence-link"]');
+            if (!link || !this.eventsEl.contains(link)) {
+                return;
+            }
+            const eventId = link.getAttribute("data-event-id") ?? "";
+            const evidenceId = link.getAttribute("data-evidence-id") ?? "";
+            const source = this.events.find(entry => entry.id === eventId);
+            const evidence = source?.evidence?.find(entry => entry.id === evidenceId);
+            if (evidence) {
+                this.dispatchEvent(new CustomEvent("evidence-selected", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { event: source, evidence },
+                }));
+            }
+        });
+        this.loadMoreRegionEl.addEventListener("click", event => {
+            if (event.target.closest('[part="load-more"]')) {
+                this.dispatchEvent(new CustomEvent("load-more", { bubbles: true, composed: true }));
+            }
+        });
+        this.composerEl.addEventListener("click", event => {
+            if (event.target.closest('[part="composer-submit"]')) {
+                this.emitEntrySubmitted();
+            }
+        });
+        this.composerInputEl.addEventListener("keydown", event => {
+            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                this.emitEntrySubmitted();
+            }
+        });
+    }
+    update() {
+        if (!this.eventsEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.eventsEl.setAttribute("aria-label", this.heading);
+        const events = this.events;
+        this.eventsEl.hidden = events.length === 0;
+        this.emptyEl.hidden = events.length > 0;
+        const signature = this.getAttribute("events") ?? "";
+        if (signature !== this.eventsSignature) {
+            this.eventsSignature = signature;
+            this.rebuildEvents(events);
+        }
+        this.loadMoreRegionEl.hidden = !this.hasMore;
+        const composable = this.composable;
+        this.composerEl.hidden = !composable;
+        this.composerInputEl.disabled = !composable;
+    }
+}
+Timeline.register();

package/dist/patterns/timeline/types.d.ts

@@ -0,0 +1,36 @@
+export type TimelineTone = "neutral" | "brand" | "success" | "warning" | "error";
+/** A piece of supporting evidence attached to an event (document, record, citation). */
+export interface TimelineEvidence {
+    id: string;
+    label: string;
+    /** Optional deep link; without it the shell still emits `evidence-selected`. */
+    href?: string;
+}
+/**
+ * One append-only activity entry: who did what, when, with what supporting
+ * evidence. `correlationId` threads the event to the workflow call that
+ * produced it (audit requirement); `badge` carries a short structured
+ * outcome such as a policy-check result.
+ */
+export interface TimelineEvent {
+    id: string;
+    action: string;
+    actor?: {
+        name: string;
+        initials?: string;
+    };
+    /** Free-text detail under the action line. */
+    summary?: string;
+    /** ISO timestamp; rendered as-is-formatted, sorted by the host. */
+    timestamp?: string;
+    tone?: TimelineTone;
+    badge?: string;
+    correlationId?: string;
+    evidence?: TimelineEvidence[];
+}
+export interface TimelineEntrySubmittedDetail {
+    body: string;
+}
+export declare const resolveTimelineTone: (value: string | null | undefined) => TimelineTone;
+/** Attribute payloads are author input — validate every record, not just the array. */
+export declare const isTimelineEventRecord: (value: unknown) => value is TimelineEvent;

package/dist/patterns/timeline/types.js

@@ -0,0 +1,27 @@
+const TONES = new Set(["neutral", "brand", "success", "warning", "error"]);
+export const resolveTimelineTone = (value) => value && TONES.has(value) ? value : "neutral";
+/** Attribute payloads are author input — validate every record, not just the array. */
+export const isTimelineEventRecord = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const event = value;
+    if (typeof event.id !== "string" || event.id.length === 0 || typeof event.action !== "string") {
+        return false;
+    }
+    if (event.evidence !== undefined) {
+        if (!Array.isArray(event.evidence)) {
+            return false;
+        }
+        for (const entry of event.evidence) {
+            const evidence = entry;
+            if (typeof evidence !== "object" ||
+                evidence === null ||
+                typeof evidence.id !== "string" ||
+                typeof evidence.label !== "string") {
+                return false;
+            }
+        }
+    }
+    return true;
+};

package/dist/patterns/versions/graph-layout.d.ts

@@ -0,0 +1,43 @@
+import type { VersionNode } from "./types.js";
+export interface VersionGraphPlacement {
+    id: string;
+    /** Horizontal column, 0 = trunk. */
+    lane: number;
+    /** Vertical position, 0 = newest. */
+    row: number;
+}
+export interface VersionGraphEdge {
+    /** Parent (older) node. */
+    fromId: string;
+    /** Child (newer) node. */
+    toId: string;
+    fromLane: number;
+    fromRow: number;
+    toLane: number;
+    toRow: number;
+}
+export interface VersionGraphLayout {
+    /** One placement per surviving node, in display order (newest first). */
+    placements: VersionGraphPlacement[];
+    edges: VersionGraphEdge[];
+    laneCount: number;
+    rowCount: number;
+    /** Degradations: duplicate ids, unknown parents, cycles. Never throws. */
+    warnings: string[];
+}
+/**
+ * Git-network layout as a pure function: topological order (host input order
+ * breaks ties), first child continues its parent's lane, later siblings
+ * branch to the lowest free lane, and a merge releases the lanes of the
+ * branches it closes so the next branch can reuse them. Malformed topology
+ * degrades instead of throwing — duplicate ids are dropped, unknown parents
+ * are ignored, and cycle members are appended in input order — with each
+ * degradation reported in `warnings`.
+ */
+export declare const computeVersionGraphLayout: (nodes: readonly VersionNode[]) => VersionGraphLayout;
+/**
+ * The shared display order for both projections: topological, newest first.
+ * The list and the graph agree by construction because both derive their
+ * order from the same layout.
+ */
+export declare const orderVersionsForDisplay: (nodes: readonly VersionNode[]) => VersionNode[];

package/dist/patterns/versions/graph-layout.js

@@ -0,0 +1,159 @@
+/**
+ * Git-network layout as a pure function: topological order (host input order
+ * breaks ties), first child continues its parent's lane, later siblings
+ * branch to the lowest free lane, and a merge releases the lanes of the
+ * branches it closes so the next branch can reuse them. Malformed topology
+ * degrades instead of throwing — duplicate ids are dropped, unknown parents
+ * are ignored, and cycle members are appended in input order — with each
+ * degradation reported in `warnings`.
+ */
+export const computeVersionGraphLayout = (nodes) => {
+    const warnings = [];
+    const byId = new Map();
+    const ordered = [];
+    for (const node of nodes) {
+        if (byId.has(node.id)) {
+            warnings.push(`Duplicate version id dropped: ${node.id}`);
+            continue;
+        }
+        byId.set(node.id, node);
+        ordered.push(node);
+    }
+    const parentsOf = new Map();
+    for (const node of ordered) {
+        const known = [];
+        const seen = new Set();
+        for (const parentId of node.parents ?? []) {
+            if (parentId === node.id) {
+                warnings.push(`Self parent ignored: ${node.id}`);
+                continue;
+            }
+            if (!byId.has(parentId)) {
+                warnings.push(`Unknown parent ignored: ${node.id} -> ${parentId}`);
+                continue;
+            }
+            if (seen.has(parentId)) {
+                continue;
+            }
+            seen.add(parentId);
+            known.push(parentId);
+        }
+        parentsOf.set(node.id, known);
+    }
+    // Kahn's topological sort, oldest first; ready nodes resolve in input order.
+    const inputIndex = new Map(ordered.map((node, index) => [node.id, index]));
+    const remainingParents = new Map();
+    const childrenOf = new Map();
+    for (const node of ordered) {
+        const parents = parentsOf.get(node.id);
+        remainingParents.set(node.id, parents.length);
+        for (const parentId of parents) {
+            const children = childrenOf.get(parentId) ?? [];
+            children.push(node.id);
+            childrenOf.set(parentId, children);
+        }
+    }
+    const ready = ordered
+        .filter(node => remainingParents.get(node.id) === 0)
+        .map(node => node.id);
+    const topo = [];
+    while (ready.length > 0) {
+        const id = ready.shift();
+        topo.push(id);
+        for (const childId of childrenOf.get(id) ?? []) {
+            const left = remainingParents.get(childId) - 1;
+            remainingParents.set(childId, left);
+            if (left === 0) {
+                const at = ready.findIndex(other => inputIndex.get(other) > inputIndex.get(childId));
+                if (at === -1) {
+                    ready.push(childId);
+                }
+                else {
+                    ready.splice(at, 0, childId);
+                }
+            }
+        }
+    }
+    if (topo.length < ordered.length) {
+        const placed = new Set(topo);
+        for (const node of ordered) {
+            if (!placed.has(node.id)) {
+                warnings.push(`Cycle detected; appended in input order: ${node.id}`);
+                topo.push(node.id);
+            }
+        }
+    }
+    // Lane allocation in topological (oldest-first) order.
+    const laneOf = new Map();
+    const laneTips = new Map();
+    const freeLanes = [];
+    let laneCount = 0;
+    const takeLane = () => {
+        if (freeLanes.length > 0) {
+            freeLanes.sort((a, b) => a - b);
+            return freeLanes.shift();
+        }
+        laneCount += 1;
+        return laneCount - 1;
+    };
+    for (const id of topo) {
+        const parents = parentsOf.get(id);
+        let lane = null;
+        for (const parentId of parents) {
+            const parentLane = laneOf.get(parentId);
+            if (parentLane !== undefined && laneTips.get(parentLane) === parentId) {
+                lane = parentLane;
+                break;
+            }
+        }
+        if (lane === null) {
+            lane = takeLane();
+        }
+        laneOf.set(id, lane);
+        laneTips.set(lane, id);
+        // A merge closes the branches it consumes: release their lanes.
+        for (const parentId of parents) {
+            const parentLane = laneOf.get(parentId);
+            if (parentLane !== undefined && parentLane !== lane && laneTips.get(parentLane) === parentId) {
+                laneTips.delete(parentLane);
+                freeLanes.push(parentLane);
+            }
+        }
+    }
+    // Display rows run newest first, like a git log.
+    const rowCount = topo.length;
+    const rowOf = new Map(topo.map((id, index) => [id, rowCount - 1 - index]));
+    const placements = [...topo]
+        .reverse()
+        .map(id => ({ id, lane: laneOf.get(id), row: rowOf.get(id) }));
+    const edges = [];
+    for (const id of topo) {
+        for (const parentId of parentsOf.get(id)) {
+            edges.push({
+                fromId: parentId,
+                toId: id,
+                fromLane: laneOf.get(parentId),
+                fromRow: rowOf.get(parentId),
+                toLane: laneOf.get(id),
+                toRow: rowOf.get(id),
+            });
+        }
+    }
+    return { placements, edges, laneCount: Math.max(laneCount, 1), rowCount, warnings };
+};
+/**
+ * The shared display order for both projections: topological, newest first.
+ * The list and the graph agree by construction because both derive their
+ * order from the same layout.
+ */
+export const orderVersionsForDisplay = (nodes) => {
+    // Keep the first record per id — the same resolution the layout applies —
+    // so the returned records match the topology the layout placed.
+    const byId = new Map();
+    for (const node of nodes) {
+        if (!byId.has(node.id)) {
+            byId.set(node.id, node);
+        }
+    }
+    return computeVersionGraphLayout(nodes).placements.map(placement => byId.get(placement.id));
+};