pptx-react-viewer 4.16.0 → 4.17.0

package/dist/{chunk-BTTAYCGK.mjs → chunk-Y5JCGX5P.mjs}

@@ -1,12 +1,12 @@
-import { computeFocusTargets, deckDataFieldChanged, aiChangeAnimationCss, changeGhostStyle, createChatHistoryStore, collectStoredChats, exportAiChatLogs, applyElementUpdate } from './chunk-WRQ7K3DG.mjs';
-import { useViewerOptions, useReadOnlyRecommendationState, useCompatibilityToastsState, useReducedMotion, useViewerState, useIsMobile, useResizablePanels, useDerivedSlideState, useZoomViewport, useEditorHistory, usePresentationSetup, useTouchGestures, useViewerDialogs, useEditorOperations, useViewerIntegration, useViewPreferencesSync, useLayoutSwitching, Rendering3DFlagsContext, CollaborationProvider, useCollaboration, useCollaborationDocumentSync, useFollowMode, useBroadcastFollower, SlideBackgroundImageLayer, StaticElementRenderer, safePrompt, scopeLayoutOptionsToActiveSlide, ChartPartSelectionProvider, useToolbarVisibility, useKeyboardInsets, useModalDismissDrag, ViewerOptionsStoreContext, ViewerOptionsContext, useViewerOptionsContext, useVirtualizedSlides, useSwipeNavigation, PresentationTransitionOverlay, RemoteSelectionOverlay, CollaborationCursorOverlay, useSheetDismissDrag, detectTargetType, parseEmailUrl, parseSlideFromUrl, ACTION_VERB_MAP, ElementRenderer, InlineCollaborationContext, SmartArtRenderer, playAnimationSound, ResizeHandles, imgSrc, renderStrokeView, useChartPartSelection, resolveSmartArtDataPalette } from './chunk-QLUA63T3.mjs';
-import { SHAPE_PRESETS, ANIMATION_PRESET_OPTIONS, cn, SLIDE_NAV_THUMBNAIL_WIDTH, DEFAULT_SECTION_GROUP_ID, SHORTCUT_REFERENCE_ITEMS as SHORTCUT_REFERENCE_ITEMS$1, TOOLBAR_SECTIONS, isConnectorOrLineElement, GRID_SIZE, MIN_ELEMENT_SIZE, CONNECTOR_ARROW_OPTIONS, ARROW_SIZE_OPTIONS, DEFAULT_FILL_COLOR, startMotionPathPreview, startPreviewAnimation, stopPreviewAnimation, DEFAULT_STROKE_COLOR, STROKE_DASH_OPTIONS } from './chunk-MFGRRONU.mjs';
-import { FIXED_TAB_GALLERIES, EMPTY_RESOLVED_CUSTOMIZATION, ANIMATION_DIRECTION_LABEL_KEYS, SWITCHABLE_LAYOUT_TYPES, compileEquationTemplateMathMl, buildUserFontFaceStyles, readStoredViewerPrefs, resolveThemeCatalogEntry, THEME_CATALOG, writeStoredViewerPrefs, openPptxFile, readBackstageRecentFile, isFeatureEnabled, isDialogAvailable, resolveAutosaveActivation, buildThemeColorMap, viewerOptionsToPreferences, applyPreferenceToOptions, resolveHistoryDepth, applyAutoCorrect, resolveImageResolutionScale, resolveAutosaveIntervalMs, resolveAutosaveIntervalSeconds, isPanelVisible, shouldShowAutosaveRecoveryPrompt, resolveOptionRootClasses, RIBBON_SCOPE_ATTR, resolve3DRenderingFlags, resolveSlideSizeSelection, RULER_THICKNESS, RULER_FONT_SIZE, editorThumbnailHeight, buildPreviewElements, deriveSlideFieldContext, SLIDE_TRANSITION_OPTIONS, hiddenSlideCue, EDITOR_THUMBNAIL_WIDTH, HIDDEN_SLIDE_SLASH_GRADIENT, HIDDEN_SLIDE_LABEL_KEY, visibleTemplateElements, normalizeHexColor, themeToCssVars, createCustomizationController, resolveEffectiveHiddenActions, listAutosaveSnapshots, resolveExpiredAutosaveSnapshots, deleteAutosaveSnapshot, masterViewCrudActions, applyMasterViewCrudAction, masterViewCrudFailureKey, EDITOR_CHROME_CSS, ribbonCustomizationCss, applyMotionPathPreset, resetSlideLayoutPath, DEFAULT_INSERT_CHART_KIND, hasCopyableFormat, templateSchemeFromTheme, createBackstagePresentation, playFeedbackSound, shouldDiscardAutosaveOnSuccessfulSave, setMasterViewBackgroundColor, canUseClipboard, runProgramNoticeStackStyle, compatToastStackStyle, printPropertiesFrameSlides, printPropertiesSlidesPerPage, PASTE_SPECIAL_OPTIONS, getDensePanelTouchTargetPx, shouldStickyActionRow, customizeOptionsTabs, VIEWER_OPTIONS_TABS, isOptionsPageVisible, DEFAULT_QUICK_ACCESS_COMMAND_IDS, isHeaderFooterDateTextVisible, isHeaderFooterHeaderTextVisible, isHeaderFooterFooterTextVisible, buildJoinCollaborationConfig, buildCreateCollaborationConfig, generateBroadcastRoomId, DEFAULT_BROADCAST_SERVER_URL, buildBroadcastViewerUrl, resolveTransportForServerUrl, getSlideBackgroundStyle, pushRecentColor, mruColorsPatch, shouldClearAutosaveCacheOnClose, canCropElement, cropSessionChanged, cancelCropUpdate, startCropSession, filterCommands, resolveTitleBarStatusKey, TITLE_BAR_CLASSES, TITLE_BAR_DEFAULT_FILE_KEY, editorThumbnailWidth, masterViewBackgroundColor, buildFieldSubstitutionContext, shouldConfirmExternalHyperlink, safeOpenUrl, resolvePresentationAction, isPpactionUrl, parsePpactionUrl, isPresentationAdvanceClick, toggleBlackboard, PRESENT_TOOLBAR_CLASSES, resolveEditPointsAvailability, isCurrentLayout, themeColorSchemesEqual, observeElementHeight, EXPANDED_MAX_HEIGHT, STATUS_BAR_CLASSES, buildBarActions, formatVersionTimestamp, formatRelativeTime, scanAvailableFontFamilies, PRESETS, CATEGORIES, convertOmmlToLatex, compileLatexEquation, convertLatexToOmml, EQUATION_TEMPLATES, clampPercent2, resolveDefaultPrintSettings, HANDOUT_OPTIONS, TOOLBAR_TABS, SHORTCUT_REFERENCE_ITEMS, resolveViewerAddinRows, availableQuickAccessCommands, addQuickAccessCommand, removeQuickAccessCommand, moveQuickAccessCommand, CUSTOM_FONT_ACCEPT, activateModalFocus, buildCollaborationShareUrl, buildActiveSessionUsers, SORTER_MIN_ZOOM, SORTER_ZOOM_STEP, SORTER_MAX_ZOOM, canGoPrevious, formatSlideCounter, READING_VIEW_COUNTER_ATTR, canGoNext, READING_VIEW_ATTR, OUTLINE_LEVEL_ATTR, OUTLINE_SLIDE_ATTR, OUTLINE_ROW_ATTR, OUTLINE_VIEW_ATTR, mobileElapsedSince, nextPresentedSlide, presenterPrevDisabled, presenterNextDisabled, formatMobileElapsed, mobileSlideCounter, presenterPaneAdvancesOnClick, presenterTimerProgress, PRESENTER_CONSOLE_CLASSES, formatElapsed, cropModeKeyAction, extraQuickAccessCommands, visibleContextualTabs, resolveActiveRibbonTab, resolveScreenTip, contextualTabLabelKey, RIBBON_CONTEXTUAL_TAB_ATTR, TAB_ROW_ACTION_CLASSES, customizeBackstageNav, BACKSTAGE_NAV, listBackstageRecentFiles, BACKSTAGE_BACK_CLASSES, BACKSTAGE_NAV_CLASSES, hasTextProperties, textFontSizePtToPx, INSERT_CHART_TYPES, ACTION_BUTTON_PRESETS, hasShapeProperties, shapeFillChange, shapeOutlineChange, CONTEXTUAL_TAB_GROUPS, editorThumbnailStep, resolveSlidePaneClick, SLIDE_VIRTUALIZATION_THRESHOLD, buildSlidePaneContextMenuEntries, isEditPointsEnabled, PRESENTATION_HIT_TEST_CSS, PRESENTATION_STAGE_ATTRIBUTE, buildStrokePathD, cursorForTool, annotationOverlayZIndex, presentationInkPath, resolveNotesSchematicBodyFontSizePx, PRESENTER_NAVIGATOR_LABEL_KEYS, subtitleRecognitionLanguage, subtitleSettingsFromOptions, getSpeechRecognitionCtor, mergeCaptionResults, PEN_COLORS, HIGHLIGHTER_COLORS, isBlackboardActive, customizeContextMenuEntries, buildContextMenuEntries, customizeCanvasContextMenuEntries, buildCanvasContextMenuEntries, buildLayoutPreviewGeometry, scaleSlidesForSizeChange, slideSizeToCanvasPx, resolveSelectionPaneRename, themeEditorLabels, resolveNotesSegments, segmentsToEditorHtml, DEBOUNCE_MS, createPlainNotesSegments, parseSegmentsFromRichEditor, segmentsToPlainText, getCurrentParagraphIndex, segmentsToParagraphs, paragraphsToSegments, MAX_INDENT_LEVEL, INDENT_PX, isUrlSafe, buildNotesPrintHtml, MIN_TOUCH_TARGET_PX, toggleSheet, SMARTART_PREVIEW_ELEMENT_HEIGHT, SMARTART_PREVIEW_ELEMENT_WIDTH, buildSmartArtPreviewElement, sanitizeMathMl, computeHandoutLayout, getPrintableArea, generateNoteLineCount, computeAllNotesPages, getNotesPrintableArea, downloadBlob, clampOptionNumber, QUICK_ACCESS_COMMAND_CATALOG, registerCustomFont, openReadingView, applyReadingViewCommand, createPresentationKeyBuffer, readingViewFitScale, READING_VIEW_STAGE_ATTR, buildOutline, applyOutlineEdit, mapOutlineKey, notesSegmentsToSpans, erasePresentationInkAt, movePresenterPointer, appendPresentationInkPoint, PRESENTER_CONSOLE_CONTROLS, NOTES_FONT_SIZE_DEFAULT, formatTime, NOTES_FONT_SIZE_MIN, clampNotesFontSize, NOTES_FONT_SIZE_STEP, NOTES_FONT_SIZE_MAX, BACKSTAGE_TEMPLATES, formatBackstageDate, formatBackstageSize, customizeBackstageCards, backstageCardsFor, DEFAULT_VIEWER_PROFILE, resolveProfileInitial, AVATAR_COLOR_SWATCHES, resolveDefaultFontFamily, textFontSizePxToPt, buildFontCatalog, COMMON_FONT_SIZES, RIBBON_CONTROL_ATTR, FREEFORM_TOOL_IDS, isDrawingToolVisible, FREEFORM_TOOL_LABEL_KEYS, getSelectionTextStyleFlags, getInlineEditorSelectionResult, selectedParagraphBulletKind, elementBulletKind, selectionBulletKind, TEXT_DECORATION_FLAGS, nextToggleValue, CHARACTER_SPACING_OPTIONS, OFFICE_COLOR_SWATCHES, RIBBON_GROUP_ATTR, RIBBON_SHAPE_SWATCHES, buildRibbonGallery, galleryHasItems, inlineGalleryItems, canGroupSelection, canUngroupSelection, canSetStrokeWidth, strokeWidthOf, readRibbonTransitionDraft, ribbonTransitionUpdates, playSlideTransitionPreview, RIBBON_TRANSITION_PRESETS, transitionSoundOptions, transitionSoundSelectedValue, DEFAULT_MOTION_PATH_PRESET_ID, SLIDE_SHOW_COMMAND_GROUPS, RECORD_COMMAND_GROUPS, HELP_RIBBON_COMMANDS, masterViewPseudoSlide, PRESENTATION_ANIM_TRIGGER_ATTRIBUTE, motionPathFor, setMotionPath, getShapeAdjustmentHandleDescriptors, shouldShowElementHandles, clampFlyoutPosition, computeAnchoredPopupPosition, applyTableStyleDelete, applyTableStyleMapChange, handleReadingViewKey, getLocalStorageUsageSummary, saveViewerProfile, clearAllLocalViewerData, SLIDE_TEMPLATES, buildThemeColorSwatchGrid, themeColorSwatchRows, findSelectedThemeSwatch, themeSwatchCommit, RIBBON_GALLERY_POPUP_ATTR, applyRibbonGalleryItem, galleryItemLabel, RIBBON_GALLERY_ITEM_ATTR, RIBBON_GALLERY_ATTR, MERGE_SHAPES_LABEL_KEY, MERGE_SHAPES_HINT_KEY, MERGE_SHAPES_MENU_ITEMS, CROP_LABEL_KEY, CROP_ASPECT_LABEL_KEY, CROP_ASPECT_GROUP_LABEL_KEYS, CROP_ASPECT_PRESETS, CROP_FILL_LABEL_KEY, CROP_FIT_LABEL_KEY, readSoundFileAsDataUrl, applyTransitionSoundFile, TRANSITION_SOUND_OTHER_VALUE, TRANSITION_SOUND_NONE_VALUE, clearTransitionSound, applyTransitionStockSound, transitionStockSoundId, getEffectSoundAsset, playAnimationRibbonPreview, ENTRANCE_PRESET_VALUES, EMPHASIS_PRESET_VALUES, EXIT_PRESET_VALUES, MOTION_PATH_FAMILIES, motionPathFamilyLabelKey, motionPathPresetsByFamily, motionPathPresetLabelKey, SLIDE_SHOW_OPTIONS, createViewerOptionsStore, subtitleSettingsLabels, attachEditorImagePaste, authorConnectorBetweenSites, findEraserHitElementId, generateTicks, rulerDragToGuidePosition, resolveElementInteractivity, getElementTransformWithoutRotation, getElementTransform, buildChartQuickActionsDescriptor, applyChartElementToggle, CHART_QUICK_ACTION_BUTTON_SIZE, applyChartStylePreset, hideChartSeries, restoreFilteredSeries, buildCropOverlay, CROP_HANDLE_ARIA_KEY, getActiveXControlOverlayView, buildCommentMarkers, COMMENT_MARKER_SIZE, collectConnectorSiteCandidates, getConnectorEndpointHandles, findConnectorSiteNear, motionPathToSvgD, motionPathEndPixel, isEditableMotionPath, setMotionPathEnd, canEditElementPoints, hasMultipleSelectedTableCells, isElementLocked, isImageLikeElement, mergeSlideTransition, getElementLabel, effectiveDirection, TRIGGER_OPTIONS, effectiveTimingCurve, mapSlideSorterKey, isEditorTextInputTarget, clampSorterZoom, buildSlideTemplateContent, updateSubtitleSettings, buildFreeformShapeElement, buildLiveInkStrokeView, beginCropDrag, CONNECTOR_SITE_SNAP_PX, resolveConnectorEndpointUpdate, withConnectorEndpointUpdate, getShapeConnectionSites, FreeformToolSession, attachOverlayKeyboard, EditPointsSession, EDIT_POINTS_STYLE, elementLockTogglePatch, buildTableDataGrid, getDenseGridLayoutPlan, appendTableElementRow, removeLastTableElementRow, appendTableElementColumn, removeLastTableElementColumn, removeTableElementColumn, removeTableElementRow, setTableElementCellText, TABLE_STYLE_PRESETS, applyTableStylePreset, tableStyleAssignmentUpdate, evenColumnWidths, redistributeColumnWidth, evenRowHeights, patchChartData, collapseChartTitleRunsForEdit, chartGridlinesState, chartGridlinesPatch, seriesSecondaryAxisPatch, setChartCategoryLabel, setChartCellValue, addChartCategory, removeChartCategory, addChartSeries, removeChartSeries, setDataLabelsRangeCache, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, setChartDataPointMarker, setChartDataPointLabel, describeSmartArtBounds, canAddTopLevelNode, classifyExtraConnections, siblingIndex, siblingCount, canRemoveTopLevelNode, canInteractWithElement, buildOleObjectNamePatch, getOleObjectTypeLabel, sanitizeGradientStops, shouldShowAccessibilitySection, pptxActionToElementAction, withFrameSlides, withSlidesPerPage, THEME_COLOR_SCHEME_KEYS, applyThemeOverrideToSlide, COLOR_MAP_ALIAS_KEYS, DEFAULT_COLOR_MAP, schemaLabel, THEME_COLOR_SLOT_LABEL_KEYS, SLIDE_SIZE_PRESETS, TRANSITION_VALID_DIRECTIONS, TRANSITION_ORIENTATION_TYPES, TRANSITION_PATTERN_OPTIONS, TRANSITION_THRUBLK_TYPES, clampTransitionNumber, TRANSITION_SPEED_OPTIONS, TRANSITION_MORPH_OPTIONS, flattenTagCollections, resolveTemplateBackgroundRows, formatCommentTimestamp, commentMentionQuery, matchCommentMentionAuthors, buildAnimationTimelineRows, clearMotionPath, setTrigger, setTriggerBookmark, getEffectSoundState, setEffectSound, setEffectStockSound, setAfterAnimation, setAfterAnimationColor, directionValuesFor, buildAnimationTimelineBars, motionPathPresetIdForPath, EFFECT_SOUND_CATALOGUE, listMediaBookmarkOptions, selectedBookmarkOptionValue, hasTiltData, toElementAxes, dragCropHandle, panCropImage, clientToSlidePoint, EDIT_POINTS_TARGET_ATTR, normalizeTableStyleGuid, describeTableStyleEditor, TABLE_STYLE_EDITOR_PARTS, computeMergeCellRight, computeMergeCellDown, computeSplitCell, updateMergeAttrsInRawXml, resolveDisplayedChartType, CHART_TYPE_OPTIONS, chartDataLabelsTogglePatch, BAR3D_SHAPE_OPTIONS, bar3DShapePatch, RADAR_STYLE_OPTIONS, radarStylePatch, SURFACE_WIREFRAME_OPTIONS, surfaceWireframePatch, isSeriesUsingSecondaryAxis, listChartUserShapeRows, withChartUserShapeAdded, createDefaultChartUserShape, withChartUserShapeRowRemoved, withChartUserShapeRowTextUpdated, SMARTART_COLOR_SCHEME_LABEL_KEYS, SMARTART_STYLE_LABEL_KEYS, addSmartArtNodeAsChild, setSmartArtNodeStyle, removeSmartArtNode, addSiblingAfter, removeEmptyNode, demote, promote, updateSmartArtNodeText, reorder, clampCropValue, DUOTONE_PRESETS, ARTISTIC_EFFECTS, mediaTrimEndSeconds, trimmedMediaDurationMs, mediaTrimEndAbsoluteMs, mediaTrimEndMsFromAbsoluteMs, buildOleEditDialogDescriptor, buildOleContentUpdatePatch, applyOleSheetCellEdit, getOleSheetGrid, applyOleDocumentParagraphEdit, getOleDocumentParagraphs, applyOleNestedDeckElementTextEdit, getOleNestedDeckDetail, replaceOleFile, getNonVisualDescriptionFields, resolveActionType, ELEMENT_ACTION_TYPE_OPTIONS, elementActionToPptxAction, canCommitActionType, slideSizeFromPreset, withSlideSizeOrientation, TRANSITION_DIR_ARROWS, buildDirectionGrid, getSlideTransitionAnimations, SLIDE_TRANSITION_KEYFRAMES, updateTagInCollections, deleteTagFromCollections, addTagToCollections, commentTextSegments, COMMENT_MENTION_CLASS, COMMENT_MENTION_ATTRIBUTE, insertCommentMention, reorderAnimationTimelineRows, applyAnimationTimelineOrder, animationEffectLabel, overlayPointerInput, TABLE_STYLE_BORDER_SIDES, applyTableStyleFieldEdit, createTableStyleEntry, addTableStyleToMap, deleteTableStyleFromMap, LBL, SEL, FILL_MODE_OPTIONS, SECTION_HEADING, NUM, getChartUserShapeGroupTransform, withChartUserShapeGroupChildAdded, createDefaultChartUserShapeGroupChild, withChartUserShapeRowUpdated, getChartUserShapeRowChartBox, withChartUserShapeRowFlipUpdated, withChartUserShapeRowRotationUpdated, withChartUserShapeRowChartBoxUpdated, switchSmartArtLayout, rebuildDrawingShapesIfCleared, mediaTrimEndMsFromSeconds, validateMediaTrimRange, SHAPE_QUICK_STYLES, quickStyleSwatchCss, PATTERN_PRESET_OPTIONS, getPatternSvg, COMPOUND_LINE_OPTIONS, LINE_JOIN_OPTIONS, LINE_CAP_OPTIONS, TEXT_WARP_PRESETS, warpPreviewPath, text3dPtToEmu, text3dEmuToPt, MATERIAL_PRESETS, toSlideIndex, TABLE_STYLE_BORDER_SIDE_LABEL_KEYS, TABLE_STYLE_DASH_PRESETS, GRADIENT_TYPE_OPTIONS, PATTERN_OPTIONS, FILL_PATTERN_LABEL_KEYS, openNativeEyeDropper, toggleText3dExtrusion, BEVEL_PRESETS, cropFit, cropFill, cropToAspectRatio } from './chunk-MJ6LTUJ3.mjs';
-import { LOCALE_CATALOG, ALIGNMENT_LABEL_KEYS } from './chunk-CJSIEITL.mjs';
-import React6, { createContext, lazy, forwardRef, useEffect, useState, useCallback, useMemo, useRef, useLayoutEffect, useSyncExternalStore, useId, useContext, useDeferredValue, Fragment as Fragment$1, Suspense, useReducer } from 'react';
+import { computeFocusTargets, deckDataFieldChanged, aiChangeAnimationCss, changeGhostStyle, createChatHistoryStore, collectStoredChats, exportAiChatLogs, applyElementUpdate } from './chunk-PU6X5LPR.mjs';
+import { useViewerOptions, useReadOnlyRecommendationState, useCompatibilityToastsState, useReducedMotion, useViewerState, useIsMobile, useResizablePanels, useDerivedSlideState, useZoomViewport, useEditorHistory, usePresentationSetup, useTouchGestures, useViewerDialogs, useEditorOperations, useViewerIntegration, useViewPreferencesSync, useLayoutSwitching, Rendering3DFlagsContext, CollaborationProvider, useCollaboration, useCollaborationDocumentSync, useFollowMode, useBroadcastFollower, SlideBackgroundImageLayer, StaticElementRenderer, safePrompt, scopeLayoutOptionsToActiveSlide, ChartPartSelectionProvider, useToolbarVisibility, useKeyboardInsets, useModalDismissDrag, ViewerOptionsStoreContext, ViewerOptionsContext, useViewerOptionsContext, useVirtualizedSlides, useSwipeNavigation, PresentationTransitionOverlay, RemoteSelectionOverlay, CollaborationCursorOverlay, useSheetDismissDrag, detectTargetType, parseEmailUrl, parseSlideFromUrl, ACTION_VERB_MAP, ElementRenderer, InlineCollaborationContext, SmartArtRenderer, playAnimationSound, ResizeHandles, imgSrc, renderStrokeView, useChartPartSelection, resolveSmartArtDataPalette } from './chunk-AC4V4C43.mjs';
+import { SHAPE_PRESETS, ANIMATION_PRESET_OPTIONS, cn, SLIDE_NAV_THUMBNAIL_WIDTH, DEFAULT_SECTION_GROUP_ID, SHORTCUT_REFERENCE_ITEMS as SHORTCUT_REFERENCE_ITEMS$1, TOOLBAR_SECTIONS, isConnectorOrLineElement, GRID_SIZE, MIN_ELEMENT_SIZE, CONNECTOR_ARROW_OPTIONS, ARROW_SIZE_OPTIONS, DEFAULT_FILL_COLOR, startMotionPathPreview, startPreviewAnimation, stopPreviewAnimation, DEFAULT_STROKE_COLOR, STROKE_DASH_OPTIONS } from './chunk-CRHNHNQL.mjs';
+import { EMPTY_RESOLVED_CUSTOMIZATION, FIXED_TAB_GALLERIES, editingHomeControls, ANIMATION_DIRECTION_LABEL_KEYS, SWITCHABLE_LAYOUT_TYPES, compileEquationTemplateMathMl, buildUserFontFaceStyles, readStoredViewerPrefs, resolveThemeCatalogEntry, THEME_CATALOG, writeStoredViewerPrefs, openPptxFile, readBackstageRecentFile, isFeatureEnabled, isDialogAvailable, resolveAutosaveActivation, buildThemeColorMap, viewerOptionsToPreferences, applyPreferenceToOptions, resolveHistoryDepth, applyAutoCorrect, resolveImageResolutionScale, resolveAutosaveIntervalMs, resolveAutosaveIntervalSeconds, isPanelVisible, shouldShowAutosaveRecoveryPrompt, resolveOptionRootClasses, RIBBON_SCOPE_ATTR, resolve3DRenderingFlags, resolveSlideSizeSelection, RULER_THICKNESS, RULER_FONT_SIZE, editorThumbnailHeight, buildPreviewElements, deriveSlideFieldContext, SLIDE_TRANSITION_OPTIONS, hiddenSlideCue, EDITOR_THUMBNAIL_WIDTH, HIDDEN_SLIDE_SLASH_GRADIENT, HIDDEN_SLIDE_LABEL_KEY, visibleTemplateElements, normalizeHexColor, themeToCssVars, createCustomizationController, resolveEffectiveHiddenActions, listAutosaveSnapshots, resolveExpiredAutosaveSnapshots, deleteAutosaveSnapshot, masterViewCrudActions, applyMasterViewCrudAction, masterViewCrudFailureKey, EDITOR_CHROME_CSS, ribbonCustomizationCss, applyMotionPathPreset, resetSlideLayoutPath, DEFAULT_INSERT_CHART_KIND, hasCopyableFormat, templateSchemeFromTheme, createBackstagePresentation, playFeedbackSound, shouldDiscardAutosaveOnSuccessfulSave, setMasterViewBackgroundColor, canUseClipboard, runProgramNoticeStackStyle, compatToastStackStyle, printPropertiesFrameSlides, printPropertiesSlidesPerPage, PASTE_SPECIAL_OPTIONS, getDensePanelTouchTargetPx, shouldStickyActionRow, customizeOptionsTabs, VIEWER_OPTIONS_TABS, isOptionsPageVisible, DEFAULT_QUICK_ACCESS_COMMAND_IDS, isHeaderFooterDateTextVisible, isHeaderFooterHeaderTextVisible, isHeaderFooterFooterTextVisible, buildJoinCollaborationConfig, buildCreateCollaborationConfig, generateBroadcastRoomId, DEFAULT_BROADCAST_SERVER_URL, buildBroadcastViewerUrl, resolveTransportForServerUrl, getSlideBackgroundStyle, pushRecentColor, mruColorsPatch, shouldClearAutosaveCacheOnClose, canCropElement, cropSessionChanged, cancelCropUpdate, startCropSession, filterCommands, resolveTitleBarStatusKey, TITLE_BAR_CLASSES, TITLE_BAR_DEFAULT_FILE_KEY, editorThumbnailWidth, masterViewBackgroundColor, buildFieldSubstitutionContext, shouldConfirmExternalHyperlink, safeOpenUrl, resolvePresentationAction, isPpactionUrl, parsePpactionUrl, isPresentationAdvanceClick, toggleBlackboard, PRESENT_TOOLBAR_CLASSES, resolveEditPointsAvailability, isCurrentLayout, themeColorSchemesEqual, observeElementHeight, EXPANDED_MAX_HEIGHT, STATUS_BAR_CLASSES, buildBarActions, formatVersionTimestamp, formatRelativeTime, scanAvailableFontFamilies, PRESETS, CATEGORIES, convertOmmlToLatex, compileLatexEquation, convertLatexToOmml, EQUATION_TEMPLATES, clampPercent2, resolveDefaultPrintSettings, HANDOUT_OPTIONS, TOOLBAR_TABS, SHORTCUT_REFERENCE_ITEMS, resolveViewerAddinRows, availableQuickAccessCommands, addQuickAccessCommand, removeQuickAccessCommand, moveQuickAccessCommand, CUSTOM_FONT_ACCEPT, activateModalFocus, buildCollaborationShareUrl, buildActiveSessionUsers, SORTER_MIN_ZOOM, SORTER_ZOOM_STEP, SORTER_MAX_ZOOM, canGoPrevious, formatSlideCounter, READING_VIEW_COUNTER_ATTR, canGoNext, READING_VIEW_ATTR, OUTLINE_LEVEL_ATTR, OUTLINE_SLIDE_ATTR, OUTLINE_ROW_ATTR, OUTLINE_VIEW_ATTR, mobileElapsedSince, nextPresentedSlide, presenterPrevDisabled, presenterNextDisabled, formatMobileElapsed, mobileSlideCounter, presenterPaneAdvancesOnClick, presenterTimerProgress, PRESENTER_CONSOLE_CLASSES, formatElapsed, cropModeKeyAction, extraQuickAccessCommands, visibleContextualTabs, resolveActiveRibbonTab, resolveScreenTip, contextualTabLabelKey, RIBBON_CONTEXTUAL_TAB_ATTR, TAB_ROW_ACTION_CLASSES, customizeBackstageNav, BACKSTAGE_NAV, listBackstageRecentFiles, BACKSTAGE_BACK_CLASSES, BACKSTAGE_NAV_CLASSES, hasTextProperties, textFontSizePtToPx, FREEFORM_TOOL_IDS, isDrawingToolVisible, hasShapeProperties, shapeFillChange, shapeOutlineChange, DESIGN_RIBBON_GROUPS, DESIGN_RIBBON_COMMANDS, designCommandState, CONTEXTUAL_TAB_GROUPS, editorThumbnailStep, resolveSlidePaneClick, SLIDE_VIRTUALIZATION_THRESHOLD, buildSlidePaneContextMenuEntries, isEditPointsEnabled, PRESENTATION_HIT_TEST_CSS, PRESENTATION_STAGE_ATTRIBUTE, buildStrokePathD, cursorForTool, annotationOverlayZIndex, presentationInkPath, resolveNotesSchematicBodyFontSizePx, PRESENTER_NAVIGATOR_LABEL_KEYS, subtitleRecognitionLanguage, subtitleSettingsFromOptions, getSpeechRecognitionCtor, mergeCaptionResults, PEN_COLORS, HIGHLIGHTER_COLORS, isBlackboardActive, customizeContextMenuEntries, buildContextMenuEntries, customizeCanvasContextMenuEntries, buildCanvasContextMenuEntries, buildLayoutPreviewGeometry, scaleSlidesForSizeChange, slideSizeToCanvasPx, resolveSelectionPaneRename, themeEditorLabels, resolveNotesSegments, segmentsToEditorHtml, DEBOUNCE_MS, createPlainNotesSegments, parseSegmentsFromRichEditor, segmentsToPlainText, getCurrentParagraphIndex, segmentsToParagraphs, paragraphsToSegments, MAX_INDENT_LEVEL, INDENT_PX, isUrlSafe, buildNotesPrintHtml, MIN_TOUCH_TARGET_PX, toggleSheet, SMARTART_PREVIEW_ELEMENT_HEIGHT, SMARTART_PREVIEW_ELEMENT_WIDTH, buildSmartArtPreviewElement, sanitizeMathMl, computeHandoutLayout, getPrintableArea, generateNoteLineCount, computeAllNotesPages, getNotesPrintableArea, downloadBlob, clampOptionNumber, QUICK_ACCESS_COMMAND_CATALOG, registerCustomFont, openReadingView, applyReadingViewCommand, createPresentationKeyBuffer, readingViewFitScale, READING_VIEW_STAGE_ATTR, buildOutline, applyOutlineEdit, mapOutlineKey, notesSegmentsToSpans, erasePresentationInkAt, movePresenterPointer, appendPresentationInkPoint, PRESENTER_CONSOLE_CONTROLS, NOTES_FONT_SIZE_DEFAULT, formatTime, NOTES_FONT_SIZE_MIN, clampNotesFontSize, NOTES_FONT_SIZE_STEP, NOTES_FONT_SIZE_MAX, BACKSTAGE_TEMPLATES, formatBackstageDate, formatBackstageSize, customizeBackstageCards, backstageCardsFor, DEFAULT_VIEWER_PROFILE, resolveProfileInitial, AVATAR_COLOR_SWATCHES, resolveDefaultFontFamily, textFontSizePxToPt, clipboardHomeControls, buildFontCatalog, COMMON_FONT_SIZES, getInlineEditorSelectionResult, selectedParagraphBulletKind, elementBulletKind, selectionBulletKind, fontHomeControls, nextToggleValue, CHARACTER_SPACING_OPTIONS, OFFICE_COLOR_SWATCHES, RIBBON_GROUP_ATTR, paragraphHomeAlign, paragraphHomeControls, paragraphHomeAction, RIBBON_CONTROL_ATTR, RIBBON_SHAPE_SWATCHES, buildRibbonGallery, canGroupSelection, canUngroupSelection, canSetStrokeWidth, strokeWidthOf, readRibbonTransitionDraft, SLIDE_SHOW_COMMAND_GROUPS, RECORD_COMMAND_GROUPS, buildReviewRibbon, HELP_RIBBON_COMMANDS, galleryTextLabel, masterViewPseudoSlide, PRESENTATION_ANIM_TRIGGER_ATTRIBUTE, parentSelection, slideSpaceElement, isGroupMember, motionPathFor, setMotionPath, getShapeAdjustmentHandleDescriptors, shouldShowElementHandles, clampFlyoutPosition, computeAnchoredPopupPosition, applyTableStyleDelete, applyTableStyleMapChange, handleReadingViewKey, getLocalStorageUsageSummary, saveViewerProfile, clearAllLocalViewerData, SLIDE_TEMPLATES, getSelectionTextStyleFlags, TEXT_DECORATION_FLAGS, buildThemeColorSwatchGrid, themeColorSwatchRows, findSelectedThemeSwatch, themeSwatchCommit, applyRibbonGalleryItem, MERGE_SHAPES_LABEL_KEY, MERGE_SHAPES_HINT_KEY, MERGE_SHAPES_MENU_ITEMS, CROP_LABEL_KEY, CROP_ASPECT_LABEL_KEY, CROP_ASPECT_GROUP_LABEL_KEYS, CROP_ASPECT_PRESETS, CROP_FILL_LABEL_KEY, CROP_FIT_LABEL_KEY, ribbonTransitionsDraftPatch, ribbonTransitionUpdates, ribbonTransitionsSoundChange, ribbonTransitionStockSoundUrl, playSlideTransitionPreview, playAnimationRibbonPreview, SLIDE_SHOW_OPTIONS, createViewerOptionsStore, subtitleSettingsLabels, attachEditorImagePaste, authorConnectorBetweenSites, findEraserHitElementId, generateTicks, rulerDragToGuidePosition, resolveElementInteractivity, getElementTransformWithoutRotation, getElementTransform, buildChartQuickActionsDescriptor, applyChartElementToggle, CHART_QUICK_ACTION_BUTTON_SIZE, applyChartStylePreset, hideChartSeries, restoreFilteredSeries, buildCropOverlay, CROP_HANDLE_ARIA_KEY, getActiveXControlOverlayView, buildCommentMarkers, COMMENT_MARKER_SIZE, collectConnectorSiteCandidates, getConnectorEndpointHandles, findConnectorSiteNear, motionPathToSvgD, motionPathEndPixel, isEditableMotionPath, setMotionPathEnd, canEditElementPoints, hasMultipleSelectedTableCells, isElementLocked, isImageLikeElement, mergeSlideTransition, getElementLabel, effectiveDirection, TRIGGER_OPTIONS, effectiveTimingCurve, mapSlideSorterKey, isEditorTextInputTarget, clampSorterZoom, buildSlideTemplateContent, updateSubtitleSettings, buildFreeformShapeElement, buildLiveInkStrokeView, beginCropDrag, CONNECTOR_SITE_SNAP_PX, resolveConnectorEndpointUpdate, withConnectorEndpointUpdate, getShapeConnectionSites, FreeformToolSession, attachOverlayKeyboard, EditPointsSession, EDIT_POINTS_STYLE, elementLockTogglePatch, buildTableDataGrid, getDenseGridLayoutPlan, appendTableElementRow, removeLastTableElementRow, appendTableElementColumn, removeLastTableElementColumn, removeTableElementColumn, removeTableElementRow, setTableElementCellText, TABLE_STYLE_PRESETS, applyTableStylePreset, tableStyleAssignmentUpdate, evenColumnWidths, redistributeColumnWidth, evenRowHeights, patchChartData, collapseChartTitleRunsForEdit, chartGridlinesState, chartGridlinesPatch, seriesSecondaryAxisPatch, setChartCategoryLabel, setChartCellValue, addChartCategory, removeChartCategory, addChartSeries, removeChartSeries, setDataLabelsRangeCache, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, setChartDataPointMarker, setChartDataPointLabel, describeSmartArtBounds, canAddTopLevelNode, classifyExtraConnections, siblingIndex, siblingCount, canRemoveTopLevelNode, canInteractWithElement, buildOleObjectNamePatch, getOleObjectTypeLabel, sanitizeGradientStops, shouldShowAccessibilitySection, pptxActionToElementAction, withFrameSlides, withSlidesPerPage, THEME_COLOR_SCHEME_KEYS, applyThemeOverrideToSlide, COLOR_MAP_ALIAS_KEYS, DEFAULT_COLOR_MAP, schemaLabel, THEME_COLOR_SLOT_LABEL_KEYS, SLIDE_SIZE_PRESETS, TRANSITION_VALID_DIRECTIONS, TRANSITION_ORIENTATION_TYPES, TRANSITION_PATTERN_OPTIONS, TRANSITION_THRUBLK_TYPES, clampTransitionNumber, TRANSITION_SPEED_OPTIONS, TRANSITION_MORPH_OPTIONS, flattenTagCollections, resolveTemplateBackgroundRows, formatCommentTimestamp, commentMentionQuery, matchCommentMentionAuthors, buildAnimationTimelineRows, clearMotionPath, setTrigger, setTriggerBookmark, getEffectSoundState, setEffectSound, setEffectStockSound, setAfterAnimation, setAfterAnimationColor, directionValuesFor, buildAnimationTimelineBars, motionPathPresetIdForPath, MOTION_PATH_FAMILIES, motionPathPresetsByFamily, motionPathPresetLabelKey, motionPathFamilyLabelKey, EFFECT_SOUND_CATALOGUE, listMediaBookmarkOptions, selectedBookmarkOptionValue, hasTiltData, toElementAxes, dragCropHandle, panCropImage, clientToSlidePoint, EDIT_POINTS_TARGET_ATTR, normalizeTableStyleGuid, describeTableStyleEditor, TABLE_STYLE_EDITOR_PARTS, computeMergeCellRight, computeMergeCellDown, computeSplitCell, updateMergeAttrsInRawXml, resolveDisplayedChartType, CHART_TYPE_OPTIONS, chartDataLabelsTogglePatch, BAR3D_SHAPE_OPTIONS, bar3DShapePatch, RADAR_STYLE_OPTIONS, radarStylePatch, SURFACE_WIREFRAME_OPTIONS, surfaceWireframePatch, isSeriesUsingSecondaryAxis, listChartUserShapeRows, withChartUserShapeAdded, createDefaultChartUserShape, withChartUserShapeRowRemoved, withChartUserShapeRowTextUpdated, SMARTART_COLOR_SCHEME_LABEL_KEYS, SMARTART_STYLE_LABEL_KEYS, addSmartArtNodeAsChild, setSmartArtNodeStyle, removeSmartArtNode, addSiblingAfter, removeEmptyNode, demote, promote, updateSmartArtNodeText, reorder, clampCropValue, DUOTONE_PRESETS, ARTISTIC_EFFECTS, mediaTrimEndSeconds, trimmedMediaDurationMs, mediaTrimEndAbsoluteMs, mediaTrimEndMsFromAbsoluteMs, buildOleEditDialogDescriptor, buildOleContentUpdatePatch, applyOleSheetCellEdit, getOleSheetGrid, applyOleDocumentParagraphEdit, getOleDocumentParagraphs, applyOleNestedDeckElementTextEdit, getOleNestedDeckDetail, replaceOleFile, getNonVisualDescriptionFields, resolveActionType, ELEMENT_ACTION_TYPE_OPTIONS, elementActionToPptxAction, canCommitActionType, slideSizeFromPreset, withSlideSizeOrientation, TRANSITION_DIR_ARROWS, buildDirectionGrid, getSlideTransitionAnimations, SLIDE_TRANSITION_KEYFRAMES, updateTagInCollections, deleteTagFromCollections, addTagToCollections, commentTextSegments, COMMENT_MENTION_CLASS, COMMENT_MENTION_ATTRIBUTE, insertCommentMention, reorderAnimationTimelineRows, applyAnimationTimelineOrder, getEffectSoundAsset, animationEffectLabel, overlayPointerInput, TABLE_STYLE_BORDER_SIDES, applyTableStyleFieldEdit, createTableStyleEntry, addTableStyleToMap, deleteTableStyleFromMap, LBL, SEL, FILL_MODE_OPTIONS, SECTION_HEADING, NUM, getChartUserShapeGroupTransform, withChartUserShapeGroupChildAdded, createDefaultChartUserShapeGroupChild, withChartUserShapeRowUpdated, getChartUserShapeRowChartBox, withChartUserShapeRowFlipUpdated, withChartUserShapeRowRotationUpdated, withChartUserShapeRowChartBoxUpdated, switchSmartArtLayout, rebuildDrawingShapesIfCleared, mediaTrimEndMsFromSeconds, validateMediaTrimRange, SHAPE_QUICK_STYLES, quickStyleSwatchCss, PATTERN_PRESET_OPTIONS, getPatternSvg, COMPOUND_LINE_OPTIONS, LINE_JOIN_OPTIONS, LINE_CAP_OPTIONS, TEXT_WARP_PRESETS, warpPreviewPath, text3dPtToEmu, text3dEmuToPt, MATERIAL_PRESETS, toSlideIndex, TABLE_STYLE_BORDER_SIDE_LABEL_KEYS, TABLE_STYLE_DASH_PRESETS, GRADIENT_TYPE_OPTIONS, PATTERN_OPTIONS, FILL_PATTERN_LABEL_KEYS, openNativeEyeDropper, toggleText3dExtrusion, BEVEL_PRESETS, cropFit, cropFill, cropToAspectRatio } from './chunk-NMYQ4XT2.mjs';
+import { LOCALE_CATALOG, ALIGNMENT_LABEL_KEYS } from './chunk-GLLEZR4U.mjs';
+import React95, { createContext, lazy, forwardRef, useEffect, useState, useCallback, useMemo, useRef, useLayoutEffect, useSyncExternalStore, useId, useContext, useDeferredValue, Fragment as Fragment$1, Suspense, useReducer } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
-import { LuArrowDown, LuArrowUp, LuArrowRight, LuArrowLeft, LuArrowDownRight, LuArrowDownLeft, LuArrowUpRight, LuArrowUpLeft, LuMessageSquare, LuEyeOff, LuHistory, LuTrash2, LuSettings, LuX, LuCalendarDays, LuClock, LuHash, LuFileText, LuText, LuCast, LuSave, LuUndo, LuRedo, LuSearch, LuShieldCheck, LuPlus, LuPanelLeftClose, LuStickyNote, LuMonitor, LuColumns2, LuPresentation, LuMinus, LuSettings2, LuLayers, LuDownload, LuCheck, LuLock, LuEye, LuType, LuLoader, LuShieldAlert, LuSignature, LuInfo, LuTriangleAlert, LuPrinter, LuPenTool, LuBug, LuChevronUp, LuChevronDown, LuUpload, LuWifi, LuWifiOff, LuUsers, LuCopy, LuChevronLeft, LuChevronRight, LuPlay, LuPause, LuZoomOut, LuZoomIn, LuSpellCheck, LuFileDown, LuMenu, LuSparkles, LuShare2, LuPanelLeft, LuPanelRight, LuFolderOpen, LuSquare, LuImage, LuVideo, LuDatabase, LuAArrowUp, LuAArrowDown, LuRemoveFormatting, LuReplace, LuMousePointer2, LuShapes, LuPaintBucket, LuPenLine, LuPalette, LuPaintbrush, LuPencil, LuCaseSensitive, LuTimer, LuHighlighter, LuEraser, LuGripVertical, LuLoaderCircle, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuList, LuListOrdered, LuIndentIncrease, LuIndentDecrease, LuLink, LuGrid2X2, LuClipboardPaste, LuCopyPlus, LuScan, LuRotateCcw, LuMonitorOff, LuCirclePlay, LuCirclePause, LuCaptions, LuArrowLeftRight, LuClipboardCopy, LuLayoutGrid, LuWand, LuTextCursorInput, LuFile, LuEllipsis, LuUserRound, LuFilePlus2, LuHouse, LuFileJson, LuBox, LuFileImage, LuClock3, LuUser, LuHardDrive, LuLogIn, LuScissors, LuLayoutTemplate, LuFolderPlus, LuSpline, LuMoveRight, LuAlignLeft, LuAlignCenter, LuAlignRight, LuAlignHorizontalSpaceAround, LuAlignVerticalSpaceAround, LuGroup, LuUngroup, LuStar, LuMousePointerClick, LuBookOpen, LuLanguages, LuGlobe, LuGitCompare, LuMessageSquarePlus, LuLockKeyhole, LuPanelTop, LuGrid3X3, LuPipette, LuRuler, LuMaximize2, LuCode, LuMove, LuRadio, LuAlignJustify, LuColumns3, LuCombine, LuCrop, LuFilter, LuLockOpen, LuReply, LuRotateCw, LuBookmark } from 'react-icons/lu';
+import { LuArrowDown, LuArrowUp, LuArrowRight, LuArrowLeft, LuArrowDownRight, LuArrowDownLeft, LuArrowUpRight, LuArrowUpLeft, LuMessageSquare, LuEyeOff, LuHistory, LuTrash2, LuSettings, LuX, LuCalendarDays, LuClock, LuHash, LuFileText, LuText, LuCast, LuSave, LuUndo, LuRedo, LuSearch, LuShieldCheck, LuPlus, LuPanelLeftClose, LuStickyNote, LuMonitor, LuColumns2, LuPresentation, LuMinus, LuSettings2, LuLayers, LuDownload, LuCheck, LuLock, LuEye, LuType, LuLoader, LuShieldAlert, LuSignature, LuInfo, LuTriangleAlert, LuPrinter, LuPenTool, LuBug, LuChevronUp, LuChevronDown, LuUpload, LuWifi, LuWifiOff, LuUsers, LuCopy, LuChevronLeft, LuChevronRight, LuPlay, LuPause, LuZoomOut, LuZoomIn, LuSpellCheck, LuFileDown, LuMenu, LuSparkles, LuShare2, LuPanelLeft, LuPanelRight, LuFolderOpen, LuMousePointer2, LuShapes, LuPaintBucket, LuPenLine, LuPalette, LuPaintbrush, LuCaseSensitive, LuReplace, LuTimer, LuHighlighter, LuEraser, LuGripVertical, LuLoaderCircle, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuList, LuListOrdered, LuIndentIncrease, LuIndentDecrease, LuLink, LuGrid2X2, LuClipboardPaste, LuCopyPlus, LuScan, LuRotateCcw, LuMonitorOff, LuCirclePlay, LuCirclePause, LuCaptions, LuArrowLeftRight, LuClipboardCopy, LuLayoutGrid, LuWand, LuTextCursorInput, LuFile, LuEllipsis, LuUserRound, LuFilePlus2, LuHouse, LuFileJson, LuBox, LuVideo, LuFileImage, LuDatabase, LuClock3, LuUser, LuHardDrive, LuLogIn, LuLayoutTemplate, LuFolderPlus, LuAlignLeft, LuAlignCenter, LuAlignRight, LuAlignHorizontalSpaceAround, LuAlignVerticalSpaceAround, LuGroup, LuUngroup, LuMove, LuRadio, LuImage, LuColumns3, LuCombine, LuCrop, LuFilter, LuLockOpen, LuPencil, LuReply, LuMoveRight, LuRotateCw, LuScissors, LuBookmark, LuPipette } from 'react-icons/lu';
 
 var ViewerThemeContext = createContext(void 0);
 function ViewerThemeProvider({ theme, children }) {
@@ -464,99 +464,57 @@ function SlideTemplateGalleryDialog({
     )
   ] });
 }
