@hyvnt/hyvui 0.3.0 → 0.4.0

package/dist/components/patterns/ShowcaseFrame.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { PerspectivePreset } from '../../system/depth/depth.js';
+import type { Snippet } from 'svelte';
+/**
+ * @remarks Composed spatial stage: HorizonGrid backdrop + DepthStage + CornerBrackets in one component.
+ * The missing entry point into the depth system for showcasing content.
+ * @example
+ * <ShowcaseFrame perspective="mid" animated>
+ *   {#snippet label()}<span>artifact / 001</span>{/snippet}
+ *   <FloatCard>your content</FloatCard>
+ * </ShowcaseFrame>
+ */
+interface Props {
+    /** Perspective distance preset. */
+    perspective?: PerspectivePreset;
+    /** Animate the HorizonGrid lines. */
+    animated?: boolean;
+    /** Label rendered in readout style at the bottom-left. */
+    label?: Snippet;
+    /** Minimum height of the frame. */
+    minHeight?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Content rendered at raised depth level. */
+    children?: Snippet;
+}
+declare const ShowcaseFrame: import("svelte").Component<Props, {}, "">;
+type ShowcaseFrame = ReturnType<typeof ShowcaseFrame>;
+export default ShowcaseFrame;

package/dist/components/patterns/TerminalBoot.svelte

@@ -8,6 +8,18 @@
 		message: string;
 	}
 
+	/**
+	 * @remarks Use in LogScene or as a standalone loading sequence for system init screens.
+	 * @example
+	 * <TerminalBoot
+	 *   lines={[
+	 *     { status: 'ok', message: 'database connected' },
+	 *     { status: 'pend', message: 'loading modules...' },
+	 *     { status: 'ok', message: 'system ready' }
+	 *   ]}
+	 *   oncomplete={() => ready = true}
+	 * />
+	 */
 	interface Props {
 		/** Lines to display in sequence. */
 		lines?: BootLine[];
@@ -46,7 +58,9 @@
 			return;
 		}
 
