feat: content size config

development_docs/openapi.md

@@ -9,7 +9,7 @@ marimo development openapi
 ## Writing a new OpenAPI schema
 
 ```bash
-marimo development openapi > openapi/api.yaml
+marimo development openapi > openapi/api.yaml && make fe-codegen
 ```
 
 ## Validating an OpenAPI schema

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

@@ -15,6 +15,7 @@ import {
   AppConfigSchema,
   APP_WIDTHS,
   AppTitleSchema,
+  CONTENT_FONT_SIZES,
 } from "../../core/config/config-schema";
 import { Input } from "../ui/input";
 import { NativeSelect } from "../ui/native-select";
@@ -114,6 +115,36 @@ export const AppConfigForm: React.FC = () => {
             </div>
           )}
         />
+        <FormField
+          control={form.control}
+          name="content_font_size"
+          render={({ field }) => (
+            <FormItem
+              className={"flex flex-row items-center space-x-1 space-y-0"}
+            >
+              <FormLabel>Content font size</FormLabel>
+              <FormControl>
+                <NativeSelect
+                  data-testid="content-font-size-select"
+                  onChange={(e) => {
+                    const nextValue = e.target.value;
+                    field.onChange(nextValue);
+                  }}
+                  value={field.value}
+                  disabled={field.disabled}
+                  className="inline-flex mr-2"
+                >
+                  {CONTENT_FONT_SIZES.map((option) => (
+                    <option value={option} key={option}>
+                      {option}
+                    </option>
+                  ))}
+                </NativeSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
         <FormField
           control={form.control}
           name="css_file"

frontend/src/components/editor/Output.tsx

@@ -29,6 +29,8 @@ import { CsvViewer } from "./file-tree/renderers";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { MarimoTracebackOutput } from "./output/MarimoTracebackOutput";
 import { useTheme } from "@emotion/react";
+import { useAtomValue } from "jotai";
+import { contentFontSizeAtom } from "@/core/config/config";
 
 /**
  * Renders an output based on an OutputMessage.
@@ -149,8 +151,17 @@ interface OutputAreaProps {
   className?: string;
 }
 
+const CONTENT_FONT_SIZE: Record<string, string> = {
+  sm: "prose-sm",
+  default: "",
+  lg: "prose-lg",
+  xl: "prose-xl",
+  "2xl": "prose-2xl",
+};
+
 export const OutputArea = React.memo(
   ({ output, cellId, stale, allowExpand, className }: OutputAreaProps) => {
+    const contentFontSize = useAtomValue(contentFontSizeAtom);
     if (output === null) {
       return null;
     }
@@ -171,7 +182,11 @@ export const OutputArea = React.memo(
           title={title}
           cellId={cellId}
           id={`output-${cellId}`}
-          className={cn(stale && "marimo-output-stale", className)}
+          className={cn(
+            stale && "marimo-output-stale",
+            CONTENT_FONT_SIZE[contentFontSize],
+            className,
+          )}
         >
           <OutputRenderer message={output} />
         </Container>

frontend/src/core/config/__tests__/config-schema.test.ts

@@ -19,6 +19,7 @@ test("another AppConfig", () => {
   expect(config).toMatchInlineSnapshot(`
     {
       "app_title": null,
+      "content_font_size": "default",
       "width": "medium",
     }
   `);

frontend/src/core/config/config-schema.ts

@@ -15,6 +15,7 @@ export const PackageManagerNames = [
 export type PackageManagerName = (typeof PackageManagerNames)[number];
 
 export const APP_WIDTHS = ["compact", "medium", "full"] as const;
+export const CONTENT_FONT_SIZES = ["sm", "default", "lg", "xl", "2xl"] as const;
 /**
  * normal == compact, but normal is deprecated
  */
@@ -151,6 +152,7 @@ export const AppConfigSchema = z
         return width;
       }),
     app_title: AppTitleSchema.nullish(),
+    content_font_size: z.enum(CONTENT_FONT_SIZES).default("default"),
     css_file: z.string().nullish(),
   })
   .default({ width: "medium" });

frontend/src/core/config/config.ts