-var CATEGORIES2 = [
-  {
-    group: "entrance",
-    labelKey: "pptx.animation.entrance",
-    tone: "text-emerald-500",
-    presets: ENTRANCE_PRESET_VALUES
-  },
-  {
-    group: "emphasis",
-    labelKey: "pptx.animation.emphasis",
-    tone: "text-amber-500",
-    presets: EMPHASIS_PRESET_VALUES
-  },
-  {
-    group: "exit",
-    labelKey: "pptx.animation.exit",
-    tone: "text-red-500",
-    presets: EXIT_PRESET_VALUES
-  }
-];
-function AnimationPresetGallery({
-  disabled,
-  onAddAnimation
-}) {
+function AnimationsSection(p) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex max-h-[62px] items-start gap-2 overflow-y-auto rounded-sm border border-border/60 bg-muted/30 px-1.5 py-1",
-      "aria-label": t("pptx.animations.galleryAria"),
-      children: CATEGORIES2.map((category) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-3 text-muted-foreground", children: t(category.labelKey) }),
-        /* @__PURE__ */ jsx("div", { className: "flex max-w-[150px] flex-wrap gap-0.5", children: category.presets.map((preset) => {
-          const label = t(`pptx.animation.preset.${preset}`);
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              disabled,
-              onClick: () => onAddAnimation?.(preset, category.group),
-              title: label,
-              className: "inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[9px] leading-3 text-foreground transition-colors hover:bg-accent disabled:opacity-35",
-              children: [
-                /* @__PURE__ */ jsx(
-                  LuStar,
-                  {
-                    className: `h-2.5 w-2.5 fill-current ${category.tone}`,
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
-              ]
-            },
-            preset
-          );
-        }) })
-      ] }, category.group))
-    }
+  const ref = useRef(null);
+  const [previewActive, setPreviewActive] = useState(false);
+  const timer = useRef(void 0);
+  const disabled = !p.canEdit || p.selectedElement === null;
+  const selectedAnimation = useMemo(
+    () => p.selectedElement ? (p.activeSlide?.animations ?? []).find((a) => a.elementId === p.selectedElement?.id) : void 0,
+    [p.activeSlide?.animations, p.selectedElement]
   );
-}
-function MotionPathGallery({
-  disabled,
-  onApplyMotionPath
-}) {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex max-h-[62px] items-start gap-2 overflow-y-auto rounded-sm border border-border/60 bg-muted/30 px-1.5 py-1",
-      "aria-label": t("pptx.animations.motionPathGalleryAria"),
-      children: MOTION_PATH_FAMILIES.map((family) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-3 text-muted-foreground", children: t(motionPathFamilyLabelKey(family)) }),
-        /* @__PURE__ */ jsx("div", { className: "flex max-w-[150px] flex-wrap gap-0.5", children: motionPathPresetsByFamily(family).map((preset) => {
-          const label = t(motionPathPresetLabelKey(preset.id));
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              disabled,
-              onClick: () => onApplyMotionPath?.(preset.id),
-              title: label,
-              className: "inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[9px] leading-3 text-foreground transition-colors hover:bg-accent disabled:opacity-35",
-              children: [
-                /* @__PURE__ */ jsx(LuMoveRight, { className: "h-2.5 w-2.5 text-sky-500", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
-              ]
-            },
-            preset.id
-          );
-        }) })
-      ] }, family))
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
     }
-  );
+    host.state = {
+      editable: p.canEdit,
+      hasSelection: p.selectedElement !== null,
+      paneOpen: p.isInspectorPaneOpen,
+      previewActive,
+      translate: t
+    };
+  }, [p.canEdit, p.selectedElement, p.isInspectorPaneOpen, previewActive, t]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const request = (event) => {
+      const intent = event.detail;
+      if (intent.kind === "add") {
+        p.onAddAnimation?.(intent.preset, intent.group);
+      } else if (intent.value === "remove") {
+        p.onRemoveAnimation?.();
+      } else if (intent.value === "preview") {
+        if (disabled) {
+          return;
+        }
+        setPreviewActive(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setPreviewActive(false), 1200);
+        playAnimationRibbonPreview(document, selectedAnimation);
+      } else {
+        (p.onOpenAnimationPanel ?? p.onToggleInspector)();
+      }
+    };
+    host.addEventListener("animations-request", request);
+    return () => host.removeEventListener("animations-request", request);
+  }, [p, disabled, selectedAnimation]);
+  return /* @__PURE__ */ jsx("pptx-ui-ribbon-animations", { ref });
 }
 function controlAttr(id) {
   return id ? { [RIBBON_CONTROL_ATTR]: id } : {};
@@ -570,291 +528,6 @@ function RibbonGroupScope({
 }) {
   return /* @__PURE__ */ jsx("div", { className: "contents", ...groupAttr(id), children });
 }
-function RibbonGroup({
-  label,
-  children,
-  className,
-  groupId
-}) {
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      ...groupAttr(groupId),
-      className: cn(
-        "relative flex min-h-[78px] self-stretch shrink-0 items-start gap-1 border-r border-border/60 px-2 pb-4 pt-1 last:border-r-0",
-        className
-      ),
-      "aria-label": label,
-      children: [
-        children,
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-x-1 bottom-0.5 truncate text-center text-[9px] leading-3 text-muted-foreground", children: label })
-      ]
-    }
-  );
-}
-function RibbonCommand({
-  label,
-  icon,
-  onClick,
-  disabled,
-  active,
-  compact = false,
-  title,
-  pressed,
-  controlId
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      ...controlAttr(controlId),
-      onClick,
-      disabled,
-      title: title ?? label,
-      "aria-pressed": pressed,
-      className: cn(
-        "inline-flex rounded-sm text-foreground transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-35",
-        active && "bg-primary/15 text-primary ring-1 ring-primary/35",
-        compact ? "h-[26px] min-w-[88px] items-center gap-1.5 px-1.5 text-left text-[10px] leading-3" : "h-[58px] min-w-[54px] max-w-[72px] flex-col items-center justify-start gap-0.5 px-1 py-1 text-center text-[9px] leading-[11px]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "grid shrink-0 place-items-center text-primary",
-              compact ? "h-4 w-4 [&>svg]:h-4 [&>svg]:w-4" : "h-7 w-7 [&>svg]:h-6 [&>svg]:w-6"
-            ),
-            "aria-hidden": "true",
-            children: icon
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: label })
-      ]
-    }
-  );
-}
-function RibbonCommandStack({
-  children
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-start gap-0.5", children });
-}
-function RibbonToggle({
-  label,
-  checked,
-  onChange,
-  disabled,
-  title,
-  controlId
-}) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      ...controlAttr(controlId),
-      title,
-      className: cn(
-        "flex h-[19px] items-center gap-1 whitespace-nowrap rounded-sm px-1 text-[10px] text-foreground",
-        checked && "bg-primary/15 text-primary"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked,
-            disabled,
-            onChange: (event) => onChange?.(event.target.checked),
-            className: "h-3 w-3 accent-primary disabled:opacity-35"
-          }
-        ),
-        label
-      ]
-    }
-  );
-}
-function AnimationsSection(p) {
-  const { t } = useTranslation();
-  const [previewActive, setPreviewActive] = useState(false);
-  const disabled = !p.canEdit || p.selectedElement === null;
-  const selectedAnimation = useMemo(
-    () => p.selectedElement ? (p.activeSlide?.animations ?? []).find((a) => a.elementId === p.selectedElement?.id) : void 0,
-    [p.activeSlide?.animations, p.selectedElement]
-  );
-  const preview = () => {
-    if (disabled) {
-      return;
-    }
-    setPreviewActive(true);
-    setTimeout(() => setPreviewActive(false), 1200);
-    playAnimationRibbonPreview(document, selectedAnimation);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RibbonGroup, { label: t("pptx.animations.preview"), groupId: "animations.preview", children: /* @__PURE__ */ jsx(
-      RibbonCommand,
-      {
-        controlId: "animations.preview.preview",
-        label: t("pptx.animations.preview"),
-        icon: /* @__PURE__ */ jsx(LuPlay, {}),
-        onClick: preview,
-        disabled,
-        active: previewActive,
-        title: t("pptx.animations.previewTooltip")
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      RibbonGroup,
-      {
-        label: t("pptx.animations.animation", { defaultValue: "Animation" }),
-        className: "max-w-[500px] overflow-hidden",
-        groupId: "animations.animation",
-        children: /* @__PURE__ */ jsx("div", { className: "contents", ...controlAttr("animations.animation.gallery"), children: /* @__PURE__ */ jsx(AnimationPresetGallery, { disabled, onAddAnimation: p.onAddAnimation }) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RibbonGroup,
-      {
-        label: t("pptx.animation.motionPath"),
-        className: "max-w-[420px] overflow-hidden",
-        groupId: "animations.motionPath",
-        children: /* @__PURE__ */ jsx("div", { className: "contents", ...controlAttr("animations.motionPath.gallery"), children: /* @__PURE__ */ jsx(
-          MotionPathGallery,
-          {
-            disabled,
-            onApplyMotionPath: (presetId) => p.onAddAnimation?.(presetId, "motionPath")
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      RibbonGroup,
-      {
-        label: t("pptx.animations.advanced", { defaultValue: "Advanced Animation" }),
-        groupId: "animations.advancedAnimation",
-        children: [
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              label: t("pptx.animations.exitEffects", { defaultValue: "Exit Effects" }),
-              icon: /* @__PURE__ */ jsx(LuStar, { className: "text-red-500" }),
-              onClick: () => p.onAddAnimation?.("fadeOut", "exit"),
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              label: t("pptx.animations.pathAnimation", { defaultValue: "Path Animation" }),
-              icon: /* @__PURE__ */ jsx(LuMoveRight, {}),
-              onClick: () => p.onAddAnimation?.(DEFAULT_MOTION_PATH_PRESET_ID, "motionPath"),
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsxs(RibbonCommandStack, { children: [
-            /* @__PURE__ */ jsx(
-              RibbonCommand,
-              {
-                compact: true,
-                controlId: "animations.animation.effectOptions",
-                label: t("pptx.animations.effectOptions", { defaultValue: "Effect Options" }),
-                icon: /* @__PURE__ */ jsx(LuSparkles, {}),
-                onClick: p.onOpenAnimationPanel ?? p.onToggleInspector,
-                disabled
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              RibbonCommand,
-              {
-                compact: true,
-                controlId: "animations.advancedAnimation.animationPane",
-                label: t("pptx.animations.animationPanel"),
-                icon: /* @__PURE__ */ jsx(LuPanelRight, {}),
-                onClick: p.onOpenAnimationPanel ?? p.onToggleInspector,
-                active: p.isInspectorPaneOpen,
-                title: t("pptx.animations.openPanelTooltip")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(RibbonCommandStack, { children: [
-            /* @__PURE__ */ jsx(
-              RibbonCommand,
-              {
-                compact: true,
-                controlId: "animations.advancedAnimation.trigger",
-                label: t("pptx.animations.trigger", { defaultValue: "Trigger" }),
-                icon: /* @__PURE__ */ jsx(LuMousePointerClick, {}),
-                onClick: p.onOpenAnimationPanel ?? p.onToggleInspector,
-                disabled
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              RibbonCommand,
-              {
-                compact: true,
-                controlId: "animations.advancedAnimation.animationPainter",
-                label: t("pptx.animations.painter", { defaultValue: "Animation Painter" }),
-                icon: /* @__PURE__ */ jsx(LuPaintbrush, {}),
-                disabled: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "animations.advancedAnimation.remove",
-              label: t("pptx.animations.remove"),
-              icon: /* @__PURE__ */ jsx(LuTrash2, {}),
-              onClick: p.onRemoveAnimation,
-              disabled,
-              title: t("pptx.animations.removeTooltip")
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RibbonGroup,
-      {
-        label: t("pptx.animations.timing", { defaultValue: "Timing" }),
-        groupId: "animations.timing",
-        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[48px_82px] items-center gap-x-1 gap-y-1 text-[10px]", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "pptx-animation-start", children: t("pptx.animations.start", { defaultValue: "Start" }) }),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              id: "pptx-animation-start",
-              ...controlAttr("animations.timing.start"),
-              disabled: true,
-              className: "h-6 rounded-sm border border-border bg-muted px-1 text-[10px]",
-              children: [
-                /* @__PURE__ */ jsx("option", { children: t("pptx.animations.onClick", { defaultValue: "On Click" }) }),
-                /* @__PURE__ */ jsx("option", { children: t("pptx.animations.withPrevious", { defaultValue: "With Previous" }) }),
-                /* @__PURE__ */ jsx("option", { children: t("pptx.animations.afterPrevious", { defaultValue: "After Previous" }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(LuClock3, {}),
-            " ",
-            t("pptx.animations.duration", { defaultValue: "Duration" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              min: "0",
-              step: "0.1",
-              defaultValue: "0.5",
-              disabled: true,
-              "aria-label": t("pptx.animations.duration", { defaultValue: "Duration" }),
-              ...controlAttr("animations.timing.duration"),
-              className: "h-6 rounded-sm border border-border bg-muted px-1 text-[10px]"
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
 var ShapeFormatContext = createContext(null);
 function useShapeFormatContext() {
   return useContext(ShapeFormatContext);
@@ -915,38 +588,6 @@ var DISTRIBUTE_BTNS = [
   { k: "horizontal", el: /* @__PURE__ */ jsx(LuAlignHorizontalSpaceAround, { className: ic }) },
   { k: "vertical", el: /* @__PURE__ */ jsx(LuAlignVerticalSpaceAround, { className: ic }) }
 ];
-var DRAW_TOOLS = [
-  {
-    id: "select",
-    icon: /* @__PURE__ */ jsx(LuMoveRight, { className: ic }),
-    labelKey: "pptx.ribbon.tool.select",
-    ac: "bg-primary text-white"
-  },
-  {
-    id: "pen",
-    icon: /* @__PURE__ */ jsx(LuPencil, { className: ic }),
-    labelKey: "pptx.ribbon.tool.pen",
-    ac: "bg-primary text-white"
-  },
-  {
-    id: "highlighter",
-    icon: /* @__PURE__ */ jsx(LuType, { className: ic }),
-    labelKey: "pptx.ribbon.tool.highlighter",
-    ac: "bg-yellow-600 text-white"
-  },
-  {
-    id: "eraser",
-    icon: /* @__PURE__ */ jsx(LuMinus, { className: ic }),
-    labelKey: "pptx.ribbon.tool.eraser",
-    ac: "bg-red-600 text-white"
-  },
-  {
-    id: "freeform",
-    icon: /* @__PURE__ */ jsx(LuSpline, { className: ic }),
-    labelKey: "pptx.ribbon.tool.freeform",
-    ac: "bg-primary text-white"
-  }
-];
 var OV = [
   {
     k: "png",
@@ -1038,22 +679,6 @@ var OV = [
     i: /* @__PURE__ */ jsx(LuShieldAlert, { className: `${ics} text-muted-foreground` })
   }
 ];
-var FMT = [
-  { id: "bold", i: /* @__PURE__ */ jsx(LuBold, { className: ic }), labelKey: "pptx.textPanel.bold" },
-  { id: "italic", i: /* @__PURE__ */ jsx(LuItalic, { className: ic }), labelKey: "pptx.textPanel.italic" },
-  { id: "underline", i: /* @__PURE__ */ jsx(LuUnderline, { className: ic }), labelKey: "pptx.textPanel.underline" },
-  {
-    id: "strikethrough",
-    i: /* @__PURE__ */ jsx(LuStrikethrough, { className: ic }),
-    labelKey: "pptx.textPanel.strikethrough"
-  }
-];
-var ATXT = [
-  { id: "left", i: /* @__PURE__ */ jsx(LuAlignLeft, { className: ic }), labelKey: "pptx.ribbon.alignLeft" },
-  { id: "center", i: /* @__PURE__ */ jsx(LuAlignCenter, { className: ic }), labelKey: "pptx.ribbon.alignCenter" },
-  { id: "right", i: /* @__PURE__ */ jsx(LuAlignRight, { className: ic }), labelKey: "pptx.ribbon.alignRight" },
-  { id: "justify", i: /* @__PURE__ */ jsx(LuAlignJustify, { className: ic }), labelKey: "pptx.ribbon.justify" }
-];
 function useRibbonDropdown() {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
@@ -1459,691 +1084,340 @@ var RibbonGalleryCommandsContext = createContext(null);
 function useRibbonGalleryCommands() {
   return useContext(RibbonGalleryCommandsContext);
 }
-function useTranslateOr() {
-  const { t } = useTranslation();
-  return (key, fallback) => {
-    if (!key) {
-      return fallback;
-    }
-    const translated = t(key);
-    return translated && translated !== key ? translated : fallback;
-  };
-}
-function RibbonGalleryTile({
-  item,
-  disabled,
-  inStrip,
-  onPick
+function RibbonGallery({
+  placement,
+  chevronOnly = false,
+  tagControl = true
 }) {
   const { t } = useTranslation();
-  const label = galleryItemLabel(item, (key, params) => t(key, params ?? {}));
+  const ref = useRef(null);
+  const commands = useRibbonGalleryCommands();
+  const context = commands?.context;
+  const descriptor = useMemo(
+    () => buildRibbonGallery(placement.gallery, context ?? { element: null }),
+    [placement.gallery, context]
+  );
+  useEffect(() => {
+    const host = ref.current;
+    if (host) {
+      host.descriptor = descriptor;
+      host.translateLabel = t;
+      host.disabled = !commands?.editable;
+    }
+  }, [descriptor, t, commands?.editable]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const pick = (event) => {
+      if (!commands?.editable) {
+        return;
+      }
+      const result = applyRibbonGalleryItem(
+        placement.gallery,
+        event.detail.itemId,
+        commands.context
+      );
+      if (result) {
+        commands.dispatch(result);
+      }
+    };
+    host.addEventListener("gallery-pick", pick);
+    return () => host.removeEventListener("gallery-pick", pick);
+  }, [commands, placement.gallery]);
   return /* @__PURE__ */ jsx(
-    "button",
+    "pptx-ui-ribbon-gallery",
     {
-      type: "button",
-      ...{ [RIBBON_GALLERY_ITEM_ATTR]: item.id },
-      "aria-pressed": item.applied,
-      "aria-label": label,
-      title: label,
-      disabled,
-      onMouseDown: (event) => event.preventDefault(),
-      onClick: () => onPick(item),
-      className: cn(
-        "grid shrink-0 place-items-center rounded-sm border border-transparent p-0.5 transition-colors hover:border-primary/60 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40",
-        item.applied && "border-primary ring-1 ring-primary/40",
-        inStrip && "[&>svg]:h-[40px] [&>svg]:w-auto"
-      ),
-      dangerouslySetInnerHTML: { __html: item.previewSvg }
+      ref,
+      label: descriptor.label,
+      mode: placement.mode,
+      "chevron-only": chevronOnly || void 0,
+      "data-ribbon-control": tagControl ? placement.control : void 0
     }
   );
 }
-function GallerySection({
-  section,
-  onPick
+function useIntent(ref, type, callback) {
+  useEffect(() => {
+    const host = ref.current;
+    if (!host || !callback) {
+      return;
+    }
+    host.addEventListener(type, callback);
+    return () => host.removeEventListener(type, callback);
+  }, [ref, type, callback]);
+}
+function WebRibbonGroup({
+  label,
+  groupId,
+  children
 }) {
-  const translateOr = useTranslateOr();
-  if (section.items.length === 0) {
-    return null;
-  }
-  const heading = section.titleKey || section.title ? translateOr(section.titleKey, section.title ?? "") : "";
-  return /* @__PURE__ */ jsxs("div", { className: "px-2 py-1", children: [
-    heading && /* @__PURE__ */ jsx("div", { className: "pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: heading }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "grid gap-1",
-        style: { gridTemplateColumns: `repeat(${Math.max(1, section.columns)}, max-content)` },
-        children: section.items.map((item) => /* @__PURE__ */ jsx(RibbonGalleryTile, { item, onPick }, item.id))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("pptx-ui-ribbon-group", { label, "data-ribbon-group": groupId, children });
 }
-function RibbonGalleryPopup({
-  descriptor,
-  anchorRef,
+function WebRibbonCommand({
   label,
-  onPick
+  icon,
+  controlId,
+  title,
+  disabled,
+  active,
+  pressed,
+  expanded,
+  compact,
+  onCommand
 }) {
-  return /* @__PURE__ */ jsx(RibbonMenu, { anchorRef, className: "pt-1", children: /* @__PURE__ */ jsx(
-    "div",
+  const ref = useRef(null);
+  useIntent(
+    ref,
+    "command-request",
+    onCommand ? (event) => onCommand(event.detail.id) : void 0
+  );
+  return /* @__PURE__ */ jsx(
+    "pptx-ui-ribbon-command",
     {
-      ...{ [RIBBON_GALLERY_POPUP_ATTR]: descriptor.id },
-      role: "group",
-      "aria-label": label,
-      className: "max-h-[70vh] overflow-y-auto rounded-lg border border-border bg-popover py-1 shadow-2xl backdrop-blur-lg",
-      children: descriptor.sections.map((section) => /* @__PURE__ */ jsx(GallerySection, { section, onPick }, section.id))
+      ref,
+      label,
+      icon,
+      "data-ribbon-control": controlId,
+      title,
+      disabled: disabled || void 0,
+      active: active || void 0,
+      pressed: pressed === void 0 ? void 0 : String(pressed),
+      expanded: expanded === void 0 ? void 0 : String(expanded),
+      compact: compact || void 0
     }
-  ) });
+  );
 }
-var EMPTY_CONTEXT = { element: null };
-function RibbonGallery({
-  placement,
-  icon,
-  chevronOnly = false,
-  tagControl = true
+function WebRibbonToggle({
+  label,
+  controlId,
+  checked,
+  title,
+  onToggle
 }) {
-  const { t } = useTranslation();
-  const translateOr = useTranslateOr();
-  const commands = useRibbonGalleryCommands();
-  const ctx = commands?.context ?? EMPTY_CONTEXT;
-  const { gallery, control, mode } = placement;
-  const descriptor = useMemo(() => buildRibbonGallery(gallery, ctx), [gallery, ctx]);
-  const dropdown = useRibbonDropdown();
-  const title = translateOr(descriptor.labelKey, descriptor.label);
-  const disabled = !commands?.editable || descriptor.disabled || !galleryHasItems(descriptor);
-  const open = dropdown.open && !disabled;
-  const pick = (item) => {
-    const result = applyRibbonGalleryItem(gallery, item.id, ctx);
-    if (result) {
-      commands?.dispatch(result);
-    }
-    dropdown.setOpen(false);
-  };
-  const controlAttrs = tagControl ? { [RIBBON_CONTROL_ATTR]: control } : {};
-  const galleryAttrs = { [RIBBON_GALLERY_ATTR]: gallery };
-  const popup = open && /* @__PURE__ */ jsx(
-    RibbonGalleryPopup,
+  const ref = useRef(null);
+  useIntent(
+    ref,
+    "toggle-request",
+    onToggle ? (event) => onToggle(event.detail.checked) : void 0
+  );
+  return /* @__PURE__ */ jsx(
+    "pptx-ui-ribbon-toggle",
     {
-      descriptor,
-      anchorRef: dropdown.ref,
-      label: title,
-      onPick: pick
+      ref,
+      label,
+      "data-ribbon-control": controlId,
+      checked: checked || void 0,
+      title
     }
   );
-  if (mode === "inline") {
-    const moreLabel = t("pptx.gallery.more", { name: title });
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: dropdown.ref,
-        ...controlAttrs,
-        className: "relative inline-flex items-stretch rounded border border-border/60 bg-background/40",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 p-0.5", children: inlineGalleryItems(descriptor).map((item) => /* @__PURE__ */ jsx(
-            RibbonGalleryTile,
-            {
-              item,
-              disabled,
-              inStrip: true,
-              onPick: pick
-            },
-            item.id
-          )) }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              ...galleryAttrs,
-              "aria-label": moreLabel,
-              "aria-haspopup": "true",
-              "aria-expanded": open,
-              title: moreLabel,
-              disabled,
-              onClick: () => dropdown.setOpen((v) => !v),
-              className: "inline-flex items-center border-l border-border/60 px-0.5 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40",
-              children: /* @__PURE__ */ jsx(LuChevronDown, { className: "h-3 w-3" })
+}
+function TransitionsSection(p) {
+  const { t } = useTranslation();
+  const ref = useRef(null);
+  const draft = useMemo(() => readRibbonTransitionDraft(p.activeSlide), [p.activeSlide]);
+  const transition = p.activeSlide?.transition;
+  const editable = p.canEdit !== false;
+  useEffect(() => {
+    const host = ref.current;
+    if (host) {
+      host.state = {
+        draft,
+        transition,
+        editable,
+        inspectorOpen: p.isInspectorPaneOpen,
+        translate: t
+      };
+    }
+  }, [draft, transition, editable, p.isInspectorPaneOpen, t]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const request = (event) => {
+      const intent = event.detail;
+      const patch = ribbonTransitionsDraftPatch(intent);
+      if (patch) {
+        p.onTransitionChange(ribbonTransitionUpdates({ ...draft, ...patch }));
+        return;
+      }
+      switch (intent.kind) {
+        case "preview":
+          playSlideTransitionPreview(transition, document);
+          break;
+        case "applyToAll":
+          p.onApplyTransitionToAll();
+          break;
+        case "inspector":
+          p.onToggleInspector();
+          break;
+        case "soundPreview": {
+          const url = ribbonTransitionStockSoundUrl(transition);
+          if (url) {
+            playAnimationSound(url);
+          }
+          break;
+        }
+        default:
+          void ribbonTransitionsSoundChange(intent).then((change) => {
+            if (change) {
+              p.onTransitionChange(change);
             }
-          ),
-          popup
-        ]
+            return void 0;
+          });
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { ref: dropdown.ref, ...controlAttrs, className: "relative inline-flex items-center", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "data-pptx-chrome": chevronOnly ? "gallery-caret" : void 0,
-        ...galleryAttrs,
-        "aria-haspopup": "true",
-        "aria-expanded": open,
-        "aria-label": title,
-        title,
-        disabled,
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => dropdown.setOpen((v) => !v),
-        className: chevronOnly ? "inline-flex items-center self-stretch px-0.5 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40" : pill,
-        children: [
-          !chevronOnly && icon,
-          !chevronOnly && /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: title }),
-          /* @__PURE__ */ jsx(LuChevronDown, { className: "h-3 w-3" })
-        ]
+    };
+    host.addEventListener("transitions-request", request);
+    return () => host.removeEventListener("transitions-request", request);
+  }, [draft, transition, p]);
+  return /* @__PURE__ */ jsx("pptx-ui-ribbon-transitions", { ref });
+}
+function DesignSection(p) {
+  const { t } = useTranslation();
+  const actions = {
+    "design.themes.browseThemes": p.onToggleThemeGallery,
+    "design.themes.editTheme": p.onToggleThemeEditor,
+    "design.customize.slideSize": p.onOpenSlideSize ?? p.onOpenDocumentProperties,
+    "design.customize.formatBackground": p.onToggleInspector
+  };
+  const state = {
+    editable: p.canEdit,
+    galleryOpen: p.isThemeGalleryOpen,
+    editorOpen: p.isThemeEditorOpen,
+    backgroundOpen: p.isInspectorPaneOpen,
+    hasSlideSize: Boolean(actions["design.customize.slideSize"]),
+    hasBackground: Boolean(p.onToggleInspector)
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: DESIGN_RIBBON_GROUPS.map((group) => /* @__PURE__ */ jsxs(WebRibbonGroup, { groupId: group.id, label: t(group.labelKey), children: [
+    DESIGN_RIBBON_COMMANDS.filter((command) => command.id.startsWith(`${group.id}.`)).map(
+      (command) => {
+        const view = designCommandState(command.id, state);
+        return view.hidden ? null : /* @__PURE__ */ jsx(
+          WebRibbonCommand,
+          {
+            controlId: command.id,
+            label: t(command.labelKey),
+            title: t(command.titleKey),
+            icon: command.icon,
+            compact: true,
+            disabled: view.disabled,
+            active: view.active,
+            expanded: view.expanded,
+            onCommand: () => actions[command.id]?.()
+          },
+          command.id
+        );
       }
     ),
-    popup
-  ] });
+    FIXED_TAB_GALLERIES.filter(
+      (placement) => placement.control.startsWith(`${group.id}.`)
+    ).map((placement) => /* @__PURE__ */ jsx(
+      RibbonGallery,
+      {
+        placement,
+        icon: placement.gallery === "themeFonts" ? /* @__PURE__ */ jsx(LuType, {}) : /* @__PURE__ */ jsx(LuPalette, {})
+      },
+      placement.control
+    ))
+  ] }, group.id)) });
 }
-function useTransitionSoundPicker(activeSlide, onTransitionChange) {
-  const soundFileInputRef = React6.useRef(null);
-  const handleSoundFilePicked = React6.useCallback(
-    (file) => {
-      void readSoundFileAsDataUrl(file).then((dataUrl) => {
-        if (dataUrl) {
-          onTransitionChange(applyTransitionSoundFile({ name: file.name, dataUrl }));
-        }
-        return void 0;
-      });
-    },
-    [onTransitionChange]
-  );
-  const handleSoundSelectChange = React6.useCallback(
-    (event) => {
-      const value = event.target.value;
-      if (value === TRANSITION_SOUND_OTHER_VALUE) {
-        soundFileInputRef.current?.click();
-        event.target.value = transitionSoundSelectedValue(activeSlide?.transition);
-        return;
-      }
-      if (value === TRANSITION_SOUND_NONE_VALUE) {
-        onTransitionChange(clearTransitionSound());
+var DEFAULT_VALUE = {
+  recentColors: [],
+  pushColor: () => {
+  }
+};
+var RecentColorsContext = createContext(DEFAULT_VALUE);
+var RecentColorsProvider = RecentColorsContext.Provider;
+function useRecentColors() {
+  return useContext(RecentColorsContext);
+}
+function DrawSection(p) {
+  const { t } = useTranslation();
+  const { pushColor, recentColors } = useRecentColors();
+  const ref = useRef(null);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    host.state = {
+      tool: p.activeTool,
+      color: p.drawingColor,
+      width: p.drawingWidth,
+      editable: p.canEdit !== false,
+      recentColors,
+      translate: t
+    };
+  }, [p, recentColors, t]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const request = (event) => {
+      if (p.canEdit === false) {
         return;
       }
-      const patch = applyTransitionStockSound(value);
-      if (patch) {
-        onTransitionChange(patch);
-      }
-    },
-    [activeSlide, onTransitionChange]
-  );
-  const handleSoundFileChange = React6.useCallback(
-    (event) => {
-      const file = event.target.files?.[0];
-      if (file) {
-        handleSoundFilePicked(file);
+      const intent = event.detail;
+      switch (intent.kind) {
+        case "tool":
+          p.onSetActiveTool(intent.value);
+          break;
+        case "width":
+          p.onSetDrawingWidth(intent.value);
+          break;
+        case "color":
+          p.onSetDrawingColor(intent.value);
+          if (intent.committed) {
+            pushColor(intent.value);
+          }
       }
-      event.target.value = "";
-    },
-    [handleSoundFilePicked]
-  );
-  const stockSoundId = transitionStockSoundId(activeSlide?.transition);
-  const handleSoundPreview = React6.useCallback(() => {
-    if (!stockSoundId) {
+    };
+    host.addEventListener("draw-request", request);
+    return () => host.removeEventListener("draw-request", request);
+  }, [p, pushColor]);
+  return /* @__PURE__ */ jsx("pptx-ui-ribbon-draw", { ref });
+}
+var ViewerCustomizationContext = createContext(
+  EMPTY_RESOLVED_CUSTOMIZATION
+);
+function useViewerCustomizationContext() {
+  return useContext(ViewerCustomizationContext);
+}
+function useHostEvent(ref, type, handler) {
+  useEffect(() => {
+    const host = ref.current;
+    if (!host || !handler) {
       return;
     }
-    const asset = getEffectSoundAsset(stockSoundId);
-    if (asset) {
-      playAnimationSound(asset.dataUrl);
+    host.addEventListener(type, handler);
+    return () => host.removeEventListener(type, handler);
+  }, [ref, type, handler]);
+}
+function WebSearch({
+  value,
+  disabled = false,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  ...rest
+}) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.value = value;
+      ref.current.disabled = disabled;
     }
-  }, [stockSoundId]);
-  return {
-    soundFileInputRef,
-    stockSoundId,
-    handleSoundSelectChange,
-    handleSoundFileChange,
-    handleSoundPreview
-  };
-}
-function TransitionsSection(p) {
-  const { t } = useTranslation();
-  const canEdit = p.canEdit !== false;
-  const draft = React6.useMemo(() => readRibbonTransitionDraft(p.activeSlide), [p.activeSlide]);
-  const [durationBuffer, setDurationBuffer] = React6.useState(null);
-  const [advanceBuffer, setAdvanceBuffer] = React6.useState(null);
-  const commit = React6.useCallback(
-    (changes) => {
-      p.onTransitionChange(ribbonTransitionUpdates({ ...draft, ...changes }));
-    },
-    [draft, p]
-  );
-  const {
-    soundFileInputRef,
-    stockSoundId,
-    handleSoundSelectChange,
-    handleSoundFileChange,
-    handleSoundPreview
-  } = useTransitionSoundPicker(p.activeSlide, p.onTransitionChange);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "transitions.preview", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: pill,
-        title: t("pptx.ribbon.previewTransition"),
-        onClick: () => playSlideTransitionPreview(p.activeSlide?.transition, document),
-        ...controlAttr("transitions.preview.preview"),
-        children: [
-          /* @__PURE__ */ jsx(LuPlay, { className: ics }),
-          t("pptx.ribbon.preview")
-        ]
-      }
-    ) }),
-    sep,
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "transitions.transitionToThisSlide", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "inline-flex items-center gap-0.5 overflow-x-auto max-w-[420px]",
-        ...controlAttr("transitions.transitionToThisSlide.gallery"),
-        children: RIBBON_TRANSITION_PRESETS.map((preset) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled: !canEdit,
-            onClick: () => commit({ type: preset.type }),
-            className: cn(
-              "flex-shrink-0 px-2 py-1 max-md:min-h-[44px] rounded border text-[11px] leading-tight transition-colors",
-              draft.type === preset.type ? "border-primary bg-primary/10 text-primary font-medium" : "border-border bg-muted hover:bg-accent text-foreground"
-            ),
-            title: t("pptx.ribbon.transitionTitle", { name: t(preset.labelKey) }),
-            children: t(preset.labelKey)
-          },
-          preset.type
-        ))
-      }
-    ) }),
-    sep,
-    /* @__PURE__ */ jsxs(RibbonGroupScope, { id: "transitions.timing", children: [
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
-          ...controlAttr("transitions.timing.duration"),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: t("pptx.ribbon.duration") }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                min: 0,
-                max: 20,
-                step: 0.25,
-                disabled: !canEdit,
-                value: durationBuffer ?? String(draft.durationSec),
-                onChange: (e) => {
-                  setDurationBuffer(e.target.value);
-                  const seconds = Number(e.target.value);
-                  if (Number.isFinite(seconds) && e.target.value !== "") {
-                    commit({ durationSec: seconds });
-                  }
-                },
-                onBlur: () => setDurationBuffer(null),
-                className: "w-16 px-1.5 py-1 rounded border border-border bg-muted text-xs text-foreground text-center",
-                title: t("pptx.ribbon.transitionDurationTitle")
-              }
-            )
-          ]
-        }
-      ),
-      sep,
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
-          ...controlAttr("transitions.timing.sound"),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: t("pptx.ribbon.sound") }),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                "aria-label": t("pptx.ribbon.sound"),
-                className: "w-24 px-1.5 py-1 rounded border border-border bg-muted text-xs text-foreground disabled:opacity-50",
-                disabled: !canEdit,
-                value: transitionSoundSelectedValue(p.activeSlide?.transition),
-                onChange: handleSoundSelectChange,
-                children: transitionSoundOptions(p.activeSlide?.transition).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.i18nKey ? t(option.i18nKey) : option.label }, option.value))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": t("pptx.animation.sound.preview"),
-                onClick: handleSoundPreview,
-                disabled: !stockSoundId,
-                className: "shrink-0 rounded border border-border bg-muted p-1 disabled:opacity-40",
-                children: /* @__PURE__ */ jsx(LuPlay, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: soundFileInputRef,
-                type: "file",
-                accept: "audio/*",
-                className: "hidden",
-                onChange: handleSoundFileChange
-              }
-            )
-          ]
-        }
-      ),
-      sep,
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          disabled: !canEdit,
-          className: pill,
-          title: t("pptx.ribbon.applyTransitionToAll"),
-          ...controlAttr("transitions.timing.applyToAll"),
-          onClick: p.onApplyTransitionToAll,
-          children: [
-            /* @__PURE__ */ jsx(LuCopy, { className: ics }),
-            t("pptx.headerFooter.applyToAll")
-          ]
-        }
-      ),
-      sep,
-      /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-col gap-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-foreground", children: t("pptx.ribbon.advanceSlide") }),
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "inline-flex items-center gap-1.5 cursor-pointer",
-            ...controlAttr("transitions.timing.advanceOnClick"),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  disabled: !canEdit,
-                  checked: draft.advanceOnClick,
-                  onChange: (e) => commit({ advanceOnClick: e.target.checked }),
-                  className: "accent-primary h-3 w-3"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: t("pptx.ribbon.onMouseClick") })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "inline-flex items-center gap-1.5 cursor-pointer",
-            ...controlAttr("transitions.timing.advanceAfter"),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  "aria-label": t("pptx.ribbon.afterDuration"),
-                  disabled: !canEdit,
-                  checked: draft.advanceAfter,
-                  onChange: (e) => commit({ advanceAfter: e.target.checked }),
-                  className: "accent-primary h-3 w-3"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: t("pptx.ribbon.afterDuration") }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  "aria-label": t("pptx.ribbon.advanceAfterSeconds"),
-                  value: advanceBuffer ?? draft.advanceAfterText,
-                  onChange: (e) => {
-                    setAdvanceBuffer(e.target.value);
-                    commit({ advanceAfter: true, advanceAfterText: e.target.value });
-                  },
-                  onBlur: () => setAdvanceBuffer(null),
-                  disabled: !canEdit || !draft.advanceAfter,
-                  className: "w-16 px-1 py-0.5 rounded border border-border bg-muted text-xs text-foreground text-center disabled:opacity-50",
-                  title: t("pptx.ribbon.advanceAfterSeconds")
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ] }),
-    sep,
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: p.onToggleInspector,
-        className: cn(
-          pill,
-          p.isInspectorPaneOpen ? "bg-primary hover:bg-primary/80 text-white" : ""
-        ),
-        title: t("pptx.ribbon.openInspectorTransitions"),
-        children: [
-          /* @__PURE__ */ jsx(LuPanelRight, { className: ic }),
-          t("pptx.ribbon.inspector")
-        ]
-      }
-    )
-  ] });
-}
-var DESIGN_VARIANT_GALLERIES = FIXED_TAB_GALLERIES.filter(
-  (placement) => placement.control.startsWith("design.variants.")
-);
-function DesignSection(p) {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(RibbonGroupScope, { id: "design.themes", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: p.onToggleThemeGallery,
-          disabled: !p.canEdit,
-          className: cn(
-            pill,
-            p.isThemeGalleryOpen ? "bg-primary hover:bg-primary/80 text-white" : ""
-          ),
-          title: t("pptx.ribbon.browseThemesTitle"),
-          ...controlAttr("design.themes.browseThemes"),
-          children: [
-            /* @__PURE__ */ jsx(LuPalette, { className: ics }),
-            t("pptx.ribbon.browseThemes")
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: p.onToggleThemeEditor,
-          disabled: !p.canEdit,
-          className: cn(
-            pill,
-            p.isThemeEditorOpen ? "bg-primary hover:bg-primary/80 text-white" : ""
-          ),
-          title: t("pptx.ribbon.editThemeTitle"),
-          ...controlAttr("design.themes.editTheme"),
-          children: [
-            /* @__PURE__ */ jsx(LuPencil, { className: ics }),
-            t("pptx.ribbon.editTheme")
-          ]
-        }
-      )
-    ] }),
-    sep,
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", ...groupAttr("design.variants"), children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: DESIGN_VARIANT_GALLERIES.map((placement) => /* @__PURE__ */ jsx(
-        RibbonGallery,
-        {
-          placement,
-          icon: placement.gallery === "themeFonts" ? /* @__PURE__ */ jsx(LuType, { className: ics }) : /* @__PURE__ */ jsx(LuPalette, { className: ics })
-        },
-        placement.control
-      )) }),
-      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: t("pptx.ribbon.groupVariants") })
-    ] }),
-    sep,
-    /* @__PURE__ */ jsxs(RibbonGroupScope, { id: "design.customize", children: [
-      (p.onOpenSlideSize ?? p.onOpenDocumentProperties) && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: p.onOpenSlideSize ?? p.onOpenDocumentProperties,
-          className: pill,
-          title: t("pptx.ribbon.slideSizeTitle"),
-          ...controlAttr("design.customize.slideSize"),
-          children: [
-            /* @__PURE__ */ jsx(LuMonitor, { className: ics }),
-            t("pptx.ribbon.slideSize")
-          ]
-        }
-      ),
-      p.onToggleInspector && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: p.onToggleInspector,
-          className: cn(
-            pill,
-            p.isInspectorPaneOpen ? "bg-primary hover:bg-primary/80 text-white" : ""
-          ),
-          title: t("pptx.ribbon.formatBackgroundTitle"),
-          ...controlAttr("design.customize.formatBackground"),
-          children: [
-            /* @__PURE__ */ jsx(LuPaintBucket, { className: ics }),
-            t("pptx.ribbon.formatBackground")
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-var DEFAULT_VALUE = {
-  recentColors: [],
-  pushColor: () => {
-  }
-};
-var RecentColorsContext = createContext(DEFAULT_VALUE);
-var RecentColorsProvider = RecentColorsContext.Provider;
-function useRecentColors() {
-  return useContext(RecentColorsContext);
-}
-var DRAW_TOOL_CONTROL = {
-  select: "draw.tools.select",
-  pen: "draw.tools.pen",
-  highlighter: "draw.tools.highlighter",
-  eraser: "draw.tools.eraser"
-};
-function DrawSection(p) {
-  const { t } = useTranslation();
-  const { pushColor } = useRecentColors();
-  const colorRef = useRef(null);
-  useEffect(() => {
-    const el = colorRef.current;
-    if (!el) {
-      return;
-    }
-    const handler = () => pushColor(el.value);
-    el.addEventListener("change", handler);
-    return () => el.removeEventListener("change", handler);
-  }, [pushColor]);
-  return /* @__PURE__ */ jsxs(RibbonGroupScope, { id: "draw.tools", children: [
-    /* @__PURE__ */ jsx("div", { className: grp, children: DRAW_TOOLS.map((tool, i, a) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => p.onSetActiveTool(tool.id),
-        className: cn(
-          i < a.length - 1 ? gB : gL,
-          p.activeTool === tool.id ? tool.ac ?? "bg-accent text-foreground" : ""
-        ),
-        title: t(tool.labelKey),
-        ...controlAttr(DRAW_TOOL_CONTROL[tool.id]),
-        children: tool.icon
-      },
-      tool.id
-    )) }),
-    /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 text-xs", children: [
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: "inline-flex items-center gap-1 text-muted-foreground",
-          title: t("pptx.ribbon.penColour"),
-          ...controlAttr("draw.tools.penColor"),
-          children: [
-            t("pptx.ribbon.colour"),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: colorRef,
-                type: "color",
-                value: p.drawingColor,
-                onChange: (e) => p.onSetDrawingColor(e.target.value),
-                className: "w-6 h-6 rounded border border-border bg-transparent cursor-pointer"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: "inline-flex items-center gap-1 text-muted-foreground",
-          title: t("pptx.ribbon.strokeWidth"),
-          ...controlAttr("draw.tools.penWidth"),
-          children: [
-            t("pptx.ribbon.width"),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "range",
-                min: 1,
-                max: 12,
-                value: p.drawingWidth,
-                onChange: (e) => p.onSetDrawingWidth(Number(e.target.value)),
-                className: "w-16 h-1 accent-primary"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-foreground w-4 text-right", children: p.drawingWidth })
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-var ViewerCustomizationContext = createContext(
-  EMPTY_RESOLVED_CUSTOMIZATION
-);
-function useViewerCustomizationContext() {
-  return useContext(ViewerCustomizationContext);
-}
-function useHostEvent(ref, type, handler) {
-  useEffect(() => {
-    const host = ref.current;
-    if (!host || !handler) {
-      return;
-    }
-    host.addEventListener(type, handler);
-    return () => host.removeEventListener(type, handler);
-  }, [ref, type, handler]);
-}
-function WebSearch({
-  value,
-  disabled = false,
-  onInput,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  ...rest
-}) {
-  const ref = useRef(null);
-  useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.value = value;
-      ref.current.disabled = disabled;
-    }
-  }, [value, disabled]);
-  useHostEvent(ref, "input", onInput);
-  useHostEvent(ref, "change", onChange);
-  useHostEvent(ref, "focusin", onFocus);
-  useHostEvent(ref, "focusout", onBlur);
-  useHostEvent(ref, "keydown", onKeyDown);
-  return /* @__PURE__ */ jsx("pptx-ui-search", { ref, value, disabled: disabled || void 0, ...rest });
+  }, [value, disabled]);
+  useHostEvent(ref, "input", onInput);
+  useHostEvent(ref, "change", onChange);
+  useHostEvent(ref, "focusin", onFocus);
+  useHostEvent(ref, "focusout", onBlur);
+  useHostEvent(ref, "keydown", onKeyDown);
+  return /* @__PURE__ */ jsx("pptx-ui-search", { ref, value, disabled: disabled || void 0, ...rest });
 }
 function WebSelect({
   value,
@@ -2225,7 +1499,7 @@ function AccountPage() {
       return void 0;
     });
   };
-  const version = "4.15.0" ;
+  const version = "4.16.1" ;
   return /* @__PURE__ */ jsxs("div", { className: "mt-8 max-w-[700px] space-y-6", children: [
     /* @__PURE__ */ jsxs("section", { className: cardClass, children: [
       /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 text-sm font-semibold", children: [
@@ -2627,76 +1901,69 @@ function FileSection(p) {
     }
   );
 }
-function ClipboardGroup(p) {
+function WebHomeControls({
+  family,
+  controls,
+  onRequest
+}) {
   const { t } = useTranslation();
-  const [copiedFeedback, setCopiedFeedback] = useState(false);
-  const [cutFeedback, setCutFeedback] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", ...groupAttr("home.clipboard"), children: [
-    /* @__PURE__ */ jsxs("div", { className: grp, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: p.onPaste,
-          disabled: !p.canPaste || !p.canEdit,
-          className: gB,
-          title: t("pptx.arrange.paste"),
-          ...controlAttr("home.clipboard.paste"),
-          children: /* @__PURE__ */ jsx(LuClipboardPaste, { className: ic })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            p.onCut();
-            setCutFeedback(true);
-            setTimeout(() => setCutFeedback(false), 600);
-          },
-          disabled: !p.canEdit || !p.hasSelection,
-          className: cn(gB, cutFeedback && "bg-green-600/20 text-green-400"),
-          title: t("pptx.arrange.cut"),
-          ...controlAttr("home.clipboard.cut"),
-          children: /* @__PURE__ */ jsx(LuScissors, { className: ic })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            p.onCopy();
-            setCopiedFeedback(true);
-            setTimeout(() => setCopiedFeedback(false), 600);
-          },
-          disabled: !p.hasSelection,
-          className: cn(gB, copiedFeedback && "bg-green-600/20 text-green-400"),
-          title: t("pptx.arrange.copy"),
-          ...controlAttr("home.clipboard.copy"),
-          children: /* @__PURE__ */ jsx(LuCopy, { className: ic })
-        }
-      ),
-      p.onToggleFormatPainter && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: p.onToggleFormatPainter,
-          disabled: !p.canEdit || p.canActivateFormatPainter === false && !p.formatPainterActive,
-          "data-testid": "format-painter-toggle",
-          "data-active": p.formatPainterActive ? "true" : "false",
-          className: cn(
-            gL,
-            p.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
-          ),
-          title: t("pptx.arrange.formatPainter"),
-          ...controlAttr("home.clipboard.formatPainter"),
-          children: /* @__PURE__ */ jsx(LuPaintbrush, { className: ic })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: t("pptx.ribbon.clipboard") })
-  ] });
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.state = { controls, translate: t };
+    }
+  }, [controls, t]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const listener = (event) => onRequest(event.detail.id);
+    host.addEventListener("home-request", listener);
+    return () => host.removeEventListener("home-request", listener);
+  }, [onRequest]);
+  return React95.createElement(`pptx-ui-ribbon-home-${family}`, { ref });
+}
+function ClipboardGroup(p) {
+  const { canEdit, hasSelection, canPaste: canPaste2, formatPainterActive, canActivateFormatPainter } = p;
+  const { onPaste, onCut, onCopy, onToggleFormatPainter } = p;
+  const controls = useMemo(
+    () => clipboardHomeControls({
+      editable: canEdit,
+      hasSelection,
+      hasClipboard: canPaste2,
+      formatPainterActive: Boolean(formatPainterActive),
+      canFormatPaint: canActivateFormatPainter !== false,
+      showFormatPainter: Boolean(onToggleFormatPainter)
+    }),
+    [
+      canEdit,
+      hasSelection,
+      canPaste2,
+      formatPainterActive,
+      canActivateFormatPainter,
+      onToggleFormatPainter
+    ]
+  );
+  const request = useCallback(
+    (id) => {
+      switch (id) {
+        case "home.clipboard.paste":
+          onPaste();
+          break;
+        case "home.clipboard.cut":
+          onCut();
+          break;
+        case "home.clipboard.copy":
+          onCopy();
+          break;
+        case "home.clipboard.formatPainter":
+          onToggleFormatPainter?.();
+      }
+    },
+    [onPaste, onCut, onCopy, onToggleFormatPainter]
+  );
+  return /* @__PURE__ */ jsx(WebHomeControls, { family: "clipboard", controls, onRequest: request });
 }
 function FontPickers(p) {
   const { t } = useTranslation();
@@ -3239,425 +2506,83 @@ function DateTimeFieldDialog(p) {
     }
   );
 }
