payload-better-editor 1.0.0

package/dist/admin/PreviewFrame.js.map

@@ -0,0 +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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"}

package/dist/admin/PreviewToolbar.d.ts

@@ -0,0 +1,16 @@
+import React 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;
+    isFullscreen: boolean;
+    onFullscreenToggle: () => void;
+    interactMode: boolean;
+    onInteractToggle: () => void;
+    sidebarCollapsed: boolean;
+    onSidebarToggle: () => void;
+};
+export declare const PreviewToolbar: React.FC<PreviewToolbarProps>;

package/dist/admin/PreviewToolbar.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ViewportToggle } from './ViewportToggle';
+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", {
+        className: "better-editor__preview-toolbar",
+        children: [
+            /*#__PURE__*/ _jsx(HistoryButtons, {
+                history: history
+            }),
+            /*#__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(ViewportToggle, {
+                        value: viewport,
+                        onChange: onViewportChange
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "better-editor-viewport",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: isFullscreen ? 'better-editor-viewport__btn better-editor-viewport__btn--active' : 'better-editor-viewport__btn',
+                                onClick: onFullscreenToggle,
+                                "aria-pressed": isFullscreen,
+                                title: isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
+                                "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
+                                children: isFullscreen ? /*#__PURE__*/ _jsx(FullscreenExitIcon, {}) : /*#__PURE__*/ _jsx(FullscreenIcon, {})
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: interactMode ? 'better-editor-viewport__btn better-editor-viewport__btn--active' : 'better-editor-viewport__btn',
+                                onClick: onInteractToggle,
+                                "aria-pressed": interactMode,
+                                title: interactMode ? 'Switch to edit mode' : 'Switch to interact mode (use forms, accordions, links)',
+                                "aria-label": interactMode ? 'Switch to edit mode' : 'Switch to interact mode',
+                                children: interactMode ? /*#__PURE__*/ _jsx(InteractIcon, {}) : /*#__PURE__*/ _jsx(InteractOffIcon, {})
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: "better-editor-viewport__btn",
+                                onClick: onSidebarToggle,
+                                "aria-pressed": sidebarCollapsed,
+                                title: sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar',
+                                "aria-label": sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar',
+                                children: sidebarCollapsed ? /*#__PURE__*/ _jsx(SidebarShowIcon, {}) : /*#__PURE__*/ _jsx(SidebarHideIcon, {})
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+const HistoryButtons = ({ history })=>/*#__PURE__*/ _jsxs("div", {
+        className: "better-editor__history",
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                className: "better-editor__history-btn",
+                onClick: history.undo,
+                disabled: !history.canUndo,
+                title: "Undo (Cmd/Ctrl+Z)",
+                "aria-label": "Undo",
+                children: /*#__PURE__*/ _jsx(UndoIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                className: "better-editor__history-btn",
+                onClick: history.redo,
+                disabled: !history.canRedo,
+                title: "Redo (Cmd/Ctrl+Shift+Z)",
+                "aria-label": "Redo",
+                children: /*#__PURE__*/ _jsx(RedoIcon, {})
+            })
+        ]
+    });
+
+//# sourceMappingURL=PreviewToolbar.js.map

package/dist/admin/PreviewToolbar.js.map

@@ -0,0 +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"}

package/dist/admin/SettingsBanner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import '../styles/settings-banner.css';
+export declare const SettingsBanner: React.FC;

