@marimo-team/frontend 0.15.1-dev21 → 0.15.1-dev24

package/src/components/app-config/ai-config.tsx

@@ -1,8 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { InfoIcon } from "lucide-react";
-import React from "react";
+import { BrainIcon, ChevronRightIcon, InfoIcon } from "lucide-react";
+import React, { useMemo } from "react";
+import {
+  Button as AriaButton,
+  Tree,
+  TreeItem,
+  TreeItemContent,
+} from "react-aria-components";
 import type { FieldPath, UseFormReturn } from "react-hook-form";
+import { useWatch } from "react-hook-form";
+import useEvent from "react-use-event-hook";
 import {
   FormControl,
   FormDescription,
@@ -16,24 +24,34 @@ import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
 import { NativeSelect } from "@/components/ui/native-select";
 import { Textarea } from "@/components/ui/textarea";
-import type { QualifiedModelId } from "@/core/ai/ids/ids";
+import {
+  AiModelId,
+  type ProviderId,
+  type QualifiedModelId,
+} from "@/core/ai/ids/ids";
+import { type AiModel, AiModelRegistry } from "@/core/ai/model-registry";
 import { CopilotConfig } from "@/core/codemirror/copilot/copilot-config";
 import { DEFAULT_AI_MODEL, type UserConfig } from "@/core/config/config-schema";
 import { isWasm } from "@/core/wasm/utils";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
+import { Strings } from "@/utils/strings";
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import {
   AiProviderIcon,
   type AiProviderIconProps,
 } from "../ai/ai-provider-icon";
+import { getTagColour } from "../ai/display-helpers";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../ui/accordion";
+import { Checkbox } from "../ui/checkbox";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { ExternalLink } from "../ui/links";
+import { Switch } from "../ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { Tooltip } from "../ui/tooltip";
 import { SettingSubtitle } from "./common";
@@ -46,7 +64,7 @@ const formItemClasses = "flex flex-row items-center space-x-1 space-y-0";
 interface AiConfigProps {
   form: UseFormReturn<UserConfig>;
   config: UserConfig;
-  onSubmit: (values: UserConfig) => Promise<void>;
+  onSubmit: (values: UserConfig) => void;
 }
 
 interface AiProviderTitleProps {
@@ -189,7 +207,7 @@ interface ModelSelectorProps {
   description?: React.ReactNode;
   disabled?: boolean;
   label: string;
-  onSubmit: (values: UserConfig) => Promise<void>;
+  onSubmit: (values: UserConfig) => void;
 }
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
@@ -213,6 +231,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
         const selectModel = (modelId: QualifiedModelId) => {
           field.onChange(modelId);
+          // Usually not needed, but a hack to force form values to be updated
           onSubmit(form.getValues());
         };
 
@@ -340,7 +359,7 @@ const renderCopilotProvider = ({
 }: {
   form: UseFormReturn<UserConfig>;
   config: UserConfig;
-  onSubmit: (values: UserConfig) => Promise<void>;
+  onSubmit: (values: UserConfig) => void;
 }) => {
   const copilot = form.getValues("completion.copilot");
   if (copilot === false) {
@@ -388,8 +407,88 @@ const renderCopilotProvider = ({
   }
 };
 
-const SettingGroup = ({ children }: { children: React.ReactNode }) => {
-  return <div className="flex flex-col gap-4 pb-4">{children}</div>;
+const SettingGroup = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-4 pb-4", className)}>{children}</div>
+  );
+};
+
+interface ModelListItemProps {
+  qualifiedId: QualifiedModelId;
+  model: AiModel;
+  isEnabled: boolean;
+  onToggle: (modelId: QualifiedModelId) => void;
+}
+
+const ModelListItem: React.FC<ModelListItemProps> = ({
+  qualifiedId,
+  model,
+  isEnabled,
+  onToggle,
+}) => {
+  const handleToggle = () => {
+    onToggle(qualifiedId);
+  };
+
+  return (
+    <TreeItem
+      id={qualifiedId}
+      textValue={model.name}
+      className="pl-6 outline-none data-focused:bg-muted/50 hover:bg-muted/50"
+      onAction={handleToggle}
+    >
+      <TreeItemContent>
+        <div className="flex items-center justify-between px-4 py-3 border-b last:border-b-0 cursor-pointer outline-none">
+          <ModelInfoCard model={model} qualifiedId={qualifiedId} />
+          <Switch checked={isEnabled} onClick={handleToggle} size="sm" />
+        </div>
+      </TreeItemContent>
+    </TreeItem>
+  );
+};
+
+const ModelInfoCard = ({
+  model,
+  qualifiedId,
+}: {
+  model: AiModel;
+  qualifiedId: QualifiedModelId;
+}) => {
+  return (
+    <div className="flex items-center gap-3 flex-1">
+      <div className="flex flex-col flex-1">
+        <div className="flex items-center gap-2">
+          <h3 className="font-medium">{model.name}</h3>
+        </div>
+        <span className="text-xs text-muted-foreground font-mono">
+          {qualifiedId}
+        </span>
+        {model.description && !model.custom && (
+          <p className="text-sm text-muted-secondary mt-1 line-clamp-2">
+            {model.description}
+          </p>
+        )}
+
+        {model.thinking && (
+          <div
+            className={cn(
+              "flex items-center gap-1 rounded px-1 py-0.5 w-fit mt-1.5",
+              getTagColour("thinking"),
+            )}
+          >
+            <BrainIcon className="h-3 w-3" />
+            <span className="text-xs font-medium">Reasoning</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
@@ -827,16 +926,170 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
   );
 };
 
+interface ProviderTreeItemProps {
+  providerId: ProviderId;
+  models: AiModel[];
+  enabledModels: Set<QualifiedModelId>;
+  onToggleModel: (modelId: QualifiedModelId) => void;
+  onToggleProvider: (providerId: ProviderId, enable: boolean) => void;
+}
+
+const ProviderTreeItem: React.FC<ProviderTreeItemProps> = ({
+  providerId,
+  models,
+  enabledModels,
+  onToggleModel,
+  onToggleProvider,
+}) => {
+  const enabledCount = models.filter((model) =>
+    enabledModels.has(new AiModelId(providerId, model.model).id),
+  ).length;
+  const totalCount = models.length;
+  const maybeProviderInfo = AiModelRegistry.getProviderInfo(providerId);
+  const name = maybeProviderInfo?.name || Strings.startCase(providerId);
+
+  const checkboxState =
+    enabledCount === 0
+      ? false
+      : enabledCount === totalCount
+        ? true
+        : "indeterminate";
+
+  const handleProviderToggle = useEvent(() => {
+    const shouldEnable = enabledCount < totalCount / 2;
+    onToggleProvider(providerId, shouldEnable);
+  });
+
+  return (
+    <TreeItem
+      id={providerId}
+      hasChildItems={true}
+      textValue={providerId}
+      className="outline-none data-focused:bg-muted/50 group"
+    >
+      <TreeItemContent>
+        <div className="flex items-center gap-3 px-3 py-3 hover:bg-muted/50 cursor-pointer outline-none focus-visible:outline-none">
+          <Checkbox
+            checked={checkboxState}
+            onCheckedChange={handleProviderToggle}
+            onClick={Events.stopPropagation()}
+          />
+          <AiProviderIcon provider={providerId} className="h-5 w-5" />
+          <div className="flex items-center justify-between w-full">
+            <h2 className="font-semibold">{name}</h2>
+            <p className="text-sm text-muted-secondary">
+              {enabledCount}/{totalCount} models
+            </p>
+          </div>
+          <AriaButton slot="chevron">
+            <ChevronRightIcon className="h-4 w-4 text-muted-foreground shrink-0 transition-transform duration-200 group-data-[expanded]:rotate-90" />
+          </AriaButton>
+        </div>
+      </TreeItemContent>
+
+      {models.map((model) => {
+        const qualifiedId = new AiModelId(providerId, model.model).id;
+        return (
+          <ModelListItem
+            key={qualifiedId}
+            qualifiedId={qualifiedId}
+            model={model}
+            isEnabled={enabledModels.has(qualifiedId)}
+            onToggle={onToggleModel}
+          />
+        );
+      })}
+    </TreeItem>
+  );
+};
+
+export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
+  form,
+  onSubmit,
+}) => {
+  const aiModelRegistry = useMemo(
+    () =>
+      AiModelRegistry.create({
+        displayedModels: [],
+        customModels: ["openrouter/deepseek-r1-distill-llama-70b"],
+      }),
+    [],
+  );
+  const currentDisplayedModels = useWatch({
+    control: form.control,
+    name: "ai.models.displayed_models",
+    defaultValue: [],
+  }) as QualifiedModelId[];
+  const currentDisplayedModelsSet = new Set(currentDisplayedModels);
+  const modelsByProvider = aiModelRegistry.getGroupedModelsByProvider();
+
+  const toggleModelDisplay = useEvent((modelId: QualifiedModelId) => {
+    const newModels = currentDisplayedModelsSet.has(modelId)
+      ? currentDisplayedModels.filter((id) => id !== modelId)
+      : [...currentDisplayedModels, modelId];
+
+    form.setValue("ai.models.displayed_models", newModels);
+    onSubmit(form.getValues());
+  });
+
+  const toggleProviderModels = useEvent(
+    async (providerId: ProviderId, enable: boolean) => {
+      const providerModels = modelsByProvider.get(providerId) || [];
+      const qualifiedModelIds = new Set(
+        providerModels.map((m) => new AiModelId(providerId, m.model).id),
+      );
+
+      // If enabled, we add all provider models that aren't already enabled
+      // Else, remove all provider models
+      const newModels: QualifiedModelId[] = enable
+        ? [...new Set([...currentDisplayedModels, ...qualifiedModelIds])]
+        : currentDisplayedModels.filter((id) => !qualifiedModelIds.has(id));
+
+      form.setValue("ai.models.displayed_models", newModels);
+      onSubmit(form.getValues());
+    },
+  );
+
+  return (
+    <SettingGroup>
+      <p className="text-sm text-muted-secondary mb-4">
+        Control which AI models are displayed in model selection dropdowns. When
+        no models are selected, all available models will be shown.
+      </p>
+
+      <div className="border rounded-md bg-background">
+        <Tree
+          aria-label="AI Models by Provider"
+          className="flex-1 overflow-auto outline-none focus-visible:outline-none"
+          selectionMode="none"
+        >
+          {[...modelsByProvider.entries()].map(([providerId, models]) => (
+            <ProviderTreeItem
+              key={providerId}
+              providerId={providerId}
+              models={models}
+              enabledModels={currentDisplayedModelsSet}
+              onToggleModel={toggleModelDisplay}
+              onToggleProvider={toggleProviderModels}
+            />
+          ))}
+        </Tree>
+      </div>
+    </SettingGroup>
+  );
+};
+
 export const AiConfig: React.FC<AiConfigProps> = ({
   form,
   config,
   onSubmit,
 }) => {
   return (
-    <Tabs defaultValue="ai-features">
+    <Tabs defaultValue="ai-features" className="flex-1">
       <TabsList className="mb-2">
         <TabsTrigger value="ai-features">AI Features</TabsTrigger>
         <TabsTrigger value="ai-providers">AI Providers</TabsTrigger>
+        <TabsTrigger value="ai-models">AI Models</TabsTrigger>
       </TabsList>
 
       <TabsContent value="ai-features">
@@ -850,6 +1103,9 @@ export const AiConfig: React.FC<AiConfigProps> = ({
       <TabsContent value="ai-providers">
         <AiProvidersConfig form={form} config={config} onSubmit={onSubmit} />
       </TabsContent>
+      <TabsContent value="ai-models">
+        <AiModelDisplayConfig form={form} config={config} onSubmit={onSubmit} />
+      </TabsContent>
     </Tabs>
   );
 };

package/src/components/app-config/app-config-button.tsx

@@ -51,7 +51,7 @@ export const ConfigButton: React.FC<Props> = ({
   );
 
   const userSettingsDialog = (
-    <DialogContent className="w-[80vw] h-[70vh] overflow-hidden sm:max-w-5xl top-[15vh] p-0">
+    <DialogContent className="w-[90vw] h-[90vh] overflow-hidden sm:max-w-5xl top-[5vh] p-0">
       <VisuallyHidden>
         <DialogTitle>User settings</DialogTitle>
       </VisuallyHidden>

package/src/components/app-config/app-config-form.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
+import { useEffect, useId } from "react";
 import { useForm } from "react-hook-form";
 import {
   Form,
@@ -14,6 +14,7 @@ import {
 import { useAppConfig } from "@/core/config/config";
 import { getAppWidths } from "@/core/config/widths";
 import { useRequestClient } from "@/core/network/requests";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
 import { arrayToggle } from "@/utils/arrays";
 import {
   type AppConfig,
@@ -32,9 +33,13 @@ import {
   SQL_OUTPUT_SELECT_OPTIONS,
 } from "./common";
 
+const FORM_DEBOUNCE = 100; // ms;
+
 export const AppConfigForm: React.FC = () => {
   const [config, setConfig] = useAppConfig();
   const { saveAppConfig } = useRequestClient();
+  const htmlCheckboxId = useId();
+  const ipynbCheckboxId = useId();
 
   // Create form
   const form = useForm<AppConfig>({
@@ -52,6 +57,10 @@ export const AppConfigForm: React.FC = () => {
       });
   };
 
+  const debouncedSubmit = useDebouncedCallback((v: AppConfig) => {
+    onSubmit(v);
+  }, FORM_DEBOUNCE);
+
   // When width is changed, dispatch a resize event so widgets know to resize
   useEffect(() => {
     window.dispatchEvent(new Event("resize"));
@@ -60,7 +69,7 @@ export const AppConfigForm: React.FC = () => {
   return (
     <Form {...form}>
       <form
-        onChange={form.handleSubmit(onSubmit)}
+        onChange={form.handleSubmit(debouncedSubmit)}
         className="flex flex-col gap-6"
       >
         <div>
@@ -253,23 +262,25 @@ export const AppConfigForm: React.FC = () => {
                       <div className="flex gap-4">
                         <div className="flex items-center space-x-2">
                           <Checkbox
-                            id="html-checkbox"
+                            id={htmlCheckboxId}
+                            data-testid="html-checkbox"
                             checked={field.value.includes("html")}
                             onCheckedChange={() => {
                               field.onChange(arrayToggle(field.value, "html"));
                             }}
                           />
-                          <FormLabel htmlFor="html-checkbox">HTML</FormLabel>
+                          <FormLabel htmlFor={htmlCheckboxId}>HTML</FormLabel>
                         </div>
                         <div className="flex items-center space-x-2">
                           <Checkbox
-                            id="ipynb-checkbox"
+                            id={ipynbCheckboxId}
+                            data-testid="ipynb-checkbox"
                             checked={field.value.includes("ipynb")}
                             onCheckedChange={() => {
                               field.onChange(arrayToggle(field.value, "ipynb"));
                             }}
                           />
-                          <FormLabel htmlFor="ipynb-checkbox">IPYNB</FormLabel>
+                          <FormLabel htmlFor={ipynbCheckboxId}>IPYNB</FormLabel>
                         </div>
                       </div>
                     </FormControl>

package/src/components/app-config/user-config-form.tsx

@@ -41,6 +41,7 @@ import { getAppWidths } from "@/core/config/widths";
 import { marimoVersionAtom } from "@/core/meta/state";
 import { useRequestClient } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import { THEMES } from "@/theme/useTheme";
 import { arrayToggle } from "@/utils/arrays";
@@ -106,6 +107,8 @@ export const activeUserConfigCategoryAtom = atom<SettingCategoryId>(
   categories[0].id,
 );
 
+const FORM_DEBOUNCE = 100; // ms;
+
 export const UserConfigForm: React.FC = () => {
   const [config, setConfig] = useUserConfig();
   const formElement = useRef<HTMLFormElement>(null);
@@ -123,11 +126,12 @@ export const UserConfigForm: React.FC = () => {
     defaultValues: config,
   });
 
-  const onSubmit = async (values: UserConfig) => {
+  const onSubmitNotDebounced = async (values: UserConfig) => {
     await saveUserConfig({ config: values }).then(() => {
       setConfig(values);
     });
   };
+  const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 
   const isWasmRuntime = isWasm();
   const htmlCheckboxId = useId();

package/src/core/ai/__tests__/model-registry.test.ts

@@ -78,21 +78,45 @@ describe("AiModelRegistry", () => {
       const displayedModels = ["openai/gpt-4", "anthropic/claude-3-sonnet"];
       const registry = AiModelRegistry.create({ displayedModels });
 
+      const ids = [...registry.getModelsMap().keys()];
+      expect(ids).toEqual(["openai/gpt-4", "anthropic/claude-3-sonnet"]);
       expect(registry.getCustomModels()).toEqual(new Set());
       expect(registry.getDisplayedModels()).toEqual(new Set(displayedModels));
     });
 
     it("should create registry with both custom and displayed models", () => {
       const customModels = ["openai/custom-gpt"];
-      const displayedModels = ["openai/gpt-4", "anthropic/claude-3-sonnet"];
+      const displayedModels = ["openai/custom-gpt"];
       const registry = AiModelRegistry.create({
         customModels,
         displayedModels,
       });
 
+      const ids = [...registry.getModelsMap().keys()];
+      expect(ids).toEqual(["openai/custom-gpt"]);
       expect(registry.getCustomModels()).toEqual(new Set(customModels));
       expect(registry.getDisplayedModels()).toEqual(new Set(displayedModels));
     });
+
+    it("should create registry with non-existent displayed_model", () => {
+      const customModels = ["openai/custom-gpt"];
+      const displayedModels = ["something-wrong/model-id"];
+      const registry = AiModelRegistry.create({
+        customModels,
+        displayedModels,
+      });
+
+      const ids = [...registry.getModelsMap().keys()];
+      // Include custom and all default ones.
+      expect(ids).toEqual([
+        "openai/custom-gpt",
+        "openai/gpt-4",
+        "anthropic/claude-3-sonnet",
+        "google/gemini-pro",
+        "openai/multi-model",
+        "anthropic/multi-model",
+      ]);
+    });
   });
 
   describe("getModelsByProvider", () => {

package/src/core/ai/model-registry.ts

@@ -7,6 +7,7 @@ import type {
 } from "@marimo-team/llm-info";
 import { models } from "@marimo-team/llm-info/models.json";
 import { providers } from "@marimo-team/llm-info/providers.json";
+import { Logger } from "@/utils/Logger";
 import { MultiMap } from "@/utils/multi-map";
 import { once } from "@/utils/once";
 import type { ProviderId } from "./ids/ids";
@@ -14,6 +15,7 @@ import { AiModelId, type QualifiedModelId, type ShortModelId } from "./ids/ids";
 
 export interface AiModel extends AiModelType {
   roles: Role[];
+  model: ShortModelId;
   providers: ProviderId[];
   /** Whether this is a custom model. */
   custom: boolean;
@@ -25,6 +27,7 @@ const getKnownModelMap = once((): ReadonlyMap<QualifiedModelId, AiModel> => {
     const modelId = model.model as ShortModelId;
     const modelInfo: AiModel = {
       ...model,
+      model: model.model as ShortModelId,
       roles: model.roles.map((role) => role as Role),
       providers: model.providers as ProviderId[],
       custom: false,
@@ -84,14 +87,42 @@ export class AiModelRegistry {
    * Builds the maps of models by provider and custom models.
    */
   private buildMaps() {
-    const displayedModels = this.displayedModels;
+    let result = AiModelRegistry.buildMapsFromConfig({
+      displayedModels: this.displayedModels,
+      customModels: this.customModels,
+    });
+
+    // If we got zero results, then build the maps with no displayedModels
+    // This can happen if displayedModels is configured to non existent models
+    if (result.modelsMap.size === 0) {
+      Logger.error(
+        "The configured displayed_models have filtered out all registered models. Reverting back to showing all models.",
+        [...this.displayedModels],
+      );
+
+      result = AiModelRegistry.buildMapsFromConfig({
+        displayedModels: new Set(),
+        customModels: this.customModels,
+      });
+    }
+
+    this.modelsByProviderMap = result.modelsByProviderMap;
+    this.modelsMap = result.modelsMap;
+  }
+
+  private static buildMapsFromConfig(opts: {
+    customModels: ReadonlySet<QualifiedModelId>;
+    displayedModels: ReadonlySet<QualifiedModelId>;
+  }) {
+    const { displayedModels, customModels } = opts;
     const hasDisplayedModels = displayedModels.size > 0;
     const knownModelMap = getKnownModelMap();
     const customModelsMap = new Map<QualifiedModelId, AiModel>();
 
     let modelsMap = new Map<QualifiedModelId, AiModel>();
+    const modelsByProviderMap = new MultiMap<ProviderId, AiModel>();
 
-    for (const model of this.customModels) {
+    for (const model of customModels) {
       if (hasDisplayedModels && !displayedModels.has(model)) {
         continue;
       }
@@ -121,15 +152,16 @@ export class AiModelRegistry {
     }
 
     // Set custom models first, then known models
+    // Known models will overwrite custom models (which is desired)
     modelsMap = new Map([...customModelsMap, ...modelsMap]);
 
     // Group by provider
     for (const [qualifiedModelId, model] of modelsMap.entries()) {
       const modelId = AiModelId.parse(qualifiedModelId);
-      this.modelsByProviderMap.add(modelId.providerId, model);
+      modelsByProviderMap.add(modelId.providerId, model);
     }
 
-    this.modelsMap = modelsMap;
+    return { modelsByProviderMap, modelsMap };
   }
 
   getDisplayedModels() {

package/src/hooks/useDebounce.ts

@@ -84,7 +84,8 @@ export function useDebounceControlledState<T>(opts: {
   };
 }
 
-export function useDebouncedCallback<T extends (...args: unknown[]) => unknown>(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDebouncedCallback<T extends (...args: any[]) => unknown>(
   callback: T,
   delay: number,
 ) {

package/src/theme/useTheme.ts

@@ -25,8 +25,7 @@ const themeAtom = atom((get) => {
     if (
       document.body.dataset.theme === "dark" ||
       document.body.dataset.mode === "dark" ||
-      document.body.dataset.vscodeThemeKind === "vscode-dark" ||
-      document.body.dataset.vscodeThemeKind === "vscode-high-contrast"
+      getVsCodeTheme() === "dark"
     ) {
       return "dark";
     }
@@ -73,8 +72,39 @@ function setupThemeListener(): void {
 }
 setupThemeListener();
 
+function getVsCodeTheme(): "light" | "dark" | undefined {
+  const kind = document.body.dataset.vscodeThemeKind;
+  if (kind === "vscode-dark") {
+    return "dark";
+  } else if (kind === "vscode-high-contrast") {
+    return "dark";
+  } else if (kind === "vscode-light") {
+    return "light";
+  }
+  return undefined;
+}
+
+const codeThemeAtom = atom<"light" | "dark" | undefined>(getVsCodeTheme());
+
+function setupVsCodeThemeListener() {
+  const observer = new MutationObserver(() => {
+    const theme = getVsCodeTheme();
+    store.set(codeThemeAtom, theme);
+  });
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["data-vscode-theme-kind"],
+  });
+  return () => observer.disconnect();
+}
+setupVsCodeThemeListener();
+
 export const resolvedThemeAtom = atom((get) => {
   const theme = get(themeAtom);
+  const codeTheme = get(codeThemeAtom);
+  if (codeTheme !== undefined) {
+    return codeTheme;
+  }
   const prefersDarkMode = get(prefersDarkModeAtom);
   return theme === "system" ? (prefersDarkMode ? "dark" : "light") : theme;
 });

package/dist/assets/_baseMap-BAU9O30m.js

@@ -1 +0,0 @@
-import{b as m}from"./_baseEach-BS8weAss.js";import{x as s}from"./index-DW0h2xO3.js";function e(r,o){var a=-1,t=s(r)?Array(r.length):[];return m(r,function(n,f,i){t[++a]=o(n,f,i)}),t}export{e as b};

package/dist/assets/channel-D6FK50wF.js

@@ -1 +0,0 @@
-import{U as s,C as o}from"./mermaid-DGyTN34T.js";const n=(a,r)=>s.lang.round(o.parse(a)[r]);export{n as c};

package/dist/assets/classDiagram-3BZAVTQC-DevkEUfS.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-JBRWN2VN-BiIV13Fm.js";import{_ as e}from"./mermaid-DGyTN34T.js";import"./transform-B8bpuzxV.js";import"./chunk-GLLZNHP4-Bh0ezhHX.js";import"./chunk-WVR4S24B-CoVzJW5S.js";import"./chunk-NRVI72HA-CK-IO-Lt.js";import"./index-DW0h2xO3.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};