-var ICONS3 = {
-  freeformShape: LuPenTool,
-  curve: LuSpline
-};
-function FreeformToolButtons({
-  canEdit,
-  activeTool,
-  onArm
-}) {
-  const { t } = useTranslation();
-  const customization = useViewerCustomizationContext();
-  const tools = FREEFORM_TOOL_IDS.filter((tool) => isDrawingToolVisible(customization, tool));
-  if (tools.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: tools.map((tool) => {
-    const Icon = ICONS3[tool];
-    const active = activeTool === tool;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        disabled: !canEdit,
-        "aria-pressed": active,
-        "data-pptx-drawing-tool": tool,
-        className: cn(pill, active && "bg-primary/15 text-primary"),
-        title: t(FREEFORM_TOOL_LABEL_KEYS[tool]),
-        onClick: () => onArm(active ? null : tool),
-        children: [
-          /* @__PURE__ */ jsx(Icon, { className: ic }),
-          t(FREEFORM_TOOL_LABEL_KEYS[tool])
-        ]
-      },
-      tool
-    );
-  }) });
-}
-function InsertHyperlinkButton(p) {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: p.onOpenHyperlinkDialog,
-      disabled: !p.hasSelection,
-      className: pill,
-      title: t("pptx.hyperlinkDialog.title"),
-      ...controlAttr("insert.links.link"),
-      children: [
-        /* @__PURE__ */ jsx(LuLink, { className: ic }),
-        t("pptx.hyperlinkDialog.title")
-      ]
-    }
-  );
-}
 function InsertSection(p) {
   const { t } = useTranslation();
-  const { canEdit } = p;
+  const customization = useViewerCustomizationContext();
+  const ref = useRef(null);
   const [datePickerOpen, setDatePickerOpen] = useState(false);
-  const [newChartKind, setNewChartKind] = useState(DEFAULT_INSERT_CHART_KIND);
-  const actionMenuRef = useRef(null);
-  const fieldMenuRef = useRef(null);
-  const openDatePicker = () => setDatePickerOpen(true);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.text", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: p.onAddTextBox,
-        disabled: !canEdit,
-        className: pill,
-        title: t("pptx.insert.addTextBox"),
-        ...controlAttr("insert.text.textBox"),
-        children: [
-          /* @__PURE__ */ jsx(LuType, { className: ic }),
-          t("pptx.ribbon.textBox")
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(RibbonGroupScope, { id: "insert.illustrations", children: [
-      /* @__PURE__ */ jsxs("div", { className: grp, ...controlAttr("insert.illustrations.shapes"), children: [
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            value: p.newShapeType,
-            onChange: (e) => p.onSetNewShapeType(e.target.value),
-            className: "bg-transparent py-1.5 pl-2 pr-1 outline-none text-xs",
-            title: t("pptx.insert.shapeType"),
-            children: SHAPE_PRESETS.map((sp) => /* @__PURE__ */ jsx("option", { value: sp.type, className: "bg-background", children: t(sp.i18nKey) }, sp.type))
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: p.onAddShape,
-            disabled: !canEdit,
-            className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 border-l border-border hover:bg-accent transition-colors text-xs",
-            title: t("pptx.insert.addShape"),
-            children: [
-              SHAPE_PRESETS.find((sp) => sp.type === p.newShapeType)?.icon || /* @__PURE__ */ jsx(LuSquare, { className: ic }),
-              t("pptx.insert.shape")
-            ]
-          }
-        )
-      ] }),
-      p.onArmFreeformTool && /* @__PURE__ */ jsx(
-        FreeformToolButtons,
-        {
-          canEdit,
-          activeTool: p.activeFreeformTool,
-          onArm: p.onArmFreeformTool
+  const [chartKind, setChartKind] = useState(DEFAULT_INSERT_CHART_KIND);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    host.state = {
+      editable: p.canEdit,
+      hasSelection: p.hasSelection,
+      shapeType: p.newShapeType,
+      chartKind,
+      activeFreeformTool: p.activeFreeformTool ?? null,
+      freeformTools: p.onArmFreeformTool ? FREEFORM_TOOL_IDS.filter((tool) => isDrawingToolVisible(customization, tool)) : [],
+      chartAvailable: Boolean(p.onAddChart),
+      fieldAvailable: Boolean(p.onInsertField),
+      headerFooterAvailable: Boolean(p.onOpenHeaderFooter),
+      translate: t
+    };
+  }, [p, chartKind, customization, t]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const request = (event) => {
+      const intent = event.detail;
+      switch (intent.kind) {
+        case "command": {
+          const commands = {
+            textBox: p.onAddTextBox,
+            table: p.onAddTable,
+            image: p.onOpenImagePicker,
+            media: p.onOpenMediaPicker,
+            smartArt: p.onAddSmartArt,
+            equation: p.onAddEquation,
+            link: p.onOpenHyperlinkDialog,
+            headerFooter: p.onOpenHeaderFooter
+          };
+          commands[intent.value]?.();
+          break;
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.images", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: p.onOpenImagePicker,
-        disabled: !canEdit,
-        className: pill,
-        title: t("pptx.ribbon.insertImage"),
-        ...controlAttr("insert.images.pictures"),
-        children: [
-          /* @__PURE__ */ jsx(LuImage, { className: ic }),
-          t("pptx.ribbon.image")
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.media", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: p.onOpenMediaPicker,
-        disabled: !canEdit,
-        className: pill,
-        title: t("pptx.ribbon.insertMedia"),
-        ...controlAttr("insert.media.media"),
-        children: [
-          /* @__PURE__ */ jsx(LuVideo, { className: ic }),
-          t("pptx.ribbon.media")
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.tables", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: p.onAddTable,
-        disabled: !canEdit,
-        className: pill,
-        title: t("pptx.insert.insertTable"),
-        ...controlAttr("insert.tables.table"),
-        children: [
-          /* @__PURE__ */ jsx(LuDatabase, { className: ic }),
-          t("pptx.ribbon.table")
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(RibbonGroupScope, { id: "insert.illustrations", children: [
-      p.onAddChart && /* @__PURE__ */ jsxs("div", { className: grp, ...controlAttr("insert.illustrations.chart"), children: [
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            value: newChartKind,
-            onChange: (e) => {
-              const kind = INSERT_CHART_TYPES.find((ct) => ct.id === e.target.value)?.id;
-              setNewChartKind(kind ?? DEFAULT_INSERT_CHART_KIND);
-            },
-            className: "bg-transparent py-1.5 pl-2 pr-1 outline-none text-xs",
-            title: t("pptx.ribbon.chartType"),
-            children: INSERT_CHART_TYPES.map((ct) => /* @__PURE__ */ jsx("option", { value: ct.id, className: "bg-background", children: t(ct.labelKey) }, ct.id))
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => p.onAddChart(newChartKind),
-            disabled: !canEdit,
-            className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 border-l border-border hover:bg-accent transition-colors text-xs",
-            title: t("pptx.ribbon.insertChart"),
-            children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  className: ic,
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }),
-                    /* @__PURE__ */ jsx("rect", { x: "7", y: "11", width: "3", height: "6" }),
-                    /* @__PURE__ */ jsx("rect", { x: "12", y: "7", width: "3", height: "10" }),
-                    /* @__PURE__ */ jsx("rect", { x: "17", y: "13", width: "3", height: "4" })
-                  ]
-                }
-              ),
-              t("pptx.ribbon.chart")
-            ]
+        case "shapeType":
+          p.onSetNewShapeType(intent.value);
+          break;
+        case "shape":
+          p.onAddShape();
+          break;
+        case "chartType":
+          setChartKind(intent.value);
+          break;
+        case "chart":
+          p.onAddChart?.(intent.value);
+          break;
+        case "freeform":
+          p.onArmFreeformTool?.(intent.value);
+          break;
+        case "actionButton":
+          p.onAddActionButton(intent.value);
+          break;
+        case "field":
+          if (intent.value === "datetime") {
+            setDatePickerOpen(true);
+          } else {
+            p.onInsertField?.(intent.value);
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: p.onAddSmartArt,
-          disabled: !canEdit,
-          className: pill,
-          title: t("pptx.insert.insertSmartArt"),
-          ...controlAttr("insert.illustrations.smartArt"),
-          children: [
-            /* @__PURE__ */ jsx(LuLayers, { className: ic }),
-            t("pptx.ribbon.smartArt")
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.symbols", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: p.onAddEquation,
-        disabled: !canEdit,
-        className: pill,
-        title: t("pptx.insert.insertEquation"),
-        ...controlAttr("insert.symbols.equation"),
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: ic,
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ jsx("path", { d: "M4 17h6M7 14v6M14 7l4.5 10M15.5 14h5" })
-            }
-          ),
-          t("pptx.ribbon.equation")
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.links", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative group inline-flex items-center",
-        ref: actionMenuRef,
-        ...controlAttr("insert.links.action"),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              disabled: !canEdit,
-              className: pill,
-              title: t("pptx.ribbon.insertActionButton"),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    className: ic,
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-                      /* @__PURE__ */ jsx("path", { d: "M13 7l4 5-4 5" })
-                    ]
-                  }
-                ),
-                t("pptx.ribbon.action"),
-                /* @__PURE__ */ jsx(LuChevronDown, { className: "w-3 h-3" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RibbonMenu,
-            {
-              anchorRef: actionMenuRef,
-              className: "hidden group-hover:flex flex-col w-40 pt-1",
-              children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl py-1", children: ACTION_BUTTON_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  disabled: !canEdit,
-                  className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
-                  onClick: () => p.onAddActionButton(preset.shapeType),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        className: "w-4 h-4 flex-shrink-0",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        children: /* @__PURE__ */ jsx("path", { d: preset.iconPath })
-                      }
-                    ),
-                    preset.label
-                  ]
-                },
-                preset.shapeType
-              )) })
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.text", children: p.onInsertField && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative group inline-flex items-center",
-        ref: fieldMenuRef,
-        ...controlAttr("insert.text.field"),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              disabled: !canEdit,
-              className: pill,
-              title: t("pptx.field.insertField"),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    className: ic,
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsx("path", { d: "M4 7h16M4 12h10M4 17h12" }),
-                      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "15", r: "3" })
-                    ]
-                  }
-                ),
-                t("pptx.field.field"),
-                /* @__PURE__ */ jsx(LuChevronDown, { className: "w-3 h-3" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RibbonMenu,
-            {
-              anchorRef: fieldMenuRef,
-              className: "hidden group-hover:flex flex-col w-44 pt-1",
-              children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl py-1", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: !canEdit,
-                    className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
-                    onClick: () => p.onInsertField("slidenum"),
-                    children: t("pptx.field.slideNumber")
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: !canEdit,
-                    className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
-                    onClick: openDatePicker,
-                    children: t("pptx.field.dateTime")
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: !canEdit,
-                    className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
-                    onClick: () => p.onInsertField("header"),
-                    children: t("pptx.field.header")
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: !canEdit,
-                    className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
-                    onClick: () => p.onInsertField("footer"),
-                    children: t("pptx.field.footer")
-                  }
-                )
-              ] })
-            }
-          )
-        ]
       }
