cineview 0.0.1-beta

package/dist/components/runtime/scrollSceneFrameStore.d.ts

@@ -0,0 +1,29 @@
+import { ScrollTimelineState } from '../../types';
+import { ScrollInputDirection } from '../Cineview/directScrollHelpers';
+/**
+ * Continuous values for one scroll Scene. This channel is deliberately
+ * separate from the React render snapshot: the native scroll controller is the
+ * only writer, while Scene consumers subscribe imperatively (MotionValue or
+ * direct DOM updates) and do not schedule a React render for every pixel.
+ */
+export interface ScrollSceneFrame {
+    timelineState: ScrollTimelineState | null;
+    /** Scene-level normalized progress used by legacy/no-timeline consumers. */
+    progress: number;
+    /** Continuous scroll-zone budget progress (kept out of the React snapshot lane). */
+    zoneProgressPx: number | null;
+    visualViewportOffset: number;
+    isCurrent: boolean;
+    isBackdropActive: boolean;
+    isScrolling: boolean;
+    scrollDirection: ScrollInputDirection | null;
+}
+export type ScrollSceneFrameList = readonly (ScrollSceneFrame | undefined)[];
+export interface ScrollSceneFrameStore {
+    setSnapshot: (next: ScrollSceneFrameList) => void;
+    setKeySnapshot: (sceneIndex: number, next: ScrollSceneFrame | undefined) => void;
+    clearFrom: (sceneCount: number) => void;
+    getKeySnapshot: (sceneIndex: number) => ScrollSceneFrame | undefined;
+    subscribeKey: (sceneIndex: number, listener: () => void) => () => void;
+}
+export declare function createScrollSceneFrameStore(): ScrollSceneFrameStore;

package/dist/context/CineviewContext.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface CineviewContextValue {
+    /** px2vw single-ruler ratio: `viewportWidth / size`. Only useAnimateScroll gate margin conversion reads this. */
+    scale: number;
+    /** px2vw single-ruler conversion: design px → physical px (`size * scale`). Shared by all length values. */
+    convert: (size: number) => number;
+}
+declare const CineviewContext: React.Context<CineviewContextValue | null>;
+export { CineviewContext };
+export interface CineviewProviderProps {
+    /** Design spec size baseline (design px). Single conversion ruler site-wide: `scale = viewportWidth / designSize`. */
+    designSize?: number;
+    children: React.ReactNode;
+}
+export declare const CineviewProvider: React.FC<CineviewProviderProps>;
+/**
+ * Use Cineview context
+ */
+export declare const useCineviewContext: () => CineviewContextValue | null;
+/**
+ * Use size conversion function
+ * Convenience hook for directly obtaining the convert function (px2vw single ruler) in components.
+ * Returns stable identity function (no conversion) when used outside Cineview, with one-time dev warning.
+ */
+export declare const useConvertSize: () => ((size: number) => number);

package/dist/dev/PerfPanel.d.ts

@@ -0,0 +1,16 @@
+import { PerformanceSource } from './usePerfMonitor';
+export interface PerfPanelProps {
+    /** 面板位置 */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** 是否默认展开 */
+    defaultExpanded?: boolean;
+    /** Public Cineview ref (usually captured from callbacks.onReady). */
+    source?: PerformanceSource | null;
+    /** Disable polling while the panel is hidden. */
+    enabled?: boolean;
+    /** Allow the panel to be moved away from content it covers. */
+    draggable?: boolean;
+    /** Display labels in the site's active language. */
+    lang?: 'en' | 'zh';
+}
+export declare function PerfPanel({ position, defaultExpanded, source, enabled, draggable, lang, }: PerfPanelProps): import('react').JSX.Element;

package/dist/dev/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 开发者工具导出
+ *
+ * 包含：
+ * - PerfPanel: 实时性能监控面板
+ *
+ * 使用：
+ * import { PerfPanel } from 'cineview/dev';
+ * import 'cineview/dev/style.css';
+ */
+export { PerfPanel } from './PerfPanel';
+export type { PerfPanelProps } from './PerfPanel';
+export { usePerfMonitor } from './usePerfMonitor';
+export type { PerfStats, PerformanceSource } from './usePerfMonitor';

package/dist/dev/usePerfMonitor.d.ts

