@nucel/ui 0.10.0 → 0.12.0

package/src/lib/components/ui/editor/mention-suggestion.ts

@@ -0,0 +1,144 @@
+import tippy, { type Instance, type Props as TippyProps } from 'tippy.js';
+
+export type MentionItem = {
+  id: string;
+  label: string;
+  type?: 'user' | 'team';
+  slug?: string;
+  avatar_url?: string;
+  sublabel?: string;
+};
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function getInitials(name: string): string {
+  return name.split(' ').map(p => p.charAt(0)).join('').toUpperCase().slice(0, 2);
+}
+
+function createDropdown(props: { items: MentionItem[]; command: (item: MentionItem) => void }) {
+  const el = document.createElement('div');
+  el.className = 'mention-list';
+  let selectedIndex = 0;
+  let items = props.items;
+  let command = props.command;
+
+  function render() {
+    if (items.length === 0) {
+      el.innerHTML = `<div class="mention-list-empty">No results</div>`;
+      return;
+    }
+    if (items.length === 1 && (items[0] as any).type === 'hint') {
+      el.innerHTML = `<div class="mention-list-empty">${escapeHtml(items[0].label)}</div>`;
+      return;
+    }
+    el.innerHTML = items.map((item, i) => `
+      <button type="button" class="mention-list-item ${i === selectedIndex ? 'is-selected' : ''}" data-index="${i}">
+        ${item.avatar_url
+          ? `<img src="${escapeHtml(item.avatar_url)}" alt="" class="mention-avatar" />`
+          : `<span class="mention-avatar-fallback">${getInitials(item.label)}</span>`
+        }
+        <span class="mention-info">
+          <span class="mention-label">${escapeHtml(item.label)}</span>
+          ${item.sublabel ? `<span class="mention-sublabel">${escapeHtml(item.sublabel)}</span>` : ''}
+        </span>
+        ${item.type === 'team' ? `<span class="mention-badge">Team</span>` : ''}
+      </button>
+    `).join('');
+
+    el.querySelectorAll('.mention-list-item').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const idx = parseInt((btn as HTMLElement).dataset.index ?? '0');
+        select(idx);
+      });
+    });
+  }
+
+  function select(idx: number) {
+    const item = items[idx];
+    if (item) command(item);
+  }
+
+  function updateSelection(idx: number) {
+    selectedIndex = ((idx % items.length) + items.length) % items.length;
+    render();
+  }
+
+  render();
+
+  return {
+    el,
+    update(newItems: MentionItem[], newCommand: (item: MentionItem) => void) {
+      items = newItems;
+      command = newCommand;
+      selectedIndex = 0;
+      render();
+    },
+    onKeyDown(key: string): boolean {
+      if (key === 'ArrowUp') { updateSelection(selectedIndex - 1); return true; }
+      if (key === 'ArrowDown') { updateSelection(selectedIndex + 1); return true; }
+      if (key === 'Enter') { select(selectedIndex); return true; }
+      return false;
+    },
+  };
+}
+
+export function createMentionSuggestion(mentionsUrl: string) {
+  return {
+    char: '@',
+    allowSpaces: false,
+    items: async ({ query }: { query: string }): Promise<MentionItem[]> => {
+      if (!query || query.length < 1) {
+        return [{ id: 'hint', label: 'Type to search users…', type: 'user' } as any];
+      }
+      try {
+        const sep = mentionsUrl.includes('?') ? '&' : '?';
+        const res = await fetch(`${mentionsUrl}${sep}query=${encodeURIComponent(query)}`, {
+          headers: { Accept: 'application/json' },
+        });
+        if (!res.ok) return [];
+        const data = await res.json();
+        return Array.isArray(data.suggestions) ? data.suggestions : [];
+      } catch {
+        return [];
+      }
+    },
+    render: () => {
+      let dropdown: ReturnType<typeof createDropdown>;
+      let popup: Instance<TippyProps>[];
+
+      return {
+        onStart(props: any) {
+          dropdown = createDropdown({ items: props.items, command: (item) => props.command({ id: item.id, label: item.label, type: item.type, slug: item.slug }) });
+          if (!props.clientRect) return;
+          popup = tippy('body', {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: dropdown.el,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+          }) as Instance<TippyProps>[];
+        },
+        onUpdate(props: any) {
+          dropdown.update(props.items, (item) => props.command({ id: item.id, label: item.label, type: item.type, slug: item.slug }));
+          if (props.clientRect && popup?.[0]) {
+            popup[0].setProps({ getReferenceClientRect: props.clientRect });
+          }
+        },
+        onKeyDown(props: any) {
+          if (props.event.key === 'Escape') { popup?.[0]?.hide(); return true; }
+          return dropdown.onKeyDown(props.event.key);
+        },
+        onExit() {
+          popup?.[0]?.destroy();
+          dropdown.el.remove();
+        },
+      };
+    },
+  };
+}

