@databricks/design-system 2.0.9 → 2.0.10

package/scaffold_tool/src/project-inspector.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectInspector = void 0;
+const node_path_1 = require("node:path");
+const package_manifest_1 = require("./package-manifest");
+const ENTRY_FILES_BY_PROJECT_TYPE = {
+    cra: ['src/index.tsx', 'src/index.jsx', 'src/index.js'],
+    next: ['app/layout.tsx', 'app/layout.jsx', 'app/layout.js', 'pages/_app.tsx', 'pages/_app.jsx', 'pages/_app.js'],
+    react: [
+        'src/main.tsx',
+        'src/index.tsx',
+        'src/main.jsx',
+        'src/index.jsx',
+        'src/main.ts',
+        'src/main.js',
+        'src/index.js',
+    ],
+    vite: ['src/main.tsx', 'src/main.jsx', 'src/main.ts', 'src/main.js'],
+};
+class ProjectInspector {
+    fileSystem;
+    constructor(fileSystem) {
+        this.fileSystem = fileSystem;
+    }
+    async detectProject(projectDirectory) {
+        const manifest = await this.readManifest(projectDirectory);
+        if (!manifest) {
+            return { reason: 'no package.json found', type: 'unknown' };
+        }
+        const hasReact = ['react', 'next', 'react-scripts'].some((name) => manifest.dependencyNames.has(name));
+        if (!hasReact) {
+            return { reason: 'no React dependency detected', type: 'unknown' };
+        }
+        if (manifest.dependencyNames.has('next') ||
+            (await this.hasAnyPath(projectDirectory, ['next.config.js', 'next.config.ts', 'next.config.mjs']))) {
+            return { manifest, type: 'next' };
+        }
+        if (manifest.dependencyNames.has('vite') ||
+            (await this.hasAnyPath(projectDirectory, ['vite.config.ts', 'vite.config.js']))) {
+            return { manifest, type: 'vite' };
+        }
+        if (manifest.dependencyNames.has('react-scripts')) {
+            return { manifest, type: 'cra' };
+        }
+        return { manifest, type: 'react' };
+    }
+    async detectPackageManager(projectDirectory) {
+        const [hasPnpmLockfile, hasYarnLockfile] = await Promise.all([
+            this.fileSystem.pathExists((0, node_path_1.join)(projectDirectory, 'pnpm-lock.yaml')),
+            this.fileSystem.pathExists((0, node_path_1.join)(projectDirectory, 'yarn.lock')),
+        ]);
+        if (hasPnpmLockfile) {
+            return 'pnpm';
+        }
+        return hasYarnLockfile ? 'yarn' : 'npm';
+    }
+    async findExistingEntryFile(projectDirectory, projectType) {
+        for (const relativePath of ENTRY_FILES_BY_PROJECT_TYPE[projectType]) {
+            const entryFilePath = (0, node_path_1.join)(projectDirectory, relativePath);
+            if (await this.fileSystem.pathExists(entryFilePath)) {
+                return entryFilePath;
+            }
+        }
+        return undefined;
+    }
+    async readManifest(projectDirectory) {
+        return (0, package_manifest_1.readPackageManifest)(this.fileSystem, (0, node_path_1.join)(projectDirectory, 'package.json'));
+    }
+    async hasAnyPath(projectDirectory, relativePaths) {
+        const pathExistence = await Promise.all(relativePaths.map((relativePath) => this.fileSystem.pathExists((0, node_path_1.join)(projectDirectory, relativePath))));
+        return pathExistence.some(Boolean);
+    }
+}
+exports.ProjectInspector = ProjectInspector;

