diff --git a/package-lock.json b/package-lock.json
index dfe83206..4e3a32f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
   "name": "mashlib",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mashlib",
-      "version": "2.2.0",
+      "version": "2.2.1",
       "license": "MIT",
       "dependencies": {
         "pane-registry": "^3.1.1",
-        "rdflib": "^2.3.8",
+        "rdflib": "^2.3.9",
         "solid-logic": "^4.0.7",
-        "solid-panes": "^4.4.0",
-        "solid-ui": "^3.1.0"
+        "solid-panes": "^4.4.1",
+        "solid-ui": "^3.1.1"
       },
       "devDependencies": {
         "@babel/cli": "^7.28.6",
@@ -2462,9 +2462,9 @@
       "license": "MIT"
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.5.1.tgz",
-      "integrity": "sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
+      "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@lit/reactive-element": {
@@ -2679,6 +2679,30 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@solid-data-modules/contacts-rdflib": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@solid-data-modules/contacts-rdflib/-/contacts-rdflib-0.7.1.tgz",
+      "integrity": "sha512-jjSVCyXjOdMlPEdTysboLg1Tc8E3jDFlbEIv7mjnNkFK61UdI/BfnNPT5XnNSUSiZYBZklUwsniJhclFhoZmBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@solid-data-modules/rdflib-utils": "^0.2.0"
+      },
+      "peerDependencies": {
+        "rdflib": "2.x"
+      }
+    },
+    "node_modules/@solid-data-modules/rdflib-utils": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-data-modules/rdflib-utils/-/rdflib-utils-0.2.0.tgz",
+      "integrity": "sha512-WXpyiMmgmeeTHUz/jFGGBy02GxClxT2uew3eUWh/XOQQQeOxlzYFRO0tOa3Nv9/3Y1qcAyS7tSaW5x42Q8WPLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "short-unique-id": "^5.2.0"
+      },
+      "peerDependencies": {
+        "rdflib": "2.x"
+      }
+    },
     "node_modules/@solid/better-simple-slideshow": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@solid/better-simple-slideshow/-/better-simple-slideshow-0.1.0.tgz",
@@ -5179,9 +5203,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.0.tgz",
-      "integrity": "sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.7.tgz",
+      "integrity": "sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -7819,9 +7843,9 @@
       }
     },
     "node_modules/lit": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz",
-      "integrity": "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.3.tgz",
+      "integrity": "sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@lit/reactive-element": "^2.1.0",
@@ -7841,9 +7865,9 @@
       }
     },
     "node_modules/lit-html": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.2.tgz",
-      "integrity": "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.3.tgz",
+      "integrity": "sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
@@ -7974,9 +7998,9 @@
       }
     },
     "node_modules/marked": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.6.tgz",
-      "integrity": "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==",
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.4.tgz",
+      "integrity": "sha512-c/BTaKzg0G6ezQx97DAkYU7k0HM6ys0FqYeKBL6hlBByZwy+ycA1+f0vDdjMHKKeEjdgkx0GOv9Il6D+85cOqA==",
       "license": "MIT",
       "bin": {
         "marked": "bin/marked.js"
@@ -9297,20 +9321,21 @@
       "license": "MIT"
     },
     "node_modules/profile-pane": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/profile-pane/-/profile-pane-3.2.1.tgz",
