@hyvnt/hyvui 0.1.0

package/README.md

@@ -0,0 +1,253 @@
+<!-- =========================================================
+  hyvui // COMPONENT LIBRARY
+  Svelte 5. Dark by default. Operator-adjacent.
+========================================================== -->
+
+<pre align="center">
+ ██╗  ██╗██╗   ██╗██╗   ██╗    ██╗   ██╗██╗
+ ██║  ██║╚██╗ ██╔╝██║   ██║    ██║   ██║██║
+ ███████║ ╚████╔╝ ██║   ██║    ██║   ██║██║
+ ██╔══██║  ╚██╔╝  ╚██╗ ██╔╝    ██║   ██║██║
+ ██║  ██║   ██║    ╚████╔╝      ╚████╔╝ ██║
+ ╚═╝  ╚═╝   ╚═╝     ╚═══╝        ╚═══╝  ╚═╝
+</pre>
+
+<p align="center">
+  <sub><code>svelte 5 · typescript · tailwind v4 · dark by default</code></sub>
+</p>
+
+<br/>
+
+<table>
+  <tr>
+    <td width="52%" valign="top">
+
+`01 / what it is`
+
+<pre lang="txt">
+[ OK ] component library for svelte 5
+[ OK ] token-driven, no hardcoded values
+[ OK ] operator aesthetic, not startup aesthetic
+[WARN] opinionated about how things should feel
+</pre>
+
+<sub><i>built for interfaces that should feel like they are paying attention.</i></sub>
+
+    </td>
+    <td width="48%" valign="top">
+
+`02 / what it is not`
+
+- a general-purpose design system
+- configurable to any aesthetic
+- optimized for light mode
+- trying to look like everything else
+
+<sub>the palette is two colors and they do not negotiate.</sub>
+
+    </td>
+  </tr>
+</table>
+
+---
+
+`03 / install`
+
+```sh
+npm install hyvui
+```
+
+```svelte
+<script>
+  import { Button, Text, FloatCard } from 'hyvui';
+</script>
+```
+
+import the styles once at the root of your app:
+
+```ts
+// app.css or root layout
+import 'hyvui/styles';
+```
+
+---
+
+`04 / structure`
+
+<table>
+  <tr>
+    <td valign="top" width="33%">
+
+**primitives**
+```
+Text        Label
+Icon        Divider
+Surface
+```
+
+**inputs**
+```
+Button      Input
+Textarea    Select
+Checkbox    Toggle
+FileUpload
+```
+
+**feedback**
+```
+Alert       Toast
+StatusDot   StatusLine
+Skeleton    EmptyState
+ErrorState
+```
+
+    </td>
+    <td valign="top" width="33%">
+
+**layout**
+```
+Stack       Grid
+Card        Panel
+Modal       Drawer
+Popover
+```
+
+**navigation**
+```
+Topbar      SidebarNav
+Tabs        Breadcrumb
+DropdownMenu
+```
+
+**display**
+```
+Badge       Avatar
+Table       CodeBlock
+MetricCard  Blockquote
+```
+
+    </td>
+    <td valign="top" width="33%">
+
+**ambient**
+```
+GridOverlay   CornerBrackets
+ScanBand      Vignette
+ParallaxLayer SignalRing
+GlyphMark     DataStream
+ThreadLine
+```
+
+**depth**
+```
+DepthStage  DepthLayer
+FloatCard   HorizonGrid
+Plinth
+```
+
+**scenes**
+```
+NarrativeScene  ReadoutScene
+StageScene      ArchiveScene
+LogScene
+```
+
+    </td>
+  </tr>
+</table>
+
+---
+
+`05 / layers`
+
+the library is organized in three additive layers. each one works without the next.
+
+<pre lang="txt">
+[ base ]       42 components. tokens. css custom properties throughout.
+               nothing hardcoded. nothing fighting your cascade.
+
+[ expressive ] registers shift the ambient mood of a section.
+               expressions carry semantic intent through typography.
+               four actions compose onto any element.
+
+[ spatial ]    CSS 3D depth system. perspective stages. tilt on pointer.
+               receding grids. a plinth to stand things on.
+</pre>
+
+---
+
+`06 / registers`
+
+registers are named aesthetic states. apply one and the ambient properties shift.
+
+```svelte
+<script>
+  import { applyRegister } from 'hyvui';
+  onMount(() => applyRegister('mission-control'));
+</script>
+```
+
+| register | character |
+|---|---|
+| `field-notebook` | warm, worn, analog |
+| `mission-control` | cold, precise, dense |
+| `archive` | flat, institutional, drained |
+
+---
+
+`07 / expressions`
+
+text expressions carry intent beyond variant. pass them to any `Text` component.
+
+```svelte
+<Text expression="title-card">the coordinates are empty now</Text>
+<Text expression="readout">signal: –42 dbm</Text>
+<Text expression="manifesto">something was here before we arrived.</Text>
+```
+
+---
+
+`08 / depth`
+
+```svelte
+<DepthStage perspective="mid">
+  <DepthLayer level="ground">
+    <HorizonGrid rows={16} cols={10} vanishY={0.35} />
+  </DepthLayer>
+  <DepthLayer level="raised">
+    <FloatCard tiltMax={6}>
+      <Label color="muted">signal strength</Label>
+      <Text variant="heading" color="primary">–42 dbm</Text>
+    </FloatCard>
+  </DepthLayer>
+</DepthStage>
+```
+
+all 3D transforms are disabled under `prefers-reduced-motion`.
+
+---
+
+`09 / tokens`
+
+two accent colors. everything else is neutral.
+
+```css
+--accent      /* gold  — #c79c57 — warmth, action, age      */
+--signal      /* teal  — #79a6a3 — data, status, precision  */
+```
+
+override per-section with `--reg-*` properties. documented in `override-template.css`.
+
+---
+
+<details>
+  <summary><code>10 / notes</code></summary>
+  <br/>
+
+  the library assumes you want the interface to have a mood.
+  <br/>
+  if you do not want that, it will still work. it will just feel a little contained.
+  <br/><br/>
+  svelte 5 only. no compatibility shims.
+
+</details>

