@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/share/permission-matrix.js

@@ -0,0 +1,360 @@
+import { BaseElement } from "../../core/index.js";
+import { boeFocusRingShadow } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-permission-matrix";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const matrixStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="matrix"] {
+    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="table"] {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  [part="table"] th,
+  [part="table"] td {
+    text-align: left;
+    padding: 0.5rem 0.65rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+    vertical-align: top;
+  }
+
+  [part="table"] th {
+    font-size: 0.8rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="subject-name"] {
+    font-weight: 600;
+    color: var(--boe-token-text-text, #1f1e1b);
+  }
+
+  [part="subject-description"] {
+    margin-top: 0.2rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.94rem;
+  }
+
+  [part="subject-type"] {
+    display: inline-flex;
+    margin-top: 0.45rem;
+    padding: 0.25rem 0.5rem;
+    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.78rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  [part="select"] {
+    width: 100%;
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.94rem;
+    font-weight: 600;
+    line-height: 1.3;
+    padding: 0.4rem 2.25rem 0.4rem 0.7rem;
+    cursor: pointer;
+  }
+
+  [part="select-shell"] {
+    position: relative;
+    display: inline-grid;
+    width: min(100%, 13rem);
+    min-width: 10rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 76%, var(--boe-token-surface-surface, #ffffff) 24%);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="select-shell"]:hover {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 28%, var(--boe-token-stroke-stroke, #e8e8e8) 72%);
+    background: var(--boe-token-surface-surface, #ffffff);
+  }
+
+  [part="select"]:focus {
+    outline: none;
+  }
+
+  [part="select"]:focus-visible + [part="select-icon"],
+  [part="select-shell"]:has([part="select"]:focus-visible) {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 46%, var(--boe-token-stroke-stroke, #e8e8e8) 54%);
+    box-shadow: ${boeFocusRingShadow};
+  }
+
+  [part="select-shell"]:has([part="select"]:active:not(:disabled)) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 70%, var(--boe-token-surface-surface-secondary, #fbfbfb) 30%);
+  }
+
+  [part="select"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  [part="select-shell"]:has([part="select"]:disabled) {
+    cursor: not-allowed;
+    opacity: 0.55;
+    box-shadow: none;
+  }
+
+  [part="select-icon"] {
+    position: absolute;
+    right: 0.9rem;
+    top: 50%;
+    width: 0.85rem;
+    height: 0.85rem;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="select-icon"]::before,
+  [part="select-icon"]::after {
+    content: "";
+    position: absolute;
+    top: 0.32rem;
+    width: 0.48rem;
+    height: 2px;
+    border-radius: 999px;
+    background: currentColor;
+  }
+
+  [part="select-icon"]::before {
+    left: 0.02rem;
+    transform: rotate(40deg);
+  }
+
+  [part="select-icon"]::after {
+    right: 0.02rem;
+    transform: rotate(-40deg);
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+export class BoxPermissionMatrixElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "options", "subjects", "value"];
+    }
+    labelEl;
+    tbodyEl;
+    structureSignature = "";
+    syncingFromUi = false;
+    get label() {
+        return this.getAttribute("label") ?? "Permission Matrix";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get options() {
+        return this.parseJsonAttribute("options", []);
+    }
+    set options(value) {
+        this.setAttribute("options", JSON.stringify(value));
+    }
+    get subjects() {
+        return this.parseJsonAttribute("subjects", []);
+    }
+    set subjects(value) {
+        this.setAttribute("subjects", JSON.stringify(value));
+    }
+    get value() {
+        return this.parseJsonAttribute("value", {});
+    }
+    set value(value) {
+        this.setAttribute("value", JSON.stringify(value));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value" && this.syncingFromUi) {
+            return;
+        }
+        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;
+        }
+    }
+    updateSubjectRole(subjectId, nextValue) {
+        const next = {
+            ...this.value,
+            [subjectId]: nextValue,
+        };
+        this.syncingFromUi = true;
+        this.value = next;
+        this.syncingFromUi = false;
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: next },
+        }));
+        this.dispatchEvent(new CustomEvent("subject-role-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { subjectId, value: nextValue },
+        }));
+    }
+    structureKey() {
+        return JSON.stringify({
+            options: this.options,
+            subjects: this.subjects,
+        });
+    }
+    renderRows() {
+        const options = this.options;
+        const subjects = this.subjects;
+        const currentValue = this.value;
+        return subjects
+            .map(subject => `
+          <tr data-subject-id="${escapeHtml(subject.id)}">
+            <td>
+              <div part="subject-name">${escapeHtml(subject.name)}</div>
+              ${subject.description ? `<div part="subject-description">${escapeHtml(subject.description)}</div>` : ""}
+              ${subject.type ? `<div part="subject-type">${escapeHtml(subject.type)}</div>` : ""}
+            </td>
+            <td>
+              <label>
+                <span class="sr-only">Access for ${escapeHtml(subject.name)}</span>
+                <span part="select-shell">
+                  <select part="select" data-subject-id="${escapeHtml(subject.id)}">
+                    ${options
+            .map(option => `
+                          <option value="${escapeHtml(option.value)}" ${currentValue[subject.id] === option.value ? "selected" : ""}>
+                            ${escapeHtml(option.label)}
+                          </option>
+                        `)
+            .join("")}
+                  </select>
+                  <span part="select-icon" aria-hidden="true"></span>
+                </span>
+              </label>
+            </td>
+          </tr>
+        `)
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${matrixStyles}</style>
+      <section part="matrix">
+        <div part="label"></div>
+        <table part="table">
+          <thead>
+            <tr>
+              <th scope="col">Subject</th>
+              <th scope="col">Access</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </section>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.tbodyEl = this.shadowRoot.querySelector("tbody");
+    }
+    setupListeners() {
+        this.tbodyEl.addEventListener("change", event => {
+            const select = event.target;
+            if (select.getAttribute("part") !== "select") {
+                return;
+            }
+            const subjectId = select.dataset.subjectId;
+            if (!subjectId) {
+                return;
+            }
+            this.updateSubjectRole(subjectId, select.value);
+        });
+    }
+    update() {
+        if (!this.labelEl || !this.tbodyEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        const nextSignature = this.structureKey();
+        if (nextSignature !== this.structureSignature) {
+            this.structureSignature = nextSignature;
+            this.tbodyEl.innerHTML = this.renderRows();
+            return;
+        }
+        // Preserve select elements; only patch selected values.
+        const currentValue = this.value;
+        this.tbodyEl.querySelectorAll("[data-subject-id]").forEach(select => {
+            const subjectId = select.dataset.subjectId;
+            if (!subjectId) {
+                return;
+            }
+            const next = currentValue[subjectId] ?? "";
+            if (select !== this.shadowRoot?.activeElement && select.value !== next) {
+                select.value = next;
+            }
+        });
+    }
+}
+export const defineBoxPermissionMatrixElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPermissionMatrixElement);
+    return BoxPermissionMatrixElement;
+};

