chore(apps): update data-app consumers to 0.65.0

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Changed
+
+- Update generated and upgraded data apps to `@altertable/data-app` 0.65.0.
+
 ## [1.9.0](https://github.com/altertable-ai/altertable-cli/compare/v1.8.0...v1.9.0) (2026-10-01)
 
 

cli/src/commands/app/lib/distribution.test.ts

@@ -40,7 +40,7 @@ test("distribution embeds a deterministic starter with an exact package pin and
   );
   expect(files["src/App.tsx"]).toBe(payload.starter["src/App.tsx"]);
   expect(files["src/server.ts"]).toContain("@altertable/data-app/server/bun");
-  expect(files["src/main.tsx"]).toContain("@altertable/data-app/react/styles.css");
+  expect(files["src/main.tsx"]).toContain("injectDataAppStyles();");
   expect(files["bun.lock"]).toContain('"name": "example"');
 });
 

data-app/AGENTS.md

@@ -9,6 +9,6 @@
 
 See [development commands](README.md#develop). Keep SQL and metric definitions in app-owned source.
 Import only public package exports; local Bun serving uses `/server/bun`, and each browser entry
-imports `/react/styles.css`. Keep starter and browser-test package pins aligned, commit their
+calls `injectDataAppStyles()` before mounting. Keep starter and browser-test package pins aligned, commit their
 lockfiles, and preserve documentation links to installed package docs. Do not copy runtime source
 into this repository or generated apps.

data-app/README.md

@@ -27,7 +27,7 @@ Generated projects commit their source, package manifest, and lockfile; they do
 source. Public imports use `@altertable/data-app/...`.
 
 The starter owns React, ReactDOM, and its authoring tools. The package owns its implementation
-dependencies. Its stylesheet is imported explicitly by the browser entry. The app's `AGENTS.md`
+dependencies. The browser entry calls `injectDataAppStyles()` before mounting. The app's `AGENTS.md`
 points to the installed package guide and docs; dependency guides are not assumed to load automatically.
 
 To adopt a package release, update its exact pin in both `starter/package.json` and

data-app/starter/app.json

@@ -3,7 +3,7 @@
   "title": "Getting started",
   "scope": { "organization": "Your organization", "environment": "your environment" },
   "appearance": {
-    "mode": "light",
+    "theme": "light",
     "baseColor": "neutral",
     "accentColor": "#405d47",
     "density": "comfortable",

data-app/starter/fixtures/main.tsx

@@ -1,5 +1,4 @@
-import "@altertable/data-app/react/styles.css";
-import { mountDataApp } from "@altertable/data-app/react";
+import { injectDataAppStyles, mountDataApp } from "@altertable/data-app/react";
 import { useState } from "react";
 import { createDataHooks } from "@altertable/data-app/react";
 import { createDataClient } from "@altertable/data-app/client";
@@ -30,7 +29,7 @@ const { defineDataView, useView } = createDataHooks<{
 const config = {
   title: "Orders exploration",
   scope: { organization: "Acme", environment: "production" },
-  appearance: { mode: "light" },
+  appearance: { theme: "light" as const },
 };
 const identifiers = defineDataIdentifiers({
   tables: {
@@ -105,6 +104,10 @@ function Fixture() {
           </GridItem>
         </Grid>
       }
+      csvExport={() => ({
+        filename: "orders.csv",
+        tables: [{ name: "Orders", columns: ["Orders", "Customers"], rows: [[120, 80]] }],
+      })}
       story={() => [
         {
           id: "orders",
@@ -200,4 +203,5 @@ function Fixture() {
   );
 }
 
+injectDataAppStyles();
 mountDataApp({ config, component: Fixture });

data-app/starter/fixtures/view.tsx

@@ -1,7 +1,7 @@
-import "@altertable/data-app/react/styles.css";
 import { createDataClient } from "@altertable/data-app/client";
 import {
   createDataHooks,
+  injectDataAppStyles,
   mountDataApp,
 } from "@altertable/data-app/react";
 import {
@@ -24,7 +24,7 @@ import {
 
 type Activity = { count: number; features: string[] };
 const config = {
-  appearance: { mode: "light" },
+  appearance: { theme: "light" as const },
   title: "Usage exploration",
   scope: { organization: "Acme", environment: "production" },
 };
@@ -98,8 +98,24 @@ function Fixture() {
       request={activity}
       dataContext={context}
       aboutEmpty={{ glossary: { title: "No definitions" }, queries: { title: "No SQL" } }}
+      story={({ data }) => [
+        context.finding({
+          id: "activity",
+          headline: `${data.count} recorded actions`,
+          visual: <p>{data.features.join(", ")}</p>,
+          evidence: { id: "activity", queryNames: ["activity"] },
+        }),
+      ]}
+      csvExport={({ data }) => ({
+        filename: "activity.csv",
+        tables: [
+          { name: "Actions", columns: ["Count"], rows: [[data.count]] },
+          { name: "Features", columns: ["Feature"], rows: data.features.map((feature) => [feature]) },
+        ],
+      })}
       {...content}
     />
   );
 }
+injectDataAppStyles();
 mountDataApp({ config, component: Fixture });

data-app/starter/package.json

@@ -15,7 +15,7 @@
     "build": "bun build src/index.html --outdir=dist --production"
   },
   "dependencies": {
-    "@altertable/data-app": "0.61.0",
+    "@altertable/data-app": "0.65.0",
     "react": "19.3.0",
     "react-dom": "19.3.0"
   },

data-app/starter/src/App.tsx

@@ -1,6 +1,6 @@
 import { GettingStarted } from "@altertable/data-app/react";
 import { dataContext } from "#app/data-context.ts";
-import app from "#config";
+import app from "#app/config.ts";
 
 /** Connectivity-only screen. Investigate the requested question, then replace this with a view
  * that leads with a supported finding and explores the useful angles behind it. */

data-app/starter/src/config.ts

@@ -0,0 +1,9 @@
+import { parseAppearance } from "@altertable/data-app/appearance";
+import type { DataAppConfig } from "@altertable/data-app/config";
+import app from "#config";
+
+export default {
+  title: app.title,
+  scope: app.scope,
+  appearance: parseAppearance(app.appearance),
+} satisfies DataAppConfig;

data-app/starter/src/main.tsx

@@ -1,6 +1,6 @@
-import "@altertable/data-app/react/styles.css";
-import { mountDataApp } from "@altertable/data-app/react";
+import { injectDataAppStyles, mountDataApp } from "@altertable/data-app/react";
 import { App } from "#app/App.tsx";
-import app from "#config";
+import app from "#app/config.ts";
 
+injectDataAppStyles();
 mountDataApp({ config: app, component: App });

data-app/starter/src/server.ts

@@ -1,6 +1,6 @@
 import page from "#app/index.html";
 import { serveLocalApp } from "@altertable/data-app/server/bun";
 import { operations } from "#app/operations.ts";
-import app from "#config";
+import app from "#app/config.ts";
 
 serveLocalApp({ page, operations, title: app.title });

data-app/tests/package.json

@@ -15,6 +15,6 @@
     "typescript": "7.0.2"
   },
   "dependencies": {
-    "@altertable/data-app": "0.61.0"
+    "@altertable/data-app": "0.65.0"
   }
 }

data-app/tests/starter.spec.ts

@@ -147,7 +147,7 @@ test("data view keeps the last result visible when refresh fails", async ({
   await page.goto("/components");
   const error = page.getByRole("alert");
   await expect(error).toContainText("Couldn’t load results");
-  await expect(error).toContainText("The data request failed.");
+  await expect(error).toContainText("The lakehouse isn’t responding.");
   await expect(error.getByRole("button", { name: "Retry" })).toBeVisible();
   expect(
     await error.evaluate((element) => element.getBoundingClientRect().width),
@@ -197,10 +197,12 @@ test("table pages show bounded rows and reset when filtering changes", async ({
   await page.getByRole("searchbox", { name: "Search orders" }).fill("Order");
   await expect(pagination).toContainText("1–4 of 11 results");
   await page.getByRole("searchbox", { name: "Search orders" }).fill("Order 5");
-  await expect(pagination).toContainText("1–1 of 1 result");
-  await expect(pagination.getByRole("button", { name: "Previous page" })).toBeDisabled();
-  await expect(pagination.getByRole("button", { name: "Next page" })).toBeDisabled();
+  await expect(pagination).toHaveCount(0);
   await expect(table.getByText("Order 5")).toBeVisible();
+  await expect(table.locator("tbody tr")).toHaveCount(1);
+  await page.getByRole("searchbox", { name: "Search orders" }).fill("");
+  await expect(pagination).toContainText("1–4 of 11 results");
+  await expect(pagination.getByRole("button", { name: "Previous page" })).toBeDisabled();
 });
 
 test("request progress appears before Refresh", async ({ page }) => {