@usefillo/react 0.6.1 → 0.7.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, ReactElement } from 'react';
 import * as _usefillo_core from '@usefillo/core';
-import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloStrings, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField } from '@usefillo/core';
+import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloStrings, FilloRespondent, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField } from '@usefillo/core';
 export { CodeForm, Field, FieldValue, FileValue, FilloAppearance, FilloClient, FilloError, FilloJsxError, FilloSlot, FilloStrings, FormSchema, FormStatus, FormTheme, ProvisionWorkspaceResult, PublishedForm, ResponseData, SlotState, createClient, defineForm, provisionWorkspace, when } from '@usefillo/core';
 
 /**
@@ -30,6 +30,32 @@ interface FilloApi {
     uploading: boolean;
     /** Human-readable message for the last failed submit; cleared on edit/retry. */
     submitError?: string;
+    /**
+     * True when `status` is "submitted" because the once-per-visitor gate
+     * restored a previous visit's response, not because a submit happened in
+     * this mount. Skip one-time "just submitted" reactions (focus moves,
+     * redirects, confetti) when it's set — remounts replay them otherwise.
+     */
+    restoredSubmission: boolean;
+    /**
+     * True when a saved-progress draft (settings.saveProgress) restored answers
+     * and/or page position from a previous visit. Show a "picked up where you
+     * left off" affordance with a Start over action (resetDraft) when set.
+     */
+    resumedDraft: boolean;
+    /**
+     * True when an update-in-place limit prefilled the VERIFIED respondent's own
+     * previous answers — submitting updates that response in place.
+     */
+    editingPrevious: boolean;
+    /**
+     * Persist unsaved draft progress right now (settings.saveProgress forms).
+     * The built-in renderers call it on pagehide/visibility-hidden; custom
+     * headless layouts inside <FilloProvider> get the same wiring for free.
+     */
+    flushDraft: () => void;
+    /** Discard the saved draft and reset to a fresh fill ("Start over"). */
+    resetDraft: () => void;
     /** Used by upload fields to gate submission. */
     setUploading: (fieldId: string, busy: boolean) => void;
 }
