@idealyst/mcp-server 1.2.122 → 1.2.124

package/dist/tools/index.cjs

@@ -1118,6 +1118,26 @@ var componentMetadata = {
       "Configure safe areas appropriately"
     ]
   },
+  ScrollView: {
+    category: "layout",
+    description: "Scrollable container for long or overflowing content. Replaces the deprecated `<View scrollable>` pattern. Supports vertical, horizontal, and bidirectional scrolling with scroll event callbacks and imperative scroll controls via ref.",
+    features: [
+      "direction prop: 'vertical' (default) | 'horizontal' | 'both'",
+      "Scroll callbacks: onScroll, onScrollBegin, onScrollEnd, onEndReached (for infinite scroll)",
+      "Imperative ref: scrollTo, scrollToEnd, scrollToStart, getScrollPosition",
+      "Same spacing shorthand props as View: padding, paddingVertical, paddingHorizontal, gap, margin, etc.",
+      "Background, radius, and border variants (same as View)",
+      "showsIndicator, pagingEnabled, bounces, scrollEnabled, keyboardDismissMode props",
+      "contentContainerStyle for styling the inner content wrapper"
+    ],
+    bestPractices: [
+      "Use ScrollView for scrollable content instead of <View scrollable> (deprecated)",
+      "Use onEndReached + onEndReachedThreshold for infinite scroll / load-more patterns",
+      'Use direction="horizontal" for horizontal carousels or galleries',
+      "Use ref with scrollTo/scrollToEnd for programmatic scroll control",
+      "Wrap in a flex:1 container or give explicit height \u2014 ScrollView needs bounded parent height"
+    ]
+  },
   Select: {
     category: "form",
     description: "Dropdown selection component for choosing from a list of options",
@@ -1357,7 +1377,10 @@ var componentAliases = {
   photo: "Image",
   picture: "Image",
   img: "Image",
-  thumbnail: "Image"
+  thumbnail: "Image",
+  scroll: "ScrollView",
+  scrollview: "ScrollView",
+  scrollable: "ScrollView"
 };
 function findComponentName(componentName) {
   if (componentMetadata[componentName]) {
@@ -12968,14 +12991,16 @@ import { Outlet, useNavigator } from '@idealyst/navigation';
 import type { StackLayoutProps } from '@idealyst/navigation';
 import { View, Text, Pressable, Icon, Divider } from '@idealyst/components';
 import type { IconName } from '@idealyst/components';
+import { useTheme } from '@idealyst/theme';
 
 export function AppLayout({ routes, currentPath, options }: StackLayoutProps) {
   const { navigate } = useNavigator();
+  const theme = useTheme();
 
   return (
     <View style={{ flex: 1, flexDirection: 'row' }}>
       {/* Sidebar */}
-      <View style={{ width: 260, borderRightWidth: 1, borderRightColor: '#e0e0e0', backgroundColor: '#fafafa' }}>
+      <View style={{ width: 260, borderRightWidth: 1, borderRightColor: theme.colors.border.primary, backgroundColor: theme.colors.surface.secondary }}>
         {/* Logo / App name */}
         <View style={{ height: 56, justifyContent: 'center', paddingHorizontal: 16 }}>
           <Text typography="h6" weight="bold">{options?.headerTitle || 'My App'}</Text>
@@ -13000,18 +13025,20 @@ export function AppLayout({ routes, currentPath, options }: StackLayoutProps) {
                   paddingVertical: 10,
                   paddingHorizontal: 12,
                   borderRadius: 8,
-                  backgroundColor: isActive ? 'rgba(0,122,255,0.08)' : 'transparent',
+                  backgroundColor: isActive ? theme.intents.primary.light : 'transparent',
                 }}
               >
+                {/* Icon uses EITHER color OR textColor \u2014 never both */}
                 <Icon
                   name={(route.options?.icon as IconName) || 'circle-outline'}
                   size="sm"
-                  color={isActive ? '#007AFF' : '#666'}
+                  color={isActive ? 'primary' : undefined}
                 />
                 <Text
                   typography="body2"
-                  weight={isActive ? 'semibold' : 'regular'}
-                  style={{ color: isActive ? '#007AFF' : '#333' }}
+                  weight={isActive ? 'semibold' : 'normal'}
+                  color={isActive ? undefined : 'secondary'}
+                  style={isActive ? { color: theme.intents.primary.primary } : undefined}
                 >
                   {route.options?.title || route.path}
                 </Text>
@@ -13169,7 +13196,7 @@ export function TabLayout({ routes, currentPath }: TabLayoutProps) {
               {opts?.tabBarLabel && (
                 <Text
                   typography="body2"
-                  weight={isActive ? 'semibold' : 'regular'}
+                  weight={isActive ? 'semibold' : 'normal'}
                   style={{ color: isActive ? '#007AFF' : '#8E8E93' }}
                 >
                   {opts.tabBarLabel}
@@ -13384,7 +13411,7 @@ export function DashboardLayout({ routes, currentPath, options }: StackLayoutPro
                   {!collapsed && (
                     <Text
                       typography="body2"
-                      weight={isActive ? 'semibold' : 'regular'}
+                      weight={isActive ? 'semibold' : 'normal'}
                       style={{ color: isActive ? '#007AFF' : '#333' }}
                     >
                       {route.options?.title || route.path}
@@ -16288,7 +16315,7 @@ These are mistakes agents make repeatedly. Each one causes TypeScript compilatio
 1. **Text** does NOT have \`variant\`, \`intent\`, \`size\`, \`fontSize\`, \`numberOfLines\`, \`ellipsizeMode\`, \`selectable\`, \`textColor\`, or \`onPress\`. Use \`typography\` (\`h1\`\u2013\`h6\`, \`subtitle1\`, \`subtitle2\`, \`body1\`, \`body2\`, \`caption\`), \`weight\` (\`light\`, \`normal\`, \`medium\`, \`semibold\`, \`bold\`), and \`color\` (\`primary\`, \`secondary\`, \`tertiary\`, \`inverse\`). **\`textColor\` is an Icon-only prop** \u2014 Text uses \`color\`. For pressable text, wrap in \`Pressable\` or use \`Button type="text"\`.
 2. **TextInput** does NOT have \`label\`, \`error\`, \`editable\`, \`autoComplete\`, \`keyboardType\`, or \`onChange\`. Compose labels/errors with \`Text\` + \`View\`. Use \`onChangeText\`, \`inputMode\` (\`'text' | 'email' | 'password' | 'number'\` \u2014 NOT \`'decimal'\`, \`'numeric'\`, \`'tel'\`, \`'url'\`), and \`textContentType\`. **TextArea has a DIFFERENT API** \u2014 it DOES support \`label\`, \`error\`, \`rows\`, \`onChange\`, but does NOT have \`onBlur\` or \`onChangeText\`. Always look up TextArea types separately.
 3. **Button/IconButton** \`type\` is \`'contained' | 'outlined' | 'text'\` \u2014 NOT \`'ghost'\`, \`'solid'\`, \`'default'\`. Button has \`leftIcon\` and \`rightIcon\` \u2014 NOT \`icon\`.
-4. **View** does NOT have \`direction\`, \`align\`, or \`onPress\` props. For touch handling, wrap content in \`Pressable\` from \`@idealyst/components\` (NOT from \`react-native\`): \`<Pressable onPress={handlePress}><View>...</View></Pressable>\`. For horizontal layout use \`style={{ flexDirection: 'row' }}\`. View spacing shorthand props (all accept Size: \`xs\`|\`sm\`|\`md\`|\`lg\`|\`xl\`): \`padding\`, \`paddingVertical\`, \`paddingHorizontal\`, \`margin\`, \`marginVertical\`, \`marginHorizontal\`, \`gap\`/\`spacing\`. Do NOT use \`paddingTop\`, \`paddingBottom\`, \`paddingLeft\`, \`paddingRight\`, \`marginTop\`, \`marginBottom\`, \`marginLeft\`, \`marginRight\` as shorthand props \u2014 they do NOT exist and will cause TS2353. For single-side spacing, use \`style={{ paddingTop: 16 }}\`. Other View props: \`background\`, \`radius\`, \`border\`, \`scrollable\`. \`border\` is \`'none' | 'thin' | 'thick'\` \u2014 NOT \`'outline'\`, \`'solid'\`.
+4. **View** does NOT have \`direction\`, \`align\`, \`flex\`, or \`onPress\` props. \`flex={1}\` is NOT a shorthand \u2014 use \`style={{ flex: 1 }}\`. For touch handling, wrap content in \`Pressable\` from \`@idealyst/components\` (NOT from \`react-native\`): \`<Pressable onPress={handlePress}><View>...</View></Pressable>\`. For horizontal layout use \`style={{ flexDirection: 'row' }}\`. View spacing shorthand props (all accept Size: \`xs\`|\`sm\`|\`md\`|\`lg\`|\`xl\`): \`padding\`, \`paddingVertical\`, \`paddingHorizontal\`, \`margin\`, \`marginVertical\`, \`marginHorizontal\`, \`gap\`/\`spacing\`. Do NOT use \`paddingTop\`, \`paddingBottom\`, \`paddingLeft\`, \`paddingRight\`, \`marginTop\`, \`marginBottom\`, \`marginLeft\`, \`marginRight\` as shorthand props \u2014 they do NOT exist and will cause TS2353. For single-side spacing, use \`style={{ paddingTop: 16 }}\`. Other View props: \`background\`, \`radius\`, \`border\`. \`border\` is \`'none' | 'thin' | 'thick'\` \u2014 NOT \`'outline'\`, \`'solid'\`. **For scrollable content, use \`<ScrollView>\` instead of \`<View scrollable>\`** (\`scrollable\` prop is deprecated).
 5. **Badge** \`type\` is \`'filled' | 'outlined' | 'dot'\` \u2014 NOT \`'soft'\`, \`'subtle'\`, \`'solid'\`. **Intent type narrowing (CRITICAL):** TS widens string literals in objects/arrays to \`string\`, which fails \`intent\` props. Rules: (a) Simple ternaries in JSX work fine: \`<Badge intent={cond ? 'success' : 'danger'}>\`. (b) **Do NOT use \`as const\` on ternary expressions** \u2014 \`(cond ? 'a' : 'b') as const\` causes TS1355. (c) **Arrays/objects with intent values MUST use \`as const\`**: \`const items = [{ intent: 'success' as const, label: 'OK' }]\` or \`const items = [{ intent: 'success', label: 'OK' }] as const\`. Without \`as const\`, \`item.intent\` becomes \`string\` which fails. (d) For computed values, use typed variable: \`const intent: Intent = ...;\` (import Intent from @idealyst/theme). This applies to ALL components with intent/type props.
 6. **Avatar** uses \`src\` for image URL, \`fallback\` for initials \u2014 NOT \`name\`, \`initials\`, \`label\`. Shape: \`'circle' | 'square'\`.
 7. **Link** requires a \`to\` prop (path string) \u2014 it's a navigation link, NOT pressable text.
@@ -16297,6 +16324,7 @@ These are mistakes agents make repeatedly. Each one causes TypeScript compilatio
 10. The component is **TextInput**, NOT \`Input\`.
 11. **Card** is a simple container \u2014 there are NO compound components like \`Card.Content\`, \`Card.Header\`, \`Card.Body\`, \`Card.Footer\`, \`Card.Title\`. Just put children directly inside \`<Card>...</Card>\`. **Card does NOT have \`border\`, \`scrollable\`, or \`backgroundColor\` props** (those are View-only). Card styling props: \`type\` (\`'default'|'outlined'|'elevated'|'filled'\`), \`radius\`, \`intent\`, \`background\`, plus spacing (\`padding\`, \`margin\`, \`gap\`). For borders use \`type="outlined"\`.
 12. **Switch** uses \`checked\` and \`onChange\` \u2014 NOT \`value\` and \`onValueChange\` (React Native convention). Also has \`label\`, \`labelPosition\`, \`disabled\`.
+13. **Icon color props are mutually exclusive** \u2014 \`IconProps\` is a discriminated union: use EITHER \`color\` (palette: \`'primary'\`, \`'blue.500'\`) OR \`textColor\` (\`'primary'\`, \`'secondary'\`) \u2014 NEVER both. Passing both (even conditionally like \`color={cond ? x : undefined} textColor={cond ? undefined : y}\`) causes TS2322 because TypeScript cannot resolve the union. Instead: \`<Icon name="home" color={isActive ? 'primary' : undefined} />\` or use separate JSX branches.
 
 ### Navigation
 11. **NavigatorProvider** takes a \`route\` prop (SINGULAR) \u2014 NOT \`routes\`: \`<NavigatorProvider route={routeConfig} />\`. There is NO \`Router\` export.
@@ -16306,7 +16334,7 @@ These are mistakes agents make repeatedly. Each one causes TypeScript compilatio
 15. \`useParams()\` does NOT accept generic type arguments. It returns \`Record<string, string | undefined>\`. Do NOT write \`useParams<{ id: string }>()\` \u2014 that causes TS2558. Always guard for undefined: \`const id = params.id; if (!id) return null;\`.
 
 ### Imports & Styling
-16. **Never** import from \`react-native\` \u2014 no \`TouchableOpacity\`, \`FlatList\`, \`ScrollView\`, \`Animated\`, \`Dimensions\`, \`Linking\`, \`Platform\`. Idealyst provides cross-platform alternatives for all of these (e.g., \`openExternalLinks\` on Markdown, \`Pressable\` from \`@idealyst/components\`). **\`ScrollView\` is NOT exported from \`@idealyst/components\`** \u2014 use \`<View scrollable>\` instead. Do NOT \`import { ScrollView } from '@idealyst/components'\` \u2014 it will cause a TS import error.
+16. **Never** import from \`react-native\` \u2014 no \`TouchableOpacity\`, \`FlatList\`, \`ScrollView\`, \`Animated\`, \`Dimensions\`, \`Linking\`, \`Platform\`. Idealyst provides cross-platform alternatives for all of these (e.g., \`openExternalLinks\` on Markdown, \`Pressable\` from \`@idealyst/components\`). **For scrollable content, use \`<ScrollView>\` from \`@idealyst/components\`** (NOT \`<View scrollable>\` which is deprecated). \`ScrollView\` supports \`direction\` (\`'vertical' | 'horizontal' | 'both'\`), scroll callbacks (\`onScroll\`, \`onScrollBegin\`, \`onScrollEnd\`, \`onEndReached\`), and imperative controls via ref (\`scrollTo\`, \`scrollToEnd\`, \`scrollToStart\`). It also accepts the same spacing shorthand props as View (\`padding\`, \`gap\`, \`margin\`, etc.).
 17. **Never** import from \`react-native-unistyles\` \u2014 use \`@idealyst/theme\` (\`configureThemes\`, \`ThemeSettings\`, \`useTheme\`).
 18. **useTheme()** returns the Theme object **directly** (NOT wrapped): \`const theme = useTheme();\`. Do NOT destructure: \`const { theme } = useTheme()\` \u2014 causes TS2339.
 19. **Spacing & Layout**: Use component shorthand props for spacing \u2014 NOT \`theme.spacing\` (which does NOT exist). The correct patterns:
@@ -23829,7 +23857,7 @@ var import_url = require("url");
 // src/generated/types.json
 var types_default = {
   version: "1.0.93",
-  extractedAt: "2026-02-24T21:11:17.058Z",
+  extractedAt: "2026-03-11T20:52:45.143Z",
   components: {
     Accordion: {
       name: "Accordion",
@@ -28100,6 +28128,12 @@ var types_default = {
           required: false,
           description: "Whether to avoid the keyboard on native platforms (iOS/Android).\nWhen enabled, content will shift up when the keyboard appears."
         },
+        {
+          name: "keyboardAvoidingOffset",
+          type: "number | undefined",
+          required: false,
+          description: "Additional offset to subtract from the keyboard height when avoiding the keyboard.\nThe Screen automatically accounts for the tab bar height when inside a tab navigator,\nbut this prop can be used for other fixed UI elements that occupy space at the bottom."
+        },
         {
           name: "onLayout",
           type: '((event: import("/home/nicho/Development/idealyst-framework/packages/components/src/hooks/useWebLayout/types").LayoutChangeEvent) => void) | undefined',
@@ -28107,7 +28141,7 @@ var types_default = {
           description: "Called when the layout of the screen changes.\nProvides the new width, height, x, and y coordinates."
         }
       ],
-      typeDefinition: "export interface ScreenProps extends ContainerStyleProps {\n  /**\n   * The content to display inside the screen\n   */\n  children?: ReactNode;\n\n  /**\n   * Background variant - controls the background color\n   */\n  background?: Surface | 'transparent';\n\n  /**\n   * Safe area padding for all edges (lower precedence).\n   * Individual edge props (safeAreaTop, etc.) override this when set.\n   */\n  safeArea?: boolean;\n\n  /**\n   * Safe area padding for the top edge.\n   * Overrides safeArea for top when explicitly set.\n   */\n  safeAreaTop?: boolean;\n\n  /**\n   * Safe area padding for the bottom edge.\n   * Overrides safeArea for bottom when explicitly set.\n   */\n  safeAreaBottom?: boolean;\n\n  /**\n   * Safe area padding for the left edge.\n   * Overrides safeArea for left when explicitly set.\n   */\n  safeAreaLeft?: boolean;\n\n  /**\n   * Safe area padding for the right edge.\n   * Overrides safeArea for right when explicitly set.\n   */\n  safeAreaRight?: boolean;\n\n  /**\n   * Content inset padding for scrollable content (mobile only)\n   * Adds padding to the scroll view's content container\n   * Useful for adding safe area insets or additional spacing\n   */\n  contentInset?: {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n  };\n\n  /**\n   * Additional styles (platform-specific)\n   */\n  style?: StyleProp<ViewStyle>;\n\n  /**\n   * Test ID for testing\n   */\n  testID?: string;\n\n  /**\n   * Scrollable content\n   */\n  scrollable?: boolean;\n\n  /**\n   * Whether to avoid the keyboard on native platforms (iOS/Android).\n   * When enabled, content will shift up when the keyboard appears.\n   * @default true\n   * @platform native\n   */\n  avoidKeyboard?: boolean;\n\n  /**\n   * Called when the layout of the screen changes.\n   * Provides the new width, height, x, and y coordinates.\n   */\n  onLayout?: (event: LayoutChangeEvent) => void;\n}",
+      typeDefinition: "export interface ScreenProps extends ContainerStyleProps {\n  /**\n   * The content to display inside the screen\n   */\n  children?: ReactNode;\n\n  /**\n   * Background variant - controls the background color\n   */\n  background?: Surface | 'transparent';\n\n  /**\n   * Safe area padding for all edges (lower precedence).\n   * Individual edge props (safeAreaTop, etc.) override this when set.\n   */\n  safeArea?: boolean;\n\n  /**\n   * Safe area padding for the top edge.\n   * Overrides safeArea for top when explicitly set.\n   */\n  safeAreaTop?: boolean;\n\n  /**\n   * Safe area padding for the bottom edge.\n   * Overrides safeArea for bottom when explicitly set.\n   */\n  safeAreaBottom?: boolean;\n\n  /**\n   * Safe area padding for the left edge.\n   * Overrides safeArea for left when explicitly set.\n   */\n  safeAreaLeft?: boolean;\n\n  /**\n   * Safe area padding for the right edge.\n   * Overrides safeArea for right when explicitly set.\n   */\n  safeAreaRight?: boolean;\n\n  /**\n   * Content inset padding for scrollable content (mobile only)\n   * Adds padding to the scroll view's content container\n   * Useful for adding safe area insets or additional spacing\n   */\n  contentInset?: {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n  };\n\n  /**\n   * Additional styles (platform-specific)\n   */\n  style?: StyleProp<ViewStyle>;\n\n  /**\n   * Test ID for testing\n   */\n  testID?: string;\n\n  /**\n   * Scrollable content\n   */\n  scrollable?: boolean;\n\n  /**\n   * Whether to avoid the keyboard on native platforms (iOS/Android).\n   * When enabled, content will shift up when the keyboard appears.\n   * @default true\n   * @platform native\n   */\n  avoidKeyboard?: boolean;\n\n  /**\n   * Additional offset to subtract from the keyboard height when avoiding the keyboard.\n   * The Screen automatically accounts for the tab bar height when inside a tab navigator,\n   * but this prop can be used for other fixed UI elements that occupy space at the bottom.\n   * @default 0\n   * @platform native\n   */\n  keyboardAvoidingOffset?: number;\n\n  /**\n   * Called when the layout of the screen changes.\n   * Provides the new width, height, x, and y coordinates.\n   */\n  onLayout?: (event: LayoutChangeEvent) => void;\n}",
       relatedTypes: {},
       registry: {
         name: "Screen",
@@ -28196,6 +28230,13 @@ var types_default = {
             description: "Whether to avoid the keyboard on native platforms (iOS/Android).\nWhen enabled, content will shift up when the keyboard appears.",
             required: false
           },
+          keyboardAvoidingOffset: {
+            name: "keyboardAvoidingOffset",
+            type: "number | undefined",
+            default: 0,
+            description: "Additional offset to subtract from the keyboard height when avoiding the keyboard.\nThe Screen automatically accounts for the tab bar height when inside a tab navigator,\nbut this prop can be used for other fixed UI elements that occupy space at the bottom.",
+            required: false
+          },
           id: {
             name: "id",
             type: "string | undefined",
@@ -28258,6 +28299,384 @@ var types_default = {
         }
       }
     },
+    ScrollView: {
+      name: "ScrollView",
+      propsInterface: "ScrollViewProps",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          required: false
+        },
+        {
+          name: "direction",
+          type: 'import("/home/nicho/Development/idealyst-framework/packages/components/src/ScrollView/types").ScrollViewDirection | undefined',
+          required: false,
+          description: "Scroll direction. Defaults to 'vertical'."
+        },
+        {
+          name: "background",
+          type: "string | undefined",
+          required: false,
+          description: "Background variant"
+        },
+        {
+          name: "radius",
+          type: "string | undefined",
+          required: false,
+          description: "Border radius variant"
+        },
+        {
+          name: "border",
+          type: 'import("/home/nicho/Development/idealyst-framework/packages/components/src/ScrollView/types").ScrollViewBorderVariant | undefined',
+          required: false,
+          description: "Border variant"
+        },
+        {
+          name: "backgroundColor",
+          type: "string | undefined",
+          required: false,
+          description: "Custom background color (overrides background variant)"
+        },
+        {
+          name: "borderRadius",
+          type: "number | undefined",
+          required: false,
+          description: "Custom border radius (overrides radius variant)"
+        },
+        {
+          name: "borderWidth",
+          type: "number | undefined",
+          required: false,
+          description: "Custom border width (overrides border variant)"
+        },
+        {
+          name: "borderColor",
+          type: "string | undefined",
+          required: false,
+          description: "Custom border color"
+        },
+        {
+          name: "style",
+          type: 'import("/home/nicho/Development/idealyst-framework/packages/theme/node_modules/react-native/Libraries/StyleSheet/StyleSheet").StyleProp<import("/home/nicho/Development/idealyst-framework/packages/theme/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes").ViewStyle>',
+          required: false,
+          description: "Additional styles"
+        },
+        {
+          name: "contentContainerStyle",
+          type: 'import("/home/nicho/Development/idealyst-framework/packages/theme/node_modules/react-native/Libraries/StyleSheet/StyleSheet").StyleProp<import("/home/nicho/Development/idealyst-framework/packages/theme/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes").ViewStyle>',
+          required: false,
+          description: "Styles applied to the content container"
+        },
+        {
+          name: "showsIndicator",
+          type: "boolean | undefined",
+          required: false,
+          description: "Whether to show scroll indicators. Defaults to true."
+        },
+        {
+          name: "pagingEnabled",
+          type: "boolean | undefined",
+          required: false,
+          description: "Whether to enable paging behavior"
+        },
+        {
+          name: "bounces",
+          type: "boolean | undefined",
+          required: false,
+          description: "Whether the scroll view bounces at the edges (iOS). Defaults to true."
+        },
+        {
+          name: "onScroll",
+          type: '((event: import("/home/nicho/Development/idealyst-framework/packages/components/src/ScrollView/types").ScrollEvent) => void) | undefined',
+          required: false,
+          description: "Called continuously as the user scrolls.\nUse `scrollEventThrottle` to control frequency."
+        },
+        {
+          name: "onScrollBegin",
+          type: '((event: import("/home/nicho/Development/idealyst-framework/packages/components/src/ScrollView/types").ScrollEvent) => void) | undefined',
+          required: false,
+          description: "Called when scrolling begins (user starts dragging)."
+        },
+        {
+          name: "onScrollEnd",
+          type: '((event: import("/home/nicho/Development/idealyst-framework/packages/components/src/ScrollView/types").ScrollEvent) => void) | undefined',
+          required: false,
+          description: "Called when scrolling ends (momentum settles or user lifts finger)."
+        },
+        {
+          name: "onEndReached",
+          type: "(() => void) | undefined",
+          required: false,
+          description: "Called when the scroll position reaches the end of the content.\nUseful for infinite scroll / load-more patterns."
+        },
+        {
+          name: "onEndReachedThreshold",
+          type: "number | undefined",
+          required: false,
+          description: "Distance from the end (in pixels) at which onEndReached fires.\nDefaults to 0."
+        },
+        {
+          name: "scrollEventThrottle",
+          type: "number | undefined",
+          required: false,
+          description: "Throttle interval (ms) for onScroll events on native. Defaults to 16 (~60fps)."
+        },
+        {
+          name: "scrollEnabled",
+          type: "boolean | undefined",
+          required: false,
+          description: "Whether scrolling is enabled. Defaults to true."
+        },
+        {
+          name: "keyboardDismissMode",
+          type: '"none" | "on-drag" | "interactive" | undefined',
+          required: false,
+          description: "Whether the keyboard should dismiss on drag."
+        },
+        {
+          name: "testID",
+          type: "string | undefined",
+          required: false,
+          description: "Test ID for testing"
+        },
+        {
+          name: "onLayout",
+          type: '((event: import("/home/nicho/Development/idealyst-framework/packages/components/src/hooks/useWebLayout/types").LayoutChangeEvent) => void) | undefined',
+          required: false,
+          description: "Callback when layout changes"
+        }
+      ],
+      typeDefinition: "export interface ScrollViewProps extends ContainerStyleProps {\n  children?: ReactNode;\n\n  /** Scroll direction. Defaults to 'vertical'. */\n  direction?: ScrollViewDirection;\n\n  /** Background variant */\n  background?: ScrollViewBackgroundVariant;\n\n  /** Border radius variant */\n  radius?: ScrollViewRadiusVariant;\n\n  /** Border variant */\n  border?: ScrollViewBorderVariant;\n\n  /** Custom background color (overrides background variant) */\n  backgroundColor?: string;\n\n  /** Custom border radius (overrides radius variant) */\n  borderRadius?: number;\n\n  /** Custom border width (overrides border variant) */\n  borderWidth?: number;\n\n  /** Custom border color */\n  borderColor?: string;\n\n  /** Additional styles */\n  style?: StyleProp<ViewStyle>;\n\n  /** Styles applied to the content container */\n  contentContainerStyle?: StyleProp<ViewStyle>;\n\n  /** Whether to show scroll indicators. Defaults to true. */\n  showsIndicator?: boolean;\n\n  /** Whether to enable paging behavior */\n  pagingEnabled?: boolean;\n\n  /** Whether the scroll view bounces at the edges (iOS). Defaults to true. */\n  bounces?: boolean;\n\n  /**\n   * Called continuously as the user scrolls.\n   * Use `scrollEventThrottle` to control frequency.\n   */\n  onScroll?: (event: ScrollEvent) => void;\n\n  /**\n   * Called when scrolling begins (user starts dragging).\n   */\n  onScrollBegin?: (event: ScrollEvent) => void;\n\n  /**\n   * Called when scrolling ends (momentum settles or user lifts finger).\n   */\n  onScrollEnd?: (event: ScrollEvent) => void;\n\n  /**\n   * Called when the scroll position reaches the end of the content.\n   * Useful for infinite scroll / load-more patterns.\n   */\n  onEndReached?: () => void;\n\n  /**\n   * Distance from the end (in pixels) at which onEndReached fires.\n   * Defaults to 0.\n   */\n  onEndReachedThreshold?: number;\n\n  /**\n   * Throttle interval (ms) for onScroll events on native. Defaults to 16 (~60fps).\n   */\n  scrollEventThrottle?: number;\n\n  /** Whether scrolling is enabled. Defaults to true. */\n  scrollEnabled?: boolean;\n\n  /** Whether the keyboard should dismiss on drag. */\n  keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';\n\n  /** Test ID for testing */\n  testID?: string;\n\n  /** Callback when layout changes */\n  onLayout?: (event: LayoutChangeEvent) => void;\n}",
+      relatedTypes: {
+        ScrollViewBackgroundVariant: "export type ScrollViewBackgroundVariant = Surface | 'transparent';",
+        ScrollViewRadiusVariant: "export type ScrollViewRadiusVariant = Size | 'none';",
+        ScrollViewBorderVariant: "export type ScrollViewBorderVariant = 'none' | 'thin' | 'thick';",
+        ScrollViewDirection: "export type ScrollViewDirection = 'vertical' | 'horizontal' | 'both';",
+        ScrollPosition: "export interface ScrollPosition {\n  x: number;\n  y: number;\n}",
+        ScrollContentSize: "export interface ScrollContentSize {\n  width: number;\n  height: number;\n}",
+        ScrollLayoutSize: "export interface ScrollLayoutSize {\n  width: number;\n  height: number;\n}",
+        ScrollEvent: "export interface ScrollEvent {\n  /** Current scroll offset */\n  position: ScrollPosition;\n  /** Size of the scrollable content */\n  contentSize: ScrollContentSize;\n  /** Size of the visible scroll container */\n  layoutSize: ScrollLayoutSize;\n  /** Whether the content is scrolled to the end (vertical or horizontal depending on direction) */\n  isAtEnd: boolean;\n  /** Whether the content is scrolled to the start */\n  isAtStart: boolean;\n}",
+        ScrollToOptions: "export interface ScrollToOptions {\n  x?: number;\n  y?: number;\n  animated?: boolean;\n}",
+        ScrollViewRef: "export interface ScrollViewRef {\n  /** Scroll to a specific position */\n  scrollTo: (options: ScrollToOptions) => void;\n  /** Scroll to the end of the content */\n  scrollToEnd: (options?: { animated?: boolean }) => void;\n  /** Scroll to the top/start of the content */\n  scrollToStart: (options?: { animated?: boolean }) => void;\n  /** Get current scroll position */\n  getScrollPosition: () => ScrollPosition;\n  /** Get the underlying native element */\n  getInnerElement: () => any;\n}"
+      },
+      registry: {
+        name: "ScrollView",
+        description: "Scrollable container with scroll event abstractions and imperative scroll controls.",
+        props: {
+          direction: {
+            name: "direction",
+            type: "ScrollViewDirection | undefined",
+            values: [
+              "vertical",
+              "horizontal",
+              "both"
+            ],
+            description: "Scroll direction. Defaults to 'vertical'.",
+            required: false
+          },
+          background: {
+            name: "background",
+            type: "any",
+            description: "Background variant",
+            required: false
+          },
+          radius: {
+            name: "radius",
+            type: "any",
+            description: "Border radius variant",
+            required: false
+          },
+          border: {
+            name: "border",
+            type: "ScrollViewBorderVariant | undefined",
+            values: [
+              "none",
+              "thin",
+              "thick"
+            ],
+            description: "Border variant",
+            required: false
+          },
+          backgroundColor: {
+            name: "backgroundColor",
+            type: "string | undefined",
+            description: "Custom background color (overrides background variant)",
+            required: false
+          },
+          borderRadius: {
+            name: "borderRadius",
+            type: "number | undefined",
+            description: "Custom border radius (overrides radius variant)",
+            required: false
+          },
+          borderWidth: {
+            name: "borderWidth",
+            type: "number | undefined",
+            description: "Custom border width (overrides border variant)",
+            required: false
+          },
+          borderColor: {
+            name: "borderColor",
+            type: "string | undefined",
+            description: "Custom border color",
+            required: false
+          },
+          contentContainerStyle: {
+            name: "contentContainerStyle",
+            type: "any",
+            description: "Styles applied to the content container",
+            required: false
+          },
+          showsIndicator: {
+            name: "showsIndicator",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether to show scroll indicators. Defaults to true.",
+            required: false
+          },
+          pagingEnabled: {
+            name: "pagingEnabled",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether to enable paging behavior",
+            required: false
+          },
+          bounces: {
+            name: "bounces",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether the scroll view bounces at the edges (iOS). Defaults to true.",
+            required: false
+          },
+          onScroll: {
+            name: "onScroll",
+            type: "((event: ScrollEvent) => void) | undefined",
+            description: "Called continuously as the user scrolls.\nUse `scrollEventThrottle` to control frequency.",
+            required: false
+          },
+          onScrollBegin: {
+            name: "onScrollBegin",
+            type: "((event: ScrollEvent) => void) | undefined",
+            description: "Called when scrolling begins (user starts dragging).",
+            required: false
+          },
+          onScrollEnd: {
+            name: "onScrollEnd",
+            type: "((event: ScrollEvent) => void) | undefined",
+            description: "Called when scrolling ends (momentum settles or user lifts finger).",
+            required: false
+          },
+          onEndReached: {
+            name: "onEndReached",
+            type: "(() => void) | undefined",
+            description: "Called when the scroll position reaches the end of the content.\nUseful for infinite scroll / load-more patterns.",
+            required: false
+          },
+          onEndReachedThreshold: {
+            name: "onEndReachedThreshold",
+            type: "number | undefined",
+            description: "Distance from the end (in pixels) at which onEndReached fires.\nDefaults to 0.",
+            required: false
+          },
+          scrollEventThrottle: {
+            name: "scrollEventThrottle",
+            type: "number | undefined",
+            description: "Throttle interval (ms) for onScroll events on native. Defaults to 16 (~60fps).",
+            required: false
+          },
+          scrollEnabled: {
+            name: "scrollEnabled",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether scrolling is enabled. Defaults to true.",
+            required: false
+          },
+          keyboardDismissMode: {
+            name: "keyboardDismissMode",
+            type: '"none" | "on-drag" | "interactive" | undefined',
+            values: [
+              "none",
+              "on-drag",
+              "interactive"
+            ],
+            description: "Whether the keyboard should dismiss on drag.",
+            required: false
+          },
+          id: {
+            name: "id",
+            type: "string | undefined",
+            description: "Unique identifier for the element (maps to id on web, nativeID on native)",
+            required: false
+          },
+          gap: {
+            name: "gap",
+            type: "any",
+            description: "Gap between children (uses theme.sizes.view[size].spacing)",
+            required: false
+          },
+          spacing: {
+            name: "spacing",
+            type: "any",
+            description: "Alias for gap - spacing between children",
+            required: false
+          },
+          padding: {
+            name: "padding",
+            type: "any",
+            description: "Padding on all sides (uses theme.sizes.view[size].padding)",
+            required: false
+          },
+          paddingVertical: {
+            name: "paddingVertical",
+            type: "any",
+            description: "Vertical padding (top + bottom)",
+            required: false
+          },
+          paddingHorizontal: {
+            name: "paddingHorizontal",
+            type: "any",
+            description: "Horizontal padding (left + right)",
+            required: false
+          },
+          margin: {
+            name: "margin",
+            type: "any",
+            description: "Margin on all sides (uses theme.sizes.view[size].spacing)",
+            required: false
+          },
+          marginVertical: {
+            name: "marginVertical",
+            type: "any",
+            description: "Vertical margin (top + bottom)",
+            required: false
+          },
+          marginHorizontal: {
+            name: "marginHorizontal",
+            type: "any",
+            description: "Horizontal margin (left + right)",
+            required: false
+          }
+        },
+        category: "display",
+        filePath: "../components/src/ScrollView",
+        sampleProps: {
+          children: "'Scrollable content'"
+        }
+      }
+    },
     Select: {
       name: "Select",
       propsInterface: "SelectProps",
@@ -29766,6 +30185,12 @@ var types_default = {
           type: "boolean | undefined",
           required: false
         },
+        {
+          name: "fill",
+          type: "boolean | undefined",
+          required: false,
+          description: "When true, the textarea expands to fill available vertical space using flex.\nOverrides `rows` and `autoGrow` height logic. All container layers get `flex: 1`."
+        },
         {
           name: "maxLength",
           type: "number | undefined",
@@ -29828,7 +30253,7 @@ var types_default = {
           required: false
         }
       ],
-      typeDefinition: "export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityProps {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Called when a key is pressed while the textarea is focused.\n   * Includes modifier key states (ctrl, shift, alt, meta).\n   * Web only - no-op on native.\n   */\n  onKeyDown?: (event: KeyboardEventData) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  rows?: number;\n  minHeight?: number;\n  maxHeight?: number;\n  autoGrow?: boolean;\n  maxLength?: number;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  resize?: TextAreaResizeVariant;\n  showCharacterCount?: boolean;\n  intent?: TextAreaIntentVariant;\n  size?: TextAreaSizeVariant;\n  /**\n   * Visual style type of the textarea\n   * @default 'outlined'\n   */\n  type?: TextAreaType;\n  style?: StyleProp<ViewStyle>;\n  textareaStyle?: StyleProp<TextStyle>;\n  testID?: string;\n}",
+      typeDefinition: "export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityProps {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Called when a key is pressed while the textarea is focused.\n   * Includes modifier key states (ctrl, shift, alt, meta).\n   * Web only - no-op on native.\n   */\n  onKeyDown?: (event: KeyboardEventData) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  rows?: number;\n  minHeight?: number;\n  maxHeight?: number;\n  autoGrow?: boolean;\n  /**\n   * When true, the textarea expands to fill available vertical space using flex.\n   * Overrides `rows` and `autoGrow` height logic. All container layers get `flex: 1`.\n   */\n  fill?: boolean;\n  maxLength?: number;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  resize?: TextAreaResizeVariant;\n  showCharacterCount?: boolean;\n  intent?: TextAreaIntentVariant;\n  size?: TextAreaSizeVariant;\n  /**\n   * Visual style type of the textarea\n   * @default 'outlined'\n   */\n  type?: TextAreaType;\n  style?: StyleProp<ViewStyle>;\n  textareaStyle?: StyleProp<TextStyle>;\n  testID?: string;\n}",
       relatedTypes: {
         TextAreaIntentVariant: "export type TextAreaIntentVariant = Intent;",
         TextAreaSizeVariant: "export type TextAreaSizeVariant = Size;",
@@ -29898,6 +30323,16 @@ var types_default = {
             ],
             required: false
           },
+          fill: {
+            name: "fill",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "When true, the textarea expands to fill available vertical space using flex.\nOverrides `rows` and `autoGrow` height logic. All container layers get `flex: 1`.",
+            required: false
+          },
           maxLength: {
             name: "maxLength",
             type: "number | undefined",
@@ -30972,7 +31407,7 @@ var types_default = {
           name: "scrollable",
           type: "boolean | undefined",
           required: false,
-          description: "Enable scrollable content.\n- Native: Wraps children in a ScrollView\n- Web: Renders a wrapper + content structure where the wrapper fills available\n  space (or uses explicit dimensions) and content is absolutely positioned with\n  overflow:auto. Sizing/margin styles go to wrapper, visual styles to content."
+          description: ""
         },
         {
           name: "testID",
@@ -30987,7 +31422,7 @@ var types_default = {
           description: "Callback when the view's layout changes.\nCalled with layout information (x, y, width, height) when the component\nmounts or when its dimensions change."
         }
       ],
-      typeDefinition: "export interface ViewProps extends ContainerStyleProps {\n  /**\n   * The content to display inside the view\n   */\n  children?: ReactNode;\n\n  /**\n   * Background variant\n   */\n  background?: ViewBackgroundVariant;\n\n  /**\n   * Border radius variant\n   */\n  radius?: ViewRadiusVariant;\n\n  /**\n   * Border variant\n   */\n  border?: ViewBorderVariant;\n\n  /**\n   * Custom background color (overrides background variant)\n   */\n  backgroundColor?: string;\n\n  /**\n   * Custom border radius (overrides radius variant)\n   */\n  borderRadius?: number;\n\n  /**\n   * Custom border width (overrides border variant)\n   */\n  borderWidth?: number;\n\n  /**\n   * Custom border color\n   */\n  borderColor?: string;\n\n  /**\n   * Additional styles. Supports responsive values for any property.\n   * @example\n   * ```tsx\n   * // Responsive flexDirection\n   * <View style={{ flexDirection: { xs: 'column', md: 'row' } }} />\n   *\n   * // Mix responsive and static values\n   * <View style={{ padding: { xs: 8, lg: 16 }, backgroundColor: '#fff' }} />\n   * ```\n   */\n  style?: ViewStyleProp;\n\n  /**\n   * Enable scrollable content.\n   * - Native: Wraps children in a ScrollView\n   * - Web: Renders a wrapper + content structure where the wrapper fills available\n   *   space (or uses explicit dimensions) and content is absolutely positioned with\n   *   overflow:auto. Sizing/margin styles go to wrapper, visual styles to content.\n   */\n  scrollable?: boolean;\n\n  /**\n   * Test ID for testing\n   */\n  testID?: string;\n\n  /**\n   * Callback when the view's layout changes.\n   * Called with layout information (x, y, width, height) when the component\n   * mounts or when its dimensions change.\n   */\n  onLayout?: (event: LayoutChangeEvent) => void;\n}",
+      typeDefinition: "export interface ViewProps extends ContainerStyleProps {\n  /**\n   * The content to display inside the view\n   */\n  children?: ReactNode;\n\n  /**\n   * Background variant\n   */\n  background?: ViewBackgroundVariant;\n\n  /**\n   * Border radius variant\n   */\n  radius?: ViewRadiusVariant;\n\n  /**\n   * Border variant\n   */\n  border?: ViewBorderVariant;\n\n  /**\n   * Custom background color (overrides background variant)\n   */\n  backgroundColor?: string;\n\n  /**\n   * Custom border radius (overrides radius variant)\n   */\n  borderRadius?: number;\n\n  /**\n   * Custom border width (overrides border variant)\n   */\n  borderWidth?: number;\n\n  /**\n   * Custom border color\n   */\n  borderColor?: string;\n\n  /**\n   * Additional styles. Supports responsive values for any property.\n   * @example\n   * ```tsx\n   * // Responsive flexDirection\n   * <View style={{ flexDirection: { xs: 'column', md: 'row' } }} />\n   *\n   * // Mix responsive and static values\n   * <View style={{ padding: { xs: 8, lg: 16 }, backgroundColor: '#fff' }} />\n   * ```\n   */\n  style?: ViewStyleProp;\n\n  /**\n   * @deprecated Use the ScrollView component instead, which provides scroll event\n   * abstractions (onScroll, onScrollBegin, onScrollEnd, onEndReached) and imperative\n   * scroll controls (scrollTo, scrollToEnd, scrollToStart) via ref.\n   *\n   * Enable scrollable content.\n   * - Native: Wraps children in a ScrollView\n   * - Web: Renders a wrapper + content structure where the wrapper fills available\n   *   space (or uses explicit dimensions) and content is absolutely positioned with\n   *   overflow:auto. Sizing/margin styles go to wrapper, visual styles to content.\n   */\n  scrollable?: boolean;\n\n  /**\n   * Test ID for testing\n   */\n  testID?: string;\n\n  /**\n   * Callback when the view's layout changes.\n   * Called with layout information (x, y, width, height) when the component\n   * mounts or when its dimensions change.\n   */\n  onLayout?: (event: LayoutChangeEvent) => void;\n}",
       relatedTypes: {
         ViewStyleProp: "export type ViewStyleProp = StyleProp<ViewStyle> | ResponsiveStyle | React.CSSProperties;",
         ViewBackgroundVariant: "export type ViewBackgroundVariant = Surface | 'transparent';",
@@ -31052,7 +31487,6 @@ var types_default = {
               "false",
               "true"
             ],
-            description: "Enable scrollable content.\n- Native: Wraps children in a ScrollView\n- Web: Renders a wrapper + content structure where the wrapper fills available\n  space (or uses explicit dimensions) and content is absolutely positioned with\n  overflow:auto. Sizing/margin styles go to wrapper, visual styles to content.",
             required: false
           },
           id: {
@@ -63463,6 +63897,13 @@ var types_default = {
             description: "Whether to avoid the keyboard on native platforms (iOS/Android).\nWhen enabled, content will shift up when the keyboard appears.",
             required: false
           },
+          keyboardAvoidingOffset: {
+            name: "keyboardAvoidingOffset",
+            type: "number | undefined",
+            default: 0,
+            description: "Additional offset to subtract from the keyboard height when avoiding the keyboard.\nThe Screen automatically accounts for the tab bar height when inside a tab navigator,\nbut this prop can be used for other fixed UI elements that occupy space at the bottom.",
+            required: false
+          },
           id: {
             name: "id",
             type: "string | undefined",
@@ -63524,6 +63965,222 @@ var types_default = {
           children: "'Screen content'"
         }
       },
+      ScrollView: {
+        name: "ScrollView",
+        description: "Scrollable container with scroll event abstractions and imperative scroll controls.",
+        props: {
+          direction: {
+            name: "direction",
+            type: "ScrollViewDirection | undefined",
+            values: [
+              "vertical",
+              "horizontal",
+              "both"
+            ],
+            description: "Scroll direction. Defaults to 'vertical'.",
+            required: false
+          },
+          background: {
+            name: "background",
+            type: "any",
+            description: "Background variant",
+            required: false
+          },
+          radius: {
+            name: "radius",
+            type: "any",
+            description: "Border radius variant",
+            required: false
+          },
+          border: {
+            name: "border",
+            type: "ScrollViewBorderVariant | undefined",
+            values: [
+              "none",
+              "thin",
+              "thick"
+            ],
+            description: "Border variant",
+            required: false
+          },
+          backgroundColor: {
+            name: "backgroundColor",
+            type: "string | undefined",
+            description: "Custom background color (overrides background variant)",
+            required: false
+          },
+          borderRadius: {
+            name: "borderRadius",
+            type: "number | undefined",
+            description: "Custom border radius (overrides radius variant)",
+            required: false
+          },
+          borderWidth: {
+            name: "borderWidth",
+            type: "number | undefined",
+            description: "Custom border width (overrides border variant)",
+            required: false
+          },
+          borderColor: {
+            name: "borderColor",
+            type: "string | undefined",
+            description: "Custom border color",
+            required: false
+          },
+          contentContainerStyle: {
+            name: "contentContainerStyle",
+            type: "any",
+            description: "Styles applied to the content container",
+            required: false
+          },
+          showsIndicator: {
+            name: "showsIndicator",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether to show scroll indicators. Defaults to true.",
+            required: false
+          },
+          pagingEnabled: {
+            name: "pagingEnabled",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether to enable paging behavior",
+            required: false
+          },
+          bounces: {
+            name: "bounces",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether the scroll view bounces at the edges (iOS). Defaults to true.",
+            required: false
+          },
+          onScroll: {
+            name: "onScroll",
+            type: "((event: ScrollEvent) => void) | undefined",
+            description: "Called continuously as the user scrolls.\nUse `scrollEventThrottle` to control frequency.",
+            required: false
+          },
+          onScrollBegin: {
+            name: "onScrollBegin",
+            type: "((event: ScrollEvent) => void) | undefined",
+            description: "Called when scrolling begins (user starts dragging).",
+            required: false
+          },
+          onScrollEnd: {
+            name: "onScrollEnd",
+            type: "((event: ScrollEvent) => void) | undefined",
+            description: "Called when scrolling ends (momentum settles or user lifts finger).",
+            required: false
+          },
+          onEndReached: {
+            name: "onEndReached",
+            type: "(() => void) | undefined",
+            description: "Called when the scroll position reaches the end of the content.\nUseful for infinite scroll / load-more patterns.",
+            required: false
+          },
+          onEndReachedThreshold: {
+            name: "onEndReachedThreshold",
+            type: "number | undefined",
+            description: "Distance from the end (in pixels) at which onEndReached fires.\nDefaults to 0.",
+            required: false
+          },
+          scrollEventThrottle: {
+            name: "scrollEventThrottle",
+            type: "number | undefined",
+            description: "Throttle interval (ms) for onScroll events on native. Defaults to 16 (~60fps).",
+            required: false
+          },
+          scrollEnabled: {
+            name: "scrollEnabled",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "Whether scrolling is enabled. Defaults to true.",
+            required: false
+          },
+          keyboardDismissMode: {
+            name: "keyboardDismissMode",
+            type: '"none" | "on-drag" | "interactive" | undefined',
+            values: [
+              "none",
+              "on-drag",
+              "interactive"
+            ],
+            description: "Whether the keyboard should dismiss on drag.",
+            required: false
+          },
+          id: {
+            name: "id",
+            type: "string | undefined",
+            description: "Unique identifier for the element (maps to id on web, nativeID on native)",
+            required: false
+          },
+          gap: {
+            name: "gap",
+            type: "any",
+            description: "Gap between children (uses theme.sizes.view[size].spacing)",
+            required: false
+          },
+          spacing: {
+            name: "spacing",
+            type: "any",
+            description: "Alias for gap - spacing between children",
+            required: false
+          },
+          padding: {
+            name: "padding",
+            type: "any",
+            description: "Padding on all sides (uses theme.sizes.view[size].padding)",
+            required: false
+          },
+          paddingVertical: {
+            name: "paddingVertical",
+            type: "any",
+            description: "Vertical padding (top + bottom)",
+            required: false
+          },
+          paddingHorizontal: {
+            name: "paddingHorizontal",
+            type: "any",
+            description: "Horizontal padding (left + right)",
+            required: false
+          },
+          margin: {
+            name: "margin",
+            type: "any",
+            description: "Margin on all sides (uses theme.sizes.view[size].spacing)",
+            required: false
+          },
+          marginVertical: {
+            name: "marginVertical",
+            type: "any",
+            description: "Vertical margin (top + bottom)",
+            required: false
+          },
+          marginHorizontal: {
+            name: "marginHorizontal",
+            type: "any",
+            description: "Horizontal margin (left + right)",
+            required: false
+          }
+        },
+        category: "display",
+        filePath: "../components/src/ScrollView",
+        sampleProps: {
+          children: "'Scrollable content'"
+        }
+      },
       Select: {
         name: "Select",
         description: "Dropdown selection component for choosing from a list of options.\nSupports searchable filtering on web and native presentation modes on iOS.",
@@ -64474,6 +65131,16 @@ var types_default = {
             ],
             required: false
           },
+          fill: {
+            name: "fill",
+            type: "boolean | undefined",
+            values: [
+              "false",
+              "true"
+            ],
+            description: "When true, the textarea expands to fill available vertical space using flex.\nOverrides `rows` and `autoGrow` height logic. All container layers get `flex: 1`.",
+            required: false
+          },
           maxLength: {
             name: "maxLength",
             type: "number | undefined",
@@ -65071,7 +65738,6 @@ var types_default = {
               "false",
               "true"
             ],
-            description: "Enable scrollable content.\n- Native: Wraps children in a ScrollView\n- Web: Renders a wrapper + content structure where the wrapper fills available\n  space (or uses explicit dimensions) and content is absolutely positioned with\n  overflow:auto. Sizing/margin styles go to wrapper, visual styles to content.",
             required: false
           },
           id: {
@@ -65778,7 +66444,12 @@ function postProcessComponentTypes(componentName, result) {
   }
   if (componentName.toLowerCase() === "view") {
     if (typeof result === "object" && result !== null) {
-      result.usageNote = "View spacing shorthand props: padding, paddingVertical, paddingHorizontal, margin, marginVertical, marginHorizontal, gap/spacing. These accept Size values (xs, sm, md, lg, xl). Do NOT use paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft, marginRight as shorthand props \u2014 they do NOT exist and will cause TS2353. For single-side spacing use style={{ paddingTop: 16 }}. View does NOT have a `pointerEvents` JSX prop. Use style={{ pointerEvents: 'none' }} instead.";
+      result.usageNote = "View spacing shorthand props: padding, paddingVertical, paddingHorizontal, margin, marginVertical, marginHorizontal, gap/spacing. These accept Size values (xs, sm, md, lg, xl). Do NOT use paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft, marginRight as shorthand props \u2014 they do NOT exist and will cause TS2353. For single-side spacing use style={{ paddingTop: 16 }}. View does NOT have a `pointerEvents` JSX prop. Use style={{ pointerEvents: 'none' }} instead. **For scrollable content, use `<ScrollView>` from @idealyst/components** (NOT `<View scrollable>` which is deprecated). ScrollView supports direction ('vertical'|'horizontal'|'both'), scroll callbacks (onScroll, onEndReached), and imperative controls via ref (scrollTo, scrollToEnd, scrollToStart).";
+    }
+  }
+  if (componentName.toLowerCase() === "scrollview") {
+    if (typeof result === "object" && result !== null) {
+      result.usageNote = "ScrollView is the replacement for the deprecated `<View scrollable>` pattern. Import from @idealyst/components: `import { ScrollView } from '@idealyst/components'`. Key props: direction ('vertical'|'horizontal'|'both'), onScroll, onScrollBegin, onScrollEnd, onEndReached (infinite scroll), showsIndicator, pagingEnabled, bounces, scrollEnabled, keyboardDismissMode. Accepts same spacing shorthand props as View: padding, paddingVertical, paddingHorizontal, gap, margin, etc. Imperative ref (ScrollViewRef): scrollTo({x,y,animated}), scrollToEnd(), scrollToStart(), getScrollPosition(). Use `contentContainerStyle` for inner content styling (e.g., gap between items). ScrollView needs bounded parent height \u2014 wrap in a flex:1 container or give explicit height. Example: `<ScrollView padding=\"md\" gap=\"sm\" onEndReached={loadMore}>{items.map(...)}</ScrollView>`";
     }
   }
   if (componentName.toLowerCase() === "textarea") {
@@ -65793,7 +66464,7 @@ function postProcessComponentTypes(componentName, result) {
   }
   if (componentName.toLowerCase() === "icon") {
     if (typeof result === "object" && result !== null) {
-      result.usageNote = "Icon color props: Use `intent` for semantic coloring (primary, danger, success, etc.) \u2014 renders the icon in the intent's primary color. Use `textColor` for text-semantic coloring (primary, secondary, tertiary, inverse) \u2014 renders the icon using theme.colors.text[textColor]. Use `color` for arbitrary hex/rgb colors. If the icon represents an action or status, use `intent`. If it should match surrounding text color, use `textColor`.";
+      result.usageNote = "Icon color props: Use `intent` for semantic coloring (primary, danger, success, etc.) \u2014 renders the icon in the intent's primary color. Use `textColor` for text-semantic coloring (primary, secondary, tertiary, inverse) \u2014 renders the icon using theme.colors.text[textColor]. Use `color` for palette colors (e.g., 'primary', 'blue.500'). **CRITICAL: `color` and `textColor` are MUTUALLY EXCLUSIVE (discriminated union).** NEVER pass both \u2014 even conditionally with undefined values. Use one or the other. WRONG: `<Icon name='x' color={cond ? 'primary' : undefined} textColor={cond ? undefined : 'secondary'} />` \u2014 causes TS2322. RIGHT: `<Icon name='x' color={isActive ? 'primary' : 'neutral.400'} />` or use separate JSX branches.";
     }
   }
   if (componentName.toLowerCase() === "badge") {