@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/premium-gate/premium-gate.js

@@ -0,0 +1,336 @@
+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;
+};
+var PremiumGate_1;
+import { LitElement, html } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { styles } from './premium-gate.css.js';
+import { AuthenticationStateChange, CreditStreamUpdated, OpenAuthentication } from '../../events/doctor.js';
+import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '../auth/login-panel.js';
+import dialogCss from "../../css/dialog.css";
+import buttonCss from "../../css/button.css";
+import hrCss from "../../css/hr.css";
+let PremiumGate = PremiumGate_1 = class PremiumGate extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.requireAuth = true;
+        this.requireCredits = 0;
+        this.showDialog = true;
+        this.dialogTitle = 'Premium Feature';
+        this.featureExplanation = 'Jeet Jet?';
+        this.featureName = '';
+        this.showVisualGate = false;
+        this.isAuthenticated = false;
+        this.creditsRemaining = 0;
+        this.showPremiumDialog = false;
+        this.gateReason = null;
+        this.handleAuthChanged = () => {
+            // Re-acquire auth controller in case it changed
+            this.refreshAuthController();
+            this.updateAuthState();
+        };
+        this.handleCreditUpdate = (event) => {
+            const customEvent = event;
+            if (customEvent.detail?.creditsRemaining !== undefined) {
+                this.creditsRemaining = customEvent.detail.creditsRemaining;
+            }
+        };
+        this.handleInterceptedEvent = (event) => {
+            // for keyboard events, only intercept Enter and Space
+            if (event.type === 'keydown') {
+                const keyEvent = event;
+                if (keyEvent.key !== 'Enter' && keyEvent.key !== ' ') {
+                    return;
+                }
+            }
+            // allow dialog interactions
+            if (this.isEventFromDialog(event)) {
+                return;
+            }
+            // check if access should be granted
+            const accessGranted = this.checkAccess();
+            if (!accessGranted) {
+                // stop the event from reaching the child element
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                // show the gate (dialog or inline message)
+                this.triggerGate();
+            }
+        };
+        this.handleDialogClose = () => {
+            if (this.loginPanel) {
+                this.loginPanel.animatebox = false;
+            }
+            this.showPremiumDialog = false;
+        };
+        this.handleBuyCredits = () => {
+            this.showPremiumDialog = false;
+            // for now, just show auth dialog - wallet dialog can be added later
+            this.openAuthentication();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Try to find TheDoctor - first check ancestors, then search entire DOM
+        this.doc = this.closest('pb33f-doctor');
+        if (!this.doc) {
+            // Search the entire DOM for TheDoctor element
+            this.doc = document.querySelector('pb33f-doctor');
+        }
+        this.authController = this.doc?.authController;
+        this.setupAuthListeners();
+        this.updateAuthState();
+        this.setupEventInterception();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventInterception();
+        this.removeAuthListeners();
+    }
+    setupAuthListeners() {
+        window.addEventListener(AuthenticationStateChange, this.handleAuthChanged);
+        window.addEventListener(CreditStreamUpdated, this.handleCreditUpdate);
+    }
+    removeAuthListeners() {
+        window.removeEventListener(AuthenticationStateChange, this.handleAuthChanged);
+        window.removeEventListener(CreditStreamUpdated, this.handleCreditUpdate);
+    }
+    refreshAuthController() {
+        // Try to find TheDoctor - first check ancestors, then search entire DOM
+        this.doc = this.closest('pb33f-doctor');
+        if (!this.doc) {
+            // Search the entire DOM for TheDoctor element
+            this.doc = document.querySelector('pb33f-doctor');
+        }
+        this.authController = this.doc?.authController;
+    }
+    updateAuthState() {
+        if (!this.authController)
+            return;
+        this.isAuthenticated = this.authController.authenticated || false;
+        this.creditsRemaining = this.authController.session?.creditsRemaining || 0;
+    }
+    setupEventInterception() {
+        PremiumGate_1.INTERCEPTED_EVENTS.forEach(eventType => {
+            this.addEventListener(eventType, this.handleInterceptedEvent, true);
+        });
+    }
+    removeEventInterception() {
+        PremiumGate_1.INTERCEPTED_EVENTS.forEach(eventType => {
+            this.removeEventListener(eventType, this.handleInterceptedEvent, true);
+        });
+    }
+    isEventFromDialog(event) {
+        // only check composedPath if dialog is actually shown
+        if (!this.dialog || !this.showPremiumDialog) {
+            return false;
+        }
+        return event.composedPath().includes(this.dialog);
+    }
+    checkAccess() {
+        // Ensure we have the auth controller
+        if (!this.authController) {
+            this.refreshAuthController();
+        }
+        // Check authController directly to avoid stale cached state
+        const isAuthenticated = this.authController?.authenticated || false;
+        const creditsRemaining = this.authController?.session?.creditsRemaining || 0;
+        // Check authentication requirement
+        if (this.requireAuth && !isAuthenticated) {
+            this.gateReason = 'unauthenticated';
+            return false;
+        }
+        // Check credit requirement
+        if (this.requireCredits > 0 && creditsRemaining < this.requireCredits) {
+            this.gateReason = 'no-credits';
+            return false;
+        }
+        this.gateReason = null;
+        return true;
+    }
+    triggerGate() {
+        // Dispatch a custom event for analytics/tracking
+        this.dispatchEvent(new CustomEvent('premium-gate-triggered', {
+            detail: {
+                reason: this.gateReason,
+                featureName: this.featureName,
+                requireCredits: this.requireCredits
+            },
+            bubbles: true,
+            composed: true
+        }));
+        if (this.showDialog) {
+            this.showPremiumDialog = true;
+            // Login panel might not exist yet - it's conditionally rendered
+            if (this.loginPanel) {
+                this.loginPanel.animatebox = true;
+            }
+            // Force update to ensure dialog renders
+            this.requestUpdate();
+        }
+        else {
+            if (this.loginPanel) {
+                this.loginPanel.animatebox = false;
+            }
+        }
+    }
+    openAuthentication() {
+        window.dispatchEvent(new CustomEvent(OpenAuthentication, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // If we don't have an auth controller yet, try to find it again
+        if (!this.authController) {
+            this.refreshAuthController();
+            if (this.authController) {
+                this.updateAuthState();
+            }
+        }
+        // Update visual gate indicator only when relevant properties change
+        if (this.showVisualGate && (changedProperties.has('isAuthenticated') ||
+            changedProperties.has('creditsRemaining') ||
+            changedProperties.has('requireAuth') ||
+            changedProperties.has('requireCredits') ||
+            changedProperties.has('showVisualGate'))) {
+            const hasAccess = this.checkAccess();
+            this.classList.toggle('gated', !hasAccess);
+        }
+    }
+    render() {
+        const hasAccess = this.checkAccess();
+        return html `
+            <div class="gate-wrapper ${!hasAccess && this.showVisualGate ? 'gated' : ''}">
+                <slot></slot>
+
+                ${!hasAccess && !this.showDialog ? html `
+                    <div class="inline-gate-message">
+                        <slot name="inline-message">
+                            <span class="default-inline-message">
+                                <sl-icon name="lock-fill" aria-hidden="true"></sl-icon>
+                                ${this.gateReason === 'unauthenticated'
+            ? 'Login required'
+            : `Requires ${this.requireCredits} credits`}
+                            </span>
+                        </slot>
+                    </div>
+                ` : ''}
+            </div>
+
+            ${this.showDialog ? html `
+            <sl-dialog
+                label="${this.dialogTitle}"
+                ?open="${this.showPremiumDialog}"
+                @sl-hide="${this.handleDialogClose}"
+                class="premium-dialog"
+            >
+                ${this.gateReason === 'unauthenticated' ? html `
+                    <slot name="unauthenticated-message">
+
+                        <h3><sl-icon name="lock" aria-hidden="true"></sl-icon> ${this.featureName}</h3>
+                        <p>${this.featureExplanation}</p>
+                        <hr/>
+                        <pb33f-login-panel
+                            .controller="${this.authController}"
+                            title="authentication required"
+                        ></pb33f-login-panel>
+                    </slot>
+                ` : ''}
+
+                ${this.gateReason === 'no-credits' ? html `
+                    <slot name="no-credit-message">
+                        <div class="default-message">
+                            <sl-icon name="coin" class="message-icon" aria-hidden="true"></sl-icon>
+                            <h3>Credits Required</h3>
+                            <p>This feature requires ${this.requireCredits} credits.</p>
+                            <p class="credit-status">
+                                You have ${this.creditsRemaining} credits remaining.
+                            </p>
+                        </div>
+                    </slot>
+                ` : ''}
+
+                <slot name="upgrade-content"></slot>
+
+                ${this.gateReason === 'unauthenticated' ? html `
+                    <sl-button
+                        slot="footer"
+                        variant="default"
+                        @click="${this.handleDialogClose}"
+                    >
+                        Cancel
+                    </sl-button>
+                ` : html `
+                    <sl-button
+                        slot="footer"
+                        variant="default"
+                        @click="${this.handleDialogClose}"
+                    >
+                        Cancel
+                    </sl-button>
+                    <sl-button
+                        slot="footer"
+                        variant="primary"
+                        @click="${this.handleBuyCredits}"
+                    >
+                        Buy Credits
+                    </sl-button>
+                `}
+            </sl-dialog>
+            ` : ''}
+        `;
+    }
+};
+PremiumGate.styles = [dialogCss, buttonCss, hrCss, styles];
+PremiumGate.INTERCEPTED_EVENTS = ['click', 'keydown'];
+__decorate([
+    property({ type: Boolean })
+], PremiumGate.prototype, "requireAuth", void 0);
+__decorate([
+    property({ type: Number })
+], PremiumGate.prototype, "requireCredits", void 0);
+__decorate([
+    property({ type: Boolean })
+], PremiumGate.prototype, "showDialog", void 0);
+__decorate([
+    property({ type: String })
+], PremiumGate.prototype, "dialogTitle", void 0);
+__decorate([
+    property({ type: String })
+], PremiumGate.prototype, "featureExplanation", void 0);
+__decorate([
+    property({ type: String })
+], PremiumGate.prototype, "featureName", void 0);
+__decorate([
+    property({ type: Boolean })
+], PremiumGate.prototype, "showVisualGate", void 0);
+__decorate([
+    state()
+], PremiumGate.prototype, "isAuthenticated", void 0);
+__decorate([
+    state()
+], PremiumGate.prototype, "creditsRemaining", void 0);
+__decorate([
+    state()
+], PremiumGate.prototype, "showPremiumDialog", void 0);
+__decorate([
+    state()
+], PremiumGate.prototype, "gateReason", void 0);
+__decorate([
+    query('sl-dialog')
+], PremiumGate.prototype, "dialog", void 0);
+__decorate([
+    query('pb33f-login-panel')
+], PremiumGate.prototype, "loginPanel", void 0);
+PremiumGate = PremiumGate_1 = __decorate([
+    customElement('pb33f-premium-gate')
+], PremiumGate);
+export { PremiumGate };

package/dist/components/problem-list/problem-list.css.js

@@ -1,5 +1,13 @@
 import { css } from "lit";
 export default css `
+
+    :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+    }
+
     .main-view {
         height: 200px;
         width: calc(100% - 2px);
@@ -8,15 +16,46 @@ export default css `
         margin-bottom: 10px;
         position: relative;
         overflow: hidden;
+        flex-shrink: 0;
     }
     
     .problem-list-container {
         position: relative;
+        padding-right: 5px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
     }
