@legendapp/spark 0.0.1-next.2 → 0.0.1-next.4

package/vendor/node_modules/@legendapp/spark-ui/src/appkit-split-view/SidebarSplitViewNativeComponent.ts

@@ -0,0 +1,37 @@
+import type { HostComponent, ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
+import type { DirectEventHandler, Double } from "react-native/Libraries/Types/CodegenTypes";
+
+export type SidebarSplitViewResizeEvent = Readonly<{
+  contentHeight: Double;
+  contentWidth: Double;
+  contentX: Double;
+  height: Double;
+  isLayoutReady: boolean;
+  isVertical: boolean;
+  listHeight: Double;
+  listWidth: Double;
+  listX: Double;
+  sidebarHeight: Double;
+  sidebarWidth: Double;
+}>;
+
+export interface NativeProps extends ViewProps {
+  appearance?: string;
+  contentTitlebarHeight?: Double;
+  contentTitlebarMaterial?: string;
+  contentTitlebarOverlayColor?: string;
+  contentTitlebarOverlayOpacity?: Double;
+  contentMinWidth?: Double;
+  hasList?: boolean;
+  listMinWidth?: Double;
+  listWidth?: Double;
+  onSplitViewDidResize?: DirectEventHandler<SidebarSplitViewResizeEvent>;
+  sidebarCollapsed?: boolean;
+  sidebarMinWidth?: Double;
+  sidebarTitlebarOverlayColor?: string;
+  sidebarTitlebarOverlayOpacity?: Double;
+  sidebarWidth?: Double;
+}
+
+export default codegenNativeComponent<NativeProps>("SidebarSplitView") as HostComponent<NativeProps>;

package/vendor/node_modules/@legendapp/spark-ui/src/appkit-split-view/index.tsx

@@ -0,0 +1,86 @@
+import { useState, type ReactNode } from "react";
+import { View, type NativeSyntheticEvent } from "react-native";
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl } from "../control";
+import { appearance, callback, finite, macosViewAvailability, type SpecializedViewProps } from "../specialized";
+import NativeSplitView from "./SidebarSplitViewNativeComponent";
+export type SidebarSplitViewAppearance = "system" | "light" | "dark";
+export type SidebarSplitViewTitlebarMaterial = "none" | "glass" | "titlebar" | "headerView" | "hudWindow" | "sidebar" | "windowBackground";
+export interface SidebarSplitViewPaneMetrics { contentHeight: number; contentWidth: number; sidebarHeight: number; sidebarWidth: number; listHeight?: number; listWidth?: number }
+export interface SidebarSplitViewResizeEvent extends SidebarSplitViewPaneMetrics { listHeight: number; listWidth: number; contentX: number; listX: number; height: number; phase: "provisional" | "ready" }
+export interface SplitViewTitleBarOverlay { color: string; opacity?: number }
+export interface SplitViewTitleBarOptions {
+  content?: { height?: number; material?: SidebarSplitViewTitlebarMaterial; overlay?: SplitViewTitleBarOverlay };
+  sidebar?: { overlay?: SplitViewTitleBarOverlay };
+}
+export interface SidebarSplitViewProps extends Omit<SpecializedViewProps, "children"> {
+  sidebar: ReactNode;
+  content: ReactNode;
+  /** Optional middle column (AppKit content list, as in Mail): sidebar | list | content in one native split. */
+  list?: ReactNode;
+  children?: never;
+  appearance?: SidebarSplitViewAppearance;
+  contentMinWidth?: number;
+  sidebarMinWidth?: number;
+  sidebarWidth?: number;
+  listMinWidth?: number;
+  listWidth?: number;
+  sidebarCollapsed?: boolean;
+  /** Used only for initial layout, before native measurements arrive. */
+  initialPaneMetrics?: SidebarSplitViewPaneMetrics;
+  titleBar?: SplitViewTitleBarOptions;
+  onResize?: (event: SidebarSplitViewResizeEvent) => void;
+}
+export function getSplitViewAvailability() { return macosViewAvailability("SidebarSplitView"); }
+function metrics(value: SidebarSplitViewPaneMetrics) {
+  if (!value || typeof value !== "object") throw new SparkError("E_INVALID_ARGUMENT", "Expected pane metrics");
+  for (const key of ["contentHeight", "contentWidth", "sidebarHeight", "sidebarWidth"] as const) finite(value[key], key);
+  for (const key of ["listHeight", "listWidth"] as const) if (value[key] !== undefined) finite(value[key], key);
+}
+const paneKeys = ["contentHeight", "contentWidth", "sidebarHeight", "sidebarWidth", "listHeight", "listWidth"] as const;
+function keys(value: unknown, allowed: readonly string[]) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) throw new SparkError("E_INVALID_ARGUMENT", "Expected title-bar options");
+  for (const key of Object.keys(value)) if (!allowed.includes(key)) throw new SparkError("E_UNSUPPORTED_OPTION", `Unknown title-bar option: ${key}`);
+}
+function overlay(value?: SplitViewTitleBarOverlay) {
+  if (value === undefined) return;
+  keys(value, ["color", "opacity"]);
+  if (typeof value.color !== "string" || !/^#(?:[\da-f]{6}|[\da-f]{8})$/i.test(value.color)) throw new SparkError("E_INVALID_ARGUMENT", "Expected #RRGGBB or #RRGGBBAA title-bar color");
+  if (value.opacity !== undefined) finite(value.opacity, "overlay opacity", 0, 1);
+}
+export function SidebarSplitView({ sidebar, content, list, children, appearance: theme = "system", contentMinWidth = 320, sidebarMinWidth = 180, sidebarWidth, listMinWidth = 240, listWidth, sidebarCollapsed = false, initialPaneMetrics, titleBar = {}, onResize, ref, onError, ...props }: SidebarSplitViewProps) {
+  appearance(theme); finite(contentMinWidth, "minimum content width"); finite(sidebarMinWidth, "minimum sidebar width"); finite(listMinWidth, "minimum list width");
+  if (sidebarWidth !== undefined) finite(sidebarWidth, "sidebar width", sidebarMinWidth);
+  if (listWidth !== undefined) finite(listWidth, "list width", listMinWidth);
+  const hasList = list !== undefined && list !== null && typeof list !== "boolean" && list !== "";
+  if (typeof sidebarCollapsed !== "boolean" || children !== undefined) throw new SparkError("E_INVALID_ARGUMENT", "Use named sidebar/content panes and a boolean collapsed state");
+  if (initialPaneMetrics !== undefined) metrics(initialPaneMetrics);
+  keys(titleBar, ["content", "sidebar"]);
+  if (titleBar.content !== undefined) { keys(titleBar.content, ["height", "material", "overlay"]); if (titleBar.content.height !== undefined) finite(titleBar.content.height, "title-bar height"); }
+  if (titleBar.sidebar !== undefined) keys(titleBar.sidebar, ["overlay"]);
+  overlay(titleBar.content?.overlay); overlay(titleBar.sidebar?.overlay);
+  const material = titleBar.content?.material ?? "none";
+  if (!["none", "glass", "titlebar", "headerView", "hudWindow", "sidebar", "windowBackground"].includes(material)) throw new SparkError("E_INVALID_ARGUMENT", "Invalid title-bar material");
+  callback(onResize, "resize");
+  const control = useControl({ ref, onError }, getSplitViewAvailability());
+  const [paneMetrics, setPaneMetrics] = useState<SidebarSplitViewPaneMetrics | undefined>(() => initialPaneMetrics ? { ...initialPaneMetrics } : undefined);
+  function resize(event: NativeSyntheticEvent<SidebarSplitViewPaneMetrics & { contentX: number; listX: number; height: number; isLayoutReady: boolean }>) {
+    if (!control.active()) return;
+    let value: SidebarSplitViewResizeEvent;
+    try {
+      const data = event?.nativeEvent; metrics(data); finite(data.listHeight, "list height"); finite(data.listWidth, "list width"); finite(data.contentX, "content x", -Infinity); finite(data.listX, "list x", -Infinity); finite(data.height, "height");
+      if (typeof data.isLayoutReady !== "boolean") throw new Error("Expected layout readiness");
+      value = { contentHeight: data.contentHeight, contentWidth: data.contentWidth, sidebarHeight: data.sidebarHeight, sidebarWidth: data.sidebarWidth, listHeight: data.listHeight, listWidth: data.listWidth, contentX: data.contentX, listX: data.listX, height: data.height, phase: data.isLayoutReady ? "ready" : "provisional" };
+    } catch (cause) { control.error(new SparkError("E_INVALID_DATA", "Invalid split-view layout", { cause })); return; }
+    setPaneMetrics(current => current && paneKeys.every(key => current[key] === value[key]) ? current : value);
+    onResize?.(value);
+  }
+  if (control.failed) return <View {...props} ref={control.ref} style={[{ flexDirection: "row" }, props.style]}>{sidebarCollapsed ? null : sidebar}{list}{content}</View>;
+  return <NativeSplitView {...props} ref={control.ref} appearance={theme} contentMinWidth={contentMinWidth} sidebarMinWidth={sidebarMinWidth} sidebarWidth={sidebarWidth} hasList={hasList} listMinWidth={listMinWidth} listWidth={listWidth} sidebarCollapsed={sidebarCollapsed} onSplitViewDidResize={resize}
+    contentTitlebarHeight={titleBar.content?.height ?? 0} contentTitlebarMaterial={material} contentTitlebarOverlayColor={titleBar.content?.overlay?.color} contentTitlebarOverlayOpacity={titleBar.content?.overlay?.opacity ?? (titleBar.content?.overlay ? 1 : 0)}
+    sidebarTitlebarOverlayColor={titleBar.sidebar?.overlay?.color} sidebarTitlebarOverlayOpacity={titleBar.sidebar?.overlay?.opacity ?? (titleBar.sidebar?.overlay ? 1 : 0)}>
+    <View key="sidebar" style={{ position: "absolute", top: 0, left: 0, minWidth: 0, height: paneMetrics?.sidebarHeight, width: sidebarCollapsed ? 0 : paneMetrics?.sidebarWidth ?? sidebarWidth ?? sidebarMinWidth }}>{sidebar}</View>
+    <View key="content" style={{ position: "absolute", top: 0, left: 0, minWidth: 0, overflow: "hidden", height: paneMetrics?.contentHeight, width: paneMetrics?.contentWidth }}>{content}</View>
+    {hasList ? <View key="list" style={{ position: "absolute", top: 0, left: 0, minWidth: 0, height: paneMetrics?.listHeight, width: paneMetrics?.listWidth ?? listWidth ?? listMinWidth }}>{list}</View> : null}
+  </NativeSplitView>;
+}

package/vendor/node_modules/@legendapp/spark-ui/src/availability.ts

@@ -0,0 +1,10 @@
+import { Platform, UIManager } from "react-native";
+import { SparkError, type Availability } from "@legendapp/spark-desktop-app/src/contracts";
+import type { ControlKind } from "./types";
+export function getControlAvailability(control: ControlKind): Availability {
+  const names: Record<ControlKind, string> = { button: "SparkButton", "text-input": "SparkTextInput", select: Platform.OS === "windows" ? "SparkSelect" : "NativeSelect", "segmented-control": "NativeSegmentedControl" };
+  if (!Object.hasOwn(names, control)) throw new SparkError("E_INVALID_ARGUMENT", "Unknown control kind");
+  if (Platform.OS !== "macos" && Platform.OS !== "windows") return { available: false, reason: "unsupported-platform" };
+  if (Platform.OS === "windows" && control === "segmented-control") return { available: false, reason: "unsupported-platform" };
+  return UIManager.hasViewManagerConfig(names[control]) ? { available: true } : { available: false, reason: "missing-module" };
+}

package/vendor/node_modules/@legendapp/spark-ui/src/classnames/index.ts

@@ -0,0 +1,8 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export { type ClassValue };

package/vendor/node_modules/@legendapp/spark-ui/src/control.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { SparkError, type Availability } from "@legendapp/spark-desktop-app/src/contracts";
+import type { ButtonProps, ControlProps, ControlRef, TextInputProps } from "./types";
+export type MeasureTarget = ControlRef | null;
+export function useControl(props: ControlProps, availability: Availability = { available: true }) {
+  const { disabled = false, onError = console.error } = props;
+  if (typeof disabled !== "boolean" || typeof onError !== "function" || (props.accessibilityLabel !== undefined && typeof props.accessibilityLabel !== "string") || (props.testID !== undefined && typeof props.testID !== "string")) throw new SparkError("E_INVALID_ARGUMENT", "Invalid control options");
+  const target = useRef<MeasureTarget>(null), mounted = useRef(false), reported = useRef<string | undefined>(undefined);
+  const [failed, setFailed] = useState(false);
+  useLayoutEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
+  const reason = availability.available ? undefined : availability.reason;
+  useEffect(() => {
+    if (reason && reported.current !== reason) {
+      reported.current = reason;
+      onError(new SparkError(reason === "unsupported-platform" ? "E_UNSUPPORTED_PLATFORM" : reason === "missing-module" ? "E_MODULE_UNAVAILABLE" : "E_UNAVAILABLE", "Native control is unavailable"));
+    }
+  }, [reason, onError]);
+  useImperativeHandle(props.ref, () => ({ measureInWindow(callback) {
+    if (typeof callback !== "function") throw new SparkError("E_INVALID_ARGUMENT", "Expected a measurement callback");
+    if (!target.current || !mounted.current) throw new SparkError("E_CLOSED", "Control is not mounted");
+    target.current.measureInWindow((...bounds) => { if (mounted.current) callback(...bounds); });
+  } }), []);
+  function error(error: SparkError) { if (mounted.current) onError(error); }
+  function unavailable(event: { nativeEvent: { message: string } }) {
+    if (!mounted.current) return;
+    if (typeof event?.nativeEvent?.message !== "string") { error(new SparkError("E_INVALID_DATA", "Invalid native control error")); return; }
+    setFailed(true); error(new SparkError("E_UNAVAILABLE", event.nativeEvent.message));
+  }
+  const ref = useCallback((value: MeasureTarget) => { target.current = value; }, []);
+  return { ref, disabled, failed: failed || !availability.available, error, unavailable, active: () => mounted.current && !disabled && !failed && availability.available };
+}
+export function validateButton(props: ButtonProps) {
+  if (typeof props.children !== "string" || !props.children.length || (props.onPress !== undefined && typeof props.onPress !== "function") || (props.variant !== undefined && !["default", "bordered", "borderless"].includes(props.variant))) throw new SparkError("E_INVALID_ARGUMENT", "Invalid button options");
+}
+export function useTextValue(props: TextInputProps) {
+  const controlled = props.value !== undefined;
+  const initialMode = useRef(controlled), initialText = useRef(props.defaultValue ?? ""), latestCount = useRef(0);
+  if (initialMode.current !== controlled) throw new SparkError("E_INVALID_ARGUMENT", "TextInput cannot switch controlled mode; remount it instead");
+  if ((controlled && (typeof props.value !== "string" || props.defaultValue !== undefined)) || (props.defaultValue !== undefined && typeof props.defaultValue !== "string") || (props.onChangeText !== undefined && typeof props.onChangeText !== "function")) throw new SparkError("E_INVALID_ARGUMENT", "TextInput requires a string value or defaultValue, not both");
+  const [eventCount, setEventCount] = useState(0);
+  return { controlled, text: props.value ?? "", defaultText: initialText.current, eventCount, acknowledge(count: number) { if (count <= latestCount.current) return false; latestCount.current = count; if (controlled) setEventCount(count); return true; } };
+}

package/vendor/node_modules/@legendapp/spark-ui/src/desktop.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Platform, Text, View, type NativeSyntheticEvent } from "react-native";
+import NativeTextInput from "./SparkTextInputNativeComponent";
+import NativeButton from "./SparkButtonNativeComponent";
+import NativeSelect from "./native-select/NativeSelectNativeComponent";
+import WindowsSelect from "./SparkSelectNativeComponent";
+import NativeSegmentedControl from "./native-select/NativeSegmentedControlNativeComponent";
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl, useTextValue, validateButton } from "./control";
+import { getControlAvailability } from "./availability";
+import { selectionIndex } from "./select";
+import type { ButtonProps, TextInputProps, SelectProps, SegmentedControlProps } from "./types";
+export type { ButtonProps, TextInputProps, ControlledTextInputProps, UncontrolledTextInputProps, SelectProps, SelectOption, SegmentedControlProps, ControlProps, ControlRef, ControlKind } from "./types";
+export { getControlAvailability } from "./availability";
+
+export function Button(props: ButtonProps) {
+  validateButton(props);
+  const control = useControl(props, getControlAvailability("button"));
+  const { children, variant = "default", onPress, accessibilityLabel = children, style, testID } = props;
+  if (control.failed) return <View ref={control.ref} style={[{ width: 160, height: 36 }, style]} testID={testID} accessible accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled: true }}><Text>{children}</Text></View>;
+  return <NativeButton ref={control.ref} title={children} disabled={control.disabled} variant={variant} accessibilityLabel={accessibilityLabel}
+    onButtonPress={() => { if (control.active()) onPress?.(); }} onUnavailable={control.unavailable} testID={testID} style={[{ width: 160, height: 36 }, style]} />;
+}
+export function TextInput(props: TextInputProps) {
+  const control = useControl(props, getControlAvailability("text-input"));
+  const value = useTextValue(props);
+  function changed(event: NativeSyntheticEvent<{ text: string; eventCount: number }>) {
+    if (!control.active()) return;
+    const data = event?.nativeEvent;
+    if (typeof data?.text !== "string" || !Number.isSafeInteger(data.eventCount) || data.eventCount < 1 || data.eventCount > 2147483647) { control.error(new SparkError("E_INVALID_DATA", "Invalid native text change")); return; }
+    if (value.acknowledge(data.eventCount)) props.onChangeText?.(data.text);
+  }
+  const { accessibilityLabel, style, testID } = props;
+  if (control.failed) return <View ref={control.ref} style={[{ width: 240, height: 36 }, style]} testID={testID} accessible accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled: true }}><Text>{value.controlled ? value.text : value.defaultText}</Text></View>;
+  return <NativeTextInput ref={control.ref} text={value.text} defaultText={value.defaultText} controlled={value.controlled} eventCount={value.eventCount} disabled={control.disabled} onTextChange={changed} onUnavailable={control.unavailable} accessibilityLabel={accessibilityLabel} testID={testID} style={[{ width: 240, height: 36 }, style]} />;
+}
+function Selection({ segmented, ...props }: SelectProps & { segmented: boolean }) {
+  selectionIndex(props.options, props.value);
+  if (typeof props.onValueChange !== "function") throw new SparkError("E_INVALID_ARGUMENT", "Expected onValueChange");
+  const control = useControl(props, getControlAvailability(segmented ? "segmented-control" : "select"));
+  const [selectionRevision, revise] = useState(0);
+  const { options, value, onValueChange, accessibilityLabel, style, testID } = props;
+  function changed(event: NativeSyntheticEvent<{ value: string }>) {
+    if (!control.active()) return;
+    const next = event?.nativeEvent?.value;
+    if (!options.some(option => option.value === next)) { control.error(new SparkError("E_INVALID_DATA", "Native selection is not an option")); return; }
+    revise(revision => revision + 1); onValueChange(next);
+  }
+  const common = { ref: control.ref, value, accessibilityLabel, testID, style: [{ width: 240, height: 36 }, style], selectionRevision };
+  if (control.failed) return <View ref={control.ref} style={common.style} testID={testID} accessible accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled: true }}><Text>{options.find(option => option.value === value)!.label}</Text></View>;
+  if (segmented) return <NativeSegmentedControl {...common} segmentsJson={JSON.stringify(options)} enabled={!control.disabled} onValueChange={changed} />;
+  if (Platform.OS === "windows") return <WindowsSelect {...common} itemsJson={JSON.stringify(options)} disabled={control.disabled} onSelectionChange={changed} onUnavailable={control.unavailable} />;
+  return <NativeSelect {...common} itemsJson={JSON.stringify(options)} enabled={!control.disabled} onValueChange={changed} />;
+}
+export function Select(props: SelectProps) { return <Selection {...props} segmented={false} />; }
+export function SegmentedControl(props: SegmentedControlProps) { return <Selection {...props} segmented />; }

