@cwygoda/service-catalog-ui 0.17.1

package/dist/components/ServiceGraph.svelte

@@ -0,0 +1,437 @@
+<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 { Selection } from 'd3-selection';
+  import type { Simulation, SimulationNodeDatum } from 'd3-force';
+  import type { D3ZoomEvent } from 'd3-zoom';
+
+  interface Props {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    height?: number;
+    highlightedNodes?: string[] | undefined;
+  }
+
+  let { nodes, edges, height = 500, highlightedNodes }: Props = $props();
+
+  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: Simulation<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: 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
+  // Initialized to default; computed from height prop in onMount/resize
+  let responsiveHeight = $state(500);
+  let resizeObserver: ResizeObserver | null = null;
+
+  // 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);
+    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(width < 640 ? 400 : 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: responsiveHeight / 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 = select(container)
+      .append('svg')
+      .attr('width', '100%')
+      .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();
+
+    // 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 zoomBehavior = zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.25, 4])
+      .on('zoom', (event: D3ZoomEvent<SVGSVGElement, unknown>) => {
+        g.attr('transform', event.transform.toString());
+      });
+
+    svgEl.call(zoomBehavior);
+
+    // 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(
+      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(
+        '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) {
+        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 () {
+        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 =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+      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 (CSS class-based)
+  $effect(() => {
+    if (!nodeSelection || !linkSelection) return;
+
+    const highlighted = highlightedNodes;
+    const hasHighlight = highlighted && highlighted.length > 0;
+
+    if (hasHighlight) {
+      const highlightSet = new Set(highlighted);
+
+      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 {
+      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();
+  });
+</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(responsiveHeight)}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="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 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-600 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-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="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-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.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 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-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 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 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/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/ServiceTypeShield.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { ServiceType } from '@cwygoda/service-catalog-core/domain';
+  import Shield from './Shield.svelte';
+
+  interface Props {
+    type: ServiceType;
+    size?: number;
+  }
+
+  let { type, size = 40 }: Props = $props();
+
+  const labels: Record<ServiceType, { short: string; full: string }> = {
+    'web-service': { short: 'Ws', full: 'Web Service' },
+    'event-consumer': { short: 'Ec', full: 'Event Consumer' },
+    'event-producer': { short: 'Ep', full: 'Event Producer' },
+    'event-transformer': { short: 'Et', full: 'Event Transformer' },
+    'web-app': { short: 'Wa', full: 'Web App' },
+    library: { short: 'Li', full: 'Library' },
+  };
+
+  let entry = $derived(labels[type]);
+</script>
+
+<span class="group relative inline-flex" title={entry.full}>
+  <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"
+  >
+    {entry.full}
+  </span>
+</span>

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

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

package/dist/components/Shield.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  interface Props {
+    label: string;
+    size?: number;
+  }
+
+  let { label, size = 80 }: Props = $props();
+
+  // FNV-1a 32-bit hash with avalanche finalizer
+  function hash(str: string): number {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < str.length; i++) {
+      h ^= str.charCodeAt(i);
+      h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    // Murmur3-style finalizer — spreads clustered inputs
+    h ^= h >>> 16;
+    h = Math.imul(h, 0x85ebca6b) >>> 0;
+    h ^= h >>> 13;
+    h = Math.imul(h, 0xc2b2ae35) >>> 0;
+    h ^= h >>> 16;
+    return h >>> 0;
+  }
+
+  // Golden-ratio distribution: maps hash to [0, range) with maximal spacing
+  function golden(h: number, range: number): number {
+    return Math.round(((h / 0x100000000) * 0x9e3779b9) % 1 * range);
+  }
+
+  const n = (v: number): string => String(v);
+
+  let display = $derived(label.slice(0, 2).toUpperCase());
+
+  let palette = $derived.by(() => {
+    const h = hash(label);
+    const h2 = hash(label + 'salt2');
+    const h3 = hash(label + 'salt3');
+
+    const hue1 = golden(h, 360);
+    const hue2 = (hue1 + 30 + golden(h2, 60)) % 360;
+    const sat1 = 65 + golden(h2, 30);
+    const sat2 = 70 + golden(h3, 25);
+    const lit1 = 38 + golden(h3, 18);
+    const lit2 = 28 + golden(h2, 14);
+    const angle = golden(h, 160) + 120;
+
+    const c1 = `hsl(${n(hue1)}, ${n(sat1)}%, ${n(lit1)}%)`;
+    const c2 = `hsl(${n(hue2)}, ${n(sat2)}%, ${n(lit2)}%)`;
+    const outline = `hsl(${n(hue1)}, ${n(sat1)}%, ${n(Math.min(lit1 + 28, 72))}%)`;
+
+    return { c1, c2, angle, outline };
+  });
+
+  let r = $derived(size * 0.22);
+  let fontSize = $derived(size * 0.36);
+  let border = $derived(size * 0.045);
+
+  let wrapStyle = $derived(
+    `width:${n(size)}px;height:${n(size)}px;border-radius:${n(r)}px;` +
+      `background:linear-gradient(${n(palette.angle)}deg,${palette.c1},${palette.c2});` +
+      `box-shadow:0 0 0 ${n(border)}px ${palette.outline}33,0 ${n(size * 0.06)}px ${n(size * 0.18)}px ${palette.c2}66;` +
+      `font-size:${n(fontSize)}px`
+  );
+
+  let sheenStyle = $derived(`border-radius:${n(r)}px ${n(r)}px 60% 60%`);
+
+  let innerStyle = $derived(
+    `inset:${n(border * 0.7)}px;border-radius:${n(r * 0.75)}px;` +
+      `border:${n(border * 0.6)}px solid rgba(255,255,255,0.13)`
+  );
+</script>
+
+<div class="shield" style={wrapStyle} aria-hidden="true">
+  <div class="sheen" style={sheenStyle}></div>
+  <div class="inner" style={innerStyle}></div>
+  <span class="label">{display}</span>
+</div>
+
+<style>
+  .shield {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .sheen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 52%;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.18) 0%,
+      rgba(255, 255, 255, 0.04) 100%
+    );
+    pointer-events: none;
+  }
+
+  .inner {
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .label {
+    font-family: 'Inter', 'Helvetica Neue', sans-serif;
+    font-weight: 800;
+    color: rgba(255, 255, 255, 0.95);
+    letter-spacing: -0.02em;
+    line-height: 1;
+    user-select: none;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+    position: relative;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    label: string;
+    size?: number;
+}
+declare const Shield: import("svelte").Component<Props, {}, "">;
+type Shield = ReturnType<typeof Shield>;
+export default Shield;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,44 @@
+<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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 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"
+      aria-hidden="true"
+    >
+      <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"
+      aria-hidden="true"
+    >
+      <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 {};