@autumnsgrove/groveengine 0.4.12 → 0.5.0

package/dist/components/quota/QuotaWarning.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  /**
+   * QuotaWarning - Warning banner for post limit status
+   *
+   * Shows contextual warnings when users are near or at their limit.
+   * Can be placed on the post editor or dashboard.
+   */
+
+  import type { PreSubmitCheckResult, AlertVariant } from '../../groveauth/index.js';
+  import { ALERT_VARIANTS } from '../../groveauth/index.js';
+
+  interface Props {
+    check: PreSubmitCheckResult;
+    upgradeUrl?: string;
+    onDismiss?: () => void;
+    showDismiss?: boolean;
+  }
+
+  let {
+    check,
+    upgradeUrl = '/upgrade',
+    onDismiss,
+    showDismiss = true,
+  }: Props = $props();
+
+  let dismissed = $state(false);
+
+  function handleDismiss() {
+    dismissed = true;
+    onDismiss?.();
+  }
+
+  // Defensive check for malformed data
+  const isValidCheck = $derived(
+    check &&
+    typeof check === 'object' &&
+    check.status &&
+    typeof check.status === 'object'
+  );
+
+  // Determine variant based on check result
+  const variant = $derived<AlertVariant>(
+    !isValidCheck ? 'info' :
+    check.upgradeRequired ? 'error' :
+    check.status.is_in_grace_period ? 'warning' :
+    check.status.is_at_limit ? 'warning' :
+    'info'
+  );
+
+  // Get variant classes from shared utility
+  const variantClasses = $derived(ALERT_VARIANTS[variant]);
+</script>
+
+{#if isValidCheck && check.showWarning && !dismissed}
+  <div class="rounded-lg border p-4 {variantClasses.container}">
+    <div class="flex items-start gap-3">
+      <!-- Icon -->
+      <div class="flex-shrink-0">
+        {#if variant === 'error'}
+          <svg class="w-5 h-5 {variantClasses.icon}" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+        {:else if variant === 'warning'}
+          <svg class="w-5 h-5 {variantClasses.icon}" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+        {:else}
+          <svg class="w-5 h-5 {variantClasses.icon}" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+          </svg>
+        {/if}
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1">
+        <h3 class="text-sm font-medium {variantClasses.title}">
+          {#if check.upgradeRequired}
+            Upgrade Required
+          {:else if check.status.is_in_grace_period}
+            Grace Period Active
+          {:else if check.status.is_at_limit}
+            Post Limit Reached
+          {:else}
+            Approaching Limit
+          {/if}
+        </h3>
+
+        {#if check.warningMessage}
+          <p class="mt-1 text-sm {variantClasses.text}">
+            {check.warningMessage}
+          </p>
+        {/if}
+
+        <!-- Actions -->
+        <div class="mt-3 flex items-center gap-3">
+          <a
+            href={upgradeUrl}
+            class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md {variantClasses.button}"
+          >
+            {check.upgradeRequired ? 'Upgrade Now' : 'View Plans'}
+          </a>
+
+          {#if !check.upgradeRequired}
+            <span class="text-sm {variantClasses.text}">
+              {check.status.posts_remaining !== null ? `${check.status.posts_remaining} posts remaining` : ''}
+            </span>
+          {/if}
+        </div>
+      </div>
+
+      <!-- Dismiss button -->
+      {#if showDismiss && !check.upgradeRequired}
+        <button
+          onclick={handleDismiss}
+          class="flex-shrink-0 {variantClasses.text} hover:opacity-75"
+          aria-label="Dismiss"
+        >
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/quota/QuotaWarning.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+   * QuotaWarning - Warning banner for post limit status
+   *
+   * Shows contextual warnings when users are near or at their limit.
+   * Can be placed on the post editor or dashboard.
+   */
+import type { PreSubmitCheckResult } from '../../groveauth/index.js';
+interface Props {
+    check: PreSubmitCheckResult;
+    upgradeUrl?: string;
+    onDismiss?: () => void;
+    showDismiss?: boolean;
+}
+declare const QuotaWarning: import("svelte").Component<Props, {}, "">;
+type QuotaWarning = ReturnType<typeof QuotaWarning>;
+export default QuotaWarning;

package/dist/components/quota/QuotaWidget.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  /**
+   * QuotaWidget - Displays post usage quota
+   *
+   * Shows current post count, limit, and visual progress bar.
+   * Includes upgrade prompts when near or at limit.
+   */
+
+  import type { QuotaWidgetData } from '../../groveauth/index.js';
+  import { STATUS_COLORS } from '../../groveauth/index.js';
+
+  interface Props {
+    data: QuotaWidgetData;
+    upgradeUrl?: string;
+    compact?: boolean;
+  }
+
+  let { data, upgradeUrl = '/upgrade', compact = false }: Props = $props();
+
+  // Defensive check for malformed data
+  const isValidData = $derived(
+    data &&
+    typeof data === 'object' &&
+    typeof data.count === 'number' &&
+    typeof data.color === 'string'
+  );
+
+  // Default fallback data for when data is invalid
+  const safeData = $derived(isValidData ? data : {
+    count: 0,
+    limit: null,
+    percentage: null,
+    remaining: null,
+    color: 'gray' as const,
+    statusText: 'Loading...',
+    description: 'Unable to load quota information',
+    showUpgrade: false,
+    tierName: 'Unknown',
+    canPost: true,
+  });
+
+  // Get color classes from shared utility
+  const colorClasses = $derived(STATUS_COLORS[safeData.color]);
+</script>
+
+{#if compact}
+  <!-- Compact mode: just the numbers -->
+  <div class="flex items-center gap-2 text-sm">
+    <span class="font-medium">
+      {safeData.count}{#if safeData.limit !== null}<span class="text-gray-400">/{safeData.limit}</span>{/if}
+    </span>
+    <span class="px-1.5 py-0.5 text-xs rounded {colorClasses.badge}">
+      {safeData.statusText}
+    </span>
+  </div>
+{:else}
+  <!-- Full widget -->
+  <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4 {colorClasses.bg}">
+    <div class="flex justify-between items-center mb-2">
+      <h4 class="font-semibold text-gray-900 dark:text-gray-100">Post Usage</h4>
+      <span class="px-2 py-1 text-xs font-medium rounded-full {colorClasses.badge}">
+        {safeData.statusText}
+      </span>
+    </div>
+
+    <!-- Count display -->
+    <div class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100">
+      {safeData.count}{#if safeData.limit !== null}<span class="text-gray-400 dark:text-gray-500">/{safeData.limit}</span>{/if}
+    </div>
+
+    <!-- Progress bar -->
+    {#if safeData.limit !== null && safeData.percentage !== null}
+      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2">
+        <div
+          class="h-full rounded-full transition-all duration-300 {colorClasses.fill}"
+          style="width: {Math.min(safeData.percentage, 100)}%"
+        ></div>
+      </div>
+      <p class="text-sm {colorClasses.text}">{safeData.percentage.toFixed(1)}% used</p>
+    {:else}
+      <p class="text-sm text-gray-500 dark:text-gray-400">Unlimited posts with {safeData.tierName} plan</p>
+    {/if}
+
+    <!-- Upgrade prompt -->
+    {#if safeData.showUpgrade}
+      <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
+        <p class="text-sm text-blue-800 dark:text-blue-200 mb-2">
+          Upgrade for more posts
+        </p>
+        <a
+          href={upgradeUrl}
+          class="inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          View Plans
+          <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </a>
+      </div>
+    {/if}
+
+    <!-- Cannot post warning -->
+    {#if !safeData.canPost}
+      <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/30 rounded-lg border border-red-200 dark:border-red-800">
+        <p class="text-sm text-red-800 dark:text-red-200 font-medium">
+          You cannot create new posts until you upgrade or delete existing posts.
+        </p>
+      </div>
+    {/if}
+
+    <!-- Error state for invalid data -->
+    {#if !isValidData}
+      <div class="mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
+          Unable to load quota information. Please refresh the page.
+        </p>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/quota/QuotaWidget.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+   * QuotaWidget - Displays post usage quota
+   *
+   * Shows current post count, limit, and visual progress bar.
+   * Includes upgrade prompts when near or at limit.
+   */
+import type { QuotaWidgetData } from '../../groveauth/index.js';
+interface Props {
+    data: QuotaWidgetData;
+    upgradeUrl?: string;
+    compact?: boolean;
+}
+declare const QuotaWidget: import("svelte").Component<Props, {}, "">;
+type QuotaWidget = ReturnType<typeof QuotaWidget>;
+export default QuotaWidget;

package/dist/components/quota/UpgradePrompt.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+  /**
+   * UpgradePrompt - Modal/dialog for upgrade prompts
+   *
+   * Shows when user tries to create a post but is at/over limit.
+   * Provides options to upgrade, delete posts, or cancel.
+   *
+   * Accessibility features:
+   * - Focus trap within modal
+   * - Escape key closes modal
+   * - Focus returns to trigger element on close
+   * - ARIA attributes for screen readers
+   */
+
+  import { onMount } from 'svelte';
+  import type { SubscriptionStatus } from '../../groveauth/index.js';
+  import { TIER_NAMES } from '../../groveauth/index.js';
+
+  interface Props {
+    open: boolean;
+    status: SubscriptionStatus;
+    upgradeUrl?: string;
+    onClose: () => void;
+    onProceed?: () => void; // If allowed during grace period
+    oldestPostTitle?: string;
+    oldestPostDate?: string;
+  }
+
+  let {
+    open,
+    status,
+    upgradeUrl = '/upgrade',
+    onClose,
+    onProceed,
+    oldestPostTitle,
+    oldestPostDate,
+  }: Props = $props();
+
+  // Reference to the modal dialog element
+  let dialogRef: HTMLDivElement | null = $state(null);
+
+  // Store the previously focused element to restore on close
+  let previouslyFocusedElement: HTMLElement | null = null;
+
+  // Defensive check for malformed status data
+  const isValidStatus = $derived(
+    status &&
+    typeof status === 'object' &&
+    typeof status.tier === 'string' &&
+    typeof status.post_count === 'number'
+  );
+
+  // Safe status with fallback values
+  const safeStatus = $derived(isValidStatus ? status : {
+    tier: 'starter' as const,
+    post_count: 0,
+    post_limit: 250,
+    posts_remaining: 250,
+    percentage_used: 0,
+    is_at_limit: false,
+    is_in_grace_period: false,
+    grace_period_days_remaining: null,
+    can_create_post: true,
+    upgrade_required: false,
+  });
+
+  // Can proceed if in grace period and not expired
+  const canProceed = $derived(
+    safeStatus.is_in_grace_period &&
+    safeStatus.grace_period_days_remaining !== null &&
+    safeStatus.grace_period_days_remaining > 0
+  );
+
+  // Tier upgrade path
+  const nextTier = $derived(
+    safeStatus.tier === 'starter' ? 'professional' :
+    safeStatus.tier === 'professional' ? 'business' :
+    null
+  );
+
+  const nextTierName = $derived(nextTier ? TIER_NAMES[nextTier] : null);
+  const currentTierName = $derived(TIER_NAMES[safeStatus.tier] || 'Unknown');
+
+  /**
+   * Get all focusable elements within the modal
+   */
+  function getFocusableElements(): HTMLElement[] {
+    if (!dialogRef) return [];
+    return Array.from(
+      dialogRef.querySelectorAll<HTMLElement>(
+        'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    );
+  }
+
+  /**
+   * Handle keyboard events for focus trap and escape
+   */
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!open) return;
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+
+    if (e.key === 'Tab') {
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (e.shiftKey) {
+        // Shift+Tab: if on first element, go to last
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab: if on last element, go to first
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    }
+  }
+
+  /**
+   * Focus the first focusable element when modal opens
+   */
+  function focusFirstElement() {
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+  }
+
+  // Handle modal open/close
+  $effect(() => {
+    if (open) {
+      // Store the currently focused element
+      previouslyFocusedElement = document.activeElement as HTMLElement;
+
+      // Add escape key listener to document
+      document.addEventListener('keydown', handleKeyDown);
+
+      // Focus the first element after render
+      // Use setTimeout to ensure the DOM is ready
+      setTimeout(focusFirstElement, 0);
+    } else {
+      // Remove event listener
+      document.removeEventListener('keydown', handleKeyDown);
+
+      // Restore focus to the previously focused element
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+        previouslyFocusedElement = null;
+      }
+    }
+  });
+
+  // Cleanup on unmount
+  onMount(() => {
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+</script>
+
+{#if open}
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+    onclick={onClose}
+    role="presentation"
+  >
+    <!-- Modal -->
+    <div
+      bind:this={dialogRef}
+      class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-6"
+      onclick={(e) => e.stopPropagation()}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="upgrade-title"
+      aria-describedby="upgrade-description"
+    >
+      <!-- Header -->
+      <div class="text-center mb-6">
+        <div class="mx-auto w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+        </div>
+
+        <h3 id="upgrade-title" class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {#if safeStatus.upgrade_required}
+            Upgrade Required
+          {:else}
+            You're at {safeStatus.post_count}/{safeStatus.post_limit} posts
+          {/if}
+        </h3>
+      </div>
+
+      <!-- Content -->
+      <div id="upgrade-description" class="space-y-4 mb-6">
+        {#if safeStatus.upgrade_required}
+          <p class="text-sm text-gray-600 dark:text-gray-400 text-center">
+            Your grace period has expired. To continue creating posts, please upgrade your plan or delete some existing posts.
+          </p>
+        {:else if safeStatus.is_in_grace_period}
+          <p class="text-sm text-gray-600 dark:text-gray-400 text-center">
+            You're over your post limit. You have <strong class="text-yellow-600 dark:text-yellow-400">{safeStatus.grace_period_days_remaining} days</strong> remaining in your grace period.
+          </p>
+
+          {#if oldestPostTitle}
+            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 text-sm">
+              <p class="text-gray-500 dark:text-gray-400">If you continue, new posts may need to replace older ones. Your oldest post:</p>
+              <p class="mt-1 font-medium text-gray-900 dark:text-gray-100">"{oldestPostTitle}"</p>
+              {#if oldestPostDate}
+                <p class="text-xs text-gray-500 dark:text-gray-400">{oldestPostDate}</p>
+              {/if}
+            </div>
+          {/if}
+        {:else}
+          <p class="text-sm text-gray-600 dark:text-gray-400 text-center">
+            You've reached your post limit on the <strong>{currentTierName}</strong> plan. Upgrade to get more posts.
+          </p>
+        {/if}
+
+        <!-- Tier comparison -->
+        {#if nextTierName}
+          <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="font-medium text-blue-900 dark:text-blue-100">{nextTierName} Plan</p>
+                <p class="text-sm text-blue-700 dark:text-blue-300">
+                  {#if nextTier === 'professional'}
+                    Up to 2,000 posts
+                  {:else}
+                    Unlimited posts
+                  {/if}
+                </p>
+              </div>
+              <a
+                href={upgradeUrl}
+                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+              >
+                Upgrade
+              </a>
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Actions -->
+      <div class="flex flex-col gap-3">
+        {#if canProceed && onProceed}
+          <button
+            onclick={onProceed}
+            class="w-full px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+          >
+            Continue Anyway
+          </button>
+        {/if}
+
+        <div class="flex gap-3">
+          <a
+            href="/admin/posts"
+            class="flex-1 px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 text-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+          >
+            Manage Posts
+          </a>
+
+          <button
+            onclick={onClose}
+            class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/components/quota/UpgradePrompt.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SubscriptionStatus } from '../../groveauth/index.js';
+interface Props {
+    open: boolean;
+    status: SubscriptionStatus;
+    upgradeUrl?: string;
+    onClose: () => void;
+    onProceed?: () => void;
+    oldestPostTitle?: string;
+    oldestPostDate?: string;
+}
+declare const UpgradePrompt: import("svelte").Component<Props, {}, "">;
+type UpgradePrompt = ReturnType<typeof UpgradePrompt>;
+export default UpgradePrompt;

package/dist/components/quota/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Quota Components
+ *
+ * UI components for displaying and managing post quotas.
+ */
+export { default as QuotaWidget } from './QuotaWidget.svelte';
+export { default as QuotaWarning } from './QuotaWarning.svelte';
+export { default as UpgradePrompt } from './UpgradePrompt.svelte';

package/dist/components/quota/index.js

@@ -0,0 +1,8 @@
+/**
+ * Quota Components
+ *
+ * UI components for displaying and managing post quotas.
+ */
+export { default as QuotaWidget } from './QuotaWidget.svelte';
+export { default as QuotaWarning } from './QuotaWarning.svelte';
+export { default as UpgradePrompt } from './UpgradePrompt.svelte';