vzcode 2.0.0 → 2.3.0

package/src/client/CodeEditor/rainbowBrackets.ts

@@ -1,122 +0,0 @@
-import {
-  EditorView,
-  Decoration,
-  ViewPlugin,
-} from '@codemirror/view';
-
-function generateColors() {
-  return ['red', 'orange', 'yellow', 'green'];
-}
-
-let isRainbowEnabled = true;
-
-export const toggleRainbowBrackets = (enabled: boolean) => {
-  isRainbowEnabled = enabled;
-};
-
-const rainbowBracketsPlugin = ViewPlugin.fromClass(
-  class {
-    decorations;
-
-    constructor(view) {
-      this.decorations = this.getBracketDecorations(view);
-    }
-
-    update(update) {
-      if (
-        update.docChanged ||
-        update.selectionSet ||
-        update.viewportChanged
-      ) {
-        this.decorations = this.getBracketDecorations(
-          update.view,
-        );
-      }
-    }
-
-    getBracketDecorations(view) {
-      const { doc } = view.state;
-      const decorations = [];
-      const stack = [];
-      const colors = generateColors();
-
-      for (let pos = 0; pos < doc.length; pos += 1) {
-        const char = doc.sliceString(pos, pos + 1);
-        if (char === '(' || char === '[' || char === '{') {
-          stack.push({ type: char, from: pos });
-        } else if (
-          char === ')' ||
-          char === ']' ||
-          char === '}'
-        ) {
-          const open = stack.pop();
-          if (
-            open &&
-            open.type === this.getMatchingBracket(char)
-          ) {
-            const color =
-              colors[stack.length % colors.length];
-            const bracketClass = isRainbowEnabled
-              ? `rainbow-bracket-${color}`
-              : `default-bracket`;
-
-            decorations.push(
-              Decoration.mark({
-                class: bracketClass,
-              }).range(open.from, open.from + 1),
-              Decoration.mark({
-                class: bracketClass,
-              }).range(pos, pos + 1),
-            );
-          }
-        }
-      }
-
-      decorations.sort(
-        (a, b) =>
-          a.from - b.from || a.startSide - b.startSide,
-      );
-
-      return Decoration.set(decorations);
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    getMatchingBracket(closingBracket) {
-      switch (closingBracket) {
-        case ')':
-          return '(';
-        case ']':
-          return '[';
-        case '}':
-          return '{';
-        default:
-          return null;
-      }
-    }
-  },
-  {
-    decorations: (v) => v.decorations,
-  },
-);
-
-export default function rainbowBrackets() {
-  return [
-    rainbowBracketsPlugin,
-    EditorView.baseTheme({
-      '.rainbow-bracket-red': { color: 'white' },
-      '.rainbow-bracket-red > span': { color: 'white' },
-      '.rainbow-bracket-orange': { color: '#FFFFB2' },
-      '.rainbow-bracket-orange > span': {
-        color: '#FFFFB2',
-      },
-      '.rainbow-bracket-yellow': { color: '#FFB2DA' },
-      '.rainbow-bracket-yellow > span': {
-        color: '#FFB2DA',
-      },
-      '.rainbow-bracket-green': { color: '#B2FFB2' },
-      '.rainbow-bracket-green > span': { color: '#B2FFB2' },
-      '.default-bracket': { color: 'currentColor' },
-      '.default-bracket > span': { color: 'currentColor' },
-    }),
-  ];
-}

package/src/client/CodeEditor/style.scss

@@ -1,156 +0,0 @@
-.vz-code-editor {
-  flex: 1;
-  display: flex;
-  font-family: var(--vzcode-font-family);
-  overflow-x: auto;
-
-  .cm-editor {
-    flex: 1;
-    width: 100%;
-  }
-
-  .cm-scroller {
-    font-family: var(--vzcode-font-family);
-    font-size: var(--vzcode-font-size);
-  }
-
-  .remote-cursor-username {
-    transition: opacity 1s ease-in-out;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-  }
-
-  .cm-tooltip-lint {
-    max-width: 500px;
-  }
-
-  /* Style the completion tooltip container */
-  .cm-tooltip.cm-tooltip-autocomplete {
-    border: 1px solid #888;
-    background-color: #1f2022;
-  }
-
-  /* Style the individual completion items */
-  .cm-tooltip-autocomplete .cm-completionLabel {
-    color: #bdc7dc;
-  }
-
-  /* Style the selected completion item */
-  .cm-tooltip-autocomplete
-    .cm-completionLabel
-    .cm-completion-active {
-    background-color: #0077cc;
-    color: white;
-  }
-
-  .cm-line {
-    font-family: var(--vzcode-font-family);
-  }
-
-  .tooltip_hover_circle {
-    color: white;
-    text-align: center;
-    position: fixed;
-    background-color: black;
-    padding: 5px;
-    border-radius: 5px;
-    white-space: nowrap;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    z-index: 1000;
-    pointer-events: none;
-  }
-
-  .tooltip_hover_circle strong {
-    font-size: 14px;
-  }
-
-  .tooltip_hover_circle div {
-    font-size: 12px;
-  }
-
-  .cm-panel.cm-search {
-    padding: 5px;
-    position: relative;
-    background-color: var(--vh-color-neutral-01);
-    border-radius: 6px;
-    color: var(--vh-color-neutral-04);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-  }
-
-  .cm-panels {
-    background-color: #333338;
-    color: var(--vh-color-neutral-04);
-    border: 2px solid var(--vh-color-neutral-02);
-    border-radius: 6px;
-  }
-
-  .cm-textfield {
-    background-color: var(--vh-color-neutral-01);
-    color: #efe7dc;
-    border: 1px solid var(--vh-color-neutral-04);
-    padding: 8px;
-    border-radius: 6px;
-    font-size: 14px;
-  }
-
-  .cm-button {
-    background-color: var(--vh-color-neutral-01);
-    border: 1px solid #193350;
-    color: var(--vh-color-neutral-04);
-    border: 1px solid var(--vh-color-neutral-04);
-    border-radius: 5px;
-    padding: 6px 12px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
-  }
-
-  .cm-button:hover {
-    background-color: #50c878;
-    color: #ffffff;
-    transform: scale(1.1);
-  }
-
-  .cm-button:active {
-    background-color: #202e46;
-    transform: scale(0.95);
-  }
-
-  .cm-searchMatch {
-    background-color: rgba(255, 255, 0, 0.5);
-    border-radius: 2px;
-  }
-
-  .cm-searchMatch-selected {
-    background-color: rgba(255, 140, 0, 0.5);
-    border: 2px solid #ff8800;
-    border-radius: 2px;
-  }
-  .cm-panel.cm-search [name='close'] {
-    position: absolute;
-    top: 0;
-    right: 4px;
-    background-color: var(--vh-color-neutral-01);
-    color: var(--vh-color-neutral-04);
-    border: none;
-    font: inherit;
-    padding: 4px 8px;
-    margin: 4px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
-  }
-
-  .cm-panel.cm-search [name='close']:hover {
-    background-color: var(--vh-color-caution-01);
-    color: #ffffff;
-  }
-
-  .cm-panel.cm-search [name='close']:active {
-    background-color: var(--vh-color-caution-02);
-    transform: scale(0.95);
-  }
-}

package/src/client/CodeEditor/typescriptExtension/worker.ts

@@ -1,32 +0,0 @@
-import {
-  createDefaultMapFromCDN,
-  createSystem,
-  createVirtualTypeScriptEnvironment,
-} from '@typescript/vfs';
-import ts from 'typescript';
-import * as Comlink from 'comlink';
-
-// When importing this module, typescript says that it "cannot find the module or its corresponding type declarations"
-// However, when this file is used as a web worker, no error occurs.
-// As a result, this error is suppressed to avoid future confusion.
-// @ts-expect-error
-import { createWorker } from '@valtown/codemirror-ts/worker';
-
-Comlink.expose(
-  createWorker(async function () {
-    const fsMap = await createDefaultMapFromCDN(
-      { target: ts.ScriptTarget.ES2022 },
-      '3.7.3',
-      false,
-      ts,
-    );
-    const system = createSystem(fsMap);
-    const compilerOpts = {};
-    return createVirtualTypeScriptEnvironment(
-      system,
-      [],
-      ts,
-      compilerOpts,
-    );
-  }),
-);

package/src/client/CodeErrorOverlay/index.tsx

@@ -1,77 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import { VizContent } from '@vizhub/viz-types';
-import { CloseSVG } from '../Icons';
-import './style.scss';
-
-const enableErrorDismiss = true;
-
-export const CodeErrorOverlay = ({
-  errorMessage,
-  content,
-}: {
-  errorMessage: string | null;
-  content: VizContent;
-}) => {
-  // console.log(
-  //   'errorMessage in CodeErrorOverlay: ',
-  //   errorMessage,
-  // );
-  const [isOverlayVisible, setIsOverlayVisible] =
-    useState(true);
-
-  // If errorMessage changes, set the overlay to be visible
-  useEffect(() => {
-    if (errorMessage !== null) {
-      setIsOverlayVisible(true);
-    }
-  }, [errorMessage]);
-
-  // If the content changes, set the overlay to be not visible.
-  // Removed because it was interfering in the case of
-  // server-side build errors on page load.
-  // useEffect(() => {
-  //   setIsOverlayVisible(false);
-  // }, [content]);
-
-  // Set the visibility state to false when the button is clicked
-  const handleCloseClick = useCallback(() => {
-    setIsOverlayVisible(false);
-  }, []);
-
-  // If the user presses the escape key, close the overlay.
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        handleCloseClick();
-      }
-    };
-    document.addEventListener(
-      'keydown',
-      handleKeyDown,
-      true,
-    );
-
-    // Remove the event listener when the component unmounts
-    return () => {
-      document.removeEventListener(
-        'keydown',
-        handleKeyDown,
-        true,
-      );
-    };
-  }, [handleCloseClick]);
-
-  return isOverlayVisible && errorMessage !== null ? (
-    <div className="vz-code-error-overlay">
-      <pre>{errorMessage}</pre>
-      {enableErrorDismiss ? (
-        <i
-          className="icon-button icon-button-dark error-dismiss-button"
-          onClick={handleCloseClick}
-        >
-          <CloseSVG />
-        </i>
-      ) : null}
-    </div>
-  ) : null;
-};

