@webiny/app-sdk-playground 0.0.0-unstable.3c5210ad37 → 0.0.0-unstable.7be00a75a9

package/PermissionsSchema.d.ts

@@ -0,0 +1,15 @@
+export declare const DEV_TOOLS_PERMISSIONS_SCHEMA: {
+    readonly prefix: "dev-tools";
+    readonly fullAccess: true;
+    readonly entities: [{
+        readonly id: "graphql-playground";
+        readonly title: "GraphQL Playground";
+        readonly permission: "dev-tools.graphql-playground.*";
+        readonly scopes: ["full"];
+    }, {
+        readonly id: "sdk-playground";
+        readonly title: "SDK Playground";
+        readonly permission: "dev-tools.sdk-playground.*";
+        readonly scopes: ["full"];
+    }];
+};

package/PermissionsSchema.js

@@ -0,0 +1,26 @@
+import { createPermissionSchema } from "@webiny/app-admin";
+const DEV_TOOLS_PERMISSIONS_SCHEMA = createPermissionSchema({
+    prefix: "dev-tools",
+    fullAccess: true,
+    entities: [
+        {
+            id: "graphql-playground",
+            title: "GraphQL Playground",
+            permission: "dev-tools.graphql-playground.*",
+            scopes: [
+                "full"
+            ]
+        },
+        {
+            id: "sdk-playground",
+            title: "SDK Playground",
+            permission: "dev-tools.sdk-playground.*",
+            scopes: [
+                "full"
+            ]
+        }
+    ]
+});
+export { DEV_TOOLS_PERMISSIONS_SCHEMA };
+
+//# sourceMappingURL=PermissionsSchema.js.map

package/PermissionsSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsSchema.js","sources":["../src/PermissionsSchema.ts"],"sourcesContent":["import { createPermissionSchema } from \"@webiny/app-admin\";\n\nexport const DEV_TOOLS_PERMISSIONS_SCHEMA = createPermissionSchema({\n    prefix: \"dev-tools\",\n    fullAccess: true,\n    entities: [\n        {\n            id: \"graphql-playground\",\n            title: \"GraphQL Playground\",\n            permission: \"dev-tools.graphql-playground.*\",\n            scopes: [\"full\"]\n        },\n        {\n            id: \"sdk-playground\",\n            title: \"SDK Playground\",\n            permission: \"dev-tools.sdk-playground.*\",\n            scopes: [\"full\"]\n        }\n    ]\n});\n"],"names":["DEV_TOOLS_PERMISSIONS_SCHEMA","createPermissionSchema"],"mappings":";AAEO,MAAMA,+BAA+BC,uBAAuB;IAC/D,QAAQ;IACR,YAAY;IACZ,UAAU;QACN;YACI,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,QAAQ;gBAAC;aAAO;QACpB;QACA;YACI,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,QAAQ;gBAAC;aAAO;QACpB;KACH;AACL"}

package/SecurityPermission.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SecurityPermission: () => React.JSX.Element;

package/SecurityPermission.js

@@ -0,0 +1,15 @@
+import react from "react";
+import { AdminConfig } from "@webiny/app-admin";
+import { ReactComponent } from "@webiny/icons/developer_mode.svg";
+import { DEV_TOOLS_PERMISSIONS_SCHEMA } from "./PermissionsSchema.js";
+const { Security: Security } = AdminConfig;
+const SecurityPermission = ()=>/*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Security.Permissions, {
+        name: "dev-tools",
+        title: "Dev Tools",
+        description: "Manage Dev Tools access.",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        schema: DEV_TOOLS_PERMISSIONS_SCHEMA
+    }));
+export { SecurityPermission };
+
+//# sourceMappingURL=SecurityPermission.js.map

package/SecurityPermission.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityPermission.js","sources":["../src/SecurityPermission.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig } from \"@webiny/app-admin\";\nimport { ReactComponent as DevToolsIcon } from \"@webiny/icons/developer_mode.svg\";\nimport { DEV_TOOLS_PERMISSIONS_SCHEMA } from \"./PermissionsSchema.js\";\n\nconst { Security } = AdminConfig;\n\nexport const SecurityPermission = () => {\n    return (\n        <AdminConfig>\n            <Security.Permissions\n                name=\"dev-tools\"\n                title=\"Dev Tools\"\n                description=\"Manage Dev Tools access.\"\n                icon={<DevToolsIcon />}\n                schema={DEV_TOOLS_PERMISSIONS_SCHEMA}\n            />\n        </AdminConfig>\n    );\n};\n"],"names":["Security","AdminConfig","SecurityPermission","DevToolsIcon","DEV_TOOLS_PERMISSIONS_SCHEMA"],"mappings":";;;;AAKA,MAAM,EAAEA,UAAAA,QAAQ,EAAE,GAAGC;AAEd,MAAMC,qBAAqB,IACvB,WAAP,GACI,oBAACD,aAAWA,MAAAA,WAAAA,GACR,oBAACD,SAAS,WAAW;QACjB,MAAK;QACL,OAAM;QACN,aAAY;QACZ,oBAAM,oBAACG,gBAAYA;QACnB,QAAQC"}

package/index.js

@@ -1,32 +1,48 @@
-import React, { memo } from "react";
-import { useRouter, AdminConfig, AdminLayout } from "@webiny/app-admin";
-import { ReactComponent as CodeIcon } from "@webiny/icons/code.svg";
+import react, { memo } from "react";
+import { AdminConfig, AdminLayout, HasPermission, useRouter } from "@webiny/app-admin";
+import { ReactComponent } from "@webiny/icons/code.svg";
+import { ReactComponent as developer_mode_svg_ReactComponent } from "@webiny/icons/developer_mode.svg";
 import Playground from "./plugins/Playground.js";
+import { SecurityPermission } from "./SecurityPermission.js";
 import { Routes } from "./routes.js";
-const {
-  Route,
-  Menu
-} = AdminConfig;
-const SdkPlaygroundExtension = () => {
-  const router = useRouter();
-  return /*#__PURE__*/React.createElement(AdminConfig, null, /*#__PURE__*/React.createElement(Menu.Support, {
-    pin: "start",
-    name: "sdk-playground",
-    element: /*#__PURE__*/React.createElement(Menu.Support.Link, {
-      text: "SDK Playground",
-      icon: /*#__PURE__*/React.createElement(Menu.Support.Link.Icon, {
-        label: "SDK Playground",
-        element: /*#__PURE__*/React.createElement(CodeIcon, null)
-      }),
-      to: router.getLink(Routes.SdkPlayground)
-    })
-  }), /*#__PURE__*/React.createElement(Route, {
-    route: Routes.SdkPlayground,
-    element: /*#__PURE__*/React.createElement(AdminLayout, {
-      title: "SDK Playground"
-    }, /*#__PURE__*/React.createElement(Playground, null))
-  }));
+const { Route: Route, Menu: Menu } = AdminConfig;
+const SdkPlaygroundExtension = ()=>{
+    const router = useRouter();
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SecurityPermission, null), /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Menu, {
+        name: "dev-tools",
+        hideIfEmpty: true,
+        pin: "end",
+        element: /*#__PURE__*/ react.createElement(Menu.Item, {
+            text: "Dev Tools",
+            icon: /*#__PURE__*/ react.createElement(Menu.Item.Icon, {
+                label: "Dev Tools",
+                element: /*#__PURE__*/ react.createElement(developer_mode_svg_ReactComponent, null)
+            })
+        })
+    }), /*#__PURE__*/ react.createElement(HasPermission, {
+        any: [
+            "dev-tools.*",
+            "dev-tools.sdk-playground.*"
+        ]
+    }, /*#__PURE__*/ react.createElement(Menu, {
+        name: "dev-tools.sdk",
+        parent: "dev-tools",
+        element: /*#__PURE__*/ react.createElement(Menu.Link, {
+            text: "SDK Playground",
+            to: router.getLink(Routes.SdkPlayground),
+            icon: /*#__PURE__*/ react.createElement(Menu.Link.Icon, {
+                label: "SDK Playground",
+                element: /*#__PURE__*/ react.createElement(ReactComponent, null)
+            })
+        })
+    })), /*#__PURE__*/ react.createElement(Route, {
+        route: Routes.SdkPlayground,
+        element: /*#__PURE__*/ react.createElement(AdminLayout, {
+            title: "SDK Playground"
+        }, /*#__PURE__*/ react.createElement(Playground, null))
+    })));
 };
