add move up/down buttons to editor blocks

src/components/Build.svelte

@@ -10,13 +10,13 @@
   import Editor from './Editor.svelte'
   import NpmPackage from './NpmPackage.svelte'
   import Options from './Options.svelte'
+  import { flip } from 'svelte/animate'
 
   export let show = true
 
   let dependencies: Record<string, [string, string][]> = Object.create(null)
 
-  const default_options =
-    '--bundle --format=esm --splitting --outdir=/ --packages=external --allow-overwrite'.replace(/[ ]/g, '\n')
+  const default_options = '--bundle --format=esm --splitting --outdir=. --packages=external'
   let build_options = $mode === 'build' ? $options : ''
   $: if ($mode === 'build') {
     $options = build_options
@@ -103,6 +103,15 @@
     $files = $files
   }
 
+  function move_file(index: number, direction: -1 | 1) {
+    const i = index + direction
+    if (i < 0 || i >= $files.length) return
+    const temp = $files[i]
+    $files[i] = $files[index]
+    $files[index] = temp
+    $files = $files
+  }
+
   async function npm_install(raw?: MouseEvent | string | null) {
     if (typeof raw !== 'string') {
       raw = prompt('Enter package name:')
@@ -209,17 +218,22 @@
 
 <div data-build style={show ? '' : 'display: none'}>
   <Options bind:content={build_options} on:reload={reset_options} />
-  {#each $files as { entry, path, content }, i}
-    <Editor
-      bind:entry
-      bind:name={path}
-      bind:content
-      on:remove={() => remove_file(i)}
-      header
-      rows={2}
-      label="INPUT"
-      placeholder="(enter your code here)"
-    />
+  {#each $files as file, i (file)}
+    <div class="editor" animate:flip={{ duration: 250 }}>
+      <Editor
+        bind:entry={file.entry}
+        bind:name={file.path}
+        bind:content={file.content}
+        on:remove={() => remove_file(i)}
+        on:up={() => move_file(i, -1)}
+        on:down={() => move_file(i, 1)}
+        pos={i ? (i === $files.length - 1 ? 2 : 1) : 0}
+        header
+        rows={2}
+        label="INPUT"
+        placeholder="(enter your code here)"
+      />
+    </div>
   {/each}
   <footer>
     <button on:click={new_file} title="add a new file">
@@ -270,7 +284,7 @@
     font-variant-numeric: tabular-nums;
   }
   button:not(:last-child) {
-    margin-bottom: 10px;
+    margin: 4px 0 10px;
   }
   button.not-installed {
     transform: translateX(20px);

src/components/Editor.svelte

@@ -13,6 +13,7 @@
   export let entry = false
   export let readonly = false
   export let lang = ''
+  export let pos = 0
 
   const dispatch = createEventDispatcher()
 
@@ -35,6 +36,12 @@
             <i class={entry ? 'i-mdi-checkbox-marked-outline' : 'i-mdi-checkbox-blank-outline'} />
           </button>
           <input placeholder="<stdin>" spellcheck="false" bind:value={name} />
+          <button class="move-up" title="move up" disabled={pos === 0} on:click={() => dispatch('up')}>
+            <i class="i-mdi-arrow-up" />
+          </button>
+          <button class="move-down" title="move down" disabled={pos === 2} on:click={() => dispatch('down')}>
+            <i class="i-mdi-arrow-down" />
+          </button>
           <button class="remove" title="remove {name || 'it'}" on:click={() => dispatch('remove')}>
             <i class="i-mdi-close" />
           </button>
@@ -84,7 +91,7 @@
   header {
     display: flex;
     align-items: center;
-    margin-bottom: 4px;
+    margin: 4px 0;
   }
   header input {
     flex: 1;
@@ -142,16 +149,29 @@
   button.remove:hover {
     opacity: 1;
   }
+  button.move-up,
+  button.move-down {
+    opacity: 0.5;
+  }
+  button.move-up:hover,
+  button.move-down:hover {
+    opacity: 1;
+  }
+  button.move-up:disabled,
+  button.move-down:disabled {
+    opacity: 0.1;
+    cursor: not-allowed;
+  }
   span.size {
-    font: 14px/20px sans-serif;
+    font: 14px/18px sans-serif;
     font-variant-numeric: tabular-nums;
     opacity: 0.5;
   }
   pre {
     margin: 0;
     padding: 9px; /* 8px + 1px border */
     border-radius: 4px;
-    min-height: 34px;
+    min-height: 36px;
     font: var(--code-font);
     background: var(--pre);
     white-space: pre-wrap;

src/components/Options.svelte

@@ -251,7 +251,7 @@
     box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
     color: var(--fg-on);
     font: 14px/20px sans-serif;
-    z-index: 10;
+    z-index: 100;
     pointer-events: all;
   }
   footer {

src/helpers/completion.ts

@@ -42,7 +42,7 @@ const FLAGS: [string, string][] = [
   ['--mangle-cache=...',       'Save "mangle props" decisions to a JSON file'],
   ['--mangle-props=...',       'Rename all properties matching a regular expression'],
   ['--mangle-quoted=...',      'Enable renaming of quoted properties (true | false)'],
-  ['--metafile=...',           'Write metadata about the build to a JSON file (see also: https://esbuild.github.io/analyze/)'],
+  ['--metafile',               'Write metadata about the build to a JSON file (see also: https://esbuild.github.io/analyze/)'],
   ['--minify-whitespace',      'Remove whitespace in output files'],
   ['--minify-identifiers',     'Shorten identifiers in output files'],
   ['--minify-syntax',          'Use equivalent but shorter syntax in output files'],