@digiform/wizard 0.2.10 → 0.2.11

package/wizard/src/features/state-management/machines/guards/navigationGuards.js

@@ -0,0 +1,59 @@
+"use client";
+import { ComponentTriggerEngine as r } from "../componentTriggerEngine.js";
+const s = {
+  hasSaveTriggersResults: /* @__PURE__ */ new Map(),
+  hasSaveContextActionsResults: /* @__PURE__ */ new Map()
+}, i = 500, l = ({ context: e }) => e.canNavigate, v = ({ context: e }) => e.pendingNavigation?.type === "next", d = ({ context: e }) => e.pendingNavigation?.type === "previous", h = ({ context: e }) => e.pendingNavigation?.type === "step", f = ({ context: e }) => {
+  const t = `${e.config.id}-${e.currentStepIndex}-${Object.keys(e.data).length}`, n = s.hasSaveTriggersResults.get(t);
+  if (n && Date.now() - n.timestamp < i)
+    return n.result;
+  const a = r.createExecutionPlan(
+    e.config,
+    "save",
+    e.currentStepIndex,
+    e
+  ).totalActions > 0;
+  if (s.hasSaveTriggersResults.set(t, {
+    result: a,
+    timestamp: Date.now()
+  }), s.hasSaveTriggersResults.size > 50) {
+    const c = Date.now();
+    for (const [g, u] of s.hasSaveTriggersResults)
+      c - u.timestamp > i * 4 && s.hasSaveTriggersResults.delete(g);
+  }
+  return a;
+}, S = ({ context: e }) => {
+  if (!e.pendingNavigation) return !0;
+  const t = e.config.steps[e.currentStepIndex];
+  if (!t || !("actions" in t) || !t.actions?.length)
+    return !0;
+  for (const n of t.actions)
+    if (n.type === "executeOnStepFinish")
+      return n.config?.navigationBehavior !== "block";
+  return !0;
+}, N = ({ context: e }) => {
+  if (!e.pendingNavigation || e.pendingNavigation.type !== "next")
+    return !1;
+  const t = `save-context-${e.config.id}-${e.currentStepIndex}-${Object.keys(e.data).length}`, n = s.hasSaveContextActionsResults.get(t);
+  if (n && Date.now() - n.timestamp < i)
+    return n.result;
+  const a = r.createExecutionPlan(
+    e.config,
+    "save",
+    e.currentStepIndex,
+    e
+  ).totalActions > 0;
+  return s.hasSaveContextActionsResults.set(t, {
+    result: a,
+    timestamp: Date.now()
+  }), a;
+};
+export {
+  l as canNavigate,
+  N as hasSaveContextActions,
+  f as hasSaveTriggersForNext,
+  v as isPendingNextNavigation,
+  d as isPendingPreviousNavigation,
+  h as isPendingStepNavigation,
+  S as shouldProceedWithNormalNavigation
+};

package/wizard/src/features/state-management/machines/guards/saveGuards.js

@@ -0,0 +1,21 @@
+"use client";
+import { ComponentTriggerEngine as i } from "../componentTriggerEngine.js";
+const a = ({
+  context: e
+}) => e.saveState.savingSection ? i.createExecutionPlan(
+  e.config,
+  "save",
+  e.currentStepIndex,
+  e
+).totalActions > 0 && Object.keys(e.saveState.validationErrors).length === 0 : !1, o = ({
+  context: e
+}) => {
+  const n = e.config.steps[e.currentStepIndex];
+  return !n || !("sections" in n) ? !1 : n.sections?.find(
+    (t) => t.id === e.saveState.savingSection
+  )?.mode === "editable";
+};
+export {
+  a as canExecuteSaveActions,
+  o as isSectionEditable
+};

package/wizard/src/features/state-management/machines/guards/triggerGuards.js

