@retikz/vanilla 0.3.0-alpha.5 → 0.3.0-beta.1

package/dist/es/builder/scope.d.ts

@@ -11,7 +11,7 @@ export type ScopeBuilder = {
     node: (...args: Parameters<typeof node>) => ScopeBuilder;
     draw: (...args: Parameters<typeof draw>) => ScopeBuilder;
     coordinate: (...args: Parameters<typeof coordinate>) => ScopeBuilder;
-    scope: (config: ScopeConfig, build: (s: ScopeBuilder) => void) => ScopeBuilder;
+    scope: (config: ScopeConfig, arg: Array<Child> | ((s: ScopeBuilder) => void)) => ScopeBuilder;
 };
 /**
  * 构造一个 scope IR 子节点（分组容器 + 样式默认 + transforms）

package/dist/es/builder/scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/builder/scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,UAAU,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,YAAY,CAAC;IACrE,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,KAAK,YAAY,CAAC;CAChF,CAAC;AAwBF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,QAAQ,WAAW,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAG,KAS5F,CAAC"}
+{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/builder/scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,UAAU,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,YAAY,CAAC;IACrE,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAK,YAAY,CAAC;CAC/F,CAAC;AAwBF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,QAAQ,WAAW,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAG,KAS5F,CAAC"}

package/dist/es/builder/scope.js

@@ -16,8 +16,8 @@ var createScopeBuilder = (sink) => {
 			sink.push(coordinate(...args));
 			return self;
 		},
-		scope(config, build) {
-			sink.push(scope(config, build));
+		scope(config, arg) {
+			sink.push(scope(config, arg));
 			return self;
 		}
 	};

package/dist/es/constants.d.ts

@@ -0,0 +1,3 @@
+/** 默认资源 id 前缀（确定性）；多实例同页须经 `options.idPrefix` 显式区分。SSR(`renderToSvgString`) 与 mount(`mountSvg`) 共用同一默认，避免两处漂移导致资源 id 失配。 */
+export declare const DEFAULT_ID_PREFIX = "r";
+//# sourceMappingURL=constants.d.ts.map

package/dist/es/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,4HAA4H;AAC5H,eAAO,MAAM,iBAAiB,MAAM,CAAC"}

package/dist/es/figure.d.ts

@@ -4,22 +4,24 @@ import { FIGURE_BRAND } from './builder/isFigure';
 import { node } from './builder/node';
 import { ScopeBuilder } from './builder/scope';
 import { Child, CoordinateConfig, DrawConfig, FigureConfig, ScopeConfig, Way } from './builder/types';
-import { MountOptions, RenderToStringOptions, VanillaView } from './types';
+import { CanvasView, MountCanvasOptions, MountOptions, RenderToStringOptions, VanillaView } from './types';
 /**
  * 命令式 builder 的装配产物 —— 唯一返回类型
  * @description hyperscript（`figure(config, children)`）与 fluent（`figure(config).node(...)`）都产它、可混用、`.ir` 一致。
- *   `.mount`/`.toSvgString`/`.toCanvas` 把 `this.ir`（IR，非 Figure）交底层 renderer；fluent 方法往内部 children 追加、链式返回 this。
+ *   `.mount`/`.mountCanvas`（交互式挂载）/`.toSvgString`/`.toCanvas`（一次性产出）把 `this.ir`（IR，非 Figure）交底层
+ *   renderer；fluent 方法往内部 children 追加、链式返回 this。
  */
 export type Figure = {
     readonly [FIGURE_BRAND]: true;
     readonly ir: IR;
     mount: (container: Element, options?: MountOptions) => VanillaView;
+    mountCanvas: (container: Element, options?: MountCanvasOptions) => CanvasView;
     toSvgString: (options?: RenderToStringOptions) => string;
     toCanvas: (canvas: HTMLCanvasElement, options?: RenderOptions) => void;
     node: (...args: Parameters<typeof node>) => Figure;
     draw: (way: Way, config?: DrawConfig) => Figure;
     coordinate: (id: string, config: CoordinateConfig) => Figure;
-    scope: (config: ScopeConfig, build: (s: ScopeBuilder) => void) => Figure;
+    scope: (config: ScopeConfig, arg: Array<Child> | ((s: ScopeBuilder) => void)) => Figure;
 };
 /** figure() 的内部入口：装配 Figure（持 config + children，方法闭包其上） */
 export declare const createFigure: (config: FigureConfig, children: Array<Child>) => Figure;