package/dist/admin/SettingsBanner.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { BugIcon, GithubIcon, StarIcon } from './icons';
+import { VERSION } from '../version';
+import '../styles/settings-banner.css';
+const REPO = 'scorpio-99/payload-better-editor';
+const AUTHOR = 'scorpio-99';
+const BANNER = {
+    author: AUTHOR,
+    repoUrl: `https://github.com/${REPO}`,
+    issuesUrl: `https://github.com/${REPO}/issues/new`,
+    authorUrl: `https://github.com/${AUTHOR}`,
+    starBadgeUrl: `https://img.shields.io/github/stars/${REPO}?style=flat&label=&color=27272a&labelColor=27272a&logo=github&logoColor=white`
+};
+export const SettingsBanner = ()=>/*#__PURE__*/ _jsxs("div", {
+        className: "better-editor-banner",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "better-editor-banner__header",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "better-editor-banner__heading",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "better-editor-banner__title",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    children: "payload-better-editor"
+                                }),
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "better-editor-banner__version",
+                                    children: [
+                                        "v",
+                                        VERSION
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "better-editor-banner__subtitle",
+                            children: [
+                                "Built by",
+                                ' ',
+                                /*#__PURE__*/ _jsx("a", {
+                                    href: BANNER.authorUrl,
+                                    target: "_blank",
+                                    rel: "noreferrer noopener",
+                                    children: BANNER.author
+                                }),
+                                ". If you find this plugin useful, please leave a star ⭐"
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "better-editor-banner__actions",
+                children: [
+                    /*#__PURE__*/ _jsxs("a", {
+                        href: BANNER.repoUrl,
+                        target: "_blank",
+                        rel: "noreferrer noopener",
+                        className: "better-editor-banner__link",
+                        children: [
+                            /*#__PURE__*/ _jsx(StarIcon, {}),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Star"
+                            }),
+                            /*#__PURE__*/ _jsx("img", {
+                                src: BANNER.starBadgeUrl,
+                                alt: "",
+                                className: "better-editor-banner__star-badge"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("a", {
+                        href: BANNER.repoUrl,
+                        target: "_blank",
+                        rel: "noreferrer noopener",
+                        className: "better-editor-banner__link",
+                        children: [
+                            /*#__PURE__*/ _jsx(GithubIcon, {}),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "GitHub"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("a", {
+                        href: BANNER.issuesUrl,
+                        target: "_blank",
+                        rel: "noreferrer noopener",
+                        className: "better-editor-banner__link",
+                        children: [
+                            /*#__PURE__*/ _jsx(BugIcon, {}),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Report a bug"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+
+//# sourceMappingURL=SettingsBanner.js.map

package/dist/admin/SettingsBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/SettingsBanner.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { BugIcon, GithubIcon, StarIcon } from './icons'\nimport { VERSION } from '../version'\nimport '../styles/settings-banner.css'\n\nconst REPO = 'scorpio-99/payload-better-editor'\nconst AUTHOR = 'scorpio-99'\n\nconst BANNER = {\n  author: AUTHOR,\n  repoUrl: `https://github.com/${REPO}`,\n  issuesUrl: `https://github.com/${REPO}/issues/new`,\n  authorUrl: `https://github.com/${AUTHOR}`,\n  starBadgeUrl: `https://img.shields.io/github/stars/${REPO}?style=flat&label=&color=27272a&labelColor=27272a&logo=github&logoColor=white`,\n}\n\nexport const SettingsBanner: React.FC = () => (\n  <div className=\"better-editor-banner\">\n    <div className=\"better-editor-banner__header\">\n      <div className=\"better-editor-banner__heading\">\n        <div className=\"better-editor-banner__title\">\n          <span>payload-better-editor</span>\n          <span className=\"better-editor-banner__version\">v{VERSION}</span>\n        </div>\n        <div className=\"better-editor-banner__subtitle\">\n          Built by{' '}\n          <a href={BANNER.authorUrl} target=\"_blank\" rel=\"noreferrer noopener\">\n            {BANNER.author}\n          </a>\n          . If you find this plugin useful, please leave a star ⭐\n        </div>\n      </div>\n    </div>\n    <div className=\"better-editor-banner__actions\">\n      <a\n        href={BANNER.repoUrl}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        className=\"better-editor-banner__link\"\n      >\n        <StarIcon />\n        <span>Star</span>\n        <img\n          src={BANNER.starBadgeUrl}\n          alt=\"\"\n          className=\"better-editor-banner__star-badge\"\n        />\n      </a>\n      <a\n        href={BANNER.repoUrl}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        className=\"better-editor-banner__link\"\n      >\n        <GithubIcon />\n        <span>GitHub</span>\n      </a>\n      <a\n        href={BANNER.issuesUrl}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        className=\"better-editor-banner__link\"\n      >\n        <BugIcon />\n        <span>Report a bug</span>\n      </a>\n    </div>\n  </div>\n)\n"],"names":["React","BugIcon","GithubIcon","StarIcon","VERSION","REPO","AUTHOR","BANNER","author","repoUrl","issuesUrl","authorUrl","starBadgeUrl","SettingsBanner","div","className","span","a","href","target","rel","img","src","alt"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,SAASC,OAAO,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,UAAS;AACvD,SAASC,OAAO,QAAQ,aAAY;AACpC,OAAO,gCAA+B;AAEtC,MAAMC,OAAO;AACb,MAAMC,SAAS;AAEf,MAAMC,SAAS;IACbC,QAAQF;IACRG,SAAS,CAAC,mBAAmB,EAAEJ,MAAM;IACrCK,WAAW,CAAC,mBAAmB,EAAEL,KAAK,WAAW,CAAC;IAClDM,WAAW,CAAC,mBAAmB,EAAEL,QAAQ;IACzCM,cAAc,CAAC,oCAAoC,EAAEP,KAAK,6EAA6E,CAAC;AAC1I;AAEA,OAAO,MAAMQ,iBAA2B,kBACtC,MAACC;QAAIC,WAAU;;0BACb,KAACD;gBAAIC,WAAU;0BACb,cAAA,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACC;8CAAK;;8CACN,MAACA;oCAAKD,WAAU;;wCAAgC;wCAAEX;;;;;sCAEpD,MAACU;4BAAIC,WAAU;;gCAAiC;gCACrC;8CACT,KAACE;oCAAEC,MAAMX,OAAOI,SAAS;oCAAEQ,QAAO;oCAASC,KAAI;8CAC5Cb,OAAOC,MAAM;;gCACZ;;;;;;0BAKV,MAACM;gBAAIC,WAAU;;kCACb,MAACE;wBACCC,MAAMX,OAAOE,OAAO;wBACpBU,QAAO;wBACPC,KAAI;wBACJL,WAAU;;0CAEV,KAACZ;0CACD,KAACa;0CAAK;;0CACN,KAACK;gCACCC,KAAKf,OAAOK,YAAY;gCACxBW,KAAI;gCACJR,WAAU;;;;kCAGd,MAACE;wBACCC,MAAMX,OAAOE,OAAO;wBACpBU,QAAO;wBACPC,KAAI;wBACJL,WAAU;;0CAEV,KAACb;0CACD,KAACc;0CAAK;;;;kCAER,MAACC;wBACCC,MAAMX,OAAOG,SAAS;wBACtBS,QAAO;wBACPC,KAAI;wBACJL,WAAU;;0CAEV,KAACd;0CACD,KAACe;0CAAK;;;;;;;OAIb"}

package/dist/admin/ViewportToggle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type Viewport = 'desktop' | 'tablet' | 'mobile' | 'responsive';
+export type ViewportToggleProps = {
+    value: Viewport;
+    onChange: (next: Viewport) => void;
+};
+export declare const ViewportToggle: React.FC<ViewportToggleProps>;

package/dist/admin/ViewportToggle.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import { DesktopIcon, MobileIcon, ResponsiveIcon, TabletIcon } from './icons';
+const ITEMS = [
+    {
+        id: 'desktop',
+        label: 'Desktop',
+        Icon: DesktopIcon
+    },
+    {
+        id: 'tablet',
+        label: 'Tablet',
+        Icon: TabletIcon
+    },
+    {
+        id: 'mobile',
+        label: 'Mobile',
+        Icon: MobileIcon
+    },
+    {
+        id: 'responsive',
+        label: 'Responsive (drag to resize)',
+        Icon: ResponsiveIcon
+    }
+];
+const ROOT_CLASS = 'better-editor-viewport';
+const BTN_CLASS = `${ROOT_CLASS}__btn`;
+const ViewportButton = ({ item, active, onSelect, buttonRef })=>{
+    const { id, label, Icon } = item;
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        ref: buttonRef,
+        role: "radio",
+        "aria-checked": active,
+        tabIndex: active ? 0 : -1,
+        className: active ? `${BTN_CLASS} ${BTN_CLASS}--active` : BTN_CLASS,
+        onClick: ()=>onSelect(id),
+        title: label,
+        "aria-label": label,
+        children: /*#__PURE__*/ _jsx(Icon, {})
+    });
+};
+export const ViewportToggle = ({ value, onChange })=>{
+    const btnsRef = useRef([]);
+    const onKeyDown = useCallback((e)=>{
+        const isPrev = e.key === 'ArrowLeft' || e.key === 'ArrowUp';
+        const isNext = e.key === 'ArrowRight' || e.key === 'ArrowDown';
+        if (!isPrev && !isNext) return;
+        e.preventDefault();
+        const idx = ITEMS.findIndex((i)=>i.id === value);
+        const start = idx === -1 ? 0 : idx;
+        const len = ITEMS.length;
+        // Per radiogroup pattern, arrow keys move both selection and focus.
+        const nextIdx = isPrev ? (start - 1 + len) % len : (start + 1) % len;
+        const next = ITEMS[nextIdx];
+        onChange(next.id);
+        btnsRef.current[nextIdx]?.focus();
+    }, [
+        onChange,
+        value
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: ROOT_CLASS,
+        role: "radiogroup",
+        "aria-label": "Preview viewport",
+        onKeyDown: onKeyDown,
+        children: ITEMS.map((item, i)=>/*#__PURE__*/ _jsx(ViewportButton, {
+                item: item,
+                active: value === item.id,
+                onSelect: onChange,
+                buttonRef: (el)=>{
+                    btnsRef.current[i] = el;
+                }
+            }, item.id))
+    });
+};
+
+//# sourceMappingURL=ViewportToggle.js.map

package/dist/admin/ViewportToggle.js.map

@@ -0,0 +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"}

package/dist/admin/blocks/AddBlockDrawer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ClientBlock } from 'payload';
+export type AddBlockDrawerProps = {
+    slug: string;
+    blocks: ClientBlock[];
+    addRow: (index: number, blockType?: string) => void;
+    addRowIndex: number;
+};
+export declare const AddBlockDrawer: React.FC<AddBlockDrawerProps>;

package/dist/admin/blocks/AddBlockDrawer.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { BlocksDrawer } from '@payloadcms/ui';
+export const AddBlockDrawer = ({ slug, blocks, addRow, addRowIndex })=>/*#__PURE__*/ _jsx(BlocksDrawer, {
+        addRow: addRow,
+        addRowIndex: addRowIndex,
+        blocks: blocks,
+        drawerSlug: slug,
+        labels: {
+            singular: 'Block',
+            plural: 'Blocks'
+        }
+    });
+
+//# sourceMappingURL=AddBlockDrawer.js.map

package/dist/admin/blocks/AddBlockDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/blocks/AddBlockDrawer.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { BlocksDrawer } from '@payloadcms/ui'\nimport type { ClientBlock } from 'payload'\n\nexport type AddBlockDrawerProps = {\n  slug: string\n  blocks: ClientBlock[]\n  addRow: (index: number, blockType?: string) => void\n  addRowIndex: number\n}\n\nexport const AddBlockDrawer: React.FC<AddBlockDrawerProps> = ({\n  slug,\n  blocks,\n  addRow,\n  addRowIndex,\n}) => (\n  <BlocksDrawer\n    addRow={addRow}\n    addRowIndex={addRowIndex}\n    blocks={blocks}\n    drawerSlug={slug}\n    labels={{ singular: 'Block', plural: 'Blocks' }}\n  />\n)\n"],"names":["React","BlocksDrawer","AddBlockDrawer","slug","blocks","addRow","addRowIndex","drawerSlug","labels","singular","plural"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,SAASC,YAAY,QAAQ,iBAAgB;AAU7C,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,WAAW,EACZ,iBACC,KAACL;QACCI,QAAQA;QACRC,aAAaA;QACbF,QAAQA;QACRG,YAAYJ;QACZK,QAAQ;YAAEC,UAAU;YAASC,QAAQ;QAAS;OAEjD"}

package/dist/admin/blocks/BlockActionsToolbar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type BlockActionsToolbarProps = {
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    /** When false the toolbar renders nothing. */
+    canMutate: boolean;
+    /** When false the "Add below" button is disabled (no parent blocks list). */
+    canAddBelow: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDuplicate: () => void;
+    onAddBelow: () => void;
+    onDelete: () => void;
+};
+export declare const BlockActionsToolbar: React.FC<BlockActionsToolbarProps>;

package/dist/admin/blocks/BlockActionsToolbar.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef, useState } from 'react';
+import { ChevronDown, ChevronUp, CopyIcon, PlusIcon, TrashIcon } from '../icons';
+export const BlockActionsToolbar = ({ canMoveUp, canMoveDown, canMutate, canAddBelow, onMoveUp, onMoveDown, onDuplicate, onAddBelow, onDelete })=>{
+    // Roving tabindex per WAI-ARIA toolbar pattern: only one button is in
+    // the tab sequence; arrow keys move focus among siblings.
+    const [focusIdx, setFocusIdx] = useState(0);
+    const btnsRef = useRef([]);
+    const onKeyDown = useCallback((e)=>{
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') {
+            return;
+        }
+        e.preventDefault();
+        const buttons = btnsRef.current.filter((b)=>b !== null);
+        if (buttons.length === 0) return;
+        const current = buttons.findIndex((b)=>b === document.activeElement);
+        const start = current === -1 ? 0 : current;
+        let next = start;
+        if (e.key === 'ArrowLeft') next = (start - 1 + buttons.length) % buttons.length;
+        else if (e.key === 'ArrowRight') next = (start + 1) % buttons.length;
+        else if (e.key === 'Home') next = 0;
+        else if (e.key === 'End') next = buttons.length - 1;
+        buttons[next].focus();
+        const idx = btnsRef.current.indexOf(buttons[next]);
+        if (idx >= 0) setFocusIdx(idx);
+    }, []);
+    if (!canMutate) return null;
+    const setRef = (i)=>(el)=>{
+            btnsRef.current[i] = el;
+        };
+    const tabIndexFor = (i)=>i === focusIdx ? 0 : -1;
+    const onFocus = (i)=>()=>setFocusIdx(i);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "better-editor-tab__actions",
+        role: "toolbar",
+        "aria-label": "Block actions",
+        onKeyDown: onKeyDown,
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                ref: setRef(0),
+                tabIndex: tabIndexFor(0),
+                onFocus: onFocus(0),
+                className: "better-editor-tab__action",
+                onClick: onMoveUp,
+                disabled: !canMoveUp,
+                title: "Move up",
+                "aria-label": "Move block up",
+                children: /*#__PURE__*/ _jsx(ChevronUp, {})
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                ref: setRef(1),
+                tabIndex: tabIndexFor(1),
+                onFocus: onFocus(1),
+                className: "better-editor-tab__action",
+                onClick: onMoveDown,
+                disabled: !canMoveDown,
+                title: "Move down",
+                "aria-label": "Move block down",
+                children: /*#__PURE__*/ _jsx(ChevronDown, {})
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                ref: setRef(2),
+                tabIndex: tabIndexFor(2),
+                onFocus: onFocus(2),
+                className: "better-editor-tab__action",
+                onClick: onDuplicate,
+                title: "Duplicate",
+                "aria-label": "Duplicate block",
+                children: /*#__PURE__*/ _jsx(CopyIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                ref: setRef(3),
+                tabIndex: tabIndexFor(3),
+                onFocus: onFocus(3),
+                className: "better-editor-tab__action",
+                onClick: onAddBelow,
+                disabled: !canAddBelow,
+                title: "Add block below",
+                "aria-label": "Add block below",
+                children: /*#__PURE__*/ _jsx(PlusIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                ref: setRef(4),
+                tabIndex: tabIndexFor(4),
+                onFocus: onFocus(4),
+                className: "better-editor-tab__action better-editor-tab__action--danger",
+                onClick: onDelete,
+                title: "Delete",
+                "aria-label": "Delete block",
+                children: /*#__PURE__*/ _jsx(TrashIcon, {})
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=BlockActionsToolbar.js.map

package/dist/admin/blocks/BlockActionsToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/blocks/BlockActionsToolbar.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport { ChevronDown, ChevronUp, CopyIcon, PlusIcon, TrashIcon } from '../icons'\n\nexport type BlockActionsToolbarProps = {\n  canMoveUp: boolean\n  canMoveDown: boolean\n  /** When false the toolbar renders nothing. */\n  canMutate: boolean\n  /** When false the \"Add below\" button is disabled (no parent blocks list). */\n  canAddBelow: boolean\n  onMoveUp: () => void\n  onMoveDown: () => void\n  onDuplicate: () => void\n  onAddBelow: () => void\n  onDelete: () => void\n}\n\nexport const BlockActionsToolbar: React.FC<BlockActionsToolbarProps> = ({\n  canMoveUp,\n  canMoveDown,\n  canMutate,\n  canAddBelow,\n  onMoveUp,\n  onMoveDown,\n  onDuplicate,\n  onAddBelow,\n  onDelete,\n}) => {\n  // Roving tabindex per WAI-ARIA toolbar pattern: only one button is in\n  // the tab sequence; arrow keys move focus among siblings.\n  const [focusIdx, setFocusIdx] = useState(0)\n  const btnsRef = useRef<Array<HTMLButtonElement | null>>([])\n\n  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') {\n      return\n    }\n    e.preventDefault()\n    const buttons = btnsRef.current.filter((b): b is HTMLButtonElement => b !== null)\n    if (buttons.length === 0) return\n    const current = buttons.findIndex((b) => b === document.activeElement)\n    const start = current === -1 ? 0 : current\n    let next = start\n    if (e.key === 'ArrowLeft') next = (start - 1 + buttons.length) % buttons.length\n    else if (e.key === 'ArrowRight') next = (start + 1) % buttons.length\n    else if (e.key === 'Home') next = 0\n    else if (e.key === 'End') next = buttons.length - 1\n    buttons[next].focus()\n    const idx = btnsRef.current.indexOf(buttons[next])\n    if (idx >= 0) setFocusIdx(idx)\n  }, [])\n\n  if (!canMutate) return null\n\n  const setRef = (i: number) => (el: HTMLButtonElement | null) => {\n    btnsRef.current[i] = el\n  }\n  const tabIndexFor = (i: number) => (i === focusIdx ? 0 : -1)\n  const onFocus = (i: number) => () => setFocusIdx(i)\n\n  return (\n    <div\n      className=\"better-editor-tab__actions\"\n      role=\"toolbar\"\n      aria-label=\"Block actions\"\n      onKeyDown={onKeyDown}\n    >\n      <button\n        type=\"button\"\n        ref={setRef(0)}\n        tabIndex={tabIndexFor(0)}\n        onFocus={onFocus(0)}\n        className=\"better-editor-tab__action\"\n        onClick={onMoveUp}\n        disabled={!canMoveUp}\n        title=\"Move up\"\n        aria-label=\"Move block up\"\n      >\n        <ChevronUp />\n      </button>\n      <button\n        type=\"button\"\n        ref={setRef(1)}\n        tabIndex={tabIndexFor(1)}\n        onFocus={onFocus(1)}\n        className=\"better-editor-tab__action\"\n        onClick={onMoveDown}\n        disabled={!canMoveDown}\n        title=\"Move down\"\n        aria-label=\"Move block down\"\n      >\n        <ChevronDown />\n      </button>\n      <button\n        type=\"button\"\n        ref={setRef(2)}\n        tabIndex={tabIndexFor(2)}\n        onFocus={onFocus(2)}\n        className=\"better-editor-tab__action\"\n        onClick={onDuplicate}\n        title=\"Duplicate\"\n        aria-label=\"Duplicate block\"\n      >\n        <CopyIcon />\n      </button>\n      <button\n        type=\"button\"\n        ref={setRef(3)}\n        tabIndex={tabIndexFor(3)}\n        onFocus={onFocus(3)}\n        className=\"better-editor-tab__action\"\n        onClick={onAddBelow}\n        disabled={!canAddBelow}\n        title=\"Add block below\"\n        aria-label=\"Add block below\"\n      >\n        <PlusIcon />\n      </button>\n      <button\n        type=\"button\"\n        ref={setRef(4)}\n        tabIndex={tabIndexFor(4)}\n        onFocus={onFocus(4)}\n        className=\"better-editor-tab__action better-editor-tab__action--danger\"\n        onClick={onDelete}\n        title=\"Delete\"\n        aria-label=\"Delete block\"\n      >\n        <TrashIcon />\n      </button>\n    </div>\n  )\n}\n"],"names":["React","useCallback","useRef","useState","ChevronDown","ChevronUp","CopyIcon","PlusIcon","TrashIcon","BlockActionsToolbar","canMoveUp","canMoveDown","canMutate","canAddBelow","onMoveUp","onMoveDown","onDuplicate","onAddBelow","onDelete","focusIdx","setFocusIdx","btnsRef","onKeyDown","e","key","preventDefault","buttons","current","filter","b","length","findIndex","document","activeElement","start","next","focus","idx","indexOf","setRef","i","el","tabIndexFor","onFocus","div","className","role","aria-label","button","type","ref","tabIndex","onClick","disabled","title"],"mappings":"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"}

package/dist/admin/blocks/BlockEmptyState.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type BlockEmptyStateProps = {
+    canAdd: boolean;
+    onAddClick: () => void;
+};
+export declare const BlockEmptyState: React.FC<BlockEmptyStateProps>;

package/dist/admin/blocks/BlockEmptyState.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { PlusIcon } from '../icons';
+export const BlockEmptyState = ({ canAdd, onAddClick })=>/*#__PURE__*/ _jsxs("div", {
+        className: "better-editor-tab better-editor-tab--empty",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "better-editor-tab__empty-text",
+                children: "Select a block in the preview to edit its settings."
+            }),
+            canAdd ? /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                className: "better-editor-tab__add-block",
+                onClick: onAddClick,
+                children: [
+                    /*#__PURE__*/ _jsx(PlusIcon, {}),
+                    /*#__PURE__*/ _jsx("span", {
+                        children: "Add Block"
+                    })
+                ]
+            }) : null
+        ]
+    });
+
+//# sourceMappingURL=BlockEmptyState.js.map

package/dist/admin/blocks/BlockEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/blocks/BlockEmptyState.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { PlusIcon } from '../icons'\n\nexport type BlockEmptyStateProps = {\n  canAdd: boolean\n  onAddClick: () => void\n}\n\nexport const BlockEmptyState: React.FC<BlockEmptyStateProps> = ({ canAdd, onAddClick }) => (\n  <div className=\"better-editor-tab better-editor-tab--empty\">\n    <p className=\"better-editor-tab__empty-text\">\n      Select a block in the preview to edit its settings.\n    </p>\n    {canAdd ? (\n      <button\n        type=\"button\"\n        className=\"better-editor-tab__add-block\"\n        onClick={onAddClick}\n      >\n        <PlusIcon />\n        <span>Add Block</span>\n      </button>\n    ) : null}\n  </div>\n)\n"],"names":["React","PlusIcon","BlockEmptyState","canAdd","onAddClick","div","className","p","button","type","onClick","span"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,SAASC,QAAQ,QAAQ,WAAU;AAOnC,OAAO,MAAMC,kBAAkD,CAAC,EAAEC,MAAM,EAAEC,UAAU,EAAE,iBACpF,MAACC;QAAIC,WAAU;;0BACb,KAACC;gBAAED,WAAU;0BAAgC;;YAG5CH,uBACC,MAACK;gBACCC,MAAK;gBACLH,WAAU;gBACVI,SAASN;;kCAET,KAACH;kCACD,KAACU;kCAAK;;;iBAEN;;OAEP"}

package/dist/admin/blocks/BlockHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type BlockHeaderProps = {
+    blockType: string;
+    path: string;
+    onClearSelection: () => void;
+};
+export declare const BlockHeader: React.FC<BlockHeaderProps>;

package/dist/admin/blocks/BlockHeader.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export const BlockHeader = ({ blockType, path, onClearSelection })=>/*#__PURE__*/ _jsxs("div", {
+        className: "better-editor-tab__header",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "better-editor-tab__kicker",
+                        children: "Block"
+                    }),
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "better-editor-tab__heading",
+                        children: blockType
+                    }),
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "better-editor-tab__path",
+                        children: path
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                className: "better-editor-tab__clear",
+                onClick: onClearSelection,
+                children: "Deselect"
+            })
+        ]
+    });
+
+//# sourceMappingURL=BlockHeader.js.map

