includio-cms 0.25.0 → 0.26.0

package/dist/admin/components/layout/nav-main.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import * as Sidebar from '../../../components/ui/sidebar/index.js';
-	import type { Icon } from '@tabler/icons-svelte';
 	import { sidebarLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import CameraIcon from '@tabler/icons-svelte/icons/camera';
@@ -9,15 +7,14 @@
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import { page } from '$app/state';
 	import { authClient } from '../../auth-client.js';
-	import { resolve } from '$app/paths';
-	import { cn } from '../../../utils.js';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	let session = authClient.useSession();
 
 	const isAdmin = $derived($session.data?.user?.role === 'admin');
 
-	let items: { title: string; url: string; icon?: Icon }[] = $derived([
+	const items: NavSectionItem[] = $derived([
 		{
 			title: sidebarLang[interfaceLanguage.current].main.dashboard,
 			url: '/admin',
@@ -50,26 +47,4 @@
 	}
 </script>
 
-<Sidebar.Group class="px-0 py-1">
-	<Sidebar.Menu>
-		{#each items as item (item.title)}
-			{@const active = isActive(item.url)}
-			<Sidebar.MenuItem>
-				<Sidebar.MenuButton isActive={active} tooltipContent={item.title}>
-					{#snippet child({ props })}
-						<a class={cn(props.class)} {...props} href={item.url}>
-							{#if item.icon}
-								<item.icon
-									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-								/>
-							{/if}
-							<span class="{active ? 'text-primary' : 'text-muted-foreground'} flex-1 truncate"
-								>{item.title}</span
-							>
-						</a>
-					{/snippet}
-				</Sidebar.MenuButton>
-			</Sidebar.MenuItem>
-		{/each}
-	</Sidebar.Menu>
-</Sidebar.Group>
+<NavSection {items} {isActive} />

package/dist/admin/components/layout/nav-search.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import SearchIcon from '@tabler/icons-svelte/icons/search';
-	import DashboardIcon from '@tabler/icons-svelte/icons/dashboard';
+	import DashboardIcon from '@tabler/icons-svelte/icons/layout-dashboard';
 	import CameraIcon from '@tabler/icons-svelte/icons/camera';
 	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard-list';
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import FolderIcon from '@tabler/icons-svelte/icons/folder';
+	import FileTextIcon from '@tabler/icons-svelte/icons/file-text';
 	import { getIcon } from '../icons/icon-map.js';
 	import * as Command from '../../../components/ui/command/index.js';
 	import { goto } from '$app/navigation';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import type { Localized } from '../../../types/languages.js';
 	import { sidebarLang } from './lang.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -33,6 +35,48 @@
 	const singlesQuery = $derived(remotes.getSingles());
 	const collectionsQuery = $derived(remotes.getCollections());
 	const formsQuery = $derived(remotes.getForms());
+
+	// --- entry search (debounced, server-side) ---
+	type EntryHit = {
+		entryId: string;
+		title: string;
+		titleLanguage: string | null;
+		kind: 'collection' | 'single';
+		containerSlug: string;
+		containerLabel: Localized;
+	};
+
+	let searchTerm = $state('');
+	let entryResults = $state<EntryHit[]>([]);
+	let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => {
+		const q = searchTerm.trim();
+		const lang = interfaceLanguage.current;
+		clearTimeout(searchTimeout);
+		if (q.length < 2) {
+			entryResults = [];
+			return;
+		}
+		searchTimeout = setTimeout(async () => {
+			try {
+				entryResults = (await remotes.searchEntries({ query: q, language: lang })) as EntryHit[];
+			} catch {
+				entryResults = [];
+			}
+		}, 250);
+	});
+
+	// reset when the dialog closes
+	$effect(() => {
+		if (!open) {
+			searchTerm = '';
+			entryResults = [];
+			clearTimeout(searchTimeout);
+		}
+	});
+
+	const entriesHeading = $derived(interfaceLanguage.current === 'pl' ? 'Wpisy' : 'Entries');
 </script>
 
 <svelte:window {onkeydown} />
@@ -57,10 +101,34 @@
 	</button>
 
 	<Command.Dialog bind:open title={sidebarLang[interfaceLanguage.current].search.placeholder}>
-		<Command.Input placeholder={sidebarLang[interfaceLanguage.current].search.placeholder} />
+		<Command.Input
+			bind:value={searchTerm}
+			placeholder={sidebarLang[interfaceLanguage.current].search.placeholder}
+		/>
 		<Command.List>
 			<Command.Empty>{sidebarLang[interfaceLanguage.current].search.noResults}</Command.Empty>
 
+			{#if entryResults.length > 0}
+				<Command.Group heading={entriesHeading}>
+					{#each entryResults as hit (hit.kind + ':' + hit.entryId)}
+						<Command.Item
+							value="{hit.title} {hit.entryId}"
+							onSelect={() => navigate(`/admin/entries/${hit.entryId}`)}
+						>
+							<FileTextIcon class="mr-2 size-4 shrink-0" />
+							<span class="truncate"
+								>{hit.title}{#if hit.titleLanguage && hit.titleLanguage !== interfaceLanguage.current}<span
+										class="text-muted-foreground text-xs">{' '}({hit.titleLanguage})</span
+									>{/if}</span
+							>
+							<span class="text-muted-foreground ml-auto pl-3 text-xs whitespace-nowrap">
+								{getLocalizedLabel(hit.containerLabel, interfaceLanguage.current)}
+							</span>
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			{/if}
+
 			<Command.Group heading={sidebarLang[interfaceLanguage.current].main.platform}>
 				<Command.Item onSelect={() => navigate('/admin')}>
 					<DashboardIcon class="mr-2 size-4" />

package/dist/admin/components/layout/nav-section.svelte

@@ -0,0 +1,77 @@
+<script lang="ts" module>
+	/**
+	 * @internal
+	 * Internal helper — DRY for sidebar nav-* sections (NavMain, NavCollections, NavSingletons, NavForms, NavShop).
+	 * Not exported publicly. Sesja 4 (UI Normalization → 0.26.0).
+	 */
+	import type { Icon } from '@tabler/icons-svelte';
+
+	export type NavSectionItem = {
+		title: string;
+		url: string;
+		icon?: Icon;
+		count?: number;
+	};
+</script>
+
+<script lang="ts">
+	import * as Sidebar from '../../../components/ui/sidebar/index.js';
+	import { cn } from '../../../utils.js';
+
+	let {
+		items,
+		label,
+		labelIcon,
+		isActive,
+		withTopBorder = false
+	}: {
+		items: NavSectionItem[];
+		label?: string;
+		labelIcon?: Icon;
+		isActive: (url: string) => boolean;
+		withTopBorder?: boolean;
+	} = $props();
+</script>
+
+<Sidebar.Group
+	role="presentation"
+	class={cn('px-0 py-1', withTopBorder && 'border-sidebar-border mt-1 border-t pt-2 pb-1')}
+>
+	{#if label}
+		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden">
+			{#if labelIcon}
+				{@const LabelIcon = labelIcon}
+				<LabelIcon class="mr-1 size-3.5" />
+			{/if}
+			{label}
+		</Sidebar.GroupLabel>
+	{/if}
+	<Sidebar.Menu>
+		{#each items as item (item.url)}
+			{@const active = isActive(item.url)}
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton isActive={active} tooltipContent={item.title}>
+					{#snippet child({ props })}
+						<a {...props} href={item.url}>
+							{#if item.icon}
+								{@const ItemIcon = item.icon}
+								<ItemIcon
+									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+								/>
+							{/if}
+							<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}">
+								{item.title}
+							</span>
+							{#if item.count}
+								<span
+									class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
+									>{item.count}</span
+								>
+							{/if}
+						</a>
+					{/snippet}
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+		{/each}
+	</Sidebar.Menu>
+</Sidebar.Group>

package/dist/admin/components/layout/nav-section.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @internal
+ * Internal helper — DRY for sidebar nav-* sections (NavMain, NavCollections, NavSingletons, NavForms, NavShop).
+ * Not exported publicly. Sesja 4 (UI Normalization → 0.26.0).
+ */
+import type { Icon } from '@tabler/icons-svelte';
+export type NavSectionItem = {
+    title: string;
+    url: string;
+    icon?: Icon;
+    count?: number;
+};
+type $$ComponentProps = {
+    items: NavSectionItem[];
+    label?: string;
+    labelIcon?: Icon;
+    isActive: (url: string) => boolean;
+    withTopBorder?: boolean;
+};
+declare const NavSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavSection = ReturnType<typeof NavSection>;
+export default NavSection;

package/dist/admin/components/layout/nav-shop.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import * as Sidebar from '../../../components/ui/sidebar/index.js';
 	import { sidebarLang } from './lang.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import PackageIcon from '@tabler/icons-svelte/icons/package';
@@ -9,6 +8,7 @@
 	import TicketIcon from '@tabler/icons-svelte/icons/ticket';
 	import BuildingStoreIcon from '@tabler/icons-svelte/icons/building-store';
 	import { page } from '$app/state';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang = $derived(sidebarLang[interfaceLanguage.current].shop);
@@ -20,7 +20,7 @@
 		return pathname === url || pathname.startsWith(url + '/');
 	}
 
-	const items = $derived([
+	const items: NavSectionItem[] = $derived([
 		{ title: lang.products, url: '/admin/shop/products', icon: PackageIcon },
 		{ title: lang.orders, url: '/admin/shop/orders', icon: ShoppingCartIcon },
 		{ title: lang.shipping, url: '/admin/shop/shipping-methods', icon: TruckIcon },
@@ -29,29 +29,5 @@
 </script>
 
 {#if enabledQuery.ready && enabledQuery.current}
-	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden">
-			<BuildingStoreIcon class="mr-1 size-3.5" />
-			{lang.title}
-		</Sidebar.GroupLabel>
-		<Sidebar.Menu>
-			{#each items as item (item.url)}
-				{@const active = isActive(item.url)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton isActive={active} tooltipContent={item.title}>
-						{#snippet child({ props })}
-							<a {...props} href={item.url}>
-								<item.icon
-									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-								/>
-								<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}">
-									{item.title}
-								</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		</Sidebar.Menu>
-	</Sidebar.Group>
+	<NavSection {items} label={lang.title} labelIcon={BuildingStoreIcon} {isActive} withTopBorder />
 {/if}

package/dist/admin/components/layout/nav-singletons.svelte

@@ -8,6 +8,7 @@
 	import { page } from '$app/state';
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import { getIcon } from '../icons/icon-map.js';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
@@ -18,6 +19,14 @@
 	}
 
 	const query = $derived(remotes.getSingles());
+
+	const items: NavSectionItem[] = $derived(
+		query.current?.map((item) => ({
+			title: getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug,
+			url: `/admin/entries/${item.slug}`,
+			icon: getIcon(item.sidebarIcon) ?? SettingsIcon
+		})) ?? []
+	);
 </script>
 
 {#if !query.ready}
@@ -32,32 +41,11 @@
 			</div>
 		</Sidebar.Menu>
 	</Sidebar.Group>
-{:else if query.current && query.current.length > 0}
-	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
-			>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel
-		>
-		<Sidebar.Menu>
-			{#each query.current as item (item)}
-				{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
-				{@const url = `/admin/entries/${item.slug}`}
-				{@const active = isActive(url)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton isActive={active} tooltipContent={name}>
-						{#snippet child({ props })}
-							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? SettingsIcon}
-							<a {...props} href={url}>
-								<ResolvedIcon
-									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-								/>
-								<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
-									>{name}</span
-								>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		</Sidebar.Menu>
-	</Sidebar.Group>
+{:else if items.length > 0}
+	<NavSection
+		{items}
+		label={sidebarLang[interfaceLanguage.current].singletons.title}
+		{isActive}
+		withTopBorder
+	/>
 {/if}

package/dist/admin/components/layout/page-header.stories.svelte

@@ -0,0 +1,93 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import PageHeader from './page-header.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import PlusIcon from '@tabler/icons-svelte/icons/plus';
+	import FilterIcon from '@tabler/icons-svelte/icons/filter';
+
+	const { Story } = defineMeta({
+		title: 'Admin/Layout/PageHeader',
+		component: PageHeader,
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'fullscreen',
+			docs: {
+				description: {
+					component:
+						'Header strony adminowej: tytuł, opis, count badge, primary/secondary actions slots. Wspólny pattern dla wszystkich list i form pages.'
+				}
+			}
+		}
+	});
+</script>
+
+<Story name="BasicTitle">
+	<PageHeader title="Artykuły" />
+</Story>
+
+<Story name="WithCount">
+	<PageHeader title="Artykuły" count={42} />
+</Story>
+
+<Story name="WithDescription">
+	<PageHeader
+		title="Artykuły"
+		description="Zarządzaj treściami publikowanymi na blogu i w aktualnościach."
+	/>
+</Story>
+
+<Story name="WithActions">
+	<PageHeader title="Artykuły" count={42}>
+		{#snippet secondaryActions()}
+			<Button variant="outline" size="sm">
+				<FilterIcon class="size-4" />
+				Filtry
+			</Button>
+		{/snippet}
+		{#snippet primaryActions()}
+			<Button size="sm">
+				<PlusIcon class="size-4" />
+				Nowy artykuł
+			</Button>
+		{/snippet}
+	</PageHeader>
+</Story>
+
+<Story name="WithEverything">
+	<PageHeader
+		title="Artykuły"
+		count={42}
+		description="Zarządzaj treściami publikowanymi na blogu i w aktualnościach."
+	>
+		{#snippet secondaryActions()}
+			<Button variant="outline" size="sm">
+				<FilterIcon class="size-4" />
+				Filtry
+			</Button>
+		{/snippet}
+		{#snippet primaryActions()}
+			<Button size="sm">
+				<PlusIcon class="size-4" />
+				Nowy artykuł
+			</Button>
+		{/snippet}
+	</PageHeader>
+</Story>
+
+<Story
+	name="Mobile"
+	parameters={{ viewport: { defaultViewport: 'mobile' } }}
+>
+	<PageHeader
+		title="Artykuły"
+		count={42}
+		description="Zarządzaj treściami publikowanymi na blogu i w aktualnościach."
+	>
+		{#snippet primaryActions()}
+			<Button size="sm">
+				<PlusIcon class="size-4" />
+				Nowy
+			</Button>
+		{/snippet}
+	</PageHeader>
+</Story>

package/dist/admin/components/layout/page-header.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default PageHeader;
+type PageHeader = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PageHeader: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import PageHeader from './page-header.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/admin/components/layout/page-header.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" module>
+	/**
+	 * @internal
+	 * Internal helper — page header pattern (title + description + count badge + actions).
+	 * Used by list/detail pages in admin (sesje 6-8). Not exported publicly.
+	 */
+	import type { Snippet } from 'svelte';
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+
+	let {
+		title,
+		description,
+		count,
+		primaryActions,
+		secondaryActions,
+		class: className
+	}: {
+		title: string;
+		description?: string;
+		count?: number;
+		primaryActions?: Snippet;
+		secondaryActions?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		'flex flex-wrap items-start justify-between gap-3 px-4 py-4 sm:gap-4 sm:px-6 sm:py-5',
+		className
+	)}
+>
+	<div class="flex min-w-0 flex-col gap-1">
+		<div class="flex items-baseline gap-2 sm:gap-3">
+			<h1
+				class="text-foreground truncate text-2xl font-extrabold tracking-[-0.5px] sm:text-3xl lg:text-4xl"
+				style="font-family: 'Plus Jakarta Sans', sans-serif;"
+			>
+				{title}
+			</h1>
+			{#if count !== undefined}
+				<span
+					class="bg-lavender-lighter text-primary inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full px-2 text-xs font-bold"
+					aria-label="{count} pozycji"
+				>
+					{count}
+				</span>
+			{/if}
+		</div>
+		{#if description}
+			<p class="text-muted-foreground text-sm">{description}</p>
+		{/if}
+	</div>
+
+	{#if primaryActions || secondaryActions}
+		<div class="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto">
+			{#if secondaryActions}
+				{@render secondaryActions()}
+			{/if}
+			{#if primaryActions}
+				{@render primaryActions()}
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/admin/components/layout/page-header.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @internal
+ * Internal helper — page header pattern (title + description + count badge + actions).
+ * Used by list/detail pages in admin (sesje 6-8). Not exported publicly.
+ */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    count?: number;
+    primaryActions?: Snippet;
+    secondaryActions?: Snippet;
+    class?: string;
+};
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/admin/components/layout/site-header.svelte

@@ -27,6 +27,8 @@
 		}
 	};
 
+	const skipToMain = $derived(sidebarLang[interfaceLanguage.current].nav.skipToMain);
+
 	async function onLogout() {
 		await authClient.signOut({
 			fetchOptions: {
@@ -39,6 +41,12 @@
 	}
 </script>
 
+<a
+	href="#main-content"
+	class="bg-primary text-primary-foreground sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg focus-visible:ring-2 focus-visible:ring-offset-2"
+>
+	{skipToMain}
+</a>
 <header
 	class="border-sidebar-border bg-background/60 flex h-(--header-height) shrink-0 items-center gap-2 border-b backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
 >
@@ -56,6 +64,7 @@
 				class="text-primary text-[13px] font-medium hover:border-[var(--lavender)] hover:bg-[var(--lavender-lighter)]"
 				target="_blank"
 				rel="noopener noreferrer"
+				aria-label={lang[interfaceLanguage.current].openSite}
 			>
 				<ExternalLinkIcon class="size-3.5" />
 				<span class="hidden sm:inline">{lang[interfaceLanguage.current].openSite}</span>

package/dist/admin/components/layout/site-header.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SiteHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SiteHeader = InstanceType<typeof SiteHeader>;
+declare const SiteHeader: import("svelte").Component<Record<string, never>, {}, "">;
+type SiteHeader = ReturnType<typeof SiteHeader>;
 export default SiteHeader;

package/dist/admin/components/media/file/file-name-input.svelte

@@ -68,8 +68,12 @@
 <Field.Field>
 	<Field.Label>{lang[interfaceLanguage.current].label}</Field.Label>
 	<div class="flex w-full items-center space-x-2">
-		<Input bind:value disabled={loading} />
-		<Button type="button" variant="outline" onclick={updateName} disabled={loading}>
+		<Field.Control>
+			{#snippet child(props)}
+				<Input {...props} bind:value disabled={loading} />
+			{/snippet}
+		</Field.Control>
+		<Button type="button" variant="outline" onclick={updateName} loading={loading}>
 			{lang[interfaceLanguage.current].save}
 		</Button>
 	</div>