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

package/dist/lib/node/ScriptContainer-J76LKPAM.cjs

@@ -0,0 +1,667 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ScriptContainer_J76LKPAM_exports = {};
+__export(ScriptContainer_J76LKPAM_exports, {
+  default: () => ScriptContainer_default
+});
+module.exports = __toCommonJS(ScriptContainer_J76LKPAM_exports);
+var import_chunk_UZ3ZXEBF = require("./chunk-UZ3ZXEBF.cjs");
+var import_chunk_ACLCRWDB = require("./chunk-ACLCRWDB.cjs");
+var import_chunk_2PZKJXNP = require("./chunk-2PZKJXNP.cjs");
+var import_chunk_OJ77BZRH = require("./chunk-OJ77BZRH.cjs");
+var import_react = __toESM(require("react"));
+var import_echo = require("@dxos/react-client/echo");
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_prettier = require("prettier");
+var import_estree = __toESM(require("prettier/plugins/estree"));
+var import_typescript = __toESM(require("prettier/plugins/typescript"));
+var import_react2 = __toESM(require("react"));
+var import_log = require("@dxos/log");
+var import_react_client = require("@dxos/react-client");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_halo = require("@dxos/react-client/halo");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react3 = __toESM(require("react"));
+var import_log2 = require("@dxos/log");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_syntax_highlighter = require("@dxos/react-ui-syntax-highlighter");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react4 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_lang_javascript = require("@codemirror/lang-javascript");
+var import_codemirror_ts = require("@valtown/codemirror-ts");
+var import_react5 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react_ui_editor2 = require("@dxos/react-ui-editor");
+var import_util = require("@dxos/util");
+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 } = (0, import_react_ui2.useTranslation)(import_chunk_OJ77BZRH.SCRIPT_PLUGIN);
+  const bindingInputRef = (0, import_react3.useRef)(null);
+  const [binding, setBinding] = (0, import_react_ui2.useControlledValue)(_binding ?? "");
+  const handleBlur = () => {
+    onBindingChange?.(binding);
+  };
+  const inputRef = (0, import_react3.useRef)(null);
+  const [input, setInput] = (0, import_react3.useState)("");
+  const [result, setResult] = (0, import_react3.useState)("");
+  const [state, setState] = (0, import_react3.useState)(null);
+  const [history, setHistory] = (0, import_react3.useState)([]);
+  const scrollerRef = (0, import_react3.useRef)(null);
+  const handleScroll = () => {
+    if (scrollerRef.current) {
+      scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+    }
+  };
+  const controller = (0, import_react3.useRef)();
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      handleStop();
+    };
+  }, []);
+  const handleStop = () => {
+    controller.current?.abort("stop");
+    controller.current = void 0;
+  };
+  const handleClear = () => {
+    handleStop();
+    setInput("");
+    setResult("");
+    setHistory([]);
+    inputRef.current?.focus();
+  };
+  const handleResponse = ({ text, data, error } = {}) => {
+    controller.current = void 0;
+    setHistory((history2) => [
+      ...history2,
+      {
+        type: "response",
+        text,
+        data,
+        error
+      }
+    ]);
+    setResult("");
+    setState(null);
+    handleScroll();
+  };
+  const handleRequest = async (input2) => {
+    try {
+      setState("pending");
+      let data = null;
+      if (input2.charAt(0) === "{") {
+        try {
+          const validJsonString = input2.replace(/'/g, '"').replace(/([{,]\s*)([a-zA-Z0-9_]+)(\s*:)/g, '$1"$2"$3');
+          data = JSON.parse(validJsonString);
+          input2 = JSON.stringify(data, null, 2);
+        } catch (err) {
+          inputRef.current?.focus();
+          return;
+        }
+      }
+      setInput("");
+      setResult("");
+      setHistory((history2) => [
+        ...history2,
+        {
+          type: "request",
+          text: input2
+        }
+      ]);
+      setTimeout(() => {
+        handleScroll();
+      });
+      controller.current = new AbortController();
+      const response = await fetch(functionUrl, {
+        signal: controller.current.signal,
+        method: "POST",
+        body: input2,
+        headers: {
+          "Content-Type": data ? "application/json" : "text/plain"
+        }
+      });
+      if (!response.ok) {
+        const text2 = await response.text();
+        handleResponse({
+          error: new Error(text2 || response.statusText || String(response.status))
+        });
+        return;
+      }
+      const contentType = response.headers.get("content-type");
+      if (contentType === "application/json") {
+        const data2 = await response.json();
+        handleResponse({
+          data: data2
+        });
+        return;
+      }
+      setState("responding");
+      let text = "";
+      const reader = response.body.getReader();
+      const pump = async ({ done, value }) => {
+        text = text + new TextDecoder().decode(value);
+        if (!controller.current || done) {
+          handleResponse({
+            text
+          });
+          return;
+        }
+        setResult(text);
+        setTimeout(() => {
+          handleScroll();
+        });
+        return reader.read().then(pump);
+      };
+      void reader.read().then(pump).catch((err) => {
+        if (err.name !== "AbortError") {
+          import_log2.log.catch(err, void 0, {
+            F: __dxlog_file,
+            L: 163,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        }
+      });
+    } catch (err) {
+      if (err !== "stop") {
+        const error = err instanceof Error ? err : new Error(err);
+        handleResponse({
+          error
+        });
+        import_log2.log.catch(err, void 0, {
+          F: __dxlog_file,
+          L: 170,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      } else {
+        handleResponse();
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme3.mx)("flex flex-col h-full overflow-hidden", classNames)
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    ref: scrollerRef,
+    className: "flex flex-col gap-6 h-full p-4 overflow-x-hidden overflow-y-auto"
+  }, /* @__PURE__ */ import_react3.default.createElement(MessageThread, {
+    state,
+    result,
+    history
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Root, {
+    classNames: "p-2"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Input.Root, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Input.TextInput, {
+    ref: inputRef,
+    autoFocus: true,
+    placeholder: t("function request placeholder"),
+    value: input,
+    onChange: (ev) => setInput(ev.target.value),
+    onKeyDown: (ev) => ev.key === "Enter" && handleRequest(input)
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Input.Root, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Input.TextInput, {
+    ref: bindingInputRef,
+    classNames: "!w-[10rem]",
+    placeholder: t("binding placeholder"),
+    value: binding,
+    onChange: (ev) => setBinding(ev.target.value.toUpperCase()),
+    onBlur: handleBlur
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Button, {
+    onClick: () => handleRequest(input)
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
+    icon: "ph--play--regular",
+    size: 4
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Button, {
+    onClick: () => state ? handleStop() : handleClear()
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
+    icon: state ? "ph--stop--regular" : "ph--trash--regular",
+    size: 4
+  })))));
+};
+var MessageThread = ({ state, result, history }) => {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, history.map((message, i) => /* @__PURE__ */ import_react3.default.createElement("div", {
+    key: i,
+    className: "grid grid-cols-[3rem_1fr_3rem]"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "p-1"
+  }, message.type === "response" && /* @__PURE__ */ import_react3.default.createElement(RobotAvatar, null)), /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "overflow-auto"
+  }, /* @__PURE__ */ import_react3.default.createElement(MessageItem, {
+    message
+  })))), result?.length > 0 && /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "grid grid-cols-[3rem_1fr_3rem]"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "p-1"
+  }, state === "pending" && /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
+    icon: "ph--spinner--regular",
+    size: 6,
+    classNames: "animate-spin"
+  }) || /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
+    icon: "ph--robot--regular",
+    size: 6,
+    classNames: "animate-[pulse_1s_ease-in-out_infinite]"
+  })), /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "overflow-auto"
+  }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme3.mx)("flex", type === "request" ? "ml-[8rem] justify-end" : "mr-[8rem]", classNames)
+  }, error && /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme3.mx)(wrapper, "whitespace-pre text-error")
+  }, String(error)), text !== void 0 && /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme3.mx)(wrapper, type === "request" && "bg-primary-400 dark:bg-primary-600")
+  }, text || "\xD8"), data && /* @__PURE__ */ import_react3.default.createElement(import_react_ui_syntax_highlighter.SyntaxHighlighter, {
+    language: "json",
+    className: (0, import_react_ui_theme3.mx)(wrapper, "px-8 py-2 text-xs")
+  }, JSON.stringify(data, null, 2)));
+};
+var RobotAvatar = () => /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Avatar.Root, {
+  size: 6,
+  variant: "circle"
+}, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Avatar.Frame, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Avatar.Icon, {
+  icon: "ph--robot--regular"
+})));
+var Toolbar2 = ({ classNames, deployed, error, functionUrl, view, templates: templates2, onDeploy, onFormat, onViewChange, onTemplateSelect }) => {
+  const { t } = (0, import_react_ui3.useTranslation)(import_chunk_OJ77BZRH.SCRIPT_PLUGIN);
+  const [pending, setPending] = (0, import_react4.useState)(false);
+  const handleCopyLink = async () => {
+    if (!functionUrl) {
+      return;
+    }
+    await navigator.clipboard.writeText(functionUrl);
+  };
+  const handleDeploy = async () => {
+    if (!pending) {
+      setPending(true);
+      await onDeploy?.();
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Root, {
+    classNames: [
+      "p-1",
+      classNames
+    ],
+    style: {
+      contain: "layout"
+    }
+  }, templates2 && /* @__PURE__ */ import_react4.default.createElement(TemplateSelect, {
+    templates: templates2,
+    onTemplateSelect
+  }), onFormat && /* @__PURE__ */ import_react4.default.createElement(ToolbarIconButton, {
+    icon: "ph--magic-wand--regular",
+    text: t("format label"),
+    onClick: onFormat
+  }), /* @__PURE__ */ import_react4.default.createElement("div", {
+    role: "separator",
+    className: "grow"
+  }), error ? /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Root, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+    icon: "ph--warning-circle--regular",
+    size: 4
+  })), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Arrow, null), error))) : null, functionUrl && deployed && /* @__PURE__ */ import_react4.default.createElement(ToolbarIconButton, {
+    icon: "ph--link--regular",
+    text: t("copy link label"),
+    onClick: handleCopyLink
+  }), onDeploy && /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(ViewSelector, {
+    view,
+    onViewChange
+  }))));
+};
+var ToolbarIconButton = ({ icon, text, classNames, disabled, onClick }) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Root, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Button, {
+    variant: "ghost",
+    disabled,
+    onClick
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+    icon,
+    size: 4,
+    classNames
+  }))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Arrow, null), text)));
+};
+var TemplateSelect = ({ templates: templates2 = [], onTemplateSelect }) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.Root, {
+    value: "",
+    onValueChange: onTemplateSelect
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.TriggerButton, null), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.Viewport, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.Option, {
+    value: ""
+  }, "Template"), templates2.map(({ id, name }) => /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Select.Option, {
+    key: id,
+    value: id
+  }, name))))));
+};
+var ViewSelector = ({ view, onViewChange }) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.ToggleGroup, {
+    type: "single",
+    value: view,
+    onValueChange: (value) => onViewChange?.(value)
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.ToggleGroupItem, {
+    value: "editor",
+    classNames: "bg-transparent text-subdued"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+    icon: "ph--code--regular",
+    size: 4
+  })), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.ToggleGroupItem, {
+    value: "split",
+    classNames: "bg-transparent text-subdued"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+    icon: "ph--square-split-vertical--regular",
+    size: 4
+  })), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.ToggleGroupItem, {
+    value: "preview",
+    classNames: "bg-transparent text-subdued"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+    icon: "ph--eye--regular",
+    size: 4
+  })));
+};
+var TypescriptEditor = ({ id, env, className, initialValue, extensions, scrollTo, selection }) => {
+  const { themeMode } = (0, import_react_ui4.useThemeContext)();
+  const { parentRef, focusAttributes } = (0, import_react_ui_editor2.useTextEditor)(() => ({
+    id,
+    initialValue,
+    extensions: [
+      extensions,
+      (0, import_react_ui_editor2.createBasicExtensions)({
+        highlightActiveLine: true,
+        indentWithTab: true,
+        lineNumbers: true,
+        lineWrapping: false,
+        scrollPastEnd: true
+      }),
+      (0, import_react_ui_editor2.createThemeExtensions)({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: {
+          content: {
+            className: import_react_ui_editor2.editorFullWidth
+          }
+        }
+      }),
+      import_react_ui_editor2.editorGutter,
+      // TODO(burdon): Factor out.
+      [
+        import_react_ui_editor2.editorMonospace,
+        (0, import_lang_javascript.javascript)({
+          typescript: true
+        }),
+        // https://github.com/val-town/codemirror-ts
+        (0, import_react_ui_editor2.autocomplete)({
+          override: env ? [
+            (0, import_codemirror_ts.tsAutocomplete)()
+          ] : []
+        }),
+        env ? [
+          import_codemirror_ts.tsFacet.of({
+            env,
+            path: `/src/${id}.ts`
+          }),
+          (0, import_codemirror_ts.tsSync)(),
+          (0, import_codemirror_ts.tsLinter)(),
+          (0, import_codemirror_ts.tsHover)()
+        ] : [],
+        import_react_ui_editor2.InputModeExtensions.vscode
+      ]
+    ].filter(import_util.nonNullable),
+    selection,
+    scrollTo
+  }), [
+    id,
+    initialValue,
+    extensions,
+    themeMode,
+    selection,
+    scrollTo
+  ]);
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
+    ref: parentRef,
+    className,
+    ...focusAttributes
+  });
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-script/src/components/ScriptEditor.tsx";
+var ScriptEditor = ({ classNames, script, env }) => {
+  const { t } = (0, import_react_ui.useTranslation)(import_chunk_OJ77BZRH.SCRIPT_PLUGIN);
+  const client = (0, import_react_client.useClient)();
+  const identity = (0, import_halo.useIdentity)();
+  const space = (0, import_echo2.getSpace)(script);
+  const [fn] = (0, import_echo2.useQuery)(space, import_echo2.Filter.schema(import_chunk_2PZKJXNP.FunctionType, (fn2) => fn2.source === script));
+  const extensions = (0, import_react2.useMemo)(() => [
+    (0, import_react_ui_editor.listener)({
+      onChange: (text) => {
+        if (script.source && script.source?.content !== text) {
+          script.changed = true;
+        }
+      }
+    }),
+    (0, import_react_ui_editor.createDataExtensions)({
+      id: script.id,
+      text: script.source && (0, import_echo2.createDocAccessor)(script.source, [
+        "content"
+      ]),
+      space,
+      identity
+    })
+  ], [
+    script,
+    script.source,
+    space,
+    identity
+  ]);
+  const [view, setView] = (0, import_react2.useState)("editor");
+  const initialValue = (0, import_react2.useMemo)(() => script.source?.content, [
+    script.source
+  ]);
+  const existingFunctionUrl = fn && (0, import_chunk_UZ3ZXEBF.getUserFunctionUrlInMetadata)((0, import_echo2.getMeta)(fn));
+  const [error, setError] = (0, import_react2.useState)();
+  const handleBindingChange = (0, import_react2.useCallback)((binding) => {
+    fn.binding = binding;
+  }, [
+    fn
+  ]);
+  const handleFormat = (0, import_react2.useCallback)(async () => {
+    if (!script.source) {
+      return;
+    }
+    try {
+      script.source.content = await (0, import_prettier.format)(script.source.content, {
+        parser: "typescript",
+        plugins: [
+          import_estree.default,
+          import_typescript.default
+        ],
+        semi: true,
+        singleQuote: true
+      });
+    } catch (err) {
+      import_log.log.catch(err, void 0, {
+        F: __dxlog_file2,
+        L: 94,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }, [
+    script.source
+  ]);
+  const handleTemplateChange = (id) => {
+    const template = import_chunk_ACLCRWDB.templates.find((template2) => template2.id === id);
+    if (template) {
+      script.name = template.name;
+      script.source.content = template.source;
+      const metaKeys = (0, import_echo2.getMeta)(script).keys;
+      const oldPresetIndex = metaKeys.findIndex((key) => key.source === import_chunk_UZ3ZXEBF.USERFUNCTIONS_PRESET_META_KEY);
+      if (oldPresetIndex >= 0) {
+        metaKeys.splice(oldPresetIndex, 1);
+      }
+      if (template.presetId) {
+        metaKeys.push({
+          source: import_chunk_UZ3ZXEBF.USERFUNCTIONS_PRESET_META_KEY,
+          id: template.presetId
+        });
+      }
+    }
+  };
+  const handleDeploy = (0, import_react2.useCallback)(async () => {
+    if (!script.source || !identity || !space) {
+      return;
+    }
+    setError(void 0);
+    try {
+      const existingFunctionId = existingFunctionUrl?.split("/").at(-1);
+      const ownerDid = existingFunctionUrl?.split("/").at(-2) ?? (0, import_chunk_UZ3ZXEBF.publicKeyToDid)(identity.identityKey);
+      const bundler = new import_chunk_ACLCRWDB.Bundler({
+        platform: "browser",
+        sandboxedModules: [],
+        remoteModules: {}
+      });
+      const buildResult = await bundler.bundle(script.source.content);
+      if (buildResult.error || !buildResult.bundle) {
+        throw buildResult.error;
+      }
+      const { result, functionId, functionVersionNumber, errorMessage } = await (0, import_chunk_UZ3ZXEBF.uploadWorkerFunction)({
+        clientConfig: client.config,
+        halo: client.halo,
+        ownerDid,
+        functionId: existingFunctionId,
+        source: buildResult.bundle
+      });
+      if (result !== "success" || functionId === void 0 || functionVersionNumber === void 0) {
+        throw new Error(errorMessage);
+      }
+      import_log.log.info("function uploaded", {
+        functionId,
+        functionVersionNumber
+      }, {
+        F: __dxlog_file2,
+        L: 142,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      if (fn) {
+        fn.version = functionVersionNumber;
+      }
+      const deployedFunction = fn ?? space.db.add((0, import_echo2.create)(import_chunk_2PZKJXNP.FunctionType, {
+        version: functionVersionNumber,
+        source: script
+      }));
+      const meta = (0, import_echo2.getMeta)(deployedFunction);
+      script.changed = false;
+      (0, import_chunk_UZ3ZXEBF.setUserFunctionUrlInMetadata)(meta, `/${ownerDid}/${functionId}`);
+      setView("split");
+    } catch (err) {
+      import_log.log.catch(err, void 0, {
+        F: __dxlog_file2,
+        L: 154,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setError(t("upload failed label"));
+    }
+  }, [
+    fn,
+    existingFunctionUrl,
+    script,
+    script.name,
+    script.source
+  ]);
+  const functionUrl = (0, import_react2.useMemo)(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+    const baseUrl = new URL("functions/", client.config.values.runtime?.services?.edge?.url);
+    const relativeUrl = existingFunctionUrl.replace(/^\//, "");
+    const url = new URL(`./${relativeUrl}`, baseUrl.toString());
+    space && url.searchParams.set("spaceId", space.id);
+    url.protocol = "https";
+    return url.toString();
+  }, [
+    existingFunctionUrl,
+    space
+  ]);
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme2.mx)("flex flex-col w-full overflow-hidden divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ import_react2.default.createElement(Toolbar2, {
+    deployed: Boolean(existingFunctionUrl) && !script.changed,
+    functionUrl,
+    error,
+    view,
+    templates: import_chunk_ACLCRWDB.templates,
+    onDeploy: handleDeploy,
+    onFormat: handleFormat,
+    onViewChange: setView,
+    onTemplateSelect: handleTemplateChange
+  }), view !== "preview" && /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement(DebugPanel, {
+    functionUrl,
+    binding: fn?.binding,
+    onBindingChange: handleBindingChange
+  }));
+};
+var ScriptContainer = ({ script, ...props }) => {
+  const hasAttention = (0, import_react_ui_attention.useHasAttention)((0, import_echo.fullyQualifiedId)(script));
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("flex row-span-2 w-full overflow-hidden", hasAttention && "attention-surface")
+  }, /* @__PURE__ */ import_react.default.createElement(ScriptEditor, {
+    ...props,
+    script
+  }));
+};
+var ScriptContainer_default = ScriptContainer;
+//# sourceMappingURL=ScriptContainer-J76LKPAM.cjs.map