@cube-dev/ui-kit 0.0.0-canary-1bb3a1f → 0.0.0-canary-b7fd3ea

package/docs/CreateComponent.md

@@ -282,7 +282,7 @@ This demonstrates a basic component with:
 - Clean, minimal implementation
 
 ```tsx
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
 import {
   AllBaseProps,
   CONTAINER_STYLES,
@@ -299,10 +299,12 @@ const BlockElement = tasty({
 });
 
 export interface CubeBlockProps
-  extends Omit<AllBaseProps, keyof ContainerStyleProps | 'as'>,
-    ContainerStyleProps {}
+  extends Omit<AllBaseProps, keyof ContainerStyleProps | 'as' | 'ref'>,
+    ContainerStyleProps {
+  ref?: Ref<HTMLDivElement>;
+}
 
-export const Block = forwardRef(function Block(props: CubeBlockProps, ref) {
+export function Block({ ref, ...props }: CubeBlockProps) {
   const styles = extractStyles(props, CONTAINER_STYLES);
 
   return (
@@ -312,7 +314,7 @@ export const Block = forwardRef(function Block(props: CubeBlockProps, ref) {
       styles={styles}
     />
   );
-});
+}
 ```
 
 ### Example 2: Action Component (Advanced)
@@ -325,8 +327,8 @@ This demonstrates advanced features:
 - Custom behavior logic
 
 ```tsx
-import { FocusableRef } from '@react-types/shared';
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
+import { useObjectRef } from '@react-aria/utils';
 import { AriaButtonProps, useButton, useHover } from 'react-aria';
 import {
   AllBaseProps,
@@ -342,7 +344,7 @@ import {
 } from '@tenphi/tasty';
 
 export interface CubeActionProps<T extends TagName = 'button'>
-  extends Omit<AllBaseProps<T>, 'htmlType'>,
+  extends Omit<AllBaseProps<T>, 'htmlType' | 'ref'>,
     BaseStyleProps,
     ContainerStyleProps,
     TextStyleProps,
@@ -350,6 +352,7 @@ export interface CubeActionProps<T extends TagName = 'button'>
   to?: string;
   label?: string;
   htmlType?: 'button' | 'submit' | 'reset';
+  ref?: Ref<HTMLElement>;
 }
 
 const DEFAULT_ACTION_STYLES: Styles = {
@@ -371,7 +374,7 @@ const ActionElement = tasty({
 
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 
-export const Action = forwardRef(function Action(
+export function Action(
   {
     to,
     as = 'button',
@@ -381,11 +384,11 @@ export const Action = forwardRef(function Action(
     mods,
     onPress,
     isDisabled,
+    ref,
     ...props
   }: CubeActionProps,
-  ref: FocusableRef<HTMLElement>,
 ) {
-  const domRef = useRef();
+  const domRef = useObjectRef(ref);
   const { buttonProps, isPressed } = useButton(
     {
       'aria-label': label,
@@ -417,7 +420,7 @@ export const Action = forwardRef(function Action(
       styles={styles}
     />
   );
-});
+}
 ```
 
 ## Form Integration