-    ) }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.links", children: /* @__PURE__ */ jsx(
-      InsertHyperlinkButton,
-      {
-        hasSelection: p.hasSelection,
-        onOpenHyperlinkDialog: p.onOpenHyperlinkDialog
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RibbonGroupScope, { id: "insert.text", children: p.onOpenHeaderFooter && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        disabled: !canEdit,
-        className: cn(pill, "whitespace-nowrap"),
-        onClick: p.onOpenHeaderFooter,
-        children: t("pptx.headerFooter.title")
-      }
-    ) }),
+    };
+    host.addEventListener("insert-request", request);
+    return () => host.removeEventListener("insert-request", request);
+  }, [p]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("pptx-ui-ribbon-insert", { ref }),
     datePickerOpen && p.onInsertField && /* @__PURE__ */ jsx(
       DateTimeFieldDialog,
       {
@@ -3670,200 +2595,62 @@ function InsertSection(p) {
     )
   ] });
 }
+function WebRibbonSection({
+  groups,
+  onCommand
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.groups = groups;
+    }
+  }, [groups]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const request = (event) => onCommand(event.detail.id);
+    host.addEventListener("command-request", request);
+    return () => host.removeEventListener("command-request", request);
+  }, [onCommand]);
+  return /* @__PURE__ */ jsx("pptx-ui-ribbon-section", { ref });
+}
 function ReviewSection(p) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      RibbonGroup,
