@hamak/ui-shell-impl 0.2.1 → 0.2.3

package/.turbo/turbo-build.log

@@ -1 +1 @@
-$ tsc -p tsconfig.json
+$ tsc -p tsconfig.json && tsc -p tsconfig.es2015.json

package/dist/es2015/core/DefaultFeatureManager.js

@@ -0,0 +1,79 @@
+/**
+ * Default Feature Manager Implementation
+ */
+export class DefaultFeatureManager {
+    constructor(initialFeatures = {}) {
+        this.listeners = new Map();
+        this.features = Object.assign({}, initialFeatures);
+    }
+    isEnabled(key) {
+        const value = this.features[key];
+        return typeof value === 'boolean' ? value : Boolean(value);
+    }
+    get(key, defaultValue) {
+        const value = this.features[key];
+        return (value !== undefined ? value : defaultValue);
+    }
+    set(key, value) {
+        const oldValue = this.features[key];
+        if (oldValue === value)
+            return;
+        this.features[key] = value;
+        this.notifyListeners(key, value);
+    }
+    enable(key) {
+        this.set(key, true);
+    }
+    disable(key) {
+        this.set(key, false);
+    }
+    toggle(key) {
+        this.set(key, !this.isEnabled(key));
+    }
+    update(updates) {
+        Object.entries(updates).forEach(([key, value]) => {
+            this.set(key, value);
+        });
+    }
+    getAll() {
+        return Object.assign({}, this.features);
+    }
+    has(key) {
+        return key in this.features;
+    }
+    subscribe(key, listener) {
+        if (!this.listeners.has(key)) {
+            this.listeners.set(key, new Set());
+        }
+        this.listeners.get(key).add(listener);
+        return () => {
+            const listeners = this.listeners.get(key);
+            if (listeners) {
+                listeners.delete(listener);
+                if (listeners.size === 0) {
+                    this.listeners.delete(key);
+                }
+            }
+        };
+    }
+    subscribeAll(listener) {
+        const unsubscribers = [];
+        const currentKeys = Object.keys(this.features);
+        currentKeys.forEach(key => {
+            const unsub = this.subscribe(key, value => listener(key, value));
+            unsubscribers.push(unsub);
+        });
+        return () => {
+            unsubscribers.forEach(unsub => unsub());
+        };
+    }
+    destroy() {
+        this.listeners.clear();
+    }
+    notifyListeners(key, value) {
+        const listeners = this.listeners.get(key);
+        if (listeners) {
+            listeners.forEach(listener => listener(value));
+        }
+    }
+}

package/dist/es2015/core/DefaultLayoutManager.js

