@jamwidgets/astro 0.6.3 → 0.6.6

package/README.md

@@ -234,6 +234,7 @@ import Subscribe from "@jamwidgets/astro/Subscribe";
 - `endpoint` - Base URL (default: `https://jamwidgets.com`)
 - `buttonText` - Submit button text (default: `'Subscribe'`)
 - `placeholder` - Email input placeholder
+- `label` - Accessible name for the email input (default: `'Email address'`)
 - `successMessage` - Custom success message
 - `theme` - `'light'` | `'dark'` | `'auto'` (default: `'light'`)
 - `class` - Additional CSS class
@@ -317,6 +318,10 @@ Set semantic CSS custom properties on a wrapper or the widget itself to match yo
 
 Status colors can be customized with `--jamwidgets-color-success`, `--jamwidgets-color-error`, and `--jamwidgets-color-notice`. Components adapt to their container width, so subscribe, waitlist, comments, and feedback controls stack when embedded in a narrow column.
 
+### Cascade layers and Tailwind
+
+Widget styles live in a `jamwidgets` cascade layer. Every component declares the order `@layer theme, base, components, utilities, jamwidgets;` before its rules, so the widgets rank above Tailwind v4's layers (including Preflight in `base`) whichever stylesheet the browser sees first. Your unlayered CSS still overrides the widgets. If your site declares its own layer order, keep `jamwidgets` after `base` or Preflight will reset the widgets' padding, borders and buttons.
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamwidgets/astro",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "description": "Astro components and content loaders for Jamwidgets",
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@jamwidgets/core": "^0.5.2"
+    "@jamwidgets/core": "^0.6.0"
   },
   "peerDependencies": {
     "astro": "^5.9.0 || ^6.0.0 || ^7.0.0"

package/src/Announcements.astro

@@ -54,16 +54,7 @@ import Theme from "./Theme.astro";
     isDismissible: boolean;
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-announcements]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -160,6 +151,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
     .jamwidgets-announcements {
       display: flex;

package/src/Comments.astro

@@ -262,6 +262,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
   .jamwidgets-comments {
     color: var(--jamwidgets-text-color);

package/src/Embed.astro

@@ -64,16 +64,7 @@ import Theme from "./Theme.astro";
     userVotes?: string[];
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { apiError, getVisitorId } from "@jamwidgets/core";
 
   class JamwidgetsEmbed extends HTMLElement {
     connectedCallback() {
@@ -280,8 +271,7 @@ import Theme from "./Theme.astro";
           });
 
           if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.message || "Failed to vote");
+            throw await apiError(response, "Failed to vote");
           }
 
           const data = await response.json();
@@ -321,6 +311,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
     .jamwidgets-poll {
       font-family: inherit;

package/src/Feedback.astro

@@ -3,7 +3,7 @@
  * Jamwidgets Feedback Component
  *
  * Displays a feedback form for collecting user suggestions.
- * Supports different feedback types (bug, feature, improvement, other).
+ * Supports the API's feedback types: feature, bug and general.
  *
  * @example
  * <Feedback siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} />
@@ -62,11 +62,7 @@ import Theme from "./Theme.astro";
           <span>Bug</span>
         </label>
         <label class="jamwidgets-feedback-type">
-          <input type="radio" name="feedbackType" value="improvement" />
-          <span>Improvement</span>
-        </label>
-        <label class="jamwidgets-feedback-type">
-          <input type="radio" name="feedbackType" value="other" />
+          <input type="radio" name="feedbackType" value="general" />
           <span>Other</span>
         </label>
       </div>
@@ -90,16 +86,7 @@ import Theme from "./Theme.astro";
 </div>
 
 <script>
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { apiError, getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-feedback]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -126,7 +113,7 @@ import Theme from "./Theme.astro";
       if (!content) return;
 
       const typeInput = form.querySelector('input[name="feedbackType"]:checked') as HTMLInputElement | null;