@@ -0,0 +1,11 @@
+"use client";
+import { ComponentTriggerEngine as e } from "../componentTriggerEngine.js";
+const g = ({ context: i }) => !i.pendingNavigation || i.pendingNavigation.type !== "next" || !(Object.keys(i.dirtyFields).length > 0) || !(Object.keys(i.componentOriginalValues).length > 0) ? !1 : e.findDirtyComponentsForNavigation(
+  i.config,
+  i.currentStepIndex,
+  i,
+  "step"
+).length > 0;
+export {
+  g as hasDirtyComponentsWithTriggers
+};

package/wizard/src/features/state-management/machines/helpers/triggerHelpers.js

@@ -0,0 +1,12 @@
+"use client";
+import { ComponentTriggerEngine as e } from "../componentTriggerEngine.js";
+function t(n, o) {
+  return e.findComponentTriggers(n, o);
+}
+function r(n, o) {
+  return e.findComponentActions(n, o);
+}
+export {
+  r as findComponentActions,
+  t as findComponentTriggers
+};

package/wizard/src/features/state-management/machines/performance.js

@@ -0,0 +1,56 @@
+"use client";
+const u = {};
+typeof process < "u" && process.env.NODE_ENV;
+typeof import.meta < "u" && typeof u < "u" || typeof process < "u" && process.env.NODE_ENV;
+const l = {
+  /**
+   * Efficient object comparison for React optimization
+   */
+  shallowEqual(e, t) {
+    const n = Object.keys(e), r = Object.keys(t);
+    if (n.length !== r.length)
+      return !1;
+    for (const s of n)
+      if (e[s] !== t[s])
+        return !1;
+    return !0;
+  },
+  /**
+   * Deep object comparison with depth limit for performance
+   */
+  deepEqual(e, t, n = 3) {
+    if (n <= 0) return e === t;
+    if (e === t) return !0;
+    if (e == null || t == null || typeof e != typeof t) return !1;
+    if (typeof e == "object") {
+      const r = Object.keys(e), s = Object.keys(t);
+      if (r.length !== s.length) return !1;
+      for (const f of r)
+        if (!this.deepEqual(e[f], t[f], n - 1))
+          return !1;
+      return !0;
+    }
+    return !1;
+  },
+  /**
+   * Optimized object merging
+   */
+  fastMerge(e, t) {
+    let n = !1;
+    for (const r in t)
+      if (e[r] !== t[r]) {
+        n = !0;
+        break;
+      }
+    return n ? Object.assign({}, e, t) : e;
+  },
+  /**
+   * Create optimized cache key
+   */
+  createCacheKey(...e) {
+    return e.filter((t) => t != null).join("|");
+  }
+};
+export {
+  l as memoryUtils
+};

package/wizard/src/features/state-management/machines/useFormMachine.js

