sveltekit-discriminated-fields 0.1.1 → 0.2.0

package/README.md

@@ -1,176 +1,259 @@
 # sveltekit-discriminated-fields
 
-Type-safe discriminated union support for SvelteKit form fields.
+Type-safe discriminated union support for SvelteKit remote function form fields.
 
-## The Problem
+This library provides two complementary tools for working with discriminated unions in SvelteKit forms:
 
-When using SvelteKit's `form()` with discriminated union schemas (e.g., Zod's `z.discriminatedUnion`), the generated `fields` object is a **union of field objects**. TypeScript only allows access to properties that exist on ALL variants - meaning variant-specific fields are completely inaccessible.
+- **`discriminatedFields()`** - A wrapper function that enables proper TypeScript type narrowing on form field objects
+- **`UnionVariants`** - A component that renders variant-specific form sections with CSS-only visibility, supporting progressive enhancement (works without JavaScript)
 
-Given a typical SvelteKit setup:
+The implementation prioritises:
+
+- **Static type safety** - Catch errors at compile time with clear error messages
+- **Progressive enhancement** - Forms work identically with or without JavaScript
+- **Minimal boilerplate** - Simple API that stays out of your way
+- **Flexibility** - Use as much or as little as you need
+
+This library exposes existing SvelteKit form behaviour with improved typing for discriminated unions. Runtime overhead is minimal - just a thin proxy wrapper.
+
+## Installation
+
+```bash
+npm install sveltekit-discriminated-fields
+```
+
+## UnionVariants Component
+
+The `UnionVariants` component provides declarative variant rendering with **full progressive enhancement support**. It uses CSS-only visibility toggling via `:has()` selectors, so forms work identically with or without JavaScript enabled.
+
+Given a SvelteKit remote function using Zod (this library also works with [Valibot](./test/src/routes/valibot-form) or other validation libraries):
 
 ```typescript
 // data.remote.ts
 import { z } from "zod";
-import { form } from "$app/server/remote";
+import { form } from "$app/server";
 
 const shapeSchema = z.discriminatedUnion("kind", [
-  z.object({ kind: z.literal("circle"), radius: z.number() }),
-  z.object({
-    kind: z.literal("rectangle"),
-    width: z.number(),
-    height: z.number(),
-  }),
+  z.object({ kind: z.literal("circle"), radius: z.coerce.number() }),
+  z.object({ kind: z.literal("rectangle"), width: z.coerce.number(), height: z.coerce.number() }),
   z.object({ kind: z.literal("point") }),
 ]);
 
 export const shapeForm = form(shapeSchema, async (data) => {
-  // handle form submission
+  // handle submission
 });
 ```
 
+Use `UnionVariants` to render variant-specific fields:
+
 ```svelte
-<!-- +page.svelte (without this library) -->
 <script lang="ts">
-  import { shapeForm } from './data.remote.ts';
-
-  const form = shapeForm();
-  const shape = form.fields;
+  import { shapeForm } from './data.remote';
+  import { UnionVariants } from 'sveltekit-discriminated-fields';
 </script>
 
-<select {...shape.kind.as('select')}>
-  <option value="circle">Circle</option>
-  <option value="rectangle">Rectangle</option>
-  <option value="point">Point</option>
-</select>
-
-{#if shape.kind.value() === 'circle'}
-  <!-- ERROR: Property 'radius' does not exist on type 'ShapeFields' -->
-  <input {...shape.radius.as('number')} />
-{:else if shape.kind.value() === 'rectangle'}
-  <!-- ERROR: Property 'width' does not exist on type 'ShapeFields' -->
-  <input {...shape.width.as('number')} />
-{/if}
+<form {...shapeForm}>
+  <select {...shapeForm.fields.kind.as('select')}>
+    <option value="">Select a shape...</option>
+    <option value="circle">Circle</option>
+    <option value="rectangle">Rectangle</option>
+    <option value="point">Point</option>
+  </select>
+
+  <UnionVariants fields={shapeForm.fields} key="kind">
+    {#snippet fallback()}
+      <p>Please select a shape type above.</p>
+    {/snippet}
+
+    {#snippet circle(s)}
+      <input {...s.radius.as('number')} placeholder="Radius" />
+    {/snippet}
+
+    {#snippet rectangle(s)}
+      <input {...s.width.as('number')} placeholder="Width" />
+      <input {...s.height.as('number')} placeholder="Height" />
+    {/snippet}
+
+    {#snippet point(_s)}
+      <p>Point has no additional fields.</p>
+    {/snippet}
+  </UnionVariants>
+
+  <button type="submit">Submit</button>
+</form>
 ```
 
-The issue: `shape.kind.value() === 'circle'` doesn't narrow the type because method calls don't provide TypeScript control flow analysis. You're stuck - variant-specific fields are inaccessible, and there's no way to narrow to access them.
+The optional `fallback` snippet is displayed when no variant is currently selected (i.e., when the discriminator field is empty).
 
-## The Solution
+Each snippet receives correctly narrowed fields for that variant - TypeScript knows `s.radius` exists in the `circle` snippet but not in `rectangle`. Only valid discriminator values are accepted.
 
-This library wraps your discriminated union fields to:
+Snippets only receive fields **specific to that variant**. Fields common to all variants (same name and type) should be rendered outside `UnionVariants` to prevent accidental duplicate inputs. Fields shared by some but not all variants, or with differing types across variants, produce compile-time errors.
 
