@nucel/ui 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nucel/ui",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"description": "A comprehensive Svelte 5 UI component library for Nucel projects",
 	"type": "module",
 	"svelte": "./src/lib/index.ts",
@@ -13,6 +13,9 @@
 	},
 	"files": [
 		"src/lib",
+		"!src/**/*.test.ts",
+		"!src/**/*.spec.ts",
+		"!src/tests",
 		"src/styles.css"
 	],
 	"scripts": {
@@ -71,6 +74,7 @@
 		"clsx": "^2.1.1",
 		"dompurify": "^3.3.3",
 		"marked": "^17.0.5",
+		"shiki": "^4.0.2",
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2",

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

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

@@ -0,0 +1,43 @@
+<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/FilterBar.svelte

@@ -0,0 +1,63 @@
+<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/KanbanBoard.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Outer kanban container: a horizontally-scrollable row of columns plus
+  // an optional trailing slot for an "Add column" affordance.
+  //
+  // Composition: caller puts <KanbanColumn> elements (or anything else)
+  // into the default slot. DnD wiring stays out of this primitive — the
+  // consumer attaches dndzone to whichever container they want sortable.
+
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    trailing,
+  }: {
+    children: Snippet;
+    trailing?: Snippet;
+  } = $props();
+</script>
+
+<div class="flex items-start gap-3 overflow-x-auto pb-4">
+  {@render children()}
+  {#if trailing}
+    <div class="w-72 flex-shrink-0">
+      {@render trailing()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  // Minimal card for a kanban column. Title is required; body is optional
+  // single-paragraph supplementary text. `onDelete` adds a hover-revealed
+  // X button. `extra` is a snippet for arbitrary chrome (badges, avatars,
+  // etc.) under the body.
+
+  import { X } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    title,
+    body = null,
+    onDelete,
+    extra,
+  }: {
+    title: string;
+    body?: string | null;
+    onDelete?: () => void;
+    extra?: Snippet;
+  } = $props();
+</script>
+
+<div class="group rounded-md border border-border bg-background p-2.5 text-sm shadow-sm">
+  <div class="flex items-start justify-between gap-1">
+    <span class="leading-snug">{title}</span>
+    {#if onDelete}
+      <button
+        type="button"
+        aria-label="Delete card"
+        class="opacity-0 transition-opacity group-hover:opacity-100"
+        onclick={onDelete}
+      >
+        <X class="h-3 w-3 text-muted-foreground hover:text-destructive" />
+      </button>
+    {/if}
+  </div>
+  {#if body}
+    <p class="mt-1 line-clamp-2 text-xs text-muted-foreground">{body}</p>
+  {/if}
+  {#if extra}
+    <div class="mt-1.5">{@render extra()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  // A single kanban column: header (title + count + optional delete),
+  // a body snippet for cards (where the caller attaches a dndzone), and
+  // a footer snippet for the per-column "Add card" affordance.
+
+  import { X } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    name,
+    count,
+    onDelete,
+    body,
+    footer,
+  }: {
+    name: string;
+    count: number;
+    /** When provided, renders a small delete-X in the header. */
+    onDelete?: () => void;
+    /** Sortable body — caller drops their dndzone-decorated container here. */
+    body: Snippet;
+    /** Optional footer (e.g. "+ Add card"). */
+    footer?: Snippet;
+  } = $props();
+</script>
+
+<div class="w-72 flex-shrink-0 rounded-lg bg-muted/50 p-3">
+  <div class="mb-2 flex items-center justify-between">
+    <h3 class="text-sm font-semibold">{name}</h3>
+    <div class="flex items-center gap-1">
+      <span class="rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+        {count}
+      </span>
+      {#if onDelete}
+        <button
+          type="button"
+          aria-label={`Delete column ${name}`}
+          class="rounded p-0.5 text-muted-foreground hover:bg-background hover:text-destructive"
+          onclick={onDelete}
+        >
+          <X class="h-3 w-3" />
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  {@render body()}
+
+  {#if footer}
+    {@render footer()}
+  {/if}
+</div>

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

@@ -0,0 +1,79 @@
+<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/Pagination.svelte

@@ -0,0 +1,85 @@
+<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/Timeline.svelte

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

package/src/lib/index.ts

@@ -287,6 +287,13 @@ export { default as PermissionChips } from './components/ui/PermissionChips.svel
 // AppCard — Nucel-App row card (marketplace, installed apps, owned apps)
 export { default as AppCard } from './components/ui/AppCard.svelte';
 
+// Kanban primitives — generic Trello-style column/card chrome.
+// DnD wiring stays out: the consumer attaches svelte-dnd-action's
+// `dndzone` to whichever container they want sortable.
+export { default as KanbanBoard } from './components/ui/KanbanBoard.svelte';
+export { default as KanbanColumn } from './components/ui/KanbanColumn.svelte';
+export { default as KanbanCard } from './components/ui/KanbanCard.svelte';
+
 // Section
 export { default as Section } from './components/ui/Section.svelte';
 
@@ -301,3 +308,21 @@ export { default as AppShell } from './components/ui/AppShell.svelte';
 export { default as AppSidebar } from './components/ui/AppSidebar.svelte';
 export { default as NavItem } from './components/ui/NavItem.svelte';
 export { default as NavSection } from './components/ui/NavSection.svelte';
+
+// CopyButton
+export { default as CopyButton } from './components/ui/CopyButton.svelte';
+
+// Pagination
+export { default as Pagination } from './components/ui/Pagination.svelte';
+
+// CodeBlock
+export { default as CodeBlock } from './components/ui/CodeBlock.svelte';
+
+// Timeline
+export { default as Timeline } from './components/ui/Timeline.svelte';
+
+// FilterBar
+export { default as FilterBar } from './components/ui/FilterBar.svelte';
+
+// MetricCard
+export { default as MetricCard } from './components/ui/MetricCard.svelte';