@unofficialbox/box-open-elements 0.19.0 → 0.21.0

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/run/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./types.js";
 export * from "./run-trace.js";
+export * from "./progress.js";
+export * from "./run-summary.js";

package/dist/patterns/run/index.js

@@ -2,3 +2,5 @@
 export * from "./types.js";
 // Machine execution trace surface
 export * from "./run-trace.js";
+export * from "./progress.js";
+export * from "./run-summary.js";

package/dist/patterns/run/progress.d.ts

@@ -0,0 +1,24 @@
+import { type StatusKind } from "../../foundations/status/index.js";
+import { type RunStep } from "./types.js";
+export interface AgentTodo {
+    id: string;
+    content: string;
+    status: "pending" | "in_progress" | "completed" | "skipped";
+}
+export interface RunTurn {
+    steps: RunStep[];
+    todos: AgentTodo[];
+    startedAt: number;
+    endedAt?: number;
+    incomplete?: boolean;
+}
+export declare function formatElapsed(ms: number): string;
+export declare function splitStepTitle(title: string): {
+    source?: string;
+    action: string;
+};
+export declare function progress(turn: RunTurn, failed?: boolean, now?: number, threshold?: number): {
+    kind: StatusKind;
+    label: string;
+    elapsed?: string;
+};

package/dist/patterns/run/progress.js

@@ -0,0 +1,32 @@
+import { toStatusKind } from "../../foundations/status/index.js";
+import { resolveRunSteps } from "./types.js";
+export function formatElapsed(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return "";
+    if (ms < 100)
+        return "<0.1 s";
+    if (ms < 10000)
+        return `${(ms / 1000).toFixed(1)} s`;
+    const seconds = Math.round(ms / 1000);
+    return seconds < 60 ? `${seconds} s` : `${Math.floor(seconds / 60)} min ${seconds % 60} s`;
+}
+export function splitStepTitle(title) {
+    const at = title.indexOf(" · ");
+    return at < 0 ? { action: title } : { source: title.slice(0, at), action: title.slice(at + 3) };
+}
+export function progress(turn, failed = false, now = Date.now(), threshold = 2000) {
+    const resolved = resolveRunSteps(turn.steps);
+    if (turn.endedAt === undefined) {
+        const step = [...resolved.steps].reverse().find(s => s.status === "running");
+        const label = turn.todos.find(t => t.status === "in_progress")?.content ?? (step ? splitStepTitle(step.step.title).action : "Thinking");
+        const elapsed = Math.max(0, now - turn.startedAt);
+        return { kind: "active", label: `${label}…`, ...(elapsed >= threshold ? { elapsed: `${Math.floor(elapsed / 1000)} s` } : {}) };
+    }
+    const took = formatElapsed(turn.endedAt - turn.startedAt);
+    if (failed || resolved.status === "failed")
+        return { kind: "failed", label: `Stopped after ${took}` };
+    if (turn.incomplete)
+        return { kind: "warning", label: `Cut short after ${took}` };
+    const warnings = resolved.steps.filter(s => toStatusKind(s.status) === "warning").length;
+    return { kind: warnings ? "warning" : "done", label: `Worked for ${took}${warnings ? ` · ${warnings} warning${warnings === 1 ? "" : "s"}` : ""}` };
+}

package/dist/patterns/run/run-summary.d.ts

@@ -0,0 +1,21 @@
+import { BaseElement } from "../../core/element.js";
+import { type RunTurn } from "./progress.js";
+export declare class RunSummary extends BaseElement {
+    static readonly tagName = "box-run-summary";
+    static get observedAttributes(): string[];
+    private value;
+    private timer;
+    private planSignature;
+    private traceSignature;
+    get turn(): RunTurn;
+    set turn(turn: RunTurn);
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncTimer;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private updateLabel;
+    protected update(): void;
+}

package/dist/patterns/run/run-summary.js

