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

package/src/groupDrivers.ts

@@ -0,0 +1 @@
+export { useSmoothClipGroupDriver } from './groupDrivers.native';

package/src/index.ts

@@ -1,6 +1,9 @@
 export { SmoothClipView } from './SmoothClipView';
 export type { SmoothClipViewProps } from './SmoothClipView';
 export { useSmoothClipDriver } from './drivers';
+export { useSmoothClipGroupDriver } from './groupDrivers';
+export { getSmoothClipCapabilities } from './capabilities';
+export type { SmoothClipCapabilities } from './capabilityTypes';
 export type {
   ClipAnimationResult,
   ClipReduceMotion,
@@ -13,11 +16,36 @@ export type {
   SpringClipAnimation,
   TimingClipAnimation,
 } from './driverTypes';
+export type {
+  SmoothClipBatchEntry,
+  SmoothClipGroupAnimationResult,
+  SmoothClipGroupCancelBehavior,
+  SmoothClipGroupDriver,
+  SmoothClipGroupDriverOptions,
+  SmoothClipGroupKeyframeAnimation,
+  SmoothClipGroupKeyframeEntry,
+  SmoothClipGroupMotionAnimation,
+  SmoothClipGroupMotionEntry,
+  SmoothClipGroupReactControls,
+  SmoothClipGroupSnapshot,
+  SmoothClipGroupSpringAnimation,
+  SmoothClipGroupSuspensionPolicy,
+  SmoothClipGroupTimingAnimation,
+  SmoothClipGroupUIControls,
+} from './groupDriverTypes';
 export { ClipEasings } from './easings';
-export { normalizeClipGeometry } from './geometry';
-export { createClipPresentation } from './geometry';
+export {
+  canonicalizeClipGeometry,
+  canonicalizeClipPresentation,
+  createClipPresentation,
+  normalizeClipGeometry,
+  normalizeClipPresentation,
+} from './geometry';
 export type {
+  CanonicalClipGeometry,
+  CanonicalSmoothClipPresentation,
   ClipBounds,
+  ClipCurve,
   ClipGeometry,
   SmoothClipPresentation,
 } from './geometry';

package/src/presentationProtocol.ts

@@ -0,0 +1,28 @@
+import type { CanonicalSmoothClipPresentation } from './geometry';
+
+export function isV1CompatiblePresentation(
+  presentation: CanonicalSmoothClipPresentation
+): boolean {
+  const { clip } = presentation;
+  return (
+    clip.curve === 'circular' &&
+    clip.topLeftRadius === clip.radius &&
+    clip.topRightRadius === clip.radius &&
+    clip.bottomRightRadius === clip.radius &&
+    clip.bottomLeftRadius === clip.radius &&
+    presentation.contentScale === 1
+  );
+}
+
+export function assertInitialPresentationProtocol(
+  presentation: CanonicalSmoothClipPresentation,
+  protocolVersion: 1 | 2
+): void {
+  if (protocolVersion === 2 || isV1CompatiblePresentation(presentation)) {
+    return;
+  }
+
+  throw new Error(
+    '[SmoothClipView] The initial presentation requires native presentation protocol V2, but the installed native library only supports V1. Rebuild the native app or select an explicit streaming fallback.'
+  );
+}

package/lib/module/SmoothClipView.web.js

@@ -1,54 +0,0 @@
-"use strict";
-
-import { useEffect } from 'react';
-import Animated, { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { getDriverState, registerDriverView } from "./driverState.js";
-import { clipPresentationEquals, isFiniteClipPresentation } from "./geometry.js";
-import { createWebClipPath } from "./webClipPath.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Fixed-layout CSS fallback. */
-export function SmoothClipView({
-  driver,
-  children,
-  style,
-  ...viewProps
-}) {
-  const {
-    initialPresentation,
-    source
-  } = getDriverState(driver);
-  useEffect(() => registerDriverView(driver), [driver]);
-  const acceptedPresentation = useSharedValue(initialPresentation);
-  const initialClipStyle = {
-    clipPath: createWebClipPath(initialPresentation.clip),
-    overflow: 'hidden'
-  };
-  useAnimatedReaction(() => source.value, (presentation, previousPresentation) => {
-    if (isFiniteClipPresentation(presentation) && !clipPresentationEquals(previousPresentation, presentation)) {
-      acceptedPresentation.value = presentation;
-    }
-  }, [source, acceptedPresentation]);
-  const clipStyle = useAnimatedStyle(() => {
-    const clip = acceptedPresentation.value.clip;
-    return {
-      clipPath: createWebClipPath(clip),
-      overflow: 'hidden'
-    };
-  });
-  const contentStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: acceptedPresentation.value.contentTranslateX
-    }, {
-      translateY: acceptedPresentation.value.contentTranslateY
-    }]
-  }));
-  return /*#__PURE__*/_jsx(Animated.View, {
-    ...viewProps,
-    style: [style, initialClipStyle, clipStyle],
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: contentStyle,
-      children: children
-    })
-  });
-}
-//# sourceMappingURL=SmoothClipView.web.js.map

