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

package/vendor/node_modules/@legendapp/spark-ui/macos/text-input-search/RNTextInputSearch.mm

@@ -0,0 +1,164 @@
+#import "RNTextInputSearch.h"
+
+#import <react/renderer/components/RNSparkUISpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNSparkUISpec/EventEmitters.h>
+#import <react/renderer/components/RNSparkUISpec/Props.h>
+#import <react/renderer/components/RNSparkUISpec/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+#if TARGET_OS_OSX
+static NSAppearance *RNTextInputSearchAppearanceForName(NSString *appearanceName)
+{
+  if ([appearanceName isEqualToString:@"light"]) {
+    return [NSAppearance appearanceNamed:NSAppearanceNameAqua];
+  }
+
+  if ([appearanceName isEqualToString:@"dark"]) {
+    return [NSAppearance appearanceNamed:NSAppearanceNameDarkAqua];
+  }
+
+  return nil;
+}
+
+#endif
+
+@interface RNTextInputSearch () <
+#if TARGET_OS_OSX
+  NSSearchFieldDelegate,
+#endif
+  RCTTextInputSearchViewProtocol
+>
+@end
+
+@implementation RNTextInputSearch {
+#if TARGET_OS_OSX
+  NSSearchField *_textField;
+  BOOL _hasSetDefaultText;
+  int _eventCount;
+#else
+  UIView *_textField;
+#endif
+}
+
+- (instancetype)init
+{
+  if (self = [super init]) {
+    _props = std::make_shared<const TextInputSearchProps>();
+#if TARGET_OS_OSX
+    _textField = [NSSearchField new];
+    _textField.delegate = self;
+    _textField.focusRingType = NSFocusRingTypeNone;
+    _textField.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
+    [self addSubview:_textField];
+#else
+    _textField = [UIView new];
+    [self addSubview:_textField];
+#endif
+  }
+  return self;
+}
+
+#if TARGET_OS_OSX
+- (BOOL)isFlipped
+{
+  return YES;
+}
+
+- (void)controlTextDidChange:(NSNotification *)notification
+{
+  if (notification.object != _textField || !_textField.enabled) {
+    return;
+  }
+  ++_eventCount;
+  const auto eventEmitter = std::static_pointer_cast<const TextInputSearchEventEmitter>(_eventEmitter);
+  if (eventEmitter) {
+    eventEmitter->onChangeText(TextInputSearchEventEmitter::OnChangeText{
+      .text = _textField.stringValue.UTF8String ?: "",
+      .eventCount = _eventCount,
+    });
+  }
+}
+#endif
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<TextInputSearchProps const>(props);
+#if TARGET_OS_OSX
+  NSString *appearanceName = [NSString stringWithUTF8String:newProps.appearance.c_str()];
+  NSAppearance *appearance = RNTextInputSearchAppearanceForName(appearanceName);
+  self.appearance = appearance;
+  _textField.appearance = appearance;
+
+  _textField.enabled = !newProps.disabled;
+  _textField.accessibilityLabel = [NSString stringWithUTF8String:newProps.accessibilityLabel.c_str()];
+  _textField.accessibilityIdentifier = [NSString stringWithUTF8String:newProps.testId.c_str()];
+  NSString *placeholder = [NSString stringWithUTF8String:newProps.placeholder.c_str()];
+  _textField.placeholderString = placeholder;
+
+  if (!_hasSetDefaultText) {
+    _textField.stringValue = [NSString stringWithUTF8String:newProps.defaultText.c_str()];
+    _hasSetDefaultText = YES;
+  }
+
+  if (newProps.controlled && newProps.eventCount >= _eventCount) {
+    NSString *text = [NSString stringWithUTF8String:newProps.text.c_str()];
+    if (![_textField.stringValue isEqualToString:text]) {
+      _textField.stringValue = text;
+    }
+  }
+#endif
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
+{
+  RCTTextInputSearchHandleCommand(self, commandName, args);
+}
+
+- (void)focus
+{
+#if TARGET_OS_OSX
+  if (_textField.enabled) [self.window makeFirstResponder:_textField];
+#endif
+}
+
+- (void)blur
+{
+#if TARGET_OS_OSX
+  if (self.window.firstResponder == _textField || _textField.currentEditor == self.window.firstResponder) [self.window makeFirstResponder:nil];
+#endif
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+#if TARGET_OS_OSX
+  _textField.stringValue = @"";
+  _textField.placeholderString = @"";
+  [_textField abortEditing];
+  _hasSetDefaultText = NO; _eventCount = 0; _textField.enabled = YES;
+  _textField.accessibilityLabel = nil; _textField.accessibilityIdentifier = nil;
+  self.appearance = nil; _textField.appearance = nil;
+#endif
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  _textField.frame = self.bounds;
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+  [self layoutSubviews];
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<TextInputSearchComponentDescriptor>();
+}
+
+@end

