@coding-flow/flow-design 0.0.1

package/dist/components/design-editor/components/branch-adder/index.d.ts

@@ -0,0 +1,14 @@
+import { type FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
+import React from "react";
+import { NodeType } from "@coding-flow/flow-types";
+interface BranchAdderPropsType {
+    activated?: boolean;
+    node: FlowNodeEntity;
+}
+export declare const BranchAdder: React.FC<BranchAdderPropsType>;
+interface BranchAdderProps {
+    buttonText: string;
+    addType: NodeType;
+}
+export declare const BranchAdderRender: React.FC<BranchAdderProps>;
+export {};

package/dist/components/design-editor/components/branch-adder/index.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClientContext } from "@flowgram.ai/fixed-layout-editor";
+import { useCallback, useContext } from "react";
+import { NodeRenderContext } from "../../context/index.js";
+import { NodeHeader } from "../../node-components/header/index.js";
+import { Button } from "antd";
+import { nodeFormPanelFactory } from "../sidebar/index.js";
+import { usePanelManager } from "@flowgram.ai/panel-manager-plugin";
+import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
+const BranchAdder = (props)=>null;
+const BranchAdderRender = (props)=>{
+    const { node } = useContext(NodeRenderContext);
+    const ctx = useClientContext();
+    const { operation, playground } = ctx;
+    const panelManager = usePanelManager();
+    const { context } = useDesignContext();
+    const presenter = context.getPresenter();
+    const handleAddBranch = ()=>{
+        presenter.createNode(node.id, props.addType).then((block)=>{
+            operation.addBlock(node, block);
+            setTimeout(()=>{
+                handleClose();
+            }, 10);
+        });
+    };
+    const handleClose = useCallback(()=>{
+        panelManager.close(nodeFormPanelFactory.key);
+    }, [
+        panelManager
+    ]);
+    const canAddBranch = playground.config.readonlyOrDisabled;
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {
+                iconEnable: true,
+                style: {
+                    width: 120
+                }
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                type: 'link',
+                disabled: canAddBranch,
+                onClick: handleAddBranch,
+                children: props.buttonText
+            })
+        ]
+    });
+};
+export { BranchAdder, BranchAdderRender };

package/dist/components/design-editor/components/branch-adder/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    activated?: boolean;
+    isVertical: boolean;
+}, never>;

package/dist/components/design-editor/components/branch-adder/styles.js

@@ -0,0 +1,27 @@
+import styled_components from "styled-components";
+const Container = styled_components.div`
+    width: 28px;
+    height: 18px;
+    background: ${(props)=>props.activated ? '#82A7FC' : 'rgb(187, 191, 196)'};
+    display: flex;
+    border-radius: 9px;
+    justify-content: space-evenly;
+    align-items: center;
+    cursor: pointer;
+    color: #fff;
+    font-size: 10px;
+    font-weight: bold;
+    transform: ${(props)=>props.isVertical ? '' : 'rotate(90deg)'};
+
+    div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        svg {
+            width: 12px;
+            height: 12px;
+        }
+    }
+`;
+export { Container };

package/dist/components/design-editor/components/collapse/index.d.ts

@@ -0,0 +1,3 @@
+import { CollapseProps } from "@flowgram.ai/fixed-layout-editor";
+import React from "react";
+export declare const Collapse: React.FC<CollapseProps>;

package/dist/components/design-editor/components/collapse/index.js

@@ -0,0 +1,3 @@
+import "react";
+const Collapse = (props)=>null;
+export { Collapse };

package/dist/components/design-editor/components/node-adder/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
+interface AdderProps {
+    from: FlowNodeEntity;
+    to?: FlowNodeEntity;
+    hoverActivated: boolean;
+}
+export declare const Adder: React.FC<AdderProps>;
+export {};

