@cozeloop/prompt-components 0.0.1

package/dist/es/code-editor/themes/coze-dark.js

@@ -0,0 +1,112 @@
+import { createTheme, tags as t } from "@coze-editor/editor/preset-code";
+import { EditorView } from "@codemirror/view";
+const colors = {
+  background: "#151B27",
+  // syntax
+  comment: "#FFFFFF63",
+  key: "#39E5D7",
+  string: "#FF94D2",
+  number: "#FF9933",
+  boolean: "#78B0FF",
+  null: "#78B0FF",
+  separator: "#FFFFFFC9"
+};
+const cozeDark = [
+  EditorView.theme({
+    ".cm-completionIcon-property": {
+      backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4zNTc2IDguMTAzNTVDMTIuMTYyMyA3LjkwODI5IDExLjg0NTcgNy45MDgyOSAxMS42NTA1IDguMTAzNTVMOC4xMDM1NSAxMS42NTA1QzcuOTA4MjkgMTEuODQ1NyA3LjkwODI5IDEyLjE2MjMgOC4xMDM1NSAxMi4zNTc2TDExLjY1MDUgMTUuOTA0NUMxMS44NDU3IDE2LjA5OTggMTIuMTYyMyAxNi4wOTk4IDEyLjM1NzYgMTUuOTA0NUwxNS45MDQ1IDEyLjM1NzZDMTYuMDk5OCAxMi4xNjIzIDE2LjA5OTggMTEuODQ1NyAxNS45MDQ1IDExLjY1MDVMMTIuMzU3NiA4LjEwMzU1WiIgZmlsbD0iI0ZGRkZGRkM5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4wMDI2IDEuNDU1NDVDMTEuNjIxNCAxLjA5ODE4IDEyLjM4MzggMS4wOTgxOCAxMy4wMDI2IDEuNDU1NDVMMjAuNjM4IDUuODYzNzRDMjEuMjU2OCA2LjIyMSAyMS42MzggNi44ODEyNiAyMS42MzggNy41OTU3OVYxNi40MTI0QzIxLjYzOCAxNy4xMjY5IDIxLjI1NjggMTcuNzg3MiAyMC42MzggMTguMTQ0NEwxMy4wMDI2IDIyLjU1MjdDMTIuMzgzOCAyMi45MSAxMS42MjE0IDIyLjkxIDExLjAwMjYgMjIuNTUyN0wzLjM2NzE5IDE4LjE0NDRDMi43NDgzOSAxNy43ODcyIDIuMzY3MTkgMTcuMTI2OSAyLjM2NzE5IDE2LjQxMjRWNy41OTU3OUMyLjM2NzE5IDYuODgxMjYgMi43NDgzOSA2LjIyMTAxIDMuMzY3MTkgNS44NjM3NEwxMS4wMDI2IDEuNDU1NDVaTTEyLjAwMjYgMy4xODc1TDE5LjYzOCA3LjU5NTc5VjE2LjQxMjRMMTIuMDAyNiAyMC44MjA3TDQuMzY3MTkgMTYuNDEyNEw0LjM2NzE5IDcuNTk1NzlMMTIuMDAyNiAzLjE4NzVaIiBmaWxsPSIjRkZGRkZGQzkiLz48L3N2Zz4=")',
+      backgroundSize: "11px 11px",
+      backgroundRepeat: "no-repeat",
+      width: "11px",
+      height: "11px"
+    },
+    ".cm-completionIcon-property::after": {
+      content: '""'
+    }
+  }),
+  createTheme({
+    variant: "dark",
+    settings: {
+      background: colors.background,
+      foreground: "#fff",
+      caret: "#AEAFAD",
+      selection: "#d9d9d942",
+      gutterBackground: colors.background,
+      gutterForeground: "#FFFFFF63",
+      gutterBorderColor: "transparent",
+      gutterBorderWidth: 0,
+      lineHighlight: "#272e3d36",
+      bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+      tooltip: {
+        backgroundColor: "#363D4D",
+        color: "#fff",
+        border: "none"
+      },
+      completionItemHover: {
+        backgroundColor: "#FFFFFF0F"
+      },
+      completionItemSelected: {
+        backgroundColor: "#FFFFFF17"
+      },
+      completionItemIcon: {
+        color: "#FFFFFFC9"
+      },
+      completionItemLabel: {
+        color: "#FFFFFFC9"
+      },
+      completionItemDetail: {
+        color: "#FFFFFF63"
+      }
+    },
+    styles: [
+      // json
+      {
+        tag: t.comment,
+        color: colors.comment
+      },
+      {
+        tag: [t.propertyName],
+        color: colors.key
+      },
+      {
+        tag: [t.string],
+        color: colors.string
+      },
+      {
+        tag: [t.number],
+        color: colors.number
+      },
+      {
+        tag: [t.bool],
+        color: colors.boolean
+      },
+      {
+        tag: [t.null],
+        color: colors.null
+      },
+      {
+        tag: [t.separator],
+        color: colors.separator
+      },
+      // shell
+      // curl
+      {
+        tag: [t.standard(t.variableName)],
+        color: "#3BEB84"
+      },
+      // -X
+      {
+        tag: [t.attributeName],
+        color: "#FF9933"
+      },
+      // url in string (includes quotes), e.g. "https://..."
+      {
+        tag: [t.special(t.string)],
+        color: "#78B0FF"
+      }
+    ]
+  })
+];
+export {
+  cozeDark
+};

