@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/u0-primitives/input/Input.test.js

@@ -0,0 +1,64 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import Input from './Input.svelte';
+describe('Input', () => {
+    afterEach(() => cleanup());
+    it('renders an <input> element', () => {
+        const { container } = render(Input);
+        expect(container.querySelector('input')).not.toBeNull();
+    });
+    it('applies placeholder', () => {
+        const { container } = render(Input, { placeholder: 'Search...' });
+        expect(container.querySelector('input[placeholder="Search..."]')).not.toBeNull();
+    });
+    it('sets disabled attribute', () => {
+        const { container } = render(Input, { disabled: true });
+        expect(container.querySelector('input')?.hasAttribute('disabled')).toBe(true);
+    });
+    it('respects the type prop', () => {
+        const { container } = render(Input, { type: 'password' });
+        expect(container.querySelector('input[type="password"]')).not.toBeNull();
+    });
+    it('applies error class wrapper when error is true', () => {
+        const { container } = render(Input, { error: true });
+        expect(container.querySelector('.has-error')).not.toBeNull();
+    });
+    it('applies custom id to the native input', () => {
+        const { container } = render(Input, { id: 'my-input' });
+        expect(container.querySelector('#my-input')).not.toBeNull();
+    });
+    it('applies custom name to the native input', () => {
+        const { container } = render(Input, { name: 'email' });
+        expect(container.querySelector('input')?.getAttribute('name')).toBe('email');
+    });
+    it('applies custom class to wrapper', () => {
+        const { container } = render(Input, { class: 'custom-input' });
+        expect(container.querySelector('.custom-input')).not.toBeNull();
+    });
+    it('displays leading icon element when iconLeading is provided', () => {
+        const { container } = render(Input, {
+            iconLeading: () => '<svg class="test-icon"></svg>'
+        });
+        expect(container.querySelector('.ds-input-icon.leading')).not.toBeNull();
+    });
+    it('has a show/hide button when type is password', () => {
+        const { container } = render(Input, { type: 'password' });
+        expect(container.querySelector('.ds-input-action')).not.toBeNull();
+    });
+    it('applies disabled class to wrapper when disabled', () => {
+        const { container } = render(Input, { disabled: true });
+        expect(container.querySelector('.is-disabled')).not.toBeNull();
+    });
+    it('sets aria-invalid when error is true', () => {
+        const { container } = render(Input, { error: true });
+        expect(container.querySelector('input')?.getAttribute('aria-invalid')).toBe('true');
+    });
+    it('sets aria-disabled when disabled', () => {
+        const { container } = render(Input, { disabled: true });
+        expect(container.querySelector('input')?.getAttribute('aria-disabled')).toBe('true');
+    });
+    it('does not set aria-invalid when no error', () => {
+        const { container } = render(Input, {});
+        expect(container.querySelector('input')?.getAttribute('aria-invalid')).toBeNull();
+    });
+});

package/dist/u0-primitives/input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Input } from './Input.svelte';
+export type { Props } from './Input.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/u0-primitives/input/index.js

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

package/{src → dist}/u0-primitives/modal/Modal.svelte

@@ -13,7 +13,7 @@
 
   import { tick } from 'svelte';
 