package/vendor/node_modules/@legendapp/spark-ui/src/glass-effect-view/index.tsx

@@ -0,0 +1,15 @@
+import { requireNativeComponent, View, type ColorValue } from "react-native";
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl } from "../control";
+import { macosViewAvailability, type SpecializedViewProps } from "../specialized";
+export type GlassStyle = "regular" | "clear";
+export interface GlassViewProps extends SpecializedViewProps { glassStyle?: GlassStyle; tintColor?: ColorValue }
+const NativeGlass = requireNativeComponent<GlassViewProps>("RNGlassEffectView");
+export function getGlassAvailability() { return macosViewAvailability("RNGlassEffectView", 26); }
+/** Native glass hosts its children; unsupported hosts preserve them without an effect. */
+export function GlassView({ glassStyle = "regular", tintColor, ref, onError, ...props }: GlassViewProps) {
+  if (glassStyle !== "regular" && glassStyle !== "clear") throw new SparkError("E_INVALID_ARGUMENT", "Invalid glass style");
+  const control = useControl({ ref, onError }, getGlassAvailability());
+  if (control.failed) return <View {...props} ref={control.ref} />;
+  return <NativeGlass {...props} ref={control.ref} glassStyle={glassStyle} tintColor={tintColor} />;
+}

package/vendor/node_modules/@legendapp/spark-ui/src/index.android.tsx

