@nqmcreative/ui 0.1.0 → 0.2.0

package/cli/index.mjs

@@ -23,7 +23,7 @@ const argv = process.argv.slice(2);
 const flags = new Set(argv.filter((a) => a.startsWith('--')));
 
 /** Flags that take a value, so the value is not mistaken for a positional. */
-const valueFlags = new Set(['--to']);
+const valueFlags = new Set(['--to', '--style']);
 const args = [];
 for (let i = 0; i < argv.length; i++) {
 	if (argv[i].startsWith('--')) {
@@ -66,15 +66,37 @@ async function registry() {
 	fail('registry.json not found — is the package installed correctly?');
 }
 
-/** Accepts `Button`, `button`, `date-picker` or the full subpath. */
+/** Accepts `Button`, `button`, `date-picker` or any style's full subpath. */
 function findComponent(list, query) {
-	const needle = query.toLowerCase().replace(/^@nqmcreative\/ui\//, '');
-	return list.find(
-		(item) =>
-			item.name.toLowerCase() === needle ||
-			item.subpath.endsWith(`/${needle}`) ||
-			item.subpath === query
-	);
+	const needle = query.toLowerCase().replace(/^@nqmcreative\/ui\/[a-z-]+\//, '');
+	return list.find((item) => item.name.toLowerCase() === needle || item.slug === needle);
+}
+
+/**
+ * The style to work in. There is no default on purpose: a component belongs to
+ * a style, and picking one by accident is the mistake this package exists to
+ * prevent. Asking once beats shipping the wrong look.
+ */
+function pickStyle(styles) {
+	const index = argv.indexOf('--style');
+	const wanted = index !== -1 ? argv[index + 1] : null;
+
+	if (!wanted) {
+		log();
+		log('  which style?');
+		log();
+		for (const style of styles) {
+			log(`    ${c.cyan(style.name.padEnd(8))} ${c.dim(style.description)}`);
+		}
+		log();
+		log(`  ${c.dim(`e.g. ${command} --style ${styles[0].name}`)}`);
+		log();
+		process.exit(1);
+	}
+
+	const style = styles.find((s) => s.name === wanted);
+	if (!style) fail(`unknown style "${wanted}" — try ${styles.map((s) => s.name).join(' or ')}`);
+	return style;
 }
 
 /* ------------------------------------------------------------ file edits -- */
@@ -128,10 +150,12 @@ function sourcePath(cssRel) {
 /* ------------------------------------------------------------------ init -- */
 
 async function init() {
+	const { styles } = await registry();
+	const style = pickStyle(styles);
 	const project = await detectProject();
 
 	log();
-	log(c.bold('  @nqmcreative/ui'));
+	log(c.bold(`  @nqmcreative/ui — ${style.title}`));
 	log(c.dim(`  ${project.isKit ? 'SvelteKit' : 'Svelte + Vite'} project detected`));
 	log();
 
@@ -151,16 +175,20 @@ async function init() {
 	const source = sourcePath(project.cssRel);
 	const lines = [
 		`@import 'tailwindcss';`,
-		`@import '@nqmcreative/ui/theme.css';`,
-		`@import '@nqmcreative/ui/fonts.css';`,
+		`@import '@nqmcreative/ui/${style.name}/theme.css';`,
+		...(style.fonts ? [`@import '@nqmcreative/ui/${style.name}/fonts.css';`] : []),
 		``,
-		`/* Tailwind v4 skips node_modules — point it at the package's dist so`,
-		`   the class names used inside the components are generated. */`,
-		`@source '${source}';`
+		`/* Tailwind v4 skips node_modules — point it at this style's folder so`,
+		`   the class names used inside its components are generated. */`,
+		`@source '${source}/styles/${style.name}';`
 	];
 
 	const css = await readOr(project.css);
-	if (css.includes('@nqmcreative/ui/theme.css')) {
+
+	// Matched against *this* style's theme, not any of them. A file left over
+	// from an older layout — or wired to a different style — has to be reported,
+	// not skipped as already done.
+	if (css.includes(`@nqmcreative/ui/${style.name}/theme.css`)) {
 		skip(`${project.cssRel} already imports the theme`);
 	} else {
 		const body = css.trim()
@@ -197,7 +225,7 @@ async function init() {
 			// 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 (!html.includes('fonts.gstatic.com')) {
+			if (style.fonts && !html.includes('fonts.gstatic.com')) {
 				additions.push(`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />`);
 			}
 			if (!html.includes('nqm-theme')) {
@@ -272,14 +300,15 @@ async function init() {
 	}
 
 	log();
-	log(`  Next: ${c.cyan('bunx @nqmcreative/ui add button')}`);
+	log(`  Next: ${c.cyan(`bunx @nqmcreative/ui add button --style ${style.name}`)}`);
 	log();
 }
 
 /* ------------------------------------------------------------------- add -- */
 
 async function add() {
-	const { components } = await registry();
+	const { components, styles } = await registry();
+	const style = pickStyle(styles);
 	const names = args.slice(1);
 	if (names.length === 0) fail('which component? e.g. `nqm-ui add button dialog`');
 
@@ -290,7 +319,7 @@ async function add() {
 			const close = components
 				.filter((c) => c.name.toLowerCase().startsWith(name.slice(0, 3).toLowerCase()))
 				.slice(0, 3)
-				.map((c) => c.subpath.split('/').pop());
+				.map((c) => c.slug);
 			fail(
 				`unknown component "${name}"${close.length ? ` — did you mean ${close.join(', ')}?` : ''}`
 			);
@@ -298,7 +327,7 @@ async function add() {
 		found.push(item);
 	}
 
-	const imports = found.map((item) => `import ${item.name} from '${item.subpath}';`);
+	const imports = found.map((item) => `import ${item.name} from '${item.subpaths[style.name]}';`);
 
 	// `--to <file>` inserts the imports into an existing Svelte file.
 	const toIndex = argv.indexOf('--to');
@@ -339,7 +368,7 @@ async function add() {
 /* ------------------------------------------------------------------ list -- */
 
 async function list() {
-	const { components, count } = await registry();
+	const { components, count, styles } = await registry();
 	const filter = args[1]?.toLowerCase();
 
 	const groups = {};
@@ -355,11 +384,15 @@ async function list() {
 	for (const [category, items] of Object.entries(groups)) {
 		log(`  ${c.bold(category)}`);
 		for (const item of items) {
-			log(`    ${item.subpath.split('/').pop().padEnd(20)} ${c.dim(item.subpath)}`);
+			log(`    ${item.slug.padEnd(20)} ${c.dim(item.description)}`);
 		}
 		log();
 	}
-	log(c.dim(`  ${shown} of ${count} components`));
+	log(
+		c.dim(
+			`  ${shown} of ${count} components, in every style: ${styles.map((s) => s.name).join(', ')}`
+		)
+	);
 	log();
 }
 
@@ -374,11 +407,12 @@ async function info() {
 	log(`  ${c.bold(item.name)}  ${c.dim(item.category)}`);
 	if (item.description) log(`  ${item.description}`);
 	log();
-	log(`  ${c.cyan(`import ${item.name} from '${item.subpath}';`)}`);
+	for (const [style, subpath] of Object.entries(item.subpaths)) {
+		log(`  ${c.dim(style.padEnd(8))} ${c.cyan(`import ${item.name} from '${subpath}';`)}`);
+	}
 	log();
 	if (item.uses.length) log(`  renders    ${item.uses.join(', ')}`);
-	if (item.modules.length) log(`  uses       ${item.modules.join(', ')}`);
-	log(`  source     ${item.file}`);
+	if (item.modules.length) log(`  core       ${item.modules.join(', ')}`);
 	log();
 }
 
@@ -388,13 +422,16 @@ function help() {
 	log(`
   ${c.bold('@nqmcreative/ui')}
 
-    ${c.cyan('init')}                  wire the design system into this project
+    ${c.cyan('init --style <s>')}      wire one style into this project
     ${c.cyan('add <name...>')}         print the import for a component
+      ${c.dim('--style <s>')}         which style to import from (required)
       ${c.dim('--to <file>')}         …and insert it into that file instead
-    ${c.cyan('list [category]')}       every component and its subpath
-    ${c.cyan('info <name>')}           what one component pulls in
+    ${c.cyan('list [category]')}       every component in the catalogue
+    ${c.cyan('info <name>')}           what one component pulls in, in every style
 
     ${c.dim('--dry-run')}             show the writes without making them
+
+  ${c.dim('Every style implements every component. Run init once per project.')}
 `);
 }
 

package/dist/core/calendar.d.ts

@@ -0,0 +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. */
+export declare function dateHint(format: 'dmy' | 'mdy' | 'ymd'): string;

package/dist/core/calendar.js

@@ -0,0 +1,36 @@
+/**
+ * Keyboard movement inside a month grid.
+ *
+ * The arrow keys are obvious; Home/End are not — they go to the start and end
+ * of the *displayed* week, which depends on whether the grid starts on Monday
+ * or Sunday. Returns the day focus should move to, or `null` for a key the
+ * grid does not handle.
+ */
+import { addDays, addMonths } from './date.js';
+export function calendarKeyMove(key, focused, weekStart, shiftKey = false) {
+    const intoWeek = (focused.getDay() - weekStart + 7) % 7;
+    switch (key) {
+        case 'ArrowLeft':
+            return addDays(focused, -1);
+        case 'ArrowRight':
+            return addDays(focused, 1);
+        case 'ArrowUp':
+            return addDays(focused, -7);
+        case 'ArrowDown':
+            return addDays(focused, 7);
+        case 'Home':
+            return addDays(focused, -intoWeek);
+        case 'End':
+            return addDays(focused, 6 - intoWeek);
+        case 'PageUp':
+            return addMonths(focused, shiftKey ? -12 : -1);
+        case 'PageDown':
+            return addMonths(focused, shiftKey ? 12 : 1);
+        default:
+            return null;
+    }
+}
+/** The placeholder a text date field shows for a locale's part order. */
+export function dateHint(format) {
+    return { dmy: 'DD/MM/YYYY', mdy: 'MM/DD/YYYY', ymd: 'YYYY/MM/DD' }[format];
+}

package/dist/core/dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Keeps a bound `open` prop and a native `<dialog>` in step.
+ *
+ * `showModal()` throws if the dialog is already open and `close()` fires an
+ * event of its own, so both directions need the guard below. Every overlay
+ * built on `<dialog>` — Modal, Drawer, CommandPalette — calls this from an
+ * effect rather than repeating the two `if`s.
+ */
+export declare function syncDialog(dialog: HTMLDialogElement | null, open: boolean): void;
+/**
+ * True when a click landed on the backdrop rather than inside the panel.
+ * The backdrop is not a separate element — it is the dialog's own box.
+ */
+export declare function isBackdropClick(event: MouseEvent, dialog: HTMLDialogElement | null): boolean;

package/dist/core/dialog.svelte.js

@@ -0,0 +1,23 @@
+/**
+ * Keeps a bound `open` prop and a native `<dialog>` in step.
+ *
+ * `showModal()` throws if the dialog is already open and `close()` fires an
+ * event of its own, so both directions need the guard below. Every overlay
+ * built on `<dialog>` — Modal, Drawer, CommandPalette — calls this from an
+ * effect rather than repeating the two `if`s.
+ */
+export function syncDialog(dialog, open) {
+    if (!dialog)
+        return;
+    if (open && !dialog.open)
+        dialog.showModal();
+    else if (!open && dialog.open)
+        dialog.close();
+}
+/**
+ * True when a click landed on the backdrop rather than inside the panel.
+ * The backdrop is not a separate element — it is the dialog's own box.
+ */
+export function isBackdropClick(event, dialog) {
+    return !!dialog && event.target === dialog;
+}

package/dist/core/files.d.ts

@@ -0,0 +1,35 @@
+/**
+ * File validation for the drop zone: which files a set of rules lets through,
+ * why the rest were turned away, and how to print a byte count.
+ */
+export interface RejectedFile {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+}
+export interface FileRules {
+    /** Same syntax as the input's `accept` — `'image/*,.pdf'`. */
+    accept?: string;
+    /** Per-file ceiling in bytes. `0` means no limit. */
+    maxSize?: number;
+    /** Cap on how many files may be held at once. `0` means no limit. */
+    maxFiles?: number;
+    multiple?: boolean;
+    /** How many are already held, counted against `maxFiles`. */
+    held?: number;
+}
+/** `image/*`, `.pdf` and `application/pdf` all mean what you would expect. */
+export declare function matchesAccept(file: File, accept?: string): boolean;
+/**
+ * Sorts one drop into keepers and rejects. Order matters: a file is judged on
+ * type first, then size, then whether there is room left — so the reason a
+ * user sees is the first rule it actually broke.
+ */
+export declare function sortFiles(incoming: FileList | File[] | null, rules?: FileRules): {
+    accepted: File[];
+    rejected: RejectedFile[];
+};
+/**
+ * `900 B`, `2 MB`, `1.5 GB`. Units come from the locale so the number and its
+ * suffix can be translated together.
+ */
+export declare function formatSize(bytes: number, units: readonly string[]): string;

package/dist/core/files.js

@@ -0,0 +1,62 @@
+/**
+ * File validation for the drop zone: which files a set of rules lets through,
+ * why the rest were turned away, and how to print a byte count.
+ */
+/** `image/*`, `.pdf` and `application/pdf` all mean what you would expect. */
+export function matchesAccept(file, accept) {
+    if (!accept)
+        return true;
+    return accept.split(',').some((raw) => {
+        const rule = raw.trim().toLowerCase();
+        if (!rule)
+            return true;
+        if (rule.startsWith('.'))
+            return file.name.toLowerCase().endsWith(rule);
+        if (rule.endsWith('/*'))
+            return file.type.startsWith(rule.slice(0, -1));
+        return file.type.toLowerCase() === rule;
+    });
+}
+/**
+ * Sorts one drop into keepers and rejects. Order matters: a file is judged on
+ * type first, then size, then whether there is room left — so the reason a
+ * user sees is the first rule it actually broke.
+ */
+export function sortFiles(incoming, rules = {}) {
+    const accepted = [];
+    const rejected = [];
+    if (!incoming)
+        return { accepted, rejected };
+    const { accept, maxSize = 0, maxFiles = 0, multiple = true, held = 0 } = rules;
+    let room = maxFiles ? maxFiles - (multiple ? held : 0) : Infinity;
+    for (const file of Array.from(incoming)) {
+        if (!matchesAccept(file, accept))
+            rejected.push({ file, reason: 'type' });
+        else if (maxSize && file.size > maxSize)
+            rejected.push({ file, reason: 'size' });
+        else if (room <= 0)
+            rejected.push({ file, reason: 'count' });
+        else {
+            accepted.push(file);
+            room--;
+        }
+        if (!multiple && accepted.length === 1)
+            break;
+    }
+    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.
+ */
+export function formatSize(bytes, units) {
+    if (bytes < 1024)
+        return `${bytes} ${units[0]}`;
+    let value = bytes / 1024;
+    let i = 1;
+    while (value >= 1024 && i < units.length - 1) {
+        value /= 1024;
+        i++;
+    }
+    return `${value.toFixed(Number.isInteger(value) || value >= 10 ? 0 : 1)} ${units[i]}`;
+}

package/dist/core/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @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
+ * 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
+ * focus trap, so none of them should have to write one.
+ */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText } from './tones.js';
+export type { Tone } from './tones.js';
+export { anchored } from './actions/anchor.js';
+export type { Placement, AnchorOptions } from './actions/anchor.js';
+export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
+export type { ClickOutsideOptions, FocusTrapOptions } from './actions/dismissable.js';
+export { syncDialog, isBackdropClick } from './dialog.svelte.js';
+export { popupTrigger, describeTrigger, menuItems, HOVER_GRACE } from './trigger.js';
+export type { PopupTriggerOptions } from './trigger.js';
+export { ListCursor, groupItems, matchQuery, revealIndex } from './list.svelte.js';
+export type { ListItem } from './list.svelte.js';
+export { nextSort, sortRows, toggleKey } from './table.js';
+export type { TableSort, SortDirection } from './table.js';
+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 { 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';
+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

@@ -0,0 +1,35 @@
+/**
+ * @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
+ * 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
+ * focus trap, so none of them should have to write one.
+ */
+/* --- tones --- */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText } from './tones.js';
+/* --- actions --- */
+export { anchored } from './actions/anchor.js';
+export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
+/* --- overlays --- */
+export { syncDialog, isBackdropClick } from './dialog.svelte.js';
+export { popupTrigger, describeTrigger, menuItems, HOVER_GRACE } from './trigger.js';
+/* --- lists --- */
+export { ListCursor, groupItems, matchQuery, revealIndex } from './list.svelte.js';
+/* --- data --- */
+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';
+/* --- dates --- */
+export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
+export { calendarKeyMove, dateHint } from './calendar.js';
+/* --- toast --- */
+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/list.svelte.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The list machinery behind every "type to filter, arrow to choose" control —
+ * Combobox, MultiSelect, CommandPalette.
+ *
+ * All three want the same four things: match a query, bundle the matches under
+ * their group headings, flatten them back into one indexable run, and move an
+ * active cursor over that run while skipping disabled entries. None of it has
+ * an opinion about how a row looks, so all of it lives here.
+ */
+export interface ListItem {
+    disabled?: boolean;
+    /** Items sharing a group are rendered under one heading. */
+    group?: string;
+}
+/** Case-insensitive substring match over whichever fields a control cares about. */
+export declare function matchQuery<T>(items: T[], query: string, haystack: (item: T) => string): T[];
+/**
+ * Buckets items by `group`, keeping first-seen order for both the groups and
+ * the items inside them. Ungrouped items land under `''`.
+ */
+export declare function groupItems<T extends ListItem>(items: T[]): [string, T[]][];
+/**
+ * An active-item cursor over a list that changes as the user types.
+ *
+ * `items` is a getter rather than an array so the cursor always reads the
+ * current matches — the caller keeps ownership of the filtering.
+ */
+export declare class ListCursor<T extends ListItem> {
+    #private;
+    /** Index into the flattened list. */
+    index: number;
+    constructor(items: () => T[]);
+    get items(): T[];
+    get current(): T | undefined;
+    /** Jumps to the first item matching `predicate`, or to the top. */
+    reset(predicate?: (item: T) => boolean): void;
+    /** Wraps around, skipping disabled entries. */
+    move(step: number): void;
+}
+/** Brings the row carrying `data-index` into view without scrolling the page. */
+export declare function revealIndex(container: HTMLElement | null, index: number): void;

package/dist/core/list.svelte.js

@@ -0,0 +1,77 @@
+/**
+ * The list machinery behind every "type to filter, arrow to choose" control —
+ * Combobox, MultiSelect, CommandPalette.
+ *
+ * All three want the same four things: match a query, bundle the matches under
+ * their group headings, flatten them back into one indexable run, and move an
+ * active cursor over that run while skipping disabled entries. None of it has
+ * an opinion about how a row looks, so all of it lives here.
+ */
+/** Case-insensitive substring match over whichever fields a control cares about. */
+export function matchQuery(items, query, haystack) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return items;
+    return items.filter((item) => haystack(item).toLowerCase().includes(needle));
+}
+/**
+ * Buckets items by `group`, keeping first-seen order for both the groups and
+ * the items inside them. Ungrouped items land under `''`.
+ */
+export function groupItems(items) {
+    const out = [];
+    for (const item of items) {
+        const key = item.group ?? '';
+        const bucket = out.find(([name]) => name === key);
+        if (bucket)
+            bucket[1].push(item);
+        else
+            out.push([key, [item]]);
+    }
+    return out;
+}
+/**
+ * An active-item cursor over a list that changes as the user types.
+ *
+ * `items` is a getter rather than an array so the cursor always reads the
+ * current matches — the caller keeps ownership of the filtering.
+ */
+export class ListCursor {
+    #items;
+    /** Index into the flattened list. */
+    index = $state(0);
+    constructor(items) {
+        this.#items = items;
+    }
+    get items() {
+        return this.#items();
+    }
+    get current() {
+        return this.items[this.index];
+    }
+    /** Jumps to the first item matching `predicate`, or to the top. */
+    reset(predicate) {
+        if (!predicate) {
+            this.index = 0;
+            return;
+        }
+        this.index = Math.max(0, this.items.findIndex(predicate));
+    }
+    /** Wraps around, skipping disabled entries. */
+    move(step) {
+        const items = this.items;
+        if (items.length === 0)
+            return;
+        let next = this.index;
+        for (let i = 0; i < items.length; i++) {
+            next = (next + step + items.length) % items.length;
+            if (!items[next].disabled)
+                break;
+        }
+        this.index = next;
+    }
+}
+/** Brings the row carrying `data-index` into view without scrolling the page. */
+export function revealIndex(container, index) {
+    container?.querySelector(`[data-index="${index}"]`)?.scrollIntoView({ block: 'nearest' });
+}

package/dist/core/number.d.ts

@@ -0,0 +1,7 @@
+/** Numeric helpers shared by the stepper, the slider and the progress bar. */
+/** Decimal places implied by a step, so `0.25` never produces `0.7500000001`. */
+export declare function stepDecimals(step: number): number;
+/** Clamps into range and rounds to the step's precision. */
+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;

package/dist/core/number.js

@@ -0,0 +1,17 @@
+/** Numeric helpers shared by the stepper, the slider and the progress bar. */
+/** Decimal places implied by a step, so `0.25` never produces `0.7500000001`. */
+export function stepDecimals(step) {
+    return (String(step).split('.')[1] ?? '').length;
+}
+/** Clamps into range and rounds to the step's precision. */
+export function clampToStep(value, min, max, step) {
+    if (Number.isNaN(value))
+        return min === -Infinity ? 0 : min;
+    return Number(Math.min(max, Math.max(min, value)).toFixed(stepDecimals(step)));
+}
+/** Position of `value` within `min…max`, as 0–100. */
+export function percentOf(value, min, max) {
+    if (max === min)
+        return 0;
+    return Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+}

package/dist/core/pagination.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The page numbers a pager should show. Collapses long runs to `…` while
+ * always keeping the first page, the last page, and `siblings` either side of
+ * the current one — so the control never changes width as you walk through it.
+ */
+export declare function pageRange(page: number, total: number, siblings?: number): (number | '…')[];

package/dist/core/pagination.js

@@ -0,0 +1,21 @@
+/**
+ * The page numbers a pager should show. Collapses long runs to `…` while
+ * always keeping the first page, the last page, and `siblings` either side of
+ * the current one — so the control never changes width as you walk through it.
+ */
+export function pageRange(page, total, siblings = 1) {
+    if (total <= 5 + siblings * 2) {
+        return Array.from({ length: total }, (_, i) => i + 1);
+    }
+    const start = Math.max(2, page - siblings);
+    const end = Math.min(total - 1, page + siblings);
+    const out = [1];
+    if (start > 2)
+        out.push('…');
+    for (let i = start; i <= end; i++)
+        out.push(i);
+    if (end < total - 1)
+        out.push('…');
+    out.push(total);
+    return out;
+}

package/dist/core/password.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Password strength, 0–4, matching the five labels in the locale.
+ *
+ * Deliberately simple — length plus character variety. It is a nudge in the
+ * form, not a security control, and anything cleverer would need a dictionary
+ * this package has no business shipping.
+ */
+export declare function passwordScore(value: string): number;

package/dist/core/password.js

@@ -0,0 +1,23 @@
+/**
+ * Password strength, 0–4, matching the five labels in the locale.
+ *
+ * Deliberately simple — length plus character variety. It is a nudge in the
+ * form, not a security control, and anything cleverer would need a dictionary
+ * this package has no business shipping.
+ */
+export function passwordScore(value) {
+    if (!value)
+        return 0;
+    let points = 0;
+    if (value.length >= 8)
+        points++;
+    if (value.length >= 12)
+        points++;
+    if (/[a-z]/.test(value) && /[A-Z]/.test(value))
+        points++;
+    if (/\d/.test(value))
+        points++;
+    if (/[^\w\s]/.test(value))
+        points++;
+    return Math.min(4, points);
+}