feat: add iwre transformer

feat: add curle transform
chore: update deps and apply lint
2025-03-31 19:14:51 +09:00 · 2025-03-19 15:19:57 +09:00 · 2025-03-19 15:10:18 +09:00 · 2025-02-01 10:06:13 +09:00 · 2025-01-16 15:22:52 +09:00 · 2025-01-16 14:33:41 +09:00
49 changed files with 4119 additions and 8893 deletions
--- a/.gitea/workflows/deploy_site.yml
+++ b/.gitea/workflows/deploy_site.yml
@ -5,15 +5,13 @@ on:
 jobs:
  deploy_site:
    runs-on: ubuntu-latest
+    container: 
+      image: src.pmh.codes/build-tools/react2minio:latest
    steps:
      - uses: actions/checkout@v4
-      - run: |
-          curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
-          apt-get install -y nodejs
-      - run: npm i -g n && n lts
-      - run: npm i
-      - run: wget https://dl.min.io/client/mc/release/linux-arm64/mc -O /tmp/mc
-      - run: chmod +x /tmp/mc
-      - run: /tmp/mc alias set minio http://minio-service.minio.svc.cluster.local:9000 ${{ secrets.MINIO_ACCESS_KEY }} ${{ secrets.MINIO_SECRET_KEY }}
-      - run: /tmp/mc mirror $PWD/ minio/ptools --exclude '.git/*' --exclude '.gitea/*' --overwrite
+      - run: mc alias set minio http://minio-service.minio.svc.cluster.local:9000 ${{ secrets.MINIO_ACCESS_KEY }} ${{ secrets.MINIO_SECRET_KEY }}
+      - run: echo "export const VERSION = '$(git rev-parse --short HEAD)'" > src/version.ts
+      - run: pnpm i
+      - run: pnpm build
+      - run: mc mirror $PWD/dist/ minio/ptools --overwrite

--- a/.gitignore
+++ b/.gitignore
@ -1 +1,24 @@
-node_modules/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "none"
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +0,0 @@
-{
-  "livePreview.defaultPreviewPath": "/index.html"
-}
--- a/README.md
+++ b/README.md
@ -0,0 +1,17 @@
+# PTools
+A collection of tools for string conversions
+
+## Demo
+* https://ptools.pmh.codes
+
+## Transforms
+* Regular Expression Parser (for parsing logs)
+* Datetime Parser
+* Base64 Encoder/Decoder
+* URI Encoding Encoder/Decoder
+* JSON Beautifier/Simplifier
+* String Escaper/Unescaper
+* JSON2YAML / YAML2JSON
+* GZIP Zipped Base64 Unzipper
+* Python Dictionary to JSON
+* JSON to Python Dictionary
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,32 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true }
+      ]
+    }
+  },
+  eslintConfigPrettier,
+  eslintPluginPrettierRecommended
+)
--- a/index.html
+++ b/index.html
@ -1,144 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/node_modules/@fontsource-variable/jetbrains-mono/index.css">
-    <link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">
-    <title>THE PTOOLS - Better than your MOM</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/webp" href="/favicon.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The PTOOLS</title>
  </head>
  <body>
-    <div id="container">
-      <div id="main"></div>
-      <div id="q">
-        <div id="r"><p><button onclick="btn('base64d')"><<<</button> base64d</p><textarea id="base64d"></textarea></div>
-        <div id="r"><p><button onclick="btn('base64e')"><<<</button> base64e</p><textarea id="base64e"></textarea></div>
-        <div id="r"><p><button onclick="btn('urid')"><<<</button> urid (cmp: <input id="uridcmp" style="width: 20px;" type="checkbox">)</p><textarea id="urid"></textarea></div>
-        <div id="r"><p><button onclick="btn('urie')"><<<</button> urie (cmp: <input id="uriecmp" style="width: 20px;" type="checkbox">)</p><textarea id="urie"></textarea></div>
-        <div id="r"><p><button onclick="btn('jsonbtf')"><<<</button> jsonbtf (sp: <input id="jsonbtfsp" style="width: 20px;" value="4">)</p><textarea id="jsonbtf"></textarea></div>
-        <div id="r"><p><button onclick="btn('jsonsmp')"><<<</button> jsonsmp</p><textarea id="jsonsmp"></textarea></div>
-      </div>
-    </div>
-
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
    <style>
-      * {
-        margin: 0;
-        padding: 0;
-      }
-
-      html, body, #container {
-        width: 100%;
-        height: 100%
-      }
-      
-      #container {
-        display: flex;
-        color: #fafafa;
+      :root {
        background-color: #212121;
-        font-family: 'JetBrains Mono Variable', monospace;
-      }
-
-      #container > * {
-        flex: 1;
-      }
-
-      #q {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 10px;
-        padding: 10px;
-        max-height: 100%;
-        overflow-x: scroll;
-      }
-
-      #q > * {
-        flex: 1;
-      }
-
-      #r {
-        display: flex;
-        min-height: 200px;
-        flex-direction: column;
-        background-color: #1e1e1e;
-        border-radius: 4px;
-        padding: 10px;
-      }
-
-      #r > textarea {
-        flex: 1;
-        border: none;
-        resize: none;
-        background-color: transparent;
-        color: #fafafa;
-        padding: 10px;
-      }
-
-      #r > textarea:focus {
-        outline: none;
-      }
-
-      #r > p {
-        padding: 10px;
-        background-color: #323232;
-        border-radius: 4px;
-      }
-
-      #r button {
-        border: none;
-        padding: 6px 10px;
-        border-radius: 4px;
-        cursor: pointer;
-        background-color: #1683ff;
-        color: white;
-        margin-right: 6px;
-      }
-
-      #r button:hover {
-        background-color: #1c74da;
      }
    </style>
