@seed-design/lynx-react-scale-feedback 1.0.0 → 1.1.0

package/lib/PreferredMotionContext.d.ts

@@ -0,0 +1,9 @@
+import { type Context } from "@lynx-js/react";
+/** 호스트가 선호하는 모션 강도. `"reduced"`이면 Scale Feedback을 끈다. */
+export type PreferredMotion = "default" | "reduced";
+/**
+ * @internal `@seed-design/lynx-react`의 `SeedProvider`가 `preferredMotion`을 넣는 context다.
+ * 앱은 `SeedProvider`로 값을 넘긴다.
+ */
+export declare const PreferredMotionContext: Context<PreferredMotion | undefined>;
+//# sourceMappingURL=PreferredMotionContext.d.ts.map

package/lib/PreferredMotionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferredMotionContext.d.ts","sourceRoot":"","sources":["../src/PreferredMotionContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,yDAAyD;AACzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,eAAe,GAAG,SAAS,CAE5D,CAAC"}

package/lib/PreferredMotionContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "@lynx-js/react";
+/**
+ * @internal `@seed-design/lynx-react`의 `SeedProvider`가 `preferredMotion`을 넣는 context다.
+ * 앱은 `SeedProvider`로 값을 넘긴다.
+ */
+export const PreferredMotionContext = createContext(undefined);

package/lib/deprecated-global-props.d.ts

@@ -0,0 +1,4 @@
+export declare function warnDeprecatedMotionGlobalProp(): void;
+/** @internal 테스트용. */
+export declare function resetDeprecatedMotionWarning(): void;
+//# sourceMappingURL=deprecated-global-props.d.ts.map

package/lib/deprecated-global-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-global-props.d.ts","sourceRoot":"","sources":["../src/deprecated-global-props.ts"],"names":[],"mappings":"AAGA,wBAAgB,8BAA8B,IAAI,IAAI,CAOrD;AAED,sBAAsB;AACtB,wBAAgB,4BAA4B,IAAI,IAAI,CAEnD"}

package/lib/deprecated-global-props.js

@@ -0,0 +1,12 @@
+let warned = false;
+// TODO(next major): `motion` global prop 읽기를 제거한다. 앱은 `SeedProvider`에 `preferredMotion`을 넘긴다.
+export function warnDeprecatedMotionGlobalProp() {
+    if (process.env.NODE_ENV === "production" || warned)
+        return;
+    warned = true;
+    console.warn("[@seed-design/lynx-react-scale-feedback] Reading `lynx.__globalProps.motion` is deprecated and will be removed in the next major version. Pass `preferredMotion` to `SeedProvider` instead.");
+}
+/** @internal 테스트용. */
+export function resetDeprecatedMotionWarning() {
+    warned = false;
+}

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./PreferredMotionContext.js";
 export * from "./useScaleFeedback.js";
 export * from "./ScaleFeedback.jsx";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/lib/index.js

@@ -1,2 +1,3 @@
+export * from "./PreferredMotionContext.js";
 export * from "./useScaleFeedback.js";
 export * from "./ScaleFeedback.jsx";

package/lib/use-host-global-props.d.ts

@@ -0,0 +1,12 @@
+import type { GlobalProps } from "@lynx-js/types";
+/**
+ * Reads global props according to `globalPropsMode`.
+ *
+ * `__GLOBAL_PROPS_MODE__` is a constant replaced at app build time, so the chosen function never
+ * changes within a bundle. In `"event"` mode, `useGlobalProps()` subscribes to changes. In
+ * `"reactive"` mode, the whole page re-renders when the host changes a value, so this reads
+ * `lynx.__globalProps` directly: `useGlobalProps()` returns the same value there but warns on every
+ * call in development builds.
+ */
+export declare const useHostGlobalProps: () => GlobalProps | undefined;
+//# sourceMappingURL=use-host-global-props.d.ts.map

