diff --git a/package.json b/package.json
index 8c6470d..1740115 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.87",
+    "@iconify-json/lucide": "^1.2.88",
     "@iconify/tailwind4": "^1.2.1",
     "@tailwindcss/vite": "^4.1.18",
     "prettier": "^3.8.1",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@atcute/atproto": "^3.1.10",
-    "@atcute/bluesky": "^3.2.16",
+    "@atcute/bluesky": "^3.2.17",
     "@atcute/car": "^5.1.0",
     "@atcute/cbor": "^2.3.0",
     "@atcute/cid": "^2.4.0",
@@ -39,7 +39,7 @@
     "@atcute/multibase": "^1.1.7",
     "@atcute/oauth-browser-client": "^3.0.0",
     "@atcute/repo": "^0.1.1",
-    "@atcute/tangled": "^1.0.15",
+    "@atcute/tangled": "^1.0.16",
     "@atcute/tid": "^1.1.1",
     "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-json": "^6.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e97b876..37fd6a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^3.1.10
         version: 3.1.10
       '@atcute/bluesky':
-        specifier: ^3.2.16
-        version: 3.2.16
+        specifier: ^3.2.17
+        version: 3.2.17
       '@atcute/car':
         specifier: ^5.1.0
         version: 5.1.0
@@ -57,8 +57,8 @@ importers:
         specifier: ^0.1.1
         version: 0.1.1
       '@atcute/tangled':
-        specifier: ^1.0.15
-        version: 1.0.15
+        specifier: ^1.0.16
+        version: 1.0.16
       '@atcute/tid':
         specifier: ^1.1.1
         version: 1.1.1
@@ -109,14 +109,14 @@ importers:
         version: 1.9.11
     devDependencies:
       '@iconify-json/lucide':
-        specifier: ^1.2.87
-        version: 1.2.87
+        specifier: ^1.2.88
+        version: 1.2.88
       '@iconify/tailwind4':
         specifier: ^1.2.1
         version: 1.2.1(tailwindcss@4.1.18)
       '@tailwindcss/vite':
         specifier: ^4.1.18
-        version: 4.1.18(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))
+        version: 4.1.18(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))
       prettier:
         specifier: ^3.8.1
         version: 3.8.1
@@ -134,10 +134,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^7.3.1
-        version: 7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
+        version: 7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
       vite-plugin-solid:
         specifier: ^2.11.10
-        version: 2.11.10(solid-js@1.9.11)(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))
+        version: 2.11.10(solid-js@1.9.11)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))
 
 packages:
 
@@ -147,8 +147,8 @@ packages:
   '@atcute/atproto@3.1.10':
     resolution: {integrity: sha512-+GKZpOc0PJcdWMQEkTfg/rSNDAAHxmAUGBl60g2az15etqJn5WaUPNGFE2sB7hKpwi5Ue2h/L0OacINcE/JDDQ==}
 
-  '@atcute/bluesky@3.2.16':
-    resolution: {integrity: sha512-phFAJNE+SCkIbCcgzjFxntS2KpGvzkLw0JA9qKIXlueF4wNreEt/D5HjnB5eRR9pV1/kcD94II9f7ZAwarf0lQ==}
+  '@atcute/bluesky@3.2.17':
+    resolution: {integrity: sha512-Li+RsPkcRNC6AnNlqOGnlmAcjSwBdXIKFubJL1nwACDngKNXG4ooGL5cvzeekdDEfHmtFhS/tyZNaUx9QXYEUw==}
 
   '@atcute/car@3.1.3':
     resolution: {integrity: sha512-WJ13bAEt7TjDMVi09ubjLtvhdljbWInGm9Kfy7Y6NhrmiyC/aZYaA/zHX/bHI6xv1c/h3SQduWqxOr4ae49eqA==}
@@ -212,8 +212,8 @@ packages:
   '@atcute/repo@0.1.1':
     resolution: {integrity: sha512-P5aWjt3bvcquUkUmGPslF0naAfLGRHse5Qdz9/RJYrFuoH0iiEMyRnW6M+3ksOe20GPsMnbq71WbzzFkRFPBtg==}
 
