@gravity-ui/page-constructor 6.3.2-alpha.0 → 6.3.2-alpha.10

package/build/cjs/editor-v2/containers/Tree/DragContext.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragContextProvider = exports.DragContext = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('preview');
+// Context for drag and drop operations
+exports.DragContext = React.createContext({
+    draggedItem: null,
+    setDraggedItem: () => { },
+    previewRef: { current: null },
+    showPreview: () => { },
+    hidePreview: () => { },
+});
+// Component for the drag preview
+const DragPreview = React.forwardRef((_, ref) => {
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, className: b(), style: { display: 'none' } });
+});
+DragPreview.displayName = 'DragPreview';
+// Provider component for drag context
+const DragContextProvider = ({ children }) => {
+    const [draggedItem, setDraggedItem] = React.useState(null);
+    const previewRef = React.useRef(null);
+    const showPreview = React.useCallback((rect, item) => {
+        if (!previewRef.current)
+            return;
+        const previewEl = previewRef.current;
+        previewEl.style.display = 'block';
+        previewEl.style.width = `${rect.width}px`;
+        previewEl.style.top = `${rect.bottom}px`;
+        previewEl.style.left = `${rect.left}px`;
+        previewEl.innerHTML = `
+            <div class="${b('content')}">
+                <div class="${b('type')}">${item.type}</div>
+                ${item.treeTitle ? `<div class="${b('title')}">${item.treeTitle}</div>` : ''}
+            </div>
+        `;
+    }, []);
+    const hidePreview = React.useCallback(() => {
+        if (previewRef.current) {
+            previewRef.current.style.display = 'none';
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(exports.DragContext.Provider, { value: { draggedItem, setDraggedItem, previewRef, showPreview, hidePreview }, children: [children, (0, jsx_runtime_1.jsx)(DragPreview, { ref: previewRef })] }));
+};
+exports.DragContextProvider = DragContextProvider;
+//# sourceMappingURL=DragContext.js.map

package/build/cjs/editor-v2/containers/Tree/DragContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragContext.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/DragContext.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAC/B,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,SAAS,CAAC,CAAC;AAQ9B,uCAAuC;AAC1B,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAM3C;IACC,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,UAAU,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;IAC3B,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;CACxB,CAAC,CAAC;AAEH,iCAAiC;AACjC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;IAC5D,OAAO,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,CAAC;AACvE,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,sCAAsC;AAC/B,MAAM,mBAAmB,GAA0C,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE;IACrF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAC5E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAa,EAAE,IAAc,EAAE,EAAE;QACpE,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAEhC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC;QACrC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAClC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC1C,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;QACzC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAExC,SAAS,CAAC,SAAS,GAAG;0BACJ,CAAC,CAAC,SAAS,CAAC;8BACR,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI;kBACnC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE;;SAEnF,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACrB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC9C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,wBAAC,mBAAW,CAAC,QAAQ,IACjB,KAAK,EAAE,EAAC,WAAW,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAC,aAEzE,QAAQ,EACT,uBAAC,WAAW,IAAC,GAAG,EAAE,UAAU,GAAI,IACb,CAC1B,CAAC;AACN,CAAC,CAAC;AAnCW,QAAA,mBAAmB,uBAmC9B","sourcesContent":["import * as React from 'react';\nimport {editorCn} from '../../utils/cn';\n\nimport './DragContext.scss';\n\nconst b = editorCn('preview');\n\nexport interface DragItem {\n    path: number[];\n    type: string;\n    treeTitle?: string;\n}\n\n// Context for drag and drop operations\nexport const DragContext = React.createContext<{\n    draggedItem: DragItem | null;\n    setDraggedItem: React.Dispatch<React.SetStateAction<DragItem | null>>;\n    previewRef: React.RefObject<HTMLDivElement>;\n    showPreview: (rect: DOMRect, item: DragItem) => void;\n    hidePreview: () => void;\n}>({\n    draggedItem: null,\n    setDraggedItem: () => {},\n    previewRef: {current: null},\n    showPreview: () => {},\n    hidePreview: () => {},\n});\n\n// Component for the drag preview\nconst DragPreview = React.forwardRef<HTMLDivElement>((_, ref) => {\n    return <div ref={ref} className={b()} style={{display: 'none'}} />;\n});\n\nDragPreview.displayName = 'DragPreview';\n\n// Provider component for drag context\nexport const DragContextProvider: React.FC<React.PropsWithChildren<{}>> = ({children}) => {\n    const [draggedItem, setDraggedItem] = React.useState<DragItem | null>(null);\n    const previewRef = React.useRef<HTMLDivElement>(null);\n\n    const showPreview = React.useCallback((rect: DOMRect, item: DragItem) => {\n        if (!previewRef.current) return;\n\n        const previewEl = previewRef.current;\n        previewEl.style.display = 'block';\n        previewEl.style.width = `${rect.width}px`;\n        previewEl.style.top = `${rect.bottom}px`;\n        previewEl.style.left = `${rect.left}px`;\n\n        previewEl.innerHTML = `\n            <div class=\"${b('content')}\">\n                <div class=\"${b('type')}\">${item.type}</div>\n                ${item.treeTitle ? `<div class=\"${b('title')}\">${item.treeTitle}</div>` : ''}\n            </div>\n        `;\n    }, []);\n\n    const hidePreview = React.useCallback(() => {\n        if (previewRef.current) {\n            previewRef.current.style.display = 'none';\n        }\n    }, []);\n\n    return (\n        <DragContext.Provider\n            value={{draggedItem, setDraggedItem, previewRef, showPreview, hidePreview}}\n        >\n            {children}\n            <DragPreview ref={previewRef} />\n        </DragContext.Provider>\n    );\n};\n"]}

package/build/cjs/editor-v2/containers/Tree/Tree.css

@@ -0,0 +1,10 @@
+.pceditor-tree {
+  padding: 12px;
+  position: relative;
+}
+.pceditor-tree__head {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/build/cjs/editor-v2/containers/Tree/Tree.d.ts

@@ -0,0 +1,5 @@
+import { ClassNameProps } from "../../../models/index.js";
+interface TreeProps extends ClassNameProps {
+}
+declare const Tree: ({ className }: TreeProps) => import("react/jsx-runtime").JSX.Element;
+export default Tree;

package/build/cjs/editor-v2/containers/Tree/Tree.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn.js");
+const DragContext_1 = require("./DragContext.js");
+const TreeContent_1 = require("./TreeContent.js");
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const uikit_1 = require("@gravity-ui/uikit");
+const icons_1 = require("@gravity-ui/icons");
+const utils_1 = require("../../utils/index.js");
+const b = (0, cn_1.editorCn)('tree');
+const generateTree = (items) => {
+    return items.map((item) => {
+        let children;
+        if ('children' in item && item.children?.length) {
+            children = generateTree(item.children);
+        }
+        return {
+            type: item.type,
+            children,
+            treeTitle: (0, utils_1.getItemTitle)(item),
+        };
+    });
+};
+const Tree = ({ className }) => {
+    const { content, resetBlocks, selectedBlock, duplicateBlock, deleteBlock, setSelectedBlock, reorderBlock, } = (0, useMainEditorStore_1.useMainEditorStore)();
+    const selectedBlockPath = React.useMemo(() => {
+        return (0, utils_1.generateChildrenPathFromArray)(selectedBlock || []);
+    }, [selectedBlock]);
+    return ((0, jsx_runtime_1.jsx)(DragContext_1.DragContextProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('head'), children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { view: "outlined-danger", onClick: () => resetBlocks(), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin }), "Clear all"] }) }), (0, jsx_runtime_1.jsx)(TreeContent_1.TreeContent, { reorderBlock: reorderBlock, onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock, blockTree: generateTree(content.blocks), selectedBlockPath: selectedBlockPath })] }) }));
+};
+exports.default = Tree;
+//# sourceMappingURL=Tree.js.map