@@ -0,0 +1,9 @@
+import { CineviewRef, PerformanceMetrics } from '../types';
+/** Public Cineview ref methods consumed by development tools. */
+export type PerformanceSource = Pick<CineviewRef, 'getPerformanceMetrics'>;
+export interface PerfStats {
+    current: PerformanceMetrics;
+    history: readonly PerformanceMetrics[];
+}
+/** Subscribe to shared, 500ms snapshots from a Cineview ref with `monitor` enabled. */
+export declare function usePerfMonitor(source: PerformanceSource | null | undefined, enabled?: boolean): PerfStats | null;

package/dist/drag-scene-engine-y8Wj9ivV.mjs

@@ -0,0 +1,270 @@
+import { useCallback as Q, useEffect as yt, useRef as $ } from "react";
+import { animate as kt } from "framer-motion";
+function ft() {
+  return !1;
+}
+function Ht(n, u) {
+  ft();
+}
+function Mt(n, u) {
+  const e = u?.minVelocity ?? 0, b = u?.maxVelocity ?? 1e3, I = u?.minRatio ?? 0.15, d = u?.maxRatio ?? 0.3;
+  if (!Number.isFinite(n)) return d;
+  const B = b - e;
+  return B <= 0 ? d : d - (Math.max(e, Math.min(b, n)) - e) / B * (d - I);
+}
+function _t(n, u) {
+  const e = n === "y" ? u.velocity.y : u.velocity.x;
+  return Number.isFinite(e) ? -e : 0;
+}
+function Ot({ slideMode: n, isActive: u, sceneIndex: e, currentSceneIndex: b, totalScenes: I, slideDirection: d, slideDuration: B, sceneTransitionDuration: $t, sceneOffset: D, sceneState: g, globalDirection: ot, globalRenderProgress: h, globalIsDragging: st, globalDragProgress: lt, globalDragTimelineProgress: at, controls: it, dragProgressMotion: s, setSceneState: U, setIsAnimating: w, resolveDragProgress: Z, getTimelineDuration: pt, onDragProgressChange: V, onRenderProgressChange: L, onDragTimelineProgressChange: E, onOwnershipRequest: tt, onCandidateSuspensionChange: O, takeoverSnapshot: et, onDraggingChange: H, onDragRelease: v, renderLaneRef: Bt, completeReleaseImmediately: q = !1, onDragEnd: rt, onDragReset: A, thresholdConfig: dt }) {
+  const mt = $(null), bt = $(null), P = $(0), Vt = $(null), r = Bt ?? Vt, G = $(!1), C = $(0), W = $(!1), ut = $(!1);
+  return yt(() => {
+    if (n !== "drag") return;
+    it.set({
+      opacity: 1,
+      x: 0,
+      y: 0,
+      scale: 1,
+      rotate: 0
+    });
+    const f = h, c = st || Math.abs(f) > 1e-3, o = f > 0 ? "forward" : f < 0 ? "backward" : ot, t = u ? c ? "exiting" : "active" : o === "forward" && D === 1 || o === "backward" && D === -1 ? "entering" : "initial";
+    g !== t && (Ht(`🎬 [Scene ${e}] State transition: ${g} -> ${t} (drag mode sync)`), U(t));
+  }, [
+    n,
+    it,
+    u,
+    g,
+    e,
+    h,
+    st,
+    D,
+    ot,
+    U
+  ]), yt(() => () => {
+    P.current += 1;
+    const f = r.current;
+    f && f.ownerSceneIndex === e && (f.stop(), r.current = null), G.current = !1, W.current = !1;
+  }, [r, e]), {
+    handleCandidateSuspend: Q(() => {
+      if (n !== "drag") return !1;
+      const f = r.current, c = !!f?.suspend;
+      W.current = c, f?.suspend?.();
+      const o = O?.(!0) ?? !1;
+      return c || o;
+    }, [
+      r,
+      O,
+      n
+    ]),
+    handleCandidateResume: Q(() => {
+      r.current?.resume?.(), W.current = !1, O?.(!1);
+    }, [r, O]),
+    handleDragStart: Q((f) => {
+      if (n !== "drag") return !1;
+      const c = r.current;
+      if (!u && !c || tt && !tt(f)) return !1;
+      const o = c && W.current ? c.getCurrent?.() ?? h : h, t = et?.current;
+      return t && t.baseRatio === null && (et.current = {
+        ...t,
+        baseRatio: Math.abs(o)
+      }), O?.(!1), c ? (c.preempt ? c.preempt() : c.stop(), r.current = null, W.current = !1, C.current = o, ut.current = !0, s.set(o), V?.(o), E?.(Math.abs(o)), `${e}${c.kind}`, o.toFixed(3)) : (C.current = 0, ut.current = !1), G.current = !0, `${e}`, lt.toFixed(3), at.toFixed(3), H?.(!0), !0;
+    }, [
+      n,
+      u,
+      r,
+      tt,
+      s,
+      V,
+      E,
+      H,
+      e,
+      b,
+      I,
+      lt,
+      at,
+      h,
+      O,
+      et
+    ]),
+    handlePan: Q((f, c) => {
+      if (n !== "drag" || !u && !G.current) return;
+      const o = d === "y" ? c.offset.y : c.offset.x, t = Z(C.current - o / (d === "y" ? window.innerHeight : window.innerWidth)), T = Math.abs(t);
+      if (s.set(t), V?.(t), E?.(T), L?.(t), ft()) {
+        const X = Math.round(Math.abs(t) * 10) / 10;
+        mt.current !== X && (mt.current = X);
+      }
+    }, [
+      n,
+      u,
+      d,
+      e,
+      V,
+      E,
+      L,
+      s,
+      Z
+    ]),
+    handlePanEnd: Q((f, c) => {
+      if (n !== "drag" || !u && !G.current) return;
+      G.current = !1;
+      const o = f.type === "pointercancel";
+      P.current += 1, r.current?.stop(), r.current = null;
+      const t = s.get(), T = pt(), X = _t(d, c), j = Math.abs(X), y = Math.abs(t), Ft = (F, _) => {
+        let Y = null, i = s.get(), m = 0, l = !1, a = !1;
+        const N = F / Math.max(Math.abs(i), 1e-6), p = () => {
+          a || l || r.current !== R || (r.current = null, Y?.stop(), i = 0, s.set(0), V?.(0), E?.(0), L?.(0), _());
+        }, x = () => {
+          if (a || l || r.current !== R) return;
+          const J = Math.abs(i) * N;
+          if (J <= 1e-6) {
+            p();
+            return;
+          }
+          const S = ++m;
+          Y = kt(s, 0, {
+            duration: J,
+            ease: "easeOut",
+            onUpdate: (k) => {
+              S !== m || a || l || (i = k, s.set(k), V?.(k), E?.(Math.abs(k)), L?.(k));
+            },
+            onComplete: () => {
+              S === m && (i = 0, p());
+            }
+          });
+        }, z = () => {
+          a = !0, l = !1, m += 1, Y?.stop();
+        }, R = {
+          kind: "bounce",
+          ownerSceneIndex: e,
+          stop: z,
+          suspend: () => {
+            a || l || (i = s.get(), l = !0, m += 1, Y?.stop());
+          },
+          resume: () => {
+            a || !l || (i = s.get(), l = !1, x());
+          },
+          preempt: z,
+          getCurrent: () => i
+        };
+        r.current = R, x();
+      };
+      if (y < 1e-3) {
+        if (`${e}`, t.toFixed(3), A?.(), ut.current) {
+          const F = C.current >= 0 ? "forward" : "backward";
+          v?.({
+            mode: "bounce",
+            direction: F,
+            targetSceneIndex: F === "forward" ? b + 1 : b - 1
+          });
+        }
+        H?.(!1), u && U("active");
+        return;
+      }
+      const M = t > 0 ? "forward" : "backward", ct = M === "forward" ? b + 1 : b - 1;
+      if (Z(t) === 0 && t !== 0) {
+        w(!0), `${e}`, t.toFixed(3), j.toFixed(1), H?.(!1), v?.({
+          mode: "bounce",
+          direction: M,
+          targetSceneIndex: ct
+        }), Ft(0.15, () => {
+          A?.(), U("active"), w(!1);
+        });
+        return;
+      }
+      const nt = q ? 0.5 : Mt(j, dt);
+      `${e}`, j.toFixed(1), nt.toFixed(3), y.toFixed(3);
+      const Lt = y > 1e-3 && t * X < 0 && j > 600, Et = !o && y > nt && (q || !Lt);
+      if (`${e}`, t.toFixed(3), y.toFixed(3), nt.toFixed(3), j.toFixed(1), X.toFixed(1), Et) {
+        if (w(!0), H?.(!1), q) {
+          rt?.(M, 1, T, T), w(!1);
+          return;
+        }
+        const F = ++P.current, _ = M === "forward" ? 1 : -1, Y = Math.abs(_ - t), i = Math.max(Y * (B / 1e3), 0), m = Math.min(y, 1);
+        v?.({
+          mode: "settle",
+          direction: M,
+          targetSceneIndex: ct,
+          progressRatio: y
+        });
+        let l = null, a = t, N = 0, p = !1, x = !1;
+        const z = () => {
+          x || p || r.current !== S || (r.current = null, l?.stop(), `${e}`, m.toFixed(3), (i * 1e3).toFixed(1), rt?.(M, m, m * T, T), L?.(0), w(!1));
+        }, R = () => {
+          if (x || p || r.current !== S) return;
+          const k = Math.abs(_ - a) * (B / 1e3);
+          if (k <= 1e-6) {
+            z();
+            return;
+          }
+          const xt = ++N;
+          l = kt(a, _, {
+            duration: k,
+            ease: "easeOut",
+            onUpdate: (K) => {
+              if (!(xt !== N || x || p || P.current !== F) && (a = K, Math.abs(K - _) > 1e-6 && s.set(K), L?.(K), ft())) {
+                const wt = Math.round(Math.abs(K) * 10) / 10;
+                bt.current !== wt && (bt.current = wt);
+              }
+            },
+            onComplete: () => {
+              xt === N && (a = _, z());
+            }
+          });
+        }, J = () => {
+          x = !0, p = !1, N += 1, l?.stop();
+        }, S = {
+          kind: "settle",
+          ownerSceneIndex: e,
+          stop: J,
+          suspend: () => {
+            x || p || (p = !0, N += 1, l?.stop());
+          },
+          resume: () => {
+            x || !p || (p = !1, R());
+          },
+          preempt: J,
+          getCurrent: () => a
+        };
+        `${e}`, t.toFixed(3), (i * 1e3).toFixed(1), m.toFixed(3), r.current = S, R();
+      } else {
+        w(!0);
+        const F = Math.min(y * B, 300) / 1e3;
+        `${e}`, t.toFixed(3), (F * 1e3).toFixed(1), H?.(!1), v?.({
+          mode: "bounce",
+          direction: M,
+          targetSceneIndex: ct
+        }), Ft(F, () => {
+          A?.(), w(!1);
+        });
+      }
+    }, [
+      n,
+      u,
+      r,
+      d,
+      e,
+      b,
+      B,
+      s,
+      V,
+      E,
+      L,
+      v,
+      rt,
+      A,
+      H,
+      Z,
+      pt,
+      $t,
+      w,
+      U,
+      q,
+      dt
+    ])
+  };
+}
+export {
+  Ot as t
+};
+
+//# sourceMappingURL=drag-scene-engine-y8Wj9ivV.mjs.map

