@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/preset.js

@@ -0,0 +1,334 @@
+/**
+ * Presets: a whole Narvi look in one short code, such as `1caaba`.
+ *
+ * A preset picks an accent, a stone, a radius, three faces, a pace of motion
+ * and a colour scheme. From it come the token overrides for `stylex.createTheme`
+ * and the files to drop into an app. Nothing here depends on Svelte or StyleX, so
+ * the docs and a command-line tool can share it.
+ */
+/** Hue and chroma in OKLCH. Ithil reproduces Narvi's own silver-blue. */
+export const accents = [
+    { id: 'ithil', label: 'Ithil', hue: 256, chroma: 0.09 },
+    { id: 'ember', label: 'Ember', hue: 48, chroma: 0.13 },
+    { id: 'moss', label: 'Moss', hue: 150, chroma: 0.09 },
+    { id: 'amethyst', label: 'Amethyst', hue: 300, chroma: 0.11 },
+    { id: 'rose', label: 'Rose', hue: 8, chroma: 0.12 },
+    { id: 'gold', label: 'Gold', hue: 82, chroma: 0.11 }
+];
+/** Paper is Narvi's own: warm paper by day, near-black stone by night. */
+export const stones = [
+    { id: 'paper', label: 'Paper', description: 'Warm by day, deep blue-black by night' },
+    {
+        id: 'slate',
+        label: 'Slate',
+        description: 'Cool grey-blue throughout',
+        tokens: {
+            bg: ['#f1f4f8', '#070a10'],
+            bgRaised: ['#fafbfd', '#0d111a'],
+            text: ['#111723', '#e6ecf5'],
+            textMuted: ['#4f5b6d', '#94a0b3'],
+            textSubtle: ['#5d6879', '#7e8a9d'],
+            edge: ['#838d9c', '#5b6678'],
+            edgeHover: ['#68717f', '#768296']
+        }
+    },
+    {
+        id: 'ash',
+        label: 'Ash',
+        description: 'Pure grey, no tint at all',
+        tokens: {
+            bg: ['#f4f4f4', '#0a0a0a'],
+            bgRaised: ['#fbfbfb', '#111111'],
+            text: ['#171717', '#ececec'],
+            textMuted: ['#595959', '#a0a0a0'],
+            textSubtle: ['#666666', '#888888'],
+            edge: ['#8a8a8a', '#626262'],
+            edgeHover: ['#6e6e6e', '#7c7c7c']
+        }
+    }
+];
+/** A frame is always its inner radius plus its padding: `frame` = `xl` + 5. */
+export const radii = [
+    { id: 'sharp', label: 'Sharp', scale: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 } },
+    { id: 'default', label: 'Soft' },
+    { id: 'round', label: 'Round', scale: { xs: 7, sm: 8, md: 10, lg: 12, xl: 16 } }
+];
+const SYSTEM = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+export const bodies = [
+    {
+        id: 'geist',
+        label: 'Geist',
+        stack: `"Geist Variable", ${SYSTEM}`,
+        package: '@fontsource-variable/geist',
+        imports: ['@fontsource-variable/geist']
+    },
+    {
+        id: 'inter',
+        label: 'Inter',
+        stack: `"Inter Variable", ${SYSTEM}`,
+        package: '@fontsource-variable/inter',
+        imports: ['@fontsource-variable/inter']
+    },
+    {
+        id: 'plex',
+        label: 'IBM Plex Sans',
+        stack: `"IBM Plex Sans", ${SYSTEM}`,
+        package: '@fontsource/ibm-plex-sans',
+        imports: [
+            '@fontsource/ibm-plex-sans/400.css',
+            '@fontsource/ibm-plex-sans/500.css',
+            '@fontsource/ibm-plex-sans/600.css'
+        ]
+    },
+    { id: 'system', label: 'System', stack: SYSTEM }
+];
+export const displays = [
+    {
+        id: 'cormorant',
+        label: 'Cormorant',
+        stack: '"Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif',
+        package: '@fontsource/cormorant-garamond',
+        imports: ['@fontsource/cormorant-garamond/500.css']
+    },
+    {
+        id: 'fraunces',
+        label: 'Fraunces',
+        stack: '"Fraunces Variable", Georgia, serif',
+        package: '@fontsource-variable/fraunces',
+        imports: ['@fontsource-variable/fraunces']
+    },
+    {
+        id: 'instrument',
+        label: 'Instrument Serif',
+        stack: '"Instrument Serif", Georgia, serif',
+        package: '@fontsource/instrument-serif',
+        imports: ['@fontsource/instrument-serif']
+    },
+    // Headings in the body face, for a plainer page
+    { id: 'sans', label: 'Same as body', stack: 'inherit' }
+];
+export const monos = [
+    {
+        id: 'geist-mono',
+        label: 'Geist Mono',
+        stack: '"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+        package: '@fontsource/geist-mono',
+        imports: ['@fontsource/geist-mono/400.css']
+    },
+    {
+        id: 'jetbrains',
+        label: 'JetBrains',
+        stack: '"JetBrains Mono Variable", ui-monospace, Menlo, Consolas, monospace',
+        package: '@fontsource-variable/jetbrains-mono',
+        imports: ['@fontsource-variable/jetbrains-mono']
+    },
+    {
+        id: 'plex-mono',
+        label: 'Plex Mono',
+        stack: '"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace',
+        package: '@fontsource/ibm-plex-mono',
+        imports: ['@fontsource/ibm-plex-mono/400.css']
+    }
+];
+export const motions = [
+    { id: 'brisk', label: 'Brisk', durations: { fast: 90, base: 120, slow: 200 } },
+    { id: 'standard', label: 'Standard' },
+    { id: 'calm', label: 'Calm', durations: { fast: 160, base: 200, slow: 340 } }
+];
+export const schemes = [
+    { id: 'dark', label: 'Dark' },
+    { id: 'light', label: 'Light' },
+    { id: 'system', label: 'System' }
+];
+export const defaultPreset = {
+    accent: 'ithil',
+    stone: 'paper',
+    radius: 'default',
+    body: 'geist',
+    display: 'cormorant',
+    mono: 'geist-mono',
+    motion: 'standard',
+    scheme: 'dark'
+};
+// The order of the fields in a code. New fields only ever go on the end.
+const fields = [
+    ['accent', accents],
+    ['stone', stones],
+    ['radius', radii],
+    ['body', bodies],
+    ['display', displays],
+    ['mono', monos],
+    ['motion', motions],
+    ['scheme', schemes]
+];
+const VERSION = '1';
+const DIGITS = 'abcdefghijklmnopqrstuvwxyz';
+/** A preset as a short code: a version digit, then one letter per choice. */
+export function encode(preset) {
+    return (VERSION +
+        fields
+            .map(([key, options]) => {
+            const index = options.findIndex((option) => option.id === preset[key]);
+            return DIGITS[Math.max(index, 0)];
+        })
+            .join(''));
+}
+/**
+ * Reads a code back into a preset. Unknown or missing letters fall back to the
+ * defaults, so a code from a newer version still opens; `undefined` means it is
+ * not a preset code at all.
+ */
+export function decode(code) {
+    const clean = code.trim().toLowerCase();
+    if (!clean.startsWith(VERSION) || !/^[0-9][a-z]*$/.test(clean))
+        return undefined;
+    const preset = { ...defaultPreset };
+    fields.forEach(([key, options], index) => {
+        const letter = clean[index + 1];
+        const option = letter
+            ? options[DIGITS.indexOf(letter)]
+            : undefined;
+        if (option)
+            preset[key] = option.id;
+    });
+    return preset;
+}
+// ─── What a preset changes ───────────────────────────────────────────────────
+const pair = ([light, dark]) => `light-dark(${light}, ${dark})`;
+// Three decimals is finer than any screen can show, and keeps the values readable
+const round = (n) => Number(n.toFixed(3));
+const oklch = (l, c, h, alpha) => `oklch(${round(l)} ${round(c)} ${round(h)}${alpha === undefined ? '' : ` / ${alpha}`})`;
+export function overrides(preset) {
+    const result = {};
+    const colors = {};
+    const accent = accents.find((option) => option.id === preset.accent);
+    if (accent && accent.id !== 'ithil') {
+        const { hue: h, chroma: c } = accent;
+        colors.ithil = pair([oklch(0.47, c, h), oklch(0.86, c * 0.62, h)]);
+        colors.ithilStrong = pair([oklch(0.55, c * 1.1, h), oklch(0.77, c * 0.95, h)]);
+        colors.onIthil = pair(['#ffffff', oklch(0.18, c * 0.35, h)]);
+        colors.ithilSoft = pair([oklch(0.47, c, h, 0.1), oklch(0.82, c * 0.9, h, 0.1)]);
+        colors.focusRing = colors.ithil;
+        colors.focusHalo = pair([oklch(0.47, c, h, 0.18), oklch(0.82, c * 0.9, h, 0.18)]);
+        colors.glow = pair([oklch(0.47, c, h, 0), oklch(0.8, c, h, 0.2)]);
+    }
+    const stone = stones.find((option) => option.id === preset.stone);
+    if (stone?.tokens) {
+        for (const [token, value] of Object.entries(stone.tokens))
+            colors[token] = pair(value);
+    }
+    if (Object.keys(colors).length)
+        result.colors = colors;
+    const scale = radii.find((option) => option.id === preset.radius)?.scale;
+    if (scale) {
+        const rem = (px) => `${px / 16}rem`;
+        result.radius = {
+            ...Object.fromEntries(Object.entries(scale).map(([key, px]) => [key, rem(px)])),
+            frame: rem(scale.xl + 5)
+        };
+    }
+    const font = {};
+    if (preset.display !== defaultPreset.display)
+        font.display = displays.find((option) => option.id === preset.display).stack;
+    if (preset.mono !== defaultPreset.mono)
+        font.mono = monos.find((option) => option.id === preset.mono).stack;
+    if (Object.keys(font).length)
+        result.font = font;
+    const durations = motions.find((option) => option.id === preset.motion)?.durations;
+    if (durations) {
+        result.motion = Object.fromEntries(Object.entries(durations).map(([key, ms]) => [key, `${ms}ms`]));
+    }
+    return result;
+}
+/** The font packages a preset needs, beyond Narvi itself. */
+export function fontPackages(preset) {
+    const faces = [
+        bodies.find((face) => face.id === preset.body),
+        displays.find((face) => face.id === preset.display),
+        monos.find((face) => face.id === preset.mono)
+    ];
+    return [...new Set(faces.flatMap((face) => (face?.package ? [face.package] : [])))];
+}
+/** The files that put a preset into a SvelteKit app. */
+export function presetFiles(preset) {
+    const theme = overrides(preset);
+    const groups = Object.keys(theme);
+    const body = bodies.find((face) => face.id === preset.body);
+    const faces = [
+        body,
+        displays.find((face) => face.id === preset.display),
+        monos.find((face) => face.id === preset.mono)
+    ];
+    const imports = [...new Set(faces.flatMap((face) => face.imports ?? []))];
+    const code = encode(preset);
+    const files = [];
+    files.push({
+        path: 'Terminal',
+        language: 'sh',
+        // One command, a package to a line, so it reads at any width and pastes as one
+        code: ['pnpm add @diegopluna/narvi', ...fontPackages(preset).map((name) => `  ${name}`)].join(' \\\n')
+    });
+    if (groups.length) {
+        const quote = (value) => `'${value.replaceAll("'", "\\'")}'`;
+        const blocks = groups.map((group) => {
+            const entries = Object.entries(theme[group])
+                .map(([token, value]) => `\t${token}: ${quote(value)}`)
+                .join(',\n');
+            return `export const ${group}Theme = stylex.createTheme(${group}, {\n${entries}\n});`;
+        });
+        files.push({
+            path: 'src/lib/theme.stylex.ts',
+            language: 'ts',
+            code: `// Narvi preset ${code}
+import * as stylex from '@stylexjs/stylex';
+import { ${groups.join(', ')} } from '@diegopluna/narvi/tokens.stylex.js';
+
+${blocks.join('\n\n')}
+
+/** Pass to <Theme theme={preset}> around your app. */
+export const preset = [${groups.map((group) => `${group}Theme`).join(', ')}];
+`
+        });
+    }
+    const scheme = { dark: 'dark', light: 'light', system: 'light dark' }[preset.scheme];
+    files.push({
+        path: 'src/app.css',
+        language: 'css',
+        code: `${imports.map((name) => `@import '${name}';`).join('\n')}${imports.length ? '\n\n' : ''}:root {
+	color-scheme: ${scheme};
+	font-family: ${body.stack};
+}
+`
+    });
+    files.push({
+        path: 'src/routes/+layout.svelte',
+        language: 'svelte',
+        code: groups.length
+            ? `<script lang="ts">
+	import '../app.css';
+	import { DevStyles, Theme } from '@diegopluna/narvi';
+	import { preset } from './theme.stylex.js';
+
+	let { children } = $props();
+</script>
+
+<DevStyles />
+
+<Theme theme={preset}>
+	{@render children()}
+</Theme>
+`
+            : `<script lang="ts">
+	import '../app.css';
+	import { DevStyles } from '@diegopluna/narvi';
+
+	let { children } = $props();
+</script>
+
+<DevStyles />
+
+{@render children()}
+`
+    });
+    return files;
+}

