@elyndra/vue-frames 1.2.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@elyndra/vue-frames",
+  "version": "1.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elyndra frames components for Vue",
+  "keywords": [
+    "elyndra",
+    "ui",
+    "front-end",
+    "framework",
+    "scifi",
+    "sci-fi",
+    "science-fiction",
+    "vue"
+  ],
+  "homepage": "https://elyndra.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gabox301/elyndra.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Gabox301/elyndra/issues"
+  },
+  "funding": "https://github.com/sponsors/romelperez",
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "types": "./src/index.ts",
+  "module": "./src/index.ts",
+  "main": "./src/index.ts",
+  "peerDependencies": {
+    "vue": "3"
+  },
+  "dependencies": {
+    "@elyndra/frames": "^1.2.0",
+    "@elyndra/tools": "^1.2.0",
+    "@elyndra/vue-animator": "^1.2.0",
+    "@elyndra/vue-tools": "^1.2.0",
+    "tslib": "2.8.1"
+  },
+  "scripts": {
+    "build": "tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/FrameBase/FrameBase.test.ts

@@ -0,0 +1,31 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { afterEach, beforeEach, expect, test } from 'vitest';
+import { createFrameOctagonSettings } from '@elyndra/frames';
+import { FrameBase } from './index.js';
+
+beforeEach(() => {
+  class ResizeObserver {
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+  }
+  window.ResizeObserver = ResizeObserver as unknown as typeof window.ResizeObserver;
+});
+
+afterEach(() => {
+  window.ResizeObserver = undefined as unknown as typeof window.ResizeObserver;
+});
+
+test('Should render svg element with elyndra class and children', async () => {
+  const wrapper = mount(FrameBase, {
+    props: { settings: createFrameOctagonSettings({}) },
+    slots: { default: () => 'hello' },
+  });
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('svg');
+  expect(element.classList.contains('elyndra-frames-frame')).toBe(true);
+  expect(element.textContent).toBe('hello');
+  wrapper.unmount();
+});

package/src/FrameBase/FrameBase.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { type Frame, type FrameSettings, createFrame } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { useAnimator } from '@elyndra/vue-animator';
+import { mergeRefs, useUpdateEffect } from '@elyndra/vue-tools';
+import { computed, watch, watchEffect, type CSSProperties } from 'vue';
+import { positionedStyle } from '../internal/styles.js';
+import type { FrameBaseProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameBaseProps>(), {
+  // Vue boolean-casts absent props with a Boolean type to `false`.
+  // `positioned` defaults to `true`, so it gets an `undefined` default
+  // which skips the cast.
+  positioned: undefined,
+  preserveAspectRatio: 'none',
+});
+
+const getAnimator = useAnimator();
+const svgBox: { current: SVGSVGElement | null } = { current: null };
+let frame: Frame | null = null;
+const settingsRef: { current: FrameSettings } = { current: props.settings };
+
+const setSvgRef = (value: unknown): void => {
+  const element = value as SVGSVGElement | null;
+  svgBox.current = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watchEffect(() => {
+  Object.assign(settingsRef.current, props.settings, { animator: getAnimator?.()?.node });
+});
+
+watch(
+  () => getAnimator?.(),
+  (animator, _previous, onCleanup) => {
+    // Rebuild the frame when the animator interface changes, full teardown +
+    // rebuild. Settings-only changes take the light path below, so animator
+    // changes must NOT join those deps or they would render() a
+    // just-removed frame.
+    void animator;
+
+    const svg = svgBox.current;
+
+    if (!svg) {
+      return;
+    }
+
+    frame = createFrame(svg, settingsRef.current);
+
+    onCleanup(() => frame?.remove());
+  },
+  { immediate: true, flush: 'post' },
+);
+
+useUpdateEffect(() => {
+  frame?.render();
+}, [() => props.settings]);
+
+const svgStyle = computed<CSSProperties>(() => ({
+  ...((props.positioned ?? true) ? positionedStyle : null),
+  ...props.style,
+}));
+</script>
+
+<template>
+  <svg
+    role="presentation"
+    :ref="setSvgRef"
+    :class="cx('elyndra-frames-frame', props.className)"
+    :style="svgStyle"
+    xmlns="http://www.w3.org/2000/svg"
+    :preserveAspectRatio="props.preserveAspectRatio"
+  >
+    <slot />
+  </svg>
+</template>

package/src/FrameBase/index.ts

@@ -0,0 +1 @@
+export { default as FrameBase } from './FrameBase.vue';

package/src/FrameCircle/FrameCircle.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { createFrameCircleSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameCircleProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameCircleProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameCircleSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    strokeWidth: props.strokeWidth,
+    separation: props.separation,
+    sideWidth: props.sideWidth,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-framecircle', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameCircle/index.ts

@@ -0,0 +1 @@
+export { default as FrameCircle } from './FrameCircle.vue';

package/src/FrameCorners/FrameCorners.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { createFrameCornersSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameCornersProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameCornersProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameCornersSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    strokeWidth: props.strokeWidth,
+    cornerLength: props.cornerLength,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-framecorners', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameCorners/index.ts

@@ -0,0 +1 @@
+export { default as FrameCorners } from './FrameCorners.vue';

package/src/FrameHeader/FrameHeader.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { createFrameHeaderSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameHeaderProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameHeaderProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameHeaderSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    strokeWidth: props.strokeWidth,
+    decoWidth: props.decoWidth,
+    direction: props.direction,
+    align: props.align,
+    contentLength: props.contentLength,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-frameheader', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameHeader/index.ts

@@ -0,0 +1 @@
+export { default as FrameHeader } from './FrameHeader.vue';

package/src/FrameKranox/FrameKranox.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { createFrameKranoxSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameKranoxProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameKranoxProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameKranoxSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    strokeWidth: props.strokeWidth,
+    bgStrokeWidth: props.bgStrokeWidth,
+    squareSize: props.squareSize,
+    smallLineLength: props.smallLineLength,
+    largeLineLength: props.largeLineLength,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-framekranox', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameKranox/index.ts

@@ -0,0 +1 @@
+export { default as FrameKranox } from './FrameKranox.vue';

package/src/FrameLines/FrameLines.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { createFrameLinesSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameLinesProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameLinesProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameLinesSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    largeLineWidth: props.largeLineWidth,
+    smallLineWidth: props.smallLineWidth,
+    smallLineLength: props.smallLineLength,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-framelines', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameLines/index.ts

@@ -0,0 +1 @@
+export { default as FrameLines } from './FrameLines.vue';

package/src/FrameNefrex/FrameNefrex.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { createFrameNefrexSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameNefrexProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameNefrexProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameNefrexSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    leftTop: props.leftTop,
+    leftBottom: props.leftBottom,
+    rightTop: props.rightTop,
+    rightBottom: props.rightBottom,
+    squareSize: props.squareSize,
+    strokeWidth: props.strokeWidth,
+    smallLineLength: props.smallLineLength,
+    largeLineLength: props.largeLineLength,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-framenefrex', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameNefrex/index.ts

@@ -0,0 +1 @@
+export { default as FrameNefrex } from './FrameNefrex.vue';

package/src/FrameNero/FrameNero.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { createFrameNeroSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameNeroProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameNeroProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameNeroSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    cornerLength: props.cornerLength,
+    cornerWidth: props.cornerWidth,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-framenero', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameNero/index.ts

@@ -0,0 +1 @@
+export { default as FrameNero } from './FrameNero.vue';

package/src/FrameOctagon/FrameOctagon.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { createFrameOctagonSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameOctagonProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameOctagonProps>(), {
+  // The vanilla settings default `styled`/`animated` to `true`; Vue
+  // boolean-casts absent Boolean props to `false`, so each gets an
+  // `undefined` default which skips the cast. Same for `positioned`.
+  styled: undefined,
+  animated: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameOctagonSettings({
+    styled: props.styled,
+    animated: props.animated,
+    padding: props.padding,
+    leftTop: props.leftTop,
+    rightTop: props.rightTop,
+    rightBottom: props.rightBottom,
+    leftBottom: props.leftBottom,
+    squareSize: props.squareSize,
+    strokeWidth: props.strokeWidth,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-frameoctagon', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameOctagon/index.ts

@@ -0,0 +1 @@
+export { default as FrameOctagon } from './FrameOctagon.vue';

package/src/FrameUnderline/FrameUnderline.test.ts

@@ -0,0 +1,27 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { afterEach, beforeEach, expect, test } from 'vitest';
+import { FrameUnderline } from './index.js';
+
+beforeEach(() => {
+  class ResizeObserver {
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+  }
+  window.ResizeObserver = ResizeObserver as unknown as typeof window.ResizeObserver;
+});
+
+afterEach(() => {
+  window.ResizeObserver = undefined as unknown as typeof window.ResizeObserver;
+});
+
+test('Should render svg element with elyndra classes', async () => {
+  const wrapper = mount(FrameUnderline);
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('svg');
+  expect(element.classList.contains('elyndra-frames-frame')).toBe(true);
+  expect(element.classList.contains('elyndra-frames-frameunderline')).toBe(true);
+  wrapper.unmount();
+});

package/src/FrameUnderline/FrameUnderline.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { createFrameUnderlineSettings } from '@elyndra/frames';
+import { cx } from '@elyndra/tools';
+import { computed } from 'vue';
+import { FrameBase } from '../FrameBase/index.js';
+import type { FrameUnderlineProps } from '../types.js';
+
+const props = withDefaults(defineProps<FrameUnderlineProps>(), {
+  // The vanilla settings default `styled` to `true`; Vue boolean-casts
+  // absent Boolean props to `false`, so it gets an `undefined` default
+  // which skips the cast. Same for `positioned`. (`animated` is accepted
+  // by vanilla but intentionally not forwarded, same as React/Solid.)
+  styled: undefined,
+  positioned: undefined,
+});
+
+const settings = computed(() =>
+  createFrameUnderlineSettings({
+    styled: props.styled,
+    squareSize: props.squareSize,
+    strokeWidth: props.strokeWidth,
+    padding: props.padding,
+  }),
+);
+</script>
+
+<template>
+  <FrameBase
+    :elementRef="props.elementRef"
+    :positioned="props.positioned"
+    :style="props.style"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="cx('elyndra-frames-frameunderline', props.className)"
+    :settings="settings"
+  >
+    <slot />
+  </FrameBase>
+</template>

package/src/FrameUnderline/index.ts

@@ -0,0 +1 @@
+export { default as FrameUnderline } from './FrameUnderline.vue';

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from './FrameBase/index.js';
+export * from './FrameCircle/index.js';
+export * from './FrameCorners/index.js';
+export * from './FrameHeader/index.js';
+export * from './FrameKranox/index.js';
+export * from './FrameLines/index.js';
+export * from './FrameNefrex/index.js';
+export * from './FrameNero/index.js';
+export * from './FrameOctagon/index.js';
+export * from './FrameUnderline/index.js';
+export * from './useFrameAssembler/index.js';
+export type * from './types.js';

package/src/internal/styles.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'vue';
+
+export const positionedStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  display: 'block',
+  border: 0,
+  margin: 0,
+  padding: 0,
+  width: '100%',
+  height: '100%',
+};

package/src/types.ts

@@ -0,0 +1,47 @@
+import type { CSSProperties } from 'vue';
+import type {
+  CreateFrameCircleSettingsProps,
+  CreateFrameCornersSettingsProps,
+  CreateFrameHeaderSettingsProps,
+  CreateFrameKranoxSettingsProps,
+  CreateFrameLinesSettingsProps,
+  CreateFrameNefrexSettingsProps,
+  CreateFrameNeroSettingsProps,
+  CreateFrameOctagonSettingsProps,
+  CreateFrameUnderlineSettingsProps,
+  FrameSettings,
+} from '@elyndra/frames';
+import type { ElementRef } from '@elyndra/vue-tools';
+
+type FrameBaseProps = {
+  elementRef?: ElementRef<SVGSVGElement>;
+  positioned?: boolean;
+  settings: FrameSettings;
+  className?: string;
+  style?: CSSProperties;
+  preserveAspectRatio?: string;
+};
+
+type FrameCircleProps = Omit<FrameBaseProps, 'settings'> & CreateFrameCircleSettingsProps;
+type FrameCornersProps = Omit<FrameBaseProps, 'settings'> & CreateFrameCornersSettingsProps;
+type FrameHeaderProps = Omit<FrameBaseProps, 'settings'> & CreateFrameHeaderSettingsProps;
+type FrameKranoxProps = Omit<FrameBaseProps, 'settings'> & CreateFrameKranoxSettingsProps;
+type FrameLinesProps = Omit<FrameBaseProps, 'settings'> & CreateFrameLinesSettingsProps;
+type FrameNefrexProps = Omit<FrameBaseProps, 'settings'> & CreateFrameNefrexSettingsProps;
+type FrameNeroProps = Omit<FrameBaseProps, 'settings'> & CreateFrameNeroSettingsProps;
+type FrameOctagonProps = Omit<FrameBaseProps, 'settings'> & CreateFrameOctagonSettingsProps;
+type FrameUnderlineProps = Omit<FrameBaseProps, 'settings'> & CreateFrameUnderlineSettingsProps;
+
+export type {
+  ElementRef,
+  FrameBaseProps,
+  FrameCircleProps,
+  FrameCornersProps,
+  FrameHeaderProps,
+  FrameKranoxProps,
+  FrameLinesProps,
+  FrameNefrexProps,
+  FrameNeroProps,
+  FrameOctagonProps,
+  FrameUnderlineProps,
+};

package/src/useFrameAssembler/index.ts

@@ -0,0 +1 @@
+export * from './useFrameAssembler.js';

package/src/useFrameAssembler/useFrameAssembler.test.ts

@@ -0,0 +1,40 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent, h, ref } from 'vue';
+import { expect, test } from 'vitest';
+import { Animator } from '@elyndra/vue-animator';
+import { useFrameAssembler } from './index.js';
+
+const flush = async (): Promise<void> => {
+  await flushPromises();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await flushPromises();
+};
+
+test('Should subscribe to the animator without throwing', async () => {
+  const svgBox = { current: null as SVGSVGElement | null };
+
+  const Harness = defineComponent({
+    setup() {
+      const svg = ref<SVGSVGElement | null>(null);
+      useFrameAssembler(() => svg.value);
+      return () =>
+        h('svg', {
+          ref: (value: unknown) => {
+            const element = value as SVGSVGElement | null;
+            svg.value = element;
+            svgBox.current = element;
+          },
+        });
+    },
+  });
+
+  const wrapper = mount(Animator, {
+    props: { reducedMotion: true },
+    slots: { default: () => h(Harness) },
+  });
+  await flush();
+
+  expect(svgBox.current).not.toBeNull();
+  expect(svgBox.current?.tagName).toBe('svg');
+  wrapper.unmount();
+});

package/src/useFrameAssembler/useFrameAssembler.ts

@@ -0,0 +1,57 @@
+import { animateFrameAssembler } from '@elyndra/frames';
+import { useAnimator } from '@elyndra/vue-animator';
+import type { AnimationPlaybackControlsWithThen } from 'motion';
+import { watch } from 'vue';
+
+/**
+ * Mechanical Vue port of the React/Preact/Solid `useFrameAssembler` hook.
+ * The element is a source function so it stays tracked (same convention as
+ * `Animator`'s `refreshOn`); `watch` + `watch` cleanup replace
+ * `useEffect`/`createEffect` + `onCleanup`. Must be called inside `setup`.
+ */
+const useFrameAssembler = (svg: () => SVGElement | HTMLElement | null | undefined): void => {
+  const getAnimator = useAnimator();
+
+  watch(
+    () => [getAnimator?.(), svg()] as const,
+    ([animator, container], _previous, onCleanup) => {
+      if (!animator || !container) {
+        return;
+      }
+
+      let animation: AnimationPlaybackControlsWithThen | undefined;
+
+      const unsubscribe = animator.node.subscribe((node) => {
+        switch (node.state) {
+          case 'entering': {
+            animation?.cancel();
+            animation = animateFrameAssembler({
+              element: container,
+              duration: node.settings.duration.enter,
+              isEntering: true,
+            });
+            break;
+          }
+
+          case 'exiting': {
+            animation?.cancel();
+            animation = animateFrameAssembler({
+              element: container,
+              duration: node.settings.duration.exit,
+              isEntering: false,
+            });
+            break;
+          }
+        }
+      });
+
+      onCleanup(() => {
+        animation?.cancel();
+        unsubscribe();
+      });
+    },
+    { immediate: true, flush: 'post' },
+  );
+};
+
+export { useFrameAssembler };

package/src/vue.d.ts

@@ -0,0 +1,8 @@
+// In-repo ambient types for `.vue` imports (tests only). The published
+// package ships the `.vue` sources and consumers get full prop inference
+// from their own Vue setup.
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const Component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default Component;
+}