admin
0 Followers · 0 Following
  • Joined on 2026-02-18
Repositories Projects Packages Public Activity Starred Repositories

@assemblcorp/theme-editor (1.0.5)

Published 2026-02-28 21:07:35 +00:00 by admin

Installation

@assemblcorp:registry=
npm install @assemblcorp/theme-editor@1.0.5
"@assemblcorp/theme-editor": "1.0.5"

About this package

@assemblcorp/theme-editor

Interactive theme generator wizard with 5-step guided UI for visual theme creation and customization.

Exports

Components & Providers:

import {
  ThemeGeneratorWizard,           // Main 5-step form
  ThemeGeneratorWizardProvider,   // State + preview management
} from '@assemblcorp/theme-editor'

import { useThemePreviewSync } from '@assemblcorp/theme-editor'

Types & Constants:

import type { ThemeWizardFormData } from '@assemblcorp/theme-editor'
import { DEFAULT_THEME_FORM_DATA, PERSONALITY_TRAITS, FONT_PAIRINGS } from '@assemblcorp/theme-editor'

Dependencies

{
  "@assemblcorp/ui": "workspace:*",
  "@assemblcorp/themes": "workspace:*",
  "@assemblcorp/shared": "workspace:*",
  "react": "^18.0+ || ^19.0+",
  "zod": "^4.2+"
}

Quick Start

import { ThemeGeneratorWizardProvider, ThemeGeneratorWizard } from '@assemblcorp/theme-editor'

export function ThemeCreationPage() {
  return (
    <ThemeGeneratorWizardProvider onThemeCreated={handleThemeCreated}>
      <ThemeGeneratorWizard />
    </ThemeGeneratorWizardProvider>
  )
}

Build & Test

pnpm -C packages/theme-editor build
pnpm -C packages/theme-editor typecheck
pnpm -C packages/theme-editor test

Testing

Comprehensive unit test coverage (80+ tests):

  • ThemeGeneratorWizardProvider (16 tests): Provider initialization, form setup, callback handling
  • useGoogleFontLoader (21 tests): Font URL construction, DOM injection, system font filtering
  • useColorSchemeDetection (28 tests): DOM color scheme detection, callback behavior, SSR support
  • theme-form-utils (15 tests): Type conversion utilities and font family mapping

Run tests with:

pnpm test unit --filter theme-editor
pnpm test unit --filter theme-editor --coverage

Architecture

5-Step Wizard Flow:

  1. Color selection (primary + accents)
  2. Personality & archetype detection
  3. Typography configuration
  4. Density, radius, font-size modes
  5. Preview & export

Data Flow: User input → Form state → Preview sync → Theme injection

Separation of Concerns: Intentionally separate from @assemblcorp/ui (optional feature, advanced domain logic)

License

MIT

Dependencies

Dependencies

ID Version
@assemblcorp/kernel 1.0.8
@assemblcorp/shared 1.0.8
terser ^5.46.0

Development Dependencies

ID Version
@types/react ^19.2.14
@typescript/native-preview 7.0.0-dev.20260225.1
@vitejs/plugin-react ^5.1.4
typescript npm:@typescript/native-preview@7.0.0-dev.20260225.1
vite 8.0.0-beta.15

Peer Dependencies

ID Version
@assemblcorp/themes 1.0.8
@assemblcorp/ui 1.0.35
lucide-react >=0.400.0
react ^18.0.0 || ^19.0.0
react-dom ^18.0.0 || ^19.0.0
zod ^4.0.0

Keywords

theme wizard theme-generator interactive react jax-ui design-system
Details
npm
2026-02-28 21:07:35 +00:00
2095
Project Site
MIT
48 KiB
Assets (1)
theme-editor-1.0.5.tgz 48 KiB
Versions (2) View all
1.0.6 2026-04-01
1.0.5 2026-02-28