package/src/client/CodeErrorOverlay/style.scss

@@ -1,33 +0,0 @@
-.vz-code-error-overlay {
-  color: var(--vh-color-neutral-04);
-  background: var(--vh-color-neutral-01);
-  opacity: 0.9;
-  border-left: 4px solid var(--vh-color-warning-01);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0 12px;
-  /* Right padding is so that the wrapped text
-     doesn't overlap with the .error-dismiss-button */
-  padding: 14px 38px 14px 16px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-
-  /* Style the monospace font */
-  pre {
-    font-family: var(--vzcode-font-family);
-    font-size: var(--vzcode-font-size);
-    margin: 0;
-
-    /* Wrap long lines */
-    white-space: pre-wrap;
-  }
-
-  /* Customize the dismiss button style */
-  .error-dismiss-button {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-}

package/src/client/Fonts/fonts.ts

@@ -1,8 +0,0 @@
-export const fonts = [
-  'Roboto Mono',
-  'Inconsolata',
-  'Source Code Pro',
-  'Ubuntu Mono',
-  'JetBrains Mono',
-  'Fira Code',
-];

package/src/client/Icons/AdjustmentSVG.tsx

@@ -1,19 +0,0 @@
-//From Hero Icons
-export const AdjustmentSVG = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className="size-6"
-    width={32}
-    height={32}
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
-    />
-  </svg>
-);