-      const feedbackType = typeInput?.value || "other";
+      const feedbackType = typeInput?.value || "general";
 
       submitBtn.disabled = true;
       submitBtn.textContent = "Sending...";
@@ -141,8 +128,7 @@ import Theme from "./Theme.astro";
         });
 
         if (!response.ok) {
-          const error = await response.json();
-          throw new Error(error.message || "Failed to submit feedback");
+          throw await apiError(response, "Failed to submit feedback");
         }
 
         textarea.value = "";
@@ -172,6 +158,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
   .jamwidgets-feedback {
     font-family: inherit;

package/src/Form.astro

@@ -67,7 +67,7 @@ import Theme from "./Theme.astro";
 </form>
 
 <script>
-  import { generateUUID, getAttributionHeaders, getVisitorId } from "@jamwidgets/core";
+  import { apiError, generateUUID, getAttributionHeaders, getVisitorId } from "@jamwidgets/core";
 
   interface FormSubmitResponse {
     success: boolean;
@@ -145,8 +145,7 @@ import Theme from "./Theme.astro";
         });
 
         if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(errorText || "Submission failed");
+          throw await apiError(response, "Submission failed");
         }
 
         const result: FormSubmitResponse = await response.json();
@@ -193,6 +192,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
     .jamwidgets-form-message {
       margin-top: 1rem;

package/src/Poll.astro

@@ -89,16 +89,7 @@ import Theme from "./Theme.astro";
     userVotes?: string[];
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { apiError, getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-poll]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -264,8 +255,7 @@ import Theme from "./Theme.astro";
         });
 
         if (!response.ok) {
-          const error = await response.json();
-          throw new Error(error.message || "Failed to vote");
+          throw await apiError(response, "Failed to vote");
         }
 
         const data = await response.json();
@@ -302,6 +292,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
   .jamwidgets-poll {
     font-family: inherit;

package/src/Reactions.astro

@@ -106,11 +106,14 @@ import Theme from "./Theme.astro";
       "X-Jamwidgets-Visitor": visitorId,
     };
 
-    // Track which reactions the user has made (stored in localStorage)
     const storageKey = `jamwidgets-reactions-${pageId}`;
-    const userReactions = new Set<string>(
-      JSON.parse(localStorage.getItem(storageKey) || "[]")
-    );
+    const userReactions = new Set<string>();
+    try {
+      const stored = JSON.parse(localStorage.getItem(storageKey) || "[]");
+      if (Array.isArray(stored)) {
+        for (const type of stored) if (typeof type === "string") userReactions.add(type);
+      }
+    } catch {}
 
     // Apply initial "reacted" state
     container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
@@ -134,7 +137,7 @@ import Theme from "./Theme.astro";
 
         // Sync with server's user reactions
         serverUserReactions.forEach((type: string) => userReactions.add(type));
-        localStorage.setItem(storageKey, JSON.stringify([...userReactions]));
+        try { localStorage.setItem(storageKey, JSON.stringify([...userReactions])); } catch {}
 
         container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
           const type = (btn as HTMLElement).dataset.reactionType;
@@ -204,7 +207,7 @@ import Theme from "./Theme.astro";
               }),
             );
           }