package/lib/use-host-global-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-host-global-props.d.ts","sourceRoot":"","sources":["../src/use-host-global-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,WAAW,GAAG,SAGvB,CAAC"}

package/lib/use-host-global-props.js

@@ -0,0 +1,13 @@
+import { useGlobalProps } from "@lynx-js/react";
+/**
+ * Reads global props according to `globalPropsMode`.
+ *
+ * `__GLOBAL_PROPS_MODE__` is a constant replaced at app build time, so the chosen function never
+ * changes within a bundle. In `"event"` mode, `useGlobalProps()` subscribes to changes. In
+ * `"reactive"` mode, the whole page re-renders when the host changes a value, so this reads
+ * `lynx.__globalProps` directly: `useGlobalProps()` returns the same value there but warns on every
+ * call in development builds.
+ */
+export const useHostGlobalProps = typeof __GLOBAL_PROPS_MODE__ !== "undefined" && __GLOBAL_PROPS_MODE__ === "event"
+    ? useGlobalProps
+    : () => lynx.__globalProps;

package/lib/useScaleFeedback.d.ts

@@ -40,9 +40,10 @@ export interface UseScaleFeedbackReturn {
  * The target's transform is owned by this hook. Use a separate content layer
  * when the element already uses translate, rotate, or another transform.
  *
- * Supported on Lynx Engine 3.6 and later. Missing or unknown
- * `GlobalProps.motion` values preserve the default motion; only the exact
- * `"reduced"` value disables scaling.
+ * Supported on Lynx Engine 3.6 and later. `preferredMotion: "reduced"` on
+ * `SeedProvider` disables scaling. Without it, the deprecated
+ * `GlobalProps.motion` fallback is used; only the exact `"reduced"` value
+ * disables scaling.
  */
 export declare function useScaleFeedback(options?: UseScaleFeedbackOptions): UseScaleFeedbackReturn;
 export {};

package/lib/useScaleFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScaleFeedback.d.ts","sourceRoot":"","sources":["../src/useScaleFeedback.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQ/E,KAAK,aAAa,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAE3D,KAAK,6BAA6B,GAAG,WAAW,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC,CAAC;AAChG,KAAK,sBAAsB,GAAG,WAAW,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC;AAUvF,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,4BAA4B,EAAE,sBAAsB,CAAC;IACrD,0BAA0B,EAAE,sBAAsB,CAAC;IACnD,6BAA6B,EAAE,sBAAsB,CAAC;CACvD;AAED,oGAAoG;AACpG,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACjE,8BAA8B,EAAE,6BAA6B,CAAC;CAC/D;AAED,MAAM,WAAW,sBAAsB;IACrC,0DAA0D;IAC1D,yBAAyB,EAAE,yBAAyB,CAAC;IACrD,2DAA2D;IAC3D,wBAAwB,EAAE,wBAAwB,CAAC;CACpD;AAoDD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B,GAAG,sBAAsB,CAyE9F"}
+{"version":3,"file":"useScaleFeedback.d.ts","sourceRoot":"","sources":["../src/useScaleFeedback.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAW/E,KAAK,aAAa,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAE3D,KAAK,6BAA6B,GAAG,WAAW,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC,CAAC;AAChG,KAAK,sBAAsB,GAAG,WAAW,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC;AAUvF,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,4BAA4B,EAAE,sBAAsB,CAAC;IACrD,0BAA0B,EAAE,sBAAsB,CAAC;IACnD,6BAA6B,EAAE,sBAAsB,CAAC;CACvD;AAED,oGAAoG;AACpG,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACjE,8BAA8B,EAAE,6BAA6B,CAAC;CAC/D;AAED,MAAM,WAAW,sBAAsB;IACrC,0DAA0D;IAC1D,yBAAyB,EAAE,yBAAyB,CAAC;IACrD,2DAA2D;IAC3D,wBAAwB,EAAE,wBAAwB,CAAC;CACpD;AAyDD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B,GAAG,sBAAsB,CA6E9F"}

package/lib/useScaleFeedback.js

@@ -1,6 +1,9 @@
-import { runOnMainThread, runOnBackground, useEffect, useGlobalProps, useMainThreadRef, useRef, } from "@lynx-js/react";
+import { runOnMainThread, runOnBackground, useContext, useEffect, useMainThreadRef, useRef, } from "@lynx-js/react";
 import { feedbackScaleDuration, feedbackScaleTimingFunction, } from "@seed-design/lynx-css/scale-feedback";
 import { calculateScaleFeedback, isReducedMotion } from "./calculate-scale-feedback.js";
+import { warnDeprecatedMotionGlobalProp } from "./deprecated-global-props.js";
+import { PreferredMotionContext } from "./PreferredMotionContext.js";
+import { useHostGlobalProps } from "./use-host-global-props.js";
 function runScaleFeedback(targetRef, animationRef, scale, duration) {
     "main thread";
     const target = targetRef.current;
@@ -39,6 +42,11 @@ function readScaleFeedbackScale(target) {
         return null;
     return calculateScaleFeedback(width, height);
 }
+function readDeprecatedReducedMotion(motion) {
+    if (motion !== undefined)
+        warnDeprecatedMotionGlobalProp();
+    return isReducedMotion(motion);
+}
 /**
  * Applies SEED Scale Feedback on the Lynx Main Thread.
  *
@@ -50,14 +58,18 @@ function readScaleFeedbackScale(target) {
  * The target's transform is owned by this hook. Use a separate content layer
  * when the element already uses translate, rotate, or another transform.
  *
- * Supported on Lynx Engine 3.6 and later. Missing or unknown
- * `GlobalProps.motion` values preserve the default motion; only the exact
- * `"reduced"` value disables scaling.
+ * Supported on Lynx Engine 3.6 and later. `preferredMotion: "reduced"` on
+ * `SeedProvider` disables scaling. Without it, the deprecated
+ * `GlobalProps.motion` fallback is used; only the exact `"reduced"` value
+ * disables scaling.
  */
 export function useScaleFeedback(options = {}) {
     const { disabled = false, onTouchStart, onTouchEnd, onTouchCancel } = options;
-    const globalProps = useGlobalProps();
-    const reducedMotion = isReducedMotion(globalProps?.motion);
+    const preferredMotion = useContext(PreferredMotionContext);
+    const globalProps = useHostGlobalProps();
+    const reducedMotion = preferredMotion !== undefined
+        ? preferredMotion === "reduced"
+        : readDeprecatedReducedMotion(globalProps?.motion);
     const targetRef = useMainThreadRef(null);
     const animationRef = useMainThreadRef(null);
     const scaleRef = useMainThreadRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react-scale-feedback",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -31,16 +31,16 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.9.0",
-    "@seed-design/lynx-css": "^1.0.0"
+    "@seed-design/lynx-css": "^1.2.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.9.0",
-    "@seed-design/lynx-css": "1.0.0",
+    "@seed-design/lynx-css": "1.2.0",
     "@seed-design/lynx-vitest-config": "0.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
-    "vitest": "^3.2.4"
+    "vitest": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/PreferredMotionContext.ts

@@ -0,0 +1,12 @@
+import { createContext, type Context } from "@lynx-js/react";
+
+/** 호스트가 선호하는 모션 강도. `"reduced"`이면 Scale Feedback을 끈다. */
+export type PreferredMotion = "default" | "reduced";
+
+/**
+ * @internal `@seed-design/lynx-react`의 `SeedProvider`가 `preferredMotion`을 넣는 context다.
+ * 앱은 `SeedProvider`로 값을 넘긴다.
+ */
+export const PreferredMotionContext: Context<PreferredMotion | undefined> = createContext<
+  PreferredMotion | undefined
+>(undefined);

package/src/deprecated-global-props.ts

@@ -0,0 +1,16 @@
+let warned = false;
+
+// TODO(next major): `motion` global prop 읽기를 제거한다. 앱은 `SeedProvider`에 `preferredMotion`을 넘긴다.
+export function warnDeprecatedMotionGlobalProp(): void {
+  if (process.env.NODE_ENV === "production" || warned) return;
+
+  warned = true;
+  console.warn(
+    "[@seed-design/lynx-react-scale-feedback] Reading `lynx.__globalProps.motion` is deprecated and will be removed in the next major version. Pass `preferredMotion` to `SeedProvider` instead.",
+  );
+}
+
+/** @internal 테스트용. */
+export function resetDeprecatedMotionWarning(): void {
+  warned = false;
+}

package/src/index.ts

@@ -1,2 +1,3 @@
+export * from "./PreferredMotionContext.js";
 export * from "./useScaleFeedback.js";
 export * from "./ScaleFeedback.jsx";

package/src/use-host-global-props.ts

@@ -0,0 +1,18 @@
+import { useGlobalProps } from "@lynx-js/react";
+import type { GlobalProps } from "@lynx-js/types";
+
+declare const __GLOBAL_PROPS_MODE__: "reactive" | "event" | undefined;
+
+/**
+ * Reads global props according to `globalPropsMode`.
+ *
+ * `__GLOBAL_PROPS_MODE__` is a constant replaced at app build time, so the chosen function never
+ * changes within a bundle. In `"event"` mode, `useGlobalProps()` subscribes to changes. In
+ * `"reactive"` mode, the whole page re-renders when the host changes a value, so this reads
+ * `lynx.__globalProps` directly: `useGlobalProps()` returns the same value there but warns on every
+ * call in development builds.
+ */
+export const useHostGlobalProps: () => GlobalProps | undefined =
+  typeof __GLOBAL_PROPS_MODE__ !== "undefined" && __GLOBAL_PROPS_MODE__ === "event"
+    ? useGlobalProps
+    : () => lynx.__globalProps;

package/src/useScaleFeedback.test.ts

@@ -1,10 +1,33 @@
-import { runOnMainThread } from "@lynx-js/react";
+import { createElement, runOnMainThread, type ReactNode } from "@lynx-js/react";
 import { renderHook, waitSchedule } from "@lynx-js/react/testing-library";
-import { describe, expect, expectTypeOf, it } from "vitest";
+import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
 
 import { calculateScaleFeedback, isReducedMotion } from "./calculate-scale-feedback";
+import { resetDeprecatedMotionWarning } from "./deprecated-global-props";
+import { PreferredMotionContext } from "./PreferredMotionContext";
 import { useScaleFeedback, type UseScaleFeedbackOptions } from "./useScaleFeedback";
 
+interface TestLynxGlobal {
+  lynx?: { __globalProps?: Record<string, unknown> };
+  lynxTestingEnv?: {
+    backgroundThread: { globalThis: TestLynxGlobal };
+    mainThread: { globalThis: TestLynxGlobal };
+  };
+}
+
+function setGlobalProps(globalProps: Record<string, unknown>) {
+  const env = (globalThis as unknown as TestLynxGlobal).lynxTestingEnv;
+  const globals = [
+    globalThis as unknown as TestLynxGlobal,
+    env?.backgroundThread.globalThis,
+    env?.mainThread.globalThis,
+  ].filter((global): global is TestLynxGlobal => Boolean(global));
+
+  for (const global of globals) {
+    global.lynx = { ...global.lynx, __globalProps: globalProps };
+  }
+}
+
 describe("useScaleFeedback", () => {
   it("keeps the animation target from being flattened", () => {
     const { result } = renderHook(() => useScaleFeedback());
@@ -24,6 +47,37 @@ describe("useScaleFeedback", () => {
   });
 });
 
+describe("useScaleFeedback deprecated motion global prop", () => {
+  afterEach(() => {
+    setGlobalProps({});
+    resetDeprecatedMotionWarning();
+    vi.restoreAllMocks();
+  });
+
+  it("warns once when it falls back to GlobalProps.motion", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    setGlobalProps({ motion: "reduced" });
+
+    renderHook(() => useScaleFeedback());
+    renderHook(() => useScaleFeedback());
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0]?.[0]).toContain("lynx.__globalProps.motion");
+  });
+
+  it("uses the provider value without reading GlobalProps.motion", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    setGlobalProps({ motion: "reduced" });
+
+    renderHook(() => useScaleFeedback(), {
+      wrapper: ({ children }: { children: ReactNode }) =>
+        createElement(PreferredMotionContext.Provider, { value: "default" }, children),
+    });
+
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+
 describe("calculateScaleFeedback", () => {
   it.each([
     { width: 32, height: 32, expected: 30 / 32 },

package/src/useScaleFeedback.ts

@@ -1,8 +1,8 @@
 import {
   runOnMainThread,
   runOnBackground,
+  useContext,
   useEffect,
-  useGlobalProps,
   useMainThreadRef,
   useRef,
 } from "@lynx-js/react";
@@ -14,6 +14,9 @@ import {
 } from "@seed-design/lynx-css/scale-feedback";
 
 import { calculateScaleFeedback, isReducedMotion } from "./calculate-scale-feedback.js";
+import { warnDeprecatedMotionGlobalProp } from "./deprecated-global-props.js";
+import { PreferredMotionContext } from "./PreferredMotionContext.js";
+import { useHostGlobalProps } from "./use-host-global-props.js";
 
 type LynxViewProps = IntrinsicElements["view"] & ViewProps;
 
@@ -109,6 +112,11 @@ function readScaleFeedbackScale(target: ScaleFeedbackElement | null): number | n
   return calculateScaleFeedback(width, height);
 }
 
+function readDeprecatedReducedMotion(motion: unknown): boolean {
+  if (motion !== undefined) warnDeprecatedMotionGlobalProp();
+  return isReducedMotion(motion);
+}
+
 /**
  * Applies SEED Scale Feedback on the Lynx Main Thread.
  *
@@ -120,14 +128,19 @@ function readScaleFeedbackScale(target: ScaleFeedbackElement | null): number | n
  * The target's transform is owned by this hook. Use a separate content layer
  * when the element already uses translate, rotate, or another transform.
  *
- * Supported on Lynx Engine 3.6 and later. Missing or unknown
- * `GlobalProps.motion` values preserve the default motion; only the exact
- * `"reduced"` value disables scaling.
+ * Supported on Lynx Engine 3.6 and later. `preferredMotion: "reduced"` on
+ * `SeedProvider` disables scaling. Without it, the deprecated
+ * `GlobalProps.motion` fallback is used; only the exact `"reduced"` value
+ * disables scaling.
  */
 export function useScaleFeedback(options: UseScaleFeedbackOptions = {}): UseScaleFeedbackReturn {
   const { disabled = false, onTouchStart, onTouchEnd, onTouchCancel } = options;
-  const globalProps = useGlobalProps() as SeedMotionGlobalProps | undefined;
-  const reducedMotion = isReducedMotion(globalProps?.motion);
+  const preferredMotion = useContext(PreferredMotionContext);
+  const globalProps = useHostGlobalProps() as SeedMotionGlobalProps | undefined;
+  const reducedMotion =
+    preferredMotion !== undefined
+      ? preferredMotion === "reduced"
+      : readDeprecatedReducedMotion(globalProps?.motion);
   const targetRef = useMainThreadRef<ScaleFeedbackElement | null>(null);
   const animationRef = useMainThreadRef<MainThread.Animation>(null);
   const scaleRef = useMainThreadRef<number | null>(null);