@contractspec/bundle.library 3.9.7 → 3.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/bundle.library",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
@@ -780,6 +780,18 @@
       "node": "./dist/node/components/docs/libraries/LibrariesAnalyticsPage.js",
       "default": "./dist/components/docs/libraries/LibrariesAnalyticsPage.js"
     },
+    "./components/docs/libraries/LibrariesApplicationShellPage": {
+      "types": "./dist/components/docs/libraries/LibrariesApplicationShellPage.d.ts",
+      "bun": "./dist/components/docs/libraries/LibrariesApplicationShellPage.js",
+      "node": "./dist/node/components/docs/libraries/LibrariesApplicationShellPage.js",
+      "default": "./dist/components/docs/libraries/LibrariesApplicationShellPage.js"
+    },
+    "./components/docs/libraries/LibrariesApplicationShellPage.content": {
+      "types": "./dist/components/docs/libraries/LibrariesApplicationShellPage.content.d.ts",
+      "bun": "./dist/components/docs/libraries/LibrariesApplicationShellPage.content.js",
+      "node": "./dist/node/components/docs/libraries/LibrariesApplicationShellPage.content.js",
+      "default": "./dist/components/docs/libraries/LibrariesApplicationShellPage.content.js"
+    },
     "./components/docs/libraries/LibrariesContentGenPage": {
       "types": "./dist/components/docs/libraries/LibrariesContentGenPage.d.ts",
       "bun": "./dist/components/docs/libraries/LibrariesContentGenPage.js",
@@ -1950,27 +1962,27 @@
     "react": "19.2.0"
   },
   "dependencies": {
-    "@contractspec/bundle.workspace": "4.5.5",
+    "@contractspec/bundle.workspace": "4.5.6",
     "@apollo/client": "^4.1.7",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@contractspec/example.data-grid-showcase": "3.8.19",
-    "@contractspec/lib.ai-providers": "3.7.18",
-    "@contractspec/lib.contracts-spec": "6.0.0",
-    "@contractspec/lib.contracts-library": "3.7.25",
-    "@contractspec/lib.content-gen": "3.7.25",
-    "@contractspec/lib.contracts-runtime-server-mcp": "3.8.5",
-    "@contractspec/lib.design-system": "4.2.0",
-    "@contractspec/lib.surface-runtime": "0.5.25",
-    "@contractspec/lib.provider-ranking": "0.7.18",
-    "@contractspec/lib.example-shared-ui": "7.0.4",
-    "@contractspec/lib.knowledge": "3.8.1",
-    "@contractspec/lib.logger": "3.7.18",
-    "@contractspec/lib.runtime-sandbox": "3.0.4",
+    "@contractspec/example.data-grid-showcase": "3.8.20",
+    "@contractspec/lib.ai-providers": "3.7.19",
+    "@contractspec/lib.contracts-spec": "6.1.0",
+    "@contractspec/lib.contracts-library": "3.7.26",
+    "@contractspec/lib.content-gen": "3.7.26",
+    "@contractspec/lib.contracts-runtime-server-mcp": "3.8.6",
+    "@contractspec/lib.design-system": "4.3.0",
+    "@contractspec/lib.surface-runtime": "0.5.26",
+    "@contractspec/lib.provider-ranking": "0.7.19",
+    "@contractspec/lib.example-shared-ui": "7.0.5",
+    "@contractspec/lib.knowledge": "3.8.2",
+    "@contractspec/lib.logger": "3.7.19",
+    "@contractspec/lib.runtime-sandbox": "3.0.5",
     "@contractspec/lib.schema": "3.7.14",
-    "@contractspec/lib.ui-kit-web": "3.13.0",
-    "@contractspec/lib.ui-link": "3.7.20",
-    "@contractspec/module.context-storage": "0.7.24",
-    "@contractspec/module.examples": "4.0.4",
+    "@contractspec/lib.ui-kit-web": "3.13.1",
+    "@contractspec/lib.ui-link": "3.7.21",
+    "@contractspec/module.context-storage": "0.7.25",
+    "@contractspec/module.examples": "4.0.5",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -1986,10 +1998,10 @@
     "posthog-react-native": "^4.42.3",
     "react-hook-form": "^7.72.1",
     "zod": "^4.3.5",
-    "@contractspec/lib.contracts-integrations": "3.8.17",
-    "@contractspec/lib.contracts-runtime-server-rest": "3.8.4",
-    "@contractspec/lib.contracts-runtime-server-graphql": "3.8.4",
-    "@contractspec/lib.contracts-runtime-client-react": "3.12.0"
+    "@contractspec/lib.contracts-integrations": "3.8.18",
+    "@contractspec/lib.contracts-runtime-server-rest": "3.8.5",
+    "@contractspec/lib.contracts-runtime-server-graphql": "3.8.5",
+    "@contractspec/lib.contracts-runtime-client-react": "3.13.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -2769,6 +2781,18 @@
         "node": "./dist/node/components/docs/libraries/LibrariesAnalyticsPage.js",
         "default": "./dist/components/docs/libraries/LibrariesAnalyticsPage.js"
       },