-export const SdkPlayground = /*#__PURE__*/memo(SdkPlaygroundExtension);
+const SdkPlayground = /*#__PURE__*/ memo(SdkPlaygroundExtension);
+export { SdkPlayground };
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useRouter","AdminConfig","AdminLayout","ReactComponent","CodeIcon","Playground","Routes","Route","Menu","SdkPlaygroundExtension","router","createElement","Support","pin","name","element","Link","text","icon","Icon","label","to","getLink","SdkPlayground","route","title"],"sources":["index.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { useRouter, AdminConfig, AdminLayout } from \"@webiny/app-admin\";\nimport { ReactComponent as CodeIcon } from \"@webiny/icons/code.svg\";\nimport Playground from \"./plugins/Playground.js\";\nimport { Routes } from \"./routes.js\";\n\nconst { Route, Menu } = AdminConfig;\n\nconst SdkPlaygroundExtension = () => {\n    const router = useRouter();\n\n    return (\n        <AdminConfig>\n            <Menu.Support\n                pin={\"start\"}\n                name={\"sdk-playground\"}\n                element={\n                    <Menu.Support.Link\n                        text={\"SDK Playground\"}\n                        icon={\n                            <Menu.Support.Link.Icon label=\"SDK Playground\" element={<CodeIcon />} />\n                        }\n                        to={router.getLink(Routes.SdkPlayground)}\n                    />\n                }\n            />\n\n            <Route\n                route={Routes.SdkPlayground}\n                element={\n                    <AdminLayout title={\"SDK Playground\"}>\n                        <Playground />\n                    </AdminLayout>\n                }\n            />\n        </AdminConfig>\n    );\n};\n\nexport const SdkPlayground = memo(SdkPlaygroundExtension);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,SAAS,EAAEC,WAAW,EAAEC,WAAW,QAAQ,mBAAmB;AACvE,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,OAAOC,UAAU;AACjB,SAASC,MAAM;AAEf,MAAM;EAAEC,KAAK;EAAEC;AAAK,CAAC,GAAGP,WAAW;AAEnC,MAAMQ,sBAAsB,GAAGA,CAAA,KAAM;EACjC,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAE1B,oBACIF,KAAA,CAAAa,aAAA,CAACV,WAAW,qBACRH,KAAA,CAAAa,aAAA,CAACH,IAAI,CAACI,OAAO;IACTC,GAAG,EAAE,OAAQ;IACbC,IAAI,EAAE,gBAAiB;IACvBC,OAAO,eACHjB,KAAA,CAAAa,aAAA,CAACH,IAAI,CAACI,OAAO,CAACI,IAAI;MACdC,IAAI,EAAE,gBAAiB;MACvBC,IAAI,eACApB,KAAA,CAAAa,aAAA,CAACH,IAAI,CAACI,OAAO,CAACI,IAAI,CAACG,IAAI;QAACC,KAAK,EAAC,gBAAgB;QAACL,OAAO,eAAEjB,KAAA,CAAAa,aAAA,CAACP,QAAQ,MAAE;MAAE,CAAE,CAC1E;MACDiB,EAAE,EAAEX,MAAM,CAACY,OAAO,CAAChB,MAAM,CAACiB,aAAa;IAAE,CAC5C;EACJ,CACJ,CAAC,eAEFzB,KAAA,CAAAa,aAAA,CAACJ,KAAK;IACFiB,KAAK,EAAElB,MAAM,CAACiB,aAAc;IAC5BR,OAAO,eACHjB,KAAA,CAAAa,aAAA,CAACT,WAAW;MAACuB,KAAK,EAAE;IAAiB,gBACjC3B,KAAA,CAAAa,aAAA,CAACN,UAAU,MAAE,CACJ;EAChB,CACJ,CACQ,CAAC;AAEtB,CAAC;AAED,OAAO,MAAMkB,aAAa,gBAAGxB,IAAI,CAACU,sBAAsB,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { useRouter, AdminConfig, AdminLayout, HasPermission } from \"@webiny/app-admin\";\nimport { ReactComponent as CodeIcon } from \"@webiny/icons/code.svg\";\nimport { ReactComponent as DevToolsIcon } from \"@webiny/icons/developer_mode.svg\";\nimport Playground from \"./plugins/Playground.js\";\nimport { SecurityPermission } from \"./SecurityPermission.js\";\nimport { Routes } from \"./routes.js\";\n\nconst { Route, Menu } = AdminConfig;\n\nconst SdkPlaygroundExtension = () => {\n    const router = useRouter();\n\n    return (\n        <>\n            <SecurityPermission />\n            <AdminConfig>\n                <Menu\n                    name={\"dev-tools\"}\n                    hideIfEmpty={true}\n                    pin={\"end\"}\n                    element={\n                        <Menu.Item\n                            text={\"Dev Tools\"}\n                            icon={<Menu.Item.Icon label=\"Dev Tools\" element={<DevToolsIcon />} />}\n                        />\n                    }\n                />\n                <HasPermission any={[\"dev-tools.*\", \"dev-tools.sdk-playground.*\"]}>\n                    <Menu\n                        name={\"dev-tools.sdk\"}\n                        parent={\"dev-tools\"}\n                        element={\n                            <Menu.Link\n                                text={\"SDK Playground\"}\n                                to={router.getLink(Routes.SdkPlayground)}\n                                icon={\n                                    <Menu.Link.Icon label=\"SDK Playground\" element={<CodeIcon />} />\n                                }\n                            />\n                        }\n                    />\n                </HasPermission>\n\n                <Route\n                    route={Routes.SdkPlayground}\n                    element={\n                        <AdminLayout title={\"SDK Playground\"}>\n                            <Playground />\n                        </AdminLayout>\n                    }\n                />\n            </AdminConfig>\n        </>\n    );\n};\n\nexport const SdkPlayground = memo(SdkPlaygroundExtension);\n"],"names":["Route","Menu","AdminConfig","SdkPlaygroundExtension","router","useRouter","SecurityPermission","DevToolsIcon","HasPermission","Routes","CodeIcon","AdminLayout","Playground","SdkPlayground","memo"],"mappings":";;;;;;;AAQA,MAAM,EAAEA,OAAAA,KAAK,EAAEC,MAAAA,IAAI,EAAE,GAAGC;AAExB,MAAMC,yBAAyB;IAC3B,MAAMC,SAASC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACJ,aAAWA,MAAAA,WAAAA,GACR,oBAACD,MAAIA;QACD,MAAM;QACN,aAAa;QACb,KAAK;QACL,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAY,uBAAS,oBAACM,mCAAYA;;;sBAI1E,oBAACC,eAAaA;QAAC,KAAK;YAAC;YAAe;SAA6B;qBAC7D,oBAACP,MAAIA;QACD,MAAM;QACN,QAAQ;QACR,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,IAAIG,OAAO,OAAO,CAACK,OAAO,aAAa;YACvC,oBACI,oBAACR,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAiB,uBAAS,oBAACS,gBAAQA;;;uBAO7E,oBAACV,OAAKA;QACF,OAAOS,OAAO,aAAa;QAC3B,uBACI,oBAACE,aAAWA;YAAC,OAAO;yBAChB,oBAACC,YAAUA;;AAOvC;AAEO,MAAMC,gBAAgB,WAAHA,GAAGC,KAAKX"}

