@coding-flow/flow-design 0.0.1

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

@@ -0,0 +1,33 @@
+import { StartNodeRegistry } from "./start/index.js";
+import { EndNodeRegistry } from "./end/index.js";
+import { ConditionNodeRegistry } from "./condition/index.js";
+import { ConditionBranchNodeRegistry } from "./condition-branch/index.js";
+import { ApprovalNodeRegistry } from "./approval/index.js";
+import { DelayNodeRegistry } from "./delay/index.js";
+import { HandleNodeRegistry } from "./handle/index.js";
+import { InclusiveNodeRegistry } from "./inclusive/index.js";
+import { InclusiveBranchNodeRegistry } from "./inclusive-branch/index.js";
+import { NotifyNodeRegistry } from "./notify/index.js";
+import { ParallelNodeRegistry } from "./parallel/index.js";
+import { ParallelBranchNodeRegistry } from "./parallel-branch/index.js";
+import { RouterNodeRegistry } from "./router/index.js";
+import { SubProcessNodeRegistry } from "./sub-process/index.js";
+import { TriggerNodeRegistry } from "./trigger/index.js";
+const FlowNodeRegistries = [
+    ApprovalNodeRegistry,
+    ConditionNodeRegistry,
+    ConditionBranchNodeRegistry,
+    DelayNodeRegistry,
+    EndNodeRegistry,
+    HandleNodeRegistry,
+    InclusiveNodeRegistry,
+    InclusiveBranchNodeRegistry,
+    NotifyNodeRegistry,
+    ParallelNodeRegistry,
+    ParallelBranchNodeRegistry,
+    RouterNodeRegistry,
+    StartNodeRegistry,
+    SubProcessNodeRegistry,
+    TriggerNodeRegistry
+];
+export { FlowNodeRegistries };

package/dist/components/design-editor/nodes/notify/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/notify/form-meta.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { useIsSidebar } from "../../hooks/index.js";
+import { NodeHeader } from "../../node-components/header/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+import { TabNodeLayout } from "../../node-components/layout/index.js";
+import { ErrorTriggerStrategy } from "../../node-components/strategy/error-trigger.js";
+import { NodeTitleStrategy } from "../../node-components/strategy/node-title.js";
+import { OperatorLoadStrategy } from "../../node-components/strategy/operator-load.js";
+import { View } from "../../node-components/view/index.js";
+import "react";
+import { NodeHint } from "../../node-components/node-hint/index.js";
+const renderForm = (data)=>{
+    const isSidebar = useIsSidebar();
+    if (isSidebar) return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsxs(TabNodeLayout, {
+                hiddenAction: true,
+                children: [
+                    /*#__PURE__*/ jsx(View, {}),
+                    /*#__PURE__*/ jsx(OperatorLoadStrategy, {}),
+                    /*#__PURE__*/ jsx(NodeTitleStrategy, {}),
+                    /*#__PURE__*/ jsx(ErrorTriggerStrategy, {})
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(NodeHint, {
+                fieldName: "OperatorLoadStrategy.script"
+            })
+        ]
+    });
+};
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/notify/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const NotifyNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/notify/index.js

@@ -0,0 +1,15 @@
+import { formMeta } from "./form-meta.js";
+const NotifyNodeRegistry = {
+    type: 'NOTIFY',
+    meta: {
+        copyDisable: true,
+        addDisable: false,
+        expandable: false
+    },
+    info: {
+        icon: 'NOTIFY',
+        description: '抄送节点'
+    },
+    formMeta: formMeta
+};
+export { NotifyNodeRegistry };

package/dist/components/design-editor/nodes/parallel/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/parallel/form-meta.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { BranchAdderRender } from "../../components/branch-adder/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+const renderForm = (data)=>/*#__PURE__*/ jsx(NodePanel, {
+        data: data,
+        children: /*#__PURE__*/ jsx(BranchAdderRender, {
+            buttonText: '添加并行分支',
+            addType: 'PARALLEL_BRANCH'
+        })
+    });
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/parallel/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const ParallelNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/parallel/index.js

@@ -0,0 +1,21 @@
+import { formMeta } from "./form-meta.js";
+import { FlowNodeSplitType } from "@flowgram.ai/fixed-layout-editor";
+const ParallelNodeRegistry = {
+    type: 'PARALLEL',
+    extend: FlowNodeSplitType.DYNAMIC_SPLIT,
+    meta: {
+        copyDisable: true,
+        addDisable: false,
+        expandable: false,
+        sidebarDisable: true,
+        style: {
+            width: '100%'
+        }
+    },
+    info: {
+        icon: 'PARALLEL',
+        description: '并行控制'
+    },
+    formMeta: formMeta
+};
+export { ParallelNodeRegistry };

