@samuel-charpentier/sform 0.0.1 → 0.0.3

package/README.md

@@ -2,6 +2,39 @@
 
 A type-safe form library for **Svelte 5** with **SvelteKit remote functions**.
 
+## Table of Contents
+
+- [Features](#features)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+  - [Create a Remote Form](#1-create-a-remote-form)
+  - [Create Your Form Component](#2-create-your-form-component)
+- [Components](#components)
+  - [`<Sform>`](#sform)
+  - [`<Sfield>`](#sfield)
+    - [Common Props (all types)](#common-props-all-types)
+    - [Text Inputs](#text-inputs)
+    - [Password Input](#password-input)
+    - [Number Input](#number-input)
+    - [Textarea](#textarea)
+    - [Select](#select)
+    - [Checkbox](#checkbox)
+    - [Radio](#radio)
+    - [Range](#range)
+    - [Toggle](#toggle)
+    - [Toggle Options](#toggle-options)
+    - [Masked Input](#masked-input)
+    - [Hidden Input](#hidden-input)
+  - [`<Sbutton>`](#sbutton)
+  - [`<SIssues>`](#sissues)
+  - [`<SResult>`](#sresult)
+- [Styling](#styling)
+- [Validation](#validation)
+- [Type Safety](#type-safety)
+- [Development](#development)
+- [License](#license)
+
 ## Features
 
 - ✅ **Type-safe** - Discriminated union types for each input type
@@ -23,7 +56,7 @@ A type-safe form library for **Svelte 5** with **SvelteKit remote functions**.
 ## Installation
 
 ```bash
-npm install
+npm install @samuel-charpentier/sform
 ```
 
 Enable remote functions in `svelte.config.js`:
@@ -64,15 +97,17 @@ export const login = form(loginSchema, async ({ username, _password }) => {
 
 ```svelte
 <script lang="ts">
-	import { Sform, Sfield, Sbutton } from '$lib';
+	import { Sform, Sfield, Sbutton } from '@samuel-charpentier/sform';
 	import { login } from './auth.remote.ts';
 </script>
 
 <Sform form={login} validateOn="blur">
-	<Sfield name="username" type="text" label="Username" />
-	<Sfield name="_password" type="password" label="Password" />
+	{#snippet children(fields)}
+		<Sfield field={fields.username} type="text" label="Username" />
+		<Sfield field={fields._password} type="password" label="Password" />
 
-	<Sbutton label="Login" />
+		<Sbutton form={login} label="Login" />
+	{/snippet}
 </Sform>
 ```
 
@@ -84,7 +119,9 @@ Wrapper component that provides form context to all child fields.
 
 ```svelte
 <Sform form={remoteForm} validateOn="blur" class="my-form">
-	<!-- Sfield components here -->
+	{#snippet children(fields)}
+		<!-- Sfield components here -->
+	{/snippet}
 </Sform>
 ```
 
@@ -106,62 +143,95 @@ Smart field component with type-safe props based on input type.
 
 #### Common Props (all types)
 
-| Prop          | Type                      | Default     | Description                    |
-| ------------- | ------------------------- | ----------- | ------------------------------ |
-| `name`        | `string`                  | required    | Field name (must match schema) |
-| `type`        | `InputType`               | required    | Input type                     |
-| `label`       | `string`                  | `undefined` | Field label                    |
-| `placeholder` | `string`                  | `undefined` | Placeholder text               |
-| `disabled`    | `boolean`                 | `false`     | Disable the field              |
-| `readonly`    | `boolean`                 | `false`     | Make field readonly            |
-| `validateOn`  | `ValidateOn`              | inherited   | Override form validateOn       |
-| `class`       | `SfieldClasses \| string` | `undefined` | CSS classes                    |
+| Prop          | Type                      | Default     | Description                           |
+| ------------- | ------------------------- | ----------- | ------------------------------------- |
+| `field`       | `RemoteFormField`         | required    | Field from `fields` snippet parameter |
+| `type`        | `InputType`               | required    | Input type                            |
+| `label`       | `string`                  | `undefined` | Field label                           |
+| `placeholder` | `string`                  | `undefined` | Placeholder text (text/password/etc)  |
+| `disabled`    | `boolean`                 | `false`     | Disable the field                     |
+| `readonly`    | `boolean`                 | `false`     | Make field readonly                   |
+| `validateOn`  | `ValidateOn`              | inherited   | Override form validateOn              |
+| `class`       | `SfieldClasses \| string` | `undefined` | CSS classes                           |
+| `hint`        | `string \| Snippet`       | `undefined` | Help text shown below the field       |
 
 #### Text Inputs
 
 ```svelte
-<Sfield name="email" type="email" label="Email" placeholder="you@example.com" />
-<Sfield name="search" type="search" label="Search" />
-<Sfield name="phone" type="tel" label="Phone" />
-<Sfield name="website" type="url" label="Website" />
+<Sfield field={fields.email} type="email" label="Email" placeholder="you@example.com" />
+<Sfield field={fields.search} type="search" label="Search" />
+<Sfield field={fields.phone} type="tel" label="Phone" />
+<Sfield field={fields.website} type="url" label="Website" prefix="https://" />
 ```
 
-Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime-local`, `time`, `month`, `week`, `color`, `file`, `hidden`
+Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime-local`, `time`, `month`, `week`, `color`, `file`
+
+| Prop     | Type                | Default     | Description          |
+| -------- | ------------------- | ----------- | -------------------- |
+| `prefix` | `string \| Snippet` | `undefined` | Content before input |
+| `suffix` | `string \| Snippet` | `undefined` | Content after input  |
 
 #### Password Input
 
 ```svelte
-<Sfield name="_password" type="password" label="Password" />
-<Sfield name="_password" type="password" label="Password" showToggle={false} />
+<Sfield field={fields._password} type="password" label="Password" />
+<Sfield field={fields._password} type="password" label="Password" showToggle={false} />
+<Sfield field={fields._password} type="password" label="Password">
+	{#snippet showToggleIcon(passwordShown)}
+		{#if passwordShown}
+			🙈
+		{:else}
+			👁️
+		{/if}
+	{/snippet}
+</Sfield>
 ```
 
-| Prop         | Type      | Default | Description                        |
-| ------------ | --------- | ------- | ---------------------------------- |
-| `showToggle` | `boolean` | `true`  | Show eye icon to toggle visibility |
+| Prop             | Type                                | Default     | Description                        |
+| ---------------- | ----------------------------------- | ----------- | ---------------------------------- |
+| `showToggle`     | `boolean`                           | `true`      | Show eye icon to toggle visibility |
+| `showToggleIcon` | `Snippet<[passwordShown: boolean]>` | `undefined` | Custom toggle icon snippet         |
+| `prefix`         | `string \| Snippet`                 | `undefined` | Content before input               |
+| `suffix`         | `string \| Snippet`                 | `undefined` | Content after input                |
 
 #### Number Input
 
 ```svelte
-<Sfield name="age" type="number" label="Age" min={0} max={150} step={1} />
+<Sfield field={fields.age} type="number" label="Age" min={0} max={150} step={1} />
+<Sfield field={fields.price} type="number" label="Price" prefix="$" suffix="USD" align="end" />
+<Sfield field={fields.quantity} type="number" label="Qty" showControls={false} maxDecimals={0} />
 ```
 
-| Prop   | Type               | Default     | Description    |
-| ------ | ------------------ | ----------- | -------------- |
-| `min`  | `number \| string` | `undefined` | Minimum value  |
-| `max`  | `number \| string` | `undefined` | Maximum value  |
-| `step` | `number \| string` | `undefined` | Step increment |
+| Prop           | Type                | Default     | Description                            |
+| -------------- | ------------------- | ----------- | -------------------------------------- |
+| `min`          | `number \| string`  | `undefined` | Minimum value                          |
+| `max`          | `number \| string`  | `undefined` | Maximum value                          |
+| `step`         | `number \| string`  | `undefined` | Step increment                         |
+| `prefix`       | `string \| Snippet` | `undefined` | Content before input (e.g., "$")       |
+| `suffix`       | `string \| Snippet` | `undefined` | Content after input (e.g., "USD")      |
+| `showControls` | `boolean`           | `true`      | Show spinner controls                  |
+| `align`        | `'start' \| 'end'`  | `'start'`   | Text alignment                         |
+| `maxDecimals`  | `number`            | `undefined` | Max decimal places (0 = integers only) |
+| `autocomplete` | `string`            | `undefined` | HTML autocomplete attribute            |
 
 #### Textarea
 
 ```svelte
-<Sfield name="bio" type="textarea" label="Bio" placeholder="Tell us about yourself" />
+<Sfield field={fields.bio} type="textarea" label="Bio" placeholder="Tell us about yourself" />
+<Sfield field={fields.notes} type="textarea" label="Notes" prefix="📝" suffix="(max 500 chars)" />
 ```
 
+| Prop           | Type                | Default     | Description                 |
+| -------------- | ------------------- | ----------- | --------------------------- |
+| `prefix`       | `string \| Snippet` | `undefined` | Content before input        |
+| `suffix`       | `string \| Snippet` | `undefined` | Content after input         |
+| `autocomplete` | `string`            | `undefined` | HTML autocomplete attribute |
+
 #### Select
 
 ```svelte
 <Sfield
-	name="country"
+	field={fields.country}
 	type="select"
 	label="Country"
 	options={[
@@ -179,14 +249,14 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Checkbox
 
 ```svelte
-<Sfield name="subscribe" type="checkbox" label="Subscribe to newsletter" />
+<Sfield field={fields.subscribe} type="checkbox" label="Subscribe to newsletter" />
 ```
 
 #### Radio
 
 ```svelte
 <Sfield
-	name="plan"
+	field={fields.plan}
 	type="radio"
 	label="Plan"
 	options={[
@@ -204,7 +274,16 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Range
 
 ```svelte
-<Sfield name="volume" type="range" label="Volume" min={0} max={100} step={5} showValue />
+<Sfield field={fields.volume} type="range" label="Volume" min={0} max={100} step={5} showValue />
+<Sfield
+	field={fields.brightness}
+	type="range"
+	label="Brightness"
+	min={0}
+	max={100}
+	formatValue={(v) => `${v}%`}
+	showValue
+/>
 ```
 
 | Prop          | Type                        | Default     | Description            |
@@ -218,8 +297,8 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Toggle
 
 ```svelte
-<Sfield name="notifications" type="toggle" label="Enable Notifications" />
-<Sfield name="darkMode" type="toggle" label="Theme" onLabel="Dark" offLabel="Light" />
+<Sfield field={fields.notifications} type="toggle" label="Enable Notifications" />
+<Sfield field={fields.darkMode} type="toggle" label="Theme" onLabel="Dark" offLabel="Light" />
 ```
 
 | Prop             | Type     | Default     | Description          |
@@ -233,7 +312,7 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 
 ```svelte
 <Sfield
-	name="theme"
+	field={fields.theme}
 	type="toggle-options"
 	label="Theme"
 	options={[
@@ -242,6 +321,18 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 		{ value: 'auto', label: 'Auto' }
 	]}
 />
+<!-- Multiple selection -->
+<Sfield
+	field={fields.features}
+	type="toggle-options"
+	label="Features"
+	multiple={true}
+	options={[
+		{ value: 'push', label: 'Push Notifications' },
+		{ value: 'email', label: 'Email' },
+		{ value: 'sms', label: 'SMS' }
+	]}
+/>
 ```
 
 | Prop       | Type                         | Default  | Description               |
@@ -252,17 +343,28 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Masked Input
 
 ```svelte
-<Sfield name="phone" type="masked" label="Phone" mask="(###) ###-####" />
-<Sfield name="creditCard" type="masked" label="Credit Card" mask="#### #### #### ####" />
-<Sfield name="ssn" type="masked" label="SSN" mask="###-##-####" />
+<Sfield field={fields.phone} type="masked" label="Phone" mask="(###) ###-####" />
+<Sfield field={fields.creditCard} type="masked" label="Credit Card" mask="#### #### #### ####" />
+<Sfield field={fields.ssn} type="masked" label="SSN" mask="###-##-####" />
+<!-- Custom tokens -->
+<Sfield
+	field={fields.code}
+	type="masked"
+	label="Code"
+	mask="AAAA-99-LL"
+	tokens={{ A: /[A-Z]/, L: /[a-z]/ }}
+/>
 ```
 
-| Prop                  | Type      | Default  | Description                      |
-| --------------------- | --------- | -------- | -------------------------------- |
-| `mask`                | `string`  | required | Mask pattern                     |
-| `maskPlaceholder`     | `string`  | `'_'`    | Placeholder character            |
-| `showMaskPlaceholder` | `boolean` | `false`  | Show full mask with placeholders |
-| `storeRaw`            | `boolean` | `true`   | Store unmasked value             |
+| Prop                  | Type                     | Default     | Description                      |
+| --------------------- | ------------------------ | ----------- | -------------------------------- |
+| `mask`                | `string`                 | required    | Mask pattern                     |
+| `tokens`              | `Record<string, RegExp>` | `undefined` | Custom token definitions         |
+| `maskPlaceholder`     | `string`                 | `'_'`       | Placeholder character            |
+| `showMaskPlaceholder` | `boolean`                | `false`     | Show full mask with placeholders |
+| `unmaskValue`         | `boolean`                | `true`      | Store unmasked value             |
+| `prefix`              | `string \| Snippet`      | `undefined` | Content before input             |
+| `suffix`              | `string \| Snippet`      | `undefined` | Content after input              |
 
 **Mask Tokens:**
 
@@ -271,40 +373,158 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 - `A` - Alphabetic uppercase
 - `*` - Alphanumeric
 
+#### Hidden Input
+
+```svelte
+<Sfield field={fields.token} type="hidden" value={authToken} />
+<Sfield field={fields.userId} type="hidden" value="12345" />
+```
+
+| Prop    | Type     | Default | Description                                      |
+| ------- | -------- | ------- | ------------------------------------------------ |
+| `value` | `string` | `''`    | The value for the hidden field (can be reactive) |
+
+Hidden inputs are useful for including data in form submissions without displaying it to the user. The `value` prop is reactive, so you can update it programmatically:
+
+```svelte
+<script lang="ts">
+	let token = $state(initialToken);
+
+	async function refreshToken() {
+		token = await getNewToken();
+	}
+</script>
+
+<Sfield field={fields.token} type="hidden" value={token} />
+```
+
 ### `<Sbutton>`
 
-Stateful submit button that reacts to form state.
+Stateful submit button that reacts to form state. Pass the `form` prop to enable typed result access.
+
+```svelte
+<Sbutton form={myForm} label="Submit" class="my-button" />
+
+<!-- With custom state rendering -->
+<Sbutton form={myForm} class="submit-btn">
+	{#snippet children(state)}
+		{#if state.state === 'pending'}
+			Submitting...
+		{:else if state.state === 'success'}
+			✓ {state.result.message}
+		{:else if state.state === 'hasIssues'}
+			Fix Errors
+		{:else}
+			Submit Form
+		{/if}
+	{/snippet}
+</Sbutton>
+```
+
+The `state` parameter is a discriminated union of type `ButtonState<T>` where `T` is inferred from the form's result type:
+
+```typescript
+type ButtonState<T = unknown> =
+	| { state: 'default'; pending: false; success: false; hasIssues: false; result: undefined }
+	| { state: 'pending'; pending: true; success: false; hasIssues: false; result: undefined }
+	| { state: 'success'; pending: false; success: true; hasIssues: false; result: T }
+	| { state: 'hasIssues'; pending: false; success: false; hasIssues: true; result: undefined };
+```
+
+#### Typed Result Access
+
+The result type is automatically inferred from the `form` prop. When your remote function returns a typed result, you can access it directly:
 
 ```svelte
-<Sbutton label="Submit" class="my-button" />
+<script lang="ts">
+	import { login } from './auth.remote'; // Returns { success: boolean; message: string }
+</script>
 
-<!-- With custom state snippets -->
-<Sbutton class="submit-btn">
-	{#snippet defaultState(state)}
-		Submit Form
+<Sbutton form={login} class="submit-btn">
+	{#snippet children(state)}
+		{#if state.state === 'success'}
+			{state.result.message} <!-- TypeScript knows this is string -->
+		{:else if state.state === 'pending'}
+			Logging in...
+		{:else}
+			Login
+		{/if}
 	{/snippet}
-	{#snippet pendingState(state)}
-		Submitting...
+</Sbutton>
+```
+
+| Prop         | Type                              | Default     | Description                       |
+| ------------ | --------------------------------- | ----------- | --------------------------------- |
+| `form`       | `RemoteForm`                      | required    | Remote form for type inference    |
+| `label`      | `string`                          | `'Submit'`  | Button text (when no children)    |
+| `buttonType` | `'submit' \| 'reset' \| 'button'` | `'submit'`  | Button type                       |
+| `class`      | `string`                          | `undefined` | CSS class                         |
+| `disabled`   | `boolean`                         | `false`     | Disable button                    |
+| `children`   | `Snippet<[ButtonState<T>]>`       | `undefined` | Custom content with typed state   |
+| `onsubmit`   | `() => void \| Promise<void>`     | `undefined` | Callback before validation/submit |
+
+### `<SIssues>`
+
+Displays form-level issues and issues not shown by any Sfield component (e.g., hidden field issues or programmatic validation via `invalid()`).
+
+```svelte
+<SIssues message="There are some issues with your form:" />
+
+<!-- With custom message snippet -->
+<SIssues>
+	{#snippet message()}
+		<strong>⚠️ Please fix the following issues:</strong>
 	{/snippet}
-	{#snippet successState(state)}
-		✓ Success!
+</SIssues>
+```
+
+| Prop        | Type                | Default               | Description                       |
+| ----------- | ------------------- | --------------------- | --------------------------------- |
+| `message`   | `string \| Snippet` | `undefined`           | General message shown when issues |
+| `class`     | `string`            | `'sform-issues'`      | CSS class for wrapper             |
+| `listClass` | `string`            | `'sform-issues-list'` | CSS class for issues list         |
+
+The component filters issues to only show:
+
+- Form-level issues (from `invalid("message")`)
+- Field issues for hidden inputs (no Sfield displays them)
+- Issues for fields without a corresponding Sfield
+
+### `<SResult>`
+
+Displays form result with typed access. Only renders when the form has a result. Pass the `form` prop to enable typed result access in the children snippet.
+
+```svelte
+<SResult form={myLogin} class="sform-result sform-result-success">
+	{#snippet children(result)}
+		{result.message}
 	{/snippet}
-	{#snippet errorState(state)}
-		Fix Errors
+</SResult>
+```
+
+The `result` parameter is typed based on your remote function's return type:
+
+```svelte
+<script lang="ts">
+	import { login } from './auth.remote'; // Returns { success: boolean; message: string }
+</script>
+
+<SResult form={login} class="success-message">
+	{#snippet children(result)}
+		<!-- TypeScript knows result is { success: boolean; message: string } -->
+		<h2>Welcome!</h2>
+		<p>{result.message}</p>
 	{/snippet}
-</Sbutton>
+</SResult>
 ```
 
-| Prop           | Type                              | Default     | Description           |
-| -------------- | --------------------------------- | ----------- | --------------------- |
-| `label`        | `string`                          | `'Submit'`  | Button text           |
-| `buttonType`   | `'submit' \| 'reset' \| 'button'` | `'submit'`  | Button type           |
-| `class`        | `string`                          | `undefined` | CSS class             |
-| `disabled`     | `boolean`                         | `false`     | Disable button        |
-| `defaultState` | `Snippet`                         | `undefined` | Default state snippet |
-| `pendingState` | `Snippet`                         | `undefined` | Pending state snippet |
-| `successState` | `Snippet`                         | `undefined` | Success state snippet |
-| `errorState`   | `Snippet`                         | `undefined` | Error state snippet   |
+| Prop       | Type           | Default     | Description                    |
+| ---------- | -------------- | ----------- | ------------------------------ |
+| `form`     | `RemoteForm`   | required    | Remote form for type inference |
+| `children` | `Snippet<[T]>` | required    | Content with typed result      |
+| `class`    | `string`       | `undefined` | CSS class for wrapper          |
+
+The component only renders when `form.result !== undefined`, so the `result` parameter in the children snippet is guaranteed to be defined.
 
 ## Styling
 
@@ -322,11 +542,11 @@ Sfield adds these classes automatically:
 
 ```svelte
 <!-- String class applies to wrapper -->
-<Sfield name="email" type="email" class="my-field" />
+<Sfield field={fields.email} type="email" class="my-field" />
 
 <!-- Object for granular control -->
 <Sfield
-	name="email"
+	field={fields.email}
 	type="email"
 	class={{
 		wrapper: 'field-wrapper',
@@ -364,16 +584,16 @@ Sform uses TypeScript discriminated unions to provide type-safe props for each i
 
 ```typescript
 // ✅ TypeScript knows 'showToggle' is only valid for password type
-<Sfield name="_password" type="password" showToggle={false} />
+<Sfield field={fields._password} type="password" showToggle={false} />
 
 // ✅ TypeScript knows 'options' is required for select type
-<Sfield name="country" type="select" options={countries} />
+<Sfield field={fields.country} type="select" options={countries} />
 
 // ✅ TypeScript knows 'min', 'max', 'step' are valid for number type
-<Sfield name="age" type="number" min={0} max={150} />
+<Sfield field={fields.age} type="number" min={0} max={150} />
 
 // ❌ TypeScript error: 'showToggle' doesn't exist on text type
-<Sfield name="username" type="text" showToggle />
+<Sfield field={fields.username} type="text" showToggle />
 ```
 
 ## Development
@@ -395,11 +615,3 @@ npm run package
 ## License
 
 MIT
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```

package/dist/Sform/SIssues.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getSformContext } from './context.svelte.js';
+
+	interface Props {
+		/** General message shown when there are any issues (string or snippet) */
+		message?: string | Snippet;
+		/** Display message only if  */
+		showMessageIf?: 'noUnhandledIssue' | 'hasUnhandledIssue' | 'hasAnyIssue';
+		/** CSS class for the wrapper */
+		class?: string;
+		/** CSS class for the issues list */
+		listClass?: string;
+	}
+
+	let { message, class: className, listClass, showMessageIf = 'hasAnyIssue' }: Props = $props();
+
+	const context = getSformContext();
+
+	// Get unhandled issues from context (issues not displayed by any Sfield)
+	const unhandledIssues = $derived(context.getUnhandledIssues());
+	const formState = $derived(context.getFormState());
+
+	// Show issues only after form submission and when there are issues
+	const shouldShow = $derived(context.submitted && formState.hasIssues);
+	const hasUnhandledIssues = $derived(unhandledIssues.length > 0);
+</script>
+
+{#if shouldShow}
+	<div class={className ?? 'sform-issues'}>
+		{#if message && (showMessageIf === 'hasAnyIssue' || (showMessageIf === 'noUnhandledIssue' && !hasUnhandledIssues) || (showMessageIf === 'hasUnhandledIssue' && hasUnhandledIssues))}
+			<div class="sform-issues-message">
+				{#if typeof message === 'string'}
+					{message}
+				{:else}
+					{@render message()}
+				{/if}
+			</div>
+		{/if}
+
+		{#if hasUnhandledIssues}
+			<ul class={listClass ?? 'sform-issues-list'}>
+				{#each unhandledIssues as issue, i (i)}
+					<li>{issue.message}</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}

package/dist/Sform/SIssues.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** General message shown when there are any issues (string or snippet) */
+    message?: string | Snippet;
+    /** Display message only if  */
+    showMessageIf?: 'noUnhandledIssue' | 'hasUnhandledIssue' | 'hasAnyIssue';
+    /** CSS class for the wrapper */
+    class?: string;
+    /** CSS class for the issues list */
+    listClass?: string;
+}
+declare const SIssues: import("svelte").Component<Props, {}, "">;
+type SIssues = ReturnType<typeof SIssues>;
+export default SIssues;

package/dist/Sform/SResult.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" generics="T = unknown">
+	import type { Snippet } from 'svelte';
+	import type { RemoteFormIssue } from './types.js';
+
+	/**
+	 * Minimal form shape needed for type inference.
+	 * This allows the component to infer T from the form's result type.
+	 */
+	interface FormLike<Output> {
+		result?: Output;
+		fields: {
+			allIssues?: () => RemoteFormIssue[] | undefined;
+			[key: string]: unknown;
+		};
+	}
+
+	interface Props {
+		/** The remote form - used to infer the result type T */
+		form: FormLike<T>;
+		/** Children snippet receives the result (guaranteed to be defined) */
+		children: Snippet<[T]>;
+		/** CSS class for the wrapper */
+		class?: string;
+	}
+
+	let { form, children, class: className }: Props = $props();
+
+	// Only show when there's a result
+	const hasResult = $derived(form.result !== undefined);
+</script>
+
+{#if hasResult}
+	<div class={className}>
+		{@render children(form.result as T)}
+	</div>
+{/if}