@lssm/lib.presentation-runtime-react 0.0.0-canary-20251120170226

package/README.md

@@ -0,0 +1,43 @@
+# @lssm/lib.presentation-runtime-react
+
+React bindings for ContractSpec presentations (Workflows, DataViews).
+
+## Purpose
+
+To render ContractSpec-defined UIs in standard React web applications.
+
+## Installation
+
+```bash
+npm install @lssm/lib.presentation-runtime-react
+# or
+bun add @lssm/lib.presentation-runtime-react
+```
+
+## Key Concepts
+
+- **useWorkflow**: Hook to drive a multi-step workflow.
+- **WorkflowStepper**: UI component to show progress.
+- **WorkflowStepRenderer**: Component to render the current step's form or content.
+
+## Usage
+
+```tsx
+import {
+  useWorkflow,
+  WorkflowStepRenderer,
+} from '@lssm/lib.presentation-runtime-react';
+import { MyWorkflowSpec } from './specs';
+
+export function WorkflowPage() {
+  const workflow = useWorkflow(MyWorkflowSpec);
+
+  return (
+    <div>
+      <WorkflowStepRenderer workflow={workflow} />
+      <button onClick={workflow.next}>Next</button>
+    </div>
+  );
+}
+```
+

package/dist/WorkflowStepRenderer.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { FormRef, Step, StepExecution, WorkflowSpec, WorkflowState } from "@lssm/lib.contracts/workflow";
+
+//#region src/WorkflowStepRenderer.d.ts
+interface WorkflowStepRendererProps {
+  spec: WorkflowSpec;
+  state: WorkflowState | null;
+  className?: string;
+  renderHumanStep?: (form: FormRef, step: Step) => React.ReactNode;
+  renderAutomationStep?: (step: Step) => React.ReactNode;
+  renderDecisionStep?: (step: Step) => React.ReactNode;
+  loadingFallback?: React.ReactNode;
+  completedFallback?: React.ReactNode;
+  cancelledFallback?: React.ReactNode;
+  failedFallback?: (state: WorkflowState, last: StepExecution | undefined) => React.ReactNode;
+}
+declare function WorkflowStepRenderer({
+  spec,
+  state,
+  className,
+  renderHumanStep,
+  renderAutomationStep,
+  renderDecisionStep,
+  loadingFallback,
+  completedFallback,
+  cancelledFallback,
+  failedFallback
+}: WorkflowStepRendererProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { WorkflowStepRenderer, WorkflowStepRendererProps };
+//# sourceMappingURL=WorkflowStepRenderer.d.ts.map

package/dist/WorkflowStepRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowStepRenderer.d.ts","names":[],"sources":["../src/WorkflowStepRenderer.tsx"],"sourcesContent":[],"mappings":";;;;;UAUiB,yBAAA;QACT;SACC;EAFQ,SAAA,CAAA,EAAA,MAAA;EACT,eAAA,CAAA,EAAA,CAAA,IAAA,EAGmB,OAHnB,EAAA,IAAA,EAGkC,IAHlC,EAAA,GAG2C,KAAA,CAAM,SAHjD;EACC,oBAAA,CAAA,EAAA,CAAA,IAAA,EAGuB,IAHvB,EAAA,GAGgC,KAAA,CAAM,SAHtC;EAEkB,kBAAA,CAAA,EAAA,CAAA,IAAA,EAEG,IAFH,EAAA,GAEY,KAAA,CAAM,SAFlB;EAAe,eAAA,CAAA,EAGtB,KAAA,CAAM,SAHgB;EAAS,iBAAM,CAAA,EAInC,KAAA,CAAM,SAJ6B;EACzB,iBAAA,CAAA,EAIV,KAAA,CAAM,SAJI;EAAS,cAAM,CAAA,EAAA,CAAA,KAAA,EAMpC,aANoC,EAAA,IAAA,EAOrC,aAPqC,GAAA,SAAA,EAAA,GAQxC,KAAA,CAAM,SARkC;;AACF,iBAU7B,oBAAA,CAV6B;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,eAAA;EAAA,oBAAA;EAAA,kBAAA;EAAA,eAAA;EAAA,iBAAA;EAAA,iBAAA;EAAA;AAAA,CAAA,EAqB1C,yBArB0C,CAAA,EAqBjB,kBAAA,CAAA,GAAA,CAAA,OArBiB"}

package/dist/WorkflowStepRenderer.js

@@ -0,0 +1,103 @@
+import "react";
+import { EmptyState, LoaderBlock } from "@lssm/lib.design-system";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/WorkflowStepRenderer.tsx
+function WorkflowStepRenderer({ spec, state, className, renderHumanStep, renderAutomationStep, renderDecisionStep, loadingFallback, completedFallback, cancelledFallback, failedFallback }) {
+	const steps = spec.definition.steps;
+	if (!steps.length) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			title: "No steps defined",
+			description: "Add at least one step to this workflow to render it."
+		})
+	});
+	if (!state) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: loadingFallback ?? /* @__PURE__ */ jsx(LoaderBlock, {
+			label: "Loading workflow",
+			description: "Fetching workflow state..."
+		})
+	});
+	const lastExecution = state.history.at(-1);
+	if (state.status === "failed") return /* @__PURE__ */ jsx("div", {
+		className,
+		children: failedFallback?.(state, lastExecution) ?? /* @__PURE__ */ jsx(EmptyState, {
+			title: "Workflow failed",
+			description: lastExecution?.error ?? "Fix the underlying issue and retry the step."
+		})
+	});
+	if (state.status === "cancelled") return /* @__PURE__ */ jsx("div", {
+		className,
+		children: cancelledFallback ?? /* @__PURE__ */ jsx(EmptyState, {
+			title: "Workflow cancelled",
+			description: "This workflow has been cancelled. Restart it to resume."
+		})
+	});
+	if (state.status === "completed") return /* @__PURE__ */ jsx("div", {
+		className,
+		children: completedFallback ?? /* @__PURE__ */ jsx(EmptyState, {
+			title: "Workflow complete",
+			description: "All steps have been executed successfully."
+		})
+	});
+	const activeStep = steps.find((step) => step.id === state.currentStep) ?? steps[0];
+	if (!activeStep) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			title: "No active step",
+			description: "This workflow has no active step."
+		})
+	});
+	switch (activeStep.type) {
+		case "human": {
+			const form = activeStep.action?.form;
+			if (form && renderHumanStep) return /* @__PURE__ */ jsx("div", {
+				className,
+				children: renderHumanStep(form, activeStep)
+			});
+			return /* @__PURE__ */ jsx("div", {
+				className,
+				children: /* @__PURE__ */ jsx(EmptyState, {
+					title: "Form renderer missing",
+					description: "Provide renderHumanStep to render this human step's form."
+				})
+			});
+		}
+		case "automation":
+			if (renderAutomationStep) return /* @__PURE__ */ jsx("div", {
+				className,
+				children: renderAutomationStep(activeStep)
+			});
+			return /* @__PURE__ */ jsx("div", {
+				className,
+				children: /* @__PURE__ */ jsx(EmptyState, {
+					title: "Automation step in progress",
+					description: `Waiting for automation "${activeStep.label}" to finish.`
+				})
+			});
+		case "decision":
+			if (renderDecisionStep) return /* @__PURE__ */ jsx("div", {
+				className,
+				children: renderDecisionStep(activeStep)
+			});
+			return /* @__PURE__ */ jsx("div", {
+				className,
+				children: /* @__PURE__ */ jsx(EmptyState, {
+					title: "Decision step awaiting input",
+					description: "Provide a custom decision renderer via renderDecisionStep."
+				})
+			});
+		default: return /* @__PURE__ */ jsx("div", {
+			className,
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				title: "Unknown step type",
+				description: `Step "${activeStep.id}" has an unsupported type.`
+			})
+		});
+	}
+}
+
+//#endregion
+export { WorkflowStepRenderer };
+//# sourceMappingURL=WorkflowStepRenderer.js.map