package/dist/components/design-editor/nodes/parallel-branch/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/parallel-branch/form-meta.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { NodePanel } from "../../node-components/panel/index.js";
+import { NodeIcon } from "../../components/node-icon/index.js";
+import { Space } from "antd";
+const renderForm = (data)=>/*#__PURE__*/ jsx(NodePanel, {
+        data: data,
+        children: /*#__PURE__*/ jsxs(Space, {
+            style: {
+                width: 100,
+                textAlign: 'center',
+                padding: 5
+            },
+            children: [
+                /*#__PURE__*/ jsx(NodeIcon, {
+                    type: "PARALLEL_BRANCH"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: "并行节点"
+                })
+            ]
+        })
+    });
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

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

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const ParallelBranchNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/parallel-branch/index.js

@@ -0,0 +1,33 @@
+import { formMeta } from "./form-meta.js";
+import { nanoid } from "nanoid";
+const ParallelBranchNodeRegistry = {
+    type: 'PARALLEL_BRANCH',
+    extend: 'block',
+    meta: {
+        copyDisable: true,
+        addDisable: true,
+        sidebarDisable: true,
+        strategies: [
+            'ParallelBranchStrategy'
+        ],
+        style: {
+            width: '100%'
+        }
+    },
+    info: {
+        icon: 'PARALLEL_BRANCH',
+        description: '并行分支'
+    },
+    formMeta: formMeta,
+    onAdd (ctx, from) {
+        return {
+            id: `parallel_branch_${nanoid(5)}`,
+            type: 'PARALLEL_BRANCH',
+            data: {
+                title: "并行分支节点",
+                value: 'branch Value'
+            }
+        };
+    }
+};
+export { ParallelBranchNodeRegistry };

package/dist/components/design-editor/nodes/router/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/router/form-meta.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { useIsSidebar } from "../../hooks/index.js";
+import { NodeHeader } from "../../node-components/header/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+import { PanelLayout } from "../../node-components/layout/index.js";
+import { RouterStrategy } from "../../node-components/strategy/router.js";
+import "react";
+import { NodeHint } from "../../node-components/node-hint/index.js";
+const renderForm = (data)=>{
+    const isSidebar = useIsSidebar();
+    if (isSidebar) return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(PanelLayout, {
+                children: /*#__PURE__*/ jsx(RouterStrategy, {})
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(NodeHint, {
+                fieldName: "RouterStrategy.script"
+            })
+        ]
+    });
+};
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/router/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const RouterNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/router/index.js

@@ -0,0 +1,23 @@
+import { formMeta } from "./form-meta.js";
+const RouterNodeRegistry = {
+    type: 'ROUTER',
+    extend: 'end',
+    meta: {
+        copyDisable: true,
+        addDisable: false,
+        expandable: false
+    },
+    info: {
+        icon: 'ROUTER',
+        description: '路由节点'
+    },
+    canAdd (ctx, from) {
+        while(from.parent){
+            if ('CONDITION_BRANCH' === from.parent.flowNodeType) return true;
+            from = from.parent;
+        }
+        return false;
+    },
+    formMeta: formMeta
+};
+export { RouterNodeRegistry };

package/dist/components/design-editor/nodes/start/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/start/form-meta.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { useIsSidebar } from "../../hooks/index.js";
+import { NodeHeader } from "../../node-components/header/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+import { TabNodeLayout } from "../../node-components/layout/index.js";
+import { NodeTitleStrategy } from "../../node-components/strategy/node-title.js";
+import { RevokeStrategy } from "../../node-components/strategy/revoke.js";
+import { View } from "../../node-components/view/index.js";
+import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
+import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+const renderForm = (data)=>{
+    const isSidebar = useIsSidebar();
+    const { state } = useDesignContext();
+    if (isSidebar) return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsxs(TabNodeLayout, {
+                children: [
+                    /*#__PURE__*/ jsx(View, {}),
+                    /*#__PURE__*/ jsx(NodeTitleStrategy, {}),
+                    /*#__PURE__*/ jsx(RevokeStrategy, {})
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            GroovyScriptConvertorUtil.getScriptTitle(state.workflow.operatorCreateScript)
+        ]
+    });
+};
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/start/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const StartNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/start/index.js

@@ -0,0 +1,19 @@
+import { formMeta } from "./form-meta.js";
+const StartNodeRegistry = {
+    type: 'START',
+    meta: {
+        isStart: true,
+        deleteDisable: true,
+        selectable: false,
+        copyDisable: true,
+        expandable: false,
+        addDisable: true,
+        editTitleDisable: true
+    },
+    info: {
+        icon: 'START',
+        description: '发起节点'
+    },
+    formMeta: formMeta
+};
+export { StartNodeRegistry };

