@unofficialbox/box-open-elements 0.20.0 → 0.22.0

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

@@ -0,0 +1,256 @@
+import { BaseElement } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { cardLabel, defaultFlowModel, insertLabel, nodeDescription, 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 })); }
+/** Parts a card exposes; the spine and builder forward them unchanged. */
+export const FLOW_CARD_PARTS = ["card", "icon", "title", "kind", "description", "status", "error"];
+/** Parts the spine exposes (its own plus forwarded card and insert-point parts). */
+export const FLOW_SPINE_PARTS = ["spine", "endpoint", "body", "branches", "branch", "branch-header", "branch-label", "branch-remove", "branch-add", "insert", ...FLOW_CARD_PARTS];
+/** Parts a kind picker exposes. */
+export const KIND_PICKER_PARTS = ["choices", "group-heading", "choice", "choice-icon", "choice-label", "choice-description"];
+export class FlowCard extends BaseElement {
+    static tagName = "box-flow-card";
+    node = { kind: "" };
+    catalog = [];
+    model = defaultFlowModel;
+    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][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [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, this.model);
+        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, this.model));
+        button.dataset.invalid = String(this.invalid);
+        const iconEl = this.shadowRoot.querySelector("[part=icon]");
+        iconEl.replaceChildren(kind?.icon?.() ?? "");
+        iconEl.hidden = !kind?.icon;
+        iconEl.dataset.tone = kind?.tone ?? "accent";
+        for (const [part, text] of Object.entries({ title, kind: kind?.label !== title ? kind?.label ?? "" : "", description: nodeDescription(this.node, this.catalog, this.model), status: this.model.status?.(this.node) || "" })) {
+            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)} button.has-icon{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start} [part=choice-icon]{grid-row:1/span 2;width:20px;height:20px;color:var(--boe-token-surface-surface-brand,#0061d5)} [part=choice-icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=choice-icon] svg{display:block;width:20px;height:20px} [part=choice-label]{display:block} 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");
+                heading.setAttribute("part", "group-heading");
+                choices.append(heading);
+                group = kind.group;
+            }
+            const button = document.createElement("button");
+            button.type = "button";
+            button.setAttribute("part", "choice");
+            if (kind.icon) {
+                const icon = document.createElement("span");
+                icon.setAttribute("part", "choice-icon");
+                icon.setAttribute("aria-hidden", "true");
+                icon.dataset.tone = kind.tone ?? "accent";
+                icon.append(kind.icon());
+                button.classList.add("has-icon");
+                button.append(icon);
+            }
+            const label = document.createElement("span");
+            label.setAttribute("part", "choice-label");
+            label.textContent = kind.label;
+            button.append(label);
+            if (this.variant === "menu") {
+                button.setAttribute("role", "menuitem");
+                button.tabIndex = index === 0 ? 0 : -1;
+            }
+            const description = document.createElement("small");
+            description.setAttribute("part", "choice-description");
+            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 = [];
+    model = defaultFlowModel;
+    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} [part=branch-header]{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1em 0} h3{font:inherit;font-weight:600;margin:0} [part=branch-remove],[part=branch-add]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:16px;background:var(--boe-token-surface-surface,#fff);padding:4px 10px} [part=branch-add]{justify-self:center;margin:4px 0}</style><div part="spine"></div>`; }
+    refresh() { if (this.isRendered)
+        this.update(); }
+    /** Re-render one card after its fields change, without rebuilding the spine. */
+    refreshNode(node) { this.cards.get(node)?.refresh(); }
+    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 title = (node) => nodeTitle(node, this.catalog, this.model);
+        const listView = (list, where, ancestors) => {
+            const fragment = document.createDocumentFragment();
+            for (let index = 0; index <= list.length; index++) {
+                const point = document.createElement(InsertPoint.tagName);
+                point.setAttribute("exportparts", "button: insert");
+                point.detail = { list, index, label: insertLabel(list, index, where, this.catalog, this.model) };
+                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);
+                card.setAttribute("exportparts", FLOW_CARD_PARTS.join(", "));
+                this.cards.set(node, card);
+                card.node = node;
+                card.catalog = this.catalog;
+                card.model = this.model;
+                card.selected = node === this.selected;
+                card.invalid = node === this.invalid;
+                card.refresh();
+                fragment.append(card);
+                const nextAncestors = new Set([...ancestors, node]);
+                const children = this.model.children(node);
+                for (const child of children.filter(child => child.label === undefined)) {
+                    const body = document.createElement("section");
+                    body.setAttribute("part", "body");
+                    body.setAttribute("aria-label", `${title(node)} steps`);
+                    body.append(listView(child.list, `inside ${title(node)}`, nextAncestors));
+                    fragment.append(body);
+                }
+                const branchLists = children.filter(child => child.label !== undefined);
+                const addLabel = this.model.addBranchLabel?.(node);
+                if (branchLists.length || addLabel) {
+                    const branches = document.createElement("div");
+                    branches.setAttribute("part", "branches");
+                    branchLists.forEach((branch, branchIndex) => {
+                        const label = branch.label;
+                        const column = document.createElement("section");
+                        column.setAttribute("part", "branch");
+                        column.setAttribute("aria-label", label);
+                        const header = document.createElement("div");
+                        header.setAttribute("part", "branch-header");
+                        const heading = document.createElement("h3");
+                        heading.setAttribute("part", "branch-label");
+                        heading.textContent = label;
+                        header.append(heading);
+                        if (branch.removable) {
+                            const remove = document.createElement("button");
+                            remove.type = "button";
+                            remove.setAttribute("part", "branch-remove");
+                            remove.textContent = "Remove";
+                            remove.setAttribute("aria-label", `Remove ${label} from ${title(node)}`);
+                            remove.addEventListener("click", () => emit(this, "branch-remove-request", { node, index: branchIndex, list: branch.list }));
+                            header.append(remove);
+                        }
+                        column.append(header, listView(branch.list, `in ${label}`, nextAncestors));
+                        branches.append(column);
+                    });
+                    fragment.append(branches);
+                    if (addLabel) {
+                        const add = document.createElement("button");
+                        add.type = "button";
+                        add.setAttribute("part", "branch-add");
+                        add.textContent = addLabel;
+                        add.setAttribute("aria-label", `${addLabel} to ${title(node)}`);
+                        add.addEventListener("click", () => emit(this, "branch-add-request", { node }));
+                        fragment.append(add);
+                    }
+                }
+            }
+            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>

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

@@ -17,6 +17,8 @@ const elementStyles = `
 
         :host {
           display: block;
+          min-inline-size: 0;
+          container: boe-notification-inbox / inline-size;
           color: inherit;
           font: inherit;
         }
@@ -29,6 +31,7 @@ const elementStyles = `
 
         [part="panel"] {
           display: grid;
+          grid-template-columns: minmax(0, 1fr);
           grid-template-rows: auto auto 1fr;
           gap: ${boePanel.gap};
           padding: ${boePanel.padding};
@@ -40,11 +43,13 @@ const elementStyles = `
 
         [part="header"] {
           display: flex;
+          flex-wrap: wrap;
           align-items: center;
           gap: 0.5rem;
         }
 
         [part="title"] {
+          overflow-wrap: anywhere;
           margin: 0;
           font: inherit;
           font-size: 1.05rem;
@@ -56,7 +61,7 @@ const elementStyles = `
           padding: 0.1rem 0.45rem;
           border-radius: 999px;
           background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 14%, transparent);
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 78%, black 22%);
+          color: var(--boe-token-text-status-text-error, #b92340);
           font-size: 0.72rem;
           font-weight: 700;
         }
