@contractspec/bundle.library 0.0.0-canary-20260206014742

package/dist/components/docs/advanced/AdvancedOverlayEditorPage.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@contractspec/lib.ui-link";
+
+//#region src/components/docs/advanced/AdvancedOverlayEditorPage.tsx
+function AdvancedOverlayEditorPage() {
+	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 Editor"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-lg",
+					children: "A Next.js app (`@contractspec/app.overlay-editor`) that lets tenant admins tweak field visibility, labels, and ordering, then sign OverlaySpecs."
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Features"
+					}),
+					/* @__PURE__ */ jsxs("ul", {
+						className: "list-disc space-y-2 pl-6",
+						children: [
+							/* @__PURE__ */ jsx("li", { children: "Toggle visibility and rename labels without touching code." }),
+							/* @__PURE__ */ jsx("li", { children: "Move fields up/down to define the overlay order." }),
+							/* @__PURE__ */ jsx("li", { children: "Preview JSON output powered by `@contractspec/lib.overlay-engine`." }),
+							/* @__PURE__ */ jsx("li", { children: "Server action for PEM signing (Ed25519/RSA-PSS)." })
+						]
+					}),
+					/* @__PURE__ */ jsxs("p", { children: ["Project path: ", /* @__PURE__ */ jsx("code", { children: "packages/apps/overlay-editor" })] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Provisioning flow"
+					}),
+					/* @__PURE__ */ jsxs("ol", {
+						className: "list-decimal space-y-2 pl-6",
+						children: [
+							/* @__PURE__ */ jsxs("li", { children: [
+								"Clone the repo and run ",
+								/* @__PURE__ */ jsx("code", { children: "bun dev" }),
+								" inside the app."
+							] }),
+							/* @__PURE__ */ jsx("li", { children: "Use the UI to craft the overlay for a tenant." }),
+							/* @__PURE__ */ jsx("li", { children: "Paste the tenant's PEM private key (stored in Vault/KMS)." }),
+							/* @__PURE__ */ jsx("li", { children: "Click “Sign overlay” to get the final JSON payload." }),
+							/* @__PURE__ */ jsx("li", { children: "Persist in the `Overlay` table and register with `OverlayRegistry`." })
+						]
+					}),
+					/* @__PURE__ */ jsxs("p", { children: [
+						"See also:",
+						" ",
+						/* @__PURE__ */ jsx(Link, {
+							href: "/docs/ops/tenant-customization",
+							className: "text-violet-400 underline",
+							children: "Tenant customization runbook"
+						}),
+						"."
+					] })
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { AdvancedOverlayEditorPage };
+//# sourceMappingURL=AdvancedOverlayEditorPage.js.map

package/dist/components/docs/advanced/AdvancedOverlayEditorPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedOverlayEditorPage.js","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedOverlayEditorPage.tsx"],"sourcesContent":["import Link from '@contractspec/lib.ui-link';\n\nexport function AdvancedOverlayEditorPage() {\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4\">\n        <h1 className=\"text-4xl font-bold\">Overlay Editor</h1>\n        <p className=\"text-muted-foreground text-lg\">\n          A Next.js app (`@contractspec/app.overlay-editor`) that lets tenant\n          admins tweak field visibility, labels, and ordering, then sign\n          OverlaySpecs.\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Features</h2>\n        <ul className=\"list-disc space-y-2 pl-6\">\n          <li>Toggle visibility and rename labels without touching code.</li>\n          <li>Move fields up/down to define the overlay order.</li>\n          <li>\n            Preview JSON output powered by `@contractspec/lib.overlay-engine`.\n          </li>\n          <li>Server action for PEM signing (Ed25519/RSA-PSS).</li>\n        </ul>\n        <p>\n          Project path: <code>packages/apps/overlay-editor</code>\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Provisioning flow</h2>\n        <ol className=\"list-decimal space-y-2 pl-6\">\n          <li>\n            Clone the repo and run <code>bun dev</code> inside the app.\n          </li>\n          <li>Use the UI to craft the overlay for a tenant.</li>\n          <li>\n            Paste the tenant&apos;s PEM private key (stored in Vault/KMS).\n          </li>\n          <li>Click “Sign overlay” to get the final JSON payload.</li>\n          <li>\n            Persist in the `Overlay` table and register with `OverlayRegistry`.\n          </li>\n        </ol>\n        <p>\n          See also:{' '}\n          <Link\n            href=\"/docs/ops/tenant-customization\"\n            className=\"text-violet-400 underline\"\n          >\n            Tenant customization runbook\n          </Link>\n          .\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAgB,4BAA4B;AAC1C,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAqB;MAAmB,EACtD,oBAAC;KAAE,WAAU;eAAgC;MAIzC;KACA;GAEN,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAG,WAAU;gBAAqB;OAAa;KAChD,qBAAC;MAAG,WAAU;;OACZ,oBAAC,kBAAG,+DAA+D;OACnE,oBAAC,kBAAG,qDAAqD;OACzD,oBAAC,kBAAG,uEAEC;OACL,oBAAC,kBAAG,qDAAqD;;OACtD;KACL,qBAAC,kBAAE,kBACa,oBAAC,oBAAK,iCAAmC,IACrD;;KACA;GAEN,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAG,WAAU;gBAAqB;OAAsB;KACzD,qBAAC;MAAG,WAAU;;OACZ,qBAAC;QAAG;QACqB,oBAAC,oBAAK,YAAc;;WACxC;OACL,oBAAC,kBAAG,kDAAkD;OACtD,oBAAC,kBAAG,8DAEC;OACL,oBAAC,kBAAG,wDAAwD;OAC5D,oBAAC,kBAAG,wEAEC;;OACF;KACL,qBAAC;MAAE;MACS;MACV,oBAAC;OACC,MAAK;OACL,WAAU;iBACX;QAEM;;SAEL;;KACA;;GACF"}