@@ -0,0 +1,61 @@
+/**
+ * Default Layout Manager Implementation
+ */
+export class DefaultLayoutManager {
+    constructor() {
+        this.slots = new Map();
+        this.listeners = new Set();
+    }
+    registerSlot(slot) {
+        const area = slot.area;
+        if (!this.slots.has(area)) {
+            this.slots.set(area, new Set());
+        }
+        this.slots.get(area).add(slot);
+        this.notifyListeners();
+        return () => this.unregisterSlot(slot);
+    }
+    unregisterSlot(slot) {
+        const area = slot.area;
+        const slots = this.slots.get(area);
+        if (slots) {
+            slots.delete(slot);
+            if (slots.size === 0) {
+                this.slots.delete(area);
+            }
+            this.notifyListeners();
+        }
+    }
+    getSlots(area) {
+        const slots = this.slots.get(area);
+        if (!slots)
+            return [];
+        return Array.from(slots).sort((a, b) => {
+            const priorityA = a.priority || 0;
+            const priorityB = b.priority || 0;
+            return priorityB - priorityA; // Higher priority first
+        });
+    }
+    getAreas() {
+        return Array.from(this.slots.keys());
+    }
+    hasSlots(area) {
+        const slots = this.slots.get(area);
+        return Boolean(slots && slots.size > 0);
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    clear() {
+        this.slots.clear();
+        this.notifyListeners();
+    }
+    destroy() {
+        this.slots.clear();
+        this.listeners.clear();
+    }
+    notifyListeners() {
+        this.listeners.forEach(listener => listener());
+    }
+}

package/dist/es2015/core/DefaultRouter.js

@@ -0,0 +1,127 @@
+/**
+ * Default Router Implementation
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export class DefaultRouter {
+    constructor(options, strategy) {
+        this.routes = new Map();
+        this.currentRoute = null;
+        this.guards = [];
+        this.listeners = new Set();
+        this.strategy = strategy;
+        this.guards = [];
+        this.registerRoutes(options.routes);
+        this.setupNavigationListener();
+    }
+    registerRoutes(routes) {
+        routes.forEach(route => {
+            this.routes.set(route.path, route);
+            if (route.children) {
+                this.registerRoutes(route.children);
+            }
+        });
+    }
+    push(path) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const route = this.matchRoute(path);
+            if (!route) {
+                console.error(`Route not found: ${path}`);
+                return false;
+            }
+            if (!(yield this.runGuards(route))) {
+                return false;
+            }
+            if (route.beforeEnter && !(yield route.beforeEnter(route, this.currentRoute))) {
+                return false;
+            }
+            this.currentRoute = route;
+            this.strategy.push(path);
+            this.notifyListeners(route);
+            return true;
+        });
+    }
+    replace(path) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const route = this.matchRoute(path);
+            if (!route) {
+                console.error(`Route not found: ${path}`);
+                return false;
+            }
+            if (!(yield this.runGuards(route))) {
+                return false;
+            }
+            this.currentRoute = route;
+            this.strategy.replace(path);
+            this.notifyListeners(route);
+            return true;
+        });
+    }
+    back() {
+        this.strategy.back();
+    }
+    forward() {
+        this.strategy.forward();
+    }
+    getCurrentRoute() {
+        return this.currentRoute;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    loadRouteComponent(route) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const component = yield route.component();
+                return component;
+            }
+            catch (error) {
+                console.error(`Failed to load route component for ${route.path}:`, error);
+                throw error;
+            }
+        });
+    }
+    addGuard(guard) {
+        this.guards.push(guard);
+        return () => {
+            const index = this.guards.indexOf(guard);
+            if (index > -1) {
+                this.guards.splice(index, 1);
+            }
+        };
+    }
+    destroy() {
+        this.strategy.destroy();
+        this.listeners.clear();
+        this.guards = [];
+    }
+    matchRoute(path) {
+        return this.routes.get(path) || null;
+    }
+    runGuards(to) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const guard of this.guards) {
+                const result = yield guard(to, this.currentRoute);
+                if (!result)
+                    return false;
+            }
+            return true;
+        });
+    }
+    setupNavigationListener() {
+        this.strategy.listen((path) => {
+            this.push(path);
+        });
+    }
+    notifyListeners(route) {
+        this.listeners.forEach(listener => listener(route));
+    }
+}

package/dist/es2015/core/DefaultShell.js

@@ -0,0 +1,155 @@
+/**
+ * Default Shell Implementation
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { DefaultThemeManager } from './DefaultThemeManager';
+import { DefaultFeatureManager } from './DefaultFeatureManager';
+import { LocalStorageProvider } from '../providers/LocalStorageProvider';
+import { CSSVariablesThemeProvider } from '../providers/CSSVariablesThemeProvider';
+export class DefaultShell {
+    constructor(config = {}) {
+        this.router = null;
+        this.eventListeners = new Map();
+        this.viewportState = {
+            width: typeof window !== 'undefined' ? window.innerWidth : 0,
+            height: typeof window !== 'undefined' ? window.innerHeight : 0,
+        };
+        this.isReady = false;
+        this.handleResize = () => {
+            if (typeof window === 'undefined')
+                return;
+            this.viewportState.width = window.innerWidth;
+            this.viewportState.height = window.innerHeight;
+            this.emit('viewport:resized', {
+                width: this.viewportState.width,
+                height: this.viewportState.height,
+            });
+        };
+        this.config = config;
+        // Create theme manager with providers
+        const storageProvider = new LocalStorageProvider();
+        const themeProvider = new CSSVariablesThemeProvider();
+        this.themeManager = new DefaultThemeManager(config.theme, storageProvider, themeProvider);
+        // Create feature manager
+        this.featureManager = new DefaultFeatureManager(config.features);
+        this.setupViewportListener();
+    }
+    initialize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isReady) {
+                console.warn('Shell is already initialized');
+                return;
+            }
+            // Apply initial theme
+            this.themeManager.setTheme(this.themeManager.getTheme());
+            // Subscribe to theme changes
+            this.themeManager.subscribe(theme => {
+                this.emit('theme:changed', { theme });
+            });
+            // Subscribe to feature changes
+            this.featureManager.subscribeAll((key, value) => {
+                this.emit('feature:toggled', { key, value });
+            });
+            this.isReady = true;
+            this.emit('shell:ready', {});
+        });
+    }
+    getContext() {
+        return {
+            theme: this.themeManager.getTheme(),
+            setTheme: (mode) => this.themeManager.setTheme(mode),
+            features: this.featureManager.getAll(),
+            isFeatureEnabled: (key) => this.featureManager.isEnabled(key),
+            getFeature: (key, defaultValue) => this.featureManager.get(key, defaultValue),
+            viewport: {
+                width: this.viewportState.width,
+                height: this.viewportState.height,
+                isMobile: this.viewportState.width < 768,
+                isTablet: this.viewportState.width >= 768 && this.viewportState.width < 1024,
+                isDesktop: this.viewportState.width >= 1024,
+            },
+        };
+    }
+    getThemeManager() {
+        return this.themeManager;
+    }
+    getFeatureManager() {
+        return this.featureManager;
+    }
+    getRouter() {
+        return this.router;
+    }
+    setRouter(router) {
+        this.router = router;
+        this.router.subscribe(route => {
+            this.emit('route:changed', { route });
+        });
+    }
+    emit(type, payload) {
+        const event = {
+            type,
+            payload,
+            timestamp: Date.now(),
+        };
+        const listeners = this.eventListeners.get(type);
+        if (listeners) {
+            listeners.forEach(listener => listener(event));
+        }
+        const wildcardListeners = this.eventListeners.get('*');
+        if (wildcardListeners) {
+            wildcardListeners.forEach(listener => listener(event));
+        }
+    }
+    on(type, listener) {
+        if (!this.eventListeners.has(type)) {
+            this.eventListeners.set(type, new Set());
+        }
+        this.eventListeners.get(type).add(listener);
+        return () => {
+            const listeners = this.eventListeners.get(type);
+            if (listeners) {
+                listeners.delete(listener);
+                if (listeners.size === 0) {
+                    this.eventListeners.delete(type);
+                }
+            }
+        };
+    }
+    off(type, listener) {
+        const listeners = this.eventListeners.get(type);
+        if (listeners) {
+            listeners.delete(listener);
+        }
+    }
+    ready() {
+        return this.isReady;
+    }
+    getConfig() {
+        return Object.assign({}, this.config);
+    }
+    destroy() {
+        this.themeManager.destroy();
+        this.featureManager.destroy();
+        if (this.router) {
+            this.router.destroy();
+        }
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.handleResize);
+        }
+        this.eventListeners.clear();
+        this.isReady = false;
+    }
+    setupViewportListener() {
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('resize', this.handleResize);
+    }
+}

package/dist/es2015/core/DefaultThemeManager.js

@@ -0,0 +1,73 @@
+/**
+ * Default Theme Manager Implementation
+ */
+const THEME_STORAGE_KEY = 'ui-shell-theme';
+export class DefaultThemeManager {
+    constructor(config = { mode: 'system' }, storageProvider, themeProvider) {
+        this.currentTheme = 'system';
+        this.listeners = new Set();
+        this.config = config;
+        this.storageProvider = storageProvider;
+        this.themeProvider = themeProvider;
+        this.currentTheme = config.mode || this.loadPersistedTheme();
+        this.setupSystemThemeListener();
+        this.applyTheme();
+    }
+    getTheme() {
+        return this.currentTheme;
+    }
+    getResolvedTheme() {
+        if (this.currentTheme === 'system') {
+            return this.themeProvider.getSystemPreference();
+        }
+        return this.currentTheme;
+    }
+    setTheme(mode) {
+        if (this.currentTheme === mode)
+            return;
+        this.currentTheme = mode;
+        this.persistTheme(mode);
+        this.applyTheme();
+        this.notifyListeners();
+    }
+    toggleTheme() {
+        const resolved = this.getResolvedTheme();
+        this.setTheme(resolved === 'light' ? 'dark' : 'light');
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    setCSSVariables(variables) {
+        this.config.cssVariables = Object.assign(Object.assign({}, this.config.cssVariables), variables);
+        this.applyTheme();
+    }
+    destroy() {
+        this.themeProvider.destroy();
+        this.listeners.clear();
+    }
+    setupSystemThemeListener() {
+        this.themeProvider.onSystemThemeChange(() => {
+            if (this.currentTheme === 'system') {
+                this.applyTheme();
+                this.notifyListeners();
+            }
+        });
+    }
+    applyTheme() {
+        this.themeProvider.applyTheme(this.currentTheme, this.config);
+    }
+    loadPersistedTheme() {
+        const stored = this.storageProvider.getItem(THEME_STORAGE_KEY);
+        if (stored === 'light' || stored === 'dark' || stored === 'system') {
+            return stored;
+        }
+        return 'system';
+    }
+    persistTheme(mode) {
+        this.storageProvider.setItem(THEME_STORAGE_KEY, mode);
+    }
+    notifyListeners() {
+        this.listeners.forEach(listener => listener(this.currentTheme));
+    }
+}

package/dist/es2015/core/index.js

@@ -0,0 +1,9 @@
+/**
+ * Core Implementations
+ * Export all core implementation classes
+ */
+export * from './DefaultShell';
+export * from './DefaultThemeManager';
+export * from './DefaultFeatureManager';
+export * from './DefaultLayoutManager';
+export * from './DefaultRouter';

package/dist/es2015/index.js

@@ -0,0 +1,39 @@
+/**
+ * UI Shell Implementation
+ * Concrete implementations of UI Shell interfaces
+ *
+ * This package provides default implementations that can be used directly
+ * or extended for custom behavior.
+ */
+export const version = '0.2.2';
+// Export core implementations
+export * from './core';
+// Export providers
+export * from './providers';
+// Export utilities
+export * from './utils';
+// Export plugin integration
+export * from './plugin';
+// Factory functions
+import { DefaultShell } from './core/DefaultShell';
+import { DefaultLayoutManager } from './core/DefaultLayoutManager';
+export function createShell(config) {
+    return new DefaultShell(config);
+}
+export function createLayoutManager() {
+    return new DefaultLayoutManager();
+}
+// Singleton pattern support
+let globalShell = null;
+export function getShell(config) {
+    if (!globalShell) {
+        globalShell = createShell(config);
+    }
+    return globalShell;
+}
+export function resetShell() {
+    if (globalShell) {
+        globalShell.destroy();
+        globalShell = null;
+    }
+}

package/dist/es2015/plugin/ShellPluginFactory.js

@@ -0,0 +1,84 @@
+/**
+ * Shell Plugin Factory
+ * Creates microkernel plugin for UI Shell integration
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { SHELL_TOKEN, THEME_MANAGER_TOKEN, FEATURE_MANAGER_TOKEN, LAYOUT_MANAGER_TOKEN, ShellCommands, ShellEvents, } from '@hamak/ui-shell-api';
+import { DefaultShell } from '../core/DefaultShell';
+import { DefaultLayoutManager } from '../core/DefaultLayoutManager';
+export function createShellPlugin(config) {
+    let shell;
+    let layoutManager;
+    return {
+        initialize(ctx) {
+            shell = new DefaultShell(config);
+            layoutManager = new DefaultLayoutManager();
+            // Provide shell services
+            ctx.provide({ provide: SHELL_TOKEN, useValue: shell });
+            ctx.provide({ provide: THEME_MANAGER_TOKEN, useValue: shell.getThemeManager() });
+            ctx.provide({ provide: FEATURE_MANAGER_TOKEN, useValue: shell.getFeatureManager() });
+            ctx.provide({ provide: LAYOUT_MANAGER_TOKEN, useValue: layoutManager });
+            // Register commands
+            ctx.commands.register(ShellCommands.SET_THEME, (mode) => {
+                shell.getThemeManager().setTheme(mode);
+            });
+            ctx.commands.register(ShellCommands.TOGGLE_THEME, () => {
+                shell.getThemeManager().toggleTheme();
+            });
+            ctx.commands.register(ShellCommands.ENABLE_FEATURE, (key) => {
+                shell.getFeatureManager().enable(key);
+            });
+            ctx.commands.register(ShellCommands.DISABLE_FEATURE, (key) => {
+                shell.getFeatureManager().disable(key);
+            });
+            ctx.commands.register(ShellCommands.TOGGLE_FEATURE, (key) => {
+                shell.getFeatureManager().toggle(key);
+            });
+            ctx.commands.register(ShellCommands.NAVIGATE, (path) => {
+                const router = shell.getRouter();
+                if (!router) {
+                    console.warn('Router not initialized');
+                    return;
+                }
+                return router.push(path);
+            });
+            ctx.commands.register(ShellCommands.NAVIGATE_BACK, () => {
+                const router = shell.getRouter();
+                if (!router) {
+                    console.warn('Router not initialized');
+                    return;
+                }
+                router.back();
+            });
+            // Forward shell events to microkernel hooks
+            shell.on('shell:ready', () => ctx.hooks.emit(ShellEvents.READY, {}));
+            shell.on('theme:changed', (event) => ctx.hooks.emit(ShellEvents.THEME_CHANGED, event.payload));
+            shell.on('feature:toggled', (event) => ctx.hooks.emit(ShellEvents.FEATURE_TOGGLED, event.payload));
+            shell.on('route:changed', (event) => ctx.hooks.emit(ShellEvents.ROUTE_CHANGED, event.payload));
+            shell.on('viewport:resized', (event) => ctx.hooks.emit(ShellEvents.VIEWPORT_RESIZED, event.payload));
+        },
+        activate(ctx) {
+            return __awaiter(this, void 0, void 0, function* () {
+                yield shell.initialize();
+                const shellContext = shell.getContext();
+                ctx.hooks.emit('shell:activated', { context: shellContext });
+            });
+        },
+        deactivate() {
+            shell.destroy();
+            layoutManager.destroy();
+        },
+    };
+}
+// Helper functions
+export function getShellFromContext(ctx) {
+    return ctx.resolve(SHELL_TOKEN);
+}

package/dist/es2015/plugin/index.js

@@ -0,0 +1,5 @@
+/**
+ * Plugin Integration
+ * Export plugin factory and helpers
+ */
+export * from './ShellPluginFactory';

package/dist/es2015/providers/CSSVariablesThemeProvider.js

@@ -0,0 +1,49 @@
+/**
+ * CSS Variables Theme Provider
+ * Implements theming using CSS custom properties
+ */
+export class CSSVariablesThemeProvider {
+    constructor() {
+        this.listeners = new Set();
+        this.handleMediaQueryChange = () => {
+            const theme = this.getSystemPreference();
+            this.listeners.forEach(listener => listener(theme));
+        };
+    }
+    applyTheme(mode, config) {
+        if (typeof document === 'undefined')
+            return;
+        const resolved = mode === 'system' ? this.getSystemPreference() : mode;
+        document.documentElement.setAttribute('data-theme', resolved);
+        document.documentElement.style.colorScheme = resolved;
+        // Apply custom CSS variables
+        if (config.cssVariables) {
+            Object.entries(config.cssVariables).forEach(([key, value]) => {
+                document.documentElement.style.setProperty(key, value);
+            });
+        }
+    }
+    getSystemPreference() {
+        if (typeof window === 'undefined')
+            return 'light';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    onSystemThemeChange(callback) {
+        if (typeof window === 'undefined') {
+            return () => { };
+        }
+        this.listeners.add(callback);
+        if (!this.mediaQuery) {
+            this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
+        }
+        return () => {
+            this.listeners.delete(callback);
+        };
+    }
+    destroy() {
+        var _a;
+        (_a = this.mediaQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.handleMediaQueryChange);
+        this.listeners.clear();
+    }
+}

package/dist/es2015/providers/HashRouterStrategy.js

@@ -0,0 +1,57 @@
+/**
+ * Hash Router Strategy
+ * Uses URL hash for routing
+ */
+export class HashRouterStrategy {
+    constructor() {
+        this.listeners = new Set();
+        this.handleHashChange = () => {
+            const path = this.getCurrentPath();
+            this.notifyListeners(path);
+        };
+        this.setupListener();
+    }
+    push(path) {
+        if (typeof window === 'undefined')
+            return;
+        window.location.hash = path;
+    }
+    replace(path) {
+        if (typeof window === 'undefined')
+            return;
+        window.location.replace(`#${path}`);
+    }
+    back() {
+        if (typeof window !== 'undefined') {
+            window.history.back();
+        }
+    }
+    forward() {
+        if (typeof window !== 'undefined') {
+            window.history.forward();
+        }
+    }
+    getCurrentPath() {
+        if (typeof window === 'undefined')
+            return '/';
+        return window.location.hash.slice(1) || '/';
+    }
+    listen(callback) {
+        this.listeners.add(callback);
+        return () => this.listeners.delete(callback);
+    }
+    destroy() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('hashchange', this.handleHashChange);
+        }
+        this.listeners.clear();
+    }
+    setupListener() {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('hashchange', this.handleHashChange);
+        }
+    }
+    notifyListeners(path) {
+        this.listeners.forEach(listener => listener(path));
+    }
+}