package/dist/components/ambient/CornerBrackets.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Bracket arm length in pixels. */
+    size?: number;
+    /** Bracket color. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    size = 32,
+    color = 'rgba(199, 156, 87, 0.24)',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class={cn('hyvui-corners', className)} aria-hidden="true">
+  <span
+    class="hyvui-corner hyvui-corner-tl"
+    style:width="{size}px"
+    style:height="{size}px"
+    style:border-color={color}
+  ></span>
+  <span
+    class="hyvui-corner hyvui-corner-tr"
+    style:width="{size}px"
+    style:height="{size}px"
+    style:border-color={color}
+  ></span>
+  <span
+    class="hyvui-corner hyvui-corner-bl"
+    style:width="{size}px"
+    style:height="{size}px"
+    style:border-color={color}
+  ></span>
+  <span
+    class="hyvui-corner hyvui-corner-br"
+    style:width="{size}px"
+    style:height="{size}px"
+    style:border-color={color}
+  ></span>
+</div>
+
+<style>
+  .hyvui-corners {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-corner {
+    position: absolute;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  .hyvui-corner-tl {
+    top: 0;
+    left: 0;
+    border-top-width: 1px;
+    border-left-width: 1px;
+  }
+
+  .hyvui-corner-tr {
+    top: 0;
+    right: 0;
+    border-top-width: 1px;
+    border-right-width: 1px;
+  }
+
+  .hyvui-corner-bl {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+  }
+
+  .hyvui-corner-br {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 1px;
+    border-right-width: 1px;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    /** Bracket arm length in pixels. */
+    size?: number;
+    /** Bracket color. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const CornerBrackets: import("svelte").Component<Props, {}, "">;
+type CornerBrackets = ReturnType<typeof CornerBrackets>;
+export default CornerBrackets;

package/dist/components/ambient/DataStream.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** Enable the scrolling animation. */
+    active?: boolean;
+    /** Width of the stream column. */
+    width?: string;
+    /** Scroll speed. */
+    speed?: 'slow' | 'medium';
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    active = true,
+    width = '1.2rem',
+    speed = 'slow',
+    class: className = '',
+  }: Props = $props();
+
+  const chars = '0123456789ABCDEF.:+-';
+  const lineCount = 32;
+  let lines = $state<string[]>([]);
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+
+  const prefersReduced =
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      : false;
+
+  function randomChar(): string {
+    return chars[Math.floor(Math.random() * chars.length)];
+  }
+
+  function generateLines(): string[] {
+    return Array.from({ length: lineCount }, () => randomChar());
+  }
+
+  onMount(() => {
+    lines = generateLines();
+
+    if (active && !prefersReduced) {
+      const ms = speed === 'slow' ? 600 : 350;
+      intervalId = setInterval(() => {
+        lines = [randomChar(), ...lines.slice(0, lineCount - 1)];
+      }, ms);
+    }
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  });
+</script>
+
+<div
+  class={cn('hyvui-data-stream', className)}
+  style:width={width}
+  aria-hidden="true"
+>
+  {#each lines as char, i}
+    <span
+      class="hyvui-data-stream-char"
+      style:opacity={0.18 - (i / lineCount) * 0.14}
+    >{char}</span>
+  {/each}
+</div>
+
+<style>
+  .hyvui-data-stream {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    line-height: 1.4;
+    letter-spacing: 0.1em;
+    color: var(--accent);
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .hyvui-data-stream-char {
+    display: block;
+    transition: opacity 0.3s ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-data-stream-char {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** Enable the scrolling animation. */
+    active?: boolean;
+    /** Width of the stream column. */
+    width?: string;
+    /** Scroll speed. */
+    speed?: 'slow' | 'medium';
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const DataStream: import("svelte").Component<Props, {}, "">;
+type DataStream = ReturnType<typeof DataStream>;
+export default DataStream;

package/dist/components/ambient/GlyphMark.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Glyph variant. */
+    variant?: 'cross' | 'reticle' | 'coord' | 'mark';
+    /** Size in pixels. */
+    size?: number;
+    /** Glyph color. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    variant = 'cross',
+    size = 24,
+    color = 'var(--muted-strong)',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  class={cn('hyvui-glyph-mark', className)}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke={color}
+  stroke-width="1"
+  aria-hidden="true"
+>
+  {#if variant === 'cross'}
+    <!-- coordinate cross -->
+    <line x1="12" y1="4" x2="12" y2="20" />
+    <line x1="4" y1="12" x2="20" y2="12" />
+    <circle cx="12" cy="12" r="1.5" fill={color} stroke="none" />
+  {:else if variant === 'reticle'}
+    <!-- targeting reticle -->
+    <circle cx="12" cy="12" r="8" />
+    <circle cx="12" cy="12" r="3" />
+    <line x1="12" y1="1" x2="12" y2="5" />
+    <line x1="12" y1="19" x2="12" y2="23" />
+    <line x1="1" y1="12" x2="5" y2="12" />
+    <line x1="19" y1="12" x2="23" y2="12" />
+  {:else if variant === 'coord'}
+    <!-- cartographic coordinate marker -->
+    <line x1="12" y1="2" x2="12" y2="8" />
+    <line x1="12" y1="16" x2="12" y2="22" />
+    <line x1="2" y1="12" x2="8" y2="12" />
+    <line x1="16" y1="12" x2="22" y2="12" />
+    <rect x="9" y="9" width="6" height="6" rx="0.5" />
+  {:else if variant === 'mark'}
+    <!-- measurement mark -->
+    <line x1="4" y1="20" x2="20" y2="4" />
+    <line x1="4" y1="20" x2="4" y2="15" />
+    <line x1="4" y1="20" x2="9" y2="20" />
+    <circle cx="12" cy="12" r="1" fill={color} stroke="none" />
+  {/if}
+</svg>
+
+<style>
+  .hyvui-glyph-mark {
+    display: inline-block;
+    pointer-events: none;
+    flex-shrink: 0;
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** Glyph variant. */
+    variant?: 'cross' | 'reticle' | 'coord' | 'mark';
+    /** Size in pixels. */
+    size?: number;
+    /** Glyph color. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const GlyphMark: import("svelte").Component<Props, {}, "">;
+type GlyphMark = ReturnType<typeof GlyphMark>;
+export default GlyphMark;

package/dist/components/ambient/GridOverlay.svelte

@@ -0,0 +1,28 @@
+<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-grid-overlay', className)} aria-hidden="true"></div>
+
+<style>
+  .hyvui-grid-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(to right, rgba(199, 156, 87, 0.04) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(199, 156, 87, 0.04) 1px, transparent 1px);
+    background-size: 72px 72px;
+    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+  }
+</style>

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

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

package/dist/components/ambient/ParallaxLayer.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Motion multiplier applied to --px/--py custom properties. */
+    strength?: number;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Content to apply parallax to. */
+    children?: Snippet;
+  }
+
+  let {
+    strength = 18,
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class={cn('hyvui-parallax', className)}
+  style:transform="translate(calc(var(--px, 0) * {strength}px), calc(var(--py, 0) * {strength}px))"
+  aria-hidden="true"
+>
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  .hyvui-parallax {
+    will-change: transform;
+    transition: transform 0.15s ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-parallax {
+      transform: none !important;
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Motion multiplier applied to --px/--py custom properties. */
+    strength?: number;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Content to apply parallax to. */
+    children?: Snippet;
+}
+declare const ParallaxLayer: import("svelte").Component<Props, {}, "">;
+type ParallaxLayer = ReturnType<typeof ParallaxLayer>;
+export default ParallaxLayer;