ooxml-ui 1.25.0 → 1.26.0

package/dist/visio/viewer-chart-editor.d.ts

@@ -0,0 +1,38 @@
+import { type ChartSpace } from 'ooxml-core/chart';
+import { type OfficeUiChartDataSheet } from '../chart/data-sheet.js';
+import { type OfficeUiChartFormatPane } from '../chart/format-pane.js';
+import { type ChartObjectData, type ChartTarget, type RasterizeSvg } from './viewer-insert-chart.js';
+type Dialog = HTMLElement & {
+    open: boolean;
+    show(): void;
+    close(): void;
+};
+/** Which view the editor opens: the chart's data sheet or its Format pane. */
+export type ChartEditMode = 'data' | 'format';
+/**
+ * Edit Data and Format Chart for an embedded chart object (Insert > Chart): the shared
+ * `office-ui-chart-data-sheet` and `office-ui-chart-format-pane` over the chart part of the
+ * embedded workbook, read as a `ChartSpace`. Data edits go through the data sheet model
+ * (`applyChartSpaceDataSheetEdits`), formatting through `applyChartEditIntent`; a live preview
+ * draws the edited part. OK writes the workbook again (`writeEmbeddedChartSpace`: the cells and
+ * references follow a data edit), draws its metafile preview as the canvas will show it and hands
+ * both to `submit`, which replaces the object. Formatting the part does not model (effects, 3-D,
+ * text) is kept as it was.
+ */
+export declare class ChartObjectEditor {
+    #private;
+    readonly dialog: Dialog;
+    readonly sheet: OfficeUiChartDataSheet;
+    readonly pane: OfficeUiChartFormatPane;
+    readonly preview: HTMLElement;
+    readonly error: HTMLElement;
+    constructor(root: ShadowRoot, submit: (data: ChartObjectData, target: ChartTarget) => Promise<void>, rasterize?: RasterizeSvg);
+    /** The edited chart part, while the editor is open. */
+    get space(): ChartSpace | undefined;
+    /** The chart being edited while the editor is open, so a host can close it if the shape goes. */
+    get target(): ChartTarget | undefined;
+    /** Open `mode` for the chart object's workbook; false when the workbook holds no chart. */
+    open(mode: ChartEditMode, target: ChartTarget, workbook: Uint8Array): Promise<boolean>;
+    close(): void;
+}
+export {};

package/dist/visio/viewer-insert.d.ts

@@ -2,6 +2,7 @@ import type { ViewerController, ViewerState } from './controller.js';
 import type { VisioInsertItem } from './ribbon-action.js';
 import { InsertDialog } from './viewer-insert-dialog.js';
 import { InsertChartDialog } from './viewer-insert-chart.js';
+import { ChartObjectEditor, type ChartEditMode } from './viewer-chart-editor.js';
 type Run = (action: () => Promise<void>, success: string) => void;
 /**
  * Insert-tab Pictures, Link and ScreenTip, plus Ctrl+click link following. Pictures are read
@@ -17,11 +18,15 @@ export declare class ViewerInsert {
     readonly link: InsertDialog;
     readonly tip: InsertDialog;
     readonly chart: InsertChartDialog;
+    readonly chartEditor: ChartObjectEditor;
     constructor(root: ShadowRoot, controller: ViewerController, announce: (message: string) => void, run: Run);
     open(item: VisioInsertItem): void;
     close(): void;
-    /** Open the editor for the embedded chart `shapeId` on this page; false if it is not one. */
-    editChart(shapeId: string): boolean;
+    /**
+     * Open an editor for the embedded chart `shapeId` on this page: the chart dialog (type, title
+     * and data grid, as a double-click does), Edit Data or Format Chart. False if it is not one.
+     */
+    editChart(shapeId: string, mode?: 'chart' | ChartEditMode): boolean;
     /** Ctrl+click follows a shape's link like Visio; Shift keeps additive selection. */
     wire(viewport: HTMLElement): () => void;
     render(state: ViewerState): void;

package/dist/visio.js

@@ -1,21 +1,24 @@
 import { trackPointerPan, ownsCaptureLoss } from './chunk-GSXOZCAN.js';
-import { syncRibbonAddIns, createHostBackstagePages, syncHostMenuChildren, tidyMenuSeparators } from './chunk-S736N64L.js';
-export { RIBBON_ADD_IN_EVENT } from './chunk-S736N64L.js';
+import { syncRibbonAddIns, createHostBackstagePages, syncHostMenuChildren, tidyMenuSeparators } from './chunk-KSOHDEUI.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-KSOHDEUI.js';
 import { themeBridge, installOfficeUiThemeFor, prepareOfficeUiBlock } from './chunk-T5ARELU2.js';