package/dist/es/figure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../../src/figure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAI3G,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhF;;;;GAIG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,QAAQ,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC;IAChB,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,WAAW,CAAC;IACnE,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,MAAM,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,MAAM,CAAC;IACnD,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,MAAM,CAAC;IAChD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAC7D,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,KAAK,MAAM,CAAC;CAC1E,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,EAAE,UAAU,KAAK,CAAC,KAAK,CAAC,KAAG,MAoD3E,CAAC"}
+{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../../src/figure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAK3G,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhH;;;;;GAKG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,QAAQ,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC;IAChB,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,WAAW,CAAC;IACnE,WAAW,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,KAAK,UAAU,CAAC;IAC9E,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,MAAM,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,MAAM,CAAC;IACnD,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,MAAM,CAAC;IAChD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAC7D,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAK,MAAM,CAAC;CACzF,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,EAAE,UAAU,KAAK,CAAC,KAAK,CAAC,KAAG,MAwD3E,CAAC"}

package/dist/es/figure.js

@@ -2,6 +2,7 @@ import { FIGURE_BRAND } from "./builder/isFigure.js";
 import { toScene } from "./toScene.js";
 import { renderToSvgString } from "./renderToSvgString.js";
 import { mountSvg } from "./mountSvg.js";
+import { mountCanvas } from "./mountCanvas.js";
 import { coordinate } from "./builder/coordinate.js";
 import { draw } from "./builder/draw.js";
 import { node } from "./builder/node.js";
@@ -32,6 +33,9 @@ var createFigure = (config, children) => {
 		mount(container, options) {
 			return mountSvg(container, fig.ir, renderOptions(options));
 		},
+		mountCanvas(container, options) {
+			return mountCanvas(container, fig.ir, renderOptions(options));
+		},
 		toSvgString(options) {
 			return renderToSvgString(fig.ir, renderOptions(options));
 		},
@@ -55,8 +59,8 @@ var createFigure = (config, children) => {
 			children.push(coordinate(id, coordConfig));
 			return fig;
 		},
-		scope(scopeConfig, build) {
-			children.push(scope(scopeConfig, build));
+		scope(scopeConfig, arg) {
+			children.push(scope(scopeConfig, arg));
 			return fig;
 		}
 	};

package/dist/es/index.d.ts

@@ -10,9 +10,15 @@ export { renderToSvgString } from './renderToSvgString';
 export { mountSvg } from './mountSvg';
 export { hydrate } from './hydrate';
 export { mountCanvas } from './mountCanvas';
-export type { RetikzEventName, HydrationHandlers, HydrationHandler, HydrationContext, HydrationAnimationControls, HydrationGeometry, } from '@retikz/render/hydration';
+export type { RetikzEventValue, HydrationHandlers, HydrationHandler, HydrationContext, HydrationAnimationControls, HydrationGeometry, } from '@retikz/render/hydration';
 export { fadeIn, drawOn, scaleIn, grow, growUp, slideIn, colorShift, cameraTo, pulse, spin, loop, flash, blink, wiggle, stagger, } from '@retikz/core';
 export type { AnimationPresetOptions, ScaleInOptions, GrowUpOptions, SlideInOptions, ColorShiftOptions, CameraToOptions, PulseOptions, SpinOptions, LoopOptions, FlashOptions, BlinkOptions, WiggleOptions, } from '@retikz/core';
+export { DrawWay } from '@retikz/core';
+export type { WayItem, WayDSL, WayCycle, WayVia, WayRelativeItem, WayLabel, WayLabelOp, } from '@retikz/core';
+export type { IRNodeTarget, IRAnchorRef } from '@retikz/core';
+export { defineArrow, definePattern, definePathGenerator } from '@retikz/core';
+export type { ArrowDefinition, ArrowEmitContext, PatternDefinition, PatternEmitContext, MarkerPrimitive, MarkerFill, PathGeneratorDefinition, PathGeneratorContext, IRJsonObject, } from '@retikz/core';
+export type { AnimationPropertyDefinition, AnimationPropertyRegistry, CubicBezier, EasingFn, EasingRegistry, } from '@retikz/render/animation';
 export { figure } from './builder/figure';
 export { node } from './builder/node';
 export { draw } from './builder/draw';

package/dist/es/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,GACR,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,GAAG,GACJ,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,GACR,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,GACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EACV,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,eAAe,EACf,QAAQ,EACR,UAAU,GACX,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC/E,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,uBAAuB,EACvB,oBAAoB,EACpB,YAAY,GACb,MAAM,cAAc,CAAC;AAEtB,YAAY,EACV,2BAA2B,EAC3B,yBAAyB,EACzB,WAAW,EACX,QAAQ,EACR,cAAc,GACf,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,GAAG,GACJ,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC"}

package/dist/es/index.js

@@ -7,5 +7,5 @@ import { draw } from "./builder/draw.js";
 import { node } from "./builder/node.js";
 import { scope } from "./builder/scope.js";
 import { figure } from "./builder/figure.js";
-import { blink, cameraTo, colorShift, drawOn, fadeIn, flash, grow, growUp, loop, pulse, scaleIn, slideIn, spin, stagger, wiggle } from "@retikz/core";
-export { blink, cameraTo, colorShift, coordinate, draw, drawOn, fadeIn, figure, flash, grow, growUp, hydrate, loop, mountCanvas, mountSvg, node, pulse, renderToSvgString, scaleIn, scope, slideIn, spin, stagger, wiggle };
+import { DrawWay, blink, cameraTo, colorShift, defineArrow, definePathGenerator, definePattern, drawOn, fadeIn, flash, grow, growUp, loop, pulse, scaleIn, slideIn, spin, stagger, wiggle } from "@retikz/core";
+export { DrawWay, blink, cameraTo, colorShift, coordinate, defineArrow, definePathGenerator, definePattern, draw, drawOn, fadeIn, figure, flash, grow, growUp, hydrate, loop, mountCanvas, mountSvg, node, pulse, renderToSvgString, scaleIn, scope, slideIn, spin, stagger, wiggle };

package/dist/es/mountCanvas.d.ts

@@ -1,7 +1,8 @@
 import { CanvasView, MountCanvasOptions, RenderInput } from './types';
 /**
  * 把 IR / Scene / Figure 挂成真实 `<canvas>` DOM（无框架浏览器 runtime，对齐 `mountSvg`）
- * @description 收 IR 时 `toScene` compile、收 Scene 直用、收 Figure 解 `figure.ir`。位图按「名义显示尺寸」
+ * @description 收 `Figure` 时 delegate 给 `figure.mountCanvas`（与 mountSvg→`figure.mount` 对称）。收 IR 时
+ *   `toScene` compile、收 Scene 直用。位图按「名义显示尺寸」
  *   `width`/`height`（均为有限数值时）× dpr 开、否则回退内容边界；`renderToCanvas` 再把 Scene 内容 meet-fit
  *   进去（镜像 SVG `preserveAspectRatio=meet` + CanvasHost）。返回的 `CanvasView` 暴露 `hydrate`（hitTest 定位）
  *   与 `clientToScene`（逆 meet-fit 坐标映射）。DOM 仅在调用时惰性触碰，`import` 本模块不碰 DOM——守 SSR 导入安全。

package/dist/es/mountCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountCanvas.d.ts","sourceRoot":"","sources":["../../src/mountCanvas.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAkB,kBAAkB,EAAE,WAAW,EAAc,MAAM,SAAS,CAAC;AASvG;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,OAAO,EAClB,OAAO,WAAW,EAClB,UAAS,kBAAuB,KAC/B,UA6JF,CAAC"}
+{"version":3,"file":"mountCanvas.d.ts","sourceRoot":"","sources":["../../src/mountCanvas.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAkB,kBAAkB,EAAE,WAAW,EAAc,MAAM,SAAS,CAAC;AASvG;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,OAAO,EAClB,OAAO,WAAW,EAClB,UAAS,kBAAuB,KAC/B,UA2MF,CAAC"}

package/dist/es/mountCanvas.js

@@ -1,7 +1,7 @@
 import { isFigure } from "./builder/isFigure.js";
 import { toScene } from "./toScene.js";
 import { createClock, createIdClockRegistry, prefersReducedMotion, sceneAnimationDurationMs, sceneHasAnimations, sceneHasAutoplayTrigger } from "@retikz/render/animation";
-import { createCanvasIdAnimationControls, createHydrationController, geometryOf, metaOf } from "@retikz/render/hydration";
+import { collectCanvasVisibleAnimationIds, createCanvasIdAnimationControls, createContextBuilder, createHydrationController, isCanvasAnimationIdVisible, withCanvasAnimationEventHandlers } from "@retikz/render/hydration";
 import { hitTest, renderToCanvas } from "@retikz/render/canvas";
 //#region src/mountCanvas.ts
 /** 设备像素比：取有限正数、否则回退 1（镜像 react CanvasHost） */
@@ -12,18 +12,22 @@ var resolveDevicePixelRatio = (override) => {
 };
 /**
 * 把 IR / Scene / Figure 挂成真实 `<canvas>` DOM（无框架浏览器 runtime，对齐 `mountSvg`）
-* @description 收 IR 时 `toScene` compile、收 Scene 直用、收 Figure 解 `figure.ir`。位图按「名义显示尺寸」
+* @description 收 `Figure` 时 delegate 给 `figure.mountCanvas`（与 mountSvg→`figure.mount` 对称）。收 IR 时
+*   `toScene` compile、收 Scene 直用。位图按「名义显示尺寸」
 *   `width`/`height`（均为有限数值时）× dpr 开、否则回退内容边界；`renderToCanvas` 再把 Scene 内容 meet-fit
 *   进去（镜像 SVG `preserveAspectRatio=meet` + CanvasHost）。返回的 `CanvasView` 暴露 `hydrate`（hitTest 定位）
 *   与 `clientToScene`（逆 meet-fit 坐标映射）。DOM 仅在调用时惰性触碰，`import` 本模块不碰 DOM——守 SSR 导入安全。
 */
 var mountCanvas = (container, input, options = {}) => {
+	if (isFigure(input)) return input.mountCanvas(container, options);
 	if (typeof Element === "undefined" || !(container instanceof Element)) throw new Error("mountCanvas: container must be a DOM Element.");
 	const canvas = document.createElement("canvas");
 	const ratio = resolveDevicePixelRatio(options.devicePixelRatio);
 	const animate = options.animate !== false && !prefersReducedMotion();
 	let clock;
 	const registry = createIdClockRegistry();
+	let visibleActivated = /* @__PURE__ */ new Set();
+	let visibleTeardown;
 	let currentScene;
 	/** 把全局帧时刻折算成单个 prim 的动画解析（per-id）：stop→渲染 base；否则按有效时刻 + 是否含非自动播 track */
 	const resolvePrim = (id, globalTime) => id !== void 0 && registry.isStopped(id) ? { mode: "skip" } : {
@@ -42,6 +46,41 @@ var mountCanvas = (container, input, options = {}) => {
 			resolvePrimAnimation: (id) => resolvePrim(id, time)
 		});
 	};
+	const ensureClockPlaying = () => {
+		clock?.play();
+	};
+	/** Canvas visible trigger：按 canvas client rect 与 id 聚合 bbox 相交激活一次 */
+	const activateVisibleTracks = () => {
+		const ids = collectCanvasVisibleAnimationIds(currentScene);
+		if (ids.size === 0) return;
+		let changed = false;
+		for (const id of ids) {
+			if (visibleActivated.has(id)) continue;
+			if (!isCanvasAnimationIdVisible(canvas, currentScene, id)) continue;
+			registry.restart(id, clock?.time ?? 0);
+			visibleActivated.add(id);
+			changed = true;
+		}
+		if (!changed) return;
+		ensureClockPlaying();
+		renderFrame();
+	};
+	const resetVisibleBridge = () => {
+		visibleActivated = /* @__PURE__ */ new Set();
+		visibleTeardown?.();
+		visibleTeardown = void 0;
+		if (!animate || !sceneHasAnimations(currentScene)) return;
+		if (collectCanvasVisibleAnimationIds(currentScene).size === 0 || typeof window === "undefined") return;
+		const schedule = () => activateVisibleTracks();
+		window.addEventListener("scroll", schedule, true);
+		window.addEventListener("resize", schedule);
+		const raf = window.requestAnimationFrame(schedule);
+		visibleTeardown = () => {
+			window.removeEventListener("scroll", schedule, true);
+			window.removeEventListener("resize", schedule);
+			window.cancelAnimationFrame(raf);
+		};
+	};
 	const renderInto = (next) => {
 		if (isFigure(next)) throw new Error("mountCanvas: view.update does not accept a Figure; pass figure.ir instead.");
 		const scene = toScene(next, options);
@@ -70,8 +109,9 @@ var mountCanvas = (container, input, options = {}) => {
 			});
 			if (sceneHasAutoplayTrigger(scene)) clock.play();
 		}
+		resetVisibleBridge();
 	};
