@selvajs/ui 2.0.11 → 3.1.0

package/dist/components/compute/AppLayout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { UISchema, SupportedTypes } from '@selvajs/schemas';
+	import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
 	import type { ActionButton } from '../../types/actionButton';
+	import type { PresetLabels } from '../../types/presetLabels';
 	import { ChevronUp } from '@lucide/svelte';
 	import Viewer, { type ViewerConfig } from '../viewer/Viewer.svelte';
 	import CalculateButton from '../primitives/CalculateButton.svelte';
@@ -28,6 +29,9 @@
 		panelActions?: ActionButton[];
 		showSaveButton?: boolean;
 		showLoadButton?: boolean;
+		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
+		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
+		presetLabels?: Partial<PresetLabels>;
 		viewerConfig?: ViewerConfig;
 	}
 
@@ -46,6 +50,9 @@
 		panelActions = [],
 		showSaveButton = true,
 		showLoadButton = true,
+		onSaveState,
+		onListStates,
+		presetLabels,
 		viewerConfig = {}
 	}: Props = $props();
 
@@ -130,6 +137,9 @@
 							onLoadValues={handleLoadValues}
 							{showSaveButton}
 							{showLoadButton}
+							{onSaveState}
+							{onListStates}
+							labels={presetLabels}
 						/>
 					{/if}
 					{#each panelActions as action (action.id)}

package/dist/components/compute/AppLayout.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { UISchema, SupportedTypes } from '@selvajs/schemas';
+import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
+import type { PresetLabels } from '../../types/presetLabels';
 import { type ViewerConfig } from '../viewer/Viewer.svelte';
 interface Props {
     schema: UISchema;
@@ -16,6 +17,9 @@ interface Props {
     panelActions?: ActionButton[];
     showSaveButton?: boolean;
     showLoadButton?: boolean;
+    onSaveState?: (state: ParameterPreset) => void | Promise<void>;
+    onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
+    presetLabels?: Partial<PresetLabels>;
     viewerConfig?: ViewerConfig;
 }
 declare const AppLayout: import("svelte").Component<Props, {}, "values" | "isViewerFullscreen">;

package/dist/components/compute/ComputeApp.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import { page } from '$app/state';
-	import type { UISchema } from '@selvajs/schemas';
+	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import type { ActionButton } from '../../types/actionButton';
 	import type { SolveFn } from '../../types/solveFn';
+	import type { PresetLabels } from '../../types/presetLabels';
 	import { getDefaultValue } from '../../schema/defaults';
 	import { createComputeThrottle } from '../../compute/computeThrottle.svelte';
 	import { createSolvingIndicator } from '../../compute/solving.svelte';
@@ -27,6 +28,16 @@
 		panelActions?: ActionButton[];
 		showSaveButton?: boolean;
 		showLoadButton?: boolean;
+		/** When set, persist saved states via this callback instead of downloading a .sps file. */
+		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
+		/** When set, the Load dialog lists these states instead of showing a file input. */
+		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
+		/** Partial overrides for the preset-manager UI strings (e.g. for localization). */
+		presetLabels?: Partial<PresetLabels>;
+		/** Name shown in the footer copyright line. Defaults to the brand name ("Selva"). */
+		copyrightName?: string;
+		/** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
+		footerText?: string;
 		/** Per-solve abort timeout (ms). Falls back to createComputeThrottle's default. */
 		solveTimeoutMs?: number;
 		footerComponent?: any;
@@ -35,6 +46,12 @@
 		footerItemPriority?: number;
 		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
 		headerRight?: Snippet;
+		/**
+		 * Bring-your-own header. When provided, replaces the built-in header inside
+		 * the standard-height sticky bar (so the fixed layout is unaffected).
+		 * Takes precedence over `headerRight`.
+		 */
+		header?: Snippet;
 		/**
 		 * Stable identifier used to scope sessionStorage entries for external-input
 		 * values. If absent, falls back to definitionKey, then to schema.id.
@@ -53,12 +70,18 @@
 		panelActions = [],
 		showSaveButton = true,
 		showLoadButton = true,
+		onSaveState,
+		onListStates,
+		presetLabels,
+		copyrightName,
+		footerText,
 		solveTimeoutMs,
 		footerComponent,
 		footerComponentProps,
 		footerItemId = 'footer-item',
 		footerItemPriority = 0,
 		headerRight,
+		header,
 		onReady,
 		externalScopeKey
 	}: Props = $props();
@@ -219,6 +242,9 @@
 		showFooter
 		title={pageTitle}
 		{showModeToggle}
+		{copyrightName}
+		{footerText}
+		{header}
 		rightContent={headerRight}
 		errors={computeErrors}
 		warnings={computeWarnings}
@@ -245,6 +271,9 @@
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}
+					{onSaveState}
+					{onListStates}
+					{presetLabels}
 					onValueChange={handleValueChange}
 					oncalculate={handleCalculate}
 					onLoadValues={() => {

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { UISchema } from '@selvajs/schemas';
+import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
 import type { SolveFn } from '../../types/solveFn';
+import type { PresetLabels } from '../../types/presetLabels';
 import type { Snippet } from 'svelte';
 interface Props {
     schema: UISchema;
@@ -13,6 +14,16 @@ interface Props {
     panelActions?: ActionButton[];
     showSaveButton?: boolean;
     showLoadButton?: boolean;
+    /** When set, persist saved states via this callback instead of downloading a .sps file. */
+    onSaveState?: (state: ParameterPreset) => void | Promise<void>;
+    /** When set, the Load dialog lists these states instead of showing a file input. */
+    onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
+    /** Partial overrides for the preset-manager UI strings (e.g. for localization). */
+    presetLabels?: Partial<PresetLabels>;
+    /** Name shown in the footer copyright line. Defaults to the brand name ("Selva"). */
+    copyrightName?: string;
+    /** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
+    footerText?: string;
     /** Per-solve abort timeout (ms). Falls back to createComputeThrottle's default. */
     solveTimeoutMs?: number;
     footerComponent?: any;
@@ -23,6 +34,12 @@ interface Props {
         loadValues: (values: Record<string, unknown>) => void;
     }) => void;
     headerRight?: Snippet;
+    /**
+     * Bring-your-own header. When provided, replaces the built-in header inside
+     * the standard-height sticky bar (so the fixed layout is unaffected).
+     * Takes precedence over `headerRight`.
+     */
+    header?: Snippet;
     /**
      * Stable identifier used to scope sessionStorage entries for external-input
      * values. If absent, falls back to definitionKey, then to schema.id.

package/dist/components/compute/ParameterPresetManager.svelte

@@ -11,6 +11,7 @@
 	import { Button, Input, Label, Textarea, Dialog, Card } from '../primitives';
 
 	import type { ActionButton } from '../../types/actionButton';
+	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
 
 	interface Props {
 		schema: UISchema;
@@ -19,6 +20,12 @@
 		showSaveButton?: boolean;
 		showLoadButton?: boolean;
 		actions?: ActionButton[];
+		/** When set, persist saved states via this callback instead of downloading a .sps file. */
+		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
+		/** When set, the Load dialog lists these states instead of showing a file input. */
+		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
+		/** Partial overrides for UI strings (e.g. for localization). */
+		labels?: Partial<PresetLabels>;
 	}
 
 	let {
@@ -27,9 +34,14 @@
 		onLoadValues,
 		showSaveButton = true,
 		showLoadButton = true,
-		actions = []
+		actions = [],
+		onSaveState,
+		onListStates,
+		labels
 	}: Props = $props();
 