package/dist/es/code-editor/themes/coze-light.js

@@ -0,0 +1,118 @@
+import { createTheme, tags as t } from "@coze-editor/editor/preset-code";
+import { EditorView } from "@codemirror/view";
+const colors = {
+  background: "#fff",
+  // syntax
+  comment: "#000A298A",
+  key: "#00818C",
+  string: "#D1009D",
+  number: "#C74200",
+  boolean: "#2B57D9",
+  null: "#2B57D9",
+  separator: "#0F1529D1"
+};
+const cozeLight = [
+  EditorView.theme({
+    ".cm-completionIcon-property": {
+      backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4zNTc2IDguMTAzNTVDMTIuMTYyMyA3LjkwODI5IDExLjg0NTcgNy45MDgyOSAxMS42NTA1IDguMTAzNTVMOC4xMDM1NSAxMS42NTA1QzcuOTA4MjkgMTEuODQ1NyA3LjkwODI5IDEyLjE2MjMgOC4xMDM1NSAxMi4zNTc2TDExLjY1MDUgMTUuOTA0NUMxMS44NDU3IDE2LjA5OTggMTIuMTYyMyAxNi4wOTk4IDEyLjM1NzYgMTUuOTA0NUwxNS45MDQ1IDEyLjM1NzZDMTYuMDk5OCAxMi4xNjIzIDE2LjA5OTggMTEuODQ1NyAxNS45MDQ1IDExLjY1MDVMMTIuMzU3NiA4LjEwMzU1WiIgZmlsbD0iIzA2MDcwOUNDIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4wMDI2IDEuNDU1NDVDMTEuNjIxNCAxLjA5ODE4IDEyLjM4MzggMS4wOTgxOCAxMy4wMDI2IDEuNDU1NDVMMjAuNjM4IDUuODYzNzRDMjEuMjU2OCA2LjIyMSAyMS42MzggNi44ODEyNiAyMS42MzggNy41OTU3OVYxNi40MTI0QzIxLjYzOCAxNy4xMjY5IDIxLjI1NjggMTcuNzg3MiAyMC42MzggMTguMTQ0NEwxMy4wMDI2IDIyLjU1MjdDMTIuMzgzOCAyMi45MSAxMS42MjE0IDIyLjkxIDExLjAwMjYgMjIuNTUyN0wzLjM2NzE5IDE4LjE0NDRDMi43NDgzOSAxNy43ODcyIDIuMzY3MTkgMTcuMTI2OSAyLjM2NzE5IDE2LjQxMjRWNy41OTU3OUMyLjM2NzE5IDYuODgxMjYgMi43NDgzOSA2LjIyMTAxIDMuMzY3MTkgNS44NjM3NEwxMS4wMDI2IDEuNDU1NDVaTTEyLjAwMjYgMy4xODc1TDE5LjYzOCA3LjU5NTc5VjE2LjQxMjRMMTIuMDAyNiAyMC44MjA3TDQuMzY3MTkgMTYuNDEyNEw0LjM2NzE5IDcuNTk1NzlMMTIuMDAyNiAzLjE4NzVaIiBmaWxsPSIjMDYwNzA5Q0MiLz48L3N2Zz4=")',
+      backgroundSize: "11px 11px",
+      backgroundRepeat: "no-repeat",
+      width: "11px",
+      height: "11px"
+    },
+    ".cm-completionIcon-property::after": {
+      content: '""'
+    }
+  }),
+  createTheme({
+    variant: "light",
+    settings: {
+      background: colors.background,
+      foreground: "#4D4D4C",
+      caret: "#AEAFAD",
+      selection: "#52649A21",
+      gutterBackground: colors.background,
+      gutterForeground: "#000A298A",
+      gutterBorderColor: "transparent",
+      gutterBorderWidth: 0,
+      lineHighlight: "#efefef78",
+      bracketColors: ["#E4D129", "#AC05FF", "#2B57D9"],
+      tooltip: {
+        backgroundColor: "var(--coz-bg-max)",
+        color: "var(--coz-fg-primary)",
+        border: "solid 1px var(--coz-stroke-plus)",
+        boxShadow: "var(--coz-shadow-default)",
+        borderRadius: "8px"
+      },
+      tooltipCompletion: {
+        backgroundColor: "#FFFFFF",
+        color: "#060709CC"
+      },
+      completionItemHover: {
+        backgroundColor: "#5768A114"
+      },
+      completionItemSelected: {
+        backgroundColor: "#52649A21"
+      },
+      completionItemIcon: {
+        color: "#060709CC"
+      },
+      completionItemLabel: {
+        color: "#060709CC"
+      },
+      completionItemDetail: {
+        color: "#2029459E"
+      }
+    },
+    styles: [
+      // JSON
+      {
+        tag: t.comment,
+        color: colors.comment
+      },
+      {
+        tag: [t.propertyName],
+        color: colors.key
+      },
+      {
+        tag: [t.string],
+        color: colors.string
+      },
+      {
+        tag: [t.number],
+        color: colors.number
+      },
+      {
+        tag: [t.bool],
+        color: colors.boolean
+      },
+      {
+        tag: [t.null],
+        color: colors.null
+      },
+      {
+        tag: [t.separator],
+        color: colors.separator
+      },
+      // shell
+      // curl
+      {
+        tag: [t.standard(t.variableName)],
+        color: "#00804A"
+      },
+      // -X
+      {
+        tag: [t.attributeName],
+        color: "#C74200"
+      },
+      // url in string (includes quotes), e.g. "https://..."
+      {
+        tag: [t.special(t.string)],
+        color: "#2B57D9"
+      }
+    ]
+  })
+];
+export {
+  cozeLight
+};

