@marimo-team/frontend 0.23.16-dev2 → 0.23.16-dev21

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -12,12 +12,17 @@ import {
   type ViewUpdate,
 } from "@codemirror/view";
 import {
+  aliasColumnCompletionSource,
+  createCteCompletionSource,
   defaultSqlHoverTheme,
   NodeSqlParser,
   type NodeSqlParserResult,
+  QueryContextAnalyzer,
   type SupportedDialects as ParserDialects,
   type SqlParseError,
   sqlExtension,
+  SqlStructureAnalyzer,
+  unqualifiedColumnCompletionSource,
 } from "@marimo-team/codemirror-sql";
 import { DuckDBDialect } from "@marimo-team/codemirror-sql/dialects";
 import { type SQLMetadata, SQLParser } from "@marimo-team/smart-cells";
@@ -142,6 +147,7 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
     _placeholderType: PlaceholderType,
     lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig },
   ): Extension[] {
+    const analysis = createSQLAnalysis();
     const extensions = [
       // This can be updated with a dispatch effect
       sqlConfigCompartment.of(sql({ dialect: DEFAULT_DIALECT })),
@@ -167,6 +173,10 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
           variableCompletionSource,
           // Completions for dialect keywords
           customKeywordCompletionSource(),
+          // Completions based on the current query
+          analysis.cteCompletionSource,
+          analysis.aliasCompletionSource,
+          analysis.columnCompletionSource,
         ],
       }),
     ];
