@hyvnt/hyvui 0.3.0 → 0.4.0

package/README.md

@@ -143,7 +143,10 @@ GridOverlay   CornerBrackets
 ScanBand      Vignette
 ParallaxLayer SignalRing
 GlyphMark     DataStream
-ThreadLine
+ThreadLine    HexGrid
+BrassFiligree CrystalShard
+ArcaneVein    EnergyArc
+ShimmerCloud
 ```
 
 **depth**
@@ -174,7 +177,7 @@ LogScene
 the library is organized in three additive layers. each one works without the next.
 
 <pre lang="txt">
-[ base ]       42 components. tokens. css custom properties throughout.
+[ base ]       75 components. tokens. css custom properties throughout.
                nothing hardcoded. nothing fighting your cascade.
 
 [ expressive ] registers shift the ambient mood of a section.
@@ -198,11 +201,38 @@ registers are named aesthetic states. apply one and the ambient properties shift
 </script>
 ```
 
-| register          | character                    |
-| ----------------- | ---------------------------- |
-| `field-notebook`  | warm, worn, analog           |
-| `mission-control` | cold, precise, dense         |
-| `archive`         | flat, institutional, drained |
+| register          | character                                    |
+| ----------------- | -------------------------------------------- |
+| `field-notebook`  | warm, worn, analog                           |
+| `mission-control` | cold, precise, dense                         |
+| `archive`         | flat, institutional, drained                 |
+| `hextech`         | piltover-refined. brass, crystal, mechanical |
+| `arcane`          | zaun-unstable. shimmer, shards, organic glow |
+
+the hextech and arcane registers ship their own palette and motif token files. import the ones you use:
+
+```ts
+import '@hyvnt/hyvui/styles.css';              // base tokens + all 5 register weights
+import '@hyvnt/hyvui/tokens/hextech.css';      // --htx-* palette + motif tokens
+import '@hyvnt/hyvui/tokens/arcane.css';       // --arc-* palette + motif tokens
+```
+
+**motif tokens** (hextech + arcane only):
+
+```css
+--orn-hex-density     /* hex grid tile density */
+--orn-vein-intensity  /* arcane crack-vein strength, 0–1 */
+--orn-shimmer-rate    /* particle drift / shimmer speed */
+```
+
+use `RegisterSwitcher` from the patterns layer to let users toggle at runtime:
+
+```svelte
+<script>
+	import { RegisterSwitcher } from '@hyvnt/hyvui';
+</script>
+<RegisterSwitcher />
+```
 
 ---
 

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,6 +1,14 @@
 <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;

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;

package/dist/components/ambient/DataStream.svelte

@@ -2,6 +2,12 @@
 	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;
@@ -100,7 +106,7 @@
 
 	.hyvui-data-stream-char {
 		display: block;
-		transition: opacity 0.3s ease-out;
+		transition: opacity 0.3s var(--ease-fast);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

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;