@@ -0,0 +1,412 @@
+"use client";
+import { useMachine as me } from "@xstate/react";
+import fe, { useContext as Ee, useMemo as f, useCallback as o, createContext as Ce } from "react";
+import { ComponentTriggerEngine as V } from "./componentTriggerEngine.js";
+import { formMachine as he } from "./formMachine.js";
+import { ValidationEngine as Fe } from "../../validation-system/validation/ValidationEngine.js";
+const ve = ({
+  config: i,
+  initialData: g = {},
+  onSubmit: p
+}) => {
+  const d = f(() => new Fe({
+    messageStyle: i.validationMessageStyle || "withLabel",
+    debounceMs: 300
+  }), [i.validationMessageStyle]), [m, n] = me(he, {
+    input: {
+      config: i,
+      currentStepId: i.steps[0]?.id || "",
+      currentStepIndex: 0,
+      data: g,
+      errors: {},
+      dirtyFields: {},
+      touchedFields: {},
+      isValid: !0,
+      isSubmitting: !1
+    }
+    // Reduced inspection logging for performance
+  }), { context: s } = m, v = s.currentStepId, E = s.currentStepIndex, u = s.data, M = s.errors, h = s.isValid, O = s.isSubmitting, I = s.dirtyFields, R = s.touchedFields, N = f(
+    () => i.steps[E],
+    [i.steps, E]
+  ), D = f(() => i.steps, [i.steps]), L = E === 0, P = E === i.steps.length - 1, F = o(
+    (e) => {
+      for (const t of i.steps) {
+        const r = "sections" in t ? t.sections : [];
+        for (const c of r || []) {
+          const a = c.components?.find(
+            (l) => l.id === e
+          );
+          if (a)
+            return a;
+        }
+      }
+      return null;
+    },
+    [i.steps]
+  ), S = o(
+    (e, t) => {
+      n({
+        type: "SET_FIELD_STATE",
+        componentId: e,
+        state: { error: t }
+      });
+    },
+    [n]
+  ), C = o(
+    (e) => {
+      n({
+        type: "SET_FIELD_STATE",
+        componentId: e,
+        state: { error: null }
+      });
+    },
+    [n]
+  ), x = o(
+    (e, t) => {
+      n({ type: "SET_DATA", key: e, value: t });
+    },
+    [n]
+  ), T = o(
+    (e) => {
+      const t = F(e);
+      if (!t) return !0;
+      const r = d.validateField(
+        t,
+        u[e]
+      );
+      if (!r.isValid) {
+        const c = r.errors?.[0] || "Validation error";
+        return S(e, c), !1;
+      }
+      return C(e), !0;
+    },
+    [u, F, S, C, d]
+  ), w = o(
+    (e) => {
+      let t = !0;
+      for (const r of i.steps) {
+        const a = ("sections" in r ? r.sections : [])?.find(
+          (l) => l.id === e
+        );
+        if (a) {
+          for (const l of a.components || [])
+            T(l.id) || (t = !1);
+          break;
+        }
+      }
+      return t;
+    },
+    [i.steps, T]
+  ), b = o(
+    async (e) => {
+      const t = i.steps.find((a) => a.id === e);
+      if (!t || !("sections" in t)) return !0;
+      const r = await d.validateStep(t, u);
+      for (const [a, l] of Object.entries(
+        r.fieldErrors
+      ))
+        l.length > 0 && S(a, l[0]);
+      const c = t.sections?.flatMap(
+        (a) => a.components || []
+      ) || [];
+      for (const a of c)
+        r.fieldErrors[a.id] || C(a.id);
+      return r.isValid;
+    },
+    [i.steps, d, u, S, C]
+  ), G = o(async () => {
+    const e = await d.validateForm(i, u);
+    for (const [t, r] of Object.entries(
+      e.fieldErrors
+    ))
+      r.length > 0 && S(t, r[0]);
+    return e.isValid;
+  }, [i, d, u, S]), W = o(() => {
+    n({ type: "NEXT" });
+  }, [n]), U = o(() => {
+    n({ type: "PREVIOUS" });
+  }, [n]), k = o(
+    (e) => {
+      n({ type: "GO_TO_STEP", stepId: e });
+    },
+    [n]
+  ), $ = o(async () => {
+    if (n({ type: "SUBMIT" }), h && p)
+      try {
+        await p(u), n({ type: "SUBMIT_SUCCESS" });
+      } catch (e) {
+        n({
+          type: "SUBMIT_ERROR",
+          error: e instanceof Error ? e : new Error("Unknown error occurred")
+        });
+      }
+  }, [n, h, p, u]), j = o(() => {
+    n({ type: "RESET" });
+  }, [n]), B = o(
+    (e, t) => {
+      n({ type: "START_SECTION_EDIT", sectionId: e, componentIds: t });
+    },
+    [n]
+  ), z = o(
+    (e) => {
+      n({ type: "CANCEL_SECTION_EDIT", sectionId: e });
+    },
+    [n]
+  ), H = o(
+    (e, t, r) => {
+      n({ type: "FIELD_CHANGED", fieldId: e, oldValue: t, newValue: r });
+    },
+    [n]
+  ), K = o(
+    (e) => e ? s.fieldChangeState[e] || {
+      originalValue: void 0,
+      currentValue: void 0,
+      hasChanged: !1,
+      validationWarnings: []
+    } : s.fieldChangeState,
+    [s.fieldChangeState]
+  ), X = o(
+    (e) => {
+      n({ type: "CLEAR_FIELD_CHANGES", fieldId: e });
+    },
+    [n]
+  ), q = o(
+    (e, t) => {
+      n({ type: "TRIGGER_FIELD_WARNING", fieldId: e, warning: t });
+    },
+    [n]
+  ), J = o(
+    (e, t) => {
+      n({ type: "DISMISS_FIELD_WARNING", fieldId: e, warningId: t });
+    },
+    [n]
+  ), Q = o(
+    (e) => s.fieldChangeState[e]?.validationWarnings || [],
+    [s.fieldChangeState]
+  ), Y = o(
+    async (e, t) => (n({ type: "START_FIELD_VERIFICATION", fieldId: e, config: t }), new Promise((r) => {
+      setTimeout(() => {
+        const c = {
+          status: "success",
+          timestamp: Date.now(),
+          result: { verified: !0 }
+        };
+        n({
+          type: "FIELD_VERIFICATION_COMPLETE",
+          fieldId: e,
+          result: c,
+          success: !0
+        }), r(c);
+      }, 1e3);
+    })),
+    [n]
+  ), Z = o(
+    (e) => s.fieldValidationState.verificationResults[e] || null,
+    [s.fieldValidationState.verificationResults]
+  ), ee = f(() => s.fieldValidationState.activeWarnings.length > 0, [s.fieldValidationState.activeWarnings]), te = f(() => s.fieldValidationState.pendingVerifications.length > 0, [s.fieldValidationState.pendingVerifications]), ne = f(() => Object.keys(s.fieldChangeState).length > 0, [s.fieldChangeState]), se = o(
+    (e, t, r) => {
+      console.log(
+        `🚀 [useFormMachine] evaluateComponentTriggers called for ${e}:`,
+        {
+          eventType: t,
+          value: r,
+          componentId: e,
+          sendFunction: !!n,
+          currentState: m.value
+        }
+      );
+      const c = {
+        type: "EVALUATE_COMPONENT_TRIGGERS",
+        componentId: e,
+        eventType: t,
+        value: r
+      };
+      console.log("🚀 [useFormMachine] About to send event:", c), n(c), console.log(
+        `🚀 [useFormMachine] EVALUATE_COMPONENT_TRIGGERS event sent for ${e}`
+      );
+    },
+    [n, m.value]
+  ), re = o(
+    (e, t, r = "initialized") => {
+      n({
+        type: "SET_COMPONENT_ORIGINAL_VALUE",
+        componentId: e,
+        value: t,
+        source: r
+      });
+    },
+    [n]
+  ), oe = o(
+    (e, t) => {
+      n({
+        type: "MARK_COMPONENT_AS_POPULATED",
+        componentId: e,
+        value: t
+      });
+    },
+    [n]
+  ), ie = o(
+    (e) => s.componentOriginalValues[e]?.value,
+    [s.componentOriginalValues]
+  ), ae = o(
+    (e, t) => {
+      const r = s.componentOriginalValues[e];
+      return !r || !r.isPopulated ? !1 : r.value !== t;
+    },
+    [s.componentOriginalValues]
+  ), ce = o(
+    (e) => s.componentAlerts[e] || [],
+    [s.componentAlerts]
+  ), le = o(
+    (e, t) => {
+      n({
+        type: "DISMISS_COMPONENT_ALERT",
+        componentId: e,
+        alertId: t
+      });
+    },
+    [n]
+  ), de = o(
+    (e, t) => {
+      try {
+        const r = e.getFieldValue(t);
+        console.log(
+          `🔄 [useFormMachine] Resetting dirty state for field ${t}:`,
+          { currentValue: r }
+        ), e.resetField(t), r != null && r !== "" && e.setFieldValue(t, r, {
+          dontUpdateMeta: !0
+          // This prevents marking as dirty/touched
+        }), console.log(
+          `✅ [useFormMachine] Field ${t} dirty state reset complete`
+        );
+      } catch (r) {
+        console.error(
+          `❌ [useFormMachine] Error resetting dirty state for field ${t}:`,
+          r
+        );
+      }
+    },
+    []
+  ), ue = o(
+    (e) => V.hasComponentTriggers(i, e),
+    [i]
+  ), pe = o(
+    (e) => V.hasComponentActions(i, e),
+    [i]
+  ), Se = o(
+    (e) => {
+      const t = V.findComponentTriggers(
+        i,
+        e
+      ), r = Object.entries(s.componentTriggerState).filter(([l]) => l.startsWith(`${e}-`)).reduce(
+        (l, [y, ge]) => (l[y] = ge, l),
+        {}
+      ), c = s.activeComponentActions[e] || [], a = s.componentAlerts[e] || [];
+      return {
+        triggers: t,
+        triggerStates: r,
+        activeActions: c,
+        alerts: a
+      };
+    },
+    [
+      i,
+      s.componentTriggerState,
+      s.activeComponentActions,
+      s.componentAlerts
+    ]
+  );
+  return {
+    // XState primitives - for direct machine access
+    state: m,
+    send: n,
+    // Computed state values
+    currentStep: N,
+    currentStepId: v,
+    currentStepIndex: E,
+    data: u,
+    errors: M,
+    isValid: h,
+    isSubmitting: O,
+    dirtyFields: I,
+    touchedFields: R,
+    isFirstStep: L,
+    isLastStep: P,
+    steps: D,
+    config: s.config,
+    // Shared validation engine
+    validationEngine: d,
+    // Helper functions
+    findComponentById: F,
+    setFieldError: S,
+    clearFieldError: C,
+    // Actions
+    setData: x,
+    validateField: T,
+    validateSection: w,
+    validateStep: b,
+    validateForm: G,
+    nextStep: W,
+    previousStep: U,
+    goToStep: k,
+    submitForm: $,
+    resetForm: j,
+    startSectionEdit: B,
+    cancelSectionEdit: z,
+    // Field change validation helpers
+    trackFieldChange: H,
+    getFieldChanges: K,
+    clearFieldChanges: X,
+    showFieldWarning: q,
+    dismissFieldWarning: J,
+    getFieldWarnings: Q,
+    startFieldVerification: Y,
+    getVerificationStatus: Z,
+    // Computed validation state
+    hasActiveWarnings: ee,
+    hasPendingVerifications: te,
+    hasFieldChanges: ne,
+    fieldChangeState: s.fieldChangeState,
+    fieldValidationState: s.fieldValidationState,
+    // Component trigger-action system
+    evaluateComponentTriggers: se,
+    setComponentOriginalValue: re,
+    markComponentAsPopulated: oe,
+    getComponentOriginalValue: ie,
+    isComponentDirty: ae,
+    getComponentAlerts: ce,
+    dismissComponentAlert: le,
+    resetFieldDirtyState: de,
+    hasComponentTriggers: ue,
+    hasComponentActions: pe,
+    getComponentTriggerState: Se,
+    componentTriggerState: s.componentTriggerState,
+    activeComponentActions: s.activeComponentActions,
+    componentAlerts: s.componentAlerts,
+    componentOriginalValues: s.componentOriginalValues
+  };
+};
+let A = null;
+const _ = () => (A || (A = Ce(null)), A), Me = {
+  Provider: ({
+    children: i,
+    value: g
+  }) => {
+    const p = _();
+    return fe.createElement(p.Provider, { value: g }, i);
+  }
+}, Oe = () => {
+  const i = _(), g = Ee(i);
+  if (!g)
+    throw new Error(
+      "useFormMachine must be used within a FormWizard component"
+    );
+  const { state: p, send: d, ...m } = g;
+  return [p, d, m];
+};
+export {
+  Me as FormMachineContext,
+  Oe as default,
+  Oe as useFormMachine,
+  ve as useFormMachineProvider
+};

