@stephen-netu/design-system 0.1.0 → 0.2.0

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

@@ -1,89 +0,0 @@
-<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

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

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

@@ -1,237 +0,0 @@
-<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>

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

@@ -1,11 +0,0 @@
-// 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;
-}

package/src/v0-diagrams/types.ts

@@ -1,28 +0,0 @@
-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;
-}