-      "integrity": "sha512-8dvNWU5IZEL1lDtPJERPJaxzbZuknZARwE9WZiqUR+Pa6k5CFoKdusPS7s4id6QSrAdU9y/XJ72xKX5WiEbmaA==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/profile-pane/-/profile-pane-3.2.2.tgz",
+      "integrity": "sha512-3Uswk6wOIaL3jG2lfm5npbBR7+UNQtieewCArH1IKOb12vK3/93GUomLFnpxE9nRe+MbRmwMxk1TNoAeZU8kHg==",
       "license": "MIT",
       "dependencies": {
-        "lit-html": "^3.3.2",
-        "pane-registry": "^3.1.0",
+        "@solid-data-modules/contacts-rdflib": "^0.7.1",
+        "lit-html": "^3.3.3",
+        "pane-registry": "^3.1.1",
         "qrcode": "^1.5.4",
         "validate-color": "^2.2.4"
       },
       "peerDependencies": {
         "rdflib": "^2.3.6",
         "solid-logic": "^4.0.6",
-        "solid-ui": "^3.1.0"
+        "solid-ui": "^3.1.1"
       }
     },
     "node_modules/prop-types": {
@@ -9539,9 +9564,9 @@
       }
     },
     "node_modules/rdflib": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/rdflib/-/rdflib-2.3.8.tgz",
-      "integrity": "sha512-moogxjqUHqZt+l6qbb0xZm7Cy+iwBwHhBev0N8/zkrCX+Q1iuMLrflUNxbeJO/f5E0XZ7AhyJjPrQkB9smYqIA==",
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/rdflib/-/rdflib-2.3.9.tgz",
+      "integrity": "sha512-6HnEQ22QzgqPW2/R8y5IaeQoXnho6U+ovU1q/ZF556zEnSK4buwhw8/CDdRDwIHZQh5+PAncQxUhluO3JmguJQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.29.2",
@@ -9557,9 +9582,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.5",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
-      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
+      "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9572,15 +9597,15 @@
       "license": "MIT"
     },
     "node_modules/react-dom": {
-      "version": "19.2.5",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
-      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
+      "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.5"
+        "react": "^19.2.6"
       }
     },
     "node_modules/react-is": {
@@ -10418,6 +10443,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/short-unique-id": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-5.3.2.tgz",
+      "integrity": "sha512-KRT/hufMSxXKEDSQujfVE0Faa/kZ51ihUcZQAcmP04t00DvPj7Ox5anHke1sJYUtzSuiT/Y5uyzg/W7bBEGhCg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "short-unique-id": "bin/short-unique-id",
+        "suid": "bin/short-unique-id"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -10556,55 +10591,56 @@
       "license": "MIT"
     },
     "node_modules/solid-panes": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/solid-panes/-/solid-panes-4.4.0.tgz",
-      "integrity": "sha512-XQaHNIaAkKtcl0/l1CHUQJmSUgNgRpyHC2nbjYFchU67t1uiTWveBRyjnHRz/uyPPw57ieMFF/a7ZgXfj0vnTw==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/solid-panes/-/solid-panes-4.4.1.tgz",
+      "integrity": "sha512-YTMLhhFGvqdn1xRxxUDbmDQHayDfulLw/BCUw2qJoW+nJwte0NO3SzQBFyxF7nvSw5dkneyM+2bTU3UbUHtAZQ==",
       "license": "MIT",
       "dependencies": {
         "@solid/better-simple-slideshow": "^0.1.0",
         "activitystreams-pane": "^1.0.2",
         "chat-pane": "^3.0.3",
         "contacts-pane": "^3.2.0",
-        "dompurify": "^3.3.1",
+        "dompurify": "^3.4.4",
         "folder-pane": "^3.1.0",
         "issue-pane": "^3.0.2",
-        "marked": "^17.0.3",
+        "lit-html": "^3.3.2",
+        "marked": "^18.0.3",
         "meeting-pane": "^3.0.2",
         "mime-types": "^3.0.2",
-        "pane-registry": "^3.1.0",
-        "profile-pane": "^3.2.1",
+        "pane-registry": "^3.1.1",
+        "profile-pane": "^3.2.2",
         "solid-namespace": "^0.5.4",
-        "solid-ui": "^3.1.0",
+        "solid-ui": "^3.1.1",
         "source-pane": "^3.1.0"
       }
     },
     "node_modules/solid-ui": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/solid-ui/-/solid-ui-3.1.0.tgz",
