react-native-smooth-clip-view 0.3.0 → 0.4.0

package/src/index.ts

@@ -1,51 +1,43 @@
 export { SmoothClipView } from './SmoothClipView';
 export type { SmoothClipViewProps } from './SmoothClipView';
-export { useSmoothClipDriver } from './drivers';
-export { useSmoothClipGroupDriver } from './groupDrivers';
+export { useSmoothClipController } from './controllers';
+export { useSmoothClipGroup } from './groups';
 export { getSmoothClipCapabilities } from './capabilities';
 export type { SmoothClipCapabilities } from './capabilityTypes';
 export type {
-  ClipAnimationResult,
   ClipReduceMotion,
-  KeyframedClipAnimation,
-  SmoothClipDriver,
-  SmoothClipDriverOptions,
-  SmoothClipReactControls,
-  SmoothClipUIControls,
-  SmoothClipAnimation,
   SpringClipAnimation,
   TimingClipAnimation,
-} from './driverTypes';
+  SmoothClipAnimation,
+  SmoothClipCompletion,
+  SmoothClipController,
+  SmoothClipControllerOptions,
+  SmoothClipControllerReact,
+  SmoothClipControllerUI,
+  SmoothClipInitialFrame,
+  SmoothClipReactRun,
+  SmoothClipRef,
+  SmoothClipRunHandle,
+} from './controllerTypes';
 export type {
-  SmoothClipBatchEntry,
-  SmoothClipGroupAnimationResult,
-  SmoothClipGroupCancelBehavior,
-  SmoothClipGroupDriver,
-  SmoothClipGroupDriverOptions,
-  SmoothClipGroupKeyframeAnimation,
-  SmoothClipGroupKeyframeEntry,
-  SmoothClipGroupMotionAnimation,
-  SmoothClipGroupMotionEntry,
-  SmoothClipGroupReactControls,
+  SmoothClipGroup,
+  SmoothClipGroupFrame,
+  SmoothClipGroupOptions,
   SmoothClipGroupSnapshot,
-  SmoothClipGroupSpringAnimation,
-  SmoothClipGroupSuspensionPolicy,
-  SmoothClipGroupTimingAnimation,
-  SmoothClipGroupUIControls,
-} from './groupDriverTypes';
+  SmoothClipGroupTarget,
+} from './groupTypes';
 export { ClipEasings } from './easings';
 export {
   canonicalizeClipGeometry,
   canonicalizeClipPresentation,
   createClipPresentation,
-  normalizeClipGeometry,
-  normalizeClipPresentation,
 } from './geometry';
 export type {
   CanonicalClipGeometry,
+  CanonicalClipBoxShadow,
   CanonicalSmoothClipPresentation,
-  ClipBounds,
   ClipCurve,
   ClipGeometry,
+  ClipBoxShadow,
   SmoothClipPresentation,
 } from './geometry';

package/src/nativeCompletion.ts

@@ -1,37 +1,72 @@
-import { scheduleOnUI } from 'react-native-worklets';
-import { deliverDriverCompletion } from './driverState';
+import NativeSmoothClipModule from './smoothClipNative';
 
