@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/announcer/Announcer.svelte

@@ -0,0 +1,84 @@
+<!--
+	Says a short message to assistive technology, such as "Working", "Waiting for
+	your answer" or "Done", without showing anything.
+
+	The rules come from Eregion, where each fixed a message that went unheard:
+	the region is on the page, empty, before anything is said into it; it is a
+	plain polite live region, because some screen readers drop updates from
+	role="status"; it says nothing for the message it starts with, so opening a
+	thread is quiet; a message said twice is still heard twice; and it empties
+	itself after a while, so a stale message is not found by browsing later.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+
+	export type AnnouncerProps = {
+		/** What to say. Each change is announced; the first value is not. */
+		message?: string;
+		/** `assertive` interrupts; keep it for what cannot wait. */
+		politeness?: 'polite' | 'assertive';
+		/** How long a message stays in the region, in milliseconds. */
+		clearAfter?: number;
+	};
+
+	const styles = stylex.create({
+		hidden: {
+			position: 'absolute',
+			width: '1px',
+			height: '1px',
+			margin: '-1px',
+			padding: 0,
+			overflow: 'hidden',
+			clipPath: 'inset(50%)',
+			whiteSpace: 'nowrap',
+			borderWidth: 0
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+
+	let { message, politeness = 'polite', clearAfter = 7000 }: AnnouncerProps = $props();
+
+	const NBSP = String.fromCharCode(0xa0);
+	let text = $state('');
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let first = true;
+
+	/**
+	 * Says a message now. Use it to say the same words again, which a changed
+	 * `message` cannot do.
+	 */
+	export function announce(next: string) {
+		clearTimeout(timer);
+		if (!next) {
+			text = '';
+			return;
+		}
+		// The same words as the region holds would be no change, and go unheard;
+		// a no-break space on the end makes them one
+		text = next === text ? next + NBSP : next;
+		timer = setTimeout(() => (text = ''), clearAfter);
+	}
+
+	$effect(() => {
+		const next = message;
+		if (first) {
+			first = false;
+			return;
+		}
+		untrack(() => announce(next ?? ''));
+	});
+
+	$effect(() => () => clearTimeout(timer));
+</script>
+
+<div
+	aria-live={politeness}
+	aria-atomic="true"
+	data-slot="announcer"
+	{...stylex.attrs(styles.hidden)}
+>
+	{text}
+</div>

package/dist/components/announcer/Announcer.svelte.d.ts

@@ -0,0 +1,13 @@
+export type AnnouncerProps = {
+    /** What to say. Each change is announced; the first value is not. */
+    message?: string;
+    /** `assertive` interrupts; keep it for what cannot wait. */
+    politeness?: 'polite' | 'assertive';
+    /** How long a message stays in the region, in milliseconds. */
+    clearAfter?: number;
+};
+declare const Announcer: import("svelte").Component<AnnouncerProps, {
+    announce: (next: string) => void;
+}, "">;
+type Announcer = ReturnType<typeof Announcer>;
+export default Announcer;

package/dist/components/app-shell/AppShellHeader.svelte

@@ -0,0 +1,54 @@
+<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';
+	import { colors, font, motion } from '../../tokens.stylex.js';
+
+	export type AppShellHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/**
+		 * Whether the bar drags the window, in Electron with a hidden title bar.
+		 * Narvi's controls opt out on their own, so they still take clicks.
+		 */
+		drag?: boolean;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		header: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			flexShrink: 0,
+			height: '3.25rem',
+			paddingInlineEnd: '0.75rem',
+			// Clear of the traffic lights, for whatever part of them the sidebar
+			// does not cover now. It moves with the sidebar.
+			paddingInlineStart:
+				'calc(0.75rem + max(0px, var(--narvi-window-inset, 0px) - var(--narvi-sidebar-taken, 0px)))',
+			borderBottomWidth: '1px',
+			borderBottomStyle: 'solid',
+			borderBottomColor: colors.line,
+			fontSize: font.sizeMd,
+			transitionProperty: { default: 'none', [MOTION]: 'padding-inline-start' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeInOut
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { drag = true, sx, class: className, children, ...rest }: AppShellHeaderProps = $props();
+</script>
+
+<header
+	data-slot="app-shell-header"
+	{...rest}
+	{...attrs([styles.header, drag && shared.dragRegion, sx], className)}
+>
+	{@render children?.()}
+</header>

package/dist/components/app-shell/AppShellHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AppShellHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /**
+     * Whether the bar drags the window, in Electron with a hidden title bar.
+     * Narvi's controls opt out on their own, so they still take clicks.
+     */
+    drag?: boolean;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const AppShellHeader: import("svelte").Component<AppShellHeaderProps, {}, "">;
+type AppShellHeader = ReturnType<typeof AppShellHeader>;
+export default AppShellHeader;

package/dist/components/app-shell/AppShellMain.svelte

@@ -0,0 +1,49 @@
+<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';
+	import { colors, radius } from '../../tokens.stylex.js';
+	import { useAppShell } from './context.js';
+
+	export type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		sx?: Sx;
+		/** An AppShell.Header and the page. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// The page sits on the stone like a sheet laid on a table
+		main: {
+			position: 'relative',
+			display: 'flex',
+			flexDirection: 'column',
+			flexGrow: 1,
+			minWidth: 0,
+			marginBlock: '0.375rem',
+			marginInlineEnd: '0.375rem',
+			overflow: 'clip',
+			borderRadius: radius.frame,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, 0 1px 2px ${colors.shade}`,
+			outlineStyle: 'none'
+		},
+		narrow: { margin: 0, borderRadius: 0, boxShadow: 'none' }
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: AppShellMainProps = $props();
+
+	const shell = useAppShell('Main');
+</script>
+
+<main
+	tabindex="-1"
+	data-slot="app-shell-main"
+	{...rest}
+	{...attrs([styles.main, shared.edged, shell.narrow && styles.narrow, sx], className)}
+>
+	{@render children?.()}
+</main>

package/dist/components/app-shell/AppShellMain.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    sx?: Sx;
+    /** An AppShell.Header and the page. */
+    children?: Snippet;
+};
+declare const AppShellMain: import("svelte").Component<AppShellMainProps, {}, "">;
+type AppShellMain = ReturnType<typeof AppShellMain>;
+export default AppShellMain;

package/dist/components/app-shell/AppShellPanel.svelte

@@ -0,0 +1,107 @@
+<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';
+	import { colors, radius } from '../../tokens.stylex.js';
+	import ResizeHandle from '../resize-handle/ResizeHandle.svelte';
+	import { useAppShell } from './context.js';
+
+	export type AppShellPanelProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Names the region: "Changes", "Files". */
+		label: string;
+		/** Its width in pixels. Bindable; store it if it should be remembered. */
+		width?: number;
+		minWidth?: number;
+		defaultWidth?: number;
+		/** How much room it always leaves the main area, in pixels. */
+		mainMinWidth?: number;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		panel: {
+			position: 'relative',
+			display: 'flex',
+			flexDirection: 'column',
+			flexShrink: 0,
+			width: 'var(--narvi-panel-width)',
+			minWidth: 0,
+			marginBlock: '0.375rem',
+			marginInlineEnd: '0.375rem',
+			overflow: 'clip',
+			borderRadius: radius.frame,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, 0 1px 2px ${colors.shade}`
+		},
+		// On a narrow window the panel takes the place of the page, under its
+		// header, which stays in reach with the sidebar's toggle
+		narrow: {
+			position: 'absolute',
+			inset: 0,
+			top: '3.25rem',
+			zIndex: 5,
+			width: 'auto',
+			margin: 0,
+			borderRadius: 0,
+			boxShadow: 'none'
+		},
+		handle: { position: 'relative', alignSelf: 'stretch', marginBlock: '0.375rem' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		width = $bindable(560),
+		minWidth = 320,
+		defaultWidth = 560,
+		mainMinWidth = 352,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: AppShellPanelProps = $props();
+
+	const shell = useAppShell('Panel');
+	let element = $state<HTMLElement | null>(null);
+
+	// It never takes so much that the main area falls below its minimum
+	const largest = () => {
+		// On the server there is no window to measure: no limit yet
+		if (typeof window === 'undefined') return Infinity;
+		const shellWidth =
+			element?.closest<HTMLElement>('[data-slot="app-shell"]')?.clientWidth ?? innerWidth;
+		const main = element?.parentElement?.querySelector<HTMLElement>('[data-slot="app-shell-main"]');
+		const sidebar = element?.parentElement?.querySelector<HTMLElement>(
+			'[data-slot="app-shell-sidebar"]'
+		);
+		return shellWidth - (sidebar?.offsetWidth ?? 0) - Math.max(mainMinWidth, 0) - (main ? 12 : 0);
+	};
+</script>
+
+{#if !shell.narrow}
+	<ResizeHandle
+		bind:value={width}
+		min={minWidth}
+		max={largest}
+		defaultValue={defaultWidth}
+		edge="start"
+		target={element}
+		property="--narvi-panel-width"
+		label="Resize the {label.toLowerCase()} panel"
+		sx={styles.handle}
+	/>
+{/if}
+<aside
+	bind:this={element}
+	aria-label={label}
+	data-slot="app-shell-panel"
+	style:--narvi-panel-width="{width}px"
+	{...rest}
+	{...attrs([styles.panel, shared.edged, shell.narrow && styles.narrow, sx], className)}
+>
+	{@render children?.()}
+</aside>

package/dist/components/app-shell/AppShellPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AppShellPanelProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Names the region: "Changes", "Files". */
+    label: string;
+    /** Its width in pixels. Bindable; store it if it should be remembered. */
+    width?: number;
+    minWidth?: number;
+    defaultWidth?: number;
+    /** How much room it always leaves the main area, in pixels. */
+    mainMinWidth?: number;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const AppShellPanel: import("svelte").Component<AppShellPanelProps, {}, "width">;
+type AppShellPanel = ReturnType<typeof AppShellPanel>;
+export default AppShellPanel;

package/dist/components/app-shell/AppShellRoot.svelte

@@ -0,0 +1,136 @@
+<!--
+	The frame of an app: a sidebar, the main area, and an optional panel.
+
+	Narvi lays it out and moves it; the app decides what is remembered. The open
+	state is bindable and nothing is stored, and no shortcut is bound: wire ⌘B,
+	or whatever the app chooses, to `toggle()` from the context or AppShell.Toggle.
+-->
+<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, font } from '../../tokens.stylex.js';
+	import { setAppShellContext } from './context.js';
+
+	export type AppShellRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Whether the sidebar shows in full; closed, it shrinks to its rail. Bindable. */
+		sidebarOpen?: boolean;
+		/** The width of the sidebar's list, in rem or px. A rail, if there is one, is added to it. */
+		sidebarWidth?: string;
+		/** Below this window width, in pixels, the sidebar becomes a drawer over the page. */
+		narrowAt?: number;
+		/**
+		 * Room kept clear at the top start corner of the window, for macOS's traffic
+		 * lights in an Electron window with a hidden title bar. Headers start after it.
+		 */
+		windowInset?: string;
+		/**
+		 * True while something modal covers the whole app, such as a settings
+		 * screen of its own: the shell is then inert, out of reach and unread.
+		 */
+		covered?: boolean;
+		sx?: Sx;
+		ref?: HTMLDivElement | null;
+		/** An AppShell.Sidebar, an AppShell.Main and, if you like, an AppShell.Panel. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		root: {
+			position: 'relative',
+			display: 'flex',
+			height: '100dvh',
+			// `clip`, not `hidden`: scrollIntoView scrolls an overflow:hidden box, and
+			// in Eregion one stray button slid the whole window under its header
+			overflow: 'clip',
+			overscrollBehavior: 'none',
+			backgroundColor: colors.bg,
+			color: colors.text,
+			fontFamily: font.body,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingNormal
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		sidebarOpen = $bindable(true),
+		sidebarWidth = '16rem',
+		narrowAt = 768,
+		windowInset = '0px',
+		covered = false,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: AppShellRootProps = $props();
+
+	const uid = $props.id();
+	let narrow = $state(false);
+	let drawer = $state(false);
+	let rail = $state(false);
+
+	$effect(() => {
+		const query = matchMedia(`(max-width: ${narrowAt - 0.02}px)`);
+		const update = () => {
+			narrow = query.matches;
+			if (!narrow) drawer = false;
+		};
+		update();
+		query.addEventListener('change', update);
+		return () => query.removeEventListener('change', update);
+	});
+
+	const open = $derived(narrow ? drawer : sidebarOpen);
+	// What the sidebar takes up now, so headers know how much of the window
+	// inset is still theirs to keep clear
+	const taken = $derived(
+		narrow
+			? '0px'
+			: sidebarOpen
+				? 'calc(var(--narvi-sidebar-width) + var(--narvi-rail-current))'
+				: 'var(--narvi-rail-current)'
+	);
+
+	setAppShellContext({
+		get open() {
+			return open;
+		},
+		get narrow() {
+			return narrow;
+		},
+		sidebarId: `${uid}-sidebar`,
+		toggle() {
+			if (narrow) drawer = !drawer;
+			else sidebarOpen = !sidebarOpen;
+		},
+		close() {
+			if (narrow) drawer = false;
+			else sidebarOpen = false;
+		},
+		setRail(present) {
+			rail = present;
+		}
+	});
+</script>
+
+<div
+	bind:this={ref}
+	inert={covered || undefined}
+	aria-hidden={covered || undefined}
+	data-slot="app-shell"
+	data-sidebar={open ? 'open' : 'closed'}
+	data-narrow={narrow || undefined}
+	style:--narvi-sidebar-width={sidebarWidth}
+	style:--narvi-rail-width="3.25rem"
+	style:--narvi-rail-current={rail ? 'var(--narvi-rail-width)' : '0px'}
+	style:--narvi-window-inset={windowInset}
+	style:--narvi-sidebar-taken={taken}
+	{...rest}
+	{...attrs([styles.root, sx], className)}
+>
+	{@render children?.()}
+</div>

package/dist/components/app-shell/AppShellRoot.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AppShellRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Whether the sidebar shows in full; closed, it shrinks to its rail. Bindable. */
+    sidebarOpen?: boolean;
+    /** The width of the sidebar's list, in rem or px. A rail, if there is one, is added to it. */
+    sidebarWidth?: string;
+    /** Below this window width, in pixels, the sidebar becomes a drawer over the page. */
+    narrowAt?: number;
+    /**
+     * Room kept clear at the top start corner of the window, for macOS's traffic
+     * lights in an Electron window with a hidden title bar. Headers start after it.
+     */
+    windowInset?: string;
+    /**
+     * True while something modal covers the whole app, such as a settings
+     * screen of its own: the shell is then inert, out of reach and unread.
+     */
+    covered?: boolean;
+    sx?: Sx;
+    ref?: HTMLDivElement | null;
+    /** An AppShell.Sidebar, an AppShell.Main and, if you like, an AppShell.Panel. */
+    children?: Snippet;
+};
+declare const AppShellRoot: import("svelte").Component<AppShellRootProps, {}, "ref" | "sidebarOpen">;
+type AppShellRoot = ReturnType<typeof AppShellRoot>;
+export default AppShellRoot;