package/dist/components/docs/advanced/AdvancedRenderersPage.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/docs/advanced/AdvancedRenderersPage.d.ts
+declare function AdvancedRenderersPage(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AdvancedRenderersPage };
+//# sourceMappingURL=AdvancedRenderersPage.d.ts.map

package/dist/components/docs/advanced/AdvancedRenderersPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedRenderersPage.d.ts","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedRenderersPage.tsx"],"mappings":";;;iBAGgB,qBAAA,CAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/docs/advanced/AdvancedRenderersPage.js

@@ -0,0 +1,103 @@
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@contractspec/lib.ui-link";
+
+//#region src/components/docs/advanced/AdvancedRenderersPage.tsx
+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 })]
+					})
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { AdvancedRenderersPage };
+//# sourceMappingURL=AdvancedRenderersPage.js.map

package/dist/components/docs/advanced/AdvancedRenderersPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedRenderersPage.js","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedRenderersPage.tsx"],"sourcesContent":["import Link from '@contractspec/lib.ui-link';\nimport { ChevronRight } from 'lucide-react';\n\nexport function AdvancedRenderersPage() {\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-2\">\n        <h1 className=\"text-4xl font-bold\">Custom Renderers</h1>\n        <p className=\"text-muted-foreground text-lg\">\n          ContractSpec ships with React and React Native renderers. You can\n          build custom renderers for any framework.\n        </p>\n      </div>\n\n      <div className=\"space-y-6\">\n        <div className=\"space-y-3\">\n          <h2 className=\"text-2xl font-bold\">Overview</h2>\n          <p className=\"text-muted-foreground\">\n            The presentation runtime libraries (\n            <code>@contractspec/lib.presentation-runtime-react</code> and\n            <code>@contractspec/lib.presentation-runtime-react-native</code>)\n            provide hooks and components to render ContractSpec-defined UI like\n            workflows and data views. You can extend these or create custom\n            implementations for other frameworks.\n          </p>\n        </div>\n\n        <div className=\"space-y-3\">\n          <h2 className=\"text-2xl font-bold\">Using the React Renderer</h2>\n          <div className=\"bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm\">\n            <pre>{`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';\nimport { MyWorkflowSpec } from './specs';\n\nexport function WorkflowPage() {\n  const workflow = useWorkflow(MyWorkflowSpec);\n\n  return (\n    <div>\n      <h1>{workflow.currentStep.title}</h1>\n      <WorkflowStepRenderer workflow={workflow} />\n      <button onClick={workflow.next} disabled={!workflow.canProceed}>\n        Next\n      </button>\n    </div>\n  );\n}`}</pre>\n          </div>\n        </div>\n\n        <div className=\"space-y-3\">\n          <h2 className=\"text-2xl font-bold\">Custom Platform Support</h2>\n          <p className=\"text-muted-foreground\">\n            To support a new platform (e.g., Vue, Svelte), you would:\n          </p>\n          <ol className=\"text-muted-foreground list-inside list-decimal space-y-2\">\n            <li>\n              Implement the core workflow state machine (from{' '}\n              <code>@contractspec/lib.presentation-runtime-core</code>)\n            </li>\n            <li>\n              Create framework-specific hooks/components for step rendering\n            </li>\n            <li>\n              Handle validation and submission via the ContractSpec I/O schemas\n            </li>\n          </ol>\n        </div>\n\n        <div className=\"flex items-center gap-4 pt-4\">\n          <Link href=\"/docs\" className=\"btn-primary\">\n            Back to docs <ChevronRight size={16} />\n          </Link>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAgB,wBAAwB;AACtC,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cAAqB;KAAqB,EACxD,oBAAC;IAAE,WAAU;cAAgC;KAGzC;IACA,EAEN,qBAAC;GAAI,WAAU;;IACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAG,WAAU;gBAAqB;OAAa,EAChD,qBAAC;MAAE,WAAU;;OAAwB;OAEnC,oBAAC,oBAAK,iDAAmD;;OACzD,oBAAC,oBAAK,wDAA0D;;;OAI9D;MACA;IAEN,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAG,WAAU;gBAAqB;OAA6B,EAChE,oBAAC;MAAI,WAAU;gBACb,oBAAC,mBAAK;;;;;;;;;;;;;;;KAeT;OACO;MACF;IAEN,qBAAC;KAAI,WAAU;;MACb,oBAAC;OAAG,WAAU;iBAAqB;QAA4B;MAC/D,oBAAC;OAAE,WAAU;iBAAwB;QAEjC;MACJ,qBAAC;OAAG,WAAU;;QACZ,qBAAC;SAAG;SAC8C;SAChD,oBAAC,oBAAK,gDAAkD;;YACrD;QACL,oBAAC,kBAAG,kEAEC;QACL,oBAAC,kBAAG,sEAEC;;QACF;;MACD;IAEN,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAK,MAAK;MAAQ,WAAU;iBAAc,iBAC5B,oBAAC,gBAAa,MAAM,KAAM;OAClC;MACH;;IACF;GACF"}