package/dist/components/design-editor/nodes/sub-process/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/sub-process/form-meta.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { useIsSidebar } from "../../hooks/index.js";
+import { NodeHeader } from "../../node-components/header/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+import { PanelLayout } from "../../node-components/layout/index.js";
+import { SubProcessStrategy } from "../../node-components/strategy/sub-process.js";
+import "react";
+import { NodeHint } from "../../node-components/node-hint/index.js";
+const renderForm = (data)=>{
+    const isSidebar = useIsSidebar();
+    if (isSidebar) return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(PanelLayout, {
+                children: /*#__PURE__*/ jsx(SubProcessStrategy, {})
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(NodeHint, {
+                fieldName: "SubProcessStrategy.script"
+            })
+        ]
+    });
+};
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/sub-process/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const SubProcessNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/sub-process/index.js

@@ -0,0 +1,15 @@
+import { formMeta } from "./form-meta.js";
+const SubProcessNodeRegistry = {
+    type: 'SUB_PROCESS',
+    meta: {
+        copyDisable: true,
+        addDisable: false,
+        expandable: false
+    },
+    info: {
+        icon: 'SUB_PROCESS',
+        description: '子流程节点'
+    },
+    formMeta: formMeta
+};
+export { SubProcessNodeRegistry };

package/dist/components/design-editor/nodes/trigger/form-meta.d.ts

@@ -0,0 +1,4 @@
+import { FormMeta, FormRenderProps } from '@flowgram.ai/fixed-layout-editor';
+import { FlowNodeJSON } from '../../typings';
+export declare const renderForm: (data: FormRenderProps<FlowNodeJSON["data"]>) => import("react/jsx-runtime").JSX.Element;
+export declare const formMeta: FormMeta<FlowNodeJSON['data']>;

package/dist/components/design-editor/nodes/trigger/form-meta.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
+import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
+import { useIsSidebar } from "../../hooks/index.js";
+import { NodeHeader } from "../../node-components/header/index.js";
+import { NodePanel } from "../../node-components/panel/index.js";
+import { PanelLayout } from "../../node-components/layout/index.js";
+import { TriggerStrategy } from "../../node-components/strategy/trigger.js";
+import { NodeHint } from "../../node-components/node-hint/index.js";
+import "react";
+const renderForm = (data)=>{
+    const isSidebar = useIsSidebar();
+    if (isSidebar) return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(PanelLayout, {
+                children: /*#__PURE__*/ jsx(TriggerStrategy, {})
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(NodePanel, {
+        data: data,
+        children: [
+            /*#__PURE__*/ jsx(NodeHeader, {}),
+            /*#__PURE__*/ jsx(NodeHint, {
+                fieldName: "TriggerStrategy.script"
+            })
+        ]
+    });
+};
+const formMeta = {
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({ value })=>value ? void 0 : 'Title is required'
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs
+    }
+};
+export { formMeta, renderForm };

package/dist/components/design-editor/nodes/trigger/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowNodeRegistry } from '../../typings';
+export declare const TriggerNodeRegistry: FlowNodeRegistry;

package/dist/components/design-editor/nodes/trigger/index.js

@@ -0,0 +1,15 @@
+import { formMeta } from "./form-meta.js";
+const TriggerNodeRegistry = {
+    type: 'TRIGGER',
+    meta: {
+        copyDisable: true,
+        addDisable: false,
+        expandable: false
+    },
+    info: {
+        icon: 'TRIGGER',
+        description: '触发节点'
+    },
+    formMeta: formMeta
+};
+export { TriggerNodeRegistry };

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

@@ -0,0 +1,6 @@
+export declare const VersionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VersionSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToolContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToolSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectZoom: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MinimapContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,61 @@
+import styled_components from "styled-components";
+const VersionContainer = styled_components.div`
+    position: absolute;
+    top: 16px;
+    left: 10px;
+    display: flex;
+    justify-content: left;
+    min-width: 360px;
+    pointer-events: none;
+    gap: 8px;
+
+    z-index: 20;
+`;
+const VersionSection = styled_components.div`
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid rgba(68, 83, 130, 0.25);
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.02) 0px 4px 12px 0px;
+  column-gap: 10px;
+  height: 40px;
+  padding: 0 4px;
+  pointer-events: auto;
+`;
+const ToolContainer = styled_components.div`
+  position: absolute;
+  bottom: 16px;
+  display: flex;
+  justify-content: left;
+  min-width: 360px;
+  pointer-events: none;
+  gap: 8px;
+
+  z-index: 20;
+`;
+const ToolSection = styled_components.div`
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid rgba(68, 83, 130, 0.25);
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.02) 0px 4px 12px 0px;
+  column-gap: 10px;
+  height: 40px;
+  padding: 0 4px;
+  pointer-events: auto;
+`;
+const SelectZoom = styled_components.span`
+  padding: 2px;
+  border-radius: 8px;
+  border: 1px solid rgba(68, 83, 130, 0.25);
+  font-size: 12px;
+  width: 40px;
+`;
+const MinimapContainer = styled_components.div`
+  position: absolute;
+  bottom: 60px;
+  width: 198px;
+`;
+export { MinimapContainer, SelectZoom, ToolContainer, ToolSection, VersionContainer, VersionSection };

package/dist/components/design-editor/tools/download.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const DownloadTool: FC;