@pb33f/cowboy-components 0.12.5 → 0.13.0

package/dist/components/rodeo/statistic.js

@@ -16,7 +16,7 @@ let Statistic = class Statistic extends LitElement {
     }
     render() {
         let val = html `<sl-format-number value="${this.value}"></sl-format-number></span>`;
-        if (!this.value && this.label !== "") {
+        if (this.value == null && this.label !== "") {
             val = html `${this.label}`;
         }
         return html `

package/dist/components/rodeo/user-detail.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/rodeo/user-detail.css.js

@@ -0,0 +1,198 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+        padding: 15px;
+        font-family: var(--font-stack), monospace;
+    }
+
+    .section {
+        margin-bottom: 20px;
+    }
+
+    .section-title {
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--secondary-color);
+        font-family: var(--font-stack-bold), sans-serif;
+        padding-bottom: 6px;
+        border-bottom: 1px dashed var(--secondary-color-dimmer);
+        margin-bottom: 10px;
+    }
+
+    .user-name {
+        font-size: 1.2rem;
+        font-family: var(--font-stack-bold), sans-serif;
+        color: var(--primary-color);
+        margin-bottom: 4px;
+    }
+
+    .user-username {
+        font-size: 0.85rem;
+        color: var(--font-color-sub2);
+        margin-bottom: 10px;
+    }
+
+    .email-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .email-list li {
+        font-size: 0.8rem;
+        padding: 3px 0;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .email-address {
+        color: var(--font-color);
+    }
+
+    .toggle-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 0;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+    }
+
+    .toggle-label {
+        font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .role-badges {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+    }
+
+    .workspace-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .workspace-list li {
+        font-size: 0.8rem;
+        padding: 4px 0;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+    }
+
+    .wallet-balance {
+        font-size: 1.4rem;
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .auth-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0;
+    }
+
+    .auth-header {
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--font-color-sub2);
+        padding: 4px 4px 6px 4px;
+        border-bottom: 1px solid var(--secondary-color-dimmer);
+    }
+
+    .auth-cell {
+        font-size: 0.75rem;
+        padding: 4px;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--font-color-sub2);
+    }
+
+    .name-edit-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .name-edit-row sl-input {
+        flex: 1;
+    }
+
+    .empty-text {
+        font-size: 0.8rem;
+        color: var(--font-color-sub3);
+        font-family: var(--font-stack-italic), sans-serif;
+    }
+
+    .loading-state {
+        padding: 20px 0;
+    }
+
+    sl-switch {
+        --sl-toggle-size-small: 14px;
+    }
+
+    .data-grid {
+        display: grid;
+        gap: 0;
+    }
+
+    .data-grid-3 {
+        grid-template-columns: auto 1fr 1fr;
+    }
+
+    .data-grid-4 {
+        grid-template-columns: auto auto 1fr auto;
+    }
+
+    .data-grid-5 {
+        grid-template-columns: auto auto 1fr auto auto;
+    }
+
+    .meta-cell {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 200px;
+    }
+
+    .tx-id {
+        font-size: 0.65rem;
+        opacity: 0.7;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 120px;
+    }
+
+    .count-badge {
+        font-size: 0.65rem;
+        color: var(--font-color-sub3);
+        font-family: var(--font-stack), monospace;
+    }
+
+    .section-pagination {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 8px;
+        font-size: 0.75rem;
+    }
+
+    .page-info-small {
+        color: var(--font-color-sub2);
+        font-family: var(--font-stack), monospace;
+        font-size: 0.7rem;
+    }
+
+    sl-badge {
+        --sl-badge-font-size: 0.65rem;
+    }
+`;

package/dist/components/rodeo/user-detail.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, TemplateResult } from "lit";
+import { UserDetailResponse, WalletTransactionsResponse, UserEventsResponse, AuditLogResponse } from "../../model/rodeo-user.js";
+export declare class RodeoUserDetail extends LitElement {
+    static styles: import("lit").CSSResult[];
+    userDetail: UserDetailResponse | null;
+    walletTransactions: WalletTransactionsResponse | null;
+    userEvents: UserEventsResponse | null;
+    auditLog: AuditLogResponse | null;
+    loading: boolean;
+    editingName: boolean;
+    editedName: string;
+    private handleActiveToggle;
+    private handleBlockedToggle;
+    private startEditName;
+    private cancelEditName;
+    private saveName;
+    private renderUserInfo;
+    private renderStatusToggles;
+    private renderRoles;
+    private renderWorkspaces;
+    private renderWallet;
+    private renderAuthRecords;
+    private dispatchBubble;
+    private renderWalletTransactions;
+    private renderEvents;
+    private renderAPIKeys;
+    private renderAuditLog;
+    private renderPagination;
+    render(): TemplateResult<1>;
+}

package/dist/components/rodeo/user-detail.js

@@ -0,0 +1,436 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { RodeoUserUpdated, RodeoUserBlockToggled, RodeoLoadTransactions, RodeoLoadEvents, RodeoLoadAuditLog, RodeoPageTransactions, RodeoPageEvents, RodeoPageAuditLog } from "../../events/rodeo.js";
+import userDetailCss from "./user-detail.css.js";
+import badgesCss from "../../css/badges.css.js";
+import buttonCss from "../../css/button.css.js";
+import formsCss from "../../css/forms.css.js";
+let RodeoUserDetail = class RodeoUserDetail extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.userDetail = null;
+        this.walletTransactions = null;
+        this.userEvents = null;
+        this.auditLog = null;
+        this.loading = false;
+        this.editingName = false;
+        this.editedName = '';
+    }
+    handleActiveToggle(e) {
+        const target = e.target;
+        const active = target.checked;
+        this.dispatchEvent(new CustomEvent(RodeoUserUpdated, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                userId: this.userDetail?.user?.userId,
+                updates: { active }
+            }
+        }));
+    }
+    handleBlockedToggle(e) {
+        const target = e.target;
+        const blocked = target.checked;
+        this.dispatchEvent(new CustomEvent(RodeoUserBlockToggled, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                userId: this.userDetail?.user?.userId,
+                updates: { blocked }
+            }
+        }));
+    }
+    startEditName() {
+        this.editingName = true;
+        this.editedName = this.userDetail?.user?.name || '';
+    }
+    cancelEditName() {
+        this.editingName = false;
+        this.editedName = '';
+    }
+    saveName() {
+        if (!this.editedName.trim()) {
+            return;
+        }
+        this.editingName = false;
+        this.dispatchEvent(new CustomEvent(RodeoUserUpdated, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                userId: this.userDetail?.user?.userId,
+                updates: { name: this.editedName.trim() }
+            }
+        }));
+    }
+    renderUserInfo() {
+        const user = this.userDetail.user;
+        return html `
+            <div class="section">
+                <div class="section-title">User Information</div>
+                ${this.editingName
+            ? html `
+                        <div class="name-edit-row">
+                            <sl-input size="small"
+                                      value="${this.editedName}"
+                                      @sl-input="${(e) => this.editedName = e.target.value}"
+                                      @keydown="${(e) => { if (e.key === 'Enter')
+                this.saveName(); if (e.key === 'Escape')
+                this.cancelEditName(); }}"
+                            ></sl-input>
+                            <sl-icon-button name="check-lg" label="Save" @click="${this.saveName}"></sl-icon-button>
+                            <sl-icon-button name="x-lg" label="Cancel" @click="${this.cancelEditName}"></sl-icon-button>
+                        </div>
+                    `
+            : html `
+                        <div class="user-name">
+                            ${user.name || 'unnamed'}
+                            <sl-icon-button name="pencil" label="Edit name" @click="${this.startEditName}"></sl-icon-button>
+                        </div>
+                    `}
+                <div class="user-username">@${user.username}</div>
+                ${user.emails && user.emails.length > 0
+            ? html `
+                        <ul class="email-list">
+                            ${user.emails.map(email => html `
+                                <li>
+                                    <span class="email-address">${email.email}</span>
+                                    ${email.primary ? html `<sl-badge class="status-active">primary</sl-badge>` : ''}
+                                    ${email.verified ? html `<sl-badge class="status-active">verified</sl-badge>` : html `<sl-badge class="status-inactive">unverified</sl-badge>`}
+                                </li>
+                            `)}
+                        </ul>
+                    `
+            : html `<span class="empty-text">no emails on record</span>`}
+            </div>
+        `;
+    }
+    renderStatusToggles() {
+        const user = this.userDetail.user;
+        return html `
+            <div class="section">
+                <div class="section-title">Status</div>
+                <div class="toggle-row">
+                    <span class="toggle-label">Active</span>
+                    <sl-switch size="small"
+                               ?checked="${user.active}"
+                               @sl-change="${this.handleActiveToggle}"></sl-switch>
+                </div>
+                <div class="toggle-row">
+                    <span class="toggle-label">Blocked</span>
+                    <sl-switch size="small"
+                               ?checked="${user.blocked}"
+                               @sl-change="${this.handleBlockedToggle}"></sl-switch>
+                </div>
+            </div>
+        `;
+    }
+    renderRoles() {
+        const user = this.userDetail.user;
+        return html `
+            <div class="section">
+                <div class="section-title">Roles</div>
+                ${user.roles && user.roles.length > 0
+            ? html `
+                        <div class="role-badges">
+                            ${user.roles.map(role => html `<sl-badge>${role.name}</sl-badge>`)}
+                        </div>
+                    `
+            : html `<span class="empty-text">no roles assigned</span>`}
+            </div>
+        `;
+    }
+    renderWorkspaces() {
+        const workspaces = this.userDetail.workspaces;
+        return html `
+            <div class="section">
+                <div class="section-title">Workspaces</div>
+                ${workspaces && workspaces.length > 0
+            ? html `
+                        <ul class="workspace-list">
+                            ${workspaces.map(ws => html `
+                                <li>${ws.name || ws.id || 'unnamed workspace'}</li>
+                            `)}
+                        </ul>
+                    `
+            : html `<span class="empty-text">no workspaces</span>`}
+            </div>
+        `;
+    }
+    renderWallet() {
+        const wallet = this.userDetail.wallet;
+        return html `
+            <div class="section">
+                <div class="section-title">Wallet</div>
+                ${wallet
+            ? html `<div class="wallet-balance"><sl-format-number value="${wallet.balance ?? 0}"></sl-format-number> credits</div>`
+            : html `<span class="empty-text">no wallet</span>`}
+            </div>
+        `;
+    }
+    renderAuthRecords() {
+        const records = this.userDetail.authRecords;
+        if (!records || records.length === 0) {
+            return html `
+                <div class="section">
+                    <div class="section-title">Recent Logins</div>
+                    <span class="empty-text">no login records</span>
+                </div>
+            `;
+        }
+        const recentRecords = records.slice(0, 10);
+        return html `
+            <div class="section">
+                <div class="section-title">Recent Logins</div>
+                <div class="auth-grid">
+                    <div class="auth-header">Time</div>
+                    <div class="auth-header">IP Address</div>
+                    ${recentRecords.map(record => html `
+                        <div class="auth-cell">
+                            ${record.createdAt
+            ? html `<sl-relative-time date="${record.createdAt}"></sl-relative-time>`
+            : '--'}
+                        </div>
+                        <div class="auth-cell">${record.ipAddress || '--'}</div>
+                    `)}
+                </div>
+            </div>
+        `;
+    }
+    dispatchBubble(eventName, detail) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            detail
+        }));
+    }
+    renderWalletTransactions() {
+        if (!this.walletTransactions) {
+            return html `
+                <div class="section">
+                    <div class="section-title">Wallet Transactions</div>
+                    <sl-button size="small" class="slim"
+                               @click="${() => this.dispatchBubble(RodeoLoadTransactions)}">
+                        Show Transactions
+                    </sl-button>
+                </div>
+            `;
+        }
+        const txns = this.walletTransactions.transactions || [];
+        const { total, limit, offset } = this.walletTransactions;
+        return html `
+            <div class="section">
+                <div class="section-title">Wallet Transactions <span class="count-badge">${total}</span></div>
+                ${txns.length === 0
+            ? html `<span class="empty-text">no transactions</span>`
+            : html `
+                        <div class="data-grid data-grid-4">
+                            <div class="auth-header">Time</div>
+                            <div class="auth-header">Type</div>
+                            <div class="auth-header">Amount</div>
+                            <div class="auth-header">Transaction ID</div>
+                            ${txns.map(tx => html `
+                                <div class="auth-cell">
+                                    <sl-relative-time date="${tx.createdAt}"></sl-relative-time>
+                                </div>
+                                <div class="auth-cell">
+                                    ${tx.type === 0
+                ? html `<sl-badge variant="success">credit</sl-badge>`
+                : html `<sl-badge variant="danger">debit</sl-badge>`}
+                                </div>
+                                <div class="auth-cell">${tx.type === 0 ? tx.creditAmount : tx.debitAmount}</div>
+                                <div class="auth-cell tx-id">${tx.transactionId}</div>
+                            `)}
+                        </div>
+                        ${this.renderPagination(total, limit, offset, RodeoPageTransactions)}
+                    `}
+            </div>
+        `;
+    }
+    renderEvents() {
+        if (!this.userEvents) {
+            return html `
+                <div class="section">
+                    <div class="section-title">Platform Events</div>
+                    <sl-button size="small" class="slim"
+                               @click="${() => this.dispatchBubble(RodeoLoadEvents)}">
+                        Show Events
+                    </sl-button>
+                </div>
+            `;
+        }
+        const events = this.userEvents.events || [];
+        const { total, limit, offset } = this.userEvents;
+        return html `
+            <div class="section">
+                <div class="section-title">Platform Events <span class="count-badge">${total}</span></div>
+                ${events.length === 0
+            ? html `<span class="empty-text">no events</span>`
+            : html `
+                        <div class="data-grid data-grid-3">
+                            <div class="auth-header">Time</div>
+                            <div class="auth-header">Event</div>
+                            <div class="auth-header">Metadata</div>
+                            ${events.map(evt => html `
+                                <div class="auth-cell">
+                                    <sl-relative-time date="${evt.createdAt}"></sl-relative-time>
+                                </div>
+                                <div class="auth-cell"><sl-badge>${evt.name}</sl-badge></div>
+                                <div class="auth-cell meta-cell">${evt.metaData ? JSON.stringify(evt.metaData).substring(0, 80) : '--'}</div>
+                            `)}
+                        </div>
+                        ${this.renderPagination(total, limit, offset, RodeoPageEvents)}
+                    `}
+            </div>
+        `;
+    }
+    renderAPIKeys() {
+        const keys = this.userDetail?.apiKeys;
+        if (!keys || keys.length === 0) {
+            return html `
+                <div class="section">
+                    <div class="section-title">API Keys</div>
+                    <span class="empty-text">no API keys</span>
+                </div>
+            `;
+        }
+        return html `
+            <div class="section">
+                <div class="section-title">API Keys <span class="count-badge">${keys.length}</span></div>
+                <div class="data-grid data-grid-4">
+                    <div class="auth-header">Name</div>
+                    <div class="auth-header">Role</div>
+                    <div class="auth-header">Status</div>
+                    <div class="auth-header">Last Used</div>
+                    ${keys.map((key) => html `
+                        <div class="auth-cell">${key.name || key.keyPrefix || '--'}</div>
+                        <div class="auth-cell"><sl-badge>${key.role || '--'}</sl-badge></div>
+                        <div class="auth-cell">
+                            ${key.status === 'active'
+            ? html `<sl-badge variant="success">active</sl-badge>`
+            : html `<sl-badge variant="danger">${key.status}</sl-badge>`}
+                        </div>
+                        <div class="auth-cell">
+                            ${key.lastUsed
+            ? html `<sl-relative-time date="${key.lastUsed}"></sl-relative-time>`
+            : '--'}
+                        </div>
+                    `)}
+                </div>
+            </div>
+        `;
+    }
+    renderAuditLog() {
+        if (!this.auditLog) {
+            return html `
+                <div class="section">
+                    <div class="section-title">API Audit Log</div>
+                    <sl-button size="small" class="slim"
+                               @click="${() => this.dispatchBubble(RodeoLoadAuditLog)}">
+                        Show Audit Log
+                    </sl-button>
+                </div>
+            `;
+        }
+        const entries = this.auditLog.entries || [];
+        const { total, limit, offset } = this.auditLog;
+        return html `
+            <div class="section">
+                <div class="section-title">API Audit Log <span class="count-badge">${total}</span></div>
+                ${entries.length === 0
+            ? html `<span class="empty-text">no audit entries</span>`
+            : html `
+                        <div class="data-grid data-grid-5">
+                            <div class="auth-header">Time</div>
+                            <div class="auth-header">Method</div>
+                            <div class="auth-header">Path</div>
+                            <div class="auth-header">Status</div>
+                            <div class="auth-header">Auth</div>
+                            ${entries.map(entry => html `
+                                <div class="auth-cell">
+                                    <sl-relative-time date="${entry.createdAt}"></sl-relative-time>
+                                </div>
+                                <div class="auth-cell"><sl-badge>${entry.method}</sl-badge></div>
+                                <div class="auth-cell meta-cell">${entry.path}</div>
+                                <div class="auth-cell">${entry.statusCode}</div>
+                                <div class="auth-cell"><sl-badge variant="${entry.authMethod === 'apikey' ? 'warning' : 'neutral'}">${entry.authMethod}</sl-badge></div>
+                            `)}
+                        </div>
+                        ${this.renderPagination(total, limit, offset, RodeoPageAuditLog)}
+                    `}
+            </div>
+        `;
+    }
+    renderPagination(total, limit, offset, pageEvent) {
+        if (total <= limit)
+            return html ``;
+        const currentPage = Math.floor(offset / limit) + 1;
+        const totalPages = Math.ceil(total / limit);
+        const canPrev = offset > 0;
+        const canNext = offset + limit < total;
+        return html `
+            <div class="section-pagination">
+                <sl-button size="small" class="slim" ?disabled="${!canPrev}"
+                           @click="${() => this.dispatchBubble(pageEvent, { offset: offset - limit })}">Prev</sl-button>
+                <span class="page-info-small">${currentPage} / ${totalPages}</span>
+                <sl-button size="small" class="slim" ?disabled="${!canNext}"
+                           @click="${() => this.dispatchBubble(pageEvent, { offset: offset + limit })}">Next</sl-button>
+            </div>
+        `;
+    }
+    render() {
+        if (this.loading) {
+            return html `
+                <div class="loading-state">
+                    <pb33f-indeterminate-loader></pb33f-indeterminate-loader>
+                </div>
+            `;
+        }
+        if (!this.userDetail) {
+            return html `<span class="empty-text">no user selected</span>`;
+        }
+        return html `
+            ${this.renderUserInfo()}
+            ${this.renderStatusToggles()}
+            ${this.renderRoles()}
+            ${this.renderWorkspaces()}
+            ${this.renderWallet()}
+            ${this.renderAuthRecords()}
+            ${this.renderWalletTransactions()}
+            ${this.renderEvents()}
+            ${this.renderAPIKeys()}
+            ${this.renderAuditLog()}
+        `;
+    }
+};
+RodeoUserDetail.styles = [userDetailCss, badgesCss, buttonCss, formsCss];
+__decorate([
+    property({ type: Object })
+], RodeoUserDetail.prototype, "userDetail", void 0);
+__decorate([
+    property({ type: Object })
+], RodeoUserDetail.prototype, "walletTransactions", void 0);
+__decorate([
+    property({ type: Object })
+], RodeoUserDetail.prototype, "userEvents", void 0);
+__decorate([
+    property({ type: Object })
+], RodeoUserDetail.prototype, "auditLog", void 0);
+__decorate([
+    state()
+], RodeoUserDetail.prototype, "loading", void 0);
+__decorate([
+    state()
+], RodeoUserDetail.prototype, "editingName", void 0);
+__decorate([
+    state()
+], RodeoUserDetail.prototype, "editedName", void 0);
+RodeoUserDetail = __decorate([
+    customElement("pb33f-rodeo-user-detail")
+], RodeoUserDetail);
+export { RodeoUserDetail };

package/dist/components/rodeo/user-list.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;