@nqmcreative/ui 0.3.0 → 0.4.1

package/cli/index.mjs

@@ -153,6 +153,39 @@ async function write(path, content, label) {
 
 /* -------------------------------------------------------------- detection -- */
 
+/**
+ * Which kind of project this is.
+ *
+ * The library itself is plain Svelte 5 — no `$app/*`, no `$env/*`, no
+ * `@sveltejs/kit` anywhere in it — so a framework only decides where four
+ * things live:
+ *
+ *   kit      src/app.css          src/app.html            src/routes/+layout.svelte
+ *   vite     src/app.css          index.html              src/main.ts
+ *   laravel  resources/css/…      resources/views/…       the @vite directive
+ */
+function detectFramework(deps) {
+	if ('@sveltejs/kit' in deps) return 'kit';
+	if (existsSync(join(cwd, 'artisan'))) return 'laravel';
+	return 'vite';
+}
+
+const FRAMEWORK_LABEL = {
+	kit: 'SvelteKit',
+	laravel: 'Laravel + Svelte',
+	vite: 'Svelte + Vite'
+};
+
+/** The first candidate that exists, or the first one as the place to create. */
+function pickPath(candidates) {
+	return candidates.find((path) => existsSync(join(cwd, path))) ?? candidates[0];
+}
+
+/** The one that exists, or null — for files we patch but never invent. */
+function findPath(candidates) {
+	return candidates.find((path) => existsSync(join(cwd, path))) ?? null;
+}
+
 async function detectProject() {
 	const pkgPath = join(cwd, 'package.json');
 	if (!existsSync(pkgPath)) fail('no package.json here — run this inside your project');
@@ -160,17 +193,156 @@ async function detectProject() {
 	const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
 	const deps = { ...pkg.dependencies, ...pkg.devDependencies };
 
-	const isKit = '@sveltejs/kit' in deps;
+	const framework = detectFramework(deps);
+	const isKit = framework === 'kit';
 	const hasTailwind = '@tailwindcss/vite' in deps || 'tailwindcss' in deps;
 	const hasUi = '@nqmcreative/ui' in deps;
+	// Kit brings its own; everywhere else the components are .svelte files in
+	// node_modules and something has to compile them.
+	const hasCompiler = isKit || '@sveltejs/vite-plugin-svelte' in deps;
 
 	// Where the Tailwind entry CSS lives, or should.
-	const candidates = isKit
-		? ['src/app.css', 'src/routes/+layout.css', 'src/app.postcss']
-		: ['src/app.css', 'src/style.css', 'src/main.css'];
-	const css = candidates.find((path) => existsSync(join(cwd, path))) ?? candidates[0];
+	const css = pickPath(
+		{
+			kit: ['src/app.css', 'src/routes/+layout.css', 'src/app.postcss'],
+			laravel: ['resources/css/app.css'],
+			vite: ['src/app.css', 'src/style.css', 'src/main.css']
+		}[framework]
+	);
+
+	// The document head, for the font preconnect and the no-flash theme script.
+	// Kit gets one written if it is missing; the other two are only patched,
+	// because guessing at someone's Blade layout would do more harm than a
+	// printed reminder.
+	const head = {
+		kit: 'src/app.html',
+		laravel: findPath([
+			'resources/views/app.blade.php',
+			'resources/views/layouts/app.blade.php',
+			'resources/views/components/layouts/app.blade.php',
+			'resources/views/welcome.blade.php'
+		]),
+		vite: findPath(['index.html'])
+	}[framework];
+
+	// Where the entry CSS gets imported. Laravel has nowhere: the `@vite`
+	// directive in the Blade layout links it directly.
+	const entry = {
+		kit: 'src/routes/+layout.svelte',
+		laravel: null,
+		vite: findPath(['src/main.ts', 'src/main.js'])
+	}[framework];
+
+	return {
+		pkg,
+		deps,
+		framework,
+		isKit,
+		hasTailwind,
+		hasUi,
+		hasCompiler,
+		css: join(cwd, css),
+		cssRel: css,
+		head,
+		entry
+	};
+}
 
-	return { pkg, deps, isKit, hasTailwind, hasUi, css: join(cwd, css), cssRel: css };
+/* ------------------------------------------------------------------ head -- */
+
+/** Escapes a literal for use inside a RegExp — the markers contain `%` and `/`. */
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/** The two things that have to run before first paint, in document order. */
+function headAdditions(style, html) {
+	const additions = [];
+	if (style.fonts && !html.includes('fonts.gstatic.com')) {
+		additions.push(`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />`);
+	}
+	if (!html.includes('nqm-theme')) {
+		additions.push(
+			`<script>`,
+			`\tconst saved = localStorage.getItem('nqm-theme');`,
+			`\tif (saved === 'dark' || saved === 'light') document.documentElement.classList.add(saved);`,
+			`</script>`
+		);
+	}
+	return additions;
+}
+
+/**
+ * Puts them in the document head, wherever that is for this framework.
+ *
+ * Kit renders into a `%sveltekit.head%` placeholder; a Vite index.html and a
+ * Blade layout both have a real `</head>` to sit above. When there is no file
+ * to patch — or no marker in it — the lines are printed instead of guessed at.
+ */
+async function wireHead(project, style) {
+	const { framework, head } = project;
+
+	const printByHand = (additions, reason) => {
+		log();
+		warn(reason);
+		log(additions.map((line) => c.cyan(`    ${line}`)).join('\n'));
+	};
+
+	if (!head) {
+		printByHand(
+			headAdditions(style, ''),
+			framework === 'laravel'
+				? 'no Blade layout found — put these inside <head> in yours:'
+				: 'no index.html found — put these inside its <head>:'
+		);
+		return;
+	}
+
+	const htmlPath = join(cwd, head);
+	let html = await readOr(htmlPath);
+
+	if (!html && framework === 'kit') {
+		// Some `sv create` templates omit it and let SvelteKit fall back to a
+		// built-in. Write the standard one so there is somewhere to put the
+		// preconnect and the no-flash theme script.
+		html = [
+			'<!doctype html>',
+			'<html lang="en">',
+			'	<head>',
+			'		<meta charset="utf-8" />',
+			'		<meta name="viewport" content="width=device-width, initial-scale=1" />',
+			'		%sveltekit.head%',
+			'	</head>',
+			'	<body data-sveltekit-preload-data="hover">',
+			'		<div style="display: contents">%sveltekit.body%</div>',
+			'	</body>',
+			'</html>',
+			''
+		].join('\n');
+		skip('src/app.html was missing — creating it');
+	}
+
+	const additions = headAdditions(style, html);
+	if (additions.length === 0) {
+		skip(`${head} already wired`);
+		return;
+	}
+
+	const marker = framework === 'kit' ? '%sveltekit.head%' : '</head>';
+	if (!html.includes(marker)) {
+		printByHand(additions, `${head} has no ${marker} — add these by hand, inside <head>:`);
+		return;
+	}
+
+	// Matched with its own indentation so the block lands at the right depth,
+	// and replaced through a function so a `$` in the lines stays literal.
+	html = html.replace(new RegExp(`([ \\t]*)${escapeRe(marker)}`), (_match, indent) => {
+		// The placeholder is itself a child of <head>; a closing tag is not, so
+		// its children sit one level deeper — in whichever unit the file uses.
+		const unit = indent.startsWith('\t') ? '\t' : '    ';
+		const inner = framework === 'kit' ? indent : `${indent}${unit}`;
+		const body = additions.map((line) => line.replace(/^\t/, unit));
+		return `${inner}${body.join(`\n${inner}`)}\n${indent}${marker}`;
+	});
+	await write(htmlPath, html, head);
 }
 
 /** How many `../` from the CSS file up to node_modules. */
@@ -188,7 +360,7 @@ async function init() {
 
 	log();
 	log(c.bold(`  @nqmcreative/ui — ${style.title}`));
-	log(c.dim(`  ${project.isKit ? 'SvelteKit' : 'Svelte + Vite'} project detected`));
+	log(c.dim(`  ${FRAMEWORK_LABEL[project.framework]} project detected`));
 	log();
 
 	if (!project.hasUi) {
@@ -203,6 +375,13 @@ async function init() {
 		log();
 	}
 
+	if (!project.hasCompiler) {
+		// The package ships .svelte files, so the app compiles them itself.
+		warn('nothing here compiles Svelte components:');
+		log(c.cyan('    bun add -d svelte @sveltejs/vite-plugin-svelte'));
+		log();
+	}
+
 	/* --- 1. the entry CSS --- */
 	const source = sourcePath(project.cssRel);
 	const lines = [
@@ -245,85 +424,62 @@ async function init() {
 		await write(project.css, body, project.cssRel);
 	}
 
-	/* --- 2. app.html: font preconnect + no-flash theme --- */
-	if (project.isKit) {
-		const htmlPath = join(cwd, 'src/app.html');
-		let html = await readOr(htmlPath);
-		if (!html) {
-			// Some `sv create` templates omit it and let SvelteKit fall back to a
-			// built-in. Write the standard one so there is somewhere to put the
-			// preconnect and the no-flash theme script.
-			html = [
-				'<!doctype html>',
-				'<html lang="en">',
-				'	<head>',
-				'		<meta charset="utf-8" />',
-				'		<meta name="viewport" content="width=device-width, initial-scale=1" />',
-				'		%sveltekit.head%',
-				'	</head>',
-				'	<body data-sveltekit-preload-data="hover">',
-				'		<div style="display: contents">%sveltekit.body%</div>',
-				'	</body>',
-				'</html>',
-				''
-			].join('\n');
-			skip('src/app.html was missing — creating it');
-		}
-		{
-			// Unindented — `%sveltekit.head%` already sits at its own indentation,
-			// so the join below supplies it and the first line does not double up.
-			const additions = [];
-			if (style.fonts && !html.includes('fonts.gstatic.com')) {
-				additions.push(`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />`);
-			}
-			if (!html.includes('nqm-theme')) {
-				additions.push(
-					`<script>`,
-					`\tconst saved = localStorage.getItem('nqm-theme');`,
-					`\tif (saved === 'dark' || saved === 'light') document.documentElement.classList.add(saved);`,
-					`</script>`
-				);
-			}
-			if (additions.length === 0) {
-				skip('src/app.html already wired');
-			} else if (!html.includes('%sveltekit.head%')) {
-				warn('src/app.html has no %sveltekit.head% — add these by hand:');
-				log(additions.map((line) => `\t\t${line}`).join('\n'));
-			} else {
-				const indent = /([ \t]*)%sveltekit\.head%/.exec(html)?.[1] ?? '\t\t';
-				html = html.replace(
-					'%sveltekit.head%',
-					`${additions.join(`\n${indent}`)}\n${indent}%sveltekit.head%`
-				);
-				await write(htmlPath, html, 'src/app.html');
-			}
-		}
+	// Laravel keeps its markup outside resources/css, so automatic detection
+	// never reaches it. These are the project's own lines, not ours — printed
+	// rather than written, so removing them stays possible.
+	if (project.framework === 'laravel' && !/@source ['"]\.\.\/(js|views)/.test(body)) {
+		log();
+		warn(`Tailwind also has to see your own markup — add to ${project.cssRel}:`);
+		log(c.cyan(`    @source '../js';`));
+		log(c.cyan(`    @source '../views';`));
 	}
 
+	/* --- 2. the document head: font preconnect + no-flash theme --- */
+	await wireHead(project, style);
+
 	/* --- 3. remind about the vite plugin, which we will not rewrite --- */
 	const viteConfig =
-		['vite.config.ts', 'vite.config.js'].map((f) => join(cwd, f)).find((f) => existsSync(f)) ??
-		null;
+		['vite.config.ts', 'vite.config.js', 'vite.config.mjs']
+			.map((f) => join(cwd, f))
+			.find((f) => existsSync(f)) ?? null;
 	const viteSource = viteConfig ? await readOr(viteConfig) : '';
 	if (!viteSource.includes('@tailwindcss/vite')) {
+		const plugins = {
+			kit: `plugins: [tailwindcss(), sveltekit()]`,
+			laravel: `plugins: [laravel({ input: ['${project.cssRel}', 'resources/js/app.js'] }), tailwindcss(), svelte()]`,
+			vite: `plugins: [tailwindcss(), svelte()]`
+		}[project.framework];
+		const after = project.framework === 'kit' ? 'sveltekit()' : 'svelte()';
+
 		log();
 		warn(
-			`add the Tailwind plugin to ${viteConfig ? relative(cwd, viteConfig) : 'your vite config'} — before sveltekit():`
+			`add the Tailwind plugin to ${viteConfig ? relative(cwd, viteConfig) : 'your vite config'} — before ${after}:`
 		);
 		log(c.cyan(`    import tailwindcss from '@tailwindcss/vite';`));
-		log(c.cyan(`    plugins: [tailwindcss(), sveltekit()]`));
+		log(c.cyan(`    ${plugins}`));
 	} else {
 		skip('vite config already has the Tailwind plugin');
 	}
 
 	/* --- 4. import the CSS once --- */
-	if (project.isKit) {
-		const layoutPath = join(cwd, 'src/routes/+layout.svelte');
+	if (project.framework === 'laravel') {
+		// Nothing imports it: the Blade layout hands the path to Vite, which is
+		// also what makes `php artisan serve` pick up the built file.
+		const blade = project.head ? await readOr(join(cwd, project.head)) : '';
+		if (blade.includes(project.cssRel)) {
+			skip(`${project.head} already loads ${project.cssRel}`);
+		} else {
+			log();
+			warn(`load the CSS from your Blade layout, inside <head>:`);
+			log(c.cyan(`    @vite(['${project.cssRel}', 'resources/js/app.js'])`));
+		}
+	} else if (project.framework === 'kit') {
+		const layoutPath = join(cwd, project.entry);
 		let layout = await readOr(layoutPath);
 		const line = `import '../app.css';`;
 
 		if (layout.includes('app.css')) {
-			skip('src/routes/+layout.svelte already imports the CSS');
+			skip(`${project.entry} already imports the CSS`);
 		} else if (!layout.trim()) {
 			await write(
 				layoutPath,
@@ -335,16 +491,37 @@ async function init() {
 
 {@render children()}
 `,
-				'src/routes/+layout.svelte'
+				project.entry
 			);
 		} else if (/<script[^>]*>/.test(layout)) {
 			layout = layout.replace(/(<script[^>]*>\n)/, `$1\t${line}\n`);
-			await write(layoutPath, layout, 'src/routes/+layout.svelte');
+			await write(layoutPath, layout, project.entry);
 		} else {
 			log();
-			warn('import the CSS once, at the top of src/routes/+layout.svelte:');
+			warn(`import the CSS once, at the top of ${project.entry}:`);
 			log(c.cyan(`    ${line}`));
 		}
+	} else {
+		// Plain Vite: the entry module is the one thing every page loads.
+		const rel = project.entry
+			? relative(dirname(join(cwd, project.entry)), project.css)
+					.split(/[\\/]/)
+					.join('/')
+			: null;
+		const line = rel ? `import '${rel.startsWith('.') ? rel : `./${rel}`}';` : null;
+
+		if (!project.entry) {
+			log();
+			warn(`import ${project.cssRel} once, at the top of your entry module:`);
+			log(c.cyan(`    import './${project.cssRel.split('/').pop()}';`));
+		} else {
+			const source = await readOr(join(cwd, project.entry));
+			if (source.includes(line) || /import ['"][^'"]*app\.css['"]/.test(source)) {
+				skip(`${project.entry} already imports the CSS`);
+			} else {
+				await write(join(cwd, project.entry), `${line}\n${source}`, project.entry);
+			}
+		}
 	}
 
 	log();

package/dist/core/calendar.d.ts

@@ -1,3 +1,3 @@
 export declare function calendarKeyMove(key: string, focused: Date, weekStart: 0 | 1, shiftKey?: boolean): Date | null;
-/** The placeholder a text date field shows for a locale's part order. */
+/** The placeholder a text date field shows for a given part order. */
 export declare function dateHint(format: 'dmy' | 'mdy' | 'ymd'): string;

package/dist/core/calendar.js

@@ -30,7 +30,7 @@ export function calendarKeyMove(key, focused, weekStart, shiftKey = false) {
             return null;
     }
 }
-/** The placeholder a text date field shows for a locale's part order. */
+/** The placeholder a text date field shows for a given part order. */
 export function dateHint(format) {
     return { dmy: 'DD/MM/YYYY', mdy: 'MM/DD/YYYY', ymd: 'YYYY/MM/DD' }[format];
 }

package/dist/core/color.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Hex colours for the colour field.
+ *
+ * Only hex: it is the one notation `<input type="color">` accepts and the one
+ * every design tool copies to the clipboard. Anything else the app can convert
+ * before it binds.
+ */
+/**
+ * `abc`, `#ABC`, `#aabbcc` → `#aabbcc`. Returns `null` when it is not a hex
+ * colour, so a half-typed value can be left alone rather than corrected under
+ * the caret.
+ *
+ * Shorthand is expanded and alpha is dropped: the native swatch understands
+ * neither, and a value the swatch cannot show is worse than a rounded one.
+ */
+export declare function normaliseHex(text: string): string | null;
+/**
+ * True when a colour is dark enough to want light text on top of it.
+ *
+ * Rec. 601 luma rather than WCAG relative luminance — the threshold is for
+ * picking one of two label colours on a swatch, not for proving a contrast
+ * ratio, and this is the version everyone's design tokens are tuned against.
+ */
+export declare function isDark(hex: string): boolean;

package/dist/core/color.js

@@ -0,0 +1,39 @@
+/**
+ * Hex colours for the colour field.
+ *
+ * Only hex: it is the one notation `<input type="color">` accepts and the one
+ * every design tool copies to the clipboard. Anything else the app can convert
+ * before it binds.
+ */
+const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/**
+ * `abc`, `#ABC`, `#aabbcc` → `#aabbcc`. Returns `null` when it is not a hex
+ * colour, so a half-typed value can be left alone rather than corrected under
+ * the caret.
+ *
+ * Shorthand is expanded and alpha is dropped: the native swatch understands
+ * neither, and a value the swatch cannot show is worse than a rounded one.
+ */
+export function normaliseHex(text) {
+    const match = HEX.exec(text.trim());
+    if (!match)
+        return null;
+    let digits = match[1].toLowerCase();
+    if (digits.length <= 4)
+        digits = [...digits].map((digit) => digit + digit).join('');
+    return `#${digits.slice(0, 6)}`;
+}
+/**
+ * True when a colour is dark enough to want light text on top of it.
+ *
+ * Rec. 601 luma rather than WCAG relative luminance — the threshold is for
+ * picking one of two label colours on a swatch, not for proving a contrast
+ * ratio, and this is the version everyone's design tokens are tuned against.
+ */
+export function isDark(hex) {
+    const value = normaliseHex(hex);
+    if (!value)
+        return false;
+    const [r, g, b] = [1, 3, 5].map((at) => parseInt(value.slice(at, at + 2), 16));
+    return (r * 299 + g * 587 + b * 114) / 1000 < 140;
+}

package/dist/core/date.d.ts

@@ -21,12 +21,12 @@ export declare function addMonths(date: Date, months: number): Date;
  */
 export declare function monthGrid(month: Date, weekStart?: 0 | 1): Date[];
 /** Localised weekday initials, starting on `weekStart`. */
-export declare function weekdayNames(locale: string, weekStart?: 0 | 1): string[];
-export declare function monthLabel(month: Date, locale: string): string;
+export declare function weekdayNames(locale?: string, weekStart?: 0 | 1): string[];
+export declare function monthLabel(month: Date, locale?: string): string;
 /** `true` when `date` falls outside `min`/`max`, both inclusive and optional. */
 export declare function isOutOfRange(date: Date, min?: string, max?: string): boolean;
 export type DateFormat = 'dmy' | 'mdy' | 'ymd';
-/** Prints `YYYY-MM-DD` in the locale's part order, e.g. `31/12/2026`. */
+/** Prints `YYYY-MM-DD` in the chosen part order, e.g. `31/12/2026`. */
 export declare function formatISO(value: string, format: DateFormat, separator?: string): string;
 /**
  * The inverse of `formatISO`, forgiving about separators and single digits.

package/dist/core/date.js

@@ -69,7 +69,7 @@ export function isOutOfRange(date, min, max) {
         return true;
     return false;
 }
-/** Prints `YYYY-MM-DD` in the locale's part order, e.g. `31/12/2026`. */
+/** Prints `YYYY-MM-DD` in the chosen part order, e.g. `31/12/2026`. */
 export function formatISO(value, format, separator = '/') {
     const date = fromISO(value);
     if (!date)

package/dist/core/files.d.ts

@@ -29,7 +29,6 @@ export declare function sortFiles(incoming: FileList | File[] | null, rules?: Fi
     rejected: RejectedFile[];
 };
 /**
- * `900 B`, `2 MB`, `1.5 GB`. Units come from the locale so the number and its
- * suffix can be translated together.
+ * `900 B`, `2 MB`, `1.5 GB`. Pass `units` to relabel the suffixes.
  */
-export declare function formatSize(bytes: number, units: readonly string[]): string;
+export declare function formatSize(bytes: number, units?: readonly string[]): string;

package/dist/core/files.js

@@ -46,10 +46,9 @@ export function sortFiles(incoming, rules = {}) {
     return { accepted, rejected };
 }
 /**
- * `900 B`, `2 MB`, `1.5 GB`. Units come from the locale so the number and its
- * suffix can be translated together.
+ * `900 B`, `2 MB`, `1.5 GB`. Pass `units` to relabel the suffixes.
  */
-export function formatSize(bytes, units) {
+export function formatSize(bytes, units = ['B', 'KB', 'MB', 'GB']) {
     if (bytes < 1024)
         return `${bytes} ${units[0]}`;
     let value = bytes / 1024;

package/dist/core/index.d.ts

@@ -2,7 +2,7 @@
  * @nqmcreative/ui/core — everything the styles share.
  *
  * Behaviour, not looks: focus containment, keyboard navigation, date maths,
- * file validation, the toast queue, the locale strings. Nothing in here
+ * file validation, the toast queue. Nothing in here
  * renders anything, and nothing in here knows which style is being used.
  *
  * Styles are free to ignore any of it — but there is no `matte` version of a
@@ -25,7 +25,14 @@ export { pageRange } from './pagination.js';
 export { sortFiles, matchesAccept, formatSize } from './files.js';
 export type { RejectedFile, FileRules } from './files.js';
 export { passwordScore } from './password.js';
-export { clampToStep, percentOf, stepDecimals } from './number.js';
+export { clampToStep, formatGrouped, parseGrouped, percentOf, stepDecimals } from './number.js';
+export type { GroupOptions } from './number.js';
+export { caretIndex, clearFrom, fillFrom, sanitisePin } from './pin.js';
+export type { PinMode } from './pin.js';
+export { addTag, splitTags } from './tags.js';
+export type { TagRules, TagRejection } from './tags.js';
+export { normaliseHex, isDark } from './color.js';
+export { MINUTES_IN_DAY, clampTime, formatClock, formatTime, parseTime, stepTime } from './time.js';
 export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
 export type { DateFormat } from './date.js';
 export { calendarKeyMove, dateHint } from './calendar.js';
@@ -33,5 +40,3 @@ export { toast } from './toast.svelte.js';
 export type { Toast, ToastOptions, ToastAction } from './toast.svelte.js';
 export { applyTheme, storedTheme, persistTheme, nextTheme } from './theme.svelte.js';
 export type { Theme } from './theme.svelte.js';
-export { locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore } from './locale.svelte.js';
-export type { Locale } from './locale.svelte.js';

package/dist/core/index.js

@@ -2,7 +2,7 @@
  * @nqmcreative/ui/core — everything the styles share.
  *
  * Behaviour, not looks: focus containment, keyboard navigation, date maths,
- * file validation, the toast queue, the locale strings. Nothing in here
+ * file validation, the toast queue. Nothing in here
  * renders anything, and nothing in here knows which style is being used.
  *
  * Styles are free to ignore any of it — but there is no `matte` version of a
@@ -23,7 +23,11 @@ export { nextSort, sortRows, toggleKey } from './table.js';
 export { pageRange } from './pagination.js';
 export { sortFiles, matchesAccept, formatSize } from './files.js';
 export { passwordScore } from './password.js';
-export { clampToStep, percentOf, stepDecimals } from './number.js';
+export { clampToStep, formatGrouped, parseGrouped, percentOf, stepDecimals } from './number.js';
+export { caretIndex, clearFrom, fillFrom, sanitisePin } from './pin.js';
+export { addTag, splitTags } from './tags.js';
+export { normaliseHex, isDark } from './color.js';
+export { MINUTES_IN_DAY, clampTime, formatClock, formatTime, parseTime, stepTime } from './time.js';
 /* --- dates --- */
 export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
 export { calendarKeyMove, dateHint } from './calendar.js';
@@ -31,5 +35,3 @@ export { calendarKeyMove, dateHint } from './calendar.js';
 export { toast } from './toast.svelte.js';
 /* --- theme --- */
 export { applyTheme, storedTheme, persistTheme, nextTheme } from './theme.svelte.js';
-/* --- locale --- */
-export { locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore } from './locale.svelte.js';

package/dist/core/number.d.ts

@@ -5,3 +5,25 @@ export declare function stepDecimals(step: number): number;
 export declare function clampToStep(value: number, min: number, max: number, step: number): number;
 /** Position of `value` within `min…max`, as 0–100. */
 export declare function percentOf(value: number, min: number, max: number): number;
+/**
+ * How a grouped number is written. Separators are the app's to choose rather
+ * than `Intl`'s, because the field has to *parse* what it prints — and a
+ * locale that groups with a non-breaking space produces a character nobody can
+ * type back in.
+ */
+export interface GroupOptions {
+    /** Thousands separator. */
+    group?: string;
+    /** Decimal separator. */
+    decimal?: string;
+    /** Fixed decimal places. `undefined` keeps whatever was typed. */
+    precision?: number;
+}
+/** `1234567.5` → `1,234,567.50`, or `1.234.567,50` in a locale that swaps them. */
+export declare function formatGrouped(value: number, options?: GroupOptions): string;
+/**
+ * The inverse, and deliberately forgiving: anything that is not a digit, a
+ * minus or the decimal separator is dropped, so a pasted `Rp 1.250.000,-`
+ * still reads as a number. `null` means there were no digits at all.
+ */
+export declare function parseGrouped(text: string, options?: GroupOptions): number | null;

package/dist/core/number.js

@@ -15,3 +15,36 @@ export function percentOf(value, min, max) {
         return 0;
     return Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
 }
+/** `1234567.5` → `1,234,567.50`, or `1.234.567,50` in a locale that swaps them. */
+export function formatGrouped(value, options = {}) {
+    const { group = ',', decimal = '.', precision } = options;
+    if (!Number.isFinite(value))
+        return '';
+    const fixed = precision === undefined ? String(value) : value.toFixed(precision);
+    const negative = fixed.startsWith('-');
+    const [whole, fraction] = (negative ? fixed.slice(1) : fixed).split('.');
+    // Replaced through a function so a separator that looks like `$&` stays put.
+    const grouped = whole.replace(/\B(?=(\d{3})+(?!\d))/g, () => group);
+    return `${negative ? '-' : ''}${grouped}${fraction ? decimal + fraction : ''}`;
+}
+/**
+ * The inverse, and deliberately forgiving: anything that is not a digit, a
+ * minus or the decimal separator is dropped, so a pasted `Rp 1.250.000,-`
+ * still reads as a number. `null` means there were no digits at all.
+ */
+export function parseGrouped(text, options = {}) {
+    const { decimal = '.' } = options;
+    let cleaned = '';
+    for (const char of text) {
+        if (char === decimal)
+            cleaned += '.';
+        else if (char >= '0' && char <= '9')
+            cleaned += char;
+        else if (char === '-' && cleaned === '')
+            cleaned += char;
+    }
+    if (!cleaned || cleaned === '-' || cleaned === '.')
+        return null;
+    const value = Number(cleaned);
+    return Number.isFinite(value) ? value : null;
+}

package/dist/core/password.d.ts

@@ -1,5 +1,5 @@
 /**
- * Password strength, 0–4, matching the five labels in the locale.
+ * Password strength, 0–4, for labelling as you see fit.
  *
  * Deliberately simple — length plus character variety. It is a nudge in the
  * form, not a security control, and anything cleverer would need a dictionary

package/dist/core/password.js

@@ -1,5 +1,5 @@
 /**
- * Password strength, 0–4, matching the five labels in the locale.
+ * Password strength, 0–4, for labelling as you see fit.
  *
  * Deliberately simple — length plus character variety. It is a nudge in the
  * form, not a security control, and anything cleverer would need a dictionary