@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/dist/components/preview/inputs/NumberInput.svelte

@@ -1,21 +1,35 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '../../../utils/debounce';
-	import { Input } from '../../primitives/input';
-	import { Slider } from '../../primitives/slider';
-	import * as InputGroup from '../../primitives/input-group';
-	import { Separator } from '../../primitives/separator';
-	import * as Field from '../../primitives/field';
+	import { debounce } from '../../../utils/debounce.js';
+	import { Input } from '../../primitives/input/index.js';
+	import { Slider } from '../../primitives/slider/index.js';
+	import * as InputGroup from '../../primitives/input-group/index.js';
+	import { Separator } from '../../primitives/separator/index.js';
+	import * as Field from '../../primitives/field/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;
+		/** Id of the field's label, which also names the slider thumb. */
+		labelId?: string;
 		value?: number;
 		config?: NumberWidgetConfig;
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
+	let {
+		inputId,
+		labelId,
+		value = $bindable(),
+		config,
+		onChange,
+		disabled = false
+	}: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	let validationError = $state<string | null>(null);
 
@@ -29,9 +43,9 @@
 
 	function validateNumber(val: number): string | null {
 		if (config?.minimum !== undefined && val < config.minimum)
-			return `Minimum value is ${config.minimum}`;
+			return formatMessage(t.minValue, { min: config.minimum });
 		if (config?.maximum !== undefined && val > config.maximum)
-			return `Maximum value is ${config.maximum}`;
+			return formatMessage(t.maxValue, { max: config.maximum });
 		return null;
 	}
 
@@ -44,11 +58,69 @@
 		}
 	}
 
-	function handleSliderChange(newValue: number) {
+	// bits-ui builds an array of every step and rebuilds a tick object per step on each value
+	// change, so a fine-grained range freezes the drag. Past this many steps the track drives a
+	// coarse proxy scale instead; the number box next to it still sets any exact value.
+	const MAX_TRACK_STEPS = 1000;
+	const FINE_DRAG_FACTOR = 10;
+	const stepCount = $derived((max - min) / step);
+	const useProxyTrack = $derived(
+		step > 0 && Number.isFinite(stepCount) && stepCount > MAX_TRACK_STEPS
+	);
+	const trackMin = $derived(useProxyTrack ? 0 : min);
+	const trackMax = $derived(useProxyTrack ? MAX_TRACK_STEPS : max);
+	const stepPrecision = $derived((String(step).split('.')[1] ?? '').length);
+
+	let dragging = false;
+	let shiftHeld = false;
+	let lastTrack: number | null = null;
+	let fineAnchor: { track: number; value: number } | null = null;
+
+	function snapToStep(v: number): number {
+		const clamped = Math.min(max, Math.max(min, v));
+		if (!(step > 0)) return clamped;
+		const snapped = min + Math.round((clamped - min) / step) * step;
+		return Math.min(max, Number(snapped.toFixed(stepPrecision)));
+	}
+
+	function toTrack(v: number): number {
+		return useProxyTrack ? Math.round(((v - min) / (max - min)) * MAX_TRACK_STEPS) : v;
+	}
+
+	function trackSpanToValue(trackDelta: number): number {
+		return (trackDelta / (trackMax - trackMin)) * (max - min);
+	}
+
+	// bits-ui maps the pointer to an absolute track position, so fine drag works in deltas: the
+	// value moves FINE_DRAG_FACTOR times slower than the pointer from where Shift took effect.
+	function setFromTrack(track: number) {
+		if (max <= min) return;
+		let newValue: number;
+		if (dragging && shiftHeld) {
+			fineAnchor ??= { track: lastTrack ?? track, value: numValue };
+			newValue = snapToStep(
+				fineAnchor.value + trackSpanToValue(track - fineAnchor.track) / FINE_DRAG_FACTOR
+			);
+		} else {
+			fineAnchor = null;
+			newValue = snapToStep(min + trackSpanToValue(track - trackMin));
+		}
+		lastTrack = track;
 		value = newValue;
 		commitSliderDebounced(newValue);
 	}
 
+	function startDrag(e: PointerEvent) {
+		dragging = true;
+		shiftHeld = e.shiftKey;
+		lastTrack = null;
+		fineAnchor = null;
+	}
+
+	function setShift(e: KeyboardEvent) {
+		if (e.key === 'Shift') shiftHeld = e.type === 'keydown';
+	}
+
 	const decimals = $derived(Math.max(0, -Math.floor(Math.log10(step))));
 
 	function commitTypedValue(input: HTMLInputElement) {
@@ -65,6 +137,13 @@
 	}
 </script>
 
+<svelte:window
+	onkeydown={setShift}
+	onkeyup={setShift}
+	onpointerup={() => (dragging = false)}
+	onblur={() => (shiftHeld = dragging = false)}
+/>
+
 {#if config?.renderAsSlider}
 	<!-- Value and track share one box, the height of a number input, so mixed rows line up and
 	     a value can't be read as belonging to the neighbouring slider. -->
@@ -84,14 +163,17 @@
 			}}
 		/>
 		<Separator orientation="vertical" />
