@dismissible/react-client 0.3.2-canary.3.c1b8c41 → 0.3.2-canary.4.578bcba

package/README.md

@@ -100,7 +100,7 @@ import { Dismissible } from '@dismissible/react-client';
 
 function WelcomeBanner() {
   return (
-    <Dismissible id="welcome-banner">
+    <Dismissible itemId="welcome-banner">
       <div className="banner">
         <h2>Welcome to our app!</h2>
         <p>This banner can be dismissed and won't show again.</p>
@@ -193,22 +193,42 @@ The main component for creating dismissible content.
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| `id` | `string` | ✅ | Unique identifier for the dismissible item |
+| `itemId` | `string` | ✅ | Unique identifier for the dismissible item |
 | `children` | `ReactNode` | ✅ | Content to render when not dismissed |
 | `onDismiss` | `() => void` | ❌ | Callback fired when item is dismissed |
-| `LoadingComponent` | `ComponentType<{id: string}>` | ❌ | Custom loading component |
-| `ErrorComponent` | `ComponentType<{id: string, error: Error}>` | ❌ | Custom error component |
-| `DismissButtonComponent` | `ComponentType<{id: string, onDismiss: () => Promise<void>, ariaLabel: string}>` | ❌ | Custom dismiss button |
+| `LoadingComponent` | `ComponentType<{itemId: string}>` | ❌ | Custom loading component |
+| `ErrorComponent` | `ComponentType<{itemId: string, error: Error}>` | ❌ | Custom error component |
+| `DismissButtonComponent` | `ComponentType<{onDismiss: () => Promise<void>, ariaLabel: string}>` | ❌ | Custom dismiss button |
 | `ignoreErrors` | `boolean` | ❌ | Ignore errors and display component anyway (default: false) |
 | `enableCache` | `boolean` | ❌ | Enable localStorage caching (default: true) |
 | `cachePrefix` | `string` | ❌ | Cache key prefix (default: 'dismissible') |
 | `cacheExpiration` | `number` | ❌ | Cache expiration time in milliseconds |
+| `metadata` | `string[]` | ❌ | Optional metadata as key:value pairs (can be repeated) |
 
 #### Example
 
 ```tsx
 <Dismissible
-  id="promo-banner"
+  itemId="promo-banner"
+  onDismiss={() => console.log('Banner dismissed')}
+>
+  <div className="promo">
+    <h3>Special Offer!</h3>
+    <p>Get 50% off your first order</p>
+  </div>
+</Dismissible>
+```
+
+#### Example with Metadata
+
+```tsx
+<Dismissible
+  itemId="promo-banner"
+  metadata={{
+    version: 2,
+    category: "promotional",
+    campaign: "summer-sale"
+  }}
   onDismiss={() => console.log('Banner dismissed')}
 >
   <div className="promo">
@@ -226,8 +246,18 @@ For custom implementations and advanced use cases.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `id` | `string` | ✅ | Unique identifier for the dismissible item |
-| `options` | `object` | ❌ | Cache configuration options |
+| `itemId` | `string` | ✅ | Unique identifier for the dismissible item |
+| `options` | `object` | ❌ | Configuration options |
+
+#### Options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `enableCache` | `boolean` | ❌ | Enable localStorage caching (default: true) |
+| `cachePrefix` | `string` | ❌ | Cache key prefix (default: 'dismissible') |
+| `cacheExpiration` | `number` | ❌ | Cache expiration time in milliseconds |
+| `metadata` | `IMetadata` | ❌ | Optional metadata object (`{ [key: string]: string \| number }`) |
+| `initialData` | `IDismissibleItem` | ❌ | Initial data for the dismissible item |
 
 #### Returns
 
@@ -245,8 +275,8 @@ For custom implementations and advanced use cases.
 ```tsx
 import { useDismissibleItem } from '@dismissible/react-client';
 
-function CustomDismissible({ id, children }) {
-  const { dismissedOn, dismiss, restore, isLoading, error } = useDismissibleItem(id);
+function CustomDismissible({ itemId, children }) {
+  const { dismissedOn, dismiss, restore, isLoading, error } = useDismissibleItem(itemId);
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -295,7 +325,7 @@ function App() {
 
 function Dashboard() {
   return (
-    <Dismissible id="welcome-banner">
+    <Dismissible itemId="welcome-banner">
       <div className="alert alert-info">
         <h4>Welcome!</h4>
         <p>Thanks for joining our platform. Here are some quick tips to get started.</p>
@@ -330,7 +360,7 @@ function Dashboard() {
   return (
     <div>
       {/* Dismissible state is tracked per user */}
-      <Dismissible id="user-welcome-banner">
+      <Dismissible itemId="user-welcome-banner">
         <div className="alert alert-info">
           <h4>Welcome back!</h4>
           <p>You have 3 new notifications.</p>
@@ -359,7 +389,7 @@ const CustomDismissButton = ({ onDismiss, ariaLabel }) => (
 function CustomBanner() {
   return (
     <Dismissible
-      id="custom-banner"
+      itemId="custom-banner"
       DismissButtonComponent={CustomDismissButton}
     >
       <div className="banner">
@@ -375,7 +405,7 @@ function CustomBanner() {
 ```tsx
 import { Dismissible } from '@dismissible/react-client';
 
-const CustomLoader = ({ id }) => (
+const CustomLoader = ({ itemId }) => (
   <div className="spinner">
     <div className="bounce1"></div>
     <div className="bounce2"></div>
@@ -396,7 +426,7 @@ const CustomError = ({ error }) => (
 function AdvancedBanner() {
   return (
     <Dismissible
-      id="advanced-banner"
+      itemId="advanced-banner"
       LoadingComponent={CustomLoader}
       ErrorComponent={CustomError}
     >
@@ -416,19 +446,19 @@ import { Dismissible } from '@dismissible/react-client';
 function Dashboard() {
   return (
     <div>
-      <Dismissible id="feature-announcement">
+      <Dismissible itemId="feature-announcement">
         <div className="alert alert-success">
           🎉 New feature: Dark mode is now available!
         </div>
       </Dismissible>
 
-      <Dismissible id="maintenance-notice">
+      <Dismissible itemId="maintenance-notice">
         <div className="alert alert-warning">
           ⚠️ Scheduled maintenance: Sunday 2AM-4AM EST
         </div>
       </Dismissible>
 
-      <Dismissible id="survey-request">
+      <Dismissible itemId="survey-request">
         <div className="alert alert-info">
           📝 Help us improve! Take our 2-minute survey.
         </div>
@@ -447,7 +477,7 @@ import { Dismissible } from '@dismissible/react-client';
 function RobustBanner() {
   return (
     <Dismissible
-      id="important-announcement"
+      itemId="important-announcement"
       ignoreErrors={true}
     >
       <div className="important-banner">
@@ -533,8 +563,8 @@ function AppWithTokenRefresh() {
 import { useDismissibleItem } from '@dismissible/react-client';
 import { useState, useEffect } from 'react';
 
-function SmartNotification({ id, message, type = 'info' }) {
-  const { dismissedOn, dismiss, isLoading } = useDismissibleItem(id);
+function SmartNotification({ itemId, message, type = 'info' }) {
+  const { dismissedOn, dismiss, isLoading } = useDismissibleItem(itemId);
   const [autoHide, setAutoHide] = useState(false);
 
   // Auto-hide after 10 seconds for info messages
@@ -568,6 +598,56 @@ function SmartNotification({ id, message, type = 'info' }) {
 }
 ```
 
+### Using Metadata with Dismissible Items
+
+Metadata allows you to attach additional information to dismissible items, which can be useful for analytics, filtering, or conditional logic:
+
+```tsx
+import { Dismissible, useDismissibleItem } from '@dismissible/react-client';
+
+// Using metadata with the Dismissible component (object format)
+function PromotionalBanner({ campaignId, version }) {
+  return (
+    <Dismissible
+      itemId={`promo-${campaignId}`}
+      metadata={{
+        version: version,
+        category: "promotional",
+        campaign: campaignId,
+      }}
+    >
+      <div className="promo-banner">
+        <h3>Special Offer!</h3>
+        <p>Limited time promotion</p>
+      </div>
+    </Dismissible>
+  );
+}
+
+// Using metadata with the hook (same object format)
+function CustomNotification({ itemId, category, priority }) {
+  const { dismissedOn, dismiss, isLoading } = useDismissibleItem(itemId, {
+    metadata: {
+      category,
+      priority,
+    },
+  });
+
+  if (dismissedOn) {
+    return null;
+  }
+
+  return (
+    <div className={`notification notification-${category}`}>
+      <span>Notification content</span>
+      <button onClick={dismiss} disabled={isLoading}>
+        Dismiss
+      </button>
+    </div>
+  );
+}
+```
+
 ### Restoring Dismissed Items
 
 Use the `restore` function to bring back previously dismissed content:
@@ -575,8 +655,8 @@ Use the `restore` function to bring back previously dismissed content:
 ```tsx
 import { useDismissibleItem } from '@dismissible/react-client';
 
-function RestorableBanner({ id }) {
-  const { dismissedOn, dismiss, restore, isLoading } = useDismissibleItem(id);
+function RestorableBanner({ itemId }) {
+  const { dismissedOn, dismiss, restore, isLoading } = useDismissibleItem(itemId);
 
   if (dismissedOn) {
     return (
@@ -674,10 +754,11 @@ The library includes minimal default styles. You can override them or provide yo
 The library is written in TypeScript and exports all type definitions:
 
 ```tsx
-import type { 
+import type {
   DismissibleProps,
   DismissibleProviderProps,
   JwtToken,
+  IMetadata,
 } from '@dismissible/react-client';
 
 // Custom provider wrapper

package/dist/components/Dismissible.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { IMetadata } from '../hooks/useDismissibleItem';
 /**
  * Props for the Dismissible component
  */
@@ -31,6 +32,8 @@ export interface DismissibleProps {
     cacheExpiration?: number;
     /** Ignore errors and display the component anyway (default: false) */
     ignoreErrors?: boolean;
+    /** Optional metadata object that will be converted to key:value string pairs */
+    metadata?: IMetadata;
 }
 /**
  * A wrapper component that can be dismissed and hidden by users
@@ -46,6 +49,7 @@ export interface DismissibleProps {
  * @param cachePrefix - Cache key prefix
  * @param cacheExpiration - Cache expiration time in milliseconds
  * @param ignoreErrors - Ignore errors and display the component anyway
+ * @param metadata - Optional metadata object that will be converted to key:value string pairs
  * @returns JSX element or null if dismissed
  */
 export declare const Dismissible: React.FC<DismissibleProps>;

package/dist/dismissible-client.es.js

@@ -1,59 +1,59 @@
 var he = Object.defineProperty, me = Object.defineProperties;
 var ye = Object.getOwnPropertyDescriptors;
 var M = Object.getOwnPropertySymbols;
-var re = Object.prototype.hasOwnProperty, ne = Object.prototype.propertyIsEnumerable;
-var te = (e, r, t) => r in e ? he(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, b = (e, r) => {
+var ne = Object.prototype.hasOwnProperty, se = Object.prototype.propertyIsEnumerable;
+var re = (e, r, t) => r in e ? he(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, p = (e, r) => {
   for (var t in r || (r = {}))
-    re.call(r, t) && te(e, t, r[t]);
+    ne.call(r, t) && re(e, t, r[t]);
   if (M)
     for (var t of M(r))
-      ne.call(r, t) && te(e, t, r[t]);
+      se.call(r, t) && re(e, t, r[t]);
   return e;
-}, E = (e, r) => me(e, ye(r));
-var Q = (e, r) => {
+}, R = (e, r) => me(e, ye(r));
+var V = (e, r) => {
   var t = {};
   for (var n in e)
-    re.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
+    ne.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
   if (e != null && M)
     for (var n of M(e))
-      r.indexOf(n) < 0 && ne.call(e, n) && (t[n] = e[n]);
+      r.indexOf(n) < 0 && se.call(e, n) && (t[n] = e[n]);
   return t;
 };
 var $ = (e, r, t) => new Promise((n, o) => {
   var s = (f) => {
     try {
-      l(t.next(f));
-    } catch (d) {
-      o(d);
+      i(t.next(f));
+    } catch (y) {
+      o(y);
     }
-  }, i = (f) => {
+  }, u = (f) => {
     try {
-      l(t.throw(f));
-    } catch (d) {
-      o(d);
+      i(t.throw(f));
+    } catch (y) {
+      o(y);
     }
-  }, l = (f) => f.done ? n(f.value) : Promise.resolve(f.value).then(s, i);
-  l((t = t.apply(e, r)).next());
+  }, i = (f) => f.done ? n(f.value) : Promise.resolve(f.value).then(s, u);
+  i((t = t.apply(e, r)).next());
 });
-import { jsx as U, jsxs as be } from "react/jsx-runtime";
-import { createContext as pe, useContext as we, useMemo as Y, useRef as J, useState as W, useCallback as V, useEffect as _ } from "react";
+import { jsx as T, jsxs as be } from "react/jsx-runtime";
+import { createContext as pe, useContext as we, useMemo as Z, useRef as J, useState as W, useCallback as X, useEffect as _ } from "react";
 const ge = /\{[^{}]+\}/g, Ee = () => {
   var e, r;
   return typeof process == "object" && Number.parseInt((r = (e = process == null ? void 0 : process.versions) == null ? void 0 : e.node) == null ? void 0 : r.substring(0, 2)) >= 18 && process.versions.undici;
 };
-function Re() {
+function ve() {
   return Math.random().toString(36).slice(2, 11);
 }
-function ve(e) {
-  let A = b({}, e), {
+function Re(e) {
+  let U = p({}, e), {
     baseUrl: r = "",
     Request: t = globalThis.Request,
     fetch: n = globalThis.fetch,
     querySerializer: o,
     bodySerializer: s,
-    headers: i,
-    requestInitExt: l = void 0
-  } = A, f = Q(A, [
+    headers: u,
+    requestInitExt: i = void 0
+  } = U, f = V(U, [
     "baseUrl",
     "Request",
     "fetch",
@@ -62,23 +62,23 @@ function ve(e) {
     "headers",
     "requestInitExt"
   ]);
-  l = Ee() ? l : void 0, r = ie(r);
-  const d = [];
-  function g(u, a) {
+  i = Ee() ? i : void 0, r = ae(r);
+  const y = [];
+  function d(l, a) {
     return $(this, null, function* () {
-      var ee;
-      const Z = a || {}, {
-        baseUrl: R,
-        fetch: C = n,
-        Request: O = t,
-        headers: x,
-        params: v = {},
-        parseAs: j = "json",
+      var te;
+      const ee = a || {}, {
+        baseUrl: v,
+        fetch: H = n,
+        Request: x = t,
+        headers: O,
+        params: E = {},
+        parseAs: A = "json",
         querySerializer: S,
-        bodySerializer: P = s != null ? s : xe,
+        bodySerializer: j = s != null ? s : xe,
         body: z,
-        middleware: k = []
-      } = Z, c = Q(Z, [
+        middleware: G = []
+      } = ee, I = V(ee, [
         "baseUrl",
         "fetch",
         "Request",
@@ -90,61 +90,61 @@ function ve(e) {
         "body",
         "middleware"
       ]);
-      let y = r;
-      R && (y = (ee = ie(R)) != null ? ee : r);
-      let h = typeof o == "function" ? o : se(o);
-      S && (h = typeof S == "function" ? S : se(b(b({}, typeof o == "object" ? o : {}), S)));
-      const H = z === void 0 ? void 0 : P(
+      let c = r;
+      v && (c = (te = ae(v)) != null ? te : r);
+      let b = typeof o == "function" ? o : oe(o);
+      S && (b = typeof S == "function" ? S : oe(p(p({}, typeof o == "object" ? o : {}), S)));
+      const h = z === void 0 ? void 0 : j(
         z,
         // Note: we declare mergeHeaders() both here and below because it’s a bit of a chicken-or-egg situation:
         // bodySerializer() needs all headers so we aren’t dropping ones set by the user, however,
         // the result of this ALSO sets the lowest-priority content-type header. So we re-merge below,
         // setting the content-type at the very beginning to be overwritten.
         // Lastly, based on the way headers work, it’s not a simple “present-or-not” check becauase null intentionally un-sets headers.
-        oe(i, x, v.header)
-      ), G = oe(
+        ie(u, O, E.header)
+      ), k = ie(
         // with no body, we should not to set Content-Type
-        H === void 0 || // if serialized body is FormData; browser will correctly set Content-Type & boundary expression
-        H instanceof FormData ? {} : {
+        h === void 0 || // if serialized body is FormData; browser will correctly set Content-Type & boundary expression
+        h instanceof FormData ? {} : {
           "Content-Type": "application/json"
         },
-        i,
-        x,
-        v.header
-      ), D = [...d, ...k], de = E(b(b({
+        u,
+        O,
+        E.header
+      ), C = [...y, ...G], K = R(p(p({
         redirect: "follow"
-      }, f), c), {
-        body: H,
-        headers: G
+      }, f), I), {
+        body: h,
+        headers: k
       });
-      let F, L, T = new O(
-        Se(u, { baseUrl: y, params: v, querySerializer: h }),
-        de
+      let F, L, D = new x(
+        Se(l, { baseUrl: c, params: E, querySerializer: b }),
+        K
       ), m;
-      for (const w in c)
-        w in T || (T[w] = c[w]);
-      if (D.length) {
-        F = Re(), L = Object.freeze({
-          baseUrl: y,
-          fetch: C,
-          parseAs: j,
-          querySerializer: h,
-          bodySerializer: P
+      for (const g in I)
+        g in D || (D[g] = I[g]);
+      if (C.length) {
+        F = ve(), L = Object.freeze({
+          baseUrl: c,
+          fetch: H,
+          parseAs: A,
+          querySerializer: b,
+          bodySerializer: j
         });
-        for (const w of D)
-          if (w && typeof w == "object" && typeof w.onRequest == "function") {
-            const p = yield w.onRequest({
-              request: T,
-              schemaPath: u,
-              params: v,
+        for (const g of C)
+          if (g && typeof g == "object" && typeof g.onRequest == "function") {
+            const w = yield g.onRequest({
+              request: D,
+              schemaPath: l,
+              params: E,
               options: L,
               id: F
             });
-            if (p)
-              if (p instanceof O)
-                T = p;
-              else if (p instanceof Response) {
-                m = p;
+            if (w)
+              if (w instanceof x)
+                D = w;
+              else if (w instanceof Response) {
+                m = w;
                 break;
               } else
                 throw new Error("onRequest: must return new Request() or Response() when modifying the request");
@@ -152,46 +152,46 @@ function ve(e) {
       }
       if (!m) {
         try {
-          m = yield C(T, l);
-        } catch (w) {
-          let p = w;
-          if (D.length)
-            for (let q = D.length - 1; q >= 0; q--) {
-              const N = D[q];
+          m = yield H(D, i);
+        } catch (g) {
+          let w = g;
+          if (C.length)
+            for (let q = C.length - 1; q >= 0; q--) {
+              const N = C[q];
               if (N && typeof N == "object" && typeof N.onError == "function") {
-                const I = yield N.onError({
-                  request: T,
-                  error: p,
-                  schemaPath: u,
-                  params: v,
+                const P = yield N.onError({
+                  request: D,
+                  error: w,
+                  schemaPath: l,
+                  params: E,
                   options: L,
                   id: F
                 });
-                if (I) {
-                  if (I instanceof Response) {
-                    p = void 0, m = I;
+                if (P) {
+                  if (P instanceof Response) {
+                    w = void 0, m = P;
                     break;
                   }
-                  if (I instanceof Error) {
-                    p = I;
+                  if (P instanceof Error) {
+                    w = P;
                     continue;
                   }
                   throw new Error("onError: must return new Response() or instance of Error");
                 }
               }
             }
-          if (p)
-            throw p;
+          if (w)
+            throw w;
         }
-        if (D.length)
-          for (let w = D.length - 1; w >= 0; w--) {
-            const p = D[w];
-            if (p && typeof p == "object" && typeof p.onResponse == "function") {
-              const q = yield p.onResponse({
-                request: T,
+        if (C.length)
+          for (let g = C.length - 1; g >= 0; g--) {
+            const w = C[g];
+            if (w && typeof w == "object" && typeof w.onResponse == "function") {
+              const q = yield w.onResponse({
+                request: D,
                 response: m,
-                schemaPath: u,
-                params: v,
+                schemaPath: l,
+                params: E,
                 options: L,
                 id: F
               });
@@ -203,68 +203,68 @@ function ve(e) {
             }
           }
       }
-      if (m.status === 204 || T.method === "HEAD" || m.headers.get("Content-Length") === "0")
+      if (m.status === 204 || D.method === "HEAD" || m.headers.get("Content-Length") === "0")
         return m.ok ? { data: void 0, response: m } : { error: void 0, response: m };
       if (m.ok)
-        return j === "stream" ? { data: m.body, response: m } : { data: yield m[j](), response: m };
-      let K = yield m.text();
+        return A === "stream" ? { data: m.body, response: m } : { data: yield m[A](), response: m };
+      let Q = yield m.text();
       try {
-        K = JSON.parse(K);
-      } catch (w) {
+        Q = JSON.parse(Q);
+      } catch (g) {
       }
-      return { error: K, response: m };
+      return { error: Q, response: m };
     });
   }
   return {
-    request(u, a, R) {
-      return g(a, E(b({}, R), { method: u.toUpperCase() }));
+    request(l, a, v) {
+      return d(a, R(p({}, v), { method: l.toUpperCase() }));
     },
     /** Call a GET endpoint */
-    GET(u, a) {
-      return g(u, E(b({}, a), { method: "GET" }));
+    GET(l, a) {
+      return d(l, R(p({}, a), { method: "GET" }));
     },
     /** Call a PUT endpoint */
-    PUT(u, a) {
-      return g(u, E(b({}, a), { method: "PUT" }));
+    PUT(l, a) {
+      return d(l, R(p({}, a), { method: "PUT" }));
     },
     /** Call a POST endpoint */
-    POST(u, a) {
-      return g(u, E(b({}, a), { method: "POST" }));
+    POST(l, a) {
+      return d(l, R(p({}, a), { method: "POST" }));
     },
     /** Call a DELETE endpoint */
-    DELETE(u, a) {
-      return g(u, E(b({}, a), { method: "DELETE" }));
+    DELETE(l, a) {
+      return d(l, R(p({}, a), { method: "DELETE" }));
     },
     /** Call a OPTIONS endpoint */
-    OPTIONS(u, a) {
-      return g(u, E(b({}, a), { method: "OPTIONS" }));
+    OPTIONS(l, a) {
+      return d(l, R(p({}, a), { method: "OPTIONS" }));
     },
     /** Call a HEAD endpoint */
-    HEAD(u, a) {
-      return g(u, E(b({}, a), { method: "HEAD" }));
+    HEAD(l, a) {
+      return d(l, R(p({}, a), { method: "HEAD" }));
     },
     /** Call a PATCH endpoint */
-    PATCH(u, a) {
-      return g(u, E(b({}, a), { method: "PATCH" }));
+    PATCH(l, a) {
+      return d(l, R(p({}, a), { method: "PATCH" }));
     },
     /** Call a TRACE endpoint */
-    TRACE(u, a) {
-      return g(u, E(b({}, a), { method: "TRACE" }));
+    TRACE(l, a) {
+      return d(l, R(p({}, a), { method: "TRACE" }));
     },
     /** Register middleware */
-    use(...u) {
-      for (const a of u)
+    use(...l) {
+      for (const a of l)
         if (a) {
           if (typeof a != "object" || !("onRequest" in a || "onResponse" in a || "onError" in a))
             throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");
-          d.push(a);
+          y.push(a);
         }
     },
     /** Unregister middleware */
-    eject(...u) {
-      for (const a of u) {
-        const R = d.indexOf(a);
-        R !== -1 && d.splice(R, 1);
+    eject(...l) {
+      for (const a of l) {
+        const v = y.indexOf(a);
+        v !== -1 && y.splice(v, 1);
       }
     }
   };
@@ -278,7 +278,7 @@ function B(e, r, t) {
     );
   return `${e}=${(t == null ? void 0 : t.allowReserved) === !0 ? r : encodeURIComponent(r)}`;
 }
-function le(e, r, t) {
+function ue(e, r, t) {
   if (!r || typeof r != "object")
     return "";
   const n = [], o = {
@@ -287,41 +287,41 @@ function le(e, r, t) {
     matrix: ";"
   }[t.style] || "&";
   if (t.style !== "deepObject" && t.explode === !1) {
-    for (const l in r)
-      n.push(l, t.allowReserved === !0 ? r[l] : encodeURIComponent(r[l]));
-    const i = n.join(",");
+    for (const i in r)
+      n.push(i, t.allowReserved === !0 ? r[i] : encodeURIComponent(r[i]));
+    const u = n.join(",");
     switch (t.style) {
       case "form":
-        return `${e}=${i}`;
+        return `${e}=${u}`;
       case "label":
-        return `.${i}`;
+        return `.${u}`;
       case "matrix":
-        return `;${e}=${i}`;
+        return `;${e}=${u}`;
       default:
-        return i;
+        return u;
     }
   }
-  for (const i in r) {
-    const l = t.style === "deepObject" ? `${e}[${i}]` : i;
-    n.push(B(l, r[i], t));
+  for (const u in r) {
+    const i = t.style === "deepObject" ? `${e}[${u}]` : u;
+    n.push(B(i, r[u], t));
   }
   const s = n.join(o);
   return t.style === "label" || t.style === "matrix" ? `${o}${s}` : s;
 }
-function ue(e, r, t) {
+function fe(e, r, t) {
   if (!Array.isArray(r))
     return "";
   if (t.explode === !1) {
-    const s = { form: ",", spaceDelimited: "%20", pipeDelimited: "|" }[t.style] || ",", i = (t.allowReserved === !0 ? r : r.map((l) => encodeURIComponent(l))).join(s);
+    const s = { form: ",", spaceDelimited: "%20", pipeDelimited: "|" }[t.style] || ",", u = (t.allowReserved === !0 ? r : r.map((i) => encodeURIComponent(i))).join(s);
     switch (t.style) {
       case "simple":
-        return i;
+        return u;
       case "label":
-        return `.${i}`;
+        return `.${u}`;
       case "matrix":
-        return `;${e}=${i}`;
+        return `;${e}=${u}`;
       default:
-        return `${e}=${i}`;
+        return `${e}=${u}`;
     }
   }
   const n = { simple: ",", label: ".", matrix: ";" }[t.style] || "&", o = [];
@@ -329,7 +329,7 @@ function ue(e, r, t) {
     t.style === "simple" || t.style === "label" ? o.push(t.allowReserved === !0 ? s : encodeURIComponent(s)) : o.push(B(e, s, t));
   return t.style === "label" || t.style === "matrix" ? `${n}${o.join(n)}` : o.join(n);
 }
-function se(e) {
+function oe(e) {
   return function(t) {
     const n = [];
     if (t && typeof t == "object")
@@ -340,7 +340,7 @@ function se(e) {
             if (s.length === 0)
               continue;
             n.push(
-              ue(o, s, E(b({
+              fe(o, s, R(p({
                 style: "form",
                 explode: !0
               }, e == null ? void 0 : e.array), {
@@ -351,7 +351,7 @@ function se(e) {
           }
           if (typeof s == "object") {
             n.push(
-              le(o, s, E(b({
+              ue(o, s, R(p({
                 style: "deepObject",
                 explode: !0
               }, e == null ? void 0 : e.object), {
@@ -370,23 +370,23 @@ function Ce(e, r) {
   var n;
   let t = e;
   for (const o of (n = e.match(ge)) != null ? n : []) {
-    let s = o.substring(1, o.length - 1), i = !1, l = "simple";
-    if (s.endsWith("*") && (i = !0, s = s.substring(0, s.length - 1)), s.startsWith(".") ? (l = "label", s = s.substring(1)) : s.startsWith(";") && (l = "matrix", s = s.substring(1)), !r || r[s] === void 0 || r[s] === null)
+    let s = o.substring(1, o.length - 1), u = !1, i = "simple";
+    if (s.endsWith("*") && (u = !0, s = s.substring(0, s.length - 1)), s.startsWith(".") ? (i = "label", s = s.substring(1)) : s.startsWith(";") && (i = "matrix", s = s.substring(1)), !r || r[s] === void 0 || r[s] === null)
       continue;
     const f = r[s];
     if (Array.isArray(f)) {
-      t = t.replace(o, ue(s, f, { style: l, explode: i }));
+      t = t.replace(o, fe(s, f, { style: i, explode: u }));
       continue;
     }
     if (typeof f == "object") {
-      t = t.replace(o, le(s, f, { style: l, explode: i }));
+      t = t.replace(o, ue(s, f, { style: i, explode: u }));
       continue;
     }
-    if (l === "matrix") {
+    if (i === "matrix") {
       t = t.replace(o, `;${B(s, f)}`);
       continue;
     }
-    t = t.replace(o, l === "label" ? `.${encodeURIComponent(f)}` : encodeURIComponent(f));
+    t = t.replace(o, i === "label" ? `.${encodeURIComponent(f)}` : encodeURIComponent(f));
   }
   return t;
 }
@@ -401,7 +401,7 @@ function Se(e, r) {
   let n = r.querySerializer((s = r.params.query) != null ? s : {});
   return n.startsWith("?") && (n = n.substring(1)), n && (t += `?${n}`), t;
 }
-function oe(...e) {
+function ie(...e) {
   const r = new Headers();
   for (const t of e) {
     if (!t || typeof t != "object")
@@ -411,25 +411,25 @@ function oe(...e) {
       if (s === null)
         r.delete(o);
       else if (Array.isArray(s))
-        for (const i of s)
-          r.append(o, i);
+        for (const u of s)
+          r.append(o, u);
       else s !== void 0 && r.set(o, s);
   }
   return r;
 }
-function ie(e) {
+function ae(e) {
   return e.endsWith("/") ? e.substring(0, e.length - 1) : e;
 }
-const ae = (e, r, t) => {
+const ce = (e, r, t) => {
   try {
     const n = `${r}_${e}`, o = localStorage.getItem(n);
     if (!o) return null;
-    const { data: s, timestamp: i } = JSON.parse(o);
-    return t && Date.now() - i > t ? (localStorage.removeItem(n), null) : s;
+    const { data: s, timestamp: u } = JSON.parse(o);
+    return t && Date.now() - u > t ? (localStorage.removeItem(n), null) : s;
   } catch (n) {
     return null;
   }
-}, X = (e, r, t) => {
+}, Y = (e, r, t) => {
   try {
     const n = `${t}_${e}`, o = {
       data: r,
@@ -439,184 +439,190 @@ const ae = (e, r, t) => {
   } catch (n) {
     console.warn("Failed to cache dismissible item:", n);
   }
-}, ce = (e, r) => {
+}, le = (e, r) => {
   try {
     const t = `${r}_${e}`;
     localStorage.removeItem(t);
   } catch (t) {
     console.warn("Failed to remove cached dismissible item:", t);
   }
-}, fe = pe(
+}, de = pe(
   null
 ), $e = () => {
-  const e = we(fe);
+  const e = we(de);
   if (!e)
     throw new Error(
       "useDismissibleContext must be used within a DismissibleProvider"
     );
   return e;
-}, Ae = "dismissible", je = (e, r = {}) => {
-  var k;
+}, Ae = (e) => {
+  if (e)
+    return Object.entries(e).map(([r, t]) => `${r}:${t}`);
+}, je = "dismissible", De = (e, r = {}) => {
+  var I;
   const {
     initialData: t,
     enableCache: n = !0,
-    cachePrefix: o = Ae,
-    cacheExpiration: s
-  } = r, i = $e(), { userId: l } = i, f = Y(() => ve({
+    cachePrefix: o = je,
+    cacheExpiration: s,
+    metadata: u
+  } = r, i = $e(), { userId: f } = i, y = Z(() => Re({
     baseUrl: i.baseUrl,
     headers: {}
-  }), [i.baseUrl]), d = Y(() => `${l}-${e}`, [l, e]), g = J({
+  }), [i.baseUrl]), d = Z(() => `${f}-${e}`, [f, e]), U = J({
     enableCache: n,
     cachePrefix: o,
     cacheExpiration: s
-  }), A = J(e), u = J(d), a = J(null), [R, C] = W(!1), [O, x] = W(null), [v, j] = W(() => {
+  }), l = J(e), a = J(d), v = J(null), [H, x] = W(!1), [O, E] = W(null), [A, S] = W(() => {
     if (t) return t;
     if (n) {
-      const c = ae(
+      const c = ce(
         d,
         o,
         s
       );
       if (c) return c;
     }
-  }), S = V(() => $(void 0, null, function* () {
-    var y;
+  }), j = X(() => $(void 0, null, function* () {
+    var b;
     if (n) {
-      const h = ae(
+      const h = ce(
         d,
         o,
         s
       );
       if (h != null && h.dismissedAt) {
-        j(h), C(!1);
+        S(h), x(!1);
         return;
       }
     }
-    (y = a.current) == null || y.abort();
+    (b = v.current) == null || b.abort();
     const c = new AbortController();
-    a.current = c, C(!0), x(null);
+    v.current = c, x(!0), E(null);
     try {
-      const h = yield i.getAuthHeaders(), { data: H, error: G } = yield f.GET(
-        "/v1/user/{userId}/dismissible-item/{itemId}",
+      const h = yield i.getAuthHeaders(), k = Ae(u), { data: C, error: K } = yield y.GET(
+        "/v1/users/{userId}/items/{itemId}",
         {
           params: {
             path: {
-              userId: l,
+              userId: f,
               itemId: e
-            }
+            },
+            query: k ? { metadata: k } : void 0
           },
           headers: h,
           signal: c.signal
         }
       );
-      if (G || !H)
+      if (K || !C)
         throw new Error("Failed to fetch dismissible item");
-      j(H.data), n && X(d, H.data, o);
+      S(C.data), n && Y(d, C.data, o);
     } catch (h) {
       if (h instanceof Error && h.name === "AbortError")
         return;
-      x(
+      E(
         h instanceof Error ? h : new Error("Unknown error occurred")
       );
     } finally {
-      C(!1);
+      x(!1);
     }
   }), [
     e,
-    l,
+    f,
     d,
     n,
     o,
     s,
-    f,
+    u,
+    y,
     i
   ]);
   _(() => {
-    const c = A.current !== e, y = u.current !== d;
-    c || y ? (A.current = e, u.current = d, S()) : t || S();
-  }, [e, d, t, S]), _(() => () => {
+    const c = l.current !== e, b = a.current !== d;
+    c || b ? (l.current = e, a.current = d, j()) : t || j();
+  }, [e, d, t, j]), _(() => () => {
     var c;
-    (c = a.current) == null || c.abort();
+    (c = v.current) == null || c.abort();
   }, []), _(() => {
-    const c = g.current;
-    (c.enableCache !== n || c.cachePrefix !== o || c.cacheExpiration !== s) && (c.cachePrefix !== o && ce(d, c.cachePrefix), !n && c.enableCache && ce(d, c.cachePrefix), g.current = {
+    const c = U.current;
+    (c.enableCache !== n || c.cachePrefix !== o || c.cacheExpiration !== s) && (c.cachePrefix !== o && le(d, c.cachePrefix), !n && c.enableCache && le(d, c.cachePrefix), U.current = {
       enableCache: n,
       cachePrefix: o,
       cacheExpiration: s
-    }, S());
-  }, [n, o, s, d, S]);
-  const P = V(() => $(void 0, null, function* () {
-    x(null);
+    }, j());
+  }, [n, o, s, d, j]);
+  const z = X(() => $(void 0, null, function* () {
+    E(null);
     try {
-      const c = yield i.getAuthHeaders(), { data: y, error: h } = yield f.DELETE(
-        "/v1/user/{userId}/dismissible-item/{itemId}",
+      const c = yield i.getAuthHeaders(), { data: b, error: h } = yield y.DELETE(
+        "/v1/users/{userId}/items/{itemId}",
         {
           params: {
             path: {
-              userId: l,
+              userId: f,
               itemId: e
             }
           },
           headers: c
         }
       );
-      if (h || !y)
+      if (h || !b)
         throw new Error("Failed to dismiss item");
-      j(y.data), n && X(d, y.data, o);
+      S(b.data), n && Y(d, b.data, o);
     } catch (c) {
-      throw x(
+      throw E(
         c instanceof Error ? c : new Error("Failed to dismiss item")
       ), c;
     }
   }), [
     e,
-    l,
+    f,
     d,
     n,
     o,
-    f,
+    y,
     i
-  ]), z = V(() => $(void 0, null, function* () {
-    x(null);
+  ]), G = X(() => $(void 0, null, function* () {
+    E(null);
     try {
-      const c = yield i.getAuthHeaders(), { data: y, error: h } = yield f.POST(
-        "/v1/user/{userId}/dismissible-item/{itemId}",
+      const c = yield i.getAuthHeaders(), { data: b, error: h } = yield y.POST(
+        "/v1/users/{userId}/items/{itemId}",
         {
           params: {
             path: {
-              userId: l,
+              userId: f,
               itemId: e
             }
           },
           headers: c
         }
       );
-      if (h || !y)
+      if (h || !b)
         throw new Error("Failed to restore item");
-      j(y.data), n && X(d, y.data, o);
+      S(b.data), n && Y(d, b.data, o);
     } catch (c) {
-      throw x(
+      throw E(
         c instanceof Error ? c : new Error("Failed to restore item")
       ), c;
     }
   }), [
     e,
-    l,
+    f,
     d,
     n,
     o,
-    f,
+    y,
     i
   ]);
   return {
-    dismissedOn: (k = v == null ? void 0 : v.dismissedAt) != null ? k : null,
-    dismiss: P,
-    restore: z,
-    isLoading: R,
+    dismissedOn: (I = A == null ? void 0 : A.dismissedAt) != null ? I : null,
+    dismiss: z,
+    restore: G,
+    isLoading: H,
     error: O,
-    item: v
+    item: A
   };
-}, De = () => /* @__PURE__ */ U("div", { className: "dismissible-loading", "aria-live": "polite", children: "Loading..." }), Te = () => /* @__PURE__ */ U("div", { className: "dismissible-error", role: "alert", children: "Unable to load content. Please try again later." }), Ue = ({ onDismiss: e, ariaLabel: r }) => /* @__PURE__ */ U(
+}, Te = () => /* @__PURE__ */ T("div", { className: "dismissible-loading", "aria-live": "polite", children: "Loading..." }), Ue = () => /* @__PURE__ */ T("div", { className: "dismissible-error", role: "alert", children: "Unable to load content. Please try again later." }), qe = ({ onDismiss: e, ariaLabel: r }) => /* @__PURE__ */ T(
   "button",
   {
     className: "dismissible-button",
@@ -625,40 +631,42 @@ const ae = (e, r, t) => {
     type: "button",
     children: "×"
   }
-), ke = ({
+), Fe = ({
   itemId: e,
   children: r,
   onDismiss: t,
-  LoadingComponent: n = De,
-  ErrorComponent: o = Te,
-  DismissButtonComponent: s = Ue,
-  enableCache: i,
-  cachePrefix: l,
+  LoadingComponent: n = Te,
+  ErrorComponent: o = Ue,
+  DismissButtonComponent: s = qe,
+  enableCache: u,
+  cachePrefix: i,
   cacheExpiration: f,
-  ignoreErrors: d = !1
+  ignoreErrors: y = !1,
+  metadata: d
 }) => {
-  const { dismissedOn: g, isLoading: A, error: u, dismiss: a } = je(
+  const { dismissedOn: U, isLoading: l, error: a, dismiss: v } = De(
     e,
     {
-      enableCache: i,
-      cachePrefix: l,
-      cacheExpiration: f
+      enableCache: u,
+      cachePrefix: i,
+      cacheExpiration: f,
+      metadata: d
     }
-  ), [R, C] = W(!1);
+  ), [H, x] = W(!1);
   _(() => {
-    C(!1);
+    x(!1);
   }, [e]);
   const O = () => $(void 0, null, function* () {
-    C(!0);
+    x(!0);
     try {
-      yield a(), t == null || t();
-    } catch (x) {
-      C(!1);
+      yield v(), t == null || t();
+    } catch (E) {
+      x(!1);
     }
   });
-  return A && n ? /* @__PURE__ */ U(n, { itemId: e }) : A && !n ? null : u && o && !d ? /* @__PURE__ */ U(o, { itemId: e, error: u }) : g || R ? null : /* @__PURE__ */ be("div", { className: "dismissible-container", children: [
-    /* @__PURE__ */ U("div", { className: "dismissible-content", children: r }),
-    s ? /* @__PURE__ */ U(
+  return l && n ? /* @__PURE__ */ T(n, { itemId: e }) : l && !n ? null : a && o && !y ? /* @__PURE__ */ T(o, { itemId: e, error: a }) : U || H ? null : /* @__PURE__ */ be("div", { className: "dismissible-container", children: [
+    /* @__PURE__ */ T("div", { className: "dismissible-content", children: r }),
+    s ? /* @__PURE__ */ T(
       s,
       {
         onDismiss: O,
@@ -676,45 +684,45 @@ const ae = (e, r, t) => {
       return;
     }
   return e;
-}), qe = (e) => $(void 0, null, function* () {
+}), Oe = (e) => $(void 0, null, function* () {
   const r = yield He(e);
   return r ? { Authorization: `Bearer ${r}` } : {};
-}), Oe = (e) => {
+}), Ie = (e) => {
   try {
     const r = new URL(e), t = r.hostname === "localhost" || r.hostname === "127.0.0.1" || r.hostname === "[::1]", n = r.protocol === "https:";
     return { isSecure: n || t, isLocalhost: t, isHttps: n };
   } catch (r) {
     return { isSecure: !1, isLocalhost: !1, isHttps: !1 };
   }
-}, Fe = ({
+}, Le = ({
   userId: e,
   jwt: r,
   baseUrl: t,
   children: n
 }) => {
-  const { isSecure: o } = Oe(t);
+  const { isSecure: o } = Ie(t);
   o || console.warn(
     `[dismissible] Insecure baseUrl "${t}". Use https:// in production (or localhost for development). JWT tokens may be exposed over insecure connections.`
   );
-  const s = Y(
+  const s = Z(
     () => ({
       userId: e,
       jwt: r,
       baseUrl: t,
       getAuthHeaders: () => $(void 0, null, function* () {
-        return yield qe(r);
+        return yield Oe(r);
       })
     }),
     [e, r, t]
   );
-  return /* @__PURE__ */ U(fe.Provider, { value: s, children: n });
+  return /* @__PURE__ */ T(de.Provider, { value: s, children: n });
 };
 export {
-  ke as Dismissible,
-  fe as DismissibleContext,
-  Fe as DismissibleProvider,
-  qe as getAuthHeaders,
+  Fe as Dismissible,
+  de as DismissibleContext,
+  Le as DismissibleProvider,
+  Oe as getAuthHeaders,
   He as resolveJwt,
   $e as useDismissibleContext,
-  je as useDismissibleItem
+  De as useDismissibleItem
 };

package/dist/dismissible-client.umd.js

@@ -1 +1 @@
-(function(c,d){typeof exports=="object"&&typeof module!="undefined"?d(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],d):(c=typeof globalThis!="undefined"?globalThis:c||self,d(c.DismissibleClient={},c.React.jsxRuntime,c.React))})(this,function(c,d,o){"use strict";var Ae=Object.defineProperty,$e=Object.defineProperties;var Te=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var ye=Object.prototype.hasOwnProperty,be=Object.prototype.propertyIsEnumerable;var me=(c,d,o)=>d in c?Ae(c,d,{enumerable:!0,configurable:!0,writable:!0,value:o}):c[d]=o,g=(c,d)=>{for(var o in d||(d={}))ye.call(d,o)&&me(c,o,d[o]);if(Q)for(var o of Q(d))be.call(d,o)&&me(c,o,d[o]);return c},S=(c,d)=>$e(c,Te(d));var re=(c,d)=>{var o={};for(var R in c)ye.call(c,R)&&d.indexOf(R)<0&&(o[R]=c[R]);if(c!=null&&Q)for(var R of Q(c))d.indexOf(R)<0&&be.call(c,R)&&(o[R]=c[R]);return o};var U=(c,d,o)=>new Promise((R,M)=>{var V=j=>{try{q(o.next(j))}catch(F){M(F)}},X=j=>{try{q(o.throw(j))}catch(F){M(F)}},q=j=>j.done?R(j.value):Promise.resolve(j.value).then(V,X);q((o=o.apply(c,d)).next())});const R=/\{[^{}]+\}/g,M=()=>{var e,r;return typeof process=="object"&&Number.parseInt((r=(e=process==null?void 0:process.versions)==null?void 0:e.node)==null?void 0:r.substring(0,2))>=18&&process.versions.undici};function V(){return Math.random().toString(36).slice(2,11)}function X(e){let H=g({},e),{baseUrl:r="",Request:t=globalThis.Request,fetch:n=globalThis.fetch,querySerializer:i,bodySerializer:s,headers:a,requestInitExt:h=void 0}=H,b=re(H,["baseUrl","Request","fetch","querySerializer","bodySerializer","headers","requestInitExt"]);h=M()?h:void 0,r=ie(r);const m=[];function C(f,l){return U(this,null,function*(){var he;const de=l||{},{baseUrl:x,fetch:A=n,Request:L=t,headers:$,params:D={},parseAs:O="json",querySerializer:T,bodySerializer:J=s!=null?s:pe,body:W,middleware:_=[]}=de,u=re(de,["baseUrl","fetch","Request","headers","params","parseAs","querySerializer","bodySerializer","body","middleware"]);let p=r;x&&(p=(he=ie(x))!=null?he:r);let y=typeof i=="function"?i:se(i);T&&(y=typeof T=="function"?T:se(g(g({},typeof i=="object"?i:{}),T)));const k=W===void 0?void 0:J(W,ne(a,$,D.header)),ee=ne(k===void 0||k instanceof FormData?{}:{"Content-Type":"application/json"},a,$,D.header),P=[...m,..._],je=S(g(g({redirect:"follow"},b),u),{body:k,headers:ee});let B,G,I=new L(ge(f,{baseUrl:p,params:D,querySerializer:y}),je),w;for(const v in u)v in I||(I[v]=u[v]);if(P.length){B=V(),G=Object.freeze({baseUrl:p,fetch:A,parseAs:O,querySerializer:y,bodySerializer:J});for(const v of P)if(v&&typeof v=="object"&&typeof v.onRequest=="function"){const E=yield v.onRequest({request:I,schemaPath:f,params:D,options:G,id:B});if(E)if(E instanceof L)I=E;else if(E instanceof Response){w=E;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!w){try{w=yield A(I,h)}catch(v){let E=v;if(P.length)for(let z=P.length-1;z>=0;z--){const K=P[z];if(K&&typeof K=="object"&&typeof K.onError=="function"){const N=yield K.onError({request:I,error:E,schemaPath:f,params:D,options:G,id:B});if(N){if(N instanceof Response){E=void 0,w=N;break}if(N instanceof Error){E=N;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(E)throw E}if(P.length)for(let v=P.length-1;v>=0;v--){const E=P[v];if(E&&typeof E=="object"&&typeof E.onResponse=="function"){const z=yield E.onResponse({request:I,response:w,schemaPath:f,params:D,options:G,id:B});if(z){if(!(z instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");w=z}}}}if(w.status===204||I.method==="HEAD"||w.headers.get("Content-Length")==="0")return w.ok?{data:void 0,response:w}:{error:void 0,response:w};if(w.ok)return O==="stream"?{data:w.body,response:w}:{data:yield w[O](),response:w};let te=yield w.text();try{te=JSON.parse(te)}catch(v){}return{error:te,response:w}})}return{request(f,l,x){return C(l,S(g({},x),{method:f.toUpperCase()}))},GET(f,l){return C(f,S(g({},l),{method:"GET"}))},PUT(f,l){return C(f,S(g({},l),{method:"PUT"}))},POST(f,l){return C(f,S(g({},l),{method:"POST"}))},DELETE(f,l){return C(f,S(g({},l),{method:"DELETE"}))},OPTIONS(f,l){return C(f,S(g({},l),{method:"OPTIONS"}))},HEAD(f,l){return C(f,S(g({},l),{method:"HEAD"}))},PATCH(f,l){return C(f,S(g({},l),{method:"PATCH"}))},TRACE(f,l){return C(f,S(g({},l),{method:"TRACE"}))},use(...f){for(const l of f)if(l){if(typeof l!="object"||!("onRequest"in l||"onResponse"in l||"onError"in l))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");m.push(l)}},eject(...f){for(const l of f){const x=m.indexOf(l);x!==-1&&m.splice(x,1)}}}}function q(e,r,t){if(r==null)return"";if(typeof r=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${e}=${(t==null?void 0:t.allowReserved)===!0?r:encodeURIComponent(r)}`}function j(e,r,t){if(!r||typeof r!="object")return"";const n=[],i={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const h in r)n.push(h,t.allowReserved===!0?r[h]:encodeURIComponent(r[h]));const a=n.join(",");switch(t.style){case"form":return`${e}=${a}`;case"label":return`.${a}`;case"matrix":return`;${e}=${a}`;default:return a}}for(const a in r){const h=t.style==="deepObject"?`${e}[${a}]`:a;n.push(q(h,r[a],t))}const s=n.join(i);return t.style==="label"||t.style==="matrix"?`${i}${s}`:s}function F(e,r,t){if(!Array.isArray(r))return"";if(t.explode===!1){const s={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",a=(t.allowReserved===!0?r:r.map(h=>encodeURIComponent(h))).join(s);switch(t.style){case"simple":return a;case"label":return`.${a}`;case"matrix":return`;${e}=${a}`;default:return`${e}=${a}`}}const n={simple:",",label:".",matrix:";"}[t.style]||"&",i=[];for(const s of r)t.style==="simple"||t.style==="label"?i.push(t.allowReserved===!0?s:encodeURIComponent(s)):i.push(q(e,s,t));return t.style==="label"||t.style==="matrix"?`${n}${i.join(n)}`:i.join(n)}function se(e){return function(t){const n=[];if(t&&typeof t=="object")for(const i in t){const s=t[i];if(s!=null){if(Array.isArray(s)){if(s.length===0)continue;n.push(F(i,s,S(g({style:"form",explode:!0},e==null?void 0:e.array),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}if(typeof s=="object"){n.push(j(i,s,S(g({style:"deepObject",explode:!0},e==null?void 0:e.object),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}n.push(q(i,s,e))}}return n.join("&")}}function we(e,r){var n;let t=e;for(const i of(n=e.match(R))!=null?n:[]){let s=i.substring(1,i.length-1),a=!1,h="simple";if(s.endsWith("*")&&(a=!0,s=s.substring(0,s.length-1)),s.startsWith(".")?(h="label",s=s.substring(1)):s.startsWith(";")&&(h="matrix",s=s.substring(1)),!r||r[s]===void 0||r[s]===null)continue;const b=r[s];if(Array.isArray(b)){t=t.replace(i,F(s,b,{style:h,explode:a}));continue}if(typeof b=="object"){t=t.replace(i,j(s,b,{style:h,explode:a}));continue}if(h==="matrix"){t=t.replace(i,`;${q(s,b)}`);continue}t=t.replace(i,h==="label"?`.${encodeURIComponent(b)}`:encodeURIComponent(b))}return t}function pe(e,r){var t,n;return e instanceof FormData?e:r&&(r.get instanceof Function?(t=r.get("Content-Type"))!=null?t:r.get("content-type"):(n=r["Content-Type"])!=null?n:r["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(e).toString():JSON.stringify(e)}function ge(e,r){var i,s;let t=`${r.baseUrl}${e}`;(i=r.params)!=null&&i.path&&(t=we(t,r.params.path));let n=r.querySerializer((s=r.params.query)!=null?s:{});return n.startsWith("?")&&(n=n.substring(1)),n&&(t+=`?${n}`),t}function ne(...e){const r=new Headers;for(const t of e){if(!t||typeof t!="object")continue;const n=t instanceof Headers?t.entries():Object.entries(t);for(const[i,s]of n)if(s===null)r.delete(i);else if(Array.isArray(s))for(const a of s)r.append(i,a);else s!==void 0&&r.set(i,s)}return r}function ie(e){return e.endsWith("/")?e.substring(0,e.length-1):e}const oe=(e,r,t)=>{try{const n=`${r}_${e}`,i=localStorage.getItem(n);if(!i)return null;const{data:s,timestamp:a}=JSON.parse(i);return t&&Date.now()-a>t?(localStorage.removeItem(n),null):s}catch(n){return null}},Y=(e,r,t)=>{try{const n=`${t}_${e}`,i={data:r,timestamp:Date.now()};localStorage.setItem(n,JSON.stringify(i))}catch(n){console.warn("Failed to cache dismissible item:",n)}},ae=(e,r)=>{try{const t=`${r}_${e}`;localStorage.removeItem(t)}catch(t){console.warn("Failed to remove cached dismissible item:",t)}},Z=o.createContext(null),ce=()=>{const e=o.useContext(Z);if(!e)throw new Error("useDismissibleContext must be used within a DismissibleProvider");return e},Ee="dismissible",le=(e,r={})=>{var _;const{initialData:t,enableCache:n=!0,cachePrefix:i=Ee,cacheExpiration:s}=r,a=ce(),{userId:h}=a,b=o.useMemo(()=>X({baseUrl:a.baseUrl,headers:{}}),[a.baseUrl]),m=o.useMemo(()=>`${h}-${e}`,[h,e]),C=o.useRef({enableCache:n,cachePrefix:i,cacheExpiration:s}),H=o.useRef(e),f=o.useRef(m),l=o.useRef(null),[x,A]=o.useState(!1),[L,$]=o.useState(null),[D,O]=o.useState(()=>{if(t)return t;if(n){const u=oe(m,i,s);if(u)return u}}),T=o.useCallback(()=>U(this,null,function*(){var p;if(n){const y=oe(m,i,s);if(y!=null&&y.dismissedAt){O(y),A(!1);return}}(p=l.current)==null||p.abort();const u=new AbortController;l.current=u,A(!0),$(null);try{const y=yield a.getAuthHeaders(),{data:k,error:ee}=yield b.GET("/v1/user/{userId}/dismissible-item/{itemId}",{params:{path:{userId:h,itemId:e}},headers:y,signal:u.signal});if(ee||!k)throw new Error("Failed to fetch dismissible item");O(k.data),n&&Y(m,k.data,i)}catch(y){if(y instanceof Error&&y.name==="AbortError")return;$(y instanceof Error?y:new Error("Unknown error occurred"))}finally{A(!1)}}),[e,h,m,n,i,s,b,a]);o.useEffect(()=>{const u=H.current!==e,p=f.current!==m;u||p?(H.current=e,f.current=m,T()):t||T()},[e,m,t,T]),o.useEffect(()=>()=>{var u;(u=l.current)==null||u.abort()},[]),o.useEffect(()=>{const u=C.current;(u.enableCache!==n||u.cachePrefix!==i||u.cacheExpiration!==s)&&(u.cachePrefix!==i&&ae(m,u.cachePrefix),!n&&u.enableCache&&ae(m,u.cachePrefix),C.current={enableCache:n,cachePrefix:i,cacheExpiration:s},T())},[n,i,s,m,T]);const J=o.useCallback(()=>U(this,null,function*(){$(null);try{const u=yield a.getAuthHeaders(),{data:p,error:y}=yield b.DELETE("/v1/user/{userId}/dismissible-item/{itemId}",{params:{path:{userId:h,itemId:e}},headers:u});if(y||!p)throw new Error("Failed to dismiss item");O(p.data),n&&Y(m,p.data,i)}catch(u){throw $(u instanceof Error?u:new Error("Failed to dismiss item")),u}}),[e,h,m,n,i,b,a]),W=o.useCallback(()=>U(this,null,function*(){$(null);try{const u=yield a.getAuthHeaders(),{data:p,error:y}=yield b.POST("/v1/user/{userId}/dismissible-item/{itemId}",{params:{path:{userId:h,itemId:e}},headers:u});if(y||!p)throw new Error("Failed to restore item");O(p.data),n&&Y(m,p.data,i)}catch(u){throw $(u instanceof Error?u:new Error("Failed to restore item")),u}}),[e,h,m,n,i,b,a]);return{dismissedOn:(_=D==null?void 0:D.dismissedAt)!=null?_:null,dismiss:J,restore:W,isLoading:x,error:L,item:D}},ve=()=>d.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),Ce=()=>d.jsx("div",{className:"dismissible-error",role:"alert",children:"Unable to load content. Please try again later."}),Re=({onDismiss:e,ariaLabel:r})=>d.jsx("button",{className:"dismissible-button",onClick:e,"aria-label":r,type:"button",children:"×"}),Se=({itemId:e,children:r,onDismiss:t,LoadingComponent:n=ve,ErrorComponent:i=Ce,DismissButtonComponent:s=Re,enableCache:a,cachePrefix:h,cacheExpiration:b,ignoreErrors:m=!1})=>{const{dismissedOn:C,isLoading:H,error:f,dismiss:l}=le(e,{enableCache:a,cachePrefix:h,cacheExpiration:b}),[x,A]=o.useState(!1);o.useEffect(()=>{A(!1)},[e]);const L=()=>U(this,null,function*(){A(!0);try{yield l(),t==null||t()}catch($){A(!1)}});return H&&n?d.jsx(n,{itemId:e}):H&&!n?null:f&&i&&!m?d.jsx(i,{itemId:e,error:f}):C||x?null:d.jsxs("div",{className:"dismissible-container",children:[d.jsx("div",{className:"dismissible-content",children:r}),s?d.jsx(s,{onDismiss:L,ariaLabel:`Dismiss ${e}`}):null]})},ue=e=>U(this,null,function*(){if(typeof e=="function")try{const r=e();return yield Promise.resolve(r)}catch(r){console.warn("Failed to resolve JWT from function:",r);return}return e}),fe=e=>U(this,null,function*(){const r=yield ue(e);return r?{Authorization:`Bearer ${r}`}:{}}),xe=e=>{try{const r=new URL(e),t=r.hostname==="localhost"||r.hostname==="127.0.0.1"||r.hostname==="[::1]",n=r.protocol==="https:";return{isSecure:n||t,isLocalhost:t,isHttps:n}}catch(r){return{isSecure:!1,isLocalhost:!1,isHttps:!1}}},De=({userId:e,jwt:r,baseUrl:t,children:n})=>{const{isSecure:i}=xe(t);i||console.warn(`[dismissible] Insecure baseUrl "${t}". Use https:// in production (or localhost for development). JWT tokens may be exposed over insecure connections.`);const s=o.useMemo(()=>({userId:e,jwt:r,baseUrl:t,getAuthHeaders:()=>U(this,null,function*(){return yield fe(r)})}),[e,r,t]);return d.jsx(Z.Provider,{value:s,children:n})};c.Dismissible=Se,c.DismissibleContext=Z,c.DismissibleProvider=De,c.getAuthHeaders=fe,c.resolveJwt=ue,c.useDismissibleContext=ce,c.useDismissibleItem=le,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(a,f){typeof exports=="object"&&typeof module!="undefined"?f(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],f):(a=typeof globalThis!="undefined"?globalThis:a||self,f(a.DismissibleClient={},a.React.jsxRuntime,a.React))})(this,function(a,f,o){"use strict";var $e=Object.defineProperty,Te=Object.defineProperties;var Ue=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var be=Object.prototype.hasOwnProperty,we=Object.prototype.propertyIsEnumerable;var ye=(a,f,o)=>f in a?$e(a,f,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[f]=o,g=(a,f)=>{for(var o in f||(f={}))be.call(f,o)&&ye(a,o,f[o]);if(Q)for(var o of Q(f))we.call(f,o)&&ye(a,o,f[o]);return a},x=(a,f)=>Te(a,Ue(f));var se=(a,f)=>{var o={};for(var R in a)be.call(a,R)&&f.indexOf(R)<0&&(o[R]=a[R]);if(a!=null&&Q)for(var R of Q(a))f.indexOf(R)<0&&we.call(a,R)&&(o[R]=a[R]);return o};var U=(a,f,o)=>new Promise((R,J)=>{var V=D=>{try{q(o.next(D))}catch(z){J(z)}},X=D=>{try{q(o.throw(D))}catch(z){J(z)}},q=D=>D.done?R(D.value):Promise.resolve(D.value).then(V,X);q((o=o.apply(a,f)).next())});const R=/\{[^{}]+\}/g,J=()=>{var e,r;return typeof process=="object"&&Number.parseInt((r=(e=process==null?void 0:process.versions)==null?void 0:e.node)==null?void 0:r.substring(0,2))>=18&&process.versions.undici};function V(){return Math.random().toString(36).slice(2,11)}function X(e){let I=g({},e),{baseUrl:r="",Request:t=globalThis.Request,fetch:n=globalThis.fetch,querySerializer:i,bodySerializer:s,headers:h,requestInitExt:d=void 0}=I,y=se(I,["baseUrl","Request","fetch","querySerializer","bodySerializer","headers","requestInitExt"]);d=J()?d:void 0,r=oe(r);const S=[];function m(u,c){return U(this,null,function*(){var me;const he=c||{},{baseUrl:j,fetch:F=n,Request:$=t,headers:L,params:C={},parseAs:H="json",querySerializer:T,bodySerializer:O=s!=null?s:ge,body:W,middleware:ee=[]}=he,N=se(he,["baseUrl","fetch","Request","headers","params","parseAs","querySerializer","bodySerializer","body","middleware"]);let l=r;j&&(l=(me=oe(j))!=null?me:r);let p=typeof i=="function"?i:ne(i);T&&(p=typeof T=="function"?T:ne(g(g({},typeof i=="object"?i:{}),T)));const b=W===void 0?void 0:O(W,ie(h,L,C.header)),_=ie(b===void 0||b instanceof FormData?{}:{"Content-Type":"application/json"},h,L,C.header),A=[...S,...ee],te=x(g(g({redirect:"follow"},y),N),{body:b,headers:_});let B,G,P=new $(Ee(u,{baseUrl:l,params:C,querySerializer:p}),te),w;for(const v in N)v in P||(P[v]=N[v]);if(A.length){B=V(),G=Object.freeze({baseUrl:l,fetch:F,parseAs:H,querySerializer:p,bodySerializer:O});for(const v of A)if(v&&typeof v=="object"&&typeof v.onRequest=="function"){const E=yield v.onRequest({request:P,schemaPath:u,params:C,options:G,id:B});if(E)if(E instanceof $)P=E;else if(E instanceof Response){w=E;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!w){try{w=yield F(P,d)}catch(v){let E=v;if(A.length)for(let k=A.length-1;k>=0;k--){const K=A[k];if(K&&typeof K=="object"&&typeof K.onError=="function"){const M=yield K.onError({request:P,error:E,schemaPath:u,params:C,options:G,id:B});if(M){if(M instanceof Response){E=void 0,w=M;break}if(M instanceof Error){E=M;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(E)throw E}if(A.length)for(let v=A.length-1;v>=0;v--){const E=A[v];if(E&&typeof E=="object"&&typeof E.onResponse=="function"){const k=yield E.onResponse({request:P,response:w,schemaPath:u,params:C,options:G,id:B});if(k){if(!(k instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");w=k}}}}if(w.status===204||P.method==="HEAD"||w.headers.get("Content-Length")==="0")return w.ok?{data:void 0,response:w}:{error:void 0,response:w};if(w.ok)return H==="stream"?{data:w.body,response:w}:{data:yield w[H](),response:w};let re=yield w.text();try{re=JSON.parse(re)}catch(v){}return{error:re,response:w}})}return{request(u,c,j){return m(c,x(g({},j),{method:u.toUpperCase()}))},GET(u,c){return m(u,x(g({},c),{method:"GET"}))},PUT(u,c){return m(u,x(g({},c),{method:"PUT"}))},POST(u,c){return m(u,x(g({},c),{method:"POST"}))},DELETE(u,c){return m(u,x(g({},c),{method:"DELETE"}))},OPTIONS(u,c){return m(u,x(g({},c),{method:"OPTIONS"}))},HEAD(u,c){return m(u,x(g({},c),{method:"HEAD"}))},PATCH(u,c){return m(u,x(g({},c),{method:"PATCH"}))},TRACE(u,c){return m(u,x(g({},c),{method:"TRACE"}))},use(...u){for(const c of u)if(c){if(typeof c!="object"||!("onRequest"in c||"onResponse"in c||"onError"in c))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");S.push(c)}},eject(...u){for(const c of u){const j=S.indexOf(c);j!==-1&&S.splice(j,1)}}}}function q(e,r,t){if(r==null)return"";if(typeof r=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${e}=${(t==null?void 0:t.allowReserved)===!0?r:encodeURIComponent(r)}`}function D(e,r,t){if(!r||typeof r!="object")return"";const n=[],i={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const d in r)n.push(d,t.allowReserved===!0?r[d]:encodeURIComponent(r[d]));const h=n.join(",");switch(t.style){case"form":return`${e}=${h}`;case"label":return`.${h}`;case"matrix":return`;${e}=${h}`;default:return h}}for(const h in r){const d=t.style==="deepObject"?`${e}[${h}]`:h;n.push(q(d,r[h],t))}const s=n.join(i);return t.style==="label"||t.style==="matrix"?`${i}${s}`:s}function z(e,r,t){if(!Array.isArray(r))return"";if(t.explode===!1){const s={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",h=(t.allowReserved===!0?r:r.map(d=>encodeURIComponent(d))).join(s);switch(t.style){case"simple":return h;case"label":return`.${h}`;case"matrix":return`;${e}=${h}`;default:return`${e}=${h}`}}const n={simple:",",label:".",matrix:";"}[t.style]||"&",i=[];for(const s of r)t.style==="simple"||t.style==="label"?i.push(t.allowReserved===!0?s:encodeURIComponent(s)):i.push(q(e,s,t));return t.style==="label"||t.style==="matrix"?`${n}${i.join(n)}`:i.join(n)}function ne(e){return function(t){const n=[];if(t&&typeof t=="object")for(const i in t){const s=t[i];if(s!=null){if(Array.isArray(s)){if(s.length===0)continue;n.push(z(i,s,x(g({style:"form",explode:!0},e==null?void 0:e.array),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}if(typeof s=="object"){n.push(D(i,s,x(g({style:"deepObject",explode:!0},e==null?void 0:e.object),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}n.push(q(i,s,e))}}return n.join("&")}}function pe(e,r){var n;let t=e;for(const i of(n=e.match(R))!=null?n:[]){let s=i.substring(1,i.length-1),h=!1,d="simple";if(s.endsWith("*")&&(h=!0,s=s.substring(0,s.length-1)),s.startsWith(".")?(d="label",s=s.substring(1)):s.startsWith(";")&&(d="matrix",s=s.substring(1)),!r||r[s]===void 0||r[s]===null)continue;const y=r[s];if(Array.isArray(y)){t=t.replace(i,z(s,y,{style:d,explode:h}));continue}if(typeof y=="object"){t=t.replace(i,D(s,y,{style:d,explode:h}));continue}if(d==="matrix"){t=t.replace(i,`;${q(s,y)}`);continue}t=t.replace(i,d==="label"?`.${encodeURIComponent(y)}`:encodeURIComponent(y))}return t}function ge(e,r){var t,n;return e instanceof FormData?e:r&&(r.get instanceof Function?(t=r.get("Content-Type"))!=null?t:r.get("content-type"):(n=r["Content-Type"])!=null?n:r["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(e).toString():JSON.stringify(e)}function Ee(e,r){var i,s;let t=`${r.baseUrl}${e}`;(i=r.params)!=null&&i.path&&(t=pe(t,r.params.path));let n=r.querySerializer((s=r.params.query)!=null?s:{});return n.startsWith("?")&&(n=n.substring(1)),n&&(t+=`?${n}`),t}function ie(...e){const r=new Headers;for(const t of e){if(!t||typeof t!="object")continue;const n=t instanceof Headers?t.entries():Object.entries(t);for(const[i,s]of n)if(s===null)r.delete(i);else if(Array.isArray(s))for(const h of s)r.append(i,h);else s!==void 0&&r.set(i,s)}return r}function oe(e){return e.endsWith("/")?e.substring(0,e.length-1):e}const ae=(e,r,t)=>{try{const n=`${r}_${e}`,i=localStorage.getItem(n);if(!i)return null;const{data:s,timestamp:h}=JSON.parse(i);return t&&Date.now()-h>t?(localStorage.removeItem(n),null):s}catch(n){return null}},Y=(e,r,t)=>{try{const n=`${t}_${e}`,i={data:r,timestamp:Date.now()};localStorage.setItem(n,JSON.stringify(i))}catch(n){console.warn("Failed to cache dismissible item:",n)}},ce=(e,r)=>{try{const t=`${r}_${e}`;localStorage.removeItem(t)}catch(t){console.warn("Failed to remove cached dismissible item:",t)}},Z=o.createContext(null),le=()=>{const e=o.useContext(Z);if(!e)throw new Error("useDismissibleContext must be used within a DismissibleProvider");return e},ve=e=>{if(e)return Object.entries(e).map(([r,t])=>`${r}:${t}`)},Ce="dismissible",ue=(e,r={})=>{var N;const{initialData:t,enableCache:n=!0,cachePrefix:i=Ce,cacheExpiration:s,metadata:h}=r,d=le(),{userId:y}=d,S=o.useMemo(()=>X({baseUrl:d.baseUrl,headers:{}}),[d.baseUrl]),m=o.useMemo(()=>`${y}-${e}`,[y,e]),I=o.useRef({enableCache:n,cachePrefix:i,cacheExpiration:s}),u=o.useRef(e),c=o.useRef(m),j=o.useRef(null),[F,$]=o.useState(!1),[L,C]=o.useState(null),[H,T]=o.useState(()=>{if(t)return t;if(n){const l=ae(m,i,s);if(l)return l}}),O=o.useCallback(()=>U(this,null,function*(){var p;if(n){const b=ae(m,i,s);if(b!=null&&b.dismissedAt){T(b),$(!1);return}}(p=j.current)==null||p.abort();const l=new AbortController;j.current=l,$(!0),C(null);try{const b=yield d.getAuthHeaders(),_=ve(h),{data:A,error:te}=yield S.GET("/v1/users/{userId}/items/{itemId}",{params:{path:{userId:y,itemId:e},query:_?{metadata:_}:void 0},headers:b,signal:l.signal});if(te||!A)throw new Error("Failed to fetch dismissible item");T(A.data),n&&Y(m,A.data,i)}catch(b){if(b instanceof Error&&b.name==="AbortError")return;C(b instanceof Error?b:new Error("Unknown error occurred"))}finally{$(!1)}}),[e,y,m,n,i,s,h,S,d]);o.useEffect(()=>{const l=u.current!==e,p=c.current!==m;l||p?(u.current=e,c.current=m,O()):t||O()},[e,m,t,O]),o.useEffect(()=>()=>{var l;(l=j.current)==null||l.abort()},[]),o.useEffect(()=>{const l=I.current;(l.enableCache!==n||l.cachePrefix!==i||l.cacheExpiration!==s)&&(l.cachePrefix!==i&&ce(m,l.cachePrefix),!n&&l.enableCache&&ce(m,l.cachePrefix),I.current={enableCache:n,cachePrefix:i,cacheExpiration:s},O())},[n,i,s,m,O]);const W=o.useCallback(()=>U(this,null,function*(){C(null);try{const l=yield d.getAuthHeaders(),{data:p,error:b}=yield S.DELETE("/v1/users/{userId}/items/{itemId}",{params:{path:{userId:y,itemId:e}},headers:l});if(b||!p)throw new Error("Failed to dismiss item");T(p.data),n&&Y(m,p.data,i)}catch(l){throw C(l instanceof Error?l:new Error("Failed to dismiss item")),l}}),[e,y,m,n,i,S,d]),ee=o.useCallback(()=>U(this,null,function*(){C(null);try{const l=yield d.getAuthHeaders(),{data:p,error:b}=yield S.POST("/v1/users/{userId}/items/{itemId}",{params:{path:{userId:y,itemId:e}},headers:l});if(b||!p)throw new Error("Failed to restore item");T(p.data),n&&Y(m,p.data,i)}catch(l){throw C(l instanceof Error?l:new Error("Failed to restore item")),l}}),[e,y,m,n,i,S,d]);return{dismissedOn:(N=H==null?void 0:H.dismissedAt)!=null?N:null,dismiss:W,restore:ee,isLoading:F,error:L,item:H}},Re=()=>f.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),Se=()=>f.jsx("div",{className:"dismissible-error",role:"alert",children:"Unable to load content. Please try again later."}),je=({onDismiss:e,ariaLabel:r})=>f.jsx("button",{className:"dismissible-button",onClick:e,"aria-label":r,type:"button",children:"×"}),xe=({itemId:e,children:r,onDismiss:t,LoadingComponent:n=Re,ErrorComponent:i=Se,DismissButtonComponent:s=je,enableCache:h,cachePrefix:d,cacheExpiration:y,ignoreErrors:S=!1,metadata:m})=>{const{dismissedOn:I,isLoading:u,error:c,dismiss:j}=ue(e,{enableCache:h,cachePrefix:d,cacheExpiration:y,metadata:m}),[F,$]=o.useState(!1);o.useEffect(()=>{$(!1)},[e]);const L=()=>U(this,null,function*(){$(!0);try{yield j(),t==null||t()}catch(C){$(!1)}});return u&&n?f.jsx(n,{itemId:e}):u&&!n?null:c&&i&&!S?f.jsx(i,{itemId:e,error:c}):I||F?null:f.jsxs("div",{className:"dismissible-container",children:[f.jsx("div",{className:"dismissible-content",children:r}),s?f.jsx(s,{onDismiss:L,ariaLabel:`Dismiss ${e}`}):null]})},fe=e=>U(this,null,function*(){if(typeof e=="function")try{const r=e();return yield Promise.resolve(r)}catch(r){console.warn("Failed to resolve JWT from function:",r);return}return e}),de=e=>U(this,null,function*(){const r=yield fe(e);return r?{Authorization:`Bearer ${r}`}:{}}),Ae=e=>{try{const r=new URL(e),t=r.hostname==="localhost"||r.hostname==="127.0.0.1"||r.hostname==="[::1]",n=r.protocol==="https:";return{isSecure:n||t,isLocalhost:t,isHttps:n}}catch(r){return{isSecure:!1,isLocalhost:!1,isHttps:!1}}},De=({userId:e,jwt:r,baseUrl:t,children:n})=>{const{isSecure:i}=Ae(t);i||console.warn(`[dismissible] Insecure baseUrl "${t}". Use https:// in production (or localhost for development). JWT tokens may be exposed over insecure connections.`);const s=o.useMemo(()=>({userId:e,jwt:r,baseUrl:t,getAuthHeaders:()=>U(this,null,function*(){return yield de(r)})}),[e,r,t]);return f.jsx(Z.Provider,{value:s,children:n})};a.Dismissible=xe,a.DismissibleContext=Z,a.DismissibleProvider=De,a.getAuthHeaders=de,a.resolveJwt=fe,a.useDismissibleContext=le,a.useDismissibleItem=ue,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/dist/hooks/useDismissibleItem.d.ts

@@ -1,6 +1,10 @@
 import { components } from '../generated/contract';
 type DismissibleItem = components["schemas"]["DismissibleItemResponseDto"];
 export type IDismissibleItem = DismissibleItem;
+/** Metadata object with string or number values */
+export type IMetadata = {
+    [key: string]: string | number;
+};
 export interface UseDismissibleItemOptions {
     /** Initial data for the dismissible item */
     initialData?: IDismissibleItem;
@@ -10,6 +14,8 @@ export interface UseDismissibleItemOptions {
     cachePrefix?: string;
     /** Cache expiration time in milliseconds (default: never expires) */
     cacheExpiration?: number;
+    /** Optional metadata object that will be converted to key:value string pairs */
+    metadata?: IMetadata;
 }
 /**
  * Hook for managing dismissible items

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dismissible/react-client",
-  "version": "0.3.2-canary.3.c1b8c41",
+  "version": "0.3.2-canary.4.578bcba",
   "type": "module",
   "files": [
     "dist",