microui-wc 0.1.0

package/src/core/component-schema.js

@@ -0,0 +1,287 @@
+/**
+ * @fileoverview Component Schema API for AI Agents
+ * 
+ * Provides JSON Schema exports for each microUI component.
+ * Enables type-safe code generation by AI coding assistants.
+ * 
+ * Based on 2025-2026 research on Structured Outputs and A2UI.
+ * 
+ * @module component-schema
+ */
+
+// Component definitions with JSON Schema metadata
+const componentSchemas = new Map();
+
+/**
+ * Base schema structure for all components
+ */
+const createBaseSchema = (tagName, description) => ({
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    $id: `https://microui.dev/schemas/${tagName}.json`,
+    title: tagName,
+    description,
+    type: 'object',
+    properties: {},
+    actions: [],
+    events: [],
+    slots: []
+});
+
+// ============================================
+// COMPONENT SCHEMA DEFINITIONS
+// ============================================
+
+componentSchemas.set('mu-button', {
+    ...createBaseSchema('mu-button', 'Interactive button element with MD3 variants'),
+    properties: {
+        variant: {
+            type: 'string',
+            enum: ['filled', 'elevated', 'tonal', 'outlined', 'text', 'danger'],
+            default: 'filled',
+            description: 'Visual style variant'
+        },
+        size: {
+            type: 'string',
+            enum: ['sm', 'md', 'lg'],
+            default: 'md',
+            description: 'Button size'
+        },
+        disabled: {
+            type: 'boolean',
+            default: false,
+            description: 'Whether the button is disabled'
+        }
+    },
+    actions: ['click'],
+    events: ['click'],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-input', {
+    ...createBaseSchema('mu-input', 'Text input field with floating label'),
+    properties: {
+        type: {
+            type: 'string',
+            enum: ['text', 'email', 'password', 'number', 'tel', 'url'],
+            default: 'text'
+        },
+        variant: {
+            type: 'string',
+            enum: ['outlined', 'filled'],
+            default: 'outlined'
+        },
+        label: { type: 'string', description: 'Floating label text' },
+        placeholder: { type: 'string' },
+        value: { type: 'string', default: '' },
+        disabled: { type: 'boolean', default: false },
+        required: { type: 'boolean', default: false }
+    },
+    actions: ['focus', 'blur', 'clear'],
+    events: ['mu-input', 'mu-change'],
+    slots: []
+});
+
+componentSchemas.set('mu-checkbox', {
+    ...createBaseSchema('mu-checkbox', 'Checkbox with optional label'),
+    properties: {
+        checked: { type: 'boolean', default: false },
+        disabled: { type: 'boolean', default: false },
+        value: { type: 'string' }
+    },
+    actions: ['toggle', 'check', 'uncheck'],
+    events: ['mu-change'],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-switch', {
+    ...createBaseSchema('mu-switch', 'Toggle switch with on/off state'),
+    properties: {
+        checked: { type: 'boolean', default: false },
+        disabled: { type: 'boolean', default: false }
+    },
+    actions: ['toggle'],
+    events: ['mu-change'],
+    slots: []
+});
+
+componentSchemas.set('mu-card', {
+    ...createBaseSchema('mu-card', 'Material Design 3 card container'),
+    properties: {
+        variant: {
+            type: 'string',
+            enum: ['elevated', 'filled', 'outlined'],
+            default: 'elevated'
+        }
+    },
+    actions: [],
+    events: [],
+    slots: ['default', 'header', 'footer']
+});
+
+componentSchemas.set('mu-modal', {
+    ...createBaseSchema('mu-modal', 'Dialog/modal overlay'),
+    properties: {
+        open: { type: 'boolean', default: false },
+        closeOnEscape: { type: 'boolean', default: true },
+        closeOnBackdrop: { type: 'boolean', default: true }
+    },
+    actions: ['open', 'close'],
+    events: ['mu-open', 'mu-close'],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-dropdown', {
+    ...createBaseSchema('mu-dropdown', 'Select dropdown with options'),
+    properties: {
+        value: { type: 'string' },
+        placeholder: { type: 'string' },
+        disabled: { type: 'boolean', default: false },
+        required: { type: 'boolean', default: false }
+    },
+    actions: ['open', 'close', 'select'],
+    events: ['mu-change'],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-tabs', {
+    ...createBaseSchema('mu-tabs', 'Tab navigation container'),
+    properties: {
+        active: { type: 'number', default: 0, description: 'Active tab index (0-based)' }
+    },
+    actions: ['selectTab'],
+    events: ['mu-tab-change'],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-alert', {
+    ...createBaseSchema('mu-alert', 'Alert/notification banner'),
+    properties: {
+        variant: {
+            type: 'string',
+            enum: ['info', 'success', 'warning', 'error'],
+            default: 'info'
+        },
+        dismissible: { type: 'boolean', default: false }
+    },
+    actions: ['dismiss'],
+    events: ['mu-dismiss'],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-stack', {
+    ...createBaseSchema('mu-stack', 'Flexbox layout container'),
+    properties: {
+        direction: {
+            type: 'string',
+            enum: ['row', 'column'],
+            default: 'column'
+        },
+        gap: {
+            type: 'string',
+            enum: ['xs', 'sm', 'md', 'lg', 'xl'],
+            default: 'md'
+        },
+        align: {
+            type: 'string',
+            enum: ['start', 'center', 'end', 'stretch'],
+            default: 'stretch'
+        }
+    },
+    actions: [],
+    events: [],
+    slots: ['default']
+});
+
+componentSchemas.set('mu-grid', {
+    ...createBaseSchema('mu-grid', 'CSS Grid layout container'),
+    properties: {
+        columns: { type: 'string', default: '1', description: 'Number of columns or CSS grid-template-columns' },
+        gap: { type: 'string', enum: ['xs', 'sm', 'md', 'lg', 'xl'], default: 'md' }
+    },
+    actions: [],
+    events: [],
+    slots: ['default']
+});
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+/**
+ * Get JSON Schema for a specific component
+ * @param {string} tagName - Component tag name (e.g., 'mu-button')
+ * @returns {object|null} JSON Schema object or null if not found
+ */
+export function getComponentSchema(tagName) {
+    return componentSchemas.get(tagName) || null;
+}
+
+/**
+ * Get all available component schemas
+ * @returns {Map<string, object>} Map of tag names to schemas
+ */
+export function getAllSchemas() {
+    return new Map(componentSchemas);
+}
+
+/**
+ * Get list of all schema-documented components
+ * @returns {string[]} Array of tag names
+ */
+export function getSchemaComponents() {
+    return Array.from(componentSchemas.keys());
+}
+
+/**
+ * Get schemas for multiple components at once
+ * @param {string[]} tagNames - Array of component tag names
+ * @returns {object} Object mapping tag names to schemas
+ */
+export function getSchemas(tagNames) {
+    const result = {};
+    for (const tag of tagNames) {
+        const schema = componentSchemas.get(tag);
+        if (schema) result[tag] = schema;
+    }
+    return result;
+}
+
+/**
+ * Get a minimal schema summary for quick reference
+ * @param {string} tagName - Component tag name
+ * @returns {object|null} Simplified schema with just properties and actions
+ */
+export function getSchemaQuickRef(tagName) {
+    const schema = componentSchemas.get(tagName);
+    if (!schema) return null;
+
+    return {
+        tag: tagName,
+        description: schema.description,
+        properties: Object.keys(schema.properties || {}),
+        actions: schema.actions || [],
+        events: schema.events || []
+    };
+}
+
+/**
+ * Export all schemas as JSON for external tools
+ * @returns {string} JSON string of all schemas
+ */
+export function exportSchemasAsJSON() {
+    const allSchemas = {};
+    for (const [tag, schema] of componentSchemas) {
+        allSchemas[tag] = schema;
+    }
+    return JSON.stringify(allSchemas, null, 2);
+}
+
+// Export for module usage
+export const ComponentSchema = {
+    getComponentSchema,
+    getAllSchemas,
+    getSchemaComponents,
+    getSchemas,
+    getSchemaQuickRef,
+    exportSchemasAsJSON
+};

