one 1.2.57 → 1.2.58

package/src/views/Protected.tsx

@@ -0,0 +1,62 @@
+import { createNavigatorFactory } from '@react-navigation/core'
+import {
+  type FunctionComponent,
+  type ReactElement,
+  type ReactNode,
+  isValidElement,
+} from 'react'
+
+// Get Group component directly from react-navigation core
+// (avoids pulling in @react-navigation/elements which has asset imports)
+const { Group } = createNavigatorFactory({} as any)()
+
+export type ProtectedProps = {
+  guard: boolean
+  children?: ReactNode
+}
+
+/**
+ * Wrap screens in a Protected component to conditionally show/hide them based on the guard prop.
+ *
+ * When `guard` is `false`, the wrapped screens are filtered out and cannot be navigated to.
+ * When `guard` is `true`, the wrapped screens are available for navigation.
+ *
+ * Works with any navigator: Stack, Tabs, Drawer, or custom Navigator.
+ *
+ * @example
+ * ```tsx
+ * import { Stack, Protected } from 'one'
+ *
+ * export default function Layout() {
+ *   const { isAuthed } = useAuth()
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="login" />
+ *       <Protected guard={isAuthed}>
+ *         <Stack.Screen name="dashboard" />
+ *         <Stack.Screen name="settings" />
+ *       </Protected>
+ *     </Stack>
+ *   )
+ * }
+ * ```
+ */
+export const Protected = Group as FunctionComponent<ProtectedProps>
+
+// Export Group for use in isProtectedElement check
+export { Group }
+
+/**
+ * Type guard to check if a React element is a Protected component with a guard prop.
+ */
+export function isProtectedElement(
+  child: ReactNode
+): child is ReactElement<ProtectedProps> {
+  return Boolean(
+    isValidElement(child) &&
+      child.type === Group &&
+      child.props &&
+      typeof child.props === 'object' &&
+      'guard' in child.props
+  )
+}

package/src/views/RootErrorBoundary.tsx

@@ -1,35 +1,232 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Platform, Text, View } from 'react-native'
 
-export class RootErrorBoundary extends React.Component<{ children: any }> {
-  state = { hasError: false }
+type RootErrorBoundaryState = {
+  hasError: boolean
+  error: Error | null
+  componentStack: string | null
+}
+
+export class RootErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  RootErrorBoundaryState
+> {
+  state: RootErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    componentStack: null,
+  }
 
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true }
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error }
   }
 
