@contractspec/bundle.library 3.9.0 → 3.9.3

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

@@ -52,6 +52,46 @@ export function AccountHealthTable() {
   );
 }`;
 
+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">
@@ -94,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
@@ -101,6 +145,26 @@ export function LibrariesDesignSystemPage() {
 				</ul>
 			</div>
 
+			<div className="space-y-4">
+				<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">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">Data table example</h2>
 				<p className="text-muted-foreground">
@@ -156,6 +220,21 @@ export function LibrariesDesignSystemPage() {
 				</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-web" className="btn-ghost">
 					Previous: UI Kit Web

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: '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

@@ -138,6 +138,21 @@ export function LibrariesUIKitPage() {
 				</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

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

@@ -102,6 +102,20 @@ export function LibrariesUIKitWebPage() {
 				</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

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';

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/index.ts

@@ -1,10 +1,10 @@
+export * from './bundles/LibraryBundle';
 export * from './components/docs';
 export * from './components/integrations';
 export * from './components/legal';
 export * from './components/shared';
 export * from './components/shell';
 export * from './components/templates';
-
 // App config and features
 export * from './config';
 export * from './features';

package/src/components/docs/generated/docs-index.mobile-demo-tasks.json

@@ -1,34 +0,0 @@
-[
-  {
-    "id": "mobile-demo.tasks/mobile-demo.tasks",
-    "title": "mobile-demo.tasks",
-    "summary": "Task-list demo feature for the Expo app, covering list, create, and status updates.\n- **Type**: feature\n- **Version**: 1.0.0\n- **Stability**: experimental\n- **Owners**: @platform.core\n- **Tags**: mobile, tasks, expo, example",
-    "route": "/docs/reference/mobile-demo.tasks/mobile-demo.tasks",
-    "source": "generated",
-    "contentPath": "mobile-demo.tasks/mobile-demo.tasks.md"
-  },
-  {
-    "id": "mobile-demo.tasks/task.create",
-    "title": "task.create",
-    "summary": "Create a new task.\n- **Type**: operation (command)\n- **Version**: 1.0.0\n- **Stability**: experimental\n- **Owners**: @platform.core\n- **Tags**: task, mobile\n- **File**: `packages/apps/mobile-demo/src/contracts/task.contract.ts`",
-    "route": "/docs/reference/mobile-demo.tasks/task.create",
-    "source": "generated",
-    "contentPath": "mobile-demo.tasks/task.create.md"
-  },
-  {
-    "id": "mobile-demo.tasks/task.list",
-    "title": "task.list",
-    "summary": "List all tasks.\n- **Type**: operation (query)\n- **Version**: 1.0.0\n- **Stability**: experimental\n- **Owners**: @platform.core\n- **Tags**: task, mobile\n- **File**: `packages/apps/mobile-demo/src/contracts/task.contract.ts`",
-    "route": "/docs/reference/mobile-demo.tasks/task.list",
-    "source": "generated",
-    "contentPath": "mobile-demo.tasks/task.list.md"
-  },
-  {
-    "id": "mobile-demo.tasks/task.updateStatus",
-    "title": "task.updateStatus",
-    "summary": "Toggle task done status.\n- **Type**: operation (command)\n- **Version**: 1.0.0\n- **Stability**: experimental\n- **Owners**: @platform.core\n- **Tags**: task, mobile\n- **File**: `packages/apps/mobile-demo/src/contracts/task.contract.ts`",
-    "route": "/docs/reference/mobile-demo.tasks/task.updateStatus",
-    "source": "generated",
-    "contentPath": "mobile-demo.tasks/task.updateStatus.md"
-  }
-]