@nucel/ui 0.3.0 → 0.10.0

package/src/lib/components/ThreeWayMerge.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { cn } from '../utils.js';
+	import CodeEditor from './CodeEditor.svelte';
+	import type { CodeEditorTheme } from './CodeEditor.svelte';
+
+	type Props = {
+		/** Common ancestor / merge base content. */
+		base?: string;
+		/** "Ours" side (current branch). */
+		ours?: string;
+		/** "Theirs" side (incoming branch). */
+		theirs?: string;
+		/** Resolved/merged content. Bindable — consumer reads this back. */
+		merged?: string;
+		/** Optional labels for each pane. */
+		baseLabel?: string;
+		oursLabel?: string;
+		theirsLabel?: string;
+		mergedLabel?: string;
+		/** Monaco language id. */
+		language?: string;
+		/** Theme mode. */
+		theme?: CodeEditorTheme;
+		/** Height per editor pane. */
+		paneHeight?: string;
+		/** Container className. */
+		class?: string;
+		/** Called when merged content changes. */
+		onchange?: (merged: string) => void;
+	};
+
+	let {
+		base = '',
+		ours = '',
+		theirs = '',
+		merged = $bindable(''),
+		baseLabel = 'Base',
+		oursLabel = 'Ours',
+		theirsLabel = 'Theirs',
+		mergedLabel = 'Merged result',
+		language = 'plaintext',
+		theme = 'auto',
+		paneHeight = '320px',
+		class: className,
+		onchange,
+	}: Props = $props();
+
+	function acceptOurs() {
+		merged = ours;
+		onchange?.(merged);
+	}
+
+	function acceptTheirs() {
+		merged = theirs;
+		onchange?.(merged);
+	}
+
+	function acceptBase() {
+		merged = base;
+		onchange?.(merged);
+	}
+
+	function acceptCombined() {
+		// Crude but useful starting point: concatenate ours then theirs with
+		// a marker between. Consumers wanting a smarter merge should run a
+		// proper 3-way text-merge on the backend and feed `merged` directly.
+		merged = `${ours}\n\n// ===== incoming =====\n${theirs}`;
+		onchange?.(merged);
+	}
+
+	function handleMergedChange(next: string) {
+		onchange?.(next);
+	}
+</script>
+
+<div
+	data-slot="three-way-merge"
+	class={cn('flex w-full flex-col gap-3', className)}
+	role="region"
+	aria-label="Three-way merge"
+>
+	<div class="grid grid-cols-1 gap-3 md:grid-cols-3">
+		<div class="flex flex-col gap-1.5">
+			<div class="text-muted-foreground flex items-center justify-between text-xs font-medium">
+				<span>{baseLabel}</span>
+				<button
+					type="button"
+					class="hover:text-foreground rounded px-1.5 py-0.5 text-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					onclick={acceptBase}
+				>
+					Accept base
+				</button>
+			</div>
+			<CodeEditor
+				value={base}
+				{language}
+				{theme}
+				readOnly
+				height={paneHeight}
+				ariaLabel={`${baseLabel} (read-only)`}
+			/>
+		</div>
+
+		<div class="flex flex-col gap-1.5">
+			<div class="text-muted-foreground flex items-center justify-between text-xs font-medium">
+				<span class="text-success">{oursLabel}</span>
+				<button
+					type="button"
+					class="hover:text-foreground rounded px-1.5 py-0.5 text-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					onclick={acceptOurs}
+				>
+					Accept ours
+				</button>
+			</div>
+			<CodeEditor
+				value={ours}
+				{language}
+				{theme}
+				readOnly
+				height={paneHeight}
+				ariaLabel={`${oursLabel} (read-only)`}
+			/>
+		</div>
+
+		<div class="flex flex-col gap-1.5">
+			<div class="text-muted-foreground flex items-center justify-between text-xs font-medium">
+				<span class="text-warning">{theirsLabel}</span>
+				<button
+					type="button"
+					class="hover:text-foreground rounded px-1.5 py-0.5 text-[11px] outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					onclick={acceptTheirs}
+				>
+					Accept theirs
+				</button>
+			</div>
+			<CodeEditor
+				value={theirs}
+				{language}
+				{theme}
+				readOnly
+				height={paneHeight}
+				ariaLabel={`${theirsLabel} (read-only)`}
+			/>
+		</div>
+	</div>
+
+	<div class="flex flex-col gap-1.5">
+		<div class="flex items-center justify-between gap-2">
+			<span class="text-foreground text-sm font-medium">{mergedLabel}</span>
+			<div class="flex items-center gap-2">
+				<button
+					type="button"
+					class="hover:bg-accent rounded-md border border-border px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					onclick={acceptCombined}
+					title="Concatenate ours + theirs as a starting point for manual edit"
+				>
+					Combine
+				</button>
+				<button
+					type="button"
+					class="hover:bg-accent rounded-md border border-border px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					onclick={acceptOurs}
+				>
+					Use ours
+				</button>
+				<button
+					type="button"
+					class="hover:bg-accent rounded-md border border-border px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					onclick={acceptTheirs}
+				>
+					Use theirs
+				</button>
+			</div>
+		</div>
+		<CodeEditor
+			bind:value={merged}
+			{language}
+			{theme}
+			height={paneHeight}
+			placeholder="Edit the merged result here…"
+			ariaLabel={mergedLabel}
+			onchange={handleMergedChange}
+		/>
+	</div>
+</div>

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

