@sellhapi/studio-runtime 0.1.0

package/dist/index.js

@@ -0,0 +1,1571 @@
+// src/context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var SellHapiContext = createContext(null);
+function SellHapiProvider({
+  workspaceId,
+  apiBase = "https://api.sellhapi.com",
+  vendorSlug,
+  children
+}) {
+  return /* @__PURE__ */ jsx(SellHapiContext.Provider, { value: { workspaceId, apiBase, vendorSlug }, children });
+}
+function useSellHapi() {
+  const ctx = useContext(SellHapiContext);
+  if (!ctx) {
+    throw new Error(
+      "[sellhapi/studio-runtime] useSellHapi must be used inside <SellHapiProvider>. Ensure your storefront root is wrapped with SellHapiProvider."
+    );
+  }
+  return ctx;
+}
+
+// src/hooks/useProducts.ts
+import { useMemo } from "react";
+
+// src/hooks/useFetch.ts
+import { useState, useEffect, useRef } from "react";
+function useFetch(url, defaultValue) {
+  const [data, setData] = useState(defaultValue);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const urlRef = useRef(url);
+  urlRef.current = url;
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetch(url).then(async (res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json = await res.json();
+      if (!cancelled) {
+        setData(json.data ?? defaultValue);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  return { data, loading, error };
+}
+function buildQueryUrl(apiBase, workspaceId, capabilityId, queryId, filters = {}) {
+  const params = new URLSearchParams({ capabilityId, queryId });
+  for (const [k, v] of Object.entries(filters)) {
+    if (v !== void 0) params.set(k, String(v));
+  }
+  return `${apiBase}/api/storefront/${workspaceId}/content/query?${params.toString()}`;
+}
+
+// src/hooks/useProducts.ts
+function useProducts(options = {}) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const idsKey = options.ids?.join(",");
+  const url = useMemo(
+    () => buildQueryUrl(apiBase, workspaceId, "physical_products", "list_products", {
+      limit: options.limit,
+      categoryId: options.categoryId,
+      ...idsKey ? { ids: idsKey } : {}
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [apiBase, workspaceId, options.limit, options.categoryId, idsKey]
+  );
+  return useFetch(url, []);
+}
+function useProduct(_productId) {
+  return { data: null, loading: false, error: null };
+}
+
+// src/hooks/useDigitalProducts.ts
+import { useMemo as useMemo2 } from "react";
+function useDigitalProducts(options = {}) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo2(
+    () => buildQueryUrl(apiBase, workspaceId, "digital_products", "list_digital_products", {
+      limit: options.limit
+    }),
+    [apiBase, workspaceId, options.limit]
+  );
+  return useFetch(url, []);
+}
+
+// src/hooks/useEvents.ts
+import { useMemo as useMemo3 } from "react";
+function useEvents(options = {}) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo3(
+    () => buildQueryUrl(apiBase, workspaceId, "events", "list_events", {
+      limit: options.limit
+    }),
+    [apiBase, workspaceId, options.limit]
+  );
+  return useFetch(url, []);
+}
+function useEvent(eventId) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = `${apiBase}/api/events/storefront/events/${encodeURIComponent(eventId)}?vendorId=${encodeURIComponent(workspaceId)}`;
+  return useFetch(url, null);
+}
+
+// src/hooks/useMemberships.ts
+import { useMemo as useMemo4 } from "react";
+function useMemberships() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo4(
+    () => buildQueryUrl(apiBase, workspaceId, "memberships", "list_membership_tiers"),
+    [apiBase, workspaceId]
+  );
+  return useFetch(url, []);
+}
+
+// src/hooks/useServices.ts
+import { useMemo as useMemo5 } from "react";
+function useServices(options = {}) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo5(
+    () => buildQueryUrl(apiBase, workspaceId, "appointments", "list_services", {
+      limit: options.limit
+    }),
+    [apiBase, workspaceId, options.limit]
+  );
+  return useFetch(url, []);
+}
+
+// src/hooks/useArticles.ts
+import { useMemo as useMemo6 } from "react";
+function useArticles(options = {}) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo6(() => {
+    const params = new URLSearchParams();
+    if (options.limit !== void 0) params.set("limit", String(options.limit));
+    if (options.category !== void 0) params.set("category", options.category);
+    if (options.tag !== void 0) params.set("tag", options.tag);
+    const qs = params.toString();
+    return `${apiBase}/api/storefront/${workspaceId}/content/articles${qs ? `?${qs}` : ""}`;
+  }, [apiBase, workspaceId, options.limit, options.category, options.tag]);
+  return useFetch(url, []);
+}
+function useArticle(slug) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = `${apiBase}/api/storefront/${workspaceId}/content/articles/${encodeURIComponent(slug)}`;
+  return useFetch(url, null);
+}
+
+// src/hooks/useDonationCampaigns.ts
+import { useMemo as useMemo7 } from "react";
+function useDonationCampaigns(options = {}) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo7(
+    () => buildQueryUrl(apiBase, workspaceId, "donations", "list_active_campaigns", {
+      limit: options.limit
+    }),
+    [apiBase, workspaceId, options.limit]
+  );
+  return useFetch(url, []);
+}
+function useDonationCampaign(campaignId) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = `${apiBase}/api/donations/storefront/campaigns/${encodeURIComponent(campaignId)}?vendorId=${encodeURIComponent(workspaceId)}`;
+  return useFetch(url, null);
+}
+
+// src/hooks/useCreateRSVP.ts
+import { useState as useState2, useCallback } from "react";
+function useCreateRSVP() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [success, setSuccess] = useState2(false);
+  const submit = useCallback(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${apiBase}/api/events-tickets/storefront/events/${encodeURIComponent(input.eventId)}/rsvp`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ...input, workspaceId })
+        }
+      );
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.message ?? `HTTP ${res.status}`);
+      }
+      setSuccess(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not complete RSVP");
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { submit, loading, error, success };
+}
+
+// src/hooks/useBookAppointment.ts
+import { useState as useState3, useCallback as useCallback2, useMemo as useMemo8 } from "react";
+function useAvailability(options) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const url = useMemo8(() => {
+    if (!options.serviceId || !options.from || !options.to) return null;
+    const p = new URLSearchParams({
+      vendorId: workspaceId,
+      serviceId: options.serviceId,
+      from: options.from,
+      to: options.to
+    });
+    if (options.staffMemberId) p.set("staffMemberId", options.staffMemberId);
+    return `${apiBase}/api/appointments/storefront/availability?${p.toString()}`;
+  }, [apiBase, workspaceId, options.serviceId, options.staffMemberId, options.from, options.to]);
+  return useFetch(url ?? "", []);
+}
+function useBookAppointment() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const initiate = useCallback2(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const isSimple = "customerName" in input || "customerEmail" in input || "dateTime" in input;
+      const body = isSimple ? {
+        vendorId: workspaceId,
+        serviceId: input.serviceId,
+        dateTime: input.dateTime,
+        customer: {
+          name: input.customerName,
+          email: input.customerEmail,
+          phone: input.customerPhone ?? "N/A"
+        },
+        note: input.notes
+      } : { vendorId: workspaceId, ...input };
+      const res = await fetch(`${apiBase}/api/appointments/storefront/book`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      const resBody = await res.json();
+      if (!res.ok) throw new Error(resBody.error ?? resBody.message ?? `HTTP ${res.status}`);
+      return { paymentLink: resBody.paymentLink, orderId: resBody.orderId };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Booking failed";
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { initiate, book: initiate, loading, error };
+}
+
+// src/hooks/usePurchaseTickets.ts
+import { useState as useState4, useCallback as useCallback3 } from "react";
+function usePurchaseTickets() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const initiate = useCallback3(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBase}/api/events/storefront/purchase`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ vendorId: workspaceId, ...input })
+      });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+      return { paymentLink: body.paymentLink, orderId: body.orderId };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Ticket purchase failed";
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { initiate, loading, error };
+}
+
+// src/hooks/useDonate.ts
+import { useState as useState5, useCallback as useCallback4 } from "react";
+function useDonate() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const initiate = useCallback4(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBase}/api/donations/storefront/donate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ vendorId: workspaceId, ...input })
+      });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+      return { paymentLink: body.paymentLink, orderId: body.orderId, reference: body.paymentRef };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Donation failed";
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { initiate, loading, error };
+}
+
+// src/hooks/useSubscribeMembership.ts
+import { useState as useState6, useCallback as useCallback5 } from "react";
+function useSubscribeMembership() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState6(false);
+  const [error, setError] = useState6(null);
+  const initiate = useCallback5(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBase}/api/memberships/storefront/subscribe`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ vendorId: workspaceId, ...input })
+      });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+      return { paymentLink: body.paymentLink, orderId: body.orderId };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Subscription failed";
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { initiate, loading, error };
+}
+
+// src/hooks/useProductCheckout.ts
+import { useState as useState7, useCallback as useCallback6 } from "react";
+function useProductCheckout() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState7(false);
+  const [error, setError] = useState7(null);
+  const initiate = useCallback6(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBase}/api/storefront/${encodeURIComponent(workspaceId)}/products/checkout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(input)
+      });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+      return { paymentLink: body.paymentLink, orderId: body.orderId, reference: body.reference };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Checkout failed";
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { initiate, initiateCheckout: initiate, loading, error };
+}
+
+// src/hooks/useCart.ts
+import { useState as useState8, useEffect as useEffect2, useCallback as useCallback7 } from "react";
+var CART_EVENT = "sellhapi:cart:update";
+function storageKey(workspaceId) {
+  return `sellhapi_cart_${workspaceId}`;
+}
+function readCart(workspaceId) {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(storageKey(workspaceId));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed.items) ? parsed.items : [];
+  } catch {
+    return [];
+  }
+}
+function writeCart(workspaceId, items) {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(storageKey(workspaceId), JSON.stringify({ items }));
+  window.dispatchEvent(new CustomEvent(CART_EVENT, { detail: { workspaceId } }));
+}
+function useCart() {
+  const { workspaceId } = useSellHapi();
+  const [items, setItems] = useState8(() => readCart(workspaceId));
+  useEffect2(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      if (detail?.workspaceId === workspaceId) {
+        setItems(readCart(workspaceId));
+      }
+    };
+    window.addEventListener(CART_EVENT, handler);
+    return () => window.removeEventListener(CART_EVENT, handler);
+  }, [workspaceId]);
+  const addItem = useCallback7((incoming) => {
+    const qty = incoming.quantity ?? 1;
+    const current = readCart(workspaceId);
+    const idx = current.findIndex(
+      (i) => i.productId === incoming.productId && i.variantId === incoming.variantId
+    );
+    let next;
+    if (idx >= 0) {
+      const newQty = current[idx].quantity + qty;
+      const maxStock = incoming.maxStock ?? current[idx].maxStock;
+      const capped = maxStock != null && maxStock > 0 ? Math.min(newQty, maxStock) : newQty;
+      next = current.map(
+        (item, i) => i === idx ? { ...item, quantity: capped, maxStock: maxStock ?? item.maxStock } : item
+      );
+    } else {
+      const maxStock = incoming.maxStock;
+      const cappedQty = maxStock != null && maxStock > 0 ? Math.min(qty, maxStock) : qty;
+      next = [...current, { ...incoming, quantity: cappedQty }];
+    }
+    writeCart(workspaceId, next);
+    setItems(next);
+  }, [workspaceId]);
+  const removeItem = useCallback7((productId, variantId) => {
+    const next = readCart(workspaceId).filter(
+      (i) => !(i.productId === productId && i.variantId === variantId)
+    );
+    writeCart(workspaceId, next);
+    setItems(next);
+  }, [workspaceId]);
+  const updateQty = useCallback7((productId, quantity, variantId) => {
+    if (quantity <= 0) {
+      removeItem(productId, variantId);
+      return;
+    }
+    const current = readCart(workspaceId);
+    const existing = current.find((i) => i.productId === productId && i.variantId === variantId);
+    const maxStock = existing?.maxStock;
+    const capped = maxStock != null && maxStock > 0 ? Math.min(quantity, maxStock) : quantity;
+    const next = current.map(
+      (i) => i.productId === productId && i.variantId === variantId ? { ...i, quantity: capped } : i
+    );
+    writeCart(workspaceId, next);
+    setItems(next);
+  }, [workspaceId, removeItem]);
+  const clear = useCallback7(() => {
+    writeCart(workspaceId, []);
+    setItems([]);
+  }, [workspaceId]);
+  const count = items.reduce((s, i) => s + i.quantity, 0);
+  const totalKobo = items.reduce((s, i) => s + i.priceKobo * i.quantity, 0);
+  const savingsKobo = items.reduce((s, i) => {
+    const orig = i.originalPriceKobo ?? i.priceKobo;
+    return s + Math.max(0, orig - i.priceKobo) * i.quantity;
+  }, 0);
+  const openCart = useCallback7(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("sellhapi:open-cart"));
+    }
+  }, []);
+  return { items, count, totalKobo, savingsKobo, isEmpty: items.length === 0, addItem, removeItem, updateQty, clear, openCart };
+}
+function useCartCheckout() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState8(false);
+  const [error, setError] = useState8(null);
+  const initiate = useCallback7(async (customer, options = {}) => {
+    const items = readCart(workspaceId);
+    if (items.length === 0) throw new Error("Cart is empty");
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${apiBase}/api/storefront/${encodeURIComponent(workspaceId)}/cart/checkout`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            items: items.map((i) => ({
+              productId: i.productId,
+              variantId: i.variantId,
+              quantity: i.quantity
+            })),
+            customer,
+            deliveryMethod: options.deliveryMethod ?? "delivery",
+            destinationState: options.destinationState,
+            shippingRateId: options.shippingRateId,
+            shippingFeeName: options.shippingFeeName,
+            shippingFeeKobo: options.shippingFeeKobo ?? 0,
+            customerNote: options.customerNote,
+            discountId: options.discountId,
+            discountAmountKobo: options.discountAmountKobo ?? 0
+          })
+        }
+      );
+      const body = await res.json();
+      if (!res.ok) throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+      return { paymentLink: body.paymentLink, orderId: body.orderId, reference: body.reference };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Checkout failed";
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  return { initiate, loading, error };
+}
+
+// src/hooks/useCheckoutConfig.ts
+import { useState as useState9, useEffect as useEffect3 } from "react";
+var DEFAULT_CONFIG = {
+  orderNotes: false,
+  pickup: false,
+  discounts: false,
+  pickupConfig: null
+};
+function useCheckoutConfig() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [config, setConfig] = useState9(DEFAULT_CONFIG);
+  const [loading, setLoading] = useState9(true);
+  useEffect3(() => {
+    if (!workspaceId || !apiBase) {
+      setLoading(false);
+      return;
+    }
+    fetch(`${apiBase}/api/storefront/${encodeURIComponent(workspaceId)}/checkout-config`).then((r) => r.json()).then((data) => {
+      setConfig(data);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, [apiBase, workspaceId]);
+  return { config, loading };
+}
+
+// src/hooks/useShippingRates.ts
+import { useState as useState10, useEffect as useEffect4 } from "react";
+function useShippingRates(destinationState) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [rates, setRates] = useState10([]);
+  const [loading, setLoading] = useState10(false);
+  useEffect4(() => {
+    if (!workspaceId || !apiBase || destinationState === null) {
+      setRates([]);
+      return;
+    }
+    setLoading(true);
+    fetch(`${apiBase}/api/storefront/${encodeURIComponent(workspaceId)}/shipping-rates`).then((r) => r.json()).then((body) => {
+      setRates(body.data ?? []);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, [apiBase, workspaceId, destinationState]);
+  return { rates, loading };
+}
+
+// src/hooks/useValidateDiscount.ts
+import { useState as useState11, useCallback as useCallback8 } from "react";
+function useValidateDiscount() {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [loading, setLoading] = useState11(false);
+  const [result, setResult] = useState11(null);
+  const validate = useCallback8(async (code, cartItems) => {
+    setLoading(true);
+    try {
+      const res = await fetch(
+        `${apiBase}/api/storefront/${encodeURIComponent(workspaceId)}/discounts/validate`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ code: code.trim().toUpperCase(), cartItems })
+        }
+      );
+      const data = await res.json();
+      setResult(data);
+      return data;
+    } catch {
+      const failed = { valid: false, error: "Could not validate code", code: "NETWORK_ERROR" };
+      setResult(failed);
+      return failed;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, workspaceId]);
+  const reset = useCallback8(() => setResult(null), []);
+  return { validate, loading, result, reset };
+}
+
+// src/hooks/useStudioEditMode.ts
+import { useEffect as useEffect5 } from "react";
+var SCOPE_COLORS = {
+  media: "#3A01DB",
+  layout: "#E6891F",
+  navigation: "#059669",
+  config: "#6B7280"
+};
+function scopeColor(el, fallback) {
+  const scope = el.getAttribute("data-scope") ?? "";
+  return SCOPE_COLORS[scope] ?? fallback;
+}
+var STYLE_ID = "__sellhapi_studio_edit__";
+function injectEditStyle(mode) {
+  let el = document.getElementById(STYLE_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  if (mode === "none") {
+    el.textContent = "";
+    return;
+  }
+  if (mode === "region") {
+    el.textContent = `
+      [data-region] { position: relative; }
+      [data-region]:hover {
+        outline: 2px solid #3b82f6 !important;
+        outline-offset: 3px;
+        cursor: pointer;
+      }
+      [data-region][data-scope="media"]:hover    { outline-color: #3A01DB !important; }
+      [data-region][data-scope="layout"]:hover   { outline-color: #E6891F !important; }
+      [data-region][data-scope="navigation"]:hover { outline-color: #059669 !important; }
+      [data-region][data-scope="config"]:hover   { outline-color: #6B7280 !important; }
+    `;
+    return;
+  }
+  if (mode === "component") {
+    el.textContent = `
+      [data-component]:hover, [data-studio-hover] {
+        outline: 2px solid #7c3aed !important;
+        outline-offset: 2px;
+        cursor: pointer;
+      }
+      [data-component][data-scope="media"]:hover    { outline-color: #3A01DB !important; }
+      [data-component][data-scope="layout"]:hover   { outline-color: #E6891F !important; }
+      [data-component][data-scope="navigation"]:hover { outline-color: #059669 !important; }
+      [data-component][data-scope="config"]:hover   { outline-color: #6B7280 !important; }
+    `;
+  }
+}
+function closestRegion(el) {
+  let cur = el;
+  while (cur) {
+    if (cur.hasAttribute("data-region")) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+}
+function closestComponent(el) {
+  let cur = el;
+  while (cur) {
+    if (cur.hasAttribute("data-component")) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+}
+var SKIP_TAGS_SYNTH = /* @__PURE__ */ new Set(["HTML", "BODY", "HEAD", "SCRIPT", "STYLE", "NOSCRIPT", "SVG", "PATH"]);
+var SKIP_IDS_SYNTH = /* @__PURE__ */ new Set(["root", "__next", "sellhapi-preview", "__sellhapi_studio_label__"]);
+function closestMeaningfulBlock(el) {
+  let cur = el;
+  while (cur) {
+    const tag = cur.tagName;
+    const id = cur.id ?? "";
+    if (!SKIP_TAGS_SYNTH.has(tag) && !SKIP_IDS_SYNTH.has(id)) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+}
+function synthesizeCompName(el) {
+  const tag = el.tagName.toLowerCase();
+  const cls = Array.from(el.classList).find((c) => !/^[0-9]/.test(c)) ?? "";
+  const text = (el.textContent ?? "").trim().slice(0, 24).replace(/\s+/g, "-").replace(/[^a-z0-9-]/gi, "").toLowerCase();
+  return [tag, cls, text].filter(Boolean).join("-").slice(0, 48) || tag;
+}
+var LABEL_ID = "__sellhapi_studio_label__";
+function showLabel(text, color) {
+  let lbl = document.getElementById(LABEL_ID);
+  if (!lbl) {
+    lbl = document.createElement("div");
+    lbl.id = LABEL_ID;
+    Object.assign(lbl.style, {
+      position: "fixed",
+      top: "10px",
+      left: "10px",
+      zIndex: "99999",
+      padding: "3px 10px",
+      borderRadius: "4px",
+      fontSize: "11px",
+      fontFamily: "monospace",
+      color: "#fff",
+      pointerEvents: "none"
+    });
+    document.body.appendChild(lbl);
+  }
+  lbl.style.background = color;
+  lbl.textContent = text;
+  lbl.style.display = "block";
+}
+function hideLabel() {
+  const lbl = document.getElementById(LABEL_ID);
+  if (lbl) lbl.style.display = "none";
+}
+function flashElement(el, color) {
+  const htmlEl = el;
+  const prevOutline = htmlEl.style.outline;
+  const prevOffset = htmlEl.style.outlineOffset;
+  htmlEl.style.outline = `2.5px solid ${color}`;
+  htmlEl.style.outlineOffset = "3px";
+  setTimeout(() => {
+    htmlEl.style.outline = prevOutline;
+    htmlEl.style.outlineOffset = prevOffset;
+  }, 600);
+}
+function useStudioEditMode() {
+  useEffect5(() => {
+    if (window === window.top) return;
+    let currentMode = "none";
+    function handleClick(e) {
+      if (currentMode === "none") return;
+      const target = e.target;
+      if (currentMode === "region") {
+        const regionEl = closestRegion(target);
+        if (!regionEl) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const slug = regionEl.getAttribute("data-region") ?? "unknown";
+        const label = regionEl.getAttribute("data-label") ?? slug;
+        const scope = regionEl.getAttribute("data-scope") ?? "content";
+        const color = scopeColor(regionEl, "#3b82f6");
+        flashElement(regionEl, color);
+        hideLabel();
+        window.parent.postMessage({ type: "region:selected", slug, label, scope }, "*");
+      } else if (currentMode === "component") {
+        let compEl = closestComponent(target);
+        if (!compEl) {
+          const fallback = closestMeaningfulBlock(target);
+          if (!fallback) return;
+          if (!fallback.hasAttribute("data-component")) {
+            fallback.setAttribute("data-component", synthesizeCompName(fallback));
+          }
+          fallback.removeAttribute("data-studio-hover");
+          compEl = fallback;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const name = compEl.getAttribute("data-component") ?? "unknown";
+        const label = compEl.getAttribute("data-label") ?? name;
+        const scope = compEl.getAttribute("data-scope") ?? "content";
+        const color = scopeColor(compEl, "#7c3aed");
+        flashElement(compEl, color);
+        hideLabel();
+        window.parent.postMessage({ type: "component:selected", name, label, scope }, "*");
+      }
+    }
+    function handleMouseOver(e) {
+      if (currentMode === "none") return;
+      const target = e.target;
+      if (currentMode === "region") {
+        const el = closestRegion(target);
+        if (el) showLabel(el.getAttribute("data-region") ?? "region", scopeColor(el, "#3b82f6"));
+        else hideLabel();
+      } else if (currentMode === "component") {
+        document.querySelectorAll("[data-studio-hover]").forEach((e2) => e2.removeAttribute("data-studio-hover"));
+        const el = closestComponent(target) ?? closestMeaningfulBlock(target);
+        if (el) {
+          if (!el.hasAttribute("data-component")) el.setAttribute("data-studio-hover", "true");
+          const lbl = el.getAttribute("data-component") ?? el.getAttribute("data-label") ?? synthesizeCompName(el);
+          showLabel(lbl, scopeColor(el, "#7c3aed"));
+        } else {
+          hideLabel();
+        }
+      }
+    }
+    function handleMouseOut() {
+      hideLabel();
+      document.querySelectorAll("[data-studio-hover]").forEach((e) => e.removeAttribute("data-studio-hover"));
+    }
+    function handleMessage(e) {
+      if (!e.data || typeof e.data !== "object") return;
+      const { type } = e.data;
+      if (type === "studio:set-mode") {
+        const { mode } = e.data;
+        currentMode = mode ?? "none";
+        injectEditStyle(currentMode);
+        hideLabel();
+      } else if (type === "studio:navigate") {
+        const { page } = e.data;
+        window.dispatchEvent(new CustomEvent("studio:navigate", { detail: { page } }));
+      } else if (type === "studio:highlight") {
+        const { selector } = e.data;
+        const el = selector ? document.querySelector(selector) : null;
+        if (el) {
+          el.scrollIntoView({ behavior: "smooth", block: "center" });
+          flashElement(el, "#f59e0b");
+        }
+      }
+    }
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("mouseover", handleMouseOver, true);
+    document.addEventListener("mouseout", handleMouseOut, true);
+    window.addEventListener("message", handleMessage);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("mouseover", handleMouseOver, true);
+      document.removeEventListener("mouseout", handleMouseOut, true);
+      window.removeEventListener("message", handleMessage);
+      injectEditStyle("none");
+      hideLabel();
+    };
+  }, []);
+}
+
+// src/hooks/useContentItems.ts
+import { useMemo as useMemo9 } from "react";
+function useContentItems(options) {
+  const { workspaceId, apiBase, vendorSlug } = useSellHapi();
+  const url = useMemo9(() => {
+    const params = new URLSearchParams({
+      workspaceId,
+      types: options.types.join(",")
+    });
+    if (options.limit) params.set("limit", String(options.limit));
+    if (options.tags?.length) params.set("tags", options.tags.join(","));
+    if (options.q) params.set("q", options.q);
+    if (options.ids?.length) params.set("ids", options.ids.join(","));
+    if (vendorSlug) params.set("projectId", vendorSlug);
+    return `${apiBase}/api/content/library?${params.toString()}`;
+  }, [apiBase, workspaceId, vendorSlug, options.types.join(","), options.limit, options.tags?.join(","), options.q, options.ids?.join(",")]);
+  return useFetch(url, []);
+}
+var useContentImages = (opts = {}) => useContentItems({ types: ["image"], ...opts });
+var useContentVideos = (opts = {}) => useContentItems({ types: ["video"], ...opts });
+var useContentVideoUrls = (opts = {}) => useContentItems({ types: ["video_url"], ...opts });
+var useContentAudio = (opts = {}) => useContentItems({ types: ["audio"], ...opts });
+var useContentDocuments = (opts = {}) => useContentItems({ types: ["document"], ...opts });
+var useContentFaqs = (opts = {}) => useContentItems({ types: ["faq"], ...opts });
+var useContentTestimonials = (opts = {}) => useContentItems({ types: ["testimonial"], ...opts });
+var useContentTeamMembers = (opts = {}) => useContentItems({ types: ["team_member"], ...opts });
+var useContentPortfolio = (opts = {}) => useContentItems({ types: ["portfolio"], ...opts });
+var useContentPress = (opts = {}) => useContentItems({ types: ["press"], ...opts });
+var useContentSocialLinks = (opts = {}) => useContentItems({ types: ["social_link"], ...opts });
+var useContentBrandStats = (opts = {}) => useContentItems({ types: ["brand_stat"], ...opts });
+
+// src/hooks/useContentForm.ts
+import { useState as useState12, useEffect as useEffect6 } from "react";
+function useContentForm(formId) {
+  const { apiBase, workspaceId } = useSellHapi();
+  const [form, setForm] = useState12(null);
+  const [loading, setLoading] = useState12(true);
+  const [error, setError] = useState12(null);
+  useEffect6(() => {
+    if (!formId) return;
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const url = workspaceId ? `${apiBase}/api/content/forms/${formId}/schema?workspaceId=${encodeURIComponent(workspaceId)}` : `${apiBase}/api/content/forms/${formId}/schema`;
+    fetch(url).then(async (res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json = await res.json();
+      if (!cancelled) {
+        setForm(json);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err.message : "Failed to load form");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBase, workspaceId, formId]);
+  return { form, data: form, loading, error };
+}
+function useSubmitForm(formId) {
+  const { apiBase } = useSellHapi();
+  const [submitting, setSubmitting] = useState12(false);
+  const [submitted, setSubmitted] = useState12(false);
+  const [error, setError] = useState12(null);
+  const submit = async (data) => {
+    if (submitting || submitted) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBase}/api/content/forms/${formId}/submit`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data })
+      });
+      if (!res.ok) {
+        const json = await res.json().catch(() => ({}));
+        throw new Error(json.error ?? `HTTP ${res.status}`);
+      }
+      setSubmitted(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Submission failed");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return { submit, submitting, submitted, error };
+}
+
+// src/hooks/useCollection.ts
+import { useState as useState13, useEffect as useEffect7 } from "react";
+function useCollection(slug) {
+  const { apiBase, workspaceId } = useSellHapi();
+  const [result, setResult] = useState13({
+    id: "",
+    title: "",
+    slug: null,
+    description: null,
+    items: [],
+    loading: true,
+    error: null
+  });
+  useEffect7(() => {
+    if (!slug || !workspaceId) return;
+    let cancelled = false;
+    setResult((prev) => ({ ...prev, loading: true, error: null }));
+    const params = new URLSearchParams({ workspaceId, slug });
+    fetch(`${apiBase}/api/content/collections/public?${params.toString()}`).then(async (res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json = await res.json();
+      if (!cancelled) {
+        setResult({
+          ...json.data,
+          items: json.items ?? [],
+          loading: false,
+          error: null
+        });
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setResult((prev) => ({
+          ...prev,
+          loading: false,
+          error: err instanceof Error ? err.message : "Failed to load collection"
+        }));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBase, workspaceId, slug]);
+  return result;
+}
+
+// src/components/ProductGrid.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+  gap: 24
+};
+var cardStyle = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 8,
+  overflow: "hidden",
+  background: "#fff"
+};
+var imgStyle = {
+  width: "100%",
+  height: 180,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+var bodyStyle = { padding: "12px 16px 16px" };
+function ProductGrid({ heading, limit, categoryId, type }) {
+  const physicalResult = useProducts(type === "digital" ? { limit: 0 } : { limit, categoryId });
+  const digitalResult = useDigitalProducts(type === "digital" ? { limit } : { limit: 0 });
+  const result = type === "digital" ? digitalResult : physicalResult;
+  const { data: products, loading, error } = result;
+  if (loading) return /* @__PURE__ */ jsx2("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af" }, children: "Loading products\u2026" });
+  if (error) return /* @__PURE__ */ jsx2("div", { style: { padding: 24, color: "#ef4444" }, children: "Failed to load products." });
+  if (!products.length) return null;
+  return /* @__PURE__ */ jsxs("section", { children: [
+    heading && /* @__PURE__ */ jsx2("h2", { style: { marginBottom: 20, fontWeight: 700, fontSize: 24 }, children: heading }),
+    /* @__PURE__ */ jsx2("div", { style: gridStyle, children: products.map((p) => /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+      p.imageUrl ? /* @__PURE__ */ jsx2("img", { src: p.imageUrl, alt: p.name, style: imgStyle }) : /* @__PURE__ */ jsx2("div", { style: { ...imgStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+      /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+        /* @__PURE__ */ jsx2("p", { style: { fontWeight: 600, margin: "0 0 4px", fontSize: 15 }, children: p.name }),
+        /* @__PURE__ */ jsx2("p", { style: { color: "#6b7280", margin: "0 0 12px", fontSize: 13 }, children: p.description ?? "" }),
+        /* @__PURE__ */ jsxs("p", { style: { fontWeight: 700, margin: "0 0 12px", fontSize: 16 }, children: [
+          "\u20A6",
+          p.price.toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            style: { width: "100%", padding: "8px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 },
+            children: type === "digital" ? "Download / Buy" : "Add to Cart"
+          }
+        )
+      ] })
+    ] }, p.id)) })
+  ] });
+}
+
+// src/components/ProductCard.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var cardStyle2 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 8,
+  overflow: "hidden",
+  background: "#fff",
+  maxWidth: 280
+};
+var imgStyle2 = {
+  width: "100%",
+  height: 180,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+function ProductCard({ product }) {
+  return /* @__PURE__ */ jsxs2("div", { style: cardStyle2, children: [
+    product.imageUrl ? /* @__PURE__ */ jsx3("img", { src: product.imageUrl, alt: product.name, style: imgStyle2 }) : /* @__PURE__ */ jsx3("div", { style: { ...imgStyle2, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+    /* @__PURE__ */ jsxs2("div", { style: { padding: "12px 16px 16px" }, children: [
+      /* @__PURE__ */ jsx3("p", { style: { fontWeight: 600, margin: "0 0 4px", fontSize: 15 }, children: product.name }),
+      /* @__PURE__ */ jsxs2("p", { style: { fontWeight: 700, margin: "0 0 12px" }, children: [
+        "\u20A6",
+        product.price.toLocaleString()
+      ] }),
+      /* @__PURE__ */ jsx3("button", { style: { width: "100%", padding: "8px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 }, children: "Add to Cart" })
+    ] })
+  ] });
+}
+
+// src/components/EventCard.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var cardStyle3 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  overflow: "hidden",
+  background: "#fff",
+  maxWidth: 340
+};
+var imgStyle3 = {
+  width: "100%",
+  height: 200,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+function EventCard({ event }) {
+  return /* @__PURE__ */ jsxs3("div", { style: cardStyle3, children: [
+    event.imageUrl ? /* @__PURE__ */ jsx4("img", { src: event.imageUrl, alt: event.title, style: imgStyle3 }) : /* @__PURE__ */ jsx4("div", { style: { ...imgStyle3, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+    /* @__PURE__ */ jsxs3("div", { style: { padding: "14px 18px 18px" }, children: [
+      /* @__PURE__ */ jsx4("p", { style: { fontWeight: 600, margin: "0 0 6px", fontSize: 16 }, children: event.title }),
+      /* @__PURE__ */ jsx4("p", { style: { color: "#6b7280", margin: "0 0 4px", fontSize: 13 }, children: new Date(event.startsAt).toLocaleDateString("en-NG", { weekday: "short", day: "numeric", month: "long", year: "numeric" }) }),
+      event.location && /* @__PURE__ */ jsxs3("p", { style: { color: "#6b7280", margin: "0 0 14px", fontSize: 13 }, children: [
+        "\u{1F4CD} ",
+        event.location
+      ] }),
+      /* @__PURE__ */ jsx4("button", { style: { width: "100%", padding: "9px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 }, children: "Get Tickets" })
+    ] })
+  ] });
+}
+
+// src/components/EventGrid.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var gridStyle2 = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+  gap: 24
+};
+var cardStyle4 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  overflow: "hidden",
+  background: "#fff"
+};
+var imgStyle4 = {
+  width: "100%",
+  height: 200,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+function EventGrid({ heading, subheading, limit }) {
+  const { data: events, loading, error } = useEvents({ limit });
+  if (loading) return /* @__PURE__ */ jsx5("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af" }, children: "Loading events\u2026" });
+  if (error) return /* @__PURE__ */ jsx5("div", { style: { padding: 24, color: "#ef4444" }, children: "Failed to load events." });
+  if (!events.length) return null;
+  return /* @__PURE__ */ jsxs4("section", { children: [
+    heading && /* @__PURE__ */ jsx5("h2", { style: { fontWeight: 700, fontSize: 28, marginBottom: 8 }, children: heading }),
+    subheading && /* @__PURE__ */ jsx5("p", { style: { color: "#6b7280", marginBottom: 24 }, children: subheading }),
+    /* @__PURE__ */ jsx5("div", { style: gridStyle2, children: events.map((ev) => /* @__PURE__ */ jsxs4("div", { style: cardStyle4, children: [
+      ev.imageUrl ? /* @__PURE__ */ jsx5("img", { src: ev.imageUrl, alt: ev.title, style: imgStyle4 }) : /* @__PURE__ */ jsx5("div", { style: { ...imgStyle4, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+      /* @__PURE__ */ jsxs4("div", { style: { padding: "14px 18px 18px" }, children: [
+        /* @__PURE__ */ jsx5("p", { style: { fontWeight: 600, margin: "0 0 6px", fontSize: 16 }, children: ev.title }),
+        /* @__PURE__ */ jsx5("p", { style: { color: "#6b7280", margin: "0 0 4px", fontSize: 13 }, children: new Date(ev.startsAt).toLocaleDateString("en-NG", { weekday: "short", day: "numeric", month: "long", year: "numeric" }) }),
+        ev.location && /* @__PURE__ */ jsxs4("p", { style: { color: "#6b7280", margin: "0 0 14px", fontSize: 13 }, children: [
+          "\u{1F4CD} ",
+          ev.location
+        ] }),
+        /* @__PURE__ */ jsx5("button", { style: { width: "100%", padding: "9px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 }, children: "Get Tickets" })
+      ] })
+    ] }, ev.id)) })
+  ] });
+}
+
+// src/components/MembershipTiers.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var gridStyle3 = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+  gap: 24
+};
+var cardStyle5 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 12,
+  padding: "28px 24px",
+  background: "#fff"
+};
+function MembershipTiers({ heading, subheading }) {
+  const { data: tiers, loading, error } = useMemberships();
+  if (loading) return /* @__PURE__ */ jsx6("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af" }, children: "Loading tiers\u2026" });
+  if (error) return /* @__PURE__ */ jsx6("div", { style: { padding: 24, color: "#ef4444" }, children: "Failed to load membership tiers." });
+  if (!tiers.length) return null;
+  return /* @__PURE__ */ jsxs5("section", { children: [
+    heading && /* @__PURE__ */ jsx6("h2", { style: { fontWeight: 700, fontSize: 28, marginBottom: 8, textAlign: "center" }, children: heading }),
+    subheading && /* @__PURE__ */ jsx6("p", { style: { color: "#6b7280", marginBottom: 32, textAlign: "center" }, children: subheading }),
+    /* @__PURE__ */ jsx6("div", { style: gridStyle3, children: tiers.map((tier) => /* @__PURE__ */ jsxs5("div", { style: cardStyle5, children: [
+      /* @__PURE__ */ jsx6("p", { style: { fontWeight: 700, fontSize: 20, margin: "0 0 6px" }, children: tier.name }),
+      /* @__PURE__ */ jsxs5("p", { style: { fontWeight: 800, fontSize: 28, margin: "0 0 4px" }, children: [
+        "\u20A6",
+        (tier.priceKobo / 100).toLocaleString(),
+        /* @__PURE__ */ jsxs5("span", { style: { fontSize: 14, fontWeight: 400, color: "#6b7280" }, children: [
+          "/",
+          tier.billingPeriod === "monthly" ? "mo" : "yr"
+        ] })
+      ] }),
+      tier.description && /* @__PURE__ */ jsx6("p", { style: { color: "#6b7280", fontSize: 13, margin: "0 0 16px" }, children: tier.description }),
+      Array.isArray(tier.benefits) && tier.benefits.length > 0 && /* @__PURE__ */ jsx6("ul", { style: { margin: "0 0 20px", paddingLeft: 20 }, children: tier.benefits.map((b, i) => /* @__PURE__ */ jsx6("li", { style: { fontSize: 14, marginBottom: 4 }, children: b }, i)) }),
+      /* @__PURE__ */ jsx6("button", { style: { width: "100%", padding: "10px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 }, children: "Join Now" })
+    ] }, tier.id)) })
+  ] });
+}
+
+// src/components/AppointmentBooker.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var gridStyle4 = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+  gap: 20
+};
+var cardStyle6 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  padding: "20px",
+  background: "#fff"
+};
+function AppointmentBooker({ heading, subheading, limit }) {
+  const { data: services, loading, error } = useServices({ limit });
+  if (loading) return /* @__PURE__ */ jsx7("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af" }, children: "Loading services\u2026" });
+  if (error) return /* @__PURE__ */ jsx7("div", { style: { padding: 24, color: "#ef4444" }, children: "Failed to load services." });
+  if (!services.length) return null;
+  return /* @__PURE__ */ jsxs6("section", { children: [
+    heading && /* @__PURE__ */ jsx7("h2", { style: { fontWeight: 700, fontSize: 26, marginBottom: 8 }, children: heading }),
+    subheading && /* @__PURE__ */ jsx7("p", { style: { color: "#6b7280", marginBottom: 28 }, children: subheading }),
+    /* @__PURE__ */ jsx7("div", { style: gridStyle4, children: services.map((svc) => /* @__PURE__ */ jsxs6("div", { style: cardStyle6, children: [
+      /* @__PURE__ */ jsx7("p", { style: { fontWeight: 600, margin: "0 0 6px", fontSize: 16 }, children: svc.name }),
+      svc.description && /* @__PURE__ */ jsx7("p", { style: { color: "#6b7280", fontSize: 13, margin: "0 0 10px" }, children: svc.description }),
+      /* @__PURE__ */ jsxs6("p", { style: { fontWeight: 700, margin: "0 0 4px" }, children: [
+        "\u20A6",
+        (svc.priceKobo / 100).toLocaleString()
+      ] }),
+      svc.durationMinutes > 0 && /* @__PURE__ */ jsxs6("p", { style: { color: "#9ca3af", fontSize: 13, margin: "0 0 14px" }, children: [
+        "\u23F1 ",
+        svc.durationMinutes,
+        " min"
+      ] }),
+      /* @__PURE__ */ jsx7("button", { style: { width: "100%", padding: "8px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 }, children: "Book Now" })
+    ] }, svc.id)) })
+  ] });
+}
+
+// src/components/ArticleGrid.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var gridStyle5 = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+  gap: 24
+};
+var cardStyle7 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  overflow: "hidden",
+  background: "#fff"
+};
+var imgStyle5 = {
+  width: "100%",
+  height: 180,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+function ArticleGrid({ heading, limit, category, tag }) {
+  const { data: articles, loading, error } = useArticles({ limit, category, tag });
+  if (loading) return /* @__PURE__ */ jsx8("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af" }, children: "Loading articles\u2026" });
+  if (error) return /* @__PURE__ */ jsx8("div", { style: { padding: 24, color: "#ef4444" }, children: "Failed to load articles." });
+  if (!articles.length) return null;
+  return /* @__PURE__ */ jsxs7("section", { children: [
+    heading && /* @__PURE__ */ jsx8("h2", { style: { fontWeight: 700, fontSize: 26, marginBottom: 20 }, children: heading }),
+    /* @__PURE__ */ jsx8("div", { style: gridStyle5, children: articles.map((article) => /* @__PURE__ */ jsxs7("div", { style: cardStyle7, children: [
+      article.coverUrl ? /* @__PURE__ */ jsx8("img", { src: article.coverUrl, alt: article.title, style: imgStyle5 }) : /* @__PURE__ */ jsx8("div", { style: { ...imgStyle5, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+      /* @__PURE__ */ jsxs7("div", { style: { padding: "14px 18px 18px" }, children: [
+        /* @__PURE__ */ jsx8("p", { style: { fontWeight: 600, margin: "0 0 6px", fontSize: 15 }, children: article.title }),
+        article.excerpt && /* @__PURE__ */ jsx8("p", { style: { color: "#6b7280", fontSize: 13, margin: "0 0 8px", lineHeight: 1.5 }, children: article.excerpt }),
+        /* @__PURE__ */ jsx8("p", { style: { color: "#9ca3af", fontSize: 12 }, children: new Date(article.publishedAt).toLocaleDateString("en-NG", { day: "numeric", month: "long", year: "numeric" }) })
+      ] })
+    ] }, article.id)) })
+  ] });
+}
+
+// src/components/ArticleCard.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var cardStyle8 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  overflow: "hidden",
+  background: "#fff",
+  maxWidth: 340
+};
+var imgStyle6 = {
+  width: "100%",
+  height: 180,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+function ArticleCard({ article }) {
+  return /* @__PURE__ */ jsxs8("div", { style: cardStyle8, children: [
+    article.coverUrl ? /* @__PURE__ */ jsx9("img", { src: article.coverUrl, alt: article.title, style: imgStyle6 }) : /* @__PURE__ */ jsx9("div", { style: { ...imgStyle6, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+    /* @__PURE__ */ jsxs8("div", { style: { padding: "14px 18px 18px" }, children: [
+      /* @__PURE__ */ jsx9("p", { style: { fontWeight: 600, margin: "0 0 6px", fontSize: 15 }, children: article.title }),
+      article.excerpt && /* @__PURE__ */ jsx9("p", { style: { color: "#6b7280", fontSize: 13, margin: "0 0 8px", lineHeight: 1.5 }, children: article.excerpt }),
+      article.author && /* @__PURE__ */ jsxs8("p", { style: { color: "#9ca3af", fontSize: 12, margin: "0 0 4px" }, children: [
+        "By ",
+        article.author.name
+      ] }),
+      /* @__PURE__ */ jsx9("p", { style: { color: "#9ca3af", fontSize: 12 }, children: new Date(article.publishedAt).toLocaleDateString("en-NG", { day: "numeric", month: "long", year: "numeric" }) })
+    ] })
+  ] });
+}
+
+// src/components/DonationCampaignGrid.tsx
+import { Fragment, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var gridStyle6 = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+  gap: 24
+};
+var cardStyle9 = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  overflow: "hidden",
+  background: "#fff"
+};
+var imgStyle7 = {
+  width: "100%",
+  height: 180,
+  objectFit: "cover",
+  background: "#f3f4f6",
+  display: "block"
+};
+function progressPercent(raised, goal) {
+  if (!goal || goal === 0) return 0;
+  return Math.min(100, Math.round(raised / goal * 100));
+}
+function DonationCampaignGrid({ heading, subheading, limit }) {
+  const { data: campaigns, loading, error } = useDonationCampaigns({ limit });
+  if (loading) return /* @__PURE__ */ jsx10("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af" }, children: "Loading campaigns\u2026" });
+  if (error) return /* @__PURE__ */ jsx10("div", { style: { padding: 24, color: "#ef4444" }, children: "Failed to load campaigns." });
+  if (!campaigns.length) return null;
+  return /* @__PURE__ */ jsxs9("section", { children: [
+    heading && /* @__PURE__ */ jsx10("h2", { style: { fontWeight: 700, fontSize: 26, marginBottom: 8 }, children: heading }),
+    subheading && /* @__PURE__ */ jsx10("p", { style: { color: "#6b7280", marginBottom: 28 }, children: subheading }),
+    /* @__PURE__ */ jsx10("div", { style: gridStyle6, children: campaigns.map((c) => {
+      const pct = progressPercent(c.raisedAmountKobo, c.goalAmountKobo);
+      return /* @__PURE__ */ jsxs9("div", { style: cardStyle9, children: [
+        c.coverImageUrl ? /* @__PURE__ */ jsx10("img", { src: c.coverImageUrl, alt: c.title, style: imgStyle7 }) : /* @__PURE__ */ jsx10("div", { style: { ...imgStyle7, display: "flex", alignItems: "center", justifyContent: "center", color: "#d1d5db", fontSize: 12 }, children: "No image" }),
+        /* @__PURE__ */ jsxs9("div", { style: { padding: "14px 18px 18px" }, children: [
+          /* @__PURE__ */ jsx10("p", { style: { fontWeight: 600, margin: "0 0 6px", fontSize: 16 }, children: c.title }),
+          c.description && /* @__PURE__ */ jsx10("p", { style: { color: "#6b7280", fontSize: 13, margin: "0 0 10px" }, children: c.description }),
+          c.goalAmountKobo && c.showGoalProgress && /* @__PURE__ */ jsxs9(Fragment, { children: [
+            /* @__PURE__ */ jsx10("div", { style: { background: "#f3f4f6", borderRadius: 4, height: 6, marginBottom: 6 }, children: /* @__PURE__ */ jsx10("div", { style: { background: "#22c55e", width: `${pct}%`, height: "100%", borderRadius: 4, transition: "width 0.3s" } }) }),
+            /* @__PURE__ */ jsxs9("p", { style: { fontSize: 12, color: "#6b7280", margin: "0 0 12px" }, children: [
+              "\u20A6",
+              (c.raisedAmountKobo / 100).toLocaleString(),
+              " raised of \u20A6",
+              (c.goalAmountKobo / 100).toLocaleString(),
+              " (",
+              pct,
+              "%)"
+            ] })
+          ] }),
+          c.fixedAmountKobo != null && /* @__PURE__ */ jsxs9("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 10px" }, children: [
+            "\u20A6",
+            (c.fixedAmountKobo / 100).toLocaleString(),
+            " per contribution"
+          ] }),
+          /* @__PURE__ */ jsx10("button", { style: { width: "100%", padding: "9px 0", background: "#22c55e", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 600 }, children: c.fixedAmountKobo != null ? `Contribute \u20A6${(c.fixedAmountKobo / 100).toLocaleString()}` : "Donate Now" })
+        ] })
+      ] }, c.id);
+    }) })
+  ] });
+}
+
+// src/components/DonationForm.tsx
+import { useState as useState14 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var inputStyle = {
+  width: "100%",
+  padding: "10px 12px",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  fontSize: 14,
+  outline: "none",
+  boxSizing: "border-box"
+};
+function DonationForm({ campaignId, heading, buttonLabel = "Donate", primaryColor = "#111827", onSuccess }) {
+  const { workspaceId, apiBase } = useSellHapi();
+  const [amount, setAmount] = useState14("");
+  const [name, setName] = useState14("");
+  const [email, setEmail] = useState14("");
+  const [phone, setPhone] = useState14("");
+  const [loading, setLoading] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [success, setSuccess] = useState14(false);
+  if (success) {
+    return /* @__PURE__ */ jsx11("div", { style: { padding: 32, textAlign: "center" }, children: /* @__PURE__ */ jsx11("p", { style: { fontWeight: 700, fontSize: 18, color: primaryColor }, children: "Thank you for your donation! \u{1F64F}" }) });
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const amountKobo = Math.round(parseFloat(amount) * 100);
+    if (isNaN(amountKobo) || amountKobo <= 0) {
+      setError("Please enter a valid amount.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBase}/api/donations/storefront/donate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          vendorId: workspaceId,
+          campaignId,
+          amountKobo,
+          customer: { name, email, phone: phone || "N/A" }
+        })
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+      onSuccess?.();
+      if (body.paymentLink) {
+        window.location.href = body.paymentLink;
+      } else {
+        setSuccess(true);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Donation failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: 14, maxWidth: 400 }, children: [
+    heading && /* @__PURE__ */ jsx11("h3", { style: { fontWeight: 700, margin: 0 }, children: heading }),
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type: "number",
+        min: "1",
+        step: "any",
+        placeholder: "Amount (\u20A6)",
+        value: amount,
+        onChange: (e) => setAmount(e.target.value),
+        style: inputStyle,
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type: "text",
+        placeholder: "Your name",
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        style: inputStyle,
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type: "email",
+        placeholder: "Email address",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        style: inputStyle,
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type: "tel",
+        placeholder: "Phone number (optional)",
+        value: phone,
+        onChange: (e) => setPhone(e.target.value),
+        style: inputStyle
+      }
+    ),
+    error && /* @__PURE__ */ jsx11("p", { style: { color: "#ef4444", fontSize: 13, margin: 0 }, children: error }),
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "submit",
+        disabled: loading,
+        style: { padding: "11px 0", background: primaryColor, color: "#fff", border: "none", borderRadius: 6, fontWeight: 600, cursor: loading ? "not-allowed" : "pointer", opacity: loading ? 0.7 : 1 },
+        children: loading ? "Processing\u2026" : buttonLabel
+      }
+    )
+  ] });
+}
+
+// src/components/RSVPForm.tsx
+import { useState as useState15 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var inputStyle2 = {
+  width: "100%",
+  padding: "10px 12px",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  fontSize: 14,
+  outline: "none",
+  boxSizing: "border-box"
+};
+function RSVPForm({ eventId, heading, buttonLabel = "RSVP Now" }) {
+  const { submit, loading, error, success } = useCreateRSVP();
+  const [name, setName] = useState15("");
+  const [email, setEmail] = useState15("");
+  const [phone, setPhone] = useState15("");
+  if (success) {
+    return /* @__PURE__ */ jsx12("div", { style: { padding: 32, textAlign: "center" }, children: /* @__PURE__ */ jsx12("p", { style: { fontWeight: 700, fontSize: 18 }, children: "You're registered! See you there. \u{1F389}" }) });
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    void submit({ eventId, name, email, phone: phone || void 0 });
+  }
+  return /* @__PURE__ */ jsxs11("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: 14, maxWidth: 400 }, children: [
+    heading && /* @__PURE__ */ jsx12("h3", { style: { fontWeight: 700, margin: 0 }, children: heading }),
+    /* @__PURE__ */ jsx12(
+      "input",
+      {
+        type: "text",
+        placeholder: "Your name",
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        style: inputStyle2,
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "input",
+      {
+        type: "email",
+        placeholder: "Email address",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        style: inputStyle2,
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "input",
+      {
+        type: "tel",
+        placeholder: "Phone number (optional)",
+        value: phone,
+        onChange: (e) => setPhone(e.target.value),
+        style: inputStyle2
+      }
+    ),
+    error && /* @__PURE__ */ jsx12("p", { style: { color: "#ef4444", fontSize: 13, margin: 0 }, children: error }),
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "submit",
+        disabled: loading,
+        style: { padding: "11px 0", background: "#111827", color: "#fff", border: "none", borderRadius: 6, fontWeight: 600, cursor: loading ? "not-allowed" : "pointer", opacity: loading ? 0.7 : 1 },
+        children: loading ? "Registering\u2026" : buttonLabel
+      }
+    )
+  ] });
+}
+export {
+  AppointmentBooker,
+  ArticleCard,
+  ArticleGrid,
+  DonationCampaignGrid,
+  DonationForm,
+  EventCard,
+  EventGrid,
+  MembershipTiers,
+  ProductCard,
+  ProductGrid,
+  RSVPForm,
+  SellHapiProvider,
+  useArticle,
+  useArticles,
+  useAvailability,
+  useBookAppointment,
+  useCart,
+  useCartCheckout,
+  useProductCheckout as useCheckout,
+  useCheckoutConfig,
+  useCollection,
+  useContentAudio,
+  useContentBrandStats,
+  useContentDocuments,
+  useContentFaqs,
+  useContentForm,
+  useContentImages,
+  useContentItems,
+  useContentPortfolio,
+  useContentPress,
+  useContentSocialLinks,
+  useContentTeamMembers,
+  useContentTestimonials,
+  useContentVideoUrls,
+  useContentVideos,
+  useCreateRSVP,
+  useDigitalProducts,
+  useDonate,
+  useDonationCampaign,
+  useDonationCampaigns,
+  useEvent,
+  useEvents,
+  useMemberships,
+  useProduct,
+  useProductCheckout,
+  useProducts,
+  usePurchaseTickets,
+  useSellHapi,
+  useServices,
+  useShippingRates,
+  useStudioEditMode,
+  useSubmitForm,
+  useSubscribeMembership,
+  useValidateDiscount
+};