@stephen-netu/design-system 0.1.0

package/src/u0-primitives/modal/Modal.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">
+  /**
+   * Modal Component
+   *
+   * A reusable modal dialog that uses CSS visibility toggling instead of
+   * conditional rendering to avoid blank modal issues in Tauri.
+   *
+   * Usage:
+   * <Modal bind:isOpen title="My Modal" onClose={handleClose}>
+   *   <p>Modal content here</p>
+   * </Modal>
+   */
+
+  import { tick } from 'svelte';
+
+  interface Props {
+    /** Controls modal visibility */
+    isOpen?: boolean;
+    /** Modal title (optional) */
+    title?: string;
+    /** Called when modal is closed */
+    onClose?: () => void;
+    /** Additional CSS class for the modal container */
+    class?: string;
+    /** Whether to show the close button (default: true) */
+    showCloseButton?: boolean;
+    /** Whether to close on overlay click (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether to close on Escape key (default: true) */
+    closeOnEscape?: boolean;
+    /** Z-index for the modal (default: 9980) */
+    zIndex?: number;
+    /** Modal content */
+    children?: import('svelte').Snippet;
+    /** Additional actions for the header (optional) */
+    headerActions?: import('svelte').Snippet;
+    /** Footer content (optional) */
+    footer?: import('svelte').Snippet;
+  }
+
+  let {
+    isOpen = $bindable(false),
+    title = '',
+    onClose = () => {},
+    class: className = '',
+    showCloseButton = true,
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    zIndex = 9980,
+    children,
+    headerActions,
+    footer
+  }: Props = $props();
+
+  let modalElement = $state<HTMLDivElement | undefined>(undefined);
+  let previouslyFocusedElement: Element | null = null;
+  let isVisible = $state(false);
+  const modalId = `modal-${Math.random().toString(36).slice(2, 9)}`;
+
+  // Handle isOpen changes with animation delay
+  $effect(() => {
+    if (isOpen) {
+      // Store previously focused element
+      previouslyFocusedElement = document.activeElement;
+      // Show modal (triggers CSS transition)
+      isVisible = true;
+      // Focus management after render
+      tick().then(() => {
+        modalElement?.focus();
+        trapFocus();
+      });
+    } else {
+      // Hide modal (triggers CSS transition)
+      isVisible = false;
+      // Restore focus after transition
+      setTimeout(() => {
+        if (previouslyFocusedElement instanceof HTMLElement) {
+          previouslyFocusedElement.focus();
+        }
+      }, 150);
+    }
+  });
+
+  function handleClose() {
+    isOpen = false;
+    onClose();
+  }
+
+  function handleOverlayClick(e: MouseEvent) {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      handleClose();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!isOpen) return;
+
+    // Close on Escape
+    if (closeOnEscape && e.key === 'Escape') {
+      e.preventDefault();
+      handleClose();
+      return;
+    }
+
+    // Trap focus with Tab key
+    if (e.key === 'Tab' && modalElement) {
+      const focusableElements = modalElement.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0] as HTMLElement;
+      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  }
+
+  function trapFocus() {
+    // Initial focus on close button if available
+    const closeButton = modalElement?.querySelector('.modal-close-btn') as HTMLElement;
+    closeButton?.focus();
+  }
+
+  // Expose methods for programmatic control
+  export function open() {
+    isOpen = true;
+  }
+
+  export function close() {
+    isOpen = false;
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- Always mounted, visibility toggled via CSS -->
+<div
+  class="modal-container"
+  class:open={isOpen}
+  class:visible={isVisible}
+  style="z-index: {zIndex}"
+  role="presentation"
+  inert={!isOpen}
+>
+  <!-- Overlay -->
+  <div
+    class="modal-overlay"
+    onclick={handleOverlayClick}
+    role="presentation"
+  ></div>
+
+  <!-- Modal Dialog -->
+  <div
+    bind:this={modalElement}
+    class="modal-dialog {className}"
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? `${modalId}-title` : undefined}
+  >
+    {#if title || showCloseButton || headerActions}
+      <header class="modal-header">
+        {#if title}
+          <h2 id="{modalId}-title" class="modal-title">{title}</h2>
+        {:else}
+          <div></div>
+        {/if}
+
+        <div class="modal-header-actions">
+          {#if headerActions}
+            {@render headerActions()}
+          {/if}
+          {#if showCloseButton}
+            <button
+              class="modal-close-btn"
+              onclick={handleClose}
+              aria-label="Close"
+              type="button"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          {/if}
+        </div>
+      </header>
+    {/if}
+
+    <div class="modal-content">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    {#if footer}
+      <footer class="modal-footer">
+        {@render footer()}
+      </footer>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .modal-container {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease-out;
+  }
+
+  .modal-container.open {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
+  .modal-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.15s ease-out;
+  }
+
+  .modal-container.open .modal-overlay {
+    opacity: 1;
+  }
+
+  .modal-dialog {
+    position: relative;
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xl);
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    outline: none;
+    box-shadow: var(--shadow-xl);
+    transform: translateY(20px) scale(0.98);
+    transition: transform var(--transition-normal), opacity var(--transition-normal);
+    opacity: 0;
+  }
+
+  .modal-container.open .modal-dialog {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+
+  .modal-dialog:focus {
+    box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-xl);
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-5) var(--space-6);
+    border-bottom: 1px solid var(--border-default);
+    flex-shrink: 0;
+  }
+
+  .modal-title {
+    margin: 0;
+    font-size: var(--text-lg);
+    color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    font-weight: 600;
+    font-family: var(--font-sans);
+  }
+
+  .modal-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .modal-close-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    padding: var(--space-1);
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+  }
+
+  .modal-close-btn:hover {
+    color: var(--color-text-primary);
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .modal-close-btn:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .modal-content {
+    overflow-y: auto;
+    padding: var(--space-6);
+    flex: 1;
+    min-height: 0;
+  }
+
+  .modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-6);
+    border-top: 1px solid var(--border-default);
+    flex-shrink: 0;
+  }
+
+  /* Size variants via data attribute — :global() required since the value is set dynamically */
+  :global(.modal-dialog[data-size="small"]) { max-width: 400px; }
+  :global(.modal-dialog[data-size="large"]) { max-width: 800px; }
+  :global(.modal-dialog[data-size="full"]) { max-width: 95vw; max-height: 95vh; }
+</style>

package/src/u0-primitives/modal/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/src/u0-primitives/spinner/Spinner.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'accent' | 'muted' | 'white';
+    class?: string;
+  }
+
+  let {
+    size = 'md',
+    color = 'accent',
+    class: className = ''
+  }: Props = $props();
+</script>
+
+<div class="ds-spinner-wrapper size-{size} color-{color} {className}" role="status" aria-label="Loading">
+  <div class="ds-spinner-ring"></div>
+  <div class="ds-spinner-core"></div>
+  <!-- Floating magical dust particles -->
+  <div class="ds-spinner-particle p1"></div>
+  <div class="ds-spinner-particle p2"></div>
+  <div class="ds-spinner-particle p3"></div>
+</div>
+
+<style>
+  .ds-spinner-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Base Ring */
+  .ds-spinner-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-full);
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    opacity: 0.8;
+    animation: ds-spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+  }
+
+  /* Inner Core */
+  .ds-spinner-core {
+    position: absolute;
+    inset: 20%;
+    border-radius: var(--radius-full);
+    background: currentColor;
+    opacity: 0.3;
+    filter: blur(4px);
+    animation: ds-pulse-core 2s ease-in-out infinite alternate;
+  }
+
+  /* Magical Dust Particles */
+  .ds-spinner-particle {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    border-radius: var(--radius-full);
+    background: currentColor;
+    opacity: 0;
+  }
+
+  .p1 { animation: ds-particle-drift-1 2s ease-out infinite; top: 10%; left: 10%; }
+  .p2 { animation: ds-particle-drift-2 2.5s ease-out infinite 0.5s; bottom: 10%; right: 10%; }
+  .p3 { animation: ds-particle-drift-3 1.8s ease-out infinite 1s; top: 10%; right: 20%; }
+
+  @keyframes ds-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes ds-pulse-core {
+    0% { transform: scale(0.8); opacity: 0.2; }
+    100% { transform: scale(1.2); opacity: 0.5; }
+  }
+
+  @keyframes ds-particle-drift-1 {
+    0% { transform: translate(0, 0) scale(0); opacity: 0; }
+    50% { transform: translate(-10px, -15px) scale(1); opacity: 0.8; }
+    100% { transform: translate(-20px, -30px) scale(0); opacity: 0; }
+  }
+
+  @keyframes ds-particle-drift-2 {
+    0% { transform: translate(0, 0) scale(0); opacity: 0; }
+    50% { transform: translate(15px, 10px) scale(1.2); opacity: 0.6; }
+    100% { transform: translate(30px, 20px) scale(0); opacity: 0; }
+  }
+
+  @keyframes ds-particle-drift-3 {
+    0% { transform: translate(0, 0) scale(0); opacity: 0; }
+    50% { transform: translate(10px, -20px) scale(0.8); opacity: 0.9; }
+    100% { transform: translate(20px, -40px) scale(0); opacity: 0; }
+  }
+
+  /* --- Sizes --- */
+  .size-sm { width: 1.25rem; height: 1.25rem; }
+  .size-md { width: 2rem; height: 2rem; }
+  .size-lg { width: 3rem; height: 3rem; }
+  .size-lg .ds-spinner-ring { border-width: 3px; }
+  .size-xl { width: 4.5rem; height: 4.5rem; }
+  .size-xl .ds-spinner-ring { border-width: 4px; }
+
+  /* --- Colors --- */
+  .color-accent { 
+    color: var(--color-accent); 
+    filter: drop-shadow(0 0 4px var(--color-accent-glow));
+  }
+  
+  .color-muted { 
+    color: var(--color-text-muted); 
+  }
+  
+  .color-white { 
+    color: #ffffff; 
+    filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .ds-spinner-ring {
+      animation: ds-spin 2s linear infinite;
+    }
+    .ds-spinner-core, .ds-spinner-particle {
+      display: none;
+    }
+  }
+</style>

