@autumnsgrove/groveengine 0.6.2 → 0.6.3

package/dist/auth/jwt.d.ts

@@ -1,14 +1,20 @@
 /**
  * Sign a JWT payload
- * @param {Object} payload - The payload to sign
+ * @param {JwtPayload} payload - The payload to sign
  * @param {string} secret - The secret key
  * @returns {Promise<string>} - The signed JWT token
  */
-export function signJwt(payload: Object, secret: string): Promise<string>;
+export function signJwt(payload: JwtPayload, secret: string): Promise<string>;
 /**
  * Verify and decode a JWT token
  * @param {string} token - The JWT token to verify
  * @param {string} secret - The secret key
- * @returns {Promise<Object|null>} - The decoded payload or null if invalid
+ * @returns {Promise<JwtPayload|null>} - The decoded payload or null if invalid
  */
-export function verifyJwt(token: string, secret: string): Promise<Object | null>;
+export function verifyJwt(token: string, secret: string): Promise<JwtPayload | null>;
+export type JwtPayload = {
+    sub?: string | undefined;
+    email?: string | undefined;
+    exp?: number | undefined;
+    iat?: number | undefined;
+};

package/dist/auth/jwt.js

@@ -2,11 +2,21 @@
  * JWT utilities using Web Crypto API (Cloudflare Workers compatible)
  */
 
