@selvajs/ui 3.0.0 → 4.0.0

package/src/lib/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/src/lib/components/layout/PageFooter.svelte

@@ -11,10 +11,18 @@
 		errors?: string[];
 		warnings?: string[];
 		copyrightName?: string;
+		/** Fully overrides the copyright line. `{name}` and `{year}` are substituted. */
+		footerText?: string;
 		children?: Snippet;
 	}
 
-	let { errors = [], warnings = [], copyrightName = 'Selva', children }: Props = $props();
+	let {
+		errors = [],
+		warnings = [],
+		copyrightName = 'Selva',
+		footerText,
+		children
+	}: Props = $props();
 
 	let footerStore = (() => {
 		try {
@@ -64,6 +72,12 @@
 
 	const groupedErrors = $derived(groupMessages(errors));
 	const groupedWarnings = $derived(groupMessages(warnings));
+
+	const copyrightLine = $derived(
+		footerText
+			? footerText.replace('{name}', copyrightName).replace('{year}', String(_currentYear))
+			: `by ${copyrightName} © ${_currentYear}`
+	);
 </script>
 
 <footer
@@ -218,6 +232,6 @@
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p>by {copyrightName} &copy; {_currentYear}</p>
+		<p>{copyrightLine}</p>
 	</div>
 </footer>

package/src/lib/index.ts

@@ -33,3 +33,4 @@ export { randomId } from './utils/randomId';
 // UI-specific runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';
 export type { SolveFn } from './types/solveFn';
+export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/src/lib/types/presetLabels.ts

@@ -0,0 +1,86 @@
+/**
+ * Overridable UI strings for the parameter-preset manager (Save/Load flow) and
+ * footer copyright text. All optional — unset keys fall back to the English
+ * defaults in `DEFAULT_PRESET_LABELS`. Pass a partial object to localize.
+ */
+export interface PresetLabels {
+	// Toolbar buttons
+	saveButton: string;
+	loadButton: string;
+
+	// Save dialog
+	saveDialogTitle: string;
+	saveDialogDescription: string;
+	saveNameLabel: string;
+	saveNamePlaceholder: string;
+	saveDescriptionLabel: string;
+	saveDescriptionPlaceholder: string;
+	saveAuthorLabel: string;
+	saveAuthorPlaceholder: string;
+	saveTagsLabel: string;
+	saveTagsPlaceholder: string;
+	saveNameRequired: string;
+
+	// Load dialog
+	loadDialogTitle: string;
+	loadDialogDescription: string;
+	loadFromFileButton: string;
+	loadEmptyList: string;
+	loadImportError: string;
+
+	// Validation dialog
+	validationTitle: string;
+	validationValidatingPrefix: string;
+	validationNoIssuesTitle: string;
+	validationNoIssuesBody: string;
+	validationWarningsTitle: string;
+	/** `{count}` is replaced with the number of warnings. */
+	validationWarningsBody: string;
+	validationErrorsTitle: string;
+	validationErrorsBody: string;
+	validationIssuesHeading: string;
+	validationExpected: string;
+	validationActual: string;
+
+	// Shared buttons
+	cancelButton: string;
+	loadAnywayButton: string;
+}
+
+export const DEFAULT_PRESET_LABELS: PresetLabels = {
+	saveButton: 'Save State',
+	loadButton: 'Load State',
+
+	saveDialogTitle: 'Save Parameter State',
+	saveDialogDescription: 'Save the current parameter values as a .sps file',
+	saveNameLabel: 'State Name *',
+	saveNamePlaceholder: 'e.g., Design Option A',
+	saveDescriptionLabel: 'Description',
+	saveDescriptionPlaceholder: 'Optional description of this state',
+	saveAuthorLabel: 'Author',
+	saveAuthorPlaceholder: 'Your name or email',
+	saveTagsLabel: 'Tags',
+	saveTagsPlaceholder: 'facade, option-a, client-approved (comma-separated)',
+	saveNameRequired: 'Please enter a name for this state',
+
+	loadDialogTitle: 'Load Parameter State',
+	loadDialogDescription: 'Select a .sps state file from your drive to load',
+	loadFromFileButton: 'Select .sps File',
+	loadEmptyList: 'No saved states found',
+	loadImportError: 'Failed to import state: ',
+
+	validationTitle: 'State Validation Report',
+	validationValidatingPrefix: 'Validating state: ',
+	validationNoIssuesTitle: 'No Issues Found',
+	validationNoIssuesBody: 'This state can be loaded safely.',
+	validationWarningsTitle: 'Warnings Detected',
+	validationWarningsBody: '{count} warning(s) found, but state can still be loaded.',
+	validationErrorsTitle: 'Critical Errors',
+	validationErrorsBody: 'Cannot load this state due to critical incompatibilities.',
+	validationIssuesHeading: 'Issues:',
+	validationExpected: 'Expected:',
+	validationActual: 'Actual:',
+
+	cancelButton: 'Cancel',
+	loadAnywayButton: 'Load Anyway'
+};