@elyndra/svelte-frames 1.2.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@elyndra/svelte-frames",
+  "version": "1.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elyndra frames components for Svelte",
+  "keywords": [
+    "elyndra",
+    "ui",
+    "front-end",
+    "framework",
+    "scifi",
+    "sci-fi",
+    "science-fiction",
+    "svelte"
+  ],
+  "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": {
+    "svelte": "5.57.0"
+  },
+  "dependencies": {
+    "@elyndra/frames": "^1.2.0",
+    "@elyndra/svelte-animator": "^1.2.0",
+    "@elyndra/svelte-tools": "^1.2.0",
+    "@elyndra/tools": "^1.2.0",
+    "tslib": "2.8.1"
+  },
+  "scripts": {
+    "build": "tsc --noEmit -p tsconfig.json && svelte-check --tsconfig tsconfig.json --output machine"
+  }
+}

package/src/FrameBase/FrameBase.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { createFrame, type Frame, type FrameSettings } from '@elyndra/frames';
+  import { useAnimator } from '@elyndra/svelte-animator';
+  import { useUpdateEffect } from '@elyndra/svelte-tools';
+  import { cx } from '@elyndra/tools';
+  import { positionedStyleText, toStyleText } from '../internal/styles.js';
+  import type { FrameBaseProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameBaseProps = $props();
+
+  const getAnimator = useAnimator();
+  let svg: SVGSVGElement | null = $state(null);
+  let frame: Frame | null = null;
+  // Intentionally captures the initial settings object; updates flow through
+  // the `$effect` + `useUpdateEffect` below (Solid does the same).
+  // svelte-ignore state_referenced_locally
+  const settingsRef: { current: FrameSettings } = { current: props.settings };
+
+  $effect(() => {
+    Object.assign(settingsRef.current, props.settings, { animator: getAnimator?.()?.node });
+  });
+
+  $effect(() => {
+    // 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.
+    const animator = getAnimator?.();
+    void animator;
+
+    const target = svg;
+
+    if (!target) {
+      return;
+    }
+
+    frame = createFrame(target, settingsRef.current);
+
+    return () => frame?.remove();
+  });
+
+  // NOTE: animator changes must NOT join these deps. They are already handled
+  // above with full teardown + rebuild; adding them here would render() a
+  // just-removed frame. Settings changes take the light path only.
+  useUpdateEffect(() => {
+    frame?.render();
+  }, [() => props.settings]);
+
+  $effect(() => {
+    const target = svg;
+    const ref = props.elementRef;
+
+    if (typeof ref === 'function') {
+      ref(target);
+    } else if (ref) {
+      ref.current = target;
+    }
+  });
+
+  const styleText = $derived(toStyleText((props.positioned ?? true) ? positionedStyleText : undefined, props.style));
+</script>
+
+<svg
+  role="presentation"
+  bind:this={svg}
+  id={props.id}
+  class={cx('elyndra-frames-frame', props.className)}
+  style={styleText}
+  xmlns="http://www.w3.org/2000/svg"
+  preserveAspectRatio={props.preserveAspectRatio ?? 'none'}
+>
+  {@render props.children?.()}
+</svg>

package/src/FrameBase/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameBase } from './FrameBase.svelte';
+export type * from './types.js';

package/src/FrameBase/types.ts

@@ -0,0 +1,17 @@
+import type { FrameSettings } from '@elyndra/frames';
+import type { Snippet } from 'svelte';
+
+type ElementRef<E> = ((element: E | null) => void) | { current: E | null };
+
+type FrameBaseProps = {
+  elementRef?: ElementRef<SVGSVGElement>;
+  positioned?: boolean;
+  settings: FrameSettings;
+  className?: string;
+  style?: string | Record<string, string | number | undefined>;
+  preserveAspectRatio?: string;
+  id?: string;
+  children?: Snippet;
+};
+
+export type { FrameBaseProps };