package/dist/es/consts/index.js

@@ -0,0 +1,12 @@
+const VARIABLE_MAX_LEN = 50;
+const modelConfigLabelMap = {
+  temperature: "生成随机性",
+  max_tokens: "最大回复长度",
+  top_p: "Top P"
+};
+const DEFAULT_MAX_TOKENS = 4096;
+export {
+  DEFAULT_MAX_TOKENS,
+  VARIABLE_MAX_LEN,
+  modelConfigLabelMap
+};

package/dist/es/dev-layout/index.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Typography } from "@coze-arch/coze-design";
+function DevLayout({
+  title,
+  actionBtns,
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("flex flex-col h-full w-full", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "h-[40px] px-6 py-2 box-border coz-fg-plus w-full border-0 border-t border-b border-solid flex justify-between items-center",
+            style: { background: "#F6F6FB" },
+            children: [
+              /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title }),
+              actionBtns
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+export {
+  DevLayout
+};

package/dist/es/index.js

@@ -0,0 +1,66 @@
+import {
+  PromptBasicEditor
+} from "./basic-editor";
+import { PromptEditor } from "./prompt-editor";
+import {
+  PromptDiffEditor
+} from "./basic-editor/diff";
+import {
+  BaseJsonEditor,
+  BaseRawTextEditor,
+  EditorProvider
+} from "./code-editor";
+import { SchemaEditor } from "./schema-editor";
+import { ModelSelect } from "./model-select";
+import { BasicModelConfigEditor } from "./model-config-editor/basic-type";
+import { PopoverModelConfigEdiotr } from "./model-config-editor/popover-type";
+import { DevLayout } from "./dev-layout";
+import { useEditor, useInjector, useLatest } from "@coze-editor/editor/react";
+import regexpDecorator, {
+  updateRegexpDecorations
+} from "@coze-editor/extension-regexp-decorator";
+import { Decoration, EditorView, WidgetType, keymap } from "@codemirror/view";
+import { EditorSelection } from "@codemirror/state";
+import {
+  Prec,
+  StateEffect,
+  StateField
+} from "@codemirror/state";
+import { cunstomFacet } from "./basic-editor/custom-facet";
+import {
+  insertFourSpaces,
+  deleteMarkupBackward,
+  insertNewlineContinueMarkup
+} from "./basic-editor/extensions/keymap";
+import { MermaidDiagram } from "./mermaid-diagram";
+export {
+  BaseJsonEditor,
+  BaseRawTextEditor,
+  BasicModelConfigEditor,
+  Decoration,
+  DevLayout,
+  EditorProvider,
+  EditorSelection,
+  EditorView,
+  MermaidDiagram,
+  ModelSelect,
+  PopoverModelConfigEdiotr,
+  Prec,
+  PromptBasicEditor,
+  PromptDiffEditor,
+  PromptEditor,
+  SchemaEditor,
+  StateEffect,
+  StateField,
+  WidgetType,
+  cunstomFacet,
+  deleteMarkupBackward,
+  insertFourSpaces,
+  insertNewlineContinueMarkup,
+  keymap,
+  regexpDecorator,
+  updateRegexpDecorations,
+  useEditor,
+  useInjector,
+  useLatest
+};

package/dist/es/mermaid-diagram/index.js

@@ -0,0 +1,148 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import mermaid from "mermaid";
+import { isEmpty, uniqueId } from "lodash-es";
+import cls from "classnames";
+import { exportImage } from "./utils";
+import { useSvgPanZoom } from "./use-svg-pan-zoom";
+import styles from "./index.module";
+const DEFAULT_THEME = {
+  theme: "base",
+  themeVariables: {
+    background: "#f9fafb",
+    fontSize: "12px",
+    primaryColor: "#E5F6FF",
+    primaryTextColor: "rgba(0,0,0,0.8)",
+    secondaryColor: "#F5EBFF",
+    primaryBorderColor: "#73A6FF",
+    secondaryBorderColor: "#BE8FED",
+    secondaryTextColor: "rgba(0,0,0,0.56)",
+    tertiaryColor: "#FFF6CC",
+    tertiaryBorderColor: "#FFBC52",
+    tertiaryTextColor: "rgba(0,0,0,0.3)",
+    noteBkgColor: "#F3F4F6",
+    noteTextColor: "rgba(0,0,0,0.55)",
+    noteBorderColor: "#A8A8A8",
+    lineColor: "rgba(0,0,0,0.3)",
+    textColor: "rgba(0,0,0,0.8)",
+    errorBkgColor: "#FFEBEA",
+    errorTextColor: "#FF3B30"
+  }
+};
+const MermaidDiagram = /* @__PURE__ */ forwardRef(function MermaidDiagram2({ chart, className }, outerRef) {
+  const ref = useRef(null);
+  const id = useRef(`mermaid-diagram-${uniqueId()}`);
+  const svgId = `svg-${id.current}`;
+  const [preChart, setPreChart] = useState("");
+  const updateChart = (chartStr) => __async(this, null, function* () {
+    var _a;
+    if (isEmpty(chartStr)) {
+      return;
+    }
+    try {
+      const isValidChart = yield mermaid.parse(chartStr, {
+        suppressErrors: true
+      });
+      if (!isValidChart) {
+        return;
+      }
+      const renderResult = yield mermaid.render(
+        svgId,
+        chartStr,
+        ref.current || void 0
+      );
+      if (ref.current && renderResult.svg) {
+        ref.current.innerHTML = renderResult.svg;
+        (_a = renderResult.bindFunctions) == null ? void 0 : _a.call(renderResult, ref.current);
+        setPreChart(chartStr);
+      }
+    } catch (e) {
+      if (chartStr !== preChart) {
+        updateChart(preChart);
+      }
+    }
+  });
+  useEffect(() => {
+    mermaid.initialize(__spreadProps(__spreadValues({}, DEFAULT_THEME), {
+      startOnLoad: false,
+      logLevel: "error",
+      suppressErrorRendering: true
+    }));
+  }, []);
+  useEffect(() => {
+    updateChart(chart);
+  }, [chart]);
+  const { zoomIn, zoomOut, fit } = useSvgPanZoom({
+    svgSelector: `#${svgId}`,
+    viewportSelector: id.current,
+    renderedChart: preChart
+  });
+  useImperativeHandle(outerRef, () => ({
+    zoomIn,
+    zoomOut,
+    fit,
+    exportImg: () => __async(this, null, function* () {
+      return exportImage(`#${svgId}`);
+    })
+  }));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: id.current,
+      className: cls(
+        "w-full min-w-[330px] h-[300px]",
+        styles.container,
+        className
+      ),
+      ref
+    }
+  );
+});
+export {
+  MermaidDiagram
+};

