@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/primitives/Text.svelte

@@ -1,98 +1,130 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-  import type { Expression } from './text.js';
-
-  interface Props {
-    /** HTML tag to render. */
-    as?: string;
-    /** Typographic style variant. */
-    variant?: 'heading' | 'body' | 'caption' | 'italic';
-    /** Text color token. */
-    color?: 'primary' | 'soft' | 'muted' | 'muted-strong' | 'accent' | 'signal';
-    /** Compositional intent expression. Applied alongside the variant. */
-    expression?: Expression;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Text content. */
-    children?: Snippet;
-  }
-
-  let {
-    as = 'p',
-    variant = 'body',
-    color = variant === 'heading' ? 'primary' : 'soft',
-    expression,
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const colorMap: Record<string, string> = {
-    primary: 'var(--text)',
-    soft: 'var(--text-soft)',
-    muted: 'var(--muted)',
-    'muted-strong': 'var(--muted-strong)',
-    accent: 'var(--accent)',
-    signal: 'var(--signal)',
-  };
-
-  const variantClass = $derived(
-    cn(
-      variant === 'heading' && 'hyvui-text-heading',
-      variant === 'body' && 'hyvui-text-body',
-      variant === 'caption' && 'hyvui-text-caption',
-      variant === 'italic' && 'hyvui-text-italic',
-      expression && `expr-${expression}`,
-      className
-    )
-  );
-</script>
-
-<svelte:element this={as} class={variantClass} style:color={colorMap[color]}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
-
-<style>
-  .hyvui-text-heading,
-  .hyvui-text-body,
-  .hyvui-text-caption,
-  .hyvui-text-italic {
-    margin: 0;
-  }
-
-  .hyvui-text-heading {
-    font-family: var(--font-body);
-    font-size: clamp(1.75rem, 4vw, 3.25rem);
-    font-weight: 400;
-    line-height: 0.95;
-    letter-spacing: -0.045em;
-    text-wrap: balance;
-  }
-
-  .hyvui-text-body {
-    font-family: var(--font-body);
-    font-size: 1.03rem;
-    font-weight: 400;
-    line-height: 1.62;
-    max-width: 32rem;
-    text-wrap: pretty;
-  }
-
-  .hyvui-text-caption {
-    font-family: var(--font-mono);
-    font-size: 0.7rem;
-    font-weight: 400;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    line-height: 1.2;
-  }
-
-  .hyvui-text-italic {
-    font-family: var(--font-body);
-    font-size: 1.02rem;
-    font-style: italic;
-    font-weight: 400;
-    line-height: 1.64;
-    text-wrap: pretty;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	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;
+		/** Typographic style variant. */
+		variant?: 'heading' | 'body' | 'caption' | 'italic';
+		/** Text color token. */
+		color?: 'primary' | 'soft' | 'muted' | 'muted-strong' | 'accent' | 'signal';
+		/** Compositional intent expression. Applied alongside the variant. */
+		expression?: Expression;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Text content. */
+		children?: Snippet;
+	}
+
+	let {
+		as = 'p',
+		variant = 'body',
+		color = variant === 'heading' ? 'primary' : 'soft',
+		expression,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		primary: 'var(--text)',
+		soft: 'var(--text-soft)',
+		muted: 'var(--muted)',
+		'muted-strong': 'var(--muted-strong)',
+		accent: 'var(--accent)',
+		signal: 'var(--signal)'
+	};
+
+	const variantClass = $derived(
+		cn(
+			variant === 'heading' && 'hyvui-text-heading',
+			variant === 'body' && 'hyvui-text-body',
+			variant === 'caption' && 'hyvui-text-caption',
+			variant === 'italic' && 'hyvui-text-italic',
+			expression && `expr-${expression}`,
+			className
+		)
+	);
+</script>
+
+<svelte:element this={as} class={variantClass} style:color={colorMap[color]}>
+	{#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+	.hyvui-text-heading,
+	.hyvui-text-body,
+	.hyvui-text-caption,
+	.hyvui-text-italic {
+		margin: 0;
+	}
+
+	.hyvui-text-heading {
+		font-family: var(--font-body);
+		font-size: clamp(1.75rem, 4vw, 3.25rem);
+		font-weight: 400;
+		line-height: 0.95;
+		letter-spacing: -0.045em;
+		text-wrap: balance;
+	}
+
+	.hyvui-text-body {
+		font-family: var(--font-body);
+		font-size: 1.03rem;
+		font-weight: 400;
+		line-height: 1.62;
+		max-width: 32rem;
+		text-wrap: pretty;
+	}
+
+	.hyvui-text-caption {
+		font-family: var(--font-mono);
+		font-size: 0.7rem;
+		font-weight: 400;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		line-height: 1.2;
+	}
+
+	.hyvui-text-italic {
+		font-family: var(--font-body);
+		font-size: 1.02rem;
+		font-style: italic;
+		font-weight: 400;
+		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

@@ -1,95 +1,102 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Optional scene title. */
-    title?: string;
-    /** Number of grid columns. */
-    cols?: number;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Filter controls area above the grid. */
-    filter?: Snippet;
-    /** Grid items (Cards, images, etc.). */
-    children?: Snippet;
-  }
-
-  let {
-    title = '',
-    cols = 3,
-    class: className = '',
-    filter,
-    children,
-  }: Props = $props();
-</script>
-
-<section class={cn('hyvui-archive', className)}>
-  <div class="hyvui-archive-inner">
-    {#if title || filter}
-      <div class="hyvui-archive-top">
-        {#if title}
-          <h2 class="hyvui-archive-title">{title}</h2>
-        {/if}
-        {#if filter}
-          <div class="hyvui-archive-filter">
-            {@render filter()}
-          </div>
-        {/if}
-      </div>
-    {/if}
-    <div
-      class="hyvui-archive-grid"
-      style:grid-template-columns="repeat({cols}, 1fr)"
-    >
-      {#if children}{@render children()}{/if}
-    </div>
-  </div>
-</section>
-
-<style>
-  .hyvui-archive {
-    position: relative;
-    min-height: 100dvh;
-    padding: var(--space-scene);
-  }
-
-  .hyvui-archive-inner {
-    display: flex;
-    flex-direction: column;
-    gap: calc(1.5rem * var(--reg-spacing-scale));
-  }
-
-  .hyvui-archive-top {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 1rem;
-  }
-
-  .hyvui-archive-title {
-    font-family: var(--font-body);
-    font-size: 1.4rem;
-    font-weight: 400;
-    line-height: var(--reg-heading-lh);
-    letter-spacing: var(--reg-heading-tracking);
-    color: var(--text);
-    margin: 0;
-  }
-
-  .hyvui-archive-filter {
-    flex-shrink: 0;
-  }
-
-  .hyvui-archive-grid {
-    display: grid;
-    gap: var(--space-inline);
-    /* no stagger offsets. uniformity is the aesthetic intent. */
-  }
-
-  @media (max-width: 768px) {
-    .hyvui-archive-grid {
-      grid-template-columns: 1fr !important;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	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;
+		/** Minimum card width used for responsive auto layout. */
+		minCardWidth?: string;
+		/** Maximum number of columns (auto layout). */
+		maxCols?: number;
+		/** Gap between items. */
+		gap?: string;
+		/** Deprecated alias for maxCols. */
+		cols?: number;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Filter controls area above the grid. */
+		filter?: Snippet;
+		/** Grid items (Cards, images, etc.). */
+		children?: Snippet;
+	}
+
+	let {
+		title = '',
+		minCardWidth = '18rem',
+		maxCols,
+		gap = 'var(--space-inline)',
+		cols,
+		class: className = '',
+		filter,
+		children
+	}: Props = $props();
+
+	const effectiveMaxCols = $derived(maxCols ?? cols ?? 3);
+</script>
+
+<section class={cn('hyvui-archive', className)}>
+	<div class="hyvui-archive-inner">
+		{#if title || filter}
+			<div class="hyvui-archive-top">
+				{#if title}
+					<h2 class="hyvui-archive-title">{title}</h2>
+				{/if}
+				{#if filter}
+					<div class="hyvui-archive-filter">
+						{@render filter()}
+					</div>
+				{/if}
+			</div>
+		{/if}
+		<Grid maxCols={effectiveMaxCols} minColWidth={minCardWidth} {gap} class="hyvui-archive-grid">
+			{#if children}{@render children()}{/if}
+		</Grid>
+	</div>
+</section>
+
+<style>
+	.hyvui-archive {
+		position: relative;
+		min-height: 100dvh;
+		padding: var(--space-scene);
+	}
+
+	.hyvui-archive-inner {
+		display: flex;
+		flex-direction: column;
+		gap: calc(1.5rem * var(--reg-spacing-scale));
+	}
+
+	.hyvui-archive-top {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	.hyvui-archive-title {
+		font-family: var(--font-body);
+		font-size: 1.4rem;
+		font-weight: 400;
+		line-height: var(--reg-heading-lh);
+		letter-spacing: var(--reg-heading-tracking);
+		color: var(--text);
+		margin: 0;
+	}
+
+	.hyvui-archive-filter {
+		flex-shrink: 0;
+	}
+</style>

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

@@ -1,8 +1,24 @@
 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;
-    /** Number of grid columns. */
+    /** Minimum card width used for responsive auto layout. */
+    minCardWidth?: string;
+    /** Maximum number of columns (auto layout). */
+    maxCols?: number;
+    /** Gap between items. */
+    gap?: string;
+    /** Deprecated alias for maxCols. */
     cols?: number;
     /** Additional CSS classes. */
     class?: 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;