@mystravil/hardpoint 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,46 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+export type NativeSelectOption<V = string> = {
+    value: V;
+    label: string;
+    disabled?: boolean;
+};
+/** From which width the label sits beside the well: 600px, 900px or 1200px. */
+export type NativeSelectBreakpoint = 'medium' | 'expanded' | 'large';
+import type { Snippet } from 'svelte';
+declare function $$render<V = string>(): {
+    props: Omit<HTMLSelectAttributes, "children" | "value" | "multiple"> & {
+        /** The caps field label. */
+        label: string;
+        /** The chosen option's value. Bindable. */
+        value?: V;
+        /** The choices. Without it, pass `<option>` elements as children. */
+        options?: NativeSelectOption<V>[];
+        /**
+         * The label sits above the well by default. `true` puts it beside the
+         * well at every width; a breakpoint puts it beside from that width up.
+         */
+        labelBeside?: boolean | NativeSelectBreakpoint;
+        children?: Snippet;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V = string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V = string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NativeSelect: $$IsomorphicComponent;
+type NativeSelect<V = string> = InstanceType<typeof NativeSelect<V>>;
+export default NativeSelect;

package/dist/components/Pagination.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The current page, from 1. Bindable. */
+		page?: number;
+		/** The number of items. */
+		count: number;
+		/** Items per page. With the default 1, `count` is the number of pages. */
+		perPage?: number;
+		/** The navigation landmark's accessible name. */
+		label?: string;
+		/** The caps label before the page figure. */
+		pageLabel?: string;
+		previousLabel?: string;
+		nextLabel?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { Pagination as BitsPagination } from 'bits-ui';
+
+	let {
+		page = $bindable(1),
+		count,
+		perPage = 1,
+		label = 'Pages',
+		pageLabel = 'Page',
+		previousLabel = 'Previous page',
+		nextLabel = 'Next page',
+		class: className,
+		...rest
+	}: PaginationProps = $props();
+
+	const pages = $derived(Math.max(1, Math.ceil(count / perPage)));
+
+	// Fewer items (a filter) can leave the page past the end; keep it in range.
+	$effect.pre(() => {
+		if (page > pages) page = pages;
+	});
+</script>
+
+<!--
+	The list view's one group of solid blocks: square titanium steps with
+	black arrows. Bits UI Pagination supplies the behaviour: disabled ends and
+	arrow keys between the steps.
+-->
+<BitsPagination.Root bind:page {count} {perPage}>
+	{#snippet child({ props, currentPage })}
+		<nav {...rest} {...props} class={['hp-pagination', className]} aria-label={label}>
+			<span class="hp-label">{pageLabel}</span>
+			<span class="figure" aria-live="polite">{currentPage} / {pages}</span>
+			<span class="steps">
+				<BitsPagination.PrevButton>
+					{#snippet child({ props })}
+						<button {...props} class="step" data-direction="previous" aria-label={previousLabel}
+						></button>
+					{/snippet}
+				</BitsPagination.PrevButton>
+				<BitsPagination.NextButton>
+					{#snippet child({ props })}
+						<button {...props} class="step" data-direction="next" aria-label={nextLabel}></button>
+					{/snippet}
+				</BitsPagination.NextButton>
+			</span>
+		</nav>
+	{/snippet}
+</BitsPagination.Root>
+
+<style>
+	.hp-pagination {
+		display: flex;
+		align-items: center;
+		gap: var(--space-4);
+	}
+	.figure {
+		font-family: var(--mono);
+		font-variant-numeric: tabular-nums;
+	}
+	/* 8px apart, so a focus contour (4px out) never overlaps the neighbour. */
+	.steps {
+		display: flex;
+		gap: var(--space-2);
+		margin-left: var(--space-2);
+	}
+
+	/* 24px on fine pointers, 44px on coarse ones (--hit-target). A
+	   disabled step drops to the band grey. */
+	.step {
+		display: grid;
+		place-items: center;
+		width: var(--hit-target);
+		height: var(--hit-target);
+		padding: 0;
+		border: 0;
+		background: var(--accent);
+		color: var(--canvas);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.step::before {
+		content: '';
+		width: 6px;
+		height: 8px;
+		background: currentColor;
+	}
+	@media (pointer: coarse) {
+		.step::before {
+			width: 8px;
+			height: 12px;
+		}
+	}
+	.step[data-direction='previous']::before {
+		clip-path: polygon(100% 0, 0 50%, 100% 100%);
+	}
+	.step[data-direction='next']::before {
+		clip-path: polygon(0 0, 100% 50%, 0 100%);
+	}
+	.step:disabled {
+		background: var(--surface-band);
+		color: var(--muted);
+		cursor: default;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.step:not(:disabled):hover {
+			background: var(--muted);
+		}
+	}
+	.step:not(:disabled):active {
+		background: var(--muted);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The current page, from 1. Bindable. */
+    page?: number;
+    /** The number of items. */
+    count: number;
+    /** Items per page. With the default 1, `count` is the number of pages. */
+    perPage?: number;
+    /** The navigation landmark's accessible name. */
+    label?: string;
+    /** The caps label before the page figure. */
+    pageLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+};
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Popover.svelte

@@ -0,0 +1,222 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	export type PopoverTriggerSnippetProps = {
+		/** Spread onto the button that opens the popover. */
+		props: Record<string, unknown>;
+	};
+
+	export type PopoverActionsSnippetProps = {
+		/** Closes the popover; focus returns to the trigger. */
+		close: () => void;
+	};
+
+	/**
+	 * Attributes and handlers not listed here go to the panel (Bits UI
+	 * `Popover.Content`), among them `side` (default `bottom`), `align`
+	 * (default `start`), `sideOffset`, `onOpenAutoFocus`, `onCloseAutoFocus`,
+	 * `onEscapeKeydown` and `onInteractOutside`. The placement props apply
+	 * from 600px only; below it the panel is a bottom sheet.
+	 */
+	export type PopoverProps = Omit<
+		BitsPopover.ContentProps,
+		'child' | 'children' | 'forceMount' | 'ref' | 'title'
+	> & {
+		open?: boolean;
+		/** The caps title, and the panel's accessible name. */
+		title: string;
+		/** The button the panel is anchored to: spread `props` onto it. */
+		trigger: Snippet<[PopoverTriggerSnippetProps]>;
+		/** The body, under the title. */
+		children: Snippet;
+		/** The action row at the bottom, primary action last. */
+		actions?: Snippet<[PopoverActionsSnippetProps]>;
+		/** The sheet's close button's accessible name (below 600px). */
+		closeLabel?: string;
+		/** The panel element. */
+		ref?: HTMLElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import { pop } from '../motion/index.js';
+	import Sheet from './internal/Sheet.svelte';
+
+	const uid = $props.id();
+
+	let {
+		open = $bindable(false),
+		title,
+		trigger,
+		children,
+		actions,
+		closeLabel = 'Close',
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: PopoverProps = $props();
+
+	const titleId = `${uid}-title`;
+
+	// The form follows the width (BRIEF, Apps and phones: Overlays): a panel
+	// anchored to the trigger from 600px, the shared bottom sheet below it.
+	const wide = new MediaQuery('min-width: 600px', true);
+	const form = $derived(wide.current ? 'popover' : 'sheet');
+
+	function close() {
+		open = false;
+	}
+</script>
+
+<!--
+	Bits UI gives the trigger aria-haspopup="dialog", aria-expanded and
+	aria-controls; the panel takes role="dialog" and its title as its name.
+	Focus moves into the panel on open (to the sheet's close button on
+	compact) and returns to the trigger on close. Escape, a press outside,
+	the trigger and, on compact, the close button and a swipe down close it.
+-->
+<BitsPopover.Root bind:open>
+	<BitsPopover.Trigger>
+		{#snippet child({ props })}
+			{@render trigger({ props })}
+		{/snippet}
+	</BitsPopover.Trigger>
+
+	<BitsPopover.Portal>
+		{#if wide.current}
+			<BitsPopover.Content
+				forceMount
+				bind:ref
+				role="dialog"
+				aria-labelledby={titleId}
+				side="bottom"
+				align="start"
+				sideOffset={8}
+				collisionPadding={8}
+				{...rest}
+			>
+				{#snippet child({ wrapperProps, props, open: shown })}
+					{#if shown}
+						<div {...wrapperProps}>
+							<div {...props} class={['hp-popover', className]} data-form="popover" transition:pop>
+								<p id={titleId} class="hp-popover-title hp-label">{title}</p>
+								{@render body()}
+								{#if actions}
+									{@render actionRow()}
+								{/if}
+							</div>
+						</div>
+					{/if}
+				{/snippet}
+			</BitsPopover.Content>
+		{:else}
+			<BitsPopover.ContentStatic forceMount preventScroll bind:ref role="dialog" aria-labelledby={titleId} {...rest}>
+				{#snippet child({ props, open: shown })}
+					<Sheet
+						{...props}
+						class={['hp-popover', className]}
+						data-form="sheet"
+						open={shown}
+						layer="popover"
+						{title}
+						{titleId}
+						{closeLabel}
+						onclose={close}
+						footer={actions ? actionRow : undefined}
+					>
+						{@render body()}
+					</Sheet>
+				{/snippet}
+			</BitsPopover.ContentStatic>
+		{/if}
+	</BitsPopover.Portal>
+</BitsPopover.Root>
+
+{#snippet body()}
+	<div class="hp-popover-body" data-form={form} data-end={actions ? undefined : ''}>
+		{@render children()}
+	</div>
+{/snippet}
+
+{#snippet actionRow()}
+	<div class="hp-popover-actions" data-form={form}>
+		{@render actions?.({ close })}
+	</div>
+{/snippet}
+
+<style>
+	/* ---- Popover (600px and up): a black panel under its trigger --------- */
+
+	/* On the popover layer (tokens.css), over the shell and over an open
+	   dialog. Bits UI copies the z-index to the positioned wrapper. As wide
+	   as its content up to --popover-width (an app passes
+	   style="--popover-width: …" for another cap; the sheet ignores it), and
+	   as tall as the space beside the trigger; the body scrolls inside. */
+	.hp-popover {
+		--popover-width: 360px;
+
+		position: relative;
+		z-index: var(--layer-popover);
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		width: max-content;
+		max-width: min(var(--popover-width), var(--bits-popover-content-available-width));
+		max-height: var(--bits-popover-content-available-height);
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		overscroll-behavior: contain;
+	}
+
+	/* A caps label names the panel, in the main ink, so the muted caps
+	   labels of fields inside it read as one level down. */
+	.hp-popover-title {
+		flex: none;
+		margin: 0;
+		padding: var(--space-3) var(--space-4) 0;
+	}
+
+	/* ---- Body and actions, in both forms -------------------------------- */
+
+	/* The top padding keeps a first control's focus contour (4px out, 2px
+	   wide) inside the scrolling box. */
+	.hp-popover-body {
+		display: grid;
+		align-content: start;
+		gap: var(--space-4);
+		min-width: 0;
+		font-size: var(--type-body);
+		line-height: 24px;
+	}
+	.hp-popover-body[data-form='popover'] {
+		flex: 1 1 auto;
+		min-height: 0;
+		padding: var(--space-3) var(--space-4);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+	/* The sheet's body scrolls itself. */
+	.hp-popover-body[data-form='sheet'] {
+		padding: var(--space-2) var(--gutter);
+	}
+	/* Without an action row the body ends the panel. */
+	.hp-popover-body[data-end] {
+		padding-bottom: var(--space-4);
+	}
+
+	/* Actions sit at the end, primary last, 8px apart. */
+	.hp-popover-actions {
+		flex: none;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: var(--space-2);
+		padding: var(--space-4) var(--gutter);
+	}
+	.hp-popover-actions[data-form='popover'] {
+		padding: var(--space-1) var(--space-4) var(--space-4);
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import { Popover as BitsPopover } from 'bits-ui';
+export type PopoverTriggerSnippetProps = {
+    /** Spread onto the button that opens the popover. */
+    props: Record<string, unknown>;
+};
+export type PopoverActionsSnippetProps = {
+    /** Closes the popover; focus returns to the trigger. */
+    close: () => void;
+};
+/**
+ * Attributes and handlers not listed here go to the panel (Bits UI
+ * `Popover.Content`), among them `side` (default `bottom`), `align`
+ * (default `start`), `sideOffset`, `onOpenAutoFocus`, `onCloseAutoFocus`,
+ * `onEscapeKeydown` and `onInteractOutside`. The placement props apply
+ * from 600px only; below it the panel is a bottom sheet.
+ */
+export type PopoverProps = Omit<BitsPopover.ContentProps, 'child' | 'children' | 'forceMount' | 'ref' | 'title'> & {
+    open?: boolean;
+    /** The caps title, and the panel's accessible name. */
+    title: string;
+    /** The button the panel is anchored to: spread `props` onto it. */
+    trigger: Snippet<[PopoverTriggerSnippetProps]>;
+    /** The body, under the title. */
+    children: Snippet;
+    /** The action row at the bottom, primary action last. */
+    actions?: Snippet<[PopoverActionsSnippetProps]>;
+    /** The sheet's close button's accessible name (below 600px). */
+    closeLabel?: string;
+    /** The panel element. */
+    ref?: HTMLElement | null;
+};
+declare const Popover: import("svelte").Component<PopoverProps, {}, "ref" | "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Progress.svelte

@@ -0,0 +1,157 @@
+<script lang="ts" module>
+	import { Progress as BitsProgress } from 'bits-ui';
+
+	export type ProgressProps = Omit<BitsProgress.RootProps, 'value' | 'child' | 'children'> & {
+		/**
+		 * How far the work has got, from `min` to `max`. Pass the real figure
+		 * each time it changes: the bar never moves on its own. Work whose
+		 * progress is unknown shows a `Spinner` instead.
+		 */
+		value: number;
+		/** The value at which the work is done. Default 100. */
+		max?: number;
+		/** The value at which the work starts. 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 has been done.
+		 */
+		segments?: number;
+		/**
+		 * A line above the bar saying what is in progress, as written (never
+		 * caps: it may hold a file or project name). It names the progress
+		 * bar; without it, pass `aria-label` or `aria-labelledby`.
+		 */
+		label?: string;
+		/**
+		 * The value in words, such as `3 of 12 files`. Shown at the end of the
+		 * label line and read as `aria-valuetext`. Without it both give the
+		 * percentage done, rounded down.
+		 */
+		valueText?: string;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value,
+		max = 100,
+		min = 0,
+		segments = 20,
+		label,
+		valueText,
+		id,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ProgressProps = $props();
+
+	const uid = $props.id();
+	const labelId = `${uid}-label`;
+
+	// The value inside its range, so the bar and aria-valuenow agree. An
+	// empty range counts as done.
+	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 done.
+	// 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}%`);
+</script>
+
+<!--
+	Bits UI Progress, rendered through its `child` snippet so the element is
+	this component's markup and its styles stay scoped. The root is the
+	progressbar (`role`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`,
+	`data-state` loading | loaded); `id`, extra attributes and `class` go to
+	it. Its children are presentational to assistive technology, so the label
+	line names it through `aria-labelledby`, and the value as shown (the
+	`valueText` or the floored percentage) reaches it as `aria-valuetext`.
+	A segment that lights or goes out fades its colour over --dur-segment.
+-->
+<BitsProgress.Root
+	bind:ref
+	value={current}
+	{max}
+	{min}
+	aria-labelledby={label ? labelId : undefined}
+	aria-valuetext={shown}
+	{...rest}
+>
+	{#snippet child({ props })}
+		<div {...props} {id} class={['hp-progress', className]} data-lit={lit} data-segments={count}>
+			{#if label}
+				<div class="hp-progress-line">
+					<span id={labelId} class="hp-progress-label">{label}</span>
+					<span class="hp-progress-value">{shown}</span>
+				</div>
+			{/if}
+			<div class="hp-progress-bar" style:--segments={count}>
+				{#each { length: count }, i}
+					<span class="hp-progress-segment" data-lit={i < lit || undefined}></span>
+				{/each}
+			</div>
+		</div>
+	{/snippet}
+</BitsProgress.Root>
+
+<style>
+	/* The bar fills the width it is given; the app sets a narrower one. */
+	.hp-progress {
+		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-progress-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-progress-line {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+	.hp-progress-label {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.hp-progress-value {
+		flex: none;
+		color: var(--muted);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Separate segments (BRIEF, visual rule 7; da3-38): titanium once done,
+	   the 3:1 control boundary while still to do, so the unlit share reads as
+	   part of the bar. Square, 4px apart, one row. */
+	.hp-progress-bar {
+		display: grid;
+		grid-template-columns: repeat(var(--segments), minmax(0, 1fr));
+		gap: var(--space-1);
+		height: 12px;
+	}
+	/* A segment that lights or goes out fades its colour over --dur-segment
+	   (BRIEF, short motion). A CSS transition never runs on an element's
+	   first style, so a bar shows its value at once when it renders. 0ms is
+	   a snap. Colour only, so reduced motion keeps it. */
+	.hp-progress-segment {
+		background: var(--border-control);
+		transition: background-color var(--dur-segment) var(--settle);
+	}
+	.hp-progress-segment[data-lit] {
+		background: var(--accent);
+	}
+</style>

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

@@ -0,0 +1,34 @@
+import { Progress as BitsProgress } from 'bits-ui';
+export type ProgressProps = Omit<BitsProgress.RootProps, 'value' | 'child' | 'children'> & {
+    /**
+     * How far the work has got, from `min` to `max`. Pass the real figure
+     * each time it changes: the bar never moves on its own. Work whose
+     * progress is unknown shows a `Spinner` instead.
+     */
+    value: number;
+    /** The value at which the work is done. Default 100. */
+    max?: number;
+    /** The value at which the work starts. 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 has been done.
+     */
+    segments?: number;
+    /**
+     * A line above the bar saying what is in progress, as written (never
+     * caps: it may hold a file or project name). It names the progress
+     * bar; without it, pass `aria-label` or `aria-labelledby`.
+     */
+    label?: string;
+    /**
+     * The value in words, such as `3 of 12 files`. Shown at the end of the
+     * label line and read as `aria-valuetext`. Without it both give the
+     * percentage done, rounded down.
+     */
+    valueText?: string;
+};
+declare const Progress: import("svelte").Component<ProgressProps, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;