package/build/cjs/editor-v2/containers/Tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/Tree.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,0CAAwC;AACxC,kDAAkD;AAClD,kDAAoD;AAEpD,0EAAkE;AAClE,6CAA+C;AAC/C,6CAA2C;AAC3C,gDAAwE;AAKxE,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,MAAM,CAAC,CAAC;AAE3B,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAc,EAAE;IACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,IAAI,QAAQ,CAAC;QAEb,IAAI,UAAU,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;YAC9C,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO;YACH,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ;YACR,SAAS,EAAE,IAAA,oBAAY,EAAC,IAAI,CAAC;SAChC,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAIF,MAAM,IAAI,GAAG,CAAC,EAAC,SAAS,EAAY,EAAE,EAAE;IACpC,MAAM,EACF,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,GACf,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAEzB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,IAAA,qCAA6B,EAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,uBAAC,iCAAmB,cAChB,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,wBAAC,cAAM,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,aACvD,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAQ,GAAI,iBAEnB,GACP,EACN,uBAAC,yBAAW,IACR,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,EACvC,iBAAiB,EAAE,iBAAiB,GACtC,IACA,GACY,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport {DragContextProvider} from './DragContext';\nimport {TreeContent, TreeItem} from './TreeContent';\n\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport {TrashBin} from '@gravity-ui/icons';\nimport {generateChildrenPathFromArray, getItemTitle} from '../../utils';\nimport {ClassNameProps} from '../../../models';\n\nimport './Tree.scss';\n\nconst b = editorCn('tree');\n\nconst generateTree = (items: TreeItem[]): TreeItem[] => {\n    return items.map((item) => {\n        let children;\n\n        if ('children' in item && item.children?.length) {\n            children = generateTree(item.children);\n        }\n\n        return {\n            type: item.type,\n            children,\n            treeTitle: getItemTitle(item),\n        };\n    });\n};\n\ninterface TreeProps extends ClassNameProps {}\n\nconst Tree = ({className}: TreeProps) => {\n    const {\n        content,\n        resetBlocks,\n        selectedBlock,\n        duplicateBlock,\n        deleteBlock,\n        setSelectedBlock,\n        reorderBlock,\n    } = useMainEditorStore();\n\n    const selectedBlockPath = React.useMemo(() => {\n        return generateChildrenPathFromArray(selectedBlock || []);\n    }, [selectedBlock]);\n\n    return (\n        <DragContextProvider>\n            <div className={b(null, className)}>\n                <div className={b('head')}>\n                    <Button view=\"outlined-danger\" onClick={() => resetBlocks()}>\n                        <Icon data={TrashBin} />\n                        Clear all\n                    </Button>\n                </div>\n                <TreeContent\n                    reorderBlock={reorderBlock}\n                    onCopy={duplicateBlock}\n                    onDelete={deleteBlock}\n                    onSelect={setSelectedBlock}\n                    blockTree={generateTree(content.blocks)}\n                    selectedBlockPath={selectedBlockPath}\n                />\n            </div>\n        </DragContextProvider>\n    );\n};\n\nexport default Tree;\n"]}

