@marianmeres/stuic 3.46.0 → 3.47.2

package/dist/components/Book/Book.svelte

@@ -318,15 +318,9 @@
 	$effect(() => {
 		const current = activeSpread;
 		clearTimeout(_settleTimer);
-		// Small jump (±1): settle immediately (normal next/prev navigation)
-		if (Math.abs(current - settledSpread) <= 1) {
+		_settleTimer = setTimeout(() => {
 			settledSpread = current;
-		} else {
-			// Large jump (slider drag): debounce to avoid intermediate downloads
-			_settleTimer = setTimeout(() => {
-				settledSpread = current;
-			}, 120);
-		}
+		}, 120);
 	});
 
 	$effect(() => () => clearTimeout(_settleTimer));

package/dist/components/CronInput/CronInput.svelte

@@ -0,0 +1,517 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { ValidateOptions } from "../../actions/validate.svelte.js";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	export interface CronPreset {
+		label: string;
+		value: string;
+	}
+
+	export type CronInputMode = "predefined" | "manual";
+
+	export interface Props {
+		// Core
+		value?: string;
+		el?: HTMLElement;
+		id?: string;
+
+		// Mode toggle (overrides show* flags when defined)
+		mode?: CronInputMode;
+
+		// InputWrap standard props
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		renderSize?: "sm" | "md" | "lg" | string;
+		required?: boolean;
+		disabled?: boolean;
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		class?: string;
+		style?: string;
+
+		// InputWrap layout
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+		labelAfter?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+
+		// CronInput-specific
+		showPresets?: boolean;
+		showFields?: boolean;
+		showRawInput?: boolean;
+		showDescription?: boolean;
+		showNextRun?: boolean;
+		presets?: CronPreset[];
+		onchange?: (expression: string, valid: boolean) => void;
+
+		// Sub-element class overrides
+		classLabel?: string;
+		classLabelBox?: string;
+		classInputBox?: string;
+		classInputBoxWrap?: string;
+		classInputBoxWrapInvalid?: string;
+		classDescBox?: string;
+		classBelowBox?: string;
+		classFields?: string;
+		classField?: string;
+		classFieldLabel?: string;
+		classFieldInput?: string;
+		classPreset?: string;
+		classRaw?: string;
+		classSummary?: string;
+		classToggleButton?: string;
+	}
+
+	export const DEFAULT_PRESETS: CronPreset[] = [
+		{ label: "Every minute", value: "* * * * *" },
+		{ label: "Every 5 minutes", value: "*/5 * * * *" },
+		{ label: "Every 15 minutes", value: "*/15 * * * *" },
+		{ label: "Every 30 minutes", value: "*/30 * * * *" },
+		{ label: "Every hour", value: "0 * * * *" },
+		{ label: "Every 6 hours", value: "0 */6 * * *" },
+		{ label: "Daily at midnight", value: "0 0 * * *" },
+		{ label: "Daily at noon", value: "0 12 * * *" },
+		{ label: "Weekdays at 9:00", value: "0 9 * * 1-5" },
+		{ label: "Weekly (Sunday midnight)", value: "0 0 * * 0" },
+		{ label: "Monthly (1st at midnight)", value: "0 0 1 * *" },
+	];
+
+	const FIELD_DEFS = [
+		{ key: "minute", label: "Min", placeholder: "0-59" },
+		{ key: "hour", label: "Hour", placeholder: "0-23" },
+		{ key: "dayOfMonth", label: "Day", placeholder: "1-31" },
+		{ key: "month", label: "Month", placeholder: "1-12" },
+		{ key: "dayOfWeek", label: "Wday", placeholder: "0-6" },
+	] as const;
+
+	const MONTH_NAMES = [
+		"", "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+		"Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+	];
+
+	const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+	type FieldKey = (typeof FIELD_DEFS)[number]["key"];
+
+	function cronToHuman(expression: string): string {
+		const parts = expression.trim().split(/\s+/);
+		if (parts.length !== 5) return "";
+
+		const [minute, hour, dom, month, dow] = parts;
+		const segments: string[] = [];
+
+		// Minute
+		if (minute === "*") {
+			segments.push("every minute");
+		} else if (minute.startsWith("*/")) {
+			segments.push(`every ${minute.slice(2)} minutes`);
+		} else {
+			segments.push(`at minute ${minute}`);
+		}
+
+		// Hour
+		if (hour === "*") {
+			// implied by "every minute/N minutes"
+		} else if (hour.startsWith("*/")) {
+			segments.push(`every ${hour.slice(2)} hours`);
+		} else {
+			segments.push(`at ${hour.padStart(2, "0")}:${minute === "*" ? "00" : minute.padStart(2, "0")}`);
+			// remove the minute segment if we have a specific hour
+			if (minute !== "*" && !minute.includes("/")) {
+				segments.length = 0;
+				segments.push(`at ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`);
+			}
+		}
+
+		// Day of month
+		if (dom !== "*") {
+			if (dom.includes("-")) {
+				segments.push(`on days ${dom} of the month`);
+			} else if (dom.includes(",")) {
+				segments.push(`on days ${dom} of the month`);
+			} else {
+				const n = parseInt(dom);
+				const suffix = n === 1 ? "st" : n === 2 ? "nd" : n === 3 ? "rd" : "th";
+				segments.push(`on the ${n}${suffix}`);
+			}
+		}
+
+		// Month
+		if (month !== "*") {
+			if (month.includes("-")) {
+				const [s, e] = month.split("-").map(Number);
+				segments.push(`in ${MONTH_NAMES[s]}-${MONTH_NAMES[e]}`);
+			} else if (month.includes(",")) {
+				const names = month.split(",").map((m) => MONTH_NAMES[parseInt(m)] || m);
+				segments.push(`in ${names.join(", ")}`);
+			} else {
+				segments.push(`in ${MONTH_NAMES[parseInt(month)] || month}`);
+			}
+		}
+
+		// Day of week
+		if (dow !== "*") {
+			if (dow.includes("-")) {
+				const [s, e] = dow.split("-").map(Number);
+				segments.push(`on ${DAY_NAMES[s]}-${DAY_NAMES[e]}`);
+			} else if (dow.includes(",")) {
+				const names = dow.split(",").map((d) => DAY_NAMES[parseInt(d)] || d);
+				segments.push(`on ${names.join(", ")}`);
+			} else {
+				segments.push(`on ${DAY_NAMES[parseInt(dow)] || dow}`);
+			}
+		}
+
+		return segments.length ? segments[0].charAt(0).toUpperCase() + segments.join(", ").slice(1) : "";
+	}
+</script>
+
+<script lang="ts">
+	import { CronParser } from "@marianmeres/cron";
+	import {
+		validate as validateAction,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
+	import { tooltip } from "../../actions/index.js";
+	import { iconList, iconSlidersHorizontal } from "../../icons/index.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import InputWrap from "../Input/_internal/InputWrap.svelte";
+
+	let {
+		value = $bindable("* * * * *"),
+		el = $bindable(),
+		id = getId(),
+		//
+		mode = $bindable<CronInputMode | undefined>("predefined"),
+		//
+		label,
+		description,
+		renderSize = "md",
+		required = false,
+		disabled = false,
+		validate,
+		class: classProp,
+		style,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		labelAfter,
+		below,
+		//
+		showPresets = true,
+		showFields = true,
+		showRawInput = true,
+		showDescription = true,
+		showNextRun = true,
+		presets,
+		onchange,
+		//
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classInputBoxWrapInvalid,
+		classDescBox,
+		classBelowBox,
+		classFields,
+		classField,
+		classFieldLabel,
+		classFieldInput,
+		classPreset,
+		classRaw,
+		classSummary,
+		classToggleButton,
+	}: Props = $props();
+
+	// Mode toggle
+	const hasModeToggle = $derived(mode !== undefined);
+
+	function toggleMode() {
+		if (mode === "predefined") mode = "manual";
+		else mode = "predefined";
+	}
+
+	// Effective show flags — mode overrides explicit props when defined
+	let _showPresets = $derived(
+		hasModeToggle ? mode === "predefined" : showPresets
+	);
+	let _showFields = $derived(
+		hasModeToggle ? mode === "manual" : showFields
+	);
+	let _showRawInput = $derived(
+		hasModeToggle ? false : showRawInput
+	);
+	let _showDescription = $derived(
+		hasModeToggle ? mode === "manual" : showDescription
+	);
+	let _showNextRun = $derived(
+		hasModeToggle ? mode === "manual" : showNextRun
+	);
+
+	const BTN_CLS = [
+		"toggle-btn",
+		"px-2 rounded-r block",
+		"min-w-[44px] min-h-[44px]",
+		"flex items-center justify-center",
+	].join(" ");
+
+	// Internal field state
+	let fields = $state<Record<FieldKey, string>>({
+		minute: "*",
+		hour: "*",
+		dayOfMonth: "*",
+		month: "*",
+		dayOfWeek: "*",
+	});
+
+	let rawValue = $state("* * * * *");
+	let selectedPreset = $state("");
+	let error = $state("");
+
+	// Validation integration
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	// Track sync source to avoid loops
+	let _syncSource: "value" | "fields" | "raw" | "preset" | "" = "";
+
+	const _presets = $derived(presets ?? DEFAULT_PRESETS);
+
+	// Combine fields into expression
+	function fieldsToExpression(): string {
+		return FIELD_DEFS.map((d) => fields[d.key] || "*").join(" ");
+	}
+
+	// Split expression into fields
+	function expressionToFields(expr: string) {
+		const parts = expr.trim().split(/\s+/);
+		if (parts.length === 5) {
+			FIELD_DEFS.forEach((d, i) => {
+				fields[d.key] = parts[i];
+			});
+		}
+	}
+
+	// Match current expression to a preset
+	function matchPreset(expr: string): string {
+		const normalized = expr.trim().replace(/\s+/g, " ");
+		return _presets.find((p) => p.value === normalized)?.value ?? "";
+	}
+
+	// Validate expression using CronParser
+	function validateExpression(expr: string): boolean {
+		try {
+			new CronParser(expr);
+			error = "";
+			validation = undefined;
+			return true;
+		} catch (e: any) {
+			error = e.message || "Invalid cron expression";
+			validation = { valid: false, message: error };
+			return false;
+		}
+	}
+
+	// Sync external value → internal state
+	$effect(() => {
+		const v = value;
+		if (_syncSource === "fields" || _syncSource === "raw" || _syncSource === "preset") {
+			return;
+		}
+		_syncSource = "value";
+		expressionToFields(v);
+		rawValue = v;
+		selectedPreset = matchPreset(v);
+		validateExpression(v);
+		_syncSource = "";
+	});
+
+	// Handle field input changes
+	function onFieldInput() {
+		_syncSource = "fields";
+		const expr = fieldsToExpression();
+		rawValue = expr;
+		selectedPreset = matchPreset(expr);
+		const valid = validateExpression(expr);
+		if (valid) {
+			value = expr;
+		}
+		onchange?.(expr, valid);
+		_syncSource = "";
+	}
+
+	// Handle raw input changes
+	function onRawInput() {
+		_syncSource = "raw";
+		const expr = rawValue;
+		expressionToFields(expr);
+		selectedPreset = matchPreset(expr);
+		const valid = validateExpression(expr);
+		if (valid) {
+			value = expr;
+		}
+		onchange?.(expr, valid);
+		_syncSource = "";
+	}
+
+	// Handle preset selection
+	function onPresetChange() {
+		if (!selectedPreset) return;
+		_syncSource = "preset";
+		const expr = selectedPreset;
+		expressionToFields(expr);
+		rawValue = expr;
+		const valid = validateExpression(expr);
+		if (valid) {
+			value = expr;
+		}
+		onchange?.(expr, valid);
+		_syncSource = "";
+	}
+
+	// When only presets are visible, render as a plain select (no extra padding/border)
+	let presetsOnly = $derived(_showPresets && !_showFields && !_showRawInput && !_showDescription && !_showNextRun);
+
+	// Minute tick — triggers re-evaluation of "Next: ..." every 60s
+	let _tick = $state(0);
+	$effect(() => {
+		if (!_showNextRun) return;
+		const id = setInterval(() => _tick++, 60_000);
+		return () => clearInterval(id);
+	});
+
+	// Human-readable description
+	let humanDescription = $derived.by(() => {
+		if (!_showDescription && !_showNextRun) return "";
+		const desc = _showDescription ? cronToHuman(rawValue) : "";
+		if (!_showNextRun || error) return desc;
+		// read _tick to create reactive dependency
+		void _tick;
+		try {
+			const parser = new CronParser(rawValue);
+			const next = parser.getNextRun();
+			const fmt = next.toLocaleString("sv-SE", {
+				year: "numeric",
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit",
+			});
+			return desc ? `${desc}. Next: ${fmt}` : `Next: ${fmt}`;
+		} catch {
+			return desc;
+		}
+	});
+</script>
+
+<div bind:this={el}>
+	<InputWrap
+		{description}
+		class={classProp}
+		size={renderSize}
+		{id}
+		{label}
+		{labelAfter}
+		{below}
+		{required}
+		{disabled}
+		{labelLeft}
+		{labelLeftWidth}
+		{labelLeftBreakpoint}
+		{classLabel}
+		{classLabelBox}
+		{classInputBox}
+		{classInputBoxWrap}
+		classInputBoxWrapInvalid={twMerge(classInputBoxWrapInvalid)}
+		{classDescBox}
+		{classBelowBox}
+		{validation}
+		{style}
+	>
+		<div class="w-full flex">
+			<div
+				class={twMerge("stuic-cron-input-content", error && "has-error")}
+				data-presets-only={presetsOnly ? "" : undefined}
+			>
+				{#if _showPresets}
+					<select
+						class={twMerge("stuic-cron-input-preset", classPreset)}
+						bind:value={selectedPreset}
+						onchange={onPresetChange}
+						{disabled}
+					>
+						<option value="">Custom</option>
+						{#each _presets as p}
+							<option value={p.value}>{p.label}</option>
+						{/each}
+					</select>
+				{/if}
+
+				{#if _showFields}
+				<div class={twMerge("stuic-cron-input-fields", classFields)}>
+					{#each FIELD_DEFS as def}
+						<div class={twMerge("stuic-cron-input-field", classField)}>
+							<span class={twMerge("stuic-cron-input-field-label", classFieldLabel)}>
+								{def.label}
+							</span>
+							<input
+								type="text"
+								class={twMerge("stuic-cron-input-field-input", classFieldInput)}
+								bind:value={fields[def.key]}
+								oninput={onFieldInput}
+								placeholder={def.placeholder}
+								{disabled}
+								autocomplete="off"
+								spellcheck={false}
+							/>
+						</div>
+					{/each}
+				</div>
+				{/if}
+
+				{#if _showRawInput}
+					<input
+						type="text"
+						class={twMerge("stuic-cron-input-raw", classRaw)}
+						bind:value={rawValue}
+						oninput={onRawInput}
+						placeholder="* * * * *"
+						{disabled}
+						autocomplete="off"
+						spellcheck={false}
+					/>
+				{/if}
+
+				{#if (_showDescription || _showNextRun) && humanDescription}
+					<div class={twMerge("stuic-cron-input-summary", classSummary)}>
+						{humanDescription}
+					</div>
+				{/if}
+
+			</div>
+			{#if hasModeToggle}
+				<button
+					type="button"
+					class={twMerge(BTN_CLS, classToggleButton)}
+					onclick={toggleMode}
+					{disabled}
+					use:tooltip={() => ({
+						enabled: true,
+						content: mode === "predefined" ? "Manual input" : "Predefined presets",
+					})}
+				>
+					{#if mode === "predefined"}
+						{@html iconSlidersHorizontal({ size: 19 })}
+					{:else}
+						{@html iconList({ size: 19 })}
+					{/if}
+				</button>
+			{/if}
+		</div>
+	</InputWrap>
+</div>

package/dist/components/CronInput/CronInput.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { THC } from "../Thc/Thc.svelte";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+export interface CronPreset {
+    label: string;
+    value: string;
+}
+export type CronInputMode = "predefined" | "manual";
+export interface Props {
+    value?: string;
+    el?: HTMLElement;
+    id?: string;
+    mode?: CronInputMode;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    renderSize?: "sm" | "md" | "lg" | string;
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    class?: string;
+    style?: string;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    labelAfter?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    showPresets?: boolean;
+    showFields?: boolean;
+    showRawInput?: boolean;
+    showDescription?: boolean;
+    showNextRun?: boolean;
+    presets?: CronPreset[];
+    onchange?: (expression: string, valid: boolean) => void;
+    classLabel?: string;
+    classLabelBox?: string;
+    classInputBox?: string;
+    classInputBoxWrap?: string;
+    classInputBoxWrapInvalid?: string;
+    classDescBox?: string;
+    classBelowBox?: string;
+    classFields?: string;
+    classField?: string;
+    classFieldLabel?: string;
+    classFieldInput?: string;
+    classPreset?: string;
+    classRaw?: string;
+    classSummary?: string;
+    classToggleButton?: string;
+}
+export declare const DEFAULT_PRESETS: CronPreset[];
+declare const CronInput: import("svelte").Component<Props, {}, "el" | "value" | "mode">;
+type CronInput = ReturnType<typeof CronInput>;
+export default CronInput;

package/dist/components/CronInput/cron-next-run.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A reactive helper that parses a cron expression and computes the next run time,
+ * updating automatically every minute.
+ */
+export declare class CronNextRun {
+    #private;
+    constructor(expression?: string);
+    get expression(): string;
+    set expression(v: string);
+    /** The next Date when the cron expression matches, or null if invalid. */
+    get nextRun(): Date | null;
+    /** Formatted next run string (YYYY-MM-DD HH:MM), or empty string if invalid. */
+    get nextRunFormatted(): string;
+    /** Whether the current expression is valid. */
+    get valid(): boolean;
+    /** Stop the internal timer. Call when no longer needed. */
+    destroy(): void;
+}

package/dist/components/CronInput/cron-next-run.svelte.js

@@ -0,0 +1,63 @@
+import { CronParser } from "@marianmeres/cron";
+/**
+ * A reactive helper that parses a cron expression and computes the next run time,
+ * updating automatically every minute.
+ */
+export class CronNextRun {
+    #expression = $state("");
+    #tick = $state(0);
+    #interval;
+    constructor(expression = "* * * * *") {
+        this.#expression = expression;
+        this.#interval = setInterval(() => this.#tick++, 60_000);
+    }
+    get expression() {
+        return this.#expression;
+    }
+    set expression(v) {
+        this.#expression = v;
+    }
+    /** The next Date when the cron expression matches, or null if invalid. */
+    get nextRun() {
+        // read tick to create reactive dependency
+        void this.#tick;
+        try {
+            const parser = new CronParser(this.#expression);
+            return parser.getNextRun();
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Formatted next run string (YYYY-MM-DD HH:MM), or empty string if invalid. */
+    get nextRunFormatted() {
+        const next = this.nextRun;
+        if (!next)
+            return "";
+        // the "sv-SE" is a trick/hack to get ISO 8601-ish local time (not UTC)
+        return next.toLocaleString("sv-SE", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    }
+    /** Whether the current expression is valid. */
+    get valid() {
+        try {
+            new CronParser(this.#expression);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /** Stop the internal timer. Call when no longer needed. */
+    destroy() {
+        if (this.#interval) {
+            clearInterval(this.#interval);
+            this.#interval = undefined;
+        }
+    }
+}

package/dist/components/CronInput/index.css

@@ -0,0 +1,221 @@
+/* ============================================================================
+   CRON INPUT COMPONENT TOKENS
+   Override globally: :root { --stuic-cron-input-fields-gap: 1rem; }
+   Override locally:  <CronInput style="--stuic-cron-input-fields-gap: 1rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	--stuic-cron-input-fields-gap: 0.375rem;
+	--stuic-cron-input-section-gap: 0.25rem;
+	--stuic-cron-input-field-label-text: var(--stuic-color-muted-foreground);
+	--stuic-cron-input-summary-text: var(--stuic-color-muted-foreground);
+	--stuic-cron-input-error-text: var(--stuic-color-destructive);
+	--stuic-cron-input-field-bg: var(--stuic-color-background);
+	--stuic-cron-input-field-border: var(--stuic-color-border);
+	--stuic-cron-input-field-border-focus: var(--stuic-color-primary);
+}
+
+@layer components {
+	/* Content wrapper inside InputWrap — must fill the flex parent (.input-wrap > .flex) */
+	.stuic-cron-input-content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-cron-input-section-gap);
+		flex: 1;
+		min-width: 0;
+		padding: 0.5rem;
+	}
+
+	/* No padding in presets-only mode (the select handles its own) */
+	.stuic-cron-input-content[data-presets-only] {
+		padding: 0;
+	}
+
+	/* Preset select — styled as inner sub-input by default */
+	.stuic-cron-input-preset {
+		display: block;
+		width: 100%;
+		appearance: none;
+		-webkit-appearance: none;
+		border: 1px solid var(--stuic-cron-input-field-border);
+		border-radius: var(--stuic-input-radius);
+		background: var(--stuic-cron-input-field-bg);
+		color: var(--stuic-input-text);
+		font-family: var(--stuic-input-font-family);
+		font-size: var(--stuic-input-font-size-sm);
+		padding: 0.375rem 2rem 0.375rem 0.5rem;
+		cursor: pointer;
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+		background-position: right 0.5rem center;
+		background-repeat: no-repeat;
+		background-size: 1.5em 1.5em;
+		transition: border-color var(--stuic-input-transition);
+	}
+
+	.stuic-cron-input-preset:focus {
+		outline: none;
+		border-color: var(--stuic-cron-input-field-border-focus);
+	}
+
+	.stuic-cron-input-preset:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* Presets-only mode: select renders like a native FieldSelect (no inner border) */
+	.stuic-cron-input-content[data-presets-only] .stuic-cron-input-preset {
+		border: 0;
+		border-radius: 0;
+		background-color: transparent;
+		background-position: right 0.5rem center;
+		background-size: 1.5em 1.5em;
+		padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
+		padding-right: 2.5rem;
+		font-size: var(--stuic-input-font-size-md);
+		min-height: var(--stuic-input-min-height-md);
+	}
+
+	.stuic-input[data-size="sm"]
+		.stuic-cron-input-content[data-presets-only]
+		.stuic-cron-input-preset {
+		padding: var(--stuic-input-padding-y-sm) var(--stuic-input-padding-x-sm);
+		padding-right: 2.5rem;
+		font-size: var(--stuic-input-font-size-sm);
+		min-height: var(--stuic-input-min-height-sm);
+	}
+
+	.stuic-input[data-size="lg"]
+		.stuic-cron-input-content[data-presets-only]
+		.stuic-cron-input-preset {
+		padding: var(--stuic-input-padding-y-lg) var(--stuic-input-padding-x-lg);
+		padding-right: 2.5rem;
+		font-size: var(--stuic-input-font-size-lg);
+		min-height: var(--stuic-input-min-height-lg);
+	}
+
+	.stuic-cron-input-content[data-presets-only] .stuic-cron-input-preset:focus {
+		border: 0;
+	}
+
+	/* 5-column grid for fields */
+	.stuic-cron-input-fields {
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		gap: var(--stuic-cron-input-fields-gap);
+	}
+
+	/* Individual field */
+	.stuic-cron-input-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	/* Field label */
+	.stuic-cron-input-field-label {
+		font-size: 0.6875rem;
+		color: var(--stuic-cron-input-field-label-text);
+		text-transform: uppercase;
+		text-align: center;
+		letter-spacing: 0.05em;
+	}
+
+	/* Field input — must match base specificity of .stuic-input input:not(…)×4 */
+	.stuic-input
+		input.stuic-cron-input-field-input:not([type="checkbox"]):not([type="radio"]):not(
+			[type="range"]
+		):not([type="file"]) {
+		display: block;
+		width: 100%;
+		border: 1px solid var(--stuic-cron-input-field-border);
+		border-radius: var(--stuic-input-radius);
+		background: var(--stuic-cron-input-field-bg);
+		color: var(--stuic-input-text);
+		font-family: var(--font-mono, monospace);
+		font-size: var(--stuic-input-font-size-sm);
+		padding: 0.25rem;
+		min-height: 0;
+		text-align: center;
+		transition: border-color var(--stuic-input-transition);
+	}
+
+	.stuic-cron-input-field-input:focus {
+		outline: none;
+		border-color: var(--stuic-cron-input-field-border-focus);
+	}
+
+	.stuic-cron-input-field-input:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.stuic-cron-input-field-input::placeholder {
+		color: var(--stuic-input-placeholder);
+		opacity: 0.5;
+		font-family: var(--stuic-input-font-family);
+	}
+
+	/* Raw expression input */
+	.stuic-cron-input-raw {
+		display: block;
+		width: 100%;
+		border: 1px solid var(--stuic-cron-input-field-border);
+		border-radius: var(--stuic-input-radius);
+		background: var(--stuic-cron-input-field-bg);
+		color: var(--stuic-input-text);
+		font-family: var(--font-mono, monospace);
+		font-size: var(--stuic-input-font-size-sm);
+		padding: 0.375rem 0.5rem;
+		transition: border-color var(--stuic-input-transition);
+	}
+
+	.stuic-cron-input-raw:focus {
+		outline: none;
+		border-color: var(--stuic-cron-input-field-border-focus);
+	}
+
+	.stuic-cron-input-raw:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.stuic-cron-input-raw::placeholder {
+		color: var(--stuic-input-placeholder);
+		opacity: 0.5;
+	}
+
+	/* Summary / human description */
+	.stuic-cron-input-summary {
+		color: var(--stuic-cron-input-summary-text);
+		font-size: 0.8125rem;
+		line-height: 1.4;
+	}
+
+	/* Error message */
+	.stuic-cron-input-error {
+		color: var(--stuic-cron-input-error-text);
+		font-size: 0.8125rem;
+		line-height: 1.4;
+	}
+
+	/* Mode toggle button */
+	.stuic-cron-input-content + .toggle-btn {
+		color: var(--stuic-input-localized-toggle-text);
+		transition:
+			background var(--stuic-input-transition),
+			color var(--stuic-input-transition);
+	}
+
+	.stuic-cron-input-content + .toggle-btn:hover:not(:disabled) {
+		color: var(--stuic-input-localized-toggle-text-hover);
+		background: var(--stuic-input-localized-toggle-hover-bg);
+	}
+
+	/* Responsive: stack on narrow */
+	@media (max-width: 400px) {
+		.stuic-cron-input-fields {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+}

package/dist/components/CronInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CronInput, type Props as CronInputProps, type CronPreset, type CronInputMode, DEFAULT_PRESETS as CRON_DEFAULT_PRESETS, } from "./CronInput.svelte";
+export { CronNextRun } from "./cron-next-run.svelte.js";

package/dist/components/CronInput/index.js

@@ -0,0 +1,2 @@
+export { default as CronInput, DEFAULT_PRESETS as CRON_DEFAULT_PRESETS, } from "./CronInput.svelte";
+export { CronNextRun } from "./cron-next-run.svelte.js";

package/dist/components/DropdownMenu/index.css

@@ -10,7 +10,7 @@
 	--stuic-dropdown-menu-padding: calc(var(--spacing) * 1);
 	--stuic-dropdown-menu-gap: calc(var(--spacing) * 0.5);
 	--stuic-dropdown-menu-min-width: 12rem;
-	--stuic-dropdown-menu-transition: 150ms;
+	--stuic-dropdown-menu-transition: 100ms;
 
 	/* Dropdown container colors */
 	--stuic-dropdown-menu-bg: var(--stuic-color-background);

package/dist/icons/index.d.ts

@@ -39,8 +39,10 @@ export { iconLucideGrip as iconGrip } from "@marianmeres/icons-fns/lucide/iconLu
 export { iconLucideGripHorizontal as iconGripHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideGripHorizontal.js";
 export { iconLucideGripVertical as iconGripVertical } from "@marianmeres/icons-fns/lucide/iconLucideGripVertical.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";
+export { iconLucideList as iconList } from "@marianmeres/icons-fns/lucide/iconLucideList.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideSlidersHorizontal as iconSlidersHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideSlidersHorizontal.js";
 export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";

package/dist/icons/index.js

@@ -44,8 +44,10 @@ export { iconLucideGrip as iconGrip } from "@marianmeres/icons-fns/lucide/iconLu
 export { iconLucideGripHorizontal as iconGripHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideGripHorizontal.js";
 export { iconLucideGripVertical as iconGripVertical } from "@marianmeres/icons-fns/lucide/iconLucideGripVertical.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";
+export { iconLucideList as iconList } from "@marianmeres/icons-fns/lucide/iconLucideList.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideSlidersHorizontal as iconSlidersHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideSlidersHorizontal.js";
 export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";

package/dist/index.css

@@ -37,6 +37,7 @@ In practice:
 @import "./components/LoginForm/index.css";
 @import "./components/Checkout/index.css";
 @import "./components/CommandMenu/index.css";
+@import "./components/CronInput/index.css";
 @import "./components/DataTable/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";

package/dist/index.js

@@ -38,6 +38,7 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";

package/package.json

@@ -1,101 +1,100 @@
 {
-	"name": "@marianmeres/stuic",
-	"version": "3.46.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && pnpm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"package": "pnpm run prepack",
-		"package:watch": "svelte-kit sync && svelte-package --watch && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "eslint . && prettier --check .",
-		"test": "vitest --dir src/",
-		"svelte-check": "svelte-check",
-		"svelte-package": "svelte-package",
-		"rp": "pnpm run build && ./release.sh patch",
-		"rpm": "pnpm run build && ./release.sh minor",
-		"build:theme": "tsx scripts/generate-theme.ts",
-		"build:theme:all": "pnpm run build:theme --indir=src/lib/themes --outdir=src/lib/themes/css"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"docs",
-		"AGENTS.md",
-		"CLAUDE.md",
-		"API.md"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./utils": {
-			"types": "./dist/utils/index.d.ts",
-			"default": "./dist/utils/index.js"
-		},
-		"./themes/*": {
-			"types": "./dist/themes/*.d.ts",
-			"default": "./dist/themes/*.js"
-		},
-		"./themes/css/*": "./dist/themes/css/*",
-		"./phone-validation": {
-			"types": "./dist/components/Input/phone-validation.d.ts",
-			"default": "./dist/components/Input/phone-validation.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.39.4",
-		"@marianmeres/random-human-readable": "^1.6.1",
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.53.4",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@tailwindcss/cli": "^4.2.1",
-		"@tailwindcss/forms": "^0.5.11",
-		"@tailwindcss/typography": "^0.5.19",
-		"@tailwindcss/vite": "^4.2.1",
-		"@types/node": "^25.4.0",
-		"dotenv": "^16.6.1",
-		"eslint": "^9.39.4",
-		"globals": "^16.5.0",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.5.1",
-		"publint": "^0.3.18",
-		"svelte": "^5.53.9",
-		"svelte-check": "^4.4.5",
-		"tailwindcss": "^4.2.1",
-		"tsx": "^4.21.0",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.57.0",
-		"vite": "^7.3.1",
-		"vitest": "^3.2.4"
-	},
-	"dependencies": {
-		"@marianmeres/clog": "^3.15.2",
-		"@marianmeres/icons-fns": "^5.0.0",
-		"@marianmeres/item-collection": "^1.3.5",
-		"@marianmeres/paging-store": "^2.0.2",
-		"@marianmeres/parse-boolean": "^2.0.5",
-		"@marianmeres/ticker": "^1.16.5",
-		"@marianmeres/tree": "^2.2.5",
-		"esm-env": "^1.2.2",
-		"libphonenumber-js": "^1.12.39",
-		"runed": "^0.23.4",
-		"tailwind-merge": "^3.5.0"
-	}
-}
+  "name": "@marianmeres/stuic",
+  "version": "3.47.2",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "docs",
+    "AGENTS.md",
+    "CLAUDE.md",
+    "API.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./themes/*": {
+      "types": "./dist/themes/*.d.ts",
+      "default": "./dist/themes/*.js"
+    },
+    "./themes/css/*": "./dist/themes/css/*",
+    "./phone-validation": {
+      "types": "./dist/components/Input/phone-validation.d.ts",
+      "default": "./dist/components/Input/phone-validation.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@marianmeres/random-human-readable": "^1.6.1",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/cli": "^4.2.1",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^25.5.0",
+    "dotenv": "^16.6.1",
+    "eslint": "^9.39.4",
+    "globals": "^16.5.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "svelte": "^5.53.11",
+    "svelte-check": "^4.4.5",
+    "tailwindcss": "^4.2.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^7.3.1",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@marianmeres/clog": "^3.15.2",
+    "@marianmeres/cron": "^1.1.0",
+    "@marianmeres/icons-fns": "^5.0.0",
+    "@marianmeres/item-collection": "^1.3.5",
+    "@marianmeres/paging-store": "^2.0.2",
+    "@marianmeres/parse-boolean": "^2.0.5",
+    "@marianmeres/ticker": "^1.16.5",
+    "@marianmeres/tree": "^2.2.5",
+    "esm-env": "^1.2.2",
+    "libphonenumber-js": "^1.12.40",
+    "runed": "^0.23.4",
+    "tailwind-merge": "^3.5.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "package": "pnpm run prepack",
+    "package:watch": "svelte-kit sync && svelte-package --watch && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "eslint . && prettier --check .",
+    "test": "vitest --dir src/",
+    "svelte-check": "svelte-check",
+    "svelte-package": "svelte-package",
+    "rp": "pnpm run build && ./release.sh patch",
+    "rpm": "pnpm run build && ./release.sh minor",
+    "build:theme": "tsx scripts/generate-theme.ts",
+    "build:theme:all": "pnpm run build:theme --indir=src/lib/themes --outdir=src/lib/themes/css"
+  }
+}