@pixodesk/svg-animator-web 1.0.28 → 1.0.30

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { PxAnimatorAPI as PxAnimatorAPI$1, PxBasicAnimatorAPI as PxBasicAnimatorAPI$1, PxAnimatedSvgDocument, PxPlatformAdapter, PxAnimatorCallbacksConfig, PxTrigger, PxNode, PxDefs } from '@pixodesk/svg-animator-core';
-export { ApplyResult, COLOUR_ATTR_NAMES, ExtendPathOpts, ExtendedPath, FillMode, GlyphCharBox, GlyphCharBoxAlongPath, GlyphMaterialiseOpts, JsMode, KeysMatch, MaterialiseAllOptions, MotionPathMaterialisationOptions, MotionPathSample, OutAction, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, PathPoint, PathSampler, PlaybackDirection, PxAnimatable, PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, PxAnimationDefinition, PxAnimationDefinitionSchema, PxAnimatorCallbacksConfig, PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, PxAttrValue, PxAttrValueSchema, PxBezierPath, PxBezierPathSchema, PxBinding, PxBindingSchema, PxCloneEffect, PxCloneEffectSchema, PxCreateElement, PxDefs, PxDefsSchema, PxEasingOrRefSchema, PxEffects, PxEffectsSchema, PxElementAnimation, PxElementAnimationSchema, PxFillGradientEffect, PxFillGradientEffectSchema, PxGlyph, PxGlyphFont, PxGradientSpreadMethod, PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, PxInfer, PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, PxLoop, PxLoopSchema, PxMaskedByEffect, PxMaskedByEffectSchema, PxNode, PxNodeBase, PxNodeSchema, PxPlatformAdapter, PxPropertyAnimation, PxPropertyAnimationSchema, PxRepeaterEffect, PxRepeaterEffectSchema, PxRetimeEffect, PxRetimeEffectSchema, PxSchema, PxSchemaDesc, PxStrokeGradientEffect, PxStrokeGradientEffectSchema, PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, PxTextPathEffect, PxTextPathEffectSchema, PxTransformByEffect, PxTransformByEffectSchema, PxTransformPartKey, PxTransformParts, PxTransformPartsSchema, PxTransformValue, PxTransformValueSchema, PxTrigger, PxTriggerSchema, PxTrimPathEffect, PxTrimPathEffectSchema, PxValidationContext, PxValidationResult, RemoveIndex, STYLE_ATTR_NAMES, StartOn, TRANSFORM_FN_NAMES, Vec2, applyPlayerEffects, calcAnimationValues, camelCaseToKebabWordIfNeeded, collectSampleTimes, createBasicFrameLoopAnimator, createPathSampler, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalizedProps, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, getNormalisedBindings as normalizeDocument, propAnimIsMotionPath, px, schemaKeys, shiftAnimatable, toRGBA, validateNodeEffects, visualModelAt } from '@pixodesk/svg-animator-core';
+export { ApplyResult, COLOUR_ATTR_NAMES, ExtendPathOpts, ExtendedPath, FillMode, GlyphCharBox, GlyphCharBoxAlongPath, GlyphMaterialiseOpts, JsMode, KeysMatch, MISSING_GLYPH_CLASS_NAME, MaterialiseAllOptions, MotionPathMaterialisationOptions, MotionPathSample, OutAction, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, PathPoint, PathSampler, PlaybackDirection, PxAnimatable, PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, PxAnimationDefinition, PxAnimationDefinitionSchema, PxAnimatorCallbacksConfig, PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, PxAttrValue, PxAttrValueSchema, PxBezierPath, PxBezierPathSchema, PxBinding, PxBindingSchema, PxCloneEffect, PxCloneEffectSchema, PxCreateElement, PxDefs, PxDefsSchema, PxEasingOrRefSchema, PxEffects, PxEffectsSchema, PxElementAnimation, PxElementAnimationSchema, PxFillGradientEffect, PxFillGradientEffectSchema, PxGlyph, PxGlyphFont, PxGradientSpreadMethod, PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, PxInfer, PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, PxLoop, PxLoopSchema, PxMaskedByEffect, PxMaskedByEffectSchema, PxNode, PxNodeBase, PxNodeSchema, PxPlatformAdapter, PxPropertyAnimation, PxPropertyAnimationSchema, PxRepeaterEffect, PxRepeaterEffectSchema, PxRetimeEffect, PxRetimeEffectSchema, PxSchema, PxSchemaDesc, PxStrokeGradientEffect, PxStrokeGradientEffectSchema, PxStrokeTrimEffect, PxStrokeTrimEffectSchema, PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, PxTextPathEffect, PxTextPathEffectSchema, PxTransformByEffect, PxTransformByEffectSchema, PxTransformPartKey, PxTransformParts, PxTransformPartsSchema, PxTransformValue, PxTransformValueSchema, PxTrigger, PxTriggerSchema, PxValidationContext, PxValidationResult, RemoveIndex, STYLE_ATTR_NAMES, StartOn, TRANSFORM_FN_NAMES, Vec2, applyPlayerEffects, calcAnimationValues, camelCaseToKebabWordIfNeeded, collectSampleTimes, createBasicFrameLoopAnimator, createPathSampler, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalizedProps, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, getNormalisedBindings as normalizeDocument, propAnimIsMotionPath, px, schemaKeys, shiftAnimatable, toRGBA, validateNodeEffects, visualModelAt } from '@pixodesk/svg-animator-core';
 
 /**
  * DOM specialisations of the platform-neutral animator API types.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { PxAnimatorAPI as PxAnimatorAPI$1, PxBasicAnimatorAPI as PxBasicAnimatorAPI$1, PxAnimatedSvgDocument, PxPlatformAdapter, PxAnimatorCallbacksConfig, PxTrigger, PxNode, PxDefs } from '@pixodesk/svg-animator-core';
-export { ApplyResult, COLOUR_ATTR_NAMES, ExtendPathOpts, ExtendedPath, FillMode, GlyphCharBox, GlyphCharBoxAlongPath, GlyphMaterialiseOpts, JsMode, KeysMatch, MaterialiseAllOptions, MotionPathMaterialisationOptions, MotionPathSample, OutAction, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, PathPoint, PathSampler, PlaybackDirection, PxAnimatable, PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, PxAnimationDefinition, PxAnimationDefinitionSchema, PxAnimatorCallbacksConfig, PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, PxAttrValue, PxAttrValueSchema, PxBezierPath, PxBezierPathSchema, PxBinding, PxBindingSchema, PxCloneEffect, PxCloneEffectSchema, PxCreateElement, PxDefs, PxDefsSchema, PxEasingOrRefSchema, PxEffects, PxEffectsSchema, PxElementAnimation, PxElementAnimationSchema, PxFillGradientEffect, PxFillGradientEffectSchema, PxGlyph, PxGlyphFont, PxGradientSpreadMethod, PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, PxInfer, PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, PxLoop, PxLoopSchema, PxMaskedByEffect, PxMaskedByEffectSchema, PxNode, PxNodeBase, PxNodeSchema, PxPlatformAdapter, PxPropertyAnimation, PxPropertyAnimationSchema, PxRepeaterEffect, PxRepeaterEffectSchema, PxRetimeEffect, PxRetimeEffectSchema, PxSchema, PxSchemaDesc, PxStrokeGradientEffect, PxStrokeGradientEffectSchema, PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, PxTextPathEffect, PxTextPathEffectSchema, PxTransformByEffect, PxTransformByEffectSchema, PxTransformPartKey, PxTransformParts, PxTransformPartsSchema, PxTransformValue, PxTransformValueSchema, PxTrigger, PxTriggerSchema, PxTrimPathEffect, PxTrimPathEffectSchema, PxValidationContext, PxValidationResult, RemoveIndex, STYLE_ATTR_NAMES, StartOn, TRANSFORM_FN_NAMES, Vec2, applyPlayerEffects, calcAnimationValues, camelCaseToKebabWordIfNeeded, collectSampleTimes, createBasicFrameLoopAnimator, createPathSampler, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalizedProps, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, getNormalisedBindings as normalizeDocument, propAnimIsMotionPath, px, schemaKeys, shiftAnimatable, toRGBA, validateNodeEffects, visualModelAt } from '@pixodesk/svg-animator-core';
+export { ApplyResult, COLOUR_ATTR_NAMES, ExtendPathOpts, ExtendedPath, FillMode, GlyphCharBox, GlyphCharBoxAlongPath, GlyphMaterialiseOpts, JsMode, KeysMatch, MISSING_GLYPH_CLASS_NAME, MaterialiseAllOptions, MotionPathMaterialisationOptions, MotionPathSample, OutAction, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, PathPoint, PathSampler, PlaybackDirection, PxAnimatable, PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, PxAnimationDefinition, PxAnimationDefinitionSchema, PxAnimatorCallbacksConfig, PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, PxAttrValue, PxAttrValueSchema, PxBezierPath, PxBezierPathSchema, PxBinding, PxBindingSchema, PxCloneEffect, PxCloneEffectSchema, PxCreateElement, PxDefs, PxDefsSchema, PxEasingOrRefSchema, PxEffects, PxEffectsSchema, PxElementAnimation, PxElementAnimationSchema, PxFillGradientEffect, PxFillGradientEffectSchema, PxGlyph, PxGlyphFont, PxGradientSpreadMethod, PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, PxInfer, PxKeyframe, PxKeyframeSchema, PxKeyframeValueSchema, PxLoop, PxLoopSchema, PxMaskedByEffect, PxMaskedByEffectSchema, PxNode, PxNodeBase, PxNodeSchema, PxPlatformAdapter, PxPropertyAnimation, PxPropertyAnimationSchema, PxRepeaterEffect, PxRepeaterEffectSchema, PxRetimeEffect, PxRetimeEffectSchema, PxSchema, PxSchemaDesc, PxStrokeGradientEffect, PxStrokeGradientEffectSchema, PxStrokeTrimEffect, PxStrokeTrimEffectSchema, PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, PxTextPathEffect, PxTextPathEffectSchema, PxTransformByEffect, PxTransformByEffectSchema, PxTransformPartKey, PxTransformParts, PxTransformPartsSchema, PxTransformValue, PxTransformValueSchema, PxTrigger, PxTriggerSchema, PxValidationContext, PxValidationResult, RemoveIndex, STYLE_ATTR_NAMES, StartOn, TRANSFORM_FN_NAMES, Vec2, applyPlayerEffects, calcAnimationValues, camelCaseToKebabWordIfNeeded, collectSampleTimes, createBasicFrameLoopAnimator, createPathSampler, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalizedProps, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, layoutGlyphTextChars, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, getNormalisedBindings as normalizeDocument, propAnimIsMotionPath, px, schemaKeys, shiftAnimatable, toRGBA, validateNodeEffects, visualModelAt } from '@pixodesk/svg-animator-core';
 
 /**
  * DOM specialisations of the platform-neutral animator API types.

package/dist/index.js

@@ -1052,7 +1052,7 @@ var PxTextPathSpacing = {
   auto: "auto",
   exact: "exact"
 };
-var PxTrimSubPaths = {
+var PxStrokeTrimSubPaths = {
   separate: "separate",
   combined: "combined"
 };
@@ -1211,6 +1211,7 @@ var PxScrollSchema = implementsInterface()(px.object({
   subject: px.string().optional(),
   smoothing: px.number().optional(),
   pin: px.boolean().optional(),
+  pinAlign: px.enum(["top", "center", "bottom"]).optional(),
   pinTop: px.number().optional(),
   pinDistance: px.number().optional(),
   range: PxScrollRangeSchema.optional()
@@ -1293,10 +1294,10 @@ var PxClipPathEffectSchema = implementsInterface()(px.object({
   d: PxAnimatableStringSchema.optional(),
   animate: PxPropertyAnimationSchema.optional()
 }));
-var PxTrimPathEffectSchema = implementsInterface()(px.object({
+var PxStrokeTrimEffectSchema = implementsInterface()(px.object({
   offset: PxAnimatableNumberSchema.optional(),
   range: PxAnimatableVec2Schema.optional(),
-  subPaths: px.enum([PxTrimSubPaths.separate, PxTrimSubPaths.combined]).optional()
+  subPaths: px.enum([PxStrokeTrimSubPaths.separate, PxStrokeTrimSubPaths.combined]).optional()
 }));
 var PxRetimeEffectSchema = implementsInterface()(px.object({
   sourceId: px.string().optional(),
@@ -1350,7 +1351,7 @@ var PxEffectsSchema = implementsInterface()(px.object({
   repeater: PxRepeaterEffectSchema.optional(),
   maskedBy: PxMaskedByEffectSchema.optional(),
   clipPath: PxClipPathEffectSchema.optional(),
-  trimPath: PxTrimPathEffectSchema.optional(),
+  strokeTrim: PxStrokeTrimEffectSchema.optional(),
   clone: PxCloneEffectSchema.optional(),
   fillGradient: PxFillGradientEffectSchema.optional(),
   strokeGradient: PxStrokeGradientEffectSchema.optional(),
@@ -4445,6 +4446,19 @@ var TEXT_ATTR_KEYS = [
   TEXT_CONTENT_ATTR,
   "xml:space"
 ];
+var PAINT_STATIC_KEYS = [
+  "fillOpacity",
+  "fillRule",
+  "strokeOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeMiterlimit",
+  "mixBlendMode",
+  "filter"
+];
+var PAINT_ANIMATE_KEYS = ["fill", "stroke", "strokeWidth", "opacity", "fillOpacity", "strokeOpacity", "strokeDasharray", "strokeDashoffset"];
 function parseLen(v) {
   if (typeof v === "number") return v;
   if (typeof v === "string") {
@@ -4456,17 +4470,39 @@ function parseLen(v) {
 function str(v) {
   return typeof v === "string" ? v : void 0;
 }
+function paintAnimateOf(node) {
+  const bag = node.animate;
+  if (!bag || typeof bag !== "object") return void 0;
+  let out;
+  for (const k of PAINT_ANIMATE_KEYS) {
+    if (bag[k] !== void 0) (out != null ? out : out = {})[k] = bag[k];
+  }
+  return out;
+}
 function resolveStyle2(node, parent) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  return {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const isTextRoot = node.type === "text";
+  const nodeStyle = node.style;
+  const own = (key) => {
+    var _a2;
+    return isTextRoot ? void 0 : (_a2 = node[key]) != null ? _a2 : nodeStyle == null ? void 0 : nodeStyle[key];
+  };
+  const res = {
     fontFamily: (_a = str(node.fontFamily)) != null ? _a : parent.fontFamily,
     fontSize: (_b = parseLen(node.fontSize)) != null ? _b : parent.fontSize,
     fill: (_c = node.fill) != null ? _c : parent.fill,
     stroke: (_d = node.stroke) != null ? _d : parent.stroke,
     strokeWidth: (_e = node.strokeWidth) != null ? _e : parent.strokeWidth,
     letterSpacing: (_f = parseLen(node.letterSpacing)) != null ? _f : parent.letterSpacing,
-    wordSpacing: (_g = parseLen(node.wordSpacing)) != null ? _g : parent.wordSpacing
+    wordSpacing: (_g = parseLen(node.wordSpacing)) != null ? _g : parent.wordSpacing,
+    opacity: (_h = parseLen(own("opacity"))) != null ? _h : parent.opacity,
+    animate: (_i = isTextRoot ? void 0 : paintAnimateOf(node)) != null ? _i : parent.animate
   };
+  for (const key of PAINT_STATIC_KEYS) {
+    const v = (_j = own(key)) != null ? _j : parent[key];
+    if (v !== void 0) res[key] = v;
+  }
+  return res;
 }
 function rootStyleOf(node) {
   var _a, _b, _c;
@@ -4485,6 +4521,11 @@ function paintOf(s) {
   if (s.fill !== void 0) p.fill = s.fill;
   if (s.stroke !== void 0) p.stroke = s.stroke;
   if (s.strokeWidth !== void 0) p.strokeWidth = s.strokeWidth;
+  if (s.opacity !== void 0 && s.opacity !== 1) p.opacity = s.opacity;
+  for (const key of PAINT_STATIC_KEYS) {
+    if (s[key] !== void 0) p[key] = s[key];
+  }
+  if (s.animate !== void 0) p.animate = s.animate;
   return p;
 }
 function glyphFontFor(s, glyphs, soleFont, warnings) {
@@ -4498,6 +4539,7 @@ function soleFontOf(glyphs) {
   return names.length === 1 ? glyphs[names[0]] : void 0;
 }
 var MISSING_GLYPH_ADVANCE_EM = 0.6;
+var MISSING_GLYPH_CLASS_NAME = "px-missing-glyph";
 function missingGlyphBoxEm(advanceEm, ascentEm) {
   if (advanceEm <= 0 || ascentEm <= 0) return "";
   const inset = 0.08;
@@ -4533,7 +4575,7 @@ function materialiseGlyphTextHorizontal(node, opts) {
         pen.x += g.width * scale;
       } else if (/\S/.test(ch)) {
         const advEm = g && g.width > 0 ? g.width : MISSING_GLYPH_ADVANCE_EM * upm;
-        placements.push({ glyphD: missingGlyphBoxEm(advEm, ascentEm), m: [scale, 0, 0, scale, pen.x, pen.y], paint, line, x: pen.x, y: pen.y, scale });
+        placements.push({ glyphD: missingGlyphBoxEm(advEm, ascentEm), m: [scale, 0, 0, scale, pen.x, pen.y], paint, isMissing: true, line, x: pen.x, y: pen.y, scale });
         pen.x += advEm * scale;
       } else {
         pen.x += (g ? g.width : 0) * scale;
@@ -4724,7 +4766,7 @@ function collectAlongPathCells(node, glyphs, soleFont, warnings) {
           } else if (/\S/.test(ch)) {
             const wEm = g && g.width > 0 ? g.width : MISSING_GLYPH_ADVANCE_EM * gf.unitsPerEm;
             const boxAdv = wEm * scale;
-            cells.push({ glyphD: missingGlyphBoxEm(wEm, ascentEm), widthEm: wEm, scale, paint, midBase: adv + boxAdv / 2 });
+            cells.push({ glyphD: missingGlyphBoxEm(wEm, ascentEm), widthEm: wEm, scale, paint, isMissing: true, midBase: adv + boxAdv / 2 });
             adv += boxAdv;
           } else {
             adv += (g ? g.width : 0) * scale;
@@ -4780,6 +4822,7 @@ function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLengt
   const placements = placeCells.map((c) => ({
     glyphD: c.glyphD,
     paint: c.paint,
+    isMissing: c.isMissing,
     m: alongAffine(sampler, base + c.midBase * k, c.scale, c.widthEm, perp)
   }));
   return toGroup(node, buildPaths(placements, create, warnings), create);
@@ -4868,12 +4911,13 @@ function buildAnimatedAlongPath(cells, sampler, distOf, times, loop, create, isC
     const transform = { keyframes: kfs };
     if (loop !== void 0) transform.loop = loop;
     const animate = { transform };
+    if (c.paint.animate) Object.assign(animate, c.paint.animate);
     if (isClip && opKfs.some((k) => k.value === 0)) {
       const op = { keyframes: opKfs };
       if (loop !== void 0) op.loop = loop;
       animate.opacity = op;
     }
-    out.push(create("path", __spreadProps2(__spreadValues2({ d }, paintProps(c.paint)), { animate }), []));
+    out.push(create("path", __spreadProps2(__spreadValues2(__spreadValues2({ d }, paintProps(c.paint)), missingGlyphProps(c.isMissing)), { animate }), []));
   }
   return out;
 }
@@ -4882,24 +4926,34 @@ function paintProps(paint) {
   if (paint.fill !== void 0) p.fill = paint.fill;
   if (paint.stroke !== void 0) p.stroke = paint.stroke;
   if (paint.strokeWidth !== void 0) p.strokeWidth = paint.strokeWidth;
+  if (paint.opacity !== void 0) p.opacity = paint.opacity;
+  for (const key of PAINT_STATIC_KEYS) {
+    if (paint[key] !== void 0) p[key] = paint[key];
+  }
   return p;
 }
+function missingGlyphProps(isMissing) {
+  return isMissing ? { class: MISSING_GLYPH_CLASS_NAME } : {};
+}
 function buildPaths(placements, create, warnings) {
-  var _a, _b, _c;
   if (!placements.length) {
     warnings == null ? void 0 : warnings.push("textGlyphs: nothing to render");
     return [];
   }
   const byPaint = /* @__PURE__ */ new Map();
   for (const p of placements) {
-    const key = JSON.stringify([(_a = p.paint.fill) != null ? _a : null, (_b = p.paint.stroke) != null ? _b : null, (_c = p.paint.strokeWidth) != null ? _c : null]);
+    const key = JSON.stringify([p.paint, !!p.isMissing]);
     const baked = transformPathData(p.glyphD, p.m);
     const entry = byPaint.get(key);
     if (entry) entry.d += baked;
-    else byPaint.set(key, { paint: p.paint, d: baked });
+    else byPaint.set(key, { paint: p.paint, d: baked, isMissing: p.isMissing });
   }
   const out = [];
