@alchemy.run/sigil 0.0.0-alpha.1 → 0.0.0-alpha.3

package/README.md

@@ -60,19 +60,19 @@ import React, { useState, useEffect } from "react";
 import { render, Text } from "@alchemy.run/sigil";
 
 const Counter = () => {
-	const [counter, setCounter] = useState(0);
+  const [counter, setCounter] = useState(0);
 
-	useEffect(() => {
-		const timer = setInterval(() => {
-			setCounter((previousCounter) => previousCounter + 1);
-		}, 100);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCounter((previousCounter) => previousCounter + 1);
+    }, 100);
 
-		return () => {
-			clearInterval(timer);
-		};
-	}, []);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
 
-	return <Text color="green">{counter} tests passed</Text>;
+  return <Text color="green">{counter} tests passed</Text>;
 };
 
 render(<Counter />);
@@ -202,7 +202,7 @@ npm install --save-dev @babel/preset-react
 
 ```json
 {
-	"presets": ["@babel/preset-react"]
+  "presets": ["@babel/preset-react"]
 }
 ```
 
@@ -266,18 +266,18 @@ This component can display text and change its style to make it bold, underlined
 import { render, Text } from "@alchemy.run/sigil";
 
 const Example = () => (
-	<>
-		<Text color="green">I am green</Text>
-		<Text color="black" backgroundColor="white">
-			I am black on white
-		</Text>
-		<Text color="#ffffff">I am white</Text>
-		<Text bold>I am bold</Text>
-		<Text italic>I am italic</Text>
-		<Text underline>I am underline</Text>
-		<Text strikethrough>I am strikethrough</Text>
-		<Text inverse>I am inversed</Text>
-	</>
+  <>
+    <Text color="green">I am green</Text>
+    <Text color="black" backgroundColor="white">
+      I am black on white
+    </Text>
+    <Text color="#ffffff">I am white</Text>
+    <Text bold>I am bold</Text>
+    <Text italic>I am italic</Text>
+    <Text underline>I am underline</Text>
+    <Text strikethrough>I am strikethrough</Text>
+    <Text inverse>I am inversed</Text>
+  </>
 );
 
 render(<Example />);
@@ -324,7 +324,7 @@ Dim the color (make it less bright).
 
 ```jsx
 <Text color="red" dimColor>
-	Dimmed Red
+  Dimmed Red
 </Text>
 ```
 
@@ -367,7 +367,7 @@ Invert background and foreground colors.
 
 ```jsx
 <Text inverse color="yellow">
-	Inversed Yellow
+  Inversed Yellow
 </Text>
 ```
 
@@ -421,9 +421,9 @@ It's like `<div style="display: flex">` in the browser.
 import { render, Box, Text } from "@alchemy.run/sigil";
 
 const Example = () => (
-	<Box margin={2}>
-		<Text>This is a box with margin</Text>
-	</Box>
+  <Box margin={2}>
+    <Text>This is a box with margin</Text>
+  </Box>
 );
 
 render(<Example />);
@@ -440,17 +440,17 @@ You can also set it as a percentage, which will calculate the width based on the
 
 ```jsx
 <Box width={4}>
-	<Text>X</Text>
+  <Text>X</Text>
 </Box>
 //=> 'X   '
 ```
 
 ```jsx
 <Box width={10}>
-	<Box width="50%">
-		<Text>X</Text>
-	</Box>
-	<Text>Y</Text>
+  <Box width="50%">
+    <Text>X</Text>
+  </Box>
+  <Text>Y</Text>
 </Box>
 //=> 'X    Y'
 ```
@@ -464,17 +464,17 @@ You can also set it as a percentage, which will calculate the height based on th
 
 ```jsx
 <Box height={4}>
-	<Text>X</Text>
+  <Text>X</Text>
 </Box>
 //=> 'X\n\n\n'
 ```
 
 ```jsx
 <Box height={6} flexDirection="column">
-	<Box height="50%">
-		<Text>X</Text>
-	</Box>
-	<Text>Y</Text>
+  <Box height="50%">
+    <Text>X</Text>
+  </Box>
+  <Text>Y</Text>
 </Box>
 //=> 'X\n\n\nY\n\n'
 ```
