@unofficialbox/box-open-elements 0.10.0 → 0.11.0

package/dist/patterns/lineage/lineage-graph.js

@@ -1,5 +1,6 @@
 import { isLineageNodeRecord, resolveLineageDeviation } from "./types.js";
 import { computeVersionGraphLayout } from "../versions/graph-layout.js";
+import { hasEndArrow, hasStartArrow, resolveGraphArrows } from "../versions/graph-arrows.js";
 import { formatItemDate } from "../content-explorer/adapters/item-summary.js";
 import { BaseElement } from "../../core/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
@@ -14,6 +15,14 @@ const escapeHtml = (value) => value
 const LANE_WIDTH = 26;
 const ROW_HEIGHT = 56;
 const EDGE_PAD = 8;
+/**
+ * How far short of a node's centre an edge stops.
+ *
+ * The arrowhead marks the path's end vertex, so an edge running to the centre
+ * would bury its head under the node disc. The largest node here is ~1.05rem
+ * across, so backing off 9px leaves the head just clear of the biggest one.
+ */
+const NODE_EDGE_OFFSET = 9;
 const DEVIATION_LABELS = {
     none: "in sync",
     minor: "minor deviation",
@@ -59,6 +68,21 @@ const elementStyles = `
           pointer-events: none;
         }
 
+        /* The arrowhead. Same colour as the stroke it terminates, stated
+           rather than inherited: context-stroke is not supported everywhere. */
+        [part="edge-arrow"] {
+          fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 45%, transparent);
+          stroke: none;
+        }
+
+        [part="edge-arrow"][data-deviation="minor"] {
+          fill: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 75%, transparent);
+        }
+
+        [part="edge-arrow"][data-deviation="major"] {
+          fill: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 70%, transparent);
+        }
+
         [part="edge"] {
           fill: none;
           stroke: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 45%, transparent);
@@ -196,7 +220,17 @@ const elementStyles = `
 export class LineageGraph extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["heading", "nodes"];
+        return ["arrows", "heading", "nodes"];
+    }
+    /**
+     * Which ends of each edge carry an arrowhead. Defaults to `end`, the head on
+     * the derived node, because the layout builds edges source → derived.
+     */
+    get arrows() {
+        return resolveGraphArrows(this.getAttribute("arrows"));
+    }
+    set arrows(value) {
+        this.setAttribute("arrows", value);
     }
     nodesValue = [];
     rovingId = null;
