@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/ambient/ArcaneVein.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative glowing crack / energy conduit rendered as SVG.
+	 * Parent must have `position: relative`. Renders `aria-hidden`.
+	 *
+	 * Under `hextech`: precise etched control line, traveling cyan dot.
+	 * Under `arcane`: pulsing violet crack, traveling particle + glow.
+	 *
+	 * @example
+	 * <div style="position: relative; height: 200px;">
+	 *   <ArcaneVein x1="10%" y1="0%" x2="90%" y2="100%" />
+	 * </div>
+	 */
+	interface Props {
+		/** Start x (CSS %). */
+		x1?: string;
+		/** Start y (CSS %). */
+		y1?: string;
+		/** End x (CSS %). */
+		x2?: string;
+		/** End y (CSS %). */
+		y2?: string;
+		/** Duration of traveling particle. */
+		speed?: number;
+		/** Enable traveling particle animation. */
+		animated?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		x1 = '0%',
+		y1 = '0%',
+		x2 = '100%',
+		y2 = '100%',
+		speed = 3,
+		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 shouldAnimate = $derived(animated && !prefersReduced);
+
+	// Unique filter ID to avoid SVG filter collision when multiple veins are on a page.
+	const filterId = `av-glow-${Math.random().toString(36).slice(2, 8)}`;
+</script>
+
+<svg class={cn('hyvui-arcane-vein', className)} aria-hidden="true">
+	<defs>
+		<filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
+			<feGaussianBlur stdDeviation="2.5" result="blur" />
+			<feMerge>
+				<feMergeNode in="blur" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
+		</filter>
+	</defs>
+
+	<!-- glow halo (arcane only, separate pass) -->
+	<line
+		class="hyvui-av-halo"
+		{x1} {y1} {x2} {y2}
+		stroke-width="4"
+		filter="url(#{filterId})"
+	/>
+
+	<!-- main vein line -->
+	<line
+		class="hyvui-av-line"
+		{x1} {y1} {x2} {y2}
+		stroke-width="1"
+	/>
+
+	<!-- traveling particle -->
+	{#if shouldAnimate}
+		<circle class="hyvui-av-particle" r="2.5">
+			<animateMotion
+				dur={dur}
+				repeatCount="indefinite"
+				keyPoints="0;1"
+				keyTimes="0;1"
+				calcMode="linear"
+			>
+				<mpath>
+					<line {x1} {y1} {x2} {y2} />
+				</mpath>
+			</animateMotion>
+			<animate
+				attributeName="opacity"
+				values="0;0.9;0.9;0"
+				keyTimes="0;0.08;0.88;1"
+				dur={dur}
+				repeatCount="indefinite"
+			/>
+		</circle>
+	{/if}
+</svg>
+
+<style>
+	.hyvui-arcane-vein {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		overflow: visible;
+	}
+
+	/* ── default (field-notebook) ─────────────────────────────────────── */
+	.hyvui-av-halo   { stroke: transparent; }
+	.hyvui-av-line   { stroke: rgba(199, 156, 87, 0.22); }
+	.hyvui-av-particle { fill: rgba(199, 156, 87, 0.7); }
+
+	/* ── hextech: etched control line, cyan particle ──────────────────── */
+	:global([data-register='hextech']) .hyvui-av-halo {
+		stroke: rgba(93, 217, 240, 0.08);
+	}
+	:global([data-register='hextech']) .hyvui-av-line {
+		stroke: rgba(93, 217, 240, 0.4);
+		stroke-dasharray: 6 3;
+	}
+	:global([data-register='hextech']) .hyvui-av-particle {
+		fill: rgba(184, 230, 242, 0.95);
+	}
+
+	/* ── arcane: glowing crack, violet bleed particle ─────────────────── */
+	:global([data-register='arcane']) .hyvui-av-halo {
+		stroke: rgba(184, 69, 201, 0.28);
+	}
+	:global([data-register='arcane']) .hyvui-av-line {
+		stroke: rgba(184, 69, 201, 0.7);
+		stroke-dasharray: none;
+	}
+	:global([data-register='arcane']) .hyvui-av-particle {
+		fill: rgba(233, 76, 188, 1);
+		r: 3.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-av-particle {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,31 @@
+/**
+ * Decorative glowing crack / energy conduit rendered as SVG.
+ * Parent must have `position: relative`. Renders `aria-hidden`.
+ *
+ * Under `hextech`: precise etched control line, traveling cyan dot.
+ * Under `arcane`: pulsing violet crack, traveling particle + glow.
+ *
+ * @example
+ * <div style="position: relative; height: 200px;">
+ *   <ArcaneVein x1="10%" y1="0%" x2="90%" y2="100%" />
+ * </div>
+ */
+interface Props {
+    /** Start x (CSS %). */
+    x1?: string;
+    /** Start y (CSS %). */
+    y1?: string;
+    /** End x (CSS %). */
+    x2?: string;
+    /** End y (CSS %). */
+    y2?: string;
+    /** Duration of traveling particle. */
+    speed?: number;
+    /** Enable traveling particle animation. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const ArcaneVein: import("svelte").Component<Props, {}, "">;
+type ArcaneVein = ReturnType<typeof ArcaneVein>;
+export default ArcaneVein;

package/dist/components/ambient/BrassFiligree.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative corner brackets with an Art Deco / Hextech filigree motif.
+	 * Renders four corners as SVG ornaments. Parent must have `position: relative`.
+	 * Under `hextech`: bright brass. Under `arcane`: subdued violet-tinted.
+	 * Renders `aria-hidden`.
+	 * @example
+	 * <div style="position: relative; padding: 2rem;">
+	 *   <BrassFiligree size={40} />
+	 *   framed content
+	 * </div>
+	 */
+	interface Props {
+		/** Arm length in pixels. */
+		size?: number;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { size = 40, class: className = '' }: Props = $props();
+
+	// Filigree corner SVG path:
+	// - Two arms (top+left or equivalent) of the given length
+	// - Small interior notch at 45° angle (the "filigree" detail)
+	// - Tiny rivet dot at the corner apex
+	// All paths are for a top-left oriented corner; CSS rotation handles others.
+	const arm = $derived(size);
+	const notch = $derived(Math.round(size * 0.28));
+	const rivet = $derived(Math.round(size * 0.09));
+</script>
+
+<div class={cn('hyvui-brass-filigree', className)} aria-hidden="true">
+	{#each ['tl', 'tr', 'bl', 'br'] as pos}
+		<svg
+			class="hyvui-bf-corner hyvui-bf-{pos}"
+			width={arm}
+			height={arm}
+			viewBox="0 0 {arm} {arm}"
+			fill="none"
+		>
+			<!-- main bracket arms -->
+			<polyline
+				class="hyvui-bf-arm"
+				points="{arm},1 1,1 1,{arm}"
+				stroke-width="1"
+			/>
+			<!-- interior notch (diagonal filigree detail) -->
+			<line
+				class="hyvui-bf-notch"
+				x1={notch}
+				y1="1"
+				x2="1"
+				y2={notch}
+				stroke-width="0.75"
+			/>
+			<!-- apex rivet dot -->
+			<circle class="hyvui-bf-rivet" cx="1" cy="1" r={rivet} />
+		</svg>
+	{/each}
+</div>
+
+<style>
+	.hyvui-brass-filigree {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	.hyvui-bf-corner {
+		position: absolute;
+		overflow: visible;
+	}
+
+	.hyvui-bf-tl { top: 0; left: 0; }
+	.hyvui-bf-tr { top: 0; right: 0; transform: scaleX(-1); }
+	.hyvui-bf-bl { bottom: 0; left: 0; transform: scaleY(-1); }
+	.hyvui-bf-br { bottom: 0; right: 0; transform: scale(-1); }
+
+	/* ── default (field-notebook) ─────────────────────────────────────── */
+	.hyvui-bf-arm   { stroke: rgba(199, 156, 87, 0.3); }
+	.hyvui-bf-notch { stroke: rgba(199, 156, 87, 0.15); }
+	.hyvui-bf-rivet { fill: rgba(199, 156, 87, 0.35); }
+
+	/* ── hextech: bright brass precision ──────────────────────────────── */
+	:global([data-register='hextech']) .hyvui-bf-arm {
+		stroke: rgba(212, 165, 116, 0.65);
+		stroke-width: 1.2px;
+	}
+	:global([data-register='hextech']) .hyvui-bf-notch {
+		stroke: rgba(93, 217, 240, 0.35);
+	}
+	:global([data-register='hextech']) .hyvui-bf-rivet {
+		fill: rgba(212, 165, 116, 0.8);
+	}
+
+	/* ── arcane: dim violet-tinted, thinner ───────────────────────────── */
+	:global([data-register='arcane']) .hyvui-bf-arm {
+		stroke: rgba(184, 69, 201, 0.28);
+		stroke-width: 0.8px;
+	}
+	:global([data-register='arcane']) .hyvui-bf-notch {
+		stroke: rgba(233, 76, 188, 0.18);
+	}
+	:global([data-register='arcane']) .hyvui-bf-rivet {
+		fill: rgba(233, 76, 188, 0.3);
+	}
+</style>

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

@@ -0,0 +1,20 @@
+/**
+ * Decorative corner brackets with an Art Deco / Hextech filigree motif.
+ * Renders four corners as SVG ornaments. Parent must have `position: relative`.
+ * Under `hextech`: bright brass. Under `arcane`: subdued violet-tinted.
+ * Renders `aria-hidden`.
+ * @example
+ * <div style="position: relative; padding: 2rem;">
+ *   <BrassFiligree size={40} />
+ *   framed content
+ * </div>
+ */
+interface Props {
+    /** Arm length in pixels. */
+    size?: number;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const BrassFiligree: import("svelte").Component<Props, {}, "">;
+type BrassFiligree = ReturnType<typeof BrassFiligree>;
+export default BrassFiligree;

package/dist/components/ambient/CornerBrackets.svelte

@@ -1,87 +1,91 @@
-<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';
+
+	/**
+	 * Decorative. Parent must have `position: relative`. Renders `aria-hidden`.
+	 * @example
+	 * <div style="position: relative; padding: 2rem;">
+	 *   <CornerBrackets size={24} />
+	 *   content framed by brackets
+	 * </div>
+	 */
+	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/CornerBrackets.svelte.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Decorative. Parent must have `position: relative`. Renders `aria-hidden`.
+ * @example
+ * <div style="position: relative; padding: 2rem;">
+ *   <CornerBrackets size={24} />
+ *   content framed by brackets
+ * </div>
+ */
 interface Props {
     /** Bracket arm length in pixels. */
     size?: number;

package/dist/components/ambient/CrystalShard.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative faceted crystal accent. Adapts per register:
+	 * hextech → flat cyan prism; arcane → jagged violet shard with glow.
+	 * Renders `aria-hidden`.
+	 * @example
+	 * <CrystalShard size={48} />
+	 * <CrystalShard size={32} animated={false} />
+	 */
+	interface Props {
+		/** Bounding size in pixels (width = size, height ~= size * 1.4). */
+		size?: number;
+		/** Enable breathing pulse. */
+		animated?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { size = 48, animated = true, class: className = '' }: Props = $props();
+
+	const prefersReduced =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	const shouldAnimate = $derived(animated && !prefersReduced);
+
+	// Pointy-top crystal: two overlapping polygons for faceted look.
+	// Outer shard — tall diamond with offset peak
+	// Inner face — smaller highlight face giving depth
+	const w = $derived(size);
+	const h = $derived(Math.round(size * 1.4));
+	const cx = $derived(Math.round(w / 2));
+
+	// Outer polygon: asymmetric diamond (peak offset left for natural shard look)
+	const outerPoints = $derived(
+		`${Math.round(cx * 0.7)},2 ${w - 4},${Math.round(h * 0.32)} ${w - 8},${h - 4} ${Math.round(cx * 0.4)},${h - 2} 4,${Math.round(h * 0.72)}`
+	);
+
+	// Inner face: smaller, offset for "facet" depth
+	const innerPoints = $derived(
+		`${Math.round(cx * 0.7)},2 ${w - 4},${Math.round(h * 0.32)} ${Math.round(w * 0.6)},${Math.round(h * 0.55)}`
+	);
+</script>
+
+<svg
+	class={cn(
+		'hyvui-crystal-shard',
+		shouldAnimate && 'hyvui-crystal-shard--animated',
+		className
+	)}
+	width={w}
+	height={h}
+	viewBox="0 0 {w} {h}"
+	fill="none"
+	aria-hidden="true"
+>
+	<defs>
+		<filter id="cs-glow" x="-40%" y="-40%" width="180%" height="180%">
+			<feGaussianBlur stdDeviation="3" result="blur" />
+			<feMerge>
+				<feMergeNode in="blur" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
+		</filter>
+	</defs>
+
+	<!-- outer shard body -->
+	<polygon class="hyvui-cs-body" points={outerPoints} />
+	<!-- inner facet face -->
+	<polygon class="hyvui-cs-face" points={innerPoints} />
+	<!-- edge highlight line -->
+	<polyline
+		class="hyvui-cs-edge"
+		points="{Math.round(cx * 0.7)},2 {w - 4},{Math.round(h * 0.32)}"
+	/>
+</svg>
+
+<style>
+	.hyvui-crystal-shard {
+		display: block;
+		pointer-events: none;
+		overflow: visible;
+	}
+
+	/* ── default (field-notebook) ─────────────────────────────────────── */
+	.hyvui-cs-body {
+		fill: rgba(199, 156, 87, 0.06);
+		stroke: rgba(199, 156, 87, 0.3);
+		stroke-width: 1;
+	}
+	.hyvui-cs-face {
+		fill: rgba(199, 156, 87, 0.12);
+		stroke: none;
+	}
+	.hyvui-cs-edge {
+		stroke: rgba(199, 156, 87, 0.5);
+		stroke-width: 0.75;
+	}
+
+	/* ── hextech: flat cyan prism, clean geometry ─────────────────────── */
+	:global([data-register='hextech']) .hyvui-cs-body {
+		fill: rgba(93, 217, 240, 0.08);
+		stroke: rgba(93, 217, 240, 0.55);
+		stroke-width: 1;
+	}
+	:global([data-register='hextech']) .hyvui-cs-face {
+		fill: rgba(93, 217, 240, 0.18);
+	}
+	:global([data-register='hextech']) .hyvui-cs-edge {
+		stroke: rgba(184, 230, 242, 0.8);
+		stroke-width: 1;
+	}
+
+	/* ── arcane: violet shard with glow filter ────────────────────────── */
+	:global([data-register='arcane']) .hyvui-cs-body {
+		fill: rgba(184, 69, 201, 0.12);
+		stroke: rgba(184, 69, 201, 0.65);
+		stroke-width: 1;
+		filter: url(#cs-glow);
+	}
+	:global([data-register='arcane']) .hyvui-cs-face {
+		fill: rgba(233, 76, 188, 0.22);
+	}
+	:global([data-register='arcane']) .hyvui-cs-edge {
+		stroke: rgba(233, 76, 188, 0.9);
+		stroke-width: 1.2;
+	}
+
+	/* ── pulse animation ─────────────────────────────────────────────── */
+	.hyvui-crystal-shard--animated .hyvui-cs-body {
+		animation: cs-breathe var(--orn-shimmer-rate, 4s) var(--orn-pulse-rhythm, ease-in-out) infinite;
+	}
+
+	:global([data-register='arcane']) .hyvui-crystal-shard--animated .hyvui-cs-body {
+		animation: cs-breathe var(--orn-shimmer-rate, 2.4s) var(--orn-pulse-rhythm, ease-in-out) infinite;
+	}
+
+	@keyframes cs-breathe {
+		0%, 100% { opacity: 1; }
+		50%       { opacity: 0.55; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-crystal-shard--animated .hyvui-cs-body {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+/**
+ * Decorative faceted crystal accent. Adapts per register:
+ * hextech → flat cyan prism; arcane → jagged violet shard with glow.
+ * Renders `aria-hidden`.
+ * @example
+ * <CrystalShard size={48} />
+ * <CrystalShard size={32} animated={false} />
+ */
+interface Props {
+    /** Bounding size in pixels (width = size, height ~= size * 1.4). */
+    size?: number;
+    /** Enable breathing pulse. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const CrystalShard: import("svelte").Component<Props, {}, "">;
+type CrystalShard = ReturnType<typeof CrystalShard>;
+export default CrystalShard;