@@ -648,9 +648,9 @@ Size of the gap between an element's columns and rows. A shorthand for `columnGa
 
 ```jsx
 <Box gap={1} width={3} flexWrap="wrap">
-	<Text>A</Text>
-	<Text>B</Text>
-	<Text>C</Text>
+  <Text>A</Text>
+  <Text>B</Text>
+  <Text>C</Text>
 </Box>
 // A B
 //
@@ -666,8 +666,8 @@ Size of the gap between an element's columns.
 
 ```jsx
 <Box columnGap={1}>
-	<Text>A</Text>
-	<Text>B</Text>
+  <Text>A</Text>
+  <Text>B</Text>
 </Box>
 // A B
 ```
@@ -681,8 +681,8 @@ Size of the gap between an element's rows.
 
 ```jsx
 <Box flexDirection="column" rowGap={1}>
-	<Text>A</Text>
-	<Text>B</Text>
+  <Text>A</Text>
+  <Text>B</Text>
 </Box>
 // A
 //
@@ -700,10 +700,10 @@ See [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).
 
 ```jsx
 <Box>
-	<Text>Label:</Text>
-	<Box flexGrow={1}>
-		<Text>Fills all remaining space</Text>
-	</Box>
+  <Text>Label:</Text>
+  <Box flexGrow={1}>
+    <Text>Fills all remaining space</Text>
+  </Box>
 </Box>
 ```
 
@@ -716,12 +716,12 @@ See [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).
 
 ```jsx
 <Box width={20}>
-	<Box flexShrink={2} width={10}>
-		<Text>Will be 1/4</Text>
-	</Box>
-	<Box width={10}>
-		<Text>Will be 3/4</Text>
-	</Box>
+  <Box flexShrink={2} width={10}>
+    <Text>Will be 1/4</Text>
+  </Box>
+  <Box width={10}>
+    <Text>Will be 3/4</Text>
+  </Box>
 </Box>
 ```
 
@@ -733,20 +733,20 @@ See [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).
 
 ```jsx
 <Box width={6}>
-	<Box flexBasis={3}>
-		<Text>X</Text>
-	</Box>
-	<Text>Y</Text>
+  <Box flexBasis={3}>
+    <Text>X</Text>
+  </Box>
+  <Text>Y</Text>
 </Box>
 //=> 'X  Y'
 ```
 
 ```jsx
 <Box width={6}>
-	<Box flexBasis="50%">
-		<Text>X</Text>
-	</Box>
-	<Text>Y</Text>
+  <Box flexBasis="50%">
+    <Text>X</Text>
+  </Box>
+  <Text>Y</Text>
 </Box>
 //=> 'X  Y'
 ```
@@ -799,8 +799,8 @@ See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).
 
 ```jsx
 <Box width={2} flexWrap="wrap">
-	<Text>A</Text>
-	<Text>BC</Text>
+  <Text>A</Text>
+  <Text>BC</Text>
 </Box>
 // A
 // B C
@@ -808,9 +808,9 @@ See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).
 
 ```jsx
 <Box flexDirection="column" height={2} flexWrap="wrap">
-	<Text>A</Text>
-	<Text>B</Text>
-	<Text>C</Text>
+  <Text>A</Text>
+  <Text>B</Text>
+  <Text>C</Text>
 </Box>
 // A C
 // B