package/scaffold_tool/src/project-templates.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSS_IMPORTS = exports.CSS_DECLARATION = exports.BODY_FONT_CSS = void 0;
+exports.createViteMainFile = createViteMainFile;
+exports.createViteAppFile = createViteAppFile;
+exports.createViteConfigFile = createViteConfigFile;
+exports.createNextAppFile = createNextAppFile;
+exports.createNextIndexFile = createNextIndexFile;
+exports.createNextDbuiAppFile = createNextDbuiAppFile;
+exports.createEsmNextConfigFile = createEsmNextConfigFile;
+exports.createCommonJsNextConfigFile = createCommonJsNextConfigFile;
+exports.createVercelReadme = createVercelReadme;
+exports.createManualSetupInstructions = createManualSetupInstructions;
+exports.createCompletionMessage = createCompletionMessage;
+const scaffold_theme_1 = require("./scaffold-theme");
+exports.BODY_FONT_CSS = 'body {\n  font-family: var(--db-font-family);\n}\n';
+exports.CSS_DECLARATION = "declare module '*.css';\n";
+exports.CSS_IMPORTS = [
+    "import '@databricks/design-system/index.css';",
+    "import '@databricks/design-system/fonts/dm-sans.css';",
+];
+function createViteMainFile() {
+    return [
+        ...createCssImports(),
+        "import './dbui.css';",
+        '',
+        "import { StrictMode } from 'react';",
+        "import { createRoot } from 'react-dom/client';",
+        "import { AppThemeProvider } from './app-theme';",
+        "import { ThemePicker } from './theme-picker';",
+        "import { App } from './App';",
+        '',
+        "createRoot(document.getElementById('root')!).render(",
+        '  <StrictMode>',
+        '    <AppThemeProvider>',
+        '      <App />',
+        '      <ThemePicker />',
+        '    </AppThemeProvider>',
+        '  </StrictMode>,',
+        ');',
+        '',
+    ].join('\n');
+}
+function createViteAppFile() {
+    return ['// Build your app here.', 'export function App() {', '  return null;', '}', ''].join('\n');
+}
+function createViteConfigFile() {
+    return [
+        "import { defineConfig } from 'vite';",
+        "import react from '@vitejs/plugin-react';",
+        '',
+        '// jsxImportSource wires up Emotion so the `css` prop dbui components use works.',
+        'export default defineConfig({',
+        "  plugins: [react({ jsxImportSource: '@emotion/react' })],",
+        '});',
+        '',
+    ].join('\n');
+}
+function createNextAppFile() {
+    return [
+        ...createCssImports(),
+        "import '../dbui.css';",
+        '',
+        "import type { AppProps } from 'next/app';",
+        '',
+        'export default function App({ Component, pageProps }: AppProps) {',
+        '  return <Component {...pageProps} />;',
+        '}',
+        '',
+    ].join('\n');
+}
+function createNextIndexFile() {
+    return [
+        "import dynamic from 'next/dynamic';",
+        '',
+        '// ssr:false renders dbui only on the client, keeping it out of the build-time prerender.',
+        "const DbuiApp = dynamic(() => import('../dbui-app'), { ssr: false });",
+        '',
+        'export default function Home() {',
+        '  return <DbuiApp />;',
+        '}',
+        '',
+    ].join('\n');
+}
+function createNextDbuiAppFile() {
+    return [
+        "import { Button, Typography, useDesignSystemTheme } from '@databricks/design-system';",
+        "import { AppThemeProvider } from './app-theme';",
+        "import { ThemePicker } from './theme-picker';",
+        '',
+        'function Sample() {',
+        '  const { theme } = useDesignSystemTheme();',
+        '  return (',
+        createSampleBody(),
+        '  );',
+        '}',
+        '',
+        'export default function DbuiApp() {',
+        '  return (',
+        '    <AppThemeProvider>',
+        '      <Sample />',
+        '      <ThemePicker />',
+        '    </AppThemeProvider>',
+        '  );',
+        '}',
+        '',
+    ].join('\n');
+}
+function createCssImports() {
+    return [
+        "import '@databricks/design-system/index.css';",
+        "import '@databricks/design-system/index-dark.css';",
+        ...scaffold_theme_1.SCAFFOLD_THEME_FONT_IMPORTS.map((fontImport) => `import '${fontImport}';`),
+    ];
+}
+function createEsmNextConfigFile() {
+    return createNextConfigFile('export default nextConfig;');
+}
+function createCommonJsNextConfigFile() {
+    return createNextConfigFile('module.exports = nextConfig;');
+}
+function createVercelReadme(projectName) {
+    return [
+        `# Deploying ${projectName} to Vercel`,
+        '',
+        'This is a client-only Next.js app, ready to host on Vercel with no extra configuration.',
+        '',
+        '1. Push this project to a Git repository (GitHub/GitLab/Bitbucket).',
+        '2. Import the repo at https://vercel.com/new — Vercel auto-detects Next.js.',
+        '',
+        'Or deploy straight from this directory with the Vercel CLI:',
+        '',
+        '```bash',
+        'npx vercel',
+        '```',
+        '',
+    ].join('\n');
+}
+function createManualSetupInstructions(projectType) {
+    const providerInstruction = projectType === 'next'
+        ? 'dbui is client-only: put DesignSystemProvider + ApplyGlobalStyles in a "use client" component and render it from your entry — app/layout.tsx (App Router) or pages/_app.tsx (Pages Router). For App Router, load it via next/dynamic with { ssr: false }.'
+        : 'Wrap your root component in <DesignSystemProvider><ApplyGlobalStyles /> … </DesignSystemProvider>.';
+    return [
+        '',
+        'Finish setup:',
+        '  1. Import the styles at your entry point:',
+        ...exports.CSS_IMPORTS.map((line) => `       ${line}`),
+        `  2. ${providerInstruction}`,
+        `  3. Set the body font (ApplyGlobalStyles doesn't): body { font-family: var(--db-font-family); }`,
+        `  4. Configure the Emotion JSX runtime (jsxImportSource: '@emotion/react') so the css prop works.`,
+        '',
+        'See the package AGENTS.md for the full setup reference.',
+        '',
+    ].join('\n');
+}
+function createCompletionMessage(projectName, packageManager, projectType) {
+    const runDevelopmentServer = packageManager === 'npm' ? 'npm run dev' : `${packageManager} dev`;
+    return [
+        '',
+        `✓ ${projectName} is ready with @databricks/design-system.`,
+        'Use the Theme button in the app to switch themes and appearance. See THEME.md to customize it.',
+        '',
+        'Next steps:',
+        `  cd ${projectName}`,
+        `  ${runDevelopmentServer}`,
+        ...(projectType === 'next' ? ['', 'To host it: see DEPLOY.md (Vercel).'] : []),
+        '',
+    ].join('\n');
+}
+function createSampleBody() {
+    return [
+        '    <div style={{ padding: theme.spacing.lg }}>',
+        '      <Typography.Title>dbui is set up</Typography.Title>',
+        '      <Button componentId="starter.get_started_button" type="primary">',
+        '        Get started',
+        '      </Button>',
+        '    </div>',
+    ].join('\n');
+}
+function createNextConfigFile(exportStatement) {
+    return [
+        "/** @type {import('next').NextConfig} */",
+        'const nextConfig = {',
+        '  // Enables the Emotion `css` prop that dbui components rely on.',
+        '  compiler: { emotion: true },',
+        '};',
+        '',
+        exportStatement,
+        '',
+    ].join('\n');
+}

