# Interfaces, presentations and design Compose contract-driven views, role-aware operating surfaces and shared design primitives for web and native hosts. Source snapshot: bcc79fcc27c4d801c2119bef81ddcce7b4e86498 ## Choose the smallest useful UI layer PresentationRuntimeCore supplies shared transforms and defaults; React, Next and React Native packages supply host-specific rendering. The design-system and UI-kit packages provide reusable visual components. SurfaceRuntime adds surface composition, planners, overrides and role-aware resolution. Select the layer that matches the work: a table renderer does not require adopting an entire operating shell. Check the chosen package’s exact export and platform conditions before copying a component import from another host. Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/presentation-runtime-core/README.md Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/surface-runtime/README.md ## Resolve adaptation before rendering The adaptive-experience entry maps a ResolvedAdaptiveExperience into DataView defaults such as view type, density, data depth and page size. The caller supplies already-resolved preferences, supported behavior, signals, constraints and overrides. Keep this resolution visible so an interface can explain why it changed. RoleMorph then provides a reusable way to resolve operating surfaces for different human or AI actors. An action’s visual presence should reflect the selected policy and capability state, while the execution boundary independently enforces that state. Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/presentation-runtime-core/README.md Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/surface-runtime/README.md ## Treat feature composition as a lifecycle SurfaceRuntime’s feature-hub implementation validates and composes independent manifests. Installation is read-only; start is the explicit effect boundary. Calls must match declared capability, operation, port and policy. An allowed decision with obligations still requires fulfilled obligations and durable evidence. Optional missing ports degrade dependent capabilities, and teardown has defined compensation behavior. This makes lifecycle state a meaningful part of product UI: distinguish installed, available, started, degraded and unavailable behavior instead of rendering every registered item as usable. Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/presentation-runtime-core/README.md Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/surface-runtime/README.md ## Map the host and renderer Identify web versus native, the selected presentation package, design primitives and product shell. Use the documented bundler helper for that host where applicable, then inspect a maintained view that uses the same layer. Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/presentation-runtime-core/README.md Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/surface-runtime/README.md ## Trace one role-aware action Follow the actor/context input through surface resolution to the visible action, then to the operation’s authorization path. Compare at least an allowed actor, a denied actor and a missing optional capability in the relevant fixture. Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/presentation-runtime-core/README.md Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/surface-runtime/README.md ## Check the interaction itself Review keyboard access, focus, empty/error states and responsive layout alongside the contract behavior. A source-registered component or preview is useful evidence of an available implementation, but the selected browser/native experience still needs its own qualification. Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/presentation-runtime-core/README.md Source: https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/platform/ui/surface-runtime/README.md ## Packages - [@lssm-tech/lib.accessibility](https://lssm.co/docs/packages/lib.accessibility/): WCAG compliance utilities and validators - [@lssm-tech/lib.cockpit-kit-native](https://lssm.co/docs/packages/lib.cockpit-kit-native/): Native lane for cockpit primitives — React Native implementations with cockpit-kit type contracts - [@lssm-tech/lib.cockpit-kit-web](https://lssm.co/docs/packages/lib.cockpit-kit-web/): Web lane for cockpit primitives — re-exports cockpit-kit types with web-specific ui/ subpath convention - [@lssm-tech/lib.cockpit-kit](https://lssm.co/docs/packages/lib.cockpit-kit/): Cross-platform type contracts and canonical variant unions for cockpit primitives - [@lssm-tech/lib.design-catalog](https://lssm.co/docs/packages/lib.design-catalog/): Serializable built-in design pack and theme catalog for ContractSpec applications. - [@lssm-tech/module.design-studio](https://lssm.co/docs/packages/module.design-studio/): Tenant-safe design pack selection, drafting, certification, and reusable studio surfaces. - [@lssm-tech/lib.design-system](https://lssm.co/docs/packages/lib.design-system/): Design tokens and theming primitives - [@lssm-tech/module.operating-cockpit](https://lssm.co/docs/packages/module.operating-cockpit/): Operator cockpit shell — fleet board, navigation surface, and cross-domain operating screens for the Agent + Workflow pillar - [@lssm-tech/lib.overlay-engine](https://lssm.co/docs/packages/lib.overlay-engine/): Runtime overlay engine for ContractSpec personalization and adaptive UI rendering. - [@lssm-tech/lib.personalization](https://lssm.co/docs/packages/lib.personalization/): Behavior tracking, analysis, and adaptation helpers for ContractSpec personalization. - [@lssm-tech/lib.personalized-presentation](https://lssm.co/docs/packages/lib.personalized-presentation/): Schema bridge, React provider and hook that resolve lib.personalization preferences and role variant overrides into cockpit-kit variant literals - [@lssm-tech/lib.presentation-runtime-core](https://lssm.co/docs/packages/lib.presentation-runtime-core/): Core presentation runtime for contract-driven UIs - [@lssm-tech/lib.presentation-runtime-next](https://lssm.co/docs/packages/lib.presentation-runtime-next/): Next.js lane for contract-driven marketing SEO/LLMO: metadata, JSON-LD, sitemap, robots, and llms.txt/agents.json route handlers - [@lssm-tech/lib.presentation-runtime-react-native](https://lssm.co/docs/packages/lib.presentation-runtime-react-native/): React Native presentation runtime for mobile apps - [@lssm-tech/lib.presentation-runtime-react](https://lssm.co/docs/packages/lib.presentation-runtime-react/): React presentation runtime with workflow components - [@lssm-tech/lib.surface-runtime](https://lssm.co/docs/packages/lib.surface-runtime/): AI-native surface specs and web runtime for adaptive ContractSpec surfaces - [@lssm-tech/lib.translation-runtime](https://lssm.co/docs/packages/lib.translation-runtime/): Framework-independent ContractSpec translation runtime - [@lssm-tech/lib.ui-kit-core](https://lssm.co/docs/packages/lib.ui-kit-core/): Core UI primitives and utilities - [@lssm-tech/lib.ui-kit-web](https://lssm.co/docs/packages/lib.ui-kit-web/): Web UI components with Radix primitives - [@lssm-tech/lib.ui-kit](https://lssm.co/docs/packages/lib.ui-kit/): Cross-platform UI components for React Native and web - [@lssm-tech/lib.ui-link](https://lssm.co/docs/packages/lib.ui-link/): Deep linking utilities for navigation - [@lssm-tech/tool.icon-gen](https://lssm.co/docs/packages/tool.icon-gen/): Cross-platform CLI to generate PWA / web icon sets from a source logo (favicon.ico, PNG variants, apple-touch-icon, maskable). Uses sharp + a pure-JS ICO writer — no macOS-only sips dependency. - [@lssm-tech/integration.storybook](https://lssm.co/docs/packages/integration.storybook/): Contract-driven Storybook generation and optional Chromatic integration. - [@lssm-tech/integration.voice-input-native](https://lssm.co/docs/packages/integration.voice-input-native/): @react-native-voice/voice + expo-av/Deepgram STT integration for M3 voice input - [@lssm-tech/integration.voice-input-web](https://lssm.co/docs/packages/integration.voice-input-web/): Web Speech API + Deepgram Nova-3 STT integration for M3 voice input - [@lssm-tech/app.storybook](https://lssm.co/docs/packages/app.storybook/): Private dogfood Storybook for ContractSpec package catalogs and the canonical design matrix.