feat: add useStdout and useIsScreenReaderEnabled hooks for ink-picture

- Add StdoutContext.Provider and AccessibilityContext.Provider to App render tree
- Export useStdout/useIsScreenReaderEnabled from src/ink entry point
- Pass writeToStdout from Ink class to App for raw escape sequence output
- Create LocalPicture.test.tsx visual test for local image display

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/ink-picture/__tests__/LocalPicture.test.tsx

@@ -0,0 +1,38 @@
+#!/usr/bin/env bun
+/**
+ * Visual test: display a local image using ink-picture + Ink.
+ *
+ * Usage:
+ *   bun run src/ink-picture/__tests__/LocalPicture.test.tsx
+ */
+
+import React, { useEffect } from 'react'
+import { render, Box, useApp } from 'ink'
+import Image, { InkPictureProvider } from '../index.ts'
+
+const IMAGE_PATH = '/home/yuki/Pictures/Wallpapers/3god.jpg'
+
+const cols = process.stdout.columns ?? 80
+const rows = process.stdout.rows ?? 40
+const imgWidth = Math.floor(cols * 0.6)
+const imgHeight = Math.floor(rows * 0.4)
+
+function App() {
+  const { exit } = useApp()
+
+  useEffect(() => {
+    const timer = setTimeout(() => exit(), 3000)
+    return () => clearTimeout(timer)
+  }, [exit])
+
+  return (
+    <Box flexDirection="column">
+      <InkPictureProvider>
+        <Image src={IMAGE_PATH} width={imgWidth} height={imgHeight} alt="3god" />
+      </InkPictureProvider>
+    </Box>
+  )
+}
+
+const { waitUntilExit } = render(<App />)
+await waitUntilExit()

src/ink.ts

@@ -76,6 +76,8 @@ export { default as useInput } from './ink/hooks/use-input.js'
 export { useAnimationTimer, useInterval } from './ink/hooks/use-interval.js'
 export { useSelection } from './ink/hooks/use-selection.js'
 export { default as useStdin } from './ink/hooks/use-stdin.js'
+export { default as useStdout } from './ink/hooks/use-stdout.js'
+export { default as useIsScreenReaderEnabled } from './ink/hooks/use-is-screen-reader-enabled.js'
 export { useTabStatus } from './ink/hooks/use-tab-status.js'
 export { useTerminalFocus } from './ink/hooks/use-terminal-focus.js'
 export { useTerminalTitle } from './ink/hooks/use-terminal-title.js'

src/ink/components/AccessibilityContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react'
+
+type AccessibilityContextValue = {
+	readonly isScreenReaderEnabled: boolean
+}
+
+const AccessibilityContext = createContext<AccessibilityContextValue>({
+	isScreenReaderEnabled: false,
+})
+
+AccessibilityContext.displayName = 'AccessibilityContext'
+
+export default AccessibilityContext
+
+export function useAccessibility(): AccessibilityContextValue {
+	return useContext(AccessibilityContext)
+}

src/ink/components/App.tsx

@@ -21,6 +21,8 @@ import { ClockProvider } from './ClockContext.js';
 import CursorDeclarationContext, { type CursorDeclarationSetter } from './CursorDeclarationContext.js';
 import ErrorOverview from './ErrorOverview.js';
 import StdinContext from './StdinContext.js';
+import StdoutContext from './StdoutContext.js';
+import AccessibilityContext from './AccessibilityContext.js';
 import { TerminalFocusProvider } from './TerminalFocusContext.js';
 import { TerminalSizeContext } from './TerminalSizeContext.js';
 
