1 files changed, 87 insertions, 0 deletions
diff --git a/source/library/components/DocExplorer/FieldView.svelte b/source/library/components/DocExplorer/FieldView.svelte
new file mode 100644
index 0000000..71d215c
--- /dev/null
+++ b/source/library/components/DocExplorer/FieldView.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import TypeLink from "./TypeLink.svelte";
+  import type { GraphQLField, GraphQLInputField } from "graphql";
+
+  type Props = {
+    field: GraphQLField<unknown, unknown> | GraphQLInputField;
+    onNavigate: (typeName: string) => void;
+  };
+
+  let { field, onNavigate }: Props = $props();
+
+  const args = $derived("args" in field ? field.args : []);
+</script>
+
+<style lang="scss">
+  .field {
+    display: grid;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .heading {
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  .section-label {
+    color: var(--graphiql-muted, #858585);
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.25rem;
+    text-transform: uppercase;
+  }
+
+  .description {
+    color: var(--graphiql-muted, #858585);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .args {
+    display: grid;
+    gap: 0.375rem;
+  }
+
+  .arg {
+    font-size: 0.8125rem;
+  }
+
+  .arg-name {
+    color: var(--graphiql-fg, #d4d4d4);
+  }
+
+  .arg-description {
+    color: var(--graphiql-muted, #858585);
+    font-size: 0.75rem;
+    margin-left: 1rem;
+    margin-top: 0.125rem;
+  }
+</style>
+
+<div class="field">
+  <div class="heading">{field.name}</div>
+  {#if field.description}
+    <div class="description">{field.description}</div>
+  {/if}
+  <div>
+    <div class="section-label">Type</div>
+    <TypeLink {onNavigate} type={field.type}/>
+  </div>
+  {#if args.length > 0}
+    <div>
+      <div class="section-label">Arguments</div>
+      <div class="args">
+        {#each args as arg}
+          <div class="arg">
+            <span class="arg-name">{arg.name}</span>:
+            <TypeLink {onNavigate} type={arg.type}/>
+            {#if arg.description}
+              <div class="arg-description">{arg.description}</div>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>