@unofficialbox/box-open-elements 0.4.0 → 0.6.0

package/dist/patterns/notifications/types.js

@@ -0,0 +1,108 @@
+/**
+ * Notification model and the pure grouping/counting engine behind
+ * `box-notification-inbox`. DOM-free, so a host can drive its own inbox —
+ * or a bell in a different shell — from the same functions.
+ */
+const TONES = new Set(["neutral", "brand", "success", "warning", "error"]);
+export const resolveNotificationTone = (value) => value && TONES.has(value) ? value : "neutral";
+export const resolveNotificationFilter = (value) => value === "unread" ? "unread" : "all";
+/** Unread count — what the bell shows, and the only number that must be exact. */
+export const countUnreadNotifications = (items) => items.reduce((total, item) => total + (item.read ? 0 : 1), 0);
+const instant = (item) => {
+    if (!item.timestamp) {
+        return null;
+    }
+    const value = new Date(item.timestamp).getTime();
+    return Number.isNaN(value) ? null : value;
+};
+/** Newest first; undated items sink without reordering among themselves. */
+const byNewestFirst = (left, right) => {
+    const a = instant(left);
+    const b = instant(right);
+    if (a === b) {
+        return 0;
+    }
+    if (a === null) {
+        return 1;
+    }
+    if (b === null) {
+        return -1;
+    }
+    return b - a;
+};
+/**
+ * Turn a `type` slug into a section heading: `sla-breach` → `Sla breach`. A
+ * host wanting different wording supplies its own labels through `typeLabels`.
+ */
+const humanize = (value) => {
+    const spaced = value.replaceAll(/[-_]+/g, " ").trim();
+    return spaced ? spaced.charAt(0).toUpperCase() + spaced.slice(1) : value;
+};
+/**
+ * Group notifications into sections by type.
+ *
+ * Sections lead with the most unread, then the most items, then the label —
+ * so what needs attention rises, and the order never depends on input order.
+ * Items inside a section run newest first, with unread ahead of read at the
+ * same instant: this is a triage surface, not a feed.
+ */
+export const groupNotifications = (items, options = {}) => {
+    const filter = options.filter ?? "all";
+    const labels = options.typeLabels ?? {};
+    const visible = filter === "unread" ? items.filter(item => !item.read) : items;
+    const groups = new Map();
+    for (const item of visible) {
+        let group = groups.get(item.type);
+        if (!group) {
+            group = { key: item.type, label: labels[item.type] ?? humanize(item.type), items: [], unread: 0 };
+            groups.set(item.type, group);
+        }
+        group.items.push(item);
+        if (!item.read) {
+            group.unread += 1;
+        }
+    }
+    for (const group of groups.values()) {
+        group.items.sort((left, right) => {
+            if (Boolean(left.read) !== Boolean(right.read)) {
+                return left.read ? 1 : -1;
+            }
+            return byNewestFirst(left, right);
+        });
+    }
+    return [...groups.values()].sort((left, right) => {
+        if (left.unread !== right.unread) {
+            return right.unread - left.unread;
+        }
+        if (left.items.length !== right.items.length) {
+            return right.items.length - left.items.length;
+        }
+        return left.label < right.label ? -1 : left.label > right.label ? 1 : 0;
+    });
+};
+/** Attribute payloads are author input — validate every record. */
+export const isNotificationItemRecord = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const item = value;
+    if (typeof item.id !== "string" || item.id.length === 0) {
+        return false;
+    }
+    if (typeof item.title !== "string" || item.title.length === 0) {
+        return false;
+    }
+    if (typeof item.type !== "string" || item.type.length === 0) {
+        return false;
+    }
+    if (item.entityRef !== undefined) {
+        const entity = item.entityRef;
+        if (typeof entity !== "object" ||
+            entity === null ||
+            typeof entity.id !== "string" ||
+            typeof entity.label !== "string") {
+            return false;
+        }
+    }
+    return true;
+};

package/dist/patterns/preview/annotation-inspector.d.ts

@@ -1,15 +1,17 @@
 import { BaseElement } from "../../core/index.js";
