update kv viewer.

Author: Jaxkr

docs/guide/kv.mdx

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 999
 title: Key-Value (KV) Storage
 ---
 
@@ -58,7 +57,11 @@ export default class KvDebugger extends UIBehavior {
     const css = `
 div.container {
   width: 100%;
-  height: 100%;
+  position: absolute;
+  bottom: 0px;
+  min-height: 300px;
+  max-height: 500px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -72,32 +75,106 @@ div.container {
   & div.selector {
     display: flex;
     gap: 1rem;
+    align-items: center;
+
+    & label {
+      color: #e6e8ee;
+      font-weight: 600;
+    }
+
+    & select {
+      background: #1f2330;
+      color: #e6e8ee;
+      border: 1px solid rgba(255,255,255,0.2);
+      border-radius: 8px;
+      padding: 0.35rem 0.5rem;
+    }
   }
 
   & div.data {
     flex-grow: 1;
-    overflow-y: scroll;
+    overflow-y: auto;
     padding-bottom: 2rem;
+    padding-right: 2rem;
+
 
     & > span {
       font-style: italic;
+      color: #c8ccdb;
+    }
+
+    & table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+      background: #1f2330;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    & thead {
+      position: sticky;
+      top: 0;
+      background: #2b3040;
+      z-index: 1;
+    }
+
+    & th, & td {
+      text-align: left;
+      vertical-align: top;
+      padding: 0.6rem 0.8rem;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      color: #e6e8ee;
+    }
+
+    & th:nth-child(1), & td:nth-child(1) {
+      width: 25%;
+      font-weight: 700;
+      word-break: break-all;
+    }
+
+    & th:nth-child(2), & td:nth-child(2) {
+      width: 45%;
+    }
+
+    & th:nth-child(3), & th:nth-child(4),
+    & td:nth-child(3), & td:nth-child(4) {
+      width: 15%;
+      text-align: center;
+    }
+
+    & code, & pre {
+      margin: 0;
+      padding: 0;
+      font-family: var(--font-mono), monospace;
+      font-size: 0.9rem;
+      color: #e6e8ee;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    & pre {
+      background: transparent;
+    }
+
+    & button {
+      padding: 0.25rem 0.6rem;
+      border-radius: 6px;
+      border: 1px solid rgba(255,255,255,0.2);
+      background: #2f3545;
+      color: #fff;
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: background 0.15s ease, opacity 0.15s ease;
+    }
+
+    & button:hover {
+      background: #3f465a;
+      opacity: 1;
     }
 
-    & > div {
-      display: grid;
-      grid-template-columns: max-content auto;
-      gap: 0.4rem 1rem;
-
-      & > *:nth-child(1), & > *:nth-child(2) {
-        font-weight: bold;
-      }
-
-      & code, & pre {
-        margin: 0;
-        padding: 0;
-        font-family: var(--font-mono), monospace;
-        font-size: 0.9rem;
-      }
+    & button:active {
+      transform: scale(0.95);
     }
   }
 }
@@ -152,25 +229,45 @@ button.kv-toggle:active { transform: scale(0.96); }
                 this.#player = ev.target.value;
                 this.#update();
               }}
+              value={this.#player}
             >
               <option value="">[server]</option>
-              {[...this.#players].map((player) => <option value={player}>{player}</option>)}
+              {[...this.#players].map((player) => (
+                <option id={player} value={player}>{player}</option>
+              ))}
             </select>
           </div>
 
           <div className="data">
             {entries.length === 0 ? <span>No data stored.</span> : (
-              <div>
-                <span>Key</span>
-                <span>Value</span>
-
-                {entries.map(([key, value]) => (
-                  <div style={{ display: "contents" }}>
-                    <code>{key}</code>
-                    <pre>{JSON.stringify(value)}</pre>
-                  </div>
-                ))}
-              </div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Key</th>
+                    <th>Value</th>
+                    <th>Edit</th>
+                    <th>Delete</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {entries.map(([key, value]) => (
+                    <tr id={key}>
+                      <td>
+                        <code>{key}</code>
+                      </td>
+                      <td>
+                        <pre>{JSON.stringify(value, null, 2)}</pre>
+                      </td>
+                      <td>
+                        <button>Edit</button>
+                      </td>
+                      <td>
+                        <button>Delete</button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             )}
           </div>
         </div>

docs/guide/rendering.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 999
----
-
 # Rendering with Pixi
 
 :::info

docs/guide/user-interface.mdx

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 999
 title: User Interface
 ---