@william-callao/antonella-ui 1.0.0 → 1.0.2

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
@@ -237,7 +238,9 @@ var iconMap = {
   file: import_lucide_react_native.File,
   loader: import_lucide_react_native.LoaderCircle,
   inbox: import_lucide_react_native.Inbox,
-  "triangle-alert": import_lucide_react_native.TriangleAlert
+  "triangle-alert": import_lucide_react_native.TriangleAlert,
+  eye: import_lucide_react_native.Eye,
+  "eye-off": import_lucide_react_native.EyeOff
 };
 var STROKE_WIDTH = 2.25;
 function Icon({ name, size = 20, color, style, testID }) {
@@ -374,28 +377,31 @@ function Button({
   size = "md",
   style,
   disabled,
+  loading = false,
   android_ripple,
   ...rest
 }) {
   const defaultRipple = android_ripple ?? {
     color: variant === "primary" || variant === "danger" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.08)"
   };
+  const isDisabled = disabled === true || loading;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react_native5.Pressable,
     {
       accessibilityRole: "button",
-      disabled,
-      android_ripple: disabled ? void 0 : defaultRipple,
+      accessibilityState: { disabled: isDisabled, busy: loading },
+      disabled: isDisabled,
+      android_ripple: isDisabled ? void 0 : defaultRipple,
       style: ({ pressed }) => [
         styles4.base,
         sizeStyles[size],
         variantStyles[variant],
-        pressed && !disabled && styles4.pressed,
+        pressed && !isDisabled && styles4.pressed,
         disabled && styles4.disabled,
         style
       ],
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.ActivityIndicator, { color: labelColors[variant], size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_native5.Text,
         {
           style: [
@@ -412,7 +418,7 @@ function Button({
 }
 var styles4 = import_react_native5.StyleSheet.create({
   base: {
-    borderRadius: 10,
+    borderRadius: 999,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -423,9 +429,9 @@ var styles4 = import_react_native5.StyleSheet.create({
   labelDisabled: { opacity: 0.6 }
 });
 var sizeStyles = import_react_native5.StyleSheet.create({
-  sm: { paddingVertical: 6, paddingHorizontal: 12 },
-  md: { paddingVertical: 10, paddingHorizontal: 16 },
-  lg: { paddingVertical: 14, paddingHorizontal: 20 }
+  sm: { height: 36, paddingHorizontal: 12 },
+  md: { height: 44, paddingHorizontal: 16 },
+  lg: { height: 54, paddingHorizontal: 20 }
 });
 var variantStyles = import_react_native5.StyleSheet.create({
   primary: { backgroundColor: import_antonella_theme5.palette.primary },
@@ -1027,7 +1033,8 @@ function HeaderBar({
   description,
   style = "DEFAULT" /* DEFAULT */,
   onMenuPress,
-  menuIcon = "menu"
+  menuIcon = "menu",
+  accessibilityLabel = "Abrir men\xFA"
 }) {
   const c = STYLE_COLORS3[style];
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native14.View, { style: styles13.container, children: [
@@ -1041,7 +1048,7 @@ function HeaderBar({
             { backgroundColor: pressed ? c.buttonPressedBg : c.buttonBg }
           ],
           accessibilityRole: "button",
-          accessibilityLabel: "Abrir men\xFA",
+          accessibilityLabel,
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: menuIcon, size: 22, color: c.iconColor })
         }
       ),
@@ -1439,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;
@@ -1453,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) {
@@ -1518,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 })
+                }
+              )
+            ]
+          }
+        ) })
       ] })
     }
   );
@@ -1575,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
   }
 });
 
@@ -1596,12 +1620,14 @@ function CardStackSheet({
   dismissible = true,
   children,
   contentStyle,
-  snapPoints
+  snapPoints,
+  areaColor
 }) {
   const { height: screenHeight } = (0, import_react_native21.useWindowDimensions)();
   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;
@@ -1616,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) {
@@ -1691,8 +1724,12 @@ function CardStackSheet({
               {
                 showsVerticalScrollIndicator: false,
                 keyboardShouldPersistTaps: "handled",
-                contentContainerStyle: [styles19.content, contentStyle],
-                children
+                contentContainerStyle: [
+                  styles19.content,
+                  contentStyle,
+                  areaColor ? { backgroundColor: areaColor } : void 0
+                ],
+                children: contentReady ? children : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: styles19.deferredPlaceholder })
               }
             ) })
           }
@@ -1721,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
   }
 });
 
