@pixodesk/svg-animator-core 1.0.24 → 1.0.26

package/dist/index.d.cts

@@ -17368,8 +17368,8 @@ interface PxNode extends PxInfer<typeof PxNodeBase> {
  * `{ width?:number, height?:number, viewBox?:string, animator?:AnimatorConfig }`
  */
 declare const PxSvgNodeExtra: PxSchema<{} & {
-    width?: number | undefined;
-    height?: number | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     viewBox?: string | undefined;
     animator?: ({} & {
         mode?: "auto" | "waapi" | "frames" | undefined;
@@ -17658,8 +17658,8 @@ declare const PxSvgNodeExtra: PxSchema<{} & {
     }) | undefined;
 }, false> & {
     readonly _shape: {
-        width: PxSchema<number | undefined, true>;
-        height: PxSchema<number | undefined, true>;
+        width: PxSchema<string | number | undefined, true>;
+        height: PxSchema<string | number | undefined, true>;
         viewBox: PxSchema<string | undefined, true>;
         animator: PxSchema<({} & {
             mode?: "auto" | "waapi" | "frames" | undefined;
@@ -17967,8 +17967,8 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
     type: "svg";
 } & {
     children?: any[] | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     viewBox?: string | undefined;
     animator?: ({} & {
         mode?: "auto" | "waapi" | "frames" | undefined;
@@ -20936,8 +20936,8 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
     readonly _shape: {
         type: PxSchema<"svg", false>;
         children: PxSchema<any[] | undefined, true>;
-        width: PxSchema<number | undefined, true>;
-        height: PxSchema<number | undefined, true>;
+        width: PxSchema<string | number | undefined, true>;
+        height: PxSchema<string | number | undefined, true>;
         viewBox: PxSchema<string | undefined, true>;
         animator: PxSchema<({} & {
             mode?: "auto" | "waapi" | "frames" | undefined;
@@ -24038,6 +24038,7 @@ declare function reverseEasing(easing: Easing | undefined): Easing | undefined;
 declare function toRGBA(color: Array<number>): string;
 declare const COLOUR_ATTR_NAMES: Set<string>;
 declare const TRANSFORM_FN_NAMES: Set<string>;
+declare const PCT_BASED_ATTR_NAMES: Set<string>;
 /**
  * Compose a `PxTransformParts` record into a single SVG/CSS transform string in
  * the canonical order:
@@ -24138,6 +24139,23 @@ declare function sanitiseAttributeValue(name: string, value: any): any | undefin
 declare function resolveStyle(style: string | Record<string, string | number> | undefined, defs?: PxDefs): Record<string, string | number> | undefined;
 declare function getNormalizedProps(props: Record<string, any>): Record<string, any>;
 
+/**
+ * Time separation between a cycle's snap-back keyframe and the previous repetition's
+ * end, in ms.
+ *
+ * SINGLE SOURCE OF TRUTH — the editor imports this and converts to its own frame unit
+ * (`TLoop.smallFrameShift = LOOP_JUMP_SHIFT_MS / FRAME_DURATION_MS`), so the two sides
+ * cannot drift apart and materialise different keyframes (B7).
+ *
+ * 1ms, not one 10ms editor frame: a 10ms snap-back is long enough to read as a visible
+ * jump in a looping animation (confirmed visually). The gap only has to be non-zero — it
+ * exists so the snap-back is a discontinuity rather than an interpolated tween.
+ *
+ * ⚠️ The editor works in FRAMES (`FRAME_DURATION_MS = 10`), so this is a sub-frame shift
+ * there. `TKeyframeGroup` rounds keyframe times to integer frames in some paths; the
+ * editor side keeps the fractional value and must not be re-clamped to a whole frame.
+ */
+declare const LOOP_JUMP_SHIFT_MS = 1;
 /**
  * Interpolates between two keyframe values based on property type.
  * Returns the raw interpolated value (not a CSS string).
@@ -24468,4 +24486,4 @@ interface EffectDiff {
  */
 declare function diffInEffect(a: VmNode, b: VmNode): Array<EffectDiff>;
 
-export { type ApplyResult, COLOUR_ATTR_NAMES, CSS_ONLY_STYLE_PROPS, DEFAULT_DURATION_MS, DISALLOWED_SVG_TAGS_LOWER, type ExtendPathOpts, type ExtendedPath, type FillMode, type GlyphCharBox, type GlyphCharBoxAlongPath, type GlyphMaterialiseOpts, INTERNAL_ATTRS, type JsMode, type KeysMatch, type MaterialiseAllOptions, type MotionPathMaterialisationOptions, type MotionPathSample, type OutAction, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, type PathPoint, type PathSampler, type PlaybackDirection, type PxAnimatable, type PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, type PxAnimationDefinition, PxAnimationDefinitionSchema, type PxAnimatorAPI, type PxAnimatorCallbacksConfig, type PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, type PxAttrValue, PxAttrValueSchema, type PxBasicAnimatorAPI, type PxBezierPath, PxBezierPathSchema, type PxBinding, PxBindingSchema, type PxCloneEffect, PxCloneEffectSchema, type PxCreateElement, type PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, type PxGlyph, type PxGlyphFont, PxGradientSpreadMethod, type PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, type PxInfer, type PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, type PxLoop, PxLoopExtend, PxLoopSchema, type PxMaskedByEffect, PxMaskedByEffectSchema, type PxNode, PxNodeBase, PxNodeSchema, type PxPlatformAdapter, type PxPropertyAnimation, PxPropertyAnimationSchema, type PxRepeaterEffect, PxRepeaterEffectSchema, type PxRetimeEffect, PxRetimeEffectSchema, type PxSchema, type PxSchemaDesc, type PxStrokeGradientEffect, PxStrokeGradientEffectSchema, type PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, type PxTextPathEffect, PxTextPathEffectSchema, type PxTransformByEffect, PxTransformByEffectSchema, type PxTransformPartKey, type PxTransformParts, PxTransformPartsSchema, type PxTransformValue, PxTransformValueSchema, type PxTrigger, PxTriggerSchema, type PxTrimPathEffect, PxTrimPathEffectSchema, PxTrimSubPaths, type PxValidationContext, type PxValidationResult, type RemoveIndex, STYLE_ATTR_NAMES, type StartOn, TEXT_ATTR, TEXT_CONTENT_ATTR, TRANSFORM_FN_NAMES, type Vec2, applyPlayerEffects, bezierToSvgPath, calcAnimationValues, camelCaseToKebabWordIfNeeded, clamp, collectSampleTimes, composeTransformParts, createBasicFrameLoopAnimator, createPathSampler, cubicBezier, deepClone, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, generateUniqueId, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalisedBindings, getNormalizedProps, interpolateBeziers, interpolateValue, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, kebabToCamelCaseWord, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, propAnimIsMotionPath, px, resolveStyle, reverseEasing, sanitiseAttributeValue, schemaKeys, shiftAnimatable, splitEasing, subdivideCubicBezier, toRGBA, validateNodeEffects, visualModelAt };
+export { type ApplyResult, COLOUR_ATTR_NAMES, CSS_ONLY_STYLE_PROPS, DEFAULT_DURATION_MS, DISALLOWED_SVG_TAGS_LOWER, type ExtendPathOpts, type ExtendedPath, type FillMode, type GlyphCharBox, type GlyphCharBoxAlongPath, type GlyphMaterialiseOpts, INTERNAL_ATTRS, type JsMode, type KeysMatch, LOOP_JUMP_SHIFT_MS, type MaterialiseAllOptions, type MotionPathMaterialisationOptions, type MotionPathSample, type OutAction, PCT_BASED_ATTR_NAMES, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, type PathPoint, type PathSampler, type PlaybackDirection, type PxAnimatable, type PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, type PxAnimationDefinition, PxAnimationDefinitionSchema, type PxAnimatorAPI, type PxAnimatorCallbacksConfig, type PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, type PxAttrValue, PxAttrValueSchema, type PxBasicAnimatorAPI, type PxBezierPath, PxBezierPathSchema, type PxBinding, PxBindingSchema, type PxCloneEffect, PxCloneEffectSchema, type PxCreateElement, type PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, type PxGlyph, type PxGlyphFont, PxGradientSpreadMethod, type PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, type PxInfer, type PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, type PxLoop, PxLoopExtend, PxLoopSchema, type PxMaskedByEffect, PxMaskedByEffectSchema, type PxNode, PxNodeBase, PxNodeSchema, type PxPlatformAdapter, type PxPropertyAnimation, PxPropertyAnimationSchema, type PxRepeaterEffect, PxRepeaterEffectSchema, type PxRetimeEffect, PxRetimeEffectSchema, type PxSchema, type PxSchemaDesc, type PxStrokeGradientEffect, PxStrokeGradientEffectSchema, type PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, type PxTextPathEffect, PxTextPathEffectSchema, type PxTransformByEffect, PxTransformByEffectSchema, type PxTransformPartKey, type PxTransformParts, PxTransformPartsSchema, type PxTransformValue, PxTransformValueSchema, type PxTrigger, PxTriggerSchema, type PxTrimPathEffect, PxTrimPathEffectSchema, PxTrimSubPaths, type PxValidationContext, type PxValidationResult, type RemoveIndex, STYLE_ATTR_NAMES, type StartOn, TEXT_ATTR, TEXT_CONTENT_ATTR, TRANSFORM_FN_NAMES, type Vec2, applyPlayerEffects, bezierToSvgPath, calcAnimationValues, camelCaseToKebabWordIfNeeded, clamp, collectSampleTimes, composeTransformParts, createBasicFrameLoopAnimator, createPathSampler, cubicBezier, deepClone, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, generateUniqueId, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalisedBindings, getNormalizedProps, interpolateBeziers, interpolateValue, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, kebabToCamelCaseWord, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, propAnimIsMotionPath, px, resolveStyle, reverseEasing, sanitiseAttributeValue, schemaKeys, shiftAnimatable, splitEasing, subdivideCubicBezier, toRGBA, validateNodeEffects, visualModelAt };

package/dist/index.d.ts

@@ -17368,8 +17368,8 @@ interface PxNode extends PxInfer<typeof PxNodeBase> {
  * `{ width?:number, height?:number, viewBox?:string, animator?:AnimatorConfig }`
  */
 declare const PxSvgNodeExtra: PxSchema<{} & {
-    width?: number | undefined;
-    height?: number | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     viewBox?: string | undefined;
     animator?: ({} & {
         mode?: "auto" | "waapi" | "frames" | undefined;
@@ -17658,8 +17658,8 @@ declare const PxSvgNodeExtra: PxSchema<{} & {
     }) | undefined;
 }, false> & {
     readonly _shape: {
-        width: PxSchema<number | undefined, true>;
-        height: PxSchema<number | undefined, true>;
+        width: PxSchema<string | number | undefined, true>;
+        height: PxSchema<string | number | undefined, true>;
         viewBox: PxSchema<string | undefined, true>;
         animator: PxSchema<({} & {
             mode?: "auto" | "waapi" | "frames" | undefined;
@@ -17967,8 +17967,8 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
     type: "svg";
 } & {
     children?: any[] | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     viewBox?: string | undefined;
     animator?: ({} & {
         mode?: "auto" | "waapi" | "frames" | undefined;
@@ -20936,8 +20936,8 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
     readonly _shape: {
         type: PxSchema<"svg", false>;
         children: PxSchema<any[] | undefined, true>;
-        width: PxSchema<number | undefined, true>;
-        height: PxSchema<number | undefined, true>;
+        width: PxSchema<string | number | undefined, true>;
+        height: PxSchema<string | number | undefined, true>;
         viewBox: PxSchema<string | undefined, true>;
         animator: PxSchema<({} & {
             mode?: "auto" | "waapi" | "frames" | undefined;
@@ -24038,6 +24038,7 @@ declare function reverseEasing(easing: Easing | undefined): Easing | undefined;
 declare function toRGBA(color: Array<number>): string;
 declare const COLOUR_ATTR_NAMES: Set<string>;
 declare const TRANSFORM_FN_NAMES: Set<string>;
+declare const PCT_BASED_ATTR_NAMES: Set<string>;
 /**
  * Compose a `PxTransformParts` record into a single SVG/CSS transform string in
  * the canonical order:
@@ -24138,6 +24139,23 @@ declare function sanitiseAttributeValue(name: string, value: any): any | undefin
 declare function resolveStyle(style: string | Record<string, string | number> | undefined, defs?: PxDefs): Record<string, string | number> | undefined;
 declare function getNormalizedProps(props: Record<string, any>): Record<string, any>;
 
+/**
+ * Time separation between a cycle's snap-back keyframe and the previous repetition's
+ * end, in ms.
+ *
+ * SINGLE SOURCE OF TRUTH — the editor imports this and converts to its own frame unit
+ * (`TLoop.smallFrameShift = LOOP_JUMP_SHIFT_MS / FRAME_DURATION_MS`), so the two sides
+ * cannot drift apart and materialise different keyframes (B7).
+ *
+ * 1ms, not one 10ms editor frame: a 10ms snap-back is long enough to read as a visible
+ * jump in a looping animation (confirmed visually). The gap only has to be non-zero — it
+ * exists so the snap-back is a discontinuity rather than an interpolated tween.
+ *
+ * ⚠️ The editor works in FRAMES (`FRAME_DURATION_MS = 10`), so this is a sub-frame shift
+ * there. `TKeyframeGroup` rounds keyframe times to integer frames in some paths; the
+ * editor side keeps the fractional value and must not be re-clamped to a whole frame.
+ */
+declare const LOOP_JUMP_SHIFT_MS = 1;
 /**
  * Interpolates between two keyframe values based on property type.
  * Returns the raw interpolated value (not a CSS string).
@@ -24468,4 +24486,4 @@ interface EffectDiff {
  */
 declare function diffInEffect(a: VmNode, b: VmNode): Array<EffectDiff>;
 
-export { type ApplyResult, COLOUR_ATTR_NAMES, CSS_ONLY_STYLE_PROPS, DEFAULT_DURATION_MS, DISALLOWED_SVG_TAGS_LOWER, type ExtendPathOpts, type ExtendedPath, type FillMode, type GlyphCharBox, type GlyphCharBoxAlongPath, type GlyphMaterialiseOpts, INTERNAL_ATTRS, type JsMode, type KeysMatch, type MaterialiseAllOptions, type MotionPathMaterialisationOptions, type MotionPathSample, type OutAction, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, type PathPoint, type PathSampler, type PlaybackDirection, type PxAnimatable, type PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, type PxAnimationDefinition, PxAnimationDefinitionSchema, type PxAnimatorAPI, type PxAnimatorCallbacksConfig, type PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, type PxAttrValue, PxAttrValueSchema, type PxBasicAnimatorAPI, type PxBezierPath, PxBezierPathSchema, type PxBinding, PxBindingSchema, type PxCloneEffect, PxCloneEffectSchema, type PxCreateElement, type PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, type PxGlyph, type PxGlyphFont, PxGradientSpreadMethod, type PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, type PxInfer, type PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, type PxLoop, PxLoopExtend, PxLoopSchema, type PxMaskedByEffect, PxMaskedByEffectSchema, type PxNode, PxNodeBase, PxNodeSchema, type PxPlatformAdapter, type PxPropertyAnimation, PxPropertyAnimationSchema, type PxRepeaterEffect, PxRepeaterEffectSchema, type PxRetimeEffect, PxRetimeEffectSchema, type PxSchema, type PxSchemaDesc, type PxStrokeGradientEffect, PxStrokeGradientEffectSchema, type PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, type PxTextPathEffect, PxTextPathEffectSchema, type PxTransformByEffect, PxTransformByEffectSchema, type PxTransformPartKey, type PxTransformParts, PxTransformPartsSchema, type PxTransformValue, PxTransformValueSchema, type PxTrigger, PxTriggerSchema, type PxTrimPathEffect, PxTrimPathEffectSchema, PxTrimSubPaths, type PxValidationContext, type PxValidationResult, type RemoveIndex, STYLE_ATTR_NAMES, type StartOn, TEXT_ATTR, TEXT_CONTENT_ATTR, TRANSFORM_FN_NAMES, type Vec2, applyPlayerEffects, bezierToSvgPath, calcAnimationValues, camelCaseToKebabWordIfNeeded, clamp, collectSampleTimes, composeTransformParts, createBasicFrameLoopAnimator, createPathSampler, cubicBezier, deepClone, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, generateUniqueId, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalisedBindings, getNormalizedProps, interpolateBeziers, interpolateValue, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, kebabToCamelCaseWord, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, propAnimIsMotionPath, px, resolveStyle, reverseEasing, sanitiseAttributeValue, schemaKeys, shiftAnimatable, splitEasing, subdivideCubicBezier, toRGBA, validateNodeEffects, visualModelAt };
+export { type ApplyResult, COLOUR_ATTR_NAMES, CSS_ONLY_STYLE_PROPS, DEFAULT_DURATION_MS, DISALLOWED_SVG_TAGS_LOWER, type ExtendPathOpts, type ExtendedPath, type FillMode, type GlyphCharBox, type GlyphCharBoxAlongPath, type GlyphMaterialiseOpts, INTERNAL_ATTRS, type JsMode, type KeysMatch, LOOP_JUMP_SHIFT_MS, type MaterialiseAllOptions, type MotionPathMaterialisationOptions, type MotionPathSample, type OutAction, PCT_BASED_ATTR_NAMES, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, type PathPoint, type PathSampler, type PlaybackDirection, type PxAnimatable, type PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, type PxAnimationDefinition, PxAnimationDefinitionSchema, type PxAnimatorAPI, type PxAnimatorCallbacksConfig, type PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, type PxAttrValue, PxAttrValueSchema, type PxBasicAnimatorAPI, type PxBezierPath, PxBezierPathSchema, type PxBinding, PxBindingSchema, type PxCloneEffect, PxCloneEffectSchema, type PxCreateElement, type PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, type PxGlyph, type PxGlyphFont, PxGradientSpreadMethod, type PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, type PxInfer, type PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, type PxLoop, PxLoopExtend, PxLoopSchema, type PxMaskedByEffect, PxMaskedByEffectSchema, type PxNode, PxNodeBase, PxNodeSchema, type PxPlatformAdapter, type PxPropertyAnimation, PxPropertyAnimationSchema, type PxRepeaterEffect, PxRepeaterEffectSchema, type PxRetimeEffect, PxRetimeEffectSchema, type PxSchema, type PxSchemaDesc, type PxStrokeGradientEffect, PxStrokeGradientEffectSchema, type PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, type PxTextPathEffect, PxTextPathEffectSchema, type PxTransformByEffect, PxTransformByEffectSchema, type PxTransformPartKey, type PxTransformParts, PxTransformPartsSchema, type PxTransformValue, PxTransformValueSchema, type PxTrigger, PxTriggerSchema, type PxTrimPathEffect, PxTrimPathEffectSchema, PxTrimSubPaths, type PxValidationContext, type PxValidationResult, type RemoveIndex, STYLE_ATTR_NAMES, type StartOn, TEXT_ATTR, TEXT_CONTENT_ATTR, TRANSFORM_FN_NAMES, type Vec2, applyPlayerEffects, bezierToSvgPath, calcAnimationValues, camelCaseToKebabWordIfNeeded, clamp, collectSampleTimes, composeTransformParts, createBasicFrameLoopAnimator, createPathSampler, cubicBezier, deepClone, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, generateUniqueId, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalisedBindings, getNormalizedProps, interpolateBeziers, interpolateValue, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, kebabToCamelCaseWord, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, propAnimIsMotionPath, px, resolveStyle, reverseEasing, sanitiseAttributeValue, schemaKeys, shiftAnimatable, splitEasing, subdivideCubicBezier, toRGBA, validateNodeEffects, visualModelAt };

package/dist/index.js

@@ -882,8 +882,10 @@ var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBase._sh
   children: px.lazy(() => px.array(PxNodeSchema), []).optional()
 }), PxAttrValueSchema);
 var PxSvgNodeExtra = px.object({
-  width: px.number().optional(),
-  height: px.number().optional(),
+  // `"100%"` and other SVG length strings are legal here — a number-only slot rejected
+  // real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
+  width: px.union([px.number(), px.string()]).optional(),
+  height: px.union([px.number(), px.string()]).optional(),
   viewBox: px.string().optional(),
   animator: PxAnimatorConfigSchema.optional()
 });
@@ -1926,7 +1928,7 @@ function walkAndMaterialise(node, opts) {
 }
 
 // src/PxDefinitions.ts
-var LOOP_JUMP_SHIFT_MS = 10;
+var LOOP_JUMP_SHIFT_MS = 1;
 function deepEqualValue(a, b) {
   if (a === b) return true;
   if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
@@ -2175,6 +2177,8 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   const looped = [];
   const separateBoundary = loop.extend !== PxLoopExtend.before;
   const originalTerminalKf = keyframes[keyframes.length - 1];
+  let terminalEasingOverride;
+  let hasTerminalEasingOverride = false;
   function appendRep(repStart, isReversed, partial) {
     var _a2;
     let entries;
@@ -2215,7 +2219,16 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
       const prevKf = looped.length > 0 ? looped[looped.length - 1] : originalTerminalKf;
       const isBoundary = separateBoundary && i === 0 && prevKf !== void 0 && Math.abs(((_a2 = prevKf.t) != null ? _a2 : 0) - (repStart + entry.relT * segDuration)) < 1e-9;
       if (isBoundary) {
-        if (deepEqualValue(prevKf.v, entry.v)) continue;
+        if (deepEqualValue(prevKf.v, entry.v)) {
+          if (looped.length > 0) {
+            prevKf.e = entry.e;
+            prevKf.tangentOut = entry.tangentOut;
+          } else {
+            terminalEasingOverride = entry.e;
+            hasTerminalEasingOverride = true;
+          }
+          continue;
+        }
         if (looped.length > 0) {
           delete prevKf.tangentIn;
           delete prevKf.tangentOut;
@@ -2296,6 +2309,11 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   if (loop.extend === PxLoopExtend.before) {
     return [...looped, ...keyframes];
   } else {
+    if (hasTerminalEasingOverride && keyframes.length > 0) {
+      const head = keyframes.slice(0, -1);
+      const tail = __spreadProps(__spreadValues({}, keyframes[keyframes.length - 1]), { e: terminalEasingOverride });
+      return [...head, tail, ...looped];
+    }
     return [...keyframes, ...looped];
   }
 }
@@ -2412,6 +2430,9 @@ function generateElementId() {
 function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
   const normalized = {};
   for (const [propName, propAnim] of Object.entries(animDef)) {
+    if (propName === "transform" && propAnim.alongPathMode === "offsetPath" && animDef["offsetDistance"] !== void 0) {
+      continue;
+    }
     const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
     if (normalizedKfs.length > 0) {
       const out = { kfs: normalizedKfs };
@@ -5253,10 +5274,141 @@ function applyPlayerEffects_retime(node, ctx) {
   return node;
 }
 
+// src/PxOffsetPathMaterialiser.ts
+var kfTime = (kf) => {
+  var _a, _b;
+  return (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
+};
+var kfValue = (kf) => {
+  var _a;
+  return (_a = kf.v) != null ? _a : kf.value;
+};
+var kfEasing = (kf) => {
+  var _a;
+  return (_a = kf.e) != null ? _a : kf.easing;
+};
+var kfTangentIn = (kf) => {
+  var _a;
+  return (_a = kf.tangentIn) != null ? _a : kf.ti;
+};
+var kfTangentOut = (kf) => {
+  var _a;
+  return (_a = kf.tangentOut) != null ? _a : kf.to;
+};
+function cubicAt(p0, c1, c2, p1, t) {
+  const u = 1 - t;
+  const a = u * u * u, b = 3 * u * u * t, c = 3 * u * t * t, d = t * t * t;
+  return [
+    a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0],
+    a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1]
+  ];
+}
+function cubicLength(p0, c1, c2, p1, steps = 64) {
+  let len = 0;
+  let prev = p0;
+  for (let i = 1; i <= steps; i++) {
+    const pt = cubicAt(p0, c1, c2, p1, i / steps);
+    len += Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);
+    prev = pt;
+  }
+  return len;
+}
+var fmt2 = (n) => {
+  const r = Math.round(n * 1e4) / 1e4;
+  return Object.is(r, -0) ? "0" : String(r);
+};
+function buildOffsetPath(propAnim) {
+  var _a, _b, _c, _d;
+  if (propAnim.alongPathMode !== "offsetPath") return void 0;
+  const kfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+  if (!kfs || kfs.length < 2) return void 0;
+  const first = kfValue(kfs[0]);
+  const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
+  const points = [];
+  for (const kf of kfs) {
+    const v = kfValue(kf);
+    const tr = v == null ? void 0 : v.translate;
+    if (!tr || tr.length < 2) return void 0;
+    const parts = Object.keys(v);
+    if (parts.some((p) => p !== "translate" && p !== "origin")) return void 0;
+    const o = (_b = v == null ? void 0 : v.origin) != null ? _b : [0, 0];
+    if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
+    points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
+  }
+  if (!kfs.some((kf) => kfTangentIn(kf) || kfTangentOut(kf))) return void 0;
+  let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
+  const segLens = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i], p1 = points[i + 1];
+    const to = (_c = kfTangentOut(kfs[i])) != null ? _c : [0, 0];
+    const ti = (_d = kfTangentIn(kfs[i + 1])) != null ? _d : [0, 0];
+    const c1 = [p0[0] + to[0], p0[1] + to[1]];
+    const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
+    d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
+    segLens.push(cubicLength(p0, c1, c2, p1));
+  }
+  const total = segLens.reduce((a, b) => a + b, 0);
+  if (!(total > 0)) return void 0;
+  const distanceKfs = [];
+  let cum = 0;
+  for (let i = 0; i < kfs.length; i++) {
+    if (i > 0) cum += segLens[i - 1];
+    const out = { t: kfTime(kfs[i]), v: cum / total };
+    const e = kfEasing(kfs[i]);
+    if (e !== void 0) out.e = e;
+    distanceKfs.push(out);
+  }
+  return { pathStr: d, distanceKfs, autoOrient: !!propAnim.autoOrient, anchor };
+}
+function materialiseOffsetPathsInTree(root) {
+  const walk = (node) => {
+    var _a;
+    let out = node;
+    const anim = node.animate;
+    const transform = anim == null ? void 0 : anim["transform"];
+    if (transform) {
+      const built = buildOffsetPath(transform);
+      if (built) {
+        const newAnimate = __spreadValues({}, anim);
+        delete newAnimate["transform"];
+        const distance = { keyframes: built.distanceKfs };
+        if (transform.loop !== void 0) distance.loop = transform.loop;
+        newAnimate["offsetDistance"] = distance;
+        const staticTr = node.transform;
+        let newTransform = staticTr;
+        if (staticTr && typeof staticTr === "object") {
+          const t = __spreadValues({}, staticTr);
+          delete t["translate"];
+          delete t["origin"];
+          newTransform = Object.keys(t).length ? t : void 0;
+        }
+        out = __spreadProps(__spreadValues({}, node), {
+          animate: newAnimate,
+          style: __spreadProps(__spreadValues({}, node.style), {
+            offsetPath: "path('" + built.pathStr + "')",
+            offsetAnchor: fmt2(built.anchor[0]) + "px " + fmt2(built.anchor[1]) + "px",
+            offsetRotate: built.autoOrient ? "auto" : "0deg",
+            offsetDistance: "0%"
+          })
+        });
+        if (newTransform !== void 0) out.transform = newTransform;
+        else delete out.transform;
+      }
+    }
+    if ((_a = out.children) == null ? void 0 : _a.length) {
+      const children = out.children.map(walk);
+      if (children.some((c, i) => c !== out.children[i])) out = __spreadProps(__spreadValues({}, out), { children });
+    }
+    return out;
+  };
+  return walk(root);
+}
+
 // src/PxAnimatorMaterialiseAll.ts
 function materialiseAllInTree(doc, engine, opts) {
   var _a, _b;
   let root = applyPlayerEffects(doc).root;
+  root = materialiseOffsetPathsInTree(root);
   const duration = (_b = (_a = getAnimatorConfig(root)) == null ? void 0 : _a.duration) != null ? _b : DEFAULT_DURATION_MS;
   root = materialiseInternalLoopsInTree(root, duration);
   if (engine === PxAnimatorEngine.waapi) {
@@ -5788,6 +5940,8 @@ export {
   DEFAULT_DURATION_MS,
   DISALLOWED_SVG_TAGS_LOWER,
   INTERNAL_ATTRS,
+  LOOP_JUMP_SHIFT_MS,
+  PCT_BASED_ATTR_NAMES,
   PX_ANIM_ATTR_NAME,
   PX_ANIM_SRC_ATTR_NAME,
   PX_TRANSFORM_PART_KEYS,