@nucel/ui 0.3.0 → 0.11.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/Alert.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Component, Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../utils/cn.js';
 
   let {
     variant = 'default',

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/components/ui/table/Table.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className }: { children: Snippet; class?: string } = $props();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className }: { children: Snippet; class?: string } = $props();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className }: { children: Snippet; class?: string } = $props();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className, ...rest }: { children?: Snippet; class?: string; [key: string]: unknown } = $props();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className, ...rest }: { children?: Snippet; class?: string; [key: string]: unknown } = $props();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className }: { children: Snippet; class?: string } = $props();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
+  import { cn } from '../../../utils/cn.js';
 
   let { children, class: className }: { children: Snippet; class?: string } = $props();
 </script>