-export function completeNativeAnimation(
-  driverId: number,
-  animationId: number,
-  finished: boolean
-): void {
-  deliverDriverCompletion(driverId, animationId, finished);
+type DriverCompletion = Readonly<{
+  driverId: number;
+  animationId: number;
+  completionTag: number;
+  finished: boolean;
+}>;
+
+type GroupCompletion = Readonly<{
+  controllerId: number;
+  groupId: number;
+  completionTag: number;
+  finished: boolean;
+  snapshots: readonly number[];
+}>;
+
+const driverListeners = new Map<
+  number,
+  Set<(event: DriverCompletion) => void>
+>();
+const groupListeners = new Map<number, Set<(event: GroupCompletion) => void>>();
+let driverSubscription: { remove(): void } | undefined;
+let groupSubscription: { remove(): void } | undefined;
+
+function ensureDriverSubscription(): void {
+  driverSubscription ??= NativeSmoothClipModule.onClipAnimationComplete(
+    (event) => {
+      const listeners = driverListeners.get(event.driverId);
+      if (!listeners) return;
+      for (const listener of listeners) listener(event);
+    }
+  );
 }
 
-export function synchronizeNativeCompletion(
-  activeAnimationId: { value: number },
-  ownership: { value: number },
-  animationId: number,
-  _finished: boolean
-): void {
-  // Unfinished completions must also release ownership: native emits
-  // finished:false when the last participating view unmounts or the system
-  // strips the animation. Superseded ids are already filtered by the
-  // active-id comparison below, so no finished-based gate is needed.
-  scheduleOnUI(
-    (
-      active: { value: number },
-      owner: { value: number },
-      completedId: number
-    ) => {
-      'worklet';
-      if (active.value !== completedId) return;
-      active.value = 0;
-      owner.value = 0;
-    },
-    activeAnimationId,
-    ownership,
-    animationId
+function ensureGroupSubscription(): void {
+  groupSubscription ??= NativeSmoothClipModule.onClipGroupAnimationComplete(
+    (event) => {
+      const listeners = groupListeners.get(event.controllerId);
+      if (!listeners) return;
+      for (const listener of listeners) listener(event);
+    }
   );
 }
+
+export function subscribeDriverCompletion(
+  driverId: number,
+  listener: (event: DriverCompletion) => void
+): () => void {
+  const listeners = driverListeners.get(driverId) ?? new Set();
+  listeners.add(listener);
+  driverListeners.set(driverId, listeners);
+  ensureDriverSubscription();
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) driverListeners.delete(driverId);
+  };
+}
+
+export function subscribeGroupCompletion(
+  controllerId: number,
+  listener: (event: GroupCompletion) => void
+): () => void {
+  const listeners = groupListeners.get(controllerId) ?? new Set();
+  listeners.add(listener);
+  groupListeners.set(controllerId, listeners);
+  ensureGroupSubscription();
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) groupListeners.delete(controllerId);
+  };
+}

package/src/presentationCodec.ts

