ooxml-ui 1.18.2 → 1.19.0

package/dist/pptx/web-components/subtitle-settings-styles.d.ts

@@ -1,2 +1,2 @@
-export declare const SUBTITLE_SETTINGS_STYLES = "\n:host { display: inline-flex; }\ndialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px);\n margin: auto; padding: 24px; border: 1px solid var(--pptx-border, #374151); border-radius: 10px;\n background: var(--pptx-background, #181b20); color: var(--pptx-foreground, #f9fafb); font: 14px/1.5 system-ui; }\ndialog::backdrop { background: #0008; }\nh2 { margin: 0 0 12px; font-size: 18px; } p { margin: 0 0 20px; }\nlabel { display: block; margin-bottom: 8px; }\npptx-ui-select { display: block; width: 100%; }\nfooter { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\nfooter button { padding: 8px 16px; min-height: 44px; border: 1px solid var(--pptx-border, #374151);\n border-radius: 6px; background: var(--pptx-secondary, #252830); color: inherit; font: inherit; cursor: pointer; }\nfooter button:last-child { background: var(--pptx-primary, #6366f1); color: var(--pptx-primary-foreground, #fff); }\nfooter button:focus-visible { outline: 2px solid var(--pptx-ring, #6366f1); outline-offset: 2px; }\n@media (forced-colors: active) { dialog { background: Canvas; color: CanvasText; } footer button { color: ButtonText; } }\n";
+export declare const SUBTITLE_SETTINGS_STYLES = "\n:host { display: inline-flex; }\ndialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px);\n margin: auto; padding: 24px; border: 1px solid var(--pptx-border, #374151); border-radius: 10px;\n background: var(--pptx-background, #181b20); color: var(--pptx-foreground, #f9fafb); font: 14px/1.5 var(--pptx-font,var(--office-font,system-ui,sans-serif)); }\ndialog::backdrop { background: #0008; }\nh2 { margin: 0 0 12px; font-size: 18px; } p { margin: 0 0 20px; }\nlabel { display: block; margin-bottom: 8px; }\npptx-ui-select { display: block; width: 100%; }\nfooter { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\nfooter button { padding: 8px 16px; min-height: 44px; border: 1px solid var(--pptx-border, #374151);\n border-radius: 6px; background: var(--pptx-secondary, #252830); color: inherit; font: inherit; cursor: pointer; }\nfooter button:last-child { background: var(--pptx-primary, #6366f1); color: var(--pptx-primary-foreground, #fff); }\nfooter button:focus-visible { outline: 2px solid var(--pptx-ring, #6366f1); outline-offset: 2px; }\n@media (forced-colors: active) { dialog { background: Canvas; color: CanvasText; } footer button { color: ButtonText; } }\n";
 //# sourceMappingURL=subtitle-settings-styles.d.ts.map