@@ -1,25 +1,39 @@
-import { useCallback, useMemo } from "react";
+import type { ComponentProps } from "react";
+function ExpoButton(props: ComponentProps<typeof import("@expo/ui/jetpack-compose").Button>) {
+  const Component = (require("@expo/ui/jetpack-compose") as typeof import("@expo/ui/jetpack-compose")).Button;
+  return <Component {...props} />;
+}
+import { View, Text } from "react-native";
+import { requireOptionalNativeModule } from "expo-modules-core";
+import { SparkError, type Availability } from "@legendapp/spark-desktop-app/src/contracts";
 import { selectionIndex } from "./select";
-import { Button as ExpoButton, TextInput as ExpoTextInput, Picker } from "@expo/ui/jetpack-compose";
-import { StyleSheet, View } from "react-native";
-import type { ButtonProps, TextInputProps, SelectProps } from "./types";
-export type { ButtonProps, TextInputProps, SelectProps } from "./types";
-
-export function Button({ children, onPress, disabled = false, variant = "default", style, testID }: ButtonProps) {
-  return <View style={[styles.button, style]} testID={testID}>
-    <ExpoButton style={styles.content} onPress={disabled ? undefined : onPress}
-      disabled={disabled} variant={variant}>{children}</ExpoButton>
-  </View>;
+import { useControl, validateButton } from "./control";
+import type { ButtonProps, SelectProps, SegmentedControlProps, ControlKind } from "./types";
+export type { ButtonProps, TextInputProps, ControlledTextInputProps, UncontrolledTextInputProps, SelectProps, SelectOption, SegmentedControlProps, ControlProps, ControlRef, ControlKind } from "./types";
+export { TextInput } from "./mobile-input";
+export function getControlAvailability(control: ControlKind): Availability {
+  if (!["button", "text-input", "select", "segmented-control"].includes(control)) throw new SparkError("E_INVALID_ARGUMENT", "Unknown control kind");
+  return control === "text-input" || requireOptionalNativeModule("ExpoUI") ? { available: true } : { available: false, reason: "missing-module" };
 }
-const styles = StyleSheet.create({ button: { width: 160, height: 48 }, content: { flex: 1 } });
-
-const ignoreText = (_value: string) => {};
-export function TextInput({ defaultValue, onChangeText, accessibilityLabel, style, testID }: TextInputProps) {
-  return <View style={[{ width: 240, height: 56 }, style]} testID={testID}><ExpoTextInput defaultValue={defaultValue} onChangeText={onChangeText ?? ignoreText} style={styles.content} {...{ accessibilityLabel }} /></View>;
+export function Button(props: ButtonProps) {
+  validateButton(props); const control = useControl(props, getControlAvailability("button"));
+  const { children, onPress, variant = "default", style, testID, accessibilityLabel = children } = props;
+  return <View ref={control.ref} style={[{ width: 160, height: 48 }, style]} testID={testID}>
+    {control.failed ? <Text accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled: true }}>{children}</Text> :
+      <ExpoButton style={{ flex: 1 }} onPress={() => { if (control.active()) onPress?.(); }} disabled={control.disabled} variant={variant} {...{ accessibilityLabel }}>{children}</ExpoButton>}
+  </View>;
 }