package/vendor/node_modules/@legendapp/spark-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/spark-ui",
-  "version": "0.0.1-next.2",
+  "version": "0.0.1-next.3",
   "license": "MIT",
   "main": "src/index",
   "react-native": "src/index",
@@ -39,8 +39,15 @@
       "componentProvider": {
         "SparkButton": "RNSparkButton",
         "SparkTextInput": "RNSparkTextInput",
-        "SparkSelect": "RNSparkSelect"
-      }
+        "SidebarSplitView": "RNSidebarSplitViewComponent",
+        "Sidebar": "RNSidebar",
+        "SidebarItem": "RNSidebarItem",
+        "SFSymbol": "RNSFSymbol",
+        "NativeSelect": "RNNativeSelect",
+        "NativeSegmentedControl": "RNNativeSegmentedControl",
+        "TextInputSearch": "RNTextInputSearch"
+      },
+      "modulesProvider": {}
     },
     "windows": {
       "namespace": "FrameUICodegen",
@@ -57,5 +64,10 @@
       "windows"
     ]
   },
-  "private": true
+  "private": true,
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "@legendapp/spark-desktop-app": "0.0.1-next.3"
+  }
 }

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

@@ -1,9 +1,11 @@
 import type { HostComponent, ViewProps } from "react-native";
-import type { DirectEventHandler } from "react-native/Libraries/Types/CodegenTypes";
+import type { DirectEventHandler, WithDefault, Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
 export interface NativeProps extends ViewProps {
   onUnavailable?: DirectEventHandler<Readonly<{ message: string }>>;
   itemsJson: string;
+  disabled?: WithDefault<boolean, false>;
+  selectionRevision?: Int32;
   value: string;
   onSelectionChange?: DirectEventHandler<Readonly<{ value: string }>>;
 }

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

@@ -1,9 +1,13 @@
 import type { HostComponent, ViewProps } from "react-native";
-import type { DirectEventHandler } from "react-native/Libraries/Types/CodegenTypes";
+import type { DirectEventHandler, WithDefault, Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
 export interface NativeProps extends ViewProps {
   onUnavailable?: DirectEventHandler<Readonly<{ message: string }>>;
   defaultText?: string;
-  onTextChange?: DirectEventHandler<Readonly<{ text: string }>>;
+  text?: string;
+  controlled?: WithDefault<boolean, false>;
+  disabled?: WithDefault<boolean, false>;
+  eventCount?: Int32;
+  onTextChange?: DirectEventHandler<Readonly<{ text: string; eventCount: Int32 }>>;
 }
 export default codegenNativeComponent<NativeProps>("SparkTextInput") as HostComponent<NativeProps>;

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

@@ -0,0 +1,31 @@
+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;
+  sidebarHeight: Double;
+  sidebarWidth: Double;
+}>;
+
+export interface NativeProps extends ViewProps {
+  appearance?: string;
+  contentTitlebarHeight?: Double;
+  contentTitlebarMaterial?: string;
+  contentTitlebarOverlayColor?: string;
+  contentTitlebarOverlayOpacity?: Double;
+  contentMinWidth?: 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,77 @@
+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 }
+export interface SidebarSplitViewResizeEvent extends SidebarSplitViewPaneMetrics { contentX: 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;
+  children?: never;
+  appearance?: SidebarSplitViewAppearance;
+  contentMinWidth?: number;
+  sidebarMinWidth?: number;
+  sidebarWidth?: 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);
+}
+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, children, appearance: theme = "system", contentMinWidth = 320, sidebarMinWidth = 180, sidebarWidth, sidebarCollapsed = false, initialPaneMetrics, titleBar = {}, onResize, ref, onError, ...props }: SidebarSplitViewProps) {
+  appearance(theme); finite(contentMinWidth, "minimum content width"); finite(sidebarMinWidth, "minimum sidebar width");
+  if (sidebarWidth !== undefined) finite(sidebarWidth, "sidebar width", sidebarMinWidth);
+  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; height: number; isLayoutReady: boolean }>) {
+    if (!control.active()) return;
+    let value: SidebarSplitViewResizeEvent;
+    try {
+      const data = event?.nativeEvent; metrics(data); finite(data.contentX, "content 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, contentX: data.contentX, 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 && ["contentHeight", "contentWidth", "sidebarHeight", "sidebarWidth"].every(key => current[key as keyof SidebarSplitViewPaneMetrics] === value[key as keyof SidebarSplitViewPaneMetrics]) ? current : value);
+    onResize?.(value);
+  }
+  if (control.failed) return <View {...props} ref={control.ref} style={[{ flexDirection: "row" }, props.style]}>{sidebarCollapsed ? null : sidebar}{content}</View>;
+  return <NativeSplitView {...props} ref={control.ref} appearance={theme} contentMinWidth={contentMinWidth} sidebarMinWidth={sidebarMinWidth} sidebarWidth={sidebarWidth} 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, height: paneMetrics?.contentHeight, width: paneMetrics?.contentWidth }}>{content}</View>
+  </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} />; }