fika-editor 3.2.9 → 3.3.0

package/dist/layout/types/slides.js

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

package/dist/layout/utils/resizeDeck.js

@@ -0,0 +1,257 @@
+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) {
+        // Guides describe page coordinates; resize them proportionally along their own axis.
+        if (slide.guides)
+            slide.guides = slide.guides.map(guide => ({ ...guide,
+                position: guide.position * (guide.axis === 'x' ? to.width / from.width : to.height / from.height),
+            }));
+        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/components/Button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, MouseEvent } from 'react';
 export type IButtonProps = {
     checked?: boolean;
     disabled?: boolean;
@@ -6,7 +6,7 @@ export type IButtonProps = {
     size?: 'small' | 'normal';
     first?: boolean;
     last?: boolean;
-    onClick?: () => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: ReactNode;
     style?: React.CSSProperties;
     className?: string;

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/agentic/canvasContext.d.ts

@@ -0,0 +1,4 @@
+import type { Slide } from '../../types/slides';
+import type { FikaCanvasContext, FikaCanvasReadOptions } from './types';
+/** Bounded summaries never contain image data, SVG paths, or full rich-text HTML. */
+export declare function summarizeCanvas(slides: Slide[], activePageId: string | undefined, selectedIds: string[], width: number, ratio: number, options?: FikaCanvasReadOptions): FikaCanvasContext;

package/dist/types/embed/agentic/canvasOperations.d.ts

@@ -0,0 +1,3 @@
+import type { FikaAgentCommand, FikaCanvasOperation } from './types';
+/** Expand concise canvas operations into the existing validated native handlers. */
+export declare function canvasOperationCommand(operation: FikaCanvasOperation): FikaAgentCommand;

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

@@ -1205,7 +1205,123 @@ export interface FikaAgentApi {
     import: FikaAgentImportApi;
     export: FikaAgentExportApi;
 }
+export type FikaCanvasOperation = {
+    op: 'title';
+    title: string;
+} | {
+    op: 'viewport';
+    width: number;
+    height: number;
+} | {
+    op: 'page';
+    id?: string;
+    name?: string;
+    x?: number;
+    y?: number;
+    background?: string;
+} | {
+    op: 'pageUpdate';
+    id: string;
+    patch: Partial<Slide>;
+} | {
+    op: 'text';
+    pageId?: string;
+    id?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    text: string;
+    fontSize?: number;
+    fontName?: string;
+    color?: string;
+    bold?: boolean;
+    align?: 'left' | 'center' | 'right' | 'justify';
+} | {
+    op: 'textUpdate';
+    pageId?: string;
+    id: string;
+    text: string;
+    style?: TextRunStyle;
+} | {
+    op: 'shape';
+    pageId?: string;
+    id?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    shape: 'rect' | 'ellipse';
+    fill?: string;
+} | {
+    op: 'element';
+    pageId?: string;
+    element: Partial<PPTElement> & {
+        type: PPTElement['type'];
+    };
+} | {
+    op: 'update';
+    pageId?: string;
+    id: string;
+    patch: Partial<PPTElement>;
+} | {
+    op: 'remove';
+    pageId?: string;
+    id: string;
+};
+export interface FikaCanvasApplyResult {
+    results: Array<{
+        op: FikaCanvasOperation['op'];
+        id?: string;
+        pageId?: string;
+    }>;
+}
+export interface FikaCanvasReadOptions {
+    pageId?: string;
+    offset?: number;
+    limit?: number;
+    textLimit?: number;
+}
+export interface FikaCanvasContext {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    activePageId?: string;
+    selectedIds: string[];
+    pageCount: number;
+    pages: Array<{
+        id: string;
+        name?: string;
+        x: number;
+        y: number;
+        elementCount: number;
+    }>;
+    pageId?: string;
+    elementCount: number;
+    offset: number;
+    nextOffset?: number;
+    elements: Array<{
+        id: string;
+        type: string;
+        name?: string;
+        x: number;
+        y: number;
+        width: number;
+        height?: number;
+        parentFrameId?: string;
+        groupId?: string;
+        frame?: {
+            clipContent: boolean;
+        };
+        text?: string;
+    }>;
+}
 export interface FikaCommandPayloadMap {
+    'canvas.get': FikaCanvasReadOptions | undefined;
+    'canvas.apply': {
+        operations: FikaCanvasOperation[];
+    };
     'deck.get': undefined;
     'deck.set': FikaDeckInput | FikaDocument;
     'deck.patch': FikaDeckPatch | Partial<FikaDocument>;
@@ -1902,6 +2018,8 @@ export interface FikaCommandPayloadMap {
     'view.exitPresentation': undefined;
 }
 export interface FikaCommandResultDataMap {
+    'canvas.get': FikaCanvasContext;
+    'canvas.apply': FikaCanvasApplyResult;
     'deck.get': FikaDeckDocument;
     'deck.set': FikaDeckDocument;
     'deck.patch': FikaDeckDocument;

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

@@ -12,3 +12,6 @@ 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';
+/** Myna design-mode capabilities and editable starter document. */
+export { createMynaDocument, MYNA_FORMATS } from '../views/Myna/catalog';

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

@@ -21,6 +21,10 @@ export interface FikaRenderSlideOptions {
     format?: 'image/png' | 'image/jpeg' | 'image/webp';
     /** Encoder quality for lossy formats (0–1). Default 0.9. */
     quality?: number;
+    /** Omit the page background for PNG/WebP without changing element colors. */
+    transparentBackground?: boolean;
+    /** Load original image pixels, using the host media resolver if needed. Fail if an image cannot load. */
+    fullResolutionImages?: boolean;
 }
 export interface FikaDeckAtlasOptions extends Omit<FikaRenderSlideOptions, 'width'> {
     /** Width of one slide tile in CSS px. Default 640. */

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

@@ -61,8 +61,8 @@ export interface FikaHeaderMenuItem {
     /** Fired when the entry is clicked (the dropdown closes first). */
     onSelect?: (id: string) => void;
 }
-/** `editor` is the default full editor; `presentation` boots straight into the fullscreen slideshow with no editor chrome. */
-export type FikaViewMode = 'editor' | 'presentation';
+/** `editor`: presentation editor; `presentation`: viewer; `canva` (alias `myna`): Myna design workspace. */
+export type FikaViewMode = 'editor' | 'presentation' | 'canva' | 'myna';
 export interface FikaMountOptions {
     /** Replacement design catalog in display order. Omit for Fika defaults; [] hides presets. Does not restyle the loaded document. */
     designThemes?: readonly FikaDesignTheme[];
@@ -135,6 +135,7 @@ export interface FikaMountOptions {
      */
     openPanelOnTextSelection?: boolean;
     /**
+     * `canva` (or `myna`) mounts the Myna graphic design workspace.
      * `presentation` mounts a presentation-only viewer: once the deck resolves,
      * the fullscreen slideshow starts immediately and the editor never renders.
      * Exiting the slideshow re-enters it, so the page stays a pure viewer.

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

@@ -0,0 +1,2 @@
+/** Creation policy only; existing and imported text retains its authored sizing. */
+export declare const FixedTextCreationContext: import("react").Context<boolean>;

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

@@ -0,0 +1,6 @@
+/** Coalesce transient pointer input, with an explicit flush at the transaction boundary. */
+export declare function useAnimationFrameCallback<T>(callback: (value: T) => void): {
+    schedule: (value: T) => void;
+    flush: () => void;
+    cancel: () => void;
+};

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

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

package/dist/types/i18n/cs/myna/index.d.ts

@@ -0,0 +1,3 @@
+import type { NamespaceMynaTranslation } from '../../i18n-types';
+declare const myna: NamespaceMynaTranslation;
+export default myna;

package/dist/types/i18n/en/myna/index.d.ts

@@ -0,0 +1,3 @@
+import type { BaseTranslation } from '../../i18n-types';
+declare const myna: BaseTranslation;
+export default myna;

package/dist/types/i18n/i18n-react.d.ts

@@ -1,6 +1,7 @@
 import type { Locales, TranslationFunctions } from './i18n-types';
 declare const TypesafeI18n: import("react").FunctionComponent<import("typesafe-i18n/react").TypesafeI18nProps<Locales>>, I18nContext: import("react").Context<import("typesafe-i18n/react").I18nContextType<Locales, {
     screen: import("./i18n-types").NamespaceScreenTranslation;
+    myna: import("./i18n-types").NamespaceMynaTranslation;
     export: import("./i18n-types").NamespaceExportTranslation;
     editor: import("./i18n-types").NamespaceEditorTranslation;
     mobile: import("./i18n-types").NamespaceMobileTranslation;
@@ -12,6 +13,7 @@ declare const TypesafeI18n: import("react").FunctionComponent<import("typesafe-i
 export { TypesafeI18n, I18nContext };
 export declare function useI18nContext(): import("typesafe-i18n/react").I18nContextType<Locales, {
     screen: import("./i18n-types").NamespaceScreenTranslation;
+    myna: import("./i18n-types").NamespaceMynaTranslation;
     export: import("./i18n-types").NamespaceExportTranslation;
     editor: import("./i18n-types").NamespaceEditorTranslation;
     mobile: import("./i18n-types").NamespaceMobileTranslation;