-export function Select({ options, value, onValueChange, accessibilityLabel, style, testID }: SelectProps) {
-  const selectedIndex = selectionIndex(options, value);
-  const labels = useMemo(() => options.map(option => option.label), [options]);
-  const changed = useCallback((event: { nativeEvent: { index: number } }) => { const option = options[event.nativeEvent.index]; if (option) onValueChange(option.value); }, [options, onValueChange]);
-  return <View style={[{ width: 280, height: 48 }, style]} testID={testID}><Picker variant="segmented" options={labels} selectedIndex={selectedIndex} onOptionSelected={changed} style={styles.content} {...{ accessibilityLabel }} /></View>;
+function Selection(props: SelectProps) {
+  const selected = selectionIndex(props.options, props.value);
+  if (typeof props.onValueChange !== "function") throw new SparkError("E_INVALID_ARGUMENT", "Expected onValueChange");
+  const control = useControl(props, getControlAvailability("select"));
+  return <View ref={control.ref} style={[{ width: 280, minHeight: 48, flexDirection: "row" }, props.style]} testID={props.testID} accessibilityLabel={props.accessibilityLabel}>
+    {control.failed ? <Text accessibilityState={{ disabled: true }}>{props.options[selected].label}</Text> : props.options.map(option =>
+      <ExpoButton key={option.value} disabled={control.disabled} variant={option.value === props.value ? "bordered" : "borderless"} style={{ flex: 1 }}
+        {...{ accessibilityRole: "radio", accessibilityState: { checked: option.value === props.value, disabled: control.disabled } }}
+        onPress={() => { if (control.active()) props.onValueChange(option.value); }}>{option.label}</ExpoButton>)}
+  </View>;
 }
+/** Android presents its choices inline; there is no dropdown backend in the pinned Expo UI. */
+export function Select(props: SelectProps) { return <Selection {...props} />; }
+export function SegmentedControl(props: SegmentedControlProps) { return <Selection {...props} />; }

package/vendor/node_modules/@legendapp/spark-ui/src/index.ios.tsx

@@ -1,30 +1,59 @@
-import { useCallback, useMemo } from "react";
+import { useState, type ComponentProps } from "react";
+function ExpoButton(props: ComponentProps<typeof import("@expo/ui/swift-ui").Button>) {
+  const Component = (require("@expo/ui/swift-ui") as typeof import("@expo/ui/swift-ui")).Button;
+  return <Component {...props} />;
+}
+function Host(props: ComponentProps<typeof import("@expo/ui/swift-ui").Host>) {
+  const Component = (require("@expo/ui/swift-ui") as typeof import("@expo/ui/swift-ui")).Host;
+  return <Component {...props} />;
+}
+function Picker(props: ComponentProps<typeof import("@expo/ui/swift-ui").Picker>) {
+  const Component = (require("@expo/ui/swift-ui") as typeof import("@expo/ui/swift-ui")).Picker;
+  return <Component {...props} />;
+}
+import { frame, disabled as disabledModifier, accessibilityLabel as labelModifier } from "@expo/ui/swift-ui/modifiers";
+import { View, Text } from "react-native";
+import { SparkError, type Availability } from "@legendapp/spark-desktop-app/src/contracts";
+import { requireOptionalNativeModule } from "expo-modules-core";
+import { useControl, validateButton } from "./control";
 import { selectionIndex } from "./select";
-import { Button as ExpoButton, Host, TextField, Picker } from "@expo/ui/swift-ui";
-import { frame, padding, accessibilityLabel as labelModifier } from "@expo/ui/swift-ui/modifiers";
-import { StyleSheet } from "react-native";
-import type { ButtonProps, TextInputProps, SelectProps } from "./types";
-export type { ButtonProps, TextInputProps, SelectProps } from "./types";
-
-const fill = [frame({ maxWidth: Infinity, maxHeight: Infinity })];
-export function Button({ children, onPress, disabled = false, variant = "default", style, testID }: ButtonProps) {
-  return <Host style={[styles.button, style]}>
-    <ExpoButton onPress={disabled ? undefined : onPress} disabled={disabled}
-      variant={variant} modifiers={fill} testID={testID}>{children}</ExpoButton>
-  </Host>;
+import type { ButtonProps, SelectProps, SegmentedControlProps, ControlKind } from "./types";
+export type { ButtonProps, TextInputProps, ControlledTextInputProps, UncontrolledTextInputProps, SelectProps, SelectOption, SegmentedControlProps, ControlProps, ControlRef, ControlKind } from "./types";
+export { TextInput } from "./mobile-input";
+export function getControlAvailability(control: ControlKind): Availability {
+  if (!["button", "text-input", "select", "segmented-control"].includes(control)) throw new SparkError("E_INVALID_ARGUMENT", "Unknown control kind");
+  return control === "text-input" || requireOptionalNativeModule("ExpoUI") ? { available: true } : { available: false, reason: "missing-module" };
 }
-const styles = StyleSheet.create({ button: { width: 160, height: 44 } });
-
-const fieldModifiers = [padding({ horizontal: 8 }), ...fill];
-const ignoreText = (_value: string) => {};
-export function TextInput({ defaultValue, onChangeText, accessibilityLabel, style, testID }: TextInputProps) {
-  const modifiers = useMemo(() => accessibilityLabel ? [...fieldModifiers, labelModifier(accessibilityLabel)] : fieldModifiers, [accessibilityLabel]);
-  return <Host style={[{ width: 240, height: 44, borderWidth: StyleSheet.hairlineWidth, borderColor: "#8e8e93", borderRadius: 6 }, style]}><TextField allowNewlines={false} multiline={false} defaultValue={defaultValue} onChangeText={onChangeText ?? ignoreText} modifiers={modifiers} testID={testID} /></Host>;
+const fill = [frame({ maxWidth: Infinity, maxHeight: Infinity })];
+export function Button(props: ButtonProps) {
+  validateButton(props); const control = useControl(props, getControlAvailability("button"));
+  const { children, onPress, variant = "default", style, testID, accessibilityLabel = children } = props;
+  return <View ref={control.ref} style={[{ width: 160, height: 44 }, style]}>
+    {control.failed ? <Text accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled: true }} testID={testID}>{children}</Text> :
+      <Host style={{ flex: 1 }}><ExpoButton onPress={() => { if (control.active()) onPress?.(); }} disabled={control.disabled}
+        variant={variant} modifiers={[...fill, labelModifier(accessibilityLabel)]} testID={testID}>{children}</ExpoButton></Host>}
+  </View>;
 }
-export function Select({ options, value, onValueChange, accessibilityLabel, style, testID }: SelectProps) {
-  const selectedIndex = selectionIndex(options, value);
-  const labels = useMemo(() => options.map(option => option.label), [options]);
-  const changed = useCallback((event: { nativeEvent: { index: number } }) => { const option = options[event.nativeEvent.index]; if (option) onValueChange(option.value); }, [options, onValueChange]);
-  const modifiers = useMemo(() => accessibilityLabel ? [labelModifier(accessibilityLabel)] : [], [accessibilityLabel]);
-  return <Host style={[{ width: 240, height: 44 }, style]}><Picker variant="menu" options={labels} selectedIndex={selectedIndex} onOptionSelected={changed} modifiers={modifiers} testID={testID} /></Host>;
+function Selection({ segmented, ...props }: SelectProps & { segmented: boolean }) {
+  const selectedIndex = selectionIndex(props.options, props.value);
+  const [selectionRevision, revise] = useState(0);
+  if (typeof props.onValueChange !== "function") throw new SparkError("E_INVALID_ARGUMENT", "Expected onValueChange");
+  const control = useControl(props, getControlAvailability(segmented ? "segmented-control" : "select"));
+  const { options, onValueChange, accessibilityLabel, style, testID } = props;
+  const modifiers = [disabledModifier(control.disabled), ...(accessibilityLabel ? [labelModifier(accessibilityLabel)] : [])];
+  return <View ref={control.ref} style={[{ width: 240, height: 44 }, style]}>
+    {control.failed ? <Text accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled: true }} testID={testID}>{options[selectedIndex].label}</Text> :
+      <Host style={{ flex: 1 }}><Picker key={selectionRevision} variant={segmented ? "segmented" : "menu"} options={options.map(option => option.label)} selectedIndex={selectedIndex}
+        onOptionSelected={event => {
+          if (!control.active()) return;
+          const index = event?.nativeEvent?.index;
+          if (!Number.isInteger(index) || !options[index]) { control.error(new SparkError("E_INVALID_DATA", "Invalid native selection")); return; }
+          // Expo's SwiftUI picker retains local selection and ignores an unchanged
+          // selectedIndex. A fresh picker also restores a parent-vetoed selection.
+          revise(value => value + 1);
+          onValueChange(options[index].value);
+        }} modifiers={modifiers} testID={testID} /></Host>}
+  </View>;
 }