-      "integrity": "sha512-IKNooyEcJ3IduJqGCw24UC0xPpCCQZVFXzlPC8jcicO7R2FM9GHgwVhpeDTRDl5E/KpoC+h6HCVxGqd/qkfMag==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/solid-ui/-/solid-ui-3.1.1.tgz",
+      "integrity": "sha512-J2ST8rKH1tMNdPI80X5C6JrJ/I4vr7l0uRXKQRNkQw3ogK/ajgJ66H+bkaHiFH8N83SchCovGsZ5hl2uq7mFPA==",
       "license": "MIT",
       "dependencies": {
-        "@noble/curves": "^2.0.1",
-        "@noble/hashes": "^2.0.1",
+        "@noble/curves": "^2.2.0",
+        "@noble/hashes": "^2.2.0",
         "escape-html": "^1.0.3",
-        "lit": "^3.3.2",
+        "lit": "^3.3.3",
         "mime-types": "^3.0.2",
-        "pane-registry": "^3.1.0",
+        "pane-registry": "^3.1.1",
         "solid-namespace": "^0.5.4",
-        "uuid": "^13.0.0"
+        "uuid": "^14.0.0"
       },
       "optionalDependencies": {
         "fsevents": "*"
       },
       "peerDependencies": {
-        "rdflib": "^2.3.6",
-        "solid-logic": "^4.0.6"
+        "rdflib": "^2.3.8",
+        "solid-logic": "^4.0.7"
       }
     },
     "node_modules/solid-ui/node_modules/uuid": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
-      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.0.tgz",
+      "integrity": "sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
diff --git a/package.json b/package.json
index 91296747..3a08f3ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mashlib",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Data mashup library",
   "main": "dist/mashlib.js",
   "files": [
@@ -55,10 +55,10 @@
   "homepage": "https://github.com/solidos/mashlib",
   "dependencies": {
     "pane-registry": "^3.1.1",
-    "rdflib": "^2.3.8",
+    "rdflib": "^2.3.9",
     "solid-logic": "^4.0.7",
-    "solid-panes": "^4.4.0",
-    "solid-ui": "^3.1.0"
+    "solid-panes": "^4.4.1",
+    "solid-ui": "^3.1.1"
   },
   "overrides": {
     "rdflib": "$rdflib",
diff --git a/src/databrowser.html b/src/databrowser.html
index 716cfd79..949de74a 100644
--- a/src/databrowser.html
+++ b/src/databrowser.html
@@ -7,6 +7,29 @@
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         panes.runDataBrowser()
+
+        var header = document.getElementById('mainSolidUiHeader')
+        if (!header) return
+
+        var syncHeaderHeight = function () {
+          var height = header.getBoundingClientRect().height
+          if (height > 0) {
+            var rootFontSize = parseFloat(
+              getComputedStyle(document.documentElement).fontSize
+            )
+            document.documentElement.style.setProperty(
+              '--app-header-height',
+              (height / rootFontSize) + 'rem'
+            )
+          }
+        }
+
+        syncHeaderHeight()
+        if ('ResizeObserver' in window) {
+          new ResizeObserver(syncHeaderHeight).observe(header)
+        } else {
+          window.addEventListener('resize', syncHeaderHeight)
+        }
       })
     </script>
   </head>
@@ -31,13 +54,13 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+    <div class="app-main" tabindex="-1" aria-live="polite">
       <div class="app-shell">
         <aside id="NavMenu" class="app-nav" aria-label="Application menu" hidden>
           <div id="NavMenuContent" class="menu-content"></div>
         </aside>
 
-        <div class="app-view">
+        <main id="MainContent" class="app-view">
           <!--
             Outline view: the primary RDF-subject browser.
             JS appends property-table <div>s (not <tr>s) here.
@@ -66,11 +89,11 @@
           >
           <!-- globalAppTabs appends tab widget here -->
           </section>
