@mdesignable/react 1.0.0-beta.64

package/esm/widgets/SimpleResourceWidget/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { isResourceHost, isResourceList, } from '@mdesignable/core';
+import { isFn } from '@mdesignable/shared';
+import { observer } from '@formily/reactive-react';
+import { usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import cls from 'classnames';
+import './styles.less';
+import { Tooltip } from 'antd';
+import { TextWidget } from '../TextWidget';
+export var SimpleResourceWidget = observer(function (props) {
+    var prefix = usePrefix('simple-resource');
+    var renderNode = function (source) {
+        var _a;
+        var node = source.node, icon = source.icon, title = source.title, thumb = source.thumb, span = source.span, _b = source.showTitle, showTitle = _b === void 0 ? true : _b;
+        var titleTxt = title || ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.getMessage('title'));
+        return (React.createElement(Tooltip, { title: titleTxt },
+            React.createElement("div", { className: prefix + '-item', style: { gridColumnStart: "span ".concat(span || 1) }, key: node.id, "data-designer-source-id": node.id },
+                thumb && React.createElement("img", { className: prefix + '-item-thumb', src: thumb }),
+                icon && React.isValidElement(icon) ? (React.createElement(React.Fragment, null, icon)) : (React.createElement(IconWidget, { title: titleTxt, className: prefix + '-item-icon', infer: icon, style: { width: 24, height: 24, color: 'red' } })),
+                showTitle ? (React.createElement("span", { className: prefix + '-item-text' }, React.createElement(TextWidget, null, titleTxt))) : null)));
+    };
+    var sources = props.sources.reduce(function (buf, source) {
+        if (isResourceList(source)) {
+            return buf.concat(source);
+        }
+        else if (isResourceHost(source)) {
+            return buf.concat(source.Resource);
+        }
+        return buf;
+    }, []);
+    var remainItems = sources.reduce(function (length, source) {
+        var _a;
+        return length + ((_a = source.span) !== null && _a !== void 0 ? _a : 1);
+    }, 0) % 3;
+    return (React.createElement("div", { className: cls(prefix, props.className) },
+        React.createElement("div", { className: prefix + '-content-wrapper' },
+            React.createElement("div", { className: prefix + '-content' },
+                sources.map(isFn(props.children) ? props.children : renderNode),
+                remainItems ? (React.createElement("div", { className: prefix + '-item-remain', style: { gridColumnStart: "span ".concat(3 - remainItems) } })) : null))));
+});
+SimpleResourceWidget.defaultProps = {};

package/esm/widgets/SimpleResourceWidget/styles.less