package/package.json

@@ -1,8 +1,11 @@
 {
 	"name": "@webiny/app-sdk-playground",
-	"version": "0.0.0-unstable.3c5210ad37",
+	"version": "0.0.0-unstable.7be00a75a9",
 	"type": "module",
-	"main": "index.js",
+	"exports": {
+		".": "./index.js",
+		"./*": "./*"
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -11,23 +14,25 @@
 	"license": "MIT",
 	"dependencies": {
 		"@monaco-editor/react": "4.7.0",
-		"@webiny/admin-ui": "0.0.0-unstable.3c5210ad37",
-		"@webiny/app": "0.0.0-unstable.3c5210ad37",
-		"@webiny/app-admin": "0.0.0-unstable.3c5210ad37",
-		"@webiny/icons": "0.0.0-unstable.3c5210ad37",
-		"@webiny/sdk": "0.0.0-unstable.3c5210ad37",
+		"@webiny/admin-ui": "0.0.0-unstable.7be00a75a9",
+		"@webiny/app": "0.0.0-unstable.7be00a75a9",
+		"@webiny/app-admin": "0.0.0-unstable.7be00a75a9",
+		"@webiny/icons": "0.0.0-unstable.7be00a75a9",
+		"@webiny/sdk": "0.0.0-unstable.7be00a75a9",
 		"monaco-editor": "0.53.0",
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@webiny/build-tools": "0.0.0-unstable.3c5210ad37",
+		"@webiny/build-tools": "0.0.0-unstable.7be00a75a9",
 		"rimraf": "6.1.3",
-		"typescript": "5.9.3"
+		"typescript": "6.0.3"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
+		"access": "public"
 	},
-	"gitHead": "3c5210ad37c29bfabfeb8a91d3220115352b2ea9"
+	"gitHead": "8476da73b653c89cc1474d968baf55c1b0ae0e5f",
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/plugins/Playground.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { defaultSdkCode } from "./defaultCode.js";
 import { useCodeExecution } from "./useCodeExecution.js";
 import { useMonacoEditor } from "./useMonacoEditor.js";
@@ -6,48 +6,36 @@ import { useResizableSplit } from "./useResizableSplit.js";
 import { PlaygroundToolbar } from "./components/PlaygroundToolbar.js";
 import { CodeEditor } from "./components/CodeEditor.js";
 import { OutputPanel } from "./components/OutputPanel.js";
-const Playground = () => {
-  const [code, setCode] = useState(defaultSdkCode);
-  const {
-    splitRef,
-    editorPct,
-    handleDividerMouseDown
-  } = useResizableSplit();
-  const {
-    editorRef,
-    handleBeforeMount,
-    handleEditorDidMount,
-    handleFormat
-  } = useMonacoEditor(() => handleRun());
-  const {
-    output,
-    isRunning,
-    handleRun
-  } = useCodeExecution(code, editorRef);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col bg-gray-100",
-    style: {
-      height: "calc(100vh - 45px)"
-    }
-  }, /*#__PURE__*/React.createElement(PlaygroundToolbar, {
-    isRunning: isRunning,
-    onRun: handleRun,
-    onFormat: handleFormat
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-1 overflow-hidden",
-    ref: splitRef
-  }, /*#__PURE__*/React.createElement(CodeEditor, {
-    code: code,
-    editorPct: editorPct,
-    isRunning: isRunning,
-    onCodeChange: setCode,
-    onBeforeMount: handleBeforeMount,
-    onMount: handleEditorDidMount,
-    onDividerMouseDown: handleDividerMouseDown
-  }), /*#__PURE__*/React.createElement(OutputPanel, {
-    output: output
-  })));
+const Playground = ()=>{
+    const [code, setCode] = useState(defaultSdkCode);
+    const { splitRef, editorPct, handleDividerMouseDown } = useResizableSplit();
+    const { editorRef, handleBeforeMount, handleEditorDidMount, handleFormat } = useMonacoEditor(()=>handleRun());
+    const { output, isRunning, handleRun } = useCodeExecution(code, editorRef);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col bg-gray-100",
+        style: {
+            height: "calc(100vh - 45px)"
+        }
+    }, /*#__PURE__*/ react.createElement(PlaygroundToolbar, {
+        isRunning: isRunning,
+        onRun: handleRun,
+        onFormat: handleFormat
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-1 overflow-hidden",
+        ref: splitRef
+    }, /*#__PURE__*/ react.createElement(CodeEditor, {
+        code: code,
+        editorPct: editorPct,
+        isRunning: isRunning,
+        onCodeChange: setCode,
+        onBeforeMount: handleBeforeMount,
+        onMount: handleEditorDidMount,
+        onDividerMouseDown: handleDividerMouseDown
+    }), /*#__PURE__*/ react.createElement(OutputPanel, {
+        output: output
+    })));
 };