package/build/cjs/editor-v2/containers/Tree/TreeContent.css

@@ -0,0 +1,12 @@
+.pceditor-tree-content {
+  position: relative;
+}
+.pceditor-tree-content__drop-zone {
+  height: 8px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+.pceditor-tree-content__children {
+  margin-top: 8px;
+}

package/build/cjs/editor-v2/containers/Tree/TreeContent.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface TreeContentProps {
+    blockTree: TreeItem[];
+    selectedBlockPath: string;
+    reorderBlock(selectedBlock: number[], destination: number[], position?: 'prepend' | 'append'): void;
+    onCopy(path: number[]): void;
+    onDelete(path: number[]): void;
+    onSelect(path: number[]): void;
+}
+export type TreeItem = {
+    type: string;
+    children?: TreeItem[];
+    treeTitle?: string;
+};
+export declare const TreeContent: ({ blockTree, selectedBlockPath, reorderBlock, onCopy, onDelete, onSelect, }: React.PropsWithChildren<TreeContentProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/editor-v2/containers/Tree/TreeContent.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeContent = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../utils/index.js");
+const DragContext_1 = require("./DragContext.js");
+const TreeItem_1 = require("./TreeItem.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('tree-content');
+const TreeContent = ({ blockTree, selectedBlockPath, reorderBlock, onCopy, onDelete, onSelect, }) => {
+    const { draggedItem, setDraggedItem, hidePreview, showPreview } = React.useContext(DragContext_1.DragContext);
+    const handleFirstPositionDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            const data = e.dataTransfer.getData('application/json');
+            if (data) {
+                const dragItem = JSON.parse(data);
+                // Reorder to the first position by using [0] as destination
+                // and 'prepend' as position
+                reorderBlock(dragItem.path, [0], 'prepend');
+                // Reset drag context
+                setDraggedItem(null);
+                hidePreview();
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error parsing drag data:', error);
+        }
+    }, [reorderBlock, hidePreview, setDraggedItem]);
+    const handleDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign
+        e.dataTransfer.dropEffect = 'move';
+        // Show preview element at this position
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (draggedItem) {
+            showPreview(rect, draggedItem);
+        }
+    }, [draggedItem, showPreview]);
+    const renderTree = (items, parentPathArray) => {
+        return items.map(({ type, treeTitle, children }, index) => {
+            let blockPathArray;
+            if (parentPathArray) {
+                blockPathArray = [...parentPathArray, index];
+            }
+            else {
+                blockPathArray = [index];
+            }
+            const blockPath = (0, utils_1.generateChildrenPathFromArray)(blockPathArray);
+            return ((0, jsx_runtime_1.jsx)(TreeItem_1.Item, { type: type, treeTitle: treeTitle, onCopy: onCopy, onDelete: onDelete, onSelect: onSelect, onReorder: reorderBlock, path: blockPathArray, selected: selectedBlockPath === blockPath, children: children && ((0, jsx_runtime_1.jsx)("div", { className: b('children'), children: renderTree(children, blockPathArray) })) }, index));
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)("div", { className: b('drop-zone'), onDragOver: handleDragOver, onDragLeave: hidePreview, onDrop: handleFirstPositionDrop }), (0, jsx_runtime_1.jsx)("div", { children: renderTree(blockTree) })] }));
+};
+exports.TreeContent = TreeContent;
+//# sourceMappingURL=TreeContent.js.map

