Add export as image feature for visual designer (#19214)

## Summary

Add the ability to export the visual designer graph as an image (SVG,
PNG, or JPEG).

## Commits

| Commit | Description |
|--------|-------------|
| `ba7a552bc` | **Add graph export feature with SVG/PNG/JPEG support** |
| `3de9633c6` | Refactoring; code cleanup |
| `49bbc7d1e` | Run format command |
| `f2a697e3f` | Fix linting issues |
| `77b246724` | Use styled components |
| `7041d8c9d` | Set path alias |
| `c3463e4cd` | Add Copilot instructions and hooks |

## Review guidance

> **Reviewers: please focus your review on commit `ba7a552bc` (\"Add
graph export feature with SVG/PNG/JPEG support\") — it contains the only
functionality change.** The remaining commits are hardening engineering
work (code cleanup, formatting, linting fixes, refactoring to
styled-components, path alias setup, and adding Copilot
instructions/hooks) with no functionality changes.
###### Microsoft Reviewers: [Open in
CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/Azure/bicep/pull/19214)

Author: shenglol

src/vscode-bicep-ui/.prettierrc

@@ -1,13 +1,15 @@
-{
-  "printWidth": 120,
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
-  "importOrder": [
-    "<TYPES>^(node:)",
-    "<TYPES>",
-    "<TYPES>^[.]",
-    "",
-    "<BUILTIN_MODULES>",
-    "<THIRD_PARTY_MODULES>",
-    "^[./]"
-  ]
-}
+{
+  "printWidth": 120,
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "<TYPES>^(node:)",
+    "<TYPES>",
+    "<TYPES>^@/",
+    "<TYPES>^[.]",
+    "",
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "^@/",
+    "^[./]"
+  ]
+}

src/vscode-bicep-ui/apps/visual-designer/.github/hooks/lint-format.json

@@ -0,0 +1,28 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "event": "PostToolUse",
+        "type": "command",
+        "command": "npx prettier --write \"${filePath}\"",
+        "windows": "npx prettier --write \"${filePath}\"",
+        "timeout": 15,
+        "matchers": {
+          "toolName": "create_file|replace_string_in_file|multi_replace_string_in_file",
+          "filePath": "**/*.{ts,tsx,md,json}"
+        }
+      },
+      {
+        "event": "PostToolUse",
+        "type": "command",
+        "command": "npx eslint --fix \"${filePath}\"",
+        "windows": "npx eslint --fix \"${filePath}\"",
+        "timeout": 15,
+        "matchers": {
+          "toolName": "create_file|replace_string_in_file|multi_replace_string_in_file",
+          "filePath": "**/*.{ts,tsx}"
+        }
+      }
+    ]
+  }
+}

src/vscode-bicep-ui/apps/visual-designer/.github/instructions/react.instructions.md

@@ -0,0 +1,45 @@
+---
+applyTo: "src/**/*.tsx"
+description: "Use when writing or modifying React components, hooks, or JSX in the visual designer app."
+---
+
+# React Best Practices
+
+## Components
+
+- Use function components exclusively. No class components.
+- Export one primary component per file. Co-located helpers are fine.
+- Prefer named exports over default exports.
+- Add `aria-label` and `title` to interactive elements (buttons, inputs).
+
+## Hooks
+
+- Wrap event handlers and callbacks passed to children in `useCallback`.
+- Use `useMemo` only for genuinely expensive computations — don't over-memoize.
+- Extract shared logic into custom hooks (`use-*.ts`) co-located with the feature.
+- Keep hooks side-effect free during render; effects belong in `useEffect`.
+
+## Props & Types
+
+- Use `type` over `interface` for component props unless extending.
+- Import types using `import type` to enable proper tree-shaking.
+- Colocate types with the code that uses them; only extract to a `types.ts` when shared across files.
+
+## Performance
+
+- Avoid creating objects or arrays inline in JSX props (causes unnecessary re-renders).
+- Prefer `useAtomValue` / `useSetAtom` (Jotai) over `useAtom` to minimize subscriptions.
+- Wrap expensive subtrees in `<Suspense>` with a fallback when using async atoms.
+
+## File & Folder Naming
+
+- **Components**: PascalCase (`ControlBar.tsx`, `ExportOverlay.tsx`).
+- **Non-components** (hooks, utils, atoms, types): kebab-case (`use-fit-view.ts`, `capture-element.ts`, `atoms.ts`).
+- **Folders**: kebab-case (`pan-zoom/`, `export/`, `math/`).
+
+## File Organization
+
+- Copyright header: `// Copyright (c) Microsoft Corporation.` + `// Licensed under the MIT License.`
+- Imports: type imports first, then library imports, then local imports (handled by Prettier plugin).
+- Styled components above the component function.
+- Component function at the bottom of the file, exported.

