@unofficialbox/box-open-elements 0.10.0 → 0.12.0

package/dist/patterns/comments/comment-thread.js

@@ -0,0 +1,561 @@
+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";
+const DEFAULT_TAG_NAME = "box-comment-thread";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const threadStyles = `
+        /* 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;
+          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);
+          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"] {
+          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="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);
+        }
+      `;
+/**
+ * A comment thread: authored entries, selection, actions, and a composer.
+ *
+ * Comments are a standalone concept. They hang off a file, a folder, a task or
+ * a contract clause just as readily as off a region of a document, so the
+ * thread does not know what it is attached to — a host that needs an anchor
+ * composes one on top. `box-annotation-thread` is exactly that: this component
+ * plus the document anchor, which is the only thing that makes an annotation an
+ * annotation.
+ *
+ * The extension points below (`threadStyles`, `headerExtras`, `defaultHeading`,
+ * `emptyText`, `entryBadge`, and the composer copy) exist so a subclass can
+ * specialise the chrome without reimplementing entry rendering, selection
+ * patching, or the composer.
+ */
+export class CommentThread extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return [
+            "actions",
+            "composable",
+            "composer-label",
+            "entries",
+            "heading",
+            "message",
+            "placeholder",
+            "selected-entry-id",
+        ];
+    }
+    titleEl;
+    messageEl;
+    entriesEl;
+    emptyEl;
+    actionsEl;
+    composerEl;
+    composerLabelEl;
+    composerSubmitEl;
+    composerInputEl;
+    entriesSignature = "";
+    actionsSignature = "";
+    /** Styles for the thread. Subclasses append rather than replace. */
+    threadStyles() {
+        return threadStyles;
+    }
+    /** Extra markup inside the header, after the message. Empty by default. */
+    headerExtras() {
+        return "";
+    }
+    /** Heading when the host sets none. */
+    defaultHeading() {
+        return "Comments";
+    }
+    /** Text shown when there are no entries. */
+    emptyText() {
+        return "No comments yet.";
+    }
+    /** Label on the composer, and on its submit button. */
+    defaultComposerLabel() {
+        return "Comment";
+    }
+    /** Placeholder in the composer input. */
+    defaultPlaceholder() {
+        return "Add a comment";
+    }
+    /**
+     * The pill beside the author. Reads the generic `badge`; a subclass with its
+     * own vocabulary overrides this rather than forcing hosts to rename fields.
+     */
+    entryBadge(entry) {
+        return entry.badge;
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get composable() {
+        return this.hasAttribute("composable");
+    }
+    set composable(value) {
+        this.toggleAttribute("composable", value);
+    }
+    get entries() {
+        return this.parseJsonAttribute("entries", []);
+    }
+    set entries(value) {
+        this.setAttribute("entries", JSON.stringify(value));
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        if (!value) {
+            this.removeAttribute("message");
+            return;
+        }
+        this.setAttribute("message", value);
+    }
+    get selectedEntryId() {
+        return this.getAttribute("selected-entry-id") ?? "";
+    }
+    set selectedEntryId(value) {
+        if (!value) {
+            this.removeAttribute("selected-entry-id");
+            return;
+        }
+        this.setAttribute("selected-entry-id", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? this.defaultHeading();
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    /** Composer label and submit-button text. */
+    get composerLabel() {
+        return this.getAttribute("composer-label") ?? this.defaultComposerLabel();
+    }
+    set composerLabel(value) {
+        this.setAttribute("composer-label", value);
+    }
+    get placeholder() {
+        return this.getAttribute("placeholder") ?? this.defaultPlaceholder();
+    }
+    set placeholder(value) {
+        this.setAttribute("placeholder", value);
+    }
+    parseJsonAttribute(name, fallback) {
+        const raw = this.getAttribute(name);
+        if (!raw) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    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;
+            const badge = this.entryBadge(entry);
+            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>
+                  ${badge ? `<span part="entry-tool">${escapeHtml(badge)}</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() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${this.threadStyles()}</style>
+      <article part="thread">
+        <header part="header">
+          <h2 part="title"></h2>
+          <div part="message" hidden></div>
+          ${this.headerExtras()}
+        </header>
+        <ul part="entries" role="list" hidden></ul>
+        <div part="empty" hidden></div>
+        <div part="actions" hidden></div>
+        <div part="composer" hidden>
+          <label part="composer-label" for="comment-thread-composer-input"></label>
+          <textarea
+            part="composer-input"
+            id="comment-thread-composer-input"
+          ></textarea>
+          <button type="button" part="composer-submit"></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.composerLabelEl = this.shadowRoot.querySelector('[part="composer-label"]');
+        this.composerSubmitEl = this.shadowRoot.querySelector('[part="composer-submit"]');
+        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) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.messageEl.hidden = !this.message;
+        this.messageEl.textContent = this.message;
+        this.emptyEl.textContent = this.emptyText();
+        const composerLabel = this.composerLabel;
+        this.composerLabelEl.textContent = composerLabel;
+        this.composerSubmitEl.textContent = composerLabel;
+        this.composerInputEl.placeholder = this.placeholder;
+        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 composable = this.composable;
+        this.composerEl.hidden = !composable;
+        this.composerInputEl.disabled = !composable;
+    }
+}
+CommentThread.register();

package/dist/patterns/comments/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export * from "./comment-thread.js";

package/dist/patterns/comments/index.js

@@ -0,0 +1,5 @@
+// Comments as a standalone concept: the model, then the thread that renders it.
+// `box-annotation-thread` (patterns/preview) composes this and adds the
+// document anchor.
+export * from "./types.js";
+export * from "./comment-thread.js";

package/dist/patterns/comments/types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The comment model.
+ *
+ * Kept separate from the component so the data contract does not depend on the
+ * class: a host that only transports comments — a controller, an adapter, a
+ * server route — imports these without pulling a custom element in with them.
+ */
+/** A button offered beneath the thread, e.g. "Resolve" or "Delete". */
+export type CommentAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+/**
+ * One comment.
+ *
+ * `badge` is the generic pill beside the author — whatever short qualifier the
+ * surface wants to show. `box-annotation-thread` maps its own `toolLabel` onto
+ * it, which is why the base model does not name it after annotation tools.
+ */
+export type CommentEntry = {
+    author: string;
+    badge?: string;
+    body: string;
+    createdAt?: string;
+    id: string;
+    initials?: string;
+    status?: string;
+};
+/**
+ * A composed comment, before it has an id.
+ *
+ * `inReplyToId` carries the selected entry, so the same event serves both a new
+ * top-level comment and a reply — the host decides which by reading it.
+ */
+export type CommentSubmittedDetail = {
+    body: string;
+    inReplyToId: string | null;
+};

package/dist/patterns/comments/types.js

@@ -0,0 +1,8 @@
+/**
+ * The comment model.
+ *
+ * Kept separate from the component so the data contract does not depend on the
+ * class: a host that only transports comments — a controller, an adapter, a
+ * server route — imports these without pulling a custom element in with them.
+ */
+export {};

package/dist/patterns/lineage/lineage-graph.d.ts

@@ -1,4 +1,5 @@
 import type { LineageNode } from "./types.js";
+import type { GraphArrows } from "../versions/graph-arrows.js";
 import { BaseElement } from "../../core/index.js";
 /**
  * Provenance DAG for clause lineage (opportunity 2): source clause →
@@ -13,6 +14,12 @@ import { BaseElement } from "../../core/index.js";
 export declare class LineageGraph extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
+    /**
+     * Which ends of each edge carry an arrowhead. Defaults to `end`, the head on
+     * the derived node, because the layout builds edges source → derived.
+     */
+    get arrows(): GraphArrows;
+    set arrows(value: GraphArrows);
     private nodesValue;
     private rovingId;
     private hostEl;