package/build/cjs/editor-v2/containers/Tree/TreeContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeContent.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/TreeContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {DragContext, DragItem} from './DragContext';\nimport {Item} from './TreeItem';\nimport {editorCn} from '../../utils/cn';\n\nimport './TreeContent.scss';\n\nconst b = editorCn('tree-content');\n\ninterface TreeContentProps {\n    blockTree: TreeItem[];\n    selectedBlockPath: string;\n    reorderBlock(\n        selectedBlock: number[],\n        destination: number[],\n        position?: 'prepend' | 'append',\n    ): void;\n    onCopy(path: number[]): void;\n    onDelete(path: number[]): void;\n    onSelect(path: number[]): void;\n}\n\nexport type TreeItem = {\n    type: string;\n    children?: TreeItem[];\n    treeTitle?: string;\n};\n\nexport const TreeContent = ({\n    blockTree,\n    selectedBlockPath,\n    reorderBlock,\n    onCopy,\n    onDelete,\n    onSelect,\n}: React.PropsWithChildren<TreeContentProps>) => {\n    const {draggedItem, setDraggedItem, hidePreview, showPreview} = React.useContext(DragContext);\n\n    const handleFirstPositionDrop = React.useCallback(\n        (e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            try {\n                const data = e.dataTransfer.getData('application/json');\n                if (data) {\n                    const dragItem: DragItem = JSON.parse(data);\n                    // Reorder to the first position by using [0] as destination\n                    // and 'prepend' as position\n                    reorderBlock(dragItem.path, [0], 'prepend');\n\n                    // Reset drag context\n                    setDraggedItem(null);\n                    hidePreview();\n                }\n            } catch (error) {\n                // eslint-disable-next-line no-console\n                console.error('Error parsing drag data:', error);\n            }\n        },\n        [reorderBlock, hidePreview, setDraggedItem],\n    );\n\n    const handleDragOver = React.useCallback(\n        (e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n            // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign\n            e.dataTransfer.dropEffect = 'move';\n\n            // Show preview element at this position\n            const rect = e.currentTarget.getBoundingClientRect();\n            if (draggedItem) {\n                showPreview(rect, draggedItem);\n            }\n        },\n        [draggedItem, showPreview],\n    );\n\n    const renderTree = (items: TreeItem[], parentPathArray?: number[]) => {\n        return items.map(({type, treeTitle, children}, index) => {\n            let blockPathArray: number[];\n            if (parentPathArray) {\n                blockPathArray = [...parentPathArray, index];\n            } else {\n                blockPathArray = [index];\n            }\n            const blockPath = generateChildrenPathFromArray(blockPathArray);\n\n            return (\n                <Item\n                    type={type}\n                    treeTitle={treeTitle}\n                    onCopy={onCopy}\n                    onDelete={onDelete}\n                    onSelect={onSelect}\n                    onReorder={reorderBlock}\n                    key={index}\n                    path={blockPathArray}\n                    selected={selectedBlockPath === blockPath}\n                >\n                    {children && (\n                        <div className={b('children')}>{renderTree(children, blockPathArray)}</div>\n                    )}\n                </Item>\n            );\n        });\n    };\n\n    return (\n        <div className={b()}>\n            <div\n                className={b('drop-zone')}\n                onDragOver={handleDragOver}\n                onDragLeave={hidePreview}\n                onDrop={handleFirstPositionDrop}\n            ></div>\n            <div>{renderTree(blockTree)}</div>\n        </div>\n    );\n};\n"]}

package/build/cjs/editor-v2/containers/Tree/TreeItem.css

@@ -0,0 +1,50 @@
+.pceditor-tree-item {
+  padding: 8px;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+.pceditor-tree-item_selected {
+  border: 1.5px var(--g-color-line-brand) solid;
+}
+.pceditor-tree-item_dragging {
+  opacity: 0.5;
+}
+.pceditor-tree-item_drag-over {
+  border: 1.5px var(--g-color-line-generic) dashed;
+}
+.pceditor-tree-item:last-child {
+  margin-bottom: 0;
+}
+.pceditor-tree-item__main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.pceditor-tree-item__main:hover .pceditor-tree-item__buttons {
+  display: flex;
+}
+.pceditor-tree-item__text {
+  flex: 1 1 auto;
+  min-width: 1px;
+}
+.pceditor-tree-item__buttons {
+  flex: 0 0 auto;
+  flex-direction: row;
+  gap: 4px;
+  display: none;
+}
+.pceditor-tree-item__type {
+  color: var(--g-color-text-secondary);
+}
+.pceditor-tree-item__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pceditor-tree-item__children-drop-zone {
+  height: 8px;
+  margin-top: 8px;
+  margin-bottom: 0;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}

package/build/cjs/editor-v2/containers/Tree/TreeItem.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface ItemProps {
+    type: string;
+    treeTitle?: string;
+    path: number[];
+    selected: boolean;
+    onCopy(path: number[]): void;
+    onDelete(path: number[]): void;
+    onSelect(path: number[]): void;
+    onReorder(sourcePath: number[], destinationPath: number[], position?: 'prepend' | 'append'): void;
+    children?: React.ReactNode;
+}
+export declare const Item: ({ type, children, treeTitle, path, selected, onCopy, onDelete, onSelect, onReorder, }: ItemProps) => import("react/jsx-runtime").JSX.Element;

package/build/cjs/editor-v2/containers/Tree/TreeItem.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn.js");
+const DragContext_1 = require("./DragContext.js");
+const b = (0, cn_1.editorCn)('tree-item');
+const Item = ({ type, children, treeTitle, path, selected, onCopy, onDelete, onSelect, onReorder, }) => {
+    const { draggedItem, setDraggedItem, showPreview, hidePreview } = React.useContext(DragContext_1.DragContext);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const [mouseDownPos, setMouseDownPos] = React.useState(null);
+    const itemRef = React.useRef(null);
+    // Scroll into view when selected
+    React.useEffect(() => {
+        if (selected && itemRef.current) {
+            itemRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+        }
+    }, [selected]);
+    const handleCopy = React.useCallback(() => {
+        onCopy(path);
+    }, [onCopy, path]);
+    const handleDelete = React.useCallback(() => {
+        onDelete(path);
+    }, [onDelete, path]);
+    const handleMouseDown = React.useCallback((e) => {
+        setMouseDownPos({ x: e.clientX, y: e.clientY });
+    }, []);
+    const handleMouseUp = React.useCallback((e) => {
+        if (mouseDownPos) {
+            // Check if the mouse has moved significantly (dragging) or just a click
+            const dx = Math.abs(e.clientX - mouseDownPos.x);
+            const dy = Math.abs(e.clientY - mouseDownPos.y);
+            // If the mouse hasn't moved much, consider it a click for selection
+            if (dx < 5 && dy < 5) {
+                e.stopPropagation();
+                onSelect(path);
+            }
+        }
+        setMouseDownPos(null);
+    }, [mouseDownPos, onSelect, path]);
+    const handleDragStart = React.useCallback((e) => {
+        e.stopPropagation();
+        const dragData = {
+            path,
+            type,
+            treeTitle,
+        };
+        e.dataTransfer.setData('application/json', JSON.stringify(dragData));
+        // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign
+        e.dataTransfer.effectAllowed = 'move';
+        setIsDragging(true);
+        // Update drag context
+        setDraggedItem(dragData);
+    }, [path, type, treeTitle, setDraggedItem]);
+    const handleDragEnd = React.useCallback(() => {
+        setIsDragging(false);
+        // Reset drag context
+        setDraggedItem(null);
+        hidePreview();
+    }, [setDraggedItem, hidePreview]);
+    const handleDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign
+        e.dataTransfer.dropEffect = 'move';
+        setIsDragOver(true);
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (draggedItem) {
+            showPreview(rect, draggedItem);
+        }
+    }, [showPreview, draggedItem]);
+    const handleDragLeave = React.useCallback(() => {
+        setIsDragOver(false);
+        hidePreview();
+    }, [hidePreview]);
+    const handleDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        try {
+            const data = e.dataTransfer.getData('application/json');
+            if (data) {
+                const dragItem = JSON.parse(data);
+                if (dragItem.path.join(',') !== path.join(',')) {
+                    onReorder(dragItem.path, path);
+                    // Reset drag context
+                    setDraggedItem(null);
+                    hidePreview();
+                }
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error parsing drag data:', error);
+        }
+    }, [onReorder, path, setDraggedItem, hidePreview]);
+    const handleChildrenFirstPositionDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            const data = e.dataTransfer.getData('application/json');
+            if (data) {
+                const dragItem = JSON.parse(data);
+                // Create a path for the first child position
+                const firstChildPath = [...path, 0];
+                // Reorder to the first position within children
+                onReorder(dragItem.path, firstChildPath, 'prepend');
+                // Reset drag context
+                setDraggedItem(null);
+                hidePreview();
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error parsing drag data:', error);
+        }
+    }, [onReorder, path, setDraggedItem, hidePreview]);
+    const handleDropZoneDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign
+        e.dataTransfer.dropEffect = 'move';
+        // Show preview element at this position
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (draggedItem) {
+            showPreview(rect, draggedItem);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { ref: itemRef, className: b({
+            selected,
+            dragging: isDragging,
+            'drag-over': isDragOver,
+        }), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('main'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('text'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('type'), children: type }), (0, jsx_runtime_1.jsx)("div", { className: b('title'), children: treeTitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: b('buttons'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "xs", onClick: handleCopy, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 12, data: icons_1.Copy }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "xs", onClick: handleDelete, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 12, data: icons_1.TrashBin }) })] })] }), children && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: b('children-drop-zone'), onDragOver: handleDropZoneDragOver, onDragLeave: hidePreview, onDrop: handleChildrenFirstPositionDrop }), children] }))] }));
+};
+exports.Item = Item;
+//# sourceMappingURL=TreeItem.js.map