package/dist/tokens.stylex.d.ts

@@ -0,0 +1,104 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Colours are written once with `light-dark()`, so they follow the nearest
+ * `color-scheme`. Set `color-scheme: light dark` on `:root` to follow the
+ * system, or force a scheme on any subtree with the `Theme` component.
+ *
+ * The palette is stone and moonlight: near-black and warm paper for surfaces,
+ * and one silver-blue ("ithildin") that is used only for state.
+ */
+export declare const colors: stylex.VarGroup<Readonly<{
+    bg: string;
+    bgRaised: string;
+    surface: string;
+    surfaceRaised: string;
+    hover: string;
+    well: string;
+    line: string;
+    lineStrong: string;
+    edge: string;
+    edgeHover: string;
+    highlight: string;
+    shade: string;
+    text: string;
+    textMuted: string;
+    textSubtle: string;
+    ithil: string;
+    ithilStrong: string;
+    onIthil: string;
+    ithilSoft: string;
+    focusRing: string;
+    focusHalo: string;
+    glow: string;
+    mithrilTop: string;
+    mithrilBottom: string;
+    onMithril: string;
+    mithrilEdge: string;
+    mithrilDrop: string;
+    success: string;
+    warning: string;
+    danger: string;
+    successSoft: string;
+    warningSoft: string;
+    dangerSoft: string;
+    successInk: string;
+    warningInk: string;
+    dangerInk: string;
+    codeKey: string;
+    codeString: string;
+    codeNumber: string;
+    codeLiteral: string;
+    codePunct: string;
+}>, symbol>;
+/**
+ * 4px spacing scale, in rem. Narvi is sized in rem throughout, so an app that
+ * sets the root font size (13px for a dense window, 18px for a roomy one) scales
+ * every part with it. Hairlines, outlines and shadows stay in px, to stay crisp.
+ */
+export declare const space: stylex.VarGroup<Readonly<{
+    x1: string;
+    x2: string;
+    x3: string;
+    x4: string;
+    x5: string;
+    x6: string;
+    x8: string;
+    x10: string;
+    x12: string;
+    x16: string;
+}>, symbol>;
+/** A frame is always its inner radius plus its padding: `frame` = `xl` + 5px (0.3125rem). */
+export declare const radius: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    frame: string;
+    full: string;
+}>, symbol>;
+export declare const font: stylex.VarGroup<Readonly<{
+    body: string;
+    display: string;
+    mono: string;
+    sizeXs: string;
+    sizeSm: string;
+    sizeMd: string;
+    sizeLg: string;
+    sizeXl: string;
+    weightRegular: string;
+    weightMedium: string;
+    weightSemibold: string;
+    weightDisplay: string;
+    trackingDisplay: string;
+    leadingTight: string;
+    leadingSnug: string;
+    leadingNormal: string;
+}>, symbol>;
+export declare const motion: stylex.VarGroup<Readonly<{
+    fast: string;
+    base: string;
+    slow: string;
+    easeOut: string;
+    easeInOut: string;
+}>, symbol>;