-  '@atcute/tangled@1.0.15':
-    resolution: {integrity: sha512-cEQ0r+iTr4sVfiE6amlqT/h9X+tCGyfhSU+zIGUl6YzAAUMHvNhi9q98BFrdB3nBeOqfHVk/vwLnzQxxqiHZsQ==}
+  '@atcute/tangled@1.0.16':
+    resolution: {integrity: sha512-8we9seXrD79MhvA0BSBgKOvZz/Cx6sJJ4wc4QcHZF4Ats/+4+xuNOwzuFNL+1sNib/GqXxa8dhmmpoY6T1PRZQ==}
 
   '@atcute/tid@1.1.1':
     resolution: {integrity: sha512-djJ8UGhLkTU5V51yCnBEruMg35qETjWzWy5sJG/2gEOl2Gd7rQWHSaf+yrO6vMS5EFA38U2xOWE3EDUPzvc2ZQ==}
@@ -661,8 +661,8 @@ packages:
       '@codemirror/view': ^6.0.0
       '@lezer/highlight': ^1.0.0
 
-  '@iconify-json/lucide@1.2.87':
-    resolution: {integrity: sha512-wxYIAp0f8Uw0rJa6BMWMaRbiHk3yV4XczA38GKXFlqyZtTdmHM1QOF4NZw5xpMlRDzbh2MnB7wjteLeFnn/ciQ==}
+  '@iconify-json/lucide@1.2.88':
+    resolution: {integrity: sha512-QBJq+VSj3yHXoMgf+1I4guUhXA+tpxzAt46LJdTSFN6UKy254GstTh+P/a6GD4Bvyi1fCAfi5hS/yCmu0w3mNw==}
 
   '@iconify/tailwind4@1.2.1':
     resolution: {integrity: sha512-Hd7k8y7uzT3hk8ltw0jGku0r0wA8sc3d2iMvVTYv/9tMxBb+frZtWZGD9hDMU3EYuE+lMn58wi2lS8R2ZbwFcQ==}
@@ -712,8 +712,8 @@ packages:
   '@jsr/mary__zip@0.1.1':
     resolution: {integrity: sha512-RIt6xSshG6x1X4qUVGXukgS8ysot+wLQc/WAkNogbiDwm3tzFyDxZdEs8TVDQyT1L7lApPPgbEgdcex7NcfGrw==, tarball: https://npm.jsr.io/~/11/@jsr/mary__zip/0.1.1.tgz}
 
-  '@lezer/common@1.5.0':
-    resolution: {integrity: sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==}
+  '@lezer/common@1.5.1':
+    resolution: {integrity: sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==}
 
   '@lezer/highlight@1.2.3':
     resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
@@ -979,8 +979,8 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/node@25.1.0':
-    resolution: {integrity: sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==}
+  '@types/node@25.2.0':
+    resolution: {integrity: sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w==}
 
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
@@ -1016,8 +1016,8 @@ packages:
   bun-types@1.3.8:
     resolution: {integrity: sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q==}
 
-  caniuse-lite@1.0.30001766:
-    resolution: {integrity: sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==}
+  caniuse-lite@1.0.30001767:
+    resolution: {integrity: sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==}
 
   codemirror@6.0.2:
     resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
@@ -1083,11 +1083,11 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  electron-to-chromium@1.5.283:
-    resolution: {integrity: sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==}
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
 
-  enhanced-resolve@5.18.4:
-    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
     engines: {node: '>=10.13.0'}
 
   entities@4.5.0:
@@ -1561,7 +1561,7 @@ snapshots:
     dependencies:
       '@atcute/lexicons': 1.2.7
 
-  '@atcute/bluesky@3.2.16':
+  '@atcute/bluesky@3.2.17':
     dependencies:
       '@atcute/atproto': 3.1.10
       '@atcute/lexicons': 1.2.7
@@ -1703,7 +1703,7 @@ snapshots:
       '@atcute/mst': 0.1.2
       '@atcute/uint8array': 1.1.0
 
-  '@atcute/tangled@1.0.15':
+  '@atcute/tangled@1.0.16':
     dependencies:
       '@atcute/atproto': 3.1.10
       '@atcute/lexicons': 1.2.7
@@ -1847,14 +1847,14 @@ snapshots:
       '@codemirror/language': 6.12.1
       '@codemirror/state': 6.5.4
       '@codemirror/view': 6.39.12
-      '@lezer/common': 1.5.0
+      '@lezer/common': 1.5.1
 
   '@codemirror/commands@6.10.1':
     dependencies:
       '@codemirror/language': 6.12.1
       '@codemirror/state': 6.5.4
       '@codemirror/view': 6.39.12
-      '@lezer/common': 1.5.0
+      '@lezer/common': 1.5.1
 
   '@codemirror/lang-json@6.0.2':
     dependencies:
@@ -1865,7 +1865,7 @@ snapshots:
     dependencies:
       '@codemirror/state': 6.5.4
       '@codemirror/view': 6.39.12
-      '@lezer/common': 1.5.0
+      '@lezer/common': 1.5.1
       '@lezer/highlight': 1.2.3
       '@lezer/lr': 1.4.8
       style-mod: 4.1.3
@@ -2061,7 +2061,7 @@ snapshots:
       '@codemirror/view': 6.39.12
       '@lezer/highlight': 1.2.3
 
-  '@iconify-json/lucide@1.2.87':
+  '@iconify-json/lucide@1.2.88':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -2126,21 +2126,21 @@ snapshots:
       '@jsr/mary__ds-queue': 0.1.3
       '@jsr/mary__mutex': 0.1.0
 
-  '@lezer/common@1.5.0': {}
+  '@lezer/common@1.5.1': {}
 
   '@lezer/highlight@1.2.3':
     dependencies:
-      '@lezer/common': 1.5.0
+      '@lezer/common': 1.5.1
 
   '@lezer/json@1.0.3':
     dependencies:
-      '@lezer/common': 1.5.0
+      '@lezer/common': 1.5.1
       '@lezer/highlight': 1.2.3
       '@lezer/lr': 1.4.8
 
   '@lezer/lr@1.4.8':
     dependencies:
-      '@lezer/common': 1.5.0
+      '@lezer/common': 1.5.1
 
   '@marijn/find-cluster-break@1.0.2': {}
 
@@ -2240,7 +2240,7 @@ snapshots:
   '@tailwindcss/node@4.1.18':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.4
+      enhanced-resolve: 5.19.0
       jiti: 2.6.1
       lightningcss: 1.30.2
       magic-string: 0.30.21
@@ -2298,12 +2298,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))':
+  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
+      vite: 7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
 
   '@types/babel__core@7.20.5':
     dependencies:
