@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/sidebar/SidebarItem.svelte

@@ -0,0 +1,236 @@
+<!--
+	A row in the sidebar. The title, a time or status at the end, and a second
+	quiet line beneath; actions appear on hover or focus, and the note at the
+	end steps aside for them.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { sidebarItemMarker } from '../../internal/markers.stylex.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type SidebarItemProps = Omit<HTMLAnchorAttributes, 'children'> & {
+		/** A link to go to. Without it the row is a button; listen with `onclick`. */
+		href?: string;
+		/** The row that is open now. */
+		current?: boolean;
+		/** Quieter than the rest: for rows that need nothing from the person. */
+		muted?: boolean;
+		/** One line, without `meta`: for rows that are settled. */
+		compact?: boolean;
+		/** Before the title: an icon, or a StatusIndicator. */
+		leading?: Snippet;
+		/** At the end of the title's line: a time, or a status. */
+		trailing?: Snippet;
+		/** The second line: a branch, a project, a count. */
+		meta?: Snippet;
+		/** Buttons shown over the end of the row on hover or focus. */
+		actions?: Snippet;
+		sx?: Sx;
+		/** The title. */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const FORCED = '@media (forced-colors: active)';
+	// StyleX reads `when` only where it is written inline, in the keys below
+
+	const styles = stylex.create({
+		item: { position: 'relative', listStyleType: 'none' },
+		row: {
+			position: 'relative',
+			boxSizing: 'border-box',
+			display: 'grid',
+			gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+			gridTemplateAreas: '"lead title trail" "lead meta meta"',
+			alignItems: 'center',
+			columnGap: '0.5rem',
+			rowGap: '0.125rem',
+			width: '100%',
+			margin: 0,
+			paddingBlock: '0.4375rem',
+			paddingInline: '0.625rem',
+			borderWidth: 0,
+			borderRadius: radius.lg,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, [HOVER]: colors.hover }
+			},
+			color: colors.text,
+			fontFamily: 'inherit',
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingSnug,
+			textAlign: 'start',
+			textDecoration: 'none',
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent',
+			WebkitAppRegion: 'no-drag',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px', [FORCED]: '1px' },
+			outlineColor: { default: 'transparent', ':focus-visible': colors.focusRing },
+			outlineOffset: '-2px',
+			transitionProperty: 'background-color, color',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		compact: { gridTemplateAreas: '"lead title trail"', paddingBlock: '0.375rem' },
+		muted: { color: colors.textMuted },
+		// The open row is lifted, with a thread of ithildin along its edge
+		current: {
+			color: colors.text,
+			backgroundColor: { default: colors.surfaceRaised, ':hover': colors.surfaceRaised },
+			boxShadow: `inset 0 0 0 1px ${colors.line}, 0 1px 2px ${colors.shade}`,
+			'::before': {
+				content: '""',
+				position: 'absolute',
+				insetInlineStart: '-0.5rem',
+				top: '25%',
+				bottom: '25%',
+				width: '2px',
+				borderRadius: '2px',
+				backgroundColor: { default: colors.ithil, [FORCED]: 'Highlight' },
+				boxShadow: `0 0 8px ${colors.glow}`,
+				forcedColorAdjust: 'none'
+			}
+		},
+		lead: {
+			gridArea: 'lead',
+			alignSelf: 'start',
+			display: 'grid',
+			placeItems: 'center',
+			width: '1rem',
+			height: '1.225em',
+			color: colors.textSubtle
+		},
+		title: {
+			gridArea: 'title',
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		},
+		titleCurrent: { fontWeight: font.weightMedium },
+		trail: {
+			gridArea: 'trail',
+			display: 'inline-flex',
+			alignItems: 'center',
+			gap: '0.25rem',
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			fontVariantNumeric: 'tabular-nums',
+			whiteSpace: 'nowrap',
+			transitionProperty: 'opacity',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		// Steps aside for the actions, which sit over it
+		trailHides: {
+			opacity: {
+				default: 1,
+				[HOVER]: { default: 1, [stylex.when.ancestor(':hover', sidebarItemMarker)]: 0 },
+				[stylex.when.ancestor(':focus-within', sidebarItemMarker)]: 0
+			}
+		},
+		meta: {
+			gridArea: 'meta',
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.375rem',
+			minWidth: 0,
+			overflow: 'hidden',
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			whiteSpace: 'nowrap'
+		},
+		actions: {
+			position: 'absolute',
+			top: '0.25rem',
+			insetInlineEnd: '0.25rem',
+			zIndex: 1,
+			display: 'flex',
+			gap: '1px',
+			padding: '1px',
+			borderRadius: radius.md,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, 0 2px 6px -2px ${colors.shade}`,
+			opacity: {
+				default: 1,
+				[HOVER]: { default: 0, [stylex.when.ancestor(':hover', sidebarItemMarker)]: 1 },
+				[stylex.when.ancestor(':focus-within', sidebarItemMarker)]: 1
+			},
+			pointerEvents: {
+				default: 'auto',
+				[HOVER]: { default: 'none', [stylex.when.ancestor(':hover', sidebarItemMarker)]: 'auto' },
+				[stylex.when.ancestor(':focus-within', sidebarItemMarker)]: 'auto'
+			},
+			transitionProperty: 'opacity',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		href,
+		current = false,
+		muted = false,
+		compact = false,
+		leading,
+		trailing,
+		meta,
+		actions,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: SidebarItemProps = $props();
+
+	const rowAttrs = $derived(
+		attrs(
+			[
+				styles.row,
+				(compact || !meta) && styles.compact,
+				muted && !current && styles.muted,
+				current && styles.current,
+				sx
+			],
+			className
+		)
+	);
+</script>
+
+{#snippet inside()}
+	{#if leading}<span {...stylex.attrs(styles.lead)}>{@render leading()}</span>{/if}
+	<span {...stylex.attrs(styles.title, current && styles.titleCurrent)}>{@render children?.()}</span
+	>
+	{#if trailing}
+		<span {...stylex.attrs(styles.trail, actions && styles.trailHides)}>{@render trailing()}</span>
+	{/if}
+	{#if meta && !compact}<span {...stylex.attrs(styles.meta)}>{@render meta()}</span>{/if}
+{/snippet}
+
+<li data-slot="sidebar-item" {...stylex.attrs(styles.item, sidebarItemMarker)}>
+	{#if href !== undefined}
+		<a {href} data-sidebar-row aria-current={current ? 'page' : undefined} {...rest} {...rowAttrs}>
+			{@render inside()}
+		</a>
+	{:else}
+		<button
+			type="button"
+			data-sidebar-row
+			aria-current={current ? 'page' : undefined}
+			{...rest as Record<string, unknown>}
+			{...rowAttrs}
+		>
+			{@render inside()}
+		</button>
+	{/if}
+	{#if actions}
+		<div data-slot="sidebar-item-actions" {...stylex.attrs(styles.actions)}>
+			{@render actions()}
+		</div>
+	{/if}
+</li>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SidebarItemProps = Omit<HTMLAnchorAttributes, 'children'> & {
+    /** A link to go to. Without it the row is a button; listen with `onclick`. */
+    href?: string;
+    /** The row that is open now. */
+    current?: boolean;
+    /** Quieter than the rest: for rows that need nothing from the person. */
+    muted?: boolean;
+    /** One line, without `meta`: for rows that are settled. */
+    compact?: boolean;
+    /** Before the title: an icon, or a StatusIndicator. */
+    leading?: Snippet;
+    /** At the end of the title's line: a time, or a status. */
+    trailing?: Snippet;
+    /** The second line: a branch, a project, a count. */
+    meta?: Snippet;
+    /** Buttons shown over the end of the row on hover or focus. */
+    actions?: Snippet;
+    sx?: Sx;
+    /** The title. */
+    children?: Snippet;
+};
+declare const SidebarItem: import("svelte").Component<SidebarItemProps, {}, "">;
+type SidebarItem = ReturnType<typeof SidebarItem>;
+export default SidebarItem;

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,11 @@
+import Content from './SidebarContent.svelte';
+import Footer from './SidebarFooter.svelte';
+import Group from './SidebarGroup.svelte';
+import Header from './SidebarHeader.svelte';
+import Item from './SidebarItem.svelte';
+export { Header, Content, Group, Item, Footer };
+export type { SidebarContentProps } from './SidebarContent.svelte';
+export type { SidebarFooterProps } from './SidebarFooter.svelte';
+export type { SidebarGroupProps } from './SidebarGroup.svelte';
+export type { SidebarHeaderProps } from './SidebarHeader.svelte';
+export type { SidebarItemProps } from './SidebarItem.svelte';

package/dist/components/sidebar/index.js

@@ -0,0 +1,6 @@
+import Content from './SidebarContent.svelte';
+import Footer from './SidebarFooter.svelte';
+import Group from './SidebarGroup.svelte';
+import Header from './SidebarHeader.svelte';
+import Item from './SidebarItem.svelte';
+export { Header, Content, Group, Item, Footer };

package/dist/components/skeleton/Skeleton.svelte

@@ -0,0 +1,61 @@
+<!--
+	A stand-in for content on its way. It breathes on Narvi's shared clock, not
+	a CSS animation, and is hidden from assistive technology: mark the region
+	that is loading with aria-busy instead.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { loop } from '../../internal/loop.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, radius } from '../../tokens.stylex.js';
+
+	export type SkeletonProps = {
+		/** Lines of text to stand in for; the last is shorter. Leave out for one block. */
+		lines?: number;
+		width?: string;
+		/** The block's height; lines are as tall as the text around them. */
+		height?: string;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const styles = stylex.create({
+		block: { display: 'block', borderRadius: radius.sm, backgroundColor: colors.hover },
+		lines: { display: 'flex', flexDirection: 'column', gap: '0.5em' },
+		line: { height: '0.8em', borderRadius: radius.xs, backgroundColor: colors.hover }
+	});
+
+	const breathe = loop(1600, (element, { progress }) => {
+		element.style.opacity = String(0.55 + 0.45 * (0.5 + 0.5 * Math.cos(progress * 2 * Math.PI)));
+	});
+</script>
+
+<script lang="ts">
+	let { lines, width = '100%', height = '1rem', sx, class: className }: SkeletonProps = $props();
+</script>
+
+{#if lines}
+	<span
+		aria-hidden="true"
+		data-slot="skeleton"
+		{...attrs([styles.lines, sx], className)}
+		style:width
+		{@attach breathe}
+	>
+		{#each { length: lines }, index (index)}
+			<span
+				{...stylex.attrs(styles.line)}
+				style:width={index === lines - 1 && lines > 1 ? '62%' : '100%'}
+			></span>
+		{/each}
+	</span>
+{:else}
+	<span
+		aria-hidden="true"
+		data-slot="skeleton"
+		{...attrs([styles.block, sx], className)}
+		style:width
+		style:height
+		{@attach breathe}
+	></span>
+{/if}

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Sx } from '../../internal/sx.js';
+export type SkeletonProps = {
+    /** Lines of text to stand in for; the last is shorter. Leave out for one block. */
+    lines?: number;
+    width?: string;
+    /** The block's height; lines are as tall as the text around them. */
+    height?: string;
+    sx?: Sx;
+    class?: string;
+};
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/spinner/Spinner.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { SVGAttributes } from 'svelte/elements';
+	import { loop } from '../../internal/loop.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type SpinnerProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {
+		/** Width and height in pixels, or any CSS length. Defaults to `1em`. */
+		size?: number | string;
+		/** Accessible name. Pass `null` when a nearby label already says what is loading. */
+		label?: string | null;
+		sx?: Sx;
+	};
+
+	// Turns on Narvi's shared clock rather than a CSS animation, which would repaint
+	// at the display's rate. Slower for people who have asked for less motion.
+	const spin = loop(
+		(reduced) => (reduced ? 2400 : 700),
+		(element, { progress }) => (element.style.rotate = `${progress}turn`),
+		(element) => (element.style.rotate = '')
+	);
+
+	const styles = stylex.create({
+		base: {
+			display: 'inline-block',
+			flexShrink: 0,
+			verticalAlign: 'middle'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { size = '1em', label = 'Loading', sx, class: className, ...rest }: SpinnerProps = $props();
+
+	const length = $derived(typeof size === 'number' ? `${size}px` : size);
+</script>
+
+<svg
+	width={length}
+	height={length}
+	viewBox="0 0 16 16"
+	fill="none"
+	role={label ? 'img' : undefined}
+	aria-label={label ?? undefined}
+	aria-hidden={label ? undefined : true}
+	{...rest}
+	{...attrs([styles.base, sx], className)}
+	{@attach spin}
+>
+	<circle cx="8" cy="8" r="6.25" stroke="currentColor" stroke-width="1.5" opacity="0.25" />
+	<path
+		d="M14.25 8A6.25 6.25 0 0 0 8 1.75"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
+</svg>

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SVGAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SpinnerProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {
+    /** Width and height in pixels, or any CSS length. Defaults to `1em`. */
+    size?: number | string;
+    /** Accessible name. Pass `null` when a nearby label already says what is loading. */
+    label?: string | null;
+    sx?: Sx;
+};
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/stack/Stack.svelte

@@ -0,0 +1,99 @@
+<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 { space } from '../../tokens.stylex.js';
+
+	/** Steps on the 4px spacing scale: `4` is 16px. */
+	export type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+
+	export type StackProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Element to render. */
+		as?: 'div' | 'section' | 'article' | 'nav' | 'header' | 'footer' | 'main' | 'ul' | 'ol' | 'li';
+		direction?: 'column' | 'row';
+		gap?: StackGap;
+		align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+		justify?: 'start' | 'center' | 'end' | 'between';
+		wrap?: boolean;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			display: 'flex',
+			boxSizing: 'border-box',
+			minWidth: 0,
+			margin: 0,
+			padding: 0,
+			listStyleType: 'none'
+		},
+		column: { flexDirection: 'column' },
+		row: { flexDirection: 'row' },
+		wrap: { flexWrap: 'wrap' }
+	});
+
+	const gaps = stylex.create({
+		0: { gap: 0 },
+		1: { gap: space.x1 },
+		2: { gap: space.x2 },
+		3: { gap: space.x3 },
+		4: { gap: space.x4 },
+		5: { gap: space.x5 },
+		6: { gap: space.x6 },
+		8: { gap: space.x8 },
+		10: { gap: space.x10 },
+		12: { gap: space.x12 },
+		16: { gap: space.x16 }
+	});
+
+	const aligns = stylex.create({
+		start: { alignItems: 'flex-start' },
+		center: { alignItems: 'center' },
+		end: { alignItems: 'flex-end' },
+		stretch: { alignItems: 'stretch' },
+		baseline: { alignItems: 'baseline' }
+	});
+
+	const justifies = stylex.create({
+		start: { justifyContent: 'flex-start' },
+		center: { justifyContent: 'center' },
+		end: { justifyContent: 'flex-end' },
+		between: { justifyContent: 'space-between' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		as = 'div',
+		direction = 'column',
+		gap = 4,
+		align,
+		justify,
+		wrap = false,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: StackProps = $props();
+</script>
+
+<svelte:element
+	this={as}
+	{...rest}
+	{...attrs(
+		[
+			styles.base,
+			styles[direction],
+			gaps[gap],
+			align && aligns[align],
+			justify && justifies[justify],
+			wrap && styles.wrap,
+			sx
+		],
+		className
+	)}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/components/stack/Stack.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';
+/** Steps on the 4px spacing scale: `4` is 16px. */
+export type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+export type StackProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Element to render. */
+    as?: 'div' | 'section' | 'article' | 'nav' | 'header' | 'footer' | 'main' | 'ul' | 'ol' | 'li';
+    direction?: 'column' | 'row';
+    gap?: StackGap;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Stack: import("svelte").Component<StackProps, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/components/status-indicator/StatusIndicator.svelte

@@ -0,0 +1,97 @@
+<!--
+	Where something stands, by shape as well as colour, so it reads without
+	colour too: a turning arc while working, a ring with a dot while waiting
+	for the person, a tick when done, a diamond when it failed, a square when
+	stopped. (From Eregion, where colour alone failed people who could not see it.)
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+	import Spinner from '../spinner/Spinner.svelte';
+
+	export type Status =
+		'idle' | 'working' | 'waiting' | 'done' | 'failed' | 'stopped' | 'connecting';
+
+	export type StatusIndicatorProps = {
+		status: Status;
+		/** Names the status for assistive technology. `null` when words beside it already say it. */
+		label?: string | null;
+		/** Width and height, in pixels. */
+		size?: number;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const LABELS: Record<Status, string> = {
+		idle: 'Idle',
+		working: 'Working',
+		waiting: 'Waiting for you',
+		done: 'Done',
+		failed: 'Failed',
+		stopped: 'Stopped',
+		connecting: 'Connecting'
+	};
+
+	const styles = stylex.create({
+		root: { display: 'inline-grid', placeItems: 'center', flexShrink: 0, verticalAlign: 'middle' },
+		idle: { color: colors.textSubtle },
+		working: { color: colors.ithil },
+		waiting: { color: colors.warning },
+		done: { color: colors.success },
+		failed: { color: colors.danger },
+		stopped: { color: colors.textSubtle },
+		connecting: { color: colors.textSubtle }
+	});
+</script>
+
+<script lang="ts">
+	let { status, label, size = 14, sx, class: className }: StatusIndicatorProps = $props();
+
+	const name = $derived(label === undefined ? LABELS[status] : label);
+</script>
+
+<span
+	role={name ? 'img' : undefined}
+	aria-label={name ?? undefined}
+	aria-hidden={name ? undefined : true}
+	data-slot="status-indicator"
+	data-status={status}
+	{...attrs([styles.root, styles[status], sx], className)}
+	style:width="{size}px"
+	style:height="{size}px"
+>
+	{#if status === 'working'}
+		<Spinner {size} label={null} />
+	{:else}
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.5"
+			aria-hidden="true"
+		>
+			{#if status === 'idle'}
+				<circle cx="8" cy="8" r="3.5" />
+			{:else if status === 'waiting'}
+				<circle cx="8" cy="8" r="6" />
+				<circle cx="8" cy="8" r="2.25" fill="currentColor" stroke="none" />
+			{:else if status === 'done'}
+				<path
+					d="M3.25 8.5 6.5 11.75 12.75 4.75"
+					stroke-width="1.75"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			{:else if status === 'failed'}
+				<path d="M8 2.25 13.75 8 8 13.75 2.25 8Z" fill="currentColor" stroke="none" />
+			{:else if status === 'stopped'}
+				<rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" stroke="none" />
+			{:else}
+				<circle cx="8" cy="8" r="6" stroke-dasharray="2.4 2.6" />
+			{/if}
+		</svg>
+	{/if}
+</span>

package/dist/components/status-indicator/StatusIndicator.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Sx } from '../../internal/sx.js';
+export type Status = 'idle' | 'working' | 'waiting' | 'done' | 'failed' | 'stopped' | 'connecting';
+export type StatusIndicatorProps = {
+    status: Status;
+    /** Names the status for assistive technology. `null` when words beside it already say it. */
+    label?: string | null;
+    /** Width and height, in pixels. */
+    size?: number;
+    sx?: Sx;
+    class?: string;
+};
+declare const StatusIndicator: import("svelte").Component<StatusIndicatorProps, {}, "">;
+type StatusIndicator = ReturnType<typeof StatusIndicator>;
+export default StatusIndicator;