feat(server): add box file listing and download routes

Introduce `/box/:id` to render a box page with file metadata, plus
endpoints to download individual files and a “download all” ZIP. Add
helpers to safely list box contents, stream files into a ZIP response,
and infer MIME types/icons for better UI and correct downloads.feat(server): add box file listing and download routes

Introduce `/box/:id` to render a box page with file metadata, plus
endpoints to download individual files and a “download all” ZIP. Add
helpers to safely list box contents, stream files into a ZIP response,
and infer MIME types/icons for better UI and correct downloads.

static/css/box.css

@@ -0,0 +1,160 @@
+.box-window {
+    width: 640px;
+    height: 460px;
+}
+
+.box-toolbar {
+    display: flex;
+    gap: 8px;
+    height: 40px;
+    box-sizing: border-box;
+    padding: 6px 8px;
+}
+
+.box-toolbar-button {
+    width: 116px;
+}
+
+.box-address {
+    display: grid;
+    grid-template-columns: 58px minmax(0, 1fr);
+    align-items: center;
+    height: 28px;
+    box-sizing: border-box;
+    padding: 0 8px 6px;
+    gap: 6px;
+    font-size: 13px;
+    line-height: 13px;
+}
+
+.box-address code {
+    min-width: 0;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #000000;
+    background: #ffffff;
+    border-top: 1px solid #808080;
+    border-left: 1px solid #808080;
+    border-right: 1px solid #dfdfdf;
+    border-bottom: 1px solid #dfdfdf;
+    font-family: inherit;
+}
+
+.box-panel {
+    flex: 1;
+    min-height: 0;
+    margin: 0 8px 8px;
+    overflow: auto;
+}
+
+.box-file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
+    gap: 8px;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.box-file {
+    min-width: 0;
+    height: 96px;
+    display: grid;
+    grid-template-rows: 34px 18px 28px;
+    justify-items: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 8px 6px;
+    color: #000000;
+    text-decoration: none;
+}
+
+.box-file:hover,
+.box-file:focus-visible {
+    color: #ffffff;
+    background: #000078;
+    outline: 1px dotted #ffffff;
+    outline-offset: -3px;
+}
+
+.box-file-icon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    image-rendering: pixelated;
+}
+
+.box-file-name,
+.box-file-meta {
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.box-file-name {
+    font-size: 13px;
+    line-height: 13px;
+}
+
+.box-file-meta {
+    align-self: start;
+    color: #555555;
+    font-size: 11px;
+    line-height: 13px;
+}
+
+.box-file:hover .box-file-meta,
+.box-file:focus-visible .box-file-meta {
+    color: #ffffff;
+}
+
+.box-empty {
+    margin: 0;
+    padding: 12px;
+    color: #555555;
+    font-size: 13px;
+    line-height: 15px;
+}
+
+.box-statusbar {
+    grid-template-columns: 1fr 96px;
+}
+
+@media (max-width: 600px) {
+    main {
+        display: block;
+        min-height: 100dvh;
+    }
+
+    .box-window {
+        width: 100vw;
+        height: 100dvh;
+        border: 0;
+        box-shadow: none;
+    }
+
+    .box-titlebar {
+        height: 24px;
+        margin: 0;
+    }
+
+    .box-menu {
+        height: 26px;
+    }
+
+    .box-panel {
+        margin: 0 6px 8px;
+    }
+
+    .box-file-grid {
+        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+    }
+}