+/**
+ * @typedef {Object} JwtPayload
+ * @property {string} [sub]
+ * @property {string} [email]
+ * @property {number} [exp]
+ * @property {number} [iat]
+ */
+
 const encoder = new TextEncoder();
 const decoder = new TextDecoder();
 
 /**
  * Base64URL encode
+ * @param {ArrayBuffer} data
+ * @returns {string}
  */
 function base64UrlEncode(data) {
   const base64 = btoa(String.fromCharCode(...new Uint8Array(data)));
@@ -15,6 +25,8 @@ function base64UrlEncode(data) {
 
 /**
  * Base64URL decode
+ * @param {string} str
+ * @returns {Uint8Array}
  */
 function base64UrlDecode(str) {
   const base64 = str.replace(/-/g, "+").replace(/_/g, "/");
@@ -25,6 +37,8 @@ function base64UrlDecode(str) {
 
 /**
  * Create HMAC key from secret
+ * @param {string} secret
+ * @returns {Promise<CryptoKey>}
  */
 async function createKey(secret) {
   return await crypto.subtle.importKey(
@@ -38,16 +52,16 @@ async function createKey(secret) {
 
 /**
  * Sign a JWT payload
- * @param {Object} payload - The payload to sign
+ * @param {JwtPayload} payload - The payload to sign
  * @param {string} secret - The secret key
  * @returns {Promise<string>} - The signed JWT token
  */
 export async function signJwt(payload, secret) {
   const header = { alg: "HS256", typ: "JWT" };
 
-  const headerEncoded = base64UrlEncode(encoder.encode(JSON.stringify(header)));
+  const headerEncoded = base64UrlEncode(encoder.encode(JSON.stringify(header)).buffer);
   const payloadEncoded = base64UrlEncode(
-    encoder.encode(JSON.stringify(payload)),
+    encoder.encode(JSON.stringify(payload)).buffer,
   );
 
   const message = `${headerEncoded}.${payloadEncoded}`;
@@ -68,7 +82,7 @@ export async function signJwt(payload, secret) {
  * Verify and decode a JWT token
  * @param {string} token - The JWT token to verify
  * @param {string} secret - The secret key
- * @returns {Promise<Object|null>} - The decoded payload or null if invalid
+ * @returns {Promise<JwtPayload|null>} - The decoded payload or null if invalid
  */
 export async function verifyJwt(token, secret) {
   try {

package/dist/auth/session.d.ts

@@ -1,20 +1,17 @@
 /**
  * Create a session token for a user
- * @param {Object} user - User data
- * @param {string} user.email - User email address
+ * @param {User} user - User data
  * @param {string} secret - Session secret
  * @returns {Promise<string>} - Signed JWT token
  */
-export function createSession(user: {
-    email: string;
-}, secret: string): Promise<string>;
+export function createSession(user: User, secret: string): Promise<string>;
 /**
  * Verify a session token and return user data
  * @param {string} token - Session token
  * @param {string} secret - Session secret
- * @returns {Promise<Object|null>} - User data or null if invalid
+ * @returns {Promise<User|null>} - User data or null if invalid
  */
-export function verifySession(token: string, secret: string): Promise<Object | null>;
+export function verifySession(token: string, secret: string): Promise<User | null>;
 /**
  * Create Set-Cookie header value for session
  * @param {string} token - Session token
@@ -42,19 +39,29 @@ export function parseSessionCookie(cookieHeader: string): string | null;
 export function isAllowedAdmin(email: string, allowedList: string): boolean;
 /**
  * Verify that a user owns/has access to a tenant
- * @param {Object} db - D1 database instance
- * @param {string} tenantId - Tenant ID to check
+ * @param {import('@cloudflare/workers-types').D1Database} db - D1 database instance
+ * @param {string | undefined | null} tenantId - Tenant ID to check
  * @param {string} userEmail - User's email address
  * @returns {Promise<boolean>} - Whether the user owns the tenant
  */
-export function verifyTenantOwnership(db: Object, tenantId: string, userEmail: string): Promise<boolean>;
+export function verifyTenantOwnership(db: import("@cloudflare/workers-types").D1Database, tenantId: string | undefined | null, userEmail: string): Promise<boolean>;
 /**
  * Get tenant ID with ownership verification
  * Throws 403 if user doesn't own the tenant
- * @param {Object} db - D1 database instance
- * @param {string} tenantId - Tenant ID from request
- * @param {Object} user - User object with email
+ * @param {import('@cloudflare/workers-types').D1Database} db - D1 database instance
+ * @param {string | undefined | null} tenantId - Tenant ID from request
+ * @param {User | null | undefined} user - User object with email
  * @returns {Promise<string>} - Verified tenant ID
- * @throws {Error} - If unauthorized
+ * @throws {SessionError} - If unauthorized
  */
-export function getVerifiedTenantId(db: Object, tenantId: string, user: Object): Promise<string>;
+export function getVerifiedTenantId(db: import("@cloudflare/workers-types").D1Database, tenantId: string | undefined | null, user: User | null | undefined): Promise<string>;
+export type User = {
+    email: string;
+};
+export type SessionError = {
+    message: string;
+    status: number;
+};
+export type TenantRow = {
+    email: string;
+};

package/dist/auth/session.js

@@ -4,13 +4,28 @@
 
 import { signJwt, verifyJwt } from "./jwt.js";
 
+/**
+ * @typedef {Object} User
+ * @property {string} email
+ */
+
+/**
+ * @typedef {Object} SessionError
+ * @property {string} message
+ * @property {number} status
+ */
+
+/**
+ * @typedef {Object} TenantRow
+ * @property {string} email
+ */
+
 const SESSION_COOKIE_NAME = "session";
 const SESSION_DURATION_SECONDS = 60 * 60 * 24 * 7; // 7 days
 
 /**
  * Create a session token for a user
- * @param {Object} user - User data
- * @param {string} user.email - User email address
+ * @param {User} user - User data
  * @param {string} secret - Session secret
  * @returns {Promise<string>} - Signed JWT token
  */
@@ -28,12 +43,12 @@ export async function createSession(user, secret) {
  * Verify a session token and return user data
  * @param {string} token - Session token
  * @param {string} secret - Session secret
- * @returns {Promise<Object|null>} - User data or null if invalid
+ * @returns {Promise<User|null>} - User data or null if invalid
  */
 export async function verifySession(token, secret) {
   const payload = await verifyJwt(token, secret);
 
-  if (!payload) {
+  if (!payload || !payload.email) {
     return null;
   }
 
@@ -82,7 +97,8 @@ export function parseSessionCookie(cookieHeader) {
     return null;
   }
 
-  const cookies = cookieHeader.split(";").reduce((acc, cookie) => {
+  /** @type {Record<string, string>} */
+  const cookies = cookieHeader.split(";").reduce((/** @type {Record<string, string>} */ acc, /** @type {string} */ cookie) => {
     const [key, value] = cookie.trim().split("=");
     if (key && value) {
       acc[key] = value;
@@ -106,8 +122,8 @@ export function isAllowedAdmin(email, allowedList) {
 
 /**
  * Verify that a user owns/has access to a tenant
- * @param {Object} db - D1 database instance
- * @param {string} tenantId - Tenant ID to check
+ * @param {import('@cloudflare/workers-types').D1Database} db - D1 database instance
+ * @param {string | undefined | null} tenantId - Tenant ID to check
  * @param {string} userEmail - User's email address
  * @returns {Promise<boolean>} - Whether the user owns the tenant
  */
@@ -117,10 +133,10 @@ export async function verifyTenantOwnership(db, tenantId, userEmail) {
   }
 
   try {
-    const tenant = await db
+    const tenant = /** @type {TenantRow | null} */ (await db
       .prepare("SELECT email FROM tenants WHERE id = ?")
       .bind(tenantId)
-      .first();
+      .first());
 
     if (!tenant) {
       return false;
@@ -137,28 +153,31 @@ export async function verifyTenantOwnership(db, tenantId, userEmail) {
 /**
  * Get tenant ID with ownership verification
  * Throws 403 if user doesn't own the tenant
- * @param {Object} db - D1 database instance
- * @param {string} tenantId - Tenant ID from request
- * @param {Object} user - User object with email
+ * @param {import('@cloudflare/workers-types').D1Database} db - D1 database instance
+ * @param {string | undefined | null} tenantId - Tenant ID from request
+ * @param {User | null | undefined} user - User object with email
  * @returns {Promise<string>} - Verified tenant ID
- * @throws {Error} - If unauthorized
+ * @throws {SessionError} - If unauthorized
  */
 export async function getVerifiedTenantId(db, tenantId, user) {
   if (!tenantId) {
-    const err = new Error("Tenant ID required");
+    /** @type {SessionError & Error} */
+    const err = /** @type {SessionError & Error} */ (new Error("Tenant ID required"));
     err.status = 400;
     throw err;
   }
 
   if (!user?.email) {
-    const err = new Error("Unauthorized");
+    /** @type {SessionError & Error} */
+    const err = /** @type {SessionError & Error} */ (new Error("Unauthorized"));
     err.status = 401;
     throw err;
   }
 
   const isOwner = await verifyTenantOwnership(db, tenantId, user.email);
   if (!isOwner) {
-    const err = new Error("Access denied - you do not own this tenant");
+    /** @type {SessionError & Error} */
+    const err = /** @type {SessionError & Error} */ (new Error("Access denied - you do not own this tenant"));
     err.status = 403;
     throw err;
   }

package/dist/components/admin/GutterManager.svelte

@@ -5,17 +5,43 @@
   import Select from "../../ui/components/ui/Select.svelte";
   import { toast } from "../../ui/components/ui/toast";
 
+  /**
+   * @typedef {Object} GutterItem
+   * @property {string} type
+   * @property {string} [anchor]
+   * @property {string} [content]
+   * @property {string} [url]
+   * @property {string} [file]
+   * @property {string} [caption]
+   * @property {GalleryImage[]} [images]
+   */
+
+  /**
+   * @typedef {Object} GalleryImage
+   * @property {string} url
+   * @property {string} [alt]
+   * @property {string} [caption]
+   */
+
+  /**
+   * @typedef {Object} CdnImage
+   * @property {string} key
+   * @property {string} url
+   */
+
   // Props
   let {
-    gutterItems = $bindable([]),
-    onInsertAnchor = (anchorName) => {},
-    availableAnchors = [],
+    gutterItems = $bindable(/** @type {GutterItem[]} */ ([])),
+    onInsertAnchor = /** @type {(anchorName: string) => void} */ ((anchorName) => {}),
+    availableAnchors = /** @type {string[]} */ ([]),
   } = $props();
 
   // State
   let showAddModal = $state(false);
+  /** @type {number | null} */
   let editingIndex = $state(null);
   let showImagePicker = $state(false);
+  /** @type {((url: string) => void) | null} */
   let imagePickerCallback = $state(null);
 
   // Form state for add/edit
@@ -24,9 +50,11 @@
   let itemContent = $state("");
   let itemCaption = $state("");
   let itemUrl = $state("");
+  /** @type {GalleryImage[]} */
   let galleryImages = $state([]);
 
   // Image picker state
+  /** @type {CdnImage[]} */
   let cdnImages = $state([]);
   let cdnLoading = $state(false);
   let cdnFilter = $state("");
@@ -46,6 +74,7 @@
     showAddModal = true;
   }
 
+  /** @param {number} index */
   function openEditModal(index) {
     const item = gutterItems[index];
     itemType = item.type;
@@ -65,6 +94,7 @@
   }
 
   function saveItem() {
+    /** @type {GutterItem} */
     const newItem = {
       type: itemType,
       anchor: itemAnchor,
@@ -89,11 +119,16 @@
     closeModal();
   }
 
+  /** @param {number} index */
   function deleteItem(index) {
-    gutterItems = gutterItems.filter((_, i) => i !== index);
+    gutterItems = gutterItems.filter((/** @type {GutterItem} */ _, /** @type {number} */ i) => i !== index);
     toast.success("Gutter item deleted");
   }
 
+  /**
+   * @param {number} index
+   * @param {number} direction
+   */
   function moveItem(index, direction) {
     const newIndex = index + direction;
     if (newIndex < 0 || newIndex >= gutterItems.length) return;
@@ -106,6 +141,7 @@
   }
 
   // Generate anchor name from text
+  /** @param {string} text */
   function generateAnchorName(text) {
     return text
       .toLowerCase()
@@ -138,7 +174,7 @@
 
       if (response.ok) {
         const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg"];
-        cdnImages = data.images.filter((img) => {
+        cdnImages = data.images.filter((/** @type {CdnImage} */ img) => {
           const key = img.key.toLowerCase();
           return imageExtensions.some((ext) => key.endsWith(ext));
         });
@@ -152,12 +188,14 @@
     }
   }
 
+  /** @param {(url: string) => void} callback */
   function openImagePicker(callback) {
     imagePickerCallback = callback;
     showImagePicker = true;
     loadCdnImages();
   }
 
+  /** @param {CdnImage} image */
   function selectImage(image) {
     if (imagePickerCallback) {
       imagePickerCallback(image.url);
@@ -181,16 +219,23 @@
     });
   }
 
+  /** @param {number} index */
   function removeGalleryImage(index) {
-    galleryImages = galleryImages.filter((_, i) => i !== index);
+    galleryImages = galleryImages.filter((/** @type {GalleryImage} */ _, /** @type {number} */ i) => i !== index);
   }
 
+  /**
+   * @param {number} index
+   * @param {keyof GalleryImage} field
+   * @param {string} value
+   */
   function updateGalleryImage(index, field, value) {
     galleryImages[index][field] = value;
     galleryImages = [...galleryImages];
   }
 
   // Get preview of item content
+  /** @param {GutterItem} item */
   function getItemPreview(item) {
     if (item.type === "comment" && item.content) {
       return item.content.substring(0, 50) + (item.content.length > 50 ? "..." : "");
@@ -204,6 +249,7 @@
     return "";
   }
 
+  /** @param {string} type */
   function getTypeIcon(type) {
     switch (type) {
       case "comment":
@@ -269,17 +315,19 @@
 </div>
 
 <!-- Add/Edit Modal -->
-<Dialog bind:open={showAddModal}>
-  <h3 slot="title">{editingIndex !== null ? "Edit" : "Add"} Gutter Item</h3>
-
-  <div class="form-group">
-    <label for="item-type">Type</label>
-    <Select id="item-type" bind:value={itemType}>
-      <option value="comment">Comment (Markdown)</option>
-      <option value="photo">Photo</option>
-      <option value="gallery">Image Gallery</option>
-    </Select>
-  </div>
+<Dialog bind:open={showAddModal} title={editingIndex !== null ? "Edit Gutter Item" : "Add Gutter Item"}>
+  {#snippet children()}
+    <div class="form-group">
+      <label for="item-type">Type</label>
+      <Select
+        bind:value={itemType}
+        options={[
+          { value: "comment", label: "Comment (Markdown)" },
+          { value: "photo", label: "Photo" },
+          { value: "gallery", label: "Image Gallery" }
+        ]}
+      />
+    </div>
 
   <div class="form-group">
     <label for="item-anchor">Anchor</label>
@@ -369,7 +417,7 @@
 
   {#if itemType === "gallery"}
     <div class="form-group">
-      <label>Gallery Images</label>
+      <div class="gallery-label">Gallery Images</div>
       <div class="gallery-list">
         {#each galleryImages as image, i (i)}
           <div class="gallery-image-item">
@@ -378,14 +426,14 @@
               <Input
                 type="text"
                 value={image.alt}
-                oninput={(e) => updateGalleryImage(i, "alt", e.target.value)}
+                oninput={(/** @type {Event} */ e) => updateGalleryImage(i, "alt", /** @type {HTMLInputElement} */ (e.target).value)}
                 placeholder="Alt text"
                 class="small"
               />
               <Input
                 type="text"
                 value={image.caption}
-                oninput={(e) => updateGalleryImage(i, "caption", e.target.value)}
+                oninput={(/** @type {Event} */ e) => updateGalleryImage(i, "caption", /** @type {HTMLInputElement} */ (e.target).value)}
                 placeholder="Caption"
                 class="small"
               />
@@ -403,20 +451,20 @@
       </button>
     </div>
   {/if}
+  {/snippet}
 
-  <div slot="footer" style="display: flex; gap: 0.75rem; justify-content: flex-end;">
+  {#snippet footer()}
     <Button variant="outline" onclick={closeModal}>Cancel</Button>
     <Button onclick={saveItem}>
       {editingIndex !== null ? "Update" : "Add"} Item
     </Button>
-  </div>
+  {/snippet}
 </Dialog>
 
 <!-- Image Picker Modal -->
-<Dialog bind:open={showImagePicker}>
-  <h3 slot="title">Select Image from CDN</h3>
-
-  <div class="picker-controls">
+<Dialog bind:open={showImagePicker} title="Select Image from CDN">
+  {#snippet children()}
+    <div class="picker-controls">
     <Input
       type="text"
       bind:value={cdnFilter}
@@ -444,10 +492,11 @@
           {/each}
         {/if}
       </div>
+  {/snippet}
 
-  <div slot="footer" style="display: flex; gap: 0.75rem; justify-content: flex-end;">
+  {#snippet footer()}
     <Button variant="outline" onclick={closeImagePicker}>Cancel</Button>
-  </div>
+  {/snippet}
 </Dialog>
 
 <style>
@@ -577,43 +626,13 @@
     text-overflow: ellipsis;
   }
 
-  /* Modal Styles */
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 1rem;
-  }
-
-  .modal-content {
-    background: #1e1e1e;
-    border: 1px solid #3a3a3a;
-    border-radius: 8px;
-    padding: 1.5rem;
-    max-width: 500px;
-    width: 100%;
-    max-height: 80vh;
-    overflow-y: auto;
-  }
-
-  .modal-content h3 {
-    margin: 0 0 1.25rem 0;
-    color: #d4d4d4;
-    font-size: 1.1rem;
-  }
-
+  /* Form Styles */
   .form-group {
     margin-bottom: 1rem;
   }
 
-  .form-group label {
+  .form-group label,
+  .gallery-label {
     display: block;
     margin-bottom: 0.4rem;
     font-size: 0.85rem;
@@ -636,11 +655,6 @@
     border-color: #4a7c4a;
   }
 
-  .form-input.small {
-    padding: 0.35rem 0.5rem;
-    font-size: 0.8rem;
-  }
-
   .form-textarea {
     resize: vertical;
     min-height: 100px;
@@ -672,23 +686,6 @@
     flex: 1;
   }
 
-  .insert-anchor-btn,
-  .browse-btn {
-    padding: 0.5rem 0.75rem;
-    background: #2d4a2d;
-    color: #a8dca8;
-    border: 1px solid #3d5a3d;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-  .insert-anchor-btn:hover,
-  .browse-btn:hover {
-    background: #3d5a3d;
-  }
-
   .available-anchors {
     display: flex;
     flex-wrap: wrap;
@@ -790,49 +787,7 @@
     color: #8bc48b;
   }
 
-  .modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid #3a3a3a;
-  }
-
-  .cancel-btn,
-  .save-btn {
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .cancel-btn {
-    background: transparent;
-    border: 1px solid #3a3a3a;
-    color: #9d9d9d;
-  }
-
-  .cancel-btn:hover {
-    background: #3a3a3a;
-  }
-
-  .save-btn {
-    background: #4a7c4a;
-    border: none;
-    color: #c8f0c8;
-  }
-
-  .save-btn:hover {
-    background: #5a9c5a;
-  }
-
-  /* Image Picker Modal */
-  .image-picker-modal {
-    max-width: 700px;
-  }
-
+  /* Image Picker */
   .picker-controls {
     display: flex;
     gap: 0.5rem;
@@ -843,19 +798,6 @@
     flex: 1;
   }
 
-  .filter-btn {
-    padding: 0.5rem 1rem;
-    background: #3a3a3a;
-    border: none;
-    border-radius: 4px;
-    color: #d4d4d4;
-    cursor: pointer;
-  }
-
-  .filter-btn:hover {
-    background: #4a4a4a;
-  }
-
   .image-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

package/dist/components/admin/GutterManager.svelte.d.ts

@@ -4,12 +4,12 @@ type GutterManager = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const GutterManager: import("svelte").Component<{
-    gutterItems?: any[];
-    onInsertAnchor?: Function;
-    availableAnchors?: any[];
+    gutterItems?: any;
+    onInsertAnchor?: any;
+    availableAnchors?: any;
 }, {}, "gutterItems">;
 type $$ComponentProps = {
-    gutterItems?: any[];
-    onInsertAnchor?: Function;
-    availableAnchors?: any[];
+    gutterItems?: any;
+    onInsertAnchor?: any;
+    availableAnchors?: any;
 };