@wells-nelson/displays 0.0.0-stage → 0.0.1

package/dist/Leaderboards.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Leaderboard } from './types.js';
+declare function $$render<T>(): {
+    props: {
+        boards: Leaderboard<T>[];
+        rowKey: (row: T) => string;
+        rowLabel: (row: T) => string;
+        /** Accessible name of the region. */
+        label?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Leaderboards: $$IsomorphicComponent;
+type Leaderboards<T> = InstanceType<typeof Leaderboards<T>>;
+export default Leaderboards;

package/dist/Modal.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconButton from './IconButton.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		children,
+		footer,
+		onclose,
+		size = 'md'
+	}: {
+		open?: boolean;
+		title: string;
+		children: Snippet;
+		footer?: Snippet;
+		onclose?: () => void;
+		size?: 'sm' | 'md';
+	} = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		else if (!open && dialog.open) dialog.close();
+	});
+
+	function handleClose() {
+		if (open) {
+			open = false;
+			onclose?.();
+		}
+	}
+
+	function onBackdrop(e: MouseEvent) {
+		if (e.target === dialog) dialog?.close();
+	}
+</script>
+
+<dialog bind:this={dialog} class="modal {size}" onclose={handleClose} onclick={onBackdrop} aria-label={title}>
+	{#if open}
+		<div class="panel">
+			<header>
+				<h2>{title}</h2>
+				<IconButton icon="x" label="Close" onclick={() => dialog?.close()} />
+			</header>
+			<div class="body">
+				{@render children()}
+			</div>
+			{#if footer}
+				<footer>{@render footer()}</footer>
+			{/if}
+		</div>
+	{/if}
+</dialog>
+
+<style>
+	.modal {
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-lg);
+		background: var(--surface);
+		color: var(--text);
+		width: min(34rem, calc(100vw - 2rem));
+		max-height: min(46rem, calc(100dvh - 2rem));
+		box-shadow: var(--shadow-lg);
+	}
+	.modal.sm {
+		width: min(24rem, calc(100vw - 2rem));
+	}
+	.modal::backdrop {
+		background: rgb(0 0 0 / 0.45);
+	}
+	.panel {
+		display: flex;
+		flex-direction: column;
+		max-height: inherit;
+	}
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.75rem 0.75rem 0.25rem 1.25rem;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.15rem;
+	}
+	.body {
+		padding: 0.5rem 1.25rem 1rem;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	footer {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		justify-content: flex-end;
+		padding: 0.75rem 1.25rem 1rem;
+		border-top: 1px solid var(--border);
+	}
+</style>

package/dist/Modal.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    children: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+    size?: 'sm' | 'md';
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/SortableTable.svelte

@@ -0,0 +1,161 @@
+<script lang="ts" generics="T">
+	import { sortRows, type SortableColumn } from './types.js';
+
+	/**
+	 * Table with a pinned first column that scrolls sideways on small screens. Tap a header to
+	 * sort by it, tap again to flip. Rows without a value sort last.
+	 */
+	let {
+		title,
+		rows,
+		columns,
+		rowKey,
+		rowLabel,
+		labelHeader = 'Name',
+		sortKey = $bindable(),
+		descending = $bindable(true),
+		emptyText = 'Nothing recorded yet.'
+	}: {
+		title?: string;
+		rows: T[];
+		columns: SortableColumn<T>[];
+		rowKey: (row: T) => string;
+		/** The pinned first column. */
+		rowLabel: (row: T) => string;
+		labelHeader?: string;
+		/** Column currently sorted by; defaults to the first column. */
+		sortKey?: string;
+		descending?: boolean;
+		emptyText?: string;
+	} = $props();
+
+	const activeKey = $derived(sortKey ?? columns[0]?.key);
+	const activeColumn = $derived(columns.find((c) => c.key === activeKey));
+	const sorted = $derived(activeColumn ? sortRows(rows, activeColumn.value, rowLabel, descending) : rows);
+
+	function sortBy(key: string) {
+		if (key === activeKey) descending = !descending;
+		else {
+			sortKey = key;
+			descending = true;
+		}
+	}
+
+	function cell(col: SortableColumn<T>, row: T) {
+		if (col.display) return col.display(row);
+		return col.value(row) ?? '';
+	}
+</script>
+
+<section class="table-card card">
+	{#if title}<h2>{title}</h2>{/if}
+	{#if rows.length === 0}
+		<p class="muted empty-row">{emptyText}</p>
+	{:else}
+		<div class="scroll">
+			<table>
+				<thead>
+					<tr>
+						<th scope="col" class="name">{labelHeader}</th>
+						{#each columns as col (col.key)}
+							<th
+								scope="col"
+								aria-sort={col.key === activeKey ? (descending ? 'descending' : 'ascending') : undefined}
+							>
+								<button type="button" onclick={() => sortBy(col.key)} title={`Sort by ${col.full ?? col.title}`}>
+									{col.title}
+									{#if col.key === activeKey}<span aria-hidden="true">{descending ? '▼' : '▲'}</span>{/if}
+								</button>
+							</th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each sorted as row (rowKey(row))}
+						<tr>
+							<th scope="row" class="name">{rowLabel(row)}</th>
+							{#each columns as col (col.key)}
+								<td>{cell(col, row)}</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</section>
+
+<style>
+	.table-card {
+		margin-bottom: 1rem;
+		overflow: hidden;
+	}
+	h2 {
+		margin: 0;
+		padding: 0.75rem 1rem;
+		font-size: 1rem;
+	}
+	.scroll {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+	table {
+		border-collapse: separate;
+		border-spacing: 0;
+		width: 100%;
+		font-size: 0.9rem;
+		font-variant-numeric: tabular-nums;
+	}
+	th,
+	td {
+		padding: 0.45rem 0.6rem;
+		border-top: 1px solid var(--border);
+		text-align: right;
+		white-space: nowrap;
+	}
+	thead th {
+		background: var(--surface-2);
+		font-size: 0.8rem;
+		padding: 0;
+	}
+	thead th.name {
+		padding: 0.45rem 0.75rem;
+	}
+	thead button {
+		width: 100%;
+		padding: 0.5rem 0.6rem;
+		border: none;
+		background: none;
+		font-weight: 700;
+		text-align: right;
+		cursor: pointer;
+		white-space: nowrap;
+	}
+	thead button span {
+		font-size: 0.65rem;
+		color: var(--accent-text);
+	}
+	.name {
+		position: sticky;
+		left: 0;
+		z-index: 1;
+		text-align: left;
+		background: var(--surface);
+		font-weight: 600;
+		max-width: 11rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		box-shadow: 1px 0 0 var(--border);
+	}
+	thead .name {
+		background: var(--surface-2);
+	}
+	tbody tr:hover td,
+	tbody tr:hover .name {
+		background: var(--surface-hover);
+	}
+	.empty-row {
+		padding: 0 1rem 1rem;
+		margin: 0;
+	}
+</style>

package/dist/SortableTable.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type SortableColumn } from './types.js';
+declare function $$render<T>(): {
+    props: {
+        title?: string;
+        rows: T[];
+        columns: SortableColumn<T>[];
+        rowKey: (row: T) => string;
+        /** The pinned first column. */
+        rowLabel: (row: T) => string;
+        labelHeader?: string;
+        /** Column currently sorted by; defaults to the first column. */
+        sortKey?: string;
+        descending?: boolean;
+        emptyText?: string;
+    };
+    exports: {};
+    bindings: "sortKey" | "descending";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sortKey" | "descending";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableTable: $$IsomorphicComponent;
+type SortableTable<T> = InstanceType<typeof SortableTable<T>>;
+export default SortableTable;

package/dist/Splash.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	/** Startup placeholder shown while the local database opens. */
+	let { text }: { text: string } = $props();
+</script>
+
+<div class="splash" aria-busy="true">{text}</div>
+
+<style>
+	.splash {
+		display: grid;
+		place-items: center;
+		min-height: 100dvh;
+		font-size: 2.5rem;
+		font-weight: 800;
+		color: var(--accent-text);
+	}
+</style>

package/dist/Splash.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    text: string;
+};
+declare const Splash: import("svelte").Component<$$ComponentProps, {}, "">;
+type Splash = ReturnType<typeof Splash>;
+export default Splash;

package/dist/icons.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 24x24 stroke icons (inner SVG markup, drawn with `stroke="currentColor"`).
+ * The base set covers what the shared components and typical apps need; apps add their own
+ * with `registerIcons` before the first render.
+ */
+export declare const baseIcons: {
+    readonly alert: "<path d=\"M12 3.5l9.5 16.5h-19z\"/><path d=\"M12 10v4.5M12 17.3v.2\"/>";
+    readonly check: "<path d=\"M5 12.5l4.5 4.5L19 7.5\"/>";
+    readonly chevron: "<path d=\"M6 9l6 6 6-6\"/>";
+    readonly cloud: "<path d=\"M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z\"/>";
+    readonly 'cloud-pending': "<path d=\"M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z\"/><path d=\"M12 10.5v5M9.8 12.7l2.2-2.2 2.2 2.2\"/>";
+    readonly gear: "<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z\"/>";
+    readonly grip: "<circle cx=\"9\" cy=\"6\" r=\"1\"/><circle cx=\"15\" cy=\"6\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"18\" r=\"1\"/><circle cx=\"15\" cy=\"18\" r=\"1\"/>";
+    readonly mail: "<rect x=\"3\" y=\"5.5\" width=\"18\" height=\"13\" rx=\"2\"/><path d=\"M3.5 7l8.5 6 8.5-6\"/>";
+    readonly pencil: "<path d=\"M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z\"/><path d=\"M13.5 6.5l4 4\"/>";
+    readonly plus: "<path d=\"M12 5v14M5 12h14\"/>";
+    readonly refresh: "<path d=\"M20 11a8 8 0 0 0-14.7-4.3L4 8.5M4 13a8 8 0 0 0 14.7 4.3l1.3-1.8\"/><path d=\"M4 4v4.5h4.5M20 20v-4.5h-4.5\"/>";
+    readonly search: "<circle cx=\"11\" cy=\"11\" r=\"6.5\"/><path d=\"M20 20l-4.4-4.4\"/>";
+    readonly share: "<circle cx=\"18\" cy=\"5.5\" r=\"2.5\"/><circle cx=\"6\" cy=\"12\" r=\"2.5\"/><circle cx=\"18\" cy=\"18.5\" r=\"2.5\"/><path d=\"M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1\"/>";
+    readonly trash: "<path d=\"M4 7h16M10 11v6M14 11v6M5.5 7l1 12.5a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5l1-12.5M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7\"/>";
+    readonly undo: "<path d=\"M9 14L4 9l5-5\"/><path d=\"M4 9h10.5a5.5 5.5 0 0 1 0 11H11\"/>";
+    readonly user: "<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/>";
+    readonly 'wifi-off': "<path d=\"M3 3l18 18M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 4.2-2.4M14.8 10.5A10 10 0 0 1 19 12.9M2 9a15 15 0 0 1 4.1-2.6M10.7 5.1A15 15 0 0 1 22 9\"/><circle cx=\"12\" cy=\"20\" r=\"0.6\"/>";
+    readonly x: "<path d=\"M6 6l12 12M18 6L6 18\"/>";
+};
+export type BaseIconName = keyof typeof baseIcons;
+/** A base icon or any name an app registered. `string & {}` keeps editor completion for the base set. */
+export type IconName = BaseIconName | (string & {});
+/**
+ * Add (or replace) icons. Values are the inner SVG markup for a 24x24 viewBox, stroke-based.
+ * Call once at startup, before anything renders them.
+ */
+export declare function registerIcons(icons: Record<string, string>): void;
+/** The SVG markup for an icon, or '' when the name isn't registered. */
+export declare function iconMarkup(name: IconName): string;
+export declare function hasIcon(name: string): boolean;

package/dist/icons.js

@@ -0,0 +1,41 @@
+/**
+ * 24x24 stroke icons (inner SVG markup, drawn with `stroke="currentColor"`).
+ * The base set covers what the shared components and typical apps need; apps add their own
+ * with `registerIcons` before the first render.
+ */
+export const baseIcons = {
+    alert: '<path d="M12 3.5l9.5 16.5h-19z"/><path d="M12 10v4.5M12 17.3v.2"/>',
+    check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
+    chevron: '<path d="M6 9l6 6 6-6"/>',
+    cloud: '<path d="M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z"/>',
+    'cloud-pending': '<path d="M7 18.5h10.5a4 4 0 0 0 .6-8 6 6 0 0 0-11.6 1.6A3.3 3.3 0 0 0 7 18.5z"/><path d="M12 10.5v5M9.8 12.7l2.2-2.2 2.2 2.2"/>',
+    gear: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
+    grip: '<circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/>',
+    mail: '<rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3.5 7l8.5 6 8.5-6"/>',
+    pencil: '<path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    refresh: '<path d="M20 11a8 8 0 0 0-14.7-4.3L4 8.5M4 13a8 8 0 0 0 14.7 4.3l1.3-1.8"/><path d="M4 4v4.5h4.5M20 20v-4.5h-4.5"/>',
+    search: '<circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.4-4.4"/>',
+    share: '<circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1"/>',
+    trash: '<path d="M4 7h16M10 11v6M14 11v6M5.5 7l1 12.5a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5l1-12.5M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7"/>',
+    undo: '<path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>',
+    user: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
+    'wifi-off': '<path d="M3 3l18 18M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 4.2-2.4M14.8 10.5A10 10 0 0 1 19 12.9M2 9a15 15 0 0 1 4.1-2.6M10.7 5.1A15 15 0 0 1 22 9"/><circle cx="12" cy="20" r="0.6"/>',
+    x: '<path d="M6 6l12 12M18 6L6 18"/>'
+};
+const registry = new Map(Object.entries(baseIcons));
+/**
+ * Add (or replace) icons. Values are the inner SVG markup for a 24x24 viewBox, stroke-based.
+ * Call once at startup, before anything renders them.
+ */
+export function registerIcons(icons) {
+    for (const [name, markup] of Object.entries(icons))
+        registry.set(name, markup);
+}
+/** The SVG markup for an icon, or '' when the name isn't registered. */
+export function iconMarkup(name) {
+    return registry.get(name) ?? '';
+}
+export function hasIcon(name) {
+    return registry.has(name);
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { default as AppHeader } from './AppHeader.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as FatalError } from './FatalError.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Leaderboards } from './Leaderboards.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as SortableTable } from './SortableTable.svelte';
+export { default as Splash } from './Splash.svelte';
+export { baseIcons, hasIcon, iconMarkup, registerIcons, type BaseIconName, type IconName } from './icons.js';
+export { sortRows, type Leaderboard, type SortableColumn } from './types.js';

package/dist/index.js

@@ -0,0 +1,13 @@
+export { default as AppHeader } from './AppHeader.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as FatalError } from './FatalError.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Leaderboards } from './Leaderboards.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as SortableTable } from './SortableTable.svelte';
+export { default as Splash } from './Splash.svelte';
+export { baseIcons, hasIcon, iconMarkup, registerIcons } from './icons.js';
+export { sortRows } from './types.js';

package/dist/palettes/blue.css

@@ -0,0 +1,32 @@
+/* Blue palette. theme.css already defaults to it; import this to be explicit. */
+:root {
+	--bg: #f3f5f8;
+	--surface-2: #edf0f4;
+	--surface-hover: #e6eaf0;
+	--text: #1b1f26;
+	--muted: #646c78;
+	--border: #dfe3ea;
+	--border-strong: #c3c9d3;
+	--accent: #1f5fa8;
+	--accent-strong: #184c88;
+	--accent-text: #1d58a0;
+	--accent-soft: #dbe7f6;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #111418;
+		--surface: #1a1e24;
+		--surface-2: #21262d;
+		--surface-hover: #282e36;
+		--text: #e6e9ee;
+		--muted: #98a1ad;
+		--border: #2a3038;
+		--border-strong: #434b56;
+		--accent: #4b8ad6;
+		--accent-strong: #62a0e8;
+		--accent-text: #7fb2ef;
+		--accent-soft: #1d2c40;
+		--on-accent: #0b1422;
+	}
+}

package/dist/palettes/green.css

@@ -0,0 +1,32 @@
+/* Green palette. Import after theme.css. */
+:root {
+	--bg: #f4f5f2;
+	--surface-2: #eef0ec;
+	--surface-hover: #e9ece6;
+	--text: #1d211e;
+	--muted: #69706a;
+	--border: #e1e4de;
+	--border-strong: #c5cac3;
+	--accent: #2f6f4f;
+	--accent-strong: #255a40;
+	--accent-text: #2a6447;
+	--accent-soft: #dcebe2;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #121513;
+		--surface: #1c201d;
+		--surface-2: #232825;
+		--surface-hover: #2a302c;
+		--text: #e7ebe7;
+		--muted: #9aa39c;
+		--border: #2c322e;
+		--border-strong: #444c46;
+		--accent: #4f9a73;
+		--accent-strong: #5fae85;
+		--accent-text: #7cc59e;
+		--accent-soft: #23382c;
+		--on-accent: #0d1a12;
+	}
+}