@unofficialbox/box-open-elements 0.21.0 → 0.23.0

package/dist/foundations/motion/scroll-pin.js

@@ -3,17 +3,27 @@ export class ScrollPinController {
     viewport;
     onChange;
     pinned = true;
+    behind = false;
     cleanup = [];
     observer;
     pointer = false;
     lastTop = 0;
+    lastHeight = 0;
+    content;
+    lastNotified;
     touchY = 0;
     constructor(viewport, onChange = () => { }) {
         this.viewport = viewport;
         this.onChange = onChange;
+        this.content = viewport;
     }
     connect(content = this.viewport) {
         this.disconnect();
+        this.content = content;
+        this.lastHeight = content.scrollHeight;
+        this.lastTop = this.viewport.scrollTop;
+        this.behind = false;
+        this.lastNotified = undefined;
         const on = (kind, fn) => {
             this.viewport.addEventListener(kind, fn);
             this.cleanup.push(() => this.viewport.removeEventListener(kind, fn));
@@ -25,16 +35,25 @@ export class ScrollPinController {
         on("touchstart", e => { this.touchY = e.touches[0]?.clientY ?? 0; });
         on("touchmove", e => { const y = e.touches[0]?.clientY ?? this.touchY; if (y > this.touchY)
             this.unpin(); this.touchY = y; });
-        on("pointerdown", () => { this.pointer = true; this.lastTop = this.viewport.scrollTop; });
+        on("pointerdown", e => {
+            const bounds = this.viewport.getBoundingClientRect();
+            const gutter = Math.max(0, bounds.width - this.viewport.clientWidth);
+            this.pointer = gutter > 0 && (e.clientX < bounds.left + gutter || e.clientX > bounds.right - gutter);
+            this.lastTop = this.viewport.scrollTop;
+        });
         const release = () => { this.pointer = false; };
         this.viewport.ownerDocument.addEventListener("pointerup", release);
         this.cleanup.push(() => this.viewport.ownerDocument.removeEventListener("pointerup", release));
+        this.viewport.ownerDocument.addEventListener("pointercancel", release);
+        this.cleanup.push(() => this.viewport.ownerDocument.removeEventListener("pointercancel", release));
         on("scroll", () => {
             if (this.pointer && this.viewport.scrollTop < this.lastTop)
                 this.unpin();
             this.lastTop = this.viewport.scrollTop;
-            if (this.atBottom())
+            if (this.atBottom()) {
                 this.pinned = true;
+                this.behind = false;
+            }
             this.notify();
         });
         if (typeof ResizeObserver !== "undefined") {
@@ -45,16 +64,33 @@ export class ScrollPinController {
         }
     }
     atBottom() { return this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop < 40; }
-    notify() { this.onChange(!this.pinned && !this.atBottom()); }
+    notify() {
+        const state = { pinned: this.pinned, behind: this.behind };
+        if (this.lastNotified?.pinned === state.pinned && this.lastNotified.behind === state.behind)
+            return;
+        this.lastNotified = state;
+        this.onChange(state);
+    }
     unpin() { this.pinned = false; this.notify(); }
-    contentChanged(newMessage = false) { if (newMessage)
-        this.pinned = true; if (this.pinned)
-        this.viewport.scrollTop = this.viewport.scrollHeight; this.notify(); }
+    contentChanged(newMessage = false) {
+        const height = this.content.scrollHeight;
+        if (newMessage) {
+            this.pinned = true;
+            this.behind = false;
+        }
+        else if (!this.pinned && height > this.lastHeight)
+            this.behind = true;
+        this.lastHeight = height;
+        if (this.pinned)
+            this.viewport.scrollTop = this.viewport.scrollHeight;
+        this.notify();
+    }
     jump() {
         this.pinned = true;
+        this.behind = false;
         const reduced = this.viewport.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
         this.viewport.scrollTo?.({ top: this.viewport.scrollHeight, behavior: reduced ? "instant" : "smooth" });
-        this.onChange(false);
+        this.notify();
     }
     disconnect() { this.cleanup.forEach(fn => fn()); this.cleanup = []; this.observer?.disconnect(); }
 }

package/dist/foundations/motion/tokens.d.ts

@@ -28,6 +28,7 @@ export declare const boeMotionEasing: {
     readonly standard: "var(--boe-profile-easing-standard, ease)";
     readonly enter: "var(--boe-profile-easing-enter, ease-out)";
     readonly exit: "var(--boe-profile-easing-exit, ease-in)";
+    readonly inOut: "var(--boe-profile-easing-in-out, ease-in-out)";
     readonly linear: "var(--boe-profile-easing-linear, linear)";
 };
 export type BoeMotionDuration = (typeof boeMotionDuration)[keyof typeof boeMotionDuration];

package/dist/foundations/motion/tokens.js

@@ -28,6 +28,7 @@ export const boeMotionEasing = {
     standard: "var(--boe-profile-easing-standard, ease)",
     enter: "var(--boe-profile-easing-enter, ease-out)",
     exit: "var(--boe-profile-easing-exit, ease-in)",
+    inOut: "var(--boe-profile-easing-in-out, ease-in-out)",
     linear: "var(--boe-profile-easing-linear, linear)",
 };
 /** CSS transition shorthand using the shared vocabulary. */

package/dist/foundations/profiles/built-ins.js

@@ -54,6 +54,9 @@ export const boxDefaultDesignProfile = {
         primaryFocus: "inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%)",
     },
     motion: {
+        arrival: "200ms",
+        panel: "320ms",
+        stagger: "50ms",
         fast: "120ms",
         interactive: "140ms",
         medium: "160ms",
@@ -63,6 +66,7 @@ export const boxDefaultDesignProfile = {
         easingStandard: "ease",
         easingEnter: "ease-out",
         easingExit: "ease-in",
+        easingInOut: "ease-in-out",
         easingLinear: "linear",
     },
 };
@@ -116,6 +120,9 @@ export const compactNeutralDesignProfile = {
         inputInset: "none",
     },
     motion: {
+        arrival: "160ms",
+        panel: "240ms",
+        stagger: "35ms",
         fast: "80ms",
         interactive: "100ms",
         medium: "140ms",
@@ -123,6 +130,7 @@ export const compactNeutralDesignProfile = {
         easingStandard: "cubic-bezier(0.2, 0, 0, 1)",
         easingEnter: "cubic-bezier(0.16, 1, 0.3, 1)",
         easingExit: "cubic-bezier(0.7, 0, 0.84, 0)",
+        easingInOut: "cubic-bezier(0.65, 0, 0.35, 1)",
     },
 };
 export const registerBuiltInDesignProfiles = () => {

package/dist/foundations/profiles/registry.d.ts

@@ -64,6 +64,7 @@ export declare const DESIGN_PROFILE_VARIABLES: {
         readonly easingStandard: "--boe-profile-easing-standard";
         readonly easingEnter: "--boe-profile-easing-enter";
         readonly easingExit: "--boe-profile-easing-exit";
+        readonly easingInOut: "--boe-profile-easing-in-out";
         readonly easingLinear: "--boe-profile-easing-linear";
     };
 };

package/dist/foundations/profiles/registry.js

@@ -63,6 +63,7 @@ export const DESIGN_PROFILE_VARIABLES = {
         easingStandard: "--boe-profile-easing-standard",
         easingEnter: "--boe-profile-easing-enter",
         easingExit: "--boe-profile-easing-exit",
+        easingInOut: "--boe-profile-easing-in-out",
         easingLinear: "--boe-profile-easing-linear",
     },
 };

package/dist/foundations/profiles/types.d.ts

@@ -62,6 +62,7 @@ export interface DesignProfileMotion {
     easingStandard?: string;
     easingEnter?: string;
     easingExit?: string;
+    easingInOut?: string;
     easingLinear?: string;
 }
 export interface DesignProfileDefinition {

package/dist/foundations/status/index.d.ts

@@ -1,6 +1,8 @@
 export type StatusKind = "pending" | "active" | "done" | "warning" | "failed" | "skipped" | "approved" | "rejected";
 export declare const toStatusKind: (status: string) => StatusKind;
-export declare const statusLabel: (kind: StatusKind) => string;
+export declare const statusLabel: (kind: StatusKind, labels?: Partial<Record<StatusKind, string>>) => string;
 /** Decorative markup. Pair with visible words or the StatusIcon component. */
 export declare const boeStatusGlyph: (kind: StatusKind) => string;
-export declare const boeStatusStyles = "\n.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }\n.boe-status[data-kind=\"active\"] { color: var(--boe-token-surface-surface-brand, #0061d5); animation: boe-status-spin .8s linear infinite; }\n.boe-status[data-kind=\"active\"] circle { opacity: .25; }\n.boe-status[data-kind=\"done\"] { color: var(--boe-token-text-status-text-success, #187657); }\n.boe-status[data-kind=\"warning\"] { color: var(--boe-token-text-status-text-warning, #946400); }\n.boe-status[data-kind=\"failed\"] { color: var(--boe-token-text-status-text-error, #c52a46); }\n.boe-status[data-kind=\"skipped\"] circle { stroke-dasharray: 2 2; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) circle { fill: currentColor; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }\n.boe-status[data-kind=\"done\"] { animation: boe-pop 200ms ease-out both; }\n.boe-status[data-kind=\"done\"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }\n";
+export declare const boeStatusStyles = "\n.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }\n.boe-status[data-kind=\"active\"] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n.boe-status-arc { transform-origin: 8px 8px; animation: boe-status-spin .8s linear infinite; }\n.boe-status[data-kind=\"active\"] circle { opacity: .25; }\n.boe-status[data-kind=\"done\"] { color: var(--boe-token-text-status-text-success, #187657); }\n.boe-status[data-kind=\"warning\"] { color: var(--boe-token-text-status-text-warning, #946400); }\n.boe-status[data-kind=\"failed\"] { color: var(--boe-token-text-status-text-error, #c52a46); }\n.boe-status[data-kind=\"skipped\"] circle { stroke-dasharray: 2 2; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) circle { fill: currentColor; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }\n.boe-status[data-kind=\"done\"] { animation: boe-pop 200ms ease-out both; }\n.boe-status[data-kind=\"done\"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }\n";
+/** Self-contained styles for light-DOM glyphs; safe to insert in a document style element. */
+export declare const boeStatusDocumentStyles = "\n@keyframes boe-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes boe-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }\n@keyframes boe-fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes boe-status-check { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }\n@keyframes boe-status-spin { to { transform: rotate(360deg); } }\n\n.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }\n.boe-status[data-kind=\"active\"] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n.boe-status-arc { transform-origin: 8px 8px; animation: boe-status-spin .8s linear infinite; }\n.boe-status[data-kind=\"active\"] circle { opacity: .25; }\n.boe-status[data-kind=\"done\"] { color: var(--boe-token-text-status-text-success, #187657); }\n.boe-status[data-kind=\"warning\"] { color: var(--boe-token-text-status-text-warning, #946400); }\n.boe-status[data-kind=\"failed\"] { color: var(--boe-token-text-status-text-error, #c52a46); }\n.boe-status[data-kind=\"skipped\"] circle { stroke-dasharray: 2 2; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) circle { fill: currentColor; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }\n.boe-status[data-kind=\"done\"] { animation: boe-pop 200ms ease-out both; }\n.boe-status[data-kind=\"done\"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;\n    animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }\n}\n";

package/dist/foundations/status/index.js

@@ -1,3 +1,4 @@
+import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../motion/behaviors.js";
 const mappings = {
     pending: "pending", info: "pending", active: "active", running: "active", in_progress: "active",
     done: "done", succeeded: "done", completed: "done", pass: "done", approved: "approved",
@@ -5,8 +6,8 @@ const mappings = {
     skipped: "skipped", rejected: "rejected",
 };
 export const toStatusKind = (status) => mappings[status] ?? "pending";
-export const statusLabel = (kind) => ({
-    pending: "Pending", active: "In progress", done: "Done", warning: "Done with a warning",
+export const statusLabel = (kind, labels = {}) => labels[kind] ?? ({
+    pending: "Not started", active: "In progress", done: "Done", warning: "Done with a warning",
     failed: "Failed", skipped: "Skipped",
     approved: "Approved", rejected: "Rejected",
 })[kind];
@@ -16,13 +17,14 @@ export const boeStatusGlyph = (kind) => {
     const path = state === "done" || state === "approved" ? '<path d="m4 8 3 3 5-6"/>'
         : state === "rejected" ? '<path d="M4 12 12 4"/>'
             : state === "failed" ? '<path d="m5 5 6 6m0-6-6 6"/>'
-                : state === "warning" ? '<path d="M5 8h6"/>'
-                    : state === "active" ? '<path d="M8 1a7 7 0 0 1 7 7"/>' : "";
-    return `<svg class="boe-status" data-kind="${state}" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="7"/>${path}</svg>`;
+                : state === "warning" ? '<path d="M8 4.75v3.75M8 11h.01"/>'
+                    : state === "active" ? '<path class="boe-status-arc" d="M8 1.75a6.25 6.25 0 0 1 6.25 6.25"/>' : "";
+    return `<svg class="boe-status" data-kind="${state}" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="6.25"/>${path}</svg>`;
 };
 export const boeStatusStyles = `
 .boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }
-.boe-status[data-kind="active"] { color: var(--boe-token-surface-surface-brand, #0061d5); animation: boe-status-spin .8s linear infinite; }
+.boe-status[data-kind="active"] { color: var(--boe-token-surface-surface-brand, #0061d5); }
+.boe-status-arc { transform-origin: 8px 8px; animation: boe-status-spin .8s linear infinite; }
 .boe-status[data-kind="active"] circle { opacity: .25; }
 .boe-status[data-kind="done"] { color: var(--boe-token-text-status-text-success, #187657); }
 .boe-status[data-kind="warning"] { color: var(--boe-token-text-status-text-warning, #946400); }
@@ -33,3 +35,5 @@ export const boeStatusStyles = `
 .boe-status[data-kind="done"] { animation: boe-pop 200ms ease-out both; }
 .boe-status[data-kind="done"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }
 `;
+/** Self-contained styles for light-DOM glyphs; safe to insert in a document style element. */
+export const boeStatusDocumentStyles = `${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}`;

package/dist/foundations/theming/controller.js

@@ -1,4 +1,6 @@
-import { applyDesignTokens, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, setActiveDesignSystem, } from "../tokens/index.js";
+import { applyDesignTokens, setActiveDesignSystem, } from "../tokens/registry.js";
+import { registerBoxDarkDesignSystem } from "../tokens/box-dark.js";
+import { registerBoxDefaultDesignSystem } from "../tokens/box-defaults.js";
 export const THEME_CHANGE_EVENT = "boe:theme-change";
 export const DEFAULT_THEME_STORAGE_KEY = "boe-theme";
 export const DARK_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";

package/dist/foundations/tokens/box-defaults.d.ts

@@ -1,4 +1,6 @@
 import type { RegisteredDesignSystemDefinition } from "./types.js";
+/** Optional preload for hosts that want named icons ready before first render. */
+export declare const preloadBoxDefaultIcons: () => Promise<void>;
 export declare const boxDefaultDesignSystem: RegisteredDesignSystemDefinition;
 export declare const registerBoxDefaultDesignSystem: (options?: {
     setActive?: boolean;

package/dist/foundations/tokens/box-defaults.js

@@ -1,7 +1,35 @@
-import { registerDesignSystem } from "./registry.js";
-import { boxIconography } from "../icons/box-iconography.js";
+import { DESIGN_SYSTEM_CHANGE_EVENT, getActiveDesignSystem, registerDesignSystem } from "./registry.js";
 const iconSvg = (viewBox, body) => `<svg viewBox="${viewBox}" width="1em" height="1em" role="img" aria-hidden="true" focusable="false">${body}</svg>`;
 const illustrationSvg = (viewBox, body) => `<svg viewBox="${viewBox}" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" role="presentation" aria-hidden="true" focusable="false">${body}</svg>`;
+let loadDefaultIcons;
+/** Keep theme setup and token-only components independent of the full icon registry. */
+const lazyBoxIcons = (defaults) => {
+    const icons = { ...defaults };
+    let loading = null;
+    const load = () => {
+        loading ??= import("../icons/box-iconography.js")
+            .then(({ boxIconography }) => {
+            Object.assign(icons, boxIconography, defaults);
+            if (typeof globalThis.dispatchEvent === "function" && typeof CustomEvent !== "undefined") {
+                globalThis.dispatchEvent(new CustomEvent(DESIGN_SYSTEM_CHANGE_EVENT, {
+                    detail: { activeDesignSystemName: getActiveDesignSystem()?.name ?? null },
+                }));
+            }
+        })
+            .catch(error => { loading = null; throw error; });
+        return loading;
+    };
+    loadDefaultIcons = load;
+    return new Proxy(icons, {
+        get(target, name, receiver) {
+            if (typeof name === "string" && !Object.hasOwn(target, name))
+                void load().catch(() => { });
+            return Reflect.get(target, name, receiver);
+        },
+    });
+};
+/** Optional preload for hosts that want named icons ready before first render. */
+export const preloadBoxDefaultIcons = () => loadDefaultIcons?.() ?? Promise.resolve();
 export const boxDefaultDesignSystem = {
     name: "box-default",
     // Values track Box's modernized "Blueprint" design system
@@ -40,13 +68,12 @@ export const boxDefaultDesignSystem = {
         StrokeStroke: "#e8e8e8",
         StrokeStrokeHover: "#bcbcbc",
     },
-    icons: {
-        ...boxIconography,
+    icons: lazyBoxIcons({
         info: iconSvg("0 0 16 16", '<path fill="currentColor" d="M8.5 6.5H6.25a.75.75 0 0 0 0 1.5H7v4.5h-.75a.75.75 0 1 0 0 1.5H10a.75.75 0 1 0 0-1.5h-.75V7.41s.006-.217-.02-.327A.753.753 0 0 0 8.5 6.5ZM7.75 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" />'),
         alert: iconSvg("0 0 16 16", '<path fill="currentColor" fill-rule="evenodd" d="M8 1.5a1.4 1.4 0 0 1 1.227.725l5.138 9.317A1.4 1.4 0 0 1 13.138 13.6H2.862a1.4 1.4 0 0 1-1.227-2.058l5.138-9.317A1.4 1.4 0 0 1 8 1.5Zm0 3.1a.75.75 0 0 0-.75.75v3.4a.75.75 0 0 0 1.5 0v-3.4A.75.75 0 0 0 8 4.6Zm0 6.4a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Z" clip-rule="evenodd" />'),
         "folder-shared": iconSvg("0 0 32 32", '<path fill="#2687FC" fill-rule="evenodd" d="M6 6h6c2 0 1.5 2 4 2h10a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Z" clip-rule="evenodd" /><path fill="#91C2FD" fill-rule="evenodd" d="M26 11a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V14a3 3 0 0 1 3-3h20Zm-6.999 8c-1.117 0-1.933.543-2.439 1.401.198.464.337.951.414 1.45.066.42.003.809-.165 1.138a1.7 1.7 0 0 0 .193.011h4.002l.14-.006c.63-.054.924-.476.844-.988a5.024 5.024 0 0 0-.258-.997c-.453-1.2-1.367-2.009-2.73-2.009h-.001ZM13 19c-1.364 0-2.278.81-2.731 2.01-.076.202-.137.41-.185.62-.028.123-.053.25-.073.378-.084.54.258.992.992.992h4.002l.14-.006c.63-.054.924-.476.843-.988a5.023 5.023 0 0 0-.257-.997C15.277 19.81 14.363 19 13 19Zm0-4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.001 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" clip-rule="evenodd" />'),
         "file-pdf": iconSvg("0 0 32 32", '<path fill="#FFF" d="M6 4a3 3 0 0 1 3-3h9.757a2 2 0 0 1 1.415.586l5.242 5.242A2 2 0 0 1 26 8.243V25a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V4Z" /><path fill="#D0021B" d="M18 1v6a2 2 0 0 0 2 2h6v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h9Z" opacity="0.12" /><path fill="#D0021B" d="M19 2.414 24.586 8H20a1 1 0 0 1-1-1V2.414Z" /><path fill="#D0021B" d="M9.8 23v-7h2.485c1.526 0 2.415.865 2.415 2.24 0 1.374-.889 2.248-2.415 2.248h-1.03V23H9.8Zm1.455-3.614h.83c.731 0 1.148-.387 1.148-1.146 0-.758-.417-1.137-1.148-1.137h-.83v2.283ZM15.975 23v-7h2.19c2.105 0 3.313 1.273 3.313 3.492 0 2.221-1.208 3.508-3.313 3.508h-2.19Zm1.455-1.22h.597c1.267 0 1.951-.728 1.951-2.288 0-1.557-.684-2.272-1.95-2.272h-.598v4.56ZM22.786 23v-7h4.475v1.22H24.24v1.675h2.796v1.188H24.24V23h-1.454Z" />'),
-    },
+    }),
     illustrations: {
         "empty-state-folder": illustrationSvg("0 0 140 140", '<g fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" clip-rule="evenodd" opacity="0.1"><path d="M47.11 36H35.383c-1.261 0-2.294.97-2.378 2.198L33 38.36v48.604c0 2.162 1.716 3.926 3.872 4.031l.546.005h.257l.19-.036c1.743-.375 3.062-1.86 3.152-3.663l.005-.197V73.972a.98.98 0 0 1 .017-.18.87.87 0 0 1-.032-.155L41 73.52V56.717c0-4.209 3.7-7.59 8.268-7.713l.26-.004L97 48.999v-2.26c0-3.08-2.463-5.592-5.546-5.707l-.221-.004H54.118a4.402 4.402 0 0 1-3.51-1.738l-.14-.197-1.375-2.042a2.386 2.386 0 0 0-1.8-1.044L47.11 36Z" /><path d="M51 96a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm47-66c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10Z" /></g><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" d="M95 90c0-7.18-5.82-13-13-13s-13 5.82-13 13 5.82 13 13 13 13-5.82 13-13Zm-12.268-6.723a1.03 1.03 0 0 0-1.269-.107l-.105.079-.061.057-.057.061-4.99 5.898-.074.098a1.06 1.06 0 0 0 .187 1.384l.098.076c.17.115.371.177.578.177H79l.001 4.921c0 .596.497 1.08 1.11 1.08h3.779c.614 0 1.11-.484 1.11-1.081V91h1.96l.115-.006c.52-.057.925-.503.925-1.045 0-.249-.087-.489-.246-.679l-4.932-5.898-.09-.095Z" clip-rule="evenodd" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" d="M44.156 39c.466 0 .844.448.844 1s-.378 1-.844 1h-6.312c-.466 0-.844-.448-.844-1s.378-1 .844-1h6.312Zm41.952 21c.493 0 .892.448.892 1s-.4 1-.892 1H61.892c-.493 0-.892-.448-.892-1s.4-1 .892-1h24.216Z" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" d="M99 91a6 6 0 0 0 5.996-5.775L105 85l.005-28.283c0-2.983-2.745-5.672-6.005-5.708l-49.473-.019c-3.55 0-6.403 2.476-6.528 5.518l-.004.209c0 10.13.005 20.255.005 30.387a5.817 5.817 0 0 1-1.497 3.897L65 91a1 1 0 0 1 0 2H37c-3.238 0-5.878-2.521-5.996-5.675L31 87.104V38.347c0-2.33 1.85-4.232 4.174-4.342l.212-.005h11.727a4.4 4.4 0 0 1 3.509 1.739l.14.197 1.376 2.043c.407.607 1.073.99 1.799 1.045l.183.007h37.11c4.208 0 7.636 3.316 7.766 7.456l.004.244v2.284c4.358.24 7.863 3.449 7.996 7.464l.004.238V85a8 8 0 0 1-7.75 7.996L99 93a1 1 0 0 1 0-2ZM35.383 36H47.11l.183.007a2.386 2.386 0 0 1 1.8 1.044l1.375 2.042.14.197a4.402 4.402 0 0 0 3.51 1.738h37.115l.221.004c3.083.115 5.546 2.627 5.546 5.707v2.26L49.528 49l-.26.004C44.7 49.127 41 52.508 41 56.717c0 10.129.022 20.258.022 30.387l-.005.197c-.09 1.803-1.409 3.288-3.152 3.663l-.19.036h-.257l-.546-.005C34.716 90.89 33 89.126 33 86.964V38.36l.005-.162A2.374 2.374 0 0 1 35.383 36Z" clip-rule="evenodd" />'),
         // Fanned file cards behind a cloud carrying an upload arrow — the empty

package/dist/foundations/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./registry.js";
-export { boxDefaultDesignSystem, registerBoxDefaultDesignSystem } from "./box-defaults.js";
+export { boxDefaultDesignSystem, preloadBoxDefaultIcons, registerBoxDefaultDesignSystem } from "./box-defaults.js";
 export { boxDarkDesignSystem, registerBoxDarkDesignSystem } from "./box-dark.js";
 export { boeBrandInteractiveStyles, boeFocusRingShadow, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "./interaction.js";
 export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenInput, DesignTokenMap, RegisteredDesignSystemDefinition, SemanticDesignTokenMap, } from "./types.js";

package/dist/foundations/tokens/index.js

@@ -1,4 +1,4 @@
 export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./registry.js";
-export { boxDefaultDesignSystem, registerBoxDefaultDesignSystem } from "./box-defaults.js";
+export { boxDefaultDesignSystem, preloadBoxDefaultIcons, registerBoxDefaultDesignSystem } from "./box-defaults.js";
 export { boxDarkDesignSystem, registerBoxDarkDesignSystem } from "./box-dark.js";
 export { boeBrandInteractiveStyles, boeFocusRingShadow, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "./interaction.js";

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Controller, TypedEventEmitter } from "./core/index.js";
 export type { EventMap, Unsubscribe } from "./core/index.js";
 export type { JsonSchema } from "./core/json-schema.js";
-export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
+export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, preloadBoxDefaultIcons, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
 export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenInput, DesignTokenMap, RegisteredDesignSystemDefinition, SemanticDesignTokenMap, } from "./foundations/tokens/index.js";
 export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./foundations/theming/index.js";
 export type { ResolvedTheme, ThemeChangeDetail, ThemeController, ThemeControllerOptions, ThemeInitializationScriptOptions, ThemePreference, } from "./foundations/theming/index.js";

package/dist/index.js

@@ -1,7 +1,7 @@
 // Core runtime
 export { Controller, TypedEventEmitter } from "./core/index.js";
 // Foundations
-export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
+export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, preloadBoxDefaultIcons, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
 export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./foundations/theming/index.js";
 export { DESIGN_PROFILE_CHANGE_EVENT, DESIGN_PROFILE_VARIABLES, DEFAULT_DESIGN_PROFILE_STORAGE_KEY, applyDesignProfile, boxDefaultDesignProfile, compactNeutralDesignProfile, createDesignProfileController, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerBuiltInDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./foundations/profiles/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";

package/dist/patterns/agent-chat/agent-chat.js

@@ -220,7 +220,7 @@ const elementStyles = `
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
 
-        [part="proposal-params"] {
+        [part="proposal-params"], [part="proposal-details"] {
           margin: 0;
           display: grid;
           grid-template-columns: auto 1fr;
@@ -236,6 +236,7 @@ const elementStyles = `
           margin: 0;
           color: var(--boe-token-text-text, #1f1e1b);
         }
+        .boe-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 
         [part="proposal-actions"] {
           display: flex;
@@ -373,7 +374,7 @@ const elementStyles = `
 export class AgentChat extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["agent-name", "heading", "placeholder", "token", "hidden", "hide-citations"];
+        return ["agent-name", "heading", "placeholder", "token", "hidden", "hide-citations", "hide-modify"];
     }
     controller = null;
     scope = `boe-chat-${++chatInstance}`;
@@ -608,6 +609,8 @@ export class AgentChat extends BaseElement {
                 const failed = proposal.outcome === "failed";
                 return `<div part="proposal" aria-live="off" tabindex="-1" id="${this.proposalAnchor(message.id, proposal.id)}" data-proposal-id="${escapeHtml(proposal.id)}" data-decision="${escapeHtml(proposal.decision)}" ${failed ? 'role="alert"' : ""}>
           <span part="decision">${boeStatusGlyph(failed ? "failed" : proposal.decision === "approved" ? "done" : "skipped")}${proposal.decision === "approved" ? failed ? "Approved · didn't complete" : "Approved" : "Rejected"} · <span part="proposal-title">${escapeHtml(proposal.title)}</span></span>
+          ${proposal.summary ? `<p part="proposal-summary">${escapeHtml(proposal.summary)}</p>` : ""}
+          ${proposal.details?.length ? `<dl part="proposal-details">${proposal.details.map(detail => `<dt part="param-label">${escapeHtml(detail.label)}</dt><dd part="param-value">${detail.href && isSafeHref(detail.href) ? `<a href="${escapeHtml(detail.href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(detail.value)} <span aria-hidden="true">↗</span><span class="boe-sr-only"> (opens in a new tab)</span></a>` : escapeHtml(detail.value)}</dd>`).join("")}</dl>` : ""}
           ${proposal.note ? `<p part="proposal-note">${escapeHtml(proposal.note)}</p>` : ""}
           ${failed ? `<button part="retry" data-message-id="${escapeHtml(message.id)}">Try again</button>` : ""}</div>`;
             }
@@ -622,7 +625,7 @@ export class AgentChat extends BaseElement {
               <div part="proposal-actions">
                 <button type="button" part="proposal-action" data-action="approve" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""} aria-busy="${proposal.resolving === "approved"}">${proposal.resolving === "approved" ? boeStatusGlyph("active") : ""}Approve</button>
                 <button type="button" part="proposal-action" data-action="reject" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""} aria-busy="${proposal.resolving === "rejected"}">${proposal.resolving === "rejected" ? boeStatusGlyph("active") : ""}Reject</button>
-                <button type="button" part="proposal-action" data-action="modify" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""}>Modify</button>
+                ${this.hasAttribute("hide-modify") ? "" : `<button type="button" part="proposal-action" data-action="modify" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""}>Modify</button>`}
               </div>
             `
                 : "";
@@ -634,6 +637,7 @@ export class AgentChat extends BaseElement {
             ${params ? `<dl part="proposal-params">${params}</dl>` : ""}
             ${proposal.decision ? `<span part="decision">${proposal.decision === "approved" ? "Approved" : "Rejected"}</span>` : ""}
             ${proposal.note ? `<p part="proposal-note">${escapeHtml(proposal.note)}</p>` : ""}
+            ${proposal.resolveError ? `<p part="error" role="alert">${escapeHtml(proposal.resolveError)}</p>` : ""}
             ${actions}
             <p part="proposal-note">To change it, reply with the new values.</p>
           </div>
@@ -768,7 +772,7 @@ export class AgentChat extends BaseElement {
     }
     setupListeners() {
         this.jumpEl = this.shadowRoot.querySelector('[part="jump"]');
-        this.scrollPin = new ScrollPinController(this.threadEl, show => { this.jumpEl.hidden = !show; });
+        this.scrollPin = new ScrollPinController(this.threadEl, ({ behind }) => { this.jumpEl.hidden = !behind; });
         this.jumpEl.addEventListener("click", () => this.scrollPin?.jump());
         this.inputEl.addEventListener("compositionstart", () => { this.composing = true; });
         this.inputEl.addEventListener("compositionend", () => { this.composing = false; });
@@ -817,12 +821,7 @@ export class AgentChat extends BaseElement {
                     void this.controller?.resolveAction(proposalId, "rejected", undefined, messageId);
                 }
                 else if (action === "modify") {
-                    // Modifying needs the host's own editor, so this surfaces intent.
-                    this.dispatchEvent(new CustomEvent("proposal-modify-requested", {
-                        bubbles: true,
-                        composed: true,
-                        detail: { proposalId },
-                    }));
+                    this.dispatchEvent(new CustomEvent("proposal-modify-requested", { bubbles: true, composed: true, detail: { proposalId, messageId } }));
                 }
                 return;
             }

package/dist/patterns/agent-chat/controller.js

@@ -97,6 +97,7 @@ export class AgentChatController extends Controller {
         };
         const sequences = new Set();
         let highSequence = 0;
+        let invalidSequence = false;
         let done;
         const missing = () => Array.from({ length: highSequence }, (_, i) => i + 1).filter(i => !sequences.has(i));
         const upsert = (items, item) => item.id && items.some(i => i.id === item.id)
@@ -107,8 +108,10 @@ export class AgentChatController extends Controller {
                 return;
             }
             if (event.seq !== undefined) {
-                if (!Number.isSafeInteger(event.seq) || event.seq < 1 || event.seq > 100000)
-                    throw new Error("Invalid stream sequence");
+                if (!Number.isSafeInteger(event.seq) || event.seq < 1 || event.seq > 100000) {
+                    invalidSequence = true;
+                    return;
+                }
                 if (sequences.has(event.seq))
                     return;
                 sequences.add(event.seq);
@@ -151,7 +154,7 @@ export class AgentChatController extends Controller {
             finished = true;
             const gaps = missing();
             patchAgentMessage({ ...patch, endedAt: Date.now(), completeness: {
-                    status: patch.status === "error" ? "error" : !done || gaps.length ? "incomplete" : done,
+                    status: patch.status === "error" && done === "error" ? "error" : !done || gaps.length || invalidSequence ? "incomplete" : done,
                     missing: gaps,
                 } });
             // A superseded send must not clear the newer send's streaming flag.
@@ -240,9 +243,10 @@ export class AgentChatController extends Controller {
         }
         catch (error) {
             const message = error instanceof Error ? error.message : `Agent action ${decision} failed`;
+            patch({ resolveError: message });
             this.setState({ ...this.state, error: message });
             this.emit("sendFailed", { message });
-            return null;
+            throw error;
         }
         finally {
             this.resolving.delete(key);

package/dist/patterns/agent-chat/ndjson.d.ts

@@ -2,4 +2,5 @@
 export declare function readNdjson<T = unknown>(stream: ReadableStream<Uint8Array>, options?: {
     maxLineLength?: number;
     signal?: AbortSignal;
+    onInvalidLine?: (line: string, error: Error) => "skip" | "throw";
 }): AsyncGenerator<T>;

package/dist/patterns/agent-chat/ndjson.js

@@ -6,6 +6,16 @@ export async function* readNdjson(stream, options = {}) {
     let buffer = "";
     let finished = false;
     const abort = () => { void reader.cancel(options.signal?.reason); };
+    const parse = (line) => {
+        try {
+            return JSON.parse(line);
+        }
+        catch (error) {
+            if (options.onInvalidLine?.(line, error) !== "skip")
+                throw error;
+            return undefined;
+        }
+    };
     options.signal?.addEventListener("abort", abort, { once: true });
     try {
         while (true) {
@@ -19,15 +29,21 @@ export async function* readNdjson(stream, options = {}) {
                 buffer = buffer.slice(newline + 1);
                 if (line.length > limit)
                     throw new Error("NDJSON line exceeds limit");
-                if (line)
-                    yield JSON.parse(line);
+                if (line) {
+                    const record = parse(line);
+                    if (record !== undefined)
+                        yield record;
+                }
             }
             if (buffer.length > limit)
                 throw new Error("NDJSON line exceeds limit");
             if (done) {
                 finished = true;
-                if (buffer.trim())
-                    yield JSON.parse(buffer);
+                if (buffer.trim()) {
+                    const record = parse(buffer);
+                    if (record !== undefined)
+                        yield record;
+                }
                 break;
             }
         }

package/dist/patterns/agent-chat/types.d.ts

@@ -39,6 +39,13 @@ export interface AgentActionProposal {
     outcome?: "done" | "failed";
     resolving?: AgentActionDecision;
     note?: string;
+    details?: Array<{
+        label: string;
+        value: string;
+        href?: string;
+    }>;
+    /** A failed approval request is kept with its proposal so the error appears at the decision point. */
+    resolveError?: string;
 }
 export interface AgentChatMessage {
     id: string;

package/dist/patterns/agent-workspace/agent-workspace.d.ts

@@ -11,7 +11,18 @@ export declare class AgentWorkspace extends BaseElement {
     private detailsOpen;
     private initialized;
     private renderedActive;
+    private chatIds;
+    private lastPanes;
     private sessions;
+    /** Host-controlled pane state; mobile drawers remain mutually exclusive. */
+    get panes(): {
+        chats: boolean;
+        details: boolean;
+    };
+    set panes(value: {
+        chats?: boolean;
+        details?: boolean;
+    });
     get workspaceController(): AgentWorkspaceController | null;
     set workspaceController(value: AgentWorkspaceController | null);
     connectedCallback(): void;
@@ -19,7 +30,8 @@ export declare class AgentWorkspace extends BaseElement {
     private listen;
     private resize;
     private storageKey;
-    private toggle;
+    toggle(pane: "chats" | "details"): void;
+    open(pane: "chats" | "details", open: boolean): void;
     private closeDrawers;
     private syncPanes;
     protected renderTemplate(): void;