@nucel/ui 0.3.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nucel/ui",
-	"version": "0.3.0",
+	"version": "0.11.0",
 	"description": "A comprehensive Svelte 5 UI component library for Nucel projects",
 	"type": "module",
 	"svelte": "./src/lib/index.ts",
@@ -13,14 +13,11 @@
 	},
 	"files": [
 		"src/lib",
-		"!src/**/*.test.ts",
-		"!src/**/*.spec.ts",
-		"!src/tests",
 		"src/styles.css"
 	],
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build",
+		"build": "svelte-check --tsconfig ./tsconfig.json",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"lint": "eslint .",
 		"format": "prettier --write .",
@@ -33,7 +30,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/nucel/ui.git"
+		"url": "https://github.com/nucel-dev/ui.git"
 	},
 	"keywords": [
 		"svelte",
@@ -49,32 +46,32 @@
 	"license": "MIT",
 	"dependencies": {
 		"@lucide/svelte": "^0.564.0",
-		"@number-flow/svelte": "^0.3.7",
-		"@tiptap/core": "^3.22.2",
-		"@tiptap/extension-character-count": "^3.22.2",
-		"@tiptap/extension-color": "^3.22.2",
-		"@tiptap/extension-highlight": "^3.22.2",
-		"@tiptap/extension-link": "^3.22.2",
-		"@tiptap/extension-mention": "^3.22.2",
-		"@tiptap/extension-placeholder": "^3.22.2",
-		"@tiptap/extension-subscript": "^3.22.2",
-		"@tiptap/extension-superscript": "^3.22.2",
-		"@tiptap/extension-table": "^3.22.2",
-		"@tiptap/extension-table-cell": "^3.22.2",
-		"@tiptap/extension-table-header": "^3.22.2",
-		"@tiptap/extension-table-row": "^3.22.2",
-		"@tiptap/extension-task-item": "^3.22.2",
-		"@tiptap/extension-task-list": "^3.22.2",
-		"@tiptap/extension-text-align": "^3.22.2",
-		"@tiptap/extension-text-style": "^3.22.2",
-		"@tiptap/extension-typography": "^3.22.2",
-		"@tiptap/extension-underline": "^3.22.2",
-		"@tiptap/starter-kit": "^3.22.2",
+		"@tiptap/core": "^3.23.6",
+		"@tiptap/extension-character-count": "^3.23.6",
+		"@tiptap/extension-color": "^3.23.6",
+		"@tiptap/extension-highlight": "^3.23.6",
+		"@tiptap/extension-link": "^3.23.6",
+		"@tiptap/extension-mention": "^3.23.6",
+		"@tiptap/extension-placeholder": "^3.23.6",
+		"@tiptap/extension-subscript": "^3.23.6",
+		"@tiptap/extension-superscript": "^3.23.6",
+		"@tiptap/extension-table": "^3.23.6",
+		"@tiptap/extension-table-cell": "^3.23.6",
+		"@tiptap/extension-table-header": "^3.23.6",
+		"@tiptap/extension-table-row": "^3.23.6",
+		"@tiptap/extension-task-item": "^3.23.6",
+		"@tiptap/extension-task-list": "^3.23.6",
+		"@tiptap/extension-text-align": "^3.23.6",
+		"@tiptap/extension-text-style": "^3.23.6",
+		"@tiptap/extension-typography": "^3.23.6",
+		"@tiptap/extension-underline": "^3.23.6",
+		"@tiptap/starter-kit": "^3.23.6",
 		"bits-ui": "^2.16.1",
 		"clsx": "^2.1.1",
 		"dompurify": "^3.3.3",
 		"marked": "^17.0.5",
-		"shiki": "^4.0.2",
+		"monaco-editor": "^0.55.1",
+		"shiki": "^4.1.0",
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2",
@@ -89,17 +86,13 @@
 		"@storybook/svelte-vite": "^10.3.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/vite": "^4.1.18",
-		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/svelte": "^5.3.1",
 		"@types/dompurify": "^3.2.0",
-		"@vitest/browser": "4.1.5",
-		"@vitest/browser-playwright": "^4.1.5",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.14.0",
 		"globals": "^17.3.0",
-		"jsdom": "^28.1.0",
-		"playwright": "^1.59.1",
+		"jsdom": "^29.1.1",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
@@ -111,7 +104,7 @@
 		"typescript": "^5.8.0",
 		"typescript-eslint": "^8.54.0",
 		"vite": "^8.0.0",
-		"vitest": "4.1.5"
+		"vitest": "^4.0.18"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0",

package/src/lib/components/BottomSheet.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	/**
+	 * BottomSheet — mobile-first bottom-anchored sheet.
+	 *
+	 * Built on Sheet primitive with `side="bottom"` plus a few mobile
+	 * affordances: a top grabber handle, larger touch targets in the
+	 * header, and an explicit safe-area inset on the bottom so the
+	 * close button isn't eaten by the home indicator.
+	 *
+	 * Use for: mobile filter panels, action menus, "more options"
+	 * surfaces that would be a popover on desktop.
+	 *
+	 * Pair with a Tailwind `md:hidden` wrapper on the trigger to keep
+	 * the desktop dropdown menu unchanged.
+	 */
+	import type { Snippet } from 'svelte';
+	import Sheet from './ui/sheet/sheet.svelte';
+	import SheetTrigger from './ui/sheet/sheet-trigger.svelte';
+	import SheetContent from './ui/sheet/sheet-content.svelte';
+	import SheetHeader from './ui/sheet/sheet-header.svelte';
+	import SheetTitle from './ui/sheet/sheet-title.svelte';
+	import SheetDescription from './ui/sheet/sheet-description.svelte';
+	import SheetFooter from './ui/sheet/sheet-footer.svelte';
+	import { cn } from '../utils.js';
+
+	type Props = {
+		open?: boolean;
+		title?: string;
+		description?: string;
+		/** Show the grabber bar at the top. Defaults to true. */
+		grabber?: boolean;
+		class?: string;
+		trigger?: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	};
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		grabber = true,
+		class: className,
+		trigger,
+		header,
+		footer,
+		children,
+	}: Props = $props();
+</script>
+
+<Sheet bind:open>
+	{#if trigger}
+		<SheetTrigger>
+			{@render trigger()}
+		</SheetTrigger>
+	{/if}
+	<SheetContent
+		side="bottom"
+		class={cn(
+			'flex max-h-[90dvh] flex-col rounded-t-xl px-0 pb-[env(safe-area-inset-bottom,0px)]',
+			className,
+		)}
+	>
+		{#if grabber}
+			<div class="flex justify-center pt-2 pb-1" aria-hidden="true">
+				<div class="h-1.5 w-10 rounded-full bg-muted-foreground/30"></div>
+			</div>
+		{/if}
+
+		{#if header}
+			<div class="px-4">
+				{@render header()}
+			</div>
+		{:else if title || description}
+			<SheetHeader class="px-4">
+				{#if title}
+					<SheetTitle>{title}</SheetTitle>
+				{/if}
+				{#if description}
+					<SheetDescription>{description}</SheetDescription>
+				{/if}
+			</SheetHeader>
+		{/if}
+
+		<div class="flex-1 overflow-y-auto px-4 py-2">
+			{#if children}{@render children()}{/if}
+		</div>
+
+		{#if footer}
+			<SheetFooter class="px-4">
+				{@render footer()}
+			</SheetFooter>
+		{/if}
+	</SheetContent>
+</Sheet>

package/src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { ChevronRightIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+
+	type Item = {
+		label: string;
+		href?: string;
+	};
+
+	let {
+		items,
+		separator,
+		class: className,
+		ariaLabel = 'breadcrumb',
+	}: {
+		items: Item[];
+		separator?: string;
+		class?: string;
+		ariaLabel?: string;
+	} = $props();
+</script>
+
+<nav data-slot="breadcrumbs" aria-label={ariaLabel} class={cn('w-full', className)}>
+	<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm">
+		{#each items as item, i (i)}
+			{@const isLast = i === items.length - 1}
+			<li class="inline-flex items-center gap-1.5">
+				{#if isLast || !item.href}
+					<span
+						class={cn(
+							isLast ? 'text-foreground font-medium' : 'text-muted-foreground',
+						)}
+						aria-current={isLast ? 'page' : undefined}
+					>
+						{item.label}
+					</span>
+				{:else}
+					<a
+						href={item.href}
+						class="hover:text-foreground transition-colors"
+					>
+						{item.label}
+					</a>
+				{/if}
+			</li>
+			{#if !isLast}
+				<li class="text-muted-foreground/60 inline-flex items-center" aria-hidden="true">
+					{#if separator}
+						<span>{separator}</span>
+					{:else}
+						<ChevronRightIcon class="size-3.5" />
+					{/if}
+				</li>
+			{/if}
+		{/each}
+	</ol>
+</nav>

package/src/lib/components/Checkbox.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { CheckIcon, MinusIcon } from '@lucide/svelte';
+	import { cn, type WithoutChildrenOrChild } from '../utils.js';
+
+	type Props = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
+		label?: string;
+		class?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		disabled,
+		label,
+		class: className,
+		id,
+		...restProps
+	}: Props = $props();
+
+	const uid = $props.id();
+	const checkboxId = $derived(id ?? `checkbox-${uid}`);
+
+	const boxClass =
+		'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+</script>
+
+{#snippet box()}
+	<CheckboxPrimitive.Root
+		bind:ref
+		bind:checked
+		bind:indeterminate
+		id={checkboxId}
+		data-slot="checkbox"
+		{disabled}
+		class={cn(boxClass, !label && className)}
+		{...restProps}
+	>
+		{#snippet children({ checked: isChecked, indeterminate: isIndeterminate })}
+			{#if isIndeterminate}
+				<MinusIcon class="size-3.5" />
+			{:else if isChecked}
+				<CheckIcon class="size-3.5" />
+			{/if}
+		{/snippet}
+	</CheckboxPrimitive.Root>
+{/snippet}
+
+{#if label}
+	<label
+		for={checkboxId}
+		class={cn(
+			'inline-flex items-center gap-2 text-sm leading-none font-medium select-none',
+			disabled && 'cursor-not-allowed opacity-50',
+			className,
+		)}
+	>
+		{@render box()}
+		<span>{label}</span>
+	</label>
+{:else}
+	{@render box()}
+{/if}

package/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+	import { CheckIcon, CopyIcon } from '@lucide/svelte';
+	import { getContext, onMount } from 'svelte';
+	import { cn } from '../utils.js';
+	import {
+		getHighlighter,
+		loadLanguage,
+		resolveLang,
+		SHIKI_LIGHT_THEME,
+		SHIKI_DARK_THEME,
+	} from '../utils/shikiHighlighter.js';
+	import type { ThemeContext } from './ThemeProvider.svelte';
+
+	type Theme = 'light' | 'dark' | 'auto';
+
+	type Props = {
+		/** Source code to render. */
+		code: string;
+		/** Shiki language id. Unknown values fall back to `plaintext`. */
+		language?: string;
+		/** Theme. `auto` follows the nearest `<ThemeProvider>`. Defaults to `auto`. */
+		theme?: Theme;
+		/** Optional filename shown in the header. */
+		filename?: string;
+		/** Render gutter line numbers (default `false`). */
+		showLineNumbers?: boolean;
+		/** Soft-wrap long lines (default `false` — horizontal scroll). */
+		wrap?: boolean;
+		/** Show the copy button (default `true`). */
+		copyable?: boolean;
+		/**
+		 * Backwards-compat alias for `copyable`. Older callers (0.5/0.6/0.7) still
+		 * use `showCopy`; honour it but prefer `copyable` going forward.
+		 */
+		showCopy?: boolean;
+		/** Max height before the body becomes scrollable. Default `60vh`. */
+		maxHeight?: string;
+		class?: string;
+	};
+
+	let {
+		code,
+		language = 'plaintext',
+		theme = 'auto',
+		filename,
+		showLineNumbers = false,
+		wrap = false,
+		copyable = true,
+		showCopy,
+		maxHeight = '60vh',
+		class: className,
+	}: Props = $props();
+
+	// Honor the legacy `showCopy` prop if a caller still passes it.
+	const showCopyButton = $derived(showCopy === undefined ? copyable : showCopy);
+
+	// Read the ThemeProvider context if present. Doesn't throw — CodeBlock
+	// renders just fine outside a ThemeProvider, it just won't auto-switch.
+	const themeCtx = getContext<ThemeContext | undefined>(Symbol.for('@nucel/ui:theme')) as
+		| ThemeContext
+		| undefined;
+	// Note: the ThemeProvider uses its own private symbol; we can't read it
+	// directly. Fall back to inspecting the `.dark` class on <html> at render
+	// time — that's the contract ThemeProvider commits to.
+	let domDark = $state(false);
+
+	const resolvedTheme = $derived<'light' | 'dark'>(
+		theme === 'light' ? 'light' : theme === 'dark' ? 'dark' : domDark ? 'dark' : 'light',
+	);
+
+	const shikiTheme = $derived(
+		resolvedTheme === 'dark' ? SHIKI_DARK_THEME : SHIKI_LIGHT_THEME,
+	);
+
+	let highlightedHtml = $state<string | null>(null);
+	let highlighterReady = $state(false);
+	let copied = $state(false);
+
+	// Derived snapshot of the props that affect highlighting output. When any
+	// of them change we re-run Shiki.
+	const highlightKey = $derived(
+		[code, language, shikiTheme, showLineNumbers ? '1' : '0'].join('
'),
+	);
+
+	onMount(() => {
+		// Initial dark-class snapshot + observe for ThemeProvider toggles.
+		const html = document.documentElement;
+		const sync = () => {
+			domDark = html.classList.contains('dark');
+		};
+		sync();
+
+		const mo = new MutationObserver(sync);
+		mo.observe(html, { attributes: true, attributeFilter: ['class'] });
+
+		// Kick off the highlighter ASAP — subsequent CodeBlocks reuse the cache.
+		(async () => {
+			await getHighlighter();
+			highlighterReady = true;
+		})();
+
+		return () => mo.disconnect();
+	});
+
+	// Re-render whenever the highlight inputs change.
+	$effect(() => {
+		// Track all reactive deps.
+		void highlightKey;
+		if (typeof window === 'undefined') return;
+
+		let cancelled = false;
+		(async () => {
+			try {
+				await loadLanguage(language);
+				const hl = await getHighlighter();
+				if (cancelled) return;
+				const html = hl.codeToHtml(code, {
+					lang: resolveLang(language),
+					theme: shikiTheme,
+					transformers: [
+						{
+							name: 'nucel:line-attrs',
+							line(node, line) {
+								node.properties = node.properties ?? {};
+								(node.properties as Record<string, string | number>)['data-line'] =
+									line;
+							},
+						},
+					],
+				});
+				if (!cancelled) highlightedHtml = html;
+			} catch (err) {
+				// Highlighting should never break the page — fall back to plain rendering.
+				console.warn('[@nucel/ui CodeBlock] Shiki render failed:', err);
+				if (!cancelled) highlightedHtml = null;
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			setTimeout(() => (copied = false), 1500);
+		} catch {
+			// Clipboard API can fail in insecure contexts — silently ignore.
+		}
+	}
+
+	const lines = $derived(code.split('\n'));
+</script>
+
+<div
+	data-slot="code-block"
+	data-theme={resolvedTheme}
+	class={cn(
+		'bg-muted/40 border-border relative overflow-hidden rounded-lg border text-sm',
+		className,
+	)}
+>
+	{#if filename || showCopyButton || language}
+		<div
+			class="border-border bg-muted/60 flex items-center justify-between gap-2 border-b px-3 py-1.5"
+		>
+			<div class="text-muted-foreground flex items-center gap-2 text-xs font-medium">
+				{#if filename}
+					<span class="truncate">{filename}</span>
+				{/if}
+				{#if language && language !== 'plaintext'}
+					<span class="bg-background rounded px-1.5 py-0.5 font-mono text-[10px] uppercase">
+						{language}
+					</span>
+				{/if}
+			</div>
+			{#if showCopyButton}
+				<button
+					type="button"
+					onclick={copy}
+					aria-label="Copy code"
+					class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs outline-none focus-visible:ring-2"
+				>
+					{#if copied}
+						<CheckIcon class="size-3.5" /> Copied
+					{:else}
+						<CopyIcon class="size-3.5" /> Copy
+					{/if}
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class="nucel-code-body overflow-auto"
+		class:nucel-code-wrap={wrap}
+		style:max-height={maxHeight}
+	>
+		{#if highlightedHtml}
+			<!-- Shiki-rendered output. {@html} is safe here: Shiki escapes all source. -->
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<div class="nucel-code-shiki" class:with-line-numbers={showLineNumbers}>
+				{@html highlightedHtml}
+			</div>
+		{:else}
+			<!-- Plain fallback while Shiki loads / on SSR / on error. -->
+			<pre
+				class="text-foreground p-4 font-mono text-[13px] leading-relaxed"
+				class:whitespace-pre-wrap={wrap}><code
+					data-language={language}
+					class={cn('block', `language-${language}`)}
+					>{#if showLineNumbers}{#each lines as line, i (i)}<span
+								class="text-muted-foreground/60 mr-4 inline-block w-6 text-right select-none"
+								>{i + 1}</span
+							>{line}{#if i < lines.length - 1}{'\n'}{/if}{/each}{:else}{code}{/if}</code
+				></pre>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Shiki emits a <pre class="shiki ..."><code><span class="line">…</span></code></pre>.
+	   We restyle its container only — the inline colour spans are Shiki's.
+	   Theme-aware: when the consumer flips to dark we swap to the dark stylesheet. */
+	.nucel-code-shiki :global(pre.shiki) {
+		margin: 0;
+		padding: 1rem;
+		background: transparent !important;
+		font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+		font-size: 13px;
+		line-height: 1.55;
+		tab-size: 2;
+	}
+	.nucel-code-shiki :global(pre.shiki code) {
+		display: block;
+		min-width: max-content;
+	}
+	.nucel-code-shiki.with-line-numbers :global(pre.shiki) {
+		counter-reset: shiki-line;
+		padding-left: 0;
+	}
+	.nucel-code-shiki.with-line-numbers :global(pre.shiki .line)::before {
+		counter-increment: shiki-line;
+		content: counter(shiki-line);
+		display: inline-block;
+		width: 2.5rem;
+		margin-right: 1rem;
+		padding-right: 0.5rem;
+		text-align: right;
+		color: var(--muted-foreground);
+		opacity: 0.6;
+		user-select: none;
+		border-right: 1px solid var(--border);
+	}
+	.nucel-code-wrap :global(pre.shiki) {
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+	.nucel-code-wrap :global(pre.shiki code) {
+		min-width: 0;
+	}
+</style>