@nucel/ui 0.1.0 → 0.3.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 '$lib/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 '$lib/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 '$lib/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 '$lib/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 '$lib/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 '$lib/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 '$lib/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

@@ -242,3 +242,87 @@ export { default as Sparkline } from './components/ui/Sparkline.svelte';
 
 // ProviderIcon
 export { default as ProviderIcon } from './components/ui/ProviderIcon.svelte';
+
+// RichEditor — full-featured TipTap editor (wiki, issues, comments)
+export { default as RichEditor } from './components/ui/editor/RichEditor.svelte';
+
+// CostDisplay — animated cost/currency display component
+export { default as CostDisplay } from './components/ui/CostDisplay.svelte';
+
+// StatusPill
+export { default as StatusPill } from './components/ui/StatusPill.svelte';
+
+// PageHeader
+export { default as PageHeader } from './components/ui/PageHeader.svelte';
+
+// Table
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableRow,
+	TableHead,
+	TableCell,
+	TableCaption,
+} from './components/ui/table/index.js';
+
+// Alert
+export { default as Alert } from './components/ui/Alert.svelte';
+
+// ListCard
+export { default as ListCard } from './components/ui/ListCard.svelte';
+
+// StatCard
+export { default as StatCard } from './components/ui/StatCard.svelte';
+
+// BranchPill
+export { default as BranchPill } from './components/ui/BranchPill.svelte';
+
+// CommentPill
+export { default as CommentPill } from './components/ui/CommentPill.svelte';
+
+// PermissionChips — Nucel-App permission badges
+export { default as PermissionChips } from './components/ui/PermissionChips.svelte';
+
+// AppCard — Nucel-App row card (marketplace, installed apps, owned apps)
+export { default as AppCard } from './components/ui/AppCard.svelte';
+
+// Kanban primitives — generic Trello-style column/card chrome.
+// DnD wiring stays out: the consumer attaches svelte-dnd-action's
+// `dndzone` to whichever container they want sortable.
+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';
+
+// Section
+export { default as Section } from './components/ui/Section.svelte';
+
+// SectionTitle
+export { default as SectionTitle } from './components/ui/SectionTitle.svelte';
+
+// FormField
+export { default as FormField } from './components/ui/FormField.svelte';
+
+// Layout
+export { default as AppShell } from './components/ui/AppShell.svelte';
+export { default as AppSidebar } from './components/ui/AppSidebar.svelte';
+export { default as NavItem } from './components/ui/NavItem.svelte';
+export { default as NavSection } from './components/ui/NavSection.svelte';
+
+// CopyButton
+export { default as CopyButton } from './components/ui/CopyButton.svelte';
+
+// Pagination
+export { default as Pagination } from './components/ui/Pagination.svelte';
+
+// CodeBlock
+export { default as CodeBlock } from './components/ui/CodeBlock.svelte';
+
+// Timeline
+export { default as Timeline } from './components/ui/Timeline.svelte';
+
+// FilterBar
+export { default as FilterBar } from './components/ui/FilterBar.svelte';
+
+// MetricCard
+export { default as MetricCard } from './components/ui/MetricCard.svelte';

package/src/styles.css

@@ -24,6 +24,8 @@
 	--accent: oklch(0.967 0.001 286.375);
 	--accent-foreground: oklch(0.21 0.006 285.885);
 	--destructive: oklch(0.577 0.245 27.325);
+	--success: oklch(0.527 0.154 150.069);
+	--warning: oklch(0.769 0.188 70.08);
 	--border: oklch(0.92 0.004 286.32);
 	--input: oklch(0.92 0.004 286.32);
 	--ring: oklch(0.705 0.015 286.067);
@@ -58,6 +60,8 @@
 	--accent: oklch(0.22 0.006 286.033);
 	--accent-foreground: oklch(0.97 0 0);
 	--destructive: oklch(0.704 0.191 22.216);
+	--success: oklch(0.627 0.168 150.069);
+	--warning: oklch(0.828 0.189 84.429);
 	--border: oklch(1 0 0 / 8%);
 	--input: oklch(1 0 0 / 12%);
 	--ring: oklch(0.552 0.016 285.938);
@@ -97,6 +101,8 @@
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
+	--color-success: var(--success);
+	--color-warning: var(--warning);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);