@@ -1049,37 +1049,37 @@ Ink uses border styles from the [`cli-boxes`](https://github.com/sindresorhus/cl
 
 ```jsx
 <Box flexDirection="column">
-	<Box>
-		<Box borderStyle="single" marginRight={2}>
-			<Text>single</Text>
-		</Box>
-
-		<Box borderStyle="double" marginRight={2}>
-			<Text>double</Text>
-		</Box>
-
-		<Box borderStyle="round" marginRight={2}>
-			<Text>round</Text>
-		</Box>
-
-		<Box borderStyle="bold">
-			<Text>bold</Text>
-		</Box>
-	</Box>
-
-	<Box marginTop={1}>
-		<Box borderStyle="singleDouble" marginRight={2}>
-			<Text>singleDouble</Text>
-		</Box>
-
-		<Box borderStyle="doubleSingle" marginRight={2}>
-			<Text>doubleSingle</Text>
-		</Box>
-
-		<Box borderStyle="classic">
-			<Text>classic</Text>
-		</Box>
-	</Box>
+  <Box>
+    <Box borderStyle="single" marginRight={2}>
+      <Text>single</Text>
+    </Box>
+
+    <Box borderStyle="double" marginRight={2}>
+      <Text>double</Text>
+    </Box>
+
+    <Box borderStyle="round" marginRight={2}>
+      <Text>round</Text>
+    </Box>
+
+    <Box borderStyle="bold">
+      <Text>bold</Text>
+    </Box>
+  </Box>
+
+  <Box marginTop={1}>
+    <Box borderStyle="singleDouble" marginRight={2}>
+      <Text>singleDouble</Text>
+    </Box>
+
+    <Box borderStyle="doubleSingle" marginRight={2}>
+      <Text>doubleSingle</Text>
+    </Box>
+
+    <Box borderStyle="classic">
+      <Text>classic</Text>
+    </Box>
+  </Box>
 </Box>
 ```
 
@@ -1089,18 +1089,18 @@ Alternatively, pass a custom border style like so:
 
 ```jsx
 <Box
-	borderStyle={{
-		topLeft: "↘",
-		top: "↓",
-		topRight: "↙",
-		left: "→",
-		bottomLeft: "↗",
-		bottom: "↑",
-		bottomRight: "↖",
-		right: "←",
-	}}
+  borderStyle={{
+    topLeft: "↘",
+    top: "↓",
+    topRight: "↙",
+    left: "→",
+    bottomLeft: "↗",
+    bottom: "↑",
+    bottomRight: "↖",
+    right: "←",
+  }}
 >
-	<Text>Custom</Text>
+  <Text>Custom</Text>
 </Box>
 ```
 
@@ -1115,7 +1115,7 @@ A shorthand for setting `borderTopColor`, `borderRightColor`, `borderBottomColor
 
 ```jsx
 <Box borderStyle="round" borderColor="green">
-	<Text>Green Rounded Box</Text>
+  <Text>Green Rounded Box</Text>
 </Box>
 ```
 
@@ -1130,7 +1130,7 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
 
 ```jsx
 <Box borderStyle="round" borderTopColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1143,7 +1143,7 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
 
 ```jsx
 <Box borderStyle="round" borderRightColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1156,7 +1156,7 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
 
 ```jsx
 <Box borderStyle="round" borderBottomColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1169,7 +1169,7 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
 
 ```jsx
 <Box borderStyle="round" borderLeftColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1183,7 +1183,7 @@ A shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeft
 
 ```jsx
 <Box borderStyle="round" borderDimColor>
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1196,7 +1196,7 @@ Dim the top border color.
 
 ```jsx
 <Box borderStyle="round" borderTopDimColor>
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1209,7 +1209,7 @@ Dim the bottom border color.
 
 ```jsx
 <Box borderStyle="round" borderBottomDimColor>
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1222,7 +1222,7 @@ Dim the left border color.
 
 ```jsx
 <Box borderStyle="round" borderLeftDimColor>
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1235,7 +1235,7 @@ Dim the right border color.
 
 ```jsx
 <Box borderStyle="round" borderRightDimColor>
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1249,7 +1249,7 @@ A shorthand for setting `borderTopBackgroundColor`, `borderRightBackgroundColor`
 
 ```jsx
 <Box borderStyle="round" borderColor="white" borderBackgroundColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1263,7 +1263,7 @@ Falls back to `borderBackgroundColor` if not specified.
 
 ```jsx
 <Box borderStyle="round" borderColor="white" borderTopBackgroundColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1277,7 +1277,7 @@ Falls back to `borderBackgroundColor` if not specified.
 
 ```jsx
 <Box borderStyle="round" borderColor="white" borderBottomBackgroundColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1291,7 +1291,7 @@ Falls back to `borderBackgroundColor` if not specified.
 
 ```jsx
 <Box borderStyle="round" borderColor="white" borderRightBackgroundColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1305,7 +1305,7 @@ Falls back to `borderBackgroundColor` if not specified.
 
 ```jsx
 <Box borderStyle="round" borderColor="white" borderLeftBackgroundColor="green">
-	<Text>Hello world</Text>
+  <Text>Hello world</Text>
 </Box>
 ```
 
@@ -1349,17 +1349,17 @@ Accepts the same values as [`color`](#color) in the `<Text>` component.
 
 ```jsx
 <Box flexDirection="column">
-	<Box backgroundColor="red" width={20} height={5} alignSelf="flex-start">
-		<Text>Red background</Text>
-	</Box>
+  <Box backgroundColor="red" width={20} height={5} alignSelf="flex-start">
+    <Text>Red background</Text>
+  </Box>
 
-	<Box backgroundColor="#FF8800" width={20} height={3} marginTop={1} alignSelf="flex-start">
-		<Text>Orange background</Text>
-	</Box>
+  <Box backgroundColor="#FF8800" width={20} height={3} marginTop={1} alignSelf="flex-start">
+    <Text>Orange background</Text>
+  </Box>
 
-	<Box backgroundColor="rgb(0, 255, 0)" width={20} height={3} marginTop={1} alignSelf="flex-start">
-		<Text>Green background</Text>
-	</Box>
+  <Box backgroundColor="rgb(0, 255, 0)" width={20} height={3} marginTop={1} alignSelf="flex-start">
+    <Text>Green background</Text>
+  </Box>
 </Box>
 ```
 
@@ -1367,9 +1367,9 @@ The background color fills the entire `<Box>` area and is inherited by child `<T
 
 ```jsx
 <Box backgroundColor="blue" alignSelf="flex-start">
-	<Text>Blue inherited </Text>
-	<Text backgroundColor="yellow">Yellow override </Text>
-	<Text>Blue inherited again</Text>
+  <Text>Blue inherited </Text>
+  <Text backgroundColor="yellow">Yellow override </Text>
+  <Text>Blue inherited again</Text>
 </Box>
 ```
 
@@ -1377,7 +1377,7 @@ Background colors work with borders and padding:
 
 ```jsx
 <Box backgroundColor="cyan" borderStyle="round" padding={1} alignSelf="flex-start">
-	<Text>Background with border and padding</Text>
+  <Text>Background with border and padding</Text>
 </Box>
 ```
 
@@ -1399,11 +1399,11 @@ Number of newlines to insert.
 import { render, Text, Newline } from "@alchemy.run/sigil";
 
 const Example = () => (
-	<Text>
-		<Text color="green">Hello</Text>
-		<Newline />
-		<Text color="red">World</Text>
-	</Text>
+  <Text>
+    <Text color="green">Hello</Text>
+    <Newline />
+    <Text color="red">World</Text>
+  </Text>
 );
 
 render(<Example />);
@@ -1427,11 +1427,11 @@ For example, using `<Spacer>` in a `<Box>` with default flex direction (`row`) w
 import { render, Box, Text, Spacer } from "@alchemy.run/sigil";
 
 const Example = () => (
-	<Box>
-		<Text>Left</Text>
-		<Spacer />
-		<Text>Right</Text>
-	</Box>
+  <Box>
+    <Text>Left</Text>
+    <Spacer />
+    <Text>Right</Text>
+  </Box>
 );
 
 render(<Example />);
@@ -1444,11 +1444,11 @@ Note that the container needs to be tall enough to see this in effect.
 import { render, Box, Text, Spacer } from "@alchemy.run/sigil";
 
 const Example = () => (
-	<Box flexDirection="column" height={10}>
-		<Text>Top</Text>
-		<Spacer />
-		<Text>Bottom</Text>
-	</Box>
+  <Box flexDirection="column" height={10}>
+    <Text>Top</Text>
+    <Spacer />
+    <Text>Bottom</Text>
+  </Box>
 );
 
 render(<Example />);
@@ -1472,51 +1472,51 @@ import React, { useState, useEffect } from "react";
 import { render, Static, Box, Text } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const [tests, setTests] = useState([]);
-
-	useEffect(() => {
-		let completedTests = 0;
-		let timer;
-
-		const run = () => {
-			// Fake 10 completed tests
-			if (completedTests++ < 10) {
-				setTests((previousTests) => [
-					...previousTests,
-					{
-						id: previousTests.length,
-						title: `Test #${previousTests.length + 1}`,
-					},
-				]);
-
-				timer = setTimeout(run, 100);
-			}
-		};
-
-		run();
-
-		return () => {
-			clearTimeout(timer);
-		};
-	}, []);
-
-	return (
-		<>
-			{/* This part will be rendered once to the terminal */}
-			<Static items={tests}>
-				{(test) => (
-					<Box key={test.id}>
-						<Text color="green">✔ {test.title}</Text>
-					</Box>
-				)}
-			</Static>
-
-			{/* This part keeps updating as state changes */}
-			<Box marginTop={1}>
-				<Text dimColor>Completed tests: {tests.length}</Text>
-			</Box>
-		</>
-	);
+  const [tests, setTests] = useState([]);
+
+  useEffect(() => {
+    let completedTests = 0;
+    let timer;
+
+    const run = () => {
+      // Fake 10 completed tests
+      if (completedTests++ < 10) {
+        setTests((previousTests) => [
+          ...previousTests,
+          {
+            id: previousTests.length,
+            title: `Test #${previousTests.length + 1}`,
+          },
+        ]);
+
+        timer = setTimeout(run, 100);
+      }
+    };
+
+    run();
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* This part will be rendered once to the terminal */}
+      <Static items={tests}>
+        {(test) => (
+          <Box key={test.id}>
+            <Text color="green">✔ {test.title}</Text>
+          </Box>
+        )}
+      </Static>
+
+      {/* This part keeps updating as state changes */}
+      <Box marginTop={1}>
+        <Text dimColor>Completed tests: {tests.length}</Text>
+      </Box>
+    </>
+  );
 };
 
 render(<Example />);