@@ -1824,12 +1864,12 @@ function Toast({
     {
       style: [
         styles21.toast,
-        { backgroundColor: c.bg, paddingTop: topInset + BASE_VPAD },
+        { backgroundColor: c.bg, marginTop: (topInset || 0) + BASE_VPAD },
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: TONE_ICONS[tone], size: 18, color: c.content }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { variant: import_antonella_theme22.TextType.Caption, color: c.content, style: styles21.message, children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: TONE_ICONS[tone], size: 20, color: c.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { variant: import_antonella_theme22.TextType.Body, color: c.content, style: styles21.message, children: message }),
         onClose ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_react_native23.Pressable,
           {
@@ -1838,7 +1878,7 @@ function Toast({
             accessibilityRole: "button",
             accessibilityLabel: "Cerrar aviso",
             style: ({ pressed }) => [styles21.close, pressed && styles21.closePressed],
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 15, color: c.content })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 16, color: c.content })
           }
         ) : null
       ]
@@ -1863,14 +1903,14 @@ var STYLE_COLORS6 = {
 };
 var styles21 = import_react_native23.StyleSheet.create({
   toast: {
-    width: "100%",
+    minHeight: 52,
     flexDirection: "row",
     alignItems: "center",
     gap: import_antonella_theme22.space.space2,
-    minHeight: 52,
-    borderRadius: 0,
-    paddingVertical: import_antonella_theme22.space.space3 + 2,
+    borderRadius: 16,
+    paddingVertical: import_antonella_theme22.space.space3,
     paddingHorizontal: import_antonella_theme22.space.space4,
+    marginHorizontal: import_antonella_theme22.space.space4,
     shadowColor: "#000000",
     shadowOpacity: 0.25,
     shadowRadius: 10,
@@ -5078,68 +5118,163 @@ var styles39 = import_react_native43.StyleSheet.create({
 });
 
 // src/components/Input.tsx
+var import_react20 = require("react");
 var import_react_native44 = require("react-native");
 var import_antonella_theme41 = require("@william-callao/antonella-theme");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function Input({ style, placeholderTextColor, icon, ...rest }) {
-  if (icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native44.View, { style: [styles40.inputContainer, style], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: icon, size: 18, color: import_antonella_theme41.text.secondary, style: styles40.icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native44.TextInput,
-        {
-          placeholderTextColor: placeholderTextColor ?? import_antonella_theme41.appInput.placeholder,
-          style: styles40.inputFlex,
-          ...rest
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var INPUT_RADIUS = 16;
+function Input({
+  style,
+  inputStyle,
+  placeholderTextColor,
+  icon,
+  showToggle,
+  error,
+  secureTextEntry = false,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = (0, import_react20.useState)(false);
+  const [visible, setVisible] = (0, import_react20.useState)(false);
+  const isSecure = secureTextEntry === true;
+  const effectiveSecure = isSecure && !visible;
+  const showEye = showToggle === true && isSecure;
+  const hasDecorations = icon != null || showEye;
+  const hasError = Boolean(error);
+  const borderColor = hasError ? import_antonella_theme41.appInput.error : focused ? import_antonella_theme41.text.secondary : import_antonella_theme41.appInputCard.border;
+  const toggleVisible = () => setVisible((prev) => !prev);
+  const field = hasDecorations ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_react_native44.View,
+    {
+      style: [
+        styles40.container,
+        { borderColor },
+        showEye ? styles40.eyeContainer : null,
+        style
+      ],
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: icon, size: 18, color: import_antonella_theme41.text.secondary, style: styles40.sideIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react_native44.TextInput,
+          {
+            placeholderTextColor: placeholderTextColor ?? import_antonella_theme41.appInput.placeholder,
+            style: [styles40.field, inputStyle],
+            secureTextEntry: effectiveSecure,
+            onFocus: (e) => {
+              setFocused(true);
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              onBlur?.(e);
+            },
+            ...rest
+          }
+        ),
+        showEye ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react_native44.Pressable,
+          {
+            onPress: toggleVisible,
+            hitSlop: 8,
+            style: styles40.toggle,
+            accessibilityRole: "button",
+            accessibilityLabel: effectiveSecure ? "Mostrar contrase\xF1a" : "Ocultar contrase\xF1a",
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              Icon,
+              {
+                name: effectiveSecure ? "eye" : "eye-off",
+                size: 20,
+                color: import_antonella_theme41.text.secondary
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_react_native44.TextInput,
     {
       placeholderTextColor: placeholderTextColor ?? import_antonella_theme41.appInput.placeholder,
-      style: [styles40.input, style],
+      style: [
+        styles40.input,
+        { borderColor },
+        inputStyle
+      ],
+      secureTextEntry,
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        onBlur?.(e);
+      },
       ...rest
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native44.View, { style: styles40.wrapper, children: [
+    field,
+    hasError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { variant: import_antonella_theme41.TextType.Caption, color: import_antonella_theme41.appInput.error, style: styles40.error, children: error }) : null
+  ] });
 }
 var styles40 = import_react_native44.StyleSheet.create({
   input: {
-    borderRadius: 10,
-    paddingHorizontal: import_antonella_theme41.spacing.md,
+    borderWidth: 1,
+    borderColor: import_antonella_theme41.appInputCard.border,
+    borderRadius: INPUT_RADIUS,
+    paddingLeft: import_antonella_theme41.space.space5,
+    paddingRight: import_antonella_theme41.spacing.xl,
     paddingVertical: import_antonella_theme41.spacing.sm,
     fontSize: import_antonella_theme41.texts.caption.fontSize,
     lineHeight: import_antonella_theme41.texts.caption.lineHeight,
     color: import_antonella_theme41.appInput.text,
     backgroundColor: import_antonella_theme41.appInput.background
   },
-  inputContainer: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 10,
-    paddingHorizontal: import_antonella_theme41.spacing.md,
-    backgroundColor: import_antonella_theme41.appInput.background
+    borderWidth: 1,
+    borderColor: import_antonella_theme41.appInputCard.border,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: import_antonella_theme41.spacing.lg,
+    backgroundColor: import_antonella_theme41.appInput.background,
+    overflow: "hidden"
   },
-  icon: {
-    marginRight: import_antonella_theme41.spacing.sm
+  eyeContainer: {
+    paddingRight: 0
   },
-  inputFlex: {
+  field: {
     flex: 1,
     paddingVertical: import_antonella_theme41.spacing.sm,
     fontSize: import_antonella_theme41.texts.caption.fontSize,
     lineHeight: import_antonella_theme41.texts.caption.lineHeight,
     color: import_antonella_theme41.appInput.text
+  },
+  sideIcon: {
+    marginRight: import_antonella_theme41.spacing.sm
+  },
+  toggle: {
+    marginLeft: import_antonella_theme41.spacing.xs,
+    paddingRight: import_antonella_theme41.spacing.lg,
+    paddingVertical: import_antonella_theme41.spacing.xs,
+    justifyContent: "center"
+  },
+  wrapper: {
+    alignItems: "stretch"
+  },
+  error: {
+    marginTop: import_antonella_theme41.spacing.xs
   }
 });
 
 // src/components/LayoutRow.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_native45 = require("react-native");
 var import_antonella_theme42 = require("@william-callao/antonella-theme");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var LayoutRowContext = (0, import_react20.createContext)({ debug: false, isSmall: false });
-var useLayoutRowContext = () => (0, import_react20.useContext)(LayoutRowContext);
+var LayoutRowContext = (0, import_react21.createContext)({ debug: false, isSmall: false });
+var useLayoutRowContext = () => (0, import_react21.useContext)(LayoutRowContext);
 var debugColors = ["#FF6B6B", "#4ECDC4"];
 var BREAKPOINT_SMALL = 600;
 function LayoutRowFirst({ size = import_antonella_theme42.LayoutRowSize.EXPAND, scroll, children }) {
@@ -5198,12 +5333,12 @@ var styles41 = {
 };
 
 // src/components/LayoutColumn.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_native46 = require("react-native");
 var import_antonella_theme43 = require("@william-callao/antonella-theme");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var LayoutColumnContext = (0, import_react21.createContext)({ debug: false });
-var useLayoutColumnContext = () => (0, import_react21.useContext)(LayoutColumnContext);
+var LayoutColumnContext = (0, import_react22.createContext)({ debug: false });
+var useLayoutColumnContext = () => (0, import_react22.useContext)(LayoutColumnContext);
 var debugColors2 = ["#FF6B6B", "#4ECDC4"];
 function LayoutColumnFirst({ size = import_antonella_theme43.LayoutColumnSize.EXPAND, scroll, children }) {
   const { debug } = useLayoutColumnContext();
@@ -5308,7 +5443,7 @@ var styles42 = import_react_native47.StyleSheet.create({
 });
 
 // src/components/ToolsCard.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_react_native48 = require("react-native");
 var import_antonella_theme45 = require("@william-callao/antonella-theme");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -5318,7 +5453,7 @@ function ToolsCard({ tools, style }) {
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { name: tool.icon, size: 16, color: import_antonella_theme45.card.text.primary }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { variant: import_antonella_theme45.TextType.BodyMedium, color: import_antonella_theme45.card.text.primary, numberOfLines: 1, children: tool.label })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react22.default.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react23.default.Fragment, { children: [
       index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native48.View, { style: styles43.separator }) : null,
       tool.onPress ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         import_react_native48.Pressable,
@@ -5362,7 +5497,7 @@ var styles43 = import_react_native48.StyleSheet.create({
 });
 
 // src/components/TreeEditor.tsx
-var import_react23 = require("react");
+var import_react24 = __toESM(require("react"));
 var import_react_native49 = require("react-native");
 var import_antonella_theme46 = require("@william-callao/antonella-theme");
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -5463,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;
@@ -5501,21 +5628,9 @@ var CARD_MARGIN = 12;
 var CARD_PADDING_H = import_antonella_theme46.space.space4;
 var CARD_RADIUS3 = 24;
 var LINE_X = 10;
-var EXPAND_DURATION = 220;
 var EXPAND_FADE = 180;
-var COLLAPSE_FADE = 120;
 var NODE_ICON_SIZE = 18;
-function buildRows(nodes, depth, collapsed, out) {
-  nodes.forEach((node) => {
-    out.push({ node, depth });
-    const isCollapsed = !!collapsed[node.id];
-    if (node.children.length > 0 && !isCollapsed) {
-      buildRows(node.children, depth + 1, collapsed, out);
-    }
-  });
-  return out;
-}
-function NodeGutter({
+var NodeGutter = import_react24.default.memo(function NodeGutter2({
   depth,
   lineColor,
   terminal
@@ -5545,8 +5660,9 @@ function NodeGutter({
     );
   }
   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,
     {
@@ -5554,55 +5670,48 @@ 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 TreeNodeItem({
+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 subtreeRows = [];
-  buildRows(node.children, depth + 1, ctx.collapsed, subtreeRows);
-  const expandedHeight = (0, import_react23.useMemo)(
-    () => subtreeRows.length * (ROW_HEIGHT + CARD_MARGIN) + 2,
-    [subtreeRows.length]
-  );
-  const heightAnim = (0, import_react23.useRef)(new import_react_native49.Animated.Value(isCollapsed ? 0 : expandedHeight)).current;
-  const contentOpacity = (0, import_react23.useRef)(new import_react_native49.Animated.Value(isCollapsed ? 0 : 1)).current;
-  const measured = (0, import_react23.useRef)(false);
-  (0, import_react23.useEffect)(() => {
-    if (!measured.current) {
-      measured.current = true;
-      heightAnim.setValue(isCollapsed ? 0 : expandedHeight);
-      contentOpacity.setValue(isCollapsed ? 0 : 1);
-      return;
-    }
-    const toHeight = isCollapsed ? 0 : expandedHeight;
-    const animation = import_react_native49.Animated.parallel([
-      import_react_native49.Animated.timing(heightAnim, {
-        toValue: toHeight,
-        duration: EXPAND_DURATION,
-        easing: import_react_native49.Easing.out(import_react_native49.Easing.cubic),
-        useNativeDriver: false
-      }),
-      import_react_native49.Animated.timing(contentOpacity, {
-        toValue: isCollapsed ? 0 : 1,
-        duration: isCollapsed ? COLLAPSE_FADE : EXPAND_FADE,
-        useNativeDriver: false
-      })
-    ]);
+  const contentOpacity = (0, import_react24.useRef)(new import_react_native49.Animated.Value(0)).current;
+  (0, import_react24.useEffect)(() => {
+    if (isCollapsed) return;
+    const animation = import_react_native49.Animated.timing(contentOpacity, {
+      toValue: 1,
+      duration: EXPAND_FADE,
+      easing: import_react_native49.Easing.out(import_react_native49.Easing.quad),
+      useNativeDriver: true
+    });
     animation.start();
     return () => animation.stop();
-  }, [isCollapsed, expandedHeight]);
+  }, [isCollapsed, node.id, node.name, contentOpacity]);
   const defaultContent = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: styles44.textBlock, children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: styles44.titleRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -5689,20 +5798,66 @@ function TreeNodeItem({
         }
       ) : null
     ] }),
-    hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.Animated.View, { style: [styles44.subtree, { height: heightAnim }], children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.Animated.View, { style: { opacity: contentOpacity }, children: renderForest(ctx, node.children, depth + 1, node.name) }) }) : null
+    hasChildren && !isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.Animated.View, { style: [styles44.subtreeFade, { opacity: contentOpacity }], children: renderForest(ctx, node.children, depth + 1, node.name) }) : null
   ] });
-}
+});
 function TreeEditor({ value, onChange, mode = "view", variant = "default", collapsed: collapsedProp, onCollapsedChange, rootLabel = "Agregar ra\xEDz", renderNode, onRequestAdd, onRequestEdit, onRequestDelete, style }) {
-  const t0 = performance.now();
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react23.useState)({});
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react24.useState)({});
   const source = collapsedProp ?? internalCollapsed;
   const needsImplicitInit = value.length > 0 && Object.keys(source).length === 0;
-  const implicitInit = (0, import_react23.useMemo)(
+  const implicitInit = (0, import_react24.useMemo)(
     () => needsImplicitInit ? buildInitialCollapsed(value) : null,
     [needsImplicitInit, value]
   );
   const collapsed = implicitInit ?? source;
-  (0, import_react23.useEffect)(() => {
+  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) {
       onCollapsedChange?.(implicitInit);
@@ -5712,67 +5867,66 @@ function TreeEditor({ value, onChange, mode = "view", variant = "default", colla
   }, [implicitInit]);
   const vt = VARIANT_TOKENS[variant];
   const isEdit = mode === "edit";
-  const ctx = {
-    isEdit,
-    collapsed,
-    onToggle: toggleCollapse,
-    onOpenActions: (nodeId) => {
-      const node = findNode(value, nodeId);
-      if (node) onRequestEdit?.(node);
-    },
-    renderNode,
-    vt
-  };
-  function toggleCollapse(id) {
-    const collapsing = !collapsed[id];
+  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 = { ...collapsed, [id]: true };
-      const node = findNode(value, id);
+      next = { ...collapseMap, [id]: true };
+      const node = findNode(tree, 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);
-          }
-        }
-      }
+      next = { ...collapseMap, [id]: false };
     }
-    if (collapsedProp != null) {
-      onCollapsedChange?.(next);
+    if (controlledRef.current) {
+      onCollapsedChangeRef.current?.(next);
     } else {
       setInternalCollapsed(next);
     }
-  }
-  console.log("[TreeEditor] render", Math.round(performance.now() - t0), "ms", {
-    valueLen: value.length,
-    mode,
-    variant,
-    collapsedKeys: Object.keys(collapsed).length
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: [styles44.container, { backgroundColor: vt.containerBg }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { children: renderForest(ctx, value, 0) }),
-    isEdit ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-      import_react_native49.Pressable,
-      {
-        onPress: () => onRequestAdd?.(null),
-        style: ({ pressed }) => [
-          styles44.addRoot,
-          pressed && { backgroundColor: vt.pressedBg }
-        ],
-        accessibilityRole: "button",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: [styles44.addChip, { borderColor: vt.addRootText }], children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: "add", size: 13, color: vt.addRootText }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: import_antonella_theme46.TextType.BodyMedium, color: vt.addRootText, children: rootLabel })
-        ]
-      }
-    ) : null
-  ] });
+  }, []);
+  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,
+      onToggle: toggleCollapse,
+      onOpenActions,
+      renderNode,
+      vt,
+      getCollapsed,
+      getVersion
+    }),
+    [isEdit, toggleCollapse, onOpenActions, renderNode, vt, getCollapsed, getVersion]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    import_react_native49.View,
+    {
+      style: [styles44.container, { backgroundColor: vt.containerBg }, style],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { children: renderForest(ctx, value, 0) }),
+        isEdit ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          import_react_native49.Pressable,
+          {
+            onPress: () => onRequestAdd?.(null),
+            style: ({ pressed }) => [
+              styles44.addRoot,
+              pressed && { backgroundColor: vt.pressedBg }
+            ],
+            accessibilityRole: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: [styles44.addChip, { borderColor: vt.addRootText }], children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: "add", size: 13, color: vt.addRootText }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: import_antonella_theme46.TextType.BodyMedium, color: vt.addRootText, children: rootLabel })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
 }
 var styles44 = import_react_native49.StyleSheet.create({
   container: {
@@ -5848,8 +6002,9 @@ var styles44 = import_react_native49.StyleSheet.create({
     marginBottom: CARD_MARGIN,
     borderRadius: import_antonella_theme46.radius.sm
   },
-  subtree: {
-    overflow: "hidden"
+  subtreeFade: {
+    // Fade puro (native driver): sin medir/animar altura, evita el layout en
+    // cascada al expandir/colapsar subárboles anidados.
   },
   addChip: {
     width: 22,
@@ -6084,15 +6239,15 @@ var styles46 = import_react_native51.StyleSheet.create({
 });
 
 // src/components/card-form/AppFormCard.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_react_native52 = require("react-native");
 var import_antonella_theme48 = require("@william-callao/antonella-theme");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function AppFormCard({ children, labelWidth, style }) {
-  const items = import_react24.default.Children.toArray(children).filter((child) => import_react24.default.isValidElement(child)).map((child) => child);
+  const items = import_react25.default.Children.toArray(children).filter((child) => import_react25.default.isValidElement(child)).map((child) => child);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native52.View, { style: [styles47.container, style], children: items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native52.View, { style: styles47.row, children: [
     index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native52.View, { style: styles47.divider }) : null,
-    import_react24.default.cloneElement(child, {
+    import_react25.default.cloneElement(child, {
       ...labelWidth != null ? { labelWidth } : {}
     })
   ] }, index)) });
@@ -6117,7 +6272,7 @@ var styles47 = import_react_native52.StyleSheet.create({
 });
 
 // src/components/card-form/AppTextInput.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_native53 = require("react-native");
 var import_antonella_theme49 = require("@william-callao/antonella-theme");
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -6133,8 +6288,8 @@ function AppTextInput({
   maxLength,
   editable = true
 }) {
-  const inputRef = (0, import_react25.useRef)(null);
-  const [inputHeight, setInputHeight] = (0, import_react25.useState)(void 0);
+  const inputRef = (0, import_react26.useRef)(null);
+  const [inputHeight, setInputHeight] = (0, import_react26.useState)(void 0);
   const focus = () => {
     if (editable) inputRef.current?.focus();
   };
@@ -6232,7 +6387,7 @@ var styles48 = import_react_native53.StyleSheet.create({
 });
 
 // src/components/card-form/AppTextArea.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_native54 = require("react-native");
 var import_antonella_theme50 = require("@william-callao/antonella-theme");
 var import_jsx_runtime56 = require("react/jsx-runtime");
@@ -6248,8 +6403,8 @@ function AppTextArea({
   maxLength,
   editable = true
 }) {
-  const inputRef = (0, import_react26.useRef)(null);
-  const [inputHeight, setInputHeight] = (0, import_react26.useState)(void 0);
+  const inputRef = (0, import_react27.useRef)(null);
+  const [inputHeight, setInputHeight] = (0, import_react27.useState)(void 0);
   const focus = () => {
     if (editable) inputRef.current?.focus();
   };
@@ -6337,7 +6492,7 @@ var styles49 = import_react_native54.StyleSheet.create({
 });
 
 // src/components/card-form/AppSelector.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_native55 = require("react-native");
 var import_antonella_theme51 = require("@william-callao/antonella-theme");
 var import_jsx_runtime57 = require("react/jsx-runtime");
@@ -6353,17 +6508,17 @@ function AppSelector({
   placeholder = "Seleccionar",
   disabled = false
 }) {
-  const [open, setOpen] = (0, import_react27.useState)(false);
-  const [contentHeight, setContentHeight] = (0, import_react27.useState)(0);
-  const chevron = (0, import_react27.useRef)(new import_react_native55.Animated.Value(0)).current;
-  const height = (0, import_react27.useRef)(new import_react_native55.Animated.Value(0)).current;
-  const contentOpacity = (0, import_react27.useRef)(new import_react_native55.Animated.Value(0)).current;
+  const [open, setOpen] = (0, import_react28.useState)(false);
+  const [contentHeight, setContentHeight] = (0, import_react28.useState)(0);
+  const chevron = (0, import_react28.useRef)(new import_react_native55.Animated.Value(0)).current;
+  const height = (0, import_react28.useRef)(new import_react_native55.Animated.Value(0)).current;
+  const contentOpacity = (0, import_react28.useRef)(new import_react_native55.Animated.Value(0)).current;
   const selected = options.find((o) => o.value === value);
-  const chevronRotate = (0, import_react27.useMemo)(
+  const chevronRotate = (0, import_react28.useMemo)(
     () => chevron.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }),
     [chevron]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     import_react_native55.Animated.timing(chevron, {
       toValue: open ? 1 : 0,
       duration: 180,
@@ -6371,7 +6526,7 @@ function AppSelector({
       useNativeDriver: false
     }).start();
   }, [open, chevron]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const animation = import_react_native55.Animated.parallel([
       import_react_native55.Animated.timing(height, {
         toValue: open ? Math.max(contentHeight, options.length * OPTION_ROW_HEIGHT) : 0,
@@ -6506,7 +6661,7 @@ var styles50 = import_react_native55.StyleSheet.create({
 });
 
 // src/components/card-form/AppToggle.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_native56 = require("react-native");
 var import_antonella_theme52 = require("@william-callao/antonella-theme");
 var import_jsx_runtime58 = require("react/jsx-runtime");
@@ -6522,9 +6677,9 @@ function AppToggle({
   onValueChange,
   disabled = false
 }) {
-  const thumbX = (0, import_react28.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
-  const trackColor = (0, import_react28.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
-  (0, import_react28.useEffect)(() => {
+  const thumbX = (0, import_react29.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
+  const trackColor = (0, import_react29.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
+  (0, import_react29.useEffect)(() => {
     import_react_native56.Animated.parallel([
       import_react_native56.Animated.timing(thumbX, {
         toValue: value ? 1 : 0,
@@ -6725,13 +6880,13 @@ var styles53 = import_react_native58.StyleSheet.create({
 });
 
 // src/layout/SheetLayout.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_native60 = require("react-native");
 var import_react_native_reanimated13 = __toESM(require("react-native-reanimated"));
 var import_antonella_theme55 = require("@william-callao/antonella-theme");
 
 // src/layout/SheetSlot.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_native59 = require("react-native");
 var import_react_native_reanimated12 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context10 = require("react-native-safe-area-context");
@@ -6759,7 +6914,7 @@ function SheetSlot({
   const fixedH = route?.options?.fixedHeaderHeight;
   const headerBg = route?.headerBackgroundColor ?? DEFAULT_HEADER_BG;
   const bodyBg = route?.bodyBackgroundColor ?? DEFAULT_BODY_BG;
-  const [measuredH, setMeasuredH] = (0, import_react29.useState)(fixedH ?? 0);
+  const [measuredH, setMeasuredH] = (0, import_react30.useState)(fixedH ?? 0);
   const headerHAnim = (0, import_react_native_reanimated12.useSharedValue)(fixedH ?? 0);
   const scrollY = (0, import_react_native_reanimated12.useSharedValue)(0);
   const contentFade = (0, import_react_native_reanimated12.useSharedValue)(1);
@@ -6769,7 +6924,7 @@ function SheetSlot({
     setMeasuredH(h);
     headerHAnim.value = (0, import_react_native_reanimated12.withTiming)(h, { duration: 280 });
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     scrollY.value = (0, import_react_native_reanimated12.withTiming)(0, { duration: 250 });
     contentFade.value = 0;
     contentFade.value = (0, import_react_native_reanimated12.withTiming)(1, { duration: 240 });
@@ -6966,12 +7121,12 @@ var _semantic8 = (0, import_antonella_theme55.resolveSemantic)(import_antonella_
 var HEADER_BG = _semantic8.default.bg.default;
 var BODY_BG = _semantic8.darkness.bg.default;
 var DURATION = 340;
-var SheetLayoutContext = (0, import_react30.createContext)({
+var SheetLayoutContext = (0, import_react31.createContext)({
   change: () => {
   }
 });
 function useSheetLayout() {
-  return (0, import_react30.useContext)(SheetLayoutContext);
+  return (0, import_react31.useContext)(SheetLayoutContext);
 }
 function resolveBaseColor(key) {
   return key === "header" ? HEADER_BG : BODY_BG;
@@ -6982,14 +7137,14 @@ function SheetLayout({
   onRequestChange,
   style
 }) {
-  const routeMap = (0, import_react30.useMemo)(() => {
+  const routeMap = (0, import_react31.useMemo)(() => {
     const m = {};
     for (const r of routes) m[r.key] = r;
     return m;
   }, [routes]);
   const activeRoute = routeMap[activeKey];
   const comp = activeRoute ? resolveComposition(activeRoute.kind) : { host: "base", baseColor: "header" };
-  const [slots, setSlots] = (0, import_react30.useState)(() => {
+  const [slots, setSlots] = (0, import_react31.useState)(() => {
     const init = {
       base: null,
       top: null,
@@ -7009,8 +7164,8 @@ function SheetLayout({
   const baseFrom = (0, import_react_native_reanimated13.useSharedValue)(HEADER_BG);
   const baseTo = (0, import_react_native_reanimated13.useSharedValue)(HEADER_BG);
   const baseProg = (0, import_react_native_reanimated13.useSharedValue)(1);
-  const prevKey = (0, import_react30.useRef)(activeKey);
-  (0, import_react30.useEffect)(() => {
+  const prevKey = (0, import_react31.useRef)(activeKey);
+  (0, import_react31.useEffect)(() => {
     if (activeRoute) {
       visBySide[comp.host].value = (0, import_react_native_reanimated13.withTiming)(1, { duration: DURATION });
     }
@@ -7019,7 +7174,7 @@ function SheetLayout({
     baseTo.value = c;
     baseProg.value = 1;
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (activeKey === prevKey.current) return;
     const toRoute = activeRoute;
     if (!toRoute) return;
@@ -7160,10 +7315,9 @@ var styles56 = import_react_native61.StyleSheet.create({
 });
 
 // src/layout/AppLayout.tsx
-var import_react31 = require("react");
+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");
@@ -7263,25 +7417,30 @@ var DEFAULT_COLORS = {
   mid: DEFAULT_BG2,
   bottom: DARK_BG
 };
-var COLLAPSE_DISTANCE = 80;
-var TRANSITION = 320;
-var AppNavigationContext = (0, import_react31.createContext)(null);
+var AppNavigationContext = (0, import_react32.createContext)(null);
 function useAppNavigation() {
-  const ctx = (0, import_react31.useContext)(AppNavigationContext);
+  const ctx = (0, import_react32.useContext)(AppNavigationContext);
   if (!ctx) {
     throw new Error("useAppNavigation debe usarse dentro de <AppLayout>");
   }
   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_react31.useState)([initialRoute]);
-  const [prevRoute, setPrevRoute] = (0, import_react31.useState)(null);
-  (0, import_react31.useEffect)(() => {
+  const [stack, setStack] = (0, import_react32.useState)([initialRoute]);
+  const [prevRoute, setPrevRoute] = (0, import_react32.useState)(null);
+  (0, import_react32.useEffect)(() => {
     setStack((s) => {
       if (s[0]?.name !== initialRoute.name) {
         return [initialRoute];
@@ -7289,18 +7448,18 @@ function AppLayout({
       return s;
     });
   }, [initialRoute.name]);
-  const navigate = (0, import_react31.useCallback)((route) => {
+  const navigate = (0, import_react32.useCallback)((route) => {
     setStack((s) => [...s, route]);
   }, []);
-  const replace = (0, import_react31.useCallback)((route) => {
+  const replace = (0, import_react32.useCallback)((route) => {
     setStack((s) => [...s.slice(0, -1), route]);
   }, []);
-  const back = (0, import_react31.useCallback)(() => {
+  const back = (0, import_react32.useCallback)(() => {
     setStack((s) => s.length > 1 ? s.slice(0, -1) : s);
   }, []);
   const canGoBack = stack.length > 1;
   const currentRoute = stack[stack.length - 1];
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const sub = import_react_native63.BackHandler.addEventListener("hardwareBackPress", () => {
       if (canGoBack) {
         back();
@@ -7327,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 scrollRef = (0, import_react31.useRef)(null);
-  const innerScrollRef = (0, import_react31.useRef)(null);
-  const settleTimerRef = (0, import_react31.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 [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 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) {
@@ -7377,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_react31.useLayoutEffect)(() => {
-    if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
-    animating.value = 1;
+  (0, import_react32.useLayoutEffect)(() => {
+    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 snapshot = (0, import_react32.useCallback)(
     () => {
-      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 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;
@@ -7481,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" }),
@@ -7524,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: {
@@ -7540,7 +7633,7 @@ var styles58 = import_react_native63.StyleSheet.create({
     width: "100%",
     position: "relative"
   },
-  measureCopy: {
+  measureOuter: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -7548,6 +7641,9 @@ var styles58 = import_react_native63.StyleSheet.create({
     opacity: 0,
     zIndex: -1
   },
+  measureCopy: {
+    width: "100%"
+  },
   sectionContent: {
     flex: 1
   },
@@ -7688,6 +7784,7 @@ var import_antonella_theme59 = require("@william-callao/antonella-theme");
   resolveComposition,
   resolveTransition,
   updateNode,
+  useAppLayoutDebug,
   useAppNavigation,
   useSheetLayout,
   useToast