-        </div> <!-- .app-view -->
+        </main> <!-- .app-view -->
       </div> <!-- .app-shell -->
 
       <div id="MenuOverlay" class="menu-overlay" hidden aria-hidden="true"></div>
-    </main>
+    </div>
 
     <!-- Footer — populated by solid-ui initFooter() -->
     <footer id="PageFooter" role="contentinfo">
diff --git a/src/index.ts b/src/index.ts
index 3505746f..5ce2d05d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -67,11 +67,14 @@ global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
 
   // Authenticate the user
   SolidLogic.authn.checkUser()
-    .then(() => panes.initMainPage(SolidLogic.solidLogicSingleton.store, uri))
+    .then(() => panes.initMainPage(
+      SolidLogic.solidLogicSingleton.store,
+      uri,
+      buildRenderEnvironment()
+    ))
     .then(() => {
-      // Inject render environment into pane context after outliner exists
+      // Re-sync in case layout/theme changed between snapshot and outliner init
       syncEnvironmentToContext('initMainPage')
-      
     })
     .catch(() => undefined)
 
diff --git a/src/styles/mash-utilities.css b/src/styles/mash-utilities.css
index 33e621f2..abeffb06 100644
--- a/src/styles/mash-utilities.css
+++ b/src/styles/mash-utilities.css
@@ -595,7 +595,7 @@
   border-radius: var(--border-radius-base, 0.3125rem);
   border: 1px solid var(--gray-400, #99A1AF);
   background: var(--white, #FFF);
-  color: var(--gray-900, #101828);
+  color: var(--color-text-subheading, var(--gray-900, #101828));
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-medium, 500);
   padding: var(--spacing-2xs, 0.625rem);
@@ -614,7 +614,7 @@
 }
 
 .label {
-  color: var(--gray-600, #4A5565);
+  color: var(--color-text-secondary, #4A5565);
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-regular, 400);
 }
diff --git a/src/styles/mash.css b/src/styles/mash.css
index e89ed35c..baca80a9 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -6,10 +6,10 @@
 @import url("./mash-utilities.css");
 
 :root {
-  --app-header-height: 3.8rem;
+  --app-header-height: 3.75rem;
 }
 
-html, body {
+html {
   margin: 0;
   padding: 0;
   font-family: var(--font-family-base);
@@ -20,9 +20,24 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  min-height: auto;
+  min-width: 375px;
+}
+
+body {
+  margin: 0;
+  padding-top: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
+  height: auto;
+  min-height: 100dvh;
+  min-width: 375px;
+  overflow: auto;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: inherit;
+  color: inherit;
 }
 
 #PageHeader,
@@ -46,6 +61,7 @@ html, body {
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
   display: flex;
+  flex-direction: column;
 }
 
 #PageFooter {
@@ -54,12 +70,22 @@ html, body {
 
 
 /* ── New responsive app nav layout ── */
+.app-main {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
+  min-height: 0;
+  margin-top: var(--app-header-height);
+  height: auto;
+  min-height: calc(100dvh - var(--app-header-height));
+  top: auto;
+}
+
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill #MainContent (display:flex row container) */
+  flex: 1;          /* expand to fill .app-main */
   min-width: 0;     /* prevent overflow in flex context */
-  min-height: calc(100vh - var(--app-header-height) - 2.5rem); /* header + footer space */
-  margin-top: var(--app-header-height);
+  min-height: 0;    /* allow children to shrink correctly */
 }
 
 .app-nav {
@@ -75,7 +101,7 @@ html, body {
 
 .app-view {
   flex: 1;
-  padding: 1rem;
+  padding: 0 1rem 1rem;  /* no top padding — sit flush under fixed header */
   min-width: 0;
 }
 
@@ -109,7 +135,7 @@ html, body {
   }
 
   .app-view {
-    padding: 1rem 0.75rem;
+    padding: 0 0.75rem 1rem;
   }
 
   #MenuToggleBtn {
@@ -707,114 +733,11 @@ div.exceptionPane pre {
   background-color: var(--color-cv-pane-bg);
 }
 
-/******************* Data Content Pane *****************/
-
-div.dataContentPane {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em; /* color: #404; */
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.nestedFormula {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em;
-  border-radius: 0.5em;
-}
-
-div.dataContentPane td {
-  padding-left: 0.2em;
-  padding-top: 0.1em;
-  padding-right: 0.2em;
-  padding-bottom: 0.05em;
-  /*	        vertical-align: middle; /*@@ Lalana's request*/
-  vertical-align: top; /*@@ Tims's request*/
-  /* With middel, you can't tell what is with what */
-  /* background-color: white; */
-}
-
-div.dataContentPane tr {
-  margin-bottom: 0.6em;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-.dataContentPane a {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:link {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:visited {
-  color: var(--color-text-link-visited);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:hover {
-  color: var(--color-text-link-hover);
-  text-decoration: underline;
-  font-weight: bold;
-}
-.dataContentPane a:active {
-  color: var(--color-text-link-active);
-  text-decoration: none;
-}
-
-.dataContentPane.embeddedText {
-  white-space: pre-wrap;
-}
-
-/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
-div.dataContentPane td.pred {
-  min-width: 12em;
-} /* Keep aligned with others better */
-div.dataContentPane td.pred a {
-  color: var(--color-text-muted);
-} /* Greyish as form field names have less info value */
-
-/* .collectionAsTables  {border-right: green 1px; margin: 0.2em;} */
-
-div.n3Pane {
-  padding: 1em;
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  color: var(--color-text-blue);
-}
-
 .imageView {
   border: 1em var(--color-background);
   margin: 1em;
 }
 
-.n3Pane pre {
-  font-size: 120%;
-}
-
-.RDFXMLPane pre {
-  font-size: 120%;
-}
-
-div.RDFXMLPane {
-  padding: 1em;
-  border-top: solid 2px var(--color-data-pane-border-top);
-  border-left: solid 2px var(--color-data-pane-border-top);
-  border-bottom: solid 2px var(--color-data-pane-border-side);
-  border-right: solid 2px var(--color-data-pane-border-side);
-  color: var(--color-text-brown);
-}
-
 /* Generic things useful anywhere */
 
 img.hideTillHover {
@@ -1233,6 +1156,8 @@ td.undetermined table {
   margin: 0.2em;
 }
 
+/* The following two classes were used for defaultPane
+I'm not sure if they are used anywhere else so i'm not deleting. */
 div.bottom-border {
   border: 0.2em solid transparent;
   width: 100%;
@@ -1607,10 +1532,6 @@ th {
   padding: var(--spacing-sm);
 }
 
-td {
-  padding: var(--spacing-sm);
-}
-
 /* Focus trap for modals */
 .focus-trap {
   position: fixed;
@@ -1747,11 +1668,11 @@ label:focus-visible {
 }
 
 html[data-layout="mobile"] #PageBody {
-  min-height: var(--app-height, 100dvh);
+  min-height: auto;
 }
 
 html[data-layout="mobile"] #MainContent {
-  overscroll-behavior-x: contain;
+  overscroll-behavior: x contain;
 }
 
 /* END of Generated by AI */
\ No newline at end of file
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index edd0cf95..a8f444b4 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -7,8 +7,19 @@ html[data-theme="dark"] {
   /* Background and Text */
   --color-background: #1e1e1e;
   --color-text: #e0e0e0;
-  --color-text-secondary: #999;
+  --color-text-secondary: var(--gray-400, #99A1AF);
+  --color-text-subheading: var(--gray-100, #F3F4F6);
+  --color-text-detail: var(--gray-300, #D1D5DC);
+  --color-text-empty-state: var(--gray-200, #E5E7EB);
+  --color-icon-muted: var(--gray-400, #99A1AF); 
+  --color-text-overlay: var(--gray-100, #F3F4F6);
+  --color-text-accent-subtle: var(--gray-100, #F3F4F6);
+  --color-text-strong: var(--gray-100, #F3F4F6);
+  --color-text-strong-secondary: var(--gray-200, #E5E7EB);
   --color-text-light: #555;
+  --color-text-ui: var(--gray-800, #1E2939);
+  --color-text-control: var(--gray-100, #F3F4F6);
+  --color-text-primary: var(--gray-300, #D1D5DC);
   --color-text-link: #66b3ff;
   --color-text-link-visited: #66b3ff;
   --color-text-link-hover: #66b3ff;
@@ -19,6 +30,36 @@ html[data-theme="dark"] {
   --color-text-blue: #7cb9ff;
   --color-text-brown: #c4a660;
   
+   /* Button colors */
+  --color-surface-action: var(--color-primary, #B388FF);
+  --color-surface-action-hover: #c39cff;
+  --color-surface-accent-subtle: var(--grey-purple-900, #332746);
+  --color-surface-accent-subtle-hover: var(--grey-purple-700, #5e546d);
+  --color-surface-overlay: var(--gray-800, #1E2939);
+  --color-surface-overlay-header: var(--gray-900, #101828);
+  --color-surface-tertiary: var(--gray-800, #1E2939);
+  --color-surface-tertiary-hover: var(--gray-900, #101828);
+  --color-surface-chip: var(--color-card-bg, #2a2a2a);
+  --color-surface-framed-content: var(--color-card-bg, #2a2a2a);
+  --color-surface-placeholder: var(--gray-700, #364153);
+  --color-surface-subtle: rgba(255, 255, 255, 0.08);
+  --color-text-on-action: var(--gray-900, #101828);
+  --color-border-muted: var(--color-border-light, #666);
+  --color-border-action: var(--color-primary, #B388FF);
+  --color-focus-ring: var(--color-primary, #B388FF);
+  --color-focus-gap: var(--gray-900, #101828);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-100, #F3F4F6);
+  --dialog-cancel-button-border: var(--color-border-light, #666);
+  --dialog-cancel-button-hover-background: var(--color-primary, #B388FF);
+  --dialog-cancel-button-hover-text: var(--color-text-on-action, #1e1e1e);
+  --dialog-cancel-button-hover-border: var(--color-primary, #B388FF);
+
+  /* Error dialog box colors */
+  --dialog-error-background: rgba(176, 0, 32, 0.18);
+  --dialog-error-border: rgba(255, 118, 154, 0.5);
+  --dialog-error-text: #ffbbcd;
+  
   /* Header */
   --color-header-row-bg: var(--grey-purple-900, #332746);
   --color-header-text: var(--white, #fff);
@@ -33,10 +74,14 @@ html[data-theme="dark"] {
   /* Borders */
   --color-border: #444;
   --color-border-dark: #555;
-  --color-border-darker: #333;
+  --color-border-darker: var(--gray-800, #1E2939);
   --color-border-light: #666;
+  --color-border-lighter: var(--gray-700, #364153);
+  --color-border-subtle: var(--gray-700, #364153);
   --color-border-pale: #555;
   --color-border-accent: #9999dd;
+  --color-border-button: var(--gray-700, #364153);
+  --color-border-button-hover: var(--gray-600, #4A5565);
   
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
@@ -186,6 +231,7 @@ html[data-theme="dark"] {
   --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 020234b9..d627e4a5 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -52,19 +52,56 @@
   --black: #000;  /* Used for: text heading */
   --white: #FFF;
 
+
+  /* Button colors */
+  --color-surface-action: var(--color-primary, #7C4DFF);
+  --color-surface-action-hover: #6d3cf2;
+  --color-surface-accent-subtle: var(--lavender-300, #e6dcff);
+  --color-surface-accent-subtle-hover: var(--lavender-200, #E4DBFE);
+  --color-surface-overlay: var(--white, #FFF);
+  --color-surface-overlay-header: var(--slate-50, #F8FAFC);
+  --color-surface-tertiary: var(--gray-50, #F9FAFB);
+  --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
+  --color-surface-chip: var(--gray-100, #F3F4F6);
+  --color-surface-framed-content: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
+  --color-surface-subtle: rgba(15, 23, 43, 0.04);
+  --color-text-on-action: var(--white, #FFF);
+  --color-border-muted: var(--gray-300, #D1D5DC);
+  --color-border-action: var(--color-primary, #7C4DFF);
+  --color-focus-ring: var(--color-primary, #7C4DFF);
+  --color-focus-gap: var(--white, #FFF);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-800, #1E2939);
+  --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
+  --dialog-cancel-button-hover-background: var(--blue-900, #083575);
+  --dialog-cancel-button-hover-text: var(--white, #FFF);
+  --dialog-cancel-button-hover-border: var(--blue-900, #083575);
+ 
+  /* Error dialog box colors */
+  --dialog-error-background: var(--pink-500, #ffdde6);
+  --dialog-error-border: var(--pink-700, #ff98b3);
+  --dialog-error-text: var(--red-600, #B00020);
+  
   /* Background and Text */
   --color-background-old: #FFFFFF; /* White */
   --color-background: #F8F9FB; /* Light grey for overall background */
   --color-background-row-default: white;
   --color-background-row-alternate: #f0f0f0;
   --color-text: #1A1A1A; /* Used in login button */
+  --color-text-ui: var(--gray-100, #F3F4F6);
   --color-text-primary: var(--gray-700, #364153); /* new design */
+  --color-text-control: var(--slate-700, #314158);
   --color-text-secondary-old: #666;
   --color-text-secondary: var(--gray-600, #4A5565);
   --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
   --color-text-subheading: var(--gray-900, #101828); /* new design */
+  --color-text-overlay: var(--gray-800, #1E2939);
+  --color-text-accent-subtle: var(--color-text-control, var(--slate-700, #314158));
   --color-text-strong: var(--slate-900, #0F172B); /* new design */
   --color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
+  --color-text-detail: var(--slate-500, #62748E);
+  --color-text-empty-state: var(--gray-400, #99A1AF);
+  --color-icon-muted: var(--slate-400, #90A1B9);
   --color-text-light: #aaa;
   --color-text-link: #3B5998;
   --color-text-link-visited: #3B5998;
@@ -93,16 +130,19 @@
   --color-border-dark: #777;
   --color-border-darker: var(--gray-600, #4A5565); /* old #444 */
   --color-border-light: #aaa;
+  --color-border-subtle: var(--gray-100, #F3F4F6);
   --color-border-pale: #eee;
   --color-border-accent: #88c;
+  --color-border-button: var(--gray-300, #D1D5DC);
+  --color-border-button-hover: var(--gray-400, #99A1AF);
   
   /* Status Colors */
-  --color-selected-bg: #8F3;
-  --color-warning: red;
+  --color-selected-bg: var(--lavender-300, #e6dcff);
+  --color-warning: var(--red-600, #B00020);
   --color-success-bg: #dfd;
   --color-success-border: green;
   --color-failure-bg: white;
-  --color-failure-border: red;
+  --color-failure-border: var(--red-600, #B00020);
   
   /* Info and Alert Colors */
   --color-info-bg: #ccccff;
@@ -279,6 +319,7 @@
   --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
diff --git a/static/browse-test.html b/static/browse-test.html
index c5559972..d45cd98d 100644
--- a/static/browse-test.html
+++ b/static/browse-test.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"
diff --git a/static/browse.html b/static/browse.html
index eaf4f292..a07ecb32 100644
--- a/static/browse.html
+++ b/static/browse.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"
diff --git a/tsconfig.json b/tsconfig.json
index f8ea5d64..404a0123 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,22 +1,23 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "ES2019",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "ESNext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "target": "ES2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
+    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "moduleResolution": "bundler",
     "lib": [
       "DOM",
       "ES2019"
-    ],                             /* Specify library files to be included in the compilation. */
-    "moduleResolution": "bundler", /* Use bundler-style module resolution for Webpack/package exports compatibility. */
-    "allowSyntheticDefaultImports": true, // Often helps with ESM interop
+    ] /* Specify library files to be included in the compilation. */,
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    "skipLibCheck": true,
+    "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+    "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "dist",                        /* Redirect output structure to the directory. */
+    "outDir": "dist" /* Redirect output structure to the directory. */,
+    "rootDir": ".",
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "incremental": true,                   /* Enable incremental compilation */
@@ -28,8 +29,8 @@
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strict": false /* Enable all strict type-checking options. */,
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
     "strictNullChecks": true /* Enable strict null checks. */,
     "strictFunctionTypes": true /* Enable strict checking of function types. */,
     "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
@@ -49,14 +50,25 @@
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     "typeRoots": [
-      "./node_modules/@types",
-      "./typings"
-    ],                       /* List of folders to include type definitions from. */
+      "node_modules/@types",
+      "node_modules/@testing-library",
+      "typings",
+      "src/types.ts"
+    ] /* List of folders to include type definitions from. */,
     // "types": [],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    "skipLibCheck": true,                      /* Skip type checking of declaration files. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "preserveSymlinks": true, /* Keep symlinks unresolved to avoid duplicate rdflib type identities in local linked dev. */
+    /* baseUrl + paths below are for local integrated dev only.
+       They force a single rdflib type identity when solid-panes is linked to local solid-logic/solid-ui.
+       Both options are deprecated in TS6+ but remain functional until TS7.
+       See solid-ui README: Local Integrated Development for context. */
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "rdflib": ["node_modules/rdflib"],
+      "rdflib/*": ["node_modules/rdflib/*"]
+    }
 
     /* Source Map Options */
     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
@@ -67,10 +79,10 @@
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-    },
-    "include": [
-      "src/**/*",
-      "typings/**/*"
-    ],
-    "exclude": ["node_modules", "dist"]
+  },
+  "include": [
+    "src/**/*",
+    "typings/**/*"
+  ],
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/webpack.config.mjs b/webpack.config.mjs
index 22b32469..a0de7e6d 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -25,7 +25,7 @@ const workspaceAliases = {
   'solid-panes$': path.resolve('../solid-panes/src/index.ts'),
   'solid-ui$': path.resolve('../solid-ui/src/index.ts'),
   'UI$': path.resolve('../solid-ui/src/index.ts'),
-  'solid-ui/components/header$': path.resolve('../solid-ui/src/v2/components/header/index.ts'),
+  'solid-ui/components/header$': path.resolve('../solid-ui/src/v2/components/layout/header/index.ts'),
 }
 
 function getResolutionMode (env = {}) {
@@ -186,7 +186,7 @@ export default (env, args) => {
 
   // For dev server or watch mode, return only unminified config (preserves console.log)
   if (process.env.WEBPACK_SERVE || args.mode === 'development' || isWatchMode) {
-    return {
+    const developmentBundle = {
       ...common,
       mode: 'development',
       output: {
@@ -199,6 +199,19 @@ export default (env, args) => {
         minimize: false
       }
     }
+
+    // Keep both bundle names in sync during watch/dev runs because downstream
+    // servers and templates may reference either path.
+    return [
+      developmentBundle,
+      {
+        ...developmentBundle,
+        output: {
+          ...developmentBundle.output,
+          filename: 'mashlib.min.js'
+        }
+      }
+    ]
   }
 
   // UMD Minified, everything bundled