perf(eidos): code-split 16 picker-family recipes (Phase 3, batch 4)

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>

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';

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';

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';

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';

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';

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

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';

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';

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';
 

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.

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.

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';

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';

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

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';

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';

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';