ooxml-ui 1.16.0 → 1.17.0

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

@@ -1,5 +1,6 @@
 import { type OfficeProfile } from '../controls.js';
 import { VISIO_OPTION_CATEGORIES } from './viewer-options-categories.js';
+import { type ScreenTipStyle } from './viewer-screen-tips.js';
 export { VISIO_OPTION_CATEGORIES };
 /** The status bar's look: Visio's product colour ("Colorful") or the neutral suite bar. */
 export type StatusBarTheme = 'colorful' | 'neutral';
@@ -8,6 +9,14 @@ export declare const isStatusBarTheme: (value: unknown) => value is StatusBarThe
 export declare function readStatusBarTheme(): StatusBarTheme | undefined;
 /** Office Theme as Options offers it: the two light looks, or the dark theme. */
 export type OfficeThemeChoice = StatusBarTheme | 'dark';
+/** The Options that change how the viewer behaves, remembered on this device. */
+export interface VisioBehaviour {
+    screenTips: ScreenTipStyle;
+    undoLevels: number;
+}
+export declare const DEFAULT_BEHAVIOUR: VisioBehaviour;
+/** The behaviour Options saved on this device (storage may be unavailable or hold junk). */
+export declare function readBehaviour(): VisioBehaviour;
 /** The Options dialog element. Built once and appended to the viewer's shadow root. */
 export declare function createOptionsDialog(doc: Document): HTMLElement;
 /**
@@ -19,12 +28,16 @@ export declare class ViewerProfile {
     private readonly onProfile;
     /** Reads and applies the Office Theme on the viewer element. */
     private readonly theme;
+    /** Applies the behaviour Options (ScreenTip style, undo depth), now and after each change. */
+    private readonly onBehaviour;
     constructor(root: ShadowRoot, onProfile?: (profile: OfficeProfile) => void, 
     /** Reads and applies the Office Theme on the viewer element. */
     theme?: {
         get(): OfficeThemeChoice;
         set(theme: OfficeThemeChoice): void;
-    });
+    }, 
+    /** Applies the behaviour Options (ScreenTip style, undo depth), now and after each change. */
+    onBehaviour?: (behaviour: VisioBehaviour) => void);
     get profile(): OfficeProfile;
     /** Open Visio Options, on General as Visio does. */
     showOptions(category?: string): void;

package/dist/visio/viewer-screen-tips.d.ts

@@ -0,0 +1,10 @@
+/** Office's ScreenTip style: full tips, the name alone, or none. */
+export type ScreenTipStyle = 'descriptions' | 'plain' | 'off';
+export declare const isScreenTipStyle: (value: unknown) => value is ScreenTipStyle;
+/** Put back every tip `applyScreenTips` set aside (before the ribbon is translated again). */
+export declare function restoreScreenTips(root: ParentNode): void;
+/**
+ * Applies the ScreenTip style to a ribbon's `title` tooltips: "plain" drops the shortcut hint,
+ * "off" removes the tip. The original is kept so the style can change back.
+ */
+export declare function applyScreenTips(root: ParentNode, style: ScreenTipStyle): void;

package/dist/visio.js

@@ -1,8 +1,8 @@
 import { trackPointerPan, ownsCaptureLoss } from './chunk-GSXOZCAN.js';
-import { syncRibbonAddIns } from './chunk-UIVYZERK.js';
-export { RIBBON_ADD_IN_EVENT } from './chunk-UIVYZERK.js';
+import { syncRibbonAddIns } from './chunk-VUSDTDZS.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-VUSDTDZS.js';
 import { themeBridge, installOfficeUiTheme } from './chunk-7E3HU7RL.js';
-import { userInterfaceSection, personalizeSection, unavailableCategory, attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, attachRibbonGroupOverflow, commentInitials } from './chunk-CHFMXUPK.js';
+import { personalizeSection, unavailableCategory, userInterfaceSection, attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, attachRibbonGroupOverflow, defineChartPicker, commentInitials } from './chunk-KRQ5T2GX.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
 import { definePresence } from './chunk-KNC2UEUR.js';
 import './chunk-CWBSXK7P.js';
