chore: add import sorting

.oxfmtrc.jsonc

@@ -1,4 +1,15 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
   "ignorePatterns": ["src/spicedb-common/protodefs", "examples", "public"],
+  "experimentalSortImports": {
+    "groups": [
+      ["side-effect"],
+      ["builtin"],
+      ["external", "type-external"],
+      ["internal", "type-internal"],
+      ["parent", "type-parent"],
+      ["sibling", "type-sibling"],
+      ["index", "type-index"],
+    ],
+  },
 }

api/share.ts

@@ -1,6 +1,7 @@
+import { createHash } from "crypto";
+
 import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import type { VercelRequest, VercelResponse } from "@vercel/node";
-import { createHash } from "crypto";
 
 const encodeURL = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
 

eslint.config.js

@@ -1,7 +1,7 @@
 import js from "@eslint/js";
-import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(

src/App.tsx

@@ -1,15 +1,8 @@
-import { ConfirmDialogProvider } from "./playground-ui/ConfirmDialogProvider";
-import { useGoogleAnalytics } from "./playground-ui/GoogleAnalyticsHook";
-import PlaygroundUIThemed from "./playground-ui/PlaygroundUIThemed";
 import "react-reflex/styles.css";
 import "typeface-roboto-mono/index.css"; // Import the Roboto Mono font.
 import "./App.css";
-import { EmbeddedPlayground } from "./components/EmbeddedPlayground";
-import { FullPlayground } from "./components/FullPlayground";
-import { InlinePlayground } from "./components/InlinePlayground";
-import AppConfig from "./services/configservice";
-import { PLAYGROUND_UI_COLORS } from "./theme";
-import { ThemeProvider } from "@/components/ThemeProvider";
+
+import { PostHogProvider } from "@posthog/react";
 import {
   Outlet,
   RouterProvider,
@@ -18,9 +11,19 @@ import {
   createRootRoute,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
-import { Toaster } from "./components/ui/sonner";
 import posthog from "posthog-js";
-import { PostHogProvider } from "@posthog/react";
+
+import { ThemeProvider } from "@/components/ThemeProvider";
+
+import { EmbeddedPlayground } from "./components/EmbeddedPlayground";
+import { FullPlayground } from "./components/FullPlayground";
+import { InlinePlayground } from "./components/InlinePlayground";
+import { Toaster } from "./components/ui/sonner";
+import { ConfirmDialogProvider } from "./playground-ui/ConfirmDialogProvider";
+import { useGoogleAnalytics } from "./playground-ui/GoogleAnalyticsHook";
+import PlaygroundUIThemed from "./playground-ui/PlaygroundUIThemed";
+import AppConfig from "./services/configservice";
+import { PLAYGROUND_UI_COLORS } from "./theme";
 
 const rootRoute = createRootRoute({
   component: () => (

src/components/CheckDebugTraceView.tsx

@@ -1,10 +1,3 @@
-import {
-  CaveatEvalInfo,
-  CaveatEvalInfo_Result,
-  CheckDebugTrace,
-  CheckDebugTrace_Permissionship,
-  CheckDebugTrace_PermissionType,
-} from "../spicedb-common/protodefs/authzed/api/v1/debug_pb";
 import type { JsonObject, JsonValue } from "@bufbuild/protobuf";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
@@ -15,7 +8,15 @@ import HighlightOffIcon from "@material-ui/icons/HighlightOff";
 import TreeItem from "@material-ui/lab/TreeItem";
 import TreeView from "@material-ui/lab/TreeView";
 import clsx from "clsx";
+
 import { LocalParseService } from "../services/localparse";
+import {
+  CaveatEvalInfo,
+  CaveatEvalInfo_Result,
+  CheckDebugTrace,
+  CheckDebugTrace_Permissionship,
+  CheckDebugTrace_PermissionType,
+} from "../spicedb-common/protodefs/authzed/api/v1/debug_pb";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/DatastoreRelationshipEditor.tsx

@@ -1,24 +1,25 @@
-import {
-  RelationTupleHighlight,
-  RelationshipEditor,
-} from "../spicedb-common/components/relationshipeditor/RelationshipEditor";
+import { Theme } from "@glideapps/glide-data-grid";
+import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
+import { useCallback, useMemo, useState } from "react";
+import useDeepCompareEffect from "use-deep-compare-effect";
+
+import { DataStore, DataStoreItemKind } from "../services/datastore";
+import { Services } from "../services/services";
 import { CommentCellPrefix } from "../spicedb-common/components/relationshipeditor/columns";
 import {
   RelationshipDatum,
   relationshipToDatum,
   toFullRelationshipString,
 } from "../spicedb-common/components/relationshipeditor/data";
+import {
+  RelationTupleHighlight,
+  RelationshipEditor,
+} from "../spicedb-common/components/relationshipeditor/RelationshipEditor";
 import { RelationshipOrComment, parseRelationshipsAndComments } from "../spicedb-common/parsing";
 import {
   DeveloperError,
   DeveloperError_Source,
 } from "../spicedb-common/protodefs/developer/v1/developer_pb";
-import { Theme } from "@glideapps/glide-data-grid";
-import { useCallback, useMemo, useState } from "react";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { DataStore, DataStoreItemKind } from "../services/datastore";
-import { Services } from "../services/services";
-import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
 
 const partialRelationshipCommentPrefix = "partial relationship: ";
 

src/components/EditorDisplay.tsx

@@ -1,34 +1,37 @@
-import registerDSLanguage, {
-  DS_DARK_THEME_NAME,
-  DS_LANGUAGE_NAME,
-  DS_THEME_NAME,
-} from "../spicedb-common/lang/dslang";
-import { TextRange } from "../spicedb-common/include/protobuf-parser";
-import { RelationshipFound } from "../spicedb-common/parsing";
-import {
-  DeveloperError,
-  DeveloperWarning,
-} from "../spicedb-common/protodefs/developer/v1/developer_pb";
+import "react-reflex/styles.css";
+
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import Editor, { DiffEditor, useMonaco } from "@monaco-editor/react";
+import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
+import { useNavigate, useLocation } from "@tanstack/react-router";
 import lineColumn from "line-column";
 import monaco from "monaco-editor";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import "react-reflex/styles.css";
-import { useNavigate, useLocation } from "@tanstack/react-router";
+
 import { ScrollLocation, useCookieService } from "../services/cookieservice";
 import { DataStore, DataStoreItem, DataStoreItemKind } from "../services/datastore";
 import { LocalParseState } from "../services/localparse";
 import { Services } from "../services/services";
+import { TextRange } from "../spicedb-common/include/protobuf-parser";
+import registerDSLanguage, {
+  DS_DARK_THEME_NAME,
+  DS_LANGUAGE_NAME,
+  DS_THEME_NAME,
+} from "../spicedb-common/lang/dslang";
+import { RelationshipFound } from "../spicedb-common/parsing";
+import {
+  DeveloperError,
+  DeveloperWarning,
+} from "../spicedb-common/protodefs/developer/v1/developer_pb";
+
 import { ERROR_SOURCE_TO_ITEM } from "./panels/errordisplays";
 import registerTupleLanguage, {
   TUPLE_DARK_THEME_NAME,
   TUPLE_LANGUAGE_NAME,
   TUPLE_THEME_NAME,
 } from "./tuplelang";
-import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
 
 const useStyles = makeStyles(() =>
   createStyles({

src/components/EmbeddedPlayground.tsx

@@ -1,12 +1,7 @@
-import { DS_EMBED_DARK_THEME_NAME } from "../spicedb-common/lang/dslang";
-import { RelationshipFound, parseRelationship } from "../spicedb-common/parsing";
-import {
-  CheckOperationParametersSchema,
-  CheckOperationsResult,
-  CheckOperationsResult_Membership,
-  CheckOperationsResultSchema,
-} from "../spicedb-common/protodefs/developer/v1/developer_pb";
-import { useDeveloperService } from "../spicedb-common/services/developerservice";
+import "./fonts.css";
+
+import type { ParsedObjectDefinition } from "@authzed/spicedb-parser-js";
+import { create } from "@bufbuild/protobuf";
 import {
   faCaretDown,
   faDatabase,
@@ -22,22 +17,29 @@ import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
 import clsx from "clsx";
 import React, { PropsWithChildren, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
 import { useLiveCheckService } from "../services/check";
 import AppConfig from "../services/configservice";
 import { DataStore, DataStoreItemKind, useReadonlyDatastore } from "../services/datastore";
 import { useLocalParseService } from "../services/localparse";
 import { useProblemService } from "../services/problem";
 import { Services } from "../services/services";
 import { useValidationService } from "../services/validation";
+import { DS_EMBED_DARK_THEME_NAME } from "../spicedb-common/lang/dslang";
+import { RelationshipFound, parseRelationship } from "../spicedb-common/parsing";
+import {
+  CheckOperationParametersSchema,
+  CheckOperationsResult,
+  CheckOperationsResult_Membership,
+  CheckOperationsResultSchema,
+} from "../spicedb-common/protodefs/developer/v1/developer_pb";
+import { useDeveloperService } from "../spicedb-common/services/developerservice";
+
 import { DatastoreRelationshipEditor } from "./DatastoreRelationshipEditor";
 import { EditorDisplay } from "./EditorDisplay";
 import { ShareLoader } from "./ShareLoader";
 
-import type { ParsedObjectDefinition } from "@authzed/spicedb-parser-js";
-import "./fonts.css";
-import { create } from "@bufbuild/protobuf";
-import { toast } from "sonner";
-
 const useStyles = makeStyles(() =>
   createStyles({
     root: {

src/components/ExamplesDropdown.tsx

@@ -1,6 +1,5 @@
-import { Example, LoadExamples } from "../spicedb-common/examples";
-
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { usePostHog } from "@posthog/react";
+import { useEffect, useState } from "react";
 
 import {
   AlertDialog,
@@ -12,9 +11,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 
-import { useEffect, useState } from "react";
-import { usePostHog } from "@posthog/react";
+import { Example, LoadExamples } from "../spicedb-common/examples";
 
 export function ExamplesDropdown({
   disabled,

src/components/FullPlayground.tsx

@@ -1,19 +1,10 @@
-import { useEffect, useMemo, useState, type ReactNode, type ChangeEvent } from "react";
+import "react-reflex/styles.css";
 
-import { DiscordChatCrate } from "../playground-ui/DiscordChatCrate";
-import { useGoogleAnalytics } from "../playground-ui/GoogleAnalyticsHook";
-import TabLabel from "../playground-ui/TabLabel";
-import { Example } from "../spicedb-common/examples";
-import { useDeveloperService } from "../spicedb-common/services/developerservice";
-import { useZedTerminalService } from "../spicedb-common/services/zedterminalservice";
-import { parseValidationYAML } from "../spicedb-common/validationfileformat";
 import { LinearProgress, Tab, Tabs } from "@material-ui/core";
 import AppBar from "@material-ui/core/AppBar";
-import { Button } from "@/components/ui/button";
-import { ButtonGroup } from "@/components/ui/button-group";
-import TextField from "@material-ui/core/TextField";
 import { Theme, createStyles, darken, makeStyles } from "@material-ui/core/styles";
 import { alpha } from "@material-ui/core/styles/colorManipulator";
+import TextField from "@material-ui/core/TextField";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import CodeIcon from "@material-ui/icons/Code";
@@ -26,17 +17,25 @@ import HighlightOffIcon from "@material-ui/icons/HighlightOff";
 import InsertDriveFileIcon from "@material-ui/icons/InsertDriveFile";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import ShareIcon from "@material-ui/icons/Share";
-import { Alert, AlertTitle } from "./ui/alert";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useNavigate, useLocation } from "@tanstack/react-router";
 import clsx from "clsx";
 import { saveAs } from "file-saver";
 import { fileDialog } from "file-select-dialog";
+import { CircleX, MessageCircleWarning } from "lucide-react";
+import { useEffect, useMemo, useState, type ReactNode, type ChangeEvent } from "react";
 import { useCookies } from "react-cookie";
-import "react-reflex/styles.css";
-import { useNavigate, useLocation } from "@tanstack/react-router";
 import sjcl from "sjcl";
+import { toast } from "sonner";
 import { useKeyboardShortcuts } from "use-keyboard-shortcuts";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
 import DISCORD from "../assets/discord.svg?react";
+import { DiscordChatCrate } from "../playground-ui/DiscordChatCrate";
+import { useGoogleAnalytics } from "../playground-ui/GoogleAnalyticsHook";
+import TabLabel from "../playground-ui/TabLabel";
 import { useLiveCheckService } from "../services/check";
 import AppConfig from "../services/configservice";
 import { RelationshipsEditorType, useCookieService } from "../services/cookieservice";
@@ -52,23 +51,27 @@ import { ProblemService, useProblemService } from "../services/problem";
 import { Services } from "../services/services";
 import { ValidationResult, ValidationStatus, useValidationService } from "../services/validation";
 import { createValidationYAML, normalizeValidationYAML } from "../services/validationfileformat";
+import { Example } from "../spicedb-common/examples";
+import { useDeveloperService } from "../spicedb-common/services/developerservice";
+import { useZedTerminalService } from "../spicedb-common/services/zedterminalservice";
+import { parseValidationYAML } from "../spicedb-common/validationfileformat";
+
 import { DatastoreRelationshipEditor } from "./DatastoreRelationshipEditor";
 import { EditorDisplay, EditorDisplayProps } from "./EditorDisplay";
 import { ExamplesDropdown } from "./ExamplesDropdown";
 import { GuidedTour, TourElementClass } from "./GuidedTour";
 import { AT, ET, NS, VL } from "./KindIcons";
 import { NormalLogo, SmallLogo } from "./Logos";
-import { ShareLoader } from "./ShareLoader";
-import { ValidateButton } from "./ValidationButton";
 import { Panel, useSummaryStyles } from "./panels/base/common";
 import { ReflexedPanelDisplay } from "./panels/base/reflexed";
 import { ProblemsPanel, ProblemsSummary } from "./panels/problems";
 import { TerminalPanel, TerminalSummary } from "./panels/terminal";
 import { ValidationPanel, ValidationSummary } from "./panels/validation";
 import { VisualizerPanel, VisualizerSummary } from "./panels/visualizer";
 import { WatchesPanel, WatchesSummary } from "./panels/watches";
-import { toast } from "sonner";
-import { CircleX, MessageCircleWarning } from "lucide-react";
+import { ShareLoader } from "./ShareLoader";
+import { Alert, AlertTitle } from "./ui/alert";
+import { ValidateButton } from "./ValidationButton";
 
 const TOOLBAR_BREAKPOINT = 1550; // pixels
 

src/components/InlinePlayground.tsx

@@ -1,8 +1,4 @@
-import TabLabel from "../playground-ui/TabLabel";
-import TenantGraph from "../spicedb-common/components/graph/TenantGraph";
 import { parseSchema } from "@authzed/spicedb-parser-js";
-import { parseRelationships } from "../spicedb-common/parsing";
-import { useDeveloperService } from "../spicedb-common/services/developerservice";
 import AppBar from "@material-ui/core/AppBar";
 import Button from "@material-ui/core/Button";
 import { createStyles, darken, makeStyles, Theme } from "@material-ui/core/styles";
@@ -12,11 +8,17 @@ import BubbleChartIcon from "@material-ui/icons/BubbleChart";
 import LaunchIcon from "@material-ui/icons/Launch";
 import clsx from "clsx";
 import React, { useState } from "react";
+
+import TabLabel from "../playground-ui/TabLabel";
 import { useLiveCheckService } from "../services/check";
 import { DataStore, DataStoreItemKind, useReadonlyDatastore } from "../services/datastore";
 import { useLocalParseService } from "../services/localparse";
 import { useProblemService } from "../services/problem";
 import { useValidationService } from "../services/validation";
+import TenantGraph from "../spicedb-common/components/graph/TenantGraph";
+import { parseRelationships } from "../spicedb-common/parsing";
+import { useDeveloperService } from "../spicedb-common/services/developerservice";
+
 import { DatastoreRelationshipEditor } from "./DatastoreRelationshipEditor";
 import { EditorDisplay } from "./EditorDisplay";
 import { AT, ET, NS, VL } from "./KindIcons";

src/components/KindIcons.tsx

@@ -1,8 +1,9 @@
+import "react-reflex/styles.css";
+
 import { faDatabase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import WarningIcon from "@material-ui/icons/Warning";
-import "react-reflex/styles.css";
 
 interface StyleProps {
   small?: boolean;

src/components/Logos.tsx

@@ -1,4 +1,5 @@
 import useMediaQuery from "@material-ui/core/useMediaQuery";
+
 import AUTHZED_DM_SMALL_LOGO from "../assets/favicon-dark-mode.svg?react";
 import AUTHZED_SMALL_LOGO from "../assets/favicon.svg?react";