-      {
-        label: t("pptx.review.proofing", { defaultValue: "Proofing" }),
-        groupId: "review.proofing",
-        children: [
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.proofing.spelling",
-              label: t("pptx.review.spelling"),
-              icon: /* @__PURE__ */ jsx(LuSpellCheck, {}),
-              onClick: () => p.onSetSpellCheckEnabled(!p.spellCheckEnabled),
-              active: p.spellCheckEnabled,
-              title: t("pptx.review.toggleSpellCheck")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.proofing.thesaurus",
-              label: t("pptx.review.thesaurus", { defaultValue: "Thesaurus" }),
-              icon: /* @__PURE__ */ jsx(LuBookOpen, {}),
-              disabled: true
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RibbonGroup,
-      {
-        label: t("pptx.review.accessibility", { defaultValue: "Accessibility" }),
-        groupId: "review.accessibility",
-        children: /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            controlId: "review.accessibility.check",
-            label: t("pptx.review.accessibilityCheck"),
-            icon: /* @__PURE__ */ jsx(LuShieldCheck, {}),
-            onClick: p.onOpenAccessibilityCheck
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.review.language"), groupId: "review.language", children: [
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "review.language.translate",
-          label: t("pptx.review.translate", { defaultValue: "Translate" }),
-          icon: /* @__PURE__ */ jsx(LuLanguages, {}),
-          disabled: true
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          label: t("pptx.review.language"),
-          icon: /* @__PURE__ */ jsx(LuGlobe, {}),
-          disabled: !p.onSetLanguage,
-          onClick: p.onSetLanguage
+  const groups = buildReviewRibbon(t, {
+    editable: p.canEdit,
+    spellCheck: p.spellCheckEnabled,
+    canAccessibility: Boolean(p.onOpenAccessibilityCheck),
+    canLanguage: Boolean(p.onSetLanguage),
+    canCompare: Boolean(p.onCompare),
+    canComments: Boolean(p.onToggleComments),
+    commentsOpen: p.isCommentsPanelOpen,
+    commentCount: p.slideCommentCount
+  });
+  const request = (id) => {
+    switch (id) {
+      case "review.proofing.spelling":
+        p.onSetSpellCheckEnabled(!p.spellCheckEnabled);
+        break;
+      case "review.accessibility.check":
+        p.onOpenAccessibilityCheck?.();
+        break;
+      case "review.language.language":
+        p.onSetLanguage?.();
+        break;
+      case "review.compare.compare":
+        if (p.canEdit) {
+          p.onCompare?.();
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(
-      RibbonGroup,
-      {
-        label: t("pptx.review.changes", { defaultValue: "Changes" }),
-        groupId: "review.compare",
-        children: [
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.compare.markAllRead",
-              label: t("pptx.review.markAllRead", { defaultValue: "Mark All as Read" }),
-              icon: /* @__PURE__ */ jsx(LuCopy, {}),
-              disabled: true
-            }
-          ),
-          p.onCompare && /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.compare.compare",
-              label: t("pptx.ribbon.compare"),
-              icon: /* @__PURE__ */ jsx(LuGitCompare, {}),
-              onClick: p.onCompare,
-              disabled: !p.canEdit,
-              title: t("pptx.ribbon.compareTitle")
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.toolbar.comments"), groupId: "review.comments", children: [
-      p.onToggleComments && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            controlId: "review.comments.newComment",
-            label: t("pptx.toolbar.comments"),
-            icon: /* @__PURE__ */ jsx(LuMessageSquarePlus, {}),
-            onClick: p.onToggleComments,
-            active: p.isCommentsPanelOpen,
-            title: t("pptx.review.toggleComments")
-          }
-        ),
-        Boolean(p.slideCommentCount) && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 rounded-full bg-primary px-1 text-[9px] text-white", children: p.slideCommentCount })
-      ] }),
-      /* @__PURE__ */ jsxs(RibbonCommandStack, { children: [
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "review.comments.delete",
-            label: t("pptx.common.delete", { defaultValue: "Delete" }),
-            icon: /* @__PURE__ */ jsx(LuTrash2, {}),
-            disabled: true
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "review.comments.previous",
-            label: t("pptx.common.previous", { defaultValue: "Previous" }),
-            icon: /* @__PURE__ */ jsx(LuChevronLeft, {}),
-            disabled: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(RibbonCommandStack, { children: [
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "review.comments.next",
-            label: t("pptx.common.next", { defaultValue: "Next" }),
-            icon: /* @__PURE__ */ jsx(LuChevronRight, {}),
-            disabled: true
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "review.comments.showComments",
-            label: t("pptx.review.showComments", { defaultValue: "Show Comments" }),
-            icon: /* @__PURE__ */ jsx(LuMessageSquare, {}),
-            onClick: p.onToggleComments
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      RibbonGroup,
-      {
-        label: t("pptx.review.protect", { defaultValue: "Protect" }),
-        groupId: "review.protect",
-        children: [
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.protect.readOnly",
-              label: t("pptx.review.readOnly", { defaultValue: "Always Open Read-only" }),
-              icon: /* @__PURE__ */ jsx(LuLockKeyhole, {}),
-              disabled: true
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.protect.restrictPermission",
-              label: t("pptx.review.restrictPermission", { defaultValue: "Restrict Permission" }),
-              icon: /* @__PURE__ */ jsx(LuShieldCheck, {}),
-              disabled: true
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RibbonCommand,
-            {
-              controlId: "review.ink.hideInk",
-              label: t("pptx.review.hideInk", { defaultValue: "Hide Ink" }),
-              icon: /* @__PURE__ */ jsx(LuEyeOff, {}),
-              disabled: true
-            }
-          )
-        ]
-      }
-    )
-  ] });
+        break;
+      case "review.comments.newComment":
+      case "review.comments.showComments":
+        p.onToggleComments?.();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx(WebRibbonSection, { groups, onCommand: request });
 }
 function CustomShowsControls({
   customShows,
@@ -4018,81 +2805,6 @@ function SubtitleSettingsControl() {
     }
   );
 }
-function useIntent(ref, type, callback) {
-  useEffect(() => {
-    const host = ref.current;
-    if (!host || !callback) {
-      return;
-    }
-    host.addEventListener(type, callback);
-    return () => host.removeEventListener(type, callback);
-  }, [ref, type, callback]);
-}
-function WebRibbonGroup({
-  label,
-  groupId,
-  children
-}) {
-  return /* @__PURE__ */ jsx("pptx-ui-ribbon-group", { label, "data-ribbon-group": groupId, children });
-}
-function WebRibbonCommand({
-  label,
-  icon,
-  controlId,
-  title,
-  disabled,
-  active,
-  pressed,
-  expanded,
-  compact,
-  onCommand
-}) {
-  const ref = useRef(null);
-  useIntent(
-    ref,
-    "command-request",
-    onCommand ? (event) => onCommand(event.detail.id) : void 0
-  );
-  return /* @__PURE__ */ jsx(
-    "pptx-ui-ribbon-command",
-    {
-      ref,
-      label,
-      icon,
-      "data-ribbon-control": controlId,
-      title,
-      disabled: disabled || void 0,
-      active: active || void 0,
-      pressed: pressed === void 0 ? void 0 : String(pressed),
-      expanded: expanded === void 0 ? void 0 : String(expanded),
-      compact: compact || void 0
-    }
-  );
-}
-function WebRibbonToggle({
-  label,
-  controlId,
-  checked,
-  title,
-  onToggle
-}) {
-  const ref = useRef(null);
-  useIntent(
-    ref,
-    "toggle-request",
-    onToggle ? (event) => onToggle(event.detail.checked) : void 0
-  );
-  return /* @__PURE__ */ jsx(
-    "pptx-ui-ribbon-toggle",
-    {
-      ref,
-      label,
-      "data-ribbon-control": controlId,
-      checked: checked || void 0,
-      title
-    }
-  );
-}
 function SlideShowSection(p) {
   const { t } = useTranslation();
   const { isHidden } = useToolbarVisibility(p.hiddenActions);
@@ -4170,6 +2882,124 @@ function SlideShowSection(p) {
     ) })
   ] });
 }