+	const t = $derived({ ...DEFAULT_PRESET_LABELS, ...labels });
+
 	// Save dialog state
 	let showExportDialog = $state(false);
 	let exportName = $state('');
@@ -44,6 +56,11 @@
 	let validationResult = $state<ReturnType<typeof validateSavedState> | null>(null);
 	let fileInputRef = $state<HTMLInputElement | null>(null);
 
+	// Listed states (when onListStates is provided)
+	let listedStates = $state<ParameterPreset[]>([]);
+	let isLoadingList = $state(false);
+	let listError = $state('');
+
 	function openExportDialog() {
 		exportName = `State ${new Date().toLocaleDateString()}`;
 		exportDescription = '';
@@ -52,9 +69,9 @@
 		showExportDialog = true;
 	}
 
-	function handleExport() {
+	async function handleExport() {
 		if (!exportName.trim()) {
-			alert('Please enter a name for this state');
+			alert(t.saveNameRequired);
 			return;
 		}
 
@@ -64,46 +81,37 @@
 			author: exportAuthor.trim() || undefined,
 			tags: exportTags
 				.split(',')
-				.map((t) => t.trim())
-				.filter((t) => t.length > 0)
+				.map((tag) => tag.trim())
+				.filter((tag) => tag.length > 0)
 		});
 