@@ -0,0 +1,82 @@
+import { BaseElement } from "../../core/element.js";
+import { boeDisclosureStyles, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { StatusIcon } from "../../components/feedback/status-icon.js";
+import { toStatusKind } from "../../foundations/status/index.js";
+import { RunTrace } from "./run-trace.js";
+import { progress } from "./progress.js";
+const DEFAULT_TAG_NAME = "box-run-summary";
+export class RunSummary extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["open", "failed", "elapsed-threshold"]; }
+    value = { steps: [], todos: [], startedAt: 0, endedAt: 0 };
+    timer;
+    planSignature = "";
+    traceSignature = "";
+    get turn() { return this.value; }
+    set turn(turn) { this.value = turn; if (this.isRendered)
+        this.update(); }
+    get open() { return this.hasAttribute("open"); }
+    set open(value) { this.toggleAttribute("open", value); }
+    connectedCallback() { super.connectedCallback(); this.syncTimer(); }
+    disconnectedCallback() { clearInterval(this.timer); this.timer = undefined; }
+    syncTimer() {
+        if (this.value.endedAt === undefined && this.isConnected && !this.timer)
+            this.timer = setInterval(() => this.updateLabel(), 1000);
+        if (this.value.endedAt !== undefined) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    renderTemplate() {
+        StatusIcon.register();
+        RunTrace.register();
+        this.shadowRoot.innerHTML = `<style>:host{display:block;font:inherit;color:var(--boe-token-text-text-secondary,#666)}:host([hidden]){display:none !important}
+    button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:.5rem 0;display:flex;gap:.5rem;align-items:center}
+    [part="clock"]{font-variant-numeric:tabular-nums} ul{padding:0;list-style:none} li{display:flex;gap:.5rem;margin:.5rem 0}
+    @keyframes boe-shimmer{50%{opacity:.6}} [data-running] [part="label"]{animation:boe-shimmer 1.4s ease-in-out infinite}
+    ${boeDisclosureStyles()}${boeEntranceKeyframes}${boeReducedMotionPolicy}</style>
+    <button part="trigger" aria-expanded="false" aria-controls="details"><box-status-icon></box-status-icon><span part="label" role="status"></span><span part="clock" aria-hidden="true"></span><span aria-hidden="true">›</span></button>
+    <div id="details" part="disclosure" class="boe-disclosure" inert><div><ul part="plan"></ul><box-run-trace></box-run-trace></div></div>`;
+    }
+    setupListeners() { this.shadowRoot.querySelector("button").addEventListener("click", () => { this.open = !this.open; }); }
+    updateLabel() {
+        const p = progress(this.value, this.hasAttribute("failed"), Date.now(), Number(this.getAttribute("elapsed-threshold") ?? 2000));
+        const label = this.shadowRoot.querySelector('[part="label"]');
+        if (label.textContent !== p.label)
+            label.textContent = p.label;
+        this.shadowRoot.querySelector('[part="clock"]').textContent = p.elapsed ?? "";
+        this.shadowRoot.querySelector("box-status-icon").kind = p.kind;
+        this.shadowRoot.querySelector("button").toggleAttribute("data-running", p.kind === "active");
+        this.shadowRoot.querySelector("button").setAttribute("aria-label", p.label);
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        this.updateLabel();
+        this.syncTimer();
+        this.shadowRoot.querySelector("button").setAttribute("aria-expanded", String(this.open));
+        const disclosure = this.shadowRoot.querySelector("#details");
+        disclosure.toggleAttribute("data-open", this.open);
+        disclosure.inert = !this.open;
+        disclosure.setAttribute("aria-hidden", String(!this.open));
+        const signature = JSON.stringify(this.value.todos);
+        if (signature !== this.planSignature) {
+            this.planSignature = signature;
+            const list = this.shadowRoot.querySelector("ul");
+            list.replaceChildren();
+            for (const todo of this.value.todos) {
+                const li = document.createElement("li");
+                const icon = new StatusIcon();
+                icon.kind = toStatusKind(todo.status);
+                li.append(icon, document.createTextNode(todo.content));
+                list.append(li);
+            }
+        }
+        const traceSignature = JSON.stringify(this.value.steps);
+        if (traceSignature !== this.traceSignature) {
+            this.traceSignature = traceSignature;
+            this.shadowRoot.querySelector("box-run-trace").steps = this.value.steps;
+        }
+    }
+}
+RunSummary.register();

package/dist/patterns/run/run-trace.d.ts