package/src/client/Icons/BugSVG.tsx

@@ -1,20 +0,0 @@
-// From Heroicons
-export const BugSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082"
-      />
-    </svg>
-  );
-};

package/src/client/Icons/CloseSVG.tsx

@@ -1,19 +0,0 @@
-export const CloseSVG = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M6 18L18 6M6 6L18 18"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};

package/src/client/Icons/CssSVG.tsx

@@ -1,16 +0,0 @@
-// https://reactsvgicons.com/
-export const CssSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="none"
-    >
-      <path d="M4.192 3.143h15.615l-1.42 16.034-6.404 1.812-6.369-1.813L4.192 3.143zM16.9 6.424l-9.8-.002.158 1.949 7.529.002-.189 2.02H9.66l.179 1.913h4.597l-.272 2.62-2.164.598-2.197-.603-.141-1.569h-1.94l.216 2.867L12 17.484l3.995-1.137.905-9.923z" />
-    </svg>
-  );
-};

package/src/client/Icons/DirectoryArrowSVG.tsx

@@ -1,19 +0,0 @@
-export const DirectoryArrowSVG = ({
-  height = 16,
-  fill = 'currentcolor',
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={height}
-    viewBox={'4 4 16 16'}
-  >
-    <path
-      stroke={fill}
-      fill="none"
-      d="M8 17l9-5-9-5v10z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);

package/src/client/Icons/EditSVG.tsx

@@ -1,19 +0,0 @@
-export const EditSVG = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-      />
-    </svg>
-  );
-};