package/build/cjs/editor-v2/containers/Tree/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/TreeItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Copy, TrashBin} from '@gravity-ui/icons';\nimport {Button, Card, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport {DragContext, DragItem} from './DragContext';\n\nimport './TreeItem.scss';\n\nconst b = editorCn('tree-item');\n\nexport interface ItemProps {\n    type: string;\n    treeTitle?: string;\n    path: number[];\n    selected: boolean;\n    onCopy(path: number[]): void;\n    onDelete(path: number[]): void;\n    onSelect(path: number[]): void;\n    onReorder(\n        sourcePath: number[],\n        destinationPath: number[],\n        position?: 'prepend' | 'append',\n    ): void;\n    children?: React.ReactNode;\n}\n\nexport const Item = ({\n    type,\n    children,\n    treeTitle,\n    path,\n    selected,\n    onCopy,\n    onDelete,\n    onSelect,\n    onReorder,\n}: ItemProps) => {\n    const {draggedItem, setDraggedItem, showPreview, hidePreview} = React.useContext(DragContext);\n    const [isDragging, setIsDragging] = React.useState(false);\n    const [isDragOver, setIsDragOver] = React.useState(false);\n    const [mouseDownPos, setMouseDownPos] = React.useState<{x: number; y: number} | null>(null);\n    const itemRef = React.useRef<HTMLDivElement>(null);\n\n    // Scroll into view when selected\n    React.useEffect(() => {\n        if (selected && itemRef.current) {\n            itemRef.current.scrollIntoView({\n                behavior: 'smooth',\n                block: 'nearest',\n            });\n        }\n    }, [selected]);\n\n    const handleCopy = React.useCallback(() => {\n        onCopy(path);\n    }, [onCopy, path]);\n\n    const handleDelete = React.useCallback(() => {\n        onDelete(path);\n    }, [onDelete, path]);\n\n    const handleMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        setMouseDownPos({x: e.clientX, y: e.clientY});\n    }, []);\n\n    const handleMouseUp = React.useCallback(\n        (e: React.MouseEvent<HTMLDivElement>) => {\n            if (mouseDownPos) {\n                // Check if the mouse has moved significantly (dragging) or just a click\n                const dx = Math.abs(e.clientX - mouseDownPos.x);\n                const dy = Math.abs(e.clientY - mouseDownPos.y);\n\n                // If the mouse hasn't moved much, consider it a click for selection\n                if (dx < 5 && dy < 5) {\n                    e.stopPropagation();\n                    onSelect(path);\n                }\n            }\n            setMouseDownPos(null);\n        },\n        [mouseDownPos, onSelect, path],\n    );\n\n    const handleDragStart = React.useCallback(\n        (e: React.DragEvent<HTMLDivElement>) => {\n            e.stopPropagation();\n            const dragData: DragItem = {\n                path,\n                type,\n                treeTitle,\n            };\n            e.dataTransfer.setData('application/json', JSON.stringify(dragData));\n            // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign\n            e.dataTransfer.effectAllowed = 'move';\n            setIsDragging(true);\n\n            // Update drag context\n            setDraggedItem(dragData);\n        },\n        [path, type, treeTitle, setDraggedItem],\n    );\n\n    const handleDragEnd = React.useCallback(() => {\n        setIsDragging(false);\n\n        // Reset drag context\n        setDraggedItem(null);\n        hidePreview();\n    }, [setDraggedItem, hidePreview]);\n\n    const handleDragOver = React.useCallback(\n        (e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n            // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign\n            e.dataTransfer.dropEffect = 'move';\n            setIsDragOver(true);\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            if (draggedItem) {\n                showPreview(rect, draggedItem);\n            }\n        },\n        [showPreview, draggedItem],\n    );\n\n    const handleDragLeave = React.useCallback(() => {\n        setIsDragOver(false);\n        hidePreview();\n    }, [hidePreview]);\n\n    const handleDrop = React.useCallback(\n        (e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n            setIsDragOver(false);\n\n            try {\n                const data = e.dataTransfer.getData('application/json');\n                if (data) {\n                    const dragItem: DragItem = JSON.parse(data);\n                    if (dragItem.path.join(',') !== path.join(',')) {\n                        onReorder(dragItem.path, path);\n\n                        // Reset drag context\n                        setDraggedItem(null);\n                        hidePreview();\n                    }\n                }\n            } catch (error) {\n                // eslint-disable-next-line no-console\n                console.error('Error parsing drag data:', error);\n            }\n        },\n        [onReorder, path, setDraggedItem, hidePreview],\n    );\n\n    const handleChildrenFirstPositionDrop = React.useCallback(\n        (e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            try {\n                const data = e.dataTransfer.getData('application/json');\n                if (data) {\n                    const dragItem: DragItem = JSON.parse(data);\n                    // Create a path for the first child position\n                    const firstChildPath = [...path, 0];\n                    // Reorder to the first position within children\n                    onReorder(dragItem.path, firstChildPath, 'prepend');\n\n                    // Reset drag context\n                    setDraggedItem(null);\n                    hidePreview();\n                }\n            } catch (error) {\n                // eslint-disable-next-line no-console\n                console.error('Error parsing drag data:', error);\n            }\n        },\n        [onReorder, path, setDraggedItem, hidePreview],\n    );\n\n    const handleDropZoneDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        e.stopPropagation();\n        // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign, no-param-reassign\n        e.dataTransfer.dropEffect = 'move';\n\n        // Show preview element at this position\n        const rect = e.currentTarget.getBoundingClientRect();\n        if (draggedItem) {\n            showPreview(rect, draggedItem);\n        }\n    };\n\n    return (\n        <Card\n            ref={itemRef}\n            className={b({\n                selected,\n                dragging: isDragging,\n                'drag-over': isDragOver,\n            })}\n            onMouseDown={handleMouseDown as unknown as React.MouseEventHandler<'div'>}\n            onMouseUp={handleMouseUp as unknown as React.MouseEventHandler<'div'>}\n            draggable\n            onDragStart={handleDragStart as unknown as React.DragEventHandler<'div'>}\n            onDragEnd={handleDragEnd}\n            onDragOver={handleDragOver as unknown as React.DragEventHandler<'div'>}\n            onDragLeave={handleDragLeave}\n            onDrop={handleDrop as unknown as React.DragEventHandler<'div'>}\n        >\n            <div className={b('main')}>\n                <div className={b('text')}>\n                    <div className={b('type')}>{type}</div>\n                    <div className={b('title')}>{treeTitle}</div>\n                </div>\n                <div className={b('buttons')}>\n                    <Button view=\"flat\" size=\"xs\" onClick={handleCopy}>\n                        <Icon size={12} data={Copy} />\n                    </Button>\n                    <Button view=\"flat\" size=\"xs\" onClick={handleDelete}>\n                        <Icon size={12} data={TrashBin} />\n                    </Button>\n                </div>\n            </div>\n            {children && (\n                <React.Fragment>\n                    <div\n                        className={b('children-drop-zone')}\n                        onDragOver={handleDropZoneDragOver}\n                        onDragLeave={hidePreview}\n                        onDrop={handleChildrenFirstPositionDrop}\n                    ></div>\n                    {children}\n                </React.Fragment>\n            )}\n        </Card>\n    );\n};\n"]}

package/build/cjs/editor-v2/containers/Tree/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Tree.js";
+export * from "./DragContext.js";
+export * from "./TreeItem.js";
+export * from "./TreeContent.js";

package/build/cjs/editor-v2/containers/Tree/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var Tree_1 = require("./Tree.js");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(Tree_1).default; } });
+tslib_1.__exportStar(require("./DragContext.js"), exports);
+tslib_1.__exportStar(require("./TreeItem.js"), exports);
+tslib_1.__exportStar(require("./TreeContent.js"), exports);
+//# sourceMappingURL=index.js.map

