@ifc-lite/viewer 1.1.6 → 1.5.0

package/src/hooks/useWebGPU.ts

@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { useState, useEffect } from 'react';
+
+export interface WebGPUStatus {
+  supported: boolean;
+  checking: boolean;
+  reason: string | null;
+}
+
+/**
+ * Robust WebGPU detection hook.
+ *
+ * Detection method:
+ * 1. Check if navigator.gpu exists (basic API availability)
+ * 2. Attempt to request a GPU adapter (confirms actual hardware/driver support)
+ *
+ * This two-step check is necessary because:
+ * - Some browsers expose navigator.gpu but fail to provide an adapter
+ * - Software rendering may be available but unsuitable for our use case
+ * - Driver issues can prevent adapter creation even with WebGPU support
+ */
+export function useWebGPU(): WebGPUStatus {
+  const [status, setStatus] = useState<WebGPUStatus>({
+    supported: false,
+    checking: true,
+    reason: null,
+  });
+
+  useEffect(() => {
+    async function checkWebGPUSupport() {
+      // Step 1: Check if WebGPU API is available
+      if (!navigator.gpu) {
+        setStatus({
+          supported: false,
+          checking: false,
+          reason: 'WebGPU API not available in this browser',
+        });
+        return;
+      }
+
+      try {
+        // Step 2: Try to get a GPU adapter
+        // This confirms actual hardware/driver support
+        const adapter = await navigator.gpu.requestAdapter();
+
+        if (!adapter) {
+          setStatus({
+            supported: false,
+            checking: false,
+            reason: 'No compatible GPU adapter found',
+          });
+          return;
+        }
+
+        // Optional: Check for required features if needed
+        // const features = adapter.features;
+        // const limits = adapter.limits;
+
+        setStatus({
+          supported: true,
+          checking: false,
+          reason: null,
+        });
+      } catch (error) {
+        setStatus({
+          supported: false,
+          checking: false,
+          reason: error instanceof Error ? error.message : 'Failed to initialize WebGPU',
+        });
+      }
+    }
+
+    checkWebGPUSupport();
+  }, []);
+
+  return status;
+}

package/src/index.css

@@ -4,6 +4,75 @@
 
 @import "tailwindcss";
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOKYO NIGHT THEME - Dark Stormy Cyberpunk Vibes
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Tokyo Night Color Palette */
+:root {
+  /* Storm - Deep backgrounds */
+  --tokyo-storm: #1a1b26;
+  --tokyo-night: #16161e;
+  --tokyo-bg-dark: #13131a;
+  --tokyo-bg-highlight: #1f2335;
+  
+  /* Atmosphere */
+  --tokyo-terminal-black: #414868;
+  --tokyo-comment: #565f89;
+  --tokyo-dark3: #3b4261;
+  
+  /* Foreground */
+  --tokyo-fg: #a9b1d6;
+  --tokyo-fg-dark: #7982a9;
+  --tokyo-fg-gutter: #363b54;
+  
+  /* Neon accents */
+  --tokyo-blue: #7aa2f7;
+  --tokyo-cyan: #7dcfff;
+  --tokyo-magenta: #bb9af7;
+  --tokyo-purple: #9d7cd8;
+  --tokyo-orange: #ff9e64;
+  --tokyo-yellow: #e0af68;
+  --tokyo-green: #9ece6a;
+  --tokyo-teal: #73daca;
+  --tokyo-red: #f7768e;
+  
+  /* Special */
+  --tokyo-git-add: #449dab;
+  --tokyo-git-change: #6183bb;
+  --tokyo-git-delete: #914c54;
+  
+  /* Hierarchy panel - Light mode */
+  --hierarchy-selected-bg: #e4e4e7;
+  --hierarchy-selected-text: #18181b;
+  --hierarchy-text: #52525b;
+  --hierarchy-hover-bg: #f4f4f5;
+}
+
+/* Tabs - Light mode */
+:root {
+  --tabs-bg: #f4f4f5;
+  --tabs-border: #e4e4e7;
+  --tab-text: #71717a;
+  --tab-active-bg: #ffffff;
+  --tab-active-text: #18181b;
+}
+
+.dark {
+  /* Hierarchy panel - Dark mode */
+  --hierarchy-selected-bg: #1f2335;
+  --hierarchy-selected-text: #a9b1d6;
+  --hierarchy-text: #7982a9;
+  --hierarchy-hover-bg: rgba(31, 35, 53, 0.5);
+  
+  /* Tabs - Dark mode */
+  --tabs-bg: #1f2335;
+  --tabs-border: #3b4261;
+  --tab-text: #565f89;
+  --tab-active-bg: #16161e;
+  --tab-active-text: #a9b1d6;
+}
+
 /* Custom theme configuration */
 @theme {
   --color-background: hsl(0 0% 100%);
@@ -12,7 +81,7 @@
   --color-card-foreground: hsl(240 10% 3.9%);
   --color-popover: hsl(0 0% 100%);
   --color-popover-foreground: hsl(240 10% 3.9%);
-  --color-primary: hsl(217 91% 60%);
+  --color-primary: var(--tokyo-blue);
   --color-primary-foreground: hsl(0 0% 100%);
   --color-secondary: hsl(240 4.8% 95.9%);
   --color-secondary-foreground: hsl(240 5.9% 10%);
@@ -20,39 +89,40 @@
   --color-muted-foreground: hsl(240 3.8% 46.1%);
   --color-accent: hsl(240 4.8% 95.9%);
   --color-accent-foreground: hsl(240 5.9% 10%);
-  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive: var(--tokyo-red);
   --color-destructive-foreground: hsl(0 0% 98%);
   --color-border: hsl(240 5.9% 90%);
   --color-input: hsl(240 5.9% 90%);
-  --color-ring: hsl(217 91% 60%);
+  --color-ring: var(--tokyo-blue);
 
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.375rem;
+  --radius-xl: 0.5rem;
 }
 
