@unofficialbox/box-open-elements 0.1.0

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

@@ -0,0 +1,393 @@
+import { BaseElement } from "../../core/index.js";
+import { applyRovingTabindex, handleRovingKeydown } from "../../foundations/a11y/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-annotation-toolbar";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="toolbar"] {
+          display: grid;
+          gap: 0.5rem;
+          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"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="body"] {
+          display: grid;
+          gap: 0.6rem;
+        }
+
+        [part="section"] {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        [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="tools"],
+        [part="colors"],
+        [part="actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+        }
+
+        [part="tool"],
+        [part="action"] {
+          appearance: none;
+          min-height: 1.75rem;
+          padding: 0.3rem 0.65rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
+          border-radius: ${boeRadius.control};
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+        }
+
+        [part="tool"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.42rem;
+        }
+
+        [part="tool-icon"] {
+          font-size: 0.8rem;
+          line-height: 1;
+        }
+
+        [part="color"] {
+          appearance: none;
+          inline-size: 2rem;
+          block-size: 2rem;
+          padding: 0;
+          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);
+          cursor: pointer;
+        }
+
+        [part="color-swatch"] {
+          display: block;
+          inline-size: 100%;
+          block-size: 100%;
+          border-radius: inherit;
+          background: var(--annotation-color, #0061d5);
+          transform: scale(0.62);
+        }
+
+        [part="empty"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        ${boeNeutralInteractiveStyles('[part="tool"]')}
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeNeutralInteractiveStyles('[part="color"]')}
+        ${boeBrandInteractiveStyles('[part="tool"][aria-pressed="true"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="tool"][aria-pressed="true"] {
+          border-color: transparent;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+
+        [part="color"][aria-pressed="true"],
+        [part="color"][aria-pressed="true"]:hover:not(:disabled) {
+          border-color: var(--boe-token-surface-surface-brand, #0061d5);
+          box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12);
+        }
+
+        [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);
+        }
+
+        [part="action"][data-tone="danger"],
+        [part="action"][data-tone="destructive"],
+        [part="action"][data-tone="error"] {
+          border-color: transparent;
+          background: var(--boe-token-surface-status-surface-error, #ed3757);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+
+        [part="action"][data-tone="danger"]:hover:not(:disabled),
+        [part="action"][data-tone="destructive"]:hover:not(:disabled),
+        [part="action"][data-tone="error"]:hover:not(:disabled) {
+          background: color-mix(
+            in srgb,
+            var(--boe-token-surface-status-surface-error, #ed3757) 88%,
+            #000000 12%
+          );
+        }
+      `;
+export class BoxAnnotationToolbarElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "active-tool-id", "color-options", "current-color", "label", "tools"];
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get activeToolId() {
+        return this.getAttribute("active-tool-id") ?? "";
+    }
+    set activeToolId(value) {
+        if (!value) {
+            this.removeAttribute("active-tool-id");
+            return;
+        }
+        this.setAttribute("active-tool-id", value);
+    }
+    get colorOptions() {
+        return this.parseJsonAttribute("color-options", []);
+    }
+    set colorOptions(value) {
+        this.setAttribute("color-options", JSON.stringify(value));
+    }
+    get currentColor() {
+        return this.getAttribute("current-color") ?? "";
+    }
+    set currentColor(value) {
+        if (!value) {
+            this.removeAttribute("current-color");
+            return;
+        }
+        this.setAttribute("current-color", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Annotation Toolbar";
+    }
+    set label(value) {
+        if (!value) {
+            this.removeAttribute("label");
+            return;
+        }
+        this.setAttribute("label", value);
+    }
+    get tools() {
+        return this.parseJsonAttribute("tools", []);
+    }
+    set tools(value) {
+        this.setAttribute("tools", JSON.stringify(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 },
+        }));
+    }
+    emitToolSelected(tool) {
+        this.activeToolId = tool.id;
+        this.dispatchEvent(new CustomEvent("tool-selected", {
+            bubbles: true,
+            composed: true,
+            detail: tool,
+        }));
+    }
+    emitColorSelected(color) {
+        this.currentColor = color.value;
+        this.dispatchEvent(new CustomEvent("color-selected", {
+            bubbles: true,
+            composed: true,
+            detail: color,
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const toolMarkup = this.tools.length
+            ? this.tools
+                .map(tool => {
+                const isActive = tool.id === this.activeToolId;
+                return `
+              <button
+                type="button"
+                part="tool"
+                data-tool-id="${escapeHtml(tool.id)}"
+                ${tool.disabled ? "disabled" : ""}
+                aria-pressed="${isActive ? "true" : "false"}"
+              >
+                <span part="tool-icon">${escapeHtml(tool.icon ?? "")}</span>
+                <span part="tool-label">${escapeHtml(tool.label)}</span>
+              </button>
+            `;
+            })
+                .join("")
+            : `<div part="empty">No annotation tools configured.</div>`;
+        const colorMarkup = this.colorOptions.length
+            ? this.colorOptions
+                .map(color => {
+                const selected = color.value === this.currentColor;
+                return `
+              <button
+                type="button"
+                part="color"
+                data-color-id="${escapeHtml(color.id)}"
+                data-color-value="${escapeHtml(color.value)}"
+                aria-pressed="${selected ? "true" : "false"}"
+                aria-label="${escapeHtml(color.label)}"
+                title="${escapeHtml(color.label)}"
+                style="--annotation-color:${escapeHtml(color.value)};"
+              >
+                <span part="color-swatch"></span>
+              </button>
+            `;
+            })
+                .join("")
+            : `<div part="empty">No colors configured.</div>`;
+        const actionMarkup = this.actions.length
+            ? 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("")
+            : "";
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <article part="toolbar">
+        <div part="header">${escapeHtml(this.label)}</div>
+        <div part="body">
+          <section part="section">
+            <div part="section-title">Tools</div>
+            <div part="tools" role="toolbar" aria-label="${escapeHtml(this.label)} tools">
+              ${toolMarkup}
+            </div>
+          </section>
+          <section part="section">
+            <div part="section-title">Colors</div>
+            <div part="colors" role="toolbar" aria-label="${escapeHtml(this.label)} colors">
+              ${colorMarkup}
+            </div>
+          </section>
+          ${actionMarkup
+            ? `
+              <section part="section">
+                <div part="section-title">Actions</div>
+                <div part="actions">
+                  ${actionMarkup}
+                </div>
+              </section>
+            `
+            : ""}
+        </div>
+      </article>
+    `;
+        this.shadowRoot.querySelectorAll('[part="tool"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const toolId = button.getAttribute("data-tool-id");
+                const tool = this.tools.find(item => item.id === toolId);
+                if (tool && !tool.disabled) {
+                    this.emitToolSelected(tool);
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="color"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const colorId = button.getAttribute("data-color-id");
+                const color = this.colorOptions.find(item => item.id === colorId);
+                if (color) {
+                    this.emitColorSelected(color);
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const actionId = button.getAttribute("data-action-id");
+                if (actionId) {
+                    this.emitAction(actionId);
+                }
+            });
+        });
+        const bindToolbar = (selector) => {
+            const toolbar = this.shadowRoot?.querySelector(selector);
+            if (!toolbar) {
+                return;
+            }
+            const buttons = Array.from(toolbar.querySelectorAll("button")).filter(button => !button.disabled);
+            applyRovingTabindex(buttons, 0);
+            toolbar.addEventListener("keydown", event => {
+                handleRovingKeydown(event, buttons, { orientation: "horizontal" });
+            });
+        };
+        bindToolbar('[part="tools"]');
+        bindToolbar('[part="colors"]');
+    }
+}
+export const defineBoxAnnotationToolbarElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxAnnotationToolbarElement);
+    return BoxAnnotationToolbarElement;
+};

package/dist/patterns/preview/content-preview-adapter.d.ts

@@ -0,0 +1,13 @@
+import { type PreviewAdapterState, type PreviewProvider, type PreviewProviderActionDetail, type StaticPreviewProviderAdapter } from "./provider-adapter.js";
+export type ContentPreviewAdapterConfig = {
+    onAction?: (detail: PreviewProviderActionDetail) => void | Promise<void>;
+    onMount?: (container: HTMLElement) => void;
+    onUnmount?: () => void;
+    provider?: Partial<PreviewProvider>;
+    state?: PreviewAdapterState | null;
+};
+export type ContentPreviewAdapter = StaticPreviewProviderAdapter & {
+    mount: (container: HTMLElement) => void;
+    unmount: () => void;
+};
+export declare const createContentPreviewAdapter: (config?: ContentPreviewAdapterConfig) => ContentPreviewAdapter;

package/dist/patterns/preview/content-preview-adapter.js

@@ -0,0 +1,30 @@
+import { createStaticPreviewProviderAdapter, } from "./provider-adapter.js";
+export const createContentPreviewAdapter = (config = {}) => {
+    const adapter = createStaticPreviewProviderAdapter({
+        onAction: config.onAction,
+        provider: {
+            id: "box-content-preview",
+            label: "Box Content Preview",
+            engine: "content-preview",
+            capabilities: ["annotations", "comments", "downloads"],
+            ...config.provider,
+        },
+        state: config.state ?? null,
+    });
+    let mountedContainer = null;
+    return {
+        ...adapter,
+        mount(container) {
+            mountedContainer = container;
+            config.onMount?.(container);
+            adapter.setState({
+                ...(adapter.getState() ?? {}),
+                ready: true,
+            });
+        },
+        unmount() {
+            mountedContainer = null;
+            config.onUnmount?.();
+        },
+    };
+};

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

@@ -0,0 +1,6 @@
+export * from "./provider-adapter.js";
+export * from "./content-preview-adapter.js";
+export * from "./annotation-toolbar.js";
+export * from "./annotation-inspector.js";
+export * from "./annotation-thread.js";
+export * from "./preview-element.js";

package/dist/patterns/preview/index.js

@@ -0,0 +1,6 @@
+export * from "./provider-adapter.js";
+export * from "./content-preview-adapter.js";
+export * from "./annotation-toolbar.js";
+export * from "./annotation-inspector.js";
+export * from "./annotation-thread.js";
+export * from "./preview-element.js";

package/dist/patterns/preview/preview-element.d.ts

@@ -0,0 +1,41 @@
+import type { PreviewAdapterState, PreviewProvider, PreviewProviderAdapter } from "./provider-adapter.js";
+import { BaseElement } from "../../core/index.js";
+export type PreviewElementAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+export declare class BoxPreviewElement extends BaseElement {
+    private providerAdapterValue;
+    private providerAdapterUnsubscribe;
+    static get observedAttributes(): string[];
+    get actions(): PreviewElementAction[];
+    set actions(value: PreviewElementAction[]);
+    get adapterState(): PreviewAdapterState | null;
+    set adapterState(value: PreviewAdapterState | null);
+    get itemLabel(): string;
+    set itemLabel(value: string);
+    get message(): string;
+    set message(value: string);
+    get provider(): PreviewProvider | null;
+    set provider(value: PreviewProvider | null);
+    get providerLabel(): string;
+    set providerLabel(value: string);
+    get status(): string;
+    set status(value: string);
+    get heading(): string;
+    set heading(value: string);
+    get providerAdapter(): PreviewProviderAdapter | null;
+    set providerAdapter(value: PreviewProviderAdapter | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private teardownProviderAdapter;
+    private getActiveProvider;
+    private getActiveAdapterState;
+    private emitAction;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxPreviewElement: (tagName?: string) => typeof BoxPreviewElement;