-export default Playground;
+const plugins_Playground = Playground;
+export default plugins_Playground;
 
 //# sourceMappingURL=Playground.js.map

package/plugins/Playground.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","defaultSdkCode","useCodeExecution","useMonacoEditor","useResizableSplit","PlaygroundToolbar","CodeEditor","OutputPanel","Playground","code","setCode","splitRef","editorPct","handleDividerMouseDown","editorRef","handleBeforeMount","handleEditorDidMount","handleFormat","handleRun","output","isRunning","createElement","className","style","height","onRun","onFormat","ref","onCodeChange","onBeforeMount","onMount","onDividerMouseDown"],"sources":["Playground.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { defaultSdkCode } from \"./defaultCode.js\";\nimport { useCodeExecution } from \"./useCodeExecution.js\";\nimport { useMonacoEditor } from \"./useMonacoEditor.js\";\nimport { useResizableSplit } from \"./useResizableSplit.js\";\nimport { PlaygroundToolbar } from \"./components/PlaygroundToolbar.js\";\nimport { CodeEditor } from \"./components/CodeEditor.js\";\nimport { OutputPanel } from \"./components/OutputPanel.js\";\n\nconst Playground: React.FC = () => {\n    const [code, setCode] = useState(defaultSdkCode);\n    const { splitRef, editorPct, handleDividerMouseDown } = useResizableSplit();\n    const { editorRef, handleBeforeMount, handleEditorDidMount, handleFormat } = useMonacoEditor(\n        () => handleRun()\n    );\n    const { output, isRunning, handleRun } = useCodeExecution(code, editorRef);\n\n    return (\n        <div className=\"flex flex-col bg-gray-100\" style={{ height: \"calc(100vh - 45px)\" }}>\n            <PlaygroundToolbar isRunning={isRunning} onRun={handleRun} onFormat={handleFormat} />\n            <div className=\"flex flex-1 overflow-hidden\" ref={splitRef}>\n                <CodeEditor\n                    code={code}\n                    editorPct={editorPct}\n                    isRunning={isRunning}\n                    onCodeChange={setCode}\n                    onBeforeMount={handleBeforeMount}\n                    onMount={handleEditorDidMount}\n                    onDividerMouseDown={handleDividerMouseDown}\n                />\n                <OutputPanel output={output} />\n            </div>\n        </div>\n    );\n};\n\nexport default Playground;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,cAAc;AACvB,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAC1B,SAASC,UAAU;AACnB,SAASC,WAAW;AAEpB,MAAMC,UAAoB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGV,QAAQ,CAACC,cAAc,CAAC;EAChD,MAAM;IAAEU,QAAQ;IAAEC,SAAS;IAAEC;EAAuB,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EAC3E,MAAM;IAAEU,SAAS;IAAEC,iBAAiB;IAAEC,oBAAoB;IAAEC;EAAa,CAAC,GAAGd,eAAe,CACxF,MAAMe,SAAS,CAAC,CACpB,CAAC;EACD,MAAM;IAAEC,MAAM;IAAEC,SAAS;IAAEF;EAAU,CAAC,GAAGhB,gBAAgB,CAACO,IAAI,EAAEK,SAAS,CAAC;EAE1E,oBACIf,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC,2BAA2B;IAACC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAqB;EAAE,gBAC/EzB,KAAA,CAAAsB,aAAA,CAAChB,iBAAiB;IAACe,SAAS,EAAEA,SAAU;IAACK,KAAK,EAAEP,SAAU;IAACQ,QAAQ,EAAET;EAAa,CAAE,CAAC,eACrFlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC,6BAA6B;IAACK,GAAG,EAAEhB;EAAS,gBACvDZ,KAAA,CAAAsB,aAAA,CAACf,UAAU;IACPG,IAAI,EAAEA,IAAK;IACXG,SAAS,EAAEA,SAAU;IACrBQ,SAAS,EAAEA,SAAU;IACrBQ,YAAY,EAAElB,OAAQ;IACtBmB,aAAa,EAAEd,iBAAkB;IACjCe,OAAO,EAAEd,oBAAqB;IAC9Be,kBAAkB,EAAElB;EAAuB,CAC9C,CAAC,eACFd,KAAA,CAAAsB,aAAA,CAACd,WAAW;IAACY,MAAM,EAAEA;EAAO,CAAE,CAC7B,CACJ,CAAC;AAEd,CAAC;AAED,eAAeX,UAAU","ignoreList":[]}
+{"version":3,"file":"plugins/Playground.js","sources":["../../src/plugins/Playground.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { defaultSdkCode } from \"./defaultCode.js\";\nimport { useCodeExecution } from \"./useCodeExecution.js\";\nimport { useMonacoEditor } from \"./useMonacoEditor.js\";\nimport { useResizableSplit } from \"./useResizableSplit.js\";\nimport { PlaygroundToolbar } from \"./components/PlaygroundToolbar.js\";\nimport { CodeEditor } from \"./components/CodeEditor.js\";\nimport { OutputPanel } from \"./components/OutputPanel.js\";\n\nconst Playground: React.FC = () => {\n    const [code, setCode] = useState(defaultSdkCode);\n    const { splitRef, editorPct, handleDividerMouseDown } = useResizableSplit();\n    const { editorRef, handleBeforeMount, handleEditorDidMount, handleFormat } = useMonacoEditor(\n        () => handleRun()\n    );\n    const { output, isRunning, handleRun } = useCodeExecution(code, editorRef);\n\n    return (\n        <div className=\"flex flex-col bg-gray-100\" style={{ height: \"calc(100vh - 45px)\" }}>\n            <PlaygroundToolbar isRunning={isRunning} onRun={handleRun} onFormat={handleFormat} />\n            <div className=\"flex flex-1 overflow-hidden\" ref={splitRef}>\n                <CodeEditor\n                    code={code}\n                    editorPct={editorPct}\n                    isRunning={isRunning}\n                    onCodeChange={setCode}\n                    onBeforeMount={handleBeforeMount}\n                    onMount={handleEditorDidMount}\n                    onDividerMouseDown={handleDividerMouseDown}\n                />\n                <OutputPanel output={output} />\n            </div>\n        </div>\n    );\n};\n\nexport default Playground;\n"],"names":["Playground","code","setCode","useState","defaultSdkCode","splitRef","editorPct","handleDividerMouseDown","useResizableSplit","editorRef","handleBeforeMount","handleEditorDidMount","handleFormat","useMonacoEditor","handleRun","output","isRunning","useCodeExecution","PlaygroundToolbar","CodeEditor","OutputPanel"],"mappings":";;;;;;;;AASA,MAAMA,aAAuB;IACzB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAASC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,sBAAsB,EAAE,GAAGC;IACxD,MAAM,EAAEC,SAAS,EAAEC,iBAAiB,EAAEC,oBAAoB,EAAEC,YAAY,EAAE,GAAGC,gBACzE,IAAMC;IAEV,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEF,SAAS,EAAE,GAAGG,iBAAiBhB,MAAMQ;IAEhE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;QAA4B,OAAO;YAAE,QAAQ;QAAqB;qBAC7E,oBAACS,mBAAiBA;QAAC,WAAWF;QAAW,OAAOF;QAAW,UAAUF;sBACrE,oBAAC;QAAI,WAAU;QAA8B,KAAKP;qBAC9C,oBAACc,YAAUA;QACP,MAAMlB;QACN,WAAWK;QACX,WAAWU;QACX,cAAcd;QACd,eAAeQ;QACf,SAASC;QACT,oBAAoBJ;sBAExB,oBAACa,aAAWA;QAAC,QAAQL;;AAIrC;AAEA,2BAAef"}