package/dist/WorkflowStepRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowStepRenderer.js","names":[],"sources":["../src/WorkflowStepRenderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EmptyState, LoaderBlock } from '@lssm/lib.design-system';\nimport type {\n  FormRef,\n  Step,\n  WorkflowSpec,\n  WorkflowState,\n  StepExecution,\n} from '@lssm/lib.contracts/workflow';\n\nexport interface WorkflowStepRendererProps {\n  spec: WorkflowSpec;\n  state: WorkflowState | null;\n  className?: string;\n  renderHumanStep?: (form: FormRef, step: Step) => React.ReactNode;\n  renderAutomationStep?: (step: Step) => React.ReactNode;\n  renderDecisionStep?: (step: Step) => React.ReactNode;\n  loadingFallback?: React.ReactNode;\n  completedFallback?: React.ReactNode;\n  cancelledFallback?: React.ReactNode;\n  failedFallback?: (\n    state: WorkflowState,\n    last: StepExecution | undefined\n  ) => React.ReactNode;\n}\n\nexport function WorkflowStepRenderer({\n  spec,\n  state,\n  className,\n  renderHumanStep,\n  renderAutomationStep,\n  renderDecisionStep,\n  loadingFallback,\n  completedFallback,\n  cancelledFallback,\n  failedFallback,\n}: WorkflowStepRendererProps) {\n  const steps = spec.definition.steps;\n  if (!steps.length) {\n    return (\n      <div className={className}>\n        <EmptyState\n          title=\"No steps defined\"\n          description=\"Add at least one step to this workflow to render it.\"\n        />\n      </div>\n    );\n  }\n\n  if (!state) {\n    return (\n      <div className={className}>\n        {loadingFallback ?? (\n          <LoaderBlock\n            label=\"Loading workflow\"\n            description=\"Fetching workflow state...\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  const lastExecution = state.history.at(-1);\n\n  if (state.status === 'failed') {\n    return (\n      <div className={className}>\n        {failedFallback?.(state, lastExecution) ?? (\n          <EmptyState\n            title=\"Workflow failed\"\n            description={\n              lastExecution?.error ??\n              'Fix the underlying issue and retry the step.'\n            }\n          />\n        )}\n      </div>\n    );\n  }\n\n  if (state.status === 'cancelled') {\n    return (\n      <div className={className}>\n        {cancelledFallback ?? (\n          <EmptyState\n            title=\"Workflow cancelled\"\n            description=\"This workflow has been cancelled. Restart it to resume.\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  if (state.status === 'completed') {\n    return (\n      <div className={className}>\n        {completedFallback ?? (\n          <EmptyState\n            title=\"Workflow complete\"\n            description=\"All steps have been executed successfully.\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  const activeStep =\n    steps.find((step) => step.id === state.currentStep) ?? steps[0];\n\n  if (!activeStep) {\n    return (\n      <div className={className}>\n        <EmptyState\n          title=\"No active step\"\n          description=\"This workflow has no active step.\"\n        />\n      </div>\n    );\n  }\n\n  switch (activeStep.type) {\n    case 'human': {\n      const form = activeStep.action?.form;\n      if (form && renderHumanStep) {\n        return (\n          <div className={className}>{renderHumanStep(form, activeStep)}</div>\n        );\n      }\n      return (\n        <div className={className}>\n          <EmptyState\n            title=\"Form renderer missing\"\n            description=\"Provide renderHumanStep to render this human step's form.\"\n          />\n        </div>\n      );\n    }\n    case 'automation': {\n      if (renderAutomationStep) {\n        return (\n          <div className={className}>{renderAutomationStep(activeStep)}</div>\n        );\n      }\n      return (\n        <div className={className}>\n          <EmptyState\n            title=\"Automation step in progress\"\n            description={`Waiting for automation \"${activeStep.label}\" to finish.`}\n          />\n        </div>\n      );\n    }\n    case 'decision': {\n      if (renderDecisionStep) {\n        return (\n          <div className={className}>{renderDecisionStep(activeStep)}</div>\n        );\n      }\n      return (\n        <div className={className}>\n          <EmptyState\n            title=\"Decision step awaiting input\"\n            description=\"Provide a custom decision renderer via renderDecisionStep.\"\n          />\n        </div>\n      );\n    }\n    default:\n      return (\n        <div className={className}>\n          <EmptyState\n            title=\"Unknown step type\"\n            description={`Step \"${activeStep.id}\" has an unsupported type.`}\n          />\n        </div>\n      );\n  }\n}\n"],"mappings":";;;;;AA0BA,SAAgB,qBAAqB,EACnC,MACA,OACA,WACA,iBACA,sBACA,oBACA,iBACA,mBACA,mBACA,kBAC4B;CAC5B,MAAM,QAAQ,KAAK,WAAW;AAC9B,KAAI,CAAC,MAAM,OACT,QACE,oBAAC;EAAe;YACd,oBAAC;GACC,OAAM;GACN,aAAY;IACZ;GACE;AAIV,KAAI,CAAC,MACH,QACE,oBAAC;EAAe;YACb,mBACC,oBAAC;GACC,OAAM;GACN,aAAY;IACZ;GAEA;CAIV,MAAM,gBAAgB,MAAM,QAAQ,GAAG,GAAG;AAE1C,KAAI,MAAM,WAAW,SACnB,QACE,oBAAC;EAAe;YACb,iBAAiB,OAAO,cAAc,IACrC,oBAAC;GACC,OAAM;GACN,aACE,eAAe,SACf;IAEF;GAEA;AAIV,KAAI,MAAM,WAAW,YACnB,QACE,oBAAC;EAAe;YACb,qBACC,oBAAC;GACC,OAAM;GACN,aAAY;IACZ;GAEA;AAIV,KAAI,MAAM,WAAW,YACnB,QACE,oBAAC;EAAe;YACb,qBACC,oBAAC;GACC,OAAM;GACN,aAAY;IACZ;GAEA;CAIV,MAAM,aACJ,MAAM,MAAM,SAAS,KAAK,OAAO,MAAM,YAAY,IAAI,MAAM;AAE/D,KAAI,CAAC,WACH,QACE,oBAAC;EAAe;YACd,oBAAC;GACC,OAAM;GACN,aAAY;IACZ;GACE;AAIV,SAAQ,WAAW,MAAnB;EACE,KAAK,SAAS;GACZ,MAAM,OAAO,WAAW,QAAQ;AAChC,OAAI,QAAQ,gBACV,QACE,oBAAC;IAAe;cAAY,gBAAgB,MAAM,WAAW;KAAO;AAGxE,UACE,oBAAC;IAAe;cACd,oBAAC;KACC,OAAM;KACN,aAAY;MACZ;KACE;;EAGV,KAAK;AACH,OAAI,qBACF,QACE,oBAAC;IAAe;cAAY,qBAAqB,WAAW;KAAO;AAGvE,UACE,oBAAC;IAAe;cACd,oBAAC;KACC,OAAM;KACN,aAAa,2BAA2B,WAAW,MAAM;MACzD;KACE;EAGV,KAAK;AACH,OAAI,mBACF,QACE,oBAAC;IAAe;cAAY,mBAAmB,WAAW;KAAO;AAGrE,UACE,oBAAC;IAAe;cACd,oBAAC;KACC,OAAM;KACN,aAAY;MACZ;KACE;EAGV,QACE,QACE,oBAAC;GAAe;aACd,oBAAC;IACC,OAAM;IACN,aAAa,SAAS,WAAW,GAAG;KACpC;IACE"}

package/dist/WorkflowStepper.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { WorkflowSpec, WorkflowState } from "@lssm/lib.contracts/workflow";
+
+//#region src/WorkflowStepper.d.ts
+interface WorkflowStepperProps {
+  spec: WorkflowSpec;
+  state: WorkflowState | null;
+  className?: string;
+  showLabels?: boolean;
+}
+declare function WorkflowStepper({
+  spec,
+  state,
+  className,
+  showLabels
+}: WorkflowStepperProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { WorkflowStepper, WorkflowStepperProps };
+//# sourceMappingURL=WorkflowStepper.d.ts.map

package/dist/WorkflowStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowStepper.d.ts","names":[],"sources":["../src/WorkflowStepper.tsx"],"sourcesContent":[],"mappings":";;;;UAIiB,oBAAA;QACT;SACC;EAFQ,SAAA,CAAA,EAAA,MAAA;EAOD,UAAA,CAAA,EAAA,OAAe;;AAE7B,iBAFc,eAAA,CAEd;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAGC,oBAHD,CAAA,EAGqB,kBAAA,CAAA,GAAA,CAAA,OAHrB"}

package/dist/WorkflowStepper.js

@@ -0,0 +1,39 @@
+import "react";
+import { Stepper } from "@lssm/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/WorkflowStepper.tsx
+function WorkflowStepper({ spec, state, className, showLabels = false }) {
+	const steps = spec.definition.steps;
+	const total = steps.length;
+	const current = computeCurrent(steps, state);
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["flex flex-col gap-2", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(Stepper, {
+			current,
+			total
+		}), showLabels && total > 0 && /* @__PURE__ */ jsx("ol", {
+			className: "text-muted-foreground flex flex-wrap gap-2 text-sm",
+			children: steps.map((step, index) => {
+				return /* @__PURE__ */ jsx("li", {
+					className: ["rounded border px-2 py-1", (state?.status === "completed" ? index === total - 1 : step.id === state?.currentStep) ? "border-primary text-primary" : "border-border"].join(" "),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: step.label
+					})
+				}, step.id);
+			})
+		})]
+	});
+}
+function computeCurrent(steps, state) {
+	if (!steps.length) return 0;
+	if (!state) return 1;
+	if (state.status === "completed") return steps.length;
+	const idx = steps.findIndex((step) => step.id === state.currentStep);
+	return idx === -1 ? 1 : idx + 1;
+}
+
+//#endregion
+export { WorkflowStepper };
+//# sourceMappingURL=WorkflowStepper.js.map

