@dxos/plugin-script 0.6.12-main.5cc132e → 0.6.12-main.c974201

package/dist/lib/node/types/index.cjs

@@ -18,13 +18,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
 __export(types_exports, {
-  FunctionType: () => import_chunk_5RBVXKXT.FunctionType,
-  ScriptAction: () => import_chunk_5RBVXKXT.ScriptAction,
-  ScriptType: () => import_chunk_5RBVXKXT.ScriptType
+  FunctionType: () => import_chunk_2PZKJXNP.FunctionType,
+  ScriptAction: () => import_chunk_2PZKJXNP.ScriptAction,
+  ScriptType: () => import_chunk_2PZKJXNP.ScriptType
 });
 module.exports = __toCommonJS(types_exports);
-var import_chunk_5RBVXKXT = require("../chunk-5RBVXKXT.cjs");
-var import_chunk_4VMNBXWU = require("../chunk-4VMNBXWU.cjs");
+var import_chunk_2PZKJXNP = require("../chunk-2PZKJXNP.cjs");
+var import_chunk_OJ77BZRH = require("../chunk-OJ77BZRH.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FunctionType,

package/dist/lib/node/types/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.cjs"],
-  "sourcesContent": ["import {\n  FunctionType,\n  ScriptAction,\n  ScriptType\n} from \"../chunk-5RBVXKXT.cjs\";\nimport \"../chunk-4VMNBXWU.cjs\";\nexport {\n  FunctionType,\n  ScriptAction,\n  ScriptType\n};\n//# sourceMappingURL=index.cjs.map\n"],
+  "sourcesContent": ["import {\n  FunctionType,\n  ScriptAction,\n  ScriptType\n} from \"../chunk-2PZKJXNP.cjs\";\nimport \"../chunk-OJ77BZRH.cjs\";\nexport {\n  FunctionType,\n  ScriptAction,\n  ScriptType\n};\n//# sourceMappingURL=index.cjs.map\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAIO;AACP,4BAAO;",
   "names": []
 }

package/dist/lib/node-esm/{ScriptEditor-5Y3EROG3.mjs → ScriptContainer-F6ACEA63.mjs}

@@ -1,43 +1,48 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
+  USERFUNCTIONS_PRESET_META_KEY,
   getUserFunctionUrlInMetadata,
   publicKeyToDid,
   setUserFunctionUrlInMetadata,
   uploadWorkerFunction
-} from "./chunk-DL5XQRQM.mjs";
+} from "./chunk-2NX3HWPM.mjs";
 import {
-  Bundler
-} from "./chunk-RHEZ5LUU.mjs";
+  Bundler,
+  templates
+} from "./chunk-LDLNTVAK.mjs";
 import {
   FunctionType
-} from "./chunk-O4LWBX6A.mjs";
+} from "./chunk-7BZDZF7Z.mjs";
 import {
   SCRIPT_PLUGIN
-} from "./chunk-JBACGDOJ.mjs";
-import {
-  TypescriptEditor
-} from "./chunk-MRGOT5RF.mjs";
+} from "./chunk-TZ3Z4SII.mjs";
+
+// packages/plugins/experimental/plugin-script/src/components/ScriptContainer.tsx
+import React5 from "react";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+import { useHasAttention } from "@dxos/react-ui-attention";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/plugins/experimental/plugin-script/src/components/ScriptEditor.tsx
 import { format } from "prettier";
 import prettierPluginEstree from "prettier/plugins/estree";
 import prettierPluginTypescript from "prettier/plugins/typescript";
-import React3, { useCallback, useMemo, useState as useState3 } from "react";
+import React4, { useCallback, useMemo, useState as useState3 } from "react";
 import { log as log2 } from "@dxos/log";
 import { useClient } from "@dxos/react-client";
-import { create, createDocAccessor, Filter, fullyQualifiedId, getMeta, getSpace, useQuery } from "@dxos/react-client/echo";
+import { create, createDocAccessor, Filter, getMeta, getSpace, useQuery } from "@dxos/react-client/echo";
 import { useIdentity } from "@dxos/react-client/halo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { useHasAttention } from "@dxos/react-ui-attention";
 import { createDataExtensions, listener } from "@dxos/react-ui-editor";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/plugins/experimental/plugin-script/src/components/DebugPanel.tsx
