From 725f7abe37782df4ba0ab1e5f1c54bda6f8c3c0c Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 6 Jun 2026 02:15:50 +0200
Subject: [PATCH] perf(eidos): code-split 16 picker-family recipes (Phase 3,
 batch 4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

time-range-field date-range-field date-field time-field color-field
calendar range-calendar month-grid year-grid date-picker date-range-picker
time-picker time-range-picker color-picker picker-shell slider.

The picker family composes via SOMA headless parts (Calendar, Slider,
Popover) + `import type` for grids — so the eidos recipes don't auto-load
on mount. Added explicit recipe imports to each composite (leaf-first so
the composite overrides it):
- date-picker → calendar + month-grid + year-grid
- date-range-picker → range-calendar
- date-range-field → date-field ; time-range-field → time-field
- color/time/time-range-picker → slider
- picker-shell → popover (shell content is a soma Popover)

Verified in browser: date-picker calendar day inline-flex/30px (was
block); date-range-field segment grid/radius 4px; color-picker slider
thumb 20px (was 0px). index.css 36→20 @imports. Monolith 533,103→402,082
raw (−131 KB) / 74,716→63,500 gz (−11.2 KB). check 0 errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../eidos/components/calendar/calendar.svelte    |  1 +
 .../components/color-field/color-field.svelte    |  1 +
 .../components/color-picker/color-picker.svelte  |  3 +++
 .../components/date-field/date-field.svelte      |  1 +
 .../components/date-picker/date-picker.svelte    |  7 +++++++
 .../date-range-field/date-range-field.svelte     |  3 +++
 .../date-range-picker/date-range-picker.svelte   |  3 +++
 .../components/month-grid/month-grid.svelte      |  1 +
 .../components/picker-shell/picker-shell.svelte  |  4 ++++
 .../range-calendar/range-calendar.svelte         |  1 +
 src/uix/eidos/components/slider/slider.svelte    |  1 +
 .../components/time-field/time-field.svelte      |  1 +
 .../components/time-picker/time-picker.svelte    |  3 +++
 .../time-range-field/time-range-field.svelte     |  3 +++
 .../time-range-picker/time-range-picker.svelte   |  3 +++
 .../eidos/components/year-grid/year-grid.svelte  |  1 +
 src/uix/eidos/index.css                          | 16 ----------------
 17 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/uix/eidos/components/calendar/calendar.svelte b/src/uix/eidos/components/calendar/calendar.svelte
index 33c87f24c..25ed92ddf 100644
--- a/src/uix/eidos/components/calendar/calendar.svelte
+++ b/src/uix/eidos/components/calendar/calendar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './calendar.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Calendar from '$soma/components/calendar';
 	import type { CalendarProps, CalendarProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/components/color-field/color-field.svelte b/src/uix/eidos/components/color-field/color-field.svelte
index cda844f56..203e0e567 100644
--- a/src/uix/eidos/components/color-field/color-field.svelte
+++ b/src/uix/eidos/components/color-field/color-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './color-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as ColorField from '$soma/components/color-field';
 	import type { ColorFieldProps } from './types';
diff --git a/src/uix/eidos/components/color-picker/color-picker.svelte b/src/uix/eidos/components/color-picker/color-picker.svelte
index 2f71a4bbf..47d87a230 100644
--- a/src/uix/eidos/components/color-picker/color-picker.svelte
+++ b/src/uix/eidos/components/color-picker/color-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Channel sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
+	import '$uix/eidos/components/slider/slider.css';
+	import './color-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as ColorPicker from '$soma/components/color-picker';
 	import { setColorPickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/date-field/date-field.svelte b/src/uix/eidos/components/date-field/date-field.svelte
index dd88e006f..f8f2c11f4 100644
--- a/src/uix/eidos/components/date-field/date-field.svelte
+++ b/src/uix/eidos/components/date-field/date-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './date-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as DateField from '$soma/components/date-field';
 	import type { DateFieldProps } from './types';
diff --git a/src/uix/eidos/components/date-picker/date-picker.svelte b/src/uix/eidos/components/date-picker/date-picker.svelte
index 0944caac8..3b818d4b3 100644
--- a/src/uix/eidos/components/date-picker/date-picker.svelte
+++ b/src/uix/eidos/components/date-picker/date-picker.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+	// Renders calendar / month-grid / year-grid markup via soma parts (the view sub-components
+	// only `import type`), without mounting the eidos components — so load their recipes here,
+	// before date-picker.css so it can override them.
+	import '$uix/eidos/components/calendar/calendar.css';
+	import '$uix/eidos/components/month-grid/month-grid.css';
+	import '$uix/eidos/components/year-grid/year-grid.css';
+	import './date-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as DatePicker from '$soma/components/date-picker';
 	import { setDatePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/date-range-field/date-range-field.svelte b/src/uix/eidos/components/date-range-field/date-range-field.svelte
index 4a7ba2305..3ea3ab8ab 100644
--- a/src/uix/eidos/components/date-range-field/date-range-field.svelte
+++ b/src/uix/eidos/components/date-range-field/date-range-field.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Renders date-field markup without mounting eidos <DateField> — load its recipe first.
+	import '$uix/eidos/components/date-field/date-field.css';
+	import './date-range-field.css';
 	/**
 	 * Eidos `<DateRangeField>` — root. Sets the visual cascade
 	 * (data-size / data-variant / data-color) that both endpoint
diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.svelte b/src/uix/eidos/components/date-range-picker/date-range-picker.svelte
index a753285b2..2424b692b 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker.svelte
+++ b/src/uix/eidos/components/date-range-picker/date-range-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Renders range-calendar markup without mounting eidos <RangeCalendar> — load its recipe first.
+	import '$uix/eidos/components/range-calendar/range-calendar.css';
+	import './date-range-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as DateRangePicker from '$soma/components/date-range-picker';
 	import { setDateRangePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/month-grid/month-grid.svelte b/src/uix/eidos/components/month-grid/month-grid.svelte
index a6ebcb56f..e0fc39513 100644
--- a/src/uix/eidos/components/month-grid/month-grid.svelte
+++ b/src/uix/eidos/components/month-grid/month-grid.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './month-grid.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as MonthGrid from '$soma/components/month-grid';
 	import type { MonthGridProps, MonthGridProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/components/picker-shell/picker-shell.svelte b/src/uix/eidos/components/picker-shell/picker-shell.svelte
index 82111da37..dd8b0df43 100644
--- a/src/uix/eidos/components/picker-shell/picker-shell.svelte
+++ b/src/uix/eidos/components/picker-shell/picker-shell.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	// The shell renders content inside a soma Popover ([data-popover-content]); picker-shell.css
+	// tunes that content, but its base chrome (bg/radius/shadow) comes from popover.css — load it.
+	import '$uix/eidos/components/popover/popover.css';
+	import './picker-shell.css';
 	import { getPickerShellHandle } from '$soma/components/picker-shell';
 	import type { PickerShellProps } from './types';
 
diff --git a/src/uix/eidos/components/range-calendar/range-calendar.svelte b/src/uix/eidos/components/range-calendar/range-calendar.svelte
index 78979bebf..ff63be840 100644
--- a/src/uix/eidos/components/range-calendar/range-calendar.svelte
+++ b/src/uix/eidos/components/range-calendar/range-calendar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './range-calendar.css';
 	/**
 	 * Eidos `<RangeCalendar>` — root wrapper around Soma's RangeCalendar
 	 * provider. Adds size / variant / color cascades; otherwise pass-through.
diff --git a/src/uix/eidos/components/slider/slider.svelte b/src/uix/eidos/components/slider/slider.svelte
index f4e8a7e15..ea66f55df 100644
--- a/src/uix/eidos/components/slider/slider.svelte
+++ b/src/uix/eidos/components/slider/slider.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './slider.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Slider>` — visual wrapper over Soma's slider primitive.
diff --git a/src/uix/eidos/components/time-field/time-field.svelte b/src/uix/eidos/components/time-field/time-field.svelte
index b791f41ef..d72eec6c6 100644
--- a/src/uix/eidos/components/time-field/time-field.svelte
+++ b/src/uix/eidos/components/time-field/time-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './time-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TimeField from '$soma/components/time-field';
 	import type { TimeFieldProps } from './types';
diff --git a/src/uix/eidos/components/time-picker/time-picker.svelte b/src/uix/eidos/components/time-picker/time-picker.svelte
index 1094761f7..18d8ea864 100644
--- a/src/uix/eidos/components/time-picker/time-picker.svelte
+++ b/src/uix/eidos/components/time-picker/time-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Hour/minute sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
+	import '$uix/eidos/components/slider/slider.css';
+	import './time-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TimePicker from '$soma/components/time-picker';
 	import { setTimePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/time-range-field/time-range-field.svelte b/src/uix/eidos/components/time-range-field/time-range-field.svelte
index 7b541236d..920d05cf4 100644
--- a/src/uix/eidos/components/time-range-field/time-range-field.svelte
+++ b/src/uix/eidos/components/time-range-field/time-range-field.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Renders time-field markup without mounting eidos <TimeField> — load its recipe first.
+	import '$uix/eidos/components/time-field/time-field.css';
+	import './time-range-field.css';
 	/**
 	 * Eidos `<TimeRangeField>` — root. Sets the visual cascade
 	 * (data-size / data-variant / data-color) that both endpoint
diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker.svelte b/src/uix/eidos/components/time-range-picker/time-range-picker.svelte
index 0184ffb02..f654eaef7 100644
--- a/src/uix/eidos/components/time-range-picker/time-range-picker.svelte
+++ b/src/uix/eidos/components/time-range-picker/time-range-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Hour/minute sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
+	import '$uix/eidos/components/slider/slider.css';
+	import './time-range-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TimeRangePicker from '$soma/components/time-range-picker';
 	import { setTimeRangePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/year-grid/year-grid.svelte b/src/uix/eidos/components/year-grid/year-grid.svelte
index 2a484db3d..ea793db1e 100644
--- a/src/uix/eidos/components/year-grid/year-grid.svelte
+++ b/src/uix/eidos/components/year-grid/year-grid.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './year-grid.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as YearGrid from '$soma/components/year-grid';
 	import type { YearGridProps, YearGridProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/index.css b/src/uix/eidos/index.css
index 0e2b721ed..a478476b4 100644
--- a/src/uix/eidos/index.css
+++ b/src/uix/eidos/index.css
@@ -78,22 +78,6 @@
 @import './components/section/section.css';
 @import './components/aspect-ratio/aspect-ratio.css';
 @import './components/auto-grid/auto-grid.css';
-@import './components/time-range-field/time-range-field.css';
-@import './components/date-range-field/date-range-field.css';
-@import './components/calendar/calendar.css';
-@import './components/range-calendar/range-calendar.css';
-@import './components/month-grid/month-grid.css';
-@import './components/year-grid/year-grid.css';
-@import './components/date-field/date-field.css';
-@import './components/date-picker/date-picker.css';
-@import './components/date-range-picker/date-range-picker.css';
-@import './components/time-field/time-field.css';
-@import './components/color-field/color-field.css';
-@import './components/picker-shell/picker-shell.css';
-@import './components/time-picker/time-picker.css';
-@import './components/time-range-picker/time-range-picker.css';
-@import './components/color-picker/color-picker.css';
-@import './components/slider/slider.css';
 @import './components/words/words.css';
 @import './components/table/table.css';
 @import './components/tree-view/tree-view.css';