package/dist/components/design-editor/components/node-adder/index.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover } from "antd";
+import { useClientContext } from "@flowgram.ai/fixed-layout-editor";
+import { NodeList } from "../node-list/index.js";
+import { Wrap } from "./styles.js";
+import { PlusCircleOutlined } from "@ant-design/icons";
+const Adder = (props)=>{
+    const { from } = props;
+    const [visible, setVisible] = useState(false);
+    const { playground, operation, clipboard } = useClientContext();
+    const add = (addProps)=>{
+        const blocks = addProps.blocks ? addProps.blocks : void 0;
+        const block = operation.addFromNode(from, {
+            ...addProps,
+            blocks
+        });
+        setTimeout(()=>{
+            playground.scrollToView({
+                bounds: block.bounds,
+                scrollToCenter: true
+            });
+        }, 10);
+        setVisible(false);
+    };
+    if (playground.config.readonly) return null;
+    return /*#__PURE__*/ jsx(Popover, {
+        open: visible,
+        onOpenChange: setVisible,
+        content: /*#__PURE__*/ jsx(NodeList, {
+            onSelect: add,
+            from: from
+        }),
+        placement: "right",
+        trigger: "click",
+        children: /*#__PURE__*/ jsx(Wrap, {
+            style: props.hoverActivated ? {
+                width: 15,
+                height: 15
+            } : {},
+            onMouseDown: (e)=>e.stopPropagation(),
+            children: props.hoverActivated ? /*#__PURE__*/ jsx(PlusCircleOutlined, {
+                onClick: ()=>{
+                    setVisible(true);
+                },
+                style: {
+                    backgroundColor: '#fff',
+                    color: '#3370ff',
+                    borderRadius: 15
+                }
+            }) : ''
+        })
+    });
+};
+export { Adder };

package/dist/components/design-editor/components/node-adder/styles.d.ts

@@ -0,0 +1 @@
+export declare const Wrap: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/design-editor/components/node-adder/styles.js

