Juntai Design System

Shared, framework-level presentation primitives for Juntai Console and first-party Micro-UIs. This package owns design tokens, themes, accessible components, and visual documentation. It does not own application workflows, domain clients, session behavior, or shell routing.

The visual source of truth is Juntai Console — Product UI Review, with the Feishu Console and Micro-UI design controlling ownership and behavior.

Install

npm install @zephytiju/juntai-design-system

Load the package styles once at the application composition root:

import "@zephytiju/juntai-design-system/styles.css";
import {
  Button,
  StatusBadge,
  ThemeScope,
} from "@zephytiju/juntai-design-system";

export function Example() {
  return (
    <ThemeScope theme="light">
      <Button>Open service catalog</Button>
      <StatusBadge status="running">Running</StatusBadge>
    </ThemeScope>
  );
}

Consumers may import tokens.css and themes.css separately when they need tokens without component rules. Components use semantic --juntai-* variables rather than fixed product-specific values.

Components

• Button — primary, secondary, quiet, and destructive actions with loading and icon slots.
• StatusBadge — non-color-only status communication for success, running, warning, draft, queued, and error states.
• NavItem — link or button navigation with aria-current, keyboard focus, and disabled behavior.
• TextField — labeled text input with description and error associations.
• Card, Stack, Inline, and VisuallyHidden — reusable layout and accessibility primitives.
• GlobalHeader — the presentational Juntai header contract. Consumers supply all navigation and interaction behavior.
• ThemeScope — explicit light, dark, or system theme scoping without owning global application state.

See the local gallery with npm run docs:dev.

Verification

npm ci
npx playwright install chromium
npm run verify

verify runs formatting, type checking, unit and accessibility tests, package and docs builds, tarball consumer checks, and deterministic Chromium snapshots. The CI workflow uploads the exact tarball and visual report.

See CONTRIBUTING.md for ownership boundaries, review expectations, and the versioning workflow.

Release

1. Update version and CHANGELOG.md in a reviewed pull request.
2. Merge only after required checks pass.
3. Create a signed tag matching the package version, for example v0.1.0.
4. The release workflow rebuilds, reruns verification, creates the npm tarball, publishes through npm trusted publishing with provenance, and attaches the same tarball to the GitHub release.

The npm package name @zephytiju/juntai-design-system is the public integration boundary. Consumers must install an immutable released version and must not import this repository's source tree.