@momoyu-ink/kit 0.10.1 → 0.11.0

package/dist/lib.cjs

@@ -34,14 +34,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,
@@ -68,6 +72,7 @@ __export(lib_exports, {
   moyu: () => moyu_exports,
   nextLine: () => nextLine,
   registerAppStateAdapter: () => registerAppStateAdapter,
+  removeFluidObserver: () => removeFluidObserver,
   replaceUiData: () => replaceUiData,
   setDefaultAutoTailMs: () => setDefaultAutoTailMs,
   setWaiting: () => setWaiting,
@@ -110,10 +115,12 @@ var import_constants = require("react-reconciler/constants.js");
 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,
@@ -151,6 +158,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);
 }
@@ -794,7 +807,9 @@ globalThis.__moyu_eval_sandbox = (code) => {
 var spring_exports = {};
 __export(spring_exports, {
   a: () => animated,
-  animated: () => animated
+  addFluidObserver: () => addFluidObserver,
+  animated: () => animated,
+  removeFluidObserver: () => removeFluidObserver
 });
 var import_animated = require("@react-spring/animated");
 var import_shared = require("@react-spring/shared");
@@ -827,6 +842,8 @@ var host = (0, import_animated.createHost)(primitives, {
   }
 });
 var animated = host.animated;
+var addFluidObserver = import_shared.addFluidObserver;
+var removeFluidObserver = import_shared.removeFluidObserver;
 
 // src/lib.ts
 __reExport(lib_exports, spring_exports, module.exports);
@@ -851,7 +868,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;
@@ -878,7 +896,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);
@@ -936,10 +955,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);
   };
 }
 
@@ -1390,8 +1412,343 @@ function Checkbox({
   );
 }
 
-// src/components/select.tsx
+// src/components/input.tsx
 var import_react6 = require("react");