-1. Make all variant fields accessible
-2. Add a `${key}Value` property that enables TypeScript narrowing
+### Radio Buttons
+
+For radio button discriminators, you must use the `discriminatedFields()` wrapper. The raw SvelteKit field object's `.as("radio", value)` method doesn't work with discriminated unions (causes a static error). The wrapped version is type-safe - only valid discriminator values are accepted:
 
 ```svelte
-<!-- +page.svelte (with this library) -->
 <script lang="ts">
-  import { shapeForm } from './data.remote.ts';
-  import { discriminatedFields } from 'sveltekit-discriminated-fields';  // +
+  import { shapeForm } from './data.remote';
+  import { discriminatedFields, UnionVariants } from 'sveltekit-discriminated-fields';
 
-  const form = shapeForm();
-  const shape = discriminatedFields('kind', form.fields);                 // changed
+  const shape = $derived(discriminatedFields('kind', shapeForm.fields));
 </script>
 
-<select {...shape.kind.as('select')}>
-  <option value="circle">Circle</option>
-  <option value="rectangle">Rectangle</option>
-  <option value="point">Point</option>
-</select>
+<form {...shapeForm}>
+  <fieldset>
+    <label><input {...shape.kind.as("radio", "circle")} /> Circle</label>
+    <label><input {...shape.kind.as("radio", "rectangle")} /> Rectangle</label>
+    <label><input {...shape.kind.as("radio", "point")} /> Point</label>
+  </fieldset>
+
+  <UnionVariants fields={shape} key="kind">
+    <!-- snippets work the same way -->
+  </UnionVariants>
+</form>
+```
 
