Consolidate Soma field runtimes

src/uix/soma/components/color-field/color-field-provider.svelte.ts

@@ -120,6 +120,8 @@ export interface ColorFieldOpts
 export class ColorFieldProvider {
 	readonly opts: ColorFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
+	readonly soma: Soma;
+	readonly runtime: SomaRuntime;
 	static readonly ctx = context<ColorFieldProvider>('ColorField');
 	static get(): ColorFieldProvider | undefined {
 		return this.ctx.getOr(undefined) as ColorFieldProvider | undefined;
@@ -131,7 +133,6 @@ export class ColorFieldProvider {
 		return new ColorFieldProvider(opts);
 	}
 
-	readonly soma = Soma.get();
 	readonly field = FieldProvider.get();
 
 	segmentValues = $state<ColorSegmentObj>(initializeColorSegmentValues());
@@ -142,14 +143,14 @@ export class ColorFieldProvider {
 
 	private constructor(opts: ColorFieldOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
+		this.soma = Soma.require();
-			.runtime(colorFieldMorfo, {})
+		this.runtime = this.soma.runtime(colorFieldMorfo, {});
-			.part('provider', {
+		this.runtimePart = this.runtime.part('provider', {
-				id: opts.id,
+			id: opts.id,
-				ref: opts.ref,
+			ref: opts.ref,
-				owner: this,
+			owner: this,
-				context: ColorFieldProvider.ctx
+			context: ColorFieldProvider.ctx
-			});
+		});
 
 		// Seed segments from initial value.
 		if (this.opts.value.current) {
@@ -423,17 +424,15 @@ export class ColorFieldLabelProvider {
 
 	private constructor(opts: ColorFieldLabelOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(colorFieldMorfo, {})
-			.part('label', {
-				id: opts.id,
-				ref: opts.ref,
-				owner: this,
-				onRefChange: (v) => {
-					this.provider.setLabelNode(v);
-				}
-			});
 		this.provider = ColorFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('label', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			onRefChange: (v) => {
+				this.provider.setLabelNode(v);
+			}
+		});
 	}
 
 	readonly onclick = () => {
@@ -473,15 +472,13 @@ export class ColorFieldInputProvider {
 
 	private constructor(opts: ColorFieldInputOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(colorFieldMorfo, {})
-			.part('input', {
-				id: opts.id,
-				ref: opts.ref,
-				owner: this,
-				onRefChange: (v) => this.provider.setFieldNode(v)
-			});
 		this.provider = ColorFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('input', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			onRefChange: (v) => this.provider.setFieldNode(v)
+		});
 		this.provider.setFieldNode(opts.ref.current);
 
 		watch(
@@ -525,11 +522,13 @@ abstract class BaseColorSegmentProvider {
 
 	protected constructor(opts: WithRefOpts, part: EditableColorSegmentPart) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(colorFieldMorfo, {})
-			.part('segment', { id: opts.id, ref: opts.ref, owner: this });
 		this.part = part;
 		this.provider = ColorFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('segment', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 	}
 
 	protected get config(): ChannelConfig {
@@ -776,9 +775,12 @@ export class ColorLiteralSegmentProvider {
 
 	private constructor(opts: WithRefOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
+		const provider = ColorFieldProvider.require();
-			.runtime(colorFieldMorfo, {})
+		this.runtimePart = provider.runtime.part('segment', {
-			.part('segment', { id: opts.id, ref: opts.ref, owner: this });
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 	}
 
 	readonly props = $derived.by(() =>
@@ -798,7 +800,7 @@ export class ColorLiteralSegmentProvider {
 // ── Dispatcher ──────────────────────────────────────────────────────────────
 
 import type { ColorSegmentPart } from '../../external/colors';
-import type { SomaRuntimePart } from '../../runtime.svelte';
+import type { SomaRuntime, SomaRuntimePart } from '../../runtime.svelte';
 
 export function createColorSegmentProvider(part: ColorSegmentPart, opts: WithRefOpts) {
 	switch (part) {
@@ -840,10 +842,12 @@ export class ColorFieldFormatSelectProvider {
 
 	private constructor(opts: ColorFieldFormatSelectOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(colorFieldMorfo, {})
-			.part('format-select', { id: opts.id, ref: opts.ref, owner: this });
 		this.provider = ColorFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('format-select', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 	}
 
 	readonly options: ColorFormat[] = $derived.by(() => this.provider.resolvedAllowedFormats);
@@ -884,10 +888,12 @@ export class ColorFieldHiddenInputProvider {
 
 	private constructor(opts: ColorFieldHiddenInputOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(colorFieldMorfo, {})
-			.part('input', { id: opts.id, ref: opts.ref, owner: this });
 		this.provider = ColorFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('input', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 	}
 
 	readonly props = $derived.by(() => {

src/uix/soma/components/date-field/date-field-provider.svelte.ts

@@ -70,7 +70,7 @@ import { DATE_FIELD_LANGS } from './langs';
 // ── Contract ─────────────────────────────────────────────────────────────────
 
 import { dateFieldMorfo } from '../../../morfo/components/date-field';
-import type { SomaRuntimePart } from '../../runtime.svelte';
+import type { SomaRuntime, SomaRuntimePart } from '../../runtime.svelte';
 
 const attrs = createAttrs(dateFieldMorfo);
 
@@ -170,6 +170,7 @@ export interface DateFieldOpts
 export class DateFieldProvider {
 	readonly opts: DateFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
+	readonly runtime: SomaRuntime;
 	static readonly ctx = context<DateFieldProvider>('DateField');
 	static get(): DateFieldProvider | undefined {
 		return this.ctx.getOr(undefined) as DateFieldProvider | undefined;
@@ -225,7 +226,8 @@ export class DateFieldProvider {
 
 	private constructor(opts: DateFieldOpts) {
 		this.opts = opts;
-		this.runtimePart = this.soma.runtime(dateFieldMorfo, {}).part('provider', {
+		this.runtime = this.soma.runtime(dateFieldMorfo, {});
+		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
@@ -734,15 +736,13 @@ export class DateFieldInputProvider {
 
 	private constructor(opts: DateFieldInputOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(dateFieldMorfo, {})
-			.part('input', {
-				id: opts.id,
-				ref: opts.ref,
-				owner: this,
-				onRefChange: (v) => this.provider.setFieldNode(v)
-			});
 		this.provider = DateFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('input', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			onRefChange: (v) => this.provider.setFieldNode(v)
+		});
 		this.provider.setFieldNode(opts.ref.current);
 
 		watch(
@@ -797,15 +797,13 @@ export class DateFieldLabelProvider {
 
 	private constructor(opts: WithRefOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(dateFieldMorfo, {})
-			.part('label', {
-				id: opts.id,
-				ref: opts.ref,
-				owner: this,
-				onRefChange: (v) => this.provider.setLabelNode(v)
-			});
 		this.provider = DateFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('label', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			onRefChange: (v) => this.provider.setLabelNode(v)
+		});
 		this.provider.setLabelNode(opts.ref.current);
 	}
 
@@ -883,10 +881,12 @@ abstract class BaseNumericSegmentProvider {
 		config: SegmentConfig
 	) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(dateFieldMorfo, {})
-			.part('segment', { id: opts.id, ref: opts.ref, owner: this });
 		this.provider = DateFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('segment', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 		this.part = part;
 		this.config = config;
 	}
@@ -1346,17 +1346,15 @@ class DateFieldDayPeriodSegmentProvider {
 
 	constructor(opts: WithRefOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(dateFieldMorfo, {})
-			.part('segment', {
-				id: opts.id,
-				ref: opts.ref,
-				owner: this,
-				onRefChange: (v) => {
-					this.provider.dayPeriodNode = v;
-				}
-			});
 		this.provider = DateFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('segment', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			onRefChange: (v) => {
+				this.provider.dayPeriodNode = v;
+			}
+		});
 	}
 
 	get announcer(): Announcer {
@@ -1441,10 +1439,12 @@ class DateFieldLiteralSegmentProvider {
 
 	constructor(opts: WithRefOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(dateFieldMorfo, {})
-			.part('segment', { id: opts.id, ref: opts.ref, owner: this });
 		this.provider = DateFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('segment', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 	}
 
 	readonly props = $derived.by(() =>
@@ -1467,10 +1467,12 @@ class DateFieldTimeZoneSegmentProvider {
 
 	constructor(opts: WithRefOpts) {
 		this.opts = opts;
-		this.runtimePart = Soma.require()
-			.runtime(dateFieldMorfo, {})
-			.part('segment', { id: opts.id, ref: opts.ref, owner: this });
 		this.provider = DateFieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('segment', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this
+		});
 	}
 
 	get directionalKeys() {