-type AnnotationInspectorAction = {
+export type AnnotationInspectorAction = {
     id: string;
     label: string;
     tone?: string;
 };
-type AnnotationInspectorReply = {
+export type AnnotationInspectorReply = {
     author: string;
     body: string;
+    createdAt?: string;
+    id?: string;
     initials?: string;
 };
-type AnnotationInspectorAnnotation = {
+export type AnnotationInspectorAnnotation = {
     author: string;
     body: string;
     color?: string;
@@ -22,23 +24,40 @@ type AnnotationInspectorAnnotation = {
     subject?: string;
     toolLabel?: string;
 };
-export declare class BoxAnnotationInspectorElement extends BaseElement {
+export type AnnotationInspectorReplySubmittedDetail = {
+    annotationId: string | null;
+    body: string;
+};
+export declare class AnnotationInspector extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
+    private titleEl;
+    private messageEl;
+    private detailHostEl;
+    private actionsEl;
+    private composerEl;
+    private composerInputEl;
+    private annotationSignature;
+    private actionsSignature;
     get actions(): AnnotationInspectorAction[];
     set actions(value: AnnotationInspectorAction[]);
     get annotation(): AnnotationInspectorAnnotation | null;
     set annotation(value: AnnotationInspectorAnnotation | null);
+    get composable(): boolean;
+    set composable(value: boolean);
     get message(): string;
     set message(value: string);
     get heading(): string;
     set heading(value: string);
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private parseJsonAttribute;
     private emitAction;
     private emitReplySelected;
+    private submitComposer;
+    private actionsKey;
+    private rebuildDetail;
+    private rebuildActions;
+    private patchActionLabels;
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxAnnotationInspectorElement: (tagName?: string) => typeof BoxAnnotationInspectorElement;
-export {};

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

@@ -8,7 +8,14 @@ const escapeHtml = (value) => value
     .replaceAll(">", ">")
     .replaceAll('"', """)
     .replaceAll("'", "'");
+const isSafeColorValue = (value) => /^#[0-9a-fA-F]{3,8}$/.test(value) || /^[a-zA-Z]+$/.test(value);
 const elementStyles = `
+        /* Author display rules on parts would otherwise defeat the UA's
+           [hidden] rule — state toggling relies on the hidden attribute. */
+        [hidden] {
+          display: none !important;
+        }
+
         :host {
           display: block;
           color: inherit;
@@ -42,6 +49,11 @@ const elementStyles = `
           line-height: 1.5;
         }
 
+        [part="detail-host"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
         [part="annotation"] {
           display: grid;
           gap: ${boePanel.gap};
@@ -160,6 +172,11 @@ const elementStyles = `
           line-height: 1.45;
         }
 
+        [part="reply-time"] {
+          color: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 86%, transparent);
+          font-size: 0.78rem;
+        }
+
         [part="actions"] {
           display: flex;
           flex-wrap: wrap;
@@ -185,9 +202,48 @@ const elementStyles = `
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
 
+        [part="composer"] {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        [part="composer-label"] {
+          font-size: 0.74rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="composer-input"] {
+          min-height: 4rem;
+          padding: 0.55rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          line-height: 1.5;
+          resize: vertical;
+        }
+
+        [part="composer-submit"] {
+          appearance: none;
+          justify-self: start;
+          min-height: 2rem;
+          padding: 0.4rem 0.7rem;
+          border: 1px solid transparent;
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          font: inherit;
+          cursor: pointer;
+        }
+
         ${boeNeutralInteractiveStyles('[part="reply"]')}
         ${boeNeutralInteractiveStyles('[part="action"]')}
         ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+        ${boeBrandInteractiveStyles('[part="composer-submit"]')}
 
         [part="action"][data-tone="primary"] {
           border-color: transparent;
@@ -195,10 +251,19 @@ const elementStyles = `
           color: #fff;
         }
       `;
-export class BoxAnnotationInspectorElement extends BaseElement {
+export class AnnotationInspector extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["actions", "annotation", "heading", "message"];
+        return ["actions", "annotation", "composable", "heading", "message"];
     }
+    titleEl;
+    messageEl;
+    detailHostEl;
+    actionsEl;
+    composerEl;
+    composerInputEl;
+    annotationSignature = null;
+    actionsSignature = "";
     get actions() {
         return this.parseJsonAttribute("actions", []);
     }
@@ -215,6 +280,12 @@ export class BoxAnnotationInspectorElement extends BaseElement {
         }
         this.setAttribute("annotation", JSON.stringify(value));
     }
+    get composable() {
+        return this.hasAttribute("composable");
+    }
+    set composable(value) {
+        this.toggleAttribute("composable", value);
+    }
     get message() {
         return this.getAttribute("message") ?? "";
     }
@@ -231,12 +302,6 @@ export class BoxAnnotationInspectorElement extends BaseElement {
     set heading(value) {
         this.setAttribute("heading", value);
     }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-    }
     parseJsonAttribute(name, fallback) {
         const raw = this.getAttribute(name);
         if (!raw) {
@@ -263,118 +328,192 @@ export class BoxAnnotationInspectorElement extends BaseElement {
             detail: { ...reply, index, annotationId: this.annotation?.id ?? null },
         }));
     }
-    renderTemplate() {
-        if (!this.shadowRoot) {
+    submitComposer() {
+        const body = this.composerInputEl.value.trim();
+        if (!this.composable || !body) {
             return;
         }
-        this.shadowRoot.innerHTML = `
-      <style>${elementStyles}</style>
-      <div part="content-host"></div>
-    `;
+        this.dispatchEvent(new CustomEvent("reply-submitted", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                annotationId: this.annotation?.id ?? null,
+                body,
+            },
+        }));
+        this.composerInputEl.value = "";
     }
-    update() {
-        if (!this.shadowRoot) {
+    actionsKey() {
+        return JSON.stringify(this.actions.map(action => action.id));
+    }
+    rebuildDetail() {
+        const annotation = this.annotation;
+        if (!annotation) {
+            this.detailHostEl.innerHTML = `<div part="empty">No annotation selected.</div>`;
             return;
         }
-        const annotation = this.annotation;
-        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
-        const actionsMarkup = this.actions.length
-            ? `
-          <div part="actions">
-            ${this.actions
-                .map(action => `
-                  <button
-                    type="button"
-                    part="action"
-                    data-action-id="${escapeHtml(action.id)}"
-                    data-tone="${escapeHtml(action.tone ?? "neutral")}"
-                  >
-                    ${escapeHtml(action.label)}
-                  </button>
-                `)
-                .join("")}
-          </div>
-        `
+        const colorChipMarkup = annotation.color && isSafeColorValue(annotation.color)
+            ? `<span part="color-chip" style="--annotation-color:${escapeHtml(annotation.color)};"></span>`
             : "";
-        const detailMarkup = annotation
+        this.detailHostEl.innerHTML = `
+      <section part="annotation">
+        <div part="annotation-header">
+          <div part="avatar">${escapeHtml(annotation.initials ?? annotation.author.slice(0, 2).toUpperCase())}</div>
+          <div part="author-copy">
+            <div part="author">${escapeHtml(annotation.author)}</div>
+            <div part="meta">
+              ${annotation.toolLabel ? `<span part="tool">${escapeHtml(annotation.toolLabel)}</span>` : ""}
+              ${annotation.status ? `<span part="status">${escapeHtml(annotation.status)}</span>` : ""}
+              ${annotation.pageLabel ? `<span part="page">${escapeHtml(annotation.pageLabel)}</span>` : ""}
+            </div>
+          </div>
+          ${colorChipMarkup}
+        </div>
+        ${annotation.subject ? `<div part="subject">${escapeHtml(annotation.subject)}</div>` : ""}
+        <div part="body">${escapeHtml(annotation.body)}</div>
+        ${annotation.createdAt ? `<div part="timestamp">${escapeHtml(annotation.createdAt)}</div>` : ""}
+        ${annotation.replies?.length
             ? `
-          <section part="annotation">
-            <div part="annotation-header">
-              <div part="avatar">${escapeHtml(annotation.initials ?? annotation.author.slice(0, 2).toUpperCase())}</div>
-              <div part="author-copy">
-                <div part="author">${escapeHtml(annotation.author)}</div>
-                <div part="meta">
-                  ${annotation.toolLabel ? `<span part="tool">${escapeHtml(annotation.toolLabel)}</span>` : ""}
-                  ${annotation.status ? `<span part="status">${escapeHtml(annotation.status)}</span>` : ""}
-                  ${annotation.pageLabel ? `<span part="page">${escapeHtml(annotation.pageLabel)}</span>` : ""}
+              <div part="replies">
+                <div part="section-title">Replies</div>
+                <div part="reply-list">
+                  ${annotation.replies
+                .map((reply, index) => `
+                        <button type="button" part="reply" data-reply-index="${String(index)}">
+                          <span part="reply-avatar">${escapeHtml(reply.initials ?? reply.author.slice(0, 2).toUpperCase())}</span>
+                          <span part="reply-copy">
+                            <span part="reply-author">${escapeHtml(reply.author)}</span>
+                            <span part="reply-body">${escapeHtml(reply.body)}</span>
+                            ${reply.createdAt ? `<span part="reply-time">${escapeHtml(reply.createdAt)}</span>` : ""}
+                          </span>
+                        </button>
+                      `)
+                .join("")}
                 </div>
               </div>
-              ${annotation.color ? `<span part="color-chip" style="--annotation-color:${escapeHtml(annotation.color)};"></span>` : ""}
-            </div>
-            ${annotation.subject ? `<div part="subject">${escapeHtml(annotation.subject)}</div>` : ""}
-            <div part="body">${escapeHtml(annotation.body)}</div>
-            ${annotation.createdAt ? `<div part="timestamp">${escapeHtml(annotation.createdAt)}</div>` : ""}
-            ${annotation.replies?.length
-                ? `
-                  <div part="replies">
-                    <div part="section-title">Replies</div>
-                    <div part="reply-list">
-                      ${annotation.replies
-                    .map((reply, index) => `
-                            <button type="button" part="reply" data-reply-index="${String(index)}">
-                              <span part="reply-avatar">${escapeHtml(reply.initials ?? reply.author.slice(0, 2).toUpperCase())}</span>
-                              <span part="reply-copy">
-                                <span part="reply-author">${escapeHtml(reply.author)}</span>
-                                <span part="reply-body">${escapeHtml(reply.body)}</span>
-                              </span>
-                            </button>
-                          `)
-                    .join("")}
-                    </div>
-                  </div>
-                `
-                : ""}
-          </section>
-        `
-            : `<div part="empty">No annotation selected.</div>`;
-        const host = this.shadowRoot.querySelector('[part="content-host"]');
-        if (!host) {
+            `
+            : ""}
+      </section>
+    `;
+    }
+    rebuildActions() {
+        this.actionsEl.innerHTML = this.actions
+            .map(action => `
+          <button
+            type="button"
+            part="action"
+            data-action-id="${escapeHtml(action.id)}"
+            data-tone="${escapeHtml(action.tone ?? "neutral")}"
+          >
+            ${escapeHtml(action.label)}
+          </button>
+        `)
+            .join("");
+    }
+    patchActionLabels() {
+        // Action IDs are arbitrary strings (quotes, newlines, …) — match on the
+        // dataset instead of interpolating them into a CSS selector.
+        const buttons = Array.from(this.actionsEl.querySelectorAll('[part="action"]'));
+        this.actions.forEach(action => {
+            const button = buttons.find(candidate => candidate.dataset.actionId === action.id);
+            if (!button) {
+                return;
+            }
+            button.textContent = action.label;
+            button.dataset.tone = action.tone ?? "neutral";
+        });
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
             return;
         }
-        host.innerHTML = `
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
       <article part="panel">
         <header part="header">
-          <h2 part="title">${escapeHtml(this.heading)}</h2>
-          ${messageMarkup}
+          <h2 part="title"></h2>
+          <div part="message" hidden></div>
         </header>
-        ${detailMarkup}
-        ${actionsMarkup}
+        <div part="detail-host"></div>
+        <div part="actions" hidden></div>
+        <div part="composer" hidden>
+          <label part="composer-label" for="annotation-inspector-composer-input">Reply</label>
+          <textarea
+            part="composer-input"
+            id="annotation-inspector-composer-input"
+            placeholder="Add a reply"
+          ></textarea>
+          <button type="button" part="composer-submit">Reply</button>
+        </div>
       </article>
     `;
-        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const actionId = button.getAttribute("data-action-id");
-                if (actionId) {
-                    this.emitAction(actionId);
-                }
-            });
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.messageEl = this.shadowRoot.querySelector('[part="message"]');
+        this.detailHostEl = this.shadowRoot.querySelector('[part="detail-host"]');
+        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
+        this.composerEl = this.shadowRoot.querySelector('[part="composer"]');
+        this.composerInputEl = this.shadowRoot.querySelector('[part="composer-input"]');
+    }
+    setupListeners() {
+        this.actionsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="action"]');
+            if (!button || !this.actionsEl.contains(button)) {
+                return;
+            }
+            const actionId = button.getAttribute("data-action-id");
+            if (actionId) {
+                this.emitAction(actionId);
+            }
+        });
+        this.detailHostEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="reply"]');
+            if (!button || !this.detailHostEl.contains(button)) {
+                return;
+            }
+            const index = Number(button.getAttribute("data-reply-index"));
+            const reply = this.annotation?.replies?.[index];
+            if (reply) {
+                this.emitReplySelected(reply, index);
+            }
         });
-        this.shadowRoot.querySelectorAll('[part="reply"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const index = Number(button.getAttribute("data-reply-index"));
-                const reply = this.annotation?.replies?.[index];
-                if (reply) {
-                    this.emitReplySelected(reply, index);
-                }
-            });
+        this.composerEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="composer-submit"]');
+            if (button) {
+                this.submitComposer();
+            }
+        });
+        this.composerInputEl.addEventListener("keydown", event => {
+            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                this.submitComposer();
+            }
         });
     }
-}
-export const defineBoxAnnotationInspectorElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
+    update() {
+        if (!this.detailHostEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.messageEl.hidden = !this.message;
+        this.messageEl.textContent = this.message;
+        const nextAnnotation = this.getAttribute("annotation");
+        if (nextAnnotation !== this.annotationSignature || this.detailHostEl.childElementCount === 0) {
+            this.annotationSignature = nextAnnotation;
+            this.rebuildDetail();
+        }
+        const actions = this.actions;
+        this.actionsEl.hidden = actions.length === 0;
+        const nextActions = this.actionsKey();
+        if (nextActions !== this.actionsSignature || this.actionsEl.childElementCount === 0) {
+            this.actionsSignature = nextActions;
+            this.rebuildActions();
+        }
+        else {
+            this.patchActionLabels();
+        }
+        const composable = this.composable;
+        this.composerEl.hidden = !composable;
+        this.composerInputEl.disabled = !composable;
     }
-    customElements.define(tagName, BoxAnnotationInspectorElement);
-    return BoxAnnotationInspectorElement;
-};
+}
+AnnotationInspector.register();

package/dist/patterns/preview/annotation-thread.d.ts

@@ -1,10 +1,10 @@
 import { BaseElement } from "../../core/index.js";
-type AnnotationThreadAction = {
+export type AnnotationThreadAction = {
     id: string;
     label: string;
     tone?: string;
 };
-type AnnotationThreadEntry = {
+export type AnnotationThreadEntry = {
     author: string;
     body: string;
     createdAt?: string;
@@ -13,10 +13,26 @@ type AnnotationThreadEntry = {
     status?: string;
     toolLabel?: string;
 };
-export declare class BoxAnnotationThreadElement extends BaseElement {
+export type AnnotationThreadEntrySubmittedDetail = {
+    body: string;
+    inReplyToId: string | null;
+};
+export declare class AnnotationThread extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
+    private titleEl;
+    private messageEl;
+    private entriesEl;
+    private emptyEl;
+    private actionsEl;
+    private composerEl;
+    private composerInputEl;
+    private entriesSignature;
+    private actionsSignature;
     get actions(): AnnotationThreadAction[];
     set actions(value: AnnotationThreadAction[]);
+    get composable(): boolean;
+    set composable(value: boolean);
     get entries(): AnnotationThreadEntry[];
     set entries(value: AnnotationThreadEntry[]);
     get message(): string;
@@ -25,13 +41,17 @@ export declare class BoxAnnotationThreadElement extends BaseElement {
     set selectedEntryId(value: string);
     get heading(): string;
     set heading(value: string);
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private parseJsonAttribute;
     private emitAction;
     private emitEntrySelected;
+    private submitComposer;
+    private entriesKey;
+    private actionsKey;
+    private rebuildEntries;
+    private patchEntrySelection;
+    private rebuildActions;
+    private patchActionLabels;
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxAnnotationThreadElement: (tagName?: string) => typeof BoxAnnotationThreadElement;
-export {};