package/dist/pptx/web-components/subtitle-settings-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"subtitle-settings-styles.d.ts","sourceRoot":"","sources":["../../../src/pptx/web-components/subtitle-settings-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,krCAepC,CAAC"}
+{"version":3,"file":"subtitle-settings-styles.d.ts","sourceRoot":"","sources":["../../../src/pptx/web-components/subtitle-settings-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,iuCAepC,CAAC"}

package/dist/pptx/web-components/theme-editor-styles.d.ts

@@ -1,2 +1,2 @@
-export declare const THEME_EDITOR_STYLES = "\n:host { display: block; position: fixed; z-index: 1090; box-sizing: border-box; width: 288px;\n color: var(--pptx-foreground, #e2e8f0); background: var(--pptx-card, #181c20);\n border-left: 1px solid var(--pptx-border, #33334d); box-shadow: -8px 0 24px #0002;\n font: 12px/1.4 var(--pptx-ui-font-family, system-ui, sans-serif); }\n:host([inline]) { position: static; width: 100%; border: 0; box-shadow: none; }\n:host([inline]) .close { display: none; }\n* { box-sizing: border-box; }\n.panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }\nheader { display: flex; align-items: center; justify-content: space-between; padding: 10px; flex: none; }\nh3 { margin: 0; font-size: 13px; font-weight: 600; }\n.content { display: grid; gap: 10px; padding: 0 10px 10px; overflow-y: auto; min-height: 0; }\nsection { padding: 8px; border: 1px solid var(--pptx-border, #33334d); border-radius: 5px; }\nh4, label > span { display: block; margin: 0 0 5px; color: var(--pptx-muted-foreground, #94a3b8); font-size: 10px; }\nh4 { text-transform: uppercase; letter-spacing: .03em; font-weight: 500; }\ninput[type=text], pptx-ui-select { display: block; width: 100%; min-height: 28px; padding: 4px 6px;\n background: var(--pptx-background, #0e1114); border: 1px solid var(--pptx-border, #33334d);\n border-radius: 4px; color: inherit; font: inherit; }\nbutton { color: inherit; font: inherit; background: var(--pptx-secondary, #20252b);\n border: 1px solid var(--pptx-border, #33334d); border-radius: 4px; padding: 5px 7px; cursor: pointer; }\nbutton:hover { background: var(--pptx-accent, #33334d); }\nbutton:disabled, input:disabled { opacity: .45; cursor: default; }\nbutton:focus-visible, input:focus-visible, pptx-ui-select:focus-within { outline: 2px solid var(--pptx-ring, #ec6b3d); outline-offset: 2px; }\n.close { border: 0; background: transparent; min-width: 28px; min-height: 28px; }\n.presets, .colors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.preset { text-align: left; font-size: 10px; min-height: 42px; }\n.preset[aria-pressed=true] { border-color: var(--pptx-primary, #ec6b3d); }\n.swatches { display: flex; height: 12px; overflow: hidden; border-radius: 2px; margin-bottom: 4px; }\n.swatches span { flex: 1; }\n.colors label { min-width: 0; }\n.colors label > span { font-size: 9px; }\n.color-row { display: flex; gap: 4px; }\ninput[type=color] { width: 28px; height: 28px; padding: 0; flex: none; border: 1px solid var(--pptx-border, #33334d); background: transparent; }\n.color-row input[type=text] { min-width: 0; font: 10px monospace; }\n.font-fields { display: grid; gap: 8px; }\n.preview { padding: 8px; border-radius: 4px; display: grid; gap: 4px; margin-top: 8px; }\n.actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--pptx-border, #33334d); flex: none; }\n.apply { flex: 1; background: var(--pptx-primary, #ec6b3d); color: var(--pptx-primary-foreground, #fff); border-color: transparent; }\n@media (pointer: coarse), (max-width: 767px) { button, input[type=text], pptx-ui-select, .close { min-height: 44px; } }\n@media (forced-colors: active) { :host, section, button, input { border-color: CanvasText; }\n button:focus-visible, input:focus-visible { outline-color: Highlight; } }\n";
+export declare const THEME_EDITOR_STYLES = "\n:host { display: block; position: fixed; z-index: 1090; box-sizing: border-box; width: 288px;\n color: var(--pptx-foreground, #e2e8f0); background: var(--pptx-card, #181c20);\n border-left: 1px solid var(--pptx-border, #33334d); box-shadow: -8px 0 24px #0002;\n font: 12px/1.4 var(--pptx-ui-font-family, var(--office-font, system-ui, sans-serif)); }\n:host([inline]) { position: static; width: 100%; border: 0; box-shadow: none; }\n:host([inline]) .close { display: none; }\n* { box-sizing: border-box; }\n.panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }\nheader { display: flex; align-items: center; justify-content: space-between; padding: 10px; flex: none; }\nh3 { margin: 0; font-size: 13px; font-weight: 600; }\n.content { display: grid; gap: 10px; padding: 0 10px 10px; overflow-y: auto; min-height: 0; }\nsection { padding: 8px; border: 1px solid var(--pptx-border, #33334d); border-radius: 5px; }\nh4, label > span { display: block; margin: 0 0 5px; color: var(--pptx-muted-foreground, #94a3b8); font-size: 10px; }\nh4 { text-transform: uppercase; letter-spacing: .03em; font-weight: 500; }\ninput[type=text], pptx-ui-select { display: block; width: 100%; min-height: 28px; padding: 4px 6px;\n background: var(--pptx-background, #0e1114); border: 1px solid var(--pptx-border, #33334d);\n border-radius: 4px; color: inherit; font: inherit; }\nbutton { color: inherit; font: inherit; background: var(--pptx-secondary, #20252b);\n border: 1px solid var(--pptx-border, #33334d); border-radius: 4px; padding: 5px 7px; cursor: pointer; }\nbutton:hover { background: var(--pptx-accent, #33334d); }\nbutton:disabled, input:disabled { opacity: .45; cursor: default; }\nbutton:focus-visible, input:focus-visible, pptx-ui-select:focus-within { outline: 2px solid var(--pptx-ring, #ec6b3d); outline-offset: 2px; }\n.close { border: 0; background: transparent; min-width: 28px; min-height: 28px; }\n.presets, .colors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.preset { text-align: left; font-size: 10px; min-height: 42px; }\n.preset[aria-pressed=true] { border-color: var(--pptx-primary, #ec6b3d); }\n.swatches { display: flex; height: 12px; overflow: hidden; border-radius: 2px; margin-bottom: 4px; }\n.swatches span { flex: 1; }\n.colors label { min-width: 0; }\n.colors label > span { font-size: 9px; }\n.color-row { display: flex; gap: 4px; }\ninput[type=color] { width: 28px; height: 28px; padding: 0; flex: none; border: 1px solid var(--pptx-border, #33334d); background: transparent; }\n.color-row input[type=text] { min-width: 0; font: 10px monospace; }\n.font-fields { display: grid; gap: 8px; }\n.preview { padding: 8px; border-radius: 4px; display: grid; gap: 4px; margin-top: 8px; }\n.actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--pptx-border, #33334d); flex: none; }\n.apply { flex: 1; background: var(--pptx-primary, #ec6b3d); color: var(--pptx-primary-foreground, #fff); border-color: transparent; }\n@media (pointer: coarse), (max-width: 767px) { button, input[type=text], pptx-ui-select, .close { min-height: 44px; } }\n@media (forced-colors: active) { :host, section, button, input { border-color: CanvasText; }\n button:focus-visible, input:focus-visible { outline-color: Highlight; } }\n";
 //# sourceMappingURL=theme-editor-styles.d.ts.map

package/dist/pptx/web-components/theme-editor-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-editor-styles.d.ts","sourceRoot":"","sources":["../../../src/pptx/web-components/theme-editor-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,2sGAyC/B,CAAC"}
+{"version":3,"file":"theme-editor-styles.d.ts","sourceRoot":"","sources":["../../../src/pptx/web-components/theme-editor-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,+tGAyC/B,CAAC"}

package/dist/teams.js

@@ -1,6 +1,6 @@
-export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, activityTime, applyTeamsProps, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-MSXUCINT.js';
+export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, activityTime, applyTeamsProps, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-QEIGB73C.js';
 export { TeamsPresentationPreview, defineTeamsPresentationPreview } from './chunk-FHO7TEWA.js';
-import './chunk-7E3HU7RL.js';
+import './chunk-6Y7KR2I3.js';
 import './chunk-SPRZIHUH.js';
 import './chunk-M6GF5ED2.js';
 import './chunk-KNC2UEUR.js';

package/dist/theme-bridge.d.ts

@@ -1,4 +1,31 @@
 import { type OfficeToken } from './tokens.js';
+/** Legacy shadcn names share one semantic mapping across all product compatibility layers. */
+export declare const LEGACY_OFFICE_THEME_TOKENS: {
+    readonly background: '--office-background';
+    readonly foreground: '--office-foreground';
+    readonly card: '--office-surface';
+    readonly 'card-foreground': '--office-foreground';
+    readonly popover: '--office-popover';
+    readonly 'popover-foreground': '--office-popover-foreground';
+    readonly primary: '--office-accent';
+    readonly 'primary-foreground': '--office-accent-foreground';
+    readonly secondary: '--office-surface';
+    readonly 'secondary-foreground': '--office-foreground';
+    readonly muted: '--office-surface';
+    readonly 'muted-foreground': '--office-muted-foreground';
+    readonly accent: '--office-selected';
+    readonly 'accent-foreground': '--office-foreground';
+    readonly destructive: '--office-danger';
+    readonly 'destructive-foreground': '--office-danger-foreground';
+    readonly border: '--office-border';
+    readonly input: '--office-border';
+    readonly ring: '--office-ring';
+    readonly radius: '--office-radius';
+    readonly font: '--office-font';
+};
+/** Resolve on an outer host; bridge the computed aliases on inner chrome to avoid CSS cycles. */
+export declare function legacyThemeAliases(selector: string, prefix: string, privatePrefix: string): string;
+export declare function legacyThemeBridge(selector: string, privatePrefix: string): string;
 /**
  * Feeds the `--office-*` tokens from a product's own theme, so the shared elements follow it.
  * Products (docx, xlsx, pptx, visio) already name their theme after shadcn/ui
@@ -27,3 +54,4 @@ export interface ShadcnBridgeOptions {
  * (`prefix` includes the dashes, for example `'--dve-'` or `'--pptx-'`).
  */
 export declare function shadcnBridge(selector: string, prefix: string, options?: ShadcnBridgeOptions): string;
+//# sourceMappingURL=theme-bridge.d.ts.map

package/dist/theme-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-bridge.d.ts","sourceRoot":"","sources":["../src/theme-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE3D,8FAA8F;AAC9F,eAAO,MAAM,0BAA0B;yBAC1B,qBAAqB;yBACrB,qBAAqB;mBAC3B,kBAAkB;gCACL,qBAAqB;sBAC/B,kBAAkB;mCACL,6BAA6B;sBAC1C,iBAAiB;mCACJ,4BAA4B;wBACvC,kBAAkB;qCACL,qBAAqB;oBACtC,kBAAkB;iCACL,2BAA2B;qBACvC,mBAAmB;kCACN,qBAAqB;0BAC7B,iBAAiB;uCACJ,4BAA4B;qBAC9C,iBAAiB;oBAClB,iBAAiB;mBAClB,eAAe;qBACb,iBAAiB;mBACnB,eAAe;CAC0B,CAAC;AAEjD,iGAAiG;AACjG,wBAAgB,kBAAkB,CACjC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,GACnB,MAAM,CAOR;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAOjF;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;AA+ClE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,cAAc,GAAG,MAAM,CAMzE;AAED,MAAM,WAAW,mBAAmB;IACnC,yFAAyF;IACzF,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,mBAAwB,GAC/B,MAAM,CAQR"}

package/dist/theme.d.ts

@@ -1,4 +1,6 @@
-export { shadcnBridge, themeBridge, type ShadcnBridgeOptions, type ThemeBridgeMap, } from './theme-bridge.js';
+import { type OfficeUiBlockKind, type OfficeUiProduct } from './building-block-styles.js';
+export { BUILDING_BLOCKS_CSS, type OfficeUiBlockKind, type OfficeUiProduct, } from './building-block-styles.js';
+export { LEGACY_OFFICE_THEME_TOKENS, legacyThemeAliases, legacyThemeBridge, shadcnBridge, themeBridge, type ShadcnBridgeOptions, type ThemeBridgeMap, } from './theme-bridge.js';
 export { COMPACT, FOCUS_RING, OFFICE_TOKENS, tok, TOUCH, type OfficeToken } from './tokens.js';
 /**
  * Theme-token foundation. Custom properties cross shadow boundaries, so one `<style>` in the
@@ -7,5 +9,10 @@ export { COMPACT, FOCUS_RING, OFFICE_TOKENS, tok, TOUCH, type OfficeToken } from
  */
 export declare const THEME_STYLE_ID = "office-ui-theme";
 export declare const THEME_CSS: string;
-/** Idempotent. Browser-only; returns false (and does nothing) without a document. */
-export declare function installOfficeUiTheme(doc?: Document | undefined): boolean;
+/** Idempotent per document or shadow root. Browser-only; false without a style container. */
+export declare function installOfficeUiTheme(root?: Document | ShadowRoot | undefined): boolean;
+/** Install enclosing root rules now, then recheck after a native framework inserts a prepared host. */
+export declare function installOfficeUiThemeFor(host: HTMLElement): boolean;
+/** Marks only the library control's own root. Theme state and custom tokens stay on host scopes. */
+export declare function prepareOfficeUiBlock(host: HTMLElement, kind: OfficeUiBlockKind, product?: OfficeUiProduct): void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACpB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACN,0BAA0B,EAC1B,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,cAAc,GACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5F;;;;GAIG;AACH,eAAO,MAAM,cAAc,oBAAoB,CAAC;AAiDhD,eAAO,MAAM,SAAS,QA2BrB,CAAC;AAEF,6FAA6F;AAC7F,wBAAgB,oBAAoB,CACnC,IAAI,GAAE,QAAQ,GAAG,UAAU,GAAG,SAA+B,GAC3D,OAAO,CAcT;AAaD,uGAAuG;AACvG,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAMlE;AAED,oGAAoG;AACpG,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,iBAAiB,EACvB,OAAO,CAAC,EAAE,eAAe,GACvB,IAAI,CAIN"}

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-7E3HU7RL.js';
+export { BUILDING_BLOCKS_CSS, LEGACY_OFFICE_THEME_TOKENS, THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, installOfficeUiThemeFor, legacyThemeAliases, legacyThemeBridge, prepareOfficeUiBlock, shadcnBridge, themeBridge } from './chunk-6Y7KR2I3.js';
 export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-LD3K2RDN.js';

package/dist/visio/building-blocks.d.ts

@@ -0,0 +1,37 @@
+import type { ViewerController } from './controller.js';
+export declare function fitDiagramCanvas(host: HTMLElement, controller: ViewerController, mode?: 'page' | 'width'): void;
+/** The existing non-mutating selection inspector, independently mounted. */
+export declare function mountDiagramInspector(host: HTMLElement, controller: ViewerController): () => void;
+/** The shared drawing engine, without application chrome or file/settings handlers. */
+export declare function mountDiagramCanvas(host: HTMLElement, controller: ViewerController): () => void;
+export declare function diagramToolbarProps(controller: ViewerController, fit: () => void, locale?: string): {
+    labels: {
+        [k: string]: string;
+    };
+    canEdit: boolean;
+    pageIndex: number;
+    pages: {
+        id: string;
+        name: string;
+    }[];
+    zoom: number;
+    selection: readonly import("ooxml-core/visio/ui").VisioShapeSelection[];
+    canUndo: boolean;
+    canRedo: boolean;
+    canDuplicate: boolean;
+    canGroup: boolean;
+    canUngroup: boolean;
+    onPageChange: (index: number) => void;
+    onZoomChange: (zoom: number) => void;
+    onFit: () => void;
+    onUndo: () => Promise<void>;
+    onRedo: () => Promise<void>;
+    onDuplicate: () => Promise<void>;
+    onGroup: () => Promise<void>;
+    onUngroup: () => Promise<void>;
+    onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
+    onSearchChange: (query: string) => void;
+    onNextSearchResult: () => void;
+    onPreviousSearchResult: () => void;
+};
+export type DiagramToolbarProps = ReturnType<typeof diagramToolbarProps>;

package/dist/visio/controller.d.ts

@@ -12,6 +12,8 @@ import { type TextSearchState } from 'ooxml-core/visio/ui';
 import { type ViewerTextReplaceToken, type ViewerTextReplaceScope, type ViewerTextReplacementInput } from './replacement-token.js';
 import { type VisioTextOccurrence, type VisioTextReplacePlan } from 'ooxml-core/visio/ui';
 export interface ViewerState {
+    /** Host permission, independent of source-format editing support. */
+    readonly canEdit: boolean;
     readonly document: VisioDocument | null;
     readonly edit: ViewerEditState;
     readonly pageIndex: number;
@@ -27,6 +29,8 @@ export interface ViewerState {
     /** Prepared source selection availability for native clipboard gestures. Payload stays private. */
     readonly clipboard: ViewerClipboardState;
 }
+/** Effective mutation availability shared by every diagram UI tool. */
+export declare function canEditDiagram(state: Pick<ViewerState, 'canEdit' | 'edit'>): boolean;
 type Parser = CancellableParser;
 type EventListener = <K extends keyof ViewerEvents>(name: K, detail: ViewerEvents[K]) => void;
 export declare class ViewerController {
@@ -41,6 +45,8 @@ export declare class ViewerController {
     /** Accepted source/model replacements invalidate drafts; edit/undo/redo keep this source epoch. */
     get sourceGeneration(): number;
     subscribe(listener: (state: ViewerState) => void): () => void;
+    get canEdit(): boolean;
+    set canEdit(value: boolean);
     onEvent(listener: EventListener): () => void;
     setDocument(document: VisioDocument | null): void;
     setPage(index: number): void;

package/dist/visio/index.d.ts

@@ -1,4 +1,5 @@
 export { ViewerController, type ViewerState } from './controller.js';
+export { mountDiagramCanvas, fitDiagramCanvas, mountDiagramInspector, diagramToolbarProps, type DiagramToolbarProps, } from './building-blocks.js';
 export type { CreateVsdxOptions } from 'ooxml-core/visio';
 export type { ViewerClipboardState, ViewerClipboardToken } from './clipboard-capture.js';
 export { mountViewer, type MountedViewer } from './binding.js';

package/dist/visio/styles/theme.d.ts

@@ -3,7 +3,7 @@
  * The `--vv-*` custom properties stay as optional host overrides and appear only in this block.
  * `inch` is not a colour: it is the canvas scale set by `viewer-canvas.ts`.
  */
-export declare const visioThemeAliases = ":host {\n  --_vv-bg:var(--vv-background,var(--office-surface,#eceae8));\n  --_vv-surface:var(--vv-surface,var(--office-background,#fff));\n  --_vv-secondary:var(--vv-secondary,var(--office-surface,#f3f2f1));\n  --_vv-ink:var(--vv-ink,var(--office-foreground,#1f1f1f));\n  --_vv-muted:var(--vv-muted,var(--office-muted-foreground,#605e5c));\n  --_vv-border:var(--vv-border,var(--office-border,#e1dfdd));\n  --_vv-accent:var(--vv-accent,var(--office-accent,#3955a3));\n  --_vv-accent-soft:var(--vv-accent-soft,color-mix(in srgb,var(--_vv-accent) 10%,transparent));\n  --_vv-accent-ink:var(--vv-accent-ink,var(--office-accent-foreground,#fff));\n  --_vv-focus:var(--vv-focus,var(--office-ring,var(--_vv-accent)));\n  --_vv-danger:var(--vv-danger,var(--office-danger,#b42318));\n  --_vv-shadow:var(--vv-shadow,var(--office-shadow,0 2px 8px rgb(0 0 0 / 14%)));\n  --_vv-status-bg:var(--vv-status-background,var(--_vv-surface));\n  --_vv-status-ink:var(--vv-status-ink,var(--_vv-ink));\n}\n:host([status-bar='colorful']) {\n  --_vv-status-bg:var(--vv-status-background,var(--_vv-accent));\n  --_vv-status-ink:var(--vv-status-ink,var(--_vv-accent-ink));\n}\n";
+export declare const visioThemeAliases = ":host {\n  --_vv-font:var(--vv-font,var(--office-font,'Segoe UI',Arial,sans-serif));\n  --_vv-bg:var(--vv-background,var(--office-surface,#eceae8));\n  --_vv-surface:var(--vv-surface,var(--office-background,#fff));\n  --_vv-secondary:var(--vv-secondary,var(--office-surface,#f3f2f1));\n  --_vv-ink:var(--vv-ink,var(--office-foreground,#1f1f1f));\n  --_vv-muted:var(--vv-muted,var(--office-muted-foreground,#605e5c));\n  --_vv-border:var(--vv-border,var(--office-border,#e1dfdd));\n  --_vv-accent:var(--vv-accent,var(--office-accent,#3955a3));\n  --_vv-accent-soft:var(--vv-accent-soft,color-mix(in srgb,var(--_vv-accent) 10%,transparent));\n  --_vv-accent-ink:var(--vv-accent-ink,var(--office-accent-foreground,#fff));\n  --_vv-focus:var(--vv-focus,var(--office-ring,var(--_vv-accent)));\n  --_vv-danger:var(--vv-danger,var(--office-danger,#b42318));\n  --_vv-shadow:var(--vv-shadow,var(--office-shadow,0 2px 8px rgb(0 0 0 / 14%)));\n  --_vv-status-bg:var(--vv-status-background,var(--_vv-surface));\n  --_vv-status-ink:var(--vv-status-ink,var(--_vv-ink));\n}\n:host([status-bar='colorful']) {\n  --_vv-status-bg:var(--vv-status-background,var(--_vv-accent));\n  --_vv-status-ink:var(--vv-status-ink,var(--_vv-accent-ink));\n}\n";
 /**
  * Feeds the shared controls (ribbon, dialogs) from the aliases above. It sits on the shadow
  * root's children, not on `:host`, because a custom property cannot read the value it replaces.

package/dist/visio/styles.d.ts

@@ -1,2 +1,2 @@
 /** Colours come from the alias block in `styles/theme.ts`, which follows the shared theme. */
-export declare const viewerStyles = "\n:host {\n  display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;\n  color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 \"Segoe UI\",Arial,sans-serif; contain:layout;\n}\n* { box-sizing:border-box; }\n[hidden] { display:none !important; }\nbutton,select,input,textarea { font:inherit; color:inherit; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; min-height:28px; padding:3px 8px; }\nbutton { cursor:pointer; }\nbutton:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }\nbutton:disabled { opacity:.4; cursor:default; }\nbutton:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--_vv-focus); outline-offset:2px; }\nbutton[aria-pressed=\"true\"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }\n.toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }\n.spacer { flex:1; }\n.ribbon-content { min-height:82px; display:flex; align-items:stretch; gap:0; padding:2px 4px; overflow-x:auto; }\n.ribbon-group { display:flex; flex-direction:column; justify-content:space-between; flex:none; gap:2px; padding:3px 10px 4px; border-right:1px solid var(--_vv-border); }\n.group-label { font-size:10px; line-height:12px; color:var(--_vv-muted); text-align:center; }\n.ribbon-actions { display:flex; align-items:stretch; gap:2px; flex:1; }\n.ribbon-command { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:70px; padding:2px 6px; border-color:transparent; background:transparent; font-size:11px; white-space:nowrap; }\n.ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }\n.workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }\n.pane-heading { height:37px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--_vv-border); font-size:11px; font-weight:600; }\n.viewport { position:relative; display:flex; flex-direction:column; flex:1; overflow:auto; min-width:0; min-height:0; padding:16px 4px; background:var(--_vv-bg); }\n.paper { display:block; flex:none; background:white; box-shadow:var(--_vv-shadow); margin:auto; }\n.paper [data-shape-id] { cursor:pointer; }\n.inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }\nsummary { cursor:pointer; min-height:22px; line-height:22px; font-weight:500; }\nsummary::marker { color:var(--_vv-muted); font-size:10px; }\n.shape-inspector div { max-height:260px; overflow:auto; }\n.shape-inspector p { margin:6px 0; overflow-wrap:anywhere; }\n.shape-inspector dl { display:grid; grid-template-columns:minmax(60px,1fr) 1.5fr; gap:6px 10px; }\n.shape-inspector dt { font-weight:500; }\n.shape-inspector dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }\n.shape-inspector h3 { margin:12px 0 5px; font-size:11px; }\n.shape-inspector a { color:var(--_vv-accent); overflow-wrap:anywhere; }\n.status { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:29px; padding:0 8px 0 12px; border-top:1px solid var(--_vv-border); color:var(--_vv-muted); background:var(--_vv-surface); font-size:10px; }\n.status-message { display:flex; gap:16px; min-width:0; }\n.status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }\n.empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }\n@media(max-width:1100px) { .ribbon-hint { display:none; } }\n@media(max-width:760px) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  #home-panel>.ribbon-group:not(.search-group):not(.undo-group) { display:none; }\n  .ribbon-command { min-width:90px; }\n  .workspace { display:block; overflow:auto; }\n  .viewport { height:340px; min-height:260px; padding:16px 4px; }\n  .inspector-pane { width:100%; overflow:visible; border-left:0; border-top:1px solid var(--_vv-border); }\n  .status { flex-wrap:wrap; gap:0; padding:4px 8px; }\n  .status-message { width:100%; min-height:18px; }\n}\n@media(pointer:coarse) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:96px; }\n}\n/* Suite ribbon: tabs lead directly into Visio command groups. */\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.ribbon-hint { order:3; padding:10px 18px; }\n.ribbon-command { min-width:82px; }\n.pane-close { display:none; }\n@media(max-width:760px) {\n .ribbon-content { min-height:54px; padding:4px 0; }\n .search-feedback,.group-label { display:none; }\n .ribbon-content { overflow-x:auto; scroll-snap-type:x mandatory; }\n .workspace { display:flex; position:relative; overflow:hidden; }\n .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }\n .inspector-pane { position:absolute; inset:0 0 0 auto; width:min(320px,100%); z-index:4; overflow:auto; border-left:1px solid var(--_vv-border); box-shadow:-8px 0 24px #0002; }\n .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }\n .status { min-height:48px; padding:2px 8px; }\n .status-message { display:none; }\n}\n.toolbar { position:relative; }\n.ribbon-command { font-size:12px; min-width:88px; }\n.ribbon-hint { font-size:12px; line-height:20px; flex:1; }\n.group-label { font-size:11px; line-height:14px; }\n.pane-heading { font-size:12px; }\n.status-message { flex:1; }\n@media(max-width:760px) {\n .status { flex-wrap:nowrap; gap:4px; min-height:48px; }\n}\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";
+export declare const viewerStyles = "\n:host {\n  display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;\n  color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 var(--_vv-font); contain:layout;\n}\n* { box-sizing:border-box; }\n[hidden] { display:none !important; }\nbutton,select,input,textarea { font:inherit; color:inherit; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; min-height:28px; padding:3px 8px; }\nbutton { cursor:pointer; }\nbutton:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }\nbutton:disabled { opacity:.4; cursor:default; }\nbutton:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--_vv-focus); outline-offset:2px; }\nbutton[aria-pressed=\"true\"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }\n.toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }\n.spacer { flex:1; }\n.ribbon-content { min-height:82px; display:flex; align-items:stretch; gap:0; padding:2px 4px; overflow-x:auto; }\n.ribbon-group { display:flex; flex-direction:column; justify-content:space-between; flex:none; gap:2px; padding:3px 10px 4px; border-right:1px solid var(--_vv-border); }\n.group-label { font-size:10px; line-height:12px; color:var(--_vv-muted); text-align:center; }\n.ribbon-actions { display:flex; align-items:stretch; gap:2px; flex:1; }\n.ribbon-command { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:70px; padding:2px 6px; border-color:transparent; background:transparent; font-size:11px; white-space:nowrap; }\n.ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }\n.workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }\n.pane-heading { height:37px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--_vv-border); font-size:11px; font-weight:600; }\n.viewport { position:relative; display:flex; flex-direction:column; flex:1; overflow:auto; min-width:0; min-height:0; padding:16px 4px; background:var(--_vv-bg); }\n.paper { display:block; flex:none; background:white; box-shadow:var(--_vv-shadow); margin:auto; }\n.paper [data-shape-id] { cursor:pointer; }\n.inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }\nsummary { cursor:pointer; min-height:22px; line-height:22px; font-weight:500; }\nsummary::marker { color:var(--_vv-muted); font-size:10px; }\n.shape-inspector div { max-height:260px; overflow:auto; }\n.shape-inspector p { margin:6px 0; overflow-wrap:anywhere; }\n.shape-inspector dl { display:grid; grid-template-columns:minmax(60px,1fr) 1.5fr; gap:6px 10px; }\n.shape-inspector dt { font-weight:500; }\n.shape-inspector dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }\n.shape-inspector h3 { margin:12px 0 5px; font-size:11px; }\n.shape-inspector a { color:var(--_vv-accent); overflow-wrap:anywhere; }\n.status { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:29px; padding:0 8px 0 12px; border-top:1px solid var(--_vv-border); color:var(--_vv-muted); background:var(--_vv-surface); font-size:10px; }\n.status-message { display:flex; gap:16px; min-width:0; }\n.status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }\n.empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }\n@media(max-width:1100px) { .ribbon-hint { display:none; } }\n@media(max-width:760px) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  #home-panel>.ribbon-group:not(.search-group):not(.undo-group) { display:none; }\n  .ribbon-command { min-width:90px; }\n  .workspace { display:block; overflow:auto; }\n  .viewport { height:340px; min-height:260px; padding:16px 4px; }\n  .inspector-pane { width:100%; overflow:visible; border-left:0; border-top:1px solid var(--_vv-border); }\n  .status { flex-wrap:wrap; gap:0; padding:4px 8px; }\n  .status-message { width:100%; min-height:18px; }\n}\n@media(pointer:coarse) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:96px; }\n}\n/* Suite ribbon: tabs lead directly into Visio command groups. */\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.ribbon-hint { order:3; padding:10px 18px; }\n.ribbon-command { min-width:82px; }\n.pane-close { display:none; }\n@media(max-width:760px) {\n .ribbon-content { min-height:54px; padding:4px 0; }\n .search-feedback,.group-label { display:none; }\n .ribbon-content { overflow-x:auto; scroll-snap-type:x mandatory; }\n .workspace { display:flex; position:relative; overflow:hidden; }\n .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }\n .inspector-pane { position:absolute; inset:0 0 0 auto; width:min(320px,100%); z-index:4; overflow:auto; border-left:1px solid var(--_vv-border); box-shadow:-8px 0 24px #0002; }\n .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }\n .status { min-height:48px; padding:2px 8px; }\n .status-message { display:none; }\n}\n.toolbar { position:relative; }\n.ribbon-command { font-size:12px; min-width:88px; }\n.ribbon-hint { font-size:12px; line-height:20px; flex:1; }\n.group-label { font-size:11px; line-height:14px; }\n.pane-heading { font-size:12px; }\n.status-message { flex:1; }\n@media(max-width:760px) {\n .status { flex-wrap:nowrap; gap:4px; min-height:48px; }\n}\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";

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

@@ -10,6 +10,8 @@ import { type CurrentPagePrintSnapshotOptions, type PrintSnapshot } from './prin
 declare const BaseElement: typeof HTMLElement;
 export declare class VisioViewerElement extends BaseElement {
     #private;
+    get canEdit(): boolean;
+    set canEdit(value: boolean);
     static observedAttributes: string[];
     readonly controller: ViewerController;
     constructor();