import{CodeBlock as t,InstallCommand as r}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as n}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function s(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Overlay Engine"}),e("p",{className:"text-lg text-muted-foreground",children:"`@contractspec/lib.overlay-engine` keeps OverlaySpecs typed, signed, and auditable across tenants, roles, users, and devices."})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(r,{package:"@contractspec/lib.overlay-engine"})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Define + Sign"}),e(t,{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);`})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Runtime"}),e("p",{className:"text-muted-foreground",children:"`OverlayRegistry` stores signed overlays with specificity scoring. `OverlayEngine` merges modifications and emits audit events."}),e(t,{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',
});`})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"React Hooks"}),e("p",{className:"text-muted-foreground",children:"Render overlays in React/React Native via `useOverlay`."}),e(t,{language:"typescript",code:`import { useOverlay } from '@contractspec/lib.overlay-engine/react';

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