-  interface Props {
+  export interface Props {
     /** Controls modal visibility */
     isOpen?: boolean;
     /** Modal title (optional) */

package/dist/u0-primitives/modal/Modal.svelte.d.ts

@@ -0,0 +1,31 @@
+export 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;
+}
+declare const Modal: import("svelte").Component<Props, {
+    open: () => void;
+    close: () => void;
+}, "isOpen">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

package/dist/u0-primitives/modal/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/modal/Modal.svelte.ts"],"names":[],"mappings":"AAiBE,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACpC,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACzC,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACnC;AAyJH,QAAA,MAAM,KAAK;;;YAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/u0-primitives/modal/Modal.test.js

@@ -0,0 +1,94 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import Modal from './Modal.svelte';
+afterEach(() => {
+    cleanup();
+});
+describe('Modal', () => {
+    it('renders dialog when open', () => {
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body' });
+        const dialog = container.querySelector('[role="dialog"]');
+        expect(dialog).not.toBeNull();
+    });
+    it('sets aria-modal="true"', () => {
+        const { container } = render(Modal, { isOpen: true, children: () => 'body' });
+        const dialog = container.querySelector('[role="dialog"]');
+        expect(dialog?.getAttribute('aria-modal')).toBe('true');
+    });
+    it('has aria-labelledby when title is provided', () => {
+        const { container } = render(Modal, { isOpen: true, title: 'Titled', children: () => 'body' });
+        const dialog = container.querySelector('[role="dialog"]');
+        const labelledBy = dialog.getAttribute('aria-labelledby');
+        expect(labelledBy).toBeTruthy();
+    });
+    it('renders close button when showCloseButton is true', () => {
+        const { container } = render(Modal, {
+            isOpen: true,
+            title: 'Test',
+            children: () => 'body',
+            showCloseButton: true,
+        });
+        expect(container.querySelector('.modal-close-btn')).not.toBeNull();
+    });
+    it('does not render close button when showCloseButton is false', () => {
+        const { container } = render(Modal, {
+            isOpen: true,
+            title: 'Test',
+            children: () => 'body',
+            showCloseButton: false,
+        });
+        expect(container.querySelector('.modal-close-btn')).toBeNull();
+    });
+    it('applies custom class', () => {
+        const { container } = render(Modal, { isOpen: true, class: 'my-modal', children: () => 'body' });
+        expect(container.querySelector('.my-modal')).not.toBeNull();
+    });
+    it('applies z-index style from prop', () => {
+        const { container } = render(Modal, { isOpen: true, zIndex: 5000, children: () => 'body' });
+        const modalContainer = container.querySelector('.modal-container');
+        expect(modalContainer?.style.zIndex).toBe('5000');
+    });
+    it('calls onClose callback when close button is clicked', async () => {
+        let closed = false;
+        const { container } = render(Modal, {
+            isOpen: true,
+            title: 'Test',
+            children: () => 'body',
+            onClose: () => { closed = true; },
+            showCloseButton: true,
+        });
+        const closeBtn = container.querySelector('.modal-close-btn');
+        await fireEvent.click(closeBtn);
+        expect(closed).toBe(true);
+    });
+    it('applies open class when isOpen is true', () => {
+        const { container } = render(Modal, { isOpen: true, children: () => 'body' });
+        expect(container.querySelector('.modal-container')?.classList.contains('open')).toBe(true);
+    });
+    it('does not apply open class when isOpen is false', () => {
+        const { container } = render(Modal, { isOpen: false, children: () => 'body' });
+        expect(container.querySelector('.modal-container')?.classList.contains('open')).toBe(false);
+    });
+    it('contains a focusable close button for focus trap when open', () => {
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body', showCloseButton: true });
+        const closeBtn = container.querySelector('.modal-close-btn');
+        expect(closeBtn).not.toBeNull();
+        closeBtn?.focus();
+        expect(document.activeElement).toBe(closeBtn);
+    });
+    it('close button has aria-label', () => {
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body', showCloseButton: true });
+        const closeBtn = container.querySelector('.modal-close-btn');
+        expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
+    });
+    it('container renders when closed', () => {
+        const { container } = render(Modal, { isOpen: false, children: () => 'body' });
+        const modalContainer = container.querySelector('.modal-container');
+        expect(modalContainer).not.toBeNull();
+        expect(modalContainer?.classList.contains('open')).toBe(false);
+    });
+    it('has an overlay element', () => {
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body' });
+        expect(container.querySelector('.modal-overlay')).not.toBeNull();
+    });
+});

package/dist/u0-primitives/modal/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal.svelte';
+export type { Props } from './Modal.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/u0-primitives/rsvp/RsvpReader.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+  import Button from '../button/Button.svelte';
+  import { segmentForRsvp, calculateOrp, getWordDisplayTime, type RsvpWord } from './rsvp-utils';
+
+  let { 
+    text = '',
+    mode = 'preview',
+    initialWpm = 300,
+    maxWpm = mode === 'preview' ? 600 : 1000,
+    autoStart = false,
+    onComplete = () => {},
+    onPause = () => {}
+  }: {
+    text?: string;
+    mode?: 'preview' | 'full';
+    initialWpm?: number;
+    maxWpm?: number;
+    autoStart?: boolean;
+    onComplete?: () => void;
+    onPause?: () => void;
+  } = $props();
+
+  let isPlaying = $state(false);
+  let currentWpm = $state(initialWpm);
+  let wordIndex = $state(0);
+  let words: RsvpWord[] = $derived(segmentForRsvp(text));
+  
+  // Bounds-safe current word with fallback
+  let currentWord = $derived(words[wordIndex] || { 
+    text: '', 
+    prefix: '', 
+    pivot: '', 
+    suffix: '' 
+  });
+  
+  let orpPosition = $derived(calculateOrp(currentWord.text));
+  let progressText = $derived(words.length > 0 
+    ? `Word ${wordIndex + 1} of ${words.length}` 
+    : 'No content');
+
+  // Reset state when text changes
+  $effect(() => {
+    if (text) {
+      wordIndex = 0;
+      isPlaying = false;
+    }
+  });
+
+  // Dynamic timer using word-specific delays
+  $effect(() => {
+    if (!isPlaying || !words.length || wordIndex >= words.length) return;
+    
+    const word = words[wordIndex];
+    const displayTime = getWordDisplayTime(currentWpm, word);
+    
+    const timer = setTimeout(() => {
+      if (wordIndex >= words.length - 1) {
+        isPlaying = false;
+        onComplete();
+        return;
+      }
+      wordIndex++;
+    }, displayTime);
+    
+    return () => clearTimeout(timer);
+  });
+
+  // Auto-start when enabled
+  $effect(() => {
+    if (autoStart && !isPlaying && text.length > 0 && words.length > 0) {
+      isPlaying = true;
+    }
+  });
+
+  // Keyboard controls
+  function handleKeydown(event: KeyboardEvent) {
+    switch (event.key) {
+      case ' ':
+        event.preventDefault();
+        isPlaying = !isPlaying;
+        if (!isPlaying) onPause();
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        wordIndex = Math.max(0, wordIndex - 10);
+        break;
+      case 'Escape':
+        event.preventDefault();
+        isPlaying = false;
+        onComplete();
+        break;
+    }
+  }
+
+  // Toggle play/pause with tracking
+  function togglePlayback() {
+    isPlaying = !isPlaying;
+    if (!isPlaying) onPause();
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div 
+  class="rsvp-container" 
+  role="region" 
+  aria-label="Rapid serial visual presentation reader"
+  tabindex="0"
+>
+  <!-- Screen reader announcement of current word -->
+  <span class="sr-only" aria-live="polite" aria-atomic="true">
+    {currentWord.text || 'No content'}
+  </span>
+  
+  <!-- Visual display (hidden from screen readers to avoid double announcement) -->
+  <div class="rsvp-display" style="--orp-offset: {orpPosition}ch" aria-hidden="true">
+    {#if words.length > 0 && currentWord.text}
+      <span class="rsvp-prefix">{currentWord.prefix}</span>
+      <span class="rsvp-pivot">{currentWord.pivot}</span>
+      <span class="rsvp-suffix">{currentWord.suffix}</span>
+    {:else}
+      <span class="rsvp-empty">—</span>
+    {/if}
+  </div>
+  
+  <div class="rsvp-progress" aria-hidden="true">
+    <span class="rsvp-progress-text">{progressText}</span>
+  </div>
+  
+  <div class="rsvp-controls">
+    <Button 
+      variant="ghost" 
+      size="sm" 
+      onclick={togglePlayback}
+      aria-label={isPlaying ? 'Pause' : 'Play'}
+    >
+      {isPlaying ? '⏸' : '▶'}
+    </Button>
+    <input 
+      type="range" 
+      min="200" 
+      max={maxWpm} 
+      bind:value={currentWpm} 
+      aria-label="Reading speed (words per minute)"
+      disabled={words.length === 0}
+    />
+    <span class="rsvp-wpm" aria-label="Current speed">{currentWpm} WPM</span>
+  </div>
+  
+  <div class="rsvp-help" aria-hidden="true">
+    <span class="rsvp-help-text">Space: pause/resume • ←: back 10 • Esc: close</span>
+  </div>
+</div>
+
+<style>
+  .rsvp-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-6);
+    background: var(--color-bg-panel);
+    border-radius: var(--radius-lg);
+    min-width: 320px;
+    box-shadow: var(--shadow-card);
+  }
+  
+  .rsvp-display {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xl);
+    font-weight: 500;
+    color: var(--color-text-primary);
+    position: relative;
+    min-height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+  
+  .rsvp-prefix,
+  .rsvp-pivot,
+  .rsvp-suffix {
+    display: inline-block;
+  }
+  
+  .rsvp-pivot {
+    color: var(--color-accent); /* Brass/copper var(--color-accent) */
+    font-weight: 600;
+  }
+  
+  .rsvp-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    max-width: 400px;
+  }
+  
+  input[type="range"] {
+    flex-grow: 1;
+    accent-color: var(--color-accent);
+  }
+  
+  .rsvp-wpm {
+    font-variant-numeric: tabular-nums;
+    min-width: 5ch;
+    text-align: right;
+    color: var(--color-text-secondary);
+  }
+  
+  .rsvp-progress {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    text-align: center;
+  }
+  
+  .rsvp-progress-text {
+    font-variant-numeric: tabular-nums;
+  }
+  
+  .rsvp-help {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    text-align: center;
+    margin-top: var(--space-2);
+  }
+  
+  .rsvp-help-text {
+    opacity: 0.7;
+  }
+  
+  .rsvp-empty {
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+  
+  /* Screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  
+  /* Disabled state */
+  input[type="range"]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/dist/u0-primitives/rsvp/RsvpReader.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    text?: string;
+    mode?: 'preview' | 'full';
+    initialWpm?: number;
+    maxWpm?: number;
+    autoStart?: boolean;
+    onComplete?: () => void;
+    onPause?: () => void;
+};
+declare const RsvpReader: import("svelte").Component<$$ComponentProps, {}, "">;
+type RsvpReader = ReturnType<typeof RsvpReader>;
+export default RsvpReader;
+//# sourceMappingURL=RsvpReader.svelte.d.ts.map