package/dist/components/docs/advanced/AdvancedSpecExperimentsPage.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/docs/advanced/AdvancedSpecExperimentsPage.d.ts
+declare function AdvancedSpecExperimentsPage(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AdvancedSpecExperimentsPage };
+//# sourceMappingURL=AdvancedSpecExperimentsPage.d.ts.map

package/dist/components/docs/advanced/AdvancedSpecExperimentsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedSpecExperimentsPage.d.ts","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedSpecExperimentsPage.tsx"],"mappings":";;;iBAAgB,2BAAA,CAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/docs/advanced/AdvancedSpecExperimentsPage.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/docs/advanced/AdvancedSpecExperimentsPage.tsx
+function AdvancedSpecExperimentsPage() {
+	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: "Spec Experiments"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-lg",
+					children: "Run controlled experiments on ContractSpec operations, gradually shift traffic, and roll back automatically when guardrails trip."
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Define control + variants"
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "bg-muted rounded-lg border p-4 text-sm",
+					children: `import { SpecExperimentRegistry } from '@contractspec/lib.growth/spec-experiments';
+
+const registry = new SpecExperimentRegistry().register({
+  target: { name: 'billing.createInvoice', version: 4 },
+  experiment: {
+    key: 'billing.createInvoice.evolution',
+    version: '1.0.0',
+    goal: 'Reduce PO validation failures',
+    primaryMetric: 'latency_ms',
+    variants: [
+      { id: 'control' },
+      { id: 'po-required', description: 'Force PO field', weight: 1 },
+    ],
+  },
+  control: BillingCreateInvoiceV4,
+  variants: [
+    { id: 'po-required', spec: BillingCreateInvoiceForAcme },
+  ],
+  rolloutStages: [0.01, 0.1, 0.5, 1],
+  guardrails: { errorRateThreshold: 0.02, latencyP99ThresholdMs: 500 },
+});`
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Attach to runtime"
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "bg-muted rounded-lg border p-4 text-sm",
+					children: `import { createSpecVariantResolver } from '@contractspec/lib.growth/spec-experiments';
+
+adapterContext.specVariantResolver = createSpecVariantResolver({
+  adapter,
+  resolveUserId: (ctx) => ctx.userId ?? ctx.organizationId ?? 'anon',
+});`
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Track outcomes + auto-rollback"
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "bg-muted rounded-lg border p-4 text-sm",
+					children: `import {
+  SpecExperimentAnalyzer,
+  SpecExperimentController,
+} from '@contractspec/lib.growth/spec-experiments';
+
+const analyzer = new SpecExperimentAnalyzer(tracker);
+const controller = new SpecExperimentController({
+  registry,
+  analyzer,
+  onRollback: (target, evaluation) => notifyOps(target, evaluation.reasons),
+});`
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: [{
+					title: "Deterministic bucketing",
+					description: "ExperimentRunner reuses the same hashing logic as growth experiments—every user sticks to a variant."
+				}, {
+					title: "Multi-stage rollouts",
+					description: "Use `rolloutStages` to shift 1% → 10% → 50% → 100%. Guardrails trigger rollbacks automatically."
+				}].map((card) => /* @__PURE__ */ jsxs("div", {
+					className: "card-subtle space-y-2 p-4",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-lg font-semibold",
+						children: card.title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: card.description
+					})]
+				}, card.title))
+			})
+		]
+	});
+}
+
+//#endregion
+export { AdvancedSpecExperimentsPage };
+//# sourceMappingURL=AdvancedSpecExperimentsPage.js.map