package/plugins/components/CodeEditor.js

@@ -1,62 +1,51 @@
-import React from "react";
-import Editor from "@monaco-editor/react";
+import react from "react";
+import _monaco_editor_react from "@monaco-editor/react";
 import { OverlayLoader } from "@webiny/admin-ui";
-export const CodeEditor = ({
-  code,
-  editorPct,
-  isRunning,
-  onCodeChange,
-  onBeforeMount,
-  onMount,
-  onDividerMouseDown
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "relative overflow-hidden border-r border-gray-200",
-    style: {
-      flex: "none",
-      width: `${editorPct}%`
-    },
-    onMouseMove: e => {
-      const rect = e.currentTarget.getBoundingClientRect();
-      e.currentTarget.style.cursor = e.clientX >= rect.right - 4 ? "col-resize" : "";
-    },
-    onMouseLeave: e => {
-      e.currentTarget.style.cursor = "";
-    },
-    onMouseDown: e => {
-      const rect = e.currentTarget.getBoundingClientRect();
-      if (e.clientX >= rect.right - 4) {
-        onDividerMouseDown(e);
-      }
-    }
-  }, isRunning && /*#__PURE__*/React.createElement(OverlayLoader, {
-    text: "Running code..."
-  }), /*#__PURE__*/React.createElement(Editor, {
-    height: "100%",
-    defaultLanguage: "typescript",
-    value: code,
-    onChange: value => value && onCodeChange(value),
-    beforeMount: onBeforeMount,
-    onMount: onMount,
-    options: {
-      minimap: {
-        enabled: false
-      },
-      renderLineHighlight: "none",
-      fontSize: 14,
-      automaticLayout: true,
-      scrollBeyondLastLine: false,
-      wordWrap: "on",
-      tabSize: 4,
-      insertSpaces: true,
-      formatOnPaste: true,
-      formatOnType: true,
-      suggest: {
-        showKeywords: true,
-        showSnippets: true
-      }
-    }
-  }));
-};
+const CodeEditor = ({ code, editorPct, isRunning, onCodeChange, onBeforeMount, onMount, onDividerMouseDown })=>/*#__PURE__*/ react.createElement("div", {
+        className: "relative overflow-hidden border-r border-gray-200",
+        style: {
+            flex: "none",
+            width: `${editorPct}%`
+        },
+        onMouseMove: (e)=>{
+            const rect = e.currentTarget.getBoundingClientRect();
+            e.currentTarget.style.cursor = e.clientX >= rect.right - 4 ? "col-resize" : "";
+        },
+        onMouseLeave: (e)=>{
+            e.currentTarget.style.cursor = "";
+        },
+        onMouseDown: (e)=>{
+            const rect = e.currentTarget.getBoundingClientRect();
+            if (e.clientX >= rect.right - 4) onDividerMouseDown(e);
+        }
+    }, isRunning && /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Running code..."
+    }), /*#__PURE__*/ react.createElement(_monaco_editor_react, {
+        height: "100%",
+        defaultLanguage: "typescript",
+        value: code,
+        onChange: (value)=>value && onCodeChange(value),
+        beforeMount: onBeforeMount,
+        onMount: onMount,
+        options: {
+            minimap: {
+                enabled: false
+            },
+            renderLineHighlight: "none",
+            fontSize: 14,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            wordWrap: "on",
+            tabSize: 4,
+            insertSpaces: true,
+            formatOnPaste: true,
+            formatOnType: true,
+            suggest: {
+                showKeywords: true,
+                showSnippets: true
+            }
+        }
+    }));
+export { CodeEditor };
 
 //# sourceMappingURL=CodeEditor.js.map

