@nucel/ui 0.10.0 → 0.12.0

package/README.md

@@ -217,9 +217,21 @@ bun run storybook
 # Install dependencies
 bun install
 
-# Run checks
+# Build = export-completeness guard + svelte-check (MUST pass before commit/publish)
+bun run build
+
+# Type-check only
 bun run check
 
+# Export-completeness guard standalone — fails if any component under
+# src/lib/components is not reachable from the barrel (src/lib/index.ts).
+# This prevents the regression class where a component silently drops out
+# of the public surface and breaks the consuming app's build.
+bun run check:exports
+
+# Run the unit/component test suite (Vitest + Testing Library)
+bun run test
+
 # Run linter
 bun run lint
 
@@ -230,6 +242,14 @@ bun run format
 bun run build-storybook
 ```
 
+### Adding a component
+
+When you add a `.svelte` component under `src/lib/components`, you **must** also
+export it from `src/lib/index.ts`. `bun run build` (and CI / `prepublishOnly`)
+run `check:exports`, which fails the build if any component file is not
+reachable from the barrel. If a file is intentionally internal, list it in the
+`IGNORE` set in `scripts/check-exports.mjs`.
+
 ## License
 
 MIT © Nucel Team

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nucel/ui",
-	"version": "0.10.0",
+	"version": "0.12.0",
 	"description": "A comprehensive Svelte 5 UI component library for Nucel projects",
 	"type": "module",
 	"svelte": "./src/lib/index.ts",
@@ -13,12 +13,15 @@
 	},
 	"files": [
 		"src/lib",
-		"src/styles.css"
+		"src/styles.css",
+		"!src/lib/**/*.test.ts",
+		"!src/lib/**/*.test.js"
 	],
 	"scripts": {
 		"dev": "vite",
-		"build": "svelte-check --tsconfig ./tsconfig.json",
+		"build": "node scripts/check-exports.mjs && svelte-check --tsconfig ./tsconfig.json",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:exports": "node scripts/check-exports.mjs",
 		"lint": "eslint .",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
@@ -26,7 +29,7 @@
 		"test:watch": "vitest",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
-		"prepublishOnly": "echo 'publishing @nucel/ui'"
+		"prepublishOnly": "node scripts/check-exports.mjs && echo 'publishing @nucel/ui'"
 	},
 	"repository": {
 		"type": "git",
@@ -46,6 +49,26 @@
 	"license": "MIT",
 	"dependencies": {
 		"@lucide/svelte": "^0.564.0",
+		"@tiptap/core": "^3.23.6",
+		"@tiptap/extension-character-count": "^3.23.6",
+		"@tiptap/extension-color": "^3.23.6",
+		"@tiptap/extension-highlight": "^3.23.6",
+		"@tiptap/extension-link": "^3.23.6",
+		"@tiptap/extension-mention": "^3.23.6",
+		"@tiptap/extension-placeholder": "^3.23.6",
+		"@tiptap/extension-subscript": "^3.23.6",
+		"@tiptap/extension-superscript": "^3.23.6",
+		"@tiptap/extension-table": "^3.23.6",
+		"@tiptap/extension-table-cell": "^3.23.6",
+		"@tiptap/extension-table-header": "^3.23.6",
+		"@tiptap/extension-table-row": "^3.23.6",
+		"@tiptap/extension-task-item": "^3.23.6",
+		"@tiptap/extension-task-list": "^3.23.6",
+		"@tiptap/extension-text-align": "^3.23.6",
+		"@tiptap/extension-text-style": "^3.23.6",
+		"@tiptap/extension-typography": "^3.23.6",
+		"@tiptap/extension-underline": "^3.23.6",
+		"@tiptap/starter-kit": "^3.23.6",
 		"bits-ui": "^2.16.1",
 		"clsx": "^2.1.1",
 		"dompurify": "^3.3.3",
@@ -54,7 +77,8 @@
 		"shiki": "^4.1.0",
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.5.0",
-		"tailwind-variants": "^3.2.2"
+		"tailwind-variants": "^3.2.2",
+		"tippy.js": "^6.3.7"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.39.2",

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { cn } from '../../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

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

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

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