@unofficialbox/box-open-elements 0.10.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/dist/patterns/timeline/timeline.js

@@ -60,6 +60,14 @@ const elementStyles = `
           margin: 0;
           padding: 0;
           display: grid;
+
+          /* Named so the spine can derive how far it has to reach rather than
+             restating the numbers. The line has to cross this entry's bottom
+             padding, the next entry's top padding and the marker's own offset
+             to arrive at the next marker; spelling that out as arithmetic
+             keeps it correct if any of the three changes. */
+          --timeline-event-pad: 0.55rem;
+          --timeline-marker-offset: 0.3rem;
         }
 
         [part="event"] {
@@ -67,29 +75,53 @@ const elementStyles = `
           display: grid;
           grid-template-columns: auto 1fr;
           gap: 0.65rem;
-          padding: 0.55rem 0 0.55rem 0.15rem;
+          padding: var(--timeline-event-pad) 0 var(--timeline-event-pad) 0.15rem;
         }
 
-        /* The connecting spine between markers. */
-        [part="event"]:not(:last-child)::after {
-          content: "";
-          position: absolute;
-          left: calc(0.15rem + 0.55rem - 1px);
-          top: 1.9rem;
-          bottom: -0.35rem;
-          width: 2px;
-          background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 72%, transparent);
+        /* The marker column, built the way box-path's base variant builds its
+           rail: the marker is a fixed box and the spine is a flex sibling that
+           takes whatever height is left, so the line runs from the marker to
+           the bottom of the entry however tall the entry's content turns out
+           to be.
+
+           The previous version positioned the spine with hand-tuned constants
+           (top: 1.9rem, bottom: -0.35rem) that guessed where the marker ended.
+           They were only ever right for one font size and one content height,
+           which is why the line stopped short of the next marker and dangled. */
+        [part="marker-rail"] {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          align-self: stretch;
+          margin-top: var(--timeline-marker-offset);
         }
 
         [part="marker"] {
+          flex: 0 0 auto;
           inline-size: 1.1rem;
           block-size: 1.1rem;
-          margin-top: 0.3rem;
           border-radius: 999px;
           border: 2px solid var(--timeline-tone, var(--boe-token-text-text-secondary, #6f6f6f));
           background: color-mix(in srgb, var(--timeline-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 14%, var(--boe-token-surface-surface, #ffffff) 86%);
         }
 
+        /* The spine. Grows to fill the column, and the negative bottom margin
+           carries it across the gap into the next entry's marker so the two
+           actually meet. Hidden on the last entry, which leads nowhere. */
+        [part="marker-rail"]::after {
+          content: "";
+          flex: 1 1 auto;
+          inline-size: 2px;
+          margin-block: 0.25rem
+            calc(-1 * (var(--timeline-event-pad) * 2 + var(--timeline-marker-offset)));
+          border-radius: 999px;
+          background: var(--boe-token-stroke-stroke, #e8e8e8);
+        }
+
+        [part="event"]:last-child [part="marker-rail"]::after {
+          display: none;
+        }
+
         [part="event-body"] {
           display: grid;
           gap: 0.25rem;
@@ -328,7 +360,7 @@ export class Timeline extends BaseElement {
             const timestamp = event.timestamp ? formatItemDate(event.timestamp) : "";
             return `
           <li part="event" data-event-id="${escapeHtml(event.id)}" style="--timeline-tone:${toneColor(tone)};">
-            <span part="marker" aria-hidden="true"></span>
+            <span part="marker-rail" aria-hidden="true"><span part="marker"></span></span>
             <div part="event-body">
               <div part="event-topline">
                 ${event.actor ? `<span part="actor">${escapeHtml(event.actor.name)}</span>` : ""}