-		if (instant) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		if (instant || prefersReduced) {
 			visibleCount = lines.length;
 			oncomplete?.();
 			return;

package/dist/components/patterns/TerminalBoot.svelte.d.ts

@@ -2,6 +2,18 @@ interface BootLine {
     status: 'ok' | 'pend' | 'warn' | 'fail';
     message: string;
 }
+/**
+ * @remarks Use in LogScene or as a standalone loading sequence for system init screens.
+ * @example
+ * <TerminalBoot
+ *   lines={[
+ *     { status: 'ok', message: 'database connected' },
+ *     { status: 'pend', message: 'loading modules...' },
+ *     { status: 'ok', message: 'system ready' }
+ *   ]}
+ *   oncomplete={() => ready = true}
+ * />
+ */
 interface Props {
     /** Lines to display in sequence. */
     lines?: BootLine[];

package/dist/components/primitives/Divider.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { cn } from '../../utils/cn.js';
 
+	/**
+	 * @example
+	 * <Divider />
+	 * <Divider strength="strong" />
+	 */
 	interface Props {
 		/** Line visibility strength. */
 		strength?: 'default' | 'strong';
@@ -23,4 +28,29 @@
 		margin: 0;
 		width: 100%;
 	}
+
+	/* ── hextech: fade to brass at edges ──────────────────────────────── */
+	:global([data-register='hextech']) .hyvui-divider {
+		border-image: linear-gradient(
+			to right,
+			transparent,
+			rgba(184, 115, 51, 0.5) 20%,
+			rgba(93, 217, 240, 0.35) 50%,
+			rgba(184, 115, 51, 0.5) 80%,
+			transparent
+		) 1;
+	}
+
+	/* ── arcane: violet glow, center-bright ───────────────────────────── */
+	:global([data-register='arcane']) .hyvui-divider {
+		border-image: linear-gradient(
+			to right,
+			transparent,
+			rgba(184, 69, 201, 0.55) 25%,
+			rgba(233, 76, 188, 0.65) 50%,
+			rgba(184, 69, 201, 0.55) 75%,
+			transparent
+		) 1;
+		filter: drop-shadow(0 0 3px rgba(184, 69, 201, 0.3));
+	}
 </style>

package/dist/components/primitives/Divider.svelte.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <Divider />
+ * <Divider strength="strong" />
+ */
 interface Props {
     /** Line visibility strength. */
     strength?: 'default' | 'strong';

package/dist/components/primitives/Icon.svelte

@@ -2,6 +2,15 @@
 	import { cn } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @example
+	 * <Icon size={20}>
+	 *   <svg viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2z" /></svg>
+	 * </Icon>
+	 * <Icon size={16} color="var(--accent)">
+	 *   <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /></svg>
+	 * </Icon>
+	 */
 	interface Props {
 		/** Icon size in pixels. */
 		size?: number;

package/dist/components/primitives/Icon.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <Icon size={20}>
+ *   <svg viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2z" /></svg>
+ * </Icon>
+ * <Icon size={16} color="var(--accent)">
+ *   <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /></svg>
+ * </Icon>
+ */
 interface Props {
     /** Icon size in pixels. */
     size?: number;

package/dist/components/primitives/Label.svelte

@@ -2,6 +2,12 @@
 	import { cn } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @example
+	 * <Label>version 2.0</Label>
+	 * <Label color="accent">active</Label>
+	 * <Label color="signal" as="div">system ready</Label>
+	 */
 	interface Props {
 		/** HTML tag to render. */
 		as?: string;

package/dist/components/primitives/Label.svelte.d.ts

@@ -1,4 +1,10 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <Label>version 2.0</Label>
+ * <Label color="accent">active</Label>
+ * <Label color="signal" as="div">system ready</Label>
+ */
 interface Props {
     /** HTML tag to render. */
     as?: string;

package/dist/components/primitives/Surface.svelte

@@ -2,6 +2,13 @@
 	import { cn } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @see surface — add `use:surface` for an entrance animation on mount.
+	 * @example
+	 * <Surface variant="card">card content</Surface>
+	 * <Surface variant="panel" withInset>panel with teal inset border</Surface>
+	 * <Surface variant="base" as="section">base container</Surface>
+	 */
 	interface Props {
 		/** Surface visual style. */
 		variant?: 'base' | 'card' | 'panel';
@@ -69,14 +76,12 @@
 		background: var(--surface-card);
 		border: 1px solid rgba(255, 255, 255, 0.05);
 		box-shadow: var(--surface-stroke), var(--shadow-card);
-		backdrop-filter: blur(8px);
 	}
 
 	.hyvui-surface-panel {
 		background: var(--surface-panel);
 		border: 1px solid var(--line);
 		box-shadow: var(--surface-stroke), var(--shadow-veil);
-		backdrop-filter: blur(10px);
 	}
 
 	.hyvui-surface-inset::after {
@@ -86,4 +91,64 @@
 		border: 1px solid rgba(121, 166, 163, 0.14);
 		pointer-events: none;
 	}
+
+	/* ── hextech ornament ─────────────────────────────────────────────── */
+	:global([data-register='hextech']) .hyvui-surface {
+		border-radius: var(--radius-sm);
+	}
+
+	:global([data-register='hextech']) .hyvui-surface-card {
+		border-color: rgba(184, 115, 51, 0.2);
+		box-shadow:
+			var(--surface-stroke),
+			var(--shadow-card),
+			inset 0 0 0 1px rgba(93, 217, 240, 0.04);
+	}
+
+	:global([data-register='hextech']) .hyvui-surface-panel {
+		border-color: rgba(93, 217, 240, 0.18);
+	}
+
+	/* ── arcane ornament ──────────────────────────────────────────────── */
+	:global([data-register='arcane']) .hyvui-surface-card {
+		border-color: rgba(184, 69, 201, 0.18);
+	}
+
+	/* violet radial leak at top-left corner — nth-child rotates it per card */
+	:global([data-register='arcane']) .hyvui-surface-card::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: radial-gradient(
+			circle at 0% 0%,
+			rgba(184, 69, 201, 0.14) 0%,
+			transparent 50%
+		);
+		pointer-events: none;
+	}
+
+	/* rotate leak position per nth-child so cards in a grid each look unique */
+	:global([data-register='arcane']) .hyvui-surface-card:nth-child(2n)::after {
+		background: radial-gradient(
+			circle at 100% 0%,
+			rgba(233, 76, 188, 0.12) 0%,
+			transparent 50%
+		);
+	}
+
+	:global([data-register='arcane']) .hyvui-surface-card:nth-child(3n)::after {
+		background: radial-gradient(
+			circle at 100% 100%,
+			rgba(184, 69, 201, 0.1) 0%,
+			transparent 50%
+		);
+	}
+
+	:global([data-register='arcane']) .hyvui-surface-panel {
+		border-color: rgba(184, 69, 201, 0.22);
+		box-shadow:
+			var(--surface-stroke),
+			var(--shadow-veil),
+			0 0 40px rgba(184, 69, 201, 0.06);
+	}
 </style>

package/dist/components/primitives/Surface.svelte.d.ts

@@ -1,4 +1,11 @@
 import type { Snippet } from 'svelte';
+/**
+ * @see surface — add `use:surface` for an entrance animation on mount.
+ * @example
+ * <Surface variant="card">card content</Surface>
+ * <Surface variant="panel" withInset>panel with teal inset border</Surface>
+ * <Surface variant="base" as="section">base container</Surface>
+ */
 interface Props {
     /** Surface visual style. */
     variant?: 'base' | 'card' | 'panel';

package/dist/components/primitives/Text.svelte

@@ -3,6 +3,13 @@
 	import type { Snippet } from 'svelte';
 	import type { Expression } from './text.js';
 
+	/**
+	 * @example
+	 * <Text variant="heading" as="h1">signal acquired</Text>
+	 * <Text variant="body" color="muted">supporting prose here.</Text>
+	 * <Text expression="title-card" as="h1">deep signal</Text>
+	 * <Text expression="readout">sys.uptime: 99.9%</Text>
+	 */
 	interface Props {
 		/** HTML tag to render. */
 		as?: string;
@@ -95,4 +102,29 @@
 		line-height: 1.64;
 		text-wrap: pretty;
 	}
+
+	/* ── hextech: `command` expression gets cyan underline glow ───────── */
+	:global([data-register='hextech']) .expr-command {
+		text-decoration: underline;
+		text-decoration-color: rgba(93, 217, 240, 0.45);
+		text-underline-offset: 3px;
+		text-decoration-thickness: 1px;
+	}
+
+	/* ── arcane: `command` expression gets violet text-shadow shimmer ─── */
+	:global([data-register='arcane']) .expr-command {
+		text-shadow: 0 0 12px rgba(184, 69, 201, 0.55);
+		animation: text-shimmer 3s var(--orn-pulse-rhythm, ease-in-out) infinite;
+	}
+
+	@keyframes text-shimmer {
+		0%, 100% { text-shadow: 0 0 12px rgba(184, 69, 201, 0.55); }
+		50%       { text-shadow: 0 0 20px rgba(233, 76, 188, 0.7), 0 0 8px rgba(184, 69, 201, 0.35); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global([data-register='arcane']) .expr-command {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/primitives/Text.svelte.d.ts

@@ -1,5 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { Expression } from './text.js';
+/**
+ * @example
+ * <Text variant="heading" as="h1">signal acquired</Text>
+ * <Text variant="body" color="muted">supporting prose here.</Text>
+ * <Text expression="title-card" as="h1">deep signal</Text>
+ * <Text expression="readout">sys.uptime: 99.9%</Text>
+ */
 interface Props {
     /** HTML tag to render. */
     as?: string;

package/dist/components/scenes/ArchiveScene.svelte

@@ -3,6 +3,16 @@
 	import Grid from '../layout/Grid.svelte';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @remarks Use for galleries, catalogs, index pages. Responsive card grid with optional filter controls.
+	 * @example
+	 * <ArchiveScene title="all projects" minCardWidth="22rem" maxCols={3}>
+	 *   {#snippet filter()}<SearchBar bind:value={query} />{/snippet}
+	 *   {#each filtered as item}
+	 *     <Card><Text variant="heading">{item.name}</Text></Card>
+	 *   {/each}
+	 * </ArchiveScene>
+	 */
 	interface Props {
 		/** Optional scene title. */
 		title?: string;

package/dist/components/scenes/ArchiveScene.svelte.d.ts

@@ -1,4 +1,14 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for galleries, catalogs, index pages. Responsive card grid with optional filter controls.
+ * @example
+ * <ArchiveScene title="all projects" minCardWidth="22rem" maxCols={3}>
+ *   {#snippet filter()}<SearchBar bind:value={query} />{/snippet}
+ *   {#each filtered as item}
+ *     <Card><Text variant="heading">{item.name}</Text></Card>
+ *   {/each}
+ * </ArchiveScene>
+ */
 interface Props {
     /** Optional scene title. */
     title?: string;

package/dist/components/scenes/DepthScene.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import DepthStage from '../depth/DepthStage.svelte';
+	import DepthLayer from '../depth/DepthLayer.svelte';
+	import type { PerspectivePreset } from '../../system/depth/depth.js';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @remarks Full-page scene where depth is the primary design language.
+	 * Unlike StageScene (flat, centered), DepthScene is spatial from edge to edge.
+	 * @example
+	 * <DepthScene perspective="far">
+	 *   {#snippet ambient()}<GridOverlay /><Vignette />{/snippet}
+	 *   {#snippet ground()}<HorizonGrid animated rows={20} />{/snippet}
+	 *   {#snippet stage()}
+	 *     <FloatCard tiltMax={5}>
+	 *       <Text expression="title-card" as="h1">deep signal</Text>
+	 *     </FloatCard>
+	 *   {/snippet}
+	 *   {#snippet foreground()}
+	 *     <Label color="muted">system / v4</Label>
+	 *   {/snippet}
+	 * </DepthScene>
+	 */
+	interface Props {
+		/** Perspective depth preset. */
+		perspective?: PerspectivePreset;
+		/** Background decorations: GridOverlay, ScanBand, Vignette. */
+		ambient?: Snippet;
+		/** Ground plane — HorizonGrid belongs here. */
+		ground?: Snippet;
+		/** Main content at mid-depth. */
+		stage?: Snippet;
+		/** Foreground labels and overlays closest to viewer. Pointer-events none. */
+		foreground?: Snippet;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		perspective = 'far',
+		ambient,
+		ground,
+		stage,
+		foreground,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<section class={cn('hyvui-depth-scene', className)}>
+	<DepthStage {perspective} as="div" class="hyvui-depth-scene-stage">
+		{#if ambient}
+			<div class="hyvui-depth-scene-ambient" aria-hidden="true">
+				{@render ambient()}
+			</div>
+		{/if}
+
+		{#if ground}
+			<DepthLayer level="ground" class="hyvui-depth-scene-ground">
+				<div aria-hidden="true" style="display:contents">
+					{@render ground()}
+				</div>
+			</DepthLayer>
+		{/if}
+
+		{#if stage}
+			<DepthLayer level="raised" class="hyvui-depth-scene-content">
+				{@render stage()}
+			</DepthLayer>
+		{/if}
+
+		{#if foreground}
+			<DepthLayer level="foreground" class="hyvui-depth-scene-foreground">
+				{@render foreground()}
+			</DepthLayer>
+		{/if}
+	</DepthStage>
+</section>
+
+<style>
+	.hyvui-depth-scene {
+		position: relative;
+		min-height: 100dvh;
+		overflow: hidden;
+	}
+
+	:global(.hyvui-depth-scene-stage) {
+		position: relative;
+		width: 100%;
+		min-height: 100dvh;
+	}
+
+	.hyvui-depth-scene-ambient {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	:global(.hyvui-depth-scene-ground) {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	:global(.hyvui-depth-scene-content) {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 100dvh;
+		padding: var(--space-scene);
+	}
+
+	:global(.hyvui-depth-scene-foreground) {
+		position: absolute;
+		inset: var(--space-lg, 1.5rem);
+		pointer-events: none;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-depth-scene {
+			overflow: visible;
+		}
+	}
+</style>

package/dist/components/scenes/DepthScene.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { PerspectivePreset } from '../../system/depth/depth.js';
+import type { Snippet } from 'svelte';
+/**
+ * @remarks Full-page scene where depth is the primary design language.
+ * Unlike StageScene (flat, centered), DepthScene is spatial from edge to edge.
+ * @example
+ * <DepthScene perspective="far">
+ *   {#snippet ambient()}<GridOverlay /><Vignette />{/snippet}
+ *   {#snippet ground()}<HorizonGrid animated rows={20} />{/snippet}
+ *   {#snippet stage()}
+ *     <FloatCard tiltMax={5}>
+ *       <Text expression="title-card" as="h1">deep signal</Text>
+ *     </FloatCard>
+ *   {/snippet}
+ *   {#snippet foreground()}
+ *     <Label color="muted">system / v4</Label>
+ *   {/snippet}
+ * </DepthScene>
+ */
+interface Props {
+    /** Perspective depth preset. */
+    perspective?: PerspectivePreset;
+    /** Background decorations: GridOverlay, ScanBand, Vignette. */
+    ambient?: Snippet;
+    /** Ground plane — HorizonGrid belongs here. */
+    ground?: Snippet;
+    /** Main content at mid-depth. */
+    stage?: Snippet;
+    /** Foreground labels and overlays closest to viewer. Pointer-events none. */
+    foreground?: Snippet;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const DepthScene: import("svelte").Component<Props, {}, "">;
+type DepthScene = ReturnType<typeof DepthScene>;
+export default DepthScene;

package/dist/components/scenes/LogScene.svelte

@@ -4,6 +4,20 @@
 	import GridOverlay from '../ambient/GridOverlay.svelte';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @remarks Use for process output, system boot sequences, build logs. Full-width terminal layout.
+	 * @example
+	 * <LogScene>
+	 *   {#snippet header()}
+	 *     <Label color="signal">deployment log</Label>
+	 *     <StatusDot status="pend" />
+	 *   {/snippet}
+	 *   <TerminalBoot lines={bootLines} oncomplete={() => deployed = true} />
+	 *   {#snippet footer()}
+	 *     {#if deployed}<Button variant="primary">view deployment</Button>{/if}
+	 *   {/snippet}
+	 * </LogScene>
+	 */
 	interface Props {
 		/** Additional CSS classes. */
 		class?: string;

package/dist/components/scenes/LogScene.svelte.d.ts

@@ -1,4 +1,18 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for process output, system boot sequences, build logs. Full-width terminal layout.
+ * @example
+ * <LogScene>
+ *   {#snippet header()}
+ *     <Label color="signal">deployment log</Label>
+ *     <StatusDot status="pend" />
+ *   {/snippet}
+ *   <TerminalBoot lines={bootLines} oncomplete={() => deployed = true} />
+ *   {#snippet footer()}
+ *     {#if deployed}<Button variant="primary">view deployment</Button>{/if}
+ *   {/snippet}
+ * </LogScene>
+ */
 interface Props {
     /** Additional CSS classes. */
     class?: string;

package/dist/components/scenes/NarrativeScene.svelte

@@ -3,6 +3,15 @@
 	import GridOverlay from '../ambient/GridOverlay.svelte';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @remarks Use for about pages, portfolio storytelling, feature narratives. Asymmetric: copy left, canvas right.
+	 * @example
+	 * <NarrativeScene chapter="our story">
+	 *   {#snippet heading()}<Text variant="heading" as="h2">the long signal</Text>{/snippet}
+	 *   {#snippet copy()}<Text>prose content describing the narrative here.</Text>{/snippet}
+	 *   {#snippet canvas()}<FloatCard><img src="/feature.jpg" alt="" /></FloatCard>{/snippet}
+	 * </NarrativeScene>
+	 */
 	interface Props {
 		/** Section label rendered as a chapter expression above the heading. */
 		chapter?: string;

package/dist/components/scenes/NarrativeScene.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for about pages, portfolio storytelling, feature narratives. Asymmetric: copy left, canvas right.
+ * @example
+ * <NarrativeScene chapter="our story">
+ *   {#snippet heading()}<Text variant="heading" as="h2">the long signal</Text>{/snippet}
+ *   {#snippet copy()}<Text>prose content describing the narrative here.</Text>{/snippet}
+ *   {#snippet canvas()}<FloatCard><img src="/feature.jpg" alt="" /></FloatCard>{/snippet}
+ * </NarrativeScene>
+ */
 interface Props {
     /** Section label rendered as a chapter expression above the heading. */
     chapter?: string;

package/dist/components/scenes/ReadoutScene.svelte

@@ -3,6 +3,17 @@
 	import ScanBand from '../ambient/ScanBand.svelte';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @remarks Use for dashboards, data views, log monitors. Dense, mono-forward with optional right sidebar.
+	 * @example
+	 * <ReadoutScene title="mission control">
+	 *   {#snippet header()}<StatusDot status="ok" /><Label>all systems nominal</Label>{/snippet}
+	 *   <Grid minColWidth="14rem" maxCols={4}>
+	 *     <MetricCard label="uptime" value="99.9%" />
+	 *   </Grid>
+	 *   {#snippet sidebar()}<SidebarNav items={navItems} />{/snippet}
+	 * </ReadoutScene>
+	 */
 	interface Props {
 		/** Optional title rendered as a readout expression label. */
 		title?: string;

package/dist/components/scenes/ReadoutScene.svelte.d.ts

@@ -1,4 +1,15 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for dashboards, data views, log monitors. Dense, mono-forward with optional right sidebar.
+ * @example
+ * <ReadoutScene title="mission control">
+ *   {#snippet header()}<StatusDot status="ok" /><Label>all systems nominal</Label>{/snippet}
+ *   <Grid minColWidth="14rem" maxCols={4}>
+ *     <MetricCard label="uptime" value="99.9%" />
+ *   </Grid>
+ *   {#snippet sidebar()}<SidebarNav items={navItems} />{/snippet}
+ * </ReadoutScene>
+ */
 interface Props {
     /** Optional title rendered as a readout expression label. */
     title?: string;