// @bun
// src/components/docs/libraries/LibrariesOverlayEnginePage.tsx
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function LibrariesOverlayEnginePage() {
  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: "Overlay Engine"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "`@contractspec/lib.overlay-engine` keeps OverlaySpecs typed, signed, and auditable across tenants, roles, users, and devices."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: "@contractspec/lib.overlay-engine"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Define + Sign"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { defineOverlay } from '@contractspec/lib.overlay-engine/spec';
import { signOverlay } from '@contractspec/lib.overlay-engine/signer';

const overlay = defineOverlay({
  overlayId: 'acme-order-form',
  version: '1.0.0',
  appliesTo: { capability: 'billing.createOrder', tenantId: 'acme' },
  modifications: [{ type: 'hideField', field: 'internalNotes' }],
});

const signed = await signOverlay(overlay, privateKeyPem);`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Runtime"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "`OverlayRegistry` stores signed overlays with specificity scoring. `OverlayEngine` merges modifications and emits audit events."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `const registry = new OverlayRegistry();
registry.register(signed);

const engine = new OverlayEngine({
  registry,
  audit: (event) => auditLog.write(event),
});

const result = engine.apply({
  target: { fields },
  capability: 'billing.createOrder',
  tenantId: 'acme',
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "React Hooks"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Render overlays in React/React Native via `useOverlay`."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { useOverlay } from '@contractspec/lib.overlay-engine/react';

const { target } = useOverlay(engine, {
  target: { fields },
  capability: 'billing.createOrder',
  tenantId: 'acme',
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries",
            className: "btn-ghost",
            children: "Back to Libraries"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/workflow-composer",
            className: "btn-primary",
            children: [
              "Next: Workflow Composer ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesOverlayEnginePage
};