package/plugins/components/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Editor","OverlayLoader","CodeEditor","code","editorPct","isRunning","onCodeChange","onBeforeMount","onMount","onDividerMouseDown","createElement","className","style","flex","width","onMouseMove","e","rect","currentTarget","getBoundingClientRect","cursor","clientX","right","onMouseLeave","onMouseDown","text","height","defaultLanguage","value","onChange","beforeMount","options","minimap","enabled","renderLineHighlight","fontSize","automaticLayout","scrollBeyondLastLine","wordWrap","tabSize","insertSpaces","formatOnPaste","formatOnType","suggest","showKeywords","showSnippets"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport Editor from \"@monaco-editor/react\";\nimport type { OnMount, BeforeMount } from \"@monaco-editor/react\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface CodeEditorProps {\n    code: string;\n    editorPct: number;\n    isRunning: boolean;\n    onCodeChange: (value: string) => void;\n    onBeforeMount: BeforeMount;\n    onMount: OnMount;\n    onDividerMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const CodeEditor: React.FC<CodeEditorProps> = ({\n    code,\n    editorPct,\n    isRunning,\n    onCodeChange,\n    onBeforeMount,\n    onMount,\n    onDividerMouseDown\n}) => {\n    return (\n        <div\n            className=\"relative overflow-hidden border-r border-gray-200\"\n            style={{ flex: \"none\", width: `${editorPct}%` }}\n            onMouseMove={e => {\n                const rect = e.currentTarget.getBoundingClientRect();\n                e.currentTarget.style.cursor = e.clientX >= rect.right - 4 ? \"col-resize\" : \"\";\n            }}\n            onMouseLeave={e => {\n                e.currentTarget.style.cursor = \"\";\n            }}\n            onMouseDown={e => {\n                const rect = e.currentTarget.getBoundingClientRect();\n                if (e.clientX >= rect.right - 4) {\n                    onDividerMouseDown(e);\n                }\n            }}\n        >\n            {isRunning && <OverlayLoader text=\"Running code...\" />}\n            <Editor\n                height=\"100%\"\n                defaultLanguage=\"typescript\"\n                value={code}\n                onChange={value => value && onCodeChange(value)}\n                beforeMount={onBeforeMount}\n                onMount={onMount}\n                options={{\n                    minimap: { enabled: false },\n                    renderLineHighlight: \"none\",\n                    fontSize: 14,\n                    automaticLayout: true,\n                    scrollBeyondLastLine: false,\n                    wordWrap: \"on\",\n                    tabSize: 4,\n                    insertSpaces: true,\n                    formatOnPaste: true,\n                    formatOnType: true,\n                    suggest: {\n                        showKeywords: true,\n                        showSnippets: true\n                    }\n                }}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,sBAAsB;AAEzC,SAASC,aAAa,QAAQ,kBAAkB;AAYhD,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EAClDC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,YAAY;EACZC,aAAa;EACbC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,oBACIV,KAAA,CAAAW,aAAA;IACIC,SAAS,EAAC,mDAAmD;IAC7DC,KAAK,EAAE;MAAEC,IAAI,EAAE,MAAM;MAAEC,KAAK,EAAE,GAAGV,SAAS;IAAI,CAAE;IAChDW,WAAW,EAAEC,CAAC,IAAI;MACd,MAAMC,IAAI,GAAGD,CAAC,CAACE,aAAa,CAACC,qBAAqB,CAAC,CAAC;MACpDH,CAAC,CAACE,aAAa,CAACN,KAAK,CAACQ,MAAM,GAAGJ,CAAC,CAACK,OAAO,IAAIJ,IAAI,CAACK,KAAK,GAAG,CAAC,GAAG,YAAY,GAAG,EAAE;IAClF,CAAE;IACFC,YAAY,EAAEP,CAAC,IAAI;MACfA,CAAC,CAACE,aAAa,CAACN,KAAK,CAACQ,MAAM,GAAG,EAAE;IACrC,CAAE;IACFI,WAAW,EAAER,CAAC,IAAI;MACd,MAAMC,IAAI,GAAGD,CAAC,CAACE,aAAa,CAACC,qBAAqB,CAAC,CAAC;MACpD,IAAIH,CAAC,CAACK,OAAO,IAAIJ,IAAI,CAACK,KAAK,GAAG,CAAC,EAAE;QAC7Bb,kBAAkB,CAACO,CAAC,CAAC;MACzB;IACJ;EAAE,GAEDX,SAAS,iBAAIN,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACwB,IAAI,EAAC;EAAiB,CAAE,CAAC,eACtD1B,KAAA,CAAAW,aAAA,CAACV,MAAM;IACH0B,MAAM,EAAC,MAAM;IACbC,eAAe,EAAC,YAAY;IAC5BC,KAAK,EAAEzB,IAAK;IACZ0B,QAAQ,EAAED,KAAK,IAAIA,KAAK,IAAItB,YAAY,CAACsB,KAAK,CAAE;IAChDE,WAAW,EAAEvB,aAAc;IAC3BC,OAAO,EAAEA,OAAQ;IACjBuB,OAAO,EAAE;MACLC,OAAO,EAAE;QAAEC,OAAO,EAAE;MAAM,CAAC;MAC3BC,mBAAmB,EAAE,MAAM;MAC3BC,QAAQ,EAAE,EAAE;MACZC,eAAe,EAAE,IAAI;MACrBC,oBAAoB,EAAE,KAAK;MAC3BC,QAAQ,EAAE,IAAI;MACdC,OAAO,EAAE,CAAC;MACVC,YAAY,EAAE,IAAI;MAClBC,aAAa,EAAE,IAAI;MACnBC,YAAY,EAAE,IAAI;MAClBC,OAAO,EAAE;QACLC,YAAY,EAAE,IAAI;QAClBC,YAAY,EAAE;MAClB;IACJ;EAAE,CACL,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"plugins/components/CodeEditor.js","sources":["../../../src/plugins/components/CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport Editor from \"@monaco-editor/react\";\nimport type { OnMount, BeforeMount } from \"@monaco-editor/react\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface CodeEditorProps {\n    code: string;\n    editorPct: number;\n    isRunning: boolean;\n    onCodeChange: (value: string) => void;\n    onBeforeMount: BeforeMount;\n    onMount: OnMount;\n    onDividerMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const CodeEditor: React.FC<CodeEditorProps> = ({\n    code,\n    editorPct,\n    isRunning,\n    onCodeChange,\n    onBeforeMount,\n    onMount,\n    onDividerMouseDown\n}) => {\n    return (\n        <div\n            className=\"relative overflow-hidden border-r border-gray-200\"\n            style={{ flex: \"none\", width: `${editorPct}%` }}\n            onMouseMove={e => {\n                const rect = e.currentTarget.getBoundingClientRect();\n                e.currentTarget.style.cursor = e.clientX >= rect.right - 4 ? \"col-resize\" : \"\";\n            }}\n            onMouseLeave={e => {\n                e.currentTarget.style.cursor = \"\";\n            }}\n            onMouseDown={e => {\n                const rect = e.currentTarget.getBoundingClientRect();\n                if (e.clientX >= rect.right - 4) {\n                    onDividerMouseDown(e);\n                }\n            }}\n        >\n            {isRunning && <OverlayLoader text=\"Running code...\" />}\n            <Editor\n                height=\"100%\"\n                defaultLanguage=\"typescript\"\n                value={code}\n                onChange={value => value && onCodeChange(value)}\n                beforeMount={onBeforeMount}\n                onMount={onMount}\n                options={{\n                    minimap: { enabled: false },\n                    renderLineHighlight: \"none\",\n                    fontSize: 14,\n                    automaticLayout: true,\n                    scrollBeyondLastLine: false,\n                    wordWrap: \"on\",\n                    tabSize: 4,\n                    insertSpaces: true,\n                    formatOnPaste: true,\n                    formatOnType: true,\n                    suggest: {\n                        showKeywords: true,\n                        showSnippets: true\n                    }\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["CodeEditor","code","editorPct","isRunning","onCodeChange","onBeforeMount","onMount","onDividerMouseDown","e","rect","OverlayLoader","Editor","value"],"mappings":";;;AAeO,MAAMA,aAAwC,CAAC,EAClDC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,aAAa,EACbC,OAAO,EACPC,kBAAkB,EACrB,GACU,WAAP,GACI,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,MAAM;YAAQ,OAAO,GAAGL,UAAU,CAAC,CAAC;QAAC;QAC9C,aAAaM,CAAAA;YACT,MAAMC,OAAOD,EAAE,aAAa,CAAC,qBAAqB;YAClDA,EAAE,aAAa,CAAC,KAAK,CAAC,MAAM,GAAGA,EAAE,OAAO,IAAIC,KAAK,KAAK,GAAG,IAAI,eAAe;QAChF;QACA,cAAcD,CAAAA;YACVA,EAAE,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG;QACnC;QACA,aAAaA,CAAAA;YACT,MAAMC,OAAOD,EAAE,aAAa,CAAC,qBAAqB;YAClD,IAAIA,EAAE,OAAO,IAAIC,KAAK,KAAK,GAAG,GAC1BF,mBAAmBC;QAE3B;OAECL,aAAa,WAAbA,GAAa,oBAACO,eAAaA;QAAC,MAAK;sBAClC,oBAACC,sBAAMA;QACH,QAAO;QACP,iBAAgB;QAChB,OAAOV;QACP,UAAUW,CAAAA,QAASA,SAASR,aAAaQ;QACzC,aAAaP;QACb,SAASC;QACT,SAAS;YACL,SAAS;gBAAE,SAAS;YAAM;YAC1B,qBAAqB;YACrB,UAAU;YACV,iBAAiB;YACjB,sBAAsB;YACtB,UAAU;YACV,SAAS;YACT,cAAc;YACd,eAAe;YACf,cAAc;YACd,SAAS;gBACL,cAAc;gBACd,cAAc;YAClB;QACJ"}

