@nqmcreative/ui 0.1.1 → 0.2.0

package/README.md

@@ -1,8 +1,13 @@
 # @nqmcreative/ui
 
-Svelte 5 (runes) + Tailwind CSS v4 component library. Flat surfaces, no
-shadows, no border-radius except pills. 57 components, eight tones, light and
-dark, no runtime dependencies.
+Svelte 5 (runes) + Tailwind CSS v4 component library. One package, **two
+styles**, 65 components each — the same props, the same behaviour, a different
+look. Eight tones, light and dark, no runtime dependencies.
+
+| style   | import                  | character                                                                                                                      |
+| ------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `matte` | `@nqmcreative/ui/matte` | Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do. |
+| `paper` | `@nqmcreative/ui/paper` | The neutral one. Start here if unsure: soft corners, light shadows, generous spacing, and nothing that fights the content.     |
 
 The docs site lives in this repo — every component with a live demo, plus
 theming, locale and contributing guides. `bun run dev` to read it.
@@ -14,7 +19,7 @@ bun add @nqmcreative/ui
 ```
 
 ```bash
-bunx nqm-ui init
+bunx nqm-ui init --style matte
 ```
 
 `init` writes `src/app.css`, patches `src/app.html`, and adds the CSS import to
@@ -33,14 +38,18 @@ Your project brings its own `svelte` ^5 and Tailwind CSS v4.
 ```css
 /* src/app.css */
 @import 'tailwindcss';
-@import '@nqmcreative/ui/theme.css';
-@import '@nqmcreative/ui/fonts.css';
+@import '@nqmcreative/ui/matte/theme.css';
+@import '@nqmcreative/ui/matte/fonts.css';
 
 /* Tailwind v4 skips node_modules. Without this every component renders
-   unstyled, with no error anywhere. */
-@source '../node_modules/@nqmcreative/ui/dist';
+   unstyled, with no error anywhere. Point it at the style you import. */
+@source '../node_modules/@nqmcreative/ui/dist/styles/matte';
 ```
 
+Import exactly one style's `theme.css` — they all define the same token names,
+so two would fight over every colour. Each style ships its own `fonts.css`
+alongside it; skip it and the type falls back to the system stack.
+
 Import that CSS once in `src/routes/+layout.svelte`, and put the font
 preconnect plus the no-flash theme script in `src/app.html`, above
 `%sveltekit.head%`:
@@ -57,13 +66,11 @@ preconnect plus the no-flash theme script in `src/app.html`, above
 
 ## Use
 
-Each component has its own subpath — the file name in kebab-case:
+The import names the style:
 
 ```svelte
 <script lang="ts">
-	import Button from '@nqmcreative/ui/button';
-	import Field from '@nqmcreative/ui/field';
-	import Input from '@nqmcreative/ui/input';
+	import { Button, Field, Input } from '@nqmcreative/ui/matte';
 
 	let email = $state('');
 </script>
@@ -75,7 +82,13 @@ Each component has its own subpath — the file name in kebab-case:
 <Button tone="accent">Get started</Button>
 ```
 
-The barrel works too: `import { Button } from '@nqmcreative/ui'`.
+Per-component subpaths work too — the style, then the file name in kebab-case:
+`@nqmcreative/ui/matte/avatar-group`.
+
+**There is no root export.** `import { Button } from '@nqmcreative/ui'` resolves
+to nothing, on purpose: a style is a choice, and picking one by accident is the
+mistake this layout exists to prevent. Switching later is a find-and-replace of
+the word after `@nqmcreative/ui/`.
 
 ### Tones
 
@@ -89,22 +102,23 @@ Eight of them — `brand`, `accent`, `violet`, `info`, `success`, `warning`,
 ```
 
 Each ships four steps: `bg-accent`, `hover:bg-accent-hover`, `bg-accent-light`,
-`border-accent-border`. Redeclare any of them in your own `@theme` block to
-rebrand everything at once.
+`border-accent-border`. The token _names_ are a contract every style fills in,
+so only the values differ between them. Redeclare any of them in your own
+`@theme` block to rebrand everything at once.
 
 ### Dark mode
 
-`theme.css` ships both palettes; nothing in a component says `dark:`.
-`<html class="dark">` or `class="light"` forces one, bare `<html>` follows the
-OS. `ThemeToggle` handles all three.
+Each style's `theme.css` ships both palettes; nothing in a component says
+`dark:`. `<html class="dark">` or `class="light"` forces one, bare `<html>`
+follows the OS. `ThemeToggle` handles all three.
 
 ### Locale
 
 Every built-in string — ARIA names, `No data`, the calendar's month names —
-comes from one object:
+comes from one object, shared by every style:
 
 ```js
-import { setLocale, idID } from '@nqmcreative/ui/locale';
+import { setLocale, idID } from '@nqmcreative/ui/core';
 
 setLocale(idID);
 ```
@@ -112,6 +126,26 @@ setLocale(idID);
 `enUS` and `idID` ship with the package; pass a partial to change a few keys.
 Under SSR use `<LocaleProvider>` instead, so the locale is scoped to a request.
 
