@nucel/ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="overflow-hidden rounded-xl border border-border bg-card divide-y divide-border">
+  {@render children()}
+</div>

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

@@ -2,10 +2,10 @@
 	import { marked } from 'marked';
 	import DOMPurify from 'dompurify';
 
-	let { content }: { content: string } = $props();
+	let { content = '' }: { content?: string } = $props();
 
 	let html = $derived(
-		DOMPurify.sanitize(marked.parse(content, { gfm: true, breaks: false }) as string),
+		content ? DOMPurify.sanitize(marked.parse(content, { gfm: true, breaks: false }) as string) : '',
 	);
 </script>
 

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/NavItem.svelte

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

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    title,
+    subtitle,
+    actions,
+  }: {
+    title: string;
+    subtitle?: string;
+    actions?: Snippet;
+  } = $props();
+</script>
+
+<div class="mb-5 flex items-start justify-between gap-4">
+  <div class="min-w-0">
+    <h1 class="text-lg font-semibold tracking-tight text-foreground">{title}</h1>
+    {#if subtitle}
+      <p class="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
+    {/if}
+  </div>
+  {#if actions}
+    <div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+  {/if}
+</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/PermissionChips.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  // Compact permission chips for Nucel-App permission sets.
+  //
+  // Used by the marketplace card, installed-apps card, and the
+  // developer's per-app Show page. Filters out `none` automatically and
+  // sorts alphabetically so the visual order is stable across calls.
+  //
+  // `compact=true` (default) renders single-line `key:level` chips
+  // (used inside cards). `compact=false` renders a per-row list with
+  // primary-tinted level badges (used on the Show page).
+
+  let { permissions, compact = true }: {
+    permissions: Record<string, string> | null | undefined;
+    compact?: boolean;
+  } = $props();
+
+  const entries = $derived(
+    Object.entries(permissions ?? {})
+      .filter(([_, v]) => typeof v === 'string' && v !== 'none')
+      .sort(([a], [b]) => a.localeCompare(b)),
+  );
+</script>
+
+{#if entries.length === 0}
+  <span class="text-[11px] italic text-muted-foreground">No write access requested.</span>
+{:else if compact}
+  <div class="flex flex-wrap gap-1">
+    {#each entries as [key, level]}
+      <span class="rounded-md border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[11px]">
+        <code class="font-mono">{key}</code>:{level}
+      </span>
+    {/each}
+  </div>
+{:else}
+  <ul class="space-y-1.5">
+    {#each entries as [key, level]}
+      <li class="flex items-center justify-between gap-3 rounded-md border border-border/60 bg-muted/30 px-3 py-1.5 text-xs">
+        <code class="font-mono">{key}</code>
+        <span
+          class="rounded-md border px-1.5 py-0.5 text-[11px] {level === 'write' || level === 'admin'
+            ? 'border-primary/40 bg-primary/10 text-primary'
+            : 'border-border/60 bg-muted text-muted-foreground'}"
+        >
+          {level}
+        </span>
+      </li>
+    {/each}
+  </ul>
+{/if}

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn.js';
+
+  let {
+    title,
+    children,
+    class: className,
+  }: {
+    title?: string;
+    children?: Snippet;
+    class?: string;
+  } = $props();
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-5', className)}>
+  {#if title}
+    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
+  {/if}
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn.js';
+
+  let {
+    children,
+    class: className,
+  }: {
+    children: Snippet;
+    class?: string;
+  } = $props();
+</script>
+
+<h3 class={cn('mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground', className)}>
+  {@render children()}
+</h3>

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

@@ -3,7 +3,7 @@
 
 	let {
 		ref = $bindable(null),
-		data,
+		data = [] as number[],
 		color = 'stroke-primary',
 		fillColor = 'fill-primary/10',
 		width = 80,

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

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Check, X, Loader2, CircleSlash, Clock, AlertTriangle } from '@lucide/svelte';
+
+  type Status = 'success' | 'failure' | 'running' | 'pending' | 'cancelled' | 'warning';
+
+  let {
+    status,
+    label,
+    size = 'sm',
+  }: {
+    status: Status;
+    label?: string;
+    size?: 'xs' | 'sm';
+  } = $props();
+
+  const defaults: Record<Status, string> = {
+    success: 'passed',
+    failure: 'failed',
+    running: 'running',
+    pending: 'pending',
+    cancelled: 'cancelled',
+    warning: 'warning',
+  };
+
+  const styles: Record<Status, string> = {
+    success: 'border-green-500/30 bg-green-500/10 text-green-500',
+    failure: 'border-destructive/30 bg-destructive/10 text-destructive',
+    running: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+    pending: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-500',
+    cancelled: 'border-border/60 bg-muted text-muted-foreground',
+    warning: 'border-amber-500/30 bg-amber-500/10 text-amber-500',
+  };
+
+  let text = $derived(label ?? defaults[status]);
+  let sizeCls = $derived(size === 'xs' ? 'text-[10px] px-1.5 py-0.5' : 'text-[11px] px-2 py-0.5');
+  let iconSize = $derived(size === 'xs' ? 'h-2.5 w-2.5' : 'h-3 w-3');
+</script>
+
+<span class="inline-flex items-center gap-1 rounded-full border font-medium {sizeCls} {styles[status]}">
+  {#if status === 'success'}
+    <Check class={iconSize} />
+  {:else if status === 'failure'}
+    <X class={iconSize} />
+  {:else if status === 'running'}
+    <Loader2 class="{iconSize} animate-spin" />
+  {:else if status === 'cancelled'}
+    <CircleSlash class={iconSize} />
+  {:else if status === 'warning'}
+    <AlertTriangle class={iconSize} />
+  {:else}
+    <Clock class={iconSize} />
+  {/if}
+  {text}
+</span>

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>