package/plugins/components/OutputLine.js

@@ -1,18 +1,17 @@
-import React from "react";
-export const OutputLine = ({
-  message
-}) => {
-  const colorClasses = {
-    log: "text-gray-800",
-    error: "text-red-700",
-    warn: "text-orange-600",
-    info: "text-blue-600"
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: `font-mono text-[13px] mb-1 whitespace-pre-wrap break-words ${colorClasses[message.type]}`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "text-gray-400 text-[11px]"
-  }, "[", new Date(message.timestamp).toLocaleTimeString(), "]"), " ", message.message);
+import react from "react";
+const OutputLine = ({ message })=>{
+    const colorClasses = {
+        log: "text-gray-800",
+        error: "text-red-700",
+        warn: "text-orange-600",
+        info: "text-blue-600"
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: `font-mono text-[13px] mb-1 whitespace-pre-wrap break-words ${colorClasses[message.type]}`
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "text-gray-400 text-[11px]"
+    }, "[", new Date(message.timestamp).toLocaleTimeString(), "]"), " ", message.message);
 };
+export { OutputLine };
 
 //# sourceMappingURL=OutputLine.js.map

package/plugins/components/OutputLine.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","OutputLine","message","colorClasses","log","error","warn","info","createElement","className","type","Date","timestamp","toLocaleTimeString"],"sources":["OutputLine.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ConsoleMessage } from \"../types.js\";\n\nexport const OutputLine: React.FC<{ message: ConsoleMessage }> = ({ message }) => {\n    const colorClasses: Record<ConsoleMessage[\"type\"], string> = {\n        log: \"text-gray-800\",\n        error: \"text-red-700\",\n        warn: \"text-orange-600\",\n        info: \"text-blue-600\"\n    };\n\n    return (\n        <div\n            className={`font-mono text-[13px] mb-1 whitespace-pre-wrap break-words ${colorClasses[message.type]}`}\n        >\n            <span className=\"text-gray-400 text-[11px]\">\n                [{new Date(message.timestamp).toLocaleTimeString()}]\n            </span>{\" \"}\n            {message.message}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,UAAiD,GAAGA,CAAC;EAAEC;AAAQ,CAAC,KAAK;EAC9E,MAAMC,YAAoD,GAAG;IACzDC,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAE,cAAc;IACrBC,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE;EACV,CAAC;EAED,oBACIP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,8DAA8DN,YAAY,CAACD,OAAO,CAACQ,IAAI,CAAC;EAAG,gBAEtGV,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAA2B,GAAC,GACvC,EAAC,IAAIE,IAAI,CAACT,OAAO,CAACU,SAAS,CAAC,CAACC,kBAAkB,CAAC,CAAC,EAAC,GACjD,CAAC,EAAC,GAAG,EACVX,OAAO,CAACA,OACR,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"plugins/components/OutputLine.js","sources":["../../../src/plugins/components/OutputLine.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ConsoleMessage } from \"../types.js\";\n\nexport const OutputLine: React.FC<{ message: ConsoleMessage }> = ({ message }) => {\n    const colorClasses: Record<ConsoleMessage[\"type\"], string> = {\n        log: \"text-gray-800\",\n        error: \"text-red-700\",\n        warn: \"text-orange-600\",\n        info: \"text-blue-600\"\n    };\n\n    return (\n        <div\n            className={`font-mono text-[13px] mb-1 whitespace-pre-wrap break-words ${colorClasses[message.type]}`}\n        >\n            <span className=\"text-gray-400 text-[11px]\">\n                [{new Date(message.timestamp).toLocaleTimeString()}]\n            </span>{\" \"}\n            {message.message}\n        </div>\n    );\n};\n"],"names":["OutputLine","message","colorClasses","Date"],"mappings":";AAGO,MAAMA,aAAoD,CAAC,EAAEC,OAAO,EAAE;IACzE,MAAMC,eAAuD;QACzD,KAAK;QACL,OAAO;QACP,MAAM;QACN,MAAM;IACV;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,WAAW,CAAC,2DAA2D,EAAEA,YAAY,CAACD,QAAQ,IAAI,CAAC,EAAE;qBAErG,oBAAC;QAAK,WAAU;OAA4B,KACtC,IAAIE,KAAKF,QAAQ,SAAS,EAAE,kBAAkB,IAAG,MAC/C,KACPA,QAAQ,OAAO;AAG5B"}

