@unofficialbox/box-open-elements 0.11.0 → 0.12.0

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

@@ -1,483 +1,139 @@
-import { BaseElement } from "../../core/index.js";
-import { boeBrandInteractiveStyles, boeFocusRingShadow, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
-import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
+import { CommentThread } from "../comments/index.js";
 const DEFAULT_TAG_NAME = "box-annotation-thread";
-const escapeHtml = (value) => value
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-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;
-          font: inherit;
-        }
-
-        [part="thread"] {
-          display: grid;
-          gap: ${boePanel.gap};
-          padding: ${boePanel.padding};
-          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
-          border-radius: ${boePanel.radius};
-          background: ${boePanel.background};
-        }
-
-        [part="header"] {
-          display: grid;
-          gap: 0.42rem;
-        }
-
-        [part="title"] {
-          margin: 0;
-          font: inherit;
-          font-size: 1.1rem;
-          font-weight: 700;
-          color: var(--boe-token-text-text, #1f1e1b);
-        }
-
-        [part="message"] {
-          color: var(--boe-token-text-text-secondary, #6f6f6f);
-          line-height: 1.5;
-        }
-
-        [part="entries"] {
-          display: grid;
-          gap: 0.6rem;
-          margin: 0;
-          padding: 0;
-          list-style: none;
-        }
-
-        [part="entry-item"] {
-          display: block;
-        }
-
-        [part="entry"] {
-          appearance: none;
+const anchorStyles = `
+        [part="anchor"] {
           display: grid;
-          inline-size: 100%;
-          grid-template-columns: auto 1fr;
-          gap: ${boePanel.gap};
-          align-items: start;
-          padding: 0.55rem;
-          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+          gap: 0.3rem;
+          padding: 0.45rem 0.55rem;
+          border-inline-start: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 45%, transparent);
           border-radius: ${boePanel.radius};
-          background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 78%, transparent);
-          color: inherit;
-          font: inherit;
-          text-align: left;
-          cursor: pointer;
-          transition:
-            transform ${boeMotionDuration.fast} ${boeMotionEasing.standard},
-            border-color ${boeMotionDuration.fast} ${boeMotionEasing.standard},
-            box-shadow ${boeMotionDuration.fast} ${boeMotionEasing.standard};
-        }
-
-        [part="entry-avatar"] {
-          display: inline-grid;
-          place-items: center;
-          inline-size: 2rem;
-          block-size: 2rem;
-          border-radius: 999px;
-          background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
-          color: var(--boe-token-surface-surface-brand, #0061d5);
-          font-size: 0.72rem;
-          font-weight: 700;
-          letter-spacing: 0.06em;
-          text-transform: uppercase;
-        }
-
-        [part="entry-copy"] {
-          display: grid;
-          gap: 0.24rem;
-        }
-
-        [part="entry-topline"] {
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          gap: 0.35rem;
-        }
-
-        [part="entry-author"] {
-          font-weight: 700;
-          color: var(--boe-token-text-text, #1f1e1b);
-        }
-
-        [part="entry-tool"],
-        [part="entry-status"] {
-          display: inline-flex;
-          padding: 0.18rem 0.42rem;
-          border-radius: 999px;
           background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
-          color: var(--boe-token-text-text-secondary, #6f6f6f);
-          font-size: 0.75rem;
-        }
-
-        [part="entry-body"] {
-          line-height: 1.55;
-          color: var(--boe-token-text-text, #1f1e1b);
-        }
-
-        [part="entry-time"] {
-          color: var(--boe-token-text-text-secondary, #6f6f6f);
-          font-size: 0.78rem;
-        }
-
-        [part="actions"] {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 0.5rem;
         }
 
-        [part="action"] {
-          appearance: none;
-          min-height: 2rem;
-          padding: 0.4rem 0.7rem;
-          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
-          border-radius: 999px;
-          background: var(--boe-token-surface-surface, #ffffff);
-          color: inherit;
-          font: inherit;
-          cursor: pointer;
-        }
-
-        [part="empty"] {
-          padding: ${boePanel.padding};
-          border-radius: ${boePanel.radius};
-          border: 1px dashed color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 70%, transparent);
-          color: var(--boe-token-text-text-secondary, #6f6f6f);
-        }
-
-        [part="composer"] {
-          display: grid;
-          gap: 0.5rem;
-        }
-
-        [part="composer-label"] {
+        [part="anchor-location"] {
           font-size: 0.74rem;
           font-weight: 700;
-          letter-spacing: 0.08em;
+          letter-spacing: 0.06em;
           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;
+        /* Quoted document text, so it reads as a citation rather than as one of
+           the comments below it. */
+        [part="anchor-quote"] {
+          margin: 0;
+          color: var(--boe-token-text-text, #1f1e1b);
+          font-style: italic;
           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="entry"]')}
-        ${boeNeutralInteractiveStyles('[part="action"]')}
-        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
-        ${boeBrandInteractiveStyles('[part="composer-submit"]')}
-
-        [part="entry"][aria-pressed="true"],
-        [part="entry"][aria-pressed="true"]:hover:not(:disabled) {
-          border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
-          box-shadow: ${boeFocusRingShadow};
-        }
-
-        [part="action"][data-tone="primary"] {
-          border-color: transparent;
-          background: var(--boe-token-surface-surface-brand, #0061d5);
-          color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
-export class AnnotationThread extends BaseElement {
+/**
+ * A comment thread anchored to a place in a document.
+ *
+ * This is `box-comment-thread` plus the anchor. The distinction is the whole
+ * point: comments stand on their own — on a file, a task, a contract clause —
+ * and only become annotations when something ties them to a page, a region, or
+ * a run of selected text. Hosts that want the former should reach for
+ * `box-comment-thread` directly rather than for an annotation with no anchor.
+ *
+ * Every attribute, part and event of the underlying thread is inherited
+ * unchanged, so this remains a drop-in for the previous implementation.
+ */
+export class AnnotationThread extends CommentThread {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["actions", "composable", "entries", "message", "selected-entry-id", "heading"];
-    }
-    titleEl;
-    messageEl;
-    entriesEl;
-    emptyEl;
-    actionsEl;
-    composerEl;
-    composerInputEl;
-    entriesSignature = "";
-    actionsSignature = "";
-    get actions() {
-        return this.parseJsonAttribute("actions", []);
+        return [...CommentThread.observedAttributes, "anchor"];
+    }
+    anchorEl = null;
+    threadStyles() {
+        return `${super.threadStyles()}\n${anchorStyles}`;
+    }
+    headerExtras() {
+        return `
+          <div part="anchor" hidden>
+            <span part="anchor-location"></span>
+            <blockquote part="anchor-quote" hidden></blockquote>
+          </div>
+    `;
     }
-    set actions(value) {
-        this.setAttribute("actions", JSON.stringify(value));
+    defaultHeading() {
+        return "Annotation Thread";
     }
-    get composable() {
-        return this.hasAttribute("composable");
+    emptyText() {
+        return "No annotation thread entries available.";
     }
-    set composable(value) {
-        this.toggleAttribute("composable", value);
+    defaultComposerLabel() {
+        return "Reply";
     }
-    get entries() {
-        return this.parseJsonAttribute("entries", []);
+    defaultPlaceholder() {
+        return "Add a reply";
     }
-    set entries(value) {
-        this.setAttribute("entries", JSON.stringify(value));
+    /**
+     * Annotations name their pill `toolLabel`. Mapping it here keeps that
+     * vocabulary for existing hosts while the base model stays generic.
+     */
+    entryBadge(entry) {
+        return entry.toolLabel ?? entry.badge;
     }
-    get message() {
-        return this.getAttribute("message") ?? "";
+    /** Where in the document this thread sits. Null when unanchored. */
+    get anchor() {
+        return this.parseJsonAttribute("anchor", null);
     }
-    set message(value) {
+    set anchor(value) {
         if (!value) {
-            this.removeAttribute("message");
+            this.removeAttribute("anchor");
             return;
         }
-        this.setAttribute("message", value);
-    }
-    get selectedEntryId() {
-        return this.getAttribute("selected-entry-id") ?? "";
+        this.setAttribute("anchor", JSON.stringify(value));
     }
-    set selectedEntryId(value) {
-        if (!value) {
-            this.removeAttribute("selected-entry-id");
-            return;
-        }
-        this.setAttribute("selected-entry-id", value);
-    }
-    get heading() {
-        return this.getAttribute("heading") ?? "Annotation Thread";
+    get entries() {
+        return super.entries;
     }
-    set heading(value) {
-        this.setAttribute("heading", value);
+    set entries(value) {
+        super.entries = value;
     }
-    parseJsonAttribute(name, fallback) {
-        const raw = this.getAttribute(name);
-        if (!raw) {
-            return fallback;
-        }
-        try {
-            return JSON.parse(raw);
+    /**
+     * The anchor in words.
+     *
+     * A region is described by its page rather than by its coordinates: the
+     * numbers locate the highlight for the renderer, but they tell a reader
+     * nothing, and a screen reader least of all.
+     */
+    anchorLocation(anchor) {
+        if (typeof anchor.page === "number" && Number.isFinite(anchor.page)) {
+            return anchor.region ? `Page ${anchor.page} · region` : `Page ${anchor.page}`;
         }
-        catch {
-            return fallback;
+        if (anchor.region) {
+            return "Region";
         }
+        return anchor.quote ? "Selected text" : "";
     }
-    emitAction(actionId) {
-        this.dispatchEvent(new CustomEvent("action", {
-            bubbles: true,
-            composed: true,
-            detail: {
-                action: actionId,
-                selectedEntryId: this.selectedEntryId || null,
-            },
-        }));
-    }
-    emitEntrySelected(entry) {
-        this.selectedEntryId = entry.id;
-        this.dispatchEvent(new CustomEvent("entry-selected", {
-            bubbles: true,
-            composed: true,
-            detail: entry,
-        }));
-    }
-    submitComposer() {
-        const body = this.composerInputEl.value.trim();
-        if (!this.composable || !body) {
-            return;
-        }
-        this.dispatchEvent(new CustomEvent("entry-submitted", {
-            bubbles: true,
-            composed: true,
-            detail: {
-                body,
-                inReplyToId: this.selectedEntryId || null,
-            },
-        }));
-        this.composerInputEl.value = "";
-    }
-    entriesKey() {
-        return this.getAttribute("entries") ?? "";
-    }
-    actionsKey() {
-        return JSON.stringify(this.actions.map(action => action.id));
-    }
-    rebuildEntries() {
-        this.entriesEl.innerHTML = this.entries
-            .map(entry => {
-            const selected = entry.id === this.selectedEntryId;
-            return `
-          <li part="entry-item" role="listitem">
-            <button
-              type="button"
-              part="entry"
-              data-entry-id="${escapeHtml(entry.id)}"
-              aria-pressed="${selected ? "true" : "false"}"
-            >
-              <span part="entry-avatar">${escapeHtml(entry.initials ?? entry.author.slice(0, 2).toUpperCase())}</span>
-              <span part="entry-copy">
-                <span part="entry-topline">
-                  <span part="entry-author">${escapeHtml(entry.author)}</span>
-                  ${entry.toolLabel ? `<span part="entry-tool">${escapeHtml(entry.toolLabel)}</span>` : ""}
-                  ${entry.status ? `<span part="entry-status">${escapeHtml(entry.status)}</span>` : ""}
-                </span>
-                <span part="entry-body">${escapeHtml(entry.body)}</span>
-                ${entry.createdAt ? `<span part="entry-time">${escapeHtml(entry.createdAt)}</span>` : ""}
-              </span>
-            </button>
-          </li>
-        `;
-        })
-            .join("");
-    }
-    patchEntrySelection() {
-        this.entriesEl.querySelectorAll('[part="entry"]').forEach(button => {
-            const selected = button.getAttribute("data-entry-id") === this.selectedEntryId;
-            button.setAttribute("aria-pressed", selected ? "true" : "false");
-        });
-    }
-    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() {
+    update() {
+        super.update();
         if (!this.shadowRoot) {
             return;
         }
-        this.shadowRoot.innerHTML = `
-      <style>${elementStyles}</style>
-      <article part="thread">
-        <header part="header">
-          <h2 part="title"></h2>
-          <div part="message" hidden></div>
-        </header>
-        <ul part="entries" role="list" hidden></ul>
-        <div part="empty" hidden>No annotation thread entries available.</div>
-        <div part="actions" hidden></div>
-        <div part="composer" hidden>
-          <label part="composer-label" for="annotation-thread-composer-input">Reply</label>
-          <textarea
-            part="composer-input"
-            id="annotation-thread-composer-input"
-            placeholder="Add a reply"
-          ></textarea>
-          <button type="button" part="composer-submit">Reply</button>
-        </div>
-      </article>
-    `;
-        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
-        this.messageEl = this.shadowRoot.querySelector('[part="message"]');
-        this.entriesEl = this.shadowRoot.querySelector('[part="entries"]');
-        this.emptyEl = this.shadowRoot.querySelector('[part="empty"]');
-        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
-        this.composerEl = this.shadowRoot.querySelector('[part="composer"]');
-        this.composerInputEl = this.shadowRoot.querySelector('[part="composer-input"]');
-    }
-    setupListeners() {
-        this.entriesEl.addEventListener("click", event => {
-            const button = event.target.closest('[part="entry"]');
-            if (!button || !this.entriesEl.contains(button)) {
-                return;
-            }
-            const entryId = button.getAttribute("data-entry-id");
-            const entry = this.entries.find(item => item.id === entryId);
-            if (entry) {
-                this.emitEntrySelected(entry);
-            }
-        });
-        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.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();
-            }
-        });
-    }
-    update() {
-        if (!this.entriesEl) {
+        this.anchorEl ??= this.shadowRoot.querySelector('[part="anchor"]');
+        if (!this.anchorEl) {
             return;
         }
-        this.titleEl.textContent = this.heading;
-        this.messageEl.hidden = !this.message;
-        this.messageEl.textContent = this.message;
-        const entries = this.entries;
-        this.entriesEl.hidden = entries.length === 0;
-        this.emptyEl.hidden = entries.length > 0;
-        this.entriesEl.setAttribute("aria-label", `${this.heading} entries`);
-        const nextEntries = this.entriesKey();
-        if (nextEntries !== this.entriesSignature) {
-            this.entriesSignature = nextEntries;
-            this.rebuildEntries();
-        }
-        else {
-            this.patchEntrySelection();
-        }
-        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 anchor = this.anchor;
+        const location = anchor ? this.anchorLocation(anchor) : "";
+        const quote = anchor?.quote ?? "";
+        // Hidden only when the anchor says nothing renderable — an anchor carrying
+        // just a region still names its page, and a quote alone still shows.
+        this.anchorEl.hidden = !location && !quote;
+        const locationEl = this.anchorEl.querySelector('[part="anchor-location"]');
+        if (locationEl) {
+            locationEl.hidden = !location;
+            locationEl.textContent = location;
+        }
+        const quoteEl = this.anchorEl.querySelector('[part="anchor-quote"]');
+        if (quoteEl) {
+            quoteEl.hidden = !quote;
+            quoteEl.textContent = quote;
         }
-        const composable = this.composable;
-        this.composerEl.hidden = !composable;
-        this.composerInputEl.disabled = !composable;
     }
 }
 AnnotationThread.register();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.11.0",
+  "version": "0.12.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",