includio-cms 0.14.0 → 0.14.2

package/README.md

@@ -1,58 +1,53 @@
-# Svelte library
+# Includio CMS
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+A headless CMS built for SvelteKit. Type-safe, extensible, with a modern admin interface.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+## Features
 
-## Creating a project
+- **19 field types** — text, structured content, media, relations, blocks, SEO, and more
+- **Structured content** — ProseMirror-based rich text with inline blocks, tables, media embeds
+- **Media management** — image styles (Sharp), video transcoding (ffmpeg), focal points, blur placeholders
+- **Per-language versioning** — independent draft/published/scheduled per language
+- **Layout DSL** — organize admin editor with sections, columns, cards, accordions
+- **Frontend components** — `<Image>`, `<Video>`, `<StructuredContent>`, `<Media>` for SvelteKit
+- **REST API** — API key auth, CRUD endpoints, schema introspection
+- **Entity API** — server-side programmatic CRUD for scripts, migrations, webhooks
+- **Code generation** — TypeScript types and Zod schemas from your content schema
+- **Pluggable adapters** — swap database, file storage, email, and AI providers
+- **Plugin system** — lifecycle hooks and custom field types
+- **Video transcoding** — auto-transcode to mp4/webm with background processing
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Quick Start
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+pnpm add includio-cms
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
+```typescript
+import { defineConfig } from 'includio-cms/sveltekit';
+import { pg } from 'includio-cms/db-postgres';
+import { local } from 'includio-cms/files-local';
+
+export default defineConfig({
+  languages: ['en'],
+  db: pg({ databaseUrl: process.env.DATABASE_URL }),
+  files: local(),
+  collections: [/* ... */],
+});
 ```
 
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
+See the [full documentation](/docs) for installation, configuration, and usage.
 
-You can preview the production build with `npm run preview`.
+## Links
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+- [Full Documentation](DOCS.md)
+- [Changelog](CHANGELOG.md)
+- [Roadmap](ROADMAP.md)
 
-## Publishing
+## For AI Assistants
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+Full documentation is in [`DOCS.md`](DOCS.md) (shipped with the npm package). When working on a project using includio-cms, read `node_modules/includio-cms/DOCS.md` for the complete API reference, available components, and migration guides.
 
-To publish your library to [npm](https://www.npmjs.com):
+## License
 
-```bash
-npm publish
-```
+MIT

package/ROADMAP.md

@@ -256,6 +256,19 @@
 - [x] `[feature]` `[P2]` System info endpoint — CMS version, Node, PostgreSQL, ffmpeg, sharp, OS <!-- files: src/lib/admin/api/system-info.ts, src/lib/core/server/media/operations/getSystemInfo.ts -->
 - [x] `[feature]` `[P2]` Disk usage endpoint — breakdown per category (originals, image styles, video styles, posters) <!-- files: src/lib/admin/api/system-info.ts, src/lib/core/server/media/operations/getDiskUsage.ts -->
 
+## 0.14.1 — CMS context, Svelte 5 compat, docs
+
+- [x] `[feature]` `[P1]` CMS context provider — Safari mp4 preference for video delivery <!-- files: src/lib/sveltekit/components/cms-provider.svelte, src/lib/sveltekit/components/video-context.ts, src/lib/types/cms-context.ts -->
+- [x] `[fix]` `[P1]` Svelte 5 compatibility — a11y annotations, warning suppression across admin components
+- [x] `[chore]` `[P1]` Documentation overhaul — new pages, README rewrite, DOCS.md compilation script <!-- files: scripts/compile-docs.ts, DOCS.md -->
+- [x] `[chore]` `[P2]` Remove obsolete docs/ Obsidian config & stale docs
+
+## 0.14.2 — Image styles: aspectRatio, skip defaults, lazy generation
+
+- [x] `[feature]` `[P1]` aspectRatio option for image styles — crop to ratio without fixed dimensions <!-- files: src/lib/types/fields.ts, src/lib/core/server/media/styles/sharp/generateImageStyle.ts, src/lib/db-postgres/schema/imageStyle.ts -->
+- [x] `[feature]` `[P1]` Skip default styles when field defines custom styles (prevents `<source>` conflicts in `<picture>`) <!-- files: src/lib/core/server/fields/utils/imageStyles.ts -->
+- [x] `[feature]` `[P2]` Lazy generation of custom field styles on first read <!-- files: src/lib/core/server/fields/utils/imageStyles.ts -->
+
 ## 0.15.0 — SEO module
 
 - [ ] `[feature]` `[P1]` SERP preview + character limits for title/description <!-- files: src/lib/admin/components/fields/seo-field.svelte -->

package/dist/admin/client/account/preferences-section.svelte

@@ -21,6 +21,7 @@
 	</Card.Header>
 	<Card.Content>
 		<div class="flex flex-col gap-1">
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="text-sm font-medium">{lang.language.select}</label>
 			<Select.Root
 				type="single"

package/dist/admin/client/account/profile-section.svelte

@@ -17,7 +17,8 @@
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang = $derived(accountLang[interfaceLanguage.current]);
 
-	const schema = $derived(createProfileSchema(lang.errors));
+	// superForm is initialized once — no need for reactive schema
+	const schema = createProfileSchema(lang.errors);
 
 	$effect(() => {
 		const sessionName = $session.data?.user.name;
@@ -87,6 +88,7 @@
 
 					<!-- Email readonly -->
 					<div class="flex flex-col gap-1">
+tttttt<!-- svelte-ignore a11y_label_has_associated_control -->
 						<label class="text-sm font-medium">{lang.profile.email}</label>
 						<div class="acct-input-wrap">
 							<Input
@@ -117,6 +119,7 @@
 
 					<!-- Role badge -->
 					<div class="flex flex-col gap-1">
+tttttt<!-- svelte-ignore a11y_label_has_associated_control -->
 						<label class="text-sm font-medium">{lang.profile.role}</label>
 						<div>
 							<span

package/dist/admin/client/account/security-section.svelte

@@ -19,8 +19,8 @@
 	let showNew = $state(false);
 	let showConfirm = $state(false);
 
-	const schema = $derived(createPasswordSchema(lang.errors));
-
+	// superForm is initialized once — no need for reactive schema
+	const schema = createPasswordSchema(lang.errors);
 	const passwordForm = superForm(defaults(zod4(schema)), {
 		validators: zod4Client(schema),
 		SPA: true,

package/dist/admin/client/entry/entry-form.svelte

@@ -96,7 +96,7 @@
 </script>
 
 {#if layoutNodes}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions a11y_no_static_element_interactions -->
 	<div class="layout-entry-form" onclick={handleClick}>
 		<LayoutRenderer
 			nodes={layoutNodes}

package/dist/admin/client/users/users-page.svelte

@@ -396,34 +396,34 @@
 								aria-label={lang.selectAll}
 							/>
 						</Table.Head>
-						<Table.Head>
+						<Table.Head aria-sort={getAriaSort('name')}>
+							{@const SortIconName = getSortIcon('name')}
 							<button
 								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
 								onclick={() => toggleSort('name')}
-								aria-sort={getAriaSort('name')}
 							>
 								{lang.name}
-								<svelte:component this={getSortIcon('name')} class="users-sort-icon size-3.5" />
+								<SortIconName class="users-sort-icon size-3.5" />
 							</button>
 						</Table.Head>
-						<Table.Head>
+						<Table.Head aria-sort={getAriaSort('role')}>
+							{@const SortIconRole = getSortIcon('role')}
 							<button
 								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
 								onclick={() => toggleSort('role')}
-								aria-sort={getAriaSort('role')}
 							>
 								{lang.role}
-								<svelte:component this={getSortIcon('role')} class="users-sort-icon size-3.5" />
+								<SortIconRole class="users-sort-icon size-3.5" />
 							</button>
 						</Table.Head>
-						<Table.Head>
+						<Table.Head aria-sort={getAriaSort('createdAt')}>
+							{@const SortIconCreatedat = getSortIcon('createdAt')}
 							<button
 								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
 								onclick={() => toggleSort('createdAt')}
-								aria-sort={getAriaSort('createdAt')}
 							>
 								{lang.createdAt}
-								<svelte:component this={getSortIcon('createdAt')} class="users-sort-icon size-3.5" />
+								<SortIconCreatedat class="users-sort-icon size-3.5" />
 							</button>
 						</Table.Head>
 						<Table.Head class="w-[120px]">

package/dist/admin/components/fields/blocks-field.svelte

@@ -327,7 +327,7 @@
 									<div class="flex grow items-center justify-between gap-4">
 										<div class="flex items-center gap-4">
 											{#if !isFixedLength || fixedCount > 1}
-												<!-- svelte-ignore a11y_no_static_element_interactions -->
+												<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 												<div
 													use:draggable={{
 														container: index.toString(),

package/dist/admin/components/fields/media-field.svelte

@@ -114,6 +114,7 @@
 
 {#snippet videoPreview(file: MediaFile)}
 	<div class="w-full h-full">
+tt<!-- svelte-ignore a11y_media_has_caption -->
 		<video
 			controls
 			poster={file.posterUrl || file.thumbnailUrl || undefined}

package/dist/admin/components/layout/layout-renderer.svelte

@@ -8,6 +8,7 @@
 	import * as Accordion from '../../../components/ui/accordion/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import LayoutRenderer from './layout-renderer.svelte';
 	import { cn } from '../../../utils.js';
 	import {
 		resolveFieldByPath,
@@ -106,7 +107,7 @@
 {/snippet}
 
 {#snippet recurse(childNodes: LayoutNode[])}
-	<svelte:self
+	<LayoutRenderer
 		nodes={childNodes}
 		{fields}
 		{form}

package/dist/admin/components/layout/layout-renderer.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { LayoutNode } from '../../../types/layout.js';
 import type { Field } from '../../../types/fields.js';
 import type { SuperForm } from 'sveltekit-superforms';
+import LayoutRenderer from './layout-renderer.svelte';
 type Props = {
     nodes: LayoutNode[];
     fields: Field[];

package/dist/admin/components/media/bulk-action-bar.svelte

@@ -181,6 +181,7 @@
 									onUpdateTagColor(colorPickerTag.id, color);
 									colorPickerTagId = null;
 								}}
+							aria-label="Set color to {color}"
 							></button>
 						{/each}
 					</div>
@@ -208,6 +209,7 @@
 												e.preventDefault();
 												colorPickerTagId = tag.id;
 											}}
+										aria-label="Change tag color"
 										></button>
 									{:else}
 										<span class="mr-2 h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>

package/dist/admin/components/media/file/file-details.svelte

@@ -272,6 +272,7 @@
 					</div>
 				{:else}
 					<div class="w-full overflow-hidden rounded-lg shadow-sm">
+tttttt<!-- svelte-ignore a11y_media_has_caption -->
 						<video
 							controls
 							poster={file.posterUrl || file.thumbnailUrl || undefined}

package/dist/admin/components/media/focal-point-input.svelte

@@ -148,12 +148,13 @@
 	</p>
 
 	<!-- Focal point area -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
 	<div
 		bind:this={container}
-		role="application"
+		role="group"
 		tabindex="0"
 		aria-label={t.ariaLabel}
-		aria-valuetext={t.ariaValueText(xPercent, yPercent)}
+		aria-roledescription="focal point picker"
 		class="relative cursor-crosshair overflow-hidden rounded-lg border select-none focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
 		onpointerdown={onPointerDown}
 		onpointermove={onPointerMove}

package/dist/admin/components/media/tag-sidebar.svelte

@@ -271,6 +271,7 @@
 														)}
 														style="background-color: {color}"
 														onclick={() => handleColorChange(tag, color)}
+														aria-label="Set color to {color}"
 													></button>
 												{/each}
 											</div>

package/dist/admin/components/tiptap/InlineBlockNodeView.svelte

@@ -104,7 +104,8 @@
 		return {};
 	}
 
-	const allFields = blockDef?.fields ?? [];
+	// blockDef won't change for this node instance — capture once from static source
+	const allFields = ((editor.extensionManager.extensions.find((e) => e.name === 'inlineBlock')?.options as { inlineBlocks: ObjectField[] })?.inlineBlocks ?? []).find((b) => b.slug === node.attrs.blockType)?.fields ?? [];
 	const standaloneForm = createStandaloneForm(normalizeBlockData(parseBlockData(node.attrs.blockData), allFields));
 	const formStore = standaloneForm.form;
 

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -0,0 +1,17 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+declare const Sub: typeof DropdownMenuPrimitive.Sub;
+declare const Root: typeof DropdownMenuPrimitive.Root;
+export { CheckboxItem, Content, Root as DropdownMenu, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };

package/dist/components/ui/spinner/spinner.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import type { ComponentProps } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
+	let { class: className, ...restProps }: HTMLAttributes<SVGElement> = $props();
 </script>
 
 <Loader2Icon

package/dist/components/ui/spinner/spinner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const Spinner: import("svelte").Component<HTMLAttributes<SVGElement>, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/core/server/fields/utils/imageStyles.js

@@ -1,4 +1,4 @@
-import { getImageStyleIfExists } from '../../media/styles/operations/getImageStyle.js';
+import { getImageStyle } from '../../media/styles/operations/getImageStyle.js';
 import { getCMS } from '../../../cms.js';
 import { generateBlurDataUrl } from '../../media/utils/generateBlurDataUrl.js';
 export const defaultStyles = [
@@ -61,13 +61,14 @@ async function ensureBlurDataUrl(val) {
     }
 }
 export async function getImageStyles(field, val) {
-    const rawStyles = [...(isProcessableImage(val) ? defaultStyles : []), ...(field.styles || [])];
+    const hasCustomStyles = field.styles && field.styles.length > 0;
+    const rawStyles = [...(isProcessableImage(val) && !hasCustomStyles ? defaultStyles : []), ...(field.styles || [])];
     const originalFormat = getOriginalFormat(val);
     const stylesArr = expandStyleFormats(rawStyles, originalFormat);
     const [styles, blurDataUrl] = await Promise.all([
         Promise.all(stylesArr.map(async (style) => {
             try {
-                const styleDbData = await getImageStyleIfExists(val.id, style);
+                const styleDbData = await getImageStyle(val.id, style);
                 if (!styleDbData)
                     return null;
                 const result = {
@@ -88,7 +89,7 @@ export async function getImageStyles(field, val) {
                                     srcset: undefined,
                                     sizes: undefined
                                 };
-                                const variantData = await getImageStyleIfExists(val.id, variantStyle);
+                                const variantData = await getImageStyle(val.id, variantStyle);
                                 if (!variantData)
                                     return null;
                                 return `${variantData.url} ${w}w`;

package/dist/core/server/media/styles/sharp/generateImageStyle.js

@@ -31,6 +31,33 @@ export async function generateImageStyleFromBuffer(buf, mediaFile, style) {
     const width = style.width ?? imgWidth ?? mediaFile.width ?? undefined;
     const height = style.height ?? undefined;
     if (
+    // Aspect ratio crop
+    style.crop &&
+        style.aspectRatio &&
+        imgWidth &&
+        imgHeight) {
+        const targetAspect = style.aspectRatio;
+        const imgAspect = imgWidth / imgHeight;
+        let cropW, cropH;
+        if (imgAspect > targetAspect) {
+            cropH = imgHeight;
+            cropW = Math.round(imgHeight * targetAspect);
+        }
+        else {
+            cropW = imgWidth;
+            cropH = Math.round(imgWidth / targetAspect);
+        }
+        const fX = mediaFile.focalX ?? 0.5;
+        const fY = mediaFile.focalY ?? 0.5;
+        const region = calculateFocalCropRegion(imgWidth, imgHeight, fX, fY, cropW, cropH);
+        sharpInstance = sharpInstance.extract(region);
+        if (style.width || style.height) {
+            const resizeW = style.width ?? undefined;
+            const resizeH = style.height ?? (resizeW ? Math.round(resizeW / style.aspectRatio) : undefined);
+            sharpInstance = sharpInstance.resize(resizeW, resizeH);
+        }
+    }
+    else if (
     // Focal point crop
     style.crop &&
         width &&

package/dist/db-postgres/index.js

@@ -584,7 +584,7 @@ export function pg(config) {
             const [imageStyle] = await db
                 .select()
                 .from(schema.imageStylesTable)
-                .where(and(eq(schema.imageStylesTable.mediaFileId, mediaFileId), eq(schema.imageStylesTable.name, style.name), style.width ? eq(schema.imageStylesTable.width, style.width) : undefined, style.height ? eq(schema.imageStylesTable.height, style.height) : undefined, style.quality ? eq(schema.imageStylesTable.quality, style.quality) : undefined))
+                .where(and(eq(schema.imageStylesTable.mediaFileId, mediaFileId), eq(schema.imageStylesTable.name, style.name), style.width ? eq(schema.imageStylesTable.width, style.width) : undefined, style.height ? eq(schema.imageStylesTable.height, style.height) : undefined, style.quality ? eq(schema.imageStylesTable.quality, style.quality) : undefined, style.aspectRatio ? eq(schema.imageStylesTable.aspectRatio, style.aspectRatio) : undefined))
                 .limit(1);
             if (!imageStyle)
                 return null;
@@ -597,9 +597,9 @@ export function pg(config) {
         createImageStyle: async (mediaFileId, file, style) => {
             const mimeType = file.mimeType ?? `image/${style.format}`;
             const rows = await db.execute(sql `
-				INSERT INTO image_styles (id, media_file_id, name, url, width, height, crop, quality, media, mime_type)
-				VALUES (gen_random_uuid(), ${mediaFileId}, ${style.name}, ${file.url}, ${style.width ?? null}, ${style.height ?? null}, ${style.crop ?? false}, ${style.quality ?? null}, ${style.media ?? null}, ${mimeType})
-				ON CONFLICT (media_file_id, name, COALESCE(width, 0), COALESCE(height, 0), COALESCE(quality, 0))
+				INSERT INTO image_styles (id, media_file_id, name, url, width, height, crop, quality, media, mime_type, aspect_ratio)
+				VALUES (gen_random_uuid(), ${mediaFileId}, ${style.name}, ${file.url}, ${style.width ?? null}, ${style.height ?? null}, ${style.crop ?? false}, ${style.quality ?? null}, ${style.media ?? null}, ${mimeType}, ${style.aspectRatio ?? null})
+				ON CONFLICT (media_file_id, name, COALESCE(width, 0), COALESCE(height, 0), COALESCE(quality, 0), COALESCE(aspect_ratio, 0))
 				DO UPDATE SET url = EXCLUDED.url, mime_type = EXCLUDED.mime_type
 				RETURNING url, mime_type, media
 			`);

package/dist/db-postgres/schema/imageStyle.d.ts

@@ -172,6 +172,23 @@ export declare const imageStylesTable: import("drizzle-orm/pg-core/table", { wit
             identity: undefined;
             generated: undefined;
         }, {}, {}>;
+        aspectRatio: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "aspect_ratio";
+            tableName: "image_styles";
+            dataType: "number";
+            columnType: "PgReal";
+            data: number;
+            driverParam: string | number;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
     };
     dialect: "pg";
 }>;

package/dist/db-postgres/schema/imageStyle.js

@@ -1,4 +1,4 @@
-import { boolean, integer, pgTable, text, uuid } from 'drizzle-orm/pg-core';
+import { boolean, integer, pgTable, real, text, uuid } from 'drizzle-orm/pg-core';
 export const imageStylesTable = pgTable('image_styles', {
     id: uuid('id').primaryKey().defaultRandom(),
     mediaFileId: uuid('media_file_id').notNull(),
@@ -9,7 +9,8 @@ export const imageStylesTable = pgTable('image_styles', {
     crop: boolean('crop').notNull().default(false),
     quality: integer('quality'),
     media: text('media'),
-    mimeType: text('mime_type').notNull()
+    mimeType: text('mime_type').notNull(),
+    aspectRatio: real('aspect_ratio')
 });
 // NOTE: unique index on (media_file_id, name, COALESCE(width,0), COALESCE(height,0), COALESCE(quality,0))
 // is managed via SQL migration in src/lib/updates/0.5.8/index.ts (expression-based, not supported by Drizzle ORM)

package/dist/demo/seed.js

@@ -1,5 +1,4 @@
 import { getCMS } from '../core/cms.js';
-import { v4 as uuid } from 'uuid';
 const blogPosts = [
     {
         title: 'Getting Started with Includio CMS',

package/dist/sveltekit/components/cms-provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setPreferMp4 } from './video-context.js';
+
+	interface Props {
+		data: { cmsContext?: { preferMp4?: boolean } };
+		children?: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	if (data?.cmsContext?.preferMp4) setPreferMp4(true);
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/sveltekit/components/cms-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    data: {
+        cmsContext?: {
+            preferMp4?: boolean;
+        };
+    };
+    children?: Snippet;
+}
+declare const CmsProvider: import("svelte").Component<Props, {}, "">;
+type CmsProvider = ReturnType<typeof CmsProvider>;
+export default CmsProvider;

package/dist/sveltekit/components/structured-content.svelte

@@ -171,6 +171,7 @@
 			{@render videoSnippet(node.attrs ?? {})}
 		{:else}
 			{@const attrs = node.attrs ?? {}}
+			<!-- svelte-ignore a11y_media_has_caption -->
 			<video
 				controls
 				poster={attrs.poster as string ?? undefined}

package/dist/sveltekit/components/video-context.d.ts

@@ -0,0 +1,2 @@
+export declare function setPreferMp4(value: boolean): void;
+export declare function getPreferMp4(): boolean;

package/dist/sveltekit/components/video-context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('video-prefer-mp4');
+export function setPreferMp4(value) {
+    setContext(KEY, value);
+}
+export function getPreferMp4() {
+    return !!getContext(KEY);
+}

package/dist/sveltekit/components/video.svelte

@@ -2,6 +2,7 @@
 	import type { VideoFieldData } from '../../types/fields.js';
 	import type { HTMLVideoAttributes } from 'svelte/elements';
 	import { isHybridEnabled } from './hybrid-context.js';
+	import { getPreferMp4 } from './video-context.js';
 
 	type Props = HTMLVideoAttributes & {
 		data: VideoFieldData;
@@ -16,15 +17,22 @@
 	}: Props = $props();
 
 	const hybrid = isHybridEnabled();
+	const preferMp4 = getPreferMp4();
 
-	// Collect transcoded sources sorted: webm first (better compression), mp4 second
+	// Collect transcoded sources sorted by preferred format
 	const sortedSources = $derived.by(() => {
 		if (!data?.styles) return [];
 		const done = Object.values(data.styles).filter((s) => s.status === 'done' && s.url);
-		// webm first, then mp4
 		return done.sort((a, b) => {
-			if (a.mimeType === 'video/webm' && b.mimeType !== 'video/webm') return -1;
-			if (a.mimeType !== 'video/webm' && b.mimeType === 'video/webm') return 1;
+			if (preferMp4) {
+				// mp4 first (hardware-accelerated on Safari)
+				if (a.mimeType === 'video/mp4' && b.mimeType !== 'video/mp4') return -1;
+				if (a.mimeType !== 'video/mp4' && b.mimeType === 'video/mp4') return 1;
+			} else {
+				// webm first (better compression for supporting browsers)
+				if (a.mimeType === 'video/webm' && b.mimeType !== 'video/webm') return -1;
+				if (a.mimeType !== 'video/webm' && b.mimeType === 'video/webm') return 1;
+			}
 			return 0;
 		});
 	});

package/dist/sveltekit/index.d.ts

@@ -5,9 +5,11 @@ export { default as Preview } from './components/preview.svelte';
 export { default as HybridTarget } from './components/hybrid-target.svelte';
 export { default as Image } from './components/image.svelte';
 export { default as Video } from './components/video.svelte';
+export { default as CmsProvider } from './components/cms-provider.svelte';
 export { default as Media } from './components/media.svelte';
 export { default as StructuredContent } from './components/structured-content.svelte';
 export { enableHybridEditing } from './components/hybrid-context.js';
+export { setPreferMp4 } from './components/video-context.js';
 export { getLink, isImageFieldData, isVideoFieldData } from './utils/index.js';
 export { structuredToHtml } from '../core/fields/structuredToHtml.js';
 export { extractBlocks, extractInlineBlocks, extractText, extractMediaRefs } from '../core/server/fields/queryStructuredContent.js';

package/dist/sveltekit/index.js

@@ -5,9 +5,11 @@ export { default as Preview } from './components/preview.svelte';
 export { default as HybridTarget } from './components/hybrid-target.svelte';
 export { default as Image } from './components/image.svelte';
 export { default as Video } from './components/video.svelte';
+export { default as CmsProvider } from './components/cms-provider.svelte';
 export { default as Media } from './components/media.svelte';
 export { default as StructuredContent } from './components/structured-content.svelte';
 export { enableHybridEditing } from './components/hybrid-context.js';
+export { setPreferMp4 } from './components/video-context.js';
 export { getLink, isImageFieldData, isVideoFieldData } from './utils/index.js';
 export { structuredToHtml } from '../core/fields/structuredToHtml.js';
 export { extractBlocks, extractInlineBlocks, extractText, extractMediaRefs } from '../core/server/fields/queryStructuredContent.js';