-  componentDidCatch(error, info) {
-    // Example "componentStack":
-    //   in ComponentThatThrows (created by App)
-    //   in ErrorBoundary (created by App)
-    //   in div (created by App)
-    //   in App
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.setState({ componentStack: info.componentStack || null })
+
     console.error(
-      `RootErrorBoundary.error:\n${printError(error)}\n${info.componentStack}`
+      `[One] Root error boundary caught error:\n${printError(error)}\n${info.componentStack}`
     )
+
+    // Dispatch error event for devtools
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(
+        new CustomEvent('one-error', {
+          detail: {
+            error: {
+              message: error.message,
+              stack: error.stack,
+              name: error.name,
+            },
+            componentStack: info.componentStack,
+            timestamp: Date.now(),
+            type: 'render',
+          },
+        })
+      )
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null, componentStack: null })
   }
 
   render() {
     if (this.state.hasError) {
-      // You can render any custom fallback UI
-      return null
+      const { error, componentStack } = this.state
+      const isDev = process.env.NODE_ENV === 'development'
+
+      // Web fallback UI
+      if (Platform.OS === 'web') {
+        return (
+          <div
+            style={{
+              minHeight: '100vh',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#0a0a0f',
+              fontFamily:
+                '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+              color: '#e8e8e8',
+              padding: 24,
+            }}
+          >
+            <div
+              style={{
+                maxWidth: 500,
+                width: '100%',
+                textAlign: 'center',
+              }}
+            >
+              <div
+                style={{
+                  width: 64,
+                  height: 64,
+                  backgroundColor: '#ef4444',
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  margin: '0 auto 24px',
+                }}
+              >
+                <svg
+                  width="32"
+                  height="32"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="white"
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="12" />
+                  <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+              </div>
+              <h1
+                style={{
+                  fontSize: 24,
+                  fontWeight: 600,
+                  marginBottom: 8,
+                }}
+              >
+                Something went wrong
+              </h1>
+              <p
+                style={{
+                  fontSize: 14,
+                  color: '#888',
+                  marginBottom: 24,
+                }}
+              >
+                {error?.message || 'An unexpected error occurred'}
+              </p>
+              <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
+                <button
+                  onClick={this.handleRetry}
+                  style={{
+                    padding: '12px 24px',
+                    backgroundColor: '#3b82f6',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: 8,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                  }}
+                >
+                  Try Again
+                </button>
+                <button
+                  onClick={() => {
+                    if (typeof window !== 'undefined') {
+                      window.location.href = '/'
+                    }
+                  }}
+                  style={{
+                    padding: '12px 24px',
+                    backgroundColor: 'transparent',
+                    color: '#888',
+                    border: '1px solid #3a3a5a',
+                    borderRadius: 8,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                  }}
+                >
+                  Go Home
+                </button>
+              </div>
+              {isDev && (
+                <p
+                  style={{
+                    fontSize: 11,
+                    color: '#666',
+                    marginTop: 24,
+                  }}
+                >
+                  Press Alt+E to view error details
+                </p>
+              )}
+            </div>
+          </div>
+        )
+      }
+
+      // Native fallback UI
+      return (
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#0a0a0f',
+            padding: 24,
+          }}
+        >
+          <View
+            style={{
+              width: 64,
+              height: 64,
+              backgroundColor: '#ef4444',
+              borderRadius: 32,
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginBottom: 24,
+            }}
+          >
+            <Text style={{ color: 'white', fontSize: 32 }}>!</Text>
+          </View>
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: '600',
+              color: '#e8e8e8',
+              marginBottom: 8,
+              textAlign: 'center',
+            }}
+          >
+            Something went wrong
+          </Text>
+          <Text
+            style={{
+              fontSize: 14,
+              color: '#888',
+              textAlign: 'center',
+              marginBottom: 24,
+            }}
+          >
+            {error?.message || 'An unexpected error occurred'}
+          </Text>
+        </View>
+      )
     }
 
     return this.props.children
   }
 }
 
