ooxml-ui 0.31.0 → 1.1.0

package/dist/visio.js

@@ -1,11 +1,12 @@
-import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-2QW4QE56.js';
-import { getIcon, registerIcon } from './chunk-HZ422LTR.js';
-import { definePresence } from './chunk-OXKWNNNJ.js';
-import './chunk-ZV2Z4IWH.js';
+import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-M5DTJSOV.js';
+import { getIcon, registerIcon } from './chunk-BOX43CZD.js';
+import { definePresence } from './chunk-3FPW7M6U.js';
+import './chunk-USDLALB5.js';
 import './chunk-JFJXBYRD.js';
-import { FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_EDIT_STATE, assertViewableDocument, indexDocumentText, searchDocumentText, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, composeVisioTransform, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, propertyKeys, TEXT_SEARCH_LIMITS, isEditCancellation, visioPageInsertCommand, textSearchStatus, visioFillPatternTransform, visioRenderedGradientStops, visioPageEditToDrawing } from 'ooxml-core/visio/ui';
+import { FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_EDIT_STATE, assertViewableDocument, indexDocumentText, searchDocumentText, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, composeVisioTransform, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, propertyKeys, TEXT_SEARCH_LIMITS, isEditCancellation, visioPageInsertCommand, visioQuarterTurnCommand, visioLocalRotationShape, visioStraightLineHandles, visioPageEditToDrawing, textSearchStatus, visioRotationPreviewTransform, visioFillPatternTransform, visioRenderedGradientStops, visioStrokeGradient, visioNextShapeId } from 'ooxml-core/visio/ui';
 export { TEXT_SEARCH_LIMITS, compatibilityNotes, compatibilityText, demoDocument, eventKeys, propertyKeys } from 'ooxml-core/visio/ui';
 import { VISIO_VISIBILITY_LIMITS, loadVisio, getVisioPageLayers, resolveVisioPageVisibility, visioFilledArrow, layoutVisioFilledArrowLine, visioOpenArrowPath } from 'ooxml-core/visio';
+import { resolveRotateHandlePlacement, createRotationDrag } from 'ooxml-core/geometry';
 
 function createWorkerEditor(factory, timeoutMs = 2e4) {
   const create = (() => {
@@ -1043,10 +1044,10 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 var backstage_default = "/* Visio's File tab and backstage. */\n:host {\n	position: relative;\n}\n/* The shared office-ui-backstage draws the File column; these style Visio's page content. */\n.backstage {\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n}\n.backstage-page h1 {\n	margin: 0 0 24px;\n	font-size: 34px;\n	font-weight: 300;\n}\n.backstage-page h2 {\n	margin: 20px 0 8px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.backstage-file {\n	margin-top: 0 !important;\n	font-size: 20px !important;\n	font-weight: 400 !important;\n	overflow-wrap: anywhere;\n}\n.backstage-facts {\n	display: grid;\n	grid-template-columns: max-content 1fr;\n	gap: 8px 24px;\n	max-width: 520px;\n	margin: 0;\n	font-size: 13px;\n}\n.backstage-facts dt {\n	color: var(--_vv-muted);\n}\n.backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.backstage-action {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n	width: min(420px, 100%);\n	min-height: 64px;\n	margin: 0 0 10px;\n	padding: 10px 16px;\n	text-align: left;\n	background: var(--_vv-surface);\n}\n.backstage-action strong {\n	font-size: 14px;\n	font-weight: 600;\n}\n.backstage-action span,\n.backstage-muted,\n.backstage-note-count {\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n.backstage-templates {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.backstage-templates .backstage-action,\n.backstage-templates ::slotted(*) {\n	width: 200px;\n	min-height: 120px;\n}\n/* Account: the shared profile editor, then Visio's product information. */\n.backstage-page office-ui-account {\n	max-width: 560px;\n}\n.backstage-product {\n	margin-top: 24px;\n}\n/* Share with people: a live session between windows of this browser. */\n.share-panel {\n	max-width: 560px;\n	margin-bottom: 16px;\n}\n.share-panel h2 {\n	margin-top: 0 !important;\n}\n.share-field {\n	display: grid;\n	gap: 4px;\n	max-width: 320px;\n	margin: 12px 0;\n	font-size: 13px;\n}\n.share-room {\n	min-height: 30px;\n	padding: 2px 8px;\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n	background: var(--_vv-surface);\n	color: inherit;\n	font: inherit;\n}\n.share-buttons button {\n	min-height: 32px;\n	padding: 0 16px;\n}\n.share-buttons button[hidden] {\n	display: none;\n}\n.share-status {\n	min-height: 20px;\n	font-size: 13px;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/canvas.css?raw
-var canvas_default = "/*\n * Drawing canvas focus. SVG outlines are drawn in drawing units (inches here), so a browser\n * focus ring on a shape becomes a page-sized blob. Shapes show focus with a dashed accent\n * stroke instead, only for keyboard focus; selection keeps its solid accent stroke.\n */\n.paper [data-shape-id]:focus,\n.paper [data-shape-id]:focus-visible {\n	outline: none;\n}\n.paper [data-shape-id]:focus-visible > [data-geometry] {\n	stroke: var(--vv-focus, var(--_vv-accent)) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n";
+var canvas_default = "/*\n * Drawing canvas focus. SVG outlines are drawn in drawing units (inches here), so a browser\n * focus ring on a shape becomes a page-sized blob. Shapes show focus with a dashed accent\n * stroke instead, only for keyboard focus; selection keeps its solid accent stroke.\n */\n.paper [data-shape-id]:focus,\n.paper [data-shape-id]:focus-visible {\n	outline: none;\n}\n.paper [data-shape-id]:focus-visible > [data-geometry] {\n	stroke: var(--vv-focus, var(--_vv-accent)) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n\n.paper [data-line-endpoint],\n.rotation-overlay [data-rotation-handle] {\n	fill: var(--_vv-accent);\n	stroke: white;\n	stroke-width: 1.5px;\n	cursor: crosshair;\n	touch-action: none;\n	pointer-events: all;\n}\n.paper .endpoint-preview,\n.paper .rotation-preview,\n.rotation-overlay .rotation-stem {\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 5 3;\n	pointer-events: none;\n}\n\n.rotation-overlay {\n	position: absolute;\n	z-index: 1;\n	pointer-events: none;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/ribbon.css?raw
-var ribbon_default = "/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. Viewer theme tokens feed the\n * shared --office-* tokens, so host themes still apply. Loaded after the legacy styles.ts.\n */\n:host {\n	--office-foreground: var(--_vv-ink);\n	--office-muted-foreground: var(--_vv-muted);\n	--office-background: var(--_vv-surface);\n	--office-surface: var(--_vv-accent-soft);\n	--office-border: var(--_vv-border);\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n	--office-ring: var(--vv-focus, var(--_vv-accent));\n	--office-font: 'Segoe UI', Arial, sans-serif;\n}\n\n/* Tab row: Quick Access Toolbar, then Visio's tabs. */\n.ribbon-head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: 0;\n	padding: 0 6px;\n	border-right: 1px solid var(--_vv-border);\n}\n.qat office-ui-button {\n	--office-target-size: 30px;\n}\n.ribbon-head .ribbon-tabs {\n	flex: 0 1 auto;\n	min-width: 0;\n	height: 36px;\n	border-bottom: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n.ribbon-head .ribbon-tabs button {\n	flex: none;\n	min-height: 35px;\n	padding: 6px 12px;\n	font-size: 13px;\n}\n\n/* Panels: groups of large commands and three-row stacks, as dense as Visio's. */\n.ribbon-content {\n	min-height: 96px;\n	padding: 2px 2px 0;\n}\n.ribbon-row {\n	display: flex;\n	flex-wrap: nowrap;\n	align-items: stretch;\n	gap: 0;\n	padding: 0;\n	border: 0;\n	background: transparent;\n}\n.ribbon-row office-ui-ribbon-group,\n.tools-content office-ui-ribbon-group {\n	min-width: 0;\n}\noffice-ui-ribbon-group office-ui-button,\noffice-ui-ribbon-group office-ui-menu-button {\n	--office-target-size: 24px;\n}\noffice-ui-ribbon-group [data-size='large'] {\n	--office-target-size: 30px;\n}\noffice-ui-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 66px;\n	padding: 2px 6px;\n	font-size: 12px;\n}\noffice-ui-menu-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 50px;\n	font-size: 12px;\n}\noffice-ui-ribbon-group [data-size='small']::part(button) {\n	justify-content: flex-start;\n	font-size: 12px;\n}\noffice-ui-ribbon-stack:not([orientation]) {\n	justify-content: flex-start;\n	padding-top: 2px;\n}\noffice-ui-ribbon-stack:not([orientation]) > * {\n	min-height: 24px;\n}\noffice-ui-ribbon-group > office-ui-ribbon-stack > office-ui-ribbon-stack[orientation] {\n	min-height: 32px;\n}\noffice-ui-select[data-combo] {\n	--office-target-size: 24px;\n}\noffice-ui-menu-button[data-active]::part(button) {\n	background: var(--_vv-accent-soft);\n	box-shadow: inset 0 0 0 1px var(--_vv-accent);\n}\n[data-unsupported] {\n	cursor: not-allowed;\n}\n.ribbon-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	min-height: 24px;\n	padding: 0 6px;\n	font-size: 12px;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-check[data-unsupported] {\n	color: var(--_vv-muted);\n	opacity: 0.6;\n}\n.ribbon-hint {\n	display: none;\n}\n\n/* Drawing window with optional rulers. */\n.canvas-area {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n	grid-template-columns: 0 1fr;\n	grid-template-rows: 0 1fr;\n}\n.canvas-area[data-ruler='true'] {\n	grid-template-columns: 18px 1fr;\n	grid-template-rows: 18px 1fr;\n}\n.canvas-area > .viewport {\n	grid-column: 2;\n	grid-row: 2;\n}\n.ruler,\n.ruler-corner {\n	display: none;\n	background: var(--_vv-surface);\n}\n.canvas-area[data-ruler='true'] > .ruler,\n.canvas-area[data-ruler='true'] > .ruler-corner {\n	display: block;\n}\n.ruler-corner {\n	grid-column: 1;\n	grid-row: 1;\n	border-right: 1px solid var(--_vv-border);\n	border-bottom: 1px solid var(--_vv-border);\n}\n/* The shared office-ui-ruler draws ticks, labels and its own edge. */\n.ruler-h {\n	grid-column: 2;\n	grid-row: 1;\n}\n.ruler-v {\n	grid-column: 1;\n	grid-row: 2;\n}\n\n.page-bar {\n	display: flex;\n	flex: none;\n	align-items: stretch;\n	min-width: 0;\n	border-top: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.page-bar office-ui-menu-button {\n	--office-target-size: 28px;\n	flex: none;\n	padding: 0 2px;\n}\n.page-tabs {\n	flex: 1;\n	min-width: 0;\n	border-top: 0;\n}\noffice-ui-status-bar.status {\n	gap: 16px;\n	min-height: 29px;\n	padding: 0 8px 0 12px;\n	font-size: 11px;\n	background: var(--_vv-surface);\n	color: var(--_vv-muted);\n}\noffice-ui-status-item[value=''] {\n	display: none;\n}\noffice-ui-status-item[data-page-status] {\n	color: var(--_vv-ink);\n}\n.status-message {\n	flex: 1;\n	min-width: 0;\n}\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='rectangle'] {\n	touch-action: none;\n}\n.draw-preview {\n	fill: var(--_vv-accent-soft);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\n	pointer-events: none;\n}\n.viewport[data-grid='true'] .paper {\n	--_vv-grid-minor: rgb(0 0 0 / 7%);\n	--_vv-grid-major: rgb(0 0 0 / 16%);\n	background-image:\n		linear-gradient(to right, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to right, var(--_vv-grid-minor) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-minor) 1px, transparent 1px);\n	background-size:\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4);\n	background-position: left bottom;\n}\n:host(:fullscreen) {\n	width: 100vw;\n	height: 100vh;\n}\n\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.qat office-ui-button {\n		--office-target-size: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\n	}\n	office-ui-status-bar.status {\n		gap: 4px;\n		min-height: 48px;\n	}\n	office-ui-status-bar .notes-strip,\n	office-ui-status-bar .status-message,\n	office-ui-status-item[data-shape-status],\n	office-ui-status-item[data-page-status] {\n		display: none;\n	}\n	.zoom-controls {\n		flex: 1;\n		min-width: 0;\n		--office-zoom-slider-width: 0;\n	}\n}\n\n/* Visio's Tell me box sits right after the tabs. */\n.tell-me {\n	flex: 0 1 280px;\n	min-width: 140px;\n	margin: 0 8px;\n	--office-target-size: 28px;\n}\n.presentation-mode {\n	--office-target-size: 24px;\n}\n@media (max-width: 760px) {\n	.tell-me {\n		display: none;\n	}\n}\n";
+var ribbon_default = "/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. Viewer theme tokens feed the\n * shared --office-* tokens, so host themes still apply. Loaded after the legacy styles.ts.\n */\n:host {\n	--office-foreground: var(--_vv-ink);\n	--office-muted-foreground: var(--_vv-muted);\n	--office-background: var(--_vv-surface);\n	--office-surface: var(--_vv-accent-soft);\n	--office-border: var(--_vv-border);\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n	--office-ring: var(--vv-focus, var(--_vv-accent));\n	--office-font: 'Segoe UI', Arial, sans-serif;\n}\n\n/* Tab row: Quick Access Toolbar, then Visio's tabs. */\n.ribbon-head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: 0;\n	padding: 0 6px;\n	border-right: 1px solid var(--_vv-border);\n}\n.qat office-ui-button {\n	--office-target-size: 30px;\n}\n.ribbon-head .ribbon-tabs {\n	flex: 0 1 auto;\n	min-width: 0;\n	height: 36px;\n	border-bottom: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n.ribbon-head .ribbon-tabs button {\n	flex: none;\n	min-height: 35px;\n	padding: 6px 12px;\n	font-size: 13px;\n}\n\n/* Panels: groups of large commands and three-row stacks, as dense as Visio's. */\n.ribbon-content {\n	min-height: 96px;\n	padding: 2px 2px 0;\n}\n.ribbon-row {\n	display: flex;\n	flex-wrap: nowrap;\n	align-items: stretch;\n	gap: 0;\n	padding: 0;\n	border: 0;\n	background: transparent;\n}\n.ribbon-row office-ui-ribbon-group,\n.tools-content office-ui-ribbon-group {\n	min-width: 0;\n}\noffice-ui-ribbon-group office-ui-button,\noffice-ui-ribbon-group office-ui-menu-button {\n	--office-target-size: 24px;\n}\noffice-ui-ribbon-group [data-size='large'] {\n	--office-target-size: 30px;\n}\noffice-ui-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 66px;\n	padding: 2px 6px;\n	font-size: 12px;\n}\noffice-ui-menu-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 50px;\n	font-size: 12px;\n}\noffice-ui-ribbon-group [data-size='small']::part(button) {\n	justify-content: flex-start;\n	font-size: 12px;\n}\noffice-ui-ribbon-stack:not([orientation]) {\n	justify-content: flex-start;\n	padding-top: 2px;\n}\noffice-ui-ribbon-stack:not([orientation]) > * {\n	min-height: 24px;\n}\noffice-ui-ribbon-group > office-ui-ribbon-stack > office-ui-ribbon-stack[orientation] {\n	min-height: 32px;\n}\noffice-ui-select[data-combo] {\n	--office-target-size: 24px;\n}\noffice-ui-menu-button[data-active]::part(button) {\n	background: var(--_vv-accent-soft);\n	box-shadow: inset 0 0 0 1px var(--_vv-accent);\n}\n[data-unsupported] {\n	cursor: not-allowed;\n}\n.ribbon-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	min-height: 24px;\n	padding: 0 6px;\n	font-size: 12px;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-check[data-unsupported] {\n	color: var(--_vv-muted);\n	opacity: 0.6;\n}\n.ribbon-hint {\n	display: none;\n}\n\n/* Drawing window with optional rulers. */\n.canvas-area {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n	grid-template-columns: 0 1fr;\n	grid-template-rows: 0 1fr;\n}\n.canvas-area[data-ruler='true'] {\n	grid-template-columns: 18px 1fr;\n	grid-template-rows: 18px 1fr;\n}\n.canvas-area > .viewport {\n	grid-column: 2;\n	grid-row: 2;\n}\n.ruler,\n.ruler-corner {\n	display: none;\n	background: var(--_vv-surface);\n}\n.canvas-area[data-ruler='true'] > .ruler,\n.canvas-area[data-ruler='true'] > .ruler-corner {\n	display: block;\n}\n.ruler-corner {\n	grid-column: 1;\n	grid-row: 1;\n	border-right: 1px solid var(--_vv-border);\n	border-bottom: 1px solid var(--_vv-border);\n}\n/* The shared office-ui-ruler draws ticks, labels and its own edge. */\n.ruler-h {\n	grid-column: 2;\n	grid-row: 1;\n}\n.ruler-v {\n	grid-column: 1;\n	grid-row: 2;\n}\n\n.page-bar {\n	display: flex;\n	flex: none;\n	align-items: stretch;\n	min-width: 0;\n	border-top: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.page-bar office-ui-menu-button {\n	--office-target-size: 28px;\n	flex: none;\n	padding: 0 2px;\n}\n.page-tabs {\n	flex: 1;\n	min-width: 0;\n	border-top: 0;\n}\noffice-ui-status-bar.status {\n	gap: 16px;\n	min-height: 29px;\n	padding: 0 8px 0 12px;\n	font-size: 11px;\n	background: var(--_vv-surface);\n	color: var(--_vv-muted);\n}\noffice-ui-status-item[value=''] {\n	display: none;\n}\noffice-ui-status-item[data-page-status] {\n	color: var(--_vv-ink);\n}\n.status-message {\n	flex: 1;\n	min-width: 0;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='ellipse'] .paper [data-shape-id],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id],\n.viewport[data-tool='line'],\n.viewport[data-tool='line'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'] {\n	touch-action: none;\n}\n.draw-preview {\n	fill: var(--_vv-accent-soft);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\n	pointer-events: none;\n}\n.viewport[data-grid='true'] .paper {\n	--_vv-grid-minor: rgb(0 0 0 / 7%);\n	--_vv-grid-major: rgb(0 0 0 / 16%);\n	background-image:\n		linear-gradient(to right, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to right, var(--_vv-grid-minor) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-minor) 1px, transparent 1px);\n	background-size:\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4);\n	background-position: left bottom;\n}\n:host(:fullscreen) {\n	width: 100vw;\n	height: 100vh;\n}\n\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.qat office-ui-button {\n		--office-target-size: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\n	}\n	office-ui-status-bar.status {\n		gap: 4px;\n		min-height: 48px;\n	}\n	office-ui-status-bar .notes-strip,\n	office-ui-status-bar .status-message,\n	office-ui-status-item[data-shape-status],\n	office-ui-status-item[data-page-status] {\n		display: none;\n	}\n	.zoom-controls {\n		flex: 1;\n		min-width: 0;\n		--office-zoom-slider-width: 0;\n	}\n}\n\n/* Visio's Tell me box sits right after the tabs. */\n.tell-me {\n	flex: 0 1 280px;\n	min-width: 140px;\n	margin: 0 8px;\n	--office-target-size: 28px;\n}\n.presentation-mode {\n	--office-target-size: 24px;\n}\n@media (max-width: 760px) {\n	.tell-me {\n		display: none;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/shapes.css?raw
 var shapes_default = "/* Visio's Shapes window: stencil views, More/Quick Shapes rows and a two-column master grid. */\n.shapes-pane {\n	display: flex;\n	flex: 0 0 232px;\n	flex-direction: column;\n	width: 232px;\n	min-width: 0;\n	overflow: hidden;\n	border-right: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.shapes-pane .pane-heading {\n	height: 42px;\n	font-size: 18px;\n	font-weight: 400;\n	color: var(--_vv-accent);\n}\n.pane-collapse {\n	min-height: 28px;\n	width: 28px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n	font-size: 18px;\n	line-height: 1;\n}\n.shapes-views {\n	display: flex;\n	gap: 14px;\n	padding: 4px 12px 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.shapes-views button {\n	position: relative;\n	min-height: 28px;\n	padding: 2px 0 6px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--_vv-muted);\n	font-size: 11px;\n	font-weight: 600;\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n.shapes-views button[aria-selected='true'] {\n	color: var(--_vv-ink);\n}\n.shapes-views button[aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 -1px;\n	height: 2px;\n	background: var(--_vv-accent);\n}\n#shapes-stencils,\n#shapes-search {\n	flex: 1;\n	min-height: 0;\n	overflow: auto;\n	padding: 4px 0 8px;\n}\n.shapes-row {\n	display: flex;\n	align-items: center;\n	width: 100%;\n	min-height: 30px;\n	padding: 0 12px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	font-size: 12px;\n	text-align: left;\n}\n.shapes-row::after {\n	content: '\u203A';\n	margin-left: auto;\n	font-size: 15px;\n}\n.stencil-title {\n	margin: 2px 0;\n	padding: 6px 12px;\n	border-left: 3px solid var(--_vv-accent);\n	background: var(--_vv-accent-soft);\n	font-size: 12px;\n	font-weight: 600;\n}\n.masters {\n	display: grid;\n	grid-template-columns: 1fr 1fr;\n	gap: 2px;\n	margin: 0;\n	padding: 4px 6px;\n	list-style: none;\n}\n.masters li[hidden] {\n	display: none;\n}\n.master {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	width: 100%;\n	min-height: 40px;\n	padding: 4px 6px;\n	border-color: transparent;\n	background: transparent;\n	font-size: 11px;\n	line-height: 1.2;\n	text-align: left;\n	cursor: grab;\n}\n.master svg {\n	flex: none;\n	width: 28px;\n	height: 28px;\n	fill: var(--_vv-surface);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.2;\n	stroke-linejoin: round;\n}\n.master[data-unsupported] {\n	cursor: not-allowed;\n	opacity: 0.45;\n}\n.master[data-unsupported]:hover {\n	border-color: transparent;\n	background: transparent;\n}\n.shapes-search-field {\n	display: block;\n	width: calc(100% - 24px);\n	margin: 6px 12px;\n}\n.shapes-empty {\n	margin: 8px 12px;\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n@media (max-width: 760px) {\n	.shapes-pane {\n		position: absolute;\n		inset: 0 auto 0 0;\n		z-index: 3;\n		width: min(260px, 100%);\n		box-shadow: 8px 0 24px #0002;\n	}\n	.master {\n		min-height: 44px;\n	}\n}\n.shapes-strip {\n	display: flex;\n	flex: 0 0 28px;\n	flex-direction: column;\n	align-items: center;\n	gap: 10px;\n	width: 28px;\n	min-width: 28px;\n	padding: 8px 0;\n	border: 0;\n	border-right: 1px solid var(--_vv-border);\n	border-radius: 0;\n	background: var(--_vv-secondary);\n	color: var(--_vv-accent);\n	font-size: 16px;\n}\n.shapes-strip[hidden] {\n	display: none;\n}\n.shapes-strip-label {\n	writing-mode: vertical-rl;\n	color: var(--_vv-ink);\n	font-size: 12px;\n}\n/* Visio's floating Pan & Zoom window. */\n.pan-zoom {\n	position: absolute;\n	right: 16px;\n	bottom: 16px;\n	z-index: 5;\n	width: 240px;\n	border: 1px solid var(--_vv-border);\n	background: var(--_vv-surface);\n	box-shadow: 0 6px 20px rgb(0 0 0 / 18%);\n}\n.pan-zoom[hidden] {\n	display: none;\n}\n.pan-zoom-heading {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 2px 4px 2px 10px;\n	border-bottom: 1px solid var(--_vv-border);\n	font-size: 12px;\n	font-weight: 600;\n}\n.pan-zoom-close {\n	min-height: 24px;\n	width: 24px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n}\n.pan-zoom-view {\n	display: grid;\n	place-items: center;\n	height: 180px;\n	padding: 8px;\n	background: var(--_vv-bg);\n	cursor: crosshair;\n	touch-action: none;\n}\n.pan-zoom-view svg {\n	max-width: 100%;\n	max-height: 100%;\n	background: #fff;\n	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);\n}\n.pan-zoom-frame {\n	fill: rgb(220 38 38 / 8%);\n	stroke: #dc2626;\n	stroke-width: 2px;\n}\n";
@@ -1088,13 +1089,14 @@ function command(doc, spec) {
   });
   return el2;
 }
-function menu(doc, spec) {
+function menu(doc, spec, submenu = false) {
   const el2 = doc.createElement("office-ui-menu-button");
   const actions = /* @__PURE__ */ new Map();
   const { action: _main, ...dropdown2 } = spec;
   const reason = spec.unsupported ?? spec.items.find((item) => item.unsupported)?.unsupported;
   decorate(el2, spec.split ? spec : { ...dropdown2, ...reason ? { unsupported: reason } : {} });
-  if (spec.split ? spec.action : spec.items.some((item) => item.action)) {
+  const usable = (item) => !!item.action || !!item.items?.some(usable);
+  if (spec.split ? spec.action : spec.items.some(usable)) {
     el2.removeAttribute("disabled");
     delete el2.dataset.unsupported;
     el2.setAttribute("title", spec.label);
@@ -1104,18 +1106,27 @@ function menu(doc, spec) {
   if (spec.size === "icon") el2.setAttribute("icon-only", "");
   el2.dataset.size = spec.size ?? "large";
   el2.dataset.menu = spec.id;
+  if (submenu) {
+    el2.setAttribute("submenu", "");
+    el2.removeAttribute("variant");
+  }
   if (spec.split) actions.set(spec.id, spec.action);
-  for (const item of spec.items) {
-    const entry = doc.createElement("office-ui-menu-item");
-    decorate(entry, item);
+  const collect = (item) => {
     actions.set(item.id, item.action);
+    item.items?.forEach(collect);
+  };
+  for (const item of spec.items) {
+    const entry = item.items ? menu(doc, { ...item, items: item.items }, true) : doc.createElement("office-ui-menu-item");
+    if (!item.items) decorate(entry, item);
+    collect(item);
     el2.append(entry);
   }
-  el2.addEventListener("office-command", (event) => {
-    event.stopPropagation();
-    const action2 = actions.get(event.detail.command);
-    if (action2) emitRibbonAction(el2, action2);
-  });
+  if (!submenu)
+    el2.addEventListener("office-command", (event) => {
+      event.stopPropagation();
+      const action2 = actions.get(event.detail.command);
+      if (action2) emitRibbonAction(el2, action2);
+    });
   return el2;
 }
 function stack(doc, children, horizontal = false) {
@@ -1417,7 +1428,7 @@ var TEXT2 = "Needs core text formatting edits.";
 var STYLE2 = "Needs core fill, line and effect edits.";
 var ARRANGE = "Needs core alignment, position, z-order and grouping edits.";
 var CONNECT = "Needs core connector and glue edits.";
-var SHAPES = "Needs core shape creation beyond rectangles.";
+var SHAPES = "This shape type cannot be created yet.";
 var SELECT = "Needs multi-shape selection.";
 var small2 = (spec) => ({ size: "small", ...spec });
 var icon2 = (spec) => ({ size: "icon", ...spec });
@@ -1459,8 +1470,21 @@ function buildHomePanel(doc, panel) {
             action: { type: "tool", tool: "rectangle" },
             checked: false
           },
-          { id: "ellipse", label: "Ellipse", unsupported: SHAPES },
-          { id: "line-tool", label: "Line", icon: "line", unsupported: SHAPES },
+          {
+            id: "ellipse",
+            label: "Ellipse",
+            action: { type: "tool", tool: "ellipse" },
+            keys: ["Control+9", "Ctrl+9"],
+            checked: false
+          },
+          {
+            id: "line-tool",
+            label: "Line",
+            icon: "line",
+            action: { type: "tool", tool: "line" },
+            keys: ["Control+6", "Ctrl+6"],
+            checked: false
+          },
           { id: "freeform", label: "Freeform", unsupported: SHAPES },
           { id: "arc", label: "Arc", unsupported: SHAPES },
           { id: "pencil", label: "Pencil", icon: "pencil", unsupported: SHAPES }
@@ -1547,7 +1571,32 @@ function buildHomePanel(doc, panel) {
       unsupported: ARRANGE,
       items: [
         { id: "auto-align", label: "Auto Align & Space", unsupported: ARRANGE },
-        { id: "rotate", label: "Rotate Shapes", unsupported: ARRANGE }
+        {
+          id: "rotate",
+          label: "Rotate Shapes",
+          items: [
+            {
+              id: "rotate-left",
+              label: "Rotate Left 90\xB0",
+              action: { type: "rotate", direction: "left" }
+            },
+            {
+              id: "rotate-right",
+              label: "Rotate Right 90\xB0",
+              action: { type: "rotate", direction: "right" }
+            },
+            {
+              id: "flip-horizontal",
+              label: "Flip Horizontal",
+              action: { type: "flip", axis: "horizontal" }
+            },
+            {
+              id: "flip-vertical",
+              label: "Flip Vertical",
+              action: { type: "flip", axis: "vertical" }
+            }
+          ]
+        }
       ]
     }),
     stack(doc, [
@@ -3800,44 +3849,50 @@ function same(a, b) {
 var SNAP = 1 / 16;
 var MIN_SIZE = SNAP;
 var snap = (value) => Math.round(value / SNAP) * SNAP;
-function nextShapeId(page2) {
-  let max = 0;
-  const pending = [...page2.shapes];
-  while (pending.length) {
-    const shape = pending.pop();
-    if (/^\d{1,9}$/.test(shape.id)) max = Math.max(max, Number(shape.id));
-    pending.push(...shape.children);
-  }
-  return String(max + 1);
-}
-function pagePoint(svg, page2, event) {
+function pagePoint(svg, page2, event, options = {}) {
   const matrix2 = svg.getScreenCTM?.();
   if (!matrix2) return void 0;
   const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix2.inverse());
-  return {
-    x: snap(Math.max(0, Math.min(page2.width, point.x))),
-    y: snap(Math.max(0, Math.min(page2.height, point.y)))
+  const coordinate = (value, maximum) => {
+    const bounded = options.bounded === false ? value : Math.max(0, Math.min(maximum, value));
+    return options.snap === false ? bounded : snap(bounded);
   };
+  return { x: coordinate(point.x, page2.width), y: coordinate(point.y, page2.height) };
 }
 async function insertRectangle(controller, page2, centre, size) {
-  const shapeId = nextShapeId(page2);
-  const pageId = page2.id;
-  await controller.applyEdits([
-    visioPageEditToDrawing(page2, {
-      type: "create-rectangle",
-      pageId,
-      shapeId,
-      x: centre.x,
-      y: page2.height - centre.y,
-      width: size.width,
-      height: size.height
-    })
-  ]);
+  return insertBox(controller, page2, centre, size, "rectangle");
+}
+async function insertBox(controller, page2, centre, size, kind) {
+  const shapeId = visioNextShapeId(page2);
+  return insertGeometry(controller, page2, {
+    type: kind === "ellipse" ? "create-ellipse" : "create-rectangle",
+    pageId: page2.id,
+    shapeId,
+    x: centre.x,
+    y: page2.height - centre.y,
+    width: size.width,
+    height: size.height
+  });
+}
+async function insertLine(controller, page2, begin, end) {
+  return insertGeometry(controller, page2, {
+    type: "create-line",
+    pageId: page2.id,
+    shapeId: visioNextShapeId(page2),
+    beginX: begin.x,
+    beginY: page2.height - begin.y,
+    endX: end.x,
+    endY: page2.height - end.y
+  });
+}
+async function insertGeometry(controller, page2, command2) {
+  const { shapeId, pageId } = command2;
+  await controller.applyEdits([visioPageEditToDrawing(page2, command2)]);
   const created = controller.state.document?.pages.find((candidate) => candidate.id === pageId)?.shapes.find((shape) => shape.id === shapeId);
   if (created) controller.selectShape({ id: shapeId, name: created.name, pageId });
   return shapeId;
 }
-var RectangleDrawTool = class {
+var ShapeDrawTool = class {
   constructor(viewport, controller, options) {
     this.viewport = viewport;
     this.controller = controller;
@@ -3859,7 +3914,7 @@ var RectangleDrawTool = class {
     viewport.addEventListener(
       "click",
       (event) => {
-        if (this.options.active()) event.stopImmediatePropagation();
+        if (this.options.tool()) event.stopImmediatePropagation();
       },
       { ...options, capture: true }
     );
@@ -3867,6 +3922,13 @@ var RectangleDrawTool = class {
     viewport.addEventListener("pointermove", (event) => this.#move(event), options);
     viewport.addEventListener("pointerup", (event) => void this.#finish(event), options);
     viewport.addEventListener("pointercancel", () => this.#cancel(), options);
+    viewport.addEventListener(
+      "lostpointercapture",
+      (event) => {
+        if (event.pointerId === this.#drag?.pointer) this.#cancel();
+      },
+      options
+    );
     viewport.addEventListener(
       "keydown",
       (event) => {
@@ -3884,61 +3946,87 @@ var RectangleDrawTool = class {
     };
   }
   #start(event) {
-    if (!this.options.active() || event.button !== 0 || this.#drag) return;
+    const kind = this.options.tool();
+    if (!kind || event.button !== 0 || this.#drag) return;
     const state = this.controller.state;
     const page2 = state.document?.pages[state.pageIndex];
     const svg = this.viewport.querySelector("svg.paper");
     if (!page2 || !svg || !state.edit.sourceAvailable || state.edit.busy) return;
-    const start = pagePoint(svg, page2, event);
+    const start = pagePoint(svg, page2, event, { bounded: false });
     if (!start) return;
     event.preventDefault();
-    const rect = this.viewport.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "rect");
+    const rect = this.viewport.ownerDocument.createElementNS(
+      "http://www.w3.org/2000/svg",
+      kind === "line" ? "line" : kind === "ellipse" ? "ellipse" : "rect"
+    );
     rect.classList.add("draw-preview");
     rect.setAttribute("vector-effect", "non-scaling-stroke");
     svg.append(rect);
-    this.#drag = { pointer: event.pointerId, svg, page: page2, ...start, rect };
+    this.#drag = { pointer: event.pointerId, svg, page: page2, ...start, rect, kind };
     this.viewport.setPointerCapture?.(event.pointerId);
     this.#update(start);
   }
   #move(event) {
     if (!this.#drag || event.pointerId !== this.#drag.pointer) return;
-    const point = pagePoint(this.#drag.svg, this.#drag.page, event);
+    const point = pagePoint(this.#drag.svg, this.#drag.page, event, {
+      bounded: false
+    });
     if (point) this.#update(point);
   }
   #update(point) {
-    const { x, y, rect } = this.#drag;
+    const { x, y, rect, kind } = this.#drag;
+    if (kind === "line") {
+      for (const [name, value] of Object.entries({ x1: x, y1: y, x2: point.x, y2: point.y }))
+        rect.setAttribute(name, String(value));
+      return;
+    }
+    if (kind === "ellipse") {
+      for (const [name, value] of Object.entries({
+        cx: (x + point.x) / 2,
+        cy: (y + point.y) / 2,
+        rx: Math.abs(point.x - x) / 2,
+        ry: Math.abs(point.y - y) / 2
+      }))
+        rect.setAttribute(name, String(value));
+      return;
+    }
     rect.setAttribute("x", String(Math.min(x, point.x)));
     rect.setAttribute("y", String(Math.min(y, point.y)));
     rect.setAttribute("width", String(Math.abs(point.x - x)));
     rect.setAttribute("height", String(Math.abs(point.y - y)));
   }
   #cancel() {
-    this.#drag?.rect.remove();
+    const drag = this.#drag;
+    drag?.rect.remove();
     this.#drag = void 0;
+    if (drag && this.viewport.hasPointerCapture?.(drag.pointer))
+      this.viewport.releasePointerCapture(drag.pointer);
   }
   async #finish(event) {
     const drag = this.#drag;
     if (!drag || event.pointerId !== drag.pointer) return;
-    const end = pagePoint(drag.svg, drag.page, event) ?? drag;
+    const end = pagePoint(drag.svg, drag.page, event, { bounded: false }) ?? drag;
     this.#cancel();
     const width = Math.abs(end.x - drag.x), height = Math.abs(end.y - drag.y);
-    if (width < MIN_SIZE || height < MIN_SIZE) {
-      this.options.announce("Drag on the page to draw a rectangle.");
+    if (drag.kind === "line" ? Math.hypot(width, height) < MIN_SIZE : width < MIN_SIZE || height < MIN_SIZE) {
+      this.options.announce(`Drag on the page to draw a ${drag.kind}.`);
       return;
     }
     const state = this.controller.state;
-    if (state.document?.pages[state.pageIndex] !== drag.page) return;
+    if (state.document?.pages[state.pageIndex] !== drag.page || this.options.tool() !== drag.kind)
+      return;
     const request = ++this.#request;
     try {
-      const shapeId = await insertRectangle(
+      const shapeId = drag.kind === "line" ? await insertLine(this.controller, drag.page, drag, end) : await insertBox(
         this.controller,
         drag.page,
         { x: (drag.x + end.x) / 2, y: (drag.y + end.y) / 2 },
-        { width, height }
+        { width, height },
+        drag.kind
       );
       if (request !== this.#request) return;
       this.options.announce(
-        `Rectangle ${shapeId} added (${+width.toFixed(4)} \xD7 ${+height.toFixed(4)} in).`
+        drag.kind === "line" ? `Line ${shapeId} added.` : `${drag.kind === "ellipse" ? "Ellipse" : "Rectangle"} ${shapeId} added (${+width.toFixed(4)} \xD7 ${+height.toFixed(4)} in).`
       );
     } catch (error) {
       if (request === this.#request && !isEditCancellation(error))
@@ -4092,13 +4180,29 @@ var ViewerGeometryControls = class {
     this.controller = controller;
     this.draftChanged = draftChanged;
     const field = (name) => panel.querySelector(`[data-geometry-field="${name}"]`);
+    const doc = panel.ownerDocument;
+    const label = doc.createElement("label");
+    label.textContent = "Angle (degrees) ";
+    const angle = doc.createElement("input");
+    angle.type = "number";
+    angle.step = "any";
+    angle.dataset.geometryField = "angle";
+    label.append(angle);
+    const actions = panel.querySelector("[data-geometry] .edit-actions");
+    actions.before(label);
+    const rotate = doc.createElement("button");
+    rotate.type = "button";
+    rotate.dataset.geometryAction = "rotate-shape";
+    rotate.textContent = "Rotate selected";
+    actions.append(rotate);
     this.#fields = {
       id: field("id"),
       text: field("text"),
       x: field("x"),
       y: field("y"),
       width: field("width"),
-      height: field("height")
+      height: field("height"),
+      angle
     };
     this.#buttons = [...panel.querySelectorAll("[data-geometry-action]")];
     this.#error = panel.querySelector("[data-geometry-error]");
@@ -4157,7 +4261,7 @@ var ViewerGeometryControls = class {
       width,
       height,
       ...this.#fields.text.value ? { text: this.#fields.text.value } : {}
-    } : type === "move-shape" ? { type, ...target, x, y } : type === "resize-shape" ? { type, ...target, width, height } : { type: "delete-shape", ...target };
+    } : type === "move-shape" ? { type, ...target, x, y } : type === "resize-shape" ? { type, ...target, width, height } : type === "rotate-shape" ? { type, ...target, angle: this.#fields.angle.valueAsNumber * Math.PI / 180 } : { type: "delete-shape", ...target };
     const request = ++this.#request;
     this.#error.hidden = true;
     try {
@@ -4204,9 +4308,11 @@ var ViewerGeometryControls = class {
     const size = [this.#fields.width, this.#fields.height].every(
       (field) => Number.isFinite(field.valueAsNumber) && field.valueAsNumber > 0
     );
+    const selected = selectedShape(state.document, state.selectedShape, state.pageIndex);
+    const lineSize = selected?.kind === "connector" && selected.height === 0 && Number.isFinite(this.#fields.width.valueAsNumber) && this.#fields.width.valueAsNumber > 0 && this.#fields.height.valueAsNumber === 0;
     for (const button of this.#buttons) {
       const action2 = button.dataset.geometryAction;
-      button.disabled = !available || (action2 === "create-rectangle" ? !this.#fields.id.value || !position || !size : !state.selectedShape || action2 === "move-shape" && !position || action2 === "resize-shape" && !size);
+      button.disabled = !available || (action2 === "create-rectangle" ? !this.#fields.id.value || !position || !size : !state.selectedShape || action2 === "move-shape" && !position || action2 === "resize-shape" && !size && !lineSize || action2 === "rotate-shape" && (!Number.isFinite(this.#fields.angle.valueAsNumber) || selected?.kind === "connector"));
     }
   }
 };
@@ -4672,6 +4778,17 @@ function fillPaint(style, defs, resources, world, pageHeight) {
   }
   return gradientPaint(paint, defs);
 }
+function linePaint(style, defs, resources, world, pageHeight, size) {
+  const gradient = visioStrokeGradient(style.lineGradient, style.lineWidth, size);
+  if (!gradient) return safeColor(style.lineColor);
+  return fillPaint(
+    { fill: style.lineColor, fillGradient: gradient },
+    defs,
+    resources,
+    world,
+    pageHeight
+  );
+}
 function gradientPaint(paint, defs, normalized = false, rotation) {
   const gradient = svgElement(paint.type === "radial" ? "radialGradient" : "linearGradient");
   gradient.id = `visio-fill-${++gradientId}`;
@@ -5436,7 +5553,7 @@ function renderPage(model, page2, options = {}) {
     vectorBudget: new ForeignVectorBudget(),
     renderable: /* @__PURE__ */ new WeakMap(),
     visible,
-    interactive: !options.static
+    interactive: !options.static && options.interactive !== false
   };
   try {
     for (const layer of pages)
@@ -5445,7 +5562,7 @@ function renderPage(model, page2, options = {}) {
     context.resources.dispose();
     throw error;
   }
-  if (!options.static) {
+  if (context.interactive) {
     const first = svg.querySelector("[data-shape-id]");
     first?.setAttribute("tabindex", "0");
   }
@@ -5493,6 +5610,10 @@ function drawShape(shape, parent, context, pageId, parentTransform = VISIO_IDENT
 function drawOwn(shape, group2, context, world) {
   const { warnings, defs, resources } = context;
   const fill = shape.geometry.some((geometry) => geometry.fill) ? fillPaint(shape.style, defs, resources, world, context.pageHeight) : "none";
+  const stroke = shape.geometry.some((geometry) => geometry.stroke) && shape.style.linePattern !== 0 ? linePaint(shape.style, defs, resources, world, context.pageHeight, [
+    shape.width,
+    shape.height
+  ]) : "none";
   for (const geometry of shape.geometry) {
     if (++context.nodes > 5e4) {
       warnings.add(
@@ -5507,7 +5628,7 @@ function drawOwn(shape, group2, context, world) {
     path.setAttribute("fill", geometry.fill ? fill : "none");
     path.setAttribute("fill-opacity", String(shape.style.fillOpacity));
     const stroked = geometry.stroke && shape.style.linePattern !== 0;
-    path.setAttribute("stroke", stroked ? safeColor(shape.style.lineColor) : "none");
+    path.setAttribute("stroke", stroked ? stroke : "none");
     path.setAttribute("stroke-width", String(shape.style.lineWidth));
     path.setAttribute("stroke-opacity", String(shape.style.lineOpacity));
     path.setAttribute("stroke-linejoin", "round");
@@ -5656,6 +5777,10 @@ function routeRibbonAction(targets, action2) {
       return targets.history(action2.key);
     case "delete":
       return targets.deleteSelection();
+    case "rotate":
+      return targets.rotateSelection(action2.direction);
+    case "flip":
+      return targets.flipSelection(action2.axis);
     case "tool":
       return targets.setTool(action2.tool);
     case "grid":
@@ -5946,14 +6071,16 @@ var ViewerCommands = class {
     this.#pageOrder = new ViewerPageOrder(host.root, host.controller);
     this.#pageRename = new ViewerPageRename(host.root, host.controller);
     this.#pageDelete = new ViewerPageDelete(host.root, host.controller);
-    this.#draw = new RectangleDrawTool(host.viewport, host.controller, {
-      active: () => this.#tool === "rectangle",
+    this.#draw = new ShapeDrawTool(host.viewport, host.controller, {
+      tool: () => this.#tool === "pointer" ? void 0 : this.#tool,
       announce: host.announce
     });
     this.#targets = {
       controller: host.controller,
       history: (key) => this.#history(key),
       deleteSelection: () => this.#delete(),
+      rotateSelection: (direction) => this.#transform({ type: "rotate", direction }),
+      flipSelection: (axis) => this.#transform({ type: "flip", axis }),
       setTool: (tool) => this.setTool(tool),
       toggleGrid: () => {
         this.#grid = !this.#grid;
@@ -6058,9 +6185,10 @@ var ViewerCommands = class {
     };
   }
   setTool(tool) {
-    if (tool === "rectangle" && !this.#canEdit(this.host.controller.state)) return;
+    if (tool !== "pointer" && !this.#canEdit(this.host.controller.state)) return;
     this.#tool = tool;
     this.render(this.host.controller.state);
+    this.host.toolChanged?.();
   }
   #canEdit(state) {
     return state.edit.sourceAvailable && !state.loading && !state.edit.busy;
@@ -6094,15 +6222,35 @@ var ViewerCommands = class {
       if (index >= 0) this.host.controller.setPage(index);
     }, "Inserted a blank page.");
   }
+  #transform(action2) {
+    const state = this.host.controller.state;
+    const page2 = state.document?.pages[state.pageIndex];
+    if (!page2 || !state.selectedShape || !this.#canEdit(state)) return;
+    const command2 = action2.type === "rotate" ? visioQuarterTurnCommand(page2, state.selectedShape.id, action2.direction) : visioLocalRotationShape(page2, state.selectedShape.id, false) ? {
+      type: "flip-shape",
+      pageId: page2.id,
+      shapeId: state.selectedShape.id,
+      axis: action2.axis
+    } : void 0;
+    if (command2)
+      void this.#edit(
+        () => this.host.controller.applyEdits([command2]),
+        action2.type === "rotate" ? `Rotated ${action2.direction} 90\xB0.` : `Flipped ${action2.axis}.`
+      );
+  }
   async #edit(action2, success) {
     const request = ++this.#pending;
     const { root, viewport } = this.host;
     const canvasFocused = viewport.contains(root.activeElement);
+    const generation = this.host.controller.documentGeneration;
     try {
       await action2();
       if (canvasFocused && !viewport.contains(root.activeElement))
         viewport.focus({ preventScroll: true });
-      if (success && request === this.#pending) this.host.announce(success);
+      if (success && request === this.#pending)
+        this.host.announce(
+          this.host.controller.documentGeneration === generation ? "No changes were made." : success
+        );
     } catch (error) {
       if (request === this.#pending && !isEditCancellation(error) && !this.host.controller.state.edit.error)
         this.host.announce(editErrorMessage(error));
@@ -6132,6 +6280,8 @@ var ViewerCommands = class {
       return { type: "history", key: "redo" };
     if (control && key === "1") return { type: "tool", tool: "pointer" };
     if (control && key === "8") return { type: "tool", tool: "rectangle" };
+    if (control && key === "9") return { type: "tool", tool: "ellipse" };
+    if (control && key === "6") return { type: "tool", tool: "line" };
     if (!control && key === "Delete" && state.selectedShape) return { type: "delete" };
     if (!control && key === "F2" && state.document)
       return { type: "reveal", panel: "edit", focusText: true };
@@ -6154,8 +6304,14 @@ var ViewerCommands = class {
     const button = (name) => root.querySelector(`[command="${name}"]`);
     const box = (name) => root.querySelector(`[data-check="${name}"]`);
     const editing = this.#canEdit(state);
-    if (this.#tool === "rectangle" && !state.edit.sourceAvailable) this.#tool = "pointer";
+    if (this.#tool !== "pointer" && !state.edit.sourceAvailable) this.#tool = "pointer";
     const page2 = state.document?.pages[state.pageIndex];
+    const rotating = editing && !!page2 && !!state.selectedShape && !!visioLocalRotationShape(page2, state.selectedShape.id);
+    for (const name of ["rotate-left", "rotate-right"]) button(name).disabled = !rotating;
+    const flipping = rotating && !!page2 && !!state.selectedShape && !!visioLocalRotationShape(page2, state.selectedShape.id, false);
+    for (const name of ["flip-horizontal", "flip-vertical"]) button(name).disabled = !flipping;
+    root.querySelector('[data-menu="rotate"]').disabled = !rotating;
+    root.querySelector('[data-menu="position"]').disabled = !rotating;
     button("undo").disabled = !state.edit.canUndo || state.edit.busy || state.loading;
     button("redo").disabled = !state.edit.canRedo || state.edit.busy || state.loading;
     button("pointer").setAttribute("pressed", String(this.#tool === "pointer"));
@@ -6164,6 +6320,10 @@ var ViewerCommands = class {
     rectangle.disabled = !editing || !page2;
     button("rectangle-item").setAttribute("checked", String(this.#tool === "rectangle"));
     button("rectangle-item").disabled = !editing || !page2;
+    button("line-tool").setAttribute("checked", String(this.#tool === "line"));
+    button("ellipse").setAttribute("checked", String(this.#tool === "ellipse"));
+    button("ellipse").disabled = !editing || !page2;
+    button("line-tool").disabled = !editing || !page2;
     rectangle.title = state.edit.sourceAvailable ? "Rectangle (Ctrl+8)" : "Rectangle (Ctrl+8): open a .vsdx file to draw. Model-only documents are read only.";
     box("grid").checked = this.#grid;
     box("grid").disabled = !page2;
@@ -6181,6 +6341,464 @@ var ViewerCommands = class {
   }
 };
 
+// src/visio/viewer-handle-events.ts
+function handleGestureIsCurrent(drag, state, active) {
+  return state.document === drag.document && state.document?.pages[state.pageIndex] === drag.page && state.selectedShape?.id === drag.shapeId && drag.svg.isConnected && !state.loading && !state.edit.busy && active;
+}
+function wireHandleEvents(viewport, callbacks) {
+  const Abort = viewport.ownerDocument.defaultView?.AbortController ?? AbortController;
+  const events = new Abort(), options = { signal: events.signal, capture: true };
+  let suppressClick = false;
+  viewport.addEventListener(
+    "pointerdown",
+    (event) => {
+      suppressClick = false;
+      callbacks.start(event);
+    },
+    options
+  );
+  viewport.addEventListener("pointermove", (event) => callbacks.move(event), options);
+  viewport.addEventListener(
+    "pointerup",
+    (event) => {
+      if (event.pointerId === callbacks.pointer()) suppressClick = true;
+      void callbacks.finish(event);
+    },
+    options
+  );
+  const cancel = (event) => {
+    if (event.pointerId === callbacks.pointer()) callbacks.cancel();
+  };
+  viewport.addEventListener("pointercancel", cancel, options);
+  viewport.addEventListener("lostpointercapture", cancel, options);
+  viewport.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape" && callbacks.pointer() !== void 0) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        suppressClick = true;
+        callbacks.cancel();
+      }
+    },
+    options
+  );
+  viewport.addEventListener(
+    "click",
+    (event) => {
+      if (suppressClick) {
+        suppressClick = false;
+        event.stopImmediatePropagation();
+      }
+    },
+    options
+  );
+  return () => {
+    callbacks.cancel();
+    events.abort();
+  };
+}
+
+// src/visio/viewer-line-endpoints.ts
+var SVG = "http://www.w3.org/2000/svg";
+var pointOptions = { snap: false, bounded: false };
+var ViewerLineEndpoints = class {
+  constructor(viewport, controller, options) {
+    this.viewport = viewport;
+    this.controller = controller;
+    this.options = options;
+  }
+  viewport;
+  controller;
+  options;
+  #drag;
+  #request = 0;
+  #overlay;
+  render(state) {
+    const page2 = state.document?.pages[state.pageIndex];
+    if (this.#drag) {
+      if (handleGestureIsCurrent(this.#drag, state, this.options.active())) return;
+      this.#cancel();
+    }
+    this.#overlay?.remove();
+    this.#overlay = void 0;
+    if (!page2 || !state.selectedShape || !state.edit.sourceAvailable || state.edit.busy || state.loading || !this.options.active())
+      return;
+    const shape = page2.shapes.find((shape2) => shape2.id === state.selectedShape.id);
+    if (!shape || !visioStraightLineHandles(shape) || page2.connectors.some(
+      (connection) => connection.fromShapeId === shape.id || connection.toShapeId === shape.id
+    ))
+      return;
+    const group2 = Array.from(this.viewport.querySelectorAll("[data-shape-id]")).find(
+      (group3) => group3.dataset.shapeId === shape.id && group3.dataset.selected === "true"
+    );
+    if (!group2) return;
+    const svg = group2.ownerSVGElement;
+    if (!svg) return;
+    const overlay = this.viewport.ownerDocument.createElementNS(SVG, "g");
+    overlay.dataset.lineEndpointOverlay = "";
+    const rootMatrix = svg.getCTM?.(), groupMatrix = group2.getCTM?.();
+    if (rootMatrix && groupMatrix) {
+      const matrix2 = rootMatrix.inverse().multiply(groupMatrix);
+      overlay.setAttribute(
+        "transform",
+        `matrix(${matrix2.a} ${matrix2.b} ${matrix2.c} ${matrix2.d} ${matrix2.e} ${matrix2.f})`
+      );
+    }
+    const screen = group2.getScreenCTM?.();
+    const screenScale = screen ? Math.hypot(screen.a, screen.b) : 96 * state.zoom;
+    for (const endpoint of ["begin", "end"]) {
+      const handle = this.viewport.ownerDocument.createElementNS(SVG, "circle");
+      handle.dataset.lineEndpoint = endpoint;
+      handle.dataset.lineShapeId = shape.id;
+      handle.setAttribute("cx", String(endpoint === "begin" ? 0 : shape.width));
+      handle.setAttribute("cy", "0");
+      handle.setAttribute("r", String(5 / screenScale));
+      handle.setAttribute("vector-effect", "non-scaling-stroke");
+      handle.setAttribute("aria-label", `Drag ${endpoint} endpoint`);
+      overlay.append(handle);
+    }
+    svg.append(overlay);
+    this.#overlay = overlay;
+  }
+  wire() {
+    const dispose = wireHandleEvents(this.viewport, {
+      pointer: () => this.#drag?.pointer,
+      start: (event) => this.#start(event),
+      move: (event) => this.#move(event),
+      finish: (event) => this.#finish(event),
+      cancel: () => this.#cancel()
+    });
+    return () => {
+      ++this.#request;
+      dispose();
+      this.#overlay?.remove();
+      this.#overlay = void 0;
+    };
+  }
+  #start(event) {
+    const handle = event.target?.closest?.("[data-line-endpoint]");
+    const state = this.controller.state, page2 = state.document?.pages[state.pageIndex];
+    const svg = this.viewport.querySelector("svg.paper");
+    const endpoint = handle?.dataset.lineEndpoint;
+    if (!handle || !svg || !page2 || !state.document || !state.selectedShape || this.#drag || event.button !== 0 || state.edit.busy || state.loading || !state.edit.sourceAvailable || !this.options.active() || endpoint !== "begin" && endpoint !== "end")
+      return;
+    const other = handle.parentElement?.querySelector(
+      `[data-line-endpoint="${endpoint === "begin" ? "end" : "begin"}"]`
+    );
+    const matrix2 = other?.getScreenCTM();
+    if (!other || !matrix2) return;
+    const centre = new DOMPoint(other.cx.baseVal.value, 0).matrixTransform(matrix2);
+    const fixed = pagePoint(svg, page2, { clientX: centre.x, clientY: centre.y }, pointOptions);
+    const start = pagePoint(svg, page2, event, pointOptions);
+    if (!fixed || !start) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const preview2 = this.viewport.ownerDocument.createElementNS(SVG, "line");
+    preview2.classList.add("endpoint-preview");
+    preview2.setAttribute("vector-effect", "non-scaling-stroke");
+    for (const [name, value] of Object.entries({
+      x1: fixed.x,
+      y1: fixed.y,
+      x2: start.x,
+      y2: start.y
+    }))
+      preview2.setAttribute(name, String(value));
+    svg.append(preview2);
+    this.#drag = {
+      pointer: event.pointerId,
+      svg,
+      page: page2,
+      document: state.document,
+      shapeId: state.selectedShape.id,
+      endpoint,
+      preview: preview2,
+      startX: event.clientX,
+      startY: event.clientY
+    };
+    this.viewport.setPointerCapture?.(event.pointerId);
+  }
+  #move(event) {
+    const drag = this.#drag;
+    if (!drag || event.pointerId !== drag.pointer) return;
+    const point = pagePoint(drag.svg, drag.page, event, pointOptions);
+    if (point) {
+      drag.preview.setAttribute("x2", String(point.x));
+      drag.preview.setAttribute("y2", String(point.y));
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  #cancel() {
+    const drag = this.#drag;
+    this.#drag = void 0;
+    drag?.preview.remove();
+    if (drag && this.viewport.hasPointerCapture?.(drag.pointer))
+      this.viewport.releasePointerCapture(drag.pointer);
+  }
+  async #finish(event) {
+    const drag = this.#drag;
+    if (!drag || event.pointerId !== drag.pointer) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const point = pagePoint(drag.svg, drag.page, event, pointOptions);
+    this.#cancel();
+    if (!point || Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 0.5 || this.controller.state.document !== drag.document)
+      return;
+    const request = ++this.#request;
+    try {
+      await this.controller.applyEdits([
+        visioPageEditToDrawing(drag.page, {
+          type: "move-line-endpoint",
+          pageId: drag.page.id,
+          shapeId: drag.shapeId,
+          endpoint: drag.endpoint,
+          x: point.x,
+          y: drag.page.height - point.y
+        })
+      ]);
+      if (request === this.#request)
+        this.options.announce(`${drag.endpoint === "begin" ? "Begin" : "End"} endpoint moved.`);
+    } catch (error) {
+      if (request === this.#request && !isEditCancellation(error))
+        this.options.announce(editErrorMessage(error));
+    }
+  }
+};
+function createRotationPreview(model, page2, shape, source) {
+  const element = svgElement("g");
+  element.classList.add("rotation-shape-preview");
+  element.setAttribute("aria-hidden", "true");
+  element.style.pointerEvents = "none";
+  const visibility = source.style.visibility;
+  let result;
+  source.after(element);
+  source.style.visibility = "hidden";
+  return {
+    element,
+    update(angle) {
+      const transform = visioRotationPreviewTransform(shape, angle);
+      if (!transform) return;
+      const previewPage = {
+        ...page2,
+        shapes: [{ ...shape, transform, rotation: { ...shape.rotation, angle } }]
+      };
+      delete previewPage.backgroundPageId;
+      const next = renderPage({ ...model, pages: [previewPage] }, previewPage, {
+        interactive: false
+      });
+      const defs = next.svg.querySelector(":scope > defs");
+      const root = next.svg.querySelector(":scope > g");
+      element.replaceChildren(defs, ...root.children);
+      result?.dispose();
+      result = next;
+    },
+    dispose() {
+      element.remove();
+      result?.dispose();
+      result = void 0;
+      source.style.visibility = visibility;
+    }
+  };
+}
+
+// src/visio/viewer-rotation-handle.ts
+var SVG2 = "http://www.w3.org/2000/svg";
+var pointOptions2 = { snap: false, bounded: false };
+var ViewerRotationHandle = class {
+  constructor(viewport, controller, options) {
+    this.viewport = viewport;
+    this.controller = controller;
+    this.options = options;
+  }
+  viewport;
+  controller;
+  options;
+  #drag;
+  #request = 0;
+  #overlay;
+  render(state) {
+    if (this.#drag) {
+      if (handleGestureIsCurrent(this.#drag, state, this.options.active())) return;
+      this.#cancel();
+    }
+    this.#overlay?.remove();
+    this.#overlay = void 0;
+    const page2 = state.document?.pages[state.pageIndex], selection2 = state.selectedShape;
+    if (!page2 || !selection2 || !state.edit.sourceAvailable || state.loading || state.edit.busy || !this.options.active())
+      return;
+    const shape = visioLocalRotationShape(page2, selection2.id);
+    if (!shape?.rotation) return;
+    const group2 = Array.from(this.viewport.querySelectorAll("[data-shape-id]")).find(
+      (group3) => group3.dataset.shapeId === shape.id && group3.dataset.selected === "true"
+    );
+    const svg = group2?.ownerSVGElement, matrix2 = svg?.getScreenCTM?.();
+    if (!group2 || !svg || !matrix2) return;
+    const center = { x: shape.rotation.pinX, y: page2.height - shape.rotation.pinY };
+    const rect = group2.getBoundingClientRect(), bounds = this.viewport.getBoundingClientRect();
+    const location = resolveRotateHandlePlacement({
+      preferred: { x: (rect.left + rect.right) / 2, y: rect.top - 24 },
+      selection: rect,
+      bounds,
+      hitWidth: 14,
+      hitHeight: 14,
+      obstacles: []
+    });
+    if (!location) return;
+    const point = { x: location.x - bounds.left, y: location.y - bounds.top };
+    const pivot = new DOMPoint(center.x, center.y).matrixTransform(matrix2);
+    const overlay = this.viewport.ownerDocument.createElementNS(SVG2, "svg");
+    overlay.classList.add("rotation-overlay");
+    overlay.style.left = `${this.viewport.scrollLeft}px`;
+    overlay.style.top = `${this.viewport.scrollTop}px`;
+    overlay.setAttribute("width", String(bounds.width));
+    overlay.setAttribute("height", String(bounds.height));
+    overlay.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+    overlay.dataset.rotationOverlay = "";
+    const stem = this.viewport.ownerDocument.createElementNS(SVG2, "line");
+    for (const [name, value] of Object.entries({
+      x1: pivot.x - bounds.left,
+      y1: pivot.y - bounds.top,
+      x2: point.x,
+      y2: point.y
+    }))
+      stem.setAttribute(name, String(value));
+    stem.classList.add("rotation-stem");
+    stem.setAttribute("vector-effect", "non-scaling-stroke");
+    const handle = this.viewport.ownerDocument.createElementNS(SVG2, "circle");
+    handle.dataset.rotationHandle = shape.id;
+    handle.setAttribute("cx", String(point.x));
+    handle.setAttribute("cy", String(point.y));
+    handle.setAttribute("r", "6");
+    handle.setAttribute("vector-effect", "non-scaling-stroke");
+    handle.setAttribute("aria-label", "Drag rotation handle");
+    overlay.append(stem, handle);
+    this.viewport.append(overlay);
+    this.#overlay = overlay;
+  }
+  wire() {
+    const dispose = wireHandleEvents(this.viewport, {
+      pointer: () => this.#drag?.pointer,
+      start: (event) => this.#start(event),
+      move: (event) => this.#move(event),
+      finish: (event) => this.#finish(event),
+      cancel: () => this.#cancel()
+    });
+    const refresh = () => this.render(this.controller.state);
+    this.viewport.addEventListener("scroll", refresh, { passive: true });
+    const Observer = this.viewport.ownerDocument.defaultView?.ResizeObserver;
+    const observer = Observer ? new Observer(refresh) : void 0;
+    observer?.observe(this.viewport);
+    return () => {
+      this.viewport.removeEventListener("scroll", refresh);
+      observer?.disconnect();
+      ++this.#request;
+      dispose();
+      this.#overlay?.remove();
+      this.#overlay = void 0;
+    };
+  }
+  #start(event) {
+    const handle = event.target?.closest?.("[data-rotation-handle]");
+    const state = this.controller.state, page2 = state.document?.pages[state.pageIndex];
+    const shape = page2?.shapes.find((shape2) => shape2.id === handle?.dataset.rotationHandle);
+    const svg = this.viewport.querySelector("svg.paper");
+    if (!handle || !svg || !page2 || !state.document || !shape?.rotation || state.selectedShape?.id !== shape.id || this.#drag || event.button !== 0 || state.edit.busy || state.loading || !state.edit.sourceAvailable || !this.options.active())
+      return;
+    const source = Array.from(svg.querySelectorAll("[data-shape-id]")).find(
+      (group2) => group2.dataset.shapeId === shape.id
+    );
+    if (!source) return;
+    const start = pagePoint(svg, page2, event, pointOptions2);
+    if (!start) return;
+    this.viewport.focus({ preventScroll: true });
+    const center = { x: shape.rotation.pinX, y: page2.height - shape.rotation.pinY };
+    const preview2 = this.viewport.ownerDocument.createElementNS(SVG2, "line");
+    preview2.classList.add("rotation-preview");
+    preview2.setAttribute("vector-effect", "non-scaling-stroke");
+    for (const [name, value] of Object.entries({
+      x1: center.x,
+      y1: center.y,
+      x2: start.x,
+      y2: start.y
+    }))
+      preview2.setAttribute(name, String(value));
+    svg.append(preview2);
+    this.#drag = {
+      pointer: event.pointerId,
+      svg,
+      page: page2,
+      document: state.document,
+      shapeId: shape.id,
+      preview: preview2,
+      shapePreview: createRotationPreview(state.document, page2, shape, source),
+      startX: event.clientX,
+      startY: event.clientY,
+      center,
+      rotate: createRotationDrag(center, start, -shape.rotation.angle * 180 / Math.PI, {
+        unwrapped: true
+      })
+    };
+    try {
+      this.#drag.shapePreview.update(shape.rotation.angle);
+    } catch (error) {
+      this.#cancel();
+      this.options.announce(editErrorMessage(error));
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.viewport.setPointerCapture?.(event.pointerId);
+  }
+  #move(event) {
+    const drag = this.#drag;
+    if (!drag || event.pointerId !== drag.pointer) return;
+    const point = pagePoint(drag.svg, drag.page, event, pointOptions2);
+    if (point) {
+      const angle = -drag.rotate(point) * Math.PI / 180;
+      try {
+        drag.shapePreview.update(angle);
+      } catch (error) {
+        this.#cancel();
+        this.options.announce(editErrorMessage(error));
+      }
+      drag.preview.setAttribute("x2", String(point.x));
+      drag.preview.setAttribute("y2", String(point.y));
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  #cancel() {
+    const drag = this.#drag;
+    this.#drag = void 0;
+    drag?.preview.remove();
+    drag?.shapePreview.dispose();
+    if (drag && this.viewport.hasPointerCapture?.(drag.pointer))
+      this.viewport.releasePointerCapture(drag.pointer);
+  }
+  async #finish(event) {
+    const drag = this.#drag;
+    if (!drag || event.pointerId !== drag.pointer) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const point = pagePoint(drag.svg, drag.page, event, pointOptions2);
+    const angle = point ? -drag.rotate(point) * Math.PI / 180 : void 0;
+    this.#cancel();
+    if (angle === void 0 || Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 0.5 || this.controller.state.document !== drag.document)
+      return;
+    const request = ++this.#request;
+    try {
+      await this.controller.applyEdits([
+        { type: "rotate-shape", pageId: drag.page.id, shapeId: drag.shapeId, angle }
+      ]);
+      if (request === this.#request) this.options.announce("Shape rotated.");
+    } catch (error) {
+      if (request === this.#request && !isEditCancellation(error))
+        this.options.announce(editErrorMessage(error));
+    }
+  }
+};
+
 // src/visio/office-ui.ts
 var VISIO_ICONS = {
   visioLayers: "m2.5 7 7.5-4 7.5 4-7.5 4ZM2.5 10.5l7.5 4 7.5-4M2.5 14l7.5 4 7.5-4",
@@ -6289,14 +6907,15 @@ function estimatePageSvgBytes(model, page2, maxBytes) {
       reserve(
         4096 + geometry.path.length * 6 + shape.style.lineColor.length * 24 + shape.style.fill.length * 6
       );
-    const gradients = visioGradientInstances(shape.style.fillGradient);
-    reserve(1024 * gradients);
-    for (const stop of shape.style.fillGradient?.stops ?? [])
-      reserve(gradients * (256 + stop.color.length * 6));
-    if (shape.style.fillGradient)
-      reserve(
-        gradients * (visioRenderedGradientStopCount(shape.style.fillGradient) - shape.style.fillGradient.stops.length) * (256 + 7 * 6)
-      );
+    for (const gradient of [shape.style.fillGradient, shape.style.lineGradient]) {
+      const gradients = visioGradientInstances(gradient);
+      reserve(1024 * gradients);
+      for (const stop of gradient?.stops ?? []) reserve(gradients * (256 + stop.color.length * 6));
+      if (gradient)
+        reserve(
+          gradients * (visioRenderedGradientStopCount(gradient) - gradient.stops.length) * (256 + 7 * 6)
+        );
+    }
     if (shape.style.fillPattern)
       reserve(1536 + 4 * Math.ceil(shape.style.fillPattern.bytes.byteLength / 3));
     if (shape.image) {
@@ -6593,14 +7212,16 @@ function validationCost(model) {
       );
       for (const geometry of shape.geometry) strings(geometry.path);
       if (shape.style.fillPattern) work += 64;
-      const gradients = visioGradientInstances(shape.style.fillGradient);
-      work += gradients * 16;
-      for (const stop of shape.style.fillGradient?.stops ?? []) {
-        work += 3 * gradients;
-        strings(stop.color);
+      for (const gradient of [shape.style.fillGradient, shape.style.lineGradient]) {
+        const gradients = visioGradientInstances(gradient);
+        work += gradients * 16;
+        for (const stop of gradient?.stops ?? []) {
+          work += 3 * gradients;
+          strings(stop.color);
+        }
+        if (gradient)
+          work += gradients * 10 * (visioRenderedGradientStopCount(gradient) - gradient.stops.length);
       }
-      if (shape.style.fillGradient)
-        work += gradients * 10 * (visioRenderedGradientStopCount(shape.style.fillGradient) - shape.style.fillGradient.stops.length);
       for (const run of shape.text.runs) {
         work += 8;
         strings(run.text, run.fontFamily, run.color);
@@ -6642,6 +7263,9 @@ var VisioViewerElement = class extends BaseElement {
   #shapeStatus;
   #announcement;
   #commands;
+  #lineEndpoints;
+  #rotationHandle;
+  #handleState;
   #rulers;
   #canvas;
   #panZoom;
@@ -6713,6 +7337,10 @@ var VisioViewerElement = class extends BaseElement {
       root: this.#root,
       viewport: this.#viewport,
       controller: this.controller,
+      toolChanged: () => {
+        this.#lineEndpoints.render(this.controller.state);
+        this.#rotationHandle.render(this.controller.state);
+      },
       fit: (mode) => this.#fit(mode),
       togglePane: (pane) => this.#chrome.togglePane(pane),
       reveal: (panel, focusText) => this.#chrome.reveal(panel, focusText),
@@ -6728,6 +7356,20 @@ var VisioViewerElement = class extends BaseElement {
       }
     });
     this.#profile = new ViewerProfile(this.#root);
+    this.#lineEndpoints = new ViewerLineEndpoints(this.#viewport, this.controller, {
+      active: () => this.#commands.tool === "pointer",
+      announce: (message) => {
+        this.#announcement = message;
+        this.#status.textContent = message;
+      }
+    });
+    this.#rotationHandle = new ViewerRotationHandle(this.#viewport, this.controller, {
+      active: () => this.#commands.tool === "pointer",
+      announce: (message) => {
+        this.#announcement = message;
+        this.#status.textContent = message;
+      }
+    });
     this.#share = new ViewerShare(this.#root, this.controller, () => this.#profile.profile);
     this.#backstage = new ViewerBackstage({
       root: this.#root,
@@ -6911,6 +7553,8 @@ var VisioViewerElement = class extends BaseElement {
   #wireInputs() {
     const disposeChrome = this.#chrome.wire();
     const disposeCommands = this.#commands.wire();
+    const disposeLineEndpoints = this.#lineEndpoints.wire();
+    const disposeRotation = this.#rotationHandle.wire();
     const disposeBackstage = this.#backstage.wire();
     const disposeMenus = wireContextMenus(this.#root, this.#viewport, this.controller);
     const disposeTellMe = wireTellMe(this.#root);
@@ -6946,6 +7590,8 @@ var VisioViewerElement = class extends BaseElement {
     return () => {
       disposeChrome();
       disposeCommands();
+      disposeLineEndpoints();
+      disposeRotation();
       disposeBackstage();
       disposeMenus();
       disposeTellMe();
@@ -6968,6 +7614,12 @@ var VisioViewerElement = class extends BaseElement {
     if (this.#suspended) return;
     const page2 = state.document?.pages[state.pageIndex];
     const changed = this.#canvas.render(state);
+    const previous = this.#handleState;
+    this.#handleState = state;
+    if (changed || !previous || previous.zoom !== state.zoom || previous.selectedShape !== state.selectedShape || previous.loading !== state.loading || previous.edit.busy !== state.edit.busy || previous.edit.sourceAvailable !== state.edit.sourceAvailable) {
+      this.#lineEndpoints.render(state);
+      this.#rotationHandle.render(state);
+    }
     if (changed) this.#announcement = void 0;
     this.#zoomSlider.value = Math.round(state.zoom * 100);
     this.#zoomSlider.disabled = !page2;