@momoyu-ink/kit 0.10.0 → 0.11.0

package/dist/lib.mjs

@@ -22,14 +22,18 @@ __export(lib_exports, {
   Button: () => Button,
   Checkbox: () => Checkbox,
   DEBUG_EMPTY_PAGE: () => DEBUG_EMPTY_PAGE,
+  Input: () => Input,
   OverlayParamsContext: () => OverlayParamsContext,
   PageParamsContext: () => PageParamsContext,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
   ScrollView: () => ScrollView,
   Select: () => Select,
   Slider: () => Slider,
   StageContextProvider: () => StageContextProvider,
   a: () => animated,
   addEventListener: () => addEventListener,
+  addFluidObserver: () => addFluidObserver,
   animated: () => animated,
   autoState: () => autoState,
   createBubbleEvent: () => createBubbleEvent,
@@ -56,6 +60,7 @@ __export(lib_exports, {
   moyu: () => moyu_exports,
   nextLine: () => nextLine,
   registerAppStateAdapter: () => registerAppStateAdapter,
+  removeFluidObserver: () => removeFluidObserver,
   replaceUiData: () => replaceUiData,
   setDefaultAutoTailMs: () => setDefaultAutoTailMs,
   setWaiting: () => setWaiting,
@@ -97,10 +102,12 @@ import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constant
 var moyu_exports = {};
 __export(moyu_exports, {
   addChild: () => addChild,
+  blurEditable: () => blurEditable,
   createInstance: () => createInstance,
   destroyInstance: () => destroyInstance,
   executeNodeCommand: () => executeNodeCommand,
   executePluginCommand: () => executePluginCommand,
+  focusEditable: () => focusEditable,
   insertChild: () => insertChild,
   insertChildBefore: () => insertChildBefore,
   removeChild: () => removeChild,
@@ -138,6 +145,12 @@ function removeChild(nodeId, childNodeId) {
 function updateProps(nodeId, props) {
   moyu.pushCommand("update_props", [nodeId, props]);
 }
+function focusEditable(nodeId) {
+  moyu.pushCommand("focus_editable", [nodeId]);
+}
+function blurEditable(nodeId) {
+  moyu.pushCommand("blur_editable", [nodeId]);
+}
 function executeNodeCommand(nodeId, payload) {
   return moyu.executeNodeCommand(nodeId, payload);
 }
@@ -781,10 +794,18 @@ globalThis.__moyu_eval_sandbox = (code) => {
 var spring_exports = {};
 __export(spring_exports, {
   a: () => animated,
-  animated: () => animated
+  addFluidObserver: () => addFluidObserver,
+  animated: () => animated,
+  removeFluidObserver: () => removeFluidObserver
 });
 import { createHost } from "@react-spring/animated";
-import { Globals, colors, createStringInterpolator } from "@react-spring/shared";
+import {
+  Globals,
+  addFluidObserver as observeFluidValue,
+  colors,
+  createStringInterpolator,
+  removeFluidObserver as unobserveFluidValue
+} from "@react-spring/shared";
 
 // src/spring/primitives.ts
 var primitives = [
@@ -815,6 +836,8 @@ var host = createHost(primitives, {
   }
 });
 var animated = host.animated;
+var addFluidObserver = observeFluidValue;
+var removeFluidObserver = unobserveFluidValue;
 
 // src/lib.ts
 __reExport(lib_exports, spring_exports);
@@ -839,7 +862,8 @@ function createBubbleEvent(body, targetId) {
 
 // src/events/globals.ts
 var globalEventListeners = {};
-var globalRequestAnimationFrameListeners = [];
+var globalRequestAnimationFrameListeners = /* @__PURE__ */ new Map();
+var nextAnimationFrameHandle = 0;
 var BUBBLE_EVENT_NAMES = ["mouseevent", "touchevent", "keyboardevent", "wheelevent"];
 globalThis.__moyu_receive_event = (raw_event) => {
   const { name, body } = raw_event;
@@ -866,7 +890,8 @@ globalThis.__moyu_receive_event = (raw_event) => {
         return;
       }
       case "animationframecallbackevent": {
-        const listeners = globalRequestAnimationFrameListeners.splice(0);
+        const listeners = [...globalRequestAnimationFrameListeners.values()];
+        globalRequestAnimationFrameListeners.clear();
         const { timestamp } = body;
         for (const listener of listeners) {
           listener?.(timestamp);
@@ -924,10 +949,13 @@ function handleBubbleEvent(name, body) {
 }
 if (globalThis.__moyu_native) {
   globalThis.requestAnimationFrame = (callback) => {
-    return globalRequestAnimationFrameListeners.push(callback) - 1;
+    const handle = nextAnimationFrameHandle;
+    nextAnimationFrameHandle += 1;
+    globalRequestAnimationFrameListeners.set(handle, callback);
+    return handle;
   };
   globalThis.cancelAnimationFrame = (handle) => {
-    globalRequestAnimationFrameListeners.splice(handle, 1);
+    globalRequestAnimationFrameListeners.delete(handle);
   };
 }
 
@@ -1248,6 +1276,7 @@ function Button({
   textOffsetX,
   textOffsetY,
   textAlign = "center",
+  children,
   anchor,
   pivot = anchor,
   interactive,
@@ -1262,6 +1291,20 @@ function Button({
 }) {
   const [hovered, setHovered] = useState(false);
   const [pressed, setPressed] = useState(false);
+  useEffect(() => {
+    if (!pressed) {
+      return;
+    }
+    const release = () => setPressed(false);
+    const removeMouseUp = addEventListener("mouseup", release);
+    const removeTouchEnd = addEventListener("touchend", release);
+    const removeTouchCancel = addEventListener("touchcancel", release);
+    return () => {
+      removeMouseUp();
+      removeTouchEnd();
+      removeTouchCancel();
+    };
+  }, [pressed]);
   useEffect(() => {
     if (disabled) {
       setHovered(false);
@@ -1311,18 +1354,21 @@ function Button({
         setPressed(false);
       }),
       onClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx("sprite", { ...spriteProps, src: resolveControlStateValue(src, state), cursor: "pointer", children: text !== void 0 ? /* @__PURE__ */ jsx(
-        "text",
-        {
-          ...resolvedTextStyle,
-          text,
-          x: textOffsetX,
-          y: textOffsetY,
-          interactive: false,
-          anchor: textAnchor,
-          pivot: textAnchor
-        }
-      ) : void 0 })
+      children: /* @__PURE__ */ jsxs("sprite", { ...spriteProps, src: resolveControlStateValue(src, state), cursor: "pointer", children: [
+        text !== void 0 ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            ...resolvedTextStyle,
+            text,
+            x: textOffsetX,
+            y: textOffsetY,
+            interactive: false,
+            anchor: textAnchor,
+            pivot: textAnchor
+          }
+        ) : void 0,
+        children
+      ] })
     }
   );
 }
@@ -1360,8 +1406,343 @@ function Checkbox({
   );
 }
 
+// src/components/input.tsx
+import { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState3 } from "react";
+var Input = forwardRef(function Input2({
+  value,
+  defaultValue = "",
+  placeholder = "",
+  disabled = false,
+  readOnly = false,
+  autoFocus = false,
+  width,
+  height,
+  paddingX = 0,
+  textStyle,
+  placeholderStyle,
+  caret,
+  background,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onCompositionStart,
+  onCompositionUpdate,
+  onCompositionEnd,
+  interactive,
+  cursor = "text",
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
+  onTouchCancel,
+  ...nodeProps
+}, ref) {
+  const editableRef = useRef(null);
+  const initialValueRef = useRef(value ?? defaultValue);
+  const initialValue = initialValueRef.current;
+  const stateRef = useRef({
+    value: initialValue,
+    isComposing: false,
+    compositionText: ""
+  });
+  const [state, setState] = useState3(stateRef.current);
+  const [focused, setFocused] = useState3(false);
+  const [hovered, setHovered] = useState3(false);
+  const [pressed, setPressed] = useState3(false);
+  const [caretPosition, setCaretPosition] = useState3();
+  const [caretVisible, setCaretVisible] = useState3(true);
+  const shouldAutoFocusRef = useRef(autoFocus && !disabled);
+  const viewportWidth = Math.max(0, Math.round(width));
+  const viewportHeight = Math.max(0, Math.round(height));
+  const contentWidth = Math.max(0, viewportWidth - paddingX * 2);
+  const { width: caretWidth, height: configuredCaretHeight, blinkInterval, ...caretSpriteProps } = caret;
+  const caretHeight = configuredCaretHeight ?? textStyle.fontSize ?? viewportHeight;
+  const backgroundStyle = background && "idle" in background ? disabled ? background.disabled ?? background.idle : readOnly ? background.readOnly ?? background.idle : pressed ? background.press ?? background.idle : focused ? background.focused ?? background.idle : hovered ? background.hover ?? background.idle : background.idle : background;
+  const displayValue = state.value + state.compositionText;
+  const updateState = useCallback((nextState) => {
+    const previousState = stateRef.current;
+    if (previousState.value === nextState.value && previousState.isComposing === nextState.isComposing && previousState.compositionText === nextState.compositionText) {
+      return;
+    }
+    const displayValueChanged = previousState.value + previousState.compositionText !== nextState.value + nextState.compositionText;
+    stateRef.current = nextState;
+    setState(nextState);
+    if (displayValueChanged) {
+      setCaretPosition(void 0);
+    }
+    setCaretVisible(true);
+  }, []);
+  const handleInput = useCallback(
+    (event) => {
+      updateState(event.state);
+      onInput?.(event.state);
+    },
+    [onInput, updateState]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      updateState(event.state);
+      onChange?.(event.state, event.source);
+    },
+    [onChange, updateState]
+  );
+  const handleFocus = useCallback(
+    (event) => {
+      updateState(event.state);
+      setFocused(true);
+      onFocus?.(event.state);
+    },
+    [onFocus, updateState]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      updateState(event.state);
+      setFocused(false);
+      onBlur?.(event.state);
+    },
+    [onBlur, updateState]
+  );
+  const handleCompositionStart = useCallback(
+    (event) => {
+      updateState(event.state);
+      onCompositionStart?.(event.state);
+    },
+    [onCompositionStart, updateState]
+  );
+  const handleCompositionUpdate = useCallback(
+    (event) => {
+      updateState(event.state);
+      onCompositionUpdate?.(event.state);
+    },
+    [onCompositionUpdate, updateState]
+  );
+  const handleCompositionEnd = useCallback(
+    (event) => {
+      updateState(event.state);
+      onCompositionEnd?.(event.state);
+    },
+    [onCompositionEnd, updateState]
+  );
+  const handleTextLayout = useCallback((event) => {
+    if (event.text === stateRef.current.value + stateRef.current.compositionText) {
+      setCaretPosition(event.endCursorPosition);
+    }
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        if (editableRef.current) {
+          focusEditable(editableRef.current.nodeId);
+        }
+      },
+      blur: () => {
+        if (editableRef.current) {
+          blurEditable(editableRef.current.nodeId);
+        }
+      },
+      getState: () => stateRef.current
+    }),
+    []
+  );
+  useEffect2(() => {
+    if (value === void 0 || value === stateRef.current.value) {
+      return;
+    }
+    editableRef.current?.executeCommand({ subCommand: "setValue", value });
+    const nextState = editableRef.current?.executeCommand({ subCommand: "getState" });
+    if (nextState) {
+      updateState(nextState);
+    }
+  }, [updateState, value]);
+  useEffect2(() => {
+    if (shouldAutoFocusRef.current && editableRef.current) {
+      focusEditable(editableRef.current.nodeId);
+    }
+  }, []);
+  useEffect2(() => {
+    if (!pressed) {
+      return;
+    }
+    const release = () => setPressed(false);
+    const removeMouseUp = addEventListener("mouseup", release);
+    const removeTouchEnd = addEventListener("touchend", release);
+    const removeTouchCancel = addEventListener("touchcancel", release);
+    return () => {
+      removeMouseUp();
+      removeTouchEnd();
+      removeTouchCancel();
+    };
+  }, [pressed]);
+  useEffect2(() => {
+    if (disabled) {
+      setHovered(false);
+      setPressed(false);
+    }
+  }, [disabled]);
+  useEffect2(() => {
+    if (!focused) {
+      setCaretVisible(false);
+      return;
+    }
+    const expectedDisplayValue = displayValue;
+    setCaretVisible(true);
+    const timer = setInterval(() => {
+      if (stateRef.current.value + stateRef.current.compositionText === expectedDisplayValue) {
+        setCaretVisible((visible) => !visible);
+      }
+    }, blinkInterval ?? 500);
+    return () => clearInterval(timer);
+  }, [blinkInterval, displayValue, focused]);
+  useEffect2(() => {
+    if (!focused || !caretPosition) {
+      return;
+    }
+    editableRef.current?.executeCommand({
+      subCommand: "setCaretRect",
+      x: paddingX + caretPosition[0],
+      y: (viewportHeight - caretHeight) / 2,
+      width: caretWidth,
+      height: caretHeight
+    });
+  }, [caretHeight, caretPosition, caretWidth, focused, paddingX, viewportHeight]);
+  const caretX = caretPosition?.[0] ?? 0;
+  return /* @__PURE__ */ jsxs(
+    "editable",
+    {
+      ...nodeProps,
+      ref: editableRef,
+      value: initialValue,
+      disabled,
+      readOnly,
+      interactive: disabled ? false : interactive,
+      cursor,
+      onMouseEnter: mergeEvent(onMouseEnter, () => setHovered(true)),
+      onMouseLeave: mergeEvent(onMouseLeave, () => {
+        setHovered(false);
+        setPressed(false);
+      }),
+      onMouseDown: mergeEvent(onMouseDown, () => setPressed(true)),
+      onMouseUp: mergeEvent(onMouseUp, () => {
+        setPressed(false);
+        setHovered(true);
+      }),
+      onTouchStart: mergeEvent(onTouchStart, () => setPressed(true)),
+      onTouchEnd: mergeEvent(onTouchEnd, () => {
+        setPressed(false);
+        setHovered(true);
+      }),
+      onTouchCancel: mergeEvent(onTouchCancel, () => {
+        setHovered(false);
+        setPressed(false);
+      }),
+      onInput: handleInput,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onCompositionStart: handleCompositionStart,
+      onCompositionUpdate: handleCompositionUpdate,
+      onCompositionEnd: handleCompositionEnd,
+      children: [
+        backgroundStyle ? /* @__PURE__ */ jsx("sprite", { ...backgroundStyle, targetWidth: viewportWidth, targetHeight: viewportHeight, interactive: false }) : null,
+        /* @__PURE__ */ jsxs("clip", { x: paddingX, width: contentWidth, height: viewportHeight, interactive: false, children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              ...textStyle,
+              text: displayValue,
+              parseMarkup: false,
+              printMode: "instant",
+              anchor: [0, 0.5],
+              pivot: [0, 0.5],
+              interactive: false,
+              onTextLayout: handleTextLayout
+            }
+          ),
+          state.value.length === 0 && state.compositionText.length === 0 && placeholder ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              ...textStyle,
+              ...placeholderStyle,
+              text: placeholder,
+              parseMarkup: false,
+              printMode: "instant",
+              anchor: [0, 0.5],
+              pivot: [0, 0.5],
+              interactive: false
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "sprite",
+            {
+              ...caretSpriteProps,
+              x: caretX,
+              y: (viewportHeight - caretHeight) / 2,
+              mode: "nineslice",
+              bounds: [0, 0, 0, 0],
+              targetWidth: caretWidth,
+              targetHeight: caretHeight,
+              visible: focused && caretVisible && caretPosition !== void 0,
+              interactive: false
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/radio.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState4 } from "react";
+var RadioGroupContext = createContext3(null);
+function RadioGroup({ value, defaultValue, onValueChange, children, ...containerProps }) {
+  const [internalValue, setInternalValue] = useState4(defaultValue);
+  const currentValue = value ?? internalValue;
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        value: currentValue,
+        select: (nextValue) => {
+          if (nextValue === currentValue) {
+            return;
+          }
+          if (value === void 0) {
+            setInternalValue(nextValue);
+          }
+          onValueChange?.(nextValue);
+        }
+      },
+      children: /* @__PURE__ */ jsx("container", { ...containerProps, children })
+    }
+  );
+}
+function Radio({ value, uncheckedSprite, checkedSprite, onPress, ...buttonProps }) {
+  const group = useContext3(RadioGroupContext);
+  if (!group) {
+    throw new Error("Radio must be rendered inside a RadioGroup.");
+  }
+  const checked = group.value === value;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      sprite: checked ? checkedSprite : uncheckedSprite,
+      onPress: (event) => {
+        onPress?.(event);
+        if (!event.defaultPrevented) {
+          group.select(value);
+        }
+      }
+    }
+  );
+}
+
 // src/components/select.tsx
-import { useState as useState3 } from "react";
+import { useState as useState5 } from "react";
 function Select({
   value,
   defaultValue,
@@ -1380,8 +1761,8 @@ function Select({
   pivot = anchor,
   ...containerProps
 }) {
-  const [internalValue, setInternalValue] = useState3(defaultValue);
-  const [open, setOpen] = useState3(false);
+  const [internalValue, setInternalValue] = useState5(defaultValue);
+  const [open, setOpen] = useState5(false);
   const currentValue = value ?? internalValue;
   const currentOption = options.find((item) => item.value === currentValue);
   const { paddingX = 0, paddingY = 0, gap = 0, offsetX = 0, offsetY = 0, ...listSprite } = list;
@@ -1413,43 +1794,57 @@ function Select({
             }
           }
         ),
-        open && !disabled ? /* @__PURE__ */ jsx("sprite", { ...listSprite, targetHeight: listHeight, x: offsetX, y: (trigger.targetHeight ?? 0) + offsetY, children: /* @__PURE__ */ jsx("vbox", { x: paddingX, y: paddingY, gap, children: options.map((item) => /* @__PURE__ */ jsx(
-          Button,
+        open && !disabled ? /* @__PURE__ */ jsx(
+          "sprite",
           {
-            sprite: option,
-            lockOn: item.value === currentValue ? "press" : void 0,
-            text: item.text,
-            textStyle,
-            textOffsetX,
-            textOffsetY,
-            textAlign,
-            onPress: (event) => {
-              if (event.defaultPrevented) {
-                return;
-              }
-              if (value === void 0) {
-                setInternalValue(item.value);
-              }
-              onValueChange?.(item.value, item);
-              setOpen(false);
-            }
-          },
-          item.value
-        )) }) }) : void 0
+            ...listSprite,
+            excludeFromLayout: true,
+            targetHeight: listHeight,
+            x: offsetX,
+            y: (trigger.targetHeight ?? 0) + offsetY,
+            children: /* @__PURE__ */ jsx("vbox", { x: paddingX, y: paddingY, gap, children: options.map((item) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                sprite: option,
+                lockOn: item.value === currentValue ? "press" : void 0,
+                text: item.text,
+                textStyle,
+                textOffsetX,
+                textOffsetY,
+                textAlign,
+                onPress: (event) => {
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+                  if (value === void 0) {
+                    setInternalValue(item.value);
+                  }
+                  onValueChange?.(item.value, item);
+                  setOpen(false);
+                }
+              },
+              item.value
+            )) })
+          }
+        ) : void 0
       ]
     }
   );
 }
 
 // src/components/slider.tsx
-import { useCallback, useEffect as useEffect2, useRef, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState6 } from "react";
 function clampValue(value) {
+  if (Number.isNaN(value)) {
+    return 0;
+  }
   return Math.max(0, Math.min(1, value));
 }
 function Slider({
   value,
   defaultValue = 0,
   onValueChange,
+  onValueCommit,
   onPress,
   disabled = false,
   track,
@@ -1468,101 +1863,145 @@ function Slider({
   onTouchCancel,
   ...containerProps
 }) {
-  const [internalValue, setInternalValue] = useState4(() => clampValue(defaultValue));
-  const [hovered, setHovered] = useState4(false);
-  const [dragging, setDragging] = useState4(false);
-  const draggingRef = useRef(false);
+  const [internalValue, setInternalValue] = useState6(() => clampValue(defaultValue));
+  const [dragging, setDragging] = useState6(false);
   const currentValue = clampValue(value ?? internalValue);
+  const currentValueRef = useRef2(currentValue);
+  currentValueRef.current = currentValue;
+  const dragStateRef = useRef2(null);
   const distance = Math.max(0, track.targetWidth - thumb.targetWidth);
-  const state = disabled ? "disabled" : dragging ? "press" : hovered ? "hover" : "idle";
-  const { src: trackSrc, ...trackProps } = track;
-  const { src: thumbSrc, ...thumbProps } = thumb;
-  const updateValue = (event) => {
-    event.stopPropagation();
-    if (distance === 0) {
-      return;
-    }
-    const nextValue = clampValue((event.offsetX - thumb.targetWidth / 2) / distance);
+  const setSliderValue = useCallback2((nextValue) => {
+    const clampedValue = clampValue(nextValue);
+    currentValueRef.current = clampedValue;
     if (value === void 0) {
-      setInternalValue(nextValue);
+      setInternalValue(clampedValue);
     }
-    onValueChange?.(nextValue);
-  };
-  const endDragging = useCallback(() => {
-    draggingRef.current = false;
+    onValueChange?.(clampedValue);
+  }, [onValueChange, value]);
+  const endDragging = useCallback2((commit) => {
+    if (dragStateRef.current === null) {
+      return;
+    }
+    dragStateRef.current = null;
     setDragging(false);
-  }, []);
-  useEffect2(() => {
-    const handleEnd = () => {
-      if (draggingRef.current) {
-        endDragging();
+    if (commit) {
+      onValueCommit?.(currentValueRef.current);
+    }
+  }, [onValueCommit]);
+  useEffect3(() => {
+    const handleMouseUp = () => endDragging(true);
+    const handleTouchEnd = (event) => {
+      if (dragStateRef.current?.touchIdentifier === event.identifier) {
+        endDragging(true);
+      }
+    };
+    const handleTouchCancel2 = (event) => {
+      if (dragStateRef.current?.touchIdentifier === event.identifier) {
+        endDragging(false);
       }
     };
-    const removeMouseUp = addEventListener("mouseup", handleEnd);
-    const removeTouchEnd = addEventListener("touchend", handleEnd);
-    const removeTouchCancel = addEventListener("touchcancel", handleEnd);
+    const removeMouseUp = addEventListener("mouseup", handleMouseUp);
+    const removeTouchEnd = addEventListener("touchend", handleTouchEnd);
+    const removeTouchCancel = addEventListener("touchcancel", handleTouchCancel2);
     return () => {
       removeMouseUp();
       removeTouchEnd();
       removeTouchCancel();
     };
   }, [endDragging]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled) {
-      endDragging();
-      setHovered(false);
+      endDragging(false);
     }
   }, [disabled, endDragging]);
   const startDragging = (event) => {
+    event.stopPropagation();
+    if (dragStateRef.current !== null) {
+      return;
+    }
+    const thumbPosition = currentValueRef.current * distance;
+    dragStateRef.current = {
+      startPosition: event.offsetX,
+      startValue: currentValueRef.current,
+      touchIdentifier: "identifier" in event ? event.identifier : void 0,
+      startedOnThumb: event.offsetX >= thumbPosition && event.offsetX <= thumbPosition + thumb.targetWidth,
+      moved: false
+    };
+    setDragging(true);
+  };
+  const moveDragging = (event) => {
+    const dragState = dragStateRef.current;
+    if (dragState === null || "identifier" in event && dragState.touchIdentifier !== event.identifier || distance === 0) {
+      return;
+    }
+    event.stopPropagation();
+    const delta = event.offsetX - dragState.startPosition;
+    if (delta !== 0) {
+      dragState.moved = true;
+    }
+    setSliderValue(dragState.startValue + delta / distance);
+  };
+  const handlePress = (event) => {
+    const dragState = dragStateRef.current;
+    if (dragState === null || "identifier" in event && dragState.touchIdentifier !== event.identifier) {
+      return;
+    }
     onPress?.(event);
     if (event.defaultPrevented) {
+      endDragging(false);
       return;
     }
-    draggingRef.current = true;
-    setDragging(true);
-    updateValue(event);
+    if (!dragState.moved && !dragState.startedOnThumb && distance > 0) {
+      setSliderValue((event.offsetX - thumb.targetWidth / 2) / distance);
+    }
+    endDragging(true);
+  };
+  const handleTouchCancel = (event) => {
+    if (dragStateRef.current?.touchIdentifier === event.identifier) {
+      endDragging(false);
+    }
   };
   return /* @__PURE__ */ jsx(
-    "container",
+    Button,
     {
       ...containerProps,
       anchor,
       pivot,
-      interactive: disabled ? false : interactive,
-      onMouseEnter: mergeEvent(onMouseEnter, () => setHovered(true)),
-      onMouseLeave: mergeEvent(onMouseLeave, () => {
-        setHovered(false);
-        if (!draggingRef.current) {
-          setDragging(false);
-        }
-      }),
+      interactive,
+      disabled,
+      lockOn: dragging ? "press" : void 0,
+      sprite: {
+        ...track,
+        pivot: [0, 0.5],
+        y: (track.targetHeight ?? 0) / 2
+      },
+      onPress: handlePress,
+      onMouseEnter,
+      onMouseLeave,
       onMouseDown: mergeEvent(onMouseDown, startDragging),
-      onMouseUp: mergeEvent(onMouseUp, endDragging),
-      onMouseMove: mergeEvent(onMouseMove, (event) => {
-        if (draggingRef.current) {
-          updateValue(event);
-        }
-      }),
+      onMouseUp,
+      onMouseMove: mergeEvent(onMouseMove, moveDragging),
       onTouchStart: mergeEvent(onTouchStart, startDragging),
-      onTouchMove: mergeEvent(onTouchMove, (event) => {
-        if (draggingRef.current) {
-          updateValue(event);
-        }
-      }),
-      onTouchEnd: mergeEvent(onTouchEnd, endDragging),
-      onTouchCancel: mergeEvent(onTouchCancel, endDragging),
-      onClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx("sprite", { ...trackProps, src: resolveControlStateValue(trackSrc, state), cursor: "pointer", children: /* @__PURE__ */ jsx(
-        "sprite",
+      onTouchMove: mergeEvent(onTouchMove, moveDragging),
+      onTouchEnd,
+      onTouchCancel: mergeEvent(onTouchCancel, handleTouchCancel),
+      children: /* @__PURE__ */ jsx(
+        Button,
         {
-          ...thumbProps,
-          src: resolveControlStateValue(thumbSrc, state),
+          sprite: {
+            ...thumb,
+            anchor: [0, 0.5],
+            pivot: [0, 0.5],
+            x: 0,
+            interactive: false
+          },
+          lockOn: dragging ? "press" : void 0,
+          x: currentValue * distance,
           anchor: [0, 0.5],
           pivot: [0, 0.5],
-          x: currentValue * distance,
           interactive: false
         }
-      ) })
+      )
     }
   );
 }
@@ -1932,6 +2371,7 @@ var debugSessionController = {
             throw new Error("Page switching is not supported by the app state adapter");
           }
           await appStateAdapter.switchPage(routeName, params);
+          await syncCurrentExecutionCursor();
           return;
         }
         if (navigator.hasOverlay(routeName)) {
@@ -2522,7 +2962,7 @@ function useFadeOut(outTime, pause = false, onFinished) {
 
 // src/hooks/useScrollView.ts
 import { useSpringValue } from "@react-spring/core";
-import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState7 } from "react";
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -2542,13 +2982,13 @@ function useScrollView({
   initialPosition = "start",
   wheelStep = 72
 }) {
-  const [contentHeight, setContentHeight] = useState5(0);
-  const [hasContentLayout, setHasContentLayout] = useState5(false);
-  const scrollTargetRef = useRef2(0);
-  const didSetInitialPositionRef = useRef2(false);
-  const touchDraggingRef = useRef2(false);
-  const touchStartYRef = useRef2(0);
-  const touchStartOffsetRef = useRef2(0);
+  const [contentHeight, setContentHeight] = useState7(0);
+  const [hasContentLayout, setHasContentLayout] = useState7(false);
+  const scrollTargetRef = useRef3(0);
+  const didSetInitialPositionRef = useRef3(false);
+  const touchDraggingRef = useRef3(false);
+  const touchStartYRef = useRef3(0);
+  const touchStartOffsetRef = useRef3(0);
   const scrollOffset = useSpringValue(0, {
     config: {
       tension: 320,
@@ -2556,7 +2996,7 @@ function useScrollView({
     }
   });
   const maxScroll = useMemo(() => Math.max(0, contentHeight - viewportHeight), [contentHeight, viewportHeight]);
-  const scrollTo = useCallback2(
+  const scrollTo = useCallback3(
     (nextOffset, immediate = false) => {
       const offset = clamp(nextOffset, 0, maxScroll);
       if (offset === scrollTargetRef.current && !immediate) {
@@ -2567,13 +3007,13 @@ function useScrollView({
     },
     [maxScroll, scrollOffset]
   );
-  const scrollToRatio = useCallback2(
+  const scrollToRatio = useCallback3(
     (ratio, immediate = false) => {
       scrollTo(clamp(ratio, 0, 1) * maxScroll, immediate);
     },
     [maxScroll, scrollTo]
   );
-  const handleContentLayout = useCallback2(
+  const handleContentLayout = useCallback3(
     (event) => {
       if (!didSetInitialPositionRef.current) {
         const initialOffset = initialPosition === "end" ? Math.max(0, event.height - viewportHeight) : 0;
@@ -2586,13 +3026,13 @@ function useScrollView({
     },
     [initialPosition, scrollOffset, viewportHeight]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!hasContentLayout) {
       return;
     }
     scrollTo(scrollTargetRef.current, true);
   }, [hasContentLayout, maxScroll, scrollTo]);
-  const handleWheel = useCallback2(
+  const handleWheel = useCallback3(
     (event) => {
       if (maxScroll <= 0) {
         return;
@@ -2607,7 +3047,7 @@ function useScrollView({
     },
     [maxScroll, scrollTo, viewportHeight, wheelStep]
   );
-  const handleTouchStart = useCallback2(
+  const handleTouchStart = useCallback3(
     (event) => {
       if (maxScroll <= 0) {
         return;
@@ -2619,7 +3059,7 @@ function useScrollView({
     },
     [maxScroll]
   );
-  const handleTouchMove = useCallback2(
+  const handleTouchMove = useCallback3(
     (event) => {
       if (!touchDraggingRef.current) {
         return;
@@ -2629,7 +3069,7 @@ function useScrollView({
     },
     [scrollTo]
   );
-  const handleTouchEnd = useCallback2((event) => {
+  const handleTouchEnd = useCallback3((event) => {
     if (!touchDraggingRef.current) {
       return;
     }
@@ -2651,7 +3091,7 @@ function useScrollView({
 }
 
 // src/hooks/useScenario.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var currentScenarioSession = null;
 var scenarioSessionId = 0;
 var scenarioLifecycleQueue = Promise.resolve();
@@ -2793,7 +3233,7 @@ function setWaiting(time, skippable) {
   executePluginCommand("scenario", { subCommand: "setWaiting", time, skippable });
 }
 function useScenario(stories, startName, entryName, goNextOnLoad = false) {
-  useEffect4(() => {
+  useEffect5(() => {
     const session = acquireScenarioSession({
       stories: normalizeStories(stories),
       startName,
@@ -2807,9 +3247,9 @@ function useScenario(stories, startName, entryName, goNextOnLoad = false) {
 }
 
 // src/hooks/useSoundEffect.ts
-import { useCallback as useCallback3, useEffect as useEffect5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6 } from "react";
 function useSoundEffect(src) {
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       try {
         if (src) {
@@ -2824,7 +3264,7 @@ function useSoundEffect(src) {
       }
     };
   }, [src]);
-  return useCallback3(() => {
+  return useCallback4(() => {
     try {
       if (src) {
         executePluginCommand("audio", {
@@ -2840,7 +3280,7 @@ function useSoundEffect(src) {
 }
 
 // src/hooks/useStage.ts
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, createElement as createElement2, useCallback as useCallback4 } from "react";
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect7, createElement as createElement2, useCallback as useCallback5 } from "react";
 import { proxy as proxy5, useSnapshot as useSnapshot5 } from "valtio";
 var SKIP_INTERVAL_MS = 80;
 var DEFAULT_FAST_FORWARD_STEP_LIMIT = 1e4;
@@ -2926,6 +3366,9 @@ function createStage() {
     return addToRegistry(interruptCallbacks, cb);
   }
   function tryInterrupt() {
+    if (tryFinishActiveWait()) {
+      return true;
+    }
     for (const cb of interruptCallbacks) {
       try {
         if (cb()) return true;
@@ -2973,6 +3416,8 @@ function createStage() {
   let _autoTicketSeq = 0;
   const _pendingAutoTickets = /* @__PURE__ */ new Map();
   let _fastForwardRuntime = null;
+  let _activeWait = null;
+  let _activeWaitSeq = 0;
   let _managedAdvanceInFlight = false;
   let _managedAdvancePending = false;
   function resetManagedAdvanceState() {
@@ -3061,12 +3506,53 @@ function createStage() {
     });
   }
   function requestNextLine() {
+    if (_activeWait !== null) {
+      return;
+    }
     if (isManagedAdvanceActive()) {
       scheduleManagedAdvance();
       return;
     }
     void Promise.resolve(nextLine()).catch(handleManagedAdvanceError);
   }
+  function invalidateActiveWait() {
+    if (_activeWait === null) {
+      return;
+    }
+    _activeWait.settled = true;
+    _activeWait = null;
+  }
+  function settleActiveWait(wait, error) {
+    if (_activeWait !== wait || wait.settled) {
+      return;
+    }
+    wait.settled = true;
+    _activeWait = null;
+    if (error !== void 0) {
+      console.error(`[Stage] Promise hold ${wait.id} rejected:`, error);
+    }
+    requestNextLine();
+  }
+  function tryFinishActiveWait() {
+    const wait = _activeWait;
+    if (wait === null || !wait.skippable || wait.settled) {
+      return false;
+    }
+    const finish = wait.until.finish;
+    if (typeof finish === "function") {
+      try {
+        finish.call(wait.until);
+      } catch (error) {
+        console.error(`[Stage] Failed to finish Promise hold ${wait.id}:`, error);
+      }
+    } else {
+      console.warn(
+        `[Stage] Skipping Promise hold ${wait.id} without finish(); the underlying operation may continue.`
+      );
+    }
+    settleActiveWait(wait);
+    return true;
+  }
   function clearAutoResumeTimer() {
     if (_autoResumeTimer !== null) {
       clearTimeout(_autoResumeTimer);
@@ -3254,7 +3740,11 @@ function createStage() {
     if (isAnyBlockerActive()) return;
     skipState.active = true;
     invokeSkipCallbacks();
+    const activeWait = _activeWait;
     tryInterrupt();
+    if (activeWait !== null && activeWait !== _activeWait) {
+      return;
+    }
     scheduleSkipNextLine();
   }
   function stopSkip() {
@@ -3273,6 +3763,7 @@ function createStage() {
     if (fastForwardState.active) return;
     if (isAnyAutoBlockerActive()) return;
     autoState.active = true;
+    if (_activeWait !== null) return;
     tryInterrupt();
     scheduleAutoNextLine();
   }
@@ -3309,6 +3800,7 @@ function createStage() {
     return fastForwardState.active;
   }
   function resetRuntimeState() {
+    invalidateActiveWait();
     skipState.active = false;
     autoState.active = false;
     fastForwardState.active = false;
@@ -3354,7 +3846,7 @@ function createStage() {
           setWaiting(time, skippable);
         }
       },
-      hold() {
+      hold(until, skippable = false) {
         handled = true;
         if (warpActive) {
           return;
@@ -3363,6 +3855,24 @@ function createStage() {
           requestNextLine();
           return;
         }
+        if (until !== void 0) {
+          invalidateActiveWait();
+          const wait = {
+            id: ++_activeWaitSeq,
+            until,
+            skippable,
+            settled: false
+          };
+          _activeWait = wait;
+          void Promise.resolve(until).then(
+            () => settleActiveWait(wait),
+            (error) => settleActiveWait(wait, error)
+          );
+          if (skipState.active) {
+            tryFinishActiveWait();
+          }
+          return;
+        }
         if (skipState.active && !unskippableFlag) {
           if (isAnyBlockerActive()) {
             stopSkip();
@@ -3422,6 +3932,7 @@ function createStage() {
     return parsed.data;
   }
   function dispatchCommand(e) {
+    invalidateActiveWait();
     for (const cb of beforeHandleCommandCallbacks) {
       try {
         cb(e);
@@ -3450,6 +3961,7 @@ function createStage() {
     }
   }
   function dispatchTextLine(e) {
+    invalidateActiveWait();
     const { control, wasHandled } = buildControl();
     for (const handler of textLineHandlers) {
       handler(e, control);
@@ -3483,6 +3995,7 @@ function createStage() {
       })
     ];
     return () => {
+      resetRuntimeState();
       for (const cleanup of cleanups) cleanup();
     };
   }
@@ -3503,52 +4016,54 @@ function createStage() {
     startAuto,
     stopAuto,
     isAutoing,
+    setDefaultAutoTailMs,
     startFastForward,
     stopFastForward,
     isFastForwarding,
+    getSeekingType,
     resetRuntimeState,
     bindEvents
   };
 }
-var StageContext = createContext3(null);
+var StageContext = createContext4(null);
 function useStageContext() {
-  const ctx = useContext3(StageContext);
+  const ctx = useContext4(StageContext);
   if (!ctx) throw new Error("useStageContext must be used within StageContextProvider");
   return ctx;
 }
 function StageContextProvider({ stage, children }) {
-  useEffect6(() => {
+  useEffect7(() => {
     return stage.bindEvents();
   }, [stage]);
   return createElement2(StageContext.Provider, { value: stage }, children);
 }
 function useSkipCallback(callback) {
   const stage = useStageContext();
-  useEffect6(() => {
+  useEffect7(() => {
     return stage.addSkipCallback(callback);
   }, [stage, callback]);
 }
 function useInterruptCallback(callback) {
   const stage = useStageContext();
-  useEffect6(() => {
+  useEffect7(() => {
     return stage.addInterruptCallback(callback);
   }, [stage, callback]);
 }
 function useSkipBlocker(callback) {
   const stage = useStageContext();
-  useEffect6(() => {
+  useEffect7(() => {
     return stage.addSkipBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoBlocker(callback) {
   const stage = useStageContext();
-  useEffect6(() => {
+  useEffect7(() => {
     return stage.addAutoBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoTicket() {
   const stage = useStageContext();
-  return useCallback4(
+  return useCallback5(
     (options) => {
       return stage.issueAutoTicket(options);
     },
@@ -3557,7 +4072,7 @@ function useAutoTicket() {
 }
 function useBeforeHandleCommandCallback(callback) {
   const stage = useStageContext();
-  useEffect6(() => {
+  useEffect7(() => {
     return stage.addBeforeHandleCommandCallback(callback);
   }, [stage, callback]);
 }
@@ -3568,14 +4083,18 @@ export {
   Button,
   Checkbox,
   DEBUG_EMPTY_PAGE,
+  Input,
   OverlayParamsContext,
   PageParamsContext,
+  Radio,
+  RadioGroup,
   ScrollView,
   Select,
   Slider,
   StageContextProvider,
   animated as a,
   addEventListener,
+  addFluidObserver,
   animated,
   autoState,
   createBubbleEvent,
@@ -3602,6 +4121,7 @@ export {
   moyu_exports as moyu,
   nextLine,
   registerAppStateAdapter,
+  removeFluidObserver,
   replaceUiData,
   setDefaultAutoTailMs,
   setWaiting,