@flow-like/widget-sdk 0.1.1

package/src/standalone.ts

@@ -0,0 +1,54 @@
+import type { ThemeMode, ThemeState } from "./protocol";
+import { DEFAULT_DARK_TOKENS, DEFAULT_LIGHT_TOKENS } from "./theme";
+
+export function themeForMode(mode: ThemeMode): ThemeState {
+	return {
+		mode,
+		tokens: mode === "dark" ? DEFAULT_DARK_TOKENS : DEFAULT_LIGHT_TOKENS,
+	};
+}
+
+export function detectColorScheme(): ThemeMode {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+		return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches
+		? "dark"
+		: "light";
+}
+
+export function watchColorScheme(
+	onChange: (mode: ThemeMode) => void,
+): () => void {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+		return () => {};
+	const query = window.matchMedia("(prefers-color-scheme: dark)");
+	const listener = (event: MediaQueryListEvent) => {
+		onChange(event.matches ? "dark" : "light");
+	};
+	query.addEventListener("change", listener);
+	return () => query.removeEventListener("change", listener);
+}
+
+export function renderStandaloneBadge(): () => void {
+	if (typeof document === "undefined" || !document.body) return () => {};
+	const badge = document.createElement("div");
+	badge.textContent = "standalone";
+	badge.setAttribute(
+		"style",
+		[
+			"position: fixed",
+			"bottom: 8px",
+			"right: 8px",
+			"z-index: 2147483647",
+			"padding: 2px 8px",
+			"border-radius: 9999px",
+			"font: 11px/1.6 ui-monospace, monospace",
+			"color: rgba(255, 255, 255, 0.85)",
+			"background: rgba(0, 0, 0, 0.55)",
+			"pointer-events: none",
+			"user-select: none",
+		].join("; "),
+	);
+	document.body.appendChild(badge);
+	return () => badge.remove();
+}

package/src/theme.ts

@@ -0,0 +1,74 @@
+import type { ThemeState } from "./protocol";
+
+// Stock Flow-Like token set, copied from packages/ui/global.css so standalone
+// widgets render correctly themed with zero setup.
+export const DEFAULT_LIGHT_TOKENS: Record<string, string> = {
+	"--background": "oklch(0.9841 0.0035 39.4848)",
+	"--foreground": "oklch(0.184 0.0081 285.5768)",
+	"--card": "oklch(1.0 0 0)",
+	"--card-foreground": "oklch(0.184 0.0081 285.5768)",
+	"--popover": "oklch(1.0 0 0)",
+	"--popover-foreground": "oklch(0.184 0.0081 285.5768)",
+	"--primary": "oklch(0.6724 0.208 34.7886)",
+	"--primary-foreground": "oklch(1.0 0 0)",
+	"--secondary": "oklch(0.9466 0.0084 56.3108)",
+	"--secondary-foreground": "oklch(0.2503 0.0113 285.5586)",
+	"--muted": "oklch(0.9401 0.0068 53.4438)",
+	"--muted-foreground": "oklch(0.5137 0.0156 285.8367)",
+	"--accent": "oklch(0.6488 0.2155 31.664)",
+	"--accent-foreground": "oklch(1.0 0 0)",
+	"--destructive": "oklch(0.6227 0.2289 23.472)",
+	"--destructive-foreground": "oklch(1.0 0 0)",
+	"--border": "oklch(0.8933 0.0111 54.4825)",
+	"--input": "oklch(0.8933 0.0111 54.4825)",
+	"--ring": "oklch(0.6724 0.208 34.7886)",
+	"--chart-1": "oklch(0.6724 0.208 34.7886)",
+	"--chart-2": "oklch(0.7069 0.1871 45.3923)",
+	"--chart-3": "oklch(0.6227 0.2289 23.472)",
+	"--chart-4": "oklch(0.7814 0.1487 63.8806)",
+	"--chart-5": "oklch(0.5975 0.0196 285.7923)",
+	"--font-sans": '"Inter", ui-sans-serif, system-ui, sans-serif',
+	"--font-serif": '"Playfair Display", "Didot", Georgia, serif',
+	"--font-mono": '"JetBrains Mono", ui-monospace, monospace',
+	"--radius": "0.375rem",
+};
+
+export const DEFAULT_DARK_TOKENS: Record<string, string> = {
+	"--background": "oklch(0.164 0.0111 268.0057)",
+	"--foreground": "oklch(0.9544 0.0059 59.6503)",
+	"--card": "oklch(0.1993 0.0111 260.661)",
+	"--card-foreground": "oklch(0.9544 0.0059 59.6503)",
+	"--popover": "oklch(0.1993 0.0111 260.661)",
+	"--popover-foreground": "oklch(0.9544 0.0059 59.6503)",
+	"--primary": "oklch(0.6724 0.208 34.7886)",
+	"--primary-foreground": "oklch(1.0 0 0)",
+	"--secondary": "oklch(0.2515 0.0122 264.3278)",
+	"--secondary-foreground": "oklch(0.9247 0.0077 61.447)",
+	"--muted": "oklch(0.264 0.012 264.345)",
+	"--muted-foreground": "oklch(0.6984 0.0157 264.467)",
+	"--accent": "oklch(0.6488 0.2155 31.664)",
+	"--accent-foreground": "oklch(1.0 0 0)",
+	"--destructive": "oklch(0.6227 0.2289 23.472)",
+	"--destructive-foreground": "oklch(1.0 0 0)",
+	"--border": "oklch(0.2921 0.014 261.7008)",
+	"--input": "oklch(0.2921 0.014 261.7008)",
+	"--ring": "oklch(0.6724 0.208 34.7886)",
+	"--chart-1": "oklch(0.6724 0.208 34.7886)",
+	"--chart-2": "oklch(0.7069 0.1871 45.3923)",
+	"--chart-3": "oklch(0.6227 0.2289 23.472)",
+	"--chart-4": "oklch(0.7814 0.1487 63.8806)",
+	"--chart-5": "oklch(0.6984 0.0157 264.467)",
+	"--font-sans": "Open Sans, sans-serif",
+	"--font-serif": "Georgia, serif",
+	"--font-mono": "Menlo, monospace",
+	"--radius": "0.375rem",
+};
+
+export function applyTheme(theme: ThemeState): void {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	for (const [name, value] of Object.entries(theme.tokens)) {
+		if (name.startsWith("--")) root.style.setProperty(name, value);
+	}
+	root.classList.toggle("dark", theme.mode === "dark");
+}