src/vscode-bicep-ui/apps/visual-designer/.github/instructions/state-management.instructions.md

@@ -0,0 +1,34 @@
+---
+applyTo: "src/**/*.{ts,tsx}"
+description: "Use when working with shared state, atoms, Jotai, or state management patterns in the visual designer app."
+---
+
+# State Management (Jotai)
+
+## Core Rules
+
+- Use Jotai as the default for shared feature state.
+- Co-locate atoms with the feature they belong to.
+- Export feature atoms through the feature `index.ts` barrel.
+- Prefer small atoms over one large object atom.
+- Use derived atoms for view intent (e.g. `isExportCanvasCoverVisibleAtom`).
+- Use action atoms (`open*`, `close*`, `reset*`) when the action touches multiple atoms.
+- Use `useAtomValue` for reads and `useSetAtom` for writes to reduce accidental subscriptions.
+
+## Project Layout
+
+Core libraries: `src/lib/` (`graph/`, `messaging/`, `theming/`, `utils/`).
+Feature slices: `src/features/` (`controls/`, `export/`, `layout/`, `status/`, `visualization/`, `devtools/`).
+
+Per feature:
+
+- `feature/atoms.ts` — primary atoms, action atoms, derived atoms.
+- `feature/components/*` — use atoms directly where practical.
+- `feature/hooks/*` — orchestration logic that reacts to external events and writes atoms.
+
+## When NOT to Use Atoms
+
+- Purely presentational local toggles that never leave a component.
+- One-off temporary values with no cross-component relevance.
+- Expensive values better memoized from props inside one component.
+- Ephemeral typing state — keep as `useState` for in-progress input UX.

src/vscode-bicep-ui/apps/visual-designer/.github/instructions/styled-components.instructions.md

@@ -0,0 +1,28 @@
+---
+applyTo: "src/**/*.tsx"
+description: "Use when writing or modifying styled-components, CSS-in-JS, or component styling in TSX files."
+---
+
+# Styled-Components Conventions
+
+## Naming
+
+- Prefix styled components with `$`: `const $Wrapper = styled.div\`...\`;`.
+- Name describes purpose, not HTML element: `$Toolbar`, `$Separator`, not `$StyledDiv`.
+
+## Rules
+
+- Use styled-components for **all** static styles. Never use inline `style={{}}` for values known at build time.
+- For dynamic values computed at render time (positions, transforms, dimensions), use `.attrs()` to keep styles co-located and avoid CSS class regeneration:
+  ```tsx
+  const $Panel = styled.div.attrs<{ $x: number; $y: number }>(({ $x, $y }) => ({
+    style: { transform: `translate(${$x}px, ${$y}px)` },
+  }))`
+    position: absolute;
+  `;
+  ```
+- Do not use bare inline `style={{}}` in JSX. Prefer `.attrs()` to keep all styling within the styled component definition.
+- Access theme values via the `${({ theme }) => ...}` interpolation, not `useTheme()` + inline style.
+- Extend existing styled components with `styled(Base)` instead of duplicating CSS.
+- Keep styled component definitions in the same file as the React component that uses them, above the component function.
+- Do not use `className` props or external CSS files.

src/vscode-bicep-ui/apps/visual-designer/package.json

@@ -21,6 +21,8 @@
     "@react-hook/resize-observer": "^2.0.2",
     "@vscode-bicep-ui/components": "^0.0.0",
     "@vscode-bicep-ui/messaging": "^0.0.0",
+    "@vscode-elements/elements": "^2.4.0",
+    "@vscode-elements/react-elements": "^1.15.0",
     "elkjs": "^0.11.0",
     "html-to-image": "^1.11.13",
     "jotai": "^2.13.1",

src/vscode-bicep-ui/apps/visual-designer/src/App.tsx

@@ -2,27 +2,37 @@
 // Licensed under the MIT License.
 
 import type { ComponentType } from "react";
-import type { NodeKind } from "./features/graph-engine";
+import type { NodeKind } from "./lib/graph";
+import type { DeploymentGraphPayload } from "./lib/messaging";
 
 import { PanZoomProvider, useGetPanZoomDimensions } from "@vscode-bicep-ui/components";
-import { WebviewMessageChannelProvider, useWebviewMessageChannel, useWebviewNotification } from "@vscode-bicep-ui/messaging";
-import { getDefaultStore } from "jotai";
+import {
+  useWebviewMessageChannel,
+  useWebviewNotification,
+  WebviewMessageChannelProvider,
+} from "@vscode-bicep-ui/messaging";
+import { getDefaultStore, useAtomValue, useSetAtom } from "jotai";
 import { Suspense, useCallback, useEffect } from "react";
 import { styled, ThemeProvider } from "styled-components";
-import { GlobalStyle } from "./GlobalStyle";
-import { useTheme } from "./theming/use-theme";
-import { GraphControlBar } from "./components/GraphControlBar";
-import { StatusBar } from "./components/StatusBar";
-import { ModuleDeclaration, ResourceDeclaration } from "./features/visualization";
-import { nodeConfigAtom, Canvas, Graph } from "./features/graph-engine";
+import { ControlBar } from "./features/controls";
 import { loadDevAppShell } from "./features/devtools";
-import { useAutoLayout } from "./features/layout";
-import { useApplyDeploymentGraph } from "./features/messaging";
 import {
-  DEPLOYMENT_GRAPH_NOTIFICATION,
-  READY_NOTIFICATION,
-  type DeploymentGraphPayload,
-} from "./messages";
+  effectiveExportThemeAtom,
+  ExportAreaCover,
+  ExportAreaPreview,
+  exportCanvasElementAtom,
+  exportFileStemAtom,
+  ExportOverlay,
+  isExportCanvasCoverVisibleAtom,
+  isExportPreviewVisibleAtom,
+} from "./features/export";
+import { useAutoLayout } from "./features/layout";
+import { StatusBar } from "./features/status";
+import { ModuleDeclaration, ResourceDeclaration } from "./features/visualization";
+import { GlobalStyle } from "./GlobalStyle";
+import { Canvas, Graph, nodeConfigAtom } from "./lib/graph";
+import { DEPLOYMENT_GRAPH_NOTIFICATION, READY_NOTIFICATION, useApplyDeploymentGraph } from "./lib/messaging";
+import { useTheme } from "./lib/theming";
 
 const DevAppShell = loadDevAppShell();
 
@@ -36,6 +46,18 @@ const $ControlBarContainer = styled.div`
   z-index: 100;
 `;
 
+const $CanvasWrapper = styled.div`
+  position: absolute;
+  inset: 0;
+`;
+
+function deriveExportFileStem(documentPath?: string, documentFileName?: string): string {
+  const fileName = (documentFileName || documentPath || "").split(/[\\/]/).pop() ?? "";
+  const stem = fileName.replace(/\.[^.]+$/, "").trim();
+
+  return stem || "bicep-graph";
+}
+
 store.set(nodeConfigAtom, {
   ...nodeConfig,
   padding: {
@@ -67,6 +89,9 @@ function GraphContainer() {
   }, [getPanZoomDimensions]);
   const applyGraph = useApplyDeploymentGraph(getViewportCenter);
   const messageChannel = useWebviewMessageChannel();
+  const exportTheme = useAtomValue(effectiveExportThemeAtom);
+  const setExportFileStem = useSetAtom(exportFileStemAtom);
+  const setExportCanvasElement = useSetAtom(exportCanvasElementAtom);
 
   // Send READY notification on mount
   useEffect(() => {
@@ -82,25 +107,66 @@ function GraphContainer() {
       (params: unknown) => {
         const payload = params as DeploymentGraphPayload;
         applyGraph(payload.deploymentGraph);
+        setExportFileStem(deriveExportFileStem(payload.documentPath, payload.documentFileName));
       },
-      [applyGraph],
+      [applyGraph, setExportFileStem],
     ),
   );
 
   useAutoLayout();
 
+  const canvasTheme = exportTheme;
+
+  const handleCanvasRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      setExportCanvasElement(element);
+    },
+    [setExportCanvasElement],
+  );
+
   return (
     <>
       <$ControlBarContainer>
-        <GraphControlBar />
+        <ControlBar />
       </$ControlBarContainer>
-      <Canvas>
-        <Graph />
-      </Canvas>
+      <ExportUILayer />
+      <ThemeProvider theme={canvasTheme}>
+        <$CanvasWrapper ref={handleCanvasRef}>
+          <Canvas>
+            <ExportCanvasCoverLayer />
+            <Graph />
+          </Canvas>
+        </$CanvasWrapper>
+      </ThemeProvider>
     </>
   );
 }
 
+function ExportUILayer() {
+  const isExportPreviewVisible = useAtomValue(isExportPreviewVisibleAtom);
+
+  if (!isExportPreviewVisible) {
+    return null;
+  }
+
+  return (
+    <>
+      <ExportOverlay />
+      <ExportAreaPreview />
+    </>
+  );
+}
+
+function ExportCanvasCoverLayer() {
+  const isExportCanvasCoverVisible = useAtomValue(isExportCanvasCoverVisibleAtom);
+
+  if (!isExportCanvasCoverVisible) {
+    return null;
+  }
+
+  return <ExportAreaCover />;
+}
+
 const $AppContainer = styled.div`
   flex: 1 1 auto;
   position: relative;