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