@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/share/presence.js

@@ -0,0 +1,255 @@
+import { PresenceController } from "./presence-controller.js";
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-presence";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const initialsFromName = (name) => name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map(segment => segment[0] ?? "")
+    .join("")
+    .toUpperCase();
+const summarize = (users) => {
+    if (!users.length) {
+        return "No one else here";
+    }
+    const editing = users.filter(user => user.activity === "editing").length;
+    const people = users.length === 1 ? "1 person" : `${users.length} people`;
+    return editing ? `${people} here · ${editing} editing` : `${people} here`;
+};
+/**
+ * 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 class BoxPresenceElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "max"];
+    }
+    controller = null;
+    transportValue = null;
+    usersValue = [];
+    controllerUnsubscribe = null;
+    get transport() {
+        return this.transportValue;
+    }
+    set transport(value) {
+        if (this.transportValue === value) {
+            return;
+        }
+        this.transportValue = value;
+        this.startController();
+    }
+    get users() {
+        return this.controller ? this.controller.users : [...this.usersValue];
+    }
+    set users(value) {
+        this.usersValue = [...value];
+        if (!this.controller && this.isRendered) {
+            this.update();
+        }
+    }
+    get label() {
+        return this.getAttribute("label")?.trim() || "Presence";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        const raw = Number(this.getAttribute("max") ?? "5");
+        if (!Number.isFinite(raw) || raw < 1) {
+            return 5;
+        }
+        return Math.floor(raw);
+    }
+    set max(value) {
+        this.setAttribute("max", String(value));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.startController();
+    }
+    disconnectedCallback() {
+        this.teardownController();
+    }
+    refresh() {
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    startController() {
+        this.teardownController();
+        // Only open a subscription once the element is in the DOM, so setting a
+        // transport before insertion (or on a never-inserted element) cannot leak.
+        if (!this.isConnected || !this.transportValue) {
+            this.refresh();
+            return;
+        }
+        this.controller = new PresenceController({
+            transport: this.transportValue,
+            initialUsers: this.usersValue,
+        });
+        this.controllerUnsubscribe = this.controller.subscribe("presenceChanged", () => this.refresh());
+        this.controller.connect();
+        this.refresh();
+    }
+    teardownController() {
+        if (this.controller) {
+            // Preserve the last live roster so a reconnect renders it immediately,
+            // before the transport delivers its first update.
+            this.usersValue = this.controller.users;
+        }
+        this.controllerUnsubscribe?.();
+        this.controllerUnsubscribe = null;
+        this.controller?.destroy();
+        this.controller = null;
+    }
+    // Build the shadow structure once. Keeping the [part="summary"] aria-live node
+    // stable across roster updates lets assistive tech announce the change rather
+    // than treat the replaced node as fresh, static content.
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="presence"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.6rem;
+        }
+
+        [part="stack"] {
+          display: inline-flex;
+          align-items: center;
+        }
+
+        [part="stack"][hidden] {
+          display: none;
+        }
+
+        [part="avatar"],
+        [part="overflow"] {
+          position: relative;
+          display: inline-grid;
+          place-items: center;
+          inline-size: 2rem;
+          block-size: 2rem;
+          margin-inline-start: -0.5rem;
+          overflow: visible;
+          border: 2px solid var(--boe-token-surface-surface, #ffffff);
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+          color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 72%, var(--boe-token-text-text, #222222));
+          font-size: 0.76rem;
+          font-weight: 700;
+        }
+
+        [part="stack"] > :first-child {
+          margin-inline-start: 0;
+        }
+
+        [part="avatar"] [part="avatar-image"] {
+          inline-size: 100%;
+          block-size: 100%;
+          border-radius: 999px;
+          object-fit: cover;
+        }
+
+        [part="dot"] {
+          position: absolute;
+          inset-block-end: -1px;
+          inset-inline-end: -1px;
+          inline-size: 0.6rem;
+          block-size: 0.6rem;
+          border: 2px solid var(--boe-token-surface-surface, #ffffff);
+          border-radius: 999px;
+          background: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="dot"][data-activity="viewing"] {
+          background: var(--boe-token-surface-status-surface-success, #26c281);
+        }
+
+        [part="dot"][data-activity="editing"] {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="overflow"] {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 82%, var(--boe-token-surface-surface, #ffffff) 18%);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="summary"] {
+          font-size: 0.84rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+      </style>
+      <div part="presence" role="group">
+        <span part="stack" hidden></span>
+        <span part="summary" aria-live="polite"></span>
+      </div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const presence = this.shadowRoot.querySelector('[part="presence"]');
+        const stack = this.shadowRoot.querySelector('[part="stack"]');
+        const summary = this.shadowRoot.querySelector('[part="summary"]');
+        if (!presence || !stack || !summary) {
+            return;
+        }
+        presence.setAttribute("aria-label", this.label);
+        const users = this.users;
+        const max = this.max;
+        const visible = users.slice(0, max);
+        const overflow = Math.max(0, users.length - visible.length);
+        const avatarsMarkup = visible
+            .map((user, index) => {
+            const initials = user.initials || initialsFromName(user.name) || "?";
+            const inner = user.src
+                ? `<img part="avatar-image" src="${escapeHtml(user.src)}" alt="" />`
+                : escapeHtml(initials);
+            const activity = user.activity === "editing" ? "editing" : "viewing";
+            return `
+          <span
+            part="avatar"
+            role="img"
+            aria-label="${escapeHtml(`${user.name}, ${activity}`)}"
+            data-activity="${activity}"
+            style="z-index:${visible.length - index};"
+          >${inner}<span part="dot" data-activity="${activity}" aria-hidden="true"></span></span>
+        `;
+        })
+            .join("");
+        const overflowMarkup = overflow ? `<span part="overflow">+${overflow}</span>` : "";
+        // Update the pile in place; the summary's aria-live node is never replaced,
+        // only its text, so roster changes are announced.
+        stack.innerHTML = `${avatarsMarkup}${overflowMarkup}`;
+        stack.hidden = users.length === 0;
+        summary.textContent = summarize(users);
+    }
+}
+export const defineBoxPresenceElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPresenceElement);
+    return BoxPresenceElement;
+};

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

@@ -0,0 +1,4 @@
+import type { JsonSchema } from "../../core/json-schema.js";
+export declare const sharedLinkStateSchema: JsonSchema;
+export declare const collaboratorSummarySchema: JsonSchema;
+export declare const shareStateSchema: JsonSchema;

package/dist/patterns/share/schemas.js

@@ -0,0 +1,41 @@
+export const sharedLinkStateSchema = {
+    $id: "box-open-elements/patterns/share/SharedLinkState",
+    type: ["object", "null"],
+    additionalProperties: false,
+    properties: {
+        url: { type: "string" },
+        access: { enum: ["open", "company", "collaborators"] },
+        passwordEnabled: { type: "boolean" },
+        canDownload: { type: "boolean" },
+        canPreview: { type: "boolean" },
+        expiresAt: { type: ["string", "null"] },
+    },
+};
+export const collaboratorSummarySchema = {
+    $id: "box-open-elements/patterns/share/CollaboratorSummary",
+    type: "object",
+    additionalProperties: false,
+    required: ["id", "name", "type", "role"],
+    properties: {
+        id: { type: "string" },
+        name: { type: "string" },
+        type: { enum: ["user", "group", "invite"] },
+        role: { type: "string" },
+        status: { type: "string" },
+    },
+};
+export const shareStateSchema = {
+    $id: "box-open-elements/patterns/share/ShareState",
+    type: "object",
+    additionalProperties: false,
+    required: ["itemId", "itemType", "sharedLink", "collaborators"],
+    properties: {
+        itemId: { type: "string" },
+        itemType: { enum: ["file", "folder"] },
+        sharedLink: sharedLinkStateSchema,
+        collaborators: {
+            type: "array",
+            items: collaboratorSummarySchema,
+        },
+    },
+};

package/dist/patterns/share/share-panel.d.ts

@@ -0,0 +1,75 @@
+import { BaseElement } from "../../core/index.js";
+type SharePanelAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+type SharePanelCollaborator = {
+    description?: string;
+    id?: string;
+    initials?: string;
+    name: string;
+    role: string;
+};
+type SharePanelSetting = {
+    label: string;
+    tone?: string;
+    value: string;
+};
+type SharePanelSharedLink = {
+    access: string;
+    expiresAt?: string;
+    label?: string;
+    status?: string;
+    url: string;
+};
+export declare class BoxSharePanelElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private titleEl;
+    private messageEl;
+    private sharedLinkEl;
+    private sharedLinkLabelEl;
+    private sharedLinkAccessEl;
+    private sharedLinkUrlEl;
+    private sharedLinkStatusEl;
+    private sharedLinkExpiryEl;
+    private settingsSectionEl;
+    private settingsListEl;
+    private collaboratorsSectionEl;
+    private collaboratorListEl;
+    private actionsEl;
+    private settingsSignature;
+    private collaboratorsSignature;
+    private actionsSignature;
+    get actions(): SharePanelAction[];
+    set actions(value: SharePanelAction[]);
+    get collaborators(): SharePanelCollaborator[];
+    set collaborators(value: SharePanelCollaborator[]);
+    get message(): string;
+    set message(value: string);
+    get settings(): SharePanelSetting[];
+    set settings(value: SharePanelSetting[]);
+    get sharedLink(): SharePanelSharedLink | null;
+    set sharedLink(value: SharePanelSharedLink | null);
+    get heading(): string;
+    set heading(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private emitAction;
+    private emitCollaboratorSelected;
+    private settingsKey;
+    private collaboratorsKey;
+    private actionsKey;
+    private rebuildSettings;
+    private patchSettings;
+    private rebuildCollaborators;
+    private patchCollaborators;
+    private rebuildActions;
+    private patchActionLabels;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSharePanelElement: (tagName?: string) => typeof BoxSharePanelElement;
+export {};