@william-callao/antonella-ui 1.0.1 → 1.0.2

package/dist/index.d.ts

@@ -984,14 +984,23 @@ type AppNavigation = {
 /** Presets = las 5 variantes del motor, reutilizables por nombre. */
 declare const layoutStates: Record<LayoutStateName, LayoutState>;
 declare function useAppNavigation(): AppNavigation;
+type AppLayoutDebugSnapshot = {
+    route: string;
+    anchors: string[];
+    anim: Record<string, number>;
+    naturals: Record<SectionKey, number>;
+    lastMeasured: Record<SectionKey, number>;
+    windowH: number;
+};
+declare function useAppLayoutDebug(): {
+    snapshot: () => AppLayoutDebugSnapshot;
+};
 type AppLayoutProps = {
     initialRoute: AppRoute;
     /** Muestra un botón de volver global cuando canGoBack. Default true. */
     showBackButton?: boolean;
-    /** Logs de debug en consola. Default false. */
-    debug?: boolean;
 };
-declare function AppLayout({ initialRoute, showBackButton, debug, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+declare function AppLayout({ initialRoute, showBackButton, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
 
 type DivisorPosition = "top" | "bottom";
 type DivisorProps = {
@@ -1077,4 +1086,4 @@ declare const AppIcon: {
     readonly Inbox: IconName;
 };
 
-export { AppButton, type AppButtonProps, type AppButtonVariant, AppCheckItem, type AppCheckItemProps, type AppCheckItemStatus, AppDialogMode, type AppFilterChipOption, AppFilterChips, type AppFilterChipsProps, AppFormCard, type AppFormCardProps, AppIcon, type AppInputElement, type AppInputProps, AppLayout, type AppLayoutProps, type AppNavigation, AppResponsiveDialog, type AppResponsiveDialogProps, type AppRoute, AppSelector, type AppSelectorOption, type AppSelectorProps, AppTextArea, type AppTextAreaProps, AppTextHeader, type AppTextHeaderProps, AppTextInput, type AppTextInputProps, AppToggle, type AppToggleProps, Avatar, type AvatarProps, type AvatarSize, type BaseColorKey, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CardStackSheet, type CardStackSheetProps, CardTitle, type CardTitleProps, type CardVariant, CategoryText, type CategoryTextProps, CategoryTextStyle, Chip, type ChipProps, ChipRow, type ChipRowOption, type ChipRowProps, type ChipSize, type ChipVariant, ColorCustomizerDialog, type ColorToken, ColorWheel, ComposingOrb, type Composition, DashboardShell, type DashboardShellProps, Divisor, type DivisorPosition, type DivisorProps, Dock, type DockItem, type DockProps, DonutChart, type DonutChartProps, type DonutSegment, DrawerMenu, DrawerMenuItem, type DrawerMenuItemProps, DrawerMenuItemStyle, type DrawerMenuItemType, type DrawerMenuProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownState, EmptyState, type EmptyStateProps, FloatingActionButton, type FloatingActionButtonPosition, type FloatingActionButtonProps, HeaderBar, type HeaderBarProps, HeaderBarStyle, HeaderCardLayout, type HeaderCardLayoutProps, type HeightSpec, type HostKey, Icon, type IconName, type IconProps, Input, type InputProps, Item, type ItemProps, ItemStyle, KeyboardSafeScreen, type KeyboardSafeScreenProps, type LayerDirection, type LayerRole, LayoutColumn, LayoutRow, type LayoutState, type LayoutStateName, MainLayout, type MainLayoutProps, Modal, type ModalProps, OptionListItem, type OptionListItemProps, OptionListItemVariant, PinKeypad, type PinKeypadProps, ReverseHeaderCardLayout, type ReverseHeaderCardLayoutProps, type Route, type RouteOptions, SearchBar, type SearchBarProps, SearchBarStyle, type SectionBehavior, type SectionKey, type SheetKind, SheetLayout, type SheetLayoutProps, SheetSlot, type SheetSlotProps, type SidebarItem, type SidebarSection, type SidebarType, Skeleton, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, type SkeletonShape, SkeletonText, type SkeletonTextProps, type SlotName, SplitColorCard, SplitDarknessCard, SplitTextCard, StateMessage, type StateMessageProps, StateMessageStyle, StateMessageType, TOAST_DEFAULT_DURATION_MS, Text, TextField, type TextFieldProps, type TextProps, type TextVariant, Toast, type ToastOptions, type ToastProps, ToastProvider, ToastStyle, ToastTone, type ToolItem, ToolsCard, type ToolsCardProps, type TransitionSpec, TreeEditor, type TreeEditorMode, type TreeEditorProps, type TreeEditorVariant, type TreeNode, addChild, addSibling, buildInitialCollapsed, countNodes, createNode, directionSign, findNode, hasCode, hostDirection, iconMap, layoutStates, removeNode, resolveComposition, resolveTransition, updateNode, useAppNavigation, useSheetLayout, useToast };
+export { AppButton, type AppButtonProps, type AppButtonVariant, AppCheckItem, type AppCheckItemProps, type AppCheckItemStatus, AppDialogMode, type AppFilterChipOption, AppFilterChips, type AppFilterChipsProps, AppFormCard, type AppFormCardProps, AppIcon, type AppInputElement, type AppInputProps, AppLayout, type AppLayoutDebugSnapshot, type AppLayoutProps, type AppNavigation, AppResponsiveDialog, type AppResponsiveDialogProps, type AppRoute, AppSelector, type AppSelectorOption, type AppSelectorProps, AppTextArea, type AppTextAreaProps, AppTextHeader, type AppTextHeaderProps, AppTextInput, type AppTextInputProps, AppToggle, type AppToggleProps, Avatar, type AvatarProps, type AvatarSize, type BaseColorKey, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CardStackSheet, type CardStackSheetProps, CardTitle, type CardTitleProps, type CardVariant, CategoryText, type CategoryTextProps, CategoryTextStyle, Chip, type ChipProps, ChipRow, type ChipRowOption, type ChipRowProps, type ChipSize, type ChipVariant, ColorCustomizerDialog, type ColorToken, ColorWheel, ComposingOrb, type Composition, DashboardShell, type DashboardShellProps, Divisor, type DivisorPosition, type DivisorProps, Dock, type DockItem, type DockProps, DonutChart, type DonutChartProps, type DonutSegment, DrawerMenu, DrawerMenuItem, type DrawerMenuItemProps, DrawerMenuItemStyle, type DrawerMenuItemType, type DrawerMenuProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownState, EmptyState, type EmptyStateProps, FloatingActionButton, type FloatingActionButtonPosition, type FloatingActionButtonProps, HeaderBar, type HeaderBarProps, HeaderBarStyle, HeaderCardLayout, type HeaderCardLayoutProps, type HeightSpec, type HostKey, Icon, type IconName, type IconProps, Input, type InputProps, Item, type ItemProps, ItemStyle, KeyboardSafeScreen, type KeyboardSafeScreenProps, type LayerDirection, type LayerRole, LayoutColumn, LayoutRow, type LayoutState, type LayoutStateName, MainLayout, type MainLayoutProps, Modal, type ModalProps, OptionListItem, type OptionListItemProps, OptionListItemVariant, PinKeypad, type PinKeypadProps, ReverseHeaderCardLayout, type ReverseHeaderCardLayoutProps, type Route, type RouteOptions, SearchBar, type SearchBarProps, SearchBarStyle, type SectionBehavior, type SectionKey, type SheetKind, SheetLayout, type SheetLayoutProps, SheetSlot, type SheetSlotProps, type SidebarItem, type SidebarSection, type SidebarType, Skeleton, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, type SkeletonShape, SkeletonText, type SkeletonTextProps, type SlotName, SplitColorCard, SplitDarknessCard, SplitTextCard, StateMessage, type StateMessageProps, StateMessageStyle, StateMessageType, TOAST_DEFAULT_DURATION_MS, Text, TextField, type TextFieldProps, type TextProps, type TextVariant, Toast, type ToastOptions, type ToastProps, ToastProvider, ToastStyle, ToastTone, type ToolItem, ToolsCard, type ToolsCardProps, type TransitionSpec, TreeEditor, type TreeEditorMode, type TreeEditorProps, type TreeEditorVariant, type TreeNode, addChild, addSibling, buildInitialCollapsed, countNodes, createNode, directionSign, findNode, hasCode, hostDirection, iconMap, layoutStates, removeNode, resolveComposition, resolveTransition, updateNode, useAppLayoutDebug, useAppNavigation, useSheetLayout, useToast };

package/dist/index.js

@@ -123,6 +123,7 @@ __export(index_exports, {
   resolveComposition: () => resolveComposition,
   resolveTransition: () => resolveTransition,
   updateNode: () => updateNode,
+  useAppLayoutDebug: () => useAppLayoutDebug,
   useAppNavigation: () => useAppNavigation,
   useSheetLayout: () => useSheetLayout,
   useToast: () => useToast
@@ -1445,6 +1446,7 @@ function BottomSheet({
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const keyboardHeight = useModalKeyboardHeight();
   const [mounted, setMounted] = (0, import_react5.useState)(visible);
+  const [contentReady, setContentReady] = (0, import_react5.useState)(false);
   const progress = (0, import_react_native_reanimated3.useSharedValue)(0);
   const maxHeightRatio = (0, import_react5.useMemo)(() => {
     let ratio = 0.9;
@@ -1459,6 +1461,13 @@ function BottomSheet({
   (0, import_react5.useEffect)(() => {
     if (visible) setMounted(true);
   }, [visible]);
+  (0, import_react5.useEffect)(() => {
+    if (mounted && visible) {
+      const raf = requestAnimationFrame(() => setContentReady(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    if (!mounted) setContentReady(false);
+  }, [mounted, visible]);
   (0, import_react5.useEffect)(() => {
     if (!mounted) return;
     if (visible) {
@@ -1524,28 +1533,34 @@ function BottomSheet({
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated3.default.View, { style: [styles18.backdrop, backdropStyle] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated3.default.View, { style: [styles18.panelWrapper, containerAnimatedStyle], pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native_reanimated3.default.View, { style: [styles18.panel, panelHeightStyle, panelStyle], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles18.handleBar }),
-          title || icon || caption || showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            DialogHeader,
-            {
-              icon,
-              title,
-              caption,
-              onClose,
-              showCloseButton
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react_native20.ScrollView,
-            {
-              showsVerticalScrollIndicator: false,
-              keyboardShouldPersistTaps: "handled",
-              contentContainerStyle: [styles18.content, contentStyle],
-              children
-            }
-          )
-        ] }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated3.default.View, { style: [styles18.panelWrapper, containerAnimatedStyle], pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          import_react_native_reanimated3.default.View,
+          {
+            style: [styles18.panel, panelHeightStyle, panelStyle],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles18.handleBar }),
+              title || icon || caption || showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                DialogHeader,
+                {
+                  icon,
+                  title,
+                  caption,
+                  onClose,
+                  showCloseButton
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react_native20.ScrollView,
+                {
+                  showsVerticalScrollIndicator: false,
+                  keyboardShouldPersistTaps: "handled",
+                  contentContainerStyle: [styles18.content, contentStyle],
+                  children: contentReady ? children : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles18.deferredPlaceholder })
+                }
+              )
+            ]
+          }
+        ) })
       ] })
     }
   );
@@ -1581,6 +1596,9 @@ var styles18 = import_react_native20.StyleSheet.create({
   content: {
     paddingTop: import_antonella_theme19.space.space2,
     paddingBottom: Math.max(import_antonella_theme19.space.space3, 24)
+  },
+  deferredPlaceholder: {
+    minHeight: import_antonella_theme19.space.space16
   }
 });
 
@@ -1609,6 +1627,7 @@ function CardStackSheet({
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
   const keyboardHeight = useModalKeyboardHeight();
   const [mounted, setMounted] = (0, import_react6.useState)(visible);
+  const [contentReady, setContentReady] = (0, import_react6.useState)(false);
   const progress = (0, import_react_native_reanimated4.useSharedValue)(0);
   const maxHeightRatio = (0, import_react6.useMemo)(() => {
     let ratio = 0.9;
@@ -1623,6 +1642,13 @@ function CardStackSheet({
   (0, import_react6.useEffect)(() => {
     if (visible) setMounted(true);
   }, [visible]);
+  (0, import_react6.useEffect)(() => {
+    if (mounted && visible) {
+      const raf = requestAnimationFrame(() => setContentReady(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    if (!mounted) setContentReady(false);
+  }, [mounted, visible]);
   (0, import_react6.useEffect)(() => {
     if (!mounted) return;
     if (visible) {
@@ -1703,7 +1729,7 @@ function CardStackSheet({
                   contentStyle,
                   areaColor ? { backgroundColor: areaColor } : void 0
                 ],
-                children
+                children: contentReady ? children : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: styles19.deferredPlaceholder })
               }
             ) })
           }
@@ -1732,6 +1758,9 @@ var styles19 = import_react_native21.StyleSheet.create({
   content: {
     gap: import_antonella_theme20.space.space3,
     paddingBottom: Math.max(import_antonella_theme20.space.space3, 24)
+  },
+  deferredPlaceholder: {
+    minHeight: import_antonella_theme20.space.space16
   }
 });
 
@@ -5569,14 +5598,6 @@ function markBranchCollapsed(nodes, acc) {
     markBranchCollapsed(n.children, acc);
   }
 }
-function findSiblingGroup(nodes, id) {
-  if (nodes.some((n) => n.id === id)) return nodes;
-  for (const n of nodes) {
-    const found = findSiblingGroup(n.children, id);
-    if (found) return found;
-  }
-  return null;
-}
 function hasCode(nodes, code, excludeId) {
   for (const n of nodes) {
     if (n.code === code && n.id !== excludeId) return true;
@@ -5641,6 +5662,7 @@ var NodeGutter = import_react24.default.memo(function NodeGutter2({
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: columns });
 });
 function renderForest(ctx, nodes, depth, parentName) {
+  const collapsed = ctx.getCollapsed();
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: nodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     TreeNodeItem,
     {
@@ -5648,20 +5670,34 @@ function renderForest(ctx, nodes, depth, parentName) {
       depth,
       isLast: i === nodes.length - 1,
       parentName,
+      isCollapsed: !!collapsed[node.id],
+      branchVersion: ctx.getVersion(node.id),
       ctx
     },
     node.id
   )) });
 }
+function markDirtyPath(id, parentMap, acc) {
+  let curr = id;
+  while (curr) {
+    acc.add(curr);
+    curr = parentMap.get(curr);
+  }
+}
+function markSubtreeDirty(node, acc) {
+  acc.add(node.id);
+  for (const child of node.children) markSubtreeDirty(child, acc);
+}
 var TreeNodeItem = import_react24.default.memo(function TreeNodeItem2({
   node,
   depth,
   isLast,
   parentName,
+  isCollapsed,
+  branchVersion,
   ctx
 }) {
   const hasChildren = node.children.length > 0;
-  const isCollapsed = !!ctx.collapsed[node.id];
   const isActive = hasChildren && !isCollapsed;
   const terminalElbow = isLast;
   const contentOpacity = (0, import_react24.useRef)(new import_react_native49.Animated.Value(0)).current;
@@ -5774,6 +5810,53 @@ function TreeEditor({ value, onChange, mode = "view", variant = "default", colla
     [needsImplicitInit, value]
   );
   const collapsed = implicitInit ?? source;
+  const parentMap = (0, import_react24.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    const walk = (list, parent) => {
+      for (const n of list) {
+        if (parent) map.set(n.id, parent);
+        walk(n.children, n.id);
+      }
+    };
+    walk(value);
+    return map;
+  }, [value]);
+  const collapsedRef = (0, import_react24.useRef)(collapsed);
+  collapsedRef.current = collapsed;
+  const valueRef = (0, import_react24.useRef)(value);
+  valueRef.current = value;
+  const onCollapsedChangeRef = (0, import_react24.useRef)(onCollapsedChange);
+  onCollapsedChangeRef.current = onCollapsedChange;
+  const onRequestEditRef = (0, import_react24.useRef)(onRequestEdit);
+  onRequestEditRef.current = onRequestEdit;
+  const controlledRef = (0, import_react24.useRef)(collapsedProp !== void 0);
+  const versionRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
+  const renderSeqRef = (0, import_react24.useRef)(0);
+  const prevCollapsedRef = (0, import_react24.useRef)(collapsed);
+  const parentMapRef = (0, import_react24.useRef)(parentMap);
+  parentMapRef.current = parentMap;
+  {
+    const versions = versionRef.current;
+    const dirty = /* @__PURE__ */ new Set();
+    const prev = prevCollapsedRef.current;
+    const markChange = (id) => {
+      markDirtyPath(id, parentMapRef.current, dirty);
+      const node = findNode(value, id);
+      if (node) markSubtreeDirty(node, dirty);
+    };
+    for (const id of Object.keys(collapsed)) {
+      if (prev[id] !== collapsed[id]) markChange(id);
+    }
+    for (const id of Object.keys(prev)) {
+      if (prev[id] === true && !(id in collapsed)) markChange(id);
+    }
+    prevCollapsedRef.current = collapsed;
+    if (dirty.size > 0) {
+      renderSeqRef.current += 1;
+      const seq = renderSeqRef.current;
+      for (const id of dirty) versions.set(id, seq);
+    }
+  }
   (0, import_react24.useEffect)(() => {
     if (implicitInit == null) return;
     if (collapsedProp != null) {
@@ -5784,52 +5867,41 @@ function TreeEditor({ value, onChange, mode = "view", variant = "default", colla
   }, [implicitInit]);
   const vt = VARIANT_TOKENS[variant];
   const isEdit = mode === "edit";
-  const toggleCollapse = (0, import_react24.useCallback)(
-    (id) => {
-      const collapsing = !collapsed[id];
-      let next;
-      if (collapsing) {
-        next = { ...collapsed, [id]: true };
-        const node = findNode(value, id);
-        if (node) markBranchCollapsed(node.children, next);
-      } else {
-        next = { ...collapsed, [id]: false };
-        const siblings = findSiblingGroup(value, id);
-        const rootId = value.length > 0 ? value[0].id : null;
-        if (siblings) {
-          for (const s of siblings) {
-            if (s.id !== id && s.id !== rootId && s.children.length > 0) {
-              next[s.id] = true;
-              markBranchCollapsed(s.children, next);
-            }
-          }
-        }
-      }
-      if (collapsedProp != null) {
-        onCollapsedChange?.(next);
-      } else {
-        setInternalCollapsed(next);
-      }
-    },
-    [collapsed, collapsedProp, value, onCollapsedChange]
-  );
-  const onOpenActions = (0, import_react24.useCallback)(
-    (nodeId) => {
-      const node = findNode(value, nodeId);
-      if (node) onRequestEdit?.(node);
-    },
-    [value, onRequestEdit]
-  );
+  const getCollapsed = (0, import_react24.useCallback)(() => collapsedRef.current, []);
+  const getVersion = (0, import_react24.useCallback)((id) => versionRef.current.get(id) ?? 0, []);
+  const toggleCollapse = (0, import_react24.useCallback)((id) => {
+    const collapseMap = collapsedRef.current;
+    const tree = valueRef.current;
+    const collapsing = !collapseMap[id];
+    let next;
+    if (collapsing) {
+      next = { ...collapseMap, [id]: true };
+      const node = findNode(tree, id);
+      if (node) markBranchCollapsed(node.children, next);
+    } else {
+      next = { ...collapseMap, [id]: false };
+    }
+    if (controlledRef.current) {
+      onCollapsedChangeRef.current?.(next);
+    } else {
+      setInternalCollapsed(next);
+    }
+  }, []);
+  const onOpenActions = (0, import_react24.useCallback)((nodeId) => {
+    const node = findNode(valueRef.current, nodeId);
+    if (node) onRequestEditRef.current?.(node);
+  }, []);
   const ctx = (0, import_react24.useMemo)(
     () => ({
       isEdit,
-      collapsed,
       onToggle: toggleCollapse,
       onOpenActions,
       renderNode,
-      vt
+      vt,
+      getCollapsed,
+      getVersion
     }),
-    [isEdit, collapsed, toggleCollapse, onOpenActions, renderNode, vt]
+    [isEdit, toggleCollapse, onOpenActions, renderNode, vt, getCollapsed, getVersion]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     import_react_native49.View,
@@ -7246,7 +7318,6 @@ var styles56 = import_react_native61.StyleSheet.create({
 var import_react32 = require("react");
 var import_react_native63 = require("react-native");
 var import_react_native64 = require("react-native");
-var import_react_native_reanimated14 = __toESM(require("react-native-reanimated"));
 
 // src/layout/Divisor.tsx
 var import_react_native62 = require("react-native");
@@ -7346,8 +7417,6 @@ var DEFAULT_COLORS = {
   mid: DEFAULT_BG2,
   bottom: DARK_BG
 };
-var COLLAPSE_DISTANCE = 80;
-var TRANSITION = 320;
 var AppNavigationContext = (0, import_react32.createContext)(null);
 function useAppNavigation() {
   const ctx = (0, import_react32.useContext)(AppNavigationContext);
@@ -7356,10 +7425,17 @@ function useAppNavigation() {
   }
   return ctx;
 }
+var AppLayoutDebugContext = (0, import_react32.createContext)(null);
+function useAppLayoutDebug() {
+  const ctx = (0, import_react32.useContext)(AppLayoutDebugContext);
+  if (!ctx) {
+    throw new Error("useAppLayoutDebug debe usarse dentro de <AppLayout>");
+  }
+  return ctx;
+}
 function AppLayout({
   initialRoute,
-  showBackButton = true,
-  debug = false
+  showBackButton = true
 }) {
   const { height: H } = (0, import_react_native64.useWindowDimensions)();
   const [stack, setStack] = (0, import_react32.useState)([initialRoute]);
@@ -7410,47 +7486,19 @@ function AppLayout({
   const bottomVisible = !!state.sections.bottom?.visible;
   const showTopDivisor = topVisible && (midVisible || bottomVisible);
   const showBottomDivisor = bottomVisible && (topVisible || midVisible);
-  const topNatural = (0, import_react_native_reanimated14.useSharedValue)(H / 3);
-  const midNatural = (0, import_react_native_reanimated14.useSharedValue)(H / 3);
-  const bottomNatural = (0, import_react_native_reanimated14.useSharedValue)(H / 3);
-  const naturals = {
-    top: topNatural,
-    mid: midNatural,
-    bottom: bottomNatural
-  };
-  const animating = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const scrollY = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const [layoutHeights, setLayoutHeights] = (0, import_react32.useState)({
+    top: H / 3,
+    mid: H / 3,
+    bottom: H / 3
+  });
   const scrollRef = (0, import_react32.useRef)(null);
   const innerScrollRef = (0, import_react32.useRef)(null);
-  const settleTimerRef = (0, import_react32.useRef)(null);
-  const progress = (0, import_react_native_reanimated14.useSharedValue)(1);
-  const fromH = {
-    top: (0, import_react_native_reanimated14.useSharedValue)(H / 3),
-    mid: (0, import_react_native_reanimated14.useSharedValue)(H / 3),
-    bottom: (0, import_react_native_reanimated14.useSharedValue)(H / 3)
-  };
-  const toH = {
-    top: (0, import_react_native_reanimated14.useSharedValue)(H / 3),
-    mid: (0, import_react_native_reanimated14.useSharedValue)(H / 3),
-    bottom: (0, import_react_native_reanimated14.useSharedValue)(H / 3)
-  };
-  const topDisplay = (0, import_react_native_reanimated14.useDerivedValue)(
-    () => (0, import_react_native_reanimated14.interpolate)(progress.value, [0, 1], [fromH.top.value, toH.top.value])
-  );
-  const midDisplay = (0, import_react_native_reanimated14.useDerivedValue)(
-    () => (0, import_react_native_reanimated14.interpolate)(progress.value, [0, 1], [fromH.mid.value, toH.mid.value])
-  );
-  const bottomDisplay = (0, import_react_native_reanimated14.useDerivedValue)(
-    () => (0, import_react_native_reanimated14.interpolate)(progress.value, [0, 1], [fromH.bottom.value, toH.bottom.value])
-  );
-  const display = {
-    top: topDisplay,
-    mid: midDisplay,
-    bottom: bottomDisplay
-  };
-  const onScroll = (0, import_react_native_reanimated14.useAnimatedScrollHandler)((event) => {
-    scrollY.value = event.contentOffset.y;
+  const naturalsRef = (0, import_react32.useRef)({
+    top: H / 3,
+    mid: H / 3,
+    bottom: H / 3
   });
+  const lastMeasured = (0, import_react32.useRef)({ top: 0, mid: 0, bottom: 0 });
   const computeTargets = (st) => {
     const base = { top: 0, mid: 0, bottom: 0 };
     for (const k of SECTION_KEYS) {
@@ -7460,103 +7508,68 @@ function AppLayout({
         continue;
       }
       const h = b.height ?? "content";
-      if (h === "content") base[k] = naturals[k].value;
+      if (h === "content") base[k] = naturalsRef.current[k];
       else if (h === "third") base[k] = H / 3;
       else if (h === "fill") base[k] = H;
-      else if (h === "fillRest") base[k] = b.restsOn ? H - naturals[b.restsOn].value : 0;
+      else if (h === "fillRest") base[k] = b.restsOn ? H - naturalsRef.current[b.restsOn] : 0;
       else base[k] = h;
     }
     return base;
   };
+  const applyTargets = (0, import_react32.useCallback)((next) => {
+    setLayoutHeights(
+      (prev) => SECTION_KEYS.every((k) => prev[k] === next[k]) ? prev : next
+    );
+  }, []);
   const makeOnMeasure = (k) => (e) => {
     const h = e.nativeEvent.layout.height;
-    naturals[k].value = h;
-    const b = state.sections[k];
-    if (b?.height === "content") {
-      fromH[k].value = display[k].value;
-      toH[k].value = h;
-    }
-    for (const j of SECTION_KEYS) {
-      const bj = state.sections[j];
-      if (bj?.visible && bj.height === "fillRest" && bj.restsOn === k) {
-        fromH[j].value = display[j].value;
-        toH[j].value = H - h;
-      }
-    }
+    const prev = lastMeasured.current[k];
+    const collapsed = prev > 0 && h < Math.min(prev * 0.5, 100);
+    if (collapsed) return;
+    naturalsRef.current[k] = h;
+    lastMeasured.current[k] = h;
+    applyTargets(computeTargets(state));
   };
   (0, import_react32.useLayoutEffect)(() => {
-    if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
-    animating.value = 1;
+    const targets = computeTargets(state);
     if (!state.pageScroll) {
       scrollRef.current?.scrollTo({ y: 0, animated: false });
       innerScrollRef.current?.scrollTo({ y: 0, animated: false });
-      scrollY.value = 0;
-    }
-    const targets = computeTargets(state);
-    for (const k of SECTION_KEYS) {
-      fromH[k].value = display[k].value;
-      toH[k].value = targets[k];
-    }
-    progress.value = 0;
-    progress.value = (0, import_react_native_reanimated14.withTiming)(
-      1,
-      { duration: TRANSITION, easing: import_react_native_reanimated14.Easing.inOut(import_react_native_reanimated14.Easing.cubic) },
-      () => {
-        animating.value = 0;
-      }
-    );
-    settleTimerRef.current = setTimeout(() => {
-      scrollRef.current?.scrollTo({ y: 0, animated: false });
-      scrollY.value = 0;
-      setPrevRoute(currentRoute);
-    }, TRANSITION);
-    if (debug) {
-      console.log("[APP] transition ->", currentRoute.name, targets);
     }
+    applyTargets(targets);
+    setPrevRoute(currentRoute);
   }, [currentRoute.name]);
-  const topStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => ({ height: topDisplay.value }));
-  const midStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => ({ height: midDisplay.value }));
-  const bottomStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => ({ height: bottomDisplay.value }));
-  const stylesFor = {
-    top: topStyle,
-    mid: midStyle,
-    bottom: bottomStyle
-  };
-  const topFade = (0, import_react_native_reanimated14.useAnimatedStyle)(
-    () => {
-      const scrollFade = state.sections.top?.fadeOnScroll ? (0, import_react_native_reanimated14.interpolate)(scrollY.value, [0, COLLAPSE_DISTANCE], [1, 0], import_react_native_reanimated14.Extrapolation.CLAMP) : 1;
-      return { opacity: scrollFade };
-    },
-    [state]
-  );
-  const midFade = (0, import_react_native_reanimated14.useAnimatedStyle)(
-    () => {
-      const scrollFade = state.sections.mid?.fadeOnScroll ? (0, import_react_native_reanimated14.interpolate)(scrollY.value, [0, COLLAPSE_DISTANCE], [1, 0], import_react_native_reanimated14.Extrapolation.CLAMP) : 1;
-      const full = naturals.mid.value || 1;
-      const collapseFade = (0, import_react_native_reanimated14.interpolate)(midDisplay.value, [0, full], [0, 1], import_react_native_reanimated14.Extrapolation.CLAMP);
-      return { opacity: Math.min(scrollFade, collapseFade) };
-    },
-    [state]
-  );
-  const bottomFade = (0, import_react_native_reanimated14.useAnimatedStyle)(
+  const snapshot = (0, import_react32.useCallback)(
     () => {
-      const scrollFade = state.sections.bottom?.fadeOnScroll ? (0, import_react_native_reanimated14.interpolate)(scrollY.value, [0, COLLAPSE_DISTANCE], [1, 0], import_react_native_reanimated14.Extrapolation.CLAMP) : 1;
-      return { opacity: scrollFade };
+      const midNatural = naturalsRef.current.mid || 1;
+      return {
+        route: currentRoute.name,
+        anchors: stack.map((r) => r.name),
+        anim: {
+          scrollY: 0,
+          animating: 0,
+          top: Math.round(layoutHeights.top),
+          mid: Math.round(layoutHeights.mid),
+          bottom: Math.round(layoutHeights.bottom),
+          topFade: 1,
+          midFade: Math.min(layoutHeights.mid / midNatural, 1),
+          bottomFade: 1
+        },
+        naturals: { ...naturalsRef.current },
+        lastMeasured: { ...lastMeasured.current },
+        windowH: H
+      };
     },
-    [state]
+    [currentRoute.name, stack, H, layoutHeights]
   );
-  const fadeFor = {
-    top: topFade,
-    mid: midFade,
-    bottom: bottomFade
-  };
   const renderSection = (k) => {
     const cur = state.sections[k];
     const prevB = prevLayoutState?.sections[k];
     const prevVisible = !!prevB?.visible;
     const visible = !!cur?.visible || prevVisible;
+    const height = layoutHeights[k];
     if (!visible) {
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native_reanimated14.default.View, { style: [styles58.colBlock, stylesFor[k]], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: styles58.measureCopy, onLayout: makeOnMeasure(k), children: cur?.slot ? slots[cur.slot] : null }) }, k);
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: [styles58.colBlock, { height }], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: styles58.measureCopy, onLayout: makeOnMeasure(k), children: cur?.slot ? slots[cur.slot] : null }) }, k);
     }
     const usePrevContent = !cur?.visible && prevVisible;
     const slot = usePrevContent ? prevB?.slot : cur?.slot;
@@ -7564,39 +7577,36 @@ function AppLayout({
     const bg = cur?.backgroundColor ?? prevB?.backgroundColor ?? DEFAULT_COLORS[k];
     const isDynamic = (cur?.height ?? prevB?.height) === "content";
     const scroll = cur?.scroll ?? prevB?.scroll ?? false;
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-      import_react_native_reanimated14.default.View,
-      {
-        style: [styles58.colBlock, { backgroundColor: bg, overflow: "hidden" }, stylesFor[k]],
-        children: [
-          isDynamic && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: styles58.measureCopy, onLayout: makeOnMeasure(k), children: content }),
-          scroll ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            import_react_native_reanimated14.default.ScrollView,
-            {
-              ref: innerScrollRef,
-              style: styles58.innerScroll,
-              showsVerticalScrollIndicator: false,
-              scrollEventThrottle: 16,
-              onScroll,
-              children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native_reanimated14.default.View, { style: fadeFor[k], children: content })
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native_reanimated14.default.View, { style: styles58.sectionContent, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native_reanimated14.default.View, { style: fadeFor[k], children: content }) })
-        ]
-      },
-      k
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react_native63.View, { style: [styles58.colBlock, { backgroundColor: bg, height }], children: [
+      isDynamic && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        import_react_native63.View,
+        {
+          pointerEvents: "none",
+          style: styles58.measureOuter,
+          onLayout: makeOnMeasure(k),
+          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: styles58.measureCopy, children: content })
+        }
+      ),
+      scroll ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        import_react_native63.ScrollView,
+        {
+          ref: innerScrollRef,
+          style: styles58.innerScroll,
+          showsVerticalScrollIndicator: false,
+          children: content
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: styles58.sectionContent, children: content })
+    ] }, k);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AppNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react_native63.View, { style: [styles58.root, { backgroundColor: pageBg }], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AppLayoutDebugContext.Provider, { value: { snapshot }, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AppNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react_native63.View, { style: [styles58.root, { backgroundColor: pageBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-      import_react_native_reanimated14.default.ScrollView,
+      import_react_native63.ScrollView,
       {
         ref: scrollRef,
         style: styles58.pageScroll,
         contentContainerStyle: [styles58.pageContent, { backgroundColor: pageBg }],
         scrollEnabled: !!state.pageScroll,
         showsVerticalScrollIndicator: false,
-        scrollEventThrottle: 16,
-        onScroll,
         children: [
           renderSection("top"),
           showTopDivisor && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Divisor, { position: "top", handle: currentRoute.state === "top" }),
@@ -7607,7 +7617,7 @@ function AppLayout({
       }
     ),
     showBackButton && canGoBack && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native63.View, { style: styles58.backBar, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Button, { variant: "secondary", size: "sm", label: "\u2190 Volver", onPress: back }) })
-  ] }) });
+  ] }) }) });
 }
 var styles58 = import_react_native63.StyleSheet.create({
   root: {
@@ -7623,7 +7633,7 @@ var styles58 = import_react_native63.StyleSheet.create({
     width: "100%",
     position: "relative"
   },
-  measureCopy: {
+  measureOuter: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -7631,6 +7641,9 @@ var styles58 = import_react_native63.StyleSheet.create({
     opacity: 0,
     zIndex: -1
   },
+  measureCopy: {
+    width: "100%"
+  },
   sectionContent: {
     flex: 1
   },
@@ -7771,6 +7784,7 @@ var import_antonella_theme59 = require("@william-callao/antonella-theme");
   resolveComposition,
   resolveTransition,
   updateNode,
+  useAppLayoutDebug,
   useAppNavigation,
   useSheetLayout,
   useToast

package/package.json

@@ -1,33 +1,33 @@
-{
-  "name": "@william-callao/antonella-ui",
-  "version": "1.0.1",
-  "description": "Componentes UI de Antonella.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "react-native": "dist/index.js",
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "@william-callao/antonella-theme": "^1.0.0",
-    "@shopify/react-native-skia": "2.2.12",
-    "expo-linear-gradient": "^57.0.1",
-    "lucide-react-native": "^0.517.0",
-    "react-native-svg": "^15.12.1"
-  },
-  "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.81.0",
-    "react-native-keyboard-controller": "1.18.5",
-    "react-native-reanimated": ">=4.0.0",
-    "react-native-safe-area-context": "^5.6.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit"
-  }
-}
+{
+  "name": "@william-callao/antonella-ui",
+  "version": "1.0.2",
+  "description": "Componentes UI de Antonella.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@william-callao/antonella-theme": "^1.0.0",
+    "@shopify/react-native-skia": "2.2.12",
+    "expo-linear-gradient": "^57.0.1",
+    "lucide-react-native": "^0.517.0",
+    "react-native-svg": "^15.12.1"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-keyboard-controller": ">=1.18.5",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": "^5.6.0"
+  }
+}