@@ -11,6 +11,7 @@ import { VISIO_TEXT_LANGUAGES, VISIO_BULLET_STYLES, FOREIGN_VECTOR_SCENE_LIMITS,
 export { TEXT_SEARCH_LIMITS, 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, getVisioPageLayers, resolveVisioPageVisibility, visioLineJumpPaths, visioSnapGlue, VISIO_CLIPBOARD_MAX_CHARS, VISIO_GLOW_TRANSPARENCY, VISIO_METADATA_TEXT_LIMIT, VISIO_PICTURE_MAX_BYTES, inspectVisioRasterImage, visioPageLayout, VISIO_BUILT_IN_THEMES, VISIO_CONNECTOR_ROUTES, visioFilledArrow, layoutVisioFilledArrowLine, visioOpenArrowPath, isVisioChangeShapeTarget, VISIO_CONTAINER_STYLES, VISIO_CALLOUT_STYLES, visioBuiltInStencil, visioFallbackQuickStyle, VISIO_GLOW_SIZES, VISIO_SOFT_EDGE_SIZES, VISIO_REFLECTION_PRESETS, VISIO_BACKGROUND_STYLES, visioBackgroundShapes, VISIO_BORDER_STYLES, visioBorderShapes, checkVisioAlternativeText, VISIO_SHAPE_DATA_TYPES, visioShapeDataRowName, VISIO_CLIPBOARD_MAGIC, visioThemeVariantColors, visioPageThemeColors, visioBuiltInMaster, VISIO_QUICK_STYLE_COLORS, isVisioBuiltInThemeId, readVisioStencil, VISIO_SCALE_UNITS } from 'ooxml-core/visio';
 import { normalizeLocale, interpolate } from 'ooxml-core/i18n';
+import { INSERT_CHART_TYPES, GROUPED_CHART_TYPES, gridChartSvg, gridChart, parseChartGrid } from 'ooxml-core/xlsx/ui';
 import { pushRecentColor, normalizePaletteHex } from 'ooxml-core/color';
 import { resolveRotateHandlePlacement, createRotationDrag, snapAngle } from 'ooxml-core/geometry';
 
@@ -542,6 +543,7 @@ var ViewerController = class {
   #sourceGeneration = 0;
   #searchIndex = null;
   #history = null;
+  #undoLevels;
   #selectionHistory = /* @__PURE__ */ new WeakMap();
   #selectionIntent = 0;
   #viewIntent = 0;
@@ -792,7 +794,10 @@ var ViewerController = class {
       document2 = await this.parser(Uint8Array.from(owned));
       if (this.#destroyed || id !== this.#loadId) return;
       assertViewableDocument(document2);
-      history = new DocumentHistory(owned);
+      history = new DocumentHistory(
+        owned,
+        this.#undoLevels === void 0 ? void 0 : this.#undoLevels + 1
+      );
       visible = documentVisibility(document2);
     } catch (cause) {
       if (this.#destroyed || id !== this.#loadId) return;
@@ -1084,6 +1089,16 @@ var ViewerController = class {
       return void 0;
     }
   }
+  /** Number of undo steps kept (File > Options > Advanced); applies to the open drawing at once. */
+  get undoLevels() {
+    return this.#undoLevels;
+  }
+  set undoLevels(levels) {
+    this.#undoLevels = levels;
+    if (!this.#history || levels === void 0) return;
+    this.#history.maxEntries = levels + 1;
+    this.#change({ edit: this.#sourceEditState() });
+  }
   async undo() {
     return this.#mutate("undo");
   }
@@ -1856,7 +1871,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";
+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";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/page-setup.css?raw
 var page_setup_default = ".page-setup-dialog .page-setup-tabs {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 2px;\n	margin: 0 0 12px;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.page-setup-dialog [role='tab'] {\n	padding: 6px 10px;\n	color: inherit;\n	font: inherit;\n	background: transparent;\n	border: 1px solid transparent;\n	border-bottom: none;\n	border-radius: 3px 3px 0 0;\n	cursor: pointer;\n}\n.page-setup-dialog [role='tab'][aria-selected='true'] {\n	background: var(--_vv-surface);\n	border-color: var(--_vv-border);\n	font-weight: 600;\n}\n.page-setup-dialog [role='tabpanel'] {\n	display: grid;\n	gap: 10px;\n	min-width: min(420px, 80vw);\n}\n.page-setup-dialog [role='tabpanel'][hidden] {\n	display: none;\n}\n.page-setup-dialog label {\n	display: grid;\n	grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.4fr);\n	align-items: center;\n	gap: 12px;\n}\n.page-setup-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}\n.page-setup-dialog .page-setup-hint {\n	max-width: 440px;\n	margin: 0;\n	font-size: 12px;\n}\n.page-setup-dialog [role='alert'] {\n	color: var(--office-error, #b00020);\n}\n.paper .page-break {\n	fill: none;\n	stroke: #7a7a7a;\n	stroke-width: 1.25;\n	stroke-dasharray: 6 4;\n	vector-effect: non-scaling-stroke;\n}\n@media (max-width: 480px) {\n	.page-setup-dialog label {\n		grid-template-columns: 1fr;\n		gap: 5px;\n	}\n}\n";
@@ -2113,6 +2128,8 @@ var visioThemeBridge = themeBridge(":host > *", {
   "--office-surface": "var(--_vv-accent-soft)",
   "--office-border": "var(--_vv-border)",
   "--office-accent": "var(--_vv-accent)",
+  // Hover and selected rows: an opaque accent tint over the page, not the shared cool grey.
+  "--office-selected": "color-mix(in srgb, var(--_vv-accent) 12%, var(--_vv-surface))",
   "--office-accent-foreground": "var(--_vv-accent-ink)",
   "--office-ring": "var(--_vv-focus)",
   "--office-font": "'Segoe UI', Arial, sans-serif"
@@ -5902,10 +5919,12 @@ function buildInsertPanel(doc, panel) {
           icon: "visioPicture",
           action: { type: "insert", item: "picture" }
         }),
-        command(
-          doc,
-          unsupported("chart", "Chart", "visioChart", "Embedded Excel charts are not supported.")
-        ),
+        command(doc, {
+          id: "chart",
+          label: "Chart",
+          icon: "visioChart",
+          action: { type: "insert", item: "chart" }
+        }),
         command(
           doc,
           unsupported(
@@ -8428,6 +8447,28 @@ function localizeRibbon(ribbon, value) {
   return locale;
 }
 
+// src/visio/viewer-screen-tips.ts
+var isScreenTipStyle = (value) => value === "descriptions" || value === "plain" || value === "off";
+var FULL = "data-screen-tip";
+var isReason = (tip) => tip.includes(": not available yet.");
+function restoreScreenTips(root) {
+  for (const element of root.querySelectorAll(`[${FULL}]`)) {
+    element.setAttribute("title", element.getAttribute(FULL));
+    element.removeAttribute(FULL);
+  }
+}
+function applyScreenTips(root, style2) {
+  restoreScreenTips(root);
+  if (style2 === "descriptions") return;
+  for (const element of root.querySelectorAll("[title]")) {
+    const tip = element.getAttribute("title");
+    if (isReason(tip)) continue;
+    element.setAttribute(FULL, tip);
+    if (style2 === "off") element.removeAttribute("title");
+    else element.setAttribute("title", tip.replace(/ \([^()]*\)$/, ""));
+  }
+}
+
 // src/visio/ribbon-overflow.ts
 var GROUP_ICONS = {
   Clipboard: "paste",
@@ -10856,14 +10897,34 @@ var ViewerPanZoom = class {
 
 // src/visio/viewer-options-categories.ts
 var visio = { product: "Visio", t: (text2) => text2 };
+var MAX_UNDO_LEVELS = 19;
 var disabled = (reason) => ({ disabled: `Not available yet. ${reason}` });
+function visioUserInterface() {
+  const section2 = userInterfaceSection(visio);
+  return {
+    ...section2,
+    controls: section2.controls.map(
+      (control) => control.key === "screenTips" ? {
+        kind: "select",
+        key: "screenTips",
+        label: control.label,
+        info: "Applies to the ribbon. Commands that are not available always say why.",
+        choices: [
+          { value: "descriptions", label: "Show ScreenTips with shortcut keys" },
+          { value: "plain", label: "Don't show shortcut keys in ScreenTips" },
+          { value: "off", label: "Don't show ScreenTips" }
+        ]
+      } : control
+    )
+  };
+}
 var VISIO_OPTION_CATEGORIES = [
   {
     id: "general",
     label: "General",
     description: "General options for working with Visio.",
     sections: [
-      userInterfaceSection(visio),
+      visioUserInterface(),
       personalizeSection(
         visio,
         [
@@ -10909,8 +10970,8 @@ var VISIO_OPTION_CATEGORIES = [
             key: "undoLevels",
             label: "Number of undo levels",
             min: 1,
-            max: 99,
-            ...disabled("The history depth is fixed.")
+            max: MAX_UNDO_LEVELS,
+            info: "Each step keeps a copy of the drawing, so very large drawings may keep fewer."
           },
           {
             kind: "toggle",
@@ -10948,13 +11009,39 @@ function writeStatusBarTheme(theme) {
   }
 }
 var isOfficeThemeChoice = (value) => value === "dark" || isStatusBarTheme(value);
-function profileValues(profile, officeTheme) {
+var DEFAULT_BEHAVIOUR = {
+  screenTips: "descriptions",
+  undoLevels: MAX_UNDO_LEVELS
+};
+var BEHAVIOUR_KEY = "ooxml-visio-options";
+var clampUndo = (value) => {
+  const levels = Math.round(Number(value));
+  return Number.isFinite(levels) ? Math.min(MAX_UNDO_LEVELS, Math.max(1, levels)) : DEFAULT_BEHAVIOUR.undoLevels;
+};
+function readBehaviour() {
+  try {
+    const stored = JSON.parse(globalThis.localStorage?.getItem(BEHAVIOUR_KEY) ?? "{}");
+    return {
+      screenTips: isScreenTipStyle(stored.screenTips) ? stored.screenTips : DEFAULT_BEHAVIOUR.screenTips,
+      undoLevels: clampUndo(stored.undoLevels ?? DEFAULT_BEHAVIOUR.undoLevels)
+    };
+  } catch {
+    return { ...DEFAULT_BEHAVIOUR };
+  }
+}
+function writeBehaviour(behaviour) {
+  try {
+    globalThis.localStorage?.setItem(BEHAVIOUR_KEY, JSON.stringify(behaviour));
+  } catch {
+  }
+}
+function profileValues(profile, officeTheme, behaviour) {
   return {
     officeTheme,
     miniToolbar: false,
     livePreview: false,
-    screenTips: "descriptions",
-    undoLevels: 20,
+    screenTips: behaviour.screenTips,
+    undoLevels: behaviour.undoLevels,
     autoSizeText: false,
     userName: profile.displayName,
     userInitials: profile.initial ?? ""
@@ -10964,7 +11051,12 @@ function createOptionsDialog(doc) {
   const dialog = doc.createElement("office-ui-options-dialog");
   dialog.setAttribute("heading", "Visio Options");
   dialog.categories = VISIO_OPTION_CATEGORIES;
-  dialog.defaults = { userName: "", userInitials: "", officeTheme: "neutral" };
+  dialog.defaults = {
+    userName: "",
+    userInitials: "",
+    officeTheme: "neutral",
+    ...DEFAULT_BEHAVIOUR
+  };
   return dialog;
 }
 var ViewerProfile = class {
@@ -10973,16 +11065,21 @@ var ViewerProfile = class {
     get: () => "neutral",
     set: () => {
     }
+  }, onBehaviour = () => {
   }) {
     this.onProfile = onProfile;
     this.theme = theme;
+    this.onBehaviour = onBehaviour;
     this.#dialog = root.querySelector("office-ui-options-dialog");
     this.#account = root.querySelector("office-ui-account");
     this.#sync();
+    this.onBehaviour({ ...this.#behaviour });
   }
   onProfile;
   theme;
+  onBehaviour;
   #profile = readOfficeProfile();
+  #behaviour = readBehaviour();
   #dialog;
   #account;
   get profile() {
@@ -10990,7 +11087,7 @@ var ViewerProfile = class {
   }
   /** Open Visio Options, on General as Visio does. */
   showOptions(category = "general") {
-    this.#dialog.values = profileValues(this.#profile, this.theme.get());
+    this.#dialog.values = profileValues(this.#profile, this.theme.get(), this.#behaviour);
     this.#dialog.category = category;
     this.#dialog.show();
   }
@@ -11006,6 +11103,13 @@ var ViewerProfile = class {
           this.theme.set(values.officeTheme);
           if (values.officeTheme !== "dark") writeStatusBarTheme(values.officeTheme);
         }
+        const screenTips = isScreenTipStyle(values.screenTips) ? values.screenTips : this.#behaviour.screenTips;
+        const undoLevels = clampUndo(values.undoLevels ?? this.#behaviour.undoLevels);
+        if (screenTips !== this.#behaviour.screenTips || undoLevels !== this.#behaviour.undoLevels) {
+          this.#behaviour = { screenTips, undoLevels };
+          writeBehaviour(this.#behaviour);
+          this.onBehaviour({ ...this.#behaviour });
+        }
         const initial = String(values.userInitials ?? "").trim();
         this.#update({
           displayName: String(values.userName ?? "").trim(),
@@ -11030,7 +11134,7 @@ var ViewerProfile = class {
   }
   #sync() {
     if (this.#account) this.#account.profile = this.#profile;
-    this.#dialog.values = profileValues(this.#profile, this.theme.get());
+    this.#dialog.values = profileValues(this.#profile, this.theme.get(), this.#behaviour);
   }
 };
 
@@ -13871,6 +13975,121 @@ var InsertDialog = class {
     for (const button of this.buttons.values()) button.disabled = value;
   }
 };
+var CHART_SIZE = { width: 640, height: 400 };
+var SCALE = 2;
+var SAMPLE = "Category	Series 1	Series 2\nA	4	2\nB	3	5\nC	6	4\nD	2	6";
+var GROUPINGS = [
+  { id: "clustered", label: "Clustered" },
+  { id: "stacked", label: "Stacked" },
+  { id: "percentStacked", label: "100% Stacked" }
+];
+var rasterizeSvg = async (doc, svg2, width, height) => {
+  const win = doc.defaultView;
+  if (!win) throw new Error("There is no window to draw the chart in.");
+  const url = win.URL.createObjectURL(new win.Blob([svg2], { type: "image/svg+xml" }));
+  try {
+    const image = new win.Image();
+    image.src = url;
+    await image.decode();
+    const canvas2 = doc.createElement("canvas");
+    canvas2.width = width * SCALE;
+    canvas2.height = height * SCALE;
+    const context = canvas2.getContext("2d");
+    if (!context) throw new Error("This browser cannot draw the chart.");
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, canvas2.width, canvas2.height);
+    context.drawImage(image, 0, 0, canvas2.width, canvas2.height);
+    const blob2 = await new Promise((resolve) => canvas2.toBlob(resolve, "image/png"));
+    if (!blob2) throw new Error("The chart could not be saved as a picture.");
+    return new Uint8Array(await blob2.arrayBuffer());
+  } finally {
+    win.URL.revokeObjectURL(url);
+  }
+};
+var InsertChartDialog = class {
+  dialog;
+  picker;
+  error;
+  #insert;
+  #rasterize;
+  #busy = false;
+  constructor(root, insert, rasterize = rasterizeSvg) {
+    this.#insert = insert;
+    this.#rasterize = rasterize;
+    const doc = root.ownerDocument;
+    defineChartPicker(doc.defaultView?.customElements);
+    this.dialog = doc.createElement("office-ui-dialog");
+    this.dialog.className = "chart-dialog";
+    this.dialog.setAttribute("heading", "Insert Chart");
+    this.picker = doc.createElement("office-ui-chart-picker");
+    this.picker.types = INSERT_CHART_TYPES.map(([id, label]) => ({ id, label }));
+    this.picker.groupings = GROUPINGS;
+    this.picker.groupedTypes = [...GROUPED_CHART_TYPES];
+    this.picker.drawPreview = (value, size, tile) => {
+      const grid = this.#grid(value);
+      return grid ? gridChartSvg(grid, size.width, size.height, tile) : "";
+    };
+    this.error = doc.createElement("p");
+    this.error.setAttribute("role", "alert");
+    this.dialog.append(this.picker, this.error);
+    const buttons = /* @__PURE__ */ new Map();
+    for (const name of ["Cancel", "Insert"]) {
+      const button = doc.createElement("office-ui-button");
+      button.slot = "footer";
+      button.setAttribute("label", name);
+      button.setAttribute("command", `chart-dialog-${name.toLowerCase()}`);
+      button.addEventListener("office-command", () => {
+        if (button.disabled) return;
+        if (name === "Cancel") this.dialog.close();
+        else void this.#submit(buttons);
+      });
+      buttons.set(name, button);
+      this.dialog.append(button);
+    }
+    root.append(this.dialog);
+  }
+  #grid(value) {
+    return gridChart(parseChartGrid(value.data ?? ""), value.type, {
+      grouping: value.grouping,
+      ...value.title.trim() ? { title: value.title.trim() } : {}
+    });
+  }
+  /** Open with the sample data, ready to be replaced. */
+  open() {
+    this.error.textContent = "";
+    this.picker.value = { type: "column", grouping: "clustered", title: "", data: SAMPLE };
+    this.dialog.show();
+  }
+  close() {
+    this.dialog.close();
+  }
+  async #submit(buttons) {
+    if (this.#busy) return;
+    const grid = this.#grid(this.picker.value);
+    if (!grid || grid.chart.series.length === 0) {
+      this.error.textContent = "Enter a header row and at least one row of numbers, separated by tabs or commas.";
+      return;
+    }
+    this.#busy = true;
+    for (const button of buttons.values()) button.disabled = true;
+    try {
+      const svg2 = gridChartSvg(grid, CHART_SIZE.width, CHART_SIZE.height);
+      const png = await this.#rasterize(
+        this.dialog.ownerDocument,
+        svg2,
+        CHART_SIZE.width,
+        CHART_SIZE.height
+      );
+      await this.#insert(png);
+      this.dialog.close();
+    } catch (error) {
+      this.error.textContent = error instanceof Error ? error.message : "The chart was not inserted.";
+    } finally {
+      this.#busy = false;
+      for (const button of buttons.values()) button.disabled = false;
+    }
+  }
+};
 
 // src/visio/viewer-insert.ts
 var ViewerInsert = class {
@@ -13903,6 +14122,7 @@ var ViewerInsert = class {
       ["OK", "Remove Link", "Cancel"],
       (button) => void this.#applyLink(button)
     );
+    this.chart = new InsertChartDialog(root, (png) => this.#insertChart(png));
     this.tip = new InsertDialog(
       root,
       "screen-tip-dialog",
@@ -13919,6 +14139,7 @@ var ViewerInsert = class {
   input;
   link;
   tip;
+  chart;
   #target;
   #editable(state) {
     return state.edit.sourceAvailable && !state.loading && !state.edit.busy;
@@ -13936,6 +14157,10 @@ var ViewerInsert = class {
       if (state.document?.pages[state.pageIndex]) this.input.click();
       return;
     }
+    if (item === "chart") {
+      if (state.document?.pages[state.pageIndex]) this.chart.open();
+      return;
+    }
     const shape = this.#shape(state);
     const page3 = state.document?.pages[state.pageIndex];
     if (!shape || !page3) {
@@ -13967,6 +14192,28 @@ var ViewerInsert = class {
   close() {
     this.link.dialog.close();
     this.tip.dialog.close();
+    this.chart.close();
+  }
+  /** Place the chart dialog's PNG on the page; rejects (so the dialog can say why) when refused. */
+  async #insertChart(png) {
+    const state = this.controller.state;
+    const page3 = state.document?.pages[state.pageIndex];
+    if (!page3 || !this.#editable(state)) throw new Error("Open a .vsdx file to insert a chart.");
+    if (png.byteLength > VISIO_PICTURE_MAX_BYTES)
+      throw new Error("The chart is larger than the 8 MB picture limit.");
+    const token = this.controller.captureCreationToken(page3.id);
+    const command2 = visioPictureInsertCommand(page3, inspectVisioRasterImage(png), png);
+    await new Promise(
+      (resolve, reject) => this.run(async () => {
+        try {
+          await this.controller.applyCreationEdits([command2], token);
+          resolve();
+        } catch (error) {
+          reject(error);
+          throw error;
+        }
+      }, "Inserted chart.")
+    );
   }
   async #picture(file) {
     const state = this.controller.state;
@@ -14090,6 +14337,11 @@ var ViewerInsert = class {
       pictures.disabled = !editing || !page3;
       pictures.title = editing ? "Insert a PNG, JPEG or GIF picture from this device (up to 8 MB)." : "Open a .vsdx file to insert pictures.";
     }
+    const chart = button("chart");
+    if (chart) {
+      chart.disabled = !editing || !page3;
+      chart.title = editing ? "Insert a chart drawn from data you type or paste. It is placed as a picture." : "Open a .vsdx file to insert a chart.";
+    }
     for (const [name, label] of [
       ["link", "Link (Ctrl+K)"],
       ["ctx-hyperlink", "Hyperlink (Ctrl+K)"],
@@ -14100,6 +14352,8 @@ var ViewerInsert = class {
       control.disabled = !shape;
       control.title = shape ? label : `${label}: select one shape on an editable drawing.`;
     }
+    if (this.chart.dialog.open && (!state.edit.sourceAvailable || state.loading))
+      this.chart.close();
     for (const dialog of [this.link, this.tip]) {
       if (!dialog.dialog.open) continue;
       if (!state.edit.sourceAvailable || state.loading || this.controller.documentGeneration !== this.#target?.generation)
@@ -22860,6 +23114,7 @@ var VisioViewerElement = class extends BaseElement {
   #unsubscribe;
   #eventUnsubscribe;
   #disposed = false;
+  #screenTips = "descriptions";
   #suspended = false;
   #fontEvents;
   #fontsChanged = () => {
@@ -22952,14 +23207,23 @@ var VisioViewerElement = class extends BaseElement {
       }
     });
     const profileChanged = () => renderTitleBar(this.#titleBar, this.controller.state, this.#fileName, this.#profile.profile);
-    this.#profile = new ViewerProfile(this.#root, profileChanged, {
-      get: () => this.#dark() ? "dark" : this.statusBar,
-      set: (theme) => {
-        if (theme !== "dark") this.statusBar = theme;
-        if (theme === "dark" !== this.#dark())
-          this.#requestScheme(theme === "dark" ? "dark" : "light");
+    this.#profile = new ViewerProfile(
+      this.#root,
+      profileChanged,
+      {
+        get: () => this.#dark() ? "dark" : this.statusBar,
+        set: (theme) => {
+          if (theme !== "dark") this.statusBar = theme;
+          if (theme === "dark" !== this.#dark())
+            this.#requestScheme(theme === "dark" ? "dark" : "light");
+        }
+      },
+      (behaviour) => {
+        this.#screenTips = behaviour.screenTips;
+        applyScreenTips(this.#toolbar, this.#screenTips);
+        this.controller.undoLevels = behaviour.undoLevels;
       }
-    });
+    );
     this.#pointer = new ViewerPointerGestures(this.#viewport, this.controller, {
       active: () => this.#commands.tool === "pointer",
       announce: (message) => {
@@ -23291,10 +23555,12 @@ var VisioViewerElement = class extends BaseElement {
   /** The ribbon speaks the `locale` attribute, else `lang`, else the page's, else the browser's. */
   #localizeRibbon() {
     if (this.#disposed || !this.#overflow) return;
+    restoreScreenTips(this.#toolbar);
     localizeRibbon(
       this.#toolbar,
       this.getAttribute("locale") || this.lang || this.ownerDocument.documentElement.lang || navigator.language
     );
+    applyScreenTips(this.#toolbar, this.#screenTips);
     this.#overflow.refit();
   }
   connectedCallback() {

package/dist/xlsx/commands/insert.d.ts

@@ -1,6 +1,7 @@
 import { type ChartType } from 'ooxml-core/xlsx';
 import type { Command } from 'ooxml-core/xlsx/ui';
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
+/** The chart types of Insert Chart (shared with other products) with the ribbon glyph of each. */
 export declare const CHART_TYPES: ReadonlyArray<readonly [type: ChartType, label: string, glyph: string]>;
 /** Inserts a picture file at the active cell (scaled to at most 640 px wide, like Excel's fit). */
 export declare function insertPicture(ctx: EditorContext, file: File): Promise<void>;