@contractspec/bundle.library 3.9.6 → 3.9.8

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>

package/src/libs/posthog/client.ts

@@ -29,25 +29,26 @@ const shouldCaptureAnalytics = () => {
 	return dnt !== '1' && dnt !== 'yes';
 };
 
+const isDevelopment = () => process.env.NODE_ENV === 'development';
+
 export function initPosthog() {
 	if (typeof window === 'undefined') return;
+	if (isDevelopment()) return;
 	if (!posthogKey) {
 		console.warn('[PostHog] NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY is missing');
 		return;
 	}
 	if (!shouldCaptureAnalytics()) return;
 
-	const isDev = process.env.NODE_ENV === 'development';
-
 	posthog.init(posthogKey, {
 		api_host: posthogHost,
-		autocapture: !isDev,
-		capture_dead_clicks: !isDev,
-		capture_performance: !isDev,
-		capture_pageview: !isDev,
-		capture_heatmaps: !isDev,
-		capture_exceptions: !isDev,
-		debug: process.env.NODE_ENV === 'development',
+		autocapture: true,
+		capture_dead_clicks: true,
+		capture_performance: true,
+		capture_pageview: true,
+		capture_heatmaps: true,
+		capture_exceptions: true,
+		debug: false,
 	});
 }
 
@@ -56,6 +57,7 @@ export function captureAnalyticsEvent(
 	properties?: Record<string, unknown>
 ) {
 	if (!posthogKey) return;
+	if (isDevelopment()) return;
 	if (!shouldCaptureAnalytics()) return;
 	try {
 		const globalPosthog = (globalThis as { posthog?: PostHogInstance }).posthog;