@@ -0,0 +1,57 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-simple-resource {
+  flex-wrap: wrap;
+  overflow: hidden;
+
+  &-content-wrapper {
+    display: flex;
+    justify-content: center;
+    background: var(--dn-resource-content-bg-color);
+  }
+
+  &-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  &-item {
+    position: relative;
+    user-select: none;
+    background: var(--dn-resource-content-bg-color);
+    min-height: 40px;
+    min-width: 40px;
+    color: var(--dn-resource-item-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    cursor: grab;
+    transition: color 0.1s ease-out;
+    gap: 8px;
+
+    &-text {
+      color: inherit;
+      font-size: 12px;
+    }
+
+    &:hover {
+      z-index: 1;
+      color: var(--ant-color-primary);
+    }
+
+    &-icon {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-remain {
+      background: var(--dn-resource-content-bg-color);
+    }
+  }
+}

package/esm/widgets/TextWidget/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IDesignerMiniLocales } from '@mdesignable/core';
+export interface ITextWidgetProps {
+    componentName?: string;
+    sourceName?: string;
+    token?: string | IDesignerMiniLocales;
+    defaultMessage?: string | IDesignerMiniLocales;
+}
+export declare const TextWidget: React.FC<ITextWidgetProps>;

package/esm/widgets/TextWidget/index.js

@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+import { isStr, isPlainObj } from '@mdesignable/shared';
+import { GlobalRegistry } from '@mdesignable/core';
+import { observer } from '@formily/reactive-react';
+export var TextWidget = observer(function (props) {
+    var takeLocale = function (message) {
+        if (isStr(message))
+            return message;
+        if (isPlainObj(message)) {
+            var lang = GlobalRegistry.getDesignerLanguage();
+            for (var key in message) {
+                if (key.toLocaleLowerCase() === lang)
+                    return message[key];
+            }
+            return;
+        }
+        return message;
+    };
+    var takeMessage = function (token) {
+        if (!token)
+            return;
+        var message = isStr(token)
+            ? GlobalRegistry.getDesignerMessage(token)
+            : token;
+        if (message)
+            return takeLocale(message);
+        return token;
+    };
+    return (React.createElement(Fragment, null, takeMessage(props.children) ||
+        takeMessage(props.token) ||
+        takeMessage(props.defaultMessage)));
+});

package/esm/widgets/ViewToolsWidget/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WorkbenchTypes } from '@mdesignable/core';
+export interface IViewToolsWidget {
+    use?: WorkbenchTypes[];
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const ViewToolsWidget: React.FC<IViewToolsWidget>;

package/esm/widgets/ViewToolsWidget/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from 'antd';
+import { observer } from '@formily/reactive-react';
+import { IconWidget } from '../IconWidget';
+import { usePrefix, useWorkbench } from '../../hooks';
+import cls from 'classnames';
+export var ViewToolsWidget = observer(function (_a) {
+    var use = _a.use, style = _a.style, className = _a.className;
+    var workbench = useWorkbench();
+    var prefix = usePrefix('view-tools');
+    return (React.createElement(Button.Group, { style: style, className: cls(prefix, className) },
+        use.includes('DESIGNABLE') && (React.createElement(Button, { disabled: workbench.type === 'DESIGNABLE', onClick: function () {
+                workbench.type = 'DESIGNABLE';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "Design" }))),
+        use.includes('JSONTREE') && (React.createElement(Button, { disabled: workbench.type === 'JSONTREE', onClick: function () {
+                workbench.type = 'JSONTREE';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "JSON" }))),
+        use.includes('MARKUP') && (React.createElement(Button, { disabled: workbench.type === 'MARKUP', onClick: function () {
+                workbench.type = 'MARKUP';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "Code" }))),
+        use.includes('PREVIEW') && (React.createElement(Button, { disabled: workbench.type === 'PREVIEW', onClick: function () {
+                workbench.type = 'PREVIEW';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "Play" })))));
+});
+ViewToolsWidget.defaultProps = {
+    use: ['DESIGNABLE', 'JSONTREE', 'PREVIEW'],
+};

package/esm/widgets/index.d.ts

@@ -0,0 +1,16 @@
+export * from './AuxToolWidget';
+export * from './ComponentTreeWidget';
+export * from './DesignerToolsWidget';
+export * from './ViewToolsWidget';
+export * from './ResourceWidget';
+export * from './GhostWidget';
+export * from './EmptyWidget';
+export * from './OutlineWidget';
+export * from './IconWidget';
+export * from './TextWidget';
+export * from './HistoryWidget';
+export * from './NodePathWidget';
+export * from './NodeTitleWidget';
+export * from './DroppableWidget';
+export * from './NodeActionsWidget';
+export * from './SimpleResourceWidget';

package/esm/widgets/index.js

@@ -0,0 +1,16 @@
+export * from './AuxToolWidget';
+export * from './ComponentTreeWidget';
+export * from './DesignerToolsWidget';
+export * from './ViewToolsWidget';
+export * from './ResourceWidget';
+export * from './GhostWidget';
+export * from './EmptyWidget';
+export * from './OutlineWidget';
+export * from './IconWidget';
+export * from './TextWidget';
+export * from './HistoryWidget';
+export * from './NodePathWidget';
+export * from './NodeTitleWidget';
+export * from './DroppableWidget';
+export * from './NodeActionsWidget';
+export * from './SimpleResourceWidget';

package/lib/containers/Designer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IDesignerProps } from '../types';
+export declare const Designer: React.FC<React.PropsWithChildren<IDesignerProps>>;

