@report-designer/designer 0.1.0

package/dist/components/Canvas.js

@@ -0,0 +1,2428 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { Button, Dropdown, Modal, Tooltip } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
+import { sanitizeRichHtml } from '@report-designer/core';
+import { useDesignerStore } from '../store/designer-store';
+import { normalizeTable, resolveCollapsedCellBorder, resolveTableCellStyle, resolveTableRowCellWidths } from '../table/table-structure';
+import { createDefaultComponent, createFieldExpressionComponent, createTextExpressionComponent } from '../component-factory';
+import { formatDataFieldExpression } from '../data-source-fields';
+import { RichTextInlineEditor } from './richtext/RichTextInlineEditor';
+import { useDesignerI18n } from '../i18n';
+import { BAND_COLORS, BAND_LABEL_KEYS } from '../band-metadata';
+import { renderCodeSymbolSvg } from '@report-designer/viewer';
+const MM_TO_PX = 3.78;
+const SNAP_THRESHOLD = 5;
+const HANDLE_SIZE = 8;
+const GRID_MM = 5; // 网格间距 5mm
+const BAND_HEADER_MM = 7;
+const RULER_SIZE = 24;
+const DRAG_THRESHOLD = 3; // px，超过此距离才算真正开始拖拽
+const RESIZE_HANDLES = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'];
+function mmToPx(mm) {
+    const numeric = Number(mm);
+    if (!Number.isFinite(numeric)) {
+        return 0;
+    }
+    return Math.round(numeric * MM_TO_PX);
+}
+function safeCssNumber(value) {
+    return Number.isFinite(value) ? value : 0;
+}
+function pxToMm(px, zoom = 1) { return Math.round(px / (MM_TO_PX * zoom) * 10) / 10; }
+function elementFromPointSafe(clientX, clientY) {
+    if (typeof document.elementFromPoint !== 'function')
+        return null;
+    return document.elementFromPoint(clientX, clientY);
+}
+function isEditableKeyboardTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tag = target.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    if (target.isContentEditable || target.closest('[contenteditable="true"]'))
+        return true;
+    if (target.closest('[role="textbox"]'))
+        return true;
+    return Boolean(target.closest('.ant-modal'));
+}
+function computeGuides(compId, xMm, yMm, wMm, hMm, others) {
+    const guides = [];
+    for (const o of others) {
+        if (o.id === compId)
+            continue;
+        const yChecks = [
+            { a: yMm, b: o.y }, { a: yMm + hMm, b: o.y + o.h },
+            { a: yMm + hMm / 2, b: o.y + o.h / 2 },
+            { a: yMm, b: o.y + o.h }, { a: yMm + hMm, b: o.y },
+        ];
+        for (const c of yChecks) {
+            if (Math.abs(mmToPx(c.a) - mmToPx(c.b)) <= SNAP_THRESHOLD) {
+                guides.push({ type: 'horizontal', position: mmToPx(c.a) });
+            }
+        }
+        const xChecks = [
+            { a: xMm, b: o.x }, { a: xMm + wMm, b: o.x + o.w },
+            { a: xMm + wMm / 2, b: o.x + o.w / 2 },
+            { a: xMm, b: o.x + o.w }, { a: xMm + wMm, b: o.x },
+        ];
+        for (const c of xChecks) {
+            if (Math.abs(mmToPx(c.a) - mmToPx(c.b)) <= SNAP_THRESHOLD) {
+                guides.push({ type: 'vertical', position: mmToPx(c.a) });
+            }
+        }
+    }
+    return guides;
+}
+function getCursorForHandle(handle) {
+    return { nw: 'nw-resize', n: 'n-resize', ne: 'ne-resize', w: 'w-resize', e: 'e-resize', sw: 'sw-resize', s: 's-resize', se: 'se-resize' }[handle];
+}
+function getHandlePos(handle, w, h) {
+    const half = HANDLE_SIZE / 2;
+    switch (handle) {
+        case 'nw': return { left: -half, top: -half };
+        case 'n': return { left: w / 2 - half, top: -half };
+        case 'ne': return { right: -half, top: -half };
+        case 'w': return { left: -half, top: h / 2 - half };
+        case 'e': return { right: -half, top: h / 2 - half };
+        case 'sw': return { left: -half, bottom: -half };
+        case 's': return { left: w / 2 - half, bottom: -half };
+        case 'se': return { right: -half, bottom: -half };
+    }
+}
+function findPanelDropTarget(band, xMm, yMm) {
+    const panels = band.components
+        .filter((component) => component.type === 'panel')
+        .slice()
+        .sort((a, b) => (b.zOrder ?? 0) - (a.zOrder ?? 0));
+    for (const panel of panels) {
+        const insideX = xMm >= panel.x && xMm <= panel.x + panel.width;
+        const insideY = yMm >= panel.y && yMm <= panel.y + panel.height;
+        if (!insideX || !insideY)
+            continue;
+        const padding = panel.padding ?? { top: 0, right: 0, bottom: 0, left: 0 };
+        const contentWidth = Math.max(0, panel.width - padding.left - padding.right);
+        const contentHeight = Math.max(0, panel.height - padding.top - padding.bottom);
+        return {
+            panelId: panel.id,
+            xMm: Math.max(0, Math.min(contentWidth, Math.round((xMm - panel.x - padding.left) * 10) / 10)),
+            yMm: Math.max(0, Math.min(contentHeight, Math.round((yMm - panel.y - padding.top) * 10) / 10)),
+        };
+    }
+    return null;
+}
+function hasDragPayload(event, type) {
+    const expected = type.toLowerCase();
+    return Array.from(event.dataTransfer.types ?? []).some(item => item.toLowerCase() === expected);
+}
+function getDragData(event, type) {
+    return event.dataTransfer.getData(type) || event.dataTransfer.getData(type.toLowerCase());
+}
+// ---- Canvas ----
+export const Canvas = ({ className }) => {
+    const { t } = useDesignerI18n();
+    const template = useDesignerStore(s => s.template);
+    const currentPageId = useDesignerStore(s => s.currentPageId);
+    const selectedComponentIds = useDesignerStore(s => s.selectedComponentIds);
+    const selectedBandId = useDesignerStore(s => s.selectedBandId);
+    const pendingBandInsertType = useDesignerStore(s => s.pendingBandInsertType);
+    const selectedTableCell = useDesignerStore(s => s.selectedTableCell);
+    const storeClipboard = useDesignerStore(s => s.clipboard);
+    const selectComponents = useDesignerStore(s => s.selectComponents);
+    const selectBand = useDesignerStore(s => s.selectBand);
+    const selectTableCell = useDesignerStore(s => s.selectTableCell);
+    const moveComponent = useDesignerStore(s => s.moveComponent);
+    const moveComponentSilent = useDesignerStore(s => s.moveComponentSilent);
+    const updateComponent = useDesignerStore(s => s.updateComponent);
+    const addComponent = useDesignerStore(s => s.addComponent);
+    const addComponentToPanel = useDesignerStore(s => s.addComponentToPanel);
+    const updateComponentSilent = useDesignerStore(s => s.updateComponentSilent);
+    const moveComponentToBand = useDesignerStore(s => s.moveComponentToBand);
+    const setSelectedTableCellWidth = useDesignerStore(s => s.setSelectedTableCellWidth);
+    const resizeBand = useDesignerStore(s => s.resizeBand);
+    const resizeBandSilent = useDesignerStore(s => s.resizeBandSilent);
+    const moveBand = useDesignerStore(s => s.moveBand);
+    const copySelected = useDesignerStore(s => s.copySelected);
+    const cutSelected = useDesignerStore(s => s.cutSelected);
+    const duplicateSelected = useDesignerStore(s => s.duplicateSelected);
+    const pasteClipboard = useDesignerStore(s => s.pasteClipboard);
+    const deleteSelected = useDesignerStore(s => s.deleteSelected);
+    const clearSelectedTableCell = useDesignerStore(s => s.clearSelectedTableCell);
+    const moveSelectedBy = useDesignerStore(s => s.moveSelectedBy);
+    const resizeSelectedBy = useDesignerStore(s => s.resizeSelectedBy);
+    const toggleSelectedFontStyle = useDesignerStore(s => s.toggleSelectedFontStyle);
+    const setTextAlign = useDesignerStore(s => s.setTextAlign);
+    const setDesignerMode = useDesignerStore(s => s.setMode);
+    const zoom = useDesignerStore(s => s.zoom);
+    const setZoom = useDesignerStore(s => s.setZoom);
+    const undo = useDesignerStore(s => s.undo);
+    const redo = useDesignerStore(s => s.redo);
+    const cancelBandInsert = useDesignerStore(s => s.cancelBandInsert);
+    const pageRef = useRef(null);
+    const modeRef = useRef({ type: 'idle' });
+    const [mode, setMode] = useState({ type: 'idle' });
+    const [selBox, setSelBox] = useState(null);
+    const [guides, setGuides] = useState([]);
+    const [contextMenu, setContextMenu] = useState(null);
+    const [bandContextMenu, setBandContextMenu] = useState(null);
+    const [bandInsertPointer, setBandInsertPointer] = useState(null);
+    const [bandReorderTarget, setBandReorderTarget] = useState(null);
+    const [bandDragPreview, setBandDragPreview] = useState(null);
+    const [componentMoveTargetBandId, setComponentMoveTargetBandId] = useState(null);
+    const currentPage = useMemo(() => template.pages.find(p => p.id === currentPageId), [template, currentPageId]);
+    const bands = useMemo(() => {
+        if (!currentPage)
+            return [];
+        let contentY = 0;
+        let visualY = 0;
+        return currentPage.bands.map(band => {
+            const r = { band, cumY: contentY, visualY };
+            contentY += band.height;
+            visualY += band.height + BAND_HEADER_MM;
+            return r;
+        });
+    }, [currentPage]);
+    const bandLabelIndexes = useMemo(() => {
+        const counters = {};
+        const result = {};
+        for (const { band } of bands) {
+            const key = band.type;
+            counters[key] = (counters[key] ?? 0) + 1;
+            result[band.id] = counters[key];
+        }
+        return result;
+    }, [bands]);
+    const flat = useMemo(() => {
+        const items = [];
+        for (const { band, cumY, visualY } of bands) {
+            for (const comp of band.components) {
+                items.push({ comp, bandId: band.id, cumY, visualY });
+            }
+        }
+        return items;
+    }, [bands]);
+    const others = useMemo(() => flat.map(f => ({ id: f.comp.id, x: f.comp.x, y: f.comp.y, w: f.comp.width, h: f.comp.height, bandId: f.bandId })), [flat]);
+    // Refs for stable access during drag (prevent effect re-subscribe)
+    const flatRef = useRef(flat);
+    flatRef.current = flat;
+    const othersRef = useRef(others);
+    othersRef.current = others;
+    const bandsRef = useRef(bands);
+    bandsRef.current = bands;
+    const currentPageIdRef = useRef(currentPageId);
+    currentPageIdRef.current = currentPageId;
+    const selBoxRef = useRef(selBox);
+    selBoxRef.current = selBox;
+    const getPointerContentY = useCallback((clientY) => {
+        if (!pageRef.current)
+            return 0;
+        const rect = pageRef.current.getBoundingClientRect();
+        const marginTop = mmToPx(currentPage?.margins?.top ?? 0);
+        return (clientY - rect.top) / zoom - marginTop;
+    }, [currentPage, zoom]);
+    const findBandAtComponentCenter = useCallback((sourceBandId, componentY, componentHeight) => {
+        const sourceLayout = bandsRef.current.find(item => item.band.id === sourceBandId);
+        if (!sourceLayout)
+            return null;
+        const centerY = sourceLayout.visualY + BAND_HEADER_MM + componentY + componentHeight / 2;
+        return bandsRef.current.find(item => {
+            const bodyTop = item.visualY + BAND_HEADER_MM;
+            const bodyBottom = bodyTop + item.band.height;
+            return centerY >= bodyTop && centerY <= bodyBottom;
+        }) ?? null;
+    }, []);
+    const convertComponentYToBand = useCallback((sourceBandId, targetBandId, componentY) => {
+        const sourceLayout = bandsRef.current.find(item => item.band.id === sourceBandId);
+        const targetLayout = bandsRef.current.find(item => item.band.id === targetBandId);
+        if (!sourceLayout || !targetLayout)
+            return componentY;
+        const pageTop = sourceLayout.visualY + BAND_HEADER_MM + componentY;
+        const targetBodyTop = targetLayout.visualY + BAND_HEADER_MM;
+        return Math.round((pageTop - targetBodyTop) * 10) / 10;
+    }, []);
+    // ---- Hit tests ----
+    const findResizeHandleAtPoint = useCallback((clientX, clientY) => {
+        const el = elementFromPointSafe(clientX, clientY);
+        if (!el)
+            return null;
+        const handleEl = el.closest('[data-resize-handle]');
+        if (!handleEl)
+            return null;
+        return {
+            compId: handleEl.dataset.compId,
+            bandId: handleEl.dataset.bandId,
+            handle: handleEl.dataset.handleName,
+        };
+    }, []);
+    const findBandResizeAtPoint = useCallback((clientX, clientY) => {
+        const el = elementFromPointSafe(clientX, clientY);
+        if (!el)
+            return null;
+        const handleEl = el.closest('[data-band-resize]');
+        if (!handleEl)
+            return null;
+        return { bandId: handleEl.dataset.bandId };
+    }, []);
+    const findComponentAtPoint = useCallback((clientX, clientY) => {
+        const el = elementFromPointSafe(clientX, clientY);
+        if (!el)
+            return null;
+        const compEl = el.closest('[data-component-id]');
+        if (!compEl)
+            return null;
+        const compId = compEl.dataset.componentId;
+        if (!compId)
+            return null;
+        const f = flat.find(x => x.comp.id === compId);
+        if (!f)
+            return null;
+        return { compId: f.comp.id, bandId: f.bandId };
+    }, [flat]);
+    const findTableCellAtPoint = useCallback((clientX, clientY) => {
+        const el = elementFromPointSafe(clientX, clientY);
+        if (!el)
+            return null;
+        const cellEl = el.closest('[data-table-row][data-table-column]');
+        if (!cellEl)
+            return null;
+        const row = Number(cellEl.dataset.tableRow);
+        const column = Number(cellEl.dataset.tableColumn);
+        const tableId = cellEl.dataset.tableId;
+        const bandId = cellEl.dataset.bandId;
+        if (!Number.isInteger(row) || !Number.isInteger(column))
+            return null;
+        if (!tableId || !bandId)
+            return null;
+        return { tableId, bandId, row, column };
+    }, []);
+    const findTableCellResizeAtPoint = useCallback((clientX, clientY) => {
+        const el = elementFromPointSafe(clientX, clientY);
+        if (!el)
+            return null;
+        const handleEl = el.closest('[data-table-cell-resize]');
+        if (!handleEl)
+            return null;
+        const row = Number(handleEl.dataset.tableRow);
+        const column = Number(handleEl.dataset.tableColumn);
+        const width = Number(handleEl.dataset.cellWidth);
+        const tableId = handleEl.dataset.tableId;
+        const bandId = handleEl.dataset.bandId;
+        if (!Number.isInteger(row) || !Number.isInteger(column) || !Number.isFinite(width))
+            return null;
+        if (!tableId || !bandId)
+            return null;
+        return { tableId, bandId, row, column, width };
+    }, []);
+    // ---- Mouse down ----
+    const handlePageMouseDown = useCallback((e) => {
+        setContextMenu(null);
+        setBandContextMenu(null);
+        if (e.button === 2) {
+            // Right click context menu
+            const ch = findComponentAtPoint(e.clientX, e.clientY);
+            const tableCell = findTableCellAtPoint(e.clientX, e.clientY);
+            if (tableCell) {
+                const currentSelection = useDesignerStore.getState().selectedTableCell;
+                const isInsideCurrentSelection = currentSelection?.tableId === tableCell.tableId
+                    && tableCell.row >= currentSelection.startRow
+                    && tableCell.row <= currentSelection.endRow
+                    && tableCell.column >= currentSelection.startColumn
+                    && tableCell.column <= currentSelection.endColumn;
+                if (!isInsideCurrentSelection) {
+                    selectTableCell({
+                        tableId: tableCell.tableId,
+                        bandId: tableCell.bandId,
+                        startRow: tableCell.row,
+                        startColumn: tableCell.column,
+                        endRow: tableCell.row,
+                        endColumn: tableCell.column,
+                    });
+                }
+            }
+            else if (ch && !selectedComponentIds.includes(ch.compId)) {
+                selectComponents([ch.compId]);
+            }
+            if (pageRef.current) {
+                const rect = pageRef.current.getBoundingClientRect();
+                setContextMenu({ x: (e.clientX - rect.left) / zoom, y: (e.clientY - rect.top) / zoom, compId: ch?.compId, tableCell: tableCell ?? undefined });
+            }
+            return;
+        }
+        if (e.button !== 0)
+            return;
+        // 1. Resize handle
+        const tableResize = findTableCellResizeAtPoint(e.clientX, e.clientY);
+        if (tableResize) {
+            e.preventDefault();
+            e.stopPropagation();
+            selectComponents([tableResize.tableId]);
+            selectTableCell({
+                tableId: tableResize.tableId,
+                bandId: tableResize.bandId,
+                startRow: tableResize.row,
+                startColumn: tableResize.column,
+                endRow: tableResize.row,
+                endColumn: tableResize.column,
+            });
+            const m = {
+                type: 'table-cell-resize',
+                tableId: tableResize.tableId,
+                bandId: tableResize.bandId,
+                row: tableResize.row,
+                column: tableResize.column,
+                startX: e.clientX,
+                origWidth: tableResize.width,
+            };
+            modeRef.current = m;
+            setMode(m);
+            return;
+        }
+        // 1. Resize handle
+        const hr = findResizeHandleAtPoint(e.clientX, e.clientY);
+        if (hr && selectedComponentIds.includes(hr.compId)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const f = flat.find(x => x.comp.id === hr.compId);
+            if (!f)
+                return;
+            const m = {
+                type: 'resize', compId: hr.compId, bandId: hr.bandId, handle: hr.handle,
+                startX: e.clientX, startY: e.clientY,
+                origX: f.comp.x, origY: f.comp.y, origW: f.comp.width, origH: f.comp.height,
+            };
+            modeRef.current = m;
+            setMode(m);
+            return;
+        }
+        // 2. Band resize handle
+        const br = findBandResizeAtPoint(e.clientX, e.clientY);
+        if (br) {
+            e.preventDefault();
+            e.stopPropagation();
+            const bp = bands.find(b => b.band.id === br.bandId);
+            if (!bp)
+                return;
+            const m = {
+                type: 'band-resize', bandId: br.bandId,
+                startY: e.clientY, origHeight: bp.band.height,
+            };
+            modeRef.current = m;
+            setMode(m);
+            return;
+        }
+        // 3. Component hit
+        const ch = findComponentAtPoint(e.clientX, e.clientY);
+        if (ch) {
+            e.preventDefault();
+            e.stopPropagation();
+            const tableCell = findTableCellAtPoint(e.clientX, e.clientY);
+            if (tableCell && ch.compId === tableCell.tableId) {
+                const previous = useDesignerStore.getState().selectedTableCell;
+                const nextSelection = e.shiftKey && previous?.tableId === tableCell.tableId
+                    ? {
+                        ...previous,
+                        endRow: tableCell.row,
+                        endColumn: tableCell.column,
+                    }
+                    : {
+                        tableId: tableCell.tableId,
+                        bandId: tableCell.bandId,
+                        startRow: tableCell.row,
+                        startColumn: tableCell.column,
+                        endRow: tableCell.row,
+                        endColumn: tableCell.column,
+                    };
+                selectBand(null);
+                if (!selectedComponentIds.includes(ch.compId)) {
+                    selectComponents([ch.compId]);
+                }
+                selectTableCell(nextSelection);
+            }
+            // Clear band selection when selecting a component
+            if (!tableCell || ch.compId !== tableCell.tableId) {
+                selectBand(null);
+            }
+            if (tableCell && ch.compId === tableCell.tableId) {
+                // Keep the cell selected, but still arm a normal component move so the whole table can be dragged.
+            }
+            else if (e.ctrlKey || e.metaKey) {
+                const cur = [...selectedComponentIds];
+                const idx = cur.indexOf(ch.compId);
+                if (idx >= 0)
+                    cur.splice(idx, 1);
+                else
+                    cur.push(ch.compId);
+                selectComponents(cur);
+            }
+            else if (!selectedComponentIds.includes(ch.compId)) {
+                selectComponents([ch.compId]);
+            }
+            // Get latest selection from store (zustand is sync, but React closure is stale)
+            const currentSelection = useDesignerStore.getState().selectedComponentIds;
+            const ids = currentSelection.length > 0 ? [...currentSelection] : [ch.compId];
+            const bandMap = {};
+            const origPositions = {};
+            for (const id of ids) {
+                const item = flat.find(x => x.comp.id === id);
+                if (item) {
+                    bandMap[id] = item.bandId;
+                    origPositions[id] = { x: item.comp.x, y: item.comp.y };
+                }
+            }
+            const m = {
+                type: 'move', compIds: ids, bandMap, origPositions,
+                startClientX: e.clientX, startClientY: e.clientY,
+                dragStarted: false,
+            };
+            modeRef.current = m;
+            setMode(m);
+            return;
+        }
+        // 4. Empty canvas = selection box
+        if (!pageRef.current)
+            return;
+        const rect = pageRef.current.getBoundingClientRect();
+        selectComponents([]);
+        selectBand(null);
+        const sx = (e.clientX - rect.left) / zoom;
+        const sy = (e.clientY - rect.top) / zoom;
+        const m = { type: 'select', startX: sx, startY: sy };
+        modeRef.current = m;
+        setMode(m);
+        setSelBox({ x: sx, y: sy, w: 0, h: 0 });
+    }, [flat, bands, selectedComponentIds, selectComponents, selectBand, selectTableCell, findComponentAtPoint, findTableCellAtPoint, findTableCellResizeAtPoint, findResizeHandleAtPoint, findBandResizeAtPoint, zoom]);
+    // ---- Global mouse move/up ----
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            const m = modeRef.current;
+            if (m.type === 'idle')
+                return;
+            if (m.type === 'move') {
+                const dxPx = e.clientX - m.startClientX;
+                const dyPx = e.clientY - m.startClientY;
+                const dist = Math.sqrt(dxPx * dxPx + dyPx * dyPx);
+                if (!m.dragStarted) {
+                    if (dist < DRAG_THRESHOLD)
+                        return; // 未超过阈值，不开始拖拽
+                    // 超过阈值，激活拖拽模式
+                    modeRef.current = { ...m, dragStarted: true };
+                }
+                const dxMm = pxToMm(dxPx, zoom);
+                const dyMm = pxToMm(dyPx, zoom);
+                // Move all selected components
+                const pageId = currentPageIdRef.current;
+                for (const compId of m.compIds) {
+                    const orig = m.origPositions[compId];
+                    if (!orig)
+                        continue;
+                    const currentBand = currentPage?.bands.find(band => band.id === m.bandMap[compId]);
+                    const currentComponent = flatRef.current.find(item => item.comp.id === compId)?.comp;
+                    const newX = clampComponentXToFirstColumn(currentPage, currentBand, orig.x + dxMm, currentComponent?.width ?? 0);
+                    const newY = orig.y + dyMm;
+                    moveComponentSilent(pageId, m.bandMap[compId], compId, newX, newY);
+                }
+                // 对齐引导线 (for the first selected component)
+                const firstId = m.compIds[0];
+                const firstOrig = m.origPositions[firstId];
+                const fc = flatRef.current.find(f => f.comp.id === firstId);
+                if (fc && firstOrig) {
+                    const nextY = firstOrig.y + dyMm;
+                    const targetBand = findBandAtComponentCenter(m.bandMap[firstId], nextY, fc.comp.height);
+                    setComponentMoveTargetBandId(targetBand && targetBand.band.id !== m.bandMap[firstId] ? targetBand.band.id : null);
+                    const g = computeGuides(firstId, firstOrig.x + dxMm, nextY, fc.comp.width, fc.comp.height, othersRef.current);
+                    setGuides(g);
+                }
+            }
+            else if (m.type === 'resize') {
+                const dx = pxToMm(e.clientX - m.startX, zoom);
+                const dy = pxToMm(e.clientY - m.startY, zoom);
+                let nx = m.origX, ny = m.origY, nw = m.origW, nh = m.origH;
+                if (m.handle.includes('e'))
+                    nw = Math.max(5, m.origW + dx);
+                if (m.handle.includes('w')) {
+                    nw = Math.max(5, m.origW - dx);
+                    nx = m.origX + dx;
+                }
+                if (m.handle.includes('s'))
+                    nh = Math.max(5, m.origH + dy);
+                if (m.handle.includes('n')) {
+                    nh = Math.max(5, m.origH - dy);
+                    ny = m.origY + dy;
+                }
+                const resizeBand = currentPage?.bands.find(band => band.id === m.bandId);
+                const maxRight = getFirstColumnDesignWidth(currentPage, resizeBand);
+                if (maxRight !== undefined) {
+                    nx = Math.max(0, Math.min(nx, maxRight - 5));
+                    nw = Math.max(5, Math.min(nw, maxRight - nx));
+                }
+                updateComponentSilent(currentPageIdRef.current, m.bandId, m.compId, { x: nx, y: ny, width: nw, height: nh });
+            }
+            else if (m.type === 'table-cell-resize') {
+                // Width is committed on mouseup to keep the operation a single undoable edit.
+            }
+            else if (m.type === 'band-resize') {
+                const dy = pxToMm(e.clientY - m.startY, zoom);
+                const nh = Math.max(5, Math.round((m.origHeight + dy) * 10) / 10);
+                resizeBandSilent(currentPageIdRef.current, m.bandId, nh);
+            }
+            else if (m.type === 'band-sort') {
+                const dyPx = Math.abs(e.clientY - m.startClientY);
+                if (!m.dragStarted && dyPx < DRAG_THRESHOLD)
+                    return;
+                const pointerContentY = getPointerContentY(e.clientY);
+                const targetIndex = getBandReorderTargetIndex(bandsRef.current, m.bandId, pointerContentY);
+                const nextMode = { ...m, targetIndex, dragStarted: true };
+                modeRef.current = nextMode;
+                setMode(nextMode);
+                setBandReorderTarget({ bandId: m.bandId, targetIndex });
+                setBandDragPreview({
+                    bandId: m.bandId,
+                    top: m.startVisualTop + pointerContentY - m.startPointerContentY,
+                });
+            }
+            else if (m.type === 'select') {
+                if (!pageRef.current)
+                    return;
+                const rect = pageRef.current.getBoundingClientRect();
+                const cx = (e.clientX - rect.left) / zoom;
+                const cy = (e.clientY - rect.top) / zoom;
+                setSelBox({
+                    x: Math.min(m.startX, cx), y: Math.min(m.startY, cy),
+                    w: Math.abs(cx - m.startX), h: Math.abs(cy - m.startY),
+                });
+            }
+        };
+        const handleMouseUp = (e) => {
+            const m = modeRef.current;
+            if (m.type === 'select' && selBoxRef.current) {
+                const page = useDesignerStore.getState().template.pages.find(p => p.id === currentPageIdRef.current);
+                if (page) {
+                    const ids = [];
+                    let visualY = 0;
+                    const marginLeft = mmToPx(page.margins?.left ?? 0);
+                    const marginTop = mmToPx(page.margins?.top ?? 0);
+                    for (const band of page.bands) {
+                        for (const comp of band.components) {
+                            const l = marginLeft + mmToPx(comp.x);
+                            const t = marginTop + mmToPx(visualY) + mmToPx(BAND_HEADER_MM) + mmToPx(comp.y);
+                            const r = l + mmToPx(comp.width), b = t + mmToPx(comp.height);
+                            if (selBoxRef.current.x < r && selBoxRef.current.x + selBoxRef.current.w > l && selBoxRef.current.y < b && selBoxRef.current.y + selBoxRef.current.h > t) {
+                                ids.push(comp.id);
+                            }
+                        }
+                        visualY += band.height + BAND_HEADER_MM;
+                    }
+                    if (ids.length > 0)
+                        selectComponents(ids);
+                }
+            }
+            else if (m.type === 'move') {
+                const state = useDesignerStore.getState();
+                const page = state.template.pages.find(p => p.id === currentPageIdRef.current);
+                for (const compId of m.compIds) {
+                    const band = page?.bands.find(b => b.id === m.bandMap[compId]);
+                    const comp = band?.components.find(c => c.id === compId);
+                    const orig = m.origPositions[compId];
+                    if (comp && orig && (comp.x !== orig.x || comp.y !== orig.y)) {
+                        const targetBand = findBandAtComponentCenter(m.bandMap[compId], comp.y, comp.height);
+                        if (targetBand && targetBand.band.id !== m.bandMap[compId]) {
+                            const targetY = convertComponentYToBand(m.bandMap[compId], targetBand.band.id, comp.y);
+                            const targetX = clampComponentXToFirstColumn(page, targetBand.band, comp.x, comp.width);
+                            moveComponentToBand(currentPageIdRef.current, m.bandMap[compId], targetBand.band.id, compId, targetX, targetY, orig.x, orig.y);
+                        }
+                        else {
+                            const targetX = clampComponentXToFirstColumn(page, band, comp.x, comp.width);
+                            moveComponent(currentPageIdRef.current, m.bandMap[compId], compId, targetX, comp.y, orig.x, orig.y);
+                        }
+                    }
+                }
+            }
+            else if (m.type === 'resize') {
+                const state = useDesignerStore.getState();
+                const page = state.template.pages.find(p => p.id === currentPageIdRef.current);
+                const band = page?.bands.find(b => b.id === m.bandId);
+                const comp = band?.components.find(c => c.id === m.compId);
+                if (comp) {
+                    updateComponent(currentPageIdRef.current, m.bandId, m.compId, { x: comp.x, y: comp.y, width: comp.width, height: comp.height }, { x: m.origX, y: m.origY, width: m.origW, height: m.origH });
+                }
+            }
+            else if (m.type === 'table-cell-resize') {
+                const width = Math.max(1, Math.round((m.origWidth + pxToMm(e.clientX - m.startX, zoom)) * 10) / 10);
+                setSelectedTableCellWidth(m.row, m.column, width);
+            }
+            else if (m.type === 'band-resize') {
+                const state = useDesignerStore.getState();
+                const page = state.template.pages.find(p => p.id === currentPageIdRef.current);
+                const band = page?.bands.find(b => b.id === m.bandId);
+                if (band) {
+                    if (band.height !== m.origHeight) {
+                        resizeBand(currentPageIdRef.current, m.bandId, band.height, m.origHeight);
+                    }
+                }
+            }
+            else if (m.type === 'band-sort') {
+                if (m.dragStarted && m.targetIndex !== m.fromIndex) {
+                    moveBand(currentPageIdRef.current, m.bandId, m.targetIndex);
+                }
+            }
+            modeRef.current = { type: 'idle' };
+            setMode({ type: 'idle' });
+            setSelBox(null);
+            setGuides([]);
+            setBandReorderTarget(null);
+            setBandDragPreview(null);
+            setComponentMoveTargetBandId(null);
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [moveComponent, moveComponentToBand, updateComponent, resizeBand, moveBand, selectComponents, setSelectedTableCellWidth, getPointerContentY, findBandAtComponentCenter, convertComponentYToBand, zoom]);
+    // ---- Keyboard shortcuts ----
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // 忽略编辑模式
+            if (isEditableKeyboardTarget(e.target))
+                return;
+            const isCtrl = e.ctrlKey || e.metaKey;
+            // Delete: 删除
+            if (e.key === 'Delete') {
+                e.preventDefault();
+                if (selectedTableCell) {
+                    clearSelectedTableCell(selectedTableCell.startRow, selectedTableCell.startColumn);
+                    return;
+                }
+                deleteSelected();
+                return;
+            }
+            // Ctrl+C: 复制
+            if (isCtrl && e.key === 'c') {
+                e.preventDefault();
+                copySelected();
+                return;
+            }
+            // Ctrl+X: 剪切
+            if (isCtrl && e.key === 'x') {
+                e.preventDefault();
+                cutSelected();
+                return;
+            }
+            // Ctrl+V: 粘贴
+            if (isCtrl && e.key === 'v') {
+                e.preventDefault();
+                pasteClipboard();
+                return;
+            }
+            // Ctrl+D: 复制一份
+            if (isCtrl && e.key === 'd') {
+                e.preventDefault();
+                duplicateSelected();
+                return;
+            }
+            // Ctrl+Z: 撤销
+            if (isCtrl && e.key === 'z') {
+                e.preventDefault();
+                undo();
+                return;
+            }
+            // Ctrl+Y / Ctrl+Shift+Z: 重做
+            if (isCtrl && e.key === 'y') {
+                e.preventDefault();
+                redo();
+                return;
+            }
+            if (e.key === 'Escape' && useDesignerStore.getState().pendingBandInsertType) {
+                e.preventDefault();
+                cancelBandInsert();
+                return;
+            }
+            if (isCtrl && e.shiftKey && e.key === 'Z') {
+                e.preventDefault();
+                redo();
+                return;
+            }
+            // Ctrl+A: 全选
+            if (isCtrl && e.key === 'a') {
+                e.preventDefault();
+                selectComponents(flat.map(f => f.comp.id));
+                return;
+            }
+            // F5 / Ctrl+F5: 预览
+            if (e.key === 'F5') {
+                e.preventDefault();
+                setDesignerMode('preview');
+                return;
+            }
+            // Ctrl+B/I/U/S: 字体样式
+            if (isCtrl && ['b', 'i', 'u', 's'].includes(e.key.toLowerCase())) {
+                e.preventDefault();
+                const key = e.key.toLowerCase();
+                if (key === 'b')
+                    toggleSelectedFontStyle('bold');
+                if (key === 'i')
+                    toggleSelectedFontStyle('italic');
+                if (key === 'u')
+                    toggleSelectedFontStyle('underline');
+                if (key === 's')
+                    toggleSelectedFontStyle('strikethrough');
+                return;
+            }
+            // Ctrl+L/E/R: 文本左/中/右对齐
+            if (isCtrl && ['l', 'e', 'r'].includes(e.key.toLowerCase())) {
+                e.preventDefault();
+                const key = e.key.toLowerCase();
+                if (key === 'l')
+                    setTextAlign('left');
+                if (key === 'e')
+                    setTextAlign('center');
+                if (key === 'r')
+                    setTextAlign('right');
+                return;
+            }
+            // Ctrl+Shift+Arrow: 对齐
+            if (isCtrl && e.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) && selectedComponentIds.length >= 2) {
+                e.preventDefault();
+                if (e.key === 'ArrowLeft')
+                    useDesignerStore.getState().alignComponents('left');
+                if (e.key === 'ArrowRight')
+                    useDesignerStore.getState().alignComponents('right');
+                if (e.key === 'ArrowUp')
+                    useDesignerStore.getState().alignComponents('top');
+                if (e.key === 'ArrowDown')
+                    useDesignerStore.getState().alignComponents('bottom');
+                return;
+            }
+            // Ctrl+Alt+ArrowUp/Down: 置顶/置底
+            if (isCtrl && e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown') && selectedComponentIds.length > 0) {
+                e.preventDefault();
+                if (e.key === 'ArrowUp')
+                    useDesignerStore.getState().bringToFront();
+                if (e.key === 'ArrowDown')
+                    useDesignerStore.getState().sendToBack();
+                return;
+            }
+            // Arrow keys: 微移
+            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) && selectedComponentIds.length > 0) {
+                e.preventDefault();
+                const step = e.altKey ? 0.5 : e.ctrlKey || e.metaKey ? GRID_MM : 1;
+                const dx = e.key === 'ArrowLeft' ? -step : e.key === 'ArrowRight' ? step : 0;
+                const dy = e.key === 'ArrowUp' ? -step : e.key === 'ArrowDown' ? step : 0;
+                if (e.shiftKey) {
+                    resizeSelectedBy(dx, dy);
+                }
+                else {
+                    moveSelectedBy(dx, dy);
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [selectedComponentIds, selectedTableCell, flat, undo, redo, selectComponents, copySelected, cutSelected, duplicateSelected, pasteClipboard, deleteSelected, clearSelectedTableCell, moveSelectedBy, resizeSelectedBy, toggleSelectedFontStyle, setTextAlign, setDesignerMode, cancelBandInsert]);
+    // ---- Zoom wheel handler ----
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const handleWheel = (e) => {
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? -0.1 : 0.1;
+                const next = Math.min(4, Math.max(0.25, zoom + delta));
+                setZoom(Math.round(next * 100) / 100);
+            }
+        };
+        el.addEventListener('wheel', handleWheel, { passive: false });
+        return () => el.removeEventListener('wheel', handleWheel);
+    }, [setZoom, zoom]);
+    // ---- Click outside to close context menu ----
+    useEffect(() => {
+        if (!contextMenu && !bandContextMenu)
+            return;
+        const close = () => {
+            setContextMenu(null);
+            setBandContextMenu(null);
+        };
+        window.addEventListener('click', close);
+        return () => window.removeEventListener('click', close);
+    }, [bandContextMenu, contextMenu]);
+    const getDropPosition = useCallback((event) => {
+        if (!pageRef.current)
+            return null;
+        const rect = pageRef.current.getBoundingClientRect();
+        const clientX = Number.isFinite(event.clientX) ? event.clientX : rect.left;
+        const clientY = Number.isFinite(event.clientY) ? event.clientY : rect.top;
+        const pageX = pxToMm(clientX - rect.left, zoom);
+        const pageY = pxToMm(clientY - rect.top, zoom);
+        const margins = currentPage?.margins ?? { top: 0, right: 0, bottom: 0, left: 0 };
+        const printableWidth = currentPage ? Math.max(0, currentPage.width - margins.left - margins.right) : 0;
+        const xMm = Math.max(0, Math.min(printableWidth, Math.round((pageX - margins.left) * 10) / 10));
+        const yMm = Math.round((pageY - margins.top) * 10) / 10;
+        for (const { band, visualY } of bands) {
+            const bandTop = visualY;
+            const bodyTop = visualY + BAND_HEADER_MM;
+            const bandBottom = bodyTop + band.height;
+            if (yMm >= bandTop && yMm <= bandBottom) {
+                const bandX = clampComponentXToFirstColumn(currentPage, band, xMm, 0);
+                const bandY = Math.max(0, Math.min(band.height, Math.round((yMm - bodyTop) * 10) / 10));
+                const panelTarget = findPanelDropTarget(band, bandX, bandY);
+                if (panelTarget) {
+                    return {
+                        targetBandId: band.id,
+                        targetPanelId: panelTarget.panelId,
+                        xMm: panelTarget.xMm,
+                        yMm: panelTarget.yMm,
+                    };
+                }
+                return {
+                    targetBandId: band.id,
+                    xMm: bandX,
+                    yMm: bandY,
+                };
+            }
+        }
+        const fallbackBand = currentPage?.bands.find(band => band.type === 'data') ?? currentPage?.bands[0];
+        return fallbackBand ? { targetBandId: fallbackBand.id, xMm, yMm: 0 } : null;
+    }, [bands, currentPage?.bands, zoom]);
+    const handleCanvasDragOver = useCallback((event) => {
+        const hasSupportedPayload = hasDragPayload(event, 'componentType') || hasDragPayload(event, 'fieldBinding') || hasDragPayload(event, 'expressionBinding');
+        if (!hasSupportedPayload)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    }, []);
+    const handleCanvasDrop = useCallback((event) => {
+        const position = getDropPosition(event);
+        if (!position || !currentPageId)
+            return;
+        const fieldBinding = getDragData(event, 'fieldBinding');
+        const expressionBinding = getDragData(event, 'expressionBinding');
+        const componentType = getDragData(event, 'componentType');
+        if (!fieldBinding && !expressionBinding && !componentType)
+            return;
+        event.preventDefault();
+        const tableCellTarget = findTableCellAtPoint(event.clientX, event.clientY);
+        if (fieldBinding) {
+            try {
+                const field = JSON.parse(fieldBinding);
+                if (tableCellTarget) {
+                    const expression = formatDataFieldExpression(field.dataSourceId, field.fieldName);
+                    const state = useDesignerStore.getState();
+                    state.selectComponents([tableCellTarget.tableId]);
+                    state.selectTableCell({
+                        tableId: tableCellTarget.tableId,
+                        bandId: tableCellTarget.bandId,
+                        startRow: tableCellTarget.row,
+                        startColumn: tableCellTarget.column,
+                        endRow: tableCellTarget.row,
+                        endColumn: tableCellTarget.column,
+                    });
+                    state.updateSelectedTableCell({ text: expression });
+                    return;
+                }
+                const component = createFieldExpressionComponent(field, position.xMm, position.yMm);
+                if ('targetPanelId' in position && position.targetPanelId) {
+                    addComponentToPanel(currentPageId, position.targetBandId, position.targetPanelId, component);
+                }
+                else {
+                    addComponent(currentPageId, position.targetBandId, component);
+                }
+                return;
+            }
+            catch {
+                return;
+            }
+        }
+        if (expressionBinding) {
+            if (tableCellTarget) {
+                const state = useDesignerStore.getState();
+                state.selectComponents([tableCellTarget.tableId]);
+                state.selectTableCell({
+                    tableId: tableCellTarget.tableId,
+                    bandId: tableCellTarget.bandId,
+                    startRow: tableCellTarget.row,
+                    startColumn: tableCellTarget.column,
+                    endRow: tableCellTarget.row,
+                    endColumn: tableCellTarget.column,
+                });
+                state.updateSelectedTableCell({ text: expressionBinding });
+                return;
+            }
+            const component = createTextExpressionComponent(expressionBinding, position.xMm, position.yMm);
+            if ('targetPanelId' in position && position.targetPanelId) {
+                addComponentToPanel(currentPageId, position.targetBandId, position.targetPanelId, component);
+            }
+            else {
+                addComponent(currentPageId, position.targetBandId, component);
+            }
+            return;
+        }
+        const component = createDefaultComponent(componentType, position.xMm, position.yMm);
+        if ('targetPanelId' in position && position.targetPanelId) {
+            addComponentToPanel(currentPageId, position.targetBandId, position.targetPanelId, component);
+        }
+        else {
+            addComponent(currentPageId, position.targetBandId, component);
+        }
+    }, [addComponent, addComponentToPanel, currentPageId, findTableCellAtPoint, getDropPosition]);
+    const handlePageMouseMove = useCallback((event) => {
+        if (!pendingBandInsertType || !pageRef.current)
+            return;
+        const rect = pageRef.current.getBoundingClientRect();
+        setBandInsertPointer({
+            x: (event.clientX - rect.left) / zoom,
+            y: (event.clientY - rect.top) / zoom,
+        });
+    }, [pendingBandInsertType, zoom]);
+    const handleStartBandSort = useCallback((bandId, event) => {
+        if (pendingBandInsertType)
+            return;
+        const fromIndex = bands.findIndex(item => item.band.id === bandId);
+        if (fromIndex < 0)
+            return;
+        const bandLayout = bands[fromIndex];
+        const startPointerContentY = getPointerContentY(event.clientY);
+        const targetIndex = getBandReorderTargetIndex(bands, bandId, getPointerContentY(event.clientY));
+        const nextMode = {
+            type: 'band-sort',
+            bandId,
+            startClientY: event.clientY,
+            startPointerContentY,
+            startVisualTop: mmToPx(bandLayout.visualY),
+            fromIndex,
+            targetIndex,
+            dragStarted: false,
+        };
+        modeRef.current = nextMode;
+        setMode(nextMode);
+        setBandReorderTarget(null);
+    }, [bands, getPointerContentY, pendingBandInsertType]);
+    const handleBandContextMenu = useCallback((bandId, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!pageRef.current)
+            return;
+        const rect = pageRef.current.getBoundingClientRect();
+        selectComponents([]);
+        selectBand(bandId);
+        setContextMenu(null);
+        setBandContextMenu({
+            bandId,
+            x: (event.clientX - rect.left) / zoom,
+            y: (event.clientY - rect.top) / zoom,
+        });
+    }, [selectBand, selectComponents, zoom]);
+    if (!currentPage) {
+        return (_jsx("div", { className: className, style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#999' }, children: t('canvas.noPageSelected') }));
+    }
+    const isBusy = mode.type !== 'idle';
+    const gridPx = mmToPx(GRID_MM);
+    const rawPageWidthPx = mmToPx(currentPage.width);
+    const rawPageHeightPx = mmToPx(currentPage.height);
+    const scaledPageWidthPx = Math.round(rawPageWidthPx * zoom);
+    const scaledPageHeightPx = Math.round(rawPageHeightPx * zoom);
+    const margins = currentPage.margins ?? { top: 0, right: 0, bottom: 0, left: 0 };
+    const rawMarginLeftPx = mmToPx(margins.left);
+    const rawMarginTopPx = mmToPx(margins.top);
+    const rawMarginRightPx = mmToPx(margins.right);
+    const rawMarginBottomPx = mmToPx(margins.bottom);
+    const scaledMarginLeftPx = Math.round(rawMarginLeftPx * zoom);
+    const scaledMarginTopPx = Math.round(rawMarginTopPx * zoom);
+    const printableWidthMm = Math.max(0, currentPage.width - margins.left - margins.right);
+    const printableHeightMm = Math.max(0, currentPage.height - margins.top - margins.bottom);
+    const rawPrintableWidthPx = mmToPx(printableWidthMm);
+    const rawPrintableHeightPx = mmToPx(printableHeightMm);
+    const bandReorderLineTop = bandReorderTarget
+        ? getBandReorderLineTop(bands, bandReorderTarget.bandId, bandReorderTarget.targetIndex)
+        : null;
+    const bandDragPreviewLayout = bandDragPreview
+        ? bands.find(item => item.band.id === bandDragPreview.bandId)
+        : undefined;
+    return (_jsxs("div", { ref: containerRef, className: className, style: { overflow: 'hidden', backgroundColor: '#e8e8e8', height: '100%', userSelect: isBusy ? 'none' : 'auto', position: 'relative' }, children: [_jsx("div", { "data-testid": "designer-canvas-viewport", style: { overflowX: 'auto', overflowY: 'auto', height: '100%', padding: '0 24px 24px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'relative' }, children: _jsxs("div", { "data-testid": "designer-canvas-page-stack", style: { position: 'relative', width: safeCssNumber(scaledPageWidthPx + RULER_SIZE), height: safeCssNumber(scaledPageHeightPx + RULER_SIZE), margin: 0 }, children: [_jsx(Ruler, { direction: "horizontal", lengthMm: printableWidthMm, lengthPx: scaledPageWidthPx, printableOffsetPx: scaledMarginLeftPx, offsetPx: RULER_SIZE, crossOffsetPx: 0, zoom: zoom }), _jsx(Ruler, { direction: "vertical", lengthMm: printableHeightMm, lengthPx: scaledPageHeightPx, printableOffsetPx: scaledMarginTopPx, offsetPx: RULER_SIZE, crossOffsetPx: 0, zoom: zoom }), _jsxs("div", { ref: pageRef, "data-page": true, "data-testid": "designer-page-sheet", onMouseDown: handlePageMouseDown, onMouseMove: handlePageMouseMove, onDrop: handleCanvasDrop, onDragOver: handleCanvasDragOver, onContextMenu: (e) => e.preventDefault(), style: {
+                                width: safeCssNumber(rawPageWidthPx), height: safeCssNumber(rawPageHeightPx),
+                                backgroundColor: currentPage.backgroundColor ?? '#ffffff', boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                position: 'relative', marginLeft: RULER_SIZE, marginTop: RULER_SIZE, overflow: 'hidden',
+                                transform: `scale(${zoom})`,
+                                transformOrigin: 'top left',
+                                cursor: pendingBandInsertType ? 'copy' : undefined,
+                            }, children: [_jsx(PageWatermarkOverlay, { watermark: currentPage.watermark, zIndex: currentPage.watermark?.showBehind === false ? 20 : 0 }), _jsxs("div", { "data-testid": "designer-page-content-area", style: {
+                                        position: 'absolute',
+                                        left: rawMarginLeftPx,
+                                        top: rawMarginTopPx,
+                                        width: safeCssNumber(rawPrintableWidthPx),
+                                        height: safeCssNumber(rawPrintableHeightPx),
+                                        backgroundImage: `
+                linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px)
+              `,
+                                        backgroundSize: `${gridPx}px ${gridPx}px`,
+                                        overflow: 'visible',
+                                    }, children: [guides.map((g, i) => {
+                                            const selectedFlat = flat.find(f => f.comp.id === selectedComponentIds[0]);
+                                            return (_jsx("div", { style: {
+                                                    position: 'absolute',
+                                                    ...(g.type === 'horizontal' ? { left: 0, right: 0, top: safeCssNumber(mmToPx(selectedFlat?.visualY ?? 0) + mmToPx(BAND_HEADER_MM) + g.position - mmToPx((selectedFlat?.comp.y ?? 0))), height: 1 } : { top: 0, bottom: 0, left: safeCssNumber(g.position), width: 1 }),
+                                                    backgroundColor: '#ff4d4f', zIndex: 9998, pointerEvents: 'none',
+                                                } }, i));
+                                        }), bands.map(({ band, visualY }) => (_jsx(BandView, { band: band, visualY: visualY, page: currentPage, labelIndex: bandLabelIndexes[band.id] ?? 1, isSelected: band.id === selectedBandId, pendingBandInsertType: pendingBandInsertType, selectedIds: selectedComponentIds, selectedTableCell: selectedTableCell, fonts: template.fonts, isDragging: bandDragPreview?.bandId === band.id, isComponentMoveTarget: componentMoveTargetBandId === band.id, onOpenContextMenu: handleBandContextMenu, onStartBandSort: handleStartBandSort, onUpdateComponent: updateComponent, currentPageId: currentPageId }, band.id))), bandDragPreview && bandDragPreviewLayout ? (_jsx(BandDragPreview, { band: bandDragPreviewLayout.band, labelIndex: bandLabelIndexes[bandDragPreviewLayout.band.id] ?? 1, top: bandDragPreview.top })) : null, bandReorderLineTop !== null ? (_jsx("div", { "data-testid": "designer-band-reorder-line", style: {
+                                                position: 'absolute',
+                                                left: 0,
+                                                right: 0,
+                                                top: safeCssNumber(bandReorderLineTop),
+                                                height: 2,
+                                                backgroundColor: '#1677ff',
+                                                boxShadow: '0 0 0 1px rgba(22,119,255,0.16)',
+                                                pointerEvents: 'none',
+                                                zIndex: 9997,
+                                            } })) : null] }), pendingBandInsertType ? (_jsx(BandInsertCursor, { type: pendingBandInsertType, label: t(BAND_LABEL_KEYS[pendingBandInsertType]), pointer: bandInsertPointer })) : null, _jsx(PageBorderOverlay, { pageBorder: currentPage.pageBorder }), mode.type === 'select' && selBox && (_jsx("div", { style: {
+                                        position: 'absolute', left: safeCssNumber(selBox.x), top: safeCssNumber(selBox.y),
+                                        width: safeCssNumber(selBox.w), height: safeCssNumber(selBox.h),
+                                        border: '1px dashed #1890ff', backgroundColor: 'rgba(24,144,255,0.08)',
+                                        pointerEvents: 'none', zIndex: 9999,
+                                    } })), contextMenu && (_jsx(ContextMenu, { x: contextMenu.x, y: contextMenu.y, hasSelection: selectedComponentIds.length > 0, hasClipboard: storeClipboard.length > 0, selectedType: flat.find(f => f.comp.id === (contextMenu.compId ?? selectedComponentIds[0]))?.comp.type, tableCell: contextMenu.tableCell, onCopy: () => { copySelected(); setContextMenu(null); }, onCut: () => { cutSelected(); setContextMenu(null); }, onPaste: () => { pasteClipboard(); setContextMenu(null); }, onDuplicate: () => { duplicateSelected(); setContextMenu(null); }, onBringToFront: () => { useDesignerStore.getState().bringToFront(); setContextMenu(null); }, onSendToBack: () => { useDesignerStore.getState().sendToBack(); setContextMenu(null); }, onInsertTableColumnLeft: () => { useDesignerStore.getState().insertSelectedTableColumn((contextMenu.tableCell?.column ?? 0) - 1); setContextMenu(null); }, onInsertTableColumnRight: () => { useDesignerStore.getState().insertSelectedTableColumn(contextMenu.tableCell?.column); setContextMenu(null); }, onDeleteTableColumn: () => { useDesignerStore.getState().deleteSelectedTableColumn(contextMenu.tableCell?.column); setContextMenu(null); }, onInsertTableRowAbove: () => { useDesignerStore.getState().insertSelectedTableRow((contextMenu.tableCell?.row ?? 0) - 1); setContextMenu(null); }, onInsertTableRowBelow: () => { useDesignerStore.getState().insertSelectedTableRow(contextMenu.tableCell?.row); setContextMenu(null); }, onDeleteTableRow: () => { useDesignerStore.getState().deleteSelectedTableRow(contextMenu.tableCell?.row); setContextMenu(null); }, onMergeTableCellRight: () => {
+                                        if (contextMenu.tableCell) {
+                                            useDesignerStore.getState().mergeSelectedTableCellRight(contextMenu.tableCell.row, contextMenu.tableCell.column);
+                                        }
+                                        setContextMenu(null);
+                                    }, onMergeSelectedTableCells: () => {
+                                        useDesignerStore.getState().mergeSelectedTableCellRange();
+                                        setContextMenu(null);
+                                    }, onSplitTableCell: () => {
+                                        if (contextMenu.tableCell) {
+                                            useDesignerStore.getState().splitSelectedTableCell(contextMenu.tableCell.row, contextMenu.tableCell.column);
+                                        }
+                                        setContextMenu(null);
+                                    }, onClearTableCell: () => {
+                                        if (contextMenu.tableCell) {
+                                            useDesignerStore.getState().clearSelectedTableCell(contextMenu.tableCell.row, contextMenu.tableCell.column);
+                                        }
+                                        setContextMenu(null);
+                                    }, onClearTableCellStyle: () => {
+                                        if (contextMenu.tableCell) {
+                                            useDesignerStore.getState().clearSelectedTableCellStyle(contextMenu.tableCell.row, contextMenu.tableCell.column);
+                                        }
+                                        setContextMenu(null);
+                                    }, onCopyTableCellStyle: () => {
+                                        if (contextMenu.tableCell) {
+                                            useDesignerStore.getState().copySelectedTableCellStyle(contextMenu.tableCell.row, contextMenu.tableCell.column);
+                                        }
+                                        setContextMenu(null);
+                                    }, onPasteTableCellStyle: () => {
+                                        if (contextMenu.tableCell) {
+                                            useDesignerStore.getState().pasteSelectedTableCellStyle(contextMenu.tableCell.row, contextMenu.tableCell.column);
+                                        }
+                                        setContextMenu(null);
+                                    }, onEqualizeTableColumns: () => { useDesignerStore.getState().equalizeSelectedTableColumns(); setContextMenu(null); }, onEqualizeTableRows: () => { useDesignerStore.getState().equalizeSelectedTableRows(); setContextMenu(null); }, onToggleTableBorder: () => {
+                                        const table = flat.find(f => f.comp.id === (contextMenu.compId ?? selectedComponentIds[0]))?.comp;
+                                        if (table?.type === 'table')
+                                            useDesignerStore.getState().updateSelectedTable({ showBorder: !table.showBorder });
+                                        setContextMenu(null);
+                                    }, onDelete: () => {
+                                        deleteSelected();
+                                        setContextMenu(null);
+                                    } })), bandContextMenu && (_jsx(BandContextMenu, { x: bandContextMenu.x, y: bandContextMenu.y, onCopy: () => {
+                                        useDesignerStore.getState().duplicateBandAfter(currentPageId, bandContextMenu.bandId);
+                                        setBandContextMenu(null);
+                                    }, onDelete: () => {
+                                        useDesignerStore.getState().deleteBand(currentPageId, bandContextMenu.bandId);
+                                        setBandContextMenu(null);
+                                    } }))] })] }) }), _jsx(ZoomBar, { zoom: zoom, onZoomIn: () => setZoom(Math.min(4, Math.round((zoom + 0.1) * 100) / 100)), onZoomOut: () => setZoom(Math.max(0.25, Math.round((zoom - 0.1) * 100) / 100)), onReset: () => setZoom(1), onSetZoom: (z) => setZoom(z) })] }));
+};
+const BandInsertCursor = ({ label, pointer, type }) => {
+    const color = BAND_COLORS[type] || '#2563eb';
+    const x = safeCssNumber((pointer?.x ?? 16) + 12);
+    const y = safeCssNumber((pointer?.y ?? 16) + 12);
+    return (_jsxs("div", { "data-testid": "designer-band-insert-cursor", style: {
+            position: 'absolute',
+            left: x,
+            top: y,
+            zIndex: 10001,
+            pointerEvents: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            padding: '3px 8px',
+            border: `1px solid ${color}`,
+            backgroundColor: '#ffffff',
+            color: '#111827',
+            borderRadius: 3,
+            boxShadow: '0 2px 8px rgba(15,23,42,0.16)',
+            fontSize: 12,
+            lineHeight: 1.2,
+            whiteSpace: 'nowrap',
+        }, children: [_jsx("span", { "aria-hidden": true, style: {
+                    width: 14,
+                    height: 10,
+                    border: `1px solid ${color}`,
+                    borderTopWidth: 3,
+                    display: 'inline-block',
+                    boxSizing: 'border-box',
+                    background: `${color}14`,
+                } }), _jsx("span", { children: label })] }));
+};
+// ---- Ruler Component ----
+const Ruler = ({ direction, lengthMm, lengthPx, printableOffsetPx, offsetPx, crossOffsetPx, zoom }) => {
+    const isHorizontal = direction === 'horizontal';
+    const ticks = useMemo(() => {
+        const result = [];
+        for (let mm = 0; mm <= Math.floor(lengthMm); mm += 1) {
+            const px = printableOffsetPx + mmToPx(mm) * zoom;
+            const isMajor = mm % 10 === 0;
+            result.push({
+                pos: px,
+                major: isMajor,
+                medium: !isMajor && mm % 5 === 0,
+                label: isMajor ? `${mm}` : undefined,
+            });
+        }
+        return result;
+    }, [lengthMm, printableOffsetPx, zoom]);
+    return (_jsx("div", { "data-testid": `designer-ruler-${direction}`, "data-printable-offset-px": Math.round(printableOffsetPx), style: {
+            position: 'absolute',
+            ...(isHorizontal
+                ? { left: `${offsetPx}px`, top: `${crossOffsetPx}px`, width: `${lengthPx}px`, height: `${RULER_SIZE}px` }
+                : { left: `${crossOffsetPx}px`, top: `${offsetPx}px`, width: `${RULER_SIZE}px`, height: `${lengthPx}px` }),
+            overflow: 'hidden',
+            backgroundColor: '#f1f1f1',
+            borderRight: isHorizontal ? undefined : '1px solid #b9b9b9',
+            borderBottom: isHorizontal ? '1px solid #b9b9b9' : undefined,
+            zIndex: 1000,
+            userSelect: 'none',
+        }, children: _jsx("svg", { width: isHorizontal ? lengthPx : RULER_SIZE, height: isHorizontal ? RULER_SIZE : lengthPx, style: { display: 'block' }, children: ticks.map((tick, i) => {
+                if (isHorizontal) {
+                    const tickH = tick.major ? 16 : tick.medium ? 11 : 6;
+                    return (_jsxs("g", { children: [_jsx("line", { x1: tick.pos, y1: RULER_SIZE, x2: tick.pos, y2: RULER_SIZE - tickH, stroke: tick.major ? '#555' : '#8f8f8f', strokeWidth: tick.major ? 1 : 0.5 }), tick.label && (_jsx("text", { x: tick.pos + 4, y: 11, fontSize: "8", fill: "#444", fontFamily: "Arial", children: tick.label }))] }, i));
+                }
+                else {
+                    const tickW = tick.major ? 16 : tick.medium ? 11 : 6;
+                    return (_jsxs("g", { children: [_jsx("line", { x1: RULER_SIZE, y1: tick.pos, x2: RULER_SIZE - tickW, y2: tick.pos, stroke: tick.major ? '#555' : '#8f8f8f', strokeWidth: tick.major ? 1 : 0.5 }), tick.label && (_jsx("text", { x: 2, y: tick.pos + 3, fontSize: "8", fill: "#444", fontFamily: "Arial", children: tick.label }))] }, i));
+                }
+            }) }) }));
+};
+// ---- Zoom Bar Component ----
+const ZoomBar = ({ zoom, onZoomIn, onZoomOut, onReset, onSetZoom }) => {
+    const { t } = useDesignerI18n();
+    return (_jsxs("div", { "data-testid": "designer-zoom-bar", style: {
+            position: 'absolute', right: 16, bottom: 16,
+            backgroundColor: '#fff', border: '1px solid #d9d9d9', borderRadius: 4,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.12)', zIndex: 10000,
+            display: 'flex', alignItems: 'center', padding: '2px 4px', gap: 2,
+        }, children: [_jsx("button", { onClick: onZoomOut, title: t('canvas.zoomOut'), style: zoomBtnStyle, children: '−' }), _jsxs("span", { onClick: onReset, title: t('canvas.zoomReset'), style: { fontSize: 11, color: '#555', cursor: 'pointer', padding: '0 6px', minWidth: 40, textAlign: 'center' }, children: [Math.round(zoom * 100), "%"] }), _jsx("button", { onClick: onZoomIn, title: t('canvas.zoomIn'), style: zoomBtnStyle, children: '+' }), _jsx("div", { style: { width: 1, height: 18, backgroundColor: '#d9d9d9', margin: '0 2px' } }), _jsx("button", { onClick: () => onSetZoom(0.5), title: "50%", style: { ...zoomBtnStyle, width: 28, fontSize: 10 }, children: "50%" }), _jsx("button", { onClick: () => onSetZoom(1), title: "100%", style: { ...zoomBtnStyle, width: 34, fontSize: 10 }, children: "100%" }), _jsx("button", { onClick: () => onSetZoom(2), title: "200%", style: { ...zoomBtnStyle, width: 34, fontSize: 10 }, children: "200%" })] }));
+};
+const zoomBtnStyle = {
+    width: 24, height: 24, border: '1px solid #d9d9d9', borderRadius: 3,
+    backgroundColor: '#fff', cursor: 'pointer', display: 'flex',
+    alignItems: 'center', justifyContent: 'center', fontSize: 14,
+    padding: 0, lineHeight: 1, color: '#555',
+};
+function areMenuKeysEqual(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+function divider(key) {
+    return { type: 'divider', key };
+}
+function menuLabel(label, shortcut, visible = true, onMouseEnter) {
+    if (!visible)
+        return _jsx("span", { "aria-hidden": true });
+    if (!shortcut) {
+        return (_jsx("span", { style: { display: 'block' }, onMouseEnter: onMouseEnter, children: label }));
+    }
+    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, minWidth: 150 }, onMouseEnter: onMouseEnter, children: [_jsx("span", { children: label }), _jsx("span", { style: { color: '#999', fontSize: 11 }, children: shortcut })] }));
+}
+function menuItem(key, label, options = {}) {
+    return {
+        key,
+        label: menuLabel(label, options.shortcut, options.visible, options.onMouseEnter),
+        disabled: options.disabled,
+        danger: options.danger,
+    };
+}
+const ContextMenu = ({ x, y, hasSelection, hasClipboard, selectedType, tableCell, onCopy, onCut, onPaste, onDuplicate, onDelete, onBringToFront, onSendToBack, onInsertTableColumnLeft, onInsertTableColumnRight, onDeleteTableColumn, onInsertTableRowAbove, onInsertTableRowBelow, onDeleteTableRow, onToggleTableBorder, onMergeTableCellRight, onMergeSelectedTableCells, onSplitTableCell, onClearTableCell, onClearTableCellStyle, onCopyTableCellStyle, onPasteTableCellStyle, onEqualizeTableColumns, onEqualizeTableRows, }) => {
+    const { t } = useDesignerI18n();
+    const [openKeys, setOpenKeys] = useState([]);
+    const isTableCellMenu = selectedType === 'table' && !!tableCell;
+    const closeSubmenus = useCallback(() => {
+        setOpenKeys((current) => current.length > 0 ? [] : current);
+    }, []);
+    const openSubmenu = useCallback((keys) => {
+        setOpenKeys((current) => areMenuKeysEqual(current, keys) ? current : keys);
+    }, []);
+    const handleOpenChange = useCallback((keys) => {
+        setOpenKeys((current) => areMenuKeysEqual(current, keys) ? current : keys);
+    }, []);
+    const isSubmenuOpen = useCallback((key) => openKeys.includes(key), [openKeys]);
+    const menuSubmenu = useCallback((key, label, children, disabled, visible = true, openPath = [key]) => ({
+        key,
+        label: (_jsx("span", { style: { display: 'block' }, onMouseEnter: () => openSubmenu(openPath), children: visible ? label : null })),
+        children,
+        disabled,
+    }), [openSubmenu]);
+    const actionMap = {
+        cut: onCut,
+        copy: onCopy,
+        paste: onPaste,
+        duplicate: onDuplicate,
+        delete: onDelete,
+        bringToFront: onBringToFront,
+        sendToBack: onSendToBack,
+        insertColumnLeft: onInsertTableColumnLeft,
+        insertColumnRight: onInsertTableColumnRight,
+        deleteColumn: onDeleteTableColumn,
+        insertRowAbove: onInsertTableRowAbove,
+        insertRowBelow: onInsertTableRowBelow,
+        deleteRow: onDeleteTableRow,
+        toggleBorder: onToggleTableBorder,
+        mergeCells: () => {
+            const selected = useDesignerStore.getState().selectedTableCell;
+            if (selected && (selected.startRow !== selected.endRow || selected.startColumn !== selected.endColumn)) {
+                onMergeSelectedTableCells();
+                return;
+            }
+            onMergeTableCellRight();
+        },
+        splitCell: onSplitTableCell,
+        clearCell: onClearTableCell,
+        clearCellStyle: onClearTableCellStyle,
+        copyCellStyle: onCopyTableCellStyle,
+        pasteCellStyle: onPasteTableCellStyle,
+        equalizeColumns: onEqualizeTableColumns,
+        equalizeRows: onEqualizeTableRows,
+    };
+    const topLevelMenuItem = useCallback((key, label, options = {}) => menuItem(key, label, { ...options, onMouseEnter: closeSubmenus }), [closeSubmenus]);
+    const commonEditItems = [
+        topLevelMenuItem('cut', t('contextMenu.cut'), { shortcut: 'Ctrl+X', disabled: !hasSelection }),
+        topLevelMenuItem('copy', t('contextMenu.copy'), { shortcut: 'Ctrl+C', disabled: !hasSelection }),
+        topLevelMenuItem('paste', t('contextMenu.paste'), { shortcut: 'Ctrl+V', disabled: !hasClipboard }),
+    ];
+    const componentItems = [
+        ...commonEditItems,
+        topLevelMenuItem('duplicate', t('contextMenu.duplicate'), { shortcut: 'Ctrl+D', disabled: !hasSelection }),
+        divider('edit-divider'),
+        menuSubmenu('arrange', t('contextMenu.table.arrange'), [
+            menuItem('bringToFront', t('contextMenu.bringToFront'), { shortcut: 'Ctrl+Alt+↑', disabled: !hasSelection }),
+            menuItem('sendToBack', t('contextMenu.sendToBack'), { shortcut: 'Ctrl+Alt+↓', disabled: !hasSelection }),
+        ], !hasSelection),
+        divider('delete-divider'),
+        topLevelMenuItem('delete', t('contextMenu.delete'), { shortcut: 'Del', disabled: !hasSelection, danger: true }),
+    ];
+    const tableItems = [
+        ...commonEditItems,
+        divider('clear-divider'),
+        topLevelMenuItem('clearCell', t('contextMenu.table.clearContent'), { disabled: !tableCell }),
+        divider('structure-divider'),
+        menuSubmenu('insert', t('contextMenu.table.insert'), [
+            menuItem('insertRowAbove', t('contextMenu.table.insertRowAboveExcel'), { visible: isSubmenuOpen('insert') }),
+            menuItem('insertRowBelow', t('contextMenu.table.insertRowBelowExcel'), { visible: isSubmenuOpen('insert') }),
+            menuItem('insertColumnLeft', t('contextMenu.table.insertColumnLeftExcel'), { visible: isSubmenuOpen('insert') }),
+            menuItem('insertColumnRight', t('contextMenu.table.insertColumnRightExcel'), { visible: isSubmenuOpen('insert') }),
+        ], !tableCell),
+        menuSubmenu('deleteTablePart', t('contextMenu.table.delete'), [
+            menuItem('deleteRow', t('contextMenu.table.deleteCurrentRow'), { visible: isSubmenuOpen('deleteTablePart') }),
+            menuItem('deleteColumn', t('contextMenu.table.deleteCurrentColumn'), { visible: isSubmenuOpen('deleteTablePart') }),
+        ], !tableCell),
+        divider('cell-divider'),
+        topLevelMenuItem('mergeCells', t('contextMenu.table.mergeCells'), { disabled: !tableCell }),
+        topLevelMenuItem('splitCell', t('contextMenu.table.splitCell'), { disabled: !tableCell }),
+        divider('distribution-divider'),
+        topLevelMenuItem('equalizeColumns', t('contextMenu.table.distributeColumns')),
+        topLevelMenuItem('equalizeRows', t('contextMenu.table.distributeRows')),
+        divider('style-divider'),
+        menuSubmenu('cellStyle', t('contextMenu.table.cellStyle'), [
+            menuItem('copyCellStyle', t('contextMenu.table.copyStyle'), { visible: isSubmenuOpen('cellStyle') }),
+            menuItem('pasteCellStyle', t('contextMenu.table.pasteStyle'), { visible: isSubmenuOpen('cellStyle') }),
+            menuItem('clearCellStyle', t('contextMenu.table.clearStyle'), { visible: isSubmenuOpen('cellStyle') }),
+        ], !tableCell),
+        divider('table-divider'),
+        menuSubmenu('table', t('contextMenu.table.table'), [
+            menuItem('toggleBorder', t('contextMenu.table.toggleBorder'), { visible: isSubmenuOpen('table') }),
+            menuSubmenu('tableArrange', t('contextMenu.table.arrange'), [
+                menuItem('bringToFront', t('contextMenu.bringToFront'), { shortcut: 'Ctrl+Alt+↑', disabled: !hasSelection, visible: isSubmenuOpen('tableArrange') }),
+                menuItem('sendToBack', t('contextMenu.sendToBack'), { shortcut: 'Ctrl+Alt+↓', disabled: !hasSelection, visible: isSubmenuOpen('tableArrange') }),
+            ], !hasSelection, isSubmenuOpen('table'), ['table', 'tableArrange']),
+            menuItem('delete', t('contextMenu.table.deleteTable'), { disabled: !hasSelection, danger: true, visible: isSubmenuOpen('table') }),
+        ]),
+    ];
+    const items = isTableCellMenu ? tableItems : componentItems;
+    return (_jsx(Dropdown, { open: true, trigger: [], placement: "bottomLeft", popupRender: (originNode) => (_jsx("div", { onMouseDown: (event) => event.stopPropagation(), onContextMenu: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: originNode })), menu: {
+            items,
+            openKeys,
+            forceSubMenuRender: true,
+            subMenuOpenDelay: 0,
+            subMenuCloseDelay: 0,
+            onOpenChange: handleOpenChange,
+            onClick: ({ key }) => {
+                actionMap[key]?.();
+            },
+        }, children: _jsx("span", { "aria-hidden": true, style: { position: 'absolute', left: x, top: y, width: 1, height: 1, pointerEvents: 'none' }, onMouseDown: (event) => event.stopPropagation(), onContextMenu: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation() }) }));
+};
+const BandContextMenu = ({ onCopy, onDelete, x, y }) => {
+    const { t } = useDesignerI18n();
+    return (_jsx(Dropdown, { open: true, trigger: [], placement: "bottomLeft", popupRender: (originNode) => (_jsx("div", { onMouseDown: (event) => event.stopPropagation(), onContextMenu: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: originNode })), menu: {
+            items: [
+                menuItem('copy', t('contextMenu.band.copy')),
+                divider('band-divider'),
+                menuItem('delete', t('contextMenu.band.delete'), { danger: true }),
+            ],
+            onClick: ({ key }) => {
+                if (key === 'copy')
+                    onCopy();
+                if (key === 'delete')
+                    onDelete();
+            },
+        }, children: _jsx("span", { "data-testid": "designer-band-context-menu", "aria-hidden": true, style: { position: 'absolute', left: x, top: y, width: 1, height: 1, pointerEvents: 'none' }, onMouseDown: (event) => event.stopPropagation(), onContextMenu: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation() }) }));
+};
+// ---- Band View ----
+const BandView = ({ band, visualY, labelIndex, page, isSelected, pendingBandInsertType, selectedIds, selectedTableCell, fonts, isDragging, isComponentMoveTarget, onOpenContextMenu, onStartBandSort, onUpdateComponent, currentPageId }) => {
+    const { t } = useDesignerI18n();
+    const [editId, setEditId] = useState(null);
+    const [editKind, setEditKind] = useState(null);
+    const [editText, setEditText] = useState('');
+    const [editCell, setEditCell] = useState(null);
+    const richTextEditComponent = editKind === 'richtext' && editId
+        ? band.components.find((component) => component.id === editId && component.type === 'richtext')
+        : null;
+    const finishTextEdit = useCallback((text = editText) => {
+        if (!editId || editKind !== 'text')
+            return;
+        const component = band.components.find(item => item.id === editId);
+        if (!component || component.type !== 'text') {
+            setEditId(null);
+            setEditKind(null);
+            return;
+        }
+        onUpdateComponent(currentPageId, band.id, editId, { text }, { text: component.text });
+        setEditId(null);
+        setEditKind(null);
+    }, [band.components, band.id, currentPageId, editId, editKind, editText, onUpdateComponent]);
+    const finishTableCellEdit = useCallback((text = editText) => {
+        if (!editId || editKind !== 'tableCell' || !editCell)
+            return;
+        const table = band.components.find(item => item.id === editId && item.type === 'table');
+        if (!table) {
+            setEditId(null);
+            setEditKind(null);
+            setEditCell(null);
+            return;
+        }
+        const nextTable = updateTableCellText(table, editCell.startRow, editCell.startColumn, text);
+        onUpdateComponent(currentPageId, band.id, table.id, { rows: nextTable.rows }, { rows: table.rows });
+        setEditId(null);
+        setEditKind(null);
+        setEditCell(null);
+    }, [band.components, band.id, currentPageId, editCell, editId, editKind, editText, onUpdateComponent]);
+    useEffect(() => {
+        if (!editId || editKind !== 'text' || selectedIds.includes(editId))
+            return;
+        finishTextEdit(editText);
+    }, [editId, editKind, editText, finishTextEdit, selectedIds]);
+    useEffect(() => {
+        if (!editId || editKind !== 'tableCell' || !editCell)
+            return;
+        const sameCell = Boolean(selectedIds.includes(editCell.tableId)
+            && selectedTableCell
+            && selectedTableCell.tableId === editCell.tableId
+            && selectedTableCell.startRow === editCell.startRow
+            && selectedTableCell.startColumn === editCell.startColumn);
+        if (!sameCell)
+            finishTableCellEdit(editText);
+    }, [editCell, editId, editKind, editText, finishTableCellEdit, selectedIds, selectedTableCell]);
+    const selectBand = useDesignerStore((state) => state.selectBand);
+    const selectComponents = useDesignerStore((state) => state.selectComponents);
+    const selectTableCell = useDesignerStore((state) => state.selectTableCell);
+    const insertBandAfter = useDesignerStore((state) => state.insertBandAfter);
+    const baseColor = BAND_COLORS[band.type] || '#757575';
+    const baseLabel = BAND_LABEL_KEYS[band.type] ? t(BAND_LABEL_KEYS[band.type]) : band.type;
+    const bandLabel = formatBandTitle(baseLabel, labelIndex, band);
+    const headerHeight = mmToPx(BAND_HEADER_MM);
+    const bodyHeight = mmToPx(band.height);
+    const columnGuide = getBandColumnGuide(page, band);
+    const handleBandMouseDown = (event) => {
+        const target = event.target;
+        if (target.closest('[data-component-id]') ||
+            target.closest('[data-resize-handle]') ||
+            target.closest('[data-band-resize]')) {
+            return;
+        }
+        event.stopPropagation();
+        if (pendingBandInsertType) {
+            insertBandAfter(currentPageId, band.id, pendingBandInsertType);
+            return;
+        }
+        selectComponents([]);
+        selectBand(band.id);
+        if (target.closest('[data-band-sort-handle]')) {
+            event.preventDefault();
+            onStartBandSort(band.id, event);
+        }
+    };
+    return (_jsxs("div", { "data-band-id": band.id, "data-testid": `designer-band-frame-${band.type}`, onContextMenu: (event) => onOpenContextMenu(band.id, event), onMouseDown: handleBandMouseDown, style: {
+            position: 'absolute', left: 0, top: safeCssNumber(mmToPx(visualY)), width: '100%', height: safeCssNumber(headerHeight + bodyHeight),
+            border: isComponentMoveTarget ? '2px solid #1677ff' : isSelected ? '1px solid #4d90fe' : '1px solid rgba(0,0,0,0.12)',
+            boxSizing: 'border-box',
+            backgroundColor: isComponentMoveTarget ? 'rgba(22, 119, 255, 0.08)' : `${baseColor}10`,
+            cursor: pendingBandInsertType ? 'copy' : 'default',
+            opacity: isDragging ? 0.35 : 1,
+        }, children: [_jsxs("div", { style: {
+                    position: 'absolute', left: 0, right: 0, top: 0, height: safeCssNumber(headerHeight),
+                    backgroundColor: `${baseColor}44`,
+                    borderBottom: `1px solid ${baseColor}66`,
+                    display: 'flex', alignItems: 'center',
+                    padding: '0 3px',
+                    fontSize: 12, lineHeight: `${headerHeight}px`, color: '#111',
+                    cursor: pendingBandInsertType ? 'copy' : 'grab', zIndex: 30, pointerEvents: 'auto',
+                    boxSizing: 'border-box',
+                }, "data-band-sort-handle": true, "data-testid": `designer-band-title-${band.type}`, children: [_jsx("span", { children: bandLabel }), _jsx("span", { style: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap' }, children: baseLabel })] }), _jsx(BandResizeHandle, { bandId: band.id }), isComponentMoveTarget ? (_jsxs("div", { "data-testid": "designer-component-move-band-target", style: {
+                    position: 'absolute',
+                    right: 8,
+                    top: headerHeight + 6,
+                    zIndex: 1200,
+                    padding: '3px 8px',
+                    borderRadius: 4,
+                    backgroundColor: '#1677ff',
+                    color: '#fff',
+                    fontSize: 12,
+                    lineHeight: '18px',
+                    boxShadow: '0 4px 10px rgba(0,0,0,0.18)',
+                    pointerEvents: 'none',
+                }, children: ["\u5C06\u79FB\u52A8\u5230\uFF1A", bandLabel] })) : null, _jsxs("div", { "data-testid": `designer-band-body-${band.type}`, style: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: headerHeight,
+                    height: safeCssNumber(bodyHeight),
+                }, children: [columnGuide ? _jsx(BandColumnGuides, { guide: columnGuide, bodyHeight: bodyHeight }) : null, band.components
+                        .slice()
+                        .sort((a, b) => (a.zOrder ?? 0) - (b.zOrder ?? 0))
+                        .map(comp => (_jsx(ComponentView, { component: comp, bandId: band.id, selected: selectedIds.includes(comp.id), editing: editId === comp.id, selectedTableCell: selectedTableCell?.tableId === comp.id ? selectedTableCell : null, editingKind: editId === comp.id ? editKind : null, editText: editText, onStartTextEdit: () => { selectBand(null); selectComponents([comp.id]); setEditId(comp.id); setEditKind('text'); setEditText(comp.text || ''); }, onStartRichTextEdit: () => { setEditId(comp.id); setEditKind('richtext'); }, onFinishEdit: finishTextEdit, editingCell: editId === comp.id && editKind === 'tableCell' ? editCell : null, onStartTableCellEdit: (selection, text) => {
+                            selectBand(null);
+                            selectComponents([selection.tableId]);
+                            selectTableCell(selection);
+                            setEditId(selection.tableId);
+                            setEditKind('tableCell');
+                            setEditCell(selection);
+                            setEditText(text);
+                        }, onFinishTableCellEdit: finishTableCellEdit, onEditTextChange: setEditText }, comp.id)))] }), _jsx(Modal, { open: Boolean(richTextEditComponent), title: t('richText.edit'), width: 820, footer: null, destroyOnHidden: true, onCancel: () => { setEditId(null); setEditKind(null); }, styles: { body: { paddingTop: 8 } }, children: richTextEditComponent ? (_jsx(RichTextInlineEditor, { html: String(richTextEditComponent.html ?? ''), document: richTextEditComponent.document, fonts: fonts, onSave: (value) => {
+                        onUpdateComponent(currentPageId, band.id, richTextEditComponent.id, { html: value.html, document: value.document }, { html: richTextEditComponent.html, document: richTextEditComponent.document });
+                        setEditId(null);
+                        setEditKind(null);
+                    }, onCancel: () => { setEditId(null); setEditKind(null); } })) : null })] }));
+};
+const BandColumnGuides = ({ guide, bodyHeight }) => (_jsxs(_Fragment, { children: [Array.from({ length: guide.count - 1 }, (_, index) => {
+            const leftMm = guide.width + index * (guide.width + guide.gap) + guide.gap / 2;
+            return (_jsx("div", { "data-testid": "designer-band-column-guide", style: {
+                    position: 'absolute',
+                    left: safeCssNumber(mmToPx(leftMm)),
+                    top: 0,
+                    height: safeCssNumber(bodyHeight),
+                    borderLeft: '1px dashed rgba(22, 119, 255, 0.75)',
+                    pointerEvents: 'none',
+                    zIndex: 6,
+                } }, index));
+        }), _jsx("div", { "data-testid": "designer-band-first-column", style: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: safeCssNumber(mmToPx(guide.width)),
+                height: safeCssNumber(bodyHeight),
+                boxShadow: 'inset -1px 0 rgba(22, 119, 255, 0.3)',
+                pointerEvents: 'none',
+                zIndex: 5,
+            } })] }));
+function getBandColumnGuide(page, band) {
+    const width = getFirstColumnDesignWidth(page, band);
+    const columns = getBandColumnSettings(page, band);
+    if (!width || !columns || columns.count <= 1) {
+        return undefined;
+    }
+    return {
+        count: columns.count,
+        gap: columns.gap,
+        width,
+    };
+}
+function clampComponentXToFirstColumn(page, band, x, componentWidth) {
+    const maxRight = getFirstColumnDesignWidth(page, band);
+    if (maxRight === undefined) {
+        return Math.max(0, Math.round(x * 10) / 10);
+    }
+    const maxX = Math.max(0, maxRight - componentWidth);
+    return Math.max(0, Math.min(maxX, Math.round(x * 10) / 10));
+}
+function getFirstColumnDesignWidth(page, band) {
+    if (!page || !band) {
+        return undefined;
+    }
+    const settings = getBandColumnSettings(page, band);
+    if (!settings || settings.count <= 1) {
+        return undefined;
+    }
+    const printableWidth = page.width - page.margins.left - page.margins.right;
+    return Math.max(1, (printableWidth - settings.gap * (settings.count - 1)) / settings.count);
+}
+function getBandColumnSettings(page, band) {
+    if (!page || !band) {
+        return undefined;
+    }
+    const sourceBand = resolveColumnSourceBand(page, band);
+    const count = Math.max(1, Math.floor(sourceBand?.dataBand?.columns?.count ?? 1));
+    if (count <= 1) {
+        return undefined;
+    }
+    return {
+        count,
+        gap: Math.max(0, sourceBand?.dataBand?.columns?.gap ?? 0),
+    };
+}
+function resolveColumnSourceBand(page, band) {
+    if (band.type === 'data' && (band.dataBand?.columns?.count ?? 1) > 1) {
+        return band;
+    }
+    const bandIndex = page.bands.findIndex(item => item.id === band.id);
+    if (bandIndex < 0) {
+        return undefined;
+    }
+    if (band.type === 'columnHeader') {
+        return page.bands.slice(bandIndex + 1).find(item => item.type === 'data' && (item.dataBand?.columns?.count ?? 1) > 1);
+    }
+    if (band.type === 'columnFooter') {
+        return [...page.bands.slice(0, bandIndex)].reverse().find(item => item.type === 'data' && (item.dataBand?.columns?.count ?? 1) > 1);
+    }
+    return undefined;
+}
+const BandDragPreview = ({ band, labelIndex, top }) => {
+    const { t } = useDesignerI18n();
+    const baseColor = BAND_COLORS[band.type] || '#757575';
+    const baseLabel = BAND_LABEL_KEYS[band.type] ? t(BAND_LABEL_KEYS[band.type]) : band.type;
+    const bandLabel = formatBandTitle(baseLabel, labelIndex, band);
+    const headerHeight = mmToPx(BAND_HEADER_MM);
+    const bodyHeight = mmToPx(band.height);
+    return (_jsx("div", { "data-testid": "designer-band-drag-preview", style: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: safeCssNumber(top),
+            height: safeCssNumber(headerHeight + bodyHeight),
+            border: `1px solid ${baseColor}`,
+            backgroundColor: `${baseColor}18`,
+            boxShadow: '0 8px 18px rgba(0,0,0,0.22)',
+            boxSizing: 'border-box',
+            opacity: 0.86,
+            pointerEvents: 'none',
+            zIndex: 9998,
+        }, children: _jsx("div", { style: {
+                height: safeCssNumber(headerHeight),
+                backgroundColor: `${baseColor}66`,
+                borderBottom: `1px solid ${baseColor}88`,
+                boxSizing: 'border-box',
+                color: '#111',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 12,
+                lineHeight: `${headerHeight}px`,
+                padding: '0 3px',
+            }, children: bandLabel }) }));
+};
+function formatBandTitle(baseLabel, labelIndex, band) {
+    const bandLabel = `${baseLabel}${labelIndex}`;
+    if (band.type !== 'data' && band.type !== 'hierarchicalData') {
+        return bandLabel;
+    }
+    const dataSourceId = band.dataBand?.dataSourceId ?? band.dataSource;
+    return dataSourceId ? `${bandLabel}; 数据源: ${dataSourceId}` : bandLabel;
+}
+const PageWatermarkOverlay = ({ watermark, zIndex }) => {
+    if (!watermark?.enabled || !watermark.text)
+        return null;
+    return (_jsx("div", { "data-testid": "designer-page-watermark", style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            justifyContent: horizontalAlignToFlex(watermark.horizontalAlign),
+            alignItems: verticalAlignToFlex(watermark.verticalAlign),
+            color: watermark.color,
+            opacity: watermark.opacity,
+            fontFamily: watermark.fontFamily,
+            fontSize: watermark.fontSize * MM_TO_PX,
+            fontWeight: 600,
+            lineHeight: 1,
+            whiteSpace: 'pre-wrap',
+            textAlign: watermark.horizontalAlign,
+            pointerEvents: 'none',
+            userSelect: 'none',
+            zIndex,
+        }, children: _jsx("span", { style: {
+                display: 'inline-block',
+                transform: `rotate(${watermark.angle}deg)`,
+                transformOrigin: 'center',
+            }, children: watermark.text }) }));
+};
+const PageBorderOverlay = ({ pageBorder }) => {
+    if (!pageBorder?.enabled || pageBorder.style === 'none' || pageBorder.width <= 0)
+        return null;
+    const border = `${pageBorder.width}mm ${pageBorder.style} ${pageBorder.color}`;
+    return (_jsx("div", { "data-testid": "designer-page-border", style: {
+            position: 'absolute',
+            inset: `${pageBorder.offset ?? 0}mm`,
+            boxSizing: 'border-box',
+            borderTop: pageBorder.sides.top ? border : 'none',
+            borderRight: pageBorder.sides.right ? border : 'none',
+            borderBottom: pageBorder.sides.bottom ? border : 'none',
+            borderLeft: pageBorder.sides.left ? border : 'none',
+            pointerEvents: 'none',
+            zIndex: 25,
+        } }));
+};
+function horizontalAlignToFlex(value) {
+    if (value === 'left')
+        return 'flex-start';
+    if (value === 'right')
+        return 'flex-end';
+    return 'center';
+}
+// ---- Band Resize Handle ----
+const BandResizeHandle = ({ bandId }) => (_jsx("div", { "data-band-resize": true, "data-band-id": bandId, style: {
+        position: 'absolute', left: 0, right: 0, bottom: -4, height: 8,
+        cursor: 'ns-resize', backgroundColor: 'transparent', zIndex: 300,
+    }, onMouseEnter: (e) => { e.target.style.backgroundColor = '#1890ff44'; }, onMouseLeave: (e) => { e.target.style.backgroundColor = 'transparent'; } }));
+const ComponentView = React.memo(function ComponentView({ component, bandId, selected, editing, editText, selectedTableCell, editingKind, editingCell, onStartTextEdit, onStartRichTextEdit, onStartTableCellEdit, onFinishEdit, onFinishTableCellEdit, onEditTextChange, }) {
+    const { t } = useDesignerI18n();
+    const inputRef = useRef(null);
+    React.useEffect(() => { if (editing && editingKind === 'text')
+        setTimeout(() => inputRef.current?.focus(), 0); }, [editing, editingKind]);
+    const x = safeCssNumber(mmToPx(component.x));
+    const y = safeCssNumber(mmToPx(component.y));
+    const w = safeCssNumber(mmToPx(component.width));
+    const h = safeCssNumber(mmToPx(component.height));
+    return (_jsxs("div", { style: {
+            position: 'absolute', left: x, top: y, width: w, height: h,
+            outline: selected ? '2px solid #1890ff' : 'none',
+            borderRadius: 2,
+        }, children: [_jsx("div", { "data-component-id": component.id, onDoubleClick: (e) => {
+                    e.stopPropagation();
+                    if (component.type === 'text')
+                        onStartTextEdit();
+                    if (component.type === 'richtext')
+                        onStartRichTextEdit();
+                }, onContextMenu: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, style: {
+                    position: 'absolute', inset: 0,
+                    boxSizing: 'border-box', cursor: editing ? 'text' : 'grab',
+                    overflow: 'hidden',
+                    padding: 0,
+                    backgroundColor: selected ? 'rgba(24,144,255,0.06)' : 'transparent',
+                    zIndex: selected ? 100 : 10,
+                    ...getCompStyle(component),
+                }, children: editing && editingKind === 'text' ? (_jsx("input", { ref: inputRef, value: editText, onChange: (e) => onEditTextChange(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter')
+                        onFinishEdit(editText); if (e.key === 'Escape')
+                        onFinishEdit(editText); }, onBlur: () => onFinishEdit(editText), onPointerDown: (e) => e.stopPropagation(), style: { width: '100%', height: '100%', border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit', fontSize: 'inherit', color: 'inherit' } })) : getCompContent(component, bandId, selectedTableCell, {
+                    imagePlaceholder: t('canvas.imagePlaceholder'),
+                    subreportPlaceholder: t('canvas.subreportPlaceholder'),
+                    localTemplatePlaceholder: t('canvas.localTemplatePlaceholder'),
+                }, {
+                    editingCell,
+                    editText,
+                    onStartTableCellEdit,
+                    onEditTextChange,
+                    onFinishTableCellEdit,
+                }) }), _jsx(ComponentBorderOverlay, { component: component, zIndex: 150 }), selected && !editing && RESIZE_HANDLES.map(handle => (_jsx("div", { "data-resize-handle": "", "data-comp-id": component.id, "data-band-id": bandId, "data-handle-name": handle, style: {
+                    position: 'absolute', ...getHandlePos(handle, w, h),
+                    width: HANDLE_SIZE, height: HANDLE_SIZE,
+                    backgroundColor: '#1890ff', border: '1.5px solid #fff', borderRadius: 1,
+                    zIndex: 200, cursor: getCursorForHandle(handle),
+                } }, handle))), selected && !editing && component.type === 'richtext' ? (_jsx(Tooltip, { title: t('richText.edit'), children: _jsx(Button, { "aria-label": t('richText.edit'), "data-testid": "designer-richtext-edit-action", size: "small", type: "primary", shape: "circle", icon: _jsx(EditOutlined, {}), onMouseDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onStartRichTextEdit();
+                    }, style: {
+                        position: 'absolute',
+                        right: -12,
+                        top: -12,
+                        width: 24,
+                        height: 24,
+                        minWidth: 24,
+                        zIndex: 240,
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.18)',
+                    } }) })) : null] }));
+}, areComponentViewPropsEqual);
+function areComponentViewPropsEqual(previous, next) {
+    return previous.component === next.component
+        && previous.bandId === next.bandId
+        && previous.selected === next.selected
+        && previous.editing === next.editing
+        && previous.editText === next.editText
+        && previous.selectedTableCell === next.selectedTableCell
+        && previous.editingKind === next.editingKind
+        && previous.editingCell === next.editingCell;
+}
+const ComponentBorderOverlay = ({ component, zIndex }) => {
+    const style = componentBorderToCss(component);
+    if (!style)
+        return null;
+    return (_jsx("div", { "data-component-border-id": component.id, style: {
+            position: 'absolute',
+            inset: 0,
+            boxSizing: 'border-box',
+            pointerEvents: 'none',
+            zIndex,
+            ...style,
+        } }));
+};
+// ---- Helpers ----
+function getCompStyle(comp) {
+    if (comp.type === 'panel') {
+        const pad = comp.padding;
+        return {
+            backgroundColor: comp.backgroundColor || 'transparent',
+            ...(pad ? {
+                paddingTop: `${pad.top * MM_TO_PX}px`,
+                paddingRight: `${pad.right * MM_TO_PX}px`,
+                paddingBottom: `${pad.bottom * MM_TO_PX}px`,
+                paddingLeft: `${pad.left * MM_TO_PX}px`,
+            } : {}),
+        };
+    }
+    if (comp.type === 'text') {
+        const t = comp;
+        const decorations = [];
+        if (t.font?.underline)
+            decorations.push('underline');
+        if (t.font?.strikethrough)
+            decorations.push('line-through');
+        const pad = comp.padding;
+        return {
+            fontFamily: t.font?.family || 'Arial, sans-serif',
+            fontSize: t.font?.size ? `${t.font.size * 1.33}px` : '16px',
+            fontWeight: t.font?.bold ? 'bold' : 'normal',
+            fontStyle: t.font?.italic ? 'italic' : 'normal',
+            color: t.font?.color || '#000',
+            textAlign: t.textAlign || 'left',
+            textDecoration: decorations.length > 0 ? decorations.join(' ') : 'none',
+            backgroundColor: comp.backgroundColor || 'transparent',
+            ...(pad ? {
+                paddingTop: `${pad.top * MM_TO_PX}px`,
+                paddingRight: `${pad.right * MM_TO_PX}px`,
+                paddingBottom: `${pad.bottom * MM_TO_PX}px`,
+                paddingLeft: `${pad.left * MM_TO_PX}px`,
+            } : {}),
+        };
+    }
+    if (comp.type === 'chart') {
+        const pad = comp.padding;
+        return {
+            backgroundColor: comp.backgroundColor || '#ffffff',
+            ...(pad ? {
+                paddingTop: `${pad.top * MM_TO_PX}px`,
+                paddingRight: `${pad.right * MM_TO_PX}px`,
+                paddingBottom: `${pad.bottom * MM_TO_PX}px`,
+                paddingLeft: `${pad.left * MM_TO_PX}px`,
+            } : {}),
+        };
+    }
+    return {};
+}
+function componentBorderToCss(component) {
+    const border = component.border;
+    if (!hasVisibleBorder(border))
+        return null;
+    return borderToCss(border);
+}
+function hasVisibleBorder(border) {
+    if (!border || border.style === 'none' || !border.width)
+        return false;
+    return Boolean(border.sides?.top || border.sides?.right || border.sides?.bottom || border.sides?.left);
+}
+function borderToCss(border) {
+    if (!border || border.style === 'none')
+        return {};
+    const width = border.width ?? 0;
+    const style = border.style ?? 'solid';
+    const color = border.color ?? '#000000';
+    return {
+        borderTop: border.sides?.top ? `${width}mm ${style} ${color}` : 'none',
+        borderRight: border.sides?.right ? `${width}mm ${style} ${color}` : 'none',
+        borderBottom: border.sides?.bottom ? `${width}mm ${style} ${color}` : 'none',
+        borderLeft: border.sides?.left ? `${width}mm ${style} ${color}` : 'none',
+    };
+}
+function getFontStyle(font) {
+    if (!font)
+        return {};
+    return {
+        fontFamily: font.family || 'Arial',
+        fontSize: font.size ? `${font.size * 1.33}px` : '16px',
+        fontWeight: font.bold ? 'bold' : 'normal',
+        fontStyle: font.italic ? 'italic' : 'normal',
+        color: font.color || '#000',
+    };
+}
+function getCompContent(comp, bandId, selectedTableCell, labels, tableEditing) {
+    switch (comp.type) {
+        case 'text':
+            return _jsx("div", { style: { width: '100%', height: '100%', overflow: 'hidden', lineHeight: 1.2 }, children: comp.text || '' });
+        case 'image': {
+            const src = comp.src || '';
+            const fitMode = comp.fitMode === 'stretch' || comp.fitMode === 'fill'
+                ? 'fill'
+                : comp.fitMode || 'contain';
+            return src
+                ? _jsx("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: fitMode }, draggable: false })
+                : _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#ccc', fontSize: 10, border: '1px dashed #ddd' }, children: labels.imagePlaceholder });
+        }
+        case 'barcode': {
+            const t = comp;
+            const value = String(t.value || '');
+            const symbol = renderCodeSymbolSvg({ type: 'barcode', value, format: t.format || 'CODE128', foregroundColor: t.foregroundColor });
+            return (_jsxs("div", { "data-testid": "designer-component-barcode-content", style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'stretch',
+                    overflow: 'hidden',
+                    backgroundColor: '#fff',
+                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                            flex: 1,
+                            minHeight: 0,
+                        }, dangerouslySetInnerHTML: { __html: symbol.svg } }), t.showText ? (_jsx("div", { style: { fontSize: 9, lineHeight: '11px', textAlign: 'center', color: '#111', fontFamily: 'monospace' }, children: value })) : null] }));
+        }
+        case 'qrcode': {
+            const t = comp;
+            const symbol = renderCodeSymbolSvg({ type: 'qrcode', value: String(t.value || ''), format: t.format || 'QR_CODE', foregroundColor: t.foregroundColor });
+            return (_jsx("div", { "data-testid": "designer-component-qrcode-content", style: { width: '100%', height: '100%', overflow: 'hidden', backgroundColor: '#fff' }, dangerouslySetInnerHTML: { __html: symbol.svg } }));
+        }
+        case 'checkbox': {
+            const t = comp;
+            const checked = readDesignBoolean(t.checked);
+            return (_jsxs("div", { "data-testid": "designer-component-checkbox-content", style: { display: 'flex', alignItems: 'center', height: '100%', gap: 4, overflow: 'hidden' }, children: [_jsx("span", { style: { width: 13, height: 13, border: '1px solid #333', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, lineHeight: 1, flex: '0 0 auto' }, children: checked ? '✓' : '' }), t.label ? _jsx("span", { style: { fontSize: 11, color: '#111', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: t.label }) : null] }));
+        }
+        case 'table':
+            return _jsx(TablePreview, { table: comp, bandId: bandId, selectedTableCell: selectedTableCell, editing: tableEditing });
+        case 'chart':
+            return _jsx(DesignerChartPreview, { chart: comp });
+        case 'richtext':
+            return (_jsx("div", { "data-testid": "designer-component-richtext-content", style: { width: '100%', height: '100%', overflow: 'hidden' }, dangerouslySetInnerHTML: { __html: sanitizeRichHtml(comp.html || '') } }));
+        case 'subreport':
+            return (_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#64748b', fontSize: 10, border: '1px dashed #cbd5e1', backgroundColor: '#f8fafc' }, children: `${labels.subreportPlaceholder}: ${comp.templateUrl || labels.localTemplatePlaceholder}` }));
+        case 'panel':
+            return _jsx(PanelChildrenPreview, { panel: comp });
+        case 'line': {
+            const t = comp;
+            const lw = (t.lineWidth ?? 0.2) * MM_TO_PX;
+            const sx = (t.startX ?? 0) * MM_TO_PX;
+            const sy = (t.startY ?? 0) * MM_TO_PX;
+            const ex = (t.endX ?? comp.width) * MM_TO_PX;
+            const ey = (t.endY ?? comp.height) * MM_TO_PX;
+            const dash = t.lineStyle === 'dashed' ? '6,4' : t.lineStyle === 'dotted' ? '2,2' : undefined;
+            return (_jsx("svg", { width: "100%", height: "100%", style: { overflow: 'visible' }, children: _jsx("line", { x1: sx, y1: sy, x2: ex, y2: ey, stroke: t.lineColor || '#000', strokeWidth: lw, strokeDasharray: dash, strokeLinecap: "round" }) }));
+        }
+        case 'shape': {
+            const t = comp;
+            const bw = (t.borderWidth ?? 0) * MM_TO_PX;
+            const bc = t.borderColor || '#000';
+            const fc = t.fillColor || 'transparent';
+            const bs = t.borderStyle || 'solid';
+            const dash = bs === 'dashed' ? '6,4' : bs === 'dotted' ? '2,2' : undefined;
+            const wp = comp.width * MM_TO_PX;
+            const hp = comp.height * MM_TO_PX;
+            if (t.shapeType === 'rectangle') {
+                return _jsx("svg", { width: "100%", height: "100%", children: _jsx("rect", { x: bw / 2, y: bw / 2, width: wp - bw, height: hp - bw, fill: fc, stroke: bc, strokeWidth: bw, strokeDasharray: dash }) });
+            }
+            else if (t.shapeType === 'ellipse') {
+                return _jsx("svg", { width: "100%", height: "100%", children: _jsx("ellipse", { cx: wp / 2, cy: hp / 2, rx: wp / 2 - bw / 2, ry: hp / 2 - bw / 2, fill: fc, stroke: bc, strokeWidth: bw, strokeDasharray: dash }) });
+            }
+            else if (t.shapeType === 'roundRect') {
+                const r = Math.min(wp, hp) * 0.15;
+                return _jsx("svg", { width: "100%", height: "100%", children: _jsx("rect", { x: bw / 2, y: bw / 2, width: wp - bw, height: hp - bw, rx: r, ry: r, fill: fc, stroke: bc, strokeWidth: bw, strokeDasharray: dash }) });
+            }
+            else if (t.shapeType === 'triangle') {
+                return _jsx("svg", { width: "100%", height: "100%", children: _jsx("polygon", { points: `${wp / 2},${bw} ${wp - bw},${hp - bw} ${bw},${hp - bw}`, fill: fc, stroke: bc, strokeWidth: bw, strokeDasharray: dash }) });
+            }
+            return null;
+        }
+        case 'pagenumber': {
+            const t = comp;
+            return _jsx("div", { "data-testid": "designer-component-pagenumber-content", style: { ...textLikePreviewStyle(t, 'center') }, children: designPageNumberText(t.format) });
+        }
+        case 'datetime': {
+            const t = comp;
+            return _jsx("div", { "data-testid": "designer-component-datetime-content", style: { ...textLikePreviewStyle(t, 'left') }, children: formatDesignDateTime(new Date(), t.format || 'yyyy-MM-dd') });
+        }
+        default:
+            return '';
+    }
+}
+function getBandReorderTargetIndex(bandLayouts, draggedBandId, pointerContentY) {
+    const withoutDragged = bandLayouts.filter(item => item.band.id !== draggedBandId);
+    let targetIndex = 0;
+    for (const item of withoutDragged) {
+        const centerY = mmToPx(item.visualY + (BAND_HEADER_MM + item.band.height) / 2);
+        if (pointerContentY > centerY) {
+            targetIndex += 1;
+        }
+    }
+    return targetIndex;
+}
+function getBandReorderLineTop(bandLayouts, draggedBandId, targetIndex) {
+    const withoutDragged = bandLayouts.filter(item => item.band.id !== draggedBandId);
+    if (withoutDragged.length === 0 || targetIndex <= 0) {
+        return 0;
+    }
+    const previous = withoutDragged[Math.min(targetIndex - 1, withoutDragged.length - 1)];
+    return mmToPx(previous.visualY + BAND_HEADER_MM + previous.band.height);
+}
+function textLikePreviewStyle(component, fallbackAlign) {
+    return {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        lineHeight: 1.2,
+        textAlign: component.textAlign || fallbackAlign,
+        display: 'flex',
+        alignItems: verticalAlignToFlex(component.verticalAlign),
+        ...getFontStyle(component.font),
+    };
+}
+function verticalAlignToFlex(value) {
+    if (value === 'top')
+        return 'flex-start';
+    if (value === 'bottom')
+        return 'flex-end';
+    return 'center';
+}
+const PanelChildrenPreview = ({ panel }) => {
+    const children = (panel.components ?? [])
+        .slice()
+        .sort((a, b) => (a.zOrder ?? 0) - (b.zOrder ?? 0));
+    return (_jsx("div", { "data-testid": "designer-panel-content", style: {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+        }, children: children.map(child => (_jsx(PanelChildPreview, { component: child }, child.id))) }));
+};
+const DesignerChartPreview = ({ chart }) => {
+    const palette = chart.theme?.customPalette?.length
+        ? chart.theme.customPalette
+        : ['#2f6fed', '#16a34a', '#f59e0b', '#ef4444', '#8b5cf6'];
+    const points = chart.data?.length ? chart.data : createFallbackChartPoints(chart);
+    const values = points.map(point => Number(point.value ?? point.y ?? 0)).filter(Number.isFinite);
+    const max = Math.max(1, ...values.map(value => Math.abs(value)));
+    const title = chart.title?.text;
+    const ct = chart.chartType;
+    return (_jsxs("div", { "data-testid": "designer-component-chart-content", style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            background: chart.backgroundColor || '#fff',
+        }, children: [title ? (_jsx("div", { style: { flex: '0 0 auto', textAlign: 'center', fontSize: 10, color: '#1f2937', lineHeight: '14px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: title })) : null, _jsx("div", { style: { flex: 1, minHeight: 0 }, children: (ct === 'pie' || ct === 'donut' || ct === 'rose')
+                    ? _jsx(PieChartPreview, { points: points, palette: palette, donut: ct === 'donut', rose: ct === 'rose' })
+                    : ct === 'radar'
+                        ? _jsx(RadarChartPreview, { points: points, palette: palette, max: max })
+                        : ct === 'funnel'
+                            ? _jsx(FunnelChartPreview, { points: points, palette: palette, max: max })
+                            : ct === 'heatmap'
+                                ? _jsx(HeatmapChartPreview, { points: points, palette: palette, max: max })
+                                : ct === 'treeMap' || ct === 'sunburst' || ct === 'circlePacking'
+                                    ? _jsx(TreeMapChartPreview, { points: points, palette: palette, max: max, type: ct })
+                                    : _jsx(CartesianChartPreview, { chart: chart, points: points, palette: palette, max: max }) })] }));
+};
+function createFallbackChartPoints(chart) {
+    const categories = chart.chartType === 'scatter' ? ['A', 'B', 'C', 'D'] : ['Q1', 'Q2', 'Q3', 'Q4'];
+    const values = chart.chartType === 'scatter' ? [22, 46, 33, 62] : [38, 64, 48, 72];
+    return categories.map((category, index) => ({
+        category,
+        value: values[index],
+        x: chart.chartType === 'scatter' ? index + 1 : null,
+        y: values[index],
+        label: category,
+        raw: {},
+    }));
+}
+const PieChartPreview = ({ donut, palette, points, rose }) => {
+    const values = points.map(point => Math.max(0, Number(point.value ?? 0))).filter(Number.isFinite);
+    const total = values.reduce((sum, value) => sum + value, 0) || 1;
+    let angle = 0;
+    const stops = values.map((value, index) => {
+        const start = angle;
+        angle += (value / total) * 360;
+        return `${palette[index % palette.length]} ${start}deg ${angle}deg`;
+    });
+    if (rose) {
+        // Rose chart: sectors with varying radius
+        const maxR = 100;
+        let roseAngle = 0;
+        const sectors = values.map((value, index) => {
+            const sweep = (360 / values.length);
+            const startA = roseAngle;
+            roseAngle += sweep;
+            const r = (value / (Math.max(...values) || 1)) * maxR;
+            return { startA, sweep, r, color: palette[index % palette.length] };
+        });
+        return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsx("svg", { viewBox: "-110 -110 220 220", width: "70%", height: "70%", children: sectors.map((s, i) => {
+                    const midA = ((s.startA + s.sweep / 2) * Math.PI) / 180;
+                    const x1 = Math.cos(((s.startA) * Math.PI) / 180) * s.r;
+                    const y1 = Math.sin(((s.startA) * Math.PI) / 180) * s.r;
+                    const x2 = Math.cos(((s.startA + s.sweep) * Math.PI) / 180) * s.r;
+                    const y2 = Math.sin(((s.startA + s.sweep) * Math.PI) / 180) * s.r;
+                    return _jsx("path", { d: `M0,0 L${x1},${y1} A${s.r},${s.r} 0 0,1 ${x2},${y2} Z`, fill: s.color, opacity: 0.8, stroke: "#fff", strokeWidth: 1 }, i);
+                }) }) }));
+    }
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsx("div", { style: {
+                width: '70%',
+                aspectRatio: '1 / 1',
+                borderRadius: '50%',
+                background: `conic-gradient(${stops.join(', ')})`,
+                position: 'relative',
+                boxShadow: 'inset 0 0 0 1px rgba(15,23,42,0.08)',
+            }, children: donut ? (_jsx("div", { style: { position: 'absolute', inset: '30%', borderRadius: '50%', background: '#fff' } })) : null }) }));
+};
+const CartesianChartPreview = ({ chart, max, palette, points }) => {
+    const width = 180;
+    const height = 92;
+    const left = 18;
+    const right = 8;
+    const top = 8;
+    const bottom = 18;
+    const plotWidth = width - left - right;
+    const plotHeight = height - top - bottom;
+    const xFor = (index) => left + (points.length <= 1 ? plotWidth / 2 : (index / (points.length - 1)) * plotWidth);
+    const yFor = (value) => top + plotHeight - ((Number(value ?? 0) / max) * plotHeight);
+    const linePoints = points.map((point, index) => `${xFor(index)},${yFor(point.value)}`).join(' ');
+    const areaPoints = `${left},${top + plotHeight} ${linePoints} ${left + plotWidth},${top + plotHeight}`;
+    const barWidth = Math.max(4, plotWidth / Math.max(1, points.length) * 0.58);
+    if (chart.chartType === 'scatter') {
+        return (_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(ChartAxes, { left: left, top: top, plotWidth: plotWidth, plotHeight: plotHeight, showGrid: chart.axes?.x?.gridVisible ?? chart.axes?.y?.gridVisible ?? true }), points.map((point, index) => (_jsx("circle", { cx: xFor(index), cy: yFor(point.value), r: 3, fill: palette[index % palette.length] }, index)))] }));
+    }
+    if (chart.chartType === 'bar' || chart.chartType === 'barParallel' || chart.chartType === 'barPercent') {
+        const rowHeight = plotHeight / Math.max(1, points.length);
+        return (_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(ChartAxes, { left: left, top: top, plotWidth: plotWidth, plotHeight: plotHeight, showGrid: chart.axes?.x?.gridVisible ?? chart.axes?.y?.gridVisible ?? true }), points.map((point, index) => (_jsx("rect", { x: left, y: top + index * rowHeight + rowHeight * 0.22, width: (Number(point.value ?? 0) / max) * plotWidth, height: Math.max(3, rowHeight * 0.56), fill: palette[index % palette.length], rx: 1 }, index)))] }));
+    }
+    if (chart.chartType === 'column' || chart.chartType === 'columnParallel' || chart.chartType === 'columnPercent') {
+        return (_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(ChartAxes, { left: left, top: top, plotWidth: plotWidth, plotHeight: plotHeight, showGrid: chart.axes?.x?.gridVisible ?? chart.axes?.y?.gridVisible ?? true }), points.map((point, index) => {
+                    const barHeight = (Number(point.value ?? 0) / max) * plotHeight;
+                    return (_jsx("rect", { x: xFor(index) - barWidth / 2, y: top + plotHeight - barHeight, width: barWidth, height: barHeight, fill: palette[index % palette.length], rx: 1 }, index));
+                })] }));
+    }
+    return (_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(ChartAxes, { left: left, top: top, plotWidth: plotWidth, plotHeight: plotHeight, showGrid: chart.axes?.x?.gridVisible ?? chart.axes?.y?.gridVisible ?? true }), chart.chartType === 'area' ? _jsx("polygon", { points: areaPoints, fill: palette[0], opacity: 0.22 }) : null, _jsx("polyline", { points: linePoints, fill: "none", stroke: palette[0], strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }), points.map((point, index) => _jsx("circle", { cx: xFor(index), cy: yFor(point.value), r: 2.2, fill: palette[index % palette.length] }, index))] }));
+};
+const ChartAxes = ({ left, plotHeight, plotWidth, showGrid, top }) => (_jsxs(_Fragment, { children: [showGrid ? [0.25, 0.5, 0.75].map(ratio => (_jsx("line", { x1: left, y1: top + plotHeight * ratio, x2: left + plotWidth, y2: top + plotHeight * ratio, stroke: "#dbe3ef", strokeWidth: 0.7 }, ratio))) : null, _jsx("line", { x1: left, y1: top, x2: left, y2: top + plotHeight, stroke: "#94a3b8", strokeWidth: 1 }), _jsx("line", { x1: left, y1: top + plotHeight, x2: left + plotWidth, y2: top + plotHeight, stroke: "#94a3b8", strokeWidth: 1 })] }));
+const RadarChartPreview = ({ points, palette, max }) => {
+    const cx = 100, cy = 100, r = 80;
+    const n = Math.max(3, points.length);
+    const axisAngles = Array.from({ length: n }, (_, i) => (i * 2 * Math.PI) / n - Math.PI / 2);
+    const gridLevels = [0.33, 0.66, 1.0];
+    const dataR = points.map(p => (Number(p.value ?? 0) / max) * r);
+    const dataPath = dataR.map((dr, i) => {
+        const a = axisAngles[i % n];
+        return `${cx + Math.cos(a) * dr},${cy + Math.sin(a) * dr}`;
+    }).join(' ');
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsxs("svg", { viewBox: "0 0 200 200", width: "70%", height: "70%", children: [gridLevels.map(level => (_jsx("polygon", { points: axisAngles.map(a => `${cx + Math.cos(a) * r * level},${cy + Math.sin(a) * r * level}`).join(' '), fill: "none", stroke: "#dbe3ef", strokeWidth: 0.8 }, level))), axisAngles.map((a, i) => (_jsx("line", { x1: cx, y1: cy, x2: cx + Math.cos(a) * r, y2: cy + Math.sin(a) * r, stroke: "#cbd5e1", strokeWidth: 0.6 }, i))), _jsx("polygon", { points: dataPath, fill: palette[0], fillOpacity: 0.25, stroke: palette[0], strokeWidth: 1.5 }), dataR.map((dr, i) => {
+                    const a = axisAngles[i % n];
+                    return _jsx("circle", { cx: cx + Math.cos(a) * dr, cy: cy + Math.sin(a) * dr, r: 2.5, fill: palette[i % palette.length] }, i);
+                })] }) }));
+};
+const FunnelChartPreview = ({ points, palette, max }) => {
+    const w = 180, h = 100;
+    const gap = 3;
+    const rowH = Math.max(6, (h - gap * (points.length - 1)) / Math.max(1, points.length));
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsx("svg", { viewBox: `0 0 ${w} ${h}`, width: "90%", height: "90%", children: points.map((point, i) => {
+                const ratio = Math.max(0.15, Number(point.value ?? 0) / max);
+                const barW = ratio * (w * 0.85);
+                const x = (w - barW) / 2;
+                const y = i * (rowH + gap);
+                return _jsx("rect", { x: x, y: y, width: barW, height: rowH, rx: 2, fill: palette[i % palette.length], opacity: 0.85 }, i);
+            }) }) }));
+};
+const HeatmapChartPreview = ({ points, palette }) => {
+    const cols = Math.min(4, points.length);
+    const rows = Math.ceil(points.length / cols);
+    const cellW = 36, cellH = 20, gap = 2;
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsx("svg", { viewBox: `0 0 ${cols * (cellW + gap)} ${rows * (cellH + gap)}`, width: "85%", height: "85%", children: points.map((point, i) => {
+                const col = i % cols;
+                const row = Math.floor(i / cols);
+                const intensity = Math.max(0.15, Number(point.value ?? 0) / (Math.max(...points.map(p => Number(p.value ?? 0))) || 1));
+                return _jsx("rect", { x: col * (cellW + gap), y: row * (cellH + gap), width: cellW, height: cellH, rx: 2, fill: palette[0], opacity: intensity }, i);
+            }) }) }));
+};
+const TreeMapChartPreview = ({ points, palette, max, type }) => {
+    if (type === 'sunburst') {
+        // Concentric rings
+        return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsxs("svg", { viewBox: "-110 -110 220 220", width: "70%", height: "70%", children: [_jsx("circle", { cx: 0, cy: 0, r: 90, fill: "#f1f5f9", stroke: "#e2e8f0", strokeWidth: 1 }), _jsx("circle", { cx: 0, cy: 0, r: 55, fill: "#fff", stroke: "#e2e8f0", strokeWidth: 1 }), _jsx("circle", { cx: 0, cy: 0, r: 25, fill: palette[0], opacity: 0.3 }), points.slice(0, 5).map((_, i) => {
+                        const a1 = (i / 5) * 2 * Math.PI - Math.PI / 2;
+                        const a2 = ((i + 1) / 5) * 2 * Math.PI - Math.PI / 2;
+                        const x1 = Math.cos(a1) * 90, y1 = Math.sin(a1) * 90;
+                        const x2 = Math.cos(a2) * 90, y2 = Math.sin(a2) * 90;
+                        const ix1 = Math.cos(a1) * 55, iy1 = Math.sin(a1) * 55;
+                        const ix2 = Math.cos(a2) * 55, iy2 = Math.sin(a2) * 55;
+                        return _jsx("path", { d: `M${ix1},${iy1} L${x1},${y1} A90,90 0 0,1 ${x2},${y2} L${ix2},${iy2} A55,55 0 0,0 ${ix1},${iy1}`, fill: palette[i % palette.length], opacity: 0.6, stroke: "#fff", strokeWidth: 1 }, i);
+                    })] }) }));
+    }
+    if (type === 'circlePacking') {
+        return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsxs("svg", { viewBox: "0 0 200 200", width: "70%", height: "70%", children: [_jsx("circle", { cx: 100, cy: 100, r: 90, fill: "#f8fafc", stroke: "#e2e8f0", strokeWidth: 1 }), points.slice(0, 5).map((p, i) => {
+                        const r = Math.max(8, (Number(p.value ?? 0) / max) * 35);
+                        const a = (i / 5) * 2 * Math.PI;
+                        const cx = 100 + Math.cos(a) * 45;
+                        const cy = 100 + Math.sin(a) * 45;
+                        return _jsx("circle", { cx: cx, cy: cy, r: r, fill: palette[i % palette.length], opacity: 0.6, stroke: "#fff", strokeWidth: 1 }, i);
+                    })] }) }));
+    }
+    // TreeMap: nested rectangles
+    const w = 180, h = 100;
+    const sorted = [...points].sort((a, b) => Number(b.value ?? 0) - Number(a.value ?? 0));
+    const totalVal = sorted.reduce((s, p) => s + Math.max(0, Number(p.value ?? 0)), 0) || 1;
+    let cursor = 0;
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'grid', placeItems: 'center' }, children: _jsx("svg", { viewBox: `0 0 ${w} ${h}`, width: "90%", height: "90%", children: sorted.map((p, i) => {
+                const frac = Math.max(0, Number(p.value ?? 0)) / totalVal;
+                const rw = frac * w;
+                const x = cursor;
+                cursor += rw;
+                return _jsx("rect", { x: x, y: 0, width: Math.max(2, rw - 1), height: h, rx: 2, fill: palette[i % palette.length], opacity: 0.7, stroke: "#fff", strokeWidth: 1 }, i);
+            }) }) }));
+};
+const PanelChildPreview = ({ component }) => {
+    const { t } = useDesignerI18n();
+    return (_jsxs("div", { style: {
+            position: 'absolute',
+            left: safeCssNumber(mmToPx(component.x)),
+            top: safeCssNumber(mmToPx(component.y)),
+            width: safeCssNumber(mmToPx(component.width)),
+            height: safeCssNumber(mmToPx(component.height)),
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            padding: 0,
+            ...getCompStyle(component),
+        }, children: [getCompContent(component, '', null, {
+                imagePlaceholder: t('canvas.imagePlaceholder'),
+                subreportPlaceholder: t('canvas.subreportPlaceholder'),
+                localTemplatePlaceholder: t('canvas.localTemplatePlaceholder'),
+            }), _jsx(ComponentBorderOverlay, { component: component, zIndex: 150 })] }));
+};
+function readDesignBoolean(value) {
+    if (typeof value === 'boolean')
+        return value;
+    const normalized = String(value ?? '').trim().toLowerCase();
+    if (['true', '1', 'yes', 'y'].includes(normalized))
+        return true;
+    if (['false', '0', 'no', 'n', ''].includes(normalized))
+        return false;
+    return Boolean(value);
+}
+function designPageNumberText(format) {
+    switch (format) {
+        case '1':
+            return '1';
+        case 'Page 1':
+            return 'Page 1';
+        case 'Page 1 of N':
+            return 'Page 1 of 1';
+        case '1/N':
+        default:
+            return '1/1';
+    }
+}
+function formatDesignDateTime(date, pattern) {
+    const parts = {
+        yyyy: String(date.getFullYear()).padStart(4, '0'),
+        MM: String(date.getMonth() + 1).padStart(2, '0'),
+        dd: String(date.getDate()).padStart(2, '0'),
+        HH: String(date.getHours()).padStart(2, '0'),
+        mm: String(date.getMinutes()).padStart(2, '0'),
+        ss: String(date.getSeconds()).padStart(2, '0'),
+    };
+    return pattern.replace(/yyyy|MM|dd|HH|mm|ss/g, token => parts[token] ?? token);
+}
+function updateTableCellText(table, rowIndex, columnIndex, text) {
+    const normalized = normalizeTable(table);
+    return {
+        ...normalized,
+        rows: normalized.rows?.map((row, currentRowIndex) => (currentRowIndex !== rowIndex
+            ? row
+            : {
+                ...row,
+                cells: row.cells.map((cell, currentColumnIndex) => (currentColumnIndex === columnIndex ? { ...cell, text } : cell)),
+            })),
+    };
+}
+const TablePreview = ({ table, bandId, selectedTableCell, editing }) => {
+    const normalized = normalizeTable(table);
+    const rows = normalized.rows ?? [];
+    const rowCount = rows.length;
+    const rowHeights = rows.map(row => row.height ?? 8);
+    const rowTops = rowHeights.reduce((tops, height, index) => {
+        tops[index + 1] = (tops[index] ?? 0) + height;
+        return tops;
+    }, [0]);
+    const coveredCells = new Set();
+    const cells = [];
+    const borderLines = [];
+    rows.forEach((row, rowIndex) => {
+        const widths = resolveTableRowCellWidths(row, normalized.width);
+        const columnLefts = widths.reduce((lefts, width, index) => {
+            lefts[index + 1] = (lefts[index] ?? 0) + width;
+            return lefts;
+        }, [0]);
+        row.cells.forEach((cell, columnIndex) => {
+            if (coveredCells.has(`${rowIndex}-${columnIndex}`))
+                return;
+            const rowSpan = Math.max(1, Math.min(cell.rowSpan ?? 1, rowCount - rowIndex));
+            const colSpan = Math.max(1, Math.min(cell.colSpan ?? 1, row.cells.length - columnIndex));
+            for (let r = rowIndex; r < rowIndex + rowSpan; r += 1) {
+                for (let c = columnIndex; c < columnIndex + colSpan; c += 1) {
+                    if (r === rowIndex && c === columnIndex)
+                        continue;
+                    coveredCells.add(`${r}-${c}`);
+                }
+            }
+            const isSelected = Boolean(selectedTableCell
+                && selectedTableCell.tableId === normalized.id
+                && rowIndex >= selectedTableCell.startRow
+                && rowIndex <= selectedTableCell.endRow
+                && columnIndex >= selectedTableCell.startColumn
+                && columnIndex <= selectedTableCell.endColumn);
+            const inheritedStyle = resolveTableCellStyle(normalized, row, cell);
+            const border = resolveCollapsedCellBorder(normalized, row, cell, rowIndex, columnIndex);
+            const width = widths.slice(columnIndex, columnIndex + colSpan).reduce((sum, item) => sum + item, 0);
+            const height = rowHeights.slice(rowIndex, rowIndex + rowSpan).reduce((sum, item) => sum + item, 0);
+            const leftPx = safeCssNumber(mmToPx(columnLefts[columnIndex] ?? 0));
+            const topPx = safeCssNumber(mmToPx(rowTops[rowIndex] ?? 0));
+            const widthPx = safeCssNumber(mmToPx(width));
+            const heightPx = safeCssNumber(mmToPx(height));
+            const isEditing = Boolean(editing?.editingCell
+                && editing.editingCell.tableId === normalized.id
+                && editing.editingCell.startRow === rowIndex
+                && editing.editingCell.startColumn === columnIndex);
+            const cellSelection = {
+                tableId: normalized.id,
+                bandId,
+                startRow: rowIndex,
+                startColumn: columnIndex,
+                endRow: rowIndex,
+                endColumn: columnIndex,
+            };
+            if (hasVisibleBorder(border)) {
+                borderLines.push(...tableBorderLinesToNodes(border, {
+                    key: `${rowIndex}-${columnIndex}`,
+                    left: leftPx,
+                    top: topPx,
+                    width: widthPx,
+                    height: heightPx,
+                }));
+            }
+            cells.push(_jsxs("div", { "data-table-id": normalized.id, "data-band-id": bandId, "data-table-row": rowIndex, "data-table-column": columnIndex, "data-testid": `designer-table-cell-${rowIndex}-${columnIndex}`, onDoubleClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    editing?.onStartTableCellEdit(cellSelection, cell.text ?? '');
+                }, style: {
+                    position: 'absolute',
+                    left: leftPx,
+                    top: topPx,
+                    width: widthPx,
+                    height: heightPx,
+                    boxSizing: 'border-box',
+                    minWidth: 0,
+                    minHeight: 0,
+                    display: 'flex',
+                    justifyContent: tableTextAlignToFlex(inheritedStyle.textAlign),
+                    alignItems: verticalAlignToFlex(inheritedStyle.verticalAlign),
+                    textAlign: inheritedStyle.textAlign ?? 'left',
+                    backgroundColor: isSelected ? '#e6f4ff' : inheritedStyle.backgroundColor ?? 'transparent',
+                    padding: tablePaddingToCss(inheritedStyle.padding),
+                    color: inheritedStyle.font?.color ?? '#333',
+                    outline: isSelected ? '2px solid #1677ff' : undefined,
+                    outlineOffset: -2,
+                    fontFamily: inheritedStyle.font?.family,
+                    fontSize: inheritedStyle.font?.size ?? 10,
+                    fontWeight: inheritedStyle.font?.bold ? 700 : 400,
+                    fontStyle: inheritedStyle.font?.italic ? 'italic' : undefined,
+                    textDecoration: tableFontTextDecoration(inheritedStyle.font),
+                    lineHeight: 1.2,
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                }, children: [isEditing ? (_jsx("input", { autoFocus: true, value: editing?.editText ?? '', "aria-label": "\u5355\u5143\u683C\u6587\u672C", onChange: event => editing?.onEditTextChange(event.target.value), onKeyDown: (event) => {
+                            if (event.key === 'Enter' || event.key === 'Escape') {
+                                editing?.onFinishTableCellEdit(editing?.editText ?? '');
+                            }
+                        }, onBlur: () => editing?.onFinishTableCellEdit(editing?.editText ?? ''), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation(), style: {
+                            width: '100%',
+                            height: '100%',
+                            border: 'none',
+                            outline: 'none',
+                            background: 'transparent',
+                            font: 'inherit',
+                            color: 'inherit',
+                            textAlign: 'inherit',
+                            padding: 0,
+                            minWidth: 0,
+                        } })) : (_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: cell.text ?? '' })), columnIndex < row.cells.length - 1 ? (_jsx("div", { "data-table-cell-resize": true, "data-table-id": normalized.id, "data-band-id": bandId, "data-table-row": rowIndex, "data-table-column": columnIndex, "data-cell-width": widths[columnIndex], style: {
+                            position: 'absolute',
+                            top: 0,
+                            right: -3,
+                            width: 6,
+                            height: '100%',
+                            cursor: 'col-resize',
+                            zIndex: 4,
+                        } })) : null] }, `${rowIndex}-${columnIndex}`));
+        });
+    });
+    return (_jsxs("div", { "data-testid": "designer-table-grid", style: {
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            boxSizing: 'border-box',
+            backgroundColor: normalized.backgroundColor ?? 'transparent',
+        }, children: [cells, borderLines] }));
+};
+function tableFontTextDecoration(font) {
+    const decorations = [
+        font?.underline ? 'underline' : undefined,
+        font?.strikethrough ? 'line-through' : undefined,
+    ].filter(Boolean);
+    return decorations.length ? decorations.join(' ') : undefined;
+}
+function tablePaddingToCss(padding) {
+    if (!padding)
+        return '2px 3px';
+    return `${mmToPx(padding.top)}px ${mmToPx(padding.right)}px ${mmToPx(padding.bottom)}px ${mmToPx(padding.left)}px`;
+}
+function tableBorderLinesToNodes(border, rect) {
+    const value = `${border.width}mm ${border.style} ${border.color}`;
+    const base = {
+        position: 'absolute',
+        pointerEvents: 'none',
+        zIndex: 3,
+        boxSizing: 'border-box',
+    };
+    const lines = [];
+    if (border.sides.top) {
+        lines.push(_jsx("div", { "data-testid": `designer-table-border-line-${rect.key}-top`, style: { ...base, left: rect.left, top: rect.top, width: rect.width, height: 0, borderTop: value } }, `${rect.key}-top`));
+    }
+    if (border.sides.right) {
+        lines.push(_jsx("div", { "data-testid": `designer-table-border-line-${rect.key}-right`, style: { ...base, left: rect.left + rect.width, top: rect.top, width: 0, height: rect.height, borderLeft: value } }, `${rect.key}-right`));
+    }
+    if (border.sides.bottom) {
+        lines.push(_jsx("div", { "data-testid": `designer-table-border-line-${rect.key}-bottom`, style: { ...base, left: rect.left, top: rect.top + rect.height, width: rect.width, height: 0, borderTop: value } }, `${rect.key}-bottom`));
+    }
+    if (border.sides.left) {
+        lines.push(_jsx("div", { "data-testid": `designer-table-border-line-${rect.key}-left`, style: { ...base, left: rect.left, top: rect.top, width: 0, height: rect.height, borderLeft: value } }, `${rect.key}-left`));
+    }
+    return lines;
+}
+function tableTextAlignToFlex(value) {
+    if (value === 'center')
+        return 'center';
+    if (value === 'right')
+        return 'flex-end';
+    return 'flex-start';
+}
+//# sourceMappingURL=Canvas.js.map