+export function Select(props: SelectProps) { return <Selection {...props} segmented={false} />; }
+export function SegmentedControl(props: SegmentedControlProps) { return <Selection {...props} segmented />; }

package/vendor/node_modules/@legendapp/spark-ui/src/index.tsx

@@ -1,27 +1 @@
-import { useCallback, useMemo } from "react";
-import type { NativeSyntheticEvent } from "react-native";
-import NativeTextInput from "./SparkTextInputNativeComponent";
-import NativeSelect from "./SparkSelectNativeComponent";
-import { selectionIndex } from "./select";
-import { StyleSheet } from "react-native";
-import NativeButton from "./SparkButtonNativeComponent";
-import type { ButtonProps, TextInputProps, SelectProps } from "./types";
-export type { ButtonProps, TextInputProps, SelectProps } from "./types";
-
-export function Button({ children, onPress, disabled = false, variant = "default", style, testID }: ButtonProps) {
-  return <NativeButton title={children} disabled={disabled} variant={variant}
-    onButtonPress={disabled ? undefined : onPress} testID={testID}
-    style={[styles.button, style]} />;
-}
-const styles = StyleSheet.create({ button: { width: 160, height: 36 } });
-
-export function TextInput({ defaultValue = "", onChangeText, style, ...props }: TextInputProps) {
-  const changed = useCallback((event: NativeSyntheticEvent<{ text: string }>) => onChangeText?.(event.nativeEvent.text), [onChangeText]);
-  return <NativeTextInput {...props} defaultText={defaultValue} onTextChange={changed} style={[{ width: 240, height: 36 }, style]} />;
-}
-export function Select({ options, value, onValueChange, style, ...props }: SelectProps) {
-  selectionIndex(options, value);
-  const itemsJson = useMemo(() => JSON.stringify(options), [options]);
-  const changed = useCallback((event: NativeSyntheticEvent<{ value: string }>) => onValueChange(event.nativeEvent.value), [onValueChange]);
-  return <NativeSelect {...props} itemsJson={itemsJson} value={value} onSelectionChange={changed} style={[{ width: 240, height: 36 }, style]} />;
-}
+export * from "./desktop";