+## Layout
+
+```
+src/lib/core/            behaviour, a11y, types — no markup, no classes
+src/lib/styles/matte/    65 components
+src/lib/styles/paper/    65 components
+scripts/catalogue.mjs    the list every style must implement
+```
+
+`core` holds what has no opinion about looks: focus traps, roving keyboard
+navigation, viewport-aware anchoring, date maths, file validation, table
+sorting, the toast queue, the locale strings. There is no `matte` version of a
+focus trap, so no style writes one.
+
+A style holds only markup and classes. It may differ from another completely —
+different DOM, different animation — as long as the props and the behaviour
+match. `bun run lint` fails if a style is missing a component from the
+catalogue, and the parity suite mounts every style to assert they behave the
+same.
+
 ## Components
 
 | group        | components                                                                                                                                                                                                                                                 |
@@ -123,6 +157,7 @@ Under SSR use `<LocaleProvider>` instead, so the locale is scoped to a request.
 | Layout & nav | `Divider`, `Tabs`, `Accordion`, `AccordionItem`, `Breadcrumb`, `Pagination`, `Steps`                                                                                                                                                                       |
 | App shell    | `Navbar`, `Sidebar`, `Footer`                                                                                                                                                                                                                              |
 | Overlay      | `Modal`, `ConfirmDialog`, `Drawer`, `Dropdown` + `MenuItem` + `MenuSeparator`, `ContextMenu`, `CommandPalette`, `Popover`, `Tooltip`                                                                                                                       |
+| Marketing    | `HeroSection`, `FeatureGrid`, `FeatureCard`, `PricingCard`, `Testimonial`, `LogoCloud`, `CTASection`, `StatsBand`                                                                                                                                          |
 | System       | `ThemeToggle`, `LocaleProvider`                                                                                                                                                                                                                            |
 
 Overlays are built on the native top layer and three in-house actions
@@ -131,33 +166,53 @@ Overlays are built on the native top layer and three in-house actions
 ## CLI
 
 ```bash
-bunx nqm-ui list forms          # components in a category
-bunx nqm-ui info date-picker    # subpath, and what it pulls in
-bunx nqm-ui add button badge    # print the import lines
-bunx nqm-ui add button --to src/routes/+page.svelte
+bunx nqm-ui list forms                     # components in a category
+bunx nqm-ui info date-picker               # its import line in every style
+bunx nqm-ui add button badge --style matte # print the import lines
+bunx nqm-ui add button --style paper --to src/routes/+page.svelte
 ```
 
+`--style` has no default: the CLI lists the styles and asks, rather than
+guessing.
+
 ## Developing
 
 ```bash
 bun install
 bun run dev       # the docs site at localhost:5173
 bun run check     # type-check
-bun run test      # vitest
+bun run test      # vitest, including the cross-style parity suite
 bun run build     # site + package
 ```
 
 `src/lib` is the package, `src/site` and `src/routes` are the docs site.
 
-**`dist/` is committed — rebuild and commit it with your change.** Consumers
-read from `dist/`, and installing from GitHub cannot build it: bun blocks a
-dependency's `prepare` script.
-
-Adding a component: write it in `src/lib/components`, export it from
-`src/lib/index.ts` under a category comment, add a demo in `src/site/demos`,
-then `bun run build`. `bun run lint` fails if the generated exports map or
-`registry.json` is stale. The full conventions are on the site under
-`/docs/adding-components`.
+**The style is the first segment of the URL**, not a toggle:
+`/matte/components/button` and `/paper/components/button` are two prerendered
+pages. Each renders entirely in its own style — navbar, sidebar, footer and
+search box included — because every page takes its components from
+`UI[data.style]` rather than importing one style directly. The static HTML for
+the two differs: `h-11 px-7` in one, `h-10 px-4 rounded-md` in the other.
+
+Two pieces make that work. `src/hooks.server.ts` stamps `data-style` onto
+`<html>` before the first paint — on `<html>` rather than a wrapper, so
+portalled overlays reach the tokens too and dark mode's class lands on the same
+element. `src/routes/styles.css` re-declares each style's tokens under
+`[data-style]`, generated by `bun run scoped`.
+
+Both are docs-only. The package still ships one global `theme.css` per style,
+because `--color-brand` cannot hold two values on one element.
+
+**`dist/` is committed — rebuild and commit it with your change**, so what is
+in the repo always matches the source beside it.
+
+Adding a component: add a line to `scripts/catalogue.mjs`, put any behaviour in
+`src/lib/core`, write the file in **every** style folder, add **one** demo in
+`src/site/demos`, then `bun run build`. Barrels, exports map, registry, scoped
+tokens and the per-style demo copies are all generated — a demo is authored once
+against `matte` and copied into every other style with its import path
+rewritten. `bun run lint` fails if any is stale or a style is missing
+the component. Full conventions are on the site under `/docs/adding-components`.
 
 ## License
 

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';