@cwygoda/service-catalog-ui 0.17.1

package/dist/components/DataStoreShield.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { DataStoreType } from '@cwygoda/service-catalog-core/domain';
+  import Shield from './Shield.svelte';
+
+  interface Props {
+    type: DataStoreType;
+    technology?: string | undefined;
+    size?: number;
+  }
+
+  let { type, technology, size = 40 }: Props = $props();
+
+  const typeLabels: Record<DataStoreType, { short: string; full: string }> = {
+    database: { short: 'Db', full: 'Database' },
+    cache: { short: 'Ca', full: 'Cache' },
+    queue: { short: 'Qu', full: 'Queue' },
+    'search-index': { short: 'Si', full: 'Search Index' },
+    'object-store': { short: 'Os', full: 'Object Store' },
+  };
+
+  const techLabels: Record<string, { short: string; full: string } | undefined> = {
+    postgresql: { short: 'Pg', full: 'PostgreSQL' },
+    postgres: { short: 'Pg', full: 'PostgreSQL' },
+    'rds postgresql': { short: 'Pg', full: 'PostgreSQL' },
+    mysql: { short: 'My', full: 'MySQL' },
+    'rds mysql': { short: 'My', full: 'MySQL' },
+    mariadb: { short: 'Ma', full: 'MariaDB' },
+    mongodb: { short: 'Mg', full: 'MongoDB' },
+    redis: { short: 'Re', full: 'Redis' },
+    elasticache: { short: 'Re', full: 'ElastiCache' },
+    memcached: { short: 'Mc', full: 'Memcached' },
+    elasticsearch: { short: 'Es', full: 'Elasticsearch' },
+    opensearch: { short: 'Os', full: 'OpenSearch' },
+    s3: { short: 'S3', full: 'Amazon S3' },
+    'amazon s3': { short: 'S3', full: 'Amazon S3' },
+    dynamodb: { short: 'Dy', full: 'DynamoDB' },
+    kafka: { short: 'Kf', full: 'Kafka' },
+    rabbitmq: { short: 'Rq', full: 'RabbitMQ' },
+    sqs: { short: 'Sq', full: 'Amazon SQS' },
+    'amazon sqs': { short: 'Sq', full: 'Amazon SQS' },
+    sqlite: { short: 'Sl', full: 'SQLite' },
+  };
+
+  let entry = $derived.by(() => {
+    if (technology) {
+      const match = techLabels[technology.toLowerCase()];
+      if (match) return match;
+    }
+    return typeLabels[type];
+  });
+
+  let tooltip = $derived(
+    technology && entry.full !== technology
+      ? `${entry.full} (${typeLabels[type].full})`
+      : entry.full
+  );
+</script>
+
+<span class="group relative inline-flex" title={tooltip}>
+  <Shield label={entry.short} {size} />
+  <span
+    role="tooltip"
+    class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-gray-900 px-2 py-1 text-xs font-medium text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 dark:bg-gray-100 dark:text-gray-900"
+  >
+    {tooltip}
+  </span>
+</span>

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

@@ -0,0 +1,9 @@
+import type { DataStoreType } from '@cwygoda/service-catalog-core/domain';
+interface Props {
+    type: DataStoreType;
+    technology?: string | undefined;
+    size?: number;
+}
+declare const DataStoreShield: import("svelte").Component<Props, {}, "">;
+type DataStoreShield = ReturnType<typeof DataStoreShield>;
+export default DataStoreShield;

package/dist/components/DomainCard.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Domain } from '@cwygoda/service-catalog-core/domain';
+  import Shield from './Shield.svelte';
+
+  interface Props {
+    domain: Domain;
+    useCaseCount: number;
+    serviceCount: number;
+  }
+
+  let { domain, useCaseCount, serviceCount }: Props = $props();
+</script>
+
+<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 active:shadow-sm dark:border-gray-700 dark:bg-gray-800"
+>
+  <div class="mb-3 flex items-start gap-4">
+    <Shield label={domain.name} size={44} />
+    <div class="min-w-0 flex-1">
+      <h3 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
+        {domain.name}
+      </h3>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        {domain.description}
+      </p>
+    </div>
+  </div>
+  <div class="flex gap-4 text-xs text-gray-500 dark:text-gray-400">
+    <span>{useCaseCount} use case{useCaseCount !== 1 ? 's' : ''}</span>
+    <span>{serviceCount} service{serviceCount !== 1 ? 's' : ''}</span>
+  </div>
+</a>

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

@@ -0,0 +1,9 @@
+import type { Domain } from '@cwygoda/service-catalog-core/domain';
+interface Props {
+    domain: Domain;
+    useCaseCount: number;
+    serviceCount: number;
+}
+declare const DomainCard: import("svelte").Component<Props, {}, "">;
+type DomainCard = ReturnType<typeof DomainCard>;
+export default DomainCard;

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

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

package/dist/components/DomainCard.test.js

