@hyvnt/hyvui 0.3.0 → 0.4.0

package/dist/components/patterns/Manifesto.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @remarks Full editorial statement block. Text in space, not text in a box.
+	 * Use for philosophical statements, design principles, section intros.
+	 * @example
+	 * <Manifesto
+	 *   statement="quiet confidence. technical depth. no ornamental sludge."
+	 *   attribution="design posture"
+	 *   accent="gold"
+	 * />
+	 */
+	interface Props {
+		/** The statement text. */
+		statement: string;
+		/** Optional attribution label rendered below in readout style. */
+		attribution?: string;
+		/** Side accent rule color. */
+		accent?: 'gold' | 'signal' | 'none';
+		/** Text alignment. */
+		align?: 'left' | 'center';
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		statement,
+		attribution,
+		accent = 'none',
+		align = 'left',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<blockquote
+	class={cn('hyvui-manifesto', `hyvui-manifesto--accent-${accent}`, `hyvui-manifesto--${align}`, className)}
+>
+	<p class="hyvui-manifesto-statement">{statement}</p>
+	{#if attribution}
+		<footer class="hyvui-manifesto-attribution">
+			<span class="hyvui-manifesto-rule" aria-hidden="true"></span>
+			<cite class="hyvui-manifesto-cite">{attribution}</cite>
+		</footer>
+	{/if}
+</blockquote>
+
+<style>
+	.hyvui-manifesto {
+		margin: 0;
+		padding: 0;
+		border: none;
+		display: flex;
+		flex-direction: column;
+		gap: calc(1rem * var(--reg-spacing-scale, 1));
+	}
+
+	/* accent rule — pseudo-element so it can animate scaleY */
+	.hyvui-manifesto--accent-gold,
+	.hyvui-manifesto--accent-signal {
+		position: relative;
+		padding-left: 1.25rem;
+	}
+
+	.hyvui-manifesto--accent-gold::before,
+	.hyvui-manifesto--accent-signal::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 2px;
+		height: 100%;
+		transform-origin: top;
+		animation: manifesto-rule-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+	}
+
+	.hyvui-manifesto--accent-gold::before {
+		background: rgba(199, 156, 87, 0.5);
+	}
+
+	.hyvui-manifesto--accent-signal::before {
+		background: rgba(121, 166, 163, 0.5);
+	}
+
+	@keyframes manifesto-rule-in {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+
+	.hyvui-manifesto--center {
+		align-items: center;
+		text-align: center;
+		padding-left: 0;
+	}
+
+	.hyvui-manifesto--center::before {
+		display: none;
+	}
+
+	/* statement */
+	.hyvui-manifesto-statement {
+		margin: 0;
+		font-family: var(--font-body);
+		font-style: italic;
+		font-size: clamp(1.1rem, 2.5vw, 1.6rem);
+		line-height: 1.45;
+		color: var(--text-soft);
+		max-width: 30rem;
+		text-wrap: pretty;
+		animation: manifesto-text-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
+	}
+
+	@keyframes manifesto-text-in {
+		from {
+			opacity: 0;
+			transform: translateX(4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-manifesto--accent-gold::before,
+		.hyvui-manifesto--accent-signal::before {
+			animation: none;
+		}
+
+		.hyvui-manifesto-statement {
+			animation: none;
+		}
+	}
+
+	.hyvui-manifesto--center .hyvui-manifesto-statement {
+		text-align: center;
+		max-width: 36rem;
+	}
+
+	/* attribution */
+	.hyvui-manifesto-attribution {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+	}
+
+	.hyvui-manifesto-rule {
+		display: block;
+		width: 2rem;
+		height: 1px;
+		background: var(--line);
+		flex-shrink: 0;
+	}
+
+	.hyvui-manifesto-cite {
+		font-style: normal;
+		font-family: var(--font-mono);
+		font-size: 0.82rem;
+		letter-spacing: 0.06em;
+		color: var(--muted);
+		line-height: 1.6;
+	}
+
+	.hyvui-manifesto--center .hyvui-manifesto-attribution {
+		justify-content: center;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+/**
+ * @remarks Full editorial statement block. Text in space, not text in a box.
+ * Use for philosophical statements, design principles, section intros.
+ * @example
+ * <Manifesto
+ *   statement="quiet confidence. technical depth. no ornamental sludge."
+ *   attribution="design posture"
+ *   accent="gold"
+ * />
+ */
+interface Props {
+    /** The statement text. */
+    statement: string;
+    /** Optional attribution label rendered below in readout style. */
+    attribution?: string;
+    /** Side accent rule color. */
+    accent?: 'gold' | 'signal' | 'none';
+    /** Text alignment. */
+    align?: 'left' | 'center';
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Manifesto: import("svelte").Component<Props, {}, "">;
+type Manifesto = ReturnType<typeof Manifesto>;
+export default Manifesto;

package/dist/components/patterns/PageHeader.svelte

@@ -2,6 +2,14 @@
 	import { cn } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
+	/**
+	 * @remarks Use at the top of any content page: dashboards, settings, detail views.
+	 * @see surface — add `use:surface` for an entrance animation on mount.
+	 * @example
+	 * <PageHeader title="field reports" subtitle="recent observations from the network">
+	 *   {#snippet actions()}<Button variant="primary">new report</Button>{/snippet}
+	 * </PageHeader>
+	 */
 	interface Props {
 		/** Page title. */
 		title?: string;

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

@@ -1,4 +1,12 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use at the top of any content page: dashboards, settings, detail views.
+ * @see surface — add `use:surface` for an entrance animation on mount.
+ * @example
+ * <PageHeader title="field reports" subtitle="recent observations from the network">
+ *   {#snippet actions()}<Button variant="primary">new report</Button>{/snippet}
+ * </PageHeader>
+ */
 interface Props {
     /** Page title. */
     title?: string;

package/dist/components/patterns/PullQuote.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @remarks Breakout quotation — larger than Blockquote, a page-level element.
+	 * Use for testimonials, design maxims, and editorial pull-quotes.
+	 * @example
+	 * <PullQuote
+	 *   quote="every detail should look placed, not merely present."
+	 *   attribution="design constraints"
+	 *   source="hyvui"
+	 * />
+	 */
+	interface Props {
+		/** The quotation text. */
+		quote: string;
+		/** Who said it. */
+		attribution?: string;
+		/** Where it came from. */
+		source?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { quote, attribution, source, class: className = '' }: Props = $props();
+</script>
+
+<figure class={cn('hyvui-pull-quote', className)}>
+	<div class="hyvui-pull-quote-bracket" aria-hidden="true">[</div>
+	<blockquote class="hyvui-pull-quote-body">
+		<p class="hyvui-pull-quote-text">{quote}</p>
+	</blockquote>
+	{#if attribution || source}
+		<figcaption class="hyvui-pull-quote-caption">
+			{#if attribution}
+				<cite class="hyvui-pull-quote-attribution">{attribution}</cite>
+			{/if}
+			{#if attribution && source}
+				<span class="hyvui-pull-quote-sep" aria-hidden="true">·</span>
+			{/if}
+			{#if source}
+				<span class="hyvui-pull-quote-source">{source}</span>
+			{/if}
+		</figcaption>
+	{/if}
+</figure>
+
+<style>
+	.hyvui-pull-quote {
+		margin: 0;
+		padding: 0;
+		position: relative;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 1rem;
+		padding-left: 1.5rem;
+	}
+
+	.hyvui-pull-quote::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 2px;
+		height: 100%;
+		background: rgba(199, 156, 87, 0.45);
+		transform-origin: top;
+		animation: pullquote-border-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+	}
+
+	@keyframes pullquote-border-in {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-pull-quote::before {
+			animation: none;
+		}
+	}
+
+	.hyvui-pull-quote-bracket {
+		font-family: var(--font-body);
+		font-size: clamp(1.1rem, 2.5vw, 1.6rem);
+		line-height: 1.45;
+		color: rgba(199, 156, 87, 0.4);
+		pointer-events: none;
+		user-select: none;
+		align-self: start;
+		margin-top: 0.05em;
+	}
+
+	.hyvui-pull-quote-body {
+		margin: 0;
+		padding: 0;
+		border: none;
+		display: flex;
+		flex-direction: column;
+		gap: calc(0.9rem * var(--reg-spacing-scale, 1));
+	}
+
+	.hyvui-pull-quote-text {
+		margin: 0;
+		font-family: var(--font-body);
+		font-style: italic;
+		font-size: clamp(1.1rem, 2.5vw, 1.6rem);
+		line-height: 1.45;
+		color: var(--text-soft);
+		text-wrap: pretty;
+	}
+
+	.hyvui-pull-quote-caption {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.hyvui-pull-quote-attribution {
+		font-style: italic;
+		font-family: var(--font-body);
+		font-size: 0.88rem;
+		color: var(--muted-strong);
+		line-height: 1.5;
+	}
+
+	.hyvui-pull-quote-sep {
+		color: var(--muted);
+		opacity: 0.75;
+		font-family: var(--font-mono);
+		font-size: 0.75rem;
+	}
+
+	.hyvui-pull-quote-source {
+		font-family: var(--font-mono);
+		font-size: 0.82rem;
+		letter-spacing: 0.06em;
+		color: var(--muted);
+		line-height: 1.6;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+/**
+ * @remarks Breakout quotation — larger than Blockquote, a page-level element.
+ * Use for testimonials, design maxims, and editorial pull-quotes.
+ * @example
+ * <PullQuote
+ *   quote="every detail should look placed, not merely present."
+ *   attribution="design constraints"
+ *   source="hyvui"
+ * />
+ */
+interface Props {
+    /** The quotation text. */
+    quote: string;
+    /** Who said it. */
+    attribution?: string;
+    /** Where it came from. */
+    source?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const PullQuote: import("svelte").Component<Props, {}, "">;
+type PullQuote = ReturnType<typeof PullQuote>;
+export default PullQuote;

package/dist/components/patterns/RegisterSwitcher.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { applyRegister, registers } from '../../system/register.js';
+	import type { Register } from '../../system/register.js';
+
+	/**
+	 * A compact three-state toggle for switching between aesthetic registers.
+	 * Persists choice to localStorage. Mounts invisibly until hovered.
+	 *
+	 * @example
+	 * <RegisterSwitcher />
+	 * <RegisterSwitcher defaultRegister="hextech" />
+	 * <RegisterSwitcher choices={['field-notebook', 'hextech', 'arcane']} />
+	 */
+	interface Props {
+		/** Which register to apply on first load (if no localStorage entry). */
+		defaultRegister?: Register;
+		/** Subset of registers to expose. Defaults to field-notebook, hextech, arcane. */
+		choices?: Register[];
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		defaultRegister = 'field-notebook',
+		choices = ['field-notebook', 'hextech', 'arcane'],
+		class: className = ''
+	}: Props = $props();
+
+	const STORAGE_KEY = 'hyvui-register';
+
+	const labels: Record<Register, string> = {
+		'field-notebook': 'FN',
+		'mission-control': 'MC',
+		archive: 'AV',
+		hextech: 'HX',
+		arcane: 'ARC'
+	};
+
+	const titles: Record<Register, string> = {
+		'field-notebook': 'Field Notebook',
+		'mission-control': 'Mission Control',
+		archive: 'Archive',
+		hextech: 'Hextech',
+		arcane: 'Arcane'
+	};
+
+	let current: Register = $state(defaultRegister);
+
+	function init() {
+		if (typeof localStorage === 'undefined') return;
+		const saved = localStorage.getItem(STORAGE_KEY) as Register | null;
+		if (saved && (registers as string[]).includes(saved)) {
+			current = saved;
+		}
+		applyRegister(current);
+	}
+
+	function select(reg: Register) {
+		current = reg;
+		applyRegister(reg);
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem(STORAGE_KEY, reg);
+		}
+	}
+
+	$effect(() => {
+		init();
+	});
+</script>
+
+<div class={cn('hyvui-reg-switcher', className)} role="group" aria-label="Theme register">
+	{#each choices as reg}
+		<button
+			class={cn('hyvui-reg-btn', current === reg && 'hyvui-reg-btn--active')}
+			onclick={() => select(reg)}
+			title={titles[reg]}
+			aria-pressed={current === reg}
+		>
+			{labels[reg]}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.hyvui-reg-switcher {
+		display: inline-flex;
+		gap: 1px;
+		background: rgba(255, 255, 255, 0.04);
+		border: 1px solid var(--line);
+		padding: 2px;
+		opacity: 0.4;
+		transition: opacity var(--transition-smooth);
+	}
+
+	.hyvui-reg-switcher:hover,
+	.hyvui-reg-switcher:focus-within {
+		opacity: 1;
+	}
+
+	.hyvui-reg-btn {
+		font-family: var(--font-mono);
+		font-size: 0.58rem;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--muted);
+		background: transparent;
+		border: none;
+		padding: 0.25rem 0.4rem;
+		cursor: pointer;
+		transition:
+			color var(--transition-fast),
+			background var(--transition-fast);
+		line-height: 1;
+	}
+
+	.hyvui-reg-btn:hover {
+		color: var(--text-soft);
+		background: rgba(255, 255, 255, 0.06);
+	}
+
+	.hyvui-reg-btn--active {
+		color: var(--accent);
+		background: rgba(255, 255, 255, 0.05);
+	}
+
+	/* switcher itself stays visually neutral — never adopts register ornaments */
+	.hyvui-reg-btn:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { Register } from '../../system/register.js';
+/**
+ * A compact three-state toggle for switching between aesthetic registers.
+ * Persists choice to localStorage. Mounts invisibly until hovered.
+ *
+ * @example
+ * <RegisterSwitcher />
+ * <RegisterSwitcher defaultRegister="hextech" />
+ * <RegisterSwitcher choices={['field-notebook', 'hextech', 'arcane']} />
+ */
+interface Props {
+    /** Which register to apply on first load (if no localStorage entry). */
+    defaultRegister?: Register;
+    /** Subset of registers to expose. Defaults to field-notebook, hextech, arcane. */
+    choices?: Register[];
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const RegisterSwitcher: import("svelte").Component<Props, {}, "">;
+type RegisterSwitcher = ReturnType<typeof RegisterSwitcher>;
+export default RegisterSwitcher;

package/dist/components/patterns/SearchBar.svelte

@@ -3,6 +3,11 @@
 	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;

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>