package/dist/es/mermaid-diagram/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "container": "container_920ec" };
+export {
+  index_module_default as default
+};

package/dist/es/mermaid-diagram/index_module.css

@@ -0,0 +1,4 @@
+.container_920ec > svg {
+  max-width: 100% !important;
+  height: 100%;
+}

package/dist/es/mermaid-diagram/use-svg-pan-zoom.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from "react";
+const useSvgPanZoom = ({
+  svgSelector,
+  viewportSelector,
+  renderedChart,
+  zoomStepLength = 0.25
+}) => {
+  const panZoomTigerRef = useRef(null);
+  useEffect(() => {
+    if (!renderedChart) {
+      return;
+    }
+    import("svg-pan-zoom").then((svgPanZoom) => {
+      if (panZoomTigerRef.current) {
+        return;
+      }
+      const panZoomTiger = svgPanZoom.default(svgSelector, {
+        viewportSelector,
+        mouseWheelZoomEnabled: false
+      });
+      panZoomTigerRef.current = panZoomTiger;
+    });
+  }, [renderedChart]);
+  const zoomIn = () => {
+    var _a, _b;
+    (_b = panZoomTigerRef.current) == null ? void 0 : _b.zoom(
+      ((_a = panZoomTigerRef.current) == null ? void 0 : _a.getZoom()) + zoomStepLength
+    );
+  };
+  const zoomOut = () => {
+    var _a, _b;
+    (_b = panZoomTigerRef.current) == null ? void 0 : _b.zoom(
+      ((_a = panZoomTigerRef.current) == null ? void 0 : _a.getZoom()) - zoomStepLength
+    );
+  };
+  const fit = () => {
+    var _a, _b;
+    (_a = panZoomTigerRef.current) == null ? void 0 : _a.fit();
+    (_b = panZoomTigerRef.current) == null ? void 0 : _b.center();
+  };
+  return {
+    zoomIn,
+    zoomOut,
+    fit
+  };
+};
+export {
+  useSvgPanZoom
+};