package/lib/module/SmoothClipView.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","Animated","useAnimatedReaction","useAnimatedStyle","useSharedValue","getDriverState","registerDriverView","clipPresentationEquals","isFiniteClipPresentation","createWebClipPath","jsx","_jsx","SmoothClipView","driver","children","style","viewProps","initialPresentation","source","acceptedPresentation","initialClipStyle","clipPath","clip","overflow","value","presentation","previousPresentation","clipStyle","contentStyle","transform","translateX","contentTranslateX","translateY","contentTranslateY","View"],"sourceRoot":"../../src","sources":["SmoothClipView.web.tsx"],"mappings":";;AAAA,SAAyBA,SAAS,QAAQ,OAAO;AAEjD,OAAOC,QAAQ,IACbC,mBAAmB,EACnBC,gBAAgB,EAChBC,cAAc,QACT,yBAAyB;AAEhC,SAASC,cAAc,EAAEC,kBAAkB,QAAQ,kBAAe;AAClE,SAASC,sBAAsB,EAAEC,wBAAwB,QAAQ,eAAY;AAC7E,SAASC,iBAAiB,QAAQ,kBAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOlD;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACgB,CAAC,EAAE;EACtB,MAAM;IAAEC,mBAAmB;IAAEC;EAAO,CAAC,GAAGb,cAAc,CAACQ,MAAM,CAAC;EAC9Db,SAAS,CAAC,MAAMM,kBAAkB,CAACO,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EACrD,MAAMM,oBAAoB,GAAGf,cAAc,CAACa,mBAAmB,CAAC;EAChE,MAAMG,gBAAgB,GAAG;IACvBC,QAAQ,EAAEZ,iBAAiB,CAACQ,mBAAmB,CAACK,IAAI,CAAC;IACrDC,QAAQ,EAAE;EACZ,CAAyB;EAEzBrB,mBAAmB,CACjB,MAAMgB,MAAM,CAACM,KAAK,EAClB,CAACC,YAAY,EAAEC,oBAAoB,KAAK;IACtC,IACElB,wBAAwB,CAACiB,YAAY,CAAC,IACtC,CAAClB,sBAAsB,CAACmB,oBAAoB,EAAED,YAAY,CAAC,EAC3D;MACAN,oBAAoB,CAACK,KAAK,GAAGC,YAAY;IAC3C;EACF,CAAC,EACD,CAACP,MAAM,EAAEC,oBAAoB,CAC/B,CAAC;EAED,MAAMQ,SAAS,GAAGxB,gBAAgB,CAAC,MAAM;IACvC,MAAMmB,IAAI,GAAGH,oBAAoB,CAACK,KAAK,CAACF,IAAI;IAC5C,OAAO;MACLD,QAAQ,EAAEZ,iBAAiB,CAACa,IAAI,CAAC;MACjCC,QAAQ,EAAE;IACZ,CAAC;EACH,CAAC,CAAC;EAEF,MAAMK,YAAY,GAAGzB,gBAAgB,CAAC,OAAO;IAC3C0B,SAAS,EAAE,CACT;MAAEC,UAAU,EAAEX,oBAAoB,CAACK,KAAK,CAACO;IAAkB,CAAC,EAC5D;MAAEC,UAAU,EAAEb,oBAAoB,CAACK,KAAK,CAACS;IAAkB,CAAC;EAEhE,CAAC,CAAC,CAAC;EAEH,oBACEtB,IAAA,CAACV,QAAQ,CAACiC,IAAI;IAAA,GAAKlB,SAAS;IAAED,KAAK,EAAE,CAACA,KAAK,EAAEK,gBAAgB,EAAEO,SAAS,CAAE;IAAAb,QAAA,eACxEH,IAAA,CAACV,QAAQ,CAACiC,IAAI;MAACnB,KAAK,EAAEa,YAAa;MAAAd,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CACjD,CAAC;AAEpB","ignoreList":[]}

