@marimo-team/islands 0.25.3-dev28 → 0.25.3-dev284

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

@@ -4,7 +4,8 @@ import type { HTMLProps, PropsWithChildren } from "react";
 import type { SqlOutputType } from "@/core/config/config-schema";
 import { cn } from "@/utils/cn";
 
-export const formItemClasses = "flex flex-row items-center space-x-1 space-y-0";
+export const formItemClasses =
+  "settings-row flex flex-row items-center space-x-1 space-y-0";
 
 export const SettingTitle: React.FC<PropsWithChildren> = ({ children }) => {
   return (
@@ -14,21 +15,18 @@ export const SettingTitle: React.FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export const SettingSubtitle: React.FC<HTMLProps<HTMLDivElement>> = ({
+export const SettingSubtitle: React.FC<HTMLProps<HTMLHeadingElement>> = ({
   children,
   className,
   ...props
 }) => {
   return (
-    <div
+    <h3
       {...props}
-      className={cn(
-        "text-base font-semibold underline-offset-2 text-accent-foreground uppercase tracking-wide",
-        className,
-      )}
+      className={cn("text-base font-semibold text-foreground", className)}
     >
       {children}
-    </div>
+    </h3>
   );
 };
 
@@ -43,7 +41,7 @@ export const SettingGroup: React.FC<{
   children: React.ReactNode;
 }> = ({ title, children }) => {
   return (
-    <div className="flex flex-col gap-4 pb-4">
+    <div className="settings-group flex flex-col gap-4">
       <SettingSubtitle>{title}</SettingSubtitle>
       {children}
     </div>

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

@@ -75,113 +75,113 @@ export const DataForm = ({
 
   return (
     <>
-      <OverriddenFormField
-        control={form.control}
-        name="display.dataframes"
-        render={({ field, override }) => (
-          <div className="flex flex-col space-y-1">
-            <FormItem className={formItemClasses}>
-              <FormLabel>Dataframe viewer</FormLabel>
-              <FormControl>
-                <NativeSelect
-                  data-testid="display-dataframes-select"
-                  onChange={(e) => field.onChange(e.target.value)}
-                  value={override.value}
-                  disabled={field.disabled || override.isOverridden}
-                  className="inline-flex mr-2"
-                >
-                  {["rich", "plain"].map((option) => (
-                    <option value={option} key={option}>
-                      {option}
-                    </option>
-                  ))}
-                </NativeSelect>
-              </FormControl>
-              <FormMessage />
-              <IsOverridden override={override} />
-            </FormItem>
-
-            <FormDescription>
-              Whether to use marimo's rich dataframe viewer or a plain HTML
-              table. This requires restarting your notebook to take effect.
-            </FormDescription>
-          </div>
-        )}
-      />
-      <OverriddenFormField
-        control={form.control}
-        name="display.default_table_page_size"
-        render={({ field, override }) => (
-          <div className="flex flex-col space-y-1">
-            <FormItem className={formItemClasses}>
-              <FormLabel>Default table page size</FormLabel>
-              <FormControl>
-                <NumberField
-                  aria-label="Default table page size"
-                  data-testid="default-table-page-size-input"
-                  className="m-0 w-24"
-                  {...field}
-                  value={override.value}
-                  isDisabled={override.isOverridden}
-                  minValue={1}
-                  step={1}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    if (!Number.isNaN(value)) {
-                      onSubmit(form.getValues());
-                    }
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-              <IsOverridden override={override} />
-            </FormItem>
-            <FormDescription>
-              The default number of rows displayed in dataframes and SQL
-              results.
-            </FormDescription>
-          </div>
-        )}
-      />
-      <OverriddenFormField
-        control={form.control}
-        name="display.default_table_max_columns"
-        render={({ field, override }) => (
-          <div className="flex flex-col space-y-1">
-            <FormItem className={formItemClasses}>
-              <FormLabel>Default table max columns</FormLabel>
-              <FormControl>
-                <NumberField
-                  aria-label="Default table max columns"
-                  data-testid="default-table-max-columns-input"
-                  className="m-0 w-24"
-                  {...field}
-                  value={override.value}
-                  isDisabled={override.isOverridden}
-                  minValue={1}
-                  step={1}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    if (!Number.isNaN(value)) {
-                      onSubmit(form.getValues());
-                    }
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-              <IsOverridden override={override} />
-            </FormItem>
-            <FormDescription>
-              The default maximum number of columns displayed in dataframes and
-              SQL results.
-            </FormDescription>
-          </div>
-        )}
-      />
-
+      <SettingGroup title="Data">
+        <OverriddenFormField
+          control={form.control}
+          name="display.dataframes"
+          render={({ field, override }) => (
+            <div className="settings-field flex flex-col space-y-1">
+              <FormItem className={formItemClasses}>
+                <FormLabel>Dataframe viewer</FormLabel>
+                <FormDescription>
+                  Whether to use marimo's rich dataframe viewer or a plain HTML
+                  table. This requires restarting your notebook to take effect.
+                </FormDescription>
+                <FormControl>
+                  <NativeSelect
+                    data-testid="display-dataframes-select"
+                    onChange={(e) => field.onChange(e.target.value)}
+                    value={override.value}
+                    disabled={field.disabled || override.isOverridden}
+                    className="inline-flex mr-2"
+                  >
+                    {["rich", "plain"].map((option) => (
+                      <option value={option} key={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </NativeSelect>
+                </FormControl>
+                <FormMessage />
+                <IsOverridden override={override} />
+              </FormItem>
+            </div>
+          )}
+        />
+        <OverriddenFormField
+          control={form.control}
+          name="display.default_table_page_size"
+          render={({ field, override }) => (
+            <div className="settings-field flex flex-col space-y-1">
+              <FormItem className={formItemClasses}>
+                <FormLabel>Default table page size</FormLabel>
+                <FormDescription>
+                  The default number of rows displayed in dataframes and SQL
+                  results.
+                </FormDescription>
+                <FormControl>
+                  <NumberField
+                    aria-label="Default table page size"
+                    data-testid="default-table-page-size-input"
+                    className="m-0 w-24"
+                    {...field}
+                    value={override.value}
+                    isDisabled={override.isOverridden}
+                    minValue={1}
+                    step={1}
+                    onChange={(value) => {
+                      field.onChange(value);
+                      if (!Number.isNaN(value)) {
+                        onSubmit(form.getValues());
+                      }
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+                <IsOverridden override={override} />
+              </FormItem>
+            </div>
+          )}
+        />
+        <OverriddenFormField
+          control={form.control}
+          name="display.default_table_max_columns"
+          render={({ field, override }) => (
+            <div className="settings-field flex flex-col space-y-1">
+              <FormItem className={formItemClasses}>
+                <FormLabel>Default table max columns</FormLabel>
+                <FormDescription>
+                  The default maximum number of columns displayed in dataframes
+                  and SQL results.
+                </FormDescription>
+                <FormControl>
+                  <NumberField
+                    aria-label="Default table max columns"
+                    data-testid="default-table-max-columns-input"
+                    className="m-0 w-24"
+                    {...field}
+                    value={override.value}
+                    isDisabled={override.isOverridden}
+                    minValue={1}
+                    step={1}
+                    onChange={(value) => {
+                      field.onChange(value);
+                      if (!Number.isNaN(value)) {
+                        onSubmit(form.getValues());
+                      }
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+                <IsOverridden override={override} />
+              </FormItem>
+            </div>
+          )}
+        />
+      </SettingGroup>
       <SettingGroup title="SQL">
-        <div className="flex flex-col gap-1">
-          <div className="text-sm text-foreground">
+        <div className="settings-field flex flex-col gap-1">
+          <div className="text-sm font-semibold text-muted-foreground">
             Database Schema Discovery
           </div>
           <div className="text-sm text-muted-foreground mb-2">
@@ -212,7 +212,7 @@ export const DataForm = ({
           control={form.control}
           name="diagnostics.sql_linter"
           render={({ field, override }) => (
-            <div className="flex flex-col space-y-1">
+            <div className="settings-field flex flex-col space-y-1">
               <FormItem className={formItemClasses}>
                 <FormLabel>SQL Linter</FormLabel>
                 <FormControl>
@@ -237,9 +237,13 @@ export const DataForm = ({
           control={form.control}
           name="runtime.default_sql_output"
           render={({ field, override }) => (
-            <div className="flex flex-col space-y-1">
+            <div className="settings-field flex flex-col space-y-1">
               <FormItem className={formItemClasses}>
                 <FormLabel>Default SQL output</FormLabel>
+                <FormDescription>
+                  The default SQL output type for new notebooks; overridden by
+                  "sql_output" in the application config.
+                </FormDescription>
                 <FormControl>
                   <NativeSelect
                     data-testid="user-config-sql-output-select"
@@ -258,11 +262,6 @@ export const DataForm = ({
                 <FormMessage />
                 <IsOverridden override={override} />
               </FormItem>
-
-              <FormDescription>
-                The default SQL output type for new notebooks; overridden by
-                "sql_output" in the application config.
-              </FormDescription>
             </div>
           )}
         />

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

@@ -1,22 +1,22 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { CheckSquareIcon, Loader2, RefreshCwIcon } from "lucide-react";
+import { Loader2, RefreshCwIcon } from "lucide-react";
 import React from "react";
 import type { UseFormReturn } from "react-hook-form";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { FormField, FormItem } from "@/components/ui/form";
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
 import type { UserConfig } from "@/core/config/config-schema";
 import { useMCPRefresh, useMCPStatus } from "../mcp/hooks";
 import { McpStatusText } from "../mcp/mcp-status-indicator";
 import { Button } from "../ui/button";
 import { Kbd } from "../ui/kbd";
-import { SettingSubtitle } from "./common";
+import { formItemClasses, SettingSubtitle } from "./common";
 import { useOpenSettingsToTab } from "./state";
 
 interface MCPConfigProps {
@@ -35,13 +35,14 @@ interface PresetConfig {
 const PRESET_CONFIGS: PresetConfig[] = [
   {
     id: "marimo",
-    title: "marimo (docs)",
-    description: "Access marimo documentation",
+    title: "marimo documentation",
+    description: "Let the AI assistant look up marimo documentation.",
   },
   {
     id: "context7",
     title: "Context7",
-    description: "Connect to Context7 MCP server",
+    description:
+      "Let the AI assistant look up current documentation and code examples for third-party libraries using Context7.",
   },
 ];
 
@@ -58,12 +59,13 @@ export const MCPConfig: React.FC<MCPConfigProps> = ({ form, onSubmit }) => {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
-        <SettingSubtitle>MCP Servers</SettingSubtitle>
+        <SettingSubtitle>MCP servers</SettingSubtitle>
         <div className="flex items-center gap-2">
           {status && <McpStatusText status={status.status} />}
           <Button
             variant="outline"
             size="xs"
+            aria-label="Refresh MCP servers"
             onClick={handleRefresh}
             disabled={isRefreshing || isFetching}
           >
@@ -101,7 +103,7 @@ export const MCPConfig: React.FC<MCPConfigProps> = ({ form, onSubmit }) => {
           onClick={() => handleClick("optionalDeps")}
           size="xs"
         >
-          Optional Features
+          Optional features
         </Button>{" "}
         for more details.
       </p>
@@ -121,45 +123,20 @@ export const MCPConfig: React.FC<MCPConfigProps> = ({ form, onSubmit }) => {
           };
 
           return (
-            <FormItem>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {PRESET_CONFIGS.map((config) => {
-                  const isChecked = presets.includes(config.id);
-
-                  return (
-                    <Card
-                      key={config.id}
-                      className={`cursor-pointer transition-all ${
-                        isChecked
-                          ? "border-(--blue-9) bg-(--blue-2)"
-                          : "hover:border-(--blue-7)"
-                      }`}
-                      onClick={() => togglePreset(config.id)}
-                    >
-                      <CardHeader>
-                        <div className="flex items-start justify-between">
-                          <CardTitle className="text-base">
-                            {config.title}
-                          </CardTitle>
-                          <span
-                            className={`h-5 w-5 flex items-center justify-center rounded border ${
-                              isChecked
-                                ? "border-(--blue-7) bg-(--blue-7) text-foreground"
-                                : "border-muted bg-background text-muted-foreground"
-                            }`}
-                          >
-                            {isChecked ? <CheckSquareIcon /> : null}
-                          </span>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <CardDescription>{config.description}</CardDescription>
-                      </CardContent>
-                    </Card>
-                  );
-                })}
-              </div>
-            </FormItem>
+            <div className="flex flex-col gap-6">
+              {PRESET_CONFIGS.map((config) => (
+                <FormItem key={config.id} className={formItemClasses}>
+                  <FormLabel>{config.title}</FormLabel>
+                  <FormControl>
+                    <Checkbox
+                      checked={presets.includes(config.id)}
+                      onCheckedChange={() => togglePreset(config.id)}
+                    />
+                  </FormControl>
+                  <FormDescription>{config.description}</FormDescription>
+                </FormItem>
+              ))}
+            </div>
           );
         }}
       />

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

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+.user-config-form .settings-group {
+  gap: 1.5rem;
+}
+
+.user-config-form .settings-group > h3 {
+  margin-bottom: -0.75rem;
+}
+
+.user-config-form .settings-group + .settings-group {
+  border-top: 1px solid var(--border);
+  padding-top: 1.5rem;
+}
+
+.user-config-form .settings-row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+.user-config-form .settings-row > * {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+}
+
+.user-config-form label {
+  font-weight: 600;
+}
+
+.user-config-form label:not(.text-destructive) {
+  color: var(--muted-foreground);
+}
+
+.user-config-form .settings-row > label {
+  width: auto;
+  line-height: 1.5;
+}
+
+.user-config-form .settings-row > label + p {
+  margin-bottom: 0.25rem;
+}
+
+.user-config-form .settings-row > select {
+  width: auto;
+  min-width: min(100%, 8rem);
+  height: 1.75rem;
+}
+
+.user-config-form .settings-row:has(> [role="checkbox"]) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+.user-config-form .settings-row > [role="checkbox"] {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.user-config-form .settings-row:has(> [role="checkbox"]) > label {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.user-config-form .settings-row:has(> [role="checkbox"]) > :nth-child(n + 3) {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+
+.user-config-form p {
+  line-height: 1.5;
+}
+
+.user-config-form :is(.settings-field, .settings-row) {
+  border-radius: 0.375rem;
+}
+
+.user-config-form
+  :is(.settings-field, .settings-row):is(:hover, :focus-within) {
+  background-color: color-mix(in srgb, var(--muted) 50%, transparent);
+  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--muted) 50%, transparent);
+}
+
+.user-config-form .settings-field .settings-row:is(:hover, :focus-within) {
+  background-color: transparent;
+  box-shadow: none;
+}