package/src/client/Icons/FileSVG.tsx

@@ -1,19 +0,0 @@
-export const FileSVG = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
-      />
-    </svg>
-  );
-};

package/src/client/Icons/FolderSVG.tsx

@@ -1,20 +0,0 @@
-// From Heroicons
-export const FolderSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
-      />
-    </svg>
-  );
-};

package/src/client/Icons/GearSVG.tsx

@@ -1,16 +0,0 @@
-export const GearSVG = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="1.5"
-  >
-    <path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z" />
-    <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-  </svg>
-);

package/src/client/Icons/HtmlSVG.tsx

@@ -1,16 +0,0 @@
-// https://reactsvgicons.com/
-export const HtmlSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="none"
-    >
-      <path d="M4.136 3.012h15.729l-1.431 16.15-6.451 1.826-6.414-1.826-1.433-16.15zm5.266 7.302l-.173-2.035 7.533.002.173-1.963-9.87-.002.522 5.998h6.835l-.243 2.566-2.179.602-2.214-.605-.141-1.58H7.691l.247 3.123L12 17.506l4.028-1.08.558-6.111H9.402v-.001z" />
-    </svg>
-  );
-};

package/src/client/Icons/JavaScriptSVG.tsx

@@ -1,16 +0,0 @@
-// https://reactsvgicons.com/
-export const JavaScriptSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="none"
-    >
-      <path d="M3 3h18v18H3V3zm16.525 13.707c-.131-.821-.666-1.511-2.252-2.155-.552-.259-1.165-.438-1.349-.854-.068-.248-.078-.382-.034-.529.113-.484.687-.629 1.137-.495.293.09.563.315.732.676.775-.507.775-.507 1.316-.844-.203-.314-.304-.451-.439-.586-.473-.528-1.103-.798-2.126-.775l-.528.067c-.507.124-.991.395-1.283.754-.855.968-.608 2.655.427 3.354 1.023.765 2.521.933 2.712 1.653.18.878-.652 1.159-1.475 1.058-.607-.136-.945-.439-1.316-1.002l-1.372.788c.157.359.337.517.607.832 1.305 1.316 4.568 1.249 5.153-.754.021-.067.18-.528.056-1.237l.034.049zm-6.737-5.434h-1.686c0 1.453-.007 2.898-.007 4.354 0 .924.047 1.772-.104 2.033-.247.517-.886.451-1.175.359-.297-.146-.448-.349-.623-.641-.047-.078-.082-.146-.095-.146l-1.368.844c.229.473.563.879.994 1.137.641.383 1.502.507 2.404.305.588-.17 1.095-.519 1.358-1.059.384-.697.302-1.553.299-2.509.008-1.541 0-3.083 0-4.635l.003-.042z" />
-    </svg>
-  );
-};

package/src/client/Icons/JsonSVG.tsx

@@ -1,16 +0,0 @@
-// https://reactsvgicons.com/
-export const JsonSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="none"
-    >
-      <path d="M5 3h2v2H5v5a2 2 0 01-2 2 2 2 0 012 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 00-2-2H0v-2h1a2 2 0 002-2V5a2 2 0 012-2m14 0a2 2 0 012 2v4a2 2 0 002 2h1v2h-1a2 2 0 00-2 2v4a2 2 0 01-2 2h-2v-2h2v-5a2 2 0 012-2 2 2 0 01-2-2V5h-2V3h2m-7 12a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1m-4 0a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1m8 0a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1z" />
-    </svg>
-  );
-};

package/src/client/Icons/MarkdownSVG.tsx

@@ -1,16 +0,0 @@
-// https://reactsvgicons.com/
-export const MarkdownSVG = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="none"
-    >
-      <path d="M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35 1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35-1.92-2.35H4.89v6.38h1.92M19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28L19.69 12z" />
-    </svg>
-  );
-};