-	renderInto(isFigure(input) ? input.ir : input);
+	renderInto(input);
 	container.appendChild(canvas);
 	/**
 	* 把指针的 client 像素坐标逆 meet-fit 映射成 Scene user units
@@ -109,27 +149,24 @@ var mountCanvas = (container, input, options = {}) => {
 			context2d?.setTransform(1, 0, 0, 1, 0, 0);
 			return hitTest(currentScene, scenePoint, { context2d });
 		};
-		const buildContext = (event, id) => {
-			const mouse = event;
-			return {
-				id,
-				meta: metaOf(currentScene, id),
-				renderer: "canvas",
-				element: null,
-				root: canvas,
-				point: typeof mouse.clientX === "number" ? clientToScene(mouse.clientX, mouse.clientY) : null,
-				geometry: geometryOf(currentScene, id),
-				animation: createCanvasIdAnimationControls({
-					registry,
-					clockTime: () => clock?.time ?? 0,
-					ensurePlaying: () => clock?.play(),
-					renderFrame,
-					defaultId: id
-				}),
-				scene: currentScene
-			};
-		};
-		return { dispose: createHydrationController(canvas, hydrateOptions.handlers, locate, buildContext).dispose };
+		const buildContext = createContextBuilder({
+			renderer: "canvas",
+			root: canvas,
+			scene: () => currentScene,
+			resolveElement: () => null,
+			resolvePoint: (event) => {
+				const mouse = event;
+				return typeof mouse.clientX === "number" ? clientToScene(mouse.clientX, mouse.clientY) : null;
+			},
+			makeAnimation: (id) => createCanvasIdAnimationControls({
+				registry,
+				clockTime: () => clock?.time ?? 0,
+				ensurePlaying: () => clock?.play(),
+				renderFrame,
+				defaultId: id
+			})
+		});
+		return { dispose: createHydrationController(canvas, withCanvasAnimationEventHandlers(currentScene, hydrateOptions.handlers), locate, buildContext).dispose };
 	};
 	return {
 		root: canvas,
@@ -140,6 +177,7 @@ var mountCanvas = (container, input, options = {}) => {
 		dispose() {
 			if (disposed) return;
 			disposed = true;
+			visibleTeardown?.();
 			clock?.dispose();
 			canvas.remove();
 		},

package/dist/es/mountSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountSvg.d.ts","sourceRoot":"","sources":["../../src/mountSvg.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAmC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMvG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,OAAO,EAAE,OAAO,WAAW,EAAE,UAAS,YAAiB,KAAG,WA4E7F,CAAC"}
+{"version":3,"file":"mountSvg.d.ts","sourceRoot":"","sources":["../../src/mountSvg.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAmC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAIvG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,OAAO,EAAE,OAAO,WAAW,EAAE,UAAS,YAAiB,KAAG,WAyE7F,CAAC"}

package/dist/es/mountSvg.js

@@ -3,11 +3,9 @@ import { toScene } from "./toScene.js";
 import { applyAttrs, svgNodeToDom } from "./svgNodeToDom.js";
 import { buildSvgDocument } from "@retikz/render/svg";
 import { bindWaapiDescriptors, prefersReducedMotion, sceneHasAnimations } from "@retikz/render/animation";
-import { createHydrationController, createSvgAnimationControls, geometryOf, locateSvg, metaOf, resolvePointViaLayout, resolveSvgElement } from "@retikz/render/hydration";
+import { createContextBuilder, createHydrationController, createSvgAnimationControls, locateSvg, resolvePointViaLayout, resolveSvgElement } from "@retikz/render/hydration";
 //#region src/mountSvg.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-/** 默认资源 id 前缀（确定性）；多实例同页须经 `options.idPrefix` 显式区分 */
