akanjs 0.0.1 → 2.0.0-beta.1

package/devkit/transforms/useClientBundlePlugin.ts

@@ -0,0 +1,47 @@
+import type { BunPlugin } from "bun";
+import { transformUseClient } from "./rscUseClientTransform";
+
+/**
+ * BunPlugin that stubs `"use client"` modules so the server bundle sees
+ * `registerClientReference(proxy, absPath, name)` stubs instead of the
+ * original client code.
+ *
+ * The bundle produced by `PagesBundleBuilder` is loaded in the RSC worker
+ * with `--conditions react-server`; client components are never supposed
+ * to execute there. The resulting stub references keep the client
+ * component manifest lookups working at render time while ensuring the
+ * server bundle never drags the real client source graph in.
+ *
+ * Important: the second argument to `registerClientReference` must match the
+ * key the client manifest uses. When `workspaceRoot` is provided, both sides
+ * use workspace-relative keys so production artifacts are portable.
+ */
+export function createUseClientBundlePlugin(options: { workspaceRoot?: string } = {}): BunPlugin {
+  return {
+    name: "akan-use-client-bundle",
+    setup(build) {
+      build.onLoad({ filter: /\.(tsx|ts|jsx|js)$/ }, async (args) => {
+        if (args.path.includes("/node_modules/")) return undefined;
+        let source: string;
+        try {
+          source = await Bun.file(args.path).text();
+        } catch {
+          return undefined;
+        }
+        const stubbed = transformUseClient(source, {
+          path: args.path,
+          workspaceRoot: options.workspaceRoot,
+        });
+        if (stubbed === null) return undefined;
+        return { contents: stubbed, loader: loaderFor(args.path) };
+      });
+    },
+  };
+}
+
+function loaderFor(absPath: string): "ts" | "tsx" | "js" | "jsx" {
+  if (absPath.endsWith(".tsx")) return "tsx";
+  if (absPath.endsWith(".jsx")) return "jsx";
+  if (absPath.endsWith(".ts")) return "ts";
+  return "js";
+}

package/devkit/typeChecker.ts

