@czap/core
Creates the definitions — boundaries (named states over a numeric signal), design tokens, styles, themes — that the rest of LiteShip compiles to CSS and evaluates at runtime.
Install this directly when you want the definition primitives without a framework integration. If you're starting a new project, start with liteship or @czap/astro instead.
Install
pnpm add @czap/core effect@beta
effect is the one peer dependency and it must be the Effect 4 beta (effect@beta) — a bare pnpm add effect installs 3.x and fails the peer check.
30 seconds
import { Boundary } from '@czap/core';
const viewport = Boundary.make({
input: 'viewport.width',
at: [
[0, 'mobile'],
[768, 'tablet'],
[1280, 'desktop'],
],
hysteresis: 20,
});
console.log(Boundary.evaluate(viewport, 800));
console.log(viewport.id);
Logs tablet (800 sits between the 768 and 1280 thresholds), then the boundary's content address — the same address on every machine, because it is computed from the definition itself. The hysteresis: 20 is a dead zone that stops state flicker right at a threshold.
Where it sits
This is the foundation layer — every other @czap/* package imports its primitives. Its one @czap dependency is @czap/_spine, the shared type declarations its published types reference. Two things commonly assumed to be here live elsewhere: live evaluation against a changing signal is @czap/quantizer, and compiling definitions to CSS text is @czap/compiler. It does own the canonical signal-input vocabulary, though: SignalSource ⇄ SignalInput via sourceToInput/inputToSource — the source of truth for input strings like viewport.width, scroll.progress, audio.amplitude that every host reads through rather than re-parsing. See the
package surfaces map
for the full layout.
Docs
Part of LiteShip — powered by the CZAP engine (Content-Zoned Adaptive Projection), distributed as @czap/* packages.