package/dist/es/mermaid-diagram/utils.js

@@ -0,0 +1,74 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { toBase64 } from "js-base64";
+const getFileName = (extension) => `mermaid-diagram-${(/* @__PURE__ */ new Date()).getTime()}.${extension}`;
+const simulateDownload = (download, href) => {
+  const a = document.createElement("a");
+  a.download = download;
+  a.href = href;
+  a.click();
+  a.remove();
+};
+const downloadImage = (context, image) => () => {
+  const { canvas } = context;
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  simulateDownload(
+    getFileName("png"),
+    canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
+  );
+};
+const getBase64SVG = (svg, width, height) => {
+  if (svg) {
+    svg = svg.cloneNode(true);
+  }
+  height && (svg == null ? void 0 : svg.setAttribute("height", `${height}px`));
+  width && (svg == null ? void 0 : svg.setAttribute("width", `${width}px`));
+  const svgString = svg.outerHTML.replaceAll("<br>", "<br/>").replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
+  return toBase64(`<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" type="text/css"?>
+${svgString}`);
+};
+const exportImage = (svgSelector) => __async(void 0, null, function* () {
+  yield new Promise((resolve) => setTimeout(resolve, 1e3));
+  const canvas = document.createElement("canvas");
+  const svg = document.querySelector(svgSelector);
+  if (!svg) {
+    return;
+  }
+  const box = svg.getBoundingClientRect();
+  const multiplier = 2;
+  canvas.width = box.width * multiplier;
+  canvas.height = box.height * multiplier;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("context not found");
+  }
+  context.fillStyle = "white";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  const image = new Image();
+  image.addEventListener("load", () => {
+    downloadImage(context, image)();
+  });
+  image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`;
+});
+export {
+  exportImage
+};