package/dist/components/docs/advanced/AdvancedSpecExperimentsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedSpecExperimentsPage.js","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedSpecExperimentsPage.tsx"],"sourcesContent":["export function AdvancedSpecExperimentsPage() {\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4\">\n        <h1 className=\"text-4xl font-bold\">Spec Experiments</h1>\n        <p className=\"text-muted-foreground text-lg\">\n          Run controlled experiments on ContractSpec operations, gradually shift\n          traffic, and roll back automatically when guardrails trip.\n        </p>\n      </div>\n\n      <div className=\"space-y-3\">\n        <h2 className=\"text-2xl font-bold\">Define control + variants</h2>\n        <pre className=\"bg-muted rounded-lg border p-4 text-sm\">\n          {`import { SpecExperimentRegistry } from '@contractspec/lib.growth/spec-experiments';\n\nconst registry = new SpecExperimentRegistry().register({\n  target: { name: 'billing.createInvoice', version: 4 },\n  experiment: {\n    key: 'billing.createInvoice.evolution',\n    version: '1.0.0',\n    goal: 'Reduce PO validation failures',\n    primaryMetric: 'latency_ms',\n    variants: [\n      { id: 'control' },\n      { id: 'po-required', description: 'Force PO field', weight: 1 },\n    ],\n  },\n  control: BillingCreateInvoiceV4,\n  variants: [\n    { id: 'po-required', spec: BillingCreateInvoiceForAcme },\n  ],\n  rolloutStages: [0.01, 0.1, 0.5, 1],\n  guardrails: { errorRateThreshold: 0.02, latencyP99ThresholdMs: 500 },\n});`}\n        </pre>\n      </div>\n\n      <div className=\"space-y-3\">\n        <h2 className=\"text-2xl font-bold\">Attach to runtime</h2>\n        <pre className=\"bg-muted rounded-lg border p-4 text-sm\">\n          {`import { createSpecVariantResolver } from '@contractspec/lib.growth/spec-experiments';\n\nadapterContext.specVariantResolver = createSpecVariantResolver({\n  adapter,\n  resolveUserId: (ctx) => ctx.userId ?? ctx.organizationId ?? 'anon',\n});`}\n        </pre>\n      </div>\n\n      <div className=\"space-y-3\">\n        <h2 className=\"text-2xl font-bold\">Track outcomes + auto-rollback</h2>\n        <pre className=\"bg-muted rounded-lg border p-4 text-sm\">\n          {`import {\n  SpecExperimentAnalyzer,\n  SpecExperimentController,\n} from '@contractspec/lib.growth/spec-experiments';\n\nconst analyzer = new SpecExperimentAnalyzer(tracker);\nconst controller = new SpecExperimentController({\n  registry,\n  analyzer,\n  onRollback: (target, evaluation) => notifyOps(target, evaluation.reasons),\n});`}\n        </pre>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        {[\n          {\n            title: 'Deterministic bucketing',\n            description:\n              'ExperimentRunner reuses the same hashing logic as growth experiments—every user sticks to a variant.',\n          },\n          {\n            title: 'Multi-stage rollouts',\n            description:\n              'Use `rolloutStages` to shift 1% → 10% → 50% → 100%. Guardrails trigger rollbacks automatically.',\n          },\n        ].map((card) => (\n          <div key={card.title} className=\"card-subtle space-y-2 p-4\">\n            <h3 className=\"text-lg font-semibold\">{card.title}</h3>\n            <p className=\"text-muted-foreground text-sm\">{card.description}</p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,8BAA8B;AAC5C,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAqB;MAAqB,EACxD,oBAAC;KAAE,WAAU;eAAgC;MAGzC;KACA;GAEN,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAqB;MAA8B,EACjE,oBAAC;KAAI,WAAU;eACZ;;;;;;;;;;;;;;;;;;;;;MAqBG;KACF;GAEN,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAqB;MAAsB,EACzD,oBAAC;KAAI,WAAU;eACZ;;;;;;MAMG;KACF;GAEN,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAqB;MAAmC,EACtE,oBAAC;KAAI,WAAU;eACZ;;;;;;;;;;;MAWG;KACF;GAEN,oBAAC;IAAI,WAAU;cACZ,CACC;KACE,OAAO;KACP,aACE;KACH,EACD;KACE,OAAO;KACP,aACE;KACH,CACF,CAAC,KAAK,SACL,qBAAC;KAAqB,WAAU;gBAC9B,oBAAC;MAAG,WAAU;gBAAyB,KAAK;OAAW,EACvD,oBAAC;MAAE,WAAU;gBAAiC,KAAK;OAAgB;OAF3D,KAAK,MAGT,CACN;KACE;;GACF"}

