@cwygoda/service-catalog-ui 1.0.1 → 1.0.3

package/dist/components/BpmnDiagram.svelte

@@ -22,6 +22,7 @@
   }
 
   const FIT_PADDING = 40; // pixels of padding around diagram when fitting
+  const FULLSCREEN_TRANSITION_MS = 100;
 
   interface BpmnViewer {
     importXML: (xml: string) => Promise<unknown>;
@@ -33,6 +34,7 @@
 
   let wrapper: HTMLDivElement;
   let container: HTMLDivElement;
+  let resizeObserver: ResizeObserver | null = null;
   let viewer: BpmnViewer | null = $state(null);
   let error: string | null = $state(null);
   let ready = $state(false);
@@ -53,7 +55,7 @@
     isFullscreen = !!document.fullscreenElement;
     // Re-fit diagram when entering/exiting fullscreen
     if (ready) {
-      setTimeout(fitWithPadding, 100);
+      setTimeout(fitWithPadding, FULLSCREEN_TRANSITION_MS);
     }
   }
 
@@ -134,6 +136,12 @@
       // Fit diagram to container with padding
       fitWithPadding();
       ready = true;
+
+      // Re-fit on resize
+      resizeObserver = new ResizeObserver(() => {
+        if (ready) fitWithPadding();
+      });
+      resizeObserver.observe(container);
     } catch (e) {
       error = e instanceof Error ? e.message : 'Failed to render BPMN diagram';
       console.error('BPMN render error:', e);
@@ -144,6 +152,7 @@
     if (browser) {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
     }
+    resizeObserver?.disconnect();
     if (viewer?.destroy) {
       viewer.destroy();
     }
@@ -178,10 +187,12 @@
   >
     <div
       bind:this={container}
-      class="bpmn-container w-full rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+      class="bpmn-container w-full rounded-lg border border-gray-200 bg-white {isFullscreen
+        ? 'h-screen'
+        : 'h-64 sm:h-80 md:h-96'} dark:border-gray-700 dark:bg-gray-800"
       class:cursor-grab={interactive}
-      class:h-96={!isFullscreen}
-      class:h-screen={isFullscreen}
+      role="img"
+      aria-label="BPMN process diagram"
     ></div>
 
     <!-- Zoom controls -->
@@ -191,12 +202,12 @@
       >
         <button
           onclick={zoomIn}
-          class="rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="flex min-h-11 min-w-11 items-center justify-center rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
           aria-label="Zoom in"
           title="Zoom in"
         >
           <svg
-            class="h-4 w-4"
+            class="h-5 w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -207,12 +218,12 @@
         </button>
         <button
           onclick={zoomOut}
-          class="rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="flex min-h-11 min-w-11 items-center justify-center rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
           aria-label="Zoom out"
           title="Zoom out"
         >
           <svg
-            class="h-4 w-4"
+            class="h-5 w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -224,13 +235,13 @@
         <div class="my-0.5 border-t border-gray-200 dark:border-gray-600"></div>
         <button
           onclick={resetZoom}
-          class="rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="flex min-h-11 min-w-11 items-center justify-center rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
           aria-label="Fit to view"
           title="Fit to view"
         >
           <!-- Viewfinder/target icon for fit-to-view -->
           <svg
-            class="h-4 w-4"
+            class="h-5 w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -246,13 +257,13 @@
         <div class="my-0.5 border-t border-gray-200 dark:border-gray-600"></div>
         <button
           onclick={toggleFullscreen}
-          class="rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="flex min-h-11 min-w-11 items-center justify-center rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
           aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
           title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
         >
           {#if isFullscreen}
             <svg
-              class="h-4 w-4"
+              class="h-5 w-5"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -266,7 +277,7 @@
             </svg>
           {:else}
             <svg
-              class="h-4 w-4"
+              class="h-5 w-5"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"

package/dist/components/Breadcrumbs.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <nav aria-label="Breadcrumb" class="mb-6">
-  <ol class="flex flex-wrap items-center gap-1 text-sm">
+  <ol class="flex flex-wrap items-center gap-1 text-xs sm:text-sm">
     {#each items as item (item.href)}
       <li class="flex items-center">
         <a
@@ -22,10 +22,10 @@
         >
           {item.label}
         </a>
-        <span class="mx-2 text-gray-400" aria-hidden="true">/</span>
+        <span class="mx-1 sm:mx-2 text-gray-400" aria-hidden="true">/</span>
       </li>
     {/each}
-    <li class="text-gray-600 dark:text-gray-400" aria-current="page">
+    <li class="text-gray-700 dark:text-gray-300" aria-current="page">
       {current}
     </li>
   </ol>

package/dist/components/DomainCard.svelte

@@ -12,6 +12,7 @@
 
 <a
   href="/domains/{domain.id}"
+  aria-label="View {domain.name} domain"
   class="block rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
 >
   <div class="mb-2">

package/dist/components/Header.svelte

@@ -39,7 +39,9 @@
           {#each navLinks as link (link.href)}
             <a
               href={link.href}
-              class="rounded-md px-3 py-2 text-sm font-medium transition-colors {isActive(link.href)
+              class="rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 {isActive(
+                link.href
+              )
                 ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
                 : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white'}"
             >

package/dist/components/NavModeToggle.svelte

@@ -10,6 +10,7 @@
   aria-label={navModeStore.mode === 'flat' ? 'Switch to tree view' : 'Switch to flat view'}
   title={navModeStore.mode === 'flat' ? 'Switch to tree view' : 'Switch to flat view'}
 >
+  <span class="sr-only" aria-live="polite">Navigation: {navModeStore.mode} view</span>
   {#if navModeStore.mode === 'flat'}
     <!-- List icon -->
     <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

package/dist/components/NavTree.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SvelteSet } from 'svelte/reactivity';
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity';
   import type { Domain, UseCase, Service } from '@cwygoda/service-catalog-core/domain';
 
   interface Props {
@@ -30,28 +30,62 @@
     }
   }
 
-  // Get root domains (no parent)
+  // Pre-computed lookup maps — O(1) per query instead of O(n) filter scans
   const rootDomains = $derived(domains.filter((d) => !d.parent));
 
-  // Helper to get child domains
+  const childDomainMap = $derived.by(() => {
+    const map = new SvelteMap<string, Domain[]>();
+    for (const d of domains) {
+      if (d.parent) {
+        const arr = map.get(d.parent);
+        if (arr) arr.push(d);
+        else map.set(d.parent, [d]);
+      }
+    }
+    return map;
+  });
+
+  const domainUseCaseMap = $derived.by(() => {
+    const map = new SvelteMap<string, UseCase[]>();
+    for (const uc of useCases) {
+      if (!uc.domain) continue;
+      const arr = map.get(uc.domain);
+      if (arr) arr.push(uc);
+      else map.set(uc.domain, [uc]);
+    }
+    return map;
+  });
+
+  const domainServiceMap = $derived.by(() => {
+    const map = new SvelteMap<string, Service[]>();
+    for (const s of services) {
+      if (!s.domain) continue;
+      const arr = map.get(s.domain);
+      if (arr) arr.push(s);
+      else map.set(s.domain, [s]);
+    }
+    return map;
+  });
+
+  const serviceById = $derived.by(() => new SvelteMap(services.map((s) => [s.id, s] as const)));
+
+  // Thin wrappers — keep template call sites unchanged
   function getChildDomains(parentId: string): Domain[] {
-    return domains.filter((d) => d.parent === parentId);
+    return childDomainMap.get(parentId) ?? [];
   }
 
-  // Helper to get use cases for a domain
   function getDomainUseCases(domainId: string): UseCase[] {
-    return useCases.filter((uc) => uc.domain === domainId);
+    return domainUseCaseMap.get(domainId) ?? [];
   }
 
-  // Helper to get services for a domain
   function getDomainServices(domainId: string): Service[] {
-    return services.filter((s) => s.domain === domainId);
+    return domainServiceMap.get(domainId) ?? [];
   }
 
-  // Helper to get services for a use case
   function getUseCaseServices(useCase: UseCase): Service[] {
-    const serviceIds = useCase.participants.map((p) => p.service);
-    return services.filter((s) => serviceIds.includes(s.id));
+    return useCase.participants
+      .map((p) => serviceById.get(p.service))
+      .filter((s): s is Service => s !== undefined);
   }
 </script>
 
@@ -65,12 +99,12 @@
             onclick={() => {
               toggleDomain(domain.id);
             }}
-            class="flex h-5 w-5 items-center justify-center rounded text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+            class="flex min-h-11 min-w-11 items-center justify-center rounded text-gray-500 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-600 dark:text-gray-400 dark:hover:bg-gray-700"
             aria-expanded={expandedDomains.has(domain.id)}
             aria-label={expandedDomains.has(domain.id) ? 'Collapse' : 'Expand'}
           >
             <svg
-              class="h-3 w-3 transition-transform {expandedDomains.has(domain.id)
+              class="h-4 w-4 transition-transform {expandedDomains.has(domain.id)
                 ? 'rotate-90'
                 : ''}"
               fill="currentColor"
@@ -115,12 +149,12 @@
                       onclick={() => {
                         toggleUseCase(useCase.id);
                       }}
-                      class="flex h-5 w-5 items-center justify-center rounded text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                      class="flex min-h-11 min-w-11 items-center justify-center rounded text-gray-400 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-600 dark:hover:bg-gray-700"
                       aria-expanded={expandedUseCases.has(useCase.id)}
                       aria-label={expandedUseCases.has(useCase.id) ? 'Collapse' : 'Expand'}
                     >
                       <svg
-                        class="h-3 w-3 transition-transform {expandedUseCases.has(useCase.id)
+                        class="h-4 w-4 transition-transform {expandedUseCases.has(useCase.id)
                           ? 'rotate-90'
                           : ''}"
                         fill="currentColor"