+
+// src/viewer/components/toolbar/text-section-state.ts
+function getEffectiveTextStyle(element, tableEditorState) {
+  if (!element) {
+    return void 0;
+  }
+  if (hasTextProperties(element)) {
+    return element.textStyle;
+  }
+  if (element.type === "table" && tableEditorState && element.tableData) {
+    const cell = element.tableData.rows[tableEditorState.rowIndex]?.cells[tableEditorState.columnIndex];
+    return cell?.style;
+  }
+  return void 0;
+}
+function isTextDecorationFlag(id) {
+  return TEXT_DECORATION_FLAGS.includes(id);
+}
+function textSectionFlags(element, tableEditorState, readSelection) {
+  if (element && hasTextProperties(element)) {
+    const result = readSelection ? getInlineEditorSelectionResult(element.textSegments) : null;
+    const current = result?.kind === "supported" && (!result.snapshot || result.snapshot.elementId === element.id) ? result : null;
+    return getSelectionTextStyleFlags(
+      current?.snapshot?.textSegments ?? element.textSegments,
+      current?.selection ?? null,
+      element.textStyle
+    );
+  }
+  return getSelectionTextStyleFlags(
+    void 0,
+    null,
+    getEffectiveTextStyle(element, tableEditorState)
+  );
+}
+function textSectionBulletKind(element, tableEditorState) {
+  if (element && hasTextProperties(element)) {
+    const result = getInlineEditorSelectionResult(element.textSegments, { preserveCaret: true });
+    return result.kind === "supported" && (!result.snapshot || result.snapshot.elementId === element.id) ? selectionBulletKind(element, result.selection, result.snapshot?.textSegments) : elementBulletKind(element);
+  }
+  return getEffectiveTextStyle(element, tableEditorState)?.listType ?? "none";
+}
+var TEXT_SHADOW_ON = {
+  textShadowColor: "#000000",
+  textShadowBlur: 2,
+  textShadowOffsetX: 1,
+  textShadowOffsetY: 1,
+  textShadowOpacity: 0.5
+};
+var TEXT_SHADOW_OFF = {
+  textShadowColor: void 0,
+  textShadowBlur: void 0,
+  textShadowOffsetX: void 0,
+  textShadowOffsetY: void 0
+};
+function FontFormatGroup(p) {
+  const { canMut, canFormat, isTextEl, selectedElement, tableEditorState, effectiveTs } = p;
+  const { onUpdateTextStyle } = p;
+  const flags = textSectionFlags(selectedElement, tableEditorState, false);
+  const shadow = Boolean(effectiveTs?.textShadowColor);
+  const controls = useMemo(
+    () => fontHomeControls({
+      enabled: canMut && canFormat,
+      bold: flags.bold === "on",
+      italic: flags.italic === "on",
+      underline: flags.underline === "on",
+      strikethrough: flags.strikethrough === "on",
+      shadow
+    }),
+    [canMut, canFormat, flags.bold, flags.italic, flags.underline, flags.strikethrough, shadow]
+  );
+  const request = useCallback(
+    (id) => {
+      if (!canFormat || !selectedElement) {
+        return;
+      }
+      const flag = id.replace("home.font.", "");
+      if (isTextDecorationFlag(flag)) {
+        const current2 = textSectionFlags(selectedElement, tableEditorState, true);
+        onUpdateTextStyle({ [flag]: nextToggleValue(current2[flag]) });
+        return;
+      }
+      const textual = isTextEl;
+      const current = effectiveTs?.fontSize ?? (textual ? textFontSizePtToPx(18) : 18);
+      const delta = textual ? textFontSizePtToPx(2) : 2;
+      switch (id) {
+        case "home.font.shadow":
+          onUpdateTextStyle(shadow ? TEXT_SHADOW_OFF : TEXT_SHADOW_ON);
+          break;
+        case "home.font.increaseFontSize":
+          onUpdateTextStyle({ fontSize: current + delta });
+          break;
+        case "home.font.decreaseFontSize":
+          onUpdateTextStyle({
+            fontSize: Math.max(textual ? textFontSizePtToPx(1) : 1, current - delta)
+          });
+          break;
+        case "home.font.clearFormatting":
+          onUpdateTextStyle({
+            bold: false,
+            italic: false,
+            underline: false,
+            strikethrough: false,
+            highlightColor: void 0
+          });
+      }
+    },
+    [
+      canFormat,
+      selectedElement,
+      tableEditorState,
+      isTextEl,
+      effectiveTs,
+      shadow,
+      onUpdateTextStyle
+    ]
+  );
+  return /* @__PURE__ */ jsx(WebHomeControls, { family: "font", controls, onRequest: request });
+}
 var LINE_SPACING_OPTIONS = [
   { label: "1.0", value: 1 },
   { label: "1.15", value: 1.15 },
@@ -4330,12 +3160,6 @@ function ColumnsDropdown(p) {
   ] });
 }
 var ON = "bg-primary/20 ring-1 ring-primary";
-var ALIGN_CONTROL = {
-  left: "home.paragraph.alignLeft",
-  center: "home.paragraph.alignCenter",
-  right: "home.paragraph.alignRight",
-  justify: "home.paragraph.justify"
-};
 function fixedGallery(control) {
   return FIXED_TAB_GALLERIES.find((placement) => placement.control === control);
 }
@@ -4343,14 +3167,27 @@ var BULLETS_GALLERY = fixedGallery("home.paragraph.bullets");
 var NUMBERING_GALLERY = fixedGallery("home.paragraph.numbering");
 function ParagraphGroup(p) {
   const { t } = useTranslation();
-  const { canMut, canFormat } = p;
-  const indent = (delta) => {
-    if (!canFormat) {
-      return;
-    }
-    const current = p.effectiveTs?.paragraphMarginLeft ?? 0;
-    p.onUpdateTextStyle({ paragraphMarginLeft: Math.max(0, current + delta) });
-  };
+  const { canMut, canFormat, effectiveTs, onUpdateTextStyle } = p;
+  const align = paragraphHomeAlign(effectiveTs?.align);
+  const paragraphControls = useMemo(
+    () => paragraphHomeControls({ enabled: canMut && canFormat, align }),
+    [canMut, canFormat, align]
+  );
+  const requestParagraph = useCallback(
+    (id) => {
+      const action = paragraphHomeAction(id);
+      if (!canFormat || !action) {
+        return;
+      }
+      if (action.kind === "indent") {
+        const current = effectiveTs?.paragraphMarginLeft ?? 0;
+        onUpdateTextStyle({ paragraphMarginLeft: Math.max(0, current + action.delta) });
+      } else {
+        onUpdateTextStyle({ align: action.align });
+      }
+    },
+    [canFormat, effectiveTs, onUpdateTextStyle]
+  );
   const listToggle = (kind, placement, title, icon) => /* @__PURE__ */ jsxs("div", { className: grp, ...controlAttr(placement?.control), children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -4381,52 +3218,14 @@ function ParagraphGroup(p) {
         t("pptx.text.numberedList"),
         /* @__PURE__ */ jsx(LuListOrdered, { className: ic })
       ),
-      /* @__PURE__ */ jsxs("div", { className: grp, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled: !canMut,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => indent(-24),
-            className: gB,
-            title: t("pptx.text.decreaseIndent"),
-            ...controlAttr("home.paragraph.decreaseIndent"),
-            children: /* @__PURE__ */ jsx(LuIndentDecrease, { className: ic })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled: !canMut,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => indent(24),
-            className: gL,
-            title: t("pptx.text.increaseIndent"),
-            ...controlAttr("home.paragraph.increaseIndent"),
-            children: /* @__PURE__ */ jsx(LuIndentIncrease, { className: ic })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: grp, children: ATXT.map((b, i, a) => /* @__PURE__ */ jsx(
-        "button",
+      /* @__PURE__ */ jsx(
+        WebHomeControls,
         {
-          type: "button",
-          disabled: !canMut,
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => {
-            if (canFormat) {
-              p.onUpdateTextStyle({ align: b.id });
-            }
-          },
-          className: i < a.length - 1 ? gB : gL,
-          title: t(b.labelKey),
-          ...controlAttr(ALIGN_CONTROL[b.id]),
-          children: b.i
-        },
-        b.id
-      )) }),
+          family: "paragraph",
+          controls: paragraphControls,
+          onRequest: requestParagraph
+        }
+      ),
       /* @__PURE__ */ jsx(
         LineSpacingDropdown,
         {
@@ -4456,47 +3255,6 @@ function ParagraphGroup(p) {
     /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: t("pptx.ribbon.paragraph") })
   ] });
 }