package/dist/tokens.stylex.js

@@ -0,0 +1,125 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Colours are written once with `light-dark()`, so they follow the nearest
+ * `color-scheme`. Set `color-scheme: light dark` on `:root` to follow the
+ * system, or force a scheme on any subtree with the `Theme` component.
+ *
+ * The palette is stone and moonlight: near-black and warm paper for surfaces,
+ * and one silver-blue ("ithildin") that is used only for state.
+ */
+export const colors = stylex.defineVars({
+    // Surfaces, from the page upwards
+    bg: 'light-dark(#f4f3ef, #06080c)',
+    bgRaised: 'light-dark(#fbfaf8, #0b0e14)',
+    surface: 'light-dark(rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.028))',
+    surfaceRaised: 'light-dark(#ffffff, rgb(255 255 255 / 0.055))',
+    hover: 'light-dark(rgb(20 23 28 / 0.05), rgb(255 255 255 / 0.07))',
+    // A recess: inputs, tracks, code
+    well: 'light-dark(rgb(20 23 28 / 0.035), rgb(0 0 0 / 0.34))',
+    // Lines. `edge` is the boundary of a control and holds 3:1 against its surface.
+    line: 'light-dark(rgb(20 23 28 / 0.1), rgb(255 255 255 / 0.075))',
+    lineStrong: 'light-dark(rgb(20 23 28 / 0.2), rgb(255 255 255 / 0.15))',
+    edge: 'light-dark(#868c97, #5f6775)',
+    edgeHover: 'light-dark(#6b717c, #7a8392)',
+    // Light catching a top edge, and the shade under and inside things
+    highlight: 'light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.07))',
+    shade: 'light-dark(rgb(20 23 28 / 0.08), rgb(0 0 0 / 0.5))',
+    // Text
+    text: 'light-dark(#14171c, #e9edf3)',
+    textMuted: 'light-dark(#555b66, #98a1b0)',
+    textSubtle: 'light-dark(#626873, #818a99)',
+    // Ithildin: focus, selection, progress. Nothing else.
+    ithil: 'light-dark(#34598c, #bfd6f4)',
+    ithilStrong: 'light-dark(#4a73ab, #8fb6ea)',
+    onIthil: 'light-dark(#ffffff, #07101d)',
+    ithilSoft: 'light-dark(rgb(52 89 140 / 0.1), rgb(160 200 255 / 0.1))',
+    focusRing: 'light-dark(#34598c, #bfd6f4)',
+    focusHalo: 'light-dark(rgb(52 89 140 / 0.18), rgb(150 195 255 / 0.18))',
+    // A faint glow around lit state. Dark scheme only; it is transparent in light.
+    glow: 'light-dark(rgb(52 89 140 / 0), rgb(140 190 255 / 0.2))',
+    // Mithril: the solid button, a small piece of bright metal
+    mithrilTop: 'light-dark(#30353e, #fafbfc)',
+    mithrilBottom: 'light-dark(#16191e, #c9d2dd)',
+    onMithril: 'light-dark(#f4f6f9, #0a0d12)',
+    mithrilEdge: 'light-dark(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.9))',
+    mithrilDrop: 'light-dark(rgb(20 23 28 / 0.28), rgb(150 190 255 / 0.22))',
+    // Status
+    success: 'light-dark(#2f7d55, #6fd3a0)',
+    warning: 'light-dark(#a56a14, #e8b765)',
+    danger: 'light-dark(#b3372e, #f08a80)',
+    // Behind a status: a wash of its colour, stronger at night so it still reads
+    successSoft: 'light-dark(rgb(47 125 85 / 0.12), rgb(111 211 160 / 0.16))',
+    warningSoft: 'light-dark(rgb(165 106 20 / 0.12), rgb(232 183 101 / 0.16))',
+    dangerSoft: 'light-dark(rgb(179 55 46 / 0.12), rgb(240 138 128 / 0.16))',
+    // Small text in a status colour: mixed toward the text colour, so a 12px label
+    // on its soft wash still holds 4.5:1
+    successInk: 'light-dark(#24543e, #a0ddc1)',
+    warningInk: 'light-dark(#6b4917, #e8ce9a)',
+    dangerInk: 'light-dark(#732a27, #edb2ad)',
+    // Code, as the stone shows it: keys in slate, strings in moss, numbers in copper,
+    // literals in heather. Each holds 4.5:1 on a well in both schemes.
+    codeKey: 'light-dark(#4a5794, #aebcf0)',
+    codeString: 'light-dark(#3b6e4c, #9fd2ac)',
+    codeNumber: 'light-dark(#985616, #ecb47c)',
+    codeLiteral: 'light-dark(#87397a, #e2a6d3)',
+    codePunct: 'light-dark(#7a808a, #6d7686)'
+});
+/**
+ * 4px spacing scale, in rem. Narvi is sized in rem throughout, so an app that
+ * sets the root font size (13px for a dense window, 18px for a roomy one) scales
+ * every part with it. Hairlines, outlines and shadows stay in px, to stay crisp.
+ */
+export const space = stylex.defineVars({
+    x1: '0.25rem',
+    x2: '0.5rem',
+    x3: '0.75rem',
+    x4: '1rem',
+    x5: '1.25rem',
+    x6: '1.5rem',
+    x8: '2rem',
+    x10: '2.5rem',
+    x12: '3rem',
+    x16: '4rem'
+});
+/** A frame is always its inner radius plus its padding: `frame` = `xl` + 5px (0.3125rem). */
+export const radius = stylex.defineVars({
+    xs: '0.3125rem',
+    sm: '0.375rem',
+    md: '0.5rem',
+    lg: '0.625rem',
+    xl: '0.75rem',
+    frame: '1.0625rem',
+    full: '9999px'
+});
+export const font = stylex.defineVars({
+    // Interface text takes the font of the page it is placed on.
+    body: 'inherit',
+    // Large headings are set in a serif. It falls back to system serifs when Cormorant is not loaded.
+    display: '"Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif',
+    mono: '"Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace',
+    sizeXs: '0.75rem',
+    sizeSm: '0.8125rem',
+    sizeMd: '0.875rem',
+    sizeLg: '1rem',
+    sizeXl: '1.0625rem',
+    weightRegular: '400',
+    weightMedium: '500',
+    weightSemibold: '600',
+    // Weight and tracking for the display serif
+    weightDisplay: '500',
+    trackingDisplay: '-0.015em',
+    leadingTight: '1.1',
+    leadingSnug: '1.4',
+    leadingNormal: '1.55'
+});
+export const motion = stylex.defineVars({
+    fast: '120ms',
+    base: '150ms',
+    // Popups opened from a control take `fast`, dialogs `base`, panels `slow`.
+    // Nothing in the interface takes longer than 200ms.
+    slow: '200ms',
+    // Starts fast, then settles: press feedback, and anything entering or leaving
+    easeOut: 'cubic-bezier(0.23, 1, 0.32, 1)',
+    // For something that travels across the screen, such as a sliding thumb
+    easeInOut: 'cubic-bezier(0.77, 0, 0.175, 1)'
+});

