@nikkory/vibe-engine 4.0.0

package/dist/ui-studio/matrix/ClassMapper.d.ts

@@ -0,0 +1,128 @@
+/**
+ * ClassMapper - Maps factor VALUES to Tailwind CSS classes
+ *
+ * **Role in Architecture**: Handles USER OVERRIDES (non-default values)
+ *
+ * This class complements design-systems-registry by providing value-specific mappings:
+ *
+ * - **Registry**: Stores DEFAULT values per design system
+ *   - Example: Material Design Factor 2 (Size) = 'md' → 'h-10 px-6 text-sm'
+ *
+ * - **ClassMapper**: Maps ALL POSSIBLE VALUES to Tailwind classes
+ *   - Example: Factor 2 (Size):
+ *     - 'xs' → 'h-6 px-2 text-xs'
+ *     - 'sm' → 'h-8 px-4 text-sm'
+ *     - 'md' → 'h-10 px-6 text-sm'
+ *     - 'lg' → 'h-12 px-8 text-base'
+ *     - 'xl' → 'h-14 px-10 text-lg'
+ *
+ * **Implementation Status**: 3/24 factors (incremental)
+ *
+ * Part of the Matrix Multiplication system (Matrix 2 × Matrix 4).
+ * Maps resolved factor values to corresponding Tailwind CSS classes.
+ *
+ * @packageDocumentation
+ * @module matrix/class-mapper
+ * @category matrix
+ * @since 1.0.0
+ *
+ * Powered by Nikkory
+ */
+import type { IClassMapper, FactorId, FactorValue } from './types';
+/**
+ * ClassMapper - Maps factor values to Tailwind CSS classes
+ *
+ * This class implements Matrix 2 × Matrix 4 multiplication by:
+ * 1. Taking resolved factor values (from FACTOR_REGISTRY + overrides)
+ * 2. Mapping each value to its corresponding Tailwind class
+ * 3. Filtering based on factor applicability (Matrix 4)
+ *
+ * @category matrix
+ * @since 1.0.0
+ *
+ * @example
+ * ```typescript
+ * const mapper = new ClassMapper();
+ * const className = mapper.mapToClass(4, 'md'); // Factor 4 = borderRadius
+ * console.log(className); // → 'rounded-md'
+ * ```
+ *
+ * Powered by Nikkory
+ */
+export declare class ClassMapper implements IClassMapper {
+    /**
+     * Map factor 4 (borderRadius) to Tailwind class
+     *
+     * @param value - Border radius value ('none', 'sm', 'md', 'lg', 'xl', '2xl', 'full')
+     * @returns Tailwind class string or null if not mapped
+     *
+     * @example
+     * ```typescript
+     * mapBorderRadius('md')   // → 'rounded-md'
+     * mapBorderRadius('none') // → 'rounded-none'
+     * mapBorderRadius('full') // → 'rounded-full'
+     * ```
+     */
+    private mapBorderRadius;
+    /**
+     * Map factor 5 (shadowStyle) to Tailwind class
+     *
+     * @param value - Shadow style value ('none', 'sm', 'md', 'lg', 'xl', '2xl')
+     * @returns Tailwind class string or null if not mapped
+     *
+     * @example
+     * ```typescript
+     * mapShadowStyle('md')   // → 'shadow-md'
+     * mapShadowStyle('none') // → 'shadow-none'
+     * mapShadowStyle('2xl')  // → 'shadow-2xl'
+     * ```
+     */
+    private mapShadowStyle;
+    /**
+     * Map factor 17 (spacing) to Tailwind class
+     *
+     * @param value - Spacing value ('none', 'sm', 'md', 'lg', 'xl')
+     * @returns Tailwind class string or null if not mapped
+     *
+     * @example
+     * ```typescript
+     * mapSpacing('md')   // → 'px-4 py-2'
+     * mapSpacing('none') // → 'p-0'
+     * mapSpacing('xl')   // → 'px-8 py-4'
+     * ```
+     */
+    private mapSpacing;
+    /**
+     * Map factor value to Tailwind class
+     *
+     * This is the main entry point for the ClassMapper.
+     * It dispatches to the appropriate mapper function based on factor ID.
+     *
+     * @param factorId - Factor ID (1-24)
+     * @param value - Factor value from design system or override
+     * @returns Tailwind class string or null if not mapped
+     *
+     * @example
+     * ```typescript
+     * const mapper = new ClassMapper();
+     *
+     * // Factor 4 = borderRadius
+     * mapper.mapToClass(4, 'md'); // → 'rounded-md'
+     *
+     * // Factor 5 = shadowStyle
+     * mapper.mapToClass(5, 'lg'); // → 'shadow-lg'
+     *
+     * // Factor 17 = spacing
+     * mapper.mapToClass(17, 'sm'); // → 'px-2 py-1'
+     *
+     * // Unknown factor
+     * mapper.mapToClass(999, 'value'); // → null
+     * ```
+     */
+    mapToClass(factorId: FactorId, value: FactorValue): string | null;
+}
+/**
+ * Export ClassMapper for use in matrix-resolver
+ */
+export { ClassMapper as default };
+//# sourceMappingURL=ClassMapper.d.ts.map

