@momoyu-ink/kit 0.9.1 → 0.10.0

package/dist/lib.cjs

@@ -31,9 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/lib.ts
 var lib_exports = {};
 __export(lib_exports, {
+  Button: () => Button,
+  Checkbox: () => Checkbox,
   DEBUG_EMPTY_PAGE: () => DEBUG_EMPTY_PAGE,
   OverlayParamsContext: () => OverlayParamsContext,
   PageParamsContext: () => PageParamsContext,
+  ScrollView: () => ScrollView,
+  Select: () => Select,
+  Slider: () => Slider,
   StageContextProvider: () => StageContextProvider,
   a: () => animated,
   addEventListener: () => addEventListener,
@@ -59,6 +64,7 @@ __export(lib_exports, {
   initGlobalVariableDefaults: () => initGlobalVariableDefaults,
   initUiData: () => initUiData,
   loadVariablesDocument: () => loadVariablesDocument,
+  mergeEvent: () => mergeEvent,
   moyu: () => moyu_exports,
   nextLine: () => nextLine,
   registerAppStateAdapter: () => registerAppStateAdapter,
@@ -85,6 +91,7 @@ __export(lib_exports, {
   useNavigationParams: () => useNavigationParams,
   useNavigationState: () => useNavigationState,
   useScenario: () => useScenario,
+  useScrollView: () => useScrollView,
   useSkipBlocker: () => useSkipBlocker,
   useSkipCallback: () => useSkipCallback,
   useSoundEffect: () => useSoundEffect,
@@ -795,6 +802,8 @@ var import_shared = require("@react-spring/shared");
 // src/spring/primitives.ts
 var primitives = [
   "container",
+  "vbox",
+  "hbox",
   "sprite",
   "text",
   "clip",
@@ -952,6 +961,19 @@ function getStageSize() {
   });
   return stageSize;
 }
+function mergeEvent(handlers, defaultHandler) {
+  return (event) => {
+    if (handlers) {
+      const handlerList = Array.isArray(handlers) ? handlers : [handlers];
+      for (const handler of handlerList) {
+        handler(event);
+      }
+    }
+    if (!event.defaultPrevented) {
+      defaultHandler?.(event);
+    }
+  };
+}
 
 // src/gameState.ts
 var import_react2 = require("react");
@@ -1029,7 +1051,11 @@ function createGameStateContext(defaults) {
 // src/components/navigation.tsx
 var import_react3 = require("react");
 var import_valtio2 = require("valtio");
+
+// src/jsx-runtime.ts
 var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/components/navigation.tsx
 var PageParamsContext = (0, import_react3.createContext)(void 0);
 var OverlayParamsContext = (0, import_react3.createContext)(void 0);
 var DEBUG_EMPTY_PAGE = "debug-empty";
@@ -1185,6 +1211,374 @@ function useNavigationParams() {
   return overlayParams ?? pageParams ?? {};
 }
 
+// src/components/scroll-view.tsx
+function ScrollView({ width, height, controller, children, clipProps, contentProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "clip",
+    {
+      ...clipProps,
+      width,
+      height,
+      onWheel: controller.handleWheel,
+      onTouchStart: controller.handleTouchStart,
+      onTouchMove: controller.handleTouchMove,
+      onTouchEnd: controller.handleTouchEnd,
+      onTouchCancel: controller.handleTouchEnd,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        animated.vbox,
+        {
+          ...contentProps,
+          y: controller.scrollOffset.to((value) => -value),
+          onLayout: controller.handleContentLayout,
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/button.tsx
+var import_react4 = require("react");
+
+// src/components/control.ts
+function resolveControlStateValue(value, state) {
+  if (!Array.isArray(value)) {
+    return value;
+  }
+  const index = state === "idle" ? 0 : state === "hover" ? 1 : state === "press" ? 2 : 3;
+  return value[index] ?? value[0];
+}
+
+// src/components/button.tsx
+function Button({
+  sprite,
+  disabled = false,
+  lockOn,
+  onPress,
+  text,
+  textStyle,
+  textOffsetX,
+  textOffsetY,
+  textAlign = "center",
+  anchor,
+  pivot = anchor,
+  interactive,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
+  onTouchCancel,
+  ...containerProps
+}) {
+  const [hovered, setHovered] = (0, import_react4.useState)(false);
+  const [pressed, setPressed] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if (disabled) {
+      setHovered(false);
+      setPressed(false);
+    }
+  }, [disabled]);
+  const state = disabled ? "disabled" : lockOn ?? (pressed ? "press" : hovered ? "hover" : "idle");
+  const { src, ...spriteProps } = sprite;
+  const resolvedTextStyle = textStyle ? resolveControlStateValue(textStyle, state) : void 0;
+  const textAnchor = textAlign === "left" ? [0, 0.5] : textAlign === "right" ? [1, 0.5] : [0.5, 0.5];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "container",
+    {
+      ...containerProps,
+      anchor,
+      pivot,
+      interactive: disabled ? false : interactive,
+      onMouseEnter: mergeEvent(onMouseEnter, (event) => {
+        if (event.targetId === event.currentTargetId) {
+          event.stopPropagation();
+          return;
+        }
+        setHovered(true);
+      }),
+      onMouseLeave: mergeEvent(onMouseLeave, () => {
+        setHovered(false);
+        setPressed(false);
+      }),
+      onMouseDown: mergeEvent(onMouseDown, () => setPressed(true)),
+      onMouseUp: mergeEvent(onMouseUp, (event) => {
+        if (pressed) {
+          onPress?.(event);
+        }
+        setPressed(false);
+        setHovered(true);
+      }),
+      onTouchStart: mergeEvent(onTouchStart, () => setPressed(true)),
+      onTouchEnd: mergeEvent(onTouchEnd, (event) => {
+        if (pressed) {
+          onPress?.(event);
+        }
+        setPressed(false);
+        setHovered(true);
+      }),
+      onTouchCancel: mergeEvent(onTouchCancel, () => {
+        setHovered(false);
+        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 })
+    }
+  );
+}
+
+// src/components/checkbox.tsx
+var import_react5 = require("react");
+function Checkbox({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  uncheckedSprite,
+  checkedSprite,
+  onPress,
+  ...buttonProps
+}) {
+  const [internalChecked, setInternalChecked] = (0, import_react5.useState)(defaultChecked);
+  const currentChecked = checked ?? internalChecked;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Button,
+    {
+      ...buttonProps,
+      sprite: currentChecked ? checkedSprite : uncheckedSprite,
+      onPress: (event) => {
+        onPress?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        const nextChecked = !currentChecked;
+        if (checked === void 0) {
+          setInternalChecked(nextChecked);
+        }
+        onCheckedChange?.(nextChecked);
+      }
+    }
+  );
+}
+
+// src/components/select.tsx
+var import_react6 = require("react");
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  onPress,
+  disabled = false,
+  options,
+  trigger,
+  list,
+  option,
+  textStyle,
+  textOffsetX,
+  textOffsetY,
+  textAlign,
+  anchor,
+  pivot = anchor,
+  ...containerProps
+}) {
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react6.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;
+  const listHeight = paddingY * 2 + options.length * option.targetHeight + Math.max(0, options.length - 1) * gap;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "container",
+    {
+      ...containerProps,
+      anchor,
+      pivot,
+      interactive: disabled ? false : containerProps.interactive,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Button,
+          {
+            sprite: trigger,
+            disabled,
+            lockOn: open ? "press" : void 0,
+            text: currentOption?.text ?? "",
+            textStyle,
+            textOffsetX,
+            textOffsetY,
+            textAlign,
+            onPress: (event) => {
+              onPress?.(event);
+              if (!event.defaultPrevented) {
+                setOpen((active) => !active);
+              }
+            }
+          }
+        ),
+        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,
+          {
+            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");
+function clampValue(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function Slider({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  onPress,
+  disabled = false,
+  track,
+  thumb,
+  anchor,
+  pivot = anchor,
+  interactive,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onMouseMove,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  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 currentValue = clampValue(value ?? internalValue);
+  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);
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  const endDragging = (0, import_react7.useCallback)(() => {
+    draggingRef.current = false;
+    setDragging(false);
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    const handleEnd = () => {
+      if (draggingRef.current) {
+        endDragging();
+      }
+    };
+    const removeMouseUp = addEventListener("mouseup", handleEnd);
+    const removeTouchEnd = addEventListener("touchend", handleEnd);
+    const removeTouchCancel = addEventListener("touchcancel", handleEnd);
+    return () => {
+      removeMouseUp();
+      removeTouchEnd();
+      removeTouchCancel();
+    };
+  }, [endDragging]);
+  (0, import_react7.useEffect)(() => {
+    if (disabled) {
+      endDragging();
+      setHovered(false);
+    }
+  }, [disabled, endDragging]);
+  const startDragging = (event) => {
+    onPress?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    draggingRef.current = true;
+    setDragging(true);
+    updateValue(event);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "container",
+    {
+      ...containerProps,
+      anchor,
+      pivot,
+      interactive: disabled ? false : interactive,
+      onMouseEnter: mergeEvent(onMouseEnter, () => setHovered(true)),
+      onMouseLeave: mergeEvent(onMouseLeave, () => {
+        setHovered(false);
+        if (!draggingRef.current) {
+          setDragging(false);
+        }
+      }),
+      onMouseDown: mergeEvent(onMouseDown, startDragging),
+      onMouseUp: mergeEvent(onMouseUp, endDragging),
+      onMouseMove: mergeEvent(onMouseMove, (event) => {
+        if (draggingRef.current) {
+          updateValue(event);
+        }
+      }),
+      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",
+        {
+          ...thumbProps,
+          src: resolveControlStateValue(thumbSrc, state),
+          anchor: [0, 0.5],
+          pivot: [0, 0.5],
+          x: currentValue * distance,
+          interactive: false
+        }
+      ) })
+    }
+  );
+}
+
 // src/debug/session.ts
 var import_valtio3 = require("valtio");
 var debugState = (0, import_valtio3.proxy)({
@@ -2132,14 +2526,144 @@ function useFadeOut(outTime, pause = false, onFinished) {
   );
   const skip = () => {
     api.stop();
-    api.set({ opacity: 1 });
+    api.set({ opacity: 0 });
     onFinished?.();
   };
   return [style, api, skip];
 }
 
+// src/hooks/useScrollView.ts
+var import_core = require("@react-spring/core");
+var import_react8 = require("react");
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function normalizeWheelDelta(event, viewportHeight) {
+  switch (event.deltaMode) {
+    case "line":
+      return event.deltaY * 36;
+    case "page":
+      return event.deltaY * viewportHeight * 0.85;
+    case "pixel":
+    default:
+      return event.deltaY;
+  }
+}
+function useScrollView({
+  viewportHeight,
+  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 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)(
+    (nextOffset, immediate = false) => {
+      const offset = clamp(nextOffset, 0, maxScroll);
+      if (offset === scrollTargetRef.current && !immediate) {
+        return;
+      }
+      scrollTargetRef.current = offset;
+      scrollOffset.start(offset, { immediate });
+    },
+    [maxScroll, scrollOffset]
+  );
+  const scrollToRatio = (0, import_react8.useCallback)(
+    (ratio, immediate = false) => {
+      scrollTo(clamp(ratio, 0, 1) * maxScroll, immediate);
+    },
+    [maxScroll, scrollTo]
+  );
+  const handleContentLayout = (0, import_react8.useCallback)(
+    (event) => {
+      if (!didSetInitialPositionRef.current) {
+        const initialOffset = initialPosition === "end" ? Math.max(0, event.height - viewportHeight) : 0;
+        didSetInitialPositionRef.current = true;
+        scrollTargetRef.current = initialOffset;
+        scrollOffset.start(initialOffset, { immediate: true });
+      }
+      setContentHeight(event.height);
+      setHasContentLayout(true);
+    },
+    [initialPosition, scrollOffset, viewportHeight]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (!hasContentLayout) {
+      return;
+    }
+    scrollTo(scrollTargetRef.current, true);
+  }, [hasContentLayout, maxScroll, scrollTo]);
+  const handleWheel = (0, import_react8.useCallback)(
+    (event) => {
+      if (maxScroll <= 0) {
+        return;
+      }
+      const delta = normalizeWheelDelta(event, viewportHeight);
+      if (delta === 0) {
+        return;
+      }
+      event.stopPropagation();
+      const step = -Math.sign(delta) * Math.max(wheelStep, Math.min(Math.abs(delta), viewportHeight * 0.45));
+      scrollTo(scrollTargetRef.current + step);
+    },
+    [maxScroll, scrollTo, viewportHeight, wheelStep]
+  );
+  const handleTouchStart = (0, import_react8.useCallback)(
+    (event) => {
+      if (maxScroll <= 0) {
+        return;
+      }
+      event.stopPropagation();
+      touchDraggingRef.current = true;
+      touchStartYRef.current = event.clientY;
+      touchStartOffsetRef.current = scrollTargetRef.current;
+    },
+    [maxScroll]
+  );
+  const handleTouchMove = (0, import_react8.useCallback)(
+    (event) => {
+      if (!touchDraggingRef.current) {
+        return;
+      }
+      event.stopPropagation();
+      scrollTo(touchStartOffsetRef.current + touchStartYRef.current - event.clientY, true);
+    },
+    [scrollTo]
+  );
+  const handleTouchEnd = (0, import_react8.useCallback)((event) => {
+    if (!touchDraggingRef.current) {
+      return;
+    }
+    event.stopPropagation();
+    touchDraggingRef.current = false;
+  }, []);
+  return {
+    scrollOffset,
+    contentHeight,
+    maxScroll,
+    handleContentLayout,
+    handleWheel,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    scrollTo,
+    scrollToRatio
+  };
+}
+
 // src/hooks/useScenario.ts
-var import_react4 = require("react");
+var import_react9 = require("react");
 var currentScenarioSession = null;
 var scenarioSessionId = 0;
 var scenarioLifecycleQueue = Promise.resolve();
@@ -2281,7 +2805,7 @@ function setWaiting(time, skippable) {
   executePluginCommand("scenario", { subCommand: "setWaiting", time, skippable });
 }
 function useScenario(stories, startName, entryName, goNextOnLoad = false) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const session = acquireScenarioSession({
       stories: normalizeStories(stories),
       startName,
@@ -2295,9 +2819,9 @@ function useScenario(stories, startName, entryName, goNextOnLoad = false) {
 }
 
 // src/hooks/useSoundEffect.ts
-var import_react5 = require("react");
+var import_react10 = require("react");
 function useSoundEffect(src) {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     return () => {
       try {
         if (src) {
@@ -2312,7 +2836,7 @@ function useSoundEffect(src) {
       }
     };
   }, [src]);
-  return (0, import_react5.useCallback)(() => {
+  return (0, import_react10.useCallback)(() => {
     try {
       if (src) {
         executePluginCommand("audio", {
@@ -2328,7 +2852,7 @@ function useSoundEffect(src) {
 }
 
 // src/hooks/useStage.ts
-var import_react6 = require("react");
+var import_react11 = require("react");
 var import_valtio5 = require("valtio");
 var SKIP_INTERVAL_MS = 80;
 var DEFAULT_FAST_FORWARD_STEP_LIMIT = 1e4;
@@ -2998,45 +3522,45 @@ function createStage() {
     bindEvents
   };
 }
-var StageContext = (0, import_react6.createContext)(null);
+var StageContext = (0, import_react11.createContext)(null);
 function useStageContext() {
-  const ctx = (0, import_react6.useContext)(StageContext);
+  const ctx = (0, import_react11.useContext)(StageContext);
   if (!ctx) throw new Error("useStageContext must be used within StageContextProvider");
   return ctx;
 }
 function StageContextProvider({ stage, children }) {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return stage.bindEvents();
   }, [stage]);
-  return (0, import_react6.createElement)(StageContext.Provider, { value: stage }, children);
+  return (0, import_react11.createElement)(StageContext.Provider, { value: stage }, children);
 }
 function useSkipCallback(callback) {
   const stage = useStageContext();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return stage.addSkipCallback(callback);
   }, [stage, callback]);
 }
 function useInterruptCallback(callback) {
   const stage = useStageContext();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return stage.addInterruptCallback(callback);
   }, [stage, callback]);
 }
 function useSkipBlocker(callback) {
   const stage = useStageContext();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return stage.addSkipBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoBlocker(callback) {
   const stage = useStageContext();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return stage.addAutoBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoTicket() {
   const stage = useStageContext();
-  return (0, import_react6.useCallback)(
+  return (0, import_react11.useCallback)(
     (options) => {
       return stage.issueAutoTicket(options);
     },
@@ -3045,7 +3569,7 @@ function useAutoTicket() {
 }
 function useBeforeHandleCommandCallback(callback) {
   const stage = useStageContext();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return stage.addBeforeHandleCommandCallback(callback);
   }, [stage, callback]);
 }