package/dist/es2015/providers/HistoryRouterStrategy.js

@@ -0,0 +1,63 @@
+/**
+ * History Router Strategy
+ * Uses browser History API for routing
+ */
+export class HistoryRouterStrategy {
+    constructor(base = '/') {
+        this.listeners = new Set();
+        this.handlePopState = () => {
+            const path = this.getCurrentPath();
+            this.notifyListeners(path);
+        };
+        this.base = base;
+        this.setupListener();
+    }
+    push(path) {
+        if (typeof window === 'undefined')
+            return;
+        const fullPath = this.base + path;
+        window.history.pushState({}, '', fullPath);
+        this.notifyListeners(path);
+    }
+    replace(path) {
+        if (typeof window === 'undefined')
+            return;
+        const fullPath = this.base + path;
+        window.history.replaceState({}, '', fullPath);
+        this.notifyListeners(path);
+    }
+    back() {
+        if (typeof window !== 'undefined') {
+            window.history.back();
+        }
+    }
+    forward() {
+        if (typeof window !== 'undefined') {
+            window.history.forward();
+        }
+    }
+    getCurrentPath() {
+        if (typeof window === 'undefined')
+            return '/';
+        const path = window.location.pathname;
+        return path.startsWith(this.base) ? path.slice(this.base.length) : path;
+    }
+    listen(callback) {
+        this.listeners.add(callback);
+        return () => this.listeners.delete(callback);
+    }
+    destroy() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('popstate', this.handlePopState);
+        }
+        this.listeners.clear();
+    }
+    setupListener() {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('popstate', this.handlePopState);
+        }
+    }
+    notifyListeners(path) {
+        this.listeners.forEach(listener => listener(path));
+    }
+}

