@vunset/nuxt 0.0.0-stage → 1.0.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Denis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,84 @@
-# Temporary Holding Version
+# @vunset/nuxt
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Nuxt module for Vunset. Every component and composable is available in your
+pages without importing it, and the styles are already loaded.
+
+## Install
+
+```sh
+npm install @vunset/nuxt
+```
+
+[`@vunset/vue`](https://www.npmjs.com/package/@vunset/vue),
+[`@vunset/ui`](https://www.npmjs.com/package/@vunset/ui) and
+[`@vunset/utils`](https://www.npmjs.com/package/@vunset/utils) come with it.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@vunset/nuxt']
+});
+```
+
+That's it:
+
+```vue
+<script setup lang="ts">
+const { setToast } = useToast();
+</script>
+
+<template>
+  <AppButton variant="solid" tone="accent" @click="setToast({ title: 'Saved' })">Save</AppButton>
+  <AppToaster />
+</template>
+```
+
+Charts and data tables need one more package each. Install the ones you use,
+and the components show up on their own:
+
+```sh
+npm install @tanstack/charts     # ChartArea, ChartBar, ChartDual, ChartDonut
+npm install @tanstack/vue-table  # DataTable, AppDataTable
+```
+
+## What you get
+
+- Every component, headless (`DialogRoot`, `SelectTrigger`) and styled
+  (`AppButton`, `FormSelect`), loaded only on the pages that use it.
+- The composables (`useToast`, `useTheme`, `useClipboard`, `useInfinityFetch`, …)
+  and the `@vunset/utils` helpers, auto-imported, in server routes too.
+- The stylesheet, loaded before your own CSS.
+- Icons from a folder of SVG files, or a sprite built from one.
+- Light and dark mode, remembered across visits.
+- Server rendering, toasts included.
+
+## Options
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@vunset/nuxt'],
+  vunset: {
+    prefix: 'Vs'
+  }
+});
+```
+
+| Option        | Default   |                                                                      |
+| ------------- | --------- | -------------------------------------------------------------------- |
+| `prefix`      | `''`      | Goes in front of every component name: `'Vs'` gives `<VsAppButton>`. |
+| `vue`         | `true`    | Registers the headless parts.                                        |
+| `ui`          | `true`    | Registers the styled components and loads their stylesheet.          |
+| `css`         | with `ui` | Loads `@vunset/ui/all.css`.                                          |
+| `preflight`   | `false`   | Loads ui's CSS reset. Turn it on if you don't use Tailwind.          |
+| `composables` | `true`    | Auto-imports the composables.                                        |
+| `utils`       | `true`    | Auto-imports the `@vunset/utils` helpers.                            |
+| `icons`       | see docs  | Where your icons live: `{ dir, spriteDir }`, both `~/assets/icons`.  |
+| `theme`       | `true`    | Sets up light and dark mode. `false` leaves it to you.               |
+
+## Documentation
+
+[github.com/vunset/vunset/tree/main/docs/nuxt](https://github.com/vunset/vunset/tree/main/docs/nuxt)
+
+## License
+
+MIT

package/dist/components.d.ts

@@ -0,0 +1,13 @@
+export interface Entry {
+    /** What the components are imported from. */
+    from: string;
+    /** The package it belongs to. */
+    package: string;
+    /** Optional peers the entry imports: without them installed, it is skipped. */
+    peers: string[];
+    components: string[];
+    composables: string[];
+}
+export declare const ENTRIES: Entry[];
+/** `@vunset/utils`' helpers, imported in the app and on the server. */
+export declare const UTILS: string[];

package/dist/components.js

@@ -0,0 +1,46 @@
+export const ENTRIES = [
+    {
+        from: '@vunset/vue',
+        package: '@vunset/vue',
+        peers: [],
+        components: ['SwitchRoot', 'SwitchThumb', 'CheckboxRoot', 'CheckboxIndicator', 'CheckboxGroup', 'RadioGroup', 'RadioRoot', 'RadioIndicator', 'CollapsibleRoot', 'CollapsibleTrigger', 'CollapsiblePanel', 'AccordionRoot', 'AccordionItem', 'AccordionHeader', 'AccordionTrigger', 'AccordionPanel', 'PopoverRoot', 'PopoverTrigger', 'PopoverArrow', 'PopoverClose', 'PopoverTitle', 'PopoverDescription', 'Portal', 'Positioner', 'Popup', 'Addon', 'Separator', 'DialogRoot', 'DialogTrigger', 'DialogBackdrop', 'DialogTitle', 'DialogDescription', 'DialogClose', 'DrawerRoot', 'DrawerTrigger', 'DrawerBackdrop', 'DrawerHandle', 'DrawerTitle', 'DrawerDescription', 'DrawerClose', 'TooltipGroup', 'TooltipRoot', 'TooltipTrigger', 'TooltipArrow', 'FieldRoot', 'FieldLabel', 'FieldGroup', 'Input', 'Textarea', 'FieldDescription', 'FieldError', 'SelectRoot', 'SelectTrigger', 'SelectValue', 'SelectClear', 'SelectIndicator', 'SelectSearch', 'SelectList', 'SelectItem', 'SelectEmpty', 'SelectScrollIndicator', 'SelectPresets', 'ComboboxRoot', 'ComboboxTrigger', 'ComboboxChips', 'ComboboxChip', 'ComboboxChipRemove', 'ComboboxInput', 'ComboboxClear', 'ComboboxIndicator', 'ComboboxList', 'ComboboxItem', 'ComboboxEmpty', 'ComboboxScrollIndicator', 'ComboboxPresets', 'RangeRoot', 'RangeLabel', 'RangeValue', 'RangeControl', 'RangeTrack', 'RangeIndicator', 'RangeThumb', 'ToastViewport', 'ToastRoot', 'ToastTitle', 'ToastDescription', 'ToastClose', 'ToastAction', 'ToastProgress', 'Button', 'Badge', 'Icon', 'TableRoot', 'TableCaption', 'TableHeader', 'TableBody', 'TableFooter', 'TableRow', 'TableHeadCell', 'TableCell', 'AsyncState', 'DragRoot', 'DragItem', 'DragHandle', 'Copy', 'AlertRoot', 'AlertTitle', 'AlertDescription', 'Group', 'Appear', 'Deferred', 'Toggle', 'ToggleGroup', 'ProgressRoot', 'ProgressTrack', 'ProgressIndicator', 'ProgressValue', 'ProgressLabel', 'MeterRoot', 'MeterTrack', 'MeterIndicator', 'MeterValue', 'MeterLabel', 'PaginationRoot', 'PaginationPrev', 'PaginationNext', 'PaginationItem', 'PaginationEllipsis', 'FloatingRoot', 'FloatingHeader', 'FloatingTitle', 'FloatingClose', 'FloatingResizer', 'CalendarRoot', 'CalendarPrev', 'CalendarNext', 'CalendarViewTrigger', 'CalendarGrid', 'CalendarRow', 'CalendarWeek', 'CalendarWeekDay', 'CalendarDay', 'CalendarMonth', 'CalendarYear', 'CalendarPresets', 'CalendarPreset', 'DatepickerRoot', 'DatepickerTrigger', 'DatepickerValue', 'DatepickerClear', 'TimepickerRoot', 'TimepickerInput', 'TimepickerSegment', 'TimepickerTrigger', 'TimepickerClear', 'TimepickerColumn', 'TabsRoot', 'TabsList', 'TabsTab', 'TabsPanel', 'TabsIndicator', 'ScrollArea', 'ContextMenuRoot', 'ContextMenuTrigger', 'MenubarRoot', 'MenubarLink', 'MenuRoot', 'MenuTrigger', 'MenuItem', 'MenuCheckboxItem', 'MenuRadioGroup', 'MenuRadioItem', 'MenuGroup', 'MenuGroupLabel', 'MenuArrow', 'MenuItemIndicator', 'Part'],
+        composables: ['useToast', 'useClipboard', 'useClickOutside', 'useLocalStorage', 'useDownload', 'useExportCsv', 'useTheme', 'useValidate', 'useVirtualList']
+    },
+    {
+        from: '@vunset/vue/chart',
+        package: '@vunset/vue',
+        peers: ['@tanstack/charts'],
+        components: ['ChartRoot', 'ChartArea', 'ChartLine', 'ChartBar', 'ChartAxis', 'ChartGrid', 'ChartCrosshair', 'ChartTooltip', 'ChartLegend', 'ChartDonut'],
+        composables: []
+    },
+    {
+        from: '@vunset/vue/data-table',
+        package: '@vunset/vue',
+        peers: ['@tanstack/vue-table'],
+        components: ['DataTable'],
+        composables: []
+    },
+    {
+        from: '@vunset/ui',
+        package: '@vunset/ui',
+        peers: [],
+        components: ['FormField', 'FormInput', 'FormTextarea', 'FormCheckbox', 'FormCheckboxGroup', 'FormRadioGroup', 'FormRadio', 'FormSwitch', 'FormSelect', 'FormCombobox', 'FormRange', 'FormCalendar', 'FormDatepicker', 'FormTimepicker', 'FormToggleGroup', 'AppIcon', 'AppButton', 'AppCopy', 'AppBadge', 'AppAlert', 'AppProgress', 'AppMeter', 'AppSpinner', 'AppDotMatrix', 'AppEmptyState', 'AppAsyncState', 'AppCard', 'AppAppear', 'AppNumberFlow', 'AppTable', 'AppGroup', 'AppDialog', 'AppDrawer', 'AppPopover', 'AppConfirm', 'AppTooltip', 'AppTabs', 'AppCollapsible', 'AppAccordion', 'AppPagination', 'AppMenu', 'AppMenuItems', 'AppMenubar', 'AppContextMenu', 'AppFloating', 'AppToaster'],
+        composables: []
+    },
+    {
+        from: '@vunset/ui/chart',
+        package: '@vunset/ui',
+        peers: ['@tanstack/charts'],
+        components: ['AppChartArea', 'AppChartLine', 'AppChartBar', 'AppChartDonut'],
+        composables: []
+    },
+    {
+        from: '@vunset/ui/data-table',
+        package: '@vunset/ui',
+        peers: ['@tanstack/vue-table'],
+        components: ['AppDataTable'],
+        composables: []
+    }
+];
+/** `@vunset/utils`' helpers, imported in the app and on the server. */
+export const UTILS = ['CHART_COLOR_PREFIX', 'chartColors', 'escapeCsvValue', 'formatCsv', 'DAYS_IN_WEEK', 'MONTHS_IN_YEAR', 'toDate', 'startOfDay', 'endOfDay', 'startOfMonth', 'endOfMonth', 'startOfYear', 'endOfYear', 'daysInMonth', 'addDays', 'addMonths', 'addYears', 'subDays', 'subMonths', 'subYears', 'compareDay', 'isSameDay', 'isSameMonth', 'isToday', 'isWeekend', 'isWithin', 'clampDate', 'monthNames', 'firstDayOfWeek', 'weekDayNames', 'formatDate', 'formatDateRange', 'formatISO', 'formatSafeISO', 'setDate', 'setDateRange', 'presetRange', 'debounce', 'toFixedNumber', 'calcTotal', 'calcAvg', 'calcPercentage', 'calcDiffPercentage', 'formatNumber', 'formatCurrency', 'formatPercentage', 'toSeparatedArray', 'toSeparatedString', 'toSeparatedList', 'getRandomString', 'generateRandomString', 'parseInlineSvg'];

package/dist/module.d.ts

@@ -0,0 +1,71 @@
+export interface ModuleOptions {
+    /**
+     * Put before every component's name: `'Vs'` registers `<VsDialogRoot>` and
+     * `<VsAppButton>`. Empty, each keeps its own name.
+     * @default ''
+     */
+    prefix?: string;
+    /** Registers `@vunset/vue`'s headless parts. @default true */
+    vue?: boolean;
+    /** Registers `@vunset/ui`'s components and adds its stylesheet. `false` leaves ui out. @default true */
+    ui?: boolean;
+    /** Adds `@vunset/ui/all.css`, before the app's own stylesheets. On with `ui`. */
+    css?: boolean;
+    /**
+     * Adds `@vunset/ui/preflight.css`, before the app's own stylesheets: the reset
+     * the components are built on, for an app without Tailwind, whose Preflight is one.
+     * @default false
+     */
+    preflight?: boolean;
+    /** Auto-imports the public composables: `useToast`, `useTheme`, `useClipboard`, ... @default true */
+    composables?: boolean;
+    /**
+     * Auto-imports `@vunset/utils`' helpers (`formatDate`, `formatNumber`,
+     * `calcTotal`, ...) in the app and in server routes, as a layer's `shared/utils` are.
+     * @default true
+     */
+    utils?: boolean;
+    /**
+     * Where `Icon` and `AppIcon` find their icons, handed to `configureIcons` for the app.
+     * `false` leaves icons to the app.
+     */
+    icons?: IconsOptions | false;
+    /**
+     * Sets up `useTheme` before the app's components and provides it as `$theme`.
+     * With a `settings` object in `app.config` that has a `key`, the theme is
+     * `settings.theme`, and all of `settings` is kept in `localStorage` under that key.
+     * `false` leaves `useTheme` to the app. @default true
+     */
+    theme?: boolean | ThemeOptions;
+}
+export interface ThemeOptions {
+    /** The choice before anything is stored. @default 'system' */
+    default?: 'light' | 'dark' | 'system';
+    /** The `localStorage` key, without `settings` in `app.config`; `null` remembers nothing. @default 'theme' */
+    storageKey?: string | null;
+    /** `<meta name="theme-color">` for each scheme; `settings.themeColor` in `app.config` wins. */
+    themeColor?: {
+        light: string;
+        dark: string;
+    };
+    /** Cross-fades the page on a change, where the browser can. @default true */
+    viewTransition?: boolean;
+}
+export interface IconsOptions {
+    /**
+     * A folder of SVG files, drawn inline: `'~/assets/icons'`, or a path from the
+     * app's source folder. Several, and the first with a name wins.
+     * @default '~/assets/icons', where it exists
+     */
+    dir?: string | string[];
+    /** Where the sprite is served from. @default '/sprite.svg' */
+    sprite?: string;
+    /**
+     * A folder of SVG files to build the sprite from, served at `sprite` and
+     * rebuilt as they change. Several, and the first with a name wins.
+     * @default '~/assets/icons', where it exists and `sprite` isn't set
+     */
+    spriteDir?: string | string[];
+}
+declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
+export default _default;

package/dist/module.js

@@ -0,0 +1,270 @@
+import { existsSync, mkdirSync, readFileSync, realpathSync, writeFileSync } from 'node:fs';
+import { defu } from 'defu';
+import { dirname, isAbsolute, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { addComponent, addImports, addPlugin, addServerImports, addTemplate, createResolver, defineNuxtModule, directoryToURL, resolveAlias, tryResolveModule, useLogger } from '@nuxt/kit';
+import { ENTRIES, UTILS } from './components.js';
+import { buildSprite, readIcons } from './sprite.js';
+/** The kit's own packages: dependencies of the module, so an app lists the module alone. */
+const OWN = ['@vunset/vue', '@vunset/ui', '@vunset/utils'];
+const isOwn = (id) => OWN.some((name) => id === name || id.startsWith(`${name}/`));
+const toPath = (resolved) => (resolved.startsWith('file:') ? fileURLToPath(resolved) : resolved);
+/**
+ * An alias per entry a package exports, to the file the entry names: the app
+ * imports `@vunset/vue` without listing it, so its own resolution would not
+ * find it under pnpm or through a `file:` link. Longest first: Vite and Nitro
+ * take the first alias that matches, and a bare name matches its subpaths too.
+ */
+function exportAliases(name, resolved) {
+    let dir = dirname(toPath(resolved));
+    for (;;) {
+        const manifest = join(dir, 'package.json');
+        if (existsSync(manifest)) {
+            const json = JSON.parse(readFileSync(manifest, 'utf8'));
+            if (json.name === name) {
+                const entries = Object.entries(json.exports ?? {});
+                entries.sort(([a], [b]) => b.length - a.length);
+                return Object.fromEntries(entries.map(([key, target]) => {
+                    const file = typeof target === 'string' ? target : (target.import ?? target.default ?? '');
+                    // `./css/*` maps a folder: the alias is its prefix.
+                    return key.endsWith('/*')
+                        ? [`${name}${key.slice(1, -2)}`, join(dir, file.slice(0, -2))]
+                        : [`${name}${key.slice(1)}`, join(dir, file)];
+                }));
+            }
+        }
+        const parent = dirname(dir);
+        if (parent === dir)
+            return {};
+        dir = parent;
+    }
+}
+/** Types an app uses without importing them, as Nuxt's own `Ref` is. The later entry wins: ui's, where an app may not list vue. */
+const GLOBAL_TYPES = {
+    '@vunset/vue': [
+        'ListboxItem',
+        'ListboxOption',
+        'ListboxOptionValue',
+        'ToggleGroupValue',
+        'CheckboxGroupValue',
+        'RadioValue',
+        'CalendarValueInput',
+        'Toast',
+        'ToastOptions'
+    ],
+    '@vunset/ui': [
+        'AppMenubarEntry',
+        'AppMenuEntry',
+        'AppToastData',
+        'AppTab',
+        'AppAccordionSection',
+        'FormToggleOption',
+        'FormCheckboxOption',
+        'FormRadioOption'
+    ],
+    '@vunset/vue/data-table': ['DataTableColumn', 'DataTableColumnHelper'],
+    '@vunset/ui/data-table': ['DataTableColumn', 'DataTableColumnHelper']
+};
+/** lightningcss' `Features.LightDark`. */
+const LIGHT_DARK = 1 << 20;
+/** Where `dir` and `spriteDir` look when they aren't set. */
+const ICONS_DIR = '~/assets/icons';
+export default defineNuxtModule({
+    meta: {
+        name: '@vunset/nuxt',
+        configKey: 'vunset',
+        compatibility: { nuxt: '>=3.13.0' }
+    },
+    defaults: {
+        prefix: '',
+        theme: true,
+        vue: true,
+        composables: true,
+        utils: true
+    },
+    async setup(options, nuxt) {
+        const logger = useLogger('@vunset/nuxt');
+        const resolver = createResolver(import.meta.url);
+        const roots = [nuxt.options.rootDir, ...nuxt.options.modulesDir].map((dir) => directoryToURL(dir));
+        // The kit's packages are found from the module, which depends on them; a peer such as TanStack, from the app.
+        const resolveFrom = (id) => tryResolveModule(id, isOwn(id) ? [new URL(import.meta.url)] : roots);
+        const installed = async (id) => Boolean(await resolveFrom(id));
+        // Linked from elsewhere (`file:` a checkout) rather than installed into `node_modules`.
+        const linked = async (id) => {
+            const path = await resolveFrom(id);
+            if (!path)
+                return false;
+            try {
+                return !realpathSync(toPath(path)).includes(`${sep}node_modules${sep}`);
+            }
+            catch {
+                return false;
+            }
+        };
+        for (const name of OWN) {
+            const path = await resolveFrom(name);
+            if (!path)
+                continue;
+            for (const [id, target] of Object.entries(exportAliases(name, path)))
+                nuxt.options.alias[id] ??= target;
+        }
+        const ui = options.ui ?? true;
+        if (ui && !(await installed('@vunset/ui'))) {
+            logger.warn('`ui` is on, but `@vunset/ui` is not installed: its components are left out.');
+        }
+        let missingPeers = false;
+        const types = new Map();
+        for (const entry of ENTRIES) {
+            if (entry.package === '@vunset/ui' && !ui)
+                continue;
+            if (!(await installed(entry.from)))
+                continue;
+            // A chart or data table needs its optional peers; without them, importing the entry fails.
+            if (!(await Promise.all(entry.peers.map(installed))).every(Boolean)) {
+                missingPeers = true;
+                continue;
+            }
+            // `vue: false` leaves out the headless parts, not the composables ui is used with.
+            const components = entry.package === '@vunset/vue' && !options.vue ? [] : entry.components;
+            for (const name of components) {
+                addComponent({
+                    name: `${options.prefix}${name}`,
+                    export: name,
+                    filePath: entry.from,
+                    // An app's own component of the same name wins, without a warning.
+                    priority: -1
+                });
+            }
+            if (options.composables) {
+                addImports(entry.composables.map((name) => ({ name, from: entry.from })));
+            }
+            for (const name of GLOBAL_TYPES[entry.from] ?? [])
+                types.set(name, entry.from);
+            // Pre-bundled when the dev server starts, rather than found by the first page
+            // and reloaded. Not the chart or data table, which would pull TanStack into every app.
+            // A linked package is kept out: Vite would serve the copy it bundled once,
+            // through every rebuild, where served as source a rebuild shows at once.
+            const optimizeDeps = (nuxt.options.vite.optimizeDeps ??= {});
+            if (await linked(entry.from))
+                (optimizeDeps.exclude ??= []).push(entry.from);
+            else if (entry.peers.length === 0)
+                (optimizeDeps.include ??= []).push(entry.from);
+        }
+        addImports([...types].map(([name, from]) => ({ name, from, type: true })));
+        // Peers are looked for once, here: installing one restarts Nuxt, so its entry
+        // registers without the dev server being stopped and started by hand.
+        if (missingPeers && nuxt.options.dev)
+            nuxt.options.watch.push(join(nuxt.options.rootDir, 'package.json'));
+        if (options.composables) {
+            addImports({ name: 'useInfinityFetch', from: resolver.resolve('./runtime/composables/use-infinity-fetch') });
+        }
+        // Under the app's own: a helper of the same name in its `utils` or `shared` wins.
+        if (options.utils && (await installed('@vunset/utils'))) {
+            const imports = UTILS.map((name) => ({ name, from: '@vunset/utils', priority: -1 }));
+            addImports(imports);
+            addServerImports(imports);
+        }
+        if (await linked('@vunset/utils'))
+            ((nuxt.options.vite.optimizeDeps ??= {}).exclude ??= []).push('@vunset/utils');
+        // A store per server request, carried to the page; see the plugin.
+        nuxt.options.build.transpile.push(resolver.resolve('./runtime'));
+        addPlugin(resolver.resolve('./runtime/toasts'));
+        addPlugin(resolver.resolve('./runtime/link'));
+        addPlugin(resolver.resolve('./runtime/route-query'));
+        if (options.theme !== false) {
+            const runtime = nuxt.options.runtimeConfig.public;
+            const theme = options.theme === true || options.theme === undefined ? {} : options.theme;
+            runtime.vunset = defu(runtime.vunset, { theme });
+            addPlugin(resolver.resolve('./runtime/theme'));
+        }
+        if (options.icons !== false)
+            addIcons(options.icons ?? {});
+        // Before the app's own, so its `components` rules come after ui's and win. ui
+        // declares Tailwind's layer order, so going first doesn't change how they rank.
+        if (ui && (options.css ?? true))
+            nuxt.options.css.unshift('@vunset/ui/all.css');
+        if (ui && options.preflight)
+            nuxt.options.css.unshift('@vunset/ui/preflight.css');
+        // Vite minifies CSS with lightningcss, which rewrites `light-dark()` for older
+        // browsers into variables only a `color-scheme` in the same CSS sets. One set
+        // on `<html>` by `useTheme()`, or none, leaves ui's colors invalid.
+        if (ui) {
+            const lightningcss = ((nuxt.options.vite.css ??= {}).lightningcss ??= {});
+            lightningcss.exclude = (lightningcss.exclude ?? 0) | LIGHT_DARK;
+        }
+        /** The folders an option names, as absolute paths; a missing one is reported. */
+        function folders(option) {
+            return [option ?? []].flat().map((folder) => {
+                const path = resolveAlias(folder);
+                const absolute = isAbsolute(path) ? path : resolve(nuxt.options.srcDir, path);
+                if (!existsSync(absolute))
+                    logger.warn(`The icons folder \`${folder}\` doesn't exist.`);
+                return absolute;
+            });
+        }
+        /** The default folder, when the app has it: unasked for, its absence isn't reported. */
+        function conventional() {
+            const path = resolveAlias(ICONS_DIR);
+            const absolute = isAbsolute(path) ? path : resolve(nuxt.options.srcDir, path);
+            return existsSync(absolute) ? [absolute] : [];
+        }
+        function addIcons({ dir, sprite, spriteDir }) {
+            const inlineDirs = dir === undefined ? conventional() : folders(dir);
+            // A `sprite` alone is one the app made itself: nothing is built over it.
+            const spriteDirs = spriteDir !== undefined ? folders(spriteDir) : sprite === undefined ? conventional() : [];
+            // Neither asked for nor there: the app's icons are its own business.
+            if (!options.icons && inlineDirs.length === 0 && spriteDirs.length === 0)
+                return;
+            // Nuxt's templates are virtual, so a glob can't be relative to one: it starts
+            // with `/`, from Vite's root, which is the app's source folder.
+            const root = nuxt.options.vite.root ?? nuxt.options.srcDir;
+            const globs = inlineDirs.map((folder) => {
+                const pattern = `/${relative(root, folder).replaceAll('\\', '/')}/*.svg`;
+                return `...import.meta.glob(${JSON.stringify(pattern)}, { query: '?raw', import: 'default' })`;
+            });
+            // Only the globs are written out: a glob takes no variable. Spread in order,
+            // so the first folder's file comes first, and is found first.
+            const template = addTemplate({
+                filename: 'vunset-icons.mjs',
+                getContents: () => `export const inline = ${globs.length > 0 ? `{ ${globs.join(', ')} }` : 'undefined'};\n`
+            });
+            nuxt.options.alias['#vunset/icons'] = template.dst;
+            const url = sprite ?? '/sprite.svg';
+            if (spriteDirs.length > 0)
+                addSprite(spriteDirs, url);
+            // The rest reaches the plugin through runtime config; an app's own value wins.
+            // A value, not `undefined`, which Nuxt would serve as `''` and no variable could set.
+            const runtime = nuxt.options.runtimeConfig.public;
+            runtime.vunset = defu(runtime.vunset, { icons: { sprite: url } });
+            addPlugin(resolver.resolve('./runtime/icons'));
+        }
+        // Built into the build folder and served from there, as a public asset: in
+        // development, and copied to whatever output the deploy preset makes.
+        function addSprite(sources, url) {
+            if (!url.startsWith('/')) {
+                logger.warn(`\`spriteDir\` builds a sprite the app serves, but \`sprite\` is \`${url}\`: give it a path.`);
+                return;
+            }
+            const dir = join(nuxt.options.buildDir, 'vunset-sprite');
+            const write = () => {
+                const sprite = buildSprite(readIcons(sources));
+                for (const name of sprite.invalid)
+                    logger.warn(`The icon \`${name}.svg\` has no <svg> in it.`);
+                const file = join(dir, url);
+                mkdirSync(dirname(file), { recursive: true });
+                writeFileSync(file, sprite.svg);
+            };
+            nuxt.hook('nitro:config', (config) => {
+                const nitro = config;
+                (nitro.publicAssets ??= []).push({ dir, maxAge: 0 });
+            });
+            // Not sooner: the CLI empties the build folder once Nitro is set up.
+            nuxt.hook('build:before', write);
+            nuxt.hook('builder:watch', (_event, path) => {
+                const file = resolve(nuxt.options.srcDir, path);
+                if (file.endsWith('.svg') && sources.some((source) => file.startsWith(source + sep)))
+                    write();
+            });
+        }
+    }
+});

package/dist/runtime/composables/use-infinity-fetch.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentPublicInstance, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type AsyncDataRequestStatus } from '#app';
+export interface UseInfinityFetchOptions {
+    /**
+     * The list: an element or a component (its root element), a template ref or a getter. The next page loads
+     * once its end is in view: its bottom within the window, and, when it scrolls itself (a table capped to a
+     * height, a panel), scrolled to its own end.
+     */
+    el: MaybeRefOrGetter<Element | ComponentPublicInstance | null | undefined>;
+    /** How many pixels before the end the next page starts loading. @default 0 */
+    offset?: number;
+    /** Where the page's items are in the response, when it isn't the list itself. */
+    dataKey?: string;
+    /** `POST` sends the query, with `page`, as the body. @default 'GET' */
+    method?: 'GET' | 'POST';
+    /** Sent with every page; a change starts over from the first. */
+    query?: MaybeRefOrGetter<Record<string, unknown> | undefined>;
+}
+export interface UseInfinityFetchReturn<T> {
+    /** Every page loaded so far, in order. */
+    data: Ref<T[]>;
+    /** `end` once a page comes back empty. */
+    status: Ref<AsyncDataRequestStatus | 'end'>;
+    /** Starts over from the first page. */
+    refresh: () => void;
+    /** The next page to load. */
+    currentPage: Ref<number>;
+}
+/** A list fetched a page at a time, the next one as its end scrolls into view. */
+export declare function useInfinityFetch<T>(url: string, options: UseInfinityFetchOptions): UseInfinityFetchReturn<T>;

package/dist/runtime/composables/use-infinity-fetch.js

@@ -0,0 +1,61 @@
+import { computed, onMounted, onScopeDispose, ref, toValue, watch } from 'vue';
+import { useRequestFetch } from '#app';
+/** A list fetched a page at a time, the next one as its end scrolls into view. */
+export function useInfinityFetch(url, options) {
+    // Untyped: the route is a runtime string, so Nuxt's typed routes can't check it.
+    const request = useRequestFetch();
+    const data = ref([]);
+    const page = ref(1);
+    const status = ref('idle');
+    const query = computed(() => toValue(options.query));
+    async function fetchPage() {
+        if (status.value === 'pending' || status.value === 'end')
+            return;
+        status.value = 'pending';
+        const params = { ...query.value, page: page.value };
+        const method = options.method ?? 'GET';
+        const response = await request(url, method === 'POST' ? { method, body: params } : { method, query: params });
+        const items = (options.dataKey ? response[options.dataKey] : response);
+        if (!items || items.length === 0) {
+            status.value = 'end';
+            return;
+        }
+        data.value = [...data.value, ...items];
+        page.value += 1;
+        status.value = 'idle';
+    }
+    function refresh() {
+        page.value = 1;
+        data.value = [];
+        status.value = 'idle';
+        void fetchPage();
+    }
+    watch(query, refresh, { deep: true });
+    onMounted(() => {
+        void fetchPage();
+        const check = () => {
+            const value = toValue(options.el);
+            const target = value instanceof Element ? value : value?.$el;
+            if (!(target instanceof Element))
+                return;
+            const offset = options.offset ?? 0;
+            // A list that doesn't scroll itself has nothing left to scroll, so only the window counts; a box capped
+            // to a height is always in the window, so only its own scroll counts.
+            const inWindow = target.getBoundingClientRect().bottom <= window.innerHeight + offset;
+            const scrolledToEnd = target.scrollHeight - target.scrollTop - target.clientHeight <= offset;
+            if (inWindow && scrolledToEnd)
+                void fetchPage();
+        };
+        // Captured, so a scroll inside any scrolling ancestor counts too.
+        window.addEventListener('scroll', check, { capture: true, passive: true });
+        window.addEventListener('resize', check, { passive: true });
+        // A page that leaves the end still in view loads the next at once. After the render, so the
+        // page's items are measured, not the list as it was before them.
+        watch(status, (value) => value === 'idle' && check(), { flush: 'post' });
+        onScopeDispose(() => {
+            window.removeEventListener('scroll', check, { capture: true });
+            window.removeEventListener('resize', check);
+        });
+    });
+    return { data, status, refresh, currentPage: page };
+}

package/dist/runtime/icons.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/icons.js

@@ -0,0 +1,11 @@
+import { defineNuxtPlugin, useRuntimeConfig } from '#app';
+import { configureIcons } from '@vunset/vue';
+// The icon folders, globbed: written by the module, since a glob takes no variable.
+import { inline } from '#vunset/icons';
+export default defineNuxtPlugin({
+    name: 'vunset:icons',
+    setup() {
+        const { sprite } = useRuntimeConfig().public.vunset.icons;
+        configureIcons({ sprite: sprite || undefined, inline });
+    }
+});

package/dist/runtime/link.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/link.js

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from '#app';
+import { NuxtLink } from '#components';
+import { configureLink } from '@vunset/vue';
+// Every `to` the library turns into a link goes through NuxtLink, unless a component is told otherwise.
+export default defineNuxtPlugin({
+    name: 'vunset:link',
+    setup() {
+        configureLink(NuxtLink);
+    }
+});

package/dist/runtime/route-query.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/route-query.js

@@ -0,0 +1,18 @@
+import { defineNuxtPlugin, navigateTo, useRouter } from '#app';
+import { routeQueryKey } from '@vunset/vue';
+// The route a data table keeps its sort in, and a pagination its page, through Nuxt's router.
+export default defineNuxtPlugin({
+    name: 'vunset:route-query',
+    setup(nuxtApp) {
+        const router = useRouter();
+        nuxtApp.vueApp.provide(routeQueryKey, {
+            get(key) {
+                const value = router.currentRoute.value.query[key];
+                return typeof value === 'string' ? value : undefined;
+            },
+            // `undefined` leaves the key out of the URL.
+            set: (key, value) => navigateTo({ query: { ...router.currentRoute.value.query, [key]: value } }),
+            setMany: (entries) => navigateTo({ query: { ...router.currentRoute.value.query, ...entries } })
+        });
+    }
+});

package/dist/runtime/theme.d.ts

@@ -0,0 +1,21 @@
+import { type ThemeMode } from '@vunset/vue';
+declare const _default: import("#app").Plugin<{
+    theme: {
+        current: "light" | "dark";
+        toggleTheme: () => void;
+        theme: ThemeMode;
+        resolved: "light" | "dark";
+        setTheme: (theme: ThemeMode) => void;
+        toggle: () => void;
+    };
+}> & import("#app").ObjectPlugin<{
+    theme: {
+        current: "light" | "dark";
+        toggleTheme: () => void;
+        theme: ThemeMode;
+        resolved: "light" | "dark";
+        setTheme: (theme: ThemeMode) => void;
+        toggle: () => void;
+    };
+}>;
+export default _default;

package/dist/runtime/theme.js

@@ -0,0 +1,43 @@
+import { defineNuxtPlugin, updateAppConfig, useAppConfig, useRuntimeConfig } from '#app';
+import { reactive, watch } from 'vue';
+import { useLocalStorage, useTheme } from '@vunset/vue';
+const MODES = ['light', 'dark', 'system'];
+// Before any component asks for the theme, so these options are the ones it starts with.
+export default defineNuxtPlugin({
+    name: 'vunset:theme',
+    setup() {
+        const options = useRuntimeConfig().public.vunset?.theme ?? {};
+        const config = useAppConfig();
+        const key = config.settings?.key;
+        // The whole of `settings` is remembered, not only the theme: sidebar, bookmarks, ...
+        if (import.meta.client && key) {
+            const { getItem, setItem } = useLocalStorage();
+            const saved = getItem(key);
+            if (saved)
+                updateAppConfig({ settings: saved });
+            watch(() => config.settings, (settings) => setItem(key, settings), { deep: true });
+        }
+        const theme = useTheme({
+            defaultTheme: options.default,
+            themeColor: config.settings?.themeColor ?? options.themeColor,
+            viewTransition: options.viewTransition ?? true,
+            ...(key
+                ? { storage: { get: () => config.settings.theme, set: (value) => (config.settings.theme = value) } }
+                : { storageKey: options.storageKey })
+        });
+        // `settings.theme` set by the app itself, or by `updateAppConfig`, is followed too.
+        if (key) {
+            watch(() => config.settings?.theme, (value) => {
+                if (MODES.includes(value) && value !== theme.theme.value)
+                    theme.setTheme(value);
+            });
+        }
+        return {
+            provide: {
+                // Reactive, so a template reads `$theme.current` without `.value`. `current` and
+                // `toggleTheme` are the old layer's names for `resolved` and `toggle`.
+                theme: reactive({ ...theme, current: theme.resolved, toggleTheme: theme.toggle })
+            }
+        };
+    }
+});

package/dist/runtime/toasts.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/toasts.js

@@ -0,0 +1,40 @@
+import { defineNuxtPlugin, useState } from '#app';
+import { createToastStore, defaultToastStore, provideToastStore } from '@vunset/vue';
+// A server render gets a store of its own, so a toast set while rendering one
+// request reaches no other. What it holds is handed to the page in the payload,
+// and put in the shared store there: the one `useToast()` reaches from anywhere,
+// a plain module included.
+export default defineNuxtPlugin({
+    name: 'vunset:toasts',
+    setup(nuxtApp) {
+        const carried = useState('vunset:toasts', () => []);
+        if (import.meta.server) {
+            const store = provideToastStore(createToastStore(), nuxtApp.vueApp);
+            nuxtApp.hook('app:rendered', () => {
+                carried.value = store.toasts.value.filter((toast) => toast.transitionStatus !== 'leave').map(plain);
+            });
+            return;
+        }
+        // Before the app mounts, so the page hydrates with the toasts the server drew.
+        for (const toast of carried.value.slice().reverse())
+            defaultToastStore.add(toast);
+        carried.value = [];
+    }
+});
+/** What survives the payload: functions don't, so `onClose`, `slot` and a `data` holding one stay behind. */
+function plain({ id, title, text, type, manualClose, timeout, data, onClose, slot }) {
+    const toast = { id, title, text, type, manualClose, timeout };
+    let dropped = Boolean(onClose || slot);
+    if (data !== undefined) {
+        try {
+            toast.data = structuredClone(data);
+        }
+        catch {
+            dropped = true;
+        }
+    }
+    if (dropped && import.meta.dev) {
+        console.warn(`[vunset] The toast \`${title ?? id}\` set during a server render reaches the page without its functions (\`onClose\`, \`slot\`, or one in \`data\`).`);
+    }
+    return toast;
+}

package/dist/sprite.d.ts

@@ -0,0 +1,19 @@
+export interface SpriteIcon {
+    name: string;
+    svg: string;
+}
+export interface Sprite {
+    svg: string;
+    /** The names drawn, in order. */
+    names: string[];
+    /** Files with no `<svg>` in them. */
+    invalid: string[];
+}
+/** The `.svg` files of each folder, in order; a name an earlier folder has is left out. */
+export declare function readIcons(folders: string[]): SpriteIcon[];
+/**
+ * One `<symbol>` per icon, parsed as an inline icon is: fills become
+ * `currentColor`, and the root's own attributes (`viewBox`, a stroke) move to
+ * the symbol, so a stroke icon keeps its stroke.
+ */
+export declare function buildSprite(icons: SpriteIcon[]): Sprite;

package/dist/sprite.js

@@ -0,0 +1,47 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { basename, join } from 'node:path';
+import { parseInlineSvg } from '@vunset/utils';
+/** The `.svg` files of each folder, in order; a name an earlier folder has is left out. */
+export function readIcons(folders) {
+    const icons = new Map();
+    for (const folder of folders) {
+        if (!existsSync(folder))
+            continue;
+        for (const file of readdirSync(folder).filter((file) => file.endsWith('.svg')).sort()) {
+            const name = basename(file, '.svg');
+            if (!icons.has(name))
+                icons.set(name, readFileSync(join(folder, file), 'utf8'));
+        }
+    }
+    return [...icons].map(([name, svg]) => ({ name, svg }));
+}
+/**
+ * One `<symbol>` per icon, parsed as an inline icon is: fills become
+ * `currentColor`, and the root's own attributes (`viewBox`, a stroke) move to
+ * the symbol, so a stroke icon keeps its stroke.
+ */
+export function buildSprite(icons) {
+    const names = [];
+    const invalid = [];
+    const symbols = [];
+    for (const { name, svg } of icons) {
+        const parsed = parseInlineSvg(svg);
+        if (!parsed) {
+            invalid.push(name);
+            continue;
+        }
+        // `Icon` draws a sprite icon with `fill="none"`, which a shape with no fill
+        // of its own would inherit through `<use>`: such a file is filled, as it is alone.
+        const attrs = { fill: 'currentColor', ...parsed.attrs };
+        const attributes = Object.entries(attrs)
+            .map(([key, value]) => ` ${key}="${value}"`)
+            .join('');
+        symbols.push(`<symbol id="${name}"${attributes}>${parsed.content.trim()}</symbol>`);
+        names.push(name);
+    }
+    return {
+        svg: `<svg xmlns="http://www.w3.org/2000/svg" style="display: none">\n${symbols.join('\n')}\n</svg>\n`,
+        names,
+        invalid
+    };
+}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@vunset/nuxt",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-rc.1",
+  "description": "Nuxt module for Vunset: every component, composable and helper auto-imported, styles loaded.",
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "vue",
+    "headless",
+    "components",
+    "ui",
+    "accessibility"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vunset/vunset.git",
+    "directory": "packages/nuxt"
+  },
+  "homepage": "https://github.com/vunset/vunset#readme",
+  "bugs": "https://github.com/vunset/vunset/issues",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.js"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/components.ts && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@vunset/ui": "1.0.0-rc.1",
+    "@vunset/utils": "1.0.0-rc.1",
+    "@vunset/vue": "1.0.0-rc.1",
+    "@nuxt/kit": "^4.6.1",
+    "defu": "^6.1.7"
+  },
+  "peerDependencies": {
+    "@tanstack/charts": "^1.1.0",
+    "@tanstack/vue-table": "^9.2.4"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/charts": {
+      "optional": true
+    },
+    "@tanstack/vue-table": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@nuxt/schema": "^4.6.1",
+    "nuxt": "^4.6.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}