@@ -1558,16 +1558,16 @@ Note that a `key` must be assigned to the root component.
 
 ```jsx
 <Static items={["a", "b", "c"]}>
-	{(item, index) => {
-		// This function is called for every item in ['a', 'b', 'c']
-		// `item` is 'a', 'b', 'c'
-		// `index` is 0, 1, 2
-		return (
-			<Box key={index}>
-				<Text>Item: {item}</Text>
-			</Box>
-		);
-	}}
+  {(item, index) => {
+    // This function is called for every item in ['a', 'b', 'c']
+    // `item` is 'a', 'b', 'c'
+    // `index` is 0, 1, 2
+    return (
+      <Box key={index}>
+        <Text>Item: {item}</Text>
+      </Box>
+    );
+  }}
 </Static>
 ```
 
@@ -1588,9 +1588,9 @@ That's what the `<Transform>` component does: it gives you an output string of i
 import { render, Transform } from "@alchemy.run/sigil";
 
 const Example = () => (
-	<Transform transform={(output) => output.toUpperCase()}>
-		<Text>Hello World</Text>
-	</Transform>
+  <Transform transform={(output) => output.toUpperCase()}>
+    <Text>Hello World</Text>
+  </Transform>
 );
 
 render(<Example />);
@@ -1606,18 +1606,18 @@ For example, to implement a hanging indent component, you can indent all the lin
 import { render, Transform } from "@alchemy.run/sigil";
 
 const HangingIndent = ({ indent = 4, children }) => (
-	<Transform transform={(line, index) => (index === 0 ? line : " ".repeat(indent) + line)}>
-		{children}
-	</Transform>
+  <Transform transform={(line, index) => (index === 0 ? line : " ".repeat(indent) + line)}>
+    {children}
+  </Transform>
 );
 
 const text =