package/plugins/components/OutputPanel.js

@@ -1,26 +1,23 @@
-import React from "react";
+import react from "react";
 import { OutputLine } from "./OutputLine.js";
 import { MIN_PANE_PCT } from "../types.js";
-export const OutputPanel = ({
-  output
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "bg-white flex flex-col overflow-hidden",
-    style: {
-      flex: 1,
-      width: "auto",
-      minWidth: `${MIN_PANE_PCT}%`
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-2 border-b border-gray-200 font-bold"
-  }, "Output"), /*#__PURE__*/React.createElement("div", {
-    className: "p-2 overflow-auto flex-1"
-  }, output.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "text-gray-400 italic"
-  }, "Click \"Run Code\" to see output here...") : output.map((msg, index) => /*#__PURE__*/React.createElement(OutputLine, {
-    key: index,
-    message: msg
-  }))));
-};
+const OutputPanel = ({ output })=>/*#__PURE__*/ react.createElement("div", {
+        className: "bg-white flex flex-col overflow-hidden",
+        style: {
+            flex: 1,
+            width: "auto",
+            minWidth: `${MIN_PANE_PCT}%`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "p-2 border-b border-gray-200 font-bold"
+    }, "Output"), /*#__PURE__*/ react.createElement("div", {
+        className: "p-2 overflow-auto flex-1"
+    }, 0 === output.length ? /*#__PURE__*/ react.createElement("div", {
+        className: "text-gray-400 italic"
+    }, 'Click "Run Code" to see output here...') : output.map((msg, index)=>/*#__PURE__*/ react.createElement(OutputLine, {
+            key: index,
+            message: msg
+        }))));
+export { OutputPanel };
 
 //# sourceMappingURL=OutputPanel.js.map

package/plugins/components/OutputPanel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","OutputLine","MIN_PANE_PCT","OutputPanel","output","createElement","className","style","flex","width","minWidth","length","map","msg","index","key","message"],"sources":["OutputPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ConsoleMessage } from \"../types.js\";\nimport { OutputLine } from \"./OutputLine.js\";\nimport { MIN_PANE_PCT } from \"../types.js\";\n\ninterface OutputPanelProps {\n    output: ConsoleMessage[];\n}\n\nexport const OutputPanel: React.FC<OutputPanelProps> = ({ output }) => {\n    return (\n        <div\n            className=\"bg-white flex flex-col overflow-hidden\"\n            style={{ flex: 1, width: \"auto\", minWidth: `${MIN_PANE_PCT}%` }}\n        >\n            <div className=\"p-2 border-b border-gray-200 font-bold\">Output</div>\n            <div className=\"p-2 overflow-auto flex-1\">\n                {output.length === 0 ? (\n                    <div className=\"text-gray-400 italic\">\n                        Click &quot;Run Code&quot; to see output here...\n                    </div>\n                ) : (\n                    output.map((msg, index) => <OutputLine key={index} message={msg} />)\n                )}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU;AACnB,SAASC,YAAY;AAMrB,OAAO,MAAMC,WAAuC,GAAGA,CAAC;EAAEC;AAAO,CAAC,KAAK;EACnE,oBACIJ,KAAA,CAAAK,aAAA;IACIC,SAAS,EAAC,wCAAwC;IAClDC,KAAK,EAAE;MAAEC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAE,MAAM;MAAEC,QAAQ,EAAE,GAAGR,YAAY;IAAI;EAAE,gBAEhEF,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAwC,GAAC,QAAW,CAAC,eACpEN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACpCF,MAAM,CAACO,MAAM,KAAK,CAAC,gBAChBX,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAsB,GAAC,0CAEjC,CAAC,GAENF,MAAM,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBAAKd,KAAA,CAAAK,aAAA,CAACJ,UAAU;IAACc,GAAG,EAAED,KAAM;IAACE,OAAO,EAAEH;EAAI,CAAE,CAAC,CAEtE,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"plugins/components/OutputPanel.js","sources":["../../../src/plugins/components/OutputPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ConsoleMessage } from \"../types.js\";\nimport { OutputLine } from \"./OutputLine.js\";\nimport { MIN_PANE_PCT } from \"../types.js\";\n\ninterface OutputPanelProps {\n    output: ConsoleMessage[];\n}\n\nexport const OutputPanel: React.FC<OutputPanelProps> = ({ output }) => {\n    return (\n        <div\n            className=\"bg-white flex flex-col overflow-hidden\"\n            style={{ flex: 1, width: \"auto\", minWidth: `${MIN_PANE_PCT}%` }}\n        >\n            <div className=\"p-2 border-b border-gray-200 font-bold\">Output</div>\n            <div className=\"p-2 overflow-auto flex-1\">\n                {output.length === 0 ? (\n                    <div className=\"text-gray-400 italic\">\n                        Click &quot;Run Code&quot; to see output here...\n                    </div>\n                ) : (\n                    output.map((msg, index) => <OutputLine key={index} message={msg} />)\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["OutputPanel","output","MIN_PANE_PCT","msg","index","OutputLine"],"mappings":";;;AASO,MAAMA,cAA0C,CAAC,EAAEC,MAAM,EAAE,GACvD,WAAP,GACI,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,MAAM;YAAG,OAAO;YAAQ,UAAU,GAAGC,aAAa,CAAC,CAAC;QAAC;qBAE9D,oBAAC;QAAI,WAAU;OAAyC,yBACxD,oBAAC;QAAI,WAAU;OACVD,AAAkB,MAAlBA,OAAO,MAAM,GAAS,WAAJ,GACf,oBAAC;QAAI,WAAU;OAAuB,4CAItCA,OAAO,GAAG,CAAC,CAACE,KAAKC,QAAAA,WAAAA,GAAU,oBAACC,YAAUA;YAAC,KAAKD;YAAO,SAASD"}