@nucel/ui 0.2.0 → 0.10.0

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

@@ -1,41 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import FormField from "./FormField.svelte";
-
-describe("FormField", () => {
-  it("renders children (wrapper div is present)", () => {
-    const { container } = render(FormField, { props: {} });
-    expect(container.querySelector("div")).not.toBeNull();
-  });
-
-  it("renders label when label prop is given", () => {
-    render(FormField, { props: { label: "Username" } });
-    expect(screen.getByText("Username")).toBeInTheDocument();
-  });
-
-  it("does NOT render a label element when label prop is absent", () => {
-    const { container } = render(FormField, { props: {} });
-    expect(container.querySelector("label")).toBeNull();
-  });
-
-  it("renders error text when error prop is given", () => {
-    render(FormField, { props: { error: "This field is required" } });
-    expect(screen.getByText("This field is required")).toBeInTheDocument();
-  });
-
-  it("renders hint text when hint prop is given and error is absent", () => {
-    render(FormField, { props: { hint: "Must be between 3–20 characters" } });
-    expect(screen.getByText("Must be between 3–20 characters")).toBeInTheDocument();
-  });
-
-  it("does NOT render hint when error is also given", () => {
-    render(FormField, {
-      props: {
-        hint: "Some hint",
-        error: "Some error",
-      },
-    });
-    expect(screen.queryByText("Some hint")).toBeNull();
-    expect(screen.getByText("Some error")).toBeInTheDocument();
-  });
-});

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>

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

@@ -1,25 +0,0 @@
-<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/PageHeader.test.ts

@@ -1,72 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import PageHeader from "./PageHeader.svelte";
-
-describe("PageHeader", () => {
-  it("renders the title", () => {
-    render(PageHeader, { props: { title: "Repositories" } });
-    expect(screen.getByText("Repositories")).toBeInTheDocument();
-  });
-
-  it("title is rendered as an h1 element", () => {
-    render(PageHeader, { props: { title: "Repositories" } });
-    const h1 = screen.getByRole("heading", { level: 1 });
-    expect(h1).toBeInTheDocument();
-    expect(h1.textContent).toBe("Repositories");
-  });
-
-  it("renders the subtitle when provided", () => {
-    render(PageHeader, { props: { title: "Repositories", subtitle: "All repositories" } });
-    expect(screen.getByText("All repositories")).toBeInTheDocument();
-  });
-
-  it("does not render a subtitle element when subtitle is not given", () => {
-    render(PageHeader, { props: { title: "Repositories" } });
-    expect(screen.queryByText("All repositories")).not.toBeInTheDocument();
-  });
-
-  it("subtitle is rendered as a paragraph element", () => {
-    const { container } = render(PageHeader, {
-      props: { title: "Repositories", subtitle: "Some subtitle" },
-    });
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p!.textContent).toBe("Some subtitle");
-  });
-
-  it("does not render a paragraph element when subtitle is absent", () => {
-    const { container } = render(PageHeader, { props: { title: "Only Title" } });
-    expect(container.querySelector("p")).toBeNull();
-  });
-
-  it("renders different title text correctly", () => {
-    render(PageHeader, { props: { title: "Issues" } });
-    expect(screen.getByText("Issues")).toBeInTheDocument();
-  });
-
-  it("renders without crashing when only title is provided", () => {
-    expect(() =>
-      render(PageHeader, { props: { title: "Test" } }),
-    ).not.toThrow();
-  });
-
-  it("renders without crashing when title and subtitle are provided", () => {
-    expect(() =>
-      render(PageHeader, { props: { title: "Test", subtitle: "A subtitle" } }),
-    ).not.toThrow();
-  });
-
-  it("h1 has tracking-tight class", () => {
-    const { container } = render(PageHeader, { props: { title: "Test" } });
-    const h1 = container.querySelector("h1");
-    expect(h1!.className).toContain("tracking-tight");
-  });
-
-  it("subtitle paragraph has text-muted-foreground class", () => {
-    const { container } = render(PageHeader, {
-      props: { title: "Test", subtitle: "Sub" },
-    });
-    const p = container.querySelector("p");
-    expect(p!.className).toContain("text-muted-foreground");
-  });
-});

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

@@ -1,49 +0,0 @@
-<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/ProgressRing.test.ts

