@unofficialbox/box-open-elements 0.20.0 → 0.21.0

package/dist/patterns/flow-builder/flow-builder.js

@@ -0,0 +1,200 @@
+import { BaseElement } from "../../core/index.js";
+import { announce } from "../../foundations/a11y/index.js";
+import { nodeAtPath, nodeTitle } from "./model.js";
+import { InsertPoint } from "./primitives.js";
+/** Host-owned document editing with accessible navigation and responsive inspection. */
+export class FlowBuilder extends BaseElement {
+    static tagName = "box-flow-builder";
+    nodesValue = [];
+    catalogValue = [];
+    selectedValue = null;
+    invalidValue = null;
+    renderer;
+    cleanupInspector;
+    inspected;
+    renderedRenderer;
+    observer;
+    narrow = false;
+    insertion;
+    invoker;
+    spine;
+    palette;
+    picker;
+    popup;
+    aside;
+    inspector;
+    drawer;
+    error;
+    get nodes() { return this.nodesValue; }
+    set nodes(value) { this.nodesValue = value; this.refresh(); }
+    get catalog() { return this.catalogValue; }
+    set catalog(value) { this.catalogValue = value; this.refresh(); }
+    get selected() { return this.selectedValue; }
+    set selected(node) { this.select(node); }
+    get renderInspector() { return this.renderer; }
+    set renderInspector(renderer) { this.renderer = renderer; if (this.isRendered)
+        this.updateInspector(); }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof ResizeObserver !== "undefined") {
+            this.observer = new ResizeObserver(entries => this.setNarrow(entries[0].contentRect.width < 800));
+            this.observer.observe(this);
+        }
+        this.setNarrow((this.getBoundingClientRect().width || this.ownerDocument.defaultView?.innerWidth || 1024) < 800);
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.cleanupInspector?.();
+        this.cleanupInspector = undefined;
+        this.inspected = undefined;
+        this.closePicker(false);
+        this.selectedValue = null;
+        this.drawer.open = false;
+    }
+    setNarrow(narrow) {
+        if (this.narrow === narrow)
+            return;
+        this.narrow = narrow;
+        this.shadowRoot.querySelector("[part=layout]").dataset.narrow = String(narrow);
+        this.updateInspector();
+    }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>
+      :host{display:block;min-width:0;font:inherit;color:var(--boe-token-text-text,#222)}
+      :host([hidden]){display:none!important}
+      [part=layout]{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:24px;align-items:start}
+      [part=layout][data-narrow=true]{grid-template-columns:minmax(0,1fr)}
+      aside{min-width:0;padding:16px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;background:var(--boe-token-surface-surface,#fff)}
+      [part=picker-popup]{position:fixed;z-index:1000;max-width:min(360px,calc(100vw - 24px));max-height:65vh;overflow:auto;padding:16px;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;box-shadow:0 8px 32px #0003}
+      [part=error]{color:var(--boe-token-text-status-text-error,#b92340);margin-bottom:16px;overflow-wrap:anywhere}
+      [hidden]{display:none!important} h2{font:inherit;font-weight:650;margin:0 0 12px}
+      </style><div part="error" hidden></div><div part="layout"><box-flow-spine></box-flow-spine><aside part="inspector"><box-kind-picker></box-kind-picker><div part="editor"></div></aside></div><div part="picker-popup" hidden><box-kind-picker></box-kind-picker></div><box-drawer position="bottom" size="large"></box-drawer>`;
+        this.spine = this.shadowRoot.querySelector("box-flow-spine");
+        this.aside = this.shadowRoot.querySelector("aside");
+        this.palette = this.aside.querySelector("box-kind-picker");
+        this.inspector = this.aside.querySelector("[part=editor]");
+        this.popup = this.shadowRoot.querySelector("[part=picker-popup]");
+        this.picker = this.popup.querySelector("box-kind-picker");
+        this.picker.variant = "menu";
+        this.drawer = this.shadowRoot.querySelector("box-drawer");
+        this.error = this.shadowRoot.querySelector("[part=error]");
+    }
+    setupListeners() {
+        this.spine.addEventListener("node-select", event => this.select(event.detail.node));
+        this.spine.addEventListener("insert-request", event => {
+            this.insertion = event.detail;
+            this.invoker = event.composedPath().find(item => item instanceof InsertPoint);
+            const rect = this.invoker.getBoundingClientRect();
+            this.popup.hidden = false;
+            this.picker.catalog = this.catalog;
+            this.picker.refresh();
+            const viewport = this.ownerDocument.defaultView;
+            const popupRect = this.popup.getBoundingClientRect();
+            this.popup.style.left = `${Math.max(12, Math.min(rect.left, viewport.innerWidth - popupRect.width - 12))}px`;
+            this.popup.style.top = `${Math.max(12, Math.min(rect.bottom + 8, viewport.innerHeight - popupRect.height - 12))}px`;
+            this.picker.focus();
+        });
+        this.picker.addEventListener("picker-cancel", () => this.closePicker(true));
+        this.picker.addEventListener("focusout", event => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && (this.picker.contains(next) || this.picker.shadowRoot?.contains(next)))
+                return;
+            this.closePicker(false);
+        });
+        this.picker.addEventListener("kind-pick", event => {
+            const insertion = this.insertion;
+            if (!insertion)
+                return;
+            this.insert(event.detail.kind, insertion);
+        });
+        this.palette.addEventListener("kind-pick", event => this.insert(event.detail.kind, { list: this.nodes, index: this.nodes.length, label: "Append to flow" }));
+        this.drawer.addEventListener("open-changed", event => {
+            if (!event.detail.open && this.narrow && this.selectedValue)
+                this.select(null);
+        });
+    }
+    closePicker(restoreFocus) {
+        if (!this.popup)
+            return;
+        this.popup.hidden = true;
+        this.insertion = undefined;
+        if (restoreFocus)
+            this.invoker?.focus();
+    }
+    insert(kind, insertion) {
+        const node = kind.create();
+        insertion.list.splice(insertion.index, 0, node);
+        this.closePicker(false);
+        this.selectedValue = this.narrow ? null : node;
+        this.refresh();
+        // Keep the newly inserted card visible on small screens; explicit selection opens editing.
+        this.spine.focusNode(node);
+        announce(`Added ${nodeTitle(node, this.catalog)}`, "polite", this.ownerDocument);
+        this.dispatchEvent(new CustomEvent("flow-changed", { detail: { nodes: this.nodes, node, reason: "insert" }, bubbles: true, composed: true }));
+    }
+    select(node) {
+        this.selectedValue = node;
+        if (this.isRendered) {
+            this.spine.select(node, this.invalidValue);
+            this.updateInspector();
+        }
+        this.dispatchEvent(new CustomEvent("selection-changed", { detail: { node }, bubbles: true, composed: true }));
+    }
+    /** Mark validation without opening a sheet over the error on a narrow screen. */
+    setValidation(message, path = [], document = { body: this.nodes }) {
+        this.invalidValue = message ? nodeAtPath(document, path) : null;
+        this.error.textContent = message;
+        this.error.hidden = !message;
+        this.spine.select(this.selected, this.invalidValue);
+        if (message) {
+            if (!this.narrow && this.invalidValue)
+                this.select(this.invalidValue);
+            else if (this.narrow)
+                this.select(null);
+            announce(message, "assertive", this.ownerDocument);
+        }
+    }
+    refresh() { if (this.isRendered)
+        this.update(); }
+    update() {
+        this.spine.nodes = this.nodes;
+        this.spine.catalog = this.catalog;
+        this.spine.selected = this.selected;
+        this.spine.invalid = this.invalidValue;
+        this.spine.refresh();
+        this.palette.catalog = this.catalog;
+        this.palette.refresh();
+        this.updateInspector();
+    }
+    updateInspector() {
+        this.aside.hidden = this.narrow;
+        this.palette.hidden = Boolean(this.selected);
+        const target = this.narrow ? this.drawer : this.aside;
+        if (this.inspector.parentElement !== target)
+            target.append(this.inspector);
+        if (this.inspected === this.selected && this.renderedRenderer === this.renderer) {
+            this.drawer.open = this.narrow && Boolean(this.selected);
+            return;
+        }
+        this.cleanupInspector?.();
+        this.cleanupInspector = undefined;
+        this.inspector.replaceChildren();
+        this.inspected = this.selected;
+        this.renderedRenderer = this.renderer;
+        if (this.selected) {
+            const heading = document.createElement("h2");
+            heading.textContent = nodeTitle(this.selected, this.catalog);
+            this.inspector.append(heading);
+            if (this.renderer)
+                this.cleanupInspector = this.renderer(this.selected, this.inspector) || undefined;
+            else {
+                const description = document.createElement("p");
+                description.textContent = this.selected.description || this.catalog.find(kind => kind.kind === this.selected.kind)?.description || "Select a step to inspect its configuration.";
+                this.inspector.append(description);
+            }
+            this.drawer.heading = nodeTitle(this.selected, this.catalog);
+        }
+        this.drawer.open = this.narrow && Boolean(this.selected);
+    }
+}
+FlowBuilder.register();

package/dist/patterns/flow-builder/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./model.js";
+export * from "./primitives.js";
+export * from "./flow-builder.js";

package/dist/patterns/flow-builder/index.js

@@ -0,0 +1,3 @@
+export * from "./model.js";
+export * from "./primitives.js";
+export * from "./flow-builder.js";

package/dist/patterns/flow-builder/model.d.ts

@@ -0,0 +1,33 @@
+export interface FlowNode {
+    id?: string;
+    kind: string;
+    title?: string;
+    description?: string;
+    status?: string;
+    body?: FlowNode[];
+    branches?: FlowBranch[];
+}
+export interface FlowBranch {
+    label: string;
+    body: FlowNode[];
+}
+export interface FlowKind {
+    kind: string;
+    label: string;
+    description: string;
+    group?: string;
+    /** Supply an authored SVG node (for example from a named glyph import). */
+    icon?: () => Node;
+    create(): FlowNode;
+}
+export interface FlowInsertDetail {
+    list: FlowNode[];
+    index: number;
+    label: string;
+}
+export type NodePath = readonly (string | number)[];
+export declare const nodeTitle: (node: FlowNode, catalog?: readonly FlowKind[]) => string;
+export declare function cardLabel(node: FlowNode, catalog?: readonly FlowKind[], invalid?: boolean): string;
+export declare function insertLabel(list: readonly FlowNode[], index: number, where?: string, catalog?: readonly FlowKind[]): string;
+/** Return the deepest node on a validation path, including paths ending in a field. */
+export declare function nodeAtPath(document: unknown, path: NodePath): FlowNode | null;

package/dist/patterns/flow-builder/model.js

@@ -0,0 +1,28 @@
+export const nodeTitle = (node, catalog = []) => node.title || catalog.find(kind => kind.kind === node.kind)?.label || "Step";
+export function cardLabel(node, catalog = [], invalid = false) {
+    const kind = catalog.find(entry => entry.kind === node.kind);
+    const title = nodeTitle(node, catalog);
+    return [title, kind?.label !== title ? kind?.label : "", node.description || kind?.description, node.status, invalid ? "Needs attention" : ""].filter(Boolean).join(". ");
+}
+export function insertLabel(list, index, where = "in the flow", catalog = []) {
+    if (!list.length)
+        return `Add the first step ${where}`;
+    if (index === 0)
+        return `Insert before ${nodeTitle(list[0], catalog)} ${where}`;
+    if (index >= list.length)
+        return `Insert after ${nodeTitle(list[list.length - 1], catalog)} ${where}`;
+    return `Insert between ${nodeTitle(list[index - 1], catalog)} and ${nodeTitle(list[index], catalog)} ${where}`;
+}
+/** Return the deepest node on a validation path, including paths ending in a field. */
+export function nodeAtPath(document, path) {
+    let current = document;
+    let result = null;
+    for (const segment of path) {
+        if (!current || typeof current !== "object" || !Object.hasOwn(current, segment))
+            break;
+        current = current[segment];
+        if (current && typeof current === "object" && "kind" in current && typeof current.kind === "string")
+            result = current;
+    }
+    return result;
+}

package/dist/patterns/flow-builder/primitives.d.ts

@@ -0,0 +1,47 @@
+import { BaseElement } from "../../core/index.js";
+import { type FlowInsertDetail, type FlowKind, type FlowNode } from "./model.js";
+export declare class FlowCard extends BaseElement {
+    static readonly tagName = "box-flow-card";
+    node: FlowNode;
+    catalog: readonly FlowKind[];
+    selected: boolean;
+    invalid: boolean;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    refresh(): void;
+    focus(options?: FocusOptions): void;
+    protected update(): void;
+}
+export declare class InsertPoint extends BaseElement {
+    static readonly tagName = "box-insert-point";
+    detail: FlowInsertDetail;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    focus(options?: FocusOptions): void;
+    protected update(): void;
+}
+export declare class KindPicker extends BaseElement {
+    static readonly tagName = "box-kind-picker";
+    catalog: readonly FlowKind[];
+    variant: "inline" | "menu";
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    refresh(): void;
+    focus(options?: FocusOptions): void;
+    protected update(): void;
+}
+export declare class FlowSpine extends BaseElement {
+    static readonly tagName = "box-flow-spine";
+    nodes: FlowNode[];
+    catalog: readonly FlowKind[];
+    selected: FlowNode | null;
+    invalid: FlowNode | null;
+    startLabel: string;
+    endLabel: string;
+    private cards;
+    protected renderTemplate(): void;
+    refresh(): void;
+    focusNode(node: FlowNode): void;
+    select(node: FlowNode | null, invalid?: FlowNode | null): void;
+    protected update(): void;
+}

package/dist/patterns/flow-builder/primitives.js

@@ -0,0 +1,192 @@
+import { BaseElement } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { cardLabel, insertLabel, nodeTitle } from "./model.js";
+const styles = `
+  :host { display:block; min-width:0; color:var(--boe-token-text-text,#222); font:inherit; }
+  :host([hidden]) { display:none!important; }
+  button { font:inherit; color:inherit; cursor:pointer; }
+  ${boeFocusVisibleStyles("button")}
+`;
+function emit(host, name, detail) { host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true })); }
+export class FlowCard extends BaseElement {
+    static tagName = "box-flow-card";
+    node = { id: "", kind: "" };
+    catalog = [];
+    selected = false;
+    invalid = false;
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>${styles}
+      button { width:100%; text-align:start; display:grid; gap:6px; padding:16px; border:1px solid var(--boe-token-stroke-stroke,#ddd); border-radius:var(--boe-profile-radius-med,8px); background:var(--boe-token-surface-surface,#fff); overflow-wrap:anywhere; }
+      button[aria-pressed=true] { border-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,#fff)); }
+      button[data-invalid=true] { border-color:var(--boe-token-text-status-text-error,#b92340); }
+      button.has-icon{grid-template-columns:20px minmax(0,1fr);column-gap:12px} button.has-icon [part=icon]{grid-column:1;grid-row:1/span 4} button.has-icon [part=title],button.has-icon [part=kind],button.has-icon [part=description],button.has-icon [part=status],button.has-icon [part=error]{grid-column:2}
+      [part=icon]{color:var(--boe-token-surface-surface-brand,#0061d5);width:20px;height:20px} [part=icon] svg{display:block;width:20px;height:20px} [part=title] { font-weight:650; } [part=kind],[part=description] { color:var(--boe-token-text-text-secondary,#666); } [part=error] { color:var(--boe-token-text-status-text-error,#b92340); }
+      [hidden] { display:none!important; }
+      </style><button type="button" part="card"><span part="icon" aria-hidden="true"></span><span part="title"></span><span part="kind"></span><span part="description"></span><span part="status"></span><span part="error">Needs attention</span></button>`;
+    }
+    setupListeners() { this.shadowRoot.querySelector("button").addEventListener("click", () => emit(this, "node-select", { node: this.node })); }
+    refresh() { if (this.isRendered)
+        this.update(); }
+    focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
+    update() {
+        const kind = this.catalog.find(kind => kind.kind === this.node.kind);
+        const title = nodeTitle(this.node, this.catalog);
+        const button = this.shadowRoot.querySelector("button");
+        button.setAttribute("aria-pressed", String(this.selected));
+        button.classList.toggle("has-icon", Boolean(kind?.icon));
+        button.setAttribute("aria-label", cardLabel(this.node, this.catalog, this.invalid));
+        button.dataset.invalid = String(this.invalid);
+        const iconEl = this.shadowRoot.querySelector("[part=icon]");
+        iconEl.replaceChildren(kind?.icon?.() ?? "");
+        iconEl.hidden = !kind?.icon;
+        for (const [part, text] of Object.entries({ title, kind: kind?.label !== title ? kind?.label ?? "" : "", description: this.node.description || kind?.description || "", status: this.node.status || "" })) {
+            const element = this.shadowRoot.querySelector(`[part=${part}]`);
+            element.textContent = text;
+            element.hidden = !text;
+        }
+        this.shadowRoot.querySelector("[part=error]").hidden = !this.invalid;
+    }
+}
+export class InsertPoint extends BaseElement {
+    static tagName = "box-insert-point";
+    detail = { list: [], index: 0, label: "Add the first step" };
+    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} :host{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0} :host::before,:host::after{content:"";height:10px;border-inline-start:2px solid var(--boe-token-stroke-stroke,#ddd)} button{display:grid;place-items:center;min-width:32px;min-height:32px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:50%;background:var(--boe-token-surface-surface,#fff);font-weight:700;line-height:1;padding:0 9px} button:hover{border-color:var(--boe-token-surface-surface-brand,#0061d5);color:var(--boe-token-surface-surface-brand,#0061d5)} :host([data-empty]) button{border-radius:16px;font-weight:600;padding:6px 12px}</style><button type="button" part="button" aria-haspopup="menu"></button>`; }
+    setupListeners() { this.shadowRoot.querySelector("button").addEventListener("click", () => emit(this, "insert-request", this.detail)); }
+    focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
+    update() { const button = this.shadowRoot.querySelector("button"); const empty = !this.detail.list.length; this.toggleAttribute("data-empty", empty); button.textContent = empty ? this.detail.label : "+"; button.setAttribute("aria-label", this.detail.label); }
+}
+export class KindPicker extends BaseElement {
+    static tagName = "box-kind-picker";
+    catalog = [];
+    variant = "inline";
+    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=choices]{display:grid;gap:8px} button{text-align:start;padding:10px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff)} small{display:block;color:var(--boe-token-text-text-secondary,#666)} h3{font:inherit;font-weight:650;margin:12px 0 4px}</style><div part="choices"></div>`; }
+    setupListeners() {
+        this.shadowRoot.addEventListener("keydown", event => {
+            const e = event;
+            if (this.variant !== "menu")
+                return;
+            if (e.key === "Escape") {
+                e.preventDefault();
+                emit(this, "picker-cancel", {});
+                return;
+            }
+            const buttons = Array.from(this.shadowRoot.querySelectorAll("button"));
+            if (!buttons.length)
+                return;
+            const current = buttons.indexOf(this.shadowRoot.activeElement);
+            const next = e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : ["ArrowDown", "ArrowRight"].includes(e.key) ? (current + 1) % buttons.length : ["ArrowUp", "ArrowLeft"].includes(e.key) ? (current - 1 + buttons.length) % buttons.length : -1;
+            if (next < 0)
+                return;
+            e.preventDefault();
+            buttons.forEach((button, index) => button.tabIndex = index === next ? 0 : -1);
+            buttons[next].focus();
+        });
+    }
+    refresh() { if (this.isRendered)
+        this.update(); }
+    focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
+    update() {
+        const choices = this.shadowRoot.querySelector("[part=choices]");
+        choices.setAttribute("role", this.variant === "menu" ? "menu" : "group");
+        choices.setAttribute("aria-label", "Choose a step type");
+        choices.replaceChildren();
+        let group = "";
+        this.catalog.forEach((kind, index) => {
+            if (kind.group && group !== kind.group) {
+                const heading = document.createElement("h3");
+                heading.textContent = kind.group;
+                heading.setAttribute("role", "presentation");
+                choices.append(heading);
+                group = kind.group;
+            }
+            const button = document.createElement("button");
+            button.type = "button";
+            button.textContent = kind.label;
+            if (this.variant === "menu") {
+                button.setAttribute("role", "menuitem");
+                button.tabIndex = index === 0 ? 0 : -1;
+            }
+            const description = document.createElement("small");
+            description.textContent = kind.description;
+            button.append(description);
+            button.addEventListener("click", () => emit(this, "kind-pick", { kind }));
+            choices.append(button);
+        });
+        if (!this.catalog.length)
+            choices.textContent = "No step types available.";
+    }
+}
+export class FlowSpine extends BaseElement {
+    static tagName = "box-flow-spine";
+    nodes = [];
+    catalog = [];
+    selected = null;
+    invalid = null;
+    startLabel = "Flow starts";
+    endLabel = "Flow ends";
+    cards = new Map();
+    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=spine]{display:grid;gap:0;min-width:0} [part=branches]{display:flex;gap:16px;overflow-x:auto;max-width:100%;padding:8px} [part=branch]{flex:1 0 240px;min-width:0} [part=body]{margin:0 0 0 16px;border-inline-start:2px solid var(--boe-token-stroke-stroke,#ddd);padding:8px 12px} [part=endpoint]{text-align:center;font-weight:600;padding:12px} h3{font:inherit;font-weight:600}</style><div part="spine"></div>`; }
+    refresh() { if (this.isRendered)
+        this.update(); }
+    focusNode(node) { this.cards.get(node)?.focus(); }
+    select(node, invalid = this.invalid) { this.selected = node; this.invalid = invalid; for (const [item, card] of this.cards) {
+        card.selected = item === node;
+        card.invalid = item === invalid;
+        card.refresh();
+    } }
+    update() {
+        const root = this.shadowRoot.querySelector("[part=spine]");
+        const seen = new Set();
+        const listView = (list, where, ancestors) => {
+            const fragment = document.createDocumentFragment();
+            for (let index = 0; index <= list.length; index++) {
+                const point = document.createElement(InsertPoint.tagName);
+                point.detail = { list, index, label: insertLabel(list, index, where, this.catalog) };
+                fragment.append(point);
+                if (index === list.length)
+                    break;
+                const node = list[index];
+                if (ancestors.has(node) || seen.has(node))
+                    continue;
+                seen.add(node);
+                const card = this.cards.get(node) ?? document.createElement(FlowCard.tagName);
+                this.cards.set(node, card);
+                card.node = node;
+                card.catalog = this.catalog;
+                card.selected = node === this.selected;
+                card.invalid = node === this.invalid;
+                card.refresh();
+                fragment.append(card);
+                const nextAncestors = new Set([...ancestors, node]);
+                if (node.body) {
+                    const body = document.createElement("section");
+                    body.setAttribute("part", "body");
+                    body.setAttribute("aria-label", `${nodeTitle(node, this.catalog)} steps`);
+                    body.append(listView(node.body, `inside ${nodeTitle(node, this.catalog)}`, nextAncestors));
+                    fragment.append(body);
+                }
+                if (node.branches) {
+                    const branches = document.createElement("div");
+                    branches.setAttribute("part", "branches");
+                    node.branches.forEach(branch => { const column = document.createElement("section"); column.setAttribute("part", "branch"); column.setAttribute("aria-label", branch.label); const heading = document.createElement("h3"); heading.textContent = branch.label; column.append(heading, listView(branch.body, `in ${branch.label}`, nextAncestors)); branches.append(column); });
+                    fragment.append(branches);
+                }
+            }
+            return fragment;
+        };
+        const start = document.createElement("div");
+        start.setAttribute("part", "endpoint");
+        start.textContent = this.startLabel;
+        const end = document.createElement("div");
+        end.setAttribute("part", "endpoint");
+        end.textContent = this.endLabel;
+        root.replaceChildren(start, listView(this.nodes, "in the flow", new Set()), end);
+        for (const node of this.cards.keys())
+            if (!seen.has(node))
+                this.cards.delete(node);
+    }
+}
+FlowCard.register();
+InsertPoint.register();
+KindPicker.register();
+FlowSpine.register();

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

@@ -35,6 +35,7 @@ const elementStyles = `
 
         :host {
           display: block;
+          min-inline-size: 0;
           color: inherit;
           font: inherit;
         }
@@ -47,6 +48,7 @@ const elementStyles = `
 
         section[part="panel"] {
           display: grid;
+          grid-template-columns: minmax(0, 1fr);
           gap: ${boePanel.gap};
           padding: ${boePanel.padding};
           border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
@@ -55,6 +57,7 @@ const elementStyles = `
         }
 
         [part="title"] {
+          overflow-wrap: anywhere;
           margin: 0;
           font: inherit;
           font-size: 1.1rem;
@@ -65,11 +68,24 @@ const elementStyles = `
         [part="graph"] {
           position: relative;
           overflow-x: auto;
+          min-inline-size: 0;
+          padding-block: 3px;
+        }
+
+        [part="graph"]:focus-visible {
+          outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+          outline-offset: 2px;
+        }
+
+        [part="scroll-hint"] {
+          margin: 0;
+          font-size: 0.78rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
 
         [part="edges"] {
           position: absolute;
-          inset-block-start: 0;
+          inset-block-start: 3px;
           inset-inline-start: 0;
           pointer-events: none;
         }
@@ -104,6 +120,8 @@ const elementStyles = `
         }
 
         [part="rows"] {
+          inline-size: max-content;
+          min-inline-size: 100%;
           list-style: none;
           margin: 0;
           padding: 0;
@@ -113,7 +131,8 @@ const elementStyles = `
         [part="row"] {
           position: relative;
           display: flex;
-          flex-wrap: wrap;
+          flex-wrap: nowrap;
+          white-space: nowrap;
           align-items: center;
           gap: 0.45rem;
           block-size: ${ROW_HEIGHT}px;
@@ -192,13 +211,13 @@ const elementStyles = `
         }
 
         [part="edge-chip"][data-deviation="minor"] {
-          border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 55%, transparent);
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 46%, black 54%);
+          border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 55%, transparent);
+          color: var(--boe-token-text-status-text-warning, #805600);
         }
 
         [part="edge-chip"][data-deviation="major"] {
           border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 45%, transparent);
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 74%, black 26%);
+          color: var(--boe-token-text-status-text-error, #b92340);
         }
 
         [part="edge-chip"]:focus-visible {
@@ -481,7 +500,8 @@ export class LineageGraph extends BaseElement {
         <h2 part="title">${escapeHtml(this.heading)}</h2>
         ${layout.placements.length > 0
             ? `
-              <div part="graph">
+              <p part="scroll-hint">Scroll horizontally to explore nodes and comparisons.</p>
+              <div part="graph" role="region" aria-label="${escapeHtml(this.heading)} — scroll horizontally to explore" tabindex="0">
                 <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>