-import { personalizeSection, unavailableCategory, userInterfaceSection, attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, attachRibbonGroupOverflow, parseSvgPreview, defineChartPicker, commentInitials } from './chunk-SC44SOIS.js';
+import { personalizeSection, unavailableCategory, userInterfaceSection, attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, attachRibbonGroupOverflow, defineChartPicker, defineChartDataSheet, defineChartFormatPane, commentInitials } from './chunk-WDOWQKKC.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
+import './chunk-VM6ZTKB3.js';
 import { definePresence } from './chunk-YZH2QS7J.js';
+import { parseSvgPreview } from './chunk-FN7IF6M6.js';
 import './chunk-QLHCGV4C.js';
 import './chunk-XL77FR4B.js';
 import { VISIO_CAPABILITY_COMMANDS, VISIO_TEXT_LANGUAGES, VISIO_BULLET_STYLES, FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_SELECTION, EMPTY_EDIT_STATE, assertViewableDocument, snapshotSelection, selectionKey, indexDocumentText, searchDocumentText, sameSelection, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, visioWithContainerMembers, visioSelectionIsOnPage, visioDuplicateCommand, visioGroupCommand, visioUngroupCommand, visioContainerCommand, visioCalloutCommand, visioPasteCommand, visioTextOccurrenceSelection, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, hasVisibleShapeContent, composeVisioTransform, VISIO_CAPABILITY_BACKSTAGE_PAGES, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, isEditCancellation, propertyKeys, VISIO_TEXT_REPLACE_LIMITS, visioTextReplaceOccurrences, visioTextReplacePlan, visioTextReplaceCommands, visioClipboardShape, TEXT_SEARCH_LIMITS, visioSizePositionCommand, visioSizePositionState, visioPageInsertCommand, visioQuarterTurnCommand, visioRotationShape, VISIO_INITIAL_PRESENCE, sanitizeVisioPresence, textSearchStatus, visioSvgStrokeStyle, visioLineDashLengths, visioStencilDropCommand, visioMovementShape, visioMoveCommands, visioMoveTargets, visioMarqueeBox, visioPageDragDelta, visioTextShape, visioTextDraftEdit, isVisioPathTool, visioPathDrawPlan, visioDrawPlan, visioDrawBounds, visioDrawIsLargeEnough, visioConnectorCreationCommand, visioResizeShape, visioResizeDrag, visioConnectorRouteOf, visioPageEditToDrawing, visioNudgeCommands, VISIO_DIAGRAM_RULE_SETS, visioArrangeCommands, visioChangeMasterTargets, visioChangeMasterCommand, visioChangeShapeRefusal, visioChangeShapeCommand, visioChangeCaseShape, visioChangeCaseCommand, visioTextBlockShape, visioTextBlockFrame, visioTextBlockEdit, visioOrderingShape, visioFormatTargetShape, visioFormattingShape, visioTextFormattingState, visioTextIndentCommand, visioTextFontStepCommand, visioFontFamilies, visioChartObjectInsertCommand, visioPictureInsertCommand, normalizeVisioHyperlinkAddress, visioFitToDrawingEdits, VISIO_PAPER_SIZES, visioPageSizePresetEdits, visioOrientationEdits, visioPageDecorationState, visioNewPageId, visioMatchingPaperSize, visioPageBreaks, visioRemoveDataGraphicEdits, visioDataGraphicFields, visioDataGraphicEdits, visioShapeDataRow, VISIO_DATA_GRAPHIC_FILL_ROW, visioColorRules, visioLegendEdits, visioTextDialogValues, visioTextDialogPatch, visioFormatPainterSnapshot, visioFormatPainterEdits, VISIO_FORMAT_PAINTER_LIMITS, visioConnectableShape, visioAddConnectionPointCommand, visioWithCalloutLeaders, visioWithDataGraphics, visioFillPatternTransform, visioRenderedGradientStops, visioStrokeGradient, visioMasterDropRefusal, visioMasterDropSize, visioFileMasterDropCommand, visioMasterDropCommand, visioDrawingPoint, visioMovePreviewTransform, visioMarqueeSelection, visioPathPreview, visioNearestConnectionPoint, VISIO_RESIZE_HANDLES, visioRotationPreviewTransform, visioStraightLineHandles, visioConnectorEndHandles, VISIO_LAYOUT_STYLES, visioShapeFormattingState, visioGlowKey, visioShapeEffectValues, visioReflectionKey, visioFollowTarget, visioPaperSize, visioKeepAutoSize, VISIO_RULER_DENSITY_CHOICES, VISIO_GRID_DENSITY_CHOICES, visioGridSteps, visioRulerGridValues, visioRulerDensityFactor, visioRulerGridEdits, checkVisioDiagram, visioShapeReport, visioShapeReportTable, visioShapeReportCsv, visioShapeReportText, visioSubprocessCommand, visioShapeDataText, VISIO_LAYOUT_LABELS, visioAutoAlignCommands, visioReLayoutCommands, visioLayerAssignState, visioNewLayerNames, visioLayerAssignCommands, VISIO_SELECT_TYPES, VISIO_SELECT_TYPE_LABELS, visioPageMasters, visioSelectByType, visioPasteTextCommand, visioSnapMoveDelta, visioPageGuides, visioAutoConnectShape, visioAutoConnectArrows, visioAutoConnectNeighbor, visioAutoConnectPlan, visioShapePageBox, VISIO_FIELD_CATEGORIES, visioTextAppendEdit, visioTextSource, visioTextBlockMatrix, VISIO_TEXT_BLOCK_HANDLES, visioShapeLocalPoint, visioTextBlockDrag, visioShapeFrame, visioMasterPreviewBox, visioConnectorMovePreviews, visioConnectorPreviewPath, visioGlueableShape, visioDataGraphicMarker, visioParseRange, visioDataTable, visioWorkbookGrid, visioGuideCreateCommand, visioGuideMoveCommand } from 'ooxml-core/visio/ui';
 export { TEXT_SEARCH_LIMITS, VISIO_CAPABILITY_IDS, compatibilityNotes, compatibilityText, demoDocument, eventKeys, propertyKeys } from 'ooxml-core/visio/ui';
 import { VISIO_VISIBILITY_LIMITS, VISIO_BASIC_STENCIL, VISIO_STENCILS, visioOutlineShape, VISIO_SNAP, VISIO_GLUE, VISIO_SHADOW_PRESETS, loadVisio, createVsdx, deserializeVisioClipboard, mergeVisioPages, getVisioPageLayers, resolveVisioPageVisibility, visioLineJumpPaths, VISIO_CLIPBOARD_MAX_CHARS, visioSnapGlue, VISIO_GLOW_TRANSPARENCY, VISIO_METADATA_TEXT_LIMIT, VISIO_PICTURE_MAX_BYTES, inspectVisioRasterImage, visioPageLayout, VISIO_BUILT_IN_THEMES, VISIO_CONNECTOR_ROUTES, visioFilledArrow, layoutVisioFilledArrowLine, visioOpenArrowPath, visioBuiltInStencil, visioBuiltInMaster, isVisioChangeShapeTarget, VISIO_CONTAINER_STYLES, VISIO_CALLOUT_STYLES, visioFallbackQuickStyle, VISIO_GLOW_SIZES, VISIO_SOFT_EDGE_SIZES, VISIO_REFLECTION_PRESETS, encodeBitmapEmf, VISIO_BACKGROUND_STYLES, visioBackgroundShapes, VISIO_BORDER_STYLES, visioBorderShapes, checkVisioAlternativeText, VISIO_SHAPE_DATA_TYPES, visioShapeDataRowName, VISIO_CLIPBOARD_MAGIC, visioThemeVariantColors, visioPageThemeColors, readVisioStencil, VISIO_QUICK_STYLE_COLORS, isVisioBuiltInThemeId, VISIO_SCALE_UNITS } from 'ooxml-core/visio';