package/dist/es2015/providers/LocalStorageProvider.js

@@ -0,0 +1,50 @@
+/**
+ * LocalStorage Provider
+ * Implementation using browser localStorage
+ */
+export class LocalStorageProvider {
+    getItem(key) {
+        if (!this.isAvailable())
+            return null;
+        try {
+            return localStorage.getItem(key);
+        }
+        catch (e) {
+            console.warn('Failed to get item from localStorage:', e);
+            return null;
+        }
+    }
+    setItem(key, value) {
+        if (!this.isAvailable())
+            return;
+        try {
+            localStorage.setItem(key, value);
+        }
+        catch (e) {
+            console.warn('Failed to set item in localStorage:', e);
+        }
+    }
+    removeItem(key) {
+        if (!this.isAvailable())
+            return;
+        try {
+            localStorage.removeItem(key);
+        }
+        catch (e) {
+            console.warn('Failed to remove item from localStorage:', e);
+        }
+    }
+    clear() {
+        if (!this.isAvailable())
+            return;
+        try {
+            localStorage.clear();
+        }
+        catch (e) {
+            console.warn('Failed to clear localStorage:', e);
+        }
+    }
+    isAvailable() {
+        return typeof localStorage !== 'undefined';
+    }
+}

package/dist/es2015/providers/MemoryStorageProvider.js

