@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
     /***
-       * COMPONENT PROPS
-       **/ class?: string;
+         * COMPONENT PROPS
+         **/ class?: string;
     style?: string;
     clientHeight?: number;
     currentPath?: BreadcrumbsProps["currentPath"];
@@ -28,6 +28,7 @@ declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
     forwardLabel?: string;
     rootLabel?: string;
     breadcrumbLabel?: string;
+    compact?: boolean;
     onNavigate?: BreadcrumbsProps["onNavigate"];
     onBack?: BreadcrumbsProps["onBack"];
     onForward?: BreadcrumbsProps["onForward"];

package/dist/components/navigation/breadcrumbsAvailableWidth.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pure helpers for Breadcrumbs width math (header vs non-header container).
+ */
+export declare function breadcrumbsLayoutPaddingPx(headerAncestor: HTMLElement | null): number;
+export declare function breadcrumbsAvailableWidthPx(options: {
+    containerWidthPx: number;
+    leftOffsetPx: number;
+    rightOffsetPx: number;
+    headerAncestor: HTMLElement | null;
+}): number;

package/dist/components/navigation/breadcrumbsAvailableWidth.js

@@ -0,0 +1,10 @@
+/**
+ * Pure helpers for Breadcrumbs width math (header vs non-header container).
+ */
+export function breadcrumbsLayoutPaddingPx(headerAncestor) {
+    return headerAncestor ? 72 : 0;
+}
+export function breadcrumbsAvailableWidthPx(options) {
+    const layoutPaddingPx = breadcrumbsLayoutPaddingPx(options.headerAncestor);
+    return options.containerWidthPx - options.leftOffsetPx - options.rightOffsetPx - layoutPaddingPx;
+}

package/dist/components/navigation/types.d.ts

@@ -17,4 +17,6 @@ export interface BreadcrumbsProps {
     rootLabel?: string;
     /** Screen reader name of the navigation. Default: "breadcrumb". */
     breadcrumbLabel?: string;
+    /** Figma Crumbs Size=Compact: Heading/Section text and a 4px gap (a narrow header). Default: false (Size=Page). */
+    compact?: boolean;
 }

package/dist/components/pdf/PDFViewer.svelte

@@ -56,7 +56,7 @@
   export let url = '';
   export let enableCacheClearing: boolean = true; // Flag to enable/disable cache clearing shortcut
   // words: a page that shows the viewer in another language passes its own
-  export let loadingLabel: string = 'Loading PDF...';
+  export let loadingLabel: string = 'Loading PDF…';
   export let failedLabel: string = 'Failed to load PDF';
   export let pageLabel: string = 'Page {page} of {total}'; // {total} is "?" until the page count is known
   export let previousPageLabel: string = 'Previous page';

package/dist/components/search-input/SearchInput.svelte

@@ -1,110 +1,69 @@
 <!--
- * SearchInput Component
- * A reusable search input component for all Widgetic applications
- * 
- * Features:
- * - Consistent UI across all applications
- * - Clear button for search term
- * - Handles input, keydown, and paste events
- * - Smooth transitions and hover states
- * - Uses Widgetic design system styling
- -->
+  Figma: Search Field (component set 189:1138, node 189:1138).
+  The same field works as a plain search control and as the textbox of a combobox: pass `inputAttributes` (role, aria-*,
+  autocomplete) from the parent; `type`, `value`, and the input `class` always come from this component so the look stays one.
+-->
 <script lang="ts">