package/src/FrameCircle/FrameCircle.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { createFrameCircleSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameCircleProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameCircleProps = $props();
+
+  const settings = $derived.by(() =>
+    createFrameCircleSettings({
+      styled: props.styled,
+      animated: props.animated,
+      padding: props.padding,
+      strokeWidth: props.strokeWidth,
+      separation: props.separation,
+      sideWidth: props.sideWidth,
+    }),
+  );
+</script>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-framecircle', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameCircle/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameCircle } from './FrameCircle.svelte';
+export type * from './types.js';

package/src/FrameCircle/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameCircleSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameCircleProps = Omit<FrameBaseProps, 'settings'> & CreateFrameCircleSettingsProps;
+
+export type { FrameCircleProps };

package/src/FrameCorners/FrameCorners.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createFrameCornersSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameCornersProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameCornersProps = $props();
+
+  const settings = $derived.by(() =>
+    createFrameCornersSettings({
+      styled: props.styled,
+      animated: props.animated,
+      padding: props.padding,
+      strokeWidth: props.strokeWidth,
+      cornerLength: props.cornerLength,
+    }),
+  );
+</script>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-framecorners', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameCorners/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameCorners } from './FrameCorners.svelte';
+export type * from './types.js';

package/src/FrameCorners/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameCornersSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameCornersProps = Omit<FrameBaseProps, 'settings'> & CreateFrameCornersSettingsProps;
+
+export type { FrameCornersProps };

package/src/FrameHeader/FrameHeader.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { createFrameHeaderSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameHeaderProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameHeaderProps = $props();
+
+  const settings = $derived.by(() =>
+    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>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-frameheader', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameHeader/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameHeader } from './FrameHeader.svelte';
+export type * from './types.js';

package/src/FrameHeader/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameHeaderSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameHeaderProps = Omit<FrameBaseProps, 'settings'> & CreateFrameHeaderSettingsProps;
+
+export type { FrameHeaderProps };

package/src/FrameKranox/FrameKranox.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { createFrameKranoxSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameKranoxProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameKranoxProps = $props();
+
+  const settings = $derived.by(() =>
+    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>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-framekranox', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameKranox/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameKranox } from './FrameKranox.svelte';
+export type * from './types.js';

package/src/FrameKranox/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameKranoxSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameKranoxProps = Omit<FrameBaseProps, 'settings'> & CreateFrameKranoxSettingsProps;
+
+export type { FrameKranoxProps };

package/src/FrameLines/FrameLines.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { createFrameLinesSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameLinesProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameLinesProps = $props();
+
+  const settings = $derived.by(() =>
+    createFrameLinesSettings({
+      styled: props.styled,
+      animated: props.animated,
+      padding: props.padding,
+      largeLineWidth: props.largeLineWidth,
+      smallLineWidth: props.smallLineWidth,
+      smallLineLength: props.smallLineLength,
+    }),
+  );
+</script>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-framelines', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameLines/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameLines } from './FrameLines.svelte';
+export type * from './types.js';

package/src/FrameLines/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameLinesSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameLinesProps = Omit<FrameBaseProps, 'settings'> & CreateFrameLinesSettingsProps;
+
+export type { FrameLinesProps };

package/src/FrameNefrex/FrameNefrex.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { createFrameNefrexSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameNefrexProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameNefrexProps = $props();
+
+  const settings = $derived.by(() =>
+    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>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-framenefrex', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameNefrex/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameNefrex } from './FrameNefrex.svelte';
+export type * from './types.js';

package/src/FrameNefrex/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameNefrexSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameNefrexProps = Omit<FrameBaseProps, 'settings'> & CreateFrameNefrexSettingsProps;
+
+export type { FrameNefrexProps };

package/src/FrameNero/FrameNero.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createFrameNeroSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameNeroProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameNeroProps = $props();
+
+  const settings = $derived.by(() =>
+    createFrameNeroSettings({
+      styled: props.styled,
+      animated: props.animated,
+      padding: props.padding,
+      cornerLength: props.cornerLength,
+      cornerWidth: props.cornerWidth,
+    }),
+  );
+</script>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-framenero', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameNero/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameNero } from './FrameNero.svelte';
+export type * from './types.js';

package/src/FrameNero/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameNeroSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameNeroProps = Omit<FrameBaseProps, 'settings'> & CreateFrameNeroSettingsProps;
+
+export type { FrameNeroProps };

package/src/FrameOctagon/FrameOctagon.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { createFrameOctagonSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameOctagonProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameOctagonProps = $props();
+
+  const settings = $derived.by(() =>
+    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>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-frameoctagon', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameOctagon/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameOctagon } from './FrameOctagon.svelte';
+export type * from './types.js';

package/src/FrameOctagon/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameOctagonSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameOctagonProps = Omit<FrameBaseProps, 'settings'> & CreateFrameOctagonSettingsProps;
+
+export type { FrameOctagonProps };

package/src/FrameUnderline/FrameUnderline.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { createFrameUnderlineSettings } from '@elyndra/frames';
+  import { cx } from '@elyndra/tools';
+  import FrameBase from '../FrameBase/FrameBase.svelte';
+  import type { FrameUnderlineProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: FrameUnderlineProps = $props();
+
+  const settings = $derived.by(() =>
+    createFrameUnderlineSettings({
+      styled: props.styled,
+      squareSize: props.squareSize,
+      strokeWidth: props.strokeWidth,
+      padding: props.padding,
+    }),
+  );
+</script>
+
+<FrameBase
+  elementRef={props.elementRef}
+  positioned={props.positioned}
+  {settings}
+  className={cx('elyndra-frames-frameunderline', props.className)}
+  style={props.style}
+  preserveAspectRatio={props.preserveAspectRatio}
+  id={props.id}
+>
+  {@render props.children?.()}
+</FrameBase>

package/src/FrameUnderline/FrameUnderline.test.ts

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/svelte';
+import type { Component } from 'svelte';
+import { afterEach, beforeEach, expect, test } from 'vitest';
+import FrameUnderline from './FrameUnderline.svelte';
+
+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;
+});
+
+// `.svelte` components are `unknown` in-repo (ambient decl, tests only).
+const frameUnderline = FrameUnderline as Component;
+
+test('Should render svg element with elyndra classes', () => {
+  const { container } = render(frameUnderline);
+  const element = container.querySelector('svg') as Element;
+  expect(element.tagName).toBe('svg');
+  expect(element.classList.contains('elyndra-frames-frame')).toBe(true);
+  expect(element.classList.contains('elyndra-frames-frameunderline')).toBe(true);
+});

package/src/FrameUnderline/index.ts

@@ -0,0 +1,2 @@
+export { default as FrameUnderline } from './FrameUnderline.svelte';
+export type * from './types.js';

package/src/FrameUnderline/types.ts

@@ -0,0 +1,6 @@
+import type { CreateFrameUnderlineSettingsProps } from '@elyndra/frames';
+import type { FrameBaseProps } from '../FrameBase/index.js';
+
+type FrameUnderlineProps = Omit<FrameBaseProps, 'settings'> & CreateFrameUnderlineSettingsProps;
+
+export type { FrameUnderlineProps };

package/src/index.ts

@@ -0,0 +1,11 @@
+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';

package/src/internal/styles.ts

@@ -0,0 +1,54 @@
+type StyleValue = string | number | undefined;
+type StyleInput = string | Record<string, StyleValue> | undefined;
+
+const toKebabCase = (key: string): string => key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+
+const stringifyStyleObject = (style: Record<string, StyleValue>): string => {
+  const parts: string[] = [];
+
+  for (const [key, value] of Object.entries(style)) {
+    if (value === undefined || value === null || value === '') {
+      continue;
+    }
+
+    parts.push(`${toKebabCase(key)}: ${value}`);
+  }
+
+  return parts.join('; ');
+};
+
+/**
+ * Serializes Svelte `style` props to CSS text. Accepts the React-style
+ * object (camelCase keys) for API parity plus plain CSS strings.
+ */
+const toStyleText = (...styles: StyleInput[]): string | undefined => {
+  const parts: string[] = [];
+
+  for (const style of styles) {
+    if (!style) {
+      continue;
+    }
+
+    if (typeof style === 'string') {
+      const trimmed = style.trim().replace(/;$/, '');
+
+      if (trimmed) {
+        parts.push(trimmed);
+      }
+    } else {
+      const text = stringifyStyleObject(style);
+
+      if (text) {
+        parts.push(text);
+      }
+    }
+  }
+
+  return parts.length ? parts.join('; ') : undefined;
+};
+
+const positionedStyleText =
+  'position: absolute; inset: 0; display: block; border: 0; margin: 0; padding: 0; width: 100%; height: 100%';
+
+export { positionedStyleText, toStyleText };
+export type { StyleInput };

package/src/svelte.d.ts

@@ -0,0 +1,7 @@
+// In-repo ambient types for `.svelte` imports (tests only). The published
+// package ships the `.svelte` sources and consumers get full prop inference
+// from the `$props()` interfaces via their own Svelte setup.
+declare module '*.svelte' {
+  const Component: unknown;
+  export default Component;
+}

package/src/useFrameAssembler/index.ts

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

package/src/useFrameAssembler/useFrameAssembler.svelte.ts

@@ -0,0 +1,55 @@
+import { animateFrameAssembler } from '@elyndra/frames';
+import { useAnimator } from '@elyndra/svelte-animator';
+import type { AnimationPlaybackControlsWithThen } from 'motion';
+
+/**
+ * Mechanical Svelte port of the React/Preact `useFrameAssembler` hook. The
+ * element is an accessor so it stays tracked (same convention as
+ * `Animator`'s `refreshOn`); `$effect` + cleanup replace `useEffect`.
+ * Must be called during component init.
+ */
+const useFrameAssembler = (svg: () => SVGElement | HTMLElement | null | undefined): void => {
+  const getAnimator = useAnimator();
+
+  $effect(() => {
+    const animator = getAnimator?.();
+    const container = svg();
+
+    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;
+        }
+      }
+    });
+
+    return () => {
+      animation?.cancel();
+      unsubscribe();
+    };
+  });
+};
+
+export { useFrameAssembler };