@mystravil/hardpoint 0.1.0 → 0.2.0

package/dist/components/ImageViewer.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import { Dialog as BitsDialog } from 'bits-ui';
+export type ImageViewerTriggerSnippetProps = {
+    /**
+     * Spread onto the button that opens the viewer, usually around a
+     * thumbnail, so the image opens from the keyboard too.
+     */
+    props: Record<string, unknown>;
+};
+/**
+ * Attributes and handlers not listed here go to the viewer element (Bits
+ * UI `Dialog.Content`), among them `onOpenAutoFocus`, `onCloseAutoFocus`,
+ * `onEscapeKeydown` and `onInteractOutside`.
+ */
+export type ImageViewerProps = Omit<BitsDialog.ContentProps, 'child' | 'children' | 'forceMount' | 'ref' | 'title'> & {
+    open?: boolean;
+    /** The image's URL. A different URL while open starts a new load at scale 1. */
+    src: string;
+    /**
+     * The text alternative, required. It also names the viewer when there
+     * is no `title`, so it should describe the image, never be empty.
+     */
+    alt: string;
+    /**
+     * A line in the top bar, shown as written (a file name, a caption) on
+     * one line, cut with an ellipsis. It names the viewer when set.
+     */
+    title?: string;
+    /** The button that opens the viewer: spread `props` onto it. */
+    trigger?: Snippet<[ImageViewerTriggerSnippetProps]>;
+    /**
+     * Shows the Download button, which saves `src` under this file name
+     * through a link with `download`. A `data:` URL becomes a `blob:` URL
+     * first. Browsers ignore `download` on a link to another origin, so an
+     * image from another origin needs `ondownload`.
+     */
+    downloadName?: string;
+    /**
+     * Shows the Download button and replaces the built-in save, for an app
+     * with its own save picker or confirmation. While its promise is
+     * pending, another press does nothing. Errors are the app's to catch.
+     */
+    ondownload?: () => void | Promise<void>;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** The Download button's label. */
+    downloadLabel?: string;
+    /** The spinner's label while the image loads. */
+    loadingLabel?: string;
+    /** The viewer element. */
+    ref?: HTMLElement | null;
+};
+declare const ImageViewer: import("svelte").Component<ImageViewerProps, {}, "ref" | "open">;
+type ImageViewer = ReturnType<typeof ImageViewer>;
+export default ImageViewer;

package/dist/components/ListDetail.svelte

