@momoyu-ink/kit 0.9.0 → 0.10.0

package/dist/lib.mjs

@@ -19,9 +19,14 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 // 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,
@@ -47,6 +52,7 @@ __export(lib_exports, {
   initGlobalVariableDefaults: () => initGlobalVariableDefaults,
   initUiData: () => initUiData,
   loadVariablesDocument: () => loadVariablesDocument,
+  mergeEvent: () => mergeEvent,
   moyu: () => moyu_exports,
   nextLine: () => nextLine,
   registerAppStateAdapter: () => registerAppStateAdapter,
@@ -73,6 +79,7 @@ __export(lib_exports, {
   useNavigationParams: () => useNavigationParams,
   useNavigationState: () => useNavigationState,
   useScenario: () => useScenario,
+  useScrollView: () => useScrollView,
   useSkipBlocker: () => useSkipBlocker,
   useSkipCallback: () => useSkipCallback,
   useSoundEffect: () => useSoundEffect,
@@ -782,6 +789,8 @@ import { Globals, colors, createStringInterpolator } from "@react-spring/shared"
 // src/spring/primitives.ts
 var primitives = [
   "container",
+  "vbox",
+  "hbox",
   "sprite",
   "text",
   "clip",
@@ -940,6 +949,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
 import { createContext, createElement, useContext } from "react";
@@ -1017,7 +1039,11 @@ function createGameStateContext(defaults) {
 // src/components/navigation.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
 import { proxy as proxy2, useSnapshot as useSnapshot2 } from "valtio";
+
+// src/jsx-runtime.ts
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/navigation.tsx
 var PageParamsContext = createContext2(void 0);
 var OverlayParamsContext = createContext2(void 0);
 var DEBUG_EMPTY_PAGE = "debug-empty";
@@ -1173,6 +1199,374 @@ function useNavigationParams() {
   return overlayParams ?? pageParams ?? {};
 }
 
+// src/components/scroll-view.tsx
+function ScrollView({ width, height, controller, children, clipProps, contentProps }) {
+  return /* @__PURE__ */ jsx(
+    "clip",
+    {
+      ...clipProps,
+      width,
+      height,
+      onWheel: controller.handleWheel,
+      onTouchStart: controller.handleTouchStart,
+      onTouchMove: controller.handleTouchMove,
+      onTouchEnd: controller.handleTouchEnd,
+      onTouchCancel: controller.handleTouchEnd,
+      children: /* @__PURE__ */ jsx(
+        animated.vbox,
+        {
+          ...contentProps,
+          y: controller.scrollOffset.to((value) => -value),
+          onLayout: controller.handleContentLayout,
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/button.tsx
+import { useEffect, useState } from "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] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  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__ */ 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__ */ jsx("sprite", { ...spriteProps, src: resolveControlStateValue(src, state), cursor: "pointer", children: text !== void 0 ? /* @__PURE__ */ jsx(
+        "text",
+        {
+          ...resolvedTextStyle,
+          text,
+          x: textOffsetX,
+          y: textOffsetY,
+          interactive: false,
+          anchor: textAnchor,
+          pivot: textAnchor
+        }
+      ) : void 0 })
+    }
+  );
+}
+
+// src/components/checkbox.tsx
+import { useState as useState2 } from "react";
+function Checkbox({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  uncheckedSprite,
+  checkedSprite,
+  onPress,
+  ...buttonProps
+}) {
+  const [internalChecked, setInternalChecked] = useState2(defaultChecked);
+  const currentChecked = checked ?? internalChecked;
+  return /* @__PURE__ */ 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
+import { useState as useState3 } from "react";
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  onPress,
+  disabled = false,
+  options,
+  trigger,
+  list,
+  option,
+  textStyle,
+  textOffsetX,
+  textOffsetY,
+  textAlign,
+  anchor,
+  pivot = anchor,
+  ...containerProps
+}) {
+  const [internalValue, setInternalValue] = useState3(defaultValue);
+  const [open, setOpen] = useState3(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__ */ jsxs(
+    "container",
+    {
+      ...containerProps,
+      anchor,
+      pivot,
+      interactive: disabled ? false : containerProps.interactive,
+      children: [
+        /* @__PURE__ */ 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__ */ jsx("sprite", { ...listSprite, targetHeight: listHeight, x: offsetX, y: (trigger.targetHeight ?? 0) + offsetY, children: /* @__PURE__ */ jsx("vbox", { x: paddingX, y: paddingY, gap, children: options.map((item) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            sprite: option,
+            lockOn: item.value === currentValue ? "press" : void 0,
+            text: item.text,
+            textStyle,
+            textOffsetX,
+            textOffsetY,
+            textAlign,
+            onPress: (event) => {
+              if (event.defaultPrevented) {
+                return;
+              }
+              if (value === void 0) {
+                setInternalValue(item.value);
+              }
+              onValueChange?.(item.value, item);
+              setOpen(false);
+            }
+          },
+          item.value
+        )) }) }) : void 0
+      ]
+    }
+  );
+}
+
+// src/components/slider.tsx
+import { useCallback, useEffect as useEffect2, useRef, useState as useState4 } from "react";
+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] = useState4(() => clampValue(defaultValue));
+  const [hovered, setHovered] = useState4(false);
+  const [dragging, setDragging] = useState4(false);
+  const draggingRef = 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 = useCallback(() => {
+    draggingRef.current = false;
+    setDragging(false);
+  }, []);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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__ */ 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__ */ jsx("sprite", { ...trackProps, src: resolveControlStateValue(trackSrc, state), cursor: "pointer", children: /* @__PURE__ */ jsx(
+        "sprite",
+        {
+          ...thumbProps,
+          src: resolveControlStateValue(thumbSrc, state),
+          anchor: [0, 0.5],
+          pivot: [0, 0.5],
+          x: currentValue * distance,
+          interactive: false
+        }
+      ) })
+    }
+  );
+}
+
 // src/debug/session.ts
 import { useSnapshot as useSnapshot3, proxy as proxy3 } from "valtio";
 var debugState = proxy3({
@@ -2120,14 +2514,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
+import { useSpringValue } from "@react-spring/core";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState5 } from "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] = useState5(0);
+  const [hasContentLayout, setHasContentLayout] = useState5(false);
+  const scrollTargetRef = useRef2(0);
+  const didSetInitialPositionRef = useRef2(false);
+  const touchDraggingRef = useRef2(false);
+  const touchStartYRef = useRef2(0);
+  const touchStartOffsetRef = useRef2(0);
+  const scrollOffset = useSpringValue(0, {
+    config: {
+      tension: 320,
+      friction: 32
+    }
+  });
+  const maxScroll = useMemo(() => Math.max(0, contentHeight - viewportHeight), [contentHeight, viewportHeight]);
+  const scrollTo = useCallback2(
+    (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 = useCallback2(
+    (ratio, immediate = false) => {
+      scrollTo(clamp(ratio, 0, 1) * maxScroll, immediate);
+    },
+    [maxScroll, scrollTo]
+  );
+  const handleContentLayout = useCallback2(
+    (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]
+  );
+  useEffect3(() => {
+    if (!hasContentLayout) {
+      return;
+    }
+    scrollTo(scrollTargetRef.current, true);
+  }, [hasContentLayout, maxScroll, scrollTo]);
+  const handleWheel = useCallback2(
+    (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 = useCallback2(
+    (event) => {
+      if (maxScroll <= 0) {
+        return;
+      }
+      event.stopPropagation();
+      touchDraggingRef.current = true;
+      touchStartYRef.current = event.clientY;
+      touchStartOffsetRef.current = scrollTargetRef.current;
+    },
+    [maxScroll]
+  );
+  const handleTouchMove = useCallback2(
+    (event) => {
+      if (!touchDraggingRef.current) {
+        return;
+      }
+      event.stopPropagation();
+      scrollTo(touchStartOffsetRef.current + touchStartYRef.current - event.clientY, true);
+    },
+    [scrollTo]
+  );
+  const handleTouchEnd = useCallback2((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
-import { useEffect } from "react";
+import { useEffect as useEffect4 } from "react";
 var currentScenarioSession = null;
 var scenarioSessionId = 0;
 var scenarioLifecycleQueue = Promise.resolve();
@@ -2269,7 +2793,7 @@ function setWaiting(time, skippable) {
   executePluginCommand("scenario", { subCommand: "setWaiting", time, skippable });
 }
 function useScenario(stories, startName, entryName, goNextOnLoad = false) {
-  useEffect(() => {
+  useEffect4(() => {
     const session = acquireScenarioSession({
       stories: normalizeStories(stories),
       startName,
@@ -2283,9 +2807,9 @@ function useScenario(stories, startName, entryName, goNextOnLoad = false) {
 }
 
 // src/hooks/useSoundEffect.ts
-import { useCallback, useEffect as useEffect2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5 } from "react";
 function useSoundEffect(src) {
-  useEffect2(() => {
+  useEffect5(() => {
     return () => {
       try {
         if (src) {
@@ -2300,7 +2824,7 @@ function useSoundEffect(src) {
       }
     };
   }, [src]);
-  return useCallback(() => {
+  return useCallback3(() => {
     try {
       if (src) {
         executePluginCommand("audio", {
@@ -2316,7 +2840,7 @@ function useSoundEffect(src) {
 }
 
 // src/hooks/useStage.ts
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect3, createElement as createElement2, useCallback as useCallback2 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, createElement as createElement2, useCallback as useCallback4 } from "react";
 import { proxy as proxy5, useSnapshot as useSnapshot5 } from "valtio";
 var SKIP_INTERVAL_MS = 80;
 var DEFAULT_FAST_FORWARD_STEP_LIMIT = 1e4;
@@ -2993,38 +3517,38 @@ function useStageContext() {
   return ctx;
 }
 function StageContextProvider({ stage, children }) {
-  useEffect3(() => {
+  useEffect6(() => {
     return stage.bindEvents();
   }, [stage]);
   return createElement2(StageContext.Provider, { value: stage }, children);
 }
 function useSkipCallback(callback) {
   const stage = useStageContext();
-  useEffect3(() => {
+  useEffect6(() => {
     return stage.addSkipCallback(callback);
   }, [stage, callback]);
 }
 function useInterruptCallback(callback) {
   const stage = useStageContext();
-  useEffect3(() => {
+  useEffect6(() => {
     return stage.addInterruptCallback(callback);
   }, [stage, callback]);
 }
 function useSkipBlocker(callback) {
   const stage = useStageContext();
-  useEffect3(() => {
+  useEffect6(() => {
     return stage.addSkipBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoBlocker(callback) {
   const stage = useStageContext();
-  useEffect3(() => {
+  useEffect6(() => {
     return stage.addAutoBlocker(callback);
   }, [stage, callback]);
 }
 function useAutoTicket() {
   const stage = useStageContext();
-  return useCallback2(
+  return useCallback4(
     (options) => {
       return stage.issueAutoTicket(options);
     },
@@ -3033,7 +3557,7 @@ function useAutoTicket() {
 }
 function useBeforeHandleCommandCallback(callback) {
   const stage = useStageContext();
-  useEffect3(() => {
+  useEffect6(() => {
     return stage.addBeforeHandleCommandCallback(callback);
   }, [stage, callback]);
 }
@@ -3041,9 +3565,14 @@ function useBeforeHandleCommandCallback(callback) {
 // src/lib.ts
 export * from "@react-spring/core";
 export {
+  Button,
+  Checkbox,
   DEBUG_EMPTY_PAGE,
   OverlayParamsContext,
   PageParamsContext,
+  ScrollView,
+  Select,
+  Slider,
   StageContextProvider,
   animated as a,
   addEventListener,
@@ -3069,6 +3598,7 @@ export {
   initGlobalVariableDefaults,
   initUiData,
   loadVariablesDocument,
+  mergeEvent,
   moyu_exports as moyu,
   nextLine,
   registerAppStateAdapter,
@@ -3095,6 +3625,7 @@ export {
   useNavigationParams,
   useNavigationState,
   useScenario,
+  useScrollView,
   useSkipBlocker,
   useSkipCallback,
   useSoundEffect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoyu-ink/kit",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Software Development Kit of Moyu Visual Novel Engine",
   "main": "dist/lib.cjs",
   "module": "dist/lib.mjs",