@nucel/ui 0.2.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/Alert.test.ts

@@ -1,206 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import Alert from "./Alert.svelte";
-
-describe("Alert", () => {
-  it("renders without crashing", () => {
-    expect(() =>
-      render(Alert, { props: { children: (() => {}) as any } }),
-    ).not.toThrow();
-  });
-
-  it("renders a div with role=alert", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("[role=alert]")).not.toBeNull();
-  });
-
-  it("applies base flex classes", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("flex");
-    expect(el!.className).toContain("items-start");
-    expect(el!.className).toContain("rounded-md");
-    expect(el!.className).toContain("border");
-  });
-
-  it("applies default variant classes when no variant given", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("bg-muted/40");
-    expect(el!.className).toContain("text-foreground");
-  });
-
-  it("applies destructive variant classes", () => {
-    const { container } = render(Alert, {
-      props: { variant: "destructive", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("text-destructive");
-    expect(el!.className).toContain("bg-destructive/10");
-  });
-
-  it("applies success variant classes", () => {
-    const { container } = render(Alert, {
-      props: { variant: "success", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("bg-green-500/10");
-    expect(el!.className).toContain("text-green-600");
-  });
-
-  it("applies warning variant classes", () => {
-    const { container } = render(Alert, {
-      props: { variant: "warning", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("bg-yellow-500/10");
-    expect(el!.className).toContain("text-yellow-500");
-  });
-
-  it("applies info variant classes", () => {
-    const { container } = render(Alert, {
-      props: { variant: "info", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("bg-blue-500/10");
-    expect(el!.className).toContain("text-blue-400");
-  });
-
-  it("renders title text when title prop is provided", () => {
-    render(Alert, {
-      props: { title: "Heads up!", children: (() => {}) as any },
-    });
-    expect(screen.getByText("Heads up!")).toBeInTheDocument();
-  });
-
-  it("title element has font-semibold class", () => {
-    const { container } = render(Alert, {
-      props: { title: "My Title", children: (() => {}) as any },
-    });
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p!.className).toContain("font-semibold");
-  });
-
-  it("does not render a p element when title is not provided", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("p")).toBeNull();
-  });
-
-  it("merges extra class prop with base classes", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any, class: "my-extra-class" },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("my-extra-class");
-    expect(el!.className).toContain("rounded-md");
-  });
-
-  it("does not render an svg/icon when icon prop is not provided", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("svg")).toBeNull();
-  });
-
-  it("destructive variant has border-destructive/30 class", () => {
-    const { container } = render(Alert, {
-      props: { variant: "destructive", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("border-destructive/30");
-  });
-
-  it("info variant has border-blue-500/30 class", () => {
-    const { container } = render(Alert, {
-      props: { variant: "info", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("border-blue-500/30");
-  });
-
-  it("warning variant has border-yellow-500/30 class", () => {
-    const { container } = render(Alert, {
-      props: { variant: "warning", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("border-yellow-500/30");
-  });
-
-  it("success variant has border-green-500/30 class", () => {
-    const { container } = render(Alert, {
-      props: { variant: "success", children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("border-green-500/30");
-  });
-
-  it("default variant has border-border/60 class", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("border-border/60");
-  });
-
-  it("renders without crashing when neither children nor title given", () => {
-    expect(() => render(Alert, { props: {} })).not.toThrow();
-  });
-
-  it("root element tag is div", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.tagName.toLowerCase()).toBe("div");
-  });
-
-  it("root element has gap-3 class", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("gap-3");
-  });
-
-  it("root element has px-4 class", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("px-4");
-  });
-
-  it("root element has py-3 class", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("py-3");
-  });
-
-  it("root element has text-sm class", () => {
-    const { container } = render(Alert, {
-      props: { children: (() => {}) as any },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("text-sm");
-  });
-
-  it("does not lose variant classes when extra class is added", () => {
-    const { container } = render(Alert, {
-      props: { variant: "destructive", children: (() => {}) as any, class: "extra" },
-    });
-    const el = container.querySelector("[role=alert]");
-    expect(el!.className).toContain("text-destructive");
-    expect(el!.className).toContain("extra");
-  });
-});

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/BranchPill.test.ts

@@ -1,121 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import BranchPill from "./BranchPill.svelte";
-
-describe("BranchPill — rendering", () => {
-  it("renders the branch name", () => {
-    render(BranchPill, { props: { name: "main" } });
-    expect(screen.getByText("main")).toBeInTheDocument();
-  });
-
-  it("renders a different branch name", () => {
-    render(BranchPill, { props: { name: "feature/my-feature" } });
-    expect(screen.getByText("feature/my-feature")).toBeInTheDocument();
-  });
-
-  it("renders an svg element (git branch icon)", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("renders without crashing", () => {
-    expect(() => render(BranchPill, { props: { name: "develop" } })).not.toThrow();
-  });
-
-  it("root element is a span", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const el = container.firstElementChild;
-    expect(el?.tagName.toLowerCase()).toBe("span");
-  });
-});
-
-describe("BranchPill — classes", () => {
-  it("applies inline-flex class", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("inline-flex");
-  });
-
-  it("applies items-center class", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("items-center");
-  });
-
-  it("applies font-mono class", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("font-mono");
-  });
-
-  it("applies rounded-md class", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("rounded-md");
-  });
-
-  it("has border class", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("border");
-  });
-
-  it("size='sm' (default) applies text-[11px]", () => {
-    const { container } = render(BranchPill, { props: { name: "main" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("text-[11px]");
-  });
-
-  it("size='sm' applies px-2", () => {
-    const { container } = render(BranchPill, { props: { name: "main", size: "sm" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("px-2");
-  });
-
-  it("size='xs' applies text-[10px]", () => {
-    const { container } = render(BranchPill, { props: { name: "main", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("text-[10px]");
-  });
-
-  it("size='xs' applies px-1.5", () => {
-    const { container } = render(BranchPill, { props: { name: "main", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("px-1.5");
-  });
-
-  it("size='xs' does not apply text-[11px]", () => {
-    const { container } = render(BranchPill, { props: { name: "main", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span?.className).not.toContain("text-[11px]");
-  });
-
-  it("size='sm' does not apply text-[10px]", () => {
-    const { container } = render(BranchPill, { props: { name: "main", size: "sm" } });
-    const span = container.querySelector("span");
-    expect(span?.className).not.toContain("text-[10px]");
-  });
-});
-
-describe("BranchPill — edge cases", () => {
-  it("renders branch names with slashes", () => {
-    render(BranchPill, { props: { name: "feat/TICKET-123/add-auth" } });
-    expect(screen.getByText("feat/TICKET-123/add-auth")).toBeInTheDocument();
-  });
-
-  it("renders very long branch names", () => {
-    const longName = "feature/very-long-branch-name-that-is-quite-descriptive";
-    render(BranchPill, { props: { name: longName } });
-    expect(screen.getByText(longName)).toBeInTheDocument();
-  });
-
-  it("renders branch name with numbers", () => {
-    render(BranchPill, { props: { name: "release/1.2.3" } });
-    expect(screen.getByText("release/1.2.3")).toBeInTheDocument();
-  });
-
-  it("renders both xs and sm without throwing", () => {
-    expect(() => render(BranchPill, { props: { name: "main", size: "xs" } })).not.toThrow();
-    expect(() => render(BranchPill, { props: { name: "main", size: "sm" } })).not.toThrow();
-  });
-});

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/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>