@@ -0,0 +1,134 @@
+/* eslint-disable no-bitwise -- the native packet carries packed RRGGBBAA colors */
+import type { CanonicalSmoothClipPresentation } from './geometry';
+
+/**
+ * Versionless native packet layout. Keep this as the single JS codec used by
+ * drivers, groups, snapshots, and cancellation.
+ */
+export const PRESENTATION_STRIDE = 21;
+
+export function appendPresentationPacket(
+  values: number[],
+  presentation: CanonicalSmoothClipPresentation
+): void {
+  'worklet';
+  const {
+    clip,
+    contentTranslateX,
+    contentTranslateY,
+    contentScale,
+    boxShadow,
+  } = presentation;
+  const color = ((boxShadow?.color as unknown as number) ?? 0x000000ff) >>> 0;
+  values.push(
+    clip.x,
+    clip.y,
+    clip.width,
+    clip.height,
+    clip.topLeftRadius,
+    clip.topRightRadius,
+    clip.bottomRightRadius,
+    clip.bottomLeftRadius,
+    clip.curve === 'continuous' ? 1 : 0,
+    contentTranslateX,
+    contentTranslateY,
+    contentScale,
+    boxShadow === undefined ? 0 : 1,
+    ((color >>> 24) & 0xff) / 255,
+    ((color >>> 16) & 0xff) / 255,
+    ((color >>> 8) & 0xff) / 255,
+    (color & 0xff) / 255,
+    boxShadow?.offsetX ?? 0,
+    boxShadow?.offsetY ?? 0,
+    boxShadow?.blurRadius ?? 0,
+    boxShadow?.spreadDistance ?? 0
+  );
+}
+
+export function presentationPacket(
+  presentation: CanonicalSmoothClipPresentation
+): number[] {
+  'worklet';
+  const values: number[] = [];
+  appendPresentationPacket(values, presentation);
+  return values;
+}
+
+export function presentationFromPacket(
+  values: readonly number[],
+  offset = 0
+): CanonicalSmoothClipPresentation | null {
+  'worklet';
+  if (values.length < offset + PRESENTATION_STRIDE) return null;
+  for (let index = offset; index < offset + PRESENTATION_STRIDE; index += 1) {
+    if (!Number.isFinite(values[index])) return null;
+  }
+  const topLeftRadius = values[offset + 4] as number;
+  const topRightRadius = values[offset + 5] as number;
+  const bottomRightRadius = values[offset + 6] as number;
+  const bottomLeftRadius = values[offset + 7] as number;
+  const curveCode = values[offset + 8] as number;
+  const contentScale = values[offset + 11] as number;
+  const shadowEnabledCode = values[offset + 12] as number;
+  const red = values[offset + 13] as number;
+  const green = values[offset + 14] as number;
+  const blue = values[offset + 15] as number;
+  const alpha = values[offset + 16] as number;
+  const blurRadius = values[offset + 19] as number;
+  if (
+    (curveCode !== 0 && curveCode !== 1) ||
+    contentScale <= 0 ||
+    (shadowEnabledCode !== 0 && shadowEnabledCode !== 1) ||
+    red < 0 ||
+    red > 1 ||
+    green < 0 ||
+    green > 1 ||
+    blue < 0 ||
+    blue > 1 ||
+    alpha < 0 ||
+    alpha > 1 ||
+    blurRadius < 0
+  ) {
+    return null;
+  }
+  const shadowEnabled = shadowEnabledCode === 1;
+  const color =
+    ((Math.round(red * 255) << 24) |
+      (Math.round(green * 255) << 16) |
+      (Math.round(blue * 255) << 8) |
+      Math.round(alpha * 255)) >>>
+    0;
+  return {
+    clip: {
+      x: values[offset] as number,
+      y: values[offset + 1] as number,
+      width: values[offset + 2] as number,
+      height: values[offset + 3] as number,
+      radius:
+        topLeftRadius === topRightRadius &&
+        topLeftRadius === bottomRightRadius &&
+        topLeftRadius === bottomLeftRadius
+          ? topLeftRadius
+          : 0,
+      topLeftRadius,
+      topRightRadius,
+      bottomRightRadius,
+      bottomLeftRadius,
+      curve: curveCode === 1 ? 'continuous' : 'circular',
+    },
+    contentTranslateX: values[offset + 9] as number,
+    contentTranslateY: values[offset + 10] as number,
+    contentScale,
+    ...(shadowEnabled
+      ? {
+          boxShadow: {
+            color,
+            offsetX: values[offset + 17] as number,
+            offsetY: values[offset + 18] as number,
+            blurRadius,
+            spreadDistance: values[offset + 20] as number,
+          },
+        }
+      : {}),
+  };
+}

package/lib/module/driverState.js

