@cwygoda/service-catalog-ui 1.0.1

package/dist/components/ServiceGraph.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  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';
+
+  interface Props {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    height?: number;
+    highlightedNodes?: string[] | undefined;
+  }
+
+  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';
+  }
+
+  let wrapper: HTMLDivElement;
+  let container: HTMLDivElement;
+  let svg: SVGSVGElement | null = null;
+  let simulation: D3.Simulation<D3.SimulationNodeDatum, undefined> | null = null;
+
+  // Simulation node type with position
+  interface SimNode extends GraphNode {
+    x: number;
+    y: number;
+    fx?: number | null;
+    fy?: number | null;
+  }
+
+  // Simulation link type with node references
+  interface SimLink {
+    source: SimNode;
+    target: SimNode;
+    type: string;
+  }
+
+  // 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;
+
+  // Tooltip state
+  let tooltip = $state({ visible: false, x: 0, y: 0, content: '' });
+
+  // Fullscreen state
+  let isFullscreen = $state(false);
+
+  function toggleFullscreen(): void {
+    if (!browser) return;
+    if (!document.fullscreenElement) {
+      void wrapper.requestFullscreen();
+    } else {
+      void document.exitFullscreen();
+    }
+  }
+
+  function handleFullscreenChange(): void {
+    isFullscreen = !!document.fullscreenElement;
+  }
+
+  onMount(async () => {
+    if (!browser) return;
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    const d3 = await import('d3');
+
+    const width = container.clientWidth;
+
+    // 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,
+    }));
+
+    // Create links referencing node objects
+    const nodeById = new Map(simNodes.map((n) => [n.id, n]));
+    const simLinks: SimLink[] = [];
+    for (const e of edges) {
+      const source = nodeById.get(e.source);
+      const target = nodeById.get(e.target);
+      if (source && target) {
+        simLinks.push({ source, target, type: e.type });
+      }
+    }
+
+    // Create SVG
+    const svgEl = d3
+      .select(container)
+      .append('svg')
+      .attr('width', '100%')
+      .attr('height', height)
+      .attr('viewBox', `0 0 ${String(width)} ${String(height)}`);
+
+    svg = svgEl.node();
+
+    // Arrow marker definitions
+    const defs = svgEl.append('defs');
+    defs
+      .append('marker')
+      .attr('id', 'arrowhead')
+      .attr('viewBox', '0 -5 10 10')
+      .attr('refX', 25)
+      .attr('refY', 0)
+      .attr('markerWidth', 6)
+      .attr('markerHeight', 6)
+      .attr('orient', 'auto')
+      .append('path')
+      .attr('d', 'M0,-5L10,0L0,5')
+      .attr('class', 'fill-gray-400 dark:fill-gray-500');
+
+    // Container group for zoom/pan
+    const g = svgEl.append('g');
+
+    // Add zoom behavior
+    const zoom = d3
+      .zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.25, 4])
+      .on('zoom', (event: D3.D3ZoomEvent<SVGSVGElement, unknown>) => {
+        g.attr('transform', event.transform.toString());
+      });
+
+    svgEl.call(zoom);
+
+    // Draw edges
+    linkSelection = g
+      .append('g')
+      .selectAll<SVGLineElement, SimLink>('line')
+      .data(simLinks)
+      .join('line')
+      .attr('class', (d) =>
+        d.type === 'event'
+          ? 'stroke-gray-400 dark:stroke-gray-500'
+          : 'stroke-gray-500 dark:stroke-gray-400'
+      )
+      .attr('stroke-width', 2)
+      .attr('stroke-dasharray', (d) => (d.type === 'event' ? '5,5' : 'none'))
+      .attr('marker-end', 'url(#arrowhead)');
+
+    // Draw nodes
+    const nodeGroups = g
+      .append('g')
+      .selectAll<SVGGElement, SimNode>('g')
+      .data(simNodes)
+      .join('g')
+      .attr('class', 'cursor-pointer');
+
+    // Add drag behavior
+    nodeGroups.call(
+      d3
+        .drag<SVGGElement, SimNode>()
+        .on('start', (event, d) => {
+          if (!event.active) simulation?.alphaTarget(0.3).restart();
+          d.fx = d.x;
+          d.fy = d.y;
+        })
+        .on('drag', (event, d) => {
+          d.fx = event.x as number;
+          d.fy = event.y as number;
+        })
+        .on('end', (event, d) => {
+          if (!event.active) simulation?.alphaTarget(0);
+          d.fx = null;
+          d.fy = null;
+        })
+    );
+
+    nodeSelection = nodeGroups;
+
+    // Node circles
+    nodeSelection
+      .append('circle')
+      .attr('r', 20)
+      .attr('fill', (d) => getDomainColor(d.domain))
+      .attr('class', '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);
+        tooltip = {
+          visible: true,
+          x: event.pageX,
+          y: event.pageY - 10,
+          content: `${d.name}${d.domain ? ` (${d.domain})` : ''}`,
+        };
+      })
+      .on('mousemove', (event: MouseEvent) => {
+        tooltip.x = event.pageX;
+        tooltip.y = event.pageY - 10;
+      })
+      .on('mouseleave', function () {
+        d3.select(this).attr('r', 20);
+        tooltip.visible = false;
+      });
+
+    // Node labels
+    nodeSelection
+      .append('text')
+      .text((d) => d.name.split(' ')[0] ?? d.name)
+      .attr('text-anchor', 'middle')
+      .attr('dy', 35)
+      .attr(
+        'class',
+        'text-xs fill-gray-700 dark:fill-gray-300 pointer-events-none transition-opacity'
+      );
+
+    // Force simulation - D3's forceSimulation has complex generics that don't match our SimNode
+    simulation = d3
+      // 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)})`);
+      });
+  });
+
+  // Effect to update highlighting when highlightedNodes changes
+  $effect(() => {
+    if (!nodeSelection || !linkSelection) return;
+
+    const highlighted = highlightedNodes;
+    const hasHighlight = highlighted && highlighted.length > 0;
+
+    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;
+      });
+    } else {
+      // Reset all to full opacity
+      nodeSelection.attr('opacity', 1);
+      linkSelection.attr('opacity', 1);
+    }
+  });
+
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    }
+    simulation?.stop();
+    svg?.remove();
+  });
+</script>
+
+<div bind:this={wrapper} class="relative {isFullscreen ? 'bg-white dark:bg-gray-900' : ''}">
+  <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`}"
+  ></div>
+
+  <!-- Tooltip -->
+  {#if tooltip.visible}
+    <div
+      class="pointer-events-none fixed z-50 rounded bg-gray-900 px-2 py-1 text-sm text-white shadow-lg dark:bg-gray-700"
+      style="left: {tooltip.x}px; top: {tooltip.y}px; transform: translate(-50%, -100%)"
+    >
+      {tooltip.content}
+    </div>
+  {/if}
+
+  <!-- Controls -->
+  <div
+    class="absolute right-3 top-3 flex flex-col gap-1 rounded-lg border border-gray-200 bg-white/90 p-1 shadow-sm backdrop-blur-sm dark:border-gray-600 dark:bg-gray-800/90"
+  >
+    <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"
+      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">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"
+          />
+        </svg>
+      {:else}
+        <!-- Enter fullscreen icon -->
+        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+          />
+        </svg>
+      {/if}
+    </button>
+  </div>
+
+  <!-- Legend -->
+  <div
+    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>
+    </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>
+    </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>
+    </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>
+    </div>
+  </div>
+</div>

package/dist/components/ServiceGraph.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { GraphNode, GraphEdge } from '@cwygoda/service-catalog-core/domain';
+interface Props {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    height?: number;
+    highlightedNodes?: string[] | undefined;
+}
+declare const ServiceGraph: import("svelte").Component<Props, {}, "">;
+type ServiceGraph = ReturnType<typeof ServiceGraph>;
+export default ServiceGraph;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { theme } from '../stores/theme.svelte';
+</script>
+
+<button
+  onclick={() => {
+    theme.toggle();
+  }}
+  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"
+>
+  {#if theme.resolved === 'dark'}
+    <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"
+        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+  {:else}
+    <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"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      />
+    </svg>
+  {/if}
+</button>

package/dist/components/ThemeToggle.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ThemeToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThemeToggle = InstanceType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/ThemeToggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ThemeToggle.test.js

@@ -0,0 +1,52 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen, cleanup } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import ThemeToggle from './ThemeToggle.svelte';
+describe('ThemeToggle', () => {
+    beforeEach(() => {
+        // Clear localStorage and reset document
+        localStorage.clear();
+        document.documentElement.classList.remove('dark');
+    });
+    afterEach(() => {
+        cleanup();
+    });
+    it('renders toggle button', () => {
+        render(ThemeToggle);
+        expect(screen.getByRole('button', { name: 'Toggle theme' })).toBeInTheDocument();
+    });
+    it('toggles theme on click', async () => {
+        const user = userEvent.setup();
+        render(ThemeToggle);
+        const button = screen.getByRole('button', { name: 'Toggle theme' });
+        const initialDark = document.documentElement.classList.contains('dark');
+        await user.click(button);
+        // Theme should be toggled from initial state
+        const afterClick = document.documentElement.classList.contains('dark');
+        expect(afterClick).not.toBe(initialDark);
+    });
+    it('toggles theme back on second click', async () => {
+        const user = userEvent.setup();
+        render(ThemeToggle);
+        const button = screen.getByRole('button', { name: 'Toggle theme' });
+        // Get state after first click
+        await user.click(button);
+        const afterFirstClick = document.documentElement.classList.contains('dark');
+        // Click again
+        await user.click(button);
+        const afterSecondClick = document.documentElement.classList.contains('dark');
+        // Should be opposite of after first click
+        expect(afterSecondClick).not.toBe(afterFirstClick);
+    });
+    it('persists theme to localStorage', async () => {
+        const user = userEvent.setup();
+        render(ThemeToggle);
+        const button = screen.getByRole('button', { name: 'Toggle theme' });
+        await user.click(button);
+        // Should have persisted something to localStorage
+        const stored = localStorage.getItem('theme');
+        expect(stored).toBeTruthy();
+        expect(['light', 'dark']).toContain(stored);
+    });
+});

package/dist/components/UseCaseCard.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { UseCase } from '@cwygoda/service-catalog-core/domain';
+
+  let { useCase }: { useCase: UseCase } = $props();
+
+  function truncate(text: string, maxLength: number): string {
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength).trimEnd() + '...';
+  }
+</script>
+
+<a
+  href="/use-cases/{useCase.id}"
+  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">
+    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+      {useCase.name}
+    </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"
+      >
+        BPMN
+      </span>
+    {/if}
+  </div>
+
+  <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+    {truncate(useCase.description, 120)}
+  </p>
+
+  <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
+    <span class="flex items-center gap-1">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+        />
+      </svg>
+      {useCase.participants.length} participant{useCase.participants.length !== 1 ? 's' : ''}
+    </span>
+    <span class="flex items-center gap-1">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
+        />
+      </svg>
+      {useCase.steps.length} step{useCase.steps.length !== 1 ? 's' : ''}
+    </span>
+  </div>
+</a>

package/dist/components/UseCaseCard.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { UseCase } from '@cwygoda/service-catalog-core/domain';
+type $$ComponentProps = {
+    useCase: UseCase;
+};
+declare const UseCaseCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type UseCaseCard = ReturnType<typeof UseCaseCard>;
+export default UseCaseCard;

package/dist/components/UseCaseCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/UseCaseCard.test.js

@@ -0,0 +1,87 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import UseCaseCard from './UseCaseCard.svelte';
+describe('UseCaseCard', () => {
+    const baseUseCase = {
+        id: 'test-use-case',
+        name: 'Test Use Case',
+        description: 'A test use case description',
+        participants: [],
+        steps: [],
+    };
+    it('renders use case name', () => {
+        render(UseCaseCard, { props: { useCase: baseUseCase } });
+        expect(screen.getByText('Test Use Case')).toBeInTheDocument();
+    });
+    it('renders use case description', () => {
+        render(UseCaseCard, { props: { useCase: baseUseCase } });
+        expect(screen.getByText('A test use case description')).toBeInTheDocument();
+    });
+    it('links to use case detail page', () => {
+        render(UseCaseCard, { props: { useCase: baseUseCase } });
+        const link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', '/use-cases/test-use-case');
+    });
+    it('truncates long descriptions with ellipsis', () => {
+        const longDesc = 'A'.repeat(150);
+        const useCaseWithLongDesc = {
+            ...baseUseCase,
+            description: longDesc,
+        };
+        render(UseCaseCard, { props: { useCase: useCaseWithLongDesc } });
+        // Should truncate to 120 chars + "..."
+        expect(screen.getByText(/^A{100,120}\.\.\.$/)).toBeInTheDocument();
+    });
+    it('shows BPMN badge when bpmn is defined', () => {
+        const useCaseWithBpmn = {
+            ...baseUseCase,
+            bpmn: './diagram.bpmn',
+        };
+        render(UseCaseCard, { props: { useCase: useCaseWithBpmn } });
+        expect(screen.getByText('BPMN')).toBeInTheDocument();
+    });
+    it('does not show BPMN badge when no bpmn', () => {
+        render(UseCaseCard, { props: { useCase: baseUseCase } });
+        expect(screen.queryByText('BPMN')).not.toBeInTheDocument();
+    });
+    it('shows participant count', () => {
+        const useCaseWithParticipants = {
+            ...baseUseCase,
+            participants: [
+                { service: 'svc-1', role: 'Role 1' },
+                { service: 'svc-2', role: 'Role 2' },
+            ],
+        };
+        render(UseCaseCard, { props: { useCase: useCaseWithParticipants } });
+        expect(screen.getByText('2 participants')).toBeInTheDocument();
+    });
+    it('shows singular participant when count is 1', () => {
+        const useCaseWithOneParticipant = {
+            ...baseUseCase,
+            participants: [{ service: 'svc-1', role: 'Role 1' }],
+        };
+        render(UseCaseCard, { props: { useCase: useCaseWithOneParticipant } });
+        expect(screen.getByText('1 participant')).toBeInTheDocument();
+    });
+    it('shows step count', () => {
+        const useCaseWithSteps = {
+            ...baseUseCase,
+            steps: [
+                { sequence: 1, action: 'Step 1' },
+                { sequence: 2, action: 'Step 2' },
+                { sequence: 3, action: 'Step 3' },
+            ],
+        };
+        render(UseCaseCard, { props: { useCase: useCaseWithSteps } });
+        expect(screen.getByText('3 steps')).toBeInTheDocument();
+    });
+    it('shows singular step when count is 1', () => {
+        const useCaseWithOneStep = {
+            ...baseUseCase,
+            steps: [{ sequence: 1, action: 'Step 1' }],
+        };
+        render(UseCaseCard, { props: { useCase: useCaseWithOneStep } });
+        expect(screen.getByText('1 step')).toBeInTheDocument();
+    });
+});

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+export { default as BpmnDiagram } from './BpmnDiagram.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as DomainCard } from './DomainCard.svelte';
+export { default as Header } from './Header.svelte';
+export { default as NavModeToggle } from './NavModeToggle.svelte';
+export { default as NavTree } from './NavTree.svelte';
+export { default as ServiceCard } from './ServiceCard.svelte';
+export { default as ServiceGraph } from './ServiceGraph.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as UseCaseCard } from './UseCaseCard.svelte';

package/dist/components/index.js

@@ -0,0 +1,10 @@
+export { default as BpmnDiagram } from './BpmnDiagram.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as DomainCard } from './DomainCard.svelte';
+export { default as Header } from './Header.svelte';
+export { default as NavModeToggle } from './NavModeToggle.svelte';
+export { default as NavTree } from './NavTree.svelte';
+export { default as ServiceCard } from './ServiceCard.svelte';
+export { default as ServiceGraph } from './ServiceGraph.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as UseCaseCard } from './UseCaseCard.svelte';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export * from './stores/index.js';
+export * from './adapters/index.js';
+export * from './ports/index.js';
+export * from './utils/index.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export * from './stores/index.js';
+export * from './adapters/index.js';
+export * from './ports/index.js';
+export * from './utils/index.js';

package/dist/ports/catalog.port.d.ts

@@ -0,0 +1,5 @@
+import type { Catalog, Service } from '@cwygoda/service-catalog-core/domain';
+export interface CatalogPort {
+    getCatalog(): Promise<Catalog>;
+    getService(id: string): Promise<Service | undefined>;
+}

package/dist/ports/catalog.port.js

@@ -0,0 +1 @@
+export {};

package/dist/ports/index.d.ts

@@ -0,0 +1 @@
+export type { CatalogPort } from './catalog.port.js';

package/dist/ports/index.js

@@ -0,0 +1 @@
+export {};