-    
+
     .problem-list {
         position: relative;
         width: 100%;
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100vh - 370px);
+    }
+
+    .paginator-values {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
+    .paginator-values::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .paginator-values::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .paginator-values::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
     }
 
     .problem-list::-webkit-scrollbar {
@@ -46,4 +85,36 @@ export default css `
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
+
+    .no-values {
+        height: 600px;
+        width: 70%;
+        margin: 0 auto;
+        padding-top: 50px;
+        text-align: center;
+        font-size: 1.9em;
+        color: var(--font-color-sub4);
+        font-family: var(--font-stack-bold), monospace;
+        overflow-y: hidden;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .no-values.error {
+        color: var(--error-color);
+    }
+
+    .no-values.search-miss {
+        color: var(--font-color-sub3);
+    }
+
+    .no-values sl-icon {
+        margin-bottom: 30px;
+        font-size: 5em;
+    }
+
+    .no-values .search-term {
+        color: var(--primary-color);
+        font-style: italic;
+    }
 `;

package/dist/components/problem-list/problem-list.d.ts

@@ -5,16 +5,26 @@ import { Problem } from "../../model/problem.js";
 export declare class ProblemList extends LitElement {
     static styles: import("lit").CSSResult[];
     private searchWorker;
-    private problemList;
+    private rawProblems;
+    private filteredProblems;
     private readonly mainView;
     private readonly problemToolbar;
     private problemLabelView;
-    private activeProblem;
-    private readonly paginator;
-    private unfilteredProblems;
+    private selectedProblemHash;
+    private selectedLine;
+    private selectedIdx;
+    private readonly paginatorNav;
     private activeSearch;
+    private searchTerm;
+    private readonly sparks;
+    private currentPage;
+    private itemsPerPage;
     isInvalid: boolean;
     constructor();
+    private nextPage;
+    private lastPage;
+    private firstPage;
+    private previousPage;
     private reset;
     private addSearchWorkerListener;
     ruleFilterChanged(event: CustomEvent<ProblemRuleFilterChangedEvent>): void;
@@ -22,17 +32,15 @@ export declare class ProblemList extends LitElement {
     private searchFilterChanged;
     private labelFilterChanged;
     private sortFilterChanged;
-    private extractProblemsFromList;
     private extractRulesFromProblems;
     private search;
-    private changeProblemLabels;
     private changeSorting;
     problemClicked(event: CustomEvent<ProblemClickedEvent>): void;
     slideChanged(event: CustomEvent<MainViewSlideChangedEvent>): void;
-    private setActiveProblem;
+    private setPageForProblem;
     get problemItems(): ProblemItem[];
-    generateProblemItems(problems: Problem[]): ProblemItem[];
+    private createProblemItemsForPage;
     set problems(problems: Problem[]);
-    lineClicked(line: number | undefined, scroll?: boolean, index?: number, stopCycle?: boolean): void;
+    lineClicked(line: number | undefined, _scroll?: boolean, index?: number, stopCycle?: boolean): void;
     render(): import("lit-html").TemplateResult<1>;
 }