package/scaffold_tool/src/readline-terminal.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadlineTerminal = void 0;
+const node_readline_1 = require("node:readline");
+class ReadlineTerminal {
+    isInteractive = Boolean(process.stdin.isTTY);
+    lineReader = (0, node_readline_1.createInterface)({ input: process.stdin, output: process.stdout });
+    ask(question) {
+        return new Promise((resolve) => {
+            this.lineReader.question(question, (answer) => resolve(answer.trim()));
+        });
+    }
+    close() {
+        this.lineReader.close();
+    }
+    write(message) {
+        process.stdout.write(message);
+    }
+    writeError(message) {
+        process.stderr.write(message);
+    }
+}
+exports.ReadlineTerminal = ReadlineTerminal;

package/scaffold_tool/src/scaffold-config.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScaffoldToolConfig = getScaffoldToolConfig;
+const node_path_1 = require("node:path");
+function getScaffoldToolConfig(packageDirectory) {
+    return {
+        agentInstructionsPath: (0, node_path_1.join)(packageDirectory, 'scaffold-agents.md'),
+        nextScaffolder: 'create-next-app@14.2.35',
+        packageManifestPath: (0, node_path_1.join)(packageDirectory, 'package.json'),
+        packageName: '@databricks/design-system',
+        peerRanges: {
+            '@emotion/react': '^11.11.3',
+            moment: '^2.25.3',
+        },
+        react18Pins: ['react@^18', 'react-dom@^18', '@types/react@^18', '@types/react-dom@^18'],
+        viteScaffolder: 'create-vite@9.2.1',
+    };
+}

