@hamak/ui-shell-impl 0.1.0

package/src/core/DefaultFeatureManager.ts

@@ -0,0 +1,101 @@
+/**
+ * Default Feature Manager Implementation
+ */
+
+import type { IFeatureManager } from '@amk/ui-shell-api';
+import type { FeatureFlags } from '@amk/ui-shell-api';
+
+export class DefaultFeatureManager implements IFeatureManager {
+  private features: FeatureFlags;
+  private listeners: Map<string, Set<(value: any) => void>> = new Map();
+
+  constructor(initialFeatures: FeatureFlags = {}) {
+    this.features = { ...initialFeatures };
+  }
+
+  isEnabled(key: string): boolean {
+    const value = this.features[key];
+    return typeof value === 'boolean' ? value : Boolean(value);
+  }
+
+  get<T = any>(key: string, defaultValue?: T): T {
+    const value = this.features[key];
+    return (value !== undefined ? value : defaultValue) as T;
+  }
+
+  set(key: string, value: any): void {
+    const oldValue = this.features[key];
+    if (oldValue === value) return;
+
+    this.features[key] = value;
+    this.notifyListeners(key, value);
+  }
+
+  enable(key: string): void {
+    this.set(key, true);
+  }
+
+  disable(key: string): void {
+    this.set(key, false);
+  }
+
+  toggle(key: string): void {
+    this.set(key, !this.isEnabled(key));
+  }
+
+  update(updates: FeatureFlags): void {
+    Object.entries(updates).forEach(([key, value]) => {
+      this.set(key, value);
+    });
+  }
+
+  getAll(): Readonly<FeatureFlags> {
+    return { ...this.features };
+  }
+
+  has(key: string): boolean {
+    return key in this.features;
+  }
+
+  subscribe(key: string, listener: (value: any) => void): () => void {
+    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: (key: string, value: any) => void): () => void {
+    const unsubscribers: (() => void)[] = [];
+    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(): void {
+    this.listeners.clear();
+  }
+
+  private notifyListeners(key: string, value: any): void {
+    const listeners = this.listeners.get(key);
+    if (listeners) {
+      listeners.forEach(listener => listener(value));
+    }
+  }
+}

package/src/core/DefaultLayoutManager.ts

@@ -0,0 +1,74 @@
+/**
+ * Default Layout Manager Implementation
+ */
+
+import type { ILayoutManager } from '@amk/ui-shell-api';
+import type { LayoutSlot, LayoutArea } from '@amk/ui-shell-api';
+
+export class DefaultLayoutManager implements ILayoutManager {
+  private slots: Map<string, Set<LayoutSlot>> = new Map();
+  private listeners: Set<() => void> = new Set();
+
+  registerSlot(slot: LayoutSlot): () => void {
+    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: LayoutSlot): void {
+    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: LayoutArea): LayoutSlot[] {
+    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(): LayoutArea[] {
+    return Array.from(this.slots.keys()) as LayoutArea[];
+  }
+
+  hasSlots(area: LayoutArea): boolean {
+    const slots = this.slots.get(area);
+    return Boolean(slots && slots.size > 0);
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  clear(): void {
+    this.slots.clear();
+    this.notifyListeners();
+  }
+
+  destroy(): void {
+    this.slots.clear();
+    this.listeners.clear();
+  }
+
+  private notifyListeners(): void {
+    this.listeners.forEach(listener => listener());
+  }
+}

package/src/core/DefaultRouter.ts

@@ -0,0 +1,135 @@
+/**
+ * Default Router Implementation
+ */
+
+import type { IRouter } from '@amk/ui-shell-api';
+import type { RouteConfig, RouterOptions } from '@amk/ui-shell-api';
+import type { IRouterStrategy } from '@amk/ui-shell-spi';
+import type { NavigationGuard } from '@amk/ui-shell-spi';
+
+export class DefaultRouter implements IRouter {
+  private routes: Map<string, RouteConfig> = new Map();
+  private currentRoute: RouteConfig | null = null;
+  private guards: NavigationGuard[] = [];
+  private listeners: Set<(route: RouteConfig) => void> = new Set();
+  private strategy: IRouterStrategy;
+
+  constructor(options: RouterOptions, strategy: IRouterStrategy) {
+    this.strategy = strategy;
+    this.guards = [];
+    this.registerRoutes(options.routes);
+    this.setupNavigationListener();
+  }
+
+  private registerRoutes(routes: RouteConfig[]): void {
+    routes.forEach(route => {
+      this.routes.set(route.path, route);
+      if (route.children) {
+        this.registerRoutes(route.children);
+      }
+    });
+  }
+
+  async push(path: string): Promise<boolean> {
+    const route = this.matchRoute(path);
+    if (!route) {
+      console.error(`Route not found: ${path}`);
+      return false;
+    }
+
+    if (!(await this.runGuards(route))) {
+      return false;
+    }
+
+    if (route.beforeEnter && !(await route.beforeEnter(route, this.currentRoute!))) {
+      return false;
+    }
+
+    this.currentRoute = route;
+    this.strategy.push(path);
+    this.notifyListeners(route);
+    return true;
+  }
+
+  async replace(path: string): Promise<boolean> {
+    const route = this.matchRoute(path);
+    if (!route) {
+      console.error(`Route not found: ${path}`);
+      return false;
+    }
+
+    if (!(await this.runGuards(route))) {
+      return false;
+    }
+
+    this.currentRoute = route;
+    this.strategy.replace(path);
+    this.notifyListeners(route);
+    return true;
+  }
+
+  back(): void {
+    this.strategy.back();
+  }
+
+  forward(): void {
+    this.strategy.forward();
+  }
+
+  getCurrentRoute(): RouteConfig | null {
+    return this.currentRoute;
+  }
+
+  subscribe(listener: (route: RouteConfig) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  async loadRouteComponent(route: RouteConfig): Promise<any> {
+    try {
+      const component = await route.component();
+      return component;
+    } catch (error) {
+      console.error(`Failed to load route component for ${route.path}:`, error);
+      throw error;
+    }
+  }
+
+  addGuard(guard: NavigationGuard): () => void {
+    this.guards.push(guard);
+    return () => {
+      const index = this.guards.indexOf(guard);
+      if (index > -1) {
+        this.guards.splice(index, 1);
+      }
+    };
+  }
+
+  destroy(): void {
+    this.strategy.destroy();
+    this.listeners.clear();
+    this.guards = [];
+  }
+
+  private matchRoute(path: string): RouteConfig | null {
+    return this.routes.get(path) || null;
+  }
+
+  private async runGuards(to: RouteConfig): Promise<boolean> {
+    for (const guard of this.guards) {
+      const result = await guard(to, this.currentRoute);
+      if (!result) return false;
+    }
+    return true;
+  }
+
+  private setupNavigationListener(): void {
+    this.strategy.listen((path) => {
+      this.push(path);
+    });
+  }
+
+  private notifyListeners(route: RouteConfig): void {
+    this.listeners.forEach(listener => listener(route));
+  }
+}

package/src/core/DefaultShell.ts

@@ -0,0 +1,176 @@
+/**
+ * Default Shell Implementation
+ */
+
+import type { IShell, IThemeManager, IFeatureManager, IRouter } from '@amk/ui-shell-api';
+import type { ShellConfig, ShellContext, ShellEvent, ShellEventListener, ShellEventType } from '@amk/ui-shell-api';
+import { DefaultThemeManager } from './DefaultThemeManager';
+import { DefaultFeatureManager } from './DefaultFeatureManager';
+import { LocalStorageProvider } from '../providers/LocalStorageProvider';
+import { CSSVariablesThemeProvider } from '../providers/CSSVariablesThemeProvider';
+
+export class DefaultShell implements IShell {
+  private themeManager: IThemeManager;
+  private featureManager: IFeatureManager;
+  private router: IRouter | null = null;
+  private eventListeners: Map<string, Set<ShellEventListener>> = new Map();
+  private viewportState = {
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
+  };
+  private config: ShellConfig;
+  private isReady = false;
+
+  constructor(config: ShellConfig = {}) {
+    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();
+  }
+
+  async initialize(): Promise<void> {
+    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(): ShellContext {
+    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(): IThemeManager {
+    return this.themeManager;
+  }
+
+  getFeatureManager(): IFeatureManager {
+    return this.featureManager;
+  }
+
+  getRouter(): IRouter | null {
+    return this.router;
+  }
+
+  setRouter(router: IRouter): void {
+    this.router = router;
+    this.router.subscribe(route => {
+      this.emit('route:changed', { route });
+    });
+  }
+
+  emit(type: ShellEventType, payload?: any): void {
+    const event: ShellEvent = {
+      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: ShellEventType | '*', listener: ShellEventListener): () => void {
+    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: ShellEventType | '*', listener: ShellEventListener): void {
+    const listeners = this.eventListeners.get(type);
+    if (listeners) {
+      listeners.delete(listener);
+    }
+  }
+
+  ready(): boolean {
+    return this.isReady;
+  }
+
+  getConfig(): Readonly<ShellConfig> {
+    return { ...this.config };
+  }
+
+  destroy(): void {
+    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;
+  }
+
+  private setupViewportListener(): void {
+    if (typeof window === 'undefined') return;
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  private handleResize = (): void => {
+    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,
+    });
+  };
+}

package/src/core/DefaultThemeManager.ts

@@ -0,0 +1,99 @@
+/**
+ * Default Theme Manager Implementation
+ */
+
+import type { IThemeManager } from '@amk/ui-shell-api';
+import type { ThemeMode, ThemeConfig } from '@amk/ui-shell-api';
+import type { IStorageProvider, IThemeProvider } from '@amk/ui-shell-spi';
+
+const THEME_STORAGE_KEY = 'ui-shell-theme';
+
+export class DefaultThemeManager implements IThemeManager {
+  private currentTheme: ThemeMode = 'system';
+  private config: ThemeConfig;
+  private listeners: Set<(theme: ThemeMode) => void> = new Set();
+  private storageProvider: IStorageProvider;
+  private themeProvider: IThemeProvider;
+
+  constructor(
+    config: ThemeConfig = { mode: 'system' },
+    storageProvider: IStorageProvider,
+    themeProvider: IThemeProvider
+  ) {
+    this.config = config;
+    this.storageProvider = storageProvider;
+    this.themeProvider = themeProvider;
+    this.currentTheme = config.mode || this.loadPersistedTheme();
+    this.setupSystemThemeListener();
+    this.applyTheme();
+  }
+
+  getTheme(): ThemeMode {
+    return this.currentTheme;
+  }
+
+  getResolvedTheme(): 'light' | 'dark' {
+    if (this.currentTheme === 'system') {
+      return this.themeProvider.getSystemPreference();
+    }
+    return this.currentTheme;
+  }
+
+  setTheme(mode: ThemeMode): void {
+    if (this.currentTheme === mode) return;
+
+    this.currentTheme = mode;
+    this.persistTheme(mode);
+    this.applyTheme();
+    this.notifyListeners();
+  }
+
+  toggleTheme(): void {
+    const resolved = this.getResolvedTheme();
+    this.setTheme(resolved === 'light' ? 'dark' : 'light');
+  }
+
+  subscribe(listener: (theme: ThemeMode) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  setCSSVariables(variables: Record<string, string>): void {
+    this.config.cssVariables = { ...this.config.cssVariables, ...variables };
+    this.applyTheme();
+  }
+
+  destroy(): void {
+    this.themeProvider.destroy();
+    this.listeners.clear();
+  }
+
+  private setupSystemThemeListener(): void {
+    this.themeProvider.onSystemThemeChange(() => {
+      if (this.currentTheme === 'system') {
+        this.applyTheme();
+        this.notifyListeners();
+      }
+    });
+  }
+
+  private applyTheme(): void {
+    this.themeProvider.applyTheme(this.currentTheme, this.config);
+  }
+
+  private loadPersistedTheme(): ThemeMode {
+    const stored = this.storageProvider.getItem(THEME_STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+    return 'system';
+  }
+
+  private persistTheme(mode: ThemeMode): void {
+    this.storageProvider.setItem(THEME_STORAGE_KEY, mode);
+  }
+
+  private notifyListeners(): void {
+    this.listeners.forEach(listener => listener(this.currentTheme));
+  }
+}

package/src/core/index.ts

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

package/src/index.ts

@@ -0,0 +1,51 @@
+/**
+ * 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.1.0';
+
+// 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';
+import type { ShellConfig } from '@amk/ui-shell-api';
+
+export function createShell(config?: ShellConfig): DefaultShell {
+  return new DefaultShell(config);
+}
+
+export function createLayoutManager(): DefaultLayoutManager {
+  return new DefaultLayoutManager();
+}
+
+// Singleton pattern support
+let globalShell: DefaultShell | null = null;
+
+export function getShell(config?: ShellConfig): DefaultShell {
+  if (!globalShell) {
+    globalShell = createShell(config);
+  }
+  return globalShell;
+}
+
+export function resetShell(): void {
+  if (globalShell) {
+    globalShell.destroy();
+    globalShell = null;
+  }
+}