@nucel/ui 0.3.0 → 0.10.0

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

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import type { Component, Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let {
-    variant = 'default',
-    title,
-    children,
-    icon: Icon,
-    class: className,
-  }: {
-    variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info';
-    title?: string;
-    children?: Snippet;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    icon?: any;
-    class?: string;
-  } = $props();
-
-  const variantClasses: Record<string, string> = {
-    default: 'border-border/60 bg-muted/40 text-foreground',
-    destructive: 'border-destructive/30 bg-destructive/10 text-destructive',
-    success: 'border-green-500/30 bg-green-500/10 text-green-600 dark:text-green-400',
-    warning: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-500',
-    info: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
-  };
-
-  const containerClass = $derived(
-    cn(
-      'flex items-start gap-3 rounded-md border px-4 py-3 text-sm',
-      variantClasses[variant],
-      className,
-    ),
-  );
-</script>
-
-<div class={containerClass} role="alert">
-  {#if Icon}
-    <Icon class="mt-0.5 h-4 w-4 shrink-0" />
-  {/if}
-  <div>
-    {#if title}
-      <p class="font-semibold">{title}</p>
-    {/if}
-    {@render children?.()}
-  </div>
-</div>

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

@@ -1,76 +0,0 @@
-<script lang="ts">
-  // Reusable card for a Nucel-App row. Used by:
-  //   - Settings/Developer/Apps/Index (developer's owned apps)
-  //   - Marketplace/Index (public apps)
-  //   - Org/InstalledApps (apps installed on an org)
-  //
-  // The data model is intentionally flat — callers pass exactly what
-  // they want rendered and slot any actions (Install, Suspend, Uninstall,
-  // ChevronRight, etc.) into the trailing `actions` snippet.
-  //
-  // `meta` and `subtitle` are optional secondary lines so each call site
-  // can attach its own context (e.g. "by @owner-org · published 5d ago"
-  // for marketplace; "installed as deploy-bot[bot] · 3h ago" for org).
-
-  import { Bot } from '@lucide/svelte';
-  import PermissionChips from './PermissionChips.svelte';
-  import type { Snippet } from 'svelte';
-
-  let {
-    name,
-    href,
-    icon_url = null,
-    subtitle = null,
-    meta = null,
-    permissions = null,
-    actions,
-    badges,
-  }: {
-    name: string;
-    href?: string;
-    icon_url?: string | null;
-    subtitle?: string | null;
-    meta?: Snippet | null;
-    permissions?: Record<string, string> | null;
-    actions?: Snippet;
-    badges?: Snippet;
-  } = $props();
-</script>
-
-<div class="flex items-start gap-3 px-4 py-4">
-  <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary/10 text-primary">
-    {#if icon_url}
-      <img src={icon_url} alt="" class="h-full w-full object-cover" />
-    {:else}
-      <Bot class="h-4 w-4" />
-    {/if}
-  </div>
-
-  <div class="min-w-0 flex-1">
-    <div class="flex items-center gap-2 flex-wrap">
-      {#if href}
-        <a class="text-sm font-medium text-foreground hover:text-primary hover:underline" {href}>{name}</a>
-      {:else}
-        <span class="text-sm font-medium text-foreground">{name}</span>
-      {/if}
-      {#if badges}{@render badges()}{/if}
-    </div>
-    {#if subtitle}
-      <p class="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
-    {/if}
-    {#if meta}
-      <div class="mt-1 text-[11px] text-muted-foreground">{@render meta()}</div>
-    {/if}
-    {#if permissions}
-      <div class="mt-2">
-        <PermissionChips {permissions} compact />
-      </div>
-    {/if}
-  </div>
-
-  {#if actions}
-    <div class="flex shrink-0 flex-col items-end gap-2">
-      {@render actions()}
-    </div>
-  {/if}
-</div>

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

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  let { sidebar, header, children }: { sidebar?: Snippet; header?: Snippet; children?: Snippet } = $props();
-</script>
-
-<div class="flex h-screen overflow-hidden bg-background">
-  {#if sidebar}{@render sidebar()}{/if}
-  <div class="flex flex-1 flex-col overflow-hidden">
-    {#if header}<header class="flex h-12 shrink-0 items-center border-b border-border bg-background px-4">{@render header()}</header>{/if}
-    <main class="flex-1 overflow-y-auto p-6">
-      {@render children?.()}
-    </main>
-  </div>
-</div>

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

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { GitBranch } from '@lucide/svelte';
-
-  let {
-    name,
-    size = 'sm',
-  }: {
-    name: string;
-    size?: 'xs' | 'sm';
-  } = $props();
-
-  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-md border border-border/60 bg-background font-mono text-foreground/80 {sizeCls}">
-  <GitBranch class={iconSize} />
-  {name}
-</span>

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

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import { MessageCircle } from '@lucide/svelte';
-
-  let { count }: { count: number } = $props();
-</script>
-
-{#if count > 0}
-  <div class="flex shrink-0 items-center gap-1 rounded-md border border-border/60 px-2 py-1 text-xs text-muted-foreground">
-    <MessageCircle class="h-3 w-3" />
-    <span>{count}</span>
-  </div>
-{/if}

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

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

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

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

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