-	"WHEN I WROTE the following pages, or rather the bulk of them, " +
-	"I lived alone, in the woods, a mile from any neighbor, in a " +
-	"house which I had built myself, on the shore of Walden Pond, " +
-	"in Concord, Massachusetts, and earned my living by the labor " +
-	"of my hands only. I lived there two years and two months. At " +
-	"present I am a sojourner in civilized life again.";
+  "WHEN I WROTE the following pages, or rather the bulk of them, " +
+  "I lived alone, in the woods, a mile from any neighbor, in a " +
+  "house which I had built myself, on the shore of Walden Pond, " +
+  "in Concord, Massachusetts, and earned my living by the labor " +
+  "of my hands only. I lived there two years and two months. At " +
+  "present I am a sojourner in civilized life again.";
 
 render(<HangingIndent indent={4}>{text}</HangingIndent>);
 ```
@@ -1955,7 +1955,7 @@ import { useApp } from "@alchemy.run/sigil";
 const { suspendTerminal } = useApp();
 
 await suspendTerminal(async () => {
-	await runEditor();
+  await runEditor();
 });
 ```
 
@@ -1965,9 +1965,9 @@ When called without a callback, it returns a suspension you resume yourself. `re
 const suspension = await suspendTerminal();
 
 try {
-	await runEditor();
+  await runEditor();
 } finally {
-	await suspension.resume();
+  await suspension.resume();
 }
 ```
 
