payload-better-editor 1.0.4 → 1.1.0

package/dist/admin/ErrorBoundary.d.ts

@@ -12,6 +12,6 @@ export declare class OverlayErrorBoundary extends React.Component<Props, State>
     static getDerivedStateFromError(error: Error): State;
     componentDidCatch(error: Error, info: React.ErrorInfo): void;
     private reset;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }
 export {};

package/dist/admin/LiveEditorOverlay.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useLivePreviewContext } from '@payloadcms/ui';
 import { PreviewFrame } from './PreviewFrame';
 import { PreviewToolbar } from './PreviewToolbar';
@@ -44,9 +44,8 @@ const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSe
     const { previewURL } = useLivePreviewContext();
     const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(settings.sidebarPosition);
     const { viewport, setViewport, setResponsiveWidth, viewportWidth } = useViewportState(settings);
-    // Live-observed iframe width; PreviewFrame reports it via the
-    // ResizeObserver, the toolbar's width-chip reads it.
-    const [iframeWidth, setIframeWidth] = useState(null);
+    // Shared with the toolbar's width chip, which measures the iframe directly.
+    const iframeRef = useRef(null);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const toggleFullscreen = useCallback(()=>setIsFullscreen((v)=>!v), []);
     const exitFullscreen = useCallback(()=>setIsFullscreen(false), []);
@@ -93,7 +92,7 @@ const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSe
                             history: history,
                             viewport: viewport,
                             onViewportChange: setViewport,
-                            iframeWidth: iframeWidth,
+                            iframeRef: iframeRef,
                             isFullscreen: isFullscreen,
                             onFullscreenToggle: toggleFullscreen,
                             interactMode: interactMode,
@@ -104,6 +103,7 @@ const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSe
                         /*#__PURE__*/ _jsx("div", {
                             className: "better-editor__preview-stage",
                             children: /*#__PURE__*/ _jsx(PreviewFrame, {
+                                iframeRef: iframeRef,
                                 previewURL: previewURL,
                                 hoverColorTopLevel: settings.hoverColorTopLevel,
                                 hoverColorNested: settings.hoverColorNested,
@@ -115,8 +115,7 @@ const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSe
                                 viewport: viewport,
                                 viewportWidth: viewportWidth,
                                 resizable: viewport === 'responsive',
-                                onResize: setResponsiveWidth,
-                                onIframeWidthChange: setIframeWidth
+                                onResize: setResponsiveWidth
                             })
                         })
                     ]

