टेक्स्ट और स्टाइलिंग

+जोड़ा गया: import { Text } from "@textjs/app";+जोड़ा गया: +जोड़ा गया: export type DeployStatus = "ready" | "building" | "error" | "queued";+जोड़ा गया: +जोड़ा गया: export const STATUS = {+जोड़ा गया:   ready: { label: "Ready", color: "success" },+जोड़ा गया:   building: { label: "Building", color: "warning" },+जोड़ा गया:   error: { label: "Error", color: "danger" },+जोड़ा गया:   queued: { label: "Queued", color: "subtle" },+जोड़ा गया: } as const;+जोड़ा गया: +जोड़ा गया: export function Status({ status }: { status: DeployStatus }) {+जोड़ा गया:   const s = STATUS[status];+जोड़ा गया:   return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;+जोड़ा गया: }

-हटाया गया: import { Box, Spacer, Text, useInput } from "@textjs/app";+जोड़ा गया: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";+जोड़ा गया: import { Status, STATUS, type DeployStatus } from "./status";+जोड़ा गया: +जोड़ा गया: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];+जोड़ा गया:  export default function Page() {+जोड़ा गया:   const { theme, cycleTheme } = useAppTheme();+जोड़ा गया:   const [status, setStatus] = useState<DeployStatus>("ready");+जोड़ा गया: +जोड़ा गया:   useInput((e) => {+जोड़ा गया:     if (e.input === "t") cycleTheme();+जोड़ा गया:     if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);+जोड़ा गया:   });+जोड़ा गया:    return (     <Box className="flex-col grow">       {/* top bar, now with the theme name on the right */}+जोड़ा गया:       <Box className="flex-col border rounded px-2 py-1 bg-surface">+जोड़ा गया:         <Box className="flex-row gap-2 h-1">+जोड़ा गया:           <Text bold>acme-web</Text>+जोड़ा गया:           <Status status={status} />+जोड़ा गया:         </Box>+जोड़ा गया:         <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>+जोड़ा गया:         <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>+जोड़ा गया:           dpl_8fK2+जोड़ा गया:         </Text>+जोड़ा गया:       </Box>     </Box>   ); }