@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/patterns/PageHeader.svelte

@@ -1,114 +1,117 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Page title. */
-    title?: string;
-    /** Page subtitle. */
-    subtitle?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Breadcrumb slot. */
-    breadcrumb?: Snippet;
-    /** Actions slot (right-aligned). */
-    actions?: Snippet;
-  }
-
-  let {
-    title = '',
-    subtitle = '',
-    class: className = '',
-    breadcrumb,
-    actions,
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-page-header', className)}>
-  {#if breadcrumb}
-    <div class="hyvui-page-header-breadcrumb">
-      {@render breadcrumb()}
-    </div>
-  {/if}
-  <div class="hyvui-page-header-row">
-    <div class="hyvui-page-header-text">
-      <h1 class="hyvui-page-header-title">{title}</h1>
-      {#if subtitle}
-        <p class="hyvui-page-header-subtitle">{subtitle}</p>
-      {/if}
-    </div>
-    {#if actions}
-      <div class="hyvui-page-header-actions">
-        {@render actions()}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .hyvui-page-header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-    padding-bottom: var(--space-lg);
-    border-bottom: 1px solid var(--line);
-  }
-
-  .hyvui-page-header-breadcrumb {
-    min-width: 0;
-  }
-
-  .hyvui-page-header-row {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--space-xl);
-  }
-
-  .hyvui-page-header-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
-    min-width: 0;
-  }
-
-  .hyvui-page-header-title {
-    font-family: var(--font-body);
-    font-size: clamp(2rem, 4vw, 3.25rem);
-    font-weight: 400;
-    line-height: 0.95;
-    letter-spacing: -0.05em;
-    color: var(--text);
-    margin: 0;
-    text-wrap: balance;
-  }
-
-  .hyvui-page-header-subtitle {
-    font-family: var(--font-body);
-    font-size: 1.04rem;
-    color: var(--muted);
-    line-height: 1.62;
-    margin: 0;
-    max-width: 32rem;
-    text-wrap: pretty;
-  }
-
-  .hyvui-page-header-actions {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--space-sm);
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 720px) {
-    .hyvui-page-header-row {
-      flex-direction: column;
-    }
-
-    .hyvui-page-header-actions {
-      justify-content: flex-start;
-    }
-  }
-</style>
+<script lang="ts">
+	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;
+		/** Page subtitle. */
+		subtitle?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Breadcrumb slot. */
+		breadcrumb?: Snippet;
+		/** Actions slot (right-aligned). */
+		actions?: Snippet;
+	}
+
+	let { title = '', subtitle = '', class: className = '', breadcrumb, actions }: Props = $props();
+</script>
+
+<div class={cn('hyvui-page-header', className)}>
+	{#if breadcrumb}
+		<div class="hyvui-page-header-breadcrumb">
+			{@render breadcrumb()}
+		</div>
+	{/if}
+	<div class="hyvui-page-header-row">
+		<div class="hyvui-page-header-text">
+			<h1 class="hyvui-page-header-title">{title}</h1>
+			{#if subtitle}
+				<p class="hyvui-page-header-subtitle">{subtitle}</p>
+			{/if}
+		</div>
+		{#if actions}
+			<div class="hyvui-page-header-actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.hyvui-page-header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md);
+		padding-bottom: var(--space-lg);
+		border-bottom: 1px solid var(--line);
+		container-type: inline-size;
+	}
+
+	.hyvui-page-header-breadcrumb {
+		min-width: 0;
+	}
+
+	.hyvui-page-header-row {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--space-xl);
+	}
+
+	.hyvui-page-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm);
+		min-width: 0;
+	}
+
+	.hyvui-page-header-title {
+		font-family: var(--font-body);
+		font-size: clamp(2rem, 4vw, 3.25rem);
+		font-weight: 400;
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+		color: var(--text);
+		margin: 0;
+		text-wrap: balance;
+	}
+
+	.hyvui-page-header-subtitle {
+		font-family: var(--font-body);
+		font-size: 1.04rem;
+		color: var(--muted);
+		line-height: 1.62;
+		margin: 0;
+		max-width: 32rem;
+		text-wrap: pretty;
+	}
+
+	.hyvui-page-header-actions {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: var(--space-sm);
+		flex-shrink: 0;
+	}
+
+	@container (max-width: var(--cq-sm)) {
+		.hyvui-page-header-row {
+			flex-direction: column;
+		}
+
+		.hyvui-page-header-actions {
+			justify-content: flex-start;
+		}
+	}
+</style>

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;