@unofficialbox/box-open-elements 0.5.0 → 0.7.0

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

@@ -0,0 +1,434 @@
+import { isLineageNodeRecord, resolveLineageDeviation } from "./types.js";
+import { computeVersionGraphLayout } from "../versions/graph-layout.js";
+import { formatItemDate } from "../content-explorer/adapters/item-summary.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-lineage-graph";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const LANE_WIDTH = 26;
+const ROW_HEIGHT = 56;
+const EDGE_PAD = 8;
+const DEVIATION_LABELS = {
+    none: "in sync",
+    minor: "minor deviation",
+    major: "major deviation",
+};
+const elementStyles = `
+        [hidden] {
+          display: none !important;
+        }
+
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        section[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="graph"] {
+          position: relative;
+          overflow-x: auto;
+        }
+
+        [part="edges"] {
+          position: absolute;
+          inset-block-start: 0;
+          inset-inline-start: 0;
+          pointer-events: none;
+        }
+
+        [part="edge"] {
+          fill: none;
+          stroke: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 45%, transparent);
+          stroke-width: 2;
+        }
+
+        [part="edge"][data-deviation="minor"] {
+          stroke: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 75%, transparent);
+        }
+
+        [part="edge"][data-deviation="major"] {
+          stroke: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 70%, transparent);
+        }
+
+        [part="rows"] {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          position: relative;
+        }
+
+        [part="row"] {
+          position: relative;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.45rem;
+          block-size: ${ROW_HEIGHT}px;
+          border-radius: ${boeRadius.med};
+        }
+
+        [part="node"] {
+          position: absolute;
+          inset-block-start: 50%;
+          transform: translate(-50%, -50%);
+          appearance: none;
+          padding: 0;
+          inline-size: 0.9rem;
+          block-size: 0.9rem;
+          border-radius: 999px;
+          border: 2px solid var(--boe-token-text-text-secondary, #6f6f6f);
+          background: var(--boe-token-surface-surface, #ffffff);
+          cursor: pointer;
+        }
+
+        [part="node"][data-kind="clause"] {
+          border-color: var(--boe-token-surface-surface-brand, #0061d5);
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="node"][data-kind="template"] {
+          border-radius: ${boeRadius.size};
+        }
+
+        [part="node"][data-kind="contract"] {
+          background: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="node"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 45%, transparent);
+        }
+
+        [part="row-label"] {
+          font-weight: 700;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="kind"] {
+          display: inline-flex;
+          padding: 0.1rem 0.4rem;
+          border-radius: 999px;
+          background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.72rem;
+          font-weight: 700;
+          text-transform: capitalize;
+        }
+
+        [part="row-meta"] {
+          font-size: 0.78rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="edge-chip"] {
+          appearance: none;
+          font: inherit;
+          font-size: 0.74rem;
+          font-weight: 600;
+          padding: 0.2rem 0.5rem;
+          border-radius: 999px;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          cursor: pointer;
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="edge-chip"]:hover {
+          background: var(--boe-token-surface-surface-hover, #f4f4f4);
+        }
+
+        [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%);
+        }
+
+        [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%);
+        }
+
+        [part="edge-chip"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, 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);
+        }
+      `;
+/**
+ * Provenance DAG for clause lineage (opportunity 2): source clause →
+ * template versions → executed contracts, laid out by the versions
+ * pattern's `computeVersionGraphLayout` and rendered with tone-coloured
+ * deviation edges. Every node is an HTML button (`node-selected`), and every
+ * derivation edge is ALSO a per-row chip button (`edge-selected` with the
+ * parent/child pair — the diff viewer's input), so edge activation is
+ * keyboard-accessible without SVG hit targets: the row rail is the
+ * accessible contract, the SVG is presentation.
+ */
+export class LineageGraph extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["heading", "nodes"];
+    }
+    nodesValue = [];
+    rovingId = null;
+    hostEl;
+    get heading() {
+        return this.getAttribute("heading") ?? "Clause lineage";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get nodes() {
+        return this.nodesValue;
+    }
+    set nodes(value) {
+        this.nodesValue = Array.isArray(value) ? value.filter(isLineageNodeRecord) : [];
+        if (this.rovingId && !this.nodesValue.some(node => node.id === this.rovingId)) {
+            this.rovingId = null;
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "nodes") {
+            this.nodesValue = this.parseNodesAttribute(newValue);
+            if (this.rovingId && !this.nodesValue.some(node => node.id === this.rovingId)) {
+                this.rovingId = null;
+            }
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    parseNodesAttribute(raw) {
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed.filter(isLineageNodeRecord) : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getNode(id) {
+        return this.nodesValue.find(node => node.id === id);
+    }
+    nodeButtons() {
+        return Array.from(this.hostEl.querySelectorAll('[part="node"]'));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+        this.hostEl = this.shadowRoot.querySelector('[part="content-host"]');
+    }
+    setupListeners() {
+        this.hostEl.addEventListener("click", event => {
+            const target = event.target;
+            const edgeChip = target.closest('[part="edge-chip"]');
+            if (edgeChip && this.hostEl.contains(edgeChip)) {
+                const parent = this.getNode(edgeChip.getAttribute("data-parent-id") ?? "");
+                const child = this.getNode(edgeChip.getAttribute("data-child-id") ?? "");
+                if (!parent || !child) {
+                    return;
+                }
+                const link = (child.parents ?? []).find(entry => entry.id === parent.id);
+                this.dispatchEvent(new CustomEvent("edge-selected", {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        parent,
+                        child,
+                        deviation: resolveLineageDeviation(link?.deviation),
+                        ...(link?.note ? { note: link.note } : {}),
+                    },
+                }));
+                return;
+            }
+            const nodeButton = target.closest('[part="node"]');
+            if (nodeButton && this.hostEl.contains(nodeButton)) {
+                const node = this.getNode(nodeButton.getAttribute("data-id") ?? "");
+                if (!node) {
+                    return;
+                }
+                this.rovingId = node.id;
+                this.dispatchEvent(new CustomEvent("node-selected", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { node },
+                }));
+            }
+        });
+        this.hostEl.addEventListener("keydown", event => {
+            const target = event.target;
+            if (target.getAttribute("part") !== "node") {
+                return;
+            }
+            const buttons = this.nodeButtons();
+            const index = buttons.indexOf(target);
+            if (index === -1) {
+                return;
+            }
+            let next = null;
+            if (event.key === "ArrowDown") {
+                next = Math.min(index + 1, buttons.length - 1);
+            }
+            else if (event.key === "ArrowUp") {
+                next = Math.max(index - 1, 0);
+            }
+            else if (event.key === "Home") {
+                next = 0;
+            }
+            else if (event.key === "End") {
+                next = buttons.length - 1;
+            }
+            if (next === null || next === index) {
+                return;
+            }
+            event.preventDefault();
+            const button = buttons[next];
+            this.rovingId = button.getAttribute("data-id");
+            for (const other of buttons) {
+                other.tabIndex = other === button ? 0 : -1;
+            }
+            button.focus();
+        });
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        const active = this.shadowRoot?.activeElement;
+        const focusedId = active && this.hostEl.contains(active) && active.getAttribute("part") === "node"
+            ? active.getAttribute("data-id")
+            : null;
+        // The versions layout engine only needs the id topology; deviation data
+        // stays on the lineage links and decorates the produced edges.
+        const layout = computeVersionGraphLayout(this.nodesValue.map(node => ({
+            id: node.id,
+            label: node.label,
+            parents: (node.parents ?? []).map(link => link.id),
+        })));
+        const byId = new Map(this.nodesValue.map(node => [node.id, node]));
+        const deviationFor = (parentId, childId) => {
+            const link = (byId.get(childId)?.parents ?? []).find(entry => entry.id === parentId);
+            return resolveLineageDeviation(link?.deviation);
+        };
+        const graphWidth = EDGE_PAD * 2 + layout.laneCount * LANE_WIDTH;
+        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 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>`;
+        })
+            .join("");
+        const rovingId = this.rovingId && byId.has(this.rovingId)
+            ? this.rovingId
+            : (layout.placements[0]?.id ?? null);
+        const rows = layout.placements
+            .map(placement => {
+            const node = byId.get(placement.id);
+            const kind = node.kind ?? "";
+            const when = node.timestamp ? formatItemDate(node.timestamp) : "";
+            const ariaLabel = [node.label, kind, node.actor?.name ?? ""].filter(Boolean).join(", ");
+            const edgeChips = (node.parents ?? [])
+                .filter(link => byId.has(link.id))
+                .map(link => {
+                const parent = byId.get(link.id);
+                const deviation = resolveLineageDeviation(link.deviation);
+                return `
+              <button
+                type="button"
+                part="edge-chip"
+                data-parent-id="${escapeHtml(parent.id)}"
+                data-child-id="${escapeHtml(node.id)}"
+                data-deviation="${deviation}"
+                aria-label="Compare with ${escapeHtml(parent.label)} (${DEVIATION_LABELS[deviation]})"
+              >⇠ ${escapeHtml(parent.label)} · ${DEVIATION_LABELS[deviation]}</button>
+            `;
+            })
+                .join("");
+            return `
+          <li part="row" data-id="${escapeHtml(node.id)}"${kind ? ` data-kind="${escapeHtml(kind)}"` : ""} style="padding-inline-start: ${String(graphWidth + 10)}px;">
+            <button
+              type="button"
+              part="node"
+              data-id="${escapeHtml(node.id)}"
+              ${kind ? `data-kind="${escapeHtml(kind)}"` : ""}
+              tabindex="${node.id === rovingId ? "0" : "-1"}"
+              aria-label="${escapeHtml(ariaLabel)}"
+              style="inset-inline-start: ${String(centerX(placement.lane))}px;"
+            ></button>
+            <span part="row-label">${escapeHtml(node.label)}</span>
+            ${kind ? `<span part="kind">${escapeHtml(kind)}</span>` : ""}
+            <span part="row-meta">${[node.actor?.name, when].filter(Boolean).map(text => escapeHtml(text)).join(" · ")}</span>
+            ${edgeChips}
+          </li>
+        `;
+        })
+            .join("");
+        this.hostEl.innerHTML = `
+      <section part="panel" aria-label="${escapeHtml(this.heading)}">
+        <h2 part="title">${escapeHtml(this.heading)}</h2>
+        ${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>
+                <ol part="rows" role="list">${rows}</ol>
+              </div>
+            `
+            : `<div part="empty">No lineage.</div>`}
+      </section>
+    `;
+        if (focusedId) {
+            const buttons = this.nodeButtons();
+            const target = buttons.find(button => button.getAttribute("data-id") === focusedId) ??
+                buttons.find(button => button.tabIndex === 0) ??
+                buttons[0];
+            target?.focus();
+        }
+    }
+}
+LineageGraph.register();

package/dist/patterns/lineage/provenance-strip.d.ts

@@ -0,0 +1,22 @@
+import type { LineageNode } from "./types.js";
+import { BaseElement } from "../../core/index.js";
+/**
+ * The cheap, high-frequency lineage sibling: a linear ancestry strip
+ * (Library clause v5 → Template 2026 → MSA_Acme §4.2) for record headers
+ * and the sidebar. Renders the chain oldest-first from the same topology
+ * contract as `box-lineage-graph` (branched input degrades to topological
+ * order), marks the newest entry as current, and emits `node-selected`.
+ */
+export declare class ProvenanceStrip extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private nodesValue;
+    private hostEl;
+    get nodes(): LineageNode[];
+    set nodes(value: LineageNode[]);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseNodesAttribute;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

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

@@ -0,0 +1,194 @@
+import { isLineageNodeRecord } from "./types.js";
+import { computeVersionGraphLayout } from "../versions/graph-layout.js";
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-provenance-strip";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        [hidden] {
+          display: none !important;
+        }
+
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="strip"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.35rem;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+
+        [part="item"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.35rem;
+        }
+
+        [part="chip"] {
+          appearance: none;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.3rem;
+          font: inherit;
+          font-size: 0.8rem;
+          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);
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          cursor: pointer;
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="chip"]:hover {
+          background: var(--boe-token-surface-surface-hover, #f4f4f4);
+        }
+
+        [part="chip"][aria-current="true"] {
+          border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 45%, transparent);
+          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"]: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"] {
+          inline-size: 0.45rem;
+          block-size: 0.45rem;
+          border-radius: 999px;
+          background: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="item"][data-kind="clause"] [part="kind-dot"] {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="item"][data-kind="template"] [part="kind-dot"] {
+          border-radius: 2px;
+        }
+
+        [part="separator"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          user-select: none;
+        }
+      `;
+/**
+ * The cheap, high-frequency lineage sibling: a linear ancestry strip
+ * (Library clause v5 → Template 2026 → MSA_Acme §4.2) for record headers
+ * and the sidebar. Renders the chain oldest-first from the same topology
+ * contract as `box-lineage-graph` (branched input degrades to topological
+ * order), marks the newest entry as current, and emits `node-selected`.
+ */
+export class ProvenanceStrip extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["nodes"];
+    }
+    nodesValue = [];
+    hostEl;
+    get nodes() {
+        return this.nodesValue;
+    }
+    set nodes(value) {
+        this.nodesValue = Array.isArray(value) ? value.filter(isLineageNodeRecord) : [];
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "nodes") {
+            this.nodesValue = this.parseNodesAttribute(newValue);
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    parseNodesAttribute(raw) {
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed.filter(isLineageNodeRecord) : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+        this.hostEl = this.shadowRoot.querySelector('[part="content-host"]');
+    }
+    setupListeners() {
+        this.hostEl.addEventListener("click", event => {
+            const chip = event.target.closest('[part="chip"]');
+            if (!chip || !this.hostEl.contains(chip)) {
+                return;
+            }
+            const node = this.nodesValue.find(entry => entry.id === chip.getAttribute("data-id"));
+            if (node) {
+                this.dispatchEvent(new CustomEvent("node-selected", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { node },
+                }));
+            }
+        });
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        // Placements come newest-first; the strip reads oldest → newest.
+        const layout = computeVersionGraphLayout(this.nodesValue.map(node => ({
+            id: node.id,
+            label: node.label,
+            parents: (node.parents ?? []).map(link => link.id),
+        })));
+        const byId = new Map(this.nodesValue.map(node => [node.id, node]));
+        const chain = [...layout.placements].reverse().map(placement => byId.get(placement.id));
+        const items = chain
+            .map((node, index) => {
+            const isCurrent = index === chain.length - 1;
+            const kind = node.kind ?? "";
+            return `
+          <li part="item"${kind ? ` data-kind="${escapeHtml(kind)}"` : ""}>
+            ${index > 0 ? `<span part="separator" aria-hidden="true">→</span>` : ""}
+            <button
+              type="button"
+              part="chip"
+              data-id="${escapeHtml(node.id)}"
+              ${isCurrent ? `aria-current="true"` : ""}
+            ><span part="kind-dot" aria-hidden="true"></span>${escapeHtml(node.label)}</button>
+          </li>
+        `;
+        })
+            .join("");
+        this.hostEl.innerHTML = chain.length
+            ? `<ol part="strip" aria-label="Provenance">${items}</ol>`
+            : "";
+    }
+}
+ProvenanceStrip.register();