@a3s-lab/office 0.26.0 → 0.27.0

package/dist/0~spreadsheet-editor.js

@@ -4,7 +4,7 @@ import { Workbook } from "@fortune-sheet/react";
 import { AArrowDown, AArrowUp, AlignCenter, AlignLeft, AlignRight, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, AlignVerticalJustifyStart, ArrowDown, ArrowDownToLine, ArrowLeft, ArrowLeftToLine, ArrowRight, ArrowRightToLine, ArrowUp, ArrowUpToLine, BadgeJapaneseYen, BarChart3, BetweenHorizontalEnd, BetweenHorizontalStart, BetweenVerticalEnd, BetweenVerticalStart, Bold, Bookmark, Calculator, CalendarClock, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, ClipboardPaste, Clock, Cloud, Columns3, Copy, CopyPlus, DecimalsArrowLeft, DecimalsArrowRight, Eraser, Eye, EyeOff, FileX2, Globe2, Grid2X2, Grid3X3, Hash, Italic, KeyRound, Layers2, Link2, Link2Off, ListChecks, ListFilter, LocateFixed, Merge, MessageSquareX, MoveHorizontal, MoveVertical, Paintbrush, Palette, PanelLeft, PanelTop, PanelsTopLeft, Pencil, Percent, Plus, Printer, Redo2, RefreshCw, Rows3, Save, Scissors, Search, Settings2, ShieldCheck, Sigma, SortAsc, SortDesc, Strikethrough, SwatchBook, Table2, TableProperties, Trash2, Underline, Undo2, WrapText, X } from "lucide-react";
 import { Fragment as external_react_Fragment, cloneElement, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { convertSpanToShareString, genarate, indexToColumnChar, update as core_update } from "@fortune-sheet/core";
-import { freezeImportedSpreadsheetCell, spreadsheetMatrixProfile, xlsxRichTextCellText, spreadsheetTextOrientationFromAngle, spreadsheetCellValueWithDiagonalBorder, xlsxSemanticColorMatchesValue, spreadsheetUnderlineCellValue, normalizeXlsxRichTextEditSource, attachSpreadsheetShownCommentCells, sameSpreadsheetHistoryValue, isSpreadsheetConditionalComparisonOperator, defaultSpreadsheetConditionalIconThresholds, normalizeXlsxRichTextCell, normalizeSpreadsheetDateValidationBoundary, unlockedCellCount, editableRangeRequiresCredentials, spreadsheetTextOrientationChoiceFromCell, spreadsheetConditionalThresholdValue, withSheetProtection, defaultSpreadsheetColorScaleThresholds, protectedSheetCount, sameXlsxRichTextRunStyle, withSheetSelectionPermissions, spreadsheetTextOrientationFromCell, patchSpreadsheetRichTextFontRuns, readOfficeSpreadsheetCollaboration as readWorkOfficeSpreadsheetCollaboration, spreadsheetConditionalThresholdsEqual, spreadsheetVisibleTextRotationFromCell, spreadsheetTextOrientationFromChoice, normalizeXlsxSemanticColorOrigin, withoutEditableRange, isSpreadsheetTextOrientationId, normalizeSpreadsheetConditionalVisualOptions, effectiveSpreadsheetPageSetup, normalizeXlsxRichTextColor, isHighSurrogate, withEditableRange, createOfficeSpreadsheetCollaborationBinding as createWorkOfficeSpreadsheetCollaborationBinding, spreadsheetConditionalIconForValue, spreadsheetUnderlineStyle, sheetProtectionAuthority, editableRangeCellCount, registerDerivedSpreadsheetMatrix, SPREADSHEET_CONDITIONAL_COMPARISON_OPERATORS, spreadsheetTextOrientationCellStyle, normalizeSpreadsheetConditionalIconSetFormat, defaultSpreadsheetDataBarOptions, normalizeSheetProtectionAuthority, spreadsheetProtectionKey, normalizeXlsxRichTextRun, spreadsheetDiagonalBorderFromCellValue, SPREADSHEET_CONDITIONAL_ICON_SETS, isLowSurrogate, spreadsheetConditionalComparisonNeedsUpperValue, drawSpreadsheetConditionalIcon, coalesceXlsxRichTextRuns, replaceOfficeSpreadsheetCollaboration as replaceWorkOfficeSpreadsheetCollaboration, validXlsxRichText, isSpreadsheetUnderlineStyle } from "./164.js";
+import { freezeImportedSpreadsheetCell, withXlsxPatternFill, spreadsheetMatrixProfile, xlsxRichTextCellText, spreadsheetTextOrientationFromAngle, spreadsheetCellValueWithDiagonalBorder, xlsxSemanticColorMatchesValue, spreadsheetUnderlineCellValue, normalizeXlsxRichTextEditSource, attachSpreadsheetShownCommentCells, sameSpreadsheetHistoryValue, isSpreadsheetConditionalComparisonOperator, defaultSpreadsheetConditionalIconThresholds, normalizeXlsxRichTextCell, activeXlsxNativeFill, xlsxPatternFillTypes, normalizeSpreadsheetDateValidationBoundary, unlockedCellCount, editableRangeRequiresCredentials, spreadsheetTextOrientationChoiceFromCell, spreadsheetConditionalThresholdValue, withSheetProtection, defaultSpreadsheetColorScaleThresholds, protectedSheetCount, sameXlsxRichTextRunStyle, withSheetSelectionPermissions, spreadsheetTextOrientationFromCell, patchSpreadsheetRichTextFontRuns, readOfficeSpreadsheetCollaboration as readWorkOfficeSpreadsheetCollaboration, spreadsheetConditionalThresholdsEqual, spreadsheetVisibleTextRotationFromCell, spreadsheetTextOrientationFromChoice, normalizeXlsxSemanticColorOrigin, withoutEditableRange, isSpreadsheetTextOrientationId, normalizeSpreadsheetConditionalVisualOptions, withXlsxGradientFill, effectiveSpreadsheetPageSetup, normalizeXlsxPatternFill, normalizeXlsxRichTextColor, isHighSurrogate, xlsxNativeFillCellKeys, withEditableRange, createOfficeSpreadsheetCollaborationBinding as createWorkOfficeSpreadsheetCollaborationBinding, spreadsheetConditionalIconForValue, spreadsheetUnderlineStyle, sheetProtectionAuthority, normalizeXlsxGradientFill, xlsxGradientFillFallbackColor, editableRangeCellCount, registerDerivedSpreadsheetMatrix, deleteXlsxNativeFills, spreadsheetTextOrientationCellStyle, normalizeSpreadsheetConditionalIconSetFormat, defaultSpreadsheetDataBarOptions, normalizeSheetProtectionAuthority, spreadsheetProtectionKey, SPREADSHEET_CONDITIONAL_COMPARISON_OPERATORS, normalizeXlsxRichTextRun, spreadsheetDiagonalBorderFromCellValue, SPREADSHEET_CONDITIONAL_ICON_SETS, isLowSurrogate, spreadsheetConditionalComparisonNeedsUpperValue, drawSpreadsheetConditionalIcon, coalesceXlsxRichTextRuns, replaceOfficeSpreadsheetCollaboration as replaceWorkOfficeSpreadsheetCollaboration, validXlsxRichText, isSpreadsheetUnderlineStyle } from "./1544.js";
 import { workSpreadsheetChartSupportsGrouping, spreadsheetFormulaRangesForSelection, createSpreadsheetChartFromSelection, normalizeWorkSpreadsheetDataLabelPosition, normalizeSpreadsheetPrintTitleColumns, normalizeSpreadsheetPrintTitleRows, formulaHasStructuredReference, normalizeWorkSpreadsheetErrorBars, defaultPivotValueCaption, workSpreadsheetChartSupportsBarSpacing, normalizeWorkSpreadsheetChartGrouping, spreadsheetGridSize, normalizeWorkSpreadsheetChartAxisGroup, normalizeWorkSpreadsheetScatterStyle, cloneSparseMatrix, spreadsheetPivotAggregationLabel, workSpreadsheetChartAxisIsCategoryAxis, reconcileSpreadsheetChartPreviews, normalizeWorkSpreadsheetChartAxes, normalizeWorkSpreadsheetDoughnutHoleSize, normalizeWorkSpreadsheetChartLegendPosition, spreadsheetChartCount, workSpreadsheetChartTypeLabel, sparseArrayEntries, normalizeWorkSpreadsheetTrendline, effectiveSpreadsheetCalculationSettings, spreadsheetPivotIntersects, normalizeWorkSpreadsheetDataLabels, spreadsheetPivotOutputContains, normalizeSpreadsheetPrintArea, spreadsheetCellAddress, formatSpreadsheetCellRanges, normalizeWorkSpreadsheetChartLayout, spreadsheetFormulaRangeForCell, workSpreadsheetChartAxisIsValueAxis, normalizeWorkSpreadsheetChartSmoothLines, spreadsheetPivotFilterValueKey, normalizeWorkSpreadsheetBubbleScale, normalizeWorkSpreadsheetChartSeriesStyle, volatileSpreadsheetFormulaFunctions, sparseArrayIndexes, normalizeWorkSpreadsheetBubbleSizeRepresents, workSpreadsheetChartSupportsTrendlines, normalizeWorkSpreadsheetChartLegendOverlay, parseSpreadsheetChartReference, workSpreadsheetChartGroupingIsStacked, normalizeWorkSpreadsheetChartGapWidth, workSpreadsheetChartSupportsSmoothLines, refreshSpreadsheetPivotTables, createSpreadsheetPivotFromSelection, reconcileSpreadsheetPivots, spreadsheetPivotCount, sparseMatrixColumnCount, workSpreadsheetChartSupportsErrorBars, formulaHasExternalReference, isValidSpreadsheetDefinedName, spreadsheetPivotValidation, deleteSpreadsheetPivotTable, workSpreadsheetChartAxisDefaultLabelPosition, workSpreadsheetChartSupportsSeriesAnalysis, parseSpreadsheetCellRanges, spreadsheetPivotFilterItems, spreadsheetPivotFields, normalizeWorkSpreadsheetChartOverlap, spreadsheetFormulaRangeConflict, spreadsheetSheetsWithChartPreviews, workSpreadsheetChartUsesNumericXAxis, workSpreadsheetChartAxisShowsMajorGridlinesByDefault, workSpreadsheetChartSupportsAxes, normalizeWorkSpreadsheetCombinationSeriesType, normalizeWorkSpreadsheetRadarStyle } from "./8715.js";
 import { moveOfficeMenuFocus, stepOfficeZoom, useOfficeRemoteParticipants, Popover, officePresenceColor, useOfficePublishPresenceLocation, button_Button, icon_button_IconButton, moveOfficeGridMenuFocus, office_text_field_OfficeTextField, useDialogFocusScope, useOfficeEditorWheelZoom } from "./0~6090.js";
 import { normalizeCssColor } from "./9424.js";
@@ -544,6 +544,248 @@ function spreadsheetDiagonalLineDash(style) {
     ];
     return [];
 }
+const MAX_PATH_GRADIENT_CONTOURS = 96;
+function drawSpreadsheetGradientFill(context, bounds, fill, fillRect = context.fillRect) {
+    const left = Math.min(bounds.startX, bounds.endX);
+    const top = Math.min(bounds.startY, bounds.endY);
+    const right = Math.max(bounds.startX, bounds.endX);
+    const bottom = Math.max(bounds.startY, bounds.endY);
+    const width = right - left;
+    const height = bottom - top;
+    if (width <= 0 || height <= 0) return;
+    context.save();
+    if ('linear' === fill.type) drawLinearGradient(context, left, top, width, height, fill, fillRect);
+    else drawPathGradient(context, left, top, width, height, fill, fillRect);
+    context.restore();
+}
+function drawLinearGradient(context, left, top, width, height, fill, fillRect) {
+    if ('function' != typeof context.createLinearGradient) {
+        context.fillStyle = fill.stops[0]?.color ?? '#ffffff';
+        fillRect.call(context, left, top, width, height);
+        return;
+    }
+    const radians = fill.degree * Math.PI / 180;
+    const horizontal = Math.cos(radians);
+    const vertical = Math.sin(radians);
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    const span = Math.abs(width * horizontal) + Math.abs(height * vertical);
+    const gradient = context.createLinearGradient(centerX - horizontal * span / 2, centerY - vertical * span / 2, centerX + horizontal * span / 2, centerY + vertical * span / 2);
+    for (const stop of fill.stops)gradient.addColorStop(stop.position, stop.color);
+    context.fillStyle = gradient;
+    fillRect.call(context, left, top, width, height);
+}
+function drawPathGradient(context, left, top, width, height, fill, fillRect) {
+    const innerLeft = left + width * fill.left;
+    const innerRight = left + width * fill.right;
+    const innerTop = top + height * fill.top;
+    const innerBottom = top + height * fill.bottom;
+    const contours = Math.min(MAX_PATH_GRADIENT_CONTOURS, Math.max(2, Math.ceil(Math.max(width, height))));
+    for(let index = contours; index >= 0; index -= 1){
+        const progress = index / contours;
+        const contourLeft = interpolate(innerLeft, left, progress);
+        const contourRight = interpolate(innerRight, left + width, progress);
+        const contourTop = interpolate(innerTop, top, progress);
+        const contourBottom = interpolate(innerBottom, top + height, progress);
+        context.fillStyle = gradientColorAt(fill.stops, progress);
+        fillRect.call(context, contourLeft, contourTop, contourRight - contourLeft, contourBottom - contourTop);
+    }
+}
+function gradientColorAt(stops, position) {
+    const first = stops[0];
+    const last = stops.at(-1);
+    if (!first || !last || position <= first.position) return first?.color ?? '#ffffff';
+    if (position >= last.position) return last.color;
+    for(let index = 1; index < stops.length; index += 1){
+        const right = stops[index];
+        const left = stops[index - 1];
+        if (!left || !right || position > right.position) continue;
+        const span = right.position - left.position;
+        const progress = span > 0 ? (position - left.position) / span : 1;
+        return interpolateRgb(left.color, right.color, progress);
+    }
+    return last.color;
+}
+function interpolateRgb(left, right, progress) {
+    const leftRgb = rgbChannels(left);
+    const rightRgb = rgbChannels(right);
+    if (!leftRgb || !rightRgb) return progress < 0.5 ? left : right;
+    return `#${leftRgb.map((channel, index)=>Math.round(interpolate(channel, rightRgb[index] ?? channel, progress)).toString(16).padStart(2, '0')).join('')}`;
+}
+function rgbChannels(color) {
+    if (!/^#[0-9a-f]{6}$/i.test(color)) return null;
+    return [
+        Number.parseInt(color.slice(1, 3), 16),
+        Number.parseInt(color.slice(3, 5), 16),
+        Number.parseInt(color.slice(5, 7), 16)
+    ];
+}
+function interpolate(left, right, progress) {
+    return left + (right - left) * progress;
+}
+function drawSpreadsheetPatternFillOverlay(context, bounds, fill) {
+    const left = Math.min(bounds.startX, bounds.endX) + 1;
+    const top = Math.min(bounds.startY, bounds.endY) + 1;
+    const right = Math.max(bounds.startX, bounds.endX) - 1;
+    const bottom = Math.max(bounds.startY, bounds.endY) - 1;
+    if (right <= left || bottom <= top) return;
+    context.save();
+    context.beginPath();
+    context.rect(left, top, right - left, bottom - top);
+    context.clip();
+    context.strokeStyle = fill.foregroundColor;
+    context.fillStyle = fill.foregroundColor;
+    context.setLineDash([]);
+    switch(fill.patternType){
+        case 'darkHorizontal':
+            drawHorizontalLines(context, left, top, right, bottom, 4, 2);
+            break;
+        case 'lightHorizontal':
+            drawHorizontalLines(context, left, top, right, bottom, 7, 1);
+            break;
+        case 'darkVertical':
+            drawVerticalLines(context, left, top, right, bottom, 4, 2);
+            break;
+        case 'lightVertical':
+            drawVerticalLines(context, left, top, right, bottom, 7, 1);
+            break;
+        case 'darkDown':
+            drawDiagonalLines(context, left, top, right, bottom, 5, 2, 'down');
+            break;
+        case 'lightDown':
+            drawDiagonalLines(context, left, top, right, bottom, 8, 1, 'down');
+            break;
+        case 'darkUp':
+            drawDiagonalLines(context, left, top, right, bottom, 5, 2, 'up');
+            break;
+        case 'lightUp':
+            drawDiagonalLines(context, left, top, right, bottom, 8, 1, 'up');
+            break;
+        case 'darkGrid':
+            drawHorizontalLines(context, left, top, right, bottom, 5, 1.5);
+            drawVerticalLines(context, left, top, right, bottom, 5, 1.5);
+            break;
+        case 'lightGrid':
+            drawHorizontalLines(context, left, top, right, bottom, 8, 1);
+            drawVerticalLines(context, left, top, right, bottom, 8, 1);
+            break;
+        case 'darkTrellis':
+            drawDiagonalLines(context, left, top, right, bottom, 6, 1.5, 'down');
+            drawDiagonalLines(context, left, top, right, bottom, 6, 1.5, 'up');
+            break;
+        case 'lightTrellis':
+            drawDiagonalLines(context, left, top, right, bottom, 10, 1, 'down');
+            drawDiagonalLines(context, left, top, right, bottom, 10, 1, 'up');
+            break;
+        case 'gray0625':
+            drawPatternDots(context, left, top, right, bottom, 8, 1);
+            break;
+        case 'gray125':
+            drawPatternDots(context, left, top, right, bottom, 6, 1);
+            break;
+        case 'lightGray':
+            drawPatternDots(context, left, top, right, bottom, 4, 1.5);
+            break;
+        case 'mediumGray':
+            drawDiagonalLines(context, left, top, right, bottom, 4, 1, 'down');
+            drawDiagonalLines(context, left, top, right, bottom, 4, 1, 'up');
+            break;
+        case 'darkGray':
+            context.fillRect(left, top, right - left, bottom - top);
+            context.fillStyle = fill.backgroundColor;
+            drawPatternDots(context, left, top, right, bottom, 4, 1.5);
+            break;
+    }
+    context.restore();
+}
+function drawHorizontalLines(context, left, top, right, bottom, requestedSpacing, lineWidth) {
+    const spacing = boundedLineSpacing(bottom - top, requestedSpacing);
+    context.lineWidth = lineWidth;
+    context.beginPath();
+    for(let y = alignedPatternStart(top, spacing); y <= bottom; y += spacing){
+        context.moveTo(left, crispPatternCoordinate(y, lineWidth));
+        context.lineTo(right, crispPatternCoordinate(y, lineWidth));
+    }
+    context.stroke();
+}
+function drawVerticalLines(context, left, top, right, bottom, requestedSpacing, lineWidth) {
+    const spacing = boundedLineSpacing(right - left, requestedSpacing);
+    context.lineWidth = lineWidth;
+    context.beginPath();
+    for(let x = alignedPatternStart(left, spacing); x <= right; x += spacing){
+        context.moveTo(crispPatternCoordinate(x, lineWidth), top);
+        context.lineTo(crispPatternCoordinate(x, lineWidth), bottom);
+    }
+    context.stroke();
+}
+function drawDiagonalLines(context, left, top, right, bottom, requestedSpacing, lineWidth, direction) {
+    const height = bottom - top;
+    const spacing = boundedLineSpacing(right - left + height, requestedSpacing);
+    context.lineWidth = lineWidth;
+    context.beginPath();
+    const first = alignedPatternStart(left - height, spacing);
+    for(let x = first; x <= right; x += spacing)if ('down' === direction) {
+        context.moveTo(x, top);
+        context.lineTo(x + height, bottom);
+    } else {
+        context.moveTo(x, bottom);
+        context.lineTo(x + height, top);
+    }
+    context.stroke();
+}
+function drawPatternDots(context, left, top, right, bottom, requestedSpacing, size) {
+    const area = Math.max(1, (right - left) * (bottom - top));
+    const spacing = Math.max(requestedSpacing, Math.sqrt(area / 2048));
+    const startX = alignedPatternStart(left, spacing);
+    const startY = alignedPatternStart(top, spacing);
+    for(let y = startY; y <= bottom; y += spacing){
+        const offset = Math.round(y / spacing) % 2 ? spacing / 2 : 0;
+        for(let x = startX + offset; x <= right; x += spacing)context.fillRect(x, y, size, size);
+    }
+}
+function alignedPatternStart(value, spacing) {
+    return Math.floor(value / spacing) * spacing;
+}
+function boundedLineSpacing(span, requested) {
+    return Math.max(requested, span / 512);
+}
+function crispPatternCoordinate(value, lineWidth) {
+    return Math.round(value) + (Math.round(lineWidth) % 2 ? 0.5 : 0);
+}
+const pendingContextRestores = new WeakMap();
+function beginSpreadsheetNativeFillRender(fill, context) {
+    finishSpreadsheetNativeFillRender(context);
+    if (!fill || 'function' != typeof context.fillRect) return;
+    context.fillStyle = 'gradient' === fill.kind ? fill.value.stops[0]?.color ?? '#ffffff' : fill.value.backgroundColor;
+    const fillRect = context.fillRect;
+    pendingContextRestores.set(context, {
+        fillRect,
+        fillRectOwned: Object.hasOwn(context, 'fillRect')
+    });
+    context.fillRect = (x, y, width, height)=>{
+        restoreSpreadsheetNativeFillContext(context);
+        const bounds = {
+            endX: x + width,
+            endY: y + height,
+            startX: x,
+            startY: y
+        };
+        if ('gradient' === fill.kind) return void drawSpreadsheetGradientFill(context, bounds, fill.value, fillRect);
+        context.fillStyle = fill.value.backgroundColor;
+        fillRect.call(context, x, y, width, height);
+        drawSpreadsheetPatternFillOverlay(context, bounds, fill.value);
+    };
+}
+function finishSpreadsheetNativeFillRender(context) {
+    restoreSpreadsheetNativeFillContext(context);
+}
+function restoreSpreadsheetNativeFillContext(context) {
+    const restore = pendingContextRestores.get(context);
+    if (!restore) return;
+    if (restore.fillRectOwned) context.fillRect = restore.fillRect;
+    else delete context.fillRect;
+    pendingContextRestores.delete(context);
+}
 function spreadsheet_cell_range_normalizeSpreadsheetCellRange(value) {
     const row = normalizeSpreadsheetCellRangeAxis(value.row);
     const column = normalizeSpreadsheetCellRangeAxis(value.column);
@@ -4701,7 +4943,8 @@ const spreadsheetCellFormatProperties = [
     'rt',
     'ct',
     'lo',
-    'hi'
+    'hi',
+    ...xlsxNativeFillCellKeys
 ];
 function clearSpreadsheetSheetSelection(sheet, selection, mode) {
     const range = normalizeClearRange(selection);
@@ -5208,6 +5451,79 @@ function setSpreadsheetCellBordersPerCell(content, sheetId, range, formats) {
         sheets
     };
 }
+function spreadsheetCellFillFormat(cell) {
+    const nativeFill = activeXlsxNativeFill(cell);
+    if (nativeFill) return nativeFill;
+    const color = normalizeSpreadsheetFillColor(cell?.bg);
+    return color ? {
+        color,
+        kind: 'solid'
+    } : {
+        kind: 'none'
+    };
+}
+function normalizeSpreadsheetCellFillFormat(value) {
+    if (!spreadsheet_cell_fill_format_isRecord(value)) return null;
+    if ('none' === value.kind) return {
+        kind: 'none'
+    };
+    if ('solid' === value.kind) {
+        const color = normalizeSpreadsheetFillColor(value.color);
+        return color ? {
+            color,
+            kind: 'solid'
+        } : null;
+    }
+    if ('pattern' === value.kind) {
+        const fill = normalizeXlsxPatternFill(value.value);
+        return fill ? {
+            kind: 'pattern',
+            value: fill
+        } : null;
+    }
+    if ('gradient' === value.kind) {
+        const fill = normalizeXlsxGradientFill(value.value);
+        return fill ? {
+            kind: 'gradient',
+            value: fill
+        } : null;
+    }
+    return null;
+}
+function withSpreadsheetCellFillFormat(cell, fill) {
+    const normalized = normalizeSpreadsheetCellFillFormat(fill);
+    if (!normalized) return null;
+    const next = {
+        ...cell
+    };
+    deleteXlsxNativeFills(next);
+    if ('none' === normalized.kind) {
+        delete next.bg;
+        return next;
+    }
+    if ('solid' === normalized.kind) {
+        next.bg = normalized.color;
+        return next;
+    }
+    if ('pattern' === normalized.kind) {
+        next.bg = normalized.value.backgroundColor;
+        return withXlsxPatternFill(next, normalized.value);
+    }
+    next.bg = xlsxGradientFillFallbackColor(normalized.value);
+    return withXlsxGradientFill(next, normalized.value);
+}
+function normalizeSpreadsheetFillColor(value) {
+    if ('string' != typeof value) return null;
+    const color = value.trim().toLowerCase();
+    if (/^#[0-9a-f]{6}$/.test(color)) return color;
+    if (!/^#[0-9a-f]{3}$/.test(color)) return null;
+    return `#${[
+        ...color.slice(1)
+    ].map((character)=>character.repeat(2)).join('')}`;
+}
+function spreadsheet_cell_fill_format_isRecord(value) {
+    return 'object' == typeof value && null !== value && !Array.isArray(value);
+}
 const MAX_SPREADSHEET_CELL_FORMAT_CELLS = 10000;
 const patchKeys = new Set([
     'numberFormat',
@@ -5223,7 +5539,7 @@ const patchKeys = new Set([
     'italic',
     'underline',
     'strike',
-    'fillColor',
+    'fill',
     'borders',
     'locked',
     'hidden'
@@ -5243,7 +5559,7 @@ function canApplySpreadsheetCellFormat(content, request) {
         'top',
         'middle',
         'bottom'
-    ].includes(patch.verticalAlignment) || void 0 !== patch.wrapText && 'boolean' != typeof patch.wrapText || void 0 !== patch.rotation && (!Number.isInteger(patch.rotation) || patch.rotation < -90 || patch.rotation > 90) || void 0 !== patch.textOrientation && !isSpreadsheetTextOrientationId(patch.textOrientation) || void 0 !== patch.rotation && void 0 !== patch.textOrientation || void 0 !== patch.fontFamily && !validTrimmedString(patch.fontFamily, 128) || void 0 !== patch.fontSize && (!Number.isFinite(patch.fontSize) || patch.fontSize < 1 || patch.fontSize > 409) || void 0 !== patch.fontColor && !normalizeColor(patch.fontColor) || void 0 !== patch.fillColor && null !== patch.fillColor && !normalizeColor(patch.fillColor) || !validOptionalBoolean(patch.bold) || !validOptionalBoolean(patch.italic) || void 0 !== patch.underline && !isSpreadsheetUnderlineStyle(patch.underline) || !validOptionalBoolean(patch.strike) || !validOptionalBoolean(patch.locked) || !validOptionalBoolean(patch.hidden)) return false;
+    ].includes(patch.verticalAlignment) || void 0 !== patch.wrapText && 'boolean' != typeof patch.wrapText || void 0 !== patch.rotation && (!Number.isInteger(patch.rotation) || patch.rotation < -90 || patch.rotation > 90) || void 0 !== patch.textOrientation && !isSpreadsheetTextOrientationId(patch.textOrientation) || void 0 !== patch.rotation && void 0 !== patch.textOrientation || void 0 !== patch.fontFamily && !validTrimmedString(patch.fontFamily, 128) || void 0 !== patch.fontSize && (!Number.isFinite(patch.fontSize) || patch.fontSize < 1 || patch.fontSize > 409) || void 0 !== patch.fontColor && !normalizeColor(patch.fontColor) || void 0 !== patch.fill && !normalizeSpreadsheetCellFillFormat(patch.fill) || !validOptionalBoolean(patch.bold) || !validOptionalBoolean(patch.italic) || void 0 !== patch.underline && !isSpreadsheetUnderlineStyle(patch.underline) || !validOptionalBoolean(patch.strike) || !validOptionalBoolean(patch.locked) || !validOptionalBoolean(patch.hidden)) return false;
     if (void 0 !== patch.borders) {
         const normalized = patch.borders.map(normalizeSpreadsheetBorderFormat);
         if (normalized.some((format)=>!format || ![
@@ -5376,7 +5692,7 @@ function formatSparseCells(sheet, range, patch) {
     };
 }
 function formatCell(source, patch) {
-    const next = {
+    let next = {
         ...source ?? {}
     };
     const writable = next;
@@ -5418,8 +5734,10 @@ function formatCell(source, patch) {
     if (void 0 !== patch.italic) next.it = patch.italic ? 1 : 0;
     if (void 0 !== patch.underline) next.un = spreadsheetUnderlineCellValue(patch.underline);
     if (void 0 !== patch.strike) next.cl = patch.strike ? 1 : 0;
-    if (void 0 !== patch.fillColor) if (null === patch.fillColor) delete next.bg;
-    else next.bg = normalizeColor(patch.fillColor) ?? patch.fillColor;
+    if (void 0 !== patch.fill) {
+        const filled = withSpreadsheetCellFillFormat(next, patch.fill);
+        if (filled) next = filled;
+    }
     if (void 0 !== patch.locked || void 0 !== patch.hidden) {
         delete next.lo;
         delete next.hi;
@@ -5910,10 +6228,14 @@ function applySpreadsheetCellStyle(content, sheetId, range, preset) {
     for(let row = normalizedRange.row[0]; row <= normalizedRange.row[1]; row += 1){
         const values = data[row] ?? [];
         data[row] = values;
-        for(let column = normalizedRange.column[0]; column <= normalizedRange.column[1]; column += 1)values[column] = {
-            ...values[column] ?? {},
-            ...definition.format
-        };
+        for(let column = normalizedRange.column[0]; column <= normalizedRange.column[1]; column += 1){
+            const cell = {
+                ...values[column] ?? {},
+                ...definition.format
+            };
+            deleteXlsxNativeFills(cell);
+            values[column] = cell;
+        }
     }
     const nextSheet = {
         ...sheet,
@@ -9675,10 +9997,35 @@ function formatCells(context, attribute, value) {
     if (context.richTextFormat?.canApply(attribute, value)) return context.richTextFormat.apply(attribute, value);
     if (!context.workbook || !context.targetSheetId) return false;
     if ('ct' === attribute && !isSpreadsheetCellTypeFormat(value)) return false;
+    const range = spreadsheetLiveCommandRange(context);
+    const options = {
+        id: context.targetSheetId
+    };
     try {
-        context.workbook.setCellFormatByRange(attribute, value, spreadsheetLiveCommandRange(context), {
-            id: context.targetSheetId
-        });
+        if ('bg' === attribute) {
+            context.workbook.batchCallApis([
+                {
+                    name: 'setCellFormatByRange',
+                    args: [
+                        attribute,
+                        value,
+                        range,
+                        options
+                    ]
+                },
+                ...xlsxNativeFillCellKeys.map((fillAttribute)=>({
+                        name: 'setCellFormatByRange',
+                        args: [
+                            fillAttribute,
+                            void 0,
+                            range,
+                            options
+                        ]
+                    }))
+            ]);
+            return true;
+        }
+        context.workbook.setCellFormatByRange(attribute, value, range, options);
         return true;
     } catch  {
         return false;
@@ -13963,146 +14310,950 @@ function SpreadsheetFindBar({ sheet, focusRequest, onClose, onSelectMatch }) {
         ]
     });
 }
-const MIXED_VALUE = '__mixed__';
-const numberFormatOptions = [
-    'general',
-    'number',
-    'currency',
-    'accounting',
-    'percent',
-    'date',
-    'time',
-    'scientific',
-    'fraction',
-    'text',
-    'custom'
-].map((value)=>({
-        value: value,
-        label: spreadsheetNumberFormatPresetLabels[value]
-    }));
-const horizontalOptions = [
-    {
-        value: 'general',
-        label: '常规'
-    },
-    {
-        value: 'left',
-        label: '左对齐'
-    },
-    {
-        value: 'center',
-        label: '居中'
-    },
-    {
-        value: 'right',
-        label: '右对齐'
-    }
-];
-const verticalOptions = [
-    {
-        value: 'top',
-        label: '顶端对齐'
-    },
-    {
-        value: 'middle',
-        label: '垂直居中'
-    },
-    {
-        value: 'bottom',
-        label: '底端对齐'
-    }
-];
-const spreadsheet_format_cells_dialog_panels_underlineOptions = [
-    {
-        value: 'none',
-        label: '无'
-    },
-    {
-        value: 'single',
-        label: '单下划线'
-    },
-    {
-        value: 'double',
-        label: '双下划线'
-    },
-    {
-        value: 'singleAccounting',
-        label: '单会计用下划线'
-    },
-    {
-        value: 'doubleAccounting',
-        label: '双会计用下划线'
-    }
-];
-const borderStyleOptions = [
-    {
-        value: 'thin',
-        label: '细实线'
-    },
-    {
-        value: 'dotted',
-        label: '点线'
-    },
-    {
-        value: 'dashed',
-        label: '虚线'
-    },
-    {
-        value: 'dash-dot',
-        label: '点划线'
-    },
-    {
-        value: 'medium',
-        label: '中等实线'
-    },
-    {
-        value: 'medium-dashed',
-        label: '中等虚线'
-    },
-    {
-        value: 'thick',
-        label: '粗实线'
-    }
-];
-const borderTargets = [
-    {
-        target: 'top',
-        label: '上框线'
-    },
-    {
-        target: 'bottom',
-        label: '下框线'
-    },
-    {
-        target: 'left',
-        label: '左框线'
-    },
-    {
-        target: 'right',
-        label: '右框线'
-    },
-    {
-        target: 'diagonalDown',
-        label: '斜下框线'
-    },
-    {
-        target: 'diagonalUp',
-        label: '斜上框线'
-    }
-];
-function SpreadsheetFormatCellsPanel(props) {
-    return /*#__PURE__*/ jsxs("section", {
-        id: `${props.idBase}-${props.activeTab}-panel`,
-        className: "work-spreadsheet-format-cells-panel",
-        role: "tabpanel",
-        "aria-labelledby": `${props.idBase}-${props.activeTab}-tab`,
-        tabIndex: -1,
-        children: [
-            'number' === props.activeTab && /*#__PURE__*/ jsx(NumberPanel, {
-                ...props
-            }),
-            'alignment' === props.activeTab && /*#__PURE__*/ jsx(AlignmentPanel, {
-                ...props
+function SegmentedControl({ ariaLabel, value, items, onChange, size = 'standard', layout = 'fit', disabled = false, className = '' }) {
+    const groupName = useId();
+    return /*#__PURE__*/ jsx("div", {
+        className: `ds-segmented-control ${size} ${layout}${className ? ` ${className}` : ''}`,
+        role: "radiogroup",
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled || void 0,
+        "aria-orientation": "horizontal",
+        children: items.map((item)=>{
+            const selected = item.id === value;
+            const itemDisabled = disabled || item.disabled;
+            return /*#__PURE__*/ jsxs("label", {
+                className: `ds-segmented-control-item${selected ? ' selected' : ''}`,
+                title: item.description,
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        type: "radio",
+                        name: groupName,
+                        value: item.id,
+                        checked: selected,
+                        disabled: itemDisabled,
+                        "aria-label": item.ariaLabel,
+                        onChange: ()=>onChange(item.id)
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "ds-segmented-control-content",
+                        children: [
+                            item.icon && /*#__PURE__*/ jsx("span", {
+                                className: "ds-segmented-control-icon",
+                                "aria-hidden": "true",
+                                children: item.icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "ds-segmented-control-label",
+                                children: item.label
+                            })
+                        ]
+                    })
+                ]
+            }, item.id);
+        })
+    });
+}
+function createSpreadsheetFormatCellsDialogSource(content, sheetId, rangeInput, cells, requestedActiveCell) {
+    const range = spreadsheet_cell_range_normalizeSpreadsheetCellRange(rangeInput);
+    const sheet = content.sheets.find((candidate)=>candidate.id === sheetId);
+    if (!range || !sheet || spreadsheet_cell_range_spreadsheetCellRangeArea(range) > 10000) return null;
+    const activeRow = clampIndex(requestedActiveCell.row, range.row[0], range.row[1]);
+    const activeColumn = clampIndex(requestedActiveCell.column, range.column[0], range.column[1]);
+    const activeCell = cells[activeRow - range.row[0]]?.[activeColumn - range.column[0]] ?? null;
+    const values = (resolve)=>{
+        const activeValue = resolve(activeCell, activeRow, activeColumn);
+        let mixed = false;
+        for(let row = range.row[0]; row <= range.row[1] && !mixed; row += 1)for(let column = range.column[0]; column <= range.column[1]; column += 1){
+            const cell = cells[row - range.row[0]]?.[column - range.column[0]] ?? null;
+            if (!sameDialogValue(resolve(cell, row, column), activeValue)) {
+                mixed = true;
+                break;
+            }
+        }
+        return {
+            value: activeValue,
+            mixed
+        };
+    };
+    const borders = borderFormatsAt(sheet, activeRow, activeColumn);
+    return {
+        sheetId,
+        range,
+        activeCell,
+        fields: {
+            numberFormat: values((cell)=>cell?.ct?.fa?.trim() || 'General'),
+            horizontalAlignment: values((cell)=>spreadsheet_format_cells_dialog_model_horizontalAlignment(cell?.ht)),
+            verticalAlignment: values((cell)=>verticalAlignment(cell?.vt)),
+            wrapText: values((cell)=>'2' === String(cell?.tb)),
+            rotation: values((cell)=>spreadsheetVisibleTextRotationFromCell(cell)),
+            fontFamily: values((cell)=>'string' == typeof cell?.ff && cell.ff.trim() ? cell.ff.trim() : 'Aptos'),
+            fontSize: values((cell)=>'number' == typeof cell?.fs && Number.isFinite(cell.fs) ? cell.fs : 10),
+            fontColor: values((cell)=>normalizedColor(cell?.fc, '#172033')),
+            bold: values((cell)=>1 === Number(cell?.bl)),
+            italic: values((cell)=>1 === Number(cell?.it)),
+            underline: values((cell)=>spreadsheetUnderlineStyle(cell?.un)),
+            strike: values((cell)=>1 === Number(cell?.cl)),
+            fill: values((cell)=>spreadsheetCellFillFormat(cell)),
+            borders: {
+                value: borders,
+                mixed: spreadsheet_cell_range_spreadsheetCellRangeArea(range) > 1
+            },
+            locked: values((cell, row, column)=>spreadsheetCellProtectionAt(sheet, row, column, cell).locked),
+            hidden: values((cell, row, column)=>spreadsheetCellProtectionAt(sheet, row, column, cell).hidden)
+        }
+    };
+}
+function createSpreadsheetFormatCellsDraft(source) {
+    const borders = source.fields.borders.value.map((format)=>({
+            ...format
+        }));
+    return {
+        numberFormat: source.fields.numberFormat.value,
+        horizontalAlignment: source.fields.horizontalAlignment.value,
+        verticalAlignment: source.fields.verticalAlignment.value,
+        wrapText: source.fields.wrapText.value,
+        rotation: source.fields.rotation.value,
+        fontFamily: source.fields.fontFamily.value,
+        fontSize: source.fields.fontSize.value,
+        fontColor: source.fields.fontColor.value,
+        bold: source.fields.bold.value,
+        italic: source.fields.italic.value,
+        underline: source.fields.underline.value,
+        strike: source.fields.strike.value,
+        fill: createSpreadsheetFormatCellsFillDraft(source.fields.fill.value),
+        borders,
+        borderColor: borders[0]?.color ?? '#172033',
+        borderStyle: borders[0]?.style ?? 'thin',
+        locked: source.fields.locked.value,
+        hidden: source.fields.hidden.value
+    };
+}
+function spreadsheetFormatCellsPatch(source, draft, touched) {
+    const patch = {};
+    if (shouldEmit(source.fields.numberFormat, draft.numberFormat, touched.numberFormat)) patch.numberFormat = draft.numberFormat.trim();
+    if (shouldEmit(source.fields.horizontalAlignment, draft.horizontalAlignment, touched.horizontalAlignment)) patch.horizontalAlignment = draft.horizontalAlignment;
+    if (shouldEmit(source.fields.verticalAlignment, draft.verticalAlignment, touched.verticalAlignment)) patch.verticalAlignment = draft.verticalAlignment;
+    if (shouldEmit(source.fields.wrapText, draft.wrapText, touched.wrapText)) patch.wrapText = draft.wrapText;
+    if (shouldEmit(source.fields.rotation, draft.rotation, touched.rotation)) patch.rotation = draft.rotation;
+    if (shouldEmit(source.fields.fontFamily, draft.fontFamily, touched.fontFamily)) patch.fontFamily = draft.fontFamily.trim();
+    if (shouldEmit(source.fields.fontSize, draft.fontSize, touched.fontSize)) patch.fontSize = draft.fontSize;
+    if (shouldEmit(source.fields.fontColor, draft.fontColor, touched.fontColor)) patch.fontColor = draft.fontColor;
+    if (shouldEmit(source.fields.bold, draft.bold, touched.bold)) patch.bold = draft.bold;
+    if (shouldEmit(source.fields.italic, draft.italic, touched.italic)) patch.italic = draft.italic;
+    if (shouldEmit(source.fields.underline, draft.underline, touched.underline)) patch.underline = draft.underline;
+    if (shouldEmit(source.fields.strike, draft.strike, touched.strike)) patch.strike = draft.strike;
+    const fill = spreadsheetFormatCellsActiveFill(draft);
+    if (shouldEmit(source.fields.fill, fill, touched.fill)) patch.fill = fill;
+    if (shouldEmit(source.fields.borders, draft.borders, touched.borders)) patch.borders = draft.borders.map((format)=>({
+            ...format
+        }));
+    if (shouldEmit(source.fields.locked, draft.locked, touched.locked)) patch.locked = draft.locked;
+    if (shouldEmit(source.fields.hidden, draft.hidden, touched.hidden)) patch.hidden = draft.hidden;
+    return patch;
+}
+function spreadsheetFormatCellsDraftErrors(draft) {
+    const errors = {};
+    if (draft.numberFormat.trim()) {
+        if (draft.numberFormat.trim().length > 255) errors.numberFormat = '数字格式代码不能超过 255 个字符。';
+    } else errors.numberFormat = '请输入数字格式代码。';
+    if (!Number.isFinite(draft.fontSize) || draft.fontSize < 1 || draft.fontSize > 409) errors.fontSize = '字号需为 1–409 之间的数字。';
+    if (!Number.isInteger(draft.rotation) || draft.rotation < -90 || draft.rotation > 90) errors.rotation = '文字旋转角度需为 -90–90 之间的整数。';
+    if (!normalizeSpreadsheetCellFillFormat(spreadsheetFormatCellsActiveFill(draft))) errors.fill = '请检查填充设置。渐变色标需按位置从小到大排列，位置和路径边界需保持在 0%–100%。';
+    return errors;
+}
+function spreadsheetFormatCellsActiveFill(draft) {
+    if ('none' === draft.fill.mode) return {
+        kind: 'none'
+    };
+    if ('solid' === draft.fill.mode) return {
+        color: draft.fill.solidColor,
+        kind: 'solid'
+    };
+    if ('pattern' === draft.fill.mode) return {
+        kind: 'pattern',
+        value: draft.fill.pattern
+    };
+    return {
+        kind: 'gradient',
+        value: draft.fill.gradient
+    };
+}
+function shouldEmit(source, value, touched) {
+    return Boolean(touched && (source.mixed || !sameDialogValue(source.value, value)));
+}
+function createSpreadsheetFormatCellsFillDraft(source) {
+    const fill = normalizeSpreadsheetCellFillFormat(source) ?? {
+        kind: 'none'
+    };
+    const solidColor = spreadsheetFillFallbackColor(fill);
+    return {
+        gradient: 'gradient' === fill.kind ? fill.value : {
+            degree: 0,
+            stops: [
+                {
+                    color: solidColor,
+                    position: 0
+                },
+                {
+                    color: '#ffffff' === solidColor ? '#4472c4' : '#ffffff',
+                    position: 1
+                }
+            ],
+            type: 'linear'
+        },
+        mode: fill.kind,
+        pattern: 'pattern' === fill.kind ? fill.value : {
+            backgroundColor: solidColor,
+            foregroundColor: '#ffffff' === solidColor ? '#4472c4' : '#ffffff',
+            patternType: 'lightGrid'
+        },
+        solidColor
+    };
+}
+function spreadsheetFillFallbackColor(fill) {
+    if ('solid' === fill.kind) return fill.color;
+    if ('pattern' === fill.kind) return fill.value.backgroundColor;
+    if ('gradient' === fill.kind) return fill.value.stops[0]?.color ?? '#ffffff';
+    return '#ffffff';
+}
+function spreadsheet_format_cells_dialog_model_horizontalAlignment(value) {
+    if ('0' === String(value)) return 'center';
+    if ('1' === String(value)) return 'left';
+    if ('2' === String(value)) return 'right';
+    return 'general';
+}
+function verticalAlignment(value) {
+    if (0 === Number(value)) return 'middle';
+    if (2 === Number(value)) return 'bottom';
+    return 'top';
+}
+function borderFormatsAt(sheet, row, column) {
+    const resolved = spreadsheetCellBordersAt(sheet, row, column);
+    return [
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'diagonalDown',
+        'diagonalUp'
+    ].flatMap((target)=>{
+        const line = resolved[target];
+        if (!line) return [];
+        return [
+            {
+                target,
+                color: normalizedColor(line.color, '#172033') ?? '#172033',
+                style: borderStyle(line.style)
+            }
+        ];
+    });
+}
+function borderStyle(value) {
+    return ({
+        1: 'thin',
+        3: 'dotted',
+        4: 'dashed',
+        5: 'dash-dot',
+        6: 'dash-dot-dot',
+        8: 'medium',
+        9: 'medium-dashed',
+        10: 'medium-dash-dot',
+        11: 'medium-dash-dot-dot',
+        13: 'thick'
+    })[value] ?? 'thin';
+}
+function normalizedColor(value, fallback) {
+    if ('string' != typeof value) return fallback;
+    const color = value.trim().toLowerCase();
+    if (/^#[0-9a-f]{6}$/.test(color)) return color;
+    if (/^#[0-9a-f]{3}$/.test(color)) return `#${[
+        ...color.slice(1)
+    ].map((character)=>character.repeat(2)).join('')}`;
+    return fallback;
+}
+function sameDialogValue(left, right) {
+    if (Object.is(left, right)) return true;
+    return JSON.stringify(left) === JSON.stringify(right);
+}
+function clampIndex(value, minimum, maximum) {
+    return Math.min(maximum, Math.max(minimum, Math.trunc(value)));
+}
+function SpreadsheetFormatCellsFillPreview({ fill, patternLabels }) {
+    const canvasRef = useRef(null);
+    useEffect(()=>{
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const render = ()=>renderSpreadsheetFillPreview(canvas, fill);
+        render();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(render);
+        observer.observe(canvas);
+        return ()=>observer.disconnect();
+    }, [
+        fill
+    ]);
+    return /*#__PURE__*/ jsxs("figure", {
+        className: `work-spreadsheet-format-cells-fill-preview ${fill.kind}`,
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                ref: canvasRef,
+                role: "img",
+                "aria-label": spreadsheetFillPreviewLabel(fill, patternLabels)
+            }),
+            /*#__PURE__*/ jsx("figcaption", {
+                children: spreadsheetFillPreviewCaption(fill, patternLabels)
+            })
+        ]
+    });
+}
+function renderSpreadsheetFillPreview(canvas, fill) {
+    let context = null;
+    try {
+        context = canvas.getContext('2d');
+    } catch  {
+        return;
+    }
+    if (!context) return;
+    const bounds = canvas.getBoundingClientRect();
+    const width = Math.max(1, Math.round(bounds.width || 220));
+    const height = Math.max(1, Math.round(bounds.height || 132));
+    const scale = Math.min(2, Math.max(1, window.devicePixelRatio || 1));
+    const pixelWidth = Math.round(width * scale);
+    const pixelHeight = Math.round(height * scale);
+    if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
+    if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
+    context.setTransform(scale, 0, 0, scale, 0, 0);
+    context.clearRect(0, 0, width, height);
+    if ('none' === fill.kind) return;
+    if ('solid' === fill.kind) {
+        context.fillStyle = fill.color;
+        context.fillRect(0, 0, width, height);
+        return;
+    }
+    if ('pattern' === fill.kind) {
+        context.fillStyle = fill.value.backgroundColor;
+        context.fillRect(0, 0, width, height);
+        drawSpreadsheetPatternFillOverlay(context, {
+            endX: width,
+            endY: height,
+            startX: 0,
+            startY: 0
+        }, fill.value);
+        return;
+    }
+    drawSpreadsheetGradientFill(context, {
+        endX: width,
+        endY: height,
+        startX: 0,
+        startY: 0
+    }, fill.value);
+}
+function spreadsheetFillPreviewLabel(fill, patternLabels) {
+    if ('none' === fill.kind) return '无填充预览';
+    if ('solid' === fill.kind) return `纯色填充预览 ${fill.color}`;
+    if ('pattern' === fill.kind) return `图案填充预览 ${patternLabels[fill.value.patternType]}`;
+    return `${'linear' === fill.value.type ? '线性' : '路径'}渐变填充预览，共 ${fill.value.stops.length} 个色标`;
+}
+function spreadsheetFillPreviewCaption(fill, patternLabels) {
+    if ('none' === fill.kind) return '无填充';
+    if ('solid' === fill.kind) return fill.color.toUpperCase();
+    if ('pattern' === fill.kind) return patternLabels[fill.value.patternType];
+    return 'linear' === fill.value.type ? `线性 · ${formatNumber(fill.value.degree)}° · ${fill.value.stops.length} 个色标` : `路径 · ${fill.value.stops.length} 个色标`;
+}
+function formatNumber(value) {
+    return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(4)));
+}
+const fillModeItems = [
+    {
+        id: 'none',
+        label: '无填充'
+    },
+    {
+        id: 'solid',
+        label: '纯色'
+    },
+    {
+        id: 'pattern',
+        label: '图案'
+    },
+    {
+        id: 'gradient',
+        label: '渐变'
+    }
+];
+const gradientTypeOptions = [
+    {
+        value: 'linear',
+        label: '线性'
+    },
+    {
+        value: 'path',
+        label: '路径'
+    }
+];
+const spreadsheet_format_cells_fill_panel_patternLabels = {
+    darkDown: '深色下斜线',
+    darkGray: '深灰',
+    darkGrid: '深色网格',
+    darkHorizontal: '深色横线',
+    darkTrellis: '深色菱形网格',
+    darkUp: '深色上斜线',
+    darkVertical: '深色竖线',
+    gray0625: '6.25% 灰度',
+    gray125: '12.5% 灰度',
+    lightDown: '浅色下斜线',
+    lightGray: '浅灰',
+    lightGrid: '浅色网格',
+    lightHorizontal: '浅色横线',
+    lightTrellis: '浅色菱形网格',
+    lightUp: '浅色上斜线',
+    lightVertical: '浅色竖线',
+    mediumGray: '中灰'
+};
+const patternOptions = xlsxPatternFillTypes.map((value)=>({
+        label: spreadsheet_format_cells_fill_panel_patternLabels[value],
+        value
+    }));
+function SpreadsheetFormatCellsFillPanel({ source, draft, errors, touched, setDraft, touch }) {
+    const updateFill = (update)=>{
+        touch('fill');
+        setDraft((current)=>({
+                ...current,
+                fill: update(current.fill)
+            }));
+    };
+    const activeFill = spreadsheetFormatCellsActiveFill(draft);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "work-spreadsheet-format-cells-fill",
+        children: [
+            /*#__PURE__*/ jsx(SegmentedControl, {
+                ariaLabel: "填充类型",
+                className: "work-spreadsheet-format-cells-fill-modes",
+                value: draft.fill.mode,
+                items: fillModeItems,
+                layout: "equal",
+                size: "compact",
+                onChange: (mode)=>updateFill((current)=>({
+                            ...current,
+                            mode
+                        }))
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "work-spreadsheet-format-cells-fill-layout",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "work-spreadsheet-format-cells-fill-controls",
+                        children: [
+                            'none' === draft.fill.mode && /*#__PURE__*/ jsx("p", {
+                                className: "work-spreadsheet-format-cells-fill-empty-copy",
+                                children: "应用后会移除选区中的纯色、图案和渐变填充。"
+                            }),
+                            'solid' === draft.fill.mode && /*#__PURE__*/ jsx(FillField, {
+                                label: "背景色",
+                                children: /*#__PURE__*/ jsx(OfficeColorPicker, {
+                                    ariaLabel: "单元格填充颜色",
+                                    value: draft.fill.solidColor,
+                                    onValueChange: (solidColor)=>updateFill((current)=>({
+                                                ...current,
+                                                solidColor
+                                            }))
+                                })
+                            }),
+                            'pattern' === draft.fill.mode && /*#__PURE__*/ jsx(PatternFillControls, {
+                                fill: draft.fill.pattern,
+                                onChange: (pattern)=>updateFill((current)=>({
+                                            ...current,
+                                            pattern
+                                        }))
+                            }),
+                            'gradient' === draft.fill.mode && /*#__PURE__*/ jsx(GradientFillControls, {
+                                fill: draft.fill.gradient,
+                                onChange: (gradient)=>updateFill((current)=>({
+                                            ...current,
+                                            gradient
+                                        }))
+                            }),
+                            errors.fill && /*#__PURE__*/ jsx("p", {
+                                role: "alert",
+                                children: errors.fill
+                            }),
+                            source.fields.fill.mixed && !touched.fill && /*#__PURE__*/ jsx("p", {
+                                className: "work-spreadsheet-format-cells-mixed",
+                                children: "选区包含多种填充；只有选择新的填充类型或参数后才会统一应用。"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(SpreadsheetFormatCellsFillPreview, {
+                        fill: activeFill,
+                        patternLabels: spreadsheet_format_cells_fill_panel_patternLabels
+                    })
+                ]
+            })
+        ]
+    });
+}
+function PatternFillControls({ fill, onChange }) {
+    const updateColor = (field, color)=>{
+        const next = {
+            ...fill,
+            [field]: color
+        };
+        if ('backgroundColor' === field) delete next.backgroundColorOrigin;
+        else delete next.foregroundColorOrigin;
+        onChange(next);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "work-spreadsheet-format-cells-pattern-controls",
+        children: [
+            /*#__PURE__*/ jsx(FillField, {
+                label: "图案样式",
+                children: /*#__PURE__*/ jsx(OfficeSelect, {
+                    ariaLabel: "填充图案样式",
+                    value: fill.patternType,
+                    options: patternOptions,
+                    onValueChange: (patternType)=>onChange({
+                            ...fill,
+                            patternType
+                        })
+                })
+            }),
+            /*#__PURE__*/ jsx(FillField, {
+                label: "图案颜色",
+                children: /*#__PURE__*/ jsx(OfficeColorPicker, {
+                    ariaLabel: "填充图案颜色",
+                    value: fill.foregroundColor,
+                    onValueChange: (color)=>updateColor('foregroundColor', color)
+                })
+            }),
+            /*#__PURE__*/ jsx(FillField, {
+                label: "背景色",
+                children: /*#__PURE__*/ jsx(OfficeColorPicker, {
+                    ariaLabel: "填充图案背景色",
+                    value: fill.backgroundColor,
+                    onValueChange: (color)=>updateColor('backgroundColor', color)
+                })
+            })
+        ]
+    });
+}
+function GradientFillControls({ fill, onChange }) {
+    const changeType = (type)=>{
+        if (type === fill.type) return;
+        const stops = fill.stops.map((stop)=>({
+                ...stop
+            }));
+        onChange('linear' === type ? {
+            degree: 0,
+            stops,
+            type
+        } : {
+            bottom: 0.75,
+            left: 0.25,
+            right: 0.75,
+            stops,
+            top: 0.25,
+            type
+        });
+    };
+    const changeStops = (stops)=>onChange({
+            ...fill,
+            stops
+        });
+    const updateStop = (index, update)=>changeStops(fill.stops.map((stop, stopIndex)=>stopIndex === index ? update(stop) : stop));
+    return /*#__PURE__*/ jsxs("div", {
+        className: "work-spreadsheet-format-cells-gradient-controls",
+        "data-gradient-type": fill.type,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "work-spreadsheet-format-cells-gradient-geometry",
+                children: [
+                    /*#__PURE__*/ jsx(FillField, {
+                        label: "渐变类型",
+                        children: /*#__PURE__*/ jsx(OfficeSelect, {
+                            ariaLabel: "渐变类型",
+                            value: fill.type,
+                            options: gradientTypeOptions,
+                            onValueChange: changeType
+                        })
+                    }),
+                    'linear' === fill.type ? /*#__PURE__*/ jsx(PercentField, {
+                        label: "角度（\xb0）",
+                        ariaLabel: "线性渐变角度",
+                        value: fill.degree,
+                        step: 1,
+                        onChange: (degree)=>onChange({
+                                ...fill,
+                                degree
+                            })
+                    }) : /*#__PURE__*/ jsx(PathGeometryFields, {
+                        fill: fill,
+                        onChange: onChange
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "work-spreadsheet-format-cells-gradient-stops-heading",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsx("strong", {
+                                children: "渐变色标"
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    fill.stops.length,
+                                    " / ",
+                                    256
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(button_Button, {
+                        size: "compact",
+                        tone: "quiet",
+                        disabled: fill.stops.length >= 256,
+                        onClick: ()=>changeStops(addGradientStop(fill.stops)),
+                        children: [
+                            /*#__PURE__*/ jsx(Plus, {
+                                size: 13,
+                                "aria-hidden": "true"
+                            }),
+                            "添加色标"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("ol", {
+                className: "work-spreadsheet-format-cells-gradient-stops",
+                "aria-label": "渐变色标列表",
+                "data-stop-count": fill.stops.length,
+                children: fill.stops.map((stop, index)=>/*#__PURE__*/ jsxs("li", {
+                        className: "work-spreadsheet-format-cells-gradient-stop",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "work-spreadsheet-format-cells-gradient-stop-index",
+                                children: index + 1
+                            }),
+                            /*#__PURE__*/ jsx(OfficeColorPicker, {
+                                ariaLabel: `色标 ${index + 1} 颜色`,
+                                value: stop.color,
+                                onValueChange: (color)=>updateStop(index, (current)=>{
+                                        const next = {
+                                            ...current,
+                                            color
+                                        };
+                                        delete next.colorOrigin;
+                                        return next;
+                                    })
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "work-spreadsheet-format-cells-stop-position",
+                                children: [
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "sr-only",
+                                        children: [
+                                            "色标 ",
+                                            index + 1,
+                                            " 位置"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(OfficeNumberField, {
+                                        ariaLabel: `色标 ${index + 1} 位置`,
+                                        value: formatPercentage(stop.position),
+                                        min: 0,
+                                        max: 100,
+                                        step: 1,
+                                        validationInvalid: stop.position < 0 || stop.position > 1 || index > 0 && (fill.stops[index - 1]?.position ?? 0) > stop.position,
+                                        onValueChange: (value)=>{
+                                            const percentage = Number(value);
+                                            if (!Number.isFinite(percentage)) return;
+                                            updateStop(index, (current)=>({
+                                                    ...current,
+                                                    position: percentage / 100
+                                                }));
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        "aria-hidden": "true",
+                                        children: "%"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(icon_button_IconButton, {
+                                className: "work-spreadsheet-format-cells-gradient-stop-remove",
+                                label: `删除色标 ${index + 1}`,
+                                disabled: fill.stops.length <= 2,
+                                onClick: ()=>changeStops(fill.stops.filter((_, stopIndex)=>stopIndex !== index)),
+                                children: /*#__PURE__*/ jsx(Trash2, {
+                                    size: 13
+                                })
+                            })
+                        ]
+                    }, index))
+            }),
+            /*#__PURE__*/ jsx("small", {
+                className: "work-spreadsheet-format-cells-gradient-help",
+                children: "色标按列表顺序写入 XLSX；位置需从小到大排列。编辑颜色后会改用显式 RGB，未修改的主题色语义会继续保留。"
+            })
+        ]
+    });
+}
+function PathGeometryFields({ fill, onChange }) {
+    const fields = [
+        [
+            'left',
+            '左边界'
+        ],
+        [
+            'right',
+            '右边界'
+        ],
+        [
+            'top',
+            '上边界'
+        ],
+        [
+            'bottom',
+            '下边界'
+        ]
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        className: "work-spreadsheet-format-cells-path-geometry",
+        children: fields.map(([field, label])=>/*#__PURE__*/ jsx(PercentField, {
+                label: `${label}（%）`,
+                ariaLabel: `路径渐变${label}`,
+                value: 100 * fill[field],
+                min: 0,
+                max: 100,
+                step: 1,
+                invalid: 'left' === field && fill.left > fill.right || 'right' === field && fill.right < fill.left || 'top' === field && fill.top > fill.bottom || 'bottom' === field && fill.bottom < fill.top,
+                onChange: (value)=>onChange({
+                        ...fill,
+                        [field]: value / 100
+                    })
+            }, field))
+    });
+}
+function PercentField({ label, ariaLabel, value, min, max, step, invalid = false, onChange }) {
+    return /*#__PURE__*/ jsx(FillField, {
+        label: label,
+        children: /*#__PURE__*/ jsx(OfficeNumberField, {
+            ariaLabel: ariaLabel,
+            value: spreadsheet_format_cells_fill_panel_formatNumber(value),
+            min: min,
+            max: max,
+            step: step,
+            validationInvalid: invalid,
+            onValueChange: (rawValue)=>{
+                const next = Number(rawValue);
+                if (Number.isFinite(next)) onChange(next);
+            }
+        })
+    });
+}
+function FillField({ label, children }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "work-spreadsheet-format-cells-field",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            }),
+            children
+        ]
+    });
+}
+function addGradientStop(source) {
+    if (source.length >= 256) return [
+        ...source
+    ];
+    let insertAfter = 0;
+    let largestGap = -1 / 0;
+    for(let index = 0; index < source.length - 1; index += 1){
+        const left = source[index];
+        const right = source[index + 1];
+        if (!left || !right) continue;
+        const gap = right.position - left.position;
+        if (gap > largestGap) {
+            insertAfter = index;
+            largestGap = gap;
+        }
+    }
+    const left = source[insertAfter] ?? {
+        color: '#4472c4',
+        position: 0
+    };
+    const right = source[insertAfter + 1] ?? {
+        color: '#ffffff',
+        position: 1
+    };
+    const stop = {
+        color: interpolateHexColor(left.color, right.color),
+        position: (left.position + right.position) / 2
+    };
+    return [
+        ...source.slice(0, insertAfter + 1).map((item)=>({
+                ...item
+            })),
+        stop,
+        ...source.slice(insertAfter + 1).map((item)=>({
+                ...item
+            }))
+    ];
+}
+function interpolateHexColor(left, right) {
+    const channels = [
+        1,
+        3,
+        5
+    ].map((offset)=>Math.round((Number.parseInt(left.slice(offset, offset + 2), 16) + Number.parseInt(right.slice(offset, offset + 2), 16)) / 2));
+    return `#${channels.map((channel)=>channel.toString(16).padStart(2, '0')).join('')}`;
+}
+function formatPercentage(value) {
+    return spreadsheet_format_cells_fill_panel_formatNumber(100 * value);
+}
+function spreadsheet_format_cells_fill_panel_formatNumber(value) {
+    return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(4)));
+}
+const MIXED_VALUE = '__mixed__';
+const numberFormatOptions = [
+    'general',
+    'number',
+    'currency',
+    'accounting',
+    'percent',
+    'date',
+    'time',
+    'scientific',
+    'fraction',
+    'text',
+    'custom'
+].map((value)=>({
+        value: value,
+        label: spreadsheetNumberFormatPresetLabels[value]
+    }));
+const horizontalOptions = [
+    {
+        value: 'general',
+        label: '常规'
+    },
+    {
+        value: 'left',
+        label: '左对齐'
+    },
+    {
+        value: 'center',
+        label: '居中'
+    },
+    {
+        value: 'right',
+        label: '右对齐'
+    }
+];
+const verticalOptions = [
+    {
+        value: 'top',
+        label: '顶端对齐'
+    },
+    {
+        value: 'middle',
+        label: '垂直居中'
+    },
+    {
+        value: 'bottom',
+        label: '底端对齐'
+    }
+];
+const spreadsheet_format_cells_dialog_panels_underlineOptions = [
+    {
+        value: 'none',
+        label: '无'
+    },
+    {
+        value: 'single',
+        label: '单下划线'
+    },
+    {
+        value: 'double',
+        label: '双下划线'
+    },
+    {
+        value: 'singleAccounting',
+        label: '单会计用下划线'
+    },
+    {
+        value: 'doubleAccounting',
+        label: '双会计用下划线'
+    }
+];
+const borderStyleOptions = [
+    {
+        value: 'thin',
+        label: '细实线'
+    },
+    {
+        value: 'dotted',
+        label: '点线'
+    },
+    {
+        value: 'dashed',
+        label: '虚线'
+    },
+    {
+        value: 'dash-dot',
+        label: '点划线'
+    },
+    {
+        value: 'medium',
+        label: '中等实线'
+    },
+    {
+        value: 'medium-dashed',
+        label: '中等虚线'
+    },
+    {
+        value: 'thick',
+        label: '粗实线'
+    }
+];
+const borderTargets = [
+    {
+        target: 'top',
+        label: '上框线'
+    },
+    {
+        target: 'bottom',
+        label: '下框线'
+    },
+    {
+        target: 'left',
+        label: '左框线'
+    },
+    {
+        target: 'right',
+        label: '右框线'
+    },
+    {
+        target: 'diagonalDown',
+        label: '斜下框线'
+    },
+    {
+        target: 'diagonalUp',
+        label: '斜上框线'
+    }
+];
+function SpreadsheetFormatCellsPanel(props) {
+    return /*#__PURE__*/ jsxs("section", {
+        id: `${props.idBase}-${props.activeTab}-panel`,
+        className: "work-spreadsheet-format-cells-panel",
+        role: "tabpanel",
+        "aria-labelledby": `${props.idBase}-${props.activeTab}-tab`,
+        tabIndex: -1,
+        children: [
+            'number' === props.activeTab && /*#__PURE__*/ jsx(NumberPanel, {
+                ...props
+            }),
+            'alignment' === props.activeTab && /*#__PURE__*/ jsx(AlignmentPanel, {
+                ...props
             }),
             'font' === props.activeTab && /*#__PURE__*/ jsx(FontPanel, {
                 ...props
@@ -14110,7 +15261,7 @@ function SpreadsheetFormatCellsPanel(props) {
             'border' === props.activeTab && /*#__PURE__*/ jsx(BorderPanel, {
                 ...props
             }),
-            'fill' === props.activeTab && /*#__PURE__*/ jsx(FillPanel, {
+            'fill' === props.activeTab && /*#__PURE__*/ jsx(SpreadsheetFormatCellsFillPanel, {
                 ...props
             }),
             'protection' === props.activeTab && /*#__PURE__*/ jsx(ProtectionPanel, {
@@ -14558,47 +15709,6 @@ function BorderPreview({ draft }) {
         ]
     });
 }
-function FillPanel({ source, draft, touched, setDraft, touch }) {
-    return /*#__PURE__*/ jsxs("div", {
-        className: "work-spreadsheet-format-cells-fill",
-        children: [
-            /*#__PURE__*/ jsx(Field, {
-                label: "背景色",
-                children: /*#__PURE__*/ jsx(OfficeColorPicker, {
-                    ariaLabel: "单元格填充颜色",
-                    value: draft.fillColor ?? '#ffffff',
-                    onValueChange: (fillColor)=>{
-                        touch('fillColor');
-                        setDraft((current)=>({
-                                ...current,
-                                fillColor
-                            }));
-                    }
-                })
-            }),
-            /*#__PURE__*/ jsx(button_Button, {
-                size: "compact",
-                tone: "quiet",
-                onClick: ()=>{
-                    touch('fillColor');
-                    setDraft((current)=>({
-                            ...current,
-                            fillColor: null
-                        }));
-                },
-                children: "无填充"
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: `work-spreadsheet-format-cells-fill-preview${draft.fillColor ? '' : ' empty'}`,
-                style: {
-                    backgroundColor: draft.fillColor ?? void 0
-                },
-                children: draft.fillColor ? draft.fillColor.toUpperCase() : '无填充'
-            }),
-            source.fields.fillColor.mixed && !touched.fillColor && /*#__PURE__*/ jsx(MixedHint, {})
-        ]
-    });
-}
 function ProtectionPanel({ source, draft, touched, setDraft, touch }) {
     return /*#__PURE__*/ jsxs("div", {
         className: "work-spreadsheet-format-cells-protection",
@@ -14667,177 +15777,6 @@ function borderCss(format) {
     const style = 'dotted' === format.style ? 'dotted' : format.style.includes('dash') ? 'dashed' : 'solid';
     return `${width}px ${style} ${format.color}`;
 }
-function createSpreadsheetFormatCellsDialogSource(content, sheetId, rangeInput, cells, requestedActiveCell) {
-    const range = spreadsheet_cell_range_normalizeSpreadsheetCellRange(rangeInput);
-    const sheet = content.sheets.find((candidate)=>candidate.id === sheetId);
-    if (!range || !sheet || spreadsheet_cell_range_spreadsheetCellRangeArea(range) > 10000) return null;
-    const activeRow = clampIndex(requestedActiveCell.row, range.row[0], range.row[1]);
-    const activeColumn = clampIndex(requestedActiveCell.column, range.column[0], range.column[1]);
-    const activeCell = cells[activeRow - range.row[0]]?.[activeColumn - range.column[0]] ?? null;
-    const values = (resolve)=>{
-        const activeValue = resolve(activeCell, activeRow, activeColumn);
-        let mixed = false;
-        for(let row = range.row[0]; row <= range.row[1] && !mixed; row += 1)for(let column = range.column[0]; column <= range.column[1]; column += 1){
-            const cell = cells[row - range.row[0]]?.[column - range.column[0]] ?? null;
-            if (!sameDialogValue(resolve(cell, row, column), activeValue)) {
-                mixed = true;
-                break;
-            }
-        }
-        return {
-            value: activeValue,
-            mixed
-        };
-    };
-    const borders = borderFormatsAt(sheet, activeRow, activeColumn);
-    return {
-        sheetId,
-        range,
-        activeCell,
-        fields: {
-            numberFormat: values((cell)=>cell?.ct?.fa?.trim() || 'General'),
-            horizontalAlignment: values((cell)=>spreadsheet_format_cells_dialog_model_horizontalAlignment(cell?.ht)),
-            verticalAlignment: values((cell)=>verticalAlignment(cell?.vt)),
-            wrapText: values((cell)=>'2' === String(cell?.tb)),
-            rotation: values((cell)=>spreadsheetVisibleTextRotationFromCell(cell)),
-            fontFamily: values((cell)=>'string' == typeof cell?.ff && cell.ff.trim() ? cell.ff.trim() : 'Aptos'),
-            fontSize: values((cell)=>'number' == typeof cell?.fs && Number.isFinite(cell.fs) ? cell.fs : 10),
-            fontColor: values((cell)=>normalizedColor(cell?.fc, '#172033')),
-            bold: values((cell)=>1 === Number(cell?.bl)),
-            italic: values((cell)=>1 === Number(cell?.it)),
-            underline: values((cell)=>spreadsheetUnderlineStyle(cell?.un)),
-            strike: values((cell)=>1 === Number(cell?.cl)),
-            fillColor: values((cell)=>'string' == typeof cell?.bg && cell.bg.trim() ? normalizedColor(cell.bg, null) : null),
-            borders: {
-                value: borders,
-                mixed: spreadsheet_cell_range_spreadsheetCellRangeArea(range) > 1
-            },
-            locked: values((cell, row, column)=>spreadsheetCellProtectionAt(sheet, row, column, cell).locked),
-            hidden: values((cell, row, column)=>spreadsheetCellProtectionAt(sheet, row, column, cell).hidden)
-        }
-    };
-}
-function createSpreadsheetFormatCellsDraft(source) {
-    const borders = source.fields.borders.value.map((format)=>({
-            ...format
-        }));
-    return {
-        numberFormat: source.fields.numberFormat.value,
-        horizontalAlignment: source.fields.horizontalAlignment.value,
-        verticalAlignment: source.fields.verticalAlignment.value,
-        wrapText: source.fields.wrapText.value,
-        rotation: source.fields.rotation.value,
-        fontFamily: source.fields.fontFamily.value,
-        fontSize: source.fields.fontSize.value,
-        fontColor: source.fields.fontColor.value,
-        bold: source.fields.bold.value,
-        italic: source.fields.italic.value,
-        underline: source.fields.underline.value,
-        strike: source.fields.strike.value,
-        fillColor: source.fields.fillColor.value,
-        borders,
-        borderColor: borders[0]?.color ?? '#172033',
-        borderStyle: borders[0]?.style ?? 'thin',
-        locked: source.fields.locked.value,
-        hidden: source.fields.hidden.value
-    };
-}
-function spreadsheetFormatCellsPatch(source, draft, touched) {
-    const patch = {};
-    if (shouldEmit(source.fields.numberFormat, draft.numberFormat, touched.numberFormat)) patch.numberFormat = draft.numberFormat.trim();
-    if (shouldEmit(source.fields.horizontalAlignment, draft.horizontalAlignment, touched.horizontalAlignment)) patch.horizontalAlignment = draft.horizontalAlignment;
-    if (shouldEmit(source.fields.verticalAlignment, draft.verticalAlignment, touched.verticalAlignment)) patch.verticalAlignment = draft.verticalAlignment;
-    if (shouldEmit(source.fields.wrapText, draft.wrapText, touched.wrapText)) patch.wrapText = draft.wrapText;
-    if (shouldEmit(source.fields.rotation, draft.rotation, touched.rotation)) patch.rotation = draft.rotation;
-    if (shouldEmit(source.fields.fontFamily, draft.fontFamily, touched.fontFamily)) patch.fontFamily = draft.fontFamily.trim();
-    if (shouldEmit(source.fields.fontSize, draft.fontSize, touched.fontSize)) patch.fontSize = draft.fontSize;
-    if (shouldEmit(source.fields.fontColor, draft.fontColor, touched.fontColor)) patch.fontColor = draft.fontColor;
-    if (shouldEmit(source.fields.bold, draft.bold, touched.bold)) patch.bold = draft.bold;
-    if (shouldEmit(source.fields.italic, draft.italic, touched.italic)) patch.italic = draft.italic;
-    if (shouldEmit(source.fields.underline, draft.underline, touched.underline)) patch.underline = draft.underline;
-    if (shouldEmit(source.fields.strike, draft.strike, touched.strike)) patch.strike = draft.strike;
-    if (shouldEmit(source.fields.fillColor, draft.fillColor, touched.fillColor)) patch.fillColor = draft.fillColor;
-    if (shouldEmit(source.fields.borders, draft.borders, touched.borders)) patch.borders = draft.borders.map((format)=>({
-            ...format
-        }));
-    if (shouldEmit(source.fields.locked, draft.locked, touched.locked)) patch.locked = draft.locked;
-    if (shouldEmit(source.fields.hidden, draft.hidden, touched.hidden)) patch.hidden = draft.hidden;
-    return patch;
-}
-function spreadsheetFormatCellsDraftErrors(draft) {
-    const errors = {};
-    if (draft.numberFormat.trim()) {
-        if (draft.numberFormat.trim().length > 255) errors.numberFormat = '数字格式代码不能超过 255 个字符。';
-    } else errors.numberFormat = '请输入数字格式代码。';
-    if (!Number.isFinite(draft.fontSize) || draft.fontSize < 1 || draft.fontSize > 409) errors.fontSize = '字号需为 1–409 之间的数字。';
-    if (!Number.isInteger(draft.rotation) || draft.rotation < -90 || draft.rotation > 90) errors.rotation = '文字旋转角度需为 -90–90 之间的整数。';
-    return errors;
-}
-function shouldEmit(source, value, touched) {
-    return Boolean(touched && (source.mixed || !sameDialogValue(source.value, value)));
-}
-function spreadsheet_format_cells_dialog_model_horizontalAlignment(value) {
-    if ('0' === String(value)) return 'center';
-    if ('1' === String(value)) return 'left';
-    if ('2' === String(value)) return 'right';
-    return 'general';
-}
-function verticalAlignment(value) {
-    if (0 === Number(value)) return 'middle';
-    if (2 === Number(value)) return 'bottom';
-    return 'top';
-}
-function borderFormatsAt(sheet, row, column) {
-    const resolved = spreadsheetCellBordersAt(sheet, row, column);
-    return [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'diagonalDown',
-        'diagonalUp'
-    ].flatMap((target)=>{
-        const line = resolved[target];
-        if (!line) return [];
-        return [
-            {
-                target,
-                color: normalizedColor(line.color, '#172033') ?? '#172033',
-                style: borderStyle(line.style)
-            }
-        ];
-    });
-}
-function borderStyle(value) {
-    return ({
-        1: 'thin',
-        3: 'dotted',
-        4: 'dashed',
-        5: 'dash-dot',
-        6: 'dash-dot-dot',
-        8: 'medium',
-        9: 'medium-dashed',
-        10: 'medium-dash-dot',
-        11: 'medium-dash-dot-dot',
-        13: 'thick'
-    })[value] ?? 'thin';
-}
-function normalizedColor(value, fallback) {
-    if ('string' != typeof value) return fallback;
-    const color = value.trim().toLowerCase();
-    if (/^#[0-9a-f]{6}$/.test(color)) return color;
-    if (/^#[0-9a-f]{3}$/.test(color)) return `#${[
-        ...color.slice(1)
-    ].map((character)=>character.repeat(2)).join('')}`;
-    return fallback;
-}
-function sameDialogValue(left, right) {
-    if (Object.is(left, right)) return true;
-    return JSON.stringify(left) === JSON.stringify(right);
-}
-function clampIndex(value, minimum, maximum) {
-    return Math.min(maximum, Math.max(minimum, Math.trunc(value)));
-}
 function SpreadsheetFormatCellsDialog({ source, restoreFocusTarget, openIntent = defaultSpreadsheetFormatCellsOpenIntent, onApply, onClose }) {
     const [draft, setDraft] = useState(()=>createSpreadsheetFormatCellsDraft(source));
     const [touched, setTouched] = useState({});
@@ -16240,13 +17179,13 @@ function SheetMenuButton({ icon, label, danger = false, disabled = false, onClic
         ]
     });
 }
-const pendingContextRestores = new WeakMap();
+const spreadsheet_table_render_pendingContextRestores = new WeakMap();
 function beginSpreadsheetTableCellRender(_cell, tableStyle, conditionalStyle, context) {
     if (tableStyle) context.fillStyle = tableStyle.background;
     if (conditionalStyle?.cellColor) context.fillStyle = conditionalStyle.cellColor;
-    if (!tableStyle || pendingContextRestores.has(context) || 'function' != typeof context.fillText) return;
+    if (!tableStyle || spreadsheet_table_render_pendingContextRestores.has(context) || 'function' != typeof context.fillText) return;
     const fillText = context.fillText;
-    pendingContextRestores.set(context, {
+    spreadsheet_table_render_pendingContextRestores.set(context, {
         fillText,
         fillTextOwned: Object.hasOwn(context, 'fillText')
     });
@@ -16267,11 +17206,11 @@ function beginSpreadsheetTableCellRender(_cell, tableStyle, conditionalStyle, co
 }
 function finishSpreadsheetTableCellRender(_cell, cellInfo, tableStyle, context) {
     if (tableStyle) drawSpreadsheetTableCellBorder(cellInfo, tableStyle, context);
-    const restore = pendingContextRestores.get(context);
+    const restore = spreadsheet_table_render_pendingContextRestores.get(context);
     if (!restore) return;
     if (restore.fillTextOwned) context.fillText = restore.fillText;
     else delete context.fillText;
-    pendingContextRestores.delete(context);
+    spreadsheet_table_render_pendingContextRestores.delete(context);
 }
 function boldSpreadsheetTableCanvasFont(font) {
     return /(?:^|\s)(?:bold|[6-9]00)(?:\s|$)/i.test(font) ? font : `bold ${font}`;
@@ -21715,7 +22654,8 @@ const spreadsheetCellFormatKeys = [
     'cl',
     'un',
     'tr',
-    'rt'
+    'rt',
+    ...xlsxNativeFillCellKeys
 ];
 function pasteSpreadsheetSpecialCell({ source, destination, content, operation, rowOffset, columnOffset }) {
     let next;
@@ -21862,8 +22802,9 @@ function clearCellContent(cell) {
     }
 }
 function replaceCellFormatting(target, source) {
-    for (const key of spreadsheetCellFormatKeys)if (source?.[key] === void 0) delete target[key];
-    else target[key] = cloneValue(source[key]);
+    const sourceCell = source;
+    for (const key of spreadsheetCellFormatKeys)if (sourceCell?.[key] === void 0) delete target[key];
+    else target[key] = cloneValue(sourceCell[key]);
     const inline = Array.isArray(target.ct?.s) ? structuredClone(target.ct.s) : void 0;
     const format = source?.ct ? structuredClone(source.ct) : void 0;
     if (format) delete format.s;
@@ -21913,7 +22854,8 @@ function spreadsheetLiteralCellValue(source) {
 }
 function spreadsheetCellHasFormatting(cell) {
     if (!cell) return false;
-    return Boolean(spreadsheetCellFormatKeys.some((key)=>void 0 !== cell[key]) || void 0 !== cell.lo || void 0 !== cell.hi || cell.ct?.fa !== void 0 || cell.ct?.t !== void 0);
+    const formattedCell = cell;
+    return Boolean(spreadsheetCellFormatKeys.some((key)=>void 0 !== formattedCell[key]) || void 0 !== cell.lo || void 0 !== cell.hi || cell.ct?.fa !== void 0 || cell.ct?.t !== void 0);
 }
 function spreadsheetPasteOperationValue(destination, source, operation) {
     if ('divide' === operation && 0 === source) return null;
@@ -23345,7 +24287,8 @@ const spreadsheetCellFormatAttributes = [
     'un',
     'tr',
     'ct',
-    'bg'
+    'bg',
+    ...xlsxNativeFillCellKeys
 ];
 function captureSpreadsheetFormatPattern(cells) {
     const rowCount = cells.length;
@@ -23410,7 +24353,8 @@ function spreadsheetFormatPainterBatches(pattern, target) {
 }
 function spreadsheetCellFormatSnapshot(cell) {
     const snapshot = {};
-    for (const attribute of spreadsheetCellFormatAttributes)snapshot[attribute] = 'ct' === attribute ? spreadsheetNumberFormatSnapshot(cell?.ct) : cloneSpreadsheetFormatValue(cell?.[attribute]);
+    const source = cell;
+    for (const attribute of spreadsheetCellFormatAttributes)snapshot[attribute] = 'ct' === attribute ? spreadsheetNumberFormatSnapshot(cell?.ct) : cloneSpreadsheetFormatValue(source?.[attribute]);
     return snapshot;
 }
 function spreadsheetNumberFormatSnapshot(value) {
@@ -24523,6 +25467,7 @@ function SpreadsheetEditorSurface({ autoFocus = true, content, collaborationHist
                 const tableStyle = tableStylesBySheetRef.current.get(activeSheetIdRef.current)?.(cellInfo.row, cellInfo.column) ?? null;
                 const style = conditionalStylesBySheetRef.current.get(activeSheetIdRef.current)?.get(`${cellInfo.row}_${cellInfo.column}`);
                 beginSpreadsheetTableCellRender(cell, tableStyle, style, context);
+                beginSpreadsheetNativeFillRender(tableStyle || style?.cellColor ? void 0 : activeXlsxNativeFill(cell), context);
                 return true;
             },
             afterRenderCell: (cell, cellInfo, context)=>{
@@ -24539,6 +25484,7 @@ function SpreadsheetEditorSurface({ autoFocus = true, content, collaborationHist
                         if (cell?.ps) drawSpreadsheetCommentMarker(context, cellInfo);
                     }
                 } finally{
+                    finishSpreadsheetNativeFillRender(context);
                     finishSpreadsheetTableCellRender(cell, cellInfo, tableStyle, context);
                     const diagonal = diagonalBordersBySheetRef.current.get(activeSheetIdRef.current)?.get(`${cellInfo.row}_${cellInfo.column}`);
                     if (diagonal?.down) drawSpreadsheetDiagonalDownBorder(context, cellInfo, diagonal.down);