@@ -2013,9 +2013,9 @@ A component using `setRawMode` might want to use `isRawModeSupported` to nicely
 import { useStdin } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const { isRawModeSupported } = useStdin();
+  const { isRawModeSupported } = useStdin();
 
-	return isRawModeSupported ? <MyInputComponent /> : <MyComponentThatDoesntUseInput />;
+  return isRawModeSupported ? <MyInputComponent /> : <MyComponentThatDoesntUseInput />;
 };
 ```
 
@@ -2116,14 +2116,14 @@ import { useRef } from "react";
 import { Box, Text, useBoxMetrics } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const ref = useRef(null);
-	const { width, height, left, top, hasMeasured } = useBoxMetrics(ref);
-
-	return (
-		<Box ref={ref}>
-			<Text>{hasMeasured ? `${width}x${height} at ${left},${top}` : "Measuring..."}</Text>
-		</Box>
-	);
+  const ref = useRef(null);
+  const { width, height, left, top, hasMeasured } = useBoxMetrics(ref);
+
+  return (
+    <Box ref={ref}>
+      <Text>{hasMeasured ? `${width}x${height} at ${left},${top}` : "Measuring..."}</Text>
+    </Box>
+  );
 };
 ```
 
@@ -2217,13 +2217,13 @@ A React hook that returns the current terminal dimensions and re-renders the com
 import { Text, useWindowSize } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const { columns, rows } = useWindowSize();
+  const { columns, rows } = useWindowSize();
 
-	return (
-		<Text>
-			{columns}x{rows}
-		</Text>
-	);
+  return (
+    <Text>
+      {columns}x{rows}
+    </Text>
+  );
 };
 ```
 
@@ -2277,9 +2277,9 @@ Set a component's focus ID, which can be used to programmatically focus the comp
 import { render, useFocus, Text } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const { isFocused } = useFocus();
+  const { isFocused } = useFocus();
 
-	return <Text>{isFocused ? "I am focused" : "I am not focused"}</Text>;
+  return <Text>{isFocused ? "I am focused" : "I am not focused"}</Text>;
 };
 
 render(<Example />);
@@ -2413,9 +2413,9 @@ The ID of the currently focused component, or `undefined` if no component is foc
 import { Text, useFocusManager } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const { activeId } = useFocusManager();
+  const { activeId } = useFocusManager();
 
-	return <Text>Focused: {activeId ?? "none"}</Text>;
+  return <Text>Focused: {activeId ?? "none"}</Text>;
 };
 ```
 