@@ -134,7 +139,7 @@ const elementStyles = `
           text-transform: none;
           letter-spacing: normal;
           font-size: 0.7rem;
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 78%, black 22%);
+          color: var(--boe-token-text-status-text-error, #b92340);
         }
 
         [part="items"] {
@@ -147,7 +152,7 @@ const elementStyles = `
 
         [part="item"] {
           display: grid;
-          grid-template-columns: auto 1fr auto;
+          grid-template-columns: auto minmax(0, 1fr) auto;
           gap: 0.5rem;
           align-items: start;
           padding: 0.5rem 0.55rem;
@@ -174,6 +179,7 @@ const elementStyles = `
 
         [part="item-body"] {
           display: grid;
+          overflow-wrap: anywhere;
           gap: 0.15rem;
           min-inline-size: 0;
         }
@@ -223,6 +229,7 @@ const elementStyles = `
 
         [part="item-actions"] {
           display: flex;
+          flex-wrap: wrap;
           gap: 0.25rem;
         }
 
@@ -251,6 +258,15 @@ const elementStyles = `
           text-align: center;
         }
 
+        @container boe-notification-inbox (max-width: 32rem) {
+          [part="item"] {
+            grid-template-columns: auto minmax(0, 1fr);
+          }
+          [part="item-actions"] {
+            grid-column: 2;
+          }
+        }
+
         [part="filter"]:focus-visible,
         [part="mark-all"]:focus-visible,
         [part="item-title"]:focus-visible,

package/dist/patterns/preview/annotation-inspector.js

@@ -66,7 +66,7 @@ const elementStyles = `
           padding: 0.65rem;
           border-radius: ${boePanel.radius};
           border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
-          background: rgba(255, 255, 255, 0.72);
+          background: var(--boe-token-surface-surface, #ffffff);
         }
 
         [part="annotation-header"] {
@@ -254,7 +254,7 @@ const elementStyles = `
         [part="action"][data-tone="primary"] {
           border-color: transparent;
           background: var(--boe-token-surface-surface-brand, #0061d5);
-          color: #fff;
+          color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
 export class AnnotationInspector extends BaseElement {

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

@@ -0,0 +1,19 @@
+import { Toast } from "../../components/feedback/toast.js";
+/** Remove once and return an idempotent restore preserving the original object's identity. */
+export declare function removeAt<T>(list: T[], index: number): () => void;
+/** Never overwrite a key recreated after removal. */
+export declare function removeKey<T>(map: Record<string, T>, key: string): () => void;
+/** Restore into the current list, preserving intervening edits and clamping the index. */
+export declare function removeFromMapList<T>(map: Record<string, T[]>, key: string, index: number): () => void;
+export interface UndoOffer {
+    readonly toast: Toast | null;
+    undo(): void;
+    dispose(): void;
+}
+export interface UndoOptions {
+    container?: HTMLElement;
+    duration?: number;
+    onRestore?: () => void;
+}
+/** Offer a single document-scoped undo. Hosts call dispose on teardown. SSR-safe. */
+export declare function offerUndo(message: string, restore: () => void, options?: UndoOptions): UndoOffer;

package/dist/patterns/undo/index.js

@@ -0,0 +1,106 @@
+import { Toast } from "../../components/feedback/toast.js";
+import { announce } from "../../foundations/a11y/index.js";
+/** Remove once and return an idempotent restore preserving the original object's identity. */
+export function removeAt(list, index) {
+    if (!Number.isInteger(index) || index < 0 || index >= list.length)
+        return () => { };
+    const item = list.splice(index, 1)[0];
+    let restored = false;
+    return () => {
+        if (restored)
+            return;
+        restored = true;
+        list.splice(Math.min(index, list.length), 0, item);
+    };
+}
+/** Never overwrite a key recreated after removal. */
+export function removeKey(map, key) {
+    if (!Object.hasOwn(map, key))
+        return () => { };
+    const value = map[key];
+    delete map[key];
+    let restored = false;
+    return () => {
+        if (restored)
+            return;
+        restored = true;
+        if (!Object.hasOwn(map, key))
+            Object.defineProperty(map, key, { value, writable: true, enumerable: true, configurable: true });
+    };
+}
+/** Restore into the current list, preserving intervening edits and clamping the index. */
+export function removeFromMapList(map, key, index) {
+    const list = Object.hasOwn(map, key) ? map[key] : undefined;
+    if (!list || !Number.isInteger(index) || index < 0 || index >= list.length)
+        return () => { };
+    const item = list.splice(index, 1)[0];
+    if (!list.length)
+        delete map[key];
+    let restored = false;
+    return () => {
+        if (restored)
+            return;
+        restored = true;
+        if (!Object.hasOwn(map, key))
+            Object.defineProperty(map, key, { value: list, writable: true, enumerable: true, configurable: true });
+        const target = map[key];
+        target.splice(Math.min(index, target.length), 0, item);
+    };
+}
+const offers = new WeakMap();
+/** Offer a single document-scoped undo. Hosts call dispose on teardown. SSR-safe. */
+export function offerUndo(message, restore, options = {}) {
+    const doc = options.container?.ownerDocument ?? globalThis.document;
+    if (!doc?.body)
+        return { toast: null, undo() { }, dispose() { } };
+    offers.get(doc)?.dispose();
+    const toast = doc.createElement(Toast.tagName);
+    const action = doc.createElement("button");
+    action.type = "button";
+    action.slot = "action";
+    action.textContent = "Undo";
+    const mac = /Mac|iPhone|iPad/.test(doc.defaultView?.navigator.platform ?? "");
+    const shortcut = mac ? "Command-Z" : "Control-Z";
+    action.setAttribute("aria-keyshortcuts", mac ? "Meta+Z" : "Control+Z");
+    toast.append(action);
+    let live = true;
+    const dispose = () => {
+        if (!live)
+            return;
+        live = false;
+        doc.removeEventListener("keydown", onKey);
+        toast.removeEventListener("open-changed", onOpen);
+        toast.hide();
+        toast.remove();
+        if (offers.get(doc) === offer)
+            offers.delete(doc);
+    };
+    const undo = () => {
+        if (!live)
+            return;
+        dispose();
+        restore();
+        options.onRestore?.();
+        announce("Restored", "polite", doc);
+    };
+    const onKey = (event) => {
+        if (event.defaultPrevented || event.isComposing || event.shiftKey || event.altKey || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "z")
+            return;
+        const editing = event.composedPath().some(target => target instanceof HTMLElement && (target.matches("input, textarea, select, [role=textbox]") || target.isContentEditable));
+        if (editing)
+            return;
+        event.preventDefault();
+        undo();
+    };
+    const onOpen = (event) => { if (!event.detail.open)
+        dispose(); };
+    const offer = { toast, undo, dispose };
+    offers.set(doc, offer);
+    action.addEventListener("click", undo);
+    toast.addEventListener("open-changed", onOpen);
+    doc.addEventListener("keydown", onKey);
+    (options.container ?? doc.body).append(toast);
+    // Toast owns the one persistent announcement, avoiding duplicate live messages.
+    toast.show(`${message}. Undo available with ${shortcut}.`, { duration: options.duration ?? 8000 });
+    return offer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.20.0",
+  "version": "0.22.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",
@@ -28,6 +28,14 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
+    "./patterns/undo": {
+      "types": "./dist/patterns/undo/index.d.ts",
+      "import": "./dist/patterns/undo/index.js"
+    },
+    "./patterns/flow-builder": {
+      "types": "./dist/patterns/flow-builder/index.d.ts",
+      "import": "./dist/patterns/flow-builder/index.js"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -173,8 +181,9 @@
     "dist"
   ],
   "scripts": {
+    "bundles:check": "bun tools/adapters/bundle-check.ts",
     "build": "bun run build:core && bun run build:adapters",
-    "build:core": "tsc -p tsconfig.json",
+    "build:core": "tsc -p tsconfig.json && cp src/foundations/icons/glyphs/package.json dist/foundations/icons/glyphs/package.json",
     "build:adapters": "bun run adapters:version && bun run --cwd packages/react build && bun run --cwd packages/angular build && bun run --cwd packages/vue build && bun run --cwd packages/svelte build",
     "build:watch": "tsc -p tsconfig.json --watch --preserveWatchOutput",
     "prepublishOnly": "bun run build",