+      "./components/docs/libraries/LibrariesApplicationShellPage": {
+        "types": "./dist/components/docs/libraries/LibrariesApplicationShellPage.d.ts",
+        "bun": "./dist/components/docs/libraries/LibrariesApplicationShellPage.js",
+        "node": "./dist/node/components/docs/libraries/LibrariesApplicationShellPage.js",
+        "default": "./dist/components/docs/libraries/LibrariesApplicationShellPage.js"
+      },
+      "./components/docs/libraries/LibrariesApplicationShellPage.content": {
+        "types": "./dist/components/docs/libraries/LibrariesApplicationShellPage.content.d.ts",
+        "bun": "./dist/components/docs/libraries/LibrariesApplicationShellPage.content.js",
+        "node": "./dist/node/components/docs/libraries/LibrariesApplicationShellPage.content.js",
+        "default": "./dist/components/docs/libraries/LibrariesApplicationShellPage.content.js"
+      },
       "./components/docs/libraries/LibrariesContentGenPage": {
         "types": "./dist/components/docs/libraries/LibrariesContentGenPage.d.ts",
         "bun": "./dist/components/docs/libraries/LibrariesContentGenPage.js",

package/src/components/docs/docsManifest.ts

@@ -406,6 +406,16 @@ export const DOCS_PAGES: readonly DocsPageEntry[] = [
 		audience: 'oss',
 		ctaMode: 'oss-next',
 	},
+	{
+		href: '/docs/libraries/application-shell',
+		title: 'Application shell',
+		description:
+			'Implement reusable app navigation with desktop sidebars, topbar breadcrumbs, command search, mobile adapters, and PageOutline section navigation.',
+		section: 'build',
+		order: 72,
+		audience: 'oss',
+		ctaMode: 'oss-next',
+	},
 	{
 		href: '/docs/architecture',
 		title: 'Architecture',

package/src/components/docs/getting-started/DataViewTutorialPage.tsx

@@ -45,8 +45,44 @@ export const TransactionHistory = defineDataView({
       { 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: 'amount',
+        label: 'Amount',
+        dataPath: 'amount',
+        sortable: true,
+        format: { type: 'currency', currency: 'EUR', rounded: true },
+      },
+      {
+        key: 'renewalDate',
+        label: 'Renewal',
+        dataPath: 'renewalDate',
+        format: { type: 'date', dateStyle: 'medium' },
+      },
+      {
+        key: 'processingTime',
+        label: 'Processing time',
+        dataPath: 'processingMinutes',
+        format: { type: 'duration', unit: 'minute', display: 'digital' },
+      },
       { key: 'notes', label: 'Notes', dataPath: 'notes' },
     ],
+    filters: [
+      { key: 'status', label: 'Status', field: 'status', type: 'enum' },
+      {
+        key: 'amount',
+        label: 'Amount',
+        field: 'amount',
+        type: 'currency',
+        valueMode: 'range',
+      },
+      {
+        key: 'renewalDate',
+        label: 'Renewal',
+        field: 'renewalDate',
+        type: 'date',
+        valueMode: 'range',
+      },
+    ],
   },
 });`;
 
@@ -154,7 +190,10 @@ export function TransactionsPage() {
 						Column visibility, pinning, resizing, and row expansion stay
 						contract-driven
 					</li>
-					<li>Format rules (currency, dates, badges) applied consistently</li>
+					<li>
+						Typed format rules for numbers, percent values, currency, dates,
+						times, datetimes, and durations applied consistently
+					</li>
 					<li>Export to CSV/PDF using the same spec</li>
 					<li>A/B test different layouts without touching the backend</li>
 				</ul>

package/src/components/docs/libraries/LibrariesApplicationShellPage.content.ts

@@ -0,0 +1,170 @@
+export const shellUsageExample = `import {
+  AppShell,
+  PageOutline,
+  type AppShellNavigationSection,
+  type PageOutlineItem,
+} from "@contractspec/lib.design-system/shell";
+
+const navigation: AppShellNavigationSection[] = [
+  {
+    title: "Workspace",
+    items: [
+      { label: "Dashboard", href: "/dashboard" },
+      {
+        label: "Contracts",
+        href: "/contracts",
+        children: [
+          { label: "Operations", href: "/contracts/operations" },
+          { label: "Events", href: "/contracts/events" },
+        ],
+      },
+    ],
+  },
+];
+
+const outline: PageOutlineItem[] = [
+  {
+    id: "architecture",
+    label: "Architecture",
+    level: 1,
+    children: [
+      { id: "desktop", label: "Desktop shell", level: 2 },
+      { id: "mobile", label: "Mobile adaptation", level: 2 },
+    ],
+  },
+];
+
+export function WorkspacePage() {
+  return (
+    <AppShell
+      brand={{ label: "ContractSpec", href: "/dashboard" }}
+      navigation={navigation}
+      breadcrumbs={[
+        { label: "Workspace", href: "/dashboard" },
+        { label: "Contracts" },
+      ]}
+      command={{
+        placeholder: "Search contracts or run an action",
+        groups: [
+          {
+            title: "Quick actions",
+            actions: [
+              { id: "new-contract", label: "New contract" },
+              { id: "import", label: "Import existing app" },
+            ],
+          },
+        ],
+      }}
+      user={{
+        name: "Ada Lovelace",
+        email: "ada@example.com",
+        actions: [{ label: "Sign out", onSelect: () => signOut() }],
+      }}
+      pageOutline={<PageOutline items={outline} activeId="desktop" />}
+    >
+      <main>{/* route content */}</main>
+    </AppShell>
+  );
+}`;
+
+export const scratchPrompt = `You are implementing a modern application shell from scratch.
+
+Goal:
+Build a reusable application shell for a React/Next.js web app and an Expo React Native app. The shell must provide a desktop sidebar, desktop topbar, command search, breadcrumbs, nested navigation, user/auth actions, and an in-page section navigator called PageOutline.
+
+Use this architecture:
+- Keep route content independent from navigation chrome.
+- Create a typed navigation model with sections, items, active state, optional children, badges, icons, disabled items, and href/onSelect support.
+- Create a command model with search input, grouped suggestions, quick actions, keyboard shortcut labels, empty state, and loading state.
+- Create a breadcrumb model for the topbar.
+- Create a PageOutline model for right-side in-page navigation with exactly three supported levels. It should render anchors, support active section state, and degrade gracefully when no sections exist.
+- Expose the system from the design system or a dedicated shell module, not from a single app route.
+
+Desktop behavior:
+- Persistent left sidebar with app logo/title, command trigger, grouped navigation, nested submenus, and current user/auth/logout area.
+- Topbar with breadcrumbs and an optional command trigger.
+- Content area with optional right PageOutline.
+- Keep dimensions stable. Navigation labels must not resize layout on hover or active state.
+
+Mobile web behavior:
+- Use bottom navigation for the primary destinations.
+- Put deeper navigation, command search, auth actions, and secondary actions behind a menu or drawer.
+- Keep route content first and make the shell controls reachable without covering important content.
+
+Native behavior:
+- Add .native.tsx entrypoints for Expo/React Native.
+- Prefer bottom tabs for primary destinations and a menu/sheet for deeper navigation and account actions.
+- Keep the same typed navigation, command, breadcrumb, and PageOutline data contracts across web and native.
+
+Implementation constraints:
+- Reuse the existing design-system primitives, tokens, icons, and accessibility patterns.
+- Do not hardcode app-specific routes in the shell component.
+- Do not introduce a new dependency unless the repo already uses it for dialogs, menus, icons, or navigation.
+- Include tests for navigation rendering, nested items, command filtering, breadcrumbs, PageOutline level handling, active section state, and mobile/native adaptation contracts.
+- Update docs and exports so developers can import the shell from a stable public API.
+
+Deliverables:
+- Typed shell models.
+- Web shell components.
+- Native shell components or adapters.
+- PageOutline component with three-level support.
+- Usage example.
+- Focused tests and typecheck/build evidence.`;
+
+export const refactorPrompt = `You are refactoring an existing application to use the shared application shell system.
+
+Goal:
+Replace app-specific sidebar, topbar, breadcrumb, command palette, account menu, mobile navigation, and in-page table-of-contents code with the shared AppShell and PageOutline system.
+
+Start by auditing:
+- Current layout wrappers and route groups.
+- Sidebar, topbar, breadcrumb, command/search, auth menu, and mobile navigation implementations.
+- Any duplicated navigation arrays, route labels, icon maps, access-control checks, and active-state logic.
+- Any in-page summary/table-of-contents components that should become PageOutline data.
+- Web-only assumptions that would block Expo/React Native adaptation.
+
+Refactor plan:
+1. Define a single typed navigation source for primary nav, grouped sidebar nav, nested children, labels, icons, badges, disabled states, and permissions.
+2. Map existing command/search behavior into grouped command actions with search text and quick actions.
+3. Map existing route metadata into breadcrumbs.
+4. Convert page table-of-contents or section summary data into PageOutline items with a maximum of three levels.
+5. Wrap app routes in AppShell while keeping page content components route-local.
+6. Move primary mobile destinations into bottom navigation and deeper/account actions into a menu or drawer.
+7. Add or preserve .native.tsx adapters when the app targets Expo.
+
+Preserve behavior:
+- Existing route URLs and access rules.
+- Existing keyboard shortcuts where they are public behavior.
+- Existing analytics or telemetry events on navigation and command actions.
+- Existing auth/logout behavior.
+- Existing responsive breakpoints unless there is a documented design-system breakpoint to adopt.
+
+Quality gates:
+- Add regression tests around current visible navigation before removing old shell code when coverage is missing.
+- Test active nav state, nested nav expansion, command search/action invocation, breadcrumbs, auth menu, mobile bottom navigation, and PageOutline anchor behavior.
+- Run lint, typecheck, and the app's relevant test/build command.
+- Remove dead app-specific shell components only after the shared shell path is verified.
+
+Output:
+- List old shell files removed or simplified.
+- List new shared shell integration points.
+- Include before/after route coverage and verification commands.`;
+
+export const shellParts = [
+	{
+		title: 'Sidebar',
+		body: 'Desktop owns brand, command entry, grouped navigation, nested items, and account actions in one persistent scanning area.',
+	},
+	{
+		title: 'Topbar',
+		body: 'Breadcrumbs stay visible while the current route changes. The command trigger can live here when the sidebar is collapsed or hidden.',
+	},
+	{
+		title: 'PageOutline',
+		body: 'The right-side in-page navigator replaces ad hoc tables of contents. It supports three levels of section anchors and active state.',
+	},
+	{
+		title: 'Mobile adapters',
+		body: 'Small web and native surfaces move primary destinations to bottom navigation and reserve drawers or menus for deep navigation and account actions.',
+	},
+] as const;

package/src/components/docs/libraries/LibrariesApplicationShellPage.tsx

@@ -0,0 +1,112 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
+import { Box, HStack, VStack } from '@contractspec/lib.design-system/layout';
+import {
+	Code,
+	H1,
+	H2,
+	H3,
+	P,
+	Text,
+} from '@contractspec/lib.design-system/typography';
+import Link from '@contractspec/lib.ui-link';
+import { ChevronRight } from 'lucide-react';
+import {
+	refactorPrompt,
+	scratchPrompt,
+	shellParts,
+	shellUsageExample,
+} from './LibrariesApplicationShellPage.content';
+
+export function LibrariesApplicationShellPage() {
+	return (
+		<VStack className="space-y-8">
+			<VStack className="space-y-4">
+				<H1 className="font-bold text-4xl">Application shell</H1>
+				<P className="text-lg text-muted-foreground">
+					A reusable navigation system for product apps: desktop sidebar, topbar
+					breadcrumbs, command search, account actions, mobile adapters, and a
+					Notion-style <Code>PageOutline</Code> for page sections.
+				</P>
+			</VStack>
+
+			<VStack className="space-y-4">
+				<H2 className="font-bold text-2xl">Installation</H2>
+				<InstallCommand package="@contractspec/lib.design-system" />
+			</VStack>
+
+			<VStack className="space-y-4">
+				<H2 className="font-bold text-2xl">What It Standardizes</H2>
+				<Box className="grid gap-4 md:grid-cols-2">
+					{shellParts.map((part) => (
+						<Box key={part.title} className="card-subtle p-4">
+							<H3 className="font-semibold">{part.title}</H3>
+							<P className="mt-2 text-muted-foreground text-sm leading-7">
+								{part.body}
+							</P>
+						</Box>
+					))}
+				</Box>
+			</VStack>
+
+			<VStack className="space-y-4">
+				<H2 className="font-bold text-2xl">Import Surface</H2>
+				<P className="text-muted-foreground">
+					The shell is exposed as a focused design-system subpath so apps can
+					adopt navigation chrome without pulling unrelated documentation or
+					marketing helpers.
+				</P>
+				<CodeBlock
+					language="tsx"
+					filename="app-shell-example.tsx"
+					code={shellUsageExample}
+				/>
+			</VStack>
+
+			<VStack className="space-y-4">
+				<H2 className="font-bold text-2xl">AI Prompt: Build From Scratch</H2>
+				<P className="text-muted-foreground">
+					Use this prompt when the app does not already have a shell or when the
+					design-system package needs the reusable primitive first.
+				</P>
+				<CodeBlock
+					language="markdown"
+					filename="implement-application-shell.md"
+					code={scratchPrompt}
+				/>
+			</VStack>
+
+			<VStack className="space-y-4">
+				<H2 className="font-bold text-2xl">AI Prompt: Refactor An App</H2>
+				<P className="text-muted-foreground">
+					Use this prompt when an app already has custom navigation chrome and
+					needs to migrate without breaking route behavior.
+				</P>
+				<CodeBlock
+					language="markdown"
+					filename="refactor-to-application-shell.md"
+					code={refactorPrompt}
+				/>
+			</VStack>
+
+			<VStack className="card-subtle space-y-3 p-6">
+				<H2 className="font-bold text-2xl">Naming</H2>
+				<P className="text-muted-foreground">
+					Use <Code>AppShell</Code> for the whole navigation frame and{' '}
+					<Code>PageOutline</Code> for the in-page navigation helper. The latter
+					is the product-app equivalent of a table of contents, but it is
+					intentionally named for live page sections rather than static
+					documentation.
+				</P>
+			</VStack>
+
+			<HStack className="flex flex-wrap items-center gap-3 pt-2">
+				<Link href="/docs/libraries/cross-platform-ui" className="btn-ghost">
+					<Text>Cross-platform UI</Text>
+				</Link>
+				<Link href="/docs/libraries/design-system" className="btn-primary">
+					<Text>Design System</Text> <ChevronRight size={16} />
+				</Link>
+			</HStack>
+		</VStack>
+	);
+}

package/src/components/docs/libraries/LibrariesDataViewsPage.tsx

@@ -62,7 +62,9 @@ export function UserPage() {
 						<code>filters</code>: Current filter state object.
 					</li>
 					<li>
-						<code>onFilterChange</code>: Callback when filters change.
+						<code>onFilterChange</code>: Callback when typed filters change.
+						Renderers emit <code>DataViewFilterValue</code> objects for numeric,
+						percent, currency, temporal, duration, and boolean filters.
 					</li>
 					<li>
 						<code>pagination</code>: Object with <code>page</code>,{' '}
@@ -71,6 +73,18 @@ export function UserPage() {
 					<li>
 						<code>onPageChange</code>: Callback when page changes.
 					</li>
+					<li>
+						<code>viewMode</code> / <code>defaultViewMode</code>: Controlled
+						or initial collection mode for specs that allow <code>list</code>,{' '}
+						<code>grid</code>, or <code>table</code> projections through{' '}
+						<code>view.collection.viewModes</code>.
+					</li>
+					<li>
+						<code>density</code> / <code>defaultDensity</code>: Controlled or
+						initial density for collection renderers, seeded by{' '}
+						<code>view.collection.density</code> and table{' '}
+						<code>view.density</code>.
+					</li>
 				</ul>
 			</div>
 
@@ -86,12 +100,19 @@ export function UserPage() {
 					code={`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
 
 const generator = new DataViewQueryGenerator(MyUserList);