package/dist/admin/LiveEditorOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useState } from 'react'\nimport { useLivePreviewContext } from '@payloadcms/ui'\nimport { PreviewFrame } from './PreviewFrame'\nimport { PreviewToolbar } from './PreviewToolbar'\nimport { Sidebar } from './sidebar/Sidebar'\nimport { useBetterEditorSettings } from '../state/useBetterEditorSettings'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useSidebarResize } from '../hooks/useSidebarResize'\nimport { useViewportState } from '../hooks/useViewportState'\nimport { useFullscreenOverlay } from '../hooks/useFullscreenOverlay'\nimport { useBlockActionMessages } from '../hooks/useBlockActionMessages'\nimport { useOverlayKeyboard } from '../hooks/useOverlayKeyboard'\nimport { useFocusTrap } from '../hooks/useFocusTrap'\nimport { OverlayProviders } from '../providers/OverlayProviders'\nimport '../styles/overlay.css'\nimport '../styles/preview.css'\nimport '../styles/sidebar.css'\nimport '../styles/blocks-tab.css'\n\nexport type LiveEditorOverlayProps = {\n  onClose: () => void\n  blocksField: string\n  storageNamespace?: string\n  adminPortalSelector?: string\n}\n\nconst RESIZE_HANDLE_PX = 6\n\nconst classes = (...parts: Array<string | false | null | undefined>): string =>\n  parts.filter(Boolean).join(' ')\n\nexport const LiveEditorOverlay: React.FC<LiveEditorOverlayProps> = ({\n  onClose,\n  blocksField,\n  storageNamespace,\n  adminPortalSelector,\n}) => {\n  // Selection state lives outside OverlayProviders so the error boundary's\n  // onReset can clear it without remounting providers.\n  const [selectedBlockPath, setSelectedBlockPath] = useState<string | null>(null)\n  const clearSelection = useCallback(() => setSelectedBlockPath(null), [])\n\n  return (\n    <OverlayProviders\n      onClose={onClose}\n      onReset={clearSelection}\n      storageNamespace={storageNamespace}\n      adminPortalSelector={adminPortalSelector}\n    >\n      <LiveEditorOverlayInner\n        onClose={onClose}\n        blocksField={blocksField}\n        selectedBlockPath={selectedBlockPath}\n        setSelectedBlockPath={setSelectedBlockPath}\n      />\n    </OverlayProviders>\n  )\n}\n\ntype InnerProps = LiveEditorOverlayProps & {\n  selectedBlockPath: string | null\n  setSelectedBlockPath: React.Dispatch<React.SetStateAction<string | null>>\n}\n\nconst LiveEditorOverlayInner: React.FC<InnerProps> = ({\n  onClose,\n  blocksField,\n  selectedBlockPath,\n  setSelectedBlockPath,\n}) => {\n  const settings = useBetterEditorSettings()\n  const history = useEditorHistory()\n  const { previewURL } = useLivePreviewContext()\n\n  const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(\n    settings.sidebarPosition,\n  )\n  const {\n    viewport,\n    setViewport,\n    setResponsiveWidth,\n    viewportWidth,\n  } = useViewportState(settings)\n  // Live-observed iframe width; PreviewFrame reports it via the\n  // ResizeObserver, the toolbar's width-chip reads it.\n  const [iframeWidth, setIframeWidth] = useState<number | null>(null)\n\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), [])\n  const exitFullscreen = useCallback(() => setIsFullscreen(false), [])\n  const overlayRef = useFullscreenOverlay(isFullscreen, exitFullscreen)\n  useFocusTrap(overlayRef)\n\n  const clearSelection = useCallback(\n    () => setSelectedBlockPath(null),\n    [setSelectedBlockPath],\n  )\n\n  const { addBelowRequestId } = useBlockActionMessages({\n    selectedBlockPath,\n    setSelectedBlockPath,\n  })\n\n  useOverlayKeyboard({ onClose, history })\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)\n  const toggleSidebar = useCallback(() => setSidebarCollapsed((v) => !v), [])\n\n  const [interactMode, setInteractMode] = useState(false)\n  const toggleInteractMode = useCallback(() => setInteractMode((v) => !v), [])\n\n  const isLeft = settings.sidebarPosition === 'left'\n  const showSidebar = !sidebarCollapsed\n  const gridTemplateColumns = !showSidebar\n    ? '1fr'\n    : isLeft\n      ? `${sidebarWidth}px ${RESIZE_HANDLE_PX}px 1fr`\n      : `1fr ${RESIZE_HANDLE_PX}px ${sidebarWidth}px`\n\n  return (\n    <div\n      ref={overlayRef}\n      className={classes(\n        'better-editor',\n        isResizing && 'better-editor--resizing',\n        isFullscreen && 'better-editor--fullscreen',\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Better Editor\"\n      tabIndex={-1}\n    >\n      <div className=\"better-editor__body\" style={{ gridTemplateColumns }}>\n        <div className=\"better-editor__preview\" style={{ order: isLeft ? 2 : 0 }}>\n          <PreviewToolbar\n            history={history}\n            viewport={viewport}\n            onViewportChange={setViewport}\n            iframeWidth={iframeWidth}\n            isFullscreen={isFullscreen}\n            onFullscreenToggle={toggleFullscreen}\n            interactMode={interactMode}\n            onInteractToggle={toggleInteractMode}\n            sidebarCollapsed={sidebarCollapsed}\n            onSidebarToggle={toggleSidebar}\n          />\n          <div className=\"better-editor__preview-stage\">\n            <PreviewFrame\n              previewURL={previewURL}\n              hoverColorTopLevel={settings.hoverColorTopLevel}\n              hoverColorNested={settings.hoverColorNested}\n              hoverOutlineWidth={settings.hoverOutlineWidth}\n              showHoverToolbar={settings.showHoverToolbar}\n              hoverToolbarPosition={settings.hoverToolbarPosition}\n              selectedBlockPath={selectedBlockPath}\n              interactMode={interactMode}\n              viewport={viewport}\n              viewportWidth={viewportWidth}\n              resizable={viewport === 'responsive'}\n              onResize={setResponsiveWidth}\n              onIframeWidthChange={setIframeWidth}\n            />\n          </div>\n        </div>\n        {showSidebar ? (\n          <>\n            <div\n              className=\"better-editor__resize-handle\"\n              style={{ order: 1 }}\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label=\"Resize sidebar (use ← / → arrow keys)\"\n              aria-valuenow={sidebarWidth}\n              tabIndex={0}\n              onMouseDown={onResizeStart}\n              onKeyDown={onResizeKeyDown}\n            />\n            <aside\n              className=\"better-editor__sidebar\"\n              style={{ order: isLeft ? 0 : 2 }}\n            >\n              <Sidebar\n                selectedBlockPath={selectedBlockPath}\n                onClearSelection={clearSelection}\n                onSelectPath={setSelectedBlockPath}\n                forceFullWidthFields={settings.forceFullWidthFields}\n                blocksField={blocksField}\n                addBelowRequestId={addBelowRequestId}\n              />\n            </aside>\n          </>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\n"],"names":["React","useCallback","useState","useLivePreviewContext","PreviewFrame","PreviewToolbar","Sidebar","useBetterEditorSettings","useEditorHistory","useSidebarResize","useViewportState","useFullscreenOverlay","useBlockActionMessages","useOverlayKeyboard","useFocusTrap","OverlayProviders","RESIZE_HANDLE_PX","classes","parts","filter","Boolean","join","LiveEditorOverlay","onClose","blocksField","storageNamespace","adminPortalSelector","selectedBlockPath","setSelectedBlockPath","clearSelection","onReset","LiveEditorOverlayInner","settings","history","previewURL","sidebarWidth","isResizing","onResizeStart","onResizeKeyDown","sidebarPosition","viewport","setViewport","setResponsiveWidth","viewportWidth","iframeWidth","setIframeWidth","isFullscreen","setIsFullscreen","toggleFullscreen","v","exitFullscreen","overlayRef","addBelowRequestId","sidebarCollapsed","setSidebarCollapsed","toggleSidebar","interactMode","setInteractMode","toggleInteractMode","isLeft","showSidebar","gridTemplateColumns","div","ref","className","role","aria-modal","aria-label","tabIndex","style","order","onViewportChange","onFullscreenToggle","onInteractToggle","onSidebarToggle","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","resizable","onResize","onIframeWidthChange","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"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"}
+{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport { useLivePreviewContext } from '@payloadcms/ui'\nimport { PreviewFrame } from './PreviewFrame'\nimport { PreviewToolbar } from './PreviewToolbar'\nimport { Sidebar } from './sidebar/Sidebar'\nimport { useBetterEditorSettings } from '../state/useBetterEditorSettings'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useSidebarResize } from '../hooks/useSidebarResize'\nimport { useViewportState } from '../hooks/useViewportState'\nimport { useFullscreenOverlay } from '../hooks/useFullscreenOverlay'\nimport { useBlockActionMessages } from '../hooks/useBlockActionMessages'\nimport { useOverlayKeyboard } from '../hooks/useOverlayKeyboard'\nimport { useFocusTrap } from '../hooks/useFocusTrap'\nimport { OverlayProviders } from '../providers/OverlayProviders'\nimport '../styles/overlay.css'\nimport '../styles/preview.css'\nimport '../styles/sidebar.css'\nimport '../styles/blocks-tab.css'\n\nexport type LiveEditorOverlayProps = {\n  onClose: () => void\n  blocksField: string\n  storageNamespace?: string\n  adminPortalSelector?: string\n}\n\nconst RESIZE_HANDLE_PX = 6\n\nconst classes = (...parts: Array<string | false | null | undefined>): string =>\n  parts.filter(Boolean).join(' ')\n\nexport const LiveEditorOverlay: React.FC<LiveEditorOverlayProps> = ({\n  onClose,\n  blocksField,\n  storageNamespace,\n  adminPortalSelector,\n}) => {\n  // Selection state lives outside OverlayProviders so the error boundary's\n  // onReset can clear it without remounting providers.\n  const [selectedBlockPath, setSelectedBlockPath] = useState<string | null>(null)\n  const clearSelection = useCallback(() => setSelectedBlockPath(null), [])\n\n  return (\n    <OverlayProviders\n      onClose={onClose}\n      onReset={clearSelection}\n      storageNamespace={storageNamespace}\n      adminPortalSelector={adminPortalSelector}\n    >\n      <LiveEditorOverlayInner\n        onClose={onClose}\n        blocksField={blocksField}\n        selectedBlockPath={selectedBlockPath}\n        setSelectedBlockPath={setSelectedBlockPath}\n      />\n    </OverlayProviders>\n  )\n}\n\ntype InnerProps = LiveEditorOverlayProps & {\n  selectedBlockPath: string | null\n  setSelectedBlockPath: React.Dispatch<React.SetStateAction<string | null>>\n}\n\nconst LiveEditorOverlayInner: React.FC<InnerProps> = ({\n  onClose,\n  blocksField,\n  selectedBlockPath,\n  setSelectedBlockPath,\n}) => {\n  const settings = useBetterEditorSettings()\n  const history = useEditorHistory()\n  const { previewURL } = useLivePreviewContext()\n\n  const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(\n    settings.sidebarPosition,\n  )\n  const {\n    viewport,\n    setViewport,\n    setResponsiveWidth,\n    viewportWidth,\n  } = useViewportState(settings)\n  // Shared with the toolbar's width chip, which measures the iframe directly.\n  const iframeRef = useRef<HTMLIFrameElement | null>(null)\n\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), [])\n  const exitFullscreen = useCallback(() => setIsFullscreen(false), [])\n  const overlayRef = useFullscreenOverlay(isFullscreen, exitFullscreen)\n  useFocusTrap(overlayRef)\n\n  const clearSelection = useCallback(\n    () => setSelectedBlockPath(null),\n    [setSelectedBlockPath],\n  )\n\n  const { addBelowRequestId } = useBlockActionMessages({\n    selectedBlockPath,\n    setSelectedBlockPath,\n  })\n\n  useOverlayKeyboard({ onClose, history })\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)\n  const toggleSidebar = useCallback(() => setSidebarCollapsed((v) => !v), [])\n\n  const [interactMode, setInteractMode] = useState(false)\n  const toggleInteractMode = useCallback(() => setInteractMode((v) => !v), [])\n\n  const isLeft = settings.sidebarPosition === 'left'\n  const showSidebar = !sidebarCollapsed\n  const gridTemplateColumns = !showSidebar\n    ? '1fr'\n    : isLeft\n      ? `${sidebarWidth}px ${RESIZE_HANDLE_PX}px 1fr`\n      : `1fr ${RESIZE_HANDLE_PX}px ${sidebarWidth}px`\n\n  return (\n    <div\n      ref={overlayRef}\n      className={classes(\n        'better-editor',\n        isResizing && 'better-editor--resizing',\n        isFullscreen && 'better-editor--fullscreen',\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Better Editor\"\n      tabIndex={-1}\n    >\n      <div className=\"better-editor__body\" style={{ gridTemplateColumns }}>\n        <div className=\"better-editor__preview\" style={{ order: isLeft ? 2 : 0 }}>\n          <PreviewToolbar\n            history={history}\n            viewport={viewport}\n            onViewportChange={setViewport}\n            iframeRef={iframeRef}\n            isFullscreen={isFullscreen}\n            onFullscreenToggle={toggleFullscreen}\n            interactMode={interactMode}\n            onInteractToggle={toggleInteractMode}\n            sidebarCollapsed={sidebarCollapsed}\n            onSidebarToggle={toggleSidebar}\n          />\n          <div className=\"better-editor__preview-stage\">\n            <PreviewFrame\n              iframeRef={iframeRef}\n              previewURL={previewURL}\n              hoverColorTopLevel={settings.hoverColorTopLevel}\n              hoverColorNested={settings.hoverColorNested}\n              hoverOutlineWidth={settings.hoverOutlineWidth}\n              showHoverToolbar={settings.showHoverToolbar}\n              hoverToolbarPosition={settings.hoverToolbarPosition}\n              selectedBlockPath={selectedBlockPath}\n              interactMode={interactMode}\n              viewport={viewport}\n              viewportWidth={viewportWidth}\n              resizable={viewport === 'responsive'}\n              onResize={setResponsiveWidth}\n            />\n          </div>\n        </div>\n        {showSidebar ? (\n          <>\n            <div\n              className=\"better-editor__resize-handle\"\n              style={{ order: 1 }}\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label=\"Resize sidebar (use ← / → arrow keys)\"\n              aria-valuenow={sidebarWidth}\n              tabIndex={0}\n              onMouseDown={onResizeStart}\n              onKeyDown={onResizeKeyDown}\n            />\n            <aside\n              className=\"better-editor__sidebar\"\n              style={{ order: isLeft ? 0 : 2 }}\n            >\n              <Sidebar\n                selectedBlockPath={selectedBlockPath}\n                onClearSelection={clearSelection}\n                onSelectPath={setSelectedBlockPath}\n                forceFullWidthFields={settings.forceFullWidthFields}\n                blocksField={blocksField}\n                addBelowRequestId={addBelowRequestId}\n              />\n            </aside>\n          </>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\n"],"names":["React","useCallback","useRef","useState","useLivePreviewContext","PreviewFrame","PreviewToolbar","Sidebar","useBetterEditorSettings","useEditorHistory","useSidebarResize","useViewportState","useFullscreenOverlay","useBlockActionMessages","useOverlayKeyboard","useFocusTrap","OverlayProviders","RESIZE_HANDLE_PX","classes","parts","filter","Boolean","join","LiveEditorOverlay","onClose","blocksField","storageNamespace","adminPortalSelector","selectedBlockPath","setSelectedBlockPath","clearSelection","onReset","LiveEditorOverlayInner","settings","history","previewURL","sidebarWidth","isResizing","onResizeStart","onResizeKeyDown","sidebarPosition","viewport","setViewport","setResponsiveWidth","viewportWidth","iframeRef","isFullscreen","setIsFullscreen","toggleFullscreen","v","exitFullscreen","overlayRef","addBelowRequestId","sidebarCollapsed","setSidebarCollapsed","toggleSidebar","interactMode","setInteractMode","toggleInteractMode","isLeft","showSidebar","gridTemplateColumns","div","ref","className","role","aria-modal","aria-label","tabIndex","style","order","onViewportChange","onFullscreenToggle","onInteractToggle","onSidebarToggle","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","resizable","onResize","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"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"}

package/dist/admin/PreviewFrame.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { type RefObject } from 'react';
 import type { HoverToolbarPosition } from '../internal/constants';
 import type { Viewport } from './ViewportToggle';
 export type PreviewFrameProps = {
+    iframeRef: RefObject<HTMLIFrameElement | null>;
     previewURL: string | undefined;
     hoverColorTopLevel: string;
     hoverColorNested: string;
@@ -17,6 +18,5 @@ export type PreviewFrameProps = {
     viewportWidth?: number | null;
     resizable?: boolean;
     onResize?: (next: number) => void;
-    onIframeWidthChange?: (width: number) => void;
 };
-export declare const PreviewFrame: React.FC<PreviewFrameProps>;
+export declare const PreviewFrame: React.NamedExoticComponent<PreviewFrameProps>;

package/dist/admin/PreviewFrame.js

@@ -1,15 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { postToParent } from '../internal/postmessage';
-import { useIframeResizeObserver } from '../hooks/useIframeResizeObserver';
 import { usePreviewHandleDrag } from '../hooks/usePreviewHandleDrag';
 import { useLatestRef } from '../hooks/useLatestRef';
 import { usePreviewBinding } from '../hooks/usePreviewBinding';
 import { usePreviewSettingsSync } from '../hooks/usePreviewSettingsSync';
 import { usePreviewSelectionSync } from '../hooks/usePreviewSelectionSync';
-export const PreviewFrame = ({ previewURL, hoverColorTopLevel, hoverColorNested, hoverOutlineWidth, showHoverToolbar, hoverToolbarPosition, selectedBlockPath, interactMode, viewport, viewportWidth, resizable = false, onResize, onIframeWidthChange })=>{
-    const iframeRef = useRef(null);
+// Memoized so resize-drag re-renders of the overlay skip the frame.
+export const PreviewFrame = /*#__PURE__*/ React.memo(function PreviewFrame({ iframeRef, previewURL, hoverColorTopLevel, hoverColorNested, hoverOutlineWidth, showHoverToolbar, hoverToolbarPosition, selectedBlockPath, interactMode, viewport, viewportWidth, resizable = false, onResize }) {
     const [isLoading, setIsLoading] = useState(true);
     const interactModeRef = useLatestRef(interactMode);
     const { isResizing, onHandleMouseDown } = usePreviewHandleDrag({
@@ -17,7 +16,6 @@ export const PreviewFrame = ({ previewURL, hoverColorTopLevel, hoverColorNested,
         viewportWidth,
         onResize
     });
-    useIframeResizeObserver(iframeRef, onIframeWidthChange);
     useEffect(()=>{
         setIsLoading(true);
     }, [
@@ -132,6 +130,6 @@ export const PreviewFrame = ({ previewURL, hoverColorTopLevel, hoverColorNested,
             }) : null
         ]
     });
-};
+});
 
 //# sourceMappingURL=PreviewFrame.js.map

package/dist/admin/PreviewFrame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/PreviewFrame.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport type { HoverToolbarPosition } from '../internal/constants'\nimport { postToParent } from '../internal/postmessage'\nimport type { BlockActionMessage } from '../preview/protocol'\nimport type { Viewport } from './ViewportToggle'\nimport { useIframeResizeObserver } from '../hooks/useIframeResizeObserver'\nimport { usePreviewHandleDrag } from '../hooks/usePreviewHandleDrag'\nimport { useLatestRef } from '../hooks/useLatestRef'\nimport { usePreviewBinding } from '../hooks/usePreviewBinding'\nimport { usePreviewSettingsSync } from '../hooks/usePreviewSettingsSync'\nimport { usePreviewSelectionSync } from '../hooks/usePreviewSelectionSync'\n\nexport type PreviewFrameProps = {\n  previewURL: string | undefined\n  hoverColorTopLevel: string\n  hoverColorNested: string\n  hoverOutlineWidth: number\n  showHoverToolbar: boolean\n  hoverToolbarPosition: HoverToolbarPosition\n  selectedBlockPath: string | null\n  /** When true, clicks pass through to the consumer page and the\n   * hover/selection affordances are suppressed so users can interact\n   * with forms, accordions, links inside the preview. */\n  interactMode: boolean\n  viewport?: Viewport\n  viewportWidth?: number | null\n  resizable?: boolean\n  onResize?: (next: number) => void\n  onIframeWidthChange?: (width: number) => void\n}\n\ntype BlockAction = BlockActionMessage['action']\n\nexport const PreviewFrame: React.FC<PreviewFrameProps> = ({\n  previewURL,\n  hoverColorTopLevel,\n  hoverColorNested,\n  hoverOutlineWidth,\n  showHoverToolbar,\n  hoverToolbarPosition,\n  selectedBlockPath,\n  interactMode,\n  viewport,\n  viewportWidth,\n  resizable = false,\n  onResize,\n  onIframeWidthChange,\n}) => {\n  const iframeRef = useRef<HTMLIFrameElement | null>(null)\n  const [isLoading, setIsLoading] = useState(true)\n  const interactModeRef = useLatestRef(interactMode)\n\n  const { isResizing, onHandleMouseDown } = usePreviewHandleDrag({\n    resizable,\n    viewportWidth,\n    onResize,\n  })\n  useIframeResizeObserver(iframeRef, onIframeWidthChange)\n\n  useEffect(() => {\n    setIsLoading(true)\n  }, [previewURL])\n\n  const onFocusBlock = useCallback((id: string) => {\n    postToParent({ type: 'focus-block', id })\n  }, [])\n\n  const onBlockAction = useCallback((id: string, action: BlockAction) => {\n    postToParent({ type: 'block-action', id, action })\n  }, [])\n\n  const settings = useMemo(\n    () => ({\n      hoverColorTopLevel,\n      hoverColorNested,\n      hoverOutlineWidth,\n      showHoverToolbar,\n      hoverToolbarPosition,\n    }),\n    [\n      hoverColorTopLevel,\n      hoverColorNested,\n      hoverOutlineWidth,\n      showHoverToolbar,\n      hoverToolbarPosition,\n    ],\n  )\n\n  const { controllerRef, isBoundRef } = usePreviewBinding({\n    iframeRef,\n    settings,\n    interactModeRef,\n    onFocusBlock,\n    onBlockAction,\n    onLoadingChange: setIsLoading,\n  })\n\n  usePreviewSettingsSync({\n    iframeRef,\n    controllerRef,\n    isBoundRef,\n    settings,\n    onBlockAction,\n  })\n\n  usePreviewSelectionSync({\n    iframeRef,\n    controllerRef,\n    selectedBlockPath,\n    interactMode,\n    previewURL,\n  })\n\n  const constrained = typeof viewportWidth === 'number' && viewportWidth > 0\n  const viewportClassName = [\n    'better-editor-frame__viewport',\n    constrained && 'better-editor-frame__viewport--constrained',\n    constrained && viewport === 'tablet' && 'better-editor-frame__viewport--tablet',\n    constrained && viewport === 'mobile' && 'better-editor-frame__viewport--mobile',\n    resizable && 'better-editor-frame__viewport--resizable',\n    isResizing && 'better-editor-frame__viewport--resizing',\n  ]\n    .filter(Boolean)\n    .join(' ')\n  const iframeStyle = constrained\n    ? { width: `${viewportWidth}px`, maxWidth: '100%' as const }\n    : undefined\n\n  // The iframe stays in the same wrapper across viewport modes so React\n  // doesn't remount it — that would reload the page and drop the\n  // ResizeObserver.\n  return (\n    <div className={viewportClassName}>\n      {resizable ? (\n        <div\n          className=\"better-editor-frame__handle better-editor-frame__handle--left\"\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Resize preview from left\"\n          onMouseDown={onHandleMouseDown('left')}\n        />\n      ) : null}\n      <iframe\n        ref={iframeRef}\n        className=\"better-editor-frame\"\n        src={previewURL}\n        title=\"Better Editor preview\"\n        style={iframeStyle}\n      />\n      {isLoading ? (\n        <div\n          className=\"better-editor-frame__skeleton\"\n          role=\"status\"\n          aria-label=\"Loading preview\"\n        >\n          <div className=\"better-editor-frame__skeleton-bar better-editor-frame__skeleton-bar--lg\" />\n          <div className=\"better-editor-frame__skeleton-bar\" />\n          <div className=\"better-editor-frame__skeleton-bar better-editor-frame__skeleton-bar--sm\" />\n          <div className=\"better-editor-frame__skeleton-block\" />\n        </div>\n      ) : null}\n      {resizable ? (\n        <div\n          className=\"better-editor-frame__handle better-editor-frame__handle--right\"\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Resize preview from right\"\n          onMouseDown={onHandleMouseDown('right')}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","postToParent","useIframeResizeObserver","usePreviewHandleDrag","useLatestRef","usePreviewBinding","usePreviewSettingsSync","usePreviewSelectionSync","PreviewFrame","previewURL","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","selectedBlockPath","interactMode","viewport","viewportWidth","resizable","onResize","onIframeWidthChange","iframeRef","isLoading","setIsLoading","interactModeRef","isResizing","onHandleMouseDown","onFocusBlock","id","type","onBlockAction","action","settings","controllerRef","isBoundRef","onLoadingChange","constrained","viewportClassName","filter","Boolean","join","iframeStyle","width","maxWidth","undefined","div","className","role","aria-orientation","aria-label","onMouseDown","iframe","ref","src","title","style"],"mappings":"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"}
+{"version":3,"sources":["../../src/admin/PreviewFrame.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useMemo, useState, type RefObject } from 'react'\nimport type { HoverToolbarPosition } from '../internal/constants'\nimport { postToParent } from '../internal/postmessage'\nimport type { BlockActionMessage } from '../preview/protocol'\nimport type { Viewport } from './ViewportToggle'\nimport { usePreviewHandleDrag } from '../hooks/usePreviewHandleDrag'\nimport { useLatestRef } from '../hooks/useLatestRef'\nimport { usePreviewBinding } from '../hooks/usePreviewBinding'\nimport { usePreviewSettingsSync } from '../hooks/usePreviewSettingsSync'\nimport { usePreviewSelectionSync } from '../hooks/usePreviewSelectionSync'\n\nexport type PreviewFrameProps = {\n  iframeRef: RefObject<HTMLIFrameElement | null>\n  previewURL: string | undefined\n  hoverColorTopLevel: string\n  hoverColorNested: string\n  hoverOutlineWidth: number\n  showHoverToolbar: boolean\n  hoverToolbarPosition: HoverToolbarPosition\n  selectedBlockPath: string | null\n  /** When true, clicks pass through to the consumer page and the\n   * hover/selection affordances are suppressed so users can interact\n   * with forms, accordions, links inside the preview. */\n  interactMode: boolean\n  viewport?: Viewport\n  viewportWidth?: number | null\n  resizable?: boolean\n  onResize?: (next: number) => void\n}\n\ntype BlockAction = BlockActionMessage['action']\n\n// Memoized so resize-drag re-renders of the overlay skip the frame.\nexport const PreviewFrame = React.memo(function PreviewFrame({\n  iframeRef,\n  previewURL,\n  hoverColorTopLevel,\n  hoverColorNested,\n  hoverOutlineWidth,\n  showHoverToolbar,\n  hoverToolbarPosition,\n  selectedBlockPath,\n  interactMode,\n  viewport,\n  viewportWidth,\n  resizable = false,\n  onResize,\n}: PreviewFrameProps) {\n  const [isLoading, setIsLoading] = useState(true)\n  const interactModeRef = useLatestRef(interactMode)\n\n  const { isResizing, onHandleMouseDown } = usePreviewHandleDrag({\n    resizable,\n    viewportWidth,\n    onResize,\n  })\n\n  useEffect(() => {\n    setIsLoading(true)\n  }, [previewURL])\n\n  const onFocusBlock = useCallback((id: string) => {\n    postToParent({ type: 'focus-block', id })\n  }, [])\n\n  const onBlockAction = useCallback((id: string, action: BlockAction) => {\n    postToParent({ type: 'block-action', id, action })\n  }, [])\n\n  const settings = useMemo(\n    () => ({\n      hoverColorTopLevel,\n      hoverColorNested,\n      hoverOutlineWidth,\n      showHoverToolbar,\n      hoverToolbarPosition,\n    }),\n    [\n      hoverColorTopLevel,\n      hoverColorNested,\n      hoverOutlineWidth,\n      showHoverToolbar,\n      hoverToolbarPosition,\n    ],\n  )\n\n  const { controllerRef, isBoundRef } = usePreviewBinding({\n    iframeRef,\n    settings,\n    interactModeRef,\n    onFocusBlock,\n    onBlockAction,\n    onLoadingChange: setIsLoading,\n  })\n\n  usePreviewSettingsSync({\n    iframeRef,\n    controllerRef,\n    isBoundRef,\n    settings,\n    onBlockAction,\n  })\n\n  usePreviewSelectionSync({\n    iframeRef,\n    controllerRef,\n    selectedBlockPath,\n    interactMode,\n    previewURL,\n  })\n\n  const constrained = typeof viewportWidth === 'number' && viewportWidth > 0\n  const viewportClassName = [\n    'better-editor-frame__viewport',\n    constrained && 'better-editor-frame__viewport--constrained',\n    constrained && viewport === 'tablet' && 'better-editor-frame__viewport--tablet',\n    constrained && viewport === 'mobile' && 'better-editor-frame__viewport--mobile',\n    resizable && 'better-editor-frame__viewport--resizable',\n    isResizing && 'better-editor-frame__viewport--resizing',\n  ]\n    .filter(Boolean)\n    .join(' ')\n  const iframeStyle = constrained\n    ? { width: `${viewportWidth}px`, maxWidth: '100%' as const }\n    : undefined\n\n  // The iframe stays in the same wrapper across viewport modes so React\n  // doesn't remount it — that would reload the page and drop the\n  // ResizeObserver.\n  return (\n    <div className={viewportClassName}>\n      {resizable ? (\n        <div\n          className=\"better-editor-frame__handle better-editor-frame__handle--left\"\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Resize preview from left\"\n          onMouseDown={onHandleMouseDown('left')}\n        />\n      ) : null}\n      <iframe\n        ref={iframeRef}\n        className=\"better-editor-frame\"\n        src={previewURL}\n        title=\"Better Editor preview\"\n        style={iframeStyle}\n      />\n      {isLoading ? (\n        <div\n          className=\"better-editor-frame__skeleton\"\n          role=\"status\"\n          aria-label=\"Loading preview\"\n        >\n          <div className=\"better-editor-frame__skeleton-bar better-editor-frame__skeleton-bar--lg\" />\n          <div className=\"better-editor-frame__skeleton-bar\" />\n          <div className=\"better-editor-frame__skeleton-bar better-editor-frame__skeleton-bar--sm\" />\n          <div className=\"better-editor-frame__skeleton-block\" />\n        </div>\n      ) : null}\n      {resizable ? (\n        <div\n          className=\"better-editor-frame__handle better-editor-frame__handle--right\"\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Resize preview from right\"\n          onMouseDown={onHandleMouseDown('right')}\n        />\n      ) : null}\n    </div>\n  )\n})\n"],"names":["React","useCallback","useEffect","useMemo","useState","postToParent","usePreviewHandleDrag","useLatestRef","usePreviewBinding","usePreviewSettingsSync","usePreviewSelectionSync","PreviewFrame","memo","iframeRef","previewURL","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","selectedBlockPath","interactMode","viewport","viewportWidth","resizable","onResize","isLoading","setIsLoading","interactModeRef","isResizing","onHandleMouseDown","onFocusBlock","id","type","onBlockAction","action","settings","controllerRef","isBoundRef","onLoadingChange","constrained","viewportClassName","filter","Boolean","join","iframeStyle","width","maxWidth","undefined","div","className","role","aria-orientation","aria-label","onMouseDown","iframe","ref","src","title","style"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAwB,QAAO;AAExF,SAASC,YAAY,QAAQ,0BAAyB;AAGtD,SAASC,oBAAoB,QAAQ,gCAA+B;AACpE,SAASC,YAAY,QAAQ,wBAAuB;AACpD,SAASC,iBAAiB,QAAQ,6BAA4B;AAC9D,SAASC,sBAAsB,QAAQ,kCAAiC;AACxE,SAASC,uBAAuB,QAAQ,mCAAkC;AAuB1E,oEAAoE;AACpE,OAAO,MAAMC,6BAAeX,MAAMY,IAAI,CAAC,SAASD,aAAa,EAC3DE,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,iBAAiB,EACjBC,YAAY,EACZC,QAAQ,EACRC,aAAa,EACbC,YAAY,KAAK,EACjBC,QAAQ,EACU;IAClB,MAAM,CAACC,WAAWC,aAAa,GAAGvB,SAAS;IAC3C,MAAMwB,kBAAkBrB,aAAac;IAErC,MAAM,EAAEQ,UAAU,EAAEC,iBAAiB,EAAE,GAAGxB,qBAAqB;QAC7DkB;QACAD;QACAE;IACF;IAEAvB,UAAU;QACRyB,aAAa;IACf,GAAG;QAACb;KAAW;IAEf,MAAMiB,eAAe9B,YAAY,CAAC+B;QAChC3B,aAAa;YAAE4B,MAAM;YAAeD;QAAG;IACzC,GAAG,EAAE;IAEL,MAAME,gBAAgBjC,YAAY,CAAC+B,IAAYG;QAC7C9B,aAAa;YAAE4B,MAAM;YAAgBD;YAAIG;QAAO;IAClD,GAAG,EAAE;IAEL,MAAMC,WAAWjC,QACf,IAAO,CAAA;YACLY;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEJ;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,MAAM,EAAEkB,aAAa,EAAEC,UAAU,EAAE,GAAG9B,kBAAkB;QACtDK;QACAuB;QACAR;QACAG;QACAG;QACAK,iBAAiBZ;IACnB;IAEAlB,uBAAuB;QACrBI;QACAwB;QACAC;QACAF;QACAF;IACF;IAEAxB,wBAAwB;QACtBG;QACAwB;QACAjB;QACAC;QACAP;IACF;IAEA,MAAM0B,cAAc,OAAOjB,kBAAkB,YAAYA,gBAAgB;IACzE,MAAMkB,oBAAoB;QACxB;QACAD,eAAe;QACfA,eAAelB,aAAa,YAAY;QACxCkB,eAAelB,aAAa,YAAY;QACxCE,aAAa;QACbK,cAAc;KACf,CACEa,MAAM,CAACC,SACPC,IAAI,CAAC;IACR,MAAMC,cAAcL,cAChB;QAAEM,OAAO,GAAGvB,cAAc,EAAE,CAAC;QAAEwB,UAAU;IAAgB,IACzDC;IAEJ,sEAAsE;IACtE,+DAA+D;IAC/D,kBAAkB;IAClB,qBACE,MAACC;QAAIC,WAAWT;;YACbjB,0BACC,KAACyB;gBACCC,WAAU;gBACVC,MAAK;gBACLC,oBAAiB;gBACjBC,cAAW;gBACXC,aAAaxB,kBAAkB;iBAE/B;0BACJ,KAACyB;gBACCC,KAAK3C;gBACLqC,WAAU;gBACVO,KAAK3C;gBACL4C,OAAM;gBACNC,OAAOd;;YAERnB,0BACC,MAACuB;gBACCC,WAAU;gBACVC,MAAK;gBACLE,cAAW;;kCAEX,KAACJ;wBAAIC,WAAU;;kCACf,KAACD;wBAAIC,WAAU;;kCACf,KAACD;wBAAIC,WAAU;;kCACf,KAACD;wBAAIC,WAAU;;;iBAEf;YACH1B,0BACC,KAACyB;gBACCC,WAAU;gBACVC,MAAK;gBACLC,oBAAiB;gBACjBC,cAAW;gBACXC,aAAaxB,kBAAkB;iBAE/B;;;AAGV,GAAE"}

package/dist/admin/PreviewToolbar.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type RefObject } from 'react';
 import { type Viewport } from './ViewportToggle';
 import type { useEditorHistory } from '../state/useEditorHistory';
 export type PreviewToolbarProps = {
     history: ReturnType<typeof useEditorHistory>;
     viewport: Viewport;
     onViewportChange: (viewport: Viewport) => void;
-    iframeWidth: number | null;
+    iframeRef: RefObject<HTMLIFrameElement | null>;
     isFullscreen: boolean;
     onFullscreenToggle: () => void;
     interactMode: boolean;
@@ -13,4 +13,4 @@ export type PreviewToolbarProps = {
     sidebarCollapsed: boolean;
     onSidebarToggle: () => void;
 };
-export declare const PreviewToolbar: React.FC<PreviewToolbarProps>;
+export declare const PreviewToolbar: React.NamedExoticComponent<PreviewToolbarProps>;

package/dist/admin/PreviewToolbar.js

@@ -2,8 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ViewportToggle } from './ViewportToggle';
+import { WidthChip } from './WidthChip';
 import { FullscreenExitIcon, FullscreenIcon, InteractIcon, InteractOffIcon, RedoIcon, SidebarHideIcon, SidebarShowIcon, UndoIcon } from './icons';
-export const PreviewToolbar = ({ history, viewport, onViewportChange, iframeWidth, isFullscreen, onFullscreenToggle, interactMode, onInteractToggle, sidebarCollapsed, onSidebarToggle })=>/*#__PURE__*/ _jsxs("div", {
+// Memoized so resize-drag re-renders of the overlay skip the toolbar.
+export const PreviewToolbar = /*#__PURE__*/ React.memo(({ history, viewport, onViewportChange, iframeRef, isFullscreen, onFullscreenToggle, interactMode, onInteractToggle, sidebarCollapsed, onSidebarToggle })=>/*#__PURE__*/ _jsxs("div", {
         className: "better-editor__preview-toolbar",
         children: [
             /*#__PURE__*/ _jsx(HistoryButtons, {
@@ -12,17 +14,9 @@ export const PreviewToolbar = ({ history, viewport, onViewportChange, iframeWidt
             /*#__PURE__*/ _jsxs("div", {
                 className: "better-editor__preview-toolbar-right",
                 children: [
-                    iframeWidth ? /*#__PURE__*/ _jsxs("span", {
-                        className: "better-editor__width-chip",
-                        "aria-live": "polite",
-                        children: [
-                            iframeWidth,
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "better-editor__width-chip-unit",
-                                children: "px"
-                            })
-                        ]
-                    }) : null,
+                    /*#__PURE__*/ _jsx(WidthChip, {
+                        iframeRef: iframeRef
+                    }),
                     /*#__PURE__*/ _jsx(ViewportToggle, {
                         value: viewport,
                         onChange: onViewportChange
@@ -62,7 +56,7 @@ export const PreviewToolbar = ({ history, viewport, onViewportChange, iframeWidt
                 ]
             })
         ]
-    });
+    }));
 const HistoryButtons = ({ history })=>/*#__PURE__*/ _jsxs("div", {
         className: "better-editor__history",
         children: [

package/dist/admin/PreviewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/PreviewToolbar.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { ViewportToggle, type Viewport } from './ViewportToggle'\nimport {\n  FullscreenExitIcon,\n  FullscreenIcon,\n  InteractIcon,\n  InteractOffIcon,\n  RedoIcon,\n  SidebarHideIcon,\n  SidebarShowIcon,\n  UndoIcon,\n} from './icons'\nimport type { useEditorHistory } from '../state/useEditorHistory'\n\nexport type PreviewToolbarProps = {\n  history: ReturnType<typeof useEditorHistory>\n  viewport: Viewport\n  onViewportChange: (viewport: Viewport) => void\n  iframeWidth: number | null\n  isFullscreen: boolean\n  onFullscreenToggle: () => void\n  interactMode: boolean\n  onInteractToggle: () => void\n  sidebarCollapsed: boolean\n  onSidebarToggle: () => void\n}\n\nexport const PreviewToolbar: React.FC<PreviewToolbarProps> = ({\n  history,\n  viewport,\n  onViewportChange,\n  iframeWidth,\n  isFullscreen,\n  onFullscreenToggle,\n  interactMode,\n  onInteractToggle,\n  sidebarCollapsed,\n  onSidebarToggle,\n}) => (\n  <div className=\"better-editor__preview-toolbar\">\n    <HistoryButtons history={history} />\n    <div className=\"better-editor__preview-toolbar-right\">\n      {iframeWidth ? (\n        <span className=\"better-editor__width-chip\" aria-live=\"polite\">\n          {iframeWidth}\n          <span className=\"better-editor__width-chip-unit\">px</span>\n        </span>\n      ) : null}\n      <ViewportToggle value={viewport} onChange={onViewportChange} />\n      <div className=\"better-editor-viewport\">\n        <button\n          type=\"button\"\n          className={\n            isFullscreen\n              ? 'better-editor-viewport__btn better-editor-viewport__btn--active'\n              : 'better-editor-viewport__btn'\n          }\n          onClick={onFullscreenToggle}\n          aria-pressed={isFullscreen}\n          title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n          aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n        >\n          {isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}\n        </button>\n        <button\n          type=\"button\"\n          className={\n            interactMode\n              ? 'better-editor-viewport__btn better-editor-viewport__btn--active'\n              : 'better-editor-viewport__btn'\n          }\n          onClick={onInteractToggle}\n          aria-pressed={interactMode}\n          title={\n            interactMode\n              ? 'Switch to edit mode'\n              : 'Switch to interact mode (use forms, accordions, links)'\n          }\n          aria-label={interactMode ? 'Switch to edit mode' : 'Switch to interact mode'}\n        >\n          {interactMode ? <InteractIcon /> : <InteractOffIcon />}\n        </button>\n        <button\n          type=\"button\"\n          className=\"better-editor-viewport__btn\"\n          onClick={onSidebarToggle}\n          aria-pressed={sidebarCollapsed}\n          title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}\n          aria-label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}\n        >\n          {sidebarCollapsed ? <SidebarShowIcon /> : <SidebarHideIcon />}\n        </button>\n      </div>\n    </div>\n  </div>\n)\n\nconst HistoryButtons: React.FC<{ history: ReturnType<typeof useEditorHistory> }> = ({\n  history,\n}) => (\n  <div className=\"better-editor__history\">\n    <button\n      type=\"button\"\n      className=\"better-editor__history-btn\"\n      onClick={history.undo}\n      disabled={!history.canUndo}\n      title=\"Undo (Cmd/Ctrl+Z)\"\n      aria-label=\"Undo\"\n    >\n      <UndoIcon />\n    </button>\n    <button\n      type=\"button\"\n      className=\"better-editor__history-btn\"\n      onClick={history.redo}\n      disabled={!history.canRedo}\n      title=\"Redo (Cmd/Ctrl+Shift+Z)\"\n      aria-label=\"Redo\"\n    >\n      <RedoIcon />\n    </button>\n  </div>\n)\n"],"names":["React","ViewportToggle","FullscreenExitIcon","FullscreenIcon","InteractIcon","InteractOffIcon","RedoIcon","SidebarHideIcon","SidebarShowIcon","UndoIcon","PreviewToolbar","history","viewport","onViewportChange","iframeWidth","isFullscreen","onFullscreenToggle","interactMode","onInteractToggle","sidebarCollapsed","onSidebarToggle","div","className","HistoryButtons","span","aria-live","value","onChange","button","type","onClick","aria-pressed","title","aria-label","undo","disabled","canUndo","redo","canRedo"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAc,QAAuB,mBAAkB;AAChE,SACEC,kBAAkB,EAClBC,cAAc,EACdC,YAAY,EACZC,eAAe,EACfC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,QAAQ,QACH,UAAS;AAgBhB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,EAChBC,WAAW,EACXC,YAAY,EACZC,kBAAkB,EAClBC,YAAY,EACZC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EAChB,iBACC,MAACC;QAAIC,WAAU;;0BACb,KAACC;gBAAeZ,SAASA;;0BACzB,MAACU;gBAAIC,WAAU;;oBACZR,4BACC,MAACU;wBAAKF,WAAU;wBAA4BG,aAAU;;4BACnDX;0CACD,KAACU;gCAAKF,WAAU;0CAAiC;;;yBAEjD;kCACJ,KAACrB;wBAAeyB,OAAOd;wBAAUe,UAAUd;;kCAC3C,MAACQ;wBAAIC,WAAU;;0CACb,KAACM;gCACCC,MAAK;gCACLP,WACEP,eACI,oEACA;gCAENe,SAASd;gCACTe,gBAAchB;gCACdiB,OAAOjB,eAAe,oBAAoB;gCAC1CkB,cAAYlB,eAAe,oBAAoB;0CAE9CA,6BAAe,KAACb,wCAAwB,KAACC;;0CAE5C,KAACyB;gCACCC,MAAK;gCACLP,WACEL,eACI,oEACA;gCAENa,SAASZ;gCACTa,gBAAcd;gCACde,OACEf,eACI,wBACA;gCAENgB,cAAYhB,eAAe,wBAAwB;0CAElDA,6BAAe,KAACb,kCAAkB,KAACC;;0CAEtC,KAACuB;gCACCC,MAAK;gCACLP,WAAU;gCACVQ,SAASV;gCACTW,gBAAcZ;gCACda,OAAOb,mBAAmB,iBAAiB;gCAC3Cc,cAAYd,mBAAmB,iBAAiB;0CAE/CA,iCAAmB,KAACX,qCAAqB,KAACD;;;;;;;OAKpD;AAED,MAAMgB,iBAA6E,CAAC,EAClFZ,OAAO,EACR,iBACC,MAACU;QAAIC,WAAU;;0BACb,KAACM;gBACCC,MAAK;gBACLP,WAAU;gBACVQ,SAASnB,QAAQuB,IAAI;gBACrBC,UAAU,CAACxB,QAAQyB,OAAO;gBAC1BJ,OAAM;gBACNC,cAAW;0BAEX,cAAA,KAACxB;;0BAEH,KAACmB;gBACCC,MAAK;gBACLP,WAAU;gBACVQ,SAASnB,QAAQ0B,IAAI;gBACrBF,UAAU,CAACxB,QAAQ2B,OAAO;gBAC1BN,OAAM;gBACNC,cAAW;0BAEX,cAAA,KAAC3B"}
+{"version":3,"sources":["../../src/admin/PreviewToolbar.tsx"],"sourcesContent":["'use client'\n\nimport React, { type RefObject } from 'react'\nimport { ViewportToggle, type Viewport } from './ViewportToggle'\nimport { WidthChip } from './WidthChip'\nimport {\n  FullscreenExitIcon,\n  FullscreenIcon,\n  InteractIcon,\n  InteractOffIcon,\n  RedoIcon,\n  SidebarHideIcon,\n  SidebarShowIcon,\n  UndoIcon,\n} from './icons'\nimport type { useEditorHistory } from '../state/useEditorHistory'\n\nexport type PreviewToolbarProps = {\n  history: ReturnType<typeof useEditorHistory>\n  viewport: Viewport\n  onViewportChange: (viewport: Viewport) => void\n  iframeRef: RefObject<HTMLIFrameElement | null>\n  isFullscreen: boolean\n  onFullscreenToggle: () => void\n  interactMode: boolean\n  onInteractToggle: () => void\n  sidebarCollapsed: boolean\n  onSidebarToggle: () => void\n}\n\n// Memoized so resize-drag re-renders of the overlay skip the toolbar.\nexport const PreviewToolbar = React.memo<PreviewToolbarProps>(({\n  history,\n  viewport,\n  onViewportChange,\n  iframeRef,\n  isFullscreen,\n  onFullscreenToggle,\n  interactMode,\n  onInteractToggle,\n  sidebarCollapsed,\n  onSidebarToggle,\n}) => (\n  <div className=\"better-editor__preview-toolbar\">\n    <HistoryButtons history={history} />\n    <div className=\"better-editor__preview-toolbar-right\">\n      <WidthChip iframeRef={iframeRef} />\n      <ViewportToggle value={viewport} onChange={onViewportChange} />\n      <div className=\"better-editor-viewport\">\n        <button\n          type=\"button\"\n          className={\n            isFullscreen\n              ? 'better-editor-viewport__btn better-editor-viewport__btn--active'\n              : 'better-editor-viewport__btn'\n          }\n          onClick={onFullscreenToggle}\n          aria-pressed={isFullscreen}\n          title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n          aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}\n        >\n          {isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}\n        </button>\n        <button\n          type=\"button\"\n          className={\n            interactMode\n              ? 'better-editor-viewport__btn better-editor-viewport__btn--active'\n              : 'better-editor-viewport__btn'\n          }\n          onClick={onInteractToggle}\n          aria-pressed={interactMode}\n          title={\n            interactMode\n              ? 'Switch to edit mode'\n              : 'Switch to interact mode (use forms, accordions, links)'\n          }\n          aria-label={interactMode ? 'Switch to edit mode' : 'Switch to interact mode'}\n        >\n          {interactMode ? <InteractIcon /> : <InteractOffIcon />}\n        </button>\n        <button\n          type=\"button\"\n          className=\"better-editor-viewport__btn\"\n          onClick={onSidebarToggle}\n          aria-pressed={sidebarCollapsed}\n          title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}\n          aria-label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}\n        >\n          {sidebarCollapsed ? <SidebarShowIcon /> : <SidebarHideIcon />}\n        </button>\n      </div>\n    </div>\n  </div>\n))\n\nconst HistoryButtons: React.FC<{ history: ReturnType<typeof useEditorHistory> }> = ({\n  history,\n}) => (\n  <div className=\"better-editor__history\">\n    <button\n      type=\"button\"\n      className=\"better-editor__history-btn\"\n      onClick={history.undo}\n      disabled={!history.canUndo}\n      title=\"Undo (Cmd/Ctrl+Z)\"\n      aria-label=\"Undo\"\n    >\n      <UndoIcon />\n    </button>\n    <button\n      type=\"button\"\n      className=\"better-editor__history-btn\"\n      onClick={history.redo}\n      disabled={!history.canRedo}\n      title=\"Redo (Cmd/Ctrl+Shift+Z)\"\n      aria-label=\"Redo\"\n    >\n      <RedoIcon />\n    </button>\n  </div>\n)\n"],"names":["React","ViewportToggle","WidthChip","FullscreenExitIcon","FullscreenIcon","InteractIcon","InteractOffIcon","RedoIcon","SidebarHideIcon","SidebarShowIcon","UndoIcon","PreviewToolbar","memo","history","viewport","onViewportChange","iframeRef","isFullscreen","onFullscreenToggle","interactMode","onInteractToggle","sidebarCollapsed","onSidebarToggle","div","className","HistoryButtons","value","onChange","button","type","onClick","aria-pressed","title","aria-label","undo","disabled","canUndo","redo","canRedo"],"mappings":"AAAA;;AAEA,OAAOA,WAA+B,QAAO;AAC7C,SAASC,cAAc,QAAuB,mBAAkB;AAChE,SAASC,SAAS,QAAQ,cAAa;AACvC,SACEC,kBAAkB,EAClBC,cAAc,EACdC,YAAY,EACZC,eAAe,EACfC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,QAAQ,QACH,UAAS;AAgBhB,sEAAsE;AACtE,OAAO,MAAMC,+BAAiBX,MAAMY,IAAI,CAAsB,CAAC,EAC7DC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,EAChBC,SAAS,EACTC,YAAY,EACZC,kBAAkB,EAClBC,YAAY,EACZC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EAChB,iBACC,MAACC;QAAIC,WAAU;;0BACb,KAACC;gBAAeZ,SAASA;;0BACzB,MAACU;gBAAIC,WAAU;;kCACb,KAACtB;wBAAUc,WAAWA;;kCACtB,KAACf;wBAAeyB,OAAOZ;wBAAUa,UAAUZ;;kCAC3C,MAACQ;wBAAIC,WAAU;;0CACb,KAACI;gCACCC,MAAK;gCACLL,WACEP,eACI,oEACA;gCAENa,SAASZ;gCACTa,gBAAcd;gCACde,OAAOf,eAAe,oBAAoB;gCAC1CgB,cAAYhB,eAAe,oBAAoB;0CAE9CA,6BAAe,KAACd,wCAAwB,KAACC;;0CAE5C,KAACwB;gCACCC,MAAK;gCACLL,WACEL,eACI,oEACA;gCAENW,SAASV;gCACTW,gBAAcZ;gCACda,OACEb,eACI,wBACA;gCAENc,cAAYd,eAAe,wBAAwB;0CAElDA,6BAAe,KAACd,kCAAkB,KAACC;;0CAEtC,KAACsB;gCACCC,MAAK;gCACLL,WAAU;gCACVM,SAASR;gCACTS,gBAAcV;gCACdW,OAAOX,mBAAmB,iBAAiB;gCAC3CY,cAAYZ,mBAAmB,iBAAiB;0CAE/CA,iCAAmB,KAACZ,qCAAqB,KAACD;;;;;;;QAKnD;AAEF,MAAMiB,iBAA6E,CAAC,EAClFZ,OAAO,EACR,iBACC,MAACU;QAAIC,WAAU;;0BACb,KAACI;gBACCC,MAAK;gBACLL,WAAU;gBACVM,SAASjB,QAAQqB,IAAI;gBACrBC,UAAU,CAACtB,QAAQuB,OAAO;gBAC1BJ,OAAM;gBACNC,cAAW;0BAEX,cAAA,KAACvB;;0BAEH,KAACkB;gBACCC,MAAK;gBACLL,WAAU;gBACVM,SAASjB,QAAQwB,IAAI;gBACrBF,UAAU,CAACtB,QAAQyB,OAAO;gBAC1BN,OAAM;gBACNC,cAAW;0BAEX,cAAA,KAAC1B"}

package/dist/admin/ViewportToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/ViewportToggle.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\nimport {\n  DesktopIcon,\n  MobileIcon,\n  ResponsiveIcon,\n  TabletIcon,\n  type LucideProps,\n} from './icons'\n\nexport type Viewport = 'desktop' | 'tablet' | 'mobile' | 'responsive'\n\ntype Item = { id: Viewport; label: string; Icon: React.FC<LucideProps> }\n\nconst ITEMS: ReadonlyArray<Item> = [\n  { id: 'desktop', label: 'Desktop', Icon: DesktopIcon },\n  { id: 'tablet', label: 'Tablet', Icon: TabletIcon },\n  { id: 'mobile', label: 'Mobile', Icon: MobileIcon },\n  { id: 'responsive', label: 'Responsive (drag to resize)', Icon: ResponsiveIcon },\n]\n\nconst ROOT_CLASS = 'better-editor-viewport'\nconst BTN_CLASS = `${ROOT_CLASS}__btn`\n\nexport type ViewportToggleProps = {\n  value: Viewport\n  onChange: (next: Viewport) => void\n}\n\ntype ButtonProps = {\n  item: Item\n  active: boolean\n  onSelect: (id: Viewport) => void\n  buttonRef: (el: HTMLButtonElement | null) => void\n}\n\nconst ViewportButton: React.FC<ButtonProps> = ({ item, active, onSelect, buttonRef }) => {\n  const { id, label, Icon } = item\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      className={active ? `${BTN_CLASS} ${BTN_CLASS}--active` : BTN_CLASS}\n      onClick={() => onSelect(id)}\n      title={label}\n      aria-label={label}\n    >\n      <Icon />\n    </button>\n  )\n}\n\nexport const ViewportToggle: React.FC<ViewportToggleProps> = ({ value, onChange }) => {\n  const btnsRef = useRef<Array<HTMLButtonElement | null>>([])\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const isPrev = e.key === 'ArrowLeft' || e.key === 'ArrowUp'\n      const isNext = e.key === 'ArrowRight' || e.key === 'ArrowDown'\n      if (!isPrev && !isNext) return\n      e.preventDefault()\n      const idx = ITEMS.findIndex((i) => i.id === value)\n      const start = idx === -1 ? 0 : idx\n      const len = ITEMS.length\n      // Per radiogroup pattern, arrow keys move both selection and focus.\n      const nextIdx = isPrev ? (start - 1 + len) % len : (start + 1) % len\n      const next = ITEMS[nextIdx]\n      onChange(next.id)\n      btnsRef.current[nextIdx]?.focus()\n    },\n    [onChange, value],\n  )\n\n  return (\n    <div\n      className={ROOT_CLASS}\n      role=\"radiogroup\"\n      aria-label=\"Preview viewport\"\n      onKeyDown={onKeyDown}\n    >\n      {ITEMS.map((item, i) => (\n        <ViewportButton\n          key={item.id}\n          item={item}\n          active={value === item.id}\n          onSelect={onChange}\n          buttonRef={(el) => {\n            btnsRef.current[i] = el\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":["React","useCallback","useRef","DesktopIcon","MobileIcon","ResponsiveIcon","TabletIcon","ITEMS","id","label","Icon","ROOT_CLASS","BTN_CLASS","ViewportButton","item","active","onSelect","buttonRef","button","type","ref","role","aria-checked","tabIndex","className","onClick","title","aria-label","ViewportToggle","value","onChange","btnsRef","onKeyDown","e","isPrev","key","isNext","preventDefault","idx","findIndex","i","start","len","length","nextIdx","next","current","focus","div","map","el"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAClD,SACEC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,UAAU,QAEL,UAAS;AAMhB,MAAMC,QAA6B;IACjC;QAAEC,IAAI;QAAWC,OAAO;QAAWC,MAAMP;IAAY;IACrD;QAAEK,IAAI;QAAUC,OAAO;QAAUC,MAAMJ;IAAW;IAClD;QAAEE,IAAI;QAAUC,OAAO;QAAUC,MAAMN;IAAW;IAClD;QAAEI,IAAI;QAAcC,OAAO;QAA+BC,MAAML;IAAe;CAChF;AAED,MAAMM,aAAa;AACnB,MAAMC,YAAY,GAAGD,WAAW,KAAK,CAAC;AActC,MAAME,iBAAwC,CAAC,EAAEC,IAAI,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE;IAClF,MAAM,EAAET,EAAE,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGI;IAC5B,qBACE,KAACI;QACCC,MAAK;QACLC,KAAKH;QACLI,MAAK;QACLC,gBAAcP;QACdQ,UAAUR,SAAS,IAAI,CAAC;QACxBS,WAAWT,SAAS,GAAGH,UAAU,CAAC,EAAEA,UAAU,QAAQ,CAAC,GAAGA;QAC1Da,SAAS,IAAMT,SAASR;QACxBkB,OAAOjB;QACPkB,cAAYlB;kBAEZ,cAAA,KAACC;;AAGP;AAEA,OAAO,MAAMkB,iBAAgD,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC/E,MAAMC,UAAU7B,OAAwC,EAAE;IAE1D,MAAM8B,YAAY/B,YAChB,CAACgC;QACC,MAAMC,SAASD,EAAEE,GAAG,KAAK,eAAeF,EAAEE,GAAG,KAAK;QAClD,MAAMC,SAASH,EAAEE,GAAG,KAAK,gBAAgBF,EAAEE,GAAG,KAAK;QACnD,IAAI,CAACD,UAAU,CAACE,QAAQ;QACxBH,EAAEI,cAAc;QAChB,MAAMC,MAAM/B,MAAMgC,SAAS,CAAC,CAACC,IAAMA,EAAEhC,EAAE,KAAKqB;QAC5C,MAAMY,QAAQH,QAAQ,CAAC,IAAI,IAAIA;QAC/B,MAAMI,MAAMnC,MAAMoC,MAAM;QACxB,oEAAoE;QACpE,MAAMC,UAAUV,SAAS,AAACO,CAAAA,QAAQ,IAAIC,GAAE,IAAKA,MAAM,AAACD,CAAAA,QAAQ,CAAA,IAAKC;QACjE,MAAMG,OAAOtC,KAAK,CAACqC,QAAQ;QAC3Bd,SAASe,KAAKrC,EAAE;QAChBuB,QAAQe,OAAO,CAACF,QAAQ,EAAEG;IAC5B,GACA;QAACjB;QAAUD;KAAM;IAGnB,qBACE,KAACmB;QACCxB,WAAWb;QACXU,MAAK;QACLM,cAAW;QACXK,WAAWA;kBAEVzB,MAAM0C,GAAG,CAAC,CAACnC,MAAM0B,kBAChB,KAAC3B;gBAECC,MAAMA;gBACNC,QAAQc,UAAUf,KAAKN,EAAE;gBACzBQ,UAAUc;gBACVb,WAAW,CAACiC;oBACVnB,QAAQe,OAAO,CAACN,EAAE,GAAGU;gBACvB;eANKpC,KAAKN,EAAE;;AAWtB,EAAC"}
+{"version":3,"sources":["../../src/admin/ViewportToggle.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\nimport {\n  DesktopIcon,\n  MobileIcon,\n  ResponsiveIcon,\n  TabletIcon,\n  type IconProps,\n} from './icons'\n\nexport type Viewport = 'desktop' | 'tablet' | 'mobile' | 'responsive'\n\ntype Item = { id: Viewport; label: string; Icon: React.FC<IconProps> }\n\nconst ITEMS: ReadonlyArray<Item> = [\n  { id: 'desktop', label: 'Desktop', Icon: DesktopIcon },\n  { id: 'tablet', label: 'Tablet', Icon: TabletIcon },\n  { id: 'mobile', label: 'Mobile', Icon: MobileIcon },\n  { id: 'responsive', label: 'Responsive (drag to resize)', Icon: ResponsiveIcon },\n]\n\nconst ROOT_CLASS = 'better-editor-viewport'\nconst BTN_CLASS = `${ROOT_CLASS}__btn`\n\nexport type ViewportToggleProps = {\n  value: Viewport\n  onChange: (next: Viewport) => void\n}\n\ntype ButtonProps = {\n  item: Item\n  active: boolean\n  onSelect: (id: Viewport) => void\n  buttonRef: (el: HTMLButtonElement | null) => void\n}\n\nconst ViewportButton: React.FC<ButtonProps> = ({ item, active, onSelect, buttonRef }) => {\n  const { id, label, Icon } = item\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      className={active ? `${BTN_CLASS} ${BTN_CLASS}--active` : BTN_CLASS}\n      onClick={() => onSelect(id)}\n      title={label}\n      aria-label={label}\n    >\n      <Icon />\n    </button>\n  )\n}\n\nexport const ViewportToggle: React.FC<ViewportToggleProps> = ({ value, onChange }) => {\n  const btnsRef = useRef<Array<HTMLButtonElement | null>>([])\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const isPrev = e.key === 'ArrowLeft' || e.key === 'ArrowUp'\n      const isNext = e.key === 'ArrowRight' || e.key === 'ArrowDown'\n      if (!isPrev && !isNext) return\n      e.preventDefault()\n      const idx = ITEMS.findIndex((i) => i.id === value)\n      const start = idx === -1 ? 0 : idx\n      const len = ITEMS.length\n      // Per radiogroup pattern, arrow keys move both selection and focus.\n      const nextIdx = isPrev ? (start - 1 + len) % len : (start + 1) % len\n      const next = ITEMS[nextIdx]\n      onChange(next.id)\n      btnsRef.current[nextIdx]?.focus()\n    },\n    [onChange, value],\n  )\n\n  return (\n    <div\n      className={ROOT_CLASS}\n      role=\"radiogroup\"\n      aria-label=\"Preview viewport\"\n      onKeyDown={onKeyDown}\n    >\n      {ITEMS.map((item, i) => (\n        <ViewportButton\n          key={item.id}\n          item={item}\n          active={value === item.id}\n          onSelect={onChange}\n          buttonRef={(el) => {\n            btnsRef.current[i] = el\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":["React","useCallback","useRef","DesktopIcon","MobileIcon","ResponsiveIcon","TabletIcon","ITEMS","id","label","Icon","ROOT_CLASS","BTN_CLASS","ViewportButton","item","active","onSelect","buttonRef","button","type","ref","role","aria-checked","tabIndex","className","onClick","title","aria-label","ViewportToggle","value","onChange","btnsRef","onKeyDown","e","isPrev","key","isNext","preventDefault","idx","findIndex","i","start","len","length","nextIdx","next","current","focus","div","map","el"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAClD,SACEC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,UAAU,QAEL,UAAS;AAMhB,MAAMC,QAA6B;IACjC;QAAEC,IAAI;QAAWC,OAAO;QAAWC,MAAMP;IAAY;IACrD;QAAEK,IAAI;QAAUC,OAAO;QAAUC,MAAMJ;IAAW;IAClD;QAAEE,IAAI;QAAUC,OAAO;QAAUC,MAAMN;IAAW;IAClD;QAAEI,IAAI;QAAcC,OAAO;QAA+BC,MAAML;IAAe;CAChF;AAED,MAAMM,aAAa;AACnB,MAAMC,YAAY,GAAGD,WAAW,KAAK,CAAC;AActC,MAAME,iBAAwC,CAAC,EAAEC,IAAI,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE;IAClF,MAAM,EAAET,EAAE,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGI;IAC5B,qBACE,KAACI;QACCC,MAAK;QACLC,KAAKH;QACLI,MAAK;QACLC,gBAAcP;QACdQ,UAAUR,SAAS,IAAI,CAAC;QACxBS,WAAWT,SAAS,GAAGH,UAAU,CAAC,EAAEA,UAAU,QAAQ,CAAC,GAAGA;QAC1Da,SAAS,IAAMT,SAASR;QACxBkB,OAAOjB;QACPkB,cAAYlB;kBAEZ,cAAA,KAACC;;AAGP;AAEA,OAAO,MAAMkB,iBAAgD,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC/E,MAAMC,UAAU7B,OAAwC,EAAE;IAE1D,MAAM8B,YAAY/B,YAChB,CAACgC;QACC,MAAMC,SAASD,EAAEE,GAAG,KAAK,eAAeF,EAAEE,GAAG,KAAK;QAClD,MAAMC,SAASH,EAAEE,GAAG,KAAK,gBAAgBF,EAAEE,GAAG,KAAK;QACnD,IAAI,CAACD,UAAU,CAACE,QAAQ;QACxBH,EAAEI,cAAc;QAChB,MAAMC,MAAM/B,MAAMgC,SAAS,CAAC,CAACC,IAAMA,EAAEhC,EAAE,KAAKqB;QAC5C,MAAMY,QAAQH,QAAQ,CAAC,IAAI,IAAIA;QAC/B,MAAMI,MAAMnC,MAAMoC,MAAM;QACxB,oEAAoE;QACpE,MAAMC,UAAUV,SAAS,AAACO,CAAAA,QAAQ,IAAIC,GAAE,IAAKA,MAAM,AAACD,CAAAA,QAAQ,CAAA,IAAKC;QACjE,MAAMG,OAAOtC,KAAK,CAACqC,QAAQ;QAC3Bd,SAASe,KAAKrC,EAAE;QAChBuB,QAAQe,OAAO,CAACF,QAAQ,EAAEG;IAC5B,GACA;QAACjB;QAAUD;KAAM;IAGnB,qBACE,KAACmB;QACCxB,WAAWb;QACXU,MAAK;QACLM,cAAW;QACXK,WAAWA;kBAEVzB,MAAM0C,GAAG,CAAC,CAACnC,MAAM0B,kBAChB,KAAC3B;gBAECC,MAAMA;gBACNC,QAAQc,UAAUf,KAAKN,EAAE;gBACzBQ,UAAUc;gBACVb,WAAW,CAACiC;oBACVnB,QAAQe,OAAO,CAACN,EAAE,GAAGU;gBACvB;eANKpC,KAAKN,EAAE;;AAWtB,EAAC"}

package/dist/admin/WidthChip.d.ts

@@ -0,0 +1,4 @@
+import React, { type RefObject } from 'react';
+export declare const WidthChip: React.FC<{
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+}>;

package/dist/admin/WidthChip.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useSyncExternalStore } from 'react';
+// Live pixel-width readout for the preview iframe.
+export const WidthChip = ({ iframeRef })=>{
+    const width = useSyncExternalStore((onChange)=>{
+        const el = iframeRef.current;
+        if (!el || typeof ResizeObserver === 'undefined') return ()=>{};
+        const observer = new ResizeObserver(onChange);
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, ()=>{
+        const w = iframeRef.current?.clientWidth;
+        return typeof w === 'number' && w > 0 ? Math.round(w) : null;
+    }, ()=>null);
+    if (!width) return null;
+    return /*#__PURE__*/ _jsxs("span", {
+        className: "better-editor__width-chip",
+        "aria-live": "polite",
+        children: [
+            width,
+            /*#__PURE__*/ _jsx("span", {
+                className: "better-editor__width-chip-unit",
+                children: "px"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=WidthChip.js.map

package/dist/admin/WidthChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/WidthChip.tsx"],"sourcesContent":["'use client'\n\nimport React, { useSyncExternalStore, type RefObject } from 'react'\n\n// Live pixel-width readout for the preview iframe.\nexport const WidthChip: React.FC<{ iframeRef: RefObject<HTMLIFrameElement | null> }> = ({\n  iframeRef,\n}) => {\n  const width = useSyncExternalStore(\n    (onChange) => {\n      const el = iframeRef.current\n      if (!el || typeof ResizeObserver === 'undefined') return () => {}\n      const observer = new ResizeObserver(onChange)\n      observer.observe(el)\n      return () => observer.disconnect()\n    },\n    () => {\n      const w = iframeRef.current?.clientWidth\n      return typeof w === 'number' && w > 0 ? Math.round(w) : null\n    },\n    () => null,\n  )\n\n  if (!width) return null\n  return (\n    <span className=\"better-editor__width-chip\" aria-live=\"polite\">\n      {width}\n      <span className=\"better-editor__width-chip-unit\">px</span>\n    </span>\n  )\n}\n"],"names":["React","useSyncExternalStore","WidthChip","iframeRef","width","onChange","el","current","ResizeObserver","observer","observe","disconnect","w","clientWidth","Math","round","span","className","aria-live"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,oBAAoB,QAAwB,QAAO;AAEnE,mDAAmD;AACnD,OAAO,MAAMC,YAA0E,CAAC,EACtFC,SAAS,EACV;IACC,MAAMC,QAAQH,qBACZ,CAACI;QACC,MAAMC,KAAKH,UAAUI,OAAO;QAC5B,IAAI,CAACD,MAAM,OAAOE,mBAAmB,aAAa,OAAO,KAAO;QAChE,MAAMC,WAAW,IAAID,eAAeH;QACpCI,SAASC,OAAO,CAACJ;QACjB,OAAO,IAAMG,SAASE,UAAU;IAClC,GACA;QACE,MAAMC,IAAIT,UAAUI,OAAO,EAAEM;QAC7B,OAAO,OAAOD,MAAM,YAAYA,IAAI,IAAIE,KAAKC,KAAK,CAACH,KAAK;IAC1D,GACA,IAAM;IAGR,IAAI,CAACR,OAAO,OAAO;IACnB,qBACE,MAACY;QAAKC,WAAU;QAA4BC,aAAU;;YACnDd;0BACD,KAACY;gBAAKC,WAAU;0BAAiC;;;;AAGvD,EAAC"}

package/dist/admin/icons.d.ts

@@ -1,24 +1,25 @@
 import React from 'react';
-import { type LucideProps } from 'lucide-react';
-export type { LucideProps };
-export declare const ChevronUp: React.FC<LucideProps>;
-export declare const ChevronDown: React.FC<LucideProps>;
-export declare const CopyIcon: React.FC<LucideProps>;
-export declare const TrashIcon: React.FC<LucideProps>;
-export declare const PlusIcon: React.FC<LucideProps>;
-export declare const DesktopIcon: React.FC<LucideProps>;
-export declare const TabletIcon: React.FC<LucideProps>;
-export declare const MobileIcon: React.FC<LucideProps>;
-export declare const ResponsiveIcon: React.FC<LucideProps>;
-export declare const FullscreenIcon: React.FC<LucideProps>;
-export declare const FullscreenExitIcon: React.FC<LucideProps>;
-export declare const UndoIcon: React.FC<LucideProps>;
-export declare const RedoIcon: React.FC<LucideProps>;
-export declare const LayoutIcon: React.FC<LucideProps>;
-export declare const SidebarHideIcon: React.FC<LucideProps>;
-export declare const SidebarShowIcon: React.FC<LucideProps>;
-export declare const InteractIcon: React.FC<LucideProps>;
-export declare const InteractOffIcon: React.FC<LucideProps>;
-export declare const StarIcon: React.FC<LucideProps>;
-export declare const BugIcon: React.FC<LucideProps>;
-export declare const GithubIcon: React.FC<LucideProps>;
+export type IconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export declare const ChevronUp: React.FC<IconProps>;
+export declare const ChevronDown: React.FC<IconProps>;
+export declare const CopyIcon: React.FC<IconProps>;
+export declare const TrashIcon: React.FC<IconProps>;
+export declare const PlusIcon: React.FC<IconProps>;
+export declare const DesktopIcon: React.FC<IconProps>;
+export declare const TabletIcon: React.FC<IconProps>;
+export declare const MobileIcon: React.FC<IconProps>;
+export declare const ResponsiveIcon: React.FC<IconProps>;
+export declare const FullscreenIcon: React.FC<IconProps>;
+export declare const FullscreenExitIcon: React.FC<IconProps>;
+export declare const UndoIcon: React.FC<IconProps>;
+export declare const RedoIcon: React.FC<IconProps>;
+export declare const LayoutIcon: React.FC<IconProps>;
+export declare const SidebarHideIcon: React.FC<IconProps>;
+export declare const SidebarShowIcon: React.FC<IconProps>;
+export declare const InteractIcon: React.FC<IconProps>;
+export declare const InteractOffIcon: React.FC<IconProps>;
+export declare const StarIcon: React.FC<IconProps>;
+export declare const BugIcon: React.FC<IconProps>;
+export declare const GithubIcon: React.FC<IconProps>;