Dependency Management

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• cubic.yaml
• tsconfig.json
• src/index.ts
• src/provider/index.tsx

Introduction

Dependency management in the @pcstyle/ui project is centered around providing a robust, type-safe design system and component library that supports dual-theme environments. The project utilizes a modern ESM-first approach, ensuring compatibility with both ECMAScript Modules and CommonJS consumers while maintaining strict versioning discipline.

The management strategy involves distinct separation between runtime dependencies, peer dependencies for host environment compatibility, and development-only tools. This ensures that the published library remains lightweight while enforcing necessary constraints on the consuming applications, such as minimum React versions and animation engine requirements.

Sources: package.json:1-10, cubic.yaml:12-14

Dependency Categories

The project categorizes its dependencies to optimize the build process and ensure interoperability with React-based ecosystems.

Peer Dependencies

Peer dependencies define the environment requirements for the UI library. By specifying these, the library avoids bundling its own versions of massive frameworks, preventing "multiple instances" bugs in consumer applications.

Package	Version	Purpose
react	>=18	Core UI framework
react-dom	>=18	DOM rendering engine
framer-motion	>=10	Animation and gesture engine
lucide-react	>=0.200	Icon library support

Sources: package.json:34-39

Development Dependencies

These dependencies are used exclusively during the development and build phases. They include TypeScript for compilation, type definitions for React, and the actual animation/icon libraries used during local testing and component development.

Sources: package.json:40-48

Module Resolution and Compilation

The project uses TypeScript with a specific configuration to handle module resolution and output generation. The build process targets ES2020 and uses the bundler resolution strategy to align with modern web development workflows.

Export Strategy

The library exposes three primary entry points to allow for tree-shaking and modular imports:

1. Root (.): Provides access to core components and providers.
2. Theme (./theme): Exposes color palettes and design tokens.
3. Effects (./effects): Provides specialized UI overlays like CRT and Neural Cursors.

Sources: package.json:8-21, src/index.ts:1-14, tsconfig.json:2-12

Quality and Integrity Standards

The project implements automated checks to maintain dependency and code integrity through the cubic configuration.

Strict Rules

• STRICT_TYPES: Prohibits the use of any types or non-null assertions to ensure deep type safety across public APIs.
• ESM_STANDARDS: Verifies that package exports satisfy both ESM and CJS consumers.
• Ignored Paths: Build artifacts (dist/), dependency folders (node_modules/), and lock files are explicitly excluded from architectural reviews to focus on source logic.

Sources: cubic.yaml:18-30, tsconfig.json:15-16

Runtime Context and Integration

At runtime, the library manages dependencies through a centralized UIProvider. This provider acts as the integration point for the design system, applying theme-specific CSS variables and wrapping the application in a styled root container.

Conclusion

The dependency management system of @pcstyle/ui is designed for strictness and compatibility. By leveraging peer dependencies, the project ensures it integrates seamlessly into modern React 18+ environments, while its internal configuration guarantees type safety and standardized ESM exports for high-performance UI development.