-function printError(err) {
-  return `${err instanceof Error ? `${err.message}\n${err.stack}` : err}`
+function printError(err: unknown): string {
+  return err instanceof Error ? `${err.message}\n${err.stack}` : String(err)
 }

package/src/views/ScrollBehavior.tsx

@@ -3,12 +3,45 @@ import { setLastAction } from '../router/lastAction'
 import { subscribeToLoadingState, subscribeToRootState } from '../router/router'
 
 const KEY = 'one-sr'
+const GROUP_KEY = 'one-sr-groups'
 
 const getState = () => JSON.parse(sessionStorage.getItem(KEY) || '{}')
+const getGroupState = () => JSON.parse(sessionStorage.getItem(GROUP_KEY) || '{}')
 
 // prevent scroll to top on first load
 let isFirstLoad = true
 
+// Active scroll groups - defined by layouts
+let activeGroups: Set<string> = new Set()
+
+/**
+ * Scroll Position Groups allow layouts to preserve their scroll position
+ * independently of child route changes. This is useful for:
+ * - Tab layouts where switching tabs shouldn't reset parent scroll
+ * - Side panels where main content scroll is preserved
+ * - Any nested layout that wants independent scroll restoration
+ */
+export function registerScrollGroup(groupId: string) {
+  activeGroups.add(groupId)
+  return () => {
+    activeGroups.delete(groupId)
+  }
+}
+
+function getGroupKey(pathname: string): string | null {
+  // Find the longest matching group for this pathname
+  let longestMatch: string | null = null
+  for (const group of activeGroups) {
+    if (
+      pathname.startsWith(group) &&
+      (!longestMatch || group.length > longestMatch.length)
+    ) {
+      longestMatch = group
+    }
+  }
+  return longestMatch
+}
+
 function restorePosition() {
   try {
     const positions = getState()
@@ -24,13 +57,42 @@ function restorePosition() {
   }
 }
 
+function restoreGroupPosition(groupId: string) {
+  try {
+    const positions = getGroupState()
+    const saved = positions[groupId]
+    if (typeof saved === 'number') {
+      setTimeout(() => {
+        window.scrollTo(0, saved)
+      })
+    }
+  } catch (error) {
+    console.error(`Error restoring scroll position for group ${groupId}`, error)
+    sessionStorage.removeItem(GROUP_KEY)
+  }
+}
+
 let didPop = false
+let previousPathname: string | null = null
 
 function rememberScrollPosition() {
   didPop = false
+  const pathname = window.location.pathname
+
+  // Save standard per-path scroll position
   const state = getState()
-  state[window.location.pathname] = window.scrollY
+  state[pathname] = window.scrollY
   sessionStorage.setItem(KEY, JSON.stringify(state))
+
+  // Also save for any active scroll group
+  const groupKey = getGroupKey(pathname)
+  if (groupKey) {
+    const groupState = getGroupState()
+    groupState[groupKey] = window.scrollY
+    sessionStorage.setItem(GROUP_KEY, JSON.stringify(groupState))
+  }
+
+  previousPathname = pathname
 }
 
 type ScrollBehaviorProps = {
@@ -68,6 +130,7 @@ function configure(props: ScrollBehaviorProps) {
   const disposeOnRootState = subscribeToRootState((state) => {
     if (isFirstLoad) {
       isFirstLoad = false
+      previousPathname = window.location.pathname
       return
     }
 
@@ -76,6 +139,7 @@ function configure(props: ScrollBehaviorProps) {
     }
 
     const { hash } = state
+    const currentPathname = window.location.pathname
 
     if (hash) {
       setTimeout(() => {
@@ -87,9 +151,24 @@ function configure(props: ScrollBehaviorProps) {
         restorePosition()
       }
     } else {
-      // if new page just set back to top
-      window.scrollTo(0, 0)
+      // Check if we're navigating within a scroll group
+      // If both previous and current paths are in the same group, restore group position
+      const prevGroup = previousPathname ? getGroupKey(previousPathname) : null
+      const currentGroup = getGroupKey(currentPathname)
+
+      if (prevGroup && currentGroup && prevGroup === currentGroup) {
+        // Same scroll group - restore the group's scroll position
+        restoreGroupPosition(currentGroup)
+      } else if (state.linkOptions?.scrollGroup) {
+        // Custom scroll group specified in link options
+        restoreGroupPosition(state.linkOptions.scrollGroup)
+      } else {
+        // Different group or no group - scroll to top
+        window.scrollTo(0, 0)
+      }
     }
+
+    previousPathname = currentPathname
   })
 
   disable = () => {

package/src/views/SourceInspector.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react'
+
+/**
+ * SourceInspector component - the actual functionality is now injected via DevHead.tsx
+ * This component is kept for backwards compatibility and returns null.
+ *
+ * The source inspector is automatically enabled in development mode when
+ * devtools.inspector is enabled (default: true).
+ *
+ * Usage: Hold Shift+Cmd (Mac) or Shift+Ctrl (Windows/Linux) and hover over elements.
+ */
+
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
+type KeyboardKey = ModifierKey | (string & {})
+
+export type SourceInspectorProps = {
+  /**
+   * The hotkey combination to activate the inspector.
+   * Hold these keys and hover over elements to see their source location.
+   * @default ['Shift', 'Meta'] on Mac, ['Shift', 'Control'] on Windows/Linux
+   * @deprecated - hotkey is now configured in the devtools script
+   */
+  hotkey?: KeyboardKey[]
+  /**
+   * Whether the source inspector is enabled
+   * @default true in development
+   * @deprecated - enabled status is controlled via devtools.inspector config
+   */
+  enabled?: boolean
+}
+
+/**
+ * @deprecated - Source inspector functionality is now automatically injected.
+ * This component is kept for backwards compatibility and renders nothing.
+ * Remove <SourceInspector /> from your layout for cleaner code.
+ */
+export function SourceInspector(_props: SourceInspectorProps = {}): ReactNode {
+  return null
+}

package/src/views/Try.tsx

@@ -1,22 +1,47 @@
 import React from 'react'
 
+/**
+ * Route context information passed to error boundaries.
+ * Provides details about where the error occurred.
+ */
+export type ErrorRouteInfo = {
+  /** The current pathname (e.g., "/users/123") */
+  pathname?: string
+  /** The route name/key (e.g., "users/[id]") */
+  routeName?: string
+  /** Route parameters extracted from the path */
+  params?: Record<string, string | string[]>
+  /** The error type classification */
+  errorType?: 'render' | 'loader' | 'hydration'
+  /** Component stack trace from React */
+  componentStack?: string
+}
+
 /** Props passed to a page's `ErrorBoundary` export. */
 export type ErrorBoundaryProps = {
   /** Retry rendering the component by clearing the `error` state. */
   retry: () => Promise<void>
   /** The error that was thrown. */
   error: Error
+  /** Route information about where the error occurred. */
+  route?: ErrorRouteInfo
+}
+
+type TryProps = {
+  catch: React.ComponentType<ErrorBoundaryProps>
+  children: React.ReactNode
+  /** Optional route information to pass to the error boundary */
+  routeInfo?: ErrorRouteInfo
+}
+
+type TryState = {
+  error?: Error
+  componentStack?: string
 }
 
 // No way to access `getDerivedStateFromError` from a functional component afaict.
-export class Try extends React.Component<
-  {
-    catch: React.ComponentType<ErrorBoundaryProps>
-    children: React.ReactNode
-  },
-  { error?: Error }
-> {
-  state = { error: undefined }
+export class Try extends React.Component<TryProps, TryState> {
+  state: TryState = { error: undefined, componentStack: undefined }
 
   static getDerivedStateFromError(error: Error) {
     // Force hide the splash screen if an error occurs.
@@ -25,20 +50,64 @@ export class Try extends React.Component<
     return { error }
   }
 
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Store component stack for debugging
+    this.setState({ componentStack: errorInfo.componentStack || undefined })
+
+    // Log error in development
+    if (process.env.NODE_ENV === 'development') {
+      const routeInfo = this.props.routeInfo
+      console.error(
+        `[One] Error in route${routeInfo?.routeName ? ` "${routeInfo.routeName}"` : ''}:`,
+        error,
+        '\nComponent Stack:',
+        errorInfo.componentStack
+      )
+    }
+
+    // Dispatch error event for devtools integration
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(
+        new CustomEvent('one-error', {
+          detail: {
+            error: {
+              message: error.message,
+              stack: error.stack,
+              name: error.name,
+            },
+            route: this.props.routeInfo || {},
+            componentStack: errorInfo.componentStack,
+            timestamp: Date.now(),
+            type: 'render',
+          },
+        })
+      )
+    }
+  }
+
   retry = () => {
     return new Promise<void>((resolve) => {
-      this.setState({ error: undefined }, () => {
+      this.setState({ error: undefined, componentStack: undefined }, () => {
         resolve()
       })
     })
   }
 
   render() {
-    const { error } = this.state
-    const { catch: ErrorBoundary, children } = this.props
+    const { error, componentStack } = this.state
+    const { catch: ErrorBoundary, children, routeInfo } = this.props
+
     if (!error) {
       return children
     }
-    return <ErrorBoundary error={error} retry={this.retry} />
+
+    // Combine route info with component stack
+    const enhancedRouteInfo: ErrorRouteInfo = {
+      ...routeInfo,
+      errorType: 'render',
+      componentStack,
+    }
+
+    return <ErrorBoundary error={error} retry={this.retry} route={enhancedRouteInfo} />
   }
 }