feat: add miller document layout

apps/server/internal/httpserver/static/site.css

@@ -79,27 +79,99 @@ code {
   padding: 2rem 0 4rem;
 }
 
-.hero-panel,
-.doc-list,
 .document-shell,
-.error-panel {
+.error-panel,
+.empty-preview {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--panel);
   box-shadow: var(--shadow);
 }
 
-.hero-panel,
-.error-panel {
+.error-panel,
+.empty-preview {
   padding: 2rem;
 }
 
-.doc-list,
 .document-shell {
-  margin-top: 1rem;
   padding: 1.5rem 2rem;
 }
 
+.workspace-shell {
+  display: grid;
+  grid-template-columns: minmax(20rem, 0.42fr) minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.workspace-shell--empty {
+  grid-template-columns: minmax(22rem, 1fr) minmax(18rem, 0.45fr);
+}
+
+.miller-browser {
+  display: grid;
+  grid-auto-columns: minmax(12rem, 1fr);
+  grid-auto-flow: column;
+  overflow-x: auto;
+  min-height: 22rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.miller-column {
+  min-width: 12rem;
+  border-left: 1px solid var(--border);
+}
+
+.miller-column:first-child {
+  border-left: 0;
+}
+
+.miller-column h2 {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 0.75rem 0.85rem;
+  border-bottom: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--muted);
+  font: 700 0.76rem/1.2 ui-monospace, SFMono-Regular, monospace;
+  text-transform: uppercase;
+}
+
+.miller-column ul {
+  margin: 0;
+  padding: 0.35rem;
+  list-style: none;
+}
+
+.miller-column a {
+  display: flex;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.45rem 0.55rem;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.miller-column a:hover,
+.miller-column a.is-active {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.miller-column a span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .eyebrow {
   margin: 0 0 0.8rem;
   color: var(--accent);
@@ -114,26 +186,12 @@ code {
   line-height: 1.7;
 }
 
-.doc-list ul,
 .tag-list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.doc-list li {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
-  padding: 0.75rem 0;
-  border-top: 1px solid var(--border);
-}
-
-.doc-list li:first-child {
-  border-top: 0;
-}
-
 .tag-list {
   display: flex;
   flex-wrap: wrap;
@@ -142,14 +200,46 @@ code {
 
 .tag-list a {
   display: inline-flex;
-  padding: 0.35rem 0.65rem;
+  padding: 0.15rem 0.4rem;
   border-radius: 999px;
   background: var(--accent-soft);
   text-decoration: none;
 }
 
-.hash {
+.document-meta {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.document-meta h1 {
+  margin: 0 0 0.75rem;
+  font-size: 1.85rem;
+  line-height: 1.1;
+}
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.meta-grid div {
+  min-width: 0;
+}
+
+.meta-grid dt {
+  margin: 0 0 0.2rem;
   color: var(--muted);
+  font: 700 0.68rem/1.2 ui-monospace, SFMono-Regular, monospace;
+  text-transform: uppercase;
+}
+
+.meta-grid dd {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.86rem;
   overflow-wrap: anywhere;
 }
 
@@ -221,8 +311,20 @@ code {
     padding: 0.75rem 0;
   }
 
-  .doc-list,
+  .workspace-shell,
+  .workspace-shell--empty {
+    grid-template-columns: 1fr;
+  }
+
+  .miller-browser {
+    min-height: 14rem;
+  }
+
   .document-shell {
     padding: 1.25rem;
   }
+
+  .meta-grid {
+    grid-template-columns: 1fr;
+  }
 }