@marimo-team/islands 0.23.12-dev2 → 0.23.12-dev20

package/src/core/codemirror/language/languages/sql/renderers.tsx

@@ -34,22 +34,22 @@ const PREVIEW_ITEM_LIMIT = 5;
 
 // Color mappings for data types (Tailwind-safe)
 const DATA_TYPE_COLORS: Record<DataType, string> = {
-  boolean: "bg-[var(--orange-4)] text-[var(--orange-11)]",
-  date: "bg-[var(--grass-4)] text-[var(--grass-11)]",
-  time: "bg-[var(--grass-4)] text-[var(--grass-11)]",
-  datetime: "bg-[var(--grass-4)] text-[var(--grass-11)]",
-  number: "bg-[var(--purple-4)] text-[var(--purple-11)]",
-  integer: "bg-[var(--purple-4)] text-[var(--purple-11)]",
-  string: "bg-[var(--blue-4)] text-[var(--blue-11)]",
-  unknown: "bg-[var(--slate-4)] text-[var(--slate-11)]",
+  boolean: "bg-(--orange-4) text-(--orange-11)",
+  date: "bg-(--grass-4) text-(--grass-11)",
+  time: "bg-(--grass-4) text-(--grass-11)",
+  datetime: "bg-(--grass-4) text-(--grass-11)",
+  number: "bg-(--purple-4) text-(--purple-11)",
+  integer: "bg-(--purple-4) text-(--purple-11)",
+  string: "bg-(--blue-4) text-(--blue-11)",
+  unknown: "bg-(--slate-4) text-(--slate-11)",
 };
 
 // Source type colors
 const SOURCE_TYPE_COLORS = {
-  local: "bg-[var(--blue-4)] text-[var(--blue-11)]",
-  duckdb: "bg-[var(--amber-4)] text-[var(--amber-11)]",
-  connection: "bg-[var(--green-4)] text-[var(--green-11)]",
-  catalog: "bg-[var(--purple-4)] text-[var(--purple-11)]",
+  local: "bg-(--blue-4) text-(--blue-11)",
+  duckdb: "bg-(--amber-4) text-(--amber-11)",
+  connection: "bg-(--green-4) text-(--green-11)",
+  catalog: "bg-(--purple-4) text-(--purple-11)",
 } as const;
 
 const CONTAINER_STYLES = "p-3 min-w-[250px] flex flex-col divide-y";
@@ -78,7 +78,7 @@ const MetadataRow: React.FC<{
   value: React.ReactNode;
 }> = ({ label, value }) => (
   <div className="flex items-center justify-between text-xs">
-    <span className="text-[var(--slate-11)]">{label}:</span>
+    <span className="text-(--slate-11)">{label}:</span>
     {value}
   </div>
 );
@@ -89,7 +89,7 @@ const StatisticItem: React.FC<{
 }> = ({ icon, text }) => (
   <div className="flex items-center gap-1">
     {icon}
-    <span className="text-xs text-[var(--slate-11)]">{text}</span>
+    <span className="text-xs text-(--slate-11)">{text}</span>
   </div>
 );
 