package/src/lib/components/ui/table/Table.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+
+<div class={cn("w-full overflow-auto", className)}>
+  <table class="w-full caption-bottom text-sm">
+    {@render children()}
+  </table>
+</div>

package/src/lib/components/ui/table/TableBody.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+
+<tbody class={cn("[&_tr:last-child]:border-0", className)}>
+  {@render children()}
+</tbody>

package/src/lib/components/ui/table/TableCaption.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+
+<caption class={cn("mt-4 text-xs text-muted-foreground", className)}>
+  {@render children()}
+</caption>

package/src/lib/components/ui/table/TableCell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className, ...rest }: { children?: Snippet; class?: string; [key: string]: unknown } = $props();
+</script>
+
+<td class={cn("px-4 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)} {...rest}>
+  {@render children?.()}
+</td>

package/src/lib/components/ui/table/TableHead.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className, ...rest }: { children?: Snippet; class?: string; [key: string]: unknown } = $props();
+</script>
+
+<th class={cn("h-9 px-4 text-left align-middle text-[10px] font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...rest}>
+  {@render children?.()}
+</th>

package/src/lib/components/ui/table/TableHeader.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+
+<thead class={cn("[&_tr]:border-b [&_tr]:border-border", className)}>
+  {@render children()}
+</thead>

package/src/lib/components/ui/table/TableRow.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../../utils/cn.js';
+
+  let { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+
+<tr class={cn("border-b border-border transition-colors hover:bg-accent/50 data-[state=selected]:bg-accent", className)}>
+  {@render children()}
+</tr>

package/src/lib/components/ui/table/index.ts

@@ -0,0 +1,7 @@
+export { default as Table } from './Table.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableCell } from './TableCell.svelte';
+export { default as TableCaption } from './TableCaption.svelte';

package/src/lib/index.ts

@@ -376,3 +376,53 @@ export {
 // ColorInput — styled native <input type="color"> wrapper matching the
 // form-control border/ring/focus tokens. Optional `showValue` hex readout.
 export { default as ColorInput } from './components/ColorInput.svelte';
+
+// ---- 0.11.0 additions (restored components) ----
+//
+// These components were part of the export surface in earlier releases but
+// were dropped from the 0.10.0 barrel. The nucel app still imports them, so a
+// clean `bun install --frozen-lockfile` against 0.10.0 broke the build. They
+// are restored here against the package's shared-component conventions.
+
+// Alert — inline notice banner (info/success/warning/error variants).
+export { default as Alert } from './components/ui/Alert.svelte';
+
+// Section + SectionTitle — page section wrapper + heading.
+export { default as Section } from './components/ui/Section.svelte';
+export { default as SectionTitle } from './components/ui/SectionTitle.svelte';
+
+// PageHeader — page title + actions header row.
+export { default as PageHeader } from './components/ui/PageHeader.svelte';
+
+// ListCard — bordered list-item card row.
+export { default as ListCard } from './components/ui/ListCard.svelte';
+
+// Pills — compact status/branch/comment chips.
+export { default as StatusPill } from './components/ui/StatusPill.svelte';
+export { default as BranchPill } from './components/ui/BranchPill.svelte';
+export { default as CommentPill } from './components/ui/CommentPill.svelte';
+
+// PermissionChips — permission/scope chip group.
+export { default as PermissionChips } from './components/ui/PermissionChips.svelte';
+
+// AppCard — app/repo summary card.
+export { default as AppCard } from './components/ui/AppCard.svelte';
+
+// Kanban — board / column / card composites.
+export { default as KanbanBoard } from './components/ui/KanbanBoard.svelte';
+export { default as KanbanColumn } from './components/ui/KanbanColumn.svelte';
+export { default as KanbanCard } from './components/ui/KanbanCard.svelte';
+
+// RichEditor — Tiptap-powered rich text editor (wiki/issues/PR comments).
+export { default as RichEditor } from './components/ui/editor/RichEditor.svelte';
+
+// Table — shadcn-styled table primitives.
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableRow,
+	TableHead,
+	TableCell,
+	TableCaption,
+} from './components/ui/table/index.js';

package/src/lib/components/ColorInput.test.ts

@@ -1,126 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import ColorInput from './ColorInput.svelte';
-
-/** Grab the native color input from a rendered ColorInput. */
-function getColorInput(container: HTMLElement): HTMLInputElement {
-	return container.querySelector('input[type="color"]') as HTMLInputElement;
-}
-
-describe('ColorInput', () => {
-	it('renders a native <input type="color"> inside the color-input slot', () => {
-		const { container } = render(ColorInput, { props: { value: '#3b82f6' } });
-		const wrapper = container.querySelector('[data-slot="color-input"]');
-		expect(wrapper).toBeInTheDocument();
-		const input = getColorInput(container);
-		expect(input).toBeInTheDocument();
-		expect(input.type).toBe('color');
-	});
-
-	it('reflects the initial value on the input', () => {
-		const { container } = render(ColorInput, { props: { value: '#22c55e' } });
-		expect(getColorInput(container).value).toBe('#22c55e');
-	});
-
-	it('defaults to #000000 when no value is supplied', () => {
-		const { container } = render(ColorInput, { props: {} });
-		expect(getColorInput(container).value).toBe('#000000');
-	});
-
-	it('does not show the hex value by default', () => {
-		const { container } = render(ColorInput, { props: { value: '#abcdef' } });
-		const wrapper = container.querySelector('[data-slot="color-input"]')!;
-		// Only the <input> child, no trailing text span.
-		expect(wrapper.querySelectorAll('span').length).toBe(0);
-	});
-
-	it('shows the hex value (uppercased via class) when showValue is set', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#abcdef', showValue: true },
-		});
-		const wrapper = container.querySelector('[data-slot="color-input"]')!;
-		const valueSpan = wrapper.querySelector('span');
-		expect(valueSpan).toBeInTheDocument();
-		expect(valueSpan).toHaveTextContent('#abcdef');
-		expect(valueSpan?.className).toContain('uppercase');
-		expect(valueSpan?.className).toContain('font-mono');
-	});
-
-	it('updates the displayed hex value when the input changes', async () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', showValue: true },
-		});
-		const input = getColorInput(container);
-
-		input.value = '#ff8800';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		await tick();
-
-		const valueSpan = container.querySelector('[data-slot="color-input"] span');
-		expect(valueSpan).toHaveTextContent('#ff8800');
-	});
-
-	it('propagates an input change through the two-way bound value', async () => {
-		// `bind:value` drives the `showValue` span; if the bound value updates
-		// on input, the rendered hex text reflects the new colour.
-		const { container } = render(ColorInput, {
-			props: { value: '#111111', showValue: true },
-		});
-		const input = getColorInput(container);
-
-		input.value = '#00ff00';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		await tick();
-
-		expect(input.value).toBe('#00ff00');
-		expect(container.querySelector('[data-slot="color-input"] span')).toHaveTextContent(
-			'#00ff00',
-		);
-	});
-
-	it('emits a change event consumers can listen to', async () => {
-		const onchange = vi.fn();
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', onchange },
-		});
-		const input = getColorInput(container);
-
-		input.value = '#123456';
-		input.dispatchEvent(new Event('change', { bubbles: true }));
-		await tick();
-
-		expect(onchange).toHaveBeenCalledOnce();
-	});
-
-	it('forwards the disabled attribute to the native input', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#ef4444', disabled: true },
-		});
-		expect(getColorInput(container)).toBeDisabled();
-	});
-
-	it('merges a custom class onto the input', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', class: 'my-swatch' },
-		});
-		const input = getColorInput(container);
-		expect(input.className).toContain('my-swatch');
-		// Base styling is preserved.
-		expect(input.className).toContain('rounded-md');
-	});
-
-	it('honours a custom data-slot', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', 'data-slot': 'theme-color' },
-		});
-		expect(container.querySelector('[data-slot="theme-color"]')).toBeInTheDocument();
-	});
-
-	it('forwards arbitrary props (e.g. aria-label) to the input', () => {
-		const { getByLabelText } = render(ColorInput, {
-			props: { value: '#000000', 'aria-label': 'Pick a label colour' },
-		});
-		expect(getByLabelText('Pick a label colour')).toBeInTheDocument();
-	});
-});