package/lib/containers/Designer.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Designer = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("@mdesignable/core");
+var context_1 = require("../context");
+var widgets_1 = require("../widgets");
+var hooks_1 = require("../hooks");
+var Layout_1 = require("./Layout");
+var icons = __importStar(require("../icons"));
+core_1.GlobalRegistry.registerDesignerIcons(icons);
+var Designer = function (props) {
+    var engine = (0, hooks_1.useDesigner)();
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        if (props.engine) {
+            if (props.engine && ref.current) {
+                if (props.engine !== ref.current) {
+                    ref.current.unmount();
+                }
+            }
+            props.engine.mount();
+            ref.current = props.engine;
+        }
+        return function () {
+            if (props.engine) {
+                props.engine.unmount();
+            }
+        };
+    }, [props.engine]);
+    if (engine)
+        throw new Error('There can only be one Designable Engine Context in the React Tree');
+    return (react_1.default.createElement(Layout_1.Layout, __assign({}, props),
+        react_1.default.createElement(context_1.DesignerEngineContext.Provider, { value: props.engine },
+            props.children,
+            react_1.default.createElement(widgets_1.GhostWidget, null))));
+};
+exports.Designer = Designer;
+exports.Designer.defaultProps = {
+    prefixCls: 'dn-',
+    theme: 'light',
+};

package/lib/containers/Layout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IDesignerLayoutProps } from '../types';
+export declare const Layout: React.FC<IDesignerLayoutProps>;

package/lib/containers/Layout.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+var react_1 = __importStar(require("react"));
+var shared_1 = require("@mdesignable/shared");
+var context_1 = require("../context");
+var classnames_1 = __importDefault(require("classnames"));
+var Layout = function (props) {
+    var _a;
+    var layout = (0, react_1.useContext)(context_1.DesignerLayoutContext);
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useLayoutEffect)(function () {
+        if (ref.current) {
+            (0, shared_1.each)(props.variables, function (value, key) {
+                ref.current.style.setProperty("--".concat(key), value);
+            });
+        }
+    }, []);
+    if (layout) {
+        return react_1.default.createElement(react_1.Fragment, null, props.children);
+    }
+    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)((_a = {},
+            _a["".concat(props.prefixCls, "app")] = true,
+            _a["".concat(props.prefixCls).concat(props.theme)] = props.theme,
+            _a)) },
+        react_1.default.createElement(context_1.DesignerLayoutContext.Provider, { value: {
+                theme: props.theme,
+                prefixCls: props.prefixCls,
+                position: props.position,
+            } }, props.children)));
+};
+exports.Layout = Layout;
+exports.Layout.defaultProps = {
+    theme: 'light',
+    prefixCls: 'dn-',
+    position: 'fixed',
+};

package/lib/containers/Simulator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type ISimulatorProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Simulator: React.FC<ISimulatorProps>;

package/lib/containers/Simulator.js

@@ -0,0 +1,35 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Simulator = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../hooks");
+var simulators_1 = require("../simulators");
+exports.Simulator = (0, reactive_react_1.observer)(function (props) {
+    var screen = (0, hooks_1.useScreen)();
+    if (screen.type === core_1.ScreenType.PC)
+        return react_1.default.createElement(simulators_1.PCSimulator, __assign({}, props), props.children);
+    if (screen.type === core_1.ScreenType.Mobile)
+        return react_1.default.createElement(simulators_1.MobileSimulator, __assign({}, props), props.children);
+    if (screen.type === core_1.ScreenType.Responsive)
+        return (react_1.default.createElement(simulators_1.ResponsiveSimulator, __assign({}, props), props.children));
+    return react_1.default.createElement(simulators_1.PCSimulator, __assign({}, props), props.children);
+}, {
+    scheduler: shared_1.requestIdle,
+});

package/lib/containers/Viewport.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IViewportProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder'> {
+    placeholder?: React.ReactNode;
+    dragTipsDirection?: 'left' | 'right';
+}
+export declare const Viewport: React.FC<IViewportProps>;

package/lib/containers/Viewport.js