package/dist/WorkflowStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowStepper.js","names":[],"sources":["../src/WorkflowStepper.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { WorkflowSpec, WorkflowState } from '@lssm/lib.contracts/workflow';\nimport { Stepper } from '@lssm/lib.design-system';\n\nexport interface WorkflowStepperProps {\n  spec: WorkflowSpec;\n  state: WorkflowState | null;\n  className?: string;\n  showLabels?: boolean;\n}\n\nexport function WorkflowStepper({\n  spec,\n  state,\n  className,\n  showLabels = false,\n}: WorkflowStepperProps) {\n  const steps = spec.definition.steps;\n  const total = steps.length;\n  const current = computeCurrent(steps, state);\n\n  return (\n    <div\n      className={['flex flex-col gap-2', className].filter(Boolean).join(' ')}\n    >\n      <Stepper current={current} total={total} />\n      {showLabels && total > 0 && (\n        <ol className=\"text-muted-foreground flex flex-wrap gap-2 text-sm\">\n          {steps.map((step, index) => {\n            const isActive =\n              state?.status === 'completed'\n                ? index === total - 1\n                : step.id === state?.currentStep;\n            return (\n              <li\n                key={step.id}\n                className={[\n                  'rounded border px-2 py-1',\n                  isActive ? 'border-primary text-primary' : 'border-border',\n                ].join(' ')}\n              >\n                <span className=\"font-medium\">{step.label}</span>\n              </li>\n            );\n          })}\n        </ol>\n      )}\n    </div>\n  );\n}\n\nfunction computeCurrent(\n  steps: WorkflowSpec['definition']['steps'],\n  state: WorkflowState | null\n) {\n  if (!steps.length) return 0;\n  if (!state) return 1;\n\n  if (state.status === 'completed') return steps.length;\n\n  const idx = steps.findIndex((step) => step.id === state.currentStep);\n  return idx === -1 ? 1 : idx + 1;\n}\n"],"mappings":";;;;;AAWA,SAAgB,gBAAgB,EAC9B,MACA,OACA,WACA,aAAa,SACU;CACvB,MAAM,QAAQ,KAAK,WAAW;CAC9B,MAAM,QAAQ,MAAM;CACpB,MAAM,UAAU,eAAe,OAAO,MAAM;AAE5C,QACE,qBAAC;EACC,WAAW,CAAC,uBAAuB,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAEvE,oBAAC;GAAiB;GAAgB;IAAS,EAC1C,cAAc,QAAQ,KACrB,oBAAC;GAAG,WAAU;aACX,MAAM,KAAK,MAAM,UAAU;AAK1B,WACE,oBAAC;KAEC,WAAW,CACT,6BAPJ,OAAO,WAAW,cACd,UAAU,QAAQ,IAClB,KAAK,OAAO,OAAO,eAMR,gCAAgC,gBAC5C,CAAC,KAAK,IAAI;eAEX,oBAAC;MAAK,WAAU;gBAAe,KAAK;OAAa;OAN5C,KAAK,GAOP;KAEP;IACC;GAEH;;AAIV,SAAS,eACP,OACA,OACA;AACA,KAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,KAAI,CAAC,MAAO,QAAO;AAEnB,KAAI,MAAM,WAAW,YAAa,QAAO,MAAM;CAE/C,MAAM,MAAM,MAAM,WAAW,SAAS,KAAK,OAAO,MAAM,YAAY;AACpE,QAAO,QAAQ,KAAK,IAAI,MAAM"}

package/dist/index.d.ts

@@ -0,0 +1,115 @@
+import { WorkflowStepRenderer } from "./WorkflowStepRenderer.js";
+import { WorkflowStepper } from "./WorkflowStepper.js";
+import { UseWorkflowOptions, UseWorkflowResult, useWorkflow } from "./useWorkflow.js";
+import * as React from "react";
+import { DefaultValues, Resolver, UseFormReturn } from "react-hook-form";
+import { ListFetcher, ListState } from "@lssm/lib.presentation-runtime-core";
+
+//#region src/index.d.ts
+interface UsePresentationControllerOpts<TFilters extends Record<string, unknown>, TVars, TItem> {
+  defaults: ListState<TFilters>;
+  form: {
+    defaultValues: DefaultValues<TFilters> | TFilters;
+    resolver?: Resolver<TFilters>;
+  };
+  toVariables: (input: ListState<TFilters>) => TVars;
+  fetcher: ListFetcher<TVars, TItem>;
+  toChips?: (filters: TFilters, setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void) => {
+    key: string;
+    label: React.ReactNode;
+    onRemove?: () => void;
+  }[];
+  useUrlState: (args: {
+    defaults: ListState<TFilters>;
+    replace?: boolean;
+  }) => {
+    state: ListState<TFilters>;
+    setState: (next: Partial<ListState<TFilters>>) => void;
+    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+    clearFilters: () => void;
+  };
+  replace?: boolean;
+}
+declare function usePresentationController<TFilters extends Record<string, unknown>, TVars, TItem>({
+  defaults,
+  form: formOpts,
+  toVariables,
+  fetcher,
+  toChips,
+  useUrlState,
+  replace
+}: UsePresentationControllerOpts<TFilters, TVars, TItem>): {
+  readonly form: UseFormReturn<TFilters>;
+  readonly url: {
+    state: ListState<TFilters>;
+    setState: (next: Partial<ListState<TFilters>>) => void;
+    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+    clearFilters: () => void;
+  };
+  readonly variables: TVars;
+  readonly data: TItem[];
+  readonly loading: boolean;
+  readonly error: unknown;
+  readonly totalItems: number | undefined;
+  readonly totalPages: number | undefined;
+  readonly refetch: () => Promise<void>;
+  readonly chips: {
+    key: string;
+    label: React.ReactNode;
+    onRemove?: () => void;
+  }[];
+  readonly setSearch: (q: string) => void;
+  readonly submitFilters: (e?: React.BaseSyntheticEvent) => Promise<void>;
+  readonly clearAll: () => void;
+};
+interface UseListCoordinatorOpts<TFilters extends Record<string, unknown>, TVars> {
+  defaults: ListState<TFilters>;
+  form: {
+    defaultValues: DefaultValues<TFilters>;
+    resolver?: Resolver<TFilters>;
+  };
+  toVariables: (input: ListState<TFilters>) => TVars;
+  toChips?: (filters: TFilters, setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void) => {
+    key: string;
+    label: React.ReactNode;
+    onRemove?: () => void;
+  }[];
+  useUrlState: (args: {
+    defaults: ListState<TFilters>;
+    replace?: boolean;
+  }) => {
+    state: ListState<TFilters>;
+    setState: (next: Partial<ListState<TFilters>>) => void;
+    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+    clearFilters: () => void;
+  };
+  replace?: boolean;
+}
+declare function useListCoordinator<TFilters extends Record<string, unknown>, TVars>({
+  defaults,
+  form: formOpts,
+  toVariables,
+  toChips,
+  useUrlState,
+  replace
+}: UseListCoordinatorOpts<TFilters, TVars>): {
+  readonly form: UseFormReturn<TFilters>;
+  readonly url: {
+    state: ListState<TFilters>;
+    setState: (next: Partial<ListState<TFilters>>) => void;
+    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+    clearFilters: () => void;
+  };
+  readonly variables: TVars;
+  readonly chips: {
+    key: string;
+    label: React.ReactNode;
+    onRemove?: () => void;
+  }[];
+  readonly setSearch: (q: string) => void;
+  readonly submitFilters: (e?: React.BaseSyntheticEvent) => Promise<void>;
+  readonly clearAll: () => void;
+};
+//#endregion
+export { UseListCoordinatorOpts, UsePresentationControllerOpts, type UseWorkflowOptions, type UseWorkflowResult, WorkflowStepRenderer, WorkflowStepper, useListCoordinator, usePresentationController, useWorkflow };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,130 @@
+import { WorkflowStepRenderer } from "./WorkflowStepRenderer.js";
+import { WorkflowStepper } from "./WorkflowStepper.js";
+import { useWorkflow } from "./useWorkflow.js";
+import * as React from "react";
+import { useForm } from "@lssm/lib.ui-kit-web/ui/form";
+
+//#region src/index.ts
+function usePresentationController({ defaults, form: formOpts, toVariables, fetcher, toChips, useUrlState, replace }) {
+	const url = useUrlState({
+		defaults,
+		replace
+	});
+	const form = useForm({
+		defaultValues: formOpts.defaultValues,
+		resolver: formOpts.resolver
+	});
+	React.useEffect(() => {
+		form.reset({
+			...form.getValues(),
+			...url.state.filters
+		});
+	}, [url.state.filters]);
+	const submitFilters = form.handleSubmit((values) => {
+		url.setState({
+			filters: values,
+			page: 1
+		});
+	});
+	const setSearch = React.useCallback((q) => url.setState({
+		q,
+		page: 1
+	}), [url]);
+	const variables = React.useMemo(() => toVariables(url.state), [url.state, toVariables]);
+	const [data, setData] = React.useState([]);
+	const [loading, setLoading] = React.useState(false);
+	const [error, setError] = React.useState(null);
+	const [totalItems, setTotalItems] = React.useState(void 0);
+	const [totalPages, setTotalPages] = React.useState(void 0);
+	const refetch = React.useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const out = await fetcher(variables);
+			setData(out.items);
+			setTotalItems(out.totalItems);
+			setTotalPages(out.totalPages);
+		} catch (e) {
+			setError(e);
+		} finally {
+			setLoading(false);
+		}
+	}, [variables, fetcher]);
+	React.useEffect(() => {
+		refetch();
+	}, [refetch]);
+	return {
+		form,
+		url,
+		variables,
+		data,
+		loading,
+		error,
+		totalItems,
+		totalPages,
+		refetch,
+		chips: React.useMemo(() => toChips ? toChips(url.state.filters || {}, url.setFilter) : [], [url.state.filters, toChips]),
+		setSearch,
+		submitFilters,
+		clearAll: React.useCallback(() => {
+			form.reset(formOpts.defaultValues);
+			url.setState({
+				filters: {},
+				page: 1
+			});
+		}, [
+			form,
+			formOpts.defaultValues,
+			url
+		])
+	};
+}
+function useListCoordinator({ defaults, form: formOpts, toVariables, toChips, useUrlState, replace }) {
+	const url = useUrlState({
+		defaults,
+		replace
+	});
+	const form = useForm({
+		defaultValues: formOpts.defaultValues,
+		resolver: formOpts.resolver
+	});
+	React.useEffect(() => {
+		form.reset({
+			...form.getValues(),
+			...url.state.filters
+		});
+	}, [url.state.filters]);
+	const submitFilters = form.handleSubmit((values) => {
+		url.setState({
+			filters: values,
+			page: 1
+		});
+	});
+	const setSearch = React.useCallback((q) => url.setState({
+		q,
+		page: 1
+	}), [url]);
+	return {
+		form,
+		url,
+		variables: React.useMemo(() => toVariables(url.state), [url.state, toVariables]),
+		chips: React.useMemo(() => toChips ? toChips(url.state.filters || {}, url.setFilter) : [], [url.state.filters, toChips]),
+		setSearch,
+		submitFilters,
+		clearAll: React.useCallback(() => {
+			form.reset(formOpts.defaultValues);
+			url.setState({
+				filters: {},
+				page: 1
+			});
+		}, [
+			form,
+			formOpts.defaultValues,
+			url
+		])
+	};
+}
+
+//#endregion
+export { WorkflowStepRenderer, WorkflowStepper, useListCoordinator, usePresentationController, useWorkflow };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DefaultValues, Resolver, UseFormReturn } from 'react-hook-form';\nimport { useForm } from '@lssm/lib.ui-kit-web/ui/form';\nimport type {\n  ListFetcher,\n  ListState,\n} from '@lssm/lib.presentation-runtime-core';\n\nexport interface UsePresentationControllerOpts<\n  TFilters extends Record<string, unknown>,\n  TVars,\n  TItem,\n> {\n  defaults: ListState<TFilters>;\n  form: {\n    defaultValues: DefaultValues<TFilters> | TFilters;\n    resolver?: Resolver<TFilters>;\n  };\n  toVariables: (input: ListState<TFilters>) => TVars;\n  fetcher: ListFetcher<TVars, TItem>;\n  toChips?: (\n    filters: TFilters,\n    setFilter: (\n      key: keyof TFilters,\n      value: TFilters[keyof TFilters] | null\n    ) => void\n  ) => { key: string; label: React.ReactNode; onRemove?: () => void }[];\n  useUrlState: (args: { defaults: ListState<TFilters>; replace?: boolean }) => {\n    state: ListState<TFilters>;\n    setState: (next: Partial<ListState<TFilters>>) => void;\n    setFilter: (\n      key: keyof TFilters,\n      value: TFilters[keyof TFilters] | null\n    ) => void;\n    clearFilters: () => void;\n  };\n  replace?: boolean;\n}\n\nexport function usePresentationController<\n  TFilters extends Record<string, unknown>,\n  TVars,\n  TItem,\n>({\n  defaults,\n  form: formOpts,\n  toVariables,\n  fetcher,\n  toChips,\n  useUrlState,\n  replace,\n}: UsePresentationControllerOpts<TFilters, TVars, TItem>) {\n  const url = useUrlState({ defaults, replace });\n  const form = useForm<TFilters>({\n    defaultValues: formOpts.defaultValues,\n    resolver: formOpts.resolver as any,\n  } as any);\n\n  React.useEffect(() => {\n    form.reset({ ...(form.getValues() as any), ...(url.state.filters as any) });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [url.state.filters]);\n\n  const submitFilters = form.handleSubmit((values) => {\n    url.setState({ filters: values as TFilters, page: 1 });\n  });\n\n  const setSearch = React.useCallback(\n    (q: string) => url.setState({ q, page: 1 }),\n    [url]\n  );\n  const variables = React.useMemo(\n    () => toVariables(url.state),\n    [url.state, toVariables]\n  );\n\n  const [data, setData] = React.useState<TItem[]>([]);\n  const [loading, setLoading] = React.useState(false);\n  const [error, setError] = React.useState<unknown>(null);\n  const [totalItems, setTotalItems] = React.useState<number | undefined>(\n    undefined\n  );\n  const [totalPages, setTotalPages] = React.useState<number | undefined>(\n    undefined\n  );\n\n  const refetch = React.useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const out = await fetcher(variables);\n      setData(out.items);\n      setTotalItems(out.totalItems);\n      setTotalPages(out.totalPages);\n    } catch (e) {\n      setError(e);\n    } finally {\n      setLoading(false);\n    }\n  }, [variables, fetcher]);\n\n  React.useEffect(() => {\n    void refetch();\n  }, [refetch]);\n\n  const chips = React.useMemo(\n    () =>\n      toChips\n        ? toChips(\n            (url.state.filters as TFilters) || ({} as any),\n            url.setFilter as any\n          )\n        : [],\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [url.state.filters, toChips]\n  );\n\n  const clearAll = React.useCallback(() => {\n    form.reset(formOpts.defaultValues as any);\n    url.setState({ filters: {} as TFilters, page: 1 });\n  }, [form, formOpts.defaultValues, url]);\n\n  return {\n    form: form as UseFormReturn<TFilters>,\n    url,\n    variables,\n    data,\n    loading,\n    error,\n    totalItems,\n    totalPages,\n    refetch,\n    chips,\n    setSearch,\n    submitFilters,\n    clearAll,\n  } as const;\n}\n\nexport interface UseListCoordinatorOpts<\n  TFilters extends Record<string, unknown>,\n  TVars,\n> {\n  defaults: ListState<TFilters>;\n  form: {\n    defaultValues: DefaultValues<TFilters>;\n    resolver?: Resolver<TFilters>;\n  };\n  toVariables: (input: ListState<TFilters>) => TVars;\n  toChips?: (\n    filters: TFilters,\n    setFilter: (\n      key: keyof TFilters,\n      value: TFilters[keyof TFilters] | null\n    ) => void\n  ) => { key: string; label: React.ReactNode; onRemove?: () => void }[];\n  useUrlState: (args: { defaults: ListState<TFilters>; replace?: boolean }) => {\n    state: ListState<TFilters>;\n    setState: (next: Partial<ListState<TFilters>>) => void;\n    setFilter: (\n      key: keyof TFilters,\n      value: TFilters[keyof TFilters] | null\n    ) => void;\n    clearFilters: () => void;\n  };\n  replace?: boolean;\n}\n\nexport function useListCoordinator<\n  TFilters extends Record<string, unknown>,\n  TVars,\n>({\n  defaults,\n  form: formOpts,\n  toVariables,\n  toChips,\n  useUrlState,\n  replace,\n}: UseListCoordinatorOpts<TFilters, TVars>) {\n  const url = useUrlState({ defaults, replace });\n  const form = useForm<TFilters>({\n    defaultValues: formOpts.defaultValues,\n    resolver: formOpts.resolver,\n  } as any);\n\n  React.useEffect(() => {\n    form.reset({ ...(form.getValues() as any), ...(url.state.filters as any) });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [url.state.filters]);\n\n  const submitFilters = form.handleSubmit((values) => {\n    url.setState({ filters: values as TFilters, page: 1 });\n  });\n\n  const setSearch = React.useCallback(\n    (q: string) => url.setState({ q, page: 1 }),\n    [url]\n  );\n  const variables = React.useMemo(\n    () => toVariables(url.state),\n    [url.state, toVariables]\n  );\n\n  const chips = React.useMemo(\n    () =>\n      toChips\n        ? toChips(\n            (url.state.filters as TFilters) || ({} as any),\n            url.setFilter as any\n          )\n        : [],\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [url.state.filters, toChips]\n  );\n\n  const clearAll = React.useCallback(() => {\n    form.reset(formOpts.defaultValues as any);\n    url.setState({ filters: {} as TFilters, page: 1 });\n  }, [form, formOpts.defaultValues, url]);\n\n  return {\n    form: form as UseFormReturn<TFilters>,\n    url,\n    variables,\n    chips,\n    setSearch,\n    submitFilters,\n    clearAll,\n  } as const;\n}\n\nexport { useWorkflow } from './useWorkflow';\nexport type {\n  UseWorkflowOptions,\n  UseWorkflowResult,\n} from './useWorkflow';\nexport { WorkflowStepper } from './WorkflowStepper';\nexport { WorkflowStepRenderer } from './WorkflowStepRenderer';\n"],"mappings":"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"}

package/dist/nativewind-env.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/useWorkflow.d.ts

@@ -0,0 +1,27 @@
+import { WorkflowRunner, WorkflowState } from "@lssm/lib.contracts/workflow";
+
+//#region src/useWorkflow.d.ts
+interface UseWorkflowOptions {
+  workflowId: string;
+  runner: WorkflowRunner;
+  autoRefresh?: boolean;
+  refreshIntervalMs?: number;
+}
+interface UseWorkflowResult {
+  state: WorkflowState | null;
+  isLoading: boolean;
+  error: Error | null;
+  isExecuting: boolean;
+  refresh: () => Promise<void>;
+  executeStep: (input?: unknown) => Promise<void>;
+  cancel: () => Promise<void>;
+}
+declare function useWorkflow({
+  workflowId,
+  runner,
+  autoRefresh,
+  refreshIntervalMs
+}: UseWorkflowOptions): UseWorkflowResult;
+//#endregion
+export { UseWorkflowOptions, UseWorkflowResult, useWorkflow };
+//# sourceMappingURL=useWorkflow.d.ts.map

package/dist/useWorkflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkflow.d.ts","names":[],"sources":["../src/useWorkflow.ts"],"sourcesContent":[],"mappings":";;;UAMiB,kBAAA;;EAAA,MAAA,EAEP,cAFyB;EAOlB,WAAA,CAAA,EAAA,OAAiB;EACzB,iBAAA,CAAA,EAAA,MAAA;;AAIQ,UALA,iBAAA,CAKA;EACmB,KAAA,EAL3B,aAK2B,GAAA,IAAA;EACpB,SAAA,EAAA,OAAA;EAAO,KAAA,EAJd,KAIc,GAAA,IAAA;EAGP,WAAA,EAAA,OAAW;EACzB,OAAA,EAAA,GAAA,GANe,OAMf,CAAA,IAAA,CAAA;EACA,WAAA,EAAA,CAAA,KAAA,CAAA,EAAA,OAAA,EAAA,GANkC,OAMlC,CAAA,IAAA,CAAA;EACA,MAAA,EAAA,GAAA,GANc,OAMd,CAAA,IAAA,CAAA;;AAEC,iBALa,WAAA,CAKb;EAAA,UAAA;EAAA,MAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAAA,kBAAA,CAAA,EAAqB,iBAArB"}

package/dist/useWorkflow.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+//#region src/useWorkflow.ts
+function useWorkflow({ workflowId, runner, autoRefresh = true, refreshIntervalMs = 2e3 }) {
+	const isMounted = React.useRef(true);
+	const [state, setState] = React.useState(null);
+	const [isLoading, setIsLoading] = React.useState(true);
+	const [error, setError] = React.useState(null);
+	const [isExecuting, setIsExecuting] = React.useState(false);
+	const refresh = React.useCallback(async () => {
+		try {
+			setIsLoading(true);
+			const next = await runner.getState(workflowId);
+			if (!isMounted.current) return;
+			setState(next);
+			setError(null);
+		} catch (err) {
+			if (!isMounted.current) return;
+			setError(err instanceof Error ? err : new Error(String(err)));
+		} finally {
+			if (isMounted.current) setIsLoading(false);
+		}
+	}, [runner, workflowId]);
+	const executeStep = React.useCallback(async (input) => {
+		setIsExecuting(true);
+		try {
+			await runner.executeStep(workflowId, input);
+			await refresh();
+		} catch (err) {
+			if (isMounted.current) setError(err instanceof Error ? err : new Error(String(err)));
+			throw err;
+		} finally {
+			if (isMounted.current) setIsExecuting(false);
+		}
+	}, [
+		runner,
+		workflowId,
+		refresh
+	]);
+	const cancel = React.useCallback(async () => {
+		await runner.cancel(workflowId);
+		await refresh();
+	}, [
+		runner,
+		workflowId,
+		refresh
+	]);
+	React.useEffect(() => {
+		isMounted.current = true;
+		refresh();
+		if (!autoRefresh) return () => {
+			isMounted.current = false;
+		};
+		const interval = setInterval(() => {
+			refresh();
+		}, refreshIntervalMs);
+		return () => {
+			isMounted.current = false;
+			clearInterval(interval);
+		};
+	}, [
+		refresh,
+		autoRefresh,
+		refreshIntervalMs
+	]);
+	return {
+		state,
+		isLoading,
+		error,
+		isExecuting,
+		refresh,
+		executeStep,
+		cancel
+	};
+}
+
+//#endregion
+export { useWorkflow };
+//# sourceMappingURL=useWorkflow.js.map

package/dist/useWorkflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkflow.js","names":[],"sources":["../src/useWorkflow.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  WorkflowRunner,\n  WorkflowState,\n} from '@lssm/lib.contracts/workflow';\n\nexport interface UseWorkflowOptions {\n  workflowId: string;\n  runner: WorkflowRunner;\n  autoRefresh?: boolean;\n  refreshIntervalMs?: number;\n}\n\nexport interface UseWorkflowResult {\n  state: WorkflowState | null;\n  isLoading: boolean;\n  error: Error | null;\n  isExecuting: boolean;\n  refresh: () => Promise<void>;\n  executeStep: (input?: unknown) => Promise<void>;\n  cancel: () => Promise<void>;\n}\n\nexport function useWorkflow({\n  workflowId,\n  runner,\n  autoRefresh = true,\n  refreshIntervalMs = 2000,\n}: UseWorkflowOptions): UseWorkflowResult {\n  const isMounted = React.useRef(true);\n  const [state, setState] = React.useState<WorkflowState | null>(null);\n  const [isLoading, setIsLoading] = React.useState(true);\n  const [error, setError] = React.useState<Error | null>(null);\n  const [isExecuting, setIsExecuting] = React.useState(false);\n\n  const refresh = React.useCallback(async () => {\n    try {\n      setIsLoading(true);\n      const next = await runner.getState(workflowId);\n      if (!isMounted.current) return;\n      setState(next);\n      setError(null);\n    } catch (err) {\n      if (!isMounted.current) return;\n      setError(err instanceof Error ? err : new Error(String(err)));\n    } finally {\n      if (isMounted.current) setIsLoading(false);\n    }\n  }, [runner, workflowId]);\n\n  const executeStep = React.useCallback(\n    async (input?: unknown) => {\n      setIsExecuting(true);\n      try {\n        await runner.executeStep(workflowId, input);\n        await refresh();\n      } catch (err) {\n        if (isMounted.current) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n        }\n        throw err;\n      } finally {\n        if (isMounted.current) setIsExecuting(false);\n      }\n    },\n    [runner, workflowId, refresh]\n  );\n\n  const cancel = React.useCallback(async () => {\n    await runner.cancel(workflowId);\n    await refresh();\n  }, [runner, workflowId, refresh]);\n\n  React.useEffect(() => {\n    isMounted.current = true;\n    void refresh();\n    if (!autoRefresh) {\n      return () => {\n        isMounted.current = false;\n      };\n    }\n    const interval = setInterval(() => {\n      void refresh();\n    }, refreshIntervalMs);\n    return () => {\n      isMounted.current = false;\n      clearInterval(interval);\n    };\n  }, [refresh, autoRefresh, refreshIntervalMs]);\n\n  return {\n    state,\n    isLoading,\n    error,\n    isExecuting,\n    refresh,\n    executeStep,\n    cancel,\n  };\n}\n\n"],"mappings":";;;AAuBA,SAAgB,YAAY,EAC1B,YACA,QACA,cAAc,MACd,oBAAoB,OACoB;CACxC,MAAM,YAAY,MAAM,OAAO,KAAK;CACpC,MAAM,CAAC,OAAO,YAAY,MAAM,SAA+B,KAAK;CACpE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CACtD,MAAM,CAAC,OAAO,YAAY,MAAM,SAAuB,KAAK;CAC5D,MAAM,CAAC,aAAa,kBAAkB,MAAM,SAAS,MAAM;CAE3D,MAAM,UAAU,MAAM,YAAY,YAAY;AAC5C,MAAI;AACF,gBAAa,KAAK;GAClB,MAAM,OAAO,MAAM,OAAO,SAAS,WAAW;AAC9C,OAAI,CAAC,UAAU,QAAS;AACxB,YAAS,KAAK;AACd,YAAS,KAAK;WACP,KAAK;AACZ,OAAI,CAAC,UAAU,QAAS;AACxB,YAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,CAAC;YACrD;AACR,OAAI,UAAU,QAAS,cAAa,MAAM;;IAE3C,CAAC,QAAQ,WAAW,CAAC;CAExB,MAAM,cAAc,MAAM,YACxB,OAAO,UAAoB;AACzB,iBAAe,KAAK;AACpB,MAAI;AACF,SAAM,OAAO,YAAY,YAAY,MAAM;AAC3C,SAAM,SAAS;WACR,KAAK;AACZ,OAAI,UAAU,QACZ,UAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,CAAC;AAE/D,SAAM;YACE;AACR,OAAI,UAAU,QAAS,gBAAe,MAAM;;IAGhD;EAAC;EAAQ;EAAY;EAAQ,CAC9B;CAED,MAAM,SAAS,MAAM,YAAY,YAAY;AAC3C,QAAM,OAAO,OAAO,WAAW;AAC/B,QAAM,SAAS;IACd;EAAC;EAAQ;EAAY;EAAQ,CAAC;AAEjC,OAAM,gBAAgB;AACpB,YAAU,UAAU;AACpB,EAAK,SAAS;AACd,MAAI,CAAC,YACH,cAAa;AACX,aAAU,UAAU;;EAGxB,MAAM,WAAW,kBAAkB;AACjC,GAAK,SAAS;KACb,kBAAkB;AACrB,eAAa;AACX,aAAU,UAAU;AACpB,iBAAc,SAAS;;IAExB;EAAC;EAAS;EAAa;EAAkB,CAAC;AAE7C,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@lssm/lib.presentation-runtime-react",
+  "version": "0.0.0-canary-20251120170226",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun build:bundle && bun build:types",
+    "build:bundle": "tsdown",
+    "build:types": "tsc --noEmit -p tsconfig.json",
+    "dev": "bun run build:bundle --watch",
+    "lint": "bun run lint:fix",
+    "lint:fix": "eslint src --fix",
+    "lint:check": "eslint src"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-hook-form": "7.66.0",
+    "zod": "^4.1.5",
+    "@lssm/lib.presentation-runtime-core": "0.0.0-canary-20251120170226"
+  },
+  "dependencies": {
+    "@lssm/lib.presentation-runtime-core": "0.0.0-canary-20251120170226",
+    "@lssm/lib.contracts": "0.0.0-canary-20251120170226",
+    "@lssm/lib.design-system": "0.0.0-canary-20251120170226",
+    "@lssm/lib.ui-kit-web": "0.0.0-canary-20251120170226"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./useWorkflow": "./dist/useWorkflow.js",
+    "./WorkflowStepper": "./dist/WorkflowStepper.js",
+    "./WorkflowStepRenderer": "./dist/WorkflowStepRenderer.js",
+    "./*": "./*"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./useWorkflow": "./dist/useWorkflow.js",
+      "./WorkflowStepper": "./dist/WorkflowStepper.js",
+      "./WorkflowStepRenderer": "./dist/WorkflowStepRenderer.js",
+      "./*": "./*"
+    }
+  }
+}