-/* Dark mode colors */
+/* Dark mode - Tokyo Night Storm */
+:root.dark,
 .dark {
-  --color-background: hsl(240 10% 3.9%);
-  --color-foreground: hsl(0 0% 98%);
-  --color-card: hsl(240 10% 3.9%);
-  --color-card-foreground: hsl(0 0% 98%);
-  --color-popover: hsl(240 10% 3.9%);
-  --color-popover-foreground: hsl(0 0% 98%);
-  --color-primary: hsl(217 91% 60%);
-  --color-primary-foreground: hsl(0 0% 100%);
-  --color-secondary: hsl(240 3.7% 15.9%);
-  --color-secondary-foreground: hsl(0 0% 98%);
-  --color-muted: hsl(240 3.7% 15.9%);
-  --color-muted-foreground: hsl(240 5% 64.9%);
-  --color-accent: hsl(240 3.7% 15.9%);
-  --color-accent-foreground: hsl(0 0% 98%);
-  --color-destructive: hsl(0 62.8% 30.6%);
-  --color-destructive-foreground: hsl(0 0% 98%);
-  --color-border: hsl(240 3.7% 15.9%);
-  --color-input: hsl(240 3.7% 15.9%);
-  --color-ring: hsl(217 91% 60%);
+  --color-background: var(--tokyo-storm) !important;
+  --color-foreground: var(--tokyo-fg) !important;
+  --color-card: var(--tokyo-night) !important;
+  --color-card-foreground: var(--tokyo-fg) !important;
+  --color-popover: var(--tokyo-night) !important;
+  --color-popover-foreground: var(--tokyo-fg) !important;
+  --color-primary: var(--tokyo-blue);
+  --color-primary-foreground: var(--tokyo-night);
+  --color-secondary: var(--tokyo-bg-highlight);
+  --color-secondary-foreground: var(--tokyo-fg);
+  --color-muted: var(--tokyo-bg-highlight);
+  --color-muted-foreground: var(--tokyo-comment);
+  --color-accent: var(--tokyo-bg-highlight);
+  --color-accent-foreground: var(--tokyo-fg);
+  --color-destructive: var(--tokyo-red);
+  --color-destructive-foreground: var(--tokyo-fg);
+  --color-border: var(--tokyo-dark3);
+  --color-input: var(--tokyo-bg-highlight);
+  --color-ring: var(--tokyo-blue);
 }
 
 /* Base styles */