@@ -2430,21 +2430,21 @@ import { Box, Text, useCursor } from "@alchemy.run/sigil";
 import stringWidth from "string-width";
 
 const TextInput = () => {
-	const [text, setText] = useState("");
-	const { setCursorPosition } = useCursor();
-
-	const prompt = "> ";
-	setCursorPosition({ x: stringWidth(prompt + text), y: 1 });
-
-	return (
-		<Box flexDirection="column">
-			<Text>Type here:</Text>
-			<Text>
-				{prompt}
-				{text}
-			</Text>
-		</Box>
-	);
+  const [text, setText] = useState("");
+  const { setCursorPosition } = useCursor();
+
+  const prompt = "> ";
+  setCursorPosition({ x: stringWidth(prompt + text), y: 1 });
+
+  return (
+    <Box flexDirection="column">
+      <Text>Type here:</Text>
+      <Text>
+        {prompt}
+        {text}
+      </Text>
+    </Box>
+  );
 };
 ```
 
@@ -2481,11 +2481,11 @@ This is useful when you want to render different output for screen readers.
 import { useIsScreenReaderEnabled, Text } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
-	return (
-		<Text>{isScreenReaderEnabled ? "Screen reader is enabled" : "Screen reader is disabled"}</Text>
-	);
+  return (
+    <Text>{isScreenReaderEnabled ? "Screen reader is enabled" : "Screen reader is disabled"}</Text>
+  );
 };
 ```
 
@@ -2497,10 +2497,10 @@ A React hook that drives animations. Returns a frame counter, elapsed time, fram
 import { Text, useAnimation } from "@alchemy.run/sigil";
 
 const Spinner = () => {
-	const { frame } = useAnimation({ interval: 80 });
-	const characters = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+  const { frame } = useAnimation({ interval: 80 });
+  const characters = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
-	return <Text>{characters[frame % characters.length]}</Text>;
+  return <Text>{characters[frame % characters.length]}</Text>;
 };
 ```
 
@@ -2622,11 +2622,11 @@ Return `true` to take ownership of a chunk: Ink will not display it, letting the
 const [transcript, setTranscript] = useState([]);
 
 render(<App transcript={transcript} />, {
-	patchConsole: "stdio",
-	onCapturedOutput(stream, data) {
-		setTranscript((previous) => [...previous, { stream, data }]);
-		return true;
-	},
+  patchConsole: "stdio",
+  onCapturedOutput(stream, data) {
+    setTranscript((previous) => [...previous, { stream, data }]);
+    return true;
+  },
 });
 ```
 
