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

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

package/vendor/node_modules/@legendapp/spark-ui/src/native-select/NativeSelectNativeComponent.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 NativeSelectChangeEvent = {
+  value: string;
+};
+
+export interface NativeProps extends ViewProps {
+  enabled?: boolean;
+  selectionRevision?: Int32;
+  itemsJson: string;
+  onValueChange?: DirectEventHandler<NativeSelectChangeEvent>;
+  value: string;
+}
+
+export default codegenNativeComponent<NativeProps>("NativeSelect") as HostComponent<NativeProps>;

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

@@ -1,7 +1,9 @@
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
 import type { SelectProps } from "./types";
-export function selectionIndex(options: SelectProps["options"], value: string) {
-  if (!options.length || new Set(options.map(option => option.value)).size !== options.length) throw new Error("Select options must be nonempty with unique values");
+export function selectionIndex(options: SelectProps["options"], value: string): number {
+  if (!Array.isArray(options) || !options.length || Array.from(options).some(option => !option || typeof option !== "object" || typeof option.label !== "string" || !option.label.length || typeof option.value !== "string") || new Set(options.map(option => option.value)).size !== options.length) throw new SparkError("E_INVALID_ARGUMENT", "Select options must have nonempty labels and unique string values");
+  for (const option of options) for (const key of Object.keys(option)) if (key !== "label" && key !== "value") throw new SparkError("E_UNSUPPORTED_OPTION", `Unknown select option: ${key}`);
   const index = options.findIndex(option => option.value === value);
-  if (index < 0) throw new Error("Select value must match an option");
+  if (index < 0) throw new SparkError("E_INVALID_ARGUMENT", "Select value must match an option");
   return index;
 }

package/vendor/node_modules/@legendapp/spark-ui/src/sf-symbol/SFSymbolNativeComponent.ts

@@ -0,0 +1,13 @@
+import type { CodegenTypes, ColorValue, HostComponent, ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  name: string;
+  onSymbolError?: CodegenTypes.DirectEventHandler<Readonly<{ name: string; message: string }>>;
+  color?: ColorValue;
+  scale?: string;
+  size?: CodegenTypes.Double;
+  yOffset?: CodegenTypes.Double;
+}
+
+export default codegenNativeComponent<NativeProps>("SFSymbol") as HostComponent<NativeProps>;

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

@@ -0,0 +1,27 @@
+import { View, type ColorValue, type NativeSyntheticEvent } from "react-native";
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl } from "../control";
+import { finite, identifier, macosViewAvailability, type SpecializedViewProps } from "../specialized";
+import NativeSFSymbol from "./SFSymbolNativeComponent";
+export type SFSymbolScale = "small" | "medium" | "large";
+export interface SFSymbolProps extends Omit<SpecializedViewProps, "children"> {
+  name: string;
+  color?: ColorValue;
+  scale?: SFSymbolScale;
+  size?: number;
+  yOffset?: number;
+}
+export function getSFSymbolAvailability() { return macosViewAvailability("SFSymbol"); }
+export function SFSymbol({ name, color, scale = "medium", size = 24, yOffset = 0, ref, onError, style, ...props }: SFSymbolProps) {
+  identifier(name, "symbol name"); finite(size, "symbol size", 1); finite(yOffset, "symbol offset", -Infinity);
+  if (!["small", "medium", "large"].includes(scale)) throw new SparkError("E_INVALID_ARGUMENT", "Invalid symbol scale");
+  const control = useControl({ ref, onError }, getSFSymbolAvailability());
+  const frame = [{ height: size, width: size }, style];
+  function error(event: NativeSyntheticEvent<{ name: string; message: string }>) {
+    if (!control.active()) return;
+    if (typeof event?.nativeEvent?.name !== "string" || typeof event?.nativeEvent?.message !== "string") { control.error(new SparkError("E_INVALID_DATA", "Invalid symbol error")); return; }
+    if (event.nativeEvent.name === name) control.error(new SparkError("E_NOT_FOUND", event.nativeEvent.message));
+  }
+  if (control.failed) return <View {...props} ref={control.ref} style={frame} />;
+  return <NativeSFSymbol {...props} ref={control.ref} name={name} color={color} scale={scale} size={size} yOffset={yOffset} style={frame} onSymbolError={error} />;
+}

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

