@digiform/wizard 0.3.2 → 0.3.4

package/features/form-runtime/index.d.ts

@@ -5,7 +5,6 @@
  */
 export { default as ComponentAdapterComplete } from './ComponentAdapterComplete/ComponentAdapterComplete';
 export * from './components';
-export * from './config';
 export type { FormWizardProps } from './FormWizard/FormWizard';
 export { default as FormWizard } from './FormWizard/FormWizard';
 export * from './hooks';

package/features/state-management/machines/useFormMachine.d.ts

@@ -442,7 +442,7 @@ export declare const useFormMachineProvider: ({ config, initialData, onSubmit, }
         type: "TRIGGER_STEP_VALIDATION";
         fieldIds: string[];
     }) => void;
-    currentStep: import('../../../../../core/src/index.ts').FormStepConfig | import('../../../../../core/src/index.ts').TemplateStepConfig;
+    currentStep: import('../../../../../core/src/index.ts').FormStepConfig;
     currentStepId: string;
     currentStepIndex: number;
     data: FormData;
@@ -453,7 +453,7 @@ export declare const useFormMachineProvider: ({ config, initialData, onSubmit, }
     touchedFields: Record<string, boolean>;
     isFirstStep: boolean;
     isLastStep: boolean;
-    steps: (import('../../../../../core/src/index.ts').FormStepConfig | import('../../../../../core/src/index.ts').TemplateStepConfig)[];
+    steps: import('../../../../../core/src/index.ts').FormStepConfig[];
     config: FormWizardConfig;
     validationEngine: ValidationEngine;
     findComponentById: (componentId: string) => ComponentConfig | null;
@@ -951,7 +951,7 @@ export declare const FormMachineContext: {
             type: "TRIGGER_STEP_VALIDATION";
             fieldIds: string[];
         }) => void;
-        currentStep: import('../../../../../core/src/index.ts').FormStepConfig | import('../../../../../core/src/index.ts').TemplateStepConfig;
+        currentStep: import('../../../../../core/src/index.ts').FormStepConfig;
         currentStepId: string;
         currentStepIndex: number;
         data: FormData;
@@ -962,7 +962,7 @@ export declare const FormMachineContext: {
         touchedFields: Record<string, boolean>;
         isFirstStep: boolean;
         isLastStep: boolean;
-        steps: (import('../../../../../core/src/index.ts').FormStepConfig | import('../../../../../core/src/index.ts').TemplateStepConfig)[];
+        steps: import('../../../../../core/src/index.ts').FormStepConfig[];
         config: FormWizardConfig;
         validationEngine: ValidationEngine;
         findComponentById: (componentId: string) => ComponentConfig | null;
@@ -1454,7 +1454,7 @@ export declare const useFormMachine: () => readonly [import('xstate').MachineSna
     type: "TRIGGER_STEP_VALIDATION";
     fieldIds: string[];
 }) => void, {
-    currentStep: import('../../../../../core/src/index.ts').FormStepConfig | import('../../../../../core/src/index.ts').TemplateStepConfig;
+    currentStep: import('../../../../../core/src/index.ts').FormStepConfig;
     currentStepId: string;
     currentStepIndex: number;
     data: FormData;
@@ -1465,7 +1465,7 @@ export declare const useFormMachine: () => readonly [import('xstate').MachineSna
     touchedFields: Record<string, boolean>;
     isFirstStep: boolean;
     isLastStep: boolean;
-    steps: (import('../../../../../core/src/index.ts').FormStepConfig | import('../../../../../core/src/index.ts').TemplateStepConfig)[];
+    steps: import('../../../../../core/src/index.ts').FormStepConfig[];
     config: FormWizardConfig;
     validationEngine: ValidationEngine;
     findComponentById: (componentId: string) => ComponentConfig | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiform/wizard",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "React component for rendering configurable multi-step forms from a JSON config",
   "author": "VladAfanasev",
   "license": "MIT",
@@ -36,23 +36,41 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {},
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "xstate": "^5.0.0",
-    "@xstate/react": "^5.0.0",
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.0.0",
+    "@radix-ui/react-alert-dialog": "^1.0.0",
+    "@radix-ui/react-checkbox": "^1.0.0",
+    "@radix-ui/react-context-menu": "^2.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.0",
+    "@radix-ui/react-hover-card": "^1.0.0",
+    "@radix-ui/react-label": "^2.0.0",
+    "@radix-ui/react-navigation-menu": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-progress": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-scroll-area": "^1.0.0",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-tabs": "^1.0.0",
+    "@radix-ui/react-toast": "^1.0.0",
+    "@radix-ui/react-toggle": "^1.0.0",
+    "@radix-ui/react-toggle-group": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
     "@tanstack/react-form": "^1.0.0",
     "@tanstack/zod-form-adapter": "^0.40.0",
-    "zod": "^3.20.0",
-    "@radix-ui/react-checkbox": "^1.3.0",
-    "@radix-ui/react-dialog": "^1.1.0",
-    "@radix-ui/react-radio-group": "^1.3.0",
-    "@radix-ui/react-select": "^2.2.0",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@xstate/react": "^5.0.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.462.0",
+    "xstate": "^5.0.0",
+    "zod": "^3.20.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
     "@rijkshuisstijl-community/components-react": ">=7.0.0"
   }
 }

package/ui/src/lib/types/guards.js

@@ -1,11 +1,7 @@
 "use client";
 function t(e) {
-  return typeof e == "object" && e !== null && "templateId" in e;
-}
-function l(e) {
   return e && typeof e.template == "object" && typeof e.template.typeId == "string";
 }
 export {
-  l as isTemplateDialogConfig,
-  t as isTemplateStep
+  t as isTemplateDialogConfig
 };

package/wizard/src/features/form-runtime/FormWizard/FormWizard.js

@@ -1,85 +1,63 @@
 "use client";
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { wizardDefaultRenderer as E } from "../../../renderer/wizardRenderer.js";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { wizardDefaultRenderer as u } from "../../../renderer/wizardRenderer.js";
 /* empty css                               */
-import { FormLayout as s } from "../../../../../ui/src/components/FormLayout/FormLayout.js";
-import { formWizardQueryClient as z } from "../../../../../ui/src/lib/queryClient.js";
-import { QueryClientProvider as N } from "@tanstack/react-query";
-import { clsx as u } from "clsx";
-import { memo as M, useState as h, useEffect as P, useMemo as g } from "react";
-import t from "./FormWizard.module.css.js";
-import W from "../components/FormStep/FormStep.js";
-import w from "../components/StepProgressIndicator/StepProgressIndicator.js";
-import { hasTemplateSteps as x, resolveFormWizardConfig as L } from "../config/configResolver.js";
-import { ThemeProvider as T, useThemeConfig as I } from "../../../../../ui/src/theme/ThemeProvider.js";
-import { useFormMachineProvider as R, FormMachineContext as j } from "../../state-management/machines/useFormMachine.js";
-import A from "../../../../../ui/src/lib/error-boundaries/FormWizardErrorBoundary.js";
-import { FormEditingProvider as B } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
-import l from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
-import { ActionManager as H } from "../../trigger-action-system/components/ActionManager.js";
-import { registerRenderComponent as Q } from "../../../../../ui/src/component-registry/renderComponent.js";
-import { ValidationEngine as b } from "../../validation-system/validation/ValidationEngine.js";
-import { Heading as D } from "@rijkshuisstijl-community/components-react";
-Q(E);
-const v = M(
+import { FormLayout as m } from "../../../../../ui/src/components/FormLayout/FormLayout.js";
+import { formWizardQueryClient as g } from "../../../../../ui/src/lib/queryClient.js";
+import { QueryClientProvider as y } from "@tanstack/react-query";
+import { memo as C, useMemo as s } from "react";
+import F from "./FormWizard.module.css.js";
+import v from "../components/FormStep/FormStep.js";
+import S from "../components/StepProgressIndicator/StepProgressIndicator.js";
+import { ThemeProvider as M, useThemeConfig as z } from "../../../../../ui/src/theme/ThemeProvider.js";
+import { useFormMachineProvider as P, FormMachineContext as N } from "../../state-management/machines/useFormMachine.js";
+import W from "../../../../../ui/src/lib/error-boundaries/FormWizardErrorBoundary.js";
+import { FormEditingProvider as E } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+import i from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
+import { ActionManager as x } from "../../trigger-action-system/components/ActionManager.js";
+import { registerRenderComponent as L } from "../../../../../ui/src/component-registry/renderComponent.js";
+import { ValidationEngine as w } from "../../validation-system/validation/ValidationEngine.js";
+import { Heading as I } from "@rijkshuisstijl-community/components-react";
+L(u);
+const p = C(
   ({
     config: e,
-    initialData: n = {},
-    onSubmit: C,
-    queryClient: y = z
+    initialData: o = {},
+    onSubmit: l,
+    queryClient: c = g
   }) => {
-    const [i, d] = h(null), [c, f] = h(null);
-    P(() => {
-      (async () => {
-        try {
-          if (f(null), x(e)) {
-            const o = await L(e);
-            d(o);
-          } else
-            d(e);
-        } catch (o) {
-          f(
-            o instanceof Error ? o.message : "Failed to resolve configuration"
-          ), console.error("Error resolving form configuration:", o);
-        }
-      })();
-    }, [e]);
-    const p = g(() => new b({
+    const n = s(() => new w({
       messageStyle: e.validationMessageStyle || "withLabel"
-    }), [e.validationMessageStyle]), S = g(() => i ? {
-      ...i,
-      steps: i.steps.map((m) => {
-        const o = m;
+    }), [e.validationMessageStyle]), f = s(() => ({
+      ...e,
+      steps: e.steps.map((a) => {
+        const t = a;
         return {
-          ...o,
-          schema: o.schema || p.getStepSchema(o)
+          ...t,
+          schema: t.schema || n.getStepSchema(t)
         };
       })
-    } : null, [i, p]), F = R({
-      config: S || e,
-      // Fallback to original config if resolution fails
-      initialData: n,
-      onSubmit: C
+    }), [e, n]), h = P({
+      config: f,
+      initialData: o,
+      onSubmit: l
     });
-    return c ? /* @__PURE__ */ a("div", { className: u("form-wizard-error", t.errorState), children: [
-      /* @__PURE__ */ r("h3", { className: t.errorHeading, children: "Configuration Error" }),
-      /* @__PURE__ */ r("p", { children: c })
-    ] }) : i ? /* @__PURE__ */ r(N, { client: y, children: /* @__PURE__ */ r(A, { formId: e.id, children: /* @__PURE__ */ r(B, { children: /* @__PURE__ */ a(j.Provider, { value: F, children: [
-      /* @__PURE__ */ r(l, { componentName: "ActionManager", children: /* @__PURE__ */ r(H, {}) }),
-      /* @__PURE__ */ a(s, { className: t.formLayout, children: [
-        /* @__PURE__ */ r(s.Title, { children: /* @__PURE__ */ r(D, { level: 1, children: e.title }) }),
-        /* @__PURE__ */ r(s.LeftColumn, { children: /* @__PURE__ */ r(l, { componentName: "StepProgressIndicator", children: /* @__PURE__ */ r(w, {}) }) }),
-        /* @__PURE__ */ r(l, { componentName: "FormStep", children: /* @__PURE__ */ r(W, {}) })
+    return /* @__PURE__ */ r(y, { client: c, children: /* @__PURE__ */ r(W, { formId: e.id, children: /* @__PURE__ */ r(E, { children: /* @__PURE__ */ d(N.Provider, { value: h, children: [
+      /* @__PURE__ */ r(i, { componentName: "ActionManager", children: /* @__PURE__ */ r(x, {}) }),
+      /* @__PURE__ */ d(m, { className: F.formLayout, children: [
+        /* @__PURE__ */ r(m.Title, { children: /* @__PURE__ */ r(I, { level: 1, children: e.title }) }),
+        /* @__PURE__ */ r(m.LeftColumn, { children: /* @__PURE__ */ r(i, { componentName: "StepProgressIndicator", children: /* @__PURE__ */ r(S, {}) }) }),
+        /* @__PURE__ */ r(i, { componentName: "FormStep", children: /* @__PURE__ */ r(v, {}) })
       ] })
-    ] }) }) }) }) : /* @__PURE__ */ r("div", { className: u("form-wizard-loading", t.loadingState), children: /* @__PURE__ */ r("div", { className: t.loadingPulse, children: "Loading form templates..." }) });
+    ] }) }) }) });
   }
 );
-v.displayName = "FormWizardCore";
-const V = (e) => {
-  const n = I();
-  return /* @__PURE__ */ r(T, { config: n, children: /* @__PURE__ */ r(v, { ...e }) });
+p.displayName = "FormWizardCore";
+const T = (e) => {
+  const o = z();
+  return /* @__PURE__ */ r(M, { config: o, children: /* @__PURE__ */ r(p, { ...e }) });
 };
-V.displayName = "FormWizard";
+T.displayName = "FormWizard";
 export {
-  V as default
+  T as default
 };

package/wizard/src/features/form-runtime/FormWizard/FormWizard.module.css.js

@@ -1,16 +1,8 @@
 "use client";
-const o = "fb-errorState_khSRW", t = "fb-errorHeading_dGdN2", e = "fb-loadingState_Pdhds", r = "fb-loadingPulse_QIw08", a = "fb-formLayout_JzC8E", n = {
-  errorState: o,
-  errorHeading: t,
-  loadingState: e,
-  loadingPulse: r,
-  formLayout: a
+const o = "fb-formLayout_JzC8E", t = {
+  formLayout: o
 };
 export {
-  n as default,
-  t as errorHeading,
-  o as errorState,
-  a as formLayout,
-  r as loadingPulse,
-  e as loadingState
+  t as default,
+  o as formLayout
 };

package/wizard/src/features/form-runtime/components/FormStep/FormStep.js

@@ -1,158 +1,151 @@
 "use client";
-import { jsxs as h, jsx as n, Fragment as M } from "react/jsx-runtime";
-import S from "./FormStep.module.css.js";
+import { jsxs as f, jsx as r, Fragment as _ } from "react/jsx-runtime";
+import g from "./FormStep.module.css.js";
 /* empty css                                  */
-import { isTemplateStep as l } from "../../../../../../ui/src/lib/types/guards.js";
-import { logger as C } from "../../../../../../ui/src/lib/logger.js";
-import { useForm as U } from "@tanstack/react-form";
+import { logger as w } from "../../../../../../ui/src/lib/logger.js";
+import { useForm as I } from "@tanstack/react-form";
 import { useRef as p } from "react";
-import { LoaderProvider as k, useLoaderContext as W } from "../../context/LoaderContext.js";
-import { FormProvider as j } from "../../hooks/useFormContext.js";
-import { buildDefaultValues as v } from "../../utils/formDataBuilder.js";
-import { resetFormDirtyStateAfterApiPopulation as z } from "../../utils/formDirtyStateSync.js";
-import G from "../FormFooter.js";
-import H from "../FormHeader.js";
-import K from "../FormSection/FormSection.js";
-import { ProgressLoaderRuntime as Q } from "../ProgressLoaderRuntime.js";
-import { useFormMachine as X } from "../../../state-management/machines/useFormMachine.js";
-import { EnhancedActionExecutor as q } from "../../../api-integration/components/EnhancedActionExecutor/EnhancedActionExecutor.js";
-import { ValidationEngine as B } from "../../../validation-system/validation/ValidationEngine.js";
-const J = ({
-  currentStep: r,
+import { LoaderProvider as M, useLoaderContext as C } from "../../context/LoaderContext.js";
+import { FormProvider as U } from "../../hooks/useFormContext.js";
+import { buildDefaultValues as k } from "../../utils/formDataBuilder.js";
+import { resetFormDirtyStateAfterApiPopulation as W } from "../../utils/formDirtyStateSync.js";
+import j from "../FormFooter.js";
+import z from "../FormHeader.js";
+import G from "../FormSection/FormSection.js";
+import { ProgressLoaderRuntime as H } from "../ProgressLoaderRuntime.js";
+import { useFormMachine as K } from "../../../state-management/machines/useFormMachine.js";
+import { EnhancedActionExecutor as Q } from "../../../api-integration/components/EnhancedActionExecutor/EnhancedActionExecutor.js";
+import { ValidationEngine as X } from "../../../validation-system/validation/ValidationEngine.js";
+const q = ({
+  currentStep: n,
   hasStepLoader: s,
-  loaderConfig: o
+  loaderConfig: t
 }) => {
-  const { isLoadingComplete: e } = W(), u = l(r) ? [] : r.sections || [];
-  return /* @__PURE__ */ h("div", { className: S.stepContent, children: [
-    s && /* @__PURE__ */ n("div", { className: S.loaderWrapper, children: /* @__PURE__ */ n(
-      Q,
+  const { isLoadingComplete: o } = C(), l = n.sections || [];
+  return /* @__PURE__ */ f("div", { className: g.stepContent, children: [
+    s && /* @__PURE__ */ r("div", { className: g.loaderWrapper, children: /* @__PURE__ */ r(
+      H,
       {
         properties: {
-          label: o?.label,
-          showPercentage: o?.showPercentage ?? !0,
-          duration: o?.duration ?? 3,
-          size: o?.size ?? "md",
-          variant: o?.variant ?? "default",
-          animationSpeed: o?.animationSpeed ?? "normal",
+          label: t?.label,
+          showPercentage: t?.showPercentage ?? !0,
+          duration: t?.duration ?? 3,
+          size: t?.size ?? "md",
+          variant: t?.variant ?? "default",
+          animationSpeed: t?.animationSpeed ?? "normal",
           autoStart: !0,
           hideOnComplete: !0,
-          onComplete: o?.completionMessage ? {
+          onComplete: t?.completionMessage ? {
             showMessage: {
               enabled: !0,
-              text: o.completionMessage,
+              text: t.completionMessage,
               type: "success"
             }
           } : void 0
         }
       }
     ) }),
-    (!s || e) && /* @__PURE__ */ n(M, { children: u.map((i) => /* @__PURE__ */ n(K, { section: i }, i.id)) })
+    (!s || o) && /* @__PURE__ */ r(_, { children: l.map((c) => /* @__PURE__ */ r(G, { section: c }, c.id)) })
   ] });
-}, Y = () => {
-  const [r, s, o] = X(), { currentStep: e, config: u } = o, i = p(), d = p(), F = p(), T = u.validationMessageStyle || "withLabel";
-  i.current || (i.current = new B({ messageStyle: T })), (!d.current || F.current !== e.id) && (l(e) ? d.current = i.current.getStepSchema({
-    ...e,
-    sections: []
-  }) : d.current = i.current.getStepSchema(e), F.current = e.id);
-  const b = { ...l(e) ? v({
-    ...e,
-    sections: []
-  }) : v(e), ...o.data }, y = (t) => {
-    (e.actions || []).length > 0 && s({ type: "EXECUTE_ACTIONS", trigger: t });
-  }, x = p(), f = p(!1);
-  e.id !== x.current && (e.actions || []).length > 0 && !f.current && (x.current = e.id, f.current = !0, setTimeout(() => {
-    y("onStepLoad"), setTimeout(() => {
-      f.current = !1;
+}, B = () => {
+  const [n, s, t] = K(), { currentStep: o, config: l } = t, c = p(), h = p(), S = p(), A = l.validationMessageStyle || "withLabel";
+  c.current || (c.current = new X({ messageStyle: A })), (!h.current || S.current !== o.id) && (h.current = c.current.getStepSchema(o), S.current = o.id);
+  const E = { ...k(o), ...t.data }, v = (e) => {
+    (o.actions || []).length > 0 && s({ type: "EXECUTE_ACTIONS", trigger: e });
+  }, F = p(), u = p(!1);
+  o.id !== F.current && (o.actions || []).length > 0 && !u.current && (F.current = o.id, u.current = !0, setTimeout(() => {
+    v("onStepLoad"), setTimeout(() => {
+      u.current = !1;
     }, 1e3);
   }, 0));
-  const L = async ({
-    value: t
+  const b = async ({
+    value: e
   }) => {
-    (e.actions || []).some(
-      (g) => g.trigger === "onStepFinish"
-    ) ? s({ type: "REQUEST_NAVIGATION", navigationType: "next" }) : o.nextStep();
-  }, N = (t) => {
-  }, D = (t) => {
-    C.error("Action execution failed", { error: t.message }, t);
-  }, O = (t) => {
-    s({ type: "SHOW_ACTION_DIALOG", dialogConfig: t });
-  }, V = (t) => {
-    switch (t.type) {
+    (o.actions || []).some(
+      (d) => d.trigger === "onStepFinish"
+    ) ? s({ type: "REQUEST_NAVIGATION", navigationType: "next" }) : t.nextStep();
+  }, y = (e) => {
+  }, T = (e) => {
+    w.error("Action execution failed", { error: e.message }, e);
+  }, L = (e) => {
+    s({ type: "SHOW_ACTION_DIALOG", dialogConfig: e });
+  }, N = (e) => {
+    switch (e.type) {
       case "next":
-        o.nextStep();
+        t.nextStep();
         break;
       case "previous":
-        o.previousStep();
+        t.previousStep();
         break;
       case "step":
-        t.targetStep && o.goToStep(t.targetStep);
+        e.targetStep && t.goToStep(e.targetStep);
         break;
     }
-  }, m = U({
-    defaultValues: b,
-    onSubmit: L
-  }), P = (t, a) => {
-    const c = t, g = m.getFieldValue(c), _ = r.context.componentOriginalValues[c]?.value;
-    if (g !== a) {
-      const w = a;
-      o.setData(c, w), m.setFieldValue(c, a);
+  }, m = I({
+    defaultValues: E,
+    onSubmit: b
+  }), D = (e, i) => {
+    const a = e, d = m.getFieldValue(a), V = n.context.componentOriginalValues[a]?.value;
+    if (d !== i) {
+      const P = i;
+      t.setData(a, P), m.setFieldValue(a, i);
       try {
-        z(m, {
-          updatedFields: [c],
+        W(m, {
+          updatedFields: [a],
           debug: process.env.NODE_ENV === "development"
         });
-      } catch (I) {
-        console.error("❌ Failed to reset dirty state:", I);
+      } catch (R) {
+        console.error("❌ Failed to reset dirty state:", R);
       }
     }
-    _ !== a && setTimeout(() => {
+    V !== i && setTimeout(() => {
       s({
         type: "MARK_COMPONENT_AS_POPULATED",
-        componentId: c,
-        value: a
+        componentId: a,
+        value: i
       });
     }, 0);
-  }, A = e, E = !l(e) && A.waitForLoader === !0, R = E ? A.loaderConfig : void 0;
-  return /* @__PURE__ */ h(j, { value: m, children: [
-    r.matches("executingActions") && (r.context.executingTrigger === "onStepLoad" || r.context.executingTrigger === "onStepFinish") && /* @__PURE__ */ n(
-      q,
+  }, x = o.waitForLoader === !0, O = x ? o.loaderConfig : void 0;
+  return /* @__PURE__ */ f(U, { value: m, children: [
+    n.matches("executingActions") && (n.context.executingTrigger === "onStepLoad" || n.context.executingTrigger === "onStepFinish") && /* @__PURE__ */ r(
+      Q,
       {
-        actions: e.actions || [],
-        trigger: r.context.executingTrigger || "onStepLoad",
-        formData: r.context.data,
-        onComplete: N,
-        onError: D,
-        onFieldUpdate: P,
-        onShowDialog: O,
-        onNavigate: V,
+        actions: o.actions || [],
+        trigger: n.context.executingTrigger || "onStepLoad",
+        formData: n.context.data,
+        onComplete: y,
+        onError: T,
+        onFieldUpdate: D,
+        onShowDialog: L,
+        onNavigate: N,
         machineRef: {
           send: s
         }
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ f(
       "form",
       {
-        onSubmit: (t) => {
-          t.preventDefault(), t.stopPropagation(), m.handleSubmit();
+        onSubmit: (e) => {
+          e.preventDefault(), e.stopPropagation(), m.handleSubmit();
         },
         children: [
-          /* @__PURE__ */ n(H, {}),
-          /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(
-            J,
+          /* @__PURE__ */ r(z, {}),
+          /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(
+            q,
             {
-              currentStep: e,
-              hasStepLoader: E,
-              loaderConfig: R
+              currentStep: o,
+              hasStepLoader: x,
+              loaderConfig: O
             }
           ) }),
-          /* @__PURE__ */ n(G, { className: S.footer })
+          /* @__PURE__ */ r(j, { className: g.footer })
         ]
       }
     )
   ] });
 };
-Y.displayName = "FormStep";
+B.displayName = "FormStep";
 export {
-  Y as default
+  B as default
 };

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

@@ -31,7 +31,7 @@ const vt = ({
   ), D = g(() => i.steps, [i.steps]), L = E === 0, P = E === i.steps.length - 1, T = o(
     (t) => {
       for (const e of i.steps) {
-        const r = "sections" in e ? e.sections : [];
+        const r = e.sections || [];
         for (const l of r || []) {
           const a = l.components?.find(
             (c) => c.id === t
@@ -85,7 +85,7 @@ const vt = ({
     (t) => {
       let e = !0;
       for (const r of i.steps) {
-        const a = ("sections" in r ? r.sections : [])?.find(
+        const a = (r.sections || []).find(
           (c) => c.id === t
         );
         if (a) {
@@ -100,7 +100,7 @@ const vt = ({
   ), W = o(
     async (t) => {
       const e = i.steps.find((a) => a.id === t);
-      if (!e || !("sections" in e)) return !0;
+      if (!e) return !0;
       const r = await d.validateStep(e, u);
       for (const [a, c] of Object.entries(
         r.fieldErrors

package/wizard/src/features/validation-system/validation/ValidationExecutor.js

@@ -1,7 +1,5 @@
 "use client";
-/* empty css                               */
-import { isTemplateStep as c } from "../../../../../ui/src/lib/types/guards.js";
-class u {
+class d {
   schemaBuilder;
   constructor(s) {
     this.schemaBuilder = s;
@@ -9,19 +7,19 @@ class u {
   /**
    * Validates a single field
    */
-  async validateField(s, i) {
+  async validateField(s, o) {
     try {
-      const e = await i.parseAsync(s);
+      const r = await o.parseAsync(s);
       return {
         isValid: !0,
         errors: [],
-        value: e
+        value: r
       };
-    } catch (e) {
-      let r = [];
-      return e && typeof e == "object" && "errors" in e ? r = e.errors.map((a) => a.message) : r = ["Validation failed"], {
+    } catch (r) {
+      let e = [];
+      return r && typeof r == "object" && "errors" in r ? e = r.errors.map((i) => i.message) : e = ["Validation failed"], {
         isValid: !1,
-        errors: r,
+        errors: e,
         value: s
       };
     }
@@ -29,51 +27,51 @@ class u {
   /**
    * Validates a single field synchronously
    */
-  validateFieldSync(s, i) {
-    let e = s;
-    s == null && (e = "");
+  validateFieldSync(s, o) {
+    let r = s;
+    s == null && (r = "");
     try {
-      const r = i.parse(e);
+      const e = o.parse(r);
       return {
         isValid: !0,
         errors: [],
-        value: r
+        value: e
       };
-    } catch (r) {
+    } catch (e) {
       let t = [];
-      return r && typeof r == "object" && "errors" in r ? t = r.errors.map((o) => o.message) : t = ["Validation failed"], {
+      return e && typeof e == "object" && "errors" in e ? t = e.errors.map((a) => a.message) : t = ["Validation failed"], {
         isValid: !1,
         errors: t,
-        value: e
+        value: r
       };
     }
   }
   /**
    * Validates a step
    */
-  async validateStep(s, i) {
+  async validateStep(s, o) {
     try {
-      return await i.parseAsync(s), {
+      return await o.parseAsync(s), {
         isValid: !0,
         fieldErrors: {},
         generalErrors: []
       };
-    } catch (e) {
-      const r = {};
+    } catch (r) {
+      const e = {};
       let t = [];
-      if (e && typeof e == "object" && "errors" in e) {
-        const a = e;
-        for (const o of a.errors)
-          if (o.path.length > 0) {
-            const l = o.path[0].toString();
-            r[l] || (r[l] = []), r[l].push(o.message);
+      if (r && typeof r == "object" && "errors" in r) {
+        const i = r;
+        for (const a of i.errors)
+          if (a.path.length > 0) {
+            const l = a.path[0].toString();
+            e[l] || (e[l] = []), e[l].push(a.message);
           } else
-            t.push(o.message);
+            t.push(a.message);
       } else
         t = ["Step validation failed"];
       return {
         isValid: !1,
-        fieldErrors: r,
+        fieldErrors: e,
         generalErrors: t
       };
     }
@@ -81,26 +79,20 @@ class u {
   /**
    * Validates a form
    */
-  async validateForm(s, i) {
-    const e = {}, r = [];
+  async validateForm(s, o) {
+    const r = {}, e = [];
     let t = !0;
-    for (const a of s.steps) {
-      if (c(a)) {
-        r.push(
-          `Template step '${a.id}' needs to be resolved before validation`
-        ), t = !1;
-        continue;
-      }
-      const o = a, l = this.schemaBuilder.createStepSchema(o), n = await this.validateStep(i, l);
-      n.isValid || (t = !1, Object.assign(e, n.fieldErrors), r.push(...n.generalErrors));
+    for (const i of s.steps) {
+      const a = i, l = this.schemaBuilder.createStepSchema(a), n = await this.validateStep(o, l);
+      n.isValid || (t = !1, Object.assign(r, n.fieldErrors), e.push(...n.generalErrors));
     }
     return {
       isValid: t,
-      fieldErrors: e,
-      generalErrors: r
+      fieldErrors: r,
+      generalErrors: e
     };
   }
 }
 export {
-  u as ValidationExecutor
+  d as ValidationExecutor
 };

package/core/src/types/guards.js

@@ -1,7 +0,0 @@
-"use client";
-function t(e) {
-  return typeof e == "object" && e !== null && "templateId" in e;
-}
-export {
-  t as isTemplateStep
-};

package/features/form-runtime/config/configResolver.d.ts

@@ -1,14 +0,0 @@
-import { FormWizardConfig } from '../../../../../core/src/index.ts';
-/**
- * Resolves a form wizard configuration, expanding any template step references
- * to their full step configurations
- */
-export declare function resolveFormWizardConfig(config: FormWizardConfig): Promise<FormWizardConfig>;
-/**
- * Checks if a configuration contains template step references
- */
-export declare function hasTemplateSteps(config: FormWizardConfig): boolean;
-/**
- * Gets template IDs used in a configuration
- */
-export declare function getUsedTemplateIds(config: FormWizardConfig): string[];

package/features/form-runtime/config/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * Form Runtime Configuration
- *
- * Configuration resolvers and template utilities
- */
-export * from './configResolver';
-export * from './templateConfig';
-export * from './templateLoader';
-export { getAvailableGenericTemplatesSync, getTemplateInfo, validateTemplateReferences, } from './templateUtils';

package/features/form-runtime/config/templateConfig.d.ts

@@ -1,148 +0,0 @@
-import { FormStepConfig, TemplateStepConfig } from '../../../../../core/src/index.ts';
-export type TemplateType = "generic" | "team" | null;
-/**
- * Template permissions configuration
- */
-export interface TemplatePermissions {
-    /** Can add new components to sections */
-    canAddComponents: boolean;
-    /** Can remove existing components */
-    canRemoveComponents: boolean;
-    /** Can edit component properties */
-    canEditComponentProperties: boolean;
-    /** Can add new sections */
-    canAddSections: boolean;
-    /** Can remove existing sections */
-    canRemoveSections: boolean;
-    /** Can edit section properties */
-    canEditSectionProperties: boolean;
-    /** Can edit step title */
-    canEditStepTitle: boolean;
-    /** Can edit navigation settings */
-    canEditNavigation: boolean;
-    /** Can add/edit actions */
-    canEditActions: boolean;
-    /** Can duplicate the step */
-    canDuplicate: boolean;
-    /** Can delete the step */
-    canDelete: boolean;
-}
-/**
- * Template display configuration
- */
-export interface TemplateDisplayConfig {
-    /** Template type for UI display */
-    type: TemplateType;
-    /** Whether template is readonly */
-    isReadonly: boolean;
-    /** Whether to show lock icon */
-    showLockIcon: boolean;
-    /** CSS classes for theme styling */
-    themeClass: string;
-    /** Icon color classes */
-    iconColor: string;
-    /** Tooltip text for locked templates */
-    lockTooltip?: string;
-    /** Badge text for template type */
-    badgeText?: string;
-}
-/**
- * Complete template configuration
- */
-export interface TemplateConfig {
-    permissions: TemplatePermissions;
-    display: TemplateDisplayConfig;
-    rules: {
-        /** Message shown when user tries to edit locked content */
-        lockMessage: string;
-        /** Whether this template type supports multiple steps */
-        supportsMultipleSteps: boolean;
-        /** Default navigation behavior */
-        defaultNavigation: {
-            next: {
-                label: string;
-                enabled: boolean;
-            };
-            previous: {
-                label: string;
-                enabled: boolean;
-            };
-        };
-    };
-}
-/**
- * Gets the complete template configuration for a given template ID or step
- */
-export declare function getTemplateConfig(templateIdOrStep: string | FormStepConfig | TemplateStepConfig): TemplateConfig;
-/**
- * Gets template permissions for a given template ID or step
- */
-export declare function getTemplatePermissions(templateIdOrStep: string | FormStepConfig | TemplateStepConfig): TemplatePermissions;
-/**
- * Gets template display configuration for a given template ID or step
- */
-export declare function getTemplateDisplayConfig(templateIdOrStep: string | FormStepConfig | TemplateStepConfig): TemplateDisplayConfig;
-/**
- * Checks if a specific action is allowed for a template or step
- */
-export declare function isActionAllowed(templateIdOrStep: string | FormStepConfig | TemplateStepConfig, action: keyof TemplatePermissions): boolean;
-/**
- * Checks if a step is locked for editing
- */
-export declare function isStepLocked(step: FormStepConfig | TemplateStepConfig, templateOrigin?: {
-    templateId: string;
-    stepIndex?: number;
-}): boolean;
-/**
- * Gets the lock message for a template
- */
-export declare function getLockMessage(templateIdOrStep: string | FormStepConfig | TemplateStepConfig): string;
-/**
- * Validates if a template action should be blocked and returns appropriate message
- */
-export declare function validateTemplateAction(templateIdOrStep: string | FormStepConfig | TemplateStepConfig, action: keyof TemplatePermissions): {
-    allowed: boolean;
-    message?: string;
-};
-/**
- * Gets template type from various input formats
- */
-export declare function getTemplateTypeFromInput(input: string | FormStepConfig | TemplateStepConfig): TemplateType;
-/**
- * Utility to check if input represents a generic template
- */
-export declare function isGenericTemplateInput(input: string | FormStepConfig | TemplateStepConfig): boolean;
-/**
- * Utility to check if input represents a team template
- */
-export declare function isTeamTemplateInput(input: string | FormStepConfig | TemplateStepConfig): boolean;
-/**
- * Creates a comprehensive template info object for UI components
- */
-export declare function getTemplateInfo(templateIdOrStep: string | FormStepConfig | TemplateStepConfig): {
-    type: TemplateType;
-    permissions: TemplatePermissions;
-    display: TemplateDisplayConfig;
-    rules: {
-        /** Message shown when user tries to edit locked content */
-        lockMessage: string;
-        /** Whether this template type supports multiple steps */
-        supportsMultipleSteps: boolean;
-        /** Default navigation behavior */
-        defaultNavigation: {
-            next: {
-                label: string;
-                enabled: boolean;
-            };
-            previous: {
-                label: string;
-                enabled: boolean;
-            };
-        };
-    };
-    isLocked: boolean;
-    canEdit: boolean;
-    isGeneric: boolean;
-    isTeam: boolean;
-    isRegularStep: boolean;
-};

package/features/form-runtime/config/templateLoader.d.ts

@@ -1,25 +0,0 @@
-import { FormStepConfig, FormTemplate, StepNavigation, TemplateStepConfig } from '../../../../../core/src/index.ts';
-/**
- * Loads a template by ID, handling both generic and team templates
- */
-export declare function loadTemplate(templateId: string): Promise<FormTemplate>;
-/**
- * Resolves a template step reference to a full FormStepConfig
- */
-export declare function resolveTemplateStep(templateStep: TemplateStepConfig, defaultNavigation?: StepNavigation, stepIndex?: number): Promise<FormStepConfig>;
-/**
- * Gets template metadata without loading the full template
- */
-export declare function getTemplateMetadata(templateId: string): Promise<import('../../../../../core/src/index.ts').TemplateMetadata>;
-/**
- * Lists available templates from both generic and team sources
- */
-export declare function getAvailableTemplates(): Promise<string[]>;
-/**
- * Lists available generic templates only (for backward compatibility)
- */
-export declare function getAvailableGenericTemplates(): string[];
-/**
- * Clears the template cache (useful for development/testing)
- */
-export declare function clearTemplateCache(): void;

package/features/form-runtime/config/templateUtils.d.ts

@@ -1,12 +0,0 @@
-/**
- * Loader-specific template functions for form-wizard-component
- *
- * This file only contains functions that depend on the local templateLoader.
- * All other template utilities should be imported directly from @libs/shared/utils
- */
-export declare const getAvailableGenericTemplatesSync: () => string[];
-export declare const getTemplateInfo: (templateId: string) => Promise<any>;
-export declare const validateTemplateReferences: (config: import('../../../../../core/src/index.ts').FormWizardConfig) => Promise<{
-    isValid: boolean;
-    errors: string[];
-}>;

package/ui/src/lib/utils/templateUtils.js

@@ -1,20 +0,0 @@
-"use client";
-const t = {
-  GENERIC: "generic-",
-  TEAM: "team-"
-};
-function n(e) {
-  return e.startsWith(t.GENERIC) ? "generic" : e.startsWith(t.TEAM) ? "team" : null;
-}
-function r(e) {
-  return n(e) === "generic";
-}
-function i(e) {
-  return n(e) === "team";
-}
-export {
-  t as TEMPLATE_PREFIXES,
-  n as getTemplateTypeFromId,
-  r as isGenericTemplate,
-  i as isTeamTemplate
-};

package/wizard/src/features/form-runtime/config/configResolver.js

@@ -1,34 +0,0 @@
-"use client";
-import { resolveTemplateStep as i } from "./templateLoader.js";
-import { isTemplateStep as n } from "../../../../../core/src/types/guards.js";
-async function m(e) {
-  const s = {
-    next: { label: "Next", enabled: !0 },
-    previous: { label: "Previous", enabled: !0 }
-  }, l = await Promise.all(
-    e.steps.map(async (t, r) => {
-      if (n(t)) {
-        const a = { ...s };
-        r === 0 && (a.previous.enabled = !1), r === e.steps.length - 1 && (a.next.label = "Submit");
-        const o = t.stepIndex;
-        return await i(
-          t,
-          a,
-          o
-        );
-      }
-      return t;
-    })
-  );
-  return {
-    ...e,
-    steps: l
-  };
-}
-function f(e) {
-  return e.steps.some((s) => n(s));
-}
-export {
-  f as hasTemplateSteps,
-  m as resolveFormWizardConfig
-};

package/wizard/src/features/form-runtime/config/templateLoader.js

@@ -1,228 +0,0 @@
-"use client";
-/* empty css                               */
-import { isGenericTemplate as v, isTeamTemplate as h } from "../../../../../ui/src/lib/utils/templateUtils.js";
-async function g() {
-  try {
-    const { templateStorageService: e } = await import("@formbuilder/builder");
-    return e;
-  } catch (e) {
-    return console.warn("Template storage service not available:", e), null;
-  }
-}
-async function y() {
-  try {
-    const e = await g();
-    if (!e) return;
-    if (!e.isReady()) {
-      const a = await fetch("/form.config.json");
-      if (a.ok) {
-        const r = (await a.json()).storage?.paths?.templates;
-        r && await e.initialize(r);
-      }
-    }
-  } catch (e) {
-    console.warn("Failed to initialize template storage service:", e);
-  }
-}
-function d(e) {
-  return {
-    metadata: e.metadata,
-    stepsData: e.stepsData || [],
-    // Default to empty array if no steps
-    preview: {
-      componentCount: e.preview?.componentCount || 0,
-      sectionCount: e.preview?.sectionCount || 0
-    },
-    governance: e.governance || {
-      approved: !1,
-      complianceTags: [],
-      deprecated: !1
-    }
-  };
-}
-const f = /* @__PURE__ */ new Map(), l = {
-  "generic-contact-information": async () => {
-    const e = await fetch(
-      "/src/packages/form-wizard/admin/templates/generic/contact-information.json"
-    );
-    if (!e.ok)
-      throw new Error(
-        `Failed to fetch generic-contact-information template: ${e.status}`
-      );
-    return e.json();
-  },
-  "generic-consent-agreement": async () => {
-    const e = await fetch(
-      "/src/packages/form-wizard/admin/templates/generic/consent-agreement.json"
-    );
-    if (!e.ok)
-      throw new Error(
-        `Failed to fetch generic-consent-agreement template: ${e.status}`
-      );
-    return e.json();
-  },
-  "generic-feedback-form": async () => {
-    const e = await fetch(
-      "/src/packages/form-wizard/admin/templates/generic/feedback-form.json"
-    );
-    if (!e.ok)
-      throw new Error(
-        `Failed to fetch generic-feedback-form template: ${e.status}`
-      );
-    return e.json();
-  },
-  "generic-incident-registration": async () => {
-    const e = await fetch(
-      "/src/packages/form-wizard/admin/templates/generic/incident-registration.json"
-    );
-    if (!e.ok)
-      throw new Error(
-        `Failed to fetch generic-incident-registration template: ${e.status}`
-      );
-    return e.json();
-  }
-};
-async function b(e) {
-  if (f.has(e))
-    return f.get(e);
-  try {
-    let a;
-    if (v(e)) {
-      const i = l[e];
-      if (!i) {
-        const s = Object.keys(l);
-        throw new Error(
-          `Generic template '${e}' not found. Available generic templates: ${s.join(", ")}`
-        );
-      }
-      const r = await i();
-      a = d(
-        r
-      );
-    } else if (h(e)) {
-      await y();
-      const i = await g();
-      if (!i)
-        throw new Error(
-          `Team template '${e}' could not be loaded: template storage service is not available`
-        );
-      const r = await i.loadTemplate(
-        e,
-        "team"
-      );
-      if (!r.success)
-        throw new Error(
-          `Team template '${e}' not found: ${"error" in r && r.error?.message || "Unknown error"}`
-        );
-      a = d(r.data);
-    } else {
-      const i = l[e];
-      if (i) {
-        const r = await i();
-        a = d(
-          r
-        );
-      } else {
-        const r = Object.keys(l);
-        throw new Error(
-          `Template '${e}' not found. Available generic templates: ${r.join(", ")}`
-        );
-      }
-    }
-    if (!a.metadata || !Array.isArray(a.stepsData))
-      throw new Error(
-        `Invalid template structure for template: ${e}. Templates must have metadata and stepsData array.`
-      );
-    return f.set(e, a), a;
-  } catch (a) {
-    throw new Error(
-      `Failed to load template '${e}': ${a instanceof Error ? a.message : "Unknown error"}`
-    );
-  }
-}
-async function E(e, a, i) {
-  const r = await b(e.templateId);
-  let s;
-  if (r.stepsData && Array.isArray(r.stepsData) && r.stepsData.length > 0)
-    i !== void 0 && i >= 0 && i < r.stepsData.length ? s = r.stepsData[i] : (s = r.stepsData[0], console.warn(
-      `Invalid stepIndex ${i} for template, using first step`
-    ));
-  else
-    throw new Error(`Template ${e.templateId} has no steps data`);
-  const u = s.sections?.map((w) => ({
-    ...w,
-    components: w.components.map((t) => {
-      const m = ((c) => `comp-${e.id}-${t.id || c}`)(t.id), o = {
-        id: m,
-        type: t.type,
-        properties: {
-          // Use properties from component.properties if it exists, otherwise fallback to root level
-          label: t.properties?.label || t.label || "",
-          placeholder: t.properties?.placeholder || t.placeholder || "",
-          description: t.properties?.description || t.description || "",
-          required: t.properties?.required || t.required || !1,
-          disabled: t.properties?.disabled || t.disabled || !1,
-          readOnly: t.properties?.readOnly || t.readOnly || !1,
-          invalid: t.properties?.invalid || !1,
-          // Add type-specific properties
-          type: t.properties?.type || t.type,
-          // Copy all other properties from component.properties if it exists
-          ...t.properties && Object.keys(t.properties).reduce(
-            (c, p) => ([
-              "label",
-              "placeholder",
-              "description",
-              "required",
-              "disabled",
-              "readOnly",
-              "invalid",
-              "type"
-            ].includes(p) || (c[p] = t.properties[p]), c),
-            {}
-          )
-        },
-        // Copy validation if it exists
-        ...t.validation && { validation: t.validation }
-      }, n = e.componentOverrides?.[m];
-      return n ? {
-        ...o,
-        ...n,
-        // Merge properties deeply to allow partial property updates
-        properties: {
-          ...o.properties,
-          ...n.properties
-        },
-        // Merge validation deeply if both exist
-        ...o.validation && n.validation && {
-          validation: {
-            ...o.validation,
-            ...n.validation
-          }
-        }
-      } : o;
-    })
-  }));
-  return {
-    id: e.id,
-    // Use the step ID from the form config
-    title: e.title || s.title,
-    displayTitle: s.displayTitle,
-    showStepNumber: e.showStepNumber !== void 0 ? e.showStepNumber : s.showStepNumber,
-    sections: u,
-    navigation: {
-      // Use default navigation, then template navigation if available, then step override
-      ...a,
-      ...s.navigation,
-      // Cast since navigation might not exist in Omit type
-      ...e.navigation
-    },
-    // Copy actions if they exist
-    ...s.actions && {
-      actions: s.actions
-    }
-  };
-}
-export {
-  b as loadTemplate,
-  E as resolveTemplateStep
-};