@@ -0,0 +1,114 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewport = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../hooks");
+var widgets_1 = require("../widgets");
+var shared_1 = require("@mdesignable/shared");
+var classnames_1 = __importDefault(require("classnames"));
+var Viewport = function (_a) {
+    var placeholder = _a.placeholder, dragTipsDirection = _a.dragTipsDirection, props = __rest(_a, ["placeholder", "dragTipsDirection"]);
+    var _b = __read((0, react_1.useState)(false), 2), loaded = _b[0], setLoaded = _b[1];
+    var prefix = (0, hooks_1.usePrefix)('viewport');
+    var viewport = (0, hooks_1.useViewport)();
+    var ref = (0, react_1.useRef)();
+    var viewportRef = (0, react_1.useRef)();
+    var isFrameRef = (0, react_1.useRef)(false);
+    (0, react_1.useLayoutEffect)(function () {
+        var frameElement = ref.current.querySelector('iframe');
+        if (!viewport)
+            return;
+        if (viewportRef.current && viewportRef.current !== viewport) {
+            viewportRef.current.onUnmount();
+        }
+        if (frameElement) {
+            frameElement.addEventListener('load', function () {
+                viewport.onMount(frameElement, frameElement.contentWindow);
+                (0, shared_1.requestIdle)(function () {
+                    isFrameRef.current = true;
+                    setLoaded(true);
+                });
+            });
+        }
+        else {
+            viewport.onMount(ref.current, shared_1.globalThisPolyfill);
+            (0, shared_1.requestIdle)(function () {
+                isFrameRef.current = false;
+                setLoaded(true);
+            });
+        }
+        viewportRef.current = viewport;
+        return function () {
+            viewport.onUnmount();
+        };
+    }, [viewport]);
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(prefix, props.className), style: __assign({ opacity: !loaded ? 0 : 1, overflow: isFrameRef.current ? 'hidden' : 'overlay' }, props.style) }),
+        props.children,
+        react_1.default.createElement(widgets_1.AuxToolWidget, null),
+        react_1.default.createElement(widgets_1.EmptyWidget, { dragTipsDirection: dragTipsDirection }, placeholder)));
+};
+exports.Viewport = Viewport;

package/lib/containers/Workbench.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Workbench: React.FC;

package/lib/containers/Workbench.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Workbench = void 0;
+var react_1 = __importDefault(require("react"));
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../hooks");
+var Workspace_1 = require("./Workspace");
+exports.Workbench = (0, reactive_react_1.observer)(function (props) {
+    var _a;
+    var workbench = (0, hooks_1.useWorkbench)();
+    return (react_1.default.createElement(Workspace_1.Workspace, { id: (_a = workbench.currentWorkspace) === null || _a === void 0 ? void 0 : _a.id }, props.children));
+});

package/lib/containers/Workspace.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface IWorkspaceProps {
+    id?: string;
+    title?: string;
+    description?: string;
+}
+export declare const Workspace: React.FC<IWorkspaceProps>;

package/lib/containers/Workspace.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Workspace = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../hooks");
+var context_1 = require("../context");
+var Workspace = function (_a) {
+    var id = _a.id, title = _a.title, description = _a.description, props = __rest(_a, ["id", "title", "description"]);
+    var oldId = (0, react_1.useRef)();
+    var designer = (0, hooks_1.useDesigner)();
+    var workspace = (0, react_1.useMemo)(function () {
+        if (!designer)
+            return;
+        if (oldId.current && oldId.current !== id) {
+            var old = designer.workbench.findWorkspaceById(oldId.current);
+            if (old)
+                old.viewport.detachEvents();
+        }
+        var workspace = {
+            id: id || 'index',
+            title: title,
+            description: description,
+        };
+        designer.workbench.ensureWorkspace(workspace);
+        oldId.current = workspace.id;
+        return workspace;
+    }, [id, designer]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(context_1.WorkspaceContext.Provider, { value: workspace }, props.children)));
+};
+exports.Workspace = Workspace;

package/lib/containers/index.d.ts

@@ -0,0 +1,7 @@
+import './styles.less';
+export * from './Layout';
+export * from './Designer';
+export * from './Workspace';
+export * from './Simulator';
+export * from './Viewport';
+export * from './Workbench';

package/lib/containers/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./styles.less");
+__exportStar(require("./Layout"), exports);
+__exportStar(require("./Designer"), exports);
+__exportStar(require("./Workspace"), exports);
+__exportStar(require("./Simulator"), exports);
+__exportStar(require("./Viewport"), exports);
+__exportStar(require("./Workbench"), exports);