package/dist/elastic-CBP_FdRv.mjs

@@ -0,0 +1,129 @@
+var t = {
+  elastic: {
+    initial: {
+      scale: 0,
+      opacity: 0
+    },
+    animate: {
+      scale: 1,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 10
+      }
+    },
+    exit: {
+      scale: 0,
+      opacity: 0
+    }
+  },
+  "rubber-band": {
+    initial: { scale: 1 },
+    animate: {
+      scale: [
+        1,
+        1.25,
+        0.75,
+        1.15,
+        0.95,
+        1
+      ],
+      transition: {
+        duration: 1,
+        times: [
+          0,
+          0.3,
+          0.4,
+          0.5,
+          0.65,
+          1
+        ]
+      }
+    },
+    exit: {
+      scale: 0,
+      opacity: 0
+    }
+  },
+  wobble: {
+    initial: {
+      x: 0,
+      rotate: 0
+    },
+    animate: {
+      x: [
+        0,
+        -25,
+        20,
+        -15,
+        10,
+        -5,
+        0
+      ],
+      rotate: [
+        0,
+        -5,
+        3,
+        -3,
+        2,
+        -1,
+        0
+      ],
+      transition: {
+        duration: 1,
+        times: [
+          0,
+          0.15,
+          0.3,
+          0.45,
+          0.6,
+          0.75,
+          1
+        ]
+      }
+    },
+    exit: {
+      x: 0,
+      rotate: 0,
+      opacity: 0
+    }
+  },
+  swing: {
+    initial: {
+      rotate: 0,
+      transformOrigin: "top center"
+    },
+    animate: {
+      rotate: [
+        0,
+        15,
+        -10,
+        5,
+        -5,
+        0
+      ],
+      transformOrigin: "top center",
+      transition: {
+        duration: 1,
+        times: [
+          0,
+          0.2,
+          0.4,
+          0.6,
+          0.8,
+          1
+        ]
+      }
+    },
+    exit: {
+      rotate: 0,
+      opacity: 0
+    }
+  }
+};
+export {
+  t as elasticAnimations
+};
+
+//# sourceMappingURL=elastic-CBP_FdRv.mjs.map