@nucel/ui 0.10.0 → 0.11.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';