@vitus-labs/rocketstyle 2.7.1 → 2.7.2

package/README.md

@@ -1,3 +1,19 @@
+<!-- LOGO:BEGIN -->
+<div align="center">
+  <a href="https://github.com/vitus-labs/ui-system">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vitus-labs/ui-system/main/.github/assets/vitus-labs-mark-dark.svg">
+      <img alt="vitus·labs" src="https://raw.githubusercontent.com/vitus-labs/ui-system/main/.github/assets/vitus-labs-mark-light.svg" height="64">
+    </picture>
+  </a>
+  &nbsp;&nbsp;&nbsp;&nbsp;
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vitus-labs/ui-system/main/packages/rocketstyle/assets/logo-dark.svg">
+    <img alt="@vitus-labs/rocketstyle" src="https://raw.githubusercontent.com/vitus-labs/ui-system/main/packages/rocketstyle/assets/logo-light.svg" height="64">
+  </picture>
+</div>
+<!-- LOGO:END -->
+
 # @vitus-labs/rocketstyle
 
 Multi-dimensional styling system for React.

package/lib/index.js

@@ -1,5 +1,5 @@
 import { Provider as Provider$1, compose, config, context, get, hoistNonReactStatics, isEmpty, merge, omit, pick, render, set, useStableValue } from "@vitus-labs/core";
-import { createContext, memo, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createContext, memo, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/constants/index.ts
@@ -194,27 +194,36 @@ const usePseudoState = ({ onBlur, onFocus, onMouseDown, onMouseEnter, onMouseLea
 
 //#endregion
 //#region src/hooks/useRef.ts
+const assignRef = (target, node) => {
+	if (!target) return;
+	if (typeof target === "function") target(node);
+	else target.current = node;
+};
 /**
 * Unifies two forwarded refs (the outer consumer ref and the internal
-* rocketstyle HOC ref) into a single internal ref using `useImperativeHandle`,
-* so both callers receive the same underlying DOM node.
+* rocketstyle HOC ref) into a single merged CALLBACK ref.
+*
+* React re-invokes a callback ref on every attach/detach, so both forwarded
+* refs always track the live node — including across host remounts (e.g. a
+* `tag` change). The previous `useImperativeHandle(ref, () =>
+* internalRef.current, [])` snapshotted `.current` once at mount, leaving
+* consumers holding the detached old node after a remount.
 */
-const useRocketstyleRef = ({ $rocketstyleRef, ref }) => {
-	const internalRef = useRef(null);
-	useImperativeHandle($rocketstyleRef, () => internalRef.current, []);
-	useImperativeHandle(ref, () => internalRef.current, []);
-	return internalRef;
-};
+const useRocketstyleRef = ({ $rocketstyleRef, ref }) => useCallback((node) => {
+	assignRef($rocketstyleRef, node);
+	assignRef(ref, node);
+}, [$rocketstyleRef, ref]);
 
 //#endregion
 //#region src/hooks/useTheme.tsx
+const EMPTY_THEME = {};
 /**
 * Retrieves the current theme object and resolved mode from context.
 * Supports mode inversion so nested components can flip between
 * light and dark without a new provider.
 */
 const useThemeAttrs = ({ inversed }) => {
-	const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
+	const { theme = EMPTY_THEME, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
 	const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
 	const isDark = inversed ? !ctxDark : ctxDark;
 	return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstyle",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -65,7 +65,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^2.7.1",
+    "@vitus-labs/core": "^2.7.2",
     "react": ">= 19"
   },
   "devDependencies": {
@@ -78,6 +78,6 @@
     "@vitus-labs/tools-typescript": "2.5.0",
     "@vitus-labs/unistyle": "workspace:*",
     "jsdom": "^29.1.1",
-    "tinybench": "^6.0.1"
+    "tinybench": "^6.0.2"
   }
 }