@momoyu-ink/kit 0.10.0 → 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);
   };
 }
 
@@ -1260,6 +1282,7 @@ function Button({
   textOffsetX,
   textOffsetY,
   textAlign = "center",
+  children,
   anchor,
   pivot = anchor,
   interactive,
@@ -1274,6 +1297,20 @@ function Button({
 }) {
   const [hovered, setHovered] = (0, import_react4.useState)(false);
   const [pressed, setPressed] = (0, import_react4.useState)(false);
+  (0, import_react4.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_react4.useEffect)(() => {
     if (disabled) {
       setHovered(false);
@@ -1323,18 +1360,21 @@ function Button({
         setPressed(false);
       }),
       onClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sprite", { ...spriteProps, src: resolveControlStateValue(src, state), cursor: "pointer", children: text !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "text",
-        {
-          ...resolvedTextStyle,
-          text,
-          x: textOffsetX,
-          y: textOffsetY,
-          interactive: false,
-          anchor: textAnchor,
-          pivot: textAnchor
-        }
-      ) : void 0 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("sprite", { ...spriteProps, src: resolveControlStateValue(src, state), cursor: "pointer", children: [
+        text !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "text",
+          {
+            ...resolvedTextStyle,
+            text,
+            x: textOffsetX,
+            y: textOffsetY,
+            interactive: false,
+            anchor: textAnchor,
+            pivot: textAnchor
+          }
+        ) : void 0,
+        children
+      ] })
     }
   );
 }
@@ -1372,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,
@@ -1392,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;
@@ -1425,43 +1800,57 @@ 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;
+  }
   return Math.max(0, Math.min(1, value));
 }
 function Slider({
   value,
   defaultValue = 0,
   onValueChange,
+  onValueCommit,
   onPress,
   disabled = false,
   track,
@@ -1480,101 +1869,145 @@ function Slider({
   onTouchCancel,
   ...containerProps
 }) {
-  const [internalValue, setInternalValue] = (0, import_react7.useState)(() => clampValue(defaultValue));
-  const [hovered, setHovered] = (0, import_react7.useState)(false);
-  const [dragging, setDragging] = (0, import_react7.useState)(false);
-  const draggingRef = (0, import_react7.useRef)(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_react9.useRef)(currentValue);
+  currentValueRef.current = currentValue;
+  const dragStateRef = (0, import_react9.useRef)(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 = (0, import_react9.useCallback)((nextValue) => {
+    const clampedValue = clampValue(nextValue);
+    currentValueRef.current = clampedValue;
     if (value === void 0) {
-      setInternalValue(nextValue);
+      setInternalValue(clampedValue);
     }
-    onValueChange?.(nextValue);
-  };
-  const endDragging = (0, import_react7.useCallback)(() => {
-    draggingRef.current = false;
+    onValueChange?.(clampedValue);
+  }, [onValueChange, value]);
+  const endDragging = (0, import_react9.useCallback)((commit) => {
+    if (dragStateRef.current === null) {
+      return;
+    }
+    dragStateRef.current = null;
     setDragging(false);
-  }, []);
-  (0, import_react7.useEffect)(() => {
-    const handleEnd = () => {
-      if (draggingRef.current) {
-        endDragging();
+    if (commit) {
+      onValueCommit?.(currentValueRef.current);
+    }
+  }, [onValueCommit]);
+  (0, import_react9.useEffect)(() => {
+    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]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("sprite", { ...trackProps, src: resolveControlStateValue(trackSrc, state), cursor: "pointer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "sprite",
+      onTouchMove: mergeEvent(onTouchMove, moveDragging),
+      onTouchEnd,
+      onTouchCancel: mergeEvent(onTouchCancel, handleTouchCancel),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.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
         }
-      ) })
+      )
     }
   );
 }
@@ -1944,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)) {
@@ -2534,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));
 }
@@ -2554,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) {
@@ -2579,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;
@@ -2598,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;
@@ -2619,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;
@@ -2631,7 +3065,7 @@ function useScrollView({
     },
     [maxScroll]
   );
-  const handleTouchMove = (0, import_react8.useCallback)(
+  const handleTouchMove = (0, import_react10.useCallback)(
     (event) => {
       if (!touchDraggingRef.current) {
         return;
@@ -2641,7 +3075,7 @@ function useScrollView({
     },
     [scrollTo]
   );
-  const handleTouchEnd = (0, import_react8.useCallback)((event) => {
+  const handleTouchEnd = (0, import_react10.useCallback)((event) => {
     if (!touchDraggingRef.current) {
       return;
     }
@@ -2663,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();
@@ -2805,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,
@@ -2819,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) {
@@ -2836,7 +3270,7 @@ function useSoundEffect(src) {
       }
     };
   }, [src]);
-  return (0, import_react10.useCallback)(() => {
+  return (0, import_react12.useCallback)(() => {
     try {
       if (src) {
         executePluginCommand("audio", {
@@ -2852,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;
@@ -2938,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;
@@ -2985,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() {
@@ -3073,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);
@@ -3266,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() {
@@ -3285,6 +3769,7 @@ function createStage() {
     if (fastForwardState.active) return;
     if (isAnyAutoBlockerActive()) return;
     autoState.active = true;
+    if (_activeWait !== null) return;
     tryInterrupt();
     scheduleAutoNextLine();
   }
@@ -3321,6 +3806,7 @@ function createStage() {
     return fastForwardState.active;
   }
   function resetRuntimeState() {
+    invalidateActiveWait();
     skipState.active = false;
     autoState.active = false;
     fastForwardState.active = false;
@@ -3366,7 +3852,7 @@ function createStage() {
           setWaiting(time, skippable);
         }
       },
-      hold() {
+      hold(until, skippable = false) {
         handled = true;
         if (warpActive) {
           return;
@@ -3375,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();
@@ -3434,6 +3938,7 @@ function createStage() {
     return parsed.data;
   }
   function dispatchCommand(e) {
+    invalidateActiveWait();
     for (const cb of beforeHandleCommandCallbacks) {
       try {
         cb(e);
@@ -3462,6 +3967,7 @@ function createStage() {
     }
   }
   function dispatchTextLine(e) {
+    invalidateActiveWait();
     const { control, wasHandled } = buildControl();
     for (const handler of textLineHandlers) {
       handler(e, control);
@@ -3495,6 +4001,7 @@ function createStage() {
       })
     ];
     return () => {
+      resetRuntimeState();
       for (const cleanup of cleanups) cleanup();
     };
   }
@@ -3515,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);
     },
@@ -3569,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]);
 }