App shell as the canvas draws it, full lazy Cache tree, styles aligned with the parent projects

Shell: collapsible rail, DNS/Server groups with pins, always-on header with
breadcrumbs and server status, Ctrl/Cmd+K command palette.
Cache: left column is a lazily expanded tree of every zone, right column the
selected node's records; both columns are ReUI Frames.
Styles: dark variant follows data-theme (field and outline fills), 32 px selects,
36 px segmented strip, 40 px caption table heads, 56 px rows, 20/24/32 page padding.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/ui/EditableTable.module.css

@@ -19,12 +19,13 @@ Administration, with the same values copied by hand.
 
 .table th {
   text-align: left;
-  font-size: var(--text-size);
-  font-weight: var(--text-weight);
-  letter-spacing: var(--text-tracking);
-  text-transform: uppercase;
+  /* The DataGrid head the other tables wear: a caption, not small caps. */
+  font-size: var(--t-1);
+  font-weight: 500;
   color: var(--mute);
-  padding: 0 var(--s-5) var(--s-4) 0;
+  height: var(--row-header);
+  padding: 0 var(--s-5) 0 var(--s-5);
+  background: color-mix(in oklab, var(--pan2) 30%, transparent);
   border-bottom: 1px solid var(--line);
 }
 

src/ui/SectionHeader.module.css

@@ -29,7 +29,7 @@ magazine kicker, which is decoration, and this is navigation.
   margin: 0;
   font-size: var(--t-7);
   font-weight: 600;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.01em;
   color: var(--ink);
   word-break: break-word;
 }

src/ui/Segmented.tsx

@@ -30,7 +30,7 @@ export function Segmented<T extends string>({
 }) {
   return (
     <div
-      className="inline-flex max-w-full min-w-0 gap-0.5 overflow-x-auto rounded-lg bg-muted p-0.5 [scrollbar-width:none]"
+      className="inline-flex max-w-full min-w-0 gap-0.5 overflow-x-auto rounded-lg bg-muted p-[3px] [scrollbar-width:none]"
       role={asTabs ? 'tablist' : 'group'}
       aria-label={label}
     >
@@ -41,7 +41,7 @@ export function Segmented<T extends string>({
           className={cn(
             'flex-none rounded-md border-0 bg-transparent px-3 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50',
             'aria-pressed:bg-card aria-pressed:text-foreground aria-pressed:shadow-xs aria-selected:bg-card aria-selected:text-foreground aria-selected:shadow-xs',
-            compact ? 'h-6 text-xs' : 'h-7',
+            compact ? 'h-6 text-xs' : 'h-[30px]',
           )}
           role={asTabs ? 'tab' : undefined}
           aria-selected={asTabs ? o.id === active : undefined}

src/ui/Select.module.css

@@ -10,7 +10,7 @@ to weigh the same. What changes is that this one opens.
   gap: var(--s-6);
   width: 100%;
   min-height: var(--field-height);
-  padding: var(--s-5) var(--s-7);
+  padding: calc((var(--field-height) - var(--field-line) - 2px) / 2) var(--s-7);
   border: 1px solid var(--line-field);
   border-radius: var(--r-3);
   background-color: var(--field);

src/ui/Table.module.css

@@ -61,7 +61,7 @@ the tint.
 /* The last row carries no line: the panel border closes it. */
 .table tbody tr:last-child td { border-bottom: 0; }
 
-.table tbody tr { transition: background var(--t-fast); }
+.table tbody tr { transition: background var(--t-fast); height: 56px; }
 .table tbody tr:hover { background: var(--hover); }
 
 /*
@@ -383,6 +383,7 @@ line and count twice.
 */
 .stack[data-stacked] > tbody > tr,
 .stack[data-stacked] > tfoot > tr {
+  height: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -452,7 +453,7 @@ empty alternative text keeps a screen reader from reading it twice.
   font-size: var(--text-size);
   font-weight: var(--text-weight);
   letter-spacing: var(--text-tracking);
-  text-transform: uppercase;
+
   color: var(--mute);
   white-space: nowrap;
 }

src/ui/label.module.css

@@ -18,6 +18,6 @@ It is applied with `composes:`, not by copying it.
   font-size: var(--text-size);
   font-weight: var(--text-weight);
   letter-spacing: var(--text-tracking);
-  text-transform: uppercase;
+
   color: var(--mute);
 }