@nucel/ui 0.2.0 → 0.10.0

package/src/lib/components/DiffEditor.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import type * as MonacoNs from 'monaco-editor';
+	import { cn } from '../utils.js';
+	import { loadMonaco, resolveMonacoTheme } from '../utils/monacoLoader.js';
+	import Skeleton from './Skeleton.svelte';
+	import type { CodeEditorTheme } from './CodeEditor.svelte';
+
+	type Props = {
+		/** Original (left) content. */
+		original?: string;
+		/** Modified (right) content. Bindable when not read-only. */
+		modified?: string;
+		/** Monaco language id. */
+		language?: string;
+		/** Theme mode. */
+		theme?: CodeEditorTheme;
+		/** Lock the right side. Defaults to true (most diff views are read-only). */
+		readOnly?: boolean;
+		/** Toggle inline vs side-by-side rendering. */
+		inline?: boolean;
+		/** Render whitespace differences. */
+		renderWhitespace?: boolean;
+		/** Hide unchanged regions to focus on actual changes. */
+		hideUnchangedRegions?: boolean;
+		/** CSS height. */
+		height?: string;
+		/** Container className. */
+		class?: string;
+		/** Called when modified content changes. */
+		onchange?: (modified: string) => void;
+		/** Aria label. */
+		ariaLabel?: string;
+	};
+
+	let {
+		original = '',
+		modified = $bindable(''),
+		language = 'plaintext',
+		theme = 'auto',
+		readOnly = true,
+		inline = false,
+		renderWhitespace = false,
+		hideUnchangedRegions = true,
+		height = '500px',
+		class: className,
+		onchange,
+		ariaLabel,
+	}: Props = $props();
+
+	let container: HTMLDivElement;
+	let diffEditor: MonacoNs.editor.IStandaloneDiffEditor | null = null;
+	let originalModel: MonacoNs.editor.ITextModel | null = null;
+	let modifiedModel: MonacoNs.editor.ITextModel | null = null;
+	let monacoRef: typeof MonacoNs | null = null;
+	let ready = $state(false);
+	let suppressNextChange = false;
+
+	onMount(() => {
+		const p = loadMonaco();
+		if (!p) return;
+
+		let disposed = false;
+
+		p.then((monaco) => {
+			if (disposed || !container) return;
+			monacoRef = monaco;
+
+			diffEditor = monaco.editor.createDiffEditor(container, {
+				theme: resolveMonacoTheme(theme),
+				readOnly,
+				renderSideBySide: !inline,
+				automaticLayout: true,
+				fontSize: 13,
+				fontFamily:
+					'"JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+				scrollBeyondLastLine: false,
+				renderWhitespace: renderWhitespace ? 'all' : 'none',
+				hideUnchangedRegions: { enabled: hideUnchangedRegions },
+				ariaLabel: ariaLabel ?? `Diff editor (${language})`,
+				originalEditable: false,
+			});
+
+			originalModel = monaco.editor.createModel(original ?? '', language);
+			modifiedModel = monaco.editor.createModel(modified ?? '', language);
+			diffEditor.setModel({ original: originalModel, modified: modifiedModel });
+
+			modifiedModel.onDidChangeContent(() => {
+				if (!modifiedModel || suppressNextChange) {
+					suppressNextChange = false;
+					return;
+				}
+				const next = modifiedModel.getValue();
+				modified = next;
+				onchange?.(next);
+			});
+
+			ready = true;
+		}).catch((err) => {
+			// eslint-disable-next-line no-console
+			console.error('[@nucel/ui] Monaco failed to load', err);
+		});
+
+		return () => {
+			disposed = true;
+		};
+	});
+
+	onDestroy(() => {
+		diffEditor?.dispose();
+		originalModel?.dispose();
+		modifiedModel?.dispose();
+		diffEditor = null;
+		originalModel = null;
+		modifiedModel = null;
+	});
+
+	$effect(() => {
+		if (!originalModel) return;
+		if (originalModel.getValue() !== original) {
+			originalModel.setValue(original ?? '');
+		}
+	});
+
+	$effect(() => {
+		if (!modifiedModel) return;
+		if (modifiedModel.getValue() !== modified) {
+			suppressNextChange = true;
+			modifiedModel.setValue(modified ?? '');
+		}
+	});
+
+	$effect(() => {
+		if (!monacoRef || !originalModel || !modifiedModel) return;
+		if (originalModel.getLanguageId() !== language) {
+			monacoRef.editor.setModelLanguage(originalModel, language);
+		}
+		if (modifiedModel.getLanguageId() !== language) {
+			monacoRef.editor.setModelLanguage(modifiedModel, language);
+		}
+	});
+
+	$effect(() => {
+		if (!monacoRef) return;
+		monacoRef.editor.setTheme(resolveMonacoTheme(theme));
+	});
+
+	$effect(() => {
+		diffEditor?.updateOptions({
+			readOnly,
+			renderSideBySide: !inline,
+			renderWhitespace: renderWhitespace ? 'all' : 'none',
+			hideUnchangedRegions: { enabled: hideUnchangedRegions },
+		});
+	});
+</script>
+
+<div
+	bind:this={container}
+	data-slot="diff-editor"
+	class={cn(
+		'border-border bg-background relative overflow-hidden rounded-lg border',
+		className,
+	)}
+	style="height: {height};"
+	role="group"
+	aria-label={ariaLabel ?? `Diff editor (${language})`}
+>
+	{#if !ready}
+		<div class="absolute inset-0 p-2">
+			<Skeleton class="h-full w-full" />
+		</div>
+	{/if}
+</div>

package/src/lib/components/Drawer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	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 Side = 'top' | 'right' | 'bottom' | 'left';
+
+	type Props = {
+		open?: boolean;
+		side?: Side;
+		title?: string;
+		description?: string;
+		class?: string;
+		trigger?: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	};
+
+	let {
+		open = $bindable(false),
+		side = 'right',
+		title,
+		description,
+		class: className,
+		trigger,
+		header,
+		footer,
+		children,
+	}: Props = $props();
+</script>
+
+<Sheet bind:open>
+	{#if trigger}
+		<SheetTrigger>
+			{@render trigger()}
+		</SheetTrigger>
+	{/if}
+	<SheetContent {side} class={cn('flex flex-col', className)}>
+		{#if header}
+			{@render header()}
+		{:else if title || description}
+			<SheetHeader>
+				{#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>
+				{@render footer()}
+			</SheetFooter>
+		{/if}
+	</SheetContent>
+</Sheet>

package/src/lib/components/Fab.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	/**
+	 * Fab — Floating Action Button.
+	 *
+	 * Mobile-first primary-action affordance. Pinned bottom-right by
+	 * default, respects `env(safe-area-inset-bottom)` so it clears the
+	 * iOS home indicator. Size is fixed at 56×56 (Material spec, also
+	 * comfortably above Apple's 44×44 HIG minimum).
+	 *
+	 * Hidden on `md:` and up by default — desktop should use a normal
+	 * Button in the page header instead. Override with `alwaysVisible`
+	 * if you need the FAB on all viewports.
+	 *
+	 * Use for: New mission, New issue, New comment — the single
+	 * top-of-funnel action on a list/feed view.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+
+	type Props = {
+		href?: string;
+		class?: string;
+		'aria-label': string;
+		/** Show on all viewports (default: hide >= md). */
+		alwaysVisible?: boolean;
+		/** Snippet for icon content (e.g. lucide icon). */
+		children?: Snippet;
+	} & Omit<HTMLButtonAttributes, 'class' | 'aria-label'> &
+		Omit<HTMLAnchorAttributes, 'class' | 'aria-label'>;
+
+	let {
+		href,
+		class: className,
+		alwaysVisible = false,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const base = cn(
+		'fixed right-4 z-40 grid size-14 place-items-center rounded-full bg-primary text-primary-foreground shadow-lg shadow-primary/30',
+		'transition-transform hover:scale-105 active:scale-95',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+		// Anchor 16px above the bottom safe area
+		'bottom-[calc(env(safe-area-inset-bottom,0px)+1rem)]',
+		alwaysVisible ? '' : 'md:hidden',
+		className,
+	);
+</script>
+
+{#if href}
+	<a {href} class={base} {...restProps}>
+		{#if children}{@render children()}{/if}
+	</a>
+{:else}
+	<button type="button" class={base} {...restProps}>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}

package/src/lib/components/Form.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { HTMLFormAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../utils.js';
+
+	type Props = WithElementRef<HTMLFormAttributes, HTMLFormElement> & {
+		class?: string;
+		/**
+		 * Logical content type for the form payload. Defaults to `application/json`,
+		 * which is what InertiaJS handlers expect. This is exposed as `data-content-type`
+		 * on the rendered element so consumer code (e.g. an Inertia visit) can read it.
+		 *
+		 * Note: the native HTML `enctype` attribute does not accept `application/json`,
+		 * so we deliberately don't set it. Consumers using Inertia / fetch should set
+		 * the `Content-Type` header themselves.
+		 */
+		contentType?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		method = 'post',
+		contentType = 'application/json',
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<form
+	bind:this={ref}
+	data-slot="form"
+	data-content-type={contentType}
+	{method}
+	class={cn('flex flex-col gap-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</form>

package/src/lib/components/FormField.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../utils.js';
+
+	let {
+		label,
+		error,
+		hint,
+		required = false,
+		htmlFor,
+		class: className,
+		children,
+	}: {
+		label?: string;
+		error?: string | null;
+		hint?: string;
+		required?: boolean;
+		htmlFor?: string;
+		class?: string;
+		children: Snippet<[{ id: string; describedBy: string | undefined; invalid: boolean }]>;
+	} = $props();
+
+	const uid = $props.id();
+	const fieldId = $derived(htmlFor ?? `field-${uid}`);
+	const errorId = $derived(`${fieldId}-error`);
+	const hintId = $derived(`${fieldId}-hint`);
+	const describedBy = $derived(
+		error ? errorId : hint ? hintId : undefined,
+	);
+	const invalid = $derived(Boolean(error));
+</script>
+
+<div data-slot="form-field" class={cn('flex flex-col gap-1.5', className)}>
+	{#if label}
+		<label
+			for={fieldId}
+			class="text-foreground/90 inline-flex items-center gap-1 text-sm leading-none font-medium select-none"
+		>
+			{label}
+			{#if required}
+				<span class="text-destructive" aria-hidden="true">*</span>
+			{/if}
+		</label>
+	{/if}
+	{@render children({ id: fieldId, describedBy, invalid })}
+	{#if error}
+		<p id={errorId} class="text-destructive text-xs leading-tight" role="alert">{error}</p>
+	{:else if hint}
+		<p id={hintId} class="text-muted-foreground text-xs leading-tight">{hint}</p>
+	{/if}
+</div>

package/src/lib/components/IconButton.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '../utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	// Icon-only button/link. Distinct from `Button size="icon"` in that it
+	// defaults to the muted-foreground + hover:bg-accent "toolbar glyph" look
+	// used pervasively in TopBar / file trees / tooltip dismiss buttons, and
+	// offers a 44×44 `tap` size for mobile hit targets.
+	export const iconButtonVariants = tv({
+		base: "inline-grid place-items-center shrink-0 rounded-md transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				// Default toolbar glyph: muted until hovered.
+				ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground',
+				outline:
+					'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
+				destructive: 'text-destructive hover:bg-destructive/10',
+			},
+			size: {
+				sm: 'size-8',
+				default: 'size-9',
+				lg: 'size-10',
+				// 44×44 — meets the recommended mobile tap target.
+				tap: 'size-11',
+			},
+		},
+		defaultVariants: {
+			variant: 'ghost',
+			size: 'default',
+		},
+	});
+
+	export type IconButtonVariant = VariantProps<typeof iconButtonVariants>['variant'];
+	export type IconButtonSize = VariantProps<typeof iconButtonVariants>['size'];
+
+	export type IconButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: IconButtonVariant;
+			size?: IconButtonSize;
+			/** Required for an icon-only control. */
+			'aria-label': string;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'ghost',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled = false,
+		children,
+		...restProps
+	}: IconButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="icon-button"
+		class={cn(iconButtonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled ? true : undefined}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="icon-button"
+		class={cn(iconButtonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/IconButton.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import IconButton, { iconButtonVariants } from './IconButton.svelte';
+
+/** A trivial snippet to pass as the icon child. */
+const icon = createRawSnippet(() => ({
+	render: () => `<svg data-testid="icon"></svg>`,
+}));
+
+describe('IconButton', () => {
+	it('renders as a <button> by default', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Notifications', children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]');
+		expect(el).toBeInTheDocument();
+		expect(el?.tagName).toBe('BUTTON');
+		expect(el).toHaveAttribute('type', 'button');
+	});
+
+	it('renders as an <a> when href is set', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Go home', href: '/home', children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]');
+		expect(el?.tagName).toBe('A');
+		expect(el).toHaveAttribute('href', '/home');
+	});
+
+	it('exposes the required aria-label on the control', () => {
+		const { getByLabelText } = render(IconButton, {
+			props: { 'aria-label': 'Search', children: icon },
+		});
+		expect(getByLabelText('Search')).toBeInTheDocument();
+	});
+
+	it('renders the icon child', () => {
+		const { getByTestId } = render(IconButton, {
+			props: { 'aria-label': 'Add', children: icon },
+		});
+		expect(getByTestId('icon')).toBeInTheDocument();
+	});
+
+	it('applies the default variant (ghost) and default size classes', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Default', children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]')!;
+		// ghost variant => muted-foreground; default size => size-9
+		expect(el.className).toContain('text-muted-foreground');
+		expect(el.className).toContain('size-9');
+	});
+
+	it('applies the tap size (44px / size-11) for mobile hit targets', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Tap', size: 'tap', children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]')!;
+		expect(el.className).toContain('size-11');
+	});
+
+	it.each([
+		['sm', 'size-8'],
+		['default', 'size-9'],
+		['lg', 'size-10'],
+		['tap', 'size-11'],
+	] as const)('applies the %s size class %s', (size, expectedClass) => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Sized', size, children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]')!;
+		expect(el.className).toContain(expectedClass);
+	});
+
+	it.each([
+		['ghost', 'text-muted-foreground'],
+		['outline', 'border'],
+		['default', 'bg-primary'],
+		['secondary', 'bg-secondary'],
+		['destructive', 'text-destructive'],
+	] as const)('applies the %s variant classes', (variant, expectedClass) => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Variant', variant, children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]')!;
+		expect(el.className).toContain(expectedClass);
+	});
+
+	it('disables the native button when disabled', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Disabled', disabled: true, children: icon },
+		});
+		const el = container.querySelector('button')!;
+		expect(el).toBeDisabled();
+	});
+
+	it('disables the anchor variant via aria-disabled and drops href', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Disabled link', href: '/x', disabled: true, children: icon },
+		});
+		const el = container.querySelector('a')!;
+		expect(el).toHaveAttribute('aria-disabled', 'true');
+		expect(el).not.toHaveAttribute('href');
+		expect(el).toHaveAttribute('role', 'link');
+		expect(el).toHaveAttribute('tabindex', '-1');
+	});
+
+	it('merges a custom class with the variant classes', () => {
+		const { container } = render(IconButton, {
+			props: { 'aria-label': 'Custom', class: 'my-custom-class', children: icon },
+		});
+		const el = container.querySelector('[data-slot="icon-button"]')!;
+		expect(el.className).toContain('my-custom-class');
+		expect(el.className).toContain('size-9');
+	});
+
+	it('forwards arbitrary props (e.g. data-testid) to the element', () => {
+		const { getByTestId } = render(IconButton, {
+			props: { 'aria-label': 'Forwarded', 'data-testid': 'fwd', children: icon },
+		});
+		expect(getByTestId('fwd').tagName).toBe('BUTTON');
+	});
+});
+
+describe('iconButtonVariants', () => {
+	it('returns base classes plus default variant/size', () => {
+		const cls = iconButtonVariants();
+		expect(cls).toContain('inline-grid');
+		expect(cls).toContain('text-muted-foreground'); // ghost default
+		expect(cls).toContain('size-9'); // default size
+	});
+
+	it('honours explicit variant + size args', () => {
+		const cls = iconButtonVariants({ variant: 'destructive', size: 'tap' });
+		expect(cls).toContain('text-destructive');
+		expect(cls).toContain('size-11');
+	});
+});

package/src/lib/components/InlineCode.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../utils.js';
+
+	type Props = {
+		/** Code text. If `children` is provided, that wins. */
+		code?: string;
+		children?: Snippet;
+		class?: string;
+	};
+
+	const { code, children, class: className }: Props = $props();
+</script>
+
+<!--
+  Inline `<code>` — single-line, no syntax highlighting (intentionally cheap;
+  pages with hundreds of inline code spans should not load Shiki). Pair with
+  `<CodeBlock>` for multi-line / highlighted samples.
+-->
+<code
+	data-slot="inline-code"
+	class={cn(
+		'bg-muted/60 text-foreground border-border/60 rounded border px-1.5 py-0.5 font-mono text-[0.875em]',
+		className,
+	)}
+>
+	{#if children}{@render children()}{:else}{code}{/if}
+</code>