@stocksharp/diagram 1.0.1 → 1.2.0

package/dist/ssdiagram.js

@@ -52,6 +52,7 @@ var SSDiagram = (() => {
     parseDiagramDocument: () => parseDiagramDocument,
     parseDiagramViewState: () => parseDiagramViewState,
     renderAll: () => renderAll,
+    renderDiagramSvg: () => renderDiagramSvg,
     renderFromInline: () => renderFromInline,
     renderFromSource: () => renderFromSource,
     renderScheme: () => renderScheme,
@@ -471,334 +472,6 @@ var SSDiagram = (() => {
     return value;
   }
 
-  // src/core/action-registry.ts
-  var DiagramActionRegistry = class {
-    constructor() {
-      this.actions = /* @__PURE__ */ new Map();
-    }
-    register(action) {
-      if (this.actions.has(action.id)) {
-        throw new Error(`Diagram action "${action.id}" is already registered.`);
-      }
-      this.actions.set(action.id, action);
-      return () => {
-        if (this.actions.get(action.id) === action) this.actions.delete(action.id);
-      };
-    }
-    /**
-     * Registers one action per id from a table keyed by TId, in key order.
-     * Because the table is a total Record, adding a member to TId without adding
-     * its action stops compiling instead of producing a command that silently
-     * does nothing.
-     */
-    registerAll(actions) {
-      const ids = Object.keys(actions);
-      const disposers = ids.map((id) => {
-        const action = actions[id];
-        return this.register({
-          id,
-          canExecute: (context) => action.canExecute(context),
-          execute: (context) => action.execute(context)
-        });
-      });
-      return () => disposers.forEach((dispose) => dispose());
-    }
-    get(id) {
-      return this.actions.get(id) ?? null;
-    }
-    states(context) {
-      return [...this.actions.values()].map((action) => ({
-        id: action.id,
-        enabled: action.canExecute(context)
-      }));
-    }
-    canExecute(id, context) {
-      return this.actions.get(id)?.canExecute(context) ?? false;
-    }
-    execute(id, context) {
-      const action = this.actions.get(id);
-      if (action === void 0 || !action.canExecute(context)) return false;
-      action.execute(context);
-      return true;
-    }
-  };
-
-  // src/core/history.ts
-  var DiagramCommandHistory = class {
-    constructor(listener) {
-      this.listener = listener;
-      this.undoCommands = [];
-      this.redoCommands = [];
-      this.transactions = [];
-      this.replaying = false;
-    }
-    get state() {
-      return {
-        canUndo: this.undoCommands.length > 0,
-        canRedo: this.redoCommands.length > 0,
-        undoDepth: this.undoCommands.length,
-        redoDepth: this.redoCommands.length,
-        undoLabel: this.undoCommands[this.undoCommands.length - 1]?.label ?? null,
-        redoLabel: this.redoCommands[this.redoCommands.length - 1]?.label ?? null
-      };
-    }
-    execute(command) {
-      if (this.replaying) {
-        command.execute();
-        return;
-      }
-      command.execute();
-      this.recordApplied(command);
-    }
-    /** Records a gesture that already changed the document, such as pointer drag. */
-    recordApplied(command) {
-      if (this.replaying) return;
-      const transaction = this.transactions[this.transactions.length - 1];
-      if (transaction !== void 0) {
-        transaction.commands.push(command);
-        return;
-      }
-      this.undoCommands.push(command);
-      this.redoCommands.length = 0;
-      this.notify();
-    }
-    transaction(label2, action) {
-      const frame = { label: label2, commands: [] };
-      this.transactions.push(frame);
-      try {
-        const result = action();
-        this.transactions.pop();
-        const command = compose(frame);
-        if (command !== null) this.recordApplied(command);
-        return result;
-      } catch (error) {
-        this.transactions.pop();
-        this.replay(() => {
-          for (const command of frame.commands.slice().reverse()) command.undo();
-        });
-        throw error;
-      }
-    }
-    assertNoOpenTransaction(operation) {
-      if (this.transactions.length > 0) {
-        throw new Error(`Cannot ${operation} command history inside a transaction.`);
-      }
-    }
-    undo() {
-      this.assertNoOpenTransaction("undo");
-      const command = this.undoCommands.pop();
-      if (command === void 0) return false;
-      try {
-        this.replay(() => command.undo());
-      } catch (error) {
-        this.undoCommands.push(command);
-        throw error;
-      }
-      this.redoCommands.push(command);
-      this.notify();
-      return true;
-    }
-    redo() {
-      this.assertNoOpenTransaction("redo");
-      const command = this.redoCommands.pop();
-      if (command === void 0) return false;
-      try {
-        this.replay(() => command.execute());
-      } catch (error) {
-        this.redoCommands.push(command);
-        throw error;
-      }
-      this.undoCommands.push(command);
-      this.notify();
-      return true;
-    }
-    clear() {
-      this.assertNoOpenTransaction("clear");
-      this.undoCommands.length = 0;
-      this.redoCommands.length = 0;
-      this.notify();
-    }
-    replay(action) {
-      const previous = this.replaying;
-      this.replaying = true;
-      try {
-        action();
-      } finally {
-        this.replaying = previous;
-      }
-    }
-    notify() {
-      this.listener?.(this.state);
-    }
-  };
-  function compose(frame) {
-    if (frame.commands.length === 0) return null;
-    if (frame.commands.length === 1) {
-      const command = frame.commands[0];
-      return frame.label === command.label ? command : {
-        label: frame.label,
-        execute: () => command.execute(),
-        undo: () => command.undo()
-      };
-    }
-    const commands = [...frame.commands];
-    return {
-      label: frame.label,
-      execute: () => {
-        for (const command of commands) command.execute();
-      },
-      undo: () => {
-        for (const command of commands.slice().reverse()) command.undo();
-      }
-    };
-  }
-
-  // src/core/state.ts
-  function createDiagramRuntimeState() {
-    return { activeNodeId: null, nodes: {}, globalError: null };
-  }
-  function cloneDiagramRuntimeState(state) {
-    return {
-      activeNodeId: state.activeNodeId,
-      globalError: state.globalError === null ? null : { ...state.globalError },
-      nodes: Object.fromEntries(Object.entries(state.nodes).map(([nodeId, node]) => [nodeId, {
-        active: node.active,
-        errors: cloneDiagramNodeErrors(node.errors),
-        ports: {
-          in: Object.fromEntries(Object.entries(node.ports.in).map(([portId, port]) => [portId, { ...port }])),
-          out: Object.fromEntries(Object.entries(node.ports.out).map(([portId, port]) => [portId, { ...port }]))
-        }
-      }]))
-    };
-  }
-  function createDiagramViewState() {
-    return { zoom: 1, panX: 0, panY: 0, overviewVisible: true };
-  }
-  function createDiagramSelection() {
-    return {
-      nodeIds: [],
-      linkIds: [],
-      port: null,
-      primaryNodeId: null,
-      primaryLinkId: null
-    };
-  }
-  function createDiagramPortRuntimeState() {
-    return {
-      active: false,
-      selected: false,
-      breakpoint: false,
-      breakpointActive: false,
-      value: null,
-      error: null
-    };
-  }
-  function createEditableDiagramPermissions() {
-    return {
-      select: true,
-      inspect: true,
-      copy: true,
-      moveNodes: true,
-      createLinks: true,
-      deleteSelection: true,
-      paste: true,
-      history: true
-    };
-  }
-  function createReadOnlyDiagramPermissions() {
-    return {
-      select: true,
-      inspect: true,
-      copy: true,
-      moveNodes: false,
-      createLinks: false,
-      deleteSelection: false,
-      paste: false,
-      history: false
-    };
-  }
-  function createDiagramNodeRuntimeState() {
-    return {
-      active: false,
-      errors: {},
-      ports: { in: {}, out: {} }
-    };
-  }
-  function cloneDiagramNodeErrors(errors) {
-    const result = {};
-    if (errors === void 0 || errors === null) return result;
-    if (errors.runtime !== void 0) result.runtime = { ...errors.runtime };
-    if (errors.load !== void 0) result.load = { ...errors.load };
-    return result;
-  }
-
-  // src/core/view-state.ts
-  var DIAGRAM_VIEW_STATE_VERSION = 1;
-  var DiagramViewStateError = class extends Error {
-    constructor(message, path = "$") {
-      super(`${path}: ${message}`);
-      this.path = path;
-      this.name = "DiagramViewStateError";
-    }
-  };
-  function createDiagramViewStateDocument(view = createDiagramViewState()) {
-    return {
-      version: DIAGRAM_VIEW_STATE_VERSION,
-      view: normalizeView(view)
-    };
-  }
-  function parseDiagramViewState(source) {
-    let value = source;
-    if (typeof source === "string") {
-      try {
-        value = JSON.parse(source);
-      } catch (error) {
-        const reason = error instanceof Error ? error.message : "invalid JSON";
-        throw new DiagramViewStateError(reason);
-      }
-    }
-    const root = requireObject2(value, "$");
-    const version = requireFiniteNumber2(root.version, "$.version");
-    if (version !== DIAGRAM_VIEW_STATE_VERSION) {
-      throw new DiagramViewStateError(`unsupported view-state version ${version}`, "$.version");
-    }
-    return normalizeView(requireObject2(root.view, "$.view"));
-  }
-  function serializeDiagramViewState(view, space) {
-    return JSON.stringify(createDiagramViewStateDocument(view), null, space);
-  }
-  function normalizeView(value) {
-    const view = requireObject2(value, "$.view");
-    const zoom = requireFiniteNumber2(view.zoom, "$.view.zoom");
-    if (zoom <= 0) throw new DiagramViewStateError("expected a positive number", "$.view.zoom");
-    return {
-      zoom,
-      panX: requireFiniteNumber2(view.panX, "$.view.panX"),
-      panY: requireFiniteNumber2(view.panY, "$.view.panY"),
-      overviewVisible: requireBoolean2(view.overviewVisible, "$.view.overviewVisible")
-    };
-  }
-  function requireObject2(value, path) {
-    if (typeof value !== "object" || value === null || Array.isArray(value)) {
-      throw new DiagramViewStateError("expected an object", path);
-    }
-    const prototype = Object.getPrototypeOf(value);
-    if (prototype !== Object.prototype && prototype !== null) {
-      throw new DiagramViewStateError("expected a plain object", path);
-    }
-    return value;
-  }
-  function requireFiniteNumber2(value, path) {
-    if (typeof value !== "number" || !Number.isFinite(value)) {
-      throw new DiagramViewStateError("expected a finite number", path);
-    }
-    return value;
-  }
-  function requireBoolean2(value, path) {
-    if (typeof value !== "boolean") throw new DiagramViewStateError("expected a boolean", path);
-    return value;
-  }
-
   // src/svg-surface.ts
   var IDENTITY = [1, 0, 0, 1, 0, 0];
   function multiply(m, n2) {
@@ -1123,6 +796,215 @@ var SSDiagram = (() => {
     }
   };
 
+  // src/core/history.ts
+  var DiagramCommandHistory = class {
+    constructor(listener) {
+      this.listener = listener;
+      this.undoCommands = [];
+      this.redoCommands = [];
+      this.transactions = [];
+      this.replaying = false;
+    }
+    get state() {
+      return {
+        canUndo: this.undoCommands.length > 0,
+        canRedo: this.redoCommands.length > 0,
+        undoDepth: this.undoCommands.length,
+        redoDepth: this.redoCommands.length,
+        undoLabel: this.undoCommands[this.undoCommands.length - 1]?.label ?? null,
+        redoLabel: this.redoCommands[this.redoCommands.length - 1]?.label ?? null
+      };
+    }
+    execute(command) {
+      if (this.replaying) {
+        command.execute();
+        return;
+      }
+      command.execute();
+      this.recordApplied(command);
+    }
+    /** Records a gesture that already changed the document, such as pointer drag. */
+    recordApplied(command) {
+      if (this.replaying) return;
+      const transaction = this.transactions[this.transactions.length - 1];
+      if (transaction !== void 0) {
+        transaction.commands.push(command);
+        return;
+      }
+      this.undoCommands.push(command);
+      this.redoCommands.length = 0;
+      this.notify();
+    }
+    transaction(label2, action) {
+      const frame = { label: label2, commands: [] };
+      this.transactions.push(frame);
+      try {
+        const result = action();
+        this.transactions.pop();
+        const command = compose(frame);
+        if (command !== null) this.recordApplied(command);
+        return result;
+      } catch (error) {
+        this.transactions.pop();
+        this.replay(() => {
+          for (const command of frame.commands.slice().reverse()) command.undo();
+        });
+        throw error;
+      }
+    }
+    assertNoOpenTransaction(operation) {
+      if (this.transactions.length > 0) {
+        throw new Error(`Cannot ${operation} command history inside a transaction.`);
+      }
+    }
+    undo() {
+      this.assertNoOpenTransaction("undo");
+      const command = this.undoCommands.pop();
+      if (command === void 0) return false;
+      try {
+        this.replay(() => command.undo());
+      } catch (error) {
+        this.undoCommands.push(command);
+        throw error;
+      }
+      this.redoCommands.push(command);
+      this.notify();
+      return true;
+    }
+    redo() {
+      this.assertNoOpenTransaction("redo");
+      const command = this.redoCommands.pop();
+      if (command === void 0) return false;
+      try {
+        this.replay(() => command.execute());
+      } catch (error) {
+        this.redoCommands.push(command);
+        throw error;
+      }
+      this.undoCommands.push(command);
+      this.notify();
+      return true;
+    }
+    clear() {
+      this.assertNoOpenTransaction("clear");
+      this.undoCommands.length = 0;
+      this.redoCommands.length = 0;
+      this.notify();
+    }
+    replay(action) {
+      const previous = this.replaying;
+      this.replaying = true;
+      try {
+        action();
+      } finally {
+        this.replaying = previous;
+      }
+    }
+    notify() {
+      this.listener?.(this.state);
+    }
+  };
+  function compose(frame) {
+    if (frame.commands.length === 0) return null;
+    if (frame.commands.length === 1) {
+      const command = frame.commands[0];
+      return frame.label === command.label ? command : {
+        label: frame.label,
+        execute: () => command.execute(),
+        undo: () => command.undo()
+      };
+    }
+    const commands = [...frame.commands];
+    return {
+      label: frame.label,
+      execute: () => {
+        for (const command of commands) command.execute();
+      },
+      undo: () => {
+        for (const command of commands.slice().reverse()) command.undo();
+      }
+    };
+  }
+
+  // src/core/state.ts
+  function createDiagramRuntimeState() {
+    return { activeNodeId: null, nodes: {}, globalError: null };
+  }
+  function cloneDiagramRuntimeState(state) {
+    return {
+      activeNodeId: state.activeNodeId,
+      globalError: state.globalError === null ? null : { ...state.globalError },
+      nodes: Object.fromEntries(Object.entries(state.nodes).map(([nodeId, node]) => [nodeId, {
+        active: node.active,
+        errors: cloneDiagramNodeErrors(node.errors),
+        ports: {
+          in: Object.fromEntries(Object.entries(node.ports.in).map(([portId, port]) => [portId, { ...port }])),
+          out: Object.fromEntries(Object.entries(node.ports.out).map(([portId, port]) => [portId, { ...port }]))
+        }
+      }]))
+    };
+  }
+  function createDiagramViewState() {
+    return { zoom: 1, panX: 0, panY: 0, overviewVisible: true };
+  }
+  function createDiagramSelection() {
+    return {
+      nodeIds: [],
+      linkIds: [],
+      port: null,
+      primaryNodeId: null,
+      primaryLinkId: null
+    };
+  }
+  function createDiagramPortRuntimeState() {
+    return {
+      active: false,
+      selected: false,
+      breakpoint: false,
+      breakpointActive: false,
+      value: null,
+      error: null
+    };
+  }
+  function createEditableDiagramPermissions() {
+    return {
+      select: true,
+      inspect: true,
+      copy: true,
+      moveNodes: true,
+      createLinks: true,
+      deleteSelection: true,
+      paste: true,
+      history: true
+    };
+  }
+  function createReadOnlyDiagramPermissions() {
+    return {
+      select: true,
+      inspect: true,
+      copy: true,
+      moveNodes: false,
+      createLinks: false,
+      deleteSelection: false,
+      paste: false,
+      history: false
+    };
+  }
+  function createDiagramNodeRuntimeState() {
+    return {
+      active: false,
+      errors: {},
+      ports: { in: {}, out: {} }
+    };
+  }
+  function cloneDiagramNodeErrors(errors) {
+    const result = {};
+    if (errors === void 0 || errors === null) return result;
+    if (errors.runtime !== void 0) result.runtime = { ...errors.runtime };
+    if (errors.load !== void 0) result.load = { ...errors.load };
+    return result;
+  }
+
   // src/canvas-renderer.ts
   var SCREEN_RENDER_OPTIONS = {
     grid: true,
@@ -4237,6 +4119,232 @@ ${runtime.error}`;
     return Math.hypot(px - cx, py - cy);
   }
 
+  // src/headless.ts
+  function createContext() {
+    const own = {
+      globalAlpha: 1,
+      measureText: (text) => ({ width: text.length * 7 })
+    };
+    return new Proxy(own, {
+      get: (target, property) => property in target ? target[property] : () => void 0,
+      set: (target, property, value) => {
+        target[property] = value;
+        return true;
+      }
+    });
+  }
+  var StubElement = class {
+    constructor() {
+      this.style = {};
+      this.className = "";
+      this.tabIndex = 0;
+      this.width = 0;
+      this.height = 0;
+      this.textContent = "";
+      this.children = [];
+      this.classList = { toggle: () => false, add: () => void 0, remove: () => void 0 };
+      this.context = createContext();
+    }
+    appendChild(child) {
+      this.children.push(child);
+      return child;
+    }
+    removeChild(child) {
+      const at = this.children.indexOf(child);
+      if (at >= 0) this.children.splice(at, 1);
+      return child;
+    }
+    remove() {
+    }
+    setAttribute() {
+    }
+    focus() {
+    }
+    addEventListener() {
+    }
+    removeEventListener() {
+    }
+    getContext() {
+      return this.context;
+    }
+    getBoundingClientRect() {
+      return { left: 0, top: 0, right: this.width, bottom: this.height, width: this.width, height: this.height, x: 0, y: 0, toJSON: () => ({}) };
+    }
+    get clientWidth() {
+      return this.width;
+    }
+    get clientHeight() {
+      return this.height;
+    }
+  };
+  var GLOBAL_KEYS = ["window", "document", "requestAnimationFrame", "cancelAnimationFrame", "Image", "getComputedStyle", "performance"];
+  function installGlobals() {
+    const target = globalThis;
+    if (target.document !== void 0)
+      return () => void 0;
+    const before = /* @__PURE__ */ new Map();
+    for (const key of GLOBAL_KEYS) before.set(key, target[key]);
+    const stubDocument = Object.assign(new StubElement(), {
+      documentElement: new StubElement(),
+      createElement: () => new StubElement()
+    });
+    Object.assign(target, {
+      window: Object.assign(new StubElement(), { devicePixelRatio: 1 }),
+      document: stubDocument,
+      requestAnimationFrame: () => 1,
+      cancelAnimationFrame: () => void 0,
+      Image: class {
+      },
+      getComputedStyle: () => ({ getPropertyValue: () => "" }),
+      // A host without a browser may have no clock either -- an embedded JS engine has none. The drawing
+      // reads it for animation, and a still picture has no animation to advance.
+      performance: globalThis.performance ?? { now: () => 0 }
+    });
+    return () => {
+      for (const [key, value] of before) {
+        if (value === void 0) delete target[key];
+        else target[key] = value;
+      }
+    };
+  }
+  function renderDiagramSvg(source, options = {}) {
+    const { hostWidth = 1200, hostHeight = 800, ...screenshot } = options;
+    const restore = installGlobals();
+    try {
+      const host = new StubElement();
+      host.width = hostWidth;
+      host.height = hostHeight;
+      const diagram = new Diagram({ host });
+      try {
+        diagram.loadDocument(parseDiagramDocument(source));
+        return diagram.takeSvg({ scope: "content", ...screenshot });
+      } finally {
+        diagram.destroy();
+      }
+    } finally {
+      restore();
+    }
+  }
+
+  // src/core/action-registry.ts
+  var DiagramActionRegistry = class {
+    constructor() {
+      this.actions = /* @__PURE__ */ new Map();
+    }
+    register(action) {
+      if (this.actions.has(action.id)) {
+        throw new Error(`Diagram action "${action.id}" is already registered.`);
+      }
+      this.actions.set(action.id, action);
+      return () => {
+        if (this.actions.get(action.id) === action) this.actions.delete(action.id);
+      };
+    }
+    /**
+     * Registers one action per id from a table keyed by TId, in key order.
+     * Because the table is a total Record, adding a member to TId without adding
+     * its action stops compiling instead of producing a command that silently
+     * does nothing.
+     */
+    registerAll(actions) {
+      const ids = Object.keys(actions);
+      const disposers = ids.map((id) => {
+        const action = actions[id];
+        return this.register({
+          id,
+          canExecute: (context) => action.canExecute(context),
+          execute: (context) => action.execute(context)
+        });
+      });
+      return () => disposers.forEach((dispose) => dispose());
+    }
+    get(id) {
+      return this.actions.get(id) ?? null;
+    }
+    states(context) {
+      return [...this.actions.values()].map((action) => ({
+        id: action.id,
+        enabled: action.canExecute(context)
+      }));
+    }
+    canExecute(id, context) {
+      return this.actions.get(id)?.canExecute(context) ?? false;
+    }
+    execute(id, context) {
+      const action = this.actions.get(id);
+      if (action === void 0 || !action.canExecute(context)) return false;
+      action.execute(context);
+      return true;
+    }
+  };
+
+  // src/core/view-state.ts
+  var DIAGRAM_VIEW_STATE_VERSION = 1;
+  var DiagramViewStateError = class extends Error {
+    constructor(message, path = "$") {
+      super(`${path}: ${message}`);
+      this.path = path;
+      this.name = "DiagramViewStateError";
+    }
+  };
+  function createDiagramViewStateDocument(view = createDiagramViewState()) {
+    return {
+      version: DIAGRAM_VIEW_STATE_VERSION,
+      view: normalizeView(view)
+    };
+  }
+  function parseDiagramViewState(source) {
+    let value = source;
+    if (typeof source === "string") {
+      try {
+        value = JSON.parse(source);
+      } catch (error) {
+        const reason = error instanceof Error ? error.message : "invalid JSON";
+        throw new DiagramViewStateError(reason);
+      }
+    }
+    const root = requireObject2(value, "$");
+    const version = requireFiniteNumber2(root.version, "$.version");
+    if (version !== DIAGRAM_VIEW_STATE_VERSION) {
+      throw new DiagramViewStateError(`unsupported view-state version ${version}`, "$.version");
+    }
+    return normalizeView(requireObject2(root.view, "$.view"));
+  }
+  function serializeDiagramViewState(view, space) {
+    return JSON.stringify(createDiagramViewStateDocument(view), null, space);
+  }
+  function normalizeView(value) {
+    const view = requireObject2(value, "$.view");
+    const zoom = requireFiniteNumber2(view.zoom, "$.view.zoom");
+    if (zoom <= 0) throw new DiagramViewStateError("expected a positive number", "$.view.zoom");
+    return {
+      zoom,
+      panX: requireFiniteNumber2(view.panX, "$.view.panX"),
+      panY: requireFiniteNumber2(view.panY, "$.view.panY"),
+      overviewVisible: requireBoolean2(view.overviewVisible, "$.view.overviewVisible")
+    };
+  }
+  function requireObject2(value, path) {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      throw new DiagramViewStateError("expected an object", path);
+    }
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype !== Object.prototype && prototype !== null) {
+      throw new DiagramViewStateError("expected a plain object", path);
+    }
+    return value;
+  }
+  function requireFiniteNumber2(value, path) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new DiagramViewStateError("expected a finite number", path);
+    }
+    return value;
+  }
+  function requireBoolean2(value, path) {
+    if (typeof value !== "boolean") throw new DiagramViewStateError("expected a boolean", path);
+    return value;
+  }
+
   // src/i18n.ts
   function t(key, fallback) {
     if (typeof window === "undefined") return fallback;
@@ -4735,6 +4843,8 @@ ${runtime.error}`;
   var StockSharpDiagram = class extends EventEmitter {
     constructor(options) {
       super();
+      // Built only where a host asked for it: a control nobody asked to save gets no button at all.
+      this.downloadButton = null;
       this.disposables = [];
       this.idCounter = 1;
       this.undoEnabled = true;
@@ -4744,6 +4854,8 @@ ${runtime.error}`;
       this.destroyed = false;
       this.fullscreen = false;
       this.fullscreenButtonVisible = true;
+      this.downloadButtonVisible = false;
+      this.downloadLabel = null;
       // null means the host never named the button, so its wording comes from the shared bundle.
       // Keeping the two apart is what lets an explicit label win while an untouched control still
       // follows the page's language instead of being stuck in English.
@@ -4766,6 +4878,8 @@ ${runtime.error}`;
       this.prepareFullscreenButtonHost();
       this.fullscreenButton = this.createFullscreenButton();
       this.updateFullscreenButton();
+      this.downloadLabel = options.downloadLabel ?? null;
+      this.setDownloadButtonVisible(options.showDownloadButton ?? false);
       this.setContextMenuEnabled(options.showContextMenu ?? true);
       this.canvas.setHistoryShortcutHandler((direction) => {
         if (direction === "undo") this.undo();
@@ -5002,6 +5116,28 @@ ${runtime.error}`;
     isFullscreen() {
       return this.fullscreen;
     }
+    /** Shows or hides the button that asks the host to save the diagram. */
+    setDownloadButtonVisible(visible) {
+      this.downloadButtonVisible = visible;
+      if (!visible) {
+        if (this.downloadButton === null) return;
+        this.downloadButton.hidden = true;
+        this.downloadButton.style.display = "none";
+        return;
+      }
+      this.downloadButton ?? (this.downloadButton = this.createDownloadButton());
+      this.updateDownloadButton();
+      this.downloadButton.hidden = false;
+      this.downloadButton.style.display = "inline-flex";
+    }
+    isDownloadButtonVisible() {
+      return this.downloadButtonVisible;
+    }
+    /** Text of the download button, for a host that renders in another language. */
+    setDownloadLabel(label2) {
+      this.downloadLabel = label2;
+      this.updateDownloadButton();
+    }
     setFullscreenButtonVisible(visible) {
       this.fullscreenButtonVisible = visible;
       this.fullscreenButton.hidden = !visible;
@@ -5287,6 +5423,49 @@ ${runtime.error}`;
       button.style.display = this.fullscreenButtonVisible ? "inline-flex" : "none";
       return button;
     }
+    createDownloadButton() {
+      const owner = this.div.ownerDocument ?? document;
+      const button = owner.createElement("button");
+      button.type = "button";
+      button.className = "ssdiagram-download-button";
+      button.setAttribute("data-ssdiagram-download-button", "");
+      Object.assign(button.style, {
+        position: "absolute",
+        top: "8px",
+        right: "46px",
+        zIndex: "4",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "30px",
+        height: "30px",
+        padding: "0",
+        border: "1px solid var(--ssdiagram-control-border, var(--t-border, #3a4250))",
+        borderRadius: "5px",
+        background: "var(--ssdiagram-control-background, var(--t-surface, rgba(18, 21, 28, 0.9)))",
+        color: "var(--ssdiagram-control-color, var(--t-text, #eaecef))",
+        boxSizing: "border-box",
+        cursor: "pointer",
+        opacity: "0.9"
+      });
+      const click = () => {
+        this.emit("exportRequested", { format: "document" });
+      };
+      button.addEventListener("click", click);
+      this.div.appendChild(button);
+      this.disposables.push(() => {
+        button.removeEventListener("click", click);
+        button.remove();
+      });
+      return button;
+    }
+    updateDownloadButton() {
+      if (this.downloadButton === null) return;
+      const label2 = this.downloadLabel ?? t("download", "Download");
+      this.downloadButton.title = label2;
+      this.downloadButton.setAttribute("aria-label", label2);
+      this.downloadButton.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M8 11l4 4 4-4M5 19h14"/></svg>';
+    }
     updateFullscreenButton() {
       const fullscreen = this.fullscreen;
       const labels = this.resolveFullscreenLabels();
@@ -6127,12 +6306,16 @@ ${runtime.error}`;
     div.classList.remove("ss-diagram-error");
     div.replaceChildren();
     const [enterLabel, exitLabel] = (div.dataset.diagramFullscreen ?? "").split("|");
+    const downloadLabel = div.dataset.diagramDownload;
+    const showDownloadButton = options.onExportRequested !== void 0;
     let diagram;
     try {
       diagram = new StockSharpDiagram({
         div,
         catalog,
-        ...enterLabel && exitLabel ? { fullscreenLabels: { enter: enterLabel, exit: exitLabel } } : {}
+        ...enterLabel && exitLabel ? { fullscreenLabels: { enter: enterLabel, exit: exitLabel } } : {},
+        ...showDownloadButton ? { showDownloadButton: true } : {},
+        ...downloadLabel ? { downloadLabel } : {}
       });
     } catch (error) {
       div.replaceChildren();
@@ -6179,6 +6362,10 @@ ${runtime.error}`;
     activeRenders.set(div, handle);
     connectedRenders.add(handle);
     ensureDisconnectedHostObserver();
+    if (options.onExportRequested !== void 0) {
+      const notifyHost = options.onExportRequested;
+      cleanups.push(diagram.on("exportRequested", (request) => notifyHost(request, handle)));
+    }
     if (options.onFullscreenRequested !== void 0) {
       const notifyHost = options.onFullscreenRequested;
       cleanups.push(diagram.on("fullscreenRequested", (request) => notifyHost(request, handle)));