package/dist/u0-primitives/rsvp/RsvpReader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RsvpReader.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/rsvp/RsvpReader.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAqIJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/u0-primitives/rsvp/rsvp-utils.d.ts

@@ -0,0 +1,46 @@
+/**
+ * RSVP Utility Functions
+ * Handles text segmentation, ORP calculation, and delay mapping for RSVP display
+ */
+/**
+ * Interface for RSVP word data
+ */
+export interface RsvpWord {
+    text: string;
+    prefix: string;
+    pivot: string;
+    suffix: string;
+    delayMs: number;
+}
+/**
+ * Calculate Optimal Recognition Point (ORP) position in a word
+ * Based on research: ORP is typically left of center, adjusted for word length
+ *
+ * @param word - The word to calculate ORP for
+ * @returns Index of the ORP character (0-based)
+ */
+export declare function calculateOrp(word: string): number;
+/**
+ * Segment text into RSVP words with ORP information and delay mapping
+ *
+ * @param text - Input text to segment
+ * @returns Array of RsvpWord objects ready for RSVP display
+ */
+export declare function segmentForRsvp(text: string): RsvpWord[];
+/**
+ * Calculate delay multiplier for a word based on complexity
+ * Longer words and punctuation get slightly more display time
+ *
+ * @param word - The word to calculate delay for
+ * @returns Delay multiplier (1.0 = base time)
+ */
+export declare function calculateDelay(word: string): number;
+/**
+ * Calculate actual display time for a word in milliseconds
+ *
+ * @param wpm - Words per minute setting
+ * @param word - The RSVP word object
+ * @returns Display time in milliseconds
+ */
+export declare function getWordDisplayTime(wpm: number, word: RsvpWord): number;
+//# sourceMappingURL=rsvp-utils.d.ts.map

