@bitspark-ai/design

The Bitspark design system — design tokens, Svelte 5 components, framework-pure UI recipes, and a reactive display clock, shipped as one package under one semver.

Published from a private source, installable with no registry auth.

npm i @bitspark-ai/design
# Svelte 5 is a peer dependency — the consumer supplies it:
npm i svelte

Quick start

Load the tokens + base stylesheet once (required — components are styled through the token layer), then import components and utilities from the barrel:

// once, at your app root:
import '@bitspark-ai/design/css';

<script>
  import { Button, DataTable, StatCard } from '@bitspark-ai/design';
  import { formatDuration, staleness } from '@bitspark-ai/design';
</script>

<StatCard label="Uptime" value="99.98%" tone="success" />
<Button loading={submitting}>Publish</Button>

What's inside

• ~93 components — primitives (Button, Badge, Icon, Card…), data & metric surfaces (DataTable, StatCard, Meter, DecayMeter, Sparkline, BarChart…), navigation & shell (AppShell, SideNav, MarketingNav, Breadcrumbs…), live-ops (LiveStatusBar, LivenessStatus, Lane / LaneGroup / ConnectorNode…), and the changelog family (ReleaseFeed, ReleaseBanner…). Every component's metadata is machine-readable via ./catalog.
• Design tokens — colour, surface, spacing, type, and motion tokens as CSS custom properties (./css, ./*.css) and as typed JS values (./tokens).
• UI recipes & actions — small, framework-pure, tree-shakeable utilities exported from the barrel:
  • formatting — formatDuration, formatBytes, formatRelativeTime, shortModelName
  • state & colour — classifyFreshness, thresholdColor, utilizationColor, rowStateClasses, deltaText/deltaClass
  • collection-at-scale — pressure (occupancy + hot), staleness (duration → warm→cold), adaptive (representation by count)
  • motion — use:travel (keyed FLIP move) and use:flight (source→target enter), plus prefersReducedMotion, valueChange, motionMs
  • navigation & misc — paginationMode, collapseBreadcrumbs, tabIndicator, toastStore
• ./time — a reactive display clock and time formatters (duration, relative time, cost), safe to share across the kit under the same semver.

All utilities carry full JSDoc; import from @bitspark-ai/design and your editor surfaces the signatures.

Subpath exports

| Import | What | |--------|------| | @bitspark-ai/design | components + recipes + actions (the barrel) | | @bitspark-ai/design/css | the aggregate tokens + base stylesheet (import once) | | @bitspark-ai/design/tokens | design tokens as typed JS values | | @bitspark-ai/design/base.css · /motion.css · /portal.css | individual style layers | | @bitspark-ai/design/time | the reactive display clock + time formatters | | @bitspark-ai/design/catalog | machine-readable component metadata | | @bitspark-ai/design/roles | component role/kind classification |

Framework

Built with svelte-package — Svelte 5 source ships to dist/ (not pre-compiled), so your bundler compiles it in your app's Svelte context. Svelte ^5.55.1 is a peerDependency. Components are framework-pure: no SvelteKit $app/* imports — navigation is injected through a resolveHref seam, so any Svelte 5 app can consume the kit. CSS carries side effects (sideEffects: ["**/*.css"]), so your bundler keeps the imported styles while tree-shaking unused JS.

License

UNLICENSED — world-installable, all rights reserved. Not open-source; installable from a private source with no auth. See the repository for terms.