@vived/sandbox 1.0.0

package/dist/cjs/Frameworks/React/Components/Sandbox/Sandbox.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sandbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WorkspaceBottomToolbar_1 = require("./Components/WorkspaceBottomToolbar/WorkspaceBottomToolbar");
+const WorkspaceTopToolbar_1 = require("./Components/WorkspaceTopToolbar/WorkspaceTopToolbar");
+const HostWrapper_1 = require("./Components/HostWrapper/HostWrapper");
+const WorkspaceLeft_1 = require("./Components/WorkspaceLeft/WorkspaceLeft");
+const WorkspaceRight_1 = require("./Components/WorkspaceRight/WorkspaceRight");
+const WorkspaceCenterWrapper_1 = require("./Components/WorkspaceCenterWrapper/WorkspaceCenterWrapper");
+const WorkspaceWrapper_1 = require("./Components/WorkspaceWrapper/WorkspaceWrapper");
+const Sandbox_module_scss_1 = __importDefault(require("./Sandbox.module.scss"));
+const Sandbox = ({ workspaceCenterContentRef, topToolbarContent, workspaceLeftContent, workspaceRightContent, workspaceCenterContent, bottomToolbarContent, ...otherProps }) => {
+    return ((0, jsx_runtime_1.jsxs)(HostWrapper_1.HostWrapper, { ...otherProps, children: [(0, jsx_runtime_1.jsx)(WorkspaceTopToolbar_1.WorkspaceTopToolbar, { children: topToolbarContent }), (0, jsx_runtime_1.jsxs)(WorkspaceWrapper_1.WorkspaceWrapper, { style: { backgroundColor: "rgba(255, 255, 255" }, children: [(0, jsx_runtime_1.jsx)(WorkspaceLeft_1.WorkspaceLeft, { style: { backgroundColor: "rgb(200, 200, 200)" }, children: workspaceLeftContent }), (0, jsx_runtime_1.jsx)(WorkspaceCenterWrapper_1.WorkspaceCenterWrapper, { style: { backgroundColor: "rgb(225, 225, 225)" }, children: (0, jsx_runtime_1.jsx)("div", { id: "sandbox-workspace-slide-content", ref: workspaceCenterContentRef, className: Sandbox_module_scss_1.default.slideContentContainer, children: workspaceCenterContent }) }), (0, jsx_runtime_1.jsx)(WorkspaceRight_1.WorkspaceRight, { style: { backgroundColor: "rgb(200, 200, 200)" }, children: workspaceRightContent })] }), (0, jsx_runtime_1.jsx)(WorkspaceBottomToolbar_1.WorkspaceBottomToolbar, { children: bottomToolbarContent })] }));
+};
+exports.Sandbox = Sandbox;
+//# sourceMappingURL=Sandbox.js.map

package/dist/cjs/Frameworks/React/Components/Sandbox/Sandbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sandbox.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Components/Sandbox/Sandbox.tsx"],"names":[],"mappings":";;;;;;;AAEA,uGAAoG;AACpG,8FAA2F;AAC3F,sEAAmE;AACnE,4EAAyE;AACzE,+EAA4E;AAC5E,uGAAoG;AACpG,qFAAkF;AAElF,gFAA0C;AAWnC,MAAM,OAAO,GAAG,CAAC,EACtB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,UAAU,EAC4B,EAAE,EAAE;IAC7C,OAAO,CACL,wBAAC,yBAAW,OAAK,UAAU,aACzB,uBAAC,yCAAmB,cAAE,iBAAiB,GAAuB,EAC9D,wBAAC,mCAAgB,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,oBAAoB,EAAE,aAChE,uBAAC,6BAAa,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,oBAAoB,EAAE,YAC5D,oBAAoB,GACP,EAChB,uBAAC,+CAAsB,IACrB,KAAK,EAAE,EAAE,eAAe,EAAE,oBAAoB,EAAE,YAEhD,gCACE,EAAE,EAAC,iCAAiC,EACpC,GAAG,EAAE,yBAAyB,EAC9B,SAAS,EAAE,6BAAK,CAAC,qBAAqB,YAErC,sBAAsB,GACnB,GACiB,EACzB,uBAAC,+BAAc,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,oBAAoB,EAAE,YAC7D,qBAAqB,GACP,IACA,EACnB,uBAAC,+CAAsB,cAAE,oBAAoB,GAA0B,IAC3D,CACf,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,OAAO,WAkClB","sourcesContent":["import { HTMLProps, ReactNode, RefObject } from \"react\";\r\n\r\nimport { WorkspaceBottomToolbar } from \"./Components/WorkspaceBottomToolbar/WorkspaceBottomToolbar\";\r\nimport { WorkspaceTopToolbar } from \"./Components/WorkspaceTopToolbar/WorkspaceTopToolbar\";\r\nimport { HostWrapper } from \"./Components/HostWrapper/HostWrapper\";\r\nimport { WorkspaceLeft } from \"./Components/WorkspaceLeft/WorkspaceLeft\";\r\nimport { WorkspaceRight } from \"./Components/WorkspaceRight/WorkspaceRight\";\r\nimport { WorkspaceCenterWrapper } from \"./Components/WorkspaceCenterWrapper/WorkspaceCenterWrapper\";\r\nimport { WorkspaceWrapper } from \"./Components/WorkspaceWrapper/WorkspaceWrapper\";\r\n\r\nimport style from \"./Sandbox.module.scss\";\r\n\r\nexport type SandboxProps = {\r\n  workspaceCenterContentRef?: RefObject<HTMLDivElement>;\r\n  topToolbarContent?: ReactNode;\r\n  workspaceLeftContent?: ReactNode;\r\n  workspaceCenterContent?: ReactNode;\r\n  workspaceRightContent?: ReactNode;\r\n  bottomToolbarContent?: ReactNode;\r\n};\r\n\r\nexport const Sandbox = ({\r\n  workspaceCenterContentRef,\r\n  topToolbarContent,\r\n  workspaceLeftContent,\r\n  workspaceRightContent,\r\n  workspaceCenterContent,\r\n  bottomToolbarContent,\r\n  ...otherProps\r\n}: SandboxProps & HTMLProps<HTMLDivElement>) => {\r\n  return (\r\n    <HostWrapper {...otherProps}>\r\n      <WorkspaceTopToolbar>{topToolbarContent}</WorkspaceTopToolbar>\r\n      <WorkspaceWrapper style={{ backgroundColor: \"rgba(255, 255, 255\" }}>\r\n        <WorkspaceLeft style={{ backgroundColor: \"rgb(200, 200, 200)\" }}>\r\n          {workspaceLeftContent}\r\n        </WorkspaceLeft>\r\n        <WorkspaceCenterWrapper\r\n          style={{ backgroundColor: \"rgb(225, 225, 225)\" }}\r\n        >\r\n          <div\r\n            id=\"sandbox-workspace-slide-content\"\r\n            ref={workspaceCenterContentRef}\r\n            className={style.slideContentContainer}\r\n          >\r\n            {workspaceCenterContent}\r\n          </div>\r\n        </WorkspaceCenterWrapper>\r\n        <WorkspaceRight style={{ backgroundColor: \"rgb(200, 200, 200)\" }}>\r\n          {workspaceRightContent}\r\n        </WorkspaceRight>\r\n      </WorkspaceWrapper>\r\n      <WorkspaceBottomToolbar>{bottomToolbarContent}</WorkspaceBottomToolbar>\r\n    </HostWrapper>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Components/ShadowDom/AssetPluginShadowDom.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetPluginShadowDom = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+/**
+ * Creates a shadow dom by attaching a shadowRoot to this components parent element.
+ */
+const AssetPluginShadowDom = ({ mode, delegateFocus, stylesheets, children }) => {
+    const [initialized, setInitialized] = (0, react_1.useState)(false);
+    const placeholderRef = (0, react_1.useRef)(null);
+    const shadowParentRef = (0, react_1.useRef)();
+    const shadowRootRef = (0, react_1.useRef)();
+    const shadowChildRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        if (!initialized) {
+            if (placeholderRef &&
+                placeholderRef.current &&
+                placeholderRef.current.parentElement) {
+                // Get the placeholder's parent element and assign to AssetPluginShadowDomParentRef
+                shadowParentRef.current = placeholderRef.current.parentElement;
+                // Create the shadowRoot from the shadowParent element and assign to the shadowRootRef (this creates the shadow dom)
+                shadowRootRef.current = shadowParentRef.current.attachShadow({
+                    mode: mode || "open",
+                    delegatesFocus: delegateFocus || false
+                });
+                const node = document.createElement("div");
+                node.id = "asset-plugin-shadow-child";
+                node.style.width = "100%";
+                node.style.height = "100%";
+                node.style.position = "relative";
+                shadowRootRef.current.innerHTML = getStyleSheetsAsString();
+                shadowRootRef.current.appendChild(node);
+                shadowChildRef.current = node;
+                // If we've got to this point, the shadow dom has been created and doesn't need to be created again. At this point we have initialized the shadow dom.
+                setInitialized(true);
+            }
+        }
+        else {
+            if (shadowRootRef && shadowRootRef.current && shadowChildRef.current) {
+                shadowRootRef.current.innerHTML = getStyleSheetsAsString();
+                shadowRootRef.current.appendChild(shadowChildRef.current);
+            }
+        }
+        // eslint-disable-next-line
+    }, [placeholderRef, initialized, mode, delegateFocus, stylesheets]);
+    const getStyleSheetsAsString = () => {
+        let innerHtml = "";
+        stylesheets?.forEach((str) => {
+            innerHtml = innerHtml.concat(`<link type="text/css" rel="stylesheet" href="${str}"></link>`);
+        });
+        return innerHtml;
+    };
+    if (!initialized) {
+        return (0, jsx_runtime_1.jsx)("div", { ref: placeholderRef });
+    }
+    if (shadowChildRef.current) {
+        return (0, react_dom_1.createPortal)(children, shadowChildRef.current);
+    }
+    else
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+};
+exports.AssetPluginShadowDom = AssetPluginShadowDom;
+//# sourceMappingURL=AssetPluginShadowDom.js.map