package/build/cjs/editor-v2/containers/Tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/index.ts"],"names":[],"mappings":";;;;AAAA,kCAA+B;AAAvB,wHAAA,OAAO,OAAA;AACf,2DAA8B;AAC9B,wDAA2B;AAC3B,2DAA8B","sourcesContent":["export {default} from './Tree';\nexport * from './DragContext';\nexport * from './TreeItem';\nexport * from './TreeContent';\n"]}

package/build/cjs/editor-v2/containers/ViewSwitches/ViewSwitches.css

@@ -0,0 +1,13 @@
+.pceditor-view-switches {
+  padding: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+.pceditor-view-switches__zoom {
+  display: flex;
+  gap: 4px;
+}
+.pceditor-view-switches__zoom-select {
+  min-width: 80px;
+}

package/build/cjs/editor-v2/containers/ViewSwitches/ViewSwitches.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.NamedExoticComponent<{}>;
+export default _default;

package/build/cjs/editor-v2/containers/ViewSwitches/ViewSwitches.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const constants_1 = require("../../constants.js");
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('view-switches');
+/**
+ * Available device viewport options
+ * - Desktop: 100% width
+ * - Tablet: 768px width
+ * - Mobile: 375px width
+ */
+const DEVICE_OPTIONS = [
+    {
+        label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Display }),
+        value: '100%',
+        ariaLabel: 'Desktop view',
+    },
+    {
+        label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Smartphone }),
+        value: '768px',
+        ariaLabel: 'Tablet view',
+    },
+    {
+        label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { width: 14, data: icons_1.Smartphone }),
+        value: '375px',
+        ariaLabel: 'Mobile view',
+    },
+];
+const ViewSwitches = () => {
+    const { zoom, setZoom, decreaseZoom, increaseZoom, deviceWidth, setDeviceWidth, togglePreviewMode, } = (0, useMainEditorStore_1.useMainEditorStore)();
+    // Memoize zoom options to prevent unnecessary recalculations
+    const zoomOptions = React.useMemo(() => constants_1.ZOOM_STEPS.map((step) => ({
+        value: String(step),
+        content: `${step}%`,
+    })), []);
+    // Memoize current zoom value for Select component
+    const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);
+    // Create stable callback for zoom updates
+    const handleZoomUpdate = React.useCallback((value) => {
+        const newZoom = Number(Array.isArray(value) ? value[0] : value);
+        if (!isNaN(newZoom) && constants_1.ZOOM_STEPS.includes(newZoom)) {
+            setZoom(newZoom);
+        }
+    }, [setZoom]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.SquareDashed }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...constants_1.ZOOM_STEPS), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Minus }) }), (0, jsx_runtime_1.jsx)(uikit_1.Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...constants_1.ZOOM_STEPS), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) })] })] }));
+};
+exports.default = React.memo(ViewSwitches);
+//# sourceMappingURL=ViewSwitches.js.map