package/dist/patterns/share/presence-contracts.d.ts

@@ -0,0 +1,26 @@
+import type { Unsubscribe } from "../../core/index.js";
+/**
+ * One person currently present on an item. `activity` distinguishes passive
+ * viewers from active editors; `initials`/`src` drive the avatar rendering.
+ */
+export interface PresenceUser {
+    id: string;
+    name: string;
+    initials?: string;
+    src?: string;
+    activity?: "viewing" | "editing";
+}
+/** The controller's observable state: whether the live feed is connected and who is present. */
+export interface PresenceState {
+    connected: boolean;
+    users: PresenceUser[];
+}
+/**
+ * The live-presence data source. `subscribe` registers a listener for the
+ * current roster and every subsequent change, returning an unsubscribe handle.
+ * The workflow owns the subscription lifecycle; the transport owns delivery
+ * (websocket, polling, SSE — the contract is neutral).
+ */
+export interface PresenceTransport {
+    subscribe(listener: (users: PresenceUser[]) => void): Unsubscribe;
+}

package/dist/patterns/share/presence-contracts.js

@@ -0,0 +1 @@
+export {};

package/dist/patterns/share/presence-controller.d.ts

@@ -0,0 +1,31 @@
+import { Controller } from "../../core/index.js";
+import type { PresenceState, PresenceTransport, PresenceUser } from "./presence-contracts.js";
+export interface PresenceControllerConfig {
+    transport: PresenceTransport;
+    initialUsers?: PresenceUser[];
+}
+type PresenceEvents = {
+    presenceChanged: {
+        users: PresenceUser[];
+    };
+    connected: undefined;
+    disconnected: undefined;
+};
+/**
+ * Headless controller for a live presence feed. `connect` opens the transport
+ * subscription and mirrors every roster update into state, emitting
+ * `presenceChanged`; `disconnect` tears the subscription down. It owns the
+ * subscription lifecycle so the presentation layer (e.g. `box-presence`) only
+ * has to render `users` and re-render on the event.
+ */
+export declare class PresenceController extends Controller<PresenceState, PresenceEvents> {
+    private readonly config;
+    private unsubscribe;
+    constructor(config: PresenceControllerConfig);
+    get users(): PresenceUser[];
+    get connected(): boolean;
+    connect(): void;
+    disconnect(): void;
+    destroy(): void;
+}
+export {};