package/dist/cjs/Frameworks/React/Components/ShadowDom/AssetPluginShadowDom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPluginShadowDom.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Components/ShadowDom/AssetPluginShadowDom.tsx"],"names":[],"mappings":";;;;AAAA,iCAA+D;AAC/D,yCAAyC;AASzC;;GAEG;AACI,MAAM,oBAAoB,GAAG,CAAC,EACnC,IAAI,EACJ,aAAa,EACb,WAAW,EACX,QAAQ,EACoB,EAAE,EAAE;IAChC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACtD,MAAM,cAAc,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,eAAe,GAAG,IAAA,cAAM,GAAe,CAAC;IAC9C,MAAM,aAAa,GAAG,IAAA,cAAM,GAAc,CAAC;IAC3C,MAAM,cAAc,GAAG,IAAA,cAAM,GAAkB,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,IACE,cAAc;gBACd,cAAc,CAAC,OAAO;gBACtB,cAAc,CAAC,OAAO,CAAC,aAAa,EACpC,CAAC;gBACD,mFAAmF;gBACnF,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;gBAE/D,oHAAoH;gBACpH,aAAa,CAAC,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC;oBAC3D,IAAI,EAAE,IAAI,IAAI,MAAM;oBACpB,cAAc,EAAE,aAAa,IAAI,KAAK;iBACvC,CAAC,CAAC;gBAEH,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC3C,IAAI,CAAC,EAAE,GAAG,2BAA2B,CAAC;gBACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;gBAEjC,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,sBAAsB,EAAE,CAAC;gBAC3D,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACxC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAE9B,sJAAsJ;gBACtJ,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,aAAa,IAAI,aAAa,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;gBACrE,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,sBAAsB,EAAE,CAAC;gBAC3D,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC;QACD,2BAA2B;IAC7B,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpE,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,WAAW,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC3B,SAAS,GAAG,SAAS,CAAC,MAAM,CAC1B,gDAAgD,GAAG,WAAW,CAC/D,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,gCAAK,GAAG,EAAE,cAAc,GAAI,CAAC;IACtC,CAAC;IACD,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;QAC3B,OAAO,IAAA,wBAAY,EAAC,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC;;QAAM,OAAO,kDAAK,CAAC;AACtB,CAAC,CAAC;AApEW,QAAA,oBAAoB,wBAoE/B","sourcesContent":["import { ReactNode, useEffect, useRef, useState } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\n\r\nexport type AssetPluginShadowDomFCProps = {\r\n  mode?: \"open\" | \"closed\";\r\n  delegateFocus?: boolean;\r\n  stylesheets?: string[];\r\n  children?: ReactNode;\r\n};\r\n\r\n/**\r\n * Creates a shadow dom by attaching a shadowRoot to this components parent element.\r\n */\r\nexport const AssetPluginShadowDom = ({\r\n  mode,\r\n  delegateFocus,\r\n  stylesheets,\r\n  children\r\n}: AssetPluginShadowDomFCProps) => {\r\n  const [initialized, setInitialized] = useState(false);\r\n  const placeholderRef = useRef<HTMLDivElement>(null);\r\n  const shadowParentRef = useRef<HTMLElement>();\r\n  const shadowRootRef = useRef<ShadowRoot>();\r\n  const shadowChildRef = useRef<HTMLDivElement>();\r\n\r\n  useEffect(() => {\r\n    if (!initialized) {\r\n      if (\r\n        placeholderRef &&\r\n        placeholderRef.current &&\r\n        placeholderRef.current.parentElement\r\n      ) {\r\n        // Get the placeholder's parent element and assign to AssetPluginShadowDomParentRef\r\n        shadowParentRef.current = placeholderRef.current.parentElement;\r\n\r\n        // Create the shadowRoot from the shadowParent element and assign to the shadowRootRef (this creates the shadow dom)\r\n        shadowRootRef.current = shadowParentRef.current.attachShadow({\r\n          mode: mode || \"open\",\r\n          delegatesFocus: delegateFocus || false\r\n        });\r\n\r\n        const node = document.createElement(\"div\");\r\n        node.id = \"asset-plugin-shadow-child\";\r\n        node.style.width = \"100%\";\r\n        node.style.height = \"100%\";\r\n        node.style.position = \"relative\";\r\n\r\n        shadowRootRef.current.innerHTML = getStyleSheetsAsString();\r\n        shadowRootRef.current.appendChild(node);\r\n        shadowChildRef.current = node;\r\n\r\n        // If we've got to this point, the shadow dom has been created and doesn't need to be created again. At this point we have initialized the shadow dom.\r\n        setInitialized(true);\r\n      }\r\n    } else {\r\n      if (shadowRootRef && shadowRootRef.current && shadowChildRef.current) {\r\n        shadowRootRef.current.innerHTML = getStyleSheetsAsString();\r\n        shadowRootRef.current.appendChild(shadowChildRef.current);\r\n      }\r\n    }\r\n    // eslint-disable-next-line\r\n  }, [placeholderRef, initialized, mode, delegateFocus, stylesheets]);\r\n\r\n  const getStyleSheetsAsString = () => {\r\n    let innerHtml = \"\";\r\n\r\n    stylesheets?.forEach((str) => {\r\n      innerHtml = innerHtml.concat(\r\n        `<link type=\"text/css\" rel=\"stylesheet\" href=\"${str}\"></link>`\r\n      );\r\n    });\r\n\r\n    return innerHtml;\r\n  };\r\n\r\n  if (!initialized) {\r\n    return <div ref={placeholderRef} />;\r\n  }\r\n  if (shadowChildRef.current) {\r\n    return createPortal(children, shadowChildRef.current);\r\n  } else return <></>;\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Components/SuperCentered/SuperCentered.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuperCentered = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SuperCentered_module_scss_1 = __importDefault(require("./SuperCentered.module.scss"));
+/**
+ * @description A container that can have one child element to be super centered, both vertically and horizontally.
+ */
+const SuperCentered = ({ className, children, ...otherProps }) => {
+    const classNames = [SuperCentered_module_scss_1.default.parent, className].join(" ");
+    return ((0, jsx_runtime_1.jsx)("div", { className: classNames, ...otherProps, children: children }));
+};
+exports.SuperCentered = SuperCentered;
+//# sourceMappingURL=SuperCentered.js.map

package/dist/cjs/Frameworks/React/Components/SuperCentered/SuperCentered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperCentered.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Components/SuperCentered/SuperCentered.tsx"],"names":[],"mappings":";;;;;;;AAEA,4FAAgD;AAUhD;;GAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACkC,EAAE,EAAE;IACnD,MAAM,UAAU,GAAG,CAAC,mCAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACL,gCAAK,SAAS,EAAE,UAAU,KAAM,UAAU,YACvC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB","sourcesContent":["/// https://web.dev/one-line-layouts/\r\nimport React, { HTMLProps } from \"react\";\r\nimport style from \"./SuperCentered.module.scss\";\r\n\r\nexport type SuperCenteredProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /**\r\n   * The single child element to be super centered (vertically & horizontally) inside the parent container.\r\n   * @type {element}\r\n   */\r\n  children?: React.ReactChild;\r\n};\r\n\r\n/**\r\n * @description A container that can have one child element to be super centered, both vertically and horizontally.\r\n */\r\nexport const SuperCentered = ({\r\n  className,\r\n  children,\r\n  ...otherProps\r\n}: SuperCenteredProps & HTMLProps<HTMLDivElement>) => {\r\n  const classNames = [style.parent, className].join(\" \");\r\n\r\n  return (\r\n    <div className={classNames} {...otherProps}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/AppAssetList.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppAssetList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShowArchivedAssetsCheckbox_1 = require("./ShowArchivedAssetsCheckbox");
+const useSingletonPM_1 = require("../Hooks/useSingletonPM");
+const AssetCard_1 = require("./AssetCard/AssetCard");
+const host_1 = require("@vived/host");
+const react_1 = require("react");
+const SandboxAppObjectsContext_1 = __importDefault(require("../SandboxAppObjectsContext"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const AppAssetList = () => {
+    const appAssets = (0, useSingletonPM_1.useSingletonPM)(host_1.appAssetListAdapter);
+    const sandboxAppObjects = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    function renderAssetCards() {
+        if (appAssets.length === 0) {
+            return (0, jsx_runtime_1.jsx)("p", { children: "App has no assets" });
+        }
+        else {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: appAssets.map((r) => makeCard(r)) });
+        }
+    }
+    function makeCard(assetID) {
+        return (0, jsx_runtime_1.jsx)(AssetCard_1.AssetCard, { assetID: assetID }, assetID);
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: "App Assets:" }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 1, sx: { my: 1, alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", size: "small", onClick: () => (0, host_1.setSandboxAppState)(host_1.SandboxState.NEW_APP_ASSET, sandboxAppObjects), children: "Add App Asset" }), (0, jsx_runtime_1.jsx)(ShowArchivedAssetsCheckbox_1.ShowArchivedAssetsCheckbox, {})] }), renderAssetCards()] }));
+};
+exports.AppAssetList = AppAssetList;
+//# sourceMappingURL=AppAssetList.js.map

package/dist/cjs/Frameworks/React/Containers/AppAssetList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppAssetList.js","sourceRoot":"","sources":["../../../../../src/Frameworks/React/Containers/AppAssetList.tsx"],"names":[],"mappings":";;;;;;;AAAA,6EAA0E;AAC1E,4DAAyD;AACzD,qDAAkD;AAClD,sCAIqB;AACrB,iCAAmC;AACnC,2FAAmE;AACnE,kEAA0C;AAC1C,gEAAwC;AAEjC,MAAM,YAAY,GAAG,GAAgB,EAAE;IAC5C,MAAM,SAAS,GAAG,IAAA,+BAAc,EAAW,0BAAmB,CAAC,CAAC;IAChE,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAE/D,SAAS,gBAAgB;QACvB,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAO,8DAAwB,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,OAAO,2DAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAI,CAAC;QAClD,CAAC;IACH,CAAC;IAED,SAAS,QAAQ,CAAC,OAAe;QAC/B,OAAO,uBAAC,qBAAS,IAAe,OAAO,EAAE,OAAO,IAAzB,OAAO,CAAsB,CAAC;IACvD,CAAC;IAED,OAAO,CACL,6DACE,yDAAoB,EACpB,wBAAC,eAAK,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aACpE,uBAAC,gBAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAA,yBAAkB,EAAC,mBAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC,8BAI5D,EACT,uBAAC,uDAA0B,KAAG,IACxB,EACP,gBAAgB,EAAE,IAClB,CACJ,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,YAAY,gBAkCvB","sourcesContent":["import { ShowArchivedAssetsCheckbox } from \"./ShowArchivedAssetsCheckbox\";\r\nimport { useSingletonPM } from \"../Hooks/useSingletonPM\";\r\nimport { AssetCard } from \"./AssetCard/AssetCard\";\r\nimport {\r\n  appAssetListAdapter,\r\n  setSandboxAppState,\r\n  SandboxState\r\n} from \"@vived/host\";\r\nimport { useContext } from \"react\";\r\nimport SandboxAppObjectsContext from \"../SandboxAppObjectsContext\";\r\nimport Button from \"@mui/material/Button\";\r\nimport Stack from \"@mui/material/Stack\";\r\n\r\nexport const AppAssetList = (): JSX.Element => {\r\n  const appAssets = useSingletonPM<string[]>(appAssetListAdapter);\r\n  const sandboxAppObjects = useContext(SandboxAppObjectsContext);\r\n\r\n  function renderAssetCards() {\r\n    if (appAssets.length === 0) {\r\n      return <p>App has no assets</p>;\r\n    } else {\r\n      return <>{appAssets.map((r) => makeCard(r))}</>;\r\n    }\r\n  }\r\n\r\n  function makeCard(assetID: string) {\r\n    return <AssetCard key={assetID} assetID={assetID} />;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <h2>App Assets:</h2>\r\n      <Stack direction=\"row\" spacing={1} sx={{ my: 1, alignItems: \"center\" }}>\r\n        <Button\r\n          variant=\"contained\"\r\n          size=\"small\"\r\n          onClick={() =>\r\n            setSandboxAppState(SandboxState.NEW_APP_ASSET, sandboxAppObjects)\r\n          }\r\n        >\r\n          Add App Asset\r\n        </Button>\r\n        <ShowArchivedAssetsCheckbox />\r\n      </Stack>\r\n      {renderAssetCards()}\r\n    </>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/AssetCard/AssetCard.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const host_1 = require("@vived/host");
+const react_1 = require("react");
+const usePM_1 = require("../../Hooks/usePM");
+const SandboxAppObjectsContext_1 = __importDefault(require("../../SandboxAppObjectsContext"));
+require("./style.css");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const AssetCard = ({ assetID }) => {
+    const hostAppObjects = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    const { archived, description, id, name } = (0, usePM_1.usePM)(assetID, host_1.assetAdapter);
+    const [disableArchive, setDisableArchive] = (0, react_1.useState)(false);
+    function unArchive() {
+        setDisableArchive(true);
+        (0, host_1.archiveAsset)(assetID, false, hostAppObjects)
+            .then(() => {
+            setDisableArchive(false);
+        })
+            .catch(() => {
+            setDisableArchive(false);
+        });
+    }
+    function archive() {
+        setDisableArchive(true);
+        (0, host_1.archiveAsset)(assetID, true, hostAppObjects)
+            .then(() => {
+            setDisableArchive(false);
+        })
+            .catch(() => {
+            setDisableArchive(false);
+        });
+    }
+    if (archived) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "archivedAssetCard", children: [(0, jsx_runtime_1.jsx)("h3", { children: name + " - Archived" }), (0, jsx_runtime_1.jsx)("p", { children: id }), (0, jsx_runtime_1.jsx)("p", { children: description }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", onClick: unArchive, disabled: disableArchive, children: disableArchive ? "Unarchiving..." : "Unarchive" })] }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "assetCard", children: [(0, jsx_runtime_1.jsx)("h3", { children: name }), (0, jsx_runtime_1.jsx)("p", { children: id }), (0, jsx_runtime_1.jsx)("p", { children: description }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", onClick: () => (0, host_1.editAppAsset)(assetID, hostAppObjects), children: "Edit" }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", onClick: archive, disabled: disableArchive, children: disableArchive ? "Archiving..." : "Archive" })] }));
+    }
+};
+exports.AssetCard = AssetCard;
+//# sourceMappingURL=AssetCard.js.map

package/dist/cjs/Frameworks/React/Containers/AssetCard/AssetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/AssetCard/AssetCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAAgF;AAChF,iCAA6C;AAC7C,6CAA0C;AAC1C,8FAAsE;AACtE,uBAAqB;AACrB,kEAA0C;AAMnC,MAAM,SAAS,GAAG,CAAC,EAAE,OAAO,EAAkB,EAAe,EAAE;IACpE,MAAM,cAAc,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAE5D,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,IAAA,aAAK,EAC/C,OAAO,EACP,mBAAY,CACb,CAAC;IACF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,SAAS;QAChB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,IAAA,mBAAY,EAAC,OAAO,EAAE,KAAK,EAAE,cAAc,CAAC;aACzC,IAAI,CAAC,GAAG,EAAE;YACT,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;IACP,CAAC;IAED,SAAS,OAAO;QACd,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAExB,IAAA,mBAAY,EAAC,OAAO,EAAE,IAAI,EAAE,cAAc,CAAC;aACxC,IAAI,CAAC,GAAG,EAAE;YACT,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;IACP,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,iCAAK,SAAS,EAAE,mBAAmB,aACjC,yCAAK,IAAI,GAAG,aAAa,GAAM,EAC/B,wCAAI,EAAE,GAAK,EACX,wCAAI,WAAW,GAAK,EACpB,uBAAC,gBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,YACrE,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,GACzC,IACL,CACP,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,iCAAK,SAAS,EAAE,WAAW,aACzB,yCAAK,IAAI,GAAM,EACf,wCAAI,EAAE,GAAK,EACX,wCAAI,WAAW,GAAK,EACpB,uBAAC,gBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAA,mBAAY,EAAC,OAAO,EAAE,cAAc,CAAC,qBAEvE,EACT,uBAAC,gBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,YACnE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,GACrC,IACL,CACP,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AA1DW,QAAA,SAAS,aA0DpB","sourcesContent":["import { archiveAsset, assetAdapter, AssetVM, editAppAsset } from \"@vived/host\";\r\nimport { useContext, useState } from \"react\";\r\nimport { usePM } from \"../../Hooks/usePM\";\r\nimport SandboxAppObjectsContext from \"../../SandboxAppObjectsContext\";\r\nimport \"./style.css\";\r\nimport Button from \"@mui/material/Button\";\r\n\r\nexport interface AssetCardProps {\r\n  assetID: string;\r\n}\r\n\r\nexport const AssetCard = ({ assetID }: AssetCardProps): JSX.Element => {\r\n  const hostAppObjects = useContext(SandboxAppObjectsContext);\r\n\r\n  const { archived, description, id, name } = usePM<AssetVM>(\r\n    assetID,\r\n    assetAdapter\r\n  );\r\n  const [disableArchive, setDisableArchive] = useState(false);\r\n\r\n  function unArchive() {\r\n    setDisableArchive(true);\r\n    archiveAsset(assetID, false, hostAppObjects)\r\n      .then(() => {\r\n        setDisableArchive(false);\r\n      })\r\n      .catch(() => {\r\n        setDisableArchive(false);\r\n      });\r\n  }\r\n\r\n  function archive() {\r\n    setDisableArchive(true);\r\n\r\n    archiveAsset(assetID, true, hostAppObjects)\r\n      .then(() => {\r\n        setDisableArchive(false);\r\n      })\r\n      .catch(() => {\r\n        setDisableArchive(false);\r\n      });\r\n  }\r\n\r\n  if (archived) {\r\n    return (\r\n      <div className={\"archivedAssetCard\"}>\r\n        <h3>{name + \" - Archived\"}</h3>\r\n        <p>{id}</p>\r\n        <p>{description}</p>\r\n        <Button variant=\"contained\" onClick={unArchive} disabled={disableArchive}>\r\n          {disableArchive ? \"Unarchiving...\" : \"Unarchive\"}\r\n        </Button>\r\n      </div>\r\n    );\r\n  } else {\r\n    return (\r\n      <div className={\"assetCard\"}>\r\n        <h3>{name}</h3>\r\n        <p>{id}</p>\r\n        <p>{description}</p>\r\n        <Button variant=\"contained\" onClick={() => editAppAsset(assetID, hostAppObjects)}>\r\n          Edit\r\n        </Button>\r\n        <Button variant=\"contained\" onClick={archive} disabled={disableArchive}>\r\n          {disableArchive ? \"Archiving...\" : \"Archive\"}\r\n        </Button>\r\n      </div>\r\n    );\r\n  }\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/BabylonInspectorCheckbox.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BabylonInspectorCheckbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const host_1 = require("@vived/host");
+const useSingletonPM_1 = require("../Hooks/useSingletonPM");
+const SandboxAppObjectsContext_1 = __importDefault(require("../SandboxAppObjectsContext"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+const BabylonInspectorCheckbox = () => {
+    const showBabylon = (0, useSingletonPM_1.useSingletonPM)(host_1.showInspectorAdapter);
+    const hostAppObject = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    return ((0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { onChange: () => (0, host_1.toggleShowInspector)(hostAppObject), checked: showBabylon }), label: "Babylon Inspector" }));
+};
+exports.BabylonInspectorCheckbox = BabylonInspectorCheckbox;
+//# sourceMappingURL=BabylonInspectorCheckbox.js.map

package/dist/cjs/Frameworks/React/Containers/BabylonInspectorCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BabylonInspectorCheckbox.js","sourceRoot":"","sources":["../../../../../src/Frameworks/React/Containers/BabylonInspectorCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmC;AACnC,sCAAwE;AACxE,4DAAyD;AACzD,2FAAmE;AACnE,sEAA8C;AAC9C,sFAA8D;AAEvD,MAAM,wBAAwB,GAAG,GAAgB,EAAE;IACxD,MAAM,WAAW,GAAG,IAAA,+BAAc,EAAU,2BAAoB,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAE3D,OAAO,CACL,uBAAC,0BAAgB,IACf,OAAO,EACL,uBAAC,kBAAQ,IACP,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAA,0BAAmB,EAAC,aAAa,CAAC,EAClD,OAAO,EAAE,WAAW,GACpB,EAEJ,KAAK,EAAC,mBAAmB,GACzB,CACH,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,wBAAwB,4BAenC","sourcesContent":["import { useContext } from \"react\";\r\nimport { showInspectorAdapter, toggleShowInspector } from \"@vived/host\";\r\nimport { useSingletonPM } from \"../Hooks/useSingletonPM\";\r\nimport SandboxAppObjectsContext from \"../SandboxAppObjectsContext\";\r\nimport Checkbox from \"@mui/material/Checkbox\";\r\nimport FormControlLabel from \"@mui/material/FormControlLabel\";\r\n\r\nexport const BabylonInspectorCheckbox = (): JSX.Element => {\r\n  const showBabylon = useSingletonPM<boolean>(showInspectorAdapter);\r\n  const hostAppObject = useContext(SandboxAppObjectsContext);\r\n\r\n  return (\r\n    <FormControlLabel\r\n      control={\r\n        <Checkbox\r\n          onChange={() => toggleShowInspector(hostAppObject)}\r\n          checked={showBabylon}\r\n        />\r\n      }\r\n      label=\"Babylon Inspector\"\r\n    />\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/CancelAuthoringButton.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelAuthoringButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const host_1 = require("@vived/host");
+const react_1 = require("react");
+const SandboxAppObjectsContext_1 = __importDefault(require("../SandboxAppObjectsContext"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const CancelAuthoringButton = () => {
+    const hostAppObjects = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    return (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", onClick: () => (0, host_1.cancelEditing)(hostAppObjects), children: "Cancel" });
+};
+exports.CancelAuthoringButton = CancelAuthoringButton;
+//# sourceMappingURL=CancelAuthoringButton.js.map

package/dist/cjs/Frameworks/React/Containers/CancelAuthoringButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelAuthoringButton.js","sourceRoot":"","sources":["../../../../../src/Frameworks/React/Containers/CancelAuthoringButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAA4C;AAC5C,iCAAmC;AACnC,2FAAmE;AACnE,kEAA0C;AAEnC,MAAM,qBAAqB,GAAG,GAAgB,EAAE;IACrD,MAAM,cAAc,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAE5D,OAAO,uBAAC,gBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAA,oBAAa,EAAC,cAAc,CAAC,uBAAiB,CAAC;AACnG,CAAC,CAAC;AAJW,QAAA,qBAAqB,yBAIhC","sourcesContent":["import { cancelEditing } from \"@vived/host\";\r\nimport { useContext } from \"react\";\r\nimport SandboxAppObjectsContext from \"../SandboxAppObjectsContext\";\r\nimport Button from \"@mui/material/Button\";\r\n\r\nexport const CancelAuthoringButton = (): JSX.Element => {\r\n  const hostAppObjects = useContext(SandboxAppObjectsContext);\r\n\r\n  return <Button variant=\"contained\" onClick={() => cancelEditing(hostAppObjects)}>Cancel</Button>;\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/DeleteAppAssetButton.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteAppAssetButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const host_1 = require("@vived/host");
+const react_1 = require("react");
+const SandboxAppObjectsContext_1 = __importDefault(require("../SandboxAppObjectsContext"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const DeleteAppAssetButton = (props) => {
+    const { assetID } = props;
+    const hostAppObjects = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    function clickDelete() {
+        (0, host_1.deleteAsset)(assetID, hostAppObjects);
+    }
+    return (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", onClick: clickDelete, children: "Delete App Asset" });
+};
+exports.DeleteAppAssetButton = DeleteAppAssetButton;
+//# sourceMappingURL=DeleteAppAssetButton.js.map

package/dist/cjs/Frameworks/React/Containers/DeleteAppAssetButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteAppAssetButton.js","sourceRoot":"","sources":["../../../../../src/Frameworks/React/Containers/DeleteAppAssetButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAA0C;AAC1C,iCAAmC;AACnC,2FAAmE;AACnE,kEAA0C;AAMnC,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAe,EAAE;IAC3E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,cAAc,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAE5D,SAAS,WAAW;QAClB,IAAA,kBAAW,EAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,uBAAC,gBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,WAAW,iCAA2B,CAAC;AACrF,CAAC,CAAC;AATW,QAAA,oBAAoB,wBAS/B","sourcesContent":["import { deleteAsset } from \"@vived/host\";\r\nimport { useContext } from \"react\";\r\nimport SandboxAppObjectsContext from \"../SandboxAppObjectsContext\";\r\nimport Button from \"@mui/material/Button\";\r\n\r\nexport interface DeleteAssetProps {\r\n  assetID: string;\r\n}\r\n\r\nexport const DeleteAppAssetButton = (props: DeleteAssetProps): JSX.Element => {\r\n  const { assetID } = props;\r\n  const hostAppObjects = useContext(SandboxAppObjectsContext);\r\n\r\n  function clickDelete() {\r\n    deleteAsset(assetID, hostAppObjects);\r\n  }\r\n\r\n  return <Button variant=\"contained\" onClick={clickDelete}>Delete App Asset</Button>;\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/AlertDialogContent.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const host_1 = require("@vived/host");
+const usePM_1 = require("../../Hooks/usePM");
+const AlertDialogContent = ({ id }) => {
+    const { title, message, close, buttonLabel } = (0, usePM_1.usePM)(id, host_1.alertDialogAdapter);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: (0, jsx_runtime_1.jsx)("b", { children: title }) }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { style: { whiteSpace: "pre-line" }, children: message }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: close, children: buttonLabel }) })] }));
+};
+exports.AlertDialogContent = AlertDialogContent;
+//# sourceMappingURL=AlertDialogContent.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/AlertDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialogContent.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/AlertDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,gFAAwD;AACxD,gFAAwD;AACxD,4EAAoD;AACpD,kEAA0C;AAC1C,sCAAgE;AAChE,6CAA0C;AAMnC,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAoB,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAA,aAAK,EAClD,EAAE,EACF,yBAAkB,CACnB,CAAC;IAEF,OAAO,CACL,6DACE,uBAAC,qBAAW,cACV,wCAAI,KAAK,GAAK,GACF,EACd,uBAAC,uBAAa,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,YAC7C,OAAO,GACM,EAChB,uBAAC,uBAAa,cACZ,uBAAC,gBAAM,IAAC,OAAO,EAAE,KAAK,YAAG,WAAW,GAAU,GAChC,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,kBAAkB,sBAmB7B","sourcesContent":["import DialogActions from \"@mui/material/DialogActions\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\nimport Button from \"@mui/material/Button\";\r\nimport { alertDialogAdapter, AlertDialogVM } from \"@vived/host\";\r\nimport { usePM } from \"../../Hooks/usePM\";\r\n\r\nexport interface AlertDialogProps {\r\n  id: string;\r\n}\r\n\r\nexport const AlertDialogContent = ({ id }: AlertDialogProps): JSX.Element => {\r\n  const { title, message, close, buttonLabel } = usePM<AlertDialogVM>(\r\n    id,\r\n    alertDialogAdapter\r\n  );\r\n\r\n  return (\r\n    <>\r\n      <DialogTitle>\r\n        <b>{title}</b>\r\n      </DialogTitle>\r\n      <DialogContent style={{ whiteSpace: \"pre-line\" }}>\r\n        {message}\r\n      </DialogContent>\r\n      <DialogActions>\r\n        <Button onClick={close}>{buttonLabel}</Button>\r\n      </DialogActions>\r\n    </>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/ConfirmDialogContent.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const host_1 = require("@vived/host");
+const usePM_1 = require("../../Hooks/usePM");
+const ConfirmDialogContent = ({ id }) => {
+    const { cancel, cancelButtonLabel, confirm, confirmButtonLabel, message, title } = (0, usePM_1.usePM)(id, host_1.confirmDialogAdapter);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: (0, jsx_runtime_1.jsx)("b", { children: title }) }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { style: { whiteSpace: "pre-line" }, children: message }), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: cancel, children: cancelButtonLabel }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: confirm, children: confirmButtonLabel })] })] }));
+};
+exports.ConfirmDialogContent = ConfirmDialogContent;
+//# sourceMappingURL=ConfirmDialogContent.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/ConfirmDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialogContent.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/ConfirmDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,gFAAwD;AACxD,gFAAwD;AACxD,4EAAoD;AACpD,kEAA0C;AAC1C,sCAAoE;AACpE,6CAA0C;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EACnC,EAAE,EACiB,EAAe,EAAE;IACpC,MAAM,EACJ,MAAM,EACN,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,OAAO,EACP,KAAK,EACN,GAAG,IAAA,aAAK,EAAkB,EAAE,EAAE,2BAAoB,CAAC,CAAC;IAErD,OAAO,CACL,6DACE,uBAAC,qBAAW,cACV,wCAAI,KAAK,GAAK,GACF,EACd,uBAAC,uBAAa,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,YAC7C,OAAO,GACM,EAChB,wBAAC,uBAAa,eACZ,uBAAC,gBAAM,IAAC,OAAO,EAAE,MAAM,YAAG,iBAAiB,GAAU,EACrD,uBAAC,gBAAM,IAAC,OAAO,EAAE,OAAO,YAAG,kBAAkB,GAAU,IACzC,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,oBAAoB,wBA0B/B","sourcesContent":["import DialogActions from \"@mui/material/DialogActions\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\nimport Button from \"@mui/material/Button\";\r\nimport { confirmDialogAdapter, ConfirmDialogVM } from \"@vived/host\";\r\nimport { usePM } from \"../../Hooks/usePM\";\r\n\r\nexport interface ConfirmDialogProps {\r\n  id: string;\r\n}\r\n\r\nexport const ConfirmDialogContent = ({\r\n  id\r\n}: ConfirmDialogProps): JSX.Element => {\r\n  const {\r\n    cancel,\r\n    cancelButtonLabel,\r\n    confirm,\r\n    confirmButtonLabel,\r\n    message,\r\n    title\r\n  } = usePM<ConfirmDialogVM>(id, confirmDialogAdapter);\r\n\r\n  return (\r\n    <>\r\n      <DialogTitle>\r\n        <b>{title}</b>\r\n      </DialogTitle>\r\n      <DialogContent style={{ whiteSpace: \"pre-line\" }}>\r\n        {message}\r\n      </DialogContent>\r\n      <DialogActions>\r\n        <Button onClick={cancel}>{cancelButtonLabel}</Button>\r\n        <Button onClick={confirm}>{confirmButtonLabel}</Button>\r\n      </DialogActions>\r\n    </>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/GeneralDialog.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GeneralDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const AlertDialogContent_1 = require("./AlertDialogContent");
+const UnknownDialogContent_1 = require("./UnknownDialogContent");
+const ConfirmDialogContent_1 = require("./ConfirmDialogContent");
+const SpinnerDialogContent_1 = require("./SpinnerDialogContent");
+const MarkDownEditorContent_1 = require("./MarkDownEditorContent");
+const SelectModelDialogContent_1 = require("./SelectModelDialogContent");
+const host_1 = require("@vived/host");
+const SandboxAppObjectsContext_1 = __importDefault(require("../../SandboxAppObjectsContext"));
+const react_1 = require("react");
+const useSingletonPM_1 = require("../../Hooks/useSingletonPM");
+const GeneralDialog = () => {
+    const { open, id, dialogType, preventOutsideDismiss } = (0, useSingletonPM_1.useSingletonPM)(host_1.dialogQueueAdapter);
+    const hostAppObject = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    const renderDialogContent = () => {
+        switch (dialogType) {
+            case "ALERT":
+                return (0, jsx_runtime_1.jsx)(AlertDialogContent_1.AlertDialogContent, { id: id ?? "" });
+            case "CONFIRM":
+                return (0, jsx_runtime_1.jsx)(ConfirmDialogContent_1.ConfirmDialogContent, { id: id ?? "" });
+            case "SPINNER":
+                return (0, jsx_runtime_1.jsx)(SpinnerDialogContent_1.SpinnerDialogContent, { id: id ?? "" });
+            case "MARKDOWN_EDITOR":
+                return (0, jsx_runtime_1.jsx)(MarkDownEditorContent_1.MarkDownEditorDialogContent, { id: id ?? "" });
+            case "SELECT_CHANNEL_MODEL":
+                return (0, jsx_runtime_1.jsx)(SelectModelDialogContent_1.SelectModelDialogContent, {});
+            default:
+                return (0, jsx_runtime_1.jsx)(UnknownDialogContent_1.UnknownDialogContent, { type: dialogType });
+        }
+    };
+    if (!id) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { open: open, onClose: (_, reason) => {
+                if (preventOutsideDismiss && reason === "backdropClick")
+                    return;
+                (0, host_1.activeDialogHasClosed)(hostAppObject);
+            }, slotProps: { paper: { sx: { maxWidth: "896px", width: "100%" } } }, children: renderDialogContent() }));
+    }
+};
+exports.GeneralDialog = GeneralDialog;
+//# sourceMappingURL=GeneralDialog.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/GeneralDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralDialog.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/GeneralDialog.tsx"],"names":[],"mappings":";;;;;;;AAAA,kEAA0C;AAC1C,6DAA0D;AAC1D,iEAA8D;AAC9D,iEAA8D;AAC9D,iEAA8D;AAC9D,mEAAsE;AACtE,yEAAsE;AACtE,sCAIqB;AACrB,8FAAsE;AACtE,iCAAmC;AACnC,+DAA4D;AAErD,MAAM,aAAa,GAAG,GAAgB,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,GACnD,IAAA,+BAAc,EAAgB,yBAAkB,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAE3D,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,QAAQ,UAAU,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,uBAAC,uCAAkB,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,GAAI,CAAC;YAE9C,KAAK,SAAS;gBACZ,OAAO,uBAAC,2CAAoB,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,GAAI,CAAC;YAEhD,KAAK,SAAS;gBACZ,OAAO,uBAAC,2CAAoB,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,GAAI,CAAC;YAEhD,KAAK,iBAAiB;gBACpB,OAAO,uBAAC,mDAA2B,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,GAAI,CAAC;YAEvD,KAAK,sBAAsB;gBACzB,OAAO,uBAAC,mDAAwB,KAAG,CAAC;YAEtC;gBACE,OAAO,uBAAC,2CAAoB,IAAC,IAAI,EAAE,UAAU,GAAI,CAAC;QACtD,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,EAAE,EAAE,CAAC;QACR,OAAO,kDAAK,CAAC;IACf,CAAC;SAAM,CAAC;QACN,OAAO,CACL,uBAAC,gBAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;gBACrB,IAAI,qBAAqB,IAAI,MAAM,KAAK,eAAe;oBAAE,OAAO;gBAChE,IAAA,4BAAqB,EAAC,aAAa,CAAC,CAAC;YACvC,CAAC,EACD,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,YAEjE,mBAAmB,EAAE,GACf,CACV,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AA5CW,QAAA,aAAa,iBA4CxB","sourcesContent":["import Dialog from \"@mui/material/Dialog\";\r\nimport { AlertDialogContent } from \"./AlertDialogContent\";\r\nimport { UnknownDialogContent } from \"./UnknownDialogContent\";\r\nimport { ConfirmDialogContent } from \"./ConfirmDialogContent\";\r\nimport { SpinnerDialogContent } from \"./SpinnerDialogContent\";\r\nimport { MarkDownEditorDialogContent } from \"./MarkDownEditorContent\";\r\nimport { SelectModelDialogContent } from \"./SelectModelDialogContent\";\r\nimport {\r\n  activeDialogHasClosed,\r\n  dialogQueueAdapter,\r\n  DialogQueueVM\r\n} from \"@vived/host\";\r\nimport SandboxAppObjectsContext from \"../../SandboxAppObjectsContext\";\r\nimport { useContext } from \"react\";\r\nimport { useSingletonPM } from \"../../Hooks/useSingletonPM\";\r\n\r\nexport const GeneralDialog = (): JSX.Element => {\r\n  const { open, id, dialogType, preventOutsideDismiss } =\r\n    useSingletonPM<DialogQueueVM>(dialogQueueAdapter);\r\n\r\n  const hostAppObject = useContext(SandboxAppObjectsContext);\r\n\r\n  const renderDialogContent = (): JSX.Element => {\r\n    switch (dialogType) {\r\n      case \"ALERT\":\r\n        return <AlertDialogContent id={id ?? \"\"} />;\r\n\r\n      case \"CONFIRM\":\r\n        return <ConfirmDialogContent id={id ?? \"\"} />;\r\n\r\n      case \"SPINNER\":\r\n        return <SpinnerDialogContent id={id ?? \"\"} />;\r\n\r\n      case \"MARKDOWN_EDITOR\":\r\n        return <MarkDownEditorDialogContent id={id ?? \"\"} />;\r\n\r\n      case \"SELECT_CHANNEL_MODEL\":\r\n        return <SelectModelDialogContent />;\r\n\r\n      default:\r\n        return <UnknownDialogContent type={dialogType} />;\r\n    }\r\n  };\r\n\r\n  if (!id) {\r\n    return <></>;\r\n  } else {\r\n    return (\r\n      <Dialog\r\n        open={open}\r\n        onClose={(_, reason) => {\r\n          if (preventOutsideDismiss && reason === \"backdropClick\") return;\r\n          activeDialogHasClosed(hostAppObject);\r\n        }}\r\n        slotProps={{ paper: { sx: { maxWidth: \"896px\", width: \"100%\" } } }}\r\n      >\r\n        {renderDialogContent()}\r\n      </Dialog>\r\n    );\r\n  }\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/MarkDownEditorContent.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkDownEditorDialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const react_md_editor_1 = __importDefault(require("@uiw/react-md-editor"));
+const MarkDownEditorContent_module_scss_1 = __importDefault(require("./MarkDownEditorContent.module.scss"));
+const host_1 = require("@vived/host");
+const usePM_1 = require("../../Hooks/usePM");
+const MarkDownEditorDialogContent = ({ id }) => {
+    const [text, setText] = (0, react_1.useState)("");
+    const { initialText, confirm } = (0, usePM_1.usePM)(id, host_1.markDownEditorDialogAdapters);
+    (0, react_1.useEffect)(() => {
+        setText(initialText);
+    }, [initialText]);
+    const handleChange = (value) => {
+        setText(value || "");
+    };
+    const clickSaveButton = () => {
+        confirm(text);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: (0, jsx_runtime_1.jsx)("b", { children: "MarkDown Editor" }) }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { className: MarkDownEditorContent_module_scss_1.default.content, children: (0, jsx_runtime_1.jsx)(react_md_editor_1.default, { value: text, onChange: handleChange, visibleDragbar: false, height: "99%" }) }), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { children: "Close" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: clickSaveButton, children: "Save" })] })] }));
+};
+exports.MarkDownEditorDialogContent = MarkDownEditorDialogContent;
+//# sourceMappingURL=MarkDownEditorContent.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/MarkDownEditorContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkDownEditorContent.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/MarkDownEditorContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA4C;AAC5C,gFAAwD;AACxD,gFAAwD;AACxD,4EAAoD;AACpD,kEAA0C;AAC1C,2EAA4C;AAE5C,4GAAwD;AACxD,sCAGqB;AACrB,6CAA0C;AAMnC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,EAAE,EACkB,EAAe,EAAE;IACrC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAA,aAAK,EACpC,EAAE,EACF,mCAA4B,CAC7B,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAE,EAAE;QACjD,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,6DACE,uBAAC,qBAAW,cACV,4DAAsB,GACV,EACd,uBAAC,uBAAa,IAAC,SAAS,EAAE,2CAAK,CAAC,OAAO,YACrC,uBAAC,yBAAQ,IACP,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,YAAY,EACtB,cAAc,EAAE,KAAK,EACrB,MAAM,EAAE,KAAK,GACb,GACY,EAChB,wBAAC,uBAAa,eACZ,uBAAC,gBAAM,wBAAe,EACtB,uBAAC,gBAAM,IAAC,OAAO,EAAE,eAAe,qBAAe,IACjC,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,2BAA2B,+BAwCtC","sourcesContent":["import { useState, useEffect } from \"react\";\r\nimport DialogActions from \"@mui/material/DialogActions\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\nimport Button from \"@mui/material/Button\";\r\nimport MDEditor from \"@uiw/react-md-editor\";\r\n\r\nimport style from \"./MarkDownEditorContent.module.scss\";\r\nimport {\r\n  markDownEditorDialogAdapters,\r\n  MarkDownEditorDialogVM\r\n} from \"@vived/host\";\r\nimport { usePM } from \"../../Hooks/usePM\";\r\n\r\nexport interface MarkDownDialogProps {\r\n  id: string;\r\n}\r\n\r\nexport const MarkDownEditorDialogContent = ({\r\n  id\r\n}: MarkDownDialogProps): JSX.Element => {\r\n  const [text, setText] = useState<string>(\"\");\r\n  const { initialText, confirm } = usePM<MarkDownEditorDialogVM>(\r\n    id,\r\n    markDownEditorDialogAdapters\r\n  );\r\n\r\n  useEffect(() => {\r\n    setText(initialText);\r\n  }, [initialText]);\r\n\r\n  const handleChange = (value: string | undefined) => {\r\n    setText(value || \"\");\r\n  };\r\n\r\n  const clickSaveButton = () => {\r\n    confirm(text);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <DialogTitle>\r\n        <b>MarkDown Editor</b>\r\n      </DialogTitle>\r\n      <DialogContent className={style.content}>\r\n        <MDEditor\r\n          value={text}\r\n          onChange={handleChange}\r\n          visibleDragbar={false}\r\n          height={\"99%\"}\r\n        />\r\n      </DialogContent>\r\n      <DialogActions>\r\n        <Button>Close</Button>\r\n        <Button onClick={clickSaveButton}>Save</Button>\r\n      </DialogActions>\r\n    </>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/SelectModelDialogContent.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectModelDialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const host_1 = require("@vived/host");
+const react_1 = require("react");
+const AssetPluginShadowDom_1 = require("../../Components/ShadowDom/AssetPluginShadowDom");
+const SuperCentered_1 = require("../../Components/SuperCentered/SuperCentered");
+const useSingletonPM_1 = require("../../Hooks/useSingletonPM");
+const SandboxAppObjectsContext_1 = __importDefault(require("../../SandboxAppObjectsContext"));
+const SelectModelDialogContent_module_scss_1 = __importDefault(require("./SelectModelDialogContent.module.scss"));
+const SelectModelDialogContent = () => {
+    const sandboxAppObjects = (0, react_1.useContext)(SandboxAppObjectsContext_1.default);
+    const { loading, styleSheets } = (0, useSingletonPM_1.useSingletonPM)(host_1.assetPluginPMAdapter);
+    const [appContainer, setAppContainer] = (0, react_1.useState)(null);
+    const ref = (0, react_1.useCallback)((node) => {
+        if (node !== null) {
+            setAppContainer(node);
+        }
+    }, [setAppContainer]);
+    (0, react_1.useEffect)(() => {
+        if (appContainer) {
+            (0, host_1.setAssetPluginContainer)(appContainer, sandboxAppObjects);
+        }
+        return () => {
+            (0, host_1.clearAssetPluginContainer)(sandboxAppObjects);
+        };
+    }, [appContainer, sandboxAppObjects]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: SelectModelDialogContent_module_scss_1.default.content, children: [loading && ((0, jsx_runtime_1.jsx)(SuperCentered_1.SuperCentered, { style: { marginTop: "20px" }, children: (0, jsx_runtime_1.jsx)("label", { children: "Loading...." }) })), (0, jsx_runtime_1.jsx)(AssetPluginShadowDom_1.AssetPluginShadowDom, { mode: "open", stylesheets: styleSheets, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+                        display: "flex",
+                        height: "100%",
+                        width: "100%",
+                        backgroundColor: "lightgray"
+                    } }) })] }));
+};
+exports.SelectModelDialogContent = SelectModelDialogContent;
+//# sourceMappingURL=SelectModelDialogContent.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/SelectModelDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectModelDialogContent.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/SelectModelDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAKqB;AACrB,iCAAqE;AACrE,0FAAuF;AACvF,gFAA6E;AAC7E,+DAA4D;AAC5D,8FAAsE;AACtE,kHAA2D;AAEpD,MAAM,wBAAwB,GAAG,GAAgB,EAAE;IACxD,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,kCAAwB,CAAC,CAAC;IAC/D,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAC5B,IAAA,+BAAc,EAAgB,2BAAoB,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAE9E,MAAM,GAAG,GAAG,IAAA,mBAAW,EACrB,CAAC,IAAoB,EAAE,EAAE;QACvB,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,IAAA,8BAAuB,EAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;QAC3D,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAA,gCAAyB,EAAC,iBAAiB,CAAC,CAAC;QAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,iCAAK,SAAS,EAAE,8CAAK,CAAC,OAAO,aAC1B,OAAO,IAAI,CACV,uBAAC,6BAAa,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YACzC,4DAA0B,GACZ,CACjB,EACD,uBAAC,2CAAoB,IAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,YACxD,gCACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,MAAM,EAAE,MAAM;wBACd,KAAK,EAAE,MAAM;wBACb,eAAe,EAAE,WAAW;qBAC7B,GACI,GACc,IACnB,CACP,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,wBAAwB,4BA4CnC","sourcesContent":["import {\r\n  assetPluginPMAdapter,\r\n  AssetPluginVM,\r\n  clearAssetPluginContainer,\r\n  setAssetPluginContainer\r\n} from \"@vived/host\";\r\nimport { useCallback, useContext, useEffect, useState } from \"react\";\r\nimport { AssetPluginShadowDom } from \"../../Components/ShadowDom/AssetPluginShadowDom\";\r\nimport { SuperCentered } from \"../../Components/SuperCentered/SuperCentered\";\r\nimport { useSingletonPM } from \"../../Hooks/useSingletonPM\";\r\nimport SandboxAppObjectsContext from \"../../SandboxAppObjectsContext\";\r\nimport style from \"./SelectModelDialogContent.module.scss\";\r\n\r\nexport const SelectModelDialogContent = (): JSX.Element => {\r\n  const sandboxAppObjects = useContext(SandboxAppObjectsContext);\r\n  const { loading, styleSheets } =\r\n    useSingletonPM<AssetPluginVM>(assetPluginPMAdapter);\r\n  const [appContainer, setAppContainer] = useState<HTMLDivElement | null>(null);\r\n\r\n  const ref = useCallback(\r\n    (node: HTMLDivElement) => {\r\n      if (node !== null) {\r\n        setAppContainer(node);\r\n      }\r\n    },\r\n    [setAppContainer]\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (appContainer) {\r\n      setAssetPluginContainer(appContainer, sandboxAppObjects);\r\n    }\r\n    return () => {\r\n      clearAssetPluginContainer(sandboxAppObjects);\r\n    };\r\n  }, [appContainer, sandboxAppObjects]);\r\n\r\n  return (\r\n    <div className={style.content}>\r\n      {loading && (\r\n        <SuperCentered style={{ marginTop: \"20px\" }}>\r\n          <label>Loading....</label>\r\n        </SuperCentered>\r\n      )}\r\n      <AssetPluginShadowDom mode=\"open\" stylesheets={styleSheets}>\r\n        <div\r\n          ref={ref}\r\n          style={{\r\n            display: \"flex\",\r\n            height: \"100%\",\r\n            width: \"100%\",\r\n            backgroundColor: \"lightgray\"\r\n          }}\r\n        ></div>\r\n      </AssetPluginShadowDom>\r\n    </div>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/SpinnerDialogContent.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerDialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const host_1 = require("@vived/host");
+const SuperCentered_1 = require("../../Components/SuperCentered/SuperCentered");
+const usePM_1 = require("../../Hooks/usePM");
+const SpinnerDialogContent = ({ id }) => {
+    const { title, message } = (0, usePM_1.usePM)(id, host_1.spinnerDialogAdapter);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: title }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [(0, jsx_runtime_1.jsx)(SuperCentered_1.SuperCentered, { style: { padding: "8px" }, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "secondary" }) }), (0, jsx_runtime_1.jsx)("div", { children: message })] })] }));
+};
+exports.SpinnerDialogContent = SpinnerDialogContent;
+//# sourceMappingURL=SpinnerDialogContent.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/SpinnerDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDialogContent.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/SpinnerDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,sFAA8D;AAC9D,gFAAwD;AACxD,4EAAoD;AACpD,sCAAoE;AACpE,gFAA6E;AAC7E,6CAA0C;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EACnC,EAAE,EACiB,EAAe,EAAE;IACpC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAA,aAAK,EAAkB,EAAE,EAAE,2BAAoB,CAAC,CAAC;IAE5E,OAAO,CACL,6DACE,uBAAC,qBAAW,cAAE,KAAK,GAAe,EAClC,wBAAC,uBAAa,eACZ,uBAAC,6BAAa,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACtC,uBAAC,0BAAgB,IAAC,KAAK,EAAC,WAAW,GAAG,GACxB,EAChB,0CAAM,OAAO,GAAO,IACN,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,oBAAoB,wBAgB/B","sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\nimport { spinnerDialogAdapter, SpinnerDialogVM } from \"@vived/host\";\r\nimport { SuperCentered } from \"../../Components/SuperCentered/SuperCentered\";\r\nimport { usePM } from \"../../Hooks/usePM\";\r\n\r\nexport interface SpinnerDialogProps {\r\n  id: string;\r\n}\r\n\r\nexport const SpinnerDialogContent = ({\r\n  id\r\n}: SpinnerDialogProps): JSX.Element => {\r\n  const { title, message } = usePM<SpinnerDialogVM>(id, spinnerDialogAdapter);\r\n\r\n  return (\r\n    <>\r\n      <DialogTitle>{title}</DialogTitle>\r\n      <DialogContent>\r\n        <SuperCentered style={{ padding: \"8px\" }}>\r\n          <CircularProgress color=\"secondary\" />\r\n        </SuperCentered>\r\n        <div>{message}</div>\r\n      </DialogContent>\r\n    </>\r\n  );\r\n};\r\n"]}

