import F from"@contractspec/lib.ui-link";import{ChevronRight as G}from"lucide-react";import{jsx as z,jsxs as B}from"react/jsx-runtime";var H=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
import { ListDataGridShowcaseRowsQuery } from '@contractspec/example.data-grid-showcase/contracts/data-grid-showcase.operation';

export const DataGridShowcaseDataView = defineDataView({
  meta: {
    key: 'examples.data-grid-showcase.table',
    version: '1.0.0',
    entity: 'account',
    title: 'Data Grid Showcase Table',
    description:
      'Declarative DataViewSpec for the ContractSpec table showcase.',
    domain: 'examples',
    owners: ['@platform.core'],
    tags: ['examples', 'table', 'data-grid'],
    stability: 'experimental',
  },
  source: {
    primary: {
      key: ListDataGridShowcaseRowsQuery.meta.key,
      version: ListDataGridShowcaseRowsQuery.meta.version,
    },
  },
  view: {
    kind: 'table',
    executionMode: 'client',
    selection: 'multiple',
    columnVisibility: true,
    columnResizing: true,
    columnPinning: true,
    rowExpansion: {
      fields: ['notes', 'renewalDate', 'lastActivityAt'],
    },
    initialState: {
      pageSize: 4,
      hiddenColumns: ['notes'],
      pinnedColumns: {
        left: ['account'],
      },
      sorting: [{ field: 'arr', desc: true }],
    },
    fields: [
      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
      { key: 'notes', label: 'Notes', dataPath: 'notes' },
    ],
  },
});`;function N(){return B("div",{className:"space-y-8",children:[B("div",{className:"space-y-4",children:[z("h1",{className:"font-bold text-4xl",children:"DataViews"}),B("p",{className:"text-muted-foreground",children:["A ",z("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."]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Core concepts"}),B("div",{className:"space-y-3",children:[B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Data sources"}),z("p",{className:"text-muted-foreground",children:"A DataView connects to one or more data sources—databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Filtering"}),z("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").`})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Sorting"}),z("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."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Pagination"}),z("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."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Aggregations"}),z("p",{className:"text-muted-foreground",children:"Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."})]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),B("p",{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",z(F,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),":"]}),z("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:z("pre",{children:H})}),z("p",{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Policy integration"}),B("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",z(F,{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."]}),z("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—no need to write separate queries for different roles."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Served outputs"}),z("p",{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[B("li",{children:[z("strong",{children:"Database queries"})," – Optimized SQL or NoSQL queries executed at runtime"]}),B("li",{children:[z("strong",{children:"API endpoints"})," – RESTful or GraphQL endpoints for fetching data"]}),B("li",{children:[z("strong",{children:"UI components"})," – List views, tables, cards, and detail views"]}),B("li",{children:[z("strong",{children:"Search interfaces"})," – Full-text search with autocomplete"]}),B("li",{children:[z("strong",{children:"Export functions"})," – CSV, JSON, or Excel exports"]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Best practices"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[z("li",{children:"Only expose fields that users actually need—this improves performance and security."}),z("li",{children:"Use appropriate indexes for sortable and filterable fields."}),z("li",{children:"Set reasonable pagination limits to prevent performance issues."}),z("li",{children:"Use aggregations sparingly—they can be expensive on large datasets."}),z("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),B("div",{className:"flex items-center gap-4 pt-4",children:[z(F,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),B(F,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",z(G,{size:16})]})]})]})}export{N as SpecsDataViewsPage};
