@checkstack/ui 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @checkstack/ui
 
+## 1.15.0
+
+### Minor Changes
+
+- fb705df: Upgrade React 18 to React 19 across the platform.
+
+  **BREAKING (runtime frontend plugins):** React is shared as a Module Federation
+  singleton, so the host now provides **React 19** to every runtime plugin.
+  Frontend plugins built against React 18 must be rebuilt against React 19
+  (`react` / `react-dom` `^19`). The scaffold templates and the host/plugin MF
+  `requiredVersion` are updated to `^19`. `react` (and now `react-dom`) are pinned
+  to a single version across the workspace via syncpack so the singleton can never
+  skew (react and react-dom must match exactly).
+
+  The React 19 removed-API surface was audited - the codebase used only no-arg
+  `useRef()` (now `useRef<T | undefined>(undefined)`); no `ReactDOM.render`,
+  legacy context, string refs, or function-component `defaultProps`. This also
+  clears the `IMPORT_IS_UNDEFINED` build warnings for `React.use` /
+  `React.useOptimistic` (react-router 7 feature-detection), which React 19 exports.
+
+  The downstream `*-frontend` packages (and `@checkstack/infrastructure-common`)
+  receive only the mechanical `react` dependency bump (`patch`); the framework
+  packages carrying the shared-singleton change are bumped `minor`.
+
+### Patch Changes
+
+- 9d8961c: Fix the double-scrolling on the AI chat page (`/ai/chat`). The page sized its
+  layout with a fixed `calc(100vh - 220px)` height, which overshot the available
+  space when the page subtitle wrapped to two lines - so the whole page scrolled
+  on top of the message list's own scroll.
+
+  `PageLayout` gains an opt-in `fillHeight` prop that fills the viewport via a
+  bounded flex height chain (established in the app shell) instead of viewport
+  math; the chat page uses it so only the message list scrolls and the page itself
+  never does. Normal document-flow pages are unaffected (they still scroll the
+  main area as before).
+
+- Updated dependencies [fb705df]
+  - @checkstack/frontend-api@0.8.0
+  - @checkstack/common@0.14.1
+  - @checkstack/template-engine@0.4.2
+
 ## 1.14.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@checkstack/common": "0.14.1",
-    "@checkstack/frontend-api": "0.7.2",
+    "@checkstack/frontend-api": "0.8.0",
     "@checkstack/template-engine": "0.4.2",
     "@codingame/monaco-vscode-editor-api": "25.1.2",
     "@codingame/monaco-vscode-languages-service-override": "25.1.2",
@@ -37,9 +37,9 @@
     "jsonc-parser": "^3.3.1",
     "lucide-react": "^1.17.0",
     "monaco-languageclient": "10.7.0",
-    "react": "^18.3.1",
+    "react": "19.2.7",
     "react-day-picker": "^9.13.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "19.2.7",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.16.0",
     "recharts": "^3.6.0",
@@ -51,8 +51,8 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.5.0",
-    "@checkstack/test-utils-frontend": "0.1.0",
+    "@checkstack/scripts": "0.6.0",
+    "@checkstack/test-utils-frontend": "0.1.1",
     "@checkstack/tsconfig": "0.0.7",
     "@storybook/addon-a11y": "^10.4.1",
     "@storybook/addon-docs": "^10.4.1",
@@ -62,8 +62,8 @@
     "@testing-library/react": "^16.0.0",
     "@types/bun": "^1.3.14",
     "@types/node": "^20.19.27",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "bun-types": "^1.3.14",
     "autoprefixer": "^10.4.18",

package/src/components/PageLayout.tsx

@@ -7,6 +7,7 @@ import {
   LoadingSpinner,
   AccessDenied,
 } from "..";
+import { cn } from "../utils";
 
 interface PageLayoutProps {
   title: string;
@@ -16,6 +17,15 @@ interface PageLayoutProps {
   loading?: boolean;
   allowed?: boolean;
   children: React.ReactNode;
+  /**
+   * Make the content area fill the viewport height instead of growing with its
+   * content. The page's own children then own their scrolling (e.g. a chat
+   * message list), so the page itself never scrolls. Use for full-height app
+   * surfaces (chat, canvases); leave off for normal document-flow pages, which
+   * scroll the main area as usual. Relies on the bounded height chain in
+   * core/frontend's App shell.
+   */
+  fillHeight?: boolean;
   maxWidth?:
     | "sm"
     | "md"
@@ -38,6 +48,7 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   loading,
   allowed,
   children,
+  fillHeight = false,
   maxWidth = "7xl",
 }) => {
   // If loading is explicitly true, show loading state
@@ -82,18 +93,23 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   }
 
   return (
-    <Page>
+    <Page className={fillHeight ? "min-h-0" : undefined}>
       <PageHeader
         title={title}
         subtitle={subtitle}
         icon={icon}
         actions={actions}
       />
-      <PageContent>
+      <PageContent
+        className={fillHeight ? "flex min-h-0 flex-col" : undefined}
+      >
         <div
-          className={
-            maxWidth === "full" ? "space-y-6" : `max-w-${maxWidth} space-y-6`
-          }
+          className={cn(
+            maxWidth === "full" ? undefined : `max-w-${maxWidth}`,
+            // fillHeight: fill the bounded content area and let children scroll.
+            // Otherwise: normal document flow with vertical rhythm.
+            fillHeight ? "flex min-h-0 flex-1 flex-col" : "space-y-6",
+          )}
         >
           {children}
         </div>

package/src/hooks/useAnimatedNumber.ts

@@ -14,8 +14,8 @@ export function useAnimatedNumber(
   decimals = 2,
 ): string {
   const [displayValue, setDisplayValue] = useState(targetValue);
-  const animationRef = useRef<number>();
-  const startTimeRef = useRef<number>();
+  const animationRef = useRef<number | undefined>(undefined);
+  const startTimeRef = useRef<number | undefined>(undefined);
   const startValueRef = useRef<number | undefined>(undefined);
 
   useEffect(() => {