package/lib/module/index.web.js

@@ -1,8 +0,0 @@
-"use strict";
-
-export { SmoothClipView } from "./SmoothClipView.web.js";
-export { useSmoothClipDriver } from './drivers';
-export { ClipEasings } from "./easings.js";
-export { normalizeClipGeometry } from "./geometry.js";
-export { createClipPresentation } from "./geometry.js";
-//# sourceMappingURL=index.web.js.map

package/lib/module/index.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SmoothClipView","useSmoothClipDriver","ClipEasings","normalizeClipGeometry","createClipPresentation"],"sourceRoot":"../../src","sources":["index.web.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,yBAAsB;AAErD,SAASC,mBAAmB,QAAQ,WAAW;AAa/C,SAASC,WAAW,QAAQ,cAAW;AACvC,SAASC,qBAAqB,QAAQ,eAAY;AAClD,SAASC,sBAAsB,QAAQ,eAAY","ignoreList":[]}

package/lib/module/webClipPath.js

@@ -1,25 +0,0 @@
-"use strict";
-
-function px(value) {
-  'worklet';
-
-  return `${value}px`;
-}
-
-/**
- * Creates a fixed-host CSS clip. Percentage/right/bottom anchored descendants
- * continue resolving against the host because this never changes its layout.
- */
-export function createWebClipPath(geometry) {
-  'worklet';
-
-  const width = Math.max(0, geometry.width);
-  const height = Math.max(0, geometry.height);
-  const left = Math.max(0, geometry.x);
-  const top = Math.max(0, geometry.y);
-  const rightEdge = Math.max(0, geometry.x + width);
-  const bottomEdge = Math.max(0, geometry.y + height);
-  const radius = Math.min(Math.max(0, geometry.radius), Math.min(width, height) / 2);
-  return `inset(${px(top)} max(0px, calc(100% - ${px(rightEdge)})) max(0px, calc(100% - ${px(bottomEdge)})) ${px(left)} round ${px(radius)})`;
-}
-//# sourceMappingURL=webClipPath.js.map