@@ -2642,7 +2642,7 @@ To run code after output is flushed, use [`waitUntilRenderFlush()`](#waituntilre
 ###### isScreenReaderEnabled
 
 Type: `boolean`\
-Default: `process.env['INK_SCREEN_READER'] === 'true'`
+Default: `process.env['SIGIL_SCREEN_READER'] === 'true'`
 
 Enable screen reader support. See [Screen Reader Support](#screen-reader-support).
 
@@ -2748,10 +2748,10 @@ render(<MyApp />, { kittyKeyboard: { mode: "auto" } });
 import { render } from "@alchemy.run/sigil";
 
 render(<MyApp />, {
-	kittyKeyboard: {
-		mode: "enabled",
-		flags: ["disambiguateEscapeCodes", "reportEventTypes"],
-	},
+  kittyKeyboard: {
+    mode: "enabled",
+    flags: ["disambiguateEscapeCodes", "reportEventTypes"],
+  },
 });
 ```
 
@@ -2803,9 +2803,9 @@ Useful for generating documentation, writing output to files, testing, or any sc
 import { renderToString, Text, Box } from "@alchemy.run/sigil";
 
 const output = renderToString(
-	<Box padding={1}>
-		<Text color="green">Hello World</Text>
-	</Box>,
+  <Box padding={1}>
+    <Text color="green">Hello World</Text>
+  </Box>,
 );
 
 console.log(output);
@@ -2836,7 +2836,7 @@ Width of the virtual terminal in columns. Controls where text wrapping occurs.
 
 ```jsx
 const output = renderToString(<Text>{"A".repeat(100)}</Text>, {
-	columns: 40,
+  columns: 40,
 });
 // Text wraps at 40 columns
 ```
@@ -2938,20 +2938,20 @@ See [Refs](https://reactjs.org/docs/refs-and-the-dom.html) for more information
 import { render, measureElement, Box, Text } from "@alchemy.run/sigil";
 
 const Example = () => {
-	const ref = useRef();
-
-	useEffect(() => {
-		const { x, y, width, height } = measureElement(ref.current);
-		// x = 0, y = 0, width = 100, height = 1
-	}, []);
-
-	return (
-		<Box width={100}>
-			<Box ref={ref}>
-				<Text>This box will stretch to 100 width</Text>
-			</Box>
-		</Box>
-	);
+  const ref = useRef();
+
+  useEffect(() => {
+    const { x, y, width, height } = measureElement(ref.current);
+    // x = 0, y = 0, width = 100, height = 1
+  }, []);
+
+  return (
+    <Box width={100}>
+      <Box ref={ref}>
+        <Text>This box will stretch to 100 width</Text>
+      </Box>
+    </Box>
+  );
 };
 
 render(<Example />);
@@ -2979,10 +2979,10 @@ Check out [ink-testing-library](https://github.com/vadimdemedes/ink-testing-libr
 
 ![](media/devtools.jpg)
 
-Ink supports [React Devtools](https://github.com/facebook/react/tree/master/packages/react-devtools) out of the box. To enable integration with React Devtools in your Ink-based CLI, first ensure you have installed the optional `react-devtools-core` dependency, and then run your app with the `DEV=true` environment variable:
+Ink supports [React Devtools](https://github.com/facebook/react/tree/master/packages/react-devtools) out of the box. To enable integration with React Devtools in your Ink-based CLI, first ensure you have installed the optional `react-devtools-core` dependency, and then run your app with the `SIGIL_DEV=true` environment variable:
 
 ```sh
-DEV=true my-cli
+SIGIL_DEV=true my-cli
 ```
 
 Then, start React Devtools itself:
@@ -3001,7 +3001,7 @@ You can even inspect and change the props of components, and see the results imm
 
 Ink has basic support for screen readers.
 
-To enable it, you can either pass the `isScreenReaderEnabled` option to the `render` function or set the `INK_SCREEN_READER` environment variable to `true`.
+To enable it, you can either pass the `isScreenReaderEnabled` option to the `render` function or set the `SIGIL_SCREEN_READER` environment variable to `true`.
 
 Ink implements a small subset of functionality from the [ARIA specification](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA).
 
@@ -3015,7 +3015,7 @@ For example, for this code:
 
 ```jsx
 <Box aria-role="checkbox" aria-state={{ checked: true }}>
-	<Text>Accept terms and conditions</Text>
+  <Text>Accept terms and conditions</Text>
 </Box>
 ```
 
@@ -3031,8 +3031,8 @@ For example, if you are building a progress bar, you can use `aria-label` to pro
 
 ```jsx
 <Box>
-	<Box width="50%" height={1} backgroundColor="green" />
-	<Text aria-label="Progress: 50%">50%</Text>
+  <Box width="50%" height={1} backgroundColor="green" />
+  <Text aria-label="Progress: 50%">50%</Text>
 </Box>
 ```