@@ -0,0 +1,218 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/** From which width the panes sit side by side: 600px, 900px or 1200px. */
+	export type ListDetailBreakpoint = 'medium' | 'expanded' | 'large';
+
+	/** What the `list` and `detail` snippets receive. */
+	export type ListDetailSnippetProps = {
+		/**
+		 * True below `splitFrom`, where one pane shows at a time. Show the
+		 * detail's back control only then.
+		 */
+		stacked: boolean;
+	};
+
+	export type ListDetailProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The list pane's content: the items, and any filter over them. */
+		list: Snippet<[ListDetailSnippetProps]>;
+		/**
+		 * The detail pane's content: the open item. Side by side with nothing
+		 * open, render an empty state here.
+		 */
+		detail: Snippet<[ListDetailSnippetProps]>;
+		/**
+		 * Which pane shows while stacked: the detail when true, the list when
+		 * false (default). Side by side both show and this changes nothing.
+		 * Bindable.
+		 */
+		showDetail?: boolean;
+		/**
+		 * From which width the panes sit side by side; narrower, one shows at
+		 * a time. Default `expanded` (900px).
+		 */
+		splitFrom?: ListDetailBreakpoint;
+		/** The root element. */
+		ref?: HTMLDivElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+
+	let {
+		list,
+		detail,
+		showDetail = $bindable(false),
+		splitFrom = 'expanded',
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: ListDetailProps = $props();
+
+	// The CSS below lays the panes out from the same widths before any script
+	// runs; this query only tells the snippets and the focus rules.
+	const widths: Record<ListDetailBreakpoint, number> = { medium: 600, expanded: 900, large: 1200 };
+	const split = $derived(new MediaQuery(`min-width: ${widths[splitFrom]}px`, true));
+	const stacked = $derived(!split.current);
+	/** The one pane on screen while stacked; null side by side. */
+	const alone = $derived(stacked ? (showDetail ? 'detail' : 'list') : null);
+
+	let listPane = $state<HTMLDivElement | null>(null);
+	let detailPane = $state<HTMLDivElement | null>(null);
+
+	// ---- The list keeps its place ------------------------------------------
+
+	// A pane that is not shown is display: none, which drops its scroll box.
+	// Some browsers then reset its offset, so the list remembers the offset it
+	// had while it showed and puts it back when it shows again.
+	let listTop = 0;
+	function onListScroll() {
+		if (listPane && listPane.getClientRects().length > 0) listTop = listPane.scrollTop;
+	}
+	$effect(() => {
+		const showsList = alone !== 'detail';
+		untrack(() => {
+			if (showsList && listPane && listPane.scrollTop !== listTop) listPane.scrollTop = listTop;
+		});
+	});
+
+	// ---- Focus follows the pane that shows ---------------------------------
+
+	// When the stacked view switches panes, the app's own update runs first:
+	// the check waits a task, past the app's effects and an `await tick()`,
+	// so an app that focuses a title, an input or the item that was open
+	// keeps that focus. Only if focus is then outside the pane on screen
+	// does the pane itself take it. When the window narrows to one pane,
+	// focus moves only if the pane that hid held it. Side by side the app
+	// owns focus. A new switch before the check cancels it.
+	let before: 'list' | 'detail' | null | undefined;
+	$effect(() => {
+		const now = alone;
+		return untrack(() => {
+			const was = before;
+			before = now;
+			if (was === undefined || now === null || was === now) return;
+			const shown = now === 'list' ? listPane : detailPane;
+			const hidden = now === 'list' ? detailPane : listPane;
+			const timer = setTimeout(() => {
+				if (!shown) return;
+				const active = document.activeElement;
+				if (active && shown.contains(active)) return;
+				const lost = !active || active === document.body || !!hidden?.contains(active);
+				if (was === null && !lost) return;
+				shown.focus({ preventScroll: true });
+			});
+			return () => clearTimeout(timer);
+		});
+	});
+</script>
+
+<!--
+	The list-detail layout: a list of items beside the open item. From
+	`splitFrom` (900px by default) the list is a column of
+	`--list-detail-width` at the left and the detail fills the rest; below
+	it the two are separate screens and `showDetail` picks the one that
+	shows. The other pane stays mounted, out of the layout, the
+	accessibility tree and the tab order, so its state and the list's scroll
+	position survive. Switching cuts, as page changes do (motion rule 1).
+
+	The root fills the height its container gives it, or
+	`--list-detail-height`; each pane scrolls inside itself. The panes pad
+	their content by `--gutter`, and the root keeps the side safe areas, so
+	the layout is built to reach the window's edges under the app's header.
+	No frame and no divider: the gutters between the panes group them.
+
+	Extra attributes and `class` go to the root, `div.hp-list-detail`, which
+	carries `data-split-from`, `data-stacked` (below `splitFrom`) and
+	`data-show-detail`. The panes are `div.hp-list-detail-list` and
+	`div.hp-list-detail-detail`, each with `tabindex="-1"`.
+-->
+<div
+	{...rest}
+	bind:this={ref}
+	class={['hp-list-detail', className]}
+	data-split-from={splitFrom}
+	data-stacked={stacked || undefined}
+	data-show-detail={showDetail || undefined}
+>
+	<div bind:this={listPane} class="pane hp-list-detail-list" tabindex="-1" onscroll={onListScroll}>
+		{@render list({ stacked })}
+	</div>
+	<div bind:this={detailPane} class="pane hp-list-detail-detail" tabindex="-1">
+		{@render detail({ stacked })}
+	</div>
+</div>
+
+<style>
+	/* A row of two panes. The side safe areas sit outside them, so a tint
+	   that reaches into a gutter stops short of a notch. min-height: 0 lets
+	   the root shrink as a flex or grid item. */
+	.hp-list-detail {
+		display: flex;
+		box-sizing: border-box;
+		height: var(--list-detail-height, 100%);
+		min-height: 0;
+		padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
+	}
+
+	/* Each pane is a scroller of its own. The page edges come from
+	   --gutter, as everywhere; the bottom safe area keeps the last item
+	   clear of the home indicator. A stable scrollbar gutter keeps the
+	   content still when filtering or a new item changes whether a pane
+	   overflows. */
+	.pane {
+		flex: 1 1 0;
+		min-width: 0;
+		box-sizing: border-box;
+		padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		scrollbar-gutter: stable;
+	}
+	/* Focus lands on a pane only from the switch above, as <main> takes it
+	   from a skip link: no contour, since the pane is not a control. */
+	.pane:focus {
+		outline: none;
+	}
+
+	/* ---- Stacked: one pane at a time --------------------------------- */
+
+	.hp-list-detail[data-show-detail] > .hp-list-detail-list,
+	.hp-list-detail:not([data-show-detail]) > .hp-list-detail-detail {
+		display: none;
+	}
+
+	/* ---- Side by side: from splitFrom -------------------------------- */
+
+	/* Later and as specific as the rules above, so both panes show. */
+	@media (min-width: 600px) {
+		.hp-list-detail[data-split-from='medium'] > .pane {
+			display: block;
+		}
+		.hp-list-detail[data-split-from='medium'] > .hp-list-detail-list {
+			flex: none;
+			width: var(--list-detail-width);
+		}
+	}
+	@media (min-width: 900px) {
+		.hp-list-detail[data-split-from='expanded'] > .pane {
+			display: block;
+		}
+		.hp-list-detail[data-split-from='expanded'] > .hp-list-detail-list {
+			flex: none;
+			width: var(--list-detail-width);
+		}
+	}
+	@media (min-width: 1200px) {
+		.hp-list-detail[data-split-from='large'] > .pane {
+			display: block;
+		}
+		.hp-list-detail[data-split-from='large'] > .hp-list-detail-list {
+			flex: none;
+			width: var(--list-detail-width);
+		}
+	}
+</style>

package/dist/components/ListDetail.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** From which width the panes sit side by side: 600px, 900px or 1200px. */
+export type ListDetailBreakpoint = 'medium' | 'expanded' | 'large';
+/** What the `list` and `detail` snippets receive. */
+export type ListDetailSnippetProps = {
+    /**
+     * True below `splitFrom`, where one pane shows at a time. Show the
+     * detail's back control only then.
+     */
+    stacked: boolean;
+};
+export type ListDetailProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The list pane's content: the items, and any filter over them. */
+    list: Snippet<[ListDetailSnippetProps]>;
+    /**
+     * The detail pane's content: the open item. Side by side with nothing
+     * open, render an empty state here.
+     */
+    detail: Snippet<[ListDetailSnippetProps]>;
+    /**
+     * Which pane shows while stacked: the detail when true, the list when
+     * false (default). Side by side both show and this changes nothing.
+     * Bindable.
+     */
+    showDetail?: boolean;
+    /**
+     * From which width the panes sit side by side; narrower, one shows at
+     * a time. Default `expanded` (900px).
+     */
+    splitFrom?: ListDetailBreakpoint;
+    /** The root element. */
+    ref?: HTMLDivElement | null;
+};
+declare const ListDetail: import("svelte").Component<ListDetailProps, {}, "ref" | "showDetail">;
+type ListDetail = ReturnType<typeof ListDetail>;
+export default ListDetail;