package/src/validate.ts

@@ -0,0 +1,336 @@
+import type { ContractInput, JsonSchema } from "./contract";
+import { checkGeometrySchema } from "./geometry";
+import { markedLlmSchema } from "./llm";
+
+export interface ValidationResult {
+	valid: boolean;
+	errors: string[];
+}
+
+const VALID: ValidationResult = { valid: true, errors: [] };
+
+function deepEqual(a: unknown, b: unknown): boolean {
+	if (a === b) return true;
+	if (typeof a !== typeof b) return false;
+	if (typeof a !== "object" || a === null || b === null) return false;
+	if (Array.isArray(a) !== Array.isArray(b)) return false;
+	if (Array.isArray(a) && Array.isArray(b)) {
+		if (a.length !== b.length) return false;
+		return a.every((item, index) => deepEqual(item, b[index]));
+	}
+	const aRecord = a as Record<string, unknown>;
+	const bRecord = b as Record<string, unknown>;
+	const aKeys = Object.keys(aRecord);
+	const bKeys = Object.keys(bRecord);
+	if (aKeys.length !== bKeys.length) return false;
+	return aKeys.every((key) => deepEqual(aRecord[key], bRecord[key]));
+}
+
+function matchesType(type: string, value: unknown): boolean {
+	switch (type) {
+		case "string":
+			return typeof value === "string";
+		case "number":
+			return typeof value === "number";
+		case "integer":
+			return typeof value === "number" && Number.isInteger(value);
+		case "boolean":
+			return typeof value === "boolean";
+		case "null":
+			return value === null;
+		case "array":
+			return Array.isArray(value);
+		case "object":
+			return (
+				typeof value === "object" && value !== null && !Array.isArray(value)
+			);
+		default:
+			return true;
+	}
+}
+
+function describe(value: unknown): string {
+	if (value === null) return "null";
+	if (Array.isArray(value)) return "array";
+	return typeof value;
+}
+
+function checkNumericBounds(
+	schema: JsonSchema,
+	value: number,
+	path: string,
+	errors: string[],
+): void {
+	const { minimum, maximum, exclusiveMinimum, exclusiveMaximum } = schema;
+	if (typeof minimum === "number" && value < minimum) {
+		errors.push(`${path}: ${value} is less than minimum ${minimum}`);
+	}
+	if (typeof maximum === "number" && value > maximum) {
+		errors.push(`${path}: ${value} is greater than maximum ${maximum}`);
+	}
+	if (typeof exclusiveMinimum === "number" && value <= exclusiveMinimum) {
+		errors.push(
+			`${path}: ${value} is not greater than exclusiveMinimum ${exclusiveMinimum}`,
+		);
+	}
+	if (typeof exclusiveMaximum === "number" && value >= exclusiveMaximum) {
+		errors.push(
+			`${path}: ${value} is not less than exclusiveMaximum ${exclusiveMaximum}`,
+		);
+	}
+}
+
+function checkString(
+	schema: JsonSchema,
+	value: string,
+	path: string,
+	errors: string[],
+): void {
+	const { minLength, maxLength, pattern } = schema;
+	if (typeof minLength === "number" && value.length < minLength) {
+		errors.push(`${path}: string shorter than minLength ${minLength}`);
+	}
+	if (typeof maxLength === "number" && value.length > maxLength) {
+		errors.push(`${path}: string longer than maxLength ${maxLength}`);
+	}
+	if (typeof pattern === "string") {
+		let regex: RegExp | null = null;
+		try {
+			regex = new RegExp(pattern);
+		} catch {
+			// Invalid pattern in the schema — cannot enforce, treat as passing.
+		}
+		if (regex && !regex.test(value)) {
+			errors.push(`${path}: string does not match pattern ${pattern}`);
+		}
+	}
+}
+
+function checkArray(
+	schema: JsonSchema,
+	value: unknown[],
+	path: string,
+	errors: string[],
+): void {
+	const { minItems, maxItems, items } = schema;
+	if (typeof minItems === "number" && value.length < minItems) {
+		errors.push(`${path}: array has fewer than minItems ${minItems}`);
+	}
+	if (typeof maxItems === "number" && value.length > maxItems) {
+		errors.push(`${path}: array has more than maxItems ${maxItems}`);
+	}
+	if (Array.isArray(items)) {
+		items.forEach((itemSchema, index) => {
+			if (index < value.length && isSchemaObject(itemSchema)) {
+				validateAt(itemSchema, value[index], `${path}[${index}]`, errors);
+			}
+		});
+	} else if (isSchemaObject(items)) {
+		value.forEach((item, index) => {
+			validateAt(items, item, `${path}[${index}]`, errors);
+		});
+	}
+}
+
+function checkObject(
+	schema: JsonSchema,
+	value: Record<string, unknown>,
+	path: string,
+	errors: string[],
+): void {
+	const { properties, required, additionalProperties } = schema;
+	const props = isSchemaObject(properties) ? properties : undefined;
+
+	if (Array.isArray(required)) {
+		for (const key of required) {
+			if (typeof key === "string" && !(key in value)) {
+				errors.push(`${path}: missing required property "${key}"`);
+			}
+		}
+	}
+
+	if (props) {
+		for (const [key, propSchema] of Object.entries(props)) {
+			if (key in value && isSchemaObject(propSchema)) {
+				validateAt(propSchema, value[key], `${path}.${key}`, errors);
+			}
+		}
+	}
+
+	if (additionalProperties === false) {
+		for (const key of Object.keys(value)) {
+			if (!props || !(key in props)) {
+				errors.push(`${path}: unexpected additional property "${key}"`);
+			}
+		}
+	} else if (isSchemaObject(additionalProperties)) {
+		for (const key of Object.keys(value)) {
+			if (!props || !(key in props)) {
+				validateAt(additionalProperties, value[key], `${path}.${key}`, errors);
+			}
+		}
+	}
+}
+
+function isSchemaObject(value: unknown): value is JsonSchema {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function validateAt(
+	schema: JsonSchema,
+	value: unknown,
+	path: string,
+	errors: string[],
+): void {
+	let llm: JsonSchema | undefined;
+	try {
+		checkGeometrySchema(schema, value);
+		llm = markedLlmSchema(schema);
+	} catch (error) {
+		errors.push(
+			`${path}: ${error instanceof Error ? error.message : String(error)}`,
+		);
+		return;
+	}
+	// A Flow-Like model type marker validates against the native schema it names.
+	if (llm) {
+		validateAt(llm, value, path, errors);
+		return;
+	}
+
+	// Schemas are pre-inlined by the bundler; a leftover $ref cannot be
+	// resolved here, so it is treated as passing.
+	if ("$ref" in schema) return;
+
+	const { type } = schema;
+	if (typeof type === "string" && !matchesType(type, value)) {
+		errors.push(`${path}: expected type ${type}, got ${describe(value)}`);
+		return;
+	}
+	if (Array.isArray(type)) {
+		const matched = type.some(
+			(candidate) =>
+				typeof candidate === "string" && matchesType(candidate, value),
+		);
+		if (!matched) {
+			errors.push(
+				`${path}: expected one of types [${type.join(", ")}], got ${describe(value)}`,
+			);
+			return;
+		}
+	}
+
+	if ("enum" in schema) {
+		const allowed = schema.enum;
+		if (Array.isArray(allowed)) {
+			if (!allowed.some((candidate) => deepEqual(candidate, value))) {
+				errors.push(`${path}: value is not one of the allowed enum values`);
+			}
+		}
+	}
+
+	if ("const" in schema && !deepEqual(schema.const, value)) {
+		errors.push(`${path}: value does not equal const`);
+	}
+
+	if (typeof value === "number")
+		checkNumericBounds(schema, value, path, errors);
+	if (typeof value === "string") checkString(schema, value, path, errors);
+	if (Array.isArray(value)) checkArray(schema, value, path, errors);
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+		checkObject(schema, value as Record<string, unknown>, path, errors);
+	}
+
+	const { anyOf, oneOf, allOf } = schema;
+	if (Array.isArray(anyOf)) {
+		const passes = anyOf.some(
+			(sub) => isSchemaObject(sub) && validateSchema(sub, value).valid,
+		);
+		if (!passes) errors.push(`${path}: value matches no schema in anyOf`);
+	}
+	if (Array.isArray(oneOf)) {
+		const matches = oneOf.filter(
+			(sub) => isSchemaObject(sub) && validateSchema(sub, value).valid,
+		).length;
+		if (matches !== 1) {
+			errors.push(
+				`${path}: value matches ${matches} schemas in oneOf, expected exactly 1`,
+			);
+		}
+	}
+	if (Array.isArray(allOf)) {
+		allOf.forEach((sub, index) => {
+			if (isSchemaObject(sub)) {
+				const result = validateSchema(sub, value);
+				if (!result.valid) {
+					errors.push(`${path}: value fails allOf[${index}]`);
+				}
+			}
+		});
+	}
+}
+
+export function validateSchema(
+	schema: JsonSchema | null | undefined,
+	value: unknown,
+): ValidationResult {
+	if (schema === null || schema === undefined) return VALID;
+	const errors: string[] = [];
+	validateAt(schema, value, "$", errors);
+	return { valid: errors.length === 0, errors };
+}
+
+export function validateInputValue(
+	input: ContractInput,
+	value: unknown,
+): ValidationResult {
+	if (value === undefined) {
+		if (input.optional) return VALID;
+		return { valid: false, errors: ["$: value is required"] };
+	}
+
+	const errors: string[] = [];
+	switch (input.type) {
+		case "string":
+			if (typeof value !== "string") {
+				errors.push(`$: expected string, got ${describe(value)}`);
+			}
+			break;
+		case "number":
+		case "integer": {
+			const wantsInteger = input.type === "integer";
+			if (
+				typeof value !== "number" ||
+				(wantsInteger && !Number.isInteger(value))
+			) {
+				errors.push(`$: expected ${input.type}, got ${describe(value)}`);
+				break;
+			}
+			if (input.min !== undefined && value < input.min) {
+				errors.push(`$: ${value} is less than min ${input.min}`);
+			}
+			if (input.max !== undefined && value > input.max) {
+				errors.push(`$: ${value} is greater than max ${input.max}`);
+			}
+			break;
+		}
+		case "boolean":
+			if (typeof value !== "boolean") {
+				errors.push(`$: expected boolean, got ${describe(value)}`);
+			}
+			break;
+		case "enum":
+			if (typeof value !== "string" || !input.choices?.includes(value)) {
+				errors.push(
+					`$: value is not one of [${(input.choices ?? []).join(", ")}]`,
+				);
+			}
+			break;
+		case "json": {
+			const result = validateSchema(input.schema, value);
+			errors.push(...result.errors);
+			break;
+		}
+	}
+	return { valid: errors.length === 0, errors };
+}

package/src/vanilla.ts

@@ -0,0 +1 @@
+export * from "./index";