package/scaffold_tool/src/scaffold-options.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseScaffoldArguments = parseScaffoldArguments;
+exports.getScaffoldRequest = getScaffoldRequest;
+const MODE_BY_PROMPT_ANSWER = {
+    '1': 'vite',
+    '2': 'next',
+    '3': 'existing',
+};
+const THEME_BY_PROMPT_ANSWER = {
+    '': 'dubois',
+    '1': 'dubois',
+    '2': 'base',
+    '3': 'genie-one',
+    '4': 'shadcn',
+};
+function parseScaffoldArguments(args) {
+    let mode;
+    let projectName;
+    let theme;
+    for (let index = 0; index < args.length; index++) {
+        const argument = args[index];
+        if (argument === '--mode') {
+            mode = args[++index];
+        }
+        else if (argument === '--name') {
+            projectName = args[++index];
+        }
+        else if (argument === '--theme') {
+            theme = args[++index];
+            if (!theme || theme.startsWith('-')) {
+                throw new Error('--theme requires dubois, base, genie-one, or shadcn.');
+            }
+        }
+        else if (argument.startsWith('--theme=')) {
+            theme = argument.slice('--theme='.length);
+        }
+        else if (argument && !argument.startsWith('-') && !projectName) {
+            projectName = argument;
+        }
+    }
+    return { mode, projectName, theme };
+}
+async function getScaffoldRequest(args, terminal) {
+    const parsedArguments = parseScaffoldArguments(args);
+    const mode = parsedArguments.mode ?? (await promptForMode(terminal));
+    if (!isScaffoldMode(mode)) {
+        throw new Error('Please choose 1, 2, or 3.');
+    }
+    if (mode === 'existing') {
+        if (parsedArguments.theme !== undefined) {
+            throw new Error('--theme is supported when scaffolding a new Vite or Next.js project.');
+        }
+        return { mode };
+    }
+    const projectName = parsedArguments.projectName ?? (await terminal.ask('\nProject name (new directory): '));
+    if (!projectName) {
+        throw new Error('A project name is required.');
+    }
+    const theme = parsedArguments.theme ?? (await promptForTheme(terminal));
+    if (!isScaffoldTheme(theme)) {
+        throw new Error('Please choose 1, 2, 3, or 4, or use --theme dubois, base, genie-one, or shadcn.');
+    }
+    return { mode, projectName, theme };
+}
+async function promptForTheme(terminal) {
+    if (!terminal.isInteractive) {
+        return 'dubois';
+    }
+    terminal.write([
+        '\nWhich theme would you like to use?',
+        '',
+        '  1) Original "Du Bois" theme (default)',
+        '  2) dbui "Base" theme',
+        '  3) Genie One',
+        '  4) Make it look like shadcn',
+        '',
+    ].join('\n'));
+    const answer = await terminal.ask('Enter 1, 2, 3, or 4 [1]: ');
+    return THEME_BY_PROMPT_ANSWER[answer.trim()];
+}
+async function promptForMode(terminal) {
+    terminal.write([
+        'What would you like to do?',
+        '',
+        '  1) Scaffold a new Vite project (no hosting)',
+        '  2) Scaffold a new Next.js project (Vercel hosting)',
+        '  3) Add @databricks/design-system to an existing project',
+        '',
+    ].join('\n'));
+    const answer = await terminal.ask('Enter 1, 2, or 3: ');
+    return MODE_BY_PROMPT_ANSWER[answer];
+}
+function isScaffoldMode(value) {
+    return value === 'existing' || value === 'next' || value === 'vite';
+}
+function isScaffoldTheme(value) {
+    return value === 'dubois' || value === 'base' || value === 'genie-one' || value === 'shadcn';
+}

