@hamak/ui-shell-impl 0.1.0

package/src/plugin/ShellPluginFactory.ts

@@ -0,0 +1,98 @@
+/**
+ * Shell Plugin Factory
+ * Creates microkernel plugin for UI Shell integration
+ */
+
+import type { PluginModule } from '@amk/microkernel-spi';
+import type { ActivateContext } from '@amk/microkernel-api';
+import type { ShellConfig } from '@amk/ui-shell-api';
+import {
+  SHELL_TOKEN,
+  THEME_MANAGER_TOKEN,
+  FEATURE_MANAGER_TOKEN,
+  LAYOUT_MANAGER_TOKEN,
+  ShellCommands,
+  ShellEvents,
+} from '@amk/ui-shell-api';
+import { DefaultShell } from '../core/DefaultShell';
+import { DefaultLayoutManager } from '../core/DefaultLayoutManager';
+
+export function createShellPlugin(config?: ShellConfig): PluginModule {
+  let shell: DefaultShell;
+  let layoutManager: DefaultLayoutManager;
+
+  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: 'light' | 'dark' | 'system') => {
+        shell.getThemeManager().setTheme(mode);
+      });
+
+      ctx.commands.register(ShellCommands.TOGGLE_THEME, () => {
+        shell.getThemeManager().toggleTheme();
+      });
+
+      ctx.commands.register(ShellCommands.ENABLE_FEATURE, (key: string) => {
+        shell.getFeatureManager().enable(key);
+      });
+
+      ctx.commands.register(ShellCommands.DISABLE_FEATURE, (key: string) => {
+        shell.getFeatureManager().disable(key);
+      });
+
+      ctx.commands.register(ShellCommands.TOGGLE_FEATURE, (key: string) => {
+        shell.getFeatureManager().toggle(key);
+      });
+
+      ctx.commands.register(ShellCommands.NAVIGATE, (path: string) => {
+        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));
+    },
+
+    async activate(ctx: ActivateContext) {
+      await shell.initialize();
+      const shellContext = shell.getContext();
+      ctx.hooks.emit('shell:activated', { context: shellContext });
+    },
+
+    deactivate() {
+      shell.destroy();
+      layoutManager.destroy();
+    },
+  };
+}
+
+// Helper functions
+export function getShellFromContext(ctx: ActivateContext): DefaultShell {
+  return ctx.resolve<DefaultShell>(SHELL_TOKEN);
+}

package/src/plugin/index.ts

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

package/src/providers/CSSVariablesThemeProvider.ts

@@ -0,0 +1,60 @@
+/**
+ * CSS Variables Theme Provider
+ * Implements theming using CSS custom properties
+ */
+
+import type { IThemeProvider } from '@amk/ui-shell-spi';
+import type { ThemeMode, ThemeConfig } from '@amk/ui-shell-api';
+
+export class CSSVariablesThemeProvider implements IThemeProvider {
+  private mediaQuery?: MediaQueryList;
+  private listeners: Set<(theme: 'light' | 'dark') => void> = new Set();
+
+  applyTheme(mode: ThemeMode, config: ThemeConfig): void {
+    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(): 'light' | 'dark' {
+    if (typeof window === 'undefined') return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  onSystemThemeChange(callback: (theme: 'light' | 'dark') => void): () => void {
+    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(): void {
+    this.mediaQuery?.removeEventListener('change', this.handleMediaQueryChange);
+    this.listeners.clear();
+  }
+
+  private handleMediaQueryChange = (): void => {
+    const theme = this.getSystemPreference();
+    this.listeners.forEach(listener => listener(theme));
+  };
+}

package/src/providers/HashRouterStrategy.ts

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

package/src/providers/HistoryRouterStrategy.ts

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

package/src/providers/LocalStorageProvider.ts

@@ -0,0 +1,53 @@
+/**
+ * LocalStorage Provider
+ * Implementation using browser localStorage
+ */
+
+import type { IStorageProvider } from '@amk/ui-shell-spi';
+
+export class LocalStorageProvider implements IStorageProvider {
+  getItem(key: string): string | null {
+    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: string, value: string): void {
+    if (!this.isAvailable()) return;
+
+    try {
+      localStorage.setItem(key, value);
+    } catch (e) {
+      console.warn('Failed to set item in localStorage:', e);
+    }
+  }
+
+  removeItem(key: string): void {
+    if (!this.isAvailable()) return;
+
+    try {
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.warn('Failed to remove item from localStorage:', e);
+    }
+  }
+
+  clear(): void {
+    if (!this.isAvailable()) return;
+
+    try {
+      localStorage.clear();
+    } catch (e) {
+      console.warn('Failed to clear localStorage:', e);
+    }
+  }
+
+  isAvailable(): boolean {
+    return typeof localStorage !== 'undefined';
+  }
+}

package/src/providers/MemoryStorageProvider.ts

@@ -0,0 +1,30 @@
+/**
+ * Memory Storage Provider
+ * In-memory storage for SSR or testing
+ */
+
+import type { IStorageProvider } from '@amk/ui-shell-spi';
+
+export class MemoryStorageProvider implements IStorageProvider {
+  private storage: Map<string, string> = new Map();
+
+  getItem(key: string): string | null {
+    return this.storage.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.storage.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.storage.delete(key);
+  }
+
+  clear(): void {
+    this.storage.clear();
+  }
+
+  isAvailable(): boolean {
+    return true;
+  }
+}

package/src/providers/index.ts

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

package/src/utils/index.ts

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

package/src/utils/viewport-utils.ts

@@ -0,0 +1,64 @@
+/**
+ * Viewport Utilities
+ */
+
+import type { BreakpointName, Breakpoint } from '@amk/ui-shell-api';
+
+export const BREAKPOINTS: Record<BreakpointName, Breakpoint> = {
+  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(): BreakpointName {
+    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 as BreakpointName;
+      }
+    }
+
+    return 'md';
+  }
+
+  static matchesBreakpoint(breakpoint: BreakpointName): boolean {
+    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: BreakpointName): boolean {
+    if (typeof window === 'undefined') return false;
+
+    const width = window.innerWidth;
+    const bp = BREAKPOINTS[breakpoint];
+
+    return width >= bp.minWidth;
+  }
+
+  static getDimensions(): { width: number; height: number } {
+    if (typeof window === 'undefined') {
+      return { width: 0, height: 0 };
+    }
+
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  }
+
+  static isTouchDevice(): boolean {
+    if (typeof window === 'undefined') return false;
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}