-  import X from 'lucide-svelte/icons/x';
-  import { IconSearch } from '@tabler/icons-svelte';
-  /**
-   * Placeholder text for the search input
-   */
-  export let placeholder = "Search...";
-  
-  /**
-   * Current search value
-   */
-  export let value = "";
-  
-  /**
-   * Input event handler
-   * @param event The input event
-   */
-  export let onInput: (event: Event) => Promise<void> | void = () => {};
-  
-  /**
-   * Keydown event handler
-   * @param event The keyboard event
-   */
-  export let onKeydown: (event: KeyboardEvent) => void = () => {};
-  
-  /**
-   * Clear button event handler
-   */
-  export let onClear: () => void = () => {
-    value = "";
-  };
-  
-  /**
-   * Paste event handler
-   * @param event The clipboard event
-   */
-  export let onPaste: (event: ClipboardEvent) => void = () => {};
-  
-  /**
-   * CSS class to apply to the container
-   */
-  export let containerClass = "";
-  
-  /**
-   * CSS class to apply to the input element
-   */
-  export let inputClass = "";
+	import IconSearch from '@tabler/icons-svelte/icons/search';
+	import IconX from '@tabler/icons-svelte/icons/x';
+
+	export let placeholder = 'Search…';
+	export let value = '';
+	export let onInput: (event: Event) => Promise<void> | void = () => {};
+	export let onKeydown: (event: KeyboardEvent) => void = () => {};
+	export let onClear: () => void = () => {
+		value = '';
+	};
+	export let onPaste: (event: ClipboardEvent) => void = () => {};
+	export let onFocus: (event: FocusEvent) => void = () => {};
+	export let onBlur: (event: FocusEvent) => void = () => {};
+	export let containerClass = '';
+	export let inputClass = '';
+	export let clearLabel = 'Clear search';
+	/** Bindable ref to the native input (e.g. combobox controllers call focus()). */
+	export let inputElement: HTMLInputElement | null = null;
+	/** Spread first; this component’s `type`, `value`, and `class` are set after so they override clashing keys from the spread. */
+	export let inputAttributes: Record<string, unknown> = {};
 </script>
 
 <div class="w-full {containerClass}">
-  <div class="group relative w-full">
-    <div class="relative overflow-hidden rounded-small border border-[hsl(var(--grey2))] bg-[hsl(var(--grey1))] transition-colors duration-200 hover:border-[hsl(var(--grey2))]">
-      <div class="relative w-full flex items-center">
-        <div class="absolute start-2 flex items-center pointer-events-none">
-          <IconSearch class="h-5 w-5 text-[hsl(var(--grey5))] transition-colors duration-300 {value ? 'text-[hsl(var(--grey7))]' : 'group-hover:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))]'}" />
-        </div>
-        <input 
-          type="text"
-          {placeholder} 
-          bind:value
-          oninput={onInput}
-          onkeydown={(e) => {
-            // Prevent backspace events when input is already empty
-            if (e.key === 'Backspace' && !value) {
-              e.preventDefault();
-              return;
-            }
-            onKeydown(e);
-          }}
-          onpaste={onPaste}
-          class="w-full h-[38px] border-0 bg-transparent focus:outline-hidden focus:ring-0 focus-visible:ring-0 ps-9 pe-8 subtext 
-                transition-all duration-300 
-                {value ? 'text-[hsl(var(--grey7))]' : 'text-[hsl(var(--grey3))] placeholder:text-[hsl(var(--grey3))] placeholder:transition-colors placeholder:duration-300 group-hover:text-[hsl(var(--grey7))] group-hover:placeholder:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))] group-focus-within:placeholder:text-[hsl(var(--grey7)))'} 
-                {inputClass}"
-        />
-        {#if value}
-          <button
-            type="button"
-            class="absolute end-2 h-6 w-6 inline-flex items-center justify-center rounded-full hover:bg-[hsl(var(--grey2))] transition-all duration-300 widgetic-colors"
-            onclick={onClear}
-          >
-            <X class="h-4 w-4 text-[hsl(var(--grey7))] transition-colors duration-300 hover:text-[hsl(var(--grey7))] widgetic-colors" />
-          </button>
-        {/if}
-      </div>
-    </div>
-  </div>
+	<div
+		class="group bg-accent duration-fast focus-within:bg-accent hover:bg-accent-hover relative flex h-9 w-full items-center gap-2 rounded-lg px-3 transition-colors"
+	>
+		<IconSearch
+			class="text-muted-foreground duration-fast group-focus-within:text-foreground size-4 shrink-0 stroke-[1.333] transition-colors {value
+				? 'text-foreground'
+				: ''}"
+			aria-hidden="true"
+		/>
+		<input
+			{...inputAttributes}
+			type="search"
+			bind:this={inputElement}
+			{placeholder}
+			bind:value
+			oninput={onInput}
+			onkeydown={(e) => {
+				if (e.key === 'Backspace' && !value) {
+					e.preventDefault();
+					return;
+				}
+				onKeydown(e);
+			}}
+			onpaste={onPaste}
+			onfocus={onFocus}
+			onblur={onBlur}
+			class="text-body text-foreground placeholder:text-muted-foreground min-w-0 flex-1 border-0 bg-transparent focus:outline-hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden {inputClass}"
+		/>
+		{#if value}
+			<button
+				type="button"
+				class="text-muted-foreground duration-fast hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-4 shrink-0 items-center justify-center transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+				aria-label={clearLabel}
+				onclick={onClear}
+			>
+				<IconX class="size-4 stroke-[1.333]" aria-hidden="true" />
+			</button>
+		{/if}
+	</div>
 </div>
-
-<style>
-  /* Ensure smooth text color transitions */
-  input {
-    transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease !important;
-  }
-  
-  input::placeholder {
-    transition: color 300ms ease !important;
-  }
-</style> 

package/dist/components/search-input/SearchInput.svelte.d.ts

@@ -12,33 +12,19 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const SearchInput: $$__sveltets_2_IsomorphicComponent<{
-    /**
-       * Placeholder text for the search input
-       */ placeholder?: string;
-    /**
-       * Current search value
-       */ value?: string;
-    /**
-       * Input event handler
-       * @param event The input event
-       */ onInput?: (event: Event) => Promise<void> | void;
-    /**
-       * Keydown event handler
-       * @param event The keyboard event
-       */ onKeydown?: (event: KeyboardEvent) => void;
-    /**
-       * Clear button event handler
-       */ onClear?: () => void;
-    /**
-       * Paste event handler
-       * @param event The clipboard event
-       */ onPaste?: (event: ClipboardEvent) => void;
-    /**
-       * CSS class to apply to the container
-       */ containerClass?: string;
-    /**
-       * CSS class to apply to the input element
-       */ inputClass?: string;
+    placeholder?: string;
+    value?: string;
+    onInput?: (event: Event) => Promise<void> | void;
+    onKeydown?: (event: KeyboardEvent) => void;
+    onClear?: () => void;
+    onPaste?: (event: ClipboardEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    containerClass?: string;
+    inputClass?: string;
+    clearLabel?: string;
+    /** Bindable ref to the native input (e.g. combobox controllers call focus()). */ inputElement?: HTMLInputElement | null;
+    /** Spread first; this component’s `type`, `value`, and `class` are set after so they override clashing keys from the spread. */ inputAttributes?: Record<string, unknown>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/search-input/index2.d.ts

@@ -1,14 +1,19 @@
 import { SvelteComponent } from 'svelte';
 
 export interface SearchInputProps {
-  placeholder?: string;
-  value?: string;
-  onInput?: (event: Event) => Promise<void> | void;
-  onKeydown?: (event: KeyboardEvent) => void;
-  onClear?: () => void;
-  onPaste?: (event: ClipboardEvent) => void;
-  containerClass?: string;
-  inputClass?: string;
+	placeholder?: string;
+	value?: string;
+	onInput?: (event: Event) => Promise<void> | void;
+	onKeydown?: (event: KeyboardEvent) => void;
+	onClear?: () => void;
+	onPaste?: (event: ClipboardEvent) => void;
+	onFocus?: (event: FocusEvent) => void;
+	onBlur?: (event: FocusEvent) => void;
+	containerClass?: string;
+	inputClass?: string;
+	clearLabel?: string;
+	inputElement?: HTMLInputElement | null;
+	inputAttributes?: Record<string, unknown>;
 }
 
-export default class SearchInput extends SvelteComponent<SearchInputProps> {} 
+export default class SearchInput extends SvelteComponent<SearchInputProps> {}

package/dist/components/shad-editor/editor.css

@@ -16,7 +16,7 @@
 }
 
 .tiptap a {
-	@apply text-blue-600 underline;
+	@apply text-primary underline;
 }
 
 ul[data-type='taskList'] {

package/dist/components/shad-editor/i18n/messages.d.ts

@@ -46,7 +46,7 @@ export declare const SHAD_EDITOR_MESSAGES: {
     readonly 'shadEditor.image.tooltip': "Add Image";
     readonly 'shadEditor.image.title': "Image";
     readonly 'shadEditor.image.urlHint': "Insert image url";
-    readonly 'shadEditor.image.urlPlaceholder': "Enter image url...";
+    readonly 'shadEditor.image.urlPlaceholder': "Enter image url…";
     readonly 'shadEditor.image.orPick': "OR Pick an Image";
     readonly 'shadEditor.table.tooltip': "Table";
     readonly 'shadEditor.table.insert': "Insert Table";

package/dist/components/shad-editor/i18n/messages.js

@@ -51,7 +51,7 @@ export const SHAD_EDITOR_MESSAGES = {
     'shadEditor.image.tooltip': 'Add Image',
     'shadEditor.image.title': 'Image',
     'shadEditor.image.urlHint': 'Insert image url',
-    'shadEditor.image.urlPlaceholder': 'Enter image url...',
+    'shadEditor.image.urlPlaceholder': 'Enter image url…',
     'shadEditor.image.orPick': 'OR Pick an Image',
     // ===== The table menu =====
     'shadEditor.table.tooltip': 'Table',

package/dist/components/shell/AppShell.svelte

@@ -0,0 +1,52 @@
+<!-- Figma: Responsive app shell (doc Responsive; ledger decisions.appShell / appShellConfirmed). -->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils.js';
+	import NavDrawer from './NavDrawer.svelte';
+	import TopBar from './TopBar.svelte';
+
+	let {
+		class: className,
+		topBarTitle,
+		menuLabel = 'Open navigation',
+		drawerOpen = $bindable(false),
+		sidebar,
+		children,
+		topBarAction
+	}: {
+		class?: string;
+		topBarTitle: string;
+		menuLabel?: string;
+		drawerOpen?: boolean;
+		sidebar?: Snippet;
+		children?: Snippet;
+		topBarAction?: Snippet;
+	} = $props();
+</script>
+
+<div class={cn('bg-muted flex h-full min-h-screen', className)}>
+	<div class="hidden shrink-0 lg:block">{@render sidebar?.()}</div>
+
+	<div class="flex min-h-0 min-w-0 flex-1 flex-col">
+		<TopBar
+			title={topBarTitle}
+			{menuLabel}
+			onMenuClick={() => {
+				drawerOpen = true;
+			}}
+			action={topBarAction}
+		/>
+
+		<div class="flex min-h-0 flex-1 flex-col gap-2 p-2 lg:ps-0">
+			<div
+				class="rounded-panel border-border bg-background flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden border shadow-none"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+
+	<NavDrawer bind:open={drawerOpen}>
+		{@render sidebar?.()}
+	</NavDrawer>
+</div>

package/dist/components/shell/AppShell.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    class?: string;
+    topBarTitle: string;
+    menuLabel?: string;
+    drawerOpen?: boolean;
+    sidebar?: Snippet;
+    children?: Snippet;
+    topBarAction?: Snippet;
+};
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "drawerOpen">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/shell/Banner.svelte

@@ -0,0 +1,90 @@
+<!--
+	Figma: Banner (component set 328:224, page Experiments)
+-->
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import type { VariantProps } from 'tailwind-variants';
+
+	export const bannerVariants = tv({
+		base: 'flex w-full max-w-content items-center gap-3 rounded-xl py-2.5 ps-4 pe-3',
+		variants: {
+			tone: {
+				default: 'bg-muted',
+				brand: 'bg-brand-subtle',
+				destructive: 'border border-destructive bg-background'
+			}
+		},
+		defaultVariants: {
+			tone: 'default'
+		}
+	});
+
+	export type BannerTone = VariantProps<typeof bannerVariants>['tone'];
+
+	export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+		class?: string;
+		tone?: BannerTone;
+		title?: string;
+		description: string;
+		icon?: Snippet;
+		actions?: Snippet;
+		showActions?: boolean;
+		dismissLabel?: string;
+		onDismiss?: () => void;
+	};
+</script>
+
+<script lang="ts">
+	import IconAlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import IconCircleCheck from '@tabler/icons-svelte/icons/circle-check';
+	import IconInfoCircle from '@tabler/icons-svelte/icons/info-circle';
+	import IconX from '@tabler/icons-svelte/icons/x';
+	import { cn, tv } from '../../utils.js';
+
+	let {
+		class: className,
+		tone = 'default',
+		title = undefined,
+		description,
+		icon,
+		actions,
+		showActions = true,
+		dismissLabel = 'Dismiss',
+		onDismiss = undefined,
+		...restProps
+	}: BannerProps = $props();
+</script>
+
+<div class={cn(bannerVariants({ tone }), className)} role="status" {...restProps}>
+	<span class="text-foreground inline-flex size-4 shrink-0 items-center">
+		{#if icon}
+			{@render icon()}
+		{:else if tone === 'brand'}
+			<IconCircleCheck class="size-4 stroke-[1.333]" aria-hidden="true" />
+		{:else if tone === 'destructive'}
+			<IconAlertTriangle class="size-4 stroke-[1.333]" aria-hidden="true" />
+		{:else}
+			<IconInfoCircle class="size-4 stroke-[1.333]" aria-hidden="true" />
+		{/if}
+	</span>
+	<div class="min-w-0 flex-1">
+		{#if title}
+			<p class="text-body-medium text-foreground">{title}</p>
+		{/if}
+		<p class={cn('text-body text-foreground', title && 'text-muted-foreground')}>{description}</p>
+	</div>
+	{#if showActions && actions}
+		<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+	{/if}
+	{#if onDismiss}
+		<button
+			type="button"
+			class="text-muted-foreground duration-fast hover:bg-accent hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+			aria-label={dismissLabel}
+			onclick={onDismiss}
+		>
+			<IconX class="size-4 stroke-[1.333]" aria-hidden="true" />
+		</button>
+	{/if}
+</div>

package/dist/components/shell/Banner.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { VariantProps } from 'tailwind-variants';
+export declare const bannerVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: string;
+        brand: string;
+        destructive: string;
+    };
+}, undefined, "flex w-full max-w-content items-center gap-3 rounded-xl py-2.5 ps-4 pe-3", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        tone?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}, {
+    tone: {
+        default: string;
+        brand: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: string;
+        brand: string;
+        destructive: string;
+    };
+}, undefined, "flex w-full max-w-content items-center gap-3 rounded-xl py-2.5 ps-4 pe-3", import("tailwind-variants/dist/config.js").TVConfig<{
+    tone: {
+        default: string;
+        brand: string;
+        destructive: string;
+    };
+}, {
+    tone: {
+        default: string;
+        brand: string;
+        destructive: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type BannerTone = VariantProps<typeof bannerVariants>['tone'];
+export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+    class?: string;
+    tone?: BannerTone;
+    title?: string;
+    description: string;
+    icon?: Snippet;
+    actions?: Snippet;
+    showActions?: boolean;
+    dismissLabel?: string;
+    onDismiss?: () => void;
+};
+declare const Banner: import("svelte").Component<BannerProps, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/shell/ErrorState.svelte

@@ -0,0 +1,60 @@
+<!-- Figma: Error State (component set 139:2, node 139:2). -->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconAlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import IconRefresh from '@tabler/icons-svelte/icons/refresh';
+	import { cn } from '../../utils.js';
+	import { Button } from '../ui/button/index.js';
+	import { defaultErrorStateMessages, type ErrorStateMessages } from './error-state-messages.js';
+
+	let {
+		class: className,
+		messages = defaultErrorStateMessages,
+		onRetry,
+		onSupport,
+		actions
+	}: {
+		class?: string;
+		messages?: ErrorStateMessages;
+		onRetry?: () => void;
+		onSupport?: () => void;
+		/** Replace the default action row entirely. */
+		actions?: Snippet;
+	} = $props();
+
+	const copy = $derived({ ...defaultErrorStateMessages, ...messages });
+</script>
+
+<div
+	class={cn(
+		'mx-auto flex max-w-[30rem] flex-col items-center gap-3 px-12 py-12 text-center',
+		className
+	)}
+	role="alert"
+>
+	<div class="relative flex size-12 items-center justify-center overflow-hidden rounded-xl">
+		<span class="bg-destructive absolute inset-0 rounded-xl opacity-10" aria-hidden="true"></span>
+		<IconAlertTriangle class="text-destructive relative size-4" aria-hidden="true" />
+	</div>
+
+	<div class="flex w-full flex-col gap-1">
+		<h2 class="text-heading-section text-foreground">{copy.title}</h2>
+		<p class="text-body text-muted-foreground">{copy.description}</p>
+	</div>
+
+	{#if actions}
+		<div class="flex flex-wrap items-center justify-center gap-2 pt-3">{@render actions()}</div>
+	{:else}
+		<div class="flex flex-wrap items-center justify-center gap-2 pt-3">
+			{#if onRetry}
+				<Button onclick={onRetry}>
+					<IconRefresh />
+					{copy.retryLabel}
+				</Button>
+			{/if}
+			{#if onSupport}
+				<Button variant="outline" onclick={onSupport}>{copy.supportLabel}</Button>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/shell/ErrorState.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type ErrorStateMessages } from './error-state-messages.js';
+type $$ComponentProps = {
+    class?: string;
+    messages?: ErrorStateMessages;
+    onRetry?: () => void;
+    onSupport?: () => void;
+    /** Replace the default action row entirely. */
+    actions?: Snippet;
+};
+declare const ErrorState: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorState = ReturnType<typeof ErrorState>;
+export default ErrorState;