@stephen-netu/design-system 0.1.0

package/src/u0-primitives/toggle/Toggle.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    onchange?: (checked: boolean) => void;
+    label?: Snippet;
+  }
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    class: className = '',
+    onchange,
+    label
+  }: Props = $props();
+
+  function toggle() {
+    if (!disabled) {
+      checked = !checked;
+      onchange?.(checked);
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<label class="ds-toggle-wrapper size-{size} {className}" class:is-disabled={disabled}>
+  <div 
+    class="ds-toggle-track"
+    class:is-checked={checked}
+    role="switch"
+    aria-checked={checked}
+    tabindex={disabled ? -1 : 0}
+    onkeydown={handleKeydown}
+    onclick={(e) => { e.preventDefault(); toggle(); }}
+  >
+    <div class="ds-toggle-thumb"></div>
+  </div>
+
+  {#if label}
+    <span class="ds-toggle-label">
+      {@render label()}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .ds-toggle-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .ds-toggle-wrapper.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .ds-toggle-track {
+    position: relative;
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
+    transition: all var(--transition-normal);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  /* Track Focus */
+  .ds-toggle-track:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .ds-toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background: var(--color-text-secondary);
+    border-radius: var(--radius-full);
+    transition: all var(--transition-bounce);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  }
+
+  /* Checked State */
+  .ds-toggle-track.is-checked {
+    background: var(--color-accent);
+    border-color: var(--color-accent-hover);
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 8px var(--color-accent-subtle);
+  }
+
+  .ds-toggle-track.is-checked .ds-toggle-thumb {
+    background: #fff;
+  }
+
+  /* Label */
+  .ds-toggle-label {
+    font-family: var(--font-sans);
+    color: var(--color-text-primary);
+  }
+
+  /* --- Sizes --- */
+  
+  .size-sm .ds-toggle-track {
+    width: 2rem;
+    height: 1.125rem;
+  }
+  .size-sm .ds-toggle-thumb {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .size-sm .ds-toggle-track.is-checked .ds-toggle-thumb {
+    transform: translateX(0.875rem);
+  }
+  .size-sm .ds-toggle-label {
+    font-size: var(--text-xs);
+  }
+
+  .size-md .ds-toggle-track {
+    width: 2.75rem;
+    height: 1.5rem;
+  }
+  .size-md .ds-toggle-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .size-md .ds-toggle-track.is-checked .ds-toggle-thumb {
+    transform: translateX(1.25rem);
+  }
+  .size-md .ds-toggle-label {
+    font-size: var(--text-sm);
+  }
+
+  .size-lg .ds-toggle-track {
+    width: 3.5rem;
+    height: 2rem;
+  }
+  .size-lg .ds-toggle-thumb {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .size-lg .ds-toggle-track.is-checked .ds-toggle-thumb {
+    transform: translateX(1.5rem);
+  }
+  .size-lg .ds-toggle-label {
+    font-size: var(--text-base);
+  }
+</style>

package/src/u0-primitives/tooltip/Tooltip.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onDestroy } from 'svelte';
+
+  interface Props {
+    content: string | Snippet;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    delayMs?: number;
+    class?: string;
+    trigger: Snippet;
+  }
+
+  let {
+    content,
+    position = 'top',
+    delayMs = 300,
+    class: className = '',
+    trigger
+  }: Props = $props();
+
+  let isHovered = $state(false);
+  let isFocused = $state(false);
+  let isVisible = $state(false);
+  let timeoutId: number | undefined;
+  const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+
+  let showTooltip = $derived(isHovered || isFocused);
+
+  // Handle delay
+  $effect(() => {
+    if (showTooltip) {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = window.setTimeout(() => {
+        isVisible = true;
+      }, delayMs);
+    } else {
+      if (timeoutId) clearTimeout(timeoutId);
+      isVisible = false;
+    }
+  });
+
+  onDestroy(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+
+  function handleMouseEnter() { isHovered = true; }
+  function handleMouseLeave() { isHovered = false; }
+  function handleFocus() { isFocused = true; }
+  function handleBlur() { isFocused = false; }
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isVisible) {
+      isHovered = false;
+      isFocused = false;
+      e.stopPropagation();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="ds-tooltip-wrapper {className}"
+  aria-describedby={isVisible ? tooltipId : undefined}
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onfocusin={handleFocus}
+  onfocusout={handleBlur}
+  onkeydown={handleKeydown}
+>
+  {@render trigger()}
+
+  {#if isVisible}
+    <div
+      id={tooltipId}
+      class="ds-tooltip-content pos-{position}"
+      role="tooltip"
+    >
+      <div class="ds-tooltip-arrow pos-{position}"></div>
+      <div class="ds-tooltip-inner">
+        {#if typeof content === 'string'}
+          {content}
+        {:else}
+          {@render content()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .ds-tooltip-content {
+    position: absolute;
+    z-index: 9999;
+    width: max-content;
+    max-width: 250px;
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.5);
+    border-radius: var(--radius-md);
+    animation: ds-fade-in var(--transition-fast) ease-out;
+    pointer-events: none; /* Don't interfere with mouse */
+  }
+
+  .ds-tooltip-inner {
+    padding: var(--space-2) var(--space-3);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  /* Arrow Base */
+  .ds-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  /* Position: Top */
+  .pos-top {
+    bottom: calc(100% + var(--space-2));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .ds-tooltip-arrow.pos-top {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px 5px 0 5px;
+    border-top-color: var(--border-default);
+  }
+
+  .ds-tooltip-arrow.pos-top::after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: -4px;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: transparent;
+    border-top-color: var(--color-bg-panel-elevated);
+  }
+
+  /* Position: Bottom */
+  .pos-bottom {
+    top: calc(100% + var(--space-2));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .ds-tooltip-arrow.pos-bottom {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 5px 5px 5px;
+    border-bottom-color: var(--border-default);
+  }
+
+  .ds-tooltip-arrow.pos-bottom::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: -4px;
+    border-style: solid;
+    border-width: 0 4px 4px 4px;
+    border-color: transparent;
+    border-bottom-color: var(--color-bg-panel-elevated);
+  }
+
+  /* Position: Right */
+  .pos-right {
+    top: 50%;
+    left: calc(100% + var(--space-2));
+    transform: translateY(-50%);
+  }
+
+  .ds-tooltip-arrow.pos-right {
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 5px 5px 5px 0;
+    border-right-color: var(--border-default);
+  }
+
+  .ds-tooltip-arrow.pos-right::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: -4px;
+    border-style: solid;
+    border-width: 4px 4px 4px 0;
+    border-color: transparent;
+    border-right-color: var(--color-bg-panel-elevated);
+  }
+
+  /* Position: Left */
+  .pos-left {
+    top: 50%;
+    right: calc(100% + var(--space-2));
+    transform: translateY(-50%);
+  }
+
+  .ds-tooltip-arrow.pos-left {
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 5px 0 5px 5px;
+    border-left-color: var(--border-default);
+  }
+
+  .ds-tooltip-arrow.pos-left::after {
+    content: '';
+    position: absolute;
+    left: -5px;
+    top: -4px;
+    border-style: solid;
+    border-width: 4px 0 4px 4px;
+    border-color: transparent;
+    border-left-color: var(--color-bg-panel-elevated);
+  }
+
+  @keyframes ds-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+</style>

package/src/v0-diagrams/DiagramPanel.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Tabs, type Tab } from '@kos/design-system/u0-primitives';
+  import MermaidDiagram from './MermaidDiagram.svelte';
+  import MarkmapDiagram from './MarkmapDiagram.svelte';
+  import type { DiagramPanelItem, RenderOptions } from './types';
+
+  let { items, layout = 'tabs', options = {} }: {
+    items: DiagramPanelItem[];
+    layout?: 'tabs' | 'grid';
+    options?: RenderOptions;
+  } = $props();
+
+  function renderDiagram(item: DiagramPanelItem) {
+    if (item.spec.type === 'mermaid') {
+      return MermaidDiagram;
+    } else if (item.spec.type === 'markmap') {
+      return MarkmapDiagram;
+    }
+    return null;
+  }
+
+  let tabs: Tab[] = $derived(items.map(i => ({
+    id: i.id,
+    label: i.spec.title ?? i.id
+  })));
+
+  let activeTabId = $state('');
+  let activeItem = $derived(items.find(i => i.id === activeTabId) ?? null);
+  let ActiveComponent = $derived(activeItem ? renderDiagram(activeItem) : null);
+</script>
+
+{#if layout === 'tabs'}
+  <div class="v0-diagram-tabs">
+    <Tabs {tabs} bind:activeId={activeTabId} />
+    <div class="v0-diagram-panel">
+      {#if ActiveComponent && activeItem}
+        <ActiveComponent spec={activeItem.spec} options={activeItem.options ?? options} />
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div class="v0-diagram-grid">
+    {#each items as item (item.id)}
+      {@const Component = renderDiagram(item)}
+      {#if Component}
+        <Component spec={item.spec} options={item.options ?? options} />
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .v0-diagram-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .v0-diagram-panel {
+    min-height: 200px;
+  }
+
+  .v0-diagram-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: var(--space-4);
+  }
+</style>

package/src/v0-diagrams/MarkmapDiagram.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { Transformer } from 'markmap-lib';
+  import { Markmap } from 'markmap-view';
+  import type { DiagramSpec, RenderOptions } from './types';
+
+  let { spec, options = {} }: {
+    spec: DiagramSpec;
+    options?: RenderOptions;
+  } = $props();
+
+  let svgEl: SVGSVGElement;
+  let markmapInstance: Markmap | null = null;
+
+  $effect(() => {
+    if (!svgEl) return;
+
+    const transformer = new Transformer();
+    const { root } = transformer.transform(spec.source);
+
+    if (markmapInstance) {
+      markmapInstance.destroy();
+    }
+
+    markmapInstance = Markmap.create(svgEl, {}, root);
+  });
+</script>
+
+<div class="v0-diagram v0-diagram--markmap">
+  {#if spec.title}
+    <h4 class="v0-diagram-title">{spec.title}</h4>
+  {/if}
+  <svg bind:this={svgEl}
+    width={options.width ?? 600}
+    height={options.height ?? 400}
+  />
+</div>
+
+<style>
+  .v0-diagram {
+    background: var(--v0-diagram-bg);
+    border: 1px solid var(--v0-diagram-border);
+    border-radius: var(--radius-lg);
+    padding: var(--v0-diagram-padding);
+    overflow: auto;
+  }
+  .v0-diagram-title {
+    color: var(--v0-diagram-title-color);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-3);
+  }
+  :global(.v0-diagram--markmap svg) {
+    max-width: 100%;
+    height: auto;
+  }
+</style>

package/src/v0-diagrams/MermaidDiagram.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import mermaid from 'mermaid';
+  import type { DiagramSpec, RenderOptions } from './types';
+
+  mermaid.initialize({
+    securityLevel: 'strict',
+    startOnLoad: false,
+  });
+
+  let { spec, options = {} }: {
+    spec: DiagramSpec;
+    options?: RenderOptions;
+  } = $props();
+
+  let svgContent = $state('');
+
+  $effect(() => {
+    renderDiagram(spec, options);
+  });
+
+  async function renderDiagram(s: DiagramSpec, opts: RenderOptions) {
+    const id = `mermaid-${crypto.randomUUID()}`;
+    const { svg } = await mermaid.render(id, s.source);
+    svgContent = svg;
+  }
+</script>
+
+<div class="v0-diagram v0-diagram--mermaid">
+  {#if spec.title}
+    <h4 class="v0-diagram-title">{spec.title}</h4>
+  {/if}
+  {@html svgContent}
+</div>
+
+<style>
+  .v0-diagram {
+    background: var(--v0-diagram-bg);
+    border: 1px solid var(--v0-diagram-border);
+    border-radius: var(--radius-lg);
+    padding: var(--v0-diagram-padding);
+    overflow: auto;
+  }
+  .v0-diagram-title {
+    color: var(--v0-diagram-title-color);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-3);
+  }
+  :global(.v0-diagram--mermaid svg) {
+    max-width: 100%;
+    height: auto;
+  }
+</style>

package/src/v0-diagrams/index.ts

@@ -0,0 +1,4 @@
+export type { DiagramSpec, DiagramType, DiagramProvenance, RenderOptions, DiagramPanelItem } from './types';
+export { default as MarkmapDiagram } from './MarkmapDiagram.svelte';
+export { default as MermaidDiagram } from './MermaidDiagram.svelte';
+export { default as DiagramPanel } from './DiagramPanel.svelte';

package/src/v0-diagrams/types.ts

@@ -0,0 +1,28 @@
+export type DiagramType = 'mermaid' | 'markmap';
+
+export interface DiagramSpec {
+  type: DiagramType;
+  source: string;
+  title?: string;
+  provenance?: DiagramProvenance;
+}
+
+export interface DiagramProvenance {
+  sourceFile: string;
+  sourceHash: string;
+  generationSeq: number;
+  sacsRefreshSeq: number;
+}
+
+export interface RenderOptions {
+  theme?: 'dark' | 'light';
+  width?: number;
+  height?: number;
+  padding?: number;
+}
+
+export interface DiagramPanelItem {
+  id: string;
+  spec: DiagramSpec;
+  options?: RenderOptions;
+}

package/src/v0-diagrams/v0-tokens.css

@@ -0,0 +1,6 @@
+:root {
+  --v0-diagram-bg: var(--color-bg-panel);
+  --v0-diagram-border: var(--border-subtle);
+  --v0-diagram-title-color: var(--color-text-secondary);
+  --v0-diagram-padding: var(--space-4);
+}

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+// Allow dynamic CSS imports (used by SovereignMap for Leaflet styles).
+declare module '*.css' {
+  const content: Record<string, string>;
+  export default content;
+}