@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/separator/Separator.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    orientation?: 'horizontal' | 'vertical';
+    /** Hides the separator from assistive technology when it is purely visual. */
+    decorative?: boolean;
+    sx?: Sx;
+};
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/settings-row/SettingsRow.svelte

@@ -0,0 +1,97 @@
+<!--
+	One setting: what it is and what it does on one side, the control on the
+	other. Where there is no room for both, they stack.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, space } from '../../tokens.stylex.js';
+
+	export type SettingsRowProps = {
+		label: string;
+		/** What it does, or how it stands now. Always visible. */
+		description?: string;
+		/** Shown under the control, announced at once. */
+		error?: string;
+		/** Shown under the control, announced politely. */
+		warning?: string;
+		sx?: Sx;
+		class?: string;
+		/** The control. It receives the ids to link it to the label and description. */
+		children?: Snippet<[{ id: string; describedBy: string | undefined }]>;
+	};
+
+	const WIDE = '@container (min-width: 34rem)';
+
+	const styles = stylex.create({
+		frame: { containerType: 'inline-size' },
+		row: {
+			display: 'grid',
+			gridTemplateColumns: { default: 'minmax(0, 1fr)', [WIDE]: 'minmax(0, 1fr) auto' },
+			alignItems: { default: 'start', [WIDE]: 'center' },
+			gap: { default: space.x2, [WIDE]: space.x6 },
+			paddingBlock: space.x4,
+			borderBottomWidth: '1px',
+			borderBottomStyle: 'solid',
+			borderBottomColor: colors.line
+		},
+		text: { display: 'flex', flexDirection: 'column', gap: '0.125rem', minWidth: 0 },
+		label: { color: colors.text, fontSize: font.sizeMd, fontWeight: font.weightMedium },
+		description: {
+			margin: 0,
+			color: colors.textMuted,
+			fontSize: font.sizeSm,
+			lineHeight: font.leadingSnug
+		},
+		control: {
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: { default: 'flex-start', [WIDE]: 'flex-end' },
+			gap: '0.375rem'
+		},
+		note: { margin: 0, fontSize: font.sizeSm, lineHeight: font.leadingSnug },
+		error: { color: colors.danger },
+		warning: { color: colors.warningInk }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		description,
+		error,
+		warning,
+		sx,
+		class: className,
+		children
+	}: SettingsRowProps = $props();
+
+	const uid = $props.id();
+	const describedBy = $derived(
+		[description && `${uid}-description`, (error || warning) && `${uid}-note`]
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
+</script>
+
+<div {...stylex.attrs(styles.frame)}>
+	<div data-slot="settings-row" {...attrs([styles.row, sx], className)}>
+		<div {...stylex.attrs(styles.text)}>
+			<label for="{uid}-control" {...stylex.attrs(styles.label)}>{label}</label>
+			{#if description}<p id="{uid}-description" {...stylex.attrs(styles.description)}>
+					{description}
+				</p>{/if}
+		</div>
+		<div {...stylex.attrs(styles.control)}>
+			{@render children?.({ id: `${uid}-control`, describedBy })}
+			{#if error}
+				<p id="{uid}-note" role="alert" {...stylex.attrs(styles.note, styles.error)}>{error}</p>
+			{:else if warning}
+				<p id="{uid}-note" role="status" {...stylex.attrs(styles.note, styles.warning)}>
+					{warning}
+				</p>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/settings-row/SettingsRow.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type SettingsRowProps = {
+    label: string;
+    /** What it does, or how it stands now. Always visible. */
+    description?: string;
+    /** Shown under the control, announced at once. */
+    error?: string;
+    /** Shown under the control, announced politely. */
+    warning?: string;
+    sx?: Sx;
+    class?: string;
+    /** The control. It receives the ids to link it to the label and description. */
+    children?: Snippet<[{
+        id: string;
+        describedBy: string | undefined;
+    }]>;
+};
+declare const SettingsRow: import("svelte").Component<SettingsRowProps, {}, "">;
+type SettingsRow = ReturnType<typeof SettingsRow>;
+export default SettingsRow;

package/dist/components/shimmer/Shimmer.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { loop } from '../../internal/loop.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+
+	export type ShimmerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		/** Turn it off to show the text plainly, for example once the work is done. */
+		active?: boolean;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const REDUCE = '@media (prefers-reduced-motion: reduce)';
+	const FORCED = '@media (forced-colors: active)';
+
+	const styles = stylex.create({
+		// Inline, so it wraps and truncates like the text around it
+		base: {
+			display: 'inline'
+		},
+		// Ithildin: the letters are only half there until moonlight passes over them
+		active: {
+			color: { default: 'transparent', [REDUCE]: colors.textMuted, [FORCED]: 'CanvasText' },
+			backgroundImage: {
+				default: `linear-gradient(90deg, ${colors.textSubtle} 0%, ${colors.textSubtle} 40%, ${colors.ithil} 50%, ${colors.textSubtle} 60%, ${colors.textSubtle} 100%)`,
+				[REDUCE]: 'none',
+				[FORCED]: 'none'
+			},
+			backgroundSize: '300% 100%',
+			backgroundClip: 'text',
+			WebkitBackgroundClip: 'text'
+		}
+	});
+
+	// The band of light crosses the line every 2.2 seconds, on Narvi's shared clock.
+	// With reduced motion the text breathes in place instead.
+	const glint = loop(
+		(reduced) => (reduced ? 2000 : 2200),
+		(element, { progress, reduced, rtl }) => {
+			if (reduced) {
+				element.style.backgroundPosition = '';
+				element.style.opacity = String(0.775 + 0.225 * Math.cos(progress * 2 * Math.PI));
+				return;
+			}
+			element.style.opacity = '';
+			element.style.backgroundPosition = `${rtl ? progress * 100 : 100 - progress * 100}% 0`;
+		}
+	);
+</script>
+
+<script lang="ts">
+	let { active = true, sx, class: className, children, ...rest }: ShimmerProps = $props();
+</script>
+
+<span
+	data-slot="shimmer"
+	data-active={active || undefined}
+	{...rest}
+	{...attrs([styles.base, active && styles.active, sx], className)}
+	{@attach active && glint}
+>
+	{@render children?.()}
+</span>

package/dist/components/shimmer/Shimmer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ShimmerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** Turn it off to show the text plainly, for example once the work is done. */
+    active?: boolean;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Shimmer: import("svelte").Component<ShimmerProps, {}, "">;
+type Shimmer = ReturnType<typeof Shimmer>;
+export default Shimmer;

package/dist/components/sidebar/SidebarContent.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { roving } from '../../internal/roving.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+
+	export type SidebarContentProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Names the list for assistive technology: "Threads". */
+		label?: string;
+		sx?: Sx;
+		/** Sidebar.Group and Sidebar.Item. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		content: {
+			flexGrow: 1,
+			minHeight: 0,
+			overflowY: 'auto',
+			overscrollBehavior: 'contain',
+			paddingInline: '0.5rem',
+			paddingBottom: '0.75rem',
+			scrollbarWidth: 'thin',
+			scrollbarColor: `${colors.lineStrong} transparent`,
+			// The list fades at an edge with more beyond it
+			maskImage:
+				'linear-gradient(to bottom, transparent, #000 var(--narvi-fade-start, 0px), #000 calc(100% - var(--narvi-fade-end, 0px)), transparent)'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { label, sx, class: className, children, ...rest }: SidebarContentProps = $props();
+
+	let fadeStart = $state(0);
+	let fadeEnd = $state(0);
+
+	function measure(element: HTMLElement) {
+		const update = () => {
+			const end = element.scrollHeight - element.clientHeight - element.scrollTop;
+			fadeStart = Math.min(element.scrollTop, 24);
+			fadeEnd = Math.min(end, 24);
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(element);
+		if (element.firstElementChild) observer.observe(element.firstElementChild);
+		element.addEventListener('scroll', update, { passive: true });
+		return () => {
+			observer.disconnect();
+			element.removeEventListener('scroll', update);
+		};
+	}
+</script>
+
+<!-- One tab stop for every row in every group; the arrow keys move between them -->
+<nav
+	aria-label={label}
+	data-slot="sidebar-content"
+	style:--narvi-fade-start="{fadeStart}px"
+	style:--narvi-fade-end="{fadeEnd}px"
+	{...rest}
+	{...attrs([styles.content, sx], className)}
+	{@attach measure}
+	{@attach roving({ selector: '[data-sidebar-row]' })}
+>
+	<div>{@render children?.()}</div>
+</nav>

package/dist/components/sidebar/SidebarContent.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SidebarContentProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Names the list for assistive technology: "Threads". */
+    label?: string;
+    sx?: Sx;
+    /** Sidebar.Group and Sidebar.Item. */
+    children?: Snippet;
+};
+declare const SidebarContent: import("svelte").Component<SidebarContentProps, {}, "">;
+type SidebarContent = ReturnType<typeof SidebarContent>;
+export default SidebarContent;

package/dist/components/sidebar/SidebarFooter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+
+	export type SidebarFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		footer: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.625rem',
+			flexShrink: 0,
+			padding: '0.75rem',
+			borderTopWidth: '1px',
+			borderTopStyle: 'solid',
+			borderTopColor: colors.line
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: SidebarFooterProps = $props();
+</script>
+
+<div data-slot="sidebar-footer" {...rest} {...attrs([styles.footer, sx], className)}>
+	{@render children?.()}
+</div>

package/dist/components/sidebar/SidebarFooter.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SidebarFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const SidebarFooter: import("svelte").Component<SidebarFooterProps, {}, "">;
+type SidebarFooter = ReturnType<typeof SidebarFooter>;
+export default SidebarFooter;

package/dist/components/sidebar/SidebarGroup.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Chevron from '../../internal/Chevron.svelte';
+	import Collapse from '../../internal/Collapse.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type SidebarGroupProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The group's name: a project, or "Today". */
+		label: string;
+		/** Lets the person fold the group away. */
+		collapsible?: boolean;
+		/** Whether a collapsible group is open. Bindable. */
+		open?: boolean;
+		/** Controls at the end of the label, such as a button to add an item. */
+		actions?: Snippet;
+		sx?: Sx;
+		/** Sidebar.Item rows. */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		group: { display: 'flex', flexDirection: 'column', paddingTop: '0.75rem' },
+		head: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.25rem',
+			minHeight: '1.75rem',
+			paddingInlineStart: '0.5rem',
+			paddingInlineEnd: '0.25rem'
+		},
+		label: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			gap: '0.25rem',
+			flexGrow: 1,
+			minWidth: 0,
+			margin: 0,
+			padding: 0,
+			borderWidth: 0,
+			borderRadius: radius.xs,
+			backgroundColor: 'transparent',
+			color: { default: colors.textSubtle, ':hover': { default: null, [HOVER]: colors.textMuted } },
+			fontFamily: font.mono,
+			fontSize: '0.6875rem',
+			letterSpacing: '0.04em',
+			textTransform: 'uppercase',
+			textAlign: 'start',
+			whiteSpace: 'nowrap',
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'color',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		button: { cursor: 'pointer' },
+		list: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '1px',
+			margin: 0,
+			padding: 0,
+			paddingTop: '0.125rem',
+			listStyleType: 'none'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		collapsible = false,
+		open = $bindable(true),
+		actions,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: SidebarGroupProps = $props();
+
+	const uid = $props.id();
+</script>
+
+<section
+	aria-labelledby="{uid}-label"
+	data-slot="sidebar-group"
+	{...rest}
+	{...attrs([styles.group, sx], className)}
+>
+	<div {...stylex.attrs(styles.head)}>
+		{#if collapsible}
+			<button
+				type="button"
+				id="{uid}-label"
+				aria-expanded={open}
+				aria-controls="{uid}-list"
+				{...stylex.attrs(styles.label, styles.button)}
+				onclick={() => (open = !open)}
+			>
+				<span style="overflow: hidden; text-overflow: ellipsis">{label}</span>
+				<Chevron {open} size={12} />
+			</button>
+		{:else}
+			<h3 id="{uid}-label" {...stylex.attrs(styles.label)}>{label}</h3>
+		{/if}
+		{@render actions?.()}
+	</div>
+	{#if collapsible}
+		<Collapse {open} id="{uid}-list">
+			<ul {...stylex.attrs(styles.list)}>{@render children?.()}</ul>
+		</Collapse>
+	{:else}
+		<ul {...stylex.attrs(styles.list)}>{@render children?.()}</ul>
+	{/if}
+</section>

package/dist/components/sidebar/SidebarGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SidebarGroupProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The group's name: a project, or "Today". */
+    label: string;
+    /** Lets the person fold the group away. */
+    collapsible?: boolean;
+    /** Whether a collapsible group is open. Bindable. */
+    open?: boolean;
+    /** Controls at the end of the label, such as a button to add an item. */
+    actions?: Snippet;
+    sx?: Sx;
+    /** Sidebar.Item rows. */
+    children?: Snippet;
+};
+declare const SidebarGroup: import("svelte").Component<SidebarGroupProps, {}, "open">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/components/sidebar/SidebarHeader.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type SidebarHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Whether it drags the window, in Electron. Narvi's controls opt out on their own. */
+		drag?: boolean;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		header: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			height: '3.25rem',
+			paddingInlineEnd: '0.5rem',
+			// Clear of the window's traffic lights
+			paddingInlineStart: 'calc(0.75rem + var(--narvi-window-inset, 0px))',
+			whiteSpace: 'nowrap'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { drag = true, sx, class: className, children, ...rest }: SidebarHeaderProps = $props();
+</script>
+
+<div
+	data-slot="sidebar-header"
+	{...rest}
+	{...attrs([styles.header, drag && shared.dragRegion, sx], className)}
+>
+	{@render children?.()}
+</div>

package/dist/components/sidebar/SidebarHeader.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SidebarHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Whether it drags the window, in Electron. Narvi's controls opt out on their own. */
+    drag?: boolean;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const SidebarHeader: import("svelte").Component<SidebarHeaderProps, {}, "">;
+type SidebarHeader = ReturnType<typeof SidebarHeader>;
+export default SidebarHeader;