@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/preview/preview-element.js

@@ -0,0 +1,429 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-preview-element";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+          --_obp-surface: var(--boe-token-surface-surface, #ffffff);
+          --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
+          --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          --_obp-border-subtle: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 52%, transparent);
+          --_obp-text-muted: var(--boe-token-text-text-secondary, #6f6f6f);
+          --_obp-brand: var(--boe-token-surface-surface-brand, #0061d5);
+          --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+        }
+
+        [part="shell"] {
+          display: grid;
+          gap: 0.6rem;
+          padding: ${boePanel.padding};
+          border: 1px solid var(--_obp-border);
+          border-radius: ${boePanel.radius};
+          background: var(--_obp-surface-muted);
+        }
+
+        [part="topline"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.5rem;
+          justify-content: space-between;
+        }
+
+        [part="topline-meta"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.45rem;
+        }
+
+        [part="provider"],
+        [part="status"] {
+          display: inline-flex;
+          padding: 0.18rem 0.48rem;
+          border-radius: 999px;
+          background: var(--_obp-brand-soft);
+          color: var(--_obp-text-muted);
+          font-size: 0.75rem;
+          font-weight: 700;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+        }
+
+        [part="adapter-meta"],
+        [part="capabilities"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.45rem;
+        }
+
+        [part="adapter-chip"],
+        [part="capability"] {
+          display: inline-flex;
+          padding: 0.18rem 0.48rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--_obp-surface) 80%, transparent);
+          border: 1px solid var(--_obp-border-subtle);
+          color: var(--_obp-text-muted);
+          font-size: 0.75rem;
+        }
+
+        [part="header"] {
+          display: grid;
+          gap: 0.35rem;
+        }
+
+        [part="title"] {
+          margin: 0;
+          font: inherit;
+          font-size: 1.1rem;
+          font-weight: 700;
+          color: inherit;
+        }
+
+        [part="item-label"] {
+          color: var(--_obp-text-muted);
+          font-weight: 700;
+        }
+
+        [part="message"] {
+          color: var(--_obp-text-muted);
+          line-height: 1.55;
+        }
+
+        [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 var(--_obp-border-subtle);
+          border-radius: 999px;
+          background: var(--_obp-surface);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+        }
+
+        [part="action"][data-tone="primary"] {
+          border-color: transparent;
+          background: var(--_obp-brand);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+
+        [part="toolbar"] {
+          display: block;
+        }
+
+        [part="workspace"] {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
+          gap: 0.6rem;
+          align-items: start;
+        }
+
+        [part="stage"] {
+          min-block-size: 13rem;
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: ${boePanel.radius};
+          background: var(--_obp-surface);
+          overflow: hidden;
+        }
+
+        [part="sidebar"] {
+          display: grid;
+          gap: 0.6rem;
+        }
+
+        ::slotted([slot="toolbar"]) {
+          display: block;
+        }
+
+        ::slotted([slot="stage"]) {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+
+        ::slotted([slot="sidebar"]) {
+          display: block;
+        }
+
+        @media (max-width: 860px) {
+          [part="workspace"] {
+            grid-template-columns: 1fr;
+          }
+        }
+      `;
+export class BoxPreviewElement extends BaseElement {
+    providerAdapterValue = null;
+    providerAdapterUnsubscribe = null;
+    static get observedAttributes() {
+        return ["actions", "adapter-state", "item-label", "message", "provider", "provider-label", "status", "heading"];
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get adapterState() {
+        return this.parseJsonAttribute("adapter-state", null);
+    }
+    set adapterState(value) {
+        if (!value) {
+            this.removeAttribute("adapter-state");
+            return;
+        }
+        this.setAttribute("adapter-state", JSON.stringify(value));
+    }
+    get itemLabel() {
+        return this.getAttribute("item-label") ?? "";
+    }
+    set itemLabel(value) {
+        if (!value) {
+            this.removeAttribute("item-label");
+            return;
+        }
+        this.setAttribute("item-label", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        if (!value) {
+            this.removeAttribute("message");
+            return;
+        }
+        this.setAttribute("message", value);
+    }
+    get provider() {
+        return this.parseJsonAttribute("provider", null);
+    }
+    set provider(value) {
+        if (!value) {
+            this.removeAttribute("provider");
+            return;
+        }
+        this.setAttribute("provider", JSON.stringify(value));
+    }
+    get providerLabel() {
+        return this.getAttribute("provider-label") ?? "";
+    }
+    set providerLabel(value) {
+        if (!value) {
+            this.removeAttribute("provider-label");
+            return;
+        }
+        this.setAttribute("provider-label", value);
+    }
+    get status() {
+        return this.getAttribute("status") ?? "";
+    }
+    set status(value) {
+        if (!value) {
+            this.removeAttribute("status");
+            return;
+        }
+        this.setAttribute("status", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Preview Element";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get providerAdapter() {
+        return this.providerAdapterValue;
+    }
+    set providerAdapter(value) {
+        this.teardownProviderAdapter();
+        this.providerAdapterValue = value;
+        if (value?.subscribe) {
+            this.providerAdapterUnsubscribe = value.subscribe(() => {
+                if (this.isRendered) {
+                    this.update();
+                }
+            });
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.teardownProviderAdapter();
+    }
+    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;
+        }
+    }
+    teardownProviderAdapter() {
+        this.providerAdapterUnsubscribe?.();
+        this.providerAdapterUnsubscribe = null;
+    }
+    getActiveProvider() {
+        return this.providerAdapterValue?.getProvider() ?? this.provider;
+    }
+    getActiveAdapterState() {
+        return this.providerAdapterValue?.getState() ?? this.adapterState;
+    }
+    emitAction(actionId) {
+        const provider = this.getActiveProvider();
+        const adapterState = this.getActiveAdapterState();
+        const detail = {
+            action: actionId,
+            adapterState,
+            provider,
+            providerId: provider?.id ?? null,
+        };
+        void this.providerAdapterValue?.performAction?.(detail);
+        this.dispatchEvent(new CustomEvent("action", {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+        this.dispatchEvent(new CustomEvent("provider-action", {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const provider = this.getActiveProvider();
+        const adapterState = this.getActiveAdapterState();
+        const providerLabel = provider?.label ?? this.providerLabel;
+        const providerStatus = provider?.status ?? this.status;
+        const statusMarkup = providerStatus ? `<span part="status">${escapeHtml(providerStatus)}</span>` : "";
+        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
+        const providerMarkup = providerLabel ? `<span part="provider">${escapeHtml(providerLabel)}</span>` : "";
+        const itemMarkup = this.itemLabel ? `<div part="item-label">${escapeHtml(this.itemLabel)}</div>` : "";
+        const adapterMarkup = adapterState
+            ? `
+          <div part="adapter-meta" aria-label="Preview adapter state">
+            ${adapterState.mode ? `<span part="adapter-chip">${escapeHtml(adapterState.mode)}</span>` : ""}
+            ${adapterState.pageLabel ? `<span part="adapter-chip">${escapeHtml(adapterState.pageLabel)}</span>` : ""}
+            ${adapterState.zoomLabel ? `<span part="adapter-chip">${escapeHtml(adapterState.zoomLabel)}</span>` : ""}
+            ${adapterState.selectionLabel ? `<span part="adapter-chip">${escapeHtml(adapterState.selectionLabel)}</span>` : ""}
+            ${adapterState.currentAnnotationId
+                ? `<span part="adapter-chip">${escapeHtml(`Annotation ${adapterState.currentAnnotationId}`)}</span>`
+                : ""}
+            ${typeof adapterState.ready === "boolean"
+                ? `<span part="adapter-chip">${adapterState.ready ? "Ready" : "Connecting"}</span>`
+                : ""}
+          </div>
+        `
+            : "";
+        const capabilityMarkup = provider?.capabilities?.length
+            ? `
+          <div part="capabilities" aria-label="Preview provider capabilities">
+            ${provider.capabilities.map(capability => `<span part="capability">${escapeHtml(capability)}</span>`).join("")}
+          </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 host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <article part="shell">
+        <div part="topline">
+          <div part="topline-meta">
+            ${providerMarkup}
+            ${statusMarkup}
+          </div>
+          ${actionsMarkup}
+        </div>
+        <header part="header">
+          <h2 part="title">${escapeHtml(this.heading)}</h2>
+          ${itemMarkup}
+          ${messageMarkup}
+          ${adapterMarkup}
+          ${capabilityMarkup}
+        </header>
+        <div part="toolbar">
+          <slot name="toolbar"></slot>
+        </div>
+        <div part="workspace">
+          <div part="stage">
+            <slot name="stage"></slot>
+          </div>
+          <aside part="sidebar">
+            <slot name="sidebar"></slot>
+          </aside>
+        </div>
+      </article>
+    `;
+        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const actionId = button.getAttribute("data-action-id");
+                if (actionId) {
+                    this.emitAction(actionId);
+                }
+            });
+        });
+    }
+}
+export const defineBoxPreviewElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPreviewElement);
+    return BoxPreviewElement;
+};

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

@@ -0,0 +1,36 @@
+export type PreviewProvider = {
+    capabilities?: string[];
+    engine?: string;
+    id: string;
+    label: string;
+    status?: string;
+};
+export type PreviewAdapterState = {
+    currentAnnotationId?: string;
+    mode?: string;
+    pageLabel?: string;
+    ready?: boolean;
+    selectionLabel?: string;
+    zoomLabel?: string;
+};
+export type PreviewProviderActionDetail = {
+    action: string;
+    adapterState: PreviewAdapterState | null;
+    provider: PreviewProvider | null;
+    providerId: string | null;
+};
+export type PreviewProviderAdapter = {
+    getProvider: () => PreviewProvider | null;
+    getState: () => PreviewAdapterState | null;
+    performAction?: (detail: PreviewProviderActionDetail) => void | Promise<void>;
+    subscribe?: (listener: () => void) => () => void;
+};
+export type StaticPreviewProviderAdapter = PreviewProviderAdapter & {
+    setProvider: (provider: PreviewProvider | null) => void;
+    setState: (state: PreviewAdapterState | null) => void;
+};
+export declare const createStaticPreviewProviderAdapter: (config: {
+    onAction?: (detail: PreviewProviderActionDetail) => void | Promise<void>;
+    provider?: PreviewProvider | null;
+    state?: PreviewAdapterState | null;
+}) => StaticPreviewProviderAdapter;

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

@@ -0,0 +1,29 @@
+export const createStaticPreviewProviderAdapter = (config) => {
+    let provider = config.provider ?? null;
+    let state = config.state ?? null;
+    const listeners = new Set();
+    const notify = () => {
+        for (const listener of listeners) {
+            listener();
+        }
+    };
+    return {
+        getProvider: () => provider,
+        getState: () => state,
+        performAction: config.onAction,
+        setProvider(nextProvider) {
+            provider = nextProvider;
+            notify();
+        },
+        setState(nextState) {
+            state = nextState;
+            notify();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};

package/dist/patterns/search/filter-bar.d.ts

@@ -0,0 +1,50 @@
+import { BaseElement } from "../../core/index.js";
+type FilterBarOption = {
+    label: string;
+    value: string;
+};
+export declare class BoxFilterBarElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private queryInternal;
+    private sortValueInternal;
+    private viewValueInternal;
+    private filtersInternal;
+    private labelEl;
+    private barEl;
+    private inputEl;
+    private sortEl;
+    private viewEl;
+    private filtersEl;
+    private optionsSignature;
+    get label(): string;
+    set label(value: string);
+    get query(): string;
+    set query(value: string);
+    get sortValue(): string;
+    set sortValue(value: string);
+    get viewValue(): string;
+    set viewValue(value: string);
+    get filters(): string[];
+    set filters(value: string[]);
+    get filterOptions(): FilterBarOption[];
+    set filterOptions(value: FilterBarOption[]);
+    get sortOptions(): FilterBarOption[];
+    set sortOptions(value: FilterBarOption[]);
+    get viewOptions(): FilterBarOption[];
+    set viewOptions(value: FilterBarOption[]);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private syncInternalStateFromAttributes;
+    private parseOptionsAttribute;
+    private getState;
+    private emitValueChanged;
+    private renderOptionList;
+    private optionsKey;
+    private rebuildOptionControls;
+    private patchChips;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxFilterBarElement: (tagName?: string) => typeof BoxFilterBarElement;
+export {};