@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/patterns/ChapterMark.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @remarks Architectural section header. Creates structural rhythm without a container.
+	 * Use for section openers in long-form pages, portfolios, documentation.
+	 * @example
+	 * <ChapterMark index="01" title="signal architecture" descriptor="how the system speaks" />
+	 */
+	interface Props {
+		/** Chapter index — a number, roman numeral, or label. */
+		index?: string | number;
+		/** Chapter title. */
+		title: string;
+		/** Optional descriptor rendered in readout style below the title. */
+		descriptor?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { index, title, descriptor, class: className = '' }: Props = $props();
+</script>
+
+<header class={cn('hyvui-chapter-mark', className)}>
+	<div class="hyvui-chapter-mark-rule" aria-hidden="true"></div>
+	<div class="hyvui-chapter-mark-body">
+		{#if index !== undefined}
+			<div class="hyvui-chapter-mark-index" aria-hidden="true">
+				<span class="hyvui-chapter-mark-index-text">{index}</span>
+				<span class="hyvui-chapter-mark-index-line"></span>
+			</div>
+		{/if}
+		<div class="hyvui-chapter-mark-text">
+			<h2 class="hyvui-chapter-mark-title">{title}</h2>
+			{#if descriptor}
+				<p class="hyvui-chapter-mark-descriptor">{descriptor}</p>
+			{/if}
+		</div>
+	</div>
+</header>
+
+<style>
+	.hyvui-chapter-mark {
+		display: flex;
+		flex-direction: column;
+		gap: calc(1.25rem * var(--reg-spacing-scale, 1));
+	}
+
+	.hyvui-chapter-mark-rule {
+		position: relative;
+		overflow: hidden;
+		width: 100%;
+		height: 1px;
+		background: var(--line);
+	}
+
+	.hyvui-chapter-mark-rule::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: var(--bg);
+		transform-origin: right;
+		animation: chapter-rule-wipe 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+	}
+
+	@keyframes chapter-rule-wipe {
+		from {
+			transform: scaleX(1);
+		}
+		to {
+			transform: scaleX(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-chapter-mark-rule::after {
+			animation: none;
+			display: none;
+		}
+	}
+
+	.hyvui-chapter-mark-body {
+		display: flex;
+		gap: calc(1.5rem * var(--reg-spacing-scale, 1));
+		align-items: baseline;
+	}
+
+	.hyvui-chapter-mark-index {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		flex-shrink: 0;
+		padding-top: 0.3em;
+	}
+
+	.hyvui-chapter-mark-index-text {
+		font-family: var(--font-mono);
+		font-size: 0.62rem;
+		letter-spacing: 0.22em;
+		text-transform: uppercase;
+		color: var(--muted-strong);
+		line-height: 1;
+	}
+
+	.hyvui-chapter-mark-index-line {
+		display: block;
+		width: 2.5rem;
+		height: 1px;
+		background: var(--line);
+	}
+
+	.hyvui-chapter-mark-text {
+		display: flex;
+		flex-direction: column;
+		gap: calc(0.5rem * var(--reg-spacing-scale, 1));
+	}
+
+	.hyvui-chapter-mark-title {
+		margin: 0;
+		font-family: var(--font-body);
+		font-weight: 400;
+		font-size: clamp(1.8rem, 4vw, 3rem);
+		letter-spacing: -0.03em;
+		line-height: 1.05;
+		color: var(--text);
+		animation: chapter-title-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
+	}
+
+	@keyframes chapter-title-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-chapter-mark-title {
+			animation: none;
+		}
+	}
+
+	.hyvui-chapter-mark-descriptor {
+		margin: 0;
+		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/ChapterMark.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @remarks Architectural section header. Creates structural rhythm without a container.
+ * Use for section openers in long-form pages, portfolios, documentation.
+ * @example
+ * <ChapterMark index="01" title="signal architecture" descriptor="how the system speaks" />
+ */
+interface Props {
+    /** Chapter index — a number, roman numeral, or label. */
+    index?: string | number;
+    /** Chapter title. */
+    title: string;
+    /** Optional descriptor rendered in readout style below the title. */
+    descriptor?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const ChapterMark: import("svelte").Component<Props, {}, "">;
+type ChapterMark = ReturnType<typeof ChapterMark>;
+export default ChapterMark;

package/dist/components/patterns/ConfirmDialog.svelte

@@ -1,64 +1,75 @@
-<script lang="ts">
-  import Modal from '../layout/Modal.svelte';
-  import Button from '../inputs/Button.svelte';
-  import Stack from '../layout/Stack.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Controls dialog visibility. */
-    open?: boolean;
-    /** Action title. Names the action, never asks "are you sure?". */
-    title?: string;
-    /** Additional description. */
-    description?: string;
-    /** Confirm button label. */
-    confirmLabel?: string;
-    /** Cancel button label. */
-    cancelLabel?: string;
-    /** Makes the confirm button use the destructive variant. */
-    destructive?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires when the confirm button is clicked. */
-    onconfirm?: () => void;
-    /** Fires when the cancel button is clicked or dialog is dismissed. */
-    oncancel?: () => void;
-  }
-
-  let {
-    open = false,
-    title = '',
-    description = '',
-    confirmLabel = 'confirm',
-    cancelLabel = 'cancel',
-    destructive = false,
-    class: className = '',
-    onconfirm,
-    oncancel,
-  }: Props = $props();
-</script>
-
-<Modal {open} {title} class={className} onclose={oncancel}>
-  {#if description}
-    <p class="hyvui-confirm-desc">{description}</p>
-  {/if}
-  {#snippet footer()}
-    <Stack direction="horizontal" gap="0.75rem" justify="flex-end">
-      <Button variant="ghost" onclick={() => oncancel?.()}>{cancelLabel}</Button>
-      <Button
-        variant={destructive ? 'destructive' : 'primary'}
-        onclick={() => onconfirm?.()}
-      >{confirmLabel}</Button>
-    </Stack>
-  {/snippet}
-</Modal>
-
-<style>
-  .hyvui-confirm-desc {
-    font-family: var(--font-body);
-    font-size: 0.9rem;
-    color: var(--text-soft);
-    line-height: 1.6;
-    margin: 0;
-  }
-</style>
+<script lang="ts">
+	import Modal from '../layout/Modal.svelte';
+	import Button from '../inputs/Button.svelte';
+	import Stack from '../layout/Stack.svelte';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @remarks Use instead of building Modal + Button manually for any irreversible or destructive action.
+	 * @example
+	 * <ConfirmDialog
+	 *   open={showConfirm}
+	 *   title="delete report"
+	 *   description="this action cannot be undone."
+	 *   destructive
+	 *   onconfirm={deleteReport}
+	 *   oncancel={() => showConfirm = false}
+	 * />
+	 */
+	interface Props {
+		/** Controls dialog visibility. */
+		open?: boolean;
+		/** Action title. Names the action, never asks "are you sure?". */
+		title?: string;
+		/** Additional description. */
+		description?: string;
+		/** Confirm button label. */
+		confirmLabel?: string;
+		/** Cancel button label. */
+		cancelLabel?: string;
+		/** Makes the confirm button use the destructive variant. */
+		destructive?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires when the confirm button is clicked. */
+		onconfirm?: () => void;
+		/** Fires when the cancel button is clicked or dialog is dismissed. */
+		oncancel?: () => void;
+	}
+
+	let {
+		open = false,
+		title = '',
+		description = '',
+		confirmLabel = 'confirm',
+		cancelLabel = 'cancel',
+		destructive = false,
+		class: className = '',
+		onconfirm,
+		oncancel
+	}: Props = $props();
+</script>
+
+<Modal {open} {title} class={className} onclose={oncancel}>
+	{#if description}
+		<p class="hyvui-confirm-desc">{description}</p>
+	{/if}
+	{#snippet footer()}
+		<Stack direction="horizontal" gap="0.75rem" justify="flex-end">
+			<Button variant="ghost" onclick={() => oncancel?.()}>{cancelLabel}</Button>
+			<Button variant={destructive ? 'destructive' : 'primary'} onclick={() => onconfirm?.()}
+				>{confirmLabel}</Button
+			>
+		</Stack>
+	{/snippet}
+</Modal>
+
+<style>
+	.hyvui-confirm-desc {
+		font-family: var(--font-body);
+		font-size: 0.9rem;
+		color: var(--text-soft);
+		line-height: 1.6;
+		margin: 0;
+	}
+</style>

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

@@ -1,3 +1,15 @@
+/**
+ * @remarks Use instead of building Modal + Button manually for any irreversible or destructive action.
+ * @example
+ * <ConfirmDialog
+ *   open={showConfirm}
+ *   title="delete report"
+ *   description="this action cannot be undone."
+ *   destructive
+ *   onconfirm={deleteReport}
+ *   oncancel={() => showConfirm = false}
+ * />
+ */
 interface Props {
     /** Controls dialog visibility. */
     open?: boolean;

package/dist/components/patterns/DepthPortal.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import CornerBrackets from '../ambient/CornerBrackets.svelte';
+	import ScanBand from '../ambient/ScanBand.svelte';
+	import DepthStage from '../depth/DepthStage.svelte';
+	import DepthLayer from '../depth/DepthLayer.svelte';
+	import HorizonGrid from '../depth/HorizonGrid.svelte';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @remarks A framed spatial window — a card alternative where content lives in depth, not on a surface.
+	 * Use in place of Card when you want content to feel embedded in space.
+	 * @example
+	 * <DepthPortal label="sensor array / 004" active={scanning}>
+	 *   <Text variant="heading">deep signal</Text>
+	 * </DepthPortal>
+	 */
+	interface Props {
+		/** Readout label at bottom-left. */
+		label?: string;
+		/** When true, a ScanBand sweeps through to signal activity. */
+		active?: boolean;
+		/** CSS aspect-ratio value. */
+		aspect?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Content rendered at foreground depth level. */
+		children?: Snippet;
+	}
+
+	let {
+		label,
+		active = false,
+		aspect = '4/3',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div class={cn('hyvui-depth-portal', className)} style:aspect-ratio={aspect}>
+	<HorizonGrid class="hyvui-depth-portal-grid" animated={false} vanishY={0.42} rows={10} cols={8} />
+
+	<div class="hyvui-depth-portal-brackets" aria-hidden="true" style:opacity="var(--reg-ornament-opacity)">
+		<CornerBrackets size={14} />
+	</div>
+
+	<div class="hyvui-depth-portal-scan" aria-hidden="true" class:hyvui-depth-portal-scan--active={active}>
+		<ScanBand axis="y" size="12%" duration="2.8s" />
+	</div>
+
+	<DepthStage perspective="near" class="hyvui-depth-portal-stage">
+		<DepthLayer level="foreground" class="hyvui-depth-portal-layer">
+			{#if children}{@render children()}{/if}
+		</DepthLayer>
+	</DepthStage>
+
+	{#if label}
+		<div class="hyvui-depth-portal-label" aria-hidden="true">{label}</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-depth-portal {
+		position: relative;
+		overflow: hidden;
+		border: 1px solid var(--line);
+	}
+
+	:global(.hyvui-depth-portal-grid) {
+		position: absolute;
+		inset: 0;
+	}
+
+	.hyvui-depth-portal-brackets {
+		position: absolute;
+		inset: 0.75rem;
+		pointer-events: none;
+	}
+
+	.hyvui-depth-portal-scan {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity 0.4s var(--ease-fast);
+	}
+
+	.hyvui-depth-portal-scan--active {
+		opacity: 1;
+	}
+
+	:global(.hyvui-depth-portal-stage) {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.hyvui-depth-portal-layer) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.hyvui-depth-portal-label {
+		position: absolute;
+		bottom: 0.65rem;
+		left: 0.8rem;
+		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) {
+		.hyvui-depth-portal-scan {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/**
+ * @remarks A framed spatial window — a card alternative where content lives in depth, not on a surface.
+ * Use in place of Card when you want content to feel embedded in space.
+ * @example
+ * <DepthPortal label="sensor array / 004" active={scanning}>
+ *   <Text variant="heading">deep signal</Text>
+ * </DepthPortal>
+ */
+interface Props {
+    /** Readout label at bottom-left. */
+    label?: string;
+    /** When true, a ScanBand sweeps through to signal activity. */
+    active?: boolean;
+    /** CSS aspect-ratio value. */
+    aspect?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Content rendered at foreground depth level. */
+    children?: Snippet;
+}
+declare const DepthPortal: import("svelte").Component<Props, {}, "">;
+type DepthPortal = ReturnType<typeof DepthPortal>;
+export default DepthPortal;

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;