From 18edecba5bc8975ffeb33de4146e02804f8f89af Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 23 May 2026 00:21:39 +0200
Subject: [PATCH] fix(date-range-field demo): key each segments by index, not
 seg.part
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Soma's segments array uses `'literal'` as the part for every visual
separator (e.g. the `/` between dd / mm / yyyy). Keying the {#each}
by `seg.part` produced duplicate keys → `each_key_duplicate` runtime
error at the second `literal` separator. Switch to positional key
`(i)` — segments don't reorder, so positional is stable and correct.

Snippet template strings updated to match so the visible code in
the Live tab reflects the right pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../uix/components/date-range-field/+page.svelte     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/routes/uix/components/date-range-field/+page.svelte b/web/routes/uix/components/date-range-field/+page.svelte
index 769060b25..c3c903d8c 100644
--- a/web/routes/uix/components/date-range-field/+page.svelte
+++ b/web/routes/uix/components/date-range-field/+page.svelte
@@ -95,14 +95,14 @@
 			'  <DateRangeField.Label>Period</DateRangeField.Label>',
 			'  <DateRangeField.Input type="start">',
 			'    {#snippet children({ segments })}',
-			'      {#each segments as seg}',
+			'      {#each segments as seg, i (i)}',
 			'        <DateField.Segment part={seg.part}>{seg.value}</DateField.Segment>',
 			'      {/each}',
 			'    {/snippet}',
 			'  </DateRangeField.Input>',
 			'  <DateRangeField.Input type="end">',
 			'    {#snippet children({ segments })}',
-			'      {#each segments as seg}',
+			'      {#each segments as seg, i (i)}',
 			'        <DateField.Segment part={seg.part}>{seg.value}</DateField.Segment>',
 			'      {/each}',
 			'    {/snippet}',
@@ -137,14 +137,14 @@
 			'  <DateRangeField.Label>Period</DateRangeField.Label>',
 			'  <DateRangeField.Input type="start">',
 			'    {#snippet children({ segments })}',
-			'      {#each segments as seg}',
+			'      {#each segments as seg, i (i)}',
 			'        <DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>',
 			'      {/each}',
 			'    {/snippet}',
 			'  </DateRangeField.Input>',
 			'  <DateRangeField.Input type="end">',
 			'    {#snippet children({ segments })}',
-			'      {#each segments as seg}',
+			'      {#each segments as seg, i (i)}',
 			'        <DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>',
 			'      {/each}',
 			'    {/snippet}',
@@ -194,14 +194,14 @@
 				<DateRangeField.Label>Period</DateRangeField.Label>
 				<DateRangeField.Input type="start">
 					{#snippet children({ segments })}
-						{#each segments as seg (seg.part)}
+						{#each segments as seg, i (i)}
 							<DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>
 						{/each}
 					{/snippet}
 				</DateRangeField.Input>
 				<DateRangeField.Input type="end">
 					{#snippet children({ segments })}
-						{#each segments as seg (seg.part)}
+						{#each segments as seg, i (i)}
 							<DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>
 						{/each}
 					{/snippet}