@@ -134,7 +168,7 @@
                       </svg>
                     </button>
                   {:else}
-                    <span class="w-5"></span>
+                    <span class="min-w-11"></span>
                   {/if}
                   <a
                     href="/use-cases/{useCase.id}"
@@ -152,7 +186,7 @@
                       <li>
                         <a
                           href="/services/{service.id}"
-                          class="block rounded px-2 py-1 text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+                          class="block rounded px-2 py-1 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                         >
                           {service.name}
                         </a>
@@ -168,7 +202,7 @@
               <li>
                 <a
                   href="/services/{service.id}"
-                  class="ml-5 block rounded px-2 py-1 text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+                  class="ml-5 block rounded px-2 py-1 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                 >
                   {service.name}
                 </a>

package/dist/components/ServiceCard.svelte

@@ -6,6 +6,7 @@
 
 <a
   href="/services/{service.id}"
+  aria-label="View {service.name} service"
   class="block rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
 >
   <div class="mb-2 flex items-center justify-between">

package/dist/components/ServiceGraph.svelte

@@ -3,7 +3,9 @@
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import type { GraphNode, GraphEdge } from '@cwygoda/service-catalog-core/domain';
-  import type * as D3 from 'd3';
+  import type { Selection } from 'd3-selection';
+  import type { Simulation, SimulationNodeDatum } from 'd3-force';
+  import type { D3ZoomEvent } from 'd3-zoom';
 
   interface Props {
     nodes: GraphNode[];
@@ -14,22 +16,21 @@
 
   let { nodes, edges, height = 500, highlightedNodes }: Props = $props();
 
-  // Domain color mapping
-  const domainColors: Record<string, string> = {
-    commerce: '#3b82f6', // blue
-    platform: '#10b981', // green
-    default: '#6b7280', // gray
-  };
-
-  function getDomainColor(domain?: string): string {
-    const key = domain ?? 'default';
-    return domainColors[key] ?? '#6b7280';
+  function getDomainFillClass(domain?: string): string {
+    switch (domain) {
+      case 'commerce':
+        return 'fill-blue-500 dark:fill-blue-400';
+      case 'platform':
+        return 'fill-green-500 dark:fill-green-400';
+      default:
+        return 'fill-gray-500 dark:fill-gray-400';
+    }
   }
 
   let wrapper: HTMLDivElement;
   let container: HTMLDivElement;
   let svg: SVGSVGElement | null = null;
-  let simulation: D3.Simulation<D3.SimulationNodeDatum, undefined> | null = null;
+  let simulation: Simulation<SimulationNodeDatum, undefined> | null = null;
 
   // Simulation node type with position
   interface SimNode extends GraphNode {
@@ -47,12 +48,16 @@
   }
 
   // D3 selection refs for highlight updates
-  let nodeSelection: D3.Selection<SVGGElement, SimNode, SVGGElement, unknown> | null = null;
-  let linkSelection: D3.Selection<SVGLineElement, SimLink, SVGGElement, unknown> | null = null;
+  let nodeSelection: Selection<SVGGElement, SimNode, SVGGElement, unknown> | null = null;
+  let linkSelection: Selection<SVGLineElement, SimLink, SVGGElement, unknown> | null = null;
 
   // Tooltip state
   let tooltip = $state({ visible: false, x: 0, y: 0, content: '' });
 
+  // Responsive height — scales with container width on narrow screens
+  let responsiveHeight = $state(height);
+  let resizeObserver: ResizeObserver | null = null;
+
   // Fullscreen state
   let isFullscreen = $state(false);
 
@@ -73,16 +78,28 @@
     if (!browser) return;
 
     document.addEventListener('fullscreenchange', handleFullscreenChange);
-
-    const d3 = await import('d3');
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    const [
+      { select },
+      { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide },
+      { zoom },
+      { drag },
+    ] = await Promise.all([
+      import('d3-selection'),
+      import('d3-force'),
+      import('d3-zoom'),
+      import('d3-drag'),
+    ]);
 
     const width = container.clientWidth;
+    responsiveHeight = Math.max(300, Math.min(width * 0.6, height));
 
     // Create simulation nodes with positions
     const simNodes: SimNode[] = nodes.map((n) => ({
       ...n,
       x: width / 2 + (Math.random() - 0.5) * 100,
-      y: height / 2 + (Math.random() - 0.5) * 100,
+      y: responsiveHeight / 2 + (Math.random() - 0.5) * 100,
     }));
 
     // Create links referencing node objects
@@ -97,12 +114,16 @@
     }
 
     // Create SVG
-    const svgEl = d3
-      .select(container)
+    const svgEl = select(container)
       .append('svg')
       .attr('width', '100%')
-      .attr('height', height)
-      .attr('viewBox', `0 0 ${String(width)} ${String(height)}`);
+      .attr('height', responsiveHeight)
+      .attr('viewBox', `0 0 ${String(width)} ${String(responsiveHeight)}`)
+      .attr('role', 'img')
+      .attr(
+        'aria-label',
+        `Service dependency graph with ${String(nodes.length)} services and ${String(edges.length)} connections`
+      );
 
     svg = svgEl.node();
 
@@ -125,14 +146,13 @@
     const g = svgEl.append('g');
 
     // Add zoom behavior
-    const zoom = d3
-      .zoom<SVGSVGElement, unknown>()
+    const zoomBehavior = zoom<SVGSVGElement, unknown>()
       .scaleExtent([0.25, 4])
-      .on('zoom', (event: D3.D3ZoomEvent<SVGSVGElement, unknown>) => {
+      .on('zoom', (event: D3ZoomEvent<SVGSVGElement, unknown>) => {
         g.attr('transform', event.transform.toString());
       });
 
-    svgEl.call(zoom);
+    svgEl.call(zoomBehavior);
 
     // Draw edges
     linkSelection = g
@@ -159,8 +179,7 @@
 
     // Add drag behavior
     nodeGroups.call(
-      d3
-        .drag<SVGGElement, SimNode>()
+      drag<SVGGElement, SimNode>()
         .on('start', (event, d) => {
           if (!event.active) simulation?.alphaTarget(0.3).restart();
           d.fx = d.x;
@@ -183,13 +202,16 @@
     nodeSelection
       .append('circle')
       .attr('r', 20)
-      .attr('fill', (d) => getDomainColor(d.domain))
-      .attr('class', 'stroke-2 stroke-white dark:stroke-gray-800 transition-opacity')
+      .attr(
+        'class',
+        (d) =>
+          `${getDomainFillClass(d.domain)} stroke-2 stroke-white dark:stroke-gray-800 transition-opacity`
+      )
       .on('click', (_, d) => {
         void goto(`/services/${d.id}`);
       })
       .on('mouseenter', function (event: MouseEvent, d: SimNode) {
-        d3.select(this).attr('r', 24);
+        select(this).attr('r', 24);
         tooltip = {
           visible: true,
           x: event.pageX,
@@ -202,7 +224,7 @@
         tooltip.y = event.pageY - 10;
       })
       .on('mouseleave', function () {
-        d3.select(this).attr('r', 20);
+        select(this).attr('r', 20);
         tooltip.visible = false;
       });
 
@@ -218,31 +240,48 @@
       );
 
     // Force simulation - D3's forceSimulation has complex generics that don't match our SimNode
-    simulation = d3
+    simulation =
       // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
-      .forceSimulation(simNodes as any)
-      .force(
-        'link',
-        d3
-          .forceLink(simLinks)
-          .id((d) => (d as SimNode).id)
-          .distance(120)
-      )
-      .force('charge', d3.forceManyBody().strength(-400))
-      .force('center', d3.forceCenter(width / 2, height / 2))
-      .force('collision', d3.forceCollide().radius(40))
-      .on('tick', () => {
-        linkSelection
-          ?.attr('x1', (d) => d.source.x)
-          .attr('y1', (d) => d.source.y)
-          .attr('x2', (d) => d.target.x)
-          .attr('y2', (d) => d.target.y);
-
-        nodeSelection?.attr('transform', (d) => `translate(${String(d.x)},${String(d.y)})`);
-      });
+      forceSimulation(simNodes as any)
+        .force(
+          'link',
+          forceLink(simLinks)
+            .id((d) => (d as SimNode).id)
+            .distance(120)
+        )
+        .force('charge', forceManyBody().strength(-400))
+        .force('center', forceCenter(width / 2, responsiveHeight / 2))
+        .force('collision', forceCollide().radius(40))
+        .on('tick', () => {
+          linkSelection
+            ?.attr('x1', (d) => d.source.x)
+            .attr('y1', (d) => d.source.y)
+            .attr('x2', (d) => d.target.x)
+            .attr('y2', (d) => d.target.y);
+
+          nodeSelection?.attr('transform', (d) => `translate(${String(d.x)},${String(d.y)})`);
+        });
+
+    // Resize observer for responsive height
+    resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const newWidth = entry.contentRect.width;
+      const newHeight = Math.max(300, Math.min(newWidth * 0.6, height));
+      if (Math.abs(newHeight - responsiveHeight) < 10) return;
+      responsiveHeight = newHeight;
+      svgEl
+        .attr('height', newHeight)
+        .attr('viewBox', `0 0 ${String(newWidth)} ${String(newHeight)}`);
+      simulation
+        ?.force('center', forceCenter(newWidth / 2, newHeight / 2))
+        .alpha(0.3)
+        .restart();
+    });
+    resizeObserver.observe(container);
   });
 
-  // Effect to update highlighting when highlightedNodes changes
+  // Effect to update highlighting when highlightedNodes changes (CSS class-based)
   $effect(() => {
     if (!nodeSelection || !linkSelection) return;
 
@@ -252,24 +291,41 @@
     if (hasHighlight) {
       const highlightSet = new Set(highlighted);
 
-      // Dim non-highlighted nodes
-      nodeSelection.attr('opacity', (d) => (highlightSet.has(d.id) ? 1 : 0.2));
-
-      // Dim edges not between highlighted nodes
-      linkSelection.attr('opacity', (d) => {
-        return highlightSet.has(d.source.id) && highlightSet.has(d.target.id) ? 1 : 0.1;
-      });
+      nodeSelection
+        .classed('graph-node-dimmed', (d) => !highlightSet.has(d.id))
+        .classed('graph-full-opacity', (d) => highlightSet.has(d.id));
+
+      linkSelection
+        .classed(
+          'graph-link-dimmed',
+          (d) => !(highlightSet.has(d.source.id) && highlightSet.has(d.target.id))
+        )
+        .classed(
+          'graph-full-opacity',
+          (d) => highlightSet.has(d.source.id) && highlightSet.has(d.target.id)
+        );
     } else {
-      // Reset all to full opacity
-      nodeSelection.attr('opacity', 1);
-      linkSelection.attr('opacity', 1);
+      nodeSelection.classed('graph-node-dimmed', false).classed('graph-full-opacity', false);
+      linkSelection.classed('graph-link-dimmed', false).classed('graph-full-opacity', false);
     }
   });
 
+  // Pause simulation when tab is hidden to save CPU
+  function handleVisibilityChange(): void {
+    if (!simulation) return;
+    if (document.hidden) {
+      simulation.stop();
+    } else if (simulation.alpha() > simulation.alphaMin()) {
+      simulation.restart();
+    }
+  }
+
   onDestroy(() => {
     if (browser) {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
     }
+    resizeObserver?.disconnect();
     simulation?.stop();
     svg?.remove();
   });
@@ -279,7 +335,7 @@
   <div
     bind:this={container}
     class="w-full rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
-    style="height: {isFullscreen ? '100vh' : `${String(height)}px`}"
+    style="height: {isFullscreen ? '100vh' : `${String(responsiveHeight)}px`}"
   ></div>
 
   <!-- Tooltip -->
@@ -298,13 +354,13 @@
   >
     <button
       onclick={toggleFullscreen}
-      class="rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      class="flex min-h-11 min-w-11 items-center justify-center rounded p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
       aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
       title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
     >
       {#if isFullscreen}
         <!-- Exit fullscreen icon -->
-        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -313,7 +369,7 @@
         </svg>
       {:else}
         <!-- Enter fullscreen icon -->
-        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -329,20 +385,38 @@
     class="absolute bottom-3 left-3 flex flex-wrap gap-3 rounded-lg border border-gray-200 bg-white/90 px-3 py-2 text-xs backdrop-blur-sm dark:border-gray-600 dark:bg-gray-800/90"
   >
     <div class="flex items-center gap-1.5">
-      <span class="h-3 w-3 rounded-full bg-blue-500"></span>
-      <span class="text-gray-600 dark:text-gray-400">Commerce</span>
+      <span class="h-3 w-3 rounded-full bg-blue-500 dark:bg-blue-400"></span>
+      <span class="text-gray-700 dark:text-gray-300">Commerce</span>
     </div>
     <div class="flex items-center gap-1.5">
-      <span class="h-3 w-3 rounded-full bg-green-500"></span>
-      <span class="text-gray-600 dark:text-gray-400">Platform</span>
+      <span class="h-3 w-3 rounded-sm bg-green-500 dark:bg-green-400"></span>
+      <span class="text-gray-700 dark:text-gray-300">Platform</span>
     </div>
     <div class="flex items-center gap-1.5">
-      <span class="mr-1 h-0.5 w-4 bg-gray-500"></span>
-      <span class="text-gray-600 dark:text-gray-400">HTTP</span>
+      <span class="mr-1 h-0.5 w-4 bg-gray-500 dark:bg-gray-400"></span>
+      <span class="text-gray-700 dark:text-gray-300">HTTP</span>
     </div>
     <div class="flex items-center gap-1.5">
-      <span class="mr-1 h-0.5 w-4 border-t-2 border-dashed border-gray-400"></span>
-      <span class="text-gray-600 dark:text-gray-400">Event</span>
+      <span class="mr-1 h-0.5 w-4 border-t-2 border-dashed border-gray-400 dark:border-gray-500"
+      ></span>
+      <span class="text-gray-700 dark:text-gray-300">Event</span>
     </div>
   </div>
 </div>
+
+<style>
+  :global(.graph-node-dimmed) {
+    opacity: 0.2;
+    transition: opacity 0.3s ease;
+  }
+
+  :global(.graph-link-dimmed) {
+    opacity: 0.1;
+    transition: opacity 0.3s ease;
+  }
+
+  :global(.graph-full-opacity) {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+  }
+</style>

package/dist/components/ThemeToggle.svelte

@@ -9,6 +9,7 @@
   class="rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
   aria-label="Toggle theme"
 >
+  <span class="sr-only" aria-live="polite">Theme: {theme.resolved}</span>
   {#if theme.resolved === 'dark'}
     <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path

package/dist/components/UseCaseCard.svelte

@@ -11,6 +11,7 @@
 
 <a
   href="/use-cases/{useCase.id}"
+  aria-label="View {useCase.name} use case"
   class="block rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
 >
   <div class="mb-2 flex items-center justify-between">
@@ -19,7 +20,7 @@
     </h3>
     {#if useCase.bpmn}
       <span
-        class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+        class="rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-900 dark:text-primary-200"
       >
         BPMN
       </span>
@@ -30,7 +31,7 @@
     {truncate(useCase.description, 120)}
   </p>
 
-  <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
+  <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
     <span class="flex items-center gap-1">
       <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path

package/dist/source.css

@@ -0,0 +1 @@
+@source "./";

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@cwygoda/service-catalog-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "svelte": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "style": "./dist/source.css",
       "svelte": "./dist/index.js"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
+      "style": "./dist/source.css",
       "svelte": "./dist/components/index.js"
     },
     "./stores": {
       "types": "./dist/stores/index.d.ts",
+      "style": "./dist/source.css",
       "svelte": "./dist/stores/index.js"
     }
   },
@@ -22,12 +25,15 @@
   ],
   "dependencies": {
     "@sinclair/typebox": "^0.34.0",
-    "@cwygoda/service-catalog-core": "1.0.1"
+    "@cwygoda/service-catalog-core": "1.0.3"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
     "bpmn-js": "^18.0.0",
-    "d3": "^7.0.0",
+    "d3-drag": "^3.0.0",
+    "d3-force": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
@@ -37,7 +43,10 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/d3": "^7.4.3",
+    "@types/d3-drag": "^3.0.0",
+    "@types/d3-force": "^3.0.0",
+    "@types/d3-selection": "^3.0.0",
+    "@types/d3-zoom": "^3.0.0",
     "jsdom": "^26.0.0",
     "svelte": "^5.49.2",
     "svelte-check": "^4.3.6",