@@ -109,14 +109,12 @@ const PreviewList: React.FC<{
   return (
     <div className="py-2">
       {title && (
-        <h4 className="text-xs font-medium text-[var(--slate-11)] mb-2">
-          {title}:
-        </h4>
+        <h4 className="text-xs font-medium text-(--slate-11) mb-2">{title}:</h4>
       )}
       <div className="flex flex-col gap-1 overflow-y-auto">
         {visibleItems}
         {hasMore && (
-          <div className="text-xs text-[var(--slate-10)] text-center py-1">
+          <div className="text-xs text-(--slate-10) text-center py-1">
             ... and {totalCount - limit} more
           </div>
         )}
@@ -132,9 +130,9 @@ const getDataTypeColorClass = (dataType: DataType): string => {
 export const renderTableInfo = (table: DataTable): React.ReactNode => {
   const tableIcon =
     table.type === "view" ? (
-      <ViewIcon className="w-4 h-4 text-[var(--blue-9)]" />
+      <ViewIcon className="w-4 h-4 text-(--blue-9)" />
     ) : (
-      <TableIcon className="w-4 h-4 text-[var(--green-9)]" />
+      <TableIcon className="w-4 h-4 text-(--green-9)" />
     );
 
   const typeBadge = (
@@ -142,8 +140,8 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
       variant="secondary"
       className={`text-xs ${
         table.type === "view"
-          ? "bg-[var(--blue-4)] text-[var(--blue-11)]"
-          : "bg-[var(--green-4)] text-[var(--green-11)]"
+          ? "bg-(--blue-4) text-(--blue-11)"
+          : "bg-(--green-4) text-(--green-11)"
       }`}
     >
       {table.type}
@@ -158,7 +156,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
         className="flex items-center justify-between text-xs rounded"
       >
         <div className="flex items-center gap-2">
-          <TypeIcon className="w-3 h-3 text-[var(--slate-9)]" />
+          <TypeIcon className="w-3 h-3 text-(--slate-9)" />
           <span className="font-mono">{column.name}</span>
         </div>
         <Badge
@@ -196,7 +194,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
           <MetadataRow
             label="Variable"
             value={
-              <code className="text-xs bg-[var(--slate-4)] px-1 rounded">
+              <code className="text-xs bg-(--slate-4) px-1 rounded">
                 {table.variable_name}
               </code>
             }
@@ -207,7 +205,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
           <MetadataRow
             label="Engine"
             value={
-              <code className="text-xs bg-[var(--slate-4)] px-1 rounded">
+              <code className="text-xs bg-(--slate-4) px-1 rounded">
                 {table.engine}
               </code>
             }
@@ -220,13 +218,13 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
         <div className="grid grid-cols-2 gap-2 py-2">
           {table.num_columns != null && (
             <StatisticItem
-              icon={<ColumnIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+              icon={<ColumnIcon className="w-3 h-3 text-(--slate-9)" />}
               text={`${table.num_columns} ${columnsText.pluralize(table.num_columns)}`}
             />
           )}
           {table.num_rows != null && (
             <StatisticItem
-              icon={<HashIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+              icon={<HashIcon className="w-3 h-3 text-(--slate-9)" />}
               text={`${table.num_rows} ${rowsText.pluralize(table.num_rows)}`}
             />
           )}
@@ -242,8 +240,8 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
           {hasPrimaryKeys && (
             <div className="flex flex-row gap-1">
               <div className="flex items-center gap-1">
-                <PrimaryKeyIcon className="w-3 h-3 text-[var(--amber-9)]" />
-                <span className="text-xs font-medium text-[var(--slate-11)]">
+                <PrimaryKeyIcon className="w-3 h-3 text-(--amber-9)" />
+                <span className="text-xs font-medium text-(--slate-11)">
                   Primary Keys:
                 </span>
               </div>
@@ -251,7 +249,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
                 <Badge
                   key={key}
                   variant="outline"
-                  className="text-xs text-[var(--slate-11)]"
+                  className="text-xs text-(--slate-11)"
                 >
                   {key}
                 </Badge>
@@ -262,8 +260,8 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
           {hasIndexes && (
             <div className="flex flex-row gap-1">
               <div className="flex items-center gap-1 mb-1">
-                <IndexIcon className="w-3 h-3 text-[var(--purple-9)]" />
-                <span className="text-xs font-medium text-[var(--slate-11)]">
+                <IndexIcon className="w-3 h-3 text-(--purple-9)" />
+                <span className="text-xs font-medium text-(--slate-11)">
                   Indexes:
                 </span>
               </div>
@@ -271,7 +269,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
                 <Badge
                   key={index}
                   variant="outline"
-                  className="text-xs text-[var(--slate-11)]"
+                  className="text-xs text-(--slate-11)"
                 >
                   {index}
                 </Badge>
@@ -303,10 +301,7 @@ export const renderColumnInfo = (column: DataTableColumn): React.ReactNode => {
 
   const sampleItems =
     column.sample_values?.map((value, index) => (
-      <div
-        key={index}
-        className="text-xs bg-[var(--slate-3)] rounded font-mono"
-      >
+      <div key={index} className="text-xs bg-(--slate-3) rounded font-mono">
         {value === null || value === undefined ? "null" : String(value)}
       </div>
     )) || [];
@@ -314,7 +309,7 @@ export const renderColumnInfo = (column: DataTableColumn): React.ReactNode => {
   return (
     <div className={CONTAINER_STYLES}>
       <SectionHeader
-        icon={<TypeIcon className="w-4 h-4 text-[var(--slate-9)]" />}
+        icon={<TypeIcon className="w-4 h-4 text-(--slate-9)" />}
         title={column.name}
         badge={typeBadge}
       />
@@ -328,7 +323,7 @@ export const renderColumnInfo = (column: DataTableColumn): React.ReactNode => {
         <MetadataRow
           label="External Type"
           value={
-            <code className="text-xs bg-[var(--slate-4)] px-1 rounded">
+            <code className="text-xs bg-(--slate-4) px-1 rounded">
               {column.external_type}
             </code>
           }
@@ -349,10 +344,7 @@ export const renderColumnInfo = (column: DataTableColumn): React.ReactNode => {
 
 export const renderDatabaseInfo = (database: Database): React.ReactNode => {
   const dialectBadge = (
-    <Badge
-      variant="outline"
-      className="text-xs bg-[var(--blue-4)] text-[var(--blue-11)]"
-    >
+    <Badge variant="outline" className="text-xs bg-(--blue-4) text-(--blue-11)">
       {database.dialect}
     </Badge>
   );
@@ -360,10 +352,10 @@ export const renderDatabaseInfo = (database: Database): React.ReactNode => {
   const schemaItems = database.schemas.map((schema) => (
     <div
       key={schema.name}
-      className="flex items-center justify-between text-xs rounded hover:bg-[var(--slate-3)]"
+      className="flex items-center justify-between text-xs rounded hover:bg-(--slate-3)"
     >
       <div className="flex items-center gap-2">
-        <SchemaIcon className="w-3 h-3 text-[var(--slate-9)]" />
+        <SchemaIcon className="w-3 h-3 text-(--slate-9)" />
         <span>{schema.name}</span>
       </div>
       <Badge variant="outline" className="text-xs">
@@ -375,7 +367,7 @@ export const renderDatabaseInfo = (database: Database): React.ReactNode => {
   return (
     <div className={CONTAINER_STYLES}>
       <SectionHeader
-        icon={<DatabaseIcon className="w-4 h-4 text-[var(--blue-9)]" />}
+        icon={<DatabaseIcon className="w-4 h-4 text-(--blue-9)" />}
         title={database.name}
         badge={dialectBadge}
       />
@@ -390,7 +382,7 @@ export const renderDatabaseInfo = (database: Database): React.ReactNode => {
           <MetadataRow
             label="Engine"
             value={
-              <code className="text-xs bg-[var(--slate-4)] px-1 rounded">
+              <code className="text-xs bg-(--slate-4) px-1 rounded">
                 {database.engine}
               </code>
             }
@@ -400,7 +392,7 @@ export const renderDatabaseInfo = (database: Database): React.ReactNode => {
       {/* Schema Statistics */}
       <div className="py-2">
         <StatisticItem
-          icon={<SchemaIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+          icon={<SchemaIcon className="w-3 h-3 text-(--slate-9)" />}
           text={`${database.schemas.length} schema${database.schemas.length === 1 ? "" : "s"}`}
         />
       </div>
@@ -423,7 +415,7 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
   const schemaBadge = (
     <Badge
       variant="outline"
-      className="text-xs bg-[var(--green-4)] text-[var(--green-11)]"
+      className="text-xs bg-(--green-4) text-(--green-11)"
     >
       Schema
     </Badge>
@@ -432,13 +424,13 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
   const tableItems = schema.tables.map((table) => (
     <div
       key={table.name}
-      className="flex items-center justify-between text-xs rounded hover:bg-[var(--slate-3)]"
+      className="flex items-center justify-between text-xs rounded hover:bg-(--slate-3)"
     >
       <div className="flex items-center gap-2">
         {table.type === "view" ? (
-          <ViewIcon className="w-3 h-3 text-[var(--blue-9)]" />
+          <ViewIcon className="w-3 h-3 text-(--blue-9)" />
         ) : (
-          <TableIcon className="w-3 h-3 text-[var(--green-9)]" />
+          <TableIcon className="w-3 h-3 text-(--green-9)" />
         )}
         <span>{table.name}</span>
       </div>
@@ -446,8 +438,8 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
         variant="outline"
         className={`text-xs ${
           table.type === "view"
-            ? "bg-[var(--blue-4)] text-[var(--blue-11)]"
-            : "bg-[var(--green-4)] text-[var(--green-11)]"
+            ? "bg-(--blue-4) text-(--blue-11)"
+            : "bg-(--green-4) text-(--green-11)"
         }`}
       >
         {table.type}
@@ -458,7 +450,7 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
   return (
     <div className={CONTAINER_STYLES}>
       <SectionHeader
-        icon={<SchemaIcon className="w-4 h-4 text-[var(--green-9)]" />}
+        icon={<SchemaIcon className="w-4 h-4 text-(--green-9)" />}
         title={schema.name}
         badge={schemaBadge}
       />
@@ -466,7 +458,7 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
       {/* Table Statistics */}
       <div className="py-2">
         <StatisticItem
-          icon={<TableIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+          icon={<TableIcon className="w-3 h-3 text-(--slate-9)" />}
           text={`${schema.tables.length} table${schema.tables.length === 1 ? "" : "s"}`}
         />
       </div>
@@ -516,7 +508,7 @@ export const renderDatasourceInfo = (
         .map((table) => {
           return (
             <div key={table.name} className="flex items-center gap-2 ml-4">
-              <TableIcon className="w-3 h-3 text-[var(--green-9)]" />
+              <TableIcon className="w-3 h-3 text-(--green-9)" />
               <span className="text-xs">{table.name}</span>
             </div>
           );
@@ -525,8 +517,8 @@ export const renderDatasourceInfo = (
 
     return (
       <div key={schema.name}>
-        <div className="flex items-center gap-2 text-xs rounded hover:bg-[var(--slate-3)] ml-2">
-          <SchemaIcon className="w-3 h-3 text-[var(--slate-9)]" />
+        <div className="flex items-center gap-2 text-xs rounded hover:bg-(--slate-3) ml-2">
+          <SchemaIcon className="w-3 h-3 text-(--slate-9)" />
           <span>{schema.name}</span>
           {isDefaultSchema && DefaultBadge}
           <Badge variant="outline" className="text-xs ml-auto">
@@ -554,7 +546,7 @@ export const renderDatasourceInfo = (
     return (
       <div key={db.name}>
         <div className="flex items-center gap-2">
-          <DatabaseIcon className="w-3 h-3 text-[var(--blue-9)]" />
+          <DatabaseIcon className="w-3 h-3 text-(--blue-9)" />
           <span className="text-xs">{db.name}</span>
           {isDefaultDb && DefaultBadge}
         </div>
@@ -572,7 +564,7 @@ export const renderDatasourceInfo = (
 
   const dataframeItems = dataframes?.map((table) => (
     <div key={table.name} className="flex items-center gap-2">
-      <TableIcon className="w-3 h-3 text-[var(--blue-9)]" />
+      <TableIcon className="w-3 h-3 text-(--blue-9)" />
       <span className="text-xs">{table.name}</span>
     </div>
   ));
@@ -580,7 +572,7 @@ export const renderDatasourceInfo = (
   return (
     <div className={`${CONTAINER_STYLES} px-1`}>
       <SectionHeader
-        icon={<DatasourceIcon className="w-4 h-4 text-[var(--purple-9)]" />}
+        icon={<DatasourceIcon className="w-4 h-4 text-(--purple-9)" />}
         title={title}
       />
 
@@ -599,7 +591,7 @@ export const renderDatasourceInfo = (
           value={
             <Badge
               variant="outline"
-              className="text-xs bg-[var(--green-4)] text-[var(--green-11)]"
+              className="text-xs bg-(--green-4) text-(--green-11)"
             >
               {connection.source}
             </Badge>
@@ -610,11 +602,11 @@ export const renderDatasourceInfo = (
       {/* Statistics */}
       <div className="flex flex-row justify-between py-2">
         <StatisticItem
-          icon={<DatabaseIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+          icon={<DatabaseIcon className="w-3 h-3 text-(--slate-9)" />}
           text={`${databaseCount} ${databasesText.pluralize(databaseCount)}`}
         />
         <StatisticItem
-          icon={<SchemaIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+          icon={<SchemaIcon className="w-3 h-3 text-(--slate-9)" />}
           text={`${schemasCount} ${schemasText.pluralize(schemasCount)}`}
         />
       </div>
@@ -641,10 +633,10 @@ export const renderEmptyInfo = (
 ) => {
   return (
     <div className="flex items-start gap-2 mt-3">
-      <InfoIcon size={10} className="mt-1 text-[var(--slate-10)] shrink-0" />
-      <span className="text-xs text-[var(--slate-11)]">
+      <InfoIcon size={10} className="mt-1 text-(--slate-10) shrink-0" />
+      <span className="text-xs text-(--slate-11)">
         No {type} information available.{" \n"}
-        <span className="text-[var(--blue-10)]">
+        <span className="text-(--blue-10)">
           Introspect to see more details.
         </span>
       </span>

package/src/core/codemirror/reactive-references/__tests__/analyzer.test.ts

@@ -640,6 +640,60 @@ def run(polars):
     `);
   });
 
+  test("set comprehension target shadows outer global", () => {
+    // Regression: SCOPE_CREATING_NODES used "SetComprehension" instead of the
+    // grammar's "SetComprehensionExpression", so set comprehensions never
+    // created a scope and their for-target was treated as reactive.
+    expect(runHighlight(["x"], "result = {x for x in range(5)}"))
+      .toMatchInlineSnapshot(`
+      "
+      result = {x for x in range(5)}
+      "
+    `);
+  });
+
+  test("from-import module path stays reactive", () => {
+    // Regression: ImportStatement collected every VariableName child, so the
+    // module name in `from m import y` was wrongly treated as a local binding.
+    expect(
+      runHighlight(
+        ["math"],
+        `
+def f():
+    from math import sin as my_sin
+    return math + my_sin(1)`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      def f():
+          from math import sin as my_sin
+          return math + my_sin(1)
+                 ^^^^
+      "
+    `);
+  });
+
+  test("from-import: aliased imported name is not a binding", () => {
+    // Regression: `sin` in `from math import sin as my_sin` was incorrectly
+    // registered as a local binding, hiding genuine reactive uses of `sin`.
+    expect(
+      runHighlight(
+        ["sin"],
+        `
+def f():
+    from math import sin as my_sin
+    return sin + my_sin(1)`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      def f():
+          from math import sin as my_sin
+          return sin + my_sin(1)
+                 ^^^
+      "
+    `);
+  });
+
   test("lambda inside function with outer global", () => {
     expect(
       runHighlight(

package/src/core/codemirror/reactive-references/analyzer.ts

@@ -16,7 +16,7 @@ const SCOPE_CREATING_NODES = new Set([
   "FunctionDefinition",
   "LambdaExpression",
   "ArrayComprehensionExpression",
-  "SetComprehension",
+  "SetComprehensionExpression",
   "DictionaryComprehensionExpression",
   "ComprehensionExpression",
   "ClassDefinition",
@@ -152,7 +152,7 @@ export function findReactiveVariables(options: {
       }
       case "ArrayComprehensionExpression":
       case "DictionaryComprehensionExpression":
-      case "SetComprehension":
+      case "SetComprehensionExpression":
       case "ComprehensionExpression": {
         // Domprehension variables - look for VariableName or TupleExpression after 'for'
         const subCursor = node.cursor();
@@ -276,49 +276,52 @@ export function findReactiveVariables(options: {
         break;
       }
       case "ImportStatement": {
-        // Handle import x
+        // The grammar emits a single ImportStatement for both `import x [as y]`
+        // and `from m import x [as y], ...`. Direct children mix keywords,
+        // module-path names (before `import`), imported names, and aliases.
+        // Only post-`import` names that aren't shadowed by a following `as`
+        // (and the alias itself when `as` is present) bind in the current
+        // scope.
         const subCursor = node.cursor();
         subCursor.firstChild();
-        do {
-          if (subCursor.name === "VariableName") {
-            const varName = options.state.doc.sliceString(
-              subCursor.from,
-              subCursor.to,
-            );
-
-            const currentScope =
-              currentScopeStack[currentScopeStack.length - 1] ?? -1;
-            if (!allDeclarations.has(currentScope)) {
-              allDeclarations.set(currentScope, new Set());
-            }
-            allDeclarations.get(currentScope)?.add(varName);
+        const currentScope =
+          currentScopeStack[currentScopeStack.length - 1] ?? -1;
+        if (!allDeclarations.has(currentScope)) {
+          allDeclarations.set(currentScope, new Set());
+        }
+        const scope = allDeclarations.get(currentScope);
+        let pastImport = false;
+        let pending: string | null = null;
+        const commit = () => {
+          if (pending !== null) {
+            scope?.add(pending);
           }
-        } while (subCursor.nextSibling());
-
-        break;
-      }
-      case "ImportFromStatement": {
-        // Handle from x import y as z
-        const subCursor = node.cursor();
-        subCursor.firstChild();
-        let foundImport = false;
+          pending = null;
+        };
         do {
           if (subCursor.name === "import") {
-            foundImport = true;
-          } else if (foundImport && subCursor.name === "VariableName") {
-            const varName = options.state.doc.sliceString(
+            pastImport = true;
+            continue;
+          }
+          if (!pastImport) {
+            continue;
+          }
+          if (subCursor.name === "as") {
+            // Drop the imported name; the next VariableName is the alias.
+            pending = null;
+            continue;
+          }
+          if (subCursor.name === "VariableName") {
+            commit();
+            pending = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
             );
-            // Add to the current innermost scope
-            const currentScope =
-              currentScopeStack[currentScopeStack.length - 1] ?? -1;
-            if (!allDeclarations.has(currentScope)) {
-              allDeclarations.set(currentScope, new Set());
-            }
-            allDeclarations.get(currentScope)?.add(varName);
+          } else if (subCursor.name === ",") {
+            commit();
           }
         } while (subCursor.nextSibling());
+        commit();
 
         break;
       }
@@ -424,6 +427,12 @@ export function findReactiveVariables(options: {
     const nodeName = cursor.name;
     const nodeStart = cursor.from;
 
+    // Names inside an import statement are module paths, imported names, or
+    // aliases — none of them are reactive *uses* of an outer-cell global.
+    if (nodeName === "ImportStatement") {
+      return;
+    }
+
     const isNewScope = SCOPE_CREATING_NODES.has(nodeName);
 
     let currentScopeStack = scopeStack;

package/src/core/hotkeys/hotkeys.ts

@@ -374,6 +374,7 @@ const DEFAULT_HOT_KEY = {
     name: "Show all code",
     group: "Editing",
     key: NOT_SET,
+    additionalKeywords: ["unhide", "hide", "reveal", "show source"],
   },
   "global.hideAllCode": {
     name: "Hide all code",

package/src/core/islands/__tests__/bridge.test.ts

@@ -12,6 +12,7 @@ import {
 type Base64String = components["schemas"]["Base64String"];
 interface TestIslandApp {
   id: string;
+  payloadBacked?: boolean;
   cells: { code: string; idx: number; output: string }[];
 }
 interface TestExportContext {
@@ -142,6 +143,30 @@ describe("IslandsPyodideBridge", () => {
       });
     });
 
+    it("should ignore trusted export notebook code for a payload-backed app", async () => {
+      const payloadApp = {
+        id: "app-1",
+        payloadBacked: true,
+        cells: [{ code: "x = 1", idx: 0, output: "<div>1</div>" }],
+      };
+      mockParseMarimoIslandApps.mockReturnValue([payloadApp]);
+      mockGetMarimoExportContext.mockReturnValue({
+        trusted: true,
+        notebookCode: "full notebook should be ignored",
+      });
+      mockCreateMarimoFile.mockReturnValue("generated payload app");
+
+      await (
+        bridge as unknown as { startSessionsForAllApps(): Promise<void> }
+      ).startSessionsForAllApps();
+
+      expect(mockCreateMarimoFile).toHaveBeenCalledWith(payloadApp);
+      expect(mockStartSessionRequest).toHaveBeenCalledWith({
+        appId: "app-1",
+        code: "generated payload app",
+      });
+    });
+
     it("should keep synthesized per-app files for multiple reactive apps even when export context exists", async () => {
       mockParseMarimoIslandApps.mockReturnValue([
         {