-		exportStateAsJson(state);
+		if (onSaveState) await onSaveState(state);
+		else exportStateAsJson(state);
 		showExportDialog = false;
 	}
 
+	// Validate a preset, then either load it directly (no issues) or open the
+	// validation dialog (any errors or warnings). Shared by every load path.
+	function tryLoad(preset: ParameterPreset) {
+		const validation = validateSavedState(preset, schema);
+		if (validation.isValid) {
+			onLoadValues(extractLoadableValues(preset, schema, validation));
+		} else {
+			importedState = preset;
+			validationResult = validation;
+			showValidationDialog = true;
+		}
+	}
+
 	async function handleImport(event: Event) {
 		const input = event.target as HTMLInputElement;
 		if (!input.files || input.files.length === 0) return;
 
 		try {
-			const file = input.files[0];
-			const imported = await importStateFromJson(file);
-
-			// Validate before loading
-			const validation = validateSavedState(imported, schema);
-
-			if (!validation.canLoad) {
-				// Show validation errors
-				importedState = imported;
-				validationResult = validation;
-				showValidationDialog = true;
-				return;
-			}
-
-			// Warnings only - show validation but allow load
-			if (!validation.isValid) {
-				importedState = imported;
-				validationResult = validation;
-				showValidationDialog = true;
-				return;
-			}
-
-			// No issues - load immediately
-			const values = extractLoadableValues(imported, schema, validation);
-			onLoadValues(values);
+			const imported = await importStateFromJson(input.files[0]);
+			tryLoad(imported);
 		} catch (error) {
-			alert('Failed to import state: ' + (error as Error).message);
+			alert(t.loadImportError + (error as Error).message);
 		}
 
 		// Reset input
@@ -128,27 +136,44 @@
 		validationResult = null;
 	}
 