@@ -2332,7 +2332,7 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
-  '@types/node@25.1.0':
+  '@types/node@25.2.0':
     dependencies:
       undici-types: 7.16.0
 
@@ -2361,16 +2361,16 @@ snapshots:
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.19
-      caniuse-lite: 1.0.30001766
-      electron-to-chromium: 1.5.283
+      caniuse-lite: 1.0.30001767
+      electron-to-chromium: 1.5.286
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
   bun-types@1.3.8:
     dependencies:
-      '@types/node': 25.1.0
+      '@types/node': 25.2.0
 
-  caniuse-lite@1.0.30001766: {}
+  caniuse-lite@1.0.30001767: {}
 
   codemirror@6.0.2:
     dependencies:
@@ -2440,9 +2440,9 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
-  electron-to-chromium@1.5.283: {}
+  electron-to-chromium@1.5.286: {}
 
-  enhanced-resolve@5.18.4:
+  enhanced-resolve@5.19.0:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.0
@@ -2788,7 +2788,7 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  vite-plugin-solid@2.11.10(solid-js@1.9.11)(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)):
+  vite-plugin-solid@2.11.10(solid-js@1.9.11)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)):
     dependencies:
       '@babel/core': 7.29.0
       '@types/babel__core': 7.20.5
@@ -2796,12 +2796,12 @@ snapshots:
       merge-anything: 5.1.7
       solid-js: 1.9.11
       solid-refresh: 0.6.3(solid-js@1.9.11)
-      vite: 7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
-      vitefu: 1.1.1(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))
+      vite: 7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
+      vitefu: 1.1.1(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))
     transitivePeerDependencies:
       - supports-color
 
-  vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2):
+  vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -2810,15 +2810,15 @@ snapshots:
       rollup: 4.57.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 25.1.0
+      '@types/node': 25.2.0
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
       tsx: 4.19.2
 
-  vitefu@1.1.1(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)):
+  vitefu@1.1.1(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)):
     optionalDependencies:
-      vite: 7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
+      vite: 7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)
 
   w3c-keyname@2.2.8: {}
 
diff --git a/src/components/lexicon-schema.tsx b/src/components/lexicon-schema.tsx
index 4cf16ad..b9638a1 100644
--- a/src/components/lexicon-schema.tsx
+++ b/src/components/lexicon-schema.tsx
@@ -3,6 +3,46 @@ import { useLocation, useNavigate } from "@solidjs/router";
 import { createEffect, For, Show } from "solid-js";
 import { resolveLexiconAuthority } from "../utils/api.js";
 