package/src/u0-primitives/tabs/Tabs.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Tab } from './tabs-types';
+
+  // Re-export for backward compatibility
+  export type { Tab } from './tabs-types';
+
+  interface Props {
+    tabs: Tab[];
+    activeId?: string;
+    class?: string;
+    fullWidth?: boolean;
+    onchange?: (id: string) => void;
+  }
+
+  let {
+    tabs = [],
+    activeId = $bindable(''),
+    class: className = '',
+    fullWidth = false,
+    onchange
+  }: Props = $props();
+  // Handle uncontrolled init reactively
+  $effect(() => {
+    if (!activeId && tabs.length > 0) {
+      activeId = tabs[0].id;
+    }
+  });
+  let activeIndex = $derived(tabs.findIndex(t => t.id === activeId));
+  let isClient = $state(false); // Used to delay indicator rendering until mounted
+
+  $effect(() => {
+    isClient = true;
+  });
+
+  function selectTab(id: string) {
+    const tab = tabs.find(t => t.id === id);
+    if (!tab || tab.disabled) return;
+    
+    activeId = id;
+    onchange?.(id);
+  }
+
+  function handleKeydown(e: KeyboardEvent, index: number) {
+    let nextIndex = index;
+
+    if (e.key === 'ArrowRight') {
+      nextIndex = (index + 1) % tabs.length;
+      while (tabs[nextIndex].disabled && nextIndex !== index) {
+        nextIndex = (nextIndex + 1) % tabs.length;
+      }
+    } else if (e.key === 'ArrowLeft') {
+      nextIndex = (index - 1 + tabs.length) % tabs.length;
+      while (tabs[nextIndex].disabled && nextIndex !== index) {
+        nextIndex = (nextIndex - 1 + tabs.length) % tabs.length;
+      }
+    } else if (e.key === 'Home') {
+      nextIndex = 0;
+      while (tabs[nextIndex].disabled && nextIndex < tabs.length - 1) nextIndex++;
+    } else if (e.key === 'End') {
+      nextIndex = tabs.length - 1;
+      while (tabs[nextIndex].disabled && nextIndex > 0) nextIndex--;
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      selectTab(tabs[index].id);
+      return;
+    } else {
+      return; // Do nothing
+    }
+
+    if (nextIndex !== index) {
+      e.preventDefault();
+      const newId = tabs[nextIndex].id;
+      selectTab(newId);
+      // Focus the new tab
+      const newTabEl = document.getElementById(`tab-${newId}`);
+      newTabEl?.focus();
+    }
+  }
+</script>
+
+<div class="ds-tabs-container {className}" class:full-width={fullWidth}>
+  <div class="ds-tabs-list" role="tablist">
+    {#each tabs as tab, i (tab.id)}
+      {@const isActive = activeId === tab.id}
+      <button
+        id="tab-{tab.id}"
+        class="ds-tab"
+        class:is-active={isActive}
+        class:is-disabled={tab.disabled}
+        role="tab"
+        aria-selected={isActive}
+        aria-controls="panel-{tab.id}"
+        tabindex={isActive ? 0 : -1}
+        disabled={tab.disabled}
+        onclick={() => selectTab(tab.id)}
+        onkeydown={(e) => handleKeydown(e, i)}
+      >
+        {#if tab.icon}
+          <span class="ds-tab-icon">
+            {@render tab.icon()}
+          </span>
+        {/if}
+        
+        <span class="ds-tab-label">
+          {#if typeof tab.label === 'string'}
+            {tab.label}
+          {:else}
+            {@render tab.label()}
+          {/if}
+        </span>
+      </button>
+    {/each}
+
+    <!-- Animated Indicator -->
+    {#if isClient && activeIndex >= 0}
+      <div 
+        class="ds-tab-indicator"
+        style="
+          width: {fullWidth ? `calc(100% / ${tabs.length})` : `max-content`};
+          left: calc({fullWidth ? `(100% / ${tabs.length}) * ${activeIndex}` : '0px'});
+        "
+      >
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ds-tabs-container {
+    width: 100%;
+    border-bottom: 1px solid var(--border-default);
+  }
+
+  .ds-tabs-list {
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .ds-tabs-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ds-tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: color var(--transition-fast), background var(--transition-fast);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .full-width .ds-tab {
+    flex: 1;
+  }
+
+  .ds-tab:hover:not(.is-disabled) {
+    color: var(--color-text-primary);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-tab:focus-visible {
+    outline: none;
+    background: rgba(184, 115, 51, 0.1);
+  }
+
+  .ds-tab.is-active {
+    color: var(--color-accent);
+  }
+
+  .ds-tab.is-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .ds-tab-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .ds-tab-icon :global(svg) {
+    width: 1.1em;
+    height: 1.1em;
+  }
+
+  .ds-tab::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-accent);
+    transform: scaleX(0);
+    transition: transform var(--transition-bounce);
+    transform-origin: center;
+    box-shadow: 0 -1px 4px var(--color-accent-glow);
+  }
+
+  .ds-tab.is-active::after {
+    transform: scaleX(1);
+  }
+
+  .ds-tab:focus-visible::before {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    border-radius: var(--radius-sm);
+    border: 2px solid var(--color-accent-subtle);
+  }
+</style>

package/src/u0-primitives/tabs/tabs-types.ts

@@ -0,0 +1,11 @@
+// U0 Tabs — Tab type definition
+// Extracted from Tabs.svelte so tsc can resolve it without Svelte type declarations.
+
+import type { Snippet } from 'svelte';
+
+export interface Tab {
+  id: string;
+  label: string | Snippet;
+  disabled?: boolean;
+  icon?: Snippet;
+}