@r2digisolutions/components 0.1.5 → 0.1.7

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.svelte

@@ -0,0 +1,412 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import Text from '../../atoms/Text/Text.svelte';
+	import Divider from '../../atoms/Divider/Divider.svelte';
+	import ColorSwatch from '../../atoms/ColorSwatch/ColorSwatch.svelte';
+	import Toggle from '../../atoms/Toggle/Toggle.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Card from '../Card/Card.svelte';
+	import Select from '../Select/Select.svelte';
+	import ColorPicker from '../ColorPicker/ColorPicker.svelte';
+	import EmptyState from '../EmptyState/EmptyState.svelte';
+	import type {
+		ConditionalFormatRule,
+		FormatCondition,
+		FormatTarget
+	} from '../../organisms/DataGrid/types.js';
+	import ArrowUp from '@lucide/svelte/icons/arrow-up';
+	import ArrowDown from '@lucide/svelte/icons/arrow-down';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Palette from '@lucide/svelte/icons/palette';
+
+	interface ColumnOption {
+		id: string;
+		label: string;
+	}
+
+	interface ConditionalFormatPanelProps {
+		rules?: ConditionalFormatRule[];
+		columns?: ColumnOption[];
+		class?: string;
+		onchange?: (rules: ConditionalFormatRule[]) => void;
+	}
+
+	let {
+		rules = $bindable<ConditionalFormatRule[]>([]),
+		columns = [],
+		class: className = '',
+		onchange
+	}: ConditionalFormatPanelProps = $props();
+
+	let editingId = $state<string | null>(null);
+	let draftName = $state('');
+	let draftTarget = $state<string>('row');
+	let draftColumnId = $state('');
+	let draftOp = $state<string>('eq');
+	let draftValue = $state('');
+	let draftMin = $state('0');
+	let draftMax = $state('100');
+	let draftBg = $state('#fef3c7');
+	let draftFg = $state('#92400e');
+
+	const isEditing = $derived(editingId !== null);
+
+	const targetOptions = [
+		{ value: 'row', label: 'Entire row' },
+		{ value: 'cell', label: 'Cell only' }
+	];
+
+	const ops = [
+		{ value: 'eq', label: 'Equals' },
+		{ value: 'neq', label: 'Not equals' },
+		{ value: 'gt', label: 'Greater than' },
+		{ value: 'gte', label: '≥ Greater or equal' },
+		{ value: 'lt', label: 'Less than' },
+		{ value: 'lte', label: '≤ Less or equal' },
+		{ value: 'contains', label: 'Contains' },
+		{ value: 'startsWith', label: 'Starts with' },
+		{ value: 'empty', label: 'Is empty' },
+		{ value: 'notEmpty', label: 'Is not empty' },
+		{ value: 'between', label: 'Between' }
+	];
+
+	const columnOptions = $derived(columns.map((c) => ({ value: c.id, label: c.label })));
+
+	const formatSwatches = [
+		'#fef3c7',
+		'#92400e',
+		'#fee2e2',
+		'#991b1b',
+		'#dcfce7',
+		'#166534',
+		'#dbeafe',
+		'#1e40af',
+		'#f3e8ff',
+		'#6b21a8',
+		'#f1f5f9',
+		'#0f172a'
+	];
+
+	$effect(() => {
+		if (!draftColumnId && columns[0]) draftColumnId = columns[0].id;
+	});
+
+	function emit(next: ConditionalFormatRule[]) {
+		rules = next;
+		onchange?.(next);
+	}
+
+	function buildWhen(): FormatCondition | null {
+		const columnId = draftColumnId || columns[0]?.id;
+		if (!columnId) return null;
+		const op = draftOp as FormatCondition['op'];
+		if (op === 'empty' || op === 'notEmpty') return { op, columnId };
+		if (op === 'between') {
+			return { op: 'between', columnId, min: Number(draftMin), max: Number(draftMax) };
+		}
+		if (op === 'contains' || op === 'startsWith') {
+			return { op, columnId, value: draftValue };
+		}
+		const num = Number(draftValue);
+		const value =
+			draftValue !== '' && !Number.isNaN(num) && String(num) === draftValue.trim()
+				? num
+				: draftValue;
+		return { op: op as 'eq' | 'neq' | 'gt' | 'gte' | 'lt' | 'lte', columnId, value };
+	}
+
+	function resetDraft() {
+		editingId = null;
+		draftName = '';
+		draftTarget = 'row';
+		draftOp = 'eq';
+		draftValue = '';
+		draftMin = '0';
+		draftMax = '100';
+		draftBg = '#fef3c7';
+		draftFg = '#92400e';
+		draftColumnId = columns[0]?.id ?? '';
+	}
+
+	function loadRule(rule: ConditionalFormatRule) {
+		editingId = rule.id;
+		draftName = rule.name ?? '';
+		draftTarget = rule.target;
+		draftBg = rule.style.background ?? '#fef3c7';
+		draftFg = rule.style.color ?? '#92400e';
+		const w = rule.when;
+		draftColumnId = w.columnId;
+		draftOp = w.op;
+		draftValue = '';
+		draftMin = '0';
+		draftMax = '100';
+		if (w.op === 'between') {
+			draftMin = String(w.min);
+			draftMax = String(w.max);
+		} else if (w.op !== 'empty' && w.op !== 'notEmpty' && 'value' in w) {
+			draftValue = String(w.value);
+		}
+	}
+
+	function saveRule() {
+		const when = buildWhen();
+		if (!when) return;
+		const target = draftTarget as FormatTarget;
+		const style = { background: draftBg, color: draftFg };
+
+		if (editingId) {
+			emit(
+				rules.map((r) =>
+					r.id === editingId
+						? {
+								...r,
+								name: draftName || undefined,
+								target,
+								columnId: target === 'cell' ? when.columnId : undefined,
+								when,
+								style: { ...r.style, ...style }
+							}
+						: r
+				)
+			);
+			resetDraft();
+			return;
+		}
+
+		const maxPriority = rules.reduce((m, r) => Math.max(m, r.priority), 0);
+		const rule: ConditionalFormatRule = {
+			id: `rule-${Math.random().toString(36).slice(2, 9)}`,
+			name: draftName || undefined,
+			enabled: true,
+			target,
+			columnId: target === 'cell' ? when.columnId : undefined,
+			when,
+			style,
+			priority: maxPriority + 1
+		};
+		emit([...rules, rule]);
+		resetDraft();
+	}
+
+	function setEnabled(id: string, enabled: boolean) {
+		emit(rules.map((r) => (r.id === id ? { ...r, enabled } : r)));
+	}
+
+	function remove(id: string) {
+		if (editingId === id) resetDraft();
+		emit(rules.filter((r) => r.id !== id));
+	}
+
+	function move(id: string, dir: -1 | 1) {
+		const idx = rules.findIndex((r) => r.id === id);
+		if (idx < 0) return;
+		const next = [...rules];
+		const swap = idx + dir;
+		if (swap < 0 || swap >= next.length) return;
+		[next[idx], next[swap]] = [next[swap], next[idx]];
+		emit(next.map((r, i) => ({ ...r, priority: i + 1 })));
+	}
+
+	function describe(rule: ConditionalFormatRule): string {
+		const w = rule.when;
+		const col = columns.find((c) => c.id === w.columnId)?.label ?? w.columnId;
+		if (w.op === 'empty') return `${col} is empty`;
+		if (w.op === 'notEmpty') return `${col} is not empty`;
+		if (w.op === 'between') return `${col} between ${w.min}–${w.max}`;
+		if ('value' in w) return `${col} ${w.op} ${String(w.value)}`;
+		return `${col} ${w.op}`;
+	}
+</script>
+
+<Card variant="elevated" padding="md" class={className}>
+	{#snippet header()}
+		<div class="flex items-start justify-between gap-3">
+			<div class="min-w-0 space-y-0.5">
+				<p class="text-sm font-semibold text-primary">Conditional formatting</p>
+				<Text size="xs" tone="muted">Paint rows or cells when a condition matches.</Text>
+			</div>
+			<Badge variant="secondary">{rules.length}</Badge>
+		</div>
+	{/snippet}
+
+	<div class="space-y-3">
+		{#if rules.length === 0}
+			<EmptyState
+				title="No rules yet"
+				description="Add a rule below to highlight matching rows or cells."
+				class="!py-6"
+			>
+				{#snippet icon()}
+					<Palette class="h-6 w-6" strokeWidth={1.75} />
+				{/snippet}
+			</EmptyState>
+		{:else}
+			<ul class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
+				{#each rules as rule (rule.id)}
+					<li
+						class={[
+							'flex items-center gap-3 px-3 py-2.5 transition-opacity',
+							!rule.enabled && 'opacity-55',
+							editingId === rule.id && 'bg-brand-500/5'
+						]}
+					>
+						<span
+							class="h-10 w-1.5 shrink-0 rounded-full"
+							style={`background:${rule.style.background ?? '#94a3b8'}`}
+							aria-hidden="true"
+						></span>
+
+						<div class="min-w-0 flex-1">
+							<div class="flex flex-wrap items-center gap-2">
+								<span class="truncate text-sm font-medium text-primary">
+									{rule.name ?? describe(rule)}
+								</span>
+								<Badge size="sm" variant={rule.target === 'row' ? 'info' : 'primary'}>
+									{rule.target === 'row' ? 'Row' : 'Cell'}
+								</Badge>
+							</div>
+							<div class="mt-1 flex flex-wrap items-center gap-2">
+								<span
+									class="inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium"
+									style={`background-color:${rule.style.background ?? 'transparent'};color:${rule.style.color ?? 'inherit'};font-weight:${rule.style.fontWeight ?? 'medium'}`}
+								>
+									Aa preview
+								</span>
+								<Text as="span" size="xs" tone="muted">{describe(rule)}</Text>
+							</div>
+						</div>
+
+						<div class="flex shrink-0 items-center gap-1">
+							<Toggle
+								size="sm"
+								checked={rule.enabled}
+								label=""
+								onchange={(checked) => setEnabled(rule.id, checked)}
+							/>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Edit rule"
+								onclick={() => loadRule(rule)}
+							>
+								<Pencil class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Move up"
+								disabled={rules[0]?.id === rule.id}
+								onclick={() => move(rule.id, -1)}
+							>
+								<ArrowUp class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Move down"
+								disabled={rules.at(-1)?.id === rule.id}
+								onclick={() => move(rule.id, 1)}
+							>
+								<ArrowDown class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Delete rule"
+								onclick={() => remove(rule.id)}
+							>
+								<Trash2 class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	{#snippet footer()}
+		<div class="space-y-4">
+			<Divider label={isEditing ? 'Edit rule' : 'New rule'} />
+
+			<div class="grid gap-3 sm:grid-cols-2">
+				<Input
+					label="Name"
+					placeholder="Optional"
+					size="sm"
+					bind:value={draftName}
+				/>
+				<Select
+					label="Target"
+					size="sm"
+					options={targetOptions}
+					bind:value={draftTarget}
+				/>
+				<Select
+					label="Column"
+					size="sm"
+					options={columnOptions}
+					bind:value={draftColumnId}
+					placeholder="Select column"
+				/>
+				<Select
+					label="Operator"
+					size="sm"
+					options={ops}
+					bind:value={draftOp}
+				/>
+				{#if draftOp === 'between'}
+					<Input label="Min" size="sm" type="number" bind:value={draftMin} />
+					<Input label="Max" size="sm" type="number" bind:value={draftMax} />
+				{:else if draftOp !== 'empty' && draftOp !== 'notEmpty'}
+					<div class="sm:col-span-2">
+						<Input
+							label="Value"
+							size="sm"
+							placeholder="Compare value"
+							bind:value={draftValue}
+						/>
+					</div>
+				{/if}
+			</div>
+
+			<div class="grid gap-3 sm:grid-cols-2">
+				<ColorPicker
+					label="Background"
+					bind:value={draftBg}
+					swatches={formatSwatches}
+					format="hex"
+				/>
+				<ColorPicker
+					label="Text"
+					bind:value={draftFg}
+					swatches={formatSwatches}
+					format="hex"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between gap-3">
+				<div class="flex items-center gap-2">
+					<ColorSwatch color={draftBg} size="sm" label="Background preview" />
+					<ColorSwatch color={draftFg} size="sm" label="Text preview" />
+					<span
+						class="rounded-md px-2 py-1 text-xs font-medium"
+						style={`background-color:${draftBg};color:${draftFg}`}
+					>
+						Preview
+					</span>
+				</div>
+				<div class="flex items-center gap-2">
+					{#if isEditing}
+						<Button size="sm" variant="ghost" onclick={resetDraft}>Cancel</Button>
+					{/if}
+					<Button size="sm" variant="primary" onclick={saveRule}>
+						{isEditing ? 'Update rule' : 'Add rule'}
+					</Button>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</Card>

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

@@ -0,0 +1,14 @@
+import type { ConditionalFormatRule } from '../../organisms/DataGrid/types.js';
+interface ColumnOption {
+    id: string;
+    label: string;
+}
+interface ConditionalFormatPanelProps {
+    rules?: ConditionalFormatRule[];
+    columns?: ColumnOption[];
+    class?: string;
+    onchange?: (rules: ConditionalFormatRule[]) => void;
+}
+declare const ConditionalFormatPanel: import("svelte").Component<ConditionalFormatPanelProps, {}, "rules">;
+type ConditionalFormatPanel = ReturnType<typeof ConditionalFormatPanel>;
+export default ConditionalFormatPanel;

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanelStory.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ConditionalFormatPanel from './ConditionalFormatPanel.svelte';
+	import type { ConditionalFormatRule } from '../../organisms/DataGrid/types.js';
+
+	let rules = $state<ConditionalFormatRule[]>([
+		{
+			id: 'r1',
+			name: 'Overdue',
+			enabled: true,
+			target: 'row',
+			when: { op: 'eq', columnId: 'status', value: 'overdue' },
+			style: { background: '#fee2e2', color: '#991b1b' },
+			priority: 1
+		}
+	]);
+</script>
+
+<div class="max-w-lg">
+	<ConditionalFormatPanel
+		bind:rules
+		columns={[
+			{ id: 'status', label: 'Status' },
+			{ id: 'amount', label: 'Amount' },
+			{ id: 'name', label: 'Name' }
+		]}
+	/>
+</div>

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanelStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ConditionalFormatPanelStory: import("svelte").Component<Record<string, never>, {}, "">;
+type ConditionalFormatPanelStory = ReturnType<typeof ConditionalFormatPanelStory>;
+export default ConditionalFormatPanelStory;

package/dist/components/molecules/ContextMenu/ContextMenu.svelte

@@ -10,9 +10,17 @@
 		shortcut?: string;
 	}
 
+	export interface ContextMenuAnchor {
+		x: number;
+		y: number;
+	}
+
 	interface ContextMenuProps {
 		items?: ContextMenuItem[];
 		open?: boolean;
+		/** Screen coordinates for the menu (clientX / clientY). */
+		anchor?: ContextMenuAnchor | null;
+		class?: string;
 		children?: Snippet;
 		onselect?: (id: string, item: ContextMenuItem) => void;
 	}
@@ -20,6 +28,8 @@
 	let {
 		items = [],
 		open = $bindable(false),
+		anchor = $bindable<ContextMenuAnchor | null>(null),
+		class: className = '',
 		children,
 		onselect
 	}: ContextMenuProps = $props();
@@ -27,18 +37,17 @@
 	let menuX = $state(0);
 	let menuY = $state(0);
 	let menuEl = $state<HTMLDivElement | null>(null);
-	let containerEl = $state<HTMLDivElement | null>(null);
 	let highlighted = $state(-1);
+	/** Ignore the click/pointer that browsers fire right after `contextmenu`. */
+	let suppressOutsideUntil = $state(0);
 
 	const enabledIndexes = $derived(
 		items.map((item, i) => (item.separator || item.disabled ? -1 : i)).filter((i) => i !== -1)
 	);
 
-	function openAt(x: number, y: number) {
-		open = true;
-		highlighted = -1;
-
-		// Defer to measure menu dimensions after render
+	function placeMenu(x: number, y: number) {
+		menuX = x;
+		menuY = y;
 		requestAnimationFrame(() => {
 			if (!menuEl) return;
 			const vw = window.innerWidth;
@@ -47,14 +56,19 @@
 			menuX = x + mw > vw - 8 ? Math.max(8, x - mw) : x;
 			menuY = y + mh > vh - 8 ? Math.max(8, y - mh) : y;
 		});
+	}
 
-		// Optimistically position (will be corrected by rAF)
-		menuX = x;
-		menuY = y;
+	function openAt(x: number, y: number) {
+		anchor = { x, y };
+		open = true;
+		highlighted = -1;
+		suppressOutsideUntil = performance.now() + 500;
+		placeMenu(x, y);
 	}
 
 	function close() {
 		open = false;
+		anchor = null;
 		highlighted = -1;
 	}
 
@@ -66,12 +80,27 @@
 
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
+		event.stopPropagation();
 		openAt(event.clientX, event.clientY);
 	}
 
+	function isOutsideEvent(event: Event) {
+		if (!open) return false;
+		if (performance.now() < suppressOutsideUntil) return false;
+		const target = event.target as Node | null;
+		if (menuEl && target && menuEl.contains(target)) return false;
+		return true;
+	}
+
+	function handleOutsidePointer(event: PointerEvent) {
+		if (event.button === 2) return;
+		if (!isOutsideEvent(event)) return;
+		close();
+	}
+
 	function handleOutsideClick(event: MouseEvent) {
-		if (!open) return;
-		if (menuEl && menuEl.contains(event.target as Node)) return;
+		if (event.button === 2) return;
+		if (!isOutsideEvent(event)) return;
 		close();
 	}
 
@@ -109,16 +138,32 @@
 			highlighted = enabledIndexes[next];
 		}
 	}
+
+	/** Render menu in document.body so overflow/transform ancestors cannot clip it. */
+	function portal(node: HTMLElement) {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				node.remove();
+			}
+		};
+	}
+
+	$effect(() => {
+		if (!open || !anchor) return;
+		suppressOutsideUntil = performance.now() + 500;
+		placeMenu(anchor.x, anchor.y);
+	});
 </script>
 
-<svelte:window onclick={handleOutsideClick} onkeydown={handleKeydown} />
+<svelte:window
+	onpointerdown={handleOutsidePointer}
+	onclick={handleOutsideClick}
+	onkeydown={handleKeydown}
+/>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	bind:this={containerEl}
-	class="contents"
-	oncontextmenu={handleContextMenu}
->
+<div class={['h-full min-h-0 w-full', className]} oncontextmenu={handleContextMenu}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -126,12 +171,13 @@
 
 {#if open}
 	<div
+		use:portal
 		bind:this={menuEl}
 		role="menu"
 		tabindex={-1}
 		aria-label="Context menu"
 		style="position:fixed;top:{menuY}px;left:{menuX}px;z-index:9999;"
-		class="min-w-44 rounded-xl border border-border bg-surface-elevated p-1.5 shadow-xl outline-none animate-in fade-in zoom-in-95 duration-100"
+		class="min-w-44 rounded-xl border border-border bg-surface-elevated p-1.5 shadow-xl outline-none"
 	>
 		{#each items as item, index (item.id)}
 			{#if item.separator}
@@ -144,8 +190,12 @@
 					tabindex={-1}
 					aria-disabled={item.disabled || undefined}
 					onclick={() => selectItem(item)}
-					onpointerenter={() => { if (!item.disabled) highlighted = index; }}
-					onpointerleave={() => { highlighted = -1; }}
+					onpointerenter={() => {
+						if (!item.disabled) highlighted = index;
+					}}
+					onpointerleave={() => {
+						highlighted = -1;
+					}}
 					class={[
 						'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors',
 						item.disabled && 'cursor-not-allowed opacity-40',
@@ -155,7 +205,9 @@
 				>
 					<span class="truncate">{item.label}</span>
 					{#if item.shortcut}
-						<kbd class="shrink-0 rounded border border-border bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-secondary">
+						<kbd
+							class="shrink-0 rounded border border-border bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] text-secondary"
+						>
 							{item.shortcut}
 						</kbd>
 					{/if}

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

@@ -7,12 +7,19 @@ export interface ContextMenuItem {
     separator?: boolean;
     shortcut?: string;
 }
+export interface ContextMenuAnchor {
+    x: number;
+    y: number;
+}
 interface ContextMenuProps {
     items?: ContextMenuItem[];
     open?: boolean;
+    /** Screen coordinates for the menu (clientX / clientY). */
+    anchor?: ContextMenuAnchor | null;
+    class?: string;
     children?: Snippet;
     onselect?: (id: string, item: ContextMenuItem) => void;
 }
-declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open">;
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open" | "anchor">;
 type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

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

@@ -25,6 +25,6 @@ interface DateTimePickerProps {
         value: string;
     }) => void;
 }
-declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "value" | "time" | "date" | "open">;
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "date" | "value" | "time" | "open">;
 type DateTimePicker = ReturnType<typeof DateTimePicker>;
 export default DateTimePicker;

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

@@ -18,6 +18,6 @@ interface FormDateTimePickerProps {
         value: string;
     }) => void;
 }
-declare const FormDateTimePicker: import("svelte").Component<FormDateTimePickerProps, {}, "value" | "time" | "date">;
+declare const FormDateTimePicker: import("svelte").Component<FormDateTimePickerProps, {}, "date" | "value" | "time">;
 type FormDateTimePicker = ReturnType<typeof FormDateTimePicker>;
 export default FormDateTimePicker;

package/dist/components/molecules/Gauge/Gauge.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "grid" | "storage" | "ring" | "score" | "horseshoe" | "cpu" | "health" | "battery";
+        example?: "storage" | "grid" | "ring" | "score" | "horseshoe" | "cpu" | "health" | "battery";
         value?: number;
         min?: number;
         max?: number;