-		<div class="px-3.5 min-w-0 flex flex-1 items-center">
+		<div class="px-3.5 min-w-0 flex flex-1 items-center" onpointerdowncapture={startDrag}>
+			<!-- A function binding, not value + onValueChange: when a fine drag leaves the value
+			     unchanged, the thumb must stay put instead of following the pointer. -->
 			<Slider
 				type="single"
-				value={numValue}
-				{min}
-				{max}
-				{step}
-				onValueChange={handleSliderChange}
+				bind:value={() => toTrack(numValue), setFromTrack}
+				min={trackMin}
+				max={trackMax}
+				step={useProxyTrack ? 1 : step}
+				title={t.fineDragHint}
+				thumbLabelledby={labelId}
 				{disabled}
 			/>
 		</div>

package/dist/components/preview/inputs/NumberInput.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
 interface Props {
     inputId: string;
+    /** Id of the field's label, which also names the slider thumb. */
+    labelId?: string;
     value?: number;
     config?: NumberWidgetConfig;
     onChange: (value: SupportedTypes) => void;

package/dist/components/preview/inputs/OptionGlyph.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { GlyphSource } from '../../../schema/option-display.js';
+	import { cn } from '../../../utils.js';
+
+	interface Props {
+		glyph: GlyphSource;
+		class?: string;
+	}
+
+	let { glyph, class: className }: Props = $props();
+</script>
+
+{#if glyph.kind === 'icon'}
+	<!-- Lucide's stroke defaults; the path is bound as an attribute, never parsed as markup. -->
+	<svg
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+		class={cn('size-4 shrink-0', className)}
+	>
+		<path d={glyph.d} />
+	</svg>
+{:else}
+	<img src={glyph.src} alt="" class={cn('size-4 shrink-0 rounded-sm object-cover', className)} />
+{/if}

package/dist/components/preview/inputs/OptionGlyph.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { GlyphSource } from '../../../schema/option-display.js';
+interface Props {
+    glyph: GlyphSource;
+    class?: string;
+}
+declare const OptionGlyph: import("svelte").Component<Props, {}, "">;
+type OptionGlyph = ReturnType<typeof OptionGlyph>;
+export default OptionGlyph;

package/dist/components/preview/inputs/SegmentedInput.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as ToggleGroup from '../../primitives/toggle-group/index.js';
+	import { optionGlyph } from '../../../schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+
+	interface Props {
+		labelId: string;
+		value?: string;
+		config: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { labelId, value, config, assets, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(Object.entries(config.options ?? {}));
+	const hasIcons = $derived(
+		options.some(([name]) => optionGlyph(config.optionMedia?.[name], assets))
+	);
+</script>
+
+<ToggleGroup.Root
+	type="single"
+	variant="outline"
+	spacing={0}
+	size={hasIcons ? 'stacked' : 'default'}
+	class="w-full"
+	aria-labelledby={labelId}
+	value={value ?? ''}
+	onValueChange={(next) => {
+		// A single-select group emits '' when the active item is clicked again; keep the selection.
+		if (next) onChange(next);
+	}}
+	{disabled}
+>
+	{#each options as [name, expr] (name)}
+		{@const glyph = optionGlyph(config.optionMedia?.[name], assets)}
+		<ToggleGroup.Item value={expr ?? name} class="min-w-0 flex-1" title={name}>
+			{#if glyph}<OptionGlyph {glyph} />{/if}
+			<span class="max-w-full truncate">{name}</span>
+		</ToggleGroup.Item>
+	{/each}
+</ToggleGroup.Root>

package/dist/components/preview/inputs/SegmentedInput.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+interface Props {
+    labelId: string;
+    value?: string;
+    config: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
+    onChange: (value: SupportedTypes) => void;
+    disabled?: boolean;
+}
+declare const SegmentedInput: import("svelte").Component<Props, {}, "">;
+type SegmentedInput = ReturnType<typeof SegmentedInput>;
+export default SegmentedInput;

package/dist/components/preview/inputs/TextInput.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { TextWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '../../../utils/debounce';
-	import { Input } from '../../primitives/input';
-	import * as Field from '../../primitives/field';
+	import { debounce } from '../../../utils/debounce.js';
+	import { Input } from '../../primitives/input/index.js';
+	import * as Field from '../../primitives/field/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;
@@ -14,6 +16,9 @@
 
 	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let validationError = $state<string | null>(null);
 	let currentValue = $state(value || '');
 
@@ -21,13 +26,13 @@
 
 	function validateText(val: string): string | null {
 		if (config?.maxLength && val.length > config.maxLength)
-			return `Maximum ${config.maxLength} characters allowed`;
+			return formatMessage(t.maxLength, { max: config.maxLength });
 		if (config?.pattern) {
 			try {
 				if (!new RegExp(config.pattern).test(val))
-					return config.customErrorMessage || 'Invalid format';
+					return config.customErrorMessage || t.invalidFormat;
 			} catch {
-				return 'Invalid validation pattern configured';
+				return t.invalidPattern;
 			}
 		}
 		return null;

package/dist/components/preview/inputs/TileInput.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { optionGlyph } from '../../../schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+
+	interface Props {
+		labelId: string;
+		value?: string;
+		config: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { labelId, value, config, assets, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(
+		Object.entries(config.options ?? {}).map(([name, expr]) => ({ name, value: expr ?? name }))
+	);
+	// With nothing selected the first tile takes focus, so the group is still reachable by Tab.
+	const focusIndex = $derived(
+		Math.max(
+			0,
+			options.findIndex((o) => o.value === value)
+		)
+	);
+
+	let tiles: HTMLButtonElement[] = $state([]);
+
+	function onKeydown(event: KeyboardEvent, index: number) {
+		const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+		if (!step) return;
+		event.preventDefault();
+		const next = (index + step + options.length) % options.length;
+		onChange(options[next].value);
+		tiles[next]?.focus();
+	}
+</script>
+
+<div role="radiogroup" aria-labelledby={labelId} class="gap-2 tile-grid grid">
+	{#each options as option, index (option.name)}
+		{@const glyph = optionGlyph(config.optionMedia?.[option.name], assets)}
+		{@const selected = option.value === value}
+		<button
+			bind:this={tiles[index]}
+			type="button"
+			role="radio"
+			title={option.name}
+			aria-checked={selected}
+			tabindex={index === focusIndex ? 0 : -1}
+			{disabled}
+			onclick={() => onChange(option.value)}
+			onkeydown={(e) => onKeydown(e, index)}
+			class="gap-1.5 p-1.5 min-w-0 flex flex-col rounded-lg border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 {selected
+				? 'border-primary bg-primary/10 ring-1 ring-primary'
+				: 'border-input hover:bg-hover'}"
+		>
+			<span
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted {selected
+					? 'text-foreground'
+					: 'text-muted-foreground'}"
+			>
+				{#if glyph?.kind === 'image'}
+					<OptionGlyph {glyph} class="size-full" />
+				{:else if glyph}
+					<OptionGlyph {glyph} class="size-7" />
+				{:else}
+					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
+				{/if}
+			</span>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
+				{option.name}
+			</span>
+		</button>
+	{/each}
+</div>
+
+<style>
+	/* Two or three tiles a row as the panel narrows; a fixed count shrinks them to unreadable. */
+	.tile-grid {
+		grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
+	}
+</style>

package/dist/components/preview/inputs/TileInput.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+interface Props {
+    labelId: string;
+    value?: string;
+    config: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
+    onChange: (value: SupportedTypes) => void;
+    disabled?: boolean;
+}
+declare const TileInput: import("svelte").Component<Props, {}, "">;
+type TileInput = ReturnType<typeof TileInput>;
+export default TileInput;

package/dist/components/preview/inputs/index.d.ts

@@ -3,5 +3,8 @@ export { default as ChecklistInput } from './ChecklistInput.svelte';
 export { default as ColorInput } from './ColorInput.svelte';
 export { default as DropdownInput } from './DropdownInput.svelte';
 export { default as FileInput } from './FileInput.svelte';
+export { default as GeometryInput } from './GeometryInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
+export { default as SegmentedInput } from './SegmentedInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { default as TileInput } from './TileInput.svelte';

package/dist/components/preview/inputs/index.js

@@ -3,5 +3,8 @@ export { default as ChecklistInput } from './ChecklistInput.svelte';
 export { default as ColorInput } from './ColorInput.svelte';
 export { default as DropdownInput } from './DropdownInput.svelte';
 export { default as FileInput } from './FileInput.svelte';
+export { default as GeometryInput } from './GeometryInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
+export { default as SegmentedInput } from './SegmentedInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { default as TileInput } from './TileInput.svelte';

package/dist/components/primitives/CalculateButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
 	import { Button } from './button';
 	import { Zap, Check, Loader, Play } from '@lucide/svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -11,34 +12,65 @@
 		hasNeverSolved?: boolean;
 		isSolving: boolean;
 		oncalculate: () => void;
+		/** Beside the button, sharing its row: the panel footer's actions menu. */
+		trailing?: Snippet;
 	}
 
-	let { hasPendingChanges, hasNeverSolved = false, isSolving, oncalculate }: Props = $props();
+	let {
+		hasPendingChanges,
+		hasNeverSolved = false,
+		isSolving,
+		oncalculate,
+		trailing
+	}: Props = $props();
+
+	// The label below changes too, but a screen reader doesn't read a label change on a button
+	// that has lost focus, so start and end of a solve go through a live region as well.
+	let announcement = $state('');
+	let wasSolving = false;
+	$effect(() => {
+		const solving = isSolving;
+		untrack(() => {
+			if (solving) announcement = t.solvingEllipsis;
+			else if (wasSolving) announcement = hasPendingChanges ? '' : t.upToDate;
+			wasSolving = solving;
+		});
+	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
-	<Button
-		variant={hasPendingChanges ? 'default' : 'ghost'}
-		size="lg"
-		onclick={() => !isSolving && oncalculate()}
-		disabled={!hasPendingChanges && !isSolving}
-		aria-busy={isSolving}
-		class="gap-2 font-medium w-full transition-all duration-200
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border">
+	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
+	<div class="gap-2 flex">
+		<Button
+			variant={hasPendingChanges ? 'default' : 'ghost'}
+			size="lg"
+			onclick={() => !isSolving && oncalculate()}
+			disabled={!hasPendingChanges && !isSolving}
+			aria-busy={isSolving}
+			class="gap-2 font-medium min-w-0 flex-1 transition-all duration-200
 			{hasPendingChanges && !isSolving ? 'shadow-md' : ''}
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
-	>
-		{#if isSolving}
-			<Loader class="h-4 w-4 animate-spin" />
-			{t.solvingEllipsis}
-		{:else if hasNeverSolved}
-			<Play class="h-4 w-4" />
-			{t.pressToCalculate}
-		{:else if hasPendingChanges}
-			<Zap class="h-4 w-4" />
-			{t.calculate}
-		{:else}
-			<Check class="h-4 w-4" />
-			{t.upToDate}
-		{/if}
-	</Button>
+		>
+			{#if isSolving}
+				<Loader class="h-4 w-4 animate-spin" />
+				{t.solvingEllipsis}
+				<kbd
+					class="px-1 rounded-sm border border-current/30 font-sans text-2xs opacity-70"
+					title={t.solveMessagesEscHint}
+				>
+					Esc
+				</kbd>
+			{:else if hasNeverSolved}
+				<Play class="h-4 w-4" />
+				{t.pressToCalculate}
+			{:else if hasPendingChanges}
+				<Zap class="h-4 w-4" />
+				{t.calculate}
+			{:else}
+				<Check class="h-4 w-4" />
+				{t.upToDate}
+			{/if}
+		</Button>
+		{@render trailing?.()}
+	</div>
 </div>

package/dist/components/primitives/CalculateButton.svelte.d.ts

@@ -1,8 +1,11 @@
+import { type Snippet } from 'svelte';
 interface Props {
     hasPendingChanges: boolean;
     hasNeverSolved?: boolean;
     isSolving: boolean;
     oncalculate: () => void;
+    /** Beside the button, sharing its row: the panel footer's actions menu. */
+    trailing?: Snippet;
 }
 declare const CalculateButton: import("svelte").Component<Props, {}, "">;
 type CalculateButton = ReturnType<typeof CalculateButton>;

package/dist/components/primitives/Callout.svelte

@@ -8,7 +8,7 @@
 		variants: {
 			tone: {
 				info: 'border-info/40 bg-info/10',
-				tip: 'border-border bg-muted/40',
+				tip: 'border-border bg-muted',
 				success: 'border-success/40 bg-success/10',
 				warning: 'border-warning/40 bg-warning/10',
 				danger: 'border-destructive/40 bg-destructive/10'
@@ -38,7 +38,7 @@
 		title?: string;
 		/** Replaces the tone's default icon. `null` drops the icon entirely. */
 		icon?: Component | null;
-		children: Snippet;
+		children?: Snippet;
 	}
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
@@ -55,12 +55,14 @@
 	{#if Icon}
 		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
-	<div class="min-w-0 space-y-1">
+	<div class="min-w-0 space-y-1 wrap-anywhere">
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}
-		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
-			{@render children()}
-		</div>
+		{#if children}
+			<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 </div>

package/dist/components/primitives/Callout.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Component } from 'svelte';
 export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
     tone: {
         info: "border-info/40 bg-info/10";
-        tip: "border-border bg-muted/40";
+        tip: "border-border bg-muted";
         success: "border-success/40 bg-success/10";
         warning: "border-warning/40 bg-warning/10";
         danger: "border-destructive/40 bg-destructive/10";
@@ -11,7 +11,7 @@ export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm", {
     tone: {
         info: "border-info/40 bg-info/10";
-        tip: "border-border bg-muted/40";
+        tip: "border-border bg-muted";
         success: "border-success/40 bg-success/10";
         warning: "border-warning/40 bg-warning/10";
         danger: "border-destructive/40 bg-destructive/10";
@@ -19,7 +19,7 @@ export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
         info: "border-info/40 bg-info/10";
-        tip: "border-border bg-muted/40";
+        tip: "border-border bg-muted";
         success: "border-success/40 bg-success/10";
         warning: "border-warning/40 bg-warning/10";
         danger: "border-destructive/40 bg-destructive/10";
@@ -33,7 +33,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     /** Replaces the tone's default icon. `null` drops the icon entirely. */
     icon?: Component | null;
-    children: Snippet;
+    children?: Snippet;
 }
 declare const Callout: Component<Props, {}, "">;
 type Callout = ReturnType<typeof Callout>;