@@ -1,16 +1,113 @@
 <script lang="ts">
 	import { marked } from 'marked';
 	import DOMPurify from 'dompurify';
+	import { onMount, tick } from 'svelte';
+	import {
+		getHighlighter,
+		loadLanguage,
+		resolveLang,
+		SHIKI_LIGHT_THEME,
+		SHIKI_DARK_THEME,
+	} from '../../utils/shikiHighlighter.js';
 
-	let { content = '' }: { content?: string } = $props();
+	let {
+		content,
+		highlight = true,
+	}: {
+		content: string;
+		/**
+		 * When true (default), fenced code blocks are run through Shiki after
+		 * the markdown is rendered. Set to false to fall back to plain `<pre>`.
+		 */
+		highlight?: boolean;
+	} = $props();
+
+	let host = $state<HTMLDivElement | undefined>(undefined);
+	let isDark = $state(false);
 
 	let html = $derived(
-		content ? DOMPurify.sanitize(marked.parse(content, { gfm: true, breaks: false }) as string) : '',
+		DOMPurify.sanitize(marked.parse(content, { gfm: true, breaks: false }) as string, {
+			// Allow Shiki's inline style attributes on spans (colour tokens).
+			ADD_ATTR: ['style', 'data-line', 'data-language'],
+		}),
 	);
