@cwygoda/service-catalog-ui 1.0.1

package/dist/components/Header.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import ThemeToggle from './ThemeToggle.svelte';
+  import NavModeToggle from './NavModeToggle.svelte';
+
+  const navLinks = [
+    { href: '/', label: 'Home' },
+    { href: '/domains', label: 'Domains' },
+    { href: '/use-cases', label: 'Use Cases' },
+    { href: '/services', label: 'Services' },
+    { href: '/graph', label: 'Graph' },
+  ];
+
+  let mobileMenuOpen = $state(false);
+
+  function isActive(href: string): boolean {
+    if (href === '/') {
+      return page.url.pathname === '/';
+    }
+    return page.url.pathname.startsWith(href);
+  }
+
+  function toggleMobileMenu() {
+    mobileMenuOpen = !mobileMenuOpen;
+  }
+
+  function closeMobileMenu() {
+    mobileMenuOpen = false;
+  }
+</script>
+
+<header class="border-b border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div class="flex h-16 items-center justify-between">
+      <div class="flex items-center">
+        <a href="/" class="text-xl font-bold text-gray-900 dark:text-white"> Service Catalog </a>
+        <!-- Desktop nav -->
+        <nav class="ml-10 hidden space-x-4 sm:flex">
+          {#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)
+                ? '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'}"
+            >
+              {link.label}
+            </a>
+          {/each}
+        </nav>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <NavModeToggle />
+        <ThemeToggle />
+        <!-- Mobile menu button -->
+        <button
+          onclick={toggleMobileMenu}
+          class="rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 sm:hidden dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
+          aria-label="Toggle menu"
+          aria-expanded={mobileMenuOpen}
+        >
+          {#if mobileMenuOpen}
+            <!-- Close icon -->
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          {:else}
+            <!-- Hamburger icon -->
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          {/if}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu -->
+  {#if mobileMenuOpen}
+    <nav
+      class="border-t border-gray-200 bg-white px-4 py-3 sm:hidden dark:border-gray-700 dark:bg-gray-900"
+    >
+      <div class="flex flex-col space-y-1">
+        {#each navLinks as link (link.href)}
+          <a
+            href={link.href}
+            onclick={closeMobileMenu}
+            class="rounded-md px-3 py-2 text-base font-medium transition-colors {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'}"
+          >
+            {link.label}
+          </a>
+        {/each}
+      </div>
+    </nav>
+  {/if}
+</header>

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

@@ -0,0 +1,3 @@
+declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/NavModeToggle.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { navModeStore } from '../stores/nav-mode.svelte.js';
+</script>
+
+<button
+  onclick={() => {
+    navModeStore.toggle();
+  }}
+  class="hidden rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 lg:block dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
+  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'}
+>
+  {#if navModeStore.mode === 'flat'}
+    <!-- List icon -->
+    <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="M4 6h16M4 10h16M4 14h16M4 18h16" />
+    </svg>
+  {:else}
+    <!-- Tree icon -->
+    <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="M3 7h2m4 0h12M3 12h2m4 0h12M3 17h2m4 0h12"
+      />
+    </svg>
+  {/if}
+</button>

package/dist/components/NavModeToggle.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 NavModeToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavModeToggle = InstanceType<typeof NavModeToggle>;
+export default NavModeToggle;

package/dist/components/NavTree.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { SvelteSet } from 'svelte/reactivity';
+  import type { Domain, UseCase, Service } from '@cwygoda/service-catalog-core/domain';
+
+  interface Props {
+    domains: Domain[];
+    useCases: UseCase[];
+    services: Service[];
+  }
+
+  let { domains, useCases, services }: Props = $props();
+
+  // Track expanded state for domains and use cases
+  const expandedDomains = new SvelteSet<string>();
+  const expandedUseCases = new SvelteSet<string>();
+
+  function toggleDomain(id: string) {
+    if (expandedDomains.has(id)) {
+      expandedDomains.delete(id);
+    } else {
+      expandedDomains.add(id);
+    }
+  }
+
+  function toggleUseCase(id: string) {
+    if (expandedUseCases.has(id)) {
+      expandedUseCases.delete(id);
+    } else {
+      expandedUseCases.add(id);
+    }
+  }
+
+  // Get root domains (no parent)
+  const rootDomains = $derived(domains.filter((d) => !d.parent));
+
+  // Helper to get child domains
+  function getChildDomains(parentId: string): Domain[] {
+    return domains.filter((d) => d.parent === parentId);
+  }
+
+  // Helper to get use cases for a domain
+  function getDomainUseCases(domainId: string): UseCase[] {
+    return useCases.filter((uc) => uc.domain === domainId);
+  }
+
+  // Helper to get services for a domain
+  function getDomainServices(domainId: string): Service[] {
+    return services.filter((s) => s.domain === 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));
+  }
+</script>
+
+<nav class="text-sm" aria-label="Catalog tree">
+  <ul class="space-y-1">
+    {#each rootDomains as domain (domain.id)}
+      <li>
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            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"
+            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)
+                ? 'rotate-90'
+                : ''}"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+          <a
+            href="/domains/{domain.id}"
+            class="flex-1 rounded px-2 py-1 font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+          >
+            {domain.name}
+          </a>
+        </div>
+
+        {#if expandedDomains.has(domain.id)}
+          <ul class="ml-6 mt-1 space-y-1 border-l border-gray-200 pl-2 dark:border-gray-700">
+            <!-- Child Domains -->
+            {#each getChildDomains(domain.id) as child (child.id)}
+              <li>
+                <a
+                  href="/domains/{child.id}"
+                  class="block rounded px-2 py-1 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                  {child.name}
+                </a>
+              </li>
+            {/each}
+
+            <!-- Use Cases -->
+            {#each getDomainUseCases(domain.id) as useCase (useCase.id)}
+              <li>
+                <div class="flex items-center gap-1">
+                  {#if getUseCaseServices(useCase).length > 0}
+                    <button
+                      type="button"
+                      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"
+                      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)
+                          ? 'rotate-90'
+                          : ''}"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+                    </button>
+                  {:else}
+                    <span class="w-5"></span>
+                  {/if}
+                  <a
+                    href="/use-cases/{useCase.id}"
+                    class="flex-1 rounded px-2 py-1 text-primary-600 hover:bg-gray-100 dark:text-primary-400 dark:hover:bg-gray-700"
+                  >
+                    {useCase.name}
+                  </a>
+                </div>
+
+                {#if expandedUseCases.has(useCase.id)}
+                  <ul
+                    class="ml-6 mt-1 space-y-1 border-l border-gray-200 pl-2 dark:border-gray-700"
+                  >
+                    {#each getUseCaseServices(useCase) as service (service.id)}
+                      <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"
+                        >
+                          {service.name}
+                        </a>
+                      </li>
+                    {/each}
+                  </ul>
+                {/if}
+              </li>
+            {/each}
+
+            <!-- Services directly in domain (not via use case) -->
+            {#each getDomainServices(domain.id) as service (service.id)}
+              <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"
+                >
+                  {service.name}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</nav>

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

@@ -0,0 +1,9 @@
+import type { Domain, UseCase, Service } from '@cwygoda/service-catalog-core/domain';
+interface Props {
+    domains: Domain[];
+    useCases: UseCase[];
+    services: Service[];
+}
+declare const NavTree: import("svelte").Component<Props, {}, "">;
+type NavTree = ReturnType<typeof NavTree>;
+export default NavTree;

package/dist/components/ServiceCard.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Service } from '@cwygoda/service-catalog-core/domain';
+
+  let { service }: { service: Service } = $props();
+</script>
+
+<a
+  href="/services/{service.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">
+      {service.name}
+    </h3>
+    {#if service.metadata?.version}
+      <span
+        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"
+      >
+        v{service.metadata.version}
+      </span>
+    {/if}
+  </div>
+  <p class="text-sm text-gray-600 dark:text-gray-400">
+    {service.description}
+  </p>
+</a>

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

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

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

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

package/dist/components/ServiceCard.test.js

@@ -0,0 +1,36 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import ServiceCard from './ServiceCard.svelte';
+describe('ServiceCard', () => {
+    const baseService = {
+        id: 'test-service',
+        name: 'Test Service',
+        description: 'A test service description',
+    };
+    it('renders service name', () => {
+        render(ServiceCard, { props: { service: baseService } });
+        expect(screen.getByText('Test Service')).toBeInTheDocument();
+    });
+    it('renders service description', () => {
+        render(ServiceCard, { props: { service: baseService } });
+        expect(screen.getByText('A test service description')).toBeInTheDocument();
+    });
+    it('links to service detail page', () => {
+        render(ServiceCard, { props: { service: baseService } });
+        const link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', '/services/test-service');
+    });
+    it('shows version badge when metadata has version', () => {
+        const serviceWithVersion = {
+            ...baseService,
+            metadata: { version: '1.2.3' },
+        };
+        render(ServiceCard, { props: { service: serviceWithVersion } });
+        expect(screen.getByText('v1.2.3')).toBeInTheDocument();
+    });
+    it('does not show version badge when no metadata', () => {
+        render(ServiceCard, { props: { service: baseService } });
+        expect(screen.queryByText(/^v\d/)).not.toBeInTheDocument();
+    });
+});