-var DEFAULT_ID_PREFIX = "r";
 /**
 * 把 IR / Scene / Figure 挂成真实 SVG DOM（无框架浏览器 runtime）
 * @description 收 `Figure` 时 delegate 给 `figure.mount`（Figure 自持 config，call-site options 覆盖）。收
@@ -18,7 +16,7 @@ var DEFAULT_ID_PREFIX = "r";
 var mountSvg = (container, input, options = {}) => {
 	if (isFigure(input)) return input.mount(container, options);
 	if (typeof Element === "undefined" || !(container instanceof Element)) throw new Error("mountSvg: container must be a DOM Element.");
-	const idPrefix = options.idPrefix ?? DEFAULT_ID_PREFIX;
+	const idPrefix = options.idPrefix ?? "r";
 	const root = document.createElementNS(SVG_NS, "svg");
 	const animate = options.animate !== false && !prefersReducedMotion();
 	let animationControls;
@@ -51,16 +49,13 @@ var mountSvg = (container, input, options = {}) => {
 	*   `data-retikz-animation-owner` 双查 `getAnimations()` per-id 控制。
 	*/
 	const hydrate = (hydrateOptions) => {
-		const buildContext = (event, id) => ({
-			id,
-			meta: metaOf(currentScene, id),
+		const buildContext = createContextBuilder({
 			renderer: "svg",
-			element: resolveSvgElement(event),
 			root,
-			point: resolvePointViaLayout(root, currentScene.layout)(event),
-			geometry: geometryOf(currentScene, id),
-			animation: createSvgAnimationControls(root, id),
-			scene: currentScene
+			scene: () => currentScene,
+			resolveElement: resolveSvgElement,
+			resolvePoint: (event) => resolvePointViaLayout(root, currentScene.layout)(event),
+			makeAnimation: (id) => createSvgAnimationControls(root, id)
 		});
 		return { dispose: createHydrationController(root, hydrateOptions.handlers, locateSvg, buildContext).dispose };
 	};

package/dist/es/renderToSvgString.d.ts

@@ -2,7 +2,8 @@ import { RenderInput, RenderToStringOptions } from './types';
 /**
  * 把 IR / Scene / Figure 渲染成 SVG 字符串（SSR / 构建期）
  * @description 收 `Figure` 时 delegate 给 `figure.toSvgString`。收 IR/Scene 时薄包 `@retikz/render/svg`：`toScene`
- *   （ir 缺省走 core fallback measurer、确定性）→ 序列化 → 若给 `width`/`height` 注入根 `<svg>`。零 DOM。
+ *   （ir 缺省走 core fallback measurer、确定性）→ 序列化。`width`/`height` 直接透传给 render，由其结构化写进根
+ *   `<svg>` attrs（不在本层对字符串做正则后处理）。零 DOM。
  */
 export declare const renderToSvgString: (input: RenderInput, options?: RenderToStringOptions) => string;
 //# sourceMappingURL=renderToSvgString.d.ts.map

package/dist/es/renderToSvgString.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderToSvgString.d.ts","sourceRoot":"","sources":["../../src/renderToSvgString.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAYlE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,EAAE,UAAS,qBAA0B,KAAG,MAS3F,CAAC"}
+{"version":3,"file":"renderToSvgString.d.ts","sourceRoot":"","sources":["../../src/renderToSvgString.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAElE;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,EAAE,UAAS,qBAA0B,KAAG,MAU3F,CAAC"}

package/dist/es/renderToSvgString.js

@@ -2,27 +2,22 @@ import { isFigure } from "./builder/isFigure.js";
 import { toScene } from "./toScene.js";
 import { renderToSvgString } from "@retikz/render/svg";
 //#region src/renderToSvgString.ts
-/** 默认资源 id 前缀（确定性）；多实例同页须经 `options.idPrefix` 显式区分 */
-var DEFAULT_ID_PREFIX = "r";
-/** 把 `width`/`height` 注入到开头的 `<svg` 标签（@retikz/render/svg 只产 viewBox） */
-var injectSize = (svg, width, height) => {
-	if (width === void 0 && height === void 0) return svg;
-	const attrs = [width !== void 0 ? ` width="${width}"` : "", height !== void 0 ? ` height="${height}"` : ""].join("");
-	return svg.replace(/^<svg/, `<svg${attrs}`);
-};
 /**
 * 把 IR / Scene / Figure 渲染成 SVG 字符串（SSR / 构建期）
 * @description 收 `Figure` 时 delegate 给 `figure.toSvgString`。收 IR/Scene 时薄包 `@retikz/render/svg`：`toScene`
-*   （ir 缺省走 core fallback measurer、确定性）→ 序列化 → 若给 `width`/`height` 注入根 `<svg>`。零 DOM。
+*   （ir 缺省走 core fallback measurer、确定性）→ 序列化。`width`/`height` 直接透传给 render，由其结构化写进根
+*   `<svg>` attrs（不在本层对字符串做正则后处理）。零 DOM。
 */
 var renderToSvgString$1 = (input, options = {}) => {
 	if (isFigure(input)) return input.toSvgString(options);
-	return injectSize(renderToSvgString(toScene(input, options), {
-		idPrefix: options.idPrefix ?? DEFAULT_ID_PREFIX,
+	return renderToSvgString(toScene(input, options), {
+		idPrefix: options.idPrefix ?? "r",
 		animate: options.animate,
 		snapshotAt: options.snapshotAt,
-		easings: options.easings
-	}), options.width, options.height);
+		easings: options.easings,
+		width: options.width,
+		height: options.height
+	});
 };
 //#endregion
 export { renderToSvgString$1 as renderToSvgString };

package/dist/lib/builder/scope.cjs

@@ -16,8 +16,8 @@ var createScopeBuilder = (sink) => {
 			sink.push(require_coordinate.coordinate(...args));
 			return self;
 		},
-		scope(config, build) {
-			sink.push(scope(config, build));
+		scope(config, arg) {
+			sink.push(scope(config, arg));
 			return self;
 		}
 	};

package/dist/lib/builder/scope.d.ts

@@ -11,7 +11,7 @@ export type ScopeBuilder = {
     node: (...args: Parameters<typeof node>) => ScopeBuilder;
     draw: (...args: Parameters<typeof draw>) => ScopeBuilder;
     coordinate: (...args: Parameters<typeof coordinate>) => ScopeBuilder;
-    scope: (config: ScopeConfig, build: (s: ScopeBuilder) => void) => ScopeBuilder;
+    scope: (config: ScopeConfig, arg: Array<Child> | ((s: ScopeBuilder) => void)) => ScopeBuilder;
 };
 /**
  * 构造一个 scope IR 子节点（分组容器 + 样式默认 + transforms）

package/dist/lib/builder/scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/builder/scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,UAAU,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,YAAY,CAAC;IACrE,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,KAAK,YAAY,CAAC;CAChF,CAAC;AAwBF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,QAAQ,WAAW,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAG,KAS5F,CAAC"}
+{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/builder/scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,YAAY,CAAC;IACzD,UAAU,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,YAAY,CAAC;IACrE,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAK,YAAY,CAAC;CAC/F,CAAC;AAwBF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,QAAQ,WAAW,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAG,KAS5F,CAAC"}

package/dist/lib/constants.d.ts

@@ -0,0 +1,3 @@
+/** 默认资源 id 前缀（确定性）；多实例同页须经 `options.idPrefix` 显式区分。SSR(`renderToSvgString`) 与 mount(`mountSvg`) 共用同一默认，避免两处漂移导致资源 id 失配。 */
+export declare const DEFAULT_ID_PREFIX = "r";
+//# sourceMappingURL=constants.d.ts.map

package/dist/lib/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,4HAA4H;AAC5H,eAAO,MAAM,iBAAiB,MAAM,CAAC"}

package/dist/lib/figure.cjs

@@ -2,6 +2,7 @@ const require_isFigure = require("./builder/isFigure.cjs");
 const require_toScene = require("./toScene.cjs");
 const require_renderToSvgString = require("./renderToSvgString.cjs");
 const require_mountSvg = require("./mountSvg.cjs");
+const require_mountCanvas = require("./mountCanvas.cjs");
 const require_coordinate = require("./builder/coordinate.cjs");
 const require_draw = require("./builder/draw.cjs");
 const require_node = require("./builder/node.cjs");
@@ -32,6 +33,9 @@ var createFigure = (config, children) => {
 		mount(container, options) {
 			return require_mountSvg.mountSvg(container, fig.ir, renderOptions(options));
 		},
+		mountCanvas(container, options) {
+			return require_mountCanvas.mountCanvas(container, fig.ir, renderOptions(options));
+		},
 		toSvgString(options) {
 			return require_renderToSvgString.renderToSvgString(fig.ir, renderOptions(options));
 		},
@@ -55,8 +59,8 @@ var createFigure = (config, children) => {
 			children.push(require_coordinate.coordinate(id, coordConfig));
 			return fig;
 		},
-		scope(scopeConfig, build) {
-			children.push(require_scope.scope(scopeConfig, build));
+		scope(scopeConfig, arg) {
+			children.push(require_scope.scope(scopeConfig, arg));
 			return fig;
 		}
 	};

package/dist/lib/figure.d.ts

@@ -4,22 +4,24 @@ import { FIGURE_BRAND } from './builder/isFigure';
 import { node } from './builder/node';
 import { ScopeBuilder } from './builder/scope';
 import { Child, CoordinateConfig, DrawConfig, FigureConfig, ScopeConfig, Way } from './builder/types';
-import { MountOptions, RenderToStringOptions, VanillaView } from './types';
+import { CanvasView, MountCanvasOptions, MountOptions, RenderToStringOptions, VanillaView } from './types';
 /**
  * 命令式 builder 的装配产物 —— 唯一返回类型
  * @description hyperscript（`figure(config, children)`）与 fluent（`figure(config).node(...)`）都产它、可混用、`.ir` 一致。
- *   `.mount`/`.toSvgString`/`.toCanvas` 把 `this.ir`（IR，非 Figure）交底层 renderer；fluent 方法往内部 children 追加、链式返回 this。
+ *   `.mount`/`.mountCanvas`（交互式挂载）/`.toSvgString`/`.toCanvas`（一次性产出）把 `this.ir`（IR，非 Figure）交底层
+ *   renderer；fluent 方法往内部 children 追加、链式返回 this。
  */
 export type Figure = {
     readonly [FIGURE_BRAND]: true;
     readonly ir: IR;
     mount: (container: Element, options?: MountOptions) => VanillaView;
+    mountCanvas: (container: Element, options?: MountCanvasOptions) => CanvasView;
     toSvgString: (options?: RenderToStringOptions) => string;
     toCanvas: (canvas: HTMLCanvasElement, options?: RenderOptions) => void;
     node: (...args: Parameters<typeof node>) => Figure;
     draw: (way: Way, config?: DrawConfig) => Figure;
     coordinate: (id: string, config: CoordinateConfig) => Figure;
-    scope: (config: ScopeConfig, build: (s: ScopeBuilder) => void) => Figure;
+    scope: (config: ScopeConfig, arg: Array<Child> | ((s: ScopeBuilder) => void)) => Figure;
 };
 /** figure() 的内部入口：装配 Figure（持 config + children，方法闭包其上） */
 export declare const createFigure: (config: FigureConfig, children: Array<Child>) => Figure;

package/dist/lib/figure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../../src/figure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAI3G,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhF;;;;GAIG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,QAAQ,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC;IAChB,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,WAAW,CAAC;IACnE,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,MAAM,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,MAAM,CAAC;IACnD,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,MAAM,CAAC;IAChD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAC7D,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,KAAK,MAAM,CAAC;CAC1E,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,EAAE,UAAU,KAAK,CAAC,KAAK,CAAC,KAAG,MAoD3E,CAAC"}
+{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../../src/figure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAK3G,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhH;;;;;GAKG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,QAAQ,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC;IAChB,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,WAAW,CAAC;IACnE,WAAW,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,KAAK,UAAU,CAAC;IAC9E,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,MAAM,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,MAAM,CAAC;IACnD,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,MAAM,CAAC;IAChD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAC7D,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC,KAAK,MAAM,CAAC;CACzF,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,EAAE,UAAU,KAAK,CAAC,KAAK,CAAC,KAAG,MAwD3E,CAAC"}

package/dist/lib/index.cjs

@@ -9,6 +9,12 @@ const require_node = require("./builder/node.cjs");
 const require_scope = require("./builder/scope.cjs");
 const require_figure = require("./builder/figure.cjs");
 let _retikz_core = require("@retikz/core");
+Object.defineProperty(exports, "DrawWay", {
+	enumerable: true,
+	get: function() {
+		return _retikz_core.DrawWay;
+	}
+});
 Object.defineProperty(exports, "blink", {
 	enumerable: true,
 	get: function() {
@@ -28,6 +34,24 @@ Object.defineProperty(exports, "colorShift", {
 	}
 });
 exports.coordinate = require_coordinate.coordinate;
+Object.defineProperty(exports, "defineArrow", {
+	enumerable: true,
+	get: function() {
+		return _retikz_core.defineArrow;
+	}
+});
+Object.defineProperty(exports, "definePathGenerator", {
+	enumerable: true,
+	get: function() {
+		return _retikz_core.definePathGenerator;
+	}
+});
+Object.defineProperty(exports, "definePattern", {
+	enumerable: true,
+	get: function() {
+		return _retikz_core.definePattern;
+	}
+});
 exports.draw = require_draw.draw;
 Object.defineProperty(exports, "drawOn", {
 	enumerable: true,

package/dist/lib/index.d.ts

@@ -10,9 +10,15 @@ export { renderToSvgString } from './renderToSvgString';
 export { mountSvg } from './mountSvg';
 export { hydrate } from './hydrate';
 export { mountCanvas } from './mountCanvas';
-export type { RetikzEventName, HydrationHandlers, HydrationHandler, HydrationContext, HydrationAnimationControls, HydrationGeometry, } from '@retikz/render/hydration';
+export type { RetikzEventValue, HydrationHandlers, HydrationHandler, HydrationContext, HydrationAnimationControls, HydrationGeometry, } from '@retikz/render/hydration';
 export { fadeIn, drawOn, scaleIn, grow, growUp, slideIn, colorShift, cameraTo, pulse, spin, loop, flash, blink, wiggle, stagger, } from '@retikz/core';
 export type { AnimationPresetOptions, ScaleInOptions, GrowUpOptions, SlideInOptions, ColorShiftOptions, CameraToOptions, PulseOptions, SpinOptions, LoopOptions, FlashOptions, BlinkOptions, WiggleOptions, } from '@retikz/core';
+export { DrawWay } from '@retikz/core';
+export type { WayItem, WayDSL, WayCycle, WayVia, WayRelativeItem, WayLabel, WayLabelOp, } from '@retikz/core';
+export type { IRNodeTarget, IRAnchorRef } from '@retikz/core';
+export { defineArrow, definePattern, definePathGenerator } from '@retikz/core';
+export type { ArrowDefinition, ArrowEmitContext, PatternDefinition, PatternEmitContext, MarkerPrimitive, MarkerFill, PathGeneratorDefinition, PathGeneratorContext, IRJsonObject, } from '@retikz/core';
+export type { AnimationPropertyDefinition, AnimationPropertyRegistry, CubicBezier, EasingFn, EasingRegistry, } from '@retikz/render/animation';
 export { figure } from './builder/figure';
 export { node } from './builder/node';
 export { draw } from './builder/draw';

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,GACR,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,GAAG,GACJ,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,GACR,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,GACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EACV,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,eAAe,EACf,QAAQ,EACR,UAAU,GACX,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC/E,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,uBAAuB,EACvB,oBAAoB,EACpB,YAAY,GACb,MAAM,cAAc,CAAC;AAEtB,YAAY,EACV,2BAA2B,EAC3B,yBAAyB,EACzB,WAAW,EACX,QAAQ,EACR,cAAc,GACf,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,GAAG,GACJ,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC"}

package/dist/lib/mountCanvas.cjs

@@ -12,18 +12,22 @@ var resolveDevicePixelRatio = (override) => {
 };
 /**
 * 把 IR / Scene / Figure 挂成真实 `<canvas>` DOM（无框架浏览器 runtime，对齐 `mountSvg`）
-* @description 收 IR 时 `toScene` compile、收 Scene 直用、收 Figure 解 `figure.ir`。位图按「名义显示尺寸」
+* @description 收 `Figure` 时 delegate 给 `figure.mountCanvas`（与 mountSvg→`figure.mount` 对称）。收 IR 时
+*   `toScene` compile、收 Scene 直用。位图按「名义显示尺寸」
 *   `width`/`height`（均为有限数值时）× dpr 开、否则回退内容边界；`renderToCanvas` 再把 Scene 内容 meet-fit
 *   进去（镜像 SVG `preserveAspectRatio=meet` + CanvasHost）。返回的 `CanvasView` 暴露 `hydrate`（hitTest 定位）
 *   与 `clientToScene`（逆 meet-fit 坐标映射）。DOM 仅在调用时惰性触碰，`import` 本模块不碰 DOM——守 SSR 导入安全。
 */
 var mountCanvas = (container, input, options = {}) => {
+	if (require_isFigure.isFigure(input)) return input.mountCanvas(container, options);
 	if (typeof Element === "undefined" || !(container instanceof Element)) throw new Error("mountCanvas: container must be a DOM Element.");
 	const canvas = document.createElement("canvas");
 	const ratio = resolveDevicePixelRatio(options.devicePixelRatio);
 	const animate = options.animate !== false && !(0, _retikz_render_animation.prefersReducedMotion)();
 	let clock;
 	const registry = (0, _retikz_render_animation.createIdClockRegistry)();
+	let visibleActivated = /* @__PURE__ */ new Set();
+	let visibleTeardown;
 	let currentScene;
 	/** 把全局帧时刻折算成单个 prim 的动画解析（per-id）：stop→渲染 base；否则按有效时刻 + 是否含非自动播 track */
 	const resolvePrim = (id, globalTime) => id !== void 0 && registry.isStopped(id) ? { mode: "skip" } : {
@@ -42,6 +46,41 @@ var mountCanvas = (container, input, options = {}) => {
 			resolvePrimAnimation: (id) => resolvePrim(id, time)
 		});
 	};
+	const ensureClockPlaying = () => {
+		clock?.play();
+	};
+	/** Canvas visible trigger：按 canvas client rect 与 id 聚合 bbox 相交激活一次 */
+	const activateVisibleTracks = () => {
+		const ids = (0, _retikz_render_hydration.collectCanvasVisibleAnimationIds)(currentScene);
+		if (ids.size === 0) return;
+		let changed = false;
+		for (const id of ids) {
+			if (visibleActivated.has(id)) continue;
+			if (!(0, _retikz_render_hydration.isCanvasAnimationIdVisible)(canvas, currentScene, id)) continue;
+			registry.restart(id, clock?.time ?? 0);
+			visibleActivated.add(id);
+			changed = true;
+		}
+		if (!changed) return;
+		ensureClockPlaying();
+		renderFrame();
+	};
+	const resetVisibleBridge = () => {
+		visibleActivated = /* @__PURE__ */ new Set();
+		visibleTeardown?.();
+		visibleTeardown = void 0;
+		if (!animate || !(0, _retikz_render_animation.sceneHasAnimations)(currentScene)) return;
+		if ((0, _retikz_render_hydration.collectCanvasVisibleAnimationIds)(currentScene).size === 0 || typeof window === "undefined") return;
+		const schedule = () => activateVisibleTracks();
+		window.addEventListener("scroll", schedule, true);
+		window.addEventListener("resize", schedule);
+		const raf = window.requestAnimationFrame(schedule);
+		visibleTeardown = () => {
+			window.removeEventListener("scroll", schedule, true);
+			window.removeEventListener("resize", schedule);
+			window.cancelAnimationFrame(raf);
+		};
+	};
 	const renderInto = (next) => {
 		if (require_isFigure.isFigure(next)) throw new Error("mountCanvas: view.update does not accept a Figure; pass figure.ir instead.");
 		const scene = require_toScene.toScene(next, options);
@@ -70,8 +109,9 @@ var mountCanvas = (container, input, options = {}) => {
 			});
 			if ((0, _retikz_render_animation.sceneHasAutoplayTrigger)(scene)) clock.play();
 		}
+		resetVisibleBridge();
 	};
-	renderInto(require_isFigure.isFigure(input) ? input.ir : input);
+	renderInto(input);
 	container.appendChild(canvas);
 	/**
 	* 把指针的 client 像素坐标逆 meet-fit 映射成 Scene user units
@@ -109,27 +149,24 @@ var mountCanvas = (container, input, options = {}) => {
 			context2d?.setTransform(1, 0, 0, 1, 0, 0);
 			return (0, _retikz_render_canvas.hitTest)(currentScene, scenePoint, { context2d });
 		};
-		const buildContext = (event, id) => {
-			const mouse = event;
-			return {
-				id,
-				meta: (0, _retikz_render_hydration.metaOf)(currentScene, id),
-				renderer: "canvas",
-				element: null,
-				root: canvas,
-				point: typeof mouse.clientX === "number" ? clientToScene(mouse.clientX, mouse.clientY) : null,
-				geometry: (0, _retikz_render_hydration.geometryOf)(currentScene, id),
-				animation: (0, _retikz_render_hydration.createCanvasIdAnimationControls)({
-					registry,
-					clockTime: () => clock?.time ?? 0,
-					ensurePlaying: () => clock?.play(),
-					renderFrame,
-					defaultId: id
-				}),
-				scene: currentScene
-			};
-		};
-		return { dispose: (0, _retikz_render_hydration.createHydrationController)(canvas, hydrateOptions.handlers, locate, buildContext).dispose };
+		const buildContext = (0, _retikz_render_hydration.createContextBuilder)({
+			renderer: "canvas",
+			root: canvas,
+			scene: () => currentScene,
+			resolveElement: () => null,
+			resolvePoint: (event) => {
+				const mouse = event;
+				return typeof mouse.clientX === "number" ? clientToScene(mouse.clientX, mouse.clientY) : null;
+			},
+			makeAnimation: (id) => (0, _retikz_render_hydration.createCanvasIdAnimationControls)({
+				registry,
+				clockTime: () => clock?.time ?? 0,
+				ensurePlaying: () => clock?.play(),
+				renderFrame,
+				defaultId: id
+			})
+		});
+		return { dispose: (0, _retikz_render_hydration.createHydrationController)(canvas, (0, _retikz_render_hydration.withCanvasAnimationEventHandlers)(currentScene, hydrateOptions.handlers), locate, buildContext).dispose };
 	};
 	return {
 		root: canvas,
@@ -140,6 +177,7 @@ var mountCanvas = (container, input, options = {}) => {
 		dispose() {
 			if (disposed) return;
 			disposed = true;
+			visibleTeardown?.();
 			clock?.dispose();
 			canvas.remove();
 		},

package/dist/lib/mountCanvas.d.ts

@@ -1,7 +1,8 @@
 import { CanvasView, MountCanvasOptions, RenderInput } from './types';
 /**
  * 把 IR / Scene / Figure 挂成真实 `<canvas>` DOM（无框架浏览器 runtime，对齐 `mountSvg`）
- * @description 收 IR 时 `toScene` compile、收 Scene 直用、收 Figure 解 `figure.ir`。位图按「名义显示尺寸」
+ * @description 收 `Figure` 时 delegate 给 `figure.mountCanvas`（与 mountSvg→`figure.mount` 对称）。收 IR 时
+ *   `toScene` compile、收 Scene 直用。位图按「名义显示尺寸」
  *   `width`/`height`（均为有限数值时）× dpr 开、否则回退内容边界；`renderToCanvas` 再把 Scene 内容 meet-fit
  *   进去（镜像 SVG `preserveAspectRatio=meet` + CanvasHost）。返回的 `CanvasView` 暴露 `hydrate`（hitTest 定位）
  *   与 `clientToScene`（逆 meet-fit 坐标映射）。DOM 仅在调用时惰性触碰，`import` 本模块不碰 DOM——守 SSR 导入安全。

package/dist/lib/mountCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountCanvas.d.ts","sourceRoot":"","sources":["../../src/mountCanvas.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAkB,kBAAkB,EAAE,WAAW,EAAc,MAAM,SAAS,CAAC;AASvG;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,OAAO,EAClB,OAAO,WAAW,EAClB,UAAS,kBAAuB,KAC/B,UA6JF,CAAC"}
+{"version":3,"file":"mountCanvas.d.ts","sourceRoot":"","sources":["../../src/mountCanvas.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAkB,kBAAkB,EAAE,WAAW,EAAc,MAAM,SAAS,CAAC;AASvG;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,OAAO,EAClB,OAAO,WAAW,EAClB,UAAS,kBAAuB,KAC/B,UA2MF,CAAC"}

package/dist/lib/mountSvg.cjs

@@ -6,8 +6,6 @@ let _retikz_render_animation = require("@retikz/render/animation");
 let _retikz_render_hydration = require("@retikz/render/hydration");
 //#region src/mountSvg.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-/** 默认资源 id 前缀（确定性）；多实例同页须经 `options.idPrefix` 显式区分 */
-var DEFAULT_ID_PREFIX = "r";
 /**
 * 把 IR / Scene / Figure 挂成真实 SVG DOM（无框架浏览器 runtime）
 * @description 收 `Figure` 时 delegate 给 `figure.mount`（Figure 自持 config，call-site options 覆盖）。收
@@ -18,7 +16,7 @@ var DEFAULT_ID_PREFIX = "r";
 var mountSvg = (container, input, options = {}) => {
 	if (require_isFigure.isFigure(input)) return input.mount(container, options);
 	if (typeof Element === "undefined" || !(container instanceof Element)) throw new Error("mountSvg: container must be a DOM Element.");
-	const idPrefix = options.idPrefix ?? DEFAULT_ID_PREFIX;
+	const idPrefix = options.idPrefix ?? "r";
 	const root = document.createElementNS(SVG_NS, "svg");
 	const animate = options.animate !== false && !(0, _retikz_render_animation.prefersReducedMotion)();
 	let animationControls;
@@ -51,16 +49,13 @@ var mountSvg = (container, input, options = {}) => {
 	*   `data-retikz-animation-owner` 双查 `getAnimations()` per-id 控制。
 	*/
 	const hydrate = (hydrateOptions) => {
-		const buildContext = (event, id) => ({
-			id,
-			meta: (0, _retikz_render_hydration.metaOf)(currentScene, id),
+		const buildContext = (0, _retikz_render_hydration.createContextBuilder)({
 			renderer: "svg",
-			element: (0, _retikz_render_hydration.resolveSvgElement)(event),
 			root,
-			point: (0, _retikz_render_hydration.resolvePointViaLayout)(root, currentScene.layout)(event),
-			geometry: (0, _retikz_render_hydration.geometryOf)(currentScene, id),
-			animation: (0, _retikz_render_hydration.createSvgAnimationControls)(root, id),
-			scene: currentScene
+			scene: () => currentScene,
+			resolveElement: _retikz_render_hydration.resolveSvgElement,
+			resolvePoint: (event) => (0, _retikz_render_hydration.resolvePointViaLayout)(root, currentScene.layout)(event),
+			makeAnimation: (id) => (0, _retikz_render_hydration.createSvgAnimationControls)(root, id)
 		});
 		return { dispose: (0, _retikz_render_hydration.createHydrationController)(root, hydrateOptions.handlers, _retikz_render_hydration.locateSvg, buildContext).dispose };
 	};

package/dist/lib/mountSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountSvg.d.ts","sourceRoot":"","sources":["../../src/mountSvg.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAmC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMvG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,OAAO,EAAE,OAAO,WAAW,EAAE,UAAS,YAAiB,KAAG,WA4E7F,CAAC"}
+{"version":3,"file":"mountSvg.d.ts","sourceRoot":"","sources":["../../src/mountSvg.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAmC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAIvG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,OAAO,EAAE,OAAO,WAAW,EAAE,UAAS,YAAiB,KAAG,WAyE7F,CAAC"}

package/dist/lib/renderToSvgString.cjs

@@ -2,27 +2,22 @@ const require_isFigure = require("./builder/isFigure.cjs");
 const require_toScene = require("./toScene.cjs");
 let _retikz_render_svg = require("@retikz/render/svg");
 //#region src/renderToSvgString.ts
-/** 默认资源 id 前缀（确定性）；多实例同页须经 `options.idPrefix` 显式区分 */
-var DEFAULT_ID_PREFIX = "r";
-/** 把 `width`/`height` 注入到开头的 `<svg` 标签（@retikz/render/svg 只产 viewBox） */
-var injectSize = (svg, width, height) => {
-	if (width === void 0 && height === void 0) return svg;
-	const attrs = [width !== void 0 ? ` width="${width}"` : "", height !== void 0 ? ` height="${height}"` : ""].join("");
-	return svg.replace(/^<svg/, `<svg${attrs}`);
-};
 /**
 * 把 IR / Scene / Figure 渲染成 SVG 字符串（SSR / 构建期）
 * @description 收 `Figure` 时 delegate 给 `figure.toSvgString`。收 IR/Scene 时薄包 `@retikz/render/svg`：`toScene`
-*   （ir 缺省走 core fallback measurer、确定性）→ 序列化 → 若给 `width`/`height` 注入根 `<svg>`。零 DOM。
+*   （ir 缺省走 core fallback measurer、确定性）→ 序列化。`width`/`height` 直接透传给 render，由其结构化写进根
+*   `<svg>` attrs（不在本层对字符串做正则后处理）。零 DOM。
 */
 var renderToSvgString = (input, options = {}) => {
 	if (require_isFigure.isFigure(input)) return input.toSvgString(options);
-	return injectSize((0, _retikz_render_svg.renderToSvgString)(require_toScene.toScene(input, options), {
-		idPrefix: options.idPrefix ?? DEFAULT_ID_PREFIX,
+	return (0, _retikz_render_svg.renderToSvgString)(require_toScene.toScene(input, options), {
+		idPrefix: options.idPrefix ?? "r",
 		animate: options.animate,
 		snapshotAt: options.snapshotAt,
-		easings: options.easings
-	}), options.width, options.height);
+		easings: options.easings,
+		width: options.width,
+		height: options.height
+	});
 };
 //#endregion
 exports.renderToSvgString = renderToSvgString;

package/dist/lib/renderToSvgString.d.ts

@@ -2,7 +2,8 @@ import { RenderInput, RenderToStringOptions } from './types';
 /**
  * 把 IR / Scene / Figure 渲染成 SVG 字符串（SSR / 构建期）
  * @description 收 `Figure` 时 delegate 给 `figure.toSvgString`。收 IR/Scene 时薄包 `@retikz/render/svg`：`toScene`
- *   （ir 缺省走 core fallback measurer、确定性）→ 序列化 → 若给 `width`/`height` 注入根 `<svg>`。零 DOM。
+ *   （ir 缺省走 core fallback measurer、确定性）→ 序列化。`width`/`height` 直接透传给 render，由其结构化写进根
+ *   `<svg>` attrs（不在本层对字符串做正则后处理）。零 DOM。
  */
 export declare const renderToSvgString: (input: RenderInput, options?: RenderToStringOptions) => string;
 //# sourceMappingURL=renderToSvgString.d.ts.map

package/dist/lib/renderToSvgString.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderToSvgString.d.ts","sourceRoot":"","sources":["../../src/renderToSvgString.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAYlE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,EAAE,UAAS,qBAA0B,KAAG,MAS3F,CAAC"}
+{"version":3,"file":"renderToSvgString.d.ts","sourceRoot":"","sources":["../../src/renderToSvgString.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAElE;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,EAAE,UAAS,qBAA0B,KAAG,MAU3F,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retikz/vanilla",
-  "version": "0.3.0-alpha.5",
-  "description": "Framework-free runtime for retikz: mount Scene/IR to SVG DOM, or render to SVG string for SSR.",
+  "version": "0.3.0-beta.1",
+  "description": "Framework-free retikz runtime: mount SVG/Canvas, hydrate interactions, control animations, or render SVG strings for SSR.",
   "type": "module",
   "author": "Pionpill",
   "homepage": "https://pionpill.github.io/retikz/",
@@ -39,15 +39,14 @@
     "dist/**/*"
   ],
   "dependencies": {
-    "@retikz/core": "0.3.0-alpha.5",
-    "@retikz/render": "0.3.0-alpha.5"
+    "@retikz/core": "0.3.0-beta.1",
+    "@retikz/render": "0.3.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.5",
     "zod": "^3.23.8"
   },