@contractspec/bundle.library 3.9.3 → 3.9.5

package/dist/node/components/docs/libraries/LibrariesCrossPlatformUIPage.content.js

@@ -1,4 +1,4 @@
-var a=Object.defineProperty;var s=(e)=>e;function r(e,t){this[e]=s.bind(null,t)}var n=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0,configurable:!0,set:r.bind(t,o)})};var i=(e,t)=>()=>(e&&(t=e(e=0)),t);var l=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],p=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],d=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],m=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],u=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],b=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],h=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .mobile.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],f="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",w=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
+var a=Object.defineProperty;var s=(e)=>e;function r(e,t){this[e]=s.bind(null,t)}var n=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0,configurable:!0,set:r.bind(t,o)})};var i=(e,t)=>()=>(e&&(t=e(e=0)),t);var l=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],p=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],d=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],u=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],m=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],b=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],h=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .native.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],f="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",w=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withPresentationTurbopackAliases({
@@ -82,4 +82,4 @@ export function ProductAccounts({ controller }) {
 }
 
 // If the table is spec-driven instead of hand-authored,
-// swap useContractTable for useDataViewTable.`,T="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.mobile.tsx` pairs as the standard design-system compatibility boundary.",S="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.mobile.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";export{k as webpackAliasExample,w as turbopackAliasExample,x as stackExample,v as renderingExample,u as remapCards,y as metroAliasExample,f as markdownKitIntro,b as layoutRules,l as layerCards,p as hookCards,h as gotchas,g as designSystemHelperExample,m as designSystemHelperCards,T as customerPolicyMarkdown,S as customerChecklistMarkdown,d as aliasSetupCards};
+// swap useContractTable for useDataViewTable.`,T="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.native.tsx` pairs as the standard design-system compatibility boundary.",S="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.native.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";export{k as webpackAliasExample,w as turbopackAliasExample,x as stackExample,v as renderingExample,m as remapCards,y as metroAliasExample,f as markdownKitIntro,b as layoutRules,l as layerCards,p as hookCards,h as gotchas,g as designSystemHelperExample,u as designSystemHelperCards,T as customerPolicyMarkdown,S as customerChecklistMarkdown,d as aliasSetupCards};

package/dist/node/components/docs/libraries/LibrariesCrossPlatformUIPage.js

@@ -1,4 +1,4 @@
-var S=Object.defineProperty;var P=(t)=>t;function A(t,a){this[t]=P.bind(null,a)}var U=(t,a)=>{for(var r in a)S(t,r,{get:a[r],enumerable:!0,configurable:!0,set:A.bind(a,r)})};var D=(t,a)=>()=>(t&&(a=t(t=0)),a);var s=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],c=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],l=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],p=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],u=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],b=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],m=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .mobile.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],d="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",h=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
+var S=Object.defineProperty;var P=(t)=>t;function A(t,a){this[t]=P.bind(null,a)}var U=(t,a)=>{for(var r in a)S(t,r,{get:a[r],enumerable:!0,configurable:!0,set:A.bind(a,r)})};var D=(t,a)=>()=>(t&&(a=t(t=0)),a);var s=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],c=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],l=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],p=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],u=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],b=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],m=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .native.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],d="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",h=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withPresentationTurbopackAliases({
@@ -82,4 +82,4 @@ export function ProductAccounts({ controller }) {
 }
 
 // If the table is spec-driven instead of hand-authored,
-// swap useContractTable for useDataViewTable.`,v="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.mobile.tsx` pairs as the standard design-system compatibility boundary.",T="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.mobile.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";import{CodeBlock as n}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as N}from"lucide-react";import{jsx as e,jsxs as o}from"react/jsx-runtime";function E(){return o("div",{className:"space-y-8",children:[o("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),e("p",{className:"text-lg text-muted-foreground",children:"How ContractSpec keeps React and React Native components compatible by splitting responsibility across shared runtime models, platform primitives, resolver aliases, and the composed design-system layer."})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),e("p",{className:"text-muted-foreground",children:"The shared rendering story is layered: the core package owns models and resolver helpers, the React packages own hook APIs, the UI kits own raw primitives, and the design-system owns the higher-level product surfaces that pair web and mobile implementations."}),e("div",{className:"grid gap-4 md:grid-cols-2",children:s.map((t)=>o("div",{className:"rounded-[20px] border border-border/70 p-4",children:[e("h3",{className:"font-semibold text-base",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e("div",{className:"grid gap-4 md:grid-cols-3",children:c.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),o("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[e("div",{className:"grid gap-4 md:grid-cols-2",children:p.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e(n,{language:"typescript",filename:"design-system-platform.ts",code:y})]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),o("p",{className:"text-muted-foreground",children:["Teach the bundler what “web” and “native” mean before you try to share component code. These helpers are public from the root",e("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:l.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),o("div",{className:"grid gap-4 xl:grid-cols-3",children:[e(n,{language:"typescript",filename:"next.config.mjs",code:h}),e(n,{language:"typescript",filename:"next.config.mjs",code:f}),e(n,{language:"javascript",filename:"metro.config.js",code:w})]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),e("p",{className:"text-muted-foreground",children:"The helpers are intentionally asymmetric because Turbopack patches the Next config object, Webpack mutates a resolver config, and Metro maps modules at request time for native platforms."}),e("div",{className:"grid gap-4 xl:grid-cols-3",children:u.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:t.items.map((a)=>e("li",{children:a},a))})]},t.title))})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),o("p",{className:"text-muted-foreground",children:[e("code",{children:"VStack"}),", ",e("code",{children:"HStack"}),", and ",e("code",{children:"Box"})," are the closest thing to a shared layout vocabulary, but their defaults and a few props still differ across the web and native packages."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:b.map((t)=>e("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:t},t))}),e(n,{language:"tsx",filename:"stack-layout.tsx",code:g})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),e("p",{className:"text-muted-foreground",children:"Keep the controller stable, then decide whether the final surface should be a raw web primitive, a raw native primitive, or a composed design-system wrapper."}),e(n,{language:"tsx",filename:"cross-platform-rendering.tsx",code:k}),o("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:["For higher-level shared rendering, use the design-system surfaces that already ship paired implementations such as"," ",e("code",{children:"DataViewRenderer"}),", ",e("code",{children:"ListTablePage"}),", and"," ",e("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),e("ul",{className:"space-y-2 text-muted-foreground leading-7",children:m.map((t)=>e("li",{children:t},t))})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),e("p",{className:"text-muted-foreground",children:d}),o("div",{className:"grid gap-4 xl:grid-cols-2",children:[e(n,{language:"markdown",filename:"cross-surface-policy.md",code:v}),e(n,{language:"markdown",filename:"cross-surface-checklist.md",code:T})]})]}),o("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[e(i,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),e(i,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),e(i,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),o(i,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",e(N,{size:16})]})]})]})}export{E as LibrariesCrossPlatformUIPage};
+// swap useContractTable for useDataViewTable.`,v="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.native.tsx` pairs as the standard design-system compatibility boundary.",T="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.native.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";import{CodeBlock as n}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as N}from"lucide-react";import{jsx as e,jsxs as o}from"react/jsx-runtime";function E(){return o("div",{className:"space-y-8",children:[o("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),e("p",{className:"text-lg text-muted-foreground",children:"How ContractSpec keeps React and React Native components compatible by splitting responsibility across shared runtime models, platform primitives, resolver aliases, and the composed design-system layer."})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),e("p",{className:"text-muted-foreground",children:"The shared rendering story is layered: the core package owns models and resolver helpers, the React packages own hook APIs, the UI kits own raw primitives, and the design-system owns the higher-level product surfaces that pair web and mobile implementations."}),e("div",{className:"grid gap-4 md:grid-cols-2",children:s.map((t)=>o("div",{className:"rounded-[20px] border border-border/70 p-4",children:[e("h3",{className:"font-semibold text-base",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e("div",{className:"grid gap-4 md:grid-cols-3",children:c.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),o("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[e("div",{className:"grid gap-4 md:grid-cols-2",children:p.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e(n,{language:"typescript",filename:"design-system-platform.ts",code:y})]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),o("p",{className:"text-muted-foreground",children:["Teach the bundler what “web” and “native” mean before you try to share component code. These helpers are public from the root",e("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:l.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),o("div",{className:"grid gap-4 xl:grid-cols-3",children:[e(n,{language:"typescript",filename:"next.config.mjs",code:h}),e(n,{language:"typescript",filename:"next.config.mjs",code:f}),e(n,{language:"javascript",filename:"metro.config.js",code:w})]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),e("p",{className:"text-muted-foreground",children:"The helpers are intentionally asymmetric because Turbopack patches the Next config object, Webpack mutates a resolver config, and Metro maps modules at request time for native platforms."}),e("div",{className:"grid gap-4 xl:grid-cols-3",children:u.map((t)=>o("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:t.items.map((a)=>e("li",{children:a},a))})]},t.title))})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),o("p",{className:"text-muted-foreground",children:[e("code",{children:"VStack"}),", ",e("code",{children:"HStack"}),", and ",e("code",{children:"Box"})," are the closest thing to a shared layout vocabulary, but their defaults and a few props still differ across the web and native packages."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:b.map((t)=>e("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:t},t))}),e(n,{language:"tsx",filename:"stack-layout.tsx",code:g})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),e("p",{className:"text-muted-foreground",children:"Keep the controller stable, then decide whether the final surface should be a raw web primitive, a raw native primitive, or a composed design-system wrapper."}),e(n,{language:"tsx",filename:"cross-platform-rendering.tsx",code:k}),o("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:["For higher-level shared rendering, use the design-system surfaces that already ship paired implementations such as"," ",e("code",{children:"DataViewRenderer"}),", ",e("code",{children:"ListTablePage"}),", and"," ",e("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),e("ul",{className:"space-y-2 text-muted-foreground leading-7",children:m.map((t)=>e("li",{children:t},t))})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),e("p",{className:"text-muted-foreground",children:d}),o("div",{className:"grid gap-4 xl:grid-cols-2",children:[e(n,{language:"markdown",filename:"cross-surface-policy.md",code:v}),e(n,{language:"markdown",filename:"cross-surface-checklist.md",code:T})]})]}),o("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[e(i,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),e(i,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),e(i,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),o(i,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",e(N,{size:16})]})]})]})}export{E as LibrariesCrossPlatformUIPage};

package/dist/node/components/docs/libraries/index.js

@@ -157,7 +157,7 @@ tracker.recordSample({
   onAlert: ({ tenantId, total }) => notifyFinance(tenantId, total),
 });
 
-tracker.getTotals({ tenantId: 'acme' }).forEach((summary) => budgets.track(summary));`})]}),q("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Optimization Suggestions"}),q("p",{className:"text-muted-foreground text-sm",children:["Feed summaries into ",G("code",{children:"OptimizationRecommender"})," to surface N+1 queries, compute-heavy steps, or expensive external calls. Store the generated suggestions in the new Prisma model to power Ops playbooks."]})]}),q("div",{className:"flex items-center gap-4 pt-4",children:[G(Ie,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),q(Ie,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",G(zt,{size:16})]})]})]})}var Ae=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],Pe=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],De=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],Ee=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],Be=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],Oe=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],Me=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .mobile.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],We="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",ze=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
+tracker.getTotals({ tenantId: 'acme' }).forEach((summary) => budgets.track(summary));`})]}),q("div",{className:"space-y-4",children:[G("h2",{className:"font-bold text-2xl",children:"Optimization Suggestions"}),q("p",{className:"text-muted-foreground text-sm",children:["Feed summaries into ",G("code",{children:"OptimizationRecommender"})," to surface N+1 queries, compute-heavy steps, or expensive external calls. Store the generated suggestions in the new Prisma model to power Ops playbooks."]})]}),q("div",{className:"flex items-center gap-4 pt-4",children:[G(Ie,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),q(Ie,{href:"/docs/libraries/slo",className:"btn-primary",children:["Next: SLO ",G(zt,{size:16})]})]})]})}var Ae=[{title:"@contractspec/lib.presentation-runtime-core",body:"Shared state, table models, workflow logic, visualization helpers, and the alias helpers consumed by web and native builds."},{title:"@contractspec/lib.presentation-runtime-react",body:"React-facing hooks such as useContractTable, useDataViewTable, and useWorkflow. This is the shared hook surface most product code starts from."},{title:"@contractspec/lib.presentation-runtime-react-native",body:"Native entrypoint for mobile apps. It re-exports the shared table and data-view hooks so the controller API stays aligned with the React package."},{title:"@contractspec/lib.ui-kit-web",body:"Browser-first primitives and accessibility helpers. Reach for this layer when you want direct control over the web renderer."},{title:"@contractspec/lib.ui-kit",body:"Native-first primitives for Expo and React Native. Reach for this layer when the render surface should stay mobile-native."},{title:"@contractspec/lib.design-system",body:"Composed components, ThemeSpec/TranslationSpec-aware controls, token helpers, and paired web/mobile implementations that sit on top of both UI kits."}],Pe=[{title:"useContractTable",body:"Use this when your rows and column definitions already live in product code and you want one headless controller for sorting, pagination, selection, visibility, pinning, sizing, and expansion."},{title:"useDataViewTable",body:"Use this when the table should stay driven by a DataViewSpec instead of hand-authored columns. It adapts the spec to the same generic controller model."},{title:"Native re-export boundary",body:"On native apps, import the same hook names from @contractspec/lib.presentation-runtime-react-native when you want the import path itself to signal a mobile boundary."}],De=[{title:"Next.js / Turbopack",body:"Use withPresentationTurbopackAliases as the default path in current Next.js apps. It patches nextConfig.turbopack instead of mutating a webpack config object."},{title:"Next.js / Webpack fallback",body:"Use withPresentationWebpackAliases only when a Next.js app explicitly opts back into webpack via the CLI flags."},{title:"Expo / Metro",body:"Use withPresentationMetroAliases on Metro when native platforms should resolve web ui-kit /ui imports and the shared React runtime root to native implementations."}],Ee=[{title:"withPlatformUI",body:"Use this lightweight adapter when a design-system surface needs one object that carries the current platform, tokens, and breakpoints."},{title:"mapTokensForPlatform",body:"Use this when resolved tokens need to be mapped into platform-specific token shapes before the final renderer consumes them."}],Be=[{title:"What Webpack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Prepends .web.js, .web.jsx, .web.ts, and .web.tsx to webpack resolve.extensions"]},{title:"What Turbopack remaps",items:["@contractspec/lib.ui-kit -> @contractspec/lib.ui-kit-web","@contractspec/lib.presentation-runtime-react-native -> @contractspec/lib.presentation-runtime-react","Initializes or merges turbopack.resolveExtensions with a web-first extension list"]},{title:"What Metro remaps",items:["@contractspec/lib.ui-kit-web/ui/* -> @contractspec/lib.ui-kit/ui/* on ios/android/native/mobile","Root @contractspec/lib.presentation-runtime-react -> @contractspec/lib.presentation-runtime-react-native","Enables package exports and expands platform resolution ordering"]}],Oe=["Set gap, align, justify, and wrap explicitly in shared code because defaults are not identical between web and native.","Shared-safe subset: VStack, HStack, and Box with className, gap, align, justify, and wrap.","Web-only feature: as lets stack primitives emit semantic elements such as section, header, main, or article.","Native-only extras: spacing, width, and padding exist on the native stack primitives and should stay out of shared renderer code.","HStack and Box reverse-wrap tokens differ: wrapReverse on web, reverse on native. Prefer nowrap or wrap in shared code.","Box defaults to nowrap on web and wrap on native, so shared code should set wrap intentionally."],Me=["withPresentationNextAliases no longer exists. Use withPresentationTurbopackAliases for the default Next.js path or withPresentationWebpackAliases for explicit webpack fallback.","Prefer root runtime imports when alias helpers matter. Metro remaps the root @contractspec/lib.presentation-runtime-react package, not arbitrary deep hook subpaths.","Metro only rewrites @contractspec/lib.ui-kit-web/ui/* imports. Router-specific web packages and other web-only helpers still need platform-aware imports.","presentation-runtime-core is headless. It owns models and config helpers, not rendered React components.","design-system compatibility comes from paired .tsx / .native.tsx implementations and token helpers such as withPlatformUI and mapTokensForPlatform.","Form controls should come from @contractspec/lib.design-system when product code needs ThemeSpec or TranslationSpec support.","Stack primitives are similar across platforms, but the prop surface is not identical. Stay inside the common subset for shared renderers.","Alias helpers solve module resolution only. They do not replace app-level monorepo watchFolders, Expo Router setup, or other Next configuration."],We="Copy these markdown snippets into your own AGENTS.md, LLM guide, README, or engineering playbook when you want to enforce the same cross-surface rules across customer projects.",ze=`import { withPresentationTurbopackAliases } from '@contractspec/lib.presentation-runtime-core';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withPresentationTurbopackAliases({
@@ -241,7 +241,7 @@ export function ProductAccounts({ controller }) {
 }
 
 // If the table is spec-driven instead of hand-authored,
-// swap useContractTable for useDataViewTable.`,He="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.mobile.tsx` pairs as the standard design-system compatibility boundary.",qe="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.mobile.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";import{CodeBlock as ee}from"@contractspec/lib.design-system";import ce from"@contractspec/lib.ui-link";import{ChevronRight as Gt}from"lucide-react";import{jsx as e,jsxs as h}from"react/jsx-runtime";function Ft(){return h("div",{className:"space-y-8",children:[h("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),e("p",{className:"text-lg text-muted-foreground",children:"How ContractSpec keeps React and React Native components compatible by splitting responsibility across shared runtime models, platform primitives, resolver aliases, and the composed design-system layer."})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),e("p",{className:"text-muted-foreground",children:"The shared rendering story is layered: the core package owns models and resolver helpers, the React packages own hook APIs, the UI kits own raw primitives, and the design-system owns the higher-level product surfaces that pair web and mobile implementations."}),e("div",{className:"grid gap-4 md:grid-cols-2",children:Ae.map((t)=>h("div",{className:"rounded-[20px] border border-border/70 p-4",children:[e("h3",{className:"font-semibold text-base",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e("div",{className:"grid gap-4 md:grid-cols-3",children:Pe.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),h("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[e("div",{className:"grid gap-4 md:grid-cols-2",children:Ee.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e(ee,{language:"typescript",filename:"design-system-platform.ts",code:Fe})]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),h("p",{className:"text-muted-foreground",children:["Teach the bundler what “web” and “native” mean before you try to share component code. These helpers are public from the root",e("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:De.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),h("div",{className:"grid gap-4 xl:grid-cols-3",children:[e(ee,{language:"typescript",filename:"next.config.mjs",code:ze}),e(ee,{language:"typescript",filename:"next.config.mjs",code:Ue}),e(ee,{language:"javascript",filename:"metro.config.js",code:Ge})]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),e("p",{className:"text-muted-foreground",children:"The helpers are intentionally asymmetric because Turbopack patches the Next config object, Webpack mutates a resolver config, and Metro maps modules at request time for native platforms."}),e("div",{className:"grid gap-4 xl:grid-cols-3",children:Be.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:t.items.map((w)=>e("li",{children:w},w))})]},t.title))})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),h("p",{className:"text-muted-foreground",children:[e("code",{children:"VStack"}),", ",e("code",{children:"HStack"}),", and ",e("code",{children:"Box"})," are the closest thing to a shared layout vocabulary, but their defaults and a few props still differ across the web and native packages."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:Oe.map((t)=>e("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:t},t))}),e(ee,{language:"tsx",filename:"stack-layout.tsx",code:Ve})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),e("p",{className:"text-muted-foreground",children:"Keep the controller stable, then decide whether the final surface should be a raw web primitive, a raw native primitive, or a composed design-system wrapper."}),e(ee,{language:"tsx",filename:"cross-platform-rendering.tsx",code:_e}),h("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:["For higher-level shared rendering, use the design-system surfaces that already ship paired implementations such as"," ",e("code",{children:"DataViewRenderer"}),", ",e("code",{children:"ListTablePage"}),", and"," ",e("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),e("ul",{className:"space-y-2 text-muted-foreground leading-7",children:Me.map((t)=>e("li",{children:t},t))})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),e("p",{className:"text-muted-foreground",children:We}),h("div",{className:"grid gap-4 xl:grid-cols-2",children:[e(ee,{language:"markdown",filename:"cross-surface-policy.md",code:He}),e(ee,{language:"markdown",filename:"cross-surface-checklist.md",code:qe})]})]}),h("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[e(ce,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),e(ce,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),e(ce,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),h(ce,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",e(Gt,{size:16})]})]})]})}import{CodeBlock as Vt}from"@contractspec/lib.design-system";import Qe from"@contractspec/lib.ui-link";import{ChevronRight as _t}from"lucide-react";import{jsx as y,jsxs as N}from"react/jsx-runtime";function Ht(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-4",children:[y("h1",{className:"font-bold text-4xl",children:"Data & Backend"}),y("p",{className:"text-muted-foreground",children:"A collection of robust, platform-agnostic libraries for building the backend infrastructure of your LSSM applications."})]}),N("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Libraries"}),N("div",{className:"space-y-6",children:[N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/app.cli-database"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Prisma Wrapper & CLI"}),". Provides a unified way to manage database schemas, migrations, and clients. Includes seeders and factory patterns for testing."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.bus"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Type-Safe Event Bus"}),". Decouple your architecture with typed events. Supports in-memory dispatch for monoliths and can be extended for distributed message queues (Redis, SQS)."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.logger"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"High-Performance Logging"}),". Optimized for Bun and structured JSON output. Includes plugins for ElysiaJS to log HTTP requests automatically."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.error"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Standardized Errors"}),". Use `AppError` with standard codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP responses and error handling across services."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.exporter"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Data Export"}),". Generate CSV and XML files from your data. Platform-agnostic and streaming-friendly."]})]})]})]}),N("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Example: Unified Backend Flow"}),y(Vt,{language:"typescript",code:`import { logger } from '@contractspec/lib.logger';
+// swap useContractTable for useDataViewTable.`,He="# Cross-Surface Rendering Policy\n\n- Import runtime bundler helpers from `@contractspec/lib.presentation-runtime-core` root only.\n- Use `withPresentationTurbopackAliases` for default Next.js projects.\n- Use `withPresentationWebpackAliases` only when the app explicitly opts into webpack.\n- Use `withPresentationMetroAliases` for Expo and Metro builds.\n- Prefer `@contractspec/lib.design-system` for shared product-facing surfaces.\n- Use design-system controls when a field must respect ThemeSpec component variants or TranslationSpec messages.\n- Use `@contractspec/lib.ui-kit-web` only for web-specific primitive lanes.\n- Use `@contractspec/lib.ui-kit` only for native-specific primitive lanes.\n- Keep shared layout code inside the common `VStack` / `HStack` / `Box` subset.\n- Do not use removed `withPresentationNextAliases`.\n- Treat `.tsx` / `.native.tsx` pairs as the standard design-system compatibility boundary.",qe="# Cross-Surface Rendering Checklist\n\n1. Configure the bundler aliases before sharing any UI code.\n2. Choose the controller layer:\n   - use `useContractTable` for app-owned rows and columns\n   - use `useDataViewTable` for DataViewSpec-driven tables\n3. Choose the renderer lane:\n   - web primitive: `@contractspec/lib.ui-kit-web`\n   - native primitive: `@contractspec/lib.ui-kit`\n   - shared product surface: `@contractspec/lib.design-system`\n4. Verify mirrored `.tsx` / `.native.tsx` implementations where the design-system owns the surface.\n5. Wrap product surfaces in `DesignSystemThemeProvider` and `DesignSystemTranslationProvider` when ThemeSpec or TranslationSpec data is available.\n6. In shared layout code, set `gap`, `align`, `justify`, and `wrap` explicitly.\n7. Check docs and examples for root imports and current helper names before copying them into product code.";import{CodeBlock as ee}from"@contractspec/lib.design-system";import ce from"@contractspec/lib.ui-link";import{ChevronRight as Gt}from"lucide-react";import{jsx as e,jsxs as h}from"react/jsx-runtime";function Ft(){return h("div",{className:"space-y-8",children:[h("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Cross-platform UI"}),e("p",{className:"text-lg text-muted-foreground",children:"How ContractSpec keeps React and React Native components compatible by splitting responsibility across shared runtime models, platform primitives, resolver aliases, and the composed design-system layer."})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What cross-platform means here"}),e("p",{className:"text-muted-foreground",children:"The shared rendering story is layered: the core package owns models and resolver helpers, the React packages own hook APIs, the UI kits own raw primitives, and the design-system owns the higher-level product surfaces that pair web and mobile implementations."}),e("div",{className:"grid gap-4 md:grid-cols-2",children:Ae.map((t)=>h("div",{className:"rounded-[20px] border border-border/70 p-4",children:[e("h3",{className:"font-semibold text-base",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e("div",{className:"grid gap-4 md:grid-cols-3",children:Pe.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),h("div",{className:"grid gap-4 lg:grid-cols-[1.1fr_0.9fr]",children:[e("div",{className:"grid gap-4 md:grid-cols-2",children:Ee.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),e(ee,{language:"typescript",filename:"design-system-platform.ts",code:Fe})]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Resolver and alias setup"}),h("p",{className:"text-muted-foreground",children:["Teach the bundler what “web” and “native” mean before you try to share component code. These helpers are public from the root",e("code",{children:" @contractspec/lib.presentation-runtime-core "}),"entrypoint."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:De.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("p",{className:"mt-2 text-muted-foreground text-sm leading-7",children:t.body})]},t.title))}),h("div",{className:"grid gap-4 xl:grid-cols-3",children:[e(ee,{language:"typescript",filename:"next.config.mjs",code:ze}),e(ee,{language:"typescript",filename:"next.config.mjs",code:Ue}),e(ee,{language:"javascript",filename:"metro.config.js",code:Ge})]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"How the remapping works"}),e("p",{className:"text-muted-foreground",children:"The helpers are intentionally asymmetric because Turbopack patches the Next config object, Webpack mutates a resolver config, and Metro maps modules at request time for native platforms."}),e("div",{className:"grid gap-4 xl:grid-cols-3",children:Be.map((t)=>h("div",{className:"card-subtle p-4",children:[e("h3",{className:"font-semibold",children:t.title}),e("ul",{className:"mt-2 space-y-2 text-muted-foreground text-sm leading-7",children:t.items.map((w)=>e("li",{children:w},w))})]},t.title))})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Layout primitives"}),h("p",{className:"text-muted-foreground",children:[e("code",{children:"VStack"}),", ",e("code",{children:"HStack"}),", and ",e("code",{children:"Box"})," are the closest thing to a shared layout vocabulary, but their defaults and a few props still differ across the web and native packages."]}),e("div",{className:"grid gap-4 md:grid-cols-2",children:Oe.map((t)=>e("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:t},t))}),e(ee,{language:"tsx",filename:"stack-layout.tsx",code:Ve})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Rendering patterns"}),e("p",{className:"text-muted-foreground",children:"Keep the controller stable, then decide whether the final surface should be a raw web primitive, a raw native primitive, or a composed design-system wrapper."}),e(ee,{language:"tsx",filename:"cross-platform-rendering.tsx",code:_e}),h("div",{className:"card-subtle p-4 text-muted-foreground text-sm leading-7",children:["For higher-level shared rendering, use the design-system surfaces that already ship paired implementations such as"," ",e("code",{children:"DataViewRenderer"}),", ",e("code",{children:"ListTablePage"}),", and"," ",e("code",{children:"DataTable"}),". The web and mobile files stay separate inside the package while your app imports one design-system boundary."]})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Gotchas and boundaries"}),e("ul",{className:"space-y-2 text-muted-foreground leading-7",children:Me.map((t)=>e("li",{children:t},t))})]}),h("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Customer markdown kit"}),e("p",{className:"text-muted-foreground",children:We}),h("div",{className:"grid gap-4 xl:grid-cols-2",children:[e(ee,{language:"markdown",filename:"cross-surface-policy.md",code:He}),e(ee,{language:"markdown",filename:"cross-surface-checklist.md",code:qe})]})]}),h("div",{className:"flex flex-wrap items-center gap-3 pt-2",children:[e(ce,{href:"/docs/libraries/runtime",className:"btn-ghost",children:"Runtime libraries"}),e(ce,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"UI Kit"}),e(ce,{href:"/docs/libraries/ui-kit-web",className:"btn-ghost",children:"UI Kit Web"}),h(ce,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Design System ",e(Gt,{size:16})]})]})]})}import{CodeBlock as Vt}from"@contractspec/lib.design-system";import Qe from"@contractspec/lib.ui-link";import{ChevronRight as _t}from"lucide-react";import{jsx as y,jsxs as N}from"react/jsx-runtime";function Ht(){return N("div",{className:"space-y-8",children:[N("div",{className:"space-y-4",children:[y("h1",{className:"font-bold text-4xl",children:"Data & Backend"}),y("p",{className:"text-muted-foreground",children:"A collection of robust, platform-agnostic libraries for building the backend infrastructure of your LSSM applications."})]}),N("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Libraries"}),N("div",{className:"space-y-6",children:[N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/app.cli-database"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Prisma Wrapper & CLI"}),". Provides a unified way to manage database schemas, migrations, and clients. Includes seeders and factory patterns for testing."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.bus"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Type-Safe Event Bus"}),". Decouple your architecture with typed events. Supports in-memory dispatch for monoliths and can be extended for distributed message queues (Redis, SQS)."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.logger"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"High-Performance Logging"}),". Optimized for Bun and structured JSON output. Includes plugins for ElysiaJS to log HTTP requests automatically."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.error"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Standardized Errors"}),". Use `AppError` with standard codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP responses and error handling across services."]})]}),N("div",{className:"card-subtle p-6",children:[y("h3",{className:"font-bold text-lg",children:"@contractspec/lib.exporter"}),N("p",{className:"mt-2 text-muted-foreground text-sm",children:[y("strong",{children:"Data Export"}),". Generate CSV and XML files from your data. Platform-agnostic and streaming-friendly."]})]})]})]}),N("div",{className:"space-y-4",children:[y("h2",{className:"font-bold text-2xl",children:"Example: Unified Backend Flow"}),y(Vt,{language:"typescript",code:`import { logger } from '@contractspec/lib.logger';
 import { AppError } from '@contractspec/lib.error';
 import { db } from '@contractspec/app.cli-database';
 import { EventBus } from '@contractspec/lib.bus';