+var Input = (0, import_react6.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 = (0, import_react6.useRef)(null);
+  const initialValueRef = (0, import_react6.useRef)(value ?? defaultValue);
+  const initialValue = initialValueRef.current;
+  const stateRef = (0, import_react6.useRef)({
+    value: initialValue,
+    isComposing: false,
+    compositionText: ""
+  });
+  const [state, setState] = (0, import_react6.useState)(stateRef.current);
+  const [focused, setFocused] = (0, import_react6.useState)(false);
+  const [hovered, setHovered] = (0, import_react6.useState)(false);
+  const [pressed, setPressed] = (0, import_react6.useState)(false);
+  const [caretPosition, setCaretPosition] = (0, import_react6.useState)();
+  const [caretVisible, setCaretVisible] = (0, import_react6.useState)(true);
+  const shouldAutoFocusRef = (0, import_react6.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 = (0, import_react6.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 = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      onInput?.(event.state);
+    },
+    [onInput, updateState]
+  );
+  const handleChange = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      onChange?.(event.state, event.source);
+    },
+    [onChange, updateState]
+  );
+  const handleFocus = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      setFocused(true);
+      onFocus?.(event.state);
+    },
+    [onFocus, updateState]
+  );
+  const handleBlur = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      setFocused(false);
+      onBlur?.(event.state);
+    },
+    [onBlur, updateState]
+  );
+  const handleCompositionStart = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      onCompositionStart?.(event.state);
+    },
+    [onCompositionStart, updateState]
+  );
+  const handleCompositionUpdate = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      onCompositionUpdate?.(event.state);
+    },
+    [onCompositionUpdate, updateState]
+  );
+  const handleCompositionEnd = (0, import_react6.useCallback)(
+    (event) => {
+      updateState(event.state);
+      onCompositionEnd?.(event.state);
+    },
+    [onCompositionEnd, updateState]
+  );
+  const handleTextLayout = (0, import_react6.useCallback)((event) => {
+    if (event.text === stateRef.current.value + stateRef.current.compositionText) {
+      setCaretPosition(event.endCursorPosition);
+    }
+  }, []);
+  (0, import_react6.useImperativeHandle)(
+    ref,
+    () => ({
+      focus: () => {
+        if (editableRef.current) {
+          focusEditable(editableRef.current.nodeId);
+        }
+      },
+      blur: () => {
+        if (editableRef.current) {
+          blurEditable(editableRef.current.nodeId);
+        }
+      },
+      getState: () => stateRef.current
+    }),
+    []
+  );
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    if (shouldAutoFocusRef.current && editableRef.current) {
+      focusEditable(editableRef.current.nodeId);
+    }
+  }, []);
+  (0, import_react6.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]);
+  (0, import_react6.useEffect)(() => {
+    if (disabled) {
+      setHovered(false);
+      setPressed(false);
+    }
+  }, [disabled]);
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("sprite", { ...backgroundStyle, targetWidth: viewportWidth, targetHeight: viewportHeight, interactive: false }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("clip", { x: paddingX, width: contentWidth, height: viewportHeight, interactive: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+            "text",
+            {
+              ...textStyle,
+              ...placeholderStyle,
+              text: placeholder,
+              parseMarkup: false,
+              printMode: "instant",
+              anchor: [0, 0.5],
+              pivot: [0, 0.5],
+              interactive: false
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_react7 = require("react");
+var RadioGroupContext = (0, import_react7.createContext)(null);
+function RadioGroup({ value, defaultValue, onValueChange, children, ...containerProps }) {
+  const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
+  const currentValue = value ?? internalValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        value: currentValue,
+        select: (nextValue) => {
+          if (nextValue === currentValue) {
+            return;
+          }
+          if (value === void 0) {
+            setInternalValue(nextValue);
+          }
+          onValueChange?.(nextValue);
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("container", { ...containerProps, children })
+    }
+  );
+}
+function Radio({ value, uncheckedSprite, checkedSprite, onPress, ...buttonProps }) {
+  const group = (0, import_react7.useContext)(RadioGroupContext);
+  if (!group) {
+    throw new Error("Radio must be rendered inside a RadioGroup.");
+  }
+  const checked = group.value === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Button,
+    {
+      ...buttonProps,
+      sprite: checked ? checkedSprite : uncheckedSprite,
+      onPress: (event) => {
+        onPress?.(event);
+        if (!event.defaultPrevented) {
+          group.select(value);
+        }
+      }
+    }
+  );
+}
+
+// src/components/select.tsx
+var import_react8 = require("react");
 function Select({
   value,
   defaultValue,
@@ -1410,8 +1767,8 @@ function Select({
   pivot = anchor,
   ...containerProps
 }) {
-  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
-  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react8.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react8.useState)(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;
@@ -1443,36 +1800,46 @@ function Select({
             }
           }
         ),
-        open && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sprite", { ...listSprite, targetHeight: listHeight, x: offsetX, y: (trigger.targetHeight ?? 0) + offsetY, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("vbox", { x: paddingX, y: paddingY, gap, children: options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Button,
+        open && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("vbox", { x: paddingX, y: paddingY, gap, children: options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.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
-var import_react7 = require("react");
+var import_react9 = require("react");
 function clampValue(value) {
   if (Number.isNaN(value)) {
     return 0;
@@ -1502,14 +1869,14 @@ function Slider({
   onTouchCancel,
   ...containerProps
 }) {
-  const [internalValue, setInternalValue] = (0, import_react7.useState)(() => clampValue(defaultValue));
-  const [dragging, setDragging] = (0, import_react7.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react9.useState)(() => clampValue(defaultValue));
+  const [dragging, setDragging] = (0, import_react9.useState)(false);
   const currentValue = clampValue(value ?? internalValue);
-  const currentValueRef = (0, import_react7.useRef)(currentValue);
+  const currentValueRef = (0, import_react9.useRef)(currentValue);
   currentValueRef.current = currentValue;
-  const dragStateRef = (0, import_react7.useRef)(null);
+  const dragStateRef = (0, import_react9.useRef)(null);
   const distance = Math.max(0, track.targetWidth - thumb.targetWidth);
-  const setSliderValue = (0, import_react7.useCallback)((nextValue) => {
+  const setSliderValue = (0, import_react9.useCallback)((nextValue) => {
     const clampedValue = clampValue(nextValue);
     currentValueRef.current = clampedValue;
     if (value === void 0) {
@@ -1517,7 +1884,7 @@ function Slider({
     }
     onValueChange?.(clampedValue);
   }, [onValueChange, value]);
-  const endDragging = (0, import_react7.useCallback)((commit) => {
+  const endDragging = (0, import_react9.useCallback)((commit) => {
     if (dragStateRef.current === null) {
       return;
     }
@@ -1527,7 +1894,7 @@ function Slider({
       onValueCommit?.(currentValueRef.current);
     }
   }, [onValueCommit]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleMouseUp = () => endDragging(true);
     const handleTouchEnd = (event) => {
       if (dragStateRef.current?.touchIdentifier === event.identifier) {
@@ -1548,7 +1915,7 @@ function Slider({
       removeTouchCancel();
     };
   }, [endDragging]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (disabled) {
       endDragging(false);
     }
@@ -2010,6 +2377,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)) {
@@ -2600,7 +2968,7 @@ function useFadeOut(outTime, pause = false, onFinished) {
 
 // src/hooks/useScrollView.ts
 var import_core = require("@react-spring/core");
-var import_react8 = require("react");
+var import_react10 = require("react");
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -2620,21 +2988,21 @@ function useScrollView({
   initialPosition = "start",
   wheelStep = 72
 }) {
-  const [contentHeight, setContentHeight] = (0, import_react8.useState)(0);
-  const [hasContentLayout, setHasContentLayout] = (0, import_react8.useState)(false);
-  const scrollTargetRef = (0, import_react8.useRef)(0);
-  const didSetInitialPositionRef = (0, import_react8.useRef)(false);
-  const touchDraggingRef = (0, import_react8.useRef)(false);
-  const touchStartYRef = (0, import_react8.useRef)(0);
-  const touchStartOffsetRef = (0, import_react8.useRef)(0);
+  const [contentHeight, setContentHeight] = (0, import_react10.useState)(0);
+  const [hasContentLayout, setHasContentLayout] = (0, import_react10.useState)(false);
+  const scrollTargetRef = (0, import_react10.useRef)(0);
+  const didSetInitialPositionRef = (0, import_react10.useRef)(false);
+  const touchDraggingRef = (0, import_react10.useRef)(false);
+  const touchStartYRef = (0, import_react10.useRef)(0);
+  const touchStartOffsetRef = (0, import_react10.useRef)(0);
   const scrollOffset = (0, import_core.useSpringValue)(0, {
     config: {
       tension: 320,
       friction: 32
     }
   });
-  const maxScroll = (0, import_react8.useMemo)(() => Math.max(0, contentHeight - viewportHeight), [contentHeight, viewportHeight]);
-  const scrollTo = (0, import_react8.useCallback)(
+  const maxScroll = (0, import_react10.useMemo)(() => Math.max(0, contentHeight - viewportHeight), [contentHeight, viewportHeight]);
+  const scrollTo = (0, import_react10.useCallback)(
     (nextOffset, immediate = false) => {
       const offset = clamp(nextOffset, 0, maxScroll);
       if (offset === scrollTargetRef.current && !immediate) {
@@ -2645,13 +3013,13 @@ function useScrollView({
     },
     [maxScroll, scrollOffset]
   );
-  const scrollToRatio = (0, import_react8.useCallback)(
+  const scrollToRatio = (0, import_react10.useCallback)(
     (ratio, immediate = false) => {
       scrollTo(clamp(ratio, 0, 1) * maxScroll, immediate);
     },
     [maxScroll, scrollTo]
   );
-  const handleContentLayout = (0, import_react8.useCallback)(
+  const handleContentLayout = (0, import_react10.useCallback)(
     (event) => {
       if (!didSetInitialPositionRef.current) {
         const initialOffset = initialPosition === "end" ? Math.max(0, event.height - viewportHeight) : 0;
@@ -2664,13 +3032,13 @@ function useScrollView({
     },
     [initialPosition, scrollOffset, viewportHeight]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!hasContentLayout) {
       return;
     }
     scrollTo(scrollTargetRef.current, true);
   }, [hasContentLayout, maxScroll, scrollTo]);
-  const handleWheel = (0, import_react8.useCallback)(
+  const handleWheel = (0, import_react10.useCallback)(
     (event) => {
       if (maxScroll <= 0) {
         return;
@@ -2685,7 +3053,7 @@ function useScrollView({
     },
     [maxScroll, scrollTo, viewportHeight, wheelStep]
   );
-  const handleTouchStart = (0, import_react8.useCallback)(
+  const handleTouchStart = (0, import_react10.useCallback)(
     (event) => {
       if (maxScroll <= 0) {
         return;
@@ -2697,7 +3065,7 @@ function useScrollView({
     },
     [maxScroll]
   );
-  const handleTouchMove = (0, import_react8.useCallback)(
+  const handleTouchMove = (0, import_react10.useCallback)(
     (event) => {
       if (!touchDraggingRef.current) {
         return;
@@ -2707,7 +3075,7 @@ function useScrollView({
     },
     [scrollTo]
   );
-  const handleTouchEnd = (0, import_react8.useCallback)((event) => {
+  const handleTouchEnd = (0, import_react10.useCallback)((event) => {
     if (!touchDraggingRef.current) {
       return;
     }
@@ -2729,7 +3097,7 @@ function useScrollView({
 }
 
 // src/hooks/useScenario.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 var currentScenarioSession = null;
 var scenarioSessionId = 0;
 var scenarioLifecycleQueue = Promise.resolve();
@@ -2871,7 +3239,7 @@ function setWaiting(time, skippable) {
   executePluginCommand("scenario", { subCommand: "setWaiting", time, skippable });
 }
 function useScenario(stories, startName, entryName, goNextOnLoad = false) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const session = acquireScenarioSession({
       stories: normalizeStories(stories),
       startName,
@@ -2885,9 +3253,9 @@ function useScenario(stories, startName, entryName, goNextOnLoad = false) {
 }
 
 // src/hooks/useSoundEffect.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 function useSoundEffect(src) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return () => {
       try {
         if (src) {
@@ -2902,7 +3270,7 @@ function useSoundEffect(src) {
       }
     };
   }, [src]);
-  return (0, import_react10.useCallback)(() => {
+  return (0, import_react12.useCallback)(() => {
     try {
       if (src) {
         executePluginCommand("audio", {
@@ -2918,7 +3286,7 @@ function useSoundEffect(src) {
 }
 
 // src/hooks/useStage.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_valtio5 = require("valtio");
 var SKIP_INTERVAL_MS = 80;
 var DEFAULT_FAST_FORWARD_STEP_LIMIT = 1e4;
@@ -3004,6 +3372,9 @@ function createStage() {
     return addToRegistry(interruptCallbacks, cb);
   }
   function tryInterrupt() {
+    if (tryFinishActiveWait()) {
+      return true;
+    }
     for (const cb of interruptCallbacks) {
       try {
         if (cb()) return true;
@@ -3051,6 +3422,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() {
@@ -3139,12 +3512,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);
@@ -3332,7 +3746,11 @@ function createStage() {
     if (isAnyBlockerActive()) return;
     skipState.active = true;
     invokeSkipCallbacks();
+    const activeWait = _activeWait;
     tryInterrupt();
+    if (activeWait !== null && activeWait !== _activeWait) {
+      return;
+    }
     scheduleSkipNextLine();
   }
   function stopSkip() {
@@ -3351,6 +3769,7 @@ function createStage() {
     if (fastForwardState.active) return;
     if (isAnyAutoBlockerActive()) return;
     autoState.active = true;
+    if (_activeWait !== null) return;
     tryInterrupt();
     scheduleAutoNextLine();
   }
@@ -3387,6 +3806,7 @@ function createStage() {
     return fastForwardState.active;
   }
   function resetRuntimeState() {
+    invalidateActiveWait();
     skipState.active = false;
     autoState.active = false;
     fastForwardState.active = false;
@@ -3432,7 +3852,7 @@ function createStage() {
           setWaiting(time, skippable);
         }
       },
-      hold() {
+      hold(until, skippable = false) {
         handled = true;
         if (warpActive) {
           return;
@@ -3441,6 +3861,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();
@@ -3500,6 +3938,7 @@ function createStage() {
     return parsed.data;
   }
   function dispatchCommand(e) {
+    invalidateActiveWait();
     for (const cb of beforeHandleCommandCallbacks) {
       try {
         cb(e);
@@ -3528,6 +3967,7 @@ function createStage() {
     }
   }
   function dispatchTextLine(e) {
+    invalidateActiveWait();
     const { control, wasHandled } = buildControl();
     for (const handler of textLineHandlers) {
       handler(e, control);
@@ -3561,6 +4001,7 @@ function createStage() {
       })
     ];
     return () => {
+      resetRuntimeState();
       for (const cleanup of cleanups) cleanup();
     };
   }
@@ -3581,52 +4022,54 @@ function createStage() {
     startAuto,
     stopAuto,
     isAutoing,
+    setDefaultAutoTailMs,
     startFastForward,
     stopFastForward,
     isFastForwarding,
+    getSeekingType,
     resetRuntimeState,
     bindEvents
   };
 }
-var StageContext = (0, import_react11.createContext)(null);
+var StageContext = (0, import_react13.createContext)(null);
 function useStageContext() {
-  const ctx = (0, import_react11.useContext)(StageContext);
+  const ctx = (0, import_react13.useContext)(StageContext);
   if (!ctx) throw new Error("useStageContext must be used within StageContextProvider");
   return ctx;
 }
 function StageContextProvider({ stage, children }) {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return stage.bindEvents();
   }, [stage]);
-  return (0, import_react11.createElement)(StageContext.Provider, { value: stage }, children);
+  return (0, import_react13.createElement)(StageContext.Provider, { value: stage }, children);
 }
 function useSkipCallback(callback) {
   const stage = useStageContext();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return stage.addSkipCallback(callback);
   }, [stage, callback]);
 }
 function useInterruptCallback(callback) {
   const stage = useStageContext();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return stage.addInterruptCallback(callback);
   }, [stage, callback]);
 }
 function useSkipBlocker(callback) {
   const stage = useStageContext();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return stage.addSkipBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoBlocker(callback) {
   const stage = useStageContext();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return stage.addAutoBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoTicket() {
   const stage = useStageContext();
-  return (0, import_react11.useCallback)(
+  return (0, import_react13.useCallback)(
     (options) => {
       return stage.issueAutoTicket(options);
     },
@@ -3635,7 +4078,7 @@ function useAutoTicket() {
 }
 function useBeforeHandleCommandCallback(callback) {
   const stage = useStageContext();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return stage.addBeforeHandleCommandCallback(callback);
   }, [stage, callback]);
 }