@cwygoda/service-catalog-ui 0.17.1

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,61 @@
+<script lang="ts">
+  import type { UseCase } from '@cwygoda/service-catalog-core/domain';
+  import Shield from './Shield.svelte';
+
+  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}"
+  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 active:shadow-sm dark:border-gray-700 dark:bg-gray-800"
+>
+  <div class="mb-3 flex items-start gap-4">
+    <Shield label={useCase.name} size={44} />
+    <div class="min-w-0 flex-1">
+      <h3 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
+        {useCase.name}
+      </h3>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        {truncate(useCase.description, 120)}
+      </p>
+    </div>
+  </div>
+
+  <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
+          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>
+    {#if useCase.bpmn}
+      <span
+        class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-900 dark:text-primary-200"
+      >
+        BPMN
+      </span>
+    {/if}
+  </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,15 @@
+export { default as BpmnDiagram } from './BpmnDiagram.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as DataStoreCard } from './DataStoreCard.svelte';
+export { default as DataStoreShield } from './DataStoreShield.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 SearchModal } from './SearchModal.svelte';
+export { default as ServiceCard } from './ServiceCard.svelte';
+export { default as ServiceTypeShield } from './ServiceTypeShield.svelte';
+export { default as Shield } from './Shield.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,15 @@
+export { default as BpmnDiagram } from './BpmnDiagram.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as DataStoreCard } from './DataStoreCard.svelte';
+export { default as DataStoreShield } from './DataStoreShield.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 SearchModal } from './SearchModal.svelte';
+export { default as ServiceCard } from './ServiceCard.svelte';
+export { default as ServiceTypeShield } from './ServiceTypeShield.svelte';
+export { default as Shield } from './Shield.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 {};

package/dist/source.css

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

package/dist/stores/index.d.ts

@@ -0,0 +1,4 @@
+export { theme } from './theme.svelte.js';
+export type { Theme } from './theme.svelte.js';
+export { navModeStore } from './nav-mode.svelte.js';
+export { searchStore } from './search.svelte.js';

package/dist/stores/index.js

@@ -0,0 +1,3 @@
+export { theme } from './theme.svelte.js';
+export { navModeStore } from './nav-mode.svelte.js';
+export { searchStore } from './search.svelte.js';

package/dist/stores/nav-mode.svelte.d.ts

@@ -0,0 +1,7 @@
+type NavMode = 'flat' | 'tree';
+export declare const navModeStore: {
+    readonly mode: NavMode;
+    toggle(): void;
+    setMode(newMode: NavMode): void;
+};
+export {};

package/dist/stores/nav-mode.svelte.js

@@ -0,0 +1,32 @@
+import { browser } from '$app/environment';
+const STORAGE_KEY = 'nav-mode';
+function getInitialMode() {
+    if (browser) {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'tree' || stored === 'flat') {
+            return stored;
+        }
+    }
+    return 'flat';
+}
+function createNavModeStore() {
+    let mode = $state(getInitialMode());
+    return {
+        get mode() {
+            return mode;
+        },
+        toggle() {
+            mode = mode === 'flat' ? 'tree' : 'flat';
+            if (browser) {
+                localStorage.setItem(STORAGE_KEY, mode);
+            }
+        },
+        setMode(newMode) {
+            mode = newMode;
+            if (browser) {
+                localStorage.setItem(STORAGE_KEY, mode);
+            }
+        },
+    };
+}
+export const navModeStore = createNavModeStore();

package/dist/stores/search.svelte.d.ts

@@ -0,0 +1,9 @@
+/** Reactive store for search modal open state */
+declare class SearchStore {
+    open: boolean;
+    toggle(): void;
+    show(): void;
+    hide(): void;
+}
+export declare const searchStore: SearchStore;
+export {};

package/dist/stores/search.svelte.js