package/vendor/node_modules/@legendapp/spark-ui/src/index.web.tsx

@@ -1,23 +1,54 @@
 import { selectionIndex } from "./select";
 import type { CSSProperties } from "react";
-import { StyleSheet, View } from "react-native";
-import type { ButtonProps, TextInputProps, SelectProps } from "./types";
-export type { ButtonProps, TextInputProps, SelectProps } from "./types";
-
+import { View } from "react-native";
+import { SparkError, type Availability } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl, useTextValue, validateButton } from "./control";
+import type { ButtonProps, TextInputProps, SelectProps, SegmentedControlProps, ControlKind } from "./types";
+export type { ButtonProps, TextInputProps, ControlledTextInputProps, UncontrolledTextInputProps, SelectProps, SelectOption, SegmentedControlProps, ControlProps, ControlRef, ControlKind } from "./types";
+export function getControlAvailability(control: ControlKind): Availability {
+  if (!["button", "text-input", "select", "segmented-control"].includes(control)) throw new SparkError("E_INVALID_ARGUMENT", "Unknown control kind");
+  return { available: true };
+}
 const nativeStyle: CSSProperties = { width: "100%", height: "100%", boxSizing: "border-box", font: "14px system-ui" };
 const borderlessStyle: CSSProperties = { ...nativeStyle, border: "none", background: "transparent" };
