@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/metadata/metadata-filter-builder.js

@@ -0,0 +1,362 @@
+import { BaseElement } from "../../core/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-metadata-filter-builder";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const DEFAULT_OPERATORS = [
+    { label: "is", value: "is" },
+    { label: "is not", value: "is-not" },
+    { label: "contains", value: "contains" },
+];
+const builderStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="builder"] {
+    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="label"] {
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="rules"] {
+    display: grid;
+    gap: ${boePanel.gap};
+  }
+
+  [part="rule"] {
+    display: grid;
+    grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 0.8fr) minmax(12rem, 1.2fr) auto;
+    gap: ${boePanel.gap};
+    align-items: center;
+  }
+
+  [part="select"],
+  [part="input"] {
+    width: 100%;
+    min-width: 0;
+    padding: 0.45rem 0.7rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: inherit;
+    font: inherit;
+    box-sizing: border-box;
+  }
+
+  [part="add"],
+  [part="remove"] {
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+    border-radius: 999px;
+    padding: 0.4rem 0.7rem;
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  [part="empty"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.5;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="select"]')}
+  ${boeNeutralInteractiveStyles('[part="input"]')}
+  ${boeNeutralInteractiveStyles('[part="add"]')}
+  ${boeNeutralInteractiveStyles('[part="remove"]')}
+
+  [part="add"],
+  [part="add"]:hover:not(:disabled) {
+    width: fit-content;
+    border-color: rgba(0, 97, 213, 0.28);
+    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);
+  }
+
+  @media (max-width: 860px) {
+    [part="rule"] {
+      grid-template-columns: 1fr;
+    }
+  }
+`;
+export class BoxMetadataFilterBuilderElement extends BaseElement {
+    static get observedAttributes() {
+        return ["fields", "label", "rules"];
+    }
+    rulesInternal = [];
+    syncingFromUi = false;
+    labelEl;
+    rulesEl;
+    structureSignature = "";
+    get fields() {
+        return this.parseJsonAttribute("fields", []);
+    }
+    set fields(value) {
+        this.setAttribute("fields", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Metadata Filters";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get rules() {
+        return [...this.rulesInternal];
+    }
+    set rules(value) {
+        this.rulesInternal = [...value];
+        this.setAttribute("rules", JSON.stringify(value));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    connectedCallback() {
+        this.syncRulesFromAttributes();
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "rules" && !this.syncingFromUi) {
+            this.syncRulesFromAttributes();
+        }
+        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;
+        }
+    }
+    syncRulesFromAttributes() {
+        this.rulesInternal = this.parseJsonAttribute("rules", []);
+    }
+    emitValueChanged() {
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: [...this.rulesInternal] },
+        }));
+    }
+    writeRulesAttribute() {
+        this.syncingFromUi = true;
+        this.setAttribute("rules", JSON.stringify(this.rulesInternal));
+        this.syncingFromUi = false;
+    }
+    updateRule(index, patch) {
+        this.rulesInternal = this.rulesInternal.map((rule, ruleIndex) => ruleIndex === index
+            ? {
+                ...rule,
+                ...patch,
+            }
+            : rule);
+        this.writeRulesAttribute();
+        this.emitValueChanged();
+        // Structure-only changes go through add/remove. Field/operator/value edits are
+        // patched in place by update() so the focused control is not remounted.
+    }
+    addRule() {
+        const defaultField = this.fields[0]?.id ?? "";
+        this.rulesInternal = [
+            ...this.rulesInternal,
+            {
+                field: defaultField,
+                operator: DEFAULT_OPERATORS[0].value,
+                value: "",
+            },
+        ];
+        this.writeRulesAttribute();
+        this.dispatchEvent(new CustomEvent("rule-added", { bubbles: true, composed: true, detail: { count: this.rulesInternal.length } }));
+        this.emitValueChanged();
+        this.update();
+    }
+    removeRule(index) {
+        const removedRule = this.rulesInternal[index];
+        this.rulesInternal = this.rulesInternal.filter((_, ruleIndex) => ruleIndex !== index);
+        this.writeRulesAttribute();
+        this.dispatchEvent(new CustomEvent("rule-removed", {
+            bubbles: true,
+            composed: true,
+            detail: { index, rule: removedRule },
+        }));
+        this.emitValueChanged();
+        this.update();
+    }
+    renderFieldOptions(selectedValue) {
+        return this.fields
+            .map(field => `
+          <option value="${escapeHtml(field.id)}" ${field.id === selectedValue ? "selected" : ""}>
+            ${escapeHtml(field.label)}
+          </option>
+        `)
+            .join("");
+    }
+    renderOperatorOptions(selectedValue) {
+        return DEFAULT_OPERATORS
+            .map(operator => `
+          <option value="${escapeHtml(operator.value)}" ${operator.value === selectedValue ? "selected" : ""}>
+            ${escapeHtml(operator.label)}
+          </option>
+        `)
+            .join("");
+    }
+    renderRulesMarkup() {
+        if (!this.rulesInternal.length) {
+            return `<div part="empty">No metadata rules yet.</div>`;
+        }
+        return this.rulesInternal
+            .map((rule, index) => `
+          <div part="rule" data-rule-index="${index}">
+            <select part="select" data-rule-index="${index}" data-control="field">
+              ${this.renderFieldOptions(rule.field)}
+            </select>
+            <select part="select" data-rule-index="${index}" data-control="operator">
+              ${this.renderOperatorOptions(rule.operator)}
+            </select>
+            <input
+              type="text"
+              part="input"
+              data-rule-index="${index}"
+              value="${escapeHtml(rule.value)}"
+              placeholder="Enter metadata value"
+            />
+            <button type="button" part="remove" data-rule-index="${index}">Remove</button>
+          </div>
+        `)
+            .join("");
+    }
+    structureKey() {
+        // Field/operator values are patched in place so select changes keep focus.
+        // Only add/remove (and fields catalog changes) are structural rebuilds.
+        return JSON.stringify({
+            fields: this.fields,
+            count: this.rulesInternal.length,
+        });
+    }
+    patchRuleControls(index, active) {
+        const rule = this.rulesInternal[index];
+        if (!rule) {
+            return;
+        }
+        const fieldSelect = this.rulesEl.querySelector(`[data-control="field"][data-rule-index="${index}"]`);
+        const operatorSelect = this.rulesEl.querySelector(`[data-control="operator"][data-rule-index="${index}"]`);
+        // Set values in place — never rebuild option lists here (fields catalog changes
+        // already trigger a structural rebuild via structureKey).
+        if (fieldSelect && fieldSelect !== active && fieldSelect.value !== rule.field) {
+            fieldSelect.value = rule.field;
+        }
+        if (operatorSelect && operatorSelect !== active && operatorSelect.value !== rule.operator) {
+            operatorSelect.value = rule.operator;
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${builderStyles}</style>
+      <section part="builder">
+        <div part="label"></div>
+        <div part="rules"></div>
+        <button type="button" part="add">Add rule</button>
+      </section>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.rulesEl = this.shadowRoot.querySelector('[part="rules"]');
+    }
+    setupListeners() {
+        this.shadowRoot?.querySelector('[part="add"]')?.addEventListener("click", () => {
+            this.addRule();
+        });
+        this.rulesEl.addEventListener("change", event => {
+            const target = event.target;
+            if (target.getAttribute("part") !== "select") {
+                return;
+            }
+            const index = Number.parseInt(target.dataset.ruleIndex ?? "-1", 10);
+            const control = target.dataset.control;
+            if (index < 0) {
+                return;
+            }
+            if (control === "field") {
+                this.updateRule(index, { field: target.value });
+            }
+            else if (control === "operator") {
+                this.updateRule(index, { operator: target.value });
+            }
+        });
+        this.rulesEl.addEventListener("input", event => {
+            const target = event.target;
+            if (target.getAttribute("part") !== "input") {
+                return;
+            }
+            const index = Number.parseInt(target.dataset.ruleIndex ?? "-1", 10);
+            if (index < 0) {
+                return;
+            }
+            this.updateRule(index, { value: target.value });
+        });
+        this.rulesEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="remove"]');
+            if (!button || !this.rulesEl.contains(button)) {
+                return;
+            }
+            const index = Number.parseInt(button.dataset.ruleIndex ?? "-1", 10);
+            if (index < 0) {
+                return;
+            }
+            this.removeRule(index);
+        });
+    }
+    update() {
+        if (!this.labelEl || !this.rulesEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        const nextSignature = this.structureKey();
+        if (nextSignature === this.structureSignature && this.rulesEl.childElementCount > 0) {
+            // Structure unchanged: patch unfocused controls only (external rules setter).
+            const active = this.shadowRoot?.activeElement;
+            this.rulesInternal.forEach((rule, index) => {
+                const input = this.rulesEl.querySelector(`[part="input"][data-rule-index="${index}"]`);
+                if (input && input !== active) {
+                    input.value = rule.value;
+                }
+                this.patchRuleControls(index, active);
+            });
+            return;
+        }
+        this.structureSignature = nextSignature;
+        this.rulesEl.innerHTML = this.renderRulesMarkup();
+    }
+}
+export const defineBoxMetadataFilterBuilderElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxMetadataFilterBuilderElement);
+    return BoxMetadataFilterBuilderElement;
+};

package/dist/patterns/metadata/metadata-inspector.d.ts

@@ -0,0 +1,31 @@
+import { BaseElement } from "../../core/index.js";
+type MetadataInspectorField = {
+    description?: string;
+    label: string;
+    tone?: string;
+    value: string;
+};
+type MetadataInspectorSection = {
+    fields: MetadataInspectorField[];
+    title: string;
+};
+export declare class BoxMetadataInspectorElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get eyebrow(): string;
+    set eyebrow(value: string);
+    get message(): string;
+    set message(value: string);
+    get sections(): MetadataInspectorSection[];
+    set sections(value: MetadataInspectorSection[]);
+    get heading(): string;
+    set heading(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private emitFieldSelected;
+    private renderSections;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxMetadataInspectorElement: (tagName?: string) => typeof BoxMetadataInspectorElement;
+export {};

package/dist/patterns/metadata/metadata-inspector.js

@@ -0,0 +1,245 @@
+import { BaseElement } from "../../core/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boePanel } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-metadata-inspector";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="inspector"] {
+          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.45rem;
+        }
+
+        [part="eyebrow"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="title"] {
+          font-size: 1.1rem;
+          font-weight: 700;
+          line-height: 1.15;
+        }
+
+        [part="message"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.55;
+        }
+
+        [part="section"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="section-title"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="section-fields"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          margin: 0;
+        }
+
+        [part="field"] {
+          display: grid;
+          gap: 0.4rem;
+          width: 100%;
+          text-align: left;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 56%, transparent);
+          border-radius: ${boePanel.radius};
+          padding: 0.55rem 0.65rem;
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="field"]')}
+
+        [part="field-header"] {
+          display: flex;
+          gap: ${boePanel.gap};
+          align-items: start;
+          justify-content: space-between;
+        }
+
+        [part="field-label"] {
+          margin: 0;
+          font-size: 0.84rem;
+          font-weight: 700;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="field-value"] {
+          margin: 0;
+          font-weight: 600;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="field-value"][data-tone="accent"] {
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="field-value"][data-tone="success"] {
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 70%, var(--boe-token-text-text, #222222));
+        }
+
+        [part="field-description"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.5;
+        }
+      `;
+export class BoxMetadataInspectorElement extends BaseElement {
+    static get observedAttributes() {
+        return ["eyebrow", "heading", "message", "sections"];
+    }
+    get eyebrow() {
+        return this.getAttribute("eyebrow") ?? "";
+    }
+    set eyebrow(value) {
+        this.setAttribute("eyebrow", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get sections() {
+        return this.parseJsonAttribute("sections", []);
+    }
+    set sections(value) {
+        this.setAttribute("sections", JSON.stringify(value));
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Metadata 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;
+        }
+    }
+    emitFieldSelected(label, value, section) {
+        this.dispatchEvent(new CustomEvent("field-selected", {
+            bubbles: true,
+            composed: true,
+            detail: { label, section, value },
+        }));
+    }
+    renderSections() {
+        return this.sections
+            .map(section => `
+          <section part="section">
+            <div part="section-title">${escapeHtml(section.title)}</div>
+            <dl part="section-fields">
+              ${section.fields
+            .map(field => `
+                    <button
+                      type="button"
+                      part="field"
+                      data-field-label="${escapeHtml(field.label)}"
+                      data-field-value="${escapeHtml(field.value)}"
+                      data-field-section="${escapeHtml(section.title)}"
+                    >
+                      <div part="field-header">
+                        <dt part="field-label">${escapeHtml(field.label)}</dt>
+                        <dd part="field-value" data-tone="${escapeHtml(field.tone ?? "neutral")}">${escapeHtml(field.value)}</dd>
+                      </div>
+                      ${field.description ? `<div part="field-description">${escapeHtml(field.description)}</div>` : ""}
+                    </button>
+                  `)
+            .join("")}
+            </dl>
+          </section>
+        `)
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const eyebrowMarkup = this.eyebrow ? `<div part="eyebrow">${escapeHtml(this.eyebrow)}</div>` : "";
+        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <section part="inspector">
+        <header part="header">
+          ${eyebrowMarkup}
+          <h2 part="title">${escapeHtml(this.heading)}</h2>
+          ${messageMarkup}
+        </header>
+        ${this.renderSections()}
+      </section>
+    `;
+        this.shadowRoot.querySelectorAll('[part="field"]').forEach(field => {
+            field.addEventListener("click", () => {
+                this.emitFieldSelected(field.dataset.fieldLabel ?? "", field.dataset.fieldValue ?? "", field.dataset.fieldSection ?? "");
+            });
+        });
+    }
+}
+export const defineBoxMetadataInspectorElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxMetadataInspectorElement);
+    return BoxMetadataInspectorElement;
+};

package/dist/patterns/metadata/schemas.d.ts

@@ -0,0 +1,5 @@
+import type { JsonSchema } from "../../core/json-schema.js";
+export declare const metadataFieldDefinitionSchema: JsonSchema;
+export declare const metadataTemplateDefinitionSchema: JsonSchema;
+export declare const metadataInstanceSchema: JsonSchema;
+export declare const metadataPageSchema: JsonSchema;