package/src/lib/components/CopyButton.test.ts

@@ -1,213 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import CopyButton from './CopyButton.svelte';
-
-/**
- * Install a mock `navigator.clipboard.writeText`. jsdom does not provide a
- * working clipboard, so we define it ourselves. Returns the spy.
- */
-function mockClipboard(impl?: (text: string) => Promise<void>) {
-	const writeText = vi.fn(impl ?? (() => Promise.resolve()));
-	Object.defineProperty(navigator, 'clipboard', {
-		value: { writeText },
-		configurable: true,
-		writable: true,
-	});
-	return writeText;
-}
-
-describe('CopyButton', () => {
-	beforeEach(() => {
-		vi.useFakeTimers();
-	});
-
-	afterEach(() => {
-		vi.runOnlyPendingTimers();
-		vi.useRealTimers();
-		vi.restoreAllMocks();
-	});
-
-	it('writes the value to the clipboard on click', async () => {
-		const writeText = mockClipboard();
-		const { getByRole } = render(CopyButton, { props: { value: 'hello-world' } });
-
-		await getByRole('button').click();
-		await tick();
-
-		expect(writeText).toHaveBeenCalledOnce();
-		expect(writeText).toHaveBeenCalledWith('hello-world');
-	});
-
-	it('shows the copied state after a successful copy and reverts after timeout', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 2000 },
-		});
-		const btn = getByRole('button');
-
-		expect(btn).toHaveTextContent('Copy');
-		expect(btn).not.toHaveAttribute('data-copied');
-
-		await btn.click();
-		await tick();
-
-		expect(btn).toHaveTextContent('Copied');
-		expect(btn).toHaveAttribute('data-copied');
-
-		// Advance past the timeout — state reverts.
-		vi.advanceTimersByTime(2000);
-		await tick();
-
-		expect(btn).toHaveTextContent('Copy');
-		expect(btn).not.toHaveAttribute('data-copied');
-	});
-
-	it('respects a custom timeout before reverting', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 5000 },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// Not yet elapsed at 2s.
-		vi.advanceTimersByTime(2000);
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// Elapsed at 5s total.
-		vi.advanceTimersByTime(3000);
-		await tick();
-		expect(btn).toHaveTextContent('Copy');
-	});
-
-	it('renders a visible label by default', () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, { props: { value: 'x' } });
-		expect(getByRole('button')).toHaveTextContent('Copy');
-	});
-
-	it('renders icon-only (no text) when label is false, exposing an aria-label', () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, { props: { value: 'x', label: false } });
-		const btn = getByRole('button');
-		// No visible "Copy" text node; accessible name comes from aria-label.
-		expect(btn).toHaveAttribute('aria-label', 'Copy');
-		expect(btn.querySelector('span')).toBeNull();
-	});
-
-	it('updates the icon-only aria-label to the copied label after copying', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: false, copiedLabel: 'Copied' },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-
-		expect(btn).toHaveAttribute('aria-label', 'Copied');
-	});
-
-	it('fires the onCopy callback with the value after a successful copy', async () => {
-		mockClipboard();
-		const onCopy = vi.fn();
-		const { getByRole } = render(CopyButton, { props: { value: 'token-123', onCopy } });
-
-		await getByRole('button').click();
-		await tick();
-
-		expect(onCopy).toHaveBeenCalledOnce();
-		expect(onCopy).toHaveBeenCalledWith('token-123');
-	});
-
-	it('fires onError and does NOT enter copied state when the write rejects', async () => {
-		const boom = new Error('permission denied');
-		mockClipboard(() => Promise.reject(boom));
-		const onError = vi.fn();
-		const onCopy = vi.fn();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', onError, onCopy },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-
-		expect(onError).toHaveBeenCalledOnce();
-		expect(onError).toHaveBeenCalledWith(boom);
-		expect(onCopy).not.toHaveBeenCalled();
-		expect(btn).not.toHaveAttribute('data-copied');
-		expect(btn).toHaveTextContent('Copy');
-	});
-
-	it('hides the icon when hideIcon is set', () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', hideIcon: true },
-		});
-		const btn = getByRole('button');
-		expect(btn.querySelector('svg')).toBeNull();
-		expect(btn).toHaveTextContent('Copy');
-	});
-
-	it('renders custom label and copiedLabel text', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy URL', copiedLabel: 'Copied URL!' },
-		});
-		const btn = getByRole('button');
-		expect(btn).toHaveTextContent('Copy URL');
-
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied URL!');
-	});
-
-	it('does not copy or change state when disabled', async () => {
-		const writeText = mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', disabled: true },
-		});
-		const btn = getByRole('button');
-		expect(btn).toBeDisabled();
-
-		await btn.click();
-		await tick();
-
-		expect(writeText).not.toHaveBeenCalled();
-		expect(btn).not.toHaveAttribute('data-copied');
-	});
-
-	it('restarts the timer on a second click (debounced revert)', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 2000 },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// 1.5s in, click again — timer should reset.
-		vi.advanceTimersByTime(1500);
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// 1s more (2.5s since first click, 1s since second) — still copied.
-		vi.advanceTimersByTime(1000);
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// Reach 2s since the second click — now reverts.
-		vi.advanceTimersByTime(1000);
-		await tick();
-		expect(btn).toHaveTextContent('Copy');
-	});
-});