@sambitcreate/parsely-cli 2.0.0 → 2.1.0

package/README.md

@@ -1,151 +1,138 @@
 # Parsely CLI
 
-A smart, interactive recipe scraper for the terminal. Parsely extracts structured recipe data (ingredients, instructions, cook times) from any recipe URL using headless Chrome with an intelligent AI fallback.
+A smart recipe scraper for the terminal. It turns a recipe URL into a clean cooking brief with ingredients, timings, steps, and source metadata inside a viewport-filling terminal UI.
 
-Built with [Ink](https://github.com/vadimdemedes/ink) (React for CLIs) for a rich, responsive terminal UI.
+## Installation
 
-## Features
-
-- **Interactive TUI** — Full terminal interface built with Ink and React, featuring bordered panels, spinners, and color-coded output.
-- **Browser Scraping** — Headless Chrome via Puppeteer extracts Schema.org JSON-LD data from recipe pages, handling JavaScript-rendered content.
-- **AI Fallback** — Automatically switches to OpenAI `gpt-4o-mini` when browser scraping can't find recipe data.
-- **Structured Output** — Displays prep time, cook time, total time, ingredients, and step-by-step instructions in a clean card layout.
-- **Keyboard-Driven** — Context-aware keybind hints in the footer; press `n` for a new recipe or `q` to quit.
-
-## Preview
-
-![Parsely CLI Screenshot](screenshot.png)
-
-## Project Structure
-
-```
-parsely-cli/
-├── src/
-│   ├── cli.tsx              # Entry point — arg parsing, renders <App>
-│   ├── app.tsx              # Root component — state machine (idle → scraping → display)
-│   ├── theme.ts             # Color palette and symbols
-│   ├── components/
-│   │   ├── Banner.tsx       # ASCII art header
-│   │   ├── URLInput.tsx     # URL text input with validation
-│   │   ├── RecipeCard.tsx   # Recipe display card (times, ingredients, instructions)
-│   │   ├── ScrapingStatus.tsx # Spinner with phase updates
-│   │   ├── Footer.tsx       # Context-aware keybind hints
-│   │   ├── Welcome.tsx      # Welcome message
-│   │   └── ErrorDisplay.tsx # Error panel
-│   ├── services/
-│   │   └── scraper.ts       # Puppeteer + OpenAI scraping logic
-│   └── utils/
-│       └── helpers.ts       # ISO duration parser, config, URL validation
-├── package.json
-├── tsconfig.json
-├── run.sh                   # Quick-start launcher script
-├── .env.local               # Your OpenAI API key (create this)
-├── CLAUDE.md                # AI assistant context
-├── CODE_OF_CONDUCT.md
-└── LICENSE
+### npm
+```bash
+npm install -g @sambitcreate/parsely-cli
 ```
 
-## Setup
+### Homebrew
+```bash
+brew tap sambitcreate/tap
+brew install parsely
+```
 
-### Prerequisites
+## Usage
 
-- **Node.js** v18 or later
-- **npm** v9 or later
+```bash
+parsely
+parsely https://www.simplyrecipes.com/recipes/perfect_guacamole/
+parsely --help
+parsely --version
+```
 
-### Installation
+## Configuration
 
-1. **Clone the repository:**
+For AI fallback (optional but recommended), set the OpenAI API key:
 
-   ```bash
-   git clone <your-repository-url>
-   cd parsely-cli
-   ```
+```bash
+export OPENAI_API_KEY="your_key_here"
+```
 
-2. **Install dependencies:**
+Without this, browser scraping still works for most recipe sites.
 
-   ```bash
-   npm install
-   ```
+Optional terminal tuning:
 
-   Uses `puppeteer-core` — no Chromium download. The CLI auto-detects system Chrome/Chromium. If none is found, browser scraping is skipped and the AI fallback is used.
+```bash
+export PARSELY_SYNC_OUTPUT=1   # force synchronized output on
+export PARSELY_SYNC_OUTPUT=0   # force synchronized output off
+```
 
-3. **Configure AI fallback (optional but recommended):**
+## Terminal UI
 
-   Create a `.env.local` file in the project root:
+- 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
+- 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
 
-   ```
-   OPENAI_API_KEY="your_openai_api_key_here"
-   ```
+## Keyboard Shortcuts
 
-   Without this, the AI fallback will not function — browser scraping will still work for most recipe sites.
+| Key      | Action            |
+| -------- | ----------------- |
+| `Enter`  | Submit URL        |
+| `n`      | Scrape new recipe |
+| `q`      | Quit              |
+| `Esc`    | Quit from result view |
+| `Ctrl+C` | Exit              |
 
-## Usage
+## Troubleshooting
 
-### Quick Start
+- **`Error: OpenAI API key not found`** — Set `OPENAI_API_KEY` environment variable
+- **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
+- **Some sites challenge headless browsers** — Parsely now uses a more browser-like Puppeteer setup, but challenge pages can still force an AI fallback
 
-```bash
-./run.sh
-```
+## License
 
-The launcher script installs dependencies automatically on first run, then starts the TUI.
+MIT — see [LICENSE](LICENSE).
 
-### With a URL Argument
+## For Developers
 
-```bash
-npm start -- https://www.simplyrecipes.com/recipes/perfect_guacamole/
+### Project Structure
 ```
-
-Or via the run script:
-
-```bash
-./run.sh https://www.simplyrecipes.com/recipes/perfect_guacamole/
+parsely-cli/
+├── src/
+│   ├── cli.tsx              # Entry point
+│   ├── app.tsx              # Root component — app shell + state machine
+│   ├── theme.ts             # Color palette
+│   ├── components/          # UI components
+│   ├── hooks/               # Terminal viewport and screen management
+│   ├── services/scraper.ts  # Puppeteer + OpenAI
+│   └── utils/               # Input, URL, and terminal helpers
+├── test/                    # Unit tests for helpers and scraper parsing
+├── package.json
+├── tsconfig.json
+└── CLAUDE.md                # AI assistant context
 ```
 
-### Interactive Mode
-
-Run without arguments and enter a URL when prompted:
+### Development Setup
 
 ```bash
-npm start
+git clone https://github.com/sambitcreate/parsely-cli.git
+cd parsely-cli
+npm install
+npm run dev
+npm test
 ```
 
-### Keyboard Shortcuts
-
-| Key      | Context  | Action            |
-| -------- | -------- | ----------------- |
-| `Enter`  | Input    | Submit URL        |
-| `n`      | Display  | Scrape new recipe |
-| `q`      | Display  | Quit              |
-| `Ctrl+C` | Anywhere | Exit              |
+### How It Works
 
-## How It Works
+1. **Browser Scraping** — Headless Chrome loads the page and extracts Schema.org JSON-LD recipe data
+2. **Parsing Stage** — Parsely scans and normalizes recipe schema before deciding whether the page is usable
+3. **AI Fallback** — OpenAI `gpt-4o-mini` extracts data only when browser parsing cannot recover a recipe
+4. **Display** — The result is plated into a responsive terminal recipe deck with pipeline, prep, and method panels
 
-1. **Browser Scraping** — Puppeteer launches headless Chrome, navigates to the URL, and extracts `<script type="application/ld+json">` blocks. The first Schema.org `Recipe` object found is parsed and displayed.
+### UI Structure
 
-2. **AI Fallback** — If the browser fails or no JSON-LD recipe is found, the URL is sent to OpenAI's `gpt-4o-mini` with a structured extraction prompt. The model returns recipe data as JSON.
+- `Banner` — status-aware header with current host and app state
+- `Panel` — shared bordered container used across the app shell
+- `PhaseRail` — pipeline view for browser, parsing, and AI stages
+- `URLInput` — normalizes pasted newlines and submits on `Enter`
+- `RecipeCard` — split recipe layout with summary, ingredients, timing, and method
+- `Footer` — persistent status line and key hints
+- `useTerminalViewport` — terminal sizing and resize tracking
+- `utils/terminal.ts` — synchronized-output and render-height helpers for stable full-screen updates
 
-3. **Display** — Recipe data is rendered in a bordered card with color-coded sections for times, ingredients, and instructions.
+### Tests
 
-## Architecture
-
-The TUI is built with **Ink** (React for the terminal) following patterns inspired by [OpenCode](https://github.com/anomalyco/opencode):
-
-- **Component-based architecture** — Each UI element is an isolated React component.
-- **State machine** — The app cycles through phases: `idle` → `scraping` → `display` (or `error`).
-- **Theme system** — Centralized color palette in `theme.ts` for consistent styling.
-- **Context-aware footer** — Keybind hints update based on the current phase.
-- **Callback-driven progress** — The scraper reports phase changes to the TUI via callbacks so the spinner updates in real time.
-
-## Troubleshooting
-
-- **`Error: OpenAI API key not found`** — Create a `.env.local` file with your API key. The AI fallback requires this, but browser scraping works without it.
-- **Browser scraping skipped** — The CLI auto-detects system Chrome/Chromium. If none is found, it skips browser scraping and uses the AI fallback. Install Chrome or Chromium to enable browser scraping.
-- **No recipe found** — Some sites use non-standard recipe markup. The AI fallback handles most of these, but results depend on the OpenAI model's ability to extract the recipe.
-
-## License
+```bash
+npm test
+```
 
-MIT — see [LICENSE](LICENSE).
+The test suite covers input normalization and the pure HTML/schema extraction helpers used by the scraper.
 
-## Code of Conduct
+### Build & Publish
 
-See [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).
+```bash
+npm run build
+npm publish --access public
+```

package/dist/app.js

@@ -1,63 +1,106 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { Box, useApp, useInput } from 'ink';
 import { Banner } from './components/Banner.js';
 import { URLInput } from './components/URLInput.js';
 import { RecipeCard } from './components/RecipeCard.js';
-import { ScrapingStatus } from './components/ScrapingStatus.js';
 import { Footer } from './components/Footer.js';
-import { Welcome } from './components/Welcome.js';
 import { ErrorDisplay } from './components/ErrorDisplay.js';
+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 { getRenderableHeight } from './utils/terminal.js';
+import { LandingScreen } from './components/LandingScreen.js';
+import { LoadingScreen } from './components/LoadingScreen.js';
 export function App({ initialUrl }) {
     const { exit } = useApp();
+    const { width, height } = useTerminalViewport();
+    const renderHeight = getRenderableHeight(height);
     const [phase, setPhase] = useState(initialUrl ? 'scraping' : 'idle');
     const [recipe, setRecipe] = useState(null);
     const [scrapeStatus, setScrapeStatus] = useState(null);
     const [error, setError] = useState('');
+    const [currentUrl, setCurrentUrl] = useState(initialUrl ?? '');
+    const activeScrapeController = useRef(null);
+    const wide = width >= 112;
+    const shortViewport = renderHeight < 30;
+    const cancelActiveScrape = useCallback(() => {
+        activeScrapeController.current?.abort();
+        activeScrapeController.current = null;
+    }, []);
     const handleScrape = useCallback(async (url) => {
+        cancelActiveScrape();
+        const controller = new AbortController();
+        activeScrapeController.current = controller;
+        setCurrentUrl(url);
         setPhase('scraping');
         setError('');
         setScrapeStatus({ phase: 'browser', message: 'Starting\u2026' });
         try {
             const result = await scrapeRecipe(url, (status) => {
                 setScrapeStatus(status);
-            });
+            }, controller.signal);
+            if (controller.signal.aborted || activeScrapeController.current !== controller) {
+                return;
+            }
             setRecipe(result);
             setPhase('display');
         }
         catch (err) {
+            if (controller.signal.aborted || activeScrapeController.current !== controller) {
+                return;
+            }
             setError(err instanceof Error ? err.message : 'Failed to scrape recipe');
             setPhase('error');
         }
-    }, []);
+        finally {
+            if (activeScrapeController.current === controller) {
+                activeScrapeController.current = null;
+            }
+        }
+    }, [cancelActiveScrape]);
     const handleNewRecipe = useCallback(() => {
         setPhase('idle');
         setRecipe(null);
         setError('');
         setScrapeStatus(null);
+        setCurrentUrl('');
     }, []);
-    // Scrape the initial URL if provided via CLI argument
     useEffect(() => {
         if (initialUrl) {
             handleScrape(initialUrl);
         }
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    // Global keybinds – only active during the display phase so they
-    // do not interfere with the text input in idle/error phases.
+    useEffect(() => {
+        return () => {
+            cancelActiveScrape();
+        };
+    }, [cancelActiveScrape]);
     useInput((input, key) => {
-        if (phase === 'display') {
-            if (input === 'n')
-                handleNewRecipe();
-            if (input === 'q')
-                exit();
-        }
-        // Ctrl+C is handled by Ink automatically
-        if (key.escape) {
-            if (phase === 'display')
-                exit();
+        if (key.ctrl && input === 'c') {
+            cancelActiveScrape();
+            exit();
+            return;
         }
-    });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Banner, {}), _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [phase === 'idle' && (_jsxs(_Fragment, { children: [_jsx(Welcome, {}), _jsx(URLInput, { onSubmit: handleScrape })] })), phase === 'scraping' && scrapeStatus && (_jsx(ScrapingStatus, { status: scrapeStatus })), phase === 'display' && recipe && (_jsxs(_Fragment, { children: [_jsx(RecipeCard, { recipe: recipe }), _jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { bold: true, color: theme.colors.success, children: [theme.symbols.check, " Recipe parsed successfully!"] }) })] })), phase === 'error' && (_jsxs(_Fragment, { children: [_jsx(ErrorDisplay, { message: error }), _jsx(URLInput, { onSubmit: handleScrape })] }))] }), _jsx(Footer, { phase: phase })] }));
+        if (phase === 'display' && input === 'n')
+            handleNewRecipe();
+        if (phase === 'display' && (input === 'q' || key.escape))
+            exit();
+    }, { isActive: phase === 'display' || phase === 'scraping' || phase === 'idle' || phase === 'error' });
+    const renderIdle = () => (_jsx(LandingScreen, { width: width, height: renderHeight, onSubmit: handleScrape }));
+    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 }) }) })] }));
+    if (phase === 'display') {
+        return (_jsx(Box, { flexDirection: "column", width: "100%", children: renderDisplay() }));
+    }
+    if (phase === 'idle') {
+        return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderIdle() }));
+    }
+    if (phase === 'scraping') {
+        return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderScraping() }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: [_jsx(Banner, { phase: phase, currentUrl: currentUrl, width: width, height: renderHeight }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: phase === 'error' && renderError() }), _jsx(Footer, { phase: phase, width: width })] }));
 }

package/dist/cli.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
 import { App } from './app.js';
+import { createSynchronizedWriteProxy, 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
 const args = process.argv.slice(2);
 const url = args.find((a) => !a.startsWith('-'));
@@ -31,4 +34,28 @@ if (args.includes('--version') || args.includes('-v')) {
     console.log('parsely-cli v2.0.0');
     process.exit(0);
 }
-render(_jsx(App, { initialUrl: url }));
+async function main() {
+    const useAltScreen = process.stdout.isTTY;
+    const inkStdout = useAltScreen && shouldUseSynchronizedOutput()
+        ? createSynchronizedWriteProxy(process.stdout)
+        : process.stdout;
+    if (useAltScreen) {
+        process.stdout.write(ENTER_ALT_SCREEN);
+    }
+    try {
+        const instance = render(_jsx(App, { initialUrl: url }), {
+            exitOnCtrlC: false,
+            stdout: inkStdout,
+        });
+        await instance.waitUntilExit();
+    }
+    finally {
+        if (useAltScreen) {
+            process.stdout.write(EXIT_ALT_SCREEN);
+        }
+    }
+}
+main().catch((error) => {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+});

package/dist/components/Banner.d.ts

@@ -1 +1,9 @@
-export declare function Banner(): import("react/jsx-runtime").JSX.Element;
+type AppPhase = 'idle' | 'scraping' | 'display' | 'error';
+interface BannerProps {
+    phase: AppPhase;
+    currentUrl?: string;
+    width: number;
+    height: number;
+}
+export declare function Banner({ phase, currentUrl, width, height }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Banner.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { theme } from '../theme.js';
-const LOGO = `\
- ____   _    ____  ____  _____ _  __   __    ____ _     ___
-|  _ \\ / \\  |  _ \\/ ___|| ____| | \\ \\ / /   / ___| |   |_ _|
-| |_) / _ \\ | |_) \\___ \\|  _| | |  \\ V /   | |   | |    | |
-|  __/ ___ \\|  _ < ___) | |___| |___| |    | |___| |___ | |
-|_| /_/   \\_\\_| \\_\\____/|_____|_____|_|     \\____|_____|___|`;
-export function Banner() {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: theme.colors.banner, bold: true, children: LOGO }), _jsxs(Text, { color: theme.colors.muted, children: ['  ', "Smart recipe scraper ", theme.symbols.dot, " v2.0"] })] }));
+import { getUrlHost } from '../utils/helpers.js';
+function getPhaseMeta(phase) {
+    switch (phase) {
+        case 'scraping':
+            return { label: 'SCRAPING', color: theme.colors.secondary };
+        case 'display':
+            return { label: 'PLATED', color: theme.colors.success };
+        case 'error':
+            return { label: 'RETRY', color: theme.colors.error };
+        default:
+            return { label: 'READY', color: theme.colors.primary };
+    }
+}
+export function Banner({ phase, currentUrl, width, height }) {
+    const compact = width < 88 || height < 26;
+    const phaseMeta = getPhaseMeta(phase);
+    const host = getUrlHost(currentUrl);
+    return (_jsxs(Box, { flexDirection: compact ? 'column' : 'row', justifyContent: "space-between", borderStyle: "round", borderColor: theme.colors.border, paddingX: 1, paddingY: 0, marginBottom: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.banner, children: "PARSELY" }), _jsx(Text, { color: theme.colors.text, bold: true, children: "Recipe intelligence in the terminal" }), !compact && (_jsx(Text, { color: theme.colors.muted, children: "Browser-first extraction with an AI rescue path when recipe schema is missing." }))] }), _jsxs(Box, { flexDirection: "column", alignItems: compact ? undefined : 'flex-end', marginTop: compact ? 1 : 0, children: [_jsxs(Text, { bold: true, color: phaseMeta.color, children: ["[", phaseMeta.label, "]"] }), _jsx(Text, { color: theme.colors.muted, children: host || 'Paste a recipe URL to begin' })] })] }));
 }

package/dist/components/ErrorDisplay.js

@@ -1,6 +1,7 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { Panel } from './Panel.js';
 import { theme } from '../theme.js';
 export function ErrorDisplay({ message }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.error, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.error, children: [theme.symbols.cross, " Scraping Failed"] }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(Text, { color: theme.colors.text, wrap: "wrap", children: message }) }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(Text, { color: theme.colors.muted, children: "Check the URL and try again, or ensure your .env.local has a valid OPENAI_API_KEY." }) })] }));
+    return (_jsxs(Panel, { title: "Scrape failed", eyebrow: "Recovery", accentColor: theme.colors.error, marginBottom: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.error, children: [theme.symbols.cross, " ", message] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Double-check that the URL points to a specific recipe page."] }), _jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Install Chrome or Chromium for the browser-first path."] }), _jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Add `OPENAI_API_KEY` to `.env.local` if you want AI fallback enabled."] })] })] }));
 }

package/dist/components/Footer.d.ts

@@ -1,6 +1,7 @@
 export type AppPhase = 'idle' | 'scraping' | 'display' | 'error';
 interface FooterProps {
     phase: AppPhase;
+    width: number;
 }
-export declare function Footer({ phase }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ phase, width }: FooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Footer.js

@@ -4,7 +4,7 @@ import { Box, Text } from 'ink';
 import { theme } from '../theme.js';
 const keybinds = {
     idle: [
-        { key: 'enter', label: 'submit' },
+        { key: 'enter', label: 'scrape' },
         { key: 'ctrl+c', label: 'exit' },
     ],
     scraping: [
@@ -13,13 +13,33 @@ const keybinds = {
     display: [
         { key: 'n', label: 'new recipe' },
         { key: 'q', label: 'quit' },
+        { key: 'esc', label: 'quit' },
     ],
     error: [
-        { key: 'enter', label: 'submit' },
+        { key: 'enter', label: 'retry' },
         { key: 'ctrl+c', label: 'exit' },
     ],
 };
-export function Footer({ phase }) {
+function getStatusCopy(phase) {
+    switch (phase) {
+        case 'scraping':
+            return 'Scanning the page and preparing a clean recipe deck.';
+        case 'display':
+            return 'Recipe plated. Press n to scrape another page.';
+        case 'error':
+            return 'The scrape failed. Adjust the URL or enable the AI fallback.';
+        default:
+            return 'Ready for a recipe URL.';
+    }
+}
+export function Footer({ phase, width }) {
     const hints = keybinds[phase];
-    return (_jsx(Box, { marginTop: 1, paddingX: 1, gap: 1, children: hints.map((hint, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { color: theme.colors.muted, children: theme.symbols.dot }), _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: hint.key }), _jsxs(Text, { color: theme.colors.muted, children: [" ", hint.label] })] })] }, hint.key))) }));
+    const compact = width < 92;
+    const statusCopy = compact
+        ? getStatusCopy(phase).replace('Scanning the page and preparing a clean recipe deck.', 'Scanning recipe page.')
+            .replace('Recipe plated. Press n to scrape another page.', 'Recipe plated.')
+            .replace('The scrape failed. Adjust the URL or enable the AI fallback.', 'Scrape failed.')
+            .replace('Ready for a recipe URL.', 'Ready.')
+        : getStatusCopy(phase);
+    return (_jsxs(Box, { flexDirection: compact ? 'column' : 'row', justifyContent: "space-between", borderStyle: "round", borderColor: theme.colors.border, paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsx(Text, { color: theme.colors.muted, children: statusCopy }), _jsx(Box, { marginTop: compact ? 1 : 0, children: hints.map((hint, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsxs(Text, { color: theme.colors.muted, children: [" ", theme.symbols.dot, " "] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: hint.key }), _jsxs(Text, { color: theme.colors.muted, children: [" ", hint.label] })] })] }, hint.key))) })] }));
 }

package/dist/components/LandingScreen.d.ts

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

package/dist/components/LandingScreen.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import CFonts from 'cfonts';
+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');
+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 };
+function getLineWidth(line) {
+    return Array.from(line).length;
+}
+function trimBlankLines(lines) {
+    const trimmed = [...lines];
+    while (trimmed[0]?.trim() === '') {
+        trimmed.shift();
+    }
+    while (trimmed.at(-1)?.trim() === '') {
+        trimmed.pop();
+    }
+    return trimmed;
+}
+function stripCommonIndent(lines) {
+    const nonEmpty = lines.filter((line) => line.trim());
+    if (nonEmpty.length === 0) {
+        return lines;
+    }
+    const indent = Math.min(...nonEmpty.map((line) => line.match(/^\s*/u)?.[0].length ?? 0));
+    if (indent === 0) {
+        return lines;
+    }
+    return lines.map((line) => line.slice(indent));
+}
+function buildLandingArt() {
+    const rendered = CFonts.render('Parsely', {
+        font: 'block',
+        align: 'left',
+        colors: ['system'],
+        letterSpacing: 0,
+        lineHeight: 0,
+        space: true,
+        maxLength: 0,
+    }, false, 0, RENDER_BOUNDS);
+    if (!rendered) {
+        return {
+            lines: ['PARSLEY'],
+            width: 'PARSLEY'.length,
+        };
+    }
+    const lines = stripCommonIndent(trimBlankLines(rendered.string
+        .replace(ANSI_PATTERN, '')
+        .split('\n')
+        .map((line) => line.replace(/\s+$/u, ''))));
+    return {
+        lines,
+        width: Math.max(...lines.map(getLineWidth)),
+    };
+}
+const primaryLandingArt = buildLandingArt();
+const compactLandingArt = {
+    lines: ['PARSLEY'],
+    width: 'PARSLEY'.length,
+};
+export function LandingScreen({ width, height, onSubmit }) {
+    useDisplayPalette(theme.colors.recipePaper);
+    const art = width >= primaryLandingArt.width + 8 ? primaryLandingArt : compactLandingArt;
+    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 })] }));
+}

package/dist/components/LoadingScreen.d.ts

@@ -0,0 +1,6 @@
+import type { ScrapeStatus } from '../services/scraper.js';
+interface LoadingScreenProps {
+    status?: ScrapeStatus | null;
+}
+export declare function LoadingScreen({ status }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingScreen.js

@@ -0,0 +1,21 @@
+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':
+            return 'Preparing recipe...';
+        case 'ai':
+            return 'Recovering recipe...';
+        case 'error':
+            return 'Recipe failed to load.';
+        default:
+            return 'Loading recipe...';
+    }
+}
+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) }) })] }) }));
+}