@stephen-netu/design-system 0.1.0

package/src/u0-primitives/dropdown/Dropdown.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  export interface DropdownItem {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+  }
+
+  interface Props {
+    items: DropdownItem[];
+    trigger: Snippet;
+    align?: 'left' | 'right' | 'center';
+    width?: string;
+    class?: string;
+    onselect?: (item: DropdownItem) => void;
+  }
+
+  let {
+    items = [],
+    trigger,
+    align = 'left',
+    width = '240px',
+    class: className = '',
+    onselect
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let menuNode = $state<HTMLElement | null>(null);
+  let triggerNode = $state<HTMLElement | null>(null);
+  let focusedIndex = $state(-1);
+
+  function toggleMenu() {
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = -1; // Reset focus when opening
+    }
+  }
+
+  function closeMenu() {
+    isOpen = false;
+    focusedIndex = -1;
+  }
+
+  function handleSelect(item: DropdownItem) {
+    if (item.disabled) return;
+    onselect?.(item);
+    closeMenu();
+    // Return focus to trigger
+    triggerNode?.querySelector('button')?.focus();
+  }
+
+  // Handle clicks outside
+  function handleWindowClick(e: MouseEvent) {
+    if (isOpen && menuNode && triggerNode && !menuNode.contains(e.target as Node) && !triggerNode.contains(e.target as Node)) {
+      closeMenu();
+    }
+  }
+
+  // Keyboard navigation
+  function handleKeydown(e: KeyboardEvent) {
+    if (!isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMenu();
+        // Target next tick logic essentially
+        setTimeout(() => {
+          focusedIndex = items.findIndex(i => !i.disabled);
+          focusItem(focusedIndex);
+        }, 0);
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        closeMenu();
+        triggerNode?.querySelector('button')?.focus();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        focusedIndex = findNextFocusable(focusedIndex, 1);
+        focusItem(focusedIndex);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        focusedIndex = findNextFocusable(focusedIndex, -1);
+        focusItem(focusedIndex);
+        break;
+      case 'Home':
+        e.preventDefault();
+        focusedIndex = findNextFocusable(-1, 1);
+        focusItem(focusedIndex);
+        break;
+      case 'End':
+        e.preventDefault();
+        focusedIndex = findNextFocusable(items.length, -1);
+        focusItem(focusedIndex);
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (focusedIndex >= 0 && !items[focusedIndex].disabled) {
+          handleSelect(items[focusedIndex]);
+        }
+        break;
+    }
+  }
+
+  function findNextFocusable(startIndex: number, direction: 1 | -1): number {
+    // Guard: if no items are focusable, bail early
+    if (items.every(i => i.disabled)) return startIndex;
+    let nextIndex = startIndex + direction;
+    while (nextIndex >= 0 && nextIndex < items.length) {
+      if (!items[nextIndex].disabled) {
+        return nextIndex;
+      }
+      nextIndex += direction;
+    }
+    // Wrap around
+    if (nextIndex < 0) return findNextFocusable(items.length, -1);
+    if (nextIndex >= items.length) return findNextFocusable(-1, 1);
+    return startIndex;
+  }
+
+  function focusItem(index: number) {
+    if (menuNode && index >= 0) {
+      const items = menuNode.querySelectorAll('[role="menuitem"]');
+      (items[index] as HTMLElement)?.focus();
+    }
+  }
+</script>
+
+<svelte:window onclick={handleWindowClick} />
+
+<div class="ds-dropdown-wrapper {className}">
+  <!-- trigger slot wrapper needs the ref and keyboard events -->
+  <div 
+    bind:this={triggerNode} 
+    onkeydown={handleKeydown}
+    role="button"
+    tabindex="0"
+    class="ds-dropdown-trigger"
+    aria-expanded={isOpen}
+    aria-haspopup="menu"
+    onclick={toggleMenu}
+  >
+    {@render trigger()}
+  </div>
+
+  {#if isOpen}
+    <div 
+      bind:this={menuNode}
+      class="ds-dropdown-menu align-{align}"
+      style="width: {width};"
+      role="menu"
+      tabindex="-1"
+      onkeydown={handleKeydown}
+    >
+      {#each items as item, i (item.id)}
+        <button
+          class="ds-dropdown-item"
+          class:is-danger={item.danger}
+          role="menuitem"
+          tabindex={i === focusedIndex ? 0 : -1}
+          disabled={item.disabled}
+          aria-disabled={item.disabled}
+          onclick={(e) => { e.stopPropagation(); handleSelect(item); }}
+          onmouseenter={() => focusedIndex = i}
+        >
+          {#if item.icon}
+            <span class="ds-dropdown-icon">
+              {@render item.icon()}
+            </span>
+          {/if}
+          
+          <span class="ds-dropdown-label">{item.label}</span>
+          
+          {#if item.shortcut}
+            <span class="ds-dropdown-shortcut">{item.shortcut}</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-dropdown-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .ds-dropdown-trigger {
+    display: inline-block;
+  }
+
+  .ds-dropdown-menu {
+    position: absolute;
+    top: calc(100% + var(--space-2));
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.5);
+    padding: var(--space-1);
+    z-index: 1000;
+    animation: ds-scale-in var(--transition-fast) transform-origin;
+  }
+
+  /* Alignments */
+  .align-left { left: 0; transform-origin: top left; }
+  .align-right { right: 0; transform-origin: top right; }
+  .align-center { left: 50%; transform: translateX(-50%); transform-origin: top center; }
+
+  .ds-dropdown-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    border: none;
+    background: transparent;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--transition-fast), color var(--transition-fast);
+  }
+
+  .ds-dropdown-item:hover,
+  .ds-dropdown-item:focus {
+    background: var(--color-bg-panel);
+    outline: none;
+  }
+
+  .ds-dropdown-item:focus-visible {
+    background: rgba(184, 115, 51, 0.15); /* Suble brass focus */
+  }
+
+  .ds-dropdown-item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Danger Item */
+  .ds-dropdown-item.is-danger {
+    color: var(--color-error);
+  }
+
+  .ds-dropdown-item.is-danger:hover,
+  .ds-dropdown-item.is-danger:focus {
+    background: rgba(166, 94, 94, 0.1);
+  }
+
+  .ds-dropdown-icon {
+    display: flex;
+    margin-right: var(--space-3);
+    color: var(--color-text-secondary);
+  }
+
+  .ds-dropdown-item.is-danger .ds-dropdown-icon {
+    color: var(--color-error);
+  }
+
+  .ds-dropdown-item:hover:not(.is-danger) .ds-dropdown-icon {
+    color: var(--color-accent);
+  }
+
+  .ds-dropdown-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ds-dropdown-shortcut {
+    margin-left: var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    background: var(--color-bg-app);
+    padding: 2px 6px;
+    border-radius: var(--radius-sm, 4px);
+    border: 1px solid var(--border-subtle);
+  }
+
+  @keyframes ds-scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  .align-center {
+    animation-name: ds-scale-in-center;
+  }
+
+  @keyframes ds-scale-in-center {
+    from { opacity: 0; transform: translateX(-50%) scale(0.95); }
+    to { opacity: 1; transform: translateX(-50%) scale(1); }
+  }
+</style>

package/src/u0-primitives/expert-badge/ExpertBadge.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { ExpertIdentity } from '../../epistemic/types.js';
+
+  interface Props {
+    expert: ExpertIdentity;
+    size?: 'sm' | 'md';
+    showName?: boolean;
+    class?: string;
+  }
+
+  let {
+    expert,
+    size = 'md',
+    showName = true,
+    class: className = '',
+  }: Props = $props();
+
+  const EXPERT_ICONS: Record<ExpertIdentity['name'], string> = {
+    Atelier: '◈',
+    Agora: '◇',
+    Ryu: '◆',
+    SOVEREIGN: '●',
+    Agent: '◎',
+  };
+
+  const EXPERT_COLOR_VARS: Record<ExpertIdentity['name'], string> = {
+    Atelier: 'var(--expert-atelier)',
+    Agora: 'var(--expert-agora)',
+    Ryu: 'var(--expert-ryu)',
+    SOVEREIGN: 'var(--expert-sovereign)',
+    Agent: 'var(--expert-agent)',
+  };
+
+  const icon = $derived(EXPERT_ICONS[expert.name] ?? '○');
+  const color = $derived(EXPERT_COLOR_VARS[expert.name] ?? 'var(--color-text-secondary)');
+  const displayName = $derived(
+    expert.name === 'Agent' && expert.agentId
+      ? `Agent:${expert.agentId.slice(0, 6)}`
+      : expert.name
+  );
+  const titleText = $derived(`${expert.name} — ${expert.domain}`);
+</script>
+
+<span
+  class="ds-expert-badge size-{size} {className}"
+  style="--badge-color: {color};"
+  title={titleText}
+  aria-label="Expert: {displayName}"
+>
+  <span class="icon">{icon}</span>
+  {#if showName && size !== 'sm'}
+    <span class="name">{displayName}</span>
+  {/if}
+</span>
+
+<style>
+  .ds-expert-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: 2px var(--space-2);
+    border-radius: var(--radius-full);
+    border: 1px solid color-mix(in srgb, var(--badge-color) 30%, transparent);
+    background: color-mix(in srgb, var(--badge-color) 8%, transparent);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    color: var(--badge-color);
+    white-space: nowrap;
+    cursor: default;
+    line-height: 1.4;
+  }
+
+  .size-sm {
+    padding: 2px;
+    border: none;
+    background: transparent;
+    font-size: var(--text-sm);
+  }
+
+  .icon {
+    font-size: 0.9em;
+    line-height: 1;
+  }
+
+  .name {
+    font-weight: 500;
+    font-size: var(--text-xs);
+  }
+</style>

package/src/u0-primitives/expert-badge/index.ts

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

package/src/u0-primitives/index.ts

@@ -0,0 +1,35 @@
+// U0 Primitives — Atomic UI components
+
+export { default as Button } from './button/Button.svelte';
+export { default as Input } from './input/Input.svelte';
+export { default as Card } from './card/Card.svelte';
+export { default as Badge } from './badge/Badge.svelte';
+export { default as Avatar } from './avatar/Avatar.svelte';
+export { default as Toggle } from './toggle/Toggle.svelte';
+export { default as Tooltip } from './tooltip/Tooltip.svelte';
+export { default as Dropdown } from './dropdown/Dropdown.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+export type { Tab } from './tabs/tabs-types';
+export { default as Spinner } from './spinner/Spinner.svelte';
+export { default as Modal } from './modal/Modal.svelte';
+export { default as AnimatedIcon } from './animated-icon/AnimatedIcon.svelte';
+export type { AnimatedIconName, AnimationType } from './animated-icon/index.js';
+export * from './assay-badge/index.js';
+export * from './allay-gauge/index.js';
+export * from './expert-badge/index.js';
+
+// Re-export types
+export type {
+  ButtonProps,
+  InputProps,
+  CardProps,
+  BadgeProps,
+  ToggleProps,
+  SpinnerProps,
+  TabsProps,
+  ModalProps,
+  TooltipProps,
+  DropdownProps,
+  DropdownItem,
+  AvatarProps,
+} from '../p0-primitives/types';

package/src/u0-primitives/input/Input.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    type?: 'text' | 'search' | 'password' | 'email' | 'url';
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    iconLeading?: Snippet;
+    iconTrailing?: Snippet;
+  }
+
+  let {
+    value = $bindable(''),
+    type = 'text',
+    placeholder = '',
+    disabled = false,
+    error = false,
+    class: className = '',
+    id,
+    name,
+    iconLeading,
+    iconTrailing
+  }: Props = $props();
+
+  let isFocused = $state(false);
+  let showPassword = $state(false);
+
+  let currentType = $derived(type === 'password' && showPassword ? 'text' : type);
+
+  function handleFocus() {
+    isFocused = true;
+  }
+
+  function handleBlur() {
+    isFocused = false;
+  }
+
+  function togglePassword() {
+    showPassword = !showPassword;
+  }
+</script>
+
+<div 
+  class="ds-input-wrapper {className}"
+  class:is-focused={isFocused}
+  class:is-disabled={disabled}
+  class:has-error={error}
+  class:has-leading={!!iconLeading}
+  class:has-trailing={!!iconTrailing || type === 'password'}
+>
+  {#if iconLeading}
+    <div class="ds-input-icon leading">
+      {@render iconLeading()}
+    </div>
+  {/if}
+
+  <input
+    {id}
+    {name}
+    type={currentType}
+    bind:value
+    {placeholder}
+    {disabled}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    class="ds-input-element"
+  />
+
+  {#if type === 'password'}
+    <button 
+      type="button" 
+      class="ds-input-action trailing"
+      onclick={togglePassword}
+      aria-label={showPassword ? "Hide password" : "Show password"}
+      tabindex="-1"
+    >
+      {#if showPassword}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+          <line x1="1" y1="1" x2="23" y2="23"></line>
+        </svg>
+      {:else}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      {/if}
+    </button>
+  {:else if iconTrailing}
+    <div class="ds-input-icon trailing">
+      {@render iconTrailing()}
+    </div>
+  {/if}
+  
+  <!-- Animated bottom border glow -->
+  <div class="ds-input-glow"></div>
+</div>
+
+<style>
+  .ds-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: var(--color-bg-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    overflow: hidden;
+  }
+
+  .ds-input-wrapper:hover:not(.is-disabled) {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-input-wrapper.is-focused {
+    border-color: var(--color-accent);
+    background: var(--color-bg-app); /* Darker inside when focused */
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  .ds-input-wrapper.has-error {
+    border-color: var(--color-error);
+  }
+
+  .ds-input-wrapper.is-disabled {
+    opacity: 0.5;
+    background: rgba(0,0,0,0.2);
+    cursor: not-allowed;
+  }
+
+  .ds-input-element {
+    flex: 1;
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 var(--space-3);
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+  }
+
+  .ds-input-wrapper.has-leading .ds-input-element {
+    padding-left: var(--space-8);
+  }
+
+  .ds-input-wrapper.has-trailing .ds-input-element {
+    padding-right: var(--space-8);
+  }
+
+  .ds-input-element::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .ds-input-element:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Icons */
+  .ds-input-icon, .ds-input-action {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    width: var(--space-8);
+    height: 100%;
+    transition: color var(--transition-fast);
+  }
+
+  .ds-input-icon :global(svg), .ds-input-action svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .ds-input-wrapper.is-focused .ds-input-icon.leading {
+    color: var(--color-accent);
+  }
+
+  .leading { left: 0; }
+  .trailing { right: 0; }
+
+  /* Actions (like password toggle) */
+  .ds-input-action {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+  }
+
+  .ds-input-action:hover {
+    color: var(--color-text-primary);
+  }
+
+  .ds-input-action:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -2px;
+  }
+
+  /* Animated Bottom Glow Line */
+  .ds-input-glow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: var(--color-accent);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform var(--transition-normal);
+    box-shadow: 0 -1px 4px var(--color-accent-glow);
+  }
+
+  .ds-input-wrapper.is-focused .ds-input-glow {
+    transform: scaleX(1);
+  }
+
+  .ds-input-wrapper.has-error .ds-input-glow {
+    background: var(--color-error);
+    box-shadow: 0 -1px 4px rgba(166, 94, 94, 0.4);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-input-wrapper { transition: none; }
+    .ds-input-glow { transition: none; }
+  }
+</style>