1 files changed, 69 insertions, 65 deletions

diff --git a/source/library/components/DocExplorer.svelte b/source/library/components/DocExplorer.svelte
index 536cb2a..48525e1 100644
--- a/source/library/components/DocExplorer.svelte
+++ b/source/library/components/DocExplorer.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-  import FieldView from "./DocExplorer/FieldView.svelte";
-  import TypeView from "./DocExplorer/TypeView.svelte";
+  /*** IMPORT ------------------------------------------- ***/
   import {
     isInputObjectType,
     isInterfaceType,
-    isObjectType
-  } from "graphql";
-  import type {
-    GraphQLField,
-    GraphQLInputField,
-    GraphQLNamedType,
-    GraphQLSchema
+    isObjectType,
+    type GraphQLField,
+    type GraphQLInputField,
+    type GraphQLNamedType,
+    type GraphQLSchema
   } from "graphql";
 
+  /*** UTILITY ------------------------------------------ ***/
+  import FieldView from "./DocExplorer/FieldView.svelte";
+  import TypeView from "./DocExplorer/TypeView.svelte";
+
   type NavEntry =
     | { kind: "field"; fieldName: string; typeName: string }
     | { kind: "type"; name: string };
@@ -22,7 +23,6 @@
   };
 
   let { schema }: Props = $props();
-
   let stack = $state<NavEntry[]>([]);
 
   const current = $derived<NavEntry | null>(stack.length > 0 ? stack[stack.length - 1] : null);
@@ -63,23 +63,17 @@
     return null;
   });
 
+  /*** HELPER ------------------------------------------- ***/
   function crumbLabel(entry: NavEntry): string {
     return entry.kind === "type" ? entry.name : entry.fieldName;
   }
 
-  function gotoRoot() {
-    stack = [];
-  }
-
   function gotoIndex(index: number) {
     stack = stack.slice(0, index + 1);
   }
 
-  function pushType(name: string) {
-    if (!schema.getType(name))
-      return;
-
-    stack = [...stack, { kind: "type", name }];
+  function gotoRoot() {
+    stack = [];
   }
 
   function pushField(fieldName: string) {
@@ -90,54 +84,62 @@
 
     stack = [...stack, { fieldName, kind: "field", typeName }];
   }
+
+  function pushType(name: string) {
+    if (!schema.getType(name))
+      return;
+
+    stack = [...stack, { kind: "type", name }];
+  }
 </script>
 
 <style lang="scss">
   .explorer {
-    background: var(--graphiql-panel, #252526);
-    border-left: 1px solid var(--graphiql-border, #333);
+    background-color: color-mix(in oklch shorter hue, var(--uchu-gray-1) 20%, var(--uchu-yang) 80%);
+    border-left: 1px solid var(--uchu-gray-2);
     display: grid;
     grid-template-rows: auto 1fr;
     height: 100%;
     min-height: 0;
     overflow: hidden;
+    z-index: 1;
   }
 
   .breadcrumbs {
     align-items: center;
-    border-bottom: 1px solid var(--graphiql-border, #333);
+    border-bottom: 1px solid var(--uchu-gray-2);
     display: flex;
     flex-wrap: wrap;
     font-size: 0.8125rem;
     gap: 0.25rem;
     padding: 0.5rem 0.75rem;
-  }
 
-  .crumb {
-    background: none;
-    border: none;
-    color: var(--graphiql-link, #79b8ff);
-    cursor: pointer;
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0;
-
-    &:hover {
-      text-decoration: underline;
-    }
+    .crumb {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: inherit;
+      padding: 0;
+
+      &:not(.current) {
+        color: var(--uchu-blue-3);
+        text-decoration: underline;
+      }
 
-    &.current {
-      color: var(--graphiql-fg, #d4d4d4);
-      cursor: default;
+      &.current {
+        color: var(--uchu-yin-4);
+        cursor: default;
 
-      &:hover {
-        text-decoration: none;
+        &:hover {
+          text-decoration: none;
+        }
       }
     }
   }
 
   .separator {
-    color: var(--graphiql-muted, #858585);
+    color: var(--uchu-gray-3);
   }
 
   .body {
@@ -149,39 +151,39 @@
     display: grid;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
+
+    &-list {
+      display: grid;
+      gap: 0.375rem;
+    }
+
+    &-link {
+      background: none;
+      border: none;
+      color: var(--uchu-blue-3);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 0.95rem;
+      padding: 0;
+      text-align: left;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 
   .section-label {
-    color: var(--graphiql-muted, #858585);
+    color: var(--uchu-yin-6);
     font-size: 0.7rem;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.05rem;
     margin-bottom: 0.25rem;
     text-transform: uppercase;
   }
 
-  .root-list {
-    display: grid;
-    gap: 0.375rem;
-  }
-
-  .root-link {
-    background: none;
-    border: none;
-    color: var(--graphiql-link, #79b8ff);
-    cursor: pointer;
-    font-family: inherit;
-    font-size: 0.875rem;
-    padding: 0;
-    text-align: left;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
   .empty {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.8125rem;
+    color: var(--uchu-yin-6);
+    font-size: 0.8rem;
     padding: 0.75rem 1rem;
   }
 </style>
@@ -200,10 +202,12 @@
         onclick={() => gotoIndex(i)}>{crumbLabel(entry)}</button>
     {/each}
   </div>
+
   <div class="body">
     {#if stack.length === 0}
       <div class="root">
         <div class="section-label">Root Types</div>
+
         <div class="root-list">
           {#each rootTypes as entry}
             <button class="root-link" onclick={() => pushType(entry.type.name)}>