@nucel/ui 0.3.0 → 0.11.0

package/src/lib/components/ui/AppSidebar.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-
-  let {
-    collapsed = $bindable(false),
-    brand,
-    nav,
-    footer,
-  }: {
-    collapsed?: boolean;
-    brand?: Snippet<[{ collapsed: boolean }]>;
-    nav?: Snippet<[{ collapsed: boolean }]>;
-    footer?: Snippet<[{ collapsed: boolean }]>;
-  } = $props();
-</script>
-
-<aside
-  class="flex flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-200"
-  style:width={collapsed ? '56px' : '224px'}
-  style:min-width={collapsed ? '56px' : '224px'}
->
-  <div class="flex h-12 shrink-0 items-center border-b border-sidebar-border px-3">
-    <div class="flex-1 overflow-hidden">
-      {#if brand}{@render brand({ collapsed })}{/if}
-    </div>
-    <button
-      class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
-      onclick={() => (collapsed = !collapsed)}
-      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-    >
-      {#if collapsed}<ChevronRight size={14} />{:else}<ChevronLeft size={14} />{/if}
-    </button>
-  </div>
-
-  <nav class="flex flex-1 flex-col gap-0.5 overflow-y-auto p-2">
-    {#if nav}{@render nav({ collapsed })}{/if}
-  </nav>
-
-  {#if footer}
-    <div class="border-t border-sidebar-border p-2">
-      {@render footer({ collapsed })}
-    </div>
-  {/if}
-</aside>

package/src/lib/components/ui/CodeBlock.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-  import { createHighlighter, type Highlighter } from 'shiki';
-  import CopyButton from './CopyButton.svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let {
-    code,
-    language = 'plaintext',
-    showLanguage = true,
-    class: className,
-  }: {
-    code: string;
-    language?: string;
-    showLanguage?: boolean;
-    class?: string;
-  } = $props();
-
-  let html = $state('');
-  let highlighter: Highlighter | null = null;
-
-  const SUPPORTED_LANGS = [
-    'typescript',
-    'javascript',
-    'svelte',
-    'html',
-    'css',
-    'json',
-    'bash',
-    'shell',
-    'python',
-    'rust',
-    'go',
-    'plaintext',
-    'sql',
-    'yaml',
-    'toml',
-    'markdown',
-  ] as const;
-
-  async function highlight(src: string, lang: string) {
-    if (!highlighter) {
-      highlighter = await createHighlighter({
-        themes: ['github-dark'],
-        langs: SUPPORTED_LANGS as unknown as string[],
-      });
-    }
-    const safeLang = SUPPORTED_LANGS.includes(lang as (typeof SUPPORTED_LANGS)[number])
-      ? lang
-      : 'plaintext';
-    return highlighter.codeToHtml(src, { lang: safeLang, theme: 'github-dark' });
-  }
-
-  $effect(() => {
-    highlight(code, language)
-      .then((result) => {
-        html = result;
-      })
-      .catch(() => {
-        // Highlighting failed (e.g. in a test environment without WASM support).
-        // The component falls back to the plain <pre> display.
-      });
-  });
-</script>
-
-<div
-  class={cn(
-    'relative overflow-hidden rounded-xl border border-border bg-[#0d1117] font-mono text-sm',
-    className,
-  )}
->
-  {#if showLanguage || true}
-    <div
-      class="flex items-center justify-between border-b border-white/8 px-4 py-2"
-    >
-      {#if showLanguage}
-        <span class="text-[11px] font-medium uppercase tracking-wide text-white/40">
-          {language}
-        </span>
-      {:else}
-        <span></span>
-      {/if}
-      <CopyButton text={code} size={14} class="text-white/40 hover:bg-white/8 hover:text-white/80" />
-    </div>
-  {/if}
-
-  {#if html}
-    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-    <div class="overflow-x-auto [&>pre]:p-4 [&>pre]:text-sm">{@html html}</div>
-  {:else}
-    <pre class="overflow-x-auto p-4 text-white/70">{code}</pre>
-  {/if}
-</div>

package/src/lib/components/ui/CopyButton.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { Copy, Check } from '@lucide/svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let {
-    text,
-    size = 16,
-    class: className,
-  }: {
-    text: string;
-    size?: number;
-    class?: string;
-  } = $props();
-
-  let copied = $state(false);
-  let timer: ReturnType<typeof setTimeout> | null = null;
-
-  async function copy() {
-    await navigator.clipboard.writeText(text);
-    copied = true;
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      copied = false;
-      timer = null;
-    }, 2000);
-  }
-</script>
-
-<button
-  type="button"
-  onclick={copy}
-  aria-label={copied ? 'Copied' : 'Copy to clipboard'}
-  class={cn(
-    'inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-    className,
-  )}
->
-  {#if copied}
-    <Check size={size} class="text-success" />
-  {:else}
-    <Copy size={size} />
-  {/if}
-</button>

package/src/lib/components/ui/CostDisplay.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import NumberFlow from "@number-flow/svelte";
-
-  let {
-    amount,
-    precision = 2,
-    size = "sm",
-    class: className = "",
-  }: {
-    amount: number;
-    precision?: 2 | 3 | 4;
-    size?: "xs" | "sm";
-    class?: string;
-  } = $props();
-
-  const sizeClass = $derived(
-    size === "xs" ? "text-[10px]" : "text-xs",
-  );
-</script>
-
-<span class="tabular-nums text-muted-foreground {sizeClass} {className}">
-  <NumberFlow
-    value={amount}
-    format={{ style: "currency", currency: "USD", minimumFractionDigits: precision, maximumFractionDigits: precision }}
-  />
-</span>

package/src/lib/components/ui/FilterBar.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-  import { Search, X } from '@lucide/svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  type Filter = {
-    key: string;
-    label: string;
-    value: string;
-  };
-
-  let {
-    value = '',
-    filters = [],
-    placeholder = 'Search…',
-    onchange,
-    onremove,
-    class: className,
-  }: {
-    value?: string;
-    filters?: Filter[];
-    placeholder?: string;
-    onchange?: (value: string) => void;
-    onremove?: (filter: Filter) => void;
-    class?: string;
-  } = $props();
-
-  function handleInput(e: Event) {
-    const target = e.currentTarget as HTMLInputElement;
-    onchange?.(target.value);
-  }
-</script>
-
-<div class={cn('flex flex-wrap items-center gap-2', className)}>
-  <!-- search input -->
-  <div class="relative flex min-w-[200px] items-center">
-    <Search size={14} class="absolute left-2.5 text-muted-foreground" />
-    <input
-      type="search"
-      {placeholder}
-      {value}
-      oninput={handleInput}
-      class="h-8 w-full rounded-md border border-border bg-background pl-8 pr-3 text-[13px] text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    />
-  </div>
-
-  <!-- filter chips -->
-  {#each filters as filter}
-    <span
-      class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-[12px] font-medium text-foreground"
-    >
-      <span class="text-muted-foreground">{filter.label}:</span>
-      <span>{filter.value}</span>
-      <button
-        type="button"
-        onclick={() => onremove?.(filter)}
-        aria-label="Remove {filter.label} filter"
-        class="ml-0.5 rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
-      >
-        <X size={11} />
-      </button>
-    </span>
-  {/each}
-</div>

package/src/lib/components/ui/FormField.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '../../utils/cn.js';
-  import { Label } from './label/index.js';
-
-  let {
-    label,
-    for: forId,
-    hint,
-    error,
-    children,
-    class: className,
-  }: {
-    label?: string;
-    for?: string;
-    hint?: string;
-    error?: string;
-    children?: Snippet;
-    class?: string;
-  } = $props();
-</script>
-
-<div class={cn('space-y-1.5', className)}>
-  {#if label}
-    <Label for={forId}>{label}</Label>
-  {/if}
-  {@render children?.()}
-  {#if hint && !error}
-    <p class="text-[11px] text-muted-foreground">{hint}</p>
-  {/if}
-  {#if error}
-    <p class="text-sm text-destructive">{error}</p>
-  {/if}
-</div>

package/src/lib/components/ui/MetricCard.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-  import { TrendingUp, TrendingDown, Minus } from '@lucide/svelte';
-  import Sparkline from './Sparkline.svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  type Trend = 'up' | 'down' | 'neutral';
-
-  let {
-    value,
-    label,
-    hint,
-    data = [],
-    trend,
-    class: className,
-  }: {
-    value: string | number;
-    label: string;
-    hint?: string;
-    data?: number[];
-    trend?: Trend;
-    class?: string;
-  } = $props();
-
-  const trendStyles: Record<Trend, string> = {
-    up: 'text-success',
-    down: 'text-destructive',
-    neutral: 'text-muted-foreground',
-  };
-
-  const trendSparkColor: Record<Trend, string> = {
-    up: 'stroke-success',
-    down: 'stroke-destructive',
-    neutral: 'stroke-muted-foreground',
-  };
-
-  const trendFillColor: Record<Trend, string> = {
-    up: 'fill-success/10',
-    down: 'fill-destructive/10',
-    neutral: 'fill-muted/30',
-  };
-</script>
-
-<div class={cn('rounded-xl border border-border bg-card p-4', className)}>
-  <div class="flex items-start justify-between gap-2">
-    <div class="min-w-0 flex-1">
-      <div class="text-xl font-semibold tracking-tight tabular-nums text-foreground">{value}</div>
-      <div class="mt-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-        {label}
-      </div>
-      {#if hint}
-        <div
-          class={cn(
-            'mt-1 flex items-center gap-1 text-[11px]',
-            trend ? trendStyles[trend] : 'text-muted-foreground/70',
-          )}
-        >
-          {#if trend === 'up'}
-            <TrendingUp size={11} />
-          {:else if trend === 'down'}
-            <TrendingDown size={11} />
-          {:else if trend === 'neutral'}
-            <Minus size={11} />
-          {/if}
-          {hint}
-        </div>
-      {/if}
-    </div>
-
-    {#if data.length > 0}
-      <Sparkline
-        {data}
-        color={trend ? trendSparkColor[trend] : 'stroke-primary'}
-        fillColor={trend ? trendFillColor[trend] : 'fill-primary/10'}
-        width={72}
-        height={28}
-      />
-    {/if}
-  </div>
-</div>

package/src/lib/components/ui/NavItem.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import type { HTMLAnchorAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/cn.js';
-
-  type Props = HTMLAnchorAttributes & {
-    href: string;
-    label: string;
-    icon?: any;
-    active?: boolean;
-    collapsed?: boolean;
-  };
-
-  let {
-    href,
-    label,
-    icon: Icon,
-    active = false,
-    collapsed = false,
-    class: className,
-    ...rest
-  }: Props = $props();
-</script>
-
-<a
-  {href}
-  class={cn(
-    'flex items-center gap-2 rounded-md px-2 py-1.5 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground',
-    active && 'bg-sidebar-accent text-sidebar-primary',
-    className,
-  )}
-  aria-label={collapsed ? label : undefined}
-  {...rest}
->
-  {#if Icon}
-    <span class="flex size-5 shrink-0 items-center justify-center">
-      <Icon size={16} />
-    </span>
-  {/if}
-  {#if !collapsed}
-    <span class="truncate">{label}</span>
-  {/if}
-</a>

package/src/lib/components/ui/NavSection.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  let {
-    label,
-    collapsed = false,
-  }: {
-    label: string;
-    collapsed?: boolean;
-  } = $props();
-</script>
-
-{#if !collapsed}
-  <p class="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80">
-    {label}
-  </p>
-{:else}
-  <div class="pt-3"></div>
-{/if}

package/src/lib/components/ui/Pagination.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let {
-    page,
-    totalPages,
-    onchange,
-    class: className,
-  }: {
-    page: number;
-    totalPages: number;
-    onchange?: (page: number) => void;
-    class?: string;
-  } = $props();
-
-  function go(p: number) {
-    if (p < 1 || p > totalPages) return;
-    onchange?.(p);
-  }
-
-  const visiblePages = $derived.by(() => {
-    const pages: (number | '...')[] = [];
-    if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      if (page > 3) pages.push('...');
-      for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
-        pages.push(i);
-      }
-      if (page < totalPages - 2) pages.push('...');
-      pages.push(totalPages);
-    }
-    return pages;
-  });
-</script>
-
-<nav
-  aria-label="Pagination"
-  class={cn('flex items-center gap-1', className)}
->
-  <button
-    type="button"
-    onclick={() => go(page - 1)}
-    disabled={page <= 1}
-    aria-label="Previous page"
-    class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
-  >
-    <ChevronLeft size={15} />
-  </button>
-
-  {#each visiblePages as p}
-    {#if p === '...'}
-      <span class="flex h-8 w-8 items-center justify-center text-[13px] text-muted-foreground">
-        …
-      </span>
-    {:else}
-      <button
-        type="button"
-        onclick={() => go(p)}
-        aria-label="Page {p}"
-        aria-current={p === page ? 'page' : undefined}
-        class={cn(
-          'inline-flex h-8 w-8 items-center justify-center rounded-md border text-[13px] font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
-          p === page
-            ? 'border-border bg-primary text-primary-foreground hover:bg-primary/90'
-            : 'border-transparent text-foreground',
-        )}
-      >
-        {p}
-      </button>
-    {/if}
-  {/each}
-
-  <button
-    type="button"
-    onclick={() => go(page + 1)}
-    disabled={page >= totalPages}
-    aria-label="Next page"
-    class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
-  >
-    <ChevronRight size={15} />
-  </button>
-</nav>

package/src/lib/components/ui/StatCard.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  let {
-    label,
-    value,
-    hint,
-  }: {
-    label: string;
-    value: string | number;
-    hint?: string;
-  } = $props();
-</script>
-
-<div class="rounded-xl border border-border bg-card p-4">
-  <div class="text-xl font-semibold tracking-tight tabular-nums text-foreground">{value}</div>
-  <div class="mt-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{label}</div>
-  {#if hint}
-    <div class="mt-1 text-[11px] text-muted-foreground/70">{hint}</div>
-  {/if}
-</div>

package/src/lib/components/ui/Timeline.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import {
-    Check,
-    X,
-    AlertTriangle,
-    Clock,
-    Loader2,
-  } from '@lucide/svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  type Status = 'success' | 'error' | 'warning' | 'pending' | 'running';
-
-  type TimelineItem = {
-    time?: string;
-    title: string;
-    description?: string;
-    icon?: any;
-    status?: Status;
-  };
-
-  let {
-    items,
-    class: className,
-  }: {
-    items: TimelineItem[];
-    class?: string;
-  } = $props();
-
-  const statusStyles: Record<Status, string> = {
-    success: 'border-green-500/40 bg-green-500/10 text-green-500',
-    error: 'border-destructive/40 bg-destructive/10 text-destructive',
-    warning: 'border-amber-500/40 bg-amber-500/10 text-amber-500',
-    pending: 'border-border bg-muted text-muted-foreground',
-    running: 'border-blue-500/40 bg-blue-500/10 text-blue-400',
-  };
-</script>
-
-<ol class={cn('flex flex-col', className)}>
-  {#each items as item, i}
-    {@const isLast = i === items.length - 1}
-    {@const status = item.status}
-    <li class="relative flex gap-4">
-      <!-- connector line -->
-      {#if !isLast}
-        <div class="absolute left-[15px] top-8 h-full w-px bg-border"></div>
-      {/if}
-
-      <!-- dot / icon -->
-      <div
-        class={cn(
-          'relative z-10 mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border',
-          status ? statusStyles[status] : 'border-border bg-muted text-muted-foreground',
-        )}
-      >
-        {#if item.icon}
-          {@const Icon = item.icon}
-          <Icon size={14} />
-        {:else if status === 'success'}
-          <Check size={14} />
-        {:else if status === 'error'}
-          <X size={14} />
-        {:else if status === 'warning'}
-          <AlertTriangle size={14} />
-        {:else if status === 'running'}
-          <Loader2 size={14} class="animate-spin" />
-        {:else}
-          <Clock size={14} />
-        {/if}
-      </div>
-
-      <!-- content -->
-      <div class={cn('min-w-0 flex-1 pb-6', isLast && 'pb-0')}>
-        <div class="flex items-baseline gap-2">
-          <span class="text-[13px] font-medium text-foreground">{item.title}</span>
-          {#if item.time}
-            <span class="shrink-0 text-[11px] text-muted-foreground">{item.time}</span>
-          {/if}
-        </div>
-        {#if item.description}
-          <p class="mt-0.5 text-[13px] text-muted-foreground">{item.description}</p>
-        {/if}
-      </div>
-    </li>
-  {/each}
-</ol>