@@ -0,0 +1,14 @@
+import styled_components from "styled-components";
+const Wrap = styled_components.div`
+  position: relative;
+  width: 6px;
+  height: 6px;
+  background-color: rgb(143, 149, 158);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+export { Wrap };

package/dist/components/design-editor/components/node-icon/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { NodeType } from "@coding-flow/flow-types";
+interface NodeIconProps {
+    type: NodeType;
+}
+export declare const NodeIcon: React.FC<NodeIconProps>;
+export {};

package/dist/components/design-editor/components/node-icon/index.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { theme } from "antd";
+import { ApiOutlined, AuditOutlined, BellOutlined, BranchesOutlined, ClockCircleOutlined, EditOutlined, MergeOutlined, NodeExpandOutlined, PoweroffOutlined, PullRequestOutlined, ShareAltOutlined, UserOutlined } from "@ant-design/icons";
+const NodeIcon = (props)=>{
+    const icon = props.type;
+    const { token } = theme.useToken();
+    const style = {
+        fontSize: 18,
+        marginRight: 4,
+        marginLeft: 4,
+        color: token.colorPrimary
+    };
+    if (!icon) return null;
+    if ('APPROVAL' === icon) return /*#__PURE__*/ jsx(AuditOutlined, {
+        style: style
+    });
+    if ('CONDITION' === icon) return /*#__PURE__*/ jsx(BranchesOutlined, {
+        style: style
+    });
+    if ('CONDITION_BRANCH' === icon) return /*#__PURE__*/ jsx(BranchesOutlined, {
+        style: style
+    });
+    if ('DELAY' === icon) return /*#__PURE__*/ jsx(ClockCircleOutlined, {
+        style: style
+    });
+    if ('END' === icon) return /*#__PURE__*/ jsx(PoweroffOutlined, {
+        style: style
+    });
+    if ('HANDLE' === icon) return /*#__PURE__*/ jsx(EditOutlined, {
+        style: style
+    });
+    if ('INCLUSIVE' === icon) return /*#__PURE__*/ jsx(MergeOutlined, {
+        style: style
+    });
+    if ('INCLUSIVE_BRANCH' === icon) return /*#__PURE__*/ jsx(MergeOutlined, {
+        style: style
+    });
+    if ('NOTIFY' === icon) return /*#__PURE__*/ jsx(BellOutlined, {
+        style: style
+    });
+    if ('PARALLEL' === icon) return /*#__PURE__*/ jsx(NodeExpandOutlined, {
+        style: style
+    });
+    if ('PARALLEL_BRANCH' === icon) return /*#__PURE__*/ jsx(NodeExpandOutlined, {
+        style: style
+    });
+    if ('ROUTER' === icon) return /*#__PURE__*/ jsx(PullRequestOutlined, {
+        style: style
+    });
+    if ('START' === icon) return /*#__PURE__*/ jsx(UserOutlined, {
+        style: style
+    });
+    if ('SUB_PROCESS' === icon) return /*#__PURE__*/ jsx(ShareAltOutlined, {
+        style: style
+    });
+    if ('TRIGGER' === icon) return /*#__PURE__*/ jsx(ApiOutlined, {
+        style: style
+    });
+    return null;
+};
+export { NodeIcon };

package/dist/components/design-editor/components/node-list/index.d.ts

@@ -0,0 +1,8 @@
+import { FlowNodeEntity } from "@flowgram.ai/fixed-layout-editor";
+import React from "react";
+interface NodeListProps {
+    onSelect: (meta: any) => void;
+    from: FlowNodeEntity;
+}
+export declare const NodeList: React.FC<NodeListProps>;
+export {};

package/dist/components/design-editor/components/node-list/index.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClientContext } from "@flowgram.ai/fixed-layout-editor";
+import "react";
+import styled_components from "styled-components";
+import { FlowNodeRegistries } from "../../nodes/index.js";
+import { NodeIcon } from "../node-icon/index.js";
+import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
+const NodesWrap = styled_components.div`
+    max-height: 500px;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+`;
+const NodeWrap = styled_components.div`
+    width: 100%;
+    height: 32px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 19px;
+    padding: 0 15px;
+
+    &:hover {
+        background-color: hsl(252deg 62% 55% / 9%);
+        color: hsl(252 62% 54.9%);
+    }
+
+,
+`;
+const NodeLabel = styled_components.div`
+    font-size: 12px;
+    margin-left: 10px;
+`;
+function Node(props) {
+    return /*#__PURE__*/ jsxs(NodeWrap, {
+        onClick: props.disabled ? void 0 : props.onClick,
+        style: props.disabled ? {
+            opacity: 0.3
+        } : {},
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    fontSize: 14
+                },
+                children: props.icon
+            }),
+            /*#__PURE__*/ jsx(NodeLabel, {
+                children: props.label
+            })
+        ]
+    });
+}
+const NodeList = (props)=>{
+    const clientContext = useClientContext();
+    const { context } = useDesignContext();
+    const presenter = context.getPresenter();
+    const handleClick = (registry)=>{
+        const nodeType = registry.type;
+        presenter.createNode(props.from.id, nodeType).then((currentNode)=>{
+            props.onSelect?.(currentNode);
+        });
+    };
+    return /*#__PURE__*/ jsx(NodesWrap, {
+        style: {
+            width: 180
+        },
+        children: FlowNodeRegistries.filter((registry)=>!registry.meta?.addDisable).map((registry)=>/*#__PURE__*/ jsx(Node, {
+                disabled: !(registry.canAdd?.(clientContext, props.from) ?? true),
+                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                    type: registry.type
+                }),
+                label: registry.info.description,
+                onClick: ()=>handleClick(registry)
+            }, registry.type))
+    });
+};
+export { NodeList };

package/dist/components/design-editor/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+export { nodeFormPanelFactory } from './sidebar-renderer';

package/dist/components/design-editor/components/sidebar/index.js

@@ -0,0 +1,2 @@
+import { nodeFormPanelFactory } from "./sidebar-renderer.js";
+export { nodeFormPanelFactory };

package/dist/components/design-editor/components/sidebar/sidebar-node-renderer.d.ts

@@ -0,0 +1,4 @@
+import { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
+export declare function SidebarNodeRenderer(props: {
+    node: FlowNodeEntity;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/components/sidebar/sidebar-node-renderer.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useNodeRender } from "@flowgram.ai/fixed-layout-editor";
+import { NodeRenderContext } from "../../context/index.js";
+function SidebarNodeRenderer(props) {
+    const { node } = props;
+    const nodeRender = useNodeRender(node);
+    return /*#__PURE__*/ jsx(NodeRenderContext.Provider, {
+        value: nodeRender,
+        children: /*#__PURE__*/ jsx("div", {
+            style: {
+                background: 'rgb(251, 251, 251)',
+                height: '100%',
+                overflowY: 'auto',
+                borderRadius: 8,
+                border: '1px solid rgba(82,100,154, 0.13)',
+                boxSizing: 'border-box'
+            },
+            children: nodeRender.form?.render()
+        })
+    });
+}
+export { SidebarNodeRenderer };

package/dist/components/design-editor/components/sidebar/sidebar-renderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type PanelFactory } from '@flowgram.ai/panel-manager-plugin';
+export interface NodeFormPanelProps {
+    nodeId: string;
+}
+export declare const SidebarRenderer: React.FC<NodeFormPanelProps>;
+export declare const nodeFormPanelFactory: PanelFactory<NodeFormPanelProps>;

package/dist/components/design-editor/components/sidebar/sidebar-renderer.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { startTransition, useCallback, useEffect } from "react";
+import { usePanelManager } from "@flowgram.ai/panel-manager-plugin";
+import { PlaygroundEntityContext, useClientContext, useRefresh } from "@flowgram.ai/fixed-layout-editor";
+import { IsSidebarContext } from "../../context/index.js";
+import { SidebarNodeRenderer } from "./sidebar-node-renderer.js";
+const SidebarRenderer = ({ nodeId })=>{
+    const panelManager = usePanelManager();
+    const { selection, playground, document } = useClientContext();
+    const refresh = useRefresh();
+    const handleClose = useCallback(()=>{
+        startTransition(()=>{
+            panelManager.close(nodeFormPanelFactory.key);
+        });
+    }, []);
+    const node = nodeId ? document.getNode(nodeId) : void 0;
+    useEffect(()=>{
+        const disposable = playground.config.onReadonlyOrDisabledChange(()=>{
+            handleClose();
+            refresh();
+        });
+        return ()=>disposable.dispose();
+    }, [
+        playground
+    ]);
+    useEffect(()=>{
+        const toDispose = selection.onSelectionChanged(()=>{
+            if (0 === selection.selection.length) handleClose();
+            else if (1 === selection.selection.length && selection.selection[0] !== node) handleClose();
+        });
+        return ()=>toDispose.dispose();
+    }, [
+        selection,
+        handleClose,
+        node
+    ]);
+    useEffect(()=>{
+        if (node) {
+            const toDispose = node.onDispose(()=>{
+                panelManager.close(nodeFormPanelFactory.key);
+            });
+            return ()=>toDispose.dispose();
+        }
+        return ()=>{};
+    }, [
+        node
+    ]);
+    if (!node || true === node.getNodeMeta().sidebarDisable) return null;
+    if (playground.config.readonly) return null;
+    return /*#__PURE__*/ jsx(IsSidebarContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ jsx(PlaygroundEntityContext.Provider, {
+            value: node,
+            children: /*#__PURE__*/ jsx(SidebarNodeRenderer, {
+                node: node
+            })
+        }, node.id)
+    });
+};
+const nodeFormPanelFactory = {
+    key: 'node-form-panel',
+    defaultSize: 400,
+    render: (props)=>/*#__PURE__*/ jsx(SidebarRenderer, {
+            ...props
+        })
+};
+export { SidebarRenderer, nodeFormPanelFactory };

package/dist/components/design-editor/context/index.d.ts

@@ -0,0 +1,3 @@
+export { NodeRenderContext } from './node-render-context';
+export { IsSidebarContext } from './sidebar-context';
+export { NodeFormContext } from './node-form-context';

package/dist/components/design-editor/context/index.js

@@ -0,0 +1,4 @@
+import { NodeRenderContext } from "./node-render-context.js";
+import { IsSidebarContext } from "./sidebar-context.js";
+import { NodeFormContext } from "./node-form-context.js";
+export { IsSidebarContext, NodeFormContext, NodeRenderContext };

package/dist/components/design-editor/context/node-form-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+export declare const NodeFormContext: React.Context<FormRenderProps<{
+    [key: string]: any;
+    title?: string;
+    actions?: any[];
+    order?: number | string;
+}>>;

package/dist/components/design-editor/context/node-form-context.js

@@ -0,0 +1,3 @@
+import react from "react";
+const NodeFormContext = react.createContext({});
+export { NodeFormContext };

package/dist/components/design-editor/context/node-render-context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type NodeRenderReturnType } from '@flowgram.ai/fixed-layout-editor';
+export declare const NodeRenderContext: React.Context<NodeRenderReturnType>;

package/dist/components/design-editor/context/node-render-context.js

@@ -0,0 +1,3 @@
+import react from "react";
+const NodeRenderContext = react.createContext({});
+export { NodeRenderContext };

package/dist/components/design-editor/context/sidebar-context.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const IsSidebarContext: React.Context<boolean>;

package/dist/components/design-editor/context/sidebar-context.js

@@ -0,0 +1,3 @@
+import react from "react";
+const IsSidebarContext = react.createContext(false);
+export { IsSidebarContext };

package/dist/components/design-editor/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useEditorProps } from './use-editor-props';
+export { useIsSidebar } from './use-is-sidebar';

package/dist/components/design-editor/hooks/index.js

@@ -0,0 +1,3 @@
+import { useEditorProps } from "./use-editor-props.js";
+import { useIsSidebar } from "./use-is-sidebar.js";
+export { useEditorProps, useIsSidebar };

package/dist/components/design-editor/hooks/use-editor-props.d.ts

@@ -0,0 +1,4 @@
+import '@flowgram.ai/fixed-layout-editor/index.css';
+import { FixedLayoutProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowDocumentJSON, FlowNodeRegistry } from "../typings";
+export declare function useEditorProps(initialData: FlowDocumentJSON, nodeRegistries: FlowNodeRegistry[]): FixedLayoutProps;

package/dist/components/design-editor/hooks/use-editor-props.js

@@ -0,0 +1,124 @@
+import "@flowgram.ai/fixed-layout-editor/index.css";
+import { useMemo } from "react";
+import { theme } from "antd";
+import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin";
+import { defaultFixedSemiMaterials } from "@flowgram.ai/fixed-semi-materials";
+import { ConstantKeys, FlowLayoutDefault, FlowRendererKey } from "@flowgram.ai/fixed-layout-editor";
+import { createDownloadPlugin } from "@flowgram.ai/export-plugin";
+import { createPanelManagerPlugin } from "@flowgram.ai/panel-manager-plugin";
+import { nodeFormPanelFactory } from "../components/sidebar/index.js";
+import { BaseNode } from "../components/base-node/index.js";
+import { debounce } from "lodash-es";
+import { Adder } from "../components/node-adder/index.js";
+import { BranchAdder } from "../components/branch-adder/index.js";
+import { Collapse } from "../components/collapse/index.js";
+import { useDesignContext } from "../../design-panel/hooks/use-design-context.js";
+function useEditorProps(initialData, nodeRegistries) {
+    const { token } = theme.useToken();
+    const { context } = useDesignContext();
+    const presenter = context.getPresenter();
+    return useMemo(()=>({
+            background: true,
+            playground: {
+                ineractiveType: 'MOUSE',
+                preventGlobalGesture: true
+            },
+            readonly: false,
+            initialData,
+            nodeRegistries,
+            getNodeDefaultRegistry (type) {
+                return {
+                    type,
+                    meta: {
+                        defaultExpanded: true
+                    }
+                };
+            },
+            fromNodeJSON (node, json) {
+                return json;
+            },
+            toNodeJSON (node, json) {
+                return json;
+            },
+            defaultLayout: FlowLayoutDefault.VERTICAL_FIXED_LAYOUT,
+            constants: {
+                [ConstantKeys.BASE_COLOR]: '#B8BCC1',
+                [ConstantKeys.BASE_ACTIVATED_COLOR]: token.colorPrimary
+            },
+            dragdrop: {
+                onDrop: (ctx, dropData)=>{},
+                canDrop: (ctx, dropData)=>true
+            },
+            history: {
+                enable: true,
+                enableChangeNode: true,
+                onApply: debounce((ctx, opt)=>{
+                    if (ctx.document.disposed) return;
+                    const data = ctx.document.toJSON();
+                    console.log('flow-engine auto save: ', data);
+                    presenter.syncNodes(data.nodes);
+                }, 100)
+            },
+            nodeEngine: {
+                enable: true
+            },
+            variableEngine: {
+                enable: true
+            },
+            materials: {
+                components: {
+                    ...defaultFixedSemiMaterials,
+                    [FlowRendererKey.ADDER]: Adder,
+                    [FlowRendererKey.BRANCH_ADDER]: BranchAdder,
+                    [FlowRendererKey.COLLAPSE]: Collapse
+                },
+                renderDefaultNode: BaseNode
+            },
+            onBind: ({ bind })=>{},
+            scroll: {
+                enableScrollLimit: true
+            },
+            onInit: (ctx)=>{
+                console.log('---- Playground Init ----');
+            },
+            onAllLayersRendered: (ctx)=>{
+                setTimeout(()=>{
+                    ctx.tools.fitView();
+                }, 10);
+                console.log(ctx.document.toString(true));
+            },
+            onDispose: ()=>{
+                console.log('---- Playground Dispose ----');
+            },
+            plugins: ()=>[
+                    createMinimapPlugin({
+                        disableLayer: true,
+                        enableDisplayAllNodes: true,
+                        canvasStyle: {
+                            canvasWidth: 182,
+                            canvasHeight: 102,
+                            canvasPadding: 50,
+                            canvasBackground: 'rgba(245, 245, 245, 1)',
+                            canvasBorderRadius: 10,
+                            viewportBackground: 'rgba(235, 235, 235, 1)',
+                            viewportBorderRadius: 4,
+                            viewportBorderColor: 'rgba(201, 201, 201, 1)',
+                            viewportBorderWidth: 1,
+                            viewportBorderDashLength: 2,
+                            nodeColor: 'rgba(255, 255, 255, 1)',
+                            nodeBorderRadius: 2,
+                            nodeBorderWidth: 0.145,
+                            nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
+                            overlayColor: 'rgba(255, 255, 255, 0)'
+                        }
+                    }),
+                    createDownloadPlugin({}),
+                    createPanelManagerPlugin({
+                        factories: [
+                            nodeFormPanelFactory
+                        ]
+                    })
+                ]
+        }), []);
+}
+export { useEditorProps };

package/dist/components/design-editor/hooks/use-is-sidebar.d.ts

@@ -0,0 +1 @@
+export declare function useIsSidebar(): boolean;