@@ -0,0 +1,25 @@
+import type { HostComponent, ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
+import type { DirectEventHandler, Double } from "react-native/Libraries/Types/CodegenTypes";
+
+export type SidebarItemRightClickEvent = Readonly<{
+  altKey: boolean;
+  button: Double;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  pageX: Double;
+  pageY: Double;
+  shiftKey: boolean;
+  x: Double;
+  y: Double;
+}>;
+
+export interface NativeProps extends ViewProps {
+  autoHeight?: boolean;
+  itemId?: string;
+  onRightClick?: DirectEventHandler<SidebarItemRightClickEvent>;
+  rowHeight?: Double;
+  selectable?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>("SidebarItem") as HostComponent<NativeProps>;

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

@@ -0,0 +1,24 @@
+import type { HostComponent, ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
+import type { DirectEventHandler, Double, Int32 } from "react-native/Libraries/Types/CodegenTypes";
+
+export type SidebarSelectionChangeEvent = Readonly<{
+  id: string;
+}>;
+
+export type SidebarLayoutEvent = Readonly<{
+  height: Double;
+  width: Double;
+}>;
+
+export interface NativeProps extends ViewProps {
+  contentInsetTop?: Double;
+  defaultRowHeight?: Double;
+  itemsJson?: string;
+  onSidebarLayout?: DirectEventHandler<SidebarLayoutEvent>;
+  onSidebarSelectionChange?: DirectEventHandler<SidebarSelectionChangeEvent>;
+  selectedId?: string;
+  selectionRevision?: Int32;
+}
+
+export default codegenNativeComponent<NativeProps>("Sidebar") as HostComponent<NativeProps>;

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

@@ -0,0 +1,104 @@
+import { Children, Fragment, createContext, isValidElement, useContext, useMemo, useState, type ReactElement, type ReactNode } from "react";
+import { Text, View, type NativeSyntheticEvent } from "react-native";
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl } from "../control";
+import { callback, finite, identifier, macosViewAvailability, type SpecializedViewProps } from "../specialized";
+import NativeSidebar from "./SidebarNativeComponent";
+import NativeSidebarItem from "./SidebarItemNativeComponent";
+export interface SidebarItemData { id: string; label: string; selectable?: boolean }
+export type SidebarRowHeight = number | "auto";
+export interface SidebarSelectionEvent { id: string | null }
+export interface SidebarContentLayoutEvent { width: number; height: number }
+export interface SidebarContextMenuEvent {
+  id: string;
+  /** Logical top-left coordinates within the row and the owning window's content. */
+  position: { x: number; y: number };
+  windowPosition: { x: number; y: number };
+  modifiers: { alt: boolean; control: boolean; meta: boolean; shift: boolean };
+}
+export interface SidebarBaseProps extends Omit<SpecializedViewProps, "children"> {
+  contentInsetTop?: number;
+  defaultRowHeight?: number;
+  selectedId: string | null;
+  onContentLayout?: (event: SidebarContentLayoutEvent) => void;
+  onSelectionChange: (event: SidebarSelectionEvent) => void;
+}
+export type SidebarProps = SidebarBaseProps & ({ items: readonly SidebarItemData[]; children?: never } | { items?: never; children: ReactNode });
+export interface SidebarItemProps extends SpecializedViewProps {
+  id: string;
+  rowHeight?: SidebarRowHeight;
+  selectable?: boolean;
+  onContextMenu?: (event: SidebarContextMenuEvent) => void;
+}
+const SidebarContext = createContext(false);
+export function getSidebarAvailability() {
+  const availability = macosViewAvailability("Sidebar");
+  return availability.available ? macosViewAvailability("SidebarItem") : availability;
+}
+function childRows(children: ReactNode): ReactElement<SidebarItemProps>[] {
+  const rows: ReactElement<SidebarItemProps>[] = [];
+  Children.forEach(children, child => {
+    if (child === null) return;
+    if (isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) { rows.push(...childRows(child.props.children)); return; }
+    if (!isValidElement<SidebarItemProps>(child) || child.type !== SidebarItem) throw new SparkError("E_INVALID_ARGUMENT", "Sidebar children must be SidebarItem elements or fragments");
+    rows.push(child);
+  });
+  return rows;
+}
+export function Sidebar({ items, children, selectedId, contentInsetTop = 0, defaultRowHeight = 28, onContentLayout, onSelectionChange, ref, onError, ...props }: SidebarProps) {
+  finite(contentInsetTop, "content inset"); finite(defaultRowHeight, "row height", 1);
+  callback(onContentLayout, "content layout");
+  if (typeof onSelectionChange !== "function") throw new SparkError("E_INVALID_ARGUMENT", "Sidebar selection is controlled and requires onSelectionChange");
+  if (items !== undefined && (children !== undefined || !Array.isArray(items))) throw new SparkError("E_INVALID_ARGUMENT", "Use either items or SidebarItem children");
+  const { selectableIds, itemsJson } = useMemo(() => {
+    const rows = items === undefined ? childRows(children) : [];
+    const entries = items === undefined ? rows.map(row => ({ id: row.props.id, selectable: row.props.selectable })) : items;
+    const ids = new Set<string>(), selectableIds = new Set<string>();
+    for (const item of entries) {
+      if (!item || typeof item !== "object") throw new SparkError("E_INVALID_ARGUMENT", "Invalid sidebar item");
+      identifier(item.id, "sidebar ID");
+      if (ids.has(item.id)) throw new SparkError("E_INVALID_ARGUMENT", "Sidebar IDs must be unique"); ids.add(item.id);
+      if (item.selectable !== undefined && typeof item.selectable !== "boolean") throw new SparkError("E_INVALID_ARGUMENT", "Expected selectable boolean");
+      if (items !== undefined) identifier((item as SidebarItemData).label, "sidebar label");
+      if (item.selectable !== false) selectableIds.add(item.id);
+    }
+    return { selectableIds, itemsJson: items === undefined ? "" : JSON.stringify(items.map(({ id, label, selectable = true }) => ({ id, title: label, selectable }))) };
+  }, [items, children]);
+  if (selectedId !== null && !selectableIds.has(selectedId)) throw new SparkError("E_INVALID_ARGUMENT", "Selected sidebar ID must identify a selectable row");
+  const control = useControl({ ref, onError }, getSidebarAvailability());
+  const [selectionRevision, revise] = useState(0);
+  function selection(event: NativeSyntheticEvent<{ id: string }>) {
+    if (!control.active()) return;
+    const id = event?.nativeEvent?.id;
+    if (typeof id !== "string" || (id !== "" && !selectableIds.has(id))) { control.error(new SparkError("E_INVALID_DATA", "Invalid sidebar selection")); return; }
+    revise(value => value + 1); onSelectionChange?.({ id: id || null });
+  }
+  function layout(event: NativeSyntheticEvent<{ width: number; height: number }>) {
+    if (!control.active()) return;
+    try { finite(event?.nativeEvent?.width, "content width"); finite(event?.nativeEvent?.height, "content height"); }
+    catch (cause) { control.error(new SparkError("E_INVALID_DATA", "Invalid sidebar layout", { cause })); return; }
+    onContentLayout?.({ width: event.nativeEvent.width, height: event.nativeEvent.height });
+  }
+  if (control.failed) return <View {...props} ref={control.ref}><SidebarContext.Provider value>{items?.map(item => <Text key={item.id}>{item.label}</Text>) ?? children}</SidebarContext.Provider></View>;
+  return <NativeSidebar {...props} ref={control.ref} itemsJson={itemsJson} selectedId={selectedId ?? ""} selectionRevision={selectionRevision} contentInsetTop={contentInsetTop} defaultRowHeight={defaultRowHeight} onSidebarLayout={layout} onSidebarSelectionChange={selection}>
+    <SidebarContext.Provider value>{children}</SidebarContext.Provider>
+  </NativeSidebar>;
+}
+export function SidebarItem({ id, children, rowHeight, selectable = true, onContextMenu, ref, onError, ...props }: SidebarItemProps) {
+  if (!useContext(SidebarContext)) throw new SparkError("E_INVALID_ARGUMENT", "SidebarItem requires a Sidebar parent");
+  identifier(id, "sidebar ID"); callback(onContextMenu, "context menu");
+  if (rowHeight !== undefined && rowHeight !== "auto") finite(rowHeight, "row height", 1);
+  if (typeof selectable !== "boolean") throw new SparkError("E_INVALID_ARGUMENT", "Expected selectable boolean");
+  const control = useControl({ ref, onError }, getSidebarAvailability());
+  function contextMenu(event: NativeSyntheticEvent<{ x: number; y: number; pageX: number; pageY: number; altKey: boolean; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }>) {
+    if (!control.active()) return;
+    const data = event?.nativeEvent;
+    try {
+      for (const key of ["x", "y", "pageX", "pageY"] as const) finite(data?.[key], key, -Infinity);
+      for (const key of ["altKey", "ctrlKey", "metaKey", "shiftKey"] as const) if (typeof data[key] !== "boolean") throw new Error("Invalid modifiers");
+    } catch (cause) { control.error(new SparkError("E_INVALID_DATA", "Invalid sidebar context menu event", { cause })); return; }
+    onContextMenu?.({ id, position: { x: data.x, y: data.y }, windowPosition: { x: data.pageX, y: data.pageY }, modifiers: { alt: data.altKey, control: data.ctrlKey, meta: data.metaKey, shift: data.shiftKey } });
+  }
+  if (control.failed) return <View {...props} ref={control.ref}>{children}</View>;
+  return <NativeSidebarItem {...props} ref={control.ref} itemId={id} autoHeight={rowHeight === "auto"} rowHeight={typeof rowHeight === "number" ? rowHeight : 0} selectable={selectable} onRightClick={contextMenu}>{children}</NativeSidebarItem>;
+}

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

@@ -0,0 +1,22 @@
+import { Platform, UIManager, type ViewProps } from "react-native";
+import type { Ref } from "react";
+import { SparkError, type Availability } from "@legendapp/spark-desktop-app/src/contracts";
+import type { ControlRef } from "./types";
+export interface SpecializedViewProps extends ViewProps { ref?: Ref<ControlRef>; onError?: (error: SparkError) => void }
+export function macosViewAvailability(name: string, minimumVersion = 14): Availability {
+  if (Platform.OS !== "macos") return { available: false, reason: "unsupported-platform" };
+  if (Number.parseInt(String(Platform.Version), 10) < minimumVersion) return { available: false, reason: "host-restriction" };
+  return UIManager.hasViewManagerConfig(name) ? { available: true } : { available: false, reason: "missing-module" };
+}
+export function finite(value: unknown, name: string, minimum = 0, maximum = Infinity): asserts value is number {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < minimum || value > maximum) throw new SparkError("E_INVALID_ARGUMENT", `Invalid ${name}`);
+}
+export function identifier(value: unknown, name = "ID"): asserts value is string {
+  if (typeof value !== "string" || !value.length || value.includes("\0")) throw new SparkError("E_INVALID_ARGUMENT", `Expected a nonempty ${name}`);
+}
+export function appearance(value: unknown) {
+  if (!["system", "light", "dark"].includes(value as string)) throw new SparkError("E_INVALID_ARGUMENT", "Invalid appearance");
+}
+export function callback(value: unknown, name: string) {
+  if (value !== undefined && typeof value !== "function") throw new SparkError("E_INVALID_ARGUMENT", `Expected ${name} callback`);
+}

package/vendor/node_modules/@legendapp/spark-ui/src/text-input-search/TextInputSearchNativeComponent.ts

@@ -0,0 +1,33 @@
+import type { HostComponent, ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
+import codegenNativeCommands from "react-native/Libraries/Utilities/codegenNativeCommands";
+import type { DirectEventHandler, Int32, WithDefault } from "react-native/Libraries/Types/CodegenTypes";
+
+export type TextInputSearchChangeEvent = {
+  text: string;
+  eventCount: Int32;
+};
+
+export interface NativeProps extends ViewProps {
+  appearance?: string;
+  defaultText?: string;
+  controlled?: WithDefault<boolean, false>;
+  disabled?: WithDefault<boolean, false>;
+  eventCount?: Int32;
+  onChangeText?: DirectEventHandler<TextInputSearchChangeEvent>;
+  placeholder?: string;
+  text?: string;
+}
+
+type NativeComponentType = HostComponent<NativeProps>;
+
+export interface NativeCommands {
+  focus: (viewRef: React.ElementRef<NativeComponentType>) => void;
+  blur: (viewRef: React.ElementRef<NativeComponentType>) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ["focus", "blur"],
+});
+
+export default codegenNativeComponent<NativeProps>("TextInputSearch") as NativeComponentType;

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

@@ -0,0 +1,34 @@
+import { createElement, useCallback, useImperativeHandle, useRef, type ElementRef, type Ref } from "react";
+import { Text, View, type NativeSyntheticEvent } from "react-native";
+import { SparkError } from "@legendapp/spark-desktop-app/src/contracts";
+import { useControl, useTextValue } from "../control";
+import { macosViewAvailability, appearance } from "../specialized";
+import type { ControlRef, ControlledTextInputProps, UncontrolledTextInputProps } from "../types";
+import NativeSearch, { Commands } from "./TextInputSearchNativeComponent";
+export type TextInputSearchProps = (Omit<ControlledTextInputProps, "ref"> | Omit<UncontrolledTextInputProps, "ref">) & {
+  appearance?: "dark" | "light" | "system";
+  placeholder?: string;
+  ref?: Ref<TextInputSearchRef>;
+};
+export interface TextInputSearchRef extends ControlRef { focus(): void; blur(): void }
+export function getSearchAvailability() { return macosViewAvailability("TextInputSearch"); }
+export function TextInputSearch({ ref, appearance: theme = "system", placeholder = "", ...props }: TextInputSearchProps) {
+  appearance(theme);
+  if (typeof placeholder !== "string") throw new SparkError("E_INVALID_ARGUMENT", "Expected search placeholder");
+  const layout = useRef<ControlRef>(null), native = useRef<ElementRef<typeof NativeSearch>>(null);
+  const control = useControl({ ...props, ref: layout }, getSearchAvailability()), value = useTextValue(props);
+  const nativeRef = useCallback((view: ElementRef<typeof NativeSearch> | null) => { native.current = view; control.ref(view); }, [control.ref]);
+  useImperativeHandle(ref, () => ({
+    measureInWindow(callback) { if (!layout.current) throw new SparkError("E_CLOSED", "Search input is not mounted"); layout.current.measureInWindow(callback); },
+    focus() { if (!native.current) throw new SparkError("E_CLOSED", "Search input is not mounted or available"); Commands.focus(native.current); },
+    blur() { if (!native.current) throw new SparkError("E_CLOSED", "Search input is not mounted or available"); Commands.blur(native.current); },
+  }), []);
+  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 search input event")); return; }
+    if (value.acknowledge(data.eventCount)) props.onChangeText?.(data.text);
+  }
+  if (control.failed) return <View ref={control.ref} style={props.style} testID={props.testID} accessible accessibilityLabel={props.accessibilityLabel} accessibilityState={{ disabled: true }}><Text>{value.controlled ? value.text : value.defaultText}</Text></View>;
+  return createElement(NativeSearch, { ref: nativeRef, appearance: theme, placeholder, disabled: control.disabled, controlled: value.controlled, eventCount: value.eventCount, defaultText: value.defaultText, text: value.text, onChangeText: changed, style: props.style, testID: props.testID, accessibilityLabel: props.accessibilityLabel });
+}