// @bun
// src/components/docs/libraries/LibrariesPersonalizationPage.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 LibrariesPersonalizationPage() {
  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: "@contractspec/lib.personalization"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "Track field/feature/workflow usage, analyze drop-offs, and convert insights into OverlaySpecs or workflow tweaks."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: "@contractspec/lib.personalization"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Tracker"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Buffer events per tenant/user and emit OpenTelemetry counters automatically."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { createBehaviorTracker } from '@contractspec/lib.personalization';

const tracker = createBehaviorTracker({
  store,
  context: { tenantId: ctx.tenant.id, userId: ctx.identity.id },
});

tracker.trackFieldAccess({ operation: 'billing.createOrder', field: 'items' });
tracker.trackWorkflowStep({ workflow: 'invoice', step: 'review', status: 'entered' });`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Analyzer"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Summarize events and highlight unused UI, frequent fields, and workflow bottlenecks."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { BehaviorAnalyzer } from '@contractspec/lib.personalization/analyzer';

const analyzer = new BehaviorAnalyzer(store);
const insights = await analyzer.analyze({ tenantId: 'acme', userId: 'ops-42' });
// { unusedFields: ['internalNotes'], workflowBottlenecks: [...] }`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Adapter"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Convert insights into overlays or workflow extension hints."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';

const overlay = insightsToOverlaySuggestion(insights, {
  overlayId: 'acme-order-form',
  tenantId: 'acme',
  capability: 'billing.createOrder',
});`
          })
        ]
      }),
      /* @__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/overlay-engine",
            className: "btn-primary",
            children: [
              "Next: Overlay Engine ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesPersonalizationPage
};
