@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/scenes/ArchiveScene.svelte

@@ -1,95 +1,92 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Grid from '../layout/Grid.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Optional scene title. */
+		title?: string;
+		/** Minimum card width used for responsive auto layout. */
+		minCardWidth?: string;
+		/** Maximum number of columns (auto layout). */
+		maxCols?: number;
+		/** Gap between items. */
+		gap?: string;
+		/** Deprecated alias for maxCols. */
+		cols?: number;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Filter controls area above the grid. */
+		filter?: Snippet;
+		/** Grid items (Cards, images, etc.). */
+		children?: Snippet;
+	}
+
+	let {
+		title = '',
+		minCardWidth = '18rem',
+		maxCols,
+		gap = 'var(--space-inline)',
+		cols,
+		class: className = '',
+		filter,
+		children
+	}: Props = $props();
+
+	const effectiveMaxCols = $derived(maxCols ?? cols ?? 3);
+</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}
+		<Grid maxCols={effectiveMaxCols} minColWidth={minCardWidth} {gap} class="hyvui-archive-grid">
+			{#if children}{@render children()}{/if}
+		</Grid>
+	</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;
+	}
+</style>

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

@@ -2,7 +2,13 @@ import type { Snippet } from 'svelte';
 interface Props {
     /** Optional scene title. */
     title?: string;
-    /** Number of grid columns. */
+    /** Minimum card width used for responsive auto layout. */
+    minCardWidth?: string;
+    /** Maximum number of columns (auto layout). */
+    maxCols?: number;
+    /** Gap between items. */
+    gap?: string;
+    /** Deprecated alias for maxCols. */
     cols?: number;
     /** Additional CSS classes. */
     class?: string;

package/dist/components/scenes/LogScene.svelte

@@ -1,77 +1,72 @@
-<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';
+
+	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/NarrativeScene.svelte

@@ -1,92 +1,91 @@
-<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';
+
+	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>