@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/ambient/CornerBrackets.svelte

@@ -1,87 +1,83 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Bracket arm length in pixels. */
-    size?: number;
-    /** Bracket color. */
-    color?: string;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    size = 32,
-    color = 'rgba(199, 156, 87, 0.24)',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-corners', className)} aria-hidden="true">
-  <span
-    class="hyvui-corner hyvui-corner-tl"
-    style:width="{size}px"
-    style:height="{size}px"
-    style:border-color={color}
-  ></span>
-  <span
-    class="hyvui-corner hyvui-corner-tr"
-    style:width="{size}px"
-    style:height="{size}px"
-    style:border-color={color}
-  ></span>
-  <span
-    class="hyvui-corner hyvui-corner-bl"
-    style:width="{size}px"
-    style:height="{size}px"
-    style:border-color={color}
-  ></span>
-  <span
-    class="hyvui-corner hyvui-corner-br"
-    style:width="{size}px"
-    style:height="{size}px"
-    style:border-color={color}
-  ></span>
-</div>
-
-<style>
-  .hyvui-corners {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-
-  .hyvui-corner {
-    position: absolute;
-    border-style: solid;
-    border-width: 0;
-  }
-
-  .hyvui-corner-tl {
-    top: 0;
-    left: 0;
-    border-top-width: 1px;
-    border-left-width: 1px;
-  }
-
-  .hyvui-corner-tr {
-    top: 0;
-    right: 0;
-    border-top-width: 1px;
-    border-right-width: 1px;
-  }
-
-  .hyvui-corner-bl {
-    bottom: 0;
-    left: 0;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-  }
-
-  .hyvui-corner-br {
-    bottom: 0;
-    right: 0;
-    border-bottom-width: 1px;
-    border-right-width: 1px;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Bracket arm length in pixels. */
+		size?: number;
+		/** Bracket color. */
+		color?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { size = 32, color = 'rgba(199, 156, 87, 0.24)', class: className = '' }: Props = $props();
+</script>
+
+<div class={cn('hyvui-corners', className)} aria-hidden="true">
+	<span
+		class="hyvui-corner hyvui-corner-tl"
+		style:width="{size}px"
+		style:height="{size}px"
+		style:border-color={color}
+	></span>
+	<span
+		class="hyvui-corner hyvui-corner-tr"
+		style:width="{size}px"
+		style:height="{size}px"
+		style:border-color={color}
+	></span>
+	<span
+		class="hyvui-corner hyvui-corner-bl"
+		style:width="{size}px"
+		style:height="{size}px"
+		style:border-color={color}
+	></span>
+	<span
+		class="hyvui-corner hyvui-corner-br"
+		style:width="{size}px"
+		style:height="{size}px"
+		style:border-color={color}
+	></span>
+</div>
+
+<style>
+	.hyvui-corners {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	.hyvui-corner {
+		position: absolute;
+		border-style: solid;
+		border-width: 0;
+	}
+
+	.hyvui-corner-tl {
+		top: 0;
+		left: 0;
+		border-top-width: 1px;
+		border-left-width: 1px;
+	}
+
+	.hyvui-corner-tr {
+		top: 0;
+		right: 0;
+		border-top-width: 1px;
+		border-right-width: 1px;
+	}
+
+	.hyvui-corner-bl {
+		bottom: 0;
+		left: 0;
+		border-bottom-width: 1px;
+		border-left-width: 1px;
+	}
+
+	.hyvui-corner-br {
+		bottom: 0;
+		right: 0;
+		border-bottom-width: 1px;
+		border-right-width: 1px;
+	}
+</style>

package/dist/components/ambient/DataStream.svelte

@@ -1,94 +1,111 @@
-<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';
+
+	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 ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-data-stream-char {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/ambient/GlyphMark.svelte

@@ -1,69 +1,69 @@
-<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';
+
+	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/GridOverlay.svelte

@@ -1,28 +1,26 @@
-<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';
+
+	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>

package/dist/components/ambient/ParallaxLayer.svelte

@@ -1,41 +1,37 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Motion multiplier applied to --px/--py custom properties. */
-    strength?: number;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Content to apply parallax to. */
-    children?: Snippet;
-  }
-
-  let {
-    strength = 18,
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<div
-  class={cn('hyvui-parallax', className)}
-  style:transform="translate(calc(var(--px, 0) * {strength}px), calc(var(--py, 0) * {strength}px))"
-  aria-hidden="true"
->
-  {#if children}{@render children()}{/if}
-</div>
-
-<style>
-  .hyvui-parallax {
-    will-change: transform;
-    transition: transform 0.15s ease-out;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-parallax {
-      transform: none !important;
-      transition: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Motion multiplier applied to --px/--py custom properties. */
+		strength?: number;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Content to apply parallax to. */
+		children?: Snippet;
+	}
+
+	let { strength = 18, class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class={cn('hyvui-parallax', className)}
+	style:transform="translate(calc(var(--px, 0) * {strength}px), calc(var(--py, 0) * {strength}px))"
+	aria-hidden="true"
+>
+	{#if children}{@render children()}{/if}
+</div>
+
+<style>
+	.hyvui-parallax {
+		will-change: transform;
+		transition: transform 0.15s ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-parallax {
+			transform: none !important;
+			transition: none;
+		}
+	}
+</style>