-  for (const { paint, d } of byPaint.values()) out.push(create("path", __spreadValues2({ d }, paintProps(paint)), []));
+  for (const { paint, d, isMissing } of byPaint.values()) {
+    out.push(create("path", __spreadValues2(__spreadValues2(__spreadValues2({
+      d
+    }, paintProps(paint)), missingGlyphProps(isMissing)), paint.animate !== void 0 ? { animate: __spreadValues2({}, paint.animate) } : {}), []));
+  }
   return out;
 }
 function toGroup(node, children, create) {
@@ -4935,9 +4989,9 @@ function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength, pat
   }
   return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
 }
-function applyTrimPathEffect(node, trimPath, ctx) {
-  if (!trimPath) return node;
-  const combined = trimPath.subPaths === PxTrimSubPaths.combined;
+function applyStrokeTrimEffect(node, strokeTrim, ctx) {
+  if (!strokeTrim) return node;
+  const combined = strokeTrim.subPaths === PxStrokeTrimSubPaths.combined;
   const leafEntries = [];
   const measure = (n) => {
     if (Array.isArray(n.children) && n.children.length > 0) {
@@ -4968,9 +5022,9 @@ function applyTrimPathEffect(node, trimPath, ctx) {
   }
   const chainLengthPx = acc;
   if (combined && chainLengthPx < 1e-3) return node;
-  const offsetReadRaw = readAnimatable(trimPath.offset);
+  const offsetReadRaw = readAnimatable(strokeTrim.offset);
   const offsetRead = offsetReadRaw.kind === "absent" ? { kind: "static", value: 0 } : offsetReadRaw;
-  const rangeReadRaw = readRangeWithCrossings(trimPath.range);
+  const rangeReadRaw = readRangeWithCrossings(strokeTrim.range);
   const rangeRead = rangeReadRaw.kind === "absent" ? { kind: "static", value: [0, 1] } : rangeReadRaw;
   const offsetValues = readScalarValues(offsetRead);
   const minOffset = offsetValues.length ? Math.min(...offsetValues) : 0;
@@ -5300,7 +5354,7 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   const originalId = typeof node.id === "string" ? node.id : void 0;
   const innerIdForContentRef = originalId ? ctx.contentRefInnerIds.get(originalId) : void 0;
   if (!fx && !innerIdForContentRef) return node;
-  const { transformBy, repeater, maskedBy, clipPath, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
+  const { transformBy, repeater, maskedBy, clipPath, strokeTrim, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
   if (fx) delete node.effects;
   let n = node;
   let consumedByGlyphs = false;
@@ -5320,7 +5374,7 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   if (!consumedByGlyphs) n = applyTextPathEffect(n, textPath, ctx);
   n = applyFillGradientEffect(n, fillGradient, ctx);
   n = applyStrokeGradientEffect(n, strokeGradient, ctx);
-  n = applyTrimPathEffect(n, trimPath, ctx);
+  n = applyStrokeTrimEffect(n, strokeTrim, ctx);
   n = applyRepeaterEffect(n, repeater, ctx);
   n = applyMaskedByEffect(n, maskedBy, transformBy, ctx);
   n = applyClipPathEffect(n, clipPath, ctx);
@@ -6619,8 +6673,11 @@ function createScrollDriver(subject, config, onProgress) {
   driver.refresh();
   return driver;
 }
+function pinScrollportHeight(svgRoot) {
+  const scroller = findNearestScroller(svgRoot, "y");
+  return scroller ? scroller.clientHeight : document.documentElement.clientHeight;
+}
 function applyScrollPin(svgRoot, scroll) {
-  var _a;
   const styled = svgRoot;
   if (!(scroll == null ? void 0 : scroll.pin) || !styled.style) return () => {
   };
@@ -6628,7 +6685,28 @@ function applyScrollPin(svgRoot, scroll) {
   const prevPosition = style.position;
   const prevTop = style.top;
   style.position = "sticky";
-  style.top = ((_a = scroll.pinTop) != null ? _a : 0) + "px";
+  const alignFactor = scroll.pinAlign === "center" ? 0.5 : scroll.pinAlign === "bottom" ? 1 : 0;
+  const applyTop = () => {
+    var _a;
+    const extra = (_a = scroll.pinTop) != null ? _a : 0;
+    if (!alignFactor) {
+      style.top = extra + "px";
+      return;
+    }
+    const portSize = pinScrollportHeight(svgRoot);
+    const ownSize = svgRoot.getBoundingClientRect().height;
+    style.top = Math.round((portSize - ownSize) * alignFactor + extra) + "px";
+  };
+  applyTop();
+  let resizeObserver = null;
+  const onWindowResize = alignFactor ? applyTop : null;
+  if (alignFactor) {
+    if (onWindowResize) window.addEventListener("resize", onWindowResize);
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(applyTop);
+      resizeObserver.observe(svgRoot);
+    }
+  }
   let wrapper = null;
   const parent = svgRoot.parentElement;
   if (scroll.pinDistance && scroll.pinDistance > 0 && parent) {
@@ -6639,6 +6717,8 @@ function applyScrollPin(svgRoot, scroll) {
     wrapper.appendChild(svgRoot);
   }
   return () => {
+    if (onWindowResize) window.removeEventListener("resize", onWindowResize);
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
     style.position = prevPosition;
     style.top = prevTop;
     if (wrapper == null ? void 0 : wrapper.parentElement) {
@@ -6905,6 +6985,7 @@ if (typeof window !== "undefined") {
 }
 export {
   COLOUR_ATTR_NAMES,
+  MISSING_GLYPH_CLASS_NAME,
   PX_ANIMATOR_DATA_KEY,
   PX_ANIM_ATTR_NAME,
   PX_ANIM_SRC_ATTR_NAME,
@@ -6937,6 +7018,7 @@ export {
   PxRepeaterEffectSchema,
   PxRetimeEffectSchema,
   PxStrokeGradientEffectSchema,
+  PxStrokeTrimEffectSchema,
   PxSvgNodeExtra,
   PxTextEffectSchema,
   PxTextPathEffectSchema,
@@ -6944,7 +7026,6 @@ export {
   PxTransformPartsSchema,
   PxTransformValueSchema,
   PxTriggerSchema,
-  PxTrimPathEffectSchema,
   STYLE_ATTR_NAMES,
   TRANSFORM_FN_NAMES,
   applyPlayerEffects,