+// packages/plugins/experimental/plugin-script/src/components/DebugPanel/DebugPanel.tsx
 import React, { useEffect, useRef, useState } from "react";
 import { log } from "@dxos/log";
 import { Avatar, DensityProvider, Icon, Input, Toolbar, useControlledValue, useTranslation } from "@dxos/react-ui";
 import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
 import { mx } from "@dxos/react-ui-theme";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/components/DebugPanel.tsx";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/components/DebugPanel/DebugPanel.tsx";
 var DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange }) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const bindingInputRef = useRef(null);
@@ -221,52 +226,62 @@ var DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange
     size: 4
   })))));
 };
-var RobotAvatar = () => /* @__PURE__ */ React.createElement(Avatar.Root, {
-  size: 6,
-  variant: "circle"
-}, /* @__PURE__ */ React.createElement(Avatar.Frame, null, /* @__PURE__ */ React.createElement(Avatar.Icon, {
-  icon: "ph--robot--regular"
-})));
-var MessageItem = ({ classNames, message }) => {
-  const { text, data, error } = message;
-  if (error) {
-    return /* @__PURE__ */ React.createElement("span", {
-      className: mx(classNames, "whitespace-pre text-error")
-    }, String(error));
-  } else if (data) {
-    return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
-      language: "json",
-      className: mx("text-xs", classNames)
-    }, JSON.stringify(data, null, 2));
-  }
-  return /* @__PURE__ */ React.createElement("span", {
-    className: mx(classNames)
-  }, text || "\xD8");
-};
 var MessageThread = ({ state, result, history }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, history.map((message, i) => /* @__PURE__ */ React.createElement("div", {
     key: i,
-    className: "grid grid-cols-[3rem_1fr]"
-  }, /* @__PURE__ */ React.createElement("div", null, message.type === "response" && /* @__PURE__ */ React.createElement(RobotAvatar, null)), /* @__PURE__ */ React.createElement("div", {
-    className: mx("flex", message.type === "request" && "justify-end")
+    className: "grid grid-cols-[3rem_1fr_3rem]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "p-1"
+  }, message.type === "response" && /* @__PURE__ */ React.createElement(RobotAvatar, null)), /* @__PURE__ */ React.createElement("div", {
+    className: "overflow-auto"
   }, /* @__PURE__ */ React.createElement(MessageItem, {
-    classNames: [
-      message.type === "request" && "p-1 px-2 rounded-lg bg-hoverSurface"
-    ],
     message
-  })))), /* @__PURE__ */ React.createElement("div", {
-    className: "grid grid-cols-[3rem_1fr]"
-  }, /* @__PURE__ */ React.createElement("div", null, state === "pending" && /* @__PURE__ */ React.createElement(Icon, {
+  })))), result?.length > 0 && /* @__PURE__ */ React.createElement("div", {
+    className: "grid grid-cols-[3rem_1fr_3rem]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "p-1"
+  }, state === "pending" && /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--spinner--regular",
     size: 6,
-    classNames: "animate-spin-slow"
-  }) || result.length > 0 && /* @__PURE__ */ React.createElement(RobotAvatar, null)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", null, result))));
+    classNames: "animate-spin"
+  }) || /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--robot--regular",
+    size: 6,
+    classNames: "animate-[pulse_1s_ease-in-out_infinite]"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "overflow-auto"
+  }, /* @__PURE__ */ React.createElement(MessageItem, {
+    message: {
+      type: "response",
+      text: result
+    }
+  }))));
 };
+var MessageItem = ({ classNames, message }) => {
+  const { type, text, data, error } = message;
+  const wrapper = "p-1 px-2 rounded-lg bg-hoverSurface overflow-auto";
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex", type === "request" ? "ml-[8rem] justify-end" : "mr-[8rem]", classNames)
+  }, error && /* @__PURE__ */ React.createElement("div", {
+    className: mx(wrapper, "whitespace-pre text-error")
+  }, String(error)), text !== void 0 && /* @__PURE__ */ React.createElement("div", {
+    className: mx(wrapper, type === "request" && "bg-primary-400 dark:bg-primary-600")
+  }, text || "\xD8"), data && /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+    language: "json",
+    className: mx(wrapper, "px-8 py-2 text-xs")
+  }, JSON.stringify(data, null, 2)));
+};
+var RobotAvatar = () => /* @__PURE__ */ React.createElement(Avatar.Root, {
+  size: 6,
+  variant: "circle"
+}, /* @__PURE__ */ React.createElement(Avatar.Frame, null, /* @__PURE__ */ React.createElement(Avatar.Icon, {
+  icon: "ph--robot--regular"
+})));
 