package/dist/ui-studio/matrix/MatrixResolver.d.ts

@@ -0,0 +1,203 @@
+/**
+ * MatrixResolver - Orchestrates matrix multiplication for code generation
+ *
+ * Formula: Component = Matrix1 × Matrix2 × Matrix3 × Matrix4 + Override
+ *
+ * This module implements the core matrix multiplication algorithm:
+ * - Matrix 1: Component → HTML Element (from COMPONENT_REGISTRY)
+ * - Matrix 2: Factor → Design System Default Value (from FACTOR_REGISTRY)
+ * - Matrix 3: Tier → React Patterns (basic/standard/enterprise)
+ * - Matrix 4: Factor Applicability (Component × 24 Factors)
+ *
+ * **Tailwind Class Resolution Strategy** (Hybrid Approach):
+ *
+ * This resolver uses a two-tier approach to avoid duplicate mappings:
+ *
+ * 1. **User Overrides** (factor.source === 'override'):
+ *    → ClassMapper.mapToClass(factorId, value)
+ *    → Supports ALL possible values (xs, sm, md, lg, xl, etc.)
+ *    → Example: User sets size='lg' → 'h-12 px-8 text-base'
+ *
+ * 2. **Design System Defaults** (factor.source === 'default'):
+ *    → design-systems-registry.getFactorValue(designSystem, factorId)
+ *    → 288 pre-defined mappings (12 design systems × 24 factors)
+ *    → Example: Material Design size default → 'h-10 px-6 text-sm'
+ *
+ * This approach achieves:
+ * - ✅ No duplicate mappings (each system handles its domain)
+ * - ✅ Easy updates (defaults in registry, value mappings in ClassMapper)
+ * - ✅ Extensibility (add new possible values without touching registry)
+ *
+ * @packageDocumentation
+ * @module matrix/matrix-resolver
+ * @category matrix
+ * @since 1.0.0
+ *
+ * Powered by Nikkory
+ */
+import type { IMatrixResolver, MatrixResolverInput, ResolvedComponentConfig } from './types';
+/**
+ * MatrixResolver - Orchestrates matrix multiplication for code generation
+ *
+ * @category matrix
+ * @since 1.0.0
+ *
+ * @example
+ * ```typescript
+ * const resolver = new MatrixResolver();
+ * const config = resolver.resolve({
+ *   componentId: 'button',
+ *   designSystem: 'material-design',
+ *   tier: 'enterprise',
+ *   factor24Config: { 4: 'lg', 5: 'md' }
+ * });
+ * console.log(config.componentName); // → 'ButtonMaterialDesignEnterprise'
+ * console.log(config.classNames); // → ['rounded-lg', 'shadow-md', ...]
+ * ```
+ *
+ * Powered by Nikkory
+ */
+export declare class MatrixResolver implements IMatrixResolver {
+    private classMapper;
+    constructor();
+    /**
+     * Matrix 1: Component → HTML Element
+     * Source: COMPONENT_REGISTRY
+     *
+     * @param componentId - Component identifier (e.g., 'button', 'input')
+     * @returns Element type and category
+     *
+     * @example
+     * ```typescript
+     * resolveMatrix1('button') // → { elementType: 'button', category: 'Interactive' }
+     * resolveMatrix1('input') // → { elementType: 'input', category: 'Interactive' }
+     * resolveMatrix1('card') // → { elementType: 'div', category: 'Container' }
+     * ```
+     */
+    private resolveMatrix1;
+    /**
+     * Matrix 2: Factor → Design System Default Value
+     * Source: FACTOR_REGISTRY with user overrides
+     *
+     * @param designSystem - Design system identifier
+     * @param factor24Config - User overrides (dto.factor24Config)
+     * @returns Array of resolved factor values with sources
+     *
+     * @example
+     * ```typescript
+     * // No overrides
+     * resolveMatrix2('material-design', undefined)
+     * // → [{ factorId: 1, value: '#1976D2', source: 'default' }, ...]
+     *
+     * // With overrides
+     * resolveMatrix2('material-design', { 4: 'lg' })
+     * // → [
+     * //   { factorId: 4, value: 'lg', source: 'override' },
+     * //   { factorId: 1, value: '#1976D2', source: 'default' },
+     * //   ...
+     * // ]
+     * ```
+     */
+    private resolveMatrix2;
+    /**
+     * Matrix 3: Tier → React Patterns
+     *
+     * Maps tier to corresponding React patterns (imports, wrappers, features).
+     *
+     * @param tier - Quality tier (basic/standard/enterprise)
+     * @returns React patterns for the tier
+     *
+     * @example
+     * ```typescript
+     * resolveMatrix3('basic')
+     * // → {
+     * //   tier: 'basic',
+     * //   imports: ["import * as React from 'react';"],
+     * //   wrappers: ['React.FC'],
+     * //   features: []
+     * // }
+     *
+     * resolveMatrix3('enterprise')
+     * // → {
+     * //   tier: 'enterprise',
+     * //   imports: ["import * as React from 'react';", ...],
+     * //   wrappers: ['memo', 'forwardRef'],
+     * //   features: ['displayName', 'analytics']
+     * // }
+     * ```
+     */
+    private resolveMatrix3;
+    /**
+     * Matrix 4: Factor Applicability (Component × Factor)
+     * Source: COMPONENT_REGISTRY.factorApplicability
+     *
+     * @param componentId - Component identifier
+     * @returns Applicable factor IDs for this component
+     *
+     * @example
+     * ```typescript
+     * resolveMatrix4('button')
+     * // → { applicableFactors: [1, 2, 3, 4, 6, 7, 8, ...] }
+     *
+     * resolveMatrix4('input')
+     * // → { applicableFactors: [1, 2, 3, 4, 7, 10, ...] }
+     * ```
+     */
+    private resolveMatrix4;
+    /**
+     * Format component name (PascalCase)
+     *
+     * @param componentId - Component identifier (kebab-case)
+     * @param designSystem - Design system identifier (kebab-case)
+     * @param tier - Quality tier
+     * @returns Formatted component name
+     *
+     * @example
+     * ```typescript
+     * formatComponentName('button', 'material-design', 'enterprise')
+     * // → 'ButtonMaterialDesignEnterprise'
+     *
+     * formatComponentName('radio-group', 'ios-hig', 'standard')
+     * // → 'RadioGroupIosHigStandard'
+     * ```
+     */
+    private formatComponentName;
+    /**
+     * Resolve complete component configuration using matrix multiplication
+     *
+     * Formula: Component = Matrix1 × Matrix2 × Matrix3 × Matrix4 + Override
+     *
+     * @param input - Matrix resolver input
+     * @returns Resolved component configuration ready for template generation
+     *
+     * @example
+     * ```typescript
+     * const resolver = new MatrixResolver();
+     *
+     * const config = resolver.resolve({
+     *   componentId: 'button',
+     *   designSystem: 'material-design',
+     *   tier: 'enterprise',
+     *   factor24Config: { 4: 'lg', 5: 'md' }
+     * });
+     *
+     * console.log(config);
+     * // {
+     * //   componentName: 'ButtonMaterialDesignEnterprise',
+     * //   elementType: 'button',
+     * //   tier: 'enterprise',
+     * //   designSystem: 'material-design',
+     * //   classNames: ['rounded-lg', 'shadow-md', 'px-4', 'py-2', ...],
+     * //   imports: ["import * as React from 'react';", ...],
+     * //   wrappers: ['memo', 'forwardRef'],
+     * //   features: ['displayName', 'analytics']
+     * // }
+     * ```
+     */
+    resolve(input: MatrixResolverInput): ResolvedComponentConfig;
+}
+/**
+ * Export MatrixResolver as default
+ */
+export { MatrixResolver as default };
+//# sourceMappingURL=MatrixResolver.d.ts.map