+// Style constants
+const CONTAINER_CLASS =
+  "divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30";
+
+const CARD_CLASS =
+  "flex flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50/50 p-3 dark:border-neutral-700 dark:bg-neutral-800/30";
+
+const RESOURCE_COLORS = {
+  repo: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+  rpc: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+  default: "bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300",
+} as const;
+
+const DEF_TYPE_COLORS = {
+  record: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+  query: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+  procedure: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300",
+  subscription: "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
+  object: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+  token: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+  "permission-set": "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300",
+  default: "bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300",
+} as const;
+
+// Utility functions
+const hasConstraints = (property: LexiconProperty | LexiconDef) =>
+  property.minLength !== undefined ||
+  property.maxLength !== undefined ||
+  property.maxGraphemes !== undefined ||
+  property.minGraphemes !== undefined ||
+  property.minimum !== undefined ||
+  property.maximum !== undefined ||
+  property.maxSize !== undefined ||
+  property.accept ||
+  property.enum ||
+  property.const ||
+  property.default !== undefined ||
+  property.knownValues ||
+  property.closed;
+
 interface LexiconSchema {
   lexicon: number;
   id: string;
@@ -44,7 +84,7 @@ interface LexiconDef {
   closed?: boolean;
   enum?: string[];
   const?: string;
-  default?: any;
+  default?: string | number | boolean;
   minimum?: number;
   maximum?: number;
   accept?: string[];
@@ -86,7 +126,7 @@ interface LexiconProperty {
   maximum?: number;
   enum?: string[];
   const?: string | boolean | number;
-  default?: any;
+  default?: string | number | boolean;
   knownValues?: string[];
   accept?: string[];
   maxSize?: number;
@@ -226,21 +266,6 @@ const PropertyRow = (props: {
   required?: boolean;
   hideNameType?: boolean;
 }) => {
-  const hasConstraints = (property: LexiconProperty) =>
-    property.minLength !== undefined ||
-    property.maxLength !== undefined ||
-    property.maxGraphemes !== undefined ||
-    property.minGraphemes !== undefined ||
-    property.minimum !== undefined ||
-    property.maximum !== undefined ||
-    property.maxSize !== undefined ||
-    property.accept ||
-    property.enum ||
-    property.const ||
-    property.default !== undefined ||
-    property.knownValues ||
-    property.closed;
-
   return (
     <div class="flex flex-col gap-2 py-3">
       <Show when={!props.hideNameType}>
@@ -322,15 +347,50 @@ const NsidLink = (props: { nsid: string }) => {
   );
 };
 
-const resourceColor = (resource: string) => {
-  switch (resource) {
-    case "repo":
-      return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300";
-    case "rpc":
-      return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
-    default:
-      return "bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300";
-  }
+const resourceColor = (resource: string) =>
+  RESOURCE_COLORS[resource as keyof typeof RESOURCE_COLORS] || RESOURCE_COLORS.default;
+
+const SchemaSection = (props: { title: string; encoding: string; schema?: LexiconObject }) => {
+  return (
+    <div class="flex flex-col gap-2">
+      <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
+        {props.title}
+      </h4>
+      <div class={CARD_CLASS}>
+        <div class="text-sm">
+          <span class="font-semibold">Encoding: </span>
+          <span class="font-mono">{props.encoding}</span>
+        </div>
+        <Show when={props.schema?.ref}>
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-semibold">Schema:</span>
+            <TypeBadge type="ref" refType={props.schema!.ref} />
+          </div>
+        </Show>
+        <Show when={props.schema?.refs}>
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-semibold">Schema (union):</span>
+            </div>
+            <UnionBadges refs={props.schema!.refs!} />
+          </div>
+        </Show>
+        <Show when={props.schema?.properties && Object.keys(props.schema.properties).length > 0}>
+          <div class={CONTAINER_CLASS}>
+            <For each={Object.entries(props.schema!.properties!)}>
+              {([name, property]) => (
+                <PropertyRow
+                  name={name}
+                  property={property}
+                  required={(props.schema?.required || []).includes(name)}
+                />
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
 };
 
 const PermissionRow = (props: { permission: LexiconPermission; index: number }) => {
@@ -407,43 +467,10 @@ const PermissionRow = (props: { permission: LexiconPermission; index: number })
 };
 
 const DefSection = (props: { name: string; def: LexiconDef }) => {
-  const defTypeColor = () => {
-    switch (props.def.type) {
-      case "record":
-        return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300";
-      case "query":
-        return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
-      case "procedure":
-        return "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300";
-      case "subscription":
-        return "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300";
-      case "object":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
-      case "token":
-        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300";
-      case "permission-set":
-        return "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300";
-      default:
-        return "bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300";
-    }
-  };
+  const defTypeColor = () =>
+    DEF_TYPE_COLORS[props.def.type as keyof typeof DEF_TYPE_COLORS] || DEF_TYPE_COLORS.default;
 
-  const hasDefContent = () =>
-    props.def.refs ||
-    props.def.minLength !== undefined ||
-    props.def.maxLength !== undefined ||
-    props.def.maxGraphemes !== undefined ||
-    props.def.minGraphemes !== undefined ||
-    props.def.minimum !== undefined ||
-    props.def.maximum !== undefined ||
-    props.def.maxSize !== undefined ||
-    props.def.accept ||
-    props.def.enum ||
-    props.def.const ||
-    props.def.default !== undefined ||
-    props.def.closed ||
-    props.def.items ||
-    props.def.knownValues;
+  const hasDefContent = () => props.def.refs || props.def.items || hasConstraints(props.def);
 
   return (
     <div class="flex flex-col gap-3" id={`def-${props.name}`}>
@@ -471,7 +498,7 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
 
       {/* Permission-set: Title and Detail */}
       <Show when={props.def.type === "permission-set" && (props.def.title || props.def.detail)}>
-        <div class="flex flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50/50 p-3 dark:border-neutral-700 dark:bg-neutral-800/30">
+        <div class={CARD_CLASS}>
           <Show when={props.def.title}>
             <div class="flex flex-col gap-1">
               <span class="text-xs font-semibold text-neutral-500 uppercase dark:text-neutral-400">
@@ -530,27 +557,27 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
       </Show>
 
       {/* Permission-set: Permissions list */}
-      <Show when={props.def.permissions && props.def.permissions.length > 0}>
-        {(() => {
-          const supportedPermissions = () =>
-            props.def.permissions!.filter((p) => p.resource === "repo" || p.resource === "rpc");
-          return (
-            <Show when={supportedPermissions().length > 0}>
-              <div class="flex flex-col gap-2">
-                <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
-                  Permissions
-                </h4>
-                <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
-                  <For each={supportedPermissions()}>
-                    {(permission, index) => (
-                      <PermissionRow permission={permission} index={index()} />
-                    )}
-                  </For>
-                </div>
-              </div>
-            </Show>
-          );
-        })()}
+      <Show
+        when={
+          props.def.permissions &&
+          props.def.permissions.filter((p) => p.resource === "repo" || p.resource === "rpc")
+            .length > 0
+        }
+      >
+        <div class="flex flex-col gap-2">
+          <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
+            Permissions
+          </h4>
+          <div class={CONTAINER_CLASS}>
+            <For
+              each={props.def.permissions!.filter(
+                (p) => p.resource === "repo" || p.resource === "rpc",
+              )}
+            >
+              {(permission, index) => <PermissionRow permission={permission} index={index()} />}
+            </For>
+          </div>
+        </div>
       </Show>
 
       {/* Properties (for record/object types) */}
@@ -561,7 +588,7 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
           <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
             Properties
           </h4>
-          <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
+          <div class={CONTAINER_CLASS}>
             <For each={Object.entries(props.def.properties || props.def.record?.properties || {})}>
               {([name, property]) => (
                 <PropertyRow
@@ -586,7 +613,7 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
           <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
             Parameters
           </h4>
-          <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
+          <div class={CONTAINER_CLASS}>
             <For each={Object.entries(props.def.parameters!.properties!)}>
               {([name, property]) => (
                 <PropertyRow
@@ -602,96 +629,20 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
 
       {/* Input */}
       <Show when={props.def.input}>
-        <div class="flex flex-col gap-2">
-          <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
-            Input
-          </h4>
-          <div class="flex flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50/50 p-3 dark:border-neutral-700 dark:bg-neutral-800/30">
-            <div class="text-sm">
-              <span class="font-semibold">Encoding: </span>
-              <span class="font-mono">{props.def.input!.encoding}</span>
-            </div>
-            <Show when={props.def.input!.schema?.ref}>
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-semibold">Schema:</span>
-                <TypeBadge type="ref" refType={props.def.input!.schema!.ref} />
-              </div>
-            </Show>
-            <Show when={props.def.input!.schema?.refs}>
-              <div class="flex flex-col gap-2">
-                <div class="flex items-center gap-2">
-                  <span class="text-sm font-semibold">Schema (union):</span>
-                </div>
-                <UnionBadges refs={props.def.input!.schema!.refs!} />
-              </div>
-            </Show>
-            <Show
-              when={
-                props.def.input!.schema?.properties &&
-                Object.keys(props.def.input!.schema.properties).length > 0
-              }
-            >
-              <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
-                <For each={Object.entries(props.def.input!.schema!.properties!)}>
-                  {([name, property]) => (
-                    <PropertyRow
-                      name={name}
-                      property={property}
-                      required={(props.def.input!.schema?.required || []).includes(name)}
-                    />
-                  )}
-                </For>
-              </div>
-            </Show>
-          </div>
-        </div>
+        <SchemaSection
+          title="Input"
+          encoding={props.def.input!.encoding}
+          schema={props.def.input!.schema}
+        />
       </Show>
 
       {/* Output */}
       <Show when={props.def.output}>
-        <div class="flex flex-col gap-2">
-          <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
-            Output
-          </h4>
-          <div class="flex flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50/50 p-3 dark:border-neutral-700 dark:bg-neutral-800/30">
-            <div class="text-sm">
-              <span class="font-semibold">Encoding: </span>
-              <span class="font-mono">{props.def.output!.encoding}</span>
-            </div>
-            <Show when={props.def.output!.schema?.ref}>
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-semibold">Schema:</span>
-                <TypeBadge type="ref" refType={props.def.output!.schema!.ref} />
-              </div>
-            </Show>
-            <Show when={props.def.output!.schema?.refs}>
-              <div class="flex flex-col gap-2">
-                <div class="flex items-center gap-2">
-                  <span class="text-sm font-semibold">Schema (union):</span>
-                </div>
-                <UnionBadges refs={props.def.output!.schema!.refs!} />
-              </div>
-            </Show>
-            <Show
-              when={
-                props.def.output!.schema?.properties &&
-                Object.keys(props.def.output!.schema.properties).length > 0
-              }
-            >
-              <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
-                <For each={Object.entries(props.def.output!.schema!.properties!)}>
-                  {([name, property]) => (
-                    <PropertyRow
-                      name={name}
-                      property={property}
-                      required={(props.def.output!.schema?.required || []).includes(name)}
-                    />
-                  )}
-                </For>
-              </div>
-            </Show>
-          </div>
-        </div>
+        <SchemaSection
+          title="Output"
+          encoding={props.def.output!.encoding}
+          schema={props.def.output!.schema}
+        />
       </Show>
 
       {/* Errors */}
@@ -700,7 +651,7 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
           <h4 class="text-sm font-semibold text-neutral-600 uppercase dark:text-neutral-400">
             Errors
           </h4>
-          <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
+          <div class={CONTAINER_CLASS}>
             <For each={props.def.errors}>
               {(error) => (
                 <div class="flex flex-col gap-1 py-2">
@@ -730,7 +681,7 @@ const DefSection = (props: { name: string; def: LexiconDef }) => {
           ) && hasDefContent()
         }
       >
-        <div class="divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800/30">
+        <div class={CONTAINER_CLASS}>
           <PropertyRow name={props.name} property={props.def} hideNameType />
         </div>
       </Show>
@@ -756,7 +707,7 @@ export const LexiconSchemaView = (props: { schema: LexiconSchema }) => {
   return (
     <div class="w-full max-w-4xl px-2">
       {/* Header */}
-      <div class="flex flex-col gap-2 border-b border-neutral-300 pb-4 dark:border-neutral-700">
+      <div class="flex flex-col gap-2 border-b border-neutral-300 pb-3 dark:border-neutral-700">
         <h2 class="text-lg font-semibold">{props.schema.id}</h2>
         <div class="flex gap-4 text-sm text-neutral-600 dark:text-neutral-400">
           <span>
@@ -770,7 +721,7 @@ export const LexiconSchemaView = (props: { schema: LexiconSchema }) => {
       </div>
 
       {/* Definitions */}
-      <div class="flex flex-col gap-6 pt-4">
+      <div class="flex flex-col gap-6 pt-3">
         <For each={Object.entries(props.schema.defs)}>
           {([name, def]) => <DefSection name={name} def={def} />}
         </For>