From c030d1fbe4b3f392905b569628463e6ad6c27cfc Mon Sep 17 00:00:00 2001
From: Aarnav Tale <git@tale.me>
Date: Fri, 10 Apr 2026 21:00:52 -0400
Subject: [PATCH] feat: de-uglify the ACL editor

---
 app/components/tabs.tsx                  |   6 +-
 app/routes/acls/components/cm.client.tsx | 161 +++++++++--------------
 app/routes/acls/components/fallback.tsx  |  40 ++----
 app/routes/acls/components/theme.ts      |  63 +++++++++
 app/routes/acls/overview.tsx             |   4 +-
 app/tailwind.css                         |  70 ++++++++--
 package.json                             |   5 +-
 pnpm-lock.yaml                           | 151 ++-------------------
 8 files changed, 213 insertions(+), 287 deletions(-)
 create mode 100644 app/routes/acls/components/theme.ts

diff --git a/app/components/tabs.tsx b/app/components/tabs.tsx
index 3b9f270..c68e757 100644
--- a/app/components/tabs.tsx
+++ b/app/components/tabs.tsx
@@ -29,7 +29,7 @@ function TabList({ children, className }: { children: ReactNode; className?: str
   return (
     <BaseTabs.List
       className={cn(
-        "flex items-center rounded-t-lg w-fit max-w-full",
+        "flex items-center rounded-t-md w-fit max-w-full",
         "border-mist-200 dark:border-mist-800",
         "border-t border-x",
         className,
@@ -56,7 +56,7 @@ function Tab({
         "focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1 z-10",
         "dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
         "border-r border-mist-200 dark:border-mist-800",
-        "first:rounded-tl-lg last:rounded-tr-lg last:border-r-0",
+        "first:rounded-tl-md last:rounded-tr-md last:border-r-0",
         className,
       )}
     >
@@ -76,7 +76,7 @@ function Panel({
       value={value}
       {...props}
       className={cn(
-        "w-full overflow-clip rounded-b-lg rounded-r-lg",
+        "w-full overflow-clip rounded-b-md rounded-r-md",
         "border border-mist-200 dark:border-mist-800",
         className,
       )}
diff --git a/app/routes/acls/components/cm.client.tsx b/app/routes/acls/components/cm.client.tsx
index cf54c8c..ce49b68 100644
--- a/app/routes/acls/components/cm.client.tsx
+++ b/app/routes/acls/components/cm.client.tsx
@@ -1,112 +1,73 @@
-import * as shopify from '@shopify/lang-jsonc';
-import { xcodeDark, xcodeLight } from '@uiw/codemirror-theme-xcode';
-import CodeMirror from '@uiw/react-codemirror';
-import { BookCopy, CircleX } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import Merge from 'react-codemirror-merge';
-import { ErrorBoundary } from 'react-error-boundary';
-import { ClientOnly } from 'remix-utils/client-only';
-import Fallback from './fallback';
+import * as shopify from "@shopify/lang-jsonc";
+import CodeMirror from "@uiw/react-codemirror";
+import { BookCopy, CircleX } from "lucide-react";
+import Merge from "react-codemirror-merge";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { headplaneTheme } from "./theme";
 
 interface EditorProps {
-	isDisabled?: boolean;
-	value: string;
-	onChange: (value: string) => void;
+  isDisabled?: boolean;
+  value: string;
+  onChange: (value: string) => void;
 }
 
-// TODO: Remove ClientOnly
 export function Editor(props: EditorProps) {
-	const [light, setLight] = useState(false);
-	useEffect(() => {
-		const theme = window.matchMedia('(prefers-color-scheme: light)');
-		setLight(theme.matches);
-		theme.addEventListener('change', (theme) => {
-			setLight(theme.matches);
-		});
-	});
-
-	return (
-		<div className="overflow-y-scroll h-editor text-sm">
-			<ErrorBoundary
-				fallback={
-					<div className="flex flex-col items-center gap-2.5 py-8">
-						<CircleX />
-						<p className="text-lg font-semibold">Failed to load the editor.</p>
-					</div>
-				}
-			>
-				<ClientOnly fallback={<Fallback acl={props.value} />}>
-					{() => (
-						<CodeMirror
-							editable={!props.isDisabled}
-							extensions={[shopify.jsonc()]} // Allow editing unless disabled
-							height="100%" // Use readOnly if disabled
-							onChange={(value) => props.onChange(value)}
-							readOnly={props.isDisabled}
-							style={{ height: '100%' }}
-							theme={light ? xcodeLight : xcodeDark}
-							value={props.value}
-						/>
-					)}
-				</ClientOnly>
-			</ErrorBoundary>
-		</div>
-	);
+  return (
+    <div className="text-sm">
+      <ErrorBoundary
+        fallback={
+          <div className="flex flex-col items-center gap-2.5 py-8">
+            <CircleX />
+            <p className="text-lg font-semibold">Failed to load the editor.</p>
+          </div>
+        }
+      >
+        <CodeMirror
+          editable={!props.isDisabled}
+          extensions={[shopify.jsonc()]}
+          minHeight="24rem"
+          maxHeight="var(--height-editor)"
+          onChange={(value) => props.onChange(value)}
+          readOnly={props.isDisabled}
+          theme={headplaneTheme}
+          value={props.value}
+        />
+      </ErrorBoundary>
+    </div>
+  );
 }
 
 interface DifferProps {
-	left: string;
-	right: string;
+  left: string;
+  right: string;
 }
 
 export function Differ(props: DifferProps) {
-	const [light, setLight] = useState(false);
-	useEffect(() => {
-		const theme = window.matchMedia('(prefers-color-scheme: light)');
-		setLight(theme.matches);
-		theme.addEventListener('change', (theme) => {
-			setLight(theme.matches);
-		});
-	});
-
-	return (
-		<div className="text-sm">
-			{props.left === props.right ? (
-				<div className="flex flex-col items-center gap-2.5 py-8">
-					<BookCopy />
-					<p className="text-lg font-semibold">No changes</p>
-				</div>
-			) : (
-				<div className="h-editor overflow-y-scroll">
-					<ErrorBoundary
-						fallback={
-							<div className="flex flex-col items-center gap-2.5 py-8">
-								<CircleX />
-								<p className="text-lg font-semibold">
-									Failed to load the editor.
-								</p>
-							</div>
-						}
-					>
-						<ClientOnly fallback={<Fallback acl={props.right} />}>
-							{() => (
-								<Merge orientation="a-b" theme={light ? xcodeLight : xcodeDark}>
-									<Merge.Original
-										extensions={[shopify.jsonc()]}
-										readOnly
-										value={props.left}
-									/>
-									<Merge.Modified
-										extensions={[shopify.jsonc()]}
-										readOnly
-										value={props.right}
-									/>
-								</Merge>
-							)}
-						</ClientOnly>
-					</ErrorBoundary>
-				</div>
-			)}
-		</div>
-	);
+  return (
+    <div className="text-sm">
+      {props.left === props.right ? (
+        <div className="flex flex-col items-center gap-2.5 py-8">
+          <BookCopy />
+          <p className="text-lg font-semibold">No changes</p>
+        </div>
+      ) : (
+        <div className="h-editor">
+          <ErrorBoundary
+            fallback={
+              <div className="flex flex-col items-center gap-2.5 py-8">
+                <CircleX />
+                <p className="text-lg font-semibold">Failed to load the editor.</p>
+              </div>
+            }
+          >
+            <Merge orientation="a-b" theme={headplaneTheme}>
+              <Merge.Original extensions={[shopify.jsonc()]} readOnly value={props.left} />
+              <Merge.Modified extensions={[shopify.jsonc()]} readOnly value={props.right} />
+            </Merge>
+          </ErrorBoundary>
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/app/routes/acls/components/fallback.tsx b/app/routes/acls/components/fallback.tsx
index 6f8ef86..bcc5861 100644
--- a/app/routes/acls/components/fallback.tsx
+++ b/app/routes/acls/components/fallback.tsx
@@ -1,36 +1,18 @@
+import { Loader2 } from "lucide-react";
+
 import cn from "~/utils/cn";
 
-interface Props {
-  readonly acl: string;
-}
-
-export default function Fallback({ acl }: Props) {
+export default function Fallback() {
   return (
-    <div className="h-editor relative flex w-full">
-      <div
-        className={cn(
-          "h-full w-8 flex justify-center p-1",
-          "border-r border-mist-400 dark:border-mist-800",
-        )}
-      >
-        <div
-          aria-hidden
-          className={cn(
-            "h-5 w-5 animate-spin rounded-full",
-            "border-mist-900 dark:border-mist-100",
-            "border-2 border-t-transparent dark:border-t-transparent",
-          )}
-        />
+    <div
+      className={cn("h-editor overflow-hidden rounded-md", "bg-[var(--cm-bg)] text-[var(--cm-fg)]")}
+    >
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-2 text-[var(--cm-gutter-fg)]">
+          <Loader2 className="size-5 animate-spin" />
+          <p className="text-sm">Loading editor…</p>
+        </div>
       </div>
-      <textarea
-        className={cn(
-          "w-full h-editor font-mono resize-none text-sm",
-          "bg-mist-50 dark:bg-mist-950 opacity-60",
-          "pl-1 pt-1 leading-snug",
-        )}
-        readOnly
-        value={acl}
-      />
     </div>
   );
 }
diff --git a/app/routes/acls/components/theme.ts b/app/routes/acls/components/theme.ts
new file mode 100644
index 0000000..d0f87af
--- /dev/null
+++ b/app/routes/acls/components/theme.ts
@@ -0,0 +1,63 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+const editorTheme = EditorView.theme({
+  "&": {
+    backgroundColor: "var(--cm-bg)",
+    color: "var(--cm-fg)",
+  },
+  "&.cm-editor.cm-focused": {
+    outline: "none",
+  },
+  ".cm-content": {
+    caretColor: "var(--cm-caret)",
+    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+  },
+  "&.cm-editor .cm-scroller": {
+    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+  },
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeftColor: "var(--cm-caret)",
+  },
+  "&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection":
+    {
+      background: "var(--cm-selection) !important",
+    },
+  "& .cm-selectionMatch": {
+    backgroundColor: "var(--cm-selection-match)",
+  },
+  ".cm-activeLine": {
+    backgroundColor: "var(--cm-line-highlight)",
+  },
+  ".cm-gutters": {
+    backgroundColor: "var(--cm-gutter-bg)",
+    color: "var(--cm-gutter-fg)",
+    borderRight: "1px solid var(--cm-gutter-border)",
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "var(--cm-line-highlight)",
+    color: "var(--cm-gutter-fg-active)",
+  },
+  ".cm-scroller": {
+    scrollbarColor: "var(--cm-gutter-border) transparent",
+    scrollbarWidth: "auto",
+  },
+});
+
+const highlightStyle = HighlightStyle.define([
+  { tag: [t.comment, t.quote], color: "var(--cm-comment)" },
+  { tag: [t.keyword], color: "var(--cm-keyword)", fontWeight: "bold" },
+  { tag: [t.string, t.meta], color: "var(--cm-string)" },
+  { tag: [t.typeName, t.typeOperator], color: "var(--cm-type)" },
+  { tag: [t.definition(t.variableName)], color: "var(--cm-definition)" },
+  { tag: [t.name], color: "var(--cm-name)" },
+  { tag: [t.variableName], color: "var(--cm-variable)" },
+  { tag: [t.propertyName], color: "var(--cm-property)" },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "var(--cm-atom)" },
+  { tag: [t.number], color: "var(--cm-number)" },
+  { tag: [t.regexp, t.link], color: "var(--cm-link)" },
+  { tag: [t.bracket], color: "var(--cm-bracket)" },
+]);
+
+export const headplaneTheme = [editorTheme, syntaxHighlighting(highlightStyle)];
diff --git a/app/routes/acls/overview.tsx b/app/routes/acls/overview.tsx
index 9cddfb2..51206f9 100644
--- a/app/routes/acls/overview.tsx
+++ b/app/routes/acls/overview.tsx
@@ -108,12 +108,12 @@ export default function Page({ loaderData: { access, writable, policy } }: Route
           </TabsTab>
         </TabsList>
         <TabsPanel value="edit">
-          <Suspense fallback={<Fallback acl={codePolicy} />}>
+          <Suspense fallback={<Fallback />}>
             <LazyEditor isDisabled={disabled} onChange={setCodePolicy} value={codePolicy} />
           </Suspense>
         </TabsPanel>
         <TabsPanel value="diff">
-          <Suspense fallback={<Fallback acl={codePolicy} />}>
+          <Suspense fallback={<Fallback />}>
             <LazyDiffer left={policy} right={codePolicy} />
           </Suspense>
         </TabsPanel>
diff --git a/app/tailwind.css b/app/tailwind.css
index e089d42..812d605 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -61,11 +61,61 @@
   }
 }
 
-.cm-merge-theme {
-  height: 100% !important;
+:root {
+  --cm-bg: var(--color-white);
+  --cm-fg: var(--color-mist-900);
+  --cm-caret: var(--color-mist-900);
+  --cm-selection: var(--color-indigo-100);
+  --cm-selection-match: var(--color-indigo-50);
+  --cm-line-highlight: var(--color-mist-100);
+  --cm-gutter-bg: var(--color-mist-50);
+  --cm-gutter-fg: var(--color-mist-400);
+  --cm-gutter-fg-active: var(--color-mist-700);
+  --cm-gutter-border: var(--color-mist-200);
+  --cm-comment: var(--color-mist-500);
+  --cm-keyword: var(--color-purple-600);
+  --cm-string: var(--color-emerald-700);
+  --cm-type: var(--color-indigo-600);
+  --cm-definition: var(--color-blue-600);
+  --cm-name: var(--color-mist-800);
+  --cm-variable: var(--color-cyan-700);
+  --cm-property: var(--color-violet-600);
+  --cm-atom: var(--color-orange-600);
+  --cm-number: var(--color-orange-600);
+  --cm-link: var(--color-blue-600);
+  --cm-bracket: var(--color-mist-500);
 }
 
-.cm-mergeView {
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cm-bg: var(--color-mist-950);
+    --cm-fg: var(--color-mist-100);
+    --cm-caret: var(--color-mist-100);
+    --cm-selection: var(--color-indigo-900);
+    --cm-selection-match: var(--color-indigo-950);
+    --cm-line-highlight: oklch(18% 0.006 224 / 0.5);
+    --cm-gutter-bg: var(--color-mist-950);
+    --cm-gutter-fg: var(--color-mist-500);
+    --cm-gutter-fg-active: var(--color-mist-300);
+    --cm-gutter-border: var(--color-mist-800);
+    --cm-comment: var(--color-mist-400);
+    --cm-keyword: var(--color-purple-400);
+    --cm-string: var(--color-emerald-400);
+    --cm-type: var(--color-indigo-400);
+    --cm-definition: var(--color-blue-400);
+    --cm-name: var(--color-mist-200);
+    --cm-variable: var(--color-cyan-400);
+    --cm-property: var(--color-violet-400);
+    --cm-atom: var(--color-orange-400);
+    --cm-number: var(--color-orange-400);
+    --cm-link: var(--color-blue-400);
+    --cm-bracket: var(--color-mist-400);
+  }
+}
+
+.cm-merge-theme,
+.cm-mergeView,
+.cm-mergeViewEditor {
   height: 100% !important;
 }
 
@@ -73,10 +123,6 @@
   height: 100%;
 }
 
-.cm-mergeViewEditor {
-  height: 100% !important;
-}
-
 .toast-viewport {
   position: fixed;
   z-index: 50;
@@ -177,8 +223,12 @@
   }
 }
 
-/* Weirdest class name characters but ok */
-.cm-mergeView .ͼ1 .cm-scroller,
-.cm-mergeView .ͼ1 {
+.cm-mergeView .cm-editor,
+.cm-mergeView .cm-editor .cm-scroller {
   height: 100% !important;
 }
+
+.cm-mergeViewEditors {
+  scrollbar-color: var(--cm-gutter-border) transparent;
+  scrollbar-width: auto;
+}
diff --git a/package.json b/package.json
index 31929a8..7e5db25 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/view": "^6.41.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -28,10 +30,9 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@iconify/react": "^6.0.2",
     "@kubernetes/client-node": "^1.4.0",
+    "@lezer/highlight": "^1.2.3",
     "@react-router/node": "^7.14.0",
     "@readme/openapi-parser": "^6.0.1",
-    "@uiw/codemirror-theme-github": "4.25.9",
-    "@uiw/codemirror-theme-xcode": "4.25.9",
     "@uiw/react-codemirror": "4.25.9",
     "arktype": "^2.2.0",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 195e6e4..763b41d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,12 @@ importers:
       '@base-ui/react':
         specifier: ^1.3.0
         version: 1.3.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@codemirror/language':
+        specifier: ^6.12.3
+        version: 6.12.3
+      '@codemirror/view':
+        specifier: ^6.41.0
+        version: 6.41.0
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -40,18 +46,15 @@ importers:
       '@kubernetes/client-node':
         specifier: ^1.4.0
         version: 1.4.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)
+      '@lezer/highlight':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@react-router/node':
         specifier: ^7.14.0
         version: 7.14.0(react-router@7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
       '@readme/openapi-parser':
         specifier: ^6.0.1
         version: 6.0.1(openapi-types@12.1.3)
-      '@uiw/codemirror-theme-github':
-        specifier: 4.25.9
-        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)
-      '@uiw/codemirror-theme-xcode':
-        specifier: 4.25.9
-        version: 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)
       '@uiw/react-codemirror':
         specifier: 4.25.9
         version: 4.25.9(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.18.2(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)(@lezer/common@1.5.2))(@codemirror/language@6.12.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.7)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.41.0)(codemirror@6.0.1(@lezer/common@1.5.2))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -103,9 +106,6 @@ importers:
       react-router-hono-server:
         specifier: 2.25.2
         version: 2.25.2(patch_hash=e94667f181837f2501959f5cf01fa0a9e6ea2883dcb1137be8b1c6178979bc77)(@hono/node-server@1.19.13(hono@4.11.5))(@react-router/dev@7.14.0(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(react-router@7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(terser@5.39.0)(tsx@4.21.0)(typescript@6.0.2)(vite@8.0.8(@types/node@25.6.0)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.3))(yaml@2.8.3))(@types/react@19.2.14)(bufferutil@4.0.9)(hono@4.11.5)(react-router@7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(utf-8-validate@5.0.10)(vite@8.0.8(@types/node@25.6.0)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.3))
-      remix-utils:
-        specifier: ^9.3.1
-        version: 9.3.1(@oslojs/crypto@1.0.1)(@oslojs/encoding@1.1.0)(@standard-schema/spec@1.1.0)(react-router@7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
       restty:
         specifier: ^0.1.35
         version: 0.1.35(typescript@6.0.2)
@@ -1104,9 +1104,6 @@ packages:
   '@lezer/common@1.5.2':
     resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
 
-  '@lezer/highlight@1.2.1':
-    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
-
   '@lezer/highlight@1.2.3':
     resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
 
@@ -1188,18 +1185,6 @@ packages:
   '@neon-rs/load@0.0.4':
     resolution: {integrity: sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==}
 
-  '@oslojs/asn1@1.0.0':
-    resolution: {integrity: sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA==}
-
-  '@oslojs/binary@1.0.0':
-    resolution: {integrity: sha512-9RCU6OwXU6p67H4NODbuxv2S3eenuQ4/WFLrsq+K/k682xrznH5EVWA7N4VFk9VYVcbFtKqur5YQQZc0ySGhsQ==}
-
-  '@oslojs/crypto@1.0.1':
-    resolution: {integrity: sha512-7n08G8nWjAr/Yu3vu9zzrd0L9XnrJfpMioQcvCMxBIiF5orECHe5/3J0jmXRVvgfqMm/+4oxlQ+Sq39COYLcNQ==}
-
-  '@oslojs/encoding@1.1.0':
-    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
-
   '@oxc-project/types@0.124.0':
     resolution: {integrity: sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg==}
 
@@ -2009,19 +1994,6 @@ packages:
       '@codemirror/state': 6.6.0
       '@codemirror/view': '>=6.0.0'
 
-  '@uiw/codemirror-theme-github@4.25.9':
-    resolution: {integrity: sha512-AGpTamNiySKNzq3Jc7QjpwgQRVaHUaBtmOKiUDghYSfEGjsc5uW4NUW70sSU3BnkGv+lCTUnF3175KM24BWZbw==}
-
-  '@uiw/codemirror-theme-xcode@4.25.9':
-    resolution: {integrity: sha512-sMiDpOiW0iiNsLyqL1Vx6wZKOSoVUNfmWbBDtaYzlkRcKzkyJQp68cPIq5VG8Mhl2z+PX5cPbOA0nZEegNLicA==}
-
-  '@uiw/codemirror-themes@4.25.9':
-    resolution: {integrity: sha512-DAHKb/L9ELwjY4nCf/MP/mIllHOn4GQe7RR4x8AMJuNeh9nGRRoo1uPxrxMmUL/bKqe6kDmDbIZ2AlhlqyIJuw==}
-    peerDependencies:
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': '>=6.0.0'
-
   '@uiw/react-codemirror@4.25.9':
     resolution: {integrity: sha512-HftqCBUYShAOH0pGi1CHP8vfm5L8fQ3+0j0VI6lQD6QpK+UBu3J7nxfEN5O/BXMilMNf9ZyFJRvRcuMMOLHMng==}
     peerDependencies:
@@ -3591,42 +3563,6 @@ packages:
   regex@6.0.1:
     resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
-  remix-utils@9.3.1:
-    resolution: {integrity: sha512-Z/CVE9mPKYOKxhSV5q2IeXd5W4zl/B4q9YLQfuR3EYNSOop8riQso6QXGJXd+71S96Ox8/haMl34GyV/WBnoVg==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      '@edgefirst-dev/batcher': ^1.0.0
-      '@edgefirst-dev/jwt': ^1.2.0
-      '@edgefirst-dev/server-timing': ^0.0.1
-      '@oslojs/crypto': ^1.0.1
-      '@oslojs/encoding': ^1.1.0
-      '@standard-schema/spec': ^1.0.0
-      intl-parse-accept-language: ^1.0.0
-      is-ip: ^5.0.1
-      react: ^18.0.0 || ^19.0.0
-      react-router: ^7.0.0
-    peerDependenciesMeta:
-      '@edgefirst-dev/batcher':
-        optional: true
-      '@edgefirst-dev/jwt':
-        optional: true
-      '@edgefirst-dev/server-timing':
-        optional: true
-      '@oslojs/crypto':
-        optional: true
-      '@oslojs/encoding':
-        optional: true
-      '@standard-schema/spec':
-        optional: true
-      intl-parse-accept-language:
-        optional: true
-      is-ip:
-        optional: true
-      react:
-        optional: true
-      react-router:
-        optional: true
-
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -3821,10 +3757,6 @@ packages:
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
-  tagged-tag@1.0.0:
-    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
-    engines: {node: '>=20'}
-
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
@@ -3936,10 +3868,6 @@ packages:
   tweetnacl@0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
 
-  type-fest@5.5.0:
-    resolution: {integrity: sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==}
-    engines: {node: '>=20'}
-
   typescript@6.0.2:
     resolution: {integrity: sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==}
     engines: {node: '>=14.17'}
@@ -5139,10 +5067,6 @@ snapshots:
 
   '@lezer/common@1.5.2': {}
 
-  '@lezer/highlight@1.2.1':
-    dependencies:
-      '@lezer/common': 1.2.3
-
   '@lezer/highlight@1.2.3':
     dependencies:
       '@lezer/common': 1.5.2
@@ -5235,23 +5159,6 @@ snapshots:
   '@neon-rs/load@0.0.4':
     optional: true
 
-  '@oslojs/asn1@1.0.0':
-    dependencies:
-      '@oslojs/binary': 1.0.0
-    optional: true
-
-  '@oslojs/binary@1.0.0':
-    optional: true
-
-  '@oslojs/crypto@1.0.1':
-    dependencies:
-      '@oslojs/asn1': 1.0.0
-      '@oslojs/binary': 1.0.0
-    optional: true
-
-  '@oslojs/encoding@1.1.0':
-    optional: true
-
   '@oxc-project/types@0.124.0': {}
 
   '@oxfmt/binding-android-arm-eabi@0.44.0':
@@ -5645,7 +5552,7 @@ snapshots:
 
   '@shopify/lang-jsonc@1.0.1':
     dependencies:
-      '@lezer/highlight': 1.2.1
+      '@lezer/highlight': 1.2.3
       '@lezer/lr': 1.4.2
 
   '@standard-schema/spec@1.1.0': {}
@@ -5884,28 +5791,6 @@ snapshots:
       '@codemirror/state': 6.6.0
       '@codemirror/view': 6.41.0
 
-  '@uiw/codemirror-theme-github@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)':
-    dependencies:
-      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)
-    transitivePeerDependencies:
-      - '@codemirror/language'
-      - '@codemirror/state'
-      - '@codemirror/view'
-
-  '@uiw/codemirror-theme-xcode@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)':
-    dependencies:
-      '@uiw/codemirror-themes': 4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)
-    transitivePeerDependencies:
-      - '@codemirror/language'
-      - '@codemirror/state'
-      - '@codemirror/view'
-
-  '@uiw/codemirror-themes@4.25.9(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)':
-    dependencies:
-      '@codemirror/language': 6.12.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.41.0
-
   '@uiw/react-codemirror@4.25.9(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.18.2(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.41.0)(@lezer/common@1.5.2))(@codemirror/language@6.12.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.7)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.41.0)(codemirror@6.0.1(@lezer/common@1.5.2))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -7465,16 +7350,6 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
-  remix-utils@9.3.1(@oslojs/crypto@1.0.1)(@oslojs/encoding@1.1.0)(@standard-schema/spec@1.1.0)(react-router@7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5):
-    dependencies:
-      type-fest: 5.5.0
-    optionalDependencies:
-      '@oslojs/crypto': 1.0.1
-      '@oslojs/encoding': 1.1.0
-      '@standard-schema/spec': 1.1.0
-      react: 19.2.5
-      react-router: 7.14.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -7708,8 +7583,6 @@ snapshots:
 
   tabbable@6.4.0: {}
 
-  tagged-tag@1.0.0: {}
-
   tailwind-merge@3.5.0: {}
 
   tailwindcss-animate@1.0.7(tailwindcss@4.2.2):
@@ -7902,10 +7775,6 @@ snapshots:
 
   tweetnacl@0.14.5: {}
 
-  type-fest@5.5.0:
-    dependencies:
-      tagged-tag: 1.0.0
-
   typescript@6.0.2: {}
 
   ulidx@2.4.1: