@waypointjs/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mauconduit Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var react = require('react');
+var zustand = require('zustand');
+var core = require('@waypointjs/core');
+
+// src/useWaypoint.ts
+function useWaypoint(store) {
+  const { schema, data, externalVars, currentStepId, isSubmitting } = zustand.useStore(
+    store,
+    (s) => ({
+      schema: s.schema,
+      data: s.data,
+      externalVars: s.externalVars,
+      currentStepId: s.currentStepId,
+      isSubmitting: s.isSubmitting
+    })
+  );
+  const tree = react.useMemo(
+    () => schema ? core.resolveTree(schema, data, externalVars) : { steps: [], hiddenSteps: [], missingExternalVars: [] },
+    [schema, data, externalVars]
+  );
+  const currentStep = react.useMemo(
+    () => currentStepId ? tree.steps.find((s) => s.definition.id === currentStepId) : void 0,
+    [tree.steps, currentStepId]
+  );
+  const nextStep = react.useMemo(
+    () => currentStepId ? core.getNextStep(tree.steps, currentStepId) : void 0,
+    [tree.steps, currentStepId]
+  );
+  const previousStep = react.useMemo(
+    () => currentStepId ? core.getPreviousStep(tree.steps, currentStepId) : void 0,
+    [tree.steps, currentStepId]
+  );
+  const progress = react.useMemo(
+    () => currentStepId ? core.calculateProgress(tree.steps, currentStepId) : 0,
+    [tree.steps, currentStepId]
+  );
+  return {
+    schema,
+    data,
+    externalVars,
+    currentStepId,
+    currentStep,
+    nextStep,
+    previousStep,
+    tree,
+    progress,
+    isFirstStep: !previousStep,
+    isLastStep: !nextStep,
+    isSubmitting,
+    missingExternalVars: tree.missingExternalVars,
+    setFieldValue: (stepId, fieldId, value) => store.getState().setFieldValue(stepId, fieldId, value),
+    setStepData: (stepId, data2) => store.getState().setStepData(stepId, data2),
+    setExternalVar: (varId, value) => store.getState().setExternalVar(varId, value),
+    setCurrentStep: (stepId) => store.getState().setCurrentStep(stepId),
+    reset: () => store.getState().reset()
+  };
+}
+function useWaypointStep(store, stepId) {
+  const { schema, data, externalVars } = zustand.useStore(store, (s) => ({
+    schema: s.schema,
+    data: s.data,
+    externalVars: s.externalVars
+  }));
+  const tree = react.useMemo(
+    () => schema ? core.resolveTree(schema, data, externalVars) : { steps: [], hiddenSteps: [], missingExternalVars: [] },
+    [schema, data, externalVars]
+  );
+  const step = react.useMemo(
+    () => tree.steps.find((s) => s.definition.id === stepId),
+    [tree.steps, stepId]
+  );
+  const visibleFields = react.useMemo(
+    () => step?.fields.filter((f) => f.visible) ?? [],
+    [step]
+  );
+  return {
+    step,
+    fields: visibleFields,
+    stepData: data[stepId] ?? {},
+    setFieldValue: (fieldId, value) => store.getState().setFieldValue(stepId, fieldId, value),
+    setStepData: (d) => store.getState().setStepData(stepId, d)
+  };
+}
+
+exports.useWaypoint = useWaypoint;
+exports.useWaypointStep = useWaypointStep;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useWaypoint.ts","../src/useWaypointStep.ts"],"names":["useStore","useMemo","resolveTree","getNextStep","getPreviousStep","calculateProgress","data"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useMemo } from \"react\";\nimport { useStore } from \"zustand\";\nimport type { StoreApi } from \"zustand\";\n\nimport {\n  resolveTree,\n  calculateProgress,\n  getNextStep,\n  getPreviousStep,\n} from \"@waypointjs/core\";\nimport type { WaypointRuntimeStore } from \"@waypointjs/core\";\nimport type { ResolvedStep, ResolvedTree } from \"@waypointjs/core\";\n\n// ---------------------------------------------------------------------------\n// Return type\n// ---------------------------------------------------------------------------\n\nexport interface WaypointState {\n  schema: WaypointRuntimeStore[\"schema\"];\n  data: WaypointRuntimeStore[\"data\"];\n  externalVars: WaypointRuntimeStore[\"externalVars\"];\n  currentStepId: string | null;\n  currentStep: ResolvedStep | undefined;\n  nextStep: ResolvedStep | undefined;\n  previousStep: ResolvedStep | undefined;\n  tree: ResolvedTree;\n  progress: number;\n  isFirstStep: boolean;\n  isLastStep: boolean;\n  isSubmitting: boolean;\n  missingExternalVars: string[];\n  // Store actions\n  setFieldValue(stepId: string, fieldId: string, value: unknown): void;\n  setStepData(stepId: string, data: Record<string, unknown>): void;\n  setExternalVar(varId: string, value: unknown): void;\n  setCurrentStep(stepId: string): void;\n  reset(): void;\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Headless hook for accessing and mutating the Waypoint runtime store.\n *\n * Router-agnostic — use `@waypointjs/next`'s `useWaypointStep()` for full\n * Next.js integration with form handling and automatic navigation.\n *\n * @example\n * const { currentStep, progress, setFieldValue } = useWaypoint(store);\n */\nexport function useWaypoint(store: StoreApi<WaypointRuntimeStore>): WaypointState {\n  const { schema, data, externalVars, currentStepId, isSubmitting } = useStore(\n    store,\n    (s: WaypointRuntimeStore) => ({\n      schema: s.schema,\n      data: s.data,\n      externalVars: s.externalVars,\n      currentStepId: s.currentStepId,\n      isSubmitting: s.isSubmitting,\n    })\n  );\n\n  const tree = useMemo(\n    () =>\n      schema\n        ? resolveTree(schema, data, externalVars)\n        : { steps: [], hiddenSteps: [], missingExternalVars: [] },\n    [schema, data, externalVars]\n  );\n\n  const currentStep = useMemo(\n    () =>\n      currentStepId\n        ? tree.steps.find((s) => s.definition.id === currentStepId)\n        : undefined,\n    [tree.steps, currentStepId]\n  );\n\n  const nextStep = useMemo(\n    () =>\n      currentStepId ? getNextStep(tree.steps, currentStepId) : undefined,\n    [tree.steps, currentStepId]\n  );\n\n  const previousStep = useMemo(\n    () =>\n      currentStepId ? getPreviousStep(tree.steps, currentStepId) : undefined,\n    [tree.steps, currentStepId]\n  );\n\n  const progress = useMemo(\n    () =>\n      currentStepId ? calculateProgress(tree.steps, currentStepId) : 0,\n    [tree.steps, currentStepId]\n  );\n\n  return {\n    schema,\n    data,\n    externalVars,\n    currentStepId,\n    currentStep,\n    nextStep,\n    previousStep,\n    tree,\n    progress,\n    isFirstStep: !previousStep,\n    isLastStep: !nextStep,\n    isSubmitting,\n    missingExternalVars: tree.missingExternalVars,\n\n    setFieldValue: (stepId, fieldId, value) =>\n      store.getState().setFieldValue(stepId, fieldId, value),\n    setStepData: (stepId, data) =>\n      store.getState().setStepData(stepId, data),\n    setExternalVar: (varId, value) =>\n      store.getState().setExternalVar(varId, value),\n    setCurrentStep: (stepId) => store.getState().setCurrentStep(stepId),\n    reset: () => store.getState().reset(),\n  };\n}\n","import { useMemo } from \"react\";\nimport { useStore } from \"zustand\";\nimport type { StoreApi } from \"zustand\";\n\nimport { resolveTree } from \"@waypointjs/core\";\nimport type { WaypointRuntimeStore } from \"@waypointjs/core\";\nimport type { ResolvedField, ResolvedStep } from \"@waypointjs/core\";\n\n// ---------------------------------------------------------------------------\n// Return type\n// ---------------------------------------------------------------------------\n\nexport interface WaypointHeadlessStep {\n  step: ResolvedStep | undefined;\n  /** Visible fields for this step */\n  fields: ResolvedField[];\n  /** Current persisted data for this step */\n  stepData: Record<string, unknown>;\n  setFieldValue(fieldId: string, value: unknown): void;\n  setStepData(data: Record<string, unknown>): void;\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Headless (router-agnostic) hook that resolves a specific step's fields and data.\n *\n * Use `@waypointjs/next`'s `useWaypointStep()` for full Next.js integration\n * (form, validation, navigation).\n *\n * @param store   - The runtime store instance from your context\n * @param stepId  - The step id to resolve\n */\nexport function useWaypointStep(\n  store: StoreApi<WaypointRuntimeStore>,\n  stepId: string\n): WaypointHeadlessStep {\n  const { schema, data, externalVars } = useStore(store, (s: WaypointRuntimeStore) => ({\n    schema: s.schema,\n    data: s.data,\n    externalVars: s.externalVars,\n  }));\n\n  const tree = useMemo(\n    () =>\n      schema\n        ? resolveTree(schema, data, externalVars)\n        : { steps: [], hiddenSteps: [], missingExternalVars: [] },\n    [schema, data, externalVars]\n  );\n\n  const step = useMemo(\n    () => tree.steps.find((s) => s.definition.id === stepId),\n    [tree.steps, stepId]\n  );\n\n  const visibleFields = useMemo(\n    () => step?.fields.filter((f) => f.visible) ?? [],\n    [step]\n  );\n\n  return {\n    step,\n    fields: visibleFields,\n    stepData: data[stepId] ?? {},\n    setFieldValue: (fieldId, value) =>\n      store.getState().setFieldValue(stepId, fieldId, value),\n    setStepData: (d) => store.getState().setStepData(stepId, d),\n  };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,55 @@
+import { StoreApi } from 'zustand';
+import { WaypointRuntimeStore, ResolvedStep, ResolvedTree, ResolvedField } from '@waypointjs/core';
+
+interface WaypointState {
+    schema: WaypointRuntimeStore["schema"];
+    data: WaypointRuntimeStore["data"];
+    externalVars: WaypointRuntimeStore["externalVars"];
+    currentStepId: string | null;
+    currentStep: ResolvedStep | undefined;
+    nextStep: ResolvedStep | undefined;
+    previousStep: ResolvedStep | undefined;
+    tree: ResolvedTree;
+    progress: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isSubmitting: boolean;
+    missingExternalVars: string[];
+    setFieldValue(stepId: string, fieldId: string, value: unknown): void;
+    setStepData(stepId: string, data: Record<string, unknown>): void;
+    setExternalVar(varId: string, value: unknown): void;
+    setCurrentStep(stepId: string): void;
+    reset(): void;
+}
+/**
+ * Headless hook for accessing and mutating the Waypoint runtime store.
+ *
+ * Router-agnostic — use `@waypointjs/next`'s `useWaypointStep()` for full
+ * Next.js integration with form handling and automatic navigation.
+ *
+ * @example
+ * const { currentStep, progress, setFieldValue } = useWaypoint(store);
+ */
+declare function useWaypoint(store: StoreApi<WaypointRuntimeStore>): WaypointState;
+
+interface WaypointHeadlessStep {
+    step: ResolvedStep | undefined;
+    /** Visible fields for this step */
+    fields: ResolvedField[];
+    /** Current persisted data for this step */
+    stepData: Record<string, unknown>;
+    setFieldValue(fieldId: string, value: unknown): void;
+    setStepData(data: Record<string, unknown>): void;
+}
+/**
+ * Headless (router-agnostic) hook that resolves a specific step's fields and data.
+ *
+ * Use `@waypointjs/next`'s `useWaypointStep()` for full Next.js integration
+ * (form, validation, navigation).
+ *
+ * @param store   - The runtime store instance from your context
+ * @param stepId  - The step id to resolve
+ */
+declare function useWaypointStep(store: StoreApi<WaypointRuntimeStore>, stepId: string): WaypointHeadlessStep;
+
+export { type WaypointHeadlessStep, type WaypointState, useWaypoint, useWaypointStep };

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+import { StoreApi } from 'zustand';
+import { WaypointRuntimeStore, ResolvedStep, ResolvedTree, ResolvedField } from '@waypointjs/core';
+
+interface WaypointState {
+    schema: WaypointRuntimeStore["schema"];
+    data: WaypointRuntimeStore["data"];
+    externalVars: WaypointRuntimeStore["externalVars"];
+    currentStepId: string | null;
+    currentStep: ResolvedStep | undefined;
+    nextStep: ResolvedStep | undefined;
+    previousStep: ResolvedStep | undefined;
+    tree: ResolvedTree;
+    progress: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isSubmitting: boolean;
+    missingExternalVars: string[];
+    setFieldValue(stepId: string, fieldId: string, value: unknown): void;
+    setStepData(stepId: string, data: Record<string, unknown>): void;
+    setExternalVar(varId: string, value: unknown): void;
+    setCurrentStep(stepId: string): void;
+    reset(): void;
+}
+/**
+ * Headless hook for accessing and mutating the Waypoint runtime store.
+ *
+ * Router-agnostic — use `@waypointjs/next`'s `useWaypointStep()` for full
+ * Next.js integration with form handling and automatic navigation.
+ *
+ * @example
+ * const { currentStep, progress, setFieldValue } = useWaypoint(store);
+ */
+declare function useWaypoint(store: StoreApi<WaypointRuntimeStore>): WaypointState;
+
+interface WaypointHeadlessStep {
+    step: ResolvedStep | undefined;
+    /** Visible fields for this step */
+    fields: ResolvedField[];
+    /** Current persisted data for this step */
+    stepData: Record<string, unknown>;
+    setFieldValue(fieldId: string, value: unknown): void;
+    setStepData(data: Record<string, unknown>): void;
+}
+/**
+ * Headless (router-agnostic) hook that resolves a specific step's fields and data.
+ *
+ * Use `@waypointjs/next`'s `useWaypointStep()` for full Next.js integration
+ * (form, validation, navigation).
+ *
+ * @param store   - The runtime store instance from your context
+ * @param stepId  - The step id to resolve
+ */
+declare function useWaypointStep(store: StoreApi<WaypointRuntimeStore>, stepId: string): WaypointHeadlessStep;
+
+export { type WaypointHeadlessStep, type WaypointState, useWaypoint, useWaypointStep };

package/dist/index.js

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { useStore } from 'zustand';
+import { resolveTree, getNextStep, getPreviousStep, calculateProgress } from '@waypointjs/core';
+
+// src/useWaypoint.ts
+function useWaypoint(store) {
+  const { schema, data, externalVars, currentStepId, isSubmitting } = useStore(
+    store,
+    (s) => ({
+      schema: s.schema,
+      data: s.data,
+      externalVars: s.externalVars,
+      currentStepId: s.currentStepId,
+      isSubmitting: s.isSubmitting
+    })
+  );
+  const tree = useMemo(
+    () => schema ? resolveTree(schema, data, externalVars) : { steps: [], hiddenSteps: [], missingExternalVars: [] },
+    [schema, data, externalVars]
+  );
+  const currentStep = useMemo(
+    () => currentStepId ? tree.steps.find((s) => s.definition.id === currentStepId) : void 0,
+    [tree.steps, currentStepId]
+  );
+  const nextStep = useMemo(
+    () => currentStepId ? getNextStep(tree.steps, currentStepId) : void 0,
+    [tree.steps, currentStepId]
+  );
+  const previousStep = useMemo(
+    () => currentStepId ? getPreviousStep(tree.steps, currentStepId) : void 0,
+    [tree.steps, currentStepId]
+  );
+  const progress = useMemo(
+    () => currentStepId ? calculateProgress(tree.steps, currentStepId) : 0,
+    [tree.steps, currentStepId]
+  );
+  return {
+    schema,
+    data,
+    externalVars,
+    currentStepId,
+    currentStep,
+    nextStep,
+    previousStep,
+    tree,
+    progress,
+    isFirstStep: !previousStep,
+    isLastStep: !nextStep,
+    isSubmitting,
+    missingExternalVars: tree.missingExternalVars,
+    setFieldValue: (stepId, fieldId, value) => store.getState().setFieldValue(stepId, fieldId, value),
+    setStepData: (stepId, data2) => store.getState().setStepData(stepId, data2),
+    setExternalVar: (varId, value) => store.getState().setExternalVar(varId, value),
+    setCurrentStep: (stepId) => store.getState().setCurrentStep(stepId),
+    reset: () => store.getState().reset()
+  };
+}
+function useWaypointStep(store, stepId) {
+  const { schema, data, externalVars } = useStore(store, (s) => ({
+    schema: s.schema,
+    data: s.data,
+    externalVars: s.externalVars
+  }));
+  const tree = useMemo(
+    () => schema ? resolveTree(schema, data, externalVars) : { steps: [], hiddenSteps: [], missingExternalVars: [] },
+    [schema, data, externalVars]
+  );
+  const step = useMemo(
+    () => tree.steps.find((s) => s.definition.id === stepId),
+    [tree.steps, stepId]
+  );
+  const visibleFields = useMemo(
+    () => step?.fields.filter((f) => f.visible) ?? [],
+    [step]
+  );
+  return {
+    step,
+    fields: visibleFields,
+    stepData: data[stepId] ?? {},
+    setFieldValue: (fieldId, value) => store.getState().setFieldValue(stepId, fieldId, value),
+    setStepData: (d) => store.getState().setStepData(stepId, d)
+  };
+}
+
+export { useWaypoint, useWaypointStep };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useWaypoint.ts","../src/useWaypointStep.ts"],"names":["data","useStore","useMemo","resolveTree"],"mappings":"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","file":"index.js","sourcesContent":["import { useMemo } from \"react\";\nimport { useStore } from \"zustand\";\nimport type { StoreApi } from \"zustand\";\n\nimport {\n  resolveTree,\n  calculateProgress,\n  getNextStep,\n  getPreviousStep,\n} from \"@waypointjs/core\";\nimport type { WaypointRuntimeStore } from \"@waypointjs/core\";\nimport type { ResolvedStep, ResolvedTree } from \"@waypointjs/core\";\n\n// ---------------------------------------------------------------------------\n// Return type\n// ---------------------------------------------------------------------------\n\nexport interface WaypointState {\n  schema: WaypointRuntimeStore[\"schema\"];\n  data: WaypointRuntimeStore[\"data\"];\n  externalVars: WaypointRuntimeStore[\"externalVars\"];\n  currentStepId: string | null;\n  currentStep: ResolvedStep | undefined;\n  nextStep: ResolvedStep | undefined;\n  previousStep: ResolvedStep | undefined;\n  tree: ResolvedTree;\n  progress: number;\n  isFirstStep: boolean;\n  isLastStep: boolean;\n  isSubmitting: boolean;\n  missingExternalVars: string[];\n  // Store actions\n  setFieldValue(stepId: string, fieldId: string, value: unknown): void;\n  setStepData(stepId: string, data: Record<string, unknown>): void;\n  setExternalVar(varId: string, value: unknown): void;\n  setCurrentStep(stepId: string): void;\n  reset(): void;\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Headless hook for accessing and mutating the Waypoint runtime store.\n *\n * Router-agnostic — use `@waypointjs/next`'s `useWaypointStep()` for full\n * Next.js integration with form handling and automatic navigation.\n *\n * @example\n * const { currentStep, progress, setFieldValue } = useWaypoint(store);\n */\nexport function useWaypoint(store: StoreApi<WaypointRuntimeStore>): WaypointState {\n  const { schema, data, externalVars, currentStepId, isSubmitting } = useStore(\n    store,\n    (s: WaypointRuntimeStore) => ({\n      schema: s.schema,\n      data: s.data,\n      externalVars: s.externalVars,\n      currentStepId: s.currentStepId,\n      isSubmitting: s.isSubmitting,\n    })\n  );\n\n  const tree = useMemo(\n    () =>\n      schema\n        ? resolveTree(schema, data, externalVars)\n        : { steps: [], hiddenSteps: [], missingExternalVars: [] },\n    [schema, data, externalVars]\n  );\n\n  const currentStep = useMemo(\n    () =>\n      currentStepId\n        ? tree.steps.find((s) => s.definition.id === currentStepId)\n        : undefined,\n    [tree.steps, currentStepId]\n  );\n\n  const nextStep = useMemo(\n    () =>\n      currentStepId ? getNextStep(tree.steps, currentStepId) : undefined,\n    [tree.steps, currentStepId]\n  );\n\n  const previousStep = useMemo(\n    () =>\n      currentStepId ? getPreviousStep(tree.steps, currentStepId) : undefined,\n    [tree.steps, currentStepId]\n  );\n\n  const progress = useMemo(\n    () =>\n      currentStepId ? calculateProgress(tree.steps, currentStepId) : 0,\n    [tree.steps, currentStepId]\n  );\n\n  return {\n    schema,\n    data,\n    externalVars,\n    currentStepId,\n    currentStep,\n    nextStep,\n    previousStep,\n    tree,\n    progress,\n    isFirstStep: !previousStep,\n    isLastStep: !nextStep,\n    isSubmitting,\n    missingExternalVars: tree.missingExternalVars,\n\n    setFieldValue: (stepId, fieldId, value) =>\n      store.getState().setFieldValue(stepId, fieldId, value),\n    setStepData: (stepId, data) =>\n      store.getState().setStepData(stepId, data),\n    setExternalVar: (varId, value) =>\n      store.getState().setExternalVar(varId, value),\n    setCurrentStep: (stepId) => store.getState().setCurrentStep(stepId),\n    reset: () => store.getState().reset(),\n  };\n}\n","import { useMemo } from \"react\";\nimport { useStore } from \"zustand\";\nimport type { StoreApi } from \"zustand\";\n\nimport { resolveTree } from \"@waypointjs/core\";\nimport type { WaypointRuntimeStore } from \"@waypointjs/core\";\nimport type { ResolvedField, ResolvedStep } from \"@waypointjs/core\";\n\n// ---------------------------------------------------------------------------\n// Return type\n// ---------------------------------------------------------------------------\n\nexport interface WaypointHeadlessStep {\n  step: ResolvedStep | undefined;\n  /** Visible fields for this step */\n  fields: ResolvedField[];\n  /** Current persisted data for this step */\n  stepData: Record<string, unknown>;\n  setFieldValue(fieldId: string, value: unknown): void;\n  setStepData(data: Record<string, unknown>): void;\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Headless (router-agnostic) hook that resolves a specific step's fields and data.\n *\n * Use `@waypointjs/next`'s `useWaypointStep()` for full Next.js integration\n * (form, validation, navigation).\n *\n * @param store   - The runtime store instance from your context\n * @param stepId  - The step id to resolve\n */\nexport function useWaypointStep(\n  store: StoreApi<WaypointRuntimeStore>,\n  stepId: string\n): WaypointHeadlessStep {\n  const { schema, data, externalVars } = useStore(store, (s: WaypointRuntimeStore) => ({\n    schema: s.schema,\n    data: s.data,\n    externalVars: s.externalVars,\n  }));\n\n  const tree = useMemo(\n    () =>\n      schema\n        ? resolveTree(schema, data, externalVars)\n        : { steps: [], hiddenSteps: [], missingExternalVars: [] },\n    [schema, data, externalVars]\n  );\n\n  const step = useMemo(\n    () => tree.steps.find((s) => s.definition.id === stepId),\n    [tree.steps, stepId]\n  );\n\n  const visibleFields = useMemo(\n    () => step?.fields.filter((f) => f.visible) ?? [],\n    [step]\n  );\n\n  return {\n    step,\n    fields: visibleFields,\n    stepData: data[stepId] ?? {},\n    setFieldValue: (fieldId, value) =>\n      store.getState().setFieldValue(stepId, fieldId, value),\n    setStepData: (d) => store.getState().setStepData(stepId, d),\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@waypointjs/react",
+  "version": "0.1.0",
+  "description": "React hooks for waypoint journey navigation",
+  "keywords": [
+    "navigation",
+    "journey",
+    "wizard",
+    "react",
+    "hooks"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "zustand": "^4.5.2",
+    "@waypointjs/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.33",
+    "@types/react": "^18.3.3",
+    "react": "^18.3.1",
+    "tsup": "^8.1.0",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "zustand": ">=4"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit"
+  }
+}