package/build/cjs/editor-v2/containers/ViewSwitches/ViewSwitches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Display, Minus, Plus, Smartphone, SquareDashed} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {ZOOM_STEPS} from '../../constants';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './ViewSwitches.scss';\n\nconst b = editorCn('view-switches');\n\n/**\n * Device option type definition\n */\ninterface DeviceOption {\n    /** React node to display as the option label */\n    label: React.ReactNode;\n    /** Device width value (e.g., '100%', '768px') */\n    value: string;\n    /** Descriptive name for accessibility */\n    ariaLabel: string;\n}\n\n/**\n * Available device viewport options\n * - Desktop: 100% width\n * - Tablet: 768px width\n * - Mobile: 375px width\n */\nconst DEVICE_OPTIONS: DeviceOption[] = [\n    {\n        label: <Icon data={Display} />,\n        value: '100%',\n        ariaLabel: 'Desktop view',\n    },\n    {\n        label: <Icon data={Smartphone} />,\n        value: '768px',\n        ariaLabel: 'Tablet view',\n    },\n    {\n        label: <Icon width={14} data={Smartphone} />,\n        value: '375px',\n        ariaLabel: 'Mobile view',\n    },\n];\n\nconst ViewSwitches: React.FC = () => {\n    const {\n        zoom,\n        setZoom,\n        decreaseZoom,\n        increaseZoom,\n        deviceWidth,\n        setDeviceWidth,\n        togglePreviewMode,\n    } = useMainEditorStore();\n\n    // Memoize zoom options to prevent unnecessary recalculations\n    const zoomOptions = React.useMemo(\n        () =>\n            ZOOM_STEPS.map((step) => ({\n                value: String(step),\n                content: `${step}%`,\n            })),\n        [],\n    );\n\n    // Memoize current zoom value for Select component\n    const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);\n\n    // Create stable callback for zoom updates\n    const handleZoomUpdate = React.useCallback(\n        (value: string | string[]) => {\n            const newZoom = Number(Array.isArray(value) ? value[0] : value);\n            if (!isNaN(newZoom) && ZOOM_STEPS.includes(newZoom)) {\n                setZoom(newZoom);\n            }\n        },\n        [setZoom],\n    );\n\n    return (\n        <div className={b()} role=\"toolbar\" aria-label=\"View controls\">\n            <SegmentedRadioGroup\n                value={deviceWidth}\n                onUpdate={setDeviceWidth}\n                aria-label=\"Device viewport selector\"\n            >\n                {DEVICE_OPTIONS.map(({value, label, ariaLabel}) => (\n                    <SegmentedRadioGroup.Option key={value} value={value} aria-label={ariaLabel}>\n                        {label}\n                    </SegmentedRadioGroup.Option>\n                ))}\n            </SegmentedRadioGroup>\n\n            <Button\n                view=\"flat\"\n                onClick={togglePreviewMode}\n                aria-label=\"Switch to preview mode\"\n                title=\"Switch to preview mode\"\n            >\n                <Icon data={SquareDashed} />\n            </Button>\n\n            <div className={b('zoom')} role=\"group\" aria-label=\"Zoom controls\">\n                <Button\n                    view=\"flat\"\n                    onClick={decreaseZoom}\n                    aria-label=\"Decrease zoom\"\n                    disabled={zoom <= Math.min(...ZOOM_STEPS)}\n                >\n                    <Icon data={Minus} />\n                </Button>\n\n                <Select\n                    className={b('zoom-select')}\n                    multiple={false}\n                    value={currentZoomValue}\n                    options={zoomOptions}\n                    onUpdate={handleZoomUpdate}\n                    aria-label=\"Select zoom level\"\n                    width=\"max\"\n                />\n\n                <Button\n                    view=\"flat\"\n                    onClick={increaseZoom}\n                    aria-label=\"Increase zoom\"\n                    disabled={zoom >= Math.max(...ZOOM_STEPS)}\n                >\n                    <Icon data={Plus} />\n                </Button>\n            </div>\n        </div>\n    );\n};\n\nexport default React.memo(ViewSwitches);\n"]}

package/build/cjs/editor-v2/containers/index.d.ts

@@ -0,0 +1,7 @@
+export { Editor } from "./Editor/Editor.js";
+export { default as BlockConfigForm } from "./BlockConfigForm/BlockConfigForm.js";
+export { default as BlocksList } from "./BlocksList/BlocksList.js";
+export { default as Source } from "./Source/Source.js";
+export { default as SourceCode } from "./SourceCode/SourceCode.js";
+export { default as Tree } from "./Tree/Tree.js";
+export { default as ViewSwitches } from "./ViewSwitches/ViewSwitches.js";

package/build/cjs/editor-v2/containers/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewSwitches = exports.Tree = exports.SourceCode = exports.Source = exports.BlocksList = exports.BlockConfigForm = exports.Editor = void 0;
+const tslib_1 = require("tslib");
+var Editor_1 = require("./Editor/Editor.js");
+Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return Editor_1.Editor; } });
+var BlockConfigForm_1 = require("./BlockConfigForm/BlockConfigForm.js");
+Object.defineProperty(exports, "BlockConfigForm", { enumerable: true, get: function () { return tslib_1.__importDefault(BlockConfigForm_1).default; } });
+var BlocksList_1 = require("./BlocksList/BlocksList.js");
+Object.defineProperty(exports, "BlocksList", { enumerable: true, get: function () { return tslib_1.__importDefault(BlocksList_1).default; } });
+var Source_1 = require("./Source/Source.js");
+Object.defineProperty(exports, "Source", { enumerable: true, get: function () { return tslib_1.__importDefault(Source_1).default; } });
+var SourceCode_1 = require("./SourceCode/SourceCode.js");
+Object.defineProperty(exports, "SourceCode", { enumerable: true, get: function () { return tslib_1.__importDefault(SourceCode_1).default; } });
+var Tree_1 = require("./Tree/Tree.js");
+Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return tslib_1.__importDefault(Tree_1).default; } });
+var ViewSwitches_1 = require("./ViewSwitches/ViewSwitches.js");
+Object.defineProperty(exports, "ViewSwitches", { enumerable: true, get: function () { return tslib_1.__importDefault(ViewSwitches_1).default; } });
+//# sourceMappingURL=index.js.map