@@ -38,6 +40,7 @@ type Props = {
   readonly stdin: NodeJS.ReadStream;
   readonly stdout: NodeJS.WriteStream;
   readonly stderr: NodeJS.WriteStream;
+  readonly writeToStdout: (data: string) => void;
   readonly exitOnCtrlC: boolean;
   readonly onExit: (error?: Error) => void;
   readonly terminalColumns: number;
@@ -170,7 +173,11 @@ export default class App extends PureComponent<Props, State> {
             <TerminalFocusProvider>
               <ClockProvider>
                 <CursorDeclarationContext.Provider value={this.props.onCursorDeclaration ?? (() => {})}>
-                  {this.state.error ? <ErrorOverview error={this.state.error as Error} /> : this.props.children}
+                  <StdoutContext.Provider value={{ stdout: this.props.stdout, write: this.props.writeToStdout }}>
+                    <AccessibilityContext.Provider value={{ isScreenReaderEnabled: false }}>
+                      {this.state.error ? <ErrorOverview error={this.state.error as Error} /> : this.props.children}
+                    </AccessibilityContext.Provider>
+                  </StdoutContext.Provider>
                 </CursorDeclarationContext.Provider>
               </ClockProvider>
             </TerminalFocusProvider>

src/ink/components/StdoutContext.tsx

@@ -2,6 +2,11 @@ import { createContext, useContext } from 'react'
 
 export type Props = {
 	readonly stdout: NodeJS.WriteStream & { readonly rows: number; readonly columns: number }
+	/**
+	 * Write any string to stdout while preserving Ink's output.
+	 * Useful for emitting raw escape sequences (e.g. image protocols)
+	 * outside of Ink's normal render loop.
+	 */
 	readonly write: (data: string) => void
 }
 
@@ -12,4 +17,8 @@ const StdoutContext = createContext<Props>({
 
 StdoutContext.displayName = 'StdoutContext'
 
-export default StdoutContext
+export default StdoutContext
+
+export function useStdout(): Props {
+	return useContext(StdoutContext)
+}

src/ink/hooks/use-is-screen-reader-enabled.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { useAccessibility } from '../components/AccessibilityContext.js'
+
+/**
+ * Hook that returns whether a screen reader is enabled.
+ * Useful when components need to render different output for screen readers.
+ */
+export default function useIsScreenReaderEnabled(): boolean {
+	const { isScreenReaderEnabled } = useAccessibility()
+	return isScreenReaderEnabled
+}

src/ink/hooks/use-stdout.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import StdoutContext from '../components/StdoutContext.js'
+
+/**
+ * A React hook that returns the stdout stream where Ink renders your app,
+ * plus a `write` function for emitting raw data to stdout outside of Ink's
+ * normal render loop (e.g. for inline image protocols).
+ */
+export default function useStdout() {
+	return useContext(StdoutContext)
+}

src/ink/ink.tsx

@@ -1441,7 +1441,7 @@ export default class Ink {
   };
   render(node: ReactNode): void {
     this.currentNode = node;
-    const tree = <App stdin={this.options.stdin} stdout={this.options.stdout} stderr={this.options.stderr} exitOnCtrlC={this.options.exitOnCtrlC} onExit={this.unmount} terminalColumns={this.terminalColumns} terminalRows={this.terminalRows} selection={this.selection} onSelectionChange={this.notifySelectionChange} onClickAt={this.dispatchClick} onHoverAt={this.dispatchHover} getHyperlinkAt={this.getHyperlinkAt} onOpenHyperlink={this.openHyperlink} onMultiClick={this.handleMultiClick} onSelectionDrag={this.handleSelectionDrag} onStdinResume={this.reassertTerminalModes} onCursorDeclaration={this.setCursorDeclaration} dispatchKeyboardEvent={this.dispatchKeyboardEvent}>
+    const tree = <App stdin={this.options.stdin} stdout={this.options.stdout} stderr={this.options.stderr} writeToStdout={this.writeRaw} exitOnCtrlC={this.options.exitOnCtrlC} onExit={this.unmount} terminalColumns={this.terminalColumns} terminalRows={this.terminalRows} selection={this.selection} onSelectionChange={this.notifySelectionChange} onClickAt={this.dispatchClick} onHoverAt={this.dispatchHover} getHyperlinkAt={this.getHyperlinkAt} onOpenHyperlink={this.openHyperlink} onMultiClick={this.handleMultiClick} onSelectionDrag={this.handleSelectionDrag} onStdinResume={this.reassertTerminalModes} onCursorDeclaration={this.setCursorDeclaration} dispatchKeyboardEvent={this.dispatchKeyboardEvent}>
         <TerminalWriteProvider value={this.writeRaw}>
           {node}
         </TerminalWriteProvider>