package/scaffold_tool/src/scaffold-theme.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCAFFOLD_THEME_FONT_IMPORTS = exports.SCAFFOLD_THEME_PACKAGES = exports.CUSTOM_SCAFFOLD_THEMES = void 0;
+exports.getScaffoldTheme = getScaffoldTheme;
+const base_1 = require("./themes/base");
+const genie_one_1 = require("./themes/genie-one");
+const shadcn_1 = require("./themes/shadcn");
+exports.CUSTOM_SCAFFOLD_THEMES = {
+    base: base_1.BASE_THEME,
+    'genie-one': genie_one_1.GENIE_ONE_THEME,
+    shadcn: shadcn_1.SHADCN_THEME,
+};
+exports.SCAFFOLD_THEME_PACKAGES = [
+    ...new Set(Object.values(exports.CUSTOM_SCAFFOLD_THEMES).flatMap((theme) => theme.packages)),
+];
+exports.SCAFFOLD_THEME_FONT_IMPORTS = [
+    ...new Set([
+        '@databricks/design-system/fonts/dm-sans.css',
+        ...Object.values(exports.CUSTOM_SCAFFOLD_THEMES).flatMap((theme) => theme.fontImports),
+    ]),
+];
+function getScaffoldTheme(theme) {
+    switch (theme) {
+        case 'dubois':
+            return undefined;
+        case 'base':
+            return base_1.BASE_THEME;
+        case 'genie-one':
+            return genie_one_1.GENIE_ONE_THEME;
+        case 'shadcn':
+            return shadcn_1.SHADCN_THEME;
+    }
+}

package/scaffold_tool/src/scaffold-tool.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaffoldTool = void 0;
+const node_path_1 = require("node:path");
+const project_templates_1 = require("./project-templates");
+const scaffold_options_1 = require("./scaffold-options");
+const scaffold_theme_1 = require("./scaffold-theme");
+const process_runner_1 = require("../../processes/process-runner");
+class ScaffoldTool {
+    config;
+    dependencyInstaller;
+    fileSystem;
+    processRunner;
+    progress;
+    projectConfigurator;
+    projectInspector;
+    terminal;
+    constructor(dependencies) {
+        this.config = dependencies.config;
+        this.dependencyInstaller = dependencies.dependencyInstaller;
+        this.fileSystem = dependencies.fileSystem;
+        this.processRunner = dependencies.processRunner;
+        this.progress = dependencies.progress;
+        this.projectConfigurator = dependencies.projectConfigurator;
+        this.projectInspector = dependencies.projectInspector;
+        this.terminal = dependencies.terminal;
+    }
+    async main(args, currentDirectory) {
+        const request = await this.collectRequest(args);
+        await this.progress.run('Set up @databricks/design-system', async () => {
+            if (request.mode === 'existing') {
+                await this.addToExistingProject(currentDirectory);
+                return;
+            }
+            await this.scaffoldNewProject(request, currentDirectory);
+        });
+    }
+    async addToExistingProject(projectDirectory) {
+        const detectedProject = await this.progress.run('Project > Detect framework', () => this.projectInspector.detectProject(projectDirectory));
+        const reason = detectedProject.type === 'unknown' ? ` (${detectedProject.reason})` : '';
+        this.terminal.write(`\n> Detected project type: ${detectedProject.type}${reason}\n`);
+        if (detectedProject.type === 'unknown') {
+            this.terminal.write('\nCould not identify a React project here. Set it up manually:\n');
+            this.terminal.write((0, project_templates_1.createManualSetupInstructions)('generic'));
+            return;
+        }
+        const packageManager = await this.progress.run('Project > Detect package manager', () => this.projectInspector.detectPackageManager(projectDirectory));
+        // Install hooks can generate entry files; configure them only after those hooks have finished.
+        await this.progress.run('Dependencies', () => this.dependencyInstaller.install(projectDirectory, packageManager));
+        const configuration = await this.progress.run('Configuration', () => this.projectConfigurator.configureExisting(projectDirectory, detectedProject.type));
+        if (configuration.addedImportsTo) {
+            this.terminal.write(`> Added the dbui CSS imports to ${(0, node_path_1.relative)(projectDirectory, configuration.addedImportsTo)}\n`);
+        }
+        if (configuration.wroteAgentInstructions) {
+            this.terminal.write('> Added AGENTS.md instructing agents to use @databricks/design-system for UI\n');
+        }
+        this.terminal.write((0, project_templates_1.createManualSetupInstructions)(detectedProject.type));
+    }
+    async collectRequest(args) {
+        try {
+            return await (0, scaffold_options_1.getScaffoldRequest)(args, this.terminal);
+        }
+        finally {
+            this.terminal.close();
+        }
+    }
+    async scaffoldNewProject(request, currentDirectory) {
+        const projectDirectory = (0, node_path_1.resolve)(currentDirectory, request.projectName);
+        const targetExists = await this.progress.run('Project > Check destination', () => this.fileSystem.pathExists(projectDirectory));
+        if (targetExists) {
+            throw new Error(`\`${request.projectName}\` already exists here. Choose a name that isn't taken.`);
+        }
+        await this.progress.run(`Project > Create ${request.mode === 'vite' ? 'Vite' : 'Next.js'} app`, (reportOutput) => this.runScaffolder(request, currentDirectory, reportOutput));
+        const packageManager = await this.progress.run('Project > Detect package manager', () => this.projectInspector.detectPackageManager(projectDirectory));
+        const additionalPackages = [
+            ...(request.mode === 'vite' ? this.config.react18Pins : []),
+            ...scaffold_theme_1.SCAFFOLD_THEME_PACKAGES,
+        ];
+        await this.progress.run('Dependencies', () => this.dependencyInstaller.install(projectDirectory, packageManager, additionalPackages));
+        await this.progress.run('Configuration', () => request.mode === 'vite'
+            ? this.projectConfigurator.configureVite(projectDirectory, request.theme)
+            : this.projectConfigurator.configureNext(projectDirectory, request.projectName, request.theme));
+        this.terminal.write((0, project_templates_1.createCompletionMessage)(request.projectName, packageManager, request.mode));
+    }
+    async runScaffolder(request, currentDirectory, reportOutput) {
+        if (request.mode === 'vite') {
+            reportOutput(`Scaffolding with ${this.config.viteScaffolder}…\n`);
+            await (0, process_runner_1.runSuccessfulProcess)(this.processRunner, {
+                binary: 'npx',
+                args: [
+                    this.config.viteScaffolder,
+                    request.projectName,
+                    '--template',
+                    'react-ts',
+                    '--eslint',
+                    '--no-interactive',
+                    '--no-immediate',
+                ],
+                cwd: currentDirectory,
+                env: { npm_config_loglevel: 'error' },
+                onOutput: reportOutput,
+            });
+            return;
+        }
+        reportOutput(`Scaffolding with ${this.config.nextScaffolder}…\n`);
+        await (0, process_runner_1.runSuccessfulProcess)(this.processRunner, {
+            binary: 'npx',
+            args: [
+                this.config.nextScaffolder,
+                request.projectName,
+                '--ts',
+                '--no-app',
+                '--eslint',
+                '--no-tailwind',
+                '--no-src-dir',
+                '--import-alias',
+                '@/*',
+                '--use-npm',
+                '--yes',
+            ],
+            cwd: currentDirectory,
+            env: { npm_config_loglevel: 'error' },
+            onOutput: reportOutput,
+        });
+    }
+}
+exports.ScaffoldTool = ScaffoldTool;