-{#if shape.kindValue === 'circle'}<!-- changed -->
-  <input {...shape.radius.as('number')} /><!-- now works! -->
-{:else if shape.kindValue === 'rectangle'}<!-- changed -->
-  <input {...shape.width.as('number')} /><!-- now works! -->
-  <input {...shape.height.as('number')} />
-  <!-- ERROR: Property 'radius' does not exist - correctly rejected -->
-  <input {...shape.radius.as('number')} />
-{/if}
+See the [radio-form example](./test/src/routes/radio-form) for a complete working example.
+
+### Non-Sibling Layouts with `selector`
+
+By default, `UnionVariants` expects the discriminator input (select or radios) to be a sibling element. For complex layouts where this isn't possible, use the `selector` prop:
+
+```svelte
+<div class="header">
+  <select {...shape.kind.as('select')} id="shape-select">
+    <!-- options -->
+  </select>
+</div>
+
+<div class="body">
+  <!-- Not a sibling of the select! -->
+  <UnionVariants fields={shape} key="kind" selector="#shape-select">
+    <!-- snippets -->
+  </UnionVariants>
+</div>
 ```
 
-The changes:
+See the [selector-form example](./test/src/routes/selector-form) for select elements or [selector-radio-form example](./test/src/routes/selector-radio-form) for radio buttons.
 
-1. Import `discriminatedFields` from this library
-2. Wrap `form.fields` with `discriminatedFields('kind', ...)`
-3. Use `shape.kindValue` instead of `shape.kind.value()` for narrowing
+### Nested and Multiple Unions
 
-## Installation
+The discriminated union doesn't need to be the top-level schema. It can be nested within a larger object:
 
-```bash
-npm install sveltekit-discriminated-fields
+```typescript
+const orderSchema = z.object({
+  orderId: z.string(),
+  shipping: z.discriminatedUnion("method", [
+    z.object({ method: z.literal("pickup"), store: z.string() }),
+    z.object({ method: z.literal("delivery"), address: z.string() }),
+  ]),
+});
+```
+
+```svelte
+<UnionVariants fields={orderForm.fields.shipping} key="method">
+  <!-- snippets for pickup and delivery -->
+</UnionVariants>
 ```
 
-## Usage
+You can also have multiple discriminated unions in the same form, or even a discriminated union nested within another discriminated union. See the [nested-form example](./test/src/routes/nested-form) for nested unions within objects, or [nested-union-form example](./test/src/routes/nested-union-form) for a union inside a union.
+
+### Partial Variants
+
+By default, `UnionVariants` requires a snippet for every variant - a compile error appears if one is missing, helping you avoid omissions. When you intentionally want to handle only some variants, use `partial={true}`:
 
 ```svelte
-<script lang="ts">
-  import { paymentForm } from './data.remote.ts';
-  import { discriminatedFields } from 'sveltekit-discriminated-fields';
+<UnionVariants fields={shape} key="kind" partial={true}>
+  {#snippet circle(s)}
+    <input {...s.radius.as('number')} />
+  {/snippet}
 
-  const form = paymentForm();
+  {#snippet rectangle(s)}
+    <input {...s.width.as('number')} />
+  {/snippet}
 
-  // Wrap fields with $derived for reactivity
-  // The first argument is your discriminator key (e.g., 'type', 'kind', 'channel')
-  const payment = $derived(discriminatedFields('type', form.fields));
+  <!-- point snippet omitted - fallback shown when point selected -->
+</UnionVariants>
+```
 
-  function setCardDefaults() {
-    // set() is type-safe - TypeScript enforces correct fields for each variant
-    payment.set({ type: 'card', cardNumber: '', cvv: '' });
-  }
-</script>
+## discriminatedFields Function
 
-<!-- typeValue is undefined until form is initialized -->
-{#if payment.typeValue === undefined}
-  <p>Loading...</p>
-{:else}
-  <select {...payment.type.as('select')}>
-    <option value="card">Card</option>
-    <option value="bank">Bank Transfer</option>
-  </select>
+When using SvelteKit's remote function `form()` with discriminated union schemas, the generated `fields` object is a union of field objects. TypeScript only allows access to properties that exist on ALL variants - meaning variant-specific fields are inaccessible, and `.as("radio", value)` doesn't work.
+
+The `discriminatedFields()` function wraps your form fields to:
+
+1. Make all variant fields accessible
+2. Add a `${key}Value` property that enables TypeScript narrowing
+3. Provide a type-safe `set()` method for programmatic updates
+4. Fix `.as("radio", value)` to accept only valid discriminator values
+
+The following example demonstrates conditionally rendering variant-specific fields with type-safe narrowing, without using `UnionVariants`. This approach requires JavaScript (unlike `UnionVariants` which works without JS):
 
-  <!-- Use typeValue (not type.value()) for type narrowing -->
-  {#if payment.typeValue === 'card'}
-    <input {...payment.cardNumber.as('string')} />
-    <input {...payment.cvv.as('string')} />
-  {:else if payment.typeValue === 'bank'}
-    <input {...payment.accountNumber.as('string')} />
-    <input {...payment.sortCode.as('string')} />
-  {/if}
+```svelte
+<script lang="ts">
+  import { shapeForm } from './data.remote';
+  import { discriminatedFields } from 'sveltekit-discriminated-fields';
+
+  const shape = $derived(discriminatedFields('kind', shapeForm.fields));
+</script>
+
+<!-- Use kindValue (not kind.value()) for type narrowing -->
+{#if shape.kindValue === 'circle'}
+  <input {...shape.radius.as('number')} /> <!-- TypeScript knows radius exists -->
+{:else if shape.kindValue === 'rectangle'}
+  <input {...shape.width.as('number')} />  <!-- TypeScript knows width exists -->
+  <input {...shape.height.as('number')} />
 {/if}
 ```
 
+See the [programmatic-form example](./test/src/routes/programmatic-form) for usage of `set()` and other programmatic features.
+
 ## API
 
+### `UnionVariants`
+
+A component for rendering variant-specific form sections with CSS-only visibility.
+
+**Props:**
+
+| Prop       | Type                  | Description                                                 |
+| ---------- | --------------------- | ----------------------------------------------------------- |
+| `fields`   | `DiscriminatedFields` | The wrapped form fields from `discriminatedFields()`        |
+| `key`      | `string`              | The discriminator key (must match a field in the schema)    |
+| `selector` | `string` (optional)   | CSS selector for the discriminator input when not a sibling |
+| `partial`  | `boolean` (optional)  | Allow missing snippets for some variants                    |
+
+**Snippets:**
+
+- `fallback` - Rendered when no variant is selected
+- `{variantName}(fields)` - One snippet per variant, receives narrowed fields
+
 ### `discriminatedFields(key, fields)`
 
 Wraps discriminated union form fields for type-safe narrowing.
 
 **Parameters:**
 
-- `key` - The discriminator key (e.g., `'type'`, `'kind'`, `'channel'`)
+- `key` - The discriminator key (must exist as a field in all variants)
 - `fields` - Form fields from a discriminated union schema
 
 **Returns:** A proxy object with:
 
 - All original fields passed through unchanged
 - `${key}Value` - The current discriminator value (for narrowing)
-- `set()` - Type-safe setter that infers variant from discriminator
+- `set(data)` - Type-safe setter that infers variant from discriminator
 
 ### `DiscriminatedData<T>`
 
 Type helper that extracts the underlying data type from wrapped fields:
 
 ```typescript
-const payment = discriminatedFields('type', form.fields);
+const payment = discriminatedFields("type", form.fields);
 type Payment = DiscriminatedData<typeof payment>;
-// { type: 'card'; cardNumber: string; cvv: string } | { type: 'bank'; accountNumber: string; sortCode: string }
+// { type: 'card'; cardNumber: string; cvv: string } | { type: 'bank'; ... }
 ```
 
-Useful when you need to reference the data type elsewhere, such as defining default values or passing data to other functions.
-
-## Note on Runtime Behavior
-
-Type narrowing is compile-time only. At runtime, `'width' in shape` will return `true` even when `kindValue === 'circle'`, because all variant fields exist on the underlying object.
-
 ## License
 
 MIT

package/dist/UnionVariants.svelte

@@ -0,0 +1,361 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { InferDiscriminator } from "./infer-discriminator.js";
+
+  // Extract discriminator values from a union of field objects
+  type DiscriminatorValues<K extends string, T> =
+    T extends Record<K, { value(): infer V }>
+      ? V extends string
+        ? V
+        : never
+      : never;
+
+  // Narrow T to the variant where discriminator equals V
+  type NarrowToVariant<K extends string, T, V> =
+    T extends Record<K, { value(): V }> ? T : never;
+
+  // Reserved prop names that can't be variant names
+  type ReservedProps = "fields" | "key" | "fallback" | "partial";
+
+  // =============================================================================
+  // Shared field name detection
+  // Fields can be:
+  // - Unique to one variant: OK
+  // - Common to ALL variants: OK (accessible at top level, outside UnionVariants)
+  // - Shared by SOME but not ALL: ERROR (would cause duplicate form submissions)
+  // =============================================================================
+
+  // Keys that look like form fields (have a value() method) - excludes methods like set/allIssues
+  type FieldKeys<T> = {
+    [P in keyof T]: T[P] extends { value(): unknown } ? P : never;
+  }[keyof T];
+
+  // Get field keys for a specific variant (excluding discriminator)
+  type VariantFieldKeys<K extends string, T, V extends string> = Exclude<
+    FieldKeys<NarrowToVariant<K, T, V>>,
+    K
+  >;
+
+  // Get union of field keys from all variants EXCEPT V (distributes over the Exclude result)
+  type OtherVariantsFieldKeys<
+    K extends string,
+    T,
+    V extends string,
+    OtherV extends string = Exclude<DiscriminatorValues<K, T>, V>,
+  > = OtherV extends OtherV ? VariantFieldKeys<K, T, OtherV> : never;
+
+  // Keys that variant V shares with at least one other variant
+  type SharedFieldKeys<
+    K extends string,
+    T,
+    V extends string,
+  > = VariantFieldKeys<K, T, V> & OtherVariantsFieldKeys<K, T, V>;
+
+  // Union of all shared keys across all variants (distributes over V)
+  type AllSharedFieldKeys<
+    K extends string,
+    T,
+    V extends string = DiscriminatorValues<K, T>,
+  > = V extends V ? SharedFieldKeys<K, T, V> : never;
+
+  // Check if field P exists in variant V
+  type HasField<T, P> = P extends keyof T
+    ? T[P] extends { value(): unknown }
+      ? true
+      : false
+    : false;
+
+  // Check if field P exists in ALL variants (distributes, so result is union of true/false)
+  type FieldExistsInAll<
+    K extends string,
+    T,
+    P extends string,
+    V extends string = DiscriminatorValues<K, T>,
+  > = V extends V ? HasField<NarrowToVariant<K, T, V>, P> : never;
+
+  // A field is common if it exists in all variants (no false in the result)
+  type IsCommonField<K extends string, T, P extends string> = false extends FieldExistsInAll<K, T, P>
+    ? false
+    : true;
+
+  // =============================================================================
+  // Type uniformity check - fields shared across variants must have the same type
+  // =============================================================================
+
+  // Get the value type of field P in variant V
+  type FieldValueType<K extends string, T, V extends string, P extends string> = NarrowToVariant<
+    K,
+    T,
+    V
+  >[P & keyof NarrowToVariant<K, T, V>] extends { value(): infer R }
+    ? R
+    : never;
+
+  // Union of all value types for field P across all variants
+  type AllFieldValueTypes<
+    K extends string,
+    T,
+    P extends string,
+    V extends string = DiscriminatorValues<K, T>,
+  > = V extends V ? FieldValueType<K, T, V, P> : never;
+
+  // Check if the union of all types equals each individual type (i.e., all types are the same)
+  // If types differ: (string | number) extends string = false
+  // If types same: string extends string = true
+  type FieldTypeMatchesInVariant<
+    K extends string,
+    T,
+    P extends string,
+    V extends string,
+    Union = AllFieldValueTypes<K, T, P>,
+  > = [Union] extends [FieldValueType<K, T, V, P>] ? true : false;
+
+  // Check if field P has the same type in ALL variants
+  type FieldHasSameTypeInAll<
+    K extends string,
+    T,
+    P extends string,
+    V extends string = DiscriminatorValues<K, T>,
+  > = V extends V ? FieldTypeMatchesInVariant<K, T, P, V> : never;
+
+  // A field has uniform type if no variant returns false
+  type IsUniformTypeField<K extends string, T, P extends string> = false extends FieldHasSameTypeInAll<
+    K,
+    T,
+    P
+  >
+    ? false
+    : true;
+
+  // =============================================================================
+  // Field classification
+  // =============================================================================
+
+  // Fields shared by SOME but not ALL variants (problematic - would cause duplicate submissions)
+  type PartiallySharedFieldKeys<K extends string, T> = {
+    [P in AllSharedFieldKeys<K, T>]: IsCommonField<K, T, P & string> extends true ? never : P;
+  }[AllSharedFieldKeys<K, T>];
+
+  // Fields in ALL variants but with DIFFERENT types (problematic - type mismatch)
+  type MixedTypeFieldKeys<K extends string, T> = {
+    [P in AllSharedFieldKeys<K, T>]: IsCommonField<K, T, P & string> extends true
+      ? IsUniformTypeField<K, T, P & string> extends true
+        ? never
+        : P
+      : never;
+  }[AllSharedFieldKeys<K, T>];
+
+  // Fields common to ALL variants WITH the same type (safe to use outside UnionVariants)
+  type CommonFieldKeys<K extends string, T> = {
+    [P in AllSharedFieldKeys<K, T>]: IsCommonField<K, T, P & string> extends true
+      ? IsUniformTypeField<K, T, P & string> extends true
+        ? P
+        : never
+      : never;
+  }[AllSharedFieldKeys<K, T>];
+
+  // =============================================================================
+  // Validation - produces error messages for invalid field configurations
+  // =============================================================================
+
+  // Validates that T has no partially shared field keys
+  type ValidateNoPartiallySharedFields<K extends string, T> = [
+    PartiallySharedFieldKeys<K, T>,
+  ] extends [never]
+    ? T
+    : `Error: Field '${PartiallySharedFieldKeys<K, T> & string}' exists in some variants but not all. Fields must be either unique to one variant or common to all variants.`;
+
+  // Validates that T has no mixed-type field keys
+  type ValidateNoMixedTypeFields<K extends string, T> = [MixedTypeFieldKeys<K, T>] extends [never]
+    ? T
+    : `Error: Field '${MixedTypeFieldKeys<K, T> & string}' exists in all variants but with different types. Shared fields must have the same type across all variants.`;
+
+  // Combined validation
+  type ValidateFields<K extends string, T> = [PartiallySharedFieldKeys<K, T>] extends [never]
+    ? [MixedTypeFieldKeys<K, T>] extends [never]
+      ? T
+      : ValidateNoMixedTypeFields<K, T>
+    : ValidateNoPartiallySharedFields<K, T>;
+
+  // Variant type with common fields removed (for snippet parameters)
+  // This prevents accidentally rendering common fields twice
+  type VariantOnlyFields<K extends string, T, V extends string> = Omit<
+    NarrowToVariant<K, T, V>,
+    CommonFieldKeys<K, T>
+  >;
+
+  // Snippet props mapped from variant values - optionality controlled by Partial flag
+  // Note: snippets receive variant-only fields (common fields are excluded to prevent duplicates)
+  type VariantSnippets<
+    K extends string,
+    T,
+    V extends string,
+    IsPartial extends boolean,
+  > = IsPartial extends true
+    ? { [P in Exclude<V, ReservedProps>]?: Snippet<[VariantOnlyFields<K, T, P>]> }
+    : { [P in Exclude<V, ReservedProps>]: Snippet<[VariantOnlyFields<K, T, P>]> };
+
+  // Full props type with explicit key
+  export type UnionVariantsPropsWithKey<
+    K extends string,
+    T extends Record<K, { value(): unknown }>,
+    V extends string = DiscriminatorValues<K, T>,
+    IsPartial extends boolean = false,
+  > = {
+    fields: ValidateFields<K, T>;
+    key: K;
+    /** Optional snippet shown when no variant is selected */
+    fallback?: Snippet;
+    /** When true, variant snippets are optional (default: false) */
+    partial?: IsPartial;
+    /**
+     * CSS selector for the discriminator input element (select or radio container).
+     * When provided, uses this selector instead of the default name-based lookup.
+     * Example: "#method-select" for a select, or "#radio-group" for radios
+     */
+    selector?: string;
+  } & VariantSnippets<K, T, V, IsPartial>;
+
+  // Props type with auto-inferred key (key is optional)
+  export type UnionVariantsPropsInferred<
+    T extends Record<string, { value(): unknown }>,
+    K extends string = InferDiscriminator<T> extends infer I ? (I extends string ? I : never) : never,
+    V extends string = DiscriminatorValues<K, T>,
+    IsPartial extends boolean = false,
+  > = InferDiscriminator<T> extends string
+    ? {
+        fields: ValidateFields<K, T>;
+        key?: K;
+        fallback?: Snippet;
+        partial?: IsPartial;
+        selector?: string;
+      } & VariantSnippets<K, T, V, IsPartial>
+    : {
+        fields: InferDiscriminator<T>; // This will be the error message
+        key: never;
+      };
+
+  // Combined props type - key can be explicit or inferred
+  export type UnionVariantsProps<
+    K extends string,
+    T extends Record<K, { value(): unknown }>,
+    V extends string = DiscriminatorValues<K, T>,
+    IsPartial extends boolean = false,
+  > = UnionVariantsPropsWithKey<K, T, V, IsPartial>;
+</script>
+
+<script
+  lang="ts"
+  generics="K extends string, T extends Record<K, { value(): unknown }>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false"
+>
+  type Props = UnionVariantsProps<K, T, V, IsPartial>;
+
+  let { fields, key: keyProp, fallback, partial, selector, ...snippets }: Props = $props();
+
+  // Auto-detect discriminator key if not provided
+  function findDiscriminatorKey(f: Record<string, { value(): unknown }>): string {
+    const fieldKeys = Object.keys(f).filter((k) => {
+      const field = f[k];
+      return field && typeof field === "object" && "value" in field && typeof field.value === "function";
+    });
+
+    const candidates = fieldKeys.filter((k) => {
+      const field = f[k];
+      const value = field.value();
+      return typeof value === "string" || value === undefined;
+    });
+
+    if (candidates.length === 0) {
+      throw new Error("No valid discriminator key found in fields");
+    }
+    return candidates[0];
+  }
+
+  // Use provided key or auto-detect
+  const key = $derived(keyProp ?? findDiscriminatorKey(fields as Record<string, { value(): unknown }>)) as K;
+
+  // Get all variant values from the snippet names (excluding fallback)
+  const variantValues = Object.keys(snippets) as V[];
+
+  // Get the actual field name from the discriminator field (handles nested paths like "shipping.method")
+  const fieldName = $derived.by(() => {
+    const discriminatorField = (fields as Record<K, { as(type: "select"): { name: string } }>)[key];
+    return discriminatorField?.as("select")?.name ?? key;
+  });
+
+  // Generate CSS for showing/hiding variants based on select or radio value
+  const css = $derived.by(() => {
+    const attr = `data-union-${key}`;
+    const name = fieldName;
+
+    if (selector) {
+      // Input-based: use :has() with the provided selector to find any ancestor
+      // Supports: select elements, radio inputs directly, or radio containers
+      const selOpt = (v: string) => `*:has(${selector} option[value="${v}"]:checked)`;
+      const radDirect = (v: string) => `*:has(${selector}[value="${v}"]:checked)`;
+      const radContainer = (v: string) => `*:has(${selector} input[value="${v}"]:checked)`;
+
+      // Hide all variant sections by default
+      const hideAll = `*:has(${selector}) [${attr}]:not([${attr}="fallback"]) { display: none; }\n`;
+
+      // Show the variant section that matches the selected value
+      const showVariants = variantValues
+        .map((v) => `${selOpt(v)} [${attr}="${v}"],
+${radDirect(v)} [${attr}="${v}"],
+${radContainer(v)} [${attr}="${v}"] { display: contents; }`)
+        .join("\n");
+
+      // Hide fallback when any variant is selected
+      const hideFallback =
+        fallback && variantValues.length
+          ? `*:has(${selector}:checked) [${attr}="fallback"],
+*:has(${selector} input:checked) [${attr}="fallback"],
+${variantValues.map((v) => `${selOpt(v)} [${attr}="fallback"]`).join(",\n")} { display: none; }\n`
+          : "";
+
+      return hideAll + showVariants + hideFallback;
+    }
+
+    // Sibling-based (default): look for sibling elements containing the discriminator
+    const sel = (s: string) => `*:has(select[name="${name}"]${s}) ~`;
+    const rad = (s: string) => `*:has(input[name="${name}"]${s}) ~`;
+
+    // Hide all variant sections by default (but not fallback)
+    const hideAll = `${sel("")} [${attr}]:not([${attr}="fallback"]),
+${rad("")} [${attr}]:not([${attr}="fallback"]) { display: none; }\n`;
+
+    // Show the variant section that matches the selected value
+    const showVariants = variantValues
+      .map((v) => `${sel(` option[value="${v}"]:checked`)} [${attr}="${v}"],
+${rad(`[value="${v}"]:checked`)} [${attr}="${v}"] { display: contents; }`)
+      .join("\n");
+
+    // Hide fallback when any variant is selected
+    const hideFallback =
+      fallback && variantValues.length
+        ? `${rad(":checked")} [${attr}="fallback"],
+${variantValues.map((v) => `${sel(` option[value="${v}"]:checked`)} [${attr}="fallback"]`).join(",\n")} { display: none; }\n`
+        : "";
+
+    return hideAll + showVariants + hideFallback;
+  });
+</script>
+
+<svelte:head>
+  {@html `<style>${css}</style>`}
+</svelte:head>
+
+{#if fallback}
+  {@const attrs = { [`data-union-${key}`]: "fallback" }}
+  <div {...attrs}>
+    {@render fallback()}
+  </div>
+{/if}
+
+{#each variantValues as v (v)}
+  {@const snippet = (snippets as unknown as Record<V, Snippet<[T]>>)[v]}
+  {@const attrs = { [`data-union-${key}`]: v }}
+  <div {...attrs}>
+    {@render snippet(fields as T)}
+  </div>
+{/each}

package/dist/UnionVariants.svelte.d.ts

@@ -0,0 +1,115 @@
+import type { Snippet } from "svelte";
+import type { InferDiscriminator } from "./infer-discriminator.js";
+type DiscriminatorValues<K extends string, T> = T extends Record<K, {
+    value(): infer V;
+}> ? V extends string ? V : never : never;
+type NarrowToVariant<K extends string, T, V> = T extends Record<K, {
+    value(): V;
+}> ? T : never;
+type ReservedProps = "fields" | "key" | "fallback" | "partial";
+type FieldKeys<T> = {
+    [P in keyof T]: T[P] extends {
+        value(): unknown;
+    } ? P : never;
+}[keyof T];
+type VariantFieldKeys<K extends string, T, V extends string> = Exclude<FieldKeys<NarrowToVariant<K, T, V>>, K>;
+type OtherVariantsFieldKeys<K extends string, T, V extends string, OtherV extends string = Exclude<DiscriminatorValues<K, T>, V>> = OtherV extends OtherV ? VariantFieldKeys<K, T, OtherV> : never;
+type SharedFieldKeys<K extends string, T, V extends string> = VariantFieldKeys<K, T, V> & OtherVariantsFieldKeys<K, T, V>;
+type AllSharedFieldKeys<K extends string, T, V extends string = DiscriminatorValues<K, T>> = V extends V ? SharedFieldKeys<K, T, V> : never;
+type HasField<T, P> = P extends keyof T ? T[P] extends {
+    value(): unknown;
+} ? true : false : false;
+type FieldExistsInAll<K extends string, T, P extends string, V extends string = DiscriminatorValues<K, T>> = V extends V ? HasField<NarrowToVariant<K, T, V>, P> : never;
+type IsCommonField<K extends string, T, P extends string> = false extends FieldExistsInAll<K, T, P> ? false : true;
+type FieldValueType<K extends string, T, V extends string, P extends string> = NarrowToVariant<K, T, V>[P & keyof NarrowToVariant<K, T, V>] extends {
+    value(): infer R;
+} ? R : never;
+type AllFieldValueTypes<K extends string, T, P extends string, V extends string = DiscriminatorValues<K, T>> = V extends V ? FieldValueType<K, T, V, P> : never;
+type FieldTypeMatchesInVariant<K extends string, T, P extends string, V extends string, Union = AllFieldValueTypes<K, T, P>> = [Union] extends [FieldValueType<K, T, V, P>] ? true : false;
+type FieldHasSameTypeInAll<K extends string, T, P extends string, V extends string = DiscriminatorValues<K, T>> = V extends V ? FieldTypeMatchesInVariant<K, T, P, V> : never;
+type IsUniformTypeField<K extends string, T, P extends string> = false extends FieldHasSameTypeInAll<K, T, P> ? false : true;
+type PartiallySharedFieldKeys<K extends string, T> = {
+    [P in AllSharedFieldKeys<K, T>]: IsCommonField<K, T, P & string> extends true ? never : P;
+}[AllSharedFieldKeys<K, T>];
+type MixedTypeFieldKeys<K extends string, T> = {
+    [P in AllSharedFieldKeys<K, T>]: IsCommonField<K, T, P & string> extends true ? IsUniformTypeField<K, T, P & string> extends true ? never : P : never;
+}[AllSharedFieldKeys<K, T>];
+type CommonFieldKeys<K extends string, T> = {
+    [P in AllSharedFieldKeys<K, T>]: IsCommonField<K, T, P & string> extends true ? IsUniformTypeField<K, T, P & string> extends true ? P : never : never;
+}[AllSharedFieldKeys<K, T>];
+type ValidateNoPartiallySharedFields<K extends string, T> = [
+    PartiallySharedFieldKeys<K, T>
+] extends [never] ? T : `Error: Field '${PartiallySharedFieldKeys<K, T> & string}' exists in some variants but not all. Fields must be either unique to one variant or common to all variants.`;
+type ValidateNoMixedTypeFields<K extends string, T> = [MixedTypeFieldKeys<K, T>] extends [never] ? T : `Error: Field '${MixedTypeFieldKeys<K, T> & string}' exists in all variants but with different types. Shared fields must have the same type across all variants.`;
+type ValidateFields<K extends string, T> = [PartiallySharedFieldKeys<K, T>] extends [never] ? [MixedTypeFieldKeys<K, T>] extends [never] ? T : ValidateNoMixedTypeFields<K, T> : ValidateNoPartiallySharedFields<K, T>;
+type VariantOnlyFields<K extends string, T, V extends string> = Omit<NarrowToVariant<K, T, V>, CommonFieldKeys<K, T>>;
+type VariantSnippets<K extends string, T, V extends string, IsPartial extends boolean> = IsPartial extends true ? {
+    [P in Exclude<V, ReservedProps>]?: Snippet<[VariantOnlyFields<K, T, P>]>;
+} : {
+    [P in Exclude<V, ReservedProps>]: Snippet<[VariantOnlyFields<K, T, P>]>;
+};
+export type UnionVariantsPropsWithKey<K extends string, T extends Record<K, {
+    value(): unknown;
+}>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false> = {
+    fields: ValidateFields<K, T>;
+    key: K;
+    /** Optional snippet shown when no variant is selected */
+    fallback?: Snippet;
+    /** When true, variant snippets are optional (default: false) */
+    partial?: IsPartial;
+    /**
+     * CSS selector for the discriminator input element (select or radio container).
+     * When provided, uses this selector instead of the default name-based lookup.
+     * Example: "#method-select" for a select, or "#radio-group" for radios
+     */
+    selector?: string;
+} & VariantSnippets<K, T, V, IsPartial>;
+export type UnionVariantsPropsInferred<T extends Record<string, {
+    value(): unknown;
+}>, K extends string = InferDiscriminator<T> extends infer I ? (I extends string ? I : never) : never, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false> = InferDiscriminator<T> extends string ? {
+    fields: ValidateFields<K, T>;
+    key?: K;
+    fallback?: Snippet;
+    partial?: IsPartial;
+    selector?: string;
+} & VariantSnippets<K, T, V, IsPartial> : {
+    fields: InferDiscriminator<T>;
+    key: never;
+};
+export type UnionVariantsProps<K extends string, T extends Record<K, {
+    value(): unknown;
+}>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false> = UnionVariantsPropsWithKey<K, T, V, IsPartial>;
+declare function $$render<K extends string, T extends Record<K, {
+    value(): unknown;
+}>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false>(): {
+    props: UnionVariantsProps<K, T, V, IsPartial>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<K extends string, T extends Record<K, {
+    value(): unknown;
+}>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false> {
+    props(): ReturnType<typeof $$render<K, T, V, IsPartial>>['props'];
+    events(): ReturnType<typeof $$render<K, T, V, IsPartial>>['events'];
+    slots(): ReturnType<typeof $$render<K, T, V, IsPartial>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <K extends string, T extends Record<K, {
+        value(): unknown;
+    }>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<K, T, V, IsPartial>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<K, T, V, IsPartial>['props']>, ReturnType<__sveltets_Render<K, T, V, IsPartial>['events']>, ReturnType<__sveltets_Render<K, T, V, IsPartial>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<K, T, V, IsPartial>['bindings']>;
+    } & ReturnType<__sveltets_Render<K, T, V, IsPartial>['exports']>;
+    <K extends string, T extends Record<K, {
+        value(): unknown;
+    }>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<K, T, V, IsPartial>['props']> & {}): ReturnType<__sveltets_Render<K, T, V, IsPartial>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
+}
+declare const UnionVariants: $$IsomorphicComponent;
+type UnionVariants<K extends string, T extends Record<K, {
+    value(): unknown;
+}>, V extends string = DiscriminatorValues<K, T>, IsPartial extends boolean = false> = InstanceType<typeof UnionVariants<K, T, V, IsPartial>>;
+export default UnionVariants;

package/dist/discriminated-fields.d.ts

@@ -0,0 +1,70 @@
+import type { RemoteFormField, RemoteFormFieldType } from '@sveltejs/kit';
+export type DiscriminatedData<T> = T extends {
+    set: (v: infer D) => unknown;
+} ? D : never;
+type ExtractFieldValue<F> = F extends RemoteFormField<infer V> ? V : never;
+type RadioProps = {
+    name: string;
+    type: 'radio';
+    value?: string;
+    'aria-invalid': boolean | 'false' | 'true' | undefined;
+    get checked(): boolean;
+    set checked(value: boolean);
+};
+type NonRadioAsArgs<Type extends string, Value> = Type extends 'checkbox' ? Value extends string[] ? [type: Type, value: Value[number] | (string & {})] : [type: Type] : Type extends 'submit' | 'hidden' ? [type: Type, value: Value | (string & {})] : [type: Type];
+type StrictDiscriminatorField<Value extends string, BaseField extends RemoteFormField<Value>> = Omit<BaseField, 'as'> & {
+    as(type: 'radio', value: Value): RadioProps;
+    as<T extends Exclude<RemoteFormFieldType<Value>, 'radio'>>(...args: NonRadioAsArgs<T, Value>): ReturnType<BaseField['as']>;
+};
+type UnifyField<F, V extends string = ExtractFieldValue<F> & string> = StrictDiscriminatorField<V, RemoteFormField<V>>;
+type Setter<K extends string, T, D = DiscriminatedData<T>> = {
+    set: <V extends D[K & keyof D]>(data: Extract<D, {
+        [P in K]: V;
+    }>) => void;
+};
+type Keys<T> = T extends unknown ? keyof T : never;
+type KeyValue<K extends string, V> = {
+    [P in `${K}Value`]: V;
+};
+type Fields<T> = {
+    [P in Keys<T>]: T extends Record<P, infer V> ? V : never;
+};
+type Variant<K extends string, T, V> = KeyValue<K, V> & Fields<T>;
+type Narrowed<K extends string, T> = T extends {
+    [P in K]: {
+        value(): infer V;
+    };
+} ? Variant<K, T, V> : never;
+type Union<K extends string, T> = Narrowed<K, T> | Variant<K, T, undefined>;
+type FieldUnion<K extends string, T> = T extends Record<K, infer F> ? F : never;
+type UnifiedDiscriminator<K extends string, T, F = FieldUnion<K, T>> = {
+    readonly [P in K]: [F] extends [never] ? never : UnifyField<F>;
+};
+type DiscriminatedFields<K extends string, T> = Setter<K, T> & Union<K, T> & UnifiedDiscriminator<K, T>;
+/**
+ * Wraps discriminated union form fields for type-safe access.
+ * - All original fields pass through unchanged (type, issues, allIssues, etc.)
+ * - `set` is overridden with type-safe version
+ * - `${key}Value` is added for discriminator value (e.g., `reward.typeValue`)
+ * - Discriminator field `.as("radio", value)` is type-safe (only valid values allowed)
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const priority = $derived(discriminatedFields("level", priorityForm.fields));
+ * </script>
+ *
+ * <input {...priority.level.as("radio", "high")} /> <!-- type-safe: only valid values allowed -->
+ * ```
+ *
+ * @param key - Discriminator key (e.g. 'type')
+ * @param fields - Form fields from a discriminated union schema
+ * @returns Passthrough object with type-safe set(), ${key}Value, and .as("radio", value)
+ */
+export declare function discriminatedFields<K extends string, T extends {
+    set: (v: never) => unknown;
+} & Record<K, {
+    value(): unknown;
+    as(type: 'radio', value: string): object;
+}>>(key: K, fields: T): DiscriminatedFields<K, T>;
+export {};

package/dist/discriminated-fields.js

@@ -0,0 +1,35 @@
+/**
+ * Wraps discriminated union form fields for type-safe access.
+ * - All original fields pass through unchanged (type, issues, allIssues, etc.)
+ * - `set` is overridden with type-safe version
+ * - `${key}Value` is added for discriminator value (e.g., `reward.typeValue`)
+ * - Discriminator field `.as("radio", value)` is type-safe (only valid values allowed)
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const priority = $derived(discriminatedFields("level", priorityForm.fields));
+ * </script>
+ *
+ * <input {...priority.level.as("radio", "high")} /> <!-- type-safe: only valid values allowed -->
+ * ```
+ *
+ * @param key - Discriminator key (e.g. 'type')
+ * @param fields - Form fields from a discriminated union schema
+ * @returns Passthrough object with type-safe set(), ${key}Value, and .as("radio", value)
+ */
+export function discriminatedFields(key, fields) {
+    const proxy = new Proxy(fields, {
+        get(target, prop) {
+            if (prop === `${key}Value`)
+                return target[key].value();
+            if (prop === 'set')
+                return (data) => target.set(data);
+            return Reflect.get(target, prop);
+        },
+        has(target, prop) {
+            return prop === `${key}Value` || prop in target;
+        }
+    });
+    return proxy;
+}

package/dist/index.d.ts

@@ -1,39 +1,4 @@
-export type DiscriminatedData<T> = T extends {
-    set: (v: infer D) => unknown;
-} ? D : never;
-type Setter<K extends string, T, D = DiscriminatedData<T>> = {
-    set: <V extends D[K & keyof D]>(data: Extract<D, {
-        [P in K]: V;
-    }>) => void;
-};
-type Keys<T> = T extends unknown ? keyof T : never;
-type KeyValue<K extends string, V> = {
-    [P in `${K}Value`]: V;
-};
-type Fields<T> = {
-    [P in Keys<T>]: T extends Record<P, infer V> ? V : never;
-};
-type Variant<K extends string, T, V> = KeyValue<K, V> & Fields<T>;
-type Narrowed<K extends string, T> = T extends {
-    [P in K]: {
-        value(): infer V;
-    };
-} ? Variant<K, T, V> : never;
-type Union<K extends string, T> = Narrowed<K, T> | Variant<K, T, undefined>;
-type DiscriminatedFields<K extends string, T> = Setter<K, T> & Union<K, T>;
-/**
- * Wraps discriminated union form fields, adding ${key}Value for type narrowing.
- * - All original fields pass through unchanged (type, issues, allIssues, etc.)
- * - `set` is overridden with type-safe version
- * - `${key}Value` is added for discriminator value (e.g., `reward.typeValue`)
- *
- * @param key - Discriminator key (e.g. 'type')
- * @param fields - Form fields from a discriminated union schema
- * @returns Passthrough object with type-safe set() and ${key}Value for narrowing
- */
-export declare function discriminatedFields<K extends string, T extends {
-    set: (v: never) => unknown;
-} & Record<K, {
-    value(): unknown;
-}>>(key: K, fields: T): DiscriminatedFields<K, T>;
-export {};
+export { discriminatedFields, type DiscriminatedData } from './discriminated-fields.js';
+export type { InferDiscriminator } from './infer-discriminator.js';
+export { default as UnionVariants } from './UnionVariants.svelte';
+export type { UnionVariantsProps } from './UnionVariants.svelte';

package/dist/index.js

@@ -1,25 +1,4 @@
-/**
- * Wraps discriminated union form fields, adding ${key}Value for type narrowing.
- * - All original fields pass through unchanged (type, issues, allIssues, etc.)
- * - `set` is overridden with type-safe version
- * - `${key}Value` is added for discriminator value (e.g., `reward.typeValue`)
- *
- * @param key - Discriminator key (e.g. 'type')
- * @param fields - Form fields from a discriminated union schema
- * @returns Passthrough object with type-safe set() and ${key}Value for narrowing
- */
-export function discriminatedFields(key, fields) {
-    const proxy = new Proxy(fields, {
-        get(target, prop) {
-            if (prop === `${key}Value`)
-                return target[key].value();
-            if (prop === 'set')
-                return (data) => target.set(data);
-            return Reflect.get(target, prop);
-        },
-        has(target, prop) {
-            return prop === `${key}Value` || prop in target;
-        }
-    });
-    return proxy;
-}
+// Re-export discriminatedFields function and types
+export { discriminatedFields } from './discriminated-fields.js';
+// Re-export UnionVariants component and its types
+export { default as UnionVariants } from './UnionVariants.svelte';

package/dist/infer-discriminator.d.ts

@@ -0,0 +1,11 @@
+type AllKeys<T> = T extends T ? keyof T : never;
+type HasLiteralValue<T, K> = K extends keyof T ? T[K] extends {
+    value(): infer V;
+} ? V extends string ? string extends V ? false : true : false : false : false;
+type IsDiscriminatorInAll<T, K> = T extends T ? HasLiteralValue<T, K> : never;
+type IsDiscriminator<T, K> = [IsDiscriminatorInAll<T, K>] extends [true] ? true : false;
+type DiscriminatorKeys<T, K = AllKeys<T>> = K extends K ? IsDiscriminator<T, K> extends true ? K : never : never;
+type IsUnion<T, U = T> = T extends T ? ([U] extends [T] ? false : true) : never;
+export type InferDiscriminator<T> = DiscriminatorKeys<T> extends infer Keys ? [Keys] extends [never] ? "Error: No valid discriminator found. A discriminator must exist in all variants with distinct string literal values." : IsUnion<Keys> extends true ? `Error: Multiple discriminator candidates found: ${Keys & string}. Please specify the key explicitly.` : Keys : never;
+export type IsValidInference<T> = InferDiscriminator<T> extends `Error: ${string}` ? false : true;
+export type { DiscriminatorKeys };

package/dist/infer-discriminator.js

@@ -0,0 +1,5 @@
+// Auto-detect discriminator key from a union of form field objects
+//
+// This allows discriminatedFields() and UnionVariants to work without
+// explicitly specifying the discriminator key, when it can be unambiguously inferred.
+export {};

package/package.json

@@ -1,11 +1,14 @@
 {
 	"name": "sveltekit-discriminated-fields",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"description": "Type-safe discriminated union support for SvelteKit form fields",
 	"type": "module",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		}
 	},
@@ -13,11 +16,10 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "tsc -p tsconfig.build.json",
-		"check": "tsc --noEmit",
-		"test:types": "tsc -p test/types/tsconfig.json",
-		"test:runtime": "npm run build && tsc -p test/runtime/tsconfig.json && npx tsx test/runtime/has.test.ts",
-		"test": "npm run test:types && npm run test:runtime",
+		"build": "svelte-package -i src -o dist",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"test:types": "npm run --prefix test build && svelte-check --tsconfig ./test/tsconfig.json",
+		"test": "npm run test:types && playwright test",
 		"prepublishOnly": "npm run test && npm run build"
 	},
 	"keywords": [
@@ -33,7 +35,18 @@
 		"type": "git",
 		"url": "https://github.com/robertadamsonsmith/sveltekit-discriminated-fields"
 	},
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.27.0",
+		"svelte": "^5.0.0"
+	},
 	"devDependencies": {
+		"@playwright/test": "^1.57.0",
+		"@sveltejs/package": "^2.0.0",
+		"@types/node": "^25.0.3",
+		"@typescript-eslint/types": "^8.51.0",
+		"playwright": "^1.57.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0"
 	}
 }