-export function Button({ children, onPress, disabled = false, variant = "default", style, testID }: ButtonProps) {
-  return <View style={[styles.button, style]} testID={testID}>
-    <button type="button" disabled={disabled} onClick={disabled ? undefined : onPress}
+export function Button(props: ButtonProps) {
+  validateButton(props); const control = useControl(props);
+  const { children, onPress, variant = "default", accessibilityLabel = children, style, testID } = props;
+  return <View ref={control.ref} style={[{ width: 160, height: 36 }, style]} testID={testID}>
+    <button type="button" disabled={control.disabled} onClick={() => { if (control.active()) onPress?.(); }} aria-label={accessibilityLabel}
       style={variant === "borderless" ? borderlessStyle : nativeStyle}>{children}</button>
   </View>;
 }
-const styles = StyleSheet.create({ button: { width: 160, height: 36 } });
-
-export function TextInput({ defaultValue, onChangeText, accessibilityLabel, style, testID }: TextInputProps) {
-  return <View style={[{ width: 240, height: 36 }, style]} testID={testID}><input type="text" defaultValue={defaultValue} onChange={event => onChangeText?.(event.currentTarget.value)} aria-label={accessibilityLabel} style={nativeStyle} /></View>;
+export function TextInput(props: TextInputProps) {
+  const control = useControl(props), state = useTextValue(props);
+  return <View ref={control.ref} style={[{ width: 240, height: 36 }, props.style]} testID={props.testID}>
+    <input type="text" value={state.controlled ? state.text : undefined} defaultValue={state.controlled ? undefined : state.defaultText} disabled={control.disabled}
+      onChange={event => { if (control.active()) props.onChangeText?.(event.currentTarget.value); }} aria-label={props.accessibilityLabel} style={nativeStyle} />
+  </View>;
+}
+function useSelection(props: SelectProps) {
+  selectionIndex(props.options, props.value);
+  if (typeof props.onValueChange !== "function") throw new SparkError("E_INVALID_ARGUMENT", "Expected onValueChange");
+  const control = useControl(props);
+  return { ...control, change(value: string) {
+    if (!control.active()) return;
+    if (!props.options.some(option => option.value === value)) { control.error(new SparkError("E_INVALID_DATA", "Invalid native selection")); return; }
+    props.onValueChange(value);
+  } };
 }
-export function Select({ options, value, onValueChange, accessibilityLabel, style, testID }: SelectProps) {
-  selectionIndex(options, value);
-  return <View style={[{ width: 240, height: 36 }, style]} testID={testID}><select value={value} onChange={event => onValueChange(event.currentTarget.value)} aria-label={accessibilityLabel} style={nativeStyle}>{options.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}</select></View>;
+export function Select(props: SelectProps) {
+  const control = useSelection(props);
+  return <View ref={control.ref} style={[{ width: 240, height: 36 }, props.style]} testID={props.testID}>
+    <select value={props.value} disabled={control.disabled} onChange={event => control.change(event.currentTarget.value)} aria-label={props.accessibilityLabel} style={nativeStyle}>
+      {props.options.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
+    </select>
+  </View>;
+}
+export function SegmentedControl(props: SegmentedControlProps) {
+  const control = useSelection(props);
+  return <View ref={control.ref} style={[{ width: 240, height: 36 }, props.style]} testID={props.testID}>
+    <div role="group" aria-label={props.accessibilityLabel} style={{ display: "flex", width: "100%", height: "100%" }}>
+      {props.options.map(option => <button type="button" key={option.value} disabled={control.disabled} aria-pressed={option.value === props.value} onClick={() => control.change(option.value)} style={{ ...nativeStyle, flex: 1 }}>{option.label}</button>)}
+    </div>
+  </View>;
 }

package/vendor/node_modules/@legendapp/spark-ui/src/index.windows.tsx

@@ -1,42 +1 @@
-import { useCallback, useMemo, useState } from "react";
-import { Text, View, TurboModuleRegistry } from "react-native";
-import type { NativeSyntheticEvent, TurboModule, StyleProp, ViewStyle } from "react-native";
-import NativeButton from "./SparkButtonNativeComponent";
-import NativeTextInput from "./SparkTextInputNativeComponent";
-import NativeSelect from "./SparkSelectNativeComponent";
-import { selectionIndex } from "./select";
-import type { ButtonProps, TextInputProps, SelectProps } from "./types";
-export type { ButtonProps, TextInputProps, SelectProps } from "./types";
-interface Availability extends TurboModule { isAvailable(): boolean }
-const available = TurboModuleRegistry.get<Availability>("NativeSparkUI")?.isAvailable() === true;
-function useAvailability() {
-  const [failed, setFailed] = useState(!available);
-  const unavailable = useCallback((event: NativeSyntheticEvent<{ message: string }>) => {
-    console.warn(`Windows native control unavailable: ${event.nativeEvent.message}`); setFailed(true);
-  }, []);
-  return { failed, onUnavailable: unavailable };
-}
-function Placeholder({ label, style, testID }: { label: string; style?: StyleProp<ViewStyle>; testID?: string }) {
-  return <View style={[{ minHeight: 36, padding: 8, borderWidth: 1, borderColor: "#999" }, style]} testID={testID} accessible accessibilityLabel={label} accessibilityState={{ disabled: true }}>
-    <Text>{label} — Windows control unavailable; rebuild the development client.</Text>
-  </View>;
-}
-export function Button({ children, onPress, disabled = false, variant = "default", style, testID }: ButtonProps) {
-  const { failed, onUnavailable } = useAvailability();
-  return failed ? <Placeholder label={children} style={style} testID={testID} /> :
-    <NativeButton title={children} disabled={disabled} variant={variant} onButtonPress={disabled ? undefined : onPress} onUnavailable={onUnavailable} testID={testID} style={[{ width: 160, height: 36 }, style]} />;
-}
-export function TextInput({ defaultValue = "", onChangeText, style, ...props }: TextInputProps) {
-  const { failed, onUnavailable } = useAvailability();
-  const changed = useCallback((event: NativeSyntheticEvent<{ text: string }>) => onChangeText?.(event.nativeEvent.text), [onChangeText]);
-  return failed ? <Placeholder label={props.accessibilityLabel ?? "Text input"} style={style} testID={props.testID} /> :
-    <NativeTextInput {...props} defaultText={defaultValue} onTextChange={changed} onUnavailable={onUnavailable} style={[{ width: 240, height: 36 }, style]} />;
-}
-export function Select({ options, value, onValueChange, style, ...props }: SelectProps) {
-  const selected = selectionIndex(options, value);
-  const { failed, onUnavailable } = useAvailability();
-  const itemsJson = useMemo(() => JSON.stringify(options), [options]);
-  const changed = useCallback((event: NativeSyntheticEvent<{ value: string }>) => onValueChange(event.nativeEvent.value), [onValueChange]);
-  return failed ? <Placeholder label={`${props.accessibilityLabel ?? "Select"}: ${options[selected]!.label}`} style={style} testID={props.testID} /> :
-    <NativeSelect {...props} itemsJson={itemsJson} value={value} onSelectionChange={changed} onUnavailable={onUnavailable} style={[{ width: 240, height: 36 }, style]} />;
-}
+export * from "./desktop";

package/vendor/node_modules/@legendapp/spark-ui/src/mobile-input.tsx

@@ -0,0 +1,11 @@
+import { TextInput as RNTextInput } from "react-native";
+import { useControl, useTextValue } from "./control";
+import type { TextInputProps } from "./types";
+/** RN owns text editing, IME, controlled-value reconciliation and selection on mobile. */
+export function TextInput(props: TextInputProps) {
+  const control = useControl(props), state = useTextValue(props);
+  return <RNTextInput ref={control.ref} value={state.controlled ? state.text : undefined} defaultValue={state.defaultText}
+    onChangeText={text => { if (control.active()) props.onChangeText?.(text); }} editable={!control.disabled} multiline={false}
+    accessibilityLabel={props.accessibilityLabel} accessibilityState={{ disabled: control.disabled }} testID={props.testID}
+    style={[{ width: 240, height: 44, borderWidth: 1, borderColor: "#8e8e93", borderRadius: 6, paddingHorizontal: 8 }, props.style]} />;
+}

package/vendor/node_modules/@legendapp/spark-ui/src/native-select/NativeSegmentedControlNativeComponent.ts

@@ -0,0 +1,17 @@
+import type { HostComponent, ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
+import type { DirectEventHandler, Int32 } from "react-native/Libraries/Types/CodegenTypes";
+
+export type NativeSegmentedControlChangeEvent = {
+  value: string;
+};
+
+export interface NativeProps extends ViewProps {
+  enabled?: boolean;
+  selectionRevision?: Int32;
+  segmentsJson: string;
+  onValueChange?: DirectEventHandler<NativeSegmentedControlChangeEvent>;
+  value: string;
+}
+
+export default codegenNativeComponent<NativeProps>("NativeSegmentedControl") as HostComponent<NativeProps>;