package/dist/ui-studio/matrix/types.d.ts

@@ -0,0 +1,96 @@
+import type { DesignSystem, Tier } from '../types';
+/**
+ * Factor ID (1-24)
+ * Source: packages/engine/src/registries/components-registry.ts:53-80
+ */
+export type FactorId = number;
+/**
+ * Factor value resolved from design system
+ */
+export type FactorValue = string | number | boolean | null;
+/**
+ * Factor configuration (24 factors)
+ * Key: factor ID, Value: user override or resolved value
+ */
+export interface Factor24Config {
+    readonly [factorId: number]: FactorValue;
+}
+/**
+ * Matrix 1: Component → HTML Element
+ * Source: packages/engine/src/registries/components-registry.ts
+ */
+export interface Matrix1Result {
+    readonly elementType: string;
+    readonly category: string;
+}
+/**
+ * Matrix 2: Factor → Design System Default Value
+ * Source: packages/engine/src/presets/factor-registry.ts
+ */
+export interface Matrix2Result {
+    readonly factorId: FactorId;
+    readonly value: FactorValue;
+    readonly source: 'override' | 'parent' | 'default';
+}
+/**
+ * Matrix 3: Tier → React Patterns
+ */
+export interface Matrix3Result {
+    readonly tier: Tier;
+    readonly imports: readonly string[];
+    readonly wrappers: readonly string[];
+    readonly features: readonly string[];
+}
+/**
+ * Matrix 4: Factor Applicability (Component × Factor)
+ * Source: packages/engine/src/registries/components-registry.ts
+ */
+export interface Matrix4Result {
+    readonly applicableFactors: readonly FactorId[];
+}
+/**
+ * Final resolved component configuration
+ */
+export interface ResolvedComponentConfig {
+    readonly componentName: string;
+    readonly elementType: string;
+    readonly tier: Tier;
+    readonly designSystem: DesignSystem;
+    readonly classNames: readonly string[];
+    readonly imports: readonly string[];
+    readonly wrappers: readonly string[];
+    readonly features: readonly string[];
+}
+/**
+ * Class mapper interface
+ */
+export interface IClassMapper {
+    /**
+     * Map factor value to Tailwind class
+     * @param factorId - Factor ID (1-24)
+     * @param value - Factor value
+     * @returns Tailwind class string or null if not applicable
+     */
+    mapToClass(factorId: FactorId, value: FactorValue): string | null;
+}
+/**
+ * Matrix resolver interface
+ */
+export interface IMatrixResolver {
+    /**
+     * Resolve component configuration using matrix multiplication
+     * @param input - Input parameters
+     * @returns Resolved component configuration
+     */
+    resolve(input: MatrixResolverInput): ResolvedComponentConfig;
+}
+/**
+ * Matrix resolver input
+ */
+export interface MatrixResolverInput {
+    readonly componentId: string;
+    readonly designSystem: DesignSystem;
+    readonly tier: Tier;
+    readonly factor24Config?: Factor24Config;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/ui-studio/presets/IndustryDetector.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Industry Detector
+ *
+ * Detects industry from user input using keyword matching and scoring.
+ * Provides intelligent industry detection for automatic preset recommendations.
+ *
+ * @packageDocumentation
+ * @module presets/IndustryDetector
+ * @since 2.0.0
+ *
+ * Powered by Nikkory
+ */
+import { type IndustryPreset, type IndustryCategory, type DesignSystemId } from './industries';
+import { type MatrixGroup } from './matrix-groups';
+/**
+ * Detection confidence levels.
+ */
+export type DetectionConfidence = 'high' | 'medium' | 'low' | 'none';
+/**
+ * Detection result with confidence scoring.
+ */
+export interface DetectionResult {
+    /** Detected industry preset */
+    readonly preset: IndustryPreset | null;
+    /** Confidence level */
+    readonly confidence: DetectionConfidence;
+    /** Numeric confidence score (0-100) */
+    readonly score: number;
+    /** Matched keywords */
+    readonly matchedKeywords: readonly string[];
+    /** Alternative industry matches */
+    readonly alternatives: readonly AlternativeMatch[];
+}
+/**
+ * Alternative industry match.
+ */
+export interface AlternativeMatch {
+    /** Industry preset */
+    readonly preset: IndustryPreset;
+    /** Confidence score */
+    readonly score: number;
+    /** Matched keywords */
+    readonly matchedKeywords: readonly string[];
+}
+/**
+ * Industry recommendation with components.
+ */
+export interface IndustryRecommendation {
+    /** Industry preset */
+    readonly industry: IndustryPreset;
+    /** Recommended matrix groups */
+    readonly matrixGroups: readonly MatrixGroup[];
+    /** Recommended design systems (ordered by priority) */
+    readonly designSystems: readonly DesignSystemId[];
+    /** Priority components for this industry */
+    readonly priorityComponents: readonly string[];
+    /** Estimated bundle size in KB */
+    readonly estimatedBundleSize: number;
+}
+/**
+ * Detect industry from user input text.
+ *
+ * Uses keyword matching and scoring to find the best matching industry preset.
+ *
+ * @param input - User input text to analyze
+ * @returns Detection result with confidence scoring
+ *
+ * @example
+ * ```typescript
+ * const result = detectIndustry("I'm building a banking app for payments");
+ * // Returns: { preset: financePreset, confidence: 'high', score: 85, ... }
+ * ```
+ */
+export declare function detectIndustry(input: string): DetectionResult;
+/**
+ * Detect multiple industries from input (for mixed-use cases).
+ *
+ * @param input - User input text
+ * @param maxResults - Maximum number of results (default: 3)
+ * @returns Array of detected industries
+ */
+export declare function detectMultipleIndustries(input: string, maxResults?: number): DetectionResult[];
+/**
+ * Get full industry recommendation with components and design systems.
+ *
+ * @param industryId - Industry ID or detected industry
+ * @returns Complete recommendation or null if not found
+ *
+ * @example
+ * ```typescript
+ * const recommendation = getIndustryRecommendation('finance');
+ * // Returns: { industry, matrixGroups, designSystems, priorityComponents, ... }
+ * ```
+ */
+export declare function getIndustryRecommendation(industryId: string): IndustryRecommendation | null;
+/**
+ * Get recommendation from user input (combines detection + recommendation).
+ *
+ * @param input - User input text
+ * @returns Industry recommendation or null if no match
+ *
+ * @example
+ * ```typescript
+ * const rec = getRecommendationFromInput("building a fintech app");
+ * // Returns recommendation for finance industry
+ * ```
+ */
+export declare function getRecommendationFromInput(input: string): IndustryRecommendation | null;
+/**
+ * Get all available industry IDs.
+ */
+export declare function getAvailableIndustries(): string[];
+/**
+ * Get industry preset by ID.
+ */
+export declare function getIndustryPreset(id: string): IndustryPreset | undefined;
+/**
+ * Get industries by category.
+ */
+export declare function getIndustriesByCategory(category: IndustryCategory): IndustryPreset[];
+/**
+ * Search industries by keyword.
+ *
+ * @param keyword - Search keyword
+ * @returns Matching industries
+ */
+export declare function searchIndustries(keyword: string): IndustryPreset[];
+/**
+ * Validate if an industry ID exists.
+ */
+export declare function isValidIndustry(id: string): boolean;
+/**
+ * Get design system recommendations for multiple industries.
+ * Useful for projects that span multiple industries.
+ *
+ * @param industryIds - Array of industry IDs
+ * @returns Aggregated design system recommendations
+ */
+export declare function getAggregatedDesignSystems(industryIds: string[]): DesignSystemId[];
+/**
+ * Industry Detector API.
+ *
+ * Provides methods for detecting industries from user input
+ * and getting recommendations.
+ *
+ * @example
+ * ```typescript
+ * import { IndustryDetector } from '@nikkory/vibe-core';
+ *
+ * // Detect industry from text
+ * const result = IndustryDetector.detect("building a banking app");
+ *
+ * // Get recommendation
+ * const rec = IndustryDetector.getRecommendation('finance');
+ *
+ * // Get recommendation from input
+ * const autoRec = IndustryDetector.fromInput("fintech payment gateway");
+ * ```
+ */
+export declare const IndustryDetector: {
+    /** Detect industry from input text */
+    detect: typeof detectIndustry;
+    /** Detect multiple industries */
+    detectMultiple: typeof detectMultipleIndustries;
+    /** Get recommendation for industry ID */
+    getRecommendation: typeof getIndustryRecommendation;
+    /** Get recommendation from input text */
+    fromInput: typeof getRecommendationFromInput;
+    /** Get all available industry IDs */
+    getAvailable: typeof getAvailableIndustries;
+    /** Get industry preset by ID */
+    getPreset: typeof getIndustryPreset;
+    /** Get industries by category */
+    getByCategory: typeof getIndustriesByCategory;
+    /** Search industries by keyword */
+    search: typeof searchIndustries;
+    /** Validate industry ID */
+    isValid: typeof isValidIndustry;
+    /** Get aggregated design systems for multiple industries */
+    getAggregatedDesignSystems: typeof getAggregatedDesignSystems;
+};
+export default IndustryDetector;
+//# sourceMappingURL=IndustryDetector.d.ts.map