@@ -85,6 +111,14 @@ interface FilloFormBaseProps {
     /** Renderers for your own `custom` field kinds, keyed by `component`. */
     customComponents?: CustomComponents;
     initialData?: ResponseData;
+    /**
+     * identify(): your app's account context for the person filling the form
+     * ({ id, email?, name?, traits? } — id is your own user id). Recorded with
+     * the response as an unverified claim so responses, webhooks, and
+     * integrations can say who answered. Safe to pass late (after your session
+     * loads).
+     */
+    respondent?: FilloRespondent;
     onChange?: (data: ResponseData) => void;
     onSubmitted?: (responseId: string | undefined, data: ResponseData) => void;
     /** Observe load and code-form sync failures (otherwise only logged). */
@@ -148,6 +182,7 @@ type ContentProps = {
     id: string;
     children?: string;
     text?: string;
+    visibleIf?: Condition | Condition[];
 };
 /** Inert: rendering one throws; they exist to be read by the compiler. */
 type Inert<P> = (props: P) => never;
@@ -194,6 +229,7 @@ declare const Fillo: {
     readonly Paragraph: Inert<ContentProps>;
     readonly Divider: Inert<{
         id: string;
+        visibleIf?: Condition | Condition[];
     }>;
     readonly Page: Inert<{
         id: string;
@@ -227,6 +263,12 @@ interface ControllerOptions {
     surface?: "default" | "headless";
     /** Resolve the submission target at submit time when formId is still unset. */
     resolveFormId?: () => Promise<string>;
+    /**
+     * Host-app account context (identify()): who is filling this form, by your
+     * own user id. Recorded with the response as an unverified claim so the
+     * dashboard, webhooks, and integrations can say who answered.
+     */
+    respondent?: FilloRespondent;
 }
 /**
  * React binding for the framework-agnostic engine in @usefillo/core

package/dist/index.js

@@ -120,13 +120,19 @@ function useFilloController(options) {
       skipValidation: options.skipValidation,
       surface: options.surface ?? "headless",
       // Wrapped so the engine (created once) always calls the latest resolver.
-      resolveFormId: options.resolveFormId ? () => optsRef.current.resolveFormId() : void 0
+      resolveFormId: options.resolveFormId ? () => optsRef.current.resolveFormId() : void 0,
+      respondent: options.respondent
     });
   }
   const store = storeRef.current;
   useEffect(() => {
-    store.setContext({ form: options.form, formId: options.formId, client: options.client });
-  }, [store, options.form, options.formId, options.client]);
+    store.setContext({
+      form: options.form,
+      formId: options.formId,
+      client: options.client,
+      respondent: options.respondent
+    });
+  }, [store, options.form, options.formId, options.client, options.respondent]);
   useEffect(() => () => store.destroy(), [store]);
   const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
   return useMemo2(
@@ -139,11 +145,30 @@ function useFilloController(options) {
       setUploading: store.setUploading,
       next: store.next,
       back: store.back,
-      submit: store.submit
+      submit: store.submit,
+      flushDraft: store.flushDraft,
+      resetDraft: store.resetDraft
     }),
     [store, state, options.form, options.formId, options.client]
   );
 }
+function useDraftFlush(api) {
+  const enabled = Boolean(api.form.settings.saveProgress);
+  const flush = api.flushDraft;
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const onPageHide = () => flush();
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") flush();
+    };
+    window.addEventListener("pagehide", onPageHide);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("pagehide", onPageHide);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [enabled, flush]);
+}
 
 // src/define.ts
 import {
@@ -1889,20 +1914,23 @@ function ResolvedForm(props) {
     // Framed renderer: Fillo draws the layout (and badge), so the surface is
     // "default", never the bare-engine "headless".
     surface: "default",
-    resolveFormId
+    resolveFormId,
+    respondent: props.respondent
   });
+  useDraftFlush(api);
   const themed = useMemo5(() => themeProps(theme), [theme]);
   const settings = schema.settings;
   const submitted = api.status === "submitted";
+  const liveSubmit = submitted && !api.restoredSubmission;
   useEffect7(() => {
-    if (!submitted || !settings.redirectUrl || typeof window === "undefined") return;
+    if (!liveSubmit || !settings.redirectUrl || typeof window === "undefined") return;
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
-  }, [submitted, settings.redirectUrl]);
+  }, [liveSubmit, settings.redirectUrl]);
   const successRef = useRef5(null);
   useEffect7(() => {
-    if (submitted) successRef.current?.focus();
-  }, [submitted]);
+    if (liveSubmit) successRef.current?.focus();
+  }, [liveSubmit]);
   const blocksRef = useRef5(null);
   const prevPageIndex = useRef5(api.pageIndex);
   useEffect7(() => {
@@ -1977,6 +2005,18 @@ function ResolvedForm(props) {
       children: [
         !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx5(DevNoClientNotice, {}),
         props.draftNotice && isDevEnv() && /* @__PURE__ */ jsx5(DevDraftNotice, {}),
+        (api.resumedDraft || api.editingPrevious) && /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
+            "data-fillo": "resume",
+            role: "status",
+            children: [
+              /* @__PURE__ */ jsx5("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
+              /* @__PURE__ */ jsx5("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
+            ]
+          }
+        ),
         multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx5(
           "div",
           {
@@ -1997,7 +2037,7 @@ function ResolvedForm(props) {
           }
         ),
         api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs5("header", { className: slotClass3("fillo-header", appearance, { slot: "header" }), "data-fillo": "header", children: [
-          /* @__PURE__ */ jsx5("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
+          schema.title && /* @__PURE__ */ jsx5("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
           schema.description && /* @__PURE__ */ jsx5(
             "p",
             {
@@ -2154,6 +2194,7 @@ function FilloProvider({ children, form, formId, client, appearance, strings, ..
     // method; recorded per response so usage stays measurable.
     surface: "headless"
   });
+  useDraftFlush(api);
   return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: resolveStrings2(strings), children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) });
 }
 

package/dist/styles.css

@@ -698,4 +698,37 @@
     padding: 0.05em 0.3em;
     border-radius: 4px;
   }
+
+  /* ---------- Saved-progress resume notice ---------- */
+  .fillo-resume {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    padding: 0.6rem 0.9rem;
+    border: 1px solid var(--fillo-border);
+    border-radius: var(--fillo-radius);
+    background: var(--fillo-control-bg);
+    color: var(--fillo-muted);
+    font-size: 0.82rem;
+    line-height: 1.45;
+  }
+  .fillo-resume-clear {
+    border: 0;
+    background: none;
+    padding: 0;
+    color: var(--fillo-primary);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    white-space: nowrap;
+  }
+  .fillo-resume-clear:focus-visible {
+    outline: none;
+    border-radius: 4px;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
+  }
 }

package/dist/styles.unlayered.css

@@ -698,3 +698,36 @@
     padding: 0.05em 0.3em;
     border-radius: 4px;
   }
+
+  /* ---------- Saved-progress resume notice ---------- */
+  .fillo-resume {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    padding: 0.6rem 0.9rem;
+    border: 1px solid var(--fillo-border);
+    border-radius: var(--fillo-radius);
+    background: var(--fillo-control-bg);
+    color: var(--fillo-muted);
+    font-size: 0.82rem;
+    line-height: 1.45;
+  }
+  .fillo-resume-clear {
+    border: 0;
+    background: none;
+    padding: 0;
+    color: var(--fillo-primary);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    white-space: nowrap;
+  }
+  .fillo-resume-clear:focus-visible {
+    outline: none;
+    border-radius: 4px;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/react",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Headless React components for embedding Fillo forms natively in your product.",
   "license": "MIT",
   "keywords": [
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.6.1"
+    "@usefillo/core": "^0.7.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",