package/lib/module/webClipPath.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["px","value","createWebClipPath","geometry","width","Math","max","height","left","x","top","y","rightEdge","bottomEdge","radius","min"],"sourceRoot":"../../src","sources":["webClipPath.ts"],"mappings":";;AAEA,SAASA,EAAEA,CAACC,KAAa,EAAU;EACjC,SAAS;;EACT,OAAO,GAAGA,KAAK,IAAI;AACrB;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAACC,QAAsB,EAAU;EAChE,SAAS;;EACT,MAAMC,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACC,KAAK,CAAC;EACzC,MAAMG,MAAM,GAAGF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACI,MAAM,CAAC;EAC3C,MAAMC,IAAI,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACM,CAAC,CAAC;EACpC,MAAMC,GAAG,GAAGL,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACQ,CAAC,CAAC;EACnC,MAAMC,SAAS,GAAGP,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACM,CAAC,GAAGL,KAAK,CAAC;EACjD,MAAMS,UAAU,GAAGR,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACQ,CAAC,GAAGJ,MAAM,CAAC;EACnD,MAAMO,MAAM,GAAGT,IAAI,CAACU,GAAG,CACrBV,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACW,MAAM,CAAC,EAC5BT,IAAI,CAACU,GAAG,CAACX,KAAK,EAAEG,MAAM,CAAC,GAAG,CAC5B,CAAC;EAED,OAAO,SAASP,EAAE,CAACU,GAAG,CAAC,yBAAyBV,EAAE,CAChDY,SACF,CAAC,2BAA2BZ,EAAE,CAACa,UAAU,CAAC,MAAMb,EAAE,CAChDQ,IACF,CAAC,UAAUR,EAAE,CAACc,MAAM,CAAC,GAAG;AAC1B","ignoreList":[]}

package/lib/typescript/src/SmoothClipView.web.d.ts

@@ -1,10 +0,0 @@
-import { type ReactNode } from 'react';
-import { type ViewProps } from 'react-native';
-import type { SmoothClipDriver } from './driverTypes.js';
-export type SmoothClipViewProps = ViewProps & {
-    driver: SmoothClipDriver;
-    children?: ReactNode;
-};
-/** Fixed-layout CSS fallback. */
-export declare function SmoothClipView({ driver, children, style, ...viewProps }: SmoothClipViewProps): import("react").JSX.Element;
-//# sourceMappingURL=SmoothClipView.web.d.ts.map

package/lib/typescript/src/SmoothClipView.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SmoothClipView.web.d.ts","sourceRoot":"","sources":["../../../src/SmoothClipView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAM9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAe,CAAC;AAKtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iCAAiC;AACjC,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,KAAK,EACL,GAAG,SAAS,EACb,EAAE,mBAAmB,+BA0CrB"}

package/lib/typescript/src/index.web.d.ts

@@ -1,9 +0,0 @@
-export { SmoothClipView } from './SmoothClipView.web.js';
-export type { SmoothClipViewProps } from './SmoothClipView.web.js';
-export { useSmoothClipDriver } from './drivers';
-export type { ClipAnimationResult, ClipReduceMotion, KeyframedClipAnimation, SmoothClipDriver, SmoothClipDriverOptions, SmoothClipReactControls, SmoothClipUIControls, SmoothClipAnimation, SpringClipAnimation, TimingClipAnimation, } from './driverTypes.js';
-export { ClipEasings } from './easings.js';
-export { normalizeClipGeometry } from './geometry.js';
-export { createClipPresentation } from './geometry.js';
-export type { ClipBounds, ClipGeometry, SmoothClipPresentation, } from './geometry.js';
-//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/src/index.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAsB,CAAC;AACtD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAsB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,cAAW,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAY,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAY,CAAC;AACpD,YAAY,EACV,UAAU,EACV,YAAY,EACZ,sBAAsB,GACvB,MAAM,eAAY,CAAC"}

package/lib/typescript/src/webClipPath.d.ts

@@ -1,7 +0,0 @@
-import type { ClipGeometry } from './geometry.js';
-/**
- * Creates a fixed-host CSS clip. Percentage/right/bottom anchored descendants
- * continue resolving against the host because this never changes its layout.
- */
-export declare function createWebClipPath(geometry: ClipGeometry): string;
-//# sourceMappingURL=webClipPath.d.ts.map

package/lib/typescript/src/webClipPath.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"webClipPath.d.ts","sourceRoot":"","sources":["../../../src/webClipPath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAY,CAAC;AAO/C;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAkBhE"}

package/src/SmoothClipView.web.tsx