@@ -1,82 +0,0 @@
-"use strict";
-
-const states = new WeakMap();
-const statesById = new Map();
-let nextDriverId = Date.now() * 1024;
-export function allocateDriverId() {
-  nextDriverId += 1;
-  if (!Number.isSafeInteger(nextDriverId)) nextDriverId = 1;
-  return nextDriverId;
-}
-export function setDriverState(driver, state) {
-  // WeakMap-only: safe to call from render (discarded renders leave nothing
-  // reachable) and survives effect replays so getDriverState keeps working.
-  states.set(driver, state);
-}
-
-// The strong by-id index is attached in the driver hook's effect and detached
-// in its cleanup, so discarded renders never leak entries and StrictMode /
-// <Activity> effect replays can re-attach the same state.
-export function attachDriverState(state) {
-  statesById.set(state.driverId, state);
-}
-export function detachDriverState(state) {
-  if (statesById.get(state.driverId) === state) {
-    statesById.delete(state.driverId);
-  }
-  // Requests pending at teardown were settled by rejectDriverRequests, but
-  // their completion deferrals can no longer be released: the late-scheduled
-  // resolver's releaseDriverCompletions no-ops against a detached state. An
-  // effect replay reattaches THIS same object, so a stale positive count
-  // would queue every future completion forever. The deferrals died with
-  // their requests — reset them.
-  state.completionDeferrals = 0;
-  state.deferredCompletions.length = 0;
-}
-export function createDriverState(driverId, initialPresentation, source, onAnimationComplete, activeAnimationId, ownership) {
-  return {
-    driverId,
-    initialPresentation,
-    source,
-    activeAnimationId,
-    ownership,
-    onAnimationComplete,
-    completionDeferrals: 0,
-    deferredCompletions: []
-  };
-}
-export function deliverDriverCompletion(driverId, animationId, finished) {
-  const state = statesById.get(driverId);
-  if (!state) return;
-  const result = {
-    animationId,
-    finished
-  };
-  if (state.completionDeferrals > 0) {
-    state.deferredCompletions.push(result);
-    return;
-  }
-  state.onAnimationComplete.current?.(result);
-}
-export function deferDriverCompletions(driverId) {
-  const state = statesById.get(driverId);
-  if (state) state.completionDeferrals += 1;
-}
-export function releaseDriverCompletions(driverId) {
-  const state = statesById.get(driverId);
-  if (!state || state.completionDeferrals === 0) return;
-  state.completionDeferrals -= 1;
-  if (state.completionDeferrals !== 0) return;
-  const deferred = state.deferredCompletions.splice(0);
-  for (const result of deferred) {
-    state.onAnimationComplete.current?.(result);
-  }
-}
-export function getDriverState(driver) {
-  const state = states.get(driver);
-  if (!state) {
-    throw new Error('[SmoothClipView] Drivers must be created by useSmoothClipDriver.');
-  }
-  return state;
-}
-//# sourceMappingURL=driverState.js.map

package/lib/module/driverState.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["states","WeakMap","statesById","Map","nextDriverId","Date","now","allocateDriverId","Number","isSafeInteger","setDriverState","driver","state","set","attachDriverState","driverId","detachDriverState","get","delete","completionDeferrals","deferredCompletions","length","createDriverState","initialPresentation","source","onAnimationComplete","activeAnimationId","ownership","deliverDriverCompletion","animationId","finished","result","push","current","deferDriverCompletions","releaseDriverCompletions","deferred","splice","getDriverState","Error"],"sourceRoot":"../../src","sources":["driverState.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/driverTypes.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export {};
-//# sourceMappingURL=driverTypes.js.map

package/lib/module/driverTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["driverTypes.ts"],"mappings":"","ignoreList":[]}

package/lib/module/drivers.android.js

@@ -1,6 +0,0 @@
-"use strict";
-
-// Platform re-export only — the implementation is shared with iOS.
-// Edit drivers.native.ts, not this file.
-export { useSmoothClipDriver } from "./drivers.native.js";
-//# sourceMappingURL=drivers.android.js.map

package/lib/module/drivers.android.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSmoothClipDriver"],"sourceRoot":"../../src","sources":["drivers.android.ts"],"mappings":";;AAAA;AACA;AACA,SAASA,mBAAmB,QAAQ,qBAAkB","ignoreList":[]}

package/lib/module/drivers.ios.js

@@ -1,6 +0,0 @@
-"use strict";
-
-// Platform re-export only — the implementation is shared with Android.
-// Edit drivers.native.ts, not this file.
-export { useSmoothClipDriver } from "./drivers.native.js";
-//# sourceMappingURL=drivers.ios.js.map

package/lib/module/drivers.ios.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSmoothClipDriver"],"sourceRoot":"../../src","sources":["drivers.ios.ts"],"mappings":";;AAAA;AACA;AACA,SAASA,mBAAmB,QAAQ,qBAAkB","ignoreList":[]}

package/lib/module/drivers.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export { useSmoothClipDriver } from "./drivers.native.js";
-//# sourceMappingURL=drivers.js.map

package/lib/module/drivers.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSmoothClipDriver"],"sourceRoot":"../../src","sources":["drivers.ts"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,qBAAkB","ignoreList":[]}