// @bun
import{CodeBlock as o,InstallCommand as r}from"@contractspec/lib.design-system";import a from"@contractspec/lib.ui-link";import{ChevronRight as n}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";function c(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Runtime Libraries"}),e("p",{className:"text-muted-foreground",children:"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."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(r,{package:"@contractspec/lib.presentation-runtime-react"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Libraries"}),t("div",{className:"space-y-6",children:[t("div",{className:"card-subtle p-6",children:[e("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-core"}),t("p",{className:"mt-2 text-muted-foreground text-sm",children:[e("strong",{children:"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)."]})]}),t("div",{className:"card-subtle p-6",children:[e("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react"}),t("p",{className:"mt-2 text-muted-foreground text-sm",children:[e("strong",{children:"React Bindings"}),". Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`."]})]}),t("div",{className:"card-subtle p-6",children:[e("h3",{className:"font-bold text-lg",children:"@contractspec/lib.presentation-runtime-react-native"}),t("p",{className:"mt-2 text-muted-foreground text-sm",children:[e("strong",{children:"React Native Bindings"}),". Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`."]})]})]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: React Workflow"}),e(o,{language:"tsx",code:`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/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>
  );
}`})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Architecture"}),e("p",{className:"text-muted-foreground",children:'The runtime follows a "render-loop" pattern:'}),t("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Spec"}),": Defines the flow, fields, and validation rules."]}),t("li",{children:[e("strong",{children:"Core"}),": Tracks current step, data state, and validation errors."]}),t("li",{children:[e("strong",{children:"Renderer"}),": Maps spec fields to UI components (Input, Select, etc.)."]}),t("li",{children:[e("strong",{children:"User"}),": Interacts with components, updating core state."]}),t("li",{children:[e("strong",{children:"Policy"}),": (Optional) Re-evaluates visibility on every change."]})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(a,{href:"/docs/libraries/data-backend",className:"btn-ghost",children:"Previous: Data & Backend"}),t(a,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",e(n,{size:16})]})]})]})}export{c as LibrariesRuntimePage};
