brush picker!

static/index.css

@@ -1,6 +1,12 @@
 /* index.css - styles for index.html and generally main parts of the app
    For shared styles (such as color definitions) check out base.css. */
 
+* {
+    /* On the main page, we don't really want to permit selecting things.
+       It comes off as janky-looking. */
+    user-select: none;
+}
+
 /* Main container layout */
 
 html {
@@ -90,9 +96,17 @@ main {
                 pointer-events: auto;
             }
 
+            & > .docked {
+                display: flex;
+                flex-direction: column;
+
+                & > * {
+                    pointer-events: auto;
+                }
+            }
+
             & > .docked > rkgk-brush-editor {
                 max-height: 100%;
-                pointer-events: auto;
             }
 
             & > .floating {
@@ -144,25 +158,47 @@ main {
 /* Resize handle */
 
 rkgk-resize-handle {
+    --width: 16px;
+    --line-width: 2px;
+
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+
+    &[data-direction="horizontal"] {
+        width: 100%;
+        height: var(--width);
+        flex-direction: column;
+
+        cursor: row-resize;
+
+        & > .visual {
+            width: 100%;
+            height: var(--line-width);
+        }
+    }
+
     &[data-direction="vertical"] {
-        display: block;
-        width: 16px;
+        width: var(--width);
         height: 100%;
+        flex-direction: row;
 
         cursor: col-resize;
 
         & > .visual {
-            width: 2px;
+            width: var(--line-width);
             height: 100%;
-            background-color: var(--color-brand-blue);
-            margin: 0 auto;
-            opacity: 0%;
         }
+    }
 
-        &:hover > .visual,
-        &.dragging > .visual {
-            opacity: 100%;
-        }
+    & > .visual {
+        background-color: var(--color-brand-blue);
+        opacity: 0%;
+    }
+
+    &:hover > .visual,
+    &.dragging > .visual {
+        opacity: 100%;
     }
 }
 
@@ -223,6 +259,81 @@ rkgk-reticle-cursor {
     }
 }
 
+/* Brush box */
+
+rkgk-brush-box.rkgk-panel {
+    --button-size: 56px;
+
+    height: var(--height);
+    padding: 12px;
+
+    & > .brushes {
+        display: grid;
+        grid-template-columns: repeat(
+            auto-fit,
+            minmax(var(--button-size), 1fr)
+        );
+
+        max-height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        & > button {
+            padding: 0;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            width: 100%;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            overflow: hidden;
+            white-space: nowrap;
+
+            &.current {
+                border-color: var(--color-brand-blue);
+            }
+
+            & > rkgk-brush-preview {
+                width: var(--button-size);
+                aspect-ratio: 1 / 1;
+                background: none;
+            }
+
+            & > .label {
+                margin: 0;
+                font-size: 80%;
+            }
+
+            &.save-button {
+                display: none; /* visible when current brush is modified */
+
+                & > .icon {
+                    width: var(--button-size);
+                    height: var(--button-size);
+                }
+
+                & > .icon,
+                & > .label {
+                    opacity: 35%;
+                }
+            }
+        }
+    }
+
+    &.unsaved > .brushes {
+        & > .current > .label::after {
+            content: "*";
+        }
+
+        & > .save-button {
+            display: flex;
+        }
+    }
+}
+
 /* Code editor */
 
 rkgk-code-editor {
@@ -258,8 +369,6 @@ rkgk-code-editor {
     }
 
     & > .layer-gutter {
-        user-select: none;
-
         counter-reset: line;
 
         color: transparent;
@@ -318,10 +427,18 @@ rkgk-code-editor {
         resize: none;
         white-space: pre-wrap;
         border: none;
+        background: none;
 
         &:focus {
+            /* The outline is displayed on the parent element to also surround the gutter. */
             outline: none;
         }
+
+        &::selection {
+            /* The selection color has to be overridden for a good contrast ratio between text and
+               the selection. */
+            background-color: rgba(from var(--color-brand-blue) r g b / 0.3);
+        }
     }
 
     &:has(textarea:focus) {
@@ -341,6 +458,11 @@ rkgk-brush-editor.rkgk-panel {
 
     position: relative;
 
+    & > .name {
+        margin-bottom: 4px;
+        font-weight: bold;
+    }
+
     & > .text-area {
         display: block;
         width: 100%;
@@ -389,8 +511,12 @@ rkgk-brush-preview {
     border-radius: 4px;
 
     & > canvas {
+        display: block;
         border-radius: 4px;
 
+        max-width: 100%;
+        height: auto;
+
         /* The brush preview doesn't scale with DPI as easily as the canvas renderer does,
            so instead we pixelate it. */
         image-rendering: pixelated;
@@ -487,8 +613,6 @@ rkgk-zoom-indicator.rkgk-panel {
         line-height: 1;
         width: 6ch;
 
-        user-select: none;
-
         font-variant-numeric: tabular-nums;
         text-align: center;
     }
@@ -531,6 +655,51 @@ rkgk-connection-status {
     }
 }
 
+/* Context menu */
+
+rkgk-context-menu-space {
+    pointer-events: none;
+
+    & > rkgk-context-menu {
+        pointer-events: all;
+    }
+}
+
+rkgk-context-menu.rkgk-panel {
+    width: max-content;
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 4px;
+    overflow: clip;
+
+    & > p {
+        margin: 0;
+        padding: 6px 12px;
+
+        &.small {
+            padding: 4px 12px;
+            font-size: 80%;
+            opacity: 75%;
+        }
+    }
+
+    & > button {
+        padding: 6px 12px;
+
+        border: none;
+        border-radius: 0;
+
+        text-align: left;
+    }
+
+    & > hr {
+        margin: 0;
+        width: 100%;
+        border-bottom: 1px solid var(--color-panel-border);
+    }
+}
+
 /* Menu bar */
 
 .menu-bar {