package/dist/vite.d.ts

@@ -0,0 +1,16 @@
+import stylex from '@stylexjs/unplugin';
+import type { Plugin } from 'vite';
+type StylexOptions = NonNullable<Parameters<typeof stylex.vite>[0]>;
+export type NarviOptions = StylexOptions;
+/**
+ * Vite plugin that compiles Narvi's styles (and any StyleX you write yourself).
+ *
+ * It is a thin preset over `@stylexjs/unplugin`:
+ * - runs after the Svelte compiler, so `.svelte` files are handled
+ * - emits cascade layers, so your own unlayered CSS always wins over Narvi's
+ * - leaves `light-dark()` and `:dir()` alone, which the tokens and components rely on
+ *
+ * Add it after `sveltekit()` (or `svelte()`) in `vite.config.ts`.
+ */
+export declare function narvi(options?: NarviOptions): Plugin;
+export default narvi;

package/dist/vite.js

@@ -0,0 +1,58 @@
+import stylex from '@stylexjs/unplugin';
+import { Features } from 'lightningcss';
+/**
+ * Vite plugin that compiles Narvi's styles (and any StyleX you write yourself).
+ *
+ * It is a thin preset over `@stylexjs/unplugin`:
+ * - runs after the Svelte compiler, so `.svelte` files are handled
+ * - emits cascade layers, so your own unlayered CSS always wins over Narvi's
+ * - leaves `light-dark()` and `:dir()` alone, which the tokens and components rely on
+ *
+ * Add it after `sveltekit()` (or `svelte()`) in `vite.config.ts`.
+ */
+export function narvi(options = {}) {
+    const plugin = stylex.vite({
+        useCSSLayers: true,
+        ...options,
+        lightningcssOptions: {
+            minify: true,
+            ...options.lightningcssOptions,
+            // Both are supported by every browser Narvi targets. Lowering them breaks
+            // things: `light-dark()` loses its scheme, and `:dir()` becomes a list of
+            // languages that ignores the `dir` attribute.
+            exclude: (options.lightningcssOptions?.exclude ?? 0) | Features.LightDark | Features.DirSelector
+        }
+    });
+    const configureServer = plugin.configureServer;
+    return {
+        ...plugin,
+        // The StyleX plugin defaults to `enforce: 'pre'`, which would hand it raw
+        // `.svelte` source. Dropping `enforce` lets the Svelte compiler go first.
+        enforce: undefined,
+        // SvelteKit has no index.html and warns about this hook. The `DevStyles`
+        // component loads the dev stylesheet instead.
+        transformIndexHtml: undefined,
+        // The StyleX plugin starts a polling timer that is only cleared when an
+        // HTTP server closes. Servers without one (Vitest, middleware mode) would
+        // be kept alive by it, so timers started here are detached from the
+        // process lifetime.
+        configureServer(server) {
+            const started = [];
+            const original = globalThis.setInterval;
+            globalThis.setInterval = ((...args) => {
+                const timer = original(...args);
+                started.push(timer);
+                return timer;
+            });
+            try {
+                configureServer?.call(this, server);
+            }
+            finally {
+                globalThis.setInterval = original;
+            }
+            for (const timer of started)
+                timer.unref?.();
+        }
+    };
+}
+export default narvi;