first commit

This is the first commit.

With stuff on several lines.

dist/load-think-editor.mjs

@@ -0,0 +1,26 @@
+import './code-editor.mjs';
+
+export default async function init_app() {
+    const flags = JSON.parse(document.getElementById('think-editor-data').textContent);
+    const packages = await (await fetch('https://elm-package-list.think.somethingorotherwhatever.com/elm-packages.json')).json();
+    flags.elm_packages = packages;
+    flags.csrf_token = document.getElementById('csrftoken')?.textContent || '';
+    const app = Elm.App.init({node: document.body, flags});
+
+    app.ports.reload_preview.subscribe(() => {
+        console.log('reload preview');
+        const iframe = document.getElementById('preview-frame');
+        if(iframe) {
+            const src = iframe.src;
+            iframe.src = "";
+            setTimeout(() => {
+                iframe.src = src;
+            },10);
+        }
+    })
+
+    app.ports.show_modal.subscribe(id => {
+      console.log(id);
+      document.getElementById(id).showModal()
+    })
+}

dist/think-editor.css

@@ -0,0 +1,243 @@
+:root {
+    --spacing: 1em;
+    --half-spacing: calc(0.5 * var(--spacing));
+    --double-spacing: calc(2 * var(--spacing));
+
+    --editor-size: 50%;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    color-scheme: light dark;
+    font-family: sans-serif;
+    
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-height: 100vh;
+    margin: 0;
+    padding: var(--half-spacing);
+    
+    & > header {
+        padding: var(--spacing);
+        & h1 {
+            margin: 0;
+        }
+    }
+
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: black;
+    color: white;
+  }
+}
+
+header {
+  & #think-controls {
+    display: flex;
+    gap: var(--spacing);
+    margin: 0;
+  }
+}
+
+#editor-size-input + output {
+  width: 5em;
+}
+
+.file-path {
+  font-family: monospace;
+}
+
+
+.think-editor {
+    display: grid;
+    gap: var(--spacing);
+    height: 100%;
+    overflow: hidden;
+    --col-1-width: auto;
+    grid-template: 
+        "nav editor preview" min-content 
+        "log editor preview" 1fr
+        / var(--col-1-width) var(--editor-size) var(--preview-size)
+    ;
+    
+    &:has(#main-nav[open], #log[open]) {
+        --col-1-width: 20em;
+    }
+    
+    & > #main-nav {
+        grid-area: nav;
+    }
+    & > #log {
+        grid-area: log;
+        width: 100%;
+        overflow: auto;
+    }
+
+    & .dragging {
+      background: red;
+    }
+
+    & summary {
+      background: #eee;
+    }
+    
+    & > #main-nav > nav {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing);
+
+        & #file-tree {
+            margin: 0;
+            overflow: auto;
+            flex-grow: 1;
+
+            & > li {
+                margin-top: var(--half-spacing);
+
+                & > a {
+                    text-decoration: none;
+                }
+            }
+
+            & .dir {
+                font-weight: bold;
+            }
+
+            & .dir + .file {
+                margin-top: var(--spacing);
+            }
+        }
+
+        & form {
+            display: grid;
+            grid-template-columns: 1fr 6em;
+            align-content: start;
+            align-items: start;
+        }
+
+        & #make-log {
+            & > pre {
+                max-width: 20em;
+                overflow: auto;
+            }
+        }
+    }
+
+    & #editor {
+        overflow-x: hidden;
+        flex-grow: 1;
+        flex-basis: var(--editor-size);
+        max-height: 85vh;
+        grid-area: editor;
+        
+        & #editor-controls {
+            position: sticky;
+            top: 0;
+            display: flex;
+            gap: var(--spacing);
+            justify-content: space-between;
+
+            & > details {
+                text-align: right;
+
+                & > summary {
+                    user-select: none;
+                }
+
+                & button {
+                    margin: var(--half-spacing) 0;
+                }
+            }
+            background: white;
+            z-index: 1;
+        }
+
+        & #code-editor {
+            display: block;
+            max-width: 50vw;
+            padding-bottom: 10em;
+        }
+    }
+
+    & #preview {
+        display: flex;
+        flex-direction: column;
+        grid-area: preview;
+
+        &[open] {
+          flex-grow: 1;
+          flex-shrink: 1;
+          flex-basis: calc(100% - var(--editor-size));
+        }
+
+        & > summary {
+          text-align: right;
+        }
+        
+        & > iframe {
+            width: 100%;
+            height: calc(100% - 3em);
+            border: none;
+        }
+        
+        &[closed] > iframe {
+            display: none;
+        }
+    }
+}
+
+#file-form {
+    overflow: auto;
+    max-width: 100%;
+}
+@media (max-width: 100ch) {
+    html {
+        font-size: min(3vw, 16px);
+    }
+    body {
+      grid-template-columns: calc(100svw - var(--spacing));
+    }
+    .think-editor {
+        overflow: visible;
+        grid-template:
+          "nav"
+          "log"
+          "editor"
+          "preview"
+        ;
+
+        & > * ~ * {
+            border-top: medium solid #888;
+            margin-top: var(--spacing);
+        }
+
+        & nav {
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            & form {
+                flex-grow: 1;
+            }
+
+            & #file-tree {
+                max-height: 7em;
+            }
+        }
+
+        & #editor {
+            overflow: auto;
+            & #code-editor {
+                max-width: none;
+            }
+        }
+
+        & #preview {
+            height: 100vh;
+        }
+    }
+}