@@ -0,0 +1,14 @@
+/** Reactive store for search modal open state */
+class SearchStore {
+    open = $state(false);
+    toggle() {
+        this.open = !this.open;
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+}
+export const searchStore = new SearchStore();

package/dist/stores/theme.svelte.d.ts

@@ -0,0 +1,8 @@
+export type Theme = 'light' | 'dark' | 'system';
+export declare const theme: {
+    readonly current: Theme;
+    readonly resolved: "light" | "dark";
+    init(): void;
+    set(newTheme: Theme): void;
+    toggle(): void;
+};

package/dist/stores/theme.svelte.js

@@ -0,0 +1,61 @@
+const STORAGE_KEY = 'theme';
+function getStoredTheme() {
+    if (typeof localStorage === 'undefined')
+        return 'system';
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+        return stored;
+    }
+    return 'system';
+}
+function getSystemTheme() {
+    if (typeof window === 'undefined')
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+function applyTheme(theme) {
+    if (typeof document === 'undefined')
+        return;
+    const resolved = theme === 'system' ? getSystemTheme() : theme;
+    const root = document.documentElement;
+    if (resolved === 'dark') {
+        root.classList.add('dark');
+    }
+    else {
+        root.classList.remove('dark');
+    }
+}
+// Simple reactive state using $state rune at module level
+let currentTheme = $state('system');
+export const theme = {
+    get current() {
+        return currentTheme;
+    },
+    get resolved() {
+        return currentTheme === 'system' ? getSystemTheme() : currentTheme;
+    },
+    init() {
+        if (typeof window === 'undefined')
+            return;
+        // Load stored theme
+        currentTheme = getStoredTheme();
+        // Listen for system theme changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', () => {
+            if (currentTheme === 'system') {
+                applyTheme('system');
+            }
+        });
+    },
+    set(newTheme) {
+        currentTheme = newTheme;
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, newTheme);
+        }
+        applyTheme(newTheme);
+    },
+    toggle() {
+        const next = this.resolved === 'dark' ? 'light' : 'dark';
+        this.set(next);
+    },
+};

package/dist/utils/fetch-catalog.d.ts

@@ -0,0 +1,6 @@
+import type { Catalog } from '@cwygoda/service-catalog-core/domain';
+/**
+ * Fetches and validates catalog.json with proper error handling.
+ * Use in SvelteKit load functions.
+ */
+export declare function fetchCatalog(fetch: typeof globalThis.fetch, path?: string): Promise<Catalog>;

package/dist/utils/fetch-catalog.js

@@ -0,0 +1,26 @@
+import { error } from '@sveltejs/kit';
+import { Value } from '@sinclair/typebox/value';
+import { CatalogSchema } from '@cwygoda/service-catalog-core/schemas';
+/**
+ * Fetches and validates catalog.json with proper error handling.
+ * Use in SvelteKit load functions.
+ */
+export async function fetchCatalog(fetch, path = '/catalog.json') {
+    const response = await fetch(path);
+    if (!response.ok) {
+        error(response.status, `Failed to load catalog: ${response.statusText}`);
+    }
+    let data;
+    try {
+        data = await response.json();
+    }
+    catch {
+        error(500, 'Invalid JSON in catalog');
+    }
+    if (!Value.Check(CatalogSchema, data)) {
+        const errors = [...Value.Errors(CatalogSchema, data)];
+        const message = errors.map((e) => `${e.path}: ${e.message}`).join('; ');
+        error(500, `Invalid catalog data: ${message}`);
+    }
+    return data;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { fetchCatalog } from './fetch-catalog.js';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { fetchCatalog } from './fetch-catalog.js';

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@cwygoda/service-catalog-ui",
+  "version": "0.17.1",
+  "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"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@sinclair/typebox": "^0.34.48",
+    "@cwygoda/service-catalog-core": "0.17.1"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.0.0",
+    "bpmn-js": "^18.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": {
+    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/d3-drag": "^3.0.7",
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-zoom": "^3.0.8",
+    "jsdom": "^28.1.0",
+    "svelte": "^5.53.6",
+    "svelte-check": "^4.4.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "svelte-kit sync && svelte-check"
+  }
+}