@@ -53,6 +53,10 @@ export function isAiEnabled(config: UserConfig) {
  */
 const appConfigAtom = atom<AppConfig>(parseAppConfig());
 
+export const contentFontSizeAtom = atom((get) => {
+  return get(appConfigAtom).content_font_size;
+});
+
 /**
  * Returns the app config.
  */

marimo/_ast/app.py

@@ -10,6 +10,7 @@
     Callable,
     Iterable,
     Iterator,
+    Literal,
     Mapping,
     Optional,
 )
@@ -68,6 +69,11 @@ class _AppConfig:
     # CSS file, relative to the app file
     css_file: Optional[str] = None
 
+    # Text context size
+    # We use t-shirt sizes since this will increase/decrease the size of the
+    # headers and body text in lockstep.
+    content_font_size: Literal["sm", "default", "lg", "xl", "2xl"] = "default"
+
     @staticmethod
     def from_untrusted_dict(updates: dict[str, Any]) -> _AppConfig:
         config = _AppConfig()

marimo/_cli/convert/markdown.py

@@ -62,6 +62,7 @@ def app_config_from_root(root: Element) -> _AppConfig:
         "title": "app_title",
         "marimo-layout": "layout_file",
         "marimo-css": "css_file",
+        "marimo-content-font-size": "content_font_size",
     }
     config = {
         config_keys[key]: value

marimo/_server/export/exporter.py

@@ -177,12 +177,18 @@ def export_as_md(self, file_manager: AppFileManager) -> tuple[str, str]:
         # documents are executable.
 
         #  Put data from AppFileManager into the yaml header.
-        ignored_keys = {"app_title", "layout_file", "css_file"}
+        ignored_keys = {
+            "app_title",
+            "layout_file",
+            "css_file",
+            "content_font_size",
+        }
         metadata = {
             "title": get_app_title(file_manager),
             "marimo-version": __version__,
             "marimo-layout": file_manager.app.config.layout_file,
             "marimo-css": file_manager.app.config.css_file,
+            "marimo-content-font-size": file_manager.app.config.content_font_size,  # noqa: E501
         }
         # Get values defined in _AppConfig without explicitly extracting keys,
         # as long as it isn't the default.

openapi/api.yaml

@@ -4,6 +4,34 @@ components:
       properties:
         code:
           type: string
+        context:
+          nullable: true
+          properties:
+            schema:
+              items:
+                properties:
+                  columns:
+                    items:
+                      properties:
+                        name:
+                          type: string
+                        type:
+                          type: string
+                      required:
+                      - name
+                      - type
+                      type: object
+                    type: array
+                  name:
+                    type: string
+                required:
+                - name
+                - columns
+                type: object
+              type: array
+          required:
+          - schema
+          type: object
         includeOtherCode:
           type: string
         language:
@@ -823,6 +851,14 @@ components:
             app_title:
               nullable: true
               type: string
+            content_font_size:
+              enum:
+              - sm
+              - default
+              - lg
+              - xl
+              - 2xl
+              type: string
             css_file:
               nullable: true
               type: string
@@ -838,6 +874,7 @@ components:
               type: string
           required:
           - width
+          - content_font_size
           type: object
         capabilities:
           properties:
@@ -1816,7 +1853,7 @@ components:
       type: object
 info:
   title: marimo API
-  version: 0.8.4
+  version: 0.8.11
 openapi: 3.1.0
 paths:
   /@file/{filename_and_length}:

openapi/src/api.ts

@@ -1768,6 +1768,15 @@ export interface components {
   schemas: {
     AiCompletionRequest: {
       code: string;
+      context?: {
+        schema: {
+          columns: {
+            name: string;
+            type: string;
+          }[];
+          name: string;
+        }[];
+      } | null;
       includeOtherCode: string;
       /** @enum {string} */
       language: "python" | "markdown" | "sql";
@@ -2098,6 +2107,8 @@ export interface components {
     KernelReady: {
       app_config: {
         app_title?: string | null;
+        /** @enum {string} */
+        content_font_size: "sm" | "default" | "lg" | "xl" | "2xl";
         css_file?: string | null;
         layout_file?: string | null;
         /** @enum {string} */