@contractspec/bundle.library 3.8.12 → 3.9.2

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

@@ -2,6 +2,96 @@ import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
+const DESIGN_SYSTEM_TABLE_EXAMPLE = `import { Button, DataTable } from '@contractspec/lib.design-system';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+
+import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
+import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
+import {
+  ExpandedRowContent,
+  ShowcaseToolbar,
+} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';
+
+export function AccountHealthTable() {
+  const columns = useShowcaseColumns();
+
+  const controller = useContractTable({
+    data: SHOWCASE_ROWS,
+    columns,
+    selectionMode: 'multiple',
+    initialState: {
+      sorting: [{ id: 'arr', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 4 },
+      columnVisibility: { notes: false },
+      columnPinning: { left: ['account'], right: [] },
+    },
+    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
+    getCanExpand: () => true,
+  });
+
+  return (
+    <DataTable
+      controller={controller}
+      title="Account health"
+      description="Composed table surface for the canonical account grid."
+      headerActions={<Button variant="outline">Reset</Button>}
+      toolbar={
+        <ShowcaseToolbar
+          controller={controller}
+          label="Client mode"
+          primaryColumnId="account"
+          toggleColumnId="notes"
+          pinColumnId="owner"
+          sortColumnIds={['arr', 'renewalDate']}
+        />
+      }
+      loading={false}
+      emptyState={<div>No rows available.</div>}
+      footer={\`Page \${controller.pageIndex + 1} of \${controller.pageCount}\`}
+    />
+  );
+}`;
+
+const THEME_TAILWIND_EXAMPLE = `import {
+  DesignSystemThemeProvider,
+  resolveThemeModeTokens,
+  themeSpecToCssVariables,
+  themeSpecToTailwindCss,
+  themeSpecToTailwindPreset,
+} from '@contractspec/lib.design-system';
+
+const tokens = resolveThemeModeTokens(themeSpec, 'light', {
+  targets: ['tenant:acme'],
+});
+
+export default themeSpecToTailwindPreset(tokens);
+
+const css = themeSpecToTailwindCss(
+  themeSpecToCssVariables(themeSpec, { targets: ['tenant:acme'] }),
+  { includeCustomVariant: true }
+);
+
+export function TenantSurface({ children }: { children: React.ReactNode }) {
+  return (
+    <DesignSystemThemeProvider
+      theme={themeSpec}
+      targets={['tenant:acme']}
+      mode="dark"
+      applyCssVariables
+    >
+      {children}
+    </DesignSystemThemeProvider>
+  );
+}`;
+
+const FOCUSED_SUBPATHS_EXAMPLE = `import { themeSpecToTailwindPreset } from '@contractspec/lib.design-system/theme';
+import { Select } from '@contractspec/lib.design-system/controls';
+import { FormDialog } from '@contractspec/lib.design-system/forms';
+import { HStack } from '@contractspec/lib.design-system/layout';
+
+// Root imports remain supported:
+import { Button, DataTable } from '@contractspec/lib.design-system';`;
+
 export function LibrariesDesignSystemPage() {
 	return (
 		<div className="space-y-8">
@@ -44,6 +134,10 @@ export function LibrariesDesignSystemPage() {
 						<strong>Platform Utilities</strong>: Hooks for responsive and
 						adaptive design
 					</li>
+					<li>
+						<strong>Theme Bridge</strong>: ThemeSpec to Tailwind variables,
+						presets, CSS text, and runtime light/dark mode
+					</li>
 					<li>
 						<strong>Legal Templates</strong>: Compliant templates for Terms,
 						Privacy, and GDPR
@@ -52,65 +146,39 @@ export function LibrariesDesignSystemPage() {
 			</div>
 
 			<div className="space-y-4">
-				<h2 className="font-bold text-2xl">Example: App Layout</h2>
-				<CodeBlock
-					language="tsx"
-					code={`import { AppLayout } from '@contractspec/lib.design-system';
-import { AppSidebar } from '@contractspec/lib.design-system';
-
-export function Layout({ children }) {
-  return (
-    <AppLayout sidebar={<AppSidebar />}>
-      {children}
-    </AppLayout>
-  );
-}`}
-				/>
+				<h2 className="font-bold text-2xl">ThemeSpec to Tailwind</h2>
+				<p className="text-muted-foreground">
+					The theme bridge keeps <code>ThemeSpec</code> as the source of truth
+					and exposes no-generation Tailwind helpers, optional CSS text
+					serialization, runtime CSS variables, light/dark modes, and OKLCH
+					color pass-through.
+				</p>
+				<CodeBlock language="tsx" code={THEME_TAILWIND_EXAMPLE} />
 			</div>
 
 			<div className="space-y-4">
-				<h2 className="font-bold text-2xl">Example: Zod Form</h2>
-				<CodeBlock
-					language="tsx"
-					code={`import { ZodForm } from '@contractspec/lib.design-system';
-import * as z from "zod";
-
-const schema = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
-});
-
-export function SignupForm() {
-  return (
-    <ZodForm
-      schema={schema}
-      onSubmit={(data) => console.log(data)}
-      submitLabel="Submit"
-    />
-  );
-}`}
-				/>
+				<h2 className="font-bold text-2xl">Focused import surfaces</h2>
+				<p className="text-muted-foreground">
+					New code can use focused subpaths for theme, controls, forms, and
+					layout while existing root imports remain compatible.
+				</p>
+				<CodeBlock language="tsx" code={FOCUSED_SUBPATHS_EXAMPLE} />
 			</div>
 
 			<div className="space-y-4">
-				<h2 className="font-bold text-2xl">
-					Example: Code Block with Package Manager Tabs
-				</h2>
-				<CodeBlock
-					language="tsx"
-					code={`import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
-
-// For installation commands with package manager tabs
-<InstallCommand package="my-package" />
-<InstallCommand package={["react", "react-dom"]} dev />
-
-// For code examples with syntax highlighting
-<CodeBlock
-  language="typescript"
-  code={\`const hello = "world";\`}
-  filename="example.ts"
-/>`}
-				/>
+				<h2 className="font-bold text-2xl">Data table example</h2>
+				<p className="text-muted-foreground">
+					This is the composed lane from the canonical{' '}
+					<Link
+						href="/docs/examples/data-grid-showcase"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Data Grid Showcase
+					</Link>
+					. The design-system wrapper owns title, description, header actions,
+					and the opinionated card shell on top of the raw web primitive.
+				</p>
+				<CodeBlock language="tsx" code={DESIGN_SYSTEM_TABLE_EXAMPLE} />
 			</div>
 
 			<div className="space-y-4">
@@ -127,6 +195,8 @@ export function SignupForm() {
 					<div className="card-subtle p-4">
 						<h3 className="mb-2 font-semibold">Data & Forms</h3>
 						<ul className="space-y-1 text-muted-foreground text-sm">
+							<li>DataTable</li>
+							<li>DataViewTable</li>
 							<li>DataViewRenderer</li>
 							<li>ZodForm</li>
 							<li>FormLayout, FormDialog</li>
@@ -150,9 +220,24 @@ export function SignupForm() {
 				</div>
 			</div>
 
+			<div className="card-subtle space-y-3 p-6">
+				<h2 className="font-bold text-2xl">Where this layer fits</h2>
+				<p className="text-muted-foreground">
+					Read{' '}
+					<Link
+						href="/docs/libraries/cross-platform-ui"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Cross-platform UI
+					</Link>{' '}
+					for the package split between shared runtime controllers, leaf
+					platform primitives, and this composed design-system layer.
+				</p>
+			</div>
+
 			<div className="flex items-center gap-4 pt-4">
-				<Link href="/docs/libraries/ui-kit" className="btn-ghost">
-					Previous: UI Kit
+				<Link href="/docs/libraries/ui-kit-web" className="btn-ghost">
+					Previous: UI Kit Web
 				</Link>
 				<Link href="/docs/libraries/accessibility" className="btn-primary">
 					Next: Accessibility <ChevronRight size={16} />

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

@@ -36,12 +36,24 @@ const libraryGroups = [
 					'Render shared surfaces across web and React Native without forking the contract layer.',
 				href: '/docs/libraries/ui-kit',
 			},
+			{
+				title: '@contractspec/lib.ui-kit-web',
+				description:
+					'Use the raw web primitive layer directly when you want the browser table, accessibility, and interaction model without the design-system shell.',
+				href: '/docs/libraries/ui-kit-web',
+			},
 			{
 				title: '@contractspec/lib.design-system',
 				description:
-					'Build higher-level product surfaces and documented marketing/docs primitives on top of the UI kit.',
+					'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: 'Cross-platform UI',
+				description:
+					'See how the presentation runtimes, ui-kit-web, ui-kit, and design-system stay compatible across React and React Native.',
+				href: '/docs/libraries/cross-platform-ui',
+			},
 			{
 				title: '@contractspec/lib.data-views',
 				description:

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

@@ -136,6 +136,21 @@ export function OnboardingPage() {
 				</ol>
 			</div>
 
+			<div className="card-subtle space-y-3 p-6">
+				<h2 className="font-bold text-2xl">Related reading</h2>
+				<p className="text-muted-foreground">
+					For the full React and React Native layering story across runtime,
+					primitives, and composed components, read{' '}
+					<Link
+						href="/docs/libraries/cross-platform-ui"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Cross-platform UI
+					</Link>
+					.
+				</p>
+			</div>
+
 			<div className="flex items-center gap-4 pt-4">
 				<Link href="/docs/libraries/data-backend" className="btn-ghost">
 					Previous: Data & Backend

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

@@ -2,6 +2,52 @@ import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
+const NATIVE_TABLE_EXAMPLE = `import { DataTable } from '@contractspec/lib.ui-kit/ui/data-table';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+
+import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
+import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
+import {
+  ExpandedRowContent,
+  ShowcaseToolbar,
+} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';
+
+export function NativeAccountGrid() {
+  const columns = useShowcaseColumns();
+
+  const controller = useContractTable({
+    data: SHOWCASE_ROWS,
+    columns,
+    selectionMode: 'single',
+    initialState: {
+      sorting: [{ id: 'arr', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 4 },
+      columnVisibility: { notes: false },
+      columnPinning: { left: ['account'], right: [] },
+    },
+    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
+    getCanExpand: () => true,
+  });
+
+  return (
+    <DataTable
+      controller={controller}
+      toolbar={
+        <ShowcaseToolbar
+          controller={controller}
+          label="Native primitive"
+          primaryColumnId="account"
+          toggleColumnId="notes"
+          pinColumnId="owner"
+          sortColumnIds={['arr', 'renewalDate']}
+        />
+      }
+      loading={false}
+      footer={\`Rows \${controller.rows.length}\`}
+    />
+  );
+}`;
+
 export function LibrariesUIKitPage() {
 	return (
 		<div className="space-y-8">
@@ -41,29 +87,21 @@ export function LibrariesUIKitPage() {
 			</div>
 
 			<div className="space-y-4">
-				<h2 className="font-bold text-2xl">Example Usage</h2>
-				<CodeBlock
-					language="tsx"
-					code={`import { Button } from '@contractspec/lib.ui-kit/ui/button';
-import { Text } from '@contractspec/lib.ui-kit/ui/text';
-import { Card, CardHeader, CardTitle, CardContent } from '@contractspec/lib.ui-kit/ui/card';
-
-export function MyComponent() {
-  return (
-    <Card className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle>Welcome</CardTitle>
-      </CardHeader>
-      <CardContent className="gap-4">
-        <Text>This works on Web and Native.</Text>
-        <Button onPress={() => console.log('Clicked!')}>
-          Click me
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}`}
-				/>
+				<h2 className="font-bold text-2xl">Data table example</h2>
+				<p className="text-muted-foreground">
+					The canonical{' '}
+					<Link
+						href="/docs/examples/data-grid-showcase"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Data Grid Showcase
+					</Link>{' '}
+					uses <code>@contractspec/lib.ui-kit/ui/data-table</code> as the
+					native-first primitive lane. It shares the same controller model as
+					the web renderer while keeping the React Native / Expo surface
+					explicit.
+				</p>
+				<CodeBlock language="tsx" code={NATIVE_TABLE_EXAMPLE} />
 			</div>
 
 			<div className="space-y-4">
@@ -100,12 +138,27 @@ export function MyComponent() {
 				</div>
 			</div>
 
+			<div className="card-subtle space-y-3 p-6">
+				<h2 className="font-bold text-2xl">Where this layer fits</h2>
+				<p className="text-muted-foreground">
+					Read{' '}
+					<Link
+						href="/docs/libraries/cross-platform-ui"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Cross-platform UI
+					</Link>{' '}
+					for the full React and React Native compatibility model around this
+					native-first primitive lane.
+				</p>
+			</div>
+
 			<div className="flex items-center gap-4 pt-4">
 				<Link href="/docs/libraries/schema" className="btn-ghost">
 					Previous: Schema
 				</Link>
-				<Link href="/docs/libraries/design-system" className="btn-primary">
-					Next: Design System <ChevronRight size={16} />
+				<Link href="/docs/libraries/ui-kit-web" className="btn-primary">
+					Next: UI Kit Web <ChevronRight size={16} />
 				</Link>
 			</div>
 		</div>

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

@@ -0,0 +1,129 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
+import Link from '@contractspec/lib.ui-link';
+import { ChevronRight } from 'lucide-react';
+
+const WEB_PRIMITIVE_EXAMPLE = `import { DataTable } from '@contractspec/lib.ui-kit-web/ui/data-table';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+
+import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
+import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
+import {
+  ExpandedRowContent,
+  ShowcaseToolbar,
+} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';
+
+export function WebAccountGrid() {
+  const columns = useShowcaseColumns();
+
+  const controller = useContractTable({
+    data: SHOWCASE_ROWS,
+    columns,
+    selectionMode: 'single',
+    initialState: {
+      sorting: [{ id: 'lastActivityAt', desc: true }],
+      pagination: { pageIndex: 0, pageSize: 4 },
+      columnVisibility: { notes: false },
+      columnPinning: { left: ['account'], right: [] },
+    },
+    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
+    getCanExpand: () => true,
+  });
+
+  return (
+    <DataTable
+      controller={controller}
+      toolbar={
+        <ShowcaseToolbar
+          controller={controller}
+          label="Web primitive"
+          primaryColumnId="account"
+          toggleColumnId="notes"
+          pinColumnId="owner"
+          sortColumnIds={['arr', 'renewalDate']}
+        />
+      }
+      loading={false}
+      emptyState={<div>No rows available.</div>}
+      footer={\`Rows \${controller.totalItems}\`}
+    />
+  );
+}`;
+
+export function LibrariesUIKitWebPage() {
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">@contractspec/lib.ui-kit-web</h1>
+				<p className="text-muted-foreground">
+					Web-first React and Next primitives for ContractSpec. The canonical
+					data-table example uses this package to render the raw browser table
+					layer directly, without the design-system shell on top.
+				</p>
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.ui-kit-web" />
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Data table example</h2>
+				<p className="text-muted-foreground">
+					This is the raw browser lane from the canonical{' '}
+					<Link
+						href="/docs/examples/data-grid-showcase"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Data Grid Showcase
+					</Link>
+					. It demonstrates the primitive renderer with sorting, pagination,
+					single selection, column visibility, column resizing, left/right
+					pinning, row expansion, loading, and empty-state slots.
+				</p>
+				<CodeBlock
+					language="tsx"
+					filename="web-account-grid.tsx"
+					code={WEB_PRIMITIVE_EXAMPLE}
+				/>
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">What this layer owns</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>The raw table renderer and browser interaction model.</li>
+					<li>
+						Pagination, column visibility menus, pin menus, resize handles, and
+						empty/loading states.
+					</li>
+					<li>
+						Accessibility helpers and other web-specific primitives that stay
+						outside the native-first package.
+					</li>
+				</ul>
+			</div>
+
+			<div className="card-subtle space-y-3 p-6">
+				<h2 className="font-bold text-2xl">Where this layer fits</h2>
+				<p className="text-muted-foreground">
+					Read{' '}
+					<Link
+						href="/docs/libraries/cross-platform-ui"
+						className="text-[color:var(--rust)] underline underline-offset-4"
+					>
+						Cross-platform UI
+					</Link>{' '}
+					for the shared runtime story behind the web and native render lanes.
+				</p>
+			</div>
+
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries/ui-kit" className="btn-ghost">
+					Previous: UI Kit
+				</Link>
+				<Link href="/docs/libraries/design-system" className="btn-primary">
+					Next: Design System <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
+}

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

@@ -4,6 +4,7 @@ export { LibrariesAnalyticsPage } from './LibrariesAnalyticsPage';
 export { LibrariesContentGenPage } from './LibrariesContentGenPage';
 export { LibrariesContractsPage } from './LibrariesContractsPage';
 export { LibrariesCostTrackingPage } from './LibrariesCostTrackingPage';
+export { LibrariesCrossPlatformUIPage } from './LibrariesCrossPlatformUIPage';
 export { LibrariesDataBackendPage } from './LibrariesDataBackendPage';
 export { LibrariesDataViewsPage } from './LibrariesDataViewsPage';
 export { LibrariesDesignSystemPage } from './LibrariesDesignSystemPage';
@@ -23,5 +24,6 @@ export { LibrariesSLOPage } from './LibrariesSLOPage';
 export { LibrariesSupportBotPage } from './LibrariesSupportBotPage';
 export { LibrariesTestingPage } from './LibrariesTestingPage';
 export { LibrariesUIKitPage } from './LibrariesUIKitPage';
+export { LibrariesUIKitWebPage } from './LibrariesUIKitWebPage';
 export { LibrariesWorkflowComposerPage } from './LibrariesWorkflowComposerPage';
 export { LibrariesWorkflowsPage } from './LibrariesWorkflowsPage';

package/src/components/docs/reference/DocsReferenceIndexPage.tsx

@@ -1,4 +1,4 @@
-import { listGeneratedDocs } from '../generated/loader';
+import { listGeneratedDocs } from '../generated';
 import { DocsReferenceIndexClient } from './DocsReferenceIndexClient';
 
 export async function DocsReferenceIndexPage() {

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

@@ -4,19 +4,20 @@ import Link from '@contractspec/lib.ui-link';
 const runtimeModes = [
 	{
 		title: 'Managed',
-		body: 'Best when the team wants the platform to own setup, routing, readiness, and mobile-safe defaults.',
+		body: 'Best when the team wants the platform to own setup, routing, readiness, API defaults, and mobile-safe operator flows.',
 	},
 	{
 		title: 'Local',
-		body: 'Best for power users who want tenant-local execution providers and tighter data-locality control.',
+		body: 'Best for power users who want local-daemon registration, tenant-local execution providers, and tighter data-locality control.',
 	},
 	{
 		title: 'Hybrid',
-		body: 'Best when some work should stay local while preview, review, or export flows still use managed coordination.',
+		body: 'Best when some work should stay local while preview, review, export, or mobile operator flows still use managed coordination.',
 	},
 ];
 
 const builderLoop = [
+	'Bootstrap managed, local-daemon, or hybrid presets explicitly instead of inventing provider posture ad hoc per host.',
 	'Capture prompts, files, voice, and other inbound sources into a typed workspace instead of relying on a single chat transcript.',
 	'Fuse the sources into decisions, assumptions, and blueprint updates with provenance and approval memory.',
 	'Compile authoring work into execution lanes, then route the work to explicit provider profiles and runtime targets.',
@@ -24,6 +25,12 @@ const builderLoop = [
 	'Keep mobile review parity so approvals, incidents, and patch proposals can be inspected away from the desktop workbench.',
 ];
 
+const operatorSignals = [
+	'local trust and lease posture for registered local runtimes',
+	'channel-action and comparison posture data in the shared Builder snapshot',
+	'preview, readiness, export, and mobile-review state derived from the same workspace snapshot',
+];
+
 export function SpecsBuilderControlPlanePage() {
 	return (
 		<div className="space-y-10">
@@ -151,6 +158,54 @@ Operate API proxy
 				</article>
 			</section>
 
+			<section className="editorial-panel space-y-5">
+				<div className="space-y-2">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Workspace config carries the current Builder defaults
+					</h2>
+					<p className="text-muted-foreground text-sm leading-7">
+						Builder setup is no longer just an app-shell concern. The shared
+						workspace config now carries runtime mode, bootstrap preset, control
+						plane API defaults, and local runtime registration metadata so the
+						CLI, editors, and web shells resolve the same posture.
+					</p>
+				</div>
+				<CodeBlock
+					language="json"
+					filename=".contractsrc.json"
+					code={`{
+  "builder": {
+    "enabled": true,
+    "runtimeMode": "local",
+    "bootstrapPreset": "local_daemon_mvp",
+    "api": {
+      "baseUrl": "https://api.contractspec.io",
+      "controlPlaneTokenEnvVar": "CONTROL_PLANE_API_TOKEN"
+    },
+    "localRuntime": {
+      "runtimeId": "rt_local_daemon",
+      "grantedTo": "local:operator",
+      "providerIds": ["provider.codex", "provider.local.model"]
+    }
+  }
+}`}
+				/>
+			</section>
+
+			<section className="editorial-panel space-y-4">
+				<h2 className="font-serif text-3xl tracking-[-0.03em]">
+					Operator posture stays visible
+				</h2>
+				<ul className="editorial-list">
+					{operatorSignals.map((item) => (
+						<li key={item}>
+							<span className="editorial-list-marker" />
+							<span>{item}</span>
+						</li>
+					))}
+				</ul>
+			</section>
+
 			<section className="editorial-panel space-y-5">
 				<div className="space-y-2">
 					<h2 className="font-serif text-3xl tracking-[-0.03em]">