@unofficialbox/box-open-elements 0.10.0 → 0.12.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/preview/annotation-thread.d.ts

@@ -1,57 +1,76 @@
-import { BaseElement } from "../../core/index.js";
-export type AnnotationThreadAction = {
-    id: string;
-    label: string;
-    tone?: string;
-};
-export type AnnotationThreadEntry = {
-    author: string;
-    body: string;
-    createdAt?: string;
-    id: string;
-    initials?: string;
-    status?: string;
+import { CommentThread } from "../comments/index.js";
+import type { CommentAction, CommentEntry, CommentSubmittedDetail } from "../comments/index.js";
+/** @deprecated Prefer `CommentAction`; kept so existing hosts keep compiling. */
+export type AnnotationThreadAction = CommentAction;
+/** @deprecated Prefer `CommentSubmittedDetail`. */
+export type AnnotationThreadEntrySubmittedDetail = CommentSubmittedDetail;
+/**
+ * An annotation comment.
+ *
+ * A comment plus `toolLabel` — which annotation tool produced it (highlight,
+ * draw, stamp). That field is the only thing an annotation entry adds, which is
+ * why the rest of the model lives in `patterns/comments`.
+ */
+export type AnnotationThreadEntry = CommentEntry & {
     toolLabel?: string;
 };
-export type AnnotationThreadEntrySubmittedDetail = {
-    body: string;
-    inReplyToId: string | null;
+/**
+ * Where in the document a thread is attached.
+ *
+ * Every field is optional because anchors arrive in different shapes: a page
+ * number alone for a page-level note, a region for a drawn box, a quote for
+ * selected text. A thread with no anchor at all is a comment, and belongs on
+ * `box-comment-thread` instead.
+ */
+export type AnnotationAnchor = {
+    page?: number;
+    quote?: string;
+    region?: {
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    };
 };
-export declare class AnnotationThread extends BaseElement {
+/**
+ * A comment thread anchored to a place in a document.
+ *
+ * This is `box-comment-thread` plus the anchor. The distinction is the whole
+ * point: comments stand on their own — on a file, a task, a contract clause —
+ * and only become annotations when something ties them to a page, a region, or
+ * a run of selected text. Hosts that want the former should reach for
+ * `box-comment-thread` directly rather than for an annotation with no anchor.
+ *
+ * Every attribute, part and event of the underlying thread is inherited
+ * unchanged, so this remains a drop-in for the previous implementation.
+ */
+export declare class AnnotationThread extends CommentThread {
     static readonly tagName: string;
     static get observedAttributes(): string[];
-    private titleEl;
-    private messageEl;
-    private entriesEl;
-    private emptyEl;
-    private actionsEl;
-    private composerEl;
-    private composerInputEl;
-    private entriesSignature;
-    private actionsSignature;
-    get actions(): AnnotationThreadAction[];
-    set actions(value: AnnotationThreadAction[]);
-    get composable(): boolean;
-    set composable(value: boolean);
+    private anchorEl;
+    protected threadStyles(): string;
+    protected headerExtras(): string;
+    protected defaultHeading(): string;
+    protected emptyText(): string;
+    protected defaultComposerLabel(): string;
+    protected defaultPlaceholder(): string;
+    /**
+     * Annotations name their pill `toolLabel`. Mapping it here keeps that
+     * vocabulary for existing hosts while the base model stays generic.
+     */
+    protected entryBadge(entry: AnnotationThreadEntry): string | undefined;
+    /** Where in the document this thread sits. Null when unanchored. */
+    get anchor(): AnnotationAnchor | null;
+    set anchor(value: AnnotationAnchor | null);
     get entries(): AnnotationThreadEntry[];
     set entries(value: AnnotationThreadEntry[]);
-    get message(): string;
-    set message(value: string);
-    get selectedEntryId(): string;
-    set selectedEntryId(value: string);
-    get heading(): string;
-    set heading(value: string);
-    private parseJsonAttribute;
-    private emitAction;
-    private emitEntrySelected;
-    private submitComposer;
-    private entriesKey;
-    private actionsKey;
-    private rebuildEntries;
-    private patchEntrySelection;
-    private rebuildActions;
-    private patchActionLabels;
-    protected renderTemplate(): void;
-    protected setupListeners(): void;
+    /**
+     * The anchor in words.
+     *
+     * A region is described by its page rather than by its coordinates: the
+     * numbers locate the highlight for the renderer, but they tell a reader
+     * nothing, and a screen reader least of all.
+     */
+    private anchorLocation;
     protected update(): void;
 }