@hyvnt/hyvui 0.1.0

package/dist/components/ambient/ScanBand.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Enable the scan animation. */
+    active?: boolean;
+    /** Animation axis. */
+    axis?: 'x' | 'y';
+    /** Thickness/width of the band. */
+    size?: string;
+    /** Animation duration. */
+    duration?: string;
+    /** Gradient used for the band. */
+    gradient?: string;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    active = true,
+    axis = 'y',
+    size = '1px',
+    duration = '8s',
+    gradient = 'linear-gradient(90deg, transparent, rgba(199, 156, 87, 0.18), transparent)',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+{#if active}
+  <div
+    class={cn('hyvui-scan-band', axis === 'x' ? 'hyvui-scan-band-x' : 'hyvui-scan-band-y', className)}
+    style:--scan-size={size}
+    style:--scan-duration={duration}
+    style:--scan-gradient={gradient}
+    aria-hidden="true"
+  ></div>
+{/if}
+
+<style>
+  .hyvui-scan-band {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .hyvui-scan-band::after {
+    content: '';
+    position: absolute;
+    background: var(--scan-gradient);
+  }
+
+  .hyvui-scan-band-y::after {
+    left: 0;
+    right: 0;
+    height: var(--scan-size);
+    animation: scan-band-y var(--scan-duration) linear infinite;
+  }
+
+  .hyvui-scan-band-x::after {
+    top: 0;
+    bottom: 0;
+    width: var(--scan-size);
+    animation: scan-band-x var(--scan-duration) linear infinite;
+  }
+
+  @keyframes scan-band-y {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(100vh);
+    }
+  }
+
+  @keyframes scan-band-x {
+    0% {
+      transform: translateX(-120%);
+    }
+    100% {
+      transform: translateX(520%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-scan-band::after {
+      animation: none;
+      display: none;
+    }
+  }
+</style>

package/dist/components/ambient/ScanBand.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Enable the scan animation. */
+    active?: boolean;
+    /** Animation axis. */
+    axis?: 'x' | 'y';
+    /** Thickness/width of the band. */
+    size?: string;
+    /** Animation duration. */
+    duration?: string;
+    /** Gradient used for the band. */
+    gradient?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const ScanBand: import("svelte").Component<Props, {}, "">;
+type ScanBand = ReturnType<typeof ScanBand>;
+export default ScanBand;

package/dist/components/ambient/SignalRing.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Enable the pulsing animation. */
+    active?: boolean;
+    /** Ring diameter in pixels. */
+    size?: number;
+    /** Ring color (CSS color value). */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    active = true,
+    size = 200,
+    color = 'var(--accent)',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class={cn('hyvui-signal-ring', className)}
+  style:width="{size}px"
+  style:height="{size}px"
+  aria-hidden="true"
+>
+  {#if active}
+    <span class="hyvui-signal-ring-pulse hyvui-signal-ring-1" style:border-color={color}></span>
+    <span class="hyvui-signal-ring-pulse hyvui-signal-ring-2" style:border-color={color}></span>
+    <span class="hyvui-signal-ring-pulse hyvui-signal-ring-3" style:border-color={color}></span>
+  {/if}
+  <span class="hyvui-signal-ring-core" style:background-color={color}></span>
+</div>
+
+<style>
+  .hyvui-signal-ring {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .hyvui-signal-ring-core {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    opacity: 0.6;
+  }
+
+  .hyvui-signal-ring-pulse {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 1px solid;
+    opacity: 0;
+    animation: signal-ring-expand 3.6s ease-out infinite;
+  }
+
+  .hyvui-signal-ring-1 {
+    animation-delay: 0s;
+  }
+
+  .hyvui-signal-ring-2 {
+    animation-delay: 1.2s;
+  }
+
+  .hyvui-signal-ring-3 {
+    animation-delay: 2.4s;
+  }
+
+  @keyframes signal-ring-expand {
+    0% {
+      transform: scale(0.1);
+      opacity: 0.4;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-signal-ring-pulse {
+      animation: none;
+      opacity: 0.08;
+      transform: scale(0.6);
+    }
+
+    .hyvui-signal-ring-2 {
+      transform: scale(0.8);
+    }
+
+    .hyvui-signal-ring-3 {
+      transform: scale(1);
+    }
+  }
+</style>

package/dist/components/ambient/SignalRing.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    /** Enable the pulsing animation. */
+    active?: boolean;
+    /** Ring diameter in pixels. */
+    size?: number;
+    /** Ring color (CSS color value). */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const SignalRing: import("svelte").Component<Props, {}, "">;
+type SignalRing = ReturnType<typeof SignalRing>;
+export default SignalRing;

package/dist/components/ambient/ThreadLine.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Start x position (CSS value). */
+    x1?: string;
+    /** Start y position (CSS value). */
+    y1?: string;
+    /** End x position (CSS value). */
+    x2?: string;
+    /** End y position (CSS value). */
+    y2?: string;
+    /** Enable the traveling dot animation. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    x1 = '0%',
+    y1 = '0%',
+    x2 = '100%',
+    y2 = '100%',
+    animated = true,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  class={cn('hyvui-thread-line', className)}
+  aria-hidden="true"
+>
+  <line
+    {x1} {y1} {x2} {y2}
+    stroke="var(--line)"
+    stroke-width="1"
+  />
+  {#if animated}
+    <circle r="2" fill="var(--accent)">
+      <animateMotion
+        dur="3s"
+        repeatCount="indefinite"
+        path="M 0,0 L 1,0"
+        keyPoints="0;1"
+        keyTimes="0;1"
+        calcMode="linear"
+      >
+        <mpath>
+          <line {x1} {y1} {x2} {y2} />
+        </mpath>
+      </animateMotion>
+      <animate
+        attributeName="opacity"
+        values="0;0.8;0.8;0"
+        keyTimes="0;0.1;0.85;1"
+        dur="3s"
+        repeatCount="indefinite"
+      />
+    </circle>
+  {/if}
+</svg>
+
+<style>
+  .hyvui-thread-line {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: visible;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-thread-line circle {
+      display: none;
+    }
+  }
+</style>

package/dist/components/ambient/ThreadLine.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Start x position (CSS value). */
+    x1?: string;
+    /** Start y position (CSS value). */
+    y1?: string;
+    /** End x position (CSS value). */
+    x2?: string;
+    /** End y position (CSS value). */
+    y2?: string;
+    /** Enable the traveling dot animation. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const ThreadLine: import("svelte").Component<Props, {}, "">;
+type ThreadLine = ReturnType<typeof ThreadLine>;
+export default ThreadLine;

package/dist/components/ambient/Vignette.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class={cn('hyvui-vignette', className)} aria-hidden="true"></div>
+
+<style>
+  .hyvui-vignette {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: var(--z-overlay);
+    background:
+      radial-gradient(ellipse at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4)),
+      radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(0, 0, 0, 0.5));
+  }
+</style>

package/dist/components/ambient/Vignette.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Vignette: import("svelte").Component<Props, {}, "">;
+type Vignette = ReturnType<typeof Vignette>;
+export default Vignette;

package/dist/components/depth/DepthLayer.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { DepthLevel } from '../../system/depth/depth.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Z-level within a parent DepthStage. */
+    level?: DepthLevel;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Layer content. */
+    children?: Snippet;
+  }
+
+  let {
+    level = 'ground',
+    as = 'div',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<svelte:element this={as} class={cn(`depth-${level}`, className)}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

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

@@ -0,0 +1,15 @@
+import type { DepthLevel } from '../../system/depth/depth.js';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Z-level within a parent DepthStage. */
+    level?: DepthLevel;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Layer content. */
+    children?: Snippet;
+}
+declare const DepthLayer: import("svelte").Component<Props, {}, "">;
+type DepthLayer = ReturnType<typeof DepthLayer>;
+export default DepthLayer;

package/dist/components/depth/DepthStage.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { PerspectivePreset } from '../../system/depth/depth.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Perspective distance preset. */
+    perspective?: PerspectivePreset;
+    /** CSS percentage for horizontal perspective origin. */
+    originX?: string;
+    /** CSS percentage for vertical perspective origin. */
+    originY?: string;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Stage content. */
+    children?: Snippet;
+  }
+
+  let {
+    perspective = 'mid',
+    originX = '50%',
+    originY = '40%',
+    as = 'div',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const perspectiveMap: Record<PerspectivePreset, string> = {
+    near: 'var(--perspective-near)',
+    mid: 'var(--perspective-mid)',
+    far: 'var(--perspective-far)',
+  };
+</script>
+
+<svelte:element
+  this={as}
+  class={cn('hyvui-depth-stage', className)}
+  style:perspective={perspectiveMap[perspective]}
+  style:perspective-origin="{originX} {originY}"
+>
+  {#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+  .hyvui-depth-stage {
+    transform-style: preserve-3d;
+    position: relative;
+  }
+
+  .hyvui-depth-stage > :global(*) {
+    transform-style: preserve-3d;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-depth-stage {
+      perspective: none !important;
+      transform-style: flat;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { PerspectivePreset } from '../../system/depth/depth.js';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Perspective distance preset. */
+    perspective?: PerspectivePreset;
+    /** CSS percentage for horizontal perspective origin. */
+    originX?: string;
+    /** CSS percentage for vertical perspective origin. */
+    originY?: string;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Stage content. */
+    children?: Snippet;
+}
+declare const DepthStage: import("svelte").Component<Props, {}, "">;
+type DepthStage = ReturnType<typeof DepthStage>;
+export default DepthStage;

package/dist/components/depth/FloatCard.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import { tiltTransform } from '../../system/depth/depth.js';
+  import Surface from '../primitives/Surface.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Maximum tilt angle in degrees. */
+    tiltMax?: number;
+    /** Z-elevation on hover. */
+    elevation?: 'raised' | 'foreground';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Card content. */
+    children?: Snippet;
+  }
+
+  let {
+    tiltMax = 8,
+    elevation = 'raised',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  let innerTransform = $state('rotateX(0deg) rotateY(0deg) translateZ(0px)');
+  let isHovering = $state(false);
+
+  const prefersReduced =
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      : false;
+
+  const elevationMap: Record<string, string> = {
+    raised: 'var(--depth-raised)',
+    foreground: 'var(--depth-foreground)',
+  };
+
+  function handlePointerMove(e: PointerEvent) {
+    if (prefersReduced) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width;
+    const y = (e.clientY - rect.top) / rect.height;
+    const tilt = tiltTransform(x, y, tiltMax);
+    innerTransform = `${tilt} translateZ(${elevationMap[elevation]})`;
+    isHovering = true;
+  }
+
+  function handlePointerLeave() {
+    isHovering = false;
+    innerTransform = 'rotateX(0deg) rotateY(0deg) translateZ(0px)';
+  }
+</script>
+
+<div
+  class={cn('hyvui-float-card', className)}
+  role="presentation"
+  onpointermove={handlePointerMove}
+  onpointerleave={handlePointerLeave}
+>
+  <div
+    class="hyvui-float-card-inner"
+    class:hyvui-float-card-leaving={!isHovering}
+    style:transform={innerTransform}
+  >
+    <Surface variant="card" class="hyvui-float-card-surface">
+      {#if children}{@render children()}{/if}
+    </Surface>
+  </div>
+</div>
+
+<style>
+  .hyvui-float-card {
+    perspective: var(--perspective-mid);
+    perspective-origin: 50% 50%;
+  }
+
+  .hyvui-float-card-inner {
+    transform-style: preserve-3d;
+    will-change: transform;
+  }
+
+  .hyvui-float-card-leaving {
+    transition: transform var(--depth-transition);
+  }
+
+  :global(.hyvui-float-card-surface) {
+    padding: var(--space-card);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-float-card {
+      perspective: none;
+    }
+
+    .hyvui-float-card-inner {
+      transform: none !important;
+      transform-style: flat;
+    }
+
+    .hyvui-float-card-leaving {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Maximum tilt angle in degrees. */
+    tiltMax?: number;
+    /** Z-elevation on hover. */
+    elevation?: 'raised' | 'foreground';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Card content. */
+    children?: Snippet;
+}
+declare const FloatCard: import("svelte").Component<Props, {}, "">;
+type FloatCard = ReturnType<typeof FloatCard>;
+export default FloatCard;