fika-editor 3.2.9 → 3.2.10

package/dist/layout/types/slides.js

@@ -0,0 +1 @@
+export {};

package/dist/layout/utils/resizeDeck.js

@@ -0,0 +1,252 @@
+function bounds(el) {
+    if (el.type === 'line') {
+        const points = [el.start, el.end, el.broken, el.broken2, el.curve, ...(el.cubic ?? [])].filter((p) => !!p);
+        return { left: el.left + Math.min(...points.map(p => p[0])), right: el.left + Math.max(...points.map(p => p[0])), top: el.top + Math.min(...points.map(p => p[1])), bottom: el.top + Math.max(...points.map(p => p[1])) };
+    }
+    const angle = (el.rotate ?? 0) * Math.PI / 180;
+    const w = Math.abs(el.width * Math.cos(angle)) + Math.abs(el.height * Math.sin(angle));
+    const h = Math.abs(el.width * Math.sin(angle)) + Math.abs(el.height * Math.cos(angle));
+    return { left: el.left + (el.width - w) / 2, right: el.left + (el.width + w) / 2, top: el.top + (el.height - h) / 2, bottom: el.top + (el.height + h) / 2 };
+}
+function union(a, b) {
+    return { left: Math.min(a.left, b.left), right: Math.max(a.right, b.right), top: Math.min(a.top, b.top), bottom: Math.max(a.bottom, b.bottom) };
+}
+function isBackdrop(el, canvas) {
+    return el.type === 'shape' && !el.text && !el.rotate && !el.fixedRatio && el.left <= 1 && el.top <= 1 && el.width >= canvas.width - 2 && el.height >= canvas.height - 2;
+}
+function isDecor(el, canvas) {
+    return el.type === 'shape' && !el.text && !el.groupId && (el.name === 'Decor' || el.left < -1 || el.top < -1 || el.left + el.width > canvas.width + 1 || el.top + el.height > canvas.height + 1);
+}
+function edgeBand(el, canvas) {
+    if (el.type !== 'shape' || el.text || el.groupId || el.rotate || el.fixedRatio)
+        return;
+    if (Math.abs(el.top) <= 1 && Math.abs(el.height - canvas.height) <= 2 && el.width < canvas.width * 0.3
+        && (Math.abs(el.left) <= 1 || Math.abs(el.left + el.width - canvas.width) <= 1))
+        return 'vertical';
+    if (Math.abs(el.left) <= 1 && Math.abs(el.width - canvas.width) <= 2 && el.height < canvas.height * 0.2
+        && (Math.abs(el.top) <= 1 || Math.abs(el.top + el.height - canvas.height) <= 1))
+        return 'horizontal';
+}
+/** Piecewise affine map: occupied tracks retain their scale; only empty gutters expand.
+ * Group bounds occupy a single track, so labels never detach from their diagram.
+ */
+function axisTracks(intervals, source) {
+    const merged = [];
+    for (const [start, end] of intervals.sort((a, b) => a[0] - b[0])) {
+        const lo = Math.max(0, start), hi = Math.min(source, end);
+        if (hi <= lo)
+            continue;
+        const last = merged.at(-1);
+        if (last && lo <= last[1] + 1)
+            last[1] = Math.max(last[1], hi);
+        else
+            merged.push([lo, hi]);
+    }
+    const gaps = [];
+    let cursor = 0;
+    for (const [lo, hi] of merged) {
+        if (lo > cursor)
+            gaps.push([cursor, lo]);
+        cursor = hi;
+    }
+    if (cursor < source)
+        gaps.push([cursor, source]);
+    const free = gaps.reduce((sum, [lo, hi]) => sum + hi - lo, 0);
+    return { gaps, free };
+}
+function axisMap(intervals, source, target, scale) {
+    const { gaps, free } = axisTracks(intervals, source);
+    const extra = target - source * scale;
+    return (position) => position * scale + (free > 0
+        ? extra * gaps.reduce((sum, [lo, hi]) => sum + Math.max(0, Math.min(position, hi) - lo), 0) / free
+        : extra / 2);
+}
+/** Recognize a full-width heading above independent body columns. Each column
+ * gets its own vertical tracks; a long item in the left column cannot prevent
+ * the right column from distributing its rows through the available height.
+ */
+function bodyColumns(boxes, from) {
+    if (boxes.length < 3)
+        return;
+    const top = Math.min(...boxes.map(b => b.top));
+    const headers = boxes.filter(b => Math.abs(b.top - top) < 1 && b.right - b.left >= from.width * 0.55 && b.bottom <= from.height * 0.26);
+    if (!headers.length)
+        return;
+    const headerBottom = Math.max(...headers.map(b => b.bottom));
+    const body = boxes.filter(b => !headers.includes(b));
+    if (body.some(b => b.top < headerBottom))
+        return;
+    const bodyTop = Math.min(...body.map(b => b.top));
+    const ranges = [];
+    for (const box of [...body].sort((a, b) => a.left - b.left)) {
+        const last = ranges.at(-1);
+        if (last && box.left <= last.right + from.width * 0.025) {
+            last.right = Math.max(last.right, box.right);
+            last.boxes.push(box);
+        }
+        else
+            ranges.push({ left: box.left, right: box.right, boxes: [box] });
+    }
+    if (ranges.length > 4)
+        return;
+    const margin = Math.min(from.height * 0.06, Math.max(top, from.height * 0.03));
+    const columns = ranges.map(range => {
+        const height = Math.max(...range.boxes.map(b => b.bottom)) - bodyTop;
+        const intervals = range.boxes.map(b => [b.top - bodyTop, b.bottom - bodyTop]);
+        const { free } = axisTracks(intervals, height);
+        return { ...range, height, intervals, minHeight: height - free + Math.min(free, height * 0.08) };
+    });
+    return { bodyTop, margin, columns, minHeight: bodyTop + margin + Math.max(...columns.map(c => c.minHeight)) };
+}
+function scalePixels(html, scale) {
+    // CSS lengths only: do not rewrite lesson text containing quantities in px.
+    return html.replace(/style=(['"])(.*?)\1/gi, (_, quote, css) => `style=${quote}${css.replace(/(-?\d+(?:\.\d+)?)px\b/g, (_m, n) => `${Number((Number(n) * scale).toFixed(4))}px`)}${quote}`);
+}
+function scaleNumber(record, key, scale) {
+    const obj = record;
+    if (typeof obj[key] === 'number')
+        obj[key] = obj[key] * scale;
+}
+function scaleTypography(el, scale) {
+    if (scale === 1)
+        return;
+    const text = el.type === 'text' ? el : el.type === 'shape' ? el.text : undefined;
+    if (text) {
+        text.content = scalePixels(text.content, scale);
+        text.inset = (text.inset ?? [10, 10, 10, 10]).map(v => v * scale);
+        text.paragraphSpace = (text.paragraphSpace ?? 5);
+        for (const key of ['wordSpace', 'paragraphSpace', 'placeholderFontSize', 'placeholderLayoutHeight'])
+            scaleNumber(text, key, scale);
+        if (el.type === 'text' && el.structuredText) {
+            // HTML is the source of truth; discard the stale import cache.
+            delete el.structuredText;
+        }
+    }
+    if (el.type === 'table') {
+        el.cellMinHeight *= scale;
+        for (const row of el.data)
+            for (const cell of row) {
+                cell.text = scalePixels(cell.text, scale);
+                if (cell.style?.fontsize)
+                    cell.style.fontsize = cell.style.fontsize.replace(/^(\d+(?:\.\d+)?)(px|pt)$/i, (_, value, unit) => `${Number(value) * scale}${unit}`);
+            }
+    }
+    if (el.type === 'chart')
+        el.options = { ...el.options, fontSize: (el.options?.fontSize ?? 12) * scale };
+    if (el.type === 'code')
+        el.fontSize *= scale;
+    if (el.type === 'latex')
+        el.strokeWidth *= scale;
+    if ('outline' in el && el.outline)
+        scaleNumber(el.outline, 'width', scale);
+    if ('shadow' in el && el.shadow)
+        for (const key of ['h', 'v', 'blur'])
+            scaleNumber(el.shadow, key, scale);
+}
+/** Resize a deck without distorting media or changing reading order.
+ * Uniformly scale content and typography, redistribute available space through
+ * empty tracks, and keep decorative edge shapes attached to their canvas edge.
+ * Overlaps, rotations, z-order and grouped compositions remain intact.
+ */
+export function resizeDeckSlides(slides, from, to) {
+    for (const n of [from.width, from.height, to.width, to.height]) {
+        if (!Number.isFinite(n) || n <= 0)
+            throw new Error('Canvas dimensions must be finite and positive.');
+    }
+    const result = structuredClone(slides);
+    if (from.width === to.width && from.height === to.height)
+        return result;
+    for (const slide of result) {
+        const groups = new Map();
+        for (const el of slide.elements) {
+            if ((el.type === 'line' && !el.groupId) || isBackdrop(el, from) || isDecor(el, from) || edgeBand(el, from))
+                continue;
+            const key = el.groupId ?? el.id, box = bounds(el);
+            groups.set(key, groups.has(key) ? union(groups.get(key), box) : box);
+        }
+        const boxes = [...groups.values()];
+        const vertical = boxes.map(b => [b.top, b.bottom]);
+        const { free } = axisTracks(vertical, from.height);
+        // Width sets the preferred type size. Consume spare vertical gutters before
+        // shrinking text; reversing a ratio change should not progressively shrink it.
+        const minHeight = from.height - free + Math.min(free, from.height * 0.08);
+        const body = bodyColumns(boxes, from);
+        const scale = Math.min(to.width / from.width, to.height / Math.max(1, body?.minHeight ?? minHeight));
+        const x = axisMap(boxes.map(b => [b.left, b.right]), from.width, to.width, scale);
+        const y = axisMap(boxes.map(b => [b.top, b.bottom]), from.height, to.height, scale);
+        const columnMaps = body?.columns.map(column => ({ ...column,
+            map: axisMap(column.intervals, column.height, Math.max(1, to.height - (body.bodyTop + body.margin) * scale), scale),
+        }));
+        const mapY = (px, py) => {
+            if (!body || !columnMaps)
+                return y(py);
+            if (py < body.bodyTop - 1)
+                return py * scale;
+            const column = columnMaps.find(c => px >= c.left - 1 && px <= c.right + 1);
+            return column ? body.bodyTop * scale + column.map(py - body.bodyTop) : y(py);
+        };
+        for (const el of slide.elements) {
+            if (el.type === 'shape' && isBackdrop(el, from)) {
+                el.left = 0;
+                el.top = 0;
+                el.width = to.width;
+                el.height = to.height;
+                continue;
+            }
+            const band = edgeBand(el, from);
+            if (el.type === 'shape' && band) {
+                if (band === 'vertical') {
+                    el.width *= scale;
+                    el.height = to.height;
+                    el.top = 0;
+                    el.left = el.left < from.width / 2 ? 0 : to.width - el.width;
+                }
+                else {
+                    el.height *= scale;
+                    el.width = to.width;
+                    el.left = 0;
+                    el.top = el.top < from.height / 2 ? 0 : to.height - el.height;
+                }
+                scaleTypography(el, scale);
+                continue;
+            }
+            const left = el.left, top = el.top;
+            if (el.type === 'line') {
+                // Remap connector geometry with the same tracks as its attached objects.
+                const group = el.groupId ? groups.get(el.groupId) : undefined;
+                const lineX = group ? (v) => x(group.left) + (v - group.left) * scale : x;
+                const lineY = group ? (_px, v) => mapY(group.left, group.top) + (v - group.top) * scale : mapY;
+                el.left = lineX(left);
+                el.top = lineY(left, top);
+                el.width *= scale;
+                const point = (p) => [lineX(left + p[0]) - el.left, lineY(left + p[0], top + p[1]) - el.top];
+                el.start = point(el.start);
+                el.end = point(el.end);
+                if (el.broken)
+                    el.broken = point(el.broken);
+                if (el.broken2)
+                    el.broken2 = point(el.broken2);
+                if (el.curve)
+                    el.curve = point(el.curve);
+                if (el.cubic)
+                    el.cubic = [point(el.cubic[0]), point(el.cubic[1])];
+            }
+            else if (isDecor(el, from)) {
+                const cx = left + el.width / 2, cy = top + el.height / 2;
+                el.left = cx > from.width / 2 ? to.width - (from.width - left) * scale : left * scale;
+                el.top = cy > from.height / 2 ? to.height - (from.height - top) * scale : top * scale;
+                el.width *= scale;
+                el.height *= scale;
+            }
+            else {
+                const box = groups.get(el.groupId ?? el.id);
+                el.left = x(box.left) + (left - box.left) * scale;
+                el.top = mapY(box.left, box.top) + (top - box.top) * scale;
+                el.width *= scale;
+                el.height *= scale;
+            }
+            scaleTypography(el, scale);
+        }
+    }
+    return result;
+}

package/dist/types/configs/theme.d.ts

@@ -7,6 +7,8 @@ export interface PresetTheme {
     background: string;
     fontColor: string;
     featureFontColor?: string;
+    /** Retain pale panels and accent roles when restyling host-authored decks. */
+    preserveColorRoles?: boolean;
     fontname: string;
     colors: string[];
     /** Series palette when `colors` includes near-background swatches (Ink #171717). */

package/dist/types/embed/index.d.ts

@@ -12,3 +12,4 @@ export type { Locales as FikaLocales } from '../i18n/locale';
 export type { ChartData, ChartOptions, ChartType, Note, NoteReply, PPTAnimation, PPTAudioElement, PPTChartElement, PPTElement, PPTElementLink, PPTImageElement, PPTLatexElement, PPTLineElement, PPTShapeElement, PPTTableElement, PPTTextElement, PPTVideoElement, ShapeText, Slide, SlideBackground, SlideTemplate, SlideTheme, TableCell, TableCellStyle, TextAlign, TurningMode, } from '../types/slides';
 export type { FikaDesignTheme } from '../configs/designThemes';
 export { getFikaDefaultDesignThemes } from '../configs/designThemes';
+export { resizeDeckSlides, type SlideCanvas } from '../utils/resizeDeck';

package/dist/types/hooks/useResizeDeck.d.ts

@@ -0,0 +1 @@
+export default function useResizeDeck(): (width: number, height: number) => void;

package/dist/types/utils/applyDesignTheme.d.ts

@@ -1,6 +1,6 @@
 import type { Slide, SlideTheme } from '../types/slides';
 import { type PresetTheme } from '../configs/theme';
-export declare const setSlideTheme: (slide: Slide, theme: PresetTheme, index?: number) => void;
+export declare const setSlideTheme: (slide: Slide, theme: PresetTheme, index?: number, sourceAccents?: readonly string[]) => void;
 /** Shared by the design picker and agent command, with no store/history effects. */
 export declare function applyDesignTheme(slides: readonly Slide[], currentTheme: SlideTheme, preset: PresetTheme): {
     slides: Slide[];

package/dist/types/utils/designColorRoles.d.ts

@@ -0,0 +1,10 @@
+import type { PresetTheme } from '../configs/theme';
+import type { PPTElement, Slide } from '../types/slides';
+/** Keep neutral surfaces, pale panels and saturated accents in distinct roles. */
+export declare function designColorRoles(theme: PresetTheme, sourceAccents: readonly string[]): {
+    fill: (color: string) => string;
+    ink: (surface: string, original?: string) => string;
+};
+/** Find the painted panel below a text object; preserve white lettering on badges. */
+export declare function textSurface(slide: Slide, el: PPTElement, fallback: string): string;
+export declare function retintInlineText(html: string, surface: string, ink: (surface: string, original?: string) => string): string;

package/dist/types/utils/resizeDeck.d.ts

@@ -0,0 +1,11 @@
+import type { Slide } from '../types/slides';
+export interface SlideCanvas {
+    width: number;
+    height: number;
+}
+/** Resize a deck without distorting media or changing reading order.
+ * Uniformly scale content and typography, redistribute available space through
+ * empty tracks, and keep decorative edge shapes attached to their canvas edge.
+ * Overlaps, rotations, z-order and grouped compositions remain intact.
+ */
+export declare function resizeDeckSlides(slides: readonly Slide[], from: SlideCanvas, to: SlideCanvas): Slide[];

package/docs/EMBED.md

@@ -519,3 +519,26 @@ Application uses the picker implementation and creates one undo step for the
 whole deck. Unknown IDs fail without changing the presentation. Hosts should
 include the small catalog in agent context so applying a named theme needs only
 one call, without a preceding discovery request.
+
+### Content-aware canvas resizing
+
+`controller.deck.setViewport({ ratio: 0.75 })` fits the entire deck to 4:3 in
+one undo step, using the same operation as the size menu and custom size dialog.
+It identifies full-width headings and independent body columns, distributes
+rows through their available height, scales type with its boxes, preserves media
+proportions and groups, remaps connectors, and anchors vector edge decorations.
+It consumes spare vertical gutters before shrinking type when returning to a
+shorter canvas. It preserves the authored composition rather than inventing a
+new reading order or cropping photographs. Imported objects already outside the
+canvas may still need manual correction.
+
+Hosts authoring slides into a differently sized deck can use the pure,
+DOM-free `resizeDeckSlides(slides, from, to)` export from `fika-editor/layout`;
+`from` and `to` are `{ width, height }`. Raw document loading remains available
+through `deck.set` / `deck.patch` with `slides` and `viewport` supplied together.
+
+Host design themes can opt into `preserveColorRoles: true` to keep pale panels,
+neutral surfaces and saturated accents separate during theme application.
+Text is retinted against the actual panel beneath it, including badge and table
+cell fills. Named `Decor` shapes become soft accents on the selected background.
+Reapplying a selected theme is supported, including for older generated decks.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fika-editor",
-  "version": "3.2.9",
+  "version": "3.2.10",
   "description": "Fika presentation editor embed bundle with a typed agentic bridge.",
   "type": "module",
   "main": "dist/embed/fika-embed.js",
@@ -12,7 +12,8 @@
     "docs/EMBED.md",
     "docs/AGENTIC_BRIDGE.md",
     "docs/RELEASE.md",
-    "dist/text"
+    "dist/text",
+    "dist/layout"
   ],
   "exports": {
     ".": {
@@ -35,6 +36,11 @@
       "types": "./dist/text/index.d.ts",
       "import": "./dist/text/index.js",
       "default": "./dist/text/index.js"
+    },
+    "./layout": {
+      "types": "./dist/types/utils/resizeDeck.d.ts",
+      "import": "./dist/layout/utils/resizeDeck.js",
+      "default": "./dist/layout/utils/resizeDeck.js"
     }
   },
   "engines": {
@@ -55,7 +61,7 @@
     "dx:start": "1dxway start",
     "doctor": "react-doctor --no-telemetry",
     "build": "run-p type-check \"build-only {@}\" --",
-    "build:embed": "node scripts/run-i18n.mjs --no-watch && npm run build:text && npm run build:types && rsbuild build --config rsbuild.config.embed.ts && node scripts/rewrite-embed-base-uri.mjs && node scripts/merge-embed-css.mjs && node scripts/scope-embed-css.mjs && node scripts/extract-embed-fonts.mjs && node scripts/copy-embed-public.mjs && node scripts/generate-agentic-manifest.mjs",
+    "build:embed": "node scripts/run-i18n.mjs --no-watch && npm run build:text && npm run build:layout && npm run build:types && rsbuild build --config rsbuild.config.embed.ts && node scripts/rewrite-embed-base-uri.mjs && node scripts/merge-embed-css.mjs && node scripts/scope-embed-css.mjs && node scripts/extract-embed-fonts.mjs && node scripts/copy-embed-public.mjs && node scripts/generate-agentic-manifest.mjs",
     "agentic:manifest": "node scripts/generate-agentic-manifest.mjs",
     "build:types": "node -e \"require('node:fs').rmSync('dist/types',{recursive:true,force:true})\" && tsc -p tsconfig.types.json && node scripts/rewrite-embed-types.mjs",
     "prepack": "node scripts/verify-embed-pack.mjs",
@@ -69,7 +75,8 @@
     "test": "node scripts/test.mjs",
     "i18n": "node scripts/run-i18n.mjs",
     "i18n:build": "node scripts/run-i18n.mjs --no-watch",
-    "build:text": "tsc -p tsconfig.text.json"
+    "build:text": "tsc -p tsconfig.text.json",
+    "build:layout": "tsc -p tsconfig.layout.json"
   },
   "author": "Matěj \"lofcz\" Štágl",
   "license": "MIT",