@scalemule/nextjs 0.0.42 → 0.1.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { MoneyClient } from '@scalemule/money';
 export { MoneyClient, MoneyClientConfig, createMoneyClient } from '@scalemule/money';
 import { RealtimeService } from '@scalemule/sdk';
@@ -346,6 +346,106 @@ interface UseShareReturn {
 }
 declare function useShare(options?: UseShareOptions): UseShareReturn;
 
+/**
+ * Public types for the feedback hook + widget.
+ *
+ * Mirrors the JSON shape returned by `scalemule-feedback`'s public endpoints
+ * (`/v1/feedback/submit`, `/v1/feedback/items`). Dashboard/admin shapes live
+ * server-side and are not exported here — customer apps interact with the
+ * SDK only through the end-user surface.
+ */
+type FeedbackType = 'bug_report' | 'feature_request' | 'improvement' | 'other';
+type FeedbackStatus = 'new' | 'reviewed' | 'planned' | 'in_progress' | 'completed' | 'declined';
+type FeedbackPriority = 'low' | 'medium' | 'high' | 'urgent';
+/**
+ * The end-user-visible shape of a feedback item. Excludes staff-only fields
+ * (assigned_to, internal_notes, email of OTHER users, etc.) that the service
+ * never returns through `/items`.
+ */
+interface FeedbackItem {
+    id: string;
+    type: FeedbackType;
+    title: string;
+    description: string;
+    status: FeedbackStatus;
+    priority: FeedbackPriority;
+    tags: string[] | null;
+    created_at: string;
+    updated_at: string;
+}
+/**
+ * Body for `POST /v1/feedback/submit`.
+ *
+ * `email` is required when no end-user session is present — the gateway omits
+ * `x-user-id` in that case and the service rejects with 400 unless email is
+ * given. When a session exists, email is optional.
+ */
+interface FeedbackItemInput {
+    type: FeedbackType;
+    title: string;
+    description: string;
+    email?: string;
+    tags?: string[];
+}
+
+interface UseFeedbackOptions {
+    /** Optional status filter applied to the list call. */
+    status?: FeedbackStatus;
+    /** Optional type filter. */
+    type?: FeedbackType;
+    /** When false, suppress the initial list fetch (the widget submits without listing). */
+    enabled?: boolean;
+}
+interface UseFeedbackResult {
+    /** End-user's own feedback items for the current tenant. Empty when not signed in. */
+    items: FeedbackItem[];
+    loading: boolean;
+    error: ApiError | null;
+    /** Submit a new feedback item. Returns the persisted item on success. */
+    submit: (input: FeedbackItemInput) => Promise<FeedbackItem>;
+    /** Re-fetch the list. */
+    refresh: () => Promise<void>;
+}
+/**
+ * Hook for end-user feedback submission and read-own.
+ *
+ * Calls go through `client` from `ScaleMuleProvider`, which attaches the
+ * configured API key and (when present) the user session token. Tenancy
+ * (`x-app-id`) is derived by the gateway from the API key — never set
+ * client-side.
+ */
+declare function useFeedback(options?: UseFeedbackOptions): UseFeedbackResult;
+
+interface FeedbackWidgetProps {
+    /** Floating-button corner. Default `bottom-right`. */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Default selected type when the modal opens. Default `feature_request`. */
+    defaultType?: FeedbackType;
+    /** Restrict the type select to this subset. Default: all four types. */
+    allowedTypes?: FeedbackType[];
+    /** Trigger button label. Default `Feedback`. */
+    triggerLabel?: string;
+    /** `light`/`dark`/`auto` (matches OS). Default `auto`. */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Optional class for the trigger button (use to override styling). */
+    className?: string;
+    /** Called after a successful submit. */
+    onSubmitted?: (item: FeedbackItem) => void;
+}
+/**
+ * Floating feedback widget. Renders nothing until the trigger is clicked,
+ * then opens a small modal with type / title / description fields. Submits
+ * via `useFeedback().submit()` — inherits identity from `ScaleMuleProvider`.
+ *
+ * If the end-user is not signed in, the widget shows an additional `email`
+ * field (required by the service for anonymous submissions).
+ *
+ * Tenant must have `feedback_app_config.enabled = TRUE` for `/submit` to
+ * accept submissions; otherwise the service responds with 404
+ * `FEEDBACK_DISABLED` and the widget surfaces the error message.
+ */
+declare function FeedbackWidget(props: FeedbackWidgetProps): ReactElement | null;
+
 /**
  * Client-side validation helpers
  *
@@ -504,4 +604,4 @@ declare function createSafeLogger(prefix: string): {
     error: (message: string, data?: unknown) => void;
 };
 
-export { ApiError, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, ListFilesParams, LoginResponse, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAuth, useBilling, useContent, useFeatureFlags, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };
+export { ApiError, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, type FeedbackItem, type FeedbackItemInput, type FeedbackPriority, type FeedbackStatus, type FeedbackType, FeedbackWidget, type FeedbackWidgetProps, ListFilesParams, LoginResponse, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeedbackOptions, type UseFeedbackResult, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { MoneyClient } from '@scalemule/money';
 export { MoneyClient, MoneyClientConfig, createMoneyClient } from '@scalemule/money';
 import { RealtimeService } from '@scalemule/sdk';
@@ -346,6 +346,106 @@ interface UseShareReturn {
 }
 declare function useShare(options?: UseShareOptions): UseShareReturn;
 
+/**
+ * Public types for the feedback hook + widget.
+ *
+ * Mirrors the JSON shape returned by `scalemule-feedback`'s public endpoints
+ * (`/v1/feedback/submit`, `/v1/feedback/items`). Dashboard/admin shapes live
+ * server-side and are not exported here — customer apps interact with the
+ * SDK only through the end-user surface.
+ */
+type FeedbackType = 'bug_report' | 'feature_request' | 'improvement' | 'other';
+type FeedbackStatus = 'new' | 'reviewed' | 'planned' | 'in_progress' | 'completed' | 'declined';
+type FeedbackPriority = 'low' | 'medium' | 'high' | 'urgent';
+/**
+ * The end-user-visible shape of a feedback item. Excludes staff-only fields
+ * (assigned_to, internal_notes, email of OTHER users, etc.) that the service
+ * never returns through `/items`.
+ */
+interface FeedbackItem {
+    id: string;
+    type: FeedbackType;
+    title: string;
+    description: string;
+    status: FeedbackStatus;
+    priority: FeedbackPriority;
+    tags: string[] | null;
+    created_at: string;
+    updated_at: string;
+}
+/**
+ * Body for `POST /v1/feedback/submit`.
+ *
+ * `email` is required when no end-user session is present — the gateway omits
+ * `x-user-id` in that case and the service rejects with 400 unless email is
+ * given. When a session exists, email is optional.
+ */
+interface FeedbackItemInput {
+    type: FeedbackType;
+    title: string;
+    description: string;
+    email?: string;
+    tags?: string[];
+}
+
+interface UseFeedbackOptions {
+    /** Optional status filter applied to the list call. */
+    status?: FeedbackStatus;
+    /** Optional type filter. */
+    type?: FeedbackType;
+    /** When false, suppress the initial list fetch (the widget submits without listing). */
+    enabled?: boolean;
+}
+interface UseFeedbackResult {
+    /** End-user's own feedback items for the current tenant. Empty when not signed in. */
+    items: FeedbackItem[];
+    loading: boolean;
+    error: ApiError | null;
+    /** Submit a new feedback item. Returns the persisted item on success. */
+    submit: (input: FeedbackItemInput) => Promise<FeedbackItem>;
+    /** Re-fetch the list. */
+    refresh: () => Promise<void>;
+}
+/**
+ * Hook for end-user feedback submission and read-own.
+ *
+ * Calls go through `client` from `ScaleMuleProvider`, which attaches the
+ * configured API key and (when present) the user session token. Tenancy
+ * (`x-app-id`) is derived by the gateway from the API key — never set
+ * client-side.
+ */
+declare function useFeedback(options?: UseFeedbackOptions): UseFeedbackResult;
+
+interface FeedbackWidgetProps {
+    /** Floating-button corner. Default `bottom-right`. */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Default selected type when the modal opens. Default `feature_request`. */
+    defaultType?: FeedbackType;
+    /** Restrict the type select to this subset. Default: all four types. */
+    allowedTypes?: FeedbackType[];
+    /** Trigger button label. Default `Feedback`. */
+    triggerLabel?: string;
+    /** `light`/`dark`/`auto` (matches OS). Default `auto`. */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Optional class for the trigger button (use to override styling). */
+    className?: string;
+    /** Called after a successful submit. */
+    onSubmitted?: (item: FeedbackItem) => void;
+}
+/**
+ * Floating feedback widget. Renders nothing until the trigger is clicked,
+ * then opens a small modal with type / title / description fields. Submits
+ * via `useFeedback().submit()` — inherits identity from `ScaleMuleProvider`.
+ *
+ * If the end-user is not signed in, the widget shows an additional `email`
+ * field (required by the service for anonymous submissions).
+ *
+ * Tenant must have `feedback_app_config.enabled = TRUE` for `/submit` to
+ * accept submissions; otherwise the service responds with 404
+ * `FEEDBACK_DISABLED` and the widget surfaces the error message.
+ */
+declare function FeedbackWidget(props: FeedbackWidgetProps): ReactElement | null;
+
 /**
  * Client-side validation helpers
  *
@@ -504,4 +604,4 @@ declare function createSafeLogger(prefix: string): {
     error: (message: string, data?: unknown) => void;
 };
 
-export { ApiError, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, ListFilesParams, LoginResponse, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAuth, useBilling, useContent, useFeatureFlags, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };
+export { ApiError, type FeatureFlagEvaluation, type FeatureFlagEvaluation as FeatureFlagResult, type FeedbackItem, type FeedbackItemInput, type FeedbackPriority, type FeedbackStatus, type FeedbackType, FeedbackWidget, type FeedbackWidgetProps, ListFilesParams, LoginResponse, type PasswordValidationResult, type PhoneCountry, type PhoneValidationResult, type RealtimeEvent, type RealtimeMessage, type RealtimeStatus, ScaleMuleClient, ScaleMuleConfig, ScaleMuleProvider, type ScaleMuleProviderProps, UseAnalyticsOptions, UseAnalyticsReturn, UseAuthReturn, UseBillingReturn, UseContentReturn, type UseFeatureFlagsOptions, type UseFeatureFlagsReturn, type UseFeedbackOptions, type UseFeedbackResult, type UseFeatureFlagsOptions as UseFlagsOptions, type UseFeatureFlagsReturn as UseFlagsReturn, type UsePushNotificationsOptions, type UsePushNotificationsReturn, type UseRealtimeOptions, type UseRealtimeReturn, type UseShareOptions, type UseShareReturn, UseUserReturn, User, type UsernameValidationResult, composePhone, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };

package/dist/index.js

@@ -9602,6 +9602,341 @@ function useShare(options) {
   }, [shareUrl]);
   return { shareUrl, referralCode, copyLink, copied, loading };
 }
+function toApiError2(error) {
+  if (error instanceof ScaleMuleApiError) {
+    return {
+      code: error.code,
+      message: error.message,
+      field: error.field
+    };
+  }
+  return {
+    code: "UNKNOWN",
+    message: error instanceof Error ? error.message : "Feedback request failed"
+  };
+}
+function useFeedback(options = {}) {
+  const { client } = useScaleMule();
+  const { status, type, enabled = true } = options;
+  const [items, setItems] = react.useState([]);
+  const [loading, setLoading] = react.useState(enabled);
+  const [error, setError] = react.useState(null);
+  const refresh = react.useCallback(async () => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (status) params.append("status", status);
+      if (type) params.append("type", type);
+      const qs = params.toString();
+      const path = `/v1/feedback/items${qs ? "?" + qs : ""}`;
+      const result = await client.get(path);
+      setItems(Array.isArray(result) ? result : []);
+      setError(null);
+    } catch (err) {
+      setError(toApiError2(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, enabled, status, type]);
+  react.useEffect(() => {
+    refresh();
+  }, [refresh]);
+  const submit = react.useCallback(
+    async (input) => {
+      try {
+        const created = await client.post("/v1/feedback/submit", input);
+        setItems((prev) => [created, ...prev]);
+        setError(null);
+        return created;
+      } catch (err) {
+        const apiErr = toApiError2(err);
+        setError(apiErr);
+        throw err;
+      }
+    },
+    [client]
+  );
+  return { items, loading, error, submit, refresh };
+}
+var TYPE_LABELS = {
+  bug_report: "Bug",
+  feature_request: "Feature request",
+  improvement: "Improvement",
+  other: "Other"
+};
+var POSITION_STYLES = {
+  "bottom-right": { bottom: 24, right: 24 },
+  "bottom-left": { bottom: 24, left: 24 },
+  "top-right": { top: 24, right: 24 },
+  "top-left": { top: 24, left: 24 }
+};
+var STYLES = {
+  trigger: {
+    position: "fixed",
+    zIndex: 999998,
+    padding: "10px 16px",
+    fontSize: 14,
+    fontWeight: 600,
+    border: "none",
+    borderRadius: 999,
+    cursor: "pointer",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+    background: "#1f2937",
+    color: "#fff"
+  },
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(15, 23, 42, 0.5)",
+    zIndex: 999999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16
+  },
+  modal: {
+    width: "min(440px, 100%)",
+    background: "#fff",
+    color: "#0f172a",
+    borderRadius: 12,
+    boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12
+  },
+  modalDark: {
+    background: "#0f172a",
+    color: "#f8fafc"
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    opacity: 0.7
+  },
+  field: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: 14,
+    border: "1px solid #e2e8f0",
+    borderRadius: 6,
+    boxSizing: "border-box",
+    background: "transparent",
+    color: "inherit"
+  },
+  textarea: {
+    minHeight: 96,
+    resize: "vertical"
+  },
+  rowEnd: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8
+  },
+  primaryBtn: {
+    padding: "8px 14px",
+    fontSize: 14,
+    fontWeight: 600,
+    border: "none",
+    borderRadius: 6,
+    background: "#2563eb",
+    color: "#fff",
+    cursor: "pointer"
+  },
+  secondaryBtn: {
+    padding: "8px 14px",
+    fontSize: 14,
+    border: "1px solid #cbd5e1",
+    borderRadius: 6,
+    background: "transparent",
+    color: "inherit",
+    cursor: "pointer"
+  },
+  error: {
+    fontSize: 13,
+    color: "#dc2626"
+  },
+  success: {
+    fontSize: 14,
+    fontWeight: 500,
+    textAlign: "center",
+    padding: "24px 8px"
+  }
+};
+var ALL_TYPES = ["bug_report", "feature_request", "improvement", "other"];
+function FeedbackWidget(props) {
+  const {
+    position = "bottom-right",
+    defaultType = "feature_request",
+    allowedTypes = ALL_TYPES,
+    triggerLabel = "Feedback",
+    theme = "auto",
+    className,
+    onSubmitted
+  } = props;
+  const sm = useScaleMule();
+  const { submit } = useFeedback({ enabled: false });
+  const [open, setOpen] = react.useState(false);
+  const [type, setType] = react.useState(defaultType);
+  const [title, setTitle] = react.useState("");
+  const [description, setDescription] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [submitting, setSubmitting] = react.useState(false);
+  const [errMsg, setErrMsg] = react.useState(null);
+  const [done, setDone] = react.useState(false);
+  Boolean(sm.user || sm.user === void 0 ? false : false);
+  const signedIn = Boolean(sm.user);
+  function reset() {
+    setType(defaultType);
+    setTitle("");
+    setDescription("");
+    setEmail("");
+    setErrMsg(null);
+    setDone(false);
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!title.trim() || !description.trim()) return;
+    if (!signedIn && !email.trim()) {
+      setErrMsg("email is required when not signed in");
+      return;
+    }
+    setSubmitting(true);
+    setErrMsg(null);
+    try {
+      const item = await submit({
+        type,
+        title: title.trim(),
+        description: description.trim(),
+        email: signedIn ? void 0 : email.trim() || void 0
+      });
+      setDone(true);
+      onSubmitted?.(item);
+    } catch (err) {
+      const message = err && typeof err === "object" && "message" in err ? String(err.message) : "Submit failed";
+      setErrMsg(message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  function handleClose() {
+    setOpen(false);
+    setTimeout(reset, 200);
+  }
+  const dark = theme === "dark" || theme === "auto" && typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className,
+        style: { ...STYLES.trigger, ...POSITION_STYLES[position] },
+        children: triggerLabel
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "dialog", "aria-modal": "true", style: STYLES.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        onClick: (e) => e.stopPropagation(),
+        style: { ...STYLES.modal, ...dark ? STYLES.modalDark : null },
+        children: done ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: STYLES.success, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F389}" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Thanks \u2014 we got it." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.rowEnd, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: STYLES.primaryBtn, onClick: handleClose, children: "Close" }) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: 16 }, children: "Send feedback" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClose,
+                "aria-label": "Close",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  fontSize: 18,
+                  cursor: "pointer",
+                  color: "inherit"
+                },
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.label, children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                style: STYLES.field,
+                value: type,
+                onChange: (e) => setType(e.target.value),
+                children: allowedTypes.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: t, children: TYPE_LABELS[t] }, t))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.label, children: "Title" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                style: STYLES.field,
+                type: "text",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                placeholder: "One-line summary",
+                maxLength: 255,
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.label, children: "Details" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                style: { ...STYLES.field, ...STYLES.textarea },
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                placeholder: "What happened, what you expected, anything else helpful\u2026",
+                required: true
+              }
+            )
+          ] }),
+          !signedIn && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.label, children: "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                style: STYLES.field,
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: "you@example.com",
+                required: true
+              }
+            )
+          ] }),
+          errMsg && /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.error, children: errMsg }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: STYLES.rowEnd, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: STYLES.secondaryBtn, onClick: handleClose, children: "Cancel" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", style: STYLES.primaryBtn, disabled: submitting, children: submitting ? "Sending\u2026" : "Send" })
+          ] })
+        ] })
+      }
+    ) })
+  ] });
+}
 
 // src/validation.ts
 var phoneCountries = [
@@ -9902,6 +10237,7 @@ Object.defineProperty(exports, "createMoneyClient", {
   enumerable: true,
   get: function () { return money.createMoneyClient; }
 });
+exports.FeedbackWidget = FeedbackWidget;
 exports.ScaleMuleApiError = ScaleMuleApiError;
 exports.ScaleMuleClient = ScaleMuleClient2;
 exports.ScaleMuleProvider = ScaleMuleProvider;
@@ -9916,6 +10252,7 @@ exports.useAuth = useAuth;
 exports.useBilling = useBilling;
 exports.useContent = useContent;
 exports.useFeatureFlags = useFeatureFlags;
+exports.useFeedback = useFeedback;
 exports.useMoney = useMoney;
 exports.useMoneyClient = useMoneyClient;
 exports.usePushNotifications = usePushNotifications;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createContext, useState, useMemo, useEffect, useCallback, useContext, useRef } from 'react';
 import { createMoneyClient } from '@scalemule/money';
 export { MoneyClient, createMoneyClient } from '@scalemule/money';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -9601,6 +9601,341 @@ function useShare(options) {
   }, [shareUrl]);
   return { shareUrl, referralCode, copyLink, copied, loading };
 }
+function toApiError2(error) {
+  if (error instanceof ScaleMuleApiError) {
+    return {
+      code: error.code,
+      message: error.message,
+      field: error.field
+    };
+  }
+  return {
+    code: "UNKNOWN",
+    message: error instanceof Error ? error.message : "Feedback request failed"
+  };
+}
+function useFeedback(options = {}) {
+  const { client } = useScaleMule();
+  const { status, type, enabled = true } = options;
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (status) params.append("status", status);
+      if (type) params.append("type", type);
+      const qs = params.toString();
+      const path = `/v1/feedback/items${qs ? "?" + qs : ""}`;
+      const result = await client.get(path);
+      setItems(Array.isArray(result) ? result : []);
+      setError(null);
+    } catch (err) {
+      setError(toApiError2(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, enabled, status, type]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  const submit = useCallback(
+    async (input) => {
+      try {
+        const created = await client.post("/v1/feedback/submit", input);
+        setItems((prev) => [created, ...prev]);
+        setError(null);
+        return created;
+      } catch (err) {
+        const apiErr = toApiError2(err);
+        setError(apiErr);
+        throw err;
+      }
+    },
+    [client]
+  );
+  return { items, loading, error, submit, refresh };
+}
+var TYPE_LABELS = {
+  bug_report: "Bug",
+  feature_request: "Feature request",
+  improvement: "Improvement",
+  other: "Other"
+};
+var POSITION_STYLES = {
+  "bottom-right": { bottom: 24, right: 24 },
+  "bottom-left": { bottom: 24, left: 24 },
+  "top-right": { top: 24, right: 24 },
+  "top-left": { top: 24, left: 24 }
+};
+var STYLES = {
+  trigger: {
+    position: "fixed",
+    zIndex: 999998,
+    padding: "10px 16px",
+    fontSize: 14,
+    fontWeight: 600,
+    border: "none",
+    borderRadius: 999,
+    cursor: "pointer",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+    background: "#1f2937",
+    color: "#fff"
+  },
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(15, 23, 42, 0.5)",
+    zIndex: 999999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16
+  },
+  modal: {
+    width: "min(440px, 100%)",
+    background: "#fff",
+    color: "#0f172a",
+    borderRadius: 12,
+    boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12
+  },
+  modalDark: {
+    background: "#0f172a",
+    color: "#f8fafc"
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    opacity: 0.7
+  },
+  field: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: 14,
+    border: "1px solid #e2e8f0",
+    borderRadius: 6,
+    boxSizing: "border-box",
+    background: "transparent",
+    color: "inherit"
+  },
+  textarea: {
+    minHeight: 96,
+    resize: "vertical"
+  },
+  rowEnd: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8
+  },
+  primaryBtn: {
+    padding: "8px 14px",
+    fontSize: 14,
+    fontWeight: 600,
+    border: "none",
+    borderRadius: 6,
+    background: "#2563eb",
+    color: "#fff",
+    cursor: "pointer"
+  },
+  secondaryBtn: {
+    padding: "8px 14px",
+    fontSize: 14,
+    border: "1px solid #cbd5e1",
+    borderRadius: 6,
+    background: "transparent",
+    color: "inherit",
+    cursor: "pointer"
+  },
+  error: {
+    fontSize: 13,
+    color: "#dc2626"
+  },
+  success: {
+    fontSize: 14,
+    fontWeight: 500,
+    textAlign: "center",
+    padding: "24px 8px"
+  }
+};
+var ALL_TYPES = ["bug_report", "feature_request", "improvement", "other"];
+function FeedbackWidget(props) {
+  const {
+    position = "bottom-right",
+    defaultType = "feature_request",
+    allowedTypes = ALL_TYPES,
+    triggerLabel = "Feedback",
+    theme = "auto",
+    className,
+    onSubmitted
+  } = props;
+  const sm = useScaleMule();
+  const { submit } = useFeedback({ enabled: false });
+  const [open, setOpen] = useState(false);
+  const [type, setType] = useState(defaultType);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [email, setEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState(null);
+  const [done, setDone] = useState(false);
+  Boolean(sm.user || sm.user === void 0 ? false : false);
+  const signedIn = Boolean(sm.user);
+  function reset() {
+    setType(defaultType);
+    setTitle("");
+    setDescription("");
+    setEmail("");
+    setErrMsg(null);
+    setDone(false);
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!title.trim() || !description.trim()) return;
+    if (!signedIn && !email.trim()) {
+      setErrMsg("email is required when not signed in");
+      return;
+    }
+    setSubmitting(true);
+    setErrMsg(null);
+    try {
+      const item = await submit({
+        type,
+        title: title.trim(),
+        description: description.trim(),
+        email: signedIn ? void 0 : email.trim() || void 0
+      });
+      setDone(true);
+      onSubmitted?.(item);
+    } catch (err) {
+      const message = err && typeof err === "object" && "message" in err ? String(err.message) : "Submit failed";
+      setErrMsg(message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  function handleClose() {
+    setOpen(false);
+    setTimeout(reset, 200);
+  }
+  const dark = theme === "dark" || theme === "auto" && typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className,
+        style: { ...STYLES.trigger, ...POSITION_STYLES[position] },
+        children: triggerLabel
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { role: "dialog", "aria-modal": "true", style: STYLES.overlay, onClick: handleClose, children: /* @__PURE__ */ jsx(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        onClick: (e) => e.stopPropagation(),
+        style: { ...STYLES.modal, ...dark ? STYLES.modalDark : null },
+        children: done ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: STYLES.success, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F389}" }),
+            /* @__PURE__ */ jsx("div", { children: "Thanks \u2014 we got it." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: STYLES.rowEnd, children: /* @__PURE__ */ jsx("button", { type: "button", style: STYLES.primaryBtn, onClick: handleClose, children: "Close" }) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx("strong", { style: { fontSize: 16 }, children: "Send feedback" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClose,
+                "aria-label": "Close",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  fontSize: 18,
+                  cursor: "pointer",
+                  color: "inherit"
+                },
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("div", { style: STYLES.label, children: "Type" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                style: STYLES.field,
+                value: type,
+                onChange: (e) => setType(e.target.value),
+                children: allowedTypes.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: TYPE_LABELS[t] }, t))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("div", { style: STYLES.label, children: "Title" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: STYLES.field,
+                type: "text",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                placeholder: "One-line summary",
+                maxLength: 255,
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("div", { style: STYLES.label, children: "Details" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                style: { ...STYLES.field, ...STYLES.textarea },
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                placeholder: "What happened, what you expected, anything else helpful\u2026",
+                required: true
+              }
+            )
+          ] }),
+          !signedIn && /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("div", { style: STYLES.label, children: "Email" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: STYLES.field,
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: "you@example.com",
+                required: true
+              }
+            )
+          ] }),
+          errMsg && /* @__PURE__ */ jsx("div", { style: STYLES.error, children: errMsg }),
+          /* @__PURE__ */ jsxs("div", { style: STYLES.rowEnd, children: [
+            /* @__PURE__ */ jsx("button", { type: "button", style: STYLES.secondaryBtn, onClick: handleClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx("button", { type: "submit", style: STYLES.primaryBtn, disabled: submitting, children: submitting ? "Sending\u2026" : "Send" })
+          ] })
+        ] })
+      }
+    ) })
+  ] });
+}
 
 // src/validation.ts
 var phoneCountries = [
@@ -9893,4 +10228,4 @@ function createSafeLogger(prefix) {
   };
 }
 
-export { ScaleMuleApiError, ScaleMuleClient2 as ScaleMuleClient, ScaleMuleProvider, composePhone, createClient, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAuth, useBilling, useContent, useFeatureFlags, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };
+export { FeedbackWidget, ScaleMuleApiError, ScaleMuleClient2 as ScaleMuleClient, ScaleMuleProvider, composePhone, createClient, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/nextjs",
-  "version": "0.0.42",
+  "version": "0.1.0",
   "description": "ScaleMule SDK for Next.js applications - authentication, storage, and user management",
   "main": "dist/index.js",
   "module": "dist/index.mjs",