package/dist/components/docs/advanced/AdvancedTelemetryPage.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/docs/advanced/AdvancedTelemetryPage.d.ts
+declare function AdvancedTelemetryPage(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AdvancedTelemetryPage };
+//# sourceMappingURL=AdvancedTelemetryPage.d.ts.map

package/dist/components/docs/advanced/AdvancedTelemetryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedTelemetryPage.d.ts","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedTelemetryPage.tsx"],"mappings":";;;iBAGgB,qBAAA,CAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/docs/advanced/AdvancedTelemetryPage.js

@@ -0,0 +1,250 @@
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@contractspec/lib.ui-link";
+
+//#region src/components/docs/advanced/AdvancedTelemetryPage.tsx
+function AdvancedTelemetryPage() {
+	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: "Telemetry"
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-muted-foreground",
+					children: [
+						"A ",
+						/* @__PURE__ */ jsx("strong", { children: "TelemetrySpec" }),
+						" defines what metrics, logs, and traces to collect for observability. ContractSpec automatically instruments your application based on these specs, ensuring you have the visibility you need to monitor, debug, and optimize your system."
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Why telemetry matters"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "You can't fix what you can't see. Telemetry provides visibility into how your application is performing, where errors are occurring, and how users are interacting with your system. Without proper instrumentation, you're flying blind in production."
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "ContractSpec takes a spec-first approach to telemetry: you declare what you want to observe, and runtime adapters instrument operations automatically. This ensures consistent, comprehensive coverage without manual effort."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Three pillars of observability"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-lg font-semibold",
+							children: "Metrics"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: "Numerical measurements collected over time. Examples: request count, error rate, latency percentiles, active users, queue depth. Metrics are cheap to collect and store, making them ideal for high-level monitoring and alerting."
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-lg font-semibold",
+							children: "Logs"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: "Timestamped text records of events. Examples: \"User 123 logged in\", \"Payment failed for order 456\", \"Database connection pool exhausted\". Logs provide detailed context for debugging specific issues."
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-lg font-semibold",
+							children: "Traces"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: "Records of requests as they flow through your system. A trace shows the complete path of a request—which services it touched, how long each step took, and where errors occurred. Traces are essential for debugging distributed systems."
+						})] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Example TelemetrySpec"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Here's how telemetry is configured in TypeScript:"
+					}),
+					/* @__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 { defineTelemetry } from '@contractspec/lib.contracts';
+
+export const OrderProcessingTelemetry = defineTelemetry({
+  meta: {
+    key: 'order.processing.observability',
+    version: '1.0.0',
+  },
+  metrics: [
+    {
+      name: 'orders_created_total',
+      type: 'counter',
+      description: 'Total number of orders created',
+      labels: ['status', 'payment_method'],
+    },
+    {
+      name: 'order_processing_duration_seconds',
+      type: 'histogram',
+      description: 'Time to process an order',
+      buckets: [0.1, 0.5, 1.0, 2.0, 5.0, 10.0],
+      labels: ['status'],
+    },
+  ],
+  traces: [
+    {
+      operation: 'createOrder',
+      sampleRate: 1.0, // Trace 100% of requests
+      includeInputs: true,
+      includeOutputs: true,
+      redactFields: ['creditCard', 'ssn'],
+    },
+    {
+      operation: 'processPayment',
+      sampleRate: 0.1, // Trace 10% of requests
+      includeInputs: false, // Don't log payment details
+    },
+  ],
+  alerts: [
+    {
+      name: 'high-error-rate',
+      condition: 'error_rate > 0.05',
+      duration: '5m',
+      severity: 'critical',
+      notify: ['pagerduty', 'slack'],
+    },
+  ],
+});` })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Automatic instrumentation"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "ContractSpec automatically instruments:"
+					}),
+					/* @__PURE__ */ jsxs("ul", {
+						className: "text-muted-foreground list-inside list-disc space-y-2",
+						children: [
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "All operations" }), " – Request count, latency, error rate per Command/Query"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "All workflows" }), " – Step execution time, retry counts, compensation events"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "All data views" }), " – Query execution time, result set size"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "All policy decisions" }), " – Decision time, permit/deny ratio"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "System resources" }), " – CPU, memory, disk, network usage"] })
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "You don't need to add instrumentation code manually—the runtime handles it based on your specs."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Integration with observability platforms"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "ContractSpec supports multiple observability backends:"
+					}),
+					/* @__PURE__ */ jsxs("ul", {
+						className: "text-muted-foreground list-inside list-disc space-y-2",
+						children: [
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Prometheus" }), " – For metrics collection and alerting"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Grafana" }), " – For dashboards and visualization"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Jaeger / Tempo" }), " – For distributed tracing"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Loki" }), " – For log aggregation"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Datadog" }), " – All-in-one observability platform"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "New Relic" }), " – Application performance monitoring"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Honeycomb" }), " – Observability for complex systems"] })
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "You can configure multiple backends and send telemetry to all of them simultaneously."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold",
+						children: "Sampling and performance"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Collecting telemetry has a cost—CPU, memory, network bandwidth, and storage. ContractSpec provides several mechanisms to control overhead:"
+					}),
+					/* @__PURE__ */ jsxs("ul", {
+						className: "text-muted-foreground list-inside list-disc space-y-2",
+						children: [
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Sampling" }), " – Trace only a percentage of requests (e.g., 10%)"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Adaptive sampling" }), " – Automatically reduce sampling rate under high load"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Tail-based sampling" }), " – Keep traces for failed requests, sample successful ones"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Field redaction" }), " – Remove sensitive data from traces and logs"] }),
+							/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("strong", { children: "Aggregation" }), " – Pre-aggregate metrics before sending to reduce network traffic"] })
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Best practices"
+				}), /* @__PURE__ */ jsxs("ul", {
+					className: "text-muted-foreground list-inside list-disc space-y-2",
+					children: [
+						/* @__PURE__ */ jsx("li", { children: "Start with high-level metrics (request rate, error rate, latency) and add more detailed instrumentation as needed." }),
+						/* @__PURE__ */ jsx("li", { children: "Use structured logging—log events with structured fields, not free-form text." }),
+						/* @__PURE__ */ jsx("li", { children: "Set up alerts for critical metrics so you're notified when things go wrong." }),
+						/* @__PURE__ */ jsx("li", { children: "Use traces to debug complex issues—they show the complete picture of a request." }),
+						/* @__PURE__ */ jsx("li", { children: "Redact sensitive data from logs and traces to comply with privacy regulations." }),
+						/* @__PURE__ */ jsx("li", { children: "Review dashboards regularly to understand normal behavior—this makes anomalies easier to spot." }),
+						/* @__PURE__ */ jsx("li", { children: "Use sampling to control costs, but always trace errors and slow requests." })
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 pt-4",
+				children: [/* @__PURE__ */ jsx(Link, {
+					href: "/docs/advanced/mcp",
+					className: "btn-ghost",
+					children: "Previous: MCP Adapters"
+				}), /* @__PURE__ */ jsxs(Link, {
+					href: "/docs/comparison",
+					className: "btn-primary",
+					children: ["Next: Comparison ", /* @__PURE__ */ jsx(ChevronRight, { size: 16 })]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { AdvancedTelemetryPage };
+//# sourceMappingURL=AdvancedTelemetryPage.js.map

package/dist/components/docs/advanced/AdvancedTelemetryPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedTelemetryPage.js","names":[],"sources":["../../../../src/components/docs/advanced/AdvancedTelemetryPage.tsx"],"sourcesContent":["import Link from '@contractspec/lib.ui-link';\nimport { ChevronRight } from 'lucide-react';\n\nexport function AdvancedTelemetryPage() {\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4\">\n        <h1 className=\"text-4xl font-bold\">Telemetry</h1>\n        <p className=\"text-muted-foreground\">\n          A <strong>TelemetrySpec</strong> defines what metrics, logs, and\n          traces to collect for observability. ContractSpec automatically\n          instruments your application based on these specs, ensuring you have\n          the visibility you need to monitor, debug, and optimize your system.\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Why telemetry matters</h2>\n        <p className=\"text-muted-foreground\">\n          You can't fix what you can't see. Telemetry provides visibility into\n          how your application is performing, where errors are occurring, and\n          how users are interacting with your system. Without proper\n          instrumentation, you're flying blind in production.\n        </p>\n        <p className=\"text-muted-foreground\">\n          ContractSpec takes a spec-first approach to telemetry: you declare\n          what you want to observe, and runtime adapters instrument operations\n          automatically. This ensures consistent, comprehensive coverage without\n          manual effort.\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Three pillars of observability</h2>\n        <div className=\"space-y-3\">\n          <div>\n            <h3 className=\"text-lg font-semibold\">Metrics</h3>\n            <p className=\"text-muted-foreground\">\n              Numerical measurements collected over time. Examples: request\n              count, error rate, latency percentiles, active users, queue depth.\n              Metrics are cheap to collect and store, making them ideal for\n              high-level monitoring and alerting.\n            </p>\n          </div>\n          <div>\n            <h3 className=\"text-lg font-semibold\">Logs</h3>\n            <p className=\"text-muted-foreground\">\n              Timestamped text records of events. Examples: \"User 123 logged\n              in\", \"Payment failed for order 456\", \"Database connection pool\n              exhausted\". Logs provide detailed context for debugging specific\n              issues.\n            </p>\n          </div>\n          <div>\n            <h3 className=\"text-lg font-semibold\">Traces</h3>\n            <p className=\"text-muted-foreground\">\n              Records of requests as they flow through your system. A trace\n              shows the complete path of a request—which services it touched,\n              how long each step took, and where errors occurred. Traces are\n              essential for debugging distributed systems.\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Example TelemetrySpec</h2>\n        <p className=\"text-muted-foreground\">\n          Here's how telemetry is configured in TypeScript:\n        </p>\n        <div className=\"bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm\">\n          <pre>{`import { defineTelemetry } from '@contractspec/lib.contracts';\n\nexport const OrderProcessingTelemetry = defineTelemetry({\n  meta: {\n    key: 'order.processing.observability',\n    version: '1.0.0',\n  },\n  metrics: [\n    {\n      name: 'orders_created_total',\n      type: 'counter',\n      description: 'Total number of orders created',\n      labels: ['status', 'payment_method'],\n    },\n    {\n      name: 'order_processing_duration_seconds',\n      type: 'histogram',\n      description: 'Time to process an order',\n      buckets: [0.1, 0.5, 1.0, 2.0, 5.0, 10.0],\n      labels: ['status'],\n    },\n  ],\n  traces: [\n    {\n      operation: 'createOrder',\n      sampleRate: 1.0, // Trace 100% of requests\n      includeInputs: true,\n      includeOutputs: true,\n      redactFields: ['creditCard', 'ssn'],\n    },\n    {\n      operation: 'processPayment',\n      sampleRate: 0.1, // Trace 10% of requests\n      includeInputs: false, // Don't log payment details\n    },\n  ],\n  alerts: [\n    {\n      name: 'high-error-rate',\n      condition: 'error_rate > 0.05',\n      duration: '5m',\n      severity: 'critical',\n      notify: ['pagerduty', 'slack'],\n    },\n  ],\n});`}</pre>\n        </div>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Automatic instrumentation</h2>\n        <p className=\"text-muted-foreground\">\n          ContractSpec automatically instruments:\n        </p>\n        <ul className=\"text-muted-foreground list-inside list-disc space-y-2\">\n          <li>\n            <strong>All operations</strong> – Request count, latency, error rate\n            per Command/Query\n          </li>\n          <li>\n            <strong>All workflows</strong> – Step execution time, retry counts,\n            compensation events\n          </li>\n          <li>\n            <strong>All data views</strong> – Query execution time, result set\n            size\n          </li>\n          <li>\n            <strong>All policy decisions</strong> – Decision time, permit/deny\n            ratio\n          </li>\n          <li>\n            <strong>System resources</strong> – CPU, memory, disk, network usage\n          </li>\n        </ul>\n        <p className=\"text-muted-foreground\">\n          You don't need to add instrumentation code manually—the runtime\n          handles it based on your specs.\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">\n          Integration with observability platforms\n        </h2>\n        <p className=\"text-muted-foreground\">\n          ContractSpec supports multiple observability backends:\n        </p>\n        <ul className=\"text-muted-foreground list-inside list-disc space-y-2\">\n          <li>\n            <strong>Prometheus</strong> – For metrics collection and alerting\n          </li>\n          <li>\n            <strong>Grafana</strong> – For dashboards and visualization\n          </li>\n          <li>\n            <strong>Jaeger / Tempo</strong> – For distributed tracing\n          </li>\n          <li>\n            <strong>Loki</strong> – For log aggregation\n          </li>\n          <li>\n            <strong>Datadog</strong> – All-in-one observability platform\n          </li>\n          <li>\n            <strong>New Relic</strong> – Application performance monitoring\n          </li>\n          <li>\n            <strong>Honeycomb</strong> – Observability for complex systems\n          </li>\n        </ul>\n        <p className=\"text-muted-foreground\">\n          You can configure multiple backends and send telemetry to all of them\n          simultaneously.\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Sampling and performance</h2>\n        <p className=\"text-muted-foreground\">\n          Collecting telemetry has a cost—CPU, memory, network bandwidth, and\n          storage. ContractSpec provides several mechanisms to control overhead:\n        </p>\n        <ul className=\"text-muted-foreground list-inside list-disc space-y-2\">\n          <li>\n            <strong>Sampling</strong> – Trace only a percentage of requests\n            (e.g., 10%)\n          </li>\n          <li>\n            <strong>Adaptive sampling</strong> – Automatically reduce sampling\n            rate under high load\n          </li>\n          <li>\n            <strong>Tail-based sampling</strong> – Keep traces for failed\n            requests, sample successful ones\n          </li>\n          <li>\n            <strong>Field redaction</strong> – Remove sensitive data from traces\n            and logs\n          </li>\n          <li>\n            <strong>Aggregation</strong> – Pre-aggregate metrics before sending\n            to reduce network traffic\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h2 className=\"text-2xl font-bold\">Best practices</h2>\n        <ul className=\"text-muted-foreground list-inside list-disc space-y-2\">\n          <li>\n            Start with high-level metrics (request rate, error rate, latency)\n            and add more detailed instrumentation as needed.\n          </li>\n          <li>\n            Use structured logging—log events with structured fields, not\n            free-form text.\n          </li>\n          <li>\n            Set up alerts for critical metrics so you're notified when things go\n            wrong.\n          </li>\n          <li>\n            Use traces to debug complex issues—they show the complete picture of\n            a request.\n          </li>\n          <li>\n            Redact sensitive data from logs and traces to comply with privacy\n            regulations.\n          </li>\n          <li>\n            Review dashboards regularly to understand normal behavior—this makes\n            anomalies easier to spot.\n          </li>\n          <li>\n            Use sampling to control costs, but always trace errors and slow\n            requests.\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"flex items-center gap-4 pt-4\">\n        <Link href=\"/docs/advanced/mcp\" className=\"btn-ghost\">\n          Previous: MCP Adapters\n        </Link>\n        <Link href=\"/docs/comparison\" className=\"btn-primary\">\n          Next: Comparison <ChevronRight size={16} />\n        </Link>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}