@@ -0,0 +1,45 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import DomainCard from './DomainCard.svelte';
+describe('DomainCard', () => {
+    const baseDomain = {
+        id: 'commerce',
+        name: 'Commerce',
+        description: 'E-commerce domain',
+    };
+    it('renders domain name', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 2, serviceCount: 3 } });
+        expect(screen.getByText('Commerce')).toBeInTheDocument();
+    });
+    it('renders domain description', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 2, serviceCount: 3 } });
+        expect(screen.getByText('E-commerce domain')).toBeInTheDocument();
+    });
+    it('links to domain detail page', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 2, serviceCount: 3 } });
+        const link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', '/domains/commerce');
+    });
+    it('shows use case count', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 2, serviceCount: 3 } });
+        expect(screen.getByText('2 use cases')).toBeInTheDocument();
+    });
+    it('shows singular use case for count of 1', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 1, serviceCount: 3 } });
+        expect(screen.getByText('1 use case')).toBeInTheDocument();
+    });
+    it('shows service count', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 2, serviceCount: 3 } });
+        expect(screen.getByText('3 services')).toBeInTheDocument();
+    });
+    it('shows singular service for count of 1', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 2, serviceCount: 1 } });
+        expect(screen.getByText('1 service')).toBeInTheDocument();
+    });
+    it('shows zero counts correctly', () => {
+        render(DomainCard, { props: { domain: baseDomain, useCaseCount: 0, serviceCount: 0 } });
+        expect(screen.getByText('0 use cases')).toBeInTheDocument();
+        expect(screen.getByText('0 services')).toBeInTheDocument();
+    });
+});

package/dist/components/Header.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import ThemeToggle from './ThemeToggle.svelte';
+  import NavModeToggle from './NavModeToggle.svelte';
+  import { searchStore } from '../stores/search.svelte.js';
+
+  const navLinks = [
+    { href: '/', label: 'Home' },
+    { href: '/domains', label: 'Domains' },
+    { href: '/use-cases', label: 'Use Cases' },
+    { href: '/services', label: 'Services' },
+    { href: '/data-stores', label: 'Data Stores' },
+    { 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 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'}"
+            >
+              {link.label}
+            </a>
+          {/each}
+        </nav>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <!-- Search trigger -->
+        <button
+          onclick={() => {
+            searchStore.show();
+          }}
+          class="flex items-center gap-1.5 rounded-md border border-gray-300 px-2.5 py-1.5 text-sm text-gray-500 transition-colors hover:border-gray-400 hover:text-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:border-gray-600 dark:text-gray-400 dark:hover:border-gray-500 dark:hover:text-gray-300"
+          aria-label="Search catalog"
+        >
+          <svg
+            class="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
+          </svg>
+          <span class="hidden sm:inline">Search</span>
+          <kbd
+            class="hidden rounded border border-gray-300 px-1 py-0.5 text-xs sm:inline dark:border-gray-600"
+            >⌘K</kbd
+          >
+        </button>
+        <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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 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"
+              aria-hidden="true"
+            >
+              <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"
+              aria-hidden="true"
+            >
+              <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,43 @@
+<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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 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'}
+>
+  <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"
+      aria-hidden="true"
+    >
+      <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"
+      aria-hidden="true"
+    >
+      <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,245 @@
+<script lang="ts">
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+  import type { Domain, UseCase, Service, DataStore } from '@cwygoda/service-catalog-core/domain';
+
+  interface Props {
+    domains: Domain[];
+    useCases: UseCase[];
+    services: Service[];
+    dataStores?: DataStore[];
+  }
+
+  let { domains, useCases, services, dataStores = [] }: 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);
+    }
+  }
+
+  // Pre-computed lookup maps — O(1) per query instead of O(n) filter scans
+  const rootDomains = $derived(domains.filter((d) => !d.parent));
+
+  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 domainDataStoreMap = $derived.by(() => {
+    const map = new SvelteMap<string, DataStore[]>();
+    for (const ds of dataStores) {
+      if (!ds.domain) continue;
+      const arr = map.get(ds.domain);
+      if (arr) arr.push(ds);
+      else map.set(ds.domain, [ds]);
+    }
+    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 childDomainMap.get(parentId) ?? [];
+  }
+
+  function getDomainUseCases(domainId: string): UseCase[] {
+    return domainUseCaseMap.get(domainId) ?? [];
+  }
+
+  function getDomainServices(domainId: string): Service[] {
+    return domainServiceMap.get(domainId) ?? [];
+  }
+
+  function getDomainDataStores(domainId: string): DataStore[] {
+    return domainDataStoreMap.get(domainId) ?? [];
+  }
+
+  function getUseCaseServices(useCase: UseCase): Service[] {
+    return useCase.participants
+      .map((p) => serviceById.get(p.service))
+      .filter((s): s is Service => s !== undefined);
+  }
+</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 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-4 w-4 transition-transform {expandedDomains.has(domain.id)
+                ? 'rotate-90'
+                : ''}"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+            >
+              <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 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-4 w-4 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="min-w-11"></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-700 hover:bg-gray-100 dark:text-gray-300 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-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                  {service.name}
+                </a>
+              </li>
+            {/each}
+
+            <!-- Data Stores -->
+            {#each getDomainDataStores(domain.id) as ds (ds.id)}
+              <li>
+                <a
+                  href="/data-stores/{ds.id}"
+                  class="ml-5 block rounded px-2 py-1 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+                >
+                  {ds.name}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</nav>

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

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