-// packages/plugins/experimental/plugin-script/src/components/Toolbar.tsx
+// packages/plugins/experimental/plugin-script/src/components/Toolbar/Toolbar.tsx
 import React2, { useState as useState2 } from "react";
-import { DensityProvider as DensityProvider2, ElevationProvider, Icon as Icon2, Toolbar as NaturalToolbar, Tooltip, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var Toolbar2 = ({ classNames, deployed, error, functionUrl, showPanel, onDeploy, onFormat, onTogglePanel }) => {
+import { DensityProvider as DensityProvider2, ElevationProvider, Icon as Icon2, Select, ToggleGroup, ToggleGroupItem, Toolbar as NaturalToolbar, Tooltip, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var Toolbar2 = ({ classNames, deployed, error, functionUrl, view, templates: templates2, onDeploy, onFormat, onViewChange, onTemplateSelect }) => {
   const { t } = useTranslation2(SCRIPT_PLUGIN);
   const [pending, setPending] = useState2(false);
   const handleCopyLink = async () => {
@@ -276,9 +291,11 @@ var Toolbar2 = ({ classNames, deployed, error, functionUrl, showPanel, onDeploy,
     await navigator.clipboard.writeText(functionUrl);
   };
   const handleDeploy = async () => {
-    setPending(true);
-    await onDeploy?.();
-    setPending(false);
+    if (!pending) {
+      setPending(true);
+      await onDeploy?.();
+      setPending(false);
+    }
   };
   return /* @__PURE__ */ React2.createElement(DensityProvider2, {
     density: "fine"
@@ -292,57 +309,161 @@ var Toolbar2 = ({ classNames, deployed, error, functionUrl, showPanel, onDeploy,
     style: {
       contain: "layout"
     }
-  }, onFormat && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    onClick: onFormat
-  }, /* @__PURE__ */ React2.createElement(Icon2, {
+  }, templates2 && /* @__PURE__ */ React2.createElement(TemplateSelect, {
+    templates: templates2,
+    onTemplateSelect
+  }), onFormat && /* @__PURE__ */ React2.createElement(ToolbarIconButton, {
     icon: "ph--magic-wand--regular",
-    size: 4
-  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), t("format label")))), /* @__PURE__ */ React2.createElement("div", {
+    text: t("format label"),
+    onClick: onFormat
+  }), /* @__PURE__ */ React2.createElement("div", {
     role: "separator",
     className: "grow"
   }), error ? /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, null, /* @__PURE__ */ React2.createElement(Icon2, {
     icon: "ph--warning-circle--regular",
     size: 4
-  })), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error))) : null, functionUrl && deployed && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    onClick: handleCopyLink
-  }, /* @__PURE__ */ React2.createElement(Icon2, {
+  })), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error))) : null, functionUrl && deployed && /* @__PURE__ */ React2.createElement(ToolbarIconButton, {
     icon: "ph--link--regular",
-    size: 4
-  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), t("copy link label")))), /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    text: t("copy link label"),
+    onClick: handleCopyLink
+  }), onDeploy && /* @__PURE__ */ React2.createElement(ToolbarIconButton, {
+    icon: pending ? "ph--spinner-gap--regular" : "ph--cloud-arrow-up--regular",
+    classNames: [
+      pending && "animate-spin"
+    ],
+    text: pending ? t("pending label") : t("deploy label"),
+    onClick: handleDeploy
+  }), /* @__PURE__ */ React2.createElement(ViewSelector, {
+    view,
+    onViewChange
+  }))));
+};
+var ToolbarIconButton = ({ icon, text, classNames, disabled, onClick }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     variant: "ghost",
-    onClick: handleDeploy,
-    disabled: pending
-  }, pending ? /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--spinner--regular",
+    disabled,
+    onClick
+  }, /* @__PURE__ */ React2.createElement(Icon2, {
+    icon,
     size: 4,
-    classNames: "animate-spin-slow"
-  }) : /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--cloud-arrow-up--regular",
+    classNames
+  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), text)));
+};
+var TemplateSelect = ({ templates: templates2 = [], onTemplateSelect }) => {
+  return /* @__PURE__ */ React2.createElement(Select.Root, {
+    value: "",
+    onValueChange: onTemplateSelect
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+    value: ""
+  }, "Template"), templates2.map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key: id,
+    value: id
+  }, name))))));
+};
+var ViewSelector = ({ view, onViewChange }) => {
+  return /* @__PURE__ */ React2.createElement(ToggleGroup, {
+    type: "single",
+    value: view,
+    onValueChange: (value) => onViewChange?.(value)
+  }, /* @__PURE__ */ React2.createElement(ToggleGroupItem, {
+    value: "editor",
+    classNames: "bg-transparent text-subdued"
+  }, /* @__PURE__ */ React2.createElement(Icon2, {
+    icon: "ph--code--regular",
     size: 4
-  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), pending ? t("pending label") : t("deploy label")))), onTogglePanel && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    onClick: onTogglePanel
+  })), /* @__PURE__ */ React2.createElement(ToggleGroupItem, {
+    value: "split",
+    classNames: "bg-transparent text-subdued"
+  }, /* @__PURE__ */ React2.createElement(Icon2, {
+    icon: "ph--square-split-vertical--regular",
+    size: 4
+  })), /* @__PURE__ */ React2.createElement(ToggleGroupItem, {
+    value: "preview",
+    classNames: "bg-transparent text-subdued"
   }, /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: showPanel ? "ph--caret-down--regular" : "ph--caret-up--regular",
+    icon: "ph--eye--regular",
     size: 4
-  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, null, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), t("toggle details label")))))));
+  })));
+};
+
+// packages/plugins/experimental/plugin-script/src/components/TypescriptEditor/TypescriptEditor.tsx
+import { javascript } from "@codemirror/lang-javascript";
+import { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover } from "@valtown/codemirror-ts";
+import React3 from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { autocomplete, createBasicExtensions, createThemeExtensions, editorFullWidth, editorGutter, editorMonospace, InputModeExtensions, useTextEditor } from "@dxos/react-ui-editor";
+import { nonNullable } from "@dxos/util";
+var TypescriptEditor = ({ id, env, className, initialValue, extensions, scrollTo, selection }) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef, focusAttributes } = useTextEditor(() => ({
+    id,
+    initialValue,
+    extensions: [
+      extensions,
+      createBasicExtensions({
+        highlightActiveLine: true,
+        indentWithTab: true,
+        lineNumbers: true,
+        lineWrapping: false,
+        scrollPastEnd: true
+      }),
+      createThemeExtensions({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: {
+          content: {
+            className: editorFullWidth
+          }
+        }
+      }),
+      editorGutter,
+      // TODO(burdon): Factor out.
+      [
+        editorMonospace,
+        javascript({
+          typescript: true
+        }),
+        // https://github.com/val-town/codemirror-ts
+        autocomplete({
+          override: env ? [
+            tsAutocomplete()
+          ] : []
+        }),
+        env ? [
+          tsFacet.of({
+            env,
+            path: `/src/${id}.ts`
+          }),
+          tsSync(),
+          tsLinter(),
+          tsHover()
+        ] : [],
+        InputModeExtensions.vscode
+      ]
+    ].filter(nonNullable),
+    selection,
+    scrollTo
+  }), [
+    id,
+    initialValue,
+    extensions,
+    themeMode,
+    selection,
+    scrollTo
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    ref: parentRef,
+    className,
+    ...focusAttributes
+  });
 };
 
 // packages/plugins/experimental/plugin-script/src/components/ScriptEditor.tsx
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/components/ScriptEditor.tsx";
-var ScriptEditor = ({ env, script, role }) => {
+var ScriptEditor = ({ classNames, script, env }) => {
   const { t } = useTranslation3(SCRIPT_PLUGIN);
-  const hasAttention = useHasAttention(fullyQualifiedId(script));
   const client = useClient();
   const identity = useIdentity();
   const space = getSpace(script);
@@ -369,7 +490,7 @@ var ScriptEditor = ({ env, script, role }) => {
     space,
     identity
   ]);
-  const [showPanel, setShowPanel] = useState3(false);
+  const [view, setView] = useState3("editor");
   const initialValue = useMemo(() => script.source?.content, [
     script.source
   ]);
@@ -397,7 +518,7 @@ var ScriptEditor = ({ env, script, role }) => {
     } catch (err) {
       log2.catch(err, void 0, {
         F: __dxlog_file2,
-        L: 102,
+        L: 94,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -405,6 +526,24 @@ var ScriptEditor = ({ env, script, role }) => {
   }, [
     script.source
   ]);
+  const handleTemplateChange = (id) => {
+    const template = templates.find((template2) => template2.id === id);
+    if (template) {
+      script.name = template.name;
+      script.source.content = template.source;
+      const metaKeys = getMeta(script).keys;
+      const oldPresetIndex = metaKeys.findIndex((key) => key.source === USERFUNCTIONS_PRESET_META_KEY);
+      if (oldPresetIndex >= 0) {
+        metaKeys.splice(oldPresetIndex, 1);
+      }
+      if (template.presetId) {
+        metaKeys.push({
+          source: USERFUNCTIONS_PRESET_META_KEY,
+          id: template.presetId
+        });
+      }
+    }
+  };
   const handleDeploy = useCallback(async () => {
     if (!script.source || !identity || !space) {
       return;
@@ -437,7 +576,7 @@ var ScriptEditor = ({ env, script, role }) => {
         functionVersionNumber
       }, {
         F: __dxlog_file2,
-        L: 137,
+        L: 142,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -449,12 +588,13 @@ var ScriptEditor = ({ env, script, role }) => {
         source: script
       }));
       const meta = getMeta(deployedFunction);
-      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
       script.changed = false;
+      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
+      setView("split");
     } catch (err) {
       log2.catch(err, void 0, {
         F: __dxlog_file2,
-        L: 147,
+        L: 154,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -481,33 +621,45 @@ var ScriptEditor = ({ env, script, role }) => {
     existingFunctionUrl,
     space
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx2("flex flex-col is-full bs-full overflow-hidden", role === "article" && "row-span-2", hasAttention && "attention-surface")
-  }, /* @__PURE__ */ React3.createElement(TypescriptEditor, {
-    id: script.id,
-    env,
-    initialValue,
-    extensions,
-    className: "flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all"
-  }), /* @__PURE__ */ React3.createElement(Toolbar2, {
-    classNames: "border-t border-separator",
+    className: mx2("flex flex-col w-full overflow-hidden divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ React4.createElement(Toolbar2, {
     deployed: Boolean(existingFunctionUrl) && !script.changed,
     functionUrl,
     error,
-    showPanel,
+    view,
+    templates,
     onDeploy: handleDeploy,
     onFormat: handleFormat,
-    onTogglePanel: async () => setShowPanel((showDetails) => !showDetails)
-  }), showPanel && /* @__PURE__ */ React3.createElement(DebugPanel, {
+    onViewChange: setView,
+    onTemplateSelect: handleTemplateChange
+  }), view !== "preview" && /* @__PURE__ */ React4.createElement(TypescriptEditor, {
+    id: script.id,
+    env,
+    initialValue,
+    extensions,
+    className: "flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all"
+  }), view !== "editor" && /* @__PURE__ */ React4.createElement(DebugPanel, {
     functionUrl,
     binding: fn?.binding,
     onBindingChange: handleBindingChange
   }));
 };
-var ScriptEditor_default = ScriptEditor;
+
+// packages/plugins/experimental/plugin-script/src/components/ScriptContainer.tsx
+var ScriptContainer = ({ script, ...props }) => {
+  const hasAttention = useHasAttention(fullyQualifiedId(script));
+  return /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: mx3("flex row-span-2 w-full overflow-hidden", hasAttention && "attention-surface")
+  }, /* @__PURE__ */ React5.createElement(ScriptEditor, {
+    ...props,
+    script
+  }));
+};
+var ScriptContainer_default = ScriptContainer;
 export {
-  ScriptEditor,
-  ScriptEditor_default as default
+  ScriptContainer_default as default
 };
-//# sourceMappingURL=ScriptEditor-5Y3EROG3.mjs.map
+//# sourceMappingURL=ScriptContainer-F6ACEA63.mjs.map