// @bun
// src/components/docs/shared/StudioPrompt.tsx
import Link from "@contractspec/lib.ui-link";
import { jsx, jsxs } from "react/jsx-runtime";
function StudioPrompt({
  title = "Want to turn product signals into spec-first deliverables?",
  body = "ContractSpec Studio ingests evidence from meetings, support, analytics, docs, and code, then compiles decisions into spec diffs and task packs.",
  ctaLabel = "Try Studio",
  href = "https://www.contractspec.studio"
}) {
  return /* @__PURE__ */ jsxs("div", {
    className: "card-subtle space-y-3 p-6",
    children: [
      /* @__PURE__ */ jsx("h3", {
        className: "text-lg font-semibold",
        children: title
      }),
      /* @__PURE__ */ jsx("p", {
        className: "text-muted-foreground text-sm",
        children: body
      }),
      /* @__PURE__ */ jsx(Link, {
        href,
        className: "btn-primary",
        children: ctaLabel
      })
    ]
  });
}

// src/components/docs/guides/GuideContractTypesPage.tsx
import { CodeBlock } from "@contractspec/lib.design-system";
import Link2 from "@contractspec/lib.ui-link";
import { ChevronRight, Layers, Zap, Shield, Globe } from "lucide-react";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var contractTypes = [
  {
    name: "Operations",
    factory: "defineCommand / defineQuery",
    description: "API endpoints with input/output schemas, validation, and policy.",
    icon: Zap,
    color: "text-blue-400"
  },
  {
    name: "Events",
    factory: "defineEvent",
    description: "Domain events with typed payloads and PII handling.",
    icon: Layers,
    color: "text-green-400"
  },
  {
    name: "Capabilities",
    factory: "defineCapability",
    description: "Feature groupings that link operations, events, and UIs.",
    icon: Shield,
    color: "text-purple-400"
  },
  {
    name: "Presentations",
    factory: "definePresentation",
    description: "UI specifications for rendering data and handling interactions.",
    icon: Globe,
    color: "text-orange-400"
  }
];
function GuideContractTypesPage() {
  return /* @__PURE__ */ jsxs2("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs2("div", {
        className: "space-y-3",
        children: [
          /* @__PURE__ */ jsx2("h1", {
            className: "text-4xl font-bold",
            children: "Contract Types Overview"
          }),
          /* @__PURE__ */ jsx2("p", {
            className: "text-muted-foreground text-lg",
            children: "Learn about the different contract types in ContractSpec and when to use each one for spec-first development."
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx2("h2", {
            className: "text-2xl font-bold",
            children: "Core Contract Types"
          }),
          /* @__PURE__ */ jsx2("div", {
            className: "grid gap-3 md:grid-cols-2",
            children: contractTypes.map((type) => /* @__PURE__ */ jsxs2("div", {
              className: "flex items-start gap-3 rounded-lg border border-white/10 p-4",
              children: [
                /* @__PURE__ */ jsx2(type.icon, {
                  className: type.color,
                  size: 20
                }),
                /* @__PURE__ */ jsxs2("div", {
                  className: "space-y-1",
                  children: [
                    /* @__PURE__ */ jsx2("h3", {
                      className: "font-semibold",
                      children: type.name
                    }),
                    /* @__PURE__ */ jsx2("p", {
                      className: "text-muted-foreground text-xs",
                      children: type.description
                    }),
                    /* @__PURE__ */ jsx2("code", {
                      className: "text-xs text-violet-400",
                      children: type.factory
                    })
                  ]
                })
              ]
            }, type.name))
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs2("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "1) Operations (Commands & Queries)"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "Operations are the backbone of your API. Commands mutate state, queries read state. Both have typed input/output schemas."
              }),
              /* @__PURE__ */ jsx2(CodeBlock, {
                language: "typescript",
                filename: "src/contracts/user.operation.ts",
                code: `import { defineCommand, defineQuery } from "@contractspec/lib.contracts-spec";
import { SchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";

// Command: Mutates state (creates a user)
export const CreateUserCommand = defineCommand({
  meta: {
    key: "user.create",
    version: "1.0.0",
    description: "Create a new user account",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users", "auth"],
  },
  io: {
    input: new SchemaModel({
      name: "CreateUserInput",
      fields: {
        email: { type: ScalarTypeEnum.Email(), isOptional: false },
        name: { type: ScalarTypeEnum.NonEmptyString(), isOptional: false },
      },
    }),
    output: new SchemaModel({
      name: "CreateUserOutput",
      fields: {
        id: { type: ScalarTypeEnum.UUID(), isOptional: false },
        email: { type: ScalarTypeEnum.Email(), isOptional: false },
      },
    }),
    errors: {
      EMAIL_EXISTS: {
        description: "Email already registered",
        http: 409,
        when: "User with this email already exists",
      },
    },
  },
  policy: { auth: "admin" },
});

// Query: Reads state (gets user by ID)
export const GetUserQuery = defineQuery({
  meta: {
    key: "user.get",
    version: "1.0.0",
    description: "Get user by ID",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users"],
  },
  io: {
    input: new SchemaModel({
      name: "GetUserInput",
      fields: {
        id: { type: ScalarTypeEnum.UUID(), isOptional: false },
      },
    }),
    output: new SchemaModel({
      name: "GetUserOutput",
      fields: {
        id: { type: ScalarTypeEnum.UUID(), isOptional: false },
        email: { type: ScalarTypeEnum.Email(), isOptional: false },
        name: { type: ScalarTypeEnum.String(), isOptional: false },
      },
    }),
  },
  policy: { auth: "user" },
});`
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "2) Events"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "Events represent domain occurrences. They have typed payloads with PII field marking for compliance."
              }),
              /* @__PURE__ */ jsx2(CodeBlock, {
                language: "typescript",
                filename: "src/contracts/user.event.ts",
                code: `import { defineEvent } from "@contractspec/lib.contracts-spec";
import { SchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";

export const UserCreatedEvent = defineEvent({
  meta: {
    key: "user.created",
    version: "1.0.0",
    description: "Emitted when a new user is created",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users", "auth"],
  },
  // Mark PII fields for redaction in logs/exports
  pii: ["email"],
  payload: new SchemaModel({
    name: "UserCreatedPayload",
    fields: {
      userId: { type: ScalarTypeEnum.UUID(), isOptional: false },
      email: { type: ScalarTypeEnum.Email(), isOptional: false },
      createdAt: { type: ScalarTypeEnum.DateTime(), isOptional: false },
    },
  }),
});

export const UserDeletedEvent = defineEvent({
  meta: {
    key: "user.deleted",
    version: "1.0.0",
    description: "Emitted when a user is deleted",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users"],
  },
  payload: new SchemaModel({
    name: "UserDeletedPayload",
    fields: {
      userId: { type: ScalarTypeEnum.UUID(), isOptional: false },
      deletedAt: { type: ScalarTypeEnum.DateTime(), isOptional: false },
      reason: { type: ScalarTypeEnum.String(), isOptional: true },
    },
  }),
});`
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "3) Capabilities"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "Capabilities group related operations, events, and presentations. They define feature boundaries and dependencies."
              }),
              /* @__PURE__ */ jsx2(CodeBlock, {
                language: "typescript",
                filename: "src/contracts/user-management.capability.ts",
                code: `import { defineCapability } from "@contractspec/lib.contracts-spec";

export const UserManagementCapability = defineCapability({
  meta: {
    key: "user.management",
    version: "1.0.0",
    description: "User account management features",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users", "core"],
    kind: "api",
  },
  // Operations/events this capability provides
  provides: [
    { surface: "operation", key: "user.create", version: "1.0.0" },
    { surface: "operation", key: "user.get", version: "1.0.0" },
    { surface: "operation", key: "user.delete", version: "1.0.0" },
    { surface: "event", key: "user.created", version: "1.0.0" },
    { surface: "event", key: "user.deleted", version: "1.0.0" },
  ],
  // Dependencies on other capabilities
  requires: [
    { key: "auth.core", reason: "Needs authentication for user operations" },
  ],
});

// Capabilities can extend other capabilities
export const AdminUserCapability = defineCapability({
  meta: {
    key: "user.admin",
    version: "1.0.0",
    description: "Admin-only user management features",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users", "admin"],
    kind: "api",
  },
  // Inherit from base capability
  extends: { key: "user.management", version: "1.0.0" },
  provides: [
    { surface: "operation", key: "user.ban", version: "1.0.0" },
    { surface: "operation", key: "user.impersonate", version: "1.0.0" },
  ],
});`
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "4) Presentations"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "Presentations define UI specifications. They link to capabilities and specify how data should be displayed."
              }),
              /* @__PURE__ */ jsx2(CodeBlock, {
                language: "typescript",
                filename: "src/contracts/user-list.presentation.ts",
                code: `import { definePresentation } from "@contractspec/lib.contracts-spec";

export const UserListPresentation = definePresentation({
  meta: {
    key: "users.list",
    version: "1.0.0",
    description: "Display a list of users with search and pagination",
    stability: "stable",
    owners: ["platform.core"],
    tags: ["users", "ui"],
  },
  // Link to capability that provides data
  capability: { key: "user.management", version: "1.0.0" },
  // UI specifications
  config: {
    title: "Users",
    layout: "table",
    columns: ["name", "email", "createdAt", "status"],
    actions: ["view", "edit", "delete"],
    pagination: { defaultPageSize: 25 },
    search: { fields: ["name", "email"] },
  },
});`
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "5) Additional Contract Types"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "ContractSpec provides specialized contracts for different concerns:"
              }),
              /* @__PURE__ */ jsxs2("div", {
                className: "grid gap-4 md:grid-cols-2",
                children: [
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Policy"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "definePolicy"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "RBAC/ABAC rules, rate limits, and access control."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Workflow"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineWorkflow"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "Multi-step processes with states, transitions, and SLAs."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Translation"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineTranslation"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "i18n messages with ICU format and locale fallbacks."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Integration"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineIntegration"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "External service connections and API adapters."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Form"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineFormSpec"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "Form definitions with fields, validation, and layouts."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Data View"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineDataView"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "Read-only data projections and aggregations."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Feature"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineFeature"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "Feature flags and progressive rollout configurations."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs2("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx2("h3", {
                        className: "font-semibold",
                        children: "Test"
                      }),
                      /* @__PURE__ */ jsx2("code", {
                        className: "text-xs text-violet-400",
                        children: "defineTestSpec"
                      }),
                      /* @__PURE__ */ jsx2("p", {
                        className: "text-muted-foreground text-xs",
                        children: "Contract-driven test scenarios and fixtures."
                      })
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx2("h2", {
                className: "text-2xl font-bold",
                children: "6) Registering Contracts"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "Each contract type has a registry for lookup and validation."
              }),
              /* @__PURE__ */ jsx2(CodeBlock, {
                language: "typescript",
                filename: "src/contracts/registry.ts",
                code: `import {
  OperationSpecRegistry,
  installOp,
} from "@contractspec/lib.contracts-spec/operations";
import { EventRegistry } from "@contractspec/lib.contracts-spec";
import { CapabilityRegistry } from "@contractspec/lib.contracts-spec/capabilities";

// Import your contracts
import { CreateUserCommand, GetUserQuery } from "./user.operation";
import { UserCreatedEvent } from "./user.event";
import { UserManagementCapability } from "./user-management.capability";

// Create registries
export const operationRegistry = new OperationSpecRegistry();
export const eventRegistry = new EventRegistry();
export const capabilityRegistry = new CapabilityRegistry();

// Register operations with handlers
installOp(operationRegistry, CreateUserCommand, async (input) => {
  // Your implementation here
  return { id: "uuid", email: input.email };
});

installOp(operationRegistry, GetUserQuery, async (input) => {
  // Your implementation here
  return { id: input.id, email: "user@example.com", name: "User" };
});

// Register events and capabilities
eventRegistry.register(UserCreatedEvent);
capabilityRegistry.register(UserManagementCapability);`
              })
            ]
          }),
          /* @__PURE__ */ jsxs2("div", {
            className: "card-subtle space-y-3 p-6",
            children: [
              /* @__PURE__ */ jsx2("h3", {
                className: "text-lg font-semibold",
                children: "Contract Type Decision Guide"
              }),
              /* @__PURE__ */ jsxs2("table", {
                className: "w-full text-sm",
                children: [
                  /* @__PURE__ */ jsx2("thead", {
                    children: /* @__PURE__ */ jsxs2("tr", {
                      className: "border-b border-white/10",
                      children: [
                        /* @__PURE__ */ jsx2("th", {
                          className: "py-2 text-left",
                          children: "When you need..."
                        }),
                        /* @__PURE__ */ jsx2("th", {
                          className: "py-2 text-left",
                          children: "Use this contract"
                        })
                      ]
                    })
                  }),
                  /* @__PURE__ */ jsxs2("tbody", {
                    className: "text-muted-foreground",
                    children: [
                      /* @__PURE__ */ jsxs2("tr", {
                        className: "border-b border-white/5",
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "An API endpoint that changes data"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "defineCommand"
                            })
                          })
                        ]
                      }),
                      /* @__PURE__ */ jsxs2("tr", {
                        className: "border-b border-white/5",
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "An API endpoint that reads data"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "defineQuery"
                            })
                          })
                        ]
                      }),
                      /* @__PURE__ */ jsxs2("tr", {
                        className: "border-b border-white/5",
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "Async notification of something that happened"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "defineEvent"
                            })
                          })
                        ]
                      }),
                      /* @__PURE__ */ jsxs2("tr", {
                        className: "border-b border-white/5",
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "Group related specs under a feature"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "defineCapability"
                            })
                          })
                        ]
                      }),
                      /* @__PURE__ */ jsxs2("tr", {
                        className: "border-b border-white/5",
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "Define UI rendering specifications"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "definePresentation"
                            })
                          })
                        ]
                      }),
                      /* @__PURE__ */ jsxs2("tr", {
                        className: "border-b border-white/5",
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "Access control and rate limiting"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "definePolicy"
                            })
                          })
                        ]
                      }),
                      /* @__PURE__ */ jsxs2("tr", {
                        children: [
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: "Multi-step business processes"
                          }),
                          /* @__PURE__ */ jsx2("td", {
                            className: "py-2",
                            children: /* @__PURE__ */ jsx2("code", {
                              children: "defineWorkflow"
                            })
                          })
                        ]
                      })
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsx2(StudioPrompt, {
            title: "Need to decide which contract should change next?",
            body: "Studio uses evidence and focus constraints to generate decision briefs, patch intents, and execution-ready task packs."
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs2(Link2, {
            href: "/docs/guides/nextjs-one-endpoint",
            className: "btn-primary",
            children: [
              "Next: Add your first endpoint ",
              /* @__PURE__ */ jsx2(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx2(Link2, {
            href: "/docs/guides",
            className: "btn-ghost",
            children: "Back to guides"
          })
        ]
      })
    ]
  });
}
export {
  GuideContractTypesPage
};
