includio-cms 0.14.1 → 0.14.2

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.14.2 — 2026-03-27
+
+Image styles: aspectRatio support, lazy generation, skip defaults when custom styles defined
+
+### Added
+- aspectRatio option for image styles — crop to ratio without fixed dimensions
+- Lazy generation of custom field styles on first read
+- Skip default styles when field defines custom styles (prevents <source> conflicts in <picture>)
+
+### Migration
+
+```sql
+ALTER TABLE image_styles ADD COLUMN IF NOT EXISTS aspect_ratio REAL;
+
+-- Drop old unique index and recreate with aspect_ratio
+DROP INDEX IF EXISTS image_styles_unique_key;
+CREATE UNIQUE INDEX image_styles_unique_key
+ON image_styles (media_file_id, name, COALESCE(width, 0), COALESCE(height, 0), COALESCE(quality, 0), COALESCE(aspect_ratio, 0));
+```
+
 ## 0.14.1 — 2026-03-27
 
 CMS context provider, Svelte 5 compat, docs overhaul

package/DOCS.md

@@ -1,4 +1,4 @@
-# Includio CMS Documentation (v0.14.1)
+# Includio CMS Documentation (v0.14.2)
 
 > This file is auto-generated from the docs site. For the latest version, update the package.
 

package/ROADMAP.md

@@ -263,6 +263,12 @@
 - [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/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/types/fields.d.ts

@@ -68,6 +68,7 @@ export interface ImageFieldStyle {
     format?: keyof FormatEnum;
     media?: string;
     crop?: boolean;
+    aspectRatio?: number;
     quality?: number;
     srcset?: number[];
     sizes?: string;

package/dist/updates/0.14.2/index.d.ts

@@ -0,0 +1,2 @@
+import type { CmsUpdate } from '../index.js';
+export declare const update: CmsUpdate;

package/dist/updates/0.14.2/index.js

@@ -0,0 +1,18 @@
+export const update = {
+    version: '0.14.2',
+    date: '2026-03-27',
+    description: 'Image styles: aspectRatio support, lazy generation, skip defaults when custom styles defined',
+    features: [
+        'aspectRatio option for image styles — crop to ratio without fixed dimensions',
+        'Lazy generation of custom field styles on first read',
+        'Skip default styles when field defines custom styles (prevents <source> conflicts in <picture>)'
+    ],
+    fixes: [],
+    breakingChanges: [],
+    sql: `ALTER TABLE image_styles ADD COLUMN IF NOT EXISTS aspect_ratio REAL;
+
+-- Drop old unique index and recreate with aspect_ratio
+DROP INDEX IF EXISTS image_styles_unique_key;
+CREATE UNIQUE INDEX image_styles_unique_key
+ON image_styles (media_file_id, name, COALESCE(width, 0), COALESCE(height, 0), COALESCE(quality, 0), COALESCE(aspect_ratio, 0));`
+};

package/dist/updates/index.js

@@ -39,7 +39,8 @@ import { update as update0133 } from './0.13.3/index.js';
 import { update as update0134 } from './0.13.4/index.js';
 import { update as update0140 } from './0.14.0/index.js';
 import { update as update0141 } from './0.14.1/index.js';
-export const updates = [update0065, update0066, update0067, update0068, update0069, update010, update011, update012, update013, update014, update015, update020, update022, update050, update051, update052, update053, update054, update055, update056, update057, update058, update060, update061, update062, update070, update071, update072, update073, update080, update090, update0100, update0110, update0120, update0130, update0131, update0132, update0133, update0134, update0140, update0141];
+import { update as update0142 } from './0.14.2/index.js';
+export const updates = [update0065, update0066, update0067, update0068, update0069, update010, update011, update012, update013, update014, update015, update020, update022, update050, update051, update052, update053, update054, update055, update056, update057, update058, update060, update061, update062, update070, update071, update072, update073, update080, update090, update0100, update0110, update0120, update0130, update0131, update0132, update0133, update0134, update0140, update0141, update0142];
 export const getUpdatesFrom = (fromVersion) => {
     const fromParts = fromVersion.split('.').map(Number);
     return updates.filter((update) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.14.1",
+	"version": "0.14.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",