@@ -1,239 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/svelte";
-import ProgressRing from "./ProgressRing.svelte";
-
-describe("ProgressRing — rendering", () => {
-  it("renders nothing when limit === 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 0 } });
-    expect(container.querySelector("svg")).toBeNull();
-    expect(container.querySelector("span")).toBeNull();
-  });
-
-  it("renders an SVG when limit > 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("renders a span wrapper when limit > 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 10, limit: 100 } });
-    expect(container.querySelector("span")).not.toBeNull();
-  });
-
-  it("renders two circle elements inside the SVG", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    expect(container.querySelectorAll("circle").length).toBe(2);
-  });
-
-  it("renders nothing when both spent and limit are 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 0, limit: 0 } });
-    expect(container.querySelector("svg")).toBeNull();
-  });
-
-  it("renders when spent > limit (clamped to 1)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 200, limit: 100 } });
-    expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("renders without crashing for fractional values", () => {
-    expect(() =>
-      render(ProgressRing, { props: { spent: 33.33, limit: 100 } }),
-    ).not.toThrow();
-  });
-});
-
-describe("ProgressRing — title attribute", () => {
-  it("title contains the percentage for 25%", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("25%");
-  });
-
-  it("title contains the percentage for 50%", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("50%");
-  });
-
-  it("title contains the percentage for 80%", () => {
-    const { container } = render(ProgressRing, { props: { spent: 80, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("80%");
-  });
-
-  it("title contains the percentage for 100% when spent === limit", () => {
-    const { container } = render(ProgressRing, { props: { spent: 100, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("100%");
-  });
-
-  it("title contains the spent value formatted with 2 decimal places", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("25.00");
-  });
-
-  it("title contains the limit value formatted with 2 decimal places", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("100.00");
-  });
-
-  it("title contains '$' signs for spent and limit", () => {
-    const { container } = render(ProgressRing, { props: { spent: 10, limit: 50 } });
-    const span = container.querySelector("span");
-    const title = span?.getAttribute("title") ?? "";
-    expect(title.match(/\$/g)?.length).toBeGreaterThanOrEqual(2);
-  });
-});
-
-describe("ProgressRing — color derivation", () => {
-  it("uses stroke-success class when pct < 0.5 (0%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 0, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasSuccess = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success"),
-    );
-    expect(hasSuccess).toBe(true);
-  });
-
-  it("uses stroke-success class when pct < 0.5 (25%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasSuccess = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success"),
-    );
-    expect(hasSuccess).toBe(true);
-  });
-
-  it("uses stroke-warning class when pct is 0.5 (exactly 50%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasWarning = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-warning"),
-    );
-    expect(hasWarning).toBe(true);
-  });
-
-  it("uses stroke-warning class when pct is 0.79 (79%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 79, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasWarning = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-warning"),
-    );
-    expect(hasWarning).toBe(true);
-  });
-
-  it("uses stroke-destructive class when pct is 0.8 (exactly 80%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 80, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-
-  it("uses stroke-destructive class when pct is 1.0 (100%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 100, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-
-  it("uses stroke-destructive class when spent > limit (clamped to 100%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 150, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-});
-
-describe("ProgressRing — bgColor derivation", () => {
-  it("uses stroke-success/20 bg class when pct < 0.5", () => {
-    const { container } = render(ProgressRing, { props: { spent: 10, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasBg = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success/20"),
-    );
-    expect(hasBg).toBe(true);
-  });
-
-  it("uses stroke-warning/20 bg class when pct is in warning range", () => {
-    const { container } = render(ProgressRing, { props: { spent: 65, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasBg = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-warning/20"),
-    );
-    expect(hasBg).toBe(true);
-  });
-
-  it("uses stroke-destructive/20 bg class when pct >= 0.8", () => {
-    const { container } = render(ProgressRing, { props: { spent: 90, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasBg = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive/20"),
-    );
-    expect(hasBg).toBe(true);
-  });
-});
-
-describe("ProgressRing — size and SVG attributes", () => {
-  it("SVG has correct width and height for default size (16)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const svg = container.querySelector("svg");
-    expect(svg?.getAttribute("width")).toBe("16");
-    expect(svg?.getAttribute("height")).toBe("16");
-  });
-
-  it("SVG has correct width for custom size", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100, size: 40 } });
-    const svg = container.querySelector("svg");
-    expect(svg?.getAttribute("width")).toBe("40");
-    expect(svg?.getAttribute("height")).toBe("40");
-  });
-
-  it("SVG has -rotate-90 class", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const svg = container.querySelector("svg");
-    // SVG elements use SVGAnimatedString for className — use getAttribute instead
-    expect(svg?.getAttribute("class")).toContain("-rotate-90");
-  });
-
-  it("applies custom class to span wrapper", () => {
-    const { container } = render(ProgressRing, {
-      props: { spent: 50, limit: 100, class: "my-ring-class" },
-    });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("my-ring-class");
-  });
-});
-
-describe("ProgressRing — pct calculation", () => {
-  it("pct is 0 when limit === 0 (no SVG rendered)", () => {
-    // The component renders nothing when limit === 0 because pct would be 0
-    const { container } = render(ProgressRing, { props: { spent: 100, limit: 0 } });
-    expect(container.querySelector("svg")).toBeNull();
-  });
-
-  it("pct is clamped to 1 when spent > limit", () => {
-    // At 100% the destructive color should be used
-    const { container } = render(ProgressRing, { props: { spent: 999, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-
-  it("pct is 0 when spent === 0 (success color)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 0, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasSuccess = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success"),
-    );
-    expect(hasSuccess).toBe(true);
-  });
-});

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

@@ -1,21 +0,0 @@
-<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/Section.test.ts

@@ -1,44 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/svelte";
-import Section from "./Section.svelte";
-
-describe("Section", () => {
-  it("renders a container div", () => {
-    const { container } = render(Section, { props: {} });
-    expect(container.querySelector("div")).not.toBeNull();
-  });
-
-  it("renders the title when given", () => {
-    const { container } = render(Section, {
-      props: { title: "My Section" },
-    });
-    const h3 = container.querySelector("h3");
-    expect(h3).not.toBeNull();
-    expect(h3!.textContent).toBe("My Section");
-  });
-
-  it("does NOT render an h3 when no title is given", () => {
-    const { container } = render(Section, {
-      props: {},
-    });
-    expect(container.querySelector("h3")).toBeNull();
-  });
-
-  it("the h3 has the uppercase class", () => {
-    const { container } = render(Section, {
-      props: { title: "Settings" },
-    });
-    const h3 = container.querySelector("h3");
-    expect(h3).not.toBeNull();
-    expect(h3!.className).toContain("uppercase");
-  });
-
-  it("extra class prop is merged into the container div", () => {
-    const { container } = render(Section, {
-      props: { class: "my-extra-class" },
-    });
-    const div = container.querySelector("div");
-    expect(div).not.toBeNull();
-    expect(div!.className).toContain("my-extra-class");
-  });
-});

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

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