package/src/core/feature-registry.js

@@ -0,0 +1,241 @@
+/**
+ * @fileoverview Feature Registry - Module Organization for Large-Scale Apps
+ * 
+ * Enables feature-based code organization for teams working on 
+ * different parts of a large application.
+ * 
+ * Based on 2024-2025 micro-frontend and module federation patterns.
+ * 
+ * Usage:
+ * const userFeature = microUI.createFeature('user', {
+ *     routes: ['/profile', '/settings'],
+ *     store: userStore,
+ *     components: ['mu-user-card', 'mu-user-form']
+ * });
+ * 
+ * // Query features:
+ * microUI.getFeatures();
+ * microUI.getFeature('user');
+ */
+
+/**
+ * @typedef {Object} FeatureConfig
+ * @property {string[]} [routes] - Routes owned by this feature
+ * @property {Object} [store] - Namespaced store for this feature
+ * @property {string[]} [components] - Component tag names in this feature
+ * @property {Object} [meta] - Additional metadata
+ * @property {Function} [init] - Initialization function
+ * @property {Function} [destroy] - Cleanup function
+ */
+
+/**
+ * @typedef {Object} Feature
+ * @property {string} name - Feature name/namespace
+ * @property {FeatureConfig} config - Feature configuration
+ * @property {boolean} initialized - Whether init() has been called
+ * @property {number} registeredAt - Timestamp when registered
+ */
+
+/**
+ * Registry of all features
+ * @type {Map<string, Feature>}
+ */
+const featureRegistry = new Map();
+
+/**
+ * Create and register a new feature module
+ * 
+ * @param {string} name - Unique feature name (e.g., 'user', 'cart', 'admin')
+ * @param {FeatureConfig} config - Feature configuration
+ * @returns {Feature} The registered feature
+ * 
+ * @example
+ * const userFeature = createFeature('user', {
+ *     routes: ['/profile', '/settings', '/account'],
+ *     store: createNamespacedStore('user', { profile: null }),
+ *     components: ['mu-user-card', 'mu-user-avatar', 'mu-user-form'],
+ *     meta: { version: '1.0.0', team: 'user-team' },
+ *     init: () => console.log('User feature initialized'),
+ *     destroy: () => console.log('User feature cleanup')
+ * });
+ */
+export function createFeature(name, config = {}) {
+    if (featureRegistry.has(name)) {
+        console.warn(`[microUI] Feature "${name}" already exists. Returning existing.`);
+        return featureRegistry.get(name);
+    }
+
+    const feature = {
+        name,
+        config: {
+            routes: config.routes || [],
+            store: config.store || null,
+            components: config.components || [],
+            meta: config.meta || {},
+            init: config.init || null,
+            destroy: config.destroy || null
+        },
+        initialized: false,
+        registeredAt: Date.now()
+    };
+
+    featureRegistry.set(name, feature);
+
+    // Auto-initialize if init function provided
+    if (feature.config.init && typeof feature.config.init === 'function') {
+        try {
+            feature.config.init();
+            feature.initialized = true;
+        } catch (e) {
+            console.error(`[microUI] Failed to initialize feature "${name}":`, e);
+        }
+    }
+
+    return feature;
+}
+
+/**
+ * Get all registered features
+ * @returns {Object<string, Feature>}
+ */
+export function getFeatures() {
+    const features = {};
+    for (const [name, feature] of featureRegistry) {
+        features[name] = feature;
+    }
+    return features;
+}
+
+/**
+ * Get a specific feature by name
+ * @param {string} name 
+ * @returns {Feature|undefined}
+ */
+export function getFeature(name) {
+    return featureRegistry.get(name);
+}
+
+/**
+ * Get all components registered to a feature
+ * @param {string} featureName 
+ * @returns {string[]} Array of component tag names
+ */
+export function getFeatureComponents(featureName) {
+    const feature = featureRegistry.get(featureName);
+    return feature?.config.components || [];
+}
+
+/**
+ * Get all routes registered to a feature
+ * @param {string} featureName 
+ * @returns {string[]} Array of route paths
+ */
+export function getFeatureRoutes(featureName) {
+    const feature = featureRegistry.get(featureName);
+    return feature?.config.routes || [];
+}
+
+/**
+ * Find which feature owns a specific route
+ * @param {string} route 
+ * @returns {Feature|null}
+ */
+export function getFeatureByRoute(route) {
+    for (const feature of featureRegistry.values()) {
+        if (feature.config.routes.some(r => route.startsWith(r))) {
+            return feature;
+        }
+    }
+    return null;
+}
+
+/**
+ * Find which feature owns a specific component
+ * @param {string} componentTag 
+ * @returns {Feature|null}
+ */
+export function getFeatureByComponent(componentTag) {
+    for (const feature of featureRegistry.values()) {
+        if (feature.config.components.includes(componentTag)) {
+            return feature;
+        }
+    }
+    return null;
+}
+
+/**
+ * Destroy and unregister a feature
+ * @param {string} name 
+ */
+export function destroyFeature(name) {
+    const feature = featureRegistry.get(name);
+    if (!feature) return;
+
+    // Call destroy callback if provided
+    if (feature.config.destroy && typeof feature.config.destroy === 'function') {
+        try {
+            feature.config.destroy();
+        } catch (e) {
+            console.error(`[microUI] Error destroying feature "${name}":`, e);
+        }
+    }
+
+    featureRegistry.delete(name);
+}
+
+/**
+ * Get a summary of all features for agent debugging
+ * @returns {Object} Feature summary
+ */
+export function getFeatureSummary() {
+    const summary = {
+        totalFeatures: featureRegistry.size,
+        features: [],
+        totalRoutes: 0,
+        totalComponents: 0
+    };
+
+    for (const [name, feature] of featureRegistry) {
+        const routeCount = feature.config.routes.length;
+        const componentCount = feature.config.components.length;
+
+        summary.features.push({
+            name,
+            routes: routeCount,
+            components: componentCount,
+            hasStore: !!feature.config.store,
+            initialized: feature.initialized,
+            meta: feature.config.meta
+        });
+
+        summary.totalRoutes += routeCount;
+        summary.totalComponents += componentCount;
+    }
+
+    return summary;
+}
+
+/**
+ * Clear all features (for testing)
+ */
+export function clearFeatures() {
+    // Call destroy on each feature first
+    for (const name of featureRegistry.keys()) {
+        destroyFeature(name);
+    }
+    featureRegistry.clear();
+}
+
+// Export as FeatureRegistry object for convenience
+export const FeatureRegistry = {
+    createFeature,
+    getFeatures,
+    getFeature,
+    getFeatureComponents,
+    getFeatureRoutes,
+    getFeatureByRoute,
+    getFeatureByComponent,
+    destroyFeature,
+    getFeatureSummary,
+    clearFeatures
+};