@hyvnt/hyvui 0.1.0

package/dist/examples/FieldReport.svelte

@@ -0,0 +1,223 @@
+<!--
+  EXAMPLE: Field Report
+  REGISTER: field-notebook
+  CONCEPT: a case study page that reads like a recovered classified document
+  DEMONSTRATES: NarrativeScene, FloatCard, Plinth, MetricCard, Table, Blockquote, CodeBlock, Badge, Text expressions, DepthStage, DepthLayer, GlyphMark, surface action
+  INSPIRED BY: a handwritten field notebook digitized and presented across a table
+-->
+<script lang="ts">
+  import {
+    Text,
+    Label,
+    Badge,
+    Divider,
+    Stack,
+    Grid,
+    MetricCard,
+    Table,
+    Blockquote,
+    CodeBlock,
+    NarrativeScene,
+    FloatCard,
+    Plinth,
+    DepthStage,
+    DepthLayer,
+    GlyphMark,
+    CornerBrackets,
+    surface,
+    applyRegister,
+  } from '../index.js';
+  import { onMount } from 'svelte';
+
+  const metrics = [
+    { label: 'first paint', value: '0.8s', trend: 'down' as const, trendValue: '-34%' },
+    { label: 'bundle weight', value: '12kb', trend: 'down' as const, trendValue: '-61%' },
+    { label: 'field duration', value: '9 weeks', trend: 'neutral' as const, trendValue: '' },
+  ];
+
+  const phases = [
+    { phase: '01', designation: 'survey', date: '2025.09.12', status: 'complete' },
+    { phase: '02', designation: 'excavation', date: '2025.09.28', status: 'complete' },
+    { phase: '03', designation: 'assembly', date: '2025.10.14', status: 'complete' },
+    { phase: '04', designation: 'calibration', date: '2025.10.30', status: 'complete' },
+    { phase: '05', designation: 'field test', date: '2025.11.08', status: 'complete' },
+    { phase: '06', designation: 'deployment', date: '2025.11.15', status: 'active' },
+  ];
+
+  const phaseColumns = [
+    { key: 'phase', label: 'phase' },
+    { key: 'designation', label: 'designation' },
+    { key: 'date', label: 'date' },
+    { key: 'status', label: 'status' },
+  ];
+
+  const codeSnippet = `const signal = await listen({
+  frequency: 47.2,
+  threshold: 0.003,
+  timeout: Infinity,
+});
+
+if (signal.strength > baseline) {
+  log('contact', signal.origin);
+}`;
+
+  const technologies = ['svelte', 'typescript', 'css custom properties', 'canvas 2d', 'webgl'];
+
+  onMount(() => {
+    applyRegister('field-notebook');
+    return () => {
+      document.body.removeAttribute('data-register');
+    };
+  });
+</script>
+
+<NarrativeScene chapter="field report 03 — signal architecture">
+  {#snippet heading()}
+    <DepthStage perspective="far">
+      <DepthLayer level="foreground">
+        <Text variant="heading" expression="title-card" as="h1" color="primary">
+          building the listening station
+        </Text>
+      </DepthLayer>
+    </DepthStage>
+  {/snippet}
+
+  {#snippet copy()}
+    <div class="field-report-copy">
+      <div use:surface={{ delay: 200 }}>
+        <Text variant="body">
+          the project started as a question. not the kind you find in a brief.
+          the kind that stays after the meeting ends. what does it feel like
+          when a system is paying attention.
+        </Text>
+      </div>
+
+      <div use:surface={{ delay: 350 }}>
+        <Text variant="body">
+          we built the component library first. not because it was the most
+          important part, but because naming things forces clarity. every
+          token, every variant, every slot had to earn its name.
+        </Text>
+      </div>
+
+      <div use:surface={{ delay: 500 }}>
+        <Blockquote>
+          the real constraint was not technical. it was tonal. how do you
+          build an interface that feels serious without feeling cold. that
+          feels precise without feeling sterile.
+        </Blockquote>
+      </div>
+
+      <div class="field-report-metrics" use:surface={{ delay: 650 }}>
+        <DepthStage perspective="far">
+          <DepthLayer level="raised">
+            <Grid cols={3} gap="0.75rem">
+              {#each metrics as m}
+                <FloatCard tiltMax={5}>
+                  <div class="field-report-metric-inner">
+                    <Label color="muted">{m.label}</Label>
+                    <Text variant="heading" as="span" color="primary">{m.value}</Text>
+                    {#if m.trendValue}
+                      <Text variant="caption" as="span" color={m.trend === 'down' ? 'signal' : 'muted'}>
+                        {m.trend === 'down' ? '\u2193' : '\u2014'} {m.trendValue}
+                      </Text>
+                    {/if}
+                  </div>
+                </FloatCard>
+              {/each}
+            </Grid>
+          </DepthLayer>
+        </DepthStage>
+        <Plinth width="90%" depth="24px" />
+      </div>
+
+      <div use:surface={{ delay: 800 }}>
+        <Text expression="chapter" as="span">mission log</Text>
+      </div>
+
+      <div use:surface={{ delay: 900 }}>
+        <Table columns={phaseColumns} rows={phases} />
+      </div>
+
+      <div use:surface={{ delay: 1000 }}>
+        <Text expression="chapter" as="span">from the field notebook</Text>
+      </div>
+
+      <div use:surface={{ delay: 1100 }}>
+        <CodeBlock code={codeSnippet} />
+      </div>
+
+      <div class="field-report-tags" use:surface={{ delay: 1200 }}>
+        {#each technologies as tech}
+          <Badge variant="default">{tech}</Badge>
+        {/each}
+      </div>
+    </div>
+  {/snippet}
+
+  {#snippet canvas()}
+    <div class="field-report-canvas" use:surface={{ delay: 400 }}>
+      <div class="field-report-canvas-inner" style:position="relative">
+        <CornerBrackets size={40} color="rgba(199, 156, 87, 0.12)" />
+        <div class="field-report-canvas-marks">
+          <GlyphMark variant="reticle" size={48} color="var(--muted-strong)" />
+          <div class="field-report-canvas-label">
+            <Label color="muted">artifact scan</Label>
+            <Label color="accent">47.2 mhz</Label>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/snippet}
+</NarrativeScene>
+
+<style>
+  .field-report-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+  }
+
+  .field-report-metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .field-report-metric-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .field-report-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .field-report-canvas {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+  }
+
+  .field-report-canvas-inner {
+    padding: 3rem;
+  }
+
+  .field-report-canvas-marks {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .field-report-canvas-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+</style>

package/dist/examples/FieldReport.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FieldReport: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FieldReport = InstanceType<typeof FieldReport>;
+export default FieldReport;

package/dist/examples/ObservationDeck.svelte

@@ -0,0 +1,317 @@
+<!--
+  EXAMPLE: Observation Deck
+  REGISTER: mission-control
+  CONCEPT: a deep-space monitoring dashboard operated by someone who has been watching for months
+  DEMONSTRATES: ReadoutScene, DepthStage, HorizonGrid, FloatCard, Table, SidebarNav, Topbar, StatusDot, Alert, MetricCard, Label, Text expressions, TerminalBoot, DataStream, GlyphMark
+  INSPIRED BY: the third hour of a night watch on a research vessel bridge
+-->
+<script lang="ts">
+  import {
+    Text,
+    Label,
+    StatusDot,
+    Alert,
+    MetricCard,
+    Table,
+    SidebarNav,
+    Topbar,
+    ReadoutScene,
+    DepthStage,
+    DepthLayer,
+    FloatCard,
+    HorizonGrid,
+    DataStream,
+    GlyphMark,
+    Grid,
+    Stack,
+    Divider,
+    applyRegister,
+  } from '../index.js';
+  import { onMount } from 'svelte';
+
+  let elapsed = $state(0);
+  let statusCycle = $state<'ok' | 'pend' | 'warn' | 'fail'>('ok');
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+  let cycleId: ReturnType<typeof setInterval> | undefined;
+
+  const statuses: ('ok' | 'pend' | 'warn' | 'fail')[] = ['ok', 'ok', 'ok', 'pend', 'ok', 'warn', 'ok'];
+  let cycleIndex = $state(0);
+
+  const elapsedFormatted = $derived(() => {
+    const h = Math.floor(elapsed / 3600);
+    const m = Math.floor((elapsed % 3600) / 60);
+    const s = elapsed % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  });
+
+  const navItems = [
+    { label: 'overview', href: '#', active: true },
+    { label: 'telemetry', href: '#' },
+    { label: 'signal log', href: '#' },
+    { label: 'thermal map', href: '#' },
+    { label: 'diagnostics', href: '#' },
+  ];
+
+  const metricsData = [
+    { label: 'signal strength', value: '-42 dbm' },
+    { label: 'thermal variance', value: '0.003 K' },
+    { label: 'distance', value: '4.2 ly' },
+    { label: 'cycle count', value: '1,847' },
+    { label: 'uptime', value: '99.97%' },
+    { label: 'queue depth', value: '12' },
+  ];
+
+  const eventLog = [
+    { time: '03:42:18', event: 'frequency sweep completed', status: 'ok' },
+    { time: '03:38:04', event: 'sector 7 beacon refresh', status: 'ok' },
+    { time: '03:31:55', event: 'thermal anomaly logged', status: 'warn' },
+    { time: '03:24:12', event: 'handshake with relay 9', status: 'ok' },
+    { time: '03:18:40', event: 'particle density spike', status: 'pend' },
+    { time: '03:12:07', event: 'calibration cycle 1847', status: 'ok' },
+    { time: '03:04:33', event: 'sector 4 unresponsive', status: 'fail' },
+    { time: '02:58:19', event: 'backup frequency locked', status: 'ok' },
+  ];
+
+  const eventColumns = [
+    { key: 'time', label: 'time' },
+    { key: 'event', label: 'event' },
+    { key: 'status', label: 'status' },
+  ];
+
+  const bootLines: { status: 'ok' | 'pend' | 'warn' | 'fail'; message: string }[] = [
+    { status: 'ok', message: 'observation array initialized' },
+    { status: 'ok', message: 'frequency lock acquired' },
+    { status: 'ok', message: 'telemetry streams active' },
+    { status: 'ok', message: 'thermal sensors calibrated' },
+    { status: 'pend', message: 'awaiting sector 4 response' },
+  ];
+
+  onMount(() => {
+    applyRegister('mission-control');
+
+    intervalId = setInterval(() => {
+      elapsed += 1;
+    }, 1000);
+
+    cycleId = setInterval(() => {
+      cycleIndex = (cycleIndex + 1) % statuses.length;
+      statusCycle = statuses[cycleIndex];
+    }, 4000);
+
+    elapsed = 3 * 3600 + 44 * 60 + 12;
+
+    return () => {
+      document.body.removeAttribute('data-register');
+      if (intervalId) clearInterval(intervalId);
+      if (cycleId) clearInterval(cycleId);
+    };
+  });
+</script>
+
+<div class="obs-deck">
+  <Topbar class="obs-deck-topbar">
+    {#snippet left()}
+      <Stack direction="horizontal" gap="0.75rem" align="center">
+        <StatusDot status={statusCycle} size={7} />
+        <Text expression="readout" as="span">deep field observatory</Text>
+      </Stack>
+    {/snippet}
+    {#snippet center()}
+      <GlyphMark variant="reticle" size={16} color="var(--signal)" />
+    {/snippet}
+    {#snippet right()}
+      <Stack direction="horizontal" gap="1rem" align="center">
+        <Label color="muted">elapsed</Label>
+        <Text expression="readout" as="span" color="signal">{elapsedFormatted()}</Text>
+      </Stack>
+    {/snippet}
+  </Topbar>
+
+  <div class="obs-deck-body">
+    <aside class="obs-deck-sidebar">
+      <SidebarNav items={navItems} />
+      <Divider />
+      <Stack direction="vertical" gap="0.5rem">
+        <Alert variant="ok" title="particle density nominal">
+          <Text expression="readout">within expected parameters for sector</Text>
+        </Alert>
+        <Alert variant="warn" title="sector 7 unresponsive">
+          <Text expression="readout">last contact 26 minutes ago</Text>
+        </Alert>
+        <Alert variant="info" title="calibration window approaching">
+          <Text expression="readout">next cycle in 14 minutes</Text>
+        </Alert>
+      </Stack>
+      <div class="obs-deck-stream" aria-hidden="true">
+        <DataStream active speed="slow" />
+        <DataStream active speed="medium" />
+      </div>
+    </aside>
+
+    <main class="obs-deck-main">
+      <DepthStage perspective="mid" class="obs-deck-depth">
+        <DepthLayer level="ground" class="obs-deck-horizon">
+          <HorizonGrid rows={18} cols={10} vanishY={0.35} />
+        </DepthLayer>
+
+        <DepthLayer level="raised" class="obs-deck-content">
+          <div class="obs-deck-metrics">
+            <Grid cols={3} gap="0.75rem">
+              {#each metricsData as m}
+                <FloatCard tiltMax={4}>
+                  <div class="obs-deck-metric-inner">
+                    <Label color="muted">{m.label}</Label>
+                    <Text variant="heading" as="span" color="primary">{m.value}</Text>
+                  </div>
+                </FloatCard>
+              {/each}
+            </Grid>
+          </div>
+
+          <DepthLayer level="ground" class="obs-deck-table-layer">
+            <div class="obs-deck-table-section">
+              <Text expression="chapter" as="span">recent events</Text>
+              <Table columns={eventColumns} rows={eventLog} />
+            </div>
+          </DepthLayer>
+
+          <div class="obs-deck-boot">
+            <Text expression="chapter" as="span">initialization log</Text>
+            <div class="obs-deck-boot-lines">
+              {#each bootLines as line}
+                <div class="obs-deck-boot-line">
+                  <span class="obs-deck-boot-glyph" style:color={
+                    line.status === 'ok' ? 'var(--status-ok)' :
+                    line.status === 'pend' ? 'var(--status-pend)' :
+                    line.status === 'warn' ? 'var(--status-warn)' :
+                    'var(--status-fail)'
+                  }>
+                    {line.status === 'ok' ? '[ OK ]' :
+                     line.status === 'pend' ? '[ .. ]' :
+                     line.status === 'warn' ? '[WARN]' : '[FAIL]'}
+                  </span>
+                  <span class="obs-deck-boot-msg">{line.message}</span>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </DepthLayer>
+      </DepthStage>
+    </main>
+  </div>
+</div>
+
+<style>
+  .obs-deck {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg);
+  }
+
+  :global(.obs-deck-topbar) {
+    flex-shrink: 0;
+  }
+
+  .obs-deck-body {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .obs-deck-sidebar {
+    padding: 1.25rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    border-right: 1px solid var(--line);
+    overflow-y: auto;
+  }
+
+  .obs-deck-stream {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+    margin-top: auto;
+    padding-top: 1rem;
+    opacity: 0.6;
+  }
+
+  .obs-deck-main {
+    position: relative;
+    overflow-y: auto;
+    padding: 1.5rem;
+  }
+
+  :global(.obs-deck-depth) {
+    min-height: 100%;
+  }
+
+  :global(.obs-deck-horizon) {
+    position: absolute;
+    inset: 0;
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  :global(.obs-deck-content) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .obs-deck-metric-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .obs-deck-table-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .obs-deck-boot {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border-left: 2px solid rgba(121, 166, 163, 0.14);
+    padding-left: 1.25rem;
+  }
+
+  .obs-deck-boot-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .obs-deck-boot-line {
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+  }
+
+  .obs-deck-boot-glyph {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .obs-deck-boot-msg {
+    color: var(--text-soft);
+  }
+
+  @media (max-width: 768px) {
+    .obs-deck-body {
+      grid-template-columns: 1fr;
+    }
+
+    .obs-deck-sidebar {
+      display: none;
+    }
+  }
+</style>

package/dist/examples/ObservationDeck.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ObservationDeck: import("svelte").Component<Record<string, never>, {}, "">;
+type ObservationDeck = ReturnType<typeof ObservationDeck>;
+export default ObservationDeck;