@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/internal/layer.js

@@ -0,0 +1,129 @@
+/**
+ * What everything that floats has in common: menus, popovers, selects and the
+ * palette. One raised surface, sized to the room bits-ui measures for it, and
+ * one motion: it grows out of what opened it, and goes a little faster than it
+ * came. bits-ui waits for the transition before it removes the element, so
+ * the exit is seen.
+ */
+import * as stylex from '@stylexjs/stylex';
+import { colors, font, motion, radius } from '../tokens.stylex.js';
+const MOTION = '@media (prefers-reduced-motion: no-preference)';
+const FORCED = '@media (forced-colors: active)';
+const HOVER = '@media (hover: hover) and (pointer: fine)';
+const CLOSED = ':is([data-state="closed"])';
+const HIGHLIGHTED = ':is([data-highlighted])';
+const DISABLED = ':is([data-disabled])';
+export const layer = stylex.create({
+    surface: {
+        boxSizing: 'border-box',
+        zIndex: 50,
+        minWidth: 'max(12rem, var(--bits-floating-anchor-width, 0px))',
+        maxWidth: 'min(22rem, var(--bits-floating-available-width, 100vw))',
+        // Never taller than the room left in the window; it scrolls inside instead
+        maxHeight: 'var(--bits-floating-available-height, 80vh)',
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        padding: '0.25rem',
+        // Items are 8px round inside 4px of padding: 12px outside
+        borderRadius: radius.xl,
+        backgroundColor: colors.bgRaised,
+        boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, inset 0 1px 0 ${colors.highlight}, 0 2px 4px ${colors.shade}, 0 16px 40px -12px ${colors.shade}`,
+        color: colors.text,
+        fontFamily: font.body,
+        fontSize: font.sizeMd,
+        lineHeight: font.leadingSnug,
+        scrollbarWidth: 'thin',
+        outlineStyle: 'solid',
+        outlineWidth: { default: 0, [FORCED]: '1px' },
+        outlineColor: 'CanvasText',
+        transformOrigin: 'var(--bits-floating-transform-origin, top)',
+        opacity: { default: 1, '@starting-style': 0, [CLOSED]: 0 },
+        scale: {
+            default: null,
+            [MOTION]: { default: 1, '@starting-style': 0.97, [CLOSED]: 0.97 }
+        },
+        transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+        transitionDuration: { default: motion.fast, [CLOSED]: '80ms' },
+        transitionTimingFunction: motion.easeOut
+    },
+    // A row in a menu, a select or the palette
+    item: {
+        position: 'relative',
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        minHeight: '2rem',
+        paddingBlock: '0.375rem',
+        paddingInline: '0.5rem',
+        borderRadius: radius.md,
+        color: { default: colors.text, [DISABLED]: colors.textSubtle },
+        cursor: { default: 'default', [DISABLED]: 'not-allowed' },
+        userSelect: 'none',
+        outlineStyle: 'none',
+        // The highlight follows the arrow keys, which are pressed many times in a
+        // row, so it moves at once
+        backgroundColor: {
+            default: 'transparent',
+            [HIGHLIGHTED]: { default: colors.hover, [FORCED]: 'Highlight' }
+        },
+        forcedColorAdjust: 'none'
+    },
+    danger: {
+        color: colors.danger,
+        backgroundColor: {
+            default: 'transparent',
+            [HIGHLIGHTED]: colors.dangerSoft
+        }
+    },
+    // The icon at the start of an item
+    icon: {
+        display: 'grid',
+        placeItems: 'center',
+        flexShrink: 0,
+        width: '1rem',
+        height: '1rem',
+        color: colors.textMuted
+    },
+    label: {
+        flexGrow: 1,
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    // A shortcut or a count, at the far end
+    trailing: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.25rem',
+        flexShrink: 0,
+        marginInlineStart: 'auto',
+        paddingInlineStart: '1rem',
+        color: colors.textSubtle,
+        fontSize: font.sizeXs,
+        fontVariantNumeric: 'tabular-nums'
+    },
+    heading: {
+        paddingTop: '0.5rem',
+        paddingBottom: '0.25rem',
+        paddingInline: '0.5rem',
+        color: colors.textSubtle,
+        fontFamily: font.mono,
+        fontSize: '0.6875rem',
+        letterSpacing: '0.04em',
+        textTransform: 'uppercase'
+    },
+    separator: {
+        height: '1px',
+        marginBlock: '0.25rem',
+        marginInline: '-0.25rem',
+        backgroundColor: colors.line
+    },
+    hoverable: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': { default: null, [HOVER]: colors.hover }
+        }
+    }
+});

package/dist/internal/loop.d.ts

@@ -0,0 +1,35 @@
+/**
+ * One clock for everything that moves for as long as it is on screen: spinners,
+ * shimmers, the bar of an unknown amount.
+ *
+ * A CSS animation that never ends repaints at the display's rate, 120 times a
+ * second on a ProMotion screen, and restyles its element every frame. In Eregion
+ * one shimmer held the renderer at 19% of a core and the GPU at 15%. So these
+ * loops share a single timer instead: 20 frames a second while the window is in
+ * front, 5 while another app is, and none at all while the window is hidden.
+ * Indicators read perfectly well at that rate.
+ */
+import type { Attachment } from 'svelte/attachments';
+type Tick = (now: number) => void;
+/** Calls `tick` on the shared clock until the returned function is called. */
+export declare function onLoop(tick: Tick): () => void;
+export type LoopFrame = {
+    /** How far through the cycle, from 0 to 1. */
+    progress: number;
+    /** True when the person has asked for less motion. */
+    reduced: boolean;
+    /** True when the element reads right to left, worked out once when it starts. */
+    rtl: boolean;
+};
+/**
+ * An attachment that runs `frame` on the shared clock while the element is on
+ * the page. `period` is one cycle in milliseconds, or a function of whether the
+ * person has asked for less motion. `reset` undoes what `frame` set, when the
+ * loop stops; by default it clears the inline styles `frame` wrote.
+ *
+ * ```svelte
+ * <span {@attach loop(1000, (el, { progress }) => (el.style.rotate = `${progress}turn`))}></span>
+ * ```
+ */
+export declare function loop(period: number | ((reduced: boolean) => number), frame: (element: HTMLElement | SVGElement, state: LoopFrame) => void, reset?: (element: HTMLElement | SVGElement) => void): Attachment<HTMLElement | SVGElement>;
+export {};

package/dist/internal/loop.js

@@ -0,0 +1,72 @@
+const FRONT = 1000 / 20;
+const BEHIND = 1000 / 5;
+const ticks = new Set();
+let timer;
+function schedule() {
+    clearTimeout(timer);
+    timer = undefined;
+    if (ticks.size === 0 || document.hidden)
+        return;
+    timer = setTimeout(run, document.hasFocus() ? FRONT : BEHIND);
+}
+function run() {
+    const now = performance.now();
+    for (const tick of ticks)
+        tick(now);
+    schedule();
+}
+function watch(on) {
+    const method = on ? 'addEventListener' : 'removeEventListener';
+    document[method]('visibilitychange', schedule);
+    window[method]('focus', schedule);
+    window[method]('blur', schedule);
+}
+/** Calls `tick` on the shared clock until the returned function is called. */
+export function onLoop(tick) {
+    if (ticks.size === 0)
+        watch(true);
+    ticks.add(tick);
+    tick(performance.now());
+    if (timer === undefined)
+        schedule();
+    return () => {
+        ticks.delete(tick);
+        if (ticks.size === 0) {
+            watch(false);
+            clearTimeout(timer);
+            timer = undefined;
+        }
+    };
+}
+/**
+ * An attachment that runs `frame` on the shared clock while the element is on
+ * the page. `period` is one cycle in milliseconds, or a function of whether the
+ * person has asked for less motion. `reset` undoes what `frame` set, when the
+ * loop stops; by default it clears the inline styles `frame` wrote.
+ *
+ * ```svelte
+ * <span {@attach loop(1000, (el, { progress }) => (el.style.rotate = `${progress}turn`))}></span>
+ * ```
+ */
+export function loop(period, frame, reset) {
+    return (element) => {
+        const query = matchMedia('(prefers-reduced-motion: reduce)');
+        const start = performance.now();
+        const rtl = getComputedStyle(element).direction === 'rtl';
+        const before = element.getAttribute('style');
+        const stop = onLoop((now) => {
+            const reduced = query.matches;
+            const length = typeof period === 'function' ? period(reduced) : period;
+            frame(element, { progress: ((now - start) % length) / length, reduced, rtl });
+        });
+        return () => {
+            stop();
+            if (reset)
+                reset(element);
+            else if (before === null)
+                element.removeAttribute('style');
+            else
+                element.setAttribute('style', before);
+        };
+    };
+}

package/dist/internal/markers.stylex.d.ts

@@ -0,0 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Markers let a part react to the state of an ancestor it does not render,
+ * through `stylex.when.ancestor(':hover', marker)`. They must be defined in a
+ * `.stylex.ts` file so StyleX can resolve them across files.
+ */
+/** Placed on Message.Root, so its actions can appear while the message is hovered. */
+export declare const messageMarker: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+/** Placed on Sidebar.Item, so its actions appear and its trailing note steps aside on hover. */
+export declare const sidebarItemMarker: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;

package/dist/internal/markers.stylex.js

@@ -0,0 +1,10 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Markers let a part react to the state of an ancestor it does not render,
+ * through `stylex.when.ancestor(':hover', marker)`. They must be defined in a
+ * `.stylex.ts` file so StyleX can resolve them across files.
+ */
+/** Placed on Message.Root, so its actions can appear while the message is hovered. */
+export const messageMarker = stylex.defineMarker();
+/** Placed on Sidebar.Item, so its actions appear and its trailing note steps aside on hover. */
+export const sidebarItemMarker = stylex.defineMarker();

package/dist/internal/roving.d.ts

@@ -0,0 +1,17 @@
+/**
+ * One tab stop for a list of items, with the arrow keys moving between them.
+ *
+ * A sidebar of forty threads should not take forty presses of Tab to cross.
+ * The list is one stop: Tab lands on the item focused last, else the current
+ * one, else the first; the arrow keys, Home and End move from there. As items
+ * come and go the stop is settled again, so it is never lost. (From Eregion's
+ * rowKeys and toolbarKeys.)
+ */
+import type { Attachment } from 'svelte/attachments';
+export type RovingOptions = {
+    /** Which elements inside are the items. */
+    selector: string;
+    /** Which arrow keys move: up and down, or left and right. */
+    orientation?: 'vertical' | 'horizontal';
+};
+export declare function roving({ selector, orientation }: RovingOptions): Attachment<HTMLElement>;

package/dist/internal/roving.js

@@ -0,0 +1,68 @@
+const isTyping = (target) => target instanceof HTMLElement &&
+    (target.isContentEditable || target.matches('input, textarea, select'));
+export function roving({ selector, orientation = 'vertical' }) {
+    return (container) => {
+        let last = null;
+        const items = () => [...container.querySelectorAll(selector)].filter((item) => !item.hasAttribute('disabled') && item.getClientRects().length > 0);
+        const settle = () => {
+            const all = items();
+            const stop = (last && all.includes(last) && last) ||
+                all.find((item) => item.getAttribute('aria-current') && item.getAttribute('aria-current') !== 'false') ||
+                all[0];
+            for (const item of all)
+                item.tabIndex = item === stop ? 0 : -1;
+        };
+        const onfocusin = (event) => {
+            const item = event.target.closest(selector);
+            if (!item || !container.contains(item))
+                return;
+            last = item;
+            settle();
+        };
+        const onkeydown = (event) => {
+            if (event.defaultPrevented ||
+                isTyping(event.target) ||
+                event.altKey ||
+                event.metaKey ||
+                event.ctrlKey)
+                return;
+            const all = items();
+            const current = event.target.closest(selector);
+            const index = current ? all.indexOf(current) : -1;
+            if (index === -1)
+                return;
+            const rtl = getComputedStyle(container).direction === 'rtl';
+            const forward = orientation === 'vertical' ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+            const back = orientation === 'vertical' ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+            let next;
+            if (event.key === forward)
+                next = all[Math.min(index + 1, all.length - 1)];
+            else if (event.key === back)
+                next = all[Math.max(index - 1, 0)];
+            else if (event.key === 'Home')
+                next = all[0];
+            else if (event.key === 'End')
+                next = all[all.length - 1];
+            else
+                return;
+            event.preventDefault();
+            next?.focus();
+            next?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        };
+        const observer = new MutationObserver(settle);
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-current', 'disabled', 'hidden']
+        });
+        container.addEventListener('focusin', onfocusin);
+        container.addEventListener('keydown', onkeydown);
+        settle();
+        return () => {
+            observer.disconnect();
+            container.removeEventListener('focusin', onfocusin);
+            container.removeEventListener('keydown', onkeydown);
+        };
+    };
+}

package/dist/internal/shared.d.ts

@@ -0,0 +1,36 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Edges in Narvi are drawn with shadows, which forced-colours mode removes.
+ * A transparent outline costs nothing normally and becomes the edge there.
+ */
+export declare const shared: Readonly<{
+    readonly focusable: Readonly<{
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "1px" | "2px">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "2px" | "-1px">;
+        readonly WebkitAppRegion: stylex.StyleXClassNameFor<"WebkitAppRegion", "no-drag">;
+    }>;
+    readonly dragRegion: Readonly<{
+        readonly WebkitAppRegion: stylex.StyleXClassNameFor<"WebkitAppRegion", "drag">;
+        readonly WebkitUserSelect: stylex.StyleXClassNameFor<"WebkitUserSelect", "none">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+    }>;
+    readonly noDrag: Readonly<{
+        readonly WebkitAppRegion: stylex.StyleXClassNameFor<"WebkitAppRegion", "no-drag">;
+    }>;
+    readonly eyebrow: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "0.75rem">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", 1.2>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly edged: Readonly<{
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "1px">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "transparent">;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-1px">;
+    }>;
+}>;

package/dist/internal/shared.js

@@ -0,0 +1,44 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '../tokens.stylex.js';
+/**
+ * Edges in Narvi are drawn with shadows, which forced-colours mode removes.
+ * A transparent outline costs nothing normally and becomes the edge there.
+ */
+export const shared = stylex.create({
+    // For anything that can take focus: the same outline turns into the focus ring.
+    focusable: {
+        outlineStyle: 'solid',
+        outlineWidth: { default: '1px', ':focus-visible': '2px' },
+        outlineColor: { default: 'transparent', ':focus-visible': colors.focusRing },
+        outlineOffset: { default: '-1px', ':focus-visible': '2px' },
+        // In an Electron title bar, a control must not drag the window: it would
+        // never receive the click. Ignored everywhere else.
+        WebkitAppRegion: 'no-drag'
+    },
+    // The parts of a window's title bar that drag the window, in Electron
+    dragRegion: {
+        WebkitAppRegion: 'drag',
+        WebkitUserSelect: 'none',
+        userSelect: 'none'
+    },
+    noDrag: {
+        WebkitAppRegion: 'no-drag'
+    },
+    // A small label over a part of a card: "Input", "Plan", "Question 1 of 3".
+    // Sentence case in the text's own face; it names, it does not shout.
+    eyebrow: {
+        margin: 0,
+        color: colors.textSubtle,
+        fontSize: '0.75rem',
+        fontWeight: '500',
+        lineHeight: 1.2,
+        fontVariantNumeric: 'tabular-nums'
+    },
+    // For static surfaces: cards, badges, key caps.
+    edged: {
+        outlineStyle: 'solid',
+        outlineWidth: '1px',
+        outlineColor: 'transparent',
+        outlineOffset: '-1px'
+    }
+});

package/dist/internal/sx.d.ts

@@ -0,0 +1,14 @@
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { ClassValue } from 'svelte/elements';
+/** Styles a consumer can pass to a component's `sx` prop. */
+export type Sx = StyleXStyles;
+type StyleArg = StyleXStyles | Readonly<Record<string, unknown>>;
+/**
+ * Resolves StyleX styles to element attributes and appends a consumer `class`.
+ * Later styles win, so pass the consumer's `sx` last.
+ */
+export declare function attrs(styles: ReadonlyArray<StyleArg>, className?: ClassValue | null): {
+    class?: ClassValue;
+    style?: string;
+};
+export {};

package/dist/internal/sx.js

@@ -0,0 +1,11 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Resolves StyleX styles to element attributes and appends a consumer `class`.
+ * Later styles win, so pass the consumer's `sx` last.
+ */
+export function attrs(styles, className) {
+    const resolved = stylex.attrs(...styles);
+    if (!className)
+        return resolved;
+    return { ...resolved, class: [resolved.class, className] };
+}

package/dist/preset.d.ts

@@ -0,0 +1,102 @@
+/**
+ * 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.
+ */
+type Option<Id extends string> = {
+    id: Id;
+    label: string;
+};
+export type AccentId = 'ithil' | 'ember' | 'moss' | 'amethyst' | 'rose' | 'gold';
+/** Hue and chroma in OKLCH. Ithil reproduces Narvi's own silver-blue. */
+export declare const accents: ReadonlyArray<Option<AccentId> & {
+    hue: number;
+    chroma: number;
+}>;
+export type StoneId = 'paper' | 'slate' | 'ash';
+type Pair = readonly [light: string, dark: string];
+type StoneTokens = {
+    bg: Pair;
+    bgRaised: Pair;
+    text: Pair;
+    textMuted: Pair;
+    textSubtle: Pair;
+    edge: Pair;
+    edgeHover: Pair;
+};
+/** Paper is Narvi's own: warm paper by day, near-black stone by night. */
+export declare const stones: ReadonlyArray<Option<StoneId> & {
+    description: string;
+    tokens?: StoneTokens;
+}>;
+export type RadiusId = 'sharp' | 'default' | 'round';
+type RadiusScale = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+/** A frame is always its inner radius plus its padding: `frame` = `xl` + 5. */
+export declare const radii: ReadonlyArray<Option<RadiusId> & {
+    scale?: RadiusScale;
+}>;
+type Face<Id extends string> = Option<Id> & {
+    /** The CSS font-family stack. */
+    stack: string;
+    /** The Fontsource package that serves it, if any. */
+    package?: string;
+    /** What to import from that package. */
+    imports?: string[];
+};
+export type BodyId = 'geist' | 'inter' | 'plex' | 'system';
+export type DisplayId = 'cormorant' | 'fraunces' | 'instrument' | 'sans';
+export type MonoId = 'geist-mono' | 'jetbrains' | 'plex-mono';
+export declare const bodies: ReadonlyArray<Face<BodyId>>;
+export declare const displays: ReadonlyArray<Face<DisplayId>>;
+export declare const monos: ReadonlyArray<Face<MonoId>>;
+export type MotionId = 'brisk' | 'standard' | 'calm';
+export declare const motions: ReadonlyArray<Option<MotionId> & {
+    durations?: {
+        fast: number;
+        base: number;
+        slow: number;
+    };
+}>;
+export type SchemeId = 'dark' | 'light' | 'system';
+export declare const schemes: ReadonlyArray<Option<SchemeId>>;
+export type Preset = {
+    accent: AccentId;
+    stone: StoneId;
+    radius: RadiusId;
+    body: BodyId;
+    display: DisplayId;
+    mono: MonoId;
+    motion: MotionId;
+    scheme: SchemeId;
+};
+export declare const defaultPreset: Preset;
+/** A preset as a short code: a version digit, then one letter per choice. */
+export declare function encode(preset: Preset): string;
+/**
+ * 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 declare function decode(code: string): Preset | undefined;
+/** Token overrides by token group, for `stylex.createTheme`. Empty groups are left out. */
+export type Overrides = Partial<Record<'colors' | 'radius' | 'font' | 'motion', Record<string, string>>>;
+export declare function overrides(preset: Preset): Overrides;
+export type PresetFile = {
+    path: string;
+    language: 'ts' | 'css' | 'svelte' | 'sh';
+    code: string;
+};
+/** The font packages a preset needs, beyond Narvi itself. */
+export declare function fontPackages(preset: Preset): string[];
+/** The files that put a preset into a SvelteKit app. */
+export declare function presetFiles(preset: Preset): PresetFile[];
+export {};