package/wizard/src/features/trigger-action-system/components/ActionLoadingIndicator/ActionLoadingIndicator.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+/* empty css                                  */
+import { Badge as c } from "../../../../../../ui/src/components/badge/badge.js";
+import { Card as o, CardContent as l } from "../../../../../../ui/src/components/card/card.js";
+import { clsx as d } from "clsx";
+import { Loader2 as m } from "lucide-react";
+import { memo as p } from "react";
+import e from "./ActionLoadingIndicator.module.css.js";
+const g = p(
+  ({ activeActions: a, className: n }) => {
+    const t = Object.values(a).filter(
+      (i) => i.status === "executing"
+    );
+    return t.length === 0 ? null : /* @__PURE__ */ s(o, { className: d(e.card, n), children: /* @__PURE__ */ r(l, { className: e.cardContent, children: [
+      /* @__PURE__ */ r("div", { className: e.contentRow, children: [
+        /* @__PURE__ */ s(m, { className: e.spinner }),
+        /* @__PURE__ */ r("div", { className: e.textContent, children: [
+          /* @__PURE__ */ s("div", { className: e.title, children: "Executing Actions..." }),
+          /* @__PURE__ */ s("div", { className: e.subtitle, children: t.length === 1 ? "1 action in progress" : `${t.length} actions in progress` })
+        ] }),
+        /* @__PURE__ */ s("div", { className: e.badgeList, children: t.map((i) => /* @__PURE__ */ s(
+          c,
+          {
+            variant: "secondary",
+            className: e.badgeText,
+            children: i.actionId.split("-")[0]
+          },
+          i.actionId
+        )) })
+      ] }),
+      /* @__PURE__ */ s("div", { className: e.progressSection, children: /* @__PURE__ */ s("div", { className: e.progressTrack, children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: e.progressBar,
+          style: { width: "60%" }
+        }
+      ) }) })
+    ] }) });
+  }
+);
+g.displayName = "ActionLoadingIndicator";
+export {
+  g as ActionLoadingIndicator,
+  g as default
+};