@@ -25,6 +25,7 @@ export declare class RunTrace extends BaseElement {
     private stepsRaw;
     private stepsCache;
     private readonly expandedIds;
+    private readonly previousStatuses;
     get heading(): string;
     set heading(value: string);
     get steps(): RunStep[];

package/dist/patterns/run/run-trace.js

@@ -2,6 +2,8 @@ import { formatRunDuration, formatRunSummary, isRunStepRecord, resolveRunSteps,
 import { ProgressBar } from "../../components/feedback/progress-bar.js";
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
+import { boeStatusGlyph, boeStatusStyles, toStatusKind } from "../../foundations/status/index.js";
+import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-run-trace";
 /** Escape a value for use inside a double-quoted attribute selector. */
 const cssAttrValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
@@ -285,6 +287,7 @@ export class RunTrace extends BaseElement {
     stepsRaw = null;
     stepsCache = [];
     expandedIds = new Set();
+    previousStatuses = new Map();
     get heading() {
         return this.getAttribute("heading") ?? "Run";
     }
@@ -332,7 +335,11 @@ export class RunTrace extends BaseElement {
         if (!this.shadowRoot) {
             return;
         }
-        this.shadowRoot.innerHTML = `<style>${elementStyles}</style><div part="host"></div>`;
+        this.shadowRoot.innerHTML = `<style>${elementStyles}
+    [part="step"] [part="marker"]{border:0;background:none;display:inline-flex}
+    ${boeEntranceKeyframes}${boeStatusStyles}
+    [data-settled] .boe-status[data-kind="done"], [data-settled] .boe-status[data-kind="done"] path { animation: none; }
+    ${boeReducedMotionPolicy}</style><div part="host"></div>`;
         this.hostEl = this.shadowRoot.querySelector('[part="host"]');
     }
     setupListeners() {
@@ -379,7 +386,7 @@ export class RunTrace extends BaseElement {
             <span part="child-label">${escapeHtml(child.label)}</span>
             ${clamped === null
                 ? "<span></span>"
-                : `<box-progress-bar label="${escapeHtml(child.label)} progress" value="${String(clamped)}"></box-progress-bar>`}
+                : `<box-progress-bar label="${escapeHtml(child.label)}" value="${String(clamped)}"></box-progress-bar>`}
             <span part="child-status">${RUN_STEP_STATUS_LABEL[status]}</span>
           </li>
         `;
@@ -395,6 +402,7 @@ export class RunTrace extends BaseElement {
         const rows = resolution.steps
             .map(entry => {
             const { step, status, position } = entry;
+            const settled = this.previousStatuses.get(step.id) === status;
             const duration = formatRunDuration(step.startedAt, step.finishedAt);
             // Slot-only detail counts: a host projecting logs for a step with no
             // JSON description still needs the toggle that reveals them.
@@ -412,7 +420,7 @@ export class RunTrace extends BaseElement {
         `;
             return `
           <li part="step" data-status="${status}" data-step-id="${escapeHtml(step.id)}" style="--run-tone:${STATUS_TONE[status]};">
-            <span part="marker" aria-hidden="true"></span>
+            <span part="marker" aria-hidden="true" ${settled ? "data-settled" : ""}>${boeStatusGlyph(toStatusKind(status))}</span>
             <div part="step-body">
               <div part="topline">
                 <span part="step-title">${escapeHtml(step.title)}</span>
@@ -430,6 +438,9 @@ export class RunTrace extends BaseElement {
         })
             .join("");
         const summary = formatRunSummary(resolution);
+        this.previousStatuses.clear();
+        for (const { step, status } of resolution.steps)
+            this.previousStatuses.set(step.id, status);
         this.hostEl.innerHTML = `
       <section part="panel" aria-label="${escapeHtml(this.heading)}">
         <div part="header">

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.19.0",
+  "version": "0.21.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"
@@ -104,6 +112,18 @@
       "types": "./dist/patterns/lineage/index.d.ts",
       "import": "./dist/patterns/lineage/index.js"
     },
+    "./patterns/agent-workspace": {
+      "types": "./dist/patterns/agent-workspace/index.d.ts",
+      "import": "./dist/patterns/agent-workspace/index.js"
+    },
+    "./patterns/run": {
+      "types": "./dist/patterns/run/index.d.ts",
+      "import": "./dist/patterns/run/index.js"
+    },
+    "./patterns/call-console": {
+      "types": "./dist/patterns/call-console/index.d.ts",
+      "import": "./dist/patterns/call-console/index.js"
+    },
     "./patterns/agent-chat": {
       "types": "./dist/patterns/agent-chat/index.d.ts",
       "import": "./dist/patterns/agent-chat/index.js"
@@ -161,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",