lib.example-shared-ui

@lssm-tech/lib.example-shared-ui

Shared React components and hooks for ContractSpec example apps. Provides the common layout, editors, and overlays used across all examples.

What It Provides

• Layer: lib.
• Consumers: example apps.
• Related ContractSpec packages include @lssm-tech/lib.contracts-spec, @lssm-tech/lib.design-system, @lssm-tech/lib.surface-runtime, @lssm-tech/lib.ui-kit-web, @lssm-tech/tool.bun, @lssm-tech/tool.typescript.
• Related ContractSpec packages include @lssm-tech/lib.contracts-spec, @lssm-tech/lib.design-system, @lssm-tech/lib.surface-runtime, @lssm-tech/lib.ui-kit-web, @lssm-tech/tool.bun, @lssm-tech/tool.typescript.

Installation

npm install @lssm-tech/lib.example-shared-ui

or

bun add @lssm-tech/lib.example-shared-ui

Usage

Import the root entrypoint from @lssm-tech/lib.example-shared-ui, or choose a documented subpath when you only need one part of the package surface. Use NestedCommandShell for embedded example previews that need command search and sectional navigation without mounting the app-level design-system AppShell/sidebar provider.

Architecture

• src/bundles/ contains bundle definitions and composition entrypoints.
• src/EvolutionDashboard.tsx is part of the package's public or composition surface.
• src/EvolutionSidebar.tsx is part of the package's public or composition surface.
• src/hooks/ contains custom hooks for host applications.
• src/index.ts is the root public barrel and package entrypoint.
• src/lib/ contains package-local helper utilities and adapters.
• src/LocalDataIndicator.tsx is part of the package's public or composition surface.
• src/NestedCommandShell.tsx provides an embedded, nested-safe command/navigation shell for examples that must not mount the app-level AppShell sidebar.

Public Entry Points

• Export . resolves through ./src/index.ts.
• Export ./bundles resolves through ./src/bundles/index.ts.
• Export ./bundles/ExampleTemplateBundle resolves through ./src/bundles/ExampleTemplateBundle.ts.
• Export ./EvolutionDashboard resolves through ./src/EvolutionDashboard.tsx.
• Export ./EvolutionSidebar resolves through ./src/EvolutionSidebar.tsx.
• Export ./hooks resolves through ./src/hooks/index.ts.
• Export ./hooks/useBehaviorTracking resolves through ./src/hooks/useBehaviorTracking.ts.
• Export ./hooks/useEvolution resolves through ./src/hooks/useEvolution.ts.
• Export ./hooks/useRegistryTemplates resolves through ./src/hooks/useRegistryTemplates.ts.
• Export ./hooks/useSpecContent resolves through ./src/hooks/useSpecContent.ts.
• The package publishes 30 total export subpaths; keep docs aligned with package.json.

Public Shell Contract

TemplateShell is the reusable, nested-safe preview shell for example packages. It renders only content-scoped header, main, and optional aside regions, so embedded previews can sit inside host apps such as ExampleWebPreview or web-landing without creating another app-level AppShell, SidebarProvider, fixed application sidebar, or global navigation frame.

Import it from either the root package or the documented subpath:

import { TemplateShell } from '@lssm-tech/lib.example-shared-ui';
// or
import { TemplateShell } from '@lssm-tech/lib.example-shared-ui/TemplateShell';

Public props:

• title and optional description fill the content-scoped preview header.
• actions renders header actions without taking ownership of host navigation.
• sidebar renders a bounded in-card aside beside the preview content.
• showRuntimeIndicator toggles the local-data indicator for sandboxes that already provide equivalent status chrome.
• showSaveAction and saveProps control the optional Studio save affordance.
• children render inside the preview main region.

Use SpecDrivenTemplateShell when a preview needs a surface-runtime bundle plan, but keep the same containment rule: shared example shells own preview content only, not app-level navigation.

Local Commands

• bun run dev — contractspec-bun-build dev
• bun run build — contractspec-bun-build build
• bun run test — bun test --pass-with-no-tests
• bun run lint — bun lint:fix
• bun run lint:check — biome check .
• bun run lint:fix — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
• bun run typecheck — tsgo --noEmit
• bun run publish:pkg — bun publish --tolerate-republish --ignore-scripts --verbose
• bun run publish:pkg:canary — bun publish:pkg --tag canary
• bun run clean — rimraf dist .turbo
• bun run build:bundle — contractspec-bun-build transpile
• bun run build:types — contractspec-bun-build types
• bun run prebuild — contractspec-bun-build prebuild

Recent Updates

• Replace eslint+prettier by biomejs to optimize speed.
• Add changesets and apply pending fixes.
• Contracts context, bundle exports, surface-runtime docs.

Notes

• Low blast radius — only example apps depend on this package.
• TemplateShell is the shared layout for all examples; structural changes affect every example app.