-	function openLoadDialog() {
+	async function openLoadDialog() {
 		showLoadDialog = true;
+		if (!onListStates) return;
+
+		isLoadingList = true;
+		listError = '';
+		listedStates = [];
+		try {
+			listedStates = await onListStates();
+		} catch (error) {
+			listError = (error as Error).message;
+		} finally {
+			isLoadingList = false;
+		}
 	}
 
 	function handleLoadClick() {
 		fileInputRef?.click();
 		showLoadDialog = false;
 	}
+
+	function selectListedState(preset: ParameterPreset) {
+		tryLoad(preset);
+		showLoadDialog = false;
+	}
 </script>
 
 {#if showSaveButton}
 	<Button variant="default" size="sm" onclick={openExportDialog}>
 		<Download class="mr-2 h-4 w-4" />
-		Save State
+		{t.saveButton}
 	</Button>
 {/if}
 
 {#if showLoadButton}
 	<Button variant="outline" size="sm" onclick={openLoadDialog}>
 		<Upload class="mr-2 h-4 w-4" />
-		Load State
+		{t.loadButton}
 	</Button>
 {/if}
 
@@ -168,44 +193,40 @@
 <Dialog.Root bind:open={showExportDialog}>
 	<Dialog.Content>
 		<Dialog.Header>
-			<Dialog.Title>Save Parameter State</Dialog.Title>
-			<Dialog.Description>Save the current parameter values as a .sps file</Dialog.Description>
+			<Dialog.Title>{t.saveDialogTitle}</Dialog.Title>
+			<Dialog.Description>{t.saveDialogDescription}</Dialog.Description>
 		</Dialog.Header>
 
 		<div class="gap-4 py-4 grid">
 			<div class="gap-2 grid">
-				<Label for="export-name">State Name *</Label>
-				<Input id="export-name" bind:value={exportName} placeholder="e.g., Design Option A" />
+				<Label for="export-name">{t.saveNameLabel}</Label>
+				<Input id="export-name" bind:value={exportName} placeholder={t.saveNamePlaceholder} />
 			</div>
 
 			<div class="gap-2 grid">
-				<Label for="export-description">Description</Label>
+				<Label for="export-description">{t.saveDescriptionLabel}</Label>
 				<Textarea
 					id="export-description"
 					bind:value={exportDescription}
-					placeholder="Optional description of this state"
+					placeholder={t.saveDescriptionPlaceholder}
 					rows={3}
 				/>
 			</div>
 
 			<div class="gap-2 grid">
-				<Label for="export-author">Author</Label>
-				<Input id="export-author" bind:value={exportAuthor} placeholder="Your name or email" />
+				<Label for="export-author">{t.saveAuthorLabel}</Label>
+				<Input id="export-author" bind:value={exportAuthor} placeholder={t.saveAuthorPlaceholder} />
 			</div>
 
 			<div class="gap-2 grid">
-				<Label for="export-tags">Tags</Label>
-				<Input
-					id="export-tags"
-					bind:value={exportTags}
-					placeholder="facade, option-a, client-approved (comma-separated)"
-				/>
+				<Label for="export-tags">{t.saveTagsLabel}</Label>
+				<Input id="export-tags" bind:value={exportTags} placeholder={t.saveTagsPlaceholder} />
 			</div>
 		</div>
 
 		<Dialog.Footer>
-			<Button variant="outline" onclick={() => (showExportDialog = false)}>Cancel</Button>
-			<Button onclick={handleExport}>Save State</Button>
+			<Button variant="outline" onclick={() => (showExportDialog = false)}>{t.cancelButton}</Button>
+			<Button onclick={handleExport}>{t.saveButton}</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
@@ -214,19 +235,49 @@
 <Dialog.Root bind:open={showLoadDialog}>
 	<Dialog.Content>
 		<Dialog.Header>
-			<Dialog.Title>Load Parameter State</Dialog.Title>
-			<Dialog.Description>Select a .sps state file from your drive to load</Dialog.Description>
+			<Dialog.Title>{t.loadDialogTitle}</Dialog.Title>
+			<Dialog.Description>{t.loadDialogDescription}</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="py-8">
-			<Button onclick={handleLoadClick} class="w-full" size="lg">
-				<Upload class="mr-2 h-4 w-4" />
-				Select .sps File
-			</Button>
-		</div>
+		{#if onListStates}
+			<div class="py-4 max-h-[60vh] overflow-y-auto">
+				{#if isLoadingList}
+					<p class="text-sm py-8 text-center text-muted-foreground">…</p>
+				{:else if listError}
+					<p class="text-sm py-8 text-center text-destructive">{listError}</p>
+				{:else if listedStates.length === 0}
+					<p class="text-sm py-8 text-center text-muted-foreground">{t.loadEmptyList}</p>
+				{:else}
+					<div class="space-y-2">
+						{#each listedStates as preset (preset.id)}
+							<button
+								type="button"
+								onclick={() => selectListedState(preset)}
+								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-muted"
+							>
+								<div class="text-sm font-medium">{preset.name}</div>
+								{#if preset.description}
+									<div class="text-xs mt-0.5 text-muted-foreground">{preset.description}</div>
+								{/if}
+								<div class="text-xs mt-1 text-muted-foreground">
+									{new Date(preset.timestamp).toLocaleString()}
+								</div>
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="py-8">
+				<Button onclick={handleLoadClick} class="w-full" size="lg">
+					<Upload class="mr-2 h-4 w-4" />
+					{t.loadFromFileButton}
+				</Button>
+			</div>
+		{/if}
 
 		<Dialog.Footer>
-			<Button variant="outline" onclick={() => (showLoadDialog = false)}>Cancel</Button>
+			<Button variant="outline" onclick={() => (showLoadDialog = false)}>{t.cancelButton}</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
@@ -235,10 +286,10 @@
 <Dialog.Root bind:open={showValidationDialog}>
 	<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-y-auto">
 		<Dialog.Header>
-			<Dialog.Title>State Validation Report</Dialog.Title>
+			<Dialog.Title>{t.validationTitle}</Dialog.Title>
 			<Dialog.Description>
 				{#if importedState}
-					Validating state: {importedState.name}
+					{t.validationValidatingPrefix}{importedState.name}
 				{/if}
 			</Dialog.Description>
 		</Dialog.Header>
@@ -251,9 +302,11 @@
 						<div class="gap-3 flex items-start">
 							<CheckCircle class="h-5 w-5 text-success" />
 							<div>
-								<h4 class="text-sm font-semibold text-success-foreground">No Issues Found</h4>
+								<h4 class="text-sm font-semibold text-success-foreground">
+									{t.validationNoIssuesTitle}
+								</h4>
 								<p class="text-sm mt-1 text-success-foreground/80">
-									This state can be loaded safely.
+									{t.validationNoIssuesBody}
 								</p>
 							</div>
 						</div>
@@ -263,9 +316,14 @@
 						<div class="gap-3 flex items-start">
 							<AlertTriangle class="h-5 w-5 text-warning" />
 							<div>
-								<h4 class="text-sm font-semibold text-warning-foreground">Warnings Detected</h4>
+								<h4 class="text-sm font-semibold text-warning-foreground">
+									{t.validationWarningsTitle}
+								</h4>
 								<p class="text-sm mt-1 text-warning-foreground/80">
-									{validationResult.issues.length} warning(s) found, but state can still be loaded.
+									{t.validationWarningsBody.replace(
+										'{count}',
+										String(validationResult.issues.length)
+									)}
 								</p>
 							</div>
 						</div>
@@ -275,9 +333,9 @@
 						<div class="gap-3 flex items-start">
 							<AlertTriangle class="h-5 w-5 text-destructive" />
 							<div>
-								<h4 class="text-sm font-semibold text-destructive">Critical Errors</h4>
+								<h4 class="text-sm font-semibold text-destructive">{t.validationErrorsTitle}</h4>
 								<p class="text-sm mt-1 text-destructive/80">
-									Cannot load this state due to critical incompatibilities.
+									{t.validationErrorsBody}
 								</p>
 							</div>
 						</div>
@@ -287,7 +345,7 @@
 				<!-- Issues List -->
 				{#if !validationResult.isValid}
 					<div class="space-y-2">
-						<h4 class="text-sm font-medium">Issues:</h4>
+						<h4 class="text-sm font-medium">{t.validationIssuesHeading}</h4>
 						{#each validationResult.issues as issue (issue.message)}
 							<div
 								class="p-3 rounded-lg border {issue.severity === 'error'
@@ -304,7 +362,9 @@
 										<p class="text-sm font-medium">{issue.message}</p>
 										{#if issue.details}
 											<p class="text-xs mt-1 text-muted-foreground">
-												Expected: {issue.details.expected} → Actual: {issue.details.actual}
+												{t.validationExpected}
+												{issue.details.expected} → {t.validationActual}
+												{issue.details.actual}
 											</p>
 										{/if}
 									</div>
@@ -317,9 +377,9 @@
 		{/if}
 
 		<Dialog.Footer>
-			<Button variant="outline" onclick={cancelImport}>Cancel</Button>
+			<Button variant="outline" onclick={cancelImport}>{t.cancelButton}</Button>
 			{#if validationResult?.canLoad}
-				<Button onclick={confirmLoad}>Load Anyway</Button>
+				<Button onclick={confirmLoad}>{t.loadAnywayButton}</Button>
 			{/if}
 		</Dialog.Footer>
 	</Dialog.Content>

package/dist/components/compute/ParameterPresetManager.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { UISchema } from '@selvajs/schemas';
+import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 import type { ActionButton } from '../../types/actionButton';
+import { type PresetLabels } from '../../types/presetLabels';
 interface Props {
     schema: UISchema;
     currentValues: Record<string, unknown>;
@@ -7,6 +8,12 @@ interface Props {
     showSaveButton?: boolean;
     showLoadButton?: boolean;
     actions?: ActionButton[];
+    /** When set, persist saved states via this callback instead of downloading a .sps file. */
+    onSaveState?: (state: ParameterPreset) => void | Promise<void>;
+    /** When set, the Load dialog lists these states instead of showing a file input. */
+    onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
+    /** Partial overrides for UI strings (e.g. for localization). */
+    labels?: Partial<PresetLabels>;
 }
 declare const ParameterPresetManager: import("svelte").Component<Props, {}, "">;
 type ParameterPresetManager = ReturnType<typeof ParameterPresetManager>;

package/dist/components/layout/AppShell.svelte

@@ -16,6 +16,12 @@
 		rightContent?: Snippet;
 		subnav?: Snippet;
 		headerClass?: string;
+		/**
+		 * Bring-your-own header. When provided, this renders inside the sticky
+		 * header bar instead of the built-in PageHeader. The bar keeps the
+		 * standard `--header-h` height so the fixed-mode layout math is unaffected.
+		 */
+		header?: Snippet;
 
 		// Body layout
 		// 'fixed'  — full viewport, header + body + footer; body owns its own scroll. For app-like pages (builder, preview, library/[guid]).
@@ -29,6 +35,8 @@
 		showFooter?: boolean;
 		errors?: string[];
 		warnings?: string[];
+		/** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
+		footerText?: string;
 		footerChildren?: Snippet;
 
 		// Body content
@@ -49,11 +57,13 @@
 		rightContent,
 		subnav,
 		headerClass = '',
+		header,
 		mode: _mode = 'scroll',
 		sidenav,
 		showFooter = false,
 		errors = [],
 		warnings = [],
+		footerText,
 		footerChildren,
 		class: className = '',
 		bodyClass = '',
@@ -83,17 +93,27 @@
 
 <div class={rootClass}>
 	{#if showHeader}
-		<PageHeader
-			{homeUrl}
-			{title}
-			{logo}
-			{brandName}
-			{showModeToggle}
-			{navItems}
-			{rightContent}
-			{subnav}
-			class={headerClass}
-		/>
+		{#if header}
+			<header
+				class={`top-0 backdrop-blur-sm sticky z-40 border-b border-border bg-background/90 ${headerClass}`}
+			>
+				<div class="flex h-(--header-h) items-center px-(--page-px)">
+					{@render header()}
+				</div>
+			</header>
+		{:else}
+			<PageHeader
+				{homeUrl}
+				{title}
+				{logo}
+				{brandName}
+				{showModeToggle}
+				{navItems}
+				{rightContent}
+				{subnav}
+				class={headerClass}
+			/>
+		{/if}
 	{/if}
 
 	<div class={bodyShellClass} style={bodyShellStyle}>
@@ -109,7 +129,7 @@
 
 	{#if showFooter}
 		<div class="bottom-0 sticky z-10 shrink-0">
-			<PageFooter {errors} {warnings} copyrightName={_copyright}>
+			<PageFooter {errors} {warnings} copyrightName={_copyright} {footerText}>
 				{#if footerChildren}
 					{@render footerChildren()}
 				{/if}

package/dist/components/layout/AppShell.svelte.d.ts

@@ -11,11 +11,19 @@ interface AppShellProps {
     rightContent?: Snippet;
     subnav?: Snippet;
     headerClass?: string;
+    /**
+     * Bring-your-own header. When provided, this renders inside the sticky
+     * header bar instead of the built-in PageHeader. The bar keeps the
+     * standard `--header-h` height so the fixed-mode layout math is unaffected.
+     */
+    header?: Snippet;
     mode?: 'fixed' | 'scroll';
     sidenav?: Snippet;
     showFooter?: boolean;
     errors?: string[];
     warnings?: string[];
+    /** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
+    footerText?: string;
     footerChildren?: Snippet;
     class?: string;
     bodyClass?: string;