// @bun
// src/components/docs/specs/SpecsDataViewsPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function SpecsDataViewsPage() {
  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: "DataViews"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "A ",
              /* @__PURE__ */ jsx("strong", {
                children: "DataViewSpec"
              }),
              " describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Core concepts"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-semibold",
                    children: "Data sources"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-semibold",
                    children: "Filtering"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: `Define filters that users can apply to narrow down results. Filters can be simple (e.g., "status equals 'active'") or complex (e.g., "created within the last 30 days AND assigned to current user").`
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-semibold",
                    children: "Sorting"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-semibold",
                    children: "Pagination"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-semibold",
                    children: "Aggregations"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground",
                    children: "Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example DataViewSpec"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Here's a DataView for listing orders 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 { defineDataView } from '@contractspec/lib.contracts-spec';
import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';

export const OrderList = defineDataView({
  meta: {
    key: 'order.list',
    version: '1.0.0',
    description: 'List of recent orders',
  },
  source: {
    type: 'database',
    table: 'orders',
  },
  fields: [
    { name: 'orderId', type: 'uuid', sortable: true },
    { name: 'customerName', type: 'string', searchable: true },
    { name: 'total', type: 'number', sortable: true },
    { 
      name: 'status', 
      type: 'enum', 
      values: ['pending', 'processing', 'shipped'],
      filterable: true 
    },
    { 
      name: 'createdAt', 
      type: 'timestamp', 
      sortable: true, 
      defaultSort: 'desc' 
    },
  ],
  filters: [
    { name: 'status', field: 'status', operator: 'in' },
    { name: 'dateRange', field: 'createdAt', operator: 'between' },
    { name: 'minTotal', field: 'total', operator: 'gte' },
  ],
  pagination: {
    type: 'cursor',
    defaultPageSize: 50,
    maxPageSize: 200,
  },
});`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Policy integration"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "DataViews automatically enforce",
              " ",
              /* @__PURE__ */ jsx(Link, {
                href: "/docs/specs/policy",
                className: "text-violet-400 hover:text-violet-300",
                children: "PolicySpecs"
              }),
              ". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."
            ]
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Served outputs"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "From a DataViewSpec, ContractSpec serves:"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Database queries"
                  }),
                  " \u2013 Optimized SQL or NoSQL queries executed at runtime"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "API endpoints"
                  }),
                  " \u2013 RESTful or GraphQL endpoints for fetching data"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "UI components"
                  }),
                  " \u2013 List views, tables, cards, and detail views"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Search interfaces"
                  }),
                  " \u2013 Full-text search with autocomplete"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Export functions"
                  }),
                  " \u2013 CSV, JSON, or Excel exports"
                ]
              })
            ]
          })
        ]
      }),
      /* @__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: "Only expose fields that users actually need\u2014this improves performance and security."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Use appropriate indexes for sortable and filterable fields."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Set reasonable pagination limits to prevent performance issues."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Use aggregations sparingly\u2014they can be expensive on large datasets."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Test DataViews with realistic data volumes to ensure they perform well."
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/specs/capabilities",
            className: "btn-ghost",
            children: "Previous: Capabilities"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/specs/workflows",
            className: "btn-primary",
            children: [
              "Next: Workflows ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  SpecsDataViewsPage
};