package/scaffold_tool/src/terminal-progress-reporter.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalProgressReporter = void 0;
+/** Line-based output keeps concurrent phases readable in redirected logs. */
+class TerminalProgressReporter {
+    terminal;
+    constructor(terminal) {
+        this.terminal = terminal;
+    }
+    async run(phase, operation) {
+        const startedAt = performance.now();
+        const elapsedSeconds = () => Math.floor((performance.now() - startedAt) / 1000);
+        this.terminal.write(`> [start] ${phase}\n`);
+        const heartbeat = setInterval(() => {
+            this.terminal.write(`> [running] ${phase} (${elapsedSeconds()}s elapsed)\n`);
+        }, 10_000);
+        heartbeat.unref();
+        try {
+            const result = await operation((output, stream) => {
+                if (stream === 'stderr') {
+                    this.terminal.writeError(output);
+                }
+                else {
+                    this.terminal.write(output);
+                }
+            });
+            this.terminal.write(`> [done] ${phase} (${elapsedSeconds()}s)\n`);
+            return result;
+        }
+        catch (error) {
+            this.terminal.writeError(`> [failed] ${phase} (${elapsedSeconds()}s)\n`);
+            throw error;
+        }
+        finally {
+            clearInterval(heartbeat);
+        }
+    }
+}
+exports.TerminalProgressReporter = TerminalProgressReporter;

package/scaffold_tool/src/terminal.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });