@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/metadata/schemas.js

@@ -0,0 +1,66 @@
+export const metadataFieldDefinitionSchema = {
+    type: "object",
+    additionalProperties: false,
+    required: ["key", "label", "type"],
+    properties: {
+        key: { type: "string" },
+        label: { type: "string" },
+        type: {
+            enum: ["string", "enum", "float", "integer", "date", "bool", "multiSelect"],
+        },
+        description: { type: "string" },
+        required: { type: "boolean" },
+        options: {
+            type: "array",
+            items: { type: "string" },
+        },
+    },
+};
+export const metadataTemplateDefinitionSchema = {
+    $id: "box-open-elements/patterns/metadata/MetadataTemplateDefinition",
+    type: "object",
+    additionalProperties: false,
+    required: ["key", "label", "scope", "fields"],
+    properties: {
+        key: { type: "string" },
+        label: { type: "string" },
+        scope: { type: "string" },
+        fields: {
+            type: "array",
+            items: metadataFieldDefinitionSchema,
+        },
+    },
+};
+export const metadataInstanceSchema = {
+    $id: "box-open-elements/patterns/metadata/MetadataInstance",
+    type: "object",
+    additionalProperties: true,
+    required: ["scope", "templateKey", "values"],
+    properties: {
+        id: { type: "string" },
+        scope: { type: "string" },
+        templateKey: { type: "string" },
+        values: {
+            type: "object",
+            additionalProperties: true,
+        },
+    },
+};
+export const metadataPageSchema = {
+    $id: "box-open-elements/patterns/metadata/MetadataPage",
+    type: "object",
+    additionalProperties: false,
+    required: ["entries", "limit", "offset", "totalCount"],
+    properties: {
+        entries: {
+            type: "array",
+            items: {
+                type: "object",
+                additionalProperties: true,
+            },
+        },
+        limit: { type: "number" },
+        offset: { type: "number" },
+        totalCount: { type: ["number", "null"] },
+    },
+};

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

@@ -0,0 +1,44 @@
+import { BaseElement } from "../../core/index.js";
+type AnnotationInspectorAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+type AnnotationInspectorReply = {
+    author: string;
+    body: string;
+    initials?: string;
+};
+type AnnotationInspectorAnnotation = {
+    author: string;
+    body: string;
+    color?: string;
+    createdAt?: string;
+    id: string;
+    initials?: string;
+    pageLabel?: string;
+    replies?: AnnotationInspectorReply[];
+    status?: string;
+    subject?: string;
+    toolLabel?: string;
+};
+export declare class BoxAnnotationInspectorElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get actions(): AnnotationInspectorAction[];
+    set actions(value: AnnotationInspectorAction[]);
+    get annotation(): AnnotationInspectorAnnotation | null;
+    set annotation(value: AnnotationInspectorAnnotation | null);
+    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;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxAnnotationInspectorElement: (tagName?: string) => typeof BoxAnnotationInspectorElement;
+export {};

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

@@ -0,0 +1,380 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-annotation-inspector";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="panel"] {
+          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="annotation"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: 0.65rem;
+          border-radius: ${boePanel.radius};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+          background: rgba(255, 255, 255, 0.72);
+        }
+
+        [part="annotation-header"] {
+          display: grid;
+          grid-template-columns: auto 1fr auto;
+          gap: ${boePanel.gap};
+          align-items: center;
+        }
+
+        [part="avatar"],
+        [part="reply-avatar"] {
+          display: inline-grid;
+          place-items: center;
+          inline-size: 2rem;
+          block-size: 2rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          font-size: 0.72rem;
+          font-weight: 700;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+        }
+
+        [part="author-copy"],
+        [part="reply-copy"] {
+          display: grid;
+          gap: 0.14rem;
+        }
+
+        [part="author"],
+        [part="reply-author"],
+        [part="subject"] {
+          font-weight: 700;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="meta"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.35rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.78rem;
+        }
+
+        [part="tool"],
+        [part="status"],
+        [part="page"] {
+          display: inline-flex;
+          padding: 0.2rem 0.45rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff) 92%);
+        }
+
+        [part="color-chip"] {
+          inline-size: 0.9rem;
+          block-size: 0.9rem;
+          border-radius: 999px;
+          background: var(--annotation-color, #f59e0b);
+          box-shadow: 0 0 0 4px color-mix(in srgb, var(--annotation-color, #f59e0b) 18%, transparent);
+        }
+
+        [part="body"] {
+          line-height: 1.6;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="timestamp"] {
+          color: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 86%, transparent);
+          font-size: 0.78rem;
+        }
+
+        [part="replies"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="section-title"] {
+          font-size: 0.74rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="reply-list"] {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        [part="reply"] {
+          appearance: none;
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: 0.5rem;
+          align-items: start;
+          padding: 0.6rem 0.65rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 42%, transparent);
+          border-radius: ${boeRadius.med};
+          background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 88%, var(--boe-token-surface-surface, #ffffff) 12%);
+          color: inherit;
+          font: inherit;
+          text-align: left;
+          cursor: pointer;
+        }
+
+        [part="reply-body"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.45;
+        }
+
+        [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);
+        }
+
+        ${boeNeutralInteractiveStyles('[part="reply"]')}
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="action"][data-tone="primary"] {
+          border-color: transparent;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: #fff;
+        }
+      `;
+export class BoxAnnotationInspectorElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "annotation", "heading", "message"];
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get annotation() {
+        return this.parseJsonAttribute("annotation", null);
+    }
+    set annotation(value) {
+        if (!value) {
+            this.removeAttribute("annotation");
+            return;
+        }
+        this.setAttribute("annotation", JSON.stringify(value));
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        if (!value) {
+            this.removeAttribute("message");
+            return;
+        }
+        this.setAttribute("message", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Annotation Inspector";
+    }
+    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) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    emitAction(actionId) {
+        this.dispatchEvent(new CustomEvent("action", {
+            bubbles: true,
+            composed: true,
+            detail: { action: actionId, annotationId: this.annotation?.id ?? null },
+        }));
+    }
+    emitReplySelected(reply, index) {
+        this.dispatchEvent(new CustomEvent("reply-selected", {
+            bubbles: true,
+            composed: true,
+            detail: { ...reply, index, annotationId: this.annotation?.id ?? null },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            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 detailMarkup = annotation
+            ? `
+          <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>
+              ${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) {
+            return;
+        }
+        host.innerHTML = `
+      <article part="panel">
+        <header part="header">
+          <h2 part="title">${escapeHtml(this.heading)}</h2>
+          ${messageMarkup}
+        </header>
+        ${detailMarkup}
+        ${actionsMarkup}
+      </article>
+    `;
+        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const actionId = button.getAttribute("data-action-id");
+                if (actionId) {
+                    this.emitAction(actionId);
+                }
+            });
+        });
+        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);
+                }
+            });
+        });
+    }
+}
+export const defineBoxAnnotationInspectorElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxAnnotationInspectorElement);
+    return BoxAnnotationInspectorElement;
+};

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

@@ -0,0 +1,37 @@
+import { BaseElement } from "../../core/index.js";
+type AnnotationThreadAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+type AnnotationThreadEntry = {
+    author: string;
+    body: string;
+    createdAt?: string;
+    id: string;
+    initials?: string;
+    status?: string;
+    toolLabel?: string;
+};
+export declare class BoxAnnotationThreadElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get actions(): AnnotationThreadAction[];
+    set actions(value: AnnotationThreadAction[]);
+    get entries(): AnnotationThreadEntry[];
+    set entries(value: AnnotationThreadEntry[]);
+    get message(): string;
+    set message(value: string);
+    get selectedEntryId(): string;
+    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;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxAnnotationThreadElement: (tagName?: string) => typeof BoxAnnotationThreadElement;
+export {};