@@ -66,6 +136,174 @@ body {
   font-feature-settings: "rlig" 1, "calt" 1;
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOKYO NIGHT DARK MODE OVERRIDES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.dark body,
+.dark #root {
+  background-color: var(--tokyo-storm) !important;
+}
+
+/* Panels and cards */
+.dark .bg-white,
+.dark .bg-card,
+.dark .bg-background {
+  background-color: var(--tokyo-night) !important;
+}
+
+.dark .bg-zinc-50,
+.dark .bg-zinc-100 {
+  background-color: var(--tokyo-bg-highlight) !important;
+}
+
+.dark .bg-zinc-900,
+.dark .bg-zinc-950,
+.dark .bg-black {
+  background-color: var(--tokyo-night) !important;
+}
+
+/* Borders */
+.dark .border-zinc-200,
+.dark .border-zinc-700,
+.dark .border-zinc-800 {
+  border-color: var(--tokyo-dark3) !important;
+}
+
+.dark .border-zinc-900,
+.dark .border-zinc-100 {
+  border-color: var(--tokyo-terminal-black) !important;
+}
+
+/* Text colors */
+.dark .text-zinc-900,
+.dark .text-zinc-100 {
+  color: var(--tokyo-fg) !important;
+}
+
+.dark .text-zinc-500,
+.dark .text-zinc-400,
+.dark .text-zinc-600 {
+  color: var(--tokyo-comment) !important;
+}
+
+.dark .text-zinc-200 {
+  color: var(--tokyo-fg-dark) !important;
+}
+
+/* Primary accent */
+.dark .bg-primary {
+  background-color: var(--tokyo-blue) !important;
+}
+
+.dark .text-primary {
+  color: var(--tokyo-blue) !important;
+}
+
+.dark .border-primary {
+  border-color: var(--tokyo-blue) !important;
+}
+
+/* Clean shadows */
+.dark .shadow-lg,
+.dark .shadow-xl {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Selection highlight */
+.dark ::selection {
+  background-color: var(--tokyo-bg-highlight);
+  color: var(--tokyo-cyan);
+}
+
+/* Scrollbar Tokyo Night style */
+.dark .scrollbar-thin {
+  scrollbar-color: var(--tokyo-terminal-black) var(--tokyo-night);
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: var(--tokyo-terminal-black);
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: var(--tokyo-comment);
+}
+
+/* Interactive elements */
+.dark .hover\:bg-primary:hover {
+  background-color: var(--tokyo-blue) !important;
+}
+
+/* Force dark backgrounds on data-state active tabs */
+.dark [data-state="active"] {
+  background-color: var(--tokyo-night) !important;
+  color: var(--tokyo-fg) !important;
+}
+
+/* Force dark hover backgrounds */
+.dark .hover\:bg-zinc-50:hover,
+.dark .hover\:bg-zinc-100:hover,
+.dark .hover\:bg-zinc-200:hover,
+.dark .hover\:bg-white:hover {
+  background-color: var(--tokyo-bg-highlight) !important;
+}
+
+/* Force dark selected/active backgrounds */
+.dark .data-\[state\=active\]\:bg-white[data-state="active"],
+.dark .data-\[state\=active\]\:bg-zinc-100[data-state="active"] {
+  background-color: var(--tokyo-night) !important;
+}
+
+/* Hierarchy panel hover */
+.hierarchy-item:not(.selected):hover {
+  background-color: var(--hierarchy-hover-bg) !important;
+}
+
+/* Tab triggers */
+.tab-trigger {
+  background-color: transparent !important;
+  color: var(--tab-text) !important;
+}
+
+.tab-trigger[data-state="active"] {
+  background-color: var(--tab-active-bg) !important;
+  color: var(--tab-active-text) !important;
+  font-weight: 700;
+}
+
+/* Quantity cards - cyan accent */
+.dark .border-blue-200,
+.dark .border-blue-800,
+.dark .border-blue-900 {
+  border-color: var(--tokyo-cyan) !important;
+  border-opacity: 0.3;
+}
+
+.dark .text-blue-700,
+.dark .text-blue-400 {
+  color: var(--tokyo-cyan) !important;
+}
+
+.dark .bg-blue-50\/20,
+.dark .bg-blue-950\/20 {
+  background-color: rgba(125, 207, 255, 0.05) !important;
+}
+
+/* Success/Location - teal accent */
+.dark .border-emerald-500\/30 {
+  border-color: rgba(115, 218, 202, 0.3) !important;
+}
+
+.dark .text-emerald-800,
+.dark .text-emerald-400 {
+  color: var(--tokyo-teal) !important;
+}
+
+.dark .bg-emerald-50\/50,
+.dark .bg-emerald-900\/10 {
+  background-color: rgba(115, 218, 202, 0.05) !important;
+}
+
 /* Custom scrollbar */
 .scrollbar-thin {
   scrollbar-width: thin;

package/src/lib/platform.ts

@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Platform detection utilities for runtime bridge pattern
+ * Routes to WASM (browser) or native (Tauri desktop) implementations
+ */
+
+/**
+ * Detects if running in Tauri desktop environment
+ */
+export function isTauri(): boolean {
+  return typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window;
+}
+
+/**
+ * Platform-specific cache implementation
+ * Returns 'indexeddb' for browser, 'filesystem' for desktop
+ */
+export function getCacheType(): 'indexeddb' | 'filesystem' {
+  return isTauri() ? 'filesystem' : 'indexeddb';
+}

package/src/services/cacheService.ts

@@ -0,0 +1,142 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Platform-agnostic cache service
+ * Dynamically loads the appropriate cache implementation based on platform:
+ * - Tauri (desktop): Uses native filesystem via desktop-cache.ts
+ * - Web: Uses IndexedDB via ifc-cache.ts
+ *
+ * Extracted from useIfc.ts for reusability and testability
+ */
+
+import { isTauri } from '../utils/ifcConfig.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Result from cache lookup
+ */
+export interface CacheResult {
+  /** Serialized cache buffer containing data store and geometry */
+  buffer: ArrayBuffer;
+  /** Original IFC source file for on-demand property extraction */
+  sourceBuffer?: ArrayBuffer;
+}
+
+/**
+ * Function signature for getting cached data
+ */
+export type GetCachedFn = (key: string) => Promise<CacheResult | null>;
+
+/**
+ * Function signature for setting cached data
+ */
+export type SetCachedFn = (
+  key: string,
+  data: ArrayBuffer,
+  fileName: string,
+  fileSize: number,
+  sourceBuffer?: ArrayBuffer
+) => Promise<void>;
+
+/**
+ * Function signature for deleting cached data
+ */
+export type DeleteCachedFn = (key: string) => Promise<void>;
+
+/**
+ * Cache service interface
+ */
+export interface ICacheService {
+  getCached: GetCachedFn;
+  setCached: SetCachedFn;
+  deleteCached: DeleteCachedFn;
+}
+
+// ============================================================================
+// Service Singleton
+// ============================================================================
+
+/** Cached service instance - loaded once per session */
+let cacheService: ICacheService | null = null;
+
+/**
+ * Get the cache service for the current platform
+ * Lazily loads the appropriate implementation
+ */
+export async function getCacheService(): Promise<ICacheService> {
+  if (cacheService) return cacheService;
+
+  if (isTauri) {
+    // Desktop: Use Tauri native filesystem
+    const mod = await import('./desktop-cache.js');
+    cacheService = {
+      getCached: mod.getCached,
+      setCached: mod.setCached,
+      deleteCached: mod.deleteCached,
+    };
+  } else {
+    // Web: Use IndexedDB
+    const mod = await import('./ifc-cache.js');
+    cacheService = {
+      getCached: mod.getCached,
+      setCached: mod.setCached,
+      deleteCached: mod.deleteCached,
+    };
+  }
+
+  return cacheService;
+}
+
+// ============================================================================
+// Convenience Functions
+// ============================================================================
+
+/**
+ * Get cached data by key
+ * @param key - Cache key (typically xxhash64 of source file)
+ * @returns Cache result with buffer and optional source, or null if not found
+ */
+export async function getCached(key: string): Promise<CacheResult | null> {
+  const service = await getCacheService();
+  return service.getCached(key);
+}
+
+/**
+ * Store data in cache
+ * @param key - Cache key (typically xxhash64 of source file)
+ * @param data - Serialized cache buffer
+ * @param fileName - Original file name for logging
+ * @param fileSize - Original file size for logging
+ * @param sourceBuffer - Optional source file for on-demand extraction
+ */
+export async function setCached(
+  key: string,
+  data: ArrayBuffer,
+  fileName: string,
+  fileSize: number,
+  sourceBuffer?: ArrayBuffer
+): Promise<void> {
+  const service = await getCacheService();
+  return service.setCached(key, data, fileName, fileSize, sourceBuffer);
+}
+
+/**
+ * Delete a cache entry by key
+ * @param key - Cache key to delete
+ */
+export async function deleteCached(key: string): Promise<void> {
+  const service = await getCacheService();
+  return service.deleteCached(key);
+}
+
+/**
+ * Reset the cache service singleton (useful for testing)
+ */
+export function resetCacheService(): void {
+  cacheService = null;
+}