@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/components/shared/DraggableCollection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -57,16 +57,16 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 	});
 	const getItems = useCallback((keys) => {
 		dragKeysRef.current = [...keys];
-		return [...keys].map((key) => {
-			const item = state.collection.getItem(key);
-			return { "text/plain": item?.textValue || String(key) };
+		return [...keys].map((key_0) => {
+			const item = state.collection.getItem(key_0);
+			return { "text/plain": item?.textValue || String(key_0) };
 		});
 	}, [state.collection]);
-	const dragSelectionManager = useMemo(() => new Proxy(state.selectionManager, { get(target, prop) {
+	const dragSelectionManager = useMemo(() => new Proxy(state.selectionManager, { get(target_0, prop) {
 		if (prop === "selectedKeys") return /* @__PURE__ */ new Set();
 		if (prop === "isSelected") return () => false;
-		const value = Reflect.get(target, prop);
-		return typeof value === "function" ? value.bind(target) : value;
+		const value = Reflect.get(target_0, prop);
+		return typeof value === "function" ? value.bind(target_0) : value;
 	} }), [state.selectionManager]);
 	const previewRef = useRef(null);
 	const dragState = useDraggableCollectionState({
@@ -80,10 +80,10 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		getItems,
 		getAllowedDropOperations
 	}, dragState, listRef);
-	const handleItemDrop = useEvent((e) => {
+	const handleItemDrop = useEvent((e_0) => {
 		if (!onItemDrop) return;
-		const keys = [...e.dropOperation === "cancel" ? [] : dragKeysRef.current];
-		onItemDrop(e.target.key, keys);
+		const keys_0 = [...e_0.dropOperation === "cancel" ? [] : dragKeysRef.current];
+		onItemDrop(e_0.target.key, keys_0);
 	});
 	const dragKeysRef = useRef([]);
 	const dropState = useDroppableCollectionState({
@@ -91,7 +91,7 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		selectionManager: state.selectionManager,
 		onReorder: onReorder ? handleReorder : void 0,
 		onItemDrop: onItemDrop ? handleItemDrop : void 0,
-		shouldAcceptItemDrop: shouldAcceptItemDrop ? (target) => shouldAcceptItemDrop(target.key) : void 0
+		shouldAcceptItemDrop: shouldAcceptItemDrop ? (target_1) => shouldAcceptItemDrop(target_1.key) : void 0
 	});
 	const { collectionProps } = useDroppableCollection({
 		keyboardDelegate: useMemo(() => new ListKeyboardDelegate({
@@ -118,8 +118,8 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 	endDragRef.current = dragState.endDrag;
 	useEffect(() => {
 		if (!isDragActive) return;
-		const handleEscape = (e) => {
-			if (e.key === "Escape") endDragRef.current({
+		const handleEscape = (e_1) => {
+			if (e_1.key === "Escape") endDragRef.current({
 				type: "cancel",
 				x: 0,
 				y: 0,
@@ -130,10 +130,10 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		document.addEventListener("keydown", handleEscape, true);
 		return () => document.removeEventListener("keydown", handleEscape, true);
 	}, [isDragActive]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(dragState, dropState, mergeProps(collectionProps, { onKeyDownCapture: useEvent((e) => {
-		if (!e.altKey || !onReorder) return;
-		const target = e.target;
-		if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target.isContentEditable) return;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(dragState, dropState, mergeProps(collectionProps, { onKeyDownCapture: useEvent((e_2) => {
+		if (!e_2.altKey || !onReorder) return;
+		const target_2 = e_2.target;
+		if (target_2 instanceof HTMLInputElement || target_2 instanceof HTMLTextAreaElement || target_2.isContentEditable) return;
 		const moveKeys = orientation === "vertical" ? {
 			backward: "ArrowUp",
 			forward: "ArrowDown"
@@ -141,18 +141,18 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 			backward: "ArrowLeft",
 			forward: "ArrowRight"
 		};
-		const direction = e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;
+		const direction = e_2.key === moveKeys.backward ? -1 : e_2.key === moveKeys.forward ? 1 : 0;
 		if (direction === 0) return;
-		e.preventDefault();
-		e.stopPropagation();
+		e_2.preventDefault();
+		e_2.stopPropagation();
 		const focusedKey = String(state.selectionManager.focusedKey);
 		const idx = orderedKeys.indexOf(focusedKey);
 		if (idx === -1) return;
 		const targetIdx = idx + direction;
 		if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;
-		const newKeys = [...orderedKeys];
-		[newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];
-		onReorder(newKeys);
+		const newKeys_0 = [...orderedKeys];
+		[newKeys_0[idx], newKeys_0[targetIdx]] = [newKeys_0[targetIdx], newKeys_0[idx]];
+		onReorder(newKeys_0);
 	}) })), renderPreview ? /* @__PURE__ */ jsx(DragPreview, {
 		ref: previewRef,
 		children: () => renderPreview(dragKeysRef.current)

package/dist/components/shared/DraggableCollection.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableCollection.js","names":[],"sources":["../../../src/components/shared/DraggableCollection.tsx"],"sourcesContent":["import {\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  DragItem,\n  DragPreview,\n  DragPreviewRenderer,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  mergeProps,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../_internal/hooks';\n\nimport type { Collection, DropOperation, Key, Node } from '@react-types/shared';\n\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n/**\n * Creates a no-op mock of DraggableCollectionState.\n * Used to satisfy useDraggableItem when drag is disabled (Rules of Hooks).\n */\nexport function createMockDragState(\n  collection: Collection<Node<any>>,\n  selectionManager: Record<string, any>,\n): DraggableCollectionState {\n  return {\n    collection,\n    selectionManager,\n    isDragging: () => false,\n    getKeysForDrag: () => new Set<Key>(),\n    draggedKey: null,\n    draggingKeys: new Set<Key>(),\n    getAllowedDropOperations: () => [],\n    preview: null,\n    isDisabled: false,\n    startDrag: () => {},\n    endDrag: () => {},\n  } as DraggableCollectionState;\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableCollectionProps {\n  state: {\n    collection: Collection<Node<any>>;\n    selectionManager: { selectedKeys: Set<Key> } & Record<string, any>;\n    disabledKeys: Set<Key>;\n  };\n  listRef: RefObject<HTMLElement | null>;\n  orderedKeys: string[];\n  orientation: 'horizontal' | 'vertical';\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Dropping *onto* an item rather than between items — a row that is a folder,\n   * a tab that is a group. Mutually exclusive with reordering in practice: a\n   * collection that accepts item drops usually has a meaningful order already.\n   */\n  onItemDrop?: (targetKey: Key, draggedKeys: Key[]) => void;\n  /** Which items may receive a drop. Without it, none may. */\n  shouldAcceptItemDrop?: (targetKey: Key) => boolean;\n  /**\n   * The image dragged under the cursor. Receives the keys being dragged rather\n   * than React Aria's serialized `DragItem`s, because a caller that wants to\n   * render an icon needs the record, not its `text/plain` form.\n   *\n   * Without one the browser drags a screenshot of the source element, which for\n   * a full-width table row is a page-wide slab.\n   */\n  renderPreview?: (keys: Key[]) => ReactNode;\n  /** Render function receiving drag/drop states and merged collection+keyboard props */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Generic wrapper that enables drag-and-drop reordering for a collection.\n *\n * Used by both DraggableTabList (horizontal) and DraggableListBox (vertical).\n * Encapsulates all drag/drop hook calls so they are only invoked when\n * reordering is actually enabled.\n */\nexport function DraggableCollection({\n  state,\n  listRef,\n  orderedKeys,\n  orientation,\n  onReorder,\n  onItemDrop,\n  shouldAcceptItemDrop,\n  renderPreview,\n  children,\n}: DraggableCollectionProps) {\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      dragKeysRef.current = [...keys];\n\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Proxy selectionManager to hide selection from react-aria's drag logic.\n  // Without this, react-aria drags ALL selected items when any selected item\n  // is grabbed (hardcoded in useDraggableCollectionState → internal getKeys).\n  // The proxy intercepts `selectedKeys` and `isSelected` so every item looks\n  // unselected for drag, while all other methods (isDisabled, setFocusedKey, …)\n  // delegate to the real manager. `bind(target)` preserves `this` for methods\n  // that live on the prototype chain.\n  const dragSelectionManager = useMemo(\n    () =>\n      new Proxy(state.selectionManager, {\n        get(target, prop) {\n          if (prop === 'selectedKeys') return new Set<Key>();\n          if (prop === 'isSelected') return () => false;\n          const value = Reflect.get(target, prop);\n          return typeof value === 'function' ? value.bind(target) : value;\n        },\n      }),\n    [state.selectionManager],\n  );\n\n  const previewRef = useRef<DragPreviewRenderer>(null);\n\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: dragSelectionManager,\n    getItems,\n    getAllowedDropOperations,\n    preview: renderPreview ? previewRef : undefined,\n  });\n\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  const handleItemDrop = useEvent((e: any) => {\n    if (!onItemDrop) return;\n\n    const keys = [...(e.dropOperation === 'cancel' ? [] : dragKeysRef.current)];\n\n    onItemDrop(e.target.key, keys);\n  });\n\n  // The keys being dragged, captured at drag start: by the time the drop lands\n  // React Aria has already cleared them from the drag state.\n  const dragKeysRef = useRef<Key[]>([]);\n\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: onReorder ? handleReorder : undefined,\n    onItemDrop: onItemDrop ? handleItemDrop : undefined,\n    // `'on'` is only offered for items that accept it; everything else falls\n    // back to reordering, or to nothing.\n    shouldAcceptItemDrop: shouldAcceptItemDrop\n      ? (target: any) => shouldAcceptItemDrop(target.key)\n      : undefined,\n  });\n\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate({\n        collection: state.collection,\n        disabledKeys: state.disabledKeys,\n        ref: listRef,\n        orientation,\n      }),\n    [state.collection, state.disabledKeys, listRef, orientation],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation,\n      }),\n    [state.collection, listRef, orientation],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: onReorder ? handleReorder : undefined,\n      onItemDrop: onItemDrop ? handleItemDrop : undefined,\n    },\n    dropState,\n    listRef,\n  );\n\n  // Force-cancel drag on Escape. Native HTML5 drag cancels visually, but some\n  // browsers (Safari) don't fire `dragend` synchronously, leaving react-aria's\n  // `isDragging` stale until a second keypress.\n  const isDragActive = dragState.draggingKeys.size > 0;\n  const endDragRef = useRef(dragState.endDrag);\n  endDragRef.current = dragState.endDrag;\n\n  useEffect(() => {\n    if (!isDragActive) return;\n\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        endDragRef.current({\n          type: 'cancel',\n          x: 0,\n          y: 0,\n          dropOperation: 'cancel',\n          isInternal: false,\n        });\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape, true);\n\n    return () => document.removeEventListener('keydown', handleEscape, true);\n  }, [isDragActive]);\n\n  // Alt+Arrow keyboard shortcut for reordering.\n  // Uses capture phase so we read focusedKey BEFORE react-aria moves focus.\n  // Skip when the event originates from a text input — Alt+Arrow is\n  // word-by-word cursor navigation on macOS.\n  const handleKeyDownCapture = useEvent((e: KeyboardEvent) => {\n    if (!e.altKey || !onReorder) return;\n\n    const target = e.target as HTMLElement;\n\n    if (\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target.isContentEditable\n    ) {\n      return;\n    }\n\n    const moveKeys =\n      orientation === 'vertical'\n        ? { backward: 'ArrowUp', forward: 'ArrowDown' }\n        : { backward: 'ArrowLeft', forward: 'ArrowRight' };\n\n    const direction =\n      e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;\n\n    if (direction === 0) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const focusedKey = String(state.selectionManager.focusedKey);\n    const idx = orderedKeys.indexOf(focusedKey);\n\n    if (idx === -1) return;\n\n    const targetIdx = idx + direction;\n\n    if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;\n\n    const newKeys = [...orderedKeys];\n    [newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];\n    onReorder(newKeys);\n  });\n\n  return (\n    <>\n      {children(\n        dragState,\n        dropState,\n        mergeProps(collectionProps, { onKeyDownCapture: handleKeyDownCapture }),\n      )}\n      {renderPreview ? (\n        // Rendered off-screen by React Aria and snapshotted at drag start. The\n        // keys come from the ref rather than the `DragItem`s the render\n        // function is handed, which only carry `text/plain`.\n        <DragPreview ref={previewRef}>\n          {() => renderPreview(dragKeysRef.current)}\n        </DragPreview>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DraggableCollection.js","names":["KeyboardEvent","ReactNode","RefObject","useCallback","useEffect","useMemo","useRef","DragItem","DragPreview","DragPreviewRenderer","DroppableCollectionReorderEvent","ListDropTargetDelegate","ListKeyboardDelegate","mergeProps","useDraggableCollection","useDroppableCollection","DraggableCollectionState","DroppableCollectionState","useDraggableCollectionState","useDroppableCollectionState","useEvent","Collection","DropOperation","Key","Node","getAllowedDropOperations","createMockDragState","collection","selectionManager","Record","isDragging","getKeysForDrag","Set","draggedKey","draggingKeys","preview","isDisabled","startDrag","endDrag","DraggableCollectionProps","state","selectedKeys","disabledKeys","listRef","HTMLElement","orderedKeys","orientation","onReorder","newOrder","onItemDrop","targetKey","draggedKeys","shouldAcceptItemDrop","renderPreview","keys","children","dragState","dropState","collectionProps","DraggableCollection","handleReorder","e","target","movableKeys","dropPosition","key","movableKey","movableIndex","indexOf","targetIndex","String","newKeys","reduce","arr","i","push","getItems","dragKeysRef","current","map","item","getItem","textValue","dragSelectionManager","Proxy","get","prop","value","Reflect","bind","previewRef","undefined","handleItemDrop","dropOperation","keyboardDelegate","ref","dropTargetDelegate","isDragActive","size","endDragRef","handleEscape","globalThis","type","x","y","isInternal","document","addEventListener","removeEventListener","handleKeyDownCapture","altKey","HTMLInputElement","HTMLTextAreaElement","isContentEditable","moveKeys","backward","forward","direction","preventDefault","stopPropagation","focusedKey","idx","targetIdx","length","onKeyDownCapture"],"sources":["../../../src/components/shared/DraggableCollection.tsx"],"sourcesContent":["import {\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  DragItem,\n  DragPreview,\n  DragPreviewRenderer,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  mergeProps,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../_internal/hooks';\n\nimport type { Collection, DropOperation, Key, Node } from '@react-types/shared';\n\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n/**\n * Creates a no-op mock of DraggableCollectionState.\n * Used to satisfy useDraggableItem when drag is disabled (Rules of Hooks).\n */\nexport function createMockDragState(\n  collection: Collection<Node<any>>,\n  selectionManager: Record<string, any>,\n): DraggableCollectionState {\n  return {\n    collection,\n    selectionManager,\n    isDragging: () => false,\n    getKeysForDrag: () => new Set<Key>(),\n    draggedKey: null,\n    draggingKeys: new Set<Key>(),\n    getAllowedDropOperations: () => [],\n    preview: null,\n    isDisabled: false,\n    startDrag: () => {},\n    endDrag: () => {},\n  } as DraggableCollectionState;\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableCollectionProps {\n  state: {\n    collection: Collection<Node<any>>;\n    selectionManager: { selectedKeys: Set<Key> } & Record<string, any>;\n    disabledKeys: Set<Key>;\n  };\n  listRef: RefObject<HTMLElement | null>;\n  orderedKeys: string[];\n  orientation: 'horizontal' | 'vertical';\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Dropping *onto* an item rather than between items — a row that is a folder,\n   * a tab that is a group. Mutually exclusive with reordering in practice: a\n   * collection that accepts item drops usually has a meaningful order already.\n   */\n  onItemDrop?: (targetKey: Key, draggedKeys: Key[]) => void;\n  /** Which items may receive a drop. Without it, none may. */\n  shouldAcceptItemDrop?: (targetKey: Key) => boolean;\n  /**\n   * The image dragged under the cursor. Receives the keys being dragged rather\n   * than React Aria's serialized `DragItem`s, because a caller that wants to\n   * render an icon needs the record, not its `text/plain` form.\n   *\n   * Without one the browser drags a screenshot of the source element, which for\n   * a full-width table row is a page-wide slab.\n   */\n  renderPreview?: (keys: Key[]) => ReactNode;\n  /** Render function receiving drag/drop states and merged collection+keyboard props */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Generic wrapper that enables drag-and-drop reordering for a collection.\n *\n * Used by both DraggableTabList (horizontal) and DraggableListBox (vertical).\n * Encapsulates all drag/drop hook calls so they are only invoked when\n * reordering is actually enabled.\n */\nexport function DraggableCollection({\n  state,\n  listRef,\n  orderedKeys,\n  orientation,\n  onReorder,\n  onItemDrop,\n  shouldAcceptItemDrop,\n  renderPreview,\n  children,\n}: DraggableCollectionProps) {\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      dragKeysRef.current = [...keys];\n\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Proxy selectionManager to hide selection from react-aria's drag logic.\n  // Without this, react-aria drags ALL selected items when any selected item\n  // is grabbed (hardcoded in useDraggableCollectionState → internal getKeys).\n  // The proxy intercepts `selectedKeys` and `isSelected` so every item looks\n  // unselected for drag, while all other methods (isDisabled, setFocusedKey, …)\n  // delegate to the real manager. `bind(target)` preserves `this` for methods\n  // that live on the prototype chain.\n  const dragSelectionManager = useMemo(\n    () =>\n      new Proxy(state.selectionManager, {\n        get(target, prop) {\n          if (prop === 'selectedKeys') return new Set<Key>();\n          if (prop === 'isSelected') return () => false;\n          const value = Reflect.get(target, prop);\n          return typeof value === 'function' ? value.bind(target) : value;\n        },\n      }),\n    [state.selectionManager],\n  );\n\n  const previewRef = useRef<DragPreviewRenderer>(null);\n\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: dragSelectionManager,\n    getItems,\n    getAllowedDropOperations,\n    preview: renderPreview ? previewRef : undefined,\n  });\n\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  const handleItemDrop = useEvent((e: any) => {\n    if (!onItemDrop) return;\n\n    const keys = [...(e.dropOperation === 'cancel' ? [] : dragKeysRef.current)];\n\n    onItemDrop(e.target.key, keys);\n  });\n\n  // The keys being dragged, captured at drag start: by the time the drop lands\n  // React Aria has already cleared them from the drag state.\n  const dragKeysRef = useRef<Key[]>([]);\n\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: onReorder ? handleReorder : undefined,\n    onItemDrop: onItemDrop ? handleItemDrop : undefined,\n    // `'on'` is only offered for items that accept it; everything else falls\n    // back to reordering, or to nothing.\n    shouldAcceptItemDrop: shouldAcceptItemDrop\n      ? (target: any) => shouldAcceptItemDrop(target.key)\n      : undefined,\n  });\n\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate({\n        collection: state.collection,\n        disabledKeys: state.disabledKeys,\n        ref: listRef,\n        orientation,\n      }),\n    [state.collection, state.disabledKeys, listRef, orientation],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation,\n      }),\n    [state.collection, listRef, orientation],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: onReorder ? handleReorder : undefined,\n      onItemDrop: onItemDrop ? handleItemDrop : undefined,\n    },\n    dropState,\n    listRef,\n  );\n\n  // Force-cancel drag on Escape. Native HTML5 drag cancels visually, but some\n  // browsers (Safari) don't fire `dragend` synchronously, leaving react-aria's\n  // `isDragging` stale until a second keypress.\n  const isDragActive = dragState.draggingKeys.size > 0;\n  const endDragRef = useRef(dragState.endDrag);\n  endDragRef.current = dragState.endDrag;\n\n  useEffect(() => {\n    if (!isDragActive) return;\n\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        endDragRef.current({\n          type: 'cancel',\n          x: 0,\n          y: 0,\n          dropOperation: 'cancel',\n          isInternal: false,\n        });\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape, true);\n\n    return () => document.removeEventListener('keydown', handleEscape, true);\n  }, [isDragActive]);\n\n  // Alt+Arrow keyboard shortcut for reordering.\n  // Uses capture phase so we read focusedKey BEFORE react-aria moves focus.\n  // Skip when the event originates from a text input — Alt+Arrow is\n  // word-by-word cursor navigation on macOS.\n  const handleKeyDownCapture = useEvent((e: KeyboardEvent) => {\n    if (!e.altKey || !onReorder) return;\n\n    const target = e.target as HTMLElement;\n\n    if (\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target.isContentEditable\n    ) {\n      return;\n    }\n\n    const moveKeys =\n      orientation === 'vertical'\n        ? { backward: 'ArrowUp', forward: 'ArrowDown' }\n        : { backward: 'ArrowLeft', forward: 'ArrowRight' };\n\n    const direction =\n      e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;\n\n    if (direction === 0) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const focusedKey = String(state.selectionManager.focusedKey);\n    const idx = orderedKeys.indexOf(focusedKey);\n\n    if (idx === -1) return;\n\n    const targetIdx = idx + direction;\n\n    if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;\n\n    const newKeys = [...orderedKeys];\n    [newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];\n    onReorder(newKeys);\n  });\n\n  return (\n    <>\n      {children(\n        dragState,\n        dropState,\n        mergeProps(collectionProps, { onKeyDownCapture: handleKeyDownCapture }),\n      )}\n      {renderPreview ? (\n        // Rendered off-screen by React Aria and snapshotted at drag start. The\n        // keys come from the ref rather than the `DragItem`s the render\n        // function is handed, which only carry `text/plain`.\n        <DragPreview ref={previewRef}>\n          {() => renderPreview(dragKeysRef.current)}\n        </DragPreview>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/InvalidIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { WarningIcon } from "../../icons/WarningIcon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/shared/InvalidIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvalidIcon.js","names":[],"sources":["../../../src/components/shared/InvalidIcon.tsx"],"sourcesContent":["import { WarningIcon } from '../../icons/WarningIcon';\n\nexport const InvalidIcon = (\n  <WarningIcon data-element=\"ValidationIcon\" color=\"#danger\" />\n);\n"],"mappings":";;;;;AAEA,MAAa,cACX,oBAAC;CAAY,gBAAa;CAAiB,OAAM;EAAY"}
+{"version":3,"file":"InvalidIcon.js","names":["WarningIcon","InvalidIcon"],"sources":["../../../src/components/shared/InvalidIcon.tsx"],"sourcesContent":["import { WarningIcon } from '../../icons/WarningIcon';\n\nexport const InvalidIcon = (\n  <WarningIcon data-element=\"ValidationIcon\" color=\"#danger\" />\n);\n"],"mappings":";;;;;AAEA,MAAaC,cACX,oBAAC;CAAY,gBAAa;CAAiB,OAAM;EAClD"}

package/dist/components/shared/ValidIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { CheckIcon } from "../../icons/CheckIcon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/shared/ValidIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidIcon.js","names":[],"sources":["../../../src/components/shared/ValidIcon.tsx"],"sourcesContent":["import { CheckIcon } from '../../icons/CheckIcon';\n\nexport const ValidIcon = (\n  <CheckIcon data-element=\"ValidationIcon\" color=\"#success\" />\n);\n"],"mappings":";;;;;AAEA,MAAa,YACX,oBAAC;CAAU,gBAAa;CAAiB,OAAM;EAAa"}
+{"version":3,"file":"ValidIcon.js","names":["CheckIcon","ValidIcon"],"sources":["../../../src/components/shared/ValidIcon.tsx"],"sourcesContent":["import { CheckIcon } from '../../icons/CheckIcon';\n\nexport const ValidIcon = (\n  <CheckIcon data-element=\"ValidationIcon\" color=\"#success\" />\n);\n"],"mappings":";;;;;AAEA,MAAaC,YACX,oBAAC;CAAU,gBAAa;CAAiB,OAAM;EAChD"}

package/dist/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { Block } from "../../Block.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -120,64 +121,171 @@ const CubeElement = tasty({
 * the server and the client, i.e. a hydration mismatch on every render.
 */
 function useTimelineSyncedAnimation(ref, isAnimated) {
-	useLayoutEffect$1(() => {
-		const element = ref.current;
-		if (!isAnimated || !element?.getAnimations) return;
-		for (const animation of element.getAnimations()) if (animation.timeline === element.ownerDocument.timeline) animation.startTime = 0;
-	}, [isAnimated]);
+	const $ = c(5);
+	let t0;
+	if ($[0] !== isAnimated || $[1] !== ref) {
+		t0 = () => {
+			const element = ref.current;
+			if (!isAnimated || !element?.getAnimations) return;
+			for (const animation of element.getAnimations()) if (animation.timeline === element.ownerDocument.timeline) animation.startTime = 0;
+		};
+		$[0] = isAnimated;
+		$[1] = ref;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== isAnimated) {
+		t1 = [isAnimated];
+		$[3] = isAnimated;
+		$[4] = t1;
+	} else t1 = $[4];
+	useLayoutEffect$1(t0, t1);
 }
-function Cube({ index, style }) {
+function Cube(t0) {
+	const $ = c(8);
+	const { index, style } = t0;
 	const ref = useRef(null);
 	useTimelineSyncedAnimation(ref, index != null);
-	return /* @__PURE__ */ jsxs(CubeElement, {
-		ref,
-		mods: index != null ? { index } : void 0,
-		style,
-		viewBox: "0 0 36 41",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		role: "presentation",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				fill: "var(--loading-face-1-color)",
-				d: "M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				fill: "var(--loading-face-2-color)",
-				d: "M18 41L0 30.75l.101-20.5L18 20.5"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				fill: "var(--loading-face-3-color)",
-				d: "M36 30.75L18 41V20.6l17.899-10.25L36 30.75z"
-			})
-		]
-	});
+	let t1;
+	if ($[0] !== index) {
+		t1 = index != null ? { index } : void 0;
+		$[0] = index;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	let t3;
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("path", {
+			fill: "var(--loading-face-1-color)",
+			d: "M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z"
+		});
+		t3 = /* @__PURE__ */ jsx("path", {
+			fill: "var(--loading-face-2-color)",
+			d: "M18 41L0 30.75l.101-20.5L18 20.5"
+		});
+		t4 = /* @__PURE__ */ jsx("path", {
+			fill: "var(--loading-face-3-color)",
+			d: "M36 30.75L18 41V20.6l17.899-10.25L36 30.75z"
+		});
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+		t4 = $[4];
+	}
+	let t5;
+	if ($[5] !== style || $[6] !== t1) {
+		t5 = /* @__PURE__ */ jsxs(CubeElement, {
+			ref,
+			mods: t1,
+			style,
+			viewBox: "0 0 36 41",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			role: "presentation",
+			"aria-hidden": "true",
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[5] = style;
+		$[6] = t1;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
 }
 const SIZE_MAP = {
 	small: 32,
 	medium: 64,
 	large: 96
 };
-function LoadingAnimation({ size = "medium", ...props }) {
+function LoadingAnimation(t0) {
+	const $ = c(17);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({size: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const size = t1 === void 0 ? "medium" : t1;
 	const { t } = useI18n();
 	const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
-	return /* @__PURE__ */ jsxs(Block, {
-		role: "img",
-		"aria-label": t("loadingAnimation.ariaLabel", "Loading animation"),
-		width: numSize,
-		height: numSize * 1.1388888889,
-		style: { position: "relative" },
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(0%, 72.5%)" } }),
-			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(98%, 72.5%)" } }),
-			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(49%, 96.5%)" } }),
-			/* @__PURE__ */ jsx(Cube, { index: 0 }),
-			/* @__PURE__ */ jsx(Cube, { index: 1 }),
-			/* @__PURE__ */ jsx(Cube, { index: 2 })
-		]
-	});
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("loadingAnimation.ariaLabel", "Loading animation");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = numSize * 1.1388888889;
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { position: "relative" };
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Cube, { style: { transform: "translate(0%, 72.5%)" } });
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Cube, { style: { transform: "translate(98%, 72.5%)" } });
+		$[7] = t6;
+	} else t6 = $[7];
+	let t10;
+	let t7;
+	let t8;
+	let t9;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Cube, { style: { transform: "translate(49%, 96.5%)" } });
+		t8 = /* @__PURE__ */ jsx(Cube, { index: 0 });
+		t9 = /* @__PURE__ */ jsx(Cube, { index: 1 });
+		t10 = /* @__PURE__ */ jsx(Cube, { index: 2 });
+		$[8] = t10;
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+	} else {
+		t10 = $[8];
+		t7 = $[9];
+		t8 = $[10];
+		t9 = $[11];
+	}
+	let t11;
+	if ($[12] !== numSize || $[13] !== props || $[14] !== t2 || $[15] !== t3) {
+		t11 = /* @__PURE__ */ jsxs(Block, {
+			role: "img",
+			"aria-label": t2,
+			width: numSize,
+			height: t3,
+			style: t4,
+			...props,
+			children: [
+				t5,
+				t6,
+				t7,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[12] = numSize;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t11;
+	} else t11 = $[16];
+	return t11;
 }
 
 //#endregion

package/dist/components/status/LoadingAnimation/LoadingAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingAnimation.js","names":[],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties, RefObject, useRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n    //\n    // Those three tokens are the kit's shared isometric-cube ramp — `NoDataIcon`\n    // draws its crate from the same ones — and they are pinned by a WCAG floor\n    // against `surface` rather than by a tone delta, so the faces hold the same\n    // separation in light, dark, and high contrast. See the recipe's comment for\n    // why that matters.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\n      'index=0 | index=1 | index=2': 0,\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\n/**\n * Phase-lock a cube's `dice*` animation to the document timeline.\n *\n * A page under load mounts these animations at whatever moment each level of\n * the tree resolves — a route shell, then a panel, then the table inside it —\n * and every wrapper that appears around a running `LoadingAnimation` remounts\n * it. A CSS animation is created with its start time at \"now\", so each of\n * those events snapped the cubes back to the first frame: the visible symptom\n * is a loader that keeps stuttering back to the start while the page settles.\n *\n * Moving the start time to 0 puts it at the origin of the document timeline,\n * so the cube's position is a function of the timeline's current reading and\n * nothing else. Two consequences: a remount picks up exactly where the removed\n * element was, and every instance in the document runs in lockstep, because\n * they all read the same clock.\n *\n * Done through the animation object in a layout effect (before the first paint\n * of the new element) rather than through a negative `animation-delay`: the\n * delay would have to be computed during render from `Date.now()`, which is\n * both a different clock than the one the animation runs on — so the phase\n * would be off by the render-to-paint gap — and a value that differs between\n * the server and the client, i.e. a hydration mismatch on every render.\n */\nfunction useTimelineSyncedAnimation(\n  ref: RefObject<SVGSVGElement | null>,\n  isAnimated: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    // `getAnimations` is absent in jsdom, where there is nothing to sync.\n    if (!isAnimated || !element?.getAnimations) return;\n\n    for (const animation of element.getAnimations()) {\n      // These elements carry nothing but the `dice*` animation, and it always\n      // runs on the document timeline — the one timeline an explicit numeric\n      // start time is meaningful against.\n      if (animation.timeline === element.ownerDocument.timeline) {\n        animation.startTime = 0;\n      }\n    }\n  }, [isAnimated]);\n}\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  const ref = useRef<SVGSVGElement>(null);\n\n  useTimelineSyncedAnimation(ref, index != null);\n\n  return (\n    <CubeElement\n      ref={ref}\n      mods={index != null ? { index } : undefined}\n      style={style}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const { t } = useI18n();\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label={t('loadingAnimation.ariaLabel', 'Loading animation')}\n      width={numSize}\n      height={numSize * 1.1388888889}\n      style={{ position: 'relative' }}\n      {...props}\n    >\n      <Cube style={{ transform: 'translate(0%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(98%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(49%, 96.5%)' }} />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,OAAO;EACP,QAAQ;EAmBR,eAAe;GACb,IAAI;GACJ,WAAW;GACX,WAAW;GACX,WAAW;GACZ;EACD,mBAAmB;GACjB,IAAI;GACJ,+BAA+B;GAChC;EACD,yBAAyB;GACvB,IAAI;GACJ,+BAA+B;GAChC;EACD,yBAAyB;GACvB,IAAI;GACJ,+BAA+B;GAChC;EACD,QAAQ;GACN,IAAI;GACJ,+BAA+B;GAChC;EAED,cAAc;GACZ,OAAO;IACL,MAAM;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,OAAO;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACrD,OAAO,EAAE,QAAQ,GAAG;IACpB,OAAO,EAAE,QAAQ,GAAG;IACpB,IAAI;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACnD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACpD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,IAAI;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACpD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACrD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,IAAI;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACrD;GACF;EACF;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAyBF,SAAS,2BACP,KACA,YACA;AACA,yBAAsB;EACpB,MAAM,UAAU,IAAI;AAGpB,MAAI,CAAC,cAAc,CAAC,SAAS,cAAe;AAE5C,OAAK,MAAM,aAAa,QAAQ,eAAe,CAI7C,KAAI,UAAU,aAAa,QAAQ,cAAc,SAC/C,WAAU,YAAY;IAGzB,CAAC,WAAW,CAAC;;AAQlB,SAAS,KAAK,EAAE,OAAO,SAAoB;CACzC,MAAM,MAAM,OAAsB,KAAK;AAEvC,4BAA2B,KAAK,SAAS,KAAK;AAE9C,QACE,qBAAC;EACM;EACL,MAAM,SAAS,OAAO,EAAE,OAAO,GAAG;EAC3B;EACP,SAAQ;EACR,MAAK;EACL,OAAM;EACN,MAAK;EACL,eAAY;;GAEZ,oBAAC;IACC,MAAK;IACL,GAAE;KACF;GACF,oBAAC;IACC,MAAK;IACL,GAAE;KACF;GACF,oBAAC;IACC,MAAK;IACL,GAAE;KACF;;GACU;;AAIlB,MAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAMD,SAAgB,iBAAiB,EAC/B,OAAO,UACP,GAAG,SACyB;CAC5B,MAAM,EAAE,MAAM,SAAS;CACvB,MAAM,UAAkB,SAAS,SAAS,QAAQ,SAAS;AAE3D,QACE,qBAAC;EACC,MAAK;EACL,cAAY,EAAE,8BAA8B,oBAAoB;EAChE,OAAO;EACP,QAAQ,UAAU;EAClB,OAAO,EAAE,UAAU,YAAY;EAC/B,GAAI;;GAEJ,oBAAC,QAAK,OAAO,EAAE,WAAW,wBAAwB,GAAI;GACtD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;;GACZ"}
+{"version":3,"file":"LoadingAnimation.js","names":["tasty","CSSProperties","RefObject","useRef","useI18n","useLayoutEffect","Block","CubeBlockProps","CubeElement","as","styles","display","position","width","height","animationName","animationDuration","animationIterationCount","animationTimingFunction","zIndex","dice0","from","transform","to","dice1","dice2","useTimelineSyncedAnimation","ref","isAnimated","$","_c","t0","element","current","getAnimations","animation","timeline","ownerDocument","startTime","t1","CubeProps","index","style","Cube","undefined","t2","t3","t4","Symbol","for","t5","SIZE_MAP","small","medium","large","CubeLoadingAnimationProps","size","LoadingAnimation","props","t","numSize","t6","t10","t7","t8","t9","t11"],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties, RefObject, useRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n    //\n    // Those three tokens are the kit's shared isometric-cube ramp — `NoDataIcon`\n    // draws its crate from the same ones — and they are pinned by a WCAG floor\n    // against `surface` rather than by a tone delta, so the faces hold the same\n    // separation in light, dark, and high contrast. See the recipe's comment for\n    // why that matters.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\n      'index=0 | index=1 | index=2': 0,\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\n/**\n * Phase-lock a cube's `dice*` animation to the document timeline.\n *\n * A page under load mounts these animations at whatever moment each level of\n * the tree resolves — a route shell, then a panel, then the table inside it —\n * and every wrapper that appears around a running `LoadingAnimation` remounts\n * it. A CSS animation is created with its start time at \"now\", so each of\n * those events snapped the cubes back to the first frame: the visible symptom\n * is a loader that keeps stuttering back to the start while the page settles.\n *\n * Moving the start time to 0 puts it at the origin of the document timeline,\n * so the cube's position is a function of the timeline's current reading and\n * nothing else. Two consequences: a remount picks up exactly where the removed\n * element was, and every instance in the document runs in lockstep, because\n * they all read the same clock.\n *\n * Done through the animation object in a layout effect (before the first paint\n * of the new element) rather than through a negative `animation-delay`: the\n * delay would have to be computed during render from `Date.now()`, which is\n * both a different clock than the one the animation runs on — so the phase\n * would be off by the render-to-paint gap — and a value that differs between\n * the server and the client, i.e. a hydration mismatch on every render.\n */\nfunction useTimelineSyncedAnimation(\n  ref: RefObject<SVGSVGElement | null>,\n  isAnimated: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    // `getAnimations` is absent in jsdom, where there is nothing to sync.\n    if (!isAnimated || !element?.getAnimations) return;\n\n    for (const animation of element.getAnimations()) {\n      // These elements carry nothing but the `dice*` animation, and it always\n      // runs on the document timeline — the one timeline an explicit numeric\n      // start time is meaningful against.\n      if (animation.timeline === element.ownerDocument.timeline) {\n        animation.startTime = 0;\n      }\n    }\n  }, [isAnimated]);\n}\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  const ref = useRef<SVGSVGElement>(null);\n\n  useTimelineSyncedAnimation(ref, index != null);\n\n  return (\n    <CubeElement\n      ref={ref}\n      mods={index != null ? { index } : undefined}\n      style={style}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const { t } = useI18n();\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label={t('loadingAnimation.ariaLabel', 'Loading animation')}\n      width={numSize}\n      height={numSize * 1.1388888889}\n      style={{ position: 'relative' }}\n      {...props}\n    >\n      <Cube style={{ transform: 'translate(0%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(98%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(49%, 96.5%)' }} />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":"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"}

package/dist/components/status/Spin/Cube.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -96,8 +97,16 @@ const CubeElement = tasty({
 		}
 	}
 });
-const Cube = memo(function Cube({ $position }) {
-	return /* @__PURE__ */ jsx(CubeElement, { mods: { position: $position } });
+const Cube = memo(function Cube(t0) {
+	const $ = c(2);
+	const { $position } = t0;
+	let t1;
+	if ($[0] !== $position) {
+		t1 = /* @__PURE__ */ jsx(CubeElement, { mods: { position: $position } });
+		$[0] = $position;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
 });
 
 //#endregion

package/dist/components/status/Spin/Cube.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cube.js","names":[],"sources":["../../../../src/components/status/Spin/Cube.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { SpinCubeProps } from './types';\n\nconst CubeElement = tasty({\n  role: 'presentation',\n  styles: {\n    '$cube-border-width': '(4 / 100 * $cube-spin-size)',\n    '$cube-border-compensation': '(-1 * $cube-border-width)',\n    '$cube-size': '((100% - 2 * $cube-border-width) / 2)',\n\n    boxSizing: 'content-box',\n    position: 'absolute',\n    top: '$cube-border-compensation',\n    left: '$cube-border-compensation',\n    width: '$cube-size',\n    height: '$cube-size',\n    border: '$cube-border-width solid #clear',\n    overflow: 'hidden',\n    contain: 'size layout style paint',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    animationName: {\n      '': 'none',\n      'position=top': 'cube-spin-top',\n      'position=right': 'cube-spin-right',\n      'position=bottom': 'cube-spin-bottom',\n    },\n    animationDuration: '2.2s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',\n    animationPlayState: {\n      '': 'running',\n      '@media(prefers-reduced-motion)': 'paused',\n    },\n\n    '&::before': {\n      '$cube-round-radius': '(4 / 100 * $cube-spin-size)',\n      content: '\"\"',\n      display: 'block',\n      width: '100%',\n      height: '100%',\n      radius: '$cube-round-radius',\n      fill: {\n        'position=top': '#7a77ff',\n        'position=right': '#727290',\n        'position=bottom': '#ff6492',\n      },\n    },\n\n    '@keyframes': {\n      'cube-spin-top': {\n        '0%': { transform: 'translate(0%, 0)' },\n        '8%': { transform: 'translate(100%, 0)' },\n        '17%': { transform: 'translate(100%, 0)' },\n        '25%': { transform: 'translate(100%, 0)' },\n        '33%': { transform: 'translate(100%, 100%)' },\n        '42%': { transform: 'translate(100%, 100%)' },\n        '50%': { transform: 'translate(100%, 100%)' },\n        '58%': { transform: 'translate(0, 100%)' },\n        '67%': { transform: 'translate(0, 100%)' },\n        '75%': { transform: 'translate(0, 100%)' },\n        '83%': { transform: 'translate(0, 0)' },\n        '92%': { transform: 'translate(0, 0)' },\n        '100%': { transform: 'translate(0, 0)' },\n      },\n      'cube-spin-right': {\n        '0%': { transform: 'translate(100%, 100%)' },\n        '8%': { transform: 'translate(100%, 100%)' },\n        '17%': { transform: 'translate(100%, 100%)' },\n        '25%': { transform: 'translate(0, 100%)' },\n        '33%': { transform: 'translate(0, 100%)' },\n        '42%': { transform: 'translate(0, 100%)' },\n        '50%': { transform: 'translate(0, 0)' },\n        '58%': { transform: 'translate(0, 0)' },\n        '67%': { transform: 'translate(0, 0)' },\n        '75%': { transform: 'translate(100%, 0)' },\n        '83%': { transform: 'translate(100%, 0)' },\n        '92%': { transform: 'translate(100%, 0)' },\n        '100%': { transform: 'translate(100%, 100%)' },\n      },\n      'cube-spin-bottom': {\n        '0%': { transform: 'translate(0, 100%)' },\n        '8%': { transform: 'translate(0, 100%)' },\n        '17%': { transform: 'translate(0, 0)' },\n        '25%': { transform: 'translate(0, 0)' },\n        '33%': { transform: 'translate(0, 0)' },\n        '42%': { transform: 'translate(100%, 0)' },\n        '50%': { transform: 'translate(100%, 0)' },\n        '58%': { transform: 'translate(100%, 0)' },\n        '67%': { transform: 'translate(100%, 100%)' },\n        '75%': { transform: 'translate(100%, 100%)' },\n        '83%': { transform: 'translate(100%, 100%)' },\n        '92%': { transform: 'translate(0, 100%)' },\n        '100%': { transform: 'translate(0, 100%)' },\n      },\n    },\n  },\n});\n\nexport const Cube = memo(function Cube({ $position }: SpinCubeProps) {\n  return <CubeElement mods={{ position: $position }} />;\n});\n"],"mappings":";;;;;;AAKA,MAAM,cAAc,MAAM;CACxB,MAAM;CACN,QAAQ;EACN,sBAAsB;EACtB,6BAA6B;EAC7B,cAAc;EAEd,WAAW;EACX,UAAU;EACV,KAAK;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,eAAe;EACf,YAAY;EAEZ,eAAe;GACb,IAAI;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB;GACpB;EACD,mBAAmB;EACnB,yBAAyB;EACzB,yBAAyB;EACzB,oBAAoB;GAClB,IAAI;GACJ,kCAAkC;GACnC;EAED,aAAa;GACX,sBAAsB;GACtB,SAAS;GACT,SAAS;GACT,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,MAAM;IACJ,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACpB;GACF;EAED,cAAc;GACZ,iBAAiB;IACf,MAAM,EAAE,WAAW,oBAAoB;IACvC,MAAM,EAAE,WAAW,sBAAsB;IACzC,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,mBAAmB;IACvC,QAAQ,EAAE,WAAW,mBAAmB;IACzC;GACD,mBAAmB;IACjB,MAAM,EAAE,WAAW,yBAAyB;IAC5C,MAAM,EAAE,WAAW,yBAAyB;IAC5C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,QAAQ,EAAE,WAAW,yBAAyB;IAC/C;GACD,oBAAoB;IAClB,MAAM,EAAE,WAAW,sBAAsB;IACzC,MAAM,EAAE,WAAW,sBAAsB;IACzC,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,mBAAmB;IACvC,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,yBAAyB;IAC7C,OAAO,EAAE,WAAW,sBAAsB;IAC1C,QAAQ,EAAE,WAAW,sBAAsB;IAC5C;GACF;EACF;CACF,CAAC;AAEF,MAAa,OAAO,KAAK,SAAS,KAAK,EAAE,aAA4B;AACnE,QAAO,oBAAC,eAAY,MAAM,EAAE,UAAU,WAAW,GAAI;EACrD"}
+{"version":3,"file":"Cube.js","names":["tasty","memo","SpinCubeProps","CubeElement","role","styles","boxSizing","position","top","left","width","height","border","overflow","contain","pointerEvents","userSelect","animationName","animationDuration","animationIterationCount","animationTimingFunction","animationPlayState","content","display","radius","fill","transform","Cube","t0","$","_c","$position","t1"],"sources":["../../../../src/components/status/Spin/Cube.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { SpinCubeProps } from './types';\n\nconst CubeElement = tasty({\n  role: 'presentation',\n  styles: {\n    '$cube-border-width': '(4 / 100 * $cube-spin-size)',\n    '$cube-border-compensation': '(-1 * $cube-border-width)',\n    '$cube-size': '((100% - 2 * $cube-border-width) / 2)',\n\n    boxSizing: 'content-box',\n    position: 'absolute',\n    top: '$cube-border-compensation',\n    left: '$cube-border-compensation',\n    width: '$cube-size',\n    height: '$cube-size',\n    border: '$cube-border-width solid #clear',\n    overflow: 'hidden',\n    contain: 'size layout style paint',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    animationName: {\n      '': 'none',\n      'position=top': 'cube-spin-top',\n      'position=right': 'cube-spin-right',\n      'position=bottom': 'cube-spin-bottom',\n    },\n    animationDuration: '2.2s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',\n    animationPlayState: {\n      '': 'running',\n      '@media(prefers-reduced-motion)': 'paused',\n    },\n\n    '&::before': {\n      '$cube-round-radius': '(4 / 100 * $cube-spin-size)',\n      content: '\"\"',\n      display: 'block',\n      width: '100%',\n      height: '100%',\n      radius: '$cube-round-radius',\n      fill: {\n        'position=top': '#7a77ff',\n        'position=right': '#727290',\n        'position=bottom': '#ff6492',\n      },\n    },\n\n    '@keyframes': {\n      'cube-spin-top': {\n        '0%': { transform: 'translate(0%, 0)' },\n        '8%': { transform: 'translate(100%, 0)' },\n        '17%': { transform: 'translate(100%, 0)' },\n        '25%': { transform: 'translate(100%, 0)' },\n        '33%': { transform: 'translate(100%, 100%)' },\n        '42%': { transform: 'translate(100%, 100%)' },\n        '50%': { transform: 'translate(100%, 100%)' },\n        '58%': { transform: 'translate(0, 100%)' },\n        '67%': { transform: 'translate(0, 100%)' },\n        '75%': { transform: 'translate(0, 100%)' },\n        '83%': { transform: 'translate(0, 0)' },\n        '92%': { transform: 'translate(0, 0)' },\n        '100%': { transform: 'translate(0, 0)' },\n      },\n      'cube-spin-right': {\n        '0%': { transform: 'translate(100%, 100%)' },\n        '8%': { transform: 'translate(100%, 100%)' },\n        '17%': { transform: 'translate(100%, 100%)' },\n        '25%': { transform: 'translate(0, 100%)' },\n        '33%': { transform: 'translate(0, 100%)' },\n        '42%': { transform: 'translate(0, 100%)' },\n        '50%': { transform: 'translate(0, 0)' },\n        '58%': { transform: 'translate(0, 0)' },\n        '67%': { transform: 'translate(0, 0)' },\n        '75%': { transform: 'translate(100%, 0)' },\n        '83%': { transform: 'translate(100%, 0)' },\n        '92%': { transform: 'translate(100%, 0)' },\n        '100%': { transform: 'translate(100%, 100%)' },\n      },\n      'cube-spin-bottom': {\n        '0%': { transform: 'translate(0, 100%)' },\n        '8%': { transform: 'translate(0, 100%)' },\n        '17%': { transform: 'translate(0, 0)' },\n        '25%': { transform: 'translate(0, 0)' },\n        '33%': { transform: 'translate(0, 0)' },\n        '42%': { transform: 'translate(100%, 0)' },\n        '50%': { transform: 'translate(100%, 0)' },\n        '58%': { transform: 'translate(100%, 0)' },\n        '67%': { transform: 'translate(100%, 100%)' },\n        '75%': { transform: 'translate(100%, 100%)' },\n        '83%': { transform: 'translate(100%, 100%)' },\n        '92%': { transform: 'translate(0, 100%)' },\n        '100%': { transform: 'translate(0, 100%)' },\n      },\n    },\n  },\n});\n\nexport const Cube = memo(function Cube({ $position }: SpinCubeProps) {\n  return <CubeElement mods={{ position: $position }} />;\n});\n"],"mappings":";;;;;;;AAKA,MAAMG,cAAcH,MAAM;CACxBI,MAAM;CACNC,QAAQ;EACN,sBAAsB;EACtB,6BAA6B;EAC7B,cAAc;EAEdC,WAAW;EACXC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,YAAY;EAEZC,eAAe;GACb,IAAI;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB;GACpB;EACDC,mBAAmB;EACnBC,yBAAyB;EACzBC,yBAAyB;EACzBC,oBAAoB;GAClB,IAAI;GACJ,kCAAkC;GACnC;EAED,aAAa;GACX,sBAAsB;GACtBC,SAAS;GACTC,SAAS;GACTb,OAAO;GACPC,QAAQ;GACRa,QAAQ;GACRC,MAAM;IACJ,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACrB;GACD;EAED,cAAc;GACZ,iBAAiB;IACf,MAAM,EAAEC,WAAW,oBAAoB;IACvC,MAAM,EAAEA,WAAW,sBAAsB;IACzC,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,QAAQ,EAAEA,WAAW,mBAAkB;IACxC;GACD,mBAAmB;IACjB,MAAM,EAAEA,WAAW,yBAAyB;IAC5C,MAAM,EAAEA,WAAW,yBAAyB;IAC5C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,QAAQ,EAAEA,WAAW,yBAAwB;IAC9C;GACD,oBAAoB;IAClB,MAAM,EAAEA,WAAW,sBAAsB;IACzC,MAAM,EAAEA,WAAW,sBAAsB;IACzC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,QAAQ,EAAEA,WAAW,sBAAqB;IAC5C;GACF;EACF;CACD,CAAC;AAEF,MAAaC,OAAO1B,KAAK,SAAA0B,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAC,cAAAH;CAA4B,IAAAI;AAAA,KAAAH,EAAA,OAAAE,WAAA;AAC1DC,OAAA,oBAAC,eAAkB,MAAA,EAAAzB,UAAYwB,WAAU,GAAK;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAA9CG;EACP"}

package/dist/components/status/Spin/InternalSpinner.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { Cube } from "./Cube.js";
 import { SpinsContainer } from "./SpinsContainer.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,15 +12,29 @@ const SpinsBox = tasty({ styles: {
 	blockSize: "100%"
 } });
 const InternalSpinner = memo(function InternalSpinner(props) {
+	const $ = c(4);
 	const { size } = props;
-	return /* @__PURE__ */ jsx(SpinsContainer, {
-		ownSize: CUBE_SIZE_MAP[size],
-		children: /* @__PURE__ */ jsxs(SpinsBox, { children: [
+	const t0 = CUBE_SIZE_MAP[size];
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(SpinsBox, { children: [
 			/* @__PURE__ */ jsx(Cube, { $position: "top" }),
 			/* @__PURE__ */ jsx(Cube, { $position: "right" }),
 			/* @__PURE__ */ jsx(Cube, { $position: "bottom" })
-		] })
-	}, size);
+		] });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== size || $[2] !== t0) {
+		t2 = /* @__PURE__ */ jsx(SpinsContainer, {
+			ownSize: t0,
+			children: t1
+		}, size);
+		$[1] = size;
+		$[2] = t0;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
 });
 const CUBE_SIZE_MAP = {
 	small: 24,

package/dist/components/status/Spin/InternalSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalSpinner.js","names":[],"sources":["../../../../src/components/status/Spin/InternalSpinner.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { Cube } from './Cube';\nimport { SpinsContainer } from './SpinsContainer';\nimport { InternalSpinnerProps, SpinSize } from './types';\n\nconst SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });\n\nexport const InternalSpinner = memo(function InternalSpinner(\n  props: InternalSpinnerProps,\n) {\n  const { size } = props;\n\n  return (\n    // Even though using size as a key resets the animation, it helps safari to resize the cubes.\n    <SpinsContainer key={size} ownSize={CUBE_SIZE_MAP[size]}>\n      <SpinsBox>\n        <Cube $position=\"top\" />\n        <Cube $position=\"right\" />\n        <Cube $position=\"bottom\" />\n      </SpinsBox>\n    </SpinsContainer>\n  );\n});\n\nconst CUBE_SIZE_MAP: Record<SpinSize, number> = {\n  small: 24,\n  default: 32,\n  large: 48,\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,WAAW,MAAM,EAAE,QAAQ;CAAE,UAAU;CAAY,WAAW;CAAQ,EAAE,CAAC;AAE/E,MAAa,kBAAkB,KAAK,SAAS,gBAC3C,OACA;CACA,MAAM,EAAE,SAAS;AAEjB,QAEE,oBAAC;EAA0B,SAAS,cAAc;YAChD,qBAAC;GACC,oBAAC,QAAK,WAAU,QAAQ;GACxB,oBAAC,QAAK,WAAU,UAAU;GAC1B,oBAAC,QAAK,WAAU,WAAW;MAClB;IALQ,KAMJ;EAEnB;AAEF,MAAM,gBAA0C;CAC9C,OAAO;CACP,SAAS;CACT,OAAO;CACR"}
+{"version":3,"file":"InternalSpinner.js","names":["tasty","memo","Cube","SpinsContainer","InternalSpinnerProps","SpinSize","SpinsBox","styles","position","blockSize","InternalSpinner","props","$","_c","size","t0","CUBE_SIZE_MAP","t1","Symbol","for","t2","Record","small","default","large"],"sources":["../../../../src/components/status/Spin/InternalSpinner.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { Cube } from './Cube';\nimport { SpinsContainer } from './SpinsContainer';\nimport { InternalSpinnerProps, SpinSize } from './types';\n\nconst SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });\n\nexport const InternalSpinner = memo(function InternalSpinner(\n  props: InternalSpinnerProps,\n) {\n  const { size } = props;\n\n  return (\n    // Even though using size as a key resets the animation, it helps safari to resize the cubes.\n    <SpinsContainer key={size} ownSize={CUBE_SIZE_MAP[size]}>\n      <SpinsBox>\n        <Cube $position=\"top\" />\n        <Cube $position=\"right\" />\n        <Cube $position=\"bottom\" />\n      </SpinsBox>\n    </SpinsContainer>\n  );\n});\n\nconst CUBE_SIZE_MAP: Record<SpinSize, number> = {\n  small: 24,\n  default: 32,\n  large: 48,\n};\n"],"mappings":";;;;;;;;;AAOA,MAAMM,WAAWN,MAAM,EAAEO,QAAQ;CAAEC,UAAU;CAAYC,WAAW;CAAO,EAAG,CAAC;AAE/E,MAAaC,kBAAkBT,KAAK,SAAAS,gBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGlC,MAAA,EAAAC,SAAiBH;CAIqB,MAAAI,KAAAC,cAAcF;CAAK,IAAAG;AAAA,KAAAL,EAAA,OAAAM,OAAAC,IAAA,4BAAA,EAAA;AACrDF,OAAA,qBAAC;GACC,oBAAC,QAAe,WAAA,QAChB;uBAAC,QAAe,WAAA,UAChB;uBAAC,QAAe,WAAA,WAClB;MAAW;AAAAL,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAQ;AAAA,KAAAR,EAAA,OAAAE,QAAAF,EAAA,OAAAG,IAAA;AALbK,OAAA,oBAAC;GAAmC,SAAAL;aAClCE;KADmBH,KAMJ;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QANjBQ;EAQF;AAEF,MAAMJ,gBAA0C;CAC9CM,OAAO;CACPC,SAAS;CACTC,OAAO;CACR"}