@hyvnt/hyvui 0.1.0

package/dist/components/primitives/Text.svelte

@@ -0,0 +1,98 @@
+<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>

package/dist/components/primitives/Text.svelte.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/primitives/text.d.ts

@@ -0,0 +1 @@
+export type Expression = 'title-card' | 'manifesto' | 'readout' | 'whisper' | 'command' | 'chapter';

package/dist/components/primitives/text.js

@@ -0,0 +1 @@
+export {};

package/dist/components/scenes/ArchiveScene.svelte

@@ -0,0 +1,95 @@
+<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>

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

@@ -0,0 +1,16 @@
+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;
+}
+declare const ArchiveScene: import("svelte").Component<Props, {}, "">;
+type ArchiveScene = ReturnType<typeof ArchiveScene>;
+export default ArchiveScene;

package/dist/components/scenes/LogScene.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import ScanBand from '../ambient/ScanBand.svelte';
+  import GridOverlay from '../ambient/GridOverlay.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Above the log area (system name, StatusDot row). */
+    header?: Snippet;
+    /** Log content area (TerminalBoot, StatusLine, CodeBlock). */
+    children?: Snippet;
+    /** Below the log area (status summary, CTA). */
+    footer?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    header,
+    children,
+    footer,
+  }: Props = $props();
+</script>
+
+<section class={cn('hyvui-log', className)}>
+  <div class="hyvui-log-ambient" aria-hidden="true">
+    <div style:opacity="0.06">
+      <GridOverlay />
+    </div>
+    <ScanBand />
+  </div>
+  <div class="hyvui-log-inner">
+    {#if header}
+      <div class="hyvui-log-header">
+        {@render header()}
+      </div>
+    {/if}
+    <div class="hyvui-log-content">
+      {#if children}{@render children()}{/if}
+    </div>
+    {#if footer}
+      <div class="hyvui-log-footer">
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .hyvui-log {
+    position: relative;
+    min-height: 100dvh;
+    padding: var(--space-scene);
+    background-color: var(--bg);
+  }
+
+  .hyvui-log-ambient {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-log-inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: calc(1.5rem * var(--reg-spacing-scale));
+    width: 100%;
+  }
+
+  .hyvui-log-content {
+    font-family: var(--font-mono);
+    border-left: 2px solid rgba(121, 166, 163, 0.18);
+    padding-left: 1.5rem;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Above the log area (system name, StatusDot row). */
+    header?: Snippet;
+    /** Log content area (TerminalBoot, StatusLine, CodeBlock). */
+    children?: Snippet;
+    /** Below the log area (status summary, CTA). */
+    footer?: Snippet;
+}
+declare const LogScene: import("svelte").Component<Props, {}, "">;
+type LogScene = ReturnType<typeof LogScene>;
+export default LogScene;

package/dist/components/scenes/NarrativeScene.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import GridOverlay from '../ambient/GridOverlay.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Section label rendered as a chapter expression above the heading. */
+    chapter?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** The scene's title content. */
+    heading?: Snippet;
+    /** Prose content in the narrow left column. */
+    copy?: Snippet;
+    /** Open canvas area in the right column. */
+    canvas?: Snippet;
+  }
+
+  let {
+    chapter = '',
+    class: className = '',
+    heading,
+    copy,
+    canvas,
+  }: Props = $props();
+</script>
+
+<section class={cn('hyvui-narrative', className)}>
+  <div class="hyvui-narrative-grid-bg" aria-hidden="true" style:opacity="var(--reg-ornament-opacity)">
+    <GridOverlay />
+  </div>
+  <div class="hyvui-narrative-grid">
+    <div class="hyvui-narrative-copy">
+      {#if chapter}
+        <span class="expr-chapter">{chapter}</span>
+      {/if}
+      {#if heading}
+        <div class="hyvui-narrative-heading">
+          {@render heading()}
+        </div>
+      {/if}
+      {#if copy}
+        <div class="hyvui-narrative-prose">
+          {@render copy()}
+        </div>
+      {/if}
+    </div>
+    {#if canvas}
+      <div class="hyvui-narrative-canvas">
+        {@render canvas()}
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .hyvui-narrative {
+    position: relative;
+    min-height: 100dvh;
+    padding: var(--space-scene);
+    display: flex;
+    align-items: center;
+  }
+
+  .hyvui-narrative-grid-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-narrative-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
+    gap: calc(2rem * var(--reg-spacing-scale));
+    width: 100%;
+    align-items: center;
+  }
+
+  .hyvui-narrative-copy {
+    display: flex;
+    flex-direction: column;
+    gap: calc(1.25rem * var(--reg-spacing-scale));
+    max-width: 30rem;
+  }
+
+  @media (max-width: 768px) {
+    .hyvui-narrative-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Section label rendered as a chapter expression above the heading. */
+    chapter?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** The scene's title content. */
+    heading?: Snippet;
+    /** Prose content in the narrow left column. */
+    copy?: Snippet;
+    /** Open canvas area in the right column. */
+    canvas?: Snippet;
+}
+declare const NarrativeScene: import("svelte").Component<Props, {}, "">;
+type NarrativeScene = ReturnType<typeof NarrativeScene>;
+export default NarrativeScene;

package/dist/components/scenes/ReadoutScene.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import ScanBand from '../ambient/ScanBand.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Optional title rendered as a readout expression label. */
+    title?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Top bar area for labels and status indicators. */
+    header?: Snippet;
+    /** Main content area. */
+    children?: Snippet;
+    /** Optional right sidebar (fixed width ~260px). */
+    sidebar?: Snippet;
+  }
+
+  let {
+    title = '',
+    class: className = '',
+    header,
+    children,
+    sidebar,
+  }: Props = $props();
+</script>
+
+<section class={cn('hyvui-readout', className)}>
+  <div class="hyvui-readout-scan" aria-hidden="true" style:opacity="calc(0.4 * var(--reg-ornament-opacity))">
+    <ScanBand />
+  </div>
+  <div class="hyvui-readout-inner">
+    {#if header || title}
+      <div class="hyvui-readout-header">
+        {#if title}
+          <span class="expr-readout">{title}</span>
+        {/if}
+        {#if header}
+          {@render header()}
+        {/if}
+      </div>
+    {/if}
+    <div class={cn('hyvui-readout-body', sidebar && 'hyvui-readout-body-sidebar')}>
+      <div class="hyvui-readout-main">
+        {#if children}{@render children()}{/if}
+      </div>
+      {#if sidebar}
+        <aside class="hyvui-readout-sidebar">
+          {@render sidebar()}
+        </aside>
+      {/if}
+    </div>
+  </div>
+</section>
+
+<style>
+  .hyvui-readout {
+    position: relative;
+    min-height: 100dvh;
+    padding: var(--space-scene);
+    background-color: var(--bg);
+  }
+
+  .hyvui-readout-scan {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-readout-inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: calc(1.5rem * var(--reg-spacing-scale));
+    width: 100%;
+  }
+
+  .hyvui-readout-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .hyvui-readout-body {
+    width: 100%;
+  }
+
+  .hyvui-readout-body-sidebar {
+    display: grid;
+    grid-template-columns: 1fr 260px;
+    gap: calc(1.5rem * var(--reg-spacing-scale));
+  }
+
+  .hyvui-readout-main {
+    min-width: 0;
+  }
+
+  .hyvui-readout-sidebar {
+    min-width: 0;
+  }
+
+  @media (max-width: 768px) {
+    .hyvui-readout-body-sidebar {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Optional title rendered as a readout expression label. */
+    title?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Top bar area for labels and status indicators. */
+    header?: Snippet;
+    /** Main content area. */
+    children?: Snippet;
+    /** Optional right sidebar (fixed width ~260px). */
+    sidebar?: Snippet;
+}
+declare const ReadoutScene: import("svelte").Component<Props, {}, "">;
+type ReadoutScene = ReturnType<typeof ReadoutScene>;
+export default ReadoutScene;

package/dist/components/scenes/StageScene.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import CornerBrackets from '../ambient/CornerBrackets.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Above heading (Label or chapter expression). */
+    label?: Snippet;
+    /** Primary statement. */
+    heading?: Snippet;
+    /** Secondary line. */
+    subheading?: Snippet;
+    /** CTA area. */
+    actions?: Snippet;
+    /** Behind everything (GridOverlay, ParallaxLayer, etc.). */
+    ambient?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    label,
+    heading,
+    subheading,
+    actions,
+    ambient,
+  }: Props = $props();
+</script>
+
+<section class={cn('hyvui-stage', className)}>
+  {#if ambient}
+    <div class="hyvui-stage-ambient" aria-hidden="true">
+      {@render ambient()}
+    </div>
+  {/if}
+  <div class="hyvui-stage-brackets" aria-hidden="true" style:opacity="var(--reg-ornament-opacity)">
+    <CornerBrackets />
+  </div>
+  <div class="hyvui-stage-content">
+    {#if label}
+      <div class="hyvui-stage-label">
+        {@render label()}
+      </div>
+    {/if}
+    {#if heading}
+      <div class="hyvui-stage-heading">
+        {@render heading()}
+      </div>
+    {/if}
+    {#if subheading}
+      <div class="hyvui-stage-subheading">
+        {@render subheading()}
+      </div>
+    {/if}
+    {#if actions}
+      <div class="hyvui-stage-actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .hyvui-stage {
+    position: relative;
+    min-height: 100dvh;
+    padding: var(--space-scene);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hyvui-stage-ambient {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-stage-brackets {
+    position: absolute;
+    inset: var(--space-scene);
+    pointer-events: none;
+  }
+
+  .hyvui-stage-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: calc(2rem * var(--reg-spacing-scale));
+  }
+
+  .hyvui-stage-subheading {
+    max-width: 32rem;
+  }
+
+  .hyvui-stage-actions {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: calc(-1rem * var(--reg-spacing-scale));
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Above heading (Label or chapter expression). */
+    label?: Snippet;
+    /** Primary statement. */
+    heading?: Snippet;
+    /** Secondary line. */
+    subheading?: Snippet;
+    /** CTA area. */
+    actions?: Snippet;
+    /** Behind everything (GridOverlay, ParallaxLayer, etc.). */
+    ambient?: Snippet;
+}
+declare const StageScene: import("svelte").Component<Props, {}, "">;
+type StageScene = ReturnType<typeof StageScene>;
+export default StageScene;