package/dist/cjs/Frameworks/React/Containers/Dialogs/UnknownDialogContent.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnknownDialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const UnknownDialogContent = ({ type }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: (0, jsx_runtime_1.jsx)("b", { children: "Unknown Dialog" }) }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { style: { whiteSpace: "pre-line" }, children: `Unsupported Dialog of type ${type ?? "Undefined"} has been popped` }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { children: "OK" }) })] }));
+};
+exports.UnknownDialogContent = UnknownDialogContent;
+//# sourceMappingURL=UnknownDialogContent.js.map

package/dist/cjs/Frameworks/React/Containers/Dialogs/UnknownDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnknownDialogContent.js","sourceRoot":"","sources":["../../../../../../src/Frameworks/React/Containers/Dialogs/UnknownDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,gFAAwD;AACxD,gFAAwD;AACxD,4EAAoD;AACpD,kEAA0C;AAKnC,MAAM,oBAAoB,GAAG,CAAC,EACnC,IAAI,EACsB,EAAe,EAAE;IAC3C,OAAO,CACL,6DACE,uBAAC,qBAAW,cACV,2DAAqB,GACT,EACd,uBAAC,uBAAa,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,YAC7C,8BAA8B,IAAI,IAAI,WAAW,kBAAkB,GACtD,EAChB,uBAAC,uBAAa,cACZ,uBAAC,gBAAM,qBAAY,GACL,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,oBAAoB,wBAgB/B","sourcesContent":["import DialogActions from \"@mui/material/DialogActions\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\nimport Button from \"@mui/material/Button\";\r\n\r\nexport interface UnknownDialogContentProps {\r\n  type?: string;\r\n}\r\nexport const UnknownDialogContent = ({\r\n  type\r\n}: UnknownDialogContentProps): JSX.Element => {\r\n  return (\r\n    <>\r\n      <DialogTitle>\r\n        <b>Unknown Dialog</b>\r\n      </DialogTitle>\r\n      <DialogContent style={{ whiteSpace: \"pre-line\" }}>\r\n        {`Unsupported Dialog of type ${type ?? \"Undefined\"} has been popped`}\r\n      </DialogContent>\r\n      <DialogActions>\r\n        <Button>OK</Button>\r\n      </DialogActions>\r\n    </>\r\n  );\r\n};\r\n"]}