@@ -446,18 +449,28 @@ For input components that need to integrate with forms, see the [Field documenta
 
 7. **Keep it simple when appropriate**: Not every component needs all features - use what makes sense for your use case
 
-8. **Use named React imports**: Import `useState`, `useRef`, `forwardRef` etc. directly from `'react'` instead of using `React.useState(...)`.
+8. **Use named React imports**: Import `useState`, `useRef`, `useEffectEvent` etc. directly from `'react'` instead of using `React.useState(...)`.
 
-   **Skip `useMemo` and `useCallback` for performance.** React Compiler memoizes compiled components and hooks at build time, so derived values, `mods` objects and handlers are plain expressions. Keep a manual memo where identity is part of the contract: callback refs, effect dependencies, `useSyncExternalStore` subscriptions, per-mount values, context provider values and imperative APIs. Tests run uncompiled source, and known compiler bailouts retain their existing memos. See [React Compiler](https://github.com/cube-js/cube-ui-kit/blob/main/AGENTS.md#react-compiler-skip-manual-memoization).
+   **Use plain derived values and handlers.** Follow the [React Compiler rules](https://github.com/cube-js/cube-ui-kit/blob/main/docs/rules/react-compiler.md). Manual memoization controls identity only when required; it does not own a persistent per-mount lifetime.
 
-9. **Use `useEvent` for stable callbacks**: When a callback doesn't need to trigger re-renders, prefer `useEvent` from `src/_internal/hooks/use-event` for a stable identity that always calls the latest implementation:
+9. **Choose callbacks by ownership**: Ordinary handlers are plain functions. Local effect-owned notifications use the canonical named `useEffectEvent` import. Keep resource configuration reactive and exclude Effect Events from dependencies. Retain internal `useEvent` only when a previously stored reference must keep its identity and call the latest committed implementation.
 
 ```tsx
-import { useEvent } from '../_internal/hooks/use-event';
+import { useEffect, useEffectEvent } from 'react';
 
-const handleClick = useEvent((e) => {
-  // always has latest closure, but stable identity
-});
+function Connection({ roomId, connect, notify, theme }) {
+  const handleClick = () => notify(theme);
+  const onConnected = useEffectEvent(() => notify(theme));
+
+  useEffect(() => {
+    const connection = connect(roomId);
+    connection.on('connected', onConnected);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [connect, roomId]);
+
+  return <button onClick={handleClick}>Notify</button>;
+}
 ```
 
 10. **Use `variants` for theming, not sizing**: The `variants` option in `tasty()` defines mutually exclusive visual variations (e.g. `default`, `danger`, `outline`). CSS is only generated for variants actually rendered at runtime. Use modifiers for dimensions like `size`.
@@ -473,7 +486,7 @@ When creating a new component, consider:
 - [ ] Sub-element definitions for targeted styling
 - [ ] React Aria integration for accessibility
 - [ ] TypeScript interfaces following naming conventions
-- [ ] forwardRef for ref passing
+- [ ] Ref prop with the exposed DOM/imperative type and correct target; preserve generic inference and callback cleanup
 - [ ] Default styles and theme support
 - [ ] Documentation following UI Kit standards
 

package/docs/Usage.md

@@ -13,7 +13,7 @@ For styling engine internals see the [Tasty documentation](./tasty/usage.md). Ta
 
 ## React Compiler
 
-UI Kit ships components optimized with React Compiler and supports React 18 and 19. Your application does not need to enable Compiler to use this build. Adoption is incremental: functions with known compatibility diagnostics remain unoptimized, and the legacy form's mutable render paths are explicitly excluded.
+UI Kit ships components optimized with React Compiler and requires React and React DOM 19.3 or newer. Your application does not need to enable Compiler to use this build. Adoption is incremental: functions with known compatibility diagnostics remain unoptimized, and the legacy form's mutable render paths are explicitly excluded.
 
 Compiling UI Kit does not make mutable legacy form reads in your application reactive. When enabling Compiler in an application, migrate those consumers to the modern Form subscriptions (`Form.useValue`, `Form.useSelector`, or `Form.Subscribe`) or keep the affected consumer components uncompiled with `"use no memo"`. Forms without an explicit instance still use the legacy implementation.
 

package/docs/components/actions/CommandMenu.md

@@ -453,5 +453,5 @@ The CommandMenu supports enhanced search capabilities:
 ### Browser Support
 
 - Modern browsers with ES2018+ support
-- Requires React 18+ for concurrent features
+- Requires React and React DOM 19.3 or newer
 - Uses React Aria for cross-browser accessibility

package/docs/components/form/Form.md

@@ -160,7 +160,7 @@ A `Form` placed directly in a `Dialog`, wrapping its `Content` and `Footer`, lay
 
 ## React Compiler
 
-The modern controller, subscriptions, input binding, and dialog workflows are tested with React Compiler on React 18 and 19. The published library remains uncompiled. Consumer render code must use `Form.useValue`, `Form.useFieldState`, or selectors to subscribe; imperative getters do not subscribe. This does not make legacy mutable instance reads Compiler-safe.
+The modern controller, subscriptions, input binding, and dialog workflows are tested with React Compiler on React 19.3. The published library is compiled using React’s native compiler runtime; consumers do not need to enable Compiler. Consumer render code must use `Form.useValue`, `Form.useFieldState`, or selectors to subscribe; imperative getters do not subscribe. This does not make legacy mutable instance reads Compiler-safe.
 
 ## Accessibility
 

package/docs/modern-form-migration.md

@@ -2,7 +2,7 @@
 
 Modern Form is opt-in per form. Existing `Form.useForm()` calls, roots without a controller, and legacy wrappers continue to use the legacy engine. Start with a leaf form whose defaults, conditional fields, and submission payload are understood. Do not swap the backend of a mounted root: choose one component at a migration boundary and remount when changing that choice.
 
-The [compiled consumer examples](https://github.com/cube-js/cube-ui-kit/blob/main/typecheck/consumer/modern-form-examples.tsx) cover creation with a colocated selector, narrow descendant subscriptions, conditional fields, async defaults, a custom control, and cancellable validation. `pnpm build && pnpm test:types:consumer` checks those examples against the declarations consumers receive. The published library is compiled for React 18 and 19; CI checks adapters and packaged consumers both with and without React Compiler. See [the compiler guide](../scripts/compiler/README.md).
+The [compiled consumer examples](https://github.com/cube-js/cube-ui-kit/blob/main/typecheck/consumer/modern-form-examples.tsx) cover creation with a colocated selector, narrow descendant subscriptions, conditional fields, async defaults, a custom control, and cancellable validation. `pnpm build && pnpm test:types:consumer` checks those examples against the declarations consumers receive. The published library is compiled for React 19.3 or newer; CI checks adapters and packaged consumers both with and without React Compiler. See [the compiler guide](../scripts/compiler/README.md).
 
 ## Choose the backend explicitly
 
@@ -60,6 +60,6 @@ The [Modern Form guide](modern-form-guide.md) is the reference for implementing
 5. Adapt validators' success values and cancellation. Declare external captured inputs in `deps` and sibling form paths in `dependsOn`.
 6. Decide whether hidden fields are retained and whether submission uses active or all values. Verify the actual payload with conditional sections both visible and hidden.
 7. Test required/async errors, double submit, server failure, reset, unmount during requests, keyboard focus, and navigation guards. Modern Submit stays enabled after validation errors; pass `disableOnInvalid` to retain the legacy disabled-button behavior. Verify this visible change with QA. Confirm unaffected fields and the creator do not rerender on each keystroke.
-8. Run source and built-consumer type checks, the frozen legacy contract suite, React 18/19 compiler checks, and relevant browser checks. Review visual changes before merging.
+8. Run source and built-consumer type checks, the frozen legacy contract suite, React 19 source/compiled checks, and relevant browser checks. Review visual changes before merging.
 
 To revert a migrated form, render the preserved legacy component again and restore its legacy defaults/callback/validator contracts. Remount the boundary and deliberately transfer serializable draft values if needed. Do not cast the modern controller to a legacy instance or toggle hook implementations in place.

package/docs/modern-form-typecheck.md

@@ -8,7 +8,7 @@ The roots are the existing `NarrowForm`, `SAMLOptionsForm`, `LDAPOptionsForm`, `
 
 Build UI Kit with its pinned Node 24 environment, then run `node scripts/benchmark-cloud-form-types.mjs /path/to/cloud 3` under Cloud's Node 22.14. The script writes configs, candidate declaration copies, logs, and a JSON report to the OS temporary directory. It never installs dependencies, changes Cloud files, or writes Cloud's incremental cache. The script alternates installed/candidate order across three pairs and checks that diagnostics are stable across repeats.
 
-Both variants resolve through Cloud's installed dependency graph, including React 19.1.1, its React types, i18next 26.3.2, and Tasty 3.7.0. The candidate declaration copy has a temporary dependency-directory symlink outside the Cloud checkout. Reading UI Kit's `dist` in place would resolve its own React/i18next copies and introduce unrelated identity errors. This controlled comparison measures declaration compatibility and cost; it does not simulate a complete dependency installation or certify a Cloud release with newer Tasty. UI Kit's own source/consumer, React 18/19, and compiled adapter gates use its actual Tasty 3.9.2 dependency.
+Both variants resolve through Cloud's installed dependency graph, including React 19.1.1, its React types, i18next 26.3.2, and Tasty 3.7.0. The candidate declaration copy has a temporary dependency-directory symlink outside the Cloud checkout. Reading UI Kit's `dist` in place would resolve its own React/i18next copies and introduce unrelated identity errors. This controlled comparison measures declaration compatibility and cost; it does not simulate a complete dependency installation or certify a Cloud release with newer Tasty. At the time of this audit, UI Kit's source/consumer, React 18/19, and compiled adapter gates used Tasty 3.9.2. This is historical typecheck evidence; see [current compiler guidance](../scripts/compiler/README.md) for supported React versions.
 
 ## Results
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-1bb3a1f",
+  "version": "0.0.0-canary-b7fd3ea",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -74,7 +74,7 @@
     "clear:dist": "rimraf ./dist",
     "prepack": "node scripts/prepare-docs.mjs",
     "postpack": "node scripts/cleanup-docs.mjs",
-    "release": "pnpm build && changeset publish --provenance",
+    "release": "pnpm build && pnpm check:react-package && changeset publish --provenance",
     "add-icons": "cd src/icons && node add-new-icon.js && pnpm fix",
     "audit-docs": "node scripts/audit-docs.mjs",
     "audit-defaults": "UPDATE_DEFAULTS=1 vitest run src/eslint-plugin/defaults.test.ts && prettier --write src/eslint-plugin/defaults.generated.ts",
@@ -83,15 +83,17 @@
     "diagnostics:complexity": "node scripts/complexity-report.mjs",
     "update-tasty": "pnpm add @tenphi/tasty@${npm_config_version:-latest} --save-exact",
     "update-glaze": "pnpm add @tenphi/glaze@${npm_config_version:-latest} --save-exact",
-    "test:form-compiled": "vitest run --config vitest.form-compiled.config.ts"
+    "test:form-compiled": "vitest run --config vitest.form-compiled.config.ts",
+    "diagnostics:hooks": "node scripts/hooks-diagnostics.mjs",
+    "check:react-package": "node scripts/compiler/check-package.mjs"
   },
   "keywords": [
     "uikit"
   ],
   "author": "Cube Dev Team",
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.4",
@@ -117,11 +119,9 @@
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-aria": "^3.52.1",
-    "react-compiler-runtime": "1.0.0",
     "react-focus-lock": "^2.13.5",
     "react-hotkeys-hook": "^5.1.0",
     "react-i18next": "^17.0.8",
-    "react-is": "^18.3.1",
     "react-keyed-flatten-children": "^1.3.0",
     "react-stately": "^3.50.0",
     "react-types": "^0.1.0",
@@ -155,10 +155,8 @@
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/node": "^24.0.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@types/react-is": "^18.2.4",
-    "@types/react-test-renderer": "^18.0.7",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@types/use-sync-external-store": "1.7.0",
     "@typescript-eslint/parser": "^8.69.0",
     "@uiw/react-codemirror": "^4.25.4",
@@ -184,10 +182,9 @@
     "oxlint": "^1.72.0",
     "playwright": "^1.62.1",
     "prettier": "^3.2.5",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "react-router": "^6.22.3",
-    "react-test-renderer": "^19.1.1",
     "remark-gfm": "^4.0.1",
     "rimraf": "^6.0.1",
     "serve-handler": "^6.1.6",