var n=Object.defineProperty;var c=(t)=>t;function i(t,r){this[t]=c.bind(null,r)}var m=(t,r)=>{for(var a in r)n(t,a,{get:r[a],enumerable:!0,configurable:!0,set:i.bind(r,a)})};var s=(t,r)=>()=>(t&&(r=t(t=0)),r);import d from"@contractspec/lib.ui-link";import{ChevronRight as l}from"lucide-react";import{jsx as e,jsxs as o}from"react/jsx-runtime";function w(){return o("div",{className:"space-y-8",children:[o("div",{className:"space-y-2",children:[e("h1",{className:"font-bold text-4xl",children:"Custom Renderers"}),e("p",{className:"text-lg text-muted-foreground",children:"ContractSpec ships with React and React Native renderers. You can build custom renderers for any framework."})]}),o("div",{className:"space-y-6",children:[o("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Overview"}),o("p",{className:"text-muted-foreground",children:["The presentation runtime libraries (",e("code",{children:"@contractspec/lib.presentation-runtime-react"})," and",e("code",{children:"@contractspec/lib.presentation-runtime-react-native"}),") provide hooks and components to render ContractSpec-defined UI like workflows and data views. You can extend these or create custom implementations for other frameworks."]})]}),o("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Using the React Renderer"}),e("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:e("pre",{children:`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
import { MyWorkflowSpec } from './specs';

export function WorkflowPage() {
  const workflow = useWorkflow(MyWorkflowSpec);

  return (
    <div>
      <h1>{workflow.currentStep.title}</h1>
      <WorkflowStepRenderer workflow={workflow} />
      <button onClick={workflow.next} disabled={!workflow.canProceed}>
        Next
      </button>
    </div>
  );
}`})})]}),o("div",{className:"space-y-3",children:[e("h2",{className:"font-bold text-2xl",children:"Custom Platform Support"}),e("p",{className:"text-muted-foreground",children:"To support a new platform (e.g., Vue, Svelte), you would:"}),o("ol",{className:"list-inside list-decimal space-y-2 text-muted-foreground",children:[o("li",{children:["Implement the core workflow state machine (from"," ",e("code",{children:"@contractspec/lib.presentation-runtime-core"}),")"]}),e("li",{children:"Create framework-specific hooks/components for step rendering"}),e("li",{children:"Handle validation and submission via the ContractSpec I/O schemas"})]})]}),e("div",{className:"flex items-center gap-4 pt-4",children:o(d,{href:"/docs",className:"btn-primary",children:["Back to docs ",e(l,{size:16})]})})]})]})}export{w as AdvancedRenderersPage};
