@sambitcreate/parsely-cli 2.1.0 → 2.2.0

package/README.md

@@ -39,24 +39,34 @@ Optional terminal tuning:
 ```bash
 export PARSELY_SYNC_OUTPUT=1   # force synchronized output on
 export PARSELY_SYNC_OUTPUT=0   # force synchronized output off
+export PARSELY_DISPLAY_PALETTE=1   # force terminal background palette on
+export PARSELY_DISPLAY_PALETTE=0   # force terminal background palette off
+export PARSELY_THEME=dark      # start in dark theme
+export PARSELY_THEME=light     # start in light theme
 ```
 
 ## Terminal UI
 
 - Uses an Ink-based app shell instead of printing one-off output
 - Switches into the terminal alternate screen from the CLI entrypoint and restores the previous screen on exit
+- Restores the terminal's default background color on exit after using the app palette
 - Reserves one terminal row so Ink can update incrementally instead of clearing the whole screen on every spinner tick
 - Adapts the layout to the current terminal size for wide and narrow viewports
 - Collapses non-essential panels on shorter terminals so the URL field stays usable
 - Cancels in-flight browser and AI scraping when you press `Ctrl+C`
 - Shows a live scraping pipeline so browser parsing and AI fallback are visible as separate stages
-- Enables synchronized output in Ghostty by default so frame updates paint atomically
+- Detects light/dark preference on startup and applies a matching app-wide theme
+- Lets you toggle the full app theme at runtime with `Ctrl+T`
+- Enables synchronized output in Ghostty and WezTerm by default so frame updates paint atomically
+- Applies the terminal background palette by default in Ghostty, Apple Terminal, iTerm2, WezTerm, Warp, Kitty, Alacritty, and foot
+- Avoids advanced palette/sync behavior in `tmux`, `screen`, VS Code's integrated terminal, JetBrains terminals, the Linux console, and `TERM=dumb` unless you explicitly override it
 
 ## Keyboard Shortcuts
 
 | Key      | Action            |
 | -------- | ----------------- |
 | `Enter`  | Submit URL        |
+| `Ctrl+T` | Toggle theme      |
 | `n`      | Scrape new recipe |
 | `q`      | Quit              |
 | `Esc`    | Quit from result view |
@@ -68,7 +78,9 @@ export PARSELY_SYNC_OUTPUT=0   # force synchronized output off
 - **Browser scraping skipped** — Install Chrome or Chromium for better results
 - **No recipe found** — AI fallback handles most sites, but results vary by site
 - **Terminal looks cleared while running** — Expected; Parsely uses the alternate screen and restores your previous terminal content when it exits
-- **Ghostty still flickers** — Parsely enables synchronized output automatically in Ghostty; set `PARSELY_SYNC_OUTPUT=1` to force it on elsewhere or `PARSELY_SYNC_OUTPUT=0` to disable it
+- **Background color does not change** — Your terminal may be outside the built-in compatibility list or behind a multiplexer. Use `PARSELY_DISPLAY_PALETTE=1` to force palette updates on, or `PARSELY_DISPLAY_PALETTE=0` to disable them entirely
+- **Theme starts in the wrong mode** — Set `PARSELY_THEME=dark` or `PARSELY_THEME=light` to override automatic detection
+- **Ghostty or WezTerm still flickers** — Parsely enables synchronized output automatically there; set `PARSELY_SYNC_OUTPUT=1` to force it on elsewhere or `PARSELY_SYNC_OUTPUT=0` to disable it
 - **Some sites challenge headless browsers** — Parsely now uses a more browser-like Puppeteer setup, but challenge pages can still force an AI fallback
 
 ## License
@@ -113,14 +125,16 @@ npm test
 
 ### UI Structure
 
+- `LandingScreen` — centered logo and input for the idle state
+- `LoadingScreen` — minimal centered status view during scraping
 - `Banner` — status-aware header with current host and app state
-- `Panel` — shared bordered container used across the app shell
+- `Panel` — shared bordered container used across the error shell
 - `PhaseRail` — pipeline view for browser, parsing, and AI stages
-- `URLInput` — normalizes pasted newlines and submits on `Enter`
+- `URLInput` — normalizes pasted newlines and exposes shortcut hints under the field
 - `RecipeCard` — split recipe layout with summary, ingredients, timing, and method
-- `Footer` — persistent status line and key hints
+- `Footer` — persistent status line and key hints on non-landing screens
 - `useTerminalViewport` — terminal sizing and resize tracking
-- `utils/terminal.ts` — synchronized-output and render-height helpers for stable full-screen updates
+- `utils/terminal.ts` — terminal compatibility detection, synchronized-output, palette control, and render-height helpers
 
 ### Tests
 
@@ -128,7 +142,7 @@ npm test
 npm test
 ```
 
-The test suite covers input normalization and the pure HTML/schema extraction helpers used by the scraper.
+The test suite covers input normalization, schema extraction, theme-mode helpers, and terminal compatibility detection for common macOS and Linux terminals.
 
 ### Build & Publish
 

package/dist/app.js

@@ -10,7 +10,10 @@ import { Panel } from './components/Panel.js';
 import { PhaseRail } from './components/PhaseRail.js';
 import { scrapeRecipe } from './services/scraper.js';
 import { useTerminalViewport } from './hooks/useTerminalViewport.js';
-import { theme } from './theme.js';
+import { detectPreferredThemeMode, resolveInitialThemeMode, setActiveTheme, theme, toggleThemeMode } from './theme.js';
+import { useDisplayPalette } from './hooks/useDisplayPalette.js';
+import { sanitizeTerminalText } from './utils/helpers.js';
+import { isThemeToggleShortcut } from './utils/shortcuts.js';
 import { getRenderableHeight } from './utils/terminal.js';
 import { LandingScreen } from './components/LandingScreen.js';
 import { LoadingScreen } from './components/LoadingScreen.js';
@@ -19,13 +22,25 @@ export function App({ initialUrl }) {
     const { width, height } = useTerminalViewport();
     const renderHeight = getRenderableHeight(height);
     const [phase, setPhase] = useState(initialUrl ? 'scraping' : 'idle');
+    const [themeMode, setThemeMode] = useState(() => resolveInitialThemeMode());
     const [recipe, setRecipe] = useState(null);
     const [scrapeStatus, setScrapeStatus] = useState(null);
     const [error, setError] = useState('');
     const [currentUrl, setCurrentUrl] = useState(initialUrl ?? '');
     const activeScrapeController = useRef(null);
+    const initialScrapeStarted = useRef(false);
+    const hasManualThemeOverride = useRef(false);
     const wide = width >= 112;
     const shortViewport = renderHeight < 30;
+    useDisplayPalette(theme.colors.recipePaper);
+    const applyThemeMode = useCallback((mode) => {
+        setActiveTheme(mode);
+        setThemeMode(mode);
+    }, []);
+    const handleToggleTheme = useCallback(() => {
+        hasManualThemeOverride.current = true;
+        applyThemeMode(toggleThemeMode(themeMode));
+    }, [applyThemeMode, themeMode]);
     const cancelActiveScrape = useCallback(() => {
         activeScrapeController.current?.abort();
         activeScrapeController.current = null;
@@ -52,7 +67,7 @@ export function App({ initialUrl }) {
             if (controller.signal.aborted || activeScrapeController.current !== controller) {
                 return;
             }
-            setError(err instanceof Error ? err.message : 'Failed to scrape recipe');
+            setError(err instanceof Error ? sanitizeTerminalText(err.message) : 'Failed to scrape recipe');
             setPhase('error');
         }
         finally {
@@ -69,32 +84,52 @@ export function App({ initialUrl }) {
         setCurrentUrl('');
     }, []);
     useEffect(() => {
-        if (initialUrl) {
-            handleScrape(initialUrl);
+        if (!initialUrl || initialScrapeStarted.current) {
+            return;
         }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+        initialScrapeStarted.current = true;
+        void handleScrape(initialUrl);
+    }, [handleScrape, initialUrl]);
     useEffect(() => {
         return () => {
             cancelActiveScrape();
         };
     }, [cancelActiveScrape]);
+    useEffect(() => {
+        let cancelled = false;
+        void detectPreferredThemeMode().then((mode) => {
+            if (cancelled || hasManualThemeOverride.current || mode === themeMode) {
+                return;
+            }
+            applyThemeMode(mode);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [applyThemeMode, themeMode]);
     useInput((input, key) => {
         if (key.ctrl && input === 'c') {
             cancelActiveScrape();
             exit();
             return;
         }
+        if ((phase === 'display' || phase === 'scraping') && isThemeToggleShortcut(input, key)) {
+            handleToggleTheme();
+            return;
+        }
         if (phase === 'display' && input === 'n')
             handleNewRecipe();
-        if (phase === 'display' && (input === 'q' || key.escape))
+        if (phase === 'display' && input === 'q')
             exit();
+        if (phase === 'display' && key.escape)
+            handleNewRecipe();
     }, { isActive: phase === 'display' || phase === 'scraping' || phase === 'idle' || phase === 'error' });
-    const renderIdle = () => (_jsx(LandingScreen, { width: width, height: renderHeight, onSubmit: handleScrape }));
+    const renderIdle = () => (_jsx(LandingScreen, { width: width, height: renderHeight, onSubmit: handleScrape, onToggleTheme: handleToggleTheme }));
     const renderScraping = () => (_jsx(LoadingScreen, { status: scrapeStatus }));
-    const renderDisplay = () => (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: recipe && (_jsx(RecipeCard, { recipe: recipe, width: width, sourceUrl: currentUrl })) }));
-    const renderError = () => (_jsxs(Box, { flexDirection: wide && !shortViewport ? 'row' : 'column', gap: 1, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", width: wide && !shortViewport ? '58%' : undefined, children: [_jsx(ErrorDisplay, { message: error }), _jsx(Panel, { title: "Try another URL", eyebrow: "Retry", accentColor: theme.colors.primary, children: _jsx(URLInput, { onSubmit: handleScrape }) })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Panel, { title: "Pipeline", eyebrow: "What happened", accentColor: theme.colors.secondary, children: _jsx(PhaseRail, { phase: phase, status: scrapeStatus, recipe: recipe }) }) })] }));
+    const renderDisplay = () => (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: recipe && (_jsx(RecipeCard, { recipe: recipe, width: width, height: renderHeight, sourceUrl: currentUrl })) }));
+    const renderError = () => (_jsxs(Box, { flexDirection: wide && !shortViewport ? 'row' : 'column', gap: 1, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", width: wide && !shortViewport ? '58%' : undefined, children: [_jsx(ErrorDisplay, { message: error }), _jsx(Panel, { title: "Try another URL", eyebrow: "Retry", accentColor: theme.colors.primary, children: _jsx(URLInput, { onSubmit: handleScrape, onToggleTheme: handleToggleTheme }) })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Panel, { title: "Pipeline", eyebrow: "What happened", accentColor: theme.colors.secondary, children: _jsx(PhaseRail, { phase: phase, status: scrapeStatus, recipe: recipe }) }) })] }));
     if (phase === 'display') {
-        return (_jsx(Box, { flexDirection: "column", width: "100%", children: renderDisplay() }));
+        return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderDisplay() }));
     }
     if (phase === 'idle') {
         return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderIdle() }));

package/dist/cli.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
 import { App } from './app.js';
-import { createSynchronizedWriteProxy, shouldUseSynchronizedOutput } from './utils/terminal.js';
+import { sanitizeTerminalText } from './utils/helpers.js';
+import { createSynchronizedWriteProxy, resetDefaultTerminalBackground, shouldUseDisplayPalette, shouldUseSynchronizedOutput, } from './utils/terminal.js';
 const ENTER_ALT_SCREEN = '\u001B[?1049h\u001B[2J\u001B[H';
 const EXIT_ALT_SCREEN = '\u001B[?1049l';
 // Simple arg parsing – accept an optional recipe URL as the first positional arg
@@ -31,7 +32,7 @@ if (args.includes('--help') || args.includes('-h')) {
 }
 // Handle --version / -v
 if (args.includes('--version') || args.includes('-v')) {
-    console.log('parsely-cli v2.0.0');
+    console.log('parsely-cli v2.2.0');
     process.exit(0);
 }
 async function main() {
@@ -50,12 +51,18 @@ async function main() {
         await instance.waitUntilExit();
     }
     finally {
+        if (useAltScreen && shouldUseDisplayPalette()) {
+            process.stdout.write(resetDefaultTerminalBackground());
+        }
         if (useAltScreen) {
             process.stdout.write(EXIT_ALT_SCREEN);
         }
+        if (useAltScreen && shouldUseDisplayPalette()) {
+            process.stdout.write(resetDefaultTerminalBackground());
+        }
     }
 }
 main().catch((error) => {
-    console.error(error instanceof Error ? error.message : String(error));
+    console.error(error instanceof Error ? sanitizeTerminalText(error.message) : 'Unexpected error');
     process.exit(1);
 });

package/dist/components/Footer.js

@@ -5,18 +5,22 @@ import { theme } from '../theme.js';
 const keybinds = {
     idle: [
         { key: 'enter', label: 'scrape' },
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'ctrl+c', label: 'exit' },
     ],
     scraping: [
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'ctrl+c', label: 'exit' },
     ],
     display: [
         { key: 'n', label: 'new recipe' },
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'q', label: 'quit' },
-        { key: 'esc', label: 'quit' },
+        { key: 'esc', label: 'back' },
     ],
     error: [
         { key: 'enter', label: 'retry' },
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'ctrl+c', label: 'exit' },
     ],
 };

package/dist/components/LandingScreen.d.ts

@@ -2,6 +2,7 @@ interface LandingScreenProps {
     width: number;
     height: number;
     onSubmit: (url: string) => void;
+    onToggleTheme?: () => void;
 }
-export declare function LandingScreen({ width, height, onSubmit }: LandingScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function LandingScreen({ width, height, onSubmit, onToggleTheme }: LandingScreenProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LandingScreen.js

@@ -5,8 +5,15 @@ import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { URLInput } from './URLInput.js';
 import { theme } from '../theme.js';
-import { useDisplayPalette } from '../hooks/useDisplayPalette.js';
-const logoSvg = readFileSync(fileURLToPath(new URL('../../public/parsely-logo.svg', import.meta.url)), 'utf8');
+function readLogoSvg() {
+    try {
+        return readFileSync(fileURLToPath(new URL('../../public/parsely-logo.svg', import.meta.url)), 'utf8');
+    }
+    catch {
+        return '';
+    }
+}
+const logoSvg = readLogoSvg();
 const logoColor = logoSvg.match(/fill="(#[0-9a-fA-F]{6})"/)?.[1] ?? theme.colors.brand;
 const ANSI_PATTERN = /\u001B\[[0-9;]*m/g;
 const RENDER_BOUNDS = { width: 240, height: 80 };
@@ -34,6 +41,14 @@ function stripCommonIndent(lines) {
     }
     return lines.map((line) => line.slice(indent));
 }
+function buildOccurrenceKeys(items) {
+    const counts = new Map();
+    return items.map((item) => {
+        const count = (counts.get(item) ?? 0) + 1;
+        counts.set(item, count);
+        return `${item}-${count}`;
+    });
+}
 function buildLandingArt() {
     const rendered = CFonts.render('Parsely', {
         font: 'block',
@@ -64,11 +79,11 @@ const compactLandingArt = {
     lines: ['PARSLEY'],
     width: 'PARSLEY'.length,
 };
-export function LandingScreen({ width, height, onSubmit }) {
-    useDisplayPalette(theme.colors.recipePaper);
+export function LandingScreen({ width, height, onSubmit, onToggleTheme }) {
     const art = width >= primaryLandingArt.width + 8 ? primaryLandingArt : compactLandingArt;
+    const artKeys = buildOccurrenceKeys(art.lines);
     const inputWidth = width >= 120 ? 54 : width >= 84 ? 46 : Math.max(28, width - 16);
     const controlsWidth = inputWidth + 8;
     const contentWidth = Math.min(width - 6, Math.max(controlsWidth, art.width));
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", alignItems: "center", width: contentWidth, children: [_jsx(Box, { width: "100%", justifyContent: "center", marginBottom: 2, children: _jsx(Box, { flexDirection: "column", width: art.width, children: art.lines.map((line, index) => (_jsx(Text, { color: logoColor, bold: true, children: line }, index))) }) }), _jsx(Box, { width: controlsWidth, justifyContent: "center", children: _jsx(URLInput, { onSubmit: onSubmit, mode: "landing", width: inputWidth }) })] }) }), _jsx(Box, { height: 1 })] }));
+    return (_jsx(Box, { flexDirection: "column", width: "100%", height: "100%", paddingX: 2, paddingY: 1, children: _jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", alignItems: "center", width: contentWidth, children: [_jsx(Box, { width: "100%", justifyContent: "center", marginBottom: 2, children: _jsx(Box, { flexDirection: "column", width: art.width, children: art.lines.map((line, index) => (_jsx(Text, { color: logoColor, bold: true, children: line }, artKeys[index]))) }) }), _jsx(Box, { width: controlsWidth, justifyContent: "center", children: _jsx(URLInput, { onSubmit: onSubmit, onToggleTheme: onToggleTheme, mode: "landing", width: inputWidth }) })] }) }) }));
 }

package/dist/components/LoadingScreen.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import { theme } from '../theme.js';
-import { useDisplayPalette } from '../hooks/useDisplayPalette.js';
 function getLoadingCopy(status) {
     switch (status?.phase) {
         case 'parsing':
@@ -16,6 +15,5 @@ function getLoadingCopy(status) {
     }
 }
 export function LoadingScreen({ status }) {
-    useDisplayPalette(theme.colors.recipePaper);
     return (_jsx(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Text, { color: theme.colors.recipeText, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.recipeText, bold: true, children: getLoadingCopy(status) }) })] }) }));
 }

package/dist/components/RecipeCard.d.ts

@@ -2,7 +2,8 @@ import type { Recipe } from '../services/scraper.js';
 interface RecipeCardProps {
     recipe: Recipe;
     width: number;
+    height: number;
     sourceUrl?: string;
 }
-export declare function RecipeCard({ recipe, width, sourceUrl }: RecipeCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecipeCard({ recipe, width, height, sourceUrl }: RecipeCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RecipeCard.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
 import BigText from 'ink-big-text';
 import { theme } from '../theme.js';
 import { formatMinutes, getUrlHost, isoToMinutes } from '../utils/helpers.js';
-import { useDisplayPalette } from '../hooks/useDisplayPalette.js';
+import { wrapText } from '../utils/text-layout.js';
 function extractInstructions(recipe) {
     const raw = recipe.recipeInstructions;
     if (!raw)
@@ -87,18 +88,142 @@ function SidebarCard({ title, children, }) {
 function DetailStack({ label, value }) {
     return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: label }), _jsx(Text, { color: theme.colors.recipeText, wrap: "wrap", children: value })] }));
 }
-export function RecipeCard({ recipe, width, sourceUrl }) {
-    useDisplayPalette(theme.colors.recipePaper);
+function buildCompactHeaderLines(recipe, sourceHost, contentWidth) {
+    return [
+        'View original recipe',
+        sourceHost,
+        '',
+        ...wrapText(recipe.name ?? 'Untitled recipe', contentWidth),
+        '',
+        `Prep Time  ${formatTimeValue(recipe.prepTime)}`,
+        `Cook Time  ${formatTimeValue(recipe.cookTime)}`,
+        `Total Time ${formatTimeValue(recipe.totalTime)}`,
+        '',
+    ];
+}
+function buildCompactBodyLines(recipe, sourceHost, sourceLabel, sourceCopy, contentWidth, ingredients, instructions) {
+    const lines = [];
+    lines.push('Ingredients');
+    lines.push(buildRule(contentWidth, contentWidth));
+    lines.push('');
+    if (ingredients.length === 0) {
+        lines.push('No ingredients were detected.');
+    }
+    else {
+        for (const ingredient of ingredients) {
+            lines.push(...wrapText(ingredient, contentWidth, '□ ', '  '));
+            lines.push('');
+        }
+    }
+    lines.push('Instructions');
+    lines.push(buildRule(contentWidth, contentWidth));
+    lines.push('');
+    if (instructions.length === 0) {
+        lines.push('No instructions were detected.');
+    }
+    else {
+        instructions.forEach((step, index) => {
+            const marker = `${String(index + 1).padStart(2, '0')} `;
+            lines.push(...wrapText(step, contentWidth, marker, '   '));
+            lines.push('');
+        });
+    }
+    lines.push('Recipe brief');
+    lines.push(buildRule(contentWidth, contentWidth));
+    lines.push(...wrapText(`Source: ${sourceLabel}`, contentWidth));
+    lines.push(...wrapText(`Origin: ${sourceHost}`, contentWidth));
+    lines.push(...wrapText(`Status: ${sourceCopy}`, contentWidth));
+    return lines;
+}
+function buildCompactFooter(width, scrollOffset, maxScroll) {
+    const location = maxScroll > 0 ? `${scrollOffset + 1}/${maxScroll + 1}` : '1/1';
+    if (width >= 96) {
+        return `${location}  ${theme.symbols.dot}  ↑↓ scroll  ${theme.symbols.dot}  pgup/pgdn jump  ${theme.symbols.dot}  ctrl+t theme  ${theme.symbols.dot}  esc back  ${theme.symbols.dot}  n new  ${theme.symbols.dot}  q quit`;
+    }
+    if (width >= 58) {
+        return `${location}  ${theme.symbols.dot}  ↑↓ scroll  ${theme.symbols.dot}  ctrl+t theme  ${theme.symbols.dot}  esc back`;
+    }
+    return `ctrl+t theme  ${theme.symbols.dot}  esc back`;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+export function RecipeCard({ recipe, width, height, sourceUrl }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
     const instructions = extractInstructions(recipe);
     const ingredients = recipe.recipeIngredient ?? [];
     const ingredientKeys = buildOccurrenceKeys(ingredients);
     const instructionKeys = buildOccurrenceKeys(instructions);
-    const wide = width >= 124;
-    const splitContent = width >= 96;
-    const compact = width < 82;
     const sourceHost = getUrlHost(sourceUrl) || 'original page';
     const sourceLabel = recipe.source === 'browser' ? 'Page schema' : 'AI rescue';
     const sourceCopy = recipe.source === 'browser' ? 'Recovered from page schema' : 'Recovered with AI rescue';
+    const constrained = width < 110 || height < 34;
+    const compactContentWidth = Math.max(24, width - 4);
+    const compactHeaderLines = buildCompactHeaderLines(recipe, sourceHost, compactContentWidth);
+    const compactBodyLines = buildCompactBodyLines(recipe, sourceHost, sourceLabel, sourceCopy, compactContentWidth, ingredients, instructions);
+    const compactBodyHeight = Math.max(4, height - compactHeaderLines.length - 2);
+    const maxScroll = Math.max(0, compactBodyLines.length - compactBodyHeight);
+    const visibleBodyLines = compactBodyLines.slice(scrollOffset, scrollOffset + compactBodyHeight);
+    const compactHeaderKeys = buildOccurrenceKeys(compactHeaderLines);
+    const compactBodyKeys = buildOccurrenceKeys(compactBodyLines);
+    useEffect(() => {
+        setScrollOffset((current) => clamp(current, 0, maxScroll));
+    }, [maxScroll]);
+    useInput((input, key) => {
+        if (!constrained) {
+            return;
+        }
+        if (key.upArrow || input === 'k') {
+            setScrollOffset((current) => clamp(current - 1, 0, maxScroll));
+            return;
+        }
+        if (key.downArrow || input === 'j') {
+            setScrollOffset((current) => clamp(current + 1, 0, maxScroll));
+            return;
+        }
+        if (key.pageUp) {
+            setScrollOffset((current) => clamp(current - compactBodyHeight, 0, maxScroll));
+            return;
+        }
+        if (key.pageDown || input === ' ') {
+            setScrollOffset((current) => clamp(current + compactBodyHeight, 0, maxScroll));
+        }
+    }, { isActive: constrained });
+    if (constrained) {
+        return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", paddingX: 1, children: [_jsx(Box, { flexDirection: "column", children: compactHeaderLines.map((line, index) => {
+                        if (line === '') {
+                            return _jsx(Text, { children: " " }, compactHeaderKeys[index]);
+                        }
+                        if (index === 0) {
+                            return (_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: line }, compactHeaderKeys[index]));
+                        }
+                        if (index === 1) {
+                            return (_jsx(Text, { color: theme.colors.recipeSubtle, children: line }, compactHeaderKeys[index]));
+                        }
+                        if (index >= compactHeaderLines.length - 4 && line.includes('Time')) {
+                            return (_jsx(Text, { color: theme.colors.recipeText, bold: true, children: line }, compactHeaderKeys[index]));
+                        }
+                        return (_jsx(Text, { color: theme.colors.recipeText, bold: true, wrap: "wrap", children: line }, compactHeaderKeys[index]));
+                    }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleBodyLines.map((line, index) => {
+                        const bodyKey = compactBodyKeys[scrollOffset + index];
+                        const trimmed = line.trim();
+                        if (!trimmed) {
+                            return _jsx(Text, { children: " " }, bodyKey);
+                        }
+                        const heading = trimmed === 'Ingredients' || trimmed === 'Instructions' || trimmed === 'Recipe brief';
+                        const rule = trimmed === buildRule(compactContentWidth, compactContentWidth);
+                        return (_jsx(Text, { color: heading
+                                ? theme.colors.recipeBorder
+                                : rule
+                                    ? theme.colors.recipeSoft
+                                    : line.startsWith('□ ') || /^\d{2}\s/u.test(line)
+                                        ? theme.colors.recipeText
+                                        : theme.colors.recipeSubtle, bold: heading || line.startsWith('□ ') || /^\d{2}\s/u.test(line), children: line }, bodyKey));
+                    }) }), _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: theme.colors.recipeMuted, children: buildCompactFooter(width, scrollOffset, maxScroll) }), _jsx(Text, { color: theme.colors.recipePaper, children: " " })] })] }));
+    }
+    const wide = width >= 124;
+    const splitContent = width >= 96;
+    const compact = width < 82;
     const titleLineCount = width >= 132 ? 2 : 3;
     const titleChars = Math.max(16, Math.ceil((recipe.name ?? 'Untitled recipe').length / titleLineCount) + 4);
     const titleLines = splitTitle(recipe.name ?? 'Untitled recipe', titleChars, titleLineCount);
@@ -106,6 +231,6 @@ export function RecipeCard({ recipe, width, sourceUrl }) {
     const sectionRule = buildRule(Math.floor(width * (wide ? 0.5 : 0.82)), 58);
     const sidebarWidth = wide ? 30 : '100%';
     const mainWidth = wide ? '68%' : '100%';
-    const showBigTitle = width >= 110;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", paddingX: compact ? 1 : 2, paddingY: 1, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: "View original recipe" }), _jsx(Text, { color: theme.colors.recipeSubtle, children: sourceHost }), showBigTitle ? (_jsx(Box, { marginTop: 1, flexDirection: "column", children: titleLines.map((line) => (_jsx(BigText, { text: line, font: "tiny", colors: [theme.colors.recipeText], lineHeight: 0 }, line))) })) : (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Text, { color: theme.colors.recipeText, bold: true, wrap: "wrap", children: recipe.name ?? 'Untitled recipe' }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.recipeBorder, children: heroRule }) }), _jsxs(Box, { flexDirection: compact ? 'column' : 'row', marginTop: 1, marginBottom: 2, children: [_jsx(Metric, { label: "Prep Time", value: formatTimeValue(recipe.prepTime) }), _jsx(Metric, { label: "Cook Time", value: formatTimeValue(recipe.cookTime) }), _jsx(Metric, { label: "Total Time", value: formatTimeValue(recipe.totalTime) })] }), _jsxs(Box, { flexDirection: wide ? 'row' : 'column', gap: 3, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, width: mainWidth, children: [_jsxs(Box, { flexDirection: splitContent ? 'row' : 'column', gap: 3, alignItems: "flex-end", children: [_jsxs(Box, { width: splitContent ? '38%' : '100%', children: [_jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: "Ingredients" }), _jsx(Text, { color: theme.colors.recipeBorder, children: buildRule(16, 16) })] }), _jsxs(Box, { width: splitContent ? '62%' : '100%', children: [_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: "Instructions" }), _jsx(Text, { color: theme.colors.recipeSoft, children: buildRule(22, 22) })] })] }), _jsx(Text, { color: theme.colors.recipeBorder, children: sectionRule }), _jsxs(Box, { flexDirection: splitContent ? 'row' : 'column', gap: 4, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { flexDirection: "column", width: splitContent ? '38%' : '100%', children: ingredients.length > 0 ? (ingredients.map((item, index) => (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: "\u25A1" }), _jsx(Text, { color: theme.colors.recipeText, children: " " }), _jsx(Text, { color: theme.colors.recipeText, bold: true, wrap: "wrap", children: item })] }, ingredientKeys[index])))) : (_jsx(Text, { color: theme.colors.recipeMuted, children: "No ingredients were detected." })) }), _jsx(Box, { flexDirection: "column", width: splitContent ? '62%' : '100%', children: instructions.length > 0 ? (instructions.map((step, index) => (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { width: 4, children: _jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: String(index + 1).padStart(2, '0') }) }), _jsx(Text, { color: theme.colors.recipeSubtle, wrap: "wrap", children: step })] }, instructionKeys[index])))) : (_jsx(Text, { color: theme.colors.recipeMuted, children: "No instructions were detected." })) })] })] }), _jsxs(Box, { flexDirection: "column", width: sidebarWidth, minWidth: wide ? 30 : undefined, marginTop: wide ? 2 : 0, children: [_jsxs(SidebarCard, { title: "Recipe brief", children: [_jsx(DetailStack, { label: "Source", value: sourceLabel }), _jsx(DetailStack, { label: "Origin", value: sourceHost }), _jsx(DetailStack, { label: "Status", value: sourceCopy })] }), _jsxs(SidebarCard, { title: "Kitchen rhythm", children: [_jsx(DetailStack, { label: "Ingredients", value: String(ingredients.length) }), _jsx(DetailStack, { label: "Steps", value: String(instructions.length) }), _jsx(DetailStack, { label: "Timeline", value: formatTimeValue(recipe.totalTime) })] }), _jsxs(SidebarCard, { title: "Next actions", children: [_jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["n", _jsx(Text, { color: theme.colors.recipeMuted, children: " new recipe" })] }), _jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["q", _jsx(Text, { color: theme.colors.recipeMuted, children: " quit" })] }), _jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["esc", _jsx(Text, { color: theme.colors.recipeMuted, children: " back" })] })] })] })] })] }) }));
+    const showBigTitle = width >= 110 && height >= 38;
+    return (_jsx(Box, { flexDirection: "column", width: "100%", height: "100%", paddingX: compact ? 1 : 2, paddingY: 1, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: "View original recipe" }), _jsx(Text, { color: theme.colors.recipeSubtle, children: sourceHost }), showBigTitle ? (_jsx(Box, { marginTop: 1, flexDirection: "column", children: titleLines.map((line) => (_jsx(BigText, { text: line, font: "tiny", colors: [theme.colors.recipeText], lineHeight: 0 }, line))) })) : (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Text, { color: theme.colors.recipeText, bold: true, wrap: "wrap", children: recipe.name ?? 'Untitled recipe' }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.recipeBorder, children: heroRule }) }), _jsxs(Box, { flexDirection: compact ? 'column' : 'row', marginTop: 1, marginBottom: 2, children: [_jsx(Metric, { label: "Prep Time", value: formatTimeValue(recipe.prepTime) }), _jsx(Metric, { label: "Cook Time", value: formatTimeValue(recipe.cookTime) }), _jsx(Metric, { label: "Total Time", value: formatTimeValue(recipe.totalTime) })] }), _jsxs(Box, { flexDirection: wide ? 'row' : 'column', gap: 3, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, width: mainWidth, children: [_jsxs(Box, { flexDirection: splitContent ? 'row' : 'column', gap: 3, alignItems: "flex-end", children: [_jsxs(Box, { width: splitContent ? '38%' : '100%', children: [_jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: "Ingredients" }), _jsx(Text, { color: theme.colors.recipeBorder, children: buildRule(16, 16) })] }), _jsxs(Box, { width: splitContent ? '62%' : '100%', children: [_jsx(Text, { color: theme.colors.recipeMuted, bold: true, children: "Instructions" }), _jsx(Text, { color: theme.colors.recipeSoft, children: buildRule(22, 22) })] })] }), _jsx(Text, { color: theme.colors.recipeBorder, children: sectionRule }), _jsxs(Box, { flexDirection: splitContent ? 'row' : 'column', gap: 4, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { flexDirection: "column", width: splitContent ? '38%' : '100%', children: ingredients.length > 0 ? (ingredients.map((item, index) => (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: "\u25A1" }), _jsx(Text, { color: theme.colors.recipeText, children: " " }), _jsx(Text, { color: theme.colors.recipeText, bold: true, wrap: "wrap", children: item })] }, ingredientKeys[index])))) : (_jsx(Text, { color: theme.colors.recipeMuted, children: "No ingredients were detected." })) }), _jsx(Box, { flexDirection: "column", width: splitContent ? '62%' : '100%', children: instructions.length > 0 ? (instructions.map((step, index) => (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { width: 4, children: _jsx(Text, { color: theme.colors.recipeBorder, bold: true, children: String(index + 1).padStart(2, '0') }) }), _jsx(Text, { color: theme.colors.recipeSubtle, wrap: "wrap", children: step })] }, instructionKeys[index])))) : (_jsx(Text, { color: theme.colors.recipeMuted, children: "No instructions were detected." })) })] })] }), _jsxs(Box, { flexDirection: "column", width: sidebarWidth, minWidth: wide ? 30 : undefined, marginTop: wide ? 2 : 0, children: [_jsxs(SidebarCard, { title: "Recipe brief", children: [_jsx(DetailStack, { label: "Source", value: sourceLabel }), _jsx(DetailStack, { label: "Origin", value: sourceHost }), _jsx(DetailStack, { label: "Status", value: sourceCopy })] }), _jsxs(SidebarCard, { title: "Kitchen rhythm", children: [_jsx(DetailStack, { label: "Ingredients", value: String(ingredients.length) }), _jsx(DetailStack, { label: "Steps", value: String(instructions.length) }), _jsx(DetailStack, { label: "Timeline", value: formatTimeValue(recipe.totalTime) })] }), _jsxs(SidebarCard, { title: "Next actions", children: [_jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["n", _jsx(Text, { color: theme.colors.recipeMuted, children: " new recipe" })] }), _jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["ctrl+t", _jsx(Text, { color: theme.colors.recipeMuted, children: " toggle theme" })] }), _jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["q", _jsx(Text, { color: theme.colors.recipeMuted, children: " quit" })] }), _jsxs(Text, { color: theme.colors.recipeText, bold: true, children: ["esc", _jsx(Text, { color: theme.colors.recipeMuted, children: " back" })] })] })] })] })] }) }));
 }

package/dist/components/URLInput.d.ts

@@ -1,7 +1,8 @@
 interface URLInputProps {
     onSubmit: (url: string) => void;
+    onToggleTheme?: () => void;
     mode?: 'default' | 'landing';
     width?: number;
 }
-export declare function URLInput({ onSubmit, mode, width }: URLInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function URLInput({ onSubmit, onToggleTheme, mode, width }: URLInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/URLInput.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text } from 'ink';
+import { useEffect, useRef, useState } from 'react';
+import { Box, Text, useStdin } from 'ink';
 import TextInput from 'ink-text-input';
 import { theme } from '../theme.js';
 import { normalizeRecipeUrl, sanitizeSingleLineInput } from '../utils/helpers.js';
-export function URLInput({ onSubmit, mode = 'default', width }) {
+export function URLInput({ onSubmit, onToggleTheme, mode = 'default', width }) {
     const [value, setValue] = useState('');
     const [error, setError] = useState('');
+    const ignoreNextChange = useRef(false);
+    const { stdin } = useStdin();
     const landing = mode === 'landing';
     const landingButtonLabel = '  Go  ';
+    const shortcutCopy = width && width < 40
+        ? 'ctrl+c exit'
+        : 'ctrl+c exit  ·  ctrl+t theme';
     const handleSubmit = (input) => {
         const url = normalizeRecipeUrl(input);
         if (!url) {
@@ -24,13 +29,31 @@ export function URLInput({ onSubmit, mode = 'default', width }) {
         onSubmit(url);
     };
     const handleChange = (nextValue) => {
+        if (ignoreNextChange.current) {
+            ignoreNextChange.current = false;
+            return;
+        }
         const sanitized = sanitizeSingleLineInput(nextValue);
         setValue(sanitized);
         if (error)
             setError('');
-        if (sanitized !== nextValue && sanitized.trim()) {
-            handleSubmit(sanitized);
-        }
     };
-    return (_jsxs(Box, { flexDirection: "column", children: [!landing && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.muted, children: "Paste a recipe URL or type a hostname. Parsely will add `https://` when needed." }) })), _jsxs(Box, { alignItems: "center", children: [_jsxs(Box, { borderStyle: "round", borderColor: landing ? theme.colors.brand : theme.colors.borderFocus, width: width, paddingX: 1, paddingY: 0, children: [!landing && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: "URL" }), _jsx(Text, { color: theme.colors.muted, children: " " })] })), _jsx(TextInput, { value: value, focus: true, onChange: handleChange, onSubmit: handleSubmit, placeholder: landing ? 'Paste recipe link here' : 'Enter recipe URL...' })] }), landing && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { backgroundColor: theme.colors.brand, color: theme.colors.recipePaper, bold: true, children: landingButtonLabel }) }))] }), !landing && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.muted, children: "Press enter to scrape. Try a specific recipe page, not a site homepage." }) })), error && (_jsx(Box, { marginLeft: landing ? 0 : 2, marginTop: 1, justifyContent: landing ? 'center' : undefined, children: _jsxs(Text, { color: theme.colors.error, children: [theme.symbols.cross, " ", error] }) }))] }));
+    useEffect(() => {
+        if (!onToggleTheme) {
+            return;
+        }
+        const handleData = (data) => {
+            const chunk = typeof data === 'string' ? data : data.toString('utf8');
+            if (!chunk.includes('\u0014')) {
+                return;
+            }
+            ignoreNextChange.current = true;
+            onToggleTheme();
+        };
+        stdin.on('data', handleData);
+        return () => {
+            stdin.off('data', handleData);
+        };
+    }, [onToggleTheme, stdin]);
+    return (_jsxs(Box, { flexDirection: "column", children: [!landing && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.muted, children: "Paste a recipe URL or type a hostname. Parsely will add `https://` when needed." }) })), _jsxs(Box, { alignItems: "center", children: [_jsxs(Box, { borderStyle: "round", borderColor: landing ? theme.colors.brand : theme.colors.borderFocus, width: width, paddingX: 1, paddingY: 0, children: [!landing && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: "URL" }), _jsx(Text, { color: theme.colors.muted, children: " " })] })), _jsx(TextInput, { value: value, focus: true, onChange: handleChange, onSubmit: handleSubmit, placeholder: landing ? 'Paste recipe link here' : 'Enter recipe URL...' })] }), landing && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { backgroundColor: theme.colors.brand, color: theme.colors.recipePaper, bold: true, children: landingButtonLabel }) }))] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [!landing && (_jsx(Text, { color: theme.colors.muted, children: "Press enter to scrape. Try a specific recipe page, not a site homepage." })), _jsx(Box, { justifyContent: landing ? 'center' : 'flex-end', children: _jsx(Text, { color: theme.colors.muted, children: shortcutCopy }) })] }), error && (_jsx(Box, { marginLeft: landing ? 0 : 2, marginTop: 1, justifyContent: landing ? 'center' : undefined, children: _jsxs(Text, { color: theme.colors.error, children: [theme.symbols.cross, " ", error] }) }))] }));
 }

package/dist/services/scraper.d.ts

@@ -24,6 +24,7 @@ export interface ScrapeStatus {
  */
 export declare function findRecipeJson(scripts: string[]): Record<string, unknown> | null;
 export declare function containsBrowserChallenge(html: string): boolean;
+export declare function normalizeAiRecipe(recipe: Record<string, unknown>): Recipe;
 export declare function extractRecipeFromHtml(html: string): Recipe | null;
 /**
  * Scrape a recipe from the given URL.