@@ -185,10 +195,23 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
 
       extensions.push(
         sqlExtension({
+          schema: getSchema,
           enableLinting: true,
           linterConfig: {
             delay: 250, // Delay before running validation
             parser: parser,
+            // CustomSqlParser performs backend DuckDB validation in validateSql.
+            perStatement: false,
+          },
+          enableSemanticLinting: true,
+          semanticLinterConfig: {
+            parser: analysis.parser,
+            structureAnalyzer: analysis.structureAnalyzer,
+            severity: {
+              unknownTable: "off",
+              unknownColumn: "warning",
+              ambiguousColumn: "warning",
+            },
           },
           enableGutterMarkers: true,
           gutterConfig: {
@@ -198,14 +221,21 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
             parser: parser,
           },
           hoverConfig: {
-            schema: getSchema, // Use the same schema as autocomplete
             hoverTime: 300, // 300ms hover delay
             enableKeywords: true, // Show keyword information
             enableTables: true, // Show table information
             enableColumns: true, // Show column information
-            parser: parser,
+            parser: analysis.parser,
+            contextAnalyzer: analysis.contextAnalyzer,
             theme: defaultSqlHoverTheme(theme),
           },
+          enableNavigation: true,
+          navigationConfig: {
+            contextAnalyzer: analysis.contextAnalyzer,
+            keymap: false,
+            parser: analysis.parser,
+            structureAnalyzer: analysis.structureAnalyzer,
+          },
         }),
         EditorView.updateListener.of((update) => {
           if (update.focusChanged) {
@@ -223,6 +253,123 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
   }
 }
 
+function createSQLAnalysis() {
+  const parser = new NodeSqlParser({
+    getParserOptions: (state: EditorState) => {
+      return {
+        database: getAnalysisDialect(state),
+      };
+    },
+  });
+  const contextAnalyzer = new DialectAwareQueryContextAnalyzer(parser);
+  const structureAnalyzer = new DialectAwareSqlStructureAnalyzer(parser);
+
+  return {
+    parser,
+    contextAnalyzer,
+    structureAnalyzer,
+    cteCompletionSource: createCteCompletionSource({
+      parser,
+      contextAnalyzer,
+      structureAnalyzer,
+    }),
+    aliasCompletionSource: aliasColumnCompletionSource({
+      schema: getSchema,
+      parser,
+      contextAnalyzer,
+    }),
+    columnCompletionSource: unqualifiedColumnCompletionSource({
+      schema: getSchema,
+      parser,
+      contextAnalyzer,
+    }),
+  };
+}
+
+function getAnalysisDialect(state: EditorState): ParserDialects {
+  return guessParserDialect(state) ?? DEFAULT_PARSER_DIALECT;
+}
+
+class DialectAwareQueryContextAnalyzer extends QueryContextAnalyzer {
+  private readonly analyzers = new Map<ParserDialects, QueryContextAnalyzer>();
+  private readonly analysisParser: NodeSqlParser;
+
+  constructor(analysisParser: NodeSqlParser) {
+    super(analysisParser);
+    this.analysisParser = analysisParser;
+  }
+
+  override getContext(
+    sql: string,
+    opts: { state: EditorState },
+  ): ReturnType<QueryContextAnalyzer["getContext"]> {
+    return this.getAnalyzer(opts.state).getContext(sql, opts);
+  }
+
+  override clearCache(): void {
+    for (const analyzer of this.analyzers.values()) {
+      analyzer.clearCache();
+    }
+  }
+
+  private getAnalyzer(state: EditorState): QueryContextAnalyzer {
+    const dialect = getAnalysisDialect(state);
+    let analyzer = this.analyzers.get(dialect);
+    if (!analyzer) {
+      analyzer = new QueryContextAnalyzer(this.analysisParser);
+      this.analyzers.set(dialect, analyzer);
+    }
+    return analyzer;
+  }
+}
+
+class DialectAwareSqlStructureAnalyzer extends SqlStructureAnalyzer {
+  private readonly analyzers = new Map<ParserDialects, SqlStructureAnalyzer>();
+  private readonly analysisParser: NodeSqlParser;
+
+  constructor(analysisParser: NodeSqlParser) {
+    super(analysisParser);
+    this.analysisParser = analysisParser;
+  }
+
+  override analyzeDocument(
+    state: EditorState,
+  ): ReturnType<SqlStructureAnalyzer["analyzeDocument"]> {
+    return this.getAnalyzer(state).analyzeDocument(state);
+  }
+
+  override getStatementAtPosition(
+    state: EditorState,
+    position: number,
+  ): ReturnType<SqlStructureAnalyzer["getStatementAtPosition"]> {
+    return this.getAnalyzer(state).getStatementAtPosition(state, position);
+  }
+
+  override getStatementsInRange(
+    state: EditorState,
+    from: number,
+    to: number,
+  ): ReturnType<SqlStructureAnalyzer["getStatementsInRange"]> {
+    return this.getAnalyzer(state).getStatementsInRange(state, from, to);
+  }
+
+  override clearCache(): void {
+    for (const analyzer of this.analyzers.values()) {
+      analyzer.clearCache();
+    }
+  }
+
+  private getAnalyzer(state: EditorState): SqlStructureAnalyzer {
+    const dialect = getAnalysisDialect(state);
+    let analyzer = this.analyzers.get(dialect);
+    if (!analyzer) {
+      analyzer = new SqlStructureAnalyzer(this.analysisParser);
+      this.analyzers.set(dialect, analyzer);
+    }
+    return analyzer;
+  }
+}
+
 class CustomSqlParser extends NodeSqlParser {
   private validationTimeout: number | null = null;
   private readonly VALIDATION_DELAY_MS = 300; // Wait 300ms after user stops typing
@@ -344,7 +491,61 @@ function getSchema(view: EditorView): SQLNamespace {
     return {};
   }
 
-  return config.schema;
+  const schema = config.schema;
+  if (!isNamespaceMap(schema)) {
+    return schema;
+  }
+
+  const defaultSchema = config.defaultSchema;
+  const defaultSchemaNamespace = defaultSchema
+    ? schema[defaultSchema]
+    : undefined;
+
+  // The completion schema contains both default-schema and fully qualified
+  // paths. Promote default-schema tables so unqualified references resolve to
+  // one exact match instead of appearing ambiguous.
+  if (
+    defaultSchemaNamespace &&
+    !Array.isArray(defaultSchemaNamespace) &&
+    typeof defaultSchemaNamespace === "object" &&
+    "children" in defaultSchemaNamespace &&
+    isNamespaceMap(defaultSchemaNamespace.children)
+  ) {
+    return {
+      ...schema,
+      ...Object.fromEntries(
+        Object.entries(defaultSchemaNamespace.children).filter(
+          ([name]) => !Object.hasOwn(schema, name),
+        ),
+      ),
+    };
+  }
+
+  return schema;
+}
+
+function isNamespaceMap(
+  namespace: SQLNamespace,
+): namespace is Record<string, SQLNamespace> {
+  if (Array.isArray(namespace)) {
+    return false;
+  }
+
+  if (!("self" in namespace) || !("children" in namespace)) {
+    return true;
+  }
+
+  // A self/children wrapper stores a Completion in `self`. A table or schema
+  // literally named "self" stores another namespace there.
+  const self = namespace.self;
+  const isSelfChildrenWrapper =
+    typeof self === "object" &&
+    self !== null &&
+    !Array.isArray(self) &&
+    "label" in self &&
+    typeof self.label === "string";
+
+  return !isSelfChildrenWrapper;
 }
 
 function guessParserDialect(state: EditorState): ParserDialects | null {
@@ -529,3 +730,9 @@ async function validateSQL(
   }
   return result;
 }
+
+export const exportedForTesting = {
+  createSQLAnalysis,
+  CustomSqlParser,
+  getSchema,
+};

package/src/core/hotkeys/hotkeys.ts

@@ -256,13 +256,11 @@ const DEFAULT_HOT_KEY = {
     name: "Copy line(s) up",
     group: "Editing",
     key: "Alt-Shift-ArrowUp",
-    editable: false,
   },
   "cell.copyLineDown": {
     name: "Copy line(s) down",
     group: "Editing",
     key: "Alt-Shift-ArrowDown",
-    editable: false,
   },
 
   // Markdown

package/src/core/i18n/__tests__/locale-provider.test.tsx

@@ -8,20 +8,9 @@ import {
   defaultUserConfig,
   parseUserConfig,
 } from "@/core/config/config-schema";
+import { FALLBACK_LOCALE } from "../locale";
 import { LocaleProvider } from "../locale-provider";
 
-// Mock navigator.language with a getter
-let mockNavigatorLanguage: string | undefined;
-
-Object.defineProperty(window, "navigator", {
-  value: {
-    get language() {
-      return mockNavigatorLanguage;
-    },
-  },
-  writable: true,
-});
-
 // Mock react-aria-components I18nProvider
 vi.mock("react-aria-components", () => ({
   I18nProvider: ({
@@ -37,143 +26,90 @@ vi.mock("react-aria-components", () => ({
   ),
 }));
 
+function renderWithLocale(configLocale: string | null | undefined) {
+  const store = createStore();
+  store.set(
+    userConfigAtom,
+    parseUserConfig({ display: { locale: configLocale } }),
+  );
+  return render(
+    <Provider store={store}>
+      <LocaleProvider>
+        <div>Test content</div>
+      </LocaleProvider>
+    </Provider>,
+  );
+}
+
 describe("LocaleProvider", () => {
   beforeEach(() => {
-    // Reset the mock before each test
-    mockNavigatorLanguage = undefined;
+    vi.stubGlobal("navigator", { language: undefined as string | undefined });
   });
 
   afterEach(() => {
     cleanup();
-    // Clear all mocks after each test
-    mockNavigatorLanguage = undefined;
+    vi.unstubAllGlobals();
     vi.clearAllMocks();
   });
 
-  it("should render I18nProvider without locale when locale is null", () => {
-    const store = createStore();
-    const config = parseUserConfig({ display: { locale: null } });
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <LocaleProvider>
-          <div>Test content</div>
-        </LocaleProvider>
-      </Provider>,
-    );
-
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    expect(i18nProvider.dataset.locale).toBe(undefined);
-    expect(i18nProvider).toHaveTextContent("Test content");
+  it("passes a valid configured locale through unchanged", () => {
+    const { getByTestId } = renderWithLocale("es-ES");
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("es-ES");
   });
 
-  it("should render I18nProvider without locale when locale is undefined", () => {
-    const store = createStore();
-    const config = parseUserConfig({ display: { locale: undefined } });
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <LocaleProvider>
-          <div>Test content</div>
-        </LocaleProvider>
-      </Provider>,
-    );
-
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    expect(i18nProvider.dataset.locale).toBe(undefined);
-    expect(i18nProvider).toHaveTextContent("Test content");
+  it("prefers the browser locale when config is unset", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    const { getByTestId } = renderWithLocale(null);
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("de-DE");
   });
 
-  it("should render I18nProvider with locale when locale is provided", () => {
-    const store = createStore();
-    const testLocale = "es-ES";
-    const config = parseUserConfig({ display: { locale: testLocale } });
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <LocaleProvider>
-          <div>Test content</div>
-        </LocaleProvider>
-      </Provider>,
-    );
+  it.each([null, undefined])(
+    "falls back to %s config + unusable browser locale",
+    (configLocale) => {
+      const { getByTestId } = renderWithLocale(configLocale);
+      expect(getByTestId("i18n-provider").dataset.locale).toBe(FALLBACK_LOCALE);
+    },
+  );
 
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    expect(i18nProvider.dataset.locale).toBe(testLocale);
-    expect(i18nProvider).toHaveTextContent("Test content");
+  it("sanitizes a POSIX-tagged browser locale (issue #9938)", () => {
+    vi.stubGlobal("navigator", { language: "en-US@posix" });
+    const { getByTestId } = renderWithLocale(null);
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("en-US");
   });
 
-  it("should render I18nProvider with different locale values", () => {
-    const testCases = ["en-US", "fr-FR", "de-DE", "ja-JP"];
-
-    testCases.forEach((locale) => {
-      const store = createStore();
-      const config = parseUserConfig({ display: { locale } });
-      store.set(userConfigAtom, config);
-
-      const { getByTestId } = render(
-        <Provider store={store}>
-          <LocaleProvider>
-            <div>Test content for {locale}</div>
-          </LocaleProvider>
-        </Provider>,
-      );
-
-      const i18nProvider = getByTestId("i18n-provider");
-      expect(i18nProvider.dataset.locale).toBe(locale);
-      expect(i18nProvider).toHaveTextContent(`Test content for ${locale}`);
-
-      // Clean up after each iteration
-      cleanup();
-    });
+  it("falls back to the browser locale when the configured locale is unusable", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    const { getByTestId } = renderWithLocale("@@@");
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("de-DE");
   });
 
-  it("should render children correctly", () => {
+  it("resolves a concrete locale for the default config", () => {
+    vi.stubGlobal("navigator", { language: "fr-FR" });
     const store = createStore();
-    const config = parseUserConfig({ display: { locale: "en-US" } });
-    store.set(userConfigAtom, config);
-
-    const { getByText, getByRole } = render(
+    store.set(userConfigAtom, defaultUserConfig());
+    const { getByTestId } = render(
       <Provider store={store}>
         <LocaleProvider>
-          <div>
-            <h1>Test Heading</h1>
-            <p>Test paragraph</p>
-            <button type="button">Test Button</button>
-          </div>
+          <div>Default config test</div>
         </LocaleProvider>
       </Provider>,
     );
-
-    expect(getByText("Test Heading")).toBeInTheDocument();
-    expect(getByText("Test paragraph")).toBeInTheDocument();
-    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("fr-FR");
   });
 
-  it("should auto-detect locale when no locale is set in config", () => {
-    mockNavigatorLanguage = "de-DE";
-
+  it("renders children", () => {
     const store = createStore();
-    const config = defaultUserConfig();
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
+    store.set(
+      userConfigAtom,
+      parseUserConfig({ display: { locale: "en-US" } }),
+    );
+    const { getByRole } = render(
       <Provider store={store}>
         <LocaleProvider>
-          <div>Test content</div>
+          <button type="button">Test Button</button>
         </LocaleProvider>
       </Provider>,
     );
-
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    // When no locale is specified in config, it should use navigator.language
-    expect(i18nProvider.dataset.locale).toBe("de-DE");
-    expect(i18nProvider).toHaveTextContent("Test content");
+    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
   });
 });

package/src/core/i18n/__tests__/locale.test.ts

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  browserLocale,
+  FALLBACK_LOCALE,
+  isValidLocale,
+  normalizeLocale,
+  safeLocale,
+} from "../locale";
+
+describe("isValidLocale", () => {
+  it("accepts valid BCP 47 tags", () => {
+    expect(isValidLocale("en-US")).toBe(true);
+    expect(isValidLocale("de-DE")).toBe(true);
+    expect(isValidLocale("en")).toBe(true);
+  });
+
+  it("rejects empty and modifier-tainted tags", () => {
+    expect(isValidLocale("")).toBe(false);
+    expect(isValidLocale("en-US@posix")).toBe(false);
+    expect(isValidLocale("en_US.UTF-8")).toBe(false);
+  });
+});
+
+describe("normalizeLocale", () => {
+  it("keeps valid tags unchanged, including script + region", () => {
+    expect(normalizeLocale("de-DE")).toBe("de-DE");
+    expect(normalizeLocale("zh-Hant-TW")).toBe("zh-Hant-TW");
+  });
+
+  it("strips POSIX @modifiers (issue #9938)", () => {
+    expect(normalizeLocale("en-US@posix")).toBe("en-US");
+    expect(normalizeLocale("de-DE@euro")).toBe("de-DE");
+    // ICU-style unicode extension keywords are also dropped.
+    expect(normalizeLocale("de@collation=phonebook")).toBe("de");
+  });
+
+  it("strips charset suffixes and maps underscores", () => {
+    expect(normalizeLocale("en_US.UTF-8")).toBe("en-US");
+    expect(normalizeLocale("en_US")).toBe("en-US");
+  });
+
+  it("falls back to the language subtag when the full tag is invalid", () => {
+    // `-toolongsubtag` / `-oed` are structurally invalid, so `Intl.Locale`
+    // rejects the whole tag but accepts the leading `en`.
+    expect(normalizeLocale("en-toolongsubtag")).toBe("en");
+    expect(normalizeLocale("en-GB-oed")).toBe("en");
+  });
+
+  it("returns null for empty or unrecoverable tags", () => {
+    expect(normalizeLocale(null)).toBeNull();
+    expect(normalizeLocale(undefined)).toBeNull();
+    expect(normalizeLocale("")).toBeNull();
+    expect(normalizeLocale("@@@")).toBeNull();
+    // POSIX `C` locale: single-letter tag is not a valid language subtag.
+    expect(normalizeLocale("C")).toBeNull();
+  });
+});
+
+describe("browserLocale", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("normalizes navigator.language", () => {
+    vi.stubGlobal("navigator", { language: "en-US@posix" });
+    expect(browserLocale()).toBe("en-US");
+  });
+
+  it("falls back when navigator.language is unusable", () => {
+    vi.stubGlobal("navigator", { language: "@@@" });
+    expect(browserLocale()).toBe(FALLBACK_LOCALE);
+  });
+
+  it("falls back when navigator is unavailable", () => {
+    vi.stubGlobal("navigator", undefined);
+    expect(browserLocale()).toBe(FALLBACK_LOCALE);
+  });
+});
+
+describe("safeLocale", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("prefers a valid configured locale", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    expect(safeLocale("fr-FR")).toBe("fr-FR");
+  });
+
+  it("normalizes configured locales before use", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    expect(safeLocale("en_US")).toBe("en-US");
+    expect(safeLocale("en-US@posix")).toBe("en-US");
+  });
+
+  it("falls back to the browser locale when config is unusable", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    expect(safeLocale(null)).toBe("de-DE");
+    expect(safeLocale("@@@")).toBe("de-DE");
+  });
+
+  it("normalizes the browser locale on the fallback path", () => {
+    vi.stubGlobal("navigator", { language: "en-US@posix" });
+    expect(safeLocale(null)).toBe("en-US");
+  });
+
+  it("falls back to FALLBACK_LOCALE when nothing is usable", () => {
+    vi.stubGlobal("navigator", { language: "@@@" });
+    expect(safeLocale(null)).toBe(FALLBACK_LOCALE);
+  });
+});

package/src/core/i18n/locale-provider.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import type { ReactNode } from "react";
 import { I18nProvider } from "react-aria-components";
 import { localeAtom } from "@/core/config/config";
+import { safeLocale } from "./locale";
 
 interface LocaleProviderProps {
   children: ReactNode;
@@ -14,22 +15,3 @@ export const LocaleProvider = ({ children }: LocaleProviderProps) => {
 
   return <I18nProvider locale={safeLocale(locale)}>{children}</I18nProvider>;
 };
-
-function safeLocale(locale: string | null | undefined) {
-  if (!locale) {
-    return navigator.language;
-  }
-  if (isValidLocale(locale)) {
-    return locale;
-  }
-  return navigator.language;
-}
-
-function isValidLocale(locale: string) {
-  try {
-    new Intl.NumberFormat(locale);
-    return true;
-  } catch {
-    return false;
-  }
-}