-
-// src/viewer/components/toolbar/text-section-state.ts
-function getEffectiveTextStyle(element, tableEditorState) {
-  if (!element) {
-    return void 0;
-  }
-  if (hasTextProperties(element)) {
-    return element.textStyle;
-  }
-  if (element.type === "table" && tableEditorState && element.tableData) {
-    const cell = element.tableData.rows[tableEditorState.rowIndex]?.cells[tableEditorState.columnIndex];
-    return cell?.style;
-  }
-  return void 0;
-}
-function isTextDecorationFlag(id) {
-  return TEXT_DECORATION_FLAGS.includes(id);
-}
-function textSectionFlags(element, tableEditorState, readSelection) {
-  if (element && hasTextProperties(element)) {
-    const result = readSelection ? getInlineEditorSelectionResult(element.textSegments) : null;
-    const current = result?.kind === "supported" && (!result.snapshot || result.snapshot.elementId === element.id) ? result : null;
-    return getSelectionTextStyleFlags(
-      current?.snapshot?.textSegments ?? element.textSegments,
-      current?.selection ?? null,
-      element.textStyle
-    );
-  }
-  return getSelectionTextStyleFlags(
-    void 0,
-    null,
-    getEffectiveTextStyle(element, tableEditorState)
-  );
-}
-function textSectionBulletKind(element, tableEditorState) {
-  if (element && hasTextProperties(element)) {
-    const result = getInlineEditorSelectionResult(element.textSegments, { preserveCaret: true });
-    return result.kind === "supported" && (!result.snapshot || result.snapshot.elementId === element.id) ? selectionBulletKind(element, result.selection, result.snapshot?.textSegments) : elementBulletKind(element);
-  }
-  return getEffectiveTextStyle(element, tableEditorState)?.listType ?? "none";
-}
 function RecentColorsRow({
   prefix,
   disabled,
@@ -4894,13 +3652,6 @@ function useParagraphListKind(element) {
   const readServer = useCallback(() => element ? elementBulletKind(element) : "none", [element]);
   return useSyncExternalStore(subscribe, read, readServer);
 }
-var ON2 = "bg-primary/20 ring-1 ring-primary";
-var FONT_TOGGLE_CONTROL = {
-  bold: "home.font.bold",
-  italic: "home.font.italic",
-  underline: "home.font.underline",
-  strikethrough: "home.font.strikethrough"
-};
 function TextSection(p) {
   const { t } = useTranslation();
   const hasSel = Boolean(p.selectedElement);
@@ -4909,7 +3660,6 @@ function TextSection(p) {
   const isTable = hasSel && p.selectedElement?.type === "table";
   const canFormat = isTextEl || isTable;
   const effectiveTs = getEffectiveTextStyle(p.selectedElement, p.tableEditorState);
-  const pressedFlags = textSectionFlags(p.selectedElement, p.tableEditorState, false);
   const selectedListKind = useParagraphListKind(p.selectedElement);
   const bulletKind = isTextEl ? selectedListKind : textSectionBulletKind(p.selectedElement, p.tableEditorState);
   const toggleBullets = (kind) => {
@@ -4949,158 +3699,18 @@ function TextSection(p) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", ...groupAttr("home.font"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", "data-pptx-chrome": "font-controls", children: [
-        /* @__PURE__ */ jsx("div", { className: grp, "data-pptx-chrome": "control-cluster", children: FMT.map((b, i, a) => {
-          const flag = isTextDecorationFlag(b.id) ? b.id : void 0;
-          const handleClick = () => {
-            if (!canFormat || !p.selectedElement || !flag) {
-              return;
-            }
-            const flags = textSectionFlags(p.selectedElement, p.tableEditorState, true);
-            p.onUpdateTextStyle({ [flag]: nextToggleValue(flags[flag]) });
-          };
-          const pressed = flag !== void 0 && pressedFlags[flag] === "on";
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !canMut,
-              "aria-pressed": pressed,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: handleClick,
-              className: `${i < a.length - 1 ? gB : gL}${pressed ? ` ${ON2}` : ""}`,
-              title: t(b.labelKey),
-              ...controlAttr(FONT_TOGGLE_CONTROL[b.id]),
-              children: b.i
-            },
-            b.id
-          );
-        }) }),
         /* @__PURE__ */ jsx(
-          "button",
+          FontFormatGroup,
           {
-            type: "button",
-            disabled: !canMut,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => {
-              if (!canFormat) {
-                return;
-              }
-              const hasShadow = Boolean(effectiveTs?.textShadowColor);
-              p.onUpdateTextStyle(
-                hasShadow ? {
-                  textShadowColor: void 0,
-                  textShadowBlur: void 0,
-                  textShadowOffsetX: void 0,
-                  textShadowOffsetY: void 0
-                } : {
-                  textShadowColor: "#000000",
-                  textShadowBlur: 2,
-                  textShadowOffsetX: 1,
-                  textShadowOffsetY: 1,
-                  textShadowOpacity: 0.5
-                }
-              );
-            },
-            className: pill,
-            title: t("pptx.textEffects.shadow"),
-            "aria-label": t("pptx.textEffects.shadow"),
-            ...controlAttr("home.font.shadow"),
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                className: ic,
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: [
-                  /* @__PURE__ */ jsx("text", { x: "6", y: "17", fontSize: "16", fontWeight: "bold", fill: "currentColor", stroke: "none", children: "S" }),
-                  /* @__PURE__ */ jsx(
-                    "text",
-                    {
-                      x: "7.5",
-                      y: "18.5",
-                      fontSize: "16",
-                      fontWeight: "bold",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "0.5",
-                      opacity: "0.4",
-                      children: "S"
-                    }
-                  )
-                ]
-              }
-            )
+            canMut,
+            canFormat,
+            isTextEl,
+            selectedElement: p.selectedElement,
+            tableEditorState: p.tableEditorState,
+            effectiveTs,
+            onUpdateTextStyle: p.onUpdateTextStyle
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: grp, "data-pptx-chrome": "control-cluster", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !canMut,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => {
-                if (!canFormat || !p.selectedElement) {
-                  return;
-                }
-                const current = effectiveTs?.fontSize ?? (isTextEl ? textFontSizePtToPx(18) : 18);
-                const delta = isTextEl ? textFontSizePtToPx(2) : 2;
-                p.onUpdateTextStyle({ fontSize: current + delta });
-              },
-              className: gB,
-              title: t("pptx.text.increaseFontSize"),
-              ...controlAttr("home.font.increaseFontSize"),
-              children: /* @__PURE__ */ jsx(LuAArrowUp, { className: ic })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !canMut,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => {
-                if (!canFormat || !p.selectedElement) {
-                  return;
-                }
-                const current = effectiveTs?.fontSize ?? (isTextEl ? textFontSizePtToPx(18) : 18);
-                const delta = isTextEl ? textFontSizePtToPx(2) : 2;
-                const minimum = isTextEl ? textFontSizePtToPx(1) : 1;
-                p.onUpdateTextStyle({ fontSize: Math.max(minimum, current - delta) });
-              },
-              className: gB,
-              title: t("pptx.text.decreaseFontSize"),
-              ...controlAttr("home.font.decreaseFontSize"),
-              children: /* @__PURE__ */ jsx(LuAArrowDown, { className: ic })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !canMut,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => {
-                if (!canFormat) {
-                  return;
-                }
-                p.onUpdateTextStyle({
-                  bold: false,
-                  italic: false,
-                  underline: false,
-                  strikethrough: false,
-                  highlightColor: void 0
-                });
-              },
-              className: gL,
-              title: t("pptx.text.clearFormatting"),
-              ...controlAttr("home.font.clearFormatting"),
-              children: /* @__PURE__ */ jsx(LuRemoveFormatting, { className: ic })
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           TextSpacingCaseMenus,
           {
@@ -5141,228 +3751,62 @@ function TextSection(p) {
 }
 function ViewSection(p) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.view.presentationViews"), groupId: "view.presentationViews", children: [
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.presentationViews.normal",
-          label: t("pptx.view.normal"),
-          icon: /* @__PURE__ */ jsx(LuPanelTop, {}),
-          onClick: p.onGoToNormalView,
-          title: t("pptx.statusBar.normalView")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.presentationViews.slideSorter",
-          label: t("pptx.slideSorter.title"),
-          icon: /* @__PURE__ */ jsx(LuLayoutGrid, {}),
-          onClick: p.onToggleSlideSorter,
-          title: t("pptx.view.slideSorterTooltip")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.presentationViews.outline",
-          label: t("pptx.view.outlineView"),
-          icon: /* @__PURE__ */ jsx(LuIndentIncrease, {}),
-          onClick: p.onOpenOutlineView,
-          title: t("pptx.view.outlineViewTooltip")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.presentationViews.readingView",
-          label: t("pptx.view.readingView"),
-          icon: /* @__PURE__ */ jsx(LuBookOpen, {}),
-          onClick: p.onOpenReadingView,
-          title: t("pptx.view.readingView")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.view.masterViews"), groupId: "view.masterViews", children: [
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.masterViews.slideMaster",
-          label: t("pptx.master.title"),
-          icon: /* @__PURE__ */ jsx(LuPresentation, {}),
-          onClick: p.onEnterMasterView,
-          disabled: !p.canEdit,
-          title: t("pptx.view.slideMasterTooltip")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.masterViews.handoutMaster",
-          label: t("pptx.master.handoutMasterTitle", { defaultValue: "Handout Master" }),
-          icon: /* @__PURE__ */ jsx(LuGrid3X3, {}),
-          disabled: true
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.masterViews.notesMaster",
-          label: t("pptx.master.notesMasterTitle", { defaultValue: "Notes Master" }),
-          icon: /* @__PURE__ */ jsx(LuStickyNote, {}),
-          disabled: true
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.view.show", { defaultValue: "Show" }), groupId: "view.show", children: [
-      /* @__PURE__ */ jsxs(RibbonCommandStack, { children: [
-        /* @__PURE__ */ jsx(
-          RibbonToggle,
-          {
-            controlId: "view.show.ruler",
-            label: t("pptx.ruler.rulers"),
-            checked: p.showRulers,
-            onChange: p.onSetShowRulers
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonToggle,
-          {
-            controlId: "view.show.gridlines",
-            label: t("pptx.grid.grid"),
-            checked: p.showGrid,
-            onChange: p.onSetShowGrid,
-            title: t("pptx.grid.toggleGrid")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonToggle,
-          {
-            controlId: "view.show.guides",
-            label: t("pptx.view.guides", { defaultValue: "Guides" }),
-            checked: p.showGuides,
-            onChange: p.onSetShowGuides,
-            title: t("pptx.ribbon.toggleGuides")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonToggle,
-          {
-            controlId: "view.show.snapToGrid",
-            label: t("pptx.settings.snapToGrid"),
-            checked: p.snapToGrid,
-            onChange: p.onSetSnapToGrid
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(RibbonCommandStack, { children: [
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "view.show.selectionPane",
-            label: t("pptx.view.selection"),
-            icon: /* @__PURE__ */ jsx(LuList, {}),
-            onClick: p.onToggleSelectionPane,
-            active: p.isSelectionPaneOpen,
-            title: t("pptx.selectionPane.title")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "view.show.eyedropper",
-            label: t("pptx.ribbon.eyedropper"),
-            icon: /* @__PURE__ */ jsx(LuPipette, {}),
-            onClick: p.onToggleEyedropper,
-            active: p.eyedropperActive,
-            disabled: !p.canEdit
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "view.show.snapToShape",
-            label: t("pptx.view.snapToShape"),
-            icon: /* @__PURE__ */ jsx(LuGrid3X3, {}),
-            onClick: () => p.onSetSnapToShape(!p.snapToShape),
-            active: p.snapToShape,
-            title: t("pptx.view.snapToShape")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "view.show.addGuide",
-            label: t("pptx.view.hGuide"),
-            icon: /* @__PURE__ */ jsx(LuRuler, {}),
-            onClick: () => p.onAddGuide("h"),
-            title: t("pptx.view.addHorizontalGuide")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RibbonCommand,
-          {
-            compact: true,
-            controlId: "view.show.addGuide",
-            label: t("pptx.view.vGuide"),
-            icon: /* @__PURE__ */ jsx(LuRuler, {}),
-            onClick: () => p.onAddGuide("v"),
-            title: t("pptx.view.addVerticalGuide")
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.slideSorter.zoom"), groupId: "view.zoom", children: [
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.zoom.zoom",
-          label: t("pptx.slideSorter.zoom"),
-          icon: /* @__PURE__ */ jsx(LuZoomIn, {}),
-          disabled: true
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.zoom.fitToWindow",
-          label: t("pptx.view.zoomToFit"),
-          icon: /* @__PURE__ */ jsx(LuMaximize2, {}),
-          onClick: p.onZoomToFit
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(RibbonGroup, { label: t("pptx.view.window", { defaultValue: "Window" }), groupId: "view.window", children: [
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.window.templateEditing",
-          label: t(p.editTemplateMode ? "pptx.ribbon.templatesOn" : "pptx.ribbon.templatesOff"),
-          icon: /* @__PURE__ */ jsx(LuRuler, {}),
-          onClick: () => p.onSetEditTemplateMode(!p.editTemplateMode),
-          active: p.editTemplateMode,
-          disabled: !p.canEdit,
-          title: t("pptx.view.templateEditingTooltip", {
-            defaultValue: "Toggle template/master element editing"
-          })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RibbonCommand,
-        {
-          controlId: "view.window.macros",
-          label: t("pptx.view.macros", { defaultValue: "Macros" }),
-          icon: /* @__PURE__ */ jsx(LuCode, {}),
-          disabled: true
-        }
-      )
-    ] })
-  ] });
+  const ref = useRef(null);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    host.state = {
+      editable: p.canEdit,
+      showRulers: p.showRulers,
+      showGrid: p.showGrid,
+      showGuides: p.showGuides,
+      snapToGrid: p.snapToGrid,
+      snapToShape: p.snapToShape,
+      templateEditing: p.editTemplateMode,
+      selectionPaneOpen: p.isSelectionPaneOpen,
+      eyedropperActive: p.eyedropperActive,
+      translate: t
+    };
+  }, [p, t]);
+  useEffect(() => {
+    const host = ref.current;
+    if (!host) {
+      return;
+    }
+    const request = (event) => {
+      const intent = event.detail;
+      if (intent.kind === "guide") {
+        p.onAddGuide(intent.axis);
+      } else if (intent.kind === "option") {
+        const setters = {
+          showRulers: p.onSetShowRulers,
+          showGrid: p.onSetShowGrid,
+          showGuides: p.onSetShowGuides,
+          snapToGrid: p.onSetSnapToGrid,
+          snapToShape: p.onSetSnapToShape,
+          templateEditing: p.onSetEditTemplateMode
+        };
+        setters[intent.value](intent.enabled);
+      } else {
+        const commands = {
+          normal: p.onGoToNormalView,
+          slideSorter: p.onToggleSlideSorter,
+          outline: p.onOpenOutlineView,
+          readingView: p.onOpenReadingView,
+          slideMaster: p.onEnterMasterView,
+          selectionPane: p.onToggleSelectionPane,
+          eyedropper: p.onToggleEyedropper,
+          zoomToFit: p.onZoomToFit
+        };
+        commands[intent.value]?.();
+      }
+    };
+    host.addEventListener("view-request", request);
+    return () => host.removeEventListener("view-request", request);
+  }, [p]);
+  return /* @__PURE__ */ jsx("pptx-ui-ribbon-view", { ref });
 }
 function MobileSheet({
   open,
@@ -5559,6 +4003,7 @@ function MobileSectionBody({
       return /* @__PURE__ */ jsx("div", { className: wrap, children: /* @__PURE__ */ jsx(
         DrawSection,
         {
+          canEdit: p.canEdit,
           activeTool: p.activeTool,
           drawingColor: p.drawingColor,
           drawingWidth: p.drawingWidth,
@@ -5839,22 +4284,18 @@ function MobileToolbar(props) {
     }
   );
 }
+function useTranslateOr() {
+  const { t } = useTranslation();
+  return (key, fallback) => galleryTextLabel(t, key, fallback);
+}
 function ContextualTabSection({ tab }) {
   const translateOr = useTranslateOr();
   return /* @__PURE__ */ jsx(Fragment, { children: CONTEXTUAL_TAB_GROUPS[tab].map((group) => /* @__PURE__ */ jsx(
-    RibbonGroup,
+    WebRibbonGroup,
     {
       groupId: group.group,
       label: translateOr(group.labelKey, group.label),
-      className: "items-center",
-      children: group.galleries.map((placement) => /* @__PURE__ */ jsx(
-        RibbonGallery,
-        {
-          placement,
-          icon: /* @__PURE__ */ jsx(LuSparkles, { className: ics })
-        },
-        placement.control
-      ))
+      children: group.galleries.map((placement) => /* @__PURE__ */ jsx(RibbonGallery, { placement }, placement.control))
     },
     group.group
   )) });
@@ -6097,6 +4538,7 @@ function DrawingGroup(p) {
     sep
   ] });
 }
+var editingControls = editingHomeControls();
 function EditingSection(p) {
   const { t } = useTranslation();
   const [selectMenuOpen, setSelectMenuOpen] = useState(false);
@@ -6117,32 +4559,14 @@ function EditingSection(p) {
     sep,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", ...groupAttr("home.editing"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: grp, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: p.onToggleFindReplace,
-              className: gB,
-              title: t("pptx.editing.find"),
-              ...controlAttr("home.editing.find"),
-              children: /* @__PURE__ */ jsx(LuSearch, { className: ic })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: p.onToggleFindReplace,
-              className: gL,
-              title: t("pptx.ribbon.replace"),
-              ...controlAttr("home.editing.replace"),
-              children: /* @__PURE__ */ jsx(LuReplace, { className: ic })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx(
+          WebHomeControls,
+          {
+            family: "editing",
+            controls: editingControls,
+            onRequest: p.onToggleFindReplace
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "relative", ref: menuRef, ...controlAttr("home.editing.select"), children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -7111,6 +5535,7 @@ function Toolbar(p) {
               sDrw && /* @__PURE__ */ jsx(
                 DrawSection,
                 {
+                  canEdit: p.canEdit,
                   activeTool: p.activeTool,
                   drawingColor: p.drawingColor,
                   drawingWidth: p.drawingWidth,
@@ -7382,7 +5807,7 @@ var EXPLOSION_SUPPORTED_TYPES = /* @__PURE__ */ new Set([
   "doughnut",
   "ofPie"
 ]);
-var ICONS4 = {
+var ICONS3 = {
   elements: LuPlus,
   styles: LuPaintbrush,
   filters: LuFilter
@@ -7425,7 +5850,7 @@ function ChartQuickActionsOverlay({
       "data-export-ignore": "true",
       style: { position: "absolute", left: 0, top: 0, zIndex: 59 },
       onMouseDown: (e) => e.stopPropagation(),
-      children: descriptor.buttons.map((button) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+      children: descriptor.buttons.map((button) => /* @__PURE__ */ jsxs(React95.Fragment, { children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -7445,7 +5870,7 @@ function ChartQuickActionsOverlay({
               transformOrigin: "top left"
             },
             className: "flex items-center justify-center rounded bg-white border border-gray-300 shadow-sm hover:bg-gray-100 text-gray-700",
-            children: React6.createElement(ICONS4[button.id], { className: "size-3.5" })
+            children: React95.createElement(ICONS3[button.id], { className: "size-3.5" })
           }
         ),
         open === button.id && button.id === "elements" && /* @__PURE__ */ jsxs(
@@ -8595,7 +7020,7 @@ function HorizontalRulerView({ ticks, widthPx, highlight }) {
     }
   );
 }
-var HorizontalRuler = React6.memo(HorizontalRulerView);
+var HorizontalRuler = React95.memo(HorizontalRulerView);
 HorizontalRuler.displayName = "HorizontalRuler";
 function VerticalRulerView({ ticks, heightPx, highlight }) {
   return /* @__PURE__ */ jsxs(
@@ -8667,7 +7092,7 @@ function VerticalRulerView({ ticks, heightPx, highlight }) {
     }
   );
 }
-var VerticalRuler = React6.memo(VerticalRulerView);
+var VerticalRuler = React95.memo(VerticalRulerView);
 VerticalRuler.displayName = "VerticalRuler";
 function Ruler({
   canvasSize,
@@ -9546,6 +7971,9 @@ function ActiveXControlOverlay({
   }) });
 }
 var EMPTY_ADJUSTMENT_HANDLES = [];
+function cssAttr(id) {
+  return id.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
 function SlideCanvas(props) {
   const latest = useRef(props);
   latest.current = props;
@@ -9710,6 +8138,22 @@ function SlideCanvasContent({
     zoom,
     onMoveGuide
   });
+  const slideElements = activeSlide?.elements;
+  const enteredGroup = useMemo(() => {
+    if (!slideElements || !selectedElement) {
+      return null;
+    }
+    const parentId = parentSelection(slideElements, selectedElement.id);
+    return parentId ? slideSpaceElement(slideElements, parentId) : null;
+  }, [slideElements, selectedElement]);
+  const editingMember = useMemo(() => {
+    if (!slideElements || !inlineEditingElementId || !isGroupMember(slideElements, inlineEditingElementId)) {
+      return null;
+    }
+    const member = slideSpaceElement(slideElements, inlineEditingElementId);
+    const parentId = parentSelection(slideElements, inlineEditingElementId);
+    return member && parentId ? { member, parentId } : null;
+  }, [slideElements, inlineEditingElementId]);
   const selectedMotionPath = selectedElement ? motionPathFor(activeSlide?.animations ?? [], selectedElement.id) : void 0;
   const handleMotionPathChange = useCallback(
     (path) => {
@@ -9921,6 +8365,59 @@ function SlideCanvasContent({
                     },
                     element.id
                   )),
+                  enteredGroup && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-pptx-entered-group": true,
+                      "aria-hidden": true,
+                      className: "absolute pointer-events-none outline outline-1 outline-dashed outline-blue-500/70",
+                      style: {
+                        left: enteredGroup.x,
+                        top: enteredGroup.y,
+                        width: enteredGroup.width,
+                        height: enteredGroup.height,
+                        zIndex: templateElements.length + (activeSlide?.elements.length ?? 0) + 1
+                      }
+                    }
+                  ),
+                  editingMember && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("style", { children: `[data-element-id="${cssAttr(editingMember.parentId)}"] [data-element-id="${cssAttr(editingMember.member.id)}"]{visibility:hidden}` }),
+                    /* @__PURE__ */ jsx(
+                      ElementRenderer,
+                      {
+                        element: editingMember.member,
+                        activeSlide,
+                        isSelected: true,
+                        isInlineEditing: true,
+                        inlineEditingText,
+                        canInteract: isEditableCanvas,
+                        spellCheckEnabled,
+                        mediaDataUrls,
+                        selectionColorClass: "blue-500",
+                        showHoverBorder: false,
+                        zIndex: templateElements.length + (activeSlide?.elements.length ?? 0) + 2,
+                        imageAltText: "Slide element",
+                        showResizeHandles: false,
+                        renderInk: true,
+                        renderGroups: true,
+                        adjustmentHandles: EMPTY_ADJUSTMENT_HANDLES,
+                        onResizePointerDown: stableResizePointerDown,
+                        onAdjustmentPointerDown: stableAdjustmentPointerDown,
+                        onRotate: stableRotate,
+                        onInlineEditChange: stableInlineEditChange,
+                        onInlineEditCommit: stableInlineEditCommit,
+                        onInlineEditCancel: stableInlineEditCancel,
+                        onUpdateSmartArtElement: stableUpdateSmartArtElement,
+                        onFormatText: stableFormatText,
+                        onHyperlinkClick,
+                        allSlides,
+                        sourceSlideIndex,
+                        fieldContext,
+                        tableStyleContext
+                      },
+                      `group-member-edit-${editingMember.member.id}`
+                    )
+                  ] }),
                   selectedElement && selectedElement.id !== cropElement?.id && shouldShowElementHandles(isEditableCanvas, true, selectedElementIdSet.size) && !isConnectorOrLineElement(selectedElement) && outlineAuthoring?.editPointsElementId !== selectedElement.id && /* @__PURE__ */ jsx(
                     SelectionHandleOverlay,
                     {
@@ -10593,7 +9090,7 @@ function slideThumbnailPropsEqual(prev, next) {
   }
   return true;
 }
-var SlideThumbnail = React6.memo(SlideThumbnailImpl, slideThumbnailPropsEqual);
+var SlideThumbnail = React95.memo(SlideThumbnailImpl, slideThumbnailPropsEqual);
 
 // src/viewer/components/context-menu-dispatch.ts
 function tableCell(props) {
@@ -11354,7 +9851,7 @@ function LazyThumbnailInner({
     }
   ) });
 }
-var LazyThumbnail = React6.memo(LazyThumbnailInner);
+var LazyThumbnail = React95.memo(LazyThumbnailInner);
 
 // src/viewer/components/slides-pane/utils.ts
 function formatTimingMs(ms) {
@@ -11516,7 +10013,7 @@ function SlideItemInner({
     }
   );
 }
-var SlideItem = React6.memo(SlideItemInner);
+var SlideItem = React95.memo(SlideItemInner);
 function useSlidePaneCallbacks(onMoveSlide, onRenameSection, onToggleSectionCollapse) {
   const [collapsedSections, setCollapsedSections] = useState({});
   const [renamingSectionId, setRenamingSectionId] = useState(null);
@@ -12925,7 +11422,7 @@ function arePropsEqual(prev, next) {
   }
   return true;
 }
-var SlideCard = React6.memo(SlideCardImpl, arePropsEqual);
+var SlideCard = React95.memo(SlideCardImpl, arePropsEqual);
 function SorterContextMenu({
   x,
   y,
@@ -14484,8 +12981,8 @@ function SlideNotesPanel({
   onHeightChange
 }) {
   const { t } = useTranslation();
-  const rootRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const rootRef = React95.useRef(null);
+  React95.useEffect(() => {
     const el = rootRef.current;
     if (!el || !onHeightChange) {
       return void 0;
@@ -16377,9 +14874,9 @@ function PresentationSubtitleBar({
 function renderNotesSegments(segments) {
   return notesSegmentsToSpans(segments).map((span) => {
     if (span.kind === "break") {
-      return React6.createElement("br", { key: span.key });
+      return React95.createElement("br", { key: span.key });
     }
-    return React6.createElement(
+    return React95.createElement(
       "span",
       { key: span.key, style: span.style },
       span.text
@@ -16611,7 +15108,7 @@ function scaledSlidePreviewPropsEqual(prev, next) {
   }
   return true;
 }
-var ScaledSlidePreview = React6.memo(ScaledSlidePreviewImpl, scaledSlidePreviewPropsEqual);
+var ScaledSlidePreview = React95.memo(ScaledSlidePreviewImpl, scaledSlidePreviewPropsEqual);
 function PresenterNotesRail({
   slides,
   current,
@@ -17849,7 +16346,7 @@ function EffectSoundRow({
   onPickStock
 }) {
   const { t } = useTranslation();
-  const fileInputRef = React6.useRef(null);
+  const fileInputRef = React95.useRef(null);
   const selectedValue = soundState.catalogueId ?? (soundState.hasSound ? CURRENT_VALUE : NONE_VALUE);
   const handleSelectChange = (event) => {
     const value = event.target.value;
@@ -21435,7 +19932,7 @@ function ConnectorArrowsSection({
     ["Start", "End"].map((end) => {
       const widthKey = end === "Start" ? "connectorStartArrowWidth" : "connectorEndArrowWidth";
       const lengthKey = end === "Start" ? "connectorStartArrowLength" : "connectorEndArrowLength";
-      return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React95.Fragment, { children: [
         /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t(END_LABEL_KEYS[end].width) }),
           /* @__PURE__ */ jsx(
@@ -24312,7 +22809,7 @@ function StrokeEffectsSection({
     ] }),
     EFFECT_CONFIGS.map((cfg) => {
       const on = cfg.isOn(style);
-      return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React95.Fragment, { children: [
         /* @__PURE__ */ jsxs("label", { className: `inline-flex items-center gap-2 text-foreground ${COL2}`, children: [
           /* @__PURE__ */ jsx(
             WebCheckbox,
@@ -25180,7 +23677,7 @@ function TextWarpGallery({
   onUpdateTextStyle
 }) {
   const { t } = useTranslation();
-  const [expanded, setExpanded] = React6.useState(false);
+  const [expanded, setExpanded] = React95.useState(false);
   const currentPreset = ts?.textWarpPreset || "textNoShape";
   return /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded border border-border bg-card p-2 space-y-2", children: [
     /* @__PURE__ */ jsxs(
@@ -25831,7 +24328,7 @@ function SmartArtStyleControls({
   onChangeStyle
 }) {
   const { t } = useTranslation();
-  const translate = React6.useCallback((key) => t(key), [t]);
+  const translate = React95.useCallback((key) => t(key), [t]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-[11px]", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("pptx.smartart.colorScheme") }),
@@ -25886,9 +24383,9 @@ function SmartArtPropertiesPanel({
   const nodes = smartArtData.nodes ?? [];
   const layout = smartArtData.resolvedLayoutType;
   const topLevelCount = nodes.filter((n) => !n.parentId).length;
-  const inputRefs = React6.useRef(/* @__PURE__ */ new Map());
-  const pendingFocusId = React6.useRef(null);
-  React6.useEffect(() => {
+  const inputRefs = React95.useRef(/* @__PURE__ */ new Map());
+  const pendingFocusId = React95.useRef(null);
+  React95.useEffect(() => {
     const id = pendingFocusId.current;
     if (id) {
       inputRefs.current.get(id)?.focus();
@@ -27502,7 +25999,7 @@ function CommentBody({ text, mentions, className }) {
       index
     ) : (
       // eslint-disable-next-line react/no-array-index-key -- segments are positional
-      /* @__PURE__ */ jsx(React6.Fragment, { children: segment.text }, index)
+      /* @__PURE__ */ jsx(React95.Fragment, { children: segment.text }, index)
     )
   ) });
 }
@@ -29021,7 +27518,7 @@ function PresentationPropertiesPanel({
   onUpdateTagCollections
 }) {
   const { t } = useTranslation();
-  const handleTransitionChange = React6.useCallback(
+  const handleTransitionChange = React95.useCallback(
     (updates) => {
       onUpdateSlide({
         transition: mergeSlideTransition(activeSlide?.transition, updates)
@@ -32940,7 +31437,7 @@ function ViewerToolbarSection(props) {
     },
     [activeSlide, propertyHandlers]
   );
-  const scopedLayoutOptions = React6.useMemo(
+  const scopedLayoutOptions = React95.useMemo(
     () => scopeLayoutOptionsToActiveSlide(s.layoutOptions, activeSlide),
     [s.layoutOptions, activeSlide]
   );
@@ -34912,7 +33409,7 @@ function useTableStyleMapHandlers(input) {
 var AiChatPanel = lazy(async () => {
   const [{ useChat }, { default: Panel }] = await Promise.all([
     import('@ai-sdk/react'),
-    import('./AiChatPanel-5Z4BYP7S.mjs')
+    import('./AiChatPanel-2VX4EF2E.mjs')
   ]);
   function BoundAiChatPanel(props) {
     return /* @__PURE__ */ jsx(Panel, { ...props, useChat });