-import { renderChartSvg } from 'ooxml-core/xlsx';
+import { renderChartSvg, readEmbeddedChartSpace, writeEmbeddedChartSpace } from 'ooxml-core/xlsx';
 import { resolveRotateHandlePlacement, createRotationDrag, snapAngle } from 'ooxml-core/geometry';
 import { normalizeLocale, interpolate } from 'ooxml-core/i18n';
 import { isCapabilityEnabled, capabilityHiddenActions, recoveryStoreOf, FILE_COMMAND_EVENT, fileCommandDetail, saveToStorage, documentSaveMeta } from 'ooxml-core/embedding';
 import { createWriteBackScheduler, DEFAULT_WRITE_BACK_DEBOUNCE_MS, flushWriteBackOnPageClose, writeBackStateOf } from 'ooxml-core/collab';
 import { INSERT_CHART_TYPES, GROUPED_CHART_TYPES, gridChartSvg, gridChart, parseChartGrid, readEmbeddedChart, chartGridText, gridChartWorkbook } from 'ooxml-core/xlsx/ui';
+import { applyChartSpaceDataSheetEdits, applyChartEditIntent, chartSpaceDataSheet, renderChartSpaceSvg } from 'ooxml-core/chart';
 import { pushRecentColor, normalizePaletteHex } from 'ooxml-core/color';
 
 function createWorkerEditor(factory, timeoutMs = 2e4) {
@@ -3623,7 +3626,7 @@ var text_tool_default = ".viewport[data-tool='text'] {\n	cursor: text;\n	touch-a
 var presentation_default = "/* Visio Presentation Mode: the page fitted on a dark backdrop, chrome-free, read only. */\n.presentation {\n	position: fixed;\n	inset: 0;\n	z-index: 2147483000;\n	display: grid;\n	place-items: center;\n	/* Visio presents on a dark backdrop in every theme. */\n	background: #111;\n	color: rgb(255 255 255 / 0.82);\n	outline: none;\n	cursor: default;\n}\n.presentation[hidden] {\n	display: none;\n}\n.presentation:fullscreen {\n	width: 100%;\n	height: 100%;\n}\n.presentation-stage {\n	position: absolute;\n	inset: 2vmin;\n	display: grid;\n	place-items: center;\n	container-type: size;\n}\n.presentation-stage > .paper {\n	height: auto;\n	max-width: 100%;\n	max-height: 100%;\n	margin: 0;\n	box-shadow: none;\n}\n.presentation-bar {\n	position: absolute;\n	right: 12px;\n	bottom: 12px;\n	display: flex;\n	align-items: center;\n	gap: 2px;\n	padding: 2px 4px;\n	border-radius: 4px;\n	background: rgb(0 0 0 / 0.45);\n	font: 12px/1.4 var(--office-font-family, 'Segoe UI', system-ui, sans-serif);\n	opacity: 0.35;\n	transition: opacity 0.2s;\n}\n.presentation-bar:hover,\n.presentation-bar:focus-within {\n	opacity: 1;\n}\n.presentation-bar button {\n	display: inline-grid;\n	place-items: center;\n	width: 26px;\n	height: 26px;\n	padding: 0;\n	border: 0;\n	border-radius: 3px;\n	background: transparent;\n	color: inherit;\n	cursor: pointer;\n}\n.presentation-bar button:hover:not(:disabled) {\n	background: rgb(255 255 255 / 0.16);\n}\n.presentation-bar button:focus-visible {\n	outline: 2px solid currentColor;\n	outline-offset: -2px;\n}\n.presentation-bar button:disabled {\n	opacity: 0.35;\n	cursor: default;\n}\n.presentation-page {\n	min-width: 6em;\n	max-width: 40vw;\n	padding: 0 6px;\n	overflow: hidden;\n	text-align: center;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n@media (prefers-reduced-motion: reduce) {\n	.presentation-bar {\n		transition: none;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/insert.css?raw
-var insert_default = ".link-dialog label,\n.alt-text-dialog label,\n.screen-tip-dialog label {\n	display: grid;\n	gap: 4px;\n	min-width: min(360px, 80vw);\n	margin: 0 0 12px;\n}\n.link-dialog input,\n.link-dialog select,\n.alt-text-dialog input,\n.alt-text-dialog textarea,\n.screen-tip-dialog input {\n	box-sizing: border-box;\n	width: 100%;\n	padding: 6px;\n	color: inherit;\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n	font: inherit;\n}\n.alt-text-dialog textarea {\n	resize: vertical;\n	min-height: 90px;\n}\n.accessibility-dialog [aria-live] {\n	max-height: 50vh;\n	overflow: auto;\n}\n.accessibility-dialog [aria-live] > button {\n	display: block;\n	width: 100%;\n	padding: 8px;\n	text-align: left;\n	color: inherit;\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n	font: inherit;\n	cursor: pointer;\n}\n.link-dialog [role='alert'],\n.alt-text-dialog [role='alert'],\n.screen-tip-dialog [role='alert'] {\n	margin: 0;\n	color: var(--office-error, #b00020);\n}\n\n.chart-dialog {\n	--office-dialog-width: min(640px, 94vw);\n	--office-dialog-max-width: min(640px, 94vw);\n}\n.chart-dialog [role='alert'] {\n	margin: 8px 0 0;\n	color: var(--_vv-danger);\n}\n.chart-dialog [role='alert']:empty {\n	display: none;\n}\n.chart-dialog .chart-note {\n	margin: 8px 0 0;\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n";
+var insert_default = ".link-dialog label,\n.alt-text-dialog label,\n.screen-tip-dialog label {\n	display: grid;\n	gap: 4px;\n	min-width: min(360px, 80vw);\n	margin: 0 0 12px;\n}\n.link-dialog input,\n.link-dialog select,\n.alt-text-dialog input,\n.alt-text-dialog textarea,\n.screen-tip-dialog input {\n	box-sizing: border-box;\n	width: 100%;\n	padding: 6px;\n	color: inherit;\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n	font: inherit;\n}\n.alt-text-dialog textarea {\n	resize: vertical;\n	min-height: 90px;\n}\n.accessibility-dialog [aria-live] {\n	max-height: 50vh;\n	overflow: auto;\n}\n.accessibility-dialog [aria-live] > button {\n	display: block;\n	width: 100%;\n	padding: 8px;\n	text-align: left;\n	color: inherit;\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n	font: inherit;\n	cursor: pointer;\n}\n.link-dialog [role='alert'],\n.alt-text-dialog [role='alert'],\n.screen-tip-dialog [role='alert'] {\n	margin: 0;\n	color: var(--office-error, #b00020);\n}\n\n.chart-dialog {\n	--office-dialog-width: min(640px, 94vw);\n	--office-dialog-max-width: min(640px, 94vw);\n}\n.chart-dialog [role='alert'] {\n	margin: 8px 0 0;\n	color: var(--_vv-danger);\n}\n.chart-dialog [role='alert']:empty {\n	display: none;\n}\n.chart-dialog .chart-note {\n	margin: 8px 0 0;\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n\n.chart-edit-dialog {\n	--office-dialog-width: min(760px, 96vw);\n	--office-dialog-max-width: min(760px, 96vw);\n}\n.chart-edit-body {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n	align-items: flex-start;\n}\n.chart-edit-body > office-ui-chart-data-sheet,\n.chart-edit-body > office-ui-chart-format-pane {\n	flex: 1 1 320px;\n	min-width: 0;\n	max-height: 60vh;\n	overflow: auto;\n}\n.chart-edit-body > [hidden] {\n	display: none;\n}\n.chart-edit-preview {\n	flex: 0 1 320px;\n	border: 1px solid var(--office-border, #d0d0d0);\n	background: #ffffff;\n}\n.chart-edit-preview svg {\n	display: block;\n	width: 100%;\n	height: auto;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/mini-toolbar.css?raw
 var mini_toolbar_default = ".mini-toolbar {\n	position: fixed;\n	z-index: 60;\n	display: flex;\n	align-items: center;\n	gap: 2px;\n	padding: 4px;\n	color: var(--_vv-ink);\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n	border-radius: 4px;\n	box-shadow: var(--_vv-shadow);\n}\n.mini-toolbar[hidden] {\n	display: none;\n}\n";
@@ -13407,6 +13410,18 @@ function createContextMenus(doc) {
         icon: "pencil",
         action: { type: "reveal", panel: "edit", focusText: true }
       },
+      {
+        id: "ctx-chart-data",
+        label: "Edit Data",
+        icon: "grid",
+        action: { type: "insert", item: "chart-data" }
+      },
+      {
+        id: "ctx-chart-format",
+        label: "Format Chart...",
+        icon: "fill",
+        action: { type: "insert", item: "chart-format" }
+      },
       "-",
       {
         id: "ctx-group",
@@ -16775,6 +16790,151 @@ var InsertChartDialog = class {
     }
   }
 };