package/wizard/src/features/trigger-action-system/components/ActionLoadingIndicator/ActionLoadingIndicator.module.css.js

@@ -0,0 +1,30 @@
+"use client";
+const t = "fb-card_jvOrv", e = "fb-cardContent_Cnf5t", s = "fb-contentRow_-lops", n = "fb-spinner_SkwMR", o = "fb-textContent_t3X2X", r = "fb-title_-fTQX", c = "fb-subtitle_wyptE", b = "fb-badgeList_xtoNn", a = "fb-badgeText_TZRdG", g = "fb-progressSection_XcPgJ", i = "fb-progressTrack_BUoRx", f = "fb-progressBar_5MELx", p = {
+  card: t,
+  cardContent: e,
+  contentRow: s,
+  spinner: n,
+  textContent: o,
+  title: r,
+  subtitle: c,
+  badgeList: b,
+  badgeText: a,
+  progressSection: g,
+  progressTrack: i,
+  progressBar: f
+};
+export {
+  b as badgeList,
+  a as badgeText,
+  t as card,
+  e as cardContent,
+  s as contentRow,
+  p as default,
+  f as progressBar,
+  g as progressSection,
+  i as progressTrack,
+  n as spinner,
+  c as subtitle,
+  o as textContent,
+  r as title
+};