package/dist/u0-primitives/rsvp/rsvp-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rsvp-utils.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/rsvp/rsvp-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAcjD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAyBvD;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAmBnD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAGtE"}

package/dist/u0-primitives/rsvp/rsvp-utils.js

@@ -0,0 +1,92 @@
+/**
+ * RSVP Utility Functions
+ * Handles text segmentation, ORP calculation, and delay mapping for RSVP display
+ */
+/**
+ * Calculate Optimal Recognition Point (ORP) position in a word
+ * Based on research: ORP is typically left of center, adjusted for word length
+ *
+ * @param word - The word to calculate ORP for
+ * @returns Index of the ORP character (0-based)
+ */
+export function calculateOrp(word) {
+    const len = word.length;
+    // ORP positioning based on empirical research:
+    // - Very short words (1 char): ORP at position 0
+    // - Short words (2-5 chars): ORP at position 1
+    // - Medium words (6-9 chars): ORP at position 2
+    // - Longer words (10-13 chars): ORP at position 3
+    // - Very long words (14+ chars): ORP at position 4
+    if (len <= 1)
+        return 0;
+    if (len <= 5)
+        return 1;
+    if (len <= 9)
+        return 2;
+    if (len <= 13)
+        return 3;
+    return 4;
+}
+/**
+ * Segment text into RSVP words with ORP information and delay mapping
+ *
+ * @param text - Input text to segment
+ * @returns Array of RsvpWord objects ready for RSVP display
+ */
+export function segmentForRsvp(text) {
+    // Normalize dashes and split on whitespace
+    return text
+        .replace(/[—–]/g, ' — ') // Normalize em/en dashes to spaces around dash
+        .split(/\s+/)
+        .filter(w => w.length > 0)
+        .map(word => {
+        const orp = calculateOrp(word);
+        // Split word into prefix, pivot, suffix based on ORP
+        const prefix = word.slice(0, orp);
+        const pivot = word[orp] || '';
+        const suffix = word.slice(orp + 1);
+        // Calculate base delay multiplier for this word
+        const delayMs = calculateDelay(word);
+        return {
+            text: word,
+            prefix,
+            pivot,
+            suffix,
+            delayMs
+        };
+    });
+}
+/**
+ * Calculate delay multiplier for a word based on complexity
+ * Longer words and punctuation get slightly more display time
+ *
+ * @param word - The word to calculate delay for
+ * @returns Delay multiplier (1.0 = base time)
+ */
+export function calculateDelay(word) {
+    let delay = 1.0;
+    // Add pause for punctuation at end of word
+    if (/[.,;:!?]$/.test(word)) {
+        delay += 0.5; // Half unit pause for sentence punctuation
+    }
+    // Add pause for dashes
+    if (/[—–]$/.test(word)) {
+        delay += 1.0; // Full unit pause for dashes
+    }
+    // Slow down for very long words (over 8 characters)
+    if (word.length > 8) {
+        delay += 0.3; // Slightly longer for complex words
+    }
+    return delay;
+}
+/**
+ * Calculate actual display time for a word in milliseconds
+ *
+ * @param wpm - Words per minute setting
+ * @param word - The RSVP word object
+ * @returns Display time in milliseconds
+ */
+export function getWordDisplayTime(wpm, word) {
+    const baseMsPerWord = 60000 / wpm; // Base time per word at given WPM
+    return baseMsPerWord * word.delayMs;
+}

package/{src → dist}/u0-primitives/spinner/Spinner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  interface Props {
+  export interface Props {
     size?: 'sm' | 'md' | 'lg' | 'xl';
     color?: 'accent' | 'muted' | 'white';
     class?: string;
@@ -112,8 +112,8 @@
     color: var(--color-text-muted); 
   }
   
-  .color-white { 
-    color: #ffffff; 
+  .color-white {
+    color: var(--color-text-primary);
     filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
   }
 

package/dist/u0-primitives/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'accent' | 'muted' | 'white';
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

package/dist/u0-primitives/spinner/Spinner.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}