@elyndra/svelte-effects 1.2.0

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@elyndra/svelte-effects",
+  "version": "1.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elyndra effects 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/effects": "^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/Illuminator/Illuminator.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { createEffectIlluminator } from '@elyndra/effects';
+  import { cx } from '@elyndra/tools';
+  import { toStyleText } from '../internal/style.js';
+  import type { IlluminatorProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: IlluminatorProps = $props();
+
+  let container: HTMLDivElement | null = $state(null);
+
+  $effect(() => {
+    const color = props.color;
+    const size = props.size;
+    const target = container;
+
+    if (!target) {
+      return;
+    }
+
+    const illuminator = createEffectIlluminator({ container: target, color, size });
+
+    return () => illuminator.cancel();
+  });
+
+  $effect(() => {
+    const target = container;
+    const ref = props.elementRef;
+
+    if (typeof ref === 'function') {
+      ref(target);
+    } else if (ref) {
+      ref.current = target;
+    }
+  });
+
+  const styleText = $derived(
+    toStyleText(
+      {
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden',
+        width: '100%',
+        height: '100%',
+      },
+      props.style,
+    ),
+  );
+</script>
+
+<div
+  bind:this={container}
+  role="presentation"
+  id={props.id}
+  class={cx('elyndra-frames-illuminator', props.className)}
+  style={styleText}
+>
+  {@render props.children?.()}
+</div>

package/src/Illuminator/Illuminator.test.ts

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/svelte';
+import type { Component } from 'svelte';
+import { expect, test } from 'vitest';
+import Illuminator from './Illuminator.svelte';
+
+// `.svelte` components are `unknown` in-repo (ambient decl, tests only).
+const illuminator = Illuminator as Component;
+
+test('Should render div element with elyndra class', () => {
+  const { container } = render(illuminator, { color: 'cyan', size: 300 });
+  const element = container.querySelector('div') as HTMLElement;
+  expect(element.tagName).toBe('DIV');
+  expect(element.classList.contains('elyndra-frames-illuminator')).toBe(true);
+});

package/src/Illuminator/index.ts

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

package/src/Illuminator/types.ts

@@ -0,0 +1,14 @@
+import type { CreateEffectIlluminatorProps } from '@elyndra/effects';
+import type { Snippet } from 'svelte';
+
+type ElementRef<E> = ((element: E | null) => void) | { current: E | null };
+
+interface IlluminatorProps extends Omit<CreateEffectIlluminatorProps, 'container' | 'className' | 'style'> {
+  elementRef?: ElementRef<HTMLDivElement>;
+  className?: string;
+  style?: string | Record<string, string | number | undefined>;
+  id?: string;
+  children?: Snippet;
+}
+
+export type { IlluminatorProps };

package/src/IlluminatorSVG/IlluminatorSVG.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { createEffectIlluminatorSVG } from '@elyndra/effects';
+  import { cx } from '@elyndra/tools';
+  import { toStyleText } from '../internal/style.js';
+  import type { IlluminatorSVGProps } from './types.js';
+
+  // No destructured rest: only direct `props.*` reads stay reactive.
+  const props: IlluminatorSVGProps = $props();
+
+  let container: SVGGElement | null = $state(null);
+
+  $effect(() => {
+    const size = props.size;
+    const color = props.color;
+    const svg = props.svgRef.current;
+    const target = container;
+
+    if (!svg || !target) {
+      return;
+    }
+
+    const effect = createEffectIlluminatorSVG({ svg, container: target, size, color });
+
+    return () => effect.cancel();
+  });
+
+  $effect(() => {
+    const target = container;
+    const ref = props.elementRef;
+
+    if (typeof ref === 'function') {
+      ref(target);
+    } else if (ref) {
+      ref.current = target;
+    }
+  });
+
+  const styleText = $derived(toStyleText({ pointerEvents: 'none' }, props.style));
+</script>
+
+<g
+  bind:this={container}
+  class={cx('elyndra-frames-illuminatorsvg', props.className)}
+  style={styleText}
+>
+  {@render props.children?.()}
+</g>

package/src/IlluminatorSVG/IlluminatorSVG.test.ts

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/svelte';
+import type { Component } from 'svelte';
+import { expect, test } from 'vitest';
+import IlluminatorSVG from './IlluminatorSVG.svelte';
+
+// `.svelte` components are `unknown` in-repo (ambient decl, tests only).
+const illuminatorSVG = IlluminatorSVG as Component;
+
+test('Should render g element with elyndra class', () => {
+  const svgRef: { current: SVGSVGElement | null } = { current: null };
+  const { container } = render(illuminatorSVG, { color: 'cyan', size: 300, svgRef });
+  const element = container.querySelector('g') as Element;
+  expect(element.tagName).toBe('g');
+  expect(element.classList.contains('elyndra-frames-illuminatorsvg')).toBe(true);
+});

package/src/IlluminatorSVG/index.ts

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

package/src/IlluminatorSVG/types.ts

@@ -0,0 +1,17 @@
+import type { CreateEffectIlluminatorSVGProps } from '@elyndra/effects';
+import type { Snippet } from 'svelte';
+
+type ElementRef<E> = ((element: E | null) => void) | { current: E | null };
+
+interface IlluminatorSVGProps
+  extends Omit<CreateEffectIlluminatorSVGProps, 'svg' | 'container' | 'className' | 'style'> {
+  elementRef?: ElementRef<SVGGElement>;
+  svgRef: { current: SVGSVGElement | null };
+  className?: string;
+  style?: string | Record<string, string | number | undefined>;
+  color?: string;
+  size?: number;
+  children?: Snippet;
+}
+
+export type { IlluminatorSVGProps };

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Illuminator/index.js';
+export * from './IlluminatorSVG/index.js';

package/src/internal/style.ts

@@ -0,0 +1,51 @@
+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;
+};
+
+export { 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;
+}