Initial commit: @eol/graphiql v0.3

Svelte 5 GraphiQL alternative for JSR. Covers:
- HTTP fetcher with injectable fetch; SSE/WS stubs
- Session store with tabs, auto-titling, persistence, rename
- Operation detection via graphql parse(); Toolbar picker
- CodeMirror 6 editor via cm6-graphql with theme prop
- Light theme preset (hand-rolled EditorView.theme)
- Doc explorer with breadcrumb nav and type guards
- History panel with 100-entry cap, favorite pinning
- Deno tests for operations, storage, and history eviction

1 files changed, 75 insertions, 0 deletions

diff --git a/source/library/themes/light.ts b/source/library/themes/light.ts
new file mode 100644
index 0000000..daaede2
--- /dev/null
+++ b/source/library/themes/light.ts
@@ -0,0 +1,75 @@
+
+
+
+/*** IMPORT ------------------------------------------- ***/
+
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+/*** EXPORT ------------------------------------------- ***/
+
+const BG = "#fafafa";
+const BORDER = "#e0e0e0";
+const FG = "#24292e";
+const GUTTER_BG = "#f3f3f3";
+const GUTTER_FG = "#9ca3af";
+const SELECTION = "#b3d4fc";
+
+const base = EditorView.theme({
+  "&": {
+    backgroundColor: BG,
+    color: FG
+  },
+  "&.cm-focused": {
+    outline: "none"
+  },
+  ".cm-activeLine": {
+    backgroundColor: "#f0f0f0"
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "transparent",
+    color: FG
+  },
+  ".cm-content": {
+    caretColor: "#1f6feb"
+  },
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeftColor: "#1f6feb"
+  },
+  ".cm-gutters": {
+    backgroundColor: GUTTER_BG,
+    border: "none",
+    borderRight: `1px solid ${BORDER}`,
+    color: GUTTER_FG
+  },
+  ".cm-matchingBracket": {
+    backgroundColor: "#dbeafe",
+    outline: "1px solid #93c5fd"
+  },
+  ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    backgroundColor: SELECTION
+  }
+}, { dark: false });
+
+const highlight = HighlightStyle.define([
+  { color: "#d73a49", tag: t.keyword },
+  { color: "#6f42c1", tag: [t.name, t.deleted, t.character, t.macroName] },
+  { color: "#6f42c1", tag: [t.propertyName] },
+  { color: "#032f62", tag: [t.string, t.special(t.string)] },
+  { color: "#005cc5", tag: [t.number, t.bool, t.null, t.atom] },
+  { color: "#6a737d", fontStyle: "italic", tag: t.comment },
+  { color: "#22863a", tag: [t.typeName, t.className] },
+  { color: "#e36209", tag: [t.variableName, t.labelName] },
+  { color: "#d73a49", tag: [t.operator, t.operatorKeyword] },
+  { color: "#6a737d", tag: [t.meta, t.documentMeta] },
+  { color: "#22863a", tag: [t.tagName] },
+  { color: "#6f42c1", tag: [t.attributeName] },
+  { color: "#e36209", tag: [t.heading] },
+  { color: "#032f62", tag: [t.link] },
+  { fontWeight: "bold", tag: [t.strong] },
+  { fontStyle: "italic", tag: [t.emphasis] },
+  { tag: t.strikethrough, textDecoration: "line-through" }
+]);
+
+export const lightTheme = [base, syntaxHighlighting(highlight)];