- moved grid rendering to feature

- re implemented file loading for order preservation
- added styling for grid
- implemented row selection POC

src/features/file/grid.css

@@ -0,0 +1,106 @@
+.table {
+    position: relative;
+    display: grid;
+    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
+    align-content: start;
+    padding-inline: 1px;
+    margin-inline: -1px;
+
+    block-size: 100%;
+    overflow: clip auto;
+
+    background-color: var(--surface-1);
+
+    & input[type="checkbox"] {
+        margin: .1em;
+    }
+
+
+    & textarea {
+        resize: vertical;
+        min-block-size: 2em;
+        max-block-size: 50em;
+    }
+
+    & .cell {
+        display: grid;
+        place-content: center stretch;
+        padding: .5em;
+    }
+
+    & > :is(header, main, footer) {
+        grid-column: span calc(2 + var(--columns));
+        display: grid;
+        grid-template-columns: subgrid;
+    }
+
+    & > header {
+        position: sticky;
+        inset-block-start: 0;
+        background-color: inherit;
+    }
+
+    & label {
+        --bg: var(--text);
+        --alpha: 0;
+        grid-column: span calc(2 + var(--columns));
+        display: grid;
+        grid-template-columns: subgrid;
+        border: 1px solid transparent;
+        background-color: color(from var(--bg) srgb r g b / var(--alpha));
+
+        &:has(> .cell > :checked) {
+            --bg: var(--info);
+            --alpha: .1;
+            border-color: var(--bg);
+
+            & span {
+                font-variation-settings: 'GRAD' 1000;
+            }
+
+            & + :has(> .cell> :checked) {
+                border-block-start-color: transparent;
+            }
+
+            &:has(+ label > .cell > :checked) {
+                border-block-end-color: transparent;
+            }
+        }
+
+        &:hover {
+            --alpha: .2 !important;
+        }
+    }
+
+    & details {
+        display: contents;
+
+        &::details-content {
+            grid-column: span calc(2 + var(--columns));
+            display: grid;
+            grid-template-columns: subgrid;
+        }
+
+        &:not([open])::details-content {
+            display: none;
+        }
+
+        & > summary {
+            grid-column: 2 / span calc(1 + var(--columns));
+
+            &.cell {
+                padding-inline-start: calc((var(--depth) + 1) * 1em);
+            }
+        }
+
+        & > label > .cell > span {
+            padding-inline-start: calc(var(--depth) * 1.25em);
+        }
+    }
+}
+
+@property --depth {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}