@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/scenes/ReadoutScene.svelte

@@ -1,107 +1,120 @@
-<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';
+
+	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

@@ -8,8 +8,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>;

package/dist/components/scenes/StageScene.svelte

@@ -1,104 +1,97 @@
-<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>
+<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>