package/dist/components/Meter.svelte

@@ -0,0 +1,283 @@
+<script lang="ts" module>
+	import { Meter as BitsMeter } from 'bits-ui';
+
+	/** A status hue for the bar: `ok` fine, `warn` needs attention, `danger` bad. */
+	export type MeterTone = 'ok' | 'warn' | 'danger';
+
+	export type MeterProps = Omit<BitsMeter.RootProps, 'value' | 'child' | 'children'> & {
+		/**
+		 * The measurement, from `min` to `max`. Pass the real figure each time
+		 * it changes: the bar never moves on its own. A value outside the
+		 * range is held at its ends for the bar and `aria-valuenow`. Work that
+		 * is getting done shows a `Progress` instead.
+		 */
+		value: number;
+		/** The top of the range. Default 100. */
+		max?: number;
+		/** The bottom of the range. Default 0. */
+		min?: number;
+		/**
+		 * How many segments the bar has (default 20, at least 2). A segment
+		 * lights once the value has passed its whole share, so the bar never
+		 * shows more than the value.
+		 */
+		segments?: number;
+		/**
+		 * A line above the bar saying what is measured, as written (never
+		 * caps: it may hold a name). It names the meter; without it, pass
+		 * `aria-label` or `aria-labelledby`.
+		 */
+		label?: string;
+		/**
+		 * The value in words, such as `4.2 of 5 GB`. Shown at the end of the
+		 * label line and read as `aria-valuetext`. Without it both give the
+		 * share of the range, rounded down.
+		 */
+		valueText?: string;
+		/**
+		 * The value at and above which the meter shows `warn`. Default 80% of
+		 * the range. `null` turns the warn step off.
+		 */
+		warnAt?: number | null;
+		/**
+		 * The value at and above which the meter shows `danger`. Default
+		 * `max`. `null` turns the danger step off.
+		 */
+		dangerAt?: number | null;
+		/**
+		 * Replaces the thresholds with a colour the app chooses. Use it where
+		 * lower is worse, or for a state the value cannot show. Colour never
+		 * carries meaning alone: say the reason in `valueText` or `detail`.
+		 */
+		tone?: MeterTone;
+		/**
+		 * A reference value drawn as a thin mark across the bar: a target, an
+		 * expected level, an earlier reading. Held inside the range. The mark
+		 * is visual only and hidden from assistive technology, so say what it
+		 * stands for in `detail`.
+		 */
+		marker?: number;
+		/**
+		 * A muted line under the bar, as written. Assistive technology reads
+		 * it as the meter's description; the app's own `aria-describedby`
+		 * ids follow it.
+		 */
+		detail?: string;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value,
+		max = 100,
+		min = 0,
+		segments = 20,
+		label,
+		valueText,
+		warnAt,
+		dangerAt,
+		tone,
+		marker,
+		detail,
+		id,
+		class: className,
+		ref = $bindable(null),
+		'aria-describedby': describedby,
+		...rest
+	}: MeterProps = $props();
+
+	const uid = $props.id();
+	const labelId = `${uid}-label`;
+	const detailId = `${uid}-detail`;
+
+	// The value inside its range, so the bar and aria-valuenow agree. An
+	// empty range counts as full.
+	const current = $derived(Math.min(max, Math.max(min, value)));
+	const span = $derived(max - min);
+	const count = $derived(Math.max(2, Math.floor(segments)));
+	// Round down: a segment lights only when its whole share is reached.
+	// Multiply before dividing and clear float noise before rounding down,
+	// so 58 of 100 and 0.58 of 1 are both 58% and not 57.99…
+	const share = (n: number) => Math.floor(Number((((current - min) * n) / span).toPrecision(12)));
+	const lit = $derived(current >= max || span <= 0 ? count : share(count));
+	const percent = $derived(span > 0 ? share(100) : 100);
+	const shown = $derived(valueText ?? `${percent}%`);
+
+	// Thresholds apply to the value inside the range. `undefined` takes the
+	// default; `null` turns the step off. 0.8 of the span is cleared of float
+	// noise so a value on the line counts.
+	const warnLine = $derived(
+		warnAt === undefined ? min + Number((0.8 * span).toPrecision(12)) : warnAt
+	);
+	const dangerLine = $derived(dangerAt === undefined ? max : dangerAt);
+	const shownTone = $derived<MeterTone | undefined>(
+		tone ??
+			(dangerLine !== null && current >= dangerLine
+				? 'danger'
+				: warnLine !== null && current >= warnLine
+					? 'warn'
+					: undefined)
+	);
+
+	// The marker's place across the bar, held inside the range.
+	const markerAt = $derived(
+		marker === undefined
+			? undefined
+			: span > 0
+				? Math.min(1, Math.max(0, (marker - min) / span)) * 100
+				: 0
+	);
+
+	const describedBy = $derived([detail ? detailId : undefined, describedby].filter(Boolean).join(' ') || undefined);
+</script>
+
+<!--
+	Bits UI Meter, rendered through its `child` snippet so the element is this
+	component's markup and its styles stay scoped. The root is the meter
+	(`role`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`); `id`, extra
+	attributes and `class` go to it. Its children are presentational to
+	assistive technology, so the label line names it through
+	`aria-labelledby`, the value as shown reaches it as `aria-valuetext`, and
+	the detail line describes it. The marker is a decoration.
+	A segment that lights, goes out or changes tone fades its colour over
+	--dur-segment; the marker moves at once.
+-->
+<BitsMeter.Root
+	bind:ref
+	value={current}
+	{max}
+	{min}
+	aria-labelledby={label ? labelId : undefined}
+	aria-valuetext={shown}
+	aria-describedby={describedBy}
+	{...rest}
+>
+	{#snippet child({ props })}
+		<div
+			{...props}
+			{id}
+			class={['hp-meter', className]}
+			data-tone={shownTone}
+			data-lit={lit}
+			data-segments={count}
+		>
+			{#if label}
+				<div class="hp-meter-line">
+					<span id={labelId} class="hp-meter-label">{label}</span>
+					<span class="hp-meter-value">{shown}</span>
+				</div>
+			{/if}
+			<div class="hp-meter-bar" style:--segments={count}>
+				{#each { length: count }, i}
+					<span class="hp-meter-segment" data-lit={i < lit || undefined}></span>
+				{/each}
+				{#if markerAt !== undefined}
+					<span class="hp-meter-marker" aria-hidden="true" style:left="{markerAt}%"></span>
+				{/if}
+			</div>
+			{#if detail}
+				<p id={detailId} class="hp-meter-detail">{detail}</p>
+			{/if}
+		</div>
+	{/snippet}
+</BitsMeter.Root>
+
+<style>
+	/* The bar fills the width it is given; the app sets a narrower one. */
+	.hp-meter {
+		display: grid;
+		gap: var(--space-2);
+		min-width: 0;
+	}
+
+	/* 16px on touch, the dense 14px on fine pointers. The value keeps the
+	   end of the line; a long label wraps rather than widen the page. */
+	.hp-meter-line {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: var(--space-4);
+		font-size: var(--type-body);
+		line-height: 24px;
+	}
+	@media (pointer: fine) {
+		.hp-meter-line {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+	.hp-meter-label {
+		min-width: 0;
+		color: var(--text);
+		overflow-wrap: anywhere;
+	}
+	/* Muted with no tone; the tone's hue otherwise, so the words and the
+	   bar agree. The value text is always there, so colour never carries the
+	   meaning alone. */
+	.hp-meter-value {
+		flex: none;
+		color: var(--muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.hp-meter[data-tone='ok'] .hp-meter-value {
+		color: var(--ok);
+	}
+	.hp-meter[data-tone='warn'] .hp-meter-value {
+		color: var(--warn);
+	}
+	.hp-meter[data-tone='danger'] .hp-meter-value {
+		color: var(--danger);
+	}
+
+	/* Separate segments as in Progress (BRIEF, visual rule 7): lit in the
+	   tone's colour, the 3:1 control boundary while unlit. Square, 4px
+	   apart, one row. */
+	.hp-meter-bar {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(var(--segments), minmax(0, 1fr));
+		gap: var(--space-1);
+		height: 12px;
+	}
+	/* A segment that lights, goes out or changes tone fades its colour over
+	   --dur-segment (BRIEF, short motion). A CSS transition never runs on an
+	   element's first style, so a meter shows its value at once when it
+	   renders. 0ms is a snap. Colour only, so reduced motion keeps it. */
+	.hp-meter-segment {
+		background: var(--border-control);
+		transition: background-color var(--dur-segment) var(--settle);
+	}
+	.hp-meter-segment[data-lit] {
+		background: var(--accent);
+	}
+	.hp-meter[data-tone='ok'] .hp-meter-segment[data-lit] {
+		background: var(--ok);
+	}
+	.hp-meter[data-tone='warn'] .hp-meter-segment[data-lit] {
+		background: var(--warn);
+	}
+	.hp-meter[data-tone='danger'] .hp-meter-segment[data-lit] {
+		background: var(--danger);
+	}
+
+	/* A 2px line in the text colour, 4px past the bar at each end. A 1px
+	   canvas edge on each side lets it read over lit segments of every tone,
+	   unlit ones and the gaps, in both themes. It moves at once. */
+	.hp-meter-marker {
+		position: absolute;
+		top: calc(var(--space-1) * -1);
+		bottom: calc(var(--space-1) * -1);
+		width: 2px;
+		margin-left: -1px;
+		background: var(--text);
+		box-shadow: 0 0 0 1px var(--canvas);
+		pointer-events: none;
+	}
+
+	.hp-meter-detail {
+		margin: 0;
+		color: var(--muted);
+		font-size: var(--type-caption);
+		line-height: 18px;
+	}
+</style>

package/dist/components/Meter.svelte.d.ts

@@ -0,0 +1,66 @@
+import { Meter as BitsMeter } from 'bits-ui';
+/** A status hue for the bar: `ok` fine, `warn` needs attention, `danger` bad. */
+export type MeterTone = 'ok' | 'warn' | 'danger';
+export type MeterProps = Omit<BitsMeter.RootProps, 'value' | 'child' | 'children'> & {
+    /**
+     * The measurement, from `min` to `max`. Pass the real figure each time
+     * it changes: the bar never moves on its own. A value outside the
+     * range is held at its ends for the bar and `aria-valuenow`. Work that
+     * is getting done shows a `Progress` instead.
+     */
+    value: number;
+    /** The top of the range. Default 100. */
+    max?: number;
+    /** The bottom of the range. Default 0. */
+    min?: number;
+    /**
+     * How many segments the bar has (default 20, at least 2). A segment
+     * lights once the value has passed its whole share, so the bar never
+     * shows more than the value.
+     */
+    segments?: number;
+    /**
+     * A line above the bar saying what is measured, as written (never
+     * caps: it may hold a name). It names the meter; without it, pass
+     * `aria-label` or `aria-labelledby`.
+     */
+    label?: string;
+    /**
+     * The value in words, such as `4.2 of 5 GB`. Shown at the end of the
+     * label line and read as `aria-valuetext`. Without it both give the
+     * share of the range, rounded down.
+     */
+    valueText?: string;
+    /**
+     * The value at and above which the meter shows `warn`. Default 80% of
+     * the range. `null` turns the warn step off.
+     */
+    warnAt?: number | null;
+    /**
+     * The value at and above which the meter shows `danger`. Default
+     * `max`. `null` turns the danger step off.
+     */
+    dangerAt?: number | null;
+    /**
+     * Replaces the thresholds with a colour the app chooses. Use it where
+     * lower is worse, or for a state the value cannot show. Colour never
+     * carries meaning alone: say the reason in `valueText` or `detail`.
+     */
+    tone?: MeterTone;
+    /**
+     * A reference value drawn as a thin mark across the bar: a target, an
+     * expected level, an earlier reading. Held inside the range. The mark
+     * is visual only and hidden from assistive technology, so say what it
+     * stands for in `detail`.
+     */
+    marker?: number;
+    /**
+     * A muted line under the bar, as written. Assistive technology reads
+     * it as the meter's description; the app's own `aria-describedby`
+     * ids follow it.
+     */
+    detail?: string;
+};
+declare const Meter: import("svelte").Component<MeterProps, {}, "ref">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;