Docs/Interfaces, presentations and design
libraryPackage manifestv2.0.4

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-web
Markdown ↓Structured data ↓
Source, release and verification context

Source snapshot bcc79fcc · Declared package version 2.0.4. This page combines the checked-in package guide and manifest; commands and runtime behavior were not executed in this review.

Package source ↗ Manifest ↗
servernode
EXPLORE THE PACKAGE

See where this package fits.

Follow a declared connection, inspect an import, then open the source guide when you need the detail.

THIS PACKAGElib.cockpit-kit-webplatform

Arrows point from a package to its direct dependency. Each count is derived from the captured manifests.

5 declarationsSELECT TO INSPECT
PACKAGE GUIDERead at source ↗

@lssm-tech/lib.cockpit-kit-web

Web lane for cockpit UI primitives. Mirrors @lssm-tech/lib.ui-kit-web in structure.

Overview

cockpit-kit-web provides the web-specific surface for cockpit primitives, re-exporting type contracts from @lssm-tech/lib.cockpit-kit and (in Phase 1) adding React/DOM component implementations.

Subpath exports

Import What you get
@lssm-tech/lib.cockpit-kit-web All types + variants
@lssm-tech/lib.cockpit-kit-web/variants Density, Expansion + schema descriptors
@lssm-tech/lib.cockpit-kit-web/types Component prop interfaces

Phase 1 will add:

Import What you get
@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame Web CockpitFrame component
@lssm-tech/lib.cockpit-kit-web/ui/NavRail Web NavRail component
@lssm-tech/lib.cockpit-kit-web/ui/GraphCanvas Web GraphCanvas component
@lssm-tech/lib.cockpit-kit-web/ui/MetricPanel Web MetricPanel component

Usage

ts
// Types (scaffold — Phase 1 adds implementations)
import type { CockpitFrameProps } from '@lssm-tech/lib.cockpit-kit-web';

// Canonical variants (owned by cockpit-kit, re-exported here)
import { Density, densityVariantSchema } from '@lssm-tech/lib.cockpit-kit-web/variants';

Dependency rules

  • cockpit-kit-web depends on cockpit-kit — not the reverse
  • Density and Expansion unions are owned by cockpit-kit; this package re-exports them
  • Do not add native/React Native code here

Declared capabilities.

Lib Cockpit Kit Web

Web lane for cockpit primitives — re-exports cockpit-kit types with web-specific ui/ subpath convention

Use it to

  • Adopt web lane for cockpit primitives — re-exports cockpit-kit types with web-specific ui/ subpath convention

Requires

  • TypeScript

Choose another boundary when

  • The @lssm-tech/lib.cockpit-kit-web package constraints do not match the target runtime or platform.

@lssm-tech/lib.cockpit-kit-web

@lssm-tech/lib.cockpit-kit-web/types

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/CockpitFrame

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/CockpitFrame.Footer

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/CockpitFrame.Nav

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/CockpitFrame.Screen

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/CockpitFrame.variants

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/types

@lssm-tech/lib.cockpit-kit-web/ui/CockpitFrame/useCockpitFrame

@lssm-tech/lib.cockpit-kit-web/ui/GraphCanvas

@lssm-tech/lib.cockpit-kit-web/ui/GraphCanvas/GraphCanvas

Imports and export paths.

31 entries

These are package-manifest entry points. Named symbols listed above come from the capability catalogue; this is not an exhaustive TypeScript symbol reference.

31 imports

Dependencies and related packages.

Runtime dependencies 5
class-variance-authority
catalog:ui
lucide-react
catalog:ui
Peer dependencies 2
react
catalog:
react-dom
catalog:
Development dependencies 6
react
catalog:
react-dom
catalog:
typescript
catalog:

Package scripts.

Commands declared by this package. Review its setup requirements before running them; no command here was executed by this review.

publish:pkgbun publish --tolerate-republish --ignore-scripts --verbose
publish:pkg:canarybun publish:pkg --tag canary
buildcontractspec-bun-build build
build:bundlecontractspec-bun-build transpile
build:typescontractspec-bun-build types
devcontractspec-bun-build dev
cleanrm -rf dist
lintbun run lint:fix
lint:fixnode ../../../../scripts/biome.cjs check --write --unsafe --only=nursery/useSortedClasses . && node ../../../../scripts/biome.cjs check --write .
lint:checknode ../../../../scripts/biome.cjs check .
testbun test --pass-with-no-tests
prebuildcontractspec-bun-build prebuild
typechecktsgo --noEmit
← Package directoryMore in Interfaces, presentations and design →
Your view

Make room for your context.

Shape the presentation around this moment. You can change it whenever you need.

Your context

The different parts of you

Choose a starting point

A useful mix of context, visuals and gentle guidance.

Tune each dimension
Each dimension can change independently. Product permissions and available actions stay unchanged.

Support the way you begin and return

Tune your support

Reading comfort

Choose your language

Interface language changes text only. Markets, prices and workflows keep their own settings.

Translation coverage

Original source

Navigation151
Graph616
Categories378
Portfolio833
Examples2,035
Source preview1,542

More translations will be added as content is reviewed.

This preference is saved on this browser.

Search the website

Useful starting points

No results. Try a shorter phrase, an operation name or another search area.

A LITTLE ROOM TO EXPLORE

Find something to explore.

Open a closer look on this page, try a different perspective, or follow the detail into its own page.

How previews and controls work
01

Look before you leave

Hover a link or focus it with Tab to see a preview. Clicking the original link or pressing Enter always opens its destination.

02

Stay with the context

Move into the preview to explore its sections. Use Alt + ↓ from a focused link to enter it with the keyboard. Escape closes it.

03

Open the possibilities

Disclosure rows, perspective choices and highlighted controls reveal more. Your view changes reading comfort and the context you explore.

A separate button for a closer look

Show small preview buttons beside links where there is room. Tap the eye to inspect, or tap the link to go straight there. This choice stays in this tab.

No browsing history is collected. Reduced motion follows your device and Your view.