+var PREVIEW_WIDTH2 = 640;
+var LIVE = { width: 320, height: 200 };
+var HEADINGS = { data: "Edit Data", format: "Format Chart" };
+var ChartObjectEditor = class {
+  dialog;
+  sheet;
+  pane;
+  preview;
+  error;
+  #submit;
+  #rasterize;
+  #buttons = /* @__PURE__ */ new Map();
+  #target;
+  #bytes;
+  #space;
+  #theme;
+  #busy = false;
+  constructor(root, submit, rasterize = rasterizeSvg) {
+    this.#submit = submit;
+    this.#rasterize = rasterize;
+    const doc = root.ownerDocument;
+    const registry = doc.defaultView?.customElements;
+    defineChartDataSheet(registry);
+    defineChartFormatPane(registry);
+    this.dialog = doc.createElement("office-ui-dialog");
+    this.dialog.className = "chart-dialog chart-edit-dialog";
+    this.sheet = doc.createElement("office-ui-chart-data-sheet");
+    this.pane = doc.createElement("office-ui-chart-format-pane");
+    this.preview = doc.createElement("div");
+    this.preview.className = "chart-edit-preview";
+    this.preview.setAttribute("role", "img");
+    this.preview.setAttribute("aria-label", "Chart preview");
+    const body = doc.createElement("div");
+    body.className = "chart-edit-body";
+    body.append(this.sheet, this.pane, this.preview);
+    this.error = doc.createElement("p");
+    this.error.setAttribute("role", "alert");
+    this.dialog.append(body, this.error);
+    for (const name of ["Cancel", "OK"]) {
+      const button = doc.createElement("office-ui-button");
+      button.slot = "footer";
+      button.setAttribute("label", name);
+      button.setAttribute("command", `chart-edit-${name.toLowerCase()}`);
+      button.addEventListener("office-command", () => {
+        if (button.disabled) return;
+        if (name === "Cancel") this.dialog.close();
+        else void this.#save();
+      });
+      this.#buttons.set(name, button);
+      this.dialog.append(button);
+    }
+    this.sheet.addEventListener("office-chart-data-change", (event) => {
+      const { edits } = event.detail;
+      if (this.#space) this.#update(applyChartSpaceDataSheetEdits(this.#space, edits));
+    });
+    this.pane.addEventListener("office-chart-format-target", (event) => {
+      this.pane.target = event.detail.target;
+    });
+    this.pane.addEventListener("office-chart-format-edit", (event) => {
+      const { intent } = event.detail;
+      if (!intent || !this.#space) return this.#update(this.#space);
+      try {
+        this.#update(applyChartEditIntent(this.#space, intent));
+        this.error.textContent = "";
+      } catch (error) {
+        this.error.textContent = error instanceof Error ? error.message : String(error);
+        this.#update(this.#space);
+      }
+    });
+    this.pane.addEventListener("office-chart-format-close", () => this.dialog.close());
+    root.append(this.dialog);
+  }
+  /** The edited chart part, while the editor is open. */
+  get space() {
+    return this.#space;
+  }
+  /** The chart being edited while the editor is open, so a host can close it if the shape goes. */
+  get target() {
+    return this.dialog.open ? this.#target : void 0;
+  }
+  /** Open `mode` for the chart object's workbook; false when the workbook holds no chart. */
+  async open(mode, target, workbook) {
+    const found = await readEmbeddedChartSpace(workbook);
+    if (!found) return false;
+    const scheme = found.scheme;
+    this.#theme = { scheme: (name) => scheme[name] };
+    this.#target = target;
+    this.#bytes = workbook;
+    this.pane.theme = this.#theme;
+    this.pane.target = "chartArea";
+    this.sheet.hidden = mode !== "data";
+    this.pane.hidden = mode !== "format";
+    this.dialog.dataset.mode = mode;
+    this.dialog.setAttribute("heading", HEADINGS[mode]);
+    this.error.textContent = "";
+    this.#update(found.space);
+    this.dialog.show();
+    return true;
+  }
+  close() {
+    this.dialog.close();
+  }
+  #update(space) {
+    this.#space = space;
+    if (!space) return;
+    this.sheet.data = chartSpaceDataSheet(space);
+    this.pane.chartSpace = space;
+    const svg2 = parseSvgPreview(this.dialog.ownerDocument, renderChartSpaceSvg(space, LIVE));
+    if (svg2) this.preview.replaceChildren(svg2);
+    else this.preview.replaceChildren();
+  }
+  async #save() {
+    const target = this.#target;
+    const space = this.#space;
+    const bytes = this.#bytes;
+    if (this.#busy || !target || !space || !bytes) return;
+    this.#busy = true;
+    for (const button of this.#buttons.values()) button.disabled = true;
+    try {
+      const workbook = await writeEmbeddedChartSpace(bytes, space);
+      const embedded = await readEmbeddedChart(workbook);
+      if (!embedded) throw new Error("The chart could not be written.");
+      const height = Math.min(
+        1600,
+        Math.max(120, Math.round(PREVIEW_WIDTH2 * target.height / target.width))
+      );
+      const raster = await this.#rasterize(
+        this.dialog.ownerDocument,
+        renderChartSvg(embedded.view, PREVIEW_WIDTH2, height),
+        PREVIEW_WIDTH2,
+        height
+      );
+      await this.#submit(
+        { workbook, preview: encodeBitmapEmf(raster.width, raster.height, raster.rgba) },
+        target
+      );
+      this.dialog.close();
+    } catch (error) {
+      this.error.textContent = error instanceof Error ? error.message : "The chart was not saved.";
+    } finally {
+      this.#busy = false;
+      for (const button of this.#buttons.values()) button.disabled = false;
+    }
+  }
+};
 
 // src/visio/viewer-insert.ts
 var ViewerInsert = class {
@@ -16808,6 +16968,7 @@ var ViewerInsert = class {
       (button) => void this.#applyLink(button)
     );
     this.chart = new InsertChartDialog(root, (data, target) => this.#saveChart(data, target));
+    this.chartEditor = new ChartObjectEditor(root, (data, target) => this.#saveChart(data, target));
     this.tip = new InsertDialog(
       root,
       "screen-tip-dialog",
@@ -16825,6 +16986,7 @@ var ViewerInsert = class {
   link;
   tip;
   chart;
+  chartEditor;
   #target;
   #editable(state) {
     return canEditDiagram(state) && !state.loading && !state.edit.busy;
@@ -16846,6 +17008,12 @@ var ViewerInsert = class {
       if (state.document?.pages[state.pageIndex]) this.chart.open();
       return;
     }
+    if (item === "chart-data" || item === "chart-format") {
+      const shape2 = this.#shape(state);
+      if (!shape2?.embeddedObject || !this.editChart(shape2.id, item === "chart-data" ? "data" : "format"))
+        this.announce("Select one chart to edit its data or format it.");
+      return;
+    }
     const shape = this.#shape(state);
     const page3 = state.document?.pages[state.pageIndex];
     if (!shape || !page3) {
@@ -16878,23 +17046,26 @@ var ViewerInsert = class {
     this.link.dialog.close();
     this.tip.dialog.close();
     this.chart.close();
+    this.chartEditor.close();
   }
-  /** Open the editor for the embedded chart `shapeId` on this page; false if it is not one. */
-  editChart(shapeId) {
+  /**
+   * Open an editor for the embedded chart `shapeId` on this page: the chart dialog (type, title
+   * and data grid, as a double-click does), Edit Data or Format Chart. False if it is not one.
+   */
+  editChart(shapeId, mode = "chart") {
     const state = this.controller.state;
     const page3 = state.document?.pages[state.pageIndex];
     const shape = page3 && embeddedChartShape(page3.shapes, shapeId);
     if (!page3 || !shape?.embeddedObject || !this.#editable(state)) return false;
-    void this.chart.edit(
-      {
-        pageId: page3.id,
-        shapeId,
-        width: shape.width,
-        height: shape.height,
-        generation: this.controller.documentGeneration
-      },
-      shape.embeddedObject.bytes
-    );
+    const target = {
+      pageId: page3.id,
+      shapeId,
+      width: shape.width,
+      height: shape.height,
+      generation: this.controller.documentGeneration
+    };
+    if (mode === "chart") void this.chart.edit(target, shape.embeddedObject.bytes);
+    else void this.chartEditor.open(mode, target, shape.embeddedObject.bytes);
     return true;
   }
   /**
@@ -17066,6 +17237,13 @@ var ViewerInsert = class {
       chart.disabled = !editing || !page3;
       chart.title = editing ? "Insert a chart drawn from data you type or paste. Double-click it to edit." : "Open a .vsdx file to insert a chart.";
     }
+    const chartShape = shape?.embeddedObject ? shape : void 0;
+    for (const name of ["ctx-chart-data", "ctx-chart-format"]) {
+      const control = button(name);
+      if (!control) continue;
+      control.disabled = !chartShape;
+      control.hidden = !chartShape;
+    }
     for (const [name, label] of [
       ["link", "Link (Ctrl+K)"],
       ["ctx-hyperlink", "Hyperlink (Ctrl+K)"],
@@ -17077,6 +17255,8 @@ var ViewerInsert = class {
       control.title = shape ? label : `${label}: select one shape on an editable drawing.`;
     }
     if (this.chart.dialog.open && (!canEditDiagram(state) || state.loading)) this.chart.close();
+    if (this.chartEditor.dialog.open && (!canEditDiagram(state) || state.loading || this.chartEditor.target?.generation !== this.controller.documentGeneration))
+      this.chartEditor.close();
     for (const dialog of [this.link, this.tip]) {
       if (!dialog.dialog.open) continue;
       if (!canEditDiagram(state) || state.loading || this.controller.documentGeneration !== this.#target?.generation)

package/dist/xlsx/chart-format-pane.d.ts

@@ -0,0 +1,10 @@
+import { type Command, type EditorContext } from 'ooxml-core/xlsx/ui';
+import { type OfficeUiChartFormatPane } from '../chart/format-pane.js';
+export declare function chartAreaCommand(): Command;
+export declare function chartSeriesCommand(): Command;
+export declare function createChartFormatPane(ctx: EditorContext): {
+    element: OfficeUiChartFormatPane;
+    refresh: () => void;
+    relocalize: () => void;
+    close: () => void;
+};

package/dist/xlsx/chart-format-source.d.ts

@@ -0,0 +1,17 @@
+import { type ChartObject, type Workbook } from 'ooxml-core/xlsx';
+import type { ChartFormatTarget, ChartSpace } from 'ooxml-core/chart';
+import type { DrawingColorTheme } from 'ooxml-core/drawingml';
+import { type ChartFormatSource } from '../chart/format-pane-api.js';
+/** The slot Excel's fill controls go into. */
+export declare const XLSX_CHART_FILL_SLOT = "fill";
+/** Whether the chart has series to format. */
+export declare const formatsSeries: (chart: ChartObject) => boolean;
+/** The workbook theme as the pane resolves scheme colours (`accent1`, `tx1`...). */
+export declare function workbookChartTheme(workbook: Workbook): DrawingColorTheme;
+/** Whether Excel's own fill controls format `target`. */
+export declare const xlsxFillsTarget: (target: ChartFormatTarget) => boolean;
+/**
+ * The Format pane source of `chart` (whose model is `space`) with `target` selected: Excel's fill
+ * controls take the Fill section of the elements they edit.
+ */
+export declare function xlsxChartFormatSource(chart: ChartObject, space: ChartSpace, theme: DrawingColorTheme, target: ChartFormatTarget | undefined): ChartFormatSource;

package/dist/xlsx/commands/chart-design.d.ts

@@ -0,0 +1,55 @@
+import { type EditorContext } from 'ooxml-core/xlsx/ui';
+export declare function chartColorGallerySections(ctx: EditorContext): {
+    title?: string;
+    columns: number;
+    tileWidth: number;
+    tileHeight: number;
+    items: {
+        id: string;
+        label: string;
+        preview: string;
+        applied: boolean;
+    }[];
+}[];
+export declare const chartColorGalleryItems: (ctx: EditorContext) => {
+    id: string;
+    label: string;
+    preview: string;
+    applied: boolean;
+}[];
+export declare function chartStyleGallerySections(ctx: EditorContext): {
+    title?: string;
+    columns: number;
+    tileWidth: number;
+    tileHeight: number;
+    items: {
+        id: string;
+        label: string;
+        preview: string;
+        applied: boolean;
+    }[];
+}[];
+export declare const chartStyleGalleryItems: (ctx: EditorContext) => {
+    id: string;
+    label: string;
+    preview: string;
+    applied: boolean;
+}[];
+export declare function chartQuickLayoutGallerySections(ctx: EditorContext): {
+    title?: string;
+    columns: number;
+    tileWidth: number;
+    tileHeight: number;
+    items: {
+        id: string;
+        label: string;
+        preview: string;
+        applied: boolean;
+    }[];
+}[];
+export declare const chartQuickLayoutGalleryItems: (ctx: EditorContext) => {
+    id: string;
+    label: string;
+    preview: string;
+    applied: boolean;
+}[];

package/dist/xlsx/dialogs/insert-smartart.d.ts

@@ -0,0 +1,4 @@
+import { type DiagramInsertPreset } from 'ooxml-core/diagram';
+import type { EditorContext } from 'ooxml-core/xlsx/ui';
+/** Opens the picker; resolves with the chosen preset, or undefined when cancelled. */
+export declare function chooseSmartArt(ctx: EditorContext): Promise<DiagramInsertPreset | undefined>;

package/dist/xlsx/grid/smartart.d.ts

@@ -7,4 +7,7 @@ export declare function smartArtSchemeColors(theme: ThemePalette | undefined): S
  * Paints a SmartArt frame into `node`. The shared SVG scales to the positioned frame,
  * following both zoom and drawing resize without clipping the original cached extent.
  */
-export declare function paintSmartArt(ctx: EditorContext, node: HTMLElement, obj: SmartArtObject, theme: ThemePalette | undefined): void;
+export declare function paintSmartArt(ctx: EditorContext, node: HTMLElement, obj: SmartArtObject, theme: ThemePalette | undefined, size?: {
+    w: number;
+    h: number;
+}): void;

package/dist/xlsx/ribbon/tabs/contextual.d.ts

@@ -4,4 +4,10 @@ export declare function tableDesignTab(): RibbonTab;
 export declare function slicerTab(): RibbonTab;
 /** Timeline: shown while a timeline is the selected object. */
 export declare function timelineTab(): RibbonTab;
+/**
+ * SmartArt Design: shown while a SmartArt graphic is the selected object, with the same commands
+ * as Word's tab (the shared list of `ooxml-core/diagram`). SmartArt Styles and Change Colors are
+ * not offered: only one colour and one style definition ship with the core.
+ */
+export declare function smartArtDesignTab(): RibbonTab;
 export declare function chartDesignTab(): RibbonTab;

package/dist/xlsx/smartart-controller.d.ts

@@ -0,0 +1,14 @@
+import { type DiagramDesignCommandKey } from 'ooxml-core/diagram';
+import { type Command, type EditorContext } from 'ooxml-core/xlsx/ui';
+/** The command id of a SmartArt Design command (`smartart.addAfter`, ...). */
+export declare const smartArtCommandId: (key: DiagramDesignCommandKey) => string;
+/** Creates the editor's SmartArt controller; its text pane goes beside the grid. */
+export declare function createSmartArtController(ctx: EditorContext): {
+    element: HTMLElement;
+    refresh: () => void;
+    relocalize: () => void;
+    /** A new workbook: the pane closes. */
+    reset: () => void;
+};
+/** The SmartArt Design commands and Insert > SmartArt. */
+export declare function smartArtCommands(): Command[];