@dorsk/tsumikit 0.23.0 → 0.25.0

package/dist/components/molecules/Pagination.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	// Page navigation in two flavours: page mode (`page` + `pageCount`) or
+	// offset mode (`offset` + `limit` + `total`, page/pageCount derived and
+	// `offset` written back). Numbered buttons collapse to prev / "3 / 12" /
+	// next when the container is narrower than 24rem.
+	import Text from '../atoms/Text.svelte';
+	import IconButton from './IconButton.svelte';
+
+	let {
+		page = $bindable(1),
+		pageCount,
+		offset = $bindable(),
+		limit,
+		total,
+		onchange,
+		siblings = 1,
+		showEdges = true,
+		showRange = false,
+		size = 'md',
+		label = 'Pagination',
+		class: klass = ''
+	}: {
+		/** 1-based current page. */
+		page?: number;
+		pageCount?: number;
+		/** Offset mode: 0-based index of the first item; needs `limit` + `total`. */
+		offset?: number;
+		limit?: number;
+		total?: number;
+		onchange?: (page: number) => void;
+		/** Numbered pages shown on each side of the current one. */
+		siblings?: number;
+		/** Always show the first and last page. */
+		showEdges?: boolean;
+		/** Show "1–20 / 412" (offset mode) or "3 / 12" next to the buttons. */
+		showRange?: boolean;
+		size?: 'sm' | 'md';
+		label?: string;
+		class?: string;
+	} = $props();
+
+	const offsetMode = $derived(offset !== undefined && limit !== undefined && total !== undefined);
+	const count = $derived(
+		Math.max(
+			1,
+			offsetMode ? Math.ceil((total as number) / Math.max(1, limit as number)) : (pageCount ?? 1)
+		)
+	);
+	const current = $derived(
+		Math.min(
+			count,
+			Math.max(
+				1,
+				offsetMode ? Math.floor((offset as number) / Math.max(1, limit as number)) + 1 : page
+			)
+		)
+	);
+
+	const ELLIPSIS = -1;
+	const items = $derived.by((): number[] => {
+		const out: number[] = [];
+		const lo = Math.max(1, current - siblings);
+		const hi = Math.min(count, current + siblings);
+		if (showEdges && lo > 1) {
+			out.push(1);
+			if (lo > 2) out.push(ELLIPSIS);
+		}
+		for (let p = lo; p <= hi; p++) out.push(p);
+		if (showEdges && hi < count) {
+			if (hi < count - 1) out.push(ELLIPSIS);
+			out.push(count);
+		}
+		return out;
+	});
+
+	const rangeText = $derived.by(() => {
+		if (offsetMode) {
+			const t = total as number;
+			const from = t === 0 ? 0 : (current - 1) * (limit as number) + 1;
+			const to = Math.min(t, current * (limit as number));
+			return `${from}–${to} / ${t}`;
+		}
+		return `${current} / ${count}`;
+	});
+
+	function go(p: number) {
+		const next = Math.min(count, Math.max(1, p));
+		if (next === current) return;
+		page = next;
+		if (offsetMode) offset = (next - 1) * (limit as number);
+		onchange?.(next);
+	}
+</script>
+
+<nav
+	data-tsu="Pagination"
+	class="pagination {klass}"
+	class:pagination-sm={size === 'sm'}
+	aria-label={label}
+>
+	<IconButton
+		icon="chevron-left"
+		label="Previous page"
+		box={size === 'sm' ? 'sm' : 'md'}
+		disabled={current <= 1}
+		onclick={() => go(current - 1)}
+	/>
+	<ol class="pages">
+		{#each items as item, i (item === ELLIPSIS ? `e${i}` : item)}
+			<li>
+				{#if item === ELLIPSIS}
+					<span class="ellipsis" aria-hidden="true">…</span>
+				{:else}
+					<button
+						type="button"
+						class="page"
+						class:on={item === current}
+						aria-current={item === current ? 'page' : undefined}
+						aria-label="Page {item}"
+						onclick={() => go(item)}
+					>
+						{item}
+					</button>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+	<Text class="compact" size="sm" numeric tone="muted" aria-live="polite">{current} / {count}</Text>
+	<IconButton
+		icon="chevron-right"
+		label="Next page"
+		box={size === 'sm' ? 'sm' : 'md'}
+		disabled={current >= count}
+		onclick={() => go(current + 1)}
+	/>
+	{#if showRange}
+		<Text class="range" size="sm" numeric tone="muted">{rangeText}</Text>
+	{/if}
+</nav>
+
+<style>
+	.pagination {
+		container-type: inline-size;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		flex-wrap: wrap;
+	}
+	.pages {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.page {
+		min-width: var(--box-md);
+		height: var(--box-md);
+		padding: 0 var(--sp-2);
+		border: 1px solid transparent;
+		border-radius: 999px;
+		background: transparent;
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+		transition:
+			background 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.page:hover {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+	}
+	.page.on {
+		background: color-mix(in srgb, var(--accent) 16%, transparent);
+		border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+		color: var(--accent);
+		font-weight: var(--fw-semibold);
+	}
+	.pagination-sm .page {
+		min-width: var(--box-sm);
+		height: var(--box-sm);
+		font-size: var(--fs-xs);
+	}
+	.ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--box-md);
+		color: var(--text-faint);
+	}
+	.pagination :global(.compact) {
+		display: none;
+		padding: 0 var(--sp-2);
+	}
+	.pagination :global(.range) {
+		margin-left: var(--sp-2);
+	}
+	@container (max-width: 24rem) {
+		.pages {
+			display: none;
+		}
+		.pagination :global(.compact) {
+			display: inline;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+type $$ComponentProps = {
+    /** 1-based current page. */
+    page?: number;
+    pageCount?: number;
+    /** Offset mode: 0-based index of the first item; needs `limit` + `total`. */
+    offset?: number;
+    limit?: number;
+    total?: number;
+    onchange?: (page: number) => void;
+    /** Numbered pages shown on each side of the current one. */
+    siblings?: number;
+    /** Always show the first and last page. */
+    showEdges?: boolean;
+    /** Show "1–20 / 412" (offset mode) or "3 / 12" next to the buttons. */
+    showRange?: boolean;
+    size?: 'sm' | 'md';
+    label?: string;
+    class?: string;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page" | "offset">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/molecules/SectionHeader.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+	// Section / group header: heading + optional subtitle, icon, count, hue
+	// swatch and right-aligned actions on one wrapping row. `divider` underlines
+	// it, `sticky` pins it under the app header and publishes its height as
+	// `--section-header-h` on the parent so sibling sticky content can offset
+	// itself. `collapsible` turns the title into a disclosure button that
+	// toggles the `children` block rendered beneath.
+	import type { Snippet } from 'svelte';
+	import Heading from '../atoms/Heading.svelte';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Text from '../atoms/Text.svelte';
+
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	let {
+		title,
+		label,
+		level = 2,
+		size,
+		subtitle,
+		icon,
+		count,
+		tone = 'neutral',
+		hue,
+		uppercase = false,
+		divider = false,
+		sticky = false,
+		collapsible = false,
+		open = $bindable(true),
+		class: klass = '',
+		actions,
+		children,
+		...rest
+	}: {
+		title?: string;
+		/** Alias for `title`. */
+		label?: string;
+		level?: 1 | 2 | 3 | 4;
+		size?: Size;
+		subtitle?: string;
+		icon?: IconName;
+		count?: number | string;
+		tone?: Tone;
+		/** Hue (0–360) rendered as a small swatch chip before the title. */
+		hue?: number;
+		uppercase?: boolean;
+		divider?: boolean;
+		sticky?: boolean;
+		collapsible?: boolean;
+		open?: boolean;
+		class?: string;
+		actions?: Snippet;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const text = $derived(title ?? label ?? '');
+	const id = $props.id();
+	const panelId = `${id}-panel`;
+	let el = $state<HTMLElement>();
+	let height = $state(0);
+
+	$effect(() => {
+		const parent = el?.parentElement;
+		if (!parent) return;
+		if (sticky) parent.style.setProperty('--section-header-h', `${height}px`);
+		else parent.style.removeProperty('--section-header-h');
+		return () => parent.style.removeProperty('--section-header-h');
+	});
+</script>
+
+<div
+	bind:this={el}
+	bind:offsetHeight={height}
+	data-tsu="SectionHeader"
+	class="section-header sh-{tone} {klass}"
+	class:sh-divider={divider}
+	class:sh-sticky={sticky}
+	class:sh-uppercase={uppercase}
+	class:sh-open={open}
+	{...rest}
+>
+	<div class="sh-row">
+		{#if collapsible}
+			<button
+				type="button"
+				class="sh-toggle"
+				aria-expanded={open}
+				aria-controls={panelId}
+				onclick={() => (open = !open)}
+			>
+				<Icon name="chevron-right" class="sh-chevron" />
+				{@render head()}
+			</button>
+		{:else}
+			{@render head()}
+		{/if}
+		{#if subtitle}
+			<Text variant="caption" class="sh-subtitle">{subtitle}</Text>
+		{/if}
+		{#if actions}
+			<div class="sh-actions">{@render actions()}</div>
+		{/if}
+	</div>
+	{#if children && (!collapsible || open)}
+		<div class="sh-panel" id={panelId}>{@render children()}</div>
+	{/if}
+</div>
+
+{#snippet head()}
+	{#if hue !== undefined}
+		<span class="sh-swatch" style:--sh-hue={hue} aria-hidden="true"></span>
+	{/if}
+	{#if icon}
+		<span class="sh-icon" aria-hidden="true"><Icon name={icon} /></span>
+	{/if}
+	<Heading {level} {size} class="sh-title">{text}</Heading>
+	{#if count !== undefined}
+		<Text tone="faint" weight="normal" numeric class="sh-count">{count}</Text>
+	{/if}
+{/snippet}
+
+<style>
+	.section-header {
+		--sh-tone: var(--text);
+	}
+	.sh-ok {
+		--sh-tone: var(--ok);
+	}
+	.sh-warn {
+		--sh-tone: var(--warn);
+	}
+	.sh-danger {
+		--sh-tone: var(--danger);
+	}
+	.sh-info {
+		--sh-tone: var(--info);
+	}
+	.sh-row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		flex-wrap: wrap;
+		min-width: 0;
+	}
+	.sh-divider > .sh-row {
+		padding-bottom: var(--sp-2);
+		border-bottom: 1px solid var(--border);
+	}
+	.sh-sticky {
+		position: sticky;
+		top: var(--sticky-offset, var(--header-h, 0));
+		z-index: 1;
+		background: var(--section-header-bg, var(--bg));
+	}
+	.section-header :global(.sh-title) {
+		color: var(--sh-tone);
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.sh-uppercase :global(.sh-title) {
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	.sh-ok.sh-uppercase :global(.sh-title),
+	.sh-warn.sh-uppercase :global(.sh-title),
+	.sh-danger.sh-uppercase :global(.sh-title),
+	.sh-info.sh-uppercase :global(.sh-title) {
+		color: var(--sh-tone);
+	}
+	.sh-icon {
+		display: inline-flex;
+		flex: none;
+		color: var(--sh-tone);
+		line-height: 1;
+	}
+	.sh-swatch {
+		flex: none;
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: var(--r-sm);
+		background: hsl(var(--sh-hue) 70% 55%);
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent);
+	}
+	.section-header :global(.sh-subtitle) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.sh-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--sp-2);
+		margin-inline-start: auto;
+	}
+	.sh-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		font: inherit;
+		color: inherit;
+		text-align: start;
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.sh-toggle:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.section-header :global(.sh-chevron) {
+		flex: none;
+		color: var(--text-muted);
+		transition: transform 0.15s var(--ease);
+	}
+	.sh-open :global(.sh-chevron) {
+		transform: rotate(90deg);
+	}
+	.sh-panel {
+		margin-top: var(--sp-3);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.section-header :global(.sh-chevron) {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/molecules/SectionHeader.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from '../atoms/Icon.svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type $$ComponentProps = {
+    title?: string;
+    /** Alias for `title`. */
+    label?: string;
+    level?: 1 | 2 | 3 | 4;
+    size?: Size;
+    subtitle?: string;
+    icon?: IconName;
+    count?: number | string;
+    tone?: Tone;
+    /** Hue (0–360) rendered as a small swatch chip before the title. */
+    hue?: number;
+    uppercase?: boolean;
+    divider?: boolean;
+    sticky?: boolean;
+    collapsible?: boolean;
+    open?: boolean;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const SectionHeader: import("svelte").Component<$$ComponentProps, {}, "open">;
+type SectionHeader = ReturnType<typeof SectionHeader>;
+export default SectionHeader;

package/dist/components/molecules/ThemePicker.svelte

@@ -1,23 +1,21 @@
 <script lang="ts">
 	// Theme switcher: a compact icon-button hosting a native <select> over the
-	// full theme registry, wired to the global theme store. The native control
-	// gives correct mobile/keyboard behaviour and outside-click handling for free.
-	// The button glyph reflects the active theme's icon.
+	// full theme registry (built-ins + theme.register()), wired to the global
+	// theme store. The native control gives correct mobile/keyboard behaviour and
+	// outside-click handling for free. The button glyph reflects the active theme.
 	import SelectButton from './SelectButton.svelte';
-	import { theme, THEMES } from '../../stores/theme.svelte';
+	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 
 	let { class: klass = '' }: { class?: string } = $props();
 
-	// Split the registry into light/dark sections (TSU-1) so the long list is
-	// scannable. `<optgroup>` keeps native popup/keyboard behaviour for free.
-	const toOption = (t: (typeof THEMES)[number]) => ({
+	const toOption = (t: ThemeDef) => ({
 		value: t.id,
-		label: `${t.icon}  ${t.label}`
+		label: `${t.icon ?? theme.fallbackIcon}  ${t.label}`
 	});
-	const groups = [
-		{ label: '— light', options: THEMES.filter((t) => t.mode === 'light').map(toOption) },
-		{ label: '— dark', options: THEMES.filter((t) => t.mode === 'dark').map(toOption) }
-	];
+	const groups = $derived([
+		{ label: '— light', options: theme.all.filter((t) => t.mode === 'light').map(toOption) },
+		{ label: '— dark', options: theme.all.filter((t) => t.mode === 'dark').map(toOption) }
+	]);
 </script>
 
 <SelectButton
@@ -28,5 +26,5 @@
 	title={`Theme: ${theme.label}`}
 	value={theme.current}
 	{groups}
-	onchange={(v) => theme.set(v as (typeof THEMES)[number]['id'])}
+	onchange={(v) => theme.set(v)}
 />

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
 export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
+export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, type ProgressSegment, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
@@ -25,11 +26,13 @@ export { default as Container } from './components/layouts/Container.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
+export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
@@ -38,12 +41,16 @@ export { default as FileButton } from './components/molecules/FileButton.svelte'
 export { default as FilterInput, type FilterInputContext, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';
+export { default as LoadMore } from './components/molecules/LoadMore.svelte';
 export { default as Menu, type MenuItem } from './components/molecules/Menu.svelte';
 export { default as Metric, default as StatTile, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
+export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
+export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
 export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
+export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
@@ -32,11 +33,13 @@ export { default as Container } from './components/layouts/Container.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
+export { resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
@@ -46,14 +49,18 @@ export { default as FileButton } from './components/molecules/FileButton.svelte'
 export { default as FilterInput, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as KeyValue, } from './components/molecules/KeyValue.svelte';
+export { default as LoadMore } from './components/molecules/LoadMore.svelte';
 export { default as Menu } from './components/molecules/Menu.svelte';
 export { default as Metric, 
 // StatTile is an alias for Metric — same component, dashboard-friendly name.
 default as StatTile, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
+export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
+export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';

package/dist/stores/theme.svelte.d.ts

@@ -145,17 +145,33 @@ export declare const THEMES: readonly [{
 }];
 export type Mode = (typeof THEMES)[number]['id'];
 export type ThemeMode = (typeof THEMES)[number]['mode'];
-type ThemeOption = (typeof THEMES)[number];
+export type ThemeId = Mode | (string & {});
+export interface ThemeDef {
+    id: ThemeId;
+    label: string;
+    mode: ThemeMode;
+    icon?: string;
+    themeColor?: string;
+}
 declare class Theme {
-    current: "light" | "highcontrast" | "gruvboxlight" | "solarizedlight" | "everforestlight" | "rosepinedawn" | "latte" | "nordlight" | "tokyoday" | "kanagawalotus" | "sepia" | "dark" | "colorblind" | "mocha" | "dracula" | "nord" | "tokyonight" | "gruvbox" | "solarized" | "rosepine" | "onedark" | "everforest" | "monokai" | "amoled";
+    current: ThemeId;
+    readonly fallbackIcon = "\u25C8";
+    private registered;
+    private fallback;
+    private saved;
     constructor();
+    get all(): readonly ThemeDef[];
+    has(id: string | null | undefined): id is ThemeId;
+    register(defs: ThemeDef | ThemeDef[]): void;
+    setDefault(id: ThemeId): void;
+    private resolve;
     private apply;
-    get option(): ThemeOption;
+    get option(): ThemeDef;
     get label(): string;
     get icon(): string;
-    get next(): ThemeOption;
+    get next(): ThemeDef;
     toggle(): void;
-    set(mode: Mode): void;
+    set(mode: ThemeId): void;
 }
 export declare const theme: Theme;
 export {};