@autumnsgrove/groveengine 0.4.12 → 0.6.1

package/README.md

@@ -1,6 +1,8 @@
-# @grove/engine
+# Lattice (@autumnsgrove/groveengine)
 
-Multi-tenant blog engine for the Grove Platform. Each Grove site runs as its own Cloudflare Worker, powered by this engine.
+> **Internal codename:** GroveEngine
+
+Multi-tenant blog engine for the Grove Platform. Each Grove site runs as its own Cloudflare Worker, powered by Lattice. A lattice is the framework that supports growth—vines climb it, gardens are built around it.
 
 ## Features
 
@@ -106,7 +108,7 @@ RESEND_API_KEY=re_xxxxx
 
 ## Fonts
 
-GroveEngine includes self-hosted accessibility-focused fonts in `static/fonts/`. After installing the package, copy the fonts to your project's static directory:
+Lattice includes self-hosted accessibility-focused fonts in `static/fonts/`. After installing the package, copy the fonts to your project's static directory:
 
 ```bash
 # Copy fonts from node_modules to your static folder

package/dist/components/OnboardingChecklist.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { Check, Circle, X, Sparkles } from 'lucide-svelte';
+
+	interface ChecklistItem {
+		id: string;
+		label: string;
+		completed: boolean;
+		href?: string;
+	}
+
+	interface Props {
+		items: ChecklistItem[];
+		onDismiss?: () => void;
+		class?: string;
+	}
+
+	let { items, onDismiss, class: className = '' }: Props = $props();
+
+	const completedCount = $derived(items.filter((i) => i.completed).length);
+	const allCompleted = $derived(completedCount === items.length);
+	const progress = $derived((completedCount / items.length) * 100);
+</script>
+
+<div class="bg-surface-elevated border border-default rounded-lg p-4 {className}">
+	<!-- Header -->
+	<div class="flex items-center justify-between mb-4">
+		<div class="flex items-center gap-2">
+			<Sparkles size={18} class="text-primary" />
+			<h3 class="font-medium text-foreground text-sm">Getting Started</h3>
+		</div>
+		{#if onDismiss}
+			<button
+				onclick={onDismiss}
+				class="text-foreground-subtle hover:text-foreground transition-colors"
+				title="Dismiss checklist"
+			>
+				<X size={16} />
+			</button>
+		{/if}
+	</div>
+
+	<!-- Progress bar -->
+	<div class="mb-4">
+		<div class="h-1.5 bg-surface rounded-full overflow-hidden">
+			<div
+				class="h-full bg-primary transition-all duration-500"
+				style="width: {progress}%"
+			></div>
+		</div>
+		<p class="text-xs text-foreground-subtle mt-1">
+			{completedCount} of {items.length} complete
+		</p>
+	</div>
+
+	<!-- Checklist items -->
+	<ul class="space-y-2">
+		{#each items as item}
+			<li>
+				{#if item.href && !item.completed}
+					<a
+						href={item.href}
+						class="flex items-center gap-3 p-2 rounded-md hover:bg-surface transition-colors group"
+					>
+						<div
+							class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors"
+							class:border-primary={item.completed}
+							class:bg-primary={item.completed}
+							class:border-default={!item.completed}
+							class:group-hover:border-primary={!item.completed}
+						>
+							{#if item.completed}
+								<Check size={12} class="text-white" />
+							{/if}
+						</div>
+						<span
+							class="text-sm transition-colors"
+							class:text-foreground-subtle={item.completed}
+							class:line-through={item.completed}
+							class:text-foreground={!item.completed}
+						>
+							{item.label}
+						</span>
+					</a>
+				{:else}
+					<div class="flex items-center gap-3 p-2">
+						<div
+							class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0"
+							class:border-primary={item.completed}
+							class:bg-primary={item.completed}
+							class:border-default={!item.completed}
+						>
+							{#if item.completed}
+								<Check size={12} class="text-white" />
+							{/if}
+						</div>
+						<span
+							class="text-sm"
+							class:text-foreground-subtle={item.completed}
+							class:line-through={item.completed}
+							class:text-foreground={!item.completed}
+						>
+							{item.label}
+						</span>
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+
+	<!-- Completion celebration -->
+	{#if allCompleted}
+		<div class="mt-4 p-3 bg-accent rounded-md text-center">
+			<p class="text-sm text-foreground">
+				🎉 All done! You're a Grove pro now.
+			</p>
+		</div>
+	{/if}
+</div>

package/dist/components/OnboardingChecklist.svelte.d.ts

@@ -0,0 +1,14 @@
+interface ChecklistItem {
+    id: string;
+    label: string;
+    completed: boolean;
+    href?: string;
+}
+interface Props {
+    items: ChecklistItem[];
+    onDismiss?: () => void;
+    class?: string;
+}
+declare const OnboardingChecklist: import("svelte").Component<Props, {}, "">;
+type OnboardingChecklist = ReturnType<typeof OnboardingChecklist>;
+export default OnboardingChecklist;

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;