Runtime Libraries
The presentation runtime libraries provide the engine for rendering ContractSpec-defined UIs. They handle state management, validation, step navigation, and component rendering for Workflows and DataViews.
Libraries
@lssm/lib.presentation-runtime-core
Framework-Agnostic Core. Contains the state machines, validation logic, and navigation rules for workflows. Can be used to build renderers for any platform (Vue, Svelte, CLI).
@lssm/lib.presentation-runtime-react
React Bindings. Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`.
@lssm/lib.presentation-runtime-react-native
React Native Bindings. Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`.
Example: React Workflow
import { useWorkflow, WorkflowStepRenderer } from '@lssm/lib.presentation-runtime-react';
import { OnboardingFlow } from './specs/onboarding';
export function OnboardingPage() {
const workflow = useWorkflow(OnboardingFlow);
if (workflow.isComplete) {
return <SuccessScreen data={workflow.result} />;
}
return (
<div className="max-w-md mx-auto py-8">
<h1 className="text-2xl font-bold mb-4">
{workflow.currentStep.title}
</h1>
<WorkflowStepRenderer
step={workflow.currentStep}
onChange={workflow.updateData}
errors={workflow.errors}
/>
<div className="flex justify-end mt-6 gap-4">
<button
onClick={workflow.prev}
disabled={!workflow.canGoBack}
className="btn-ghost"
>
Back
</button>
<button
onClick={workflow.next}
disabled={!workflow.canProceed}
className="btn-primary"
>
Next
</button>
</div>
</div>
);
}Architecture
The runtime follows a "render-loop" pattern:
- Spec: Defines the flow, fields, and validation rules.
- Core: Tracks current step, data state, and validation errors.
- Renderer: Maps spec fields to UI components (Input, Select, etc.).
- User: Interacts with components, updating core state.
- Policy: (Optional) Re-evaluates visibility on every change.