@@ -0,0 +1,24 @@
+/**
+ * Memory Storage Provider
+ * In-memory storage for SSR or testing
+ */
+export class MemoryStorageProvider {
+    constructor() {
+        this.storage = new Map();
+    }
+    getItem(key) {
+        return this.storage.get(key) || null;
+    }
+    setItem(key, value) {
+        this.storage.set(key, value);
+    }
+    removeItem(key) {
+        this.storage.delete(key);
+    }
+    clear() {
+        this.storage.clear();
+    }
+    isAvailable() {
+        return true;
+    }
+}

package/dist/es2015/providers/index.js

@@ -0,0 +1,9 @@
+/**
+ * Providers
+ * Export all provider implementations
+ */
+export * from './LocalStorageProvider';
+export * from './MemoryStorageProvider';
+export * from './CSSVariablesThemeProvider';
+export * from './HistoryRouterStrategy';
+export * from './HashRouterStrategy';

package/dist/es2015/utils/index.js

@@ -0,0 +1,5 @@
+/**
+ * Utilities
+ * Export all utility classes
+ */
+export * from './viewport-utils';

package/dist/es2015/utils/viewport-utils.js

@@ -0,0 +1,52 @@
+/**
+ * Viewport Utilities
+ */
+export const BREAKPOINTS = {
+    xs: { name: 'xs', minWidth: 0, maxWidth: 639 },
+    sm: { name: 'sm', minWidth: 640, maxWidth: 767 },
+    md: { name: 'md', minWidth: 768, maxWidth: 1023 },
+    lg: { name: 'lg', minWidth: 1024, maxWidth: 1279 },
+    xl: { name: 'xl', minWidth: 1280, maxWidth: 1535 },
+    '2xl': { name: '2xl', minWidth: 1536 },
+};
+export class ViewportUtils {
+    static getCurrentBreakpoint() {
+        if (typeof window === 'undefined')
+            return 'md';
+        const width = window.innerWidth;
+        for (const [name, breakpoint] of Object.entries(BREAKPOINTS)) {
+            if (width >= breakpoint.minWidth && (!breakpoint.maxWidth || width <= breakpoint.maxWidth)) {
+                return name;
+            }
+        }
+        return 'md';
+    }
+    static matchesBreakpoint(breakpoint) {
+        if (typeof window === 'undefined')
+            return false;
+        const width = window.innerWidth;
+        const bp = BREAKPOINTS[breakpoint];
+        return width >= bp.minWidth && (!bp.maxWidth || width <= bp.maxWidth);
+    }
+    static isMinBreakpoint(breakpoint) {
+        if (typeof window === 'undefined')
+            return false;
+        const width = window.innerWidth;
+        const bp = BREAKPOINTS[breakpoint];
+        return width >= bp.minWidth;
+    }
+    static getDimensions() {
+        if (typeof window === 'undefined') {
+            return { width: 0, height: 0 };
+        }
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    }
+    static isTouchDevice() {
+        if (typeof window === 'undefined')
+            return false;
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    }
+}

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  * This package provides default implementations that can be used directly
  * or extended for custom behavior.
  */