package/dist/admin/blocks/BlockHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/blocks/BlockHeader.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nexport type BlockHeaderProps = {\n  blockType: string\n  path: string\n  onClearSelection: () => void\n}\n\nexport const BlockHeader: React.FC<BlockHeaderProps> = ({\n  blockType,\n  path,\n  onClearSelection,\n}) => (\n  <div className=\"better-editor-tab__header\">\n    <div>\n      <span className=\"better-editor-tab__kicker\">Block</span>\n      <h3 className=\"better-editor-tab__heading\">{blockType}</h3>\n      <code className=\"better-editor-tab__path\">{path}</code>\n    </div>\n    <button\n      type=\"button\"\n      className=\"better-editor-tab__clear\"\n      onClick={onClearSelection}\n    >\n      Deselect\n    </button>\n  </div>\n)\n"],"names":["React","BlockHeader","blockType","path","onClearSelection","div","className","span","h3","code","button","type","onClick"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAQzB,OAAO,MAAMC,cAA0C,CAAC,EACtDC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EACjB,iBACC,MAACC;QAAIC,WAAU;;0BACb,MAACD;;kCACC,KAACE;wBAAKD,WAAU;kCAA4B;;kCAC5C,KAACE;wBAAGF,WAAU;kCAA8BJ;;kCAC5C,KAACO;wBAAKH,WAAU;kCAA2BH;;;;0BAE7C,KAACO;gBACCC,MAAK;gBACLL,WAAU;gBACVM,SAASR;0BACV;;;OAIJ"}