-const query = generator.generate({
+const params = {
   pagination: { page: 1, pageSize: 20 },
-  filters: { role: 'admin' }
-});
+  filters: {
+    role: { kind: 'single', value: 'admin' },
+    revenue: { kind: 'range', from: 1000, to: 5000 },
+    lastSeenAt: { kind: 'single', value: '2026-04-28T08:30:00Z' }
+  }
+};
+
+const errors = generator.validateParams(params);
+const query = generator.generate(params);
 
-// query.input contains { skip: 0, take: 20, role: 'admin' }`}
+// query.input contains skip/take plus the typed filter payloads.`}
 				/>
 			</div>
 

package/src/components/docs/libraries/LibrariesDesignSystemPage.tsx

@@ -187,6 +187,7 @@ export function LibrariesDesignSystemPage() {
 					<div className="card-subtle p-4">
 						<h3 className="mb-2 font-semibold">Organisms</h3>
 						<ul className="space-y-1 text-muted-foreground text-sm">
+							<li>AppShell, PageOutline</li>
 							<li>AppLayout, AppHeader, AppSidebar</li>
 							<li>MarketingLayout, HeroSection</li>
 							<li>ListCardPage, ListTablePage</li>
@@ -224,6 +225,14 @@ export function LibrariesDesignSystemPage() {
 				<h2 className="font-bold text-2xl">Where this layer fits</h2>
 				<p className="text-muted-foreground">
 					Read{' '}
+					<Link
+						href="/docs/libraries/application-shell"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Application shell
+					</Link>{' '}
+					for the shared sidebar, topbar, command search, mobile navigation, and{' '}
+					<code>PageOutline</code> pattern. Read{' '}
 					<Link
 						href="/docs/libraries/cross-platform-ui"
 						className="text-[color:var(--rust)] underline underline-offset-4"

package/src/components/docs/libraries/LibrariesOverviewPage.tsx

@@ -48,6 +48,12 @@ const libraryGroups = [
 					'Build higher-level product surfaces and documented marketing/docs primitives on top of the web and native UI packages.',
 				href: '/docs/libraries/design-system',
 			},
+			{
+				title: 'Application shell',
+				description:
+					'Adopt the shared sidebar, topbar, command search, mobile navigation, and PageOutline patterns for product apps.',
+				href: '/docs/libraries/application-shell',
+			},
 			{
 				title: 'Cross-platform UI',
 				description:

package/src/components/docs/libraries/index.ts

@@ -1,6 +1,7 @@
 export { LibrariesAccessibilityPage } from './LibrariesAccessibilityPage';
 export { LibrariesAiAgentPage } from './LibrariesAiAgentPage';
 export { LibrariesAnalyticsPage } from './LibrariesAnalyticsPage';
+export { LibrariesApplicationShellPage } from './LibrariesApplicationShellPage';
 export { LibrariesContentGenPage } from './LibrariesContentGenPage';
 export { LibrariesContractsPage } from './LibrariesContractsPage';
 export { LibrariesCostTrackingPage } from './LibrariesCostTrackingPage';

package/src/components/docs/specs/SpecsDataViewsPage.tsx

@@ -45,8 +45,44 @@ export const DataGridShowcaseDataView = defineDataView({
       { 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: 'arr',
+        label: 'ARR',
+        dataPath: 'arr',
+        sortable: true,
+        format: { type: 'currency', currency: 'USD', rounded: true },
+      },
+      {
+        key: 'healthScore',
+        label: 'Health score',
+        dataPath: 'healthScore',
+        format: { type: 'percent', valueScale: 'fraction', maximumFractionDigits: 1 },
+      },
+      {
+        key: 'lastActivityAt',
+        label: 'Last activity',
+        dataPath: 'lastActivityAt',
+        format: { type: 'datetime', dateStyle: 'medium', timeStyle: 'short' },
+      },
       { key: 'notes', label: 'Notes', dataPath: 'notes' },
     ],
+    filters: [
+      { key: 'status', label: 'Status', field: 'status', type: 'enum' },
+      {
+        key: 'arr',
+        label: 'ARR',
+        field: 'arr',
+        type: 'currency',
+        valueMode: 'range',
+      },
+      {
+        key: 'lastActivityAt',
+        label: 'Last activity',
+        field: 'lastActivityAt',
+        type: 'datetime',
+        valueMode: 'range',
+      },
+    ],
   },
 });`;
 
@@ -84,9 +120,9 @@ export function SpecsDataViewsPage() {
 						<h3 className="font-semibold text-lg">Filtering</h3>
 						<p className="text-muted-foreground">
 							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").
+							Filters are typed as search, enum, number, percent, currency,
+							date, time, datetime, duration, or boolean so renderers and query
+							helpers can validate values before execution.
 						</p>
 					</div>
 					<div>