-export declare const version = "0.2.1";
+export declare const version = "0.2.2";
 export * from './core';
 export * from './providers';
 export * from './utils';

package/dist/index.js

@@ -5,7 +5,7 @@
  * This package provides default implementations that can be used directly
  * or extended for custom behavior.
  */
-export const version = '0.2.1';
+export const version = '0.2.2';
 // Export core implementations
 export * from './core';
 // Export providers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hamak/ui-shell-impl",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "type": "module",
   "description": "UI Shell Implementation - Core UI shell functionality",
@@ -16,20 +16,26 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.es2015.json",
     "clean": "rm -rf dist"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js",
+      "legacy": "./dist/es2015/index.js"
+    },
+    "./es2015": {
+      "import": "./dist/es2015/index.js",
+      "default": "./dist/es2015/index.js"
     }
   },
   "dependencies": {
-    "@hamak/ui-shell-api": "0.2.1",
-    "@hamak/ui-shell-spi": "0.2.1",
-    "@hamak/microkernel-api": "0.2.1",
-    "@hamak/microkernel-spi": "0.2.1"
+    "@hamak/ui-shell-api": "0.2.2",
+    "@hamak/ui-shell-spi": "0.2.2",
+    "@hamak/microkernel-api": "0.2.2",
+    "@hamak/microkernel-spi": "0.2.2"
   },
   "devDependencies": {
     "typescript": "~5.4.0"

package/src/index.ts

@@ -6,7 +6,7 @@
  * or extended for custom behavior.
  */
 
-export const version = '0.2.1';
+export const version = '0.2.2';
 
 // Export core implementations
 export * from './core';

package/tsconfig.es2015.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2015",
+    "lib": [
+      "ES2015",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "outDir": "dist/es2015",
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": false,
+    "downlevelIteration": true,
+    "composite": false
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}