// @bun
// src/components/docs/advanced/AdvancedRenderersPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function AdvancedRenderersPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Custom Renderers"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "ContractSpec ships with React and React Native renderers. You can build custom renderers for any framework."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Overview"
              }),
              /* @__PURE__ */ jsxs("p", {
                className: "text-muted-foreground",
                children: [
                  "The presentation runtime libraries (",
                  /* @__PURE__ */ jsx("code", {
                    children: "@contractspec/lib.presentation-runtime-react"
                  }),
                  " and",
                  /* @__PURE__ */ jsx("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."
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Using the React Renderer"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
                children: /* @__PURE__ */ jsx("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>
  );
}`
                })
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Custom Platform Support"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground",
                children: "To support a new platform (e.g., Vue, Svelte), you would:"
              }),
              /* @__PURE__ */ jsxs("ol", {
                className: "text-muted-foreground list-inside list-decimal space-y-2",
                children: [
                  /* @__PURE__ */ jsxs("li", {
                    children: [
                      "Implement the core workflow state machine (from",
                      " ",
                      /* @__PURE__ */ jsx("code", {
                        children: "@contractspec/lib.presentation-runtime-core"
                      }),
                      ")"
                    ]
                  }),
                  /* @__PURE__ */ jsx("li", {
                    children: "Create framework-specific hooks/components for step rendering"
                  }),
                  /* @__PURE__ */ jsx("li", {
                    children: "Handle validation and submission via the ContractSpec I/O schemas"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsx("div", {
            className: "flex items-center gap-4 pt-4",
            children: /* @__PURE__ */ jsxs(Link, {
              href: "/docs",
              className: "btn-primary",
              children: [
                "Back to docs ",
                /* @__PURE__ */ jsx(ChevronRight, {
                  size: 16
                })
              ]
            })
          })
        ]
      })
    ]
  });
}
export {
  AdvancedRenderersPage
};
