@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/src/lib/constants.ts

@@ -1,8 +1,7 @@
 export const APP_DEFAULTS = {
 	// File upload limits
 	// TEMP (dev): raised 150 MB → 300 MB so large dev file-widget inputs aren't
-	// blocked client-side. The server request cap (COMPUTE_REQUEST_MAX_BYTES)
-	// still defaults to 256 MB, and base64 inflates a raw file by ~4/3, so
+	// blocked client-side. The server request cap is 256 MB, and base64 inflates a raw file by ~4/3, so
 	// anything over ~192 MB is rejected with a 413 after the client accepts it.
 	// Revert to 150 before release.
 	FILE_UPLOAD: {
@@ -18,16 +17,14 @@ export const APP_DEFAULTS = {
 		DRAWER_ANIMATION_MS: 350
 	},
 
-	// Solving indicator adaptive thresholds
+	// See createSolvingIndicator.
 	SOLVING_INDICATOR: {
-		/** If solve is faster than this, don't show indicator (ms) */
-		FAST_THRESHOLD_MS: 200,
-		/** If solve is slower than this, show indicator immediately (ms) */
-		SLOW_THRESHOLD_MS: 600,
-		/** Animation delay for solve indicator (ms) */
-		ANIMATION_DELAY: 300,
-		/** Number of solve durations to keep in history for averaging */
-		HISTORY_SIZE: 3
+		/** A solve that ends sooner shows no indicator (ms) */
+		SHOW_AFTER_MS: 400,
+		/** Once shown, the indicator stays at least this long (ms) */
+		MIN_VISIBLE_MS: 500,
+		/** Past this a solve counts as slow and the viewer dims its stale result (ms) */
+		SLOW_AFTER_MS: 2000
 	},
 
 	// File size formatting

package/src/lib/contexts/hostContext.svelte.ts

@@ -0,0 +1,51 @@
+import { getContext, setContext } from 'svelte';
+import type { GeometryKind } from '@selvajs/schemas';
+import type { UIHost } from '#lib/schema/host-support.js';
+
+// Tells InputControl which host it renders in and how to reach the host's own actions, without
+// threading a prop through every layout layer. Without a provider the host is Selva.
+
+export type GeometryPickResult =
+	| { outcome: 'picked'; summary: string }
+	| { outcome: 'cancelled' }
+	| { outcome: 'failed'; error: string };
+
+/** What a pick button can ask for: a Get Geometry filter's kinds, or Get Point/Line/Plane's own. */
+export type PickKind = GeometryKind | 'line' | 'plane';
+
+/** What a geometry input lets the user pick, as the host discovered it on the canvas. */
+export interface GeometryPickTarget {
+	/** The kinds its filter allows; absent when it takes anything. */
+	kinds?: readonly GeometryKind[];
+	/** 1 picks a single object. */
+	atMost?: number;
+}
+
+export interface HostActions {
+	host: UIHost;
+	/** Prompts in the Rhino viewport for a geometry input. The picked geometry stays in Grasshopper. */
+	pickGeometry?: (paramId: string) => Promise<GeometryPickResult>;
+	/** Empties a geometry input again, back to the definition's own value. */
+	clearGeometry?: (paramId: string) => void;
+	/**
+	 * Reports what the param holds after every pick or clear, including those another page asked
+	 * for; null when nothing is picked into it. Returns an unsubscribe.
+	 */
+	onGeometrySummary?: (paramId: string, listener: (summary: string | null) => void) => () => void;
+	describeGeometry?: (paramId: string) => GeometryPickTarget | undefined;
+	/** Presses a button input: one solve with `true`, then it goes back to `false`. */
+	trigger?: (paramId: string) => void;
+	/** Grasshopper refuses a press while it solves, so the button waits it out disabled. */
+	isSolving?: () => boolean;
+}
+
+const SELVA_HOST: HostActions = { host: 'selva' };
+const HOST_CONTEXT_KEY = Symbol('host-context');
+
+export function setHostContext(actions: HostActions): void {
+	setContext(HOST_CONTEXT_KEY, actions);
+}
+
+export function getHostContext(): HostActions {
+	return getContext<HostActions | undefined>(HOST_CONTEXT_KEY) ?? SELVA_HOST;
+}

package/src/lib/features/chart/plotly-compat.ts

@@ -0,0 +1,141 @@
+import { hsvToRgb } from '#lib/utils/color-space.js';
+
+// ============================================================================
+// Plotly 3 → 4 figure compatibility
+// ============================================================================
+//
+// Chart outputs come from whatever plugin version solved them, often one written against
+// Plotly 3. This rewrites the parts Plotly 4 draws differently or rejects, so those figures
+// keep their look. Figures that are already compatible pass through unchanged.
+
+type Json = Record<string, unknown>;
+
+export interface PlotlyFigure {
+	data: Json[];
+	layout?: Json;
+	config?: Json;
+	frames?: Json[];
+}
+
+const REMOVED_MAP_TRACES: Record<string, string> = {
+	scattermapbox: 'scattermap',
+	choroplethmapbox: 'choroplethmap',
+	densitymapbox: 'densitymap'
+};
+
+const MAPBOX_SUBPLOT = /^mapbox(\d*)$/;
+const BARE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const HSV_FUNCTION =
+	/^hsva?[\s(]+([-+\d.]+)%?[\s,]+([\d.]+)(%?)[\s,]+([\d.]+)(%?)(?:[\s,/]+([\d.]+)(%?))?[\s)]*$/i;
+
+const isObject = (v: unknown): v is Json =>
+	typeof v === 'object' && v !== null && !Array.isArray(v);
+
+/** Returns a rewritten copy; the input is not modified. */
+export function upgradePlotlyFigure(figure: PlotlyFigure): PlotlyFigure {
+	const out = structuredClone(figure);
+	const layout = out.layout ?? {};
+	normalizeColors(layout);
+
+	let migratedMaps = false;
+	for (const trace of out.data ?? []) {
+		if (!isObject(trace)) continue;
+		normalizeColors(trace);
+
+		const replacement = REMOVED_MAP_TRACES[trace.type as string];
+		if (replacement) {
+			trace.type = replacement;
+			if (typeof trace.subplot === 'string')
+				trace.subplot = trace.subplot.replace(MAPBOX_SUBPLOT, 'map$1');
+			migratedMaps = true;
+		} else if (trace.type === 'splom') {
+			keepSplomAxesUnlinked(trace);
+		}
+	}
+
+	if (migratedMaps) migrateMapLayout(layout);
+	// Frame data replaces trace data during playback, so it needs the same colour fixes.
+	for (const frame of out.frames ?? []) if (isObject(frame)) normalizeColors(frame);
+	return { ...out, layout };
+}
+
+// Plotly 4 links each dimension's x and y axes by default.
+function keepSplomAxesUnlinked(trace: Json) {
+	if (!Array.isArray(trace.dimensions)) return;
+	for (const dim of trace.dimensions) {
+		if (!isObject(dim)) continue;
+		const axis = isObject(dim.axis) ? dim.axis : (dim.axis = {});
+		if (!('matches' in axis)) axis.matches = false;
+	}
+}
+
+function migrateMapLayout(layout: Json) {
+	for (const key of Object.keys(layout)) {
+		const match = MAPBOX_SUBPLOT.exec(key);
+		if (!match) continue;
+
+		const map = layout[key];
+		delete layout[key];
+		const newKey = `map${match[1]}`;
+		if (newKey in layout || !isObject(map)) continue;
+
+		delete map.accesstoken;
+		// Stamen and mapbox:// styles have no map equivalent.
+		if (typeof map.style === 'string' && /^(stamen|mapbox:\/\/)/.test(map.style))
+			map.style = 'open-street-map';
+		layout[newKey] = map;
+	}
+}
+
+// Plotly attributes that hold colours: *color, colorway, colorscale and pie's marker.colors.
+const isColorKey = (key: string) =>
+	key.toLowerCase().endsWith('color') ||
+	key === 'colors' ||
+	key === 'colorway' ||
+	key === 'colorscale';
+
+function normalizeColors(props: Json) {
+	for (const [key, value] of Object.entries(props)) {
+		if (isColorKey(key)) props[key] = normalizeColorValue(value, false);
+		else if (isObject(value)) normalizeColors(value);
+		else if (Array.isArray(value))
+			for (const item of value) if (isObject(item)) normalizeColors(item);
+	}
+}
+
+// Covers a single colour, a per-point list and colorscale stops ([[0, "ff0000"], ...]).
+function normalizeColorValue(value: unknown, inList: boolean): unknown {
+	if (Array.isArray(value)) return value.map((v) => normalizeColorValue(v, true));
+	if (typeof value !== 'string') return value;
+	// Plotly reads numeric strings in a per-point list as numbers for the colorscale.
+	if (inList && /^\s*\d+\s*$/.test(value)) return value;
+	return normalizePlotlyColor(value);
+}
+
+/**
+ * Rewrites colour spellings Plotly 3 accepted but Plotly 4 rejects (hex without `#`, `hsv()`)
+ * into valid CSS. Anything else is returned unchanged.
+ */
+export function normalizePlotlyColor(color: string): string {
+	const value = color.trim();
+	if (BARE_HEX.test(value)) return `#${value}`;
+
+	const hsv = HSV_FUNCTION.exec(value);
+	if (!hsv) return color;
+
+	const { r, g, b } = hsvToRgb({
+		h: Number(hsv[1]),
+		s: unit(hsv[2], hsv[3] === '%'),
+		v: unit(hsv[4], hsv[5] === '%')
+	});
+	const rgb = `${Math.round(r)},${Math.round(g)},${Math.round(b)}`;
+	if (hsv[6] === undefined) return `rgb(${rgb})`;
+	return `rgba(${rgb},${+unit(hsv[6], hsv[7] === '%').toFixed(3)})`;
+}
+
+// Plotly 3 (TinyColor) read 0..1 as a fraction and anything above 1 as a percentage.
+function unit(s: string, percent: boolean): number {
+	let x = Number(s);
+	if (percent || x > 1) x /= 100;
+	return Math.min(1, Math.max(0, x));
+}

package/src/lib/i18n/localeContext.svelte.ts

@@ -1,11 +1,18 @@
 import { getContext, setContext } from 'svelte';
-import { type Locale, type ViewerMessages, messagesFor, DEFAULT_LOCALE } from './messages';
+import {
+	type Locale,
+	type ViewerMessages,
+	messagesFor,
+	withOverrides,
+	DEFAULT_LOCALE
+} from './messages';
 
 // Carries the UI locale down to the viewer and its panels without threading a
 // `lang` prop through every layer.
 //
 // Resolution order for any consuming component:
 //   explicit `lang` prop  →  nearest locale context  →  English default
+// and the strings are that locale's catalog with any `messages` overrides on top.
 //
 // Two ways to provide it:
 //   - Standalone: <Viewer lang="de" /> — Viewer provides the context itself.
@@ -20,22 +27,50 @@ export interface LocaleContext {
 }
 
 /**
- * Provide the locale to descendants. Pass a getter, not a value: it is re-read on every
+ * Provide the locale to descendants. Pass getters, not values: they are re-read on every
  * consumer render, so a reactive source (a `$state`, the app's Paraglide locale) switches
- * the language live.
+ * the language live. `getOverrides` replaces individual strings of the resolved catalog.
  */
-export function setLocaleContext(getLocale: () => Locale | undefined): void {
+export function setLocaleContext(
+	getLocale: () => Locale | undefined,
+	getOverrides?: () => Partial<ViewerMessages> | undefined
+): void {
 	const ctx: LocaleContext = {
 		get locale() {
 			return getLocale() ?? DEFAULT_LOCALE;
 		},
 		get messages() {
-			return messagesFor(getLocale());
+			return withOverrides(messagesFor(getLocale()), getOverrides?.());
 		}
 	};
 	setContext(LOCALE_CONTEXT_KEY, ctx);
 }
 
+/**
+ * Re-provides the nearest context for a component that takes its own `lang`/`messages` props.
+ * Without `lang`, or with the inherited locale, the subtree keeps the overrides an outer provider
+ * applied; a different `lang` starts from that locale's catalog, since those overrides were
+ * written for another language.
+ */
+export function layerLocaleContext(
+	getLang: () => Locale | undefined,
+	getOverrides?: () => Partial<ViewerMessages> | undefined
+): LocaleContext {
+	const outer = getLocaleContext();
+	const ctx: LocaleContext = {
+		get locale() {
+			return getLang() ?? outer.locale;
+		},
+		get messages() {
+			const lang = getLang();
+			const base = lang === undefined || lang === outer.locale ? outer.messages : messagesFor(lang);
+			return withOverrides(base, getOverrides?.());
+		}
+	};
+	setContext(LOCALE_CONTEXT_KEY, ctx);
+	return ctx;
+}
+
 /**
  * Falls back to an English-only context when no provider exists (a primitive used in
  * isolation), so consumers never need a null check.