@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/scenes/LogScene.svelte

@@ -1,77 +1,86 @@
-<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>
+<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';
+
+	/**
+	 * @remarks Use for process output, system boot sequences, build logs. Full-width terminal layout.
+	 * @example
+	 * <LogScene>
+	 *   {#snippet header()}
+	 *     <Label color="signal">deployment log</Label>
+	 *     <StatusDot status="pend" />
+	 *   {/snippet}
+	 *   <TerminalBoot lines={bootLines} oncomplete={() => deployed = true} />
+	 *   {#snippet footer()}
+	 *     {#if deployed}<Button variant="primary">view deployment</Button>{/if}
+	 *   {/snippet}
+	 * </LogScene>
+	 */
+	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

@@ -1,4 +1,18 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for process output, system boot sequences, build logs. Full-width terminal layout.
+ * @example
+ * <LogScene>
+ *   {#snippet header()}
+ *     <Label color="signal">deployment log</Label>
+ *     <StatusDot status="pend" />
+ *   {/snippet}
+ *   <TerminalBoot lines={bootLines} oncomplete={() => deployed = true} />
+ *   {#snippet footer()}
+ *     {#if deployed}<Button variant="primary">view deployment</Button>{/if}
+ *   {/snippet}
+ * </LogScene>
+ */
 interface Props {
     /** Additional CSS classes. */
     class?: string;

package/dist/components/scenes/NarrativeScene.svelte

@@ -1,92 +1,100 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import GridOverlay from '../ambient/GridOverlay.svelte';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @remarks Use for about pages, portfolio storytelling, feature narratives. Asymmetric: copy left, canvas right.
+	 * @example
+	 * <NarrativeScene chapter="our story">
+	 *   {#snippet heading()}<Text variant="heading" as="h2">the long signal</Text>{/snippet}
+	 *   {#snippet copy()}<Text>prose content describing the narrative here.</Text>{/snippet}
+	 *   {#snippet canvas()}<FloatCard><img src="/feature.jpg" alt="" /></FloatCard>{/snippet}
+	 * </NarrativeScene>
+	 */
+	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;
+		container-type: inline-size;
+	}
+
+	.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;
+	}
+
+	@container (max-width: var(--cq-md)) {
+		.hyvui-narrative-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -1,4 +1,13 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for about pages, portfolio storytelling, feature narratives. Asymmetric: copy left, canvas right.
+ * @example
+ * <NarrativeScene chapter="our story">
+ *   {#snippet heading()}<Text variant="heading" as="h2">the long signal</Text>{/snippet}
+ *   {#snippet copy()}<Text>prose content describing the narrative here.</Text>{/snippet}
+ *   {#snippet canvas()}<FloatCard><img src="/feature.jpg" alt="" /></FloatCard>{/snippet}
+ * </NarrativeScene>
+ */
 interface Props {
     /** Section label rendered as a chapter expression above the heading. */
     chapter?: string;

package/dist/components/scenes/ReadoutScene.svelte

@@ -1,107 +1,131 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import ScanBand from '../ambient/ScanBand.svelte';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @remarks Use for dashboards, data views, log monitors. Dense, mono-forward with optional right sidebar.
+	 * @example
+	 * <ReadoutScene title="mission control">
+	 *   {#snippet header()}<StatusDot status="ok" /><Label>all systems nominal</Label>{/snippet}
+	 *   <Grid minColWidth="14rem" maxCols={4}>
+	 *     <MetricCard label="uptime" value="99.9%" />
+	 *   </Grid>
+	 *   {#snippet sidebar()}<SidebarNav items={navItems} />{/snippet}
+	 * </ReadoutScene>
+	 */
+	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. */
+		sidebar?: Snippet;
+		/** Sidebar width (used when sidebar is provided). */
+		sidebarWidth?: string;
+	}
+
+	let {
+		title = '',
+		class: className = '',
+		header,
+		children,
+		sidebar,
+		sidebarWidth = '17rem'
+	}: 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')}
+			style:--hyv-readout-sidebar-w={sidebarWidth}
+		>
+			<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);
+		container-type: inline-size;
+	}
+
+	.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;
+		flex-wrap: wrap;
+		min-width: 0;
+	}
+
+	.hyvui-readout-body {
+		width: 100%;
+	}
+
+	.hyvui-readout-body-sidebar {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, var(--hyv-readout-sidebar-w, 17rem));
+		gap: calc(1.5rem * var(--reg-spacing-scale));
+	}
+
+	.hyvui-readout-main {
+		min-width: 0;
+	}
+
+	.hyvui-readout-sidebar {
+		min-width: 0;
+	}
+
+	@container (max-width: var(--cq-md)) {
+		.hyvui-readout-body-sidebar {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -1,4 +1,15 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use for dashboards, data views, log monitors. Dense, mono-forward with optional right sidebar.
+ * @example
+ * <ReadoutScene title="mission control">
+ *   {#snippet header()}<StatusDot status="ok" /><Label>all systems nominal</Label>{/snippet}
+ *   <Grid minColWidth="14rem" maxCols={4}>
+ *     <MetricCard label="uptime" value="99.9%" />
+ *   </Grid>
+ *   {#snippet sidebar()}<SidebarNav items={navItems} />{/snippet}
+ * </ReadoutScene>
+ */
 interface Props {
     /** Optional title rendered as a readout expression label. */
     title?: string;
@@ -8,8 +19,10 @@ interface Props {
     header?: Snippet;
     /** Main content area. */
     children?: Snippet;
-    /** Optional right sidebar (fixed width ~260px). */
+    /** Optional right sidebar. */
     sidebar?: Snippet;
+    /** Sidebar width (used when sidebar is provided). */
+    sidebarWidth?: string;
 }
 declare const ReadoutScene: import("svelte").Component<Props, {}, "">;
 type ReadoutScene = ReturnType<typeof ReadoutScene>;