@hyvnt/hyvui 0.1.0

package/dist/components/depth/HorizonGrid.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** Number of horizontal lines receding toward the vanishing point. */
+    rows?: number;
+    /** Number of vertical convergence lines. */
+    cols?: number;
+    /** Normalized Y position of vanishing point (0-1). */
+    vanishY?: number;
+    /** If true, lines slowly drift toward the viewer. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    rows = 16,
+    cols = 12,
+    vanishY = 0.38,
+    animated = false,
+    class: className = '',
+  }: Props = $props();
+
+  let canvasEl: HTMLCanvasElement | undefined = $state();
+  let animFrame = 0;
+  let offset = $state(0);
+
+  const prefersReduced =
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      : false;
+
+  function draw(canvas: HTMLCanvasElement, t: number) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const w = canvas.width;
+    const h = canvas.height;
+    const vpX = w / 2;
+    const vpY = h * vanishY;
+
+    ctx.clearRect(0, 0, w, h);
+
+    // horizontal lines receding toward vanishing point
+    for (let i = 0; i < rows; i++) {
+      const progress = (i + t) / rows;
+      if (progress > 1) continue;
+      const y = vpY + (h - vpY) * Math.pow(progress, 1.6);
+      const nearness = Math.pow(progress, 0.8);
+
+      // color: gold near, teal far
+      const r = Math.round(199 * (1 - nearness) + 121 * nearness);
+      const g = Math.round(156 * (1 - nearness) + 166 * nearness);
+      const b = Math.round(87 * (1 - nearness) + 163 * nearness);
+      const alpha = 0.18 * (1 - nearness) + 0.06 * nearness;
+
+      // fade at vanishing point
+      const fadeNear = Math.min(1, progress * 4);
+      const finalAlpha = alpha * fadeNear;
+
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(w, y);
+      ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${finalAlpha})`;
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
+
+    // vertical convergence lines
+    for (let i = 0; i < cols; i++) {
+      const xBottom = (i / (cols - 1)) * w;
+      const progress = Math.abs(i / (cols - 1) - 0.5) * 2; // 0 at center, 1 at edges
+
+      // fade at edges
+      const edgeFade = 1 - Math.pow(progress, 2) * 0.7;
+      const alpha = 0.1 * edgeFade;
+
+      ctx.beginPath();
+      ctx.moveTo(vpX, vpY);
+      ctx.lineTo(xBottom, h);
+      ctx.strokeStyle = `rgba(199, 156, 87, ${alpha})`;
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
+  }
+
+  function animate() {
+    if (!canvasEl) return;
+    if (animated && !prefersReduced) {
+      offset = (offset + 0.003) % 1;
+    }
+    draw(canvasEl, offset);
+    if (animated && !prefersReduced) {
+      animFrame = requestAnimationFrame(animate);
+    }
+  }
+
+  onMount(() => {
+    if (!canvasEl) return;
+
+    const container = canvasEl.parentElement;
+    if (!container) return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const dpr = window.devicePixelRatio || 1;
+        canvasEl!.width = width * dpr;
+        canvasEl!.height = height * dpr;
+        canvasEl!.style.width = `${width}px`;
+        canvasEl!.style.height = `${height}px`;
+        const ctx = canvasEl!.getContext('2d');
+        if (ctx) ctx.scale(dpr, dpr);
+        // set logical dimensions for draw
+        canvasEl!.dataset.logicalW = String(width);
+        canvasEl!.dataset.logicalH = String(height);
+        draw(canvasEl!, offset);
+      }
+    });
+
+    ro.observe(container);
+
+    if (animated && !prefersReduced) {
+      animFrame = requestAnimationFrame(animate);
+    }
+
+    return () => {
+      ro.disconnect();
+      if (animFrame) cancelAnimationFrame(animFrame);
+    };
+  });
+
+  // redraw on offset changes when animated
+  $effect(() => {
+    if (canvasEl && animated && !prefersReduced) {
+      draw(canvasEl, offset);
+    }
+  });
+</script>
+
+<div class={cn('hyvui-horizon-grid', className)} aria-hidden="true">
+  <canvas bind:this={canvasEl}></canvas>
+</div>
+
+<style>
+  .hyvui-horizon-grid {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .hyvui-horizon-grid canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/dist/components/depth/HorizonGrid.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    /** Number of horizontal lines receding toward the vanishing point. */
+    rows?: number;
+    /** Number of vertical convergence lines. */
+    cols?: number;
+    /** Normalized Y position of vanishing point (0-1). */
+    vanishY?: number;
+    /** If true, lines slowly drift toward the viewer. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const HorizonGrid: import("svelte").Component<Props, {}, "">;
+type HorizonGrid = ReturnType<typeof HorizonGrid>;
+export default HorizonGrid;

package/dist/components/depth/Plinth.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Width of the plinth surface. */
+    width?: string;
+    /** How far the plinth recedes (visual depth). */
+    depth?: string;
+    /** Surface tint color. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    width = '100%',
+    depth = '40px',
+    color = 'rgba(199, 156, 87, 0.03)',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class={cn('hyvui-plinth-wrap', className)}>
+  <div
+    class="hyvui-plinth"
+    style:width={width}
+    style:height={depth}
+    style:background-color={color}
+  ></div>
+</div>
+
+<style>
+  .hyvui-plinth-wrap {
+    perspective: var(--perspective-mid);
+    perspective-origin: 50% 0%;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .hyvui-plinth {
+    transform: rotateX(70deg) translateZ(-20px);
+    border-top: 1px solid rgba(199, 156, 87, 0.08);
+    opacity: 0.6;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-plinth-wrap {
+      perspective: none;
+    }
+
+    .hyvui-plinth {
+      transform: none;
+      opacity: 0.3;
+    }
+  }
+</style>

package/dist/components/depth/Plinth.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    /** Width of the plinth surface. */
+    width?: string;
+    /** How far the plinth recedes (visual depth). */
+    depth?: string;
+    /** Surface tint color. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Plinth: import("svelte").Component<Props, {}, "">;
+type Plinth = ReturnType<typeof Plinth>;
+export default Plinth;

package/dist/components/display/Avatar.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Image source URL. */
+    src?: string;
+    /** Name for initials fallback. */
+    name?: string;
+    /** Avatar diameter in pixels. */
+    size?: number;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    src = '',
+    name = '',
+    size = 32,
+    class: className = '',
+  }: Props = $props();
+
+  const initials = $derived(
+    name
+      .split(' ')
+      .map((w) => w[0])
+      .join('')
+      .slice(0, 2)
+      .toUpperCase()
+  );
+</script>
+
+<span
+  class={cn('hyvui-avatar', className)}
+  style:width="{size}px"
+  style:height="{size}px"
+  style:font-size="{size * 0.38}px"
+>
+  {#if src}
+    <img {src} alt={name} class="hyvui-avatar-img" />
+  {:else}
+    <span class="hyvui-avatar-initials">{initials}</span>
+  {/if}
+</span>
+
+<style>
+  .hyvui-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--bg-elev);
+    border: 1px solid var(--line);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .hyvui-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .hyvui-avatar-initials {
+    font-family: var(--font-mono);
+    font-weight: 400;
+    color: var(--muted);
+    letter-spacing: 0.04em;
+  }
+</style>

