@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/input/color/color-control.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { getPreset } from '../../../context';
+	import { resolvePreset } from '../../atom';
+	import { cn, toClassValue } from '../../../utils';
+	import type { PresetModuleName } from '../../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from '../bond.svelte';
+	import type { InputColorControlProps } from './types';
+	import type { ColorFormat, ChannelValues, ChannelDef } from './types';
+	import Segment from './segment.svelte';
+	import { FORMAT_DEFS, parseColor, buildColor, detectFormat } from './shared';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		format: formatProp = undefined,
+		alpha: showAlpha = false,
+		placeholder = 'oklch(0.5 0.2 250deg)',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.color',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputColorControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Active format ─────────────────────────────────────────────────────
+	const activeFormat = $derived<ColorFormat>(formatProp ?? detectFormat(value) ?? 'hex');
+	const def = $derived(FORMAT_DEFS[activeFormat]);
+
+	// ── Parsed channels ───────────────────────────────────────────────────
+	const parsed = $derived(parseColor(value));
+	const channels = $derived<ChannelValues>(
+		parsed?.format === activeFormat ? parsed.channels : {}
+	);
+	const alpha = $derived<number | undefined>(
+		parsed?.format === activeFormat ? parsed.alpha : undefined
+	);
+
+	// Whether to render the alpha segment
+	const hasAlpha = $derived(def.alpha && (showAlpha || alpha !== undefined));
+
+	// Alpha channel definition (stable, not inline)
+	const alphaDef: ChannelDef = { id: 'alpha', label: 'Alpha', kind: 'float', min: 0, max: 1, precision: 2 };
+
+	// ── Segment refs ──────────────────────────────────────────────────────
+	let segRefs = $state<Array<{ focus(): void } | undefined>>([]);
+
+	const segCount = $derived(def.channels.length + (hasAlpha ? 1 : 0));
+
+	function focusSeg(i: number) {
+		segRefs[Math.max(0, Math.min(segCount - 1, i))]?.focus();
+	}
+
+	// ── Keep bond in sync ────────────────────────────────────────────────
+	$effect(() => {
+		if (bond) bond.state.props.value = value;
+	});
+
+	// ── Emit helpers ─────────────────────────────────────────────────────
+	function emitLive(built: string) {
+		value = built;
+		if (bond) bond.state.props.value = built;
+		oninput?.(new Event('input'), { value: built });
+	}
+
+	function emitCommit(ev: Event, built: string) {
+		value = built;
+		if (bond) bond.state.props.value = built;
+		onchange?.(ev, { value: built });
+	}
+
+	// ── Channel change (live, from segment oninput) ───────────────────────
+	function handleChannelChange(channelId: string, val: number | string | undefined) {
+		const newChannels = channelId === 'alpha' ? channels : { ...channels, [channelId]: val };
+		const newAlpha    = channelId === 'alpha' ? (val as number | undefined) : alpha;
+		emitLive(buildColor(activeFormat, newChannels, newAlpha));
+	}
+
+	// ── Channel commit (on blur/Enter from segment) ───────────────────────
+	function handleChannelCommit(ev: Event, channelId: string, val: number | string | undefined) {
+		const newChannels = channelId === 'alpha' ? channels : { ...channels, [channelId]: val };
+		const newAlpha    = channelId === 'alpha' ? (val as number | undefined) : alpha;
+		emitCommit(ev, buildColor(activeFormat, newChannels, newAlpha));
+	}
+</script>
+
+<span
+	class={cn(
+		'inline-flex h-full items-center gap-0.5 px-2',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond),
+	)}
+	{...restProps}
+>
+	{#if value || def}
+		{@const isHexFmt   = activeFormat === 'hex'}
+		{@const isNamedFmt = activeFormat === 'named'}
+		{@const alphaIdx   = def.channels.length}
+
+		<!-- Named: single plain-text input -->
+		{#if isNamedFmt}
+			<input
+				type="text"
+				spellcheck={false}
+				autocomplete="off"
+				value={String(channels['name'] ?? '')}
+				placeholder="e.g. red, cornflowerblue"
+				{disabled}
+				{readonly}
+				class="min-w-[12ch] bg-transparent font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground"
+				oninput={(ev) => {
+					const v = (ev.currentTarget as HTMLInputElement).value.replace(/\s/g, '');
+					emitLive(v);
+				}}
+				onchange={(ev) => {
+					const v = (ev.currentTarget as HTMLInputElement).value.replace(/\s/g, '');
+					emitCommit(ev, v);
+				}}
+			/>
+
+		<!-- Hex: # prefix then R G B [A] -->
+		{:else if isHexFmt}
+			<span class="select-none font-mono text-sm text-muted-foreground">#</span>
+			{#each def.channels as ch, i (ch.id)}
+				<Segment
+					bind:this={segRefs[i]}
+					value={channels[ch.id]}
+					channel={ch}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange(ch.id, v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, ch.id, v)}
+					onfocusmove={(dir) => focusSeg(i + dir)}
+				/>
+			{/each}
+			{#if hasAlpha}
+				<span class="mx-0.5 select-none font-mono text-sm text-muted-foreground/50">·</span>
+				<Segment
+					bind:this={segRefs[alphaIdx]}
+					value={alpha}
+					channel={alphaDef}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange('alpha', v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, 'alpha', v)}
+					onfocusmove={(dir) => focusSeg(alphaIdx + dir)}
+				/>
+			{/if}
+
+		<!-- Functional: fn( ch sep ch sep ch [/ alpha] ) -->
+		{:else}
+			<span class="select-none font-mono text-sm text-blue-500 dark:text-blue-400">{def.fn}</span>
+			{#if def.colorspace}
+				<span class="select-none font-mono text-sm text-muted-foreground">(</span>
+				<span class="mr-1 select-none font-mono text-sm text-violet-500 dark:text-violet-400">{def.colorspace}</span>
+			{:else}
+				<span class="select-none font-mono text-sm text-muted-foreground">(</span>
+			{/if}
+
+			{#each def.channels as ch, i (ch.id)}
+				{#if i > 0}
+					<span class="select-none font-mono text-sm text-muted-foreground/50">{def.sep.trim() || ' '}</span>
+				{/if}
+				<Segment
+					bind:this={segRefs[i]}
+					value={channels[ch.id]}
+					channel={ch}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange(ch.id, v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, ch.id, v)}
+					onfocusmove={(dir) => focusSeg(i + dir)}
+				/>
+			{/each}
+
+			{#if hasAlpha}
+				<span class="mx-0.5 select-none font-mono text-sm text-muted-foreground">/</span>
+				<Segment
+					bind:this={segRefs[alphaIdx]}
+					value={alpha}
+					channel={alphaDef}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange('alpha', v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, 'alpha', v)}
+					onfocusmove={(dir) => focusSeg(alphaIdx + dir)}
+				/>
+			{/if}
+
+			<span class="select-none font-mono text-sm text-muted-foreground">)</span>
+		{/if}
+	{:else}
+		<span class="font-mono text-sm text-muted-foreground">{placeholder}</span>
+	{/if}
+</span>

package/dist/components/input/color/color-control.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputColorControlProps } from './types';
+declare const ColorControl: import("svelte").Component<InputColorControlProps, {}, "value">;
+type ColorControl = ReturnType<typeof ColorControl>;
+export default ColorControl;

package/dist/components/input/color/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Segment } from './segment.svelte';
+export { default as ColorControl } from './color-control.svelte';
+export { default as ColorSwatch } from './swatch.svelte';
+export * from './types';
+export * from './shared';

package/dist/components/input/color/index.js

@@ -0,0 +1,5 @@
+export { default as Segment } from './segment.svelte';
+export { default as ColorControl } from './color-control.svelte';
+export { default as ColorSwatch } from './swatch.svelte';
+export * from './types';
+export * from './shared';

package/dist/components/input/color/segment.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { ColorSegmentProps } from './types';
+
+	let {
+		value = undefined,
+		channel,
+		disabled = false,
+		readonly = false,
+		class: klass = '',
+		onchange,
+		oncommit,
+		onfocusmove,
+	}: ColorSegmentProps = $props();
+
+	let el = $state<HTMLSpanElement>();
+
+	const isHex    = $derived(channel.kind === 'hex');
+	const minWidth = $derived(
+		isHex
+			? 2
+			: Math.max(3, (channel.precision ?? 0) + Math.ceil(Math.log10(Math.abs(channel.max) + 1)) + (channel.suffix?.length ?? 0))
+	);
+
+	// ── Format ──────────────────────────────────────────────────────────
+	function formatValue(v: number | string | undefined): string {
+		if (v === undefined) return '';
+		if (isHex) return String(v).padStart(2, '0').toUpperCase();
+		const num = typeof v === 'string' ? parseFloat(v) : v;
+		if (isNaN(num)) return '';
+		const prec = channel.precision ?? 0;
+		return prec > 0 ? num.toFixed(prec) : String(Math.round(num));
+	}
+
+	// ── Display (when not focused) ───────────────────────────────────────
+	const displayText = $derived.by(() => {
+		const fmt = formatValue(value);
+		if (!fmt) return channel.label;
+		return channel.suffix ? fmt + channel.suffix : fmt;
+	});
+
+	const hasValue = $derived(value !== undefined);
+
+	// ── Sync DOM when not focused ────────────────────────────────────────
+	let isFocused = $state(false);
+
+	$effect(() => {
+		if (!el || isFocused) return;
+		void displayText;
+		untrack(() => {
+			if (el && el.textContent !== displayText) el.textContent = displayText;
+		});
+	});
+
+	// ── Clamp ───────────────────────────────────────────────────────────
+	function clamp(v: number): number {
+		return Math.max(channel.min, Math.min(channel.max, v));
+	}
+
+	// ── Strip suffix and parse el.textContent ────────────────────────────
+	function parseContent(): number | string | undefined {
+		let raw = (el?.textContent ?? '').trim();
+		// Strip suffix if present
+		if (channel.suffix && raw.endsWith(channel.suffix)) {
+			raw = raw.slice(0, -channel.suffix.length).trim();
+		}
+		if (isHex) {
+			return /^[0-9a-fA-F]{1,2}$/.test(raw)
+				? raw.padStart(2, '0').toUpperCase()
+				: undefined;
+		}
+		const n = parseFloat(raw);
+		return isNaN(n) ? undefined : clamp(n);
+	}
+
+	// ── Commit ──────────────────────────────────────────────────────────
+	function commit(ev: Event | null, andAdvance = false) {
+		const parsed = parseContent();
+		if (ev) {
+			onchange?.(parsed);
+			oncommit?.(ev, parsed);
+		} else {
+			onchange?.(parsed);
+		}
+		if (andAdvance) onfocusmove?.(1);
+	}
+
+	// ── Step ────────────────────────────────────────────────────────────
+	function step(dir: 1 | -1, multiplier = 1) {
+		if (isHex) {
+			const cur = typeof value === 'string' ? parseInt(value, 16) : (value as number | undefined) ?? 0;
+			onchange?.(clamp(cur + dir * multiplier).toString(16).padStart(2, '0').toUpperCase());
+		} else {
+			const cur = typeof value === 'number' ? value : parseFloat(String(value ?? channel.min));
+			const prec = channel.precision ?? 0;
+			const inc  = prec > 0 ? Math.pow(10, -prec) : 1;
+			onchange?.(clamp(parseFloat((cur + dir * inc * multiplier).toFixed(prec + 1))));
+		}
+	}
+
+	// ── Focus ───────────────────────────────────────────────────────────
+	function handleFocus() {
+		isFocused = true;
+		if (el) {
+			el.textContent = formatValue(value) || '';
+			// Place caret at end
+			const sel = window.getSelection();
+			if (sel && el.firstChild) {
+				const range = document.createRange();
+				range.selectNodeContents(el);
+				range.collapse(false);
+				sel.removeAllRanges();
+				sel.addRange(range);
+			}
+		}
+	}
+
+	// ── Blur ────────────────────────────────────────────────────────────
+	function handleBlur(ev: FocusEvent) {
+		isFocused = false;
+		commit(ev, false);
+		requestAnimationFrame(() => {
+			if (el && !isFocused) el.textContent = displayText;
+		});
+	}
+
+	// ── Keydown ─────────────────────────────────────────────────────────
+	function handleKeydown(ev: KeyboardEvent) {
+		if (disabled || readonly) return;
+
+		const { key } = ev;
+
+		const isAllowedChar = isHex
+			? /^[0-9a-fA-F]$/i.test(key)
+			: (key >= '0' && key <= '9') || key === '.' || key === '-';
+
+		if (key.length === 1 && !isAllowedChar && !ev.ctrlKey && !ev.metaKey) {
+			ev.preventDefault();
+			return;
+		}
+
+		if (key === 'ArrowUp' || key === 'ArrowDown') {
+			ev.preventDefault();
+			const dir        = key === 'ArrowUp' ? 1 : -1;
+			const multiplier = ev.shiftKey ? 10 : ev.altKey ? 0.1 : 1;
+			step(dir, multiplier);
+			requestAnimationFrame(() => {
+				if (el && isFocused) el.textContent = formatValue(value);
+			});
+			return;
+		}
+
+		if (key === 'ArrowLeft') {
+			const sel = window.getSelection();
+			if (sel?.rangeCount) {
+				const range = sel.getRangeAt(0);
+				if (range.startOffset === 0 && range.collapsed) {
+					ev.preventDefault();
+					commit(ev, false);
+					onfocusmove?.(-1);
+				}
+			}
+			return;
+		}
+
+		if (key === 'ArrowRight') {
+			const sel = window.getSelection();
+			if (sel?.rangeCount && el) {
+				const range = sel.getRangeAt(0);
+				const len   = el.textContent?.length ?? 0;
+				if (range.endOffset === len && range.collapsed) {
+					ev.preventDefault();
+					commit(ev, false);
+					onfocusmove?.(1);
+				}
+			}
+			return;
+		}
+
+		if (key === 'Enter') { ev.preventDefault(); commit(ev, false); return; }
+		if (key === 'Tab')   { commit(ev, false); return; }
+
+		if ((key === 'Backspace' || key === 'Delete') && !el?.textContent?.trim()) {
+			ev.preventDefault();
+			onchange?.(undefined);
+		}
+	}
+
+	// ── Paste ───────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const raw     = ev.clipboardData?.getData('text/plain') ?? '';
+		const allowed = isHex
+			? raw.replace(/[^0-9a-fA-F]/gi, '').slice(0, 2)
+			: raw.replace(/[^0-9.\-]/g, '');
+		if (!allowed || !el) return;
+
+		// Insert at cursor via Selection API (no execCommand)
+		const sel = window.getSelection();
+		if (!sel || !sel.rangeCount) {
+			el.textContent = allowed;
+		} else {
+			const range = sel.getRangeAt(0);
+			range.deleteContents();
+			const node = document.createTextNode(allowed);
+			range.insertNode(node);
+			range.setStartAfter(node);
+			range.collapse(true);
+			sel.removeAllRanges();
+			sel.addRange(range);
+		}
+	}
+
+	export function focus() {
+		el?.focus();
+	}
+</script>
+
+<span
+	bind:this={el}
+	role="spinbutton"
+	tabindex={disabled ? -1 : 0}
+	contenteditable={!disabled && !readonly ? 'plaintext-only' : undefined}
+	spellcheck={false}
+	aria-label={channel.label}
+	aria-disabled={disabled}
+	class={[
+		'inline-flex items-center justify-center px-0.5 text-center font-mono tabular-nums text-sm',
+		`min-w-[${minWidth}ch]`,
+		'focus:bg-foreground/10 focus:outline-none focus:rounded-sm',
+		hasValue ? 'text-foreground' : 'text-muted-foreground',
+		disabled && 'cursor-not-allowed opacity-50',
+		klass,
+	].filter(Boolean).join(' ')}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	oninput={() => {/* filtered in keydown; DOM read on commit */}}
+	onkeydown={handleKeydown}
+	onpaste={handlePaste}
+>{displayText}</span>

package/dist/components/input/color/segment.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ColorSegmentProps } from './types';
+declare const Segment: import("svelte").Component<ColorSegmentProps, {
+    focus: () => void;
+}, "">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

package/dist/components/input/color/shared.d.ts

@@ -0,0 +1,23 @@
+import type { ColorFormat, ChannelDef } from './types';
+export declare const COLOR_FN_SPACES: ColorFormat[];
+export interface FormatDef {
+    format: ColorFormat;
+    /** CSS function name, e.g. 'rgb', 'hsl', 'color' */
+    fn: string;
+    /** For color() format — the colorspace argument */
+    colorspace?: string;
+    /** Separator between channels: ' ' (modern) or ', ' (legacy) */
+    sep: ' ' | ', ';
+    channels: ChannelDef[];
+    /** Whether alpha channel is supported */
+    alpha: boolean;
+}
+export declare const FORMAT_DEFS: Record<ColorFormat, FormatDef>;
+export type ChannelValues = Record<string, number | string | undefined>;
+export declare function parseColor(raw: string): {
+    format: ColorFormat;
+    channels: ChannelValues;
+    alpha: number | undefined;
+} | undefined;
+export declare function buildColor(format: ColorFormat, channels: ChannelValues, alpha: number | undefined): string;
+export declare function detectFormat(raw: string): ColorFormat | undefined;