+
+	function readDarkMode(): boolean {
+		if (typeof document === 'undefined') return false;
+		return document.documentElement.classList.contains('dark');
+	}
+
+	onMount(() => {
+		isDark = readDarkMode();
+		const mo = new MutationObserver(() => {
+			isDark = readDarkMode();
+		});
+		mo.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class'],
+		});
+		return () => mo.disconnect();
+	});
+
+	// Re-highlight whenever the markdown re-renders or the theme flips.
+	$effect(() => {
+		void html;
+		void isDark;
+		if (!highlight || typeof window === 'undefined' || !host) return;
+
+		let cancelled = false;
+		(async () => {
+			// Wait one tick so the @html DOM is in place.
+			await tick();
+			if (cancelled || !host) return;
+
+			const blocks = host.querySelectorAll('pre > code[class*="language-"]');
+			if (blocks.length === 0) return;
+
+			const theme = isDark ? SHIKI_DARK_THEME : SHIKI_LIGHT_THEME;
+			const hl = await getHighlighter();
+
+			for (const block of Array.from(blocks)) {
+				if (cancelled) return;
+				const pre = block.parentElement;
+				if (!pre || pre.dataset.shikiDone === 'true') continue;
+
+				const langClass = Array.from(block.classList).find((c) =>
+					c.startsWith('language-'),
+				);
+				const requested = langClass ? langClass.slice('language-'.length) : 'plaintext';
+
+				await loadLanguage(requested);
+				const lang = resolveLang(requested);
+				const code = block.textContent ?? '';
+
+				try {
+					const shikiHtml = hl.codeToHtml(code, { lang, theme });
+					// Shiki only emits <pre><code><span> with style="color: #xxx"
+					// attributes — fully trusted output, but parse it via the DOM
+					// parser (rather than innerHTML) to keep our defensive defaults.
+					const doc = new DOMParser().parseFromString(shikiHtml, 'text/html');
+					const next = doc.body.firstElementChild;
+					if (next) {
+						(next as HTMLElement).dataset.shikiDone = 'true';
+						(next as HTMLElement).dataset.lang = requested;
+						pre.replaceWith(next);
+					}
+				} catch (err) {
+					console.warn('[@nucel/ui MarkdownRenderer] Shiki failed:', err);
+					pre.dataset.shikiDone = 'true';
+				}
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
 </script>
 
-<div class="md-body">
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<div bind:this={host} class="md-body" data-theme={isDark ? 'dark' : 'light'}>
 	{@html html}
 </div>
 
@@ -27,7 +124,8 @@
 		padding-bottom: 0.5rem;
 		color: var(--foreground);
 	}
-	.md-body :global(code) {
+	/* Inline code (not inside a <pre>) — keep simple. */
+	.md-body :global(code:not(pre code)) {
 		background: var(--muted);
 		padding: 0.125rem 0.375rem;
 		border-radius: 0.25rem;
@@ -35,17 +133,37 @@
 		font-size: 0.875em;
 		color: var(--foreground);
 	}
+	/* Fallback <pre> (before Shiki replaces it, or when highlight=false). */
 	.md-body :global(pre) {
-		background: var(--background);
+		background: var(--muted);
 		padding: 1rem;
-		border-radius: 0.375rem;
+		border-radius: 0.5rem;
 		overflow-x: auto;
 		border: 1px solid var(--border);
 	}
 	.md-body :global(pre code) {
 		background: none;
 		padding: 0;
-		color: var(--muted-foreground);
+		color: var(--foreground);
+	}
+	/* Shiki-rendered <pre class="shiki ...">.
+	   The colour tokens come from Shiki; we own the chrome. */
+	.md-body :global(pre.shiki) {
+		margin: 1rem 0;
+		padding: 1rem;
+		border-radius: 0.5rem;
+		border: 1px solid var(--border);
+		overflow-x: auto;
+		font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+		font-size: 0.85rem;
+		line-height: 1.55;
+		tab-size: 2;
+	}
+	.md-body :global(pre.shiki code) {
+		display: block;
+		min-width: max-content;
+		background: transparent;
+		padding: 0;
 	}
 	.md-body :global(a) {
 		color: var(--primary);

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

@@ -3,7 +3,7 @@
 
 	let {
 		ref = $bindable(null),
-		data = [] as number[],
+		data,
 		color = 'stroke-primary',
 		fillColor = 'fill-primary/10',
 		width = 80,

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

@@ -9,9 +9,12 @@
 	const classes: Record<string, string> = {
 		open: 'border-success/30 bg-success/10 text-success',
 		closed: '',
-		merged: 'border-purple-500/30 bg-purple-500/10 text-purple-400',
-		running: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
-		active: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+		merged:
+			'border-purple-500/30 bg-purple-500/10 text-purple-700 dark:border-purple-400/30 dark:bg-purple-400/10 dark:text-purple-300',
+		running:
+			'border-blue-500/30 bg-blue-500/10 text-blue-700 dark:border-blue-400/30 dark:bg-blue-400/10 dark:text-blue-300',
+		active:
+			'border-blue-500/30 bg-blue-500/10 text-blue-700 dark:border-blue-400/30 dark:bg-blue-400/10 dark:text-blue-300',
 		passed: 'border-success/30 bg-success/10 text-success',
 		succeeded: 'border-success/30 bg-success/10 text-success',
 		failed: 'border-destructive/30 bg-destructive/10 text-destructive',

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

@@ -41,11 +41,11 @@
 		closed: 'bg-muted-foreground',
 		paused: 'bg-muted-foreground',
 		terminated: 'bg-muted-foreground',
-		running: 'bg-blue-500',
-		merged: 'bg-purple-500',
+		running: 'bg-blue-500 dark:bg-blue-400',
+		merged: 'bg-purple-500 dark:bg-purple-400',
 		failed: 'bg-destructive',
 		error: 'bg-destructive',
-		warning: 'bg-yellow-500',
+		warning: 'bg-warning',
 	};
 
 	const resolvedColor = $derived(

package/src/lib/index.ts

@@ -163,8 +163,8 @@ export {
 // Separator
 export { Separator } from './components/ui/separator/index.js';
 
-// Skeleton
-export { Skeleton } from './components/ui/skeleton/index.js';
+// Skeleton (primitive — kept for backwards-compat)
+export { Skeleton as SkeletonPrimitive } from './components/ui/skeleton/index.js';
 
 // Sonner (Toaster)
 export { Toaster } from './components/ui/sonner/index.js';
@@ -243,86 +243,136 @@ 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';
+// Checkbox (shadcn-styled wrapper over bits-ui)
+export { default as Checkbox } from './components/Checkbox.svelte';
 
-// CostDisplay — animated cost/currency display component
-export { default as CostDisplay } from './components/ui/CostDisplay.svelte';
+// RadioGroup + Radio (shadcn-styled wrappers over bits-ui)
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Radio } from './components/Radio.svelte';
 
-// StatusPill
-export { default as StatusPill } from './components/ui/StatusPill.svelte';
+// Form + FormField (InertiaJS-friendly defaults)
+export { default as Form } from './components/Form.svelte';
+export { default as FormField } from './components/FormField.svelte';
 
-// PageHeader
-export { default as PageHeader } from './components/ui/PageHeader.svelte';
+// Pagination (composite, bits-ui driven)
+export { default as Pagination } from './components/Pagination.svelte';
 
-// Table
-export {
-	Table,
-	TableHeader,
-	TableBody,
-	TableRow,
-	TableHead,
-	TableCell,
-	TableCaption,
-} from './components/ui/table/index.js';
+// StatCard (dashboard metric)
+export { default as StatCard } from './components/StatCard.svelte';
 
-// Alert
-export { default as Alert } from './components/ui/Alert.svelte';
+// Breadcrumbs (array-driven composite; for low-level pieces use Breadcrumb*)
+export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
 
-// ListCard
-export { default as ListCard } from './components/ui/ListCard.svelte';
+// ---- 0.5.0 additions ----
 
-// StatCard
-export { default as StatCard } from './components/ui/StatCard.svelte';
+// DataTable
+export { default as DataTable } from './components/DataTable.svelte';
+export type { ColumnDef, SortDirection } from './components/DataTable.svelte';
 
-// BranchPill
-export { default as BranchPill } from './components/ui/BranchPill.svelte';
+// SearchInput
+export { default as SearchInput } from './components/SearchInput.svelte';
 
-// CommentPill
-export { default as CommentPill } from './components/ui/CommentPill.svelte';
+// DateRangePicker
+export { default as DateRangePicker } from './components/DateRangePicker.svelte';
+export type { DateRange, DateRangePreset } from './components/DateRangePicker.svelte';
+export { DEFAULT_PRESETS as DateRangePickerDefaultPresets } from './components/DateRangePicker.svelte';
 
-// PermissionChips — Nucel-App permission badges
-export { default as PermissionChips } from './components/ui/PermissionChips.svelte';
+// CodeBlock
+export { default as CodeBlock } from './components/CodeBlock.svelte';
 
-// AppCard — Nucel-App row card (marketplace, installed apps, owned apps)
-export { default as AppCard } from './components/ui/AppCard.svelte';
+// Skeleton (composite — shimmer + width/height; supersedes SkeletonPrimitive)
+export { default as Skeleton } from './components/Skeleton.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';
+// Drawer (side panel, built on Sheet primitive)
+export { default as Drawer } from './components/Drawer.svelte';
 
-// Section
-export { default as Section } from './components/ui/Section.svelte';
+// Combobox (searchable Select built on bits-ui Combobox)
+export { default as Combobox } from './components/Combobox.svelte';
+export type { ComboboxOption } from './components/Combobox.svelte';
 
-// SectionTitle
-export { default as SectionTitle } from './components/ui/SectionTitle.svelte';
+// CommandPalette (cmdk-style palette built on bits-ui Command + Dialog)
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export type { CommandPaletteItem } from './components/CommandPalette.svelte';
 
-// FormField
-export { default as FormField } from './components/ui/FormField.svelte';
+// ---- 0.6.0 additions ----
 
-// 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';
+// ThemeProvider — exposes a `theme` ('light' | 'dark' | 'system') context,
+// persists the user's preference in localStorage, and reacts to
+// `prefers-color-scheme` when set to 'system'.
+export { default as ThemeProvider } from './components/ThemeProvider.svelte';
+export {
+	getThemeContext,
+	type Theme,
+	type ResolvedTheme,
+	type ThemeContext,
+} from './components/ThemeProvider.svelte';
 
-// CopyButton
-export { default as CopyButton } from './components/ui/CopyButton.svelte';
+// ThemeToggle — icon button cycling system -> light -> dark -> system.
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 
-// Pagination
-export { default as Pagination } from './components/ui/Pagination.svelte';
+// ---- 0.7.0 additions ----
 
-// CodeBlock
-export { default as CodeBlock } from './components/ui/CodeBlock.svelte';
+// CodeEditor — Monaco-powered editable code editor.
+// Lazy-loaded on first mount; SSR-safe; matches @nucel/ui design tokens.
+export { default as CodeEditor } from './components/CodeEditor.svelte';
+export type { CodeEditorTheme } from './components/CodeEditor.svelte';
+
+// DiffEditor — Monaco-powered side-by-side or inline diff view.
+export { default as DiffEditor } from './components/DiffEditor.svelte';
 
-// Timeline
-export { default as Timeline } from './components/ui/Timeline.svelte';
+// ThreeWayMerge — base/ours/theirs/merged conflict-resolution UI on top of Monaco.
+export { default as ThreeWayMerge } from './components/ThreeWayMerge.svelte';
 
-// FilterBar
-export { default as FilterBar } from './components/ui/FilterBar.svelte';
+// Monaco loader (advanced — use the components above when possible).
+export { loadMonaco, resolveMonacoTheme } from './utils/monacoLoader.js';
 
-// MetricCard
-export { default as MetricCard } from './components/ui/MetricCard.svelte';
+// ---- 0.8.0 additions ----
+
+// InlineCode — single-line <code> with subtle background, no highlighting.
+export { default as InlineCode } from './components/InlineCode.svelte';
+
+// Shiki helpers (re-exported so consumers can warm the highlighter early or
+// load extra languages outside CodeBlock — e.g. for a route prefetch hook).
+export {
+	getHighlighter as getShikiHighlighter,
+	loadLanguage as loadShikiLanguage,
+	SHIKI_LIGHT_THEME,
+	SHIKI_DARK_THEME,
+} from './utils/shikiHighlighter.js';
+
+// File-path → Shiki language id helper, useful for repo file viewers.
+export { detectLanguageFromPath } from './utils/detectLanguage.js';
+
+// ---- 0.9.0 additions (mobile primitives) ----
+
+// BottomSheet — mobile bottom-anchored sheet (Sheet primitive with grabber +
+// safe-area). Pair with `md:hidden` on triggers to keep desktop unchanged.
+export { default as BottomSheet } from './components/BottomSheet.svelte';
+
+// Fab — floating action button for mobile primary actions.
+// Defaults to `md:hidden`; pass `alwaysVisible` to show on desktop too.
+export { default as Fab } from './components/Fab.svelte';
+
+// ---- 0.10.0 additions (raw-primitive gap closers) ----
+
+// CopyButton — copy-to-clipboard button with built-in "Copied" feedback and
+// timeout reset. Replaces the duplicated clipboard.writeText + copied-state
+// pattern in repo clone boxes, token reveal screens, session viewers, etc.
+export { default as CopyButton } from './components/CopyButton.svelte';
+export type { CopyButtonVariant, CopyButtonSize } from './components/CopyButton.svelte';
+
+// IconButton — icon-only button OR anchor (pass `href`). Defaults to the
+// muted-foreground "toolbar glyph" look (hover:bg-accent) used in TopBar,
+// file trees, and dismiss buttons. `size="tap"` gives a 44×44 mobile target.
+// `aria-label` is required.
+export { default as IconButton } from './components/IconButton.svelte';
+export {
+	iconButtonVariants,
+	type IconButtonVariant,
+	type IconButtonSize,
+	type IconButtonProps,
+} from './components/IconButton.svelte';
+
+// 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';