@axle-lang/ui

The Axle design system — a content-agnostic Svelte 5 + Tailwind v4 component library, shared by the Axle landing and docs sites.

It holds presentation only: components, the design tokens (src/lib/app.css), the syntax tokenizer, the small utils (cn / cva variants / icons), the cross-domain routing helpers, and the i18n chrome catalog (UI labels). It contains no page content — prose, the stdlib reference and benchmarks are generated in the axle repo and injected by the apps at build time.

src/lib/
├── index.ts      public barrel
├── app.css       Tailwind v4 tokens (the single source of truth)
├── components/   atoms · molecules · code · nav · landing · layout · reference
├── i18n/         synchronous svelte-i18n setup + chrome catalog + K keys
├── site/         site.ts (buildSite / route / setSite / getSite) · version.ts
└── utils/        cn · variants (cva) · tokenizer · icons · types

Consuming it

The package is source-typed and built with @sveltejs/package to dist/ (with .d.ts). Peer dependencies — svelte, @sveltejs/kit (for the route-aware Seo / Sidebar), and svelte-i18n (one shared locale store) — are provided by the consuming app.

Published to npm as a public package:

// in each app's package.json
"dependencies": {
  "@axle-lang/ui": "^0.1.0"
}

import { Header, Footer, Seo, initI18n, setSite, buildSite, K } from '@axle-lang/ui';
import '@axle-lang/ui/app.css';

i18n labels are referenced through the K keys object (never raw string literals): $t(K.nav.guide).

Develop

pnpm install
pnpm dev        # the in-repo gallery (src/routes) — visual smoke test
pnpm check      # svelte-check (TypeScript)
pnpm lint       # prettier --check + eslint
pnpm package    # build dist/ + publint
pnpm format

Publishing

Published to npmjs under the @axle-lang scope (public).

• Automated (preferred): publishing a GitHub Release triggers .github/workflows/publish.yml, which runs pnpm publish with the NPM_TOKEN repo secret. prepare builds dist/ before packing and publishConfig.access makes the scoped package public.
• Manual: npm login then pnpm publish.

Bump the version first with npm version patch|minor|major, then push --follow-tags and cut the Release. Requires the @axle-lang npm org.