@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/patterns/SearchBar.svelte

@@ -1,59 +1,59 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import Input from '../inputs/Input.svelte';
-  import StatusDot from '../feedback/StatusDot.svelte';
-
-  interface Props {
-    /** Current search value (bindable). */
-    value?: string;
-    /** Placeholder text. */
-    placeholder?: string;
-    /** Shows a loading indicator. */
-    loading?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires on input with the current value. */
-    onsearch?: (value: string) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    placeholder = 'search',
-    loading = false,
-    class: className = '',
-    onsearch,
-  }: Props = $props();
-
-  function handleInput() {
-    onsearch?.(value);
-  }
-</script>
-
-<div class={cn('hyvui-search-bar', className)}>
-  <Input
-    type="search"
-    bind:value
-    {placeholder}
-    oninput={handleInput}
-  />
-  {#if loading}
-    <div class="hyvui-search-loading">
-      <StatusDot status="pend" size={6} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .hyvui-search-bar {
-    position: relative;
-    width: 100%;
-  }
-
-  .hyvui-search-loading {
-    position: absolute;
-    right: 0.9rem;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Input from '../inputs/Input.svelte';
+	import StatusDot from '../feedback/StatusDot.svelte';
+
+	/**
+	 * @remarks Use in PageHeader actions slot or ArchiveScene filter slot.
+	 * @example
+	 * <SearchBar bind:value={query} onsearch={handleSearch} loading={isSearching} />
+	 */
+	interface Props {
+		/** Current search value (bindable). */
+		value?: string;
+		/** Placeholder text. */
+		placeholder?: string;
+		/** Shows a loading indicator. */
+		loading?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires on input with the current value. */
+		onsearch?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'search',
+		loading = false,
+		class: className = '',
+		onsearch
+	}: Props = $props();
+
+	function handleInput() {
+		onsearch?.(value);
+	}
+</script>
+
+<div class={cn('hyvui-search-bar', className)}>
+	<Input type="search" bind:value {placeholder} oninput={handleInput} />
+	{#if loading}
+		<div class="hyvui-search-loading">
+			<StatusDot status="pend" size={6} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-search-bar {
+		position: relative;
+		width: 100%;
+	}
+
+	.hyvui-search-loading {
+		position: absolute;
+		right: 0.9rem;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+</style>

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

@@ -1,3 +1,8 @@
+/**
+ * @remarks Use in PageHeader actions slot or ArchiveScene filter slot.
+ * @example
+ * <SearchBar bind:value={query} onsearch={handleSearch} loading={isSearching} />
+ */
 interface Props {
     /** Current search value (bindable). */
     value?: string;

package/dist/components/patterns/ShowcaseFrame.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import CornerBrackets from '../ambient/CornerBrackets.svelte';
+	import DepthStage from '../depth/DepthStage.svelte';
+	import DepthLayer from '../depth/DepthLayer.svelte';
+	import HorizonGrid from '../depth/HorizonGrid.svelte';
+	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;
+	}
+
+	let {
+		perspective = 'mid',
+		animated = false,
+		label,
+		minHeight = '28rem',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div class={cn('hyvui-showcase-frame', className)} style:min-height={minHeight}>
+	<HorizonGrid class="hyvui-showcase-frame-grid" {animated} vanishY={0.36} rows={14} cols={10} />
+
+	<div class="hyvui-showcase-frame-brackets" aria-hidden="true" style:opacity="var(--reg-ornament-opacity)">
+		<CornerBrackets size={18} />
+	</div>
+
+	<DepthStage {perspective} class="hyvui-showcase-frame-stage">
+		<DepthLayer level="raised" class="hyvui-showcase-frame-layer">
+			{#if children}{@render children()}{/if}
+		</DepthLayer>
+	</DepthStage>
+
+	{#if label}
+		<div class="hyvui-showcase-frame-label" aria-hidden="true">
+			{@render label()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-showcase-frame {
+		position: relative;
+		overflow: hidden;
+		border: 1px solid var(--line);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.hyvui-showcase-frame-grid) {
+		position: absolute;
+		inset: 0;
+	}
+
+	.hyvui-showcase-frame-brackets {
+		position: absolute;
+		inset: 1rem;
+		pointer-events: none;
+	}
+
+	:global(.hyvui-showcase-frame-stage) {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.hyvui-showcase-frame-layer) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.hyvui-showcase-frame-label {
+		position: absolute;
+		bottom: calc(0.75rem * var(--reg-spacing-scale, 1));
+		left: calc(0.9rem * var(--reg-spacing-scale, 1));
+		font-family: var(--font-mono);
+		font-size: 0.82rem;
+		letter-spacing: 0.06em;
+		color: var(--muted);
+		line-height: 1.6;
+		pointer-events: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.hyvui-showcase-frame-grid canvas) {
+			display: none;
+		}
+	}
+</style>

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

@@ -1,104 +1,118 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import StatusLine from '../feedback/StatusLine.svelte';
-  import { onMount } from 'svelte';
-
-  interface BootLine {
-    status: 'ok' | 'pend' | 'warn' | 'fail';
-    message: string;
-  }
-
-  interface Props {
-    /** Lines to display in sequence. */
-    lines?: BootLine[];
-    /** Initial delay before the first line appears (ms). */
-    delay?: number;
-    /** Interval between each line appearing (ms). */
-    interval?: number;
-    /** When true, shows all lines immediately. */
-    instant?: boolean;
-    /** Passes cursor visibility to visible lines. */
-    showCursor?: boolean;
-    /** Status line tone mode. */
-    tone?: 'split' | 'line';
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires when all lines have appeared. */
-    oncomplete?: () => void;
-  }
-
-  let {
-    lines = [],
-    delay = 600,
-    interval = 700,
-    instant = false,
-    showCursor = false,
-    tone = 'split',
-    class: className = '',
-    oncomplete,
-  }: Props = $props();
-
-  let visibleCount = $state(0);
-
-  onMount(() => {
-    if (lines.length === 0) {
-      oncomplete?.();
-      return;
-    }
-
-    if (instant) {
-      visibleCount = lines.length;
-      oncomplete?.();
-      return;
-    }
-
-    const timers: number[] = [];
-    timers.push(
-      window.setTimeout(() => {
-        visibleCount = 1;
-
-        if (lines.length === 1) {
-          oncomplete?.();
-          return;
-        }
-
-        const stepTimer = window.setInterval(() => {
-          visibleCount += 1;
-          if (visibleCount >= lines.length) {
-            window.clearInterval(stepTimer);
-            oncomplete?.();
-          }
-        }, interval);
-
-        timers.push(stepTimer);
-      }, delay)
-    );
-
-    return () => {
-      for (const timer of timers) {
-        window.clearTimeout(timer);
-        window.clearInterval(timer);
-      }
-    };
-  });
-</script>
-
-<div class={cn('hyvui-terminal-boot', className)}>
-  {#each lines as line, i}
-    <StatusLine
-      status={line.status}
-      message={line.message}
-      visible={i < visibleCount}
-      tone={tone}
-      cursor={showCursor && i < visibleCount}
-    />
-  {/each}
-</div>
-
-<style>
-  .hyvui-terminal-boot {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import StatusLine from '../feedback/StatusLine.svelte';
+	import { onMount } from 'svelte';
+
+	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[];
+		/** Initial delay before the first line appears (ms). */
+		delay?: number;
+		/** Interval between each line appearing (ms). */
+		interval?: number;
+		/** When true, shows all lines immediately. */
+		instant?: boolean;
+		/** Passes cursor visibility to visible lines. */
+		showCursor?: boolean;
+		/** Status line tone mode. */
+		tone?: 'split' | 'line';
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires when all lines have appeared. */
+		oncomplete?: () => void;
+	}
+
+	let {
+		lines = [],
+		delay = 600,
+		interval = 700,
+		instant = false,
+		showCursor = false,
+		tone = 'split',
+		class: className = '',
+		oncomplete
+	}: Props = $props();
+
+	let visibleCount = $state(0);
+
+	onMount(() => {
+		if (lines.length === 0) {
+			oncomplete?.();
+			return;
+		}
+
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		if (instant || prefersReduced) {
+			visibleCount = lines.length;
+			oncomplete?.();
+			return;
+		}
+
+		const timers: number[] = [];
+		timers.push(
+			window.setTimeout(() => {
+				visibleCount = 1;
+
+				if (lines.length === 1) {
+					oncomplete?.();
+					return;
+				}
+
+				const stepTimer = window.setInterval(() => {
+					visibleCount += 1;
+					if (visibleCount >= lines.length) {
+						window.clearInterval(stepTimer);
+						oncomplete?.();
+					}
+				}, interval);
+
+				timers.push(stepTimer);
+			}, delay)
+		);
+
+		return () => {
+			for (const timer of timers) {
+				window.clearTimeout(timer);
+				window.clearInterval(timer);
+			}
+		};
+	});
+</script>
+
+<div class={cn('hyvui-terminal-boot', className)}>
+	{#each lines as line, i}
+		<StatusLine
+			status={line.status}
+			message={line.message}
+			visible={i < visibleCount}
+			{tone}
+			cursor={showCursor && i < visibleCount}
+		/>
+	{/each}
+</div>
+
+<style>
+	.hyvui-terminal-boot {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+</style>

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,29 +1,56 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Line visibility strength. */
-    strength?: 'default' | 'strong';
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    strength = 'default',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<hr
-  class={cn('hyvui-divider', className)}
-  style:border-color={strength === 'strong' ? 'var(--line-strong)' : 'var(--line)'}
-/>
-
-<style>
-  .hyvui-divider {
-    border: none;
-    border-top: 1px solid;
-    margin: 0;
-    width: 100%;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <Divider />
+	 * <Divider strength="strong" />
+	 */
+	interface Props {
+		/** Line visibility strength. */
+		strength?: 'default' | 'strong';
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { strength = 'default', class: className = '' }: Props = $props();
+</script>
+
+<hr
+	class={cn('hyvui-divider', className)}
+	style:border-color={strength === 'strong' ? 'var(--line-strong)' : 'var(--line)'}
+/>
+
+<style>
+	.hyvui-divider {
+		border: none;
+		border-top: 1px solid;
+		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';