@@ -0,0 +1,260 @@
+import { readFileSync } from "node:fs";
+import * as path from "node:path";
+import chalk from "chalk";
+import * as ts from "typescript";
+
+import type { Executor } from "./executors";
+
+export interface ProjectTypecheckResult {
+  configPath: string;
+  diagnostics: ts.Diagnostic[];
+  errors: ts.Diagnostic[];
+  warnings: ts.Diagnostic[];
+  message: string;
+}
+
+export class TypeChecker {
+  readonly configPath: string;
+  readonly configFile: { config?: any; error?: ts.Diagnostic };
+  readonly config: ts.ParsedCommandLine;
+  constructor(executor: Executor) {
+    const configPath = this.#findConfigFile(executor.cwdPath);
+    if (!configPath) throw new Error("No tsconfig.json found in the project");
+    this.configPath = configPath;
+    this.configFile = ts.readConfigFile(this.configPath, (fileName) => ts.sys.readFile(fileName));
+    const parsedConfig = ts.parseJsonConfigFileContent(
+      this.configFile.config,
+      ts.sys,
+      path.dirname(this.configPath),
+      undefined,
+      this.configPath,
+    );
+
+    if (parsedConfig.errors.length > 0) {
+      const errorMessages = parsedConfig.errors
+        .map((error) => ts.flattenDiagnosticMessageText(error.messageText, "\n"))
+        .join("\n");
+      throw new Error(`Error parsing tsconfig.json:\n${errorMessages}`);
+    }
+    this.config = parsedConfig;
+  }
+  /**
+   * Find tsconfig.json by walking up the directory tree
+   */
+  #findConfigFile(searchPath: string): string | undefined {
+    return ts.findConfigFile(searchPath, (fileName) => ts.sys.fileExists(fileName), "tsconfig.json");
+  }
+
+  /**
+   * Type-check a single TypeScript file
+   * @param filePath - Path to the TypeScript file to check
+   * @returns Array of diagnostic messages
+   */
+  check(filePath: string): {
+    diagnostics: ts.Diagnostic[];
+    errors: ts.Diagnostic[];
+    warnings: ts.Diagnostic[];
+    fileDiagnostics: ts.Diagnostic[];
+    fileErrors: ts.Diagnostic[];
+    fileWarnings: ts.Diagnostic[];
+  } {
+    const program = ts.createProgram([filePath], this.config.options);
+    const diagnostics = [
+      ...program.getSemanticDiagnostics(),
+      ...program.getSyntacticDiagnostics(),
+      
+      ...(this.config.options.declaration ? program.getDeclarationDiagnostics() : []),
+    ];
+    const errors = diagnostics.filter((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error);
+    const warnings = diagnostics.filter((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Warning);
+    const fileDiagnostics = diagnostics.filter((diagnostic) => diagnostic.file?.fileName === filePath);
+    const fileErrors = fileDiagnostics.filter((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error);
+    const fileWarnings = fileDiagnostics.filter((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Warning);
+    return { diagnostics, errors, warnings, fileDiagnostics, fileErrors, fileWarnings };
+  }
+
+  /**
+   * Format diagnostics for console output
+   * @param diagnostics - Array of TypeScript diagnostics
+   * @returns Formatted string
+   */
+  formatDiagnostics(diagnostics: ts.Diagnostic[]): string {
+    if (diagnostics.length === 0) return chalk.bold("✅ No type errors found");
+
+    const output: string[] = [];
+    let errorCount = 0;
+    let warningCount = 0;
+    let suggestionCount = 0;
+
+    const diagnosticsByFile = new Map<string, ts.Diagnostic[]>();
+    diagnostics.forEach((diagnostic) => {
+      if (diagnostic.category === ts.DiagnosticCategory.Error) errorCount++;
+      else if (diagnostic.category === ts.DiagnosticCategory.Warning) warningCount++;
+      else if (diagnostic.category === ts.DiagnosticCategory.Suggestion) suggestionCount++;
+
+      if (diagnostic.file) {
+        const fileName = diagnostic.file.fileName;
+        if (!diagnosticsByFile.has(fileName)) diagnosticsByFile.set(fileName, []);
+        const fileDiagnostics = diagnosticsByFile.get(fileName);
+        if (fileDiagnostics) fileDiagnostics.push(diagnostic);
+      } else {
+        if (!diagnosticsByFile.has("")) diagnosticsByFile.set("", []);
+        const fileDiagnostics = diagnosticsByFile.get("");
+        if (fileDiagnostics) fileDiagnostics.push(diagnostic);
+      }
+    });
+
+    diagnosticsByFile.forEach((fileDiagnostics, fileName) => {
+      if (fileName) output.push(`\n${chalk.cyan(fileName)}`);
+
+      fileDiagnostics.forEach((diagnostic) => {
+        const categoryText =
+          diagnostic.category === ts.DiagnosticCategory.Error
+            ? "error"
+            : diagnostic.category === ts.DiagnosticCategory.Warning
+              ? "warning"
+              : "suggestion";
+        const categoryColor =
+          diagnostic.category === ts.DiagnosticCategory.Error
+            ? chalk.red
+            : diagnostic.category === ts.DiagnosticCategory.Warning
+              ? chalk.yellow
+              : chalk.blue;
+        const icon =
+          diagnostic.category === ts.DiagnosticCategory.Error
+            ? "❌"
+            : diagnostic.category === ts.DiagnosticCategory.Warning
+              ? "⚠️"
+              : "💡";
+        const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
+        const tsCode = chalk.dim(`(TS${diagnostic.code})`);
+
+        if (diagnostic.file && diagnostic.start !== undefined) {
+          const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+
+          output.push(`\n  ${icon} ${categoryColor(categoryText)}: ${message} ${tsCode}`);
+          output.push(`     ${chalk.gray("at")} ${fileName}:${chalk.bold(`${line + 1}:${character + 1}`)}`);
+
+          const sourceLines = diagnostic.file.text.split("\n");
+          if (line < sourceLines.length) {
+            const sourceLine = sourceLines[line];
+            const lineNumber = (line + 1).toString().padStart(5, " ");
+
+            output.push(`\n${chalk.dim(`${lineNumber} |`)} ${sourceLine}`);
+
+            const underlinePrefix = " ".repeat(character);
+            const length = diagnostic.length ?? 1;
+            const underline = "~".repeat(Math.max(1, length));
+
+            output.push(
+              `${chalk.dim(`${" ".repeat(lineNumber.length)} |`)} ${underlinePrefix}${categoryColor(underline)}`,
+            );
+          }
+        } else output.push(`\n  ${icon} ${categoryColor(categoryText)}: ${message} ${tsCode}`);
+      });
+    });
+
+    const summary = [] as string[];
+    if (errorCount > 0) summary.push(chalk.red(`${errorCount} error(s)`));
+    if (warningCount > 0) summary.push(chalk.yellow(`${warningCount} warning(s)`));
+    if (suggestionCount > 0) summary.push(chalk.blue(`${suggestionCount} suggestion(s)`));
+
+    return `\n${summary.join(", ")} found${output.join("\n")}`;
+  }
+
+  /**
+   * Get detailed diagnostic information with code snippet
+   * @param filePath - Path to the TypeScript file to check
+   * @returns Object containing diagnostics and detailed information
+   */
+  getDetailedDiagnostics(filePath: string): {
+    diagnostics: ts.Diagnostic[];
+    details: { line: number; column: number; message: string; code: number; codeSnippet?: string }[];
+  } {
+    const { diagnostics } = this.check(filePath);
+    const sourceFile = ts.createSourceFile(filePath, readFileSync(filePath, "utf8"), ts.ScriptTarget.Latest, true);
+
+    const details = diagnostics.map((diagnostic) => {
+      if (diagnostic.file && diagnostic.start !== undefined) {
+        const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+        const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
+
+        const lines = sourceFile.text.split("\n");
+        const codeSnippet = line < lines.length ? lines[line] : undefined;
+        return { line: line + 1, column: character + 1, message, code: diagnostic.code, codeSnippet };
+      }
+
+      return {
+        line: 0,
+        column: 0,
+        message: ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+        code: diagnostic.code,
+      };
+    });
+
+    return { diagnostics, details };
+  }
+
+  /**
+   * Check if a file has type errors
+   * @param filePath - Path to the TypeScript file to check
+   * @returns true if there are no type errors, false otherwise
+   */
+  hasNoTypeErrors(filePath: string): boolean {
+    try {
+      const { diagnostics } = this.check(filePath);
+      return diagnostics.length === 0;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  static checkProject(configPath: string): ProjectTypecheckResult {
+    const parsedConfig = TypeChecker.parseConfig(configPath);
+    const host = ts.createIncrementalCompilerHost(parsedConfig.options);
+    const builderProgram = ts.createIncrementalProgram({
+      rootNames: parsedConfig.fileNames,
+      options: parsedConfig.options,
+      projectReferences: parsedConfig.projectReferences,
+      configFileParsingDiagnostics: parsedConfig.errors,
+      host,
+    });
+    const program = builderProgram.getProgram();
+    const diagnostics = [...ts.getPreEmitDiagnostics(program), ...builderProgram.emit().diagnostics];
+    const errors = diagnostics.filter((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error);
+    const warnings = diagnostics.filter((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Warning);
+    return {
+      configPath,
+      diagnostics,
+      errors,
+      warnings,
+      message: TypeChecker.formatDiagnosticMessages(diagnostics),
+    };
+  }
+
+  static parseConfig(configPath: string): ts.ParsedCommandLine {
+    const configFile = ts.readConfigFile(configPath, (fileName) => ts.sys.readFile(fileName));
+    const configDiagnostics = configFile.error ? [configFile.error] : [];
+    if (!configFile.config) {
+      const message = TypeChecker.formatDiagnosticMessages(configDiagnostics);
+      throw new Error(message || `Error reading tsconfig.json: ${configPath}`);
+    }
+    const parsedConfig = ts.parseJsonConfigFileContent(
+      configFile.config,
+      ts.sys,
+      path.dirname(configPath),
+      undefined,
+      configPath,
+    );
+    if (parsedConfig.errors.length > 0) throw new Error(TypeChecker.formatDiagnosticMessages(parsedConfig.errors));
+    return parsedConfig;
+  }
+
+  static formatDiagnosticMessages(diagnostics: ts.Diagnostic[]): string {
+    return ts.formatDiagnosticsWithColorAndContext(diagnostics, {
+      getCanonicalFileName: (fileName) => fileName,
+      getCurrentDirectory: () => process.cwd(),
+      getNewLine: () => ts.sys.newLine,
+    });
+  }
+}

package/devkit/types.ts

@@ -0,0 +1,42 @@
+export interface PackageJson {
+  name: string;
+  type?: "module" | "commonjs";
+  version: string;
+  main?: string;
+  description: string;
+  scripts?: Record<string, string>;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+  engines?: Record<string, string>;
+  exports?: Record<string, string | Record<string, string>>;
+  bun?: {
+    platform?: "node" | "browser" | "bun";
+  };
+  [key: string]: any;
+}
+
+export interface TsConfigJson {
+  extends?: string;
+  compilerOptions: {
+    target: string;
+    paths?: Record<string, string[]>;
+  };
+  references?: {
+    path: string;
+  }[];
+}
+
+export interface FileContent {
+  filePath: string;
+  content: string;
+}
+
+export interface BaseDevEnv {
+  workspaceRoot: string | undefined;
+  repoName: string;
+  serveDomain: string;
+  env: "testing" | "debug" | "develop" | "main" | "local";
+  portOffset: number;
+  appName?: string | undefined;
+}

package/devkit/ui/MultiScrollList.tsx

@@ -0,0 +1,228 @@
+"use client";
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { useStdoutDimensions } from "../useStdoutDimensions";
+
+interface MultiScrollListProps {
+  logList: {
+    title: string;
+    logs: {
+      type: string;
+      content: string;
+    }[];
+    color: string;
+  }[];
+
+  maxLength?: number;
+}
+
+/**
+ * @param logList 로그 목록
+ * @param maxLength 최대 로그 길이 (기본 100)
+ */
+const HEADER_HEIGHT = 1;
+const FOOTER_HEIGHT = 1;
+const OUTER_BORDER_HEIGHT = 2;
+const BORDER_HEIGHT = 2;
+const ANSI_ESCAPE_RE = new RegExp(`${String.fromCharCode(27)}(?:[@-Z\\\\-_]|\\[[\\s\\S]*?[@-~])`, "g");
+
+export const MultiScrollList = ({ logList, maxLength = 100 }: MultiScrollListProps) => {
+  
+  const [width, height] = useStdoutDimensions();
+
+  const [focusLog, setFocusLog] = useState<{ type: string; content: string }[]>([]);
+  
+  const [lengthMap, setLengthMap] = useState<Map<number, number>>(new Map());
+  
+  const [scrollPos, setScrollPos] = useState(0);
+  
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  
+  const [isRunning, setIsRunning] = useState(false);
+  
+  const [boxHeight, setBoxHeight] = useState(
+    height - HEADER_HEIGHT - OUTER_BORDER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT,
+  );
+  const boxWidth = width - 27;
+
+  const getLimitedLogs = (logs: { type: string; content: string }[]) => {
+    const sortedLogs = logs.reduce<{ type: string; content: string }[]>((acc, log) => {
+
+      const content = log.content.replace(ANSI_ESCAPE_RE, "");
+      if (content.length > boxWidth) {
+        const lines = Math.ceil(content.length / boxWidth);
+        for (let i = 0; i < lines; i++) {
+          acc.push({ type: log.type, content: content.slice(i * boxWidth, (i + 1) * boxWidth) });
+        }
+      } else {
+        acc.push(log);
+      }
+      return acc;
+    }, []);
+    return sortedLogs.length > maxLength ? sortedLogs.slice(sortedLogs.length - maxLength) : sortedLogs;
+  };
+
+  useInput((input, key) => {
+    
+    if (key.tab) {
+      setTabIndex((prev: number) => (prev + 1) % logList.length);
+      setScrollPos(0);
+      setIsRunning(false);
+    }
+    
+    if (key.escape) {
+      setScrollPos(0);
+      setIsRunning(false);
+    }
+    
+    if (input === " ") {
+      setScrollPos(0);
+      setIsRunning(false);
+    }
+    
+    if (key.downArrow && scrollPos > 0) {
+      if (key.shift) {
+        const newScrollPos = scrollPos - 10;
+        
+        if (newScrollPos < 0) {
+          setScrollPos(0);
+        } else {
+          setScrollPos(newScrollPos);
+        }
+      } else {
+        const newScrollPos = scrollPos - 1;
+        setScrollPos(newScrollPos);
+      }
+    }
+    
+    if (key.upArrow && scrollPos < logList[tabIndex].logs.length - boxHeight) {
+      const limitedLogs = getLimitedLogs(logList[tabIndex].logs);
+      if (scrollPos < limitedLogs.length - boxHeight) {
+        
+        if (key.shift) {
+          const newScrollPos = scrollPos + 10;
+          
+          if (newScrollPos > limitedLogs.length - boxHeight) {
+            setScrollPos(limitedLogs.length - boxHeight);
+          } else {
+            setScrollPos(newScrollPos);
+          }
+        } else {
+          setScrollPos(scrollPos + 1);
+        }
+        if (!isRunning) setIsRunning(true);
+      }
+    }
+  });
+
+  useEffect(() => {
+    
+    const getLogsToRender = (logs: { type: string; content: string }[], index: number) => {
+      
+      const limitedLogs = getLimitedLogs(logs);
+
+      if (scrollPos > 0 && tabIndex === index) {
+        return limitedLogs.slice(limitedLogs.length - boxHeight - scrollPos, limitedLogs.length - scrollPos);
+      }
+      else if (limitedLogs.length > boxHeight) {
+        return limitedLogs.slice(limitedLogs.length - boxHeight, limitedLogs.length);
+      }
+      else {
+        return limitedLogs;
+      }
+    };
+
+    if (isRunning) {
+      
+      if (lengthMap.has(tabIndex)) {
+        const tabLength = lengthMap.get(tabIndex);
+        const limitedLogsLength = Math.min(logList[tabIndex].logs.length, maxLength);
+        if (tabLength && tabLength < limitedLogsLength) {
+          setScrollPos(scrollPos + 1);
+          lengthMap.set(tabIndex, limitedLogsLength);
+        }
+      }
+
+      setFocusLog(getLogsToRender(logList[tabIndex].logs, tabIndex));
+    }
+    else {
+      
+      setFocusLog(getLogsToRender(logList[tabIndex].logs, tabIndex));
+    }
+  }, [logList, isRunning, scrollPos, tabIndex, boxHeight, maxLength]);
+
+  useEffect(() => {
+    setBoxHeight(height - HEADER_HEIGHT - OUTER_BORDER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT);
+  }, [height]);
+
+  useEffect(() => {
+    setLengthMap(new Map(logList.map((log, index) => [index, Math.min(log.logs.length, maxLength)])));
+  }, [logList, maxLength]);
+
+  return (
+    <Box width={width} height={height} borderStyle="round" borderColor="blackBright" flexDirection="column">
+      <Box width={"100%"} height={boxHeight + BORDER_HEIGHT + HEADER_HEIGHT} flexDirection="row">
+        <Box width={30} height="100%" flexDirection="column">
+          <Box>
+            <Text>
+              List {tabIndex + 1}/{logList.length}
+            </Text>
+          </Box>
+          <Box borderStyle="round" borderColor="blackBright" width={"100%"} height="100%" flexDirection="column">
+            {logList.map((log, index) => {
+              return (
+                <Text key={index} color={index === tabIndex ? "green" : "white"}>
+                  <Text>●</Text>&nbsp;
+                  {log.title.length > 25 ? `${log.title.slice(0, 25)}...` : log.title}
+                </Text>
+              );
+            })}
+          </Box>
+        </Box>
+        <Box width={"100%"} height="100%" flexDirection="column">
+          <Box height={1}>
+            <Text color={logList[tabIndex].color}>
+              {logList[tabIndex].title} {logList[tabIndex].logs.length}
+            </Text>
+          </Box>
+          <Box
+            borderStyle={isRunning ? "double" : "round"}
+            flexDirection="column"
+            borderColor={logList[tabIndex].color}
+            width="100%"
+            height="100%"
+          >
+            {scrollPos > 0 ? (
+              <>
+                {focusLog.slice(0, focusLog.length - 1).map((log, index) => {
+                  return (
+                    <Text underline={false} color={log.type === "error" ? "red" : "white"} key={index}>
+                      {log.content}
+                    </Text>
+                  );
+                })}
+                <Text underline={false} backgroundColor="green">
+                  Scrolling... +{scrollPos}
+                </Text>
+              </>
+            ) : (
+              focusLog.map((log, index) => {
+                return (
+                  <Text underline={false} color={log.type === "error" ? "red" : "white"} key={index}>
+                    {log.content}
+                  </Text>
+                );
+              })
+            )}
+          </Box>
+        </Box>
+      </Box>
+      {/* <Text>{renderMultiLogs[tabIndex][0]}</Text> */}
+      <Box width={"100%"} height={FOOTER_HEIGHT}>
+        <Text dimColor={true}>
+          Tab : switch tab | Up / Down(shift : x10) : scroll | Space : back last position | Esc : stop scrolling
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/devkit/ui/ScrollList.tsx

@@ -0,0 +1,106 @@
+"use client";
+import { Box, type BoxProps, Newline, Text, useInput } from "ink";
+import { type ReactNode, useEffect, useState } from "react";
+import { useStdoutDimensions } from "../useStdoutDimensions";
+
+interface ScrollListProps extends BoxProps {
+  list: ReactNode[];
+}
+
+export const ScrollList = ({ list, ...props }: ScrollListProps) => {
+  const [renderLogs, setRenderLogs] = useState<ReactNode[]>(list);
+  const [width, height] = useStdoutDimensions();
+  const [scrollPos, setScrollPos] = useState(0);
+  const [isRunning, setIsRunning] = useState(false);
+  const [boxHeight, setBoxHeight] = useState(height - 3);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      setIsRunning(false);
+      setScrollPos(0);
+    }
+    if (input === " " && isRunning) {
+      setIsRunning(false);
+      setScrollPos(0);
+    }
+    if (key.downArrow && scrollPos > 0) {
+      if (key.shift) {
+        setScrollPos(scrollPos - 10);
+      } else {
+        setScrollPos(scrollPos - 1);
+      }
+    }
+    if (key.upArrow && scrollPos < list.length - boxHeight) {
+      if (key.shift) {
+        setScrollPos(scrollPos + 10);
+      } else {
+        setScrollPos(scrollPos + 1);
+      }
+    }
+  });
+
+  useEffect(() => {
+
+    if (isRunning) {
+      setScrollPos(scrollPos + 1);
+      return;
+    }
+    if (list.length > boxHeight) {
+      setRenderLogs(list.slice(list.length - boxHeight, list.length));
+    } else {
+      setRenderLogs(list);
+    }
+  }, [list, isRunning]);
+
+  useEffect(() => {
+    setBoxHeight(Math.floor(height * 0.9));
+  }, [height]);
+
+  useEffect(() => {
+    if (scrollPos > 0) {
+      setRenderLogs(list.slice(list.length - boxHeight - scrollPos, list.length - scrollPos));
+      setIsRunning(true);
+    } else {
+      setRenderLogs(list.slice(list.length - boxHeight, list.length));
+      setIsRunning(false);
+    }
+  }, [scrollPos]);
+
+  return (
+    <Box {...props} width={width} height={"100%"} flexDirection="column">
+      <Box borderStyle="round" width={width} height={height - 3}>
+        <Newline />
+        <Text>
+          {isRunning ? (
+            <>
+              {renderLogs.slice(0, renderLogs.length - 1).map((log, index) => (
+                <>
+                  <Text key={index}>{log}</Text>
+                  <Newline />
+                </>
+              ))}
+              <Text backgroundColor="green">scrolling... + {scrollPos}</Text>
+            </>
+          ) : (
+            <>
+              {renderLogs.map((log, index) => (
+                <>
+                  <Text key={index}>{log}</Text>
+                  <Newline />
+                </>
+              ))}
+            </>
+          )}
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor={true}>
+          You can use the following shortcuts:
+          <Newline />* <Text backgroundColor="green">up</Text> and <Text backgroundColor="green">down</Text> to scroll.{" "}
+          <Text backgroundColor="green">shift</Text> to scroll faster.
+          <Newline />* <Text backgroundColor="green">escape</Text> to stop scrolling.
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/devkit/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./MultiScrollList";
+export * from "./ScrollList";