@@ -352,16 +386,43 @@ export class LineageGraph extends BaseElement {
         const graphHeight = layout.rowCount * ROW_HEIGHT;
         const centerX = (lane) => EDGE_PAD + lane * LANE_WIDTH + LANE_WIDTH / 2;
         const centerY = (row) => row * ROW_HEIGHT + ROW_HEIGHT / 2;
+        const arrows = this.arrows;
         const edgePaths = layout.edges
             .map(edge => {
             const x1 = centerX(edge.fromLane);
             const y1 = centerY(edge.fromRow);
             const x2 = centerX(edge.toLane);
             const y2 = centerY(edge.toRow);
-            const d = edge.fromLane === edge.toLane
-                ? `M ${x1} ${y1} L ${x2} ${y2}`
-                : `M ${x1} ${y1} C ${x1} ${y1 - ROW_HEIGHT / 2}, ${x2} ${y2 + ROW_HEIGHT / 2}, ${x2} ${y2}`;
-            return `<path part="edge" data-deviation="${deviationFor(edge.fromId, edge.toId)}" d="${d}"></path>`;
+            // One curve rule for every edge, rather than a straight line for
+            // same-lane edges and a cubic for lane changes: two rules made the
+            // graph read as two different diagrams. A cubic whose ends share an x
+            // degenerates to a straight vertical on its own, so same-lane edges
+            // still render straight without being a special case.
+            //
+            // Control points are pulled *along* the direction of travel — half the
+            // vertical distance each — so the bend always leaves the parent
+            // downward and enters the child from above. The previous version
+            // offset them by a fixed half-row in the wrong direction (up from the
+            // start, down from the end on a downward edge), so an edge spanning
+            // one row bowed backwards into an S while a longer one looked almost
+            // straight.
+            // Stop at each node's edge rather than its centre. A marker sits on
+            // the path's end vertex, so a vertex inside the node disc buries it —
+            // and an edge that starts and ends at the rim reads as connecting two
+            // nodes rather than as passing through them, which is what React Flow
+            // gets from anchoring edges to handles.
+            const yStart = y1 + Math.sign(y2 - y1) * NODE_EDGE_OFFSET;
+            const yEnd = y2 + Math.sign(y1 - y2) * NODE_EDGE_OFFSET;
+            const dy = (yEnd - yStart) / 2;
+            const d = `M ${x1} ${yStart} C ${x1} ${yStart + dy}, ${x2} ${yEnd - dy}, ${x2} ${yEnd}`;
+            const deviation = deviationFor(edge.fromId, edge.toId);
+            // One marker per deviation rather than context-stroke, which is not
+            // supported everywhere: an arrowhead in the wrong colour reads as a
+            // different edge.
+            const marker = deviation === "minor" || deviation === "major" ? `boe-graph-arrow-${deviation}` : "boe-graph-arrow";
+            const startMarker = hasStartArrow(arrows) ? ` marker-start="url(#${marker})"` : "";
+            const endMarker = hasEndArrow(arrows) ? ` marker-end="url(#${marker})"` : "";
+            return `<path part="edge" data-deviation="${deviation}" d="${d}"${startMarker}${endMarker}></path>`;
         })
             .join("");
         const rovingId = this.rovingId && byId.has(this.rovingId)
@@ -415,7 +476,7 @@ export class LineageGraph extends BaseElement {
         ${layout.placements.length > 0
             ? `
               <div part="graph">
-                <svg part="edges" width="${String(graphWidth)}" height="${String(graphHeight)}" viewBox="0 0 ${String(graphWidth)} ${String(graphHeight)}" aria-hidden="true">${edgePaths}</svg>
+                <svg part="edges" width="${String(graphWidth)}" height="${String(graphHeight)}" viewBox="0 0 ${String(graphWidth)} ${String(graphHeight)}" aria-hidden="true"><defs><marker id="boe-graph-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path part="edge-arrow" d="M 0 0 L 8 4 L 0 8 z"></path></marker><marker id="boe-graph-arrow-minor" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path part="edge-arrow" data-deviation="minor" d="M 0 0 L 8 4 L 0 8 z"></path></marker><marker id="boe-graph-arrow-major" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path part="edge-arrow" data-deviation="major" d="M 0 0 L 8 4 L 0 8 z"></path></marker></defs>${edgePaths}</svg>
                 <ol part="rows" role="list">${rows}</ol>
               </div>
             `

package/dist/patterns/lineage/provenance-strip.js

@@ -21,37 +21,100 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* Read as a flow diagram rather than a breadcrumb. The anatomy is
+           React Flow's, taken from its stylesheet: nodes are bordered boxes
+           with a small radius (not pills), ports are 6px circles sitting on
+           the node's edge, and the connection between them is a drawn edge
+           with an arrowhead rather than a text glyph.
+
+           The canvas dot grid is the other half of the signal — a node graph
+           reads as a canvas, not as a line of text. */
         [part="strip"] {
           display: flex;
-          flex-wrap: wrap;
+          /* A canvas scrolls; it does not reflow. Wrapping put an edge at the
+             start of the second line with its arrow pointing into nothing,
+             which reads as broken rather than as a continuation. */
+          flex-wrap: nowrap;
+          overflow-x: auto;
           align-items: center;
-          gap: 0.35rem;
+          gap: 0;
           margin: 0;
-          padding: 0;
+          padding: 0.75rem;
           list-style: none;
+          border-radius: ${boeRadius.large};
+          background-image: radial-gradient(
+            color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 85%, transparent) 1px,
+            transparent 1px
+          );
+          background-size: 12px 12px;
+          background-position: -1px -1px;
         }
 
         [part="item"] {
           display: inline-flex;
           align-items: center;
-          gap: 0.35rem;
+          /* No shrinking: with nowrap a long chain must scroll, not compress
+             the nodes until their labels ellipsize. */
+          flex: 0 0 auto;
         }
 
+        /* The node. React Flow's default: 10px padding, a small radius, a 1px
+           border and a centred 12px label. Width is left to the content —
+           React Flow fixes it at 150px because it lays out on a free canvas,
+           whereas this strip is a row in a header and the labels are short. */
         [part="chip"] {
           appearance: none;
+          position: relative;
           display: inline-flex;
           align-items: center;
-          gap: 0.3rem;
+          gap: 0.35rem;
           font: inherit;
-          font-size: 0.8rem;
+          font-size: 0.78rem;
           font-weight: 600;
-          padding: 0.22rem 0.55rem;
-          border-radius: 999px;
-          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
+          padding: 0.4rem 0.6rem;
+          /* 4px, the nearest token to React Flow's 3px. The control radius is
+             20px here, which rendered the nodes as stadium pills — the shape
+             the strip was moving away from. */
+          border-radius: ${boeRadius.size};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 90%, var(--boe-token-text-text, #222222));
           background: var(--boe-token-surface-surface, #ffffff);
-          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          color: var(--boe-token-text-text, #222222);
+          box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
           cursor: pointer;
-          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        /* Ports. 6px circles straddling the node's edge, ringed in the surface
+           colour so they read as attached to the node rather than floating —
+           the same construction React Flow uses for its handles. */
+        [part="chip"]::before,
+        [part="chip"]::after {
+          content: "";
+          position: absolute;
+          inset-block-start: 50%;
+          inline-size: 6px;
+          block-size: 6px;
+          border-radius: 100%;
+          background: var(--boe-token-text-text-secondary, #6f6f6f);
+          border: 1px solid var(--boe-token-surface-surface, #ffffff);
+          transform: translateY(-50%);
+        }
+
+        [part="chip"]::before {
+          inset-inline-start: -4px;
+        }
+
+        [part="chip"]::after {
+          inset-inline-end: -4px;
+        }
+
+        /* The first node has nothing feeding it and the last nothing leaving
+           it, so they carry one port each — React Flow's input and output
+           nodes do the same. */
+        [part="item"]:first-child [part="chip"]::before,
+        [part="item"]:last-child [part="chip"]::after {
+          display: none;
         }
 
         [part="chip"]:hover {
@@ -59,15 +122,19 @@ const elementStyles = `
         }
 
         [part="chip"][aria-current="true"] {
-          border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 45%, transparent);
+          border-color: var(--boe-token-surface-surface-brand, #0061d5);
           color: var(--boe-token-surface-surface-brand, #0061d5);
           background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff));
         }
 
+        [part="chip"][aria-current="true"]::before,
+        [part="chip"][aria-current="true"]::after {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
         [part="chip"]:focus-visible {
           outline: none;
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
-          border-radius: ${boeRadius.large};
         }
 
         [part="kind-dot"] {
@@ -85,10 +152,34 @@ const elementStyles = `
           border-radius: 2px;
         }
 
+        /* The edge: a drawn line between two ports with an arrowhead, in place
+           of the "→" character the strip used to print. Two co-linear handles
+           are exactly the case where React Flow's bezier degenerates to a
+           straight line, so a straight edge is the faithful shape here rather
+           than a simplification. */
         [part="separator"] {
-          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          inline-size: 1.6rem;
+          block-size: 2px;
+          margin-inline: 4px;
+          background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 90%, var(--boe-token-text-text, #222222));
           user-select: none;
         }
+
+        [part="separator"]::after {
+          content: "";
+          position: absolute;
+          inset-inline-end: -1px;
+          inset-block-start: 50%;
+          inline-size: 0;
+          block-size: 0;
+          border-block: 4px solid transparent;
+          border-inline-start: 6px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 90%, var(--boe-token-text-text, #222222));
+          transform: translateY(-50%);
+        }
+
       `;
 /**
  * The cheap, high-frequency lineage sibling: a linear ancestry strip
@@ -175,7 +266,7 @@ export class ProvenanceStrip extends BaseElement {
             const kind = node.kind ?? "";
             return `
           <li part="item"${kind ? ` data-kind="${escapeHtml(kind)}"` : ""}>
-            ${index > 0 ? `<span part="separator" aria-hidden="true">→</span>` : ""}
+            ${index > 0 ? `<span part="separator" aria-hidden="true"></span>` : ""}
             <button
               type="button"
               part="chip"

package/dist/patterns/notifications/notification-inbox.js

@@ -1,4 +1,4 @@
-import { countUnreadNotifications, groupNotifications, isNotificationItemRecord, resolveNotificationFilter, resolveNotificationTone, } from "./types.js";
+import { countUnreadNotifications, groupNotifications, isNotificationItemRecord, resolveNotificationFilter, } from "./types.js";
 import { BaseElement } from "../../core/index.js";
 import { isSafeHref } from "../internal/safe-href.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
@@ -10,20 +10,6 @@ const escapeHtml = (value) => value
     .replaceAll(">", ">")
     .replaceAll('"', """)
     .replaceAll("'", "'");
-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 = `
         [hidden] {
           display: none !important;
@@ -160,7 +146,6 @@ const elementStyles = `
           align-items: start;
           padding: 0.5rem 0.55rem;
           border-radius: ${boeRadius.med};
-          border-left: 3px solid var(--notification-tone, transparent);
           background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 6%, transparent);
           transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
         }
@@ -381,7 +366,6 @@ export class NotificationInbox extends BaseElement {
         this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
     }
     itemHtml(item) {
-        const tone = resolveNotificationTone(item.tone);
         const read = Boolean(item.read);
         const entity = item.entityRef;
         const entityHtml = entity
@@ -390,7 +374,7 @@ export class NotificationInbox extends BaseElement {
                 : `<span part="entity">${escapeHtml(entity.label)}</span>`
             : "";
         return `
-      <li part="item" data-item-id="${escapeHtml(item.id)}" data-read="${String(read)}" data-type="${escapeHtml(item.type)}" style="--notification-tone:${toneColor(tone)};">
+      <li part="item" data-item-id="${escapeHtml(item.id)}" data-read="${String(read)}" data-type="${escapeHtml(item.type)}">
         <span part="unread-dot" aria-hidden="true"></span>
         <span part="item-body">
           <button type="button" part="item-title" data-item-id="${escapeHtml(item.id)}">${escapeHtml(item.title)}</button>

package/dist/patterns/timeline/timeline.js

@@ -60,6 +60,14 @@ const elementStyles = `
           margin: 0;
           padding: 0;
           display: grid;
+
+          /* Named so the spine can derive how far it has to reach rather than
+             restating the numbers. The line has to cross this entry's bottom
+             padding, the next entry's top padding and the marker's own offset
+             to arrive at the next marker; spelling that out as arithmetic
+             keeps it correct if any of the three changes. */
+          --timeline-event-pad: 0.55rem;
+          --timeline-marker-offset: 0.3rem;
         }
 
         [part="event"] {
@@ -67,29 +75,53 @@ const elementStyles = `
           display: grid;
           grid-template-columns: auto 1fr;
           gap: 0.65rem;
-          padding: 0.55rem 0 0.55rem 0.15rem;
+          padding: var(--timeline-event-pad) 0 var(--timeline-event-pad) 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);
+        /* The marker column, built the way box-path's base variant builds its
+           rail: the marker is a fixed box and the spine is a flex sibling that
+           takes whatever height is left, so the line runs from the marker to
+           the bottom of the entry however tall the entry's content turns out
+           to be.
+
+           The previous version positioned the spine with hand-tuned constants
+           (top: 1.9rem, bottom: -0.35rem) that guessed where the marker ended.
+           They were only ever right for one font size and one content height,
+           which is why the line stopped short of the next marker and dangled. */
+        [part="marker-rail"] {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          align-self: stretch;
+          margin-top: var(--timeline-marker-offset);
         }
 
         [part="marker"] {
+          flex: 0 0 auto;
           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%);
         }
 
+        /* The spine. Grows to fill the column, and the negative bottom margin
+           carries it across the gap into the next entry's marker so the two
+           actually meet. Hidden on the last entry, which leads nowhere. */
+        [part="marker-rail"]::after {
+          content: "";
+          flex: 1 1 auto;
+          inline-size: 2px;
+          margin-block: 0.25rem
+            calc(-1 * (var(--timeline-event-pad) * 2 + var(--timeline-marker-offset)));
+          border-radius: 999px;
+          background: var(--boe-token-stroke-stroke, #e8e8e8);
+        }
+
+        [part="event"]:last-child [part="marker-rail"]::after {
+          display: none;
+        }
+
         [part="event-body"] {
           display: grid;
           gap: 0.25rem;
@@ -328,7 +360,7 @@ export class Timeline extends BaseElement {
             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>
+            <span part="marker-rail" aria-hidden="true"><span part="marker"></span></span>
             <div part="event-body">
               <div part="event-topline">
                 ${event.actor ? `<span part="actor">${escapeHtml(event.actor.name)}</span>` : ""}

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

@@ -0,0 +1,22 @@
+/**
+ * Which ends of a graph edge carry an arrowhead.
+ *
+ * Shared by `box-version-graph` and `box-lineage-graph`, which draw the same
+ * edge geometry from the same layout and should not disagree about what an
+ * arrow means. Lives here rather than in either component because the lineage
+ * graph already depends on this directory for `computeVersionGraphLayout`, and
+ * the reverse dependency would be a cycle.
+ */
+export type GraphArrows = "none" | "start" | "end" | "both";
+/**
+ * Narrow an author-supplied value, falling back to `end`.
+ *
+ * `end` is the default because these are directed graphs: the layout builds
+ * every edge as parent → child, so a single head on the child is the reading
+ * that matches the data. A typo should not silently turn the direction off.
+ */
+export declare const resolveGraphArrows: (value: string | null | undefined) => GraphArrows;
+/** Whether the head at the child end is drawn. */
+export declare const hasEndArrow: (arrows: GraphArrows) => boolean;
+/** Whether the head at the parent end is drawn. */
+export declare const hasStartArrow: (arrows: GraphArrows) => boolean;

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

@@ -0,0 +1,13 @@
+const GRAPH_ARROWS = new Set(["none", "start", "end", "both"]);
+/**
+ * Narrow an author-supplied value, falling back to `end`.
+ *
+ * `end` is the default because these are directed graphs: the layout builds
+ * every edge as parent → child, so a single head on the child is the reading
+ * that matches the data. A typo should not silently turn the direction off.
+ */
+export const resolveGraphArrows = (value) => GRAPH_ARROWS.has(value) ? value : "end";
+/** Whether the head at the child end is drawn. */
+export const hasEndArrow = (arrows) => arrows === "end" || arrows === "both";
+/** Whether the head at the parent end is drawn. */
+export const hasStartArrow = (arrows) => arrows === "start" || arrows === "both";

package/dist/patterns/versions/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./types.js";
 export * from "./graph-layout.js";
+export * from "./graph-arrows.js";
 export * from "./version-list.js";
 export * from "./version-graph.js";

package/dist/patterns/versions/index.js

@@ -2,6 +2,7 @@
 export * from "./types.js";
 // Pure git-network layout engine (shared with future lineage graphs)
 export * from "./graph-layout.js";
+export * from "./graph-arrows.js";
 // Accessible core contract
 export * from "./version-list.js";
 // Git-style visualization layer

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

@@ -1,3 +1,4 @@
+import type { GraphArrows } from "./graph-arrows.js";
 import type { VersionNode } from "./types.js";
 import { BaseElement } from "../../core/index.js";
 /**
@@ -12,6 +13,12 @@ import { BaseElement } from "../../core/index.js";
 export declare class VersionGraph extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
+    /**
+     * Which ends of each edge carry an arrowhead. Defaults to `end`, the head on
+     * the child, because the layout builds edges parent → child.
+     */
+    get arrows(): GraphArrows;
+    set arrows(value: GraphArrows);
     private versionsValue;
     private compareIds;
     private rovingId;

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

@@ -1,4 +1,5 @@
 import { computeVersionGraphLayout, orderVersionsForDisplay } from "./graph-layout.js";
+import { hasEndArrow, hasStartArrow, resolveGraphArrows } from "./graph-arrows.js";
 import { escapeHtml, STATUS_LABELS } from "./shared.js";
 import { isVersionNodeRecord, resolveVersionKind, resolveVersionStatus } from "./types.js";
 import { formatItemDate } from "../content-explorer/adapters/item-summary.js";
@@ -8,6 +9,14 @@ const DEFAULT_TAG_NAME = "box-version-graph";
 const LANE_WIDTH = 26;
 const ROW_HEIGHT = 46;
 const EDGE_PAD = 8;
+/**
+ * How far short of a node's centre an edge stops.
+ *
+ * The arrowhead marks the path's end vertex, so an edge running to the centre
+ * would bury its head under the node disc. The largest node here is ~1.05rem
+ * across, so backing off 9px leaves the head just clear of the biggest one.
+ */
+const NODE_EDGE_OFFSET = 9;
 const elementStyles = `
         [hidden] {
           display: none !important;
@@ -48,6 +57,13 @@ const elementStyles = `
           pointer-events: none;
         }
 
+        /* The arrowhead. Same colour as the stroke it terminates, stated
+           rather than inherited: context-stroke is not supported everywhere. */
+        [part="edge-arrow"] {
+          fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 55%, transparent);
+          stroke: none;
+        }
+
         [part="edge"] {
           fill: none;
           stroke: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 55%, transparent);
@@ -187,7 +203,17 @@ const elementStyles = `
 export class VersionGraph extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["heading", "versions"];
+        return ["arrows", "heading", "versions"];
+    }
+    /**
+     * Which ends of each edge carry an arrowhead. Defaults to `end`, the head on
+     * the child, because the layout builds edges parent → child.
+     */
+    get arrows() {
+        return resolveGraphArrows(this.getAttribute("arrows"));
+    }
+    set arrows(value) {
+        this.setAttribute("arrows", value);
     }
     versionsValue = [];
     compareIds = [];
@@ -359,16 +385,38 @@ export class VersionGraph extends BaseElement {
         const graphHeight = layout.rowCount * ROW_HEIGHT;
         const centerX = (lane) => EDGE_PAD + lane * LANE_WIDTH + LANE_WIDTH / 2;
         const centerY = (row) => row * ROW_HEIGHT + ROW_HEIGHT / 2;
+        const arrows = this.arrows;
+        const startMarker = hasStartArrow(arrows) ? ` marker-start="url(#boe-graph-arrow)"` : "";
+        const endMarker = hasEndArrow(arrows) ? ` marker-end="url(#boe-graph-arrow)"` : "";
         const edgePaths = layout.edges
             .map(edge => {
             const x1 = centerX(edge.fromLane);
             const y1 = centerY(edge.fromRow);
             const x2 = centerX(edge.toLane);
             const y2 = centerY(edge.toRow);
-            const d = edge.fromLane === edge.toLane
-                ? `M ${x1} ${y1} L ${x2} ${y2}`
-                : `M ${x1} ${y1} C ${x1} ${y1 - ROW_HEIGHT / 2}, ${x2} ${y2 + ROW_HEIGHT / 2}, ${x2} ${y2}`;
-            return `<path part="edge" data-from="${escapeHtml(edge.fromId)}" data-to="${escapeHtml(edge.toId)}" d="${d}"></path>`;
+            // One curve rule for every edge, rather than a straight line for
+            // same-lane edges and a cubic for lane changes: two rules made the
+            // graph read as two different diagrams. A cubic whose ends share an x
+            // degenerates to a straight vertical on its own, so same-lane edges
+            // still render straight without being a special case.
+            //
+            // Control points are pulled *along* the direction of travel — half the
+            // vertical distance each — so the bend always leaves the parent
+            // downward and enters the child from above. The previous version
+            // offset them by a fixed half-row in the wrong direction (up from the
+            // start, down from the end on a downward edge), so an edge spanning
+            // one row bowed backwards into an S while a longer one looked almost
+            // straight.
+            // Stop at each node's edge rather than its centre. A marker sits on
+            // the path's end vertex, so a vertex inside the node disc buries it —
+            // and an edge that starts and ends at the rim reads as connecting two
+            // nodes rather than as passing through them, which is what React Flow
+            // gets from anchoring edges to handles.
+            const yStart = y1 + Math.sign(y2 - y1) * NODE_EDGE_OFFSET;
+            const yEnd = y2 + Math.sign(y1 - y2) * NODE_EDGE_OFFSET;
+            const dy = (yEnd - yStart) / 2;
+            const d = `M ${x1} ${yStart} C ${x1} ${yStart + dy}, ${x2} ${yEnd - dy}, ${x2} ${yEnd}`;
+            return `<path part="edge" data-from="${escapeHtml(edge.fromId)}" data-to="${escapeHtml(edge.toId)}" d="${d}"${startMarker}${endMarker}></path>`;
         })
             .join("");
         const rovingId = this.rovingId && byId.has(this.rovingId)
@@ -416,7 +464,7 @@ export class VersionGraph extends BaseElement {
         ${layout.placements.length > 0
             ? `
               <div part="graph">
-                <svg part="edges" width="${String(graphWidth)}" height="${String(graphHeight)}" viewBox="0 0 ${String(graphWidth)} ${String(graphHeight)}" aria-hidden="true">${edgePaths}</svg>
+                <svg part="edges" width="${String(graphWidth)}" height="${String(graphHeight)}" viewBox="0 0 ${String(graphWidth)} ${String(graphHeight)}" aria-hidden="true"><defs><marker id="boe-graph-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path part="edge-arrow" d="M 0 0 L 8 4 L 0 8 z"></path></marker></defs>${edgePaths}</svg>
                 <ol part="rows" role="list">${rows}</ol>
               </div>
             `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",