package/dist/patterns/share/presence-controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "../../core/index.js";
+/**
+ * Headless controller for a live presence feed. `connect` opens the transport
+ * subscription and mirrors every roster update into state, emitting
+ * `presenceChanged`; `disconnect` tears the subscription down. It owns the
+ * subscription lifecycle so the presentation layer (e.g. `box-presence`) only
+ * has to render `users` and re-render on the event.
+ */
+export class PresenceController extends Controller {
+    config;
+    unsubscribe = null;
+    constructor(config) {
+        super({ connected: false, users: config.initialUsers ?? [] });
+        this.config = config;
+    }
+    get users() {
+        return this.state.users;
+    }
+    get connected() {
+        return this.state.connected;
+    }
+    connect() {
+        if (this.state.connected) {
+            return;
+        }
+        this.unsubscribe = this.config.transport.subscribe(users => {
+            this.setState({ ...this.state, users });
+            this.emit("presenceChanged", { users });
+        });
+        this.setState({ ...this.state, connected: true });
+        this.emit("connected", undefined);
+    }
+    disconnect() {
+        if (!this.state.connected) {
+            return;
+        }
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        this.setState({ ...this.state, connected: false });
+        this.emit("disconnected", undefined);
+    }
+    destroy() {
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        super.destroy();
+    }
+}

package/dist/patterns/share/presence.d.ts

@@ -0,0 +1,32 @@
+import type { PresenceTransport, PresenceUser } from "./presence-contracts.js";
+import { BaseElement } from "../../core/index.js";
+/**
+ * The live-presence surface: an avatar pile of who is currently on an item, kept
+ * in sync with a live feed. Drive it either by setting a `transport` (the
+ * element owns a `PresenceController`, connects it, and re-renders on every
+ * update) or by injecting a static `users` array. A polite live region
+ * announces roster changes. Pair the transport with your realtime backend.
+ */
+export declare class BoxPresenceElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private controller;
+    private transportValue;
+    private usersValue;
+    private controllerUnsubscribe;
+    get transport(): PresenceTransport | null;
+    set transport(value: PresenceTransport | null);
+    get users(): PresenceUser[];
+    set users(value: PresenceUser[]);
+    get label(): string;
+    set label(value: string);
+    get max(): number;
+    set max(value: number);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private refresh;
+    private startController;
+    private teardownController;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxPresenceElement: (tagName?: string) => typeof BoxPresenceElement;