@@ -1,66 +0,0 @@
-import { type ReactNode, useEffect } from 'react';
-import { type ViewProps, type ViewStyle } from 'react-native';
-import Animated, {
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-import type { SmoothClipDriver } from './driverTypes';
-import { getDriverState, registerDriverView } from './driverState';
-import { clipPresentationEquals, isFiniteClipPresentation } from './geometry';
-import { createWebClipPath } from './webClipPath';
-
-export type SmoothClipViewProps = ViewProps & {
-  driver: SmoothClipDriver;
-  children?: ReactNode;
-};
-
-/** Fixed-layout CSS fallback. */
-export function SmoothClipView({
-  driver,
-  children,
-  style,
-  ...viewProps
-}: SmoothClipViewProps) {
-  const { initialPresentation, source } = getDriverState(driver);
-  useEffect(() => registerDriverView(driver), [driver]);
-  const acceptedPresentation = useSharedValue(initialPresentation);
-  const initialClipStyle = {
-    clipPath: createWebClipPath(initialPresentation.clip),
-    overflow: 'hidden',
-  } as unknown as ViewStyle;
-
-  useAnimatedReaction(
-    () => source.value,
-    (presentation, previousPresentation) => {
-      if (
-        isFiniteClipPresentation(presentation) &&
-        !clipPresentationEquals(previousPresentation, presentation)
-      ) {
-        acceptedPresentation.value = presentation;
-      }
-    },
-    [source, acceptedPresentation]
-  );
-
-  const clipStyle = useAnimatedStyle(() => {
-    const clip = acceptedPresentation.value.clip;
-    return {
-      clipPath: createWebClipPath(clip),
-      overflow: 'hidden',
-    };
-  });
-
-  const contentStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: acceptedPresentation.value.contentTranslateX },
-      { translateY: acceptedPresentation.value.contentTranslateY },
-    ],
-  }));
-
-  return (
-    <Animated.View {...viewProps} style={[style, initialClipStyle, clipStyle]}>
-      <Animated.View style={contentStyle}>{children}</Animated.View>
-    </Animated.View>
-  );
-}

package/src/index.web.ts

@@ -1,23 +0,0 @@
-export { SmoothClipView } from './SmoothClipView.web';
-export type { SmoothClipViewProps } from './SmoothClipView.web';
-export { useSmoothClipDriver } from './drivers';
-export type {
-  ClipAnimationResult,
-  ClipReduceMotion,
-  KeyframedClipAnimation,
-  SmoothClipDriver,
-  SmoothClipDriverOptions,
-  SmoothClipReactControls,
-  SmoothClipUIControls,
-  SmoothClipAnimation,
-  SpringClipAnimation,
-  TimingClipAnimation,
-} from './driverTypes';
-export { ClipEasings } from './easings';
-export { normalizeClipGeometry } from './geometry';
-export { createClipPresentation } from './geometry';
-export type {
-  ClipBounds,
-  ClipGeometry,
-  SmoothClipPresentation,
-} from './geometry';

package/src/webClipPath.ts

@@ -1,30 +0,0 @@
-import type { ClipGeometry } from './geometry';
-
-function px(value: number): string {
-  'worklet';
-  return `${value}px`;
-}
-
-/**
- * Creates a fixed-host CSS clip. Percentage/right/bottom anchored descendants
- * continue resolving against the host because this never changes its layout.
- */
-export function createWebClipPath(geometry: ClipGeometry): string {
-  'worklet';
-  const width = Math.max(0, geometry.width);
-  const height = Math.max(0, geometry.height);
-  const left = Math.max(0, geometry.x);
-  const top = Math.max(0, geometry.y);
-  const rightEdge = Math.max(0, geometry.x + width);
-  const bottomEdge = Math.max(0, geometry.y + height);
-  const radius = Math.min(
-    Math.max(0, geometry.radius),
-    Math.min(width, height) / 2
-  );
-
-  return `inset(${px(top)} max(0px, calc(100% - ${px(
-    rightEdge
-  )})) max(0px, calc(100% - ${px(bottomEdge)})) ${px(
-    left
-  )} round ${px(radius)})`;
-}