-          localStorage.setItem(storageKey, JSON.stringify([...userReactions]));
+          try { localStorage.setItem(storageKey, JSON.stringify([...userReactions])); } catch {}
         } catch (e) {
           console.error(isReacted ? "Failed to remove reaction:" : "Failed to add reaction:", e);
         } finally {
@@ -218,6 +221,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
   .jamwidgets-reactions {
     display: flex;

package/src/Subscribe.astro

@@ -26,6 +26,8 @@ interface Props {
   buttonText?: string;
   /** Email input placeholder (default: 'your@email.com') */
   placeholder?: string;
+  /** Accessible name for the email input (default: 'Email address') */
+  label?: string;
   /** Success message override (default: uses server response) */
   successMessage?: string;
   /** Theme preset. Defaults to inheriting the host page. */
@@ -42,6 +44,7 @@ const {
   endpoint = DEFAULT_ENDPOINT,
   buttonText = "Subscribe",
   placeholder = "your@email.com",
+  label = "Email address",
   successMessage,
   theme = "inherit",
   class: className = "",
@@ -68,6 +71,7 @@ import Theme from "./Theme.astro";
       name="email"
       required
       placeholder={placeholder}
+      aria-label={label}
       class="jamwidgets-subscribe-input"
       autocomplete="email"
     />
@@ -93,16 +97,7 @@ import Theme from "./Theme.astro";
     message: string;
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { apiError, getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-subscribe]").forEach((form) => {
     form.addEventListener("submit", async (e) => {
@@ -150,8 +145,7 @@ import Theme from "./Theme.astro";
         });
 
         if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(errorText || "Subscription failed");
+          throw await apiError(response, "Subscription failed");
         }
 
         const result: SubscribeResponse = await response.json();
@@ -199,6 +193,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
   .jamwidgets-subscribe {
     position: relative;

package/src/SubscribeForm.astro

@@ -71,7 +71,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 </form>
 
 <script>
-  import { getAttributionHeaders, getVisitorId } from "@jamwidgets/core";
+  import { apiError, getAttributionHeaders, getVisitorId } from "@jamwidgets/core";
 
   interface SubscribeResponse {
     success: boolean;
@@ -114,8 +114,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         });
 
         if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(errorText || "Subscription failed");
+          throw await apiError(response, "Subscription failed");
         }
 
         const result: SubscribeResponse = await response.json();

package/src/Theme.astro

@@ -1,4 +1,11 @@
 <style is:global>
+  /* Whichever stylesheet names a layer first fixes its order. If these widget
+     styles load before a Tailwind site's CSS, `jamwidgets` would otherwise
+     become the lowest layer and Tailwind's base reset would strip widget
+     input borders. Naming Tailwind's layers first, and `jamwidgets` last,
+     gives the same order whichever CSS loads first. Every widget repeats
+     this statement; unlayered site CSS still wins. */
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
     :where(
       .jamwidgets-announcements,

package/src/Views.astro

@@ -65,16 +65,7 @@ import Theme from "./Theme.astro";
 </div>
 
 <script>
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-views]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -158,6 +149,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
     .jamwidgets-views {
       display: inline-flex;

package/src/Waitlist.astro

@@ -17,6 +17,8 @@ interface Props {
   theme?: "inherit" | "light" | "dark" | "auto";
   /** Placeholder text for the email input (default: 'Enter your email') */
   placeholder?: string;
+  /** Accessible name for the email input (default: 'Email address') */
+  label?: string;
   /** Button text (default: 'Join Waitlist') */
   buttonText?: string;
   /** Success message (default: "You're on the list!") */
@@ -33,6 +35,7 @@ const {
   endpoint = DEFAULT_ENDPOINT,
   theme = "inherit",
   placeholder = "Enter your email",
+  label = "Email address",
   buttonText = "Join Waitlist",
   successMessage = "You're on the list!",
   class: className = "",
@@ -59,6 +62,8 @@ import Theme from "./Theme.astro";
       name="email"
       class="jamwidgets-waitlist-input"
       placeholder={placeholder}
+      aria-label={label}
+      autocomplete="email"
       required
     />
     <button type="submit" class="jamwidgets-waitlist-submit">
@@ -71,16 +76,7 @@ import Theme from "./Theme.astro";
 </div>
 
 <script>
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { apiError, getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-waitlist]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -120,8 +116,7 @@ import Theme from "./Theme.astro";
         });
 
         if (!response.ok) {
-          const error = await response.json();
-          throw new Error(error.message || "Failed to join waitlist");
+          throw await apiError(response, "Failed to join waitlist");
         }
 
         // Hide form and show success
@@ -152,6 +147,7 @@ import Theme from "./Theme.astro";
 </script>
 
 <style is:global>
+  @layer theme, base, components, utilities, jamwidgets;
   @layer jamwidgets {
   .jamwidgets-waitlist {
     font-family: inherit;