-
-		<script src="/node_modules/monaco-editor/min/vs/loader.js"></script>
-		<script>
-			require.config({ paths: { vs: '/node_modules/monaco-editor/min/vs' } });
-
-			require(['vs/editor/editor.main'], function () {
-				var editor = monaco.editor.create(document.getElementById('main'), {
-					value: '',
-					language: 'json',
-          automaticLayout: true,
-          minimap: { enabled: false },
-          fontSize: 16,
-          theme: "vs-dark",
-          scrollBeyondLastLine: false,
-          fontFamily: 'JetBrains Mono Variable',
-          fontLigatures: true,
-          wordWrap: true
-				});
-
-        function render () {
-          const value = editor.getValue()
-          try { document.getElementById('base64d').value = atob(value) } catch { document.getElementById('base64d').value ='(err)' }
-          try { document.getElementById('base64e').value = btoa(value) } catch { document.getElementById('base64e').value ='(err)' }
-          try { document.getElementById('urid').value = document.getElementById('uridcmp').checked ? decodeURIComponent(value) : decodeURI(value) } catch { document.getElementById('urid').value = '(err)' }
-          try { document.getElementById('urie').value = document.getElementById('uriecmp').checked ? encodeURIComponent(value) : encodeURI(value) } catch { document.getElementById('urie').value = '(err)' }
-          try { document.getElementById('jsonbtf').value = JSON.stringify(JSON.parse(value), null, parseInt(document.getElementById('jsonbtfsp').value)) } catch { document.getElementById('jsonbtf').value ='(err)' }
-          try { document.getElementById('jsonsmp').value = JSON.stringify(JSON.parse(value)) } catch { document.getElementById('jsonsmp').value ='(err)' }
-        }
-
-        window.btn = (id) =>
-          editor.setValue(document.getElementById(id).value)
-
-        try {
-          document.getElementById('uridcmp').onchange = () => render()
-          document.getElementById('uriecmp').onchange = () => render()
-          document.getElementById('jsonbtfsp').oninput = () => render()
-        } catch{}
-
-        editor.getModel().onDidChangeContent((event) => {
-          render()
-        });
-			});
-		</script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,48 @@
 {
+  "name": "ptools",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
  "dependencies": {
-    "@fontsource-variable/jetbrains-mono": "^5.1.1",
-    "monaco-editor": "^0.52.0",
-    "normalize.css": "^8.0.1"
+    "@fontsource-variable/jetbrains-mono": "^5.2.5",
+    "@monaco-editor/react": "^4.7.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.18.2",
+    "json5": "^2.2.3",
+    "moment": "^2.30.1",
+    "normalize.css": "^8.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-tooltip": "^5.28.0",
+    "recoil": "^0.7.7",
+    "strtime": "^1.1.2",
+    "styled-components": "^6.1.16",
+    "yaml": "^2.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "monaco-editor": "^0.52.2",
+    "sass-embedded": "^1.86.0",
+    "sharp": "^0.33.5",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^5.4.14",
+    "vite-plugin-image-optimizer": "^1.1.8"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.webp
+++ b/public/favicon.webp
--- a/public/suika.webp
+++ b/public/suika.webp
--- a/src/App/AppLayout/index.tsx
+++ b/src/App/AppLayout/index.tsx
@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react'
+
+import style from './style.module.scss'
+
+interface AppLayoutProp {
+  children?: ReactNode
+}
+
+export const AppLayout: FC<AppLayoutProp> = ({ children }) => (
+  <div className={style.container}>{children}</div>
+)
--- a/src/App/AppLayout/style.module.scss
+++ b/src/App/AppLayout/style.module.scss
@ -0,0 +1,16 @@
+.container {
+  display: flex;
+
+  width: 100vw;
+  height: 100dvh;
+
+  > * {
+    flex: 1;
+  }
+
+  @media (max-width: 1200px) {
+    & {
+      flex-direction: column;
+    }
+  }
+}
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@ -0,0 +1,11 @@
+import { FC } from 'react'
+import { AppLayout } from './AppLayout'
+import { Editor } from '../Editor'
+import { TransformGrid } from '../TransformGrid'
+
+export const App: FC = () => (
+  <AppLayout>
+    <Editor />
+    <TransformGrid />
+  </AppLayout>
+)
--- a/src/Assets/favicon.webp
+++ b/src/Assets/favicon.webp
--- a/src/Components/Button.tsx
+++ b/src/Components/Button.tsx
@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const Button = styled.button`
+  border: none;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: #ff1696;
+  color: white;
+
+  transition: background-color 0.25s ease-out;
+
+  &:hover {
+    background-color: #da1c9b;
+  }
+
+  &:disabled {
+    background-color: gray;
+    cursor: inherit;
+  }
+`
--- a/src/Components/Input.tsx
+++ b/src/Components/Input.tsx
@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const Input = styled.input`
+  background-color: transparent;
+  color: #fafafa;
+  border: none;
+  border-bottom: 1px solid #fafafa;
+  text-align: center;
+  accent-color: #ff1696;
+  box-sizing: border-box;
+  font-size: 12px;
+
+  width: 24px;
+
+  &[type='checkbox'] {
+    width: auto;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
--- a/src/Components/TextArea.tsx
+++ b/src/Components/TextArea.tsx
@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const TextArea = styled.textarea`
+  border: none;
+  resize: none;
+  background-color: transparent;
+  color: #fafafa;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+  }
+`
--- a/src/Editor/index.tsx
+++ b/src/Editor/index.tsx
@ -0,0 +1,74 @@
+import { createRef, FC, useEffect, useRef } from 'react'
+import { Editor as MonacoEditor } from '@monaco-editor/react'
+import { useRecoilState } from 'recoil'
+import { EditorValueState } from '../GlobalStates/EditorValueState'
+import { motion } from 'framer-motion'
+import { VERSION } from '../version'
+import { editor } from 'monaco-editor'
+
+import style from './style.module.scss'
+
+export const Editor: FC = () => {
+  const [value, setValue] = useRecoilState(EditorValueState)
+  const ref = useRef<editor.IStandaloneCodeEditor>()
+  const containerRef = createRef<HTMLDivElement>()
+
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      ref.current?.layout({ width: 0, height: 0 })
+
+      window.requestAnimationFrame(() => {
+        const rect = containerRef.current?.getBoundingClientRect()
+        ref.current?.layout({
+          width: rect?.width ?? 0,
+          height: rect?.height ?? 0
+        })
+      })
+    })
+  }, [containerRef])
+
+  return (
+    <motion.div
+      className={style.container}
+      ref={containerRef}
+      transition={{ delay: 1.5 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    >
+      <MonacoEditor
+        loading={<></>}
+        value={value}
+        language="yaml"
+        onMount={(v) => (ref.current = v)}
+        onChange={(v) => setValue(v ?? '')}
+        options={{
+          automaticLayout: true,
+          lineNumbersMinChars: 3,
+          minimap: { enabled: false },
+          theme: 'vs-dark',
+          fontSize: 24,
+          fontFamily: 'JetBrains Mono Variable',
+          fontLigatures: true,
+          wordWrap: 'on',
+          mouseWheelZoom: true,
+          smoothScrolling: true,
+          cursorSmoothCaretAnimation: 'on',
+          cursorBlinking: 'smooth',
+          cursorStyle: 'line'
+        }}
+        theme="vs-dark"
+      />
+
+      <div className={style.credit}>
+        <div className={style.creditstr}>
+          <p>
+            <b>The PTOOLS</b>
+          </p>
+          <p>v2-{VERSION}</p>
+          <p>&copy; Minhyeok Park</p>
+        </div>
+        <img className={style.suika} src="/suika.webp" />
+      </div>
+    </motion.div>
+  )
+}
--- a/src/Editor/style.module.scss
+++ b/src/Editor/style.module.scss
@ -0,0 +1,26 @@
+.container {
+  position: relative;
+
+  .credit {
+    padding: 1px 0px;
+    position: absolute;
+    z-index: 99999;
+    bottom: 0;
+    right: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-end;
+    text-align: right;
+    opacity: 0.25;
+    pointer-events: none;
+
+    b {
+      font-weight: 900;
+    }
+
+    .suika {
+      width: 140px;
+    }
+  }
+}
+
--- a/src/GlobalStates/EditorValueState.ts
+++ b/src/GlobalStates/EditorValueState.ts
@ -0,0 +1,12 @@
+import { atom } from 'recoil'
+
+export const EditorValueState = atom({
+  key: 'editor_value',
+  default: JSON.stringify(
+    {
+      Hello: 'world!'
+    },
+    null,
+    2
+  )
+})
--- a/src/LandingAnimation/index.tsx
+++ b/src/LandingAnimation/index.tsx
@ -0,0 +1,30 @@
+import { FC, useEffect, useState } from 'react'
+import { AnimatePresence, motion, TargetAndTransition } from 'framer-motion'
+
+import style from './style.module.scss'
+import Suika from '../Assets/favicon.webp'
+
+export const LandingAnimation: FC = () => {
+  const [isVisible, setVisible] = useState(true)
+  const exitAnimation: TargetAndTransition = {
+    opacity: 0
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      setVisible(false)
+    }, 1000)
+  }, [])
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div exit={exitAnimation} className={style.container}>
+          <img src={Suika} alt="suika" />
+          <h1>The PTOOLS</h1>
+          <p>Right tools for you!</p>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
--- a/src/LandingAnimation/style.module.scss
+++ b/src/LandingAnimation/style.module.scss
@ -0,0 +1,20 @@
+.container {
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+
+  width: 100dvw;
+  height: 100dvh;
+
+  img {
+    width: 100px;
+  }
+}
--- a/src/TransformGrid/index.tsx
+++ b/src/TransformGrid/index.tsx
@ -0,0 +1,21 @@
+import { FC } from 'react'
+import { motion } from 'framer-motion'
+
+import style from './style.module.scss'
+import { TransformGridItem } from '../TransformGridItem'
+import { transforms, wrapTransform } from '../Transforms/Transform'
+
+export const TransformGrid: FC = () => (
+  <ul className={style.grid}>
+    {transforms.map((transform, i) => (
+      <motion.li
+        key={i}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: i * 0.1 + 1.5 }}
+      >
+        <TransformGridItem transform={wrapTransform(transform)} />
+      </motion.li>
+    ))}
+  </ul>
+)
--- a/src/TransformGrid/style.module.scss
+++ b/src/TransformGrid/style.module.scss
@ -0,0 +1,12 @@
+.grid {
+  padding: 10px;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  align-content: flex-start;
+  
+  gap: 10px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
--- a/src/TransformGridItem/index.tsx
+++ b/src/TransformGridItem/index.tsx
@ -0,0 +1,262 @@
+// src/components/TransformGridItem.tsx
+
+import { ChangeEvent, FC, useEffect, useState } from 'react'
+import style from './style.module.scss'
+import { Button } from '../Components/Button'
+import { Input } from '../Components/Input'
+// Remove TextArea import as it's no longer used
+import clsx from 'clsx'
+import { useRecoilState } from 'recoil'
+import { EditorValueState } from '../GlobalStates/EditorValueState'
+import {
+  TransformCheckboxOption,
+  TransformIntboxOption,
+  TransformRadioOption,
+  TransformTextboxOption,
+  WrappedTransform,
+  WrappedTransformResult
+} from '../Transforms/Transform'
+import { useLocalStorage } from '@uidotdev/usehooks'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Tooltip } from 'react-tooltip'
+import { TextArea } from '../Components/TextArea'
+
+interface TransformGridItemProp {
+  transform: WrappedTransform
+}
+
+export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
+  const [value, setValue] = useRecoilState(EditorValueState)
+  const [options, setOptions] = useState(transform.options)
+  const [closedToggle, setClosedToggle] = useLocalStorage(
+    `transform_closed__${transform.name}`,
+    false
+  )
+  const [result, setResult] = useState<WrappedTransformResult>({
+    error: false,
+    value: ''
+  })
+
+  const previewDisabled = value.length > 30000
+  const closed = previewDisabled || closedToggle
+
+  const triggerTransform = async () =>
+    await transform
+      .fn(value, options)
+      .then((result) => {
+        setResult(result)
+        return result
+      })
+      .catch((error) => {
+        setResult({ error: true, value: error.toString() })
+        return { error: true, value: error.toString() }
+      })
+
+  // Trigger transform when value, option or closed state changes
+  useEffect(() => {
+    if (previewDisabled) return
+
+    transform
+      .fn(value, options)
+      .then(setResult.bind(this))
+      .catch((error) => setResult({ error: true, value: error.toString() }))
+  }, [value, options, closed, previewDisabled, transform])
+
+  // Reset error state when options change
+  useEffect(() => {
+    if (!previewDisabled) return
+
+    setResult({
+      error: false,
+      value: ''
+    })
+  }, [options, previewDisabled])
+
+  // Force disable preview when value is longer than 30,000 chars
+  useEffect(() => {
+    if (previewDisabled) {
+      setResult({
+        error: false,
+        value: ''
+      })
+      return
+    }
+
+    transform
+      .fn(value, options)
+      .then(setResult.bind(this))
+      .catch((error) => setResult({ error: true, value: error.toString() }))
+  }, [value, previewDisabled, transform, options])
+
+  const onCheckboxOptionChanged =
+    (option: TransformCheckboxOption) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: event.target.checked
+      })
+
+      setOptions(new Map(options))
+    }
+
+  const onTextboxOptionChanged =
+    (option: TransformTextboxOption) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: event.target.value
+      })
+
+      setOptions(new Map(options))
+    }
+
+  const onIntboxOptionChanged =
+    (option: TransformIntboxOption) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: parseInt(event.target.value)
+      })
+
+      setOptions(new Map(options))
+    }
+
+  const onRadioOptionChanged =
+    (option: TransformRadioOption) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: event.target.value
+      })
+
+      setOptions(new Map(options))
+    }
+
+  const onForwardButtonPressed = async () => {
+    const result = await triggerTransform()
+
+    if (result.error) return
+
+    setValue(result.value)
+  }
+
+  const onLabelClicked = async () => {
+    if (previewDisabled) return
+
+    setClosedToggle(!closed)
+  }
+
+  return (
+    <div className={clsx(style.item, closed && style.closed)}>
+      <div className={style.toolbar}>
+        <div data-tooltip-id={`${transform.name}-tooltip`}>
+          <Button disabled={result.error} onClick={onForwardButtonPressed}>
+            &lt;&lt;&lt;
+          </Button>
+        </div>
+
+        <Tooltip
+          className={style.error}
+          id={`${transform.name}-tooltip`}
+          place="bottom"
+        >
+          {previewDisabled && result.error && result.value}
+        </Tooltip>
+
+        <h2
+          onClick={onLabelClicked}
+          className={clsx(style.name, previewDisabled && style.previewDisabled)}
+        >
+          {transform.name}
+        </h2>
+
+        <div className={style.options}>
+          {[...options.values()]
+            ?.filter((v) => v.type === 'CHECKBOX')
+            .map((option, i) => (
+              <label key={i} className={style.optionItem}>
+                <p>{option.label ?? option.key}:</p>
+
+                <Input
+                  checked={option.value}
+                  onChange={onCheckboxOptionChanged(option)}
+                  type="checkbox"
+                />
+              </label>
+            ))}
+
+          {[...options.values()]
+            ?.filter((v) => v.type === 'TEXTBOX')
+            .map((option, i) => (
+              <label key={i} className={style.optionItem}>
+                <p>{option.label ?? option.key}:</p>
+
+                <Input
+                  value={option.value}
+                  onChange={onTextboxOptionChanged(option)}
+                  type="text"
+                />
+              </label>
+            ))}
+
+          {[...options.values()]
+            ?.filter((v) => v.type === 'INTBOX')
+            .map((option, i) => (
+              <label key={i} className={style.optionItem}>
+                <p>{option.label ?? option.key}:</p>
+
+                <Input
+                  min={1}
+                  value={option.value}
+                  onChange={onIntboxOptionChanged(option)}
+                  type="number"
+                />
+              </label>
+            ))}
+
+          {[...options.values()]
+            ?.filter((v) => v.type === 'RADIO')
+            .map((option, i) => (
+              <div
+                key={i}
+                onChange={onRadioOptionChanged(option)}
+                className={style.optionItem}
+              >
+                {option.radios.map((radio, i2) => (
+                  <label key={i2}>
+                    <p>{radio.label ?? radio.value}:</p>
+
+                    <Input
+                      min={1}
+                      name={option.key}
+                      defaultChecked={radio.value === option.value}
+                      value={radio.value}
+                      type="radio"
+                    />
+                  </label>
+                ))}
+              </div>
+            ))}
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {!closed && (
+          <motion.div
+            initial={{ height: 0 }}
+            animate={{ height: 200 }}
+            exit={{ height: 0 }}
+            className={style.output}
+          >
+            <TextArea
+              readOnly
+              value={result.value}
+              placeholder="(empty)"
+              className={clsx(result.error && style.error)}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
--- a/src/TransformGridItem/style.module.scss
+++ b/src/TransformGridItem/style.module.scss
@ -0,0 +1,56 @@
+.item {
+  background-color: #1e1e1e;
+  border-radius: 6px;
+  display: flex;
+  padding: 10px;
+  flex-direction: column;
+
+  .toolbar {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 0px 10px;
+    background-color: #323232;
+    border-radius: 4px;
+
+    .error {
+      color: #ffcaca;
+    }
+
+    .name {
+      font-size: inherit;
+      padding: 14px 6px;
+      
+      &:hover:not(.previewDisabled) {
+        cursor: pointer;
+        text-decoration: underline dotted;
+      }
+    }
+
+    .options {
+      flex-grow: 1;
+      display: flex;
+      padding: 14px 2px;
+      gap: 10px;
+      height: 100%;
+      overflow-x: auto;
+      scrollbar-width: thin;
+      scrollbar-color: gray #323232;
+      align-items: center;
+
+      * {
+        display: flex;
+        gap: 6px;
+      }
+    }
+
+  }
+  
+  .output {
+    height: 200px;
+  }
+  
+  .error {
+    color: #ffcaca;
+  }
+}
--- a/src/Transforms/Base64Transforms.ts
+++ b/src/Transforms/Base64Transforms.ts
@ -0,0 +1,11 @@
+import { Transform } from './Transform'
+
+export const Base64DecodeTransform: Transform = {
+  name: 'base64d',
+  fn: async (v) => atob(v)
+}
+
+export const Base64EncodeTransform: Transform = {
+  name: 'base64e',
+  fn: async (v) => btoa(v)
+}
--- a/src/Transforms/CurlTransform.ts
+++ b/src/Transforms/CurlTransform.ts
@ -0,0 +1,49 @@
+import { Transform } from './Transform'
+
+export const CurlTransform: Transform = {
+  name: 'curle',
+  fn: async (v: string) => {
+    // Split the input into sections using blank lines as delimiters.
+    // The first section contains the request line and headers,
+    // and the remaining section(s) (if any) form the body.
+    const sections = v
+      .split(/\n\s*\n/)
+      .map((s) => s.trim())
+      .filter(Boolean)
+    if (sections.length === 0) return ''
+
+    // Process the first section (request line and headers)
+    const headerLines = sections[0]
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean)
+    if (headerLines.length === 0) return ''
+
+    // The first line is expected to be the request line, e.g., "POST https://test.example.com"
+    const [method, url] = headerLines[0].split(' ')
+    const curlParts: string[] = [`curl -X ${method.toUpperCase()} ${url}`]
+
+    // Process each header line (if any exist)
+    for (let i = 1; i < headerLines.length; i++) {
+      const line = headerLines[i]
+      // Find the first colon to split header name and value.
+      const colonIndex = line.indexOf(':')
+      if (colonIndex === -1) continue // Skip any lines that are not valid headers
+      const headerName = line.substring(0, colonIndex).trim()
+      const headerValue = line.substring(colonIndex + 1).trim()
+      curlParts.push(`  -H "${headerName}: ${headerValue}"`)
+    }
+
+    // Process the body if one is provided (all sections after the first)
+    if (sections.length > 1) {
+      // Join remaining sections (in case there are multiple blank-line separations)
+      const body = sections.slice(1).join('\n\n').trim()
+      if (body) {
+        curlParts.push(`  -d '${body}'`)
+      }
+    }
+
+    // Join the parts using backslashes to create a multi-line curl command.
+    return curlParts.join(' \\\n')
+  }
+}
--- a/src/Transforms/DatetimeTransforms.ts
+++ b/src/Transforms/DatetimeTransforms.ts
@ -0,0 +1,47 @@
+import { Transform } from './Transform'
+import { strptime } from 'strtime'
+import moment from 'moment'
+
+export const DatetimeTransform: Transform = {
+  name: 'datetime',
+
+  fn: async (v, o) => {
+    const [expression, samples] = v.split('\n\n')
+    const format = o.get('f')?.value
+
+    const parsedSamples = samples
+      .split('\n')
+      .map((sample) => {
+        if (format === 'c')
+          return strptime(sample, expression.replace(/'/g, ''))
+
+        if (format === 'java')
+          return moment(sample, expression.replace(/'/g, '')).toDate()
+
+        throw new Error('Unknown Format')
+      })
+      .map((date) =>
+        JSON.stringify({
+          year: date.getFullYear(),
+          month: date.getMonth() + 1,
+          date: date.getDate(),
+          hour: date.getHours(),
+          minute: date.getMinutes(),
+          second: date.getSeconds(),
+          milli: date.getMilliseconds()
+        })
+      )
+      .join('\n')
+
+    return [expression, samples, parsedSamples].join('\n\n')
+  },
+
+  options: [
+    {
+      type: 'RADIO',
+      key: 'f',
+      value: 'c',
+      radios: [{ value: 'c' }, { value: 'java' }]
+    }
+  ]
+}
--- a/src/Transforms/GzipTransform.ts
+++ b/src/Transforms/GzipTransform.ts
@ -0,0 +1,83 @@
+import { Transform } from './Transform'
+
+const decompressGzip = async (base64: string) => {
+  const byteCharacters = atob(base64)
+  const byteNumbers = new Array(byteCharacters.length)
+
+  for (let i = 0; i < byteCharacters.length; i++)
+    byteNumbers[i] = byteCharacters.charCodeAt(i)
+
+  const decompressedStream = new Blob([new Uint8Array(byteNumbers)])
+    .stream()
+    .pipeThrough(new DecompressionStream('gzip'))
+
+  return await new Response(decompressedStream).text()
+}
+
+export const GzipDecompressTransform: Transform = {
+  name: 'gzipd',
+
+  fn: (v) => decompressGzip(v)
+}
+
+const compressGzip = async (input: string): Promise<string> => {
+  if (typeof CompressionStream === 'undefined') {
+    throw new Error(
+      'CompressionStream API is not supported in this environment.'
+    )
+  }
+
+  const encoder = new TextEncoder()
+  const encoded = encoder.encode(input)
+
+  const readable = new ReadableStream<Uint8Array>({
+    start(controller) {
+      controller.enqueue(encoded)
+      controller.close()
+    }
+  })
+
+  const compressionStream = new CompressionStream('gzip')
+
+  const compressedStream = readable.pipeThrough(compressionStream)
+
+  const reader = compressedStream.getReader()
+  const chunks: Uint8Array[] = []
+  let done = false
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read()
+    if (value) {
+      chunks.push(value)
+    }
+    done = doneReading
+  }
+
+  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0)
+  const compressedData = new Uint8Array(totalLength)
+  let offset = 0
+  for (const chunk of chunks) {
+    compressedData.set(chunk, offset)
+    offset += chunk.length
+  }
+
+  const base64String = arrayBufferToBase64(compressedData)
+
+  return base64String
+}
+
+const arrayBufferToBase64 = (buffer: Uint8Array): string => {
+  let binary = ''
+  for (let i = 0; i < buffer.length; i++) {
+    binary += String.fromCharCode(buffer[i])
+  }
+  return btoa(binary)
+}
+
+export const GzipCompressTransform: Transform = {
+  name: 'gzipc', // Unique identifier for the transform
+
+  fn: (v: string) => compressGzip(v),
+
+  options: [] // Add any options if needed
+}
--- a/src/Transforms/IWRTransform.ts
+++ b/src/Transforms/IWRTransform.ts
@ -0,0 +1,58 @@
+import { Transform } from './Transform'
+
+export const IWRETransform: Transform = {
+  name: 'iwre',
+  fn: async (v: string) => {
+    // Split the input into sections using blank lines as delimiters.
+    const sections = v
+      .split(/\n\s*\n/)
+      .map((s) => s.trim())
+      .filter(Boolean)
+    if (sections.length === 0) return ''
+
+    // Process the first section (request line and headers)
+    const headerLines = sections[0]
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean)
+    if (headerLines.length === 0) return ''
+
+    // The first line should be something like "POST https://test.example.com"
+    const [method, url] = headerLines[0].split(' ')
+    const psParts: string[] = [
+      `Invoke-WebRequest -Uri "${url}" -Method ${method.toUpperCase()}`
+    ]
+
+    // Build a headers object
+    const headers: { [key: string]: string } = {}
+    for (let i = 1; i < headerLines.length; i++) {
+      const line = headerLines[i]
+      const colonIndex = line.indexOf(':')
+      if (colonIndex === -1) continue // Skip lines that aren't valid headers
+      const headerName = line.substring(0, colonIndex).trim()
+      const headerValue = line.substring(colonIndex + 1).trim()
+      headers[headerName] = headerValue
+    }
+
+    if (Object.keys(headers).length > 0) {
+      // Build the header hashtable string for PowerShell using actual newlines.
+      const headerStr = Object.entries(headers)
+        .map(([key, value]) => `    "${key}" = "${value}"`)
+        .join('\n')
+      psParts.push(`-Headers @{\n${headerStr}\n}`)
+    }
+
+    // Process the body (if any)
+    if (sections.length > 1) {
+      const body = sections.slice(1).join('\n\n').trim()
+      if (body) {
+        // Escape single quotes by doubling them.
+        const escapedBody = body.replace(/'/g, "''")
+        psParts.push(`-Body '${escapedBody}'`)
+      }
+    }
+
+    // Join parts with PowerShell's line continuation character (backtick) and an actual newline.
+    return psParts.join(' `\n')
+  }
+}
--- a/src/Transforms/JSONTransforms.ts
+++ b/src/Transforms/JSONTransforms.ts
@ -0,0 +1,60 @@
+import JSON5 from 'json5'
+import { Transform } from './Transform'
+
+export const JSONBeautifyTransform: Transform = {
+  name: 'jsonbtf',
+
+  fn: async (v, o) =>
+    o.get('multiline')?.value === true
+      ? JSON.stringify(
+          JSON5.parse(v),
+          null,
+          (o.get('tab')?.value as number) ?? 2
+        )
+      : v
+          .split('\n')
+          .map((v2) =>
+            JSON.stringify(
+              JSON5.parse(v2),
+              null,
+              (o.get('tab')?.value as number) ?? 2
+            )
+          )
+          .join('\n'),
+
+  options: [
+    {
+      type: 'CHECKBOX',
+      key: 'multiline'
+    },
+    {
+      type: 'INTBOX',
+      key: 'tab',
+      value: 2
+    }
+  ]
+}
+
+export const JSONSimplifyTransform: Transform = {
+  name: 'jsonsmp',
+
+  fn: async (v) => JSON.stringify(JSON5.parse(v))
+}
+
+export const JSONEscapeTransform: Transform = {
+  name: 'jsonesc',
+
+  fn: async (v) => JSON.stringify(v)
+}
+
+export const JSONUnescapeTransform: Transform = {
+  name: 'jsonunesc',
+
+  fn: async (v) => {
+    const result = JSON5.parse(v)
+
+    if (typeof result !== 'string') throw new Error('Not JSON escaped')
+
+    return result
+  }
+}
--- a/src/Transforms/PythonTransforms.ts
+++ b/src/Transforms/PythonTransforms.ts
@ -0,0 +1,64 @@
+import { Transform } from './Transform'
+
+const pythonToJSON = (pythonStr: string): string => {
+  // Validate basic structure first before any replacements
+  if (!/^\s*(?:\{[\s\S]*\}|\[[\s\S]*\])\s*$/.test(pythonStr)) {
+    throw new Error('Invalid Python dictionary or array format')
+  }
+
+  // Perform all replacements in a single pass
+  return pythonStr.replace(/('|None\b|True\b|False\b)/g, (match) => {
+    switch (match) {
+      case "'":
+        return '"'
+      case 'None':
+        return 'null'
+      case 'True':
+        return 'true'
+      case 'False':
+        return 'false'
+      default:
+        return match
+    }
+  })
+}
+
+export const PythonDictToJSONTransform: Transform = {
+  name: 'py2json',
+  fn: async (v) => {
+    try {
+      // Validate the result is actually valid JSON
+      return JSON.stringify(JSON.parse(pythonToJSON(v)))
+    } catch {
+      throw new Error('Invalid Python dictionary or array format')
+    }
+  }
+}
+
+export const JSONToPythonDictTransform: Transform = {
+  name: 'json2py',
+  fn: async (v) => {
+    try {
+      // Validate and format in one step
+      return JSON.stringify(JSON.parse(v), null, 2).replace(
+        /("|\bnull\b|\btrue\b|\bfalse\b)/g,
+        (match) => {
+          switch (match) {
+            case '"':
+              return "'"
+            case 'null':
+              return 'None'
+            case 'true':
+              return 'True'
+            case 'false':
+              return 'False'
+            default:
+              return match
+          }
+        }
+      )
+    } catch {
+      throw new Error('Invalid JSON format')
+    }
+  }
+}
--- a/src/Transforms/RegexpTransform.ts
+++ b/src/Transforms/RegexpTransform.ts
@ -0,0 +1,19 @@
+import { Transform } from './Transform'
+
+export const RegexpTransform: Transform = {
+  name: 'regexp',
+  fn: async (v) => {
+    const [expression, samples] = v.split('\n\n')
+    const regexp = new RegExp(expression)
+
+    const parsedSamples = samples
+      .split('\n')
+      .map((sample) => regexp.exec(sample))
+      .map((sample, i) =>
+        `${i + 3}(${sample === null ? 'x' : 'o'}) ${JSON.stringify(sample?.groups) ?? ''}`.trimEnd()
+      )
+      .join('\n')
+
+    return [expression, samples, parsedSamples].join('\n\n')
+  }
+}
--- a/src/Transforms/Transform.ts
+++ b/src/Transforms/Transform.ts
@ -0,0 +1,117 @@
+import {
+  Base64DecodeTransform,
+  Base64EncodeTransform
+} from './Base64Transforms'
+import { DatetimeTransform } from './DatetimeTransforms'
+import { GzipCompressTransform, GzipDecompressTransform } from './GzipTransform'
+import {
+  JSONBeautifyTransform,
+  JSONEscapeTransform,
+  JSONSimplifyTransform,
+  JSONUnescapeTransform
+} from './JSONTransforms'
+import { RegexpTransform } from './RegexpTransform'
+import { URIDecodeTransform, URIEncodeTransform } from './URITransforms'
+import { JSON2YAMLTransform, YAML2JSONTransform } from './YAMLTransforms'
+import {
+  PythonDictToJSONTransform,
+  JSONToPythonDictTransform
+} from './PythonTransforms'
+import { CurlTransform } from './CurlTransform'
+import { IWRETransform } from './IWRTransform'
+
+export interface TransformCheckboxOption {
+  type: 'CHECKBOX'
+  key: string
+  label?: string
+  value?: boolean
+}
+
+export interface TransformTextboxOption {
+  type: 'TEXTBOX'
+  key: string
+  label?: string
+  value?: string
+}
+
+export interface TransformIntboxOption {
+  type: 'INTBOX'
+  key: string
+  label?: string
+  value?: number
+}
+
+export interface TransformRadioOption {
+  type: 'RADIO'
+  key: string
+  label?: string
+  value?: string
+  radios: {
+    label?: string
+    value: string
+  }[]
+}
+
+export type TransformOption =
+  | TransformCheckboxOption
+  | TransformTextboxOption
+  | TransformIntboxOption
+  | TransformRadioOption
+
+export interface Transform {
+  name: string
+  fn: (value: string, options: Map<string, TransformOption>) => Promise<string>
+  options?: TransformOption[]
+}
+
+export interface WrappedTransformResult {
+  error: boolean
+  value: string
+}
+
+export interface WrappedTransform extends Omit<Transform, 'fn' | 'options'> {
+  wrapped: true
+
+  fn: (
+    value: string,
+    options: Map<string, TransformOption>
+  ) => Promise<WrappedTransformResult>
+
+  options: Map<string, TransformOption>
+}
+
+export const wrapTransform = (transform: Transform): WrappedTransform => ({
+  ...transform,
+
+  fn: async (...args) =>
+    await transform
+      .fn(...args)
+      .then((value) => ({ error: false, value: value.toString() }))
+      .catch((error) => ({ error: true, value: error.toString() })),
+
+  options: new Map<string, TransformOption>(
+    (transform.options ?? []).map((v) => [v.key, v])
+  ),
+  wrapped: true
+})
+
+export const transforms: Transform[] = [
+  RegexpTransform,
+  DatetimeTransform,
+  Base64DecodeTransform,
+  Base64EncodeTransform,
+  URIDecodeTransform,
+  URIEncodeTransform,
+  JSONBeautifyTransform,
+  JSONSimplifyTransform,
+  JSONEscapeTransform,
+  JSONUnescapeTransform,
+  JSON2YAMLTransform,
+  YAML2JSONTransform,
+  PythonDictToJSONTransform,
+  JSONToPythonDictTransform,
+  GzipCompressTransform,
+  GzipDecompressTransform,
+  CurlTransform,
+  IWRETransform
+]
--- a/src/Transforms/URITransforms.ts
+++ b/src/Transforms/URITransforms.ts
@ -0,0 +1,29 @@
+import { Transform } from './Transform'
+
+export const URIDecodeTransform: Transform = {
+  name: 'urid',
+
+  fn: async (v, o) =>
+    o.get('cmp')?.value === true ? decodeURIComponent(v) : decodeURI(v),
+
+  options: [
+    {
+      type: 'CHECKBOX',
+      key: 'cmp'
+    }
+  ]
+}
+
+export const URIEncodeTransform: Transform = {
+  name: 'urie',
+
+  fn: async (v, o) =>
+    o.get('cmp')?.value === true ? encodeURIComponent(v) : encodeURI(v),
+
+  options: [
+    {
+      type: 'CHECKBOX',
+      key: 'cmp'
+    }
+  ]
+}
--- a/src/Transforms/YAMLTransforms.ts
+++ b/src/Transforms/YAMLTransforms.ts
@ -0,0 +1,15 @@
+import { Transform } from './Transform'
+import YAML from 'yaml'
+import JSON5 from 'json5'
+
+export const YAML2JSONTransform: Transform = {
+  name: 'yaml2json',
+
+  fn: async (v) => JSON.stringify(YAML.parse(v))
+}
+
+export const JSON2YAMLTransform: Transform = {
+  name: 'json2yaml',
+
+  fn: async (v) => YAML.stringify(JSON5.parse(v))
+}
--- a/src/main.css
+++ b/src/main.css
@ -0,0 +1,28 @@
+:root {
+  color: #fafafa;
+  background-color: #212121;
+  font-family: 'JetBrains Mono Variable', monospace;
+  user-select: none;
+}
+
+h1, h2, h3, h4, h5, h6, p, pre, textarea, input, button, li, ul, ol {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+*::selection {
+  color: #212121;
+  background-color: #ff1696;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,23 @@
+import { StrictMode } from 'react'
+import { RecoilRoot } from 'recoil'
+import { createRoot } from 'react-dom/client'
+
+import 'normalize.css/normalize.css'
+import 'react-tooltip/dist/react-tooltip.css'
+import '@fontsource-variable/jetbrains-mono/index.css'
+
+// ---
+
+import './main.css'
+import { App } from './App'
+import { LandingAnimation } from './LandingAnimation'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RecoilRoot>
+      <App />
+
+      <LandingAnimation />
+    </RecoilRoot>
+  </StrictMode>
+)
--- a/src/version.ts
+++ b/src/version.ts
@ -0,0 +1 @@
+export const VERSION = 'deadbeef'
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+module 'strtime' {
+  function strptime(string, string): Date
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@ -0,0 +1 @@
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/App/index.tsx","./src/App/AppLayout/index.tsx","./src/Components/Button.tsx","./src/Components/Input.tsx","./src/Components/TextArea.tsx","./src/Editor/index.tsx","./src/GlobalStates/EditorValueState.ts","./src/LandingAnimation/index.tsx","./src/TransformGrid/index.tsx","./src/TransformGridItem/index.tsx","./src/Transforms/Base64Transforms.ts","./src/Transforms/Transform.ts","./src/Transforms/URITransforms.ts"],"version":"5.6.3"}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/tsconfig.node.tsbuildinfo
+++ b/tsconfig.node.tsbuildinfo
@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler' // or "modern"
+      }
+    }
+  }
+})
Author	SHA1	Message	Date
Minhyeok Park	70414baac0	feat: add iwre transformer All checks were successful / deploy_site (push) Successful in 31s Details	2025-03-31 19:14:51 +09:00
Minhyeok Park	2edc5171d9	feat: add curle transform All checks were successful / deploy_site (push) Successful in 21s Details	2025-03-19 15:19:57 +09:00
Minhyeok Park	f78c9cd655	chore: update deps and apply lint All checks were successful / deploy_site (push) Successful in 22s Details	2025-03-19 15:10:18 +09:00
Minhyeok Park	b01a3696a0	feat(regexp): add index and match indicator All checks were successful / deploy_site (push) Successful in 23s Details	2025-02-01 10:06:13 +09:00
Minhyeok Park	68fa9f64d7	fix: correct typo in README.md for string conversions All checks were successful / deploy_site (push) Successful in 20s Details	2025-01-16 15:22:52 +09:00
Minhyeok Park	52660afcba	feat: add Python dictionary to JSON transforms and remove GzipCompressTransform All checks were successful / deploy_site (push) Successful in 20s Details - Introduced new transforms for converting Python dictionaries to JSON and vice versa in `PythonTransforms.ts`. - Updated `README.md` to reflect the new transformations. - Removed the `GzipCompressTransform.ts` file and integrated its functionality into `GzipTransform.ts`.	2025-01-16 14:33:41 +09:00
Minhyeok Park	2fc8269442	chore: remove trailing comma All checks were successful / deploy_site (push) Successful in 21s Details	2025-01-16 09:28:24 +09:00
Minhyeok Park	05ff8493e4	chore: add prettier linter All checks were successful / deploy_site (push) Successful in 23s Details	2025-01-16 09:16:14 +09:00
Minhyeok Park	a22ea56b50	feat: add gzip encode ttransforms	2025-01-16 08:34:58 +09:00
Minhyeok Park	8214b7807c	feat: add version info All checks were successful / deploy_site (push) Successful in 24s Details	2024-11-13 15:29:35 +09:00
Minhyeok Park	2f400f5e48	refactor: use normal variable instead of component state for better maintaince All checks were successful / deploy_site (push) Successful in 24s Details	2024-11-13 15:12:48 +09:00
Minhyeok Park	d0cf9e65b9	fix: more smooth logics when preview unavailable All checks were successful / deploy_site (push) Successful in 25s Details	2024-11-13 14:33:11 +09:00
Minhyeok Park	dea7b2cd20	chore(ci): typo All checks were successful / deploy_site (push) Successful in 24s Details	2024-11-12 20:04:02 +09:00
Minhyeok Park	c9ddfbc9b8	chore(ci): use prebuilt image for building Some checks failed / deploy_site (push) Failing after 23s Details	2024-11-12 20:03:11 +09:00
Minhyeok Park	6e82e10cbb	docs: add proper README.md All checks were successful / deploy_site (push) Successful in 2m40s Details	2024-11-12 02:25:36 +00:00
Minhyeok Park	c56390050d	feat: add more transform trigger point All checks were successful / deploy_site (push) Successful in 3m46s Details	2024-11-12 11:14:53 +09:00
Minhyeok Park	735284416a	fix: ignore first init value All checks were successful / deploy_site (push) Successful in 1m51s Details	2024-11-12 11:02:49 +09:00
Minhyeok Park	ba76193d33	feat: auto-close preview screen when input value is longer than 30000 chars All checks were successful / deploy_site (push) Successful in 4m44s Details	2024-11-12 10:50:42 +09:00
Minhyeok Park	b843facac6	chore: use modoern compiler for scss preprocessing	2024-11-12 10:33:41 +09:00
Minhyeok Park	145aa06095	feat: cursor go through suika image All checks were successful / deploy_site (push) Successful in 1m44s Details	2024-11-01 09:28:05 +09:00
Minhyeok Park	1bff66232d	fix: output textbox boundary All checks were successful / deploy_site (push) Successful in 1m49s Details	2024-10-30 21:47:37 +09:00
Minhyeok Park	e184b43a6f	fix: oops koishi is missing.. so we replaced to suika All checks were successful / deploy_site (push) Successful in 1m45s Details	2024-10-30 21:23:37 +09:00
Minhyeok Park	f73b1a7e0b	feat: add cutie koishi and credits All checks were successful / deploy_site (push) Successful in 2m21s Details	2024-10-30 21:17:21 +09:00
Minhyeok Park	1a936aa112	feat: add TransformItem close animation All checks were successful / deploy_site (push) Successful in 2m2s Details	2024-10-30 20:56:12 +09:00
Minhyeok Park	2f6b56d55b	feat: hide transform when click title All checks were successful / deploy_site (push) Successful in 3m16s Details	2024-10-29 21:05:14 +09:00
Minhyeok Park	76fe3e8083	fix: remove option label when type is radio All checks were successful / deploy_site (push) Successful in 3m45s Details	2024-10-28 21:45:49 +09:00
Minhyeok Park	314e0e76f8	feat: add datetime transforms All checks were successful / deploy_site (push) Successful in 3m11s Details	2024-10-28 21:33:41 +09:00
Minhyeok Park	248880aa9a	fix: flip base64 encoding transform All checks were successful / deploy_site (push) Successful in 1m57s Details	2024-10-28 13:01:35 +09:00
Minhyeok Park	4ac92e5fa2	feat: add many transforms All checks were successful / deploy_site (push) Successful in 1m33s Details	2024-10-27 19:38:59 +09:00
Minhyeok Park	5bd0bf1a95	chore(fix): use dist folder for output All checks were successful / deploy_site (push) Successful in 1m25s Details	2024-10-27 14:06:13 +09:00
Minhyeok Park	87a35aeffc	feat: add transform system All checks were successful / deploy_site (push) Successful in 3m56s Details	2024-10-27 12:34:54 +09:00
Minhyeok Park	beba067305	refactor: upload temp All checks were successful / deploy_site (push) Successful in 1m56s Details	2024-10-26 17:57:34 +09:00
Minhyeok Park	aa4cfabe11	feat: add disabled notice	2024-10-26 13:50:22 +09:00
Minhyeok Park	c845f9d98d	feat: add suika icon	2024-10-18 08:09:12 +09:00
Minhyeok Park	ed4e86b9df	fix: package locking permission issue	2024-10-17 09:18:51 +09:00
Minhyeok Park	3810815948	revert: feat: change bucket name	2024-10-17 08:59:36 +09:00
Minhyeok Park	d7be9973c7	feat: change bucket name	2024-10-16 21:44:35 +09:00
Minhyeok Park	11c6d1735e	feat: push undo state to undo stack when import string	2024-10-15 18:47:27 +09:00
Minhyeok Park	116d4173aa	feat: preserve undo-stack when pull from output	2024-10-15 17:31:00 +09:00
Minhyeok Park	1358b22a54	feat: add more style	2024-10-15 16:55:07 +09:00
Minhyeok Park	b40e6313b3	feat: no n lts command!	2024-10-15 16:38:30 +09:00
				`@ -0,0 +1 @@`
				`{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/App/index.tsx","./src/App/AppLayout/index.tsx","./src/Components/Button.tsx","./src/Components/Input.tsx","./src/Components/TextArea.tsx","./src/Editor/index.tsx","./src/GlobalStates/EditorValueState.ts","./src/LandingAnimation/index.tsx","./src/TransformGrid/index.tsx","./src/TransformGridItem/index.tsx","./src/Transforms/Base64Transforms.ts","./src/Transforms/Transform.ts","./src/Transforms/URITransforms.ts"],"version":"5.6.3"}`
				`@ -0,0 +1 @@`
				`{"root":["./vite.config.ts"],"version":"5.6.3"}`