@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/ambient/DataStream.svelte

@@ -1,94 +1,117 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import { onMount } from 'svelte';
-
-  interface Props {
-    /** Enable the scrolling animation. */
-    active?: boolean;
-    /** Width of the stream column. */
-    width?: string;
-    /** Scroll speed. */
-    speed?: 'slow' | 'medium';
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    active = true,
-    width = '1.2rem',
-    speed = 'slow',
-    class: className = '',
-  }: Props = $props();
-
-  const chars = '0123456789ABCDEF.:+-';
-  const lineCount = 32;
-  let lines = $state<string[]>([]);
-  let intervalId: ReturnType<typeof setInterval> | undefined;
-
-  const prefersReduced =
-    typeof window !== 'undefined'
-      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-      : false;
-
-  function randomChar(): string {
-    return chars[Math.floor(Math.random() * chars.length)];
-  }
-
-  function generateLines(): string[] {
-    return Array.from({ length: lineCount }, () => randomChar());
-  }
-
-  onMount(() => {
-    lines = generateLines();
-
-    if (active && !prefersReduced) {
-      const ms = speed === 'slow' ? 600 : 350;
-      intervalId = setInterval(() => {
-        lines = [randomChar(), ...lines.slice(0, lineCount - 1)];
-      }, ms);
-    }
-
-    return () => {
-      if (intervalId) clearInterval(intervalId);
-    };
-  });
-</script>
-
-<div
-  class={cn('hyvui-data-stream', className)}
-  style:width={width}
-  aria-hidden="true"
->
-  {#each lines as char, i}
-    <span
-      class="hyvui-data-stream-char"
-      style:opacity={0.18 - (i / lineCount) * 0.14}
-    >{char}</span>
-  {/each}
-</div>
-
-<style>
-  .hyvui-data-stream {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-family: var(--font-mono);
-    font-size: 0.6rem;
-    line-height: 1.4;
-    letter-spacing: 0.1em;
-    color: var(--accent);
-    pointer-events: none;
-    overflow: hidden;
-  }
-
-  .hyvui-data-stream-char {
-    display: block;
-    transition: opacity 0.3s ease-out;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-data-stream-char {
-      transition: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { onMount } from 'svelte';
+
+	/**
+	 * Decorative scrolling hex character column. Renders `aria-hidden`.
+	 * @example
+	 * <DataStream width="1.4rem" speed="slow" />
+	 * <DataStream active={isConnected} />
+	 */
+	interface Props {
+		/** Enable the scrolling animation. */
+		active?: boolean;
+		/** Width of the stream column. */
+		width?: string;
+		/** Scroll speed. */
+		speed?: 'slow' | 'medium';
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { active = true, width = '1.2rem', speed = 'slow', class: className = '' }: Props = $props();
+
+	const chars = '0123456789ABCDEF.:+-';
+	const lineCount = 32;
+	let rootEl: HTMLDivElement | undefined = $state();
+	let visible = $state(true);
+	let lines = $state<string[]>([]);
+	let intervalId: ReturnType<typeof setInterval> | undefined;
+
+	const prefersReduced =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	function randomChar(): string {
+		return chars[Math.floor(Math.random() * chars.length)];
+	}
+
+	function generateLines(): string[] {
+		return Array.from({ length: lineCount }, () => randomChar());
+	}
+
+	function stop() {
+		if (!intervalId) return;
+		clearInterval(intervalId);
+		intervalId = undefined;
+	}
+
+	function start() {
+		stop();
+		if (!active || prefersReduced || !visible) return;
+		const ms = speed === 'slow' ? 600 : 350;
+		intervalId = setInterval(() => {
+			// Unkeyed each blocks update in-place, so this is stable DOM churn.
+			lines = [randomChar(), ...lines.slice(0, lineCount - 1)];
+		}, ms);
+	}
+
+	onMount(() => {
+		lines = generateLines();
+
+		const io = new IntersectionObserver(
+			(entries) => {
+				const entry = entries[0];
+				if (!entry) return;
+				visible = entry.isIntersecting;
+			},
+			{ root: null, threshold: 0 }
+		);
+
+		if (rootEl) io.observe(rootEl);
+
+		return () => {
+			io.disconnect();
+			stop();
+		};
+	});
+
+	$effect(() => {
+		// Restart interval when relevant inputs change.
+		start();
+		return stop;
+	});
+</script>
+
+<div bind:this={rootEl} class={cn('hyvui-data-stream', className)} style:width aria-hidden="true">
+	{#each lines as char, i}
+		<span class="hyvui-data-stream-char" style:opacity={0.18 - (i / lineCount) * 0.14}>{char}</span>
+	{/each}
+</div>
+
+<style>
+	.hyvui-data-stream {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-family: var(--font-mono);
+		font-size: 0.6rem;
+		line-height: 1.4;
+		letter-spacing: 0.1em;
+		color: var(--accent);
+		pointer-events: none;
+		overflow: hidden;
+	}
+
+	.hyvui-data-stream-char {
+		display: block;
+		transition: opacity 0.3s var(--ease-fast);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-data-stream-char {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/ambient/DataStream.svelte.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Decorative scrolling hex character column. Renders `aria-hidden`.
+ * @example
+ * <DataStream width="1.4rem" speed="slow" />
+ * <DataStream active={isConnected} />
+ */
 interface Props {
     /** Enable the scrolling animation. */
     active?: boolean;

package/dist/components/ambient/EnergyArc.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative energy arc (SVG quadratic bezier) between two points.
+	 * Under `hextech`: single clean cyan arc with traveling dot.
+	 * Under `arcane`: violet arc with jitter and brighter particle.
+	 * Parent must have `position: relative`. Renders `aria-hidden`.
+	 *
+	 * @example
+	 * <div style="position: relative; height: 100px;">
+	 *   <EnergyArc x1="10%" y1="100%" x2="90%" y2="100%" bend={-40} />
+	 * </div>
+	 */
+	interface Props {
+		/** Start x (CSS %). */
+		x1?: string;
+		/** Start y (CSS %). */
+		y1?: string;
+		/** End x (CSS %). */
+		x2?: string;
+		/** End y (CSS %). */
+		y2?: string;
+		/** Control point y-offset in px (negative = arc up, positive = arc down). */
+		bend?: number;
+		/** Traveling particle speed in seconds. */
+		speed?: number;
+		/** Enable traveling particle. */
+		animated?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		x1 = '10%',
+		y1 = '50%',
+		x2 = '90%',
+		y2 = '50%',
+		bend = -32,
+		speed = 2,
+		animated = true,
+		class: className = ''
+	}: Props = $props();
+
+	const prefersReduced =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	const dur = $derived(`${speed}s`);
+	const durJitter = $derived(`${speed * 1.4}s`);
+	const shouldAnimate = $derived(animated && !prefersReduced);
+
+	// We don't know actual px coords until render, so the bezier control point
+	// is expressed as a data attribute and animated via SVG animateTransform.
+	// For the path `d` we use a placeholder that gets overridden by JS,
+	// but since this is a portoflio component, a CSS-only approximation works:
+	// we anchor a <path> using % units for x/y and em for control offset.
+
+	const filterId = `ea-glow-${Math.random().toString(36).slice(2, 8)}`;
+
+	// Bezier path string: Q cx,cy x2,y2 — control point is midpoint elevated by `bend`
+	// We use computed path as a string and pass it as an attribute.
+	// Since SVG doesn't mix % and px in path d, we keep all in % and treat bend as %.
+	const bendPct = $derived(`${bend}px`);
+
+	// Path using SVG's ability to do absolute coordinates in %. Not directly possible,
+	// so we use a wrapper approach: the SVG has viewBox "0 0 100 100" and we translate %.
+	// Keep it simple: use an SVG with proportional coordinates.
+	// The consumer positions the SVG fill on the parent, so 0 0 100 100 viewBox is fine.
+	const mid = '50%';
+	const path = $derived(`M ${x1} ${y1} Q ${mid} calc(50% + ${bendPct}) ${x2} ${y2}`);
+</script>
+
+<svg class={cn('hyvui-energy-arc', className)} aria-hidden="true">
+	<defs>
+		<filter id={filterId} x="-50%" y="-100%" width="200%" height="300%">
+			<feGaussianBlur stdDeviation="2" result="blur" />
+			<feMerge>
+				<feMergeNode in="blur" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
+		</filter>
+	</defs>
+
+	<!-- glow halo -->
+	<path
+		class="hyvui-ea-halo"
+		d={path}
+		fill="none"
+		stroke-width="5"
+		filter="url(#{filterId})"
+	/>
+
+	<!-- main arc line -->
+	<path
+		class="hyvui-ea-line"
+		d={path}
+		fill="none"
+		stroke-width="1"
+	/>
+
+	<!-- traveling particle -->
+	{#if shouldAnimate}
+		<circle class="hyvui-ea-particle" r="3">
+			<animateMotion dur={dur} repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+				<mpath>
+					<path d={path} />
+				</mpath>
+			</animateMotion>
+			<animate
+				attributeName="opacity"
+				values="0;1;1;0"
+				keyTimes="0;0.1;0.85;1"
+				dur={dur}
+				repeatCount="indefinite"
+			/>
+		</circle>
+
+		<!-- arcane gets a second jitter particle traveling opposite direction -->
+		<circle class="hyvui-ea-particle hyvui-ea-particle--jitter" r="2">
+			<animateMotion dur={durJitter} repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
+				<mpath>
+					<path d={path} />
+				</mpath>
+			</animateMotion>
+			<animate
+				attributeName="opacity"
+				values="0;0.5;0.5;0"
+				keyTimes="0;0.12;0.88;1"
+				dur={durJitter}
+				repeatCount="indefinite"
+			/>
+		</circle>
+	{/if}
+</svg>
+
+<style>
+	.hyvui-energy-arc {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		overflow: visible;
+	}
+
+	/* ── default (field-notebook) ─────────────────────────────────────── */
+	.hyvui-ea-halo     { stroke: transparent; }
+	.hyvui-ea-line     { stroke: rgba(199, 156, 87, 0.25); }
+	.hyvui-ea-particle { fill: rgba(199, 156, 87, 0.8); }
+	.hyvui-ea-particle--jitter { display: none; }
+
+	/* ── hextech: clean cyan arc, single particle ─────────────────────── */
+	:global([data-register='hextech']) .hyvui-ea-halo {
+		stroke: rgba(93, 217, 240, 0.12);
+	}
+	:global([data-register='hextech']) .hyvui-ea-line {
+		stroke: rgba(93, 217, 240, 0.55);
+	}
+	:global([data-register='hextech']) .hyvui-ea-particle {
+		fill: rgba(184, 230, 242, 1);
+	}
+	:global([data-register='hextech']) .hyvui-ea-particle--jitter {
+		display: none;
+	}
+
+	/* ── arcane: violet arc, bidirectional particles ──────────────────── */
+	:global([data-register='arcane']) .hyvui-ea-halo {
+		stroke: rgba(184, 69, 201, 0.2);
+	}
+	:global([data-register='arcane']) .hyvui-ea-line {
+		stroke: rgba(184, 69, 201, 0.6);
+	}
+	:global([data-register='arcane']) .hyvui-ea-particle {
+		fill: rgba(233, 76, 188, 1);
+	}
+	:global([data-register='arcane']) .hyvui-ea-particle--jitter {
+		display: block;
+		fill: rgba(184, 69, 201, 0.7);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-ea-particle,
+		.hyvui-ea-particle--jitter {
+			display: none;
+		}
+	}
+</style>

package/dist/components/ambient/EnergyArc.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Decorative energy arc (SVG quadratic bezier) between two points.
+ * Under `hextech`: single clean cyan arc with traveling dot.
+ * Under `arcane`: violet arc with jitter and brighter particle.
+ * Parent must have `position: relative`. Renders `aria-hidden`.
+ *
+ * @example
+ * <div style="position: relative; height: 100px;">
+ *   <EnergyArc x1="10%" y1="100%" x2="90%" y2="100%" bend={-40} />
+ * </div>
+ */
+interface Props {
+    /** Start x (CSS %). */
+    x1?: string;
+    /** Start y (CSS %). */
+    y1?: string;
+    /** End x (CSS %). */
+    x2?: string;
+    /** End y (CSS %). */
+    y2?: string;
+    /** Control point y-offset in px (negative = arc up, positive = arc down). */
+    bend?: number;
+    /** Traveling particle speed in seconds. */
+    speed?: number;
+    /** Enable traveling particle. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const EnergyArc: import("svelte").Component<Props, {}, "">;
+type EnergyArc = ReturnType<typeof EnergyArc>;
+export default EnergyArc;

package/dist/components/ambient/GlyphMark.svelte

@@ -1,69 +1,75 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Glyph variant. */
-    variant?: 'cross' | 'reticle' | 'coord' | 'mark';
-    /** Size in pixels. */
-    size?: number;
-    /** Glyph color. */
-    color?: string;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    variant = 'cross',
-    size = 24,
-    color = 'var(--muted-strong)',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<svg
-  class={cn('hyvui-glyph-mark', className)}
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke={color}
-  stroke-width="1"
-  aria-hidden="true"
->
-  {#if variant === 'cross'}
-    <!-- coordinate cross -->
-    <line x1="12" y1="4" x2="12" y2="20" />
-    <line x1="4" y1="12" x2="20" y2="12" />
-    <circle cx="12" cy="12" r="1.5" fill={color} stroke="none" />
-  {:else if variant === 'reticle'}
-    <!-- targeting reticle -->
-    <circle cx="12" cy="12" r="8" />
-    <circle cx="12" cy="12" r="3" />
-    <line x1="12" y1="1" x2="12" y2="5" />
-    <line x1="12" y1="19" x2="12" y2="23" />
-    <line x1="1" y1="12" x2="5" y2="12" />
-    <line x1="19" y1="12" x2="23" y2="12" />
-  {:else if variant === 'coord'}
-    <!-- cartographic coordinate marker -->
-    <line x1="12" y1="2" x2="12" y2="8" />
-    <line x1="12" y1="16" x2="12" y2="22" />
-    <line x1="2" y1="12" x2="8" y2="12" />
-    <line x1="16" y1="12" x2="22" y2="12" />
-    <rect x="9" y="9" width="6" height="6" rx="0.5" />
-  {:else if variant === 'mark'}
-    <!-- measurement mark -->
-    <line x1="4" y1="20" x2="20" y2="4" />
-    <line x1="4" y1="20" x2="4" y2="15" />
-    <line x1="4" y1="20" x2="9" y2="20" />
-    <circle cx="12" cy="12" r="1" fill={color} stroke="none" />
-  {/if}
-</svg>
-
-<style>
-  .hyvui-glyph-mark {
-    display: inline-block;
-    pointer-events: none;
-    flex-shrink: 0;
-    opacity: 0.5;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative SVG glyph. Renders `aria-hidden`.
+	 * @example
+	 * <GlyphMark variant="reticle" size={32} />
+	 * <GlyphMark variant="cross" color="var(--accent)" />
+	 */
+	interface Props {
+		/** Glyph variant. */
+		variant?: 'cross' | 'reticle' | 'coord' | 'mark';
+		/** Size in pixels. */
+		size?: number;
+		/** Glyph color. */
+		color?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		variant = 'cross',
+		size = 24,
+		color = 'var(--muted-strong)',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<svg
+	class={cn('hyvui-glyph-mark', className)}
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke={color}
+	stroke-width="1"
+	aria-hidden="true"
+>
+	{#if variant === 'cross'}
+		<!-- coordinate cross -->
+		<line x1="12" y1="4" x2="12" y2="20" />
+		<line x1="4" y1="12" x2="20" y2="12" />
+		<circle cx="12" cy="12" r="1.5" fill={color} stroke="none" />
+	{:else if variant === 'reticle'}
+		<!-- targeting reticle -->
+		<circle cx="12" cy="12" r="8" />
+		<circle cx="12" cy="12" r="3" />
+		<line x1="12" y1="1" x2="12" y2="5" />
+		<line x1="12" y1="19" x2="12" y2="23" />
+		<line x1="1" y1="12" x2="5" y2="12" />
+		<line x1="19" y1="12" x2="23" y2="12" />
+	{:else if variant === 'coord'}
+		<!-- cartographic coordinate marker -->
+		<line x1="12" y1="2" x2="12" y2="8" />
+		<line x1="12" y1="16" x2="12" y2="22" />
+		<line x1="2" y1="12" x2="8" y2="12" />
+		<line x1="16" y1="12" x2="22" y2="12" />
+		<rect x="9" y="9" width="6" height="6" rx="0.5" />
+	{:else if variant === 'mark'}
+		<!-- measurement mark -->
+		<line x1="4" y1="20" x2="20" y2="4" />
+		<line x1="4" y1="20" x2="4" y2="15" />
+		<line x1="4" y1="20" x2="9" y2="20" />
+		<circle cx="12" cy="12" r="1" fill={color} stroke="none" />
+	{/if}
+</svg>
+
+<style>
+	.hyvui-glyph-mark {
+		display: inline-block;
+		pointer-events: none;
+		flex-shrink: 0;
+		opacity: 0.5;
+	}
+</style>

package/dist/components/ambient/GlyphMark.svelte.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Decorative SVG glyph. Renders `aria-hidden`.
+ * @example
+ * <GlyphMark variant="reticle" size={32} />
+ * <GlyphMark variant="cross" color="var(--accent)" />
+ */
 interface Props {
     /** Glyph variant. */
     variant?: 'cross' | 'reticle' | 'coord' | 'mark';

package/dist/components/ambient/GridOverlay.svelte

@@ -1,28 +1,34 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-grid-overlay', className)} aria-hidden="true"></div>
-
-<style>
-  .hyvui-grid-overlay {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background-image:
-      linear-gradient(to right, rgba(199, 156, 87, 0.04) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(199, 156, 87, 0.04) 1px, transparent 1px);
-    background-size: 72px 72px;
-    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative. Parent must have `position: relative`. Renders `aria-hidden`.
+	 * @example
+	 * <div style="position: relative;">
+	 *   <GridOverlay />
+	 *   content here
+	 * </div>
+	 */
+	interface Props {
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class={cn('hyvui-grid-overlay', className)} aria-hidden="true"></div>
+
+<style>
+	.hyvui-grid-overlay {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		background-image:
+			linear-gradient(to right, rgba(199, 156, 87, 0.04) 1px, transparent 1px),
+			linear-gradient(to bottom, rgba(199, 156, 87, 0.04) 1px, transparent 1px);
+		background-size: 72px 72px;
+		mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+		-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+	}
+</style>