package/dist/components/display/Avatar.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    /** Image source URL. */
+    src?: string;
+    /** Name for initials fallback. */
+    name?: string;
+    /** Avatar diameter in pixels. */
+    size?: number;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/display/Badge.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Badge color variant. */
+    variant?: 'default' | 'accent' | 'signal' | 'ok' | 'warn' | 'fail';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Badge text. */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const colorMap: Record<string, string> = {
+    default: 'var(--muted)',
+    accent: 'var(--accent)',
+    signal: 'var(--signal)',
+    ok: 'var(--status-ok)',
+    warn: 'var(--status-warn)',
+    fail: 'var(--status-fail)',
+  };
+
+  const bgMap: Record<string, string> = {
+    default: 'rgba(167, 157, 139, 0.08)',
+    accent: 'rgba(199, 156, 87, 0.08)',
+    signal: 'rgba(121, 166, 163, 0.08)',
+    ok: 'rgba(121, 166, 163, 0.08)',
+    warn: 'rgba(199, 156, 87, 0.08)',
+    fail: 'rgba(182, 106, 72, 0.08)',
+  };
+</script>
+
+<span
+  class={cn('hyvui-badge', className)}
+  style:color={colorMap[variant]}
+  style:background-color={bgMap[variant]}
+  style:border-color={colorMap[variant]}
+>
+  {#if children}{@render children()}{/if}
+</span>
+
+<style>
+  .hyvui-badge {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    font-weight: 400;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid;
+    border-color: currentColor;
+    opacity: 0.8;
+  }
+</style>

package/dist/components/display/Badge.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Badge color variant. */
+    variant?: 'default' | 'accent' | 'signal' | 'ok' | 'warn' | 'fail';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Badge text. */
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/display/Blockquote.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Quote content. */
+    children?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<blockquote class={cn('hyvui-blockquote', className)}>
+  {#if children}{@render children()}{/if}
+</blockquote>
+
+<style>
+  .hyvui-blockquote {
+    font-family: var(--font-body);
+    font-style: italic;
+    font-weight: 400;
+    color: var(--text-soft);
+    line-height: 1.6;
+    margin: 0;
+    padding: 1rem 1.25rem;
+    border-left: 2px solid var(--line-strong);
+    background: linear-gradient(135deg, rgba(199, 156, 87, 0.06), transparent 60%);
+  }
+</style>

package/dist/components/display/Blockquote.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Quote content. */
+    children?: Snippet;
+}
+declare const Blockquote: import("svelte").Component<Props, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
+export default Blockquote;

package/dist/components/display/CodeBlock.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Button from '../inputs/Button.svelte';
+
+  interface Props {
+    /** Code string to display. */
+    code?: string;
+    /** Language label (informational only, no syntax highlighting built-in). */
+    language?: string;
+    /** Show copy-to-clipboard button. */
+    copyable?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    code = '',
+    language = '',
+    copyable = true,
+    class: className = '',
+  }: Props = $props();
+
+  let copied = $state(false);
+
+  async function copyCode() {
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      setTimeout(() => {
+        copied = false;
+      }, 2000);
+    } catch {
+      // clipboard access denied
+    }
+  }
+</script>
+
+<div class={cn('hyvui-codeblock', className)}>
+  {#if copyable}
+    <div class="hyvui-codeblock-actions">
+      <Button variant="ghost" size="sm" onclick={copyCode}>
+        {copied ? 'copied' : 'copy'}
+      </Button>
+    </div>
+  {/if}
+  <pre class="hyvui-codeblock-pre"><code class="hyvui-codeblock-code">{code}</code></pre>
+</div>
+
+<style>
+  .hyvui-codeblock {
+    position: relative;
+    background-color: var(--bg-elev);
+    border: 1px solid var(--line);
+    overflow: hidden;
+  }
+
+  .hyvui-codeblock-actions {
+    position: absolute;
+    top: 0.375rem;
+    right: 0.375rem;
+    z-index: 1;
+  }
+
+  .hyvui-codeblock-pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+  }
+
+  .hyvui-codeblock-code {
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    color: var(--text-soft);
+    line-height: 1.6;
+  }
+</style>

package/dist/components/display/CodeBlock.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    /** Code string to display. */
+    code?: string;
+    /** Language label (informational only, no syntax highlighting built-in). */
+    language?: string;
+    /** Show copy-to-clipboard button. */
+    copyable?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/display/MetricCard.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+
+  interface Props {
+    /** Metric label. */
+    label?: string;
+    /** Metric value. */
+    value?: string | number;
+    /** Trend direction. */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend value string (e.g. "+12%"). */
+    trendValue?: string;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    label = '',
+    value = '',
+    trend,
+    trendValue = '',
+    class: className = '',
+  }: Props = $props();
+
+  const trendArrow: Record<string, string> = {
+    up: '\u2191',
+    down: '\u2193',
+    neutral: '\u2014',
+  };
+
+  const trendColor: Record<string, string> = {
+    up: 'var(--status-ok)',
+    down: 'var(--status-fail)',
+    neutral: 'var(--muted)',
+  };
+</script>
+
+<Surface variant="card" class={cn('hyvui-metric', className)}>
+  <span class="hyvui-metric-label">{label}</span>
+  <span class="hyvui-metric-value">{value}</span>
+  {#if trend}
+    <span class="hyvui-metric-trend" style:color={trendColor[trend]}>
+      {trendArrow[trend]}{#if trendValue}{' '}{trendValue}{/if}
+    </span>
+  {/if}
+</Surface>
+
+<style>
+  :global(.hyvui-metric) {
+    padding: var(--space-card);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .hyvui-metric-label {
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    line-height: 1.2;
+  }
+
+  .hyvui-metric-value {
+    font-family: var(--font-body);
+    font-size: clamp(2rem, 5vw, 3rem);
+    font-weight: 400;
+    line-height: 0.95;
+    letter-spacing: -0.05em;
+    color: var(--text);
+  }
+
+  .hyvui-metric-trend {
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    font-weight: 400;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+</style>

package/dist/components/display/MetricCard.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    /** Metric label. */
+    label?: string;
+    /** Metric value. */
+    value?: string | number;
+    /** Trend direction. */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend value string (e.g. "+12%"). */
+    trendValue?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const MetricCard: import("svelte").Component<Props, {}, "">;
+type MetricCard = ReturnType<typeof MetricCard>;
+export default MetricCard;