@canvas-components/react-print-design 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -345,7 +345,7 @@ function createCustomComponent(id, name, elements) {
 }
 
 // src/features/context-menu/menu-items.ts
-function buildPrintDesignMenuItems(page, ids, readonly, instance, onSaveGroup) {
+function buildPrintDesignMenuItems(page, ids, readonly, instance, onSaveGroup, tableCell, tableSelector) {
   const selected = page.elements.filter((item) => ids.includes(item.id));
   const hasSelection = selected.length > 0;
   const locked = selected.some((item) => item.locked);
@@ -397,47 +397,167 @@ function buildPrintDesignMenuItems(page, ids, readonly, instance, onSaveGroup) {
       }
     }
   ];
-  if (hasSelection) {
+  const range = instance?.getTableCellSelection();
+  const selectedRange = range && selected.some(
+    (item) => item.type === "table" && item.id === range.elementId
+  ) ? range : null;
+  const targetCell = tableSelector ? null : tableCell ?? (selectedRange && !selectedRange.selectorKind ? {
+    elementId: selectedRange.elementId,
+    area: selectedRange.area,
+    rowIndex: selectedRange.endRow,
+    columnIndex: selectedRange.endColumn
+  } : null);
+  if (tableSelector) {
+    const table = page.elements.find(
+      (item) => item.id === tableSelector.elementId
+    );
+    const noRowEdit = noEdit || table?.type !== "table" || table.dataMode === "binding";
+    if (tableSelector.kind === "row" && tableSelector.area === "body")
+      items.push(
+        {
+          key: "insertRowAbove",
+          label: "\u5728\u4E0A\u65B9\u65B0\u589E\u884C",
+          separator: true,
+          disabled: noRowEdit,
+          run: (i) => {
+            i.insertTableRow(
+              tableSelector.elementId,
+              tableSelector.index,
+              false
+            );
+          }
+        },
+        {
+          key: "insertRowBelow",
+          label: "\u5728\u4E0B\u65B9\u65B0\u589E\u884C",
+          disabled: noRowEdit,
+          run: (i) => {
+            i.insertTableRow(
+              tableSelector.elementId,
+              tableSelector.index,
+              true
+            );
+          }
+        }
+      );
+    if (tableSelector.kind === "column")
+      items.push(
+        {
+          key: "insertColumnLeft",
+          label: "\u5728\u5DE6\u4FA7\u65B0\u589E\u5217",
+          separator: true,
+          disabled: noEdit,
+          run: (i) => {
+            i.insertTableColumn(
+              tableSelector.elementId,
+              tableSelector.index,
+              false
+            );
+          }
+        },
+        {
+          key: "insertColumnRight",
+          label: "\u5728\u53F3\u4FA7\u65B0\u589E\u5217",
+          disabled: noEdit,
+          run: (i) => {
+            i.insertTableColumn(
+              tableSelector.elementId,
+              tableSelector.index,
+              true
+            );
+          }
+        }
+      );
+    if (tableSelector.kind === "all" && table?.type === "table")
+      items.push(
+        {
+          key: "appendRow",
+          label: "\u65B0\u589E\u884C",
+          separator: true,
+          disabled: noRowEdit,
+          run: (i) => {
+            i.insertTableRow(
+              tableSelector.elementId,
+              table.dataSource.length - 1,
+              true
+            );
+          }
+        },
+        {
+          key: "appendColumn",
+          label: "\u65B0\u589E\u5217",
+          disabled: noEdit,
+          run: (i) => {
+            i.insertTableColumn(
+              tableSelector.elementId,
+              printDesign.tableLeafColumns(table.columns).filter((column) => !column.hidden).length - 1,
+              true
+            );
+          }
+        }
+      );
+  }
+  if (targetCell) {
+    const sameTable = selectedRange?.elementId === targetCell.elementId && (selectedRange.area ?? "body") === (targetCell.area ?? "body");
+    const merge = (i, row, column, rows, columns) => {
+      if (targetCell.area === "header")
+        i.mergeTableHeaderCell(
+          targetCell.elementId,
+          row,
+          column,
+          rows,
+          columns
+        );
+      else i.mergeTableCell(targetCell.elementId, row, column, rows, columns);
+    };
+    const startRow = sameTable ? Math.min(selectedRange.startRow, selectedRange.endRow) : targetCell.rowIndex;
+    const startColumn = sameTable ? Math.min(selectedRange.startColumn, selectedRange.endColumn) : targetCell.columnIndex;
+    const rowSpan = sameTable ? Math.abs(selectedRange.endRow - selectedRange.startRow) + 1 : 1;
+    const colSpan = sameTable ? Math.abs(selectedRange.endColumn - selectedRange.startColumn) + 1 : 1;
     items.push(
       {
-        key: "duplicate",
-        label: "\u751F\u6210\u526F\u672C",
-        disabled: readonly,
+        key: "mergeCells",
+        label: "\u5408\u5E76\u9009\u4E2D\u5355\u5143\u683C",
+        separator: true,
+        disabled: readonly || locked || !!selectedRange?.selectorKind || rowSpan * colSpan < 2,
         run: (i) => {
-          i.duplicateElements();
+          merge(i, startRow, startColumn, rowSpan, colSpan);
         }
       },
       {
-        key: "front",
-        label: "\u7F6E\u9876",
-        separator: true,
-        disabled: noEdit,
+        key: "mergeRight",
+        label: "\u4E0E\u53F3\u4FA7\u5355\u5143\u683C\u5408\u5E76",
+        disabled: readonly || locked,
         run: (i) => {
-          i.moveSelectionLayer("front");
+          merge(i, targetCell.rowIndex, targetCell.columnIndex, 1, 2);
         }
       },
       {
-        key: "forward",
-        label: "\u4E0A\u79FB\u4E00\u5C42",
-        disabled: noEdit,
+        key: "mergeDown",
+        label: "\u4E0E\u4E0B\u65B9\u5355\u5143\u683C\u5408\u5E76",
+        disabled: readonly || locked,
         run: (i) => {
-          i.moveSelectionLayer("forward");
+          merge(i, targetCell.rowIndex, targetCell.columnIndex, 2, 1);
         }
       },
       {
-        key: "backward",
-        label: "\u4E0B\u79FB\u4E00\u5C42",
-        disabled: noEdit,
+        key: "unmergeCell",
+        label: "\u53D6\u6D88\u5355\u5143\u683C\u5408\u5E76",
+        disabled: readonly || locked,
         run: (i) => {
-          i.moveSelectionLayer("backward");
+          merge(i, targetCell.rowIndex, targetCell.columnIndex, 1, 1);
         }
-      },
+      }
+    );
+  }
+  if (hasSelection) {
+    items.push(
       {
-        key: "back",
-        label: "\u7F6E\u5E95",
-        disabled: noEdit,
+        key: "duplicate",
+        label: "\u751F\u6210\u526F\u672C",
+        disabled: readonly,
         run: (i) => {
-          i.moveSelectionLayer("back");
+          i.duplicateElements();
         }
       },
       {
@@ -465,28 +585,6 @@ function buildPrintDesignMenuItems(page, ids, readonly, instance, onSaveGroup) {
         disabled: readonly,
         run: () => onSaveGroup(selectedGroup.name, selectedGroup.elements)
       });
-    const alignmentUnits = printDesign.getPrintDesignAlignmentUnits(page.elements, ids);
-    for (const [key, label] of [
-      ["left", "\u5DE6\u5BF9\u9F50"],
-      ["center", "\u6C34\u5E73\u5C45\u4E2D"],
-      ["right", "\u53F3\u5BF9\u9F50"],
-      ["top", "\u9876\u5BF9\u9F50"],
-      ["middle", "\u5782\u76F4\u5C45\u4E2D"],
-      ["bottom", "\u5E95\u5BF9\u9F50"],
-      ["justify-horizontal", "\u6C34\u5E73\u4E24\u7AEF\u5BF9\u9F50\uFF08\u7B49\u95F4\u8DDD\uFF09"],
-      ["distribute-horizontal", "\u6C34\u5E73\u5206\u6563\u5BF9\u9F50\uFF08\u7B49\u4E2D\u5FC3\u8DDD\uFF09"],
-      ["justify-vertical", "\u5782\u76F4\u4E24\u7AEF\u5BF9\u9F50\uFF08\u7B49\u95F4\u8DDD\uFF09"],
-      ["distribute-vertical", "\u5782\u76F4\u5206\u6563\u5BF9\u9F50\uFF08\u7B49\u4E2D\u5FC3\u8DDD\uFF09"]
-    ])
-      items.push({
-        key,
-        label,
-        separator: key === "left",
-        disabled: noEdit || key.includes("-") && alignmentUnits.length < 3,
-        run: (i) => {
-          i.alignSelection(key);
-        }
-      });
     const allLocked = selected.every((item) => item.locked), allHidden = selected.every((item) => item.visible === false);
     items.push(
       {
@@ -1251,6 +1349,7 @@ function ElementLayerList(props) {
               });
             },
             className: `cc-print-design-layer-item${node.memberIds.every((id) => props.selectedIds.includes(id)) ? " selected" : ""}`,
+            "data-tour-element-id": node.element.id,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -1454,7 +1553,11 @@ function isTableColumns(value) {
   return Array.isArray(value) && value.every(
     (column) => column && typeof column === "object" && (typeof column.dataIndex === "string" || Array.isArray(column.dataIndex) && column.dataIndex.every(
       (v) => typeof v === "string" || typeof v === "number"
-    )) && (column.width == null || Number.isFinite(column.width) && column.width > 0) && (column.cellType == null || tableCellTypes.includes(column.cellType)) && (column.children == null || isTableColumns(column.children))
+    )) && (column.width == null || Number.isFinite(column.width) && column.width > 0) && (column.cellOverflow == null || ["nowrap", "wrap", "ellipsis", "shrink"].includes(
+      column.cellOverflow
+    )) && (column.cellPadding == null || typeof column.cellPadding === "object" && ["top", "right", "bottom", "left"].every(
+      (side) => column.cellPadding[side] == null || Number.isFinite(column.cellPadding[side]) && column.cellPadding[side] >= 0
+    )) && (column.cellType == null || tableCellTypes.includes(column.cellType)) && (column.children == null || isTableColumns(column.children))
   );
 }
 var tableCellTypeLabels = {
@@ -1891,8 +1994,10 @@ var TABLE_VERTICAL_ALIGN_OPTIONS = [
   { value: "bottom", label: "\u5E95\u90E8" }
 ];
 var TABLE_OVERFLOW_OPTIONS = [
+  { value: "nowrap", label: "\u8D85\u51FA\u88C1\u5207" },
   { value: "wrap", label: "\u81EA\u52A8\u6362\u884C" },
-  { value: "ellipsis", label: "\u7701\u7565\u53F7" }
+  { value: "ellipsis", label: "\u8D85\u51FA\u663E\u793A..." },
+  { value: "shrink", label: "\u538B\u7F29\u5B57\u5F62" }
 ];
 var TABLE_SUMMARY_OPTIONS = [
   { value: "none", label: "\u65E0" },
@@ -2446,6 +2551,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": type,
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, type),
@@ -2471,6 +2577,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": type,
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, type),
@@ -2496,6 +2603,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": type,
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, type),
@@ -2521,6 +2629,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": "shape",
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, "shape", shape),
@@ -2546,6 +2655,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": "ruler",
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, "ruler", orientation),
@@ -2571,6 +2681,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": "grid",
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, "grid"),
@@ -2595,6 +2706,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": "progress",
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, "progress", variant),
@@ -2620,6 +2732,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": "list",
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, "list", style),
@@ -2645,6 +2758,7 @@ function LeftPanel(props) {
                 {
                   type: "button",
                   className: "cc-print-design-component-item",
+                  "data-component-type": "chart",
                   disabled: props.contentReadonly,
                   draggable: !props.contentReadonly,
                   onDragStart: (event) => startComponentDrag(event, "chart", preset.id),
@@ -2858,42 +2972,86 @@ function elementIcon(type) {
   const Icon = iconByType[type] ?? reactComponents.ReactBorderOutlined;
   return /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" });
 }
-function usePrintPreviewPages(document2, records, enabled) {
+function usePrintPreviewPages(document2, records, enabled, loadData) {
   const [pages, setPages] = react.useState([]);
   const [processed, setProcessed] = react.useState(0);
   const [error, setError] = react.useState("");
+  const [loading, setLoading] = react.useState(false);
+  const [progress, setProgress] = react.useState("");
+  const [source, setSource] = react.useState(null);
   react.useEffect(() => {
-    if (!enabled) return;
-    let cancelled = false;
+    if (!enabled) {
+      setPages([]);
+      setSource(null);
+      setLoading(false);
+      return;
+    }
+    const controller = new AbortController();
     setPages([]);
     setProcessed(0);
     setError("");
+    setLoading(true);
+    setProgress("\u6B63\u5728\u51C6\u5907\u9884\u89C8\u2026");
+    setSource(null);
     const build = async () => {
       const pending = [];
       try {
-        for (let position = 0; position < records.length; position++) {
-          if (cancelled) return;
-          const data = records[position];
-          const result = printDesign.paginatePrintDesignDocument(document2, data);
-          if (cancelled) return;
-          pending.push(...result.pages.map((page) => ({ page, data })));
-          if (position === 0 || position % 8 === 7 || position === records.length - 1) {
-            setPages([...pending]);
-            setProcessed(position + 1);
-            await new Promise((resolve) => setTimeout(resolve, 0));
+        let progressTime = 0;
+        const loaded = loadData ? await loadData(document2, {
+          signal: controller.signal,
+          onProgress: (completed, total) => {
+            const now = performance.now();
+            if (!controller.signal.aborted && (now - progressTime > 100 || completed === total)) {
+              progressTime = now;
+              setProgress(`\u6B63\u5728\u51C6\u5907\u9884\u89C8 ${completed} / ${total}`);
+            }
           }
+        }) : null;
+        controller.signal.throwIfAborted();
+        if (loaded) setSource(loaded);
+        const previewDocument = loaded?.document ?? document2;
+        const previewRecords = loaded ? [loaded.data] : records;
+        let deadline = performance.now() + 8;
+        let publishedAt = 0;
+        for (let position = 0; position < previewRecords.length; position++) {
+          const data = previewRecords[position];
+          for (const page of previewDocument.pages) {
+            controller.signal.throwIfAborted();
+            const result = printDesign.paginatePrintDesignDocument(
+              { ...previewDocument, pages: [page] },
+              data
+            );
+            for (const page2 of result.pages) pending.push({ page: page2, data });
+            if (performance.now() >= deadline) {
+              if (performance.now() - publishedAt > 100) {
+                setPages([...pending]);
+                setProgress(`\u6B63\u5728\u751F\u6210\u9884\u89C8\uFF0C\u5DF2\u751F\u6210 ${pending.length} \u9875`);
+                publishedAt = performance.now();
+              }
+              await new Promise((resolve) => setTimeout(resolve, 0));
+              deadline = performance.now() + 8;
+            }
+          }
+          setProcessed(position + 1);
         }
+        controller.signal.throwIfAborted();
+        setPages(pending);
+        setLoading(false);
+        setProgress("");
       } catch (cause) {
-        if (!cancelled)
+        if (!controller.signal.aborted) {
           setError(cause instanceof Error ? cause.message : "\u751F\u6210\u9884\u89C8\u5931\u8D25");
+          setLoading(false);
+        }
       }
     };
-    void build();
+    const timer = setTimeout(() => void build(), 0);
     return () => {
-      cancelled = true;
+      clearTimeout(timer);
+      controller.abort();
     };
-  }, [document2, records, enabled]);
-  return { pages, processed, error };
+  }, [document2, records, enabled, loadData]);
+  return { pages, processed, error, loading, progress, source };
 }
 function SaveCustomComponentDialog({
   defaultName,
@@ -2944,6 +3102,211 @@ function SaveCustomComponentDialog({
     }
   );
 }
+
+// src/features/templates/template-tour.ts
+var typeNames = {
+  text: "\u6587\u672C",
+  list: "\u5217\u8868",
+  dateTime: "\u65E5\u671F\u65F6\u95F4",
+  moneyUpper: "\u91D1\u989D\u5927\u5199",
+  pageNumber: "\u9875\u7801",
+  watermark: "\u6C34\u5370",
+  shape: "\u5F62\u72B6",
+  divider: "\u5206\u5272\u7EBF",
+  ruler: "\u6807\u5C3A",
+  grid: "\u7F51\u683C",
+  progress: "\u8FDB\u5EA6\u6761",
+  clock: "\u65F6\u949F",
+  image: "\u56FE\u7247",
+  barcode: "\u6761\u7801",
+  qrcode: "\u4E8C\u7EF4\u7801",
+  chart: "\u56FE\u8868",
+  table: "\u8868\u683C",
+  pivotTable: "\u900F\u89C6\u8868",
+  gantt: "\u7518\u7279\u56FE"
+};
+function getTourFields(element) {
+  const fields = [];
+  const values = element;
+  const add = (key, label) => {
+    if (values[key] !== void 0)
+      fields.push({ key, label, value: values[key] });
+  };
+  add("name", "\u56FE\u5C42\u540D\u79F0");
+  add("x", "X \u5750\u6807");
+  add("y", "Y \u5750\u6807");
+  add("width", "\u5BBD\u5EA6");
+  add("height", "\u9AD8\u5EA6");
+  add("rotation", "\u65CB\u8F6C");
+  add("overflowPolicy", "\u8D85\u51FA\u7EB8\u5F20\u5904\u7406");
+  if (element.type === "text") {
+    add("text", "\u6587\u672C\u5185\u5BB9");
+    add("fontSize", "\u5B57\u53F7");
+    add("color", "\u6587\u5B57\u989C\u8272");
+  }
+  if (element.type === "table") {
+    add("columns", "\u5217\u914D\u7F6E JSON");
+    add("dataMode", "\u6570\u636E\u65B9\u5F0F");
+    if (element.dataMode === "binding") add("dataPath", "\u8868\u683C\u6570\u636E\u6E90\u8DEF\u5F84");
+    if (element.dataMode === "binding")
+      add("fallbackToStatic", "\u6570\u636E\u6E90\u7F3A\u5931\u65F6\u4F7F\u7528\u9ED8\u8BA4\u5185\u5BB9");
+    if (element.dataMode !== "binding" || element.fallbackToStatic)
+      add("dataSource", "\u6570\u636E\u5185\u5BB9 JSON");
+    add("showHeader", "\u663E\u793A\u8868\u5934");
+    add("headerRowHeight", "\u8868\u5934\u884C\u9AD8");
+    add("rowHeight", "\u6570\u636E\u884C\u9AD8");
+    add("printRowCount", "\u6BCF\u9875\u884C\u6570");
+    add("borderMode", "\u6253\u5370\u8FB9\u6846");
+    if (element.borderMode === "binding") add("borderPath", "\u8FB9\u6846\u6570\u636E\u5B57\u6BB5");
+    add("cellBorder", "\u5355\u5143\u683C\u8FB9\u6846\u5BBD\u5EA6");
+    add("mergeCell", "\u8FDE\u7EED\u884C\u5206\u7EC4\u5B57\u6BB5");
+  }
+  if (element.type === "pivotTable" || element.type === "gantt") {
+    add("dataMode", "\u6570\u636E\u65B9\u5F0F");
+    if (element.dataMode === "binding") add("dataPath", "\u6570\u636E\u6E90\u8DEF\u5F84");
+  }
+  if (element.type !== "text" && element.type !== "table") {
+    if (element.type !== "shape" && element.type !== "list" && element.type !== "ruler" && element.type !== "grid" && element.type !== "progress") {
+      add("text", "\u6587\u672C\u5185\u5BB9");
+      add("value", "\u5185\u5BB9\u503C");
+    }
+    if (element.type === "pageNumber") add("prefix", "\u9875\u7801\u524D\u7F00");
+    if (element.type === "image") add("src", "\u56FE\u7247\u5730\u5740");
+  }
+  if (element.dataConfig?.mode === "binding") {
+    fields.push({
+      key: "dataConfig.mode",
+      label: "\u6570\u636E\u65B9\u5F0F",
+      value: "binding"
+    });
+    Object.entries(element.dataConfig.bindings ?? {}).forEach(
+      ([key, value]) => fields.push({
+        key: `dataConfig.bindings.${key}`,
+        label: `${key}\u7ED1\u5B9A\u8DEF\u5F84`,
+        value
+      })
+    );
+  }
+  return fields;
+}
+function formatTourValue(field) {
+  if (field.key === "columns" && Array.isArray(field.value))
+    return `${field.value.length} \u5217`;
+  if (field.key === "dataSource" && Array.isArray(field.value))
+    return `${field.value.length} \u6761\u8BB0\u5F55`;
+  if (field.key === "mergeCell") return "\u6309\u5B57\u6BB5\u5408\u5E76\u8FDE\u7EED\u5355\u5143\u683C";
+  if (field.key === "cellBorder" && field.value && typeof field.value === "object")
+    return `${field.value.width ?? 1} px`;
+  if (typeof field.value === "boolean") return field.value ? "\u5F00\u542F" : "\u5173\u95ED";
+  return String(field.value ?? "").slice(0, 100);
+}
+function createPrintDesignTourSteps(document2) {
+  const steps = [
+    {
+      title: `${document2.name} \xB7 \u5B9E\u73B0\u5206\u6790`,
+      description: `\u4ECE\u7A7A\u767D\u753B\u5E03\u5F00\u59CB\uFF0C\u4F9D\u6B21\u64CD\u4F5C\u5DE6\u4FA7\u7EC4\u4EF6\u9762\u677F\u3001\u753B\u5E03\u3001\u53F3\u4FA7\u5C5E\u6027\u9762\u677F\u548C\u56FE\u5C42\u5217\u8868\uFF0C\u5B8C\u6210 ${document2.pages.length} \u9875\u6A21\u677F\u3002\u6F14\u793A\u7ED3\u675F\u540E\u6062\u590D\u5F53\u524D\u6A21\u677F\u3002`,
+      target: ".cc-print-design-brand",
+      operation: "intro"
+    }
+  ];
+  document2.pages.forEach((page, pageIndex) => {
+    steps.push({
+      title: `\u7B2C ${pageIndex + 1} \u9875 \xB7 \u65B0\u589E\u5E76\u914D\u7F6E\u9875\u9762`,
+      description: `\u5728\u5DE6\u4FA7\u300C\u9875\u9762\u300D\u9762\u677F\u65B0\u589E\u9875\u9762\uFF0C\u8BBE\u7F6E\u7EB8\u5F20 ${page.width} \xD7 ${page.height} mm\uFF0C\u65B9\u5411\u4E3A${page.orientation === "landscape" ? "\u6A2A\u5411" : "\u7EB5\u5411"}\u3002${page.margins ? `\u9875\u8FB9\u8DDD\uFF08\u4E0A/\u53F3/\u4E0B/\u5DE6\uFF09\uFF1A${page.margins.top}/${page.margins.right}/${page.margins.bottom}/${page.margins.left} mm\u3002` : ""}`,
+      target: ".cc-print-design-left-panel",
+      operation: "page",
+      pageIndex,
+      pageId: page.id
+    });
+    page.elements.forEach((element, elementIndex) => {
+      const title = `${pageIndex + 1}.${elementIndex + 1} ${element.name || typeNames[element.type] || element.type}`;
+      const location = {
+        pageIndex,
+        elementIndex,
+        pageId: page.id,
+        elementId: element.id
+      };
+      steps.push(
+        {
+          ...location,
+          operation: "select",
+          title: `${title} \xB7 \u9009\u62E9\u7EC4\u4EF6`,
+          description: `\u6253\u5F00\u5DE6\u4FA7\u300C\u7EC4\u4EF6\u300D\u9762\u677F\uFF0C\u627E\u5230\u300C${typeNames[element.type] || element.type}\u300D\u5E76\u51C6\u5907\u6DFB\u52A0\u3002`,
+          target: `.cc-print-design-component-item[data-component-type="${element.type}"]`
+        },
+        {
+          ...location,
+          operation: "add",
+          title: `${title} \xB7 \u65B0\u589E\u56FE\u5C42`,
+          description: "\u70B9\u51FB\u5DE6\u4FA7\u7EC4\u4EF6\u6216\u62D6\u5230\u753B\u5E03\uFF0C\u5148\u521B\u5EFA\u4F7F\u7528\u9ED8\u8BA4\u914D\u7F6E\u7684\u56FE\u5C42\u3002\u63A5\u4E0B\u6765\u9010\u9879\u586B\u5199\u53F3\u4FA7\u5C5E\u6027\u3002",
+          target: ".cc-print-design-canvas-frame"
+        },
+        ...getTourFields(element).map(
+          (field, fieldIndex) => ({
+            ...location,
+            operation: "field",
+            fieldIndex,
+            fieldKey: field.key,
+            title: `${title} \xB7 \u914D\u7F6E\u300C${field.label}\u300D`,
+            description: `\u5728\u53F3\u4FA7\u5C5E\u6027\u9762\u677F\u7684\u300C${field.label}\u300D\u8868\u5355\u9879\u4E2D\u8BBE\u7F6E\uFF1A${formatTourValue(field)}\u3002`,
+            target: `.cc-print-design-properties-host [data-tour-field="${field.key}"]`
+          })
+        ),
+        {
+          ...location,
+          operation: "layer",
+          title: `${title} \xB7 \u68C0\u67E5\u56FE\u5C42`,
+          description: `\u5207\u6362\u5DE6\u4FA7\u300C\u56FE\u5C42\u300D\u9762\u677F\uFF0C\u786E\u8BA4\u300C${element.name || typeNames[element.type] || element.type}\u300D\u5DF2\u52A0\u5165\u7B2C ${pageIndex + 1} \u9875\uFF0C\u5E76\u4FDD\u6301\u5F53\u524D\u5C42\u53E0\u987A\u5E8F\u3002`,
+          target: ".cc-print-design-left-panel"
+        }
+      );
+    });
+  });
+  return steps;
+}
+function createPrintDesignTourDocument(source, step) {
+  if (step.operation === "intro")
+    return { ...source, pages: [{ ...source.pages[0], elements: [] }] };
+  const pageIndex = step.pageIndex ?? 0;
+  const pages = source.pages.slice(0, pageIndex + 1).map((page, index) => {
+    if (index < pageIndex) return page;
+    if (step.operation === "page") return { ...page, elements: [] };
+    const elementIndex = step.elementIndex ?? 0;
+    const elements = page.elements.slice(0, elementIndex);
+    if (step.operation !== "select") {
+      const element = page.elements[elementIndex];
+      elements.push(
+        step.operation === "add" || step.operation === "field" ? createTourElement(element, step) : element
+      );
+    }
+    return { ...page, elements };
+  });
+  return { ...source, pages };
+}
+function createTourElement(element, step) {
+  const draft = {
+    ...createDefaultPrintDesignElement(element.type),
+    id: element.id
+  };
+  if (step.operation === "field") {
+    for (const field of getTourFields(element).slice(
+      0,
+      (step.fieldIndex ?? -1) + 1
+    )) {
+      if (field.key === "dataConfig.mode") {
+        draft.dataConfig = { mode: field.value, bindings: {} };
+      } else if (field.key.startsWith("dataConfig.bindings.")) {
+        const config = draft.dataConfig ?? {
+          mode: "binding",
+          bindings: {}
+        };
+        config.bindings[field.key.slice("dataConfig.bindings.".length)] = String(field.value);
+        draft.dataConfig = config;
+      } else draft[field.key] = field.value;
+    }
+  }
+  return draft;
+}
 function PrintExportNameDialog({
   format,
   defaultFileName,
@@ -3157,32 +3520,39 @@ function NameField(props) {
     if (!props.disabled && (name || props.allowEmpty) && name !== props.value)
       props.onCommit(name);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-field cc-print-design-field-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactComponents.ReactInput,
-      {
-        "aria-label": props.label,
-        value: draft,
-        disabled: props.disabled,
-        onChange: (event) => setDraft(event.target.value),
-        onBlur: commit,
-        onKeyDown: (event) => {
-          if (event.nativeEvent.isComposing) return;
-          if (event.key === "Enter") {
-            event.preventDefault();
-            event.currentTarget.blur();
-          } else if (event.key === "Escape") {
-            event.preventDefault();
-            event.stopPropagation();
-            cancelled.current = true;
-            setDraft(props.value);
-            event.currentTarget.blur();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "cc-print-design-field cc-print-design-field-full",
+      "data-tour-field": "name",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ReactInput,
+          {
+            "aria-label": props.label,
+            value: draft,
+            disabled: props.disabled,
+            onChange: (event) => setDraft(event.target.value),
+            onBlur: commit,
+            onKeyDown: (event) => {
+              if (event.nativeEvent.isComposing) return;
+              if (event.key === "Enter") {
+                event.preventDefault();
+                event.currentTarget.blur();
+              } else if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                cancelled.current = true;
+                setDraft(props.value);
+                event.currentTarget.blur();
+              }
+            }
           }
-        }
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
 function ElementLayerControls({
   index,
@@ -3720,53 +4090,68 @@ function TableRowSettingsPanel({
       className: "cc-print-design-property-section",
       contentClassName: "cc-print-design-table-data cc-print-design-row-settings",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-tour-field": "showHeader", children: /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.ReactCheckbox,
           {
             checked: element.showHeader !== false,
             onChange: (e) => onChange({ showHeader: e.target.checked }),
             children: "\u663E\u793A\u8868\u5934"
           }
+        ) }),
+        TABLE_ROW_FIELDS.map(([key, label, fallback]) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "cc-print-design-column-half",
+            "data-tour-field": key,
+            children: [
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.ReactInputNumber,
+                {
+                  min: printDesign.toDisplayUnit(
+                    key === "fontSize" ? printDesign.fromDisplayUnit(1, "pt") : 1,
+                    displayUnit
+                  ),
+                  step: 0.1,
+                  value: printDesign.toDisplayUnit(
+                    key === "fontSize" ? printDesign.fromDisplayUnit(element[key] ?? fallback, "pt") : element[key] ?? fallback,
+                    displayUnit
+                  ),
+                  onChange: (value) => {
+                    if (value != null && Number.isFinite(value) && value > 0)
+                      onChange({
+                        [key]: key === "fontSize" ? printDesign.toDisplayUnit(printDesign.fromDisplayUnit(value, displayUnit), "pt") : printDesign.fromDisplayUnit(value, displayUnit)
+                      });
+                  }
+                }
+              )
+            ]
+          },
+          key
+        )),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "cc-print-design-column-half",
+            "data-tour-field": "printRowCount",
+            children: [
+              "\u6BCF\u9875\u884C\u6570\uFF080 \u4E0D\u9650\uFF09",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.ReactInputNumber,
+                {
+                  "aria-label": "\u6BCF\u9875\u884C\u6570",
+                  min: 0,
+                  precision: 0,
+                  value: element.printRowCount ?? 0,
+                  onChange: (value) => {
+                    if (value != null && Number.isFinite(value))
+                      onChange(resizeTableRowCount(element, value));
+                  }
+                }
+              )
+            ]
+          }
         ),
-        TABLE_ROW_FIELDS.map(([key, label, fallback]) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
-          label,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.ReactInputNumber,
-            {
-              min: printDesign.toDisplayUnit(
-                key === "fontSize" ? printDesign.fromDisplayUnit(1, "pt") : 1,
-                displayUnit
-              ),
-              step: 0.1,
-              value: printDesign.toDisplayUnit(
-                key === "fontSize" ? printDesign.fromDisplayUnit(element[key] ?? fallback, "pt") : element[key] ?? fallback,
-                displayUnit
-              ),
-              onChange: (value) => {
-                if (value != null && Number.isFinite(value) && value > 0)
-                  onChange({
-                    [key]: key === "fontSize" ? printDesign.toDisplayUnit(printDesign.fromDisplayUnit(value, displayUnit), "pt") : printDesign.fromDisplayUnit(value, displayUnit)
-                  });
-              }
-            }
-          )
-        ] }, key)),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
-          "\u6BCF\u9875\u884C\u6570\uFF080 \u4E0D\u9650\uFF09",
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.ReactInputNumber,
-            {
-              "aria-label": "\u6BCF\u9875\u884C\u6570",
-              min: 0,
-              precision: 0,
-              value: element.printRowCount ?? 0,
-              onChange: (value) => {
-                if (value != null && Number.isFinite(value))
-                  onChange(resizeTableRowCount(element, value));
-              }
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.ReactButton,
           {
@@ -3825,38 +4210,46 @@ function TableJsonField({
     setDraft(JSON.stringify(value, null, 2));
     setError("");
   }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.ReactCollapsePanel, { className: "cc-print-design-table-json", title: label, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactComponents.ReactTextArea,
-      {
-        className: "canvas-react-scrollbar",
-        "aria-label": label,
-        value: draft,
-        onChange: (e) => setDraft(e.target.value)
-      }
-    ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactComponents.ReactButton,
-      {
-        onClick: () => {
-          try {
-            const next = JSON.parse(draft);
-            if (!validate(next))
-              throw new Error("\u683C\u5F0F\u65E0\u6548\uFF0C\u8BF7\u68C0\u67E5\u6570\u7EC4\u53CA\u5B57\u6BB5\u7C7B\u578B\u3002");
-            onChange(next);
-            setError("");
-          } catch (error2) {
-            setError(error2 instanceof Error ? error2.message : "JSON \u683C\u5F0F\u65E0\u6548");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.ReactCollapsePanel,
+    {
+      className: "cc-print-design-table-json",
+      title: label,
+      "data-tour-field": label === "\u5217\u914D\u7F6E JSON" ? "columns" : label === "\u9759\u6001\u6570\u636E JSON" || label === "\u9ED8\u8BA4\u6570\u636E JSON" ? "dataSource" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ReactTextArea,
+          {
+            className: "canvas-react-scrollbar",
+            "aria-label": label,
+            value: draft,
+            onChange: (e) => setDraft(e.target.value)
           }
-        },
-        children: [
-          "\u5E94\u7528",
-          label
-        ]
-      }
-    )
-  ] });
+        ),
+        error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.ReactButton,
+          {
+            onClick: () => {
+              try {
+                const next = JSON.parse(draft);
+                if (!validate(next))
+                  throw new Error("\u683C\u5F0F\u65E0\u6548\uFF0C\u8BF7\u68C0\u67E5\u6570\u7EC4\u53CA\u5B57\u6BB5\u7C7B\u578B\u3002");
+                onChange(next);
+                setError("");
+              } catch (error2) {
+                setError(error2 instanceof Error ? error2.message : "JSON \u683C\u5F0F\u65E0\u6548");
+              }
+            },
+            children: [
+              "\u5E94\u7528",
+              label
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function TableRowsPanel({
   rows,
@@ -3991,7 +4384,7 @@ function TableBindingPanel({
   const source = printDesign.resolveTableDataSource(data, element.dataPath);
   const rows = printDesign.resolveTableRows(element, data);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", "data-tour-field": "dataPath", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8868\u683C\u6570\u636E\u6E90\u8DEF\u5F84" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         DataPathPicker,
@@ -4031,13 +4424,13 @@ function TableDataPanel({
       title: "\u6570\u636E",
       defaultOpen: true,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-tour-field": "dataMode", children: /* @__PURE__ */ jsxRuntime.jsx(
           DataModeButtons,
           {
             value: element.dataMode ?? "static",
             onChange: (mode) => onChange({ dataMode: mode })
           }
-        ),
+        ) }),
         element.dataMode === "binding" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             TableBindingPanel,
@@ -4048,14 +4441,14 @@ function TableDataPanel({
               onChange
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-tour-field": "fallbackToStatic", children: /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.ReactCheckbox,
             {
               checked: element.fallbackToStatic ?? false,
               onChange: (event) => onChange({ fallbackToStatic: event.target.checked }),
               children: "\u6570\u636E\u6E90\u7F3A\u5931\u65F6\u4F7F\u7528\u9ED8\u8BA4\u5185\u5BB9"
             }
-          ),
+          ) }),
           element.fallbackToStatic && /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.ReactCollapsePanel, { title: "\u9ED8\u8BA4\u5185\u5BB9", defaultOpen: true, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               TableRowsPanel,
@@ -4101,6 +4494,7 @@ function TableDataPanel({
 function TableLayoutPanel({
   element,
   onChange,
+  samples = [],
   showGrandTotalOption = false
 }) {
   const { displayUnit } = useEditorPreferences();
@@ -4112,7 +4506,36 @@ function TableLayoutPanel({
         className: "cc-print-design-property-section",
         contentClassName: "cc-print-design-table-data cc-print-design-compact-grid",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-tour-field": "borderMode", children: [
+            "\u6253\u5370\u8FB9\u6846",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactSelect,
+              {
+                value: element.borderMode ?? "show",
+                options: [
+                  { label: "\u663E\u793A", value: "show" },
+                  { label: "\u9690\u85CF", value: "hide" },
+                  { label: "\u52A8\u6001\u6570\u636E", value: "binding" }
+                ],
+                onChange: (value) => onChange({
+                  borderMode: value
+                })
+              }
+            )
+          ] }),
+          element.borderMode === "binding" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", "data-tour-field": "borderPath", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8FB9\u6846\u6570\u636E\u5B57\u6BB5" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DataPathPicker,
+              {
+                label: "\u8FB9\u6846\u6570\u636E\u5B57\u6BB5",
+                value: element.borderPath ?? "",
+                samples,
+                onChange: (borderPath) => onChange({ borderPath })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-tour-field": "cellBorder", children: [
             "\u8FB9\u6846\u5BBD\u5EA6",
             /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.ReactInputNumber,
@@ -4168,45 +4591,434 @@ function TableLayoutPanel({
         contentClassName: "cc-print-design-table-data",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.ReactCheckbox,
+            reactComponents.ReactCheckbox,
+            {
+              checked: element.showSummary !== false,
+              onChange: (event) => onChange({ showSummary: event.target.checked }),
+              children: "\u663E\u793A\u6C47\u603B\u884C"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            "\u6C47\u603B\u884C\u9AD8",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactInputNumber,
+              {
+                "aria-label": "\u6C47\u603B\u884C\u9AD8",
+                min: printDesign.toDisplayUnit(1, displayUnit),
+                value: printDesign.toDisplayUnit(
+                  element.summaryRowHeight ?? element.rowHeight ?? 8,
+                  displayUnit
+                ),
+                onChange: (value) => {
+                  if (value != null && Number.isFinite(value) && value > 0)
+                    onChange({
+                      summaryRowHeight: printDesign.fromDisplayUnit(value, displayUnit)
+                    });
+                }
+              }
+            )
+          ] }),
+          showGrandTotalOption ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactCheckbox,
+            {
+              checked: element.showGrandTotal ?? true,
+              onChange: (event) => onChange({ showGrandTotal: event.target.checked }),
+              children: "\u663E\u793A\u603B\u8BA1\u5217"
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function TableCellLayoutPanel({
+  element,
+  onChange
+}) {
+  const { displayUnit } = useEditorPreferences();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.ReactCollapsePanel,
+    {
+      title: "\u7EDF\u4E00\u5355\u5143\u683C\u5E03\u5C40",
+      className: "cc-print-design-property-section",
+      contentClassName: "cc-print-design-column-grid",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
+          "\u6C34\u5E73\u5BF9\u9F50",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactSelect,
+            {
+              value: element.cellAlign ?? "left",
+              options: TABLE_ALIGN_OPTIONS,
+              onChange: (value) => onChange({
+                cellAlign: value
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
+          "\u5782\u76F4\u5BF9\u9F50",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactSelect,
+            {
+              value: element.cellVerticalAlign ?? "middle",
+              options: TABLE_VERTICAL_ALIGN_OPTIONS,
+              onChange: (value) => onChange({
+                cellVerticalAlign: value
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u5185\u5BB9\u8D85\u51FA",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactSelect,
+            {
+              value: element.cellOverflow ?? "wrap",
+              options: TABLE_OVERFLOW_OPTIONS,
+              onChange: (value) => onChange({
+                cellOverflow: value
+              })
+            }
+          )
+        ] }),
+        ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
+          { top: "\u4E0A", right: "\u53F3", bottom: "\u4E0B", left: "\u5DE6" }[side],
+          "\u5185\u8FB9\u8DDD",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInputNumber,
+            {
+              min: 0,
+              step: 0.1,
+              value: printDesign.toDisplayUnit(
+                printDesign.fromDisplayUnit(
+                  element.cellPadding?.[side] ?? (side === "left" || side === "right" ? 4 : 0),
+                  "px"
+                ),
+                displayUnit
+              ),
+              onChange: (value) => {
+                if (value != null && Number.isFinite(value) && value >= 0)
+                  onChange({
+                    cellPadding: {
+                      ...element.cellPadding,
+                      [side]: printDesign.toDisplayUnit(
+                        printDesign.fromDisplayUnit(value, displayUnit),
+                        "px"
+                      )
+                    }
+                  });
+              }
+            }
+          )
+        ] }, side))
+      ]
+    }
+  );
+}
+function TableCellsPanel({
+  element,
+  data,
+  samples = [],
+  tableCellSelection,
+  onMergeSelectedTableCells,
+  onChange
+}) {
+  const [row, setRow] = react.useState(1);
+  const [column, setColumn] = react.useState(1);
+  const rows = printDesign.resolveTableRows(element, data);
+  const rowCount = Math.max(rows.length, element.printRowCount ?? 0, 1);
+  const columnCount = Math.max(
+    printDesign.tableLeafColumns(element.columns.filter((item) => !item.hidden)).filter(
+      (item) => !item.hidden
+    ).length,
+    1
+  );
+  const rowIndex = Math.min(Math.max(row - 1, 0), rowCount - 1);
+  const columnIndex = Math.min(Math.max(column - 1, 0), columnCount - 1);
+  const cell = element.cells?.find(
+    (item) => item.rowIndex === rowIndex && item.columnIndex === columnIndex
+  );
+  const update = (patch) => {
+    const next = { rowIndex, columnIndex, ...cell, ...patch };
+    const rowSpan = Math.max(1, next.rowSpan ?? 1);
+    const colSpan = Math.max(1, next.colSpan ?? 1);
+    if ((rowSpan > 1 || colSpan > 1) && element.cells?.some(
+      (item) => (item.rowIndex !== rowIndex || item.columnIndex !== columnIndex) && ((item.rowSpan ?? 1) > 1 || (item.colSpan ?? 1) > 1) && rowIndex < item.rowIndex + Math.max(1, item.rowSpan ?? 1) && rowIndex + rowSpan > item.rowIndex && columnIndex < item.columnIndex + Math.max(1, item.colSpan ?? 1) && columnIndex + colSpan > item.columnIndex
+    ))
+      return;
+    onChange({
+      cells: [
+        ...(element.cells ?? []).filter(
+          (item) => item.rowIndex !== rowIndex || item.columnIndex !== columnIndex
+        ),
+        next
+      ]
+    });
+  };
+  const merged = (cell?.rowSpan ?? 1) > 1 || (cell?.colSpan ?? 1) > 1;
+  const selected = tableCellSelection?.elementId === element.id ? tableCellSelection : null;
+  const canMergeSelection = !!selected && !selected.selectorKind && (selected.startRow !== selected.endRow || selected.startColumn !== selected.endColumn);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.ReactCollapsePanel,
+    {
+      title: "\u5355\u5143\u683C",
+      className: "cc-print-design-property-section",
+      contentClassName: "cc-print-design-table-data cc-print-design-compact-grid",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ReactButton,
+          {
+            disabled: !canMergeSelection || !onMergeSelectedTableCells,
+            onClick: onMergeSelectedTableCells,
+            children: "\u5408\u5E76\u9009\u4E2D\u5355\u5143\u683C"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u884C",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInputNumber,
+            {
+              min: 1,
+              max: rowCount,
+              precision: 0,
+              value: row,
+              onChange: (value) => {
+                if (value != null)
+                  setRow(Math.min(rowCount, Math.max(1, Math.round(value))));
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u5217",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInputNumber,
+            {
+              min: 1,
+              max: columnCount,
+              precision: 0,
+              value: column,
+              onChange: (value) => {
+                if (value != null)
+                  setColumn(Math.min(columnCount, Math.max(1, Math.round(value))));
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u5408\u5E76\u884C\u6570",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInputNumber,
+            {
+              min: 1,
+              max: rowCount - rowIndex,
+              precision: 0,
+              value: cell?.rowSpan ?? 1,
+              onChange: (value) => {
+                if (value != null)
+                  update({
+                    rowSpan: Math.min(
+                      rowCount - rowIndex,
+                      Math.max(1, Math.round(value))
+                    )
+                  });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u5408\u5E76\u5217\u6570",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInputNumber,
+            {
+              min: 1,
+              max: columnCount - columnIndex,
+              precision: 0,
+              value: cell?.colSpan ?? 1,
+              onChange: (value) => {
+                if (value != null)
+                  update({
+                    colSpan: Math.min(
+                      columnCount - columnIndex,
+                      Math.max(1, Math.round(value))
+                    )
+                  });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ReactButton,
+          {
+            disabled: !merged,
+            onClick: () => update({ rowSpan: 1, colSpan: 1 }),
+            children: "\u53D6\u6D88\u5408\u5E76"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u5BF9\u89D2\u7EBF",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactSelect,
+            {
+              value: cell?.diagonal ?? "none",
+              options: [
+                { label: "\u65E0", value: "none" },
+                { label: "\u5DE6\u4E0A\u81F3\u53F3\u4E0B", value: "down" },
+                { label: "\u5DE6\u4E0B\u81F3\u53F3\u4E0A", value: "up" }
+              ],
+              onChange: (value) => update({
+                diagonal: value === "none" ? void 0 : value
+              })
+            }
+          )
+        ] }),
+        cell?.diagonal && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            "\u8D77\u59CB\u5185\u5BB9",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactInput,
+              {
+                value: cell.diagonalStart ?? "",
+                onChange: (event) => update({ diagonalStart: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            "\u7ED3\u675F\u5185\u5BB9",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactInput,
+              {
+                value: cell.diagonalEnd ?? "",
+                onChange: (event) => update({ diagonalEnd: event.target.value })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u80CC\u666F\u989C\u8272",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactColorPicker,
+            {
+              value: cell?.backgroundColor ?? "#ffffff",
+              onChange: (backgroundColor) => update({ backgroundColor })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u6587\u5B57\u989C\u8272",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactColorPicker,
+            {
+              value: cell?.color ?? "#000000",
+              onChange: (color) => update({ color })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u8FB9\u6846\u989C\u8272",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactColorPicker,
+            {
+              value: cell?.borderColor ?? element.cellBorder?.color ?? "#000000",
+              onChange: (borderColor) => update({ borderColor })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u52A8\u6001\u8FB9\u6846\u5B57\u6BB5" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DataPathPicker,
+            {
+              label: "\u52A8\u6001\u8FB9\u6846\u5B57\u6BB5",
+              value: cell?.borderPath ?? "",
+              samples: [rows[rowIndex] ?? {}, ...samples],
+              onChange: (borderPath) => update({ borderPath })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ReactButton,
+          {
+            onClick: () => update({ borderColor: "transparent", borderPath: void 0 }),
+            children: "\u9690\u85CF\u6B64\u5355\u5143\u683C\u8FB9\u6846"
+          }
+        )
+      ]
+    }
+  );
+}
+function TableAutoMergePanel({
+  element,
+  onChange
+}) {
+  const [rowKeys, setRowKeys] = react.useState("");
+  const [rowColumns, setRowColumns] = react.useState("");
+  const [columnKeys, setColumnKeys] = react.useState("");
+  react.useEffect(() => {
+    setRowKeys(element.mergeCell?.row?.keys.join(", ") ?? "");
+    setRowColumns(element.mergeCell?.row?.columns?.join(", ") ?? "");
+    setColumnKeys(element.mergeCell?.column?.keys.join(", ") ?? "");
+  }, [element.mergeCell]);
+  const fields = (value) => value.split(",").map((item) => item.trim()).filter(Boolean);
+  const apply = (nextRows, nextColumns, nextColumnKeys) => {
+    const keys = fields(nextRows);
+    const columns = fields(nextColumns);
+    const horizontal = fields(nextColumnKeys);
+    const mergeCell = {
+      row: keys.length ? { keys, columns: columns.length ? columns : void 0 } : void 0,
+      column: horizontal.length ? { keys: horizontal } : void 0
+    };
+    onChange({
+      mergeCell: mergeCell.row || mergeCell.column ? mergeCell : void 0
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.ReactCollapsePanel,
+    {
+      title: "\u6570\u636E\u81EA\u52A8\u5408\u5E76",
+      className: "cc-print-design-property-section",
+      contentClassName: "cc-print-design-table-data cc-print-design-compact-grid",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-tour-field": "mergeCell", children: [
+          "\u8FDE\u7EED\u884C\u5206\u7EC4\u5B57\u6BB5",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInput,
             {
-              checked: element.showSummary !== false,
-              onChange: (event) => onChange({ showSummary: event.target.checked }),
-              children: "\u663E\u793A\u6C47\u603B\u884C"
+              value: rowKeys,
+              placeholder: "\u4F8B\u5982\uFF1A\u8BA2\u5355\u7C7B\u578B, \u9879\u76EE",
+              onChange: (event) => setRowKeys(event.target.value),
+              onBlur: () => apply(rowKeys, rowColumns, columnKeys)
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-            "\u6C47\u603B\u884C\u9AD8",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.ReactInputNumber,
-              {
-                "aria-label": "\u6C47\u603B\u884C\u9AD8",
-                min: printDesign.toDisplayUnit(1, displayUnit),
-                value: printDesign.toDisplayUnit(
-                  element.summaryRowHeight ?? element.rowHeight ?? 8,
-                  displayUnit
-                ),
-                onChange: (value) => {
-                  if (value != null && Number.isFinite(value) && value > 0)
-                    onChange({
-                      summaryRowHeight: printDesign.fromDisplayUnit(value, displayUnit)
-                    });
-                }
-              }
-            )
-          ] }),
-          showGrandTotalOption ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.ReactCheckbox,
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u6267\u884C\u884C\u5408\u5E76\u7684\u5217",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInput,
             {
-              checked: element.showGrandTotal ?? true,
-              onChange: (event) => onChange({ showGrandTotal: event.target.checked }),
-              children: "\u663E\u793A\u603B\u8BA1\u5217"
+              value: rowColumns,
+              placeholder: "\u7559\u7A7A\u65F6\u4F7F\u7528\u5206\u7EC4\u5B57\u6BB5",
+              onChange: (event) => setRowColumns(event.target.value),
+              onBlur: () => apply(rowKeys, rowColumns, columnKeys)
             }
-          ) : null
-        ]
-      }
-    )
-  ] });
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "\u540C\u884C\u76F8\u90BB\u5217\u5408\u5E76\u5B57\u6BB5",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactInput,
+            {
+              value: columnKeys,
+              placeholder: "\u4F8B\u5982\uFF1A\u5206\u7C7B, \u5907\u6CE8",
+              onChange: (event) => setColumnKeys(event.target.value),
+              onBlur: () => apply(rowKeys, rowColumns, columnKeys)
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function TableColorsPanel({
   colors,
@@ -4350,6 +5162,24 @@ function TableColumnsPanel({
               title: "\u5355\u5143\u683C\u5E03\u5C40",
               contentClassName: "cc-print-design-column-grid",
               children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.ReactButton,
+                  {
+                    type: "text",
+                    onClick: () => update(index, {
+                      align: void 0,
+                      cellOverflow: void 0,
+                      ellipsis: void 0,
+                      cellPadding: void 0,
+                      cellStyle: column.cellStyle ? {
+                        ...column.cellStyle,
+                        textAlign: void 0,
+                        verticalAlign: void 0
+                      } : void 0
+                    }),
+                    children: "\u6062\u590D\u8868\u683C\u7EDF\u4E00\u5E03\u5C40"
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
                   "\u6C34\u5E73\u5BF9\u9F50",
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -4384,14 +5214,44 @@ function TableColumnsPanel({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     reactComponents.ReactSelect,
                     {
-                      value: column.ellipsis == null ? layoutDefaults?.cellOverflow ?? "wrap" : column.ellipsis ? "ellipsis" : "wrap",
+                      value: column.cellOverflow ?? (column.ellipsis == null ? layoutDefaults?.cellOverflow ?? "wrap" : column.ellipsis ? "ellipsis" : "wrap"),
                       options: TABLE_OVERFLOW_OPTIONS,
                       onChange: (value) => update(index, {
-                        ellipsis: value === "ellipsis"
+                        cellOverflow: value
                       })
                     }
                   )
-                ] })
+                ] }),
+                ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-column-half", children: [
+                  { top: "\u4E0A", right: "\u53F3", bottom: "\u4E0B", left: "\u5DE6" }[side],
+                  "\u5185\u8FB9\u8DDD",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.ReactInputNumber,
+                    {
+                      min: 0,
+                      step: 0.1,
+                      value: printDesign.toDisplayUnit(
+                        printDesign.fromDisplayUnit(
+                          column.cellPadding?.[side] ?? layoutDefaults?.cellPadding?.[side] ?? (side === "left" || side === "right" ? 4 : 0),
+                          "px"
+                        ),
+                        displayUnit
+                      ),
+                      onChange: (value) => {
+                        if (value != null && Number.isFinite(value) && value >= 0)
+                          update(index, {
+                            cellPadding: {
+                              ...column.cellPadding,
+                              [side]: printDesign.toDisplayUnit(
+                                printDesign.fromDisplayUnit(value, displayUnit),
+                                "px"
+                              )
+                            }
+                          });
+                      }
+                    }
+                  )
+                ] }, side))
               ]
             }
           ),
@@ -4502,8 +5362,14 @@ function TablePropertiesPanel({
   page,
   data,
   samples,
+  tableCellSelection,
+  onMergeSelectedTableCells,
   onChange
 }) {
+  const borderSamples = [
+    ...samples ?? [data ?? {}],
+    ...printDesign.resolveTableRows(element, data).slice(0, 100)
+  ];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TableRowSettingsPanel,
@@ -4513,7 +5379,27 @@ function TablePropertiesPanel({
         onChange
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(TableLayoutPanel, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TableLayoutPanel,
+      {
+        element,
+        samples: borderSamples,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCellLayoutPanel, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TableCellsPanel,
+      {
+        element,
+        data,
+        samples: borderSamples,
+        tableCellSelection,
+        onMergeSelectedTableCells,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TableAutoMergePanel, { element, onChange }),
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.ReactCollapsePanel,
       {
@@ -5075,15 +5961,15 @@ function PivotTablePropertiesPanel({
         defaultOpen: true,
         className: "cc-print-design-property-section",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-table-data cc-print-design-data-compact", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-tour-field": "dataMode", children: /* @__PURE__ */ jsxRuntime.jsx(
             DataModeButtons,
             {
               value: element.dataMode ?? "static",
               onChange: (dataMode) => onChange({ dataMode })
             }
-          ),
+          ) }),
           element.dataMode === "binding" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", "data-tour-field": "dataPath", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "ListTable \u6570\u636E\u6E90\u8DEF\u5F84" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 DataPathPicker,
@@ -5271,6 +6157,7 @@ function PivotTablePropertiesPanel({
           showSummary: element.showSummary ?? element.showGrandTotal ?? true
         },
         onChange,
+        samples: samples ?? [data],
         showGrandTotalOption: true
       }
     ),
@@ -5616,6 +6503,7 @@ function BorderFields({
           min: 0,
           max: printDesign.toDisplayUnit(printDesign.fromDisplayUnit(10, "px"), displayUnit),
           step: displayUnit === "in" ? 1e-3 : 0.01,
+          precision: displayUnit === "in" ? 3 : 2,
           value: printDesign.toDisplayUnit(
             printDesign.fromDisplayUnit(value?.width ?? 1, "px"),
             displayUnit
@@ -5672,16 +6560,16 @@ function GanttPropertiesPanel({
         className: "cc-print-design-property-section",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-table-data cc-print-design-data-compact", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-tour-field": "dataMode", children: /* @__PURE__ */ jsxRuntime.jsx(
               DataModeButtons,
               {
                 label: "\u4EFB\u52A1\u6570\u636E\u65B9\u5F0F",
                 value: element.dataMode ?? "static",
                 onChange: (dataMode) => onChange({ dataMode })
               }
-            ),
+            ) }),
             element.dataMode === "binding" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", "data-tour-field": "dataPath", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u4EFB\u52A1\u6570\u7EC4\u8DEF\u5F84" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DataPathPicker,
@@ -5755,6 +6643,7 @@ function GanttPropertiesPanel({
                   min: 0,
                   max: printDesign.toDisplayUnit(printDesign.fromDisplayUnit(10, "px"), displayUnit),
                   step: displayUnit === "in" ? 1e-3 : 0.01,
+                  precision: displayUnit === "in" ? 3 : 2,
                   value: printDesign.toDisplayUnit(
                     printDesign.fromDisplayUnit(element.dependencyLineWidth ?? 1, "px"),
                     displayUnit
@@ -6125,6 +7014,8 @@ function ElementDataPanel(props) {
             element,
             data,
             samples: props.samples,
+            tableCellSelection: props.tableCellSelection,
+            onMergeSelectedTableCells: props.onMergeSelectedTableCells,
             onChange
           }
         )
@@ -6138,14 +7029,14 @@ function ElementDataPanel(props) {
       defaultOpen: true,
       className: "cc-print-design-property-section",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-property-grid", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-tour-field": "dataConfig.mode", children: /* @__PURE__ */ jsxRuntime.jsx(
           DataModeButtons,
           {
             value: config.mode,
             disabled: props.readonly,
             onChange: (mode) => onChange({ dataConfig: { ...config, mode } })
           }
-        ),
+        ) }),
         printDesign.getPrintDesignDataFields(element.type).map((field) => {
           if (element.type === "shape" && config.mode === "static") return null;
           const value = element[field.key] ?? field.fallback;
@@ -6168,28 +7059,36 @@ function ElementDataPanel(props) {
             "div",
             {
               className: "cc-print-design-field cc-print-design-field-full",
+              "data-tour-field": field.key,
               children: [
-                config.mode === "binding" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cc-print-design-field", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    field.label,
-                    " \xB7 \u5B57\u6BB5\u8DEF\u5F84"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DataPathPicker,
-                    {
-                      label: `${field.label}\u7ED1\u5B9A\u8DEF\u5F84`,
-                      disabled: props.readonly,
-                      value: path,
-                      samples: props.samples ?? [data],
-                      onChange: (path2) => onChange({
-                        dataConfig: {
-                          ...config,
-                          bindings: { ...config.bindings, [field.key]: path2 }
+                config.mode === "binding" && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "cc-print-design-field",
+                    "data-tour-field": `dataConfig.bindings.${field.key}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        field.label,
+                        " \xB7 \u5B57\u6BB5\u8DEF\u5F84"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DataPathPicker,
+                        {
+                          label: `${field.label}\u7ED1\u5B9A\u8DEF\u5F84`,
+                          disabled: props.readonly,
+                          value: path,
+                          samples: props.samples ?? [data],
+                          onChange: (path2) => onChange({
+                            dataConfig: {
+                              ...config,
+                              bindings: { ...config.bindings, [field.key]: path2 }
+                            }
+                          })
                         }
-                      })
-                    }
-                  )
-                ] }),
+                      )
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DataValueField,
                   {
@@ -7452,21 +8351,28 @@ function PropertiesPanel(props) {
             onChange: (rotation) => props.onElementChange({ rotation })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-field cc-print-design-field-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8D85\u51FA\u7EB8\u5F20" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.ReactSelect,
-            {
-              "aria-label": "\u8D85\u51FA\u7EB8\u5F20\u5904\u7406\u65B9\u5F0F",
-              value: element.overflowPolicy ?? (element.type === "text" || element.type === "table" || element.type === "pivotTable" ? "split" : "nextPage"),
-              options: getOverflowPolicyOptions(element.type),
-              disabled: props.readonly,
-              onChange: (value) => props.onElementChange({
-                overflowPolicy: value
-              })
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "cc-print-design-field cc-print-design-field-full",
+            "data-tour-field": "overflowPolicy",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8D85\u51FA\u7EB8\u5F20" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.ReactSelect,
+                {
+                  "aria-label": "\u8D85\u51FA\u7EB8\u5F20\u5904\u7406\u65B9\u5F0F",
+                  value: element.overflowPolicy ?? (element.type === "text" || element.type === "table" || element.type === "pivotTable" ? "split" : "nextPage"),
+                  options: getOverflowPolicyOptions(element.type),
+                  disabled: props.readonly,
+                  onChange: (value) => props.onElementChange({
+                    overflowPolicy: value
+                  })
+                }
+              )
+            ]
+          }
+        )
       ] }),
       element.type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(PropertySection, { title: "\u6587\u672C\u6837\u5F0F", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -8264,6 +9170,8 @@ function PropertiesPanel(props) {
           data: props.data,
           samples: props.samples,
           readonly: props.readonly,
+          tableCellSelection: props.tableCellSelection,
+          onMergeSelectedTableCells: props.onMergeSelectedTableCells,
           onChange: props.onElementChange
         },
         element.id
@@ -8445,31 +9353,59 @@ function NumberField(props) {
   const dimensional = NUMBER_FIELD_DIMENSIONS.has(props.label);
   const unit = dimensional || fontSize ? displayUnit : "mm";
   const toInput = (value) => printDesign.toDisplayUnit(fontSize ? printDesign.fromDisplayUnit(value, "pt") : value, unit);
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-field", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactComponents.ReactInputNumber,
-      {
-        "aria-label": props.label,
-        value: toInput(props.value),
-        min: props.min == null ? void 0 : toInput(props.min),
-        max: props.max == null ? void 0 : toInput(props.max),
-        step: props.step ?? (fontSize ? 0.1 : 1),
-        precision: props.precision ?? 2,
-        disabled: props.disabled,
-        onChange: (value) => value != null && props.onChange(
-          fontSize ? printDesign.toDisplayUnit(printDesign.fromDisplayUnit(value, unit), "pt") : printDesign.fromDisplayUnit(value, unit)
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "cc-print-design-field",
+      "data-tour-field": numberTourFields[props.label],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ReactInputNumber,
+          {
+            "aria-label": props.label,
+            value: toInput(props.value),
+            min: props.min == null ? void 0 : toInput(props.min),
+            max: props.max == null ? void 0 : toInput(props.max),
+            step: props.step ?? (fontSize ? 0.1 : 1),
+            precision: props.precision ?? 2,
+            disabled: props.disabled,
+            onChange: (value) => value != null && props.onChange(
+              fontSize ? printDesign.toDisplayUnit(printDesign.fromDisplayUnit(value, unit), "pt") : printDesign.fromDisplayUnit(value, unit)
+            )
+          }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function ColorField(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cc-print-design-field", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactColorPicker, { value: props.value, onChange: props.onChange })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "cc-print-design-field",
+      "data-tour-field": colorTourFields[props.label],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactColorPicker, { value: props.value, onChange: props.onChange })
+      ]
+    }
+  );
 }
+var numberTourFields = {
+  X: "x",
+  Y: "y",
+  \u5BBD\u5EA6: "width",
+  \u9AD8\u5EA6: "height",
+  \u65CB\u8F6C: "rotation",
+  \u5B57\u53F7: "fontSize",
+  \u884C\u9AD8: "rowHeight"
+};
+var colorTourFields = {
+  \u6587\u5B57\u989C\u8272: "color",
+  \u586B\u5145\u989C\u8272: "fill",
+  \u8FB9\u6846\u989C\u8272: "borderColor"
+};
 function formatTime(value) {
   return value ? new Date(value).toLocaleString("zh-CN") : "-";
 }
@@ -8697,7 +9633,7 @@ async function writePrintDesignTemplates(storeKey, versions) {
 }
 
 // src/style.css
-styleInject('.cc-print-design-editor {\n  position: relative;\n  --pd-border: #e4e8ef;\n  --pd-text: var(--canvas-react-color-text, #263244);\n  --pd-muted: var(--canvas-react-color-text-muted, #8993a2);\n  --pd-primary: #1677ff;\n  --pd-background: #f7f8fa;\n  --pd-surface: #fff;\n  --pd-workspace: #e9edf3;\n  --pd-hover: #f5f7fa;\n  --pd-selected: #edf4ff;\n  --pd-subtle: #fafbfd;\n  --pd-icon: #4279cb;\n  --pd-divider: #edf0f4;\n  --pd-selected-border: #86b4ff;\n  --pd-danger: #dc2626;\n  --pd-brand-start: #428cff;\n  --pd-brand-end: #1261d8;\n  --canvas-react-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--pd-primary) 18%, transparent);\n  --pd-label-font-size: var(--canvas-react-font-size-label, 12px);\n  --pd-primary-font-size: var(--canvas-react-font-size, 13px);\n  --pd-secondary-font-size: var(--canvas-react-font-size-secondary, 11px);\n  --pd-panel-header-height: 36px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  color: var(--pd-text);\n  background: var(--pd-background);\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "PingFang SC",\n    "Microsoft YaHei",\n    sans-serif;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-editor:fullscreen {\n  width: 100vw !important;\n  height: 100vh !important;\n}\n.cc-print-design-toolbar {\n  z-index: 2;\n  display: flex;\n  flex: 0 0 58px;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 18px;\n  border-bottom: 1px solid var(--pd-border);\n  background: var(--pd-surface);\n}\n.cc-print-design-brand,\n.cc-print-design-brand > div,\n.cc-print-design-toolbar-group {\n  display: flex;\n  align-items: center;\n}\n.cc-print-design-brand {\n  gap: 10px;\n  min-width: 180px;\n}\n.cc-print-design-brand > div {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n}\n.cc-print-design-brand strong {\n  max-width: 170px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-brand small {\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-brand-mark {\n  display: grid;\n  width: 32px;\n  height: 32px;\n  place-items: center;\n  border-radius: 9px;\n  color: #fff;\n  background:\n    linear-gradient(\n      145deg,\n      var(--pd-brand-start),\n      var(--pd-brand-end));\n  font-size: 16px;\n  font-weight: 700;\n}\n.cc-print-design-toolbar-group {\n  gap: 7px;\n}\n.cc-print-design-toolbar-unit {\n  margin-left: 8px;\n  padding: 4px 9px;\n  border: 1px solid var(--pd-border);\n  border-radius: 5px;\n  color: var(--pd-muted);\n  background: var(--pd-surface);\n  font-size: var(--pd-secondary-font-size);\n  white-space: nowrap;\n}\n.cc-print-design-clock-options {\n  grid-column: 1 / -1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n}\n.cc-print-design-save-status {\n  max-width: 120px;\n  overflow: hidden;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cc-print-design-template-list {\n  gap: 9px;\n}\n.cc-print-design-template-card {\n  display: flex;\n  flex-direction: column;\n  min-height: 58px;\n  padding: 8px;\n  border: 1px solid var(--pd-border);\n  border-radius: 7px;\n  background: var(--pd-surface);\n}\n.cc-print-design-template-card.selected {\n  border-color: var(--pd-selected-border);\n  box-shadow: 0 0 0 2px var(--pd-selected);\n}\n.cc-print-design-template-select,\n.cc-print-design-template-heading {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 10px;\n}\n.cc-print-design-template-heading {\n  flex-wrap: wrap;\n}\n.cc-print-design-template-heading > .cc-print-design-page-thumbnail {\n  flex: 0 0 31px;\n}\n.cc-print-design-template-heading > .cc-print-design-template-label {\n  flex: 1 1 calc(100% - 41px);\n}\n.cc-print-design-template-heading > .canvas-react-button {\n  width: 26px;\n  height: 26px;\n  flex: 0 0 26px;\n}\n.cc-print-design-template-heading > .canvas-react-button:first-of-type {\n  margin-left: auto;\n}\n.cc-print-design-template-select {\n  width: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--pd-text);\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-template-select.selected,\n.cc-print-design-template-versions button.selected {\n  color: var(--pd-primary);\n  font-weight: 600;\n}\n.cc-print-design-template-label {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n}\n.cc-print-design-template-label strong {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-primary-font-size);\n}\n.cc-print-design-template-label small {\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size);\n}\n.cc-print-design-template-invalid {\n  color: var(--pd-danger);\n  font-size: var(--pd-secondary-font-size);\n  font-weight: 600;\n}\n.cc-print-design-template-versions {\n  display: flex;\n  flex-direction: column;\n  margin: 7px 0 0 41px;\n  border-top: 1px solid var(--pd-border);\n}\n.cc-print-design-template-version {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-template-version > button:first-child {\n  flex: 1;\n  min-width: 0;\n  padding: 7px 0;\n  border: 0;\n  background: transparent;\n  color: var(--pd-muted);\n  cursor: pointer;\n  text-align: left;\n  font-size: var(--pd-secondary-font-size);\n}\n.cc-print-design-template-version > .canvas-react-button {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n  padding: 0;\n  border: 0;\n  color: var(--pd-muted);\n  background: transparent;\n}\n.cc-print-design-template-version > .canvas-react-button:hover:not(:disabled) {\n  color: var(--pd-danger);\n}\n.cc-print-design-toolbar .canvas-react-button {\n  box-sizing: border-box;\n  width: 32px;\n  height: 32px;\n  flex: 0 0 32px;\n  padding: 4px;\n}\n.cc-print-design-toolbar-separator {\n  width: 1px;\n  height: 22px;\n  margin: 0 5px;\n  background: var(--pd-border);\n}\n.cc-print-design-zoom-value {\n  min-width: 40px;\n  color: var(--pd-muted);\n  font-size: var(--pd-primary-font-size, 13px);\n  text-align: center;\n}\n.cc-print-design-zoom-value input {\n  box-sizing: border-box;\n  width: 42px;\n  padding: 3px 2px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--pd-text);\n  font: inherit;\n  text-align: right;\n}\n.cc-print-design-zoom-value input:focus {\n  border-color: var(--pd-primary);\n  outline: none;\n}\n.cc-print-design-panel-width-group {\n  display: grid;\n  gap: 6px;\n  margin-bottom: 12px;\n}\n.cc-print-design-panel-width-group strong {\n  font-size: var(--pd-primary-font-size);\n}\n.cc-print-design-custom-component-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-custom-component-row > .cc-print-design-component-item {\n  flex: 1;\n  min-width: 0;\n}\n.cc-print-design-toolbar button[aria-label] {\n  position: relative;\n}\n.cc-print-design-toolbar button[aria-label]::after {\n  position: absolute;\n  z-index: 10;\n  top: calc(100% + 8px);\n  left: 50%;\n  width: max-content;\n  max-width: 220px;\n  padding: 5px 8px;\n  border-radius: 5px;\n  background: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  content: attr(aria-label);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.35;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateX(-50%) translateY(-3px);\n  transition: opacity 0.15s ease, transform 0.15s ease;\n  white-space: normal;\n}\n.cc-print-design-toolbar button[aria-label]:is(:hover, :focus-visible)::after {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n.cc-print-design-workspace {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.cc-print-design-canvas-host {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n.cc-print-design-side-host {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n.cc-print-design-side-host[inert],\n.cc-print-design-properties-host[inert] {\n  opacity: 0.72;\n}\n.cc-print-design-preview-navigation {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  white-space: nowrap;\n}\n.cc-print-design-preview-navigation > span {\n  min-width: 44px;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.cc-print-design-mobile-nav {\n  display: none;\n}\n.cc-print-design-panels {\n  width: 100%;\n  height: 100%;\n}\n.cc-print-design-panels > .canvas-react-resizable-panels-item {\n  min-width: 0;\n  min-height: 0;\n}\n.cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(1),\n.cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(3) {\n  background: var(--pd-surface);\n}\n.cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(2) {\n  overflow: hidden;\n  background: var(--pd-workspace);\n}\n.cc-print-design-canvas-frame {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n.cc-print-design-left-panel,\n.cc-print-design-properties {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  flex-direction: column;\n  overflow: auto;\n  scrollbar-width: none;\n  background: var(--pd-surface);\n}\n.cc-print-design-left-panel::-webkit-scrollbar,\n.cc-print-design-properties::-webkit-scrollbar {\n  display: none;\n}\n.cc-print-design-properties-host {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n.cc-print-design-tabs {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  box-sizing: border-box;\n  height: var(--pd-panel-header-height);\n  flex: 0 0 var(--pd-panel-header-height);\n  border-bottom: 1px solid var(--pd-border);\n  background: var(--pd-surface);\n}\n.cc-print-design-tabs button {\n  position: relative;\n  flex: 1;\n  border: 0;\n  color: var(--pd-muted);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-tabs button.active {\n  color: var(--pd-primary);\n}\n.cc-print-design-tabs button.active::after {\n  position: absolute;\n  right: 18px;\n  bottom: -1px;\n  left: 18px;\n  height: 2px;\n  background: var(--pd-primary);\n  content: "";\n}\n.cc-print-design-component-list,\n.cc-print-design-layer-list,\n.cc-print-design-page-list {\n  padding: 14px 12px;\n}\n.cc-print-design-section-title {\n  margin: 0;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n  font-weight: 600;\n  letter-spacing: 0.04em;\n}\n.cc-print-design-component-list .cc-print-design-section-title,\n.cc-print-design-layer-list .cc-print-design-section-title {\n  margin: 3px 3px 10px;\n}\n.cc-print-design-component-item {\n  display: flex;\n  width: 100%;\n  height: 38px;\n  align-items: center;\n  gap: 10px;\n  padding: 0 9px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: var(--pd-text);\n  background: var(--pd-surface);\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-component-item:hover {\n  border-color: var(--pd-selected-border);\n  color: var(--pd-primary);\n  background: var(--pd-selected);\n}\n.cc-print-design-component-item > span {\n  display: grid;\n  width: 22px;\n  height: 22px;\n  place-items: center;\n  border-radius: 5px;\n  color: var(--pd-icon);\n  background: var(--pd-selected);\n  font-size: 15px;\n}\n.cc-print-design-component-item b {\n  margin-left: auto;\n  color: var(--pd-muted);\n  font-weight: 400;\n}\n.cc-print-design-hint {\n  margin: 12px 4px;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n  line-height: 1.6;\n}\n.cc-print-design-layer-item {\n  display: flex;\n  width: 100%;\n  height: 34px;\n  align-items: center;\n  gap: 8px;\n  padding: 0 7px;\n  border: 0;\n  border-radius: 5px;\n  color: var(--pd-text);\n  background: transparent;\n  text-align: left;\n}\n.cc-print-design-layer-item:hover {\n  background: var(--pd-hover);\n}\n.cc-print-design-layer-item.selected {\n  color: var(--pd-primary);\n  background: var(--pd-selected);\n}\n.cc-print-design-layer-select {\n  display: flex;\n  min-width: 0;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-layer-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cc-print-design-layer-delete,\n.cc-print-design-layer-lock {\n  width: 23px;\n  height: 23px;\n  flex: 0 0 23px;\n  border: 0;\n  border-radius: 4px;\n  color: var(--pd-muted);\n  background: transparent;\n  cursor: pointer;\n  font-size: 17px;\n}\n.cc-print-design-layer-delete:hover {\n  color: var(--pd-danger);\n  background: var(--pd-surface);\n}\n.cc-print-design-layer-lock:hover,\n.cc-print-design-layer-lock[aria-pressed=true] {\n  color: var(--pd-primary);\n  background: var(--pd-surface);\n}\n.cc-print-design-empty {\n  padding: 20px 0;\n  color: var(--pd-muted);\n  font-size: var(--pd-primary-font-size, 13px);\n  text-align: center;\n}\n.cc-print-design-page-list {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n}\n.cc-print-design-page-list-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 1px 3px 4px;\n}\n.cc-print-design-page-list-head .cc-print-design-add-link {\n  border: 0;\n  padding: 2px 0;\n  color: var(--pd-primary);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-add-link:hover:not(:disabled) {\n  text-decoration: underline;\n}\n.cc-print-design-add-link:disabled {\n  color: var(--pd-muted);\n  cursor: not-allowed;\n}\n.cc-print-design-page-card {\n  display: flex;\n  min-height: 58px;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  border: 1px solid var(--pd-border);\n  border-radius: 7px;\n  background: var(--pd-surface);\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-page-card.selected {\n  border-color: var(--pd-selected-border);\n  box-shadow: 0 0 0 2px var(--pd-selected);\n}\n.cc-print-design-page-thumbnail {\n  display: grid;\n  width: 31px;\n  height: 40px;\n  place-items: center;\n  border: 1px solid var(--pd-border);\n  border-radius: 3px;\n  color: var(--pd-muted);\n  background: var(--pd-subtle);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-page-card > span:last-child {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 4px;\n}\n.cc-print-design-page-card strong {\n  overflow: hidden;\n  color: var(--pd-text);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-page-card small {\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-page-shortcut {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: auto 12px 12px;\n  padding: 10px 9px;\n  border-top: 1px solid var(--pd-border);\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-page-shortcut div {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.cc-print-design-page-shortcut strong {\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-page-shortcut button {\n  padding: 5px 7px;\n  border: 1px solid var(--pd-border);\n  border-radius: 4px;\n  color: var(--pd-muted);\n  background: var(--pd-surface);\n  cursor: pointer;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-properties-title {\n  display: flex;\n  box-sizing: border-box;\n  height: var(--pd-panel-header-height);\n  flex: 0 0 var(--pd-panel-header-height);\n  align-items: center;\n  gap: 8px;\n  padding: 0 15px;\n  border-bottom: 1px solid var(--pd-border);\n}\n.cc-print-design-properties .canvas-react-button {\n  font-size: var(--canvas-react-font-size, 14px);\n}\n.cc-print-design-properties-title strong {\n  flex-shrink: 0;\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-properties-title span {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--pd-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-property-section {\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pd-divider);\n}\n.cc-print-design-property-section > .canvas-react-collapse-panel-trigger {\n  box-sizing: border-box;\n  height: calc(var(--pd-panel-header-height) - 1px);\n  padding: 0 14px;\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-editor .canvas-react-collapse-panel-title {\n  color: var(--pd-text);\n}\n.cc-print-design-property-section > .canvas-react-collapse-panel-content {\n  padding: 0 14px 15px;\n}\n.cc-print-design-property-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 11px 9px;\n}\n.cc-print-design-field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 5px;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-field > :last-child {\n  width: 100%;\n  min-width: 0;\n}\n.cc-print-design-field-full {\n  grid-column: 1 / -1;\n}\n.cc-print-design-text-size-rule {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 5px;\n}\n.cc-print-design-text-editor::-webkit-scrollbar {\n  display: none;\n}\n.cc-print-design-template-property-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.cc-print-design-template-property-fields time {\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-field .canvas-react-input,\n.cc-print-design-field .canvas-react-input-affix-wrapper,\n.cc-print-design-field .canvas-react-select,\n.cc-print-design-field .canvas-react-color {\n  width: 100%;\n}\n.cc-print-design-paper-row {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-paper-row > .canvas-react-select {\n  flex: 1;\n  width: 0;\n  min-width: 0;\n}\n.cc-print-design-paper-actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-paper-actions .canvas-react-button {\n  width: 32px;\n  padding: 6px;\n}\n.cc-print-design-paper-dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n.cc-print-design-paper-list {\n  max-height: min(32vh, 240px);\n  overflow: auto;\n  border: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-radius: 4px;\n}\n.cc-print-design-paper-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 36px 36px;\n  align-items: center;\n  gap: 3px;\n  min-height: 48px;\n  padding: 4px 8px 4px 12px;\n}\n.cc-print-design-paper-item .canvas-react-button {\n  width: 36px;\n  padding: 8px;\n}\n.cc-print-design-paper-item + .cc-print-design-paper-item {\n  border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.cc-print-design-paper-item > div {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px 8px;\n  min-width: 0;\n}\n.cc-print-design-paper-item strong {\n  overflow-wrap: anywhere;\n}\n.cc-print-design-paper-item span,\n.cc-print-design-paper-empty {\n  color: var(--pd-muted, #667085);\n}\n.cc-print-design-paper-empty {\n  margin: 4px 0;\n}\n.cc-print-design-paper-form,\n.cc-print-design-paper-form label {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  min-width: 0;\n}\n.cc-print-design-paper-form label > span:first-child {\n  font-size: 12px;\n}\n.cc-print-design-paper-dimensions {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.cc-print-design-paper-error {\n  margin: 0;\n  color: #c2410c;\n  font-size: 12px;\n}\n.cc-print-design-paper-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n@media (max-width: 440px) {\n  .cc-print-design-paper-dimensions {\n    grid-template-columns: 1fr;\n  }\n}\n.cc-print-design-margin-grid {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n}\n@media (max-width: 900px) {\n  .cc-print-design-toolbar {\n    gap: 8px;\n    padding: 0 9px;\n  }\n  .cc-print-design-brand {\n    min-width: 120px;\n  }\n  .cc-print-design-brand small,\n  .cc-print-design-toolbar-group:nth-child(2) .cc-print-design-toolbar-separator {\n    display: none;\n  }\n  .cc-print-design-toolbar-group {\n    gap: 4px;\n  }\n}\n@media (max-width: 700px) {\n  .cc-print-design-toolbar {\n    flex-basis: 50px;\n    justify-content: flex-start;\n    overflow-x: auto;\n    white-space: nowrap;\n  }\n  .cc-print-design-brand {\n    flex: 0 0 auto;\n  }\n  .cc-print-design-toolbar-group {\n    flex: 0 0 auto;\n  }\n  .cc-print-design-mobile-nav {\n    display: flex;\n    height: 36px;\n    flex: 0 0 36px;\n    border-bottom: 1px solid var(--pd-border);\n    background: var(--pd-surface);\n  }\n  .cc-print-design-mobile-nav button {\n    flex: 1;\n    border: 0;\n    background: transparent;\n    color: var(--pd-muted);\n    font: inherit;\n  }\n  .cc-print-design-mobile-nav button.active {\n    border-bottom: 2px solid var(--pd-primary);\n    color: var(--pd-primary);\n    font-weight: 600;\n  }\n  .cc-print-design-panels .canvas-react-resizable-panels-divider {\n    display: none;\n  }\n  .cc-print-design-panels > .canvas-react-resizable-panels-item {\n    display: none;\n    width: 100% !important;\n    flex: 1 1 100% !important;\n  }\n  .cc-print-design-panels .canvas-react-resizable-panel {\n    width: 100% !important;\n    max-width: none !important;\n    height: 100% !important;\n    flex: 1 1 100% !important;\n  }\n  .cc-print-design-editor[data-mobile-view=panel] .cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(1),\n  .cc-print-design-editor[data-mobile-view=canvas] .cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(2),\n  .cc-print-design-editor[data-mobile-view=properties] .cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(3) {\n    display: flex;\n  }\n}\n.cc-print-design-settings {\n  --canvas-react-control-height: 28px;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n}\n.cc-print-design-settings-toggle {\n  display: flex;\n  min-height: 28px;\n  align-items: center;\n  margin: 6px 0;\n}\n.cc-print-design-settings-global-actions {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  padding: 12px;\n  border-bottom: 1px solid var(--pd-border);\n}\n.cc-print-design-settings-global-actions .canvas-react-button {\n  flex-shrink: 0;\n  margin-left: auto;\n  padding-inline: 4px;\n  border-color: transparent;\n  background: transparent;\n  color: var(--pd-primary, #1677ff);\n}\n.cc-print-design-settings-global-actions .canvas-react-checkbox {\n  min-width: 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-theme-options {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding-top: 12px;\n}\n.cc-print-design-theme-option {\n  display: flex;\n  min-width: 0;\n  min-height: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 6px 8px;\n  border: 1px solid var(--pd-border);\n  border-radius: 4px;\n  background: var(--pd-surface);\n  color: var(--pd-text);\n  cursor: pointer;\n  font: inherit;\n  white-space: nowrap;\n}\n.cc-print-design-theme-option:hover,\n.cc-print-design-theme-option[aria-pressed=true] {\n  border-color: var(--pd-primary);\n}\n.cc-print-design-theme-option[aria-pressed=true] {\n  background: var(--pd-selected);\n}\n.cc-print-design-theme-option:focus-visible {\n  outline: 2px solid var(--pd-primary);\n  outline-offset: 2px;\n}\n.cc-print-design-theme-swatches {\n  display: flex;\n  width: 37px;\n  height: 19px;\n  flex: 0 0 37px;\n  overflow: hidden;\n  border: 1px solid var(--pd-border);\n  border-radius: 3px;\n}\n.cc-print-design-theme-swatches > span {\n  flex: 1;\n}\n.cc-print-design-settings-toggle .canvas-react-checkbox {\n  min-width: 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-settings-field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 14px;\n}\n.cc-print-design-settings-field > span:first-child {\n  color: var(--pd-muted);\n  font-size: var(--pd-primary-font-size, 13px);\n  line-height: 18px;\n}\n.cc-print-design-settings-field .canvas-react-color-wrap {\n  height: 28px;\n}\n.cc-print-design-settings .canvas-react-color-preview {\n  width: 20px;\n  height: 20px;\n}\n.cc-print-design-settings .canvas-react-input-number-handler {\n  flex-basis: 24px;\n}\n.cc-print-design-settings .cc-print-design-hint {\n  margin: 14px 0 0;\n}\n.cc-print-design-chart-data {\n  padding: 12px;\n  min-width: 0;\n  --canvas-react-control-height: 28px;\n  border-bottom: 1px solid var(--pd-border);\n}\n.cc-print-design-chart-data h4 {\n  margin: 12px 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-chart-data > label,\n.cc-print-design-chart-series > label {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 10px 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-chart-row {\n  display: flex;\n  gap: 6px;\n  margin: 6px 0;\n  min-width: 0;\n}\n.cc-print-design-chart-row > :first-child {\n  flex: 1;\n  min-width: 0;\n}\n.cc-print-design-chart-row button {\n  flex-shrink: 0;\n  padding-inline: 8px;\n}\n.cc-print-design-chart-series {\n  border: 1px solid var(--pd-border);\n  border-radius: 6px;\n  padding: 8px;\n  margin: 8px 0;\n}\n.cc-print-design-chart-data pre {\n  max-height: 200px;\n  overflow: auto;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-chart-simple {\n  margin: 10px 0;\n}\n.cc-print-design-table-data {\n  padding: 12px;\n  border-bottom: 1px solid var(--pd-border);\n  --canvas-react-control-height: 28px;\n}\n.cc-print-design-table-data h4 {\n  font-size: var(--pd-primary-font-size, 13px);\n  margin: 12px 0;\n}\n.cc-print-design-table-data label:not(.canvas-react-checkbox) {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 10px 0;\n}\n.cc-print-design-compact-grid:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n.cc-print-design-compact-grid > .canvas-react-checkbox {\n  grid-column: 1 / -1;\n}\n.cc-print-design-table-data.cc-print-design-compact-grid label:not(.canvas-react-checkbox) {\n  min-width: 0;\n  gap: 4px;\n  margin: 0;\n}\n.cc-print-design-compact-grid .canvas-react-input-number,\n.cc-print-design-compact-grid .canvas-react-color-picker {\n  width: 100%;\n  min-width: 0;\n}\n.cc-print-design-table-column {\n  border: 1px solid var(--pd-border);\n  border-radius: 6px;\n  margin-bottom: 8px;\n  overflow: hidden;\n}\n.cc-print-design-column-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-width: 0;\n}\n.cc-print-design-column-heading > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cc-print-design-column-heading small {\n  flex-shrink: 0;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n  font-weight: normal;\n}\n.cc-print-design-column-grid:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding: 8px;\n}\n.cc-print-design-column-grid > * {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n.cc-print-design-column-grid > .cc-print-design-column-half {\n  grid-column: span 1;\n}\n.cc-print-design-table-data .cc-print-design-column-grid label:not(.canvas-react-checkbox),\n.cc-print-design-column-grid > .cc-print-design-field {\n  gap: 4px;\n  margin: 0;\n}\n.cc-print-design-column-grid .canvas-react-input-number {\n  min-width: 0;\n  width: 100%;\n}\n.cc-print-design-column-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n}\n.cc-print-design-column-actions > .canvas-react-button {\n  padding: 4px;\n}\n.cc-print-design-table-json {\n  margin: 12px 0;\n}\n.cc-print-design-table-json textarea {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 160px;\n  resize: vertical;\n  font-size: var(--pd-primary-font-size, 13px);\n  margin: 8px 0;\n}\n.cc-print-design-table-row {\n  border: 1px solid var(--pd-border);\n  border-radius: 6px;\n  padding: 8px;\n  margin: 8px 0;\n}\n.cc-print-design-table-data pre {\n  max-height: 200px;\n  overflow: auto;\n  font-size: var(--pd-primary-font-size, 13px);\n  overscroll-behavior: contain;\n}\n.cc-print-design-table-colors > div {\n  border-bottom: 1px solid var(--pd-border);\n  padding-bottom: 8px;\n}\n.cc-print-design-layer-controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 8px 0;\n}\n.cc-print-design-layer-controls .canvas-react-button {\n  padding: 6px;\n}\n.cc-print-design-layer-item {\n  position: relative;\n}\n.cc-print-design-layer-drag {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 4px;\n  border: 0;\n  background: transparent;\n  color: var(--pd-muted);\n  cursor: grab;\n}\n.cc-print-design-layer-drag:active {\n  cursor: grabbing;\n}\n.cc-print-design-layer-drag:disabled {\n  cursor: default;\n  opacity: 0.4;\n}\n.cc-print-design-layer-children {\n  margin-left: 12px;\n  border-left: 1px solid var(--pd-divider);\n  padding-left: 3px;\n}\n.cc-print-design-layer-drag {\n  touch-action: none;\n}\n.cc-print-design-layer-menu {\n  padding: 4px;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-layer-menu button {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  width: 100%;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--pd-text);\n  padding: 8px;\n  cursor: pointer;\n}\n.cc-print-design-layer-menu button:hover:not(:disabled),\n.cc-print-design-layer-menu button:focus-visible {\n  background: var(--pd-selected);\n}\n.cc-print-design-layer-menu button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n.cc-print-design-layer-menu button > span:last-child {\n  margin-left: auto;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-layer-list {\n  user-select: none;\n}\n.cc-print-design-menu-separator {\n  height: 1px;\n  background: var(--pd-divider);\n  margin: 4px 0;\n}\n.cc-print-design-layer-menu button.danger {\n  color: var(--pd-danger);\n}\n.cc-print-design-layer-menu button > .cc-print-design-menu-label:last-child {\n  margin-left: 0;\n  color: inherit;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-layer-order-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.cc-print-design-layer-order-row > :first-child {\n  flex: 1;\n  min-width: 0;\n  width: 0;\n}\n.cc-print-design-layer-order-row .cc-print-design-layer-controls {\n  flex: none;\n  flex-wrap: nowrap;\n  gap: 2px;\n  margin: 0;\n}\n.cc-print-design-alignment-controls {\n  display: flex;\n  gap: 6px;\n}\n.cc-print-design-alignment-controls .canvas-react-button {\n  flex: 1;\n  padding: 6px;\n}\n.cc-print-design-alignment-controls .canvas-react-button[aria-pressed=true] {\n  color: var(--pd-primary, #2563eb);\n  border-color: var(--pd-primary, #2563eb);\n  background: var(--pd-selected);\n}\n.cc-print-design-data-fieldset {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  min-width: 0;\n}\n.cc-print-design-data-preview {\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n  margin: 0;\n}\n.cc-print-design-layer-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.cc-print-design-layer-heading .cc-print-design-section-title {\n  margin: 0;\n}\n.cc-print-design-link {\n  border: 0;\n  padding: 0;\n  color: var(--pd-primary);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-link:disabled {\n  color: #b8c0cc;\n  cursor: not-allowed;\n}\n.cc-print-design-editor .canvas-react-button:hover:not(:disabled) {\n  border-color: var(--pd-primary);\n  color: var(--pd-primary);\n}\n.cc-print-design-editor .canvas-react-button-primary {\n  border-color: var(--pd-primary);\n  background: var(--pd-primary);\n  color: #fff;\n}\n.cc-print-design-editor .canvas-react-button-primary:hover:not(:disabled) {\n  border-color: var(--canvas-react-color-primary-hover);\n  background: var(--canvas-react-color-primary-hover);\n  color: #fff;\n}\n.cc-print-design-editor .canvas-react-radio input:checked + .canvas-react-radio-mark {\n  border-color: var(--pd-primary);\n}\n.cc-print-design-editor[data-theme=dark] .canvas-react-select-disabled,\n.cc-print-design-editor[data-theme=dark] .canvas-react-number-input-affix-wrapper-disabled,\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled {\n  background: var(--pd-subtle);\n  color: var(--pd-muted);\n}\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled:hover {\n  border-color: var(--pd-border);\n}\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled .canvas-react-input-number-input,\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled .canvas-react-input-number-handler:disabled {\n  color: var(--pd-muted);\n}\n.cc-print-design-editor .cc-print-design-field > span:first-child,\n.cc-print-design-editor .cc-print-design-settings-field > span:first-child,\n.cc-print-design-editor .cc-print-design-table-data label,\n.cc-print-design-editor .cc-print-design-chart-data label {\n  font-size: var(--pd-label-font-size, 12px);\n  color: var(--pd-muted);\n}\n.cc-print-design-editor .canvas-react-input,\n.cc-print-design-editor .canvas-react-textarea,\n.cc-print-design-editor .canvas-react-input-number-input {\n  font-size: var(--pd-primary-font-size, 13px);\n  color: var(--pd-text);\n}\n.cc-print-design-row-settings:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n.cc-print-design-row-settings > * {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n.cc-print-design-row-settings > .cc-print-design-column-half {\n  grid-column: span 1;\n  margin: 0;\n  gap: 4px;\n}\n.cc-print-design-row-settings .canvas-react-input-number {\n  min-width: 0;\n  width: 100%;\n}\n.cc-print-design-row-settings .cc-print-design-hint {\n  margin: 0;\n}\n.cc-print-design-data-compact {\n  padding: 8px;\n}\n.cc-print-design-data-compact .cc-print-design-hint {\n  margin: 6px 0;\n}\n.cc-print-design-data-compact .cc-print-design-table-json {\n  margin: 6px 0;\n}\n.cc-print-design-data-compact .cc-print-design-table-row {\n  padding: 0;\n  margin: 6px 0;\n  overflow: hidden;\n}\n.cc-print-design-static-row-grid:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding: 8px;\n}\n.cc-print-design-static-row-grid > * {\n  min-width: 0;\n}\n.cc-print-design-static-tasks > strong,\n.cc-print-design-task-dependencies > strong {\n  display: block;\n  margin: 8px 0 4px;\n}\n.cc-print-design-gantt-connection-title {\n  display: block;\n  margin: 12px 0 6px;\n}\n.cc-print-design-task-title {\n  padding: 8px;\n  font-weight: 600;\n}\n.cc-print-design-task-dependencies {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n.cc-print-design-task-dependency-row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding: 8px 0;\n  border-top: 1px solid #e7edf5;\n}\n.cc-print-design-task-dependency-row > * {\n  min-width: 0;\n}\n.cc-print-design-table-data .cc-print-design-static-row-grid label:not(.canvas-react-checkbox) {\n  margin: 0;\n  gap: 4px;\n  overflow-wrap: anywhere;\n}\n.cc-print-design-static-row-grid .canvas-react-input-number {\n  width: 100%;\n  min-width: 0;\n}\n.cc-print-design-static-row-grid > .cc-print-design-table-json,\n.cc-print-design-static-row-actions {\n  grid-column: 1 / -1;\n}\n.cc-print-design-static-row-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n.cc-print-design-static-row-actions > .canvas-react-button {\n  padding: 4px;\n}\n');
+styleInject('.cc-print-design-editor {\n  position: relative;\n  --pd-border: #e4e8ef;\n  --pd-text: var(--canvas-react-color-text, #263244);\n  --pd-muted: var(--canvas-react-color-text-muted, #8993a2);\n  --pd-primary: #1677ff;\n  --pd-background: #f7f8fa;\n  --pd-surface: #fff;\n  --pd-workspace: #e9edf3;\n  --pd-hover: #f5f7fa;\n  --pd-selected: #edf4ff;\n  --pd-subtle: #fafbfd;\n  --pd-icon: #4279cb;\n  --pd-divider: #edf0f4;\n  --pd-selected-border: #86b4ff;\n  --pd-danger: #dc2626;\n  --pd-brand-start: #428cff;\n  --pd-brand-end: #1261d8;\n  --canvas-react-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--pd-primary) 18%, transparent);\n  --pd-label-font-size: var(--canvas-react-font-size-label, 12px);\n  --pd-primary-font-size: var(--canvas-react-font-size, 13px);\n  --pd-secondary-font-size: var(--canvas-react-font-size-secondary, 11px);\n  --pd-panel-header-height: 36px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  color: var(--pd-text);\n  background: var(--pd-background);\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "PingFang SC",\n    "Microsoft YaHei",\n    sans-serif;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-editor:fullscreen {\n  width: 100vw !important;\n  height: 100vh !important;\n}\n.cc-print-design-toolbar {\n  z-index: 2;\n  display: flex;\n  flex: 0 0 58px;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 18px;\n  border-bottom: 1px solid var(--pd-border);\n  background: var(--pd-surface);\n}\n.cc-print-design-brand,\n.cc-print-design-brand > div,\n.cc-print-design-toolbar-group {\n  display: flex;\n  align-items: center;\n}\n.cc-print-design-brand {\n  gap: 10px;\n  min-width: 180px;\n}\n.cc-print-design-brand > div {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n}\n.cc-print-design-brand strong {\n  max-width: 170px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-brand small {\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-brand-mark {\n  display: grid;\n  width: 32px;\n  height: 32px;\n  place-items: center;\n  border-radius: 9px;\n  color: #fff;\n  background:\n    linear-gradient(\n      145deg,\n      var(--pd-brand-start),\n      var(--pd-brand-end));\n  font-size: 16px;\n  font-weight: 700;\n}\n.cc-print-design-toolbar-group {\n  gap: 7px;\n}\n.cc-print-design-toolbar-unit {\n  margin-left: 8px;\n  padding: 4px 9px;\n  border: 1px solid var(--pd-border);\n  border-radius: 5px;\n  color: var(--pd-muted);\n  background: var(--pd-surface);\n  font-size: var(--pd-secondary-font-size);\n  white-space: nowrap;\n}\n.cc-print-design-clock-options {\n  grid-column: 1 / -1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n}\n.cc-print-design-save-status {\n  max-width: 120px;\n  overflow: hidden;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cc-print-design-template-list {\n  gap: 9px;\n}\n.cc-print-design-template-card {\n  display: flex;\n  flex-direction: column;\n  min-height: 58px;\n  padding: 8px;\n  border: 1px solid var(--pd-border);\n  border-radius: 7px;\n  background: var(--pd-surface);\n}\n.cc-print-design-template-card.selected {\n  border-color: var(--pd-selected-border);\n  box-shadow: 0 0 0 2px var(--pd-selected);\n}\n.cc-print-design-template-select,\n.cc-print-design-template-heading {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 10px;\n}\n.cc-print-design-template-heading {\n  flex-wrap: wrap;\n}\n.cc-print-design-template-heading > .cc-print-design-page-thumbnail {\n  flex: 0 0 31px;\n}\n.cc-print-design-template-heading > .cc-print-design-template-label {\n  flex: 1 1 calc(100% - 41px);\n}\n.cc-print-design-template-heading > .canvas-react-button {\n  width: 26px;\n  height: 26px;\n  flex: 0 0 26px;\n}\n.cc-print-design-template-heading > .canvas-react-button:first-of-type {\n  margin-left: auto;\n}\n.cc-print-design-template-select {\n  width: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--pd-text);\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-template-select.selected,\n.cc-print-design-template-versions button.selected {\n  color: var(--pd-primary);\n  font-weight: 600;\n}\n.cc-print-design-template-label {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n}\n.cc-print-design-template-label strong {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-primary-font-size);\n}\n.cc-print-design-template-label small {\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size);\n}\n.cc-print-design-template-invalid {\n  color: var(--pd-danger);\n  font-size: var(--pd-secondary-font-size);\n  font-weight: 600;\n}\n.cc-print-design-template-versions {\n  display: flex;\n  flex-direction: column;\n  margin: 7px 0 0 41px;\n  border-top: 1px solid var(--pd-border);\n}\n.cc-print-design-template-version {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-template-version > button:first-child {\n  flex: 1;\n  min-width: 0;\n  padding: 7px 0;\n  border: 0;\n  background: transparent;\n  color: var(--pd-muted);\n  cursor: pointer;\n  text-align: left;\n  font-size: var(--pd-secondary-font-size);\n}\n.cc-print-design-template-version > .canvas-react-button {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n  padding: 0;\n  border: 0;\n  color: var(--pd-muted);\n  background: transparent;\n}\n.cc-print-design-template-version > .canvas-react-button:hover:not(:disabled) {\n  color: var(--pd-danger);\n}\n.cc-print-design-toolbar .canvas-react-button {\n  box-sizing: border-box;\n  width: 32px;\n  height: 32px;\n  flex: 0 0 32px;\n  padding: 4px;\n}\n.cc-print-design-toolbar-separator {\n  width: 1px;\n  height: 22px;\n  margin: 0 5px;\n  background: var(--pd-border);\n}\n.cc-print-design-zoom-value {\n  min-width: 40px;\n  color: var(--pd-muted);\n  font-size: var(--pd-primary-font-size, 13px);\n  text-align: center;\n}\n.cc-print-design-zoom-value input {\n  box-sizing: border-box;\n  width: 42px;\n  padding: 3px 2px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--pd-text);\n  font: inherit;\n  text-align: right;\n}\n.cc-print-design-zoom-value input:focus {\n  border-color: var(--pd-primary);\n  outline: none;\n}\n.cc-print-design-panel-width-group {\n  display: grid;\n  gap: 6px;\n  margin-bottom: 12px;\n}\n.cc-print-design-panel-width-group strong {\n  font-size: var(--pd-primary-font-size);\n}\n.cc-print-design-custom-component-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-custom-component-row > .cc-print-design-component-item {\n  flex: 1;\n  min-width: 0;\n}\n.cc-print-design-toolbar button[aria-label] {\n  position: relative;\n}\n.cc-print-design-toolbar button[aria-label]::after {\n  position: absolute;\n  z-index: 10;\n  top: calc(100% + 8px);\n  left: 50%;\n  width: max-content;\n  max-width: 220px;\n  padding: 5px 8px;\n  border-radius: 5px;\n  background: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  content: attr(aria-label);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.35;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateX(-50%) translateY(-3px);\n  transition: opacity 0.15s ease, transform 0.15s ease;\n  white-space: normal;\n}\n.cc-print-design-toolbar button[aria-label]:is(:hover, :focus-visible)::after {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n.cc-print-design-workspace {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.cc-print-design-canvas-host {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n.cc-print-design-side-host {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n.cc-print-design-side-host[inert],\n.cc-print-design-properties-host[inert] {\n  opacity: 0.72;\n}\n.cc-print-design-preview-navigation {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  white-space: nowrap;\n}\n.cc-print-design-preview-navigation > span {\n  min-width: 44px;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.cc-print-design-mobile-nav {\n  display: none;\n}\n.cc-print-design-panels {\n  width: 100%;\n  height: 100%;\n}\n.cc-print-design-panels > .canvas-react-resizable-panels-item {\n  min-width: 0;\n  min-height: 0;\n}\n.cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(1),\n.cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(3) {\n  background: var(--pd-surface);\n}\n.cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(2) {\n  overflow: hidden;\n  background: var(--pd-workspace);\n}\n.cc-print-design-canvas-frame {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n.cc-print-design-left-panel,\n.cc-print-design-properties {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  flex-direction: column;\n  overflow: auto;\n  scrollbar-width: none;\n  background: var(--pd-surface);\n}\n.cc-print-design-left-panel::-webkit-scrollbar,\n.cc-print-design-properties::-webkit-scrollbar {\n  display: none;\n}\n.cc-print-design-properties-host {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n.cc-print-design-tabs {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  box-sizing: border-box;\n  height: var(--pd-panel-header-height);\n  flex: 0 0 var(--pd-panel-header-height);\n  border-bottom: 1px solid var(--pd-border);\n  background: var(--pd-surface);\n}\n.cc-print-design-tabs button {\n  position: relative;\n  flex: 1;\n  border: 0;\n  color: var(--pd-muted);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-tabs button.active {\n  color: var(--pd-primary);\n}\n.cc-print-design-tabs button.active::after {\n  position: absolute;\n  right: 18px;\n  bottom: -1px;\n  left: 18px;\n  height: 2px;\n  background: var(--pd-primary);\n  content: "";\n}\n.cc-print-design-component-list,\n.cc-print-design-layer-list,\n.cc-print-design-page-list {\n  padding: 14px 12px;\n}\n.cc-print-design-section-title {\n  margin: 0;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n  font-weight: 600;\n  letter-spacing: 0.04em;\n}\n.cc-print-design-component-list .cc-print-design-section-title,\n.cc-print-design-layer-list .cc-print-design-section-title {\n  margin: 3px 3px 10px;\n}\n.cc-print-design-component-item {\n  display: flex;\n  width: 100%;\n  height: 38px;\n  align-items: center;\n  gap: 10px;\n  padding: 0 9px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: var(--pd-text);\n  background: var(--pd-surface);\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-component-item:hover {\n  border-color: var(--pd-selected-border);\n  color: var(--pd-primary);\n  background: var(--pd-selected);\n}\n.cc-print-design-component-item > span {\n  display: grid;\n  width: 22px;\n  height: 22px;\n  place-items: center;\n  border-radius: 5px;\n  color: var(--pd-icon);\n  background: var(--pd-selected);\n  font-size: 15px;\n}\n.cc-print-design-component-item b {\n  margin-left: auto;\n  color: var(--pd-muted);\n  font-weight: 400;\n}\n.cc-print-design-hint {\n  margin: 12px 4px;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n  line-height: 1.6;\n}\n.cc-print-design-layer-item {\n  display: flex;\n  width: 100%;\n  height: 34px;\n  align-items: center;\n  gap: 8px;\n  padding: 0 7px;\n  border: 0;\n  border-radius: 5px;\n  color: var(--pd-text);\n  background: transparent;\n  text-align: left;\n}\n.cc-print-design-layer-item:hover {\n  background: var(--pd-hover);\n}\n.cc-print-design-layer-item.selected {\n  color: var(--pd-primary);\n  background: var(--pd-selected);\n}\n.cc-print-design-layer-select {\n  display: flex;\n  min-width: 0;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-layer-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cc-print-design-layer-delete,\n.cc-print-design-layer-lock {\n  width: 23px;\n  height: 23px;\n  flex: 0 0 23px;\n  border: 0;\n  border-radius: 4px;\n  color: var(--pd-muted);\n  background: transparent;\n  cursor: pointer;\n  font-size: 17px;\n}\n.cc-print-design-layer-delete:hover {\n  color: var(--pd-danger);\n  background: var(--pd-surface);\n}\n.cc-print-design-layer-lock:hover,\n.cc-print-design-layer-lock[aria-pressed=true] {\n  color: var(--pd-primary);\n  background: var(--pd-surface);\n}\n.cc-print-design-empty {\n  padding: 20px 0;\n  color: var(--pd-muted);\n  font-size: var(--pd-primary-font-size, 13px);\n  text-align: center;\n}\n.cc-print-design-page-list {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n}\n.cc-print-design-page-list-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 1px 3px 4px;\n}\n.cc-print-design-page-list-head .cc-print-design-add-link {\n  border: 0;\n  padding: 2px 0;\n  color: var(--pd-primary);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-add-link:hover:not(:disabled) {\n  text-decoration: underline;\n}\n.cc-print-design-add-link:disabled {\n  color: var(--pd-muted);\n  cursor: not-allowed;\n}\n.cc-print-design-page-card {\n  display: flex;\n  min-height: 58px;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  border: 1px solid var(--pd-border);\n  border-radius: 7px;\n  background: var(--pd-surface);\n  cursor: pointer;\n  text-align: left;\n}\n.cc-print-design-page-card.selected {\n  border-color: var(--pd-selected-border);\n  box-shadow: 0 0 0 2px var(--pd-selected);\n}\n.cc-print-design-page-thumbnail {\n  display: grid;\n  width: 31px;\n  height: 40px;\n  place-items: center;\n  border: 1px solid var(--pd-border);\n  border-radius: 3px;\n  color: var(--pd-muted);\n  background: var(--pd-subtle);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-page-card > span:last-child {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 4px;\n}\n.cc-print-design-page-card strong {\n  overflow: hidden;\n  color: var(--pd-text);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-page-card small {\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-page-shortcut {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: auto 12px 12px;\n  padding: 10px 9px;\n  border-top: 1px solid var(--pd-border);\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-page-shortcut div {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.cc-print-design-page-shortcut strong {\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-page-shortcut button {\n  padding: 5px 7px;\n  border: 1px solid var(--pd-border);\n  border-radius: 4px;\n  color: var(--pd-muted);\n  background: var(--pd-surface);\n  cursor: pointer;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-properties-title {\n  display: flex;\n  box-sizing: border-box;\n  height: var(--pd-panel-header-height);\n  flex: 0 0 var(--pd-panel-header-height);\n  align-items: center;\n  gap: 8px;\n  padding: 0 15px;\n  border-bottom: 1px solid var(--pd-border);\n}\n.cc-print-design-properties .canvas-react-button {\n  font-size: var(--canvas-react-font-size, 14px);\n}\n.cc-print-design-properties-title strong {\n  flex-shrink: 0;\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-properties-title span {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--pd-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-property-section {\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pd-divider);\n}\n.cc-print-design-property-section > .canvas-react-collapse-panel-trigger {\n  box-sizing: border-box;\n  height: calc(var(--pd-panel-header-height) - 1px);\n  padding: 0 14px;\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-editor .canvas-react-collapse-panel-title {\n  color: var(--pd-text);\n}\n.cc-print-design-property-section > .canvas-react-collapse-panel-content {\n  padding: 0 14px 15px;\n}\n.cc-print-design-property-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 11px 9px;\n}\n.cc-print-design-field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 5px;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-field > :last-child {\n  width: 100%;\n  min-width: 0;\n}\n.cc-print-design-field-full {\n  grid-column: 1 / -1;\n}\n.cc-print-design-text-size-rule {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 5px;\n}\n.cc-print-design-text-editor::-webkit-scrollbar {\n  display: none;\n}\n.cc-print-design-template-property-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.cc-print-design-template-property-fields time {\n  color: var(--pd-text);\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-field .canvas-react-input,\n.cc-print-design-field .canvas-react-input-affix-wrapper,\n.cc-print-design-field .canvas-react-select,\n.cc-print-design-field .canvas-react-color {\n  width: 100%;\n}\n.cc-print-design-paper-row {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-paper-row > .canvas-react-select {\n  flex: 1;\n  width: 0;\n  min-width: 0;\n}\n.cc-print-design-paper-actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 4px;\n}\n.cc-print-design-paper-actions .canvas-react-button {\n  width: 32px;\n  padding: 6px;\n}\n.cc-print-design-paper-dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n.cc-print-design-paper-list {\n  max-height: min(32vh, 240px);\n  overflow: auto;\n  border: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-radius: 4px;\n}\n.cc-print-design-paper-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 36px 36px;\n  align-items: center;\n  gap: 3px;\n  min-height: 48px;\n  padding: 4px 8px 4px 12px;\n}\n.cc-print-design-paper-item .canvas-react-button {\n  width: 36px;\n  padding: 8px;\n}\n.cc-print-design-paper-item + .cc-print-design-paper-item {\n  border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.cc-print-design-paper-item > div {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px 8px;\n  min-width: 0;\n}\n.cc-print-design-paper-item strong {\n  overflow-wrap: anywhere;\n}\n.cc-print-design-paper-item span,\n.cc-print-design-paper-empty {\n  color: var(--pd-muted, #667085);\n}\n.cc-print-design-paper-empty {\n  margin: 4px 0;\n}\n.cc-print-design-paper-form,\n.cc-print-design-paper-form label {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  min-width: 0;\n}\n.cc-print-design-paper-form label > span:first-child {\n  font-size: 12px;\n}\n.cc-print-design-paper-dimensions {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.cc-print-design-paper-error {\n  margin: 0;\n  color: #c2410c;\n  font-size: 12px;\n}\n.cc-print-design-paper-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n@media (max-width: 440px) {\n  .cc-print-design-paper-dimensions {\n    grid-template-columns: 1fr;\n  }\n}\n.cc-print-design-margin-grid {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n}\n@media (max-width: 900px) {\n  .cc-print-design-toolbar {\n    gap: 8px;\n    padding: 0 9px;\n  }\n  .cc-print-design-brand {\n    min-width: 120px;\n  }\n  .cc-print-design-brand small,\n  .cc-print-design-toolbar-group:nth-child(2) .cc-print-design-toolbar-separator {\n    display: none;\n  }\n  .cc-print-design-toolbar-group {\n    gap: 4px;\n  }\n}\n@media (max-width: 700px) {\n  .cc-print-design-toolbar {\n    flex-basis: 50px;\n    justify-content: flex-start;\n    overflow-x: auto;\n    white-space: nowrap;\n  }\n  .cc-print-design-brand {\n    flex: 0 0 auto;\n  }\n  .cc-print-design-toolbar-group {\n    flex: 0 0 auto;\n  }\n  .cc-print-design-mobile-nav {\n    display: flex;\n    height: 36px;\n    flex: 0 0 36px;\n    border-bottom: 1px solid var(--pd-border);\n    background: var(--pd-surface);\n  }\n  .cc-print-design-mobile-nav button {\n    flex: 1;\n    border: 0;\n    background: transparent;\n    color: var(--pd-muted);\n    font: inherit;\n  }\n  .cc-print-design-mobile-nav button.active {\n    border-bottom: 2px solid var(--pd-primary);\n    color: var(--pd-primary);\n    font-weight: 600;\n  }\n  .cc-print-design-panels .canvas-react-resizable-panels-divider {\n    display: none;\n  }\n  .cc-print-design-panels > .canvas-react-resizable-panels-item {\n    display: none;\n    width: 100% !important;\n    flex: 1 1 100% !important;\n  }\n  .cc-print-design-panels .canvas-react-resizable-panel {\n    width: 100% !important;\n    max-width: none !important;\n    height: 100% !important;\n    flex: 1 1 100% !important;\n  }\n  .cc-print-design-editor[data-mobile-view=panel] .cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(1),\n  .cc-print-design-editor[data-mobile-view=canvas] .cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(2),\n  .cc-print-design-editor[data-mobile-view=properties] .cc-print-design-panels > .canvas-react-resizable-panels-item:nth-child(3) {\n    display: flex;\n  }\n}\n.cc-print-design-settings {\n  --canvas-react-control-height: 28px;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n}\n.cc-print-design-settings-toggle {\n  display: flex;\n  min-height: 28px;\n  align-items: center;\n  margin: 6px 0;\n}\n.cc-print-design-settings-global-actions {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  padding: 12px;\n  border-bottom: 1px solid var(--pd-border);\n}\n.cc-print-design-settings-global-actions .canvas-react-button {\n  flex-shrink: 0;\n  margin-left: auto;\n  padding-inline: 4px;\n  border-color: transparent;\n  background: transparent;\n  color: var(--pd-primary, #1677ff);\n}\n.cc-print-design-settings-global-actions .canvas-react-checkbox {\n  min-width: 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-theme-options {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding-top: 12px;\n}\n.cc-print-design-theme-option {\n  display: flex;\n  min-width: 0;\n  min-height: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 6px 8px;\n  border: 1px solid var(--pd-border);\n  border-radius: 4px;\n  background: var(--pd-surface);\n  color: var(--pd-text);\n  cursor: pointer;\n  font: inherit;\n  white-space: nowrap;\n}\n.cc-print-design-theme-option:hover,\n.cc-print-design-theme-option[aria-pressed=true] {\n  border-color: var(--pd-primary);\n}\n.cc-print-design-theme-option[aria-pressed=true] {\n  background: var(--pd-selected);\n}\n.cc-print-design-theme-option:focus-visible {\n  outline: 2px solid var(--pd-primary);\n  outline-offset: 2px;\n}\n.cc-print-design-theme-swatches {\n  display: flex;\n  width: 37px;\n  height: 19px;\n  flex: 0 0 37px;\n  overflow: hidden;\n  border: 1px solid var(--pd-border);\n  border-radius: 3px;\n}\n.cc-print-design-theme-swatches > span {\n  flex: 1;\n}\n.cc-print-design-settings-toggle .canvas-react-checkbox {\n  min-width: 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-settings-field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 14px;\n}\n.cc-print-design-settings-field > span:first-child {\n  color: var(--pd-muted);\n  font-size: var(--pd-primary-font-size, 13px);\n  line-height: 18px;\n}\n.cc-print-design-settings-field .canvas-react-color-wrap {\n  height: 28px;\n}\n.cc-print-design-settings .canvas-react-color-preview {\n  width: 20px;\n  height: 20px;\n}\n.cc-print-design-settings .canvas-react-input-number-handler {\n  flex-basis: 24px;\n}\n.cc-print-design-settings .cc-print-design-hint {\n  margin: 14px 0 0;\n}\n.cc-print-design-chart-data {\n  padding: 12px;\n  min-width: 0;\n  --canvas-react-control-height: 28px;\n  border-bottom: 1px solid var(--pd-border);\n}\n.cc-print-design-chart-data h4 {\n  margin: 12px 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-chart-data > label,\n.cc-print-design-chart-series > label {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 10px 0;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-chart-row {\n  display: flex;\n  gap: 6px;\n  margin: 6px 0;\n  min-width: 0;\n}\n.cc-print-design-chart-row > :first-child {\n  flex: 1;\n  min-width: 0;\n}\n.cc-print-design-chart-row button {\n  flex-shrink: 0;\n  padding-inline: 8px;\n}\n.cc-print-design-chart-series {\n  border: 1px solid var(--pd-border);\n  border-radius: 6px;\n  padding: 8px;\n  margin: 8px 0;\n}\n.cc-print-design-chart-data pre {\n  max-height: 200px;\n  overflow: auto;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-chart-simple {\n  margin: 10px 0;\n}\n.cc-print-design-table-data {\n  padding: 12px;\n  border-bottom: 1px solid var(--pd-border);\n  --canvas-react-control-height: 28px;\n}\n.cc-print-design-table-data h4 {\n  font-size: var(--pd-primary-font-size, 13px);\n  margin: 12px 0;\n}\n.cc-print-design-table-data label:not(.canvas-react-checkbox) {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 10px 0;\n}\n.cc-print-design-compact-grid:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n.cc-print-design-compact-grid > .canvas-react-checkbox {\n  grid-column: 1 / -1;\n}\n.cc-print-design-table-data.cc-print-design-compact-grid label:not(.canvas-react-checkbox) {\n  min-width: 0;\n  gap: 4px;\n  margin: 0;\n}\n.cc-print-design-compact-grid .canvas-react-input-number,\n.cc-print-design-compact-grid .canvas-react-color-picker {\n  width: 100%;\n  min-width: 0;\n}\n.cc-print-design-table-column {\n  border: 1px solid var(--pd-border);\n  border-radius: 6px;\n  margin-bottom: 8px;\n  overflow: hidden;\n}\n.cc-print-design-column-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-width: 0;\n}\n.cc-print-design-column-heading > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cc-print-design-column-heading small {\n  flex-shrink: 0;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n  font-weight: normal;\n}\n.cc-print-design-column-grid:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding: 8px;\n}\n.cc-print-design-column-grid > * {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n.cc-print-design-column-grid > .cc-print-design-column-half {\n  grid-column: span 1;\n}\n.cc-print-design-table-data .cc-print-design-column-grid label:not(.canvas-react-checkbox),\n.cc-print-design-column-grid > .cc-print-design-field {\n  gap: 4px;\n  margin: 0;\n}\n.cc-print-design-column-grid .canvas-react-input-number {\n  min-width: 0;\n  width: 100%;\n}\n.cc-print-design-column-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n}\n.cc-print-design-column-actions > .canvas-react-button {\n  padding: 4px;\n}\n.cc-print-design-table-json {\n  margin: 12px 0;\n}\n.cc-print-design-table-json textarea {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 160px;\n  resize: vertical;\n  font-size: var(--pd-primary-font-size, 13px);\n  margin: 8px 0;\n}\n.cc-print-design-table-row {\n  border: 1px solid var(--pd-border);\n  border-radius: 6px;\n  padding: 8px;\n  margin: 8px 0;\n}\n.cc-print-design-table-data pre {\n  max-height: 200px;\n  overflow: auto;\n  font-size: var(--pd-primary-font-size, 13px);\n  overscroll-behavior: contain;\n}\n.cc-print-design-table-colors > div {\n  border-bottom: 1px solid var(--pd-border);\n  padding-bottom: 8px;\n}\n.cc-print-design-layer-controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 8px 0;\n}\n.cc-print-design-layer-controls .canvas-react-button {\n  padding: 6px;\n}\n.cc-print-design-layer-item {\n  position: relative;\n}\n.cc-print-design-layer-drag {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 4px;\n  border: 0;\n  background: transparent;\n  color: var(--pd-muted);\n  cursor: grab;\n}\n.cc-print-design-layer-drag:active {\n  cursor: grabbing;\n}\n.cc-print-design-layer-drag:disabled {\n  cursor: default;\n  opacity: 0.4;\n}\n.cc-print-design-layer-children {\n  margin-left: 12px;\n  border-left: 1px solid var(--pd-divider);\n  padding-left: 3px;\n}\n.cc-print-design-layer-drag {\n  touch-action: none;\n}\n.cc-print-design-layer-menu {\n  padding: 4px;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-layer-menu button {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  width: 100%;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--pd-text);\n  padding: 8px;\n  cursor: pointer;\n}\n.cc-print-design-layer-menu button:hover:not(:disabled),\n.cc-print-design-layer-menu button:focus-visible {\n  background: var(--pd-selected);\n}\n.cc-print-design-layer-menu button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n.cc-print-design-layer-menu button > span:last-child {\n  margin-left: auto;\n  color: var(--pd-muted);\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-layer-list {\n  user-select: none;\n}\n.cc-print-design-menu-separator {\n  height: 1px;\n  background: var(--pd-divider);\n  margin: 4px 0;\n}\n.cc-print-design-layer-menu button.danger {\n  color: var(--pd-danger);\n}\n.cc-print-design-layer-menu button > .cc-print-design-menu-label:last-child {\n  margin-left: 0;\n  color: inherit;\n  font-size: var(--pd-primary-font-size, 13px);\n}\n.cc-print-design-layer-order-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.cc-print-design-layer-order-row > :first-child {\n  flex: 1;\n  min-width: 0;\n  width: 0;\n}\n.cc-print-design-layer-order-row .cc-print-design-layer-controls {\n  flex: none;\n  flex-wrap: nowrap;\n  gap: 2px;\n  margin: 0;\n}\n.cc-print-design-alignment-controls {\n  display: flex;\n  gap: 6px;\n}\n.cc-print-design-alignment-controls .canvas-react-button {\n  flex: 1;\n  padding: 6px;\n}\n.cc-print-design-alignment-controls .canvas-react-button[aria-pressed=true] {\n  color: var(--pd-primary, #2563eb);\n  border-color: var(--pd-primary, #2563eb);\n  background: var(--pd-selected);\n}\n.cc-print-design-data-fieldset {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  min-width: 0;\n}\n.cc-print-design-data-preview {\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n  margin: 0;\n}\n.cc-print-design-layer-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.cc-print-design-layer-heading .cc-print-design-section-title {\n  margin: 0;\n}\n.cc-print-design-link {\n  border: 0;\n  padding: 0;\n  color: var(--pd-primary);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--pd-secondary-font-size, 11px);\n}\n.cc-print-design-link:disabled {\n  color: #b8c0cc;\n  cursor: not-allowed;\n}\n.cc-print-design-editor .canvas-react-button:hover:not(:disabled) {\n  border-color: var(--pd-primary);\n  color: var(--pd-primary);\n}\n.cc-print-design-editor .canvas-react-button-primary {\n  border-color: var(--pd-primary);\n  background: var(--pd-primary);\n  color: #fff;\n}\n.cc-print-design-editor .canvas-react-button-primary:hover:not(:disabled) {\n  border-color: var(--canvas-react-color-primary-hover);\n  background: var(--canvas-react-color-primary-hover);\n  color: #fff;\n}\n.cc-print-design-editor .canvas-react-radio input:checked + .canvas-react-radio-mark {\n  border-color: var(--pd-primary);\n}\n.cc-print-design-editor[data-theme=dark] .canvas-react-select-disabled,\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled {\n  background: var(--pd-subtle);\n  color: var(--pd-muted);\n}\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled:hover {\n  border-color: var(--pd-border);\n}\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled .canvas-react-input-number-input,\n.cc-print-design-editor[data-theme=dark] .canvas-react-input-number-disabled .canvas-react-input-number-handler:disabled {\n  color: var(--pd-muted);\n}\n.cc-print-design-editor .cc-print-design-field > span:first-child,\n.cc-print-design-editor .cc-print-design-settings-field > span:first-child,\n.cc-print-design-editor .cc-print-design-table-data label,\n.cc-print-design-editor .cc-print-design-chart-data label {\n  font-size: var(--pd-label-font-size, 12px);\n  color: var(--pd-muted);\n}\n.cc-print-design-editor .canvas-react-input,\n.cc-print-design-editor .canvas-react-textarea,\n.cc-print-design-editor .canvas-react-input-number-input {\n  font-size: var(--pd-primary-font-size, 13px);\n  color: var(--pd-text);\n}\n.cc-print-design-row-settings:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n.cc-print-design-row-settings > * {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n.cc-print-design-row-settings > .cc-print-design-column-half {\n  grid-column: span 1;\n  margin: 0;\n  gap: 4px;\n}\n.cc-print-design-row-settings .canvas-react-input-number {\n  min-width: 0;\n  width: 100%;\n}\n.cc-print-design-row-settings .cc-print-design-hint {\n  margin: 0;\n}\n.cc-print-design-data-compact {\n  padding: 8px;\n}\n.cc-print-design-data-compact .cc-print-design-hint {\n  margin: 6px 0;\n}\n.cc-print-design-data-compact .cc-print-design-table-json {\n  margin: 6px 0;\n}\n.cc-print-design-data-compact .cc-print-design-table-row {\n  padding: 0;\n  margin: 6px 0;\n  overflow: hidden;\n}\n.cc-print-design-static-row-grid:not([hidden]) {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding: 8px;\n}\n.cc-print-design-static-row-grid > * {\n  min-width: 0;\n}\n.cc-print-design-static-tasks > strong,\n.cc-print-design-task-dependencies > strong {\n  display: block;\n  margin: 8px 0 4px;\n}\n.cc-print-design-gantt-connection-title {\n  display: block;\n  margin: 12px 0 6px;\n}\n.cc-print-design-task-title {\n  padding: 8px;\n  font-weight: 600;\n}\n.cc-print-design-task-dependencies {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n.cc-print-design-task-dependency-row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  padding: 8px 0;\n  border-top: 1px solid #e7edf5;\n}\n.cc-print-design-task-dependency-row > * {\n  min-width: 0;\n}\n.cc-print-design-table-data .cc-print-design-static-row-grid label:not(.canvas-react-checkbox) {\n  margin: 0;\n  gap: 4px;\n  overflow-wrap: anywhere;\n}\n.cc-print-design-static-row-grid .canvas-react-input-number {\n  width: 100%;\n  min-width: 0;\n}\n.cc-print-design-static-row-grid > .cc-print-design-table-json,\n.cc-print-design-static-row-actions {\n  grid-column: 1 / -1;\n}\n.cc-print-design-static-row-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n.cc-print-design-static-row-actions > .canvas-react-button {\n  padding: 4px;\n}\n');
 
 // src/styles/scrollbar.css
 styleInject(".cc-print-design-panels .canvas-react-resizable-panel {\n  overflow: hidden;\n}\n.cc-print-design-left-panel,\n.cc-print-design-properties,\n.cc-print-design-chart-data pre {\n  overscroll-behavior: contain;\n}\n.cc-print-design-editor .cc-print-design-text-editor {\n  scrollbar-width: thin;\n  overscroll-behavior: contain;\n}\n.cc-print-design-editor .cc-print-design-text-editor::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n.cc-print-design-editor .cc-print-design-text-editor::-webkit-scrollbar-track,\n.cc-print-design-editor .cc-print-design-text-editor::-webkit-scrollbar-corner {\n  background: transparent;\n}\n.cc-print-design-editor .cc-print-design-text-editor::-webkit-scrollbar-thumb {\n  min-height: 32px;\n  border: 2px solid transparent;\n  border-radius: 999px;\n  background: #aeb4bd;\n  background-clip: content-box;\n}\n.cc-print-design-editor .cc-print-design-text-editor::-webkit-scrollbar-thumb:hover {\n  background: #8f98a5;\n  background-clip: content-box;\n}\n");
@@ -8779,7 +9715,13 @@ var ReactPrintDesign = react.forwardRef(
     const [document2, setDocument] = react.useState(
       () => documentProp ?? printDesign.createPrintDesignDocument()
     );
-    const preview = usePrintPreviewPages(document2, mockRecords, previewOpen);
+    const previewLoader = importedMockRecords ? void 0 : props.loadPreviewData;
+    const preview = usePrintPreviewPages(
+      document2,
+      mockRecords,
+      previewOpen,
+      previewLoader
+    );
     const previewPage = previewOpen ? preview.pages[previewIndex] : void 0;
     react.useEffect(() => {
       setPreviewIndex(
@@ -8798,7 +9740,10 @@ var ReactPrintDesign = react.forwardRef(
     const pdfDragRef = react.useRef(null);
     const pngDragRef = react.useRef(null);
     const savedSnapshotRef = react.useRef(JSON.stringify(documentProp ?? document2));
-    const hasUnsavedChanges = () => JSON.stringify(instanceRef.current?.getDocument() ?? document2) !== savedSnapshotRef.current;
+    const tourSourceRef = react.useRef(null);
+    const hasUnsavedChanges = () => JSON.stringify(
+      tourSourceRef.current ?? instanceRef.current?.getDocument() ?? document2
+    ) !== savedSnapshotRef.current;
     const [discardConfirmOpen, setDiscardConfirmOpen] = react.useState(false);
     const discardResolverRef = react.useRef(
       null
@@ -8841,6 +9786,80 @@ var ReactPrintDesign = react.forwardRef(
       elementIds: []
     });
     const [activePageId, setActivePageId] = react.useState(document2.pages[0].id);
+    const [tourOpen, setTourOpen] = react.useState(false);
+    const [tourIndex, setTourIndex] = react.useState(0);
+    const [tourPlaying, setTourPlaying] = react.useState(false);
+    const [tourSource, setTourSource] = react.useState(
+      null
+    );
+    const tourDocument = tourSource ?? document2;
+    const tourSteps = react.useMemo(
+      () => createPrintDesignTourSteps(tourDocument),
+      [tourDocument]
+    );
+    const tourDisplaySteps = react.useMemo(
+      () => tourSteps.map((step) => {
+        if (!step.elementId) return step;
+        if (step.operation === "add")
+          return {
+            ...step,
+            target: () => instanceRef.current?.getElementClientRect(step.elementId) ?? null
+          };
+        if (step.operation === "layer")
+          return {
+            ...step,
+            target: () => [
+              ...globalThis.document.querySelectorAll(
+                "[data-tour-element-id]"
+              )
+            ].find(
+              (node) => node.dataset.tourElementId === step.elementId
+            ) ?? globalThis.document.querySelector(
+              ".cc-print-design-left-panel"
+            )
+          };
+        return step;
+      }),
+      [tourSteps]
+    );
+    const tourHighlightTarget = react.useMemo(() => {
+      const step = tourSteps[tourIndex];
+      if (!step?.elementId || step.operation !== "field" && step.operation !== "layer")
+        return void 0;
+      return () => instanceRef.current?.getElementClientRect(step.elementId) ?? null;
+    }, [tourIndex, tourSteps]);
+    const focusTourStep = (index) => {
+      const step = tourSteps[index];
+      const instance = instanceRef.current;
+      const source = tourSourceRef.current;
+      if (!step || !instance || !source) return;
+      instance.showTemporaryDocument(
+        createPrintDesignTourDocument(source, step),
+        step.pageId,
+        step.operation === "add" || step.operation === "field" || step.operation === "layer" ? step.elementId : void 0
+      );
+      setActiveTab(
+        step.operation === "page" ? "pages" : step.operation === "layer" ? "layers" : "elements"
+      );
+      setMobileView(
+        step.operation === "field" ? "properties" : step.operation === "add" ? "canvas" : "panel"
+      );
+      setActivePageId(instance.getActivePageId());
+      setSelection(instance.getSelection());
+      setTourIndex(index);
+    };
+    const closeTour = () => {
+      setTourOpen(false);
+      setTourPlaying(false);
+      const instance = instanceRef.current;
+      instance?.restoreTemporaryDocument();
+      tourSourceRef.current = null;
+      setTourSource(null);
+      if (instance) {
+        setActivePageId(instance.getActivePageId());
+        setSelection(instance.getSelection());
+      }
+    };
     const [preferences, setPreferences] = react.useState({
       ...defaultEditorPreferences,
       displayUnit: props.displayUnit ?? "mm"
@@ -8925,46 +9944,75 @@ var ReactPrintDesign = react.forwardRef(
       setPendingGroup(null);
     };
     const exportFileName = (format) => exportFileNames[format] ?? `${document2.name || "print-design"}.${format === "png" ? "zip" : format}`;
+    const outputTaskRef = react.useRef(null);
+    react.useEffect(() => () => outputTaskRef.current?.abort(), []);
+    const resolveOutputSource = async () => {
+      if (!previewLoader) return { document: document2, data: currentData };
+      if (previewOpen && !preview.loading && !preview.error && preview.source)
+        return preview.source;
+      outputTaskRef.current?.abort();
+      const controller = new AbortController();
+      outputTaskRef.current = controller;
+      const source = await previewLoader(document2, {
+        signal: controller.signal
+      });
+      controller.signal.throwIfAborted();
+      return source;
+    };
     const confirmExport = async (fileName) => {
       if (!exportFormat) return;
+      const source = exportFormat === "json" ? { document: document2, data: currentData } : await resolveOutputSource();
       if (exportFormat === "json") downloadJson(document2, fileName);
       if (exportFormat === "html")
-        downloadHtml(document2, currentData, fileName);
+        downloadHtml(source.document, source.data, fileName);
       if (exportFormat === "png")
-        await downloadPngPages(document2, mockRecords, fileName);
+        await downloadPngPages(
+          source.document,
+          previewLoader ? [source.data] : mockRecords,
+          fileName
+        );
       if (exportFormat === "pdf")
-        await downloadPdf(document2, currentData, fileName);
+        await downloadPdf(source.document, source.data, fileName);
       setExportFileNames((current) => ({
         ...current,
         [exportFormat]: fileName
       }));
       setExportFormat(null);
     };
+    const dragReady = !previewLoader || previewOpen && !preview.loading && !preview.error && preview.source != null;
+    const dragDocument = previewLoader && preview.source ? preview.source.document : document2;
+    const dragData = previewLoader && preview.source ? preview.source.data : currentData;
+    const dragRecords = react.useMemo(
+      () => previewLoader ? [dragData] : mockRecords,
+      [previewLoader, dragData, mockRecords]
+    );
     const preparePdfDrag = () => {
-      if (pdfDragRef.current?.document === document2 && pdfDragRef.current.data === currentData)
+      if (!dragReady) return;
+      if (pdfDragRef.current?.document === dragDocument && pdfDragRef.current.data === dragData)
         return;
       const entry = {
-        document: document2,
-        data: currentData,
+        document: dragDocument,
+        data: dragData,
         blob: void 0
       };
       pdfDragRef.current = entry;
-      void createPdfBlob(document2, currentData).then((blob) => {
+      void createPdfBlob(dragDocument, dragData).then((blob) => {
         entry.blob = blob;
       }).catch(() => {
         if (pdfDragRef.current === entry) pdfDragRef.current = null;
       });
     };
     const preparePngDrag = () => {
-      if (pngDragRef.current?.document === document2 && pngDragRef.current.records === mockRecords)
+      if (!dragReady) return;
+      if (pngDragRef.current?.document === dragDocument && pngDragRef.current.records === dragRecords)
         return;
       const entry = {
-        document: document2,
-        records: mockRecords,
+        document: dragDocument,
+        records: dragRecords,
         blob: void 0
       };
       pngDragRef.current = entry;
-      void createPngArchiveBlob(document2, mockRecords).then((blob) => {
+      void createPngArchiveBlob(dragDocument, dragRecords).then((blob) => {
         entry.blob = blob;
       }).catch(() => {
         if (pngDragRef.current === entry) pngDragRef.current = null;
@@ -9193,7 +10241,7 @@ var ReactPrintDesign = react.forwardRef(
         onChange: (next) => {
           setDocument(next);
           setRevision((revision) => revision + 1);
-          callbacksRef.current.onChange?.(next);
+          if (!tourSourceRef.current) callbacksRef.current.onChange?.(next);
         },
         onSelectionChange: (next) => {
           setSelection(next);
@@ -9330,6 +10378,7 @@ var ReactPrintDesign = react.forwardRef(
     };
     const selectTemplate = async (item, skipConfirm = false) => {
       if (!skipConfirm && !await confirmDiscard()) return;
+      closeTour();
       instanceRef.current?.setDocument(item.document);
       savedSnapshotRef.current = JSON.stringify(item.document);
       setSelectedTemplateId(item.templateId);
@@ -9338,6 +10387,7 @@ var ReactPrintDesign = react.forwardRef(
     };
     const selectDefaultTemplate = async (item, skipConfirm = false) => {
       if (!skipConfirm && !await confirmDiscard()) return;
+      closeTour();
       instanceRef.current?.setDocument(item);
       savedSnapshotRef.current = JSON.stringify(item);
       setSelectedTemplateId(null);
@@ -9539,6 +10589,7 @@ var ReactPrintDesign = react.forwardRef(
       );
     };
     const handleEditorKeyDown = (event) => {
+      if (tourOpen) return;
       if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
         event.preventDefault();
         void saveTemplate();
@@ -9654,7 +10705,7 @@ var ReactPrintDesign = react.forwardRef(
                 onApplyPreferences: applyPreferences,
                 onResetPreferences: resetEditorSettings,
                 readonly,
-                contentReadonly: editingReadonly,
+                contentReadonly: editingReadonly && !tourOpen,
                 settings: {
                   ...interactionSettings,
                   showRulers,
@@ -9743,13 +10794,30 @@ var ReactPrintDesign = react.forwardRef(
               if (event.target.closest("textarea,input"))
                 return;
               event.preventDefault();
+              const selector = instanceRef.current?.tableSelectorAtClientPoint(
+                event.clientX,
+                event.clientY
+              );
               mutate(
-                (instance) => instance.selectAtClientPoint(
+                (instance) => selector ? instance.selectTableSelector(
+                  selector.elementId,
+                  selector.kind,
+                  selector.index,
+                  selector.area
+                ) : instance.selectAtClientPoint(
                   event.clientX,
                   event.clientY
                 )
               );
-              setContextMenu({ x: event.clientX, y: event.clientY });
+              setContextMenu({
+                x: event.clientX,
+                y: event.clientY,
+                tableSelector: selector,
+                tableCell: instanceRef.current?.tableCellAtClientPoint(
+                  event.clientX,
+                  event.clientY
+                )
+              });
             },
             onDragOver: handleCanvasDragOver,
             onDrop: handleCanvasDrop
@@ -9768,7 +10836,7 @@ var ReactPrintDesign = react.forwardRef(
             document: document2,
             version: selectedVersion,
             invalid: selectedInvalid,
-            readonly: editingReadonly || previewOpen,
+            readonly: editingReadonly && !tourOpen || previewOpen,
             onChange: (patch) => void updateTemplateMetadata(patch)
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -9779,6 +10847,34 @@ var ReactPrintDesign = react.forwardRef(
             page: activePage,
             element: activeTab === "pages" ? void 0 : selectedElement,
             selectedIds: activeTab === "pages" ? [] : selection.elementIds,
+            tableCellSelection: instanceRef.current?.getTableCellSelection(),
+            onMergeSelectedTableCells: () => mutate((instance) => {
+              const range = instance.getTableCellSelection();
+              if (!range) return;
+              const row = Math.min(range.startRow, range.endRow);
+              const column = Math.min(
+                range.startColumn,
+                range.endColumn
+              );
+              const rows = Math.abs(range.endRow - range.startRow) + 1;
+              const columns = Math.abs(range.endColumn - range.startColumn) + 1;
+              if (range.area === "header")
+                instance.mergeTableHeaderCell(
+                  range.elementId,
+                  row,
+                  column,
+                  rows,
+                  columns
+                );
+              else
+                instance.mergeTableCell(
+                  range.elementId,
+                  row,
+                  column,
+                  rows,
+                  columns
+                );
+            }),
             onAlign: (align) => mutate((instance) => instance.alignSelection(align)),
             onGroupRename: (id, name) => mutate((instance) => instance.renameGroup(id, name)),
             onSaveGroup: requestSaveGroup,
@@ -9788,7 +10884,7 @@ var ReactPrintDesign = react.forwardRef(
               (instance) => instance.setElementLayer(selectedElement.id, index)
             ),
             guide: activeTab === "pages" ? void 0 : selection.guide,
-            readonly: editingReadonly || previewOpen,
+            readonly: editingReadonly && !tourOpen || previewOpen,
             settings: { ...interactionSettings, showGuides },
             onSettingsChange: changeSettings,
             onGuidePositionChange: (position) => selection.guide && mutate(
@@ -9825,10 +10921,30 @@ var ReactPrintDesign = react.forwardRef(
               if (event.target.closest("textarea,input"))
                 return;
               event.preventDefault();
+              const selector = instanceRef.current?.tableSelectorAtClientPoint(
+                event.clientX,
+                event.clientY
+              );
               mutate(
-                (instance) => instance.selectAtClientPoint(event.clientX, event.clientY)
+                (instance) => selector ? instance.selectTableSelector(
+                  selector.elementId,
+                  selector.kind,
+                  selector.index,
+                  selector.area
+                ) : instance.selectAtClientPoint(
+                  event.clientX,
+                  event.clientY
+                )
               );
-              setContextMenu({ x: event.clientX, y: event.clientY });
+              setContextMenu({
+                x: event.clientX,
+                y: event.clientY,
+                tableSelector: selector,
+                tableCell: instanceRef.current?.tableCellAtClientPoint(
+                  event.clientX,
+                  event.clientY
+                )
+              });
             },
             onDragOver: handleCanvasDragOver,
             onDrop: handleCanvasDrop
@@ -9862,7 +10978,9 @@ var ReactPrintDesign = react.forwardRef(
                 selection.elementIds,
                 editingReadonly,
                 instanceRef.current,
-                requestSaveGroup
+                requestSaveGroup,
+                contextMenu?.tableCell,
+                contextMenu?.tableSelector
               ),
               onAction: (item) => {
                 if (item.key === "saveCustomComponent") {
@@ -9873,6 +10991,20 @@ var ReactPrintDesign = react.forwardRef(
               onClose: () => setContextMenu(null)
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ReactTour,
+            {
+              open: tourOpen,
+              steps: tourDisplaySteps,
+              current: tourIndex,
+              highlightTarget: tourHighlightTarget,
+              onChange: focusTourStep,
+              onClose: closeTour,
+              playing: tourPlaying,
+              onPlayingChange: setTourPlaying,
+              interval: 4500
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.ReactPopconfirm,
             {
@@ -10082,7 +11214,7 @@ var ReactPrintDesign = react.forwardRef(
                         onClick: () => setPreviewIndex((index) => Math.max(0, index - 1))
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", children: preview.error ? preview.error : `${preview.pages.length ? previewIndex + 1 : 0} / ${preview.pages.length}${preview.processed < mockRecords.length ? " \xB7 \u751F\u6210\u4E2D" : ""}` }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", children: preview.error ? preview.error : `${preview.pages.length ? previewIndex + 1 : 0} / ${preview.pages.length}${preview.loading ? ` \xB7 ${preview.progress || "\u751F\u6210\u4E2D"}` : ""}` }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       reactComponents.ReactButton,
                       {
@@ -10155,10 +11287,10 @@ var ReactPrintDesign = react.forwardRef(
                     {
                       key: "html",
                       label: "HTML",
-                      draggable: true,
+                      draggable: dragReady,
                       onDragStart: (event) => setExportDragData(
                         event.dataTransfer,
-                        createHtmlBlob(document2, currentData),
+                        createHtmlBlob(dragDocument, dragData),
                         exportFileName("html")
                       )
                     },
@@ -10166,11 +11298,11 @@ var ReactPrintDesign = react.forwardRef(
                       key: "png",
                       label: "PNG \xB7 \u5168\u90E8\u9875 ZIP",
                       description: "\u6309 Mock \u6570\u636E\u9010\u9875\u5BFC\u51FA",
-                      draggable: true,
+                      draggable: dragReady,
                       onPointerEnter: preparePngDrag,
                       onDragStart: (event) => {
                         const ready = pngDragRef.current;
-                        if (ready?.document === document2 && ready.records === mockRecords && ready.blob) {
+                        if (ready?.document === dragDocument && ready.records === dragRecords && ready.blob) {
                           setExportDragData(
                             event.dataTransfer,
                             ready.blob,
@@ -10187,11 +11319,11 @@ var ReactPrintDesign = react.forwardRef(
                       key: "pdf",
                       label: "PDF \xB7 \u5B9E\u9A8C\u6027",
                       description: "\u56FE\u7247\u5F0F\u9875\u9762\uFF0C\u6587\u5B57\u6682\u4E0D\u53EF\u9009\u4E2D",
-                      draggable: true,
+                      draggable: dragReady,
                       onPointerEnter: preparePdfDrag,
                       onDragStart: (event) => {
                         const ready = pdfDragRef.current;
-                        if (ready?.document === document2 && ready.data === currentData && ready.blob) {
+                        if (ready?.document === dragDocument && ready.data === dragData && ready.blob) {
                           setExportDragData(
                             event.dataTransfer,
                             ready.blob,
@@ -10217,9 +11349,32 @@ var ReactPrintDesign = react.forwardRef(
                   title: "\u6253\u5370",
                   "aria-label": "\u6253\u5370",
                   icon: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactPrinterOutlined, { "aria-hidden": "true" }),
-                  onClick: () => mutate((instance) => {
-                    instance.printDocument();
-                  })
+                  onClick: () => {
+                    if (!previewLoader) {
+                      mutate((instance) => {
+                        instance.printDocument();
+                      });
+                      return;
+                    }
+                    const popup = window.open("", "_blank");
+                    if (!popup) return;
+                    popup.document.body.textContent = "\u6B63\u5728\u51C6\u5907\u6253\u5370\u6570\u636E\u2026";
+                    void resolveOutputSource().then((source) => {
+                      if (!popup.closed)
+                        printDesign.printPrintDesignHtml(
+                          popup,
+                          printDesign.transformPrintDesignToHtml(source.document, {
+                            data: source.data
+                          })
+                        );
+                    }).catch((cause) => {
+                      popup.close();
+                      if (!(cause instanceof Error && cause.name === "AbortError"))
+                        window.alert(
+                          cause instanceof Error ? cause.message : "\u51C6\u5907\u6253\u5370\u6570\u636E\u5931\u8D25"
+                        );
+                    });
+                  }
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10236,6 +11391,30 @@ var ReactPrintDesign = react.forwardRef(
                   }))
                 }
               ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.ReactButton,
+                {
+                  title: "\u6F14\u793A\u6A21\u677F\u642D\u5EFA\u64CD\u4F5C",
+                  "aria-label": "\u6F14\u793A\u6A21\u677F\u642D\u5EFA\u64CD\u4F5C",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactPlayCircleOutlined, { "aria-hidden": "true" }),
+                  onClick: () => {
+                    const instance = instanceRef.current;
+                    if (!instance) return;
+                    const source = instance.getDocument();
+                    const first = createPrintDesignTourSteps(source)[0];
+                    setPreviewOpen(false);
+                    setContextMenu(null);
+                    tourSourceRef.current = source;
+                    setTourSource(source);
+                    instance.showTemporaryDocument(
+                      createPrintDesignTourDocument(source, first)
+                    );
+                    setTourIndex(0);
+                    setTourPlaying(true);
+                    setTourOpen(true);
+                  }
+                }
+              ),
